Merge version_2 into main #1
342
src/app/page.tsx
342
src/app/page.tsx
@@ -2,17 +2,17 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
|
||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
|
||||
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||||
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
||||
import { MessageCircle, Shield, Star, Truck } from "lucide-react";
|
||||
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
||||
import { Shield, Star, Truck, Heart } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -32,28 +32,13 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Tienda",
|
||||
id: "shop",
|
||||
},
|
||||
{
|
||||
name: "Coleccionables",
|
||||
id: "collections",
|
||||
},
|
||||
{
|
||||
name: "Combos",
|
||||
id: "offers",
|
||||
},
|
||||
{
|
||||
name: "Contacto",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Tienda", id: "shop" },
|
||||
{ name: "Coleccionables", id: "collections" },
|
||||
{ name: "Combos", id: "offers" },
|
||||
{ name: "Contacto", id: "contact" },
|
||||
]}
|
||||
brandName="OtakuZone"
|
||||
button={{
|
||||
text: "Carrito (0)",
|
||||
href: "#",
|
||||
}}
|
||||
button={{ text: "Carrito (0)", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -61,37 +46,10 @@ export default function LandingPage() {
|
||||
<HeroCarouselLogo
|
||||
logoText="OtakuZone"
|
||||
description="Tu portal al mundo del anime y los videojuegos. Productos exclusivos y calidad garantizada."
|
||||
buttons={[
|
||||
{
|
||||
text: "Explorar tienda",
|
||||
href: "#shop",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Explorar tienda", href: "#shop" }]}
|
||||
slides={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/futuristic-technology-hologram_23-2151917423.jpg",
|
||||
imageAlt: "Anime gamer portal",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/image-indecisive-pouting-girl-fairy-costume-holding-magic-wand-looking-thoughtful-standing_1258-18905.jpg",
|
||||
imageAlt: "Collectible figures",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cartoon-style-portrait-two-child-austronauts_23-2151108884.jpg",
|
||||
imageAlt: "Cute plushies",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/technology-addiction-illustrated_23-2151873462.jpg",
|
||||
imageAlt: "Gaming gear",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cool-possum-with-clothes_23-2151012709.jpg",
|
||||
imageAlt: "Streetwear",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/anime-girl-winter-outfit_23-2152020037.jpg",
|
||||
imageAlt: "Limited art",
|
||||
},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/futuristic-technology-hologram_23-2151917423.jpg", imageAlt: "Anime gamer portal" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/image-indecisive-pouting-girl-fairy-costume-holding-magic-wand-looking-thoughtful-standing_1258-18905.jpg", imageAlt: "Collectible figures" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -101,30 +59,12 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
tag: "Cool",
|
||||
title: "Figuras",
|
||||
subtitle: "Alta calidad",
|
||||
description: "Coleccionables detallados.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-cartoon-character-djing-party_23-2151688517.jpg",
|
||||
},
|
||||
{
|
||||
tag: "Style",
|
||||
title: "Ropa",
|
||||
subtitle: "Streetwear",
|
||||
description: "Diseños exclusivos.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/lifestyle-night-city-with-young-person_23-2149124040.jpg",
|
||||
},
|
||||
{
|
||||
tag: "Access",
|
||||
title: "Accesorios",
|
||||
subtitle: "Geek Gear",
|
||||
description: "Mejora tu setup.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/set-smartphone-near-notebook-male-accessories_23-2148067777.jpg",
|
||||
},
|
||||
{ tag: "Calidad", title: "Figuras", subtitle: "Premium", description: "Coleccionables detallados con certificación oficial.", imageSrc: "http://img.b2bpic.net/free-photo/3d-cartoon-character-djing-party_23-2151688517.jpg" },
|
||||
{ tag: "Exclusivo", title: "Ropa", subtitle: "Edición Limitada", description: "Diseños únicos colaborativos con artistas.", imageSrc: "http://img.b2bpic.net/free-photo/lifestyle-night-city-with-young-person_23-2149124040.jpg" },
|
||||
{ tag: "Pro", title: "Setup", subtitle: "Geek Gear", description: "Periféricos y decoración para tu espacio.", imageSrc: "http://img.b2bpic.net/free-photo/set-smartphone-near-notebook-male-accessories_23-2148067777.jpg" },
|
||||
]}
|
||||
title="Nuestras Categorías"
|
||||
description="Explora todo nuestro catálogo geek."
|
||||
description="Eleva tu colección al siguiente nivel."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -135,251 +75,89 @@ export default function LandingPage() {
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Figura Limitada",
|
||||
price: "$89",
|
||||
variant: "Edición limitada",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/anime-girl-skeleton-costume-with-candles_23-2152013218.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Peluche Chibi",
|
||||
price: "$25",
|
||||
variant: "Nuevo",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-kawaii-girl-illustration_23-2149659176.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Camiseta Grafica",
|
||||
price: "$35",
|
||||
variant: "Hot",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-asian-cartoon-character-illustration_52683-145667.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Skin Gamer",
|
||||
price: "$15",
|
||||
variant: "Exclusivo",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/gradient-illuminated-neon-gaming-desk-setup-with-keyboard_23-2149529411.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Keycaps Anime",
|
||||
price: "$45",
|
||||
variant: "Hot",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/minimalist-computer-desk-setup-with-hard-drive_58702-17215.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "Poster 3D",
|
||||
price: "$20",
|
||||
variant: "Nuevo",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/anime-photographer-nature_23-2152020077.jpg",
|
||||
},
|
||||
{ id: "1", name: "Figura Limitada", price: "$89", variant: "Edición coleccionista", imageSrc: "http://img.b2bpic.net/free-photo/anime-girl-skeleton-costume-with-candles_23-2152013218.jpg" },
|
||||
{ id: "2", name: "Peluche Chibi", price: "$25", variant: "Stock limitado", imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-kawaii-girl-illustration_23-2149659176.jpg" },
|
||||
]}
|
||||
title="Productos Destacados"
|
||||
description="Lo último del momento."
|
||||
title="Lo Más Buscado"
|
||||
description="Productos favoritos por la comunidad gamer."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="value" data-section="value">
|
||||
<MetricCardOne
|
||||
animationType="depth-3d"
|
||||
textboxLayout="default"
|
||||
<MetricCardTwo
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="split"
|
||||
gridVariant="bento-grid"
|
||||
useInvertedBackground={false}
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "100%",
|
||||
title: "Original",
|
||||
description: "Productos oficiales.",
|
||||
icon: Shield,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "Limited",
|
||||
title: "Exclusivo",
|
||||
description: "Stock reducido.",
|
||||
icon: Star,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "Nacional",
|
||||
title: "Envíos",
|
||||
description: "A todo el país.",
|
||||
icon: Truck,
|
||||
},
|
||||
{
|
||||
id: "m4",
|
||||
value: "24/7",
|
||||
title: "Soporte",
|
||||
description: "WhatsApp directo.",
|
||||
icon: MessageCircle,
|
||||
},
|
||||
{ id: "v1", value: "100%", description: "Autenticidad garantizada en cada pieza coleccionable." },
|
||||
{ id: "v2", value: "5k+", description: "Fans satisfechos con nuestra calidad premium." },
|
||||
{ id: "v3", value: "24h", description: "Atención experta para cualquier duda de tu compra." }
|
||||
]}
|
||||
title="¿Por qué elegirnos?"
|
||||
description="Tu pasión merece lo mejor."
|
||||
title="Confianza y Calidad"
|
||||
description="El estándar de oro para coleccionistas anime."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
<TestimonialCardThirteen
|
||||
animationType="slide-up"
|
||||
showRating={true}
|
||||
useInvertedBackground={false}
|
||||
testimonial="¡La mejor tienda de anime! Todo llegó perfecto y muy rápido."
|
||||
rating={5}
|
||||
author="Sofía G."
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/urban-portrait-young-man-with-orange-hair_23-2149122925.jpg",
|
||||
alt: "Sofía",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-person-japan-winter-time_23-2149271890.jpg",
|
||||
alt: "Lucas",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/concept-halloween-celebration-covid-19-pandemic_1258-18689.jpg",
|
||||
alt: "Ana",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/handsome-young-man-holding-stack-books-looking-away-standing-near-shelf_23-2148096478.jpg",
|
||||
alt: "Pedro",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/cute-teddy-bear-sitting-chair_1232-3568.jpg",
|
||||
alt: "Marta",
|
||||
},
|
||||
title="Lo que dicen nuestros Nakamas"
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Sofia G.", handle: "@otakugirl", testimonial: "La calidad de las figuras es impresionante, superó mis expectativas.", rating: 5 },
|
||||
{ id: "t2", name: "Carlos M.", handle: "@gamerpro", testimonial: "Envío protegido y súper rápido, un 10/10.", rating: 5 }
|
||||
]}
|
||||
ratingAnimation="blur-reveal"
|
||||
avatarsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social" data-section="social">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Instagram",
|
||||
"TikTok",
|
||||
"Facebook",
|
||||
"Twitter",
|
||||
"Discord",
|
||||
"YouTube",
|
||||
"Twitch",
|
||||
]}
|
||||
title="Únete a la Comunidad"
|
||||
description="Síguenos para ofertas y sorteos."
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
names={["Otaku Hub", "Anime Fans", "Gaming Elite", "Collector Central"]}
|
||||
title="Respaldo de la Industria"
|
||||
description="Marcas y comunidades que confían en OtakuZone para sus lanzamientos."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="offers" data-section="offers">
|
||||
<PricingCardFive
|
||||
animationType="scale-rotate"
|
||||
textboxLayout="default"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "c1",
|
||||
tag: "Popular",
|
||||
price: "$99",
|
||||
period: "/pack",
|
||||
description: "Figura + Camiseta + Poster",
|
||||
button: {
|
||||
text: "Comprar combo",
|
||||
},
|
||||
featuresTitle: "Incluye:",
|
||||
features: [
|
||||
"Figura exclusiva",
|
||||
"Camiseta temática",
|
||||
"Poster edición limitada",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "c2",
|
||||
tag: "Pro",
|
||||
price: "$149",
|
||||
period: "/pack",
|
||||
description: "Full Setup Gamer",
|
||||
button: {
|
||||
text: "Comprar combo",
|
||||
},
|
||||
featuresTitle: "Incluye:",
|
||||
features: [
|
||||
"Skin controller",
|
||||
"Artisan keycaps",
|
||||
"Figura premium",
|
||||
],
|
||||
},
|
||||
{ id: "p1", tag: "Combo Start", price: "$79", period: "/pack", description: "El kit inicial para nuevos coleccionistas.", button: { text: "Comprar" }, featuresTitle: "Qué incluye:", features: ["Figura exclusiva", "Pin conmemorativo", "Acceso a descuentos"] }
|
||||
]}
|
||||
title="Combos Imperdibles"
|
||||
description="¡Ahorra comprando en pack!"
|
||||
title="Combos Exclusivos"
|
||||
description="Maximiza tu ahorro con nuestras ediciones especiales."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
text="¡Contáctanos directo por WhatsApp para una atención personalizada!"
|
||||
buttons={[
|
||||
{
|
||||
text: "WhatsApp",
|
||||
href: "https://wa.me/123456789",
|
||||
},
|
||||
<ContactSplitForm
|
||||
title="¿Dudas sobre tu pedido?"
|
||||
description="Nuestro equipo está aquí para asesorarte en tu próxima adquisición."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Tu nombre" },
|
||||
{ name: "email", type: "email", placeholder: "Tu correo" }
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Cuéntanos qué buscas..." }}
|
||||
buttonText="Enviar consulta"
|
||||
useInvertedBackground={true}
|
||||
mediaPosition="right"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
<FooterBase
|
||||
logoText="OtakuZone"
|
||||
copyrightText="© 2025 OtakuZone - Comunidad Anime"
|
||||
columns={[
|
||||
{
|
||||
title: "Tienda",
|
||||
items: [
|
||||
{
|
||||
label: "Figuras",
|
||||
href: "#shop",
|
||||
},
|
||||
{
|
||||
label: "Ropa",
|
||||
href: "#shop",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Soporte",
|
||||
items: [
|
||||
{
|
||||
label: "Envíos",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Pagos",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Redes",
|
||||
items: [
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "TikTok",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Navegación", items: [{ label: "Tienda", href: "#shop" }, { label: "Combos", href: "#offers" }] },
|
||||
{ title: "Ayuda", items: [{ label: "Seguimiento", href: "#" }, { label: "Contacto", href: "#contact" }] }
|
||||
]}
|
||||
copyrightText="© 2024 OtakuZone"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
Reference in New Issue
Block a user