285 lines
16 KiB
TypeScript
285 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import { Home, Leaf, MapPin, Smile, Users, Waves } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="small"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="circleGradient"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{
|
|
name: "Inicio", id: "#hero"},
|
|
{
|
|
name: "Habitaciones", id: "#rooms"},
|
|
{
|
|
name: "Instalaciones", id: "#facilities"},
|
|
{
|
|
name: "Galería", id: "#gallery"},
|
|
{
|
|
name: "Contacto", id: "#contact"},
|
|
]}
|
|
logoSrc="http://img.b2bpic.net/free-photo/colorful-mexican-architecture-urban-landscape_23-2149749931.jpg"
|
|
brandName="Hotel Hacienda Piedra Gorda"
|
|
button={{
|
|
text: "Reservar Ahora", href: "#contact"}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboard
|
|
background={{
|
|
variant: "plain"}}
|
|
title="Tu refugio escondido en el corazón de México"
|
|
description="Hacienda auténtica · Alberca climatizada · Hospitalidad que se siente en cada detalle"
|
|
buttons={[
|
|
{
|
|
text: "Reservar Ahora", href: "#contact"},
|
|
{
|
|
text: "Conoce el Hotel", href: "#about"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/moroccan-courtyard-oasis-with-reflecting-pool_23-2151986070.jpg"
|
|
imageAlt="Corredor de hacienda con vista a la alberca"
|
|
mediaAnimation="opacity"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/group-friends-reading-cell-phone-messages_23-2150409991.jpg", alt: "Group of friends reading cell phone messages"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/woman-using-tablet-hotel-room_23-2148095198.jpg", alt: "Woman using tablet in hotel room"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-happy-young-woman-sitting-bed-holding-glass-juice-healthy-slices-fruits-plate_23-2148033313.jpg", alt: "Portrait of a happy young woman sitting on bed holding glass of juice and healthy slices of fruits on plate"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/happy-satisfied-young-man-shows-approval-gesture-sits-with-wireless-headphones-packs-luggage-tourist-hotel-with-suitcase-holiday_1258-314650.jpg", alt: "Happy satisfied young man shows approval gesture sits with wireless headphones packs luggage tourist in hotel with suitcase on holiday"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-young-man-meditating-packing-suitcase-sitting-bed-with-globe-camera-plane-tickets_1258-314839.jpg", alt: "Portrait of young man meditating packing suitcase sitting on bed with globe camera and plane tickets"},
|
|
]}
|
|
avatarText="Más de 500+ huéspedes satisfechos nos recomiendan."
|
|
marqueeItems={[
|
|
{
|
|
type: "image", src: "http://img.b2bpic.net/free-photo/gothic-architecture-spirituality-meet-courtyard-generated-by-ai_188544-47335.jpg", alt: "Gothic architecture and spirituality meet in courtyard generated by AI"},
|
|
{
|
|
type: "image", src: "http://img.b2bpic.net/free-photo/classic-architecture-beautiful-home-with-flowers_23-2151913145.jpg", alt: "Classic architecture beautiful home with flowers"},
|
|
{
|
|
type: "image", src: "http://img.b2bpic.net/free-photo/enchanted-garden-staircase_23-2151961776.jpg", alt: "Enchanted garden staircase"},
|
|
{
|
|
type: "image", src: "http://img.b2bpic.net/free-photo/beautiful-hotel-insights-details_23-2149160770.jpg", alt: "Beautiful hotel insights details"},
|
|
{
|
|
type: "image", src: "http://img.b2bpic.net/free-photo/entrance-old-italian-wine-cellar_333098-111.jpg", alt: "Entrance to an old italian wine cellar"},
|
|
]}
|
|
marqueeSpeed={30}
|
|
showMarqueeCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
useInvertedBackground={true}
|
|
heading={[
|
|
{
|
|
type: "text", content: "Una hacienda que guarda secretos hermosos"},
|
|
]}
|
|
description={`Escondido entre la carretera y el silencio, Hotel Hacienda Piedra Gorda es uno de esos lugares que se descubren por casualidad y no se olvidan jamás. Arquitectura de hacienda auténtica, habitaciones diseñadas con calidez, una alberca climatizada de agua cristalina y un equipo que hace que cada huésped se sienta en casa.\n\n_"Amé este lugar. Volvería sin duda alguna."_`}
|
|
imageSrc="http://img.b2bpic.net/free-photo/exit-from-historical-building-town_114579-12100.jpg"
|
|
imageAlt="Patio central de la hacienda con palmeras y fuente"
|
|
/>
|
|
</div>
|
|
|
|
<div id="rooms" data-section="rooms">
|
|
<ProductCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "classic-room", name: "Habitación Clásica: Madera natural, luz dorada y el silencio perfecto para descansar de verdad.", brand: "Hotel Hacienda Piedra Gorda", price: "", rating: 0,
|
|
reviewCount: "", imageSrc: "http://img.b2bpic.net/free-photo/room-interior-design_23-2148899453.jpg", imageAlt: "Habitación Clásica con lámparas de ratán oscuro"},
|
|
{
|
|
id: "deluxe-room", name: "Habitación Deluxe: Diseño cálido, detalles únicos y una atmósfera que abraza desde que abres la puerta.", brand: "Hotel Hacienda Piedra Gorda", price: "", rating: 0,
|
|
reviewCount: "", imageSrc: "http://img.b2bpic.net/free-photo/wooden-wheels-ship-lie-floor-before-wooden-chest_1304-3694.jpg", imageAlt: "Habitación Deluxe con lámparas de ratán rojo"},
|
|
{
|
|
id: "suite-room", name: "Suite: Espacios pensados para quienes aprecian los pequeños detalles que hacen grande una estancia.", brand: "Hotel Hacienda Piedra Gorda", price: "", rating: 0,
|
|
reviewCount: "", imageSrc: "http://img.b2bpic.net/free-photo/event-hall-furniture-brown-white-colors_114579-2230.jpg", imageAlt: "Suite con rincón de lectura y florero ámbar"},
|
|
]}
|
|
title="Habitaciones que invitan a quedarse"
|
|
buttons={[
|
|
{
|
|
text: "Ver disponibilidad", href: "#contact"},
|
|
]}
|
|
description="Cada habitación ha sido diseñada pensando en su confort y en los detalles que evocan la auténtica esencia de una hacienda mexicana, combinando tradición y lujo."
|
|
/>
|
|
</div>
|
|
|
|
<div id="facilities" data-section="facilities">
|
|
<MetricCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
metrics={[
|
|
{
|
|
id: "m1", icon: Waves,
|
|
title: "Alberca climatizada y cristalina", value: ""},
|
|
{
|
|
id: "m2", icon: Home,
|
|
title: "Habitaciones impecables y con diseño", value: ""},
|
|
{
|
|
id: "m3", icon: Leaf,
|
|
title: "Jardines y patios de hacienda auténtica", value: ""},
|
|
{
|
|
id: "m4", icon: Users,
|
|
title: "Ideal para familias, parejas y viajeros de negocios", value: ""},
|
|
{
|
|
id: "m5", icon: Smile,
|
|
title: "Personal amable y atento en todo momento", value: ""},
|
|
{
|
|
id: "m6", icon: MapPin,
|
|
title: "Ubicación tranquila, lejos del ruido", value: ""},
|
|
]}
|
|
title="Todo lo que necesitas para descansar de verdad"
|
|
description="Nuestras instalaciones están pensadas para ofrecerle una experiencia completa de relajación y disfrute, con servicios de primera calidad y un ambiente acogedor."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "t1", name: "Angel E.", role: "Huésped", company: "", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-bathrobe-reading-magazine-while-relaxing-beauty-spa-looking-camera_637285-7434.jpg"},
|
|
{
|
|
id: "t2", name: "Betty O.", role: "Huésped", company: "", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/pov-tourist-waves-videocall_482257-76727.jpg"},
|
|
{
|
|
id: "t3", name: "Israel L.", role: "Huésped", company: "", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-beautiful-woman-posing_23-2148602013.jpg"},
|
|
{
|
|
id: "t4", name: "Gabriel P.", role: "Huésped", company: "", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-woman-sitting-bed-with-healthy-breakfast-talking-telephone_23-2148033306.jpg", alt: "Smiling young woman sitting on bed with healthy breakfast talking on telephone"},
|
|
{
|
|
id: "t5", name: "Yanni E.", role: "Huésped", company: "", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/feedback-results-information-satisfeaction_53876-121339.jpg"},
|
|
]}
|
|
title="Lo que dicen quienes ya nos conocen"
|
|
description="⭐ **4.4 / 5 en Google · 13 reseñas**"
|
|
/>
|
|
</div>
|
|
|
|
<div id="gallery" data-section="gallery">
|
|
<ProductCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="bento-grid"
|
|
useInvertedBackground={true}
|
|
products={[
|
|
{
|
|
id: "g1", name: "Alberca con arcos y cielo azul", brand: "Hotel Hacienda Piedra Gorda", price: "", rating: 0,
|
|
reviewCount: "", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-traveling-without-covid_23-2149077831.jpg", imageAlt: "Alberca con arcos de la hacienda"},
|
|
{
|
|
id: "g2", name: "Corredor de arcos con vista panorámica", brand: "Hotel Hacienda Piedra Gorda", price: "", rating: 0,
|
|
reviewCount: "", imageSrc: "http://img.b2bpic.net/free-photo/desert-oasis-house-aesthetic_23-2151949118.jpg", imageAlt: "Corredor con arcos y vista"},
|
|
{
|
|
id: "g3", name: "Patio central con palmeras y fuente", brand: "Hotel Hacienda Piedra Gorda", price: "", rating: 0,
|
|
reviewCount: "", imageSrc: "http://img.b2bpic.net/free-photo/stylish-girl-walking-through-her-school-s-campus_1157-17434.jpg", imageAlt: "Patio con palmeras y fuente de piedra"},
|
|
{
|
|
id: "g4", name: "Corredor íntimo nocturno con camastros", brand: "Hotel Hacienda Piedra Gorda", price: "", rating: 0,
|
|
reviewCount: "", imageSrc: "http://img.b2bpic.net/free-photo/interior-jin-mao-tower-looking-up-from-lobby-grand-hyatt-hotel-shanghai-china_181624-8195.jpg", imageAlt: "Corredor nocturno con lámparas"},
|
|
{
|
|
id: "g5", name: "Habitación con lámparas de ratán rojo", brand: "Hotel Hacienda Piedra Gorda", price: "", rating: 0,
|
|
reviewCount: "", imageSrc: "http://img.b2bpic.net/free-photo/sofa-decoration-livingroom-interior_74190-7315.jpg", imageAlt: "Habitación con lámparas rojas"},
|
|
{
|
|
id: "g6", name: "Habitación con lámparas de ratán oscuro", brand: "Hotel Hacienda Piedra Gorda", price: "", rating: 0,
|
|
reviewCount: "", imageSrc: "http://img.b2bpic.net/free-photo/elegant-woman-brown-coat-with-black-bulldog_1157-31796.jpg", imageAlt: "Habitación con lámparas oscuras"},
|
|
{
|
|
id: "g7", name: "Sillón de cuerda con florero ámbar", brand: "Hotel Hacienda Piedra Gorda", price: "", rating: 0,
|
|
reviewCount: "", imageSrc: "http://img.b2bpic.net/free-photo/fabric-mattress-modern-background-sleep_1203-4116.jpg", imageAlt: "Rincón de lectura con florero ámbar"},
|
|
{
|
|
id: "g8", name: "Sala de lectura vintage", brand: "Hotel Hacienda Piedra Gorda", price: "", rating: 0,
|
|
reviewCount: "", imageSrc: "http://img.b2bpic.net/free-photo/open-book-breakfast-time_23-2148171388.jpg", imageAlt: "Sala de lectura vintage del hotel"},
|
|
{
|
|
id: "g9", name: "Pasillo con arcos de bóveda ladrillo y vista a alberca", brand: "Hotel Hacienda Piedra Gorda", price: "", rating: 0,
|
|
reviewCount: "", imageSrc: "http://img.b2bpic.net/free-photo/traveller-texting-messages-before-skiing_482257-76509.jpg", imageAlt: "Pasillo de ladrillo con arcos"},
|
|
{
|
|
id: "g10", name: "Corredor de hacienda nocturno", brand: "Hotel Hacienda Piedra Gorda", price: "", rating: 0,
|
|
reviewCount: "", imageSrc: "http://img.b2bpic.net/free-photo/young-couple-love-outdoor_158595-121.jpg", imageAlt: "Corredor nocturno de la hacienda"},
|
|
]}
|
|
title="Un vistazo a tu próxima escapada"
|
|
description="Cada rincón de Hacienda Piedra Gorda es una obra de arte. Descubre la belleza de nuestra arquitectura, jardines y espacios interiores a través de estas imágenes."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "plain"}}
|
|
title="¿Listo para escaparte?"
|
|
description="Escríbenos tu mensaje y te ayudamos a encontrar la fecha perfecta para tu visita."
|
|
inputPlaceholder="Tu nombre y mensaje"
|
|
buttonText="Enviar consulta"
|
|
tag="Contáctanos"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-photo/admiralty-embankment-night_1398-2738.jpg"
|
|
imageAlt="Exterior nocturno del Hotel Hacienda Piedra Gorda"
|
|
logoText="Hotel Hacienda Piedra Gorda"
|
|
columns={[
|
|
{
|
|
title: "Navegación", items: [
|
|
{
|
|
label: "Inicio", href: "#hero"},
|
|
{
|
|
label: "Habitaciones", href: "#rooms"},
|
|
{
|
|
label: "Instalaciones", href: "#facilities"},
|
|
{
|
|
label: "Galería", href: "#gallery"},
|
|
{
|
|
label: "Contacto", href: "#contact"},
|
|
],
|
|
},
|
|
{
|
|
title: "Síguenos", items: [
|
|
{
|
|
label: "Instagram", href: "https://instagram.com/hotelhaciendapiedragorda"},
|
|
{
|
|
label: "Facebook", href: "https://facebook.com/hotelhaciendapiedragorda"},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2025 Hotel Hacienda Piedra Gorda · Todos los derechos reservados · Hospitalidad mexicana auténtica 🌵"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|