7c4086c1-dcca-4764-ad1c-e8efb1cc7e8d/src/app/page.tsx

"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="compact"
        sizing="mediumLarge"
        background="none"
        cardStyle="soft-shadow"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleApple
      navItems={[
        {
          name: "The Future",          id: "hero"},
        {
          name: "Features",          id: "how-it-works"},
        {
          name: "Waitlist",          id: "cta"},
      ]}
      brandName="SenseWear"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardRotatedCarousel
      background={{
        variant: "gradient-bars"}}
      title="SENSE / WEAR"
      description="The future of feeling. Your body knows first."
      tag="The Future of Feeling"
      buttons={[
        {
          text: "Join the Waitlist",          href: "#cta"},
      ]}
      carouselItems={[
        {
          id: "1",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-metallic-cube-shape_23-2150979662.jpg?_wi=1",          imageAlt: "SenseWear Band Model 1"},
        {
          id: "2",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-metallic-cube-shape_23-2150979662.jpg?_wi=2",          imageAlt: "SenseWear Band Model 2"},
        {
          id: "3",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-metallic-cube-shape_23-2150979662.jpg?_wi=3",          imageAlt: "SenseWear Band Model 3"},
        {
          id: "4",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-metallic-cube-shape_23-2150979662.jpg?_wi=4",          imageAlt: "SenseWear Band Model 4"},
        {
          id: "5",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-metallic-cube-shape_23-2150979662.jpg?_wi=5",          imageAlt: "SenseWear Band Model 5"},
        {
          id: "6",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-metallic-cube-shape_23-2150979662.jpg?_wi=6",          imageAlt: "SenseWear Band Model 6"},
      ]}
    />
  </div>

  <div id="problem" data-section="problem">
      <MetricCardTwo
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="bento-grid"
      useInvertedBackground={false}
      metrics={[
        {
          id: "stat-1",          value: "77%",          description: "Users struggling with undetected stress"},
        {
          id: "stat-2",          value: "$4.5T",          description: "Global economic impact of unmanaged burnout"},
        {
          id: "stat-3",          value: "0",          description: "Previous solutions that actually work in the moment"},
      ]}
      title="Discomfort Before Resolution"
      description="Every solution on the market is a rearview mirror. SenseWear is the windshield."
    />
  </div>

  <div id="how-it-works" data-section="how-it-works">
      <FeatureCardTwentyOne
      useInvertedBackground={false}
      title="One band. Every moment."
      description="Four signals, 60 reads per second. A neural network that learns you in 7 days."
      accordionItems={[
        {
          id: "f1",          title: "4 Signals. 60 Reads/sec",          content: "Capturing physiological nuances at unprecedented resolution."},
        {
          id: "f2",          title: "Learns YOU in 7 Days",          content: "Individualized modeling that grows with your body."},
        {
          id: "f3",          title: "Works With Everything",          content: "Seamless integration with your digital ecosystem."},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/abstract-metallic-cube-shape_23-2150979662.jpg?_wi=7"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwelve
      useInvertedBackground={false}
      testimonials={[
        {
          id: "t1",          name: "Alex R.",          imageSrc: "http://img.b2bpic.net/free-photo/bearded-young-man-casual-shirt-standing-with-laptop-hands_93675-134479.jpg"},
        {
          id: "t2",          name: "Jamie L.",          imageSrc: "http://img.b2bpic.net/free-photo/happy-industry-4-0-solar-panels-plant-elderly-supervisor-overseeing-facility-smiling-photovoltaics_482257-135647.jpg"},
        {
          id: "t3",          name: "Sarah M.",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-woman_23-2149022644.jpg"},
        {
          id: "t4",          name: "David K.",          imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-girl-black-turtleneck-glasses-making-grimace-being-confused_141793-55024.jpg"},
        {
          id: "t5",          name: "Elena P.",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-smiling-fitness-woman_171337-13339.jpg"},
      ]}
      cardTitle="Waitlist Community"
      cardTag="47,832 Members"
      cardAnimation="slide-up"
    />
  </div>

  <div id="cta" data-section="cta">
      <ContactCTA
      background={{
        variant: "sparkles-gradient"}}
      tag="Limited access"
      title="Be first."
      description="You've seen what's possible. Join the waitlist for 40% off early access."
      buttons={[
          { text: "Join Waitlist" }
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseReveal
      columns={[
        {
          title: "Product",          items: [
            {
              label: "Technology",              href: "#"},
            {
              label: "Waitlist",              href: "#"},
          ],
        },
        {
          title: "Company",          items: [
            {
              label: "About",              href: "#"},
            {
              label: "Press",              href: "#"},
          ],
        },
        {
          title: "Support",          items: [
            {
              label: "Privacy",              href: "#"},
            {
              label: "Terms",              href: "#"},
          ],
        },
        {
          title: "Social",          items: [
            {
              label: "Twitter",              href: "#"},
            {
              label: "LinkedIn",              href: "#"},
          ],
        },
      ]}
      logoText="SW◉"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}