feat: add comprehensive Pods landing page sections

- Created new sections including benefits grid, federation design, upcoming features, and call-to-action
- Added pricing tiers component with three Pod subscription levels
- Updated existing sections with refined messaging and improved visual hierarchy
This commit is contained in:
2025-11-13 14:52:24 +01:00
parent aa6f475050
commit 7b80ab84c9
8 changed files with 501 additions and 9 deletions

View File

@@ -0,0 +1,95 @@
import {
ChatBubbleLeftRightIcon,
CalendarDaysIcon,
UsersIcon,
CpuChipIcon,
} from '@heroicons/react/24/solid'
import { Button } from '@/components/Button'
import { Eyebrow, H4, P } from '@/components/Texts'
export function PodsComing() {
return (
<section className="w-full max-w-8xl mx-auto bg-white">
{/* Top horizontal line */}
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200" />
<div className="w-full border-t border-l border-r border-gray-200" />
{/* Main content */}
<div className="mx-auto max-w-7xl px-6 bg-white lg:px-8 grid grid-cols-1 lg:grid-cols-2 gap-20 py-12 border border-t-0 border-b-0 border-gray-200">
{/* LEFT SIDE Title + Intro */}
<div className="max-w-xl">
<Eyebrow className="text-cyan-600">COMING SOON</Eyebrow>
<H4 className="mt-6 text-gray-900">
Be Among The First
</H4>
<P className="mt-6 text-gray-700">
The first Pods are launching soon.
10,000 early Pods will be available for early adopters. Next, Pods will support peer-to-peer AI Agents that live inside your environment.
Your own AI, powered by your data without any data leaks.
</P>
</div>
{/* RIGHT SIDE — 4 upcoming features */}
<div className="space-y-10">
{/* 1 — Private Chat & Calls */}
<div>
<h3 className="text-lg font-semibold text-gray-900 flex items-center">
<ChatBubbleLeftRightIcon className="h-6 w-6 text-cyan-600 mr-3" />
Private Chat & Calls
</h3>
<p className="mt-2 text-gray-700 max-w-2xl">
Peer-to-peer conversations and calling routed directly between Pods.
</p>
<div className="mt-8 h-px w-full bg-cyan-200" />
</div>
{/* 2 — Calendar & File Sync */}
<div>
<h3 className="text-lg font-semibold text-gray-900 flex items-center">
<CalendarDaysIcon className="h-6 w-6 text-cyan-600 mr-3" />
Calendar & File Sync
</h3>
<p className="mt-2 text-gray-700 max-w-2xl">
Your schedules, documents, and files synced across your Pods with no central cloud.
</p>
<div className="mt-8 h-px w-full bg-cyan-200" />
</div>
{/* 3 — Secure Team Spaces */}
<div>
<h3 className="text-lg font-semibold text-gray-900 flex items-center">
<UsersIcon className="h-6 w-6 text-cyan-600 mr-3" />
Secure Team Spaces
</h3>
<p className="mt-2 text-gray-700 max-w-2xl">
Create shared Pods for teams, communities, or groups fully encrypted, fully sovereign.
</p>
<div className="mt-8 h-px w-full bg-cyan-200" />
</div>
{/* 4 — Early AI Agent Integration */}
<div>
<h3 className="text-lg font-semibold text-gray-900 flex items-center">
<CpuChipIcon className="h-6 w-6 text-cyan-600 mr-3" />
Early AI Agent Integration
<span className="ml-2 text-xs text-gray-400">🕒</span>
</h3>
<p className="mt-2 text-gray-700 max-w-2xl">
Host your personal AI agent inside your Pod private, local-first, and fully under your control.
</p>
</div>
</div>
</div>
{/* Bottom horizontal line */}
<div className="w-full border-b border-gray-200" />
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200" />
</section>
)
}