220 lines
12 KiB
TypeScript
220 lines
12 KiB
TypeScript
"use client";
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import { Facebook, Instagram, Linkedin } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="smallMedium"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="aurora"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="La Sqala"
|
|
navItems={[
|
|
{ name: "About", id: "about" },
|
|
{ name: "Menu", id: "menu" },
|
|
{ name: "Reviews", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{ text: "Reserve Table", href: "#contact" }}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboard
|
|
logoText="La Sqala"
|
|
description="Experience authentic Moroccan cuisine in a stunning historic setting. Indulge in traditional flavors, warm hospitality, and an unforgettable dining journey."
|
|
buttons={[
|
|
{ text: "Explore Menu", href: "#menu" },
|
|
{ text: "Book Now", href: "#contact" }
|
|
]}
|
|
background={{ variant: "sparkles-gradient" }}
|
|
imageSrc="http://img.b2bpic.net/free-photo/tea-set-with-baklava-jams-dried-fruits_140725-8095.jpg"
|
|
imageAlt="La Sqala historic restaurant interior"
|
|
mediaAnimation="blur-reveal"
|
|
frameStyle="card"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
tag="Heritage Since 2005"
|
|
title="Where Tradition Meets Culinary Excellence"
|
|
buttons={[
|
|
{ text: "Learn Our Story", href: "#" },
|
|
{ text: "Visit Us", href: "#contact" }
|
|
]}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="menu" data-section="menu">
|
|
<FeatureCardSeven
|
|
title="Signature Moroccan Dishes"
|
|
description="Discover our most celebrated dishes, each prepared with authentic techniques and the finest ingredients."
|
|
tag="Our Specialties"
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Goat Tajine", description: "Tender slow-cooked goat meat with preserved lemons, olives, and aromatic spices. A true Moroccan classic served with traditional bread.", imageSrc: "http://img.b2bpic.net/free-photo/lamb-bone-sauteed-bone-broth-with-herbs-tomato-sauce_114579-1900.jpg"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Pastilla with Milk", description: "Delicate pastry layers filled with creamy milk custard and almonds, dusted with powdered sugar and cinnamon. A sweet Moroccan treasure.", imageSrc: "http://img.b2bpic.net/free-photo/turkish-desserts-with-kadaif-cup-shape-filled-with-nuts_140725-6866.jpg"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Couscous Royal", description: "Fluffy steamed couscous topped with tender meat, vegetables, and rich broth. A complete and satisfying Moroccan experience.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-arab-dish_23-2147794276.jpg"
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "Spring Rolls", description: "Crispy golden rolls filled with savory meat and vegetables, served with house-made sauce. Perfect as an appetizer or light meal.", imageSrc: "http://img.b2bpic.net/free-photo/fried-spring-roll_74190-5831.jpg"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
title="What Our Guests Say"
|
|
description="Real experiences from travelers and locals who have fallen in love with La Sqala"
|
|
tag="Trusted Reviews"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Johnson", role: "Food Critic", company: "Travel & Taste Magazine", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-middle-aged-businesswoman-standing-looking-away_74855-8812.jpg?_wi=1", imageAlt: "professional portrait woman headshot profile"
|
|
},
|
|
{
|
|
id: "2", name: "Ahmed Hassan", role: "Regular Guest", company: "Casa Local", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg?_wi=1", imageAlt: "professional portrait man headshot profile"
|
|
},
|
|
{
|
|
id: "3", name: "Mariah Williams", role: "Travel Blogger", company: "Wanderlust Chronicles", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-middle-aged-businesswoman-standing-looking-away_74855-8812.jpg?_wi=2", imageAlt: "professional portrait woman headshot profile"
|
|
},
|
|
{
|
|
id: "4", name: "Mohammed Benani", role: "Chef", company: "Culinary Academy", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg?_wi=2", imageAlt: "professional portrait man headshot profile"
|
|
},
|
|
{
|
|
id: "5", name: "Elena Rodriguez", role: "Event Planner", company: "Casablanca Events", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-middle-aged-businesswoman-standing-looking-away_74855-8812.jpg?_wi=3", imageAlt: "professional portrait woman headshot profile"
|
|
},
|
|
{
|
|
id: "6", name: "David Thomson", role: "Restaurant Owner", company: "Gastro Group", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg?_wi=3", imageAlt: "professional portrait man headshot profile"
|
|
}
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
title="Featured In"
|
|
description="La Sqala has been recognized by leading travel and dining publications"
|
|
tag="Press & Recognition"
|
|
names={[
|
|
"Michelin Guide", "TripAdvisor Excellence", "Gastro Magazine", "Travel & Leisure", "Moroccan Tourism", "Luxury Dining", "Cultural Heritage Awards", "Chef's Choice"
|
|
]}
|
|
speed={40}
|
|
showCard={true}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
title="Frequently Asked Questions"
|
|
description="Find answers to common questions about dining at La Sqala"
|
|
tag="Help & Information"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "What are your operating hours?", content: "La Sqala opens daily at 12:00 PM for lunch and remains open for dinner service. We are closed on major holidays. For special events and private bookings, please contact us in advance."
|
|
},
|
|
{
|
|
id: "2", title: "Can I make a reservation?", content: "Yes! We highly recommend reservations, especially for weekends and evenings. You can book online through our website or call us directly. Group reservations receive special attention."
|
|
},
|
|
{
|
|
id: "3", title: "Do you accommodate dietary restrictions?", content: "Absolutely. Our experienced chefs can prepare vegetarian, vegan, and gluten-free versions of our dishes. Please inform your server of any dietary requirements when ordering."
|
|
},
|
|
{
|
|
id: "4", title: "What is the dress code?", content: "Smart casual is our recommendation. We welcome all guests who dress respectfully. Our elegant atmosphere is perfect for special occasions and celebrations."
|
|
},
|
|
{
|
|
id: "5", title: "Is parking available?", content: "Yes, we have dedicated parking facilities for our guests. Valet parking services are also available for special occasions. Please ask our staff upon arrival."
|
|
},
|
|
{
|
|
id: "6", title: "Do you offer private events?", content: "Yes, La Sqala is an ideal venue for private dinners, weddings, and corporate events. We offer customized menus and can accommodate groups up to 150 guests."
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
title="Reserve Your Table"
|
|
description="Contact us to book your dining experience at La Sqala. Our team looks forward to welcoming you."
|
|
inputs={[
|
|
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
|
{ name: "email", type: "email", placeholder: "Your Email", required: true },
|
|
{ name: "phone", type: "tel", placeholder: "Phone Number", required: true },
|
|
{ name: "date", type: "date", placeholder: "Preferred Date", required: true }
|
|
]}
|
|
textarea={{
|
|
name: "message", placeholder: "Tell us about your preferences or special requests...", rows: 5,
|
|
required: false
|
|
}}
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/tables-chairs-arranged-empty-coffee-shop_107420-96463.jpg"
|
|
imageAlt="La Sqala restaurant ambiance"
|
|
mediaAnimation="blur-reveal"
|
|
mediaPosition="right"
|
|
buttonText="Reserve Your Table"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="La Sqala"
|
|
copyrightText="© 2025 La Sqala Restaurant. All rights reserved. Casablanca, Morocco."
|
|
socialLinks={[
|
|
{ icon: Facebook, href: "https://facebook.com/lasqalarestaurant", ariaLabel: "Facebook" },
|
|
{ icon: Instagram, href: "https://instagram.com/lasqalarestaurant", ariaLabel: "Instagram" },
|
|
{ icon: Linkedin, href: "https://linkedin.com/company/lasqala", ariaLabel: "LinkedIn" }
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|