bender/3c9dcc85-606c-482a-8f75-bb88496e5432
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_3 into main #5

Merged
bender merged 6 commits from version_3 into main 2026-04-15 16:52:48 +00:00
Conversation 0 Commits 6 Files Changed 6 +211 -457
6 changed files with 211 additions and 457 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/app/about/page.tsx
View File

@@ -2,81 +2,43 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import SplitAbout from '@/components/sections/about/SplitAbout';
import { User, Users, UserCheck, UserCog } from "lucide-react";
export default function AboutPage() {
return (
<ThemeProvider
defaultButtonVariant="text-stagger"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="smallMedium"
sizing="mediumLargeSizeMediumTitles"
background="grid"
cardStyle="glass-elevated"
primaryButtonStyle="shadow"
secondaryButtonStyle="solid"
headingFontWeight="bold"
>
<ThemeProvider borderRadius="rounded" contentWidth="smallMedium" sizing="mediumLargeSizeMediumTitles">
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "/" },
{ name: "Menu", id: "/menu" },
{ name: "About", id: "/about" },
{ name: "Gallery", id: "/gallery" },
{ name: "Contact", id: "/contact" },
{ name: "Order Online", id: "/order" },
]}
brandName="Lolly’s Food Joint"
/>
</div>
<div id="about" data-section="about">
<SplitAbout
textboxLayout="default"
useInvertedBackground={false}
title="Our Origins"
description="Founded by food lovers."
imageSrc="http://img.b2bpic.net/free-photo/rustic-chandelier-made-bulbs-ropes-dining-table-vintage-kitchen_181624-9173.jpg"
mediaAnimation="slide-up"
bulletPoints={[
{ title: "Heritage", description: "Traditional recipes." },
{ title: "Innovation", description: "Modern twists." },
]}
/>
</div>
<div id="feature" data-section="feature">
<FeatureCardTwentySix
textboxLayout="default"
useInvertedBackground={false}
title="Our Team"
description="The people behind the flavor."
features={[
{ title: "Expert Chefs", description: "Culinary mastery.", buttonIcon: User, imageSrc: "http://img.b2bpic.net/free-photo/delicious-realistic-burger_23-2150902326.jpg?_wi=2", imageAlt: "Delicious realistic burger" },
{ title: "Fast Servers", description: "Friendly service.", buttonIcon: Users, imageSrc: "http://img.b2bpic.net/free-photo/hamburger-chips_23-2147695734.jpg?_wi=4", imageAlt: "Delicious realistic burger" },
{ title: "Quality Staff", description: "Training daily.", buttonIcon: UserCheck, imageSrc: "http://img.b2bpic.net/free-photo/young-woman-eating-burger-street-cafe-close-up_169016-43231.jpg?_wi=4", imageAlt: "Delicious realistic burger" },
{ title: "Manager", description: "Service excellence.", buttonIcon: UserCog, imageSrc: "http://img.b2bpic.net/free-photo/attractive-young-woman-hands-holds-two-burgers-blurred-background_169016-43235.jpg?_wi=4", imageAlt: "Delicious realistic burger" },
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{ title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Menu", href: "/menu" }] },
{ title: "Order", items: [{ label: "Order Online", href: "/order" }, { label: "Contact Us", href: "/contact" }] },
]}
bottomLeftText="© 2024 Lolly's Food Joint"
bottomRightText="All rights reserved."
/>
</div>
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "/" },
{ name: "About", id: "/about" },
{ name: "Gallery", id: "/gallery" },
{ name: "Contact", id: "/contact" },
]}
brandName="Lolly’s Food Joint"
/>
<SplitAbout
title="About Lolly’s"
description="We started with a simple dream: to serve the best street food in town. Every ingredient we use is carefully selected to ensure you have an unforgettable dining experience."
bulletPoints={[
{ title: "Fresh Ingredients", description: "Locally sourced daily." },
{ title: "Handcrafted", description: "Made with care by chefs." },
{ title: "Quality", description: "High standards every time." },
]}
imageSrc="http://img.b2bpic.net/free-photo/man-preparing-salad-with-fresh-vegetables-wooden-table-cooking-tasty-healthy-food-black-background-vegetarian-food-healthy-cooking-concept_639032-421.jpg"
textboxLayout="split"
useInvertedBackground={false}
/>
<FooterSimple
columns={[
{ title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Gallery", href: "/gallery" }] },
{ title: "Order", items: [{ label: "Contact Us", href: "/contact" }] },
]}
bottomLeftText="© 2024 Lolly's Food Joint"
bottomRightText="All rights reserved."
/>
</ReactLenis>
</ThemeProvider>
);

94
src/app/contact/page.tsx
View File

@@ -2,78 +2,38 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import { MapPin } from "lucide-react";
import FooterSimple from '@/components/sections/footer/FooterSimple';
import ContactSplit from '@/components/sections/contact/ContactSplit';
export default function ContactPage() {
return (
<ThemeProvider
defaultButtonVariant="text-stagger"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="smallMedium"
sizing="mediumLargeSizeMediumTitles"
background="grid"
cardStyle="glass-elevated"
primaryButtonStyle="shadow"
secondaryButtonStyle="solid"
headingFontWeight="bold"
>
<ThemeProvider borderRadius="rounded" contentWidth="smallMedium" sizing="mediumLargeSizeMediumTitles">
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "/" },
{ name: "Menu", id: "/menu" },
{ name: "About", id: "/about" },
{ name: "Gallery", id: "/gallery" },
{ name: "Contact", id: "/contact" },
{ name: "Order Online", id: "/order" },
]}
brandName="Lolly’s Food Joint"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
useInvertedBackground={false}
background={{ variant: "plain" }}
tag="Get in touch"
title="Contact Us"
description="Send us a message."
imageSrc="http://img.b2bpic.net/free-photo/blur-coffee-shop_1203-8643.jpg"
mediaAnimation="slide-up"
/>
</div>
<div id="feature" data-section="feature">
<FeatureCardTwentySix
textboxLayout="default"
useInvertedBackground={false}
title="Locations"
description="Where to find us."
features={[
{ title: "Main Street", description: "123 Main St.", buttonIcon: MapPin, imageSrc: "http://img.b2bpic.net/free-photo/delicious-realistic-burger_23-2150902326.jpg?_wi=3", imageAlt: "Delicious realistic burger" },
{ title: "Park Ave", description: "456 Park Ave.", buttonIcon: MapPin, imageSrc: "http://img.b2bpic.net/free-photo/hamburger-chips_23-2147695734.jpg?_wi=5", imageAlt: "Delicious realistic burger" },
{ title: "City Mall", description: "789 City Mall.", buttonIcon: MapPin, imageSrc: "http://img.b2bpic.net/free-photo/young-woman-eating-burger-street-cafe-close-up_169016-43231.jpg?_wi=5", imageAlt: "Delicious realistic burger" },
{ title: "East Side", description: "321 East St.", buttonIcon: MapPin, imageSrc: "http://img.b2bpic.net/free-photo/attractive-young-woman-hands-holds-two-burgers-blurred-background_169016-43235.jpg?_wi=5", imageAlt: "Delicious realistic burger" },
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{ title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Menu", href: "/menu" }] },
{ title: "Order", items: [{ label: "Order Online", href: "/order" }, { label: "Contact Us", href: "/contact" }] },
]}
bottomLeftText="© 2024 Lolly's Food Joint"
bottomRightText="All rights reserved."
/>
</div>
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "/" },
{ name: "About", id: "/about" },
{ name: "Gallery", id: "/gallery" },
{ name: "Contact", id: "/contact" },
]}
brandName="Lolly’s Food Joint"
/>
<ContactSplit
title="Contact Us"
description="Have questions or want to host an event? Get in touch with us today!"
background={{ variant: "sparkles-gradient" }}
useInvertedBackground={false}
imageSrc="http://img.b2bpic.net/free-photo/cinematic-film-location-decor_23-2151919025.jpg"
/>
<FooterSimple
columns={[
{ title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Gallery", href: "/gallery" }] },
{ title: "Order", items: [{ label: "Contact Us", href: "/contact" }] },
]}
bottomLeftText="© 2024 Lolly's Food Joint"
bottomRightText="All rights reserved."
/>
</ReactLenis>
</ThemeProvider>
);

166
src/app/gallery/page.tsx
View File

@@ -2,144 +2,44 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FooterSimple from '@/components/sections/footer/FooterSimple';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import SplitAbout from '@/components/sections/about/SplitAbout';
export default function LandingPage() {
export default function GalleryPage() {
return (
<ThemeProvider
defaultButtonVariant="text-stagger"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="smallMedium"
sizing="mediumLargeSizeMediumTitles"
background="grid"
cardStyle="glass-elevated"
primaryButtonStyle="shadow"
secondaryButtonStyle="solid"
headingFontWeight="bold"
>
<ThemeProvider borderRadius="rounded" contentWidth="smallMedium" sizing="mediumLargeSizeMediumTitles">
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{
name: "Home",
id: "/",
},
{
name: "Menu",
id: "/menu",
},
{
name: "About",
id: "/about",
},
{
name: "Gallery",
id: "/gallery",
},
{
name: "Contact",
id: "/contact",
},
{
name: "Order Online",
id: "/order",
},
]}
brandName="Lolly’s Food Joint"
/>
</div>
<div id="product" data-section="product">
<ProductCardTwo
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
title="Food Gallery"
description="Take a look inside."
products={[
{
id: "g1",
brand: "Gallery",
name: "Kitchen Vibes",
price: "$0",
rating: 5,
reviewCount: "0",
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-cooking-pizza_23-2150405878.jpg",
},
{
id: "g2",
brand: "Gallery",
name: "Dining Room",
price: "$0",
rating: 5,
reviewCount: "0",
imageSrc: "http://img.b2bpic.net/free-photo/woman-arranging-dishware-table-restaurant_23-2147936226.jpg",
},
]}
/>
</div>
<div id="about" data-section="about">
<SplitAbout
textboxLayout="default"
useInvertedBackground={false}
title="Freshness Captured"
description="See the process."
imageSrc="http://img.b2bpic.net/free-photo/man-s-hands-cutting-ripe-pepper-into-slices-table-husband-kitchen-preparing-salad-black-background_639032-415.jpg"
mediaAnimation="slide-up"
bulletPoints={[
{
title: "Local Produce",
description: "Farm to plate.",
},
{
title: "Fresh Daily",
description: "Never frozen.",
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Company",
items: [
{
label: "About Us",
href: "/about",
},
{
label: "Menu",
href: "/menu",
},
],
},
{
title: "Order",
items: [
{
label: "Order Online",
href: "/order",
},
{
label: "Contact Us",
href: "/contact",
},
],
},
]}
bottomLeftText="© 2024 Lolly's Food Joint"
bottomRightText="All rights reserved."
/>
</div>
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "/" },
{ name: "About", id: "/about" },
{ name: "Gallery", id: "/gallery" },
{ name: "Contact", id: "/contact" },
]}
brandName="Lolly’s Food Joint"
/>
<ProductCardTwo
title="Our Gallery"
description="A collection of our favorite dishes and moments at the restaurant."
gridVariant="four-items-2x2-equal-grid"
animationType="slide-up"
textboxLayout="default"
products={[
{ id: "g1", brand: "Food", name: "Signature Burger", price: "", rating: 5, reviewCount: "", imageSrc: "http://img.b2bpic.net/free-photo/home-made-tasty-burgers_628469-332.jpg" },
{ id: "g2", brand: "Drinks", name: "Fresh Shakes", price: "", rating: 5, reviewCount: "", imageSrc: "http://img.b2bpic.net/free-photo/cacao-milkshake-topped-with-colourful-sprinkles-ice-cream-oreo_140725-8264.jpg" },
{ id: "g3", brand: "Food", name: "Fresh Wraps", price: "", rating: 5, reviewCount: "", imageSrc: "http://img.b2bpic.net/free-photo/fast-fashion-concept-with-materials-textiles-disguised-as-sushi-rolls_23-2150771195.jpg" },
{ id: "g4", brand: "Food", name: "Side Bites", price: "", rating: 5, reviewCount: "", imageSrc: "http://img.b2bpic.net/free-photo/delicious-creamy-melted-cheese_23-2149332823.jpg" },
]}
/>
<FooterSimple
columns={[
{ title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Gallery", href: "/gallery" }] },
{ title: "Order", items: [{ label: "Contact Us", href: "/contact" }] },
]}
bottomLeftText="© 2024 Lolly's Food Joint"
bottomRightText="All rights reserved."
/>
</ReactLenis>
</ThemeProvider>
);

132
src/app/menu/page.tsx
View File

@@ -2,82 +2,78 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import { Sprout, WheatOff, ChefHat, Scale } from "lucide-react";
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { useState } from "react";
const categories = [
{ id: "burgers", name: "Burgers" },
{ id: "street-food", name: "Street Food" },
{ id: "wraps", name: "Wraps" },
{ id: "fries", name: "Fries & Sides" },
{ id: "drinks", name: "Drinks" },
{ id: "milkshakes", name: "Milkshakes" },
];
export default function MenuPage() {
const [activeCategory, setActiveCategory] = useState("burgers");
return (
<ThemeProvider
defaultButtonVariant="text-stagger"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="smallMedium"
sizing="mediumLargeSizeMediumTitles"
background="grid"
cardStyle="glass-elevated"
primaryButtonStyle="shadow"
secondaryButtonStyle="solid"
headingFontWeight="bold"
>
<ThemeProvider>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "/" },
{ name: "Menu", id: "/menu" },
{ name: "About", id: "/about" },
{ name: "Gallery", id: "/gallery" },
{ name: "Contact", id: "/contact" },
{ name: "Order Online", id: "/order" },
]}
brandName="Lolly’s Food Joint"
/>
</div>
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "/" },
{ name: "Menu", id: "/menu" },
{ name: "About", id: "/about" },
{ name: "Gallery", id: "/gallery" },
{ name: "Contact", id: "/contact" },
{ name: "Order Online", id: "/order" },
]}
brandName="Lolly’s Food Joint"
/>
<div id="product" data-section="product">
<ProductCardTwo
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
title="Full Menu"
description="See our complete list of offerings."
products={[
{ id: "m1", brand: "Burger", name: "BBQ Burger", price: "$13.99", rating: 5, reviewCount: "50", imageSrc: "http://img.b2bpic.net/free-photo/side-view-cheeseburger-grilled-beef-patty-with-cheese-lettuce-burger-buns_141793-4806.jpg" },
{ id: "m2", brand: "Sides", name: "Onion Rings", price: "$4.99", rating: 4, reviewCount: "30", imageSrc: "http://img.b2bpic.net/free-photo/fried-meat-with-potatoes-served-with-onions-tomatoes-greens_141793-1068.jpg" },
]}
/>
</div>
<main className="pt-32 pb-20 px-6 max-w-4xl mx-auto">
<h1 className="text-4xl md:text-5xl font-bold mb-10 text-center">Our Menu</h1>
<div className="flex flex-wrap gap-2 justify-center mb-12">
{categories.map((cat) => (
<button
key={cat.id}
onClick={() => setActiveCategory(cat.id)}
className={`px-6 py-2 rounded-full transition ${activeCategory === cat.id ? "bg-primary text-white" : "bg-card hover:bg-muted"}`}
>
{cat.name}
</button>
))}
</div>
<div id="feature" data-section="feature">
<FeatureCardTwentySix
textboxLayout="default"
useInvertedBackground={false}
title="Dietary Options"
description="We cater to all tastes."
features={[
{ title: "Vegan", description: "Plant-based goodness.", buttonIcon: Sprout, imageSrc: "http://img.b2bpic.net/free-photo/delicious-realistic-burger_23-2150902326.jpg?_wi=1", imageAlt: "Delicious realistic burger" },
{ title: "Gluten Free", description: "Delicious choices.", buttonIcon: WheatOff, imageSrc: "http://img.b2bpic.net/free-photo/hamburger-chips_23-2147695734.jpg?_wi=3", imageAlt: "Delicious realistic burger" },
{ title: "Halal", description: "Authentic quality.", buttonIcon: ChefHat, imageSrc: "http://img.b2bpic.net/free-photo/young-woman-eating-burger-street-cafe-close-up_169016-43231.jpg?_wi=3", imageAlt: "Delicious realistic burger" },
{ title: "Low Calorie", description: "Healthy alternatives.", buttonIcon: Scale, imageSrc: "http://img.b2bpic.net/free-photo/attractive-young-woman-hands-holds-two-burgers-blurred-background_169016-43235.jpg?_wi=3", imageAlt: "Delicious realistic burger" },
]}
/>
</div>
<div className="grid gap-6 md:grid-cols-2">
{[1, 2, 3, 4, 5, 6].map((item) => (
<div key={item} className="p-6 rounded-xl border border-border bg-card shadow-sm">
<h3 className="text-xl font-bold">Signature Item {item}</h3>
<p className="text-muted-foreground mt-2">Delicious description of our amazing {categories.find(c => c.id === activeCategory)?.name || "dish"}.</p>
<p className="font-bold mt-4">$9.99</p>
</div>
))}
</div>
</main>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{ title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Menu", href: "/menu" }] },
{ title: "Order", items: [{ label: "Order Online", href: "/order" }, { label: "Contact Us", href: "/contact" }] },
]}
bottomLeftText="© 2024 Lolly's Food Joint"
bottomRightText="All rights reserved."
/>
</div>
<FooterSimple
columns={[
{ title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Menu", href: "/menu" }] },
{ title: "Order", items: [{ label: "Order Online", href: "/order" }, { label: "Contact Us", href: "/contact" }] },
]}
bottomLeftText="© 2024 Lolly's Food Joint"
bottomRightText="All rights reserved."
/>
<div className="fixed bottom-6 left-0 right-0 px-6 flex justify-center z-50 md:hidden">
<a href="/order" className="bg-primary text-white px-8 py-4 rounded-full font-bold shadow-xl w-full max-w-sm text-center">
Order Now
</a>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}

164
src/app/order/page.tsx
View File

@@ -2,12 +2,12 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import { ShoppingCart } from "lucide-react";
export default function LandingPage() {
export default function OrderPage() {
return (
<ThemeProvider
defaultButtonVariant="text-stagger"
@@ -22,118 +22,54 @@ export default function LandingPage() {
headingFontWeight="bold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{
name: "Home",
id: "/",
},
{
name: "Menu",
id: "/menu",
},
{
name: "About",
id: "/about",
},
{
name: "Gallery",
id: "/gallery",
},
{
name: "Contact",
id: "/contact",
},
{
name: "Order Online",
id: "/order",
},
]}
brandName="Lolly’s Food Joint"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleFullscreen
navItems={[
{ name: "Home", id: "/" },
{ name: "Menu", id: "/menu" },
{ name: "About", id: "/about" },
{ name: "Gallery", id: "/gallery" },
{ name: "Contact", id: "/contact" },
{ name: "Order Online", id: "/order" },
]}
brandName="Lolly’s Food Joint"
/>
</div>
<div id="product" data-section="product">
<ProductCardTwo
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
title="Order Now"
description="Select your favourites."
products={[
{
id: "o1",
brand: "Burger",
name: "Spicy Chicken Burger",
price: "$11.99",
rating: 5,
reviewCount: "60",
imageSrc: "http://img.b2bpic.net/free-photo/side-view-beef-fitburger-black-bun-with-vegetable-salad_141793-4767.jpg",
},
{
id: "o2",
brand: "Drinks",
name: "Chocolate Shake",
price: "$5.99",
rating: 5,
reviewCount: "40",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-milkshake-wooden-table_23-2148296035.jpg",
},
]}
/>
</div>
<div id="order-section" data-section="order-section">
<ProductCardThree
gridVariant="four-items-2x2-equal-grid"
animationType="slide-up"
title="Order Online"
description="Select your favourites and order directly via WhatsApp."
products={[
{ id: "p1", name: "Lolly's Classic Burger", price: "$12.99", imageSrc: "http://img.b2bpic.net/free-photo/home-made-tasty-burgers_628469-332.jpg", priceButtonProps: { onClick: () => window.open('https://wa.me/1234567890?text=I%20would%20like%20to%20order%20the%20Lolly%27s%20Classic%20Burger') } },
{ id: "p2", name: "Crispy Fries & Sauce", price: "$5.99", imageSrc: "http://img.b2bpic.net/free-photo/delicious-creamy-melted-cheese_23-2149332823.jpg", priceButtonProps: { onClick: () => window.open('https://wa.me/1234567890?text=I%20would%20like%20to%20order%20the%20Crispy%20Fries%20%26%20Sauce') } },
{ id: "p3", name: "Signature Spicy Wrap", price: "$9.49", imageSrc: "http://img.b2bpic.net/free-photo/fast-fashion-concept-with-materials-textiles-disguised-as-sushi-rolls_23-2150771195.jpg", priceButtonProps: { onClick: () => window.open('https://wa.me/1234567890?text=I%20would%20like%20to%20order%20the%20Signature%20Spicy%20Wrap') } },
{ id: "p4", name: "Creamy Milkshake", price: "$6.99", imageSrc: "http://img.b2bpic.net/free-photo/cacao-milkshake-topped-with-colourful-sprinkles-ice-cream-oreo_140725-8264.jpg", priceButtonProps: { onClick: () => window.open('https://wa.me/1234567890?text=I%20would%20like%20to%20order%20the%20Creamy%20Milkshake') } },
]}
textboxLayout="default"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
useInvertedBackground={false}
background={{
variant: "plain",
}}
tag="Order Support"
title="Need Help Ordering?"
description="We are here to assist."
imageSrc="http://img.b2bpic.net/free-photo/bar-cafeteria-family-restaurant-interior-shooting_114579-1119.jpg"
mediaAnimation="slide-up"
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{
title: "Company",
items: [
{
label: "About Us",
href: "/about",
},
{
label: "Menu",
href: "/menu",
},
],
},
{
title: "Order",
items: [
{
label: "Order Online",
href: "/order",
},
{
label: "Contact Us",
href: "/contact",
},
],
},
]}
bottomLeftText="© 2024 Lolly's Food Joint"
bottomRightText="All rights reserved."
/>
</div>
<div id="footer" data-section="footer">
<FooterSimple
columns={[
{ title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Menu", href: "/menu" }] },
{ title: "Order", items: [{ label: "Order Online", href: "/order" }, { label: "Contact Us", href: "/contact" }] },
]}
bottomLeftText="© 2024 Lolly's Food Joint"
bottomRightText="All rights reserved."
/>
</div>
<div className="fixed bottom-6 right-6 z-50">
<button onClick={() => window.open('https://wa.me/1234567890')} className="flex items-center gap-2 bg-primary text-white px-6 py-3 rounded-full shadow-lg hover:scale-105 transition-transform">
<ShoppingCart size={20} />
Order Now on WhatsApp
</button>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}

12
src/app/styles/variables.css
View File

@@ -10,15 +10,15 @@
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #FFF6E9;
--background: #FFF8E1;
--card: #FFFFFF;
--foreground: #1C1C1C;
--primary-cta: #C62828;
--foreground: #1A1A1A;
--primary-cta: #B71C1C;
--primary-cta-text: #FFFFFF;
--secondary-cta: #F5A623;
--secondary-cta: #FFD700;
--secondary-cta-text: #1C1C1C;
--accent: #C62828;
--background-accent: #FFF6E9;
--accent: #B71C1C;
--background-accent: #FFF8E1;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);