From c418aa9a1c65611b2e4a90a692868360cec42e98 Mon Sep 17 00:00:00 2001
From: sid <35936587+siddharth-shringarpure@users.noreply.github.com>
Date: Fri, 25 Oct 2024 13:23:13 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Update=20home=20page=20design?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/Home.tsx | 41 ++++++++++++++++++++++++-----------------
 1 file changed, 24 insertions(+), 17 deletions(-)

diff --git a/app/Home.tsx b/app/Home.tsx
index 10f3b4b..652b1f6 100644
--- a/app/Home.tsx
+++ b/app/Home.tsx
@@ -1,44 +1,51 @@
 export default function Home() {
   return (
-    <div className="container">
-      <header className="header">
-        <title>Event Chain</title>
-        <h1 className="text-8xl text-center text-blue-700" >Ticket Chain</h1>
-        <nav className="nav">
-          <ul>
+    <div className="container mx-auto p-4">
+      <header className="header text-center mb-8">
+        <h1 className="text-4xl font-bold text-blue-700">Ticket Chain</h1>
+        <nav className="nav mt-4">
+          <ul className="flex justify-center space-x-4">
             <li>
-              <a href="/">Home</a>
+              <a href="/" className="text-blue-500 hover:text-blue-700">
+                Home
+              </a>
             </li>
             <li>
-              <a href="/events">Events</a>
+              <a href="/events" className="text-blue-500 hover:text-blue-700">
+                Events
+              </a>
             </li>
             <li>
-              <a href="/contact">Contact</a>
+              <a href="/contact" className="text-blue-500 hover:text-blue-700">
+                Contact
+              </a>
             </li>
           </ul>
         </nav>
         <input
           type="text"
           placeholder="Search events..."
-          className="search-bar"
+          className="search-bar mt-4 p-2 border border-gray-300 rounded w-full max-w-md mx-auto"
         />
       </header>
       <main>
-        <section>
-          <h2>Featured Events</h2>
-          <p>No events available at the moment.</p>
+        <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>Upcoming Events</h2>
-          <ul>
+          <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>
       </main>
-      <footer>
-        <p>&copy; 2024 Ticket Chain. All rights reserved.</p>
+      <footer className="text-center mt-8">
+        <p className="text-gray-500">
+          &copy; 2024 Ticket Chain. All rights reserved.
+        </p>
       </footer>
     </div>
   );