Update src/app/classes/page.tsx

This commit is contained in:
2026-03-10 15:09:43 +00:00
parent 94f3db1d04
commit 5f8cf705bf

View File

@@ -1,35 +1,40 @@
"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 PricingCardOne from "@/components/sections/pricing/PricingCardOne";
import TeamCardFive from "@/components/sections/team/TeamCardFive";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import FooterCard from "@/components/sections/footer/FooterCard";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import {
Calendar,
Sparkles,
Zap,
Award,
DollarSign,
Users,
HelpCircle,
Calendar,
Lock,
BarChart3,
Zap,
Smartphone,
Award,
Sparkles,
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 +54,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 for Continuous Learning"
description="Structured, semester-based classes that meet regularly to help you master subjects deeply. From beginner fundamentals to advanced specializations, find the perfect class for your learning journey."
tag="Class Catalog"
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 training classroom environment"
buttons={[
{
text: "Explore Classes", href: "/classes"},
{
text: "View Pricing", href: "/pricing"},
{ text: "Browse Classes", href: "#features" },
{ text: "View Pricing", href: "/pricing" },
]}
tagAnimation="slide-up"
buttonAnimation="slide-up"
@@ -69,37 +72,31 @@ export default function ClassesPage() {
<div id="features" data-section="features">
<FeatureHoverPattern
title="Class Features"
description="Everything you need for successful ongoing learning with structured progression"
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."},
title: "Flexible Scheduling", description: "Classes meet at consistent times throughout the semester. Choose from morning, afternoon, or evening sessions. Weekday or weekend options available."},
{
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."},
{
icon: Lock,
title: "Secure Authentication", description:
"Enterprise-grade JWT authentication with role-based access control. Separate secure dashboards for students, teachers, and administrators."},
title: "Community Learning", description: "Build relationships with fellow students and instructors. Collaborative projects and group discussions enhance your learning experience."},
{
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."},
title: "Progress Tracking", description: "Monitor your advancement with regular assessments and feedback. Personalized learning paths adapted to your pace and goals."},
{
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: Award,
title: "Structured Curriculum", description: "Follow a proven learning progression from fundamentals to advanced topics. Each class builds on previous concepts systematically."},
{
icon: Lock,
title: "Support Resources", description: "Access office hours, tutoring sessions, and peer study groups. Comprehensive support materials and discussion forums."},
{
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."},
title: "Multi-Format Options", description: "Choose between in-person, hybrid, or fully online classes. Switch formats as needed to accommodate your schedule."},
]}
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 +104,122 @@ export default function ClassesPage() {
<div id="testimonials" data-section="testimonials">
<TestimonialCardOne
title="Class Success Stories"
description="Students sharing their experiences in our ongoing classes and their learning achievements"
tag="Student Achievements"
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="pricing" data-section="pricing">
<PricingCardOne
title="Class Pricing Plans"
description="Affordable pricing for ongoing classes. All plans include instructor-led sessions, course materials, and community access."
tag="Class Subscriptions"
tagIcon={DollarSign}
plans={[
{
id: "1", badge: "Starter", badgeIcon: Sparkles,
price: "$9.99/mo", subtitle: "Perfect for casual learners", features: [
"Access to all classes", "Book up to 4 classes per month", "Student community forum", "Digital materials", "Basic progress tracking"],
},
{
id: "2", badge: "Popular", badgeIcon: Zap,
price: "$24.99/mo", subtitle: "Ideal for dedicated students", features: [
"Unlimited class access", "Priority instructor support", "Office hours & tutoring", "Advanced analytics", "Certificates of completion", "Peer study groups"],
},
{
id: "3", badge: "Professional", badgeIcon: Award,
price: "$49.99/mo", subtitle: "For career advancement", features: [
"Everything in Popular", "1-on-1 mentorship", "Custom learning pathways", "Career counseling", "Exclusive masterclasses", "Priority course registration"],
},
{
id: "4", badge: "Team License", badgeIcon: Users,
price: "$299/month", subtitle: "For organizations & groups", features: [
"Up to 10 team members", "Team analytics dashboard", "Group discounts", "Custom class planning", "Admin management tools", "Dedicated support"],
},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="team" data-section="team">
<TeamCardFive
title="Class Instructors"
description="Experienced educators committed to student success and ongoing learning support"
tag="Teaching Excellence"
tagIcon={Users}
team={[
{
id: "1", name: "Margaret Johnson", role: "Piano Instructor", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkwR5I869xG7mvZJi1gLiW16GY/professional-portrait-of-a-piano-instruc-1773149958833-7e1afaf0.png?_wi=1", imageAlt: "Margaret Johnson piano instructor"},
{
id: "2", name: "Jessica Lee", role: "Dance Instructor", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkwR5I869xG7mvZJi1gLiW16GY/professional-portrait-of-a-dance-instruc-1773149955255-d32fb4cc.jpg?_wi=1", imageAlt: "Jessica Lee dance instructor"},
{
id: "3", name: "Marcus Williams", role: "Yoga Instructor", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkwR5I869xG7mvZJi1gLiW16GY/professional-portrait-of-a-yoga-instruct-1773149958540-4c8fc93c.jpg?_wi=1", imageAlt: "Marcus Williams yoga instructor"},
{
id: "4", name: "Sofia Rossi", role: "Art Instructor", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkwR5I869xG7mvZJi1gLiW16GY/professional-portrait-of-an-art-instruct-1773149958976-9ea3327d.png?_wi=1", imageAlt: "Sofia Rossi art instructor"},
{
id: "5", name: "Ahmed Hassan", role: "Language Instructor", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkwR5I869xG7mvZJi1gLiW16GY/professional-portrait-of-a-language-inst-1773149958360-43c50b1b.jpg?_wi=1", imageAlt: "Ahmed Hassan language instructor"},
{
id: "6", name: "Lisa Anderson", role: "Fitness Instructor", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AkwR5I869xG7mvZJi1gLiW16GY/professional-portrait-of-a-fitness-instr-1773149958873-1119546c.png?_wi=1", imageAlt: "Lisa Anderson fitness instructor"},
]}
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
title="Classes FAQ"
description="Frequently asked questions about class enrollment, schedules, and the ongoing learning experience"
tag="Help & Support"
tagIcon={HelpCircle}
faqs={[
{
id: "1", title: "What is the difference between classes and workshops?", content: "Classes are ongoing, semester-based courses that meet regularly (weekly or bi-weekly) for deeper learning over time. Workshops are intensive, short-term learning experiences. Classes are better for comprehensive understanding, while workshops focus on rapid skill acquisition."},
{
id: "2", title: "How long do classes typically run?", content: "Most classes run for one semester (12-16 weeks) meeting once or twice per week. Some beginner classes are 8 weeks, and advanced specializations may span multiple semesters. You can see the duration in each class listing."},
{
id: "3", title: "Can I join a class mid-semester?", content: "It depends on the class. Some classes allow late enrollment with catch-up materials provided. Others require starting from the beginning. Check with individual class instructors about their enrollment policies."},
{
id: "4", title: "What happens if I miss a class session?", content: "Most classes provide recorded sessions and materials for missed classes. You can catch up at your own pace. However, active participation is important for group discussion and collaborative projects."},
{
id: "5", title: "Do I need prerequisites for advanced classes?", content: "Yes, advanced classes typically require completion of foundational courses or equivalent experience. We offer beginner, intermediate, and advanced levels. Check prerequisites in the class description."},
{
id: "6", title: "How are grades or progress measured?", content: "Progress is tracked through assignments, projects, assessments, and participation. You receive regular feedback from instructors. Upon completion, you can earn a certificate if you meet course requirements."},
{
id: "7", title: "Can I change my enrollment or drop a class?", content: "Yes, you can drop within the first 2 weeks for a full refund. After that, you can audit the class or request a transfer to another session. Changes must be made through your student dashboard."},
{
id: "8", title: "What support is available during the class?", content: "Instructors hold weekly office hours, and tutoring support is available. You also have access to peer study groups, forums, and community resources. Professional and premium tier subscribers get priority support."},
]}
faqsAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false}
/>