Merge version_2 into main #2
105
src/app/admin/page.tsx
Normal file
105
src/app/admin/page.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
|
||||
export default function AdminDashboardPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="large"
|
||||
background="circleGradient"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home", id: "/"
|
||||
},
|
||||
{
|
||||
name: "About", id: "#about"
|
||||
},
|
||||
{
|
||||
name: "Services", id: "#services"
|
||||
},
|
||||
{
|
||||
name: "Products", id: "#products"
|
||||
},
|
||||
{
|
||||
name: "Pricing", id: "#pricing"
|
||||
},
|
||||
{
|
||||
name: "FAQ", id: "#faq"
|
||||
},
|
||||
{
|
||||
name: "Contact", id: "#contact"
|
||||
},
|
||||
{
|
||||
name: "Admin Dashboard", id: "/admin"
|
||||
}
|
||||
]}
|
||||
button={{
|
||||
text: "Get in Touch", href: "#contact"
|
||||
}}
|
||||
logoSrc="http://img.b2bpic.net/free-vector/letter-b-luxury-brand-logo_1035-8689.jpg"
|
||||
brandName="16 Av. de Blossac"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<main className="container mx-auto p-8 pt-24 min-h-screen">
|
||||
<h1 className="text-4xl font-bold mb-8">Admin Dashboard</h1>
|
||||
<p className="text-lg mb-12">Manage your restaurant operations, view analytics, update menus, and configure system settings.</p>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-3xl font-semibold mb-4">Restaurant Management</h2>
|
||||
<p className="text-md">Overview of daily operations, table management, staff scheduling, and order fulfillment tracking.</p>
|
||||
<ul className="list-disc list-inside mt-2 text-md">
|
||||
<li>Manage reservations</li>
|
||||
<li>Track current orders</li>
|
||||
<li>Assign staff roles</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-3xl font-semibold mb-4">Analytics & Reporting</h2>
|
||||
<p className="text-md">Access key performance indicators, sales reports, customer insights, and operational efficiency metrics.</p>
|
||||
<ul className="list-disc list-inside mt-2 text-md">
|
||||
<li>View sales trends</li>
|
||||
<li>Analyze customer feedback</li>
|
||||
<li>Monitor inventory levels</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-3xl font-semibold mb-4">Menu Management</h2>
|
||||
<p className="text-md">Effortlessly update your food and drink menus, add new items, modify prices, and manage categories.</p>
|
||||
<ul className="list-disc list-inside mt-2 text-md">
|
||||
<li>Add/edit menu items</li>
|
||||
<li>Update pricing</li>
|
||||
<li>Organize categories</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-3xl font-semibold mb-4">System Configuration</h2>
|
||||
<p className="text-md">Configure application settings, user permissions, payment integrations, and notification preferences.</p>
|
||||
<ul className="list-disc list-inside mt-2 text-md">
|
||||
<li>Manage user accounts</li>
|
||||
<li>Set payment gateways</li>
|
||||
<li>Customize notifications</li>
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
77
src/app/customer-display/page.tsx
Normal file
77
src/app/customer-display/page.tsx
Normal file
@@ -0,0 +1,77 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import { CreditCard, History } from "lucide-react";
|
||||
|
||||
export default function CustomerDisplayPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="large"
|
||||
background="circleGradient"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "#hero" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Services", id: "#services" },
|
||||
{ name: "Products", id: "#products" },
|
||||
{ name: "Pricing", id: "#pricing" },
|
||||
{ name: "FAQ", id: "#faq" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
{ name: "Customer Display", id: "/customer-display" },
|
||||
{ name: "Payment Processing", id: "/payment-processing" }
|
||||
]}
|
||||
button={{ text: "Get in Touch", href: "#contact" }}
|
||||
logoSrc="http://img.b2bpic.net/free-vector/letter-b-luxury-brand-logo_1035-8689.jpg"
|
||||
brandName="16 Av. de Blossac"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<main className="min-h-screen py-16 flex items-center justify-center bg-gray-50 dark:bg-gray-900">
|
||||
<div className="max-w-4xl w-full p-8 space-y-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
|
||||
<h1 className="text-3xl font-bold text-center text-gray-900 dark:text-white">Customer Display</h1>
|
||||
<p className="text-center text-gray-600 dark:text-gray-300">View your order status and payment information.</p>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="p-6 bg-gray-100 dark:bg-gray-700 rounded-md shadow-sm">
|
||||
<h2 className="flex items-center text-xl font-semibold text-gray-800 dark:text-white mb-4">
|
||||
<History className="mr-2 text-primary-cta" /> Order Status
|
||||
</h2>
|
||||
<div className="space-y-2 text-gray-700 dark:text-gray-200">
|
||||
<p><strong>Order ID:</strong> #123456789</p>
|
||||
<p><strong>Status:</strong> <span className="text-green-600 font-medium">Processing</span></p>
|
||||
<p><strong>Items:</strong> 3</p>
|
||||
<p><strong>Estimated Delivery:</strong> 2-3 business days</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6 bg-gray-100 dark:bg-gray-700 rounded-md shadow-sm">
|
||||
<h2 className="flex items-center text-xl font-semibold text-gray-800 dark:text-white mb-4">
|
||||
<CreditCard className="mr-2 text-primary-cta" /> Payment Information
|
||||
</h2>
|
||||
<div className="space-y-2 text-gray-700 dark:text-gray-200">
|
||||
<p><strong>Amount Due:</strong> €125.00</p>
|
||||
<p><strong>Payment Method:</strong> Credit Card (**** **** **** 1234)</p>
|
||||
<p><strong>Transaction ID:</strong> TXN-987654321</p>
|
||||
<p><strong>Payment Status:</strong> <span className="text-blue-600 font-medium">Authorized</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
179
src/app/kds/page.tsx
Normal file
179
src/app/kds/page.tsx
Normal file
@@ -0,0 +1,179 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import HeroSignup from '@/components/sections/hero/HeroSignup';
|
||||
import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
|
||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
import { CheckCircle, Sliders, Monitor, Clock, Settings, Wifi } from 'lucide-react';
|
||||
|
||||
export default function KdsPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="large"
|
||||
background="circleGradient"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "/#hero" },
|
||||
{ name: "About", id: "/#about" },
|
||||
{ name: "Services", id: "/#services" },
|
||||
{ name: "KDS", id: "/kds" },
|
||||
{ name: "Products", id: "/#products" },
|
||||
{ name: "Pricing", id: "/#pricing" },
|
||||
{ name: "FAQ", id: "/#faq" },
|
||||
{ name: "Contact", id: "/#contact" }
|
||||
]}
|
||||
button={{
|
||||
text: "Get in Touch", href: "/#contact" }}
|
||||
logoSrc="http://img.b2bpic.net/free-vector/letter-b-luxury-brand-logo_1035-8689.jpg"
|
||||
brandName="16 Av. de Blossac"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSignup
|
||||
background={{ variant: "animated-grid" }}
|
||||
title="Streamline Your Kitchen Operations with KDS"
|
||||
description="Our Kitchen Display System (KDS) optimizes your kitchen workflow, ensuring efficient order preparation and seamless management."
|
||||
tag="KDS Solutions"
|
||||
tagIcon={Monitor}
|
||||
buttonText="Get Started Today"
|
||||
inputPlaceholder="Your Email"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/modern-kitchen-with-stainless-steel-appliances_23-2148768007.jpg"
|
||||
imageAlt="Modern kitchen with a KDS display"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyNine
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
title="Key Features of Our KDS"
|
||||
description="From order intake to dispatch, our KDS offers comprehensive tools to enhance efficiency and customer satisfaction."
|
||||
features={[
|
||||
{
|
||||
title: "Order Ticket Display", description: "Clear, real-time display of incoming orders with customizable views for easy readability.", imageSrc: "http://img.b2bpic.net/free-photo/chef-preparing-dish-restaurant-kitchen_23-2149537237.jpg", titleImageSrc: "", buttonText: "Learn More"
|
||||
},
|
||||
{
|
||||
title: "Preparation Status Tracking", description: "Track each order from pending to ready for pickup with intuitive status indicators.", imageSrc: "http://img.b2bpic.net/free-photo/busy-restaurant-kitchen-staff_23-2149303513.jpg", titleImageSrc: "", buttonText: "See Tracking"
|
||||
},
|
||||
{
|
||||
title: "Order Management Controls", description: "Intuitive controls to manage orders, mark as complete, or flag issues, all at your fingertips.", imageSrc: "http://img.b2bpic.net/free-photo/various-ingredients-vegetables-chef-restaurant-kitchen-stove_23-2149303531.jpg", titleImageSrc: "", buttonText: "Explore Controls"
|
||||
},
|
||||
{
|
||||
title: "Real-time Updates", description: "Automatic updates ensure your kitchen staff always has the most current information.", imageSrc: "http://img.b2bpic.net/free-photo/smart-watches_1398-4447.jpg", titleImageSrc: "", buttonText: "Discover Real-time"
|
||||
},
|
||||
{
|
||||
title: "Customizable Views", description: "Adapt the KDS display to your kitchen's unique needs, preferences, and workflow.", imageSrc: "http://img.b2bpic.net/free-photo/monitor-display-with-analytics_141793-27039.jpg", titleImageSrc: "", buttonText: "Customize Now"
|
||||
},
|
||||
{
|
||||
title: "Seamless POS Integration", description: "Easily integrate with your existing Point of Sale system for a unified ecosystem.", imageSrc: "http://img.b2bpic.net/free-photo/payment-terminal-with-credit-card_23-2147781197.jpg", titleImageSrc: "", buttonText: "Integrate"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="kds-faq" data-section="kds-faq">
|
||||
<FaqSplitMedia
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "kdsfaq1", title: "What hardware is required for the KDS?", content: "Our KDS is designed to be flexible and can run on standard kitchen-grade tablets, touchscreens, or monitors. We can advise on compatible hardware."
|
||||
},
|
||||
{
|
||||
id: "kdsfaq2", title: "Can the KDS integrate with my existing POS system?", content: "Yes, our KDS is built with API-first principles, allowing seamless integration with most modern POS systems. Contact us for specific compatibility."
|
||||
},
|
||||
{
|
||||
id: "kdsfaq3", title: "Is training provided for kitchen staff?", content: "Absolutely! We offer comprehensive training sessions for your kitchen staff to ensure a smooth transition and optimal utilization of the KDS."
|
||||
},
|
||||
{
|
||||
id: "kdsfaq4", title: "How does the KDS handle order modifications?", content: "Order modifications are updated in real-time on the KDS display. Our system highlights changes, ensuring staff are always aware of adjustments."
|
||||
},
|
||||
{
|
||||
id: "kdsfaq5", title: "What kind of support do you offer?", content: "We provide 24/7 technical support, including remote assistance and on-site visits for critical issues, ensuring your kitchen runs smoothly."
|
||||
}
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/question-mark-speech-bubble-blue-background_53876-111003.jpg"
|
||||
imageAlt="Question mark icon"
|
||||
mediaAnimation="opacity"
|
||||
mediaPosition="left"
|
||||
title="KDS Frequently Asked Questions"
|
||||
description="Find answers to common questions about implementing and using our Kitchen Display System."
|
||||
faqsAnimation="slide-up"
|
||||
showCard={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Get Your Kitchen Ready"
|
||||
title="Ready to Transform Your Kitchen?"
|
||||
description="Contact us today to schedule a demo and see how our KDS can revolutionize your restaurant's back-of-house operations."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/chef-restaurant-kitchen-working-his-food_23-2149303504.jpg"
|
||||
imageAlt="Chef working in a restaurant kitchen"
|
||||
mediaAnimation="none"
|
||||
mediaPosition="right"
|
||||
inputPlaceholder="Enter your email for a demo"
|
||||
buttonText="Request Demo"
|
||||
termsText="By clicking Request Demo you're confirming that you agree with our Terms and Conditions."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
videoSrc="http://img.b2bpic.net/free-photo/neva-river-dawn-saint-petersburg_1398-4592.jpg"
|
||||
videoAriaLabel="Footer video"
|
||||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ckq9bk"
|
||||
logoText="16 Av. de Blossac"
|
||||
columns={[
|
||||
{
|
||||
title: "Quick Links", items: [
|
||||
{ label: "Home", href: "/#hero" },
|
||||
{ label: "About Us", href: "/#about" },
|
||||
{ label: "Services", href: "/#services" },
|
||||
{ label: "KDS", href: "/kds" },
|
||||
{ label: "Products", href: "/#products" },
|
||||
{ label: "Pricing", href: "/#pricing" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "FAQ", href: "/#faq" },
|
||||
{ label: "Contact", href: "/#contact" },
|
||||
{ label: "Directions", href: "/#contact" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Cookie Policy", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyrightText="© 2024 | 16 Av. de Blossac. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
94
src/app/kiosk/page.tsx
Normal file
94
src/app/kiosk/page.tsx
Normal file
@@ -0,0 +1,94 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function KioskPage() {
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
const [selectedCategory, setSelectedCategory] = useState('All');
|
||||
|
||||
const foodProducts = [
|
||||
{ id: 'item1', category: 'Burgers', name: 'Classic Burger', price: '$12.00', rating: 4, reviewCount: '120', imageSrc: 'http://img.b2bpic.net/free-photo/hamburger-sandwich-fries-coke_1417-1066.jpg', imageAlt: 'Classic Burger' },
|
||||
{ id: 'item2', category: 'Sides', name: 'French Fries', price: '$4.50', rating: 5, reviewCount: '150', imageSrc: 'http://img.b2bpic.net/free-photo/appetizing-french-fries_144627-23098.jpg', imageAlt: 'French Fries' },
|
||||
{ id: 'item3', category: 'Drinks', name: 'Coca-Cola', price: '$3.00', rating: 4, reviewCount: '90', imageSrc: 'http://img.b2bpic.net/free-photo/cola-glass-ice_144627-18406.jpg', imageAlt: 'Coca-Cola' },
|
||||
{ id: 'item4', category: 'Burgers', name: 'Cheeseburger', price: '$13.50', rating: 4, reviewCount: '110', imageSrc: 'http://img.b2bpic.net/free-photo/tasty-gourmet-burger-black-background_144627-22709.jpg', imageAlt: 'Cheeseburger' },
|
||||
{ id: 'item5', category: 'Sides', name: 'Onion Rings', price: '$5.50', rating: 4, reviewCount: '80', imageSrc: 'http://img.b2bpic.net/free-photo/delicious-onion-rings-wooden-board_144627-22687.jpg', imageAlt: 'Onion Rings' },
|
||||
{ id: 'item6', category: 'Drinks', name: 'Orange Juice', price: '$3.50', rating: 5, reviewCount: '75', imageSrc: 'http://img.b2bpic.net/free-photo/glass-orange-juice-fresh-oranges_144627-22678.jpg', imageAlt: 'Orange Juice' },
|
||||
{ id: 'item7', category: 'Burgers', name: 'Veggie Burger', price: '$11.00', rating: 4, reviewCount: '60', imageSrc: 'http://img.b2bpic.net/free-photo/plant-based-burger-with-salad_144627-22701.jpg', imageAlt: 'Veggie Burger' },
|
||||
{ id: 'item8', category: 'Desserts', name: 'Chocolate Milkshake', price: '$6.00', rating: 5, reviewCount: '100', imageSrc: 'http://img.b2bpic.net/free-photo/chocolate-milkshake-with-whipped-cream-cherry-top_144627-22699.jpg', imageAlt: 'Chocolate Milkshake' },
|
||||
];
|
||||
|
||||
const categories = ['All', 'Burgers', 'Sides', 'Drinks', 'Desserts'];
|
||||
|
||||
const filteredProducts = foodProducts.filter(product => {
|
||||
const matchesSearch = product.name.toLowerCase().includes(searchValue.toLowerCase());
|
||||
const matchesCategory = selectedCategory === 'All' || product.category === selectedCategory;
|
||||
return matchesSearch && matchesCategory;
|
||||
});
|
||||
|
||||
const handleCategoryChange = (value: string) => {
|
||||
setSelectedCategory(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="large"
|
||||
background="circleGradient"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "/#about" },
|
||||
{ name: "Services", id: "/#services" },
|
||||
{ name: "Products", id: "/#products" },
|
||||
{ name: "Pricing", id: "/#pricing" },
|
||||
{ name: "FAQ", id: "/#faq" },
|
||||
{ name: "Contact", id: "/#contact" },
|
||||
{ name: "Kiosk", id: "/kiosk" },
|
||||
]}
|
||||
button={{ text: "Get in Touch", href: "/#contact" }}
|
||||
logoSrc="http://img.b2bpic.net/free-vector/letter-b-luxury-brand-logo_1035-8689.jpg"
|
||||
brandName="16 Av. de Blossac"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ProductCatalog
|
||||
layout="page"
|
||||
products={filteredProducts}
|
||||
searchValue={searchValue}
|
||||
onSearchChange={setSearchValue}
|
||||
searchPlaceholder="Search menu items..."
|
||||
filters={[
|
||||
{
|
||||
label: 'Category',
|
||||
options: categories,
|
||||
selected: selectedCategory,
|
||||
onChange: handleCategoryChange,
|
||||
},
|
||||
]}
|
||||
emptyMessage="No menu items found matching your criteria."
|
||||
className="min-h-screen pt-20"
|
||||
gridClassName="gap-4 p-4"
|
||||
cardClassName="flex flex-col items-center text-center p-4"
|
||||
imageClassName="w-32 h-32 object-cover rounded-md mb-2"
|
||||
searchClassName="mb-4"
|
||||
filterClassName="mb-4"
|
||||
toolbarClassName="sticky top-0 bg-background z-10 p-4"
|
||||
/>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -34,7 +34,7 @@ export default function LandingPage() {
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home", id: "#hero"},
|
||||
name: "Home", id: "/"},
|
||||
{
|
||||
name: "About", id: "#about"},
|
||||
{
|
||||
@@ -47,6 +47,9 @@ export default function LandingPage() {
|
||||
name: "FAQ", id: "#faq"},
|
||||
{
|
||||
name: "Contact", id: "#contact"},
|
||||
{
|
||||
name: "Admin Dashboard", id: "/admin"
|
||||
}
|
||||
]}
|
||||
button={{
|
||||
text: "Get in Touch", href: "#contact"}}
|
||||
@@ -311,7 +314,7 @@ export default function LandingPage() {
|
||||
{
|
||||
title: "Quick Links", items: [
|
||||
{
|
||||
label: "Home", href: "#hero"},
|
||||
label: "Home", href: "/"},
|
||||
{
|
||||
label: "About Us", href: "#about"},
|
||||
{
|
||||
@@ -330,6 +333,8 @@ export default function LandingPage() {
|
||||
label: "Contact", href: "#contact"},
|
||||
{
|
||||
label: "Directions", href: "#contact"},
|
||||
{
|
||||
label: "Admin Dashboard", href: "/admin"}
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
119
src/app/payment-processing/page.tsx
Normal file
119
src/app/payment-processing/page.tsx
Normal file
@@ -0,0 +1,119 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import { CreditCard, DollarSign } from "lucide-react";
|
||||
|
||||
export default function PaymentProcessingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="large"
|
||||
background="circleGradient"
|
||||
cardStyle="outline"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "#hero" },
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Services", id: "#services" },
|
||||
{ name: "Products", id: "#products" },
|
||||
{ name: "Pricing", id: "#pricing" },
|
||||
{ name: "FAQ", id: "#faq" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
{ name: "Customer Display", id: "/customer-display" },
|
||||
{ name: "Payment Processing", id: "/payment-processing" }
|
||||
]}
|
||||
button={{ text: "Get in Touch", href: "#contact" }}
|
||||
logoSrc="http://img.b2bpic.net/free-vector/letter-b-luxury-brand-logo_1035-8689.jpg"
|
||||
brandName="16 Av. de Blossac"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<main className="min-h-screen py-16 flex items-center justify-center bg-gray-50 dark:bg-gray-900">
|
||||
<div className="max-w-4xl w-full p-8 space-y-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
|
||||
<h1 className="text-3xl font-bold text-center text-gray-900 dark:text-white">Payment Processing</h1>
|
||||
<p className="text-center text-gray-600 dark:text-gray-300">Choose your preferred payment method.</p>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{/* Card Payment Section */}
|
||||
<div className="p-6 bg-gray-100 dark:bg-gray-700 rounded-md shadow-sm">
|
||||
<h2 className="flex items-center text-xl font-semibold text-gray-800 dark:text-white mb-4">
|
||||
<CreditCard className="mr-2 text-primary-cta" /> Card Payment
|
||||
</h2>
|
||||
<form className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="cardNumber" className="block text-sm font-medium text-gray-700 dark:text-gray-200">Card Number</label>
|
||||
<input
|
||||
type="text"
|
||||
id="cardNumber"
|
||||
className="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white"
|
||||
placeholder="**** **** **** ****"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label htmlFor="expiry" className="block text-sm font-medium text-gray-700 dark:text-gray-200">Expiry Date</label>
|
||||
<input
|
||||
type="text"
|
||||
id="expiry"
|
||||
className="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white"
|
||||
placeholder="MM/YY"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="cvc" className="block text-sm font-medium text-gray-700 dark:text-gray-200">CVC</label>
|
||||
<input
|
||||
type="text"
|
||||
id="cvc"
|
||||
className="mt-1 block w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:outline-none focus:ring-primary-cta focus:border-primary-cta sm:text-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white"
|
||||
placeholder="123"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-cta hover:bg-primary-cta/90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-cta"
|
||||
>
|
||||
Pay with Card
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Cash Payment Section */}
|
||||
<div className="p-6 bg-gray-100 dark:bg-gray-700 rounded-md shadow-sm flex flex-col justify-between">
|
||||
<div>
|
||||
<h2 className="flex items-center text-xl font-semibold text-gray-800 dark:text-white mb-4">
|
||||
<DollarSign className="mr-2 text-primary-cta" /> Cash Payment
|
||||
</h2>
|
||||
<p className="text-gray-700 dark:text-gray-200 mb-4">
|
||||
Please present your order details at the counter to complete your cash payment.
|
||||
Our staff will assist you with the process.
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400">
|
||||
Note: Exact change is appreciated for faster service.
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="mt-4 w-full inline-flex justify-center py-2 px-4 border border-gray-300 dark:border-gray-600 shadow-sm text-sm font-medium rounded-md text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-900 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-cta"
|
||||
>
|
||||
Proceed with Cash
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user