Merge version_2 into main #2
353
src/app/page.tsx
353
src/app/page.tsx
@@ -2,6 +2,7 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { useState } from "react";
|
||||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
||||
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
||||
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||
@@ -9,9 +10,12 @@ import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarou
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||||
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
||||
import { Book, Heart, MapPin } from "lucide-react";
|
||||
import Input from '@/components/form/Input';
|
||||
import { Book, Heart, MapPin, Search } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="elastic-effect"
|
||||
@@ -26,265 +30,106 @@ export default function LandingPage() {
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Inicio",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Sobre Nosotros",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Catálogo",
|
||||
id: "products",
|
||||
},
|
||||
{
|
||||
name: "Contacto",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="Books & Soul"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Inicio", id: "hero" },
|
||||
{ name: "Sobre Nosotros", id: "about" },
|
||||
{ name: "Catálogo", id: "products" },
|
||||
{ name: "Contacto", id: "contact" },
|
||||
]}
|
||||
brandName="Books & Soul"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Viajes Épicos, Destinos Modernos"
|
||||
description="Descubre las historias que forjaron el mundo y los héroes que siguen inspirándonos. En Books & Soul, cada libro es una nueva aventura."
|
||||
tag="Tu Próxima Lectura"
|
||||
buttons={[
|
||||
{
|
||||
text: "Explorar Catálogo",
|
||||
href: "#products",
|
||||
},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pile-books-chair_23-2148213836.jpg?_wi=1",
|
||||
imageAlt: "BibliotecaBooksAndSoul",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=c4iikz&_wi=1",
|
||||
imageAlt: "Circe",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-reading-book_23-2149652015.jpg?_wi=1",
|
||||
imageAlt: "Aquiles",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-covering-face-with-book_23-2148369454.jpg?_wi=1",
|
||||
imageAlt: "MitosFry",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/menu-arab-restaurant_23-2147796953.jpg?_wi=1",
|
||||
imageAlt: "Odisea",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fairytale-scene-coming-out-book_23-2151778582.jpg",
|
||||
imageAlt: "ViajeHeroe",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardCarousel
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Viajes Épicos, Destinos Modernos"
|
||||
description="Descubre las historias que forjaron el mundo y los héroes que siguen inspirándonos. En Books & Soul, cada libro es una nueva aventura."
|
||||
tag="Tu Próxima Lectura"
|
||||
buttons={[{ text: "Explorar Catálogo", href: "#products" }]}
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/pile-books-chair_23-2148213836.jpg?_wi=1", imageAlt: "BibliotecaBooksAndSoul" },
|
||||
{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=c4iikz&_wi=1", imageAlt: "Circe" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-reading-book_23-2149652015.jpg?_wi=1", imageAlt: "Aquiles" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/woman-covering-face-with-book_23-2148369454.jpg?_wi=1", imageAlt: "MitosFry" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/menu-arab-restaurant_23-2147796953.jpg?_wi=1", imageAlt: "Odisea" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/fairytale-scene-coming-out-book_23-2151778582.jpg", imageAlt: "ViajeHeroe" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={true}
|
||||
title="Nuestra Esencia"
|
||||
metrics={[
|
||||
{
|
||||
icon: Book,
|
||||
label: "Libros Curados",
|
||||
value: "10K+",
|
||||
},
|
||||
{
|
||||
icon: Heart,
|
||||
label: "Clientes Felices",
|
||||
value: "5K+",
|
||||
},
|
||||
{
|
||||
icon: MapPin,
|
||||
label: "Puntos en Nordelta",
|
||||
value: "3",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="search" data-section="search" className="flex flex-col items-center py-12 px-6 bg-[var(--background)]">
|
||||
<div className="flex w-full max-w-lg items-center gap-2 mb-4">
|
||||
<Search className="w-6 h-6 text-[var(--primary-cta)]" />
|
||||
<Input value={search} onChange={setSearch} placeholder="Buscar nuevos libros para agregar al catálogo..." />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Circe - Madeline Miller",
|
||||
price: "$24.99",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gqz4pf",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "La Canción de Aquiles",
|
||||
price: "$22.50",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/elegant-woman-with-books_23-2147848202.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Mitos - Stephen Fry",
|
||||
price: "$28.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-girl-holding-book_23-2148171403.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "La Odisea Ilustrada",
|
||||
price: "$35.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-red-hooded-jacket-while-holding-titled-book_155996-9.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "La Ilíada - Colección",
|
||||
price: "$32.00",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-vintage-disks-second-hand-market_23-2149338471.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "El Viaje del Héroe",
|
||||
price: "$19.99",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pirate-artifacts-arrangement-still-life_23-2150426418.jpg",
|
||||
},
|
||||
]}
|
||||
title="Relatos de Héroes y Mitos"
|
||||
description="Ediciones especiales y novedades que capturan la épica del camino del héroe."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split-description"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "1", name: "Circe - Madeline Miller", price: "$24.99", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gqz4pf" },
|
||||
{ id: "2", name: "La Canción de Aquiles", price: "$22.50", imageSrc: "http://img.b2bpic.net/free-photo/elegant-woman-with-books_23-2147848202.jpg" },
|
||||
{ id: "3", name: "Mitos - Stephen Fry", price: "$28.00", imageSrc: "http://img.b2bpic.net/free-photo/young-girl-holding-book_23-2148171403.jpg" },
|
||||
{ id: "4", name: "La Odisea Ilustrada", price: "$35.00", imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-red-hooded-jacket-while-holding-titled-book_155996-9.jpg" },
|
||||
{ id: "5", name: "La Ilíada - Colección", price: "$32.00", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-vintage-disks-second-hand-market_23-2149338471.jpg" },
|
||||
{ id: "6", name: "El Viaje del Héroe", price: "$19.99", imageSrc: "http://img.b2bpic.net/free-photo/pirate-artifacts-arrangement-still-life_23-2150426418.jpg" },
|
||||
]}
|
||||
title="Relatos de Héroes y Mitos"
|
||||
description="Ediciones especiales y novedades que capturan la épica del camino del héroe."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="split-description"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Lucía P.",
|
||||
date: "12/03/2024",
|
||||
title: "Amante de los mitos",
|
||||
quote: "La atención personalizada es única, siempre saben qué recomendarme.",
|
||||
tag: "Cliente",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/smart-girl-taking-book-from-shelf_1098-1054.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pile-books-chair_23-2148213836.jpg?_wi=2",
|
||||
imageAlt: "cliente sonriente en librería",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Martín G.",
|
||||
date: "15/03/2024",
|
||||
title: "Padre y lector",
|
||||
quote: "Los mejores libros infantiles y juveniles en la zona de Talar.",
|
||||
tag: "Cliente",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/high-angle-girl-reading-book_23-2148678365.jpg",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=c4iikz&_wi=2",
|
||||
imageAlt: "cliente sonriente en librería",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Elena R.",
|
||||
date: "18/03/2024",
|
||||
title: "Lectora voraz",
|
||||
quote: "El servicio de intercambio entre sucursales es salvavidas.",
|
||||
tag: "Cliente",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/young-man-wearing-blue-outfit-drinking-water_1298-218.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-reading-book_23-2149652015.jpg?_wi=2",
|
||||
imageAlt: "cliente sonriente en librería",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Carlos M.",
|
||||
date: "20/03/2024",
|
||||
title: "Coleccionista",
|
||||
quote: "Ediciones de lujo que no encuentras en otros lugares.",
|
||||
tag: "Cliente",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/young-woman-reading-book-while-having-breakfast_23-2147944633.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-covering-face-with-book_23-2148369454.jpg?_wi=2",
|
||||
imageAlt: "cliente sonriente en librería",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Sofía A.",
|
||||
date: "22/03/2024",
|
||||
title: "Fan de la épica",
|
||||
quote: "Cada recomendación es un viaje nuevo, gracias por tanta magia.",
|
||||
tag: "Cliente",
|
||||
avatarSrc: "http://img.b2bpic.net/free-photo/woman-holds-bible-her-hands-religion-concept-bible-close-up_169016-66715.jpg",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/menu-arab-restaurant_23-2147796953.jpg?_wi=2",
|
||||
imageAlt: "cliente sonriente en librería",
|
||||
},
|
||||
]}
|
||||
title="Voces de nuestra comunidad"
|
||||
description="Historias que han encontrado su alma en nuestras estanterías."
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={true}
|
||||
title="Nuestra Esencia"
|
||||
metrics={[
|
||||
{ icon: Book, label: "Libros Curados", value: "10K+" },
|
||||
{ icon: Heart, label: "Clientes Felices", value: "5K+" },
|
||||
{ icon: MapPin, label: "Puntos en Nordelta", value: "3" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
tag="Contáctanos"
|
||||
title="¿Buscas un título difícil de hallar?"
|
||||
description="Escríbenos por Instagram o visítanos en Nordelta. Movemos el mundo literario por ti."
|
||||
buttons={[
|
||||
{
|
||||
text: "Consultar vía Instagram",
|
||||
href: "https://instagram.com",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="split-description"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[]}
|
||||
title="Voces de nuestra comunidad"
|
||||
description="Historias que han encontrado su alma en nuestras estanterías."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Books & Soul"
|
||||
columns={[
|
||||
{
|
||||
title: "Navegación",
|
||||
items: [
|
||||
{
|
||||
label: "Inicio",
|
||||
href: "#hero",
|
||||
},
|
||||
{
|
||||
label: "Catálogo",
|
||||
href: "#products",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Contacto",
|
||||
items: [
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "https://instagram.com",
|
||||
},
|
||||
{
|
||||
label: "Sucursales",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
tag="Contáctanos"
|
||||
title="¿Buscas un título difícil de hallar?"
|
||||
description="Escríbenos por Instagram o visítanos en Nordelta. Movemos el mundo literario por ti."
|
||||
buttons={[{ text: "Consultar vía Instagram", href: "https://instagram.com" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseCard
|
||||
logoText="Books & Soul"
|
||||
columns={[
|
||||
{ title: "Navegación", items: [{ label: "Inicio", href: "#hero" }, { label: "Catálogo", href: "#products" }] },
|
||||
{ title: "Contacto", items: [{ label: "Instagram", href: "https://instagram.com" }, { label: "Sucursales", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user