started work on HomePage

frontend/src/App.css

@@ -1,42 +1,15 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
+/* For Early Gameboy font */
+@font-face {
+  font-family: 'Early Gameboy';
+  src: url('./fonts/earlyGameboy.ttf')
+  font-weight: normal;
+  font-style: normal;
+}
+
+/* For Flipps Regular font */
+@font-face {
+  font-family: 'Flipps Regular';
+  src: url('./fonts/flippsRegular.otf')
+  font-weight: normal;
+  font-style: normal;
 }

frontend/src/components/home/Home.tsx

@@ -1,13 +1,47 @@
-import { Link } from "react-router-dom";
+import background from "../../../public/background.jpg";
+import howtocontribute from "../../../public/howtocontribute.png";
+import p1 from "../../../public/p1.png";
+import p2 from "../../../public/p2.png";
+import p3 from "../../../public/p3.png";
+import p4 from "../../../public/p4.png";
+import p5 from "../../../public/p5.png";
+import p6 from "../../../public/p6.png";
+import p7 from "../../../public/p7.png";
+import p8 from "../../../public/p8.png";
+
+const pokemonImages = [p1, p2, p3, p4, p5, p6, p7, p8];
+
 const Home = () => {
   return (
-    <div className="min-h-screen bg-cover bg-center bg-[url('https://i.pinimg.com/originals/2a/77/4d/2a774d34ddacf4a4b049721da7e1fe7f.gif')]">
-      <h1 className="text-black font-bold text-3xl flex justify-center items-center">
-        Welcome to Open Sorcerer Developers Community
-      </h1>
-      <button className="m-10 p-2 bg-blue-500 text-white rounded-lg">
-        <Link to="../hallofame">Test</Link>
-      </button>
+    <div
+      className="min-h-screen bg-cover bg-center flex justify-center items-center relative overflow-hidden"
+      style={{ backgroundImage: `url(${background})` }}
+    >
+      {/* Images scattered around */}
+      <div className="flex flex-col items-center justify-center absolute inset-0 pointer-events-none">
+      <div className="">
+      <h1 className="text-white text-4xl font-earlyGameboy mb-4">OSDC PRESENTS</h1>
+      <h1 className="text-white text-6xl font-flippsRegular mb-4">PokeArcadia</h1>
+      </div>
+        {pokemonImages.map((image, index) => (
+          <img
+            key={index}
+            src={image}
+            alt={`Pokemon ${index + 1}`}
+            className="w-24 h-24 m-2 opacity-75 transition-transform animate-pokemon"
+            style={{
+              position: 'absolute',
+              left: `${Math.random() * 90}vw`,
+              top: `${Math.random() * 90}vh`,
+              zIndex: 1,
+            }}
+          />
+        ))}
+      </div>
+      {/* Centered text and image */}
+      <div className="">
+        <img className="mt-4" src={howtocontribute} alt="How to Contribute" />
+      </div>
     </div>
   );
 };