Update src/app/workshops/page.tsx

Merge version_1 into main

src/app/classes/page.tsx

@@ -1,35 +1,37 @@
 "use client";
 
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import Link from "next/link";
 import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
-import FooterCard from "@/components/sections/footer/FooterCard";
 import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
 import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
 import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
-import Link from "next/link";
+import FaqDouble from "@/components/sections/faq/FaqDouble";
+import FooterCard from "@/components/sections/footer/FooterCard";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import {
-  Calendar,
-  Users,
-  Lock,
-  BarChart3,
-  Zap,
-  Smartphone,
-  Award,
   Sparkles,
+  Zap,
+  Award,
+  BookOpen,
+  Users,
+  HelpCircle,
+  Play,
+  Target,
+  TrendingUp,
   Twitter,
   Linkedin,
   Mail,
 } from "lucide-react";
 
-export default function ClassesPage() {
-  const navItems = [
-    { name: "Home", id: "/" },
-    { name: "Workshops", id: "/workshops" },
-    { name: "Classes", id: "/classes" },
-    { name: "Pricing", id: "/pricing" },
-    { name: "Contact", id: "/contact" },
-  ];
+const navItems = [
+  { name: "Home", id: "/" },
+  { name: "Workshops", id: "/workshops" },
+  { name: "Classes", id: "/classes" },
+  { name: "Pricing", id: "/pricing" },
+  { name: "Contact", id: "/contact" },
+];
 
+export default function ClassesPage() {
   return (
     <ThemeProvider
       defaultButtonVariant="shift-hover"
@@ -49,18 +51,16 @@ export default function ClassesPage() {
 
       <div id="hero" data-section="hero">
         <HeroBillboardScroll
-          title="Master New Skills Online"
-          description="Discover and book world-class workshops and classes taught by expert instructors. Learn at your own pace with flexible scheduling and interactive learning experiences."
-          tag="Flexible Learning Platform"
+          title="Ongoing Classes & Skill Development"
+          description="Enroll in comprehensive courses designed to build expertise over time. Learn from experienced instructors in a structured environment with support every step of the way."
+          tag="Continuous Learning"
           tagIcon={Sparkles}
           background={{ variant: "animated-grid" }}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkwR5I869xG7mvZJi1gLiW16GY/professional-banner-image-showing-a-dive-1773149958687-87f99901.jpg?_wi=4"
-          imageAlt="Professional workshop training environment"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkwR5I869xG7mvZJi1gLiW16GY/professional-banner-image-showing-a-dive-1773149958687-87f99901.jpg?_wi=1"
+          imageAlt="Professional classroom training environment"
           buttons={[
-            {
-              text: "Explore Classes",              href: "/classes"},
-            {
-              text: "View Pricing",              href: "/pricing"},
+            { text: "Browse All Classes", href: "/classes" },
+            { text: "View Pricing", href: "/pricing" },
           ]}
           tagAnimation="slide-up"
           buttonAnimation="slide-up"
@@ -69,37 +69,31 @@ export default function ClassesPage() {
 
       <div id="features" data-section="features">
         <FeatureHoverPattern
+          title="Why Choose ClassHub Classes"
+          description="Structured learning paths with ongoing support and community engagement"
+          tag="Class Benefits"
+          tagIcon={Zap}
           features={[
             {
-              icon: Calendar,
-              title: "Smart Scheduling",              description:
-                "Browse upcoming workshops and classes with real-time availability. Filter by category, skill level, instructor, and time slots that fit your schedule."},
+              icon: BookOpen,
+              title: "Structured Curriculum",              description: "Carefully designed courses build skills progressively. Each module builds on previous knowledge with clear learning objectives and milestones."},
+            {
+              icon: Play,
+              title: "Live & On-Demand Options",              description: "Attend live classes for real-time interaction or access recorded sessions. Never miss a class with our comprehensive video library and flexible replay access."},
             {
               icon: Users,
-              title: "Expert Instructors",              description:
-                "Learn from verified, professional instructors with years of experience in their fields. Read reviews and ratings from other students."},
+              title: "Community Support",              description: "Connect with classmates in dedicated forums. Collaborate on projects, share experiences, and build professional networks with peers in your field."},
             {
-              icon: Lock,
-              title: "Secure Authentication",              description:
-                "Enterprise-grade JWT authentication with role-based access control. Separate secure dashboards for students, teachers, and administrators."},
+              icon: Target,
+              title: "Goal-Oriented Learning",              description: "Clear outcomes with measurable progress tracking. Know exactly what you'll achieve and monitor your advancement through personalized learning dashboards."},
             {
-              icon: BarChart3,
-              title: "Real-Time Capacity",              description:
-                "See available seats in real-time. Automatic booking closure when capacity is reached. Prevents overbooking with backend validation."},
+              icon: TrendingUp,
+              title: "Career Advancement",              description: "Develop skills employers value. Gain credentials that boost your resume and open doors to new opportunities in your industry."},
             {
-              icon: Zap,
-              title: "Dynamic Content",              description:
-                "All content powered by Strapi CMS API. Updates instantly across the platform without code changes. Fully scalable infrastructure."},
-            {
-              icon: Smartphone,
-              title: "Fully Responsive",              description:
-                "Perfect experience on mobile, tablet, and desktop. Flexbox layouts adapt to any screen size. Touch-optimized interface for mobile users."},
+              icon: Award,
+              title: "Completion Recognition",              description: "Earn certificates and badges demonstrating mastery. Share achievements on LinkedIn and professional profiles to showcase your expertise."},
           ]}
           animationType="slide-up"
-          title="Powerful Features"
-          description="Everything you need to book, manage, and attend classes with confidence"
-          tag="Platform Capabilities"
-          tagIcon={Zap}
           textboxLayout="default"
           useInvertedBackground={false}
         />
@@ -107,38 +101,62 @@ export default function ClassesPage() {
 
       <div id="testimonials" data-section="testimonials">
         <TestimonialCardOne
+          title="Transformation Through Classes"
+          description="Real people sharing how our structured classes changed their careers and lives"
+          tag="Student Testimonials"
+          tagIcon={Award}
           testimonials={[
             {
               id: "1",              name: "Sarah Chen",              role: "Software Engineer",              company: "Tech Startup",              rating: 5,
-              imageSrc:
-                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkwR5I869xG7mvZJi1gLiW16GY/portrait-photograph-of-a-professional-wo-1773149958697-b0d1653b.png?_wi=2",              imageAlt: "Sarah Chen professional portrait"},
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkwR5I869xG7mvZJi1gLiW16GY/portrait-photograph-of-a-professional-wo-1773149958697-b0d1653b.png?_wi=1",              imageAlt: "Sarah Chen professional portrait"},
             {
               id: "2",              name: "Michael Rodriguez",              role: "Creative Director",              company: "Design Agency",              rating: 5,
-              imageSrc:
-                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkwR5I869xG7mvZJi1gLiW16GY/portrait-photograph-of-a-professional-ma-1773149960412-c73ce951.png?_wi=2",              imageAlt: "Michael Rodriguez professional portrait"},
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkwR5I869xG7mvZJi1gLiW16GY/portrait-photograph-of-a-professional-ma-1773149960412-c73ce951.png?_wi=1",              imageAlt: "Michael Rodriguez professional portrait"},
             {
               id: "3",              name: "Emily Watson",              role: "Marketing Manager",              company: "E-Commerce Business",              rating: 5,
-              imageSrc:
-                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkwR5I869xG7mvZJi1gLiW16GY/portrait-photograph-of-a-young-professio-1773149959161-e0640722.png?_wi=2",              imageAlt: "Emily Watson professional portrait"},
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkwR5I869xG7mvZJi1gLiW16GY/portrait-photograph-of-a-young-professio-1773149959161-e0640722.png?_wi=1",              imageAlt: "Emily Watson professional portrait"},
             {
               id: "4",              name: "David Kim",              role: "Freelance Developer",              company: "Independent",              rating: 5,
-              imageSrc:
-                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkwR5I869xG7mvZJi1gLiW16GY/portrait-photograph-of-a-professional-ma-1773149958765-b75148e4.png?_wi=2",              imageAlt: "David Kim professional portrait"},
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkwR5I869xG7mvZJi1gLiW16GY/portrait-photograph-of-a-professional-ma-1773149958765-b75148e4.png?_wi=1",              imageAlt: "David Kim professional portrait"},
             {
               id: "5",              name: "Jessica Thompson",              role: "Product Manager",              company: "SaaS Company",              rating: 5,
-              imageSrc:
-                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkwR5I869xG7mvZJi1gLiW16GY/portrait-photograph-of-a-diverse-profess-1773149958342-9fec15d1.jpg?_wi=2",              imageAlt: "Jessica Thompson professional portrait"},
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkwR5I869xG7mvZJi1gLiW16GY/portrait-photograph-of-a-diverse-profess-1773149958342-9fec15d1.jpg?_wi=1",              imageAlt: "Jessica Thompson professional portrait"},
             {
               id: "6",              name: "James Morrison",              role: "Business Consultant",              company: "Management Consulting",              rating: 5,
-              imageSrc:
-                "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkwR5I869xG7mvZJi1gLiW16GY/portrait-photograph-of-a-professional-ma-1773149959785-c28fc4c1.png?_wi=2",              imageAlt: "James Morrison professional portrait"},
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkwR5I869xG7mvZJi1gLiW16GY/portrait-photograph-of-a-professional-ma-1773149959785-c28fc4c1.png?_wi=1",              imageAlt: "James Morrison professional portrait"},
           ]}
           gridVariant="uniform-all-items-equal"
           animationType="slide-up"
-          title="Trusted by Thousands"
-          description="Real feedback from students who transformed their skills"
-          tag="Student Success Stories"
-          tagIcon={Award}
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="faq" data-section="faq">
+        <FaqDouble
+          title="Classes FAQs"
+          description="Everything you need to know about enrolling and attending our ongoing classes"
+          tag="Class Help"
+          tagIcon={HelpCircle}
+          faqs={[
+            {
+              id: "1",              title: "How long do classes typically run?",              content: "Most classes run for 8-16 weeks with 1-3 sessions per week. Each class specifies its duration when you enroll. You can see the exact start and end dates, total hours, and session schedule before registering."},
+            {
+              id: "2",              title: "Can I join a class that has already started?",              content: "Some classes accept late enrollments during the first 2 weeks. You'll receive access to recorded sessions from earlier classes to catch up. Check each course page to see if late enrollment is available."},
+            {
+              id: "3",              title: "What if I fall behind?",              content: "We offer catch-up support including recorded session videos, one-on-one mentoring, and extended access to learning materials. Contact your instructor if you need help staying on track."},
+            {
+              id: "4",              title: "Are classes live or recorded?",              content: "Most classes are live with instructors. Live sessions are recorded and available on-demand if you miss them. Some intensive sessions are structured exclusively as live experiences for maximum interaction."},
+            {
+              id: "5",              title: "What if I need to skip a session?",              content: "You can typically skip up to 2 sessions without penalty and access recordings later. More than 2 absences may affect certification eligibility depending on course requirements. Always contact your instructor in advance."},
+            {
+              id: "6",              title: "How much time should I dedicate per week?",              content: "Plan for 4-6 hours per week for typical classes, including live sessions and homework. Intensive courses may require up to 10 hours. Course descriptions specify expected time commitment so you can plan accordingly."},
+            {
+              id: "7",              title: "Will I get feedback on my work?",              content: "Yes! Instructors provide personalized feedback on assignments and projects. You'll also get peer feedback through group discussions and collaborative assignments with classmates."},
+            {
+              id: "8",              title: "Can I transfer to a different class section?",              content: "Yes, you can transfer to another section of the same class at no additional cost if spots are available. Changes must be made at least 48 hours before your current class starts. Contact support to arrange transfers."},
+          ]}
+          faqsAnimation="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
         />

src/app/login/page.tsx

@@ -0,0 +1,178 @@
+"use client";
+
+import Link from "next/link";
+import { useState } from "react";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { Mail, Lock, ArrowRight } from "lucide-react";
+
+const navItems = [
+  { name: "Home", id: "/" },
+  { name: "Workshops", id: "/workshops" },
+  { name: "Classes", id: "/classes" },
+  { name: "Pricing", id: "/pricing" },
+  { name: "Contact", id: "/contact" },
+];
+
+export default function LoginPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    setIsLoading(true);
+
+    try {
+      // Placeholder for actual login logic
+      if (!email || !password) {
+        setError("Please fill in all fields");
+        return;
+      }
+      // API call would go here
+      console.log("Login attempt:", { email, password });
+    } catch (err) {
+      setError("Login failed. Please try again.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="shift-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="medium"
+      sizing="mediumLarge"
+      background="circleGradient"
+      cardStyle="glass-depth"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple brandName="ClassHub" navItems={navItems} />
+      </div>
+
+      <div id="login" data-section="login" className="min-h-screen flex items-center justify-center py-20 px-4">
+        <div className="w-full max-w-md">
+          <div className="bg-card rounded-2xl p-8 shadow-lg border border-foreground/10">
+            {/* Header */}
+            <div className="mb-8">
+              <h1 className="text-3xl font-bold text-foreground mb-2">Welcome Back</h1>
+              <p className="text-foreground/60">Sign in to your ClassHub account</p>
+            </div>
+
+            {/* Error Message */}
+            {error && (
+              <div className="mb-6 p-4 bg-red-500/10 border border-red-500/30 rounded-lg">
+                <p className="text-red-500 text-sm">{error}</p>
+              </div>
+            )}
+
+            {/* Form */}
+            <form onSubmit={handleSubmit} className="space-y-5">
+              {/* Email Field */}
+              <div>
+                <label htmlFor="email" className="block text-sm font-medium text-foreground mb-2">
+                  Email Address
+                </label>
+                <div className="relative">
+                  <Mail className="absolute left-3 top-3 w-5 h-5 text-foreground/40" />
+                  <input
+                    id="email"
+                    type="email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    placeholder="you@example.com"
+                    className="w-full pl-10 pr-4 py-2.5 bg-background border border-foreground/10 rounded-lg text-foreground placeholder:text-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary-cta/50"
+                    disabled={isLoading}
+                  />
+                </div>
+              </div>
+
+              {/* Password Field */}
+              <div>
+                <div className="flex justify-between items-center mb-2">
+                  <label htmlFor="password" className="block text-sm font-medium text-foreground">
+                    Password
+                  </label>
+                  <Link
+                    href="#forgot-password"
+                    className="text-sm text-primary-cta hover:text-primary-cta/80 transition-colors"
+                  >
+                    Forgot?
+                  </Link>
+                </div>
+                <div className="relative">
+                  <Lock className="absolute left-3 top-3 w-5 h-5 text-foreground/40" />
+                  <input
+                    id="password"
+                    type="password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    placeholder="••••••••"
+                    className="w-full pl-10 pr-4 py-2.5 bg-background border border-foreground/10 rounded-lg text-foreground placeholder:text-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary-cta/50"
+                    disabled={isLoading}
+                  />
+                </div>
+              </div>
+
+              {/* Submit Button */}
+              <button
+                type="submit"
+                disabled={isLoading}
+                className="w-full mt-6 px-4 py-3 bg-primary-cta hover:bg-primary-cta/90 text-foreground rounded-lg font-medium transition-all duration-200 flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {isLoading ? "Signing in..." : "Sign In"}
+                <ArrowRight className="w-4 h-4" />
+              </button>
+            </form>
+
+            {/* Divider */}
+            <div className="my-6 flex items-center gap-3">
+              <div className="flex-1 h-px bg-foreground/10"></div>
+              <span className="text-xs text-foreground/40">OR</span>
+              <div className="flex-1 h-px bg-foreground/10"></div>
+            </div>
+
+            {/* Social Login */}
+            <div className="space-y-3">
+              <button className="w-full px-4 py-2.5 border border-foreground/10 rounded-lg text-foreground hover:bg-foreground/5 transition-colors flex items-center justify-center gap-2 text-sm font-medium">
+                <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" />
+                  <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
+                  <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
+                  <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
+                </svg>
+                Google
+              </button>
+              <button className="w-full px-4 py-2.5 border border-foreground/10 rounded-lg text-foreground hover:bg-foreground/5 transition-colors flex items-center justify-center gap-2 text-sm font-medium">
+                <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v 3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
+                </svg>
+                GitHub
+              </button>
+            </div>
+
+            {/* Footer */}
+            <p className="text-center text-sm text-foreground/60 mt-6">
+              Don't have an account?{" "}
+              <Link href="/register" className="text-primary-cta hover:text-primary-cta/80 font-medium transition-colors">
+                Sign up
+              </Link>
+            </p>
+          </div>
+
+          {/* Additional Info */}
+          <div className="text-center mt-8 text-xs text-foreground/40">
+            <p>By signing in, you agree to our Terms of Service and Privacy Policy</p>
+          </div>
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -244,4 +244,4 @@ export default function HomePage() {
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/pricing/page.tsx

@@ -1,137 +1,33 @@
 "use client";
 
 import Link from "next/link";
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
 import PricingCardOne from "@/components/sections/pricing/PricingCardOne";
 import FaqDouble from "@/components/sections/faq/FaqDouble";
 import FooterCard from "@/components/sections/footer/FooterCard";
-import { DollarSign, Sparkles, Star, Crown, Users, HelpCircle, Twitter, Linkedin, Mail } from "lucide-react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import {
+  Sparkles,
+  DollarSign,
+  HelpCircle,
+  Zap,
+  Award,
+  Users,
+  Twitter,
+  Linkedin,
+  Mail,
+} from "lucide-react";
+
+const navItems = [
+  { name: "Home", id: "/" },
+  { name: "Workshops", id: "/workshops" },
+  { name: "Classes", id: "/classes" },
+  { name: "Pricing", id: "/pricing" },
+  { name: "Contact", id: "/contact" },
+];
 
 export default function PricingPage() {
-  const pricingPlans = [
-    {
-      id: "1",
-      badge: "Popular",
-      badgeIcon: Sparkles,
-      price: "$9.99/mo",
-      subtitle: "Perfect for casual learners",
-      features: [
-        "Access to all workshops",
-        "Book up to 5 classes per month",
-        "Student community forum",
-        "Mobile app access",
-        "Basic progress tracking",
-      ],
-    },
-    {
-      id: "2",
-      badge: "Best Value",
-      badgeIcon: Star,
-      price: "$24.99/mo",
-      subtitle: "Ideal for dedicated students",
-      features: [
-        "Unlimited class bookings",
-        "Priority instructor support",
-        "Advanced progress analytics",
-        "Certificate of completion",
-        "Video replay access",
-        "Networking events",
-      ],
-    },
-    {
-      id: "3",
-      badge: "Professional",
-      badgeIcon: Crown,
-      price: "$49.99/mo",
-      subtitle: "For career advancement",
-      features: [
-        "Everything in Pro plan",
-        "1-on-1 mentorship sessions",
-        "Custom learning pathways",
-        "Career placement assistance",
-        "Exclusive workshops",
-        "Priority booking access",
-      ],
-    },
-    {
-      id: "4",
-      badge: "Teacher License",
-      badgeIcon: Users,
-      price: "$99.99/mo",
-      subtitle: "Teach and earn",
-      features: [
-        "Create & manage classes",
-        "Student management tools",
-        "Booking analytics dashboard",
-        "Revenue tracking",
-        "Marketing support",
-        "24/7 technical support",
-      ],
-    },
-  ];
-
-  const faqItems = [
-    {
-      id: "1",
-      title: "Can I change my plan anytime?",
-      content: "Yes! You can upgrade or downgrade your plan at any time. Changes take effect at the beginning of your next billing cycle. No cancellation fees or commitments required.",
-    },
-    {
-      id: "2",
-      title: "Do you offer annual billing discounts?",
-      content: "Yes, we offer 20% off when you choose annual billing. This saves you money while supporting continuous learning. Annual plans auto-renew unless cancelled.",
-    },
-    {
-      id: "3",
-      title: "What payment methods do you accept?",
-      content: "We accept all major credit cards (Visa, Mastercard, American Express), PayPal, and bank transfers. All payments are processed securely through industry-standard encryption.",
-    },
-    {
-      id: "4",
-      title: "Is there a free trial available?",
-      content: "Yes! All new users get a 7-day free trial to explore ClassHub. No credit card required to start. After the trial ends, choose a plan that suits your needs.",
-    },
-    {
-      id: "5",
-      title: "Can I cancel anytime?",
-      content: "Absolutely! Cancel your subscription anytime with no penalties. Your access continues until the end of your billing period. You can reactivate your account anytime.",
-    },
-    {
-      id: "6",
-      title: "Do teacher plans include student access?",
-      content: "Yes, teacher plans include full student plan benefits plus teacher dashboard features. Teach your own classes while accessing other instructors' workshops.",
-    },
-    {
-      id: "7",
-      title: "What if I'm not satisfied?",
-      content: "We offer a 30-day money-back guarantee on all plans. If you're not satisfied, contact our support team for a full refund. No questions asked.",
-    },
-    {
-      id: "8",
-      title: "Are there discounts for organizations?",
-      content: "Yes! We offer custom pricing for teams and organizations. Contact our enterprise sales team at enterprise@classhub.com for volume discounts and dedicated support.",
-    },
-  ];
-
-  const socialLinks = [
-    {
-      icon: Twitter,
-      href: "https://twitter.com/classhub",
-      ariaLabel: "Follow ClassHub on Twitter",
-    },
-    {
-      icon: Linkedin,
-      href: "https://linkedin.com/company/classhub",
-      ariaLabel: "Follow ClassHub on LinkedIn",
-    },
-    {
-      icon: Mail,
-      href: "mailto:hello@classhub.com",
-      ariaLabel: "Email ClassHub",
-    },
-  ];
-
   return (
     <ThemeProvider
       defaultButtonVariant="shift-hover"
@@ -139,55 +35,113 @@ export default function PricingPage() {
       borderRadius="pill"
       contentWidth="medium"
       sizing="mediumLarge"
-      background="grid"
+      background="circleGradient"
       cardStyle="glass-depth"
       primaryButtonStyle="radial-glow"
       secondaryButtonStyle="glass"
       headingFontWeight="light"
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleApple
-          brandName="ClassHub"
-          navItems={[
-            { name: "Home", id: "/" },
-            { name: "Schedule", id: "/schedule" },
-            { name: "Pricing", id: "/pricing" },
-            { name: "Contact", id: "/contact" },
+        <NavbarStyleApple brandName="ClassHub" navItems={navItems} />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboardScroll
+          title="Simple, Transparent Pricing"
+          description="Choose the perfect plan for your learning goals. No hidden fees, no surprise charges. Cancel anytime. All prices shown include access to our complete platform."
+          tag="Affordable Learning"
+          tagIcon={Sparkles}
+          background={{ variant: "animated-grid" }}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkwR5I869xG7mvZJi1gLiW16GY/professional-banner-image-showing-a-dive-1773149958687-87f99901.jpg?_wi=1"
+          imageAlt="Pricing plans presentation"
+          buttons={[
+            { text: "Start Learning Today", href: "/classes" },
+            { text: "Contact Sales", href: "/contact" },
           ]}
+          tagAnimation="slide-up"
+          buttonAnimation="slide-up"
         />
       </div>
 
-      <div id="pricing-plans" data-section="pricing-plans">
+      <div id="pricing" data-section="pricing">
         <PricingCardOne
-          title="Flexible Pricing Plans"
-          description="Choose the perfect plan for your learning journey. All plans include access to our full catalog of workshops and classes."
-          tag="Affordable Learning"
+          title="Our Pricing Plans"
+          description="Transparent pricing designed to fit every budget and learning style. Choose annual billing for 20% savings on any plan."
+          tag="Flexible Plans"
           tagIcon={DollarSign}
-          plans={pricingPlans}
+          plans={[
+            {
+              id: "1",              badge: "Popular",              badgeIcon: Sparkles,
+              price: "$9.99/mo",              subtitle: "Perfect for casual learners",              features: [
+                "Access to all workshops",                "Book up to 5 classes per month",                "Student community forum",                "Mobile app access",                "Basic progress tracking"],
+            },
+            {
+              id: "2",              badge: "Best Value",              badgeIcon: Zap,
+              price: "$24.99/mo",              subtitle: "Ideal for dedicated students",              features: [
+                "Unlimited class bookings",                "Priority instructor support",                "Advanced progress analytics",                "Certificate of completion",                "Video replay access",                "Networking events"],
+            },
+            {
+              id: "3",              badge: "Professional",              badgeIcon: Award,
+              price: "$49.99/mo",              subtitle: "For career advancement",              features: [
+                "Everything in Pro plan",                "1-on-1 mentorship sessions",                "Custom learning pathways",                "Career placement assistance",                "Exclusive workshops",                "Priority booking access"],
+            },
+            {
+              id: "4",              badge: "Teacher License",              badgeIcon: Users,
+              price: "$99.99/mo",              subtitle: "Teach and earn",              features: [
+                "Create & manage classes",                "Student management tools",                "Booking analytics dashboard",                "Revenue tracking",                "Marketing support",                "24/7 technical support"],
+            },
+          ]}
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
         />
       </div>
 
-      <div id="pricing-faq" data-section="pricing-faq">
+      <div id="faq" data-section="faq">
         <FaqDouble
-          title="Pricing & Billing Questions"
-          description="Find answers to common questions about our pricing plans, billing, and subscription management"
-          tag="Help & Support"
+          title="Pricing FAQs"
+          description="Get answers to common questions about our pricing, billing, and subscription management"
+          tag="Pricing Help"
           tagIcon={HelpCircle}
-          faqs={faqItems}
+          faqs={[
+            {
+              id: "1",              title: "Can I change my plan anytime?",              content: "Yes! You can upgrade or downgrade your plan at any time. Changes take effect immediately for upgrades. Downgrades apply at the start of your next billing cycle, and we'll prorate any overpayment."},
+            {
+              id: "2",              title: "Is there an annual billing discount?",              content: "Yes! Annual subscriptions include a 20% discount on the monthly price. For example, the Pro plan costs $239.88/year instead of $299.88. Pay for 10 months and get 2 months free!"},
+            {
+              id: "3",              title: "What payment methods do you accept?",              content: "We accept all major credit cards (Visa, Mastercard, American Express), PayPal, and bank transfers for annual plans. All transactions are secured with SSL encryption. Invoices are provided automatically after each payment."},
+            {
+              id: "4",              title: "Is there a free trial?",              content: "Yes! All new users get a 7-day free trial of any plan. No credit card required to start. Cancel anytime within 7 days with no charges. After the trial ends, you'll be charged the plan price you selected."},
+            {
+              id: "5",              title: "Do you offer group or team discounts?",              content: "Absolutely! Groups of 5 or more get special pricing. Corporate teams receive custom pricing, single sign-on, admin dashboard, and dedicated support. Contact our sales team for enterprise packages."},
+            {
+              id: "6",              title: "What's your refund policy?",              content: "We offer a 30-day money-back guarantee if you're not completely satisfied. If you purchased a subscription and want a refund, contact support within 30 days. Refunds are processed within 5-7 business days."},
+            {
+              id: "7",              title: "Will I be charged when my trial ends?",              content: "Yes, if you don't cancel before your trial expires, your payment method will be charged for the plan you selected. You'll receive email reminders 7 days and 1 day before your trial ends."},
+            {
+              id: "8",              title: "Can I cancel my subscription?",              content: "Yes, cancel anytime from your account settings. Your access continues through the end of your billing period. You won't be charged again unless you reactivate your subscription."},
+          ]}
           faqsAnimation="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
         />
       </div>
 
-      <div id="pricing-footer" data-section="pricing-footer">
+      <div id="footer" data-section="footer">
         <FooterCard
           logoText="ClassHub"
           copyrightText="© 2025 ClassHub. All rights reserved. Empowering learners worldwide."
-          socialLinks={socialLinks}
+          socialLinks={[
+            {
+              icon: Twitter,
+              href: "https://twitter.com/classhub",              ariaLabel: "Follow ClassHub on Twitter"},
+            {
+              icon: Linkedin,
+              href: "https://linkedin.com/company/classhub",              ariaLabel: "Follow ClassHub on LinkedIn"},
+            {
+              icon: Mail,
+              href: "mailto:hello@classhub.com",              ariaLabel: "Email ClassHub"},
+          ]}
         />
       </div>
     </ThemeProvider>

src/app/register/page.tsx

@@ -0,0 +1,294 @@
+"use client";
+
+import Link from "next/link";
+import { useState } from "react";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { Mail, Lock, User, CheckCircle2, ArrowRight } from "lucide-react";
+
+const navItems = [
+  { name: "Home", id: "/" },
+  { name: "Workshops", id: "/workshops" },
+  { name: "Classes", id: "/classes" },
+  { name: "Pricing", id: "/pricing" },
+  { name: "Contact", id: "/contact" },
+];
+
+interface PasswordStrength {
+  score: number;
+  label: string;
+  color: string;
+}
+
+const getPasswordStrength = (password: string): PasswordStrength => {
+  if (password.length < 6) return { score: 0, label: "Too weak", color: "bg-red-500" };
+  if (password.length < 8) return { score: 1, label: "Weak", color: "bg-orange-500" };
+  if (!/[A-Z]/.test(password) || !/[0-9]/.test(password)) return { score: 2, label: "Fair", color: "bg-yellow-500" };
+  if (!/[^a-zA-Z0-9]/.test(password)) return { score: 3, label: "Good", color: "bg-blue-500" };
+  return { score: 4, label: "Strong", color: "bg-green-500" };
+};
+
+export default function RegisterPage() {
+  const [fullName, setFullName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [agreeToTerms, setAgreeToTerms] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [success, setSuccess] = useState(false);
+
+  const passwordStrength = getPasswordStrength(password);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+
+    // Validation
+    if (!fullName || !email || !password || !confirmPassword) {
+      setError("Please fill in all fields");
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      setError("Passwords do not match");
+      return;
+    }
+
+    if (password.length < 8) {
+      setError("Password must be at least 8 characters long");
+      return;
+    }
+
+    if (!agreeToTerms) {
+      setError("You must agree to the Terms of Service and Privacy Policy");
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      // Placeholder for actual registration logic
+      console.log("Registration attempt:", { fullName, email, password });
+      setSuccess(true);
+      // Reset form
+      setFullName("");
+      setEmail("");
+      setPassword("");
+      setConfirmPassword("");
+      setAgreeToTerms(false);
+    } catch (err) {
+      setError("Registration failed. Please try again.");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="shift-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="medium"
+      sizing="mediumLarge"
+      background="circleGradient"
+      cardStyle="glass-depth"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple brandName="ClassHub" navItems={navItems} />
+      </div>
+
+      <div id="register" data-section="register" className="min-h-screen flex items-center justify-center py-20 px-4">
+        <div className="w-full max-w-md">
+          <div className="bg-card rounded-2xl p-8 shadow-lg border border-foreground/10">
+            {/* Success State */}
+            {success ? (
+              <div className="text-center py-8">
+                <div className="w-16 h-16 bg-green-500/10 rounded-full flex items-center justify-center mx-auto mb-4">
+                  <CheckCircle2 className="w-8 h-8 text-green-500" />
+                </div>
+                <h2 className="text-2xl font-bold text-foreground mb-2">Welcome to ClassHub!</h2>
+                <p className="text-foreground/60 mb-6">Your account has been created successfully. Please check your email to verify your address.</p>
+                <Link
+                  href="/login"
+                  className="inline-flex items-center gap-2 px-6 py-3 bg-primary-cta hover:bg-primary-cta/90 text-foreground rounded-lg font-medium transition-all"
+                >
+                  Go to Login
+                  <ArrowRight className="w-4 h-4" />
+                </Link>
+              </div>
+            ) : (
+              <>
+                {/* Header */}
+                <div className="mb-8">
+                  <h1 className="text-3xl font-bold text-foreground mb-2">Create Account</h1>
+                  <p className="text-foreground/60">Join ClassHub and start learning today</p>
+                </div>
+
+                {/* Error Message */}
+                {error && (
+                  <div className="mb-6 p-4 bg-red-500/10 border border-red-500/30 rounded-lg">
+                    <p className="text-red-500 text-sm">{error}</p>
+                  </div>
+                )}
+
+                {/* Form */}
+                <form onSubmit={handleSubmit} className="space-y-5">
+                  {/* Full Name Field */}
+                  <div>
+                    <label htmlFor="fullName" className="block text-sm font-medium text-foreground mb-2">
+                      Full Name
+                    </label>
+                    <div className="relative">
+                      <User className="absolute left-3 top-3 w-5 h-5 text-foreground/40" />
+                      <input
+                        id="fullName"
+                        type="text"
+                        value={fullName}
+                        onChange={(e) => setFullName(e.target.value)}
+                        placeholder="John Doe"
+                        className="w-full pl-10 pr-4 py-2.5 bg-background border border-foreground/10 rounded-lg text-foreground placeholder:text-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary-cta/50"
+                        disabled={isLoading}
+                      />
+                    </div>
+                  </div>
+
+                  {/* Email Field */}
+                  <div>
+                    <label htmlFor="email" className="block text-sm font-medium text-foreground mb-2">
+                      Email Address
+                    </label>
+                    <div className="relative">
+                      <Mail className="absolute left-3 top-3 w-5 h-5 text-foreground/40" />
+                      <input
+                        id="email"
+                        type="email"
+                        value={email}
+                        onChange={(e) => setEmail(e.target.value)}
+                        placeholder="you@example.com"
+                        className="w-full pl-10 pr-4 py-2.5 bg-background border border-foreground/10 rounded-lg text-foreground placeholder:text-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary-cta/50"
+                        disabled={isLoading}
+                      />
+                    </div>
+                  </div>
+
+                  {/* Password Field */}
+                  <div>
+                    <label htmlFor="password" className="block text-sm font-medium text-foreground mb-2">
+                      Password
+                    </label>
+                    <div className="relative">
+                      <Lock className="absolute left-3 top-3 w-5 h-5 text-foreground/40" />
+                      <input
+                        id="password"
+                        type="password"
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                        placeholder="••••••••"
+                        className="w-full pl-10 pr-4 py-2.5 bg-background border border-foreground/10 rounded-lg text-foreground placeholder:text-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary-cta/50"
+                        disabled={isLoading}
+                      />
+                    </div>
+                    {password && (
+                      <div className="mt-2">
+                        <div className="flex gap-1 mb-1">
+                          {[...Array(5)].map((_, i) => (
+                            <div
+                              key={i}
+                              className={`flex-1 h-1 rounded-full transition-colors ${
+                                i < passwordStrength.score ? passwordStrength.color : "bg-foreground/10"
+                              }`}
+                            />
+                          ))}
+                        </div>
+                        <span className={`text-xs font-medium ${
+                          passwordStrength.score === 4 ? "text-green-500" :
+                          passwordStrength.score === 3 ? "text-blue-500" :
+                          passwordStrength.score === 2 ? "text-yellow-500" :
+                          passwordStrength.score === 1 ? "text-orange-500" :
+                          "text-red-500"
+                        }`}>
+                          {passwordStrength.label}
+                        </span>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Confirm Password Field */}
+                  <div>
+                    <label htmlFor="confirmPassword" className="block text-sm font-medium text-foreground mb-2">
+                      Confirm Password
+                    </label>
+                    <div className="relative">
+                      <Lock className="absolute left-3 top-3 w-5 h-5 text-foreground/40" />
+                      <input
+                        id="confirmPassword"
+                        type="password"
+                        value={confirmPassword}
+                        onChange={(e) => setConfirmPassword(e.target.value)}
+                        placeholder="••••••••"
+                        className="w-full pl-10 pr-4 py-2.5 bg-background border border-foreground/10 rounded-lg text-foreground placeholder:text-foreground/40 focus:outline-none focus:ring-2 focus:ring-primary-cta/50"
+                        disabled={isLoading}
+                      />
+                    </div>
+                    {confirmPassword && password !== confirmPassword && (
+                      <p className="text-xs text-red-500 mt-1">Passwords do not match</p>
+                    )}
+                  </div>
+
+                  {/* Terms Checkbox */}
+                  <div className="flex items-start gap-3">
+                    <input
+                      id="terms"
+                      type="checkbox"
+                      checked={agreeToTerms}
+                      onChange={(e) => setAgreeToTerms(e.target.checked)}
+                      className="mt-1 w-4 h-4 rounded border-foreground/20 bg-background cursor-pointer"
+                      disabled={isLoading}
+                    />
+                    <label htmlFor="terms" className="text-sm text-foreground/60 cursor-pointer">
+                      I agree to the{" "}
+                      <Link href="#terms" className="text-primary-cta hover:text-primary-cta/80 font-medium">
+                        Terms of Service
+                      </Link>
+                      {" "}and{" "}
+                      <Link href="#privacy" className="text-primary-cta hover:text-primary-cta/80 font-medium">
+                        Privacy Policy
+                      </Link>
+                    </label>
+                  </div>
+
+                  {/* Submit Button */}
+                  <button
+                    type="submit"
+                    disabled={isLoading || !agreeToTerms}
+                    className="w-full mt-6 px-4 py-3 bg-primary-cta hover:bg-primary-cta/90 text-foreground rounded-lg font-medium transition-all duration-200 flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
+                  >
+                    {isLoading ? "Creating Account..." : "Create Account"}
+                    <ArrowRight className="w-4 h-4" />
+                  </button>
+                </form>
+
+                {/* Footer */}
+                <p className="text-center text-sm text-foreground/60 mt-6">
+                  Already have an account?{" "}
+                  <Link href="/login" className="text-primary-cta hover:text-primary-cta/80 font-medium transition-colors">
+                    Sign in
+                  </Link>
+                </p>
+              </>
+            )}
+          </div>
+
+          {/* Additional Info */}
+          <div className="text-center mt-8 text-xs text-foreground/40">
+            <p>We'll never share your personal information with anyone</p>
+          </div>
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/workshops/page.tsx

@@ -1,23 +1,37 @@
 "use client";
 
 import Link from "next/link";
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
 import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
 import FeatureHoverPattern from "@/components/sections/feature/featureHoverPattern/FeatureHoverPattern";
-import PricingCardOne from "@/components/sections/pricing/PricingCardOne";
+import TestimonialCardOne from "@/components/sections/testimonial/TestimonialCardOne";
+import FaqDouble from "@/components/sections/faq/FaqDouble";
 import FooterCard from "@/components/sections/footer/FooterCard";
-import { Calendar, Users, Lock, BarChart3, Zap, Smartphone, Sparkles, DollarSign, Mail, Twitter, Linkedin } from "lucide-react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import {
+  Sparkles,
+  Zap,
+  Award,
+  Clock,
+  Users,
+  HelpCircle,
+  Calendar,
+  MapPin,
+  Star,
+  Twitter,
+  Linkedin,
+  Mail,
+} from "lucide-react";
+
+const navItems = [
+  { name: "Home", id: "/" },
+  { name: "Workshops", id: "/workshops" },
+  { name: "Classes", id: "/classes" },
+  { name: "Pricing", id: "/pricing" },
+  { name: "Contact", id: "/contact" },
+];
 
 export default function WorkshopsPage() {
-  const navItems = [
-    { name: "Home", id: "/" },
-    { name: "Workshops", id: "/workshops" },
-    { name: "Classes", id: "/classes" },
-    { name: "Pricing", id: "/pricing" },
-    { name: "Contact", id: "/contact" },
-  ];
-
   return (
     <ThemeProvider
       defaultButtonVariant="shift-hover"
@@ -35,51 +49,49 @@ export default function WorkshopsPage() {
         <NavbarStyleApple brandName="ClassHub" navItems={navItems} />
       </div>
 
-      <div id="workshops-hero" data-section="workshops-hero">
+      <div id="hero" data-section="hero">
         <HeroBillboardScroll
-          title="Discover World-Class Workshops"
-          description="Explore our curated selection of workshops taught by certified instructors. From music and dance to technology and business, find the perfect workshop to advance your skills."
-          tag="Expert-Led Learning"
+          title="Intensive Workshops & Expert Sessions"
+          description="Join focused, hands-on workshops designed to accelerate your learning. From beginner fundamentals to advanced techniques, our workshops deliver results in condensed timeframes."
+          tag="Accelerated Learning"
           tagIcon={Sparkles}
           background={{ variant: "animated-grid" }}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkwR5I869xG7mvZJi1gLiW16GY/professional-banner-image-showing-a-dive-1773149958687-87f99901.jpg?_wi=3"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkwR5I869xG7mvZJi1gLiW16GY/professional-banner-image-showing-a-dive-1773149958687-87f99901.jpg?_wi=1"
           imageAlt="Professional workshop training environment"
           buttons={[
-            {
-              text: "Browse All Workshops",              href: "/workshops"},
-            {
-              text: "View Pricing",              href: "/pricing"},
+            { text: "Browse All Workshops", href: "/workshops" },
+            { text: "View Pricing", href: "/pricing" },
           ]}
           tagAnimation="slide-up"
           buttonAnimation="slide-up"
         />
       </div>
 
-      <div id="workshops-features" data-section="workshops-features">
+      <div id="features" data-section="features">
         <FeatureHoverPattern
-          title="Workshop Experience"
-          description="Everything you need for a seamless learning experience"
-          tag="Features"
+          title="Why Choose Our Workshops"
+          description="Structured learning experiences designed for maximum impact and retention"
+          tag="Workshop Advantages"
           tagIcon={Zap}
           features={[
+            {
+              icon: Clock,
+              title: "Intensive Format",              description: "Condensed curriculum packed into focused sessions. Learn faster with structured modules designed for practical application and immediate results."},
             {
               icon: Calendar,
-              title: "Flexible Scheduling",              description: "Workshops available at various times throughout the week. Choose what fits your schedule perfectly."},
+              title: "Flexible Scheduling",              description: "Weekend workshops, evening sessions, and full-day intensives. Choose formats that fit your lifestyle without compromising on learning quality."},
             {
               icon: Users,
-              title: "Expert Instructors",              description: "Learn from certified professionals with years of industry experience. Read instructor bios and reviews."},
+              title: "Small Group Learning",              description: "Limited class sizes ensure personalized attention. Get feedback directly from instructors and network with motivated peers in your field."},
             {
-              icon: Lock,
-              title: "Secure Enrollment",              description: "Safe booking with secure payment processing. Your data is protected with enterprise-grade encryption."},
+              icon: Star,
+              title: "Expert Facilitators",              description: "Learn from industry leaders with proven track records. Instructors bring real-world experience and current best practices to every workshop."},
             {
-              icon: BarChart3,
-              title: "Real-Time Capacity",              description: "See available spots instantly. Automatic confirmation when you book your workshop slot."},
+              icon: MapPin,
+              title: "Multiple Locations",              description: "Workshop venues in major cities plus virtual options. Attend in-person for hands-on experiences or join online for flexibility."},
             {
-              icon: Zap,
-              title: "Live Interaction",              description: "Engage directly with instructors and fellow students. Ask questions and network with peers."},
-            {
-              icon: Smartphone,
-              title: "Mobile Ready",              description: "Book and manage workshops on any device. Full mobile app for on-the-go access."},
+              icon: Award,
+              title: "Certificates Included",              description: "Receive completion certificates recognized by industry partners. Add credentials to your resume and showcase your new skills."},
           ]}
           animationType="slide-up"
           textboxLayout="default"
@@ -87,40 +99,69 @@ export default function WorkshopsPage() {
         />
       </div>
 
-      <div id="workshops-pricing" data-section="workshops-pricing">
-        <PricingCardOne
-          title="Choose Your Learning Path"
-          description="Find the perfect plan for your workshop attendance and skill development goals"
-          tag="Pricing Plans"
-          tagIcon={DollarSign}
-          plans={[
+      <div id="testimonials" data-section="testimonials">
+        <TestimonialCardOne
+          title="Workshop Success Stories"
+          description="Professionals who transformed their careers through intensive skill development"
+          tag="Student Testimonials"
+          tagIcon={Award}
+          testimonials={[
             {
-              id: "1",              badge: "Popular",              badgeIcon: Sparkles,
-              price: "$9.99/mo",              subtitle: "Perfect for casual learners",              features: [
-                "Access to all workshops",                "Book up to 5 workshops per month",                "Attendance certificates",                "Workshop recordings",                "Community forum access"],
-            },
+              id: "1",              name: "Sarah Chen",              role: "Software Engineer",              company: "Tech Startup",              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkwR5I869xG7mvZJi1gLiW16GY/portrait-photograph-of-a-professional-wo-1773149958697-b0d1653b.png?_wi=1",              imageAlt: "Sarah Chen professional portrait"},
             {
-              id: "2",              badge: "Best Value",              badgeIcon: Sparkles,
-              price: "$24.99/mo",              subtitle: "Ideal for serious students",              features: [
-                "Unlimited workshop bookings",                "Priority registration access",                "Advanced progress tracking",                "1-on-1 instructor consultations",                "Exclusive advanced workshops"],
-            },
+              id: "2",              name: "Michael Rodriguez",              role: "Creative Director",              company: "Design Agency",              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkwR5I869xG7mvZJi1gLiW16GY/portrait-photograph-of-a-professional-ma-1773149960412-c73ce951.png?_wi=1",              imageAlt: "Michael Rodriguez professional portrait"},
             {
-              id: "3",              badge: "Professional",              badgeIcon: Sparkles,
-              price: "$49.99/mo",              subtitle: "For career advancement",              features: [
-                "Everything in Best Value",                "Personalized learning plans",                "Career mentorship program",                "Certificate with distinction",                "Networking events access"],
-            },
+              id: "3",              name: "Emily Watson",              role: "Marketing Manager",              company: "E-Commerce Business",              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkwR5I869xG7mvZJi1gLiW16GY/portrait-photograph-of-a-young-professio-1773149959161-e0640722.png?_wi=1",              imageAlt: "Emily Watson professional portrait"},
             {
-              id: "4",              badge: "Instructor",              badgeIcon: Users,
-              price: "$99.99/mo",              subtitle: "Host your own workshops",              features: [
-                "Create and manage workshops",                "Student enrollment tools",                "Analytics dashboard",                "Revenue tracking",                "24/7 technical support"],
-            },
+              id: "4",              name: "David Kim",              role: "Freelance Developer",              company: "Independent",              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkwR5I869xG7mvZJi1gLiW16GY/portrait-photograph-of-a-professional-ma-1773149958765-b75148e4.png?_wi=1",              imageAlt: "David Kim professional portrait"},
+            {
+              id: "5",              name: "Jessica Thompson",              role: "Product Manager",              company: "SaaS Company",              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkwR5I869xG7mvZJi1gLiW16GY/portrait-photograph-of-a-diverse-profess-1773149958342-9fec15d1.jpg?_wi=1",              imageAlt: "Jessica Thompson professional portrait"},
+            {
+              id: "6",              name: "James Morrison",              role: "Business Consultant",              company: "Management Consulting",              rating: 5,
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkwR5I869xG7mvZJi1gLiW16GY/portrait-photograph-of-a-professional-ma-1773149959785-c28fc4c1.png?_wi=1",              imageAlt: "James Morrison professional portrait"},
           ]}
+          gridVariant="uniform-all-items-equal"
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground={false}
         />
       </div>
 
+      <div id="faq" data-section="faq">
+        <FaqDouble
+          title="Workshop FAQs"
+          description="Common questions about our workshop programs and registration process"
+          tag="Workshop Help"
+          tagIcon={HelpCircle}
+          faqs={[
+            {
+              id: "1",              title: "What's the difference between workshops and classes?",              content: "Workshops are intensive, focused sessions typically lasting 1-3 days on specific topics. Classes are ongoing courses meeting regularly over weeks or months. Choose workshops for rapid skill acquisition and classes for sustained learning."},
+            {
+              id: "2",              title: "How many students attend each workshop?",              content: "We keep workshops small, typically 8-15 participants per session. This ensures personalized attention from instructors and meaningful peer interaction. Intimate group sizes enhance learning and collaboration."},
+            {
+              id: "3",              title: "Do I need prior experience to attend?",              content: "Each workshop lists its prerequisite skill level. We offer beginner-friendly introductory workshops requiring no prior experience, plus advanced sessions for experienced practitioners. Choose the level matching your background."},
+            {
+              id: "4",              title: "What materials are provided?",              content: "All workshops include detailed handouts, resource guides, and access to video recordings. Premium participants receive digital workbooks and templates to continue learning after the workshop ends."},
+            {
+              id: "5",              title: "Can I cancel my workshop registration?",              content: "Yes! Full refunds are available if you cancel 7 days before the workshop. Cancellations within 7 days receive store credit. No refunds for no-shows, but you can transfer to another session."},
+            {
+              id: "6",              title: "Are workshops available online?",              content: "Many of our workshops are offered in both in-person and virtual formats. Virtual workshops include live instructor interaction, breakout group discussions, and access to the same materials as in-person attendees."},
+            {
+              id: "7",              title: "Do I get a certificate?",              content: "Yes! All workshop participants receive a certificate of completion. Certificates detail the workshop topic, hours completed, and instructor name. They're recognized by our partner organizations and valued by employers."},
+            {
+              id: "8",              title: "What if I miss part of the workshop?",              content: "Partial attendance is allowed for single-day workshops. Multi-day workshops require attending all sessions for certification. If you miss sessions, video recordings and catch-up materials are provided where applicable."},
+          ]}
+          faqsAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+        />
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterCard
           logoText="ClassHub"