some cool changes

src/app/globals.css

@@ -4,4 +4,5 @@
 
 :root {
   --background: #0F0A1F;
+  --primary: #FFA826;
 }

src/app/page.tsx

@@ -1,6 +1,8 @@
 import { ExpirationDate } from "@/components/expiration-date";
 import { NolaGlitchClientOnly } from "@/components/nola-glitch";
+import { Sosmed } from "@/components/sosmed";
 import Image from "next/image";
+import Link from "next/link";
 
 export default function Home() {
   return (
@@ -17,10 +19,12 @@ export default function Home() {
             alt="Spining ENA <3"
             src="https://media.tenor.com/1BCeG1aTiBAAAAAd/temptation-stairway-ena.gif"
             width={200}
-            height={200}  
+            height={200}
+            unoptimized
           />
         </noscript>
         <NolaGlitchClientOnly />
+        <Sosmed />
         <article className="space-y-6 leading-relaxed">
           <p>What? what are you expecting specifically on this base page?</p>
           <p>
@@ -29,7 +33,7 @@ export default function Home() {
           <p>This domain will active until <ExpirationDate /></p>
         </article>
         <section className="my-8">
-          <p>⚡ Powered with <a href="https://www.cloudflare.com/" target="_blank" className="text-[#F48120] underline">Cloudflare</a> ☁️</p>
+          <p>⚡ Powered with <Link href="https://www.cloudflare.com/" target="_blank" className="text-[#F48120] underline">Cloudflare</Link> ☁️</p>
         </section>
         <footer className="mt-20 text-center">
           <p>&copy; <span className="text-sm">2024-2025 Nomi Nonsense</span></p>

src/components/nola-glitch.tsx

@@ -1,6 +1,7 @@
 'use client'
 
 import { useEffect, useRef, useState } from "react";
+import Image from "next/image";
 
 export const NolaGlitch = () => {
   const ascii = useRef<HTMLDivElement>(null);
@@ -93,17 +94,28 @@ export const NolaGlitch = () => {
 }
 
 export const NolaGlitchClientOnly = () => {
-  const [isClient, setIsClient] = useState(false);
+  const [willTheyLucky, setLucky] = useState(false);
+  const probability = 8;
 
   useEffect(() => {
-    setIsClient(true);
+    const rand = Math.floor(Math.random() * probability)
+    setLucky(rand == 1);
   }, []);
 
-  if (!isClient) {
-    return null;
+  if (!willTheyLucky) {
+    return (
+      <Image
+        className="mb-12 mx-auto"
+        alt="Spining ENA <3"
+        src="https://media.tenor.com/1BCeG1aTiBAAAAAd/temptation-stairway-ena.gif"
+        width={200}
+        height={200}
+        unoptimized
+      />
+    )
   }
 
-  return <div className="text-[9px] mb-4 leading-[0.8rem] h-[320px] text-center">
+  return <div className="text-[6px] xs:text-[9px] leading-[0.53rem] xs:leading-[0.8rem] h-[230px] xs:h-[320px] text-center max-w-[240px] xs:max-w-max mx-auto">
     <NolaGlitch />
   </div>
 }

src/components/sosmed.tsx

@@ -0,0 +1,51 @@
+'use client'
+
+import { Icon } from "@iconify/react";
+import Link from "next/link";
+
+const sosmeds =  [
+  {
+    name: 'x',
+    url: 'https://x.com/_nomi_nonsz',
+    icon: 'pajamas:twitter',
+    size: 'text-3xl'
+  },
+  {
+    name: 'facebook',
+    url: 'https://www.facebook.com/nominonsense/',
+    icon: 'mdi:facebook'
+  },
+  {
+    name: 'github',
+    url: 'https://github.com/nomi-nonsz/',
+    icon: 'mdi:github'
+  },
+  {
+    name: 'reddit',
+    url: 'https://www.reddit.com/user/_nomi_nonsz',
+    icon: 'mdi:reddit'
+  },
+  {
+    name: 'itch',
+    url: 'https://nomi-nonsense.itch.io/',
+    icon: 'cib:itch-io',
+    size: 'text-3xl'
+  },
+]
+
+export const Sosmed = () => {
+  return (
+    <div className="flex justify-center gap-3 mb-10">
+      {sosmeds.map((sosmed) => (
+        <Link
+          className="grid items-center justify-center border border-primary w-[48px] xs:w-[52px] h-auto aspect-square transition-[transform] duration-75 hover:-translate-y-1"
+          href={sosmed.url}
+          target="_blank"
+          key={sosmed.name}
+        >
+          <Icon icon={sosmed.icon} className={`text-primary text-4xl ${sosmed.size}`} />
+        </Link>
+      ))}
+    </div>
+  )
+}