🐛 Fixed syntax error and hydration errors.

app/Home.tsx

@@ -1,23 +1,33 @@
+'use client';
+import { useEffect, useState } from 'react';
 import Header from '../components/custom/header';
 import Footer from '../components/custom/footer';
 import Test from '../components/scripts/Test';
 import MetaMask from '../components/scripts/MetaMask';
 
 export default function Home() {
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
   return (
     <>
       <Header />
       <div className="relative min-h-screen overflow-hidden">
         {/* Video Background */}
-        <video
+        {isClient && (
-          autoPlay
+          <video
-          loop
+            autoPlay
-          muted
+            loop
-          className="absolute inset-0 w-full h-full object-cover z-0"
+            muted
-          src="BGVid2.mp4"
+            className="absolute inset-0 w-full h-full object-cover z-0"
-        >
+            src="BGVid2.mp4"
-          Your browser does not support the video tag.
+          >
-        </video>
+            Your browser does not support the video tag.
+          </video>
+        )}
 
         {/* Dark Overlay for Enhanced Readability */}
         <div className="absolute inset-0 bg-black opacity-50 z-10"></div>
@@ -54,19 +64,8 @@ export default function Home() {
           </div>
         </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>
         <section className="mb-8">
           <Test />
         </section>
@@ -75,6 +74,6 @@ export default function Home() {
         </section>
         <Footer />
       </main>
-    </div>
+    </>
   );
 }

app/page.tsx

@@ -1,4 +1,3 @@
-import EventDescription from '@/components/custom/EventDescription';
 import Home from './Home';
 
 export default function Page() {

components/Profile.tsx

@@ -4,20 +4,12 @@ import { Button } from '@/components/ui/button';
 import {
   Card,
   CardContent,
-  CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
 } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
 import { motion } from 'framer-motion';
 
 // Dark theme and animation setup

components/custom/EventDescription.tsx

@@ -10,7 +10,7 @@ import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 import { Separator } from '@/components/ui/separator';
 import ImageCarousel from './ImageCarousel';
-import BuyTicket from './BuyTicket';
+// import BuyTicket from './BuyTicket';
 import TicketButton from './TicketButton';
 
 const EventDescription = () => {

components/custom/TicketButton.tsx

@@ -1,3 +1,4 @@
+'use client';
 import React, { useState } from 'react';
 import { Button } from '../ui/button'; // Adjust import path to where your shadcn Button component is located
 
@@ -20,7 +21,9 @@ const NumberPicker: React.FC<NumberPickerProps> = ({
     if (count < max) {
       const newCount = count + 1;
       setCount(newCount);
-      onChange && onChange(newCount);
+      if (onChange) {
+        onChange(newCount);
+      }
     }
   };
 
@@ -28,7 +31,9 @@ const NumberPicker: React.FC<NumberPickerProps> = ({
     if (count > min) {
       const newCount = count - 1;
       setCount(newCount);
-      onChange && onChange(newCount);
+      if (onChange) {
+        onChange(newCount);
+      }
     }
   };