feat(Pomodoro)- Implemented feature link, prevented auto start of an

frontend/src/Components/DashBoard/PomodoroTimer.jsx

@@ -1,4 +1,4 @@
-import { useContext } from "react";
+import { useContext, useEffect } from "react";
 import Navbar from "../Navbar/Navbar";
 import ThemeContext from "../ui/theme-provider.jsx";
 import { useTimer } from "../../context/TimerContext.jsx";
@@ -79,10 +79,24 @@ export default function PomodoroTimer() {
   const minutes = Math.floor(timeLeft / 60);
   const seconds = timeLeft % 60;
 
+  useEffect(() => {
+    // Check if the timer is at 0:00. We rely on the context to switch phases.
+    // We only play the sound if the timer hits zero while running.
+    if (timeLeft === 0) { 
+      const audio = document.getElementById('timer-end-sound');
+      if (audio) {
+        audio.play().catch(error => {
+          // Log error if browser blocks auto-play
+          console.error("Audio playback blocked:", error);
+        });
+      }
+    }
+  }, [timeLeft]); // only re-runs when timeLeft changes
+
   return (
     <div className={`min-h-screen flex flex-col transition-colors duration-500 ${isDarkMode ? "bg-[#232b34] text-white" : "bg-gradient-to-br from-blue-100 to-white text-black"}`}>
       <Navbar />
-      <div className="flex flex-col items-center justify-center flex-1 px-4 py-6">
+        <div className="flex flex-col items-center justify-center flex-1 px-4 py-24"> 
         <h1 className="text-3xl md:text-4xl font-bold mb-10">{isWork ? "Focus Time 💻" : "Break Time ☕"}</h1>
 
         <div style={{ display: "flex", alignItems: "center", gap: "54px", marginBottom: "36px", justifyContent: "center" }}>
@@ -122,6 +136,8 @@ export default function PomodoroTimer() {
           Session {sessions + 1} {isWork ? "(Work)" : "(Break)"}
         </p>
       </div>
+      <audio id="timer-end-sound" src="/sounds/alert.mp3" preload="auto" style={{ display: 'none' }} />
     </div>
+
   );
 }

frontend/src/Components/Features.jsx

@@ -1,4 +1,5 @@
 // src/Components/FeaturesSectionDemo.jsx
+import { Link } from 'react-router-dom'; // <-- ADD THIS LINE
 import { cn } from "@/lib/utils";
 import {
   Activity,
@@ -72,14 +73,22 @@ const Feature = ({
   icon,
   index,
 }) => {
+  const isPomodoro = title === "Live Pomodoro Timer";
+
+  // Use 'Link' component if it's Pomodoro, otherwise use a regular 'div'
+  const Component = isPomodoro ? Link : 'div';
+
   return (
-    <div
+    <Component
+      // The 'to' prop is only valid on the Link component
+      {...(isPomodoro ? { to: "/pomodoro" } : {})} 
       className={cn(
         "flex flex-col lg:border-r py-10 relative group/feature dark:border-neutral-800",
-        "transition-all duration-300 ease-in-out", // Added for smooth transitions
+        "transition-all duration-300 ease-in-out",
+        "cursor-pointer", // Added cursor for better UX
         (index === 0 || index === 4) && "lg:border-l dark:border-neutral-500",
         index < 4 && "lg:border-b dark:border-neutral-800",
-        "hover:bg-[#1a2b47] hover:shadow-xl rounded-lg" // Background and shadow on hover
+        "hover:bg-[#1a2b47] hover:shadow-xl rounded-lg"
       )}
     >
       {/* Absolute positioned overlay for a subtle highlight effect */}
@@ -97,6 +106,6 @@ const Feature = ({
       <p className="text-sm text-blue-50 dark:text-neutral-300 max-w-xs relative z-10 px-10 group-hover/feature:text-blue-100 transition-colors duration-200">
         {description}
       </p>
-    </div>
+    </Component>
   );
 };

frontend/src/context/TimerContext.jsx

@@ -70,8 +70,9 @@ export function TimerProvider({ children }) {
 
     setIsWork(prev => !prev);
     setTimeLeft(nextTime);
-    setEndTimestamp(Date.now() + nextTime * 1000);
-    setIsRunning(true);
+
+    setEndTimestamp(null);//stopped auto-restart
+    setIsRunning(false);//stopped the timer loop
 
     if ("Notification" in window && Notification.permission === "granted") {
       new Notification(