385 lines
20 KiB
TypeScript
385 lines
20 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
|
import MediaAbout from '@/components/sections/about/MediaAbout';
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
|
import { Cake, Coffee, Heart, Sparkles, Star } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="smallMedium"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="noise"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="primary-glow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "#home"},
|
|
{
|
|
name: "About", id: "#about"},
|
|
{
|
|
name: "Menu", id: "#menu"},
|
|
{
|
|
name: "Offers", id: "#offers"},
|
|
{
|
|
name: "Reviews", id: "#reviews"},
|
|
{
|
|
name: "Loved By", id: "#loved-by"},
|
|
{
|
|
name: "FAQs", id: "#faqs"},
|
|
{
|
|
name: "Contact", id: "#contact"},
|
|
]}
|
|
brandName="EL&N London"
|
|
/>
|
|
</div>
|
|
|
|
<div id="home" data-section="home">
|
|
<HeroSplitKpi
|
|
background={{
|
|
variant: "radial-gradient"}}
|
|
imagePosition="right"
|
|
title="EL&N London: The Most Instagrammable Cafe"
|
|
description="Experience an enchanting blend of delightful pastries, gourmet coffees, and vibrant, picture-perfect settings. A taste of London's finest, designed for every moment."
|
|
kpis={[
|
|
{
|
|
value: "4.3", label: "Avg Rating"},
|
|
{
|
|
value: "3.6K", label: "Reviews"},
|
|
{
|
|
value: "Open Daily", label: "Closes 11pm"},
|
|
]}
|
|
enableKpiAnimation={true}
|
|
buttons={[
|
|
{
|
|
text: "View Menu", href: "#menu"},
|
|
{
|
|
text: "Make a Reservation", href: "#contact"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/coffee-collage-with-plant_23-2151876131.jpg"
|
|
imageAlt="Luxurious pink interior of EL&N London cafe"
|
|
mediaAnimation="slide-up"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-smiling-brunette-woman-drinks-morning-coffee-cafe_613910-12134.jpg", alt: "Smiling brunette woman drinks morning coffee in a cafe."},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-smiling-brunette-woman-drinks-morning-coffee-cafe_613910-12128.jpg", alt: "Smiling brunette woman drinks morning coffee in a cafe."},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-redhead-female-sunglasses-drinks-coffee-cafe-street_613910-1386.jpg", alt: "Redhead female in sunglasses, drinks coffee in a cafe on a street."},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/woman-taking-coffee_329181-11917.jpg", alt: "Woman taking a coffee"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/close-up-satisfied-bearded-guy-white-shirt-showing-thumbs-up-approval-like-agree-positive-answer_1258-26715.jpg", alt: "Satisfied bearded guy showing thumbs up"},
|
|
]}
|
|
avatarText="Join our community of over 500k happy guests!"
|
|
marqueeItems={[
|
|
{
|
|
type: "image", src: "http://img.b2bpic.net/free-photo/coffee-collage-with-plant_23-2151876147.jpg", alt: "Coffee collage with plant"},
|
|
{
|
|
type: "text", text: "London's Favourite Spot"},
|
|
{
|
|
type: "image", src: "http://img.b2bpic.net/free-photo/smartphone-with-cookies-camera-coffee-cup-table_23-2148043921.jpg", alt: "Smartphone with cookies, camera and coffee cup on table"},
|
|
{
|
|
type: "text-icon", text: "Pink Paradise", icon: Heart,
|
|
},
|
|
{
|
|
type: "image", src: "http://img.b2bpic.net/free-photo/notebook-with-coffee-cup-flowers-bouquet-table_23-2148043916.jpg", alt: "Notebook with coffee cup and flowers bouquet on table"},
|
|
]}
|
|
marqueeSpeed={40}
|
|
showMarqueeCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MediaAbout
|
|
useInvertedBackground={false}
|
|
title="Our Story: Where Every Corner is a Wonderland"
|
|
description="EL&N, short for 'Eat, Live & Nourish,' was born from a desire to create a space that inspires joy and beauty. Our iconic pink interiors and floral backdrops provide the perfect setting for unforgettable moments, while our carefully crafted menu offers a feast for all senses. Join us and discover why we're London's favorite destination."
|
|
buttons={[
|
|
{
|
|
text: "Learn More"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/cute-stylish-family-summer-city_1157-19953.jpg"
|
|
imageAlt="Exterior of EL&N London cafe with pink branding"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardNine
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
title: "Ombré Passion Fruit Cooler", description: "A vibrant and refreshing blend of passion fruit, perfect for a tropical escape.", phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-girl-summer-hat-with-fresh-drink-background-palm-leaves-beach-girl-offers-drink-close-up-holiday-concept_169016-4465.jpg", imageAlt: "Ombré Passion Fruit Cooler"},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-foods-cocktails-tall-glass_23-2149064146.jpg", imageAlt: "Ombré Passion Fruit Cooler on table"}
|
|
},
|
|
{
|
|
title: "Artisan Bakery Selection", description: "Indulge in our freshly baked pastries, cakes, and sweet treats made with love.", phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-food-lover-taking-pictures-meal_23-2149286445.jpg", imageAlt: "Assorted bakery items"},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cake-decorated-with-berries-cream_140725-3108.jpg", imageAlt: "Bakery display"}
|
|
},
|
|
{
|
|
title: "Egg and Avocado Toast", description: "A classic brunch favorite featuring creamy avocado and perfectly poached eggs on sourdough.", phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/top-view-sauced-meat-with-mushed-potatoes-sliced-bun-brown-wooden-table_140725-104355.jpg", imageAlt: "Egg and Avocado Toast"},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cereals-with-berries-tray_23-2147678793.jpg", imageAlt: "Egg and Avocado Toast close-up"}
|
|
},
|
|
{
|
|
title: "Decadent Cheesecake", description: "Rich, creamy cheesecake with a delicate crust, a perfect ending to any meal.", phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/side-view-classic-chocolate-fondant-plate_140725-10242.jpg", imageAlt: "Cheesecake slice"},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/eclairs-wooden-board-top-view_114579-13804.jpg", imageAlt: "Cheesecake on pink table"}
|
|
},
|
|
{
|
|
title: "Exquisite Pâtisserie", description: "Explore our collection of delicate French-inspired pastries, each a work of art.", phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/healthy-drink-composition-table_23-2148890312.jpg", imageAlt: "Assorted patisserie"},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/lychee-jelly-seasonal-fruit-beautifully-decorated-thai-dessert-concept_1150-23468.jpg", imageAlt: "Patisserie display"}
|
|
},
|
|
{
|
|
title: "Sparkling Rose Lemonade", description: "A refreshing and visually stunning pink lemonade with a hint of rose.", phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-delicious-breakfast-meal-assortment_23-2148833911.jpg?_wi=1", imageAlt: "Rose Lemonade"},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/homemade-smoothie-bowl-made-with-berries_1220-4560.jpg?_wi=1", imageAlt: "Rose Lemonade with petals"}
|
|
}
|
|
]}
|
|
showStepNumbers={false}
|
|
title="Popular Menu Highlights"
|
|
description="Discover our guest favorites, from refreshing drinks to savory bites and decadent desserts."
|
|
/>
|
|
</div>
|
|
|
|
<div id="menu" data-section="menu">
|
|
<ProductCardFour
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "p-coffee", name: "Signature Coffee", price: "£4.50", variant: "Hot/Cold", imageSrc: "http://img.b2bpic.net/free-photo/barista-preparing-beverage_23-2149458036.jpg", imageAlt: "Signature Coffee"},
|
|
{
|
|
id: "p-brunch", name: "Classic Brunch Plate", price: "£18.00", variant: "All-day", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-delicious-breakfast-meal-assortment_23-2148833911.jpg?_wi=2", imageAlt: "Classic Brunch Plate"},
|
|
{
|
|
id: "p-vegan", name: "Vegan Delight Bowl", price: "£14.50", variant: "Plant-based", imageSrc: "http://img.b2bpic.net/free-photo/homemade-smoothie-bowl-made-with-berries_1220-4560.jpg?_wi=2", imageAlt: "Vegan Delight Bowl"},
|
|
{
|
|
id: "p-pink-latte", name: "EL&N Pink Latte", price: "£5.50", variant: "Specialty", imageSrc: "http://img.b2bpic.net/free-photo/close-up-coffee-cup-with-heart-shape-latte-art-wood-table_23-2147908344.jpg", imageAlt: "EL&N Pink Latte"},
|
|
{
|
|
id: "p-cake", name: "EL&N Signature Cake", price: "£8.50/slice", variant: "Dessert", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-cupcakes-paper-roses_23-2148815921.jpg", imageAlt: "EL&N Signature Cake"},
|
|
{
|
|
id: "p-mocktail", name: "Fruity Mocktail", price: "£7.00", variant: "Refreshing", imageSrc: "http://img.b2bpic.net/free-photo/brine-cocktail-glass_658428-242.jpg", imageAlt: "Fruity Mocktail"},
|
|
{
|
|
id: "p-smoothie", name: "Berry Blast Smoothie", price: "£6.50", variant: "Healthy", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-banana-smoothie-composition_23-2148574204.jpg", imageAlt: "Berry Blast Smoothie"},
|
|
{
|
|
id: "p-afternoon-tea", name: "Afternoon Tea Set", price: "£35.00", variant: "Per Person", imageSrc: "http://img.b2bpic.net/free-photo/italian-tuscan-traditional-cookies-cantuccini-with-almonds-cup-coffee-light_114579-8094.jpg", imageAlt: "Afternoon Tea Set"},
|
|
]}
|
|
title="Indulge in Our Full Selection"
|
|
description="From our signature coffees to our delightful brunch and tempting desserts, there's something for everyone."
|
|
/>
|
|
</div>
|
|
|
|
<div id="offers" data-section="offers">
|
|
<PricingCardFive
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
plans={[
|
|
{
|
|
id: "p-brunch-affair", tag: "For Two", tagIcon: Sparkles,
|
|
price: "£40", period: "per couple", description: "Enjoy a delightful brunch experience for two, including any two main courses and two specialty drinks.", button: {
|
|
text: "Book Brunch"},
|
|
featuresTitle: "Includes:", features: [
|
|
"2 Main Courses", "2 Specialty Drinks", "Reserved Seating", "Complimentary Dessert"],
|
|
},
|
|
{
|
|
id: "p-celebration", tag: "Group Fun", tagIcon: Cake,
|
|
price: "£25", period: "per person", description: "Celebrate with friends and family! Includes a selection of pastries, sandwiches, and drinks for groups of 4-8.", button: {
|
|
text: "Plan Your Celebration"},
|
|
featuresTitle: "Includes:", features: [
|
|
"Assorted Pastries", "Mini Sandwiches", "Variety of Drinks", "Custom Cake Option"],
|
|
},
|
|
{
|
|
id: "p-afternoon-tea-indulgence", tag: "Luxurious", tagIcon: Coffee,
|
|
price: "£35", period: "per person", description: "Experience our signature afternoon tea with an array of sweet and savory treats.", button: {
|
|
text: "Reserve Afternoon Tea"},
|
|
featuresTitle: "Includes:", features: [
|
|
"Scones with Clotted Cream & Jam", "Finger Sandwiches", "Petit Fours", "Choice of Teas/Coffee"],
|
|
},
|
|
]}
|
|
title="Curated Experiences & Group Packages"
|
|
description="Beyond our daily delights, discover special offerings perfect for any occasion."
|
|
/>
|
|
</div>
|
|
|
|
<div id="reviews" data-section="reviews">
|
|
<TestimonialCardTwelve
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Johnson", imageSrc: "http://img.b2bpic.net/free-photo/portrait-waitress-standing-counter_1170-668.jpg"},
|
|
{
|
|
id: "2", name: "Michael Chen", imageSrc: "http://img.b2bpic.net/free-photo/closeup-satisfied-bearded-guy-white-shirt-showing-thumbs-up-approval-like-agree-positiv_1258-113283.jpg"},
|
|
{
|
|
id: "3", name: "Emily Rodriguez", imageSrc: "http://img.b2bpic.net/free-photo/pretty-woman-look-camera_197531-33377.jpg"},
|
|
{
|
|
id: "4", name: "David Kim", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-with-afro-hairstyle_23-2150677138.jpg"},
|
|
{
|
|
id: "5", name: "Jessica Lee", imageSrc: "http://img.b2bpic.net/free-photo/closeup-assertive-young-man-assuring-everything-ok-showing-okay-sign-smiling-yes-positive_1258-172817.jpg"},
|
|
{
|
|
id: "6", name: "Chris Davis", imageSrc: "http://img.b2bpic.net/free-photo/excited-joyful-beautiful-woman-gesturing-with-hand_74855-2753.jpg"},
|
|
]}
|
|
cardTitle="What Our Guests Say"
|
|
cardTag="Loved by thousands"
|
|
cardTagIcon={Star}
|
|
buttons={[
|
|
{
|
|
text: "Read All Reviews", href: "https://www.google.com/search?q=EL%26N+London+reviews"},
|
|
]}
|
|
cardAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="loved-by" data-section="loved-by">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
names={[
|
|
"Vogue", "Time Out London", "Evening Standard", "ELLE", "Harper's Bazaar", "The Guardian", "Condé Nast Traveler"]}
|
|
title="As Seen In & Loved By"
|
|
description="Featured in leading publications and cherished by our patrons."
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faqs" data-section="faqs">
|
|
<FaqBase
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "faq1", title: "Do you take reservations?", content: "Yes, we highly recommend making a reservation, especially during peak hours and weekends, to ensure you get a table."},
|
|
{
|
|
id: "faq2", title: "Do you offer vegan or gluten-free options?", content: "Absolutely! We have a variety of delicious vegan and gluten-free options available. Please inform your server about any dietary requirements."},
|
|
{
|
|
id: "faq3", title: "What are your opening hours?", content: "Our cafe is open daily from 9:00 AM to 11:00 PM. Please check our 'Contact' section for any special holiday hours."},
|
|
{
|
|
id: "faq4", title: "Can I host a private event at EL&N London?", content: "Yes, our venues are perfect for private events. Please contact our events team through the 'Contact' form for more information and tailored packages."},
|
|
]}
|
|
title="Your Questions, Answered"
|
|
description="Find quick answers to common queries about EL&N London."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
useInvertedBackground={true}
|
|
title="Visit Us or Make a Reservation"
|
|
description="We look forward to welcoming you to EL&N London. For inquiries or to book a table, please use the form below."
|
|
inputs={[
|
|
{
|
|
name: "name", type: "text", placeholder: "Your Name", required: true,
|
|
},
|
|
{
|
|
name: "email", type: "email", placeholder: "Your Email", required: true,
|
|
},
|
|
{
|
|
name: "phone", type: "tel", placeholder: "Your Phone Number"},
|
|
{
|
|
name: "date", type: "date", placeholder: "Preferred Date"},
|
|
{
|
|
name: "time", type: "time", placeholder: "Preferred Time"},
|
|
{
|
|
name: "guests", type: "number", placeholder: "Number of Guests"},
|
|
]}
|
|
textarea={{
|
|
name: "message", placeholder: "Your Message or Special Request", rows: 4,
|
|
}}
|
|
imageSrc="http://img.b2bpic.net/free-photo/full-shot-woman-posing-night-with-flash_23-2150204419.jpg"
|
|
imageAlt="Elegant pink cafe interior with seating for reservations"
|
|
mediaPosition="left"
|
|
buttonText="Send Message"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
logoSrc="http://img.b2bpic.net/free-photo/rendering-elegant-neoclassical-interior_23-2151059673.jpg"
|
|
logoAlt="EL&N London Logo"
|
|
columns={[
|
|
{
|
|
items: [
|
|
{
|
|
label: "About Us", href: "#about"},
|
|
{
|
|
label: "Our Menu", href: "#menu"},
|
|
{
|
|
label: "Special Offers", href: "#offers"},
|
|
{
|
|
label: "Reviews", href: "#reviews"},
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{
|
|
label: "Careers", href: "#"},
|
|
{
|
|
label: "Press", href: "#loved-by"},
|
|
{
|
|
label: "Franchise", href: "#"},
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{
|
|
label: "Privacy Policy", href: "#"},
|
|
{
|
|
label: "Terms of Service", href: "#"},
|
|
{
|
|
label: "FAQ", href: "#faqs"},
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{
|
|
label: "Instagram", href: "https://www.instagram.com/elan_cafe"},
|
|
{
|
|
label: "Facebook", href: "https://www.facebook.com/ELNCafe/"},
|
|
{
|
|
label: "TikTok", href: "https://www.tiktok.com/@elancafe"},
|
|
],
|
|
},
|
|
]}
|
|
logoText="EL&N London"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|