merging changes with initial branch

components/custom/footer.tsx

@@ -0,0 +1,12 @@
+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>
+    </footer>
+  );
+};
+export default Footer;

components/custom/header.tsx

@@ -0,0 +1,64 @@
+'use client';
+import React, { useState } from 'react';
+import Link from 'next/link';
+
+const Header = () => {
+  const [mouseX, setMouseX] = useState(0);
+  const [mouseY, setMouseY] = useState(0);
+
+  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
+    setMouseX(e.clientX);
+    setMouseY(e.clientY);
+  };
+
+  return (
+    <div
+      className="fixed top-0 left-0 right-0 backdrop-blur-md bg-opacity-60 z-50"
+      onMouseMove={handleMouseMove}
+    >
+      <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%)`,
+          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>
+        <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">
+                  Home
+                </a>
+              </Link>
+            </li>
+            <li>
+              <Link href="/events" legacyBehavior>
+                <a className="text-white hover:text-blue-500 transition-colors duration-300">
+                  Events
+                </a>
+              </Link>
+            </li>
+            <li>
+              <Link href="/contact" legacyBehavior>
+                <a className="text-white hover:text-blue-500 transition-colors duration-300">
+                  Contact
+                </a>
+              </Link>
+            </li>
+            <li>
+              <button className="bg-gradient-to-r from-blue-500 to-indigo-700 text-white px-4 py-1 rounded-full transform transition-transform duration-300 hover:scale-105 shadow-lg hover:shadow-2xl">
+                Login
+              </button>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+  );
+};
+
+export default Header;

components/scripts/MetaMask.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import React, { useEffect } from 'react';
+
+const MetaMask = () => {
+  const isMetaMaskInstalled = () =>
+    typeof (window as { ethereum?: unknown }).ethereum !== 'undefined';
+
+  useEffect(() => {
+    console.log('Print something');
+  }, []);
+
+  // TODO FIX! This is not working :(
+  const metaMaskInstalled = isMetaMaskInstalled();
+  //console.log(metaMaskInstalled);
+
+  return (
+    <div className="text-center p-4">
+      {metaMaskInstalled ? (
+        <button className="bg-blue-500 text-white px-4 py-2 rounded">
+          Connect Wallet
+        </button>
+      ) : (
+        <p>MetaMask not detected</p>
+      )}
+    </div>
+  );
+};
+
+export default MetaMask;

components/scripts/Test.tsx

@@ -0,0 +1,16 @@
+'use client';
+import React, { useEffect } from 'react';
+
+const Test = () => {
+  useEffect(() => {
+    console.log('Print some shit');
+  }, []);
+
+  return (
+    <div>
+      <p>Hellao!</p>
+    </div>
+  );
+};
+
+export default Test;