forked from emre/www_projectmycelium_com
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:
95
src/pages/pods/PodsComing.tsx
Normal file
95
src/pages/pods/PodsComing.tsx
Normal 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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user