312 lines
17 KiB
TypeScript
312 lines
17 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import { Headphones, ShieldCheck } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="compact"
|
|
sizing="largeSmallSizeLargeTitles"
|
|
background="grid"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="bold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{
|
|
name: "Inicio", id: "#hero"},
|
|
{
|
|
name: "Categorías", id: "#categorias"},
|
|
{
|
|
name: "Productos", id: "#productos"},
|
|
{
|
|
name: "Ventajas", id: "#ventajas"},
|
|
{
|
|
name: "Social", id: "#redes-sociales"},
|
|
{
|
|
name: "Nosotros", id: "#nosotros"},
|
|
]}
|
|
button={{
|
|
text: "Buscar", href: "#"}}
|
|
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EfzTWa3wy34NXvkTnn5rG7oZS2/uploaded-1780584761677-5anj9xoo.png"
|
|
logoAlt="HYPERCORE Logo"
|
|
brandName="HYPERCORE"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplit
|
|
background={{
|
|
variant: "sparkles-gradient"}}
|
|
imagePosition="right"
|
|
title="La revolución a tus materiales deportivos"
|
|
description="Equipa tu Pasión con HYPERCORE. Descubre la más amplia selección de equipo deportivo de alta calidad para llevar tu rendimiento al siguiente nivel."
|
|
buttons={[
|
|
{
|
|
text: "Comprar Ahora", href: "#productos"},
|
|
{
|
|
text: "Ver Productos", href: "#productos"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/fit-woman-training-indoors_23-2151717234.jpg"
|
|
imageAlt="Dynamic sports action"
|
|
mediaAnimation="slide-up"
|
|
fixedMediaHeight={true}
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/fitness-girl-making-flexing-exercise_23-2148017399.jpg", alt: "Fitness girl making flexing exercise"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/abstract-blur-gym_74190-3784.jpg", alt: "Abstract blur gym"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/weights-shelf_23-2148017343.jpg", alt: "Weights on shelf"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/baseball-bat-fitness-strap-dumbbells-skipping-rope-weights-headphone-shoes-wooden-textured-background_23-2147924688.jpg", alt: "Baseball bat; fitness strap; dumbbells; skipping rope; weights; headphone and shoes on wooden textured background"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/happy-african-man-smiling-posing-with-crossed-arms_176420-12636.jpg", alt: "Happy customer testimonial"},
|
|
]}
|
|
avatarText="Más de 100K clientes satisfechos"
|
|
marqueeItems={[
|
|
{
|
|
type: "text", text: "Envío Gratis en pedidos mayores a $50"},
|
|
{
|
|
type: "text-icon", text: "Garantía de Satisfacción", icon: ShieldCheck,
|
|
},
|
|
{
|
|
type: "text", text: "Nuevos Productos Cada Semana"},
|
|
{
|
|
type: "text-icon", text: "Soporte 24/7", icon: Headphones,
|
|
},
|
|
{
|
|
type: "text", text: "Calidad Premium Asegurada"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="categorias" data-section="categorias">
|
|
<FeatureCardMedia
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
id: "cat-fitness", title: "Fitness", description: "Entrenamiento de fuerza y cardio para mantenerte en forma.", tag: "Popular", imageSrc: "http://img.b2bpic.net/free-photo/barbell-ready-workout-gym-various-sizes-weight-plates_169016-40070.jpg", imageAlt: "Fitness equipment", buttons: [
|
|
{
|
|
text: "Ver más", href: "#productos"},
|
|
],
|
|
},
|
|
{
|
|
id: "cat-boxing", title: "Boxeo y Artes Marciales", description: "Protección y rendimiento para cada golpe.", tag: "Combate", imageSrc: "http://img.b2bpic.net/free-photo/people-practicing-taekwondo-gymnasium_23-2150207140.jpg", imageAlt: "Boxing gloves and punching bag", buttons: [
|
|
{
|
|
text: "Ver más", href: "#productos"},
|
|
],
|
|
},
|
|
{
|
|
id: "cat-running", title: "Running", description: "Equipamiento ligero y duradero para corredores.", tag: "Velocidad", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-muscular-afro-american-sportsman_171337-9461.jpg", imageAlt: "Runner on a track", buttons: [
|
|
{
|
|
text: "Ver más", href: "#productos"},
|
|
],
|
|
},
|
|
{
|
|
id: "cat-cycling", title: "Ciclismo", description: "Todo lo necesario para tus rutas urbanas o de montaña.", tag: "Resistencia", imageSrc: "http://img.b2bpic.net/free-photo/portrait-cartoon-sports-team_23-2151756285.jpg", imageAlt: "Cyclist on a road", buttons: [
|
|
{
|
|
text: "Ver más", href: "#productos"},
|
|
],
|
|
},
|
|
{
|
|
id: "cat-functional", title: "Entrenamiento Funcional", description: "Herramientas versátiles para un entrenamiento completo.", tag: "Funcional", imageSrc: "http://img.b2bpic.net/free-photo/fitness-sporty-girl-sportswear-stadium-outdoor-sports-happy-sexy-woman-workout-doing-exercises_627829-10237.jpg", imageAlt: "Functional training equipment", buttons: [
|
|
{
|
|
text: "Ver más", href: "#productos"},
|
|
],
|
|
},
|
|
{
|
|
id: "cat-accessories", title: "Accesorios Deportivos", description: "Comodidad y soporte para cada sesión de entrenamiento.", tag: "Esenciales", imageSrc: "http://img.b2bpic.net/free-photo/top-view-composition-with-neatly-arranged-organized-sport-items_23-2150275269.jpg", imageAlt: "Sports accessories", buttons: [
|
|
{
|
|
text: "Ver más", href: "#productos"},
|
|
],
|
|
},
|
|
]}
|
|
title="Explora Nuestras Categorías Destacadas"
|
|
description="Encuentra el equipo perfecto para cada disciplina y lleva tu entrenamiento al máximo."
|
|
/>
|
|
</div>
|
|
|
|
<div id="productos" data-section="productos">
|
|
<ProductCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "prod-football-kit", brand: "HYPERCORE", name: "Kit de Entrenamiento para Fútbol", price: "$49.99", rating: 5,
|
|
reviewCount: "120", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EfzTWa3wy34NXvkTnn5rG7oZS2/uploaded-1780586171209-nlkekamd.png", imageAlt: "Football training kit"},
|
|
{
|
|
id: "prod-handgrip", brand: "HYPERCORE", name: "Hand Grip Ajustable", price: "$14.99", rating: 4.5,
|
|
reviewCount: "85", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EfzTWa3wy34NXvkTnn5rG7oZS2/uploaded-1780586067897-29oatyau.jpg", imageAlt: "Adjustable hand grip"},
|
|
{
|
|
id: "prod-boxing-gloves", brand: "Venum", name: "Guantes de Boxeo Venum", price: "$89.99", rating: 5,
|
|
reviewCount: "150", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EfzTWa3wy34NXvkTnn5rG7oZS2/uploaded-1780586075402-6idmgap4.jpg", imageAlt: "Venum boxing gloves"},
|
|
{
|
|
id: "prod-nike-duffle", brand: "Nike", name: "Tula Deportiva Nike", price: "$39.99", rating: 4,
|
|
reviewCount: "90", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EfzTWa3wy34NXvkTnn5rG7oZS2/uploaded-1780586258663-deeu7eoz.jpg", imageAlt: "Nike sports duffle bag"},
|
|
{
|
|
id: "prod-resistance-bands", brand: "HYPERCORE", name: "Bandas de Resistencia", price: "$29.99", rating: 4.5,
|
|
reviewCount: "110", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EfzTWa3wy34NXvkTnn5rG7oZS2/uploaded-1780586331795-g6h32qhk.jpg", imageAlt: "Set of resistance bands"},
|
|
{
|
|
id: "prod-finger-trainer", brand: "HYPERCORE", name: "", price: "$19.99", rating: 4,
|
|
reviewCount: "60", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EfzTWa3wy34NXvkTnn5rG7oZS2/uploaded-1780586389594-ipjged4g.jpg", imageAlt: "Finger strength trainer"},
|
|
{
|
|
id: "prod-polarized-glasses", brand: "Rockbros", name: "Gafas Rockbros 5 LentesPolarizadas ", price: "$59.99", rating: 4.5,
|
|
reviewCount: "75", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EfzTWa3wy34NXvkTnn5rG7oZS2/uploaded-1780586440036-hgl8bd6r.jpg", imageAlt: "Polarized sports glasses"},
|
|
{
|
|
id: "prod-thermal-bottle", brand: "HYPERCORE", name: "Termo Botella AceroSoporte Celular ", price: "$24.99", rating: 5,
|
|
reviewCount: "130", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EfzTWa3wy34NXvkTnn5rG7oZS2/uploaded-1780586479374-n4cguuct.jpg", imageAlt: "Thermal sports bottle"},
|
|
]}
|
|
title="PRODUCTOS DESTACADOS"
|
|
description="Nuestra selección de los artículos más populares y mejor valorados para atletas como tú."
|
|
/>
|
|
</div>
|
|
|
|
<div id="promociones" data-section="promociones">
|
|
<FeatureCardMedia
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
id: "promo-shipping", title: "Envíos a todo Colombia", description: "Recibe tus productos en la puerta de tu casa, sin importar dónde te encuentres en Colombia.", tag: "Comodidad", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-online-freight-order-tracking_1048-5610.jpg", imageAlt: "Delivery truck icon"},
|
|
{
|
|
id: "promo-quality", title: "Productos de alta calidad", description: "Solo trabajamos con las mejores marcas para garantizar la durabilidad y rendimiento.", tag: "Garantía", imageSrc: "http://img.b2bpic.net/free-vector/certified-extended-warranty-service-label-with-security-shielded-sign_1017-62784.jpg", imageAlt: "Quality badge"},
|
|
]}
|
|
title="Beneficios Exclusivos HYPERCORE"
|
|
description="Tu experiencia de compra es nuestra prioridad. Disfruta de ventajas inigualables con cada pedido."
|
|
/>
|
|
</div>
|
|
|
|
<div id="ventajas" data-section="ventajas">
|
|
<FeatureCardMedia
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: "why-quality", title: "Calidad Garantizada", description: "Cada artículo es seleccionado bajo estrictos estándares de calidad y rendimiento.", tag: "Confianza", imageSrc: "http://img.b2bpic.net/free-photo/authorized-guaranteed-certificate-approved-product_53876-127708.jpg", imageAlt: "Quality shield icon"},
|
|
{
|
|
id: "why-fastshipping", title: "Envíos Rápidos", description: "Recibe tus pedidos en tiempo récord para que empieces a entrenar cuanto antes.", tag: "Eficiencia", imageSrc: "http://img.b2bpic.net/free-photo/courier-doing-jobs-logistics_23-2149229174.jpg", imageAlt: "Fast shipping truck"},
|
|
{
|
|
id: "why-personalattention", title: "Atención Personalizada", description: "Nuestro equipo te asesorará para que encuentres exactamente lo que necesitas.", tag: "Soporte", imageSrc: "http://img.b2bpic.net/free-photo/pleased-young-bald-call-center-man-wearing-headset-sitting-desk-with-work-tools-looking-laptop-isolated-white-background_141793-84105.jpg", imageAlt: "Customer service headset"},
|
|
]}
|
|
title="¿Por Qué Elegir HYPERCORE?"
|
|
description="Comprometidos con tu éxito, ofrecemos una experiencia de compra superior y productos que impulsan tu potencial."
|
|
/>
|
|
</div>
|
|
|
|
<div id="redes-sociales" data-section="redes-sociales">
|
|
<FeatureCardMedia
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
id: "social-instagram", title: "Instagram", description: "@hypercore_digital_store", tag: "Síguenos", imageSrc: "http://img.b2bpic.net/free-photo/electronic-gadgets-slate-coffee-with-mobile-social-media-icons_23-2147841372.jpg", imageAlt: "Instagram logo", buttons: [
|
|
{
|
|
text: "Visitar", href: "https://www.instagram.com/hypercore_digital_store"},
|
|
],
|
|
},
|
|
{
|
|
id: "social-tiktok", title: "TikTok", description: "@hypercore_store", tag: "Síguenos", imageSrc: "http://img.b2bpic.net/free-photo/front-view-girls-dancing-together_23-2149602074.jpg", imageAlt: "TikTok logo", buttons: [
|
|
{
|
|
text: "Visitar", href: "https://www.tiktok.com/@hypercore_store"},
|
|
],
|
|
},
|
|
{
|
|
id: "social-youtube", title: "YouTube", description: "@HyperCore-x9d", tag: "Síguenos", imageSrc: "http://img.b2bpic.net/free-photo/woman-sitting-with-opened-laptop-headphones_23-2147934522.jpg", imageAlt: "YouTube logo", buttons: [
|
|
{
|
|
text: "Visitar", href: "https://www.youtube.com/@HyperCore-x9d"},
|
|
],
|
|
},
|
|
]}
|
|
title="Conéctate con HYPERCORE"
|
|
description="Síguenos en nuestras redes para no perderte las últimas novedades, ofertas exclusivas y contenido inspirador."
|
|
/>
|
|
</div>
|
|
|
|
<div id="nosotros" data-section="nosotros">
|
|
<InlineImageSplitTextAbout
|
|
useInvertedBackground={false}
|
|
heading={[
|
|
{
|
|
type: "text", content: "Acerca de HYPERCORE: Tu Aliado Deportivo"},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Conoce Más", href: "#"},
|
|
{
|
|
text: "Nuestra Misión", href: "#"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3EfzTWa3wy34NXvkTnn5rG7oZS2/uploaded-1780584761677-5anj9xoo.png"
|
|
logoAlt="HYPERCORE Logo"
|
|
logoText="HYPERCORE"
|
|
columns={[
|
|
{
|
|
title: "Enlaces Rápidos", items: [
|
|
{
|
|
label: "Inicio", href: "#hero"},
|
|
{
|
|
label: "Categorías", href: "#categorias"},
|
|
{
|
|
label: "Productos", href: "#productos"},
|
|
{
|
|
label: "Nosotros", href: "#nosotros"},
|
|
],
|
|
},
|
|
{
|
|
title: "Atención al Cliente", items: [
|
|
{
|
|
label: "Contacto", href: "#"},
|
|
{
|
|
label: "Preguntas Frecuentes", href: "#"},
|
|
{
|
|
label: "Política de Privacidad", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
title: "Síguenos", items: [
|
|
{
|
|
label: "WhatsApp", href: "https://wa.me/XXXXXXXXX"},
|
|
{
|
|
label: "Instagram", href: "https://www.instagram.com/hypercore_digital_store"},
|
|
{
|
|
label: "TikTok", href: "https://www.tiktok.com/@hypercore_store"},
|
|
{
|
|
label: "YouTube", href: "https://www.youtube.com/@HyperCore-x9d"},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2024 HYPERCORE. Todos los derechos reservados."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|