From 63ee2f61b58dbe215b3ea36896846e35dc658d4c Mon Sep 17 00:00:00 2001 From: Srishty Mangutte <68679980+Srish-ty@users.noreply.github.com> Date: Mon, 13 Nov 2023 17:51:08 +0530 Subject: [PATCH] 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 87cace308b332a59c32c7aad62761ccfa86b3a51. * 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 <100484401+Shurtu-gal@users.noreply.github.com> --- config/content/Footer.js | 41 +- src/components/HeroSection/HeroSection.jsx | 4 +- src/components/HeroSection/styles.jsx | 2 +- src/components/index.js | 1 - src/components/marginals/Footer/AboutBox.jsx | 38 ++ src/components/marginals/Footer/Cradle.jsx | 36 ++ src/components/marginals/Footer/Footer.jsx | 24 + .../marginals/Footer/TermsNCredits.jsx | 16 + src/components/marginals/Footer/styles.jsx | 419 ++++++++++++++++++ .../marginals/Navbar/Menuontext.jsx | 2 +- src/components/marginals/Navbar/index.js | 2 +- src/components/marginals/Navbar/navbar.jsx | 2 +- src/components/marginals/Navbar/styles.js | 8 +- src/components/marginals/index.js | 2 +- src/components/sponsor section/styles.js | 6 +- src/pages/playground.js | 19 +- src/styles/global.css | 16 +- tailwind.config.js | 1 + 18 files changed, 597 insertions(+), 42 deletions(-) create mode 100644 src/components/marginals/Footer/AboutBox.jsx create mode 100644 src/components/marginals/Footer/Cradle.jsx create mode 100644 src/components/marginals/Footer/Footer.jsx create mode 100644 src/components/marginals/Footer/TermsNCredits.jsx create mode 100644 src/components/marginals/Footer/styles.jsx diff --git a/config/content/Footer.js b/config/content/Footer.js index 08694e2..4f426ed 100644 --- 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 index f8b81e9..160c468 100644 --- a/src/components/HeroSection/HeroSection.jsx +++ b/src/components/HeroSection/HeroSection.jsx @@ -31,8 +31,8 @@ export default function Hero() { {hero.content} - - + + diff --git a/src/components/HeroSection/styles.jsx b/src/components/HeroSection/styles.jsx index 8f8cd89..a44bfb7 100644 --- 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 `} -`; \ No newline at end of file +`; diff --git a/src/components/index.js b/src/components/index.js index 0074d74..c3da79f 100644 --- 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 new file mode 100644 index 0000000..8b13356 --- /dev/null +++ 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 ( + + + {abtLinks.map((link) => ( + + {link.title} + + ))} + + + + + + + + {aboutContent.title} + {aboutContent.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..c190bcf --- /dev/null +++ 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 ( + + + + + + + + {socials.slice(1, -1).map((s) => ( + + + + + + ))} + + + + + + + + + {text.content1} +
+ {text.content2} + + + ); +}; + +export default Cradle; diff --git a/src/components/marginals/Footer/Footer.jsx b/src/components/marginals/Footer/Footer.jsx new file mode 100644 index 0000000..b7dea02 --- /dev/null +++ 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 ( + + + + + + + + + + ); +}; diff --git a/src/components/marginals/Footer/TermsNCredits.jsx b/src/components/marginals/Footer/TermsNCredits.jsx new file mode 100644 index 0000000..675c2c4 --- /dev/null +++ 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 ( + + + Privacy & Cookies + Terms and Conditions + + {copyw.content} + + ); +}; + +export default TermsNCredits; diff --git a/src/components/marginals/Footer/styles.jsx b/src/components/marginals/Footer/styles.jsx new file mode 100644 index 0000000..3dbb520 --- /dev/null +++ b/src/components/marginals/Footer/styles.jsx @@ -0,0 +1,419 @@ +import styled, { keyframes } from 'styled-components'; +import tw from 'twin.macro'; +import { Container, Heading4, NavText, Body1, Body2 } from '../..'; + +export const FooterContainer = styled(Body1)` + ${tw` + flex + flex-row + justify-between + text-white + p-4 + bg-[#060616] +`} + @media (max-width: 800px) { + ${tw` + flex-col-reverse + items-center + justify-between + `} + } +`; + +export const InitialCont = styled.div` + ${tw` + w-[70vw] + flex + flex-col + justify-between + `} + @media (max-width: 800px) { + ${tw` + w-full + flex-row + items-center + justify-between + `} + } +`; + +// Cradle Container +export const SecondPendulumContainer = styled.div` + ${tw` + relative + flex + flex-col + items-center + justify-between + w-[500px] + text-white + p-4 + `} + @media (max-width: 800px) { + ${tw` + p-[0px] + w-full + h-[370px] + `} + } +`; + +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` + ${tw` + flex + flex-row + items-center + justify-center + w-full + h-auto + p-4 + mx-4 + pt-[100px] + text-[16px] + `} + @media (max-width: 800px) { + ${tw` + w-full + h-[300px] + pt-[0px] + `} + } +`; + +export const Ball = styled.div` + transform-origin: 50% -200px; + ${tw` + flex + flex-row + items-center + justify-center + relative + text-black + top-[100px] + float-left + w-[40px] + h-[40px] + bg-white + rounded-full + `} + &::before { + content: ''; + ${tw` + text-black + bg-black + block + absolute + h-[200px] + w-[3px] + top-[-200px] + left-[19px] + bg-[#575757] + `} + } + + @media (max-width: 800px) { + ${tw` + top-[80px] + `} + } + + &:hover { + background: linear-gradient( + -17.61deg, + #ff3fc0 0%, + #b067ff 25%, + #02daff 50%, + #14f195 75%, + #fecf29 100% + ); + } +`; + +// Define keyframes +const ball1Animation = keyframes` + 0%, 50% { + transform: rotate(0); + } + 100% { + transform: rotate(30deg); + } +`; + +const ball1Mob = keyframes` + 0%, 50% { + transform: rotate(0); + } + 100% { + transform: rotate(15deg); + background: linear-gradient( + -17.61deg, + #ff3fc0 0%, + #b067ff 25%, + #02daff 50%, + #14f195 75%, + #fecf29 100% + ); + } +`; + +const ball5Animation = keyframes` + 0%, 50% { + transform: rotate(0); + } + 100% { + transform: rotate(-30deg); + } +`; + +const ball5Mob = keyframes` + 0%, 50% { + transform: rotate(0); + } + 100% { + transform: rotate(-15deg); + background: linear-gradient( + -17.61deg, + #ff3fc0 0%, + #b067ff 25%, + #02daff 50%, + #14f195 75%, + #fecf29 100% + ); + } +`; + +const ballColour = keyframes` + 0%, 50% { + background: white; + } + 100% { + background: linear-gradient( + -17.61deg, + #ff3fc0 0%, + #b067ff 25%, + #02daff 50%, + #14f195 75%, + #fecf29 100% + ); + } +`; + +// Apply animations to specific elements +export const Ball1 = styled(Ball)` + animation: ${ball1Animation} 1s infinite alternate, ${ballColour} 1s infinite alternate; + @media (max-width: 600px) { + animation: ${ball1Mob} 1s ease-out infinite alternate; + } +`; + +export const Ball5 = styled(Ball)` + animation: ${ball5Animation} 1s ease-out 1s infinite alternate, + ${ballColour} 1s ease-out 1s infinite alternate; + @media (max-width: 600px) { + animation: ${ball5Mob} 1s ease-out 1s 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 + bg-[#060616] + `} + @media (max-width: 600px) { + ${tw` + h-[250px] + px-0 + `} + } +`; + +export const FirstRow = styled.div` + ${tw` + w-full + flex + flex-row + justify-start + p-2 + `} + @media (max-width: 800px) { + ${tw` + flex-col + w-[50vw] + mx-0 + `} + } + @media (max-width: 500px) { + ${tw` + flex-col + w-[40vw] + mx-0 + `} + } +`; + +export const FrItems = styled.a` + ${tw` + text-white + text-xl + px-4 + py-6 +`} + @media (max-width: 1000px) { + ${tw` + px-2 + py-6 + `} + } +`; + +export const AboutBox = styled.div` + ${tw` + flex + flex-row + text-lg + w-[55vw] + mx-4 + my-8 + p-5 + bg-[#080822] + `} + @media (max-width: 800px) { + display: none; + } + @media (max-width: 600px) { + ${tw` + w-[80vw] + m-auto + `} + } +`; + +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] +`} + @media (max-width: 1000px) { + display: none; + } +`; + +export const LogoImg = styled.img` + ${tw` + w-full + `} +`; + +// Terms and Credits +export const LastLine = styled.div` + ${tw` + text-gray-500 + h-[50px] + w-[60vw] + flex + flex-row + justify-around + items-center + `} + @media (max-width: 800px) { + ${tw` + w-full + h-[250px] + flex-col-reverse + items-baseline + `} + } + @media (max-width: 600px) { + ${tw` + h-[250px] + flex-col-reverse + items-baseline + `} + } +`; + +export const Terms = styled.div` + ${tw` + flex + flex-row + justify-start + `} + @media (max-width: 600px) { + ${tw` + flex-col + items-baseline + `} +`; + +export const ConditionItems = styled.a` + ${tw` + text-xl + px-4 + py-6 +`} + @media (max-width: 800px) { + ${tw` + px-1 + py-4 + `} +`; + +export const Credits = styled.div` + ${tw` + mx-2 + px-8 + `} + @media (max-width: 1000px) { + ${tw` + m-[0px] + px-2 + py-6 + `} +`; diff --git a/src/components/marginals/Navbar/Menuontext.jsx b/src/components/marginals/Navbar/Menuontext.jsx index f75b75c..c76d5ed 100644 --- a/src/components/marginals/Navbar/Menuontext.jsx +++ b/src/components/marginals/Navbar/Menuontext.jsx @@ -3,4 +3,4 @@ import { createContext } from 'react'; export const MenuContext = createContext({ menuOpen: null, toggleMenuOpen: null, -}); \ No newline at end of file +}); diff --git a/src/components/marginals/Navbar/index.js b/src/components/marginals/Navbar/index.js index 2f192b0..4446f6a 100644 --- a/src/components/marginals/Navbar/index.js +++ b/src/components/marginals/Navbar/index.js @@ -1 +1 @@ -export { default as NavBar } from './navbar' \ No newline at end of file +export { default as NavBar } from './navbar'; diff --git a/src/components/marginals/Navbar/navbar.jsx b/src/components/marginals/Navbar/navbar.jsx index 0e50787..de5d6ec 100644 --- a/src/components/marginals/Navbar/navbar.jsx +++ b/src/components/marginals/Navbar/navbar.jsx @@ -47,4 +47,4 @@ const NavBar = () => { ); }; -export default NavBar; \ No newline at end of file +export default NavBar; diff --git a/src/components/marginals/Navbar/styles.js b/src/components/marginals/Navbar/styles.js index 8d49ad4..6b6782f 100644 --- a/src/components/marginals/Navbar/styles.js +++ b/src/components/marginals/Navbar/styles.js @@ -9,7 +9,7 @@ export const NavContainer = styled.div` align-items: center; justify-content: space-between; padding: 6px 64px; - gap:240px; + gap: 240px; border-radius: 12px; @media (max-width: 1024px) { padding: '6px 24px 6px 24px'; @@ -35,8 +35,8 @@ export const NavLink = styled.a` color: white; transition-duration: 500ms; font-size: 18px; - font-weight:700; - line-height:24px; + font-weight: 700; + line-height: 24px; transition: 0.5s; display: flex; align-items: centre; @@ -233,4 +233,4 @@ export const CustomLink = styled.a` font-family: sans-serif; font-weight: bold; margin-top: 2rem; -`; \ No newline at end of file +`; diff --git a/src/components/marginals/index.js b/src/components/marginals/index.js index e703c8b..b613ca1 100644 --- a/src/components/marginals/index.js +++ b/src/components/marginals/index.js @@ -1 +1 @@ -export {default as NavBar} from './Navbar/navbar' \ No newline at end of file +export { default as NavBar } from './Navbar/navbar'; diff --git a/src/components/sponsor section/styles.js b/src/components/sponsor section/styles.js index ba2a920..58f3317 100644 --- a/src/components/sponsor section/styles.js +++ b/src/components/sponsor section/styles.js @@ -251,7 +251,6 @@ export const GammaSponsors = styled.div` } `; - export const DeltaLogoFirst = styled.div` ${tw` flex @@ -259,7 +258,7 @@ export const DeltaLogoFirst = styled.div` md:gap-[48px] gap-[24px] `} -` +`; export const DeltaLogoSecond = styled.div` ${tw` @@ -268,7 +267,7 @@ export const DeltaLogoSecond = styled.div` md:gap-[78px] gap-[24px] `} -` +`; export const DeltaLogoContainer = styled.div` ${tw` @@ -279,7 +278,6 @@ export const DeltaLogoContainer = styled.div` items-center justify-center `} - `; export const DeltaContainer = styled.div` diff --git a/src/pages/playground.js b/src/pages/playground.js index 46f0921..64cb4d0 100644 --- a/src/pages/playground.js +++ b/src/pages/playground.js @@ -1,17 +1,10 @@ -import React, { useState } from 'react'; -import NavBar from '../components/marginals/Navbar/navbar'; -import { MenuContext } from '../components/marginals/Navbar/Menuontext'; +import React from 'react'; +import { Footer } from '../components/marginals/Footer/Footer'; export default function Playground() { - - const [menuOpen, setMenuOpen] = useState(false) - const toggleMenuOpen = () => - menuOpen ? setMenuOpen(false) : setMenuOpen(true) return ( - <> - - - - +
+
+
); -} \ No newline at end of file +} diff --git a/src/styles/global.css b/src/styles/global.css index 682b4cc..269ff2e 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -170,13 +170,13 @@ table { } :root { - --background-primary: #0E0812; - --color-primary-pink: #FF8CD9; - --color-primary-purple: #C48DFF; - --color-primary-blue: #67E9FF; - --color-primary-green: #72F7BF; - --color-neutral-white: #FFFFFF; - --color-neutral-yellow: #FEE27F; + --background-primary: #0e0812; + --color-primary-pink: #ff8cd9; + --color-primary-purple: #c48dff; + --color-primary-blue: #67e9ff; + --color-primary-green: #72f7bf; + --color-neutral-white: #ffffff; + --color-neutral-yellow: #fee27f; --max-width: 83.5em; --max-width-bleed: 90%; --max-width-narrow: 50em; @@ -186,4 +186,4 @@ table { syntax: ''; initial-value: 132deg; inherits: false; -} \ No newline at end of file +} diff --git a/tailwind.config.js b/tailwind.config.js index 5b9684a..7c91830 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -82,6 +82,7 @@ module.exports = { 400: '#A1A1A1', 500: '#858585', 600: '#545454', + 700: '#9FA3A9', }, 'neutral-yellow': { 50: '#FEE27F',