bdf54060-0095-47da-b35a-5e80b4e2a8b1/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 FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="mediumSmall"
        sizing="large"
        background="circleGradient"
        cardStyle="solid"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="glass"
        headingFontWeight="medium"
    >
      <ReactLenis root>
        <div id="nav" data-section="nav">
            <NavbarLayoutFloatingInline
            navItems={[
              { name: "Início", id: "/" },
              { name: "Criadores", id: "/creators" },
              { name: "Login", id: "/login" },
            ]}
            brandName="Peekly"
            button={{ text: "Comece Agora", href: "/login" }}
          />
        </div>

        <div id="hero" data-section="hero">
            <HeroCentered
            background={{ variant: "sparkles-gradient" }}
            title="Peekly: Seus Segredos Mais Quentes, Só pra Você"
            description="Acesso exclusivo a conteúdos privados dos seus criadores favoritos. Experiência premium, discreta e ilimitada."
            avatars={[
              { src: "http://img.b2bpic.net/free-photo/portrait-asmr-artist-uses-quality-mic-studio-anti-stress-video_482257-124195.jpg", alt: "Model 1" },
              { src: "http://img.b2bpic.net/free-photo/abstract-vaporwave-portrait-man_23-2148950760.jpg", alt: "Model 2" },
              { src: "http://img.b2bpic.net/free-photo/woman-beauty-vlogger-filming-vlog-about-creams_1303-18359.jpg", alt: "Model 3" },
              { src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-drawing_23-2149445987.jpg", alt: "Model 4" },
              { src: "http://img.b2bpic.net/free-photo/male-product-photographer-doing-his-job-studio_23-2148970193.jpg", alt: "Model 5" }
            ]}
            buttons={[{ text: "Comece Agora", href: "/login" }]}
            marqueeItems={[
              { type: "text", text: "Conteúdo 100% Exclusivo" },
              { type: "text", text: "Segurança e Privacidade" },
              { type: "text", text: "Acesso Premium 24/7" },
              { type: "text", text: "Pagamentos Seguros" },
              { type: "text", text: "Novos Criadores Diariamente" }
            ]}
          />
        </div>

        <div id="creators-grid" data-section="creators-grid">
            <FeatureCardTwentyNine
            animationType="slide-up"
            textboxLayout="default"
            gridVariant="four-items-2x2-equal-grid"
            useInvertedBackground={false}
            features={[
              { title: "AnaSilva 🔥", description: "150+ fotos exclusivas", imageSrc: "http://img.b2bpic.net/free-photo/young-pretty-woman-portrait-indoor_624325-3757.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/male-product-photographer-doing-his-job-studio_23-2148970192.jpg", buttonText: "Ver Perfil" },
              { title: "BellaNoir 💋", description: "Videos em alta definição", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-man-posing-spotlight_23-2151916024.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/black-model-posing_23-2148171696.jpg", buttonText: "Ver Perfil" },
              { title: "JadeLux 😈", description: "Bastidores e chat privado", imageSrc: "http://img.b2bpic.net/free-photo/portrait-attractive-woman-black-sweater-standing-posing_114579-58748.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/beautiful-portrait-teenager-woman_23-2149453488.jpg", buttonText: "Ver Perfil" },
              { title: "LunaDark 🖤", description: "Conteúdo 18+ semanal", imageSrc: "http://img.b2bpic.net/free-photo/looking-down-girl-crossing-arms-by-sitting-white-background_176474-117369.jpg", titleImageSrc: "http://img.b2bpic.net/free-photo/luxury-blond-female-white-dress-posing-studio_613910-10972.jpg", buttonText: "Ver Perfil" }
            ]}
            title="Criadores em Destaque"
            description="Conteúdo premium desbloqueado para assinantes."
          />
        </div>

        <div id="pricing" data-section="pricing">
            <PricingCardTwo
            animationType="slide-up"
            textboxLayout="default"
            useInvertedBackground={false}
            plans={[
              { id: "basic", badge: "Popular", price: "R$ 29,90", subtitle: "Mensal - Acesso Total", buttons: [{ text: "Assinar" }], features: ["Acesso ilimitado", "Conteúdo privado", "Chat direto"] },
              { id: "ppv", badge: "Avulso", price: "R$ 9,99", subtitle: "Conteúdo por vídeo", buttons: [{ text: "Comprar" }], features: ["Sem mensalidade", "Conteúdo único", "Pago por item"] }
            ]}
            title="Escolha seu Plano"
            description="Assinatura mensal para acesso completo ou PPV."
          />
        </div>

        <div id="metrics" data-section="metrics">
            <MetricCardFourteen
            useInvertedBackground={false}
            title="Nossos Números"
            tag="Comunidade"
            metrics={[
              { id: "m1", value: "500+", description: "Criadores Ativos" },
              { id: "m2", value: "1M+", description: "Fotos e Vídeos" },
              { id: "m3", value: "24/7", description: "Segurança Total" }
            ]}
            metricsAnimation="slide-up"
          />
        </div>

        <div id="faq" data-section="faq">
            <FaqBase
            textboxLayout="default"
            useInvertedBackground={false}
            faqs={[
              { id: "q1", title: "É seguro?", content: "Sim, usamos criptografia de ponta." },
              { id: "q2", title: "Como assinar?", content: "Via Stripe com cartão de crédito." },
              { id: "q3", title: "Cancelamento?", content: "Cancele a qualquer momento no perfil." }
            ]}
            title="Perguntas Frequentes"
            description="Tudo sobre sua assinatura premium."
            faqsAnimation="slide-up"
          />
        </div>

        <div id="support" data-section="support">
            <ContactCTA
            useInvertedBackground={false}
            background={{ variant: "radial-gradient" }}
            tag="Suporte"
            title="Precisa de ajuda?"
            description="Nossa equipe está disponível 24/7 para suporte aos usuários e criadores."
            buttons={[{ text: "Entrar em Contato", href: "#" }]}
          />
        </div>

        <div id="footer" data-section="footer">
            <FooterLogoReveal
              logoText="Peekly"
              leftLink={{ text: "Privacidade & Termos", href: "#" }}
              rightLink={{ text: "© 2024 Peekly Inc. 18+", href: "#" }}
            />
        </div>
      </ReactLenis>
    </ThemeProvider>
  );
}