refactor: UX and styling improvements across frontend

- Fix login spinner (isLoading never set to true before await)
- Extract PageHero component, replace copy-pasted hero sections on videos/models/tags pages
- Replace inline plasma blobs with SexyBackground on videos/models/tags pages
- Make video/model/tag cards fully clickable (wrap in <a>), remove redundant Watch/View Profile buttons
- Convert inner overlay anchors to divs to avoid nested <a> elements
- Fix home page model avatar preset: mini → thumbnail (correct size for 96px display)
- Reduce home hero height: min-h-screen → min-h-[70vh]
- Remove dead hideName prop from Logo, simplify component
- Add brand name to mobile flyout panel header with gradient styling
- Remove dead _relatedVideos array, isBookmarked state, _handleBookmark from video detail page
- Clean up commented-out code blocks in video detail and models pages
- Note: tag card inner tag links converted to spans to avoid nested anchors

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

packages/frontend/src/lib/components/header/header.svelte

@@ -56,7 +56,7 @@
         href="/"
         class="flex w-full items-center gap-3 hover:scale-105 transition-all duration-300"
       >
-        <Logo hideName={true} />
+        <Logo />
       </a>
 
       <!-- Desktop Navigation -->
@@ -191,8 +191,13 @@
   inert={!isMobileMenuOpen || undefined}
 >
   <!-- Panel header -->
-  <div class="flex items-center px-5 h-16 shrink-0 border-b border-border/30">
+  <div class="flex items-center gap-3 px-5 h-16 shrink-0 border-b border-border/30">
-    <Logo hideName={true} />
+    <Logo />
+    <span
+      class="text-xl font-extrabold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent"
+    >
+      {$_("brand.name")}
+    </span>
   </div>
 
   <div class="flex-1 py-6 px-5 space-y-6">

packages/frontend/src/lib/components/logo/logo.svelte

@@ -2,6 +2,4 @@
   import SexyIcon from "../icon/icon.svelte";
 </script>
 
-<div class="relative">
+<SexyIcon class="w-12 h-12" />
-  <SexyIcon class="w-12 h-12" />
-</div>

packages/frontend/src/lib/components/page-hero/page-hero.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  interface Props {
+    title: string;
+    description?: string;
+    children?: Snippet;
+  }
+
+  let { title, description, children }: Props = $props();
+</script>
+
+<section class="relative py-12 md:py-20 overflow-hidden">
+  <div class="absolute inset-0 bg-gradient-to-br from-primary/10 via-accent/5 to-background"></div>
+  <div class="relative container mx-auto px-4 text-center">
+    <div class="max-w-5xl mx-auto">
+      <h1
+        class="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent"
+      >
+        {title}
+      </h1>
+      {#if description}
+        <p class="text-xl md:text-2xl text-muted-foreground mb-10 leading-relaxed max-w-4xl mx-auto">
+          {description}
+        </p>
+      {/if}
+      {#if children}
+        {@render children()}
+      {/if}
+    </div>
+  </div>
+</section>

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

@@ -12,7 +12,7 @@
 <Meta title={$_("home.hero.title")} description={$_("home.hero.description")} />
 
 <!-- Hero Section -->
-<section class="relative min-h-screen flex items-center justify-center overflow-hidden">
+<section class="relative min-h-[70vh] flex items-center justify-center overflow-hidden">
   <!-- Background Gradient -->
   <div class="absolute inset-0 bg-gradient-to-br from-primary/20 via-accent/10 to-background"></div>
 
@@ -77,7 +77,7 @@
           <CardContent class="p-6 text-center">
             <div class="relative mb-4">
               <img
-                src={getAssetUrl(model.avatar, "mini")}
+                src={getAssetUrl(model.avatar, "thumbnail")}
                 alt={model.artist_name}
                 class="w-24 h-24 rounded-full mx-auto object-cover ring-4 ring-primary/20 group-hover:ring-primary/40 transition-all"
               />

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

@@ -29,6 +29,7 @@
   async function handleSubmit(e: Event) {
     e.preventDefault();
     try {
+      isLoading = true;
       await login(email, password);
       goto("/videos", { invalidateAll: true });
     } catch (err: any) {

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

@@ -9,6 +9,8 @@
   import { Select, SelectContent, SelectItem, SelectTrigger } from "$lib/components/ui/select";
   import { getAssetUrl } from "$lib/api";
   import Meta from "$lib/components/meta/meta.svelte";
+  import SexyBackground from "$lib/components/background/background.svelte";
+  import PageHero from "$lib/components/page-hero/page-hero.svelte";
 
   const { data } = $props();
 
@@ -49,34 +51,10 @@
 <div
   class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5 overflow-hidden"
 >
-  <!-- Global Plasma Background -->
+  <SexyBackground />
-  <div class="absolute inset-0 pointer-events-none">
-    <div
-      class="absolute top-40 left-1/4 w-80 h-80 bg-gradient-to-r from-primary/16 via-accent/20 to-primary/12 rounded-full blur-3xl animate-blob-slow"
-    ></div>
-    <div
-      class="absolute bottom-40 right-1/4 w-96 h-96 bg-gradient-to-r from-accent/16 via-primary/20 to-accent/12 rounded-full blur-3xl animate-blob-slow animation-delay-5000"
-    ></div>
-    <div
-      class="absolute top-1/3 right-1/3 w-64 h-64 bg-gradient-to-r from-primary/14 via-accent/18 to-primary/10 rounded-full blur-2xl animate-blob-reverse animation-delay-2500"
-    ></div>
-  </div>
 
-  <section class="relative py-20 overflow-hidden">
+  <PageHero title={$_("models.title")} description={$_("models.description")}>
-    <div class="relative container mx-auto px-4 text-center">
+    <div class="flex flex-col md:flex-row gap-4 max-w-4xl mx-auto">
-      <div class="max-w-5xl mx-auto">
-        <h1
-          class="text-5xl md:text-7xl font-bold mb-8 bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent"
-        >
-          {$_("models.title")}
-        </h1>
-        <p
-          class="text-xl md:text-2xl text-muted-foreground mb-10 leading-relaxed max-w-4xl mx-auto"
-        >
-          {$_("models.description")}
-        </p>
-        <!-- Filters -->
-        <div class="flex flex-col md:flex-row gap-4 max-w-4xl mx-auto">
           <!-- Search -->
           <div class="relative flex-1">
             <span
@@ -105,16 +83,15 @@
               <SelectItem value="recent">{$_("models.sort.recent")}</SelectItem>
             </SelectContent>
           </Select>
-        </div>
-      </div>
     </div>
-  </section>
+  </PageHero>
   <!-- Models Grid -->
   <div class="container mx-auto px-4 py-12">
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
       {#each data.items as model (model.slug)}
+        <a href="/models/{model.slug}" class="block group">
         <Card
-          class="py-0 group hover:shadow-2xl hover:shadow-primary/25 transition-all duration-500 hover:-translate-y-3 bg-gradient-to-br from-card/90 via-card/95 to-card/85 backdrop-blur-xl shadow-lg shadow-primary/10 overflow-hidden"
+          class="py-0 h-full hover:shadow-2xl hover:shadow-primary/25 transition-all duration-500 hover:-translate-y-3 bg-gradient-to-br from-card/90 via-card/95 to-card/85 backdrop-blur-xl shadow-lg shadow-primary/10 overflow-hidden"
         >
           <div class="relative">
             <img
@@ -142,16 +119,15 @@
               />
             </button> -->
 
-            <!-- Play Overlay -->
+            <!-- Hover Overlay -->
-            <a
+            <div
-              href="/models/{model.slug}"
+              aria-hidden="true"
-              aria-label={model.artist_name}
               class="absolute inset-0 group-hover:scale-105 transition bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 flex items-center justify-center"
             >
               <div class="w-16 h-16 bg-primary/90 rounded-full flex items-center justify-center">
                 <span class="icon-[ri--play-large-fill] w-8 h-8 text-white ml-1"></span>
               </div>
-            </a>
+            </div>
           </div>
 
           <CardContent class="p-6">
@@ -190,22 +166,9 @@
               <!-- category not available -->
             </div>
 
-            <!-- Action Buttons -->
-            <div class="flex gap-2">
-              <Button
-                variant="outline"
-                size="sm"
-                class="flex-1 border-primary/20 hover:bg-primary/10"
-                href="/models/{model.slug}">{$_("models.view_profile")}</Button
-              >
-              <!-- <Button
-                size="sm"
-                class="flex-1 bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
-                >{$_("models.follow")}</Button
-              > -->
-            </div>
           </CardContent>
         </Card>
+        </a>
       {/each}
     </div>
 

packages/frontend/src/routes/tags/[tag]/+page.svelte

@@ -6,6 +6,8 @@
   import { Select, SelectContent, SelectItem, SelectTrigger } from "$lib/components/ui/select";
   import { getAssetUrl } from "$lib/api";
   import Meta from "$lib/components/meta/meta.svelte";
+  import SexyBackground from "$lib/components/background/background.svelte";
+  import PageHero from "$lib/components/page-hero/page-hero.svelte";
 
   let searchQuery = $state("");
   let categoryFilter = $state("all");
@@ -52,77 +54,50 @@
 <div
   class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5 overflow-hidden"
 >
-  <!-- Global Plasma Background -->
+  <SexyBackground />
-  <div class="absolute inset-0 pointer-events-none">
-    <div
-      class="absolute top-40 left-1/4 w-80 h-80 bg-gradient-to-r from-primary/16 via-accent/20 to-primary/12 rounded-full blur-3xl animate-blob-slow"
-    ></div>
-    <div
-      class="absolute bottom-40 right-1/4 w-96 h-96 bg-gradient-to-r from-accent/16 via-primary/20 to-accent/12 rounded-full blur-3xl animate-blob-slow animation-delay-5000"
-    ></div>
-    <div
-      class="absolute top-1/3 right-1/3 w-64 h-64 bg-gradient-to-r from-primary/14 via-accent/18 to-primary/10 rounded-full blur-2xl animate-blob-reverse animation-delay-2500"
-    ></div>
-  </div>
 
-  <section class="relative py-20 overflow-hidden">
+  <PageHero
-    <div class="relative container mx-auto px-4 text-center">
+    title={$_("tags.title", { values: { tag: data.tag } })}
-      <div class="max-w-5xl mx-auto">
+    description={$_("tags.description", { values: { tag: data.tag } })}
-        <h1
+  >
-          class="text-5xl md:text-7xl font-bold mb-8 bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent"
+    <div class="flex flex-col md:flex-row gap-4 max-w-4xl mx-auto">
-        >
+      <div class="relative flex-1">
-          {$_("tags.title", { values: { tag: data.tag } })}
+        <span
-        </h1>
+          class="icon-[ri--search-line] absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground"
-        <p
+        ></span>
-          class="text-xl md:text-2xl text-muted-foreground mb-10 leading-relaxed max-w-4xl mx-auto"
+        <Input
-        >
+          placeholder={$_("tags.search_placeholder")}
-          {$_("tags.description", { values: { tag: data.tag } })}
+          bind:value={searchQuery}
-        </p>
+          class="pl-10 bg-background/50 border-primary/20 focus:border-primary"
-        <!-- Filters -->
+        />
-        <div class="flex flex-col md:flex-row gap-4 max-w-4xl mx-auto">
-          <!-- Search -->
-          <div class="relative flex-1">
-            <span
-              class="icon-[ri--search-line] absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground"
-            ></span>
-            <Input
-              placeholder={$_("tags.search_placeholder")}
-              bind:value={searchQuery}
-              class="pl-10 bg-background/50 border-primary/20 focus:border-primary"
-            />
-          </div>
-
-          <!-- Category Filter -->
-          <Select type="single" bind:value={categoryFilter}>
-            <SelectTrigger
-              class="w-full md:w-48 bg-background/50 border-primary/20 focus:border-primary"
-            >
-              <span class="icon-[ri--filter-line] w-4 h-4 mr-2"></span>
-              {categoryFilter === "all"
-                ? $_("tags.categories.all")
-                : categoryFilter === "video"
-                  ? $_("tags.categories.video")
-                  : categoryFilter === "article"
-                    ? $_("tags.categories.article")
-                    : $_("tags.categories.model")}
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="all">{$_("tags.categories.all")}</SelectItem>
-              <SelectItem value="video">{$_("tags.categories.video")}</SelectItem>
-              <SelectItem value="article">{$_("tags.categories.article")}</SelectItem>
-              <SelectItem value="model">{$_("tags.categories.model")}</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
       </div>
+      <Select type="single" bind:value={categoryFilter}>
+        <SelectTrigger class="w-full md:w-48 bg-background/50 border-primary/20 focus:border-primary">
+          <span class="icon-[ri--filter-line] w-4 h-4 mr-2"></span>
+          {categoryFilter === "all"
+            ? $_("tags.categories.all")
+            : categoryFilter === "video"
+              ? $_("tags.categories.video")
+              : categoryFilter === "article"
+                ? $_("tags.categories.article")
+                : $_("tags.categories.model")}
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">{$_("tags.categories.all")}</SelectItem>
+          <SelectItem value="video">{$_("tags.categories.video")}</SelectItem>
+          <SelectItem value="article">{$_("tags.categories.article")}</SelectItem>
+          <SelectItem value="model">{$_("tags.categories.model")}</SelectItem>
+        </SelectContent>
+      </Select>
     </div>
-  </section>
+  </PageHero>
   <!-- Items Grid -->
   <div class="container mx-auto px-4 py-12">
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
       {#each filteredItems() as item (item.slug)}
+        <a href={getUrlForItem(item)} class="block group">
         <Card
-          class="py-0 group hover:shadow-2xl hover:shadow-primary/25 transition-all duration-300 hover:-translate-y-3 bg-gradient-to-br from-card/90 via-card/95 to-card/85 backdrop-blur-xl shadow-lg shadow-primary/10 overflow-hidden"
+          class="py-0 h-full hover:shadow-2xl hover:shadow-primary/25 transition-all duration-300 hover:-translate-y-3 bg-gradient-to-br from-card/90 via-card/95 to-card/85 backdrop-blur-xl shadow-lg shadow-primary/10 overflow-hidden"
         >
           <div class="relative">
             <img
@@ -148,49 +123,20 @@
                 <h3 class="font-semibold text-lg mb-1 group-hover:text-primary transition-colors">
                   {item.title}
                 </h3>
-                <!-- <div
-                  class="flex items-center gap-4 text-sm text-muted-foreground"
-                >
-                  <div class="flex items-center gap-1">
-                    <StarIcon class="w-4 h-4 text-yellow-500 fill-current" />
-                    {model.rating}
-                  </div>
-                  <div>{model.subscribers} followers</div>
-                </div> -->
               </div>
             </div>
 
             <!-- Tags -->
-            <div class="flex flex-wrap gap-2 mb-4">
+            <div class="flex flex-wrap gap-2">
               {#each item.tags as tag (tag)}
-                <a
+                <span class="text-xs bg-primary/10 text-primary px-2 py-1 rounded-full">
-                  class="text-xs bg-primary/10 text-primary px-2 py-1 rounded-full"
-                  href="/tags/{tag}"
-                >
                   {tag}
-                </a>
+                </span>
               {/each}
             </div>
-
-            <!-- Action Buttons -->
-            <div class="flex gap-2">
-              <Button
-                variant="outline"
-                size="sm"
-                class="flex-1 border-primary/20 hover:bg-primary/10"
-                href={getUrlForItem(item)}
-                >{$_("tags.view", {
-                  values: { category: item.category },
-                })}</Button
-              >
-              <!-- <Button
-                size="sm"
-                class="flex-1 bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
-                >{$_("tags.follow")}</Button
-              > -->
-            </div>
           </CardContent>
         </Card>
+        </a>
       {/each}
     </div>
 

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

@@ -9,6 +9,8 @@
   import { Select, SelectContent, SelectItem, SelectTrigger } from "$lib/components/ui/select";
   import { getAssetUrl } from "$lib/api";
   import Meta from "$lib/components/meta/meta.svelte";
+  import SexyBackground from "$lib/components/background/background.svelte";
+  import PageHero from "$lib/components/page-hero/page-hero.svelte";
   import TimeAgo from "javascript-time-ago";
   import { formatVideoDuration } from "$lib/utils";
 
@@ -52,38 +54,10 @@
 <div
   class="relative min-h-screen bg-gradient-to-br from-background via-primary/5 to-accent/5 overflow-hidden"
 >
-  <!-- Global Plasma Background -->
+  <SexyBackground />
-  <div class="absolute inset-0 pointer-events-none">
-    <div
-      class="absolute top-40 left-1/4 w-80 h-80 bg-gradient-to-r from-primary/16 via-accent/20 to-primary/12 rounded-full blur-3xl animate-blob-slow"
-    ></div>
-    <div
-      class="absolute bottom-40 right-1/4 w-96 h-96 bg-gradient-to-r from-accent/16 via-primary/20 to-accent/12 rounded-full blur-3xl animate-blob-slow animation-delay-5000"
-    ></div>
-    <div
-      class="absolute top-1/3 right-1/3 w-64 h-64 bg-gradient-to-r from-primary/14 via-accent/18 to-primary/10 rounded-full blur-2xl animate-blob-reverse animation-delay-2500"
-    ></div>
-  </div>
 
-  <section class="relative py-20 overflow-hidden">
+  <PageHero title={$_("videos.title")} description={$_("videos.description")}>
-    <div
+    <div class="flex flex-col lg:flex-row gap-4 max-w-6xl mx-auto">
-      class="absolute inset-0 bg-gradient-to-br from-primary/10 via-accent/5 to-background"
-    ></div>
-    <div class="relative container mx-auto px-4 text-center">
-      <div class="max-w-5xl mx-auto">
-        <h1
-          class="text-5xl md:text-7xl font-bold mb-8 bg-gradient-to-r from-primary via-accent to-primary bg-clip-text text-transparent"
-        >
-          {$_("videos.title")}
-        </h1>
-        <p
-          class="text-xl md:text-2xl text-muted-foreground mb-10 leading-relaxed max-w-4xl mx-auto"
-        >
-          {$_("videos.description")}
-        </p>
-
-        <!-- Filters -->
-        <div class="flex flex-col lg:flex-row gap-4 max-w-6xl mx-auto">
           <!-- Search -->
           <div class="relative flex-1">
             <span
@@ -146,16 +120,15 @@
               <SelectItem value="name">{$_("videos.sort.name")}</SelectItem>
             </SelectContent>
           </Select>
-        </div>
-      </div>
     </div>
-  </section>
+  </PageHero>
   <!-- Videos Grid -->
   <div class="container mx-auto px-4 py-12">
     <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
       {#each data.items as video (video.slug)}
+        <a href={`/videos/${video.slug}`} class="block group">
         <Card
-          class="p-0 group hover:shadow-2xl hover:shadow-primary/25 transition-all duration-500 hover:-translate-y-3 bg-gradient-to-br from-card/90 via-card/95 to-card/85 backdrop-blur-xl shadow-lg shadow-primary/10 overflow-hidden"
+          class="p-0 h-full hover:shadow-2xl hover:shadow-primary/25 transition-all duration-500 hover:-translate-y-3 bg-gradient-to-br from-card/90 via-card/95 to-card/85 backdrop-blur-xl shadow-lg shadow-primary/10 overflow-hidden"
         >
           <div class="relative">
             <img
@@ -196,17 +169,16 @@
             {/if}
 
             <!-- Play Overlay -->
-            <a
+            <div
               class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
-              href={`/videos/${video.slug}`}
+              aria-hidden="true"
-              aria-label={$_("videos.watch")}
             >
               <div
                 class="w-16 h-16 bg-primary/90 rounded-full flex flex-col items-center justify-center shadow-2xl"
               >
                 <span class="icon-[ri--play-large-fill] w-8 h-8 text-white"></span>
               </div>
-            </a>
+            </div>
 
             <!-- Model Info -->
             <!-- <div class="absolute bottom-3 right-3 text-white text-sm">
@@ -250,27 +222,9 @@
                             </span> -->
             </div>
 
-            <!-- Action Buttons -->
-            <div class="flex gap-2">
-              <Button
-                variant="outline"
-                size="sm"
-                class="flex-1 border-primary/20 hover:bg-primary/10"
-                href={`/videos/${video.slug}`}
-              >
-                <span class="icon-[ri--play-large-fill] w-4 h-4 mr-2"></span>
-                {$_("videos.watch")}
-              </Button>
-              <!-- <Button
-                variant="ghost"
-                size="sm"
-                class="px-3 hover:bg-primary/10"
-              >
-                <HeartIcon class="w-4 h-4" />
-              </Button> -->
-            </div>
           </CardContent>
         </Card>
+        </a>
       {/each}
     </div>
 

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

@@ -31,7 +31,6 @@
   let isLiked = $state(data.likeStatus.liked);
   let likesCount = $state(data.video.likes_count || 0);
   let isLikeLoading = $state(false);
-  let isBookmarked = $state(false);
   let newComment = $state("");
   let showComments = $state(true);
   let isCommentLoading = $state(false);
@@ -40,41 +39,6 @@
   let currentPlayId = $state<string | null>(null);
   let lastTrackedTime = $state(0);
 
-  const _relatedVideos = [
-    {
-      id: 2,
-      title: "Sunset Dreams",
-      thumbnail: "/placeholder.svg?size=wide",
-      duration: "8:45",
-      views: "1.8M",
-      model: "Luna Belle",
-    },
-    {
-      id: 3,
-      title: "Intimate Moments",
-      thumbnail: "/placeholder.svg?size=wide",
-      duration: "15:22",
-      views: "3.2M",
-      model: "Aria Divine",
-    },
-    {
-      id: 4,
-      title: "Morning Light",
-      thumbnail: "/placeholder.svg?size=wide",
-      duration: "10:15",
-      views: "956K",
-      model: "Maya Starlight",
-    },
-    {
-      id: 5,
-      title: "Passionate Dance",
-      thumbnail: "/placeholder.svg?size=wide",
-      duration: "7:33",
-      views: "1.4M",
-      model: "Zara Moon",
-    },
-  ];
-
   async function handleLike() {
     if (!data.authStatus.authenticated) {
       toast.error("Please sign in to like videos");
@@ -101,10 +65,6 @@
     }
   }
 
-  function _handleBookmark() {
-    isBookmarked = !isBookmarked;
-  }
-
   async function handleDeleteComment(id: number) {
     try {
       await deleteComment(id);
@@ -289,16 +249,6 @@
                 type: "video" as const,
               }}
             />
-            <!-- <Button
-              variant={isBookmarked ? "default" : "outline"}
-              onclick={_handleBookmark}
-              class="flex items-center gap-2 {isBookmarked
-                ? 'bg-gradient-to-r from-primary to-accent'
-                : 'border-primary/20 hover:bg-primary/10'}"
-            >
-              <span class="icon-[ri--bookmark-{isBookmarked ? 'fill' : 'line'}] w-4 h-4"></span>
-              Save
-            </Button> -->
           </div>
 
           <!-- Model Info -->
@@ -329,15 +279,8 @@
                         </svg>
                       </div>
                     </a>
-                    <!-- <p class="text-sm text-muted-foreground">
-                      {data.video.model.subscribers} subscribers
-                    </p> -->
                   </div>
                 </div>
-                <!-- <Button
-                  class="bg-gradient-to-r from-primary to-accent hover:from-primary/90 hover:to-accent/90"
-                  >Subscribe</Button
-                > -->
               </div>
             {/each}
           </div>