Update src/App.tsx
This commit is contained in:
192
src/App.tsx
192
src/App.tsx
@@ -1,34 +1,27 @@
|
|||||||
|
import { Menu, X, ChevronDown, Star, MapPin, Clock, Phone } from 'lucide-react'
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
import { Menu, X, ChevronDown } from 'lucide-react'
|
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const [isMenuOpen, setIsMenuOpen] = useState(false)
|
const [isMenuOpen, setIsMenuOpen] = useState(false)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-50">
|
<div className="min-h-screen bg-white">
|
||||||
{/* Navigation */}
|
{/* Header */}
|
||||||
<nav className="bg-white shadow-sm">
|
<header className="bg-white shadow-sm">
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div className="flex justify-between items-center h-16">
|
<div className="flex justify-between items-center py-4">
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<img src="/images/placeholder.webp" alt="Logo" className="h-8 w-8" />
|
<img src="/images/placeholder.webp" alt="Logo" className="h-8 w-8 mr-3" />
|
||||||
<span className="ml-2 text-xl font-bold text-gray-900">Brand</span>
|
<span className="text-xl font-bold text-gray-900">Restaurant</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Desktop Menu */}
|
<nav className="hidden md:flex space-x-8">
|
||||||
<div className="hidden md:flex space-x-8">
|
|
||||||
<a href="#" className="text-gray-700 hover:text-gray-900">Home</a>
|
<a href="#" className="text-gray-700 hover:text-gray-900">Home</a>
|
||||||
|
<a href="#" className="text-gray-700 hover:text-gray-900">Menu</a>
|
||||||
<a href="#" className="text-gray-700 hover:text-gray-900">About</a>
|
<a href="#" className="text-gray-700 hover:text-gray-900">About</a>
|
||||||
<div className="relative group">
|
|
||||||
<button className="flex items-center text-gray-700 hover:text-gray-900">
|
|
||||||
Services
|
|
||||||
<ChevronDown className="ml-1 h-4 w-4" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<a href="#" className="text-gray-700 hover:text-gray-900">Contact</a>
|
<a href="#" className="text-gray-700 hover:text-gray-900">Contact</a>
|
||||||
</div>
|
</nav>
|
||||||
|
|
||||||
{/* Mobile menu button */}
|
|
||||||
<div className="md:hidden">
|
<div className="md:hidden">
|
||||||
<button
|
<button
|
||||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||||
@@ -40,33 +33,158 @@ function App() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Mobile Menu */}
|
{/* Mobile menu */}
|
||||||
{isMenuOpen && (
|
{isMenuOpen && (
|
||||||
<div className="md:hidden">
|
<div className="md:hidden">
|
||||||
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white border-t">
|
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-gray-50">
|
||||||
<a href="#" className="block px-3 py-2 text-gray-700">Home</a>
|
<a href="#" className="block px-3 py-2 text-gray-700 hover:text-gray-900">Home</a>
|
||||||
<a href="#" className="block px-3 py-2 text-gray-700">About</a>
|
<a href="#" className="block px-3 py-2 text-gray-700 hover:text-gray-900">Menu</a>
|
||||||
<a href="#" className="block px-3 py-2 text-gray-700">Services</a>
|
<a href="#" className="block px-3 py-2 text-gray-700 hover:text-gray-900">About</a>
|
||||||
<a href="#" className="block px-3 py-2 text-gray-700">Contact</a>
|
<a href="#" className="block px-3 py-2 text-gray-700 hover:text-gray-900">Contact</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</nav>
|
</header>
|
||||||
|
|
||||||
{/* Main Content */}
|
{/* Hero Section */}
|
||||||
<main className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
|
<section className="relative bg-gray-900 text-white">
|
||||||
<div className="text-center">
|
<div className="absolute inset-0">
|
||||||
<h1 className="text-4xl font-bold text-gray-900 mb-4">
|
<img
|
||||||
Welcome to Our App
|
src="/images/placeholder.webp"
|
||||||
</h1>
|
alt="Restaurant Interior"
|
||||||
<p className="text-xl text-gray-600 mb-8">
|
className="w-full h-full object-cover opacity-70"
|
||||||
Built with React, Vite, and Tailwind CSS
|
/>
|
||||||
</p>
|
|
||||||
<button className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
|
|
||||||
Get Started
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
<div className="relative max-w-7xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8">
|
||||||
|
<h1 className="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
|
||||||
|
Welcome to Our Restaurant
|
||||||
|
</h1>
|
||||||
|
<p className="mt-6 max-w-3xl text-xl">
|
||||||
|
Experience the finest dining with our carefully crafted dishes made from the freshest ingredients.
|
||||||
|
</p>
|
||||||
|
<div className="mt-10">
|
||||||
|
<button className="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-8 rounded-lg transition duration-300">
|
||||||
|
View Menu
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Features */}
|
||||||
|
<section className="py-16 bg-gray-50">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="text-center">
|
||||||
|
<h2 className="text-3xl font-extrabold text-gray-900 sm:text-4xl">
|
||||||
|
Why Choose Us
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<Star className="h-12 w-12 text-red-600" />
|
||||||
|
</div>
|
||||||
|
<h3 className="mt-4 text-xl font-semibold text-gray-900">Quality Food</h3>
|
||||||
|
<p className="mt-2 text-gray-600">Fresh ingredients and expert preparation ensure every dish is perfect.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<Clock className="h-12 w-12 text-red-600" />
|
||||||
|
</div>
|
||||||
|
<h3 className="mt-4 text-xl font-semibold text-gray-900">Fast Service</h3>
|
||||||
|
<p className="mt-2 text-gray-600">Quick and efficient service without compromising on quality.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<MapPin className="h-12 w-12 text-red-600" />
|
||||||
|
</div>
|
||||||
|
<h3 className="mt-4 text-xl font-semibold text-gray-900">Great Location</h3>
|
||||||
|
<p className="mt-2 text-gray-600">Conveniently located in the heart of the city with easy access.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Menu Preview */}
|
||||||
|
<section className="py-16 bg-white">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="text-center">
|
||||||
|
<h2 className="text-3xl font-extrabold text-gray-900 sm:text-4xl">
|
||||||
|
Featured Dishes
|
||||||
|
</h2>
|
||||||
|
<p className="mt-4 text-lg text-gray-600">
|
||||||
|
Try our most popular dishes
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
{[1, 2, 3].map((item) => (
|
||||||
|
<div key={item} className="bg-white rounded-lg shadow-md overflow-hidden">
|
||||||
|
<img
|
||||||
|
src="/images/placeholder.webp"
|
||||||
|
alt={`Dish ${item}`}
|
||||||
|
className="w-full h-48 object-cover"
|
||||||
|
/>
|
||||||
|
<div className="p-6">
|
||||||
|
<h3 className="text-xl font-semibold text-gray-900">Special Dish {item}</h3>
|
||||||
|
<p className="mt-2 text-gray-600">A delicious combination of fresh ingredients prepared with care.</p>
|
||||||
|
<div className="mt-4 flex justify-between items-center">
|
||||||
|
<span className="text-2xl font-bold text-red-600">$24.99</span>
|
||||||
|
<button className="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded transition duration-300">
|
||||||
|
Order Now
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Contact */}
|
||||||
|
<section className="py-16 bg-gray-900 text-white">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="text-center">
|
||||||
|
<h2 className="text-3xl font-extrabold sm:text-4xl">
|
||||||
|
Visit Us Today
|
||||||
|
</h2>
|
||||||
|
<p className="mt-4 text-lg text-gray-300">
|
||||||
|
We're open and ready to serve you
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
|
||||||
|
<div>
|
||||||
|
<MapPin className="h-8 w-8 mx-auto text-red-600" />
|
||||||
|
<h3 className="mt-4 text-xl font-semibold">Location</h3>
|
||||||
|
<p className="mt-2 text-gray-300">123 Main Street<br />City, State 12345</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Clock className="h-8 w-8 mx-auto text-red-600" />
|
||||||
|
<h3 className="mt-4 text-xl font-semibold">Hours</h3>
|
||||||
|
<p className="mt-2 text-gray-300">Mon-Fri: 11am-10pm<br />Sat-Sun: 10am-11pm</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<Phone className="h-8 w-8 mx-auto text-red-600" />
|
||||||
|
<h3 className="mt-4 text-xl font-semibold">Phone</h3>
|
||||||
|
<p className="mt-2 text-gray-300">(555) 123-4567</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<footer className="bg-gray-800 text-white py-8">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="text-center">
|
||||||
|
<p>© 2024 Restaurant. All rights reserved.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user