diff --git a/src/App.tsx b/src/App.tsx
index ed03848..858d520 100644
--- a/src/App.tsx
+++ b/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>&copy; 2024 Restaurant. All rights reserved.</p>
+          </div>
+        </div>
+      </footer>
     </div>
   )
 }
diff --git a/vite.config.ts b/vite.config.ts
index 0661e1f..3e34260 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -2,5 +2,5 @@ import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 
 export default defineConfig({
-  plugins: [react()]
+  plugins: [react()],
 })
\ No newline at end of file