231 lines
10 KiB
TypeScript
231 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
|
import { ArrowRight, CheckCircle, Sparkles, Target } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="circleGradient"
|
|
cardStyle="subtle-shadow"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="medium"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{
|
|
name: "Inicio", id: "#hero"},
|
|
{
|
|
name: "Álbum", id: "#grid"},
|
|
{
|
|
name: "Progreso", id: "#progress"},
|
|
{
|
|
name: "Intercambio", id: "#exchange"},
|
|
]}
|
|
brandName="Panini Tracker"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDualMedia
|
|
background={{
|
|
variant: "gradient-bars"}}
|
|
title="Controla tu pasión. Completa tu Álbum."
|
|
description="La forma más rápida y profesional de organizar, trackear y completar tu colección de figuritas digital."
|
|
tag="PWA Premium"
|
|
buttons={[
|
|
{
|
|
text: "Ver Álbum", href: "#grid"},
|
|
{
|
|
text: "Progreso", href: "#progress"},
|
|
]}
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/woman-looking-her-phone-while-it-rains_23-2149260457.jpg", imageAlt: "App Interface"},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/person-playing-sudoku-game-tablet_23-2149073710.jpg", imageAlt: "App View"}
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
rating={5}
|
|
ratingText="Usada por +10k coleccionistas"
|
|
tagIcon={Sparkles}
|
|
/>
|
|
</div>
|
|
|
|
<div id="grid" data-section="grid">
|
|
<ProductCardFour
|
|
animationType="slide-up"
|
|
textboxLayout="split-description"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "1", name: "Figurita #01", price: "Pegada", variant: "Premium", imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-credit-card-holder_1262-15049.jpg"},
|
|
{
|
|
id: "2", name: "Figurita #02", price: "Faltante", variant: "Normal", imageSrc: "http://img.b2bpic.net/free-vector/soccer-elements-collection-with-equipment_23-2147786475.jpg"},
|
|
{
|
|
id: "3", name: "Figurita #03", price: "Repetida", variant: "Holo", imageSrc: "http://img.b2bpic.net/free-photo/online-shopping-mobile-banking-frowning-angry-girl-showing-horizontal-smartphone-screen-credit-card-standing-casual-clothes-against-white-background_176420-46378.jpg"},
|
|
{
|
|
id: "4", name: "Figurita #04", price: "Pegada", variant: "Normal", imageSrc: "http://img.b2bpic.net/free-photo/gradient-holographic-texture-background_84443-23077.jpg"},
|
|
{
|
|
id: "5", name: "Figurita #05", price: "Faltante", variant: "Holo", imageSrc: "http://img.b2bpic.net/free-photo/vibrant-clear-cassette-tape-with-vivid-background-color_23-2148289020.jpg"},
|
|
{
|
|
id: "6", name: "Figurita #06", price: "Pegada", variant: "Premium", imageSrc: "http://img.b2bpic.net/free-photo/skeptical-redhead-guy-glasses-showing-smartphone-screen-horizontally-smirk-frowning-disappoin_1258-77566.jpg"},
|
|
]}
|
|
title="Explorador de Figuritas"
|
|
description="Gestiona cada figurita individual. Marca como pegada, repetida o falta."
|
|
/>
|
|
</div>
|
|
|
|
<div id="progress" data-section="progress">
|
|
<MetricCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={true}
|
|
metrics={[
|
|
{
|
|
id: "m1", value: "85%", title: "Progreso Total", description: "Figuritas pegadas al día", icon: CheckCircle,
|
|
},
|
|
{
|
|
id: "m2", value: "12", title: "Repetidas", description: "Listas para intercambio", icon: ArrowRight,
|
|
},
|
|
{
|
|
id: "m3", value: "45", title: "Faltantes", description: "Objetivo de hoy", icon: Target,
|
|
},
|
|
]}
|
|
title="Estadísticas de Colección"
|
|
description="Visualiza el avance de tu álbum en tiempo real."
|
|
/>
|
|
</div>
|
|
|
|
<div id="exchange" data-section="exchange">
|
|
<FeatureCardTwentyThree
|
|
animationType="slide-up"
|
|
textboxLayout="split-description"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: "f1", title: "Escaneo QR Instantáneo", tags: [
|
|
"Seguridad", "Velocidad"],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/selective-focus-shot-male-hand-holding-smartphone-with-cryptocurrencies-statistics-screen_181624-59051.jpg"},
|
|
{
|
|
id: "f2", title: "Match por Geolocalización", tags: [
|
|
"Cercanía", "Directo"],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/financial-forex-business-chart-report_53876-120081.jpg"},
|
|
{
|
|
id: "f3", title: "Historial de Trades", tags: [
|
|
"Confianza", "Auditado"],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/person-holding-phone-hands-dark-background_23-2148295843.jpg"},
|
|
]}
|
|
title="Sistema de Intercambio Smart"
|
|
description="Encuentra coleccionistas cercanos, escanea QR y gestiona tus trades de forma segura."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonial" data-section="testimonial">
|
|
<TestimonialCardTen
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "1", title: "Increíble", quote: "Completar el álbum nunca fue tan fácil y organizado.", name: "Juan Pérez", role: "Collector", imageSrc: "http://img.b2bpic.net/free-photo/man-smiling_1187-3402.jpg"},
|
|
{
|
|
id: "2", title: "Indispensable", quote: "La función de intercambio por QR me salvó horas.", name: "Ana García", role: "Collector", imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-holding-smartphone_23-2150652849.jpg"},
|
|
{
|
|
id: "3", title: "Interfaz top", quote: "Muy cómoda para usar en el bus o la fila.", name: "Lucas Méndez", role: "Collector", imageSrc: "http://img.b2bpic.net/free-photo/front-view-rich-man-holding-lottery-tickets_23-2149820192.jpg"},
|
|
{
|
|
id: "4", title: "Rápida y fluida", quote: "La mejor PWA deportiva que he probado hasta hoy.", name: "Sofía Díaz", role: "Collector", imageSrc: "http://img.b2bpic.net/free-photo/senior-handsome-man-drinking-coffee-outside-street_1303-27535.jpg"},
|
|
{
|
|
id: "5", title: "Elegante", quote: "Me encanta cómo visualiza mis repetidas y faltantes.", name: "Diego Castro", role: "Collector", imageSrc: "http://img.b2bpic.net/free-photo/portrait-girl-with-smartphone-laughing-using-mobile-phone-app-isolated-white-background_1258-197264.jpg"},
|
|
]}
|
|
title="Opiniones de Coleccionistas"
|
|
description="Lo que dicen los usuarios sobre esta PWA."
|
|
/>
|
|
</div>
|
|
|
|
<div id="socialProof" data-section="socialProof">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"Liga Argentina", "Fútbol Fanatics", "Coleccionistas Club", "Sticker World", "Panini Central", "Goal Tracker", "Album Kings"]}
|
|
title="Comunidad en Expansión"
|
|
description="Miles de álbumes siendo completados en nuestra plataforma."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{
|
|
id: "q1", title: "¿Cómo instalo la PWA?", content: "Toca el botón compartir en Safari y luego 'Agregar al inicio'."},
|
|
{
|
|
id: "q2", title: "¿Se pierden mis figuritas?", content: "No, los datos se guardan localmente en tu iPhone."},
|
|
{
|
|
id: "q3", title: "¿Cómo intercambio?", content: "Escanea el código QR de otro coleccionista directamente."},
|
|
]}
|
|
title="Preguntas Frecuentes"
|
|
description="Todo lo que necesitas saber para empezar."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
columns={[
|
|
{
|
|
title: "App", items: [
|
|
{
|
|
label: "Inicio", href: "#hero"},
|
|
{
|
|
label: "Álbum", href: "#grid"},
|
|
{
|
|
label: "Progreso", href: "#progress"},
|
|
],
|
|
},
|
|
{
|
|
title: "Social", items: [
|
|
{
|
|
label: "Instagram", href: "#"},
|
|
{
|
|
label: "Twitter", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{
|
|
label: "Privacidad", href: "#"},
|
|
{
|
|
label: "Términos", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
logoText="Panini Tracker"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|