Merge version_1 into main #2
196
src/App.tsx
196
src/App.tsx
@@ -1,34 +1,27 @@
|
||||
import { Menu, X, ChevronDown, Star, MapPin, Clock, Phone } from 'lucide-react'
|
||||
import { useState } from 'react'
|
||||
import { Menu, X, ChevronDown } from 'lucide-react'
|
||||
|
||||
function App() {
|
||||
const [isMenuOpen, setIsMenuOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Navigation */}
|
||||
<nav className="bg-white shadow-sm">
|
||||
<div className="min-h-screen bg-white">
|
||||
{/* Header */}
|
||||
<header className="bg-white shadow-sm">
|
||||
<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">
|
||||
<img src="/images/placeholder.webp" alt="Logo" className="h-8 w-8" />
|
||||
<span className="ml-2 text-xl font-bold text-gray-900">Brand</span>
|
||||
<img src="/images/placeholder.webp" alt="Logo" className="h-8 w-8 mr-3" />
|
||||
<span className="text-xl font-bold text-gray-900">Restaurant</span>
|
||||
</div>
|
||||
|
||||
{/* Desktop Menu */}
|
||||
<div className="hidden md:flex space-x-8">
|
||||
<nav 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">Menu</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>
|
||||
</div>
|
||||
|
||||
{/* Mobile menu button */}
|
||||
</nav>
|
||||
|
||||
<div className="md:hidden">
|
||||
<button
|
||||
onClick={() => setIsMenuOpen(!isMenuOpen)}
|
||||
@@ -39,34 +32,159 @@ function App() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
|
||||
{/* Mobile menu */}
|
||||
{isMenuOpen && (
|
||||
<div className="md:hidden">
|
||||
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white border-t">
|
||||
<a href="#" className="block px-3 py-2 text-gray-700">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">Services</a>
|
||||
<a href="#" className="block px-3 py-2 text-gray-700">Contact</a>
|
||||
<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 hover:text-gray-900">Home</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 hover:text-gray-900">About</a>
|
||||
<a href="#" className="block px-3 py-2 text-gray-700 hover:text-gray-900">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div className="text-center">
|
||||
<h1 className="text-4xl font-bold text-gray-900 mb-4">
|
||||
Welcome to Our App
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600 mb-8">
|
||||
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>
|
||||
{/* Hero Section */}
|
||||
<section className="relative bg-gray-900 text-white">
|
||||
<div className="absolute inset-0">
|
||||
<img
|
||||
src="/images/placeholder.webp"
|
||||
alt="Restaurant Interior"
|
||||
className="w-full h-full object-cover opacity-70"
|
||||
/>
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -2,5 +2,5 @@ import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()]
|
||||
plugins: [react()],
|
||||
})
|
||||
Reference in New Issue
Block a user