feat: Implement client-side page navigation

frontend/package.json

@@ -22,7 +22,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-intersection-observer": "^9.16.0",
-    "react-router-dom": "^7.7.0",
+    "react-router-dom": "^7.7.1",
     "shadcn": "^2.9.2",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.11"

frontend/src/App.jsx

@@ -1,73 +1,50 @@
-// src/App.jsx
-import React, { useEffect, useState } from "react";
-import Hero from "./Components/Hero";
-import Navbar from "./Components/Navbar/Navbar";
-import About from "./Components/About";
-import Contact from "./Components/contact";
-import AdStrip from "./Components/Ad";
-import { FeaturesSection } from "./Components/Features";
-import Footer from "./Components/footer";
-import ScrollRevealWrapper from "./Components/ui/ScrollRevealWrapper";
-import Loader from "./Components/ui/Loader"; // ✅ Import the Loader
-
+// frontend/src/App.jsx
+import React, { useState, useEffect } from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { Navbar } from './Components/Navbar/Navbar'; // Assuming Navbar is a named export
+import Footer from './Components/footer'; // Assuming Footer is a default export
+import Loader from './Components/ui/Loader'; // Assuming Loader is a default export
+import HomePage from './Pages/HomePage';
+import AboutPage from './Pages/AboutPage';
+import ContactPage from './Pages/ContactPage';
+import AdPage from './Pages/AdPage';
+import FeaturesPage from './Pages/FeaturesPage'; // Import the new FeaturesPage
+import NotFound from './Components/ui/NotFound';
 
 function App() {
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    // Simulate initial app/data loading
     const timer = setTimeout(() => {
       setLoading(false);
-    }, 2000); // adjust delay if needed
+    }, 1500);
 
     return () => clearTimeout(timer);
   }, []);
 
   if (loading) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-[#E4ECF1]">
-        <Loader size="lg" />
-      </div>
-    );
+    return <Loader />;
   }
 
   return (
-
-    <div className="min-h-screen w-full bg-gradient-to-b from-[#E4ECF1] to-[#D2DEE7] scroll-smooth overflow-hidden">
-      {/* Navbar */}
-      <Navbar />
-
-      {/* Main Content */}
-      <main className="relative z-10 px-4 py-24">
-        <ScrollRevealWrapper>
-          <div id="home">
-            <Hero />
-          </div>
-        </ScrollRevealWrapper>
-
-        <ScrollRevealWrapper delay={0.1}>
-          <AdStrip />
-        </ScrollRevealWrapper>
-
-        <ScrollRevealWrapper delay={0.2}>
-          <div id="features">
-            <FeaturesSection />
-          </div>
-        </ScrollRevealWrapper>
-
-        <div id="about">
-          <About />
-        </div>
-        <ScrollRevealWrapper delay={0.2}>
-        <div id="contact">
-
-          <Contact/>
-        </div>
-        </ScrollRevealWrapper>
+    <Router>
+      <div className="min-h-screen flex flex-col bg-black text-white">
+        <Navbar />
+
+        <main className="flex-grow">
+          <Routes>
+            <Route path="/" element={<HomePage />} />
+            <Route path="/about" element={<AboutPage />} />
+            <Route path="/contact" element={<ContactPage />} />
+            <Route path="/ad" element={<AdPage />} />
+            <Route path="/features" element={<FeaturesPage />} /> {/* Route for Features page */}
+            <Route path="*" element={<NotFound />} />
+          </Routes>
+        </main>
 
         <Footer />
-      </main>
-    </div>
+      </div>
+    </Router>
   );
 }
 

frontend/src/Components/Contact.jsx

@@ -0,0 +1,33 @@
+// frontend/src/Components/Contact.jsx
+import React from 'react';
+
+const Contact = () => {
+  return (
+    <section className="min-h-[60vh] flex items-center justify-center bg-[#A4C7E6] px-6 py-10 backdrop-blur-xl rounded-3xl border border-white/30 shadow-xl mt-24">
+      <div className="w-full max-w-2xl p-10 text-center">
+        <h2 className="text-5xl md:text-6xl font-bold text-[#1D3557] mb-6">
+          Get in Touch
+        </h2>
+        <p className="mt-4 text-xl text-[#1D3557]/80 leading-relaxed">
+          We'd love to hear from you! Whether you have questions, feedback, or just want to say hello, feel free to reach out.
+        </p>
+        <div className="mt-8 space-y-4">
+          <p className="text-lg text-[#1D3557]">
+            <strong className="font-semibold">Email:</strong>{' '}
+            <a href="mailto:info@devsync.com" className="text-[#457B9D] hover:underline transition duration-200">info@devsync.com</a>
+          </p>
+          <p className="text-lg text-[#1D3557]">
+            <strong className="font-semibold">Phone:</strong>{' '}
+            <a href="tel:+11234567890" className="text-[#457B9D] hover:underline transition duration-200">+1 (123) 456-7890</a>
+          </p>
+          <p className="text-lg text-[#1D3557]">
+            <strong className="font-semibold">Address:</strong>{' '}
+            123 DevSync Lane, Codeville, CA 90210
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Contact;

frontend/src/Components/Features.jsx

@@ -1,103 +1,36 @@
-// src/Components/FeaturesSectionDemo.jsx
-import { cn } from "@/lib/utils";
-import {
-  Activity,
-  Brain,
-  GitBranch,
-  Clock,
-  BookOpen,
-  MessageCircle,
-  TimerReset,
-  BarChart3,
-} from "lucide-react";
+// frontend/src/Components/Features.jsx
+import React from 'react';
+// Assuming the original content of your Features component is similar to this structure.
+// If your Features component has different content, make sure to preserve it.
 
-export function FeaturesSection() {
-  const features = [
-    {
-      title: "Unified Developer Dashboard",
-      description: "Track GitHub, LeetCode, Codeforces, and more from a single dashboard.",
-      icon: <Activity />,
-    },
-    {
-      title: "Smart Productivity Logs",
-      description: "Log tasks, wins, blockers, and progress with daily summaries.",
-      icon: <BookOpen />,
-    },
-    {
-      title: "Live Pomodoro Timer",
-      description: "Focus with an integrated Pomodoro and break cycle tracker.",
-      icon: <TimerReset />,
-    },
-    {
-      title: "Auto GitHub Sync",
-      description: "Sync contributions, commits, and streaks automatically.",
-      icon: <GitBranch />,
-    },
-    {
-      title: "DSA Progress Tracking",
-      description: "Keep tabs on your problem-solving journey across platforms.",
-      icon: <Brain />,
-    },
-    {
-      title: "Interactive Visualizations",
-      description: "Understand your productivity via dynamic graphs and charts.",
-      icon: <BarChart3 />,
-    },
-    {
-      title: "Community Collaboration",
-      description: "Connect, share logs, and grow together with other developers.",
-      icon: <MessageCircle />,
-    },
-    {
-      title: "Time Management Tools",
-      description: "Track how you spend your dev hours with real insights.",
-      icon: <Clock />,
-    },
-  ];
-
-  return (
-       <div id="features" className=" bg-[#101e35] border border-[#1c2e4a] rounded-3xl p-8 md:p-12 shadow-lg">
-    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 relative z-10 py-10 max-w-7xl mx-auto">
-      {features.map((feature, index) => (
-        <Feature key={feature.title} {...feature} index={index} />
-      ))}
-    </div>
-    </div>
-  );
-}
-
-const Feature = ({
-  title,
-  description,
-  icon,
-  index,
-}) => {
+const Features = () => {
   return (
-    <div
-      className={cn(
-        "flex flex-col lg:border-r py-10 relative group/feature dark:border-neutral-800",
-        (index === 0 || index === 4) && "lg:border-l dark:border-neutral-500",
-        index < 4 && "lg:border-b dark:border-neutral-800"
-      )}
-    >
-   {index < 4 ? (
-  <div className="opacity-0 hover:cursor-pointer" />
-) : (
-  <div className="opacity-0 hover:cursor-pointer" />
-)}
-
-      <div className="mb-4 relative z-10 px-10 text-blue-100 dark:text-neutral-400">
-        {icon}
-      </div>
-      <div className="text-lg font-bold mb-2 relative z-10 px-10">
-        <div className="absolute left-0 inset-y-0 h-6 group-hover/feature:h-8 w-1 rounded-tr-full rounded-br-full bg-neutral-300 dark:bg-blue-200 group-hover/feature:bg-blue-500 transition-all duration-200 origin-center" />
-        <span className="group-hover/feature:translate-x-2 transition duration-200 inline-block text-blue-100 dark:text-neutral-100">
-          {title}
-        </span>
+    <section id="features" className="py-20 bg-gray-900 text-white">
+      <div className="container mx-auto px-4 text-center">
+        <h2 className="text-4xl font-bold mb-12">Key Features</h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
+          <div className="bg-gray-800 p-8 rounded-lg shadow-lg">
+            <h3 className="text-2xl font-semibold mb-4">Unified Dashboard</h3>
+            <p className="text-gray-400">
+              Track all your coding activity, tasks, and progress in one central place.
+            </p>
+          </div>
+          <div className="bg-gray-800 p-8 rounded-lg shadow-lg">
+            <h3 className="text-2xl font-semibold mb-4">Real-time Sync</h3>
+            <p className="text-gray-400">
+              Effortlessly sync data from various platforms like GitHub, Jira, and more.
+            </p>
+          </div>
+          <div className="bg-gray-800 p-8 rounded-lg shadow-lg">
+            <h3 className="text-2xl font-semibold mb-4">Insightful Analytics</h3>
+            <p className="text-gray-400">
+              Visualize your productivity trends and identify areas for improvement.
+            </p>
+          </div>
+        </div>
       </div>
-      <p className="text-sm text-blue-50 dark:text-neutral-300 max-w-xs relative z-10 px-10">
-        {description}
-      </p>
-    </div>
+    </section>
   );
 };
+
+export default Features; // This line is crucial for fixing the import error