250 lines
15 KiB
TypeScript
250 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
|
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
|
import { Layers, Star } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="mediumLarge"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="grid"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{
|
|
name: "Inicio", id: "#hero"},
|
|
{
|
|
name: "Beneficios", id: "#benefits"},
|
|
{
|
|
name: "Especificaciones", id: "#specs"},
|
|
{
|
|
name: "Opiniones", id: "#testimonials"},
|
|
{
|
|
name: "Preguntas Frecuentes", id: "#faq"},
|
|
]}
|
|
button={{
|
|
text: "¡Comprar Ahora!", href: "#contact"}}
|
|
brandName="Shaker Pro Sport"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardGallery
|
|
background={{
|
|
variant: "plain"}}
|
|
title="Tu Batido Perfecto, Siempre Contigo."
|
|
description="El Shaker Pro Sport con Compartimentos es la solución definitiva para tus suplementos. Mezcla sin grumos, lleva tus polvos y píldoras, y disfruta de tus bebidas sin preocupaciones de fugas. ¡Tu compañero ideal para el gimnasio!"
|
|
buttons={[
|
|
{
|
|
text: "¡Consigue el Tuyo Hoy!", href: "#contact"},
|
|
]}
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dx69J9LUHR4wAHLCnT3lUJrNQv/uploaded-1781213535312-legehcgr.png", imageAlt: "Mujer bebiendo de un Shaker Pro Sport en el gimnasio."},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dx69J9LUHR4wAHLCnT3lUJrNQv/uploaded-1781213535313-nkrk0lye.png", imageAlt: "Shaker Pro Sport con sus dimensiones."},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dx69J9LUHR4wAHLCnT3lUJrNQv/uploaded-1781213535313-dlxqmo0s.png", imageAlt: "Shaker Pro Sport mostrando el logo."},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/yoga-essentials-arrangement-high-angle_23-2149442702.jpg", imageAlt: "Shaker Pro Sport sobre un banco de gimnasio."},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/my-preparing-active-day_329181-7966.jpg", imageAlt: "Preparando el Shaker Pro Sport con proteína en polvo."},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/woman-with-visible-abs-doing-fitness_23-2150165220.jpg", imageAlt: "Persona corriendo mientras sostiene el Shaker Pro Sport."},
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="benefits" data-section="benefits">
|
|
<FeatureBorderGlow
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
icon: Star,
|
|
title: "Sin Grumos", description: "Gracias a su avanzado sistema de mezclado, tus batidos quedarán perfectamente homogéneos en todo momento."},
|
|
{
|
|
icon: Layers,
|
|
title: "Todo en Uno", description: "Con compartimentos inferiores integrados, lleva tu polvo de proteína extra y tus suplementos/pastillas cómodamente."},
|
|
{
|
|
icon: Star,
|
|
title: "100% Hermético", description: "Olvídate de las manchas en tu bolsa. Nuestro sellado a prueba de fugas garantiza que cada gota se quede en su lugar."},
|
|
]}
|
|
title="Beneficios que Transformarán tu Rutina"
|
|
description="Diseñado para los atletas más exigentes, el Shaker Pro Sport simplifica tu preparación y te mantiene enfocado en tus metas."
|
|
/>
|
|
</div>
|
|
|
|
<div id="product-details" data-section="product-details">
|
|
<ProductCardFour
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{
|
|
id: "product-1", name: "Vista Frontal", price: "Calidad Superior", variant: "Negro Elegante", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dx69J9LUHR4wAHLCnT3lUJrNQv/uploaded-1781213535313-nkrk0lye.png", imageAlt: "Shaker Pro Sport vista frontal."},
|
|
{
|
|
id: "product-2", name: "Compartimentos Abiertos", price: "Almacenamiento Inteligente", variant: "Organización Perfecta", imageSrc: "http://img.b2bpic.net/free-photo/dumbbell-water-bottle-beach-sand-high-quality-photo_114579-92230.jpg", imageAlt: "Shaker Pro Sport con compartimentos inferiores abiertos."},
|
|
{
|
|
id: "product-3", name: "En Acción", price: "Rendimiento Impecable", variant: "Mezcla Optimizada", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dx69J9LUHR4wAHLCnT3lUJrNQv/uploaded-1781213535312-legehcgr.png", imageAlt: "Mujer usando el Shaker Pro Sport."},
|
|
{
|
|
id: "product-4", name: "Tapa Antifugas", price: "Seguridad Total", variant: "Sellado Superior", imageSrc: "http://img.b2bpic.net/free-photo/closeup-pills-viral-disease_53876-95043.jpg", imageAlt: "Primer plano de la tapa antifugas del Shaker Pro Sport."},
|
|
{
|
|
id: "product-5", name: "Logotipo Vibrante", price: "Estilo Único", variant: "Marca con Carácter", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Dx69J9LUHR4wAHLCnT3lUJrNQv/uploaded-1781213535313-dlxqmo0s.png", imageAlt: "Shaker Pro Sport mostrando el logotipo."},
|
|
{
|
|
id: "product-6", name: "Agarre Ergonómico", price: "Comodidad Excepcional", variant: "Diseño Pensado", imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-holding-water-bottle-gym_23-2147827404.jpg", imageAlt: "Mano agarrando el Shaker Pro Sport mostrando su diseño ergonómico."},
|
|
]}
|
|
title="Shaker Pro Sport: Innovación en Cada Detalle"
|
|
description="Diseñado con la funcionalidad y la durabilidad en mente, para que cada preparación sea impecable."
|
|
/>
|
|
</div>
|
|
|
|
<div id="specs" data-section="specs">
|
|
<MetricCardEleven
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "spec-1", value: "16oz (500ml)", title: "Capacidad Ideal", description: "Perfecto para tus batidos pre y post-entrenamiento, manteniendo el tamaño compacto.", imageSrc: "http://img.b2bpic.net/free-photo/crop-partners-sharing-with-bottle_23-2147758039.jpg", imageAlt: "Medidas de capacidad del shaker."},
|
|
{
|
|
id: "spec-2", value: "Libre de BPA", title: "Material Seguro", description: "Fabricado con plásticos de alta calidad, garantizando que sea seguro para tu salud y el medio ambiente.", imageSrc: "http://img.b2bpic.net/free-photo/green-yoga-essentials-arrangement_23-2149442714.jpg", imageAlt: "Etiqueta de BPA Free."},
|
|
{
|
|
id: "spec-3", value: "Sellado Superior", title: "Anti-fugas Total", description: "Disfruta sin derrames ni preocupaciones, incluso en los movimientos más intensos o al transportarlo.", imageSrc: "http://img.b2bpic.net/free-photo/aluminum-bottle-packaging-liquids_23-2150821007.jpg", imageAlt: "Mecanismo de sellado del shaker."},
|
|
{
|
|
id: "spec-4", value: "Diseño Inteligente", title: "Limpieza Fácil", description: "Todas las piezas son desmontables y aptas para lavavajillas, asegurando una higiene perfecta sin esfuerzo.", imageSrc: "http://img.b2bpic.net/free-photo/barman-filling-shaker-with-ice_23-2148209409.jpg", imageAlt: "Shaker desmontado para limpieza."},
|
|
]}
|
|
title="Especificaciones Técnicas Avanzadas"
|
|
description="Cada detalle cuenta para tu rendimiento y la durabilidad de tu shaker."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardThirteen
|
|
animationType="depth-3d"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "t1", name: "Laura G.", handle: "@laura.fit", testimonial: "¡Increíble! Es el shaker más práctico que he tenido. Los compartimentos son un salvavidas para mi proteína extra. Súper recomendado.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-shot-smiling-sportswoman-wearing-activewear-sits-medicine-ball_197531-22610.jpg", imageAlt: "Foto de Laura G."},
|
|
{
|
|
id: "t2", name: "Carlos M.", handle: "@carlos.gym", testimonial: "Adiós a los grumos y a las bolsas mojadas. Este shaker es robusto, hermético y se limpia en segundos. ¡Un 10/10!", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/successful-sporty-male-shows-his-big-finger-up_613910-1080.jpg", imageAlt: "Foto de Carlos M."},
|
|
{
|
|
id: "t3", name: "Sofía R.", handle: "@sofi.health", testimonial: "Me encanta poder llevar mis pastillas y proteína sin necesidad de varios recipientes. Es súper cómodo y el diseño es genial.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-doing-okay_1187-3964.jpg", imageAlt: "Foto de Sofía R."},
|
|
{
|
|
id: "t4", name: "David H.", handle: "@david.trainer", testimonial: "Como entrenador, valoro mucho la eficiencia. Este shaker lo tiene todo: mezcla perfecta y cero fugas. Ideal para mis clientes.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/handsome-young-runner-looking-camera_23-2148162136.jpg", imageAlt: "Foto de David H."},
|
|
{
|
|
id: "t5", name: "Elena P.", handle: "@elena.runner", testimonial: "Lo llevo a todas mis carreras y entrenamientos. La tranquilidad de que no se va a derramar es impagable. ¡Un acierto total!", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/workout-sunny-morning-beautiful-young-woman-street-with-palm-trees-tropical-city-resort-cheerful-mood-healthy-lifestyle-stretching-doing-exercise-attractive-figure_197531-2980.jpg", imageAlt: "Foto de Elena P."},
|
|
]}
|
|
showRating={true}
|
|
title="Lo que Nuestros Clientes Dicen"
|
|
description="Miles de atletas ya confían en el Shaker Pro Sport para optimizar su nutrición. ¡Únete a ellos y experimenta la diferencia con nuestra garantía de satisfacción total!"
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"Calidad Certificada", "Innovación Deportiva", "Diseño Ergonómico", "Materiales Premium", "Satisfacción Garantizada", "Rendimiento Superior", "Libre de BPA"]}
|
|
title="Confianza que Impulsa tu Rendimiento"
|
|
description="Nos enorgullece ser la elección de miles de deportistas y profesionales del fitness."
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "faq1", title: "¿Es apto para lavavajillas?", content: "Sí, todas las partes del Shaker Pro Sport son aptas para lavavajillas en la rejilla superior, para una limpieza fácil y conveniente."},
|
|
{
|
|
id: "faq2", title: "¿Tiene compartimentos para pastillas?", content: "Absolutamente. Incluye compartimentos inferiores dedicados para guardar tus píldoras y suplementos esenciales, además de polvo de proteína."},
|
|
{
|
|
id: "faq3", title: "¿Es a prueba de fugas?", content: "Garantizado. Nuestro diseño cuenta con un sellado 100% hermético para asegurar que tus bebidas se queden dentro del shaker y no en tu bolsa, sin importar la actividad."},
|
|
]}
|
|
sideTitle="Preguntas Frecuentes"
|
|
sideDescription="¿Tienes dudas? Aquí resolvemos las más comunes sobre tu nuevo Shaker Pro Sport."
|
|
faqsAnimation="slide-up"
|
|
textPosition="left"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
useInvertedBackground={true}
|
|
background={{
|
|
variant: "plain"}}
|
|
tag="¡No Esperes Más!"
|
|
title="Optimiza tu Hidratación y Nutrición"
|
|
description="Haz que cada batido sea perfecto, sin importar dónde te encuentres. ¡Pide tu Shaker Pro Sport hoy mismo y transforma tu rutina!"
|
|
imageSrc="http://img.b2bpic.net/free-photo/young-man-making-sport-exercises-home_1328-3062.jpg"
|
|
imageAlt="Persona activa usando el Shaker Pro Sport en un entorno de gimnasio."
|
|
mediaAnimation="opacity"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="Shaker Pro Sport"
|
|
columns={[
|
|
{
|
|
title: "Producto", items: [
|
|
{
|
|
label: "Características", href: "#benefits"},
|
|
{
|
|
label: "Especificaciones", href: "#specs"},
|
|
{
|
|
label: "Preguntas Frecuentes", href: "#faq"},
|
|
],
|
|
},
|
|
{
|
|
title: "Empresa", items: [
|
|
{
|
|
label: "Inicio", href: "#hero"},
|
|
{
|
|
label: "Opiniones", href: "#testimonials"},
|
|
{
|
|
label: "Contacto", href: "#contact"},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2024 Shaker Pro Sport. Todos los derechos reservados."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|