124 lines
5.3 KiB
TypeScript
124 lines
5.3 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import { useState } from "react";
|
|
import { X, ExternalLink } from "lucide-react";
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
|
|
export default function LandingPage() {
|
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
|
|
|
const menuItems = [
|
|
{ name: "Kebab Clásico" },
|
|
{ name: "Dürum de Pollo" },
|
|
{ name: "Pita Falafel" },
|
|
{ name: "Pizza Barbacoa" },
|
|
];
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="compact"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="circleGradient"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{ name: "Inicio", id: "hero" },
|
|
{ name: "Ver Carta", id: "menu-popup" },
|
|
{ name: "Opiniones", id: "testimonials" },
|
|
{ name: "Contacto", id: "contact" },
|
|
]}
|
|
brandName="Tchey"
|
|
/>
|
|
{isMenuOpen && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 p-4">
|
|
<div className="w-full max-w-md rounded-2xl bg-white p-8 text-black">
|
|
<div className="flex justify-between items-center mb-6">
|
|
<h2 className="text-2xl font-bold">Nuestra Carta</h2>
|
|
<button onClick={() => setIsMenuOpen(false)}><X /></button>
|
|
</div>
|
|
<ul className="space-y-4">
|
|
{menuItems.map((item, idx) => (
|
|
<li key={idx} className="flex justify-between border-b pb-2">
|
|
<span>{item.name}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDoubleCarousel
|
|
background={{ variant: "gradient-bars" }}
|
|
title="Tchey: Autenticidad en cada bocado"
|
|
description="El kebab de barrio más querido de Barcelona. Sabor real, precio honesto, abierto hasta tarde para ti."
|
|
leftCarouselItems={[
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/turkish-doner-inside-round-bread-with-french-fries-yogurt_114579-1423.jpg", imageAlt: "Kebab rotisserie" },
|
|
]}
|
|
rightCarouselItems={[
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/lule-kebab-fried-potato-with-vegetables-onion_141793-688.jpg", imageAlt: "Kebab plate" },
|
|
]}
|
|
buttons={[{ text: "Ver Carta", onClick: () => setIsMenuOpen(true) }]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about"><TextAbout title="Más que un kebab, una institución en Barcelona" useInvertedBackground={false} /></div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
title="Platos Destacados"
|
|
description="Nuestros mejores platos"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{ id: "1", name: "Kebab Clásico", price: "", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DRezYrwknETVt8UIqZ86LaguOc/uploaded-1778252482198-0lg3jlx9.webp" },
|
|
{ id: "2", name: "Nan con queso de cabra", price: "", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DRezYrwknETVt8UIqZ86LaguOc/uploaded-1778252379761-ylkpv5ye.jpg" },
|
|
{ id: "3", name: "Pita Falafel", price: "", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DRezYrwknETVt8UIqZ86LaguOc/uploaded-1778252442872-rveb6prc.webp" },
|
|
{ id: "4", name: "Pizza Pepperoni", price: "", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DRezYrwknETVt8UIqZ86LaguOc/uploaded-1778252247882-h6dhhflp.jpg" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<div className="py-20">
|
|
<h2 className="text-center text-4xl font-bold mb-10">Dónde estamos ubicados?</h2>
|
|
<div className="flex flex-col items-center gap-6">
|
|
<div className="w-full max-w-2xl h-80 bg-gray-200 rounded-xl overflow-hidden">
|
|
<iframe width="100%" height="100%" src="https://maps.google.com/maps?q=Carrer+del+Consell+de+Cent+455,Barcelona&output=embed"></iframe>
|
|
</div>
|
|
<a href="https://www.google.com/maps/dir/?api=1&destination=Carrer+del+Consell+de+Cent+455,Barcelona" target="_blank" className="inline-flex items-center gap-2 bg-primary-cta text-white px-6 py-3 rounded-full font-bold">
|
|
Cómo llegar <ExternalLink size={18} />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="Tchey Kebab"
|
|
leftLink={{ text: "Privacidad", href: "#" }}
|
|
rightLink={{ text: "Instagram", href: "#" }}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |