17ac7346-38ee-4377-a4b6-c009cb95f94a/src/app/page.tsx

"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Clock, Flame, Flame as FlameIcon, Target, Trophy, Users, Zap, Sparkles } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="background-highlight"
      borderRadius="soft"
      contentWidth="smallMedium"
      sizing="large"
      background="circleGradient"
      cardStyle="layered-gradient"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: 'Features', id: 'features' },
            { name: 'Gamification', id: 'gamification' },
            { name: 'Waitlist', id: 'waitlist' },
            { name: 'Contact', id: 'contact' },
            { name: 'About', id: 'about' }
          ]}
          brandName="Physiqo"
          bottomLeftText="AI Fitness Progress"
          bottomRightText="early@physiqo.app"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroSplitDualMedia
          background={{ variant: 'plain' }}
          tag="AI Fitness Technology"
          tagIcon={Zap}
          tagAnimation="slide-up"
          title="AI that analyzes your physique."
          description="Upload your gym photos, track your progress, and improve with AI-powered feedback. Join thousands transforming their fitness journey with personalized insights and real-time analysis."
          buttons={[
            { text: 'Get Early Access', href: '#waitlist' }
          ]}
          buttonAnimation="slide-up"
          mediaItems={[
            {
              imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArEgeutwBVHCKdrLyohjDTTMON/a-modern-fitness-app-interface-mockup-sh-1773342490235-32709f7c.png?_wi=1',
              imageAlt: 'Physiqo fitness app interface preview'
            },
            {
              imageSrc: 'https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArEgeutwBVHCKdrLyohjDTTMON/a-minimalist-icon-or-visual-representing-1773342489847-22b7f866.png',
              imageAlt: 'AI body analysis visualization'
            }
          ]}
          mediaAnimation="slide-up"
          rating={5}
          ratingText="Early adopters trust Physiqo"
          ariaLabel="Physiqo hero section"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardTwentyOne
          title="Three Powerful Features"
          description="Everything you need to transform your fitness with AI-powered insights and real-time feedback."
          tag="Key Features"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          accordionItems={[
            {
              id: '1',
              title: 'AI Body Analysis',
              content: 'Upload photos from your gym sessions and let our AI analyze your posture, muscle symmetry, and overall balance. Get detailed feedback on form, muscle engagement, and areas for improvement with every upload.'
            },
            {
              id: '2',
              title: 'Progress Tracking',
              content: 'Visualize your transformation over time with comprehensive progress reports. Track muscle development, body composition changes, and overall improvements with detailed visual scores and comparative analytics.'
            },
            {
              id: '3',
              title: 'Workout Recommendations',
              content: 'Our AI learns your weak muscle groups and suggests personalized workouts to address imbalances. Get customized exercise plans tailored to your specific needs and fitness goals.'
            }
          ]}
          videoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3ArEgeutwBVHCKdrLyohjDTTMON/a-modern-fitness-app-interface-mockup-sh-1773342490235-32709f7c.png?_wi=2"
          videoAriaLabel="Physiqo features demonstration"
          mediaAnimation="slide-up"
          useInvertedBackground={false}
          mediaPosition="right"
          ariaLabel="Physiqo features section"
        />
      </div>

      <div id="gamification" data-section="gamification">
        <MetricCardThree
          title="Stay Motivated with Gamification"
          description="Track streaks, compete with friends, and complete weekly challenges to stay consistent with your fitness journey."
          tag="Engagement"
          tagIcon={Trophy}
          tagAnimation="slide-up"
          metrics={[
            { id: '1', icon: Flame, title: 'Streak System', value: '7+ Days' },
            { id: '2', icon: Users, title: 'Leaderboard', value: 'Rank Up' },
            { id: '3', icon: Target, title: 'Challenges', value: 'Weekly' }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          ariaLabel="Physiqo gamification section"
        />
      </div>

      <div id="waitlist" data-section="waitlist">
        <ContactCTA
          tag="Limited Early Access"
          tagIcon={Clock}
          tagAnimation="slide-up"
          title="Join the Physiqo Waitlist"
          description="Be among the first to experience AI-powered fitness analysis. Limited spots available for our beta launch. Sign up now to secure your early access."
          buttons={[
            { text: 'Join the Waitlist', href: '#' },
            { text: 'Learn More', href: '#features' }
          ]}
          buttonAnimation="slide-up"
          background={{ variant: 'plain' }}
          useInvertedBackground={false}
          ariaLabel="Physiqo waitlist signup section"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="Physiqo"
          columns={[
            {
              title: 'Product',
              items: [
                { label: 'Features', href: '#features' },
                { label: 'Pricing', href: '#pricing' },
                { label: 'Waitlist', href: '#waitlist' }
              ]
            },
            {
              title: 'Company',
              items: [
                { label: 'About', href: '/about' },
                { label: 'Blog', href: '/blog' },
                { label: 'Contact', href: 'mailto:hello@physiqo.app' }
              ]
            },
            {
              title: 'Legal',
              items: [
                { label: 'Privacy Policy', href: '#privacy' },
                { label: 'Terms of Service', href: '#terms' },
                { label: 'Cookie Policy', href: '#cookies' }
              ]
            }
          ]}
          copyrightText="© 2025 Physiqo — AI powered fitness progress."
          ariaLabel="Physiqo footer"
        />
      </div>
    </ThemeProvider>
  );
}