294 lines
15 KiB
TypeScript
294 lines
15 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||
import HeroCentered from "@/components/sections/hero/HeroCentered";
|
||
import FeatureBorderGlow from "@/components/sections/feature/featureBorderGlow/FeatureBorderGlow";
|
||
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
||
import SplitAbout from "@/components/sections/about/SplitAbout";
|
||
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
|
||
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
|
||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||
import { Wind, Cloud, Users, Flame, Utensils, DollarSign } from "lucide-react";
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="shift-hover"
|
||
defaultTextAnimation="background-highlight"
|
||
borderRadius="soft"
|
||
contentWidth="smallMedium"
|
||
sizing="largeSmallSizeLargeTitles"
|
||
background="circleGradient"
|
||
cardStyle="glass-elevated"
|
||
primaryButtonStyle="flat"
|
||
secondaryButtonStyle="layered"
|
||
headingFontWeight="semibold"
|
||
>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarLayoutFloatingInline
|
||
brandName="Ga Nhỏ Camping"
|
||
navItems={[
|
||
{ name: "Không gian", id: "gallery" },
|
||
{ name: "Menu", id: "menu" },
|
||
{ name: "Đánh giá", id: "reviews" },
|
||
{ name: "Liên hệ", id: "contact" }
|
||
]}
|
||
button={{
|
||
text: "Gọi đặt bàn", href: "tel:+84987654321"
|
||
}}
|
||
animateOnLoad={true}
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroCentered
|
||
title="Trải nghiệm nướng ngoài trời giữa lòng Vinh"
|
||
description="Không gian chill – Đồ ăn đậm vị – Phù hợp tụ họp bạn bè & gia đình"
|
||
background={{ variant: "downward-rays-static" }}
|
||
avatars={[
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/stylish-woman-wearing-yellow-bandana_273609-13339.jpg", alt: "Happy customer 1"
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/confident-handsome-man-taking-selfie-videocalling-with-digital-tablet_176420-19041.jpg", alt: "Happy customer 2"
|
||
},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/woman-showing-ok-sign_23-2148990150.jpg", alt: "Happy customer 3"
|
||
}
|
||
]}
|
||
avatarText="Được 1000+ khách hàng tin tưởng"
|
||
buttons={[
|
||
{
|
||
text: "📞 Gọi đặt bàn ngay", href: "tel:+84987654321"
|
||
},
|
||
{
|
||
text: "📝 Đặt bàn nhanh", href: "#reservation"
|
||
}
|
||
]}
|
||
buttonAnimation="slide-up"
|
||
ariaLabel="Hero section - Ga Nhỏ Camping"
|
||
/>
|
||
</div>
|
||
|
||
<div id="why-us" data-section="why-us">
|
||
<FeatureBorderGlow
|
||
title="Tại sao chọn Ga Nhỏ Camping?"
|
||
description="Không gian rộng rãi, ngoài trời với đầy đủ tiện ích để bạn tận hưởng từng giây phút"
|
||
tag="Ưu điểm"
|
||
features={[
|
||
{
|
||
icon: Wind,
|
||
title: "Không gian rộng, ngoài trời", description: "Cảm giác thoáng đãng, tiếp xúc thiên nhiên, thích hợp cho nhóm đông"
|
||
},
|
||
{
|
||
icon: Cloud,
|
||
title: "Có mái che khi mưa", description: "Hoạt động quanh năm, không lo thời tiết bất lợi"
|
||
},
|
||
{
|
||
icon: Users,
|
||
title: "Có phòng riêng (đặt trước)", description: "Tiếp đón sự kiện công ty, sinh nhật, họp mặt gia đình"
|
||
},
|
||
{
|
||
icon: Flame,
|
||
title: "Không khí như Đà Lạt", description: "Chill vibe, đèn nến, âm nhạc nhẹ nhàng tạo không khí lãng mạn"
|
||
},
|
||
{
|
||
icon: Utensils,
|
||
title: "Đồ ăn đậm vị", description: "Thịt nướng tươi mỗi ngày, gia vị đặc biệt, chất lượng đảm bảo"
|
||
},
|
||
{
|
||
icon: DollarSign,
|
||
title: "Giá minh bạch", description: "100.000–200.000₫/người, không phụ phí ẩn, giá trị thực tế"
|
||
}
|
||
]}
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
ariaLabel="Why choose us section"
|
||
/>
|
||
</div>
|
||
|
||
<div id="menu" data-section="menu">
|
||
<ProductCardTwo
|
||
title="Combo & Menu nướng"
|
||
description="Chọn combo phù hợp cho nhóm bạn, giá rõ ràng, chất lượng tảm bạo"
|
||
tag="Menu"
|
||
products={[
|
||
{
|
||
id: "1", brand: "Ga Nhỏ Camping", name: "Combo cho 2–4 người", price: "350.000–500.000₫", rating: 5,
|
||
reviewCount: "250+", imageSrc: "http://img.b2bpic.net/free-photo/mixed-grilled-meat-lamb-ribs-chicken-potato-side-view_141793-3165.jpg", imageAlt: "Combo for 2-4 people"
|
||
},
|
||
{
|
||
id: "2", brand: "Ga Nhỏ Camping", name: "Combo nhóm đông (6–8 người)", price: "1.200.000–1.600.000₫", rating: 5,
|
||
reviewCount: "180+", imageSrc: "http://img.b2bpic.net/free-photo/closeup-couple-passing-food-each-other-while-having-lunch-with-their-family_637285-10314.jpg?_wi=1", imageAlt: "Group combo for 6-8 people"
|
||
},
|
||
{
|
||
id: "3", brand: "Ga Nhỏ Camping", name: "Dịch vụ phòng riêng & tiệc cơm", price: "Liên hệ để báo giá", rating: 5,
|
||
reviewCount: "120+", imageSrc: "http://img.b2bpic.net/free-photo/closeup-couple-passing-food-each-other-while-having-lunch-with-their-family_637285-10314.jpg?_wi=2", imageAlt: "Private room catering"
|
||
}
|
||
]}
|
||
gridVariant="uniform-all-items-equal"
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
ariaLabel="Menu section"
|
||
/>
|
||
</div>
|
||
|
||
<div id="gallery" data-section="gallery">
|
||
<SplitAbout
|
||
title="Không gian & Không khí"
|
||
description="Từ buổi chiều yên tĩnh đến tối nay rực rỡ, Ga Nhỏ Camping là nơi lý tưởng để tụ họp và tạo kỷ niệm"
|
||
tag="Bộ sưu tập ảnh"
|
||
bulletPoints={[
|
||
{
|
||
title: "Không gian ngoài trời rộng rãi", description: "Bàn ngoài trời có mái che, ánh sáng ấm áp, thoáng khí"
|
||
},
|
||
{
|
||
title: "Món ăn tươi, nướng tại chỗ", description: "Thịt được chọn mỗi ngày, gia vị đặc biệt, vị chuẩn authentic"
|
||
},
|
||
{
|
||
title: "Phù hợp mọi loại nhóm", description: "Cặp đôi, nhóm bạn, gia đình, cuộc họp công ty"
|
||
}
|
||
]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/smiley-friends-restaurant-full-shot_23-2149930133.jpg"
|
||
imageAlt="Outdoor dining space"
|
||
imagePosition="right"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
mediaAnimation="slide-up"
|
||
ariaLabel="Gallery section"
|
||
/>
|
||
</div>
|
||
|
||
<div id="reviews" data-section="reviews">
|
||
<TestimonialCardSix
|
||
title="Khách hàng nói gì về Ga Nhỏ Camping?"
|
||
description="Đánh giá từ những khách hàng thực, hiện tại 3.7/5 sao (35 đánh giá)"
|
||
tag="Đánh giá"
|
||
testimonials={[
|
||
{
|
||
id: "1", name: "Nguyễn Thảo", handle: "@thao.nguyen", testimonial: "Không gian rộng, yên tĩnh, đồ ăn ngon, nhân viên nhiệt tình. Cảm thấy như ở Đà Lạt! Chắc chắn sẽ quay lại.", imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-wearing-yellow-bandana_273609-13339.jpg?_wi=1", imageAlt: "Nguyễn Thảo"
|
||
},
|
||
{
|
||
id: "2", name: "Trần Minh", handle: "@minh.tran", testimonial: "Tổ chức tiệc công ty ở đây, mọi người rất thích. Phòng riêng sạch sẽ, đồ ăn đầy đủ, không tiền phụ phí.", imageSrc: "http://img.b2bpic.net/free-photo/confident-handsome-man-taking-selfie-videocalling-with-digital-tablet_176420-19041.jpg", imageAlt: "Trần Minh"
|
||
},
|
||
{
|
||
id: "3", name: "Hoàng Linh", handle: "@linh.hoang", testimonial: "Mặc dù còn một vài điểm cần cải thiện, nhưng nhìn chung quán lắng nghe góp ý và có sự đổi mới. Giá rất công bằng.", imageSrc: "http://img.b2bpic.net/free-photo/woman-showing-ok-sign_23-2148990150.jpg?_wi=1", imageAlt: "Hoàng Linh"
|
||
},
|
||
{
|
||
id: "4", name: "Lê Hùng", handle: "@hung.le", testimonial: "Tuyệt vời cho ngày sinh nhật. Chill vibe, đèn nến, thực đơn phong phú, có thể gọi trước. Giới thiệu bạn bè liền!", imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg", imageAlt: "Lê Hùng"
|
||
},
|
||
{
|
||
id: "5", name: "Vũ Hà", handle: "@ha.vu", testimonial: "Đặt bàn qua điện thoại rất dễ. Nhân viên phục vụ tận tình, đồ ăn nướng kỹ. Sẽ quay lại lần tới.", imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-wearing-yellow-bandana_273609-13339.jpg?_wi=2", imageAlt: "Vũ Hà"
|
||
},
|
||
{
|
||
id: "6", name: "Phạm Lan", handle: "@lan.pham", testimonial: "Gia đình tôi rất yêu thích quán này. Không gian thoáng, an toàn cho trẻ em, giá hợp lý cho chất lượng.", imageSrc: "http://img.b2bpic.net/free-photo/woman-showing-ok-sign_23-2148990150.jpg?_wi=2", imageAlt: "Phạm Lan"
|
||
}
|
||
]}
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
speed={40}
|
||
ariaLabel="Testimonials section"
|
||
/>
|
||
</div>
|
||
|
||
<div id="reservation" data-section="reservation">
|
||
<ContactSplitForm
|
||
title="Đặt bàn ngay"
|
||
description="Nhập thông tin của bạn, chúng tôi sẽ xác nhận đặt bàn trong vòng 30 phút. Hoặc gọi trực tiếp: 024 1234 5678"
|
||
inputs={[
|
||
{
|
||
name: "name", type: "text", placeholder: "Họ tên của bạn", required: true
|
||
},
|
||
{
|
||
name: "phone", type: "tel", placeholder: "Số điện thoại", required: true
|
||
},
|
||
{
|
||
name: "guests", type: "number", placeholder: "Số người", required: true
|
||
},
|
||
{
|
||
name: "datetime", type: "datetime-local", placeholder: "Ngày / Giờ", required: true
|
||
}
|
||
]}
|
||
textarea={{
|
||
name: "notes", placeholder: "Ghi chú thêm (yêu cầu phòng riêng, sự kiện đặc biệt, v.v.)", rows: 4,
|
||
required: false
|
||
}}
|
||
buttonText="Gửi đặt bàn"
|
||
useInvertedBackground={false}
|
||
imageSrc="http://img.b2bpic.net/free-photo/tables-chairs-arranged-empty-coffee-shop_107420-96463.jpg"
|
||
imageAlt="Evening atmosphere"
|
||
mediaPosition="right"
|
||
mediaAnimation="slide-up"
|
||
ariaLabel="Reservation form section"
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<SplitAbout
|
||
title="Địa chỉ & Thông tin liên hệ"
|
||
description="Ghé thăm chúng tôi hoặc gọi trước để được phục vụ tốt nhất"
|
||
tag="Liên hệ"
|
||
bulletPoints={[
|
||
{
|
||
title: "📍 Địa chỉ", description: "84 Nguyễn Xuân Ôn, Hưng Bình, Vinh, Nghệ An"
|
||
},
|
||
{
|
||
title: "📞 Điện thoại", description: "024 1234 5678 (gọi để đặt bàn hoặc hỏi thêm)"
|
||
},
|
||
{
|
||
title: "⏰ Giờ mở cửa", description: "Thứ 2–7: 17:00–23:00, Chủ nhật: 10:00–23:00"
|
||
},
|
||
{
|
||
title: "🅿️ Bãi đậu xe", description: "Có bãi đậu xe rộng, miễn phí cho khách hàng"
|
||
}
|
||
]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/set-stationery-pins-thread-map_23-2148510443.jpg"
|
||
imageAlt="Location map"
|
||
imagePosition="right"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
mediaAnimation="slide-up"
|
||
ariaLabel="Contact information section"
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterSimple
|
||
columns={[
|
||
{
|
||
title: "Chuyên mục", items: [
|
||
{ label: "Trang chủ", href: "/" },
|
||
{ label: "Menu", href: "#menu" },
|
||
{ label: "Không gian", href: "#gallery" },
|
||
{ label: "Đánh giá", href: "#reviews" }
|
||
]
|
||
},
|
||
{
|
||
title: "Thông tin", items: [
|
||
{ label: "Gọi đặt bàn", href: "tel:+84987654321" },
|
||
{ label: "Đặt bàn online", href: "#reservation" },
|
||
{ label: "Liên hệ", href: "#contact" },
|
||
{ label: "Phòng riêng & sự kiện", href: "#contact" }
|
||
]
|
||
},
|
||
{
|
||
title: "Kết nối", items: [
|
||
{ label: "Facebook", href: "https://facebook.com" },
|
||
{ label: "Instagram", href: "https://instagram.com" },
|
||
{ label: "Zalo", href: "https://zalo.me" },
|
||
{ label: "Google Maps", href: "https://maps.google.com" }
|
||
]
|
||
}
|
||
]}
|
||
bottomLeftText="© 2025 Ga Nhỏ Camping. All rights reserved."
|
||
bottomRightText="Trải nghiệm nướng ngoài trời tuyệt vời!"
|
||
/>
|
||
</div>
|
||
</ThemeProvider>
|
||
);
|
||
}
|