feat: improve UX across all listing pages and homepage
- Make model/video cards fully clickable on homepage, models, videos, magazine, and tags pages - Replace inline blob divs with SexyBackground component on magazine and play pages - Replace magazine hero section with PageHero component for consistency - Remove redundant action buttons from cards (cards are now the link targets) - Fix nested anchor/button invalid HTML in magazine featured article - Convert inner overlay anchors to aria-hidden divs to avoid nested <a> elements - Add bg-muted skeleton placeholder to all card images - Update magazine pagination to smart numbered style with ellipsis (matching videos/models) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -5,6 +5,7 @@
|
||||
import { getAssetUrl } from "$lib/api";
|
||||
import Meta from "$lib/components/meta/meta.svelte";
|
||||
import { formatVideoDuration } from "$lib/utils.js";
|
||||
import SexyBackground from "$lib/components/background/background.svelte";
|
||||
|
||||
const { data } = $props();
|
||||
</script>
|
||||
@@ -12,11 +13,10 @@
|
||||
<Meta title={$_("home.hero.title")} description={$_("home.hero.description")} />
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="relative min-h-[70vh] flex items-center justify-center overflow-hidden">
|
||||
<!-- Background Gradient -->
|
||||
<section class="relative min-h-screen flex items-center justify-center overflow-hidden">
|
||||
<div class="absolute inset-0 bg-gradient-to-br from-primary/20 via-accent/10 to-background"></div>
|
||||
<SexyBackground />
|
||||
|
||||
<!-- Content -->
|
||||
<div class="relative z-10 container mx-auto px-4 text-center">
|
||||
<div class="max-w-5xl mx-auto space-y-12">
|
||||
<h1
|
||||
@@ -47,14 +47,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Floating Elements -->
|
||||
<div
|
||||
class="absolute top-20 left-10 w-20 h-20 bg-primary/20 rounded-full blur-xl animate-pulse"
|
||||
></div>
|
||||
<div
|
||||
class="absolute bottom-20 right-10 w-32 h-32 bg-accent/20 rounded-full blur-xl animate-pulse delay-1000"
|
||||
></div>
|
||||
</section>
|
||||
|
||||
<!-- Featured Models -->
|
||||
@@ -71,40 +63,22 @@
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-3xl mx-auto">
|
||||
{#each data.models as model (model.slug)}
|
||||
<Card
|
||||
class="p-0 group hover:shadow-2xl hover:shadow-primary/20 transition-all duration-300 hover:-translate-y-2 bg-gradient-to-br from-card to-card/50 border-primary/20"
|
||||
>
|
||||
<CardContent class="p-6 text-center">
|
||||
<div class="relative mb-4">
|
||||
<img
|
||||
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"
|
||||
/>
|
||||
<!-- <div
|
||||
class="absolute -bottom-2 -right-2 bg-primary text-primary-foreground rounded-full w-8 h-8 flex items-center justify-center text-sm font-bold"
|
||||
>
|
||||
<HeartIcon class="w-4 h-4 fill-current" />
|
||||
</div> -->
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">{model.artist_name}</h3>
|
||||
<!-- <div
|
||||
class="flex items-center justify-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}
|
||||
<a href="/models/{model.slug}" class="block group">
|
||||
<Card
|
||||
class="p-0 h-full hover:shadow-2xl hover:shadow-primary/20 transition-all duration-300 hover:-translate-y-2 bg-gradient-to-br from-card to-card/50 border-primary/20"
|
||||
>
|
||||
<CardContent class="p-6 text-center">
|
||||
<div class="relative mb-4">
|
||||
<img
|
||||
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 bg-muted"
|
||||
/>
|
||||
</div>
|
||||
<div>{model.videos} {$_("home.featured_models.videos")}</div>
|
||||
</div> -->
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
class="mt-4 w-full group-hover:bg-primary/10"
|
||||
href="/models/{model.slug}">{$_("home.featured_models.view_profile")}</Button
|
||||
>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<h3 class="font-semibold text-lg group-hover:text-primary transition-colors">{model.artist_name}</h3>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
@@ -122,50 +96,42 @@
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-6xl mx-auto">
|
||||
{#each data.videos as video (video.slug)}
|
||||
<Card
|
||||
class="p-0 group hover:shadow-2xl hover:shadow-accent/20 transition-all duration-300 hover:-translate-y-2 bg-gradient-to-br from-card to-card/50 border-accent/20 overflow-hidden"
|
||||
>
|
||||
<div class="relative">
|
||||
<img
|
||||
src={getAssetUrl(video.image, "preview")}
|
||||
alt={video.title}
|
||||
class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent group-hover:scale-105 transition-transform duration-300"
|
||||
></div>
|
||||
<div class="absolute bottom-2 left-2 text-white text-sm font-medium">
|
||||
{#if video.movie_file?.duration}{formatVideoDuration(video.movie_file.duration)}{/if}
|
||||
</div>
|
||||
<!-- <div
|
||||
class="absolute top-2 right-2 bg-black/50 text-white text-xs px-2 py-1 rounded-full"
|
||||
>
|
||||
{video.views}
|
||||
{$_("home.trending.views")}
|
||||
</div> -->
|
||||
<div
|
||||
class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
>
|
||||
<a
|
||||
class="w-16 h-16 bg-primary/90 rounded-full flex items-center justify-center"
|
||||
href="/videos/{video.slug}"
|
||||
aria-label={video.title}
|
||||
<a href="/videos/{video.slug}" class="block group">
|
||||
<Card
|
||||
class="p-0 h-full hover:shadow-2xl hover:shadow-accent/20 transition-all duration-300 hover:-translate-y-2 bg-gradient-to-br from-card to-card/50 border-accent/20 overflow-hidden"
|
||||
>
|
||||
<div class="relative">
|
||||
<img
|
||||
src={getAssetUrl(video.image, "preview")}
|
||||
alt={video.title}
|
||||
class="w-full h-48 object-cover group-hover:scale-105 transition-transform duration-300 bg-muted"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent group-hover:scale-105 transition-transform duration-300"
|
||||
></div>
|
||||
<div class="absolute bottom-2 left-2 text-white text-sm font-medium">
|
||||
{#if video.movie_file?.duration}{formatVideoDuration(video.movie_file.duration)}{/if}
|
||||
</div>
|
||||
<div
|
||||
class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<span class="icon-[ri--play-large-fill] w-8 h-8 text-white"></span>
|
||||
</a>
|
||||
<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"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<CardContent class="px-4 pb-4 pt-0">
|
||||
<h3 class="font-semibold mb-2 group-hover:text-primary transition-colors">
|
||||
{video.title}
|
||||
</h3>
|
||||
|
||||
<div class="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<span class="icon-[ri--fire-line] w-4 h-4"></span>
|
||||
{$_("home.trending.trending")}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<CardContent class="px-4 pb-4 pt-0">
|
||||
<h3 class="font-semibold mb-2 group-hover:text-primary transition-colors">
|
||||
{video.title}
|
||||
</h3>
|
||||
<div class="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<span class="icon-[ri--fire-line] w-4 h-4"></span>
|
||||
{$_("home.trending.trending")}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user