Merge version_3 into main

Merge version_3 into main

src/app/courses/page.tsx

@@ -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&_wi=2",    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&_wi=2",    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&_wi=2",    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&_wi=2",    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>
   );
-}
+}

src/app/layout.tsx

@@ -1,66 +1,17 @@
 import type { Metadata } from "next";
-import { Halant } from "next/font/google";
-import { Inter } from "next/font/google";
 import "./globals.css";
-import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";
-
-const halant = Halant({
-  variable: "--font-halant",
-  subsets: ["latin"],
-  weight: ["300", "400", "500", "600", "700"],
-});
-
-const inter = Inter({
-  variable: "--font-inter",
-  subsets: ["latin"],
-});
 
 export const metadata: Metadata = {
-  title: "Soft & Learn | Shop Premium Products & Online Courses",
-  description: "Shop soft, premium products and enroll in inspiring online courses at Soft & Learn. Learn new skills and enjoy quality products in one place.",
-  keywords: "online courses, e-commerce, learning platform, soft toys, educational products, skill development",
-  metadataBase: new URL("https://softlearn.com"),
-  alternates: {
-    canonical: "https://softlearn.com",
-  },
-  openGraph: {
-    title: "Soft & Learn | Shop & Learn Together",
-    description: "Discover premium soft products and engaging online courses designed for growth and comfort.",
-    url: "https://softlearn.com",
-    siteName: "Soft & Learn",
-    type: "website",
-    images: [
-      {
-        url: "http://img.b2bpic.net/free-photo/beautiful-dreamy-girl-smiling-holding-tablet-hands-looking-upper-left-corner-logo-with-tho_1258-119767.jpg",
-        alt: "Soft & Learn - Shop and Learn",
-      },
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",
-    title: "Soft & Learn | Premium Products & Courses",
-    description: "Shop and learn with Soft & Learn - your one-stop destination for soft products and inspiring courses.",
-    images: [
-      "http://img.b2bpic.net/free-photo/beautiful-dreamy-girl-smiling-holding-tablet-hands-looking-upper-left-corner-logo-with-tho_1258-119767.jpg",
-    ],
-  },
-};
+  title: "Learn, Play, Master Chess",  description: "Learn, Play, Master Chess - Interactive chess learning platform with courses and online gameplay"};
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
-    <html lang="en" suppressHydrationWarning>
-      <ServiceWrapper>
-        <body
-          className={`${halant.variable} ${inter.variable} antialiased`}
-        >
-          <Tag />
-          {children}
-        
+    <html lang="en">
+      <body>{children}
         <script
           dangerouslySetInnerHTML={{
             __html: `
@@ -1428,7 +1379,6 @@ export default function RootLayout({
           }}
         />
       </body>
-      </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -3,23 +3,14 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
 import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
-import ProductCardFour from "@/components/sections/product/ProductCardFour";
 import PricingCardNine from "@/components/sections/pricing/PricingCardNine";
-import TestimonialCardTwelve from "@/components/sections/testimonial/TestimonialCardTwelve";
+import FaqBase from "@/components/sections/faq/FaqBase";
 import ContactCTA from "@/components/sections/contact/ContactCTA";
 import FooterCard from "@/components/sections/footer/FooterCard";
 import Link from "next/link";
-import { Sparkles, Package, BookOpen, Heart, Mail, Facebook, Instagram, Twitter, Linkedin } from "lucide-react";
+import { Sparkles, BookOpen, Gamepad2, Mail, Facebook, Instagram, Twitter, Linkedin } from "lucide-react";
 
 export default function HomePage() {
-  const navItems = [
-    { name: "Home", id: "/" },
-    { name: "Shop", id: "/shop" },
-    { name: "Courses", id: "/courses" },
-    { name: "About", id: "/about" },
-    { name: "Contact", id: "/contact" },
-  ];
-
   return (
     <ThemeProvider
       defaultButtonVariant="elastic-effect"
@@ -38,88 +29,63 @@ export default function HomePage() {
         <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 Community"
+          bottomRightText="learn@chessacademy.com"
         />
       </div>
 
       {/* Hero Section */}
       <div id="hero" data-section="hero" className="mx-auto px-4 md:px-6">
         <HeroSplitKpi
-          title="Welcome to Soft & Learn"
-          description="Discover a world where learning meets comfort. Shop premium soft products and enroll in courses designed to inspire growth and creativity."
+          title="Learn, Play, Master Chess"
+          description="Master the game of chess with interactive learning, competitive gameplay, and expert-led courses. From beginner to grandmaster, we guide your journey."
           background={{ variant: "glowing-orb" }}
           kpis={[
-            { value: "1000+", label: "Happy Customers" },
-            { value: "50+", label: "Courses Available" },
-            { value: "4.8★", label: "Average Rating" },
+            { value: "10,000+", label: "Active Players" },
+            { value: "150+", label: "Courses" },
+            { value: "4.9★", label: "Rating" },
           ]}
           enableKpiAnimation={true}
-          tag="Learn & Shop Together"
+          tag="Master the Royal Game"
           tagIcon={Sparkles}
           buttons={[
-            { text: "Shop Now", href: "/shop" },
-            { text: "Explore Courses", href: "/courses" },
+            { text: "Play Now", href: "/play" },
+            { text: "Start Free Trial", href: "/courses" },
           ]}
-          imageSrc="http://img.b2bpic.net/free-photo/beautiful-dreamy-girl-smiling-holding-tablet-hands-looking-upper-left-corner-logo-with-tho_1258-119767.jpg"
-          imageAlt="Learning and soft products"
+          imageSrc="https://images.unsplash.com/photo-1611003228941-98852ba62227?w=800&q=80&_wi=1"
+          imageAlt="Chess board"
           mediaAnimation="blur-reveal"
           imagePosition="right"
         />
       </div>
 
-      {/* Featured Products Section */}
-      <div id="featured-products" data-section="featured-products" className="mx-auto px-4 md:px-6 py-20">
-        <ProductCardFour
-          title="Featured Products"
-          description="Discover our curated collection of soft, premium products designed for comfort and quality."
-          tag="Shop Collection"
-          tagIcon={Package}
-          products={[
-            {
-              id: "1",              name: "Cozy Cloud Plush Toy",              price: "$29.99",              variant: "Soft Grey  5 Colors",              imageSrc: "http://img.b2bpic.net/free-photo/cute-little-girl-sleeps-sweetly-white-cozy-bed-with-soft-bear-toy-concept-children-s-rest-sleep_169016-4514.jpg",              imageAlt: "Cozy Cloud Plush Toy in soft grey"},
-            {
-              id: "2",              name: "Comfort Wear T-Shirt",              price: "$34.99",              variant: "Natural White  3 Sizes",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-little-girl-with-copy-space_23-2148329852.jpg",              imageAlt: "Comfort Wear T-Shirt in natural white"},
-            {
-              id: "3",              name: "Learning Activity Set",              price: "$44.99",              variant: "Pastel Rainbow  Educational",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-boy-touching-digital-tablet-screen-white-desk_23-2148039919.jpg",              imageAlt: "Learning Activity Set in pastel colors"},
-          ]}
-          gridVariant="three-columns-all-equal-width"
-          carouselMode="buttons"
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          buttons={[{ text: "View All Products", href: "/shop" }]}
-        />
-      </div>
-
       {/* Featured Courses Section */}
       <div id="featured-courses" data-section="featured-courses" className="mx-auto px-4 md:px-6 py-20">
         <PricingCardNine
-          title="Featured Courses"
-          description="Learn new skills at your own pace with our expertly designed courses for all levels."
+          title="Chess Courses"
+          description="Learn chess from beginner fundamentals to advanced strategies with our comprehensive course catalog."
           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" },
+              id: "beginner",              title: "Beginner Fundamentals",              price: "$29",              period: "/lifetime",              imageSrc: "https://images.unsplash.com/photo-1549887534-7eeb59b1b2b5?w=800&q=80&_wi=1",              imageAlt: "Beginner Fundamentals",              button: { text: "Enroll Now", href: "/courses" },
               features: [
-                "8 video lessons",                "Downloadable resources",                "Community access",                "Certificate included"],
+                "Chess basics and rules",                "Opening principles",                "Piece movements",                "Simple tactics"],
             },
             {
-              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" },
+              id: "intermediate",              title: "Intermediate Strategy",              price: "$59",              period: "/lifetime",              imageSrc: "https://images.unsplash.com/photo-1572365992253-3cb3e56dd362?w=800&q=80&_wi=1",              imageAlt: "Intermediate Strategy",              button: { text: "Enroll Now", href: "/courses" },
               features: [
-                "20 video lessons",                "Live Q&A sessions",                "Project feedback",                "Professional certificate"],
+                "Tactical patterns",                "Position evaluation",                "Opening repertoire",                "Endgame basics"],
             },
             {
-              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" },
+              id: "advanced",              title: "Advanced Mastery",              price: "$99",              period: "/lifetime",              imageSrc: "https://images.unsplash.com/photo-1606768666293-e7e99db91352?w=800&q=80&_wi=1",              imageAlt: "Advanced Mastery",              button: { text: "Enroll Now", href: "/courses" },
               features: [
-                "40 video lessons",                "1-on-1 mentoring",                "Advanced projects",                "Job placement support"],
+                "Advanced tactics",                "Deep positional play",                "Grandmaster games",                "Personal coaching"],
             },
           ]}
           animationType="slide-up"
@@ -128,41 +94,42 @@ export default function HomePage() {
         />
       </div>
 
-      {/* Testimonials Section */}
-      <div id="testimonials" data-section="testimonials" className="mx-auto px-4 md:px-6 py-20">
-        <TestimonialCardTwelve
-          testimonials={[
-            {
-              id: "1",              name: "Sarah Johnson",              imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",              imageAlt: "Sarah Johnson"},
-            {
-              id: "2",              name: "Michael Chen",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1",              imageAlt: "Michael Chen"},
-            {
-              id: "3",              name: "Emma Rodriguez",              imageSrc: "http://img.b2bpic.net/free-photo/young-female-green-jacket-shorts-looking-cheerful-front-view_176474-37515.jpg",              imageAlt: "Emma Rodriguez"},
-            {
-              id: "4",              name: "David Kim",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport_107420-85035.jpg",              imageAlt: "David Kim"},
-            {
-              id: "5",              name: "Lisa Anderson",              imageSrc: "http://img.b2bpic.net/free-photo/head-shot-happy-beautiful-young-woman-posing-indoors-looking-camera-smiling_74855-10218.jpg",              imageAlt: "Lisa Anderson"},
-            {
-              id: "6",              name: "James Wilson",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2",              imageAlt: "James Wilson"},
-          ]}
-          cardTitle="Join 10,000+ Learners and Shoppers Who Trust Soft & Learn"
-          cardTag="See What They Say"
-          cardTagIcon={Heart}
-          cardAnimation="blur-reveal"
+      {/* FAQ Section */}
+      <div id="faq" data-section="faq" className="mx-auto px-4 md:px-6 py-20">
+        <FaqBase
+          title="Frequently Asked Questions"
+          description="Find answers to common questions about our chess learning platform and courses."
+          tag="Help & Support"
+          textboxLayout="default"
           useInvertedBackground={false}
+          faqsAnimation="slide-up"
+          faqs={[
+            {
+              id: "1",              title: "How do I get started with chess?",              content: "Start with our Beginner Fundamentals course which covers all the basics including piece movements, board setup, and basic tactics. Our interactive tutorials make learning fun and engaging."},
+            {
+              id: "2",              title: "Can I play against AI opponents?",              content: "Yes! On our Play page, you can challenge AI opponents at various difficulty levels from beginner to expert. This is a great way to practice what you learn in courses."},
+            {
+              id: "3",              title: "Are the courses suitable for children?",              content: "Absolutely! Our courses are designed for all ages. We have special beginner tracks tailored for children with age-appropriate explanations and engaging visuals."},
+            {
+              id: "4",              title: "What payment methods do you accept?",              content: "We accept all major credit cards, PayPal, and various digital payment methods. All transactions are secure and encrypted for your protection."},
+            {
+              id: "5",              title: "Can I get a refund if I'm not satisfied?",              content: "Yes! We offer a 30-day money-back guarantee on all courses. If you're not satisfied, simply contact our support team for a full refund."},
+            {
+              id: "6",              title: "Do you offer live coaching sessions?",              content: "Yes! Advanced Mastery course members get access to weekly live coaching sessions with experienced chess instructors where you can ask questions and get personalized advice."},
+          ]}
         />
       </div>
 
       {/* Newsletter CTA Section */}
       <div id="newsletter" data-section="newsletter" className="mx-auto px-4 md:px-6 py-20">
         <ContactCTA
-          tag="Stay Updated"
+          tag="Stay Connected"
           tagIcon={Mail}
-          title="Never Miss Out on New Products & Courses"
-          description="Subscribe to our newsletter and get exclusive access to new launches, special offers, and learning tips delivered to your inbox."
+          title="Join 10,000+ Chess Enthusiasts"
+          description="Subscribe to our newsletter for exclusive tips, tournament announcements, and new course releases delivered to your inbox."
           buttons={[
-            { text: "Subscribe Now", href: "#newsletter-form" },
-            { text: "Learn More", href: "/about" },
+            { text: "Subscribe Now", href: "#newsletter" },
+            { text: "Learn More", href: "/rules" },
           ]}
           background={{ variant: "plain" }}
           useInvertedBackground={false}
@@ -172,24 +139,24 @@ export default function HomePage() {
       {/* Footer */}
       <div id="footer" data-section="footer" 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>
   );
-}
+}

src/app/play/page.tsx

@@ -0,0 +1,203 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import { useState, useCallback } from "react";
+import { Gamepad2, RotateCcw, BookOpen } from "lucide-react";
+
+type PieceType = "p" | "n" | "b" | "r" | "q" | "k" | "P" | "N" | "B" | "R" | "Q" | "K";
+type Square = PieceType | null;
+
+const INITIAL_BOARD: Square[] = [
+  "r", "n", "b", "q", "k", "b", "n", "r",  "p", "p", "p", "p", "p", "p", "p", "p",  null, null, null, null, null, null, null, null,
+  null, null, null, null, null, null, null, null,
+  null, null, null, null, null, null, null, null,
+  null, null, null, null, null, null, null, null,
+  "P", "P", "P", "P", "P", "P", "P", "P",  "R", "N", "B", "Q", "K", "B", "N", "R"];
+
+const getPieceName = (piece: PieceType): string => {
+  const names: Record<PieceType, string> = {
+    p: "♟", P: "♙",    n: "♞", N: "♘",    b: "♝", B: "♗",    r: "♜", R: "♖",    q: "♛", Q: "♕",    k: "♚", K: "♔"};
+  return names[piece];
+};
+
+const isWhitePiece = (piece: PieceType | null): boolean => {
+  return piece ? piece === piece.toUpperCase() : false;
+};
+
+export default function PlayPage() {
+  const [board, setBoard] = useState<Square[]>(INITIAL_BOARD);
+  const [selectedSquare, setSelectedSquare] = useState<number | null>(null);
+  const [isWhiteTurn, setIsWhiteTurn] = useState(true);
+  const [moveHistory, setMoveHistory] = useState<string[]>([]);
+  const [useAI, setUseAI] = useState(false);
+
+  const handleSquareClick = (index: number) => {
+    const piece = board[index];
+    const selected = selectedSquare;
+
+    if (selected === null) {
+      if (piece && isWhitePiece(piece) === isWhiteTurn) {
+        setSelectedSquare(index);
+      }
+    } else {
+      const selectedPiece = board[selected];
+      if (selectedPiece && isWhitePiece(selectedPiece) === isWhiteTurn) {
+        if (index === selected) {
+          setSelectedSquare(null);
+        } else if (piece && isWhitePiece(piece) === isWhiteTurn) {
+          setSelectedSquare(index);
+        } else {
+          makeMove(selected, index);
+        }
+      }
+    }
+  };
+
+  const makeMove = (from: number, to: number) => {
+    const newBoard = [...board];
+    const piece = newBoard[from];
+    newBoard[to] = piece;
+    newBoard[from] = null;
+    setBoard(newBoard);
+    
+    const fromSquare = String.fromCharCode(97 + (from % 8)) + (8 - Math.floor(from / 8));
+    const toSquare = String.fromCharCode(97 + (to % 8)) + (8 - Math.floor(to / 8));
+    setMoveHistory([...moveHistory, `${fromSquare}${toSquare}`]);
+    
+    setSelectedSquare(null);
+    setIsWhiteTurn(!isWhiteTurn);
+  };
+
+  const resetGame = () => {
+    setBoard(INITIAL_BOARD);
+    setSelectedSquare(null);
+    setIsWhiteTurn(true);
+    setMoveHistory([]);
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="background-highlight"
+      borderRadius="soft"
+      contentWidth="small"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-depth"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="semibold"
+    >
+      {/* Navbar */}
+      <div className="sticky top-0 z-50">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Play", id: "/play" },
+            { name: "Courses", id: "/courses" },
+            { name: "Rules", id: "/rules" },
+          ]}
+          brandName="Chess Academy"
+          bottomLeftText="Chess Academy"
+          bottomRightText="learn@chessacademy.com"
+        />
+      </div>
+
+      {/* Play Section */}
+      <div className="min-h-screen py-20 px-4 md:px-6">
+        <div className="mx-auto max-w-4xl">
+          <div className="mb-8">
+            <h1 className="text-4xl md:text-5xl font-bold mb-4">Play Chess</h1>
+            <p className="text-lg text-foreground/80">Interactive 8x8 chessboard with drag and drop pieces</p>
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            {/* Chessboard */}
+            <div className="lg:col-span-2">
+              <div className="bg-card rounded-lg p-6 shadow-lg">
+                <div className="grid grid-cols-8 gap-0 border-4 border-foreground/20 bg-foreground/5">
+                  {board.map((piece, index) => {
+                    const row = Math.floor(index / 8);
+                    const col = index % 8;
+                    const isLightSquare = (row + col) % 2 === 0;
+                    const isSelected = selectedSquare === index;
+
+                    return (
+                      <div
+                        key={index}
+                        onClick={() => handleSquareClick(index)}
+                        className={`w-16 h-16 flex items-center justify-center text-4xl cursor-pointer transition-all ${
+                          isLightSquare ? "bg-amber-100" : "bg-amber-700"
+                        } ${
+                          isSelected ? "ring-4 ring-primary-cta" : ""
+                        } hover:opacity-80`}
+                      >
+                        {piece && <span>{getPieceName(piece)}</span>}
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+
+              {/* Game Info */}
+              <div className="mt-6 bg-card rounded-lg p-6">
+                <div className="flex items-center justify-between mb-4">
+                  <div>
+                    <p className="text-sm text-foreground/70">Current Turn</p>
+                    <p className="text-xl font-bold">{isWhiteTurn ? "White" : "Black"}</p>
+                  </div>
+                  <button
+                    onClick={resetGame}
+                    className="flex items-center gap-2 px-4 py-2 bg-primary-cta text-foreground rounded-lg hover:opacity-90 transition-opacity"
+                  >
+                    <RotateCcw size={18} />
+                    Reset
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            {/* Sidebar */}
+            <div className="lg:col-span-1">
+              {/* AI Option */}
+              <div className="bg-card rounded-lg p-6 mb-6">
+                <label className="flex items-center gap-3 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={useAI}
+                    onChange={(e) => setUseAI(e.target.checked)}
+                    className="w-4 h-4"
+                  />
+                  <span className="font-medium">Play vs AI</span>
+                </label>
+                <p className="text-sm text-foreground/70 mt-3">Challenge our AI opponent at various difficulty levels</p>
+              </div>
+
+              {/* Move History */}
+              <div className="bg-card rounded-lg p-6">
+                <h3 className="font-bold mb-4 flex items-center gap-2">
+                  <BookOpen size={18} />
+                  Move History
+                </h3>
+                <div className="max-h-64 overflow-y-auto">
+                  {moveHistory.length === 0 ? (
+                    <p className="text-sm text-foreground/70">No moves yet. Make your first move!</p>
+                  ) : (
+                    <div className="grid grid-cols-2 gap-2">
+                      {moveHistory.map((move, index) => (
+                        <div key={index} className="text-sm bg-foreground/5 p-2 rounded">
+                          <span className="font-medium">{Math.floor(index / 2) + 1}.</span> {move}
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/rules/page.tsx

@@ -0,0 +1,186 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import FooterCard from "@/components/sections/footer/FooterCard";
+import { BookOpen, Facebook, Instagram, Twitter, Linkedin } from "lucide-react";
+
+interface Rule {
+  id: string;
+  title: string;
+  description: string;
+  details: string[];
+  icon: string;
+}
+
+const RULES: Rule[] = [
+  {
+    id: "board-setup",    title: "Board Setup",    description: "Understanding the chess board and initial piece placement",    details: [
+      "The board has 64 squares arranged in 8 rows and 8 columns",      "Squares alternate between light and dark colors",      "Each player gets 16 pieces: 1 king, 1 queen, 2 rooks, 2 bishops, 2 knights, and 8 pawns",      "White always plays from the bottom, Black from the top",      "The board is positioned so a light square is on the right side of each player"],
+    icon: "♚"},
+  {
+    id: "piece-movements",    title: "Piece Movements",    description: "How each chess piece moves and captures",    details: [
+      "♙ Pawn: Moves forward one square (or two on first move). Captures diagonally forward.",      "♘ Knight: Moves in an L-shape (2 squares in one direction, 1 square perpendicular). Only piece that can jump.",      "♗ Bishop: Moves diagonally any number of squares.",      "♖ Rook: Moves horizontally or vertically any number of squares.",      "♕ Queen: Combines rook and bishop movement - moves any direction any distance.",      "♔ King: Moves one square in any direction. Most important piece."],
+    icon: "♘"},
+  {
+    id: "check-checkmate",    title: "Check & Checkmate",    description: "Understanding the winning and losing conditions",    details: [
+      "Check: When the king is under attack but can escape (by moving, blocking, or capturing)",      "Checkmate: When the king is in check and has no legal moves to escape. This ends the game - the attacking player wins!",      "Stalemate: When the king is not in check but has no legal moves. Results in a draw.",      "You must get out of check. It's illegal to leave your king in check."],
+    icon: "♔"},
+  {
+    id: "castling",    title: "Castling",    description: "A special move involving the king and rook",    details: [
+      "Only possible when: King has not moved, Rook has not moved, no pieces between them, king not in check",      "Kingside castling (short): King moves two squares toward the kingside rook, rook moves to the square the king crossed",      "Queenside castling (long): King moves two squares toward the queenside rook, rook moves to the square the king crossed",      "After castling, the king cannot be in check, and it cannot have moved through a checked square",      "You can castle only once per game"],
+    icon: "♖"},
+  {
+    id: "en-passant",    title: "En Passant",    description: "A special pawn capture rule",    details: [
+      "Occurs when an opponent's pawn moves two squares forward from its starting position",      "If your pawn is on the 5th rank (for white) or 4th rank (for black) on an adjacent file",      "You can capture the opponent's pawn as if it had only moved one square",      "This capture must be done immediately on the next move - you can't capture en passant later",      "This rule prevents pawns from safely advancing two squares when threatened"],
+    icon: "♙"},
+  {
+    id: "promotion",    title: "Pawn Promotion",    description: "When a pawn reaches the end of the board",    details: [
+      "When a pawn reaches the opposite end of the board, it must be promoted",      "The pawn is replaced by a queen, rook, bishop, or knight (player's choice)",      "Usually a queen is chosen because it's the most powerful piece",      "The promoted piece immediately enters play with its movement abilities",      "You can promote to any piece, even if you still have that piece on the board"],
+    icon: "♕"},
+  {
+    id: "draws",    title: "Draws",    description: "Ways a game can end in a tie",    details: [
+      "Stalemate: Opponent's king is not in check but has no legal moves",      "Threefold repetition: The same position occurs three times in the game",      "Fifty-move rule: 50 consecutive moves without a pawn move or capture",      "Insufficient material: Remaining pieces cannot checkmate (e.g., king vs king)",      "Mutual agreement: Both players agree to a draw",      "Perpetual check: One player can force checks indefinitely"],
+    icon: "♛"},
+];
+
+export default function RulesPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="elastic-effect"
+      defaultTextAnimation="background-highlight"
+      borderRadius="soft"
+      contentWidth="small"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-depth"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="semibold"
+    >
+      {/* Navbar */}
+      <div className="sticky top-0 z-50">
+        <NavbarStyleFullscreen
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Play", id: "/play" },
+            { name: "Courses", id: "/courses" },
+            { name: "Rules", id: "/rules" },
+          ]}
+          brandName="Chess Academy"
+          bottomLeftText="Chess Academy"
+          bottomRightText="learn@chessacademy.com"
+        />
+      </div>
+
+      {/* Rules 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 Rules</h1>
+            <p className="text-lg text-foreground/80 max-w-2xl mx-auto">
+              Learn the fundamental rules of chess including piece movements, special moves, and winning conditions
+            </p>
+          </div>
+
+          {/* Rules Grid */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
+            {RULES.map((rule) => (
+              <div key={rule.id} className="bg-card rounded-lg p-8 shadow-lg hover:shadow-xl transition-shadow">
+                <div className="flex items-start gap-4 mb-4">
+                  <div className="text-5xl">{rule.icon}</div>
+                  <div>
+                    <h2 className="text-2xl font-bold mb-2">{rule.title}</h2>
+                    <p className="text-foreground/70">{rule.description}</p>
+                  </div>
+                </div>
+
+                <ul className="space-y-3 mt-6">
+                  {rule.details.map((detail, idx) => (
+                    <li key={idx} className="flex gap-3 text-sm">
+                      <span className="text-primary-cta font-bold flex-shrink-0">•</span>
+                      <span className="text-foreground/80">{detail}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+
+          {/* Quick Tips */}
+          <div className="bg-card rounded-lg p-8 md:p-12">
+            <h2 className="text-3xl font-bold mb-6">Quick Tips for Beginners</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div>
+                <h3 className="font-bold text-lg mb-3 flex items-center gap-2">
+                  <span className="text-2xl">♔</span> King Safety
+                </h3>
+                <p className="text-foreground/80">Protect your king! Castle early to move your king to safety and connect your rooks.</p>
+              </div>
+              <div>
+                <h3 className="font-bold text-lg mb-3 flex items-center gap-2">
+                  <span className="text-2xl">♕</span> Piece Value
+                </h3>
+                <p className="text-foreground/80">Queen = 9, Rook = 5, Bishop/Knight = 3, Pawn = 1. Don't trade favorable pieces!</p>
+              </div>
+              <div>
+                <h3 className="font-bold text-lg mb-3 flex items-center gap-2">
+                  <span className="text-2xl">♙</span> Control Center
+                </h3>
+                <p className="text-foreground/80">Control the center squares (d4, e4, d5, e5) to get a strong position.</p>
+              </div>
+              <div>
+                <h3 className="font-bold text-lg mb-3 flex items-center gap-2">
+                  <span className="text-2xl">♘</span> Develop Pieces
+                </h3>
+                <p className="text-foreground/80">Develop your pieces early (knights before bishops) before launching an attack.</p>
+              </div>
+            </div>
+          </div>
+
+          {/* CTA */}
+          <div className="mt-16 text-center">
+            <h3 className="text-2xl font-bold mb-4">Ready to Put These Rules Into Practice?</h3>
+            <p className="text-lg text-foreground/80 mb-6">Start playing and learning today!</p>
+            <div className="flex flex-col sm:flex-row gap-4 justify-center">
+              <a
+                href="/play"
+                className="px-8 py-3 bg-primary-cta text-foreground rounded-lg hover:opacity-90 transition-opacity font-medium"
+              >
+                Play Now
+              </a>
+              <a
+                href="/courses"
+                className="px-8 py-3 bg-card border-2 border-primary-cta text-foreground rounded-lg hover:opacity-90 transition-opacity font-medium"
+              >
+                Learn More
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Footer */}
+      <div className="mx-auto px-4 md:px-6 mt-20">
+        <FooterCard
+          logoText="Chess Academy"
+          copyrightText="© 2025 Chess Academy. All rights reserved."
+          socialLinks={[
+            {
+              icon: Facebook,
+              href: "https://facebook.com/chessacademy",              ariaLabel: "Facebook"},
+            {
+              icon: Instagram,
+              href: "https://instagram.com/chessacademy",              ariaLabel: "Instagram"},
+            {
+              icon: Twitter,
+              href: "https://twitter.com/chessacademy",              ariaLabel: "Twitter"},
+            {
+              icon: Linkedin,
+              href: "https://linkedin.com/company/chessacademy",              ariaLabel: "LinkedIn"},
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}