Merge version_3 into main #1
@@ -2,12 +2,153 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import TextAbout from '@/components/sections/about/TextAbout';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
import CardStack from '@/components/cardStack/CardStack';
|
||||
import ButtonShiftHover from '@/components/button/ButtonShiftHover/ButtonShiftHover';
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { Phone, MessageCircle } from 'lucide-react'; // For call and WhatsApp icons
|
||||
|
||||
|
||||
// Mock data for orders
|
||||
interface OrderItem {
|
||||
name: string;
|
||||
quantity: number;
|
||||
price: number;
|
||||
}
|
||||
|
||||
interface Order {
|
||||
id: string;
|
||||
customerName: string;
|
||||
customerPhone: string; // E.g., "0550123456"
|
||||
customerAddress: string;
|
||||
items: OrderItem[];
|
||||
totalPrice: number;
|
||||
timestamp: string; // ISO string or similar
|
||||
}
|
||||
|
||||
const mockOrders: Order[] = [
|
||||
{
|
||||
id: "ORD001", customerName: "Ahmed Benali", customerPhone: "0550123456", customerAddress: "Rue Didouche Mourad, Alger Centre", items: [
|
||||
{ name: "Burger Classique", quantity: 2, price: 450 },
|
||||
{ name: "Frites XXL", quantity: 1, price: 200 },
|
||||
],
|
||||
totalPrice: 1100,
|
||||
timestamp: new Date().toISOString(),
|
||||
},
|
||||
{
|
||||
id: "ORD002", customerName: "Fatima Zahra", customerPhone: "0770987654", customerAddress: "Cité El Wouroud, Bab Ezzouar", items: [
|
||||
{ name: "Pizza Pepperoni", quantity: 1, price: 850 },
|
||||
{ name: "Boisson Gazeuse", quantity: 2, price: 100 },
|
||||
],
|
||||
totalPrice: 1050,
|
||||
timestamp: new Date(Date.now() - 5 * 60 * 1000).toISOString(), // 5 mins ago
|
||||
},
|
||||
{
|
||||
id: "ORD003", customerName: "Rachid Khelifa", customerPhone: "0660112233", customerAddress: "Boulevard Krim Belkacem, Oran", items: [
|
||||
{ name: "Taco Poulet", quantity: 1, price: 500 },
|
||||
{ name: "Chicken Nuggets (6pcs)", quantity: 1, price: 600 },
|
||||
{ name: "Boisson Gazeuse", quantity: 1, price: 100 },
|
||||
],
|
||||
totalPrice: 1200,
|
||||
timestamp: new Date(Date.now() - 10 * 60 * 1000).toISOString(), // 10 mins ago
|
||||
},
|
||||
];
|
||||
|
||||
const OrderCard: React.FC<{ order: Order; onOrderReady: (id: string) => void }> = ({ order, onOrderReady }) => {
|
||||
const formatPhoneNumberForWhatsApp = (phone: string) => {
|
||||
// Remove leading '0' if present and add country code "+213"
|
||||
let formatted = phone.startsWith('0') ? phone.substring(1) : phone;
|
||||
if (!formatted.startsWith('213')) {
|
||||
formatted = '213' + formatted;
|
||||
}
|
||||
return formatted;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-card p-6 rounded-lg shadow-lg flex flex-col gap-4 border border-accent/20">
|
||||
<h3 className="text-xl font-semibold text-foreground">Commande #{order.id}</h3>
|
||||
<div className="text-sm text-foreground/80">
|
||||
<p><span className="font-medium">Client:</span> {order.customerName}</p>
|
||||
<p><span className="font-medium">Téléphone:</span> {order.customerPhone}</p>
|
||||
<p><span className="font-medium">Adresse:</span> {order.customerAddress}</p>
|
||||
<p className="mt-2 text-xs"><span className="font-medium">Heure:</span> {new Date(order.timestamp).toLocaleTimeString('fr-FR')}</p>
|
||||
</div>
|
||||
<div className="flex-grow">
|
||||
<h4 className="font-semibold text-foreground mt-4 mb-2">Articles:</h4>
|
||||
<ul className="list-disc list-inside text-foreground/90">
|
||||
{order.items.map((item, index) => (
|
||||
<li key={index} className="text-sm">{item.name} x{item.quantity} ({item.price * item.quantity} DA)</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<p className="text-lg font-bold text-foreground mt-4">Total: {order.totalPrice} DA</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-2 mt-4">
|
||||
<ButtonShiftHover
|
||||
text="Appeler le client"
|
||||
href={`tel:${order.customerPhone}`}
|
||||
className="flex-1 bg-secondary-cta hover:bg-secondary-cta/80 text-secondary-cta-text"
|
||||
textClassName="flex items-center justify-center gap-2"
|
||||
ariaLabel={`Appeler le client ${order.customerName}`}
|
||||
>
|
||||
<Phone className="h-4 w-4" />
|
||||
<span>Appeler</span>
|
||||
</ButtonShiftHover>
|
||||
<ButtonShiftHover
|
||||
text="WhatsApp"
|
||||
href={`https://wa.me/${formatPhoneNumberForWhatsApp(order.customerPhone)}`}
|
||||
className="flex-1 bg-green-500 hover:bg-green-600 text-white"
|
||||
textClassName="flex items-center justify-center gap-2"
|
||||
ariaLabel={`Envoyer un message WhatsApp à ${order.customerName}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<MessageCircle className="h-4 w-4" />
|
||||
<span>WhatsApp</span>
|
||||
</ButtonShiftHover>
|
||||
<ButtonShiftHover
|
||||
text="Commande Prête"
|
||||
onClick={() => onOrderReady(order.id)}
|
||||
className="flex-1 bg-primary-cta hover:bg-primary-cta/80 text-primary-cta-text"
|
||||
ariaLabel={`Marquer la commande ${order.id} comme prête`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
export default function AdminPage() {
|
||||
const [orders, setOrders] = useState<Order[]>([]);
|
||||
|
||||
// Simulate fetching orders from a backend
|
||||
const fetchOrders = useCallback(() => {
|
||||
// In a real app, this would be an API call
|
||||
console.log("Fetching orders...");
|
||||
// For now, load mockOrders if empty, otherwise just return current orders
|
||||
setOrders(prevOrders => {
|
||||
if (prevOrders.length === 0) {
|
||||
return mockOrders;
|
||||
}
|
||||
return prevOrders;
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchOrders(); // Fetch immediately on component mount
|
||||
|
||||
const intervalId = setInterval(fetchOrders, 2000); // Fetch every 2 seconds
|
||||
|
||||
return () => clearInterval(intervalId); // Cleanup interval on unmount
|
||||
}, [fetchOrders]);
|
||||
|
||||
const handleOrderReady = (id: string) => {
|
||||
setOrders(prevOrders => prevOrders.filter(order => order.id !== id));
|
||||
console.log(`Order ${id} marked as ready and cleared.`);
|
||||
// In a real app, this would also trigger an API call to update order status in backend
|
||||
};
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
@@ -15,138 +156,79 @@ export default function LandingPage() {
|
||||
borderRadius="soft"
|
||||
contentWidth="mediumLarge"
|
||||
sizing="mediumSizeLargeTitles"
|
||||
background="floatingGradient"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
background="noise"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Accueil",
|
||||
id: "/",
|
||||
},
|
||||
{
|
||||
name: "Menu",
|
||||
id: "/#menu",
|
||||
},
|
||||
{
|
||||
name: "Commander",
|
||||
id: "/#commander",
|
||||
},
|
||||
{
|
||||
name: "Admin",
|
||||
id: "/admin",
|
||||
},
|
||||
]}
|
||||
logoSrc="http://img.b2bpic.net/free-vector/illustration-pizza-vector-set_53876-81099.jpg"
|
||||
logoAlt="Logo Fast Food DZ"
|
||||
brandName="Fast Food DZ"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Accueil", id: "/" },
|
||||
{ name: "Menu", id: "/#menu" },
|
||||
{ name: "Commander", id: "/#commander" },
|
||||
{ name: "Admin", id: "/admin" }
|
||||
]}
|
||||
logoSrc="http://img.b2bpic.net/free-vector/illustration-pizza-vector-set_53876-81099.jpg"
|
||||
logoAlt="Logo Fast Food DZ"
|
||||
brandName="Fast Food DZ"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="admin-about" data-section="admin-about">
|
||||
<TextAbout
|
||||
useInvertedBackground={false}
|
||||
title="Tableau de Bord Administrateur"
|
||||
/>
|
||||
</div>
|
||||
<main className="min-h-screen pt-20 px-4 sm:px-6 lg:px-8 bg-background text-foreground">
|
||||
<div className="max-w-7xl mx-auto py-12">
|
||||
<h1 className="text-5xl font-extrabold text-center mb-10">Gestion des Commandes</h1>
|
||||
{orders.length === 0 ? (
|
||||
<p className="text-center text-lg text-foreground/70">Aucune commande en attente.</p>
|
||||
) : (
|
||||
<CardStack
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
uniformGridCustomHeightClasses="min-h-fit"
|
||||
className="pt-8"
|
||||
gridClassName="grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6"
|
||||
>
|
||||
{orders.map((order) => (
|
||||
<OrderCard key={order.id} order={order} onOrderReady={handleOrderReady} />
|
||||
))}
|
||||
</CardStack>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div id="admin-faq" data-section="admin-faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Comment les commandes sont-elles affichées ?",
|
||||
content: "Les nouvelles commandes apparaissent automatiquement et en temps réel sur le tableau de bord, sans nécessiter de rafraîchissement manuel. Elles sont triées par ordre d'arrivée.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Comment contacter un client ?",
|
||||
content: "Chaque commande affiche un bouton 'Appeler le client' qui vous permet d'initier un appel téléphonique ou une discussion WhatsApp directement avec le client concerné.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Que fait le bouton 'Commande Prête' ?",
|
||||
content: "En cliquant sur 'Commande Prête', la commande est retirée du tableau de bord actif, signalant qu'elle est préparée et prête pour la livraison ou la collecte.",
|
||||
},
|
||||
{
|
||||
id: "q4",
|
||||
title: "Puis-je modifier une commande existante ?",
|
||||
content: "L'interface est conçue pour l'affichage et la gestion du statut. Les modifications directes de commande nécessitent une intervention manuelle ou un système backend dédié.",
|
||||
},
|
||||
]}
|
||||
title="Questions Fréquentes sur la Gestion des Commandes"
|
||||
description="Retrouvez ici les réponses aux questions les plus courantes pour vous aider à utiliser l'interface administrateur."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Catégories",
|
||||
items: [
|
||||
{
|
||||
label: "Burgers",
|
||||
href: "/#menu",
|
||||
},
|
||||
{
|
||||
label: "Pizzas",
|
||||
href: "/#menu",
|
||||
},
|
||||
{
|
||||
label: "Tacos",
|
||||
href: "/#menu",
|
||||
},
|
||||
{
|
||||
label: "Boissons",
|
||||
href: "/#menu",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Aide",
|
||||
items: [
|
||||
{
|
||||
label: "Commander",
|
||||
href: "/#commander",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "/contact",
|
||||
},
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "/faq",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Légal",
|
||||
items: [
|
||||
{
|
||||
label: "Politique de Confidentialité",
|
||||
href: "/politique-confidentialite",
|
||||
},
|
||||
{
|
||||
label: "Conditions de Service",
|
||||
href: "/conditions-service",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Fast Food DZ"
|
||||
copyrightText="© 2024 Fast Food DZ. Tous droits réservés."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Catégories", items: [
|
||||
{ label: "Burgers", href: "/#menu" },
|
||||
{ label: "Pizzas", href: "/#menu" },
|
||||
{ label: "Tacos", href: "/#menu" },
|
||||
{ label: "Boissons", href: "/#menu" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Aide", items: [
|
||||
{ label: "Commander", href: "/#commander" },
|
||||
{ label: "Contact", href: "/contact" },
|
||||
{ label: "FAQ", href: "/faq" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Légal", items: [
|
||||
{ label: "Politique de Confidentialité", href: "/politique-confidentialite" },
|
||||
{ label: "Conditions de Service", href: "/conditions-service" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
logoText="Fast Food DZ"
|
||||
copyrightText="© 2024 Fast Food DZ. Tous droits réservés."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
202
src/app/page.tsx
202
src/app/page.tsx
@@ -29,21 +29,13 @@ export default function LandingPage() {
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Accueil",
|
||||
id: "/",
|
||||
},
|
||||
name: "Accueil", id: "/"},
|
||||
{
|
||||
name: "Menu",
|
||||
id: "/#menu",
|
||||
},
|
||||
name: "Menu", id: "/client#menu-section"},
|
||||
{
|
||||
name: "Commander",
|
||||
id: "/#commander",
|
||||
},
|
||||
name: "Commander", id: "/client#commander-section"},
|
||||
{
|
||||
name: "Admin",
|
||||
id: "/admin",
|
||||
},
|
||||
name: "Admin", id: "/admin"},
|
||||
]}
|
||||
logoSrc="http://img.b2bpic.net/free-vector/illustration-pizza-vector-set_53876-81099.jpg"
|
||||
logoAlt="Logo Fast Food DZ"
|
||||
@@ -57,13 +49,9 @@ export default function LandingPage() {
|
||||
description="Le goût authentique, livré rapidement à votre porte en Algérie. Découvrez notre menu varié et commandez en quelques clics !"
|
||||
buttons={[
|
||||
{
|
||||
text: "Voir le Menu",
|
||||
href: "/#menu",
|
||||
},
|
||||
text: "Voir le Menu", href: "/client#menu-section"},
|
||||
{
|
||||
text: "Commander Maintenant",
|
||||
href: "/#commander",
|
||||
},
|
||||
text: "Commander Maintenant", href: "/client#commander-section"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/responsible-handsome-male-driver-scooter-with-red-helmet-delivering-pizza_273609-31428.jpg"
|
||||
@@ -80,23 +68,11 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Livraison Rapide",
|
||||
description: "Recevez vos plats préférés en un temps record, directement à votre adresse.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/colleagues-work-eating-pizza_23-2148894071.jpg",
|
||||
imageAlt: "Livreur sur scooter",
|
||||
},
|
||||
title: "Livraison Rapide", description: "Recevez vos plats préférés en un temps record, directement à votre adresse.", imageSrc: "http://img.b2bpic.net/free-photo/colleagues-work-eating-pizza_23-2148894071.jpg", imageAlt: "Livreur sur scooter"},
|
||||
{
|
||||
title: "Ingrédients Frais",
|
||||
description: "Nous utilisons uniquement des produits frais et de qualité supérieure pour chaque plat.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-fresh-red-tomatoes-with-garlic-green-salad-inside-wooden-board-blue-surface-food-lunch-salad-ripe-color-meal_179666-19771.jpg",
|
||||
imageAlt: "Ingrédients frais",
|
||||
},
|
||||
title: "Ingrédients Frais", description: "Nous utilisons uniquement des produits frais et de qualité supérieure pour chaque plat.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-fresh-red-tomatoes-with-garlic-green-salad-inside-wooden-board-blue-surface-food-lunch-salad-ripe-color-meal_179666-19771.jpg", imageAlt: "Ingrédients frais"},
|
||||
{
|
||||
title: "Paiement Facile",
|
||||
description: "Options de paiement flexibles pour une expérience de commande sans tracas.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/paying-purchases_1098-16889.jpg",
|
||||
imageAlt: "Paiement mobile",
|
||||
},
|
||||
title: "Paiement Facile", description: "Options de paiement flexibles pour une expérience de commande sans tracas.", imageSrc: "http://img.b2bpic.net/free-photo/paying-purchases_1098-16889.jpg", imageAlt: "Paiement mobile"},
|
||||
]}
|
||||
title="Pourquoi Choisir Fast Food DZ ?"
|
||||
description="Nous nous engageons à vous offrir la meilleure expérience de restauration rapide, de la commande à la livraison."
|
||||
@@ -111,52 +87,22 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "burger-1",
|
||||
name: "Burger Classique",
|
||||
price: "450 DA",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hamburger-isolated-white-background-fresh-burger-fastfood-with-beef-cheese_90220-1329.jpg",
|
||||
imageAlt: "Burger Classique",
|
||||
rating: 5,
|
||||
id: "burger-1", name: "Burger Classique", price: "450 DA", imageSrc: "http://img.b2bpic.net/free-photo/hamburger-isolated-white-background-fresh-burger-fastfood-with-beef-cheese_90220-1329.jpg", imageAlt: "Burger Classique", rating: 5,
|
||||
},
|
||||
{
|
||||
id: "pizza-1",
|
||||
name: "Pizza Pepperoni",
|
||||
price: "850 DA",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/slice-pizza-wooden-board-with-recipe-book-aside-marble_114579-13833.jpg",
|
||||
imageAlt: "Pizza Pepperoni",
|
||||
rating: 4,
|
||||
id: "pizza-1", name: "Pizza Pepperoni", price: "850 DA", imageSrc: "http://img.b2bpic.net/free-photo/slice-pizza-wooden-board-with-recipe-book-aside-marble_114579-13833.jpg", imageAlt: "Pizza Pepperoni", rating: 4,
|
||||
},
|
||||
{
|
||||
id: "taco-1",
|
||||
name: "Taco Poulet",
|
||||
price: "500 DA",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-delicious-taco_23-2150799493.jpg",
|
||||
imageAlt: "Taco Poulet",
|
||||
rating: 5,
|
||||
id: "taco-1", name: "Taco Poulet", price: "500 DA", imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-delicious-taco_23-2150799493.jpg", imageAlt: "Taco Poulet", rating: 5,
|
||||
},
|
||||
{
|
||||
id: "drink-1",
|
||||
name: "Boisson Gazeuse",
|
||||
price: "100 DA",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/photorealistic-burger-meal_23-2151292977.jpg",
|
||||
imageAlt: "Boisson Gazeuse",
|
||||
rating: 4,
|
||||
id: "drink-1", name: "Boisson Gazeuse", price: "100 DA", imageSrc: "http://img.b2bpic.net/free-photo/photorealistic-burger-meal_23-2151292977.jpg", imageAlt: "Boisson Gazeuse", rating: 4,
|
||||
},
|
||||
{
|
||||
id: "fries-1",
|
||||
name: "Frites XXL",
|
||||
price: "200 DA",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-delicious-french-fries-with-seasonings-getting-eat-by-female-dark-surface_179666-34417.jpg",
|
||||
imageAlt: "Frites XXL",
|
||||
rating: 5,
|
||||
id: "fries-1", name: "Frites XXL", price: "200 DA", imageSrc: "http://img.b2bpic.net/free-photo/front-view-delicious-french-fries-with-seasonings-getting-eat-by-female-dark-surface_179666-34417.jpg", imageAlt: "Frites XXL", rating: 5,
|
||||
},
|
||||
{
|
||||
id: "nuggets-1",
|
||||
name: "Chicken Nuggets (6pcs)",
|
||||
price: "600 DA",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-fried-chicken-wings-some-garlic-spices-grey-surface_181624-23572.jpg",
|
||||
imageAlt: "Chicken Nuggets",
|
||||
rating: 4,
|
||||
id: "nuggets-1", name: "Chicken Nuggets (6pcs)", price: "600 DA", imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-fried-chicken-wings-some-garlic-spices-grey-surface_181624-23572.jpg", imageAlt: "Chicken Nuggets", rating: 4,
|
||||
},
|
||||
]}
|
||||
title="Notre Menu Appétissant"
|
||||
@@ -171,50 +117,20 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t-1",
|
||||
name: "Amira Benali",
|
||||
handle: "@amirabenali",
|
||||
testimonial: "Des burgers incroyables et une livraison super rapide. Mon nouveau fast-food préféré !",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-business-man_23-2148514859.jpg",
|
||||
imageAlt: "Amira Benali",
|
||||
},
|
||||
id: "t-1", name: "Amira Benali", handle: "@amirabenali", testimonial: "Des burgers incroyables et une livraison super rapide. Mon nouveau fast-food préféré !", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-business-man_23-2148514859.jpg", imageAlt: "Amira Benali"},
|
||||
{
|
||||
id: "t-2",
|
||||
name: "Khaled Mansour",
|
||||
handle: "@khaled.dz",
|
||||
testimonial: "La pizza était chaude et délicieuse. Le service client est au top. Je recommande vivement !",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blond-man-surprised_1194-2887.jpg",
|
||||
imageAlt: "Khaled Mansour",
|
||||
},
|
||||
id: "t-2", name: "Khaled Mansour", handle: "@khaled.dz", testimonial: "La pizza était chaude et délicieuse. Le service client est au top. Je recommande vivement !", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blond-man-surprised_1194-2887.jpg", imageAlt: "Khaled Mansour"},
|
||||
{
|
||||
id: "t-3",
|
||||
name: "Samira Haddad",
|
||||
handle: "@samira_h",
|
||||
testimonial: "Leurs tacos sont les meilleurs de la ville ! Toujours frais et pleins de saveur.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-autumn-woman-portrait-natural_1150-1608.jpg",
|
||||
imageAlt: "Samira Haddad",
|
||||
},
|
||||
id: "t-3", name: "Samira Haddad", handle: "@samira_h", testimonial: "Leurs tacos sont les meilleurs de la ville ! Toujours frais et pleins de saveur.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-autumn-woman-portrait-natural_1150-1608.jpg", imageAlt: "Samira Haddad"},
|
||||
{
|
||||
id: "t-4",
|
||||
name: "Yacine Belkacem",
|
||||
handle: "@yacine.b",
|
||||
testimonial: "J'adore la variété du menu et la qualité constante. Fast Food DZ ne déçoit jamais.",
|
||||
rating: 4,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiley-young-man-looking-camera_23-2148289280.jpg",
|
||||
imageAlt: "Yacine Belkacem",
|
||||
},
|
||||
id: "t-4", name: "Yacine Belkacem", handle: "@yacine.b", testimonial: "J'adore la variété du menu et la qualité constante. Fast Food DZ ne déçoit jamais.", rating: 4,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiley-young-man-looking-camera_23-2148289280.jpg", imageAlt: "Yacine Belkacem"},
|
||||
{
|
||||
id: "t-5",
|
||||
name: "Nour El Houda",
|
||||
handle: "@nour_h",
|
||||
testimonial: "La commande est arrivée très vite et tout était parfait. Un excellent rapport qualité-prix.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-sportive-girl-sunrise-seaside_176420-6314.jpg",
|
||||
imageAlt: "Nour El Houda",
|
||||
},
|
||||
id: "t-5", name: "Nour El Houda", handle: "@nour_h", testimonial: "La commande est arrivée très vite et tout était parfait. Un excellent rapport qualité-prix.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-sportive-girl-sunrise-seaside_176420-6314.jpg", imageAlt: "Nour El Houda"},
|
||||
]}
|
||||
showRating={true}
|
||||
title="Ce que disent nos clients"
|
||||
@@ -225,33 +141,24 @@ export default function LandingPage() {
|
||||
<div id="commander" data-section="commander">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Valider Votre Commande"
|
||||
description="Remplissez le formulaire ci-dessous pour finaliser votre livraison. Un récapitulatif de votre panier sera inclus dans la commande."
|
||||
title="Informations de Contact"
|
||||
description="Pour toute question ou demande spéciale, n'hésitez pas à nous contacter directement."
|
||||
inputs={[
|
||||
{
|
||||
name: "fullName",
|
||||
type: "text",
|
||||
placeholder: "Nom et Prénom",
|
||||
required: true,
|
||||
name: "fullName", type: "text", placeholder: "Nom et Prénom", required: true,
|
||||
},
|
||||
{
|
||||
name: "phoneNumber",
|
||||
type: "tel",
|
||||
placeholder: "Numéro de Téléphone (0XXXXXXXXX)",
|
||||
required: true,
|
||||
name: "email", type: "email", placeholder: "Votre Email", required: true,
|
||||
},
|
||||
{
|
||||
name: "address",
|
||||
type: "text",
|
||||
placeholder: "Adresse de Livraison (Commune, Quartier, N° de porte)",
|
||||
required: true,
|
||||
name: "message", type: "textarea", placeholder: "Votre Message", required: true,
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/3d-rendering-sushi_23-2151301239.jpg"
|
||||
imageAlt="Image de fond pour le formulaire de commande"
|
||||
imageAlt="Image de fond pour le formulaire de contact"
|
||||
mediaAnimation="none"
|
||||
mediaPosition="right"
|
||||
buttonText="Confirmer la commande"
|
||||
buttonText="Envoyer le Message"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -259,54 +166,33 @@ export default function LandingPage() {
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Catégories",
|
||||
items: [
|
||||
title: "Catégories", items: [
|
||||
{
|
||||
label: "Burgers",
|
||||
href: "/#menu",
|
||||
},
|
||||
label: "Burgers", href: "/client#menu-section"},
|
||||
{
|
||||
label: "Pizzas",
|
||||
href: "/#menu",
|
||||
},
|
||||
label: "Pizzas", href: "/client#menu-section"},
|
||||
{
|
||||
label: "Tacos",
|
||||
href: "/#menu",
|
||||
},
|
||||
label: "Tacos", href: "/client#menu-section"},
|
||||
{
|
||||
label: "Boissons",
|
||||
href: "/#menu",
|
||||
},
|
||||
label: "Boissons", href: "/client#menu-section"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Aide",
|
||||
items: [
|
||||
title: "Aide", items: [
|
||||
{
|
||||
label: "Commander",
|
||||
href: "/#commander",
|
||||
},
|
||||
label: "Commander", href: "/client#commander-section"},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "/contact",
|
||||
},
|
||||
label: "Contact", href: "/contact"},
|
||||
{
|
||||
label: "FAQ",
|
||||
href: "/faq",
|
||||
},
|
||||
label: "FAQ", href: "/faq"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Légal",
|
||||
items: [
|
||||
title: "Légal", items: [
|
||||
{
|
||||
label: "Politique de Confidentialité",
|
||||
href: "/politique-confidentialite",
|
||||
},
|
||||
label: "Politique de Confidentialité", href: "/politique-confidentialite"},
|
||||
{
|
||||
label: "Conditions de Service",
|
||||
href: "/conditions-service",
|
||||
},
|
||||
label: "Conditions de Service", href: "/conditions-service"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #ffffff;
|
||||
--card: #f9f9f9;
|
||||
--foreground: #120a00e6;
|
||||
--primary-cta: #E34400;
|
||||
--background: #1a1a1a;
|
||||
--card: #2a2a2a;
|
||||
--foreground: #f5f5f5;
|
||||
--primary-cta: #e43b2f;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #f9f9f9;
|
||||
--secondary-cta: #ff7b00;
|
||||
--secondary-cta-text: #120a00e6;
|
||||
--accent: #e2e2e2;
|
||||
--background-accent: #E34400;
|
||||
--accent: #facc15;
|
||||
--background-accent: #e43b2f;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user