Feat new resources page build (#256)

* rename mastercraft pages

* hero section build

* features section build

* archive section build init

* field section build

* footer build

* delete residue files

* delete residue files

* fix: lint error

* fix: more lint errors

* fix: transition error

---------

Co-authored-by: sonylomo <sonylomo1@gmail.com>

src/assets/images/resources-page/index.js

@@ -1,4 +1,12 @@
 export { default as backend } from "./backend.png";
 export { default as dataScience } from "./data-science.png";
 export { default as frontend } from "./frontend.png";
+export { default as hero } from "./hero.png";
+export { default as heroFooter } from "./hero-footer.png";
 export { default as productDesign } from "./product-design.png";
+export { default as podPoster } from "./podcast-poster.png";
+
+export { default as youtube } from "./icons/youtube.svg";
+export { default as spotify } from "./icons/spotify.svg";
+export { default as space } from "./icons/space.svg";
+export { default as play } from "./icons/play.svg";

src/components/LandingWrapper.jsx

@@ -1,9 +1,15 @@
 /* eslint-disable react/prop-types */
 import React from "react";
+import { cn } from "../utilities/utils";
 
-function LandingWrapper({ children, title }) {
+function LandingWrapper({ children, title, bgColored = false }) {
   return (
-    <section className="flex flex-col gap-4 md:gap-8 my-10 md:my-20">
+    <section
+      className={cn(
+        "flex flex-col gap-4 md:gap-8",
+        bgColored ? "bg-green-light py-10 md:py-20" : "my-10 md:my-20"
+      )}
+    >
       <div className="mx-auto w-full flex flex-row items-center gap-2 md:gap-4">
         <div className="w-full h-0.5 rounded-sm bg-gray-300" />
         <h2 className="min-w-fit text-primary text-sm leading-loose px-4 bg-gradient-to-r from-[#D7F4EB] to-white py-2 rounded-full font-semibold border-2 border-gray-300 uppercase">

src/components/ResourcesFooter.jsx

@@ -8,9 +8,10 @@ import {
 } from "react-icons/fa";
 import { FaXTwitter } from "react-icons/fa6";
 import { LazyLoadImage } from "react-lazy-load-image-component";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 
 import mastercraft from "../assets/images/mastercraft/mastercraft-hero-footer.png";
+import { heroFooter } from "../assets/images/resources-page";
 import logo from "../assets/images/sytLogo.png";
 
 const socialLinks = [
@@ -211,55 +212,86 @@ export default ResourcesFooter;
 
 function FooterTop() {
   const [cohortEmail, setCohortEmail] = useState("");
+  const { pathname } = useLocation();
 
   return (
     <div className="hidden md:block bg-[#F5F5F5]">
-      <div className="relative mx-auto max-w-1440 pt-60">
+      <div className="relative mx-auto pt-60">
         <div className="w-full xl:w-fit max-w-768 xl:max-w-1216 mx-auto absolute top-12 left-1/2 -translate-x-1/2 z-10">
           <LazyLoadImage
-            src={mastercraft}
+            src={pathname === "/mastercraft" ? mastercraft : heroFooter}
             alt="mastercraft"
             className="w-full object-contain"
             effect="blur"
           />
         </div>
         {/* Bottom */}
-        <div className="bg-secondary relative rounded-t-2xl pt-60 pb-12 mx-auto max-w-1440 flex-center overflow-clip">
-          <div className="max-w-xl flex flex-col gap-3 text-white">
-            <h4 className="text-center text-3xl px-4">
-              Bet on yourself. It’s completely
-              <br /> free
-            </h4>
+        <div className="bg-secondary relative rounded-t-xl 2xl:rounded-t-2xl pt-60 2xl:pt-80 pb-12 mx-auto flex-center overflow-clip">
+          {pathname === "/mastercraft" ? (
+            <div className="max-w-xl flex flex-col gap-3 text-white">
+              <h4 className="text-center text-3xl px-4">
+                Bet on yourself. It’s completely
+                <br /> free
+              </h4>
 
-            <p className="text-center text-base px-16 font-normal">
-              We believe education should be nurtured and made as accessible as
-              possible.
-            </p>
+              <p className="text-center text-base px-16 font-normal">
+                We believe education should be nurtured and made as accessible
+                as possible.
+              </p>
 
-            <div className="w-full">
-              <small className="text-xs">Get future cohort dates</small>
-              <form
-                onSubmit={(e) => {
-                  e.preventDefault();
-                }}
-                className="bg-white p-[1px] border rounded-md w-full flex items-center text-grey-dark"
-              >
-                <input
-                  type="email"
-                  className="flex-grow outline-none px-2 text-sm"
-                  placeholder="Enter email"
-                  value={cohortEmail}
-                  onChange={(e) => setCohortEmail(e.target.value)}
-                />
+              <div className="w-full">
+                <small className="text-xs">Get future cohort dates</small>
+                <form
+                  onSubmit={(e) => {
+                    e.preventDefault();
+                  }}
+                  className="bg-white p-[1px] border rounded-md w-full flex items-center text-grey-dark"
+                >
+                  <input
+                    type="email"
+                    className="flex-grow outline-none px-2 text-sm"
+                    placeholder="Enter email"
+                    value={cohortEmail}
+                    onChange={(e) => setCohortEmail(e.target.value)}
+                  />
+                  <button
+                    type="submit"
+                    className="rounded-r px-6 py-1.5 font-semibold text-white border-none bg-gradient-to-b to-primary from-green-dark"
+                  >
+                    Submit
+                  </button>
+                </form>
+              </div>
+            </div>
+          ) : (
+            <div className="max-w-xl flex flex-col gap-3 text-white">
+              <h4 className="text-center text-3xl leading-normal font-semibold px-4">
+                Accelerate your journey to <br />
+                your first role
+              </h4>
+
+              <p className="text-center text-base px-16 font-light">
+                The community has come together to ensure you finish the race.
+                One you get there, pay it forward.
+              </p>
+
+              <div className="flex items-center mx-auto mt-4 gap-5">
                 <button
-                  type="submit"
-                  className="rounded-r px-6 py-1.5 font-semibold text-white border-none bg-gradient-to-b to-primary from-green-dark"
+                  type="button"
+                  className="bg-green-dark text-white text-sm font-light rounded border border-green-dark px-3 py-2 transition-colors duration-300 ease-in-out hover:bg-transparent hover:text-green-dark"
                 >
-                  Submit
+                  Explore Resources
                 </button>
-              </form>
+
+                <button
+                  type="button"
+                  className="bg-transparent text-white text-sm font-light rounded border px-3 py-2 transition-colors duration-300 ease-in-out hover:bg-green-dark hover:text-white"
+                >
+                  Become a contributor
+                </button>
+              </div>
             </div>
-          </div>
+          )}
 
           <LazyLoadImage
             src="/syt.png"

src/context/searchBlog.jsx

@@ -1,5 +1,11 @@
 import PropTypes from "prop-types";
-import { createContext, useEffect, useMemo, useState } from "react";
+import {
+  createContext,
+  useEffect,
+  useMemo,
+  useState,
+  startTransition,
+} from "react";
 import { useSearchBlog } from "../hooks/Queries/blogs/useAllBlogsData";
 
 export const SearchBlogContext = createContext();
@@ -12,7 +18,9 @@ export function SearchBlogProvider({ children }) {
 
   useEffect(() => {
     const dalayDebounceFn = setTimeout(() => {
-      refetchSearchBlog();
+      startTransition(() => {
+        refetchSearchBlog();
+      });
     }, 500);
 
     return () => clearTimeout(dalayDebounceFn);