Merge pull request dscnitrourkela#4 from Cybrite/campus-&-community

feat: added communityPartners & campusAmbasador

next.config.mjs

@@ -1,8 +1,13 @@
-import withTwin from './withTwin.mjs'
+import withTwin from './withTwin.mjs';
 
 /**
  * @type {import('next').NextConfig}
  */
-export default withTwin({
+const nextConfig = {
   reactStrictMode: true,
-})
+  images: {
+    domains: ['res.cloudinary.com'],
+  },
+};
+
+export default withTwin(nextConfig);

src/app/playground/page.js

@@ -6,15 +6,19 @@ import Gallery from '@/components/gallery/gallery';
 import Prizes from '@/components/prizes/prizes';
 import { StatsMain } from '@/components/stats/stats-main';
 import Timeline from '@/components/timeline/timeline';
+import CommunityPartnerSection from '@/components/communityPartners/CommunityPartners';
+import CampusAmbasador from '@/components/campusAmbasador/CampusAmbasador';
 
 const Playground = () => {
   return (
-    <div className='flex items-center justify-center flex-col w-full h-full px-5'>
+    <div className='flex flex-col items-center justify-center w-full h-full px-5'>
       <AboutUs />
       <StatsMain />
       <Prizes />
-      <Gallery />
+      {/* <Gallery /> */}
       <Timeline />
+      <CommunityPartnerSection />
+      <CampusAmbasador />
     </div>
   );
 };

src/components/campusAmbasador/CampusAmbasador.jsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { H1 } from '../shared/typography/Headings';
+
+import {
+  Container,
+  ContentSection,
+  Description,
+  IllustrationSection,
+  TitleContainer,
+  ItemContainer,
+  Text,
+  InnerCover,
+  OuterCover,
+  End,
+  Title,
+  TextContainer,
+  PointContainer,
+  SvgIconContainer,
+} from './styles';
+import { PrimaryButton } from '../shared/typography/Button';
+import SvgIcon from '../communityPartners/Daimond';
+import {
+  BULLET_POINTS,
+  CAMPUS_AMBASADOR,
+  DETAILS,
+} from '@/config/content/CampusAmbasador/index.js';
+import { GalleryHeading } from '../gallery/styles';
+import Image from 'next/image';
+
+const CampusAmbasador = () => {
+  return (
+    <>
+      <>
+        <TitleContainer>
+          <GalleryHeading>{DETAILS.title}</GalleryHeading>
+        </TitleContainer>
+
+        <Container>
+          <IllustrationSection>
+            {/* <img src={CAMPUS_AMBASADOR} alt='Community ambassador' className='w-full h-auto' /> */}
+            <Image
+              src={CAMPUS_AMBASADOR}
+              alt='Campus ambassador'
+              width={500}
+              height={500}
+              className='w-full h-auto'
+            />
+          </IllustrationSection>
+          <ContentSection>
+            <Description>{DETAILS.des}</Description>
+            <ul>
+              {BULLET_POINTS.map((item, index) => (
+                <ItemContainer key={index}>
+                  <PointContainer>
+                    <SvgIconContainer>
+                      <SvgIcon />
+                    </SvgIconContainer>
+                    <TextContainer>
+                      <Title>{item.title}</Title>
+                      <Text>{item.description}</Text>
+                    </TextContainer>
+                  </PointContainer>
+                </ItemContainer>
+              ))}
+            </ul>
+          </ContentSection>
+        </Container>
+      </>
+
+      <OuterCover>
+        <InnerCover>
+          <End>{DETAILS.end}</End>
+          <PrimaryButton text={DETAILS.button} />
+        </InnerCover>
+      </OuterCover>
+    </>
+  );
+};
+
+export default CampusAmbasador;

src/components/campusAmbasador/styles.jsx

@@ -0,0 +1,102 @@
+import styled from 'styled-components';
+import tw from 'twin.macro';
+import { GalleryHeadingContainer } from '../gallery/styles';
+
+const Container = styled.div`
+  ${tw`relative flex flex-col items-center justify-between w-full px-4 mx-auto sm:max-w-md sm:px-6 md:max-w-full md:px-8 md:flex-row lg:max-w-6xl lg:px-12 xl:max-w-7xl`}
+`;
+
+const ContentSection = styled.div`
+  ${tw`flex flex-col w-full mb-8 space-y-4 
+      sm:space-y-6 
+      md:w-[45%] md:mb-0 md:pr-2
+      lg:w-1/2 lg:pr-6 
+      xl:pr-8`}
+`;
+
+const Description = styled.p`
+  ${tw`mb-4 text-lg font-semibold text-white leading-relaxed
+      sm:mb-5 sm:text-2xl
+      md:text-xl md:leading-[1.6]
+      lg:text-[28px]
+      xl:text-[32px] xl:leading-[1.73]`}
+`;
+
+const End = styled.p`
+  ${tw`mb-4 text-[20px] text-[#FC952A] font-bold leading-[1.73]
+      sm:mb-5`}
+`;
+
+const IllustrationSection = styled.div`
+  ${tw`w-full pl-0 mt-6 sm:mb-3.5
+      sm:mt-8 
+      md:w-[55%] md:mt-0 md:pl-2
+      lg:w-1/2 lg:pl-6 
+      xl:pl-8`}
+`;
+
+const TitleContainer = styled(GalleryHeadingContainer)`
+  ${tw`flex justify-center px-4 py-3 mx-auto mt-32 mb-2 rounded-lg w-fit sm:mb-6 sm:px-6 sm:py-4 md:px-4 md:mb-24 lg:px-8 xl:py-5`}
+  background: #f6dfc2;
+  border-radius: 1.125rem;
+`;
+
+const ItemContainer = styled.li`
+  ${tw`flex items-center gap-2 py-4 sm:gap-4 md:gap-3`}
+  align-self: stretch;
+`;
+
+const PointContainer = styled.div`
+  ${tw`flex flex-wrap items-center sm:flex-nowrap md:flex-wrap lg:flex-nowrap`}
+`;
+
+const SvgIconContainer = styled.div`
+  ${tw`flex-shrink-0 mr-2 sm:mr-4 md:mr-3 lg:mr-6`}
+`;
+
+const TextContainer = styled.div`
+  ${tw`flex flex-col flex-1 min-w-0`}
+`;
+
+const Title = styled.p`
+  ${tw`text-[#FC952A] font-satoshi truncate text-sm
+      sm:text-base
+      md:text-sm
+      lg:text-base`}
+`;
+
+const Text = styled.p`
+  ${tw`text-sm text-white font-satoshi sm:text-base md:text-sm lg:text-base`}
+`;
+
+const OuterCover = styled.div`
+  ${tw`flex w-full px-4 mt-8 justify-end
+      sm:px-6 
+      md:px-8 lg:justify-end md:w-[95%]
+      lg:w-[100%] 
+      xl:w-[85%]
+      2xl:w-[80%]
+      lg:mr-8
+      `}
+`;
+
+const InnerCover = styled.div`
+  ${tw`ml-7 sm:ml-5 md:ml-4 lg:ml-1 xl:ml-4 2xl:ml-11`}
+`;
+
+export {
+  Container,
+  ContentSection,
+  Description,
+  IllustrationSection,
+  TitleContainer,
+  ItemContainer,
+  Text,
+  OuterCover,
+  InnerCover,
+  End,
+  Title,
+  TextContainer,
+  PointContainer,
+  SvgIconContainer,
+};

src/components/communityPartners/CommunityPartners.jsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { H1 } from '../shared/typography/Headings';
+import {
+  Container,
+  ContentSection,
+  Description,
+  IllustrationSection,
+  TitleContainer,
+  ItemContainer,
+  Text,
+  InnerCover,
+  OuterCover,
+  End,
+} from './styles';
+import { PrimaryButton } from '../shared/typography/Button';
+import SvgIcon from './Daimond';
+import {
+  BULLET_POINTS,
+  COMMUNITY_PARTNER,
+  DETAILS,
+} from '@/config/content/CommunityPartners/index.js';
+import { GalleryHeading } from '../gallery/styles';
+import Image from 'next/image';
+
+const CommunityPartnerSection = () => {
+  return (
+    <>
+      <>
+        <TitleContainer>
+          <GalleryHeading>{DETAILS.title}</GalleryHeading>
+        </TitleContainer>
+
+        <Container>
+          <ContentSection>
+            <Description>{DETAILS.des}</Description>
+            <ul>
+              {BULLET_POINTS.map((item, index) => (
+                <ItemContainer key={index}>
+                  <SvgIcon />
+                  <Text>{item.description}</Text>
+                </ItemContainer>
+              ))}
+            </ul>
+          </ContentSection>
+
+          <IllustrationSection>
+            {/* <img
+              src={COMMUNITY_PARTNER}
+              alt='Community partners collaborating'
+              className='w-full h-auto'
+            /> */}
+            <Image
+              src={COMMUNITY_PARTNER}
+              alt='Community partner'
+              width={500}
+              height={500}
+              className='w-full h-auto'
+            />
+          </IllustrationSection>
+        </Container>
+      </>
+
+      <OuterCover>
+        <InnerCover>
+          <End>{DETAILS.end}</End>
+          <PrimaryButton text={DETAILS.button} />
+        </InnerCover>
+      </OuterCover>
+    </>
+  );
+};
+
+export default CommunityPartnerSection;

src/components/communityPartners/styles.jsx

@@ -0,0 +1,68 @@
+import styled from 'styled-components';
+import tw from 'twin.macro';
+import { GalleryHeadingContainer } from '../gallery/styles';
+
+const Container = styled.div`
+  ${tw`relative flex flex-col items-center justify-between w-full max-w-6xl px-4 mx-auto sm:px-6 md:px-8 md:flex-row lg:px-12`}
+`;
+
+const ContentSection = styled.div`
+  ${tw`flex flex-col w-full mt-8 mb-8 space-y-0 sm:space-y-6 md:w-1/2 md:mb-0`}
+`;
+
+const Description = styled.p`
+  ${tw`mb-4 text-xl text-white font-semibold leading-[1.73]
+      sm:mb-5 sm:text-2xl 
+      lg:text-[32px]`}
+`;
+
+const End = styled.p`
+  ${tw`mb-4 text-[20px] text-[#FC952A] font-bold leading-[1.73]
+      sm:mb-5`}
+`;
+
+const IllustrationSection = styled.div`
+  ${tw`w-full pl-0 mt-6 md:w-1/2 md:mt-0 md:pl-8 sm:mb-3.5`}
+`;
+
+const TitleContainer = styled(GalleryHeadingContainer)`
+  ${tw`flex justify-center px-4 py-3 mx-auto mt-32 mb-2 rounded-lg w-fit sm:mb-6 sm:px-6 sm:py-4 md:px-4 md:mb-24 lg:px-8 xl:py-5`}
+  background: #f6dfc2;
+  border-radius: 1.125rem;
+`;
+
+const ItemContainer = styled.li`
+  ${tw`flex items-center gap-3 py-3 sm:gap-4 sm:py-4`}
+  align-self: stretch;
+`;
+
+const Text = styled.p`
+  ${tw`text-white font-satoshi sm:text-base`}
+`;
+
+const OuterCover = styled.div`
+  ${tw`flex w-full px-4 mt-8 justify-center
+      sm:px-6 
+      md:px-8 md:justify-start md:w-[95%]
+      lg:w-[90%] 
+      2xl:w-[80%]
+      xl:w-[75%]
+      `}
+`;
+
+const InnerCover = styled.div`
+  ${tw`ml-7 sm:ml-5 md:ml-[-1.25rem] lg:ml-1 xl:ml-4 2xl:ml-11`}
+`;
+
+export {
+  Container,
+  ContentSection,
+  Description,
+  IllustrationSection,
+  TitleContainer,
+  ItemContainer,
+  Text,
+  OuterCover,
+  InnerCover,
+  End,
+};

src/config/content/CampusAmbasador/index.js

@@ -0,0 +1,32 @@
+export const BULLET_POINTS = [
+  {
+    point: 'point 1',
+    title: 'Certificates of Valor:',
+    description: 'Awarded as you conquer initial registration checkpoints.',
+  },
+  {
+    point: 'point 2',
+    title: 'Letter of Recommendation:',
+    description: 'Ascend the checkpoint ladder to receive this cherished recommendation.',
+  },
+  {
+    point: 'point 3',
+    title: 'Swags of Distinction:',
+    description: 'Traverse the milestones to claim exclusive rewards and coveted swags.',
+  },
+  {
+    point: 'point 4',
+    title: 'Networking Odyssey:',
+    description: 'Unlock opportunities to connect with diverse communities and tech luminaries.',
+  },
+];
+
+export const CAMPUS_AMBASADOR =
+  'https://res.cloudinary.com/dqqyuvg1v/image/upload/v1736605065/Seminar-pana_1_kwv98g.png';
+
+export const DETAILS = {
+  title: 'Become a Campus Ambassador',
+  des: 'Ambassadorial Privileges',
+  end: 'Join us as a Campus Ambassador and leave your mark!',
+  button: 'Apply Now',
+};