feat: added CA Page

config/content/CA.js

@@ -0,0 +1,32 @@
+export const CADetails = {
+  title: 'Campus Ambassador Program',
+  content: [
+    {
+      title: 'Perks',
+      list: [
+        'Certificate of appreciation',
+        'Free merchandise and gift hampers on completion of certain milestones',
+        'Free of cost access to webinar and workshop',
+        'Publicity in social media handles',
+        'Special discount for next fest by NIT Rourkela',
+        'Building network and personal connections',
+      ],
+    },
+    {
+      title: 'Procedure',
+      list: [
+        'Register yourself for INNOVISION at inno.nitrkl.in',
+        'Go to CA program',
+        'Click on Register as CA',
+        'Register as CA',
+        'Your Mobile Number is your Unique Referral Code',
+        'Help your friends register themselves and apply the unique Referral code',
+        'Win Goodies and Hampers',
+      ],
+    },
+  ],
+  button: {
+    text: 'Register as Campus Ambassador',
+    link: 'https://forms.gle/i1tzjmebnmySJsLb9',
+  },
+};

config/content/Footer.js

@@ -29,6 +29,11 @@ export default {
         name: 'Refund Policy',
         link: 'https://drive.google.com/file/d/1cLnuEBtt7yFfC1dQeFVOP0Oxf_hsCTzb/view',
       },
+      {
+        id: 5,
+        name: 'CA Program',
+        link: '/ca',
+      },
     ],
   },
   information: [

src/components/CAProgram/CAProgram.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Body1, Heading2, Heading3, SectionLayout } from '../shared';
+import { CADetails } from '../../../config/content/CA';
+import { ButtonContainer, ItemsContainer, PerksContainer } from './styles';
+import Button from '../shared/Button';
+
+const CAProgram = () => (
+  <SectionLayout>
+    <Heading2>{CADetails.title}</Heading2>
+    <ItemsContainer>
+      {CADetails.content.map((item) => (
+        <div
+          key={item.title}
+          style={{
+            width: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '24px',
+          }}
+        >
+          <Heading3
+            style={{
+              color: '#91F9D3',
+            }}
+          >
+            {item.title}
+          </Heading3>
+          <PerksContainer>
+            {item.list.map((listItem, index) => (
+              <Body1 key={listItem}>
+                {index + 1}. {listItem}
+              </Body1>
+            ))}
+          </PerksContainer>
+        </div>
+      ))}
+    </ItemsContainer>
+    <ButtonContainer>
+      <Button text={CADetails.button.text} variant='filled' link={CADetails.button.link} />
+    </ButtonContainer>
+  </SectionLayout>
+);
+
+export default CAProgram;

src/components/CAProgram/styles.js

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+import tw from 'twin.macro';
+
+export const PerksContainer = styled.div`
+  ${tw`
+    flex
+    flex-col
+    gap-2
+  `}
+`;
+
+export const ItemsContainer = styled.div`
+  ${tw`
+    w-[95%]
+    mx-auto
+    flex
+    flex-col
+    gap-10
+    mt-10
+  `}
+
+  @media (max-width: 512px) {
+    width: 100%;
+  }
+`;
+
+export const ButtonContainer = styled.div`
+  ${tw`
+    md:w-[20%]
+    mx-auto
+    w-[40%]
+    flex
+    justify-center
+  `}
+`;

src/pages/ca.js

@@ -0,0 +1,12 @@
+/* eslint-disable max-len */
+import React from 'react';
+import CAProgram from '../components/CAProgram/CAProgram';
+import { PrivateRoute } from '../components';
+
+const CA = () => (
+  <PrivateRoute>
+    <CAProgram />
+  </PrivateRoute>
+);
+
+export default CA;