Add productivity challenge section

frontend/src/App.jsx

@@ -16,11 +16,12 @@ import Register from "./Components/auth/Register";
 import Profile from "./Components/profile/Profile";
 import ProtectedRoute from "./Components/auth/ProtectedRoute";
 import Dashboard from "./Components/Dashboard";
-
+import Goal from './Components/goals/GoalPage';
 
 // Home component that contains the main landing page content
 import { ArrowUp } from "lucide-react"; // <-- icon for back to top
 
+
 function Home() {
   const [showTop, setShowTop] = useState(false);
 
@@ -69,6 +70,13 @@ function Home() {
         <div id="about">
           <About />
         </div>
+
+        <ScrollRevealWrapper delay={0.2}>
+          <div id="goal">
+            <Goal />
+          </div>
+        </ScrollRevealWrapper>
+
         <ScrollRevealWrapper delay={0.2}>
           <div id="contact">
             <Contact />

frontend/src/Components/goals/ActivityOverview.jsx

@@ -0,0 +1,19 @@
+// src/components/ActivityOverview.jsx
+import { color } from 'framer-motion';
+import React from 'react';
+
+const ActivityOverview = ({ activityData }) => {
+  return (
+    <div className='shadow rounded p-4 mb-6' style={{background:"var(--divColor)"}}>
+      <h3 className='font-bold mb-2' style={{ color: "var(--progressText)" }}>Activity Overview</h3>
+      <div className='flex space-x-1'>
+        {activityData.map((day, index) => (
+          <div key={index} className={`w-4 h-4 rounded-full ${day ? 'bg-indigo-800' : 'bg-gray-400'}`} title={`Day ${index + 1}`}>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ActivityOverview;

frontend/src/Components/goals/Challenge.jsx

@@ -0,0 +1,49 @@
+// src/components/Challenge.jsx
+import { color } from 'framer-motion';
+import React from 'react';
+import { useState } from 'react';
+
+function complete() {
+  setIsCompleted(true);
+}
+
+const Challenge = ({ challenge }) => {
+  const { title, description, difficulty, points, status } = challenge;
+  const [isCompleted, setIsCompleted] = useState(status === 'completed');
+  const getBadgeColor = () => {
+    switch (difficulty) {
+      case 'easy':
+        return 'bg-green-200 text-green-800';
+      case 'medium':
+        return 'bg-yellow-200 text-yellow-800';
+      case 'hard':
+        return 'bg-purple-200 text-purple-800';
+      default:
+        return 'bg-gray-200 text-gray-800';
+    }
+  };
+
+  function complete() {
+    setIsCompleted(true);
+  }
+
+  return (
+    <div className={`shadow rounded p-4 mb-4 ${isCompleted ? 'opacity-60' : ''}`} style={{background:"var(--divColor)"}}>
+      <h4 className='font-bold' style={{ color: "var(--progressText" }}>{title}</h4>
+      <p className='font-bold'  style={{ color: "var(--progressText" }}>{description}</p>
+      <div className='mt-2 flex items-center space-x-2'>
+        <span className={`px-2 py-1 fold-bold text-xs rounded-full ${getBadgeColor()}`}> {difficulty}</span>
+        <span className='px-2 py-1 text-xs rounded-full bg-indigo-100 text-indigo-800'>{points} pts</span>
+      </div>
+      <div className="mt-4">
+        {isCompleted ? (
+        <button className="px-4 py-2 bg-green-500 rounded cursor-not-allowed"> Completed</button>
+        ) : (
+            <button onClick={complete} className="px-4 py-2 rounded text-bold bg-white text-black hover:bg-indigo-700">Mark Complete</button>
+        )}
+      </div>
+      </div>
+    ) 
+}
+
+export default Challenge;

frontend/src/Components/goals/GoalPage.jsx

@@ -0,0 +1,83 @@
+// src/pages/GoalsPage.jsx
+import React, { useState } from 'react';
+import ProgressTracker from './ProgressTracker';
+import ActivityOverview from './ActivityOverview.jsx';
+import Challenge from './Challenge.jsx';
+import { TracingBeam } from "../ui/tracing-beam";
+import { useContext } from "react";
+import ThemeContext from "../ui/theme-provider.jsx"; 
+import { Bold, Weight } from 'lucide-react';
+
+const GoalPage = () => {
+  const theme = useContext(ThemeContext);
+  // Example state for challenges and progress
+  const [currentStreak, setCurrentStreak] = useState(7);
+  const [bestStreak, setBestStreak] = useState(12);
+  const [totalCompleted, setTotalCompleted] = useState(47);
+  const [weeklyProgress, setWeeklyProgress] = useState(75);
+
+  // Dummy data for activity overview and challenges
+  const activityData = [1, 1, 0, 1, 1, 0, 1]; // 1 = active, 0 = inactive
+  const todaysChallenges = [
+    {
+      id: 1,
+      title: 'Code Review Champion',
+      description: 'Review and provide feedback on 3 pull requests.',
+      difficulty: 'medium',
+      points: 150,
+      status: 'pending'
+    },
+    {
+      id: 2,
+      title: 'Documentation Warrior',
+      description: 'Write or update documentation for your project.',
+      difficulty: 'easy',
+      points: 100,
+      status: 'completed'
+    }
+  ];
+  const weeklyChallenge = {
+    id: 3,
+    title: 'Testing Excellence',
+    description: 'Write comprehensive tests for a new feature.',
+    difficulty: 'hard',
+    points: 300,
+    status: 'not-started'
+  };
+
+  return (
+    <TracingBeam className="px-4 md:px-10">
+      <div className="goals-page p-6 max-w-4xl mx-auto">
+        <h1 className={`text-4xl font-bold mb-6`} style={{color:"var(--foreground)"}}>DevSync Challenges</h1>
+
+      {/* Progress Cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+        <ProgressTracker title="Current Streak" value={currentStreak} />
+        <ProgressTracker title="Best Streak" value={bestStreak} />
+        <ProgressTracker title="Total Completed" value={totalCompleted} />
+        <ProgressTracker title="Weekly Progress" value={weeklyProgress} isProgress={true} />
+      </div>
+
+      {/* Activity Overview */}
+      <ActivityOverview activityData={activityData} />
+
+      {/* Today's Challenges */}
+      <div className="mt-8">
+        <h2 className="text-2xl font-bold mb-4" style={{color:"var(--foreground)"}}>Today's Challenges</h2>
+        {todaysChallenges.map((challenge) => (
+          <Challenge key={challenge.id} challenge={challenge} />
+        ))}
+      </div>
+
+      {/* This Week's Challenge */}
+      <div className="mt-8">
+        <h2 className="text-2xl font-bold mb-4" style={{color:"var(--foreground)"}}>This Week's Challenge</h2>
+        <Challenge challenge={weeklyChallenge} />
+      </div>
+    </div>
+    </TracingBeam>
+
+  );
+};
+
+export default GoalPage;

frontend/src/Components/goals/ProgressTracker.jsx

@@ -0,0 +1,23 @@
+// src/components/ProgressTracker.jsx
+
+import React from 'react';
+import './goals.css';
+
+const ProgressTracker = ({ title, value, isProgress = false }) => {
+  return (
+    <div className='shadow rounded p-4' style={{background:"var(--divColor)"}}>
+      <h3 className="font-bold" style={{ color: "var(--progressText)" }}>{title}</h3>
+      {isProgress ? ( 
+        <div className='mt-2 bg-white rounded-full h-4'>
+          <div className='bg-indigo-500 h-4 rounded-full' style={{width: `${value}% `}}></div>
+        </div> 
+      ) : (
+          <p className='mt-2 text-2xl font-bold' style={{ color: "var(--progressText)" }}>{value}</p>
+      )}
+    </div>
+  );
+};
+
+
+
+export default ProgressTracker;

frontend/src/Components/goals/goals.css

@@ -0,0 +1,16 @@
+:root {
+  --background: #fff;
+  --foreground: #18181b;
+  --divColor : #1a2b47;
+  --progressText :#fff;
+  --buttonBack:#fff;
+  --buttonText:#000;
+}
+.dark {
+  --background: #18181b;
+  --foreground: #fafafa;
+  --divColor : #1a2b47;
+  --progressText:#fff;
+  --buttonBack:#fff;
+  --buttonText:#000;
+}

frontend/src/main.jsx

@@ -10,6 +10,7 @@ import Login from './Components/auth/Login';
 import Dashboard from './Components/Dashboard';
 import TestDashboardPage from './Components/DashBoard/Test';
 import { ThemeProvider } from './Components/ui/theme-provider';
+import GoalsPage from './Components/goals/GoalPage.jsx';
 
 
 
@@ -28,6 +29,7 @@ createRoot(document.getElementById('root')).render(
           <Route path="/profile" element={<Profile />} />
           <Route path="/dashboard" element={<Dashboard />} />
           <Route path="/test" element={<TestDashboardPage />} />
+          <Route path="/goal" element={<GoalsPage />} />
           <Route path="*" element={<NotFound />} />
         </Routes>
       </BrowserRouter>