Feat third resources page build (#257)

* Build seconde resources page

* Solve react-router-dom errors

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

@@ -1,7 +1,10 @@
 export { default as backend } from "./backend.png";
+export { default as UI } from "./bad-good-UI.png";
+export { default as UIDesignEra } from "./UIDesignEra.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 resourceHero } from "./resource-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";

src/components/ResourcesFooter.jsx

@@ -88,7 +88,7 @@ function ResourcesFooter() {
   const year = now.getFullYear();
 
   return (
-    <div className="">
+    <div className="xl:pt-64">
       <FooterTop />
       <footer className="bg-secondary text-white" data-testid="footer-section">
         <div className="md:px-12 md:pt-8 md:pb-[2px] py-8 px-4 max-w-[1440px] mx-auto">
@@ -217,7 +217,7 @@ function FooterTop() {
   return (
     <div className="hidden md:block bg-[#F5F5F5]">
       <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">
+        <div className="w-full xl:w-full max-w-768 xl:max-w-1216 mx-auto absolute top-12 xl:-top-48 left-1/2 -translate-x-1/2 z-10">
           <LazyLoadImage
             src={pathname === "/mastercraft" ? mastercraft : heroFooter}
             alt="mastercraft"

src/index.js

@@ -48,6 +48,7 @@ const MastercraftHome = lazy(
 const ResourcesHome = lazy(
   () => import("./pages/resources-home/ResourcesHome")
 );
+const Resource = lazy(() => import("./pages/resource/Resource"));
 const MastercraftLayout = lazy(() => import("./pages/MastercraftLayout"));
 const Homepage = lazy(() => import("./pages/shop/Homepage"));
 const Checkout = lazy(() => import("./pages/shop/OrderSummaryPage"));
@@ -103,6 +104,7 @@ export {
   ProductDisplay,
   Products,
   ResetPassword,
+  Resource,
   ResourcesHome,
   MastercraftHome,
   MastercraftLayout,

src/main.jsx

@@ -28,7 +28,12 @@ ReactDOM.createRoot(document.getElementById("root")).render(
         <AuthContextProvider>
           <QueryClientProvider client={queryClient}>
             <SearchBlogProvider>
-              <RouterProvider router={router} />
+              <RouterProvider
+                router={router}
+                future={{
+                  v7_startTransition: true,
+                }}
+              />
               <ReactQueryDevtools position="bottom-right" />
             </SearchBlogProvider>
           </QueryClientProvider>

src/pages/mastercraft/sections/Description.jsx

@@ -25,15 +25,15 @@ function Description() {
   };
   return (
     <div className="w-full flex gap-6 md:gap-12">
-      <div className="bg-white p-1 rounded-xl w-1/5 h-fit">
-        <div className="w-full hidden md:block border rounded-lg bg-green-light p-4 space-y-4 text-base pb-6">
+      <div className="bg-white p-1 rounded-xl w-1/5 h-fit hidden lg:block">
+        <div className="w-full border rounded-lg bg-green-light p-4 space-y-4 text-base pb-6">
           <h4 className="uppercase font-semibold">Product Design</h4>
 
           <div className="flex flex-col gap-3 text-[#767975] font-normal items-start">
             <button
               type="button"
               onClick={() => handleScrollToSection("CourseDescription")}
-              className="focus:text-green-dark focus:font-medium outline-none"
+              className="focus:text-green-dark focus:font-medium outline-none text-left"
               ref={defaultFocusedLinkRef}
             >
               Course Description
@@ -42,55 +42,55 @@ function Description() {
             <button
               type="button"
               onClick={() => handleScrollToSection("WhoCanApply")}
-              className="focus:text-green-dark focus:font-medium outline-none"
+              className="focus:text-green-dark focus:font-medium outline-none text-left"
             >
               Who can apply
             </button>
 
             <button
               type="button"
               onClick={() => handleScrollToSection("WhatYouWillLearn")}
-              className="focus:text-green-dark focus:font-medium outline-none"
+              className="focus:text-green-dark focus:font-medium outline-none text-left"
             >
               What you will learn
             </button>
 
             <button
               type="button"
               onClick={() => handleScrollToSection("Curriculum")}
-              className="focus:text-green-dark focus:font-medium outline-none"
+              className="focus:text-green-dark focus:font-medium outline-none text-left"
             >
               Curriculum
             </button>
 
             <button
               type="button"
               onClick={() => handleScrollToSection("CourseOutcome")}
-              className="focus:text-green-dark focus:font-medium outline-none"
+              className="focus:text-green-dark focus:font-medium outline-none text-left"
             >
               Course Outcome
             </button>
 
             <button
               type="button"
               onClick={() => handleScrollToSection("Instructors")}
-              className="focus:text-green-dark focus:font-medium outline-none"
+              className="focus:text-green-dark focus:font-medium outline-none text-left"
             >
               Instructors
             </button>
 
             <button
               type="button"
               onClick={() => handleScrollToSection("Pricing")}
-              className="focus:text-green-dark focus:font-medium outline-none"
+              className="focus:text-green-dark focus:font-medium outline-none text-left"
             >
               Pricing
             </button>
 
             <button
               type="button"
               onClick={() => handleScrollToSection("NextCohort")}
-              className="focus:text-green-dark focus:font-medium outline-none"
+              className="focus:text-green-dark focus:font-medium outline-none text-left"
             >
               Next Cohort
             </button>

src/pages/resource/Resource.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+import SeoMetadata from "../../components/SeoMetadata";
+import Content from "./sections/Content";
+import Hero from "./sections/Hero";
+import SimilarResources from "./sections/SimilarResources";
+
+function Resource() {
+  return (
+    <>
+      <SeoMetadata
+        title="Resources"
+        description="Discover tech tools and resources to boost your productivity."
+        type="article"
+        url="https://www.spaceyatech.com/resources"
+        ogImage="https://apis.spaceyatech.com/media/blog-images/syt.png"
+        ogImageAlt="SpaceYaTech logo, social media handles, website URL, email, and more on a muted background."
+      />
+      <main className="bg-[#F5F5F5] max-w-1440 mx-auto md:px-10 px-5 py-4 md:py-8 flex flex-col gap-12 md:gap-16 lg:gap-20">
+        <Hero />
+        <Content />
+        <SimilarResources />
+      </main>
+    </>
+  );
+}
+
+export default Resource;