feat: adding footer

config/content/Footer.js

@@ -9,6 +9,27 @@ import {
 import config from '../website';
 
 export default {
+  links: [
+    {
+      title: 'About Us',
+      id: 'about-us',
+      url: '',
+    },
+    {
+      title: 'Contact Us',
+      id: 'contact-us',
+      url: '',
+    },
+    {
+      title: 'Sponsor Us',
+      id: 'sponsor-us',
+      url: '',
+    },
+  ],
+  Nitr: {
+    imgSrc: 'https://res.cloudinary.com/dxsyc4p2j/image/upload/v1699473996/nitr_logo_vdj3aw.png',
+  },
+
   hacknitr: {
     img: 'https://res.cloudinary.com/db4zymomi/image/upload/hacknitr/logo1_rg97i6.png',
     alt: 'HackNITR 4.0',
@@ -23,7 +44,7 @@ export default {
   cards: [
     {
       title: 'About NIT Rourkela',
-      text: 'With a total strength of around 7000 students, NIT Rourkela is one of the most coveted institutes for higher studies by future technocrats. With its lush green and humongous area, it indeed makes a pleasant campus impression.',
+      text: 'With a strength of around 7000 students, NIT Rourkela is one of the most coveted institutes for higher studies by future technocrats. With its lush green and humongous area, it indeed makes a pleasant campus impression.',
       id: 'footer-card-1',
       img: {
         src: 'https://res.cloudinary.com/db4zymomi/image/upload/hacknitr/nitr_huzgbq.png',
@@ -42,28 +63,38 @@ export default {
   ],
   socials: [
     {
+      name: 'fb',
+      icon: faFacebook,
+      link: 'https://facebook.com/hacknitr',
+      imgLink: 'https://res.cloudinary.com/dxsyc4p2j/image/upload/v1699473996/fb_zzl91w.png',
+    },
+    {
+      name: 'insta',
       icon: faInstagram,
       link: 'https://www.instagram.com/hacknitr/',
+      imgLink: 'https://res.cloudinary.com/dxsyc4p2j/image/upload/v1699473996/insta_aktzjs.png',
     },
     {
+      name: 'li',
       icon: faLinkedin,
       link: 'https://www.linkedin.com/company/hacknitr/',
+      imgLink: 'https://res.cloudinary.com/dxsyc4p2j/image/upload/v1699473996/linkedin_eoenzs.png',
     },
     // {
     //   icon: faDiscord,
     //   link: 'https://hacknitr.com/discord',
     // },
     {
-      icon: faFacebook,
-      link: 'https://facebook.com/hacknitr',
-    },
-    {
+      name: 'gh',
       icon: faGithubSquare,
       link: 'https://github.com/dscnitrourkela/project-oregano',
+      imgLink: 'https://res.cloudinary.com/dxsyc4p2j/image/upload/v1699473996/github_ve2kbe.png',
     },
     {
+      name: 'twitter',
       icon: faTwitterSquare,
       link: 'https://twitter.com/hacknitr',
+      imgLink: 'https://res.cloudinary.com/dxsyc4p2j/image/upload/v1699473996/TwitterX_uua6eg.png',
     },
   ],
   organisers: [

src/components/HeroSection/HeroSection.jsx

@@ -31,8 +31,8 @@ export default function Hero() {
             </HeroHeadingBase>
             <TaglineText>{hero.content}</TaglineText>
           </ContentBlock>
-          <HeroButtons >
-            <DevfolioButton/>
+          <HeroButtons>
+            <DevfolioButton />
             <DiscordButton />
           </HeroButtons>
         </HeroTitle>

src/components/HeroSection/styles.jsx

@@ -146,4 +146,4 @@ export const HeroButtons = styled.div`
     items-center
     mt-4
  `}
-`;
+`;

src/components/index.js

@@ -1,2 +1 @@
-
 export * from './shared';

src/components/marginals/Footer/AboutBox.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Heading3 } from '../..';
+import {
+  FirstAboutContainer,
+  FirstRow,
+  FrItems,
+  AboutBox,
+  Para,
+  Content,
+  LogoCont,
+  LogoImg,
+} from './styles';
+
+const AboutContainer = ({ AbtLogo, aboutContent, abtLinks }) => {
+  return (
+    <FirstAboutContainer>
+      <FirstRow>
+        {abtLinks.map((link) => (
+          <FrItems href='#' key={link.id}>
+            {link.title}
+          </FrItems>
+        ))}
+      </FirstRow>
+
+      <AboutBox>
+        <LogoCont>
+          <LogoImg src={AbtLogo.imgSrc} alt={aboutContent.img.alt} />
+        </LogoCont>
+        <Para>
+          <Heading3>{aboutContent.title}</Heading3>
+          <Content>{aboutContent.text}</Content>
+        </Para>
+      </AboutBox>
+    </FirstAboutContainer>
+  );
+};
+
+export default AboutContainer;

src/components/marginals/Footer/Cradle.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { SocialLogo, SocialText, SocialsCont, CradleContainer, Ball, Ball1, Ball5 } from './styles';
+
+const Cradle = ({ socials, text }) => {
+  return (
+    <SocialsCont>
+      <CradleContainer>
+        <a href='https://facebook.com/hacknitr'>
+          <Ball1>
+            <SocialLogo src={socials[0].imgLink} />
+          </Ball1>
+        </a>
+        {socials.slice(1, -1).map((s) => (
+          <a key={socials.indexOf(s)} href={s.link}>
+            <Ball>
+              <SocialLogo src={s.imgLink} />
+            </Ball>
+          </a>
+        ))}
+        <a href='https://twitter.com/hacknitr'>
+          <Ball5>
+            <SocialLogo src={socials[socials.length - 1].imgLink} />
+          </Ball5>
+        </a>
+      </CradleContainer>
+
+      <SocialText>
+        {text.content1}
+        <br />
+        {text.content2}
+      </SocialText>
+    </SocialsCont>
+  );
+};
+
+export default Cradle;

src/components/marginals/Footer/Footer.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { footer } from '../../../../config';
+import { FooterContainer, InitialCont, SecondPendulumContainer } from './styles';
+import TermsNCredits from './TermsNCredits';
+import AboutContainer from './AboutBox';
+import Cradle from './Cradle';
+
+export const Footer = () => {
+  return (
+    <FooterContainer>
+      <InitialCont>
+        <AboutContainer
+          AbtLogo={footer.Nitr}
+          aboutContent={footer.cards[0]}
+          abtLinks={footer.links}
+        />
+        <TermsNCredits copyw={footer.copyright} />
+      </InitialCont>
+      <SecondPendulumContainer>
+        <Cradle socials={footer.socials} text={footer.icons} />
+      </SecondPendulumContainer>
+    </FooterContainer>
+  );
+};

src/components/marginals/Footer/TermsNCredits.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { LastLine, Terms, ConditionItems, Credits } from './styles';
+
+const TermsNCredits = ({ copyw }) => {
+  return (
+    <LastLine>
+      <Terms>
+        <ConditionItems href='#'>Privacy & Cookies</ConditionItems>
+        <ConditionItems href='#'>Terms and Conditions</ConditionItems>
+      </Terms>
+      <Credits>{copyw.content}</Credits>
+    </LastLine>
+  );
+};
+
+export default TermsNCredits;