Enhance Get Started page with learning path completion tracking and progress indicators

Author: iitzIrFan

src/pages/get-started/index.tsx

@@ -1,10 +1,10 @@
-import React, { ReactNode, useState, useEffect } from "react";
+import React, { ReactNode, useState, useEffect, useRef } from "react";
 import Layout from "@theme/Layout";
 import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import { motion, useAnimation, useInView } from "framer-motion";
+import Head from '@docusaurus/Head';
 import styles from "./styles.module.css";
-import Head from "@docusaurus/Head";
 
 // Type definitions
 interface AnimatedSectionProps {
@@ -30,15 +30,18 @@ interface LearningPathProps {
   description: string;
   icon: string;
   color: string;
+  isCompleted?: boolean;
+  onToggleComplete?: () => void;
+  index?: number;
 }
 
 // Animated component for staggered animations
 const AnimatedSection = ({ children, delay = 0 }: AnimatedSectionProps) => {
   const controls = useAnimation();
-  const ref = React.useRef<HTMLDivElement>(null);
+  const ref = useRef<HTMLDivElement>(null);
   const isInView = useInView(ref, { once: true });
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (isInView) {
       controls.start({
         opacity: 1,
@@ -256,10 +259,10 @@ function Feature({ title, description, icon, color }: FeatureProps) {
   const [isHovered, setIsHovered] = useState(false);
 
   // Create a ref to apply the custom property
-  const featureRef = React.useRef<HTMLElement>(null);
+  const featureRef = useRef<HTMLElement>(null);
 
   // Apply the color as a CSS variable when the component mounts or color changes
-  React.useEffect(() => {
+  useEffect(() => {
     if (featureRef.current) {
       featureRef.current.style.setProperty('--feature-color', color);
     }
@@ -354,7 +357,15 @@ function StatCard({ value, label, index = 0 }: StatCardProps) {
   );
 }
 
-const LearningPath = ({ title, description, icon, color, index }: LearningPathProps & { index: number }) => {
+const LearningPath = ({ 
+  title, 
+  description, 
+  icon, 
+  color, 
+  index = 0, 
+  isCompleted = false, 
+  onToggleComplete = () => {}
+}: LearningPathProps) => {
   const isEven = index % 2 === 0;
   const delay = index * 0.15;
 
@@ -363,7 +374,7 @@ const LearningPath = ({ title, description, icon, color, index }: LearningPathPr
 
   return (
     <motion.article
-      className={`${styles.pathCard} ${isEven ? styles.left : styles.right} group`}
+      className={`${styles.pathCard} ${isEven ? styles.left : styles.right} group relative`}
       style={{
         '--card-color': color || '#3b82f6',
         '--card-color-light': color ? `${color}20` : 'rgba(59, 130, 246, 0.2)',
@@ -373,10 +384,14 @@ const LearningPath = ({ title, description, icon, color, index }: LearningPathPr
         transform: isEven ? 'none' : 'translateX(50%)',
         marginLeft: isEven ? '0' : 'auto',
         marginRight: isEven ? 'auto' : '0',
+        opacity: isCompleted ? 0.9 : 1,
+        filter: isCompleted ? 'saturate(0.9)' : 'none',
+        transition: 'all 0.3s ease-in-out',
+        border: isCompleted ? `1px solid ${color}40` : '1px solid rgba(255, 255, 255, 0.1)'
       } as React.CSSProperties}
       initial={{ opacity: 0, x: isEven ? -100 : 100, y: 20 }}
       animate={{ 
-        opacity: 1, 
+        opacity: 1,
         x: 0, 
         y: 0,
         transition: {
@@ -389,14 +404,15 @@ const LearningPath = ({ title, description, icon, color, index }: LearningPathPr
     >
       <div className="flex items-start gap-4">
         <motion.div 
-          className="flex-shrink-0 w-14 h-14 flex items-center justify-center rounded-xl text-2xl"
+          className="flex-shrink-0 w-14 h-14 flex items-center justify-center rounded-xl text-2xl relative"
           style={{
             background: `linear-gradient(135deg, ${color || '#3b82f6'}, ${color ? `${color}80` : '#2563eb'})`,
-            boxShadow: `0 4px 15px -5px ${color || '#3b82f6'}80`
+            boxShadow: `0 4px 15px -5px ${color || '#3b82f6'}80`,
+            opacity: isCompleted ? 0.9 : 1
           }}
           whileHover={{
             scale: 1.1,
-            rotate: 5,
+            rotate: isCompleted ? 0 : 5,
             transition: { duration: 0.2 }
           }}
         >
@@ -405,33 +421,131 @@ const LearningPath = ({ title, description, icon, color, index }: LearningPathPr
         <div className="flex-1">
           <h3 className="text-xl font-bold mb-2 text-white">{title}</h3>
           <p className="text-gray-300 mb-4 leading-relaxed">{description}</p>
-          <Link 
-            to="/docs" 
-            className="inline-flex items-center text-sm font-medium text-blue-400 hover:text-blue-300 transition-colors group-hover:underline"
-          >
-            Start Learning
-            <svg 
-              className="w-4 h-4 ml-2 transition-transform duration-300 group-hover:translate-x-1" 
-              fill="none" 
-              viewBox="0 0 24 24" 
-              stroke="currentColor"
+          
+          <div className="flex items-center justify-between mt-4 pt-3 border-t border-gray-700/50">
+            <Link 
+              to="/docs" 
+              className="inline-flex items-center text-sm font-medium text-blue-400 hover:text-blue-300 transition-colors group-hover:underline"
             >
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-            </svg>
-          </Link>
+              {isCompleted ? 'Continue Learning' : 'Start Learning'}
+              <svg 
+                className="w-4 h-4 ml-2 transition-transform duration-300 group-hover:translate-x-1" 
+                fill="none" 
+                viewBox="0 0 24 24" 
+                stroke="currentColor"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+              </svg>
+            </Link>
+            
+            {/* Completion Toggle */}
+            <button 
+              onClick={(e) => {
+                e.preventDefault();
+                onToggleComplete();
+              }}
+              className={`relative inline-flex items-center h-6 rounded-full w-11 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 ${
+                isCompleted 
+                  ? 'bg-green-500 focus:ring-green-500' 
+                  : 'bg-gray-600 focus:ring-blue-500'
+              }`}
+              aria-pressed={isCompleted}
+              aria-label={isCompleted ? 'Mark as incomplete' : 'Mark as complete'}
+            >
+              <span className="sr-only">
+                {isCompleted ? 'Mark as incomplete' : 'Mark as complete'}
+              </span>
+              <span
+                className={`${
+                  isCompleted ? 'translate-x-6' : 'translate-x-1'
+                } inline-block w-4 h-4 transform bg-white rounded-full transition-transform duration-200 ease-in-out`}
+              >
+                {isCompleted && (
+                  <svg
+                    className="w-3 h-3 text-green-500 mx-auto mt-0.5"
+                    fill="currentColor"
+                    viewBox="0 0 20 20"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                )}
+              </span>
+            </button>
+          </div>
         </div>
       </div>
+      
+      {/* Progress bar background */}
+      <div className="absolute bottom-0 left-0 right-0 h-1 bg-gray-700/50 rounded-b-lg overflow-hidden">
+        <motion.div 
+          className="h-full bg-green-500"
+          initial={{ width: '0%' }}
+          animate={{ width: isCompleted ? '100%' : '0%' }}
+          transition={{ duration: 0.5, ease: 'easeOut' }}
+        />
+      </div>
+      
+      {/* Completion badge */}
+      {isCompleted && (
+        <div className="absolute -top-2 -right-2 w-8 h-8 bg-green-500 rounded-full flex items-center justify-center shadow-lg">
+          <svg className="w-4 h-4 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
+          </svg>
+        </div>
+      )}
     </motion.article>
   );
 };
 
 export default function GetStarted() {
   const { siteConfig } = useDocusaurusContext();
-  const currentYear = new Date().getFullYear();
+  type CompletedPaths = Record<string, boolean>;
+
+  const [completedPaths, setCompletedPaths] = useState<CompletedPaths>(() => {
+    if (typeof window !== 'undefined') {
+      try {
+        const saved = localStorage.getItem('completedPaths');
+        return saved ? JSON.parse(saved) : {};
+      } catch (e) {
+        console.error('Failed to parse completedPaths from localStorage', e);
+        return {};
+      }
+    }
+    return {};
+  });
+
+  // Toggle completion status for a path
+  const togglePathCompletion = React.useCallback((pathTitle: string) => {
+    setCompletedPaths(prev => ({
+      ...prev,
+      [pathTitle]: !prev[pathTitle]
+    }));
+  }, []);
+
+  // Calculate completion percentage
+  const completionPercentage = Math.round(
+    (Object.values(completedPaths).filter(Boolean).length / learningPaths.length) * 100
+  ) || 0;
+
+  // Save to localStorage whenever completedPaths changes
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      try {
+        localStorage.setItem('completedPaths', JSON.stringify(completedPaths));
+      } catch (e) {
+        console.error('Failed to save completedPaths to localStorage', e);
+      }
+    }
+  }, [completedPaths]);
 
   return (
     <Layout
-      title={`Get Started | ${siteConfig.title}`}
+      title={`Get Started | ${siteConfig?.title || 'Recode Hive'}`}
       description="Start your coding journey with Recode Hive. Learn to code with our interactive platform and structured learning paths."
     >
       <Head>
@@ -517,19 +631,83 @@ export default function GetStarted() {
                     </motion.h2>
                   </div>
 
-                  <div className={styles.timelineContainer}>
-                    <div className={styles.timeline}></div>
-                    <div className={styles.pathsContainer}>
-                      {learningPaths.map((path, idx) => (
-                        <LearningPath 
-                          key={path.title}
-                          title={path.title}
-                          description={path.description}
-                          icon={path.icon}
-                          color={path.color}
-                          index={idx}
+                  <div className="relative">
+                    {/* Progress Overview */}
+                    <motion.div 
+                      className="mb-12 p-6 bg-gray-800/50 backdrop-blur-sm rounded-2xl border border-gray-700/50 shadow-lg"
+                      initial={{ opacity: 0, y: 20 }}
+                      whileInView={{ opacity: 1, y: 0 }}
+                      viewport={{ once: true, margin: "-50px 0px -50px 0px" }}
+                      transition={{ duration: 0.5, delay: 0.2 }}
+                    >
+                      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-4">
+                        <div>
+                          <h3 className="text-xl font-bold text-white mb-1">Your Learning Progress</h3>
+                          <p className="text-gray-300 text-sm">
+                            {completionPercentage}% Complete • {Object.values(completedPaths).filter(Boolean).length} of {learningPaths.length} paths started
+                          </p>
+                        </div>
+                        <div className="text-right">
+                          <span className="text-2xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
+                            {completionPercentage}%
+                          </span>
+                        </div>
+                      </div>
+                      
+                      {/* Progress Bar */}
+                      <div className="w-full h-3 bg-gray-700/50 rounded-full overflow-hidden">
+                        <motion.div 
+                          className="h-full bg-gradient-to-r from-blue-500 to-purple-500 rounded-full relative"
+                          initial={{ width: 0 }}
+                          animate={{ width: `${completionPercentage}%` }}
+                          transition={{ duration: 1, ease: "easeOut" }}
+                        >
+                          <motion.div 
+                            className="absolute inset-0 bg-white/20" 
+                            animate={{
+                              left: ['0%', '100%']
+                            }}
+                            transition={{
+                              duration: 1.5,
+                              repeat: Infinity,
+                              repeatType: 'loop',
+                              ease: 'easeInOut',
+                            }}
+                            style={{
+                              width: '20%',
+                              height: '100%',
+                              background: 'linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent)',
+                              transform: 'skewX(-20deg)'
+                            }}
+                          />
+                        </motion.div>
+                      </div>
+                    </motion.div>
+                    
+                    <div className={styles.timelineContainer}>
+                      <div className={styles.timeline}>
+                        {/* Animated progress indicator on the timeline */}
+                        <motion.div 
+                          className="absolute left-0 top-0 w-1 bg-gradient-to-b from-blue-400 to-purple-500 h-0"
+                          initial={{ height: 0 }}
+                          animate={{ height: `${(completionPercentage / 100) * 100}%` }}
+                          transition={{ duration: 1.5, ease: 'easeInOut' }}
                         />
-                      ))}
+                      </div>
+                      <div className={styles.pathsContainer}>
+                        {learningPaths.map((path, idx) => (
+                          <LearningPath 
+                            key={path.title}
+                            title={path.title}
+                            description={path.description}
+                            icon={path.icon}
+                            color={path.color}
+                            index={idx}
+                            isCompleted={!!completedPaths[path.title]}
+                            onToggleComplete={() => togglePathCompletion(path.title)}
+                          />
+                        ))}
+                      </div>
                     </div>
                   </div>