Update src/app/page.tsx
This commit is contained in:
365
src/app/page.tsx
365
src/app/page.tsx
@@ -2,361 +2,154 @@
|
|||||||
|
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import ReactLenis from "lenis/react";
|
import ReactLenis from "lenis/react";
|
||||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||||
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
|
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
||||||
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||||
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
|
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
||||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
|
||||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
import TextAbout from '@/components/sections/about/TextAbout';
|
||||||
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||||
import { Utensils } from "lucide-react";
|
import { Utensils, Star, MapPin, ChefHat, Waves } from "lucide-react";
|
||||||
|
|
||||||
export default function LandingPage() {
|
export default function LandingPage() {
|
||||||
return (
|
return (
|
||||||
<ThemeProvider
|
<ThemeProvider
|
||||||
defaultButtonVariant="text-shift"
|
defaultButtonVariant="hover-magnetic"
|
||||||
defaultTextAnimation="reveal-blur"
|
defaultTextAnimation="reveal-blur"
|
||||||
borderRadius="pill"
|
borderRadius="soft"
|
||||||
contentWidth="small"
|
contentWidth="mediumLarge"
|
||||||
sizing="mediumSizeLargeTitles"
|
sizing="largeSizeMediumTitles"
|
||||||
background="fluid"
|
background="noise"
|
||||||
cardStyle="glass-depth"
|
cardStyle="glass-elevated"
|
||||||
primaryButtonStyle="diagonal-gradient"
|
primaryButtonStyle="primary-glow"
|
||||||
secondaryButtonStyle="layered"
|
secondaryButtonStyle="glass"
|
||||||
headingFontWeight="light"
|
headingFontWeight="semibold"
|
||||||
>
|
>
|
||||||
<ReactLenis root>
|
<ReactLenis root>
|
||||||
<div id="nav" data-section="nav">
|
<div id="nav" data-section="nav">
|
||||||
<NavbarStyleCentered
|
<NavbarStyleApple
|
||||||
navItems={[
|
|
||||||
{
|
|
||||||
name: "Inicio",
|
|
||||||
id: "hero",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Nuestra Historia",
|
|
||||||
id: "about",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Especialidades",
|
|
||||||
id: "features",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Menú",
|
|
||||||
id: "products",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Testimonios",
|
|
||||||
id: "testimonials",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Contacto",
|
|
||||||
id: "contact",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
brandName="La Marea"
|
brandName="La Marea"
|
||||||
|
navItems={[
|
||||||
|
{ name: "Inicio", id: "hero" },
|
||||||
|
{ name: "Nosotros", id: "about" },
|
||||||
|
{ name: "Experiencia", id: "features" },
|
||||||
|
{ name: "Menú", id: "products" },
|
||||||
|
{ name: "Testimonios", id: "testimonials" },
|
||||||
|
{ name: "Reservas", id: "contact" }
|
||||||
|
]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="hero" data-section="hero">
|
<div id="hero" data-section="hero">
|
||||||
<HeroBillboardRotatedCarousel
|
<HeroBillboardScroll
|
||||||
background={{
|
title="La Marea Punta del Este"
|
||||||
variant: "rotated-rays-animated",
|
description="Cocina mediterránea frente a la Isla Gorriti. Un refugio sofisticado donde el sabor del mar se encuentra con la elegancia cosmopolita."
|
||||||
}}
|
background={{ variant: "sparkles-gradient" }}
|
||||||
title="La Marea: Sabores del Puerto"
|
imageSrc="http://img.b2bpic.net/free-photo/decorated-wedding-reception-venue-with-view-sea-through-windows_637285-1001.jpg"
|
||||||
description="Cocina mediterránea auténtica frente a la bahía de Punta del Este, con una vista inigualable a la Isla Gorriti."
|
buttons={[{ text: "Reservar Mesa", href: "#contact" }]}
|
||||||
buttons={[
|
|
||||||
{
|
|
||||||
text: "Reservar Mesa",
|
|
||||||
href: "#contact",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
carouselItems={[
|
|
||||||
{
|
|
||||||
id: "c1",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/decorated-wedding-reception-venue-with-view-sea-through-windows_637285-1001.jpg",
|
|
||||||
imageAlt: "Restaurante con vista",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "c2",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/romantic-table-setting-wedding-reception-with-sea-view-through-windows_637285-997.jpg",
|
|
||||||
imageAlt: "Plato de pescado",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "c3",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-olives-mix-bread-oil-bottles-with-copy-space_23-2148349390.jpg",
|
|
||||||
imageAlt: "Variedad de mariscos",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "c4",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/silhouette-people-enjoying-their-time-sunset-cafe-potamos-beach-greece_181624-27427.jpg",
|
|
||||||
imageAlt: "Cocina gourmet",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "c5",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/fit-tanned-tattooed-caucasian-european-woman-with-sport-body-abs-jean-shorts-red-orange-shirt_343596-3050.jpg",
|
|
||||||
imageAlt: "Vista al puerto",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "c6",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/delicious-gulas-dish-composition_23-2149072604.jpg",
|
|
||||||
imageAlt: "Ambiente terraza",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="about" data-section="about">
|
<div id="about" data-section="about">
|
||||||
<TestimonialAboutCard
|
<TextAbout
|
||||||
useInvertedBackground={false}
|
|
||||||
tag="Nuestra Esencia"
|
tag="Nuestra Esencia"
|
||||||
title="Tradición en cada bocado"
|
title="El Corazón del Puerto"
|
||||||
description="Desde hace décadas, La Marea es un referente gastronómico en el puerto de Punta del Este. Combinamos la frescura de nuestros mares con las técnicas de la cocina mediterránea."
|
useInvertedBackground={false}
|
||||||
subdescription="Nuestro compromiso es ofrecer una experiencia donde el sabor, el entorno y el servicio se fusionan perfectamente."
|
buttons={[{ text: "Conoce más" }]}
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/wedding-hall-interior-design-photo-shooting_114579-2234.jpg"
|
|
||||||
mediaAnimation="slide-up"
|
|
||||||
icon={Utensils}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="features" data-section="features">
|
<div id="features" data-section="features">
|
||||||
<FeatureCardThree
|
<FeatureBento
|
||||||
|
title="Experiencias Gastronómicas"
|
||||||
|
description="Un menú curado con ingredientes frescos de la pesca diaria."
|
||||||
animationType="slide-up"
|
animationType="slide-up"
|
||||||
textboxLayout="default"
|
textboxLayout="split"
|
||||||
gridVariant="bento-grid"
|
|
||||||
useInvertedBackground={true}
|
useInvertedBackground={true}
|
||||||
features={[
|
features={[
|
||||||
{
|
{
|
||||||
title: "Pescados Frescos",
|
title: "Pesca del Día", description: "Capturada a pocos metros del restaurante.", bentoComponent: "reveal-icon", icon: Waves
|
||||||
description: "Selección diaria de la pesca local de nuestro puerto.",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/various-types-sausage-salami_107420-63677.jpg",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Cava Mediterránea",
|
title: "Maridaje Experto", description: "Bodegas seleccionadas para cada plato.", bentoComponent: "reveal-icon", icon: Star
|
||||||
description: "Etiquetas seleccionadas para maridar perfectamente.",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/male-hand-pouring-alcoholic-beverage-elegant-glass-table-openair-event_181624-60824.jpg",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Vistas a la Isla",
|
title: "Vista Privilegiada", description: "Cenas inolvidables frente al atardecer.", bentoComponent: "reveal-icon", icon: MapPin
|
||||||
description: "Comer frente a la Isla Gorriti es nuestra mayor virtud.",
|
}
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/nature-landscape-hawaii-with-digital-art-style_23-2151793636.jpg",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
title="Nuestra Experiencia"
|
|
||||||
description="Disfruta de una propuesta diseñada para deleitar todos tus sentidos."
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="products" data-section="products">
|
<div id="products" data-section="products">
|
||||||
<ProductCardThree
|
<ProductCatalog
|
||||||
animationType="slide-up"
|
layout="section"
|
||||||
textboxLayout="default"
|
|
||||||
gridVariant="three-columns-all-equal-width"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
products={[
|
products={[
|
||||||
{
|
{ id: "1", name: "Paella de Mariscos", price: "$85", imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-paella-dish_181624-14454.jpg" },
|
||||||
id: "p1",
|
{ id: "2", name: "Langosta al Fuego", price: "$120", imageSrc: "http://img.b2bpic.net/free-photo/grilled-lobster-with-butter-garlic_1203-9963.jpg" },
|
||||||
name: "Paella del Puerto",
|
{ id: "3", name: "Ostras Frescas", price: "$45", imageSrc: "http://img.b2bpic.net/free-photo/dish-made-oysters-with-citrus-ice-cubes_23-2150320490.jpg" }
|
||||||
price: "$1.200",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-delicious-paella-dish_181624-14454.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "p2",
|
|
||||||
name: "Langosta a la Parrilla",
|
|
||||||
price: "$2.500",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/grilled-lobster-with-butter-garlic_1203-9963.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "p3",
|
|
||||||
name: "Ensalada de Pulpo",
|
|
||||||
price: "$950",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/chicken-offal-carrot-onion-plate_114579-86161.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "p4",
|
|
||||||
name: "Mero al Horno",
|
|
||||||
price: "$1.400",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/still-life-with-delicious-eggplant_23-2150392327.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "p5",
|
|
||||||
name: "Linguine Frutti di Mare",
|
|
||||||
price: "$850",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-pasta-with-mussels-plate_23-2148375695.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "p6",
|
|
||||||
name: "Ostras Frescas",
|
|
||||||
price: "$1.100",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/dish-made-oysters-with-citrus-ice-cubes_23-2150320490.jpg",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
title="Nuestra Carta de Especialidades"
|
className="py-20"
|
||||||
description="El mar en tu mesa. Descubre nuestras creaciones principales."
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="testimonials" data-section="testimonials">
|
<div id="testimonials" data-section="testimonials">
|
||||||
<TestimonialCardSix
|
<TestimonialCardTen
|
||||||
animationType="slide-up"
|
title="Voces del Puerto"
|
||||||
|
description="Nuestra reputación construida por comensales exigentes de todo el mundo."
|
||||||
textboxLayout="default"
|
textboxLayout="default"
|
||||||
useInvertedBackground={true}
|
useInvertedBackground={true}
|
||||||
testimonials={[
|
testimonials={[
|
||||||
{
|
{ id: "t1", title: "Impecable", quote: "La experiencia más refinada de Punta del Este.", name: "Julian H.", role: "Crítico Gastronómico" },
|
||||||
id: "1",
|
{ id: "t2", title: "Magia", quote: "Cenar con esta vista cambió todo. Volveré cada verano.", name: "Sophie M.", role: "Turista Internacional" }
|
||||||
name: "Elena M.",
|
|
||||||
handle: "@elena_dining",
|
|
||||||
testimonial: "La mejor vista del puerto y los pescados son increíblemente frescos. Imperdible.",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/man-holding-hand-blond-woman-table_23-2148024532.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "2",
|
|
||||||
name: "Carlos R.",
|
|
||||||
handle: "@carlosr_food",
|
|
||||||
testimonial: "Un lugar clásico de Punta que nunca falla. La atención es de primer nivel.",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/low-angle-friends-shaking-hands_23-2148395404.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "3",
|
|
||||||
name: "Lucía P.",
|
|
||||||
handle: "@luciap_travel",
|
|
||||||
testimonial: "Cenar viendo la puesta de sol frente a la isla no tiene precio. Recomendadísimo.",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-young-woman-holding-pancakes_171337-4135.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "4",
|
|
||||||
name: "Federico G.",
|
|
||||||
handle: "@federico_g",
|
|
||||||
testimonial: "La paella es la auténtica receta mediterránea. Volveremos seguro.",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-smiling-holding-cauliflower_1303-24892.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "5",
|
|
||||||
name: "Ana S.",
|
|
||||||
handle: "@anas_gourmet",
|
|
||||||
testimonial: "El ambiente, la comida y el servicio fueron impecables. Un placer.",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/waiter-offering-couple-main-courses-restaurant_1262-1662.jpg",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
title="Lo que dicen nuestros clientes"
|
|
||||||
description="Experiencias inolvidables junto a la bahía."
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="faq" data-section="faq">
|
<div id="faq" data-section="faq">
|
||||||
<FaqDouble
|
<FaqSplitMedia
|
||||||
textboxLayout="default"
|
|
||||||
useInvertedBackground={false}
|
|
||||||
faqs={[
|
|
||||||
{
|
|
||||||
id: "f1",
|
|
||||||
title: "¿Necesito reservar?",
|
|
||||||
content: "Se recomienda reservar especialmente en temporada alta para asegurar tu mesa con vista al mar.",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "f2",
|
|
||||||
title: "¿Tienen opciones vegetarianas?",
|
|
||||||
content: "Sí, contamos con una carta seleccionada de opciones mediterráneas vegetarianas.",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "f3",
|
|
||||||
title: "¿Aceptan tarjetas?",
|
|
||||||
content: "Aceptamos todas las tarjetas de crédito internacionales y nacionales.",
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
title="Preguntas Frecuentes"
|
title="Preguntas Frecuentes"
|
||||||
description="Resolvemos tus dudas sobre tu próxima visita."
|
faqs={[
|
||||||
|
{ id: "q1", title: "¿El restaurante cuenta con estacionamiento?", content: "Sí, servicio de valet parking exclusivo." },
|
||||||
|
{ id: "q2", title: "¿Es necesario reservar?", content: "Altamente recomendado durante los meses de enero y febrero." }
|
||||||
|
]}
|
||||||
faqsAnimation="slide-up"
|
faqsAnimation="slide-up"
|
||||||
|
textboxLayout="split"
|
||||||
|
useInvertedBackground={false}
|
||||||
|
imageSrc="http://img.b2bpic.net/free-photo/waiter-offering-couple-main-courses-restaurant_1262-1662.jpg"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="socialProof" data-section="socialProof">
|
<div id="socialProof" data-section="socialProof">
|
||||||
<SocialProofOne
|
<SocialProofOne
|
||||||
textboxLayout="default"
|
names={["TripAdvisor", "Michelin Guide", "Condé Nast", "Forbes Travel"]}
|
||||||
|
title="Reconocimientos"
|
||||||
useInvertedBackground={true}
|
useInvertedBackground={true}
|
||||||
names={[
|
|
||||||
"TripAdvisor",
|
|
||||||
"Michelin Guide",
|
|
||||||
"Gastronomy Excellence",
|
|
||||||
"Port Association",
|
|
||||||
"Culinary Heritage Guild",
|
|
||||||
"Sustainability Council",
|
|
||||||
"Coastal Dining Mark",
|
|
||||||
]}
|
|
||||||
title="Reconocimientos y Colaboradores"
|
|
||||||
description="Destacados por nuestra calidad y compromiso."
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="contact" data-section="contact">
|
<div id="contact" data-section="contact">
|
||||||
<ContactCenter
|
<ContactSplitForm
|
||||||
useInvertedBackground={false}
|
title="Reserva tu Mesa"
|
||||||
background={{
|
description="Solicita tu espacio y vive La Marea."
|
||||||
variant: "plain",
|
inputs={[
|
||||||
}}
|
{ name: "name", type: "text", placeholder: "Nombre completo" },
|
||||||
tag="Reservas"
|
{ name: "email", type: "email", placeholder: "Email de contacto" }
|
||||||
title="Reserva tu mesa hoy"
|
]}
|
||||||
description="Escríbenos para asegurar tu lugar en la primera línea de la bahía."
|
mediaPosition="right"
|
||||||
buttonText="Enviar Reserva"
|
imageSrc="http://img.b2bpic.net/free-photo/romantic-table-setting-wedding-reception-with-sea-view-through-windows_637285-997.jpg"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="footer" data-section="footer">
|
<div id="footer" data-section="footer">
|
||||||
<FooterBaseReveal
|
<FooterBaseCard
|
||||||
logoText="La Marea"
|
logoText="La Marea"
|
||||||
columns={[
|
columns={[
|
||||||
{
|
{ title: "Menú", items: [{ label: "Ver Carta", href: "#" }] },
|
||||||
title: "Navegación",
|
{ title: "Reservas", items: [{ label: "Contacto", href: "#" }] }
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: "Inicio",
|
|
||||||
href: "#hero",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Nuestra Historia",
|
|
||||||
href: "#about",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Menú",
|
|
||||||
href: "#products",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Contacto",
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: "Reservar",
|
|
||||||
href: "#contact",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Ubicación",
|
|
||||||
href: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Email",
|
|
||||||
href: "mailto:info@lamarea.com",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Legal",
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: "Privacidad",
|
|
||||||
href: "#",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Términos",
|
|
||||||
href: "#",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
copyrightText="© 2024 La Marea Restaurant. Punta del Este."
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</ReactLenis>
|
</ReactLenis>
|
||||||
|
|||||||
Reference in New Issue
Block a user