fix: updated component for header

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

Hide file tree

Showing 13 changed files with 162 additions and 204 deletions.
diff --git a/.github/workflows/auto-author-assign.yml b/.github/workflows/auto-author-assign.yml
@@ -0,0 +1,13 @@
+name: 📢 Add Authors to PRs
+
+on:
+  pull_request_target:
+    types: [opened, reopened]
+
+jobs:
+  assign-author:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: toshimaru/[email protected]
+        with:
+          repo-token: "${{ secrets.GITHUB_TOKEN }}"
diff --git a/src/assets/data/CollaboratorsContent.js b/src/assets/data/CollaboratorsContent.js
@@ -15,31 +15,22 @@ import nftday from "../images/CollaboratorsImages/nftday.svg";
 import nordek from "../images/CollaboratorsImages/nordek.svg";
 import web3reinvent from "../images/CollaboratorsImages/web3reinvent.svg";
 
-const collaboratorsContent = {
-  title: {
-    main: "Past Collaborations",
-    back: {
-      main: "Collaborators",
-      alt: "Collab",
-    },
-  },
-  collaborators: [
-    wbgov,
-    wbgovcs,
-    nftday,
-    gccd2023,
-    brb,
-    hackthisfall,
-    kolkatafoss,
-    web3reinvent,
-    devfestsiliguri2023,
-    filbangalore,
-    nordek,
-    dataverseos,
-    flutterkolkata,
-    hackverse,
-    kolkatapolygonguild,
-  ],
-};
+const collaborators = [
+  wbgov,
+  wbgovcs,
+  nftday,
+  gccd2023,
+  brb,
+  hackthisfall,
+  kolkatafoss,
+  web3reinvent,
+  devfestsiliguri2023,
+  filbangalore,
+  nordek,
+  dataverseos,
+  flutterkolkata,
+  hackverse,
+  kolkatapolygonguild,
+];
 
-export default collaboratorsContent;
+export default collaborators;
diff --git a/src/components/private/collaborators/Collaborators.jsx b/src/components/private/collaborators/Collaborators.jsx
@@ -1,38 +1,23 @@
-import React, { useEffect, useState } from "react";
-import collaboratorsContent from "../../../assets/data/CollaboratorsContent";
+import React from "react";
+import collaborators from "../../../assets/data/CollaboratorsContent";
+import { Header } from "../../shared";
 import "./Collaborators.scss";
-// import ComingSoon from "../comingsoon/ComingSoon";
 
 const Collaborators = ({ refs }) => {
-  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
-
-  useEffect(() => {
-    const handleResize = () => {
-      setWindowWidth(window.innerWidth);
-    };
-
-    window.addEventListener("resize", handleResize);
-
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-
   return (
     <div className="collaborators__parent" ref={refs}>
       <div className="collaborators__header disable-select">
-        <h1>
-          {windowWidth > 1280
-            ? collaboratorsContent.title.back.main
-            : collaboratorsContent.title.back.alt}
-        </h1>
-        <h2>{collaboratorsContent.title.main}</h2>
+        <Header
+          backWord={"Collaborators"}
+          backWordMobile={"Collab"}
+          frontWord={"Past Collaborations"}
+        />
       </div>
-      {/* <ComingSoon /> */}
+
       <div className="collaborators__flexbox__container">
         <div className="collaborators__flexbox">
-          {collaboratorsContent.collaborators.map((collaborator, index) => {
-            return <img src={collaborator} key={index} alt="" />;
+          {collaborators.map((collaborator, index) => {
+            return <img src={collaborator} key={index} alt={collaborator} />;
           })}
         </div>
       </div>

diff --git a/src/components/private/mentors/Mentors.jsx b/src/components/private/mentors/Mentors.jsx
@@ -1,30 +1,18 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import Marquee from "react-fast-marquee";
 import { FaLinkedinIn, FaXTwitter } from "react-icons/fa6";
 import { mentorContent } from "../../../assets/data/MentorsContent";
+import { Header } from "../../shared";
 import "./Mentors.scss";
 
 function Mentors({ refs }) {
-  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
-
-  useEffect(() => {
-    const handleResize = () => {
-      setWindowWidth(window.innerWidth);
-    };
-
-    window.addEventListener("resize", handleResize);
-
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-
   return (
     <section className="mentors__parent" ref={refs}>
-      <div className="mentors__header disable-select">
-        <h1>Experts</h1>
-        <h2>{windowWidth > 700 ? "Previous" : "Past"} Mentors</h2>
-      </div>
+      <Header
+        backWord={"Experts"}
+        frontWord={"Previous Mentors"}
+        frontWordMobile={"Past Mentors"}
+      />
 
       <div className="mentors__container mentors__container_desktop">
         {mentorContent.map((mentor, index) => {

diff --git a/src/components/private/prizes/Prizes.jsx b/src/components/private/prizes/Prizes.jsx
@@ -1,30 +1,20 @@
-import React, { useEffect, useState } from "react";
-import { ComingSoon } from "../../shared";
+import React from "react";
+import { ComingSoon, Header } from "../../shared";
 import "./Prizes.scss";
 
 const Prizes = ({ refs }) => {
-  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
-
-  useEffect(() => {
-    const handleResize = () => {
-      setWindowWidth(window.innerWidth);
-    };
-
-    window.addEventListener("resize", handleResize);
-
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-
   return (
     <>
       <div className="prizes__parent" ref={refs}>
-        <div className="prizes__header disable-select">
+        {/* <div className="prizes__header disable-select">
           <h1>Awards</h1>
           <h2>{windowWidth > 700 && "Hackathon"} Prizes</h2>
-        </div>
-
+        </div> */}
+        <Header
+          backWord={"Awards"}
+          frontWord={"Hackathon Prizes"}
+          frontWordMobile={"Prizes"}
+        />
         <ComingSoon />
       </div>
     </>

diff --git a/src/components/private/sponsors/Sponsors.jsx b/src/components/private/sponsors/Sponsors.jsx
@@ -1,32 +1,19 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import sponsors from "../../../assets/data/SponsorsContent";
+import { Header } from "../../shared";
 import "./Sponsors.scss";
 import SingleSponsors from "./singlesponsors/SingleSponsors";
 
 const Sponsors = ({ refs }) => {
-  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
-
-  useEffect(() => {
-    const handleResize = () => {
-      setWindowWidth(window.innerWidth);
-    };
-
-    window.addEventListener("resize", handleResize);
-
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-
   return (
     <>
       <div className="sponsors__parent" ref={refs}>
-        <div className="sponsors__header disable-select">
-          <h1>{windowWidth > 700 ? "Supporters" : "Backers"}</h1>
-          <h2>Past Sponsors</h2>
-        </div>
+        <Header
+          backWord={"Supporters"}
+          backWordMobile={"Backers"}
+          frontWord={"Past Sponsor"}
+        />
 
-        {/* <ComingSoon /> */}
         <div className="sponsors__flexbox">
           {sponsors.map((item, index) => {
             return <SingleSponsors key={index} sponsor={item} />;

diff --git a/src/components/private/testimonials/Testimonials.jsx b/src/components/private/testimonials/Testimonials.jsx
@@ -1,15 +1,13 @@
 import React from "react";
 import Marquee from "react-fast-marquee";
 import testimonials from "../../../assets/data/TestimonialContent";
+import { Header } from "../../shared";
 import "./Testimonials.scss";
 
 const Testimonials = ({ refs }) => {
   return (
     <div className="testimonials__parent" ref={refs}>
-      <div className="testimonials__header disable-select">
-        <h1>Stories</h1>
-        <h2>Testimonials</h2>
-      </div>
+      <Header backWord={"Stories"} frontWord={"Testimonials"} />
       <Marquee
         autoFill={true}
         pauseOnHover={true}

diff --git a/src/components/private/themes/Theme.jsx b/src/components/private/themes/Theme.jsx
@@ -1,29 +1,16 @@
-import React, { useEffect, useState } from "react";
-import { ComingSoon } from "../../shared";
+import React from "react";
+import { ComingSoon, Header } from "../../shared";
 import "./Theme.scss";
 
 const Theme = ({ refs }) => {
-  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
-
-  useEffect(() => {
-    const handleResize = () => {
-      setWindowWidth(window.innerWidth);
-    };
-
-    window.addEventListener("resize", handleResize);
-
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-
   return (
     <>
       <div className="theme__parent" ref={refs}>
-        <div className="theme__header disable-select">
-          <h1>Tracks</h1>
-          <h2>{windowWidth > 700 && "Hackathon"} Themes</h2>
-        </div>
+        <Header
+          backWord={"Tracks"}
+          frontWord={"Hackathon Themes"}
+          frontWordMobile={"Themes"}
+        />
 
         <ComingSoon />
       </div>

diff --git a/src/components/private/timeline/Timeline.jsx b/src/components/private/timeline/Timeline.jsx
@@ -1,29 +1,21 @@
-import React, { useEffect, useState } from "react";
-import { ComingSoon } from "../../shared";
+import React from "react";
+import { ComingSoon, Header } from "../../shared";
 import "./Timeline.scss";
 
 const Timeline = ({ refs }) => {
-  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
-
-  useEffect(() => {
-    const handleResize = () => {
-      setWindowWidth(window.innerWidth);
-    };
-
-    window.addEventListener("resize", handleResize);
-
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-
   return (
     <>
       <div className="timeline__parent" ref={refs}>
-        <div className="timeline__header disable-select">
+        {/* <div className="timeline__header disable-select">
           <h1>{windowWidth > 700 ? "Roadmap" : "Plan"}</h1>
           <h2>{windowWidth > 700 && "Hackathon"} Timeline</h2>
-        </div>
+        </div> */}
+        <Header
+          backWord={"Roadmap"}
+          backWordMobile={"Plan"}
+          frontWord={"Hackathon Timeline"}
+          frontWordMobile={"Timeline"}
+        />
 
         <ComingSoon />
       </div>

diff --git a/src/components/private/timeline/Timeline.scss b/src/components/private/timeline/Timeline.scss
@@ -8,55 +8,4 @@
     padding: 2rem 1.5rem;
     margin-top: 2rem;
   }
-
-  .timeline__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: 93px;
-        letter-spacing: 0.5rem;
-        top: -13%;
-        left: 50%;
-      }
-    }
-
-    h2 {
-      font-size: clamp(1.8rem, 2.5vw, 2.8rem);
-      font-weight: 700;
-      width: 100%;
-    }
-  }
 }