277 lines
12 KiB
TypeScript
277 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import Link from "next/link";
|
|
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
|
import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
|
|
import TextSplitAbout from "@/components/sections/about/TextSplitAbout";
|
|
import ProductCardOne from "@/components/sections/product/ProductCardOne";
|
|
import FeatureCardTwentyOne from "@/components/sections/feature/FeatureCardTwentyOne";
|
|
import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
|
|
import TestimonialCardTen from "@/components/sections/testimonial/TestimonialCardTen";
|
|
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
|
import FooterCard from "@/components/sections/footer/FooterCard";
|
|
import { MapPin, Clock, Phone, Mail, Instagram, Facebook, MessageCircle } from "lucide-react";
|
|
|
|
export default function HomePage() {
|
|
const navItems = [
|
|
{ name: "Inicio", id: "/" },
|
|
{ name: "Historia", id: "/nuestra-historia" },
|
|
{ name: "Menú", id: "/menu" },
|
|
{ name: "Ubicación", id: "/contacto" },
|
|
{ name: "Contacto", id: "/contacto" },
|
|
];
|
|
|
|
const handleNavClick = (id: string) => {
|
|
if (id.startsWith("/")) {
|
|
window.location.href = id;
|
|
} else {
|
|
const element = document.getElementById(id);
|
|
if (element) {
|
|
element.scrollIntoView({ behavior: "smooth" });
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="mediumSmall"
|
|
sizing="mediumLarge"
|
|
background="blurBottom"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={navItems}
|
|
brandName="Sabor"
|
|
button={{
|
|
text: "Reservar Mesa",
|
|
onClick: () => window.location.href = "/contacto",
|
|
href: "/contacto",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitKpi
|
|
title="Sabor con estructura"
|
|
description="Donde el diseño se encuentra con la gastronomía. Una experiencia culinaria moderna, diseñada con precisión Bauhaus y elaborada con ingredientes locales de temporada."
|
|
background={{ variant: "blurBottom" }}
|
|
kpis={[
|
|
{ value: "12+", label: "Años de excelencia" },
|
|
{ value: "100%", label: "Ingredientes locales" },
|
|
{ value: "500+", label: "Clientes mensuales" },
|
|
]}
|
|
enableKpiAnimation={true}
|
|
tag="Restaurante Local Contemporáneo"
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Ver Menú", href: "/menu" },
|
|
{ text: "Reservar Mesa", href: "/contacto" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
mediaAnimation="slide-up"
|
|
imageSrc="http://img.b2bpic.net/free-photo/wicker-gray-table-with-glass-gray-chairs_140725-3025.jpg"
|
|
imageAlt="Interior moderno del restaurante con diseño Bauhaus"
|
|
imagePosition="right"
|
|
ariaLabel="Hero section - Sabor restaurante"
|
|
/>
|
|
</div>
|
|
|
|
<div id="philosophy" data-section="philosophy">
|
|
<TextSplitAbout
|
|
title="Nuestra Filosofía"
|
|
description={[
|
|
"Creemos que la cocina es un acto de diseño. Cada plato es una composición de formas, colores y sabores cuidadosamente equilibrados.",
|
|
"Utilizamos únicamente ingredientes de temporada de proveedores locales. Nuestro compromiso es con la autenticidad, la calidad y el impacto local.",
|
|
"El espacio refleja nuestros valores: limpio, geométrico, funcional. Una experiencia donde la comida y el diseño son inseparables.",
|
|
]}
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "Conocer Nuestra Historia", href: "/nuestra-historia" }]}
|
|
buttonAnimation="slide-up"
|
|
showBorder={true}
|
|
ariaLabel="About section - Sabor philosophy"
|
|
/>
|
|
</div>
|
|
|
|
<div id="featured-dishes" data-section="featured-dishes">
|
|
<ProductCardOne
|
|
title="Platos Destacados"
|
|
description="Descubre nuestras especialidades, diseñadas con precisión y elaboradas con pasión. Cada plato cuenta una historia de sabor y estructura."
|
|
tag="Lo Mejor del Restaurante"
|
|
tagAnimation="slide-up"
|
|
products={[
|
|
{
|
|
id: "1",
|
|
name: "Salmón Geométrico",
|
|
price: "$28",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/various-sliced-fish-fillet-with-lemon-slice_140725-3847.jpg?_wi=1",
|
|
imageAlt: "Salmón con presentación geométrica",
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Risotto de Setas",
|
|
price: "$24",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/vegetarian-risotto-with-fresh-mushrooms-parmesan-cheese-generated-by-ai_188544-10223.jpg?_wi=1",
|
|
imageAlt: "Risotto cremoso con setas locales",
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Cordero Asado",
|
|
price: "$32",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/lamb-kebab-with-teriyaki-sauce-wine_114579-2504.jpg?_wi=1",
|
|
imageAlt: "Cordero asado con hierbas aromáticas",
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "Vegetales de Temporada",
|
|
price: "$18",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/side-view-female-hand-with-knife-with-fresh-ripe-vegetables-yellow-bell-pepper-green-onion-red-chili-pepper-tomato-black-background_141793-3392.jpg?_wi=1",
|
|
imageAlt: "Composición de vegetales de temporada",
|
|
},
|
|
{
|
|
id: "5",
|
|
name: "Postre Minimalista",
|
|
price: "$12",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/ai-generated-cake-picture_23-2150649468.jpg?_wi=1",
|
|
imageAlt: "Postre con diseño geométrico",
|
|
},
|
|
{
|
|
id: "6",
|
|
name: "Tabla de Quesos",
|
|
price: "$22",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cheese-platter-with-different-cheeses-grapes-nuts-honey-bread-dates-rustic-wood-dark-wood-board-with-wine-bottle-glass-wine_114579-284.jpg?_wi=1",
|
|
imageAlt: "Tabla seleccionada de quesos locales",
|
|
},
|
|
]}
|
|
gridVariant="bento-grid"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "Ver Menú Completo", href: "/menu" }]}
|
|
buttonAnimation="slide-up"
|
|
ariaLabel="Featured dishes - Sabor specialties"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTen
|
|
title="Lo que Dicen Nuestros Clientes"
|
|
description="Historias reales de quienes han disfrutado la experiencia Sabor."
|
|
tag="Testimonios"
|
|
tagAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
title: "Una experiencia inolvidable",
|
|
quote: "No es solo comida, es una experiencia de diseño. Cada detalle, desde la presentación del plato hasta el espacio, está cuidadosamente pensado. Volveré definitivamente.",
|
|
name: "María García",
|
|
role: "Arquitecta",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-working-warehouse_329181-12778.jpg",
|
|
imageAlt: "María García",
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "Sabor auténtico, diseño moderno",
|
|
quote: "Es raro encontrar un lugar que combine ingredientes locales de calidad con un diseño tan sofisticado. El equipo realmente entiende lo que hace.",
|
|
name: "Juan López",
|
|
role: "Chef Gastronómico",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/view-chef-working-kitchen_23-2149728027.jpg",
|
|
imageAlt: "Juan López",
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "El lugar perfecto para una ocasión especial",
|
|
quote: "Celebramos nuestro aniversario en Sabor. La comida fue exquisita, el ambiente perfecto y el servicio impecable. Gracias por hacerlo especial.",
|
|
name: "Sofia y Carlos",
|
|
role: "Pareja Celebrando",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/hugging-couple-inside-transparent-bubble-tent-glamping-while-sitting-bed-lush-forest_1268-24558.jpg",
|
|
imageAlt: "Sofia y Carlos",
|
|
},
|
|
{
|
|
id: "4",
|
|
title: "Diseño que habla por sí solo",
|
|
quote: "Como diseñador, puedo apreciar cada elemento. No hay nada gratuito aquí. Todo tiene propósito. Eso es lo que hace que Sabor sea especial.",
|
|
name: "Roberto Fernández",
|
|
role: "Diseñador Gráfico",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/male-employee-with-coffee-cup-office_482257-119420.jpg",
|
|
imageAlt: "Roberto Fernández",
|
|
},
|
|
{
|
|
id: "5",
|
|
title: "Apoyo genuino al local",
|
|
quote: "Me encanta que el restaurante trabaje solo con proveedores del barrio. Se nota en cada plato que el compromiso es real. Eso es raro hoy en día.",
|
|
name: "Elena Martínez",
|
|
role: "Residente Local",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beauty-style-fashion-femininity-concept-positive-beautiful-young-european-woman-blue-shirt-looking-camera-with-broad-happy-smile-being-good-mood-kitchen-interior-background_343059-2087.jpg",
|
|
imageAlt: "Elena Martínez",
|
|
},
|
|
{
|
|
id: "6",
|
|
title: "Volvería mil veces",
|
|
quote: "No hay otra palabra: perfecto. La comida, el servicio, el ambiente, el precio. Todo está en su lugar. Sabor es un descubrimiento que todos deberían hacer.",
|
|
name: "David Sánchez",
|
|
role: "Crítico de Gastronomía",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/handsome-gay-official-suit-looking-camera-front-view-bearded-caucasian-man-smiling-camera-getting-dressed-wedding-ceremony-with-lover-lgbt-love-marriage-concept_74855-22937.jpg",
|
|
imageAlt: "David Sánchez",
|
|
},
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "Leer Más Historias", href: "#" }]}
|
|
buttonAnimation="slide-up"
|
|
ariaLabel="Testimonials section - Customer experiences"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
tag="Contacto y Reservas"
|
|
tagIcon={MessageCircle}
|
|
tagAnimation="slide-up"
|
|
title="¿Listo para Vivir la Experiencia Sabor?"
|
|
description="Reserva tu mesa hoy o ponte en contacto con nosotros para cualquier consulta. Estamos aquí para recibirte y hacer de tu visita un momento inolvidable."
|
|
background={{ variant: "blurBottom" }}
|
|
buttons={[
|
|
{ text: "Reservar Mesa Ahora", href: "/contacto" },
|
|
{ text: "Llamar al Restaurante", href: "tel:+34555123456" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Contact section - Reservations"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="Sabor"
|
|
copyrightText="© 2025 Sabor | Restaurante Local Contemporáneo. Todos los derechos reservados."
|
|
socialLinks={[
|
|
{
|
|
icon: Instagram,
|
|
href: "https://instagram.com/sabor.restaurante",
|
|
ariaLabel: "Instagram de Sabor",
|
|
},
|
|
{
|
|
icon: Facebook,
|
|
href: "https://facebook.com/sabor.restaurante",
|
|
ariaLabel: "Facebook de Sabor",
|
|
},
|
|
{
|
|
icon: Mail,
|
|
href: "mailto:info@sabor.local",
|
|
ariaLabel: "Email de Sabor",
|
|
},
|
|
]}
|
|
ariaLabel="Site footer"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |