From 8bcc046868d852bd3a40685fe22d05947b63b9e5 Mon Sep 17 00:00:00 2001
From: Divyanshu <divyanshuchoubey8210@gmail.com>
Date: Sun, 5 Oct 2025 17:44:30 +0530
Subject: [PATCH] Aboutpagechange

---
 frontend/package-lock.json                    |   2 +-
 frontend/package.json                         |   2 +-
 frontend/src/App.js                           |   4 +-
 .../components/Tutorial/TutorialLayout.jsx    |   1 +
 frontend/src/pages/About.jsx                  |   2 +-
 frontend/src/pages/AboutPage.jsx              | 501 +++++++++++-------
 frontend/src/pages/GraphVisualizer.jsx        |   3 +
 frontend/src/pages/TutorialsPage.jsx          |   2 +
 8 files changed, 312 insertions(+), 205 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 4d57b46..f243f27 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -19,7 +19,7 @@
         "axios": "^1.3.4",
         "chart.js": "^4.2.1",
         "d3": "^7.8.2",
-        "framer-motion": "^10.0.1",
+        "framer-motion": "^10.18.0",
         "lucide-react": "^0.323.0",
         "monaco-editor": "^0.36.1",
         "postcss": "^8.4.21",
diff --git a/frontend/package.json b/frontend/package.json
index 4bab14b..b07adbf 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,7 +14,7 @@
     "axios": "^1.3.4",
     "chart.js": "^4.2.1",
     "d3": "^7.8.2",
-    "framer-motion": "^10.0.1",
+    "framer-motion": "^10.18.0",
     "lucide-react": "^0.323.0",
     "monaco-editor": "^0.36.1",
     "postcss": "^8.4.21",
diff --git a/frontend/src/App.js b/frontend/src/App.js
index 3eb8d47..72e8f53 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -64,11 +64,11 @@ const AppContent = () => {
             />
             <Route 
               path="/tutorials" 
-              element={<TutorialsPage darkMode={darkMode} />} 
+              element={<TutorialsPage  />} 
             />
             <Route 
               path="/tutorial/:tutorialId" 
-              element={<TutorialPage darkMode={darkMode} />} 
+              element={<TutorialPage />} 
             />
           </Routes>
         </Layout>
diff --git a/frontend/src/components/Tutorial/TutorialLayout.jsx b/frontend/src/components/Tutorial/TutorialLayout.jsx
index aef439f..3adb40f 100644
--- a/frontend/src/components/Tutorial/TutorialLayout.jsx
+++ b/frontend/src/components/Tutorial/TutorialLayout.jsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import TutorialStep from './TutorialStep';
 import TutorialProgress from './TutorialProgress';
 import TutorialQuiz from './TutorialQuiz';
+import { getTutorialById } from '../../services/api';
 
 const TutorialLayout = ({ tutorialId }) => {
   const [currentTutorial, setCurrentTutorial] = useState(null);
diff --git a/frontend/src/pages/About.jsx b/frontend/src/pages/About.jsx
index 6a7309a..cdc42c0 100644
--- a/frontend/src/pages/About.jsx
+++ b/frontend/src/pages/About.jsx
@@ -191,7 +191,7 @@ const About = () => {
                   }
                 `}
               >
-                <div className="w-20 h-20 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center mx-auto mb-4">
+                <div className="w-30 h-30 rounded-3xl bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center mx-auto mb-4">
                   <Users className="h-10 w-10 text-white" />
                 </div>
                 <h3 className={`text-xl font-semibold mb-2 ${
diff --git a/frontend/src/pages/AboutPage.jsx b/frontend/src/pages/AboutPage.jsx
index c004a86..aa0bbd8 100644
--- a/frontend/src/pages/AboutPage.jsx
+++ b/frontend/src/pages/AboutPage.jsx
@@ -1,6 +1,23 @@
 import React from 'react';
 import { Code, Users, Target, Award, Github, Linkedin, Mail, ExternalLink, MapPin, Calendar, GraduationCap, Briefcase } from 'lucide-react';
 import { useTheme } from '../contexts/ThemeContext';
+import { motion } from "framer-motion";
+import { FaReact, FaPython, FaDocker, FaJs } from 'react-icons/fa';
+import { SiFastapi, SiTailwindcss, SiCanvas, SiLucide } from 'react-icons/si';
+
+
+const techs = [
+  { name: 'React.js', icon: <FaReact className="w-10 h-10 text-blue-400" /> },
+  { name: 'FastAPI', icon: <SiFastapi className="w-10 h-10 text-cyan-400" /> },
+  { name: 'Python', icon: <FaPython className="w-10 h-10 text-yellow-400" /> },
+  { name: 'JavaScript', icon: <FaJs className="w-10 h-10 text-yellow-300" /> },
+  { name: 'TailwindCSS', icon: <SiTailwindcss className="w-10 h-10 text-cyan-500" /> },
+  { name: 'Docker', icon: <FaDocker className="w-10 h-10 text-blue-500" /> },
+  { name: 'Canvas API', icon: <SiCanvas className="w-10 h-10 text-purple-400" /> },
+  { name: 'Lucide Icons', icon: <SiLucide className="w-10 h-10 text-gray-400" /> },
+];
+
+
 
 const AboutPage = () => {
   const { isDark, classes, getThemedGradient } = useTheme();
@@ -65,10 +82,10 @@ const AboutPage = () => {
             ? 'bg-gray-800/20 border-gray-700/50' 
             : 'bg-white/20 border-white/50'
         } border`}>
-          <h1 className="text-5xl font-bold mb-6 bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+          <h1 className="text-6xl p-5 font-extrabold mb-6 bg-gradient-to-r from-blue-600 via-cyan-500 to-blue-500  bg-clip-text text-transparent">
             About Algorithm Visualizer Pro
           </h1>
-          <p className={`text-xl leading-relaxed max-w-4xl mx-auto ${classes.textSecondary}`}>
+          <p className={`text-xl leading-relaxed max-w-4xl font-medium mx-auto ${classes.textSecondary}`}>
             An interactive platform designed to make algorithm learning engaging and intuitive. 
             Built with passion by a full-stack developer who believes in the power of visual learning 
             to make complex computer science concepts accessible to everyone.
@@ -76,219 +93,303 @@ const AboutPage = () => {
         </div>
 
         {/* Mission Statement */}
-        <div className={`mb-16 p-8 rounded-2xl backdrop-blur-xl ${classes.cardBg} border`}>
-          <h2 className={`text-3xl font-bold mb-6 text-center ${classes.textPrimary}`}>
-            My Mission
-          </h2>
-          <p className={`text-lg leading-relaxed text-center max-w-3xl mx-auto ${classes.textSecondary}`}>
-            To bridge the gap between theoretical computer science and practical understanding 
-            by providing interactive, visual learning experiences. As a developer passionate about 
-            education technology, I strive to make complex algorithms understandable through 
-            step-by-step visualizations and real-time analysis.
-          </p>
-        </div>
+     {/* My Mission Section */}
+<div className={`relative mb-24 p-10 rounded-3xl overflow-hidden backdrop-blur-2xl border ${classes.cardBg}`}>
+  {/* Soft Gradient Glow Background */}
+  <div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 via-cyan-400/5 to-transparent rounded-3xl blur-3xl"></div>
+
+  <h2 className="relative text-5xl p-5 font-extrabold mb-8 text-center bg-gradient-to-r from-blue-600 via-cyan-400 to-blue-500 bg-clip-text text-transparent tracking-tight drop-shadow-lg">
+    My Mission
+  </h2>
+
+  <p
+    className={`relative text-lg md:text-xl leading-relaxed text-center max-w-3xl mx-auto ${classes.textSecondary}`}
+  >
+    To bridge the gap between theoretical computer science and practical understanding 
+    by providing interactive, visual learning experiences. As a developer passionate about 
+    education technology, I strive to make complex algorithms understandable through 
+    step-by-step visualizations and real-time analysis.
+  </p>
+
+  {/* Decorative Gradient Line */}
+  <div className="relative mx-auto mt-10 h-1 w-32 bg-gradient-to-r from-blue-600 via-cyan-400 to-blue-600 rounded-full"></div>
+</div>
+
+{/* Stats Section */}
+<div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-24">
+  {stats.map((stat, index) => (
+    <div
+      key={index}
+      className={`
+        group relative p-8 text-center rounded-2xl overflow-hidden border 
+        ${classes.cardBg} backdrop-blur-xl
+        transform hover:-translate-y-2 hover:shadow-2xl hover:border-blue-400/40 
+        transition-all duration-300 ease-out
+      `}
+    >
+      {/* Soft Hover Glow */}
+      <div className="absolute inset-0 opacity-0 group-hover:opacity-100 bg-gradient-to-br from-blue-500/10 via-cyan-400/10 to-transparent transition-opacity duration-500 rounded-2xl"></div>
+
+      {/* Animated Number */}
+      <div
+        className={`relative z-10 text-3xl md:text-4xl font-bold mb-3 bg-gradient-to-r from-blue-500 to-cyan-400 bg-clip-text text-transparent`}
+      >
+        {stat.value}
+      </div>
+
+      {/* Label */}
+      <div
+        className={`relative z-10 text-base md:text-lg ${classes.textSecondary} group-hover:text-gray-300 transition-colors`}
+      >
+        {stat.label}
+      </div>
+
+      {/* Animated underline */}
+      <div className="absolute bottom-0 left-0 w-0 h-1 bg-gradient-to-r from-blue-500 to-cyan-400 group-hover:w-full transition-all duration-500 rounded-full"></div>
+    </div>
+  ))}
+</div>
+
+
+<div className="relative mb-24 p-10 rounded-3xl backdrop-blur-2xl border ${classes.cardBg} overflow-hidden ">
+  {/* Soft Gradient Glow Background */}
+  <div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 via-cyan-400/5 to-transparent blur-3xl rounded-3xl"></div>
+
+  <div className="relative z-10 max-w-4xl mx-auto text-center">
+    {/* Section Title */}
+    <h3 className="text-3xl md:text-4xl font-extrabold mb-6 bg-gradient-to-r from-blue-600 via-cyan-400 to-blue-500 bg-clip-text text-transparent drop-shadow-lg">
+      Project Vision
+    </h3>
+
+    {/* Description */}
+    <p className={`text-lg md:text-xl leading-relaxed ${classes.textSecondary}`}>
+      This platform represents my commitment to education technology and the belief that 
+      visual learning can transform how we understand algorithms. Every feature has been 
+      carefully designed to provide an intuitive, engaging, and educational experience 
+      for learners at all levels.
+    </p>
+
+    {/* Decorative Gradient Line */}
+    <div className="mt-8 h-1 w-32 mx-auto bg-gradient-to-r from-blue-600 via-cyan-400 to-blue-600 rounded-full animate-pulse"></div>
+  </div>
+</div>
+
+
+
 
-        {/* Stats */}
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-16">
-          {stats.map((stat, index) => (
-            <div 
-              key={index}
-              className={`text-center p-6 rounded-xl backdrop-blur-xl ${classes.cardBg} border transform hover:scale-105 transition-all`}
-            >
-              <div className={`text-3xl font-bold mb-2 ${
-                isDark ? 'text-blue-400' : 'text-blue-600'
-              }`}>
-                {stat.value}
-              </div>
-              <div className={`text-sm ${classes.textSecondary}`}>
-                {stat.label}
-              </div>
-            </div>
-          ))}
-        </div>
 
         {/* Features */}
-        <div className="mb-16">
-          <h2 className={`text-3xl font-bold mb-12 text-center ${classes.textPrimary}`}>
-            Key Features
-          </h2>
-          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
-            {features.map((feature, index) => (
-              <div 
-                key={index}
-                className={`p-6 rounded-xl backdrop-blur-xl ${classes.cardBg} border transform hover:scale-105 transition-all`}
-              >
-                <feature.icon className={`h-12 w-12 mb-4 ${
-                  isDark ? 'text-blue-400' : 'text-blue-600'
-                }`} />
-                <h3 className={`text-xl font-semibold mb-3 ${classes.textPrimary}`}>
-                  {feature.title}
-                </h3>
-                <p className={classes.textSecondary}>
-                  {feature.description}
-                </p>
-              </div>
-            ))}
-          </div>
+     <div className="mb-20 px-6">
+  <h2
+    className="text-5xl font-extrabold mb-16 text-center bg-gradient-to-r from-blue-600 via-cyan-400 to-blue-600 bg-clip-text text-transparent tracking-tight drop-shadow-lg"
+  >
+    Key Features
+  </h2>
+
+  <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-10">
+    {features.map((feature, index) => (
+      <div
+        key={index}
+        className={`
+          group relative p-8 rounded-2xl overflow-hidden border border-white/10 
+          shadow-lg backdrop-blur-xl ${classes.cardBg}
+          hover:shadow-2xl hover:border-blue-400/40
+          transform hover:-translate-y-2 transition-all duration-300 ease-out
+        `}
+      >
+        {/* Gradient Glow Border */}
+        <div className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 bg-gradient-to-br from-blue-600/20 to-cyan-400/20 rounded-2xl"></div>
+
+        {/* Icon with Pulse Effect */}
+        <div
+          className={`
+            relative z-10 flex items-center justify-center mb-6 h-16 w-16 
+            rounded-full bg-gradient-to-br from-blue-500 to-cyan-400 text-white 
+            shadow-md group-hover:scale-110 transform transition-transform duration-300
+          `}
+        >
+          <feature.icon className="h-8 w-8" />
         </div>
 
+        {/* Title */}
+        <h3
+          className={`
+            relative z-10 text-xl font-semibold mb-3 
+            ${isDark ? 'text-white' : 'text-gray-900'}
+            group-hover:text-blue-500 transition-colors duration-300
+          `}
+        >
+          {feature.title}
+        </h3>
+
+        {/* Description */}
+        <p
+          className={`
+            relative z-10 ${classes.textSecondary} leading-relaxed 
+            group-hover:text-gray-300 transition-colors duration-300
+          `}
+        >
+          {feature.description}
+        </p>
+
+        {/* Animated bottom border line */}
+        <span className="absolute bottom-0 left-0 w-0 h-1 bg-gradient-to-r from-blue-500 to-cyan-400 transition-all duration-500 group-hover:w-full"></span>
+      </div>
+    ))}
+  </div>
+</div>
+
+
         {/* Developer Profile */}
-        <div className={`mb-16 p-8 rounded-2xl backdrop-blur-xl ${classes.cardBg} border`}>
-          <h2 className={`text-3xl font-bold mb-12 text-center ${classes.textPrimary}`}>
-            Meet the Developer
-          </h2>
-          
-          {teamMembers.map((member, index) => (
-            <div key={index} className="max-w-4xl mx-auto">
-              <div className="grid md:grid-cols-3 gap-8 items-center">
-                {/* Profile Image */}
-                <div className="text-center md:text-left">
-                  <img 
-                    src={member.image} 
-                    alt={member.name}
-                    className="w-48 h-48 rounded-full mx-auto md:mx-0 mb-4 object-cover shadow-lg"
-                  />
-                  <div className="flex justify-center md:justify-start space-x-4 mt-4">
-                    <a 
-                      href={member.github} 
-                      target="_blank" 
-                      rel="noopener noreferrer"
-                      className={`p-3 rounded-lg transition-colors ${
-                        isDark 
-                          ? 'hover:bg-gray-600 text-gray-400 hover:text-white' 
-                          : 'hover:bg-gray-100 text-gray-600 hover:text-gray-900'
-                      }`}
-                    >
-                      <Github className="h-6 w-6" />
-                    </a>
-                    <a 
-                      href={member.linkedin} 
-                      target="_blank" 
-                      rel="noopener noreferrer"
-                      className={`p-3 rounded-lg transition-colors ${
-                        isDark 
-                          ? 'hover:bg-gray-600 text-gray-400 hover:text-white' 
-                          : 'hover:bg-gray-100 text-gray-600 hover:text-gray-900'
-                      }`}
-                    >
-                      <Linkedin className="h-6 w-6" />
-                    </a>
-                    <a 
-                      href={`mailto:${member.email}`}
-                      className={`p-3 rounded-lg transition-colors ${
-                        isDark 
-                          ? 'hover:bg-gray-600 text-gray-400 hover:text-white' 
-                          : 'hover:bg-gray-100 text-gray-600 hover:text-gray-900'
-                      }`}
-                    >
-                      <Mail className="h-6 w-6" />
-                    </a>
-                  </div>
-                </div>
-
-                {/* Profile Info */}
-                <div className="md:col-span-2">
-                  <h3 className={`text-3xl font-bold mb-2 ${classes.textPrimary}`}>
-                    {member.name}
-                  </h3>
-                  <p className={`text-lg mb-4 ${
-                    isDark ? 'text-blue-400' : 'text-blue-600'
-                  }`}>
-                    {member.role}
-                  </p>
-                  <p className={`text-base mb-6 leading-relaxed ${classes.textSecondary}`}>
-                    {member.description}
-                  </p>
-
-                  {/* Additional Details */}
-                  <div className="space-y-3">
-                    <div className="flex items-center">
-                      <GraduationCap className={`h-5 w-5 mr-3 ${
-                        isDark ? 'text-green-400' : 'text-green-600'
-                      }`} />
-                      <span className={classes.textSecondary}>
-                        {member.education}
-                      </span>
-                    </div>
-                    <div className="flex items-center">
-                      <MapPin className={`h-5 w-5 mr-3 ${
-                        isDark ? 'text-red-400' : 'text-red-600'
-                      }`} />
-                      <span className={classes.textSecondary}>
-                        {member.location}
-                      </span>
-                    </div>
-                    <div className="flex items-center">
-                      <Briefcase className={`h-5 w-5 mr-3 ${
-                        isDark ? 'text-purple-400' : 'text-purple-600'
-                      }`} />
-                      <span className={classes.textSecondary}>
-                        {member.experience}
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
+        
+<div className={`mb-32 p-10 rounded-3xl backdrop-blur-2xl  ${classes.cardBg} overflow-hidden relative`}>
+  {/* Soft gradient glow background */}
+  <div className="absolute inset-0  blur-3xl rounded-3xl"></div>
+
+  {/* Section Title */}
+  <h2 className="relative text-5xl font-extrabold mb-16 text-center bg-gradient-to-r from-blue-600 via-cyan-400 to-blue-600 bg-clip-text text-transparent tracking-tight drop-shadow-lg">
+    Meet The Developer
+  </h2>
+
+  {/* Team Member Cards */}
+  {teamMembers.map((member, index) => (
+    <div key={index} className="max-w-5xl mx-auto mb-16">
+      <div className="grid md:grid-cols-3 gap-10 items-center">
+        {/* Profile Image + Social Links */}
+        <div className="flex flex-col items-center md:items-start text-center md:text-left relative z-10">
+          <img 
+            src={member.image} 
+            className="w-64 h-64 md:w-56 md:h-56 rounded-full object-cover shadow-lg border-4 border-gray-200 dark:border-gray-700 mb-5"
+          />
 
-        {/* Skills Section */}
-        <div className={`mb-16 p-8 rounded-2xl backdrop-blur-xl ${classes.cardBg} border`}>
-          <h2 className={`text-3xl font-bold mb-8 text-center ${classes.textPrimary}`}>
-            Technical Skills
-          </h2>
-          <div className="flex flex-wrap justify-center gap-3">
-            {skills.map((skill, index) => (
-              <span 
-                key={index}
-                className={`px-4 py-2 rounded-full text-sm font-medium ${
-                  isDark 
-                    ? 'bg-blue-600/20 text-blue-300 border border-blue-500/30' 
-                    : 'bg-blue-100 text-blue-800 border border-blue-200'
-                } hover:scale-105 transition-transform`}
-              >
-                {skill}
-              </span>
-            ))}
+          <div className="flex justify-center md:justify-start space-x-7 ml-2 mt-2">
+            <a 
+              href={member.github} 
+              target="_blank" 
+              rel="noopener noreferrer"
+              className={`group p-3 rounded-full border transform transition-all duration-300 hover:scale-110 ${
+                isDark 
+                  ? 'border-gray-700 text-gray-400 hover:bg-gray-800 hover:text-white shadow-[0_0_10px_rgba(255,255,255,0.1)]' 
+                  : 'border-gray-200 text-gray-600 hover:bg-gray-100 hover:text-gray-900 shadow-[0_0_10px_rgba(0,0,0,0.05)]'
+              }`}
+            >
+              <Github className="h-6 w-6 transition-transform duration-300 group-hover:rotate-[10deg]" />
+            </a>
+            <a 
+              href={member.linkedin} 
+              target="_blank" 
+              rel="noopener noreferrer"
+              className={`group p-3 rounded-full border transform transition-all duration-300 hover:scale-110 ${
+                isDark 
+                  ? 'border-gray-700 text-gray-400 hover:bg-blue-800 hover:text-white shadow-[0_0_10px_rgba(59,130,246,0.4)]' 
+                  : 'border-gray-200 text-gray-600 hover:bg-blue-50 hover:text-blue-700 shadow-[0_0_10px_rgba(59,130,246,0.2)]'
+              }`}
+            >
+              <Linkedin className="h-6 w-6 transition-transform duration-300 group-hover:rotate-[10deg]" />
+            </a>
+            <a 
+              href={`mailto:${member.email}`}
+              className={`group p-3 rounded-full border transform transition-all duration-300 hover:scale-110 ${
+                isDark 
+                  ? 'border-gray-700 text-gray-400 hover:bg-red-800 hover:text-white shadow-[0_0_10px_rgba(239,68,68,0.4)]' 
+                  : 'border-gray-200 text-gray-600 hover:bg-red-50 hover:text-red-600 shadow-[0_0_10px_rgba(239,68,68,0.2)]'
+              }`}
+            >
+              <Mail className="h-6 w-6 transition-transform duration-300 group-hover:rotate-[10deg]" />
+            </a>
           </div>
         </div>
 
-        {/* Technology Stack */}
-        <div className={`p-8 rounded-2xl backdrop-blur-xl ${classes.cardBg} border`}>
-          <h2 className={`text-3xl font-bold mb-8 text-center ${classes.textPrimary}`}>
-            Built With Modern Technologies
-          </h2>
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
-            {['React.js', 'FastAPI', 'Python', 'JavaScript', 'TailwindCSS', 'Docker', 'Canvas API', 'Lucide Icons'].map((tech, index) => (
-              <div 
-                key={index}
-                className={`p-4 rounded-lg ${
-                  isDark ? 'bg-gray-700/30' : 'bg-white/30'
-                } transform hover:scale-105 transition-all`}
-              >
-                <span className={`font-medium ${classes.textPrimary}`}>
-                  {tech}
-                </span>
-              </div>
-            ))}
-          </div>
+        {/* Profile Info */}
+        <div className="md:col-span-2 relative z-10">
+          <h3 className={`text-3xl font-bold mb-2 ${classes.textPrimary}`}>
+            {member.name}
+          </h3>
+          <p className={`text-lg mb-4 ${isDark ? 'text-blue-400' : 'text-blue-600'}`}>
+            {member.role}
+          </p>
+          <p className={`text-base mb-6 leading-relaxed ${classes.textSecondary}`}>
+            {member.description}
+          </p>
 
-          {/* Project Vision */}
-          <div className="mt-12 text-center">
-            <h3 className={`text-2xl font-bold mb-4 ${classes.textPrimary}`}>
-              Project Vision
-            </h3>
-            <p className={`text-lg leading-relaxed max-w-3xl mx-auto ${classes.textSecondary}`}>
-              This platform represents my commitment to education technology and the belief that 
-              visual learning can transform how we understand algorithms. Every feature has been 
-              carefully designed to provide an intuitive, engaging, and educational experience 
-              for learners at all levels.
-            </p>
+          {/* Additional Info */}
+          <div className="space-y-3">
+            <div className="flex items-center">
+              <GraduationCap className={`h-5 w-5 mr-3 ${isDark ? 'text-green-400' : 'text-green-600'}`} />
+              <span className={classes.textSecondary}>{member.education}</span>
+            </div>
+            <div className="flex items-center">
+              <MapPin className={`h-5 w-5 mr-3 ${isDark ? 'text-red-400' : 'text-red-600'}`} />
+              <span className={classes.textSecondary}>{member.location}</span>
+            </div>
+            <div className="flex items-center">
+              <Briefcase className={`h-5 w-5 mr-3 ${isDark ? 'text-purple-400' : 'text-purple-600'}`} />
+              <span className={classes.textSecondary}>{member.experience}</span>
+            </div>
           </div>
         </div>
       </div>
     </div>
+  ))}
+
+  {/* Technical Skills */}
+  <div className="relative z-10 p-10 rounded-3xl backdrop-blur-2xl border bg-gradient-to-br from-blue-500/10 via-cyan-400/5 to-transparent overflow-hidden">
+    <h2 className="relative text-3xl md:text-4xl font-bold mb-10 text-center bg-gradient-to-r from-blue-600 via-purple-400 to-blue-500 bg-clip-text text-transparent drop-shadow-lg">
+      Technical Skills
+    </h2>
+
+    <div className="flex flex-wrap justify-center gap-4">
+      {skills.map((skill, index) => (
+        <span
+          key={index}
+          className={`group relative px-5 py-2 md:px-6 md:py-3 rounded-full text-sm md:text-base font-semibold cursor-pointer transform transition-all duration-300 ease-out ${
+            isDark 
+              ? 'bg-blue-600/20 text-blue-300 border border-blue-500/30 hover:bg-blue-500/30 hover:text-white hover:shadow-lg' 
+              : 'bg-blue-100 text-blue-800 border border-blue-200 hover:bg-blue-200 hover:text-blue-900 hover:shadow-md'
+          }`}
+        >
+          <span className="absolute bottom-0 left-1/2 w-0 h-0.5 bg-gradient-to-r from-blue-500 to-cyan-400 rounded-full transition-all duration-300 group-hover:w-full -translate-x-1/2"></span>
+          {skill}
+        </span>
+      ))}
+    </div>
+  </div>
+</div>
+
+
+
+        {/* Technology Stack */}
+        
+<div className={`p-10 rounded-3xl backdrop-blur-2xl border ${classes.cardBg} relative overflow-hidden mb-24`}>
+  {/* Gradient glow background */}
+  <div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 via-cyan-400/5 to-transparent blur-3xl rounded-3xl"></div>
+
+  <h2 className={`relative text-4xl md:text-5xl font-extrabold mb-12 text-center bg-gradient-to-r from-blue-600 via-cyan-400 to-blue-500 bg-clip-text text-transparent drop-shadow-lg`}>
+    Built With Modern Technologies
+  </h2>
+
+  <div className="relative z-10 grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
+    {techs.map((tech, index) => (
+      <div
+        key={index}
+        className={`
+          group p-6 rounded-2xl backdrop-blur-xl border border-white/10
+          ${isDark ? 'bg-gray-700/20 hover:bg-gray-700/30' : 'bg-white/30 hover:bg-white/40'}
+          transform hover:-translate-y-2 hover:scale-105 transition-all duration-300 ease-out
+          flex flex-col items-center justify-center shadow-md hover:shadow-xl
+        `}
+      >
+        <div className="mb-4">{tech.icon}</div>
+        <span className={`font-semibold text-lg ${classes.textPrimary} group-hover:text-blue-500 transition-colors duration-300`}>
+          {tech.name}
+        </span>
+      </div>
+    ))}
+  </div>
+</div>
+    
+      </div>
+    </div>
   );
 };
 
diff --git a/frontend/src/pages/GraphVisualizer.jsx b/frontend/src/pages/GraphVisualizer.jsx
index c4decb9..c97ed98 100644
--- a/frontend/src/pages/GraphVisualizer.jsx
+++ b/frontend/src/pages/GraphVisualizer.jsx
@@ -521,6 +521,9 @@ const GraphVisualizer = () => {
     operation: 'Ready to start'
   };
 
+
+  const [darkMode,setDarkMode]=useState(false);
+
   return (
     <div className={`min-h-screen transition-all duration-500 ${classes.bgGradient}`}>
       {/* Conditional Particle Background */}
diff --git a/frontend/src/pages/TutorialsPage.jsx b/frontend/src/pages/TutorialsPage.jsx
index de43b54..35d9660 100644
--- a/frontend/src/pages/TutorialsPage.jsx
+++ b/frontend/src/pages/TutorialsPage.jsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useState,useEffect } from 'react';
+import { getTutorials } from '../services/api';
 
 const TutorialsPage = ({ darkMode }) => {
   const navigate = useNavigate();