forked from emre/www_projectmycelium_com
feat: redesign cloud page sections with improved layout and branding
- Added logo assets for featured applications (CryptPad, Gitea, Matrix, Nextcloud, Stalwart, LifeKit) - Restructured CallToAction, CloudBluePrint, and CloudUseCases components with consistent boxed layouts and border styling - Enhanced hover effects on architecture layers and use case cards with scale transforms - Updated button styling and improved responsive grid layouts for better visual hierarchy
This commit is contained in:
@@ -1,55 +1,56 @@
|
||||
"use client";
|
||||
|
||||
import { CircleBackground } from '../../components/CircleBackground'
|
||||
import { Container } from '@/components/Container'
|
||||
import { Button } from '@/components/Button'
|
||||
import { Container } from "@/components/Container";
|
||||
import { Button } from "@/components/Button";
|
||||
|
||||
export function CallToAction() {
|
||||
return (
|
||||
<section
|
||||
id="get-started"
|
||||
className="relative overflow-hidden bg-gray-900 py-24 lg:py-32"
|
||||
>
|
||||
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
|
||||
<CircleBackground color="#06b6d4" className="animate-spin-slower" />
|
||||
</div>
|
||||
<section className="relative overflow-hidden bg-gray-900">
|
||||
{/* ✅ Top horizontal line with spacing */}
|
||||
<div className="max-w-7xl bg-[#090909] mx-auto py-6 border border-t-0 border-b-0 border-gray-700"></div>
|
||||
<div className="w-full border-t border-l border-r border-gray-700" />
|
||||
|
||||
<Container className="relative">
|
||||
<div className="mx-auto max-w-xl text-center">
|
||||
<h2 className="text-3xl font-medium tracking-tight text-white sm:text-4xl lg:text-4xl">
|
||||
Choose How You Want to Start
|
||||
</h2>
|
||||
{/* ✅ Main boxed area */}
|
||||
<div
|
||||
id="get-started"
|
||||
className="relative py-18 max-w-7xl mx-auto bg-[#090909] border border-t-0 border-b-0 border-gray-700"
|
||||
>
|
||||
|
||||
|
||||
<p className="mt-6 text-lg text-gray-300">
|
||||
Host your own node to contribute capacity or deploy workloads using the Mycelium Cloud.
|
||||
</p>
|
||||
<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">
|
||||
Choose How You Want to Start
|
||||
</h2>
|
||||
|
||||
<div className="mt-10 flex flex-wrap justify-center gap-x-6 gap-y-4">
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<h3 className="text-lg font-semibold text-white">Host a Node</h3>
|
||||
<p className="mt-2 text-gray-300">
|
||||
Add compute to the network and run your own environment.
|
||||
</p>
|
||||
<Button to="/host" variant="solid" color="cyan" className="mt-4">
|
||||
Host a Node
|
||||
</Button>
|
||||
</div>
|
||||
<p className="mt-6 text-lg text-gray-300">
|
||||
Host your own node to contribute capacity or deploy workloads using the Mycelium Cloud.
|
||||
You don’t need to host before deploying, and you don’t need to deploy before hosting.
|
||||
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col items-center text-center">
|
||||
<h3 className="text-lg font-semibold text-white">Deploy Workloads</h3>
|
||||
<p className="mt-2 text-gray-300">
|
||||
Run Kubernetes clusters, agents, and services on the Mycelium Cloud.
|
||||
</p>
|
||||
<Button to="/cloud" variant="outline" color="white" className="mt-4">
|
||||
Start Deploying
|
||||
</Button>
|
||||
{/* ✅ Two cards, stacked center with spacing */}
|
||||
<div className="mt-10 flex flex-wrap justify-center gap-x-10 gap-y-8">
|
||||
<div className="flex flex-col items-center text-center max-w-xs">
|
||||
<Button to="/host" variant="solid" color="cyan" className="mt-4">
|
||||
Host a Node
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center text-center max-w-xs">
|
||||
<Button to="/cloud" variant="outline" color="dark" className="mt-4">
|
||||
Start Deploying
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
|
||||
<p className="mt-10 text-gray-300 text-lg max-w-md mx-auto">
|
||||
You don’t need to host before deploying, and you don’t need to deploy before hosting.
|
||||
Start wherever it makes sense for you.
|
||||
</p>
|
||||
</div>
|
||||
</Container>
|
||||
{/* ✅ Bottom horizontal line with spacing */}
|
||||
<div className="w-full border-b border-gray-700" />
|
||||
<div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-700 bg-transparent" />
|
||||
</section>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -56,12 +56,12 @@ export function CloudArchitecture() {
|
||||
<ul
|
||||
role="list"
|
||||
className="mx-auto mt-12 grid max-w-2xl grid-cols-1 gap-6 text-sm
|
||||
sm:grid-cols-2 lg:max-w-none lg:grid-cols-3 md:gap-y-10"
|
||||
sm:grid-cols-2 lg:max-w-none lg:grid-cols-3 md:gap-y-10 "
|
||||
>
|
||||
{architecture.map((layer) => (
|
||||
<li
|
||||
key={layer.title}
|
||||
className="rounded-xl border border-gray-800 bg-[#111]/60 p-6"
|
||||
className="rounded-xl border border-gray-800 bg-[#111]/60 p-6 hover:transform-[scale(1.05)]"
|
||||
>
|
||||
{layer.icon} {/* ✅ this now works */}
|
||||
<h3 className="text-lg font-semibold text-white">{layer.title}</h3>
|
||||
|
||||
@@ -1,52 +1,61 @@
|
||||
import { H3, P, Eyebrow } from '@/components/Texts'
|
||||
"use client";
|
||||
|
||||
import { Container } from "@/components/Container";
|
||||
import { H3, P, Eyebrow } from "@/components/Texts";
|
||||
|
||||
export function CloudBluePrint() {
|
||||
const logos = [
|
||||
{ src: '/images/logo/cryptpad.png', href: 'https://cryptpad.fr' },
|
||||
{ src: '/images/logo/gitea.png', href: 'https://about.gitea.com' },
|
||||
{ src: '/images/logo/lifekit.png', href: '#' }, // No link available
|
||||
{ src: '/images/logo/matrix.png', href: 'https://matrix.org' },
|
||||
{ src: '/images/logo/nextcloud.png', href: 'https://nextcloud.com' },
|
||||
{ src: '/images/logo/stalwart.png', href: 'https://stalw.art' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="bg-white py-24 sm:py-32">
|
||||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<Eyebrow color="accent">Featured Blueprint</Eyebrow>
|
||||
<H3 color="primary">Your Personal Sovereign Cloud Workspace</H3>
|
||||
<P color="primary">Digital Me is an example environment built to demonstrate what’s possible on top of the Mycelium Stack, a full personal cloud you can deploy, customize, or extend.
|
||||
Your files, communication, apps, and optional AI agent, all running privately on infrastructure you choose.</P>
|
||||
<div className="mx-auto mt-10 grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-10 sm:max-w-xl sm:grid-cols-6 sm:gap-x-10 lg:mx-0 lg:max-w-none lg:grid-cols-5">
|
||||
<img
|
||||
alt="Transistor"
|
||||
src="https://tailwindcss.com/plus-assets/img/logos/158x48/transistor-logo-gray-900.svg"
|
||||
width={158}
|
||||
height={48}
|
||||
className="col-span-2 max-h-12 w-full object-contain lg:col-span-1"
|
||||
/>
|
||||
<img
|
||||
alt="Reform"
|
||||
src="https://tailwindcss.com/plus-assets/img/logos/158x48/reform-logo-gray-900.svg"
|
||||
width={158}
|
||||
height={48}
|
||||
className="col-span-2 max-h-12 w-full object-contain lg:col-span-1"
|
||||
/>
|
||||
<img
|
||||
alt="Tuple"
|
||||
src="https://tailwindcss.com/plus-assets/img/logos/158x48/tuple-logo-gray-900.svg"
|
||||
width={158}
|
||||
height={48}
|
||||
className="col-span-2 max-h-12 w-full object-contain lg:col-span-1"
|
||||
/>
|
||||
<img
|
||||
alt="SavvyCal"
|
||||
src="https://tailwindcss.com/plus-assets/img/logos/158x48/savvycal-logo-gray-900.svg"
|
||||
width={158}
|
||||
height={48}
|
||||
className="col-span-2 max-h-12 w-full object-contain sm:col-start-2 lg:col-span-1"
|
||||
/>
|
||||
<img
|
||||
alt="Statamic"
|
||||
src="https://tailwindcss.com/plus-assets/img/logos/158x48/statamic-logo-gray-900.svg"
|
||||
width={158}
|
||||
height={48}
|
||||
className="col-span-2 col-start-2 max-h-12 w-full object-contain sm:col-start-auto lg:col-span-1"
|
||||
/>
|
||||
</div>
|
||||
<section className="w-full max-w-8xl mx-auto bg-transparent">
|
||||
|
||||
{/* ✅ Boxed container */}
|
||||
<div className="max-w-7xl bg-white mx-auto pb-12 border border-t-0 border-b-0 border-gray-200">
|
||||
<Container>
|
||||
<div className="mx-auto max-w-4xl sm:text-center">
|
||||
<Eyebrow className="text-cyan-500">Featured Blueprint</Eyebrow>
|
||||
|
||||
<H3 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900 mt-2">
|
||||
Your Personal Sovereign Cloud Workspace
|
||||
</H3>
|
||||
|
||||
<P className="mt-6 text-lg text-gray-600">
|
||||
Digital Me is an example environment built to demonstrate what’s possible on top of the Mycelium Stack — a full personal cloud you can deploy, customize, or extend. Your files, communication, apps, and optional AI agent, all running privately on infrastructure you choose.
|
||||
</P>
|
||||
</div>
|
||||
|
||||
{/* ✅ 3x2 logo grid */}
|
||||
<div className="mt-12 grid grid-cols-3 gap-x-8 gap-y-12">
|
||||
{logos.map((logo, i) => (
|
||||
<div key={i} className="flex justify-center">
|
||||
<a
|
||||
href={logo.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="transition-transform duration-300 hover:scale-105"
|
||||
>
|
||||
<img
|
||||
src={logo.src}
|
||||
alt={`Logo ${i + 1}`}
|
||||
className="max-h-12 w-auto object-contain"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
{/* ✅ Bottom line + bottom spacer */}
|
||||
<div className="w-full border-b border-gray-200" />
|
||||
<div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-200 bg-transparent" />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import { Container } from '@/components/Container'
|
||||
import { Eyebrow, SectionHeader, P, Small } from '@/components/Texts'
|
||||
import { Eyebrow, H3, P, Small } from '@/components/Texts'
|
||||
|
||||
const useCases = [
|
||||
{
|
||||
@@ -36,53 +38,74 @@ const useCases = [
|
||||
|
||||
export function CloudUseCases() {
|
||||
return (
|
||||
<section className="bg-white py-24 sm:py-32">
|
||||
<Container>
|
||||
<div className="mx-auto max-w-3xl text-center">
|
||||
<Eyebrow>
|
||||
Use Cases
|
||||
</Eyebrow>
|
||||
<SectionHeader as="h2" className="mt-6 text-gray-900">
|
||||
Built for intelligent workloads across every edge.
|
||||
</SectionHeader>
|
||||
<P className="mt-6 text-gray-600">
|
||||
Mycelium Cloud unifies compute, storage, and networking so teams can
|
||||
launch anything from GPU inference farms to global collaboration
|
||||
suites with deterministic outcomes.
|
||||
</P>
|
||||
</div>
|
||||
<div className="mt-16 grid gap-8 lg:grid-cols-2">
|
||||
{useCases.map((useCase) => (
|
||||
<div
|
||||
key={useCase.title}
|
||||
className="flex h-full flex-col rounded-3xl border border-slate-200 bg-white p-8 shadow-sm transition hover:-translate-y-1 hover:border-cyan-300 hover:shadow-lg"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-xl font-semibold text-gray-900">
|
||||
{useCase.title}
|
||||
</h3>
|
||||
<Small className="text-xs uppercase tracking-[0.3em] text-cyan-500">
|
||||
Scenario
|
||||
</Small>
|
||||
</div>
|
||||
<p className="mt-4 text-sm leading-relaxed text-gray-600">
|
||||
{useCase.description}
|
||||
</p>
|
||||
<ul className="mt-6 space-y-3 text-sm text-gray-600">
|
||||
{useCase.bullets.map((bullet) => (
|
||||
<li
|
||||
key={bullet}
|
||||
className="flex items-start gap-3 rounded-2xl border border-cyan-100 bg-cyan-50/60 p-3 leading-relaxed"
|
||||
>
|
||||
<span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
|
||||
<span>{bullet}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Container>
|
||||
<section className="w-full max-w-8xl mx-auto bg-transparent">
|
||||
|
||||
{/* ✅ Top horizontal line with spacing */}
|
||||
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
|
||||
<div className="w-full border-t border-l border-r border-gray-200" />
|
||||
|
||||
{/* ✅ Inner boxed container */}
|
||||
<div className="max-w-7xl bg-white mx-auto py-12 border border-t-0 border-b-0 border-gray-200">
|
||||
<Container>
|
||||
<div className="mx-auto max-w-4xl sm:text-center">
|
||||
<Eyebrow className="text-cyan-500">USE CASES</Eyebrow>
|
||||
|
||||
<H3 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
|
||||
Built for intelligent workloads across every edge.
|
||||
</H3>
|
||||
|
||||
<P className="mt-6 text-lg text-gray-600">
|
||||
Mycelium Cloud unifies compute, storage, and networking so teams can
|
||||
launch anything from GPU inference farms to global collaboration suites
|
||||
with deterministic outcomes.
|
||||
</P>
|
||||
</div>
|
||||
|
||||
{/* ✅ 3 columns on desktop */}
|
||||
<ul
|
||||
role="list"
|
||||
className="mx-auto mt-12 grid max-w-2xl grid-cols-1 gap-6
|
||||
sm:grid-cols-2 lg:max-w-none lg:grid-cols-3 md:gap-y-10"
|
||||
>
|
||||
{useCases.map((useCase) => (
|
||||
<li
|
||||
key={useCase.title}
|
||||
className="rounded-md border border-gray-200 bg-white p-6 transition-all duration-300
|
||||
hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 flex flex-col"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="font-semibold text-gray-900">
|
||||
{useCase.title}
|
||||
</h3>
|
||||
<Small className="uppercase tracking-[0.25em] text-cyan-500">
|
||||
Scenario
|
||||
</Small>
|
||||
</div>
|
||||
|
||||
<p className="mt-4 text-gray-700 leading-snug">
|
||||
{useCase.description}
|
||||
</p>
|
||||
|
||||
<ul className="mt-6 space-y-3 text-sm text-gray-600">
|
||||
{useCase.bullets.map((bullet) => (
|
||||
<li
|
||||
key={bullet}
|
||||
className="flex items-start gap-3 rounded-2xl border border-cyan-100 bg-cyan-50/60 p-3 leading-relaxed"
|
||||
>
|
||||
<span className="mt-1 inline-block size-2 rounded-full bg-cyan-500" />
|
||||
<span>{bullet}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Container>
|
||||
</div>
|
||||
|
||||
{/* ✅ Bottom horizontal line + spacing */}
|
||||
<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"></div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user