forked from emre/www_projectmycelium_com
sasha-astiadi
29e2d942de
- Replaced em dashes with commas for better readability in descriptions - Standardized punctuation in aria-labels (changed "—" to ",") - Removed unnecessary em dashes in favor of commas or removed punctuation - Fixed inconsistent spacing around punctuation marks - Improved sentence flow in multiple component descriptions
62 lines
2.4 KiB
TypeScript
62 lines
2.4 KiB
TypeScript
"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 (
|
||
<section className="w-full max-w-8xl mx-auto bg-transparent">
|
||
|
||
{/* ✅ Boxed container */}
|
||
<div className="max-w-7xl bg-white mx-auto py-12 border border-t-0 border-b-0 border-gray-100">
|
||
<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, which is 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>
|
||
|
||
{/* ✅ Bottom line + bottom spacer */}
|
||
<div className="w-full border-b border-gray-100" />
|
||
<div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100 bg-transparent" />
|
||
</section>
|
||
);
|
||
}
|