Footer

src/components/Footer/AboutBox.jsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import styled from 'styled-components';
+import tw from 'twin.macro';
+import { Heading3 } from '..';
+
+const AboutContainer = ({ AbtLogo }) => {
+  return (
+    <FirstAboutContainer>
+      <FirstRow>
+        <FrItems>About US</FrItems>
+        <FrItems>Contact US</FrItems>
+        <FrItems>Sponsor US</FrItems>
+      </FirstRow>
+
+      <AboutBox>
+        <LogoCont>
+          {' '}
+          <LogoImg src={AbtLogo} alt='nit logo' />{' '}
+        </LogoCont>
+        <Para>
+          <Heading3>About NIT Rourkela</Heading3>
+          <Content>
+            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.
+          </Content>
+        </Para>
+      </AboutBox>
+    </FirstAboutContainer>
+  );
+};
+
+export const FirstAboutContainer = styled.div`
+  ${tw`
+  text-white
+  p-4
+`}
+  background: #060616;
+`;
+
+export const FirstRow = styled.div`
+  ${tw`
+  w-full
+  flex
+  flex-row
+  justify-start	
+  p-2
+  `}
+`;
+
+export const FrItems = styled.span`
+  ${tw`
+  text-white
+  text-xl
+  px-4
+  py-6
+`}
+`;
+
+export const AboutBox = styled.div`
+  ${tw`
+    flex
+    flex-row
+    text-lg
+    w-[851px]
+    mx-4
+    my-8
+    p-5
+    `}
+  background: #080822;
+`;
+
+export const Para = styled.p`
+  ${tw`
+    flex
+    flex-col
+    mx-5
+
+    `}
+`;
+export const Content = styled.p`
+  ${tw`
+    my-5
+    text-neutral-white-700
+    `}
+`;
+
+export const LogoCont = styled.span`
+  ${tw`
+  w-[250px]
+`}
+`;
+
+export const LogoImg = styled.img`
+  ${tw`
+    w-full
+    `}
+`;
+
+export default AboutContainer;

src/components/Footer/Footer.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Container, Heading2, Heading3 } from '..';
+import { FooterContainer, InitialCont, ImgCont, SecondPendulumContainer } from './styles';
+import { NitLogo, FooterImg } from './images';
+import TermsNCredits from './TermsNCredits';
+import AboutContainer from './AboutBox';
+import PendulumGpt from './Pendulum_gpt';
+import Pendulums from './Pendulums';
+
+export const Footer = () => {
+  return (
+    <>
+      <ImgCont src={FooterImg} />
+      <FooterContainer>
+        <InitialCont>
+          <AboutContainer AbtLogo={NitLogo} />
+
+          <SecondPendulumContainer>
+            <PendulumGpt />
+          </SecondPendulumContainer>
+        </InitialCont>
+
+        <TermsNCredits />
+      </FooterContainer>
+    </>
+  );
+};

src/components/Footer/Pendulum_gpt.jsx

@@ -0,0 +1,41 @@
+import React, { useState, useEffect } from 'react';
+import styled from 'styled-components';
+
+const PendulumContainer = styled.div`
+  width: 10px;
+  height: 100px;
+  background-color: #3498db;
+  border-radius: 50%;
+  position: relative;
+  top: 0;
+  transition: transform 0.1s;
+`;
+
+const PendulumGpt = () => {
+  const [angle, setAngle] = useState(0);
+  const [direction, setDirection] = useState(1);
+
+  useEffect(() => {
+    const pendulumAnimation = setInterval(() => {
+      setAngle((prevAngle) => prevAngle + direction);
+    }, 10);
+
+    return () => {
+      clearInterval(pendulumAnimation);
+    };
+  }, [angle, direction]);
+
+  useEffect(() => {
+    if (angle >= 45 || angle <= -45) {
+      setDirection(-direction);
+    }
+  }, [angle, direction]);
+
+  const pendulumStyle = {
+    transform: `rotate(${angle}deg)`,
+  };
+
+  return <PendulumContainer style={pendulumStyle} />;
+};
+
+export default PendulumGpt;

src/components/Footer/Pendulums.jsx

@@ -0,0 +1,45 @@
+import React, { useState, useEffect } from 'react';
+import './styles';
+
+const Pendulum = () => {
+  const [angle, setAngle] = useState(0);
+  const [direction, setDirection] = useState(1);
+
+  const pendulumStyle = {
+    transform: `rotate(${angle}deg)`,
+  };
+
+  useEffect(() => {
+    const pendulumAnimation = setInterval(() => {
+      setAngle((prevAngle) => prevAngle + direction);
+    }, 10);
+
+    return () => {
+      clearInterval(pendulumAnimation);
+    };
+  }, [angle, direction]);
+
+  useEffect(() => {
+    if (angle >= 45 || angle <= -45) {
+      setDirection(-direction);
+    }
+  }, [angle, direction]);
+
+  return <div className='pendulum' style={pendulumStyle}></div>;
+};
+
+function Pendulums() {
+  return (
+    <div className='Pendulums'>
+      <div className='pendulum-container'>
+        <Pendulum />
+        <Pendulum />
+        <Pendulum />
+        <Pendulum />
+        <Pendulum />
+      </div>
+    </div>
+  );
+}
+
+export default Pendulums;

src/components/Footer/TermsNCredits.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import styled from 'styled-components';
+import tw from 'twin.macro';
+
+const TermsNCredits = () => {
+  return (
+    <LastLine>
+      <Terms>
+        <ConditionItems>Privacy & Cookies</ConditionItems>
+        <ConditionItems>Terms and Conditions</ConditionItems>
+      </Terms>
+
+      <Credits>Architected with ❤️ by HackNITR Team</Credits>
+    </LastLine>
+  );
+};
+
+export const LastLine = styled.div`
+  ${tw`
+  text-gray-500
+    h-[50px]
+    w-full
+    flex
+    flex-row
+    justify-start	
+    items-center
+  `}
+`;
+
+export const Terms = styled.div`
+  ${tw`
+  flex
+  flex-row
+  justify-start	
+  `}
+`;
+
+export const ConditionItems = styled.span`
+  ${tw`
+  text-xl
+  px-4
+  py-6
+`}
+`;
+
+export const Credits = styled.div`
+  ${tw`
+  mx-2
+  px-8
+  `}
+`;
+export default TermsNCredits;

src/components/Footer/images/index.js

@@ -0,0 +1,3 @@
+// export all the images present in this folder to be used in other folders or files
+export { default as FooterImg } from './Frame 791.png';
+export { default as NitLogo } from './nitr_logo.png';

src/components/Footer/styles.jsx

@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+import tw from 'twin.macro';
+import { Container, Heading4, NavText, Body1, Body2 } from '..';
+
+export const FooterContainer = styled(Body1)`
+  ${tw`
+  text-white
+  p-4
+`}
+  background: #060616;
+`;
+
+export const InitialCont = styled.div`
+  ${tw`
+  w-full
+  flex
+  flex-row
+  justify-between		
+  `}
+`;
+
+export const SecondPendulumContainer = styled.div`
+  ${tw` 
+  w-[30%]
+  text-white
+  p-4
+  `}
+  background: #080822;
+`;
+
+export const ImgCont = styled.img`
+  ${tw`
+  w-full
+`}
+`;
+
+export const Comp2 = styled(Container)`
+  background-color: red;
+  ${tw`
+   text-white
+   border-4
+   border-white
+`}
+`;

src/pages/playground.js

@@ -10,6 +10,7 @@ import {
   ButtonMeta,
   ButtonMetaLarge,
 } from '../components';
+import { Footer } from '../components/Footer/Footer';
 
 export default function Playground() {
   return (
@@ -25,6 +26,7 @@ export default function Playground() {
       <Body2>GDSC</Body2>
       <ButtonMeta>GDSC</ButtonMeta>
       <ButtonMetaLarge>GDSC</ButtonMetaLarge>
+      <Footer />
     </div>
   );
 }

tailwind.config.js

@@ -86,6 +86,7 @@ module.exports = {
         400: '#A1A1A1',
         500: '#858585',
         600: '#545454',
+        700: '#9FA3A9'
         }
 
         ,'neutral-yellow': {