chore: cleanup

packages/frontend/src/routes/+error.svelte

@@ -2,8 +2,8 @@
   import { _ } from "svelte-i18n";
   import { page } from "$app/state";
   import { Button } from "$lib/components/ui/button";
-  import PeonyIcon from "$lib/components/icon/peony-icon.svelte";
-  import PeonyBackground from "$lib/components/background/peony-background.svelte";
+  import SexyIcon from "$lib/components/icon/icon.svelte";
+  import SexyBackground from "$lib/components/background/background.svelte";
   import Meta from "$lib/components/meta/meta.svelte";
 </script>
 
@@ -15,78 +15,75 @@
 <div
   class="relative min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-primary/5 to-accent/5 overflow-hidden"
 >
-  <PeonyBackground />
+  <SexyBackground />
 
   <!-- Content -->
   <div class="relative z-10 container mx-auto px-4 text-center">
     <div class="max-w-2xl mx-auto">
       <div class="py-12">
-          <!-- 404 Animation -->
-          <div class="mb-8">
-            <div
-              class="text-8xl md:text-9xl font-bold bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent animate-pulse"
+        <!-- 404 Animation -->
+        <div class="mb-8">
+          <div
+            class="text-8xl md:text-9xl font-bold bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent animate-pulse"
+          >
+            {page.status}
+          </div>
+          <div class="flex justify-center mt-4">
+            <SexyIcon class="w-16 h-16 text-primary/60 animate-bounce" />
+          </div>
+        </div>
+
+        <!-- Error Message -->
+        <div class="space-y-6 mb-10">
+          <h1 class="text-4xl md:text-5xl font-bold text-foreground">
+            {page.status === 404 ? $_("error.not_found") : $_("error.common")}
+          </h1>
+          <p class="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
+            {$_("error.description")}
+          </p>
+        </div>
+
+        <!-- Action Buttons -->
+        <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
+          <Button
+            size="lg"
+            class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90 text-lg px-8 py-6"
+            href="/"
+          >
+            <span class="icon-[ri--home-2-line]"></span>
+            {$_("error.go_home")}
+          </Button>
+
+          <Button
+            variant="outline"
+            size="lg"
+            class="text-lg px-8 py-6 border-primary/50 hover:bg-primary/10"
+            href="/videos"
+          >
+            <span class="icon-[ri--search-line]"></span>
+            {$_("error.explore_videos")}
+          </Button>
+        </div>
+
+        <!-- Quick Links -->
+        <div class="mt-8 pt-8 border-t border-border/50">
+          <p class="text-sm text-muted-foreground mb-4">
+            {$_("error.quick_links")}
+          </p>
+          <div class="flex flex-wrap justify-center gap-3">
+            <button class="text-sm text-primary hover:text-accent transition-colors hover:underline"
+              ><a href="/models">{$_("error.featured_models")}</a></button
             >
-              {page.status}
-            </div>
-            <div class="flex justify-center mt-4">
-              <PeonyIcon class="w-16 h-16 text-primary/60 animate-bounce" />
-            </div>
-          </div>
-
-          <!-- Error Message -->
-          <div class="space-y-6 mb-10">
-            <h1 class="text-4xl md:text-5xl font-bold text-foreground">
-              {page.status === 404 ? $_("error.not_found") : $_("error.common")}
-            </h1>
-            <p class="text-xl text-muted-foreground leading-relaxed max-w-2xl mx-auto">
-              {$_("error.description")}
-            </p>
-          </div>
-
-          <!-- Action Buttons -->
-          <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
-            <Button
-              size="lg"
-              class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90 text-lg px-8 py-6"
-              href="/"
+            <span class="text-muted-foreground">•</span>
+            <button class="text-sm text-primary hover:text-accent transition-colors hover:underline"
+              ><a href="/magazine">{$_("error.magazine")}</a></button
             >
-              <span class="icon-[ri--home-2-line]"></span>
-              {$_("error.go_home")}
-            </Button>
-
-            <Button
-              variant="outline"
-              size="lg"
-              class="text-lg px-8 py-6 border-primary/50 hover:bg-primary/10"
-              href="/videos"
+            <span class="text-muted-foreground">•</span>
+            <button class="text-sm text-primary hover:text-accent transition-colors hover:underline"
+              ><a href="/about">{$_("error.about_us")}</a></button
             >
-              <span class="icon-[ri--search-line]"></span>
-              {$_("error.explore_videos")}
-            </Button>
-          </div>
-
-          <!-- Quick Links -->
-          <div class="mt-8 pt-8 border-t border-border/50">
-            <p class="text-sm text-muted-foreground mb-4">
-              {$_("error.quick_links")}
-            </p>
-            <div class="flex flex-wrap justify-center gap-3">
-              <button
-                class="text-sm text-primary hover:text-accent transition-colors hover:underline"
-                ><a href="/models">{$_("error.featured_models")}</a></button
-              >
-              <span class="text-muted-foreground">•</span>
-              <button
-                class="text-sm text-primary hover:text-accent transition-colors hover:underline"
-                ><a href="/magazine">{$_("error.magazine")}</a></button
-              >
-              <span class="text-muted-foreground">•</span>
-              <button
-                class="text-sm text-primary hover:text-accent transition-colors hover:underline"
-                ><a href="/about">{$_("error.about_us")}</a></button
-              >
-            </div>
           </div>
+        </div>
       </div>
     </div>
   </div>

packages/frontend/src/routes/about/+page.svelte

@@ -3,7 +3,7 @@
   import { Button } from "$lib/components/ui/button";
   import { Card, CardContent } from "$lib/components/ui/card";
   import Meta from "$lib/components/meta/meta.svelte";
-  import PeonyBackground from "$lib/components/background/peony-background.svelte";
+  import SexyBackground from "$lib/components/background/background.svelte";
 
   const { data } = $props();
 
@@ -74,7 +74,7 @@
 <div
   class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5 overflow-hidden"
 >
-  <PeonyBackground />
+  <SexyBackground />
 
   <!-- Hero Section -->
   <section class="relative py-20 overflow-hidden">

packages/frontend/src/routes/faq/+page.svelte

@@ -4,7 +4,7 @@
   import { Card, CardContent, CardHeader, CardTitle } from "$lib/components/ui/card";
   import { Input } from "$lib/components/ui/input";
   import { Button } from "$lib/components/ui/button";
-  import PeonyBackground from "$lib/components/background/peony-background.svelte";
+  import SexyBackground from "$lib/components/background/background.svelte";
   import Meta from "$lib/components/meta/meta.svelte";
 
   let searchQuery = $state("");
@@ -182,7 +182,7 @@
 <div
   class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5 overflow-hidden"
 >
-  <PeonyBackground />
+  <SexyBackground />
 
   <div class="container mx-auto py-20 relative px-4">
     <!-- Header -->

packages/frontend/src/routes/imprint/+page.svelte

@@ -2,7 +2,7 @@
   import { _ } from "svelte-i18n";
   import { Card, CardContent, CardHeader, CardTitle } from "$lib/components/ui/card";
   import { Separator } from "$lib/components/ui/separator";
-  import PeonyBackground from "$lib/components/background/peony-background.svelte";
+  import SexyBackground from "$lib/components/background/background.svelte";
   import Meta from "$lib/components/meta/meta.svelte";
 </script>
 
@@ -11,7 +11,7 @@
 <div
   class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5 overflow-hidden"
 >
-  <PeonyBackground />
+  <SexyBackground />
 
   <div class="container mx-auto py-20 relative px-4">
     <div class="max-w-4xl mx-auto">

packages/frontend/src/routes/leaderboard/+page.svelte

@@ -5,7 +5,7 @@
   import { Avatar, AvatarImage, AvatarFallback } from "$lib/components/ui/avatar";
   import { getAssetUrl } from "$lib/api";
   import Meta from "$lib/components/meta/meta.svelte";
-  import PeonyBackground from "$lib/components/background/peony-background.svelte";
+  import SexyBackground from "$lib/components/background/background.svelte";
 
   const { data } = $props();
 
@@ -45,7 +45,7 @@
 />
 
 <div class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5">
-  <PeonyBackground />
+  <SexyBackground />
 
   <div class="container mx-auto px-4 py-8 relative z-10">
     <!-- Header -->

packages/frontend/src/routes/legal/+page.svelte

@@ -3,7 +3,7 @@
   import { Card, CardContent, CardHeader, CardTitle } from "$lib/components/ui/card";
   import { Tabs, TabsContent, TabsList, TabsTrigger } from "$lib/components/ui/tabs";
   import { Separator } from "$lib/components/ui/separator";
-  import PeonyBackground from "$lib/components/background/peony-background.svelte";
+  import SexyBackground from "$lib/components/background/background.svelte";
   import Meta from "$lib/components/meta/meta.svelte";
 
   let activeTab = $state("privacy");
@@ -14,7 +14,7 @@
 <div
   class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5 overflow-hidden"
 >
-  <PeonyBackground />
+  <SexyBackground />
 
   <div class="container mx-auto py-20 relative px-4">
     <div class="max-w-4xl mx-auto">

packages/frontend/src/routes/login/+page.svelte

@@ -14,7 +14,7 @@
   import { goto } from "$app/navigation";
   import { login } from "$lib/services";
   import { onMount } from "svelte";
-  import PeonyBackground from "$lib/components/background/peony-background.svelte";
+  import SexyBackground from "$lib/components/background/background.svelte";
   import Meta from "$lib/components/meta/meta.svelte";
   import Logo from "$lib/components/logo/logo.svelte";
 
@@ -55,7 +55,7 @@
 <div
   class="relative min-h-screen flex items-center justify-center bg-gradient-to-br from-primary/5 via-accent/5 to-background p-4 overflow-hidden"
 >
-  <PeonyBackground />
+  <SexyBackground />
 
   <div class="w-full max-w-md">
     <!-- Logo -->

packages/frontend/src/routes/magazine/[slug]/+page.svelte

@@ -7,7 +7,7 @@
   import TimeAgo from "javascript-time-ago";
   import { getAssetUrl } from "$lib/api";
   import Meta from "$lib/components/meta/meta.svelte";
-  import PeonyBackground from "$lib/components/background/peony-background.svelte";
+  import SexyBackground from "$lib/components/background/background.svelte";
   import SharingPopupButton from "$lib/components/sharing-popup/sharing-popup-button.svelte";
   import { marked } from "marked";
 
@@ -25,7 +25,7 @@
 <div
   class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5 overflow-hidden"
 >
-  <PeonyBackground />
+  <SexyBackground />
 
   <div class="container mx-auto px-4 py-8">
     <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">

packages/frontend/src/routes/me/+page.svelte

@@ -11,7 +11,7 @@
   import { Tabs, TabsContent, TabsList, TabsTrigger } from "$lib/components/ui/tabs";
   import { Input } from "$lib/components/ui/input";
   import { Label } from "$lib/components/ui/label";
-  import PeonyBackground from "$lib/components/background/peony-background.svelte";
+  import SexyBackground from "$lib/components/background/background.svelte";
   import { onMount } from "svelte";
   import { goto, invalidateAll } from "$app/navigation";
   import { getAssetUrl, isModel } from "$lib/api";
@@ -202,7 +202,7 @@
 <div
   class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5 overflow-hidden"
 >
-  <PeonyBackground />
+  <SexyBackground />
   <div class="container mx-auto px-4 py-8">
     <!-- Header -->
     <div class="flex items-center justify-between mb-6">

packages/frontend/src/routes/models/[slug]/+page.svelte

@@ -5,7 +5,7 @@
   import { Tabs, TabsContent, TabsList, TabsTrigger } from "$lib/components/ui/tabs";
   import { getAssetUrl } from "$lib/api";
   import Meta from "$lib/components/meta/meta.svelte";
-  import PeonyBackground from "$lib/components/background/peony-background.svelte";
+  import SexyBackground from "$lib/components/background/background.svelte";
   import SharingPopupButton from "$lib/components/sharing-popup/sharing-popup-button.svelte";
   import { page } from "$app/state";
   import ImageViewer from "$lib/components/image-viewer/image-viewer.svelte";
@@ -37,7 +37,7 @@
 <div
   class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5 overflow-hidden"
 >
-  <PeonyBackground />
+  <SexyBackground />
 
   <!-- Cover Section -->
   <div class="relative h-64 md:h-80 overflow-hidden bg-gradient-to-br from-primary to-accent">

packages/frontend/src/routes/password/+page.svelte

@@ -14,7 +14,7 @@
   import { goto } from "$app/navigation";
   import { requestPassword } from "$lib/services";
   import { onMount } from "svelte";
-  import PeonyBackground from "$lib/components/background/peony-background.svelte";
+  import SexyBackground from "$lib/components/background/background.svelte";
   import { toast } from "svelte-sonner";
   import Meta from "$lib/components/meta/meta.svelte";
   import Logo from "$lib/components/logo/logo.svelte";
@@ -56,7 +56,7 @@
 <div
   class="relative min-h-screen flex items-center justify-center bg-gradient-to-br from-primary/5 via-accent/5 to-background p-4 overflow-hidden"
 >
-  <PeonyBackground />
+  <SexyBackground />
 
   <div class="w-full max-w-md">
     <!-- Logo -->

packages/frontend/src/routes/password/reset/+page.svelte

@@ -14,7 +14,7 @@
   import { goto } from "$app/navigation";
   import { resetPassword } from "$lib/services";
   import { onMount } from "svelte";
-  import PeonyBackground from "$lib/components/background/peony-background.svelte";
+  import SexyBackground from "$lib/components/background/background.svelte";
   import { toast } from "svelte-sonner";
   import Meta from "$lib/components/meta/meta.svelte";
   import Logo from "$lib/components/logo/logo.svelte";
@@ -64,7 +64,7 @@
 <div
   class="relative min-h-screen flex items-center justify-center bg-gradient-to-br from-primary/5 via-accent/5 to-background p-4 overflow-hidden"
 >
-  <PeonyBackground />
+  <SexyBackground />
 
   <div class="w-full max-w-md">
     <!-- Logo -->

packages/frontend/src/routes/signup/+page.svelte

@@ -15,7 +15,7 @@
   import { toast } from "svelte-sonner";
   import * as Alert from "$lib/components/ui/alert";
   import { register } from "$lib/services";
-  import PeonyBackground from "$lib/components/background/peony-background.svelte";
+  import SexyBackground from "$lib/components/background/background.svelte";
   import Meta from "$lib/components/meta/meta.svelte";
   import { onMount } from "svelte";
   import Logo from "$lib/components/logo/logo.svelte";
@@ -71,7 +71,7 @@
 <div
   class="relative min-h-screen flex items-center justify-center bg-gradient-to-br from-primary/5 via-accent/5 to-background p-4 overflow-hidden"
 >
-  <PeonyBackground />
+  <SexyBackground />
 
   <div class="w-full max-w-md">
     <!-- Logo -->

packages/frontend/src/routes/users/[id]/+page.svelte

@@ -4,7 +4,7 @@
   import { Card, CardContent } from "$lib/components/ui/card";
   import { getAssetUrl } from "$lib/api";
   import Meta from "$lib/components/meta/meta.svelte";
-  import PeonyBackground from "$lib/components/background/peony-background.svelte";
+  import SexyBackground from "$lib/components/background/background.svelte";
 
   const { data } = $props();
 
@@ -31,7 +31,7 @@
 />
 
 <div class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5">
-  <PeonyBackground />
+  <SexyBackground />
 
   <div class="container mx-auto px-4 py-8 relative z-10">
     <!-- Profile Card -->

packages/frontend/src/routes/videos/[slug]/+page.svelte

@@ -6,7 +6,7 @@
   import { getAssetUrl } from "$lib/api";
   import TimeAgo from "javascript-time-ago";
   import { page } from "$app/state";
-  import PeonyBackground from "$lib/components/background/peony-background.svelte";
+  import SexyBackground from "$lib/components/background/background.svelte";
   import Meta from "$lib/components/meta/meta.svelte";
   import * as Alert from "$lib/components/ui/alert";
   import Textarea from "$lib/components/ui/textarea/textarea.svelte";
@@ -157,7 +157,7 @@
 <div
   class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5 overflow-hidden"
 >
-  <PeonyBackground />
+  <SexyBackground />
   <div class="container mx-auto px-4 py-8">
     <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
       <!-- Main Video Section -->