Merge pull request #19 from Ayush272002/sid-visual-fixes

✨Enhanced search bar.

app/page.tsx

@@ -2,6 +2,7 @@
 import { useEffect, useState } from 'react';
 import Header from '../components/custom/header';
 import Footer from '../components/custom/footer';
+import { Input } from '@/components/ui/input';
 
 export default function Home() {
   const [isClient, setIsClient] = useState(false);
@@ -33,12 +34,15 @@ export default function Home() {
         {/* Page Content Over the Video */}
         <div className="relative z-20 min-h-screen bg-gradient-to-b from-transparent to-gray-900 pt-16">
           <div className="container mx-auto p-4">
-            <input
+            <div className="flex items-center justify-center">
+              <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"
+                className="search-bar mt-4 p-2 border bg-white bg-opacity-25 border-gray-300 rounded-xl w-full max-w-5xl text-white"
               />
+            </div>
             <main>
+              <br></br>
               <section className="mb-8">
                 <h2 className="text-2xl font-semibold text-white mb-4">
                   Featured Events