142 lines
6.9 KiB
TypeScript
142 lines
6.9 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
|
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
|
import { MessageCircle, Utensils } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="mediumLarge"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="noise"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="bold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "Showcase", id: "gallery" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
brandName="Unique Food Choice"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardGallery
|
|
background={{ variant: "sparkles-gradient"}}
|
|
title="Unique Food Choice"
|
|
description="Experience the authentic taste of Karachi at our premium dining destination. Where tradition meets modern flavor."
|
|
buttons={[{ text: "Order Now", href: "#menu" }]}
|
|
mediaItems={[
|
|
{ videoSrc: "https://www.w3schools.com/html/mov_bbb.mp4", videoAriaLabel: "Kitchen Showcase" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/ribeye-steak-finely-cooked-cut-served-with-tartar-sauce_114579-2030.jpg", imageAlt: "Traditional Cuisine" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/stick-kebab-finely-cooked-served-with-orange-sauce_114579-1722.jpg?_wi=1", imageAlt: "Delicious BBQ" }
|
|
]}
|
|
mediaAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TestimonialAboutCard
|
|
useInvertedBackground={false}
|
|
tag="Our Brand Story"
|
|
title="Authentic Taste, Affordable Prices"
|
|
description="At Unique Food Choice, we pride ourselves on serving high-quality Pakistani cuisine crafted from the finest ingredients. Our mission is to provide an unforgettable culinary experience."
|
|
subdescription="Located in the heart of Aziz Nagar, we strive to maintain the perfect balance of quality and value for our community."
|
|
imageSrc="http://img.b2bpic.net/free-photo/top-view-dining-tables-without-food_23-2150157778.jpg?_wi=1"
|
|
mediaAnimation="slide-up"
|
|
icon={Utensils}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardThirteen
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{ id: "1", name: "Ahmed K.", handle: "@ahmed", testimonial: "Good food in economical prices.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/low-angle-friends-meeting-restaurant_23-2148395335.jpg?_wi=1" },
|
|
{ id: "2", name: "Sara M.", handle: "@sara", testimonial: "The best Balochi Tikka in town!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/friends-eating-barbecue-outdoors_23-2148733608.jpg?_wi=1" }
|
|
]}
|
|
showRating={true}
|
|
title="Customer Testimonials"
|
|
description="See what our community has to say."
|
|
/>
|
|
</div>
|
|
|
|
<div id="gallery" data-section="gallery">
|
|
<FeatureBento
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
bentoComponent: "media-stack",
|
|
title: "Our Kitchen",
|
|
description: "See how we prepare your meals.",
|
|
items: [
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/green-salad-lettuce-corns-bell-peppers-parsley-side-view_140725-11265.jpg" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/top-view-tasty-soup-with-different-seasonings-grey-floor-soup-meal-food-meat-seasoning-spicy_140725-80760.jpg" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/stick-kebab-finely-cooked-served-with-orange-sauce_114579-1722.jpg?_wi=2" }
|
|
]
|
|
},
|
|
{
|
|
bentoComponent: "media-stack",
|
|
title: "Our Dining",
|
|
description: "Experience our atmosphere.",
|
|
items: [
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/top-view-dining-tables-without-food_23-2150157778.jpg?_wi=2" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/friends-eating-barbecue-outdoors_23-2148733608.jpg?_wi=2" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/low-angle-friends-meeting-restaurant_23-2148395335.jpg?_wi=2" }
|
|
]
|
|
}
|
|
]}
|
|
title="Video Showcase"
|
|
description="Highlights of our restaurant."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
useInvertedBackground={true}
|
|
background={{ variant: "plain" }}
|
|
tag="Get In Touch"
|
|
title="Contact Information"
|
|
description="Visit us at 1k Stop, Block M, Aziz Nagar, Karachi. Follow our social links below or call us for reservations."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
columns={[
|
|
{ items: [{ label: "Social Links:" }, { label: "Instagram", href: "#" }, { label: "Facebook", href: "#" }, { label: "Twitter", href: "#" }] },
|
|
{ items: [{ label: "Newsletter" }, { label: "Subscribe for updates" }, { label: "(Form placeholder)" }] }
|
|
]}
|
|
logoText="Unique Food Choice"
|
|
/>
|
|
</div>
|
|
|
|
<a href="https://wa.me/923049529287" target="_blank" className="fixed bottom-6 right-6 z-50 bg-green-500 text-white p-4 rounded-full shadow-lg hover:scale-110 transition-transform">
|
|
<MessageCircle />
|
|
</a>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |