Add src/App.tsx

src/App.tsx

@@ -0,0 +1,74 @@
+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="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 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>
+            </div>
+            
+            {/* Desktop Menu */}
+            <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">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 */}
+            <div className="md:hidden">
+              <button
+                onClick={() => setIsMenuOpen(!isMenuOpen)}
+                className="text-gray-700"
+              >
+                {isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* 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>
+          </div>
+        )}
+      </nav>
+
+      {/* 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>
+        </div>
+      </main>
+    </div>
+  )
+}
+
+export default App