From fa2427ac723ece3965cce007189cee6e6b2cb624 Mon Sep 17 00:00:00 2001 From: anmol5936 Date: Tue, 5 Dec 2023 22:47:12 +0530 Subject: [PATCH 01/30] PrevStat section added --- config/content/prevstat.js | 49 ++++ src/components/PrevStats/PreviousStats.jsx | 139 ++++++++++++ src/components/PrevStats/styles.js | 209 ++++++++++++++++++ .../PrevStats/tempCodeRunnerFile.js | 207 +++++++++++++++++ src/pages/playground.js | 3 + 5 files changed, 607 insertions(+) create mode 100644 config/content/prevstat.js create mode 100644 src/components/PrevStats/PreviousStats.jsx create mode 100644 src/components/PrevStats/styles.js create mode 100644 src/components/PrevStats/tempCodeRunnerFile.js diff --git a/config/content/prevstat.js b/config/content/prevstat.js new file mode 100644 index 0000000..3bf2720 --- /dev/null +++ b/config/content/prevstat.js @@ -0,0 +1,49 @@ +export default { + imgs: { + xori: { + src: 'https://res.cloudinary.com/dra96qhox/image/upload/v1698055003/NITREdited_gaxxwc.png', + alt: 'Xori', + }, + }, + + data: [ + { + id: 1, + version: '4.0', + registration: '5200+', + projects: '400', + partners: '100', + reach: '200+', + name: 'registration', + }, + { + id: 2, + version: '3.0', + registration: '4800+', + projects: '400', + partners: '100', + reach: '200+', + name: 'projects', + }, + { + id: 3, + version: '2.0', + registration: '4200+', + projects: '400', + partners: '100', + reach: '200+', + name: 'partners', + }, + { + id: 4, + version: '1.0', + registration: '3500+', + projects: '400', + partners: '100', + reach: '200+', + name: 'reach', + }, + ], + + headerColors: ['#02daff', ' #FF65CD', '#43F4AA', '#FED954'], +}; diff --git a/src/components/PrevStats/PreviousStats.jsx b/src/components/PrevStats/PreviousStats.jsx new file mode 100644 index 0000000..463ee01 --- /dev/null +++ b/src/components/PrevStats/PreviousStats.jsx @@ -0,0 +1,139 @@ +import React, { useState, useEffect } from 'react'; +import { + Heading, + SectionBox, + BoxHeader, + BoxDetail, + BoxContent, + BoxText, + BoxSubContent, + BoxSubHeader, + BoxSubDetail, + SectionContainer, + SectionContent, + SectionImage, + ProgressNumber, + StatNumber, + SectionCards, + MobileBox1, + MobileBoxHeader, + MobileBoxContent, + MobileContainer, + MobileDetail, + MobileHead, + MobileSubContent, + MobileSubBar, +} from './styles'; + +import prevstat from '../../../config/content/prevstat'; + +const PreviousStats = () => { + const [windowWidth, setWindowWidth] = useState(window.innerWidth); + + useEffect(() => { + const handleResize = () => { + setWindowWidth(window.innerWidth); + }; + + window.addEventListener('resize', handleResize); + + return () => { + window.removeEventListener('resize', handleResize); + }; + }, []); + + const isMobile = windowWidth < 1023; + + const imageUrl = + 'https://res.cloudinary.com/dzxgf75bh/image/upload/v1701689072/' + + 'xori1-removebg-preview_1_tbbsw8.png'; + + return ( + + Previous Stats + + {isMobile ? ( + + {prevstat.data.map((item, id) => ( +
+ + + {`HACKNITR ${item.version}`} + Detail + + + Registration + + {item.registration} + + Projects + + {item.projects} + + Community Partners + + {item.partners} + + Reach in Colleges + + {item.reach} + + + +
+ ))} + + ) : ( + + + + {prevstat.data.map((item, id) => ( + + + + {`HACKNITR ${item.version}`} + + Details + + + + + Registration + + {item.registration} + + + + + Projects + + {item.projects} + + + + + Community Partners + + {item.partners} + + + + + Reach in Colleges + + {item.reach} + + + + + ))} + + + )} + + ); +}; + +export default PreviousStats; diff --git a/src/components/PrevStats/styles.js b/src/components/PrevStats/styles.js new file mode 100644 index 0000000..2e3ba99 --- /dev/null +++ b/src/components/PrevStats/styles.js @@ -0,0 +1,209 @@ +import styled from 'styled-components'; + +import { Caption, Heading4, Body1, Heading1, Heading3, Body2 } from '../shared'; + +export const Heading = styled(Heading1)` + font-weight: bold; + display: flex; + text-align: center; + justify-content: center; + padding-bottom: 30px; + margin: 0 auto; +`; + +export const SectionContent = styled.div` + display: flex; + padding-right: 47vw; + + @media (max-width: 1270px) { + padding-right: 60vw; + } + + @media (max-width: 1023px) { + opacity: 0; + } +`; + +export const SectionImage = styled.img` + max-width: 1063 px; + height: 550px; + + padding-left: 3rem; + + @media (max-width: 1007px) { + visibility: hidden; + } +`; + +export const SectionCards = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; /* Add this line to center vertically */ + gap: 33px; +`; + +export const BoxSubDetail = styled(Body1)` + width: 23px; + height: 19px; + flex-shrink: 0; + border-radius: 20px; + + margin-bottom: 2px; + transition: width 0.5s ease-in-out; + + background: ${(props) => props.background || '#02daff'}; +`; + +export const ProgressNumber = styled.div` + opacity: 0; + color: #ffffff; + display: flex; + justify-content: flex-end; + font-size: 12px; + font-weight: bold; + transition: opacity 0.3s ease-in-out; + margin-right: 10px; + position: relative; + top: -5%; +`; + +export const BoxContent = styled.div` + flex-shrink: 0; + gap: 19px; + padding: 10px; +`; + +export const BoxSubContent = styled(Caption)``; + +export const SectionBox = styled.div` + display: flex; + position: relative; + width: 440px; + height: 205px; + padding: 12px 24px 12px 6px; + align-items: flex-start; + gap: 16px; + border-radius: 12px; + background: var(--Bg, linear-gradient(180deg, #464646 0%, rgba(58, 58, 58, 0.15) 100%)); + transition: padding-right 0.6s; + + &:hover { + padding-right: 600px; + + ${BoxSubDetail} { + width: ${(props) => props.width || '228px'}; + } + + ${ProgressNumber} { + opacity: 1; + } + } +`; + +export const BoxHeader = styled(Heading3)` + font-weight: bold; + color: ${(props) => props.color || '#02daff'}; +`; + +export const BoxDetail = styled(Heading4)``; + +export const BoxSubHeader = styled(Caption)` + display: flex; + flex-direction: column; + justify-content: center; + flex-shrink: 0; + color: #c7c7c7; + margin-bottom: 3px; +`; + +export const BoxText = styled.div` + display: flex; + + padding: 32px 16px; + flex-direction: column; + align-items: center; + gap: 24px; + flex-shrink: 0; + border-radius: 8px; +`; + +export const SectionContainer = styled.div` + margin: 10px auto; + max-width: 1440px; + width: 100%; + height: auto; +`; + +export const MobileBox1 = styled.div` + display: inline-flex; + height: 366px; + padding: 12px 0px; + flex-direction: column; + align-items: flex-start; + gap: 10px; + flex-shrink: 0; + border-radius: 12px; + background: linear-gradient(179deg, #464646 0.74%, rgba(58, 58, 58, 0.15) 185.9%); + padding-left: 40px; + padding-right: 40px; +`; + +export const MobileBoxHeader = styled(Heading3)` + font-weight: bold; + color: var(--primary-blue-3, #02daff); + + color: ${(props) => props.color || '#02daff'}; +`; + +export const MobileContainer = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 18px; +`; + +export const MobileBoxContent = styled.div` + display: flex; + height: 183px; + padding: 0px 8px; + flex-direction: column; + align-items: flex-start; + gap: 12px; + flex-shrink: 0; +`; + +export const MobileDetail = styled(Body2)` + color: #fff; +`; + +export const MobileHead = styled.div` + display: flex; + padding: 12px 16px; + flex-direction: column; + align-items: center; + gap: 8px; + align-self: stretch; + border-radius: 8px; +`; + +export const MobileSubContent = styled(Caption)` + color: #c7c7c7; +`; + +export const MobileSubBar = styled.div` + width: 228px; + height: 15.95px; + flex-shrink: 0; + border-radius: 14.4px; + width: ${(props) => props.width || '228px'}; + background: ${(props) => props.background || '#02daff'}; +`; + +export const StatNumber = styled(Caption)` + display: flex; + justify-content: flex-end; + padding-right: 8px; + color: #fff; +`; diff --git a/src/components/PrevStats/tempCodeRunnerFile.js b/src/components/PrevStats/tempCodeRunnerFile.js new file mode 100644 index 0000000..0091137 --- /dev/null +++ b/src/components/PrevStats/tempCodeRunnerFile.js @@ -0,0 +1,207 @@ +import styled from 'styled-components'; + +import { Caption, Heading4, Body1, Heading1, Heading3, Body2 } from '../shared'; + +export const Heading = styled(Heading1)` + font-weight: bold; + display: flex; + align-text: center; + justify-content: center; + padding-bottom: 30px; + margin: 0 auto; +`; + +export const SectionContent = styled.div` + display: flex; + padding-right: 49vw; + + @media (max-width: 1270px) { + padding-right: 60vw; + } + + @media (max-width: 1123px) { + opacity: 0; + } +`; + +export const SectionImage = styled.img` + max-width: 998 px; + height: auto; + aspect-ratio: 4 / 3; + + @media (max-width: 1007px) { + visibility: hidden; + } +`; + +export const SectionCards = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; /* Add this line to center vertically */ + gap: 33px; +`; + +export const BoxSubDetail = styled(Body1)` + width: 23px; + height: 19px; + flex-shrink: 0; + border-radius: 20px; + background: var(--primary-pink-2, #ff65cd); + margin-bottom: 2px; + transition: width 0.5s ease-in-out; +`; + +export const ProgressNumber = styled.div` + opacity: 0; + color: #ffffff; + display: flex; + justify-content: flex-end; + font-size: 12px; + font-weight: bold; + transition: opacity 0.3s ease-in-out; + margin-right: 10px; + position: relative; + top: -5%; +`; + +export const SectionBox = styled.div` + display: flex; + position: relative; + width: 486px; + padding: 12px 24px 12px 6px; + align-items: flex-start; + gap: 16px; + border-radius: 12px; + background: var(--Bg, linear-gradient(180deg, #464646 0%, rgba(58, 58, 58, 0.15) 100%)); + transition: width 0.5s ease-in-out; + + &:hover { + width: 90%; + + ${BoxSubDetail} { + width: 70%; + } + + ${ProgressNumber} { + opacity: 1; + } + } +`; + +export const BoxHeader = styled(Heading3)` + font-weight: bold; + color: ${(props) => props.color || '#02daff'}; +`; + +export const BoxDetail = styled(Heading4)``; + +export const BoxSubHeader = styled(Caption)` + display: flex; + flex-direction: column; + justify-content: center; + flex-shrink: 0; + color: #c7c7c7; + margin-bottom: 3px; +`; + +export const BoxText = styled.div` + display: flex; + + padding: 32px 16px; + flex-direction: column; + align-items: center; + gap: 24px; + flex-shrink: 0; + border-radius: 8px; +`; + +export const BoxContent = styled.div` + flex-shrink: 0; + gap: 19px; + padding: 10px; +`; + +export const BoxSubContent = styled(Caption)` + width: 399px; + height: 39px; + top: 12px; + left: 339px; + border-radius: 20px; +`; + +export const SectionContainer = styled.div` + margin: 10px auto; + max-width: 1440px; + width: 100%; + height: auto; +`; + +export const MobileBox1 = styled.div` + display: inline-flex; + height: 352px; + padding: 12px 0px; + flex-direction: column; + align-items: flex-start; + gap: 12px; + flex-shrink: 0; + border-radius: 12px; + background: linear-gradient(179deg, #464646 0.74%, rgba(58, 58, 58, 0.15) 185.9%); + padding-left: 40px; + padding-right: 40px; +`; + +export const MobileBoxHeader = styled(Heading3)` + font-weight: bold; + color: var(--primary-blue-3, #02daff); + + color: ${(props) => props.color || '#02daff'}; +`; + +export const MobileContainer = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; /* Add this line to center vertically */ + gap: 20px; +`; + +export const MobileBoxContent = styled.div` + display: flex; + height: 183px; + padding: 0px 8px; + flex-direction: column; + align-items: flex-start; + gap: 12px; + flex-shrink: 0; +`; + +export const MobileDetail = styled(Body2)` + color: white; +`; + +export const MobileHead = styled.div` + display: flex; + padding: 12px 16px; + flex-direction: column; + align-items: center; + gap: 8px; + align-self: stretch; + border-radius: 8px; +`; + +export const MobileSubContent = styled.div``; + +export const MobileSubBar = styled.div` + width: 228px; + height: 15.95px; + flex-shrink: 0; + border-radius: 14.4px; + background: var(--primary-blue-2, #35e1ff); +`; + +export const StatNumber = styled.div` + display: flex; + justify-content: flex-end; + padding-right: 8px; +`; diff --git a/src/pages/playground.js b/src/pages/playground.js index b169dc4..bde31d0 100644 --- a/src/pages/playground.js +++ b/src/pages/playground.js @@ -12,6 +12,7 @@ import FAQ from '../components/Faq/Faq'; import TimelineSection from '../components/TimelineSection/Timeline'; import { Footer } from '../components/marginals'; import Prizes from '../components/Prizes/Prizes'; +import PreviousStats from '../components/PrevStats/PreviousStats'; const Homepage = ({ location }) => { const isHome = location?.pathname === '/'; @@ -52,10 +53,12 @@ const Homepage = ({ location }) => { + +