diff --git a/config/content/FAQ.js b/config/content/FAQ.js index f0b2b95..d3b0ea9 100644 --- a/config/content/FAQ.js +++ b/config/content/FAQ.js @@ -1,59 +1,52 @@ -const FAQContent = { - FAQS: [ - { - id: 1, - question: 'What is INNOVISION? ', - answer: - 'Innovision is one of the biggest ' + - 'techno management fest organised by students of NITR,' + - ' with participation from all over India ', - }, - { - id: 2, - question: 'Who are we?', - answer: - 'Organised by students of NIT Rourkela, INNOVISION is the annual techno management.' + - 'With our unrivalled ability to host such technical fests ' + - "we were recognised as Odisha's top student chapter", - }, - { - id: 3, - question: 'Who can participate?', - answer: - 'All science and technology enthusiasts currently ' + - 'studying in college are invited to participate.', - }, - { - id: 4, - question: 'Will it be conducted online?', - answer: 'No the event will be conducted in offline mode.', - }, - { - id: 5, - question: 'What is the goal of the fest? ', - answer: - 'The major purpose of the fest is to bring together people ' + - 'who share a passion for technology in order ' + - 'to showcase their skills and give attendees' + - ' a fantastic chance to broaden their technical understandings.', - }, - { - id: 6, - question: 'How could I know if I got selected for any event? ', - answer: "If you're chosen, we'll send you an email.", - }, - { - id: 7, - question: 'Cost of registration? ', - answer: - 'The cost of registration, including accommodation is Rs. 950,' + - ' and without accommodation, it is Rs. 750.', - }, - ], +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/config/content/payment.js b/config/content/payment.js index 715c8d6..4639b3f 100644 --- a/config/content/payment.js +++ b/config/content/payment.js @@ -4,7 +4,7 @@ export const PaymentDetails = ({ email, name, mobile }) => { return { purpose: 'INNOVISION 2023 | Registration Fee', date: date.toDateString(), - amount: 1000, + amount: 750, email, buyerName: name, phone: mobile, @@ -17,6 +17,7 @@ export const PaymentContent = { warning: 'Note: Registration fee is non-refundable.', info: 'Check your details before proceeding to payment.', endNote: 'For any queries, contact us at: +91 1234567890', + caption: 'Early Bird Registration Fee', proceed: 'Proceed to Payment', cancel: 'Cancel', termsLink: 'https://www.google.com/', 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/EventCard/Card.jsx b/src/components/EventCard/Card.jsx index 3c5f095..a285783 100644 --- a/src/components/EventCard/Card.jsx +++ b/src/components/EventCard/Card.jsx @@ -27,6 +27,9 @@ const EventCard = ({ event, registered }) => { const { authenticated, userData, token } = useContext(AuthContext); const [disabled, setDisabled] = useState(false); + const bookingAllowed = + authenticated && (userData?.rollNumber || userData?.festID?.includes('innovision-2023')); + const api = Api.getInstance(); const handleClick = () => { @@ -92,7 +95,8 @@ const EventCard = ({ event, registered }) => { variant='outline' text={registered ? 'Registered' : 'Register For Event'} onClick={registered ? null : handleClick} - disabled={disabled || !authenticated || registered} + disabled={disabled || !bookingAllowed || registered} + tooltip={!bookingAllowed ? 'Kindly register for the fest first' : ''} /> @@ -121,7 +125,8 @@ const EventCard = ({ event, registered }) => { variant='outline' text={registered ? 'Registered' : 'Register For Event'} onClick={registered ? null : handleClick} - disabled={disabled || !authenticated || registered} + disabled={disabled || !bookingAllowed || registered} + tooltip={!bookingAllowed ? 'Kindly register for the fest first' : ''} /> diff --git a/src/components/EventSection/index.jsx b/src/components/EventSection/index.jsx index 1f35c5b..87cb696 100644 --- a/src/components/EventSection/index.jsx +++ b/src/components/EventSection/index.jsx @@ -6,7 +6,7 @@ import useEvents from '../../utils/useEvents'; import { _event } from '../../../config/content'; const EventSection = () => { - const { events } = useEvents('Technical'); + const { events } = useEvents(); return ( { - 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..ef2a8cf --- /dev/null +++ b/src/components/HeroSection/HeroSection.jsx @@ -0,0 +1,37 @@ +import React from 'react'; +import styled from 'styled-components'; +import tw from 'twin.macro'; +import { SectionContainer } from './styles'; +import HeroContent from './HeroContent'; +import VideoBackground from './VideoBackground'; + +const Container = styled.div` + &::-webkit-scrollbar { + display: none; + } + ${tw` + w-11/12 + lg:max-w-7xl + max-w-full + mx-auto + my-0 + p-0 + overflow-y-hidden + flex + items-center + justify-center + `} +`; + +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..acf885a --- /dev/null +++ b/src/components/HeroSection/VideoBackground.jsx @@ -0,0 +1,49 @@ +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-[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..956042e --- /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-[20px] + 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/Payment/PaymentCard.jsx b/src/components/Payment/PaymentCard.jsx index 996e802..b3ec279 100644 --- a/src/components/Payment/PaymentCard.jsx +++ b/src/components/Payment/PaymentCard.jsx @@ -18,7 +18,8 @@ import Button from '../shared/Button'; const PaymentCard = () => { const { userData, token } = useContext(AuthContext); - const { title, description, endNote, info, proceed, termsLink, warning } = PaymentContent; + const { title, description, endNote, info, proceed, termsLink, warning, caption } = + PaymentContent; const [agreed, setAgreed] = useState(false); const api = Api.getInstance(); @@ -67,6 +68,20 @@ const PaymentCard = () => { {warning} + {/* TODO: Remove afterwards */} + + {caption}: ₹1000 + + ₹750 + +