asthetic header and body

app/Home.tsx

@@ -3,26 +3,38 @@ import Footer from '../components/custom/footer';
 
 export default function Home() {
   return (
-    <div className="container mx-auto p-4">
-      <div>
-        <Header />
-        {/* Other page content */}
+    <>
+      <Header />
+      <div className="bg-gradient-to-b from-blue-900 to-gray-900 min-h-screen pt-16">
+        <div className="container mx-auto p-4">
+          <input
+            type="text"
+            placeholder="Search events..."
+            className="search-bar mt-4 p-2 border border-gray-300 rounded w-full max-w-md mx-auto"
+          />
+          <main>
+            <section className="mb-8">
+              <h2 className="text-2xl font-semibold text-white mb-4">
+                Featured Events
+              </h2>
+              <p className="text-gray-300">
+                No events available at the moment.
+              </p>
+            </section>
+            <section>
+              <h2 className="text-2xl font-semibold text-white mb-4">
+                Upcoming Events
+              </h2>
+              <ul className="list-disc list-inside text-gray-300">
+                <li>Event 1 - Date</li>
+                <li>Event 2 - Date</li>
+                <li>Event 3 - Date</li>
+              </ul>
+            </section>
+          </main>
+          <Footer />
+        </div>
       </div>
-      <main>
-        <section className="mb-8">
-          <h2 className="text-2xl font-semibold mb-4">Featured Events</h2>
-          <p className="text-gray-600">No events available at the moment.</p>
-        </section>
-        <section>
-          <h2 className="text-2xl font-semibold mb-4">Upcoming Events</h2>
-          <ul className="list-disc list-inside">
-            <li>Event 1 - Date</li>
-            <li>Event 2 - Date</li>
-            <li>Event 3 - Date</li>
-          </ul>
-        </section>
-        <Footer />
-      </main>
-    </div>
+    </>
   );
 }

app/page.tsx

@@ -1,5 +1,9 @@
 import Home from './Home';
 
 export default function Page() {
-  return <Home />;
+  return (
+    <>
+      <Home />
+    </>
+  );
 }