myxelium/Toju
1
0
Fork 0
Code Issues 14 Pull Requests Actions Packages Projects 2 Releases 37 Wiki Activity

Toju Website V2

Browse Source
This commit is contained in:
SocksOnHead
2026-03-12 13:21:33 +01:00
parent 106212ef3d
commit 45e0b09af8
51 changed files with 2333 additions and 1513 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
website/src/app/pages/gallery/gallery.component.html Normal file
View File

@@ -0,0 +1,95 @@
<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"
>
Image Gallery
</div>
<h1 class="text-4xl md:text-6xl font-extrabold text-foreground mb-6">A closer look at <span class="gradient-text">Toju</span></h1>
<p class="text-lg text-muted-foreground leading-relaxed">
Explore screenshots of the app experience, from voice chat and media sharing to servers, rooms, and full-screen collaboration.
</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"
alt="Toju main application screenshot"
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">Featured</p>
<h2 class="text-2xl md:text-3xl font-bold text-foreground mb-2">The full Toju workspace</h2>
<p class="max-w-2xl text-sm md:text-base text-muted-foreground">
See the main interface where rooms, messages, presence, and media all come together in one focused layout.
</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"
[alt]="item.title"
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.title }}</h3>
<p class="text-sm text-muted-foreground leading-relaxed">{{ item.description }}</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">Want to see it in action?</h2>
<p class="text-muted-foreground leading-relaxed mb-6">Download Toju or jump into the browser experience and explore the interface yourself.</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"
>
Go to downloads
</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"
>
Open web version
</a>
</div>
</div>
</section>
</div>