Fix card styling , added dark mode

index.html

@@ -9,6 +9,14 @@
     <link rel="icon" type="image/png" sizes="16x16" href="src/assets/favicon_io/favicon-16x16.png" />
     <link rel="manifest" href="src/assets/favicon_io/site.webmanifest" />
     <script src="https://kit.fontawesome.com/6dca7316ef.js" crossorigin="anonymous"></script>
+    <script>
+      // On page load or when changing themes, best to add inline in `head` to avoid FOUC
+      if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+        document.documentElement.classList.add('dark')
+      } else {
+        document.documentElement.classList.remove('dark')
+      }
+    </script>
   </head>
 
   <!-- Google tag (gtag.js) -->

src/App.jsx

@@ -1,64 +1,46 @@
-import React,{lazy, Suspense} from "react";
-import { Route, Routes, NavLink } from "react-router-dom";
-// import Nav from './components/nav/Nav.jsx';
-import SideNav from "./components/nav/SideNav.jsx";
-import ScrollToTopButton from "./components/ScrollToTopButton.jsx";
+import { lazy, Suspense } from 'react';
+import { Routes, Route } from 'react-router-dom';
+import { ThemeProvider } from './context/ThemeContext';
+import Sidebar from './components/Sidebar';
 
-const Home = lazy(() => import("./components/Home.jsx"));
-const Books = lazy(() => import("./components/books/Index.jsx"));
-const Tools = lazy(() => import("./components/tools/Index.jsx"));
-const Videos = lazy(() => import("./components/videos/Index.jsx"));
-const Editors = lazy(() => import("./components/editor/Index.jsx"));
-const Websites = lazy(() => import("./components/websites/Index.jsx"));
-const Challenges = lazy(() => import("./components/challenges/Index.jsx"));
+// Lazy load components
+const Home = lazy(() => import('./components/Home'));
+const About = lazy(() => import('./components/About'));
+const Videos = lazy(() => import('./components/videos/Index'));
+const Websites = lazy(() => import('./components/websites/Index'));
+const Challenges = lazy(() => import('./components/challenges/Index'));
+const Books = lazy(() => import('./components/books/Index'));
+const Tools = lazy(() => import('./components/tools/Index'));
+const Editors = lazy(() => import('./components/editor/Index'));
+const Resources = lazy(() => import('./components/Resources'));
 
-const App = () => {
+function App() {
   return (
-    <div className="flex">
-      <SideNav className="" />
-      <div className="lg:pl-60">
-        <Routes location={location} key={location.key}>
-          {/* Home */}
-          <Route path="/" element={
-            <Suspense fallback={<p>Loading</p>}>
-              <Home />
-            </Suspense>
-          } />
-          <Route path="/Videos" element={
-            <Suspense fallback={<p>Loading</p>}>
-              <Videos />
-            </Suspense>
-          } />
-          <Route path="/Websites" element={
-            <Suspense fallback={<p>Loading</p>}>
-              <Websites />
-            </Suspense>
-          } />
-          <Route path="/Challenges" element={
-            <Suspense fallback={<p>Loading</p>}>
-              <Challenges />
-            </Suspense>
-          } />
-          <Route path="/Books" element={
-            <Suspense fallback={<p>Loading</p>}>
-              <Books />
-            </Suspense>
-          } />
-          <Route path="/Tools" element={
-            <Suspense fallback={<p>Loading</p>}>
-              <Tools />
-            </Suspense>
-          } />
-            <Route path="/Editors" element={
-            <Suspense fallback={<p>Loading</p>}>
-              <Editors />
-            </Suspense>
-          } />
-        </Routes>
+    <ThemeProvider>
+      <div className="flex min-h-screen bg-gray-100 dark:bg-gray-900">
+        <Sidebar />
+        <main className="flex-1 ml-64 relative">
+          <Suspense fallback={
+            <div className="flex items-center justify-center h-screen">
+              <div className="text-2xl text-gray-600 dark:text-gray-300">Loading...</div>
+            </div>
+          }>
+            <Routes>
+              <Route path="/" element={<Home />} />
+              <Route path="/about" element={<About />} />
+              <Route path="/videos" element={<Videos />} />
+              <Route path="/websites" element={<Websites />} />
+              <Route path="/challenges" element={<Challenges />} />
+              <Route path="/books" element={<Books />} />
+              <Route path="/tools" element={<Tools />} />
+              <Route path="/editors" element={<Editors />} />
+              <Route path="/resources" element={<Resources />} />
+            </Routes>
+          </Suspense>
+        </main>
       </div>
-      <ScrollToTopButton />
-    </div>
+    </ThemeProvider>
   );
-};
+}
 
 export default App;

src/components/About.jsx

@@ -0,0 +1,58 @@
+import { motion } from 'framer-motion';
+
+export default function About() {
+  return (
+    <div className="flex flex-col w-full h-screen mt-6">
+      <motion.div
+        className="p-8 max-w-4xl mx-auto"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+      >
+        <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-6">
+          About Web Resources Hub
+        </h1>
+
+        <div className="space-y-6 text-gray-600 dark:text-gray-300">
+          <p>
+            Welcome to Web Resources Hub, your comprehensive platform for web development
+            learning and resources. Our mission is to empower developers of all levels
+            with the tools and knowledge they need to succeed in the ever-evolving
+            world of web development.
+          </p>
+
+          <h2 className="text-2xl font-semibold text-gray-800 dark:text-gray-100 mt-8 mb-4">
+            Our Vision
+          </h2>
+          <p>
+            We believe that quality learning resources should be accessible to everyone.
+            Our platform curates the best web development resources, from beginner-friendly
+            tutorials to advanced technical documentation, helping you grow your skills
+            at your own pace.
+          </p>
+
+          <h2 className="text-2xl font-semibold text-gray-800 dark:text-gray-100 mt-8 mb-4">
+            What We Offer
+          </h2>
+          <ul className="list-disc list-inside space-y-2">
+            <li>Comprehensive documentation for popular web technologies</li>
+            <li>Curated learning paths for different skill levels</li>
+            <li>Best practices and coding standards</li>
+            <li>Community-driven resource recommendations</li>
+            <li>Regular updates with the latest web development trends</li>
+          </ul>
+
+          <h2 className="text-2xl font-semibold text-gray-800 dark:text-gray-100 mt-8 mb-4">
+            Join Our Community
+          </h2>
+          <p>
+            Whether you're just starting your web development journey or you're an
+            experienced developer looking to stay updated, Web Resources Hub is here
+            to support your growth. Join our community of learners and contributors
+            to share knowledge and help others succeed.
+          </p>
+        </div>
+      </motion.div>
+    </div>
+  );
+} 

src/components/Card.jsx

@@ -5,7 +5,7 @@ const Card = ({ title, link, description, i, img }) => {
   return (
     <a href={link} target={"_blank"} rel="noreferrer">
       <motion.div
-        className="card border-b-2 bg-gradient-to-r from-[#545454] to-[#807f7f]  border-b-[#000000] flex flex-col rounded-lg  gap-4 p-4 shadow-3xl h-[16rem] w-[24rem] hover:shadow-4xl "
+        className="card border-b-2 bg-gradient-to-r from-[#545454] to-[#807f7f] dark:from-gray-800 dark:to-gray-700 border-b-[#000000] dark:border-gray-600 flex flex-col rounded-lg gap-4 p-4 shadow-3xl h-[16rem] w-[24rem] hover:shadow-4xl transition-colors duration-200"
         key={i}
         initial={{ opacity: 0, translateX: -100 }}
         animate={{ opacity: 1, translateX: 0 }}
@@ -17,11 +17,11 @@ const Card = ({ title, link, description, i, img }) => {
         </div>
 
         <div className="content flex flex-col gap-4 items-center">
-          <h2 className="text-[#e5e5e5] hover:text-[#fff] text-lg font-bold hover:text-orange-500">
+          <h2 className="text-[#e5e5e5] hover:text-[#fff] dark:text-gray-200 dark:hover:text-sky-500 text-lg font-bold transition-colors duration-200" hover:shadow="lg">
             {title}
           </h2>
 
-          <p className="text-[0.9rem] text-[#e2e1e1] w-4/5 font-inter tracking-wide leading-5">
+          <p className="text-[0.9rem] text-[#e2e1e1] dark:text-gray-300 w-4/5 font-inter tracking-wide leading-5">
             {description.slice(0, 120) + "..."}
           </p>
         </div>

src/components/Contact.jsx

@@ -0,0 +1,110 @@
+import { motion } from 'framer-motion';
+import { useState } from 'react';
+
+export default function Contact() {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    message: '',
+  });
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    // Handle form submission here
+    console.log('Form submitted:', formData);
+  };
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  return (
+    <div className="flex flex-col w-full h-screen mt-6">
+      <motion.div
+        className="p-8 max-w-2xl mx-auto w-full"
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+      >
+        <h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-6">
+          Contact Us
+        </h1>
+
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <div>
+            <label
+              htmlFor="name"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+            >
+              Name
+            </label>
+            <input
+              type="text"
+              id="name"
+              name="name"
+              value={formData.name}
+              onChange={handleChange}
+              className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+              required
+            />
+          </div>
+
+          <div>
+            <label
+              htmlFor="email"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+            >
+              Email
+            </label>
+            <input
+              type="email"
+              id="email"
+              name="email"
+              value={formData.email}
+              onChange={handleChange}
+              className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+              required
+            />
+          </div>
+
+          <div>
+            <label
+              htmlFor="message"
+              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
+            >
+              Message
+            </label>
+            <textarea
+              id="message"
+              name="message"
+              value={formData.message}
+              onChange={handleChange}
+              rows="4"
+              className="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+              required
+            ></textarea>
+          </div>
+
+          <button
+            type="submit"
+            className="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 transition-colors duration-300"
+          >
+            Send Message
+          </button>
+        </form>
+
+        <div className="mt-8 text-gray-600 dark:text-gray-300">
+          <h2 className="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">
+            Other Ways to Reach Us
+          </h2>
+          <p>Email: contact@webresourceshub.com</p>
+          <p>Follow us on social media for updates and community discussions.</p>
+        </div>
+      </motion.div>
+    </div>
+  );
+} 

src/components/Home.jsx

@@ -6,7 +6,7 @@ export default function Home() {
   const text = "Web Resources Hub";
   const [currentText, setCurrentText] = useState("");
   const fixedCharacter = "W";
-  const [showCursor, setShowCursor] = useState(true); // State to control cursor visibility
+  const [showCursor, setShowCursor] = useState(true);
 
   const startTypewriter = () => {
     let index = currentText.length;
@@ -29,35 +29,34 @@ export default function Home() {
     setCurrentText(fixedCharacter);
     startTypewriter();
 
-    // Toggle cursor visibility with a blinking effect
     const cursorInterval = setInterval(() => {
       setShowCursor((prevShowCursor) => !prevShowCursor);
     }, 250);
 
     return () => {
-      clearInterval(cursorInterval); // Clear interval on unmount
+      clearInterval(cursorInterval);
     };
   }, []);
 
   return (
-    <div className="flex relative justify-start w-full h-screen mt-6">
+    <div className="flex flex-col justify-start w-full p-8">
       <motion.div
-        className="p-4 flex flex-col gap-8 ml-2 lg:ml-20 mt-20 lg:mt-8"
+        className="flex flex-col gap-8 max-w-4xl"
         initial={{ opacity: 0, translateX: -100 }}
         animate={{ opacity: 1, translateX: 0 }}
         transition={{ duration: 0.5 }}
       >
-        <h1 className="text-7xl text-[#444a4f] leading-[5rem] tracking-wider drop-shadow-xl font-bold">
+        <h1 className="text-7xl text-gray-900 dark:text-white leading-[5rem] tracking-wider drop-shadow-xl font-bold">
           {currentText}
           {showCursor && <span className="cursor-blink">|</span>}
         </h1>
-        <h2 className="text-4xl text-[#3f454a] leading-[4rem] tracking-wider drop-shadow-xl">
-          Get Empowered <span className="text-[]"> with </span> <br />
+        <h2 className="text-4xl text-gray-800 dark:text-gray-200 leading-[4rem] tracking-wider drop-shadow-xl">
+          Get Empowered <span className="text-gray-700 dark:text-gray-300"> with </span> <br />
           Web Development
           <br />
-          <span className="text-[]"> Resources </span>
+          <span className="text-gray-700 dark:text-gray-300"> Resources </span>
         </h2>
-        <p className="text-lg w-4/5 text-[#858585]">
+        <p className="text-lg text-gray-600 dark:text-gray-400">
           Explore our vast collection of web development resources, designed to
           give you the knowledge and tools you need to succeed in the world of web development!
         </p>