dscnitrourkela · anmol5936 · Jun 9, 2024 · Jun 9, 2024 · Jun 9, 2024
diff --git a/src/components/marginals/footer/Footer.jsx b/src/components/marginals/footer/Footer.jsx
@@ -1,5 +1,83 @@
-const Footer = () => {
-  return <div>Footer</div>
-}
+// import React from "react";
+import {
+  Footer,
+  FooterTop,
+  Logos,
+  SocialLogo,
+  SocialLogoIndv,
+  SocialImg,
+  MainLogo,
+  AicheLogo1,
+  AicheLogo2,
+  Text,
+  Heading,
+  List,
+  ListItems,
+  FooterBottom,
+  MadeBy,
+  HeartIcon
+} from './Styles'
+
+import footerData from '../../../config/content/footerData/Footer.js'
 
-export default Footer
+export default function MyFooter() {
+  function renderListItem(item, title) {
+    {
+      if (typeof item === 'string') {
+        return item
+      } else if (title === 'Synergicon') {
+        return <a href={item.href}>{item.list}</a>
+      } else {
+        return `${item.name}:${item.number}`
+      }
+    }
+  }
+
+  return (
+    <>
+      <Footer>
+        <FooterTop>
+          <Logos>
+            <SocialLogo>
+              <SocialLogoIndv>
+                {footerData.images.socials.map((item) => (
+                  <a key={item.key} href={item.href}>
+                    <SocialImg src={item.img} alt={item.key} />
+                  </a>
+                ))}
+              </SocialLogoIndv>
+            </SocialLogo>
+            <MainLogo>
+              <AicheLogo1 src={footerData.images.aichelogo1} alt="aichelogo1" />
+              <AicheLogo2 src={footerData.images.aichelogo2} alt="aichelogo2" />
+            </MainLogo>
+          </Logos>
+          <Text>
+            {footerData.text.map((section, index) => (
+              <div key={index}>
+                <Heading>{section.title}</Heading>
+                <List>
+                  {section.info.map((item, i) => (
+                    <ListItems key={i}>{renderListItem(item, section.title)}</ListItems>
+                  ))}
+                </List>
+              </div>
+            ))}
+          </Text>
+        </FooterTop>
+        <FooterBottom>
+          {footerData.bottom.map((item, index) => (
+            <a key={index} href={item.href}>
+              {item.item}
+            </a>
+          ))}
+          <MadeBy>
+            Architected with
+            <HeartIcon src={footerData.images.heart} alt="heart" />
+            by GDSC NITR Team
+          </MadeBy>
+        </FooterBottom>
+      </Footer>
+    </>
+  )
+}
diff --git a/src/components/marginals/footer/Styles.jsx b/src/components/marginals/footer/Styles.jsx
@@ -0,0 +1,101 @@
+import styled from 'styled-components'
+import tw from 'twin.macro'
+
+export const Footer = styled.div`
+  ${tw`
+    h-[774px] 2.6md:h-[283px] 2.7md:h-[299.5px] 1.5xl:h-[483px] bg-brown-4 font-Poppins flex flex-col justify-between  
+  `}
+`
+
+export const FooterTop = styled.div`
+  ${tw`
+    px-[24px] pt-[23px] pb-[49px] 2.6md:h-[265.5px] 1.5xl:h-[400.3px] 2xl:px-[39px] 1.5xl:py-[48px] 2xl:py-[64px] flex justify-between flex-col gap-[47px] 2.6md:flex-row 2.6md:gap-[0px]
+  `}
+`
+
+export const Logos = styled.div`
+  ${tw`
+    h-[129.15px] 2xl:h-[306px] 2xl:w-[461.44px] mt-[10px] 2.6md:mt-0 flex-col text-brown-2 order-2 2.6md:order-1  
+  `}
+`
+
+export const SocialLogo = styled.div`
+  ${tw`
+    h-[48px] 1.5xl:mb-[146px]
+  `}
+`
+
+export const SocialLogoIndv = styled.div`
+  ${tw`
+    w-[105px] h-[21.98px] 1.5xl:w-[229.37px] 1.5xl:h-[48px] flex justify-between items-center gap-[5.7px] 2xl:gap-[12.45px]
+  `}
+`
+
+export const SocialImg = styled.img`
+  ${tw`
+    h-[21px] w-[21px] 1.5xl:h-[48px] 1.5xl:w-[48px]
+  `}
+`
+
+export const MainLogo = styled.div`
+  ${tw`
+    h-[67.16px] w-[262.04px] 2xl:h-[112.38px] 2xl:w-full flex items-end gap-[20.32px] 2.6md:gap-[15.5px] 2xl:gap-[57px]
+  `}
+`
+
+export const AicheLogo1 = styled.img`
+  ${tw`
+    w-[161.71px] h-[44.44px] 2.6md:w-[150px] 2.6md:h-[41.21px] 1.5xl:w-[230.58px] 1.5xl:h-[63.38px] 2xl:w-[270.58px] 2xl:h-[74.36px]
+  `}
+`
+
+export const AicheLogo2 = styled.img`
+  ${tw`
+    w-[80px] h-[67.16px] 2.6md:w-[75px] 2.6md:h-[62.26px] 1.5xl:w-[110.86px] 1.5xl:h-[93.07px] 2xl:w-[133.86px] 2xl:h-[112.38px]
+  `}
+`
+
+export const Text = styled.div`
+  ${tw`
+    flex flex-col 2.6md:flex-row gap-[45px] 2.6md:gap-[20px] 2.7md:gap-[50px] 1.5xl:gap-[122px] justify-between h-[472px] xxsm:w-[382px] 2.6md:h-auto 2.6md:w-auto 1.5xl:h-[306px] 1.5xl:w-[853.83px] order-1 2.6md:order-2 tracking-widest
+  `}
+`
+
+export const Heading = styled.h4`
+  ${tw`
+    mb-[16px] 1.5xl:mb-[32px] text-brown-3 font-semibold text-[17px] 2.6md:text-[15px] 2.7md:text-[20px] 1.5xl:text-[32px] 
+  `}
+`
+
+export const List = styled.ul`
+  ${tw`
+    text-[12px] 2.6md:text-[10px] 2.7md:text-[12.5px] 1.5xl:text-[18px] font-medium text-brown-2
+  `}
+`
+
+export const ListItems = styled.li`
+  ${tw`
+    mb-[16px]
+  `}
+  &:last-child {
+    ${tw`mb-0`}
+  }
+`
+
+export const FooterBottom = styled.div`
+  ${tw`
+    px-[12px] 1.5xl:px-[34px] py-[2px] 1.5xl:py-[27.65px] h-[32px] 2.7md:h-[34px] 1.5xl:h-[82.7px] flex gap-[9px] 1.5xl:gap-[41px] 2.7md:gap-[18px] bg-brown-5 text-brown-1 items-center justify-evenly 2.6md:justify-start text-[7.5px] xxsm:text-[9px] 1.5xl:text-[18px] font-medium
+  `}
+`
+
+export const MadeBy = styled.p`
+  ${tw`
+    flex justify-center items-center gap-[2px] 1.5xl:gap-[4px]
+  `}
+`
+
+export const HeartIcon = styled.img`
+  ${tw`
+    w-[9.88px] h-[9.88px] 1.5xl:w-[18px] 1.5xl:h-[18px]
+  `}
+`
diff --git a/src/config/content/footerData/Footer.js b/src/config/content/footerData/Footer.js
@@ -0,0 +1,65 @@
+export default {
+  text: [
+    {
+      title: 'Call Us',
+      info: [
+        {
+          name: 'abc',
+          number: '9999999999'
+        },
+        {
+          name: 'def',
+          number: '9999999999'
+        }
+      ]
+    },
+    {
+      title: 'Email Us',
+      info: ['[email protected]', '[email protected]']
+    },
+    {
+      title: 'Synergicon',
+      info: [
+        { list: 'ChES-NITR', href: '#' },
+        { list: 'National Institute of Technology', href: '#' },
+        { list: 'Donation', href: '#' },
+        { list: 'Schedule', href: '#' },
+        { list: 'FAQ', href: '#' }
+      ]
+    }
+  ],
+  bottom: [
+    { item: 'Privacy & Cookies', href: '#' },
+    { item: 'Terms and Conditions', href: '#' }
+  ],
+  images: {
+    socials: [
+      {
+        key: 'fb',
+        img: 'https://res.cloudinary.com/dpmlrxlzr/image/upload/v1717321887/Facebook_Mask_yhwtjf.svg',
+        href: '#'
+      },
+      {
+        key: 'insta',
+        img: 'https://res.cloudinary.com/dpmlrxlzr/image/upload/v1717321890/Insta_Mask_azvhlm.svg',
+        href: '#'
+      },
+      {
+        key: 'youtube',
+        img: 'https://res.cloudinary.com/dpmlrxlzr/image/upload/v1717321885/Youtube_Mask_atoact.svg',
+        href: '#'
+      },
+      {
+        key: 'linkedin',
+        img: 'https://res.cloudinary.com/dpmlrxlzr/image/upload/v1717321885/Linkdin_Mask_ydmzzr.svg',
+        href: '#'
+      }
+    ],
+    aichelogo1:
+      'https://res.cloudinary.com/dpmlrxlzr/image/upload/v1717322107/Mask_group_ag1tam.png',
+    aichelogo2:
+      'https://res.cloudinary.com/dpmlrxlzr/image/upload/v1717322215/Mask_group_1_tepdpv.png',
+    heart:
+      'https://res.cloudinary.com/dpmlrxlzr/image/upload/v1717323279/Hand_Drawn_Heart_2_bk9tz7.png'
+  }
+}
diff --git a/src/pages/Playground.jsx b/src/pages/Playground.jsx
@@ -1,5 +1,6 @@
 import { Sponsors } from '../components/sponsors/sponsors'
 import { TeamCarousel } from '../components/teamMembers/teamCarousel'
+import Footer from '../components/marginals/footer/Footer'
 
 const Playground = () => {
   return (
@@ -8,6 +9,7 @@ const Playground = () => {
       <p>For testing purpose</p>
       <TeamCarousel />
       <Sponsors />
+      <Footer />
     </div>
   )
 }

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -43,6 +43,7 @@ export default {
         '2.5xl': '1470px',
         '2.3xl': '1430px',
         '2xl': '1434px',
+        '1.5xl': '1306px',
         xl: '1280px',
 
         '1.9lg': '1238px',
@@ -51,6 +52,8 @@ export default {
         lg: '1024px',
 
         '3md': '976px',
+        '2.7md': '900px',
+        '2.6md': '722px',
         '2.5md': '700px',
         '1.5md': '710px',
         md: '672px',