Add basic hero element

src/app.tsx

@@ -1,9 +1,44 @@
 export function App() {
   return (
-    <>
-      <div>
-        <h1 className="text-xl">Hello, World!</h1>
+    <div className="h-screen w-screen flex flex-col">
+      <nav className="flex justify-between items-center p-4 px-6 shadow-md">
+        <h1 className="text-2xl font-bold">Great Music LLM</h1>
+        <div className="hidden sm:flex gap-2">
+          <button className="bg-blue-500 text-white px-4 py-2 rounded">
+            Button 1
+          </button>
+          <button className="bg-green-500 text-white px-4 py-2 rounded">
+            Button 2
+          </button>
+        </div>
+      </nav>
+      <main className="flex-1 overflow-auto">
+        <div
+          className="h-full bg-cover bg-center
+            bg-[url(https://www.kennedy-center.org/globalassets/education/resources-for-educators/classroom-resources/artsedge/media/guide-to-the-orchestra/2022_11_03_nso_group_photo-169.png)]
+          "
+        >
+          <div className="h-full text-white flex items-center justify-center backdrop-blur-[3px] backdrop-grayscale-50">
+            <div className="flex flex-col gap-4 items-center text-center">
+              <div className="flex flex-col gap-1 items-center">
+                <h2 className="text-4xl font-bold">
+                  Orchestral Event Management
+                </h2>
+                <h3 className="text-xl">without the hassle</h3>
+              </div>
+              <div className="flex gap-4">
+                <button className="bg-blue-500 text-white px-4 py-2 rounded">
+                  Get Started
+                </button>
+                <button className="bg-gray-300 text-black px-4 py-2 rounded">
+                  Learn More
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>Section 2 coming soon...</div>
+      </main>
     </div>
-    </>
   );
 }