Resolving Conflict

app/Home.tsx

@@ -1,40 +1,36 @@
 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() {
   return (
-    <>
+    <div className="container mx-auto p-4">
-      <Header />
+      <div>
-      <div className="bg-gradient-to-b from-blue-900 to-gray-900 min-h-screen pt-16">
+        <Header />
-        <div className="container mx-auto p-4">
+        {/* Other page content */}
-          <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"
-          />
-          <main>
-            <section className="mb-8">
-              <h2 className="text-2xl font-semibold text-white mb-4">
-                Featured Events
-              </h2>
-              <p className="text-gray-300">
-                No events available at the moment.
-              </p>
-            </section>
-            <section>
-              <h2 className="text-2xl font-semibold text-white mb-4">
-                Upcoming Events
-              </h2>
-              <ul className="list-disc list-inside text-gray-300">
-                <li>Event 1 - Date</li>
-                <li>Event 2 - Date</li>
-                <li>Event 3 - Date</li>
-              </ul>
-            </section>
-          </main>
-          <Footer />
-        </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>
+        <section className="mb-8">
+          <MetaMask />
+        </section>
+        <Footer />
+      </main>
+    </div>
   );
 }

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;