From 18a9dd1049da884ed556aa278459133cf97d7a70 Mon Sep 17 00:00:00 2001 From: Dhanaraj Date: Tue, 29 Jul 2025 14:41:45 +0530 Subject: [PATCH 1/3] feat: Implement client-side page navigation --- frontend/src/App.jsx | 100 ++++++++++++------ frontend/src/Components/Navbar/Navbar.jsx | 79 +++++++++++--- .../src/Components/ui/floating-navbar.tsx | 71 +++++++++---- 3 files changed, 180 insertions(+), 70 deletions(-) diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 497730e..95af645 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -1,45 +1,83 @@ // src/App.jsx -import Hero from "./Components/Hero"; -import Navbar from "./Components/Navbar/Navbar"; -import About from "./Components/About"; -import AdStrip from "./Components/Ad"; -import { FeaturesSection } from "./Components/Features"; -import Footer from "./Components/footer"; -import ScrollRevealWrapper from "./Components/ui/ScrollRevealWrapper"; +import React, { useState } from "react"; +import Hero from "./Components/Hero.jsx"; // Added .jsx extension +import Navbar from "./Components/Navbar/Navbar.jsx"; // Added .jsx extension +import About from "./Components/About.jsx"; // Added .jsx extension +import AdStrip from "./Components/Ad.jsx"; // Added .jsx extension +import { FeaturesSection } from "./Components/Features.jsx"; // Added .jsx extension +import Footer from "./Components/footer.jsx"; // Added .jsx extension +import ScrollRevealWrapper from "./Components/ui/ScrollRevealWrapper.jsx"; // Added .jsx extension function App() { - return ( -
- {/* Navbar */} - - - {/* Main Content */} -
- - -
- -
- + // State to manage the current active page, initialized to 'home'. + const [currentPage, setCurrentPage] = useState('home'); - - - + /** + * Handles changing the current page displayed in the application. + * Scrolls to the top of the window for a smooth transition. + * @param {string} page - The identifier of the page to navigate to ('home', 'features', 'about'). + */ + const handlePageChange = (page) => { + setCurrentPage(page); + // Scroll to the top of the window when navigating to a new page. + window.scrollTo({ top: 0, behavior: 'smooth' }); + }; - -
+ /** + * Renders the component corresponding to the current active page. + * Wraps components in ScrollRevealWrapper for animation effects. + * Includes AdStrip only on the home page as per original structure. + */ + const renderPage = () => { + switch (currentPage) { + case 'home': + return ( + <> + + + + + + + + ); + case 'features': + return ( + -
- - -
+ + ); + case 'about': + return ( -
+ ); + default: + // Default to home page if an unknown page is requested. + return ( + <> + + + + + + + + ); + } + }; + return ( +
+ {/* Navbar component receives the handlePageChange function as a prop */} + + + {/* Main content area where different pages are rendered */} +
+ {renderPage()} {/* Dynamically render the current page */}
); } -export default App; +export default App; \ No newline at end of file diff --git a/frontend/src/Components/Navbar/Navbar.jsx b/frontend/src/Components/Navbar/Navbar.jsx index 477a8de..f01d1f9 100644 --- a/frontend/src/Components/Navbar/Navbar.jsx +++ b/frontend/src/Components/Navbar/Navbar.jsx @@ -2,67 +2,114 @@ import React, { useEffect, useState } from "react"; import { Github, Home, Info, Sparkle } from "lucide-react"; import { FloatingNav } from "../ui/floating-navbar"; +// Define navigation items. +// 'page' property is used for internal, state-based navigation. +// 'link' property is used for external URLs. const navItems = [ { name: "Home", - link: "/home", + page: "home", // Internal page identifier for App.jsx state icon: , }, { name: "Features", - link: "#features", + page: "features", // Internal page identifier icon: , }, { name: "About us", - link: "#about", + page: "about", // Internal page identifier icon: , }, { name: "Github", - link: "https://github.com/DevSyncx/DevSync.git", + link: "https://github.com/DevSyncx/DevSync.git", // External link icon: , }, ]; -const Navbar = () => { +/** + * Navbar component responsible for site navigation. + * It renders a fixed header and a floating navigation bar based on scroll position. + * @param {object} props - Component props. + * @param {function} props.onPageChange - Callback function to change the current page in App.jsx. + */ +const Navbar = ({ onPageChange }) => { const [showFloating, setShowFloating] = useState(false); + // Effect to control the visibility of the floating navigation bar based on scroll. useEffect(() => { const handleScroll = () => { + // Show floating nav if scrolled more than 100px from the top. setShowFloating(window.scrollY > 100); }; window.addEventListener("scroll", handleScroll); + // Cleanup the event listener on component unmount. return () => window.removeEventListener("scroll", handleScroll); }, []); + // Prepare navigation items specifically for the FloatingNav component. + // FloatingNav expects a 'link' property for its items. + // For internal pages, we provide an 'onClick' handler instead of a direct 'link'. + const floatingNavItems = navItems.map(item => { + if (item.link) { + // If it's an external link, pass it as is. + return item; + } else { + // For internal pages, create an item with an onClick handler. + // The 'link' property is omitted here, as FloatingNav will use the onClick. + return { + ...item, + onClick: () => onPageChange(item.page) // Call the parent's page change handler + }; + } + }); + return (
+ {/* Fixed header navigation, visible when not scrolled much */} {!showFloating && ( -
+

DevSync

)} - {showFloating && } + {/* Floating navigation bar, visible when scrolled down */} + {/* It receives the specially prepared floatingNavItems */} + {showFloating && }
); }; -export default Navbar; +export default Navbar; \ No newline at end of file diff --git a/frontend/src/Components/ui/floating-navbar.tsx b/frontend/src/Components/ui/floating-navbar.tsx index 47c4100..dd860c8 100644 --- a/frontend/src/Components/ui/floating-navbar.tsx +++ b/frontend/src/Components/ui/floating-navbar.tsx @@ -1,3 +1,4 @@ +// src/Components/ui/floating-navbar.tsx "use client"; import React, { JSX, useState } from "react"; import { @@ -8,33 +9,39 @@ import { } from "motion/react"; import { cn } from "@/lib/utils"; +/** + * Props interface for the FloatingNav component. + * 'link' is optional, and 'onClick' is added for custom navigation. + */ +interface NavItem { + name: string; + link?: string; // Optional: for external links or when no custom click handler + icon?: JSX.Element; + onClick?: () => void; // Optional: for internal, state-based navigation +} export const FloatingNav = ({ navItems, className, }: { - navItems: { - name: string; - link: string; - icon?: JSX.Element; - }[]; + navItems: NavItem[]; // Use the defined interface className?: string; }) => { const { scrollYProgress } = useScroll(); - const [visible, setVisible] = useState(false); + // Hook to listen to scroll progress changes and control visibility. useMotionValueEvent(scrollYProgress, "change", (current) => { - // Check if current is not undefined and is a number if (typeof current === "number") { let direction = current! - scrollYProgress.getPrevious()!; + // Hide if at the very top, otherwise control visibility based on scroll direction. if (scrollYProgress.get() < 0.05) { setVisible(false); } else { - if (direction < 0) { + if (direction < 0) { // Scrolling up setVisible(true); - } else { + } else { // Scrolling down setVisible(false); } } @@ -56,27 +63,45 @@ export const FloatingNav = ({ duration: 0.2, }} className={cn( - "flex max-w-fit fixed top-10 inset-x-0 mx-auto border border-transparent dark:border-white/[0.2] rounded-full dark:bg-black bg-white shadow-[0px_2px_3px_-1px_rgba(0,0,0,0.1),0px_1px_0px_0px_rgba(25,28,33,0.02),0px_0px_0px_1px_rgba(25,28,33,0.08)] z-[5000] pr-2 pl-8 py-2 items-center justify-center space-x-4", + "flex max-w-fit fixed top-10 inset-x-0 mx-auto border border-transparent dark:border-white/[0.2] rounded-full dark:bg-black bg-white shadow-[0px_2px_3px_-1px_rgba(0,0,0,0.1),0px_1px_0px_0px_rgba(25,28,33,0.02),0px_0px_0px_1px_rgba(25,28,33,0.08)] z-[5000] pr-2 pl-8 py-2 items-center justify-center space-x-4", className )} > - {navItems.map((navItem: any, idx: number) => ( - - {navItem.icon} - {navItem.name} - + {navItems.map((navItem: NavItem, idx: number) => ( + // Conditionally render a button if an onClick handler is provided (for internal navigation), + // otherwise render an anchor tag (for external links or default behavior). + navItem.onClick ? ( + + ) : ( + + {navItem.icon} + {navItem.name} + + ) ))} + {/* Login button - remains as is */} ); -} \ No newline at end of file +} From 7d2ee6325e04f3d5eb62a202656b6b4cd47f09f1 Mon Sep 17 00:00:00 2001 From: Dhanaraj Date: Wed, 30 Jul 2025 14:02:59 +0530 Subject: [PATCH 2/3] feat: Implement React Router for navigation and resolve all merge conflicts --- frontend/src/App.jsx | 93 +++++++---------------- frontend/src/Components/Contact.jsx | 33 ++++++++ frontend/src/Components/Navbar/Navbar.jsx | 89 +++++++++------------- 3 files changed, 100 insertions(+), 115 deletions(-) create mode 100644 frontend/src/Components/Contact.jsx diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 8d8f5d1..70cfebe 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -1,21 +1,21 @@ // src/App.jsx -import React, { useState, useEffect } from "react"; // Added useEffect +import React, { useState, useEffect } from "react"; +import { Routes, Route } from 'react-router-dom'; // Import Routes and Route import Hero from "./Components/Hero.jsx"; import Navbar from "./Components/Navbar/Navbar.jsx"; import About from "./Components/About.jsx"; +import Contact from "./Components/Contact.jsx"; // Ensure this path is correct import AdStrip from "./Components/Ad.jsx"; import { FeaturesSection } from "./Components/Features.jsx"; import Footer from "./Components/footer.jsx"; import ScrollRevealWrapper from "./Components/ui/ScrollRevealWrapper.jsx"; -import Loader from "./Components/ui/Loader.tsx"; // Changed to .tsx as per your Loader file +import Loader from "./Components/ui/Loader.tsx"; // Ensure this path is correct for your Loader file function App() { - // State to manage initial loading animation + // Keep loading state as it's independent of routing method const [loading, setLoading] = useState(true); - // State to manage the current active page for navigation - const [currentPage, setCurrentPage] = useState('home'); - // Effect to simulate initial app/data loading from the main branch's changes + // Effect to simulate initial app/data loading useEffect(() => { const timer = setTimeout(() => { setLoading(false); @@ -24,60 +24,6 @@ function App() { return () => clearTimeout(timer); }, []); - /** - * Handles changing the current page displayed in the application. - * Scrolls to the top of the window for a smooth transition. - * @param {string} page - The identifier of the page to navigate to ('home', 'features', 'about'). - */ - const handlePageChange = (page) => { - setCurrentPage(page); - // Scroll to the top of the window when navigating to a new page. - window.scrollTo({ top: 0, behavior: 'smooth' }); - }; - - /** - * Renders the component corresponding to the current active page. - * Wraps components in ScrollRevealWrapper for animation effects. - * Includes AdStrip only on the home page as per original structure. - */ - const renderPage = () => { - switch (currentPage) { - case 'home': - return ( - <> - - - - - - - - ); - case 'features': - return ( - - - - ); - case 'about': - return ( - - ); - default: - // Default to home page if an unknown page is requested. - return ( - <> - - - - - - - - ); - } - }; - // Conditional rendering for the loading screen if (loading) { return ( @@ -89,12 +35,31 @@ function App() { return (
- {/* Navbar component receives the handlePageChange function as a prop */} - + {/* Navbar component - no longer needs onPageChange prop directly */} + - {/* Main content area where different pages are rendered */} + {/* Main content area where different pages are rendered using React Router */}
- {renderPage()} {/* Dynamically render the current page */} + + + + + + } /> + + } /> + + } /> + + } /> + {/* You can add a 404 Not Found page here if desired */} + {/* 404 Not Found
} /> */} + + {/* Footer component - no longer needs onPageChange prop directly */}
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/Navbar/Navbar.jsx b/frontend/src/Components/Navbar/Navbar.jsx index 0f83ba1..fc126f7 100644 --- a/frontend/src/Components/Navbar/Navbar.jsx +++ b/frontend/src/Components/Navbar/Navbar.jsx @@ -1,29 +1,35 @@ import React, { useEffect, useState } from "react"; -import { Github, Home, Info, Sparkle } from "lucide-react"; +import { Github, Home, Info, Sparkle, Mail, Phone } from "lucide-react"; +import { Link } from 'react-router-dom'; // Import Link from react-router-dom import { FloatingNav } from "../ui/floating-navbar"; // Ensure this import path is correct for .jsx or .tsx // Define navigation items. -// 'page' property is used for internal, state-based navigation. +// 'to' property is used for react-router-dom Link component. // 'link' property is used for external URLs. const navItems = [ { name: "Home", - page: "home", // Internal page identifier for App.jsx state + to: "/", // Path for react-router-dom icon: , }, { name: "Features", - page: "features", // Internal page identifier + to: "/features", // Path for react-router-dom icon: , }, { name: "About us", - page: "about", // Internal page identifier + to: "/about", // Path for react-router-dom icon: , }, + { + name: "Contact Us", + to: "/contact", // Path for react-router-dom + icon: , + }, { name: "Github", - link: "https://github.com/DevSyncx/DevSync.git", // External link + link: "https://github.com/DevSyncx/DevSync.git", // External link still uses 'link' icon: , }, ]; @@ -31,49 +37,31 @@ const navItems = [ /** * Navbar component responsible for site navigation. * It renders a fixed header and a floating navigation bar based on scroll position. - * @param {object} props - Component props. - * @param {function} props.onPageChange - Callback function to change the current page in App.jsx. + * It now uses react-router-dom's Link component for internal navigation. */ -const Navbar = ({ onPageChange }) => { +const Navbar = () => { // Removed onPageChange prop const [showFloating, setShowFloating] = useState(false); - const [menuOpen, setMenuOpen] = useState(false); // Keep the menuOpen state from main branch + const [menuOpen, setMenuOpen] = useState(false); // Effect to control the visibility of the floating navigation bar based on scroll. useEffect(() => { const handleScroll = () => { - // Show floating nav if scrolled more than 100px from the top. setShowFloating(window.scrollY > 100); }; window.addEventListener("scroll", handleScroll); - // Cleanup the event listener on component unmount. return () => window.removeEventListener("scroll", handleScroll); }, []); - // Function to handle internal navigation clicks - const handleInternalNavigation = (page) => { - onPageChange(page); // Update App.jsx's state - setMenuOpen(false); // Close mobile menu on navigation - - // Update the URL without reloading the page - // For 'home', the path is '/', otherwise it's '/pageName' - const path = page === 'home' ? '/' : `/${page}`; - window.history.pushState(null, '', path); - }; - - // Prepare navigation items specifically for the FloatingNav component. - // FloatingNav expects a 'link' property for its items, but we've modified it - // to also accept an 'onClick' handler for internal navigation. + // Prepare navigation items for FloatingNav. + // FloatingNav needs to be updated to use 'to' for internal links or 'link' for external. + // We'll pass 'to' as 'link' for FloatingNav's internal logic. const floatingNavItems = navItems.map(item => { - if (item.link) { - // If it's an external link, pass it as is. + if (item.link) { // External link return item; - } else { - // For internal pages, create an item with an onClick handler. - // The 'link' property can be omitted or set to '#' in FloatingNav if needed, - // but the onClick will take precedence due to our FloatingNav logic. + } else { // Internal link return { ...item, - onClick: () => handleInternalNavigation(item.page) // Use the new handler + link: item.to // Map 'to' to 'link' for FloatingNav's expected prop }; } }); @@ -91,28 +79,27 @@ const Navbar = ({ onPageChange }) => { {/* Desktop Navigation */} @@ -123,7 +110,7 @@ const Navbar = ({ onPageChange }) => { onClick={() => setMenuOpen(!menuOpen)} className="text-[#2E3A59] font-semibold text-base" > - {menuOpen ? "Close" : "Menu"} {/* Toggle text based on state */} + {menuOpen ? "Close" : "Menu"} @@ -132,7 +119,7 @@ const Navbar = ({ onPageChange }) => { {menuOpen && (
{navItems.map((item) => ( - item.link ? ( + item.link ? ( // Check for external link { {item.icon} {item.name} - ) : ( - + ) ))}
@@ -160,7 +148,6 @@ const Navbar = ({ onPageChange }) => { )} {/* Floating navigation bar, visible when scrolled down */} - {/* It receives the specially prepared floatingNavItems */} {showFloating && } ); From 9b80fd7411107951cf05ce29cfaae2bfa9fa5aba Mon Sep 17 00:00:00 2001 From: Dhanaraj Date: Thu, 31 Jul 2025 11:23:09 +0530 Subject: [PATCH 3/3] feat: Implement multi-page UI, resolve merge conflicts, and add new page components --- frontend/package-lock.json | 2 +- frontend/package.json | 2 +- frontend/src/App.jsx | 78 +++---- frontend/src/Components/Features.jsx | 129 +++--------- frontend/src/Components/Navbar/Navbar.jsx | 180 +++------------- frontend/src/Components/contact.jsx | 239 ++-------------------- frontend/src/Components/footer.jsx | 77 ++----- frontend/src/Components/ui/Loader.tsx | 33 +-- frontend/src/Pages/AboutPage.jsx | 15 ++ frontend/src/Pages/AdPage.jsx | 15 ++ frontend/src/Pages/ContactPage.jsx | 15 ++ frontend/src/Pages/FeaturesPage.jsx | 14 ++ frontend/src/Pages/HomePage.jsx | 16 ++ frontend/src/main.jsx | 24 +-- 14 files changed, 230 insertions(+), 609 deletions(-) create mode 100644 frontend/src/Pages/AboutPage.jsx create mode 100644 frontend/src/Pages/AdPage.jsx create mode 100644 frontend/src/Pages/ContactPage.jsx create mode 100644 frontend/src/Pages/FeaturesPage.jsx create mode 100644 frontend/src/Pages/HomePage.jsx 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 70cfebe..645ff8f 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -1,68 +1,50 @@ -// src/App.jsx -import React, { useState, useEffect } from "react"; -import { Routes, Route } from 'react-router-dom'; // Import Routes and Route -import Hero from "./Components/Hero.jsx"; -import Navbar from "./Components/Navbar/Navbar.jsx"; -import About from "./Components/About.jsx"; -import Contact from "./Components/Contact.jsx"; // Ensure this path is correct -import AdStrip from "./Components/Ad.jsx"; -import { FeaturesSection } from "./Components/Features.jsx"; -import Footer from "./Components/footer.jsx"; -import ScrollRevealWrapper from "./Components/ui/ScrollRevealWrapper.jsx"; -import Loader from "./Components/ui/Loader.tsx"; // Ensure this path is correct for your Loader file +// 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() { - // Keep loading state as it's independent of routing method const [loading, setLoading] = useState(true); - // Effect to simulate initial app/data loading useEffect(() => { const timer = setTimeout(() => { setLoading(false); - }, 2000); // adjust delay if needed + }, 1500); return () => clearTimeout(timer); }, []); - // Conditional rendering for the loading screen if (loading) { - return ( -
- -
- ); + return ; } return ( -
- {/* Navbar component - no longer needs onPageChange prop directly */} - + +
+ + +
+ + } /> + } /> + } /> + } /> + } /> {/* Route for Features page */} + } /> + +
- {/* Main content area where different pages are rendered using React Router */} -
- - - - - - } /> - - } /> - - } /> - - } /> - {/* You can add a 404 Not Found page here if desired */} - {/* 404 Not Found
} /> */} - - {/* Footer component - no longer needs onPageChange prop directly */}
- -
+ + ); } 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 1d74e52..35ca9d6 100644 --- a/frontend/src/Components/Navbar/Navbar.jsx +++ b/frontend/src/Components/Navbar/Navbar.jsx @@ -1,156 +1,36 @@ -import React, { useEffect, useState } from "react"; -import { Github, Home, Info, Sparkle, Mail, Phone } from "lucide-react"; // Ensure all necessary icons are imported -import { Link } from 'react-router-dom'; // Import Link from react-router-dom -import { FloatingNav } from "../ui/floating-navbar"; // Ensure this import path is correct for .jsx or .tsx - -// Define navigation items. -// 'to' property is used for react-router-dom Link component. -// 'link' property is used for external URLs. -const navItems = [ - { - name: "Home", - to: "/", // Path for react-router-dom - icon: , - }, - { - name: "Features", - to: "/features", // Path for react-router-dom - icon: , - }, - { - name: "About us", - to: "/about", // Path for react-router-dom - icon: , - }, - { - name: "Contact Us", // Resolved to keep this entry - to: "/contact", // Path for react-router-dom - icon: , // Using Phone icon for Contact - }, - { - name: "Github", - link: "https://github.com/DevSyncx/DevSync.git", // External link still uses 'link' - icon: , - }, -]; - -/** - * Navbar component responsible for site navigation. - * It renders a fixed header and a floating navigation bar based on scroll position. - * It now uses react-router-dom's Link component for internal navigation. - */ -const Navbar = () => { // Removed onPageChange prop - const [showFloating, setShowFloating] = useState(false); - const [menuOpen, setMenuOpen] = useState(false); - - // Effect to control the visibility of the floating navigation bar based on scroll. - useEffect(() => { - const handleScroll = () => { - setShowFloating(window.scrollY > 100); - }; - window.addEventListener("scroll", handleScroll); - return () => window.removeEventListener("scroll", handleScroll); - }, []); - - // Prepare navigation items for FloatingNav. - // FloatingNav needs to be updated to use 'to' for internal links or 'link' for external. - // We'll pass 'to' as 'link' for FloatingNav's internal logic. - const floatingNavItems = navItems.map(item => { - if (item.link) { // External link - return item; - } else { // Internal link - return { - ...item, - link: item.to // Map 'to' to 'link' for FloatingNav's expected prop - }; - } - }); +// 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 + +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 ( -
- {/* Fixed header navigation, visible when not scrolled much */} - {!showFloating && ( -
-
-

- DevSync -

- - {/* Desktop Navigation */} - - - {/* Mobile Menu Button */} -
- -
-
- - {/* Mobile Navigation Menu (Conditional Rendering) */} - {menuOpen && ( -
- {navItems.map((item) => ( - item.link ? ( // Check for external link - - {item.icon} - {item.name} - - ) : ( // Use Link for internal navigation - setMenuOpen(false)} // Close menu after selection - > - {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 ( -