chore: final setup (#273)

* chore: final setup * fix: minor changes * fix: footer styles * fix: smooth scrolling * fix: final fixes
dscnitrourkela · Dec 4, 2023 · 0e7752d · 0e7752d
1 parent cf5e2f5
commit 0e7752d
Show file tree

Hide file tree

Showing 22 changed files with 640 additions and 123 deletions.
diff --git a/config/content/Timelinecontent.js b/config/content/Timelinecontent.js
@@ -9,7 +9,7 @@ export const timelinecontent = {
       duration: '15 oct to 15 dec',
       boxcolor: '#72F7BF',
       wheelcolor: '#35E1FF',
-      ellipsecolor: '#B067FF',
+      ellipsecolor: '#FF65CD',
       ellipsecontent: 'Get extra perks with early registration',
     },
     {

diff --git a/config/content/navbar.js b/config/content/navbar.js
@@ -5,7 +5,7 @@ export default {
     alt: 'logo',
   },
   Links: [
-    { id: 'Home', name: 'Home', link: '#Home' },
+    { id: 'Home', name: 'Home', link: '/#Home' },
     { id: 'About', name: 'About', link: '/#About' },
     { id: 'Stats', name: 'Stats', link: '/#Stats' },
     { id: 'Timeline', name: 'Timeline', link: '/#Timeline' },

diff --git a/package.json b/package.json
@@ -64,6 +64,7 @@
     "react-modal": "^3.14.3",
     "react-responsive-modal": "^6.1.0",
     "react-slick": "^0.28.1",
+    "react-tsparticles": "^2.12.2",
     "react-typeform-embed": "^1.0.3",
     "slick-carousel": "^1.8.1",
     "smooth-scroll": "^16.1.3",
@@ -72,6 +73,7 @@
     "styled-components": "^5.3.0",
     "tailwindcss": "^3.1.8",
     "tailwindcss-pseudo": "^1.0.3",
+    "tsparticles": "^2.12.0",
     "twin.macro": "^2.8.2"
   },
   "devDependencies": {

diff --git a/src/components/AboutUs/About.jsx b/src/components/AboutUs/About.jsx
@@ -2,16 +2,13 @@ import React from 'react';
 import Content from '../../../config/content/About';
 import { AboutContainer, AboutContent, Heading } from './styles';
 import Carousel from './Carousel';
-import { Container } from '../shared';
 
 const AboutSection = () => (
-  <Container id='About'>
-    <AboutContainer>
-      <Heading>About Us</Heading>
-      <AboutContent>{Content.desc}</AboutContent>
-      <Carousel />
-    </AboutContainer>
-  </Container>
+  <AboutContainer id='About'>
+    <Heading>About Us</Heading>
+    <AboutContent>{Content.desc}</AboutContent>
+    <Carousel />
+  </AboutContainer>
 );
 
 export default AboutSection;
diff --git a/src/components/AboutUs/styles.js b/src/components/AboutUs/styles.js
@@ -4,15 +4,16 @@ import { Body1, Heading1 } from '../shared';
 
 export const AboutContainer = styled.div`
   ${tw`
-    flex 
-    flex-col 
-    items-center 
-    text-center 
-    mt-0 
-    overflow-y-hidden 
-    w-full 
-    mb-12
-    `}
+    w-11/12
+    h-auto
+    flex
+    flex-col
+    items-center
+    justify-center
+    min-h-screen
+  `}
+  height: fit-content;
+  margin: 2% auto 3%;
 `;
 export const AboutContent = styled(Body1)`
   ${tw`
@@ -27,6 +28,17 @@ export const AboutContent = styled(Body1)`
 `;
 export const Heading = styled(Heading1)`
   ${tw`
-    font-bold	
-  `}
+  text-center
+  mt-5
+  m-auto
+  leading-[96px]
+  text-[64px]
+`}
+  font-weight: 700;
+  @media (max-width: 761px) {
+    color: var(--neutral-1, #fff);
+    font-size: 32px;
+    font-style: normal;
+    line-height: 96px;
+  }
 `;
diff --git a/src/components/Faq/Faq.jsx b/src/components/Faq/Faq.jsx
@@ -37,8 +37,8 @@ const FAQ = () => {
   };
 
   return (
-    <SectionContainer id='FAQs'>
-      <FAQContainer>
+    <SectionContainer>
+      <FAQContainer id='FAQs'>
         <Helmet>
           <link
             rel='stylesheet'

diff --git a/src/components/HeroSection/HeroBtn.jsx b/src/components/HeroSection/HeroBtn.jsx
@@ -14,7 +14,7 @@ const HeroBtn = () => {
       <div>
         <button onClick={handleButtonClick} type='button'>
           <a href='https://dscnitrourkela.netlify.app/' target='__blank' rel='noreferrer'>
-            REGISTER
+            PRE-REGISTER
           </a>
         </button>
       </div>

diff --git a/src/components/HeroSection/styles.jsx b/src/components/HeroSection/styles.jsx
@@ -19,7 +19,7 @@ export const SectionContainer = styled.div`
 
 export const HeroBody = styled.div`
   ${tw`
-    mt-[6%]
+    mt-[7%]
     h-full
     flex
     justify-center
@@ -64,6 +64,7 @@ export const HeroInside = styled.div`
 export const ContentBlock = styled.div`
   ${tw`
     max-w-[360px]
+    pb-4
     sm:max-w-sm
     md:max-w-xl
     lg:max-w-3xl

diff --git a/src/components/Prizes/Prizes.jsx b/src/components/Prizes/Prizes.jsx
@@ -1,7 +1,6 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import React, { useState, useEffect, useRef } from 'react';
 import {
-  SectionContainer,
   PrizesContainer,
   Box,
   PrizesTitle,
@@ -60,56 +59,54 @@ const Prizes = () => {
   }, []);
 
   return (
-    <SectionContainer>
-      <PrizesContainerWrapper>
-        <PrizesTitle>{PrizesContent.title}</PrizesTitle>
-        <PrizesContainer>
-          {isMobile
-            ? PrizesContent.prizeData.map((item) => (
-                <MobileBox key={item.id} shadowColor={item.prizeShadowColor}>
-                  <img src={item.src} alt='Medal' />
-                  <MobileDescription>
-                    <MobilePrizes>Total Prize - {item.prizeValue}</MobilePrizes>
-                    <MobilePrize>
-                      <MobileCash>Cash Prize {item.cash}</MobileCash>
-                      <MobileSwags>{item.swags}</MobileSwags>
-                      <MobileMerchandise>{item.merchandise}</MobileMerchandise>
-                    </MobilePrize>
-                  </MobileDescription>
-                </MobileBox>
-              ))
-            : PrizesContent.prizeData.map((item) => (
-                // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-                <div
-                  key={item.id}
-                  onClick={() => (isMobile ? handleBoxInteraction(item.id) : undefined)}
-                  onMouseEnter={() => (!isMobile ? handleBoxInteraction(item.id) : undefined)}
+    <PrizesContainerWrapper id='Prizes'>
+      <PrizesTitle>{PrizesContent.title}</PrizesTitle>
+      <PrizesContainer>
+        {isMobile
+          ? PrizesContent.prizeData.map((item) => (
+              <MobileBox key={item.id} shadowColor={item.prizeShadowColor}>
+                <img src={item.src} alt='Medal' />
+                <MobileDescription>
+                  <MobilePrizes>Total Prize - {item.prizeValue}</MobilePrizes>
+                  <MobilePrize>
+                    <MobileCash>Cash Prize {item.cash}</MobileCash>
+                    <MobileSwags>{item.swags}</MobileSwags>
+                    <MobileMerchandise>{item.merchandise}</MobileMerchandise>
+                  </MobilePrize>
+                </MobileDescription>
+              </MobileBox>
+            ))
+          : PrizesContent.prizeData.map((item) => (
+              // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+              <div
+                key={item.id}
+                onClick={() => (isMobile ? handleBoxInteraction(item.id) : undefined)}
+                onMouseEnter={() => (!isMobile ? handleBoxInteraction(item.id) : undefined)}
+              >
+                <Box
+                  expanded={isMobile || expandedIndex === item.id}
+                  shadowColor={item.prizeShadowColor}
+                  backgroundColor={
+                    isMobile || expandedIndex === item.id ? selectedBackgroundColor : '#272727'
+                  }
+                  className={expandedIndex === item.id ? 'clicked' : ''}
                 >
-                  <Box
-                    expanded={isMobile || expandedIndex === item.id}
-                    shadowColor={item.prizeShadowColor}
-                    backgroundColor={
-                      isMobile || expandedIndex === item.id ? selectedBackgroundColor : '#272727'
-                    }
-                    className={expandedIndex === item.id ? 'clicked' : ''}
-                  >
-                    <img src={item.src} alt='Medal' />
-                    {!isMobile && expandedIndex === item.id && (
-                      <Description>
-                        <TotalPrizes>Total Prize - {item.prizeValue}</TotalPrizes>
-                        <PrizeText>
-                          <CashPrize>Cash Prize {item.cash}</CashPrize>
-                          <Swags>{item.swags}</Swags>
-                          <Merchandise>{item.merchandise}</Merchandise>
-                        </PrizeText>
-                      </Description>
-                    )}
-                  </Box>
-                </div>
-              ))}
-        </PrizesContainer>
-      </PrizesContainerWrapper>
-    </SectionContainer>
+                  <img src={item.src} alt='Medal' />
+                  {!isMobile && expandedIndex === item.id && (
+                    <Description>
+                      <TotalPrizes>Total Prize - {item.prizeValue}</TotalPrizes>
+                      <PrizeText>
+                        <CashPrize>Cash Prize {item.cash}</CashPrize>
+                        <Swags>{item.swags}</Swags>
+                        <Merchandise>{item.merchandise}</Merchandise>
+                      </PrizeText>
+                    </Description>
+                  )}
+                </Box>
+              </div>
+            ))}
+      </PrizesContainer>
+    </PrizesContainerWrapper>
   );
 };
 

diff --git a/src/components/Prizes/styles.js b/src/components/Prizes/styles.js
@@ -5,22 +5,17 @@ import { Body1, Heading1 } from '../shared';
 
 const smallScreen = '768px';
 
-export const SectionContainer = styled.section`
+export const PrizesContainerWrapper = styled.div`
   ${tw`
     w-full
     h-auto
     flex
     flex-col
-    items-start
+    items-center
   `}
   height: fit-content;
-  margin: 2% auto 3%;
-`;
-
-export const PrizesContainerWrapper = styled.div`
-  margin-top: 0px;
+  margin: auto;
   padding-left: 0;
-  width: 100%;
   @media (max-width: ${smallScreen}) {
     padding: 0 20px;
   }

diff --git a/src/components/Sponsor/Sponsor.jsx b/src/components/Sponsor/Sponsor.jsx
@@ -33,8 +33,8 @@ function SponsorSection() {
   const deltaSponsorsSecond = Sponsor.deltaSecond;
 
   return (
-    <SectionContainer id='Sponsors'>
-      <SponsorHeader>Sponsors</SponsorHeader>
+    <SectionContainer>
+      <SponsorHeader id='Sponsors'>Sponsors</SponsorHeader>
       <AlphaSponsors>
         <AlphaContainer>
           <AlphaHeader>Alpha Sponsors</AlphaHeader>

diff --git a/src/components/TimelineSection/Timeline.jsx b/src/components/TimelineSection/Timeline.jsx
@@ -7,8 +7,8 @@ import { SectionContainer } from '../shared';
 
 function TimelineSection() {
   return (
-    <SectionContainer id='Timeline'>
-      <TimelineWrapper>
+    <SectionContainer>
+      <TimelineWrapper id='Timeline'>
         <TimelineHead>{timelinecontent.title}</TimelineHead>
         {timelinecontent.nodes.length === 0
           ? ''

diff --git a/src/components/marginals/Footer/TermsNCredits.jsx b/src/components/marginals/Footer/TermsNCredits.jsx
@@ -1,16 +1,14 @@
 import React from 'react';
 import { LastLine, Terms, ConditionItems, Credits } from './styles';
 
-const TermsNCredits = ({ copyw }) => {
-  return (
-    <LastLine>
-      <Terms>
-        <ConditionItems href='#'>Privacy & Cookies</ConditionItems>
-        <ConditionItems href='#'>Terms and Conditions</ConditionItems>
-      </Terms>
-      <Credits>{copyw.content}</Credits>
-    </LastLine>
-  );
-};
+const TermsNCredits = ({ copyw }) => (
+  <LastLine>
+    <Terms>
+      <ConditionItems href='#'>Privacy & Cookies</ConditionItems>
+      <ConditionItems href='#'>Terms and Conditions</ConditionItems>
+    </Terms>
+    <Credits>{copyw.content}</Credits>
+  </LastLine>
+);
 
 export default TermsNCredits;
diff --git a/src/components/marginals/Footer/styles.js b/src/components/marginals/Footer/styles.js
@@ -90,6 +90,7 @@ export const CradleContainer = styled.div`
   mx-4
   pt-[100px]
   text-[16px]
+  m-auto
   `}
   @media (max-width: 800px) {
     ${tw`
@@ -369,11 +370,14 @@ export const LastLine = styled.div`
     w-[60vw]
     flex
     flex-row
-    justify-around	
+    justify-center
+    gap-4	
     items-center
   `}
   @media (max-width: 800px) {
     ${tw`
+    pt-3
+    gap-7
     w-full
     h-[250px]
     flex-col-reverse
@@ -399,7 +403,9 @@ export const Terms = styled.div`
     ${tw`
     flex-col
     items-baseline
+    gap-2
     `}
+  }
 `;
 
 export const ConditionItems = styled.a`
@@ -412,6 +418,7 @@ export const ConditionItems = styled.a`
     px-1
     py-4
     `}
+  }
 `;
 
 export const Credits = styled.div`
@@ -423,9 +430,6 @@ export const Credits = styled.div`
     ${tw`
     m-[0px]
     px-2
-    py-6
     `}
-`;
-`}
   }
 `;