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
+
+
+
+
+
+
+
+
+ );
+}
+
+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}
diff --git a/src/pages/index.js b/src/pages/index.js
index 468d495..142911a 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,22 +1,30 @@
/* eslint-disable react/jsx-props-no-spreading */
import React from 'react';
import { Helmet } from 'react-helmet';
-import { About, EventSection, FAQSection, SponsorSection, Ticker } from '../components';
+import {
+ About,
+ EventSection,
+ FAQSection,
+ HeroSection,
+ SponsorSection,
+ Ticker,
+} from '../components';
import AboutUs from '../../config/content/AboutUs';
-export default function Home() {
- return (
- <>
-
-
- Innovision | Home
-
-
-
-
-
-
-
- >
- );
-}
+const Home = () => (
+ <>
+
+
+ Innovision | Home
+
+
+
+
+
+
+
+
+ >
+);
+
+export default Home;
diff --git a/src/pages/playground.js b/src/pages/playground.js
index ed937b1..d60526b 100644
--- a/src/pages/playground.js
+++ b/src/pages/playground.js
@@ -1,22 +1,7 @@
/* eslint-disable max-len */
import React from 'react';
import { Helmet } from 'react-helmet';
-import CardComponent from '../components/EventCard/Card';
-
-const events = {
- title: 'Game Of Thrones',
- club: 'Knights Club',
- venue: 'LA',
- time: '10:00 AM',
- date: '17',
- month: 'July',
- prizes: '7 karod',
- description: [
- 'Game of Thrones is a strategy board game created by Christian T. Petersen and released by Fantasy Flight Games in 2003. The game is based on the A Song of Ice and Fire fantasy series by George R. R. Martin. It was followed in 2004 by the expansion A Clash of Kings, and in 2006 by the expansion A Storm of Swords. A Game of Thrones allows the players to take on the roles of several of the Great Houses vying for control of the Seven Kingdoms, including House Stark, House Lannister, House Baratheon, House Greyjoy, House Tyrell, and a of the expansion A Clash of Kings, House Martell. Players maneuver armies to secure support in the various regions that comprise the Seven Kingdoms, with the goal of capturing enough support to claim the Iron Throne. The game is designed for three to six players, who each begin with control of one of the six Great Houses of Westeros. Randomly chosen neutral territories and land areas make up the remainder of the board.',
- ],
- contact: ['Rashmi - 9848948949'],
- poster: 'https://res.cloudinary.com/dw9odubkt/image/upload/v1695829352/Rectangle_1_wqmr3i.png',
-};
+import HeroSection from '../components/HeroSection/HeroSection';
const Playground = () => (
<>
@@ -25,7 +10,7 @@ const Playground = () => (
Playground
-
+
>
);
diff --git a/yarn.lock b/yarn.lock
index aa2a96f..1b07b70 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2614,16 +2614,6 @@
resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570"
integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==
-"@reach/router@^1.3.4":
- version "1.3.4"
- resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.3.4.tgz#d2574b19370a70c80480ed91f3da840136d10f8c"
- integrity sha512-+mtn9wjlB9NN2CNnnC/BRYtwdKBfSyyasPYraNAyvaV1occr/5NnB4CVzjEZipNHwYebQwcndGUmpFzxAUoqSA==
- dependencies:
- create-react-context "0.3.0"
- invariant "^2.2.3"
- prop-types "^15.6.1"
- react-lifecycles-compat "^3.0.4"
-
"@rgrove/parse-xml@^3.0.0":
version "3.0.0"
resolved "https://registry.yarnpkg.com/@rgrove/parse-xml/-/parse-xml-3.0.0.tgz#29d45eadeb6c9a701038cfb9fab2356a7bdc71d5"
@@ -4891,14 +4881,6 @@ create-gatsby@^3.12.0:
dependencies:
"@babel/runtime" "^7.20.13"
-create-react-context@0.3.0:
- version "0.3.0"
- resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.3.0.tgz#546dede9dc422def0d3fc2fe03afe0bc0f4f7d8c"
- integrity sha512-dNldIoSuNSvlTJ7slIKC/ZFGKexBMBrrcc+TTe1NdmROnaASuLPvqpwj9v4XS4uXZ8+YPu0sNmShX2rXI5LNsw==
- dependencies:
- gud "^1.0.0"
- warning "^4.0.3"
-
cross-fetch@^3.1.5:
version "3.1.8"
resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.8.tgz#0327eba65fd68a7d119f8fb2bf9334a1a7956f82"
@@ -7619,11 +7601,6 @@ graphql@^16.7.1:
resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.8.1.tgz#1930a965bef1170603702acdb68aedd3f3cf6f07"
integrity sha512-59LZHPdGZVh695Ud9lRzPBVTtlX9ZCV150Er2W43ro37wVof0ctenSaskPPjN7lVTIN8mSZt8PHUNKZuNQUuxw==
-gud@^1.0.0:
- version "1.0.0"
- resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
- integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==
-
gulp-util@^3.0.7:
version "3.0.8"
resolved "https://registry.yarnpkg.com/gulp-util/-/gulp-util-3.0.8.tgz#0054e1e744502e27c04c187c3ecc505dd54bbb4f"
@@ -8042,7 +8019,7 @@ internal-slot@^1.0.5:
has "^1.0.3"
side-channel "^1.0.4"
-invariant@^2.2.3, invariant@^2.2.4:
+invariant@^2.2.4:
version "2.2.4"
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
@@ -11192,7 +11169,7 @@ prompts@^2.4.2:
kleur "^3.0.3"
sisteransi "^1.0.5"
-prop-types@^15.0.0, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.0.0, prop-types@^15.6.0, prop-types@^15.7.2, prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -11443,7 +11420,7 @@ react-is@^18.0.0, react-is@^18.1.0:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
-react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4:
+react-lifecycles-compat@^3.0.0:
version "3.0.4"
resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
From a852b8e69d6098781bdc0a9ad67b571667e115f0 Mon Sep 17 00:00:00 2001
From: Ashish Padhy <100484401+Shurtu-gal@users.noreply.github.com>
Date: Fri, 13 Oct 2023 16:51:25 +0000
Subject: [PATCH 2/5] chore: fix hero section, change payment amount (#94)
---
config/content/payment.js | 2 +-
src/components/HeroSection/HeroSection.jsx | 23 +++++++++++++++++--
.../HeroSection/VideoBackground.jsx | 3 +--
src/components/HeroSection/styles.js | 2 +-
src/components/marginals/Navbar/styles.jsx | 5 ++++
5 files changed, 29 insertions(+), 6 deletions(-)
diff --git a/config/content/payment.js b/config/content/payment.js
index 715c8d6..ef4b6c2 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,
diff --git a/src/components/HeroSection/HeroSection.jsx b/src/components/HeroSection/HeroSection.jsx
index 752bf05..ef2a8cf 100644
--- a/src/components/HeroSection/HeroSection.jsx
+++ b/src/components/HeroSection/HeroSection.jsx
@@ -1,12 +1,31 @@
import React from 'react';
-import { Container } from '../shared';
+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 (
-
+
diff --git a/src/components/HeroSection/VideoBackground.jsx b/src/components/HeroSection/VideoBackground.jsx
index d88144d..acf885a 100644
--- a/src/components/HeroSection/VideoBackground.jsx
+++ b/src/components/HeroSection/VideoBackground.jsx
@@ -28,8 +28,7 @@ const VideoElement = styled.video`
object-cover
mt-[145px]
sm:mt-[30px]
- translate-x-0
- md:translate-x-[20px]
+ translate-x-[20px]
`}
`;
diff --git a/src/components/HeroSection/styles.js b/src/components/HeroSection/styles.js
index 9bca309..956042e 100644
--- a/src/components/HeroSection/styles.js
+++ b/src/components/HeroSection/styles.js
@@ -63,7 +63,7 @@ export const DatesDiv = styled.div`
xl:gap-[48px]
md:gap-[24px]
sm:gap-[12px]
- mb-[40px]
+ mb-[20px]
md:mb-[24px]
`}
`;
diff --git a/src/components/marginals/Navbar/styles.jsx b/src/components/marginals/Navbar/styles.jsx
index fc2c435..d871410 100644
--- a/src/components/marginals/Navbar/styles.jsx
+++ b/src/components/marginals/Navbar/styles.jsx
@@ -62,6 +62,11 @@ export const NavSection = styled.header`
color: var(--text-color-secondary);
}
}
+
+ @media (max-width: 768px) {
+ position: fixed;
+ }
+
@media (min-width: 1023px) {
padding-top: 0;
padding-bottom: 0;
From d1ab3e97d1b6d4731ab01cd254d08902b8611162 Mon Sep 17 00:00:00 2001
From: Ashish Padhy <100484401+Shurtu-gal@users.noreply.github.com>
Date: Fri, 13 Oct 2023 17:22:33 +0000
Subject: [PATCH 3/5] fix: prevent unregistered booking (#95)
* fix: prevent booking without registrations
* chore: fix build error
---
src/components/EventCard/Card.jsx | 9 +++++++--
1 file changed, 7 insertions(+), 2 deletions(-)
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' : ''}
/>
From c3e44de37062f6e71f4651026ce6b41e511c946a Mon Sep 17 00:00:00 2001
From: Ashish Padhy <100484401+Shurtu-gal@users.noreply.github.com>
Date: Sat, 14 Oct 2023 05:09:28 +0000
Subject: [PATCH 4/5] chore: don't show expired events (#96)
---
src/utils/useEvents.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/utils/useEvents.js b/src/utils/useEvents.js
index 8bf2d6a..b2a2f4a 100644
--- a/src/utils/useEvents.js
+++ b/src/utils/useEvents.js
@@ -12,7 +12,7 @@ const useEvents = (eventName) => {
const events = useMemo(
() =>
- data?.data
+ data?.data?.filter((event) => event?.status === 'ACTIVE')
?.map((event) => {
const description = JSON.parse(event.description);
const date = new Date(event.startDate);
From 7a6aaa07707fcf6b7918182ff9957e71aa32529d Mon Sep 17 00:00:00 2001
From: Ashish Padhy <100484401+Shurtu-gal@users.noreply.github.com>
Date: Sat, 14 Oct 2023 08:25:39 +0000
Subject: [PATCH 5/5] fix: changes to website (#97)
* chore: payment changes
* fix: hero section
* feat: add priority
---
config/content/payment.js | 1 +
src/components/EventSection/index.jsx | 2 +-
src/components/Payment/PaymentCard.jsx | 17 ++++++++++-
src/components/Registration/index.jsx | 1 +
src/components/UserProfile/styles.js | 1 +
src/components/marginals/Navbar/styles.jsx | 2 +-
src/pages/events.js | 2 +-
src/pages/payment.js | 35 +++++++++++++++-------
src/utils/useEvents.js | 12 ++++++--
9 files changed, 56 insertions(+), 17 deletions(-)
diff --git a/config/content/payment.js b/config/content/payment.js
index ef4b6c2..4639b3f 100644
--- a/config/content/payment.js
+++ b/config/content/payment.js
@@ -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/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 { 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
+
+