From b5fe63a6079822c58f7e5b74b4f79047342b44fa Mon Sep 17 00:00:00 2001 From: Srishty M Date: Wed, 8 Nov 2023 23:26:25 +0530 Subject: [PATCH] fix: separated styles in styles.jsx --- config/content/Footer.js | 2 +- src/components/Footer/AboutBox.jsx | 96 ------- src/components/Footer/Cradle.jsx | 107 -------- src/components/Footer/styles.jsx | 53 ---- src/components/marginals/Footer/AboutBox.jsx | 39 +++ src/components/marginals/Footer/Cradle.jsx | 39 +++ .../{ => marginals}/Footer/Footer.jsx | 6 +- .../{ => marginals}/Footer/TermsNCredits.jsx | 35 +-- .../Footer/images/Frame 791.png | Bin .../Footer/images/TwitterX.png | Bin .../{ => marginals}/Footer/images/fb.png | Bin .../{ => marginals}/Footer/images/github.png | Bin .../{ => marginals}/Footer/images/index.js | 0 .../{ => marginals}/Footer/images/insta.png | Bin .../Footer/images/linkedin.png | Bin .../Footer/images/nitr_logo.png | Bin .../Footer/images/social_pend.png | Bin .../Footer/images/tilted_pend.png | Bin src/components/marginals/Footer/styles.jsx | 245 ++++++++++++++++++ src/pages/playground.js | 3 +- 20 files changed, 330 insertions(+), 295 deletions(-) delete mode 100644 src/components/Footer/AboutBox.jsx delete mode 100644 src/components/Footer/Cradle.jsx delete mode 100644 src/components/Footer/styles.jsx create mode 100644 src/components/marginals/Footer/AboutBox.jsx create mode 100644 src/components/marginals/Footer/Cradle.jsx rename src/components/{ => marginals}/Footer/Footer.jsx (79%) rename src/components/{ => marginals}/Footer/TermsNCredits.jsx (51%) rename src/components/{ => marginals}/Footer/images/Frame 791.png (100%) rename src/components/{ => marginals}/Footer/images/TwitterX.png (100%) rename src/components/{ => marginals}/Footer/images/fb.png (100%) rename src/components/{ => marginals}/Footer/images/github.png (100%) rename src/components/{ => marginals}/Footer/images/index.js (100%) rename src/components/{ => marginals}/Footer/images/insta.png (100%) rename src/components/{ => marginals}/Footer/images/linkedin.png (100%) rename src/components/{ => marginals}/Footer/images/nitr_logo.png (100%) rename src/components/{ => marginals}/Footer/images/social_pend.png (100%) rename src/components/{ => marginals}/Footer/images/tilted_pend.png (100%) create mode 100644 src/components/marginals/Footer/styles.jsx diff --git a/config/content/Footer.js b/config/content/Footer.js index 81fc1ce..7b87722 100644 --- a/config/content/Footer.js +++ b/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: { diff --git a/src/components/Footer/AboutBox.jsx b/src/components/Footer/AboutBox.jsx deleted file mode 100644 index b67795a..0000000 --- a/src/components/Footer/AboutBox.jsx +++ /dev/null @@ -1,96 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; -import tw from 'twin.macro'; -import { Heading3 } from '..'; - -const AboutContainer = ({ AbtLogo, about_content }) => { - console.log(about_content); - return ( - - - About US - Contact US - Sponsor US - - - - - - - - {about_content.title} - {about_content.text} - - - - ); -}; - -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; diff --git a/src/components/Footer/Cradle.jsx b/src/components/Footer/Cradle.jsx deleted file mode 100644 index 3d8f595..0000000 --- a/src/components/Footer/Cradle.jsx +++ /dev/null @@ -1,107 +0,0 @@ -import React from 'react'; -import styled, { keyframes } from 'styled-components'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { SocialLogo } from './styles'; -import { insta, fb, twitter, gh, li } from './images'; - -const CradleContainer = styled.div` - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - width: auto; - height: auto; - padding-top: 100px; -`; - -const CradleBefore = styled.div` - content: ''; - display: block; - position: absolute; - width: 200px; - height: 6px; - top: 0; - left: 0; - border-radius: 3px; - background: #bdc3c7; -`; - -const Ball = styled.div` - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - position: relative; - color: black; - top: 100px; - float: left; - width: 40px; - height: 40px; - background: white; - border-radius: 50%; - transform-origin: 50% -200px; - &:before { - content: ''; - color: black; - background: black; - display: block; - position: absolute; - height: 200px; - width: 3px; - top: -200px; - left: 19px; - background: #575757; - } -`; - -// Define keyframes -const ball1Animation = keyframes` - 0%, 50% { - transform: rotate(0); - } - 100% { - transform: rotate(30deg); - } -`; - -const ball5Animation = keyframes` - 0%, 50% { - transform: rotate(0); - } - 100% { - transform: rotate(-30deg); - } -`; - -// Apply animations to specific elements -const Ball1 = styled(Ball)` - animation: ${ball1Animation} 0.8s ease-out infinite alternate; -`; - -const Ball5 = styled(Ball)` - animation: ${ball5Animation} 0.8s ease-out 0.8s infinite alternate; -`; - -const Cradle = ({ socials }) => { - return ( - - - - - - - {socials.slice(1, -1).map((s) => ( - - - - - - ))} - - - - - ); -}; - -export default Cradle; diff --git a/src/components/Footer/styles.jsx b/src/components/Footer/styles.jsx deleted file mode 100644 index 99f4408..0000000 --- a/src/components/Footer/styles.jsx +++ /dev/null @@ -1,53 +0,0 @@ -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` - flex - flex-col - items-center - w-[30%] - text-white - p-4 - `} - background: #080822; -`; - -export const ImgCont = styled.img` - ${tw` - w-full -`} -`; - -export const SocialLogo = styled.img` - ${tw` - w-[20px] -`} -`; - -export const Comp2 = styled(Container)` - background-color: red; - ${tw` - text-white - border-4 - border-white -`} -`; diff --git a/src/components/marginals/Footer/AboutBox.jsx b/src/components/marginals/Footer/AboutBox.jsx new file mode 100644 index 0000000..48e8a98 --- /dev/null +++ b/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 ( + + + About US + Contact US + Sponsor US + + + + + + + + {about_content.title} + {about_content.text} + + + + ); +}; + +export default AboutContainer; diff --git a/src/components/marginals/Footer/Cradle.jsx b/src/components/marginals/Footer/Cradle.jsx new file mode 100644 index 0000000..1027a46 --- /dev/null +++ b/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 ( + + + + + + + + {socials.slice(1, -1).map((s) => ( + + + + + + ))} + + + + + + + + + {text.content1} +
+ {text.content2} + + + ); +}; + +export default Cradle; diff --git a/src/components/Footer/Footer.jsx b/src/components/marginals/Footer/Footer.jsx similarity index 79% rename from src/components/Footer/Footer.jsx rename to src/components/marginals/Footer/Footer.jsx index 724b091..884891a 100644 --- a/src/components/Footer/Footer.jsx +++ b/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 = () => { - + diff --git a/src/components/Footer/TermsNCredits.jsx b/src/components/marginals/Footer/TermsNCredits.jsx similarity index 51% rename from src/components/Footer/TermsNCredits.jsx rename to src/components/marginals/Footer/TermsNCredits.jsx index 08aab0d..4f0e41f 100644 --- a/src/components/Footer/TermsNCredits.jsx +++ b/src/components/marginals/Footer/TermsNCredits.jsx @@ -1,6 +1,7 @@ import React from 'react'; import styled from 'styled-components'; import tw from 'twin.macro'; +import { LastLine, Terms, ConditionItems, Credits } from './styles'; const TermsNCredits = ({ copyw }) => { return ( @@ -15,38 +16,4 @@ const TermsNCredits = ({ copyw }) => { ); }; -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; diff --git a/src/components/Footer/images/Frame 791.png b/src/components/marginals/Footer/images/Frame 791.png similarity index 100% rename from src/components/Footer/images/Frame 791.png rename to src/components/marginals/Footer/images/Frame 791.png diff --git a/src/components/Footer/images/TwitterX.png b/src/components/marginals/Footer/images/TwitterX.png similarity index 100% rename from src/components/Footer/images/TwitterX.png rename to src/components/marginals/Footer/images/TwitterX.png diff --git a/src/components/Footer/images/fb.png b/src/components/marginals/Footer/images/fb.png similarity index 100% rename from src/components/Footer/images/fb.png rename to src/components/marginals/Footer/images/fb.png diff --git a/src/components/Footer/images/github.png b/src/components/marginals/Footer/images/github.png similarity index 100% rename from src/components/Footer/images/github.png rename to src/components/marginals/Footer/images/github.png diff --git a/src/components/Footer/images/index.js b/src/components/marginals/Footer/images/index.js similarity index 100% rename from src/components/Footer/images/index.js rename to src/components/marginals/Footer/images/index.js diff --git a/src/components/Footer/images/insta.png b/src/components/marginals/Footer/images/insta.png similarity index 100% rename from src/components/Footer/images/insta.png rename to src/components/marginals/Footer/images/insta.png diff --git a/src/components/Footer/images/linkedin.png b/src/components/marginals/Footer/images/linkedin.png similarity index 100% rename from src/components/Footer/images/linkedin.png rename to src/components/marginals/Footer/images/linkedin.png diff --git a/src/components/Footer/images/nitr_logo.png b/src/components/marginals/Footer/images/nitr_logo.png similarity index 100% rename from src/components/Footer/images/nitr_logo.png rename to src/components/marginals/Footer/images/nitr_logo.png diff --git a/src/components/Footer/images/social_pend.png b/src/components/marginals/Footer/images/social_pend.png similarity index 100% rename from src/components/Footer/images/social_pend.png rename to src/components/marginals/Footer/images/social_pend.png diff --git a/src/components/Footer/images/tilted_pend.png b/src/components/marginals/Footer/images/tilted_pend.png similarity index 100% rename from src/components/Footer/images/tilted_pend.png rename to src/components/marginals/Footer/images/tilted_pend.png diff --git a/src/components/marginals/Footer/styles.jsx b/src/components/marginals/Footer/styles.jsx new file mode 100644 index 0000000..96b70d4 --- /dev/null +++ b/src/components/marginals/Footer/styles.jsx @@ -0,0 +1,245 @@ +import styled, { keyframes } 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 + `} +`; + +// Cradle Container +export const SecondPendulumContainer = styled.div` + ${tw` + relative + flex + flex-col + items-center + justify-between + w-[30%] + text-white + p-4 + `} + background: #080822; +`; + +export const SocialText = styled.div` + ${tw` + absolute + bottom-12 + left-0.5 + text-neutral-white-700 + text-lg + text-center + w-full + `} +`; + +export const SocialsCont = styled.div` + ${tw` + flex + flex-col + justify-between + `} +`; +export const CradleContainer = styled.div` + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + width: auto; + height: auto; + padding-top: 100px; +`; + +export const Ball = styled.div` + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + position: relative; + color: black; + top: 100px; + float: left; + width: 40px; + height: 40px; + background: white; + border-radius: 50%; + transform-origin: 50% -200px; + &:before { + content: ''; + color: black; + background: black; + display: block; + position: absolute; + height: 200px; + width: 3px; + top: -200px; + left: 19px; + background: #575757; + } +`; + +// Define keyframes +const ball1Animation = keyframes` + 0%, 50% { + transform: rotate(0); + } + 100% { + transform: rotate(30deg); + } +`; + +const ball5Animation = keyframes` + 0%, 50% { + transform: rotate(0); + } + 100% { + transform: rotate(-30deg); + } +`; + +// Apply animations to specific elements +export const Ball1 = styled(Ball)` + animation: ${ball1Animation} 0.8s ease-out infinite alternate; +`; + +export const Ball5 = styled(Ball)` + animation: ${ball5Animation} 0.8s ease-out 0.8s infinite alternate; +`; + +export const ImgCont = styled.img` + ${tw` + w-full +`} +`; + +export const SocialLogo = styled.img` + ${tw` + w-[20px] +`} +`; + +// About Container +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 + `} +`; + +// Terms and Credits +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 const Comp2 = styled(Container)` + background-color: red; + ${tw` + text-white + border-4 + border-white +`} +`; diff --git a/src/pages/playground.js b/src/pages/playground.js index d8aa760..2e3ff47 100644 --- a/src/pages/playground.js +++ b/src/pages/playground.js @@ -10,7 +10,8 @@ import { ButtonMeta, ButtonMetaLarge, } from '../components'; -import { Footer } from '../components/Footer/Footer'; + +import { Footer } from '../components/marginals/Footer/Footer'; export default function Playground() { return (