add some new fun things

src/pages/App.tsx

@@ -1,11 +1,12 @@
 import { useState } from "react";
 import Layout from "../components/Layout";
 import Overlay from "../components/Overlay";
-import MusicComponent from "../components/MusicComponent";
-import TVComponent from "../components/TVComponent";
-import GameComponent from "../components/GameComponent";
-import FantasyStatus from "../components/FantasyStatus";
+import GameComponent from "../components/info/GameComponent";
 import PictureCarousel from "../components/modules/PictureCarousel";
+import InfoModule from "../components/modules/InfoModule";
+import WelcomeModule from "../components/modules/WelcomeModule";
+import FantasyStatus from "../components/FantasyStatus";
+import ScoreModule from "../components/modules/ScoreModule";
 
 export default function App() {
   const [selectedImage, setSelectedImage] = useState<string>("");
@@ -14,80 +15,34 @@ export default function App() {
     <Layout>
       {selectedImage !== "" && (
         <Overlay onClose={() => setSelectedImage("")}>
-          <img
-            draggable={false}
-            className="select-none"
-            width="400"
-            height="400"
-            src={selectedImage}
-          />
+          <div className="flex justify-center items-center w-full h-full">
+            <img
+              draggable={false}
+              className="select-none"
+              width="400"
+              height="400"
+              src={selectedImage}
+            />
+          </div>
         </Overlay>
       )}
 
-      <div className="my-2 space-y-4">
-        <PictureCarousel onClick={(url) => setSelectedImage(url)} />
+      <div className="my-2 flex flex-col items-center sm:justify-center">
+        <div className="space-y-4 sm:w-[500px]">
+          <img
+            className="rounded-lg"
+            src={
+              "https://storage.alexav.gg/content/55f3eca0-a5a9-4c71-9d92-ba5d669a7a0c.jpg"
+            }
+          />
 
-        <div className="border border-white border-solid p-2 rounded-lg flex justify-between">
-          <h1 className="text-2xl font-bold">welcome to my site !</h1>
+          <WelcomeModule />
+          <InfoModule />
+          <PictureCarousel onClick={(url) => setSelectedImage(url)} />
+          <GameComponent />
+          <ScoreModule type={"bills"} />
+          <FantasyStatus />
         </div>
-        <GameComponent />
-
-        <div className="border border-white border-solid rounded-lg p-2">
-          <div className="flex flex-wrap justify-between p-2 space-y-2">
-            <div>
-              <h1 className="text-2xl font-bold italic opacity-95">alex, 18</h1>
-              <img
-                src="https://storage.alexav.gg/content/yeehaw.jpg"
-                className="rounded-md w-[150px] h-[110px] object-cover object-left-top"
-                alt="Profile"
-              />
-              <div className="pt-2">
-                <MusicComponent />
-                <a
-                  href="https://last.fm/user/lulawex"
-                  target="_blank"
-                  className="hover:underline w-fit opacity-50"
-                >
-                  powered by last.fm
-                </a>
-              </div>
-            </div>
-            <div>
-              <h1 className="font-bold text-2xl italic">what i do</h1>
-              <p>
-                qa @{" "}
-                <a
-                  href="https://medal.tv"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="hover:underline text-[#bff83e]"
-                >
-                  medal.tv
-                </a>
-                , game, code
-              </p>
-              <h1
-                className="italic opacity-50 font-semibold underline"
-                onClick={() =>
-                  navigator.clipboard.writeText("alex@vierfrantz.com")
-                }
-              >
-                alex@vierfrantz.com
-              </h1>
-
-              <hr className="my-2" />
-
-              <h1 className="font-bold text-2xl italic">obsessed with</h1>
-              <p>dexter, tlou, twd</p>
-
-              <hr className="my-2" />
-
-              <h1 className="font-bold text-2xl italic">status</h1>
-              <TVComponent />
-            </div>
-          </div>
-        </div>
-        <FantasyStatus />
       </div>
     </Layout>
   );