543 lines
21 KiB
HTML
543 lines
21 KiB
HTML
<!-- 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 & 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>
|