From de059582787ec53890c70267ecbd1f6237881687 Mon Sep 17 00:00:00 2001 From: Anmol Pattnayak <103681122+SirSimon162@users.noreply.github.com> Date: Fri, 13 Oct 2023 19:40:14 +0530 Subject: [PATCH 1/5] feat: add hero section (#92) * feat: add hero * chore: fix small things * fix: build changes * fix: button size fixed --------- Co-authored-by: Ashish Padhy <100484401+Shurtu-gal@users.noreply.github.com> --- config/content/FAQ.js | 97 +++++++++---------- config/content/index.js | 2 +- gatsby-browser.js | 55 ----------- images/Arrow.svg | 3 + images/HeroBtnBelow.svg | 10 ++ images/HeroBtnTop.svg | 9 ++ package.json | 1 - src/components/FAQSection/FAQSection.jsx | 9 +- src/components/HeroSection/HeroButton.jsx | 72 ++++++++++++++ src/components/HeroSection/HeroContent.jsx | 20 ++++ src/components/HeroSection/HeroSection.jsx | 18 ++++ .../HeroSection/VideoBackground.jsx | 50 ++++++++++ src/components/HeroSection/styles.js | 94 ++++++++++++++++++ src/components/index.js | 3 + .../marginals/Navbar/DesktopNav.jsx | 4 +- .../marginals/Navbar/MenuContext.jsx | 2 +- src/components/marginals/Navbar/styles.jsx | 12 +-- src/components/shared/Layout.jsx | 8 +- src/pages/index.js | 42 ++++---- src/pages/playground.js | 19 +--- yarn.lock | 29 +----- 21 files changed, 374 insertions(+), 185 deletions(-) create mode 100644 images/Arrow.svg create mode 100644 images/HeroBtnBelow.svg create mode 100644 images/HeroBtnTop.svg create mode 100644 src/components/HeroSection/HeroButton.jsx create mode 100644 src/components/HeroSection/HeroContent.jsx create mode 100644 src/components/HeroSection/HeroSection.jsx create mode 100644 src/components/HeroSection/VideoBackground.jsx create mode 100644 src/components/HeroSection/styles.js diff --git a/config/content/FAQ.js b/config/content/FAQ.js index 2b60021..d3b0ea9 100644 --- a/config/content/FAQ.js +++ b/config/content/FAQ.js @@ -1,53 +1,52 @@ -const FAQContent = { - FAQS: [ - { - id: 1, - question: 'When would Innovision happen?', - answer: - 'INNOVISION is the largest ' + - 'techno-management fest of Eastern India lorem ipsum dolor ' + - 'ipsum dolor somethin lorem ipsum dolor somethin lorem ipsum dolor somethin', - }, - { - id: 2, - question: 'What is INNOVISION?', - answer: 'INNOVISION is the largest techno-management fest of Eastern India', - }, - { - id: 3, - question: 'What is INNOVISION?', - answer: 'INNOVISION is the largest techno-management fest of Eastern India', - }, - { - id: 4, - question: 'What is INNOVISION?', - answer: 'INNOVISION is the largest techno-management fest of Eastern India', - }, - { - id: 5, - question: 'What is INNOVISION?', - answer: 'INNOVISION is the largest techno-management fest of Eastern India', - }, - { - id: 6, - question: 'What is INNOVISION?', - answer: 'INNOVISION is the largest techno-management fest of Eastern India', - }, - { - id: 7, - question: 'What is INNOVISION?', - answer: 'INNOVISION is the largest techno-management fest of Eastern India', - }, - { - id: 8, - question: 'What is INNOVISION?', - answer: 'INNOVISION is the largest techno-management fest of Eastern India', - }, - ], +export const FAQS = [ + { + id: 1, + question: 'When would Innovision happen?', + answer: + 'INNOVISION is the largest ' + + 'techno-management fest of Eastern India lorem ipsum dolor ' + + 'ipsum dolor somethin lorem ipsum dolor somethin lorem ipsum dolor somethin', + }, + { + id: 2, + question: 'What is INNOVISION?', + answer: 'INNOVISION is the largest techno-management fest of Eastern India', + }, + { + id: 3, + question: 'What is INNOVISION?', + answer: 'INNOVISION is the largest techno-management fest of Eastern India', + }, + { + id: 4, + question: 'What is INNOVISION?', + answer: 'INNOVISION is the largest techno-management fest of Eastern India', + }, + { + id: 5, + question: 'What is INNOVISION?', + answer: 'INNOVISION is the largest techno-management fest of Eastern India', + }, + { + id: 6, + question: 'What is INNOVISION?', + answer: 'INNOVISION is the largest techno-management fest of Eastern India', + }, + { + id: 7, + question: 'What is INNOVISION?', + answer: 'INNOVISION is the largest techno-management fest of Eastern India', + }, + { + id: 8, + question: 'What is INNOVISION?', + answer: 'INNOVISION is the largest techno-management fest of Eastern India', + }, +]; + +export const FAQContent = Object.freeze({ title: 'Frequently Asked Questions', footer: 'Still have questions? Feel free to contact us', footerLink: 'contact-us', id: 'faq', -}; - -export default FAQContent; +}); diff --git a/config/content/index.js b/config/content/index.js index 9b5c514..8bf4add 100644 --- a/config/content/index.js +++ b/config/content/index.js @@ -1,6 +1,6 @@ export { default as nav } from './Navigation'; export { default as footer } from './Footer'; -export { default as faq } from './FAQ'; +export * from './FAQ'; export { default as success } from './Success'; export { default as pageNotFound } from './PageNotFound'; export { default as _sponsor } from './sponsors'; diff --git a/gatsby-browser.js b/gatsby-browser.js index c2662d4..40b1558 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -8,61 +8,6 @@ import { Layout } from './src/components'; const queryClient = new QueryClient(); -// Get fonts on initial load of the app -export const onRenderBody = ({ setHeadComponents }) => { - // @import url('fonts/Roslindale/font.css'); - setHeadComponents([ - , - , - , - , - , - , - ]); -}; - export const wrapPageElement = ({ element, props }) => ( // eslint-disable-next-line react/jsx-props-no-spreading {element} diff --git a/images/Arrow.svg b/images/Arrow.svg new file mode 100644 index 0000000..816004e --- /dev/null +++ b/images/Arrow.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/images/HeroBtnBelow.svg b/images/HeroBtnBelow.svg new file mode 100644 index 0000000..6a98a98 --- /dev/null +++ b/images/HeroBtnBelow.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/images/HeroBtnTop.svg b/images/HeroBtnTop.svg new file mode 100644 index 0000000..b6f51eb --- /dev/null +++ b/images/HeroBtnTop.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/package.json b/package.json index 7bc9469..243fbde 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,6 @@ "@fortawesome/free-regular-svg-icons": "^6.4.2", "@fortawesome/free-solid-svg-icons": "^6.4.2", "@fortawesome/react-fontawesome": "^0.2.0", - "@reach/router": "^1.3.4", "@tanstack/react-query": "^4.35.3", "add": "^2.0.6", "axios": "^1.5.0", diff --git a/src/components/FAQSection/FAQSection.jsx b/src/components/FAQSection/FAQSection.jsx index d5e9f2c..4203678 100644 --- a/src/components/FAQSection/FAQSection.jsx +++ b/src/components/FAQSection/FAQSection.jsx @@ -1,15 +1,14 @@ import React from 'react'; import AccordionItem from './AccordionItem'; -import FAQContent from '../../../config/content/FAQ'; import { FAQSectionContainer, FAQGrid, FAQFirstHalf, FAQSecondHalf } from './styles'; import { SectionLayout } from '../shared'; +import { FAQContent, FAQS } from '../../../config/content'; const FAQSection = () => { - const FAQ = FAQContent.FAQS; - const middleIndex = Math.ceil(FAQ.length / 2); + const middleIndex = Math.ceil(FAQS.length / 2); - const firstHalf = FAQ.splice(0, middleIndex); - const secondHalf = FAQ.splice(-middleIndex); + const firstHalf = FAQS.splice(0, middleIndex); + const secondHalf = FAQS.splice(-middleIndex); return ( + + + REGISTER NOW + arrow + + Hero-Btn + + + Hero-Btn + + + ); +} + +export default HeroButton; diff --git a/src/components/HeroSection/HeroContent.jsx b/src/components/HeroSection/HeroContent.jsx new file mode 100644 index 0000000..ba08eaa --- /dev/null +++ b/src/components/HeroSection/HeroContent.jsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { HeroContainer, HeroTitle, Year, Dates, DatesDiv, Line } from './styles'; +import HeroButton from './HeroButton'; + +function HeroContent() { + return ( + + INNOVISION + 2K23 + + + 3rd-5th November 2023 + + + + + ); +} + +export default HeroContent; diff --git a/src/components/HeroSection/HeroSection.jsx b/src/components/HeroSection/HeroSection.jsx new file mode 100644 index 0000000..752bf05 --- /dev/null +++ b/src/components/HeroSection/HeroSection.jsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { Container } from '../shared'; +import { SectionContainer } from './styles'; +import HeroContent from './HeroContent'; +import VideoBackground from './VideoBackground'; + +function HeroSection() { + return ( + + + + + + + ); +} + +export default HeroSection; diff --git a/src/components/HeroSection/VideoBackground.jsx b/src/components/HeroSection/VideoBackground.jsx new file mode 100644 index 0000000..d88144d --- /dev/null +++ b/src/components/HeroSection/VideoBackground.jsx @@ -0,0 +1,50 @@ +import React from 'react'; +import styled from 'styled-components'; +import tw from 'twin.macro'; + +const Container = styled.div` + ${tw` + h-[110%] + `} +`; + +const VideoContainer = styled.div` + ${tw` + absolute + -z-[10] + top-0 + left-0 + w-screen + h-full + overflow-hidden + `} +`; + +const VideoElement = styled.video` + ${tw` + scale-[1.2] + min-w-full + min-h-full + object-cover + mt-[145px] + sm:mt-[30px] + translate-x-0 + md:translate-x-[20px] + `} +`; + +function VideoBackground() { + const vid = + 'https://res.cloudinary.com/dmofs5r4h/video/upload/v1697105601/screen-capture_2__2_ttrxjt.mp4'; + return ( + + + + + + + + ); +} + +export default VideoBackground; diff --git a/src/components/HeroSection/styles.js b/src/components/HeroSection/styles.js new file mode 100644 index 0000000..9bca309 --- /dev/null +++ b/src/components/HeroSection/styles.js @@ -0,0 +1,94 @@ +import styled from 'styled-components'; +import tw from 'twin.macro'; + +export const SectionContainer = styled.div` + ${tw` + min-h-screen + w-full + overflow-x-hidden + overflow-y-hidden + flex + relative + mb-20 + `} + @media (min-width: 2560px) { + align-items: center; + } +`; + +export const HeroContainer = styled.div` + ${tw` + flex + flex-col + items-center + justify-center + `} +`; + +export const HeroTitle = styled.h1` + ${tw` + mt-[89px] + text-[128px] + lg:text-[90px] + md:text-[80px] + sm:text-[48px] + leading-[110px] + md:leading-[60px] + font-Roslindale + text-color-primary + `}; +`; + +export const Year = styled.h1` + ${tw` + text-[64px] + lg:text-[44px] + md:text-[34px] + sm:text-[24px] + leading-[110px] + md:leading-[64px] + sm:leading-[36px] + font-Roslindale + text-color-primary + `}; +`; + +export const DatesDiv = styled.div` + ${tw` + mt-[12px] + flex + items-center + justify-center + gap-[68px] + xl:gap-[48px] + md:gap-[24px] + sm:gap-[12px] + mb-[40px] + md:mb-[24px] +`} +`; + +export const Line = styled.div` + ${tw` + h-[1px] + w-[200px] + xl:w-[150px] + md:w-[80px] + sm:w-[68px] + bg-[#FFFFFF] +`} +`; + +export const Dates = styled.p` + ${tw` + inline-block + text-[24px] + xl:text-[20px] + md:text-[18px] + sm:text-[14px] + leading-[64px] + md:leading-[50px] + font-Roslindale + text-color-primary +`} +`; diff --git a/src/components/index.js b/src/components/index.js index 7c4f050..1b85b5c 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -28,3 +28,6 @@ export { default as SponsorSection } from './SponsorSection/SponsorSection'; // Event section export { default as EventSection } from './EventSection'; + +// Hero section +export { default as HeroSection } from './HeroSection/HeroSection'; diff --git a/src/components/marginals/Navbar/DesktopNav.jsx b/src/components/marginals/Navbar/DesktopNav.jsx index 55acb23..fb0a832 100644 --- a/src/components/marginals/Navbar/DesktopNav.jsx +++ b/src/components/marginals/Navbar/DesktopNav.jsx @@ -30,7 +30,7 @@ const handleScroll = (id) => { function DesktopNav() { const menuContext = useContext(MenuContext); - const { toggleMenuOpen, menuOpen } = menuContext; + const { toggleMenuOpen, menuopen } = menuContext; const authContext = useContext(AuthContext); const { authenticated, login, logout } = authContext; @@ -44,7 +44,7 @@ function DesktopNav() { - +
    {nav.navItems.map(({ id, name, link }) => (
  • (menuOpen ? '12px' : '8px')}; - transform: ${({ menuOpen }) => (menuOpen ? 'rotate(40deg)' : null)}; + top: ${({ menuopen }) => (menuopen ? '12px' : '8px')}; + transform: ${({ menuopen }) => (menuopen ? 'rotate(40deg)' : null)}; } &::after { - width: ${({ menuOpen }) => (menuOpen ? '100%' : '80%')}; - bottom: ${({ menuOpen }) => (menuOpen ? '12px' : '8px')}; - transform: ${({ menuOpen }) => (menuOpen ? 'rotate(-40deg)' : null)}; + width: ${({ menuopen }) => (menuopen ? '100%' : '80%')}; + bottom: ${({ menuopen }) => (menuopen ? '12px' : '8px')}; + transform: ${({ menuopen }) => (menuopen ? 'rotate(-40deg)' : null)}; } @media all and (min-width: 1023px) { display: none; diff --git a/src/components/shared/Layout.jsx b/src/components/shared/Layout.jsx index c85db65..462934f 100644 --- a/src/components/shared/Layout.jsx +++ b/src/components/shared/Layout.jsx @@ -3,15 +3,15 @@ import React, { useState } from 'react'; import { DesktopNav, Footer, MenuContext, MobileNav } from '../marginals/index'; const Layout = ({ children }) => { - const [menuOpen, setMenuOpen] = useState(false); + const [menuopen, setMenuOpen] = useState(false); - const toggleMenuOpen = () => (menuOpen ? setMenuOpen(false) : setMenuOpen(true)); + const toggleMenuOpen = () => (menuopen ? setMenuOpen(false) : setMenuOpen(true)); return ( <> {/* eslint-disable-next-line react/jsx-no-constructed-context-values */} - + - {menuOpen && } + {menuopen && } {children}