Update src/app/courses/page.tsx
This commit is contained in:
@@ -3,19 +3,58 @@
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import PricingCardNine from "@/components/sections/pricing/PricingCardNine";
|
||||
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
||||
import FooterCard from "@/components/sections/footer/FooterCard";
|
||||
import Link from "next/link";
|
||||
import { BookOpen, Mail, Facebook, Instagram, Twitter, Linkedin } from "lucide-react";
|
||||
import { BookOpen, Facebook, Instagram, Twitter, Linkedin } from "lucide-react";
|
||||
|
||||
interface Course {
|
||||
id: string;
|
||||
title: string;
|
||||
price: string;
|
||||
period: string;
|
||||
description: string;
|
||||
imageSrc: string;
|
||||
imageAlt: string;
|
||||
button: { text: string; href: string };
|
||||
features: string[];
|
||||
}
|
||||
|
||||
const COURSES: Course[] = [
|
||||
{
|
||||
id: "fundamentals", title: "Chess Fundamentals", price: "$29", period: "/lifetime", description: "Learn the basics of chess including piece movements, board setup, and essential tactics.", imageSrc: "https://images.unsplash.com/photo-1549887534-7eeb59b1b2b5?w=800&q=80", imageAlt: "Chess Fundamentals", button: { text: "Enroll Now", href: "#enroll" },
|
||||
features: [
|
||||
"Piece movements and rules", "Board setup and notation", "Opening principles", "Basic tactics (forks, pins, skewers)", "Certificate of completion"],
|
||||
},
|
||||
{
|
||||
id: "intermediate", title: "Intermediate Strategy", price: "$59", period: "/lifetime", description: "Develop your strategic thinking and learn advanced tactical patterns used by professionals.", imageSrc: "https://images.unsplash.com/photo-1572365992253-3cb3e56dd362?w=800&q=80", imageAlt: "Intermediate Strategy", button: { text: "Enroll Now", href: "#enroll" },
|
||||
features: [
|
||||
"Advanced tactical patterns", "Position evaluation techniques", "Opening repertoire building", "Endgame fundamentals", "Analysis of master games"],
|
||||
},
|
||||
{
|
||||
id: "advanced", title: "Advanced Mastery", price: "$99", period: "/lifetime", description: "Master advanced techniques and study games from grandmasters to elevate your play.", imageSrc: "https://images.unsplash.com/photo-1606768666293-e7e99db91352?w=800&q=80", imageAlt: "Advanced Mastery", button: { text: "Enroll Now", href: "#enroll" },
|
||||
features: [
|
||||
"Complex tactical scenarios", "Deep positional understanding", "Grandmaster game analysis", "Weekly live coaching sessions", "Personal instructor feedback"],
|
||||
},
|
||||
{
|
||||
id: "endgame", title: "Endgame Mastery", price: "$49", period: "/lifetime", description: "Master the critical final phase of chess with comprehensive endgame techniques.", imageSrc: "https://images.unsplash.com/photo-1610701596007-11502861dcfa?w=800&q=80", imageAlt: "Endgame Mastery", button: { text: "Enroll Now", href: "#enroll" },
|
||||
features: [
|
||||
"King and pawn endgames", "Rook endgame techniques", "Complex endgame positions", "Converting advantages", "Practice problems"],
|
||||
},
|
||||
{
|
||||
id: "openings", title: "Opening Repertoire", price: "$49", period: "/lifetime", description: "Build a solid opening repertoire and understand the ideas behind major openings.", imageSrc: "https://images.unsplash.com/photo-1611003228941-98852ba62227?w=800&q=80", imageAlt: "Opening Repertoire", button: { text: "Enroll Now", href: "#enroll" },
|
||||
features: [
|
||||
"Italian Game and Ruy Lopez", "French and Caro-Kann Defense", "Sicilian Defense variations", "Flank openings", "Opening principles"],
|
||||
},
|
||||
{
|
||||
id: "tactics", title: "Tactical Training", price: "$39", period: "/lifetime", description: "Sharpen your tactical vision with hundreds of puzzles and positions.", imageSrc: "https://images.unsplash.com/photo-1516975080664-ed2fc6a32937?w=800&q=80", imageAlt: "Tactical Training", button: { text: "Enroll Now", href: "#enroll" },
|
||||
features: [
|
||||
"1000+ tactical puzzles", "Pattern recognition training", "Combination themes", "Puzzle difficulty progression", "Performance tracking"],
|
||||
},
|
||||
];
|
||||
|
||||
export default function CoursesPage() {
|
||||
const navItems = [
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Shop", id: "/shop" },
|
||||
{ name: "Courses", id: "/courses" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
];
|
||||
// Split courses into two groups for display
|
||||
const firstThree = COURSES.slice(0, 3);
|
||||
const nextThree = COURSES.slice(3, 6);
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
@@ -31,88 +70,91 @@ export default function CoursesPage() {
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
{/* Navbar */}
|
||||
<div id="nav" data-section="nav" className="sticky top-0 z-50">
|
||||
<div className="sticky top-0 z-50">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Shop", id: "/shop" },
|
||||
{ name: "Play", id: "/play" },
|
||||
{ name: "Courses", id: "/courses" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
{ name: "Rules", id: "/rules" },
|
||||
]}
|
||||
brandName="Soft & Learn"
|
||||
bottomLeftText="Soft & Learn Community"
|
||||
bottomRightText="hello@softlearn.com"
|
||||
brandName="Chess Academy"
|
||||
bottomLeftText="Chess Academy"
|
||||
bottomRightText="learn@chessacademy.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* All Courses Section */}
|
||||
<div id="all-courses" data-section="all-courses" className="mx-auto px-4 md:px-6 py-20">
|
||||
<PricingCardNine
|
||||
title="Our Complete Course Catalog"
|
||||
description="Learn new skills at your own pace with our expertly designed courses for all levels. From beginners to advanced professionals, we have something for everyone."
|
||||
tag="Course Catalog"
|
||||
tagIcon={BookOpen}
|
||||
plans={[
|
||||
{
|
||||
id: "beginner", title: "Creative Basics", price: "$49", period: "/lifetime", imageSrc: "http://img.b2bpic.net/free-photo/learning-education-ideas-insight-intelligence-study-concept_53876-120116.jpg", imageAlt: "Creative Basics course", button: { text: "Enroll Now", href: "/courses" },
|
||||
features: [
|
||||
"8 video lessons", "Downloadable resources", "Community access", "Certificate included"],
|
||||
},
|
||||
{
|
||||
id: "intermediate", title: "Advanced Techniques", price: "$99", period: "/lifetime", imageSrc: "http://img.b2bpic.net/free-photo/group-friends-planning-trip-while-having-breakfast_23-2148952415.jpg", imageAlt: "Advanced Techniques course", button: { text: "Enroll Now", href: "/courses" },
|
||||
features: [
|
||||
"20 video lessons", "Live Q&A sessions", "Project feedback", "Professional certificate"],
|
||||
},
|
||||
{
|
||||
id: "professional", title: "Mastery Program", price: "$149", period: "/lifetime", imageSrc: "http://img.b2bpic.net/free-photo/rear-view-young-college-student-paying-attention-listening-her-online-teacher-laptop-home_662251-2487.jpg", imageAlt: "Mastery Program course", button: { text: "Enroll Now", href: "/courses" },
|
||||
features: [
|
||||
"40 video lessons", "1-on-1 mentoring", "Advanced projects", "Job placement support"],
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
{/* Courses Section */}
|
||||
<div className="py-20 px-4 md:px-6">
|
||||
<div className="mx-auto max-w-6xl">
|
||||
<div className="mb-16 text-center">
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-4">Chess Courses</h1>
|
||||
<p className="text-lg text-foreground/80 max-w-2xl mx-auto">
|
||||
Learn from beginner to grandmaster level with our comprehensive course catalog
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Courses CTA Section */}
|
||||
<div id="courses-cta" data-section="courses-cta" className="mx-auto px-4 md:px-6 py-20">
|
||||
<ContactCTA
|
||||
tag="Start Learning Today"
|
||||
tagIcon={Mail}
|
||||
title="Transform Your Skills with Soft & Learn Courses"
|
||||
description="Our comprehensive courses are designed to help you master new skills, advance your career, and achieve your personal growth goals. Enroll now and join thousands of satisfied learners."
|
||||
buttons={[
|
||||
{ text: "Explore More Courses", href: "/courses" },
|
||||
{ text: "Shop Products", href: "/shop" },
|
||||
]}
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
{/* First Row of Courses */}
|
||||
<div className="mb-16">
|
||||
<PricingCardNine
|
||||
plans={firstThree}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title=""
|
||||
description=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Second Row of Courses */}
|
||||
<div className="mb-16">
|
||||
<PricingCardNine
|
||||
plans={nextThree}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title=""
|
||||
description=""
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* CTA Section */}
|
||||
<div className="bg-card rounded-lg p-8 md:p-12 text-center">
|
||||
<h2 className="text-3xl font-bold mb-4">Ready to Master Chess?</h2>
|
||||
<p className="text-lg text-foreground/80 mb-6 max-w-2xl mx-auto">
|
||||
Choose the course that fits your level and start your chess journey today.
|
||||
</p>
|
||||
<a
|
||||
href="#enroll"
|
||||
className="inline-block px-8 py-3 bg-primary-cta text-foreground rounded-lg hover:opacity-90 transition-opacity font-medium"
|
||||
>
|
||||
Browse All Courses
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div id="footer" data-section="footer" className="mx-auto px-4 md:px-6">
|
||||
<div className="mx-auto px-4 md:px-6">
|
||||
<FooterCard
|
||||
logoText="Soft & Learn"
|
||||
copyrightText="© 2025 Soft & Learn. All rights reserved."
|
||||
logoText="Chess Academy"
|
||||
copyrightText="© 2025 Chess Academy. All rights reserved."
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Facebook,
|
||||
href: "https://facebook.com/softlearn", ariaLabel: "Facebook"},
|
||||
href: "https://facebook.com/chessacademy", ariaLabel: "Facebook"},
|
||||
{
|
||||
icon: Instagram,
|
||||
href: "https://instagram.com/softlearn", ariaLabel: "Instagram"},
|
||||
href: "https://instagram.com/chessacademy", ariaLabel: "Instagram"},
|
||||
{
|
||||
icon: Twitter,
|
||||
href: "https://twitter.com/softlearn", ariaLabel: "Twitter"},
|
||||
href: "https://twitter.com/chessacademy", ariaLabel: "Twitter"},
|
||||
{
|
||||
icon: Linkedin,
|
||||
href: "https://linkedin.com/company/softlearn", ariaLabel: "LinkedIn"},
|
||||
href: "https://linkedin.com/company/chessacademy", ariaLabel: "LinkedIn"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user