feat: brand

src/App.jsx

@@ -60,9 +60,7 @@ const App = () => {
                 <Forward
                   pathname={"/apply"}
                   title={"S4 Applications"}
-                  url={
-                    "https://docs.google.com/forms/d/e/1FAIpQLScxL27u1UUIRi6L6I8GOpfSaLIJnW34_gfoL2_Lfy9xItgCYw/viewform"
-                  }
+                  url={"https://forms.gle/vqZg6agMfDDf4kug8"}
                 />
               }
             />

src/assets/data/BrandContent.js

@@ -1,48 +1,105 @@
-import image1 from "../images/BrandImages/h4b-grey-dark-text-wide-logo-75a17c70.webp";
-import image2 from "../images/BrandImages/h4b-white-light-text-wide-logo-68b9b9c9.webp";
-import image3 from "../images/BrandImages/h4blogo 1.webp";
-import image4 from "../images/BrandImages/Light - Banner (1).webp";
-import image7 from "../images/BrandImages/square-grey-logo-with-bottom-text-black-red (6) 1.webp";
-import image8 from "../images/BrandImages/square-grey-logo-with-bottom-text-black-red-3fef9187.webp";
-import image10 from "../images/BrandImages/square-white-logo-with-bottom-text-white-91e44dee (1).webp";
-import image11 from "../images/BrandImages/square-white-logo-without-text-efa8708a.webp";
-import image12 from "../images/BrandImages/h4b-color-palette.webp";
+import greyMapBlackTextTopRedTextBottomLogo from "../images/brand/regular/grey-map-black-text-top-red-text-bottom-logo-2800-500.png";
+import squareGreyLogoWithBottomTextBlackRed from "../images/brand/regular/square-grey-logo-with-bottom-text-black-red.png";
+import squareGreyLogo from "../images/brand/regular/square-grey-logo.png";
+import squareWhiteLogoWithBottomTextBlackRed from "../images/brand/regular/square-white-logo-with-bottom-text-black-red.png";
+import squareWhiteLogoWithBottomTextWhite from "../images/brand/regular/square-white-logo-with-bottom-text-white.png";
+import squareWhiteLogo from "../images/brand/regular/square-white-logo.png";
+import whiteMapWhiteTextBlackBackgroundLogo from "../images/brand/regular/white-map-white-text-black-background-logo.png";
+import whiteMapWhiteTextBothLogo from "../images/brand/regular/white-map-white-text-both-logo-2800-500.png";
 
-export const brandContent = [
-  {
-    image: image1,
-    name: "Hack4Bengal Grey Wide Logo Dark Text",
-  },
-  {
-    image: image2,
-    name: "Hack4Bengal White Wide Logo Light Text",
-  },
-  {
-    image: image3,
-    name: "Hack4Bengal Logo Light Text",
-  },
-  {
-    image: image4,
-    name: "Hack4Bengal Logo Dark Text",
-  },
-  {
-    image: image7,
-    name: "Hack4Bengal Sqaure Black Logo without Text",
-  },
-  {
-    image: image8,
-    name: "Hack4Bengal Sqaure Grey Logo with Bottom Text Black & Red",
-  },
-  {
-    image: image10,
-    name: "Hack4Bengal Sqaure White Logo with Bottom Text White",
-  },
-  {
-    image: image11,
-    name: "Hack4Bengal Sqaure White Logo without Text",
-  },
-  {
-    image: image12,
-    name: "Hack4Bengal Color Palette",
-  },
-];
+import tblackLogo from "../images/brand/transparent/black-logo.png";
+import tgreyMapBlackTextTopRedTextBottomLogoWithDropShadow from "../images/brand/transparent/grey-map-black-text-top-red-text-bottom-logo-2800-500-with-drop-shadow.png";
+import th4bGreyDarkTextWideLogo from "../images/brand/transparent/h4b-grey-dark-text-wide-logo.fb988ca7f3226853c243.png";
+import tsquareGreyLogoWithBottomTextBlackRed from "../images/brand/transparent/square-grey-logo-with-bottom-text-black-red.png";
+import tsquareGreyLogo from "../images/brand/transparent/square-grey-logo.png";
+import tsquareWhiteLogoWithBottomTextBlackRed from "../images/brand/transparent/square-white-logo-with-bottom-text-black-red.png";
+import tsquareWhiteLogoWithBottomTextWhite from "../images/brand/transparent/square-white-logo-with-bottom-text-white.png";
+import tsquareWhiteLogo from "../images/brand/transparent/square-white-logo.png";
+import twhiteLogo from "../images/brand/transparent/white-logo.png";
+import twhiteMapWhiteTextBlackBackgroundLogo from "../images/brand/transparent/white-map-white-text-black-background-logo.png";
+import twhiteMapWhiteTextBothLogo from "../images/brand/transparent/white-map-white-text-both-logo-2800-500.png";
+
+export const brandContent = {
+  regularImages: [
+    {
+      title: "grey-map-black-text-top-red-text-bottom-logo (2800 x 500)",
+      image: greyMapBlackTextTopRedTextBottomLogo,
+    },
+    {
+      title: "square-grey-logo",
+      image: squareGreyLogo,
+    },
+    {
+      title: "square-grey-logo-with-bottom-text-black-red",
+      image: squareGreyLogoWithBottomTextBlackRed,
+    },
+    {
+      title: "square-white-logo",
+      image: squareWhiteLogo,
+    },
+    {
+      title: "square-white-logo-with-bottom-text-black-red",
+      image: squareWhiteLogoWithBottomTextBlackRed,
+    },
+    {
+      title: "square-white-logo-with-bottom-text-white",
+      image: squareWhiteLogoWithBottomTextWhite,
+    },
+    {
+      title: "white-map-white-text-black-background-logo",
+      image: whiteMapWhiteTextBlackBackgroundLogo,
+    },
+    {
+      title: "white-map-white-text-both-logo (2800 x 500)",
+      image: whiteMapWhiteTextBothLogo,
+    },
+  ],
+  transparentImages: [
+    {
+      title: "black-logo",
+      image: tblackLogo,
+    },
+
+    {
+      title: "h4b-grey-dark-text-wide-logo",
+      image: th4bGreyDarkTextWideLogo,
+    },
+    {
+      title: "square-grey-logo-with-bottom-text-black-red",
+      image: tsquareGreyLogoWithBottomTextBlackRed,
+    },
+    {
+      title: "square-grey-logo",
+      image: tsquareGreyLogo,
+    },
+    {
+      title: "square-white-logo-with-bottom-text-black-red",
+      image: tsquareWhiteLogoWithBottomTextBlackRed,
+    },
+    {
+      title: "square-white-logo-with-bottom-text-white",
+      image: tsquareWhiteLogoWithBottomTextWhite,
+    },
+    {
+      title: "square-white-logo",
+      image: tsquareWhiteLogo,
+    },
+    {
+      title:
+        "grey-map-black-text-top-red-text-bottom-logo (2800 x 500) with drop shadow",
+      image: tgreyMapBlackTextTopRedTextBottomLogoWithDropShadow,
+    },
+    {
+      title: "white-logo",
+      image: twhiteLogo,
+    },
+    {
+      title: "white-map-white-text-black-background-logo",
+      image: twhiteMapWhiteTextBlackBackgroundLogo,
+    },
+    {
+      title: "white-map-white-text-both-logo (2800 x 500)",
+      image: twhiteMapWhiteTextBothLogo,
+    },
+  ],
+};

src/components/shared/footer/Footer.jsx

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import footerContent from "../../../assets/data/FooterContent";
+// import h4b from "../../../assets/images/brand/h4b-white-light-text-wide-logo-68b9b9c9.webp";
 import gradient from "../../../assets/images/FooterImages/gradient.png";
-import h4b from "../../../assets/images/BrandImages/h4b-white-light-text-wide-logo-68b9b9c9.webp";
 import taxi from "../../../assets/images/FooterImages/taxi.png";
 import tram from "../../../assets/images/FooterImages/tram.png";
 import "./Footer.scss";
@@ -16,16 +16,28 @@ const Footer = () => {
   return (
     <footer className="footer">
       <div>
-        <div className="footer_flexdiv">
+        {/* <div className="footer_flexdiv">
           <img src={h4b} alt="" className="h4b_logo" />
           <img src={h4b} alt="" className="opacity-0 h4b_logo_2" />
-        </div>
+        </div> */}
 
         <div className="footer_flexdiv previous_season">
           <div className="footer_content">
             <div className="footer_policy">
-              <a href="https://s1.hack4bengal.tech/" target="_blank" rel="noopener noreferrer">Season 1</a>
-              <a href="https://s2.hack4bengal.tech/" target="_blank" rel="noopener noreferrer">Season 2</a>
+              <a
+                href="https://s1.hack4bengal.tech/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Season 1
+              </a>
+              <a
+                href="https://s2.hack4bengal.tech/"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Season 2
+              </a>
             </div>
           </div>
         </div>
@@ -70,8 +82,20 @@ const Footer = () => {
         <img src={taxi} alt="Taxi" />
         <p>Checkout our Previous Seasons</p>
         <div className="season_linkdiv">
-          <a href="https://s1.hack4bengal.tech/" target="_blank" rel="noopener noreferrer">Season 1</a>
-          <a href="https://s2.hack4bengal.tech/" target="_blank" rel="noopener noreferrer">Season 2</a>
+          <a
+            href="https://s1.hack4bengal.tech/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Season 1
+          </a>
+          <a
+            href="https://s2.hack4bengal.tech/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Season 2
+          </a>
         </div>
       </div>
     </footer>

src/pages/brand/Brand.jsx

@@ -1,25 +1,57 @@
-import React, { useEffect } from "react";
+import clsx from "clsx";
+import React, { useEffect, useState } from "react";
 import { brandContent } from "../../assets/data/BrandContent.js";
-import "./Brand.scss";
-import BrandCard from "./brandcard/BrandCard.jsx";
 import HeaderData from "../../assets/data/HeaderContent";
 import { Header } from "../../components/shared";
-
+import "./Brand.scss";
+import BrandCard from "./brandcard/BrandCard.jsx";
 
 function Brand() {
   useEffect(() => {
     window.scrollTo(0, 0);
   }, []);
 
+  const [activeCategory, setActiveCategory] = useState("regular");
+
   return (
     <>
       <div className="brand">
         <div className="brand__content">
           <Header {...HeaderData.brand} />
-          <div className="brandCards__parent">
-            {brandContent.map((brandItem, brandIndex) => (
-              <BrandCard key={brandIndex} brandItem={brandItem} />
-            ))}
+
+          <div className="brand_container">
+            <div className="brand_category">
+              <div
+                className={clsx(
+                  "brand_categoryName",
+                  activeCategory === "regular" && "active"
+                )}
+                onClick={() => setActiveCategory("regular")}
+              >
+                Regular <span>Logo</span>
+              </div>
+              <div
+                className={clsx(
+                  "brand_categoryName",
+                  activeCategory === "transparent" && "active"
+                )}
+                onClick={() => setActiveCategory("transparent")}
+              >
+                Transparent <span>Logo</span>
+              </div>
+            </div>
+
+            <div className="brand_flexbox">
+              {activeCategory === "regular"
+                ? brandContent.regularImages.map((brandItem, brandIndex) => (
+                    <BrandCard key={brandIndex} brandItem={brandItem} />
+                  ))
+                : brandContent.transparentImages.map(
+                    (brandItem, brandIndex) => (
+                      <BrandCard key={brandIndex} brandItem={brandItem} />
+                    )
+                  )}
+            </div>
           </div>
         </div>
       </div>

src/pages/brand/Brand.scss

@@ -2,18 +2,81 @@
   width: 70%;
   margin: auto;
   margin-top: 13rem;
-  .brandCards__parent {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
-    gap: 2.2rem;
-    margin-top: 7rem;
-    margin-bottom: 4rem;
+
+  .brand_container {
+    display: flex;
+    flex-direction: column;
+
+    margin-top: 5rem;
+    margin-bottom: 5rem;
+
+    .brand_category {
+      display: flex;
+      gap: 5px;
+      margin: 2rem auto;
+      align-items: center;
+      font-family: var(--heading-font);
+
+      @media screen and (max-width: 743px) {
+        gap: 10px;
+        margin: 1rem auto;
+        flex-direction: column;
+      }
+
+      .brand_categoryName {
+        border: 1px solid #ffffff75;
+        background-color: rgba(0, 0, 0, 0.173);
+        padding: 1rem 2rem;
+        font-size: 15px;
+        width: 210px;
+        text-align: center;
+        cursor: pointer;
+        border-radius: 8px;
+        filter: brightness(0.3);
+        transition: all 0.3s ease-in-out;
+
+        @media screen and (max-width: 743px) {
+          width: 170px;
+          font-size: 14px;
+          padding: 1rem 1.5rem;
+          border-radius: 6px !important;
+        }
+
+        &:nth-child(1) {
+          border-top-right-radius: 0;
+          border-bottom-right-radius: 0;
+        }
+
+        &:nth-child(2) {
+          border-top-left-radius: 0;
+          border-bottom-left-radius: 0;
+        }
+
+        span {
+          @media screen and (max-width: 743px) {
+            display: none;
+          }
+        }
+      }
+
+      .active {
+        filter: brightness(1);
+        transition: all 0.3s ease-in-out;
+      }
+    }
+
+    .brand_flexbox {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
+      gap: 2.2rem;
+      margin-top: 3rem;
+      margin-bottom: 4rem;
+    }
   }
 }
 
-
 @media (max-width: 743px) {
-  .brandCards__parent {
+  .brand_flexbox {
     grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
   }
 }