Files
ebb56892-09d7-4733-aedb-2eb…/src/app/page.tsx

189 lines
9.4 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import { Award, Leaf, Users, Utensils, Wine } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="bounce-effect"
defaultTextAnimation="background-highlight"
borderRadius="rounded"
contentWidth="small"
sizing="mediumSizeLargeTitles"
background="grid"
cardStyle="soft-shadow"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="radial-glow"
headingFontWeight="semibold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{ name: "Inicio", id: "hero" },
{ name: "Sobre Nosotros", id: "about" },
{ name: "Menú", id: "menu" },
{ name: "Contacto", id: "contact" },
]}
brandName="El Péndulo"
/>
</div>
<div id="hero" data-section="hero">
<HeroCentered
background={{ variant: "radial-gradient" }}
title="El Péndulo: Excelencia Culinaria"
description="Viva un viaje gastronómico inolvidable donde la pasión por la comida se encuentra con la elegancia."
avatars={[
{ src: "http://img.b2bpic.net/free-photo/smiling-woman-red-hat-talking-with-man_171337-16410.jpg", alt: "diner" },
{ src: "http://img.b2bpic.net/free-photo/people-cheering-with-wine-glasses-luxurious-restaurant_23-2150517447.jpg", alt: "diner" },
{ src: "http://img.b2bpic.net/free-photo/couples-celebrating-birthday_23-2149891062.jpg", alt: "diner" },
{ src: "http://img.b2bpic.net/free-photo/medium-shot-man-luxury-restaurant_23-2150598415.jpg", alt: "diner" },
{ src: "http://img.b2bpic.net/free-photo/couple-having-date-together-luxurious-restaurant_23-2150517423.jpg", alt: "diner" },
]}
buttons={[{ text: "Reservar Mesa", href: "#contact" }]}
marqueeItems={[
{ type: "text-icon", text: "Recomendado por Michelin", icon: Award },
{ type: "text-icon", text: "Ingredientes de Temporada", icon: Leaf },
{ type: "text-icon", text: "Sumilleres Expertos", icon: Wine },
{ type: "text-icon", text: "Eventos Privados", icon: Users },
{ type: "text-icon", text: "Alta Cocina", icon: Utensils },
]}
/>
</div>
<div id="about" data-section="about">
<TestimonialAboutCard
useInvertedBackground={false}
tag="Nuestra Historia"
title="Creado con Pasión"
description="El Péndulo se dedica al arte de la alta cocina, trayendo inspiraciones globales a su mesa."
subdescription="Cada ingrediente se selecciona con cuidado para garantizar la máxima calidad culinaria."
icon={Award}
imageSrc="http://img.b2bpic.net/free-photo/focused-male-cook-garnishing-dish-with-freshly-cut-vegetables-stove_482257-127704.jpg"
mediaAnimation="blur-reveal"
imageAlt="chef profesional cocinando"
/>
</div>
<div id="menu" data-section="menu">
<ProductCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={true}
products={[
{ id: "p1", name: "Entrante de Autor", price: "$18", imageSrc: "http://img.b2bpic.net/free-photo/caesar-salad-with-fresh-vegetable-chicken-salad-white-plate-wood-table-delicious-salad_114579-113.jpg" },
{ id: "p2", name: "Pasta Artesanal", price: "$24", imageSrc: "http://img.b2bpic.net/free-photo/salad-with-red-caviar-salmon-avocado_140725-6797.jpg" },
{ id: "p3", name: "Steak de Primera", price: "$42", imageSrc: "http://img.b2bpic.net/free-photo/gourmet-seared-duck-breast-with-roasted-vegetables-rich-sauce_84443-72273.jpg" },
{ id: "p4", name: "Postre Decadente", price: "$14", imageSrc: "http://img.b2bpic.net/free-photo/elegant-gourmet-dessert-with-flowers-white-plate_23-2151973732.jpg" },
{ id: "p5", name: "Ensalada Fresca", price: "$16", imageSrc: "http://img.b2bpic.net/free-photo/vegetable-salad-with-tomato-cucumber-bell-peppers-red-onion-grated-parmesan-parsley_140725-8477.jpg" },
{ id: "p6", name: "Plato de Marisco", price: "$38", imageSrc: "http://img.b2bpic.net/free-photo/mussels-cream-sauce-served-with-green-salad_140725-5873.jpg" },
]}
title="Nuestras Creaciones"
description="Explore nuestros platos estrella creados por nuestros expertos chefs."
/>
</div>
<div id="features" data-section="features">
<FeatureCardEight
textboxLayout="default"
useInvertedBackground={false}
features={[
{ title: "Chefs Expertos", description: "Artistas culinarios formados internacionalmente.", imageSrc: "http://img.b2bpic.net/free-photo/professional-chef-prepares-shrimps-ai-generated-image_511042-1788.jpg" },
{ title: "Del Campo a la Mesa", description: "Ingredientes frescos, locales y sostenibles.", imageSrc: "http://img.b2bpic.net/free-photo/traditional-waldorf-salad-wooden-background-top-view_127032-3264.jpg" },
{ title: "Ambiente Acogedor", description: "Iluminación perfecta para reuniones íntimas.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-wedding-reception-hall-with-decorated-luxury-table-setting_181624-13771.jpg" },
]}
title="¿Por qué elegirnos?"
description="El Péndulo ofrece una mezcla única de atmósfera y sabor."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardSeven
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={true}
metrics={[
{ id: "m1", value: "10k+", title: "Clientes Felices", items: ["Local", "Internacional"] },
{ id: "m2", value: "50+", title: "Variedades de Menú", items: ["Autor", "Estacional"] },
{ id: "m3", value: "5*", title: "Calificación", items: ["Calidad", "Servicio"] },
]}
title="Excelencia en Servicio"
description="Nuestros números hablan de la experiencia."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardSix
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{ id: "t1", name: "Alice M.", handle: "@alicem", testimonial: "Sabores increíbles, la mejor alta cocina de la ciudad.", imageSrc: "http://img.b2bpic.net/free-photo/adults-enjoying-mexican-food_23-2149663852.jpg" },
{ id: "t2", name: "Bob R.", handle: "@bobr", testimonial: "Excelente maridaje de vinos y servicio.", imageSrc: "http://img.b2bpic.net/free-photo/happy-couple-having-fun-while-eating-dessert-taking-selfie-cafe_637285-9092.jpg" },
{ id: "t3", name: "Charlie D.", handle: "@charlied", testimonial: "La atmósfera no tiene igual.", imageSrc: "http://img.b2bpic.net/free-photo/couple-together-valentines-day-restaurant_1303-20372.jpg" },
{ id: "t4", name: "Diana K.", handle: "@dianak", testimonial: "Cada plato era una obra de arte.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-elder-woman-having-dessert-while-working_23-2148661257.jpg" },
{ id: "t5", name: "Evan L.", handle: "@evanl", testimonial: "Simplemente una experiencia espectacular.", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-woman-eating-donut-talking-her-boyfriend-cafe_637285-9080.jpg" },
]}
title="Reseñas"
description="Lo que nuestros comensales dicen de El Péndulo."
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={true}
title="Reserve Su Mesa"
description="Esperamos darle la bienvenida pronto."
inputs={[
{ name: "name", type: "text", placeholder: "Nombre", required: true },
{ name: "email", type: "email", placeholder: "Correo", required: true },
]}
textarea={{ name: "message", placeholder: "¿Alguna petición especial?", required: false }}
imageSrc="http://img.b2bpic.net/free-photo/full-shot-smiley-man-wearing-apron_23-2149434487.jpg"
imageAlt="restaurante exterior"
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "El Péndulo", items: [
{ label: "Sobre Nosotros", href: "#about" },
{ label: "Menú", href: "#menu" },
],
},
{
title: "Contacto", items: [
{ label: "Reservar", href: "#contact" },
{ label: "Carreras", href: "#" },
],
},
{
title: "Social", items: [
{ label: "Instagram", href: "#" },
{ label: "Facebook", href: "#" },
]
}
]}
bottomLeftText="© 2024 El Péndulo"
bottomRightText="Todos los derechos reservados."
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}