forked from emre/www_projectmycelium_com
sasha-astiadi
e6b194e8c7
- Increased HomeAurora subtitle margin from mt-4 to mt-6 for better spacing - Added bg-white to HomeDesign content container for explicit background - Removed bg-white from HomeTab top separator div - Reduced network Hero title margin from mt-8 to mt-4 and second paragraph margin from mt-6 to mt-4 - Changed network Hero secondary button variant from cyan to dark - Reduced NetworkPros title margin from mt-4 to mt-2
86 lines
3.0 KiB
TypeScript
86 lines
3.0 KiB
TypeScript
"use client";
|
||
|
||
import { Eyebrow, H3, P } from "@/components/Texts";
|
||
|
||
const benefits = [
|
||
{
|
||
id: 1,
|
||
title: "For Integrators & Builders",
|
||
description:
|
||
"Deploy sovereign infrastructure for organizations, governments, and large-scale systems.",
|
||
image: "/images/dev.png",
|
||
},
|
||
{
|
||
id: 2,
|
||
title: "For Enterprises & Institutions",
|
||
description:
|
||
"Protect data, meet local compliance, and unlock new AI capabilities across distributed environments.",
|
||
image: "/images/cons.png",
|
||
},
|
||
{
|
||
id: 3,
|
||
title: "For Sovereignty Seekers",
|
||
description:
|
||
"Run nodes, build applications, and connect directly without relying on centralized platforms.",
|
||
image: "/images/seekers.png",
|
||
},
|
||
];
|
||
|
||
export function HomeDesign() {
|
||
return (
|
||
<section className="w-full max-w-8xl mx-auto bg-white">
|
||
{/* Top spacing line */}
|
||
<div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-100" />
|
||
<div className="w-full border border-l border-r border-gray-100" />
|
||
|
||
{/* Content */}
|
||
<div className="mx-auto max-w-7xl border border-t-0 border-b-0 bg-white border-gray-100">
|
||
{/* Centered intro */}
|
||
<div className="px-6 pt-12 pb-4 text-center max-w-4xl mx-auto ">
|
||
<Eyebrow className="text-cyan-500">
|
||
Who's it For
|
||
</Eyebrow>
|
||
|
||
<H3 className="mt-4 text-black">
|
||
Built for Real-World Impact
|
||
</H3>
|
||
|
||
<P className="mt-4 text-gray-700 text-base leading-relaxed">
|
||
Whether you’re deploying infrastructure, securing sensitive operations, or simply taking back control of your digital life, Mycelium provides the foundation to build confidently in a connected world.
|
||
</P>
|
||
</div>
|
||
|
||
<dl className="grid grid-cols-1 lg:grid-cols-3 gap-2 lg:gap-0">
|
||
{benefits.map((item) => (
|
||
<div
|
||
key={item.id}
|
||
className="mt-8 group flex items-start gap-2 bg-white px-8 py-12 border border-gray-100 lg:border-t lg:border-b border-l-0.5 border-r-0.5 transition-all duration-300 ease-in-out hover:scale-[1.02] hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20"
|
||
>
|
||
{/* Image on the LEFT */}
|
||
<img
|
||
src={item.image}
|
||
alt={item.title}
|
||
className="h-30 w-30 object-contain opacity-90"
|
||
/>
|
||
|
||
{/* Text on the RIGHT */}
|
||
<div className="text-left">
|
||
<h3 className="text-base font-semibold tracking-wide text-gray-900 mb-2">
|
||
{item.title}
|
||
</h3>
|
||
<p className="text-sm text-gray-600 leading-relaxed max-w-xs">
|
||
{item.description}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</dl>
|
||
</div>
|
||
|
||
{/* ✅ Bottom horizontal line with spacing */}
|
||
<div className="w-full border-b border-t border-gray-100" />
|
||
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
|
||
</section>
|
||
);
|
||
}
|