bfcfc030-7a21-49b4-8557-e64f894441c8/src/app/page.tsx

"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-shift"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="small"
        sizing="mediumLargeSizeLargeTitles"
        background="circleGradient"
        cardStyle="subtle-shadow"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        { name: "About", id: "#about" },
        { name: "Programs", id: "#features" },
        { name: "Timeline", id: "#timeline" },
        { name: "Apply", id: "#contact" },
      ]}
      brandName="CMS Admissions"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitDualMedia
      background={{ variant: "plain" }}
      title="Mobile Repairing Skill Program"
      description="Master the art of mobile repair with our hands-on 2-month intensive training program. Learn essential diagnostics, hardware repair, and software troubleshooting from industry experts."
      tag="Admissions Open for 2025"
      mediaItems={[
        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CQTjukAQhF3kvPjXuEYMpKdMhJ/uploaded-1776319038441-npwp4jsp.jpg?_wi=1", imageAlt: "Mobile repairing tools and workbench" },
        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=c2j44w", imageAlt: "students in modern lab" },
      ]}
      mediaAnimation="slide-up"
      rating={5}
      ratingText="Certified Skill Training"
    />
  </div>

  <div id="about" data-section="about">
      <SplitAbout
      textboxLayout="split"
      useInvertedBackground={false}
      title="Program Details"
      description="Gain practical experience at our well-equipped training center. This comprehensive two-month program is designed for students seeking a career in the rapidly growing mobile technology sector."
      bulletPoints={[
        { title: "Duration", description: "2 Months of intensive practical training." },
        { title: "Investment", description: "Program fee: 25,000 Rupees." },
        { title: "Location", description: "Chandni mobile market, opposite Oppo service center, Lahwish plaza, first floor, Saddar, Hyderabad, Sindh." },
      ]}
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CQTjukAQhF3kvPjXuEYMpKdMhJ/uploaded-1776319038441-npwp4jsp.jpg?_wi=2"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      features={[
        { title: "Hardware Diagnostics", description: "Learn to identify motherboard issues and component failures.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=k16a02" },
        { title: "Screen Replacement", description: "Hands-on training for delicate screen and battery repairs.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gbweh1" },
        { title: "Software Flashing", description: "Master software debugging, OS updates, and unlocking protocols.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=w85w3c" },
      ]}
      title="What You Will Learn"
      description="Acquire the most in-demand skills in the mobile repair industry."
    />
  </div>

  <div id="timeline" data-section="timeline">
      <MetricCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={false}
      metrics={[
        { id: "1", value: "2 Months", description: "Full Program Duration" },
        { id: "2", value: "25,000", description: "Course Fee (PKR)" },
        { id: "3", value: "Saddar", description: "Training Center Location" },
      ]}
      title="Course Overview"
      description="Quick facts about our upcoming mobile technology program."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTen
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        { id: "1", title: "Life Changing", quote: "This program gave me the skills to open my own repair shop within months.", name: "Sarah J.", role: "Certified Technician" },
        { id: "2", title: "Practical", quote: "The hands-on approach made all the difference. I feel very confident now.", name: "Marcus T.", role: "Alumni" },
      ]}
      title="Student Experiences"
      description="Hear from our graduates who have launched successful careers."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={false}
      faqs={[
        { id: "1", title: "Are tools provided?", content: "Yes, all necessary tools and equipment are provided during training sessions." },
        { id: "2", title: "Is a certificate provided?", content: "Yes, a completion certificate is awarded upon successful assessment at the end of the program." },
        { id: "3", title: "How can I enroll?", content: "Contact us via the form below or visit us directly at the Chandni mobile market address provided." },
      ]}
      sideTitle="Frequently Asked Questions"
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Start Your Training"
      description="Ready to begin your journey in mobile repairing? Sign up today to secure your spot."
      inputs={[
        { name: "fullName", type: "text", placeholder: "Full Name", required: true },
        { name: "email", type: "email", placeholder: "Email Address", required: true },
      ]}
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CQTjukAQhF3kvPjXuEYMpKdMhJ/uploaded-1776319038441-npwp4jsp.jpg?_wi=3"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoEmphasis
      columns={[
        { items: [{ label: "Admissions", href: "#contact" }, { label: "Programs", href: "#features" }] },
      ]}
      logoText="CMS"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}