fix: separated styles in styles.jsx

config/content/Footer.js

@@ -8,7 +8,7 @@ import {
 } from '@fortawesome/free-brands-svg-icons';
 import config from '../website';
 
-import { insta, fb, twitter, gh, li } from '../../src/components/Footer/images';
+import { insta, fb, twitter, gh, li } from '../../src/components/marginals/Footer/images';
 
 export default {
   hacknitr: {

src/components/marginals/Footer/AboutBox.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import styled from 'styled-components';
+import tw from 'twin.macro';
+import { Heading3 } from '../..';
+import {
+  FirstAboutContainer,
+  FirstRow,
+  FrItems,
+  AboutBox,
+  Para,
+  Content,
+  LogoCont,
+  LogoImg,
+} from './styles';
+
+const AboutContainer = ({ AbtLogo, about_content }) => {
+  console.log(about_content);
+  return (
+    <FirstAboutContainer>
+      <FirstRow>
+        <FrItems>About US</FrItems>
+        <FrItems>Contact US</FrItems>
+        <FrItems>Sponsor US</FrItems>
+      </FirstRow>
+
+      <AboutBox>
+        <LogoCont>
+          <LogoImg src={AbtLogo} alt={about_content.img.alt} />
+        </LogoCont>
+        <Para>
+          <Heading3>{about_content.title}</Heading3>
+          <Content>{about_content.text}</Content>
+        </Para>
+      </AboutBox>
+    </FirstAboutContainer>
+  );
+};
+
+export default AboutContainer;

src/components/marginals/Footer/Cradle.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import tw from 'twin.macro';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { SocialLogo, SocialText, SocialsCont, CradleContainer, Ball, Ball1, Ball5 } from './styles';
+import { fb, twitter } from './images';
+
+const Cradle = ({ socials, text }) => {
+  return (
+    <SocialsCont>
+      <CradleContainer>
+        <a href='https://facebook.com/hacknitr'>
+          <Ball1>
+            <SocialLogo src={fb} />
+          </Ball1>
+        </a>
+        {socials.slice(1, -1).map((s) => (
+          <a href={s.link}>
+            <Ball>
+              <SocialLogo src={s.name} />
+            </Ball>
+          </a>
+        ))}
+        <a href='https://twitter.com/hacknitr'>
+          <Ball5>
+            <SocialLogo src={twitter} />
+          </Ball5>
+        </a>
+      </CradleContainer>
+
+      <SocialText>
+        {text.content1}
+        <br />
+        {text.content2}
+      </SocialText>
+    </SocialsCont>
+  );
+};
+
+export default Cradle;

src/components/Footer/Footer.jsx → src/components/marginals/Footer/Footer.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Container, Heading2, Heading3 } from '..';
-import footer from '../../../config/content/Footer';
+import { Container, Heading2, Heading3 } from '../..';
+import footer from '../../../../config/content/Footer';
 import { FooterContainer, InitialCont, ImgCont, SecondPendulumContainer } from './styles';
 import { NitLogo, FooterImg } from './images';
 import TermsNCredits from './TermsNCredits';
@@ -15,7 +15,7 @@ export const Footer = () => {
         <InitialCont>
           <AboutContainer AbtLogo={NitLogo} about_content={footer.cards[0]} />
           <SecondPendulumContainer>
-            <Cradle socials={footer.socials} />
+            <Cradle socials={footer.socials} text={footer.icons} />
           </SecondPendulumContainer>
         </InitialCont>
         <TermsNCredits copyw={footer.copyright} />