diff options
Diffstat (limited to 'frontend/src/app/page.js')
| -rw-r--r-- | frontend/src/app/page.js | 219 |
1 files changed, 219 insertions, 0 deletions
diff --git a/frontend/src/app/page.js b/frontend/src/app/page.js new file mode 100644 index 0000000..2c7ec34 --- /dev/null +++ b/frontend/src/app/page.js @@ -0,0 +1,219 @@ +import Link from 'next/link'; +import MainLayout from '@/components/layouts/MainLayout'; + +export default function Home() { + return ( + <MainLayout> + {/* Hero section */} + <section className="py-16 md:py-24"> + <div className="container mx-auto text-center"> + <h1 className="text-4xl md:text-6xl font-bold mb-6"> + Experience the <span className="text-primary">Finest</span> Cuisine + </h1> + <p className="text-lg md:text-xl text-gray-600 dark:text-gray-400 mb-8 max-w-3xl mx-auto"> + Welcome to our restaurant, where we serve delicious meals made with fresh ingredients and a passion for culinary excellence. + </p> + <div className="flex flex-wrap justify-center gap-4"> + <Link + href="/menu" + className="px-6 py-3 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors" + > + View Menu + </Link> + <Link + href="/reservations" + className="px-6 py-3 bg-white dark:bg-slate-800 border border-gray-300 dark:border-slate-700 rounded-md hover:bg-gray-50 dark:hover:bg-slate-700 transition-colors" + > + Book a Table + </Link> + </div> + </div> + </section> + + {/* Featured Menu Items */} + <section className="py-16 bg-gray-50 dark:bg-slate-800/50"> + <div className="container mx-auto"> + <h2 className="text-3xl font-bold mb-12 text-center">Featured Menu Items</h2> + <div className="grid grid-cols-1 md:grid-cols-3 gap-8"> + {/* Item 1 */} + <div className="bg-white dark:bg-slate-800 rounded-lg overflow-hidden shadow-md"> + <div className="h-48 bg-gray-300 dark:bg-gray-700"></div> + <div className="p-6"> + <h3 className="text-xl font-bold mb-2">Signature Pasta</h3> + <p className="text-gray-600 dark:text-gray-400 mb-4"> + Handmade pasta with our special sauce and fresh herbs. + </p> + <div className="flex justify-between items-center"> + <span className="text-lg font-bold">$18.99</span> + <button className="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors"> + Order Now + </button> + </div> + </div> + </div> + + {/* Item 2 */} + <div className="bg-white dark:bg-slate-800 rounded-lg overflow-hidden shadow-md"> + <div className="h-48 bg-gray-300 dark:bg-gray-700"></div> + <div className="p-6"> + <h3 className="text-xl font-bold mb-2">Premium Steak</h3> + <p className="text-gray-600 dark:text-gray-400 mb-4"> + Juicy, tender steak cooked to perfection with seasonal vegetables. + </p> + <div className="flex justify-between items-center"> + <span className="text-lg font-bold">$29.99</span> + <button className="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors"> + Order Now + </button> + </div> + </div> + </div> + + {/* Item 3 */} + <div className="bg-white dark:bg-slate-800 rounded-lg overflow-hidden shadow-md"> + <div className="h-48 bg-gray-300 dark:bg-gray-700"></div> + <div className="p-6"> + <h3 className="text-xl font-bold mb-2">Seafood Delight</h3> + <p className="text-gray-600 dark:text-gray-400 mb-4"> + Fresh seafood mix with special spices and lemon butter sauce. + </p> + <div className="flex justify-between items-center"> + <span className="text-lg font-bold">$24.99</span> + <button className="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors"> + Order Now + </button> + </div> + </div> + </div> + </div> + <div className="text-center mt-12"> + <Link + href="/menu" + className="px-6 py-3 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors" + > + View Full Menu + </Link> + </div> + </div> + </section> + + {/* About Section */} + <section className="py-16"> + <div className="container mx-auto"> + <div className="flex flex-col md:flex-row items-center gap-12"> + <div className="md:w-1/2"> + <div className="h-80 bg-gray-300 dark:bg-gray-700 rounded-lg"></div> + </div> + <div className="md:w-1/2"> + <h2 className="text-3xl font-bold mb-6">Our Story</h2> + <p className="text-gray-600 dark:text-gray-400 mb-4"> + Founded in 2010, our restaurant has been serving the community with delicious meals made from the freshest ingredients. Our chefs are passionate about creating unforgettable dining experiences. + </p> + <p className="text-gray-600 dark:text-gray-400 mb-6"> + We believe in sustainable practices and source our ingredients from local farmers and suppliers whenever possible. + </p> + <Link + href="/about" + className="px-6 py-3 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors" + > + Learn More + </Link> + </div> + </div> + </div> + </section> + + {/* Testimonials */} + <section className="py-16 bg-gray-50 dark:bg-slate-800/50"> + <div className="container mx-auto"> + <h2 className="text-3xl font-bold mb-12 text-center">What Our Customers Say</h2> + <div className="grid grid-cols-1 md:grid-cols-3 gap-8"> + {/* Testimonial 1 */} + <div className="bg-white dark:bg-slate-800 p-6 rounded-lg shadow-md"> + <div className="flex items-center mb-4"> + <div className="w-12 h-12 bg-gray-300 dark:bg-gray-700 rounded-full mr-4"></div> + <div> + <h3 className="font-bold">John Smith</h3> + <div className="flex text-yellow-400"> + <span>★</span> + <span>★</span> + <span>★</span> + <span>★</span> + <span>★</span> + </div> + </div> + </div> + <p className="text-gray-600 dark:text-gray-400"> + "The food was amazing and the service was exceptional. I will definitely be coming back!" + </p> + </div> + + {/* Testimonial 2 */} + <div className="bg-white dark:bg-slate-800 p-6 rounded-lg shadow-md"> + <div className="flex items-center mb-4"> + <div className="w-12 h-12 bg-gray-300 dark:bg-gray-700 rounded-full mr-4"></div> + <div> + <h3 className="font-bold">Sarah Johnson</h3> + <div className="flex text-yellow-400"> + <span>★</span> + <span>★</span> + <span>★</span> + <span>★</span> + <span>★</span> + </div> + </div> + </div> + <p className="text-gray-600 dark:text-gray-400"> + "Perfect place for a special occasion. The ambiance was lovely and the food was delicious." + </p> + </div> + + {/* Testimonial 3 */} + <div className="bg-white dark:bg-slate-800 p-6 rounded-lg shadow-md"> + <div className="flex items-center mb-4"> + <div className="w-12 h-12 bg-gray-300 dark:bg-gray-700 rounded-full mr-4"></div> + <div> + <h3 className="font-bold">Michael Brown</h3> + <div className="flex text-yellow-400"> + <span>★</span> + <span>★</span> + <span>★</span> + <span>★</span> + <span>★</span> + </div> + </div> + </div> + <p className="text-gray-600 dark:text-gray-400"> + "I've tried many restaurants in the area, but this one stands out. The flavors are authentic and the staff is friendly." + </p> + </div> + </div> + </div> + </section> + + {/* Call to Action */} + <section className="py-16 bg-primary text-white"> + <div className="container mx-auto text-center"> + <h2 className="text-3xl font-bold mb-6">Ready to Experience Our Cuisine?</h2> + <p className="text-xl mb-8 max-w-3xl mx-auto"> + Book your table now or order online for pickup or delivery. + </p> + <div className="flex flex-wrap justify-center gap-4"> + <Link + href="/reservations" + className="px-6 py-3 bg-white text-primary font-bold rounded-md hover:bg-gray-100 transition-colors" + > + Book a Table + </Link> + <Link + href="/menu" + className="px-6 py-3 bg-transparent border-2 border-white rounded-md hover:bg-white/10 transition-colors" + > + Order Online + </Link> + </div> + </div> + </section> + </MainLayout> + ); +} |