Myx
00adf39121
All checks were successful
Queue Release Build / prepare (push) Successful in 1m20s
Deploy Web Apps / deploy (push) Successful in 17m37s
Queue Release Build / build-windows (push) Successful in 39m8s
Queue Release Build / build-linux (push) Successful in 1h3m53s
Queue Release Build / finalize (push) Successful in 5m43s
96 lines
4.4 KiB
HTML
96 lines
4.4 KiB
HTML
<div class="min-h-screen pt-32 pb-20">
|
|
<section class="container mx-auto px-6 mb-16">
|
|
<div class="max-w-3xl mx-auto text-center section-fade">
|
|
<div
|
|
class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-purple-500/10 border border-purple-500/20 text-purple-400 text-sm font-medium mb-6"
|
|
>
|
|
{{ 'pages.gallery.hero.badge' | translate }}
|
|
</div>
|
|
<h1 class="text-4xl md:text-6xl font-extrabold text-foreground mb-6">{{ 'pages.gallery.hero.titlePrefix' | translate }} <span class="gradient-text">{{ 'common.brand' | translate }}</span></h1>
|
|
<p class="text-lg text-muted-foreground leading-relaxed">
|
|
{{ 'pages.gallery.hero.description' | translate }}
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="container mx-auto px-6 mb-20">
|
|
<div class="max-w-6xl mx-auto section-fade">
|
|
<div class="relative overflow-hidden rounded-3xl border border-border/30 bg-card/30 backdrop-blur-sm">
|
|
<div class="relative aspect-[16/9]">
|
|
<img
|
|
ngSrc="/images/screenshots/screenshot_main.png"
|
|
[attr.alt]="'pages.gallery.featured.imageAlt' | translate"
|
|
fill
|
|
priority
|
|
sizes="(min-width: 1536px) 75vw, (min-width: 1280px) 90vw, 100vw"
|
|
class="object-cover"
|
|
/>
|
|
</div>
|
|
<div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background/80 to-transparent p-6 md:p-8">
|
|
<p class="text-xs font-semibold uppercase tracking-[0.2em] text-purple-400 mb-2">{{ 'pages.gallery.featured.label' | translate }}</p>
|
|
<h2 class="text-2xl md:text-3xl font-bold text-foreground mb-2">{{ 'pages.gallery.featured.title' | translate }}</h2>
|
|
<p class="max-w-2xl text-sm md:text-base text-muted-foreground">
|
|
{{ 'pages.gallery.featured.description' | translate }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<app-ad-slot />
|
|
|
|
<section class="container mx-auto px-6 mb-20">
|
|
<div class="max-w-6xl mx-auto">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
|
|
@for (item of galleryItems; track item.src) {
|
|
<a
|
|
[href]="item.src"
|
|
target="_blank"
|
|
rel="noopener"
|
|
class="section-fade group overflow-hidden rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm hover:border-purple-500/30 hover:bg-card/50 transition-all"
|
|
>
|
|
<div class="relative aspect-video overflow-hidden">
|
|
<img
|
|
[ngSrc]="item.src"
|
|
[attr.alt]="item.titleKey | translate"
|
|
fill
|
|
sizes="(max-width: 768px) 100vw, (max-width: 1280px) 50vw, 33vw"
|
|
class="object-cover transition-transform duration-500 group-hover:scale-105"
|
|
/>
|
|
</div>
|
|
<div class="p-5">
|
|
<h3 class="text-lg font-semibold text-foreground mb-2">{{ item.titleKey | translate }}</h3>
|
|
<p class="text-sm text-muted-foreground leading-relaxed">{{ item.descriptionKey | translate }}</p>
|
|
</div>
|
|
</a>
|
|
}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="container mx-auto px-6">
|
|
<div
|
|
class="max-w-4xl mx-auto section-fade rounded-3xl border border-purple-500/20 bg-gradient-to-br from-purple-950/20 to-violet-950/20 p-8 md:p-10 text-center"
|
|
>
|
|
<h2 class="text-2xl md:text-3xl font-bold text-foreground mb-4">{{ 'pages.gallery.cta.title' | translate }}</h2>
|
|
<p class="text-muted-foreground leading-relaxed mb-6">{{ 'pages.gallery.cta.description' | translate }}</p>
|
|
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
|
|
<a
|
|
routerLink="/downloads"
|
|
class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-gradient-to-r from-purple-600 to-violet-600 text-white font-semibold hover:from-purple-500 hover:to-violet-500 transition-all shadow-lg shadow-purple-500/25"
|
|
>
|
|
{{ 'common.actions.goToDownloads' | translate }}
|
|
</a>
|
|
<a
|
|
href="https://web.toju.app/"
|
|
target="_blank"
|
|
rel="noopener"
|
|
class="inline-flex items-center gap-2 px-6 py-3 rounded-xl border border-border/50 bg-card/50 text-foreground font-medium hover:border-purple-500/30 transition-all"
|
|
>
|
|
{{ 'common.actions.openWebVersion' | translate }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|