myxelium/Toju
1
0
Fork 0
Code Issues 14 Pull Requests Actions Packages Projects 2 Releases 36 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

542
website/src/app/pages/home/home.component.html Normal file
View File

@@ -0,0 +1,542 @@
<!-- Hero -->
<section class="relative min-h-screen flex items-center justify-center overflow-hidden">
<!-- Gradient orbs -->
<div
[appParallax]="0.15"
class="absolute top-1/4 -left-32 w-96 h-96 bg-purple-600/20 rounded-full blur-[128px] animate-float"
></div>
<div
[appParallax]="0.25"
class="absolute bottom-1/4 -right-32 w-80 h-80 bg-violet-500/15 rounded-full blur-[100px] animate-float"
style="animation-delay: -3s"
></div>
<div class="relative z-10 container mx-auto px-6 text-center pt-32 pb-20">
<div
class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-purple-500/30 bg-purple-500/10 text-purple-400 text-sm font-medium mb-8 animate-fade-in"
>
<span class="w-2 h-2 rounded-full bg-purple-400 animate-pulse"></span>
Currently in Beta - Free &amp; Open Source
</div>
<h1 class="text-5xl md:text-7xl lg:text-8xl font-extrabold tracking-tight mb-6 animate-fade-in-up">
<span class="text-foreground">Talk freely.</span><br />
<span class="gradient-text">Own your voice.</span>
</h1>
<p
class="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto mb-10 leading-relaxed animate-fade-in-up"
style="animation-delay: 0.2s"
>
Crystal-clear voice calls, unlimited screen sharing, and file transfers with no size limits. Peer-to-peer. Private. Completely free.
</p>
<!-- CTA Buttons -->
<div
class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-6 animate-fade-in-up"
style="animation-delay: 0.4s"
>
@if (downloadUrl()) {
<a
[href]="downloadUrl()"
class="group inline-flex items-center gap-3 px-8 py-4 rounded-xl bg-gradient-to-r from-purple-600 to-violet-600 text-white font-semibold text-lg hover:from-purple-500 hover:to-violet-500 transition-all shadow-2xl shadow-purple-500/25 hover:shadow-purple-500/40 animate-glow-pulse"
>
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
/>
</svg>
Download for {{ detectedOS().name }}
<span class="text-sm opacity-75">{{ detectedOS().icon }}</span>
</a>
} @else {
<a
routerLink="/downloads"
class="group inline-flex items-center gap-3 px-8 py-4 rounded-xl bg-gradient-to-r from-purple-600 to-violet-600 text-white font-semibold text-lg hover:from-purple-500 hover:to-violet-500 transition-all shadow-2xl shadow-purple-500/25 hover:shadow-purple-500/40"
>
<svg
class="w-6 h-6"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
/>
</svg>
Download Toju
</a>
}
<a
href="https://web.toju.app/"
target="_blank"
rel="noopener"
class="inline-flex items-center gap-2 px-8 py-4 rounded-xl border border-border/50 bg-card/50 text-foreground font-medium text-lg hover:bg-card hover:border-purple-500/30 transition-all backdrop-blur-sm"
>
Open in Browser
<svg
class="w-5 h-5 opacity-60"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
/>
</svg>
</a>
</div>
@if (latestVersion()) {
<p
class="text-xs text-muted-foreground/60 animate-fade-in"
style="animation-delay: 0.6s"
>
Version {{ latestVersion() }} ·
<a
routerLink="/downloads"
class="underline hover:text-muted-foreground transition-colors"
>All platforms</a
>
</p>
}
<!-- Scroll indicator -->
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
<svg
class="w-6 h-6 text-muted-foreground/40"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 14l-7 7m0 0l-7-7m7 7V3"
/>
</svg>
</div>
</div>
</section>
<app-ad-slot />
<!-- Features Grid -->
<section class="relative py-32">
<div class="container mx-auto px-6">
<div class="text-center mb-20 section-fade">
<h2 class="text-3xl md:text-5xl font-bold text-foreground mb-4">
Everything you need,<br />
<span class="gradient-text">nothing you don't.</span>
</h2>
<p class="text-muted-foreground text-lg max-w-xl mx-auto">No bloat. No paywalls. Just the tools to connect with the people who matter.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Voice Calls -->
<div
class="section-fade group relative rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-8 hover:border-purple-500/30 hover:bg-card/50 transition-all duration-300"
>
<div class="w-12 h-12 rounded-xl bg-purple-500/10 flex items-center justify-center mb-6 group-hover:bg-purple-500/20 transition-colors">
<svg
class="w-6 h-6 text-purple-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"
/>
</svg>
</div>
<h3 class="text-xl font-semibold text-foreground mb-3">HD Voice Calls</h3>
<p class="text-muted-foreground leading-relaxed">
Crystal-clear audio with built-in noise reduction. Hear every word, not the background. No quality compromises, ever.
</p>
</div>
<!-- Screen Sharing -->
<div
class="section-fade group relative rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-8 hover:border-purple-500/30 hover:bg-card/50 transition-all duration-300"
style="transition-delay: 0.1s"
>
<div class="w-12 h-12 rounded-xl bg-violet-500/10 flex items-center justify-center mb-6 group-hover:bg-violet-500/20 transition-colors">
<svg
class="w-6 h-6 text-violet-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
/>
</svg>
</div>
<h3 class="text-xl font-semibold text-foreground mb-3">Screen Sharing</h3>
<p class="text-muted-foreground leading-relaxed">
Share your screen at full resolution. No time limits, no quality downgrades. Perfect for pair programming, presentations, or showing your
epic gameplay.
</p>
</div>
<!-- File Sharing -->
<div
class="section-fade group relative rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-8 hover:border-purple-500/30 hover:bg-card/50 transition-all duration-300"
style="transition-delay: 0.2s"
>
<div class="w-12 h-12 rounded-xl bg-pink-500/10 flex items-center justify-center mb-6 group-hover:bg-pink-500/20 transition-colors">
<svg
class="w-6 h-6 text-pink-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
/>
</svg>
</div>
<h3 class="text-xl font-semibold text-foreground mb-3">Unlimited File Sharing</h3>
<p class="text-muted-foreground leading-relaxed">
Send files of any size directly to your friends. No upload limits, no compression. Your files go straight from you to them.
</p>
</div>
<!-- Privacy -->
<div
class="section-fade group relative rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-8 hover:border-purple-500/30 hover:bg-card/50 transition-all duration-300"
>
<div class="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-6 group-hover:bg-emerald-500/20 transition-colors">
<svg
class="w-6 h-6 text-emerald-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
/>
</svg>
</div>
<h3 class="text-xl font-semibold text-foreground mb-3">True Privacy</h3>
<p class="text-muted-foreground leading-relaxed">
Peer-to-peer means your data goes directly between you and your friends. No servers storing your conversations. Your business is your
business.
</p>
</div>
<!-- Open Source -->
<div
class="section-fade group relative rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-8 hover:border-purple-500/30 hover:bg-card/50 transition-all duration-300"
style="transition-delay: 0.1s"
>
<div class="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center mb-6 group-hover:bg-blue-500/20 transition-colors">
<svg
class="w-6 h-6 text-blue-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"
/>
</svg>
</div>
<h3 class="text-xl font-semibold text-foreground mb-3">Open Source</h3>
<p class="text-muted-foreground leading-relaxed">
Every line of code is public. Audit it, modify it, host your own signal server. Full transparency - nothing is hidden.
</p>
</div>
<!-- Free -->
<div
class="section-fade group relative rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-8 hover:border-purple-500/30 hover:bg-card/50 transition-all duration-300"
style="transition-delay: 0.2s"
>
<div class="w-12 h-12 rounded-xl bg-amber-500/10 flex items-center justify-center mb-6 group-hover:bg-amber-500/20 transition-colors">
<svg
class="w-6 h-6 text-amber-400"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
/>
</svg>
</div>
<h3 class="text-xl font-semibold text-foreground mb-3">Completely Free</h3>
<p class="text-muted-foreground leading-relaxed">
No premium tiers. No paywalls. No "starter plans". Every feature is available to everyone, always. Made with love, not profit margins.
</p>
</div>
</div>
</div>
</section>
<app-ad-slot />
<!-- Gaming Section -->
<section class="relative py-32">
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-purple-950/10 to-transparent"></div>
<div class="relative container mx-auto px-6">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<div class="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"
>
<svg
class="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
Built for Gamers
</div>
<h2 class="text-3xl md:text-5xl font-bold text-foreground mb-6">
Your perfect<br />
<span class="gradient-text">gaming companion.</span>
</h2>
<p class="text-lg text-muted-foreground leading-relaxed mb-8">
Ultra-low latency voice chat that doesn't eat your bandwidth. Share your screen without frame drops. Send clips and files instantly. All
while keeping your CPU free for what matters - winning.
</p>
<ul class="space-y-4">
<li class="flex items-center gap-3 text-muted-foreground">
<svg
class="w-5 h-5 text-purple-400 flex-shrink-0"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 13l4 4L19 7"
/>
</svg>
<span>Low-latency peer-to-peer voice - no relay servers in the way</span>
</li>
<li class="flex items-center gap-3 text-muted-foreground">
<svg
class="w-5 h-5 text-purple-400 flex-shrink-0"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 13l4 4L19 7"
/>
</svg>
<span>AI-powered noise suppression - keyboard clatter stays out</span>
</li>
<li class="flex items-center gap-3 text-muted-foreground">
<svg
class="w-5 h-5 text-purple-400 flex-shrink-0"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 13l4 4L19 7"
/>
</svg>
<span>Full-resolution screen sharing at high FPS</span>
</li>
<li class="flex items-center gap-3 text-muted-foreground">
<svg
class="w-5 h-5 text-purple-400 flex-shrink-0"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 13l4 4L19 7"
/>
</svg>
<span>Send replays and screenshots with no file size limit</span>
</li>
</ul>
</div>
<div class="section-fade relative">
<div class="relative rounded-2xl overflow-hidden border border-border/30 bg-card/30 backdrop-blur-sm aspect-video">
<img
ngSrc="/images/screenshots/screenshare_gaming.png"
fill
priority
alt="Toju gaming screen sharing preview"
class="object-cover"
/>
<div class="absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-transparent"></div>
<div class="absolute bottom-4 left-4 text-sm text-muted-foreground/60">Game on. No limits.</div>
</div>
<!-- Glow effect -->
<div class="absolute -inset-4 bg-purple-600/5 rounded-3xl blur-2xl -z-10"></div>
</div>
</div>
</div>
</section>
<app-ad-slot />
<!-- Self-hostable Section -->
<section class="relative py-32">
<div class="container mx-auto px-6">
<div class="section-fade max-w-3xl mx-auto text-center">
<div
class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-sm font-medium mb-6"
>
<svg
class="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2"
/>
</svg>
Self-Hostable
</div>
<h2 class="text-3xl md:text-5xl font-bold text-foreground mb-6">
Your infrastructure,<br />
<span class="gradient-text">your rules.</span>
</h2>
<p class="text-lg text-muted-foreground leading-relaxed mb-8">
Toju uses a lightweight coordination server to help peers find each other - that's it. Your actual conversations never touch a server. Want
even more control? Run your own coordination server in minutes. Full independence, zero compromises.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a
routerLink="/what-is-toju"
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"
>
Learn how it works
<svg
class="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M9 5l7 7-7 7"
/>
</svg>
</a>
<a
href="https://git.azaaxin.com/myxelium/Toju"
target="_blank"
rel="noopener"
class="inline-flex items-center gap-2 px-6 py-3 text-muted-foreground hover:text-foreground transition-colors text-sm"
>
<img
src="/images/gitea.png"
alt=""
width="16"
height="16"
class="w-4 h-4 object-contain"
/>
View source code
</a>
</div>
</div>
</div>
</section>
<!-- CTA Banner -->
<section class="relative py-24">
<div class="absolute inset-0 bg-gradient-to-r from-purple-950/20 via-violet-950/30 to-purple-950/20"></div>
<div class="relative container mx-auto px-6 text-center section-fade">
<h2 class="text-3xl md:text-4xl font-bold text-foreground mb-4">Ready to take back your conversations?</h2>
<p class="text-muted-foreground text-lg mb-8 max-w-lg mx-auto">Join thousands choosing privacy, freedom, and real connection.</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
@if (downloadUrl()) {
<a
[href]="downloadUrl()"
class="inline-flex items-center gap-2 px-8 py-4 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-2xl shadow-purple-500/25"
>
Download for {{ detectedOS().name }}
</a>
} @else {
<a
routerLink="/downloads"
class="inline-flex items-center gap-2 px-8 py-4 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-2xl shadow-purple-500/25"
>
Download Toju
</a>
}
<a
href="https://web.toju.app/"
target="_blank"
rel="noopener"
class="inline-flex items-center gap-2 px-8 py-4 rounded-xl border border-border/50 bg-card/50 text-foreground font-medium hover:border-purple-500/30 transition-all"
>
Try in Browser
</a>
</div>
</div>
</section>

284
website/src/app/pages/home/home.component.ts
View File

@@ -7,7 +7,7 @@ import {
PLATFORM_ID,
signal
} from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { isPlatformBrowser, NgOptimizedImage } from '@angular/common';
import { RouterLink } from '@angular/router';
import { ReleaseService, DetectedOS } from '../../services/release.service';
import { SeoService } from '../../services/seo.service';
@@ -19,288 +19,34 @@ import { ParallaxDirective } from '../../directives/parallax.directive';
selector: 'app-home',
standalone: true,
imports: [
NgOptimizedImage,
RouterLink,
AdSlotComponent,
ParallaxDirective
],
template: `
<!-- Hero -->
<section class="relative min-h-screen flex items-center justify-center overflow-hidden">
<!-- Gradient orbs -->
<div [appParallax]="0.15" class="absolute top-1/4 -left-32 w-96 h-96 bg-purple-600/20 rounded-full blur-[128px] animate-float"></div>
<div [appParallax]="0.25" class="absolute bottom-1/4 -right-32 w-80 h-80 bg-violet-500/15 rounded-full blur-[100px] animate-float" style="animation-delay: -3s;"></div>
<div class="relative z-10 container mx-auto px-6 text-center pt-32 pb-20">
<div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-purple-500/30 bg-purple-500/10 text-purple-400 text-sm font-medium mb-8 animate-fade-in">
<span class="w-2 h-2 rounded-full bg-purple-400 animate-pulse"></span>
Currently in Beta - Free &amp; Open Source
</div>
<h1 class="text-5xl md:text-7xl lg:text-8xl font-extrabold tracking-tight mb-6 animate-fade-in-up">
<span class="text-foreground">Talk freely.</span><br>
<span class="gradient-text">Own your voice.</span>
</h1>
<p class="text-lg md:text-xl text-muted-foreground max-w-2xl mx-auto mb-10 leading-relaxed animate-fade-in-up" style="animation-delay: 0.2s;">
Crystal-clear voice calls, unlimited screen sharing, and file transfers with no size limits.
Peer-to-peer. Private. Completely free.
</p>
<!-- CTA Buttons -->
<div class="flex flex-col sm:flex-row items-center justify-center gap-4 mb-6 animate-fade-in-up" style="animation-delay: 0.4s;">
@if (downloadUrl()) {
<a
[href]="downloadUrl()"
class="group inline-flex items-center gap-3 px-8 py-4 rounded-xl bg-gradient-to-r from-purple-600 to-violet-600 text-white font-semibold text-lg hover:from-purple-500 hover:to-violet-500 transition-all shadow-2xl shadow-purple-500/25 hover:shadow-purple-500/40 animate-glow-pulse"
>
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
Download for {{ detectedOS().name }}
<span class="text-sm opacity-75">{{ detectedOS().icon }}</span>
</a>
} @else {
<a
routerLink="/downloads"
class="group inline-flex items-center gap-3 px-8 py-4 rounded-xl bg-gradient-to-r from-purple-600 to-violet-600 text-white font-semibold text-lg hover:from-purple-500 hover:to-violet-500 transition-all shadow-2xl shadow-purple-500/25 hover:shadow-purple-500/40"
>
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
Download Toju
</a>
}
<a
href="https://web.toju.app/"
target="_blank"
rel="noopener"
class="inline-flex items-center gap-2 px-8 py-4 rounded-xl border border-border/50 bg-card/50 text-foreground font-medium text-lg hover:bg-card hover:border-purple-500/30 transition-all backdrop-blur-sm"
>
Open in Browser
<svg class="w-5 h-5 opacity-60" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
</a>
</div>
@if (latestVersion()) {
<p class="text-xs text-muted-foreground/60 animate-fade-in" style="animation-delay: 0.6s;">
Version {{ latestVersion() }} · <a routerLink="/downloads" class="underline hover:text-muted-foreground transition-colors">All platforms</a>
</p>
}
<!-- Scroll indicator -->
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
<svg class="w-6 h-6 text-muted-foreground/40" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3"/></svg>
</div>
</div>
</section>
<app-ad-slot />
<!-- Features Grid -->
<section class="relative py-32">
<div class="container mx-auto px-6">
<div class="text-center mb-20 section-fade">
<h2 class="text-3xl md:text-5xl font-bold text-foreground mb-4">Everything you need,<br><span class="gradient-text">nothing you don't.</span></h2>
<p class="text-muted-foreground text-lg max-w-xl mx-auto">No bloat. No paywalls. Just the tools to connect with the people who matter.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Voice Calls -->
<div class="section-fade group relative rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-8 hover:border-purple-500/30 hover:bg-card/50 transition-all duration-300">
<div class="w-12 h-12 rounded-xl bg-purple-500/10 flex items-center justify-center mb-6 group-hover:bg-purple-500/20 transition-colors">
<svg class="w-6 h-6 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"/></svg>
</div>
<h3 class="text-xl font-semibold text-foreground mb-3">HD Voice Calls</h3>
<p class="text-muted-foreground leading-relaxed">Crystal-clear audio with built-in noise reduction. Hear every word, not the background. No quality compromises, ever.</p>
</div>
<!-- Screen Sharing -->
<div class="section-fade group relative rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-8 hover:border-purple-500/30 hover:bg-card/50 transition-all duration-300" style="transition-delay: 0.1s;">
<div class="w-12 h-12 rounded-xl bg-violet-500/10 flex items-center justify-center mb-6 group-hover:bg-violet-500/20 transition-colors">
<svg class="w-6 h-6 text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
</div>
<h3 class="text-xl font-semibold text-foreground mb-3">Screen Sharing</h3>
<p class="text-muted-foreground leading-relaxed">Share your screen at full resolution. No time limits, no quality downgrades. Perfect for pair programming, presentations, or showing your epic gameplay.</p>
</div>
<!-- File Sharing -->
<div class="section-fade group relative rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-8 hover:border-purple-500/30 hover:bg-card/50 transition-all duration-300" style="transition-delay: 0.2s;">
<div class="w-12 h-12 rounded-xl bg-pink-500/10 flex items-center justify-center mb-6 group-hover:bg-pink-500/20 transition-colors">
<svg class="w-6 h-6 text-pink-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/></svg>
</div>
<h3 class="text-xl font-semibold text-foreground mb-3">Unlimited File Sharing</h3>
<p class="text-muted-foreground leading-relaxed">Send files of any size directly to your friends. No upload limits, no compression. Your files go straight from you to them.</p>
</div>
<!-- Privacy -->
<div class="section-fade group relative rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-8 hover:border-purple-500/30 hover:bg-card/50 transition-all duration-300">
<div class="w-12 h-12 rounded-xl bg-emerald-500/10 flex items-center justify-center mb-6 group-hover:bg-emerald-500/20 transition-colors">
<svg class="w-6 h-6 text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
</div>
<h3 class="text-xl font-semibold text-foreground mb-3">True Privacy</h3>
<p class="text-muted-foreground leading-relaxed">Peer-to-peer means your data goes directly between you and your friends. No servers storing your conversations. Your business is your business.</p>
</div>
<!-- Open Source -->
<div class="section-fade group relative rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-8 hover:border-purple-500/30 hover:bg-card/50 transition-all duration-300" style="transition-delay: 0.1s;">
<div class="w-12 h-12 rounded-xl bg-blue-500/10 flex items-center justify-center mb-6 group-hover:bg-blue-500/20 transition-colors">
<svg class="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
</div>
<h3 class="text-xl font-semibold text-foreground mb-3">Open Source</h3>
<p class="text-muted-foreground leading-relaxed">Every line of code is public. Audit it, modify it, host your own signal server. Full transparency - nothing is hidden.</p>
</div>
<!-- Free -->
<div class="section-fade group relative rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-8 hover:border-purple-500/30 hover:bg-card/50 transition-all duration-300" style="transition-delay: 0.2s;">
<div class="w-12 h-12 rounded-xl bg-amber-500/10 flex items-center justify-center mb-6 group-hover:bg-amber-500/20 transition-colors">
<svg class="w-6 h-6 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
</div>
<h3 class="text-xl font-semibold text-foreground mb-3">Completely Free</h3>
<p class="text-muted-foreground leading-relaxed">No premium tiers. No paywalls. No "starter plans". Every feature is available to everyone, always. Made with love, not profit margins.</p>
</div>
</div>
</div>
</section>
<app-ad-slot />
<!-- Gaming Section -->
<section class="relative py-32">
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-purple-950/10 to-transparent"></div>
<div class="relative container mx-auto px-6">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
<div class="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">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
Built for Gamers
</div>
<h2 class="text-3xl md:text-5xl font-bold text-foreground mb-6">
Your perfect<br><span class="gradient-text">gaming companion.</span>
</h2>
<p class="text-lg text-muted-foreground leading-relaxed mb-8">
Ultra-low latency voice chat that doesn't eat your bandwidth. Share your screen without frame drops. Send clips and files instantly. All while keeping your CPU free for what matters - winning.
</p>
<ul class="space-y-4">
<li class="flex items-center gap-3 text-muted-foreground">
<svg class="w-5 h-5 text-purple-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
<span>Low-latency peer-to-peer voice - no relay servers in the way</span>
</li>
<li class="flex items-center gap-3 text-muted-foreground">
<svg class="w-5 h-5 text-purple-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
<span>AI-powered noise suppression - keyboard clatter stays out</span>
</li>
<li class="flex items-center gap-3 text-muted-foreground">
<svg class="w-5 h-5 text-purple-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
<span>Full-resolution screen sharing at high FPS</span>
</li>
<li class="flex items-center gap-3 text-muted-foreground">
<svg class="w-5 h-5 text-purple-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
<span>Send replays and screenshots with no file size limit</span>
</li>
</ul>
</div>
<div class="section-fade relative">
<div class="relative rounded-2xl overflow-hidden border border-border/30 bg-card/30 backdrop-blur-sm aspect-video">
<video
autoplay
muted
loop
playsinline
class="w-full h-full object-cover"
poster=""
>
<source src="https://cdn.pixabay.com/video/2024/04/08/207248_large.mp4" type="video/mp4" />
</video>
<div class="absolute inset-0 bg-gradient-to-t from-background/80 via-transparent to-transparent"></div>
<div class="absolute bottom-4 left-4 text-sm text-muted-foreground/60">
Game on. No limits.
</div>
</div>
<!-- Glow effect -->
<div class="absolute -inset-4 bg-purple-600/5 rounded-3xl blur-2xl -z-10"></div>
</div>
</div>
</div>
</section>
<app-ad-slot />
<!-- Self-hostable Section -->
<section class="relative py-32">
<div class="container mx-auto px-6">
<div class="section-fade max-w-3xl mx-auto text-center">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-sm font-medium mb-6">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2"/></svg>
Self-Hostable
</div>
<h2 class="text-3xl md:text-5xl font-bold text-foreground mb-6">
Your infrastructure,<br><span class="gradient-text">your rules.</span>
</h2>
<p class="text-lg text-muted-foreground leading-relaxed mb-8">
Toju uses a lightweight coordination server to help peers find each other - that's it. Your actual conversations never touch a server.
Want even more control? Run your own coordination server in minutes. Full independence, zero compromises.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a routerLink="/what-is-toju" 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">
Learn how it works
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
</a>
<a href="https://git.azaaxin.com/myxelium/Toju" target="_blank" rel="noopener" class="inline-flex items-center gap-2 px-6 py-3 text-muted-foreground hover:text-foreground transition-colors text-sm">
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
View source code
</a>
</div>
</div>
</div>
</section>
<!-- CTA Banner -->
<section class="relative py-24">
<div class="absolute inset-0 bg-gradient-to-r from-purple-950/20 via-violet-950/30 to-purple-950/20"></div>
<div class="relative container mx-auto px-6 text-center section-fade">
<h2 class="text-3xl md:text-4xl font-bold text-foreground mb-4">Ready to take back your conversations?</h2>
<p class="text-muted-foreground text-lg mb-8 max-w-lg mx-auto">Join thousands choosing privacy, freedom, and real connection.</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
@if (downloadUrl()) {
<a
[href]="downloadUrl()"
class="inline-flex items-center gap-2 px-8 py-4 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-2xl shadow-purple-500/25"
>
Download for {{ detectedOS().name }}
</a>
} @else {
<a
routerLink="/downloads"
class="inline-flex items-center gap-2 px-8 py-4 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-2xl shadow-purple-500/25"
>
Download Toju
</a>
}
<a
href="https://web.toju.app/"
target="_blank"
rel="noopener"
class="inline-flex items-center gap-2 px-8 py-4 rounded-xl border border-border/50 bg-card/50 text-foreground font-medium hover:border-purple-500/30 transition-all"
>
Try in Browser
</a>
</div>
</div>
</section>
`
templateUrl: './home.component.html'
})
export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
readonly detectedOS = signal<DetectedOS>({
name: 'Linux',
icon: '🐧',
filePattern: /\.AppImage$/i,
ymlFile: 'latest-linux.yml'
});
readonly downloadUrl = signal<string | null>(null);
readonly latestVersion = signal<string | null>(null);
private readonly releaseService = inject(ReleaseService);
private readonly seoService = inject(SeoService);
private readonly scrollAnimation = inject(ScrollAnimationService);
private readonly platformId = inject(PLATFORM_ID);
readonly detectedOS = signal<DetectedOS>({ name: 'Linux', icon: '🐧', filePattern: /\.AppImage$/i, ymlFile: 'latest-linux.yml' });
readonly downloadUrl = signal<string | null>(null);
readonly latestVersion = signal<string | null>(null);
ngOnInit(): void {
this.seoService.update({
title: 'Free Peer-to-Peer Voice, Video & Chat',
description: 'Toju is a free, open-source, peer-to-peer communication app. Crystal-clear voice calls, unlimited screen sharing, no file size limits, complete privacy.',
description:
'Toju is a free, open-source, peer-to-peer communication app. Crystal-clear voice calls, unlimited screen sharing, '
+ 'no file size limits, complete privacy.',
url: 'https://toju.app/'
});