From e49ee838c0b2f47f0541e0e0b81343d80ddd2f26 Mon Sep 17 00:00:00 2001 From: Tamal Das Date: Sun, 7 Jan 2024 22:40:20 +0530 Subject: [PATCH] fix: mapping content for better redability --- src/assets/data/HeaderContent.js | 64 +++++++++++++++++++ .../private/collaborators/Collaborators.jsx | 7 +- .../private/collaborators/Collaborators.scss | 50 --------------- src/components/private/faq/FAQ.jsx | 7 +- src/components/private/faq/FAQ.scss | 45 +------------ src/components/private/mentors/Mentors.jsx | 7 +- src/components/private/mentors/Mentors.scss | 46 ------------- src/components/private/prizes/Prizes.jsx | 11 +--- src/components/private/prizes/Prizes.scss | 51 --------------- src/components/private/sponsors/Sponsors.jsx | 7 +- src/components/private/sponsors/Sponsors.scss | 50 --------------- .../private/testimonials/Testimonials.jsx | 3 +- .../private/testimonials/Testimonials.scss | 47 +------------- src/components/private/themes/Theme.jsx | 7 +- src/components/private/themes/Theme.scss | 51 --------------- src/components/private/timeline/Timeline.jsx | 13 +--- src/components/shared/header/Header.jsx | 25 +++++++- src/components/shared/header/Header.scss | 8 +-- 18 files changed, 109 insertions(+), 390 deletions(-) create mode 100644 src/assets/data/HeaderContent.js diff --git a/src/assets/data/HeaderContent.js b/src/assets/data/HeaderContent.js new file mode 100644 index 0000000..ee9cae2 --- /dev/null +++ b/src/assets/data/HeaderContent.js @@ -0,0 +1,64 @@ +const HeaderData = { + prizes: { + backWord: "Awards", + backWordSize_mobile: "85px", + backWordSpacing_mobile: "0.2rem", + frontWord: "Hackathon Prizes", + frontWordMobile: "Prizes", + }, + timeline: { + backWord: "Roadmap", + backWordMobile: "Plan", + backWordSize_mobile: "93px", + backWordSpacing_mobile: "0.5rem", + frontWord: "Hackathon Timeline", + frontWordMobile: "Timeline", + }, + theme: { + backWord: "Tracks", + backWordSize_mobile: "80px", + backWordSpacing_mobile: "0.2rem", + frontWord: "Hackathon Themes", + frontWordMobile: "Themes", + }, + sponsors: { + backWord: "Supporters", + backWordMobile: "Backers", + backWordSize: "130px", + backWordSpacing: "0.5rem", + backWordSize_mobile: "75px", + backWordSpacing_mobile: "0.2rem", + frontWord: "Past Sponsors", + }, + collaborators: { + backWord: "Collaborators", + backWordMobile: "Collab", + backWordSize: "130px", + backWordSpacing: "0.5rem", + backWordSize_mobile: "75px", + backWordSpacing_mobile: "0.5rem", + frontWord: "Past Collaborations", + }, + mentors: { + backWord: "Experts", + backWordMobile: "Experts", + backWordSize_mobile: "78px", + backWordSpacing_mobile: "0.2rem", + frontWord: "Previous Mentors", + frontWordMobile: "Past Mentors", + }, + testimonials: { + backWord: "Stories", + backWordSize_mobile: "78px", + backWordSpacing_mobile: "0.5rem", + frontWord: "Testimonials", + }, + faq: { + backWord: "FAQ", + backWordSize_mobile: "100px", + backWordSpacing_mobile: "0.5rem", + frontWord: "Questions", + }, +}; + +export default HeaderData; diff --git a/src/components/private/collaborators/Collaborators.jsx b/src/components/private/collaborators/Collaborators.jsx index 04a22fd..af70401 100644 --- a/src/components/private/collaborators/Collaborators.jsx +++ b/src/components/private/collaborators/Collaborators.jsx @@ -1,5 +1,6 @@ import React from "react"; import collaborators from "../../../assets/data/CollaboratorsContent"; +import HeaderData from "../../../assets/data/HeaderContent"; import { Header } from "../../shared"; import "./Collaborators.scss"; @@ -7,11 +8,7 @@ const Collaborators = ({ refs }) => { return (
-
+
diff --git a/src/components/private/collaborators/Collaborators.scss b/src/components/private/collaborators/Collaborators.scss index d08aba7..a31afee 100644 --- a/src/components/private/collaborators/Collaborators.scss +++ b/src/components/private/collaborators/Collaborators.scss @@ -9,56 +9,6 @@ margin-top: 2rem; } - .collaborators__header { - font-size: clamp(3rem, 7vw, 5rem); - line-height: 3rem; - text-align: center; - letter-spacing: 0em; - font-family: var(--heading-font); - position: relative; - z-index: 2; - text-wrap: nowrap; - - h1 { - font-weight: 900; - font-size: 130px; - letter-spacing: 0.5rem; - color: rgba(255, 255, 255, 0.06); - position: absolute; - transform: translate(-50%, -50%); - left: 50%; - top: 18%; - z-index: 2; - - &::after { - content: ""; - position: absolute; - border: 1px solid var(--h4bred); - width: 250px; - bottom: 10px; - left: 50%; - transform: translate(-50%, -50%); - - @media screen and (max-width: 576px) { - bottom: -10px; - } - } - - @media screen and (max-width: 576px) { - font-size: 75px; - letter-spacing: 0.2rem; - top: -20%; - left: 50%; - } - } - - h2 { - font-size: clamp(1.8rem, 2.5vw, 2.8rem); - font-weight: 700; - width: 100%; - } - } - .collaborators__flexbox__container { margin-top: 6rem; display: flex; diff --git a/src/components/private/faq/FAQ.jsx b/src/components/private/faq/FAQ.jsx index fc48692..b8b9757 100644 --- a/src/components/private/faq/FAQ.jsx +++ b/src/components/private/faq/FAQ.jsx @@ -1,14 +1,13 @@ import React from "react"; +import HeaderData from "../../../assets/data/HeaderContent"; +import { Header } from "../../shared"; import "./FAQ.scss"; const Faq = ({ refs }) => { return (
-
-

FAQ

-

Questions

-
+

diff --git a/src/components/private/faq/FAQ.scss b/src/components/private/faq/FAQ.scss index 84d9dfe..6beb4d9 100644 --- a/src/components/private/faq/FAQ.scss +++ b/src/components/private/faq/FAQ.scss @@ -19,49 +19,6 @@ gap: 3rem; } - .faq__header { - font-size: clamp(3rem, 7vw, 5rem); - line-height: 3rem; - text-align: center; - letter-spacing: 0em; - font-family: var(--heading-font); - position: relative; - z-index: 2; - - h1 { - font-weight: 900; - font-size: 150px; - letter-spacing: 0.8rem; - color: rgba(238, 230, 230, 0.06); - position: absolute; - transform: translate(-50%, -50%); - left: 50%; - top: 18%; - z-index: 2; - - &::after { - content: ""; - position: absolute; - border: 1px solid var(--h4bred); - width: 250px; - bottom: -10px; - left: 50%; - transform: translate(-50%, -50%); - } - - @media screen and (max-width: 576px) { - font-size: 93px; - top: -20%; - left: 50%; - } - } - - h2 { - font-size: clamp(2rem, 2.5vw, 2.8rem); - font-weight: 700; - } - } - .faq__subheader { p { font-size: 1.3rem; @@ -73,7 +30,7 @@ @media screen and (max-width: 576px) { width: 100%; - font-size: 0.8rem; + font-size: 0.9rem; text-align: justify; } } diff --git a/src/components/private/mentors/Mentors.jsx b/src/components/private/mentors/Mentors.jsx index 09a457a..802b3ab 100644 --- a/src/components/private/mentors/Mentors.jsx +++ b/src/components/private/mentors/Mentors.jsx @@ -1,6 +1,7 @@ import React from "react"; import Marquee from "react-fast-marquee"; import { FaLinkedinIn, FaXTwitter } from "react-icons/fa6"; +import HeaderData from "../../../assets/data/HeaderContent"; import { mentorContent } from "../../../assets/data/MentorsContent"; import { Header } from "../../shared"; import "./Mentors.scss"; @@ -8,11 +9,7 @@ import "./Mentors.scss"; function Mentors({ refs }) { return (

-
+
{mentorContent.map((mentor, index) => { diff --git a/src/components/private/mentors/Mentors.scss b/src/components/private/mentors/Mentors.scss index 081c495..904b900 100644 --- a/src/components/private/mentors/Mentors.scss +++ b/src/components/private/mentors/Mentors.scss @@ -8,52 +8,6 @@ padding: 2rem 1.5rem; margin-top: 2rem; } - - .mentors__header { - font-size: clamp(3rem, 7vw, 5rem); - line-height: 3rem; - text-align: center; - letter-spacing: 0em; - font-family: var(--heading-font); - position: relative; - z-index: 2; - - h1 { - font-weight: 900; - font-size: 150px; - letter-spacing: 0.8rem; - color: rgba(255, 255, 255, 0.06); - position: absolute; - transform: translate(-50%, -50%); - left: 50%; - top: 18%; - z-index: 2; - - &::after { - content: ""; - position: absolute; - border: 1px solid var(--h4bred); - width: 250px; - bottom: -15px; - left: 50%; - transform: translate(-50%, -50%); - } - } - - h2 { - font-size: clamp(2rem, 2.5vw, 2.8rem); - font-weight: 700; - } - - @media screen and (max-width: 576px) { - h1 { - font-size: 78px; - letter-spacing: 0.2rem; - top: -20%; - left: 50%; - } - } - } .mentors__container { width: 100%; margin: auto; diff --git a/src/components/private/prizes/Prizes.jsx b/src/components/private/prizes/Prizes.jsx index 24cc062..192aecf 100644 --- a/src/components/private/prizes/Prizes.jsx +++ b/src/components/private/prizes/Prizes.jsx @@ -1,4 +1,5 @@ import React from "react"; +import HeaderData from "../../../assets/data/HeaderContent"; import { ComingSoon, Header } from "../../shared"; import "./Prizes.scss"; @@ -6,15 +7,7 @@ const Prizes = ({ refs }) => { return ( <>
- {/*
-

Awards

-

{windowWidth > 700 && "Hackathon"} Prizes

-
*/} -
+
diff --git a/src/components/private/prizes/Prizes.scss b/src/components/private/prizes/Prizes.scss index 59d5dc1..e4904f3 100644 --- a/src/components/private/prizes/Prizes.scss +++ b/src/components/private/prizes/Prizes.scss @@ -9,57 +9,6 @@ margin-top: 2rem; } - .prizes__header { - font-size: clamp(3rem, 7vw, 5rem); - line-height: 3rem; - text-align: center; - letter-spacing: 0em; - font-family: var(--heading-font); - position: relative; - z-index: 2; - - h1 { - font-weight: 900; - font-size: 150px; - letter-spacing: 0.8rem; - color: rgba(255, 255, 255, 0.06); - position: absolute; - transform: translate(-50%, -50%); - left: 50%; - top: 18%; - z-index: 2; - - &::after { - content: ""; - position: absolute; - border: 1px solid var(--h4bred); - width: 250px; - bottom: 10px; - left: 50%; - transform: translate(-50%, -50%); - - @media screen and (max-width: 576px) { - bottom: -10px; - width: 200px; - } - } - } - - h2 { - font-size: clamp(2rem, 2.5vw, 2.8rem); - font-weight: 700; - } - - @media screen and (max-width: 576px) { - h1 { - font-size: 85px; - letter-spacing: 0.2rem; - top: -20%; - left: 50%; - } - } - } - .red__blob { position: absolute; top: -34rem; diff --git a/src/components/private/sponsors/Sponsors.jsx b/src/components/private/sponsors/Sponsors.jsx index 6b076be..cdaad97 100644 --- a/src/components/private/sponsors/Sponsors.jsx +++ b/src/components/private/sponsors/Sponsors.jsx @@ -1,4 +1,5 @@ import React from "react"; +import HeaderData from "../../../assets/data/HeaderContent"; import sponsors from "../../../assets/data/SponsorsContent"; import { Header } from "../../shared"; import "./Sponsors.scss"; @@ -8,11 +9,7 @@ const Sponsors = ({ refs }) => { return ( <>
-
+
{sponsors.map((item, index) => { diff --git a/src/components/private/sponsors/Sponsors.scss b/src/components/private/sponsors/Sponsors.scss index 0383b2b..1ccc245 100644 --- a/src/components/private/sponsors/Sponsors.scss +++ b/src/components/private/sponsors/Sponsors.scss @@ -9,56 +9,6 @@ margin-top: 2rem; } - .sponsors__header { - font-size: clamp(3rem, 7vw, 5rem); - line-height: 3rem; - text-align: center; - letter-spacing: 0em; - font-family: var(--heading-font); - position: relative; - z-index: 2; - text-wrap: nowrap; - - h1 { - font-weight: 900; - font-size: 130px; - letter-spacing: 0.8rem; - color: rgba(255, 255, 255, 0.06); - position: absolute; - transform: translate(-50%, -50%); - left: 50%; - top: 18%; - z-index: 2; - - &::after { - content: ""; - position: absolute; - border: 1px solid var(--h4bred); - width: 250px; - bottom: 10px; - left: 50%; - transform: translate(-50%, -50%); - - @media screen and (max-width: 576px) { - bottom: -10px; - } - } - - @media screen and (max-width: 576px) { - font-size: 75px; - letter-spacing: 0.2rem; - top: -20%; - left: 50%; - } - } - - h2 { - font-size: clamp(1.8rem, 2.5vw, 2.8rem); - font-weight: 700; - width: 100%; - } - } - .sponsors__flexbox { display: flex; flex-wrap: wrap; diff --git a/src/components/private/testimonials/Testimonials.jsx b/src/components/private/testimonials/Testimonials.jsx index 3fbc59e..031bd57 100644 --- a/src/components/private/testimonials/Testimonials.jsx +++ b/src/components/private/testimonials/Testimonials.jsx @@ -1,5 +1,6 @@ import React from "react"; import Marquee from "react-fast-marquee"; +import HeaderData from "../../../assets/data/HeaderContent"; import testimonials from "../../../assets/data/TestimonialContent"; import { Header } from "../../shared"; import "./Testimonials.scss"; @@ -7,7 +8,7 @@ import "./Testimonials.scss"; const Testimonials = ({ refs }) => { return (
-
+
{ return ( <>
-
+
diff --git a/src/components/private/themes/Theme.scss b/src/components/private/themes/Theme.scss index 44cdd64..8a683bd 100644 --- a/src/components/private/themes/Theme.scss +++ b/src/components/private/themes/Theme.scss @@ -8,55 +8,4 @@ padding: 2rem 1.5rem; margin-top: 2rem; } - - .theme__header { - font-size: clamp(3rem, 7vw, 5rem); - line-height: 3rem; - text-align: center; - letter-spacing: 0em; - font-family: var(--heading-font); - position: relative; - z-index: 2; - text-wrap: nowrap; - - h1 { - font-weight: 900; - font-size: 150px; - letter-spacing: 0.8rem; - color: rgba(255, 255, 255, 0.06); - position: absolute; - transform: translate(-50%, -50%); - left: 50%; - top: 18%; - z-index: 2; - - &::after { - content: ""; - position: absolute; - border: 1px solid var(--h4bred); - width: 250px; - bottom: 10px; - left: 50%; - transform: translate(-50%, -50%); - - @media screen and (max-width: 576px) { - bottom: -10px; - width: 200px; - } - } - - @media screen and (max-width: 576px) { - font-size: 80px; - letter-spacing: 0.2rem; - top: -20%; - left: 50%; - } - } - - h2 { - font-size: clamp(1.8rem, 2.5vw, 2.8rem); - font-weight: 700; - width: 100%; - } - } } diff --git a/src/components/private/timeline/Timeline.jsx b/src/components/private/timeline/Timeline.jsx index 0c5cd79..7f6505f 100644 --- a/src/components/private/timeline/Timeline.jsx +++ b/src/components/private/timeline/Timeline.jsx @@ -1,4 +1,5 @@ import React from "react"; +import HeaderData from "../../../assets/data/HeaderContent"; import { ComingSoon, Header } from "../../shared"; import "./Timeline.scss"; @@ -6,17 +7,7 @@ const Timeline = ({ refs }) => { return ( <>
- {/*
-

{windowWidth > 700 ? "Roadmap" : "Plan"}

-

{windowWidth > 700 && "Hackathon"} Timeline

-
*/} -
- +
diff --git a/src/components/shared/header/Header.jsx b/src/components/shared/header/Header.jsx index 109bc7e..d6a46dd 100644 --- a/src/components/shared/header/Header.jsx +++ b/src/components/shared/header/Header.jsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from "react"; import "./Header.scss"; -const Header = ({ backWord, backWordMobile, frontWord, frontWordMobile }) => { +const Header = ({ ...data }) => { const [windowWidth, setWindowWidth] = useState(window.innerWidth); useEffect(() => { @@ -16,10 +16,29 @@ const Header = ({ backWord, backWordMobile, frontWord, frontWordMobile }) => { }; }, []); + const backWordStyles = { + fontSize: + windowWidth > 700 + ? data.backWordSize || "150px" + : data.backWordSize_mobile, + letterSpacing: + windowWidth > 700 + ? data.backWordSpacing || "0.8rem" + : data.backWordSpacing_mobile, + }; + return (
-

{windowWidth > 700 ? backWord : backWordMobile || backWord}

-

{windowWidth > 700 ? frontWord : frontWordMobile || frontWord}

+

+ {windowWidth > 700 + ? data.backWord + : data.backWordMobile || data.backWord} +

+

+ {windowWidth > 700 + ? data.frontWord + : data.frontWordMobile || data.frontWord} +

); }; diff --git a/src/components/shared/header/Header.scss b/src/components/shared/header/Header.scss index 060650d..4338454 100644 --- a/src/components/shared/header/Header.scss +++ b/src/components/shared/header/Header.scss @@ -10,8 +10,8 @@ h1 { font-weight: 900; - font-size: 150px; - letter-spacing: 0.8rem; + // font-size: 150px; + // letter-spacing: 0.8rem; color: rgba(255, 255, 255, 0.06); position: absolute; transform: translate(-50%, -50%); @@ -35,8 +35,8 @@ } @media screen and (max-width: 576px) { - font-size: 93px; - letter-spacing: 0.5rem; + // font-size: 93px; + // letter-spacing: 0.5rem; top: -13%; left: 50%; }