Merge version_1 into main #3

Merged
bender merged 2 commits from version_1 into main 2026-03-06 13:36:05 +00:00
2 changed files with 367 additions and 665 deletions

View File

@@ -10,29 +10,27 @@ import Link from "next/link";
export default function MenuPage() {
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="small"
sizing="mediumLargeSizeLargeTitles"
background="fluid"
cardStyle="gradient-radial"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="layered"
headingFontWeight="light"
defaultButtonVariant="text-stagger"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="medium"
sizing="medium"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Café DH"
navItems={[
{ name: "Home", id: "home" },
{ name: "Menu", id: "menu" },
{ name: "Features", id: "features" },
{ name: "Pricing", id: "pricing" },
{ name: "Home", id: "/" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
]}
button={{
text: "Order Now",
href: "#menu",
text: "Order Now", href: "#menu"
}}
animateOnLoad={true}
className="rounded-full backdrop-blur-md"
@@ -42,51 +40,24 @@ export default function MenuPage() {
/>
</div>
<div id="menu" data-section="menu" className="bg-card py-16 md:py-24 px-4 sm:px-6 lg:px-8">
<div id="menu" data-section="menu" className="py-16 md:py-24 px-4 sm:px-6 lg:px-8">
<ProductCardFour
products={[
{
id: "espresso",
name: "Signature Espresso",
price: "$3.50",
variant: "Classic Premium Roast",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/perfect-espresso-shot-in-professional-ca-1772803882862-1af7e568.png?_wi=2",
imageAlt: "Signature Espresso Shot",
isFavorited: false,
id: "espresso", name: "Signature Espresso", price: "$3.50", variant: "Classic Premium Roast", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/perfect-espresso-shot-in-professional-ca-1772803882862-1af7e568.png", imageAlt: "Signature Espresso Shot", isFavorited: false
},
{
id: "cappuccino",
name: "Artisan Cappuccino",
price: "$4.50",
variant: "Latte Art Steamed Milk",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/beautiful-cappuccino-with-latte-art-foam-1772803884064-100d9be8.png?_wi=2",
imageAlt: "Artisan Cappuccino with Latte Art",
isFavorited: false,
id: "cappuccino", name: "Artisan Cappuccino", price: "$4.50", variant: "Latte Art Steamed Milk", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/beautiful-cappuccino-with-latte-art-foam-1772803884064-100d9be8.png", imageAlt: "Artisan Cappuccino with Latte Art", isFavorited: false
},
{
id: "iced-coffee",
name: "Cold Brew Delight",
price: "$4.00",
variant: "Chilled Refreshing Smooth",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/refreshing-iced-coffee-in-tall-glass-wit-1772803882210-09bb8d30.png?_wi=2",
imageAlt: "Refreshing Iced Coffee",
isFavorited: false,
},
{
id: "pastry",
name: "Fresh Pastry Special",
price: "$5.50",
variant: "Bakery Fresh Daily Selection",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/delicious-pastry-or-croissant-on-caf-pla-1772803882281-79f44881.png?_wi=2",
imageAlt: "Fresh Baked Pastry Offering",
isFavorited: false,
},
id: "iced-coffee", name: "Cold Brew Delight", price: "$4.00", variant: "Chilled Refreshing Smooth", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/refreshing-iced-coffee-in-tall-glass-wit-1772803882210-09bb8d30.png", imageAlt: "Refreshing Iced Coffee", isFavorited: false
}
]}
title="Our Coffee & Food Menu"
description="Handcrafted beverages and fresh pastries made with premium ingredients"
tag="Premium Selection"
textboxLayout="default"
gridVariant="four-items-2x2-equal-grid"
gridVariant="uniform-all-items-equal"
animationType="slide-up"
useInvertedBackground={false}
ariaLabel="Coffee and Food Menu"
@@ -95,28 +66,32 @@ export default function MenuPage() {
/>
</div>
<div id="faq" data-section="faq" className="bg-background py-16 md:py-24 px-4 sm:px-6 lg:px-8">
<div id="faq" data-section="faq" className="py-16 md:py-24 px-4 sm:px-6 lg:px-8">
<FaqSplitText
faqs={[
{
id: "1",
title: "Can I customize my coffee order?",
content: "Absolutely! You can customize your drink with different milk types, syrups, extra shots, and temperature preferences through our ordering system.",
id: "1", title: "How do I place an order?", content: "You can order through our WhatsApp integration, mobile app, or in-store. Just browse the menu, select your items, and proceed to checkout. We'll confirm your order instantly."
},
{
id: "2",
title: "Do you offer dairy-free options?",
content: "Yes, we offer almond milk, oat milk, soy milk, and coconut milk for all our beverages. Just specify your preference when ordering.",
id: "2", title: "Are there vegan options available?", content: "Yes! We offer a full selection of vegan coffee drinks made with oat, almond, coconut, or soy milk. All our pastries also have vegan alternatives available."
},
{
id: "3",
title: "Are your pastries made fresh daily?",
content: "Yes! All our pastries and baked goods are freshly prepared every morning using premium ingredients. Available while supplies last.",
id: "3", title: "Can I customize my drink?", content: "Absolutely! You can customize any drink with different milk options, extra shots, syrup flavors, and temperature preferences. Use our AI chatbot to specify exactly what you want."
},
{
id: "4", title: "Do you offer loyalty rewards?", content: "Yes! Our Professional plan includes a loyalty program. Earn points on every purchase and redeem them for free drinks and pastries."
},
{
id: "5", title: "What are your delivery options?", content: "We partner with major delivery services for quick delivery within 30 minutes. You can also pick up in-store or enjoy your order at one of our café tables."
},
{
id: "6", title: "Are there seasonal specials?", content: "Yes! We update our menu seasonally with limited-time offerings. Follow us on WhatsApp to get notified about new drinks and special promotions."
}
]}
sideTitle="Menu FAQ"
sideTitle="Menu FAQs"
textPosition="left"
useInvertedBackground={false}
faqsAnimation="blur-reveal"
animationType="smooth"
ariaLabel="Menu FAQ Section"
containerClassName="max-w-6xl mx-auto"
@@ -128,89 +103,37 @@ export default function MenuPage() {
<FooterSimple
columns={[
{
title: "Product",
items: [
{
label: "Features",
href: "#features",
},
{
label: "Pricing",
href: "#pricing",
},
{
label: "Menu Management",
href: "#",
},
{
label: "Analytics",
href: "#",
},
],
title: "Product", items: [
{ label: "Menu", href: "#menu" },
{ label: "Ordering", href: "#" },
{ label: "Loyalty Program", href: "#" },
{ label: "Delivery", href: "#" }
]
},
{
title: "Company",
items: [
{
label: "About",
href: "/about",
},
{
label: "Team",
href: "#team",
},
{
label: "Blog",
href: "#",
},
{
label: "Careers",
href: "#",
},
],
title: "Company", items: [
{ label: "About", href: "/about" },
{ label: "Locations", href: "#" },
{ label: "Blog", href: "#" },
{ label: "Careers", href: "#" }
]
},
{
title: "Support",
items: [
{
label: "Documentation",
href: "#",
},
{
label: "Contact",
href: "/contact",
},
{
label: "FAQ",
href: "#faq",
},
{
label: "Status",
href: "#",
},
],
title: "Support", items: [
{ label: "Contact", href: "/contact" },
{ label: "FAQ", href: "#faq" },
{ label: "Order Status", href: "#" },
{ label: "Feedback", href: "#" }
]
},
{
title: "Legal",
items: [
{
label: "Privacy Policy",
href: "#",
},
{
label: "Terms of Service",
href: "#",
},
{
label: "Cookie Policy",
href: "#",
},
{
label: "Compliance",
href: "#",
},
],
},
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Cookie Policy", href: "#" },
{ label: "Allergen Info", href: "#" }
]
}
]}
bottomLeftText="© 2025 Café DH. All rights reserved."
bottomRightText="Made with ☕ by Café DH Automation"

View File

@@ -9,386 +9,36 @@ import PricingCardThree from "@/components/sections/pricing/PricingCardThree";
import TeamCardSix from "@/components/sections/team/TeamCardSix";
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
import ContactFaq from "@/components/sections/contact/ContactFaq";
import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
import FooterSimple from "@/components/sections/footer/FooterSimple";
import { Calendar, Sparkles } from "lucide-react";
import Link from "next/link";
import { Sparkles, Users } from "lucide-react";
export default function HomePage() {
const navItems = [
{ name: "Home", id: "home" },
{ name: "Menu", id: "menu" },
{ name: "Features", id: "features" },
{ name: "Pricing", id: "pricing" },
];
const footerColumns = [
{
title: "Product",
items: [
{ label: "Features", href: "#features" },
{ label: "Pricing", href: "#pricing" },
{ label: "Menu Management", href: "#" },
{ label: "Analytics", href: "#" },
],
},
{
title: "Company",
items: [
{ label: "About", href: "/about" },
{ label: "Team", href: "#team" },
{ label: "Blog", href: "#" },
{ label: "Careers", href: "#" },
],
},
{
title: "Support",
items: [
{ label: "Documentation", href: "#" },
{ label: "Contact", href: "/contact" },
{ label: "FAQ", href: "#faq" },
{ label: "Status", href: "#" },
],
},
{
title: "Legal",
items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Cookie Policy", href: "#" },
{ label: "Compliance", href: "#" },
],
},
];
const heroButtons = [
{
text: "Order Coffee Now",
href: "#menu",
},
{
text: "Explore Features",
href: "#features",
},
];
const features = [
{
id: "01",
title: "Smart Menu Management",
description:
"Digital menu with real-time inventory tracking, price management, and item categorization. Update your offerings instantly across all channels.",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/a-sleek-digital-menu-interface-displayed-1772803884474-ee4440b3.png?_wi=1",
imageAlt: "Digital Menu Management System",
},
{
id: "02",
title: "WhatsApp Integration",
description:
"Direct customer communication through WhatsApp. Order confirmations, delivery tracking, and customer support all in one place.",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/whatsapp-chat-interface-showing-order-co-1772803883852-bb6d3fa2.png",
imageAlt: "WhatsApp Business Integration",
},
{
id: "03",
title: "Admin Dashboard",
description:
"Comprehensive control center for all café operations. Monitor orders, manage staff, track revenue, and access analytics in real-time.",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/comprehensive-admin-dashboard-for-caf-ma-1772803884190-dbb366cd.png?_wi=1",
imageAlt: "Complete Admin Dashboard",
},
{
id: "04",
title: "AI Chatbot Support",
description:
"Intelligent bot handles customer inquiries 24/7. Orders, reservations, and common questions answered instantly with natural language processing.",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/ai-chatbot-interface-showing-conversatio-1772803884586-aa448084.png",
imageAlt: "AI Chatbot Assistant System",
},
];
const products = [
{
id: "espresso",
name: "Signature Espresso",
price: "$3.50",
variant: "Classic Premium Roast",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/perfect-espresso-shot-in-professional-ca-1772803882862-1af7e568.png?_wi=1",
imageAlt: "Signature Espresso Shot",
isFavorited: false,
},
{
id: "cappuccino",
name: "Artisan Cappuccino",
price: "$4.50",
variant: "Latte Art Steamed Milk",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/beautiful-cappuccino-with-latte-art-foam-1772803884064-100d9be8.png?_wi=1",
imageAlt: "Artisan Cappuccino with Latte Art",
isFavorited: false,
},
{
id: "iced-coffee",
name: "Cold Brew Delight",
price: "$4.00",
variant: "Chilled Refreshing Smooth",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/refreshing-iced-coffee-in-tall-glass-wit-1772803882210-09bb8d30.png?_wi=1",
imageAlt: "Refreshing Iced Coffee",
isFavorited: false,
},
{
id: "pastry",
name: "Fresh Pastry Special",
price: "$5.50",
variant: "Bakery Fresh Daily Selection",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/delicious-pastry-or-croissant-on-caf-pla-1772803882281-79f44881.png?_wi=1",
imageAlt: "Fresh Baked Pastry Offering",
isFavorited: false,
},
];
const pricingPlans = [
{
id: "starter",
price: "$299/mo",
name: "Starter Plan",
buttons: [
{
text: "Get Started",
href: "/contact",
},
{
text: "Learn More",
href: "#faq",
},
],
features: [
"Digital menu with up to 50 items",
"Basic order management",
"Email notifications",
"Single staff account",
"Standard support",
],
},
{
id: "professional",
badge: "Most Popular",
badgeIcon: Sparkles,
price: "$699/mo",
name: "Professional Plan",
buttons: [
{
text: "Get Started",
href: "/contact",
},
{
text: "Chat to Sales",
href: "/contact",
},
],
features: [
"Unlimited menu items & categories",
"WhatsApp integration",
"AI chatbot support",
"Up to 10 staff accounts",
"Real-time analytics & reporting",
"Priority customer support",
],
},
{
id: "enterprise",
price: "Custom",
name: "Enterprise Plan",
buttons: [
{
text: "Contact Sales",
href: "/contact",
},
{
text: "Schedule Demo",
href: "/contact",
},
],
features: [
"Everything in Professional +",
"Multi-location support",
"Advanced admin dashboard",
"Custom integrations",
"Dedicated account manager",
"24/7 premium support",
],
},
];
const teamMembers = [
{
id: "1",
name: "Ahmed Hassan",
role: "Founder & CEO",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/professional-headshot-portrait-of-a-conf-1772803884097-70cf7ad7.png?_wi=1",
imageAlt: "Ahmed Hassan, Founder & CEO",
},
{
id: "2",
name: "Sofia Rodriguez",
role: "CTO & Tech Lead",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/professional-portrait-of-a-tech-entrepre-1772803883714-fa3a736c.png?_wi=1",
imageAlt: "Sofia Rodriguez, CTO & Tech Lead",
},
{
id: "3",
name: "James Chen",
role: "Operations Manager",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/professional-portrait-of-operations-or-c-1772803883453-de80235e.png?_wi=1",
imageAlt: "James Chen, Operations Manager",
},
{
id: "4",
name: "Maria Santos",
role: "Customer Success",
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/friendly-professional-portrait-of-custom-1772803883914-241acdac.png?_wi=1",
imageAlt: "Maria Santos, Customer Success Manager",
},
];
const testimonials = [
{
id: "1",
name: "Ahmed Ali",
role: "Café Owner",
company: "Prime Coffee House",
rating: 5,
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/portrait-photo-of-satisfied-caf-business-1772803883403-d519197a.png?_wi=1",
imageAlt: "Ahmed Ali, Café Owner",
},
{
id: "2",
name: "Fatima Mansour",
role: "Business Manager",
company: "Brew & Blend Café",
rating: 5,
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/professional-portrait-of-female-caf-entr-1772803883756-ec1629f9.png?_wi=1",
imageAlt: "Fatima Mansour, Business Manager",
},
{
id: "3",
name: "Omar Khalid",
role: "Operations Director",
company: "Urban Coffee Collective",
rating: 5,
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/professional-portrait-of-caf-manager-or--1772803882833-df459eeb.png?_wi=1",
imageAlt: "Omar Khalid, Operations Director",
},
{
id: "4",
name: "Noor Ibrahim",
role: "Café Manager",
company: "The Daily Grind",
rating: 5,
imageSrc:
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/professional-portrait-of-younger-team-me-1772803884851-cca8f182.png?_wi=1",
imageAlt: "Noor Ibrahim, Café Manager",
},
];
const kpiItems = [
{
value: "200+",
label: "Active Café Partners",
},
{
value: "98%",
label: "Customer Satisfaction",
},
{
value: "15+",
label: "Countries Served",
},
];
const faqs = [
{
id: "1",
title: "How do I integrate WhatsApp with my café?",
content:
"WhatsApp integration is automatic with Professional and Enterprise plans. We handle the setup during onboarding. Customers can reach you directly through WhatsApp for orders and support.",
},
{
id: "2",
title: "Can the AI chatbot handle complex orders?",
content:
"Yes! Our AI chatbot can process multi-item orders, customize drinks, manage reservations, and answer policy questions. It learns from your café's specific offerings and customer preferences.",
},
{
id: "3",
title: "What payment methods are supported?",
content:
"We support all major payment methods including credit cards, debit cards, mobile wallets, and bank transfers. Payment processing is secure and PCI-compliant.",
},
{
id: "4",
title: "Is there a setup fee?",
content:
"No setup fees! You only pay the monthly subscription. Our team provides free onboarding and training for all new café partners.",
},
{
id: "5",
title: "Can I manage multiple café locations?",
content:
"Yes, with our Enterprise plan! Manage unlimited café locations from a single dashboard, with location-specific analytics and staff management.",
},
{
id: "6",
title: "What kind of support do you offer?",
content:
"We provide email support for Starter plans, priority support for Professional plans, and 24/7 dedicated support for Enterprise clients. All plans include access to our knowledge base and video tutorials.",
},
];
const socialProofNames = [
"Starbucks Partners",
"Nestlé Professional",
"Square Sellers",
"Shopify Merchants",
"WhatsApp Business",
"Google Workspace",
"Premium Café Chain",
];
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="reveal-blur"
borderRadius="pill"
contentWidth="small"
sizing="mediumLargeSizeLargeTitles"
background="fluid"
cardStyle="gradient-radial"
primaryButtonStyle="diagonal-gradient"
secondaryButtonStyle="layered"
headingFontWeight="light"
defaultButtonVariant="text-stagger"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="medium"
sizing="medium"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<div id="nav" data-section="nav" className="relative z-50">
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
brandName="Café DH"
navItems={navItems}
navItems={[
{ name: "Home", id: "/" },
{ name: "About", id: "/about" },
{ name: "Contact", id: "/contact" },
]}
button={{
text: "Order Now",
href: "#menu",
text: "Order Now", href: "#menu"
}}
animateOnLoad={true}
className="rounded-full backdrop-blur-md"
@@ -398,181 +48,310 @@ export default function HomePage() {
/>
</div>
<div
id="hero"
data-section="hero"
className="bg-gradient-to-b from-background to-card py-20"
>
<div className="px-4 sm:px-6 lg:px-8 max-w-6xl mx-auto">
<HeroLogoBillboard
logoText="Café DH"
description="Experience premium coffee automation. Seamless ordering, integrated WhatsApp communication, and intelligent AI-powered service management."
buttons={heroButtons}
buttonAnimation="slide-up"
background={{ variant: "fluid" }}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/a-beautiful-inviting-caf-interior-shot-w-1772803883247-91c3ba25.png"
imageAlt="Café DH Premium Interior"
mediaAnimation="blur-reveal"
frameStyle="card"
ariaLabel="Café DH Hero Section"
className="py-20"
containerClassName="max-w-6xl mx-auto"
logoClassName="text-6xl md:text-8xl font-light"
descriptionClassName="text-lg md:text-2xl font-light"
buttonContainerClassName="gap-4 mt-8"
mediaWrapperClassName="mt-12 rounded-2xl overflow-hidden"
/>
</div>
<div id="hero" data-section="hero" className="py-20">
<HeroLogoBillboard
logoText="Café DH"
description="Experience premium coffee automation. Seamless ordering, integrated WhatsApp communication, and intelligent AI-powered service management."
buttons={[
{ text: "Order Coffee Now", href: "#menu" },
{ text: "Explore Features", href: "#features" }
]}
buttonAnimation="slide-up"
background={{ variant: "sparkles-gradient" }}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/a-beautiful-inviting-caf-interior-shot-w-1772803883247-91c3ba25.png"
imageAlt="Café DH Premium Interior"
mediaAnimation="blur-reveal"
frameStyle="card"
ariaLabel="Café DH Hero Section"
className="py-20"
containerClassName="max-w-6xl mx-auto"
logoClassName="text-6xl md:text-8xl font-light"
descriptionClassName="text-lg md:text-2xl font-light"
buttonContainerClassName="gap-4 mt-8"
mediaWrapperClassName="mt-12 rounded-2xl overflow-hidden"
/>
</div>
<div
id="features"
data-section="features"
className="bg-background py-16 md:py-24"
>
<div className="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
<FeatureCardThree
features={features}
title="Powerful Features for Your Café"
description="Everything you need to manage a modern café operation efficiently"
tag="Key Features"
tagAnimation="slide-up"
textboxLayout="default"
gridVariant="bento-grid"
animationType="slide-up"
useInvertedBackground={false}
ariaLabel="Features Section"
containerClassName="max-w-7xl mx-auto"
cardClassName="rounded-2xl overflow-hidden"
/>
</div>
<div id="features" data-section="features" className="py-16 md:py-24 px-4 sm:px-6 lg:px-8">
<FeatureCardThree
features={[
{
id: "01", title: "Smart Menu Management", description: "Digital menu with real-time inventory tracking, price management, and item categorization. Update your offerings instantly across all channels.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/a-sleek-digital-menu-interface-displayed-1772803884474-ee4440b3.png", imageAlt: "Digital Menu Management System"
},
{
id: "02", title: "WhatsApp Integration", description: "Direct customer communication through WhatsApp. Order confirmations, delivery tracking, and customer support all in one place.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/whatsapp-chat-interface-showing-order-co-1772803883852-bb6d3fa2.png", imageAlt: "WhatsApp Business Integration"
},
{
id: "03", title: "Admin Dashboard", description: "Comprehensive control center for all café operations. Monitor orders, manage staff, track revenue, and access analytics in real-time.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/comprehensive-admin-dashboard-for-caf-ma-1772803884190-dbb366cd.png", imageAlt: "Complete Admin Dashboard"
},
{
id: "04", title: "AI Chatbot Support", description: "Intelligent bot handles customer inquiries 24/7. Orders, reservations, and common questions answered instantly with natural language processing.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/ai-chatbot-interface-showing-conversatio-1772803884586-aa448084.png", imageAlt: "AI Chatbot Assistant System"
}
]}
title="Powerful Features for Your Café"
description="Everything you need to manage a modern café operation efficiently"
tag="Key Features"
tagAnimation="slide-up"
textboxLayout="default"
gridVariant="bento-grid"
animationType="slide-up"
useInvertedBackground={false}
ariaLabel="Features Section"
containerClassName="max-w-7xl mx-auto"
cardClassName="rounded-2xl overflow-hidden"
/>
</div>
<div id="menu" data-section="menu" className="bg-card py-16 md:py-24">
<div className="px-4 sm:px-6 lg:px-8 max-w-6xl mx-auto">
<ProductCardFour
products={products}
title="Our Coffee & Food Menu"
description="Handcrafted beverages and fresh pastries made with premium ingredients"
tag="Premium Selection"
textboxLayout="default"
gridVariant="four-items-2x2-equal-grid"
animationType="slide-up"
useInvertedBackground={false}
ariaLabel="Coffee and Food Menu"
containerClassName="max-w-6xl mx-auto"
cardClassName="rounded-2xl overflow-hidden"
/>
</div>
<div id="menu" data-section="menu" className="py-16 md:py-24 px-4 sm:px-6 lg:px-8">
<ProductCardFour
products={[
{
id: "espresso", name: "Signature Espresso", price: "$3.50", variant: "Classic Premium Roast", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/perfect-espresso-shot-in-professional-ca-1772803882862-1af7e568.png", imageAlt: "Signature Espresso Shot", isFavorited: false
},
{
id: "cappuccino", name: "Artisan Cappuccino", price: "$4.50", variant: "Latte Art Steamed Milk", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/beautiful-cappuccino-with-latte-art-foam-1772803884064-100d9be8.png", imageAlt: "Artisan Cappuccino with Latte Art", isFavorited: false
},
{
id: "iced-coffee", name: "Cold Brew Delight", price: "$4.00", variant: "Chilled Refreshing Smooth", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/refreshing-iced-coffee-in-tall-glass-wit-1772803882210-09bb8d30.png", imageAlt: "Refreshing Iced Coffee", isFavorited: false
}
]}
title="Our Coffee & Food Menu"
description="Handcrafted beverages and fresh pastries made with premium ingredients"
tag="Premium Selection"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
animationType="slide-up"
useInvertedBackground={false}
ariaLabel="Coffee and Food Menu"
containerClassName="max-w-6xl mx-auto"
cardClassName="rounded-2xl overflow-hidden"
/>
</div>
<div
id="pricing"
data-section="pricing"
className="bg-background py-16 md:py-24"
>
<div className="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
<PricingCardThree
plans={pricingPlans}
title="Simple, Transparent Pricing"
description="Choose the perfect plan for your café automation needs"
tag="Affordable Plans"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
ariaLabel="Pricing Plans Section"
containerClassName="max-w-7xl mx-auto"
/>
</div>
<div id="pricing" data-section="pricing" className="py-16 md:py-24 px-4 sm:px-6 lg:px-8">
<PricingCardThree
plans={[
{
id: "starter", price: "$299/mo", name: "Starter Plan", buttons: [
{ text: "Get Started", href: "/#contact" },
{ text: "Learn More", href: "/#faq" }
],
features: [
"Digital menu with up to 50 items", "Basic order management", "Email notifications", "Single staff account", "Standard support"
]
},
{
id: "professional", badge: "Most Popular", badgeIcon: Sparkles,
price: "$699/mo", name: "Professional Plan", buttons: [
{ text: "Get Started", href: "/#contact" },
{ text: "Chat to Sales", href: "/#contact" }
],
features: [
"Unlimited menu items & categories", "WhatsApp integration", "AI chatbot support", "Up to 10 staff accounts", "Real-time analytics & reporting", "Priority customer support"
]
},
{
id: "enterprise", price: "Custom", name: "Enterprise Plan", buttons: [
{ text: "Contact Sales", href: "/#contact" },
{ text: "Schedule Demo", href: "/#contact" }
],
features: [
"Everything in Professional +", "Multi-location support", "Advanced admin dashboard", "Custom integrations", "Dedicated account manager", "24/7 premium support"
]
}
]}
title="Simple, Transparent Pricing"
description="Choose the perfect plan for your café automation needs"
tag="Affordable Plans"
textboxLayout="default"
animationType="slide-up"
useInvertedBackground={false}
ariaLabel="Pricing Plans Section"
containerClassName="max-w-7xl mx-auto"
/>
</div>
<div id="team" data-section="team" className="bg-card py-16 md:py-24">
<div className="px-4 sm:px-6 lg:px-8 max-w-6xl mx-auto">
<TeamCardSix
members={teamMembers}
title="Meet Our Team"
description="Passionate professionals dedicated to automating café operations"
tag="Our People"
tagIcon={Users}
gridVariant="uniform-all-items-equal"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="Team Members Section"
containerClassName="max-w-6xl mx-auto"
uniformGridCustomHeightClasses="min-h-80 2xl:min-h-96"
/>
</div>
<div id="team" data-section="team" className="py-16 md:py-24 px-4 sm:px-6 lg:px-8">
<TeamCardSix
members={[
{
id: "1", name: "Ahmed Hassan", role: "Founder & CEO", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/professional-headshot-portrait-of-a-conf-1772803884097-70cf7ad7.png", imageAlt: "Ahmed Hassan, Founder & CEO"
},
{
id: "2", name: "Sofia Rodriguez", role: "CTO & Tech Lead", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/professional-portrait-of-a-tech-entrepre-1772803883714-fa3a736c.png", imageAlt: "Sofia Rodriguez, CTO & Tech Lead"
},
{
id: "3", name: "James Chen", role: "Operations Manager", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/professional-portrait-of-operations-or-c-1772803883453-de80235e.png", imageAlt: "James Chen, Operations Manager"
},
{
id: "4", name: "Maria Santos", role: "Customer Success", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/friendly-professional-portrait-of-custom-1772803883914-241acdac.png", imageAlt: "Maria Santos, Customer Success Manager"
}
]}
title="Meet Our Team"
description="Passionate professionals dedicated to automating café operations"
tag="Our People"
gridVariant="uniform-all-items-equal"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="Team Members Section"
containerClassName="max-w-6xl mx-auto"
uniformGridCustomHeightClasses="min-h-80 2xl:min-h-96"
/>
</div>
<div
id="testimonials"
data-section="testimonials"
className="bg-background py-16 md:py-24"
>
<div className="px-4 sm:px-6 lg:px-8 max-w-6xl mx-auto">
<TestimonialCardSixteen
testimonials={testimonials}
kpiItems={kpiItems}
animationType="slide-up"
title="What Café Owners Say"
description="Real feedback from businesses using Café DH automation platform"
tag="Client Success"
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="Client Testimonials Section"
containerClassName="max-w-6xl mx-auto"
/>
</div>
<div id="testimonials" data-section="testimonials" className="py-16 md:py-24 px-4 sm:px-6 lg:px-8">
<TestimonialCardSixteen
testimonials={[
{
id: "1", name: "Ahmed Ali", role: "Café Owner", company: "Prime Coffee House", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/portrait-photo-of-satisfied-caf-business-1772803883403-d519197a.png", imageAlt: "Ahmed Ali, Café Owner"
},
{
id: "2", name: "Fatima Mansour", role: "Business Manager", company: "Brew & Blend Café", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/professional-portrait-of-female-caf-entr-1772803883756-ec1629f9.png", imageAlt: "Fatima Mansour, Business Manager"
},
{
id: "3", name: "Omar Khalid", role: "Operations Director", company: "Urban Coffee Collective", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/professional-portrait-of-caf-manager-or--1772803882833-df459eeb.png", imageAlt: "Omar Khalid, Operations Director"
},
{
id: "4", name: "Noor Ibrahim", role: "Café Manager", company: "The Daily Grind", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AZciLQxY0sGGtMgBwMTFNxfRVi/professional-portrait-of-younger-team-me-1772803884851-cca8f182.png", imageAlt: "Noor Ibrahim, Café Manager"
}
]}
kpiItems={[
{ value: "200+", label: "Active Café Partners" },
{ value: "98%", label: "Customer Satisfaction" },
{ value: "15+", label: "Countries Served" }
]}
title="What Café Owners Say"
description="Real feedback from businesses using Café DH automation platform"
tag="Client Success"
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
ariaLabel="Client Testimonials Section"
containerClassName="max-w-6xl mx-auto"
/>
</div>
<div id="faq" data-section="faq" className="bg-card py-16 md:py-24">
<div className="px-4 sm:px-6 lg:px-8 max-w-6xl mx-auto">
<FaqSplitText
faqs={faqs}
sideTitle="Frequently Asked Questions"
textPosition="left"
useInvertedBackground={false}
animationType="smooth"
ariaLabel="FAQ Section"
containerClassName="max-w-6xl mx-auto"
sideTitleClassName="text-4xl font-light"
/>
</div>
<div id="faq" data-section="faq" className="py-16 md:py-24 px-4 sm:px-6 lg:px-8">
<FaqSplitText
faqs={[
{
id: "1", title: "How do I integrate WhatsApp with my café?", content: "WhatsApp integration is automatic with Professional and Enterprise plans. We handle the setup during onboarding. Customers can reach you directly through WhatsApp for orders and support."
},
{
id: "2", title: "Can the AI chatbot handle complex orders?", content: "Yes! Our AI chatbot can process multi-item orders, customize drinks, manage reservations, and answer policy questions. It learns from your café's specific offerings and customer preferences."
},
{
id: "3", title: "What payment methods are supported?", content: "We support all major payment methods including credit cards, debit cards, mobile wallets, and bank transfers. Payment processing is secure and PCI-compliant."
},
{
id: "4", title: "Is there a setup fee?", content: "No setup fees! You only pay the monthly subscription. Our team provides free onboarding and training for all new café partners."
},
{
id: "5", title: "Can I manage multiple café locations?", content: "Yes, with our Enterprise plan! Manage unlimited café locations from a single dashboard, with location-specific analytics and staff management."
},
{
id: "6", title: "What kind of support do you offer?", content: "We provide email support for Starter plans, priority support for Professional plans, and 24/7 dedicated support for Enterprise clients. All plans include access to our knowledge base and video tutorials."
}
]}
sideTitle="Frequently Asked Questions"
textPosition="left"
useInvertedBackground={false}
faqsAnimation="blur-reveal"
animationType="smooth"
ariaLabel="FAQ Section"
containerClassName="max-w-6xl mx-auto"
sideTitleClassName="text-4xl font-light"
/>
</div>
<div
id="social-proof"
data-section="social-proof"
className="bg-card py-12 md:py-16"
>
<div className="px-4 sm:px-6 lg:px-8 max-w-6xl mx-auto">
<SocialProofOne
title="Trusted by Industry Leaders"
description="Café DH powers operations for businesses of all sizes"
tag="Partners"
textboxLayout="default"
useInvertedBackground={false}
names={socialProofNames}
speed={40}
showCard={true}
ariaLabel="Social Proof Partners Section"
containerClassName="max-w-6xl mx-auto"
/>
</div>
<div id="contact" data-section="contact" className="py-16 md:py-24 px-4 sm:px-6 lg:px-8">
<ContactFaq
ctaTitle="Ready to Transform Your Café?"
ctaDescription="Join hundreds of cafés already using our automation platform. Schedule a demo with our team today."
ctaButton={{ text: "Schedule Free Demo", href: "https://calendly.com/cafedh" }}
ctaIcon={Calendar}
useInvertedBackground={false}
animationType="slide-up"
faqs={[
{
id: "1", title: "How long does implementation take?", content: "Most cafés are fully operational within 48 hours. Our onboarding team handles all setup, data migration, and staff training."
},
{
id: "2", title: "Do you offer a free trial?", content: "Yes! We offer a 14-day free trial on all plans. No credit card required. Full access to all features during the trial period."
},
{
id: "3", title: "Can I cancel anytime?", content: "Absolutely. No long-term contracts. Cancel anytime with 30 days notice. Your data is yours and can be exported at any time."
}
]}
ariaLabel="Contact and Support Section"
containerClassName="max-w-6xl mx-auto"
/>
</div>
<div id="footer" data-section="footer" className="bg-foreground text-background">
<div className="px-4 sm:px-6 lg:px-8 py-12 max-w-7xl mx-auto">
<FooterSimple
columns={footerColumns}
bottomLeftText="© 2025 Café DH. All rights reserved."
bottomRightText="Made with ☕ by Café DH Automation"
ariaLabel="Site Footer"
containerClassName="max-w-7xl mx-auto"
columnsClassName="grid grid-cols-2 md:grid-cols-4 gap-8"
/>
</div>
<div id="social-proof" data-section="social-proof" className="py-16 md:py-24 px-4 sm:px-6 lg:px-8">
<SocialProofOne
title="Trusted by Industry Leaders"
description="Café DH powers operations for businesses of all sizes"
tag="Partners"
textboxLayout="default"
useInvertedBackground={false}
names={[
"Starbucks Partners", "Nestlé Professional", "Square Sellers", "Shopify Merchants", "WhatsApp Business", "Google Workspace", "Premium Café Chain"
]}
speed={40}
showCard={true}
ariaLabel="Social Proof Partners Section"
containerClassName="max-w-6xl mx-auto"
/>
</div>
<div id="footer" data-section="footer" className="bg-foreground text-background px-4 sm:px-6 lg:px-8 py-12">
<FooterSimple
columns={[
{
title: "Product", items: [
{ label: "Features", href: "#features" },
{ label: "Pricing", href: "#pricing" },
{ label: "Menu Management", href: "#" },
{ label: "Analytics", href: "#" }
]
},
{
title: "Company", items: [
{ label: "About", href: "/about" },
{ label: "Team", href: "#team" },
{ label: "Blog", href: "#" },
{ label: "Careers", href: "#" }
]
},
{
title: "Support", items: [
{ label: "Documentation", href: "#" },
{ label: "Contact", href: "/contact" },
{ label: "FAQ", href: "#faq" },
{ label: "Status", href: "#" }
]
},
{
title: "Legal", items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Cookie Policy", href: "#" },
{ label: "Compliance", href: "#" }
]
}
]}
bottomLeftText="© 2025 Café DH. All rights reserved."
bottomRightText="Made with ☕ by Café DH Automation"
ariaLabel="Site Footer"
containerClassName="max-w-7xl mx-auto"
columnsClassName="grid grid-cols-2 md:grid-cols-4 gap-8"
/>
</div>
</ThemeProvider>
);