fix: mapping content for better redability

hack4bengal · Jan 7, 2024 · e49ee83 · e49ee83
1 parent 9f0b05b
commit e49ee83
Show file tree

Hide file tree

Showing 18 changed files with 109 additions and 390 deletions.
diff --git a/src/assets/data/HeaderContent.js 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
@@ -1,17 +1,14 @@
 import React from "react";
 import collaborators from "../../../assets/data/CollaboratorsContent";
+import HeaderData from "../../../assets/data/HeaderContent";
 import { Header } from "../../shared";
 import "./Collaborators.scss";
 
 const Collaborators = ({ refs }) => {
   return (
     <div className="collaborators__parent" ref={refs}>
       <div className="collaborators__header disable-select">
-        <Header
-          backWord={"Collaborators"}
-          backWordMobile={"Collab"}
-          frontWord={"Past Collaborations"}
-        />
+        <Header {...HeaderData.collaborators} />
       </div>
 
       <div className="collaborators__flexbox__container">

diff --git 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
@@ -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 (
     <div className="faq" ref={refs}>
       <div className="faq__content">
-        <div className="faq__header disable-select">
-          <h1>FAQ</h1>
-          <h2>Questions</h2>
-        </div>
+        <Header {...HeaderData.faq} />
 
         <div className="faq__subheader">
           <p>

diff --git 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
@@ -1,18 +1,15 @@
 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";
 
 function Mentors({ refs }) {
   return (
     <section className="mentors__parent" ref={refs}>
-      <Header
-        backWord={"Experts"}
-        frontWord={"Previous Mentors"}
-        frontWordMobile={"Past Mentors"}
-      />
+      <Header {...HeaderData.mentors} />
 
       <div className="mentors__container mentors__container_desktop">
         {mentorContent.map((mentor, index) => {

diff --git 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
@@ -1,20 +1,13 @@
 import React from "react";
+import HeaderData from "../../../assets/data/HeaderContent";
 import { ComingSoon, Header } from "../../shared";
 import "./Prizes.scss";
 
 const Prizes = ({ refs }) => {
   return (
     <>
       <div className="prizes__parent" ref={refs}>
-        {/* <div className="prizes__header disable-select">
-          <h1>Awards</h1>
-          <h2>{windowWidth > 700 && "Hackathon"} Prizes</h2>
-        </div> */}
-        <Header
-          backWord={"Awards"}
-          frontWord={"Hackathon Prizes"}
-          frontWordMobile={"Prizes"}
-        />
+        <Header {...HeaderData.prizes} />
         <ComingSoon />
       </div>
     </>

diff --git 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
@@ -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 (
     <>
       <div className="sponsors__parent" ref={refs}>
-        <Header
-          backWord={"Supporters"}
-          backWordMobile={"Backers"}
-          frontWord={"Past Sponsor"}
-        />
+        <Header {...HeaderData.sponsors} />
 
         <div className="sponsors__flexbox">
           {sponsors.map((item, index) => {