262 lines
13 KiB
HTML
262 lines
13 KiB
HTML
<div class="min-h-screen pt-32 pb-20">
|
|
<!-- Hero -->
|
|
<section class="container mx-auto px-6 mb-24">
|
|
<div class="max-w-3xl mx-auto text-center">
|
|
<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"
|
|
>
|
|
The Big Picture
|
|
</div>
|
|
<h1 class="text-4xl md:text-6xl font-extrabold text-foreground mb-6">What is <span class="gradient-text">Toju</span>?</h1>
|
|
<p class="text-lg text-muted-foreground leading-relaxed">
|
|
Toju is a communication app that lets you voice chat, share your screen, send files, and message your friends - all without your data passing
|
|
through someone else's servers. Think of it as your own private phone line that nobody can tap into.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<app-ad-slot />
|
|
|
|
<!-- How it works -->
|
|
<section class="container mx-auto px-6 mb-24">
|
|
<div class="max-w-4xl mx-auto">
|
|
<h2 class="text-3xl md:text-4xl font-bold text-foreground mb-12 text-center section-fade">
|
|
How does it <span class="gradient-text">work</span>?
|
|
</h2>
|
|
|
|
<div class="grid gap-8">
|
|
<!-- Step 1 -->
|
|
<div class="section-fade relative rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-8 md:p-10">
|
|
<div class="flex items-start gap-6">
|
|
<div
|
|
class="flex-shrink-0 w-12 h-12 rounded-full bg-purple-500/10 border border-purple-500/20 flex items-center justify-center text-purple-400 font-bold text-lg"
|
|
>
|
|
1
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xl font-semibold text-foreground mb-3">You connect directly to your friends</h3>
|
|
<p class="text-muted-foreground leading-relaxed">
|
|
When you start a call or send a file on Toju, your data travels directly from your device to your friend's device. There's no company
|
|
server in the middle storing your conversations, listening to your calls, or scanning your files. This is called
|
|
<strong class="text-foreground">peer-to-peer</strong> - it's like having a direct road between your houses instead of going through a
|
|
toll booth.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 2 -->
|
|
<div class="section-fade relative rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-8 md:p-10">
|
|
<div class="flex items-start gap-6">
|
|
<div
|
|
class="flex-shrink-0 w-12 h-12 rounded-full bg-violet-500/10 border border-violet-500/20 flex items-center justify-center text-violet-400 font-bold text-lg"
|
|
>
|
|
2
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xl font-semibold text-foreground mb-3">A tiny helper gets you connected</h3>
|
|
<p class="text-muted-foreground leading-relaxed">
|
|
The only thing a server does is help your device find your friend's device - like a mutual friend introducing you at a party. Once
|
|
you're connected, the server steps out of the picture entirely. It never sees what you say, share, or send. This helper is called a
|
|
<strong class="text-foreground">signal server</strong>, and you can even run your own if you'd like.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Step 3 -->
|
|
<div class="section-fade relative rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-8 md:p-10">
|
|
<div class="flex items-start gap-6">
|
|
<div
|
|
class="flex-shrink-0 w-12 h-12 rounded-full bg-pink-500/10 border border-pink-500/20 flex items-center justify-center text-pink-400 font-bold text-lg"
|
|
>
|
|
3
|
|
</div>
|
|
<div>
|
|
<h3 class="text-xl font-semibold text-foreground mb-3">No limits because there are no middlemen</h3>
|
|
<p class="text-muted-foreground leading-relaxed">
|
|
Since your data doesn't pass through our servers, we don't need to pay for massive infrastructure. That's why Toju can offer
|
|
<strong class="text-foreground">unlimited screen sharing, file transfers of any size, and high-quality voice</strong> - all completely
|
|
free. There's no business reason to limit what you can do, and we never will.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<app-ad-slot />
|
|
|
|
<!-- Why designed this way -->
|
|
<section class="container mx-auto px-6 mb-24">
|
|
<div class="max-w-4xl mx-auto">
|
|
<h2 class="text-3xl md:text-4xl font-bold text-foreground mb-12 text-center section-fade">
|
|
Why is it <span class="gradient-text">designed</span> this way?
|
|
</h2>
|
|
|
|
<div class="grid md:grid-cols-2 gap-8">
|
|
<div class="section-fade rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-8">
|
|
<div class="w-10 h-10 rounded-lg bg-emerald-500/10 flex items-center justify-center mb-4">
|
|
<svg
|
|
class="w-5 h-5 text-emerald-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-foreground mb-3">Privacy by Architecture</h3>
|
|
<p class="text-muted-foreground leading-relaxed text-sm">
|
|
We didn't just add privacy as a feature - we built the entire app around it. When there's no central server handling your data, there's
|
|
nothing to hack, subpoena, or sell. Your privacy isn't protected by a promise; it's protected by how the technology works.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="section-fade rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-8">
|
|
<div class="w-10 h-10 rounded-lg bg-blue-500/10 flex items-center justify-center mb-4">
|
|
<svg
|
|
class="w-5 h-5 text-blue-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M13 10V3L4 14h7v7l9-11h-7z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-foreground mb-3">Performance Without Compromise</h3>
|
|
<p class="text-muted-foreground leading-relaxed text-sm">
|
|
Direct connections mean lower latency. Your voice reaches your friend faster. Your screen share is smoother. Your file arrives in the time
|
|
it actually takes to transfer - not in the time it takes to upload, store, then download.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="section-fade rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-8">
|
|
<div class="w-10 h-10 rounded-lg bg-amber-500/10 flex items-center justify-center mb-4">
|
|
<svg
|
|
class="w-5 h-5 text-amber-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-foreground mb-3">Sustainable & Free</h3>
|
|
<p class="text-muted-foreground leading-relaxed text-sm">
|
|
Running a traditional chat service with millions of users costs enormous amounts of money for servers. That cost gets passed to you. With
|
|
peer-to-peer, the only infrastructure we run is a tiny coordination server - costing almost nothing. That's how we keep it free
|
|
permanently.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="section-fade rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-8">
|
|
<div class="w-10 h-10 rounded-lg bg-purple-500/10 flex items-center justify-center mb-4">
|
|
<svg
|
|
class="w-5 h-5 text-purple-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-foreground mb-3">Independence & Freedom</h3>
|
|
<p class="text-muted-foreground leading-relaxed text-sm">
|
|
You're not locked into our ecosystem. The code is open source. You can run your own server. If we ever disappeared tomorrow, you could
|
|
still use Toju. Your communication tools should belong to you, not a corporation.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FAQ-style section -->
|
|
<section class="container mx-auto px-6 mb-24">
|
|
<div class="max-w-3xl mx-auto section-fade">
|
|
<h2 class="text-3xl md:text-4xl font-bold text-foreground mb-12 text-center">Common <span class="gradient-text">Questions</span></h2>
|
|
|
|
<div class="space-y-6">
|
|
<div class="rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-6 md:p-8">
|
|
<h3 class="text-lg font-semibold text-foreground mb-2">Is Toju really free? What's the catch?</h3>
|
|
<p class="text-muted-foreground leading-relaxed text-sm">
|
|
Yes, it's really free. There is no catch. Because Toju uses peer-to-peer connections, we don't need expensive server infrastructure. Our
|
|
costs are minimal, and we fund development through community support and donations. Every feature is available to everyone.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-6 md:p-8">
|
|
<h3 class="text-lg font-semibold text-foreground mb-2">Do I need technical knowledge to use Toju?</h3>
|
|
<p class="text-muted-foreground leading-relaxed text-sm">
|
|
Not at all. Toju works like any other chat app - download it, create an account, and start talking. All the peer-to-peer magic happens
|
|
behind the scenes. You just enjoy the benefits of better privacy, performance, and no limits.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-6 md:p-8">
|
|
<h3 class="text-lg font-semibold text-foreground mb-2">What does "self-host the signal server" mean?</h3>
|
|
<p class="text-muted-foreground leading-relaxed text-sm">
|
|
The signal server is a tiny program that helps users find each other online. We run one by default, but if you prefer complete control,
|
|
you can run your own copy on your own hardware. It's like having your own private phone directory - only people you invite can use it.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="rounded-2xl border border-border/30 bg-card/30 backdrop-blur-sm p-6 md:p-8">
|
|
<h3 class="text-lg font-semibold text-foreground mb-2">Is my data safe?</h3>
|
|
<p class="text-muted-foreground leading-relaxed text-sm">
|
|
Your conversations, files, and calls go directly between you and the person you're talking to. They never pass through or get stored on
|
|
our servers. Even if someone broke into our server, there would be nothing to find - because we never had your data in the first place.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA -->
|
|
<section class="container mx-auto px-6">
|
|
<div
|
|
class="section-fade max-w-2xl mx-auto text-center rounded-2xl border border-purple-500/20 bg-gradient-to-br from-purple-950/20 to-violet-950/20 p-12"
|
|
>
|
|
<h2 class="text-2xl md:text-3xl font-bold text-foreground mb-4">Ready to try it?</h2>
|
|
<p class="text-muted-foreground mb-8">Available on Windows, Linux, and in your browser. Always free.</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"
|
|
>
|
|
Download Toju
|
|
</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 in Browser
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|