diff --git a/src/app/page.tsx b/src/app/page.tsx index b573dfd..2a38028 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -2,6 +2,7 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import Link from "next/link"; +import { useState } from "react"; import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple"; import HeroCentered from "@/components/sections/hero/HeroCentered"; import ProductCardTwo from "@/components/sections/product/ProductCardTwo"; @@ -14,6 +15,9 @@ import FooterBaseCard from "@/components/sections/footer/FooterBaseCard"; import { Sparkles, Star, Heart, MapPin, Globe, Users, Zap, MessageSquare } from "lucide-react"; export default function HomePage() { + const [selectedProduct, setSelectedProduct] = useState(null); + const [isModalOpen, setIsModalOpen] = useState(false); + const navItems = [ { name: "Home", id: "/" }, { name: "Menu", id: "/menu" }, @@ -24,8 +28,7 @@ export default function HomePage() { const footerColumns = [ { - title: "Quick Links", - items: [ + title: "Quick Links", items: [ { label: "Home", href: "/" }, { label: "Menu", href: "/menu" }, { label: "Order Online", href: "/order" }, @@ -33,8 +36,7 @@ export default function HomePage() { ], }, { - title: "Company", - items: [ + title: "Company", items: [ { label: "About Us", href: "/about" }, { label: "Careers", href: "/careers" }, { label: "Blog", href: "/blog" }, @@ -42,8 +44,7 @@ export default function HomePage() { ], }, { - title: "Support", - items: [ + title: "Support", items: [ { label: "Contact", href: "/contact" }, { label: "FAQ", href: "#faq" }, { label: "Track Order", href: "/track" }, @@ -51,8 +52,7 @@ export default function HomePage() { ], }, { - title: "Social", - items: [ + title: "Social", items: [ { label: "Facebook", href: "https://facebook.com/mcdonalds" }, { label: "Instagram", href: "https://instagram.com/mcdonalds" }, { label: "Twitter", href: "https://twitter.com/mcdonalds" }, @@ -61,6 +61,61 @@ export default function HomePage() { }, ]; + const products = [ + { + id: "1", brand: "McDonald's Classic", name: "Big Mac", price: "$5.49", rating: 5, + reviewCount: "12.5k", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hamburgers-arrangement_23-2148614059.jpg?_wi=1", imageAlt: "Big Mac hamburger"}, + { + id: "2", brand: "McDonald's Premium", name: "Double Quarter Pounder", price: "$7.99", rating: 5, + reviewCount: "8.3k", imageSrc: "http://img.b2bpic.net/free-photo/closeup-shot-tasty-smash-burgers-french-fries-red-spicy-pepper-white-background_181624-50909.jpg?_wi=1", imageAlt: "Double Quarter Pounder"}, + { + id: "3", brand: "McDonald's Combo", name: "Meal Bundle", price: "$9.99", rating: 5, + reviewCount: "15.2k", imageSrc: "http://img.b2bpic.net/free-photo/classic-cheeseburger-with-fries-beer_140725-935.jpg?_wi=1", imageAlt: "McDonald's meal combo"}, + ]; + + const features = [ + { + id: 1, + title: "Browse Our Menu", description: + "Explore our complete selection of burgers, fries, sides, drinks, and desserts. Filter by category or search for your favorite items.", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-ordering-takeaway-food-smartphone_23-2149025816.jpg?_wi=1", onProductClick: () => { + setSelectedProduct("Browse Menu"); + setIsModalOpen(true); + }, + }, + { + id: 2, + title: "Add to Cart", description: + "Select your items, customize them to your liking, and add them to your cart. Review your order and adjust quantities as needed.", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-ordering-takeaway-food-smartphone_23-2149025816.jpg?_wi=2", onProductClick: () => { + setSelectedProduct("Add to Cart"); + setIsModalOpen(true); + }, + }, + { + id: 3, + title: "Checkout", description: + "Choose your delivery or pickup option, enter your address or preferred location, and proceed to secure payment.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-afraid-courier-girl-wearing-medical-mask-gloves-standing-motorcycle-holding-coffee-small-cakes-pastel-peach-color-background_179666-41139.jpg?_wi=1", onProductClick: () => { + setSelectedProduct("Checkout"); + setIsModalOpen(true); + }, + }, + { + id: 4, + title: "Enjoy Your Meal", description: + "Sit back and relax while we prepare your food fresh. Track your order in real-time and receive it hot and ready.", imageSrc: "http://img.b2bpic.net/free-photo/classic-cheeseburger-with-fries-beer_140725-935.jpg?_wi=2", onProductClick: () => { + setSelectedProduct("Enjoy Meal"); + setIsModalOpen(true); + }, + }, + ]; + + const productsWithHandlers = products.map((product) => ({ + ...product, + onProductClick: () => { + setSelectedProduct(product.name); + setIsModalOpen(true); + }, + })); + return ( @@ -160,36 +178,7 @@ export default function HomePage() { tag="Quick Process" textboxLayout="default" useInvertedBackground={true} - features={[ - { - id: 1, - title: "Browse Our Menu", - description: - "Explore our complete selection of burgers, fries, sides, drinks, and desserts. Filter by category or search for your favorite items.", - imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-ordering-takeaway-food-smartphone_23-2149025816.jpg?_wi=1", - }, - { - id: 2, - title: "Add to Cart", - description: - "Select your items, customize them to your liking, and add them to your cart. Review your order and adjust quantities as needed.", - imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-ordering-takeaway-food-smartphone_23-2149025816.jpg?_wi=2", - }, - { - id: 3, - title: "Checkout", - description: - "Choose your delivery or pickup option, enter your address or preferred location, and proceed to secure payment.", - imageSrc: "http://img.b2bpic.net/free-photo/top-view-afraid-courier-girl-wearing-medical-mask-gloves-standing-motorcycle-holding-coffee-small-cakes-pastel-peach-color-background_179666-41139.jpg?_wi=1", - }, - { - id: 4, - title: "Enjoy Your Meal", - description: - "Sit back and relax while we prepare your food fresh. Track your order in real-time and receive it hot and ready.", - imageSrc: "http://img.b2bpic.net/free-photo/classic-cheeseburger-with-fries-beer_140725-935.jpg?_wi=2", - }, - ]} + features={features} /> @@ -204,42 +193,19 @@ export default function HomePage() { animationType="slide-up" plans={[ { - id: "1", - badge: "Best Value", - badgeIcon: Sparkles, - price: "$2.99", - subtitle: "Big Mac", - features: [ - "Fresh beef patties", - "Special sauce", - "Lettuce, cheese, pickles, onions", - ], + id: "1", badge: "Best Value", badgeIcon: Sparkles, + price: "$2.99", subtitle: "Big Mac", features: [ + "Fresh beef patties", "Special sauce", "Lettuce, cheese, pickles, onions"], }, { - id: "2", - badge: "Most Popular", - badgeIcon: Star, - price: "$4.49", - subtitle: "Big Mac Meal", - features: [ - "Big Mac sandwich", - "Medium fries", - "Medium drink", - "Free cookie", - ], + id: "2", badge: "Most Popular", badgeIcon: Star, + price: "$4.49", subtitle: "Big Mac Meal", features: [ + "Big Mac sandwich", "Medium fries", "Medium drink", "Free cookie"], }, { - id: "3", - badge: "Family Special", - badgeIcon: Heart, - price: "$19.99", - subtitle: "Family Bundle", - features: [ - "4 burgers", - "Large fries", - "4 drinks", - "Desserts for all", - ], + id: "3", badge: "Family Special", badgeIcon: Heart, + price: "$19.99", subtitle: "Family Bundle", features: [ + "4 burgers", "Large fries", "4 drinks", "Desserts for all"], }, ]} /> @@ -256,59 +222,23 @@ export default function HomePage() { animationType="slide-up" testimonials={[ { - id: "1", - name: "Sarah Johnson", - handle: "@sarahj_foodlover", - testimonial: - "Fastest delivery ever! My burger arrived hot and fresh. Highly recommend the online ordering system!", - imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-friends-eating-pizza_23-2149872404.jpg?_wi=1", - imageAlt: "Sarah Johnson", - }, + id: "1", name: "Sarah Johnson", handle: "@sarahj_foodlover", testimonial: + "Fastest delivery ever! My burger arrived hot and fresh. Highly recommend the online ordering system!", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-friends-eating-pizza_23-2149872404.jpg?_wi=1", imageAlt: "Sarah Johnson"}, { - id: "2", - name: "Michael Chen", - handle: "@mchen_foodie", - testimonial: - "McDonald's online ordering has saved me so much time. The app is super easy to use and the deals are amazing!", - imageSrc: "http://img.b2bpic.net/free-photo/happy-man-feeding-his-girlfriend-while-having-lunch-with-friends-home_637285-3195.jpg?_wi=1", - imageAlt: "Michael Chen", - }, + id: "2", name: "Michael Chen", handle: "@mchen_foodie", testimonial: + "McDonald's online ordering has saved me so much time. The app is super easy to use and the deals are amazing!", imageSrc: "http://img.b2bpic.net/free-photo/happy-man-feeding-his-girlfriend-while-having-lunch-with-friends-home_637285-3195.jpg?_wi=1", imageAlt: "Michael Chen"}, { - id: "3", - name: "Emily Rodriguez", - handle: "@emily_eats", - testimonial: - "Love the customization options. I can make my burger exactly how I want it. Perfect for my family's quick dinners!", - imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-clicking-photo-burger-from-mobile-phone_1170-742.jpg?_wi=1", - imageAlt: "Emily Rodriguez", - }, + id: "3", name: "Emily Rodriguez", handle: "@emily_eats", testimonial: + "Love the customization options. I can make my burger exactly how I want it. Perfect for my family's quick dinners!", imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-clicking-photo-burger-from-mobile-phone_1170-742.jpg?_wi=1", imageAlt: "Emily Rodriguez"}, { - id: "4", - name: "David Kim", - handle: "@davidk_lunches", - testimonial: - "Consistently delicious, consistently fast. McDonald's online ordering is my go-to for lunch breaks at work.", - imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-eating-delicious-street-food-outdoors_23-2148952920.jpg?_wi=1", - imageAlt: "David Kim", - }, + id: "4", name: "David Kim", handle: "@davidk_lunches", testimonial: + "Consistently delicious, consistently fast. McDonald's online ordering is my go-to for lunch breaks at work.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-eating-delicious-street-food-outdoors_23-2148952920.jpg?_wi=1", imageAlt: "David Kim"}, { - id: "5", - name: "Jessica Martinez", - handle: "@jess_loves_burgers", - testimonial: - "The loyalty program rewards are incredible. I save money every time I order. Worth every click!", - imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-friends-eating-pizza_23-2149872404.jpg?_wi=2", - imageAlt: "Jessica Martinez", - }, + id: "5", name: "Jessica Martinez", handle: "@jess_loves_burgers", testimonial: + "The loyalty program rewards are incredible. I save money every time I order. Worth every click!", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-friends-eating-pizza_23-2149872404.jpg?_wi=2", imageAlt: "Jessica Martinez"}, { - id: "6", - name: "Robert Wilson", - handle: "@rob_food_critic", - testimonial: - "Great quality, great value, great service. McDonald's online platform sets the standard for fast food delivery.", - imageSrc: "http://img.b2bpic.net/free-photo/happy-man-feeding-his-girlfriend-while-having-lunch-with-friends-home_637285-3195.jpg?_wi=2", - imageAlt: "Robert Wilson", - }, + id: "6", name: "Robert Wilson", handle: "@rob_food_critic", testimonial: + "Great quality, great value, great service. McDonald's online platform sets the standard for fast food delivery.", imageSrc: "http://img.b2bpic.net/free-photo/happy-man-feeding-his-girlfriend-while-having-lunch-with-friends-home_637285-3195.jpg?_wi=2", imageAlt: "Robert Wilson"}, ]} /> @@ -324,29 +254,17 @@ export default function HomePage() { animationType="slide-up" metrics={[ { - id: "1", - icon: MapPin, - title: "Restaurants", - value: "40,000+", - }, + id: "1", icon: MapPin, + title: "Restaurants", value: "40,000+"}, { - id: "2", - icon: Globe, - title: "Countries", - value: "100+", - }, + id: "2", icon: Globe, + title: "Countries", value: "100+"}, { - id: "3", - icon: Users, - title: "Customers Daily", - value: "69M+", - }, + id: "3", icon: Users, + title: "Customers Daily", value: "69M+"}, { - id: "4", - icon: Zap, - title: "Quick Service", - value: "5 min avg", - }, + id: "4", icon: Zap, + title: "Quick Service", value: "5 min avg"}, ]} /> @@ -375,6 +293,33 @@ export default function HomePage() { copyrightText="© 2025 McDonald's Corporation. All rights reserved." /> + + {/* Product Details Modal */} + {isModalOpen && ( +
setIsModalOpen(false)} + > +
e.stopPropagation()} + > +

Product Details

+

+ You selected: {selectedProduct} +

+

+ This is a product details modal. In a real application, this would display detailed information about the selected item. +

+ +
+
+ )} ); } \ No newline at end of file