resource page added with few free resource list issue #226 (#231)

* resource page added with few free resource list

* vercel deploy issue fix

* new font + new component for resource card

* more resources added

* lodash aded+ lots of improvement and more resources added

* search field dark ui issue fix

* lots of improvement + resource images added

Author: devvsakib

package.json

@@ -15,6 +15,7 @@
     "antd": "^5.19.1",
     "axios": "^1.2.2",
     "framer-motion": "^10.8.3",
+    "lodash": "^4.17.21",
     "prettier": "^3.3.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/components/Common/MainTitle.jsx

@@ -0,0 +1,8 @@
+const MainTitle = ({
+    title,
+    highlight
+}) => {
+    return <h1 className="text-2xl sm:text-3xl font-bold mb-16 mt-5 text-center w-10/12 sm:w-full mx-auto">{title} <span className='text-transparent bg-gradient-to-tr from-primary to-white bg-clip-text'>{highlight}</span></h1>;
+};
+
+export default MainTitle;

src/components/Header/Header.jsx

@@ -4,6 +4,7 @@ import {
   MdClose,
   MdMenu,
   MdHome,
+  MdStore,
 } from "react-icons/md";
 import { AiFillGithub } from "react-icons/ai";
 import { Link } from "react-router-dom";
@@ -36,9 +37,9 @@ function Header({notice }) {
       icon: <MdInsertDriveFile size="1.2rem" />,
     },
     {
-      name: "Contributors",
-      link: "/Contributors",
-      icon: <MdPeople size="1.2rem" />,
+      name: "Resources",
+      link: "/resources",
+      icon: <MdStore size="1.2rem" />,
     },
     {
       name: "Github",

src/components/Layout/Layout.jsx

@@ -10,7 +10,7 @@ import { ThemeProvider } from '../../context/ThemeContext';
  */
 const Layout = ({ stars, children }) => {
     return (
-        <div className='flex flex-col justify-between min-h-screen'>
+        <div className='flex flex-col justify-between min-h-screen font-[poppins]'>
             <ThemeProvider>
                 <Header
                     notice={"Under Construction"}

src/components/Resources/ResourceCard.jsx

@@ -0,0 +1,30 @@
+import { Link } from "react-router-dom";
+
+const ResourceCard = ({ idx, resource }) => {
+    return <div key={idx} className="dark:bg-black rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
+        {resource.image && (
+            <div className="grid items-center">
+                <img
+                    src={resource.image}
+                    alt={resource.title}
+                    onError={(e) => { e.target.src = "assets/logo.png"; }}
+                    className="h-40 object-cover object-center "
+                />
+            </div>
+        )}
+        <div className="p-6">
+            <h3 className="text-lg font-semibold mb-2">{resource.title}</h3>
+            <p className="text-gray-700 mb-4">{resource.description}</p>
+            <Link
+                to={resource.link}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-blue-600 hover:underline"
+            >
+                Learn More
+            </Link>
+        </div>
+    </div>;
+};
+
+export default ResourceCard;

src/components/Resources/ResourceSection.jsx

@@ -0,0 +1,18 @@
+import ResourceCard from "./ResourceCard";
+
+const ResourceSection = ({ id, title, resources }) => {
+    return (
+        <section id={id} className="my-12">
+            <h2 className="text-3xl font-bold mb-10 text-center">{title}</h2>
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
+                {resources.length === 0 ? <div>
+                    <h3 className="text-xl font-medium text-center mb-20">No resources found</h3>
+                </div> :
+                    resources.map((resource, index) => (
+                        <ResourceCard idx={index} resource={resource} />
+                    ))}
+            </div>
+        </section>
+    );
+}
+export default ResourceSection;