diff --git a/frontend/src/Components/Features.jsx b/frontend/src/Components/Features.jsx
index 4e9b6f6..31c4c34 100644
--- a/frontend/src/Components/Features.jsx
+++ b/frontend/src/Components/Features.jsx
@@ -1,4 +1,5 @@
// src/Components/FeaturesSectionDemo.jsx
+
import { cn } from "@/lib/utils";
import {
Activity,
@@ -10,82 +11,94 @@ import {
TimerReset,
BarChart3,
} from "lucide-react";
+import { useNavigate } from "react-router-dom";
export function FeaturesSection() {
+ const navigate = useNavigate();
const features = [
{
title: "Unified Developer Dashboard",
- description: "Track GitHub, LeetCode, Codeforces, and more from a single 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.",
+ 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.",
+ description:
+ "Focus with an integrated Pomodoro and break cycle tracker.",
icon:
,
},
{
title: "Auto GitHub Sync",
- description: "Sync contributions, commits, and streaks automatically.",
+ description:
+ "Sync contributions, commits, and streaks automatically.",
icon:
,
},
{
title: "DSA Progress Tracking",
- description: "Keep tabs on your problem-solving journey across platforms.",
+ description:
+ "Keep tabs on your problem-solving journey across platforms.",
icon:
,
},
{
title: "Interactive Visualizations",
- description: "Understand your productivity via dynamic graphs and charts.",
+ description:
+ "Understand your productivity via dynamic graphs and charts.",
icon:
,
},
{
title: "Community Collaboration",
- description: "Connect, share logs, and grow together with other developers.",
+ 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.",
+ description:
+ "Track how you spend your dev hours with real insights.",
icon:
,
},
];
return (
-
-
- {features.map((feature, index) => (
-
- ))}
-
+
+
+ {features.map((feature, index) => (
+ {
+ if (index === 2) {
+ navigate("/pomodoro-timer");
+ }
+ }}
+ {...feature}
+ index={index}
+ />
+ ))}
+
);
}
-const Feature = ({
- title,
- description,
- icon,
- index,
-}) => {
+const Feature = ({ title, description, icon, index, onClick }) => {
return (
- {index < 4 ? (
-
-) : (
-
-)}
-
{icon}
diff --git a/frontend/src/Components/Pomodoro.jsx b/frontend/src/Components/Pomodoro.jsx
new file mode 100644
index 0000000..e5bb9f2
--- /dev/null
+++ b/frontend/src/Components/Pomodoro.jsx
@@ -0,0 +1,105 @@
+import React, { useState, useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const Pomodoro = () => {
+const navigate=useNavigate()
+
+ const [isWorkSession, setIsWorkSession] = useState(true);
+ const [timeLeft, setTimeLeft] = useState(25 * 60); // 25 minutes
+ const [isRunning, setIsRunning] = useState(false);
+ const intervalRef = useRef(null);
+
+ const formatTime = (seconds) => {
+ const mins = String(Math.floor(seconds / 60)).padStart(2, '0');
+ const secs = String(seconds % 60).padStart(2, '0');
+ return `${mins}:${secs}`;
+ };
+
+ useEffect(() => {
+ if (isRunning) {
+ intervalRef.current = setInterval(() => {
+ setTimeLeft((prev) => {
+ if (prev === 1) {
+ clearInterval(intervalRef.current);
+ const nextIsWork = !isWorkSession;
+ setIsWorkSession(nextIsWork);
+ setTimeLeft(nextIsWork ? 25 * 60 : 5 * 60);
+ setIsRunning(false);
+ }2
+ return prev - 1;
+ });
+ }, 1000);
+ }
+
+ return () => clearInterval(intervalRef.current);
+ }, [isRunning, isWorkSession]);
+
+ const startTimer = () => {
+ if (!isRunning) setIsRunning(true);
+ };
+
+ const pauseTimer = () => {
+ clearInterval(intervalRef.current);
+ setIsRunning(false);
+ };
+
+ const resetTimer = () => {
+ clearInterval(intervalRef.current);
+ setIsRunning(false);
+ setTimeLeft(25 * 60);
+ setIsWorkSession(true);
+ };
+
+ return (
+
+
+
+
+ POMODORO TIMER!
+
+
+
+ {isWorkSession ? 'Work Session' : 'Take a Break'}
+
+
+
+
+ {formatTime(timeLeft)}
+
+
+
+
+
+
+
+
+);
+};
+
+export default Pomodoro;
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index 91f4fbd..262e8e2 100644
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -5,12 +5,14 @@ import './index.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import App from './App.jsx';
import NotFound from './Components/ui/NotFound.jsx'; // ✅ 404 page
+import Pomodoro from './Components/Pomodoro';
createRoot(document.getElementById('root')).render(
} />
+ }/>
} /> {/* ✅ Catch-all route */}