feat: adding footer (#241)

* feat: initial commit for footer * fix: fixed isssues * fix: fixed isssues * fix: fixed isssues * fix: fixed isssues * fix: resolved issues * Revert "fix: resolved issues" This reverts commit 87cace3. * feat: added logo and content * fix: resolve issues * feat: text color * feat: text color * fix: text color * fix: text color * fix: text color * fix: text color * feat: added pendulum and index in images * feat: added terms conditions and credits. * fix: created separate file for credits * fix: separated initial abut section * fix: resolved formatting issue using prettier * feat: added content in config * feat: added content in config * fix: prettier check * feat: added cradle files * fix: converted to styled comps * fix: converted to styled comps * fix: formatted files * fix: deleted css files * feat: added social logos * fix: separated styles in styles.jsx * fix: formatted using pretter * fix: converted css to tailwind * feat: made responsive * feat: added colour gradient * fix: moved images to cloudinary * fix: changed mobile view layout * fix: changed mobile view layout * fix: formatted Herosection using prettire * fix: formatted Herosection using prettire * fix: changed mobile view layout * fix: changed aboutsection layout * feat: created links array and mapped * fix: used absolute imports * feat: added gradient animation while moving * added animation for desktop. fixed layout for tab * feat: added pointer to links * fix: ghaction changes * fix: foramtted navbar files --------- Co-authored-by: Ashish Padhy <[email protected]>
dscnitrourkela · Nov 13, 2023 · 63ee2f6 · 63ee2f6
1 parent ab1b723
commit 63ee2f6
Show file tree

Hide file tree

Showing 18 changed files with 597 additions and 42 deletions.
diff --git a/config/content/Footer.js b/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: [

diff --git a/src/components/HeroSection/HeroSection.jsx b/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>

diff --git a/src/components/HeroSection/styles.jsx b/src/components/HeroSection/styles.jsx
@@ -146,4 +146,4 @@ export const HeroButtons = styled.div`
     items-center
     mt-4
  `}
-`;
+`;
diff --git a/src/components/index.js b/src/components/index.js
@@ -1,2 +1 @@
-
 export * from './shared';
diff --git a/src/components/marginals/Footer/AboutBox.jsx b/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;
diff --git a/src/components/marginals/Footer/Cradle.jsx b/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;
diff --git a/src/components/marginals/Footer/Footer.jsx b/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>
+  );
+};
diff --git a/src/components/marginals/Footer/TermsNCredits.jsx b/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;