feat: streamline cloud and pods pages with improved CTAs and content

- Replaced CloudCodeTabs with static reserve image in CloudIntro
- Added dynamic action buttons (Deploy, Follow Development, View Docs) to CloudIntro tabs
- Removed CloudFeaturesLight section from CloudPage
- Enhanced Pods CallToAction with benefits checklist and expanded early adopter messaging
- Added CTA buttons to Homepod component with waitlist and docs links
- Removed PodsBenefits section from PodsPage
- Updated Homepod description
This commit is contained in:
2025-11-17 13:01:56 +01:00
parent 1c37cc08ee
commit def0972762
5 changed files with 97 additions and 15 deletions

View File

@@ -2,6 +2,16 @@
import { Button } from "@/components/Button";
import { Container } from "@/components/Container";
import { CheckCircleIcon } from "@heroicons/react/20/solid";
const benefits = [
'Private chat and calls',
'Calendar and file sync',
'Secure team spaces',
'Early AI Agent integration',
]
export function CallToAction() {
return (
@@ -38,11 +48,36 @@ export function CallToAction() {
<Container className="relative">
<div className="mx-auto max-w-3xl text-center">
<h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
Join the First Wave
Be Among The First
</h2>
<p className="mt-6 text-lg text-gray-300">
Pods are launching soon. Be among the first to claim your private space in the new internet.
The first Pods are launching soon.
10,000 early Pods will be available for early adopters.
</p>
<div className="mt-10 flex items-center justify-center">
<ul
role="list"
className="grid grid-cols-1 gap-x-8 gap-y-3 text-left text-base/7 text-gray-200 sm:grid-cols-2"
>
{benefits.map((benefit) => (
<li key={benefit} className="flex items-start gap-x-3">
<CheckCircleIcon
aria-hidden="true"
className="mt-1 h-7 w-5 flex-none text-gray-200"
/>
<span>{benefit}</span>
</li>
))}
</ul>
</div>
<p className="mt-6 text-lg text-gray-300">
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. Be among the first to claim
your private space on the Mycelium Network.
</p>
{/* ✅ Two cards, stacked center with spacing */}
@@ -55,7 +90,7 @@ export function CallToAction() {
<div className="flex flex-col items-center text-center max-w-xs">
<Button to="#" variant="outline" color="white" className="mt-4">
Deploy Pods in Your Community
Learn More
</Button>
</div>
</div>

View File

@@ -1,6 +1,10 @@
import { H3, Eyebrow, P } from "@/components/Texts"
import { Button } from "@/components/Button"
export default function Homepod() {
const onGetStartedClick = () => {
console.log("Get started clicked");
};
return (
<div className="">
{/* Boxed container */}
@@ -18,10 +22,20 @@ export default function Homepod() {
Your Private Space in the New Internet
</H3>
<P className="mt-6 text-gray-800">
Imagine having your own corner of the internet private, secure, and always online.
A Pod is your personal digital space on the Mycelium Network.
Its where your conversations, files, and digital tools live owned by you, connected to others directly.
Pods are personal digital spaces on the Mycelium Network. They are private, persistent, and fully under your control. Run conversations, files, and tools directly on the network instead of through central servers
</P>
<div className="mt-8 flex items-center gap-x-6">
<Button
variant="solid"
color="cyan"
onClick={onGetStartedClick}
>
Join the Waitlist
</Button>
<Button to="#" variant="outline">
Explore Docs
</Button>
</div>
</div>
</div>

View File

@@ -2,7 +2,6 @@ import Homepod from './Homepod';
import { PodsHow } from './PodsHow';
import { PodsFeatures } from './PodsFeatures';
import { PodsDesign } from './PodsDesign';
import { PodsBenefits } from './PodsBenefits';
import { CallToAction } from './CallToAction';
import { PodsWhat } from './PodsWhat';
@@ -14,7 +13,6 @@ const PodsPage = () => {
<PodsFeatures />
<PodsHow />
<PodsDesign />
<PodsBenefits />
<CallToAction />
</>
);