✨ Update home page design

app/Home.tsx

@@ -1,44 +1,51 @@
 export default function Home() {
   return (
-    <div className="container">
+    <div className="container mx-auto p-4">
-      <header className="header">
+      <header className="header text-center mb-8">
-        <title>Event Chain</title>
+        <h1 className="text-4xl font-bold text-blue-700">Ticket Chain</h1>
-        <h1 className="text-8xl text-center text-blue-700" >Ticket Chain</h1>
+        <nav className="nav mt-4">
-        <nav className="nav">
+          <ul className="flex justify-center space-x-4">
-          <ul>
             <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>
+        <section className="mb-8">
-          <h2>Featured Events</h2>
+          <h2 className="text-2xl font-semibold mb-4">Featured Events</h2>
-          <p>No events available at the moment.</p>
+          <p className="text-gray-600">No events available at the moment.</p>
         </section>
         <section>
-          <h2>Upcoming Events</h2>
+          <h2 className="text-2xl font-semibold mb-4">Upcoming Events</h2>
-          <ul>
+          <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>
+      <footer className="text-center mt-8">
-        <p>&copy; 2024 Ticket Chain. All rights reserved.</p>
+        <p className="text-gray-500">
+          &copy; 2024 Ticket Chain. All rights reserved.
+        </p>
       </footer>
     </div>
   );