finished conflicts in future merges after last components branch commit

components/custom/EventDescription.tsx

@@ -1,4 +1,3 @@
-'use client';
 import React from 'react';
 import {
   Card,
@@ -10,10 +9,16 @@ 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 TicketButton from './TicketButton';
+import { buyHandler } from '@/lib/buyHandler';
+import { useToast } from '@/hooks/use-toast';
+
+const EventDescription = ({ eventId }: { eventId: string }) => {
+  const { toast } = useToast();
+  const handleBuyNow = () => {
+    buyHandler(Number(eventId), toast);
+  };
 
-const EventDescription = () => {
   return (
     <Card className="pt-10 pb-16 px-6 bg-gradient-to-r from-blue-50 to-gray-50 rounded-xl shadow-lg max-w-4xl mx-auto">
       <CardHeader className="flex flex-col items-start space-y-4">
@@ -48,6 +53,7 @@ const EventDescription = () => {
         <Button
           variant="default"
           className="w-full md:w-auto bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold rounded-lg hover:from-blue-600 hover:to-purple-700"
+          onClick={handleBuyNow}
         >
           Buy now Using MetaMask
         </Button>

components/custom/FeaturedEvent.tsx

@@ -0,0 +1,51 @@
+'use client';
+import React from 'react';
+import {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from '@/components/ui/card';
+
+interface props {
+  name: string;
+  description: string;
+  location: string;
+  eventStartDate: number;
+  eventHost: string;
+  imageURL: string | null;
+}
+
+const FeaturedEvent = ({
+  name,
+  description,
+  location,
+  eventStartDate,
+  eventHost,
+  imageURL,
+}: props) => {
+  return (
+    <Card>
+      <CardHeader>
+        {imageURL && <img src={imageURL} alt={name}></img>}
+        <CardTitle>{name}</CardTitle>
+        <CardDescription>
+          {location}
+          <br />
+          {new Date(eventStartDate * 1000).toLocaleString()}
+        </CardDescription>
+      </CardHeader>
+      <CardContent>{description}</CardContent>
+      <CardFooter>
+        <i>
+          Host: {eventHost.substring(0, 8)}...
+          {eventHost.substring(eventHost.length - 3)}
+        </i>
+      </CardFooter>
+    </Card>
+  );
+};
+
+export default FeaturedEvent;

components/custom/footer.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 const Footer = () => {
   return (
     <footer className="text-center mt-8">
-      <p className="text-gray-500">
-        &copy; 2024 Ticket Chain. All rights reserved.
+      <p className="text-light-purple text-opacity-75">
+        &copy; 2024 TicketChain. All rights reserved.
       </p>
     </footer>
   );

components/custom/header.tsx

@@ -4,48 +4,70 @@ import Link from 'next/link';
 import MetaMask from '../scripts/MetaMask';
 
 const Header = () => {
-  const [mouseX, setMouseX] = useState(0);
-  const [mouseY, setMouseY] = useState(0);
+  const [mouseX, setMouseX] = useState(-1);
+  const [mouseY, setMouseY] = useState(-1);
 
   const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
     setMouseX(e.clientX);
     setMouseY(e.clientY);
   };
 
+  const handleMouseLeave = () => {
+    setMouseX(-1);
+    setMouseY(-1);
+  };
+
   return (
     <div
       className="fixed top-0 left-0 right-0 backdrop-blur-md bg-opacity-60 z-50"
       onMouseMove={handleMouseMove}
+      onMouseLeave={handleMouseLeave}
     >
       <div
         className="absolute inset-0 pointer-events-none"
         style={{
           border: '1px solid transparent',
-          background: `radial-gradient(circle at ${mouseX}px ${mouseY}px, rgba(255, 255, 255, 0.4), transparent 20%)`,
+          background:
+            mouseX >= 0 && mouseY >= 0
+              ? `radial-gradient(circle at ${mouseX}px ${mouseY}px, rgba(255, 255, 255, 0.4), transparent 20%)`
+              : 'none',
           backgroundClip: 'padding-box, border-box',
         }}
       ></div>
-      <div className="container mx-auto px-6 py-5 flex justify-between items-center">
-        <h1 className="text-2xl font-bold text-white">Ticket Chain</h1>
+      <div className="container mx-auto px-6 py-4 flex justify-between items-center">
+        <Link href="/" legacyBehavior>
+          <a className="text-2xl font-semibold text-white hover:text-light-purple hover:text-opacity-75 transition-colors duration-300">
+            TicketChain
+          </a>
+        </Link>
         <nav className="nav">
           <ul className="flex space-x-6">
             <li>
               <Link href="/" legacyBehavior>
-                <a className="text-white hover:text-blue-500 transition-colors duration-300">
+                <a
+                  className="text-white hover:text-light-purple hover:text-opacity-75 transition-colors duration-300"
+                  style={{ textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)' }}
+                >
                   Home
                 </a>
               </Link>
             </li>
             <li>
               <Link href="/events" legacyBehavior>
-                <a className="text-white hover:text-blue-500 transition-colors duration-300">
+                <a
+                  className="text-white hover:text-light-purple hover:text-opacity-75 transition-colors duration-300"
+                  style={{ textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)' }}
+                >
                   Events
                 </a>
               </Link>
             </li>
             <li>
               <Link href="/contact" legacyBehavior>
-                <a className="text-white hover:text-blue-500 transition-colors duration-300">
+                <a
+                  className="text-white hover:text-light-purple hover:text-opacity-75 transition-colors duration-300"
+                  style={{ textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)' }}
+                >
                   Contact
                 </a>
               </Link>