refactor: replace video backgrounds with static images and update 404 page assets

app/not-found.tsx

@@ -5,7 +5,7 @@ import Image from "next/image";
 import { Button } from "@/components/ui/button";
 import { useState } from "react";
 import { Spinner } from "@/components/ui/spinner";
-import Background from "@/public/404.png";
+import Background from "@/public/background/404.png";
 import Profile from "@/public/404-image.jpg";
 import { Activity, Home } from "lucide-react";
 
@@ -13,7 +13,7 @@ const MESSAGES = [
   "Erika กินหน้านี้ไปแล้ว...",
   "หรือจริงๆแล้วหน้านี้จะโดน Sukuna เล่น...",
   "อาจจะโดนต่อยจากคนด้านบนแล้วก็ได้...",
-  "หรือ Erika ตัวปลอมขะมีอยู่จริง...",
+  "หรือ Erika ตัวปลอมจะมีอยู่จริง...",
   "หน้านี้อาจโดนErikaตัวปลอมทำลายไปแล้วนะ...",
 ];
 

app/page.tsx

@@ -7,6 +7,7 @@ import { getRedisClient } from "@/lib/redis";
 import { headers } from "next/headers";
 import { Users } from "lucide-react";
 import { Kbd } from "@/components/ui/kbd";
+import Background from "@/public/background/space.webp";
 
 export default async function Home() {
   const { counts, tiktokProfile } = await getFollowerCounts();
@@ -34,7 +35,7 @@ export default async function Home() {
   }
 
   // Use TikTok profile data with config fallbacks
-  const profileName = tiktokProfile.displayName || config.profile.name;
+  const profileName = config.profile.name;
   const profileAvatar = config.profile.avatar;
 
   const links1 = [...config.links];
@@ -55,15 +56,18 @@ export default async function Home() {
 
 
   return (
-    <main className="flex min-h-screen flex-col items-center justify-center p-4">
+    <main className="flex min-h-screen flex-col items-center justify-center">
       <script
         type="application/ld+json"
         dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
       />
-      <video className="fixed top-0 left-0 w-full h-full -z-10 object-cover" autoPlay muted loop playsInline preload="none">
-        <source src="/background/erika.mp4" media="(min-width: 768px)"></source>
-        <source src="/background/erika-mb.mp4" media="(max-width: 767px)"></source>
-      </video>
+      <Image
+        src={Background}
+        alt="Background"
+        fill
+        priority
+        className="fixed top-0 left-0 z-[-1] h-full w-full object-cover opacity-60"
+      />
       <Card className="w-full max-w-sm overflow-hidden relative border-0 bg-black/20 md:bg-card md:border md:max-w-lg" role="article">
         <CardHeader className="flex flex-col items-center gap-4 text-center">
           <div className="relative w-24 h-24 overflow-hidden rounded-full">