diff --git a/package.json b/package.json index abbeeccd..87c09389 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "@fortawesome/fontawesome-svg-core": "^6.4.0", "@fortawesome/free-solid-svg-icons": "^6.4.0", "@fortawesome/react-fontawesome": "^0.2.0", - "@headlessui/react": "^1.7.15", + "@headlessui/react": "^1.7.18", "@hookform/resolvers": "^3.3.2", "@tanstack/react-query": "^4.35.3", "@tanstack/react-query-devtools": "^4.35.3", diff --git a/src/APP/components/Header2.jsx b/src/APP/components/Header2.jsx index 3739e04f..a15745c9 100644 --- a/src/APP/components/Header2.jsx +++ b/src/APP/components/Header2.jsx @@ -30,11 +30,11 @@ const navLinks = [ link: "Blogs", route: "/blogs", }, - // { - // id: 6, - // link: "Resources", - // route: "/resources", - // }, + { + id: 6, + link: "Resources", + route: "/resources", + }, // { // id: 7, // link: "Shop", diff --git a/src/APP/index.js b/src/APP/index.js index 0dedd02b..7a238f88 100644 --- a/src/APP/index.js +++ b/src/APP/index.js @@ -28,7 +28,7 @@ import GalleryPage from "./pages/gallery/GalleryPage"; import LandingPage from "./pages/landingPage/LandingPage"; import Layout from "./pages/Layout"; import Products from "./pages/products2/Products"; -import Resources from "./pages/resources/Resources"; +import Resources from "./pages/resources2/Resources"; import Homepage from "./pages/shop/Homepage"; import Checkout from "./pages/shop/OrderSummaryPage"; import ProductDisplay from "./pages/shop/ProductDisplayPage"; diff --git a/src/APP/pages/resources/Resources.jsx b/src/APP/pages/resources/Resources.jsx deleted file mode 100644 index 62d1efa9..00000000 --- a/src/APP/pages/resources/Resources.jsx +++ /dev/null @@ -1,12 +0,0 @@ -import { HeroSection, ResourcesSection } from "./sections"; - -const Resources = () => { - return ( -
- - -
- ); -}; - -export default Resources; diff --git a/src/APP/pages/resources/sections/HeroSection.jsx b/src/APP/pages/resources/sections/HeroSection.jsx deleted file mode 100644 index 48c94e84..00000000 --- a/src/APP/pages/resources/sections/HeroSection.jsx +++ /dev/null @@ -1,63 +0,0 @@ -// <<<<<<< felix-blog-page-build -import { earth_moon } from "../../../../assets/images/resources-page"; - -const HeroSection = () => { - return ( -
-
-
Resources
- -

- Discover{" "} - tech tools and resources to - boost your productivity -

-

- Master the art of tech with our expert guides, tutorials, and - step-by-step instructions to help you develop proficiency and - confidence in the world of technology. -

-
- - earth & moon -
- ); -}; - -export default HeroSection; -// ======= -// import { earth_moon } from "../../../../assets/images/resources-page"; - -// const HeroSection = () => { -// return ( -//
-//
-//
Resources
- -//

-// Discover{" "} -// tech tools and resources to -// boost your productivity -//

-//

-// Master the art of tech with our expert guides, tutorials, and -// step-by-step instructions to help you develop proficiency and -// confidence in the world of technology. -//

-//
- -// earth & moon -//
-// ); -// }; - -// export default HeroSection; -// >>>>>>> main diff --git a/src/APP/pages/resources/sections/ResourceCard.jsx b/src/APP/pages/resources/sections/ResourceCard.jsx deleted file mode 100644 index df33f82f..00000000 --- a/src/APP/pages/resources/sections/ResourceCard.jsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from "react"; -import { Link } from "react-router-dom"; -import { tools } from "../../../../assets/images/resources-page"; - -import { arrowRight } from "../../../../assets/images/resources-page"; - -const ResourceCard = ({ resource }) => { - const { id, name, description } = resource; - return ( -
-
- {name} -
- -

{name}

- -

{description}

- - - {/* */} - -
- ); -}; - -export default ResourceCard; diff --git a/src/APP/pages/resources/sections/ResourcesSection.jsx b/src/APP/pages/resources/sections/ResourcesSection.jsx deleted file mode 100644 index dde13f5d..00000000 --- a/src/APP/pages/resources/sections/ResourcesSection.jsx +++ /dev/null @@ -1,57 +0,0 @@ -import React, { useState } from "react"; -import { search } from "../../../../assets/images/resources-page"; -import ResourceCard from "./ResourceCard"; -import useResourcesData from "../../../../hooks/Queries/resources/useResourcesData"; - -function ResourcesSection() { - const [searchText, setSearchText] = useState(""); - const { - data: resourceTypes, - isLoading, - isError, - isSuccess, - } = useResourcesData(); - - const handleSearch = (e) => { - e.preventDefault(); - console.log(searchText); - }; - - return ( - <> - {isError &&

Error loading resource categories!

} - {isLoading &&

Loading resource categories...

} - {isSuccess && ( - <> -
-
- setSearchText(e.target.value)} - /> - search -
- -
- {resourceTypes && Array.isArray(resourceTypes) - ? resourceTypes.map((resource) => ( - - )) - : ""} -
-
- - )} - - ); -} - -export default ResourcesSection; diff --git a/src/APP/pages/resources/sections/index.js b/src/APP/pages/resources/sections/index.js deleted file mode 100644 index 123ea04a..00000000 --- a/src/APP/pages/resources/sections/index.js +++ /dev/null @@ -1,5 +0,0 @@ -import { default as HeroSection } from "./HeroSection"; -import { default as ResourcesSection } from "./ResourcesSection"; -import { default as ResourceCard } from "./ResourceCard"; - -export { HeroSection, ResourceCard, ResourcesSection }; diff --git a/src/APP/pages/resources2/sections/HeroSection.jsx b/src/APP/pages/resources2/sections/HeroSection.jsx index c2010f2e..72afd2ee 100644 --- a/src/APP/pages/resources2/sections/HeroSection.jsx +++ b/src/APP/pages/resources2/sections/HeroSection.jsx @@ -1,30 +1,32 @@ -import { earth_moon } from "../../../../assets/images/resources-page"; - -const HeroSection = () => { - return ( -
-
-
Resources
- -

- Discover{" "} - tech tools and resources to - boost your productivity -

-

- Master the art of tech with our expert guides, tutorials, and - step-by-step instructions to help you develop proficiency and - confidence in the world of technology. -

-
- - earth & moon -
- ); -}; - -export default HeroSection; +import React from "react"; + +import { earthMoon } from "../../../../assets/images/resources-page"; + +function HeroSection() { + return ( +
+
+
Resources
+ +

+ Discover{" "} + tech tools and resources + to boost your productivity +

+

+ Master the art of tech with our expert guides, tutorials, and + step-by-step instructions to help you develop proficiency and + confidence in the world of technology. +

+
+ + earth & moon +
+ ); +} + +export default HeroSection; diff --git a/src/APP/pages/resources2/sections/ResourceCard.jsx b/src/APP/pages/resources2/sections/ResourceCard.jsx index c01e7f66..7974d50e 100644 --- a/src/APP/pages/resources2/sections/ResourceCard.jsx +++ b/src/APP/pages/resources2/sections/ResourceCard.jsx @@ -1,77 +1,100 @@ -import React, { useState } from "react"; -import { arrow, course1 } from "../../../../assets/images/resources-page"; - -const ResourceCard = () => { - const [hovered, setHovered] = useState(false); - - return ( -
-
setHovered(false)} - > - {/* img cover */} -
- -
- - {/* desc */} -
-
-
Course
- setHovered((prev) => !prev)} - /> -
- -
-

setHovered((prev) => !prev)} - > - React: Creating and Hosting a Full-stack Site -

- - {/* Show/Hide div */} -
- Description -

- This course covers the basics of React, from beginner to - advanced and is very appropriate for those people who have just - finished learning JavaScript and feel ready to start learning - React. The course is self-paced, lasting for 6 months or earlier - and is taught by instructors for Google. Would highly recommend - this course. -

-
-
- - Coursera - - setHovered(false)} - href="/resources" - target="_blank" - rel="noopener noreferrer" - className={`w-fit mx-auto border border-[#12A97E] rounded-lg py-[10px] px-10 text-sm text-[#009975] transition-all duration-500 ease-in hover:text-white hover:bg-[#009975] font-normal ${ - hovered ? "flex" : "hidden" - }`} - > - Go to site - -
-
-
- ); -}; - -export default ResourceCard; +import React, { useEffect, useState } from "react"; +import { arrow, arrowRight } from "../../../../assets/images/resources-page"; + +function ResourceCard({ + type, + title, + description, + image, + origin, + level, + link, +}) { + const [hovered, setHovered] = useState(false); + + const color = (lev) => { + if (lev === "beginner") { + return "text-primary"; + } + if (lev === "intermediate") { + return "text-gray-500"; + } + return "text-red-500"; + }; + + useEffect(() => {}, [hovered]); + + return ( +
+
setHovered(false)} + onMouseEnter={() => { + setHovered((prev) => !prev); + }} + > + {/* img cover */} +
+ {title} +
+ + {/* desc */} +
+
+
{type}
+ arrow +
+ +
+

+ {title} +

+ + {/* Show/Hide div */} +
+ Description +

+ {description} +

+
+
+ +
+ {origin} + + {level} + +
+ + setHovered(false)} + href={link} + target="_blank" + rel="noopener noreferrer" + className={`w-fit mx-auto border border-[#12A97E] rounded-lg py-[10px] px-10 text-sm text-[#009975] transition-all duration-500 ease-in hover:text-white hover:bg-[#009975] font-normal ${ + hovered ? "flex" : "hidden" + }`} + > + Go to site + +
+
+
+ ); +} + +export default ResourceCard; diff --git a/src/APP/pages/resources2/sections/ResourcesSection.jsx b/src/APP/pages/resources2/sections/ResourcesSection.jsx index 72b93198..9e8cccec 100644 --- a/src/APP/pages/resources2/sections/ResourcesSection.jsx +++ b/src/APP/pages/resources2/sections/ResourcesSection.jsx @@ -1,46 +1,21 @@ +/* eslint-disable implicit-arrow-linebreak */ import React, { useState } from "react"; +import { Tab } from "@headlessui/react"; -import { courses, search } from "../../../../assets/images/resources-page"; +import { resourcesData } from "./data"; +import { search } from "../../../../assets/images/resources-page"; import ResourceCard from "./ResourceCard"; -import BlogPagination from "../../blogs/sections/BlogPagination"; -// import useResourcesData from "../../../../hooks/Queries/resources/useResourcesData"; -const DifficultyCard = ({ title, selected }) => { - return ( -
-
- -
- -

{title}

-
- ); -}; +function classNames(...classes) { + return classes.filter(Boolean).join(" "); +} function ResourcesSection() { const [searchText, setSearchText] = useState(""); - // const { - // data: resourceTypes, - // isLoading, - // isError, - // isSuccess, - // } = useResourcesData(); - - const handleSearch = (e) => { - e.preventDefault(); - console.log(searchText); - }; return ( <> - {/* {isError &&

Error loading resource categories!

} - {isLoading &&

Loading resource categories...

} */} - {/* {isSuccess && ( */} -
+
setSearchText(e.target.value)} /> - search + search
+
-
- {/* mobile difficulty filter */} -
- - - -
+ + + + classNames( + "min-w-fit w-fit rounded-[40px] py-2 px-4 text-base font-light leading-5", + "ring-white/60 ring-offset-2 ring-offset-gray-600 focus:outline-none", + selected + ? "bg-primary font-medium text-white" + : "bg-[#f8f8f8] font-normal" + ) + } + > + All + - {/* Field filter */} -
- - - - - -
+ {resourcesData.map(({ id, topic }) => ( + + classNames( + "min-w-fit w-fit rounded-[40px] py-2 px-4 text-base font-light leading-5", + "ring-white/60 ring-offset-2 ring-offset-gray-600 focus:outline-none", + selected + ? "bg-primary font-medium text-white" + : "bg-[#f8f8f8] font-normal" + ) + } + > + {topic} + + ))} + - {/* ResourceCard Wrapper & Desktop Difficulty filters */} -
-
- - - -
-
- - - - - - - - -
-
+ + + {resourcesData + .flatMap(({ resources }) => resources) + .map( + ({ + id, + type, + title, + description, + image, + origin, + level, + link, + }) => ( + + ) + )} + - -
-
+ {resourcesData.map(({ id, resources }) => ( + + {resources.map( + ({ + id, + type, + title, + description, + image, + origin, + level, + topic, + link, + }) => ( + + ) + )} + + ))} + + ); } diff --git a/src/APP/pages/resources2/sections/data.js b/src/APP/pages/resources2/sections/data.js new file mode 100644 index 00000000..658f8222 --- /dev/null +++ b/src/APP/pages/resources2/sections/data.js @@ -0,0 +1,316 @@ +import { + course1, + course2, + course3, + course4, +} from "../../../../assets/images/resources-page"; + +// eslint-disable-next-line import/prefer-default-export +export const resourcesData = [ + { + id: 1, + topic: "Frontend Development", + resources: [ + { + id: 1, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course3, + origin: "Coursera", + level: "beginner", + topic: "Frontend Development", + link: "/resources", + }, + { + id: 2, + type: "Article", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course4, + origin: "Coursera", + level: "intermediate", + topic: "Frontend Development", + link: "/resources", + }, + { + id: 3, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course2, + origin: "Coursera", + level: "beginner", + topic: "Frontend Development", + link: "/resources", + }, + ], + }, + { + id: 2, + topic: "Backend Development", + resources: [ + { + id: 4, + type: "Article", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course3, + origin: "Coursera", + level: "beginner", + topic: "Backend Development", + link: "/resources", + }, + { + id: 5, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course3, + origin: "Coursera", + level: "beginner", + topic: "Backend Development", + link: "/resources", + }, + { + id: 6, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course2, + origin: "Coursera", + level: "intermediate", + topic: "Backend Development", + link: "/resources", + }, + { + id: 7, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course2, + origin: "Coursera", + level: "intermediate", + topic: "Backend Development", + link: "/resources", + }, + { + id: 8, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course2, + origin: "Coursera", + level: "beginner", + topic: "Backend Development", + link: "/resources", + }, + { + id: 9, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course2, + origin: "Coursera", + level: "intermediate", + topic: "Backend Development", + link: "/resources", + }, + { + id: 10, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course2, + origin: "Coursera", + level: "intermediate", + topic: "Backend Development", + link: "/resources", + }, + ], + }, + { + id: 3, + topic: "UI/UX Design", + resources: [ + { + id: 11, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course3, + origin: "Coursera", + level: "expert", + topic: "UI/UX Design", + link: "/resources", + }, + { + id: 12, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course1, + origin: "Coursera", + level: "expert", + topic: "UI/UX Design", + link: "/resources", + }, + { + id: 13, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course1, + origin: "Coursera", + level: "expert", + topic: "UI/UX Design", + link: "/resources", + }, + { + id: 14, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course1, + origin: "Coursera", + level: "beginner", + topic: "UI/UX Design", + link: "/resources", + }, + { + id: 15, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course1, + origin: "Coursera", + level: "expert", + topic: "UI/UX Design", + link: "/resources", + }, + { + id: 16, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course1, + origin: "Coursera", + level: "expert", + topic: "UI/UX Design", + link: "/resources", + }, + { + id: 17, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course1, + origin: "Coursera", + level: "beginner", + topic: "UI/UX Design", + link: "/resources", + }, + { + id: 18, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course1, + origin: "Coursera", + level: "expert", + topic: "UI/UX Design", + link: "/resources", + }, + ], + }, + { + id: 4, + topic: "Product Management", + resources: [ + { + id: 19, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course2, + origin: "Coursera", + level: "intermediate", + topic: "Product Management", + link: "/resources", + }, + { + id: 20, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course2, + origin: "Coursera", + level: "beginner", + topic: "Product Management", + link: "/resources", + }, + { + id: 21, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course2, + origin: "Coursera", + level: "beginner", + topic: "Product Management", + link: "/resources", + }, + ], + }, + { + id: 5, + topic: "Android Development", + resources: [ + { + id: 22, + type: "Video", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course2, + origin: "Coursera", + level: "beginner", + topic: "Android Management", + link: "/resources", + }, + { + id: 23, + type: "Course", + title: "React: Creating and Hosting a Full-stack Site", + description: + "This course covers the basics of React, from beginner to advanced and is very appropriate for those people who have just finished learning JavaScript and feel ready to start learning React. The course is self-paced, lasting for 6 months or earlier and is taught by instructors for Google. Would highly recommend this course.", + image: course2, + origin: "Coursera", + level: "intermediate", + topic: "Android Management", + link: "/resources", + }, + ], + }, +]; diff --git a/src/assets/images/resources-page/index.js b/src/assets/images/resources-page/index.js index 1029e5b3..ecde2984 100644 --- a/src/assets/images/resources-page/index.js +++ b/src/assets/images/resources-page/index.js @@ -1,45 +1,45 @@ -import earth_moon from "./earth_moon.png"; -import curriculums from "./curriculums.png"; -import mentorlst from "./mentorlst.png"; -import podcasts from "./podcasts.png"; -import yt_channel from "./yt-channel.png"; -import search from "./search-icon.svg"; - -import community from "./community.png"; -import courses from "./courses.png"; -import events from "./events.png"; -import jobs from "./jobs.png"; -import masterclass from "./masterclass.png"; -import microphone from "./microphone.png"; -import tools from "./tools.png"; -import youtube from "./youtube.png"; -import arrowRight from "./arrow-right.png"; -import arrow from "./arrow.svg"; - -import course1 from "./course1.png"; -import course2 from "./course2.png"; -import course3 from "./course3.png"; -import course4 from "./course4.png"; - -export { - earth_moon, - curriculums, - mentorlst, - podcasts, - search, - yt_channel, - community, - courses, - events, - jobs, - masterclass, - microphone, - tools, - youtube, - arrowRight, - course1, - course2, - course3, - course4, - arrow, -}; +import earthMoon from "./earth_moon.png"; +import curriculums from "./curriculums.png"; +import mentorlst from "./mentorlst.png"; +import podcasts from "./podcasts.png"; +import ytChannel from "./yt-channel.png"; +import search from "./search-icon.svg"; + +import community from "./community.png"; +import courses from "./courses.png"; +import events from "./events.png"; +import jobs from "./jobs.png"; +import masterclass from "./masterclass.png"; +import microphone from "./microphone.png"; +import tools from "./tools.png"; +import youtube from "./youtube.png"; +import arrowRight from "./arrow-right.png"; +import arrow from "./arrow.svg"; + +import course1 from "./course1.png"; +import course2 from "./course2.png"; +import course3 from "./course3.png"; +import course4 from "./course4.png"; + +export { + earthMoon, + curriculums, + mentorlst, + podcasts, + search, + ytChannel, + community, + courses, + events, + jobs, + masterclass, + microphone, + tools, + youtube, + arrowRight, + course1, + course2, + course3, + course4, + arrow, +}; diff --git a/src/router/index.jsx b/src/router/index.jsx index f0ec13b9..8b8c7a19 100644 --- a/src/router/index.jsx +++ b/src/router/index.jsx @@ -12,7 +12,7 @@ import { EventsPage, IndividualChapter, Homepage, - // Resources, + Resources, ProductDisplay, ForgotPassword, LogIn, @@ -94,11 +94,10 @@ const router = createBrowserRouter([ path: "/events/:id", // New route path element: , }, - // { - // path: "/resources", - // element: , - // }, - + { + path: "/resources", + element: , + }, // { // path: "/donate", // element: ,