diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 7ebaf43..88f21de 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -20,7 +20,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" diff --git a/frontend/package.json b/frontend/package.json index 81d2068..4e4588a 100644 --- a/frontend/package.json +++ b/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" diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 7996f25..645ff8f 100644 --- a/frontend/src/App.jsx +++ b/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 ( -
- -
- ); + return ; } return ( - -
- {/* Navbar */} - - - {/* Main Content */} -
- -
- -
-
- - - - - - -
- -
-
- -
- -
- -
- - -
-
+ +
+ + +
+ + } /> + } /> + } /> + } /> + } /> {/* Route for Features page */} + } /> + +
-
-
+ + ); } diff --git a/frontend/src/Components/Contact.jsx b/frontend/src/Components/Contact.jsx new file mode 100644 index 0000000..f25a42a --- /dev/null +++ b/frontend/src/Components/Contact.jsx @@ -0,0 +1,33 @@ +// frontend/src/Components/Contact.jsx +import React from 'react'; + +const Contact = () => { + return ( +
+
+

+ Get in Touch +

+

+ We'd love to hear from you! Whether you have questions, feedback, or just want to say hello, feel free to reach out. +

+
+

+ Email:{' '} + info@devsync.com +

+

+ Phone:{' '} + +1 (123) 456-7890 +

+

+ Address:{' '} + 123 DevSync Lane, Codeville, CA 90210 +

+
+
+
+ ); +}; + +export default Contact; \ No newline at end of file diff --git a/frontend/src/Components/Features.jsx b/frontend/src/Components/Features.jsx index 4e9b6f6..392a8d0 100644 --- a/frontend/src/Components/Features.jsx +++ b/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: , - }, - { - title: "Smart Productivity Logs", - description: "Log tasks, wins, blockers, and progress with daily summaries.", - icon: , - }, - { - title: "Live Pomodoro Timer", - description: "Focus with an integrated Pomodoro and break cycle tracker.", - icon: , - }, - { - title: "Auto GitHub Sync", - description: "Sync contributions, commits, and streaks automatically.", - icon: , - }, - { - title: "DSA Progress Tracking", - description: "Keep tabs on your problem-solving journey across platforms.", - icon: , - }, - { - title: "Interactive Visualizations", - description: "Understand your productivity via dynamic graphs and charts.", - icon: , - }, - { - title: "Community Collaboration", - description: "Connect, share logs, and grow together with other developers.", - icon: , - }, - { - title: "Time Management Tools", - description: "Track how you spend your dev hours with real insights.", - icon: , - }, - ]; - - return ( -
-
- {features.map((feature, index) => ( - - ))} -
-
- ); -} - -const Feature = ({ - title, - description, - icon, - index, -}) => { +const Features = () => { return ( -
- {index < 4 ? ( -
-) : ( -
-)} - -
- {icon} -
-
-
- - {title} - +
+
+

Key Features

+
+
+

Unified Dashboard

+

+ Track all your coding activity, tasks, and progress in one central place. +

+
+
+

Real-time Sync

+

+ Effortlessly sync data from various platforms like GitHub, Jira, and more. +

+
+
+

Insightful Analytics

+

+ Visualize your productivity trends and identify areas for improvement. +

+
+
-

- {description} -

-
+ ); }; + +export default Features; // This line is crucial for fixing the import error diff --git a/frontend/src/Components/Navbar/Navbar.jsx b/frontend/src/Components/Navbar/Navbar.jsx index bd00519..35ca9d6 100644 --- a/frontend/src/Components/Navbar/Navbar.jsx +++ b/frontend/src/Components/Navbar/Navbar.jsx @@ -1,102 +1,36 @@ -import React, { useEffect, useState } from "react"; -import { Github, Home, Info, Sparkle } from "lucide-react"; -import { FloatingNav } from "../ui/floating-navbar"; -import { Phone } from "lucide-react"; +// frontend/src/Components/Navbar/Navbar.jsx +import React from 'react'; +import { Link } from 'react-router-dom'; +import { cn } from '../../lib/utils'; // Assuming this utility is still needed -const navItems = [ - { - name: "Home", - link: "/home", - icon: , - }, - { - name: "Features", - link: "#features", - icon: , - }, - { - name: "About us", - link: "#about", - icon: , - }, - { - name: "Github", - link: "https://github.com/DevSyncx/DevSync.git", - icon: , - }, - { - name: "Contact Us", - link: "#contact", - icon: - , - }, -]; - -const Navbar = () => { - const [showFloating, setShowFloating] = useState(false); - const [menuOpen, setMenuOpen] = useState(false); - - useEffect(() => { - const handleScroll = () => { - setShowFloating(window.scrollY > 100); - }; - window.addEventListener("scroll", handleScroll); - return () => window.removeEventListener("scroll", handleScroll); - }, []); +export const Navbar = ({ className }) => { + const navItems = [ + { name: 'Home', link: '/' }, + { name: 'About', link: '/about' }, + { name: 'Features', link: '/features' }, // Link to the new Features page + { name: 'Contact', link: '/contact' }, + { name: 'Ad', link: '/ad' }, + ]; return ( -
- {!showFloating && ( -
-
-

- DevSync -

- - - -
- -
-
- - {menuOpen && ( -
- {navItems.map((item) => ( - - {item.icon} - {item.name} - - ))} -
- )} - -
+
} + > +
+ {navItems.map((item, idx) => ( + + {item.icon} + {item.name} + + ))} +
); }; - -export default Navbar; diff --git a/frontend/src/Components/contact.jsx b/frontend/src/Components/contact.jsx index ce8bf70..f25a42a 100644 --- a/frontend/src/Components/contact.jsx +++ b/frontend/src/Components/contact.jsx @@ -1,227 +1,32 @@ -import React, { useState } from 'react'; -import { z } from 'zod'; -import { Send, Cloud } from 'lucide-react'; // Import Send and Cloud icons from Lucide - -// Zod schema for form validation -const contactFormSchema = z.object({ - email: z.string().email({ message: "Invalid email address." }), - name: z.string().min(1, { message: "Name is required." }), - message: z.string().min(1, { message: "Message is required." }).max(500, { message: "Message cannot exceed 500 characters." }), -}); +// frontend/src/Components/Contact.jsx +import React from 'react'; const Contact = () => { - const [formData, setFormData] = useState({ - email: '', - name: '', - message: '', - }); - - const [errors, setErrors] = useState({}); - const [isSubmitting, setIsSubmitting] = useState(false); - - const handleChange = (e) => { - const { name, value } = e.target; - setFormData((prevData) => ({ - ...prevData, - [name]: value, - })); - // Clear error for the field as user types - if (errors[name]) { - setErrors((prevErrors) => ({ - ...prevErrors, - [name]: undefined, - })); - } - }; - - const handleSubmit = async (e) => { - e.preventDefault(); - setIsSubmitting(true); - setErrors({}); // Clear previous errors - - try { - contactFormSchema.parse(formData); - // Simulate API call - await new Promise((resolve) => setTimeout(resolve, 1000)); - // Replaced toast.success with alert - alert('Message sent successfully!'); - setFormData({ email: '', name: '', message: '' }); // Clear form - } catch (error) { - if (error instanceof z.ZodError) { - const newErrors = {}; - error.errors.forEach((err) => { - newErrors[err.path[0]] = err.message; - }); - setErrors(newErrors); - // Replaced toast.error with alert - alert('Please correct the errors in the form.'); - } else { - // Replaced toast.error with alert - alert('An unexpected error occurred.'); - } - } finally { - setIsSubmitting(false); - } - }; - return ( -
- {/* Removed Toaster component */} - - {/* Define keyframes for animations */} - - -
- {/* Decorative elements: Send icon and clouds */} -
- - -
-
- - -
-
- -
-
- -
- - - {/* Form content */} -
-

Get in Touch

-

- We'd love to hear from you! Send us a message or reach out directly. +

+
+

+ Get in Touch +

+

+ We'd love to hear from you! Whether you have questions, feedback, or just want to say hello, feel free to reach out. +

+
+

+ Email:{' '} + info@devsync.com

- -
-
- - - {errors.name && ( -

{errors.name}

- )} -
- -
- - - {errors.email && ( -

{errors.email}

- )} -
- -
- - - {errors.message && ( -

{errors.message}

- )} -
- - -
-

- Alternatively, email us at info@example.com +

+ Phone:{' '} + +1 (123) 456-7890 +

+

+ Address:{' '} + 123 DevSync Lane, Codeville, CA 90210

-
+ ); }; diff --git a/frontend/src/Components/footer.jsx b/frontend/src/Components/footer.jsx index b2dc18f..39c49fe 100644 --- a/frontend/src/Components/footer.jsx +++ b/frontend/src/Components/footer.jsx @@ -1,68 +1,33 @@ -import { Github, Mail } from "lucide-react"; -import { Link } from "react-router-dom"; // or use `next/link` if using Next.js +// frontend/src/Components/footer.jsx +import React from 'react'; const Footer = () => { return ( -