improvements
This commit is contained in:
@@ -9,36 +9,30 @@ import { H2, P } from '@/components/Texts'
|
||||
|
||||
|
||||
export function HomeBenefits() {
|
||||
const features = [
|
||||
const features = [
|
||||
{
|
||||
title: "Sovereign",
|
||||
description:
|
||||
"Own your infrastructure and your data. Mycelium Cloud eliminates dependency on centralized providers, giving you full digital sovereignty.",
|
||||
icon: <LockClosedIcon className="h-6 w-6 text-cyan-500" />,
|
||||
className:
|
||||
"col-span-1 lg:col-span-4 border-b lg:border-r dark:border-neutral-800",
|
||||
icon: <LockClosedIcon className="h-6 w-6 text-cyan-500" />,
|
||||
},
|
||||
{
|
||||
title: "Autonomous",
|
||||
description:
|
||||
"The cloud that runs itself. From deployment to scaling, Mycelium Cloud automates everything — so your systems stay fast, resilient, and adaptive.",
|
||||
icon: <CogIcon className="h-6 w-6 text-cyan-500" />,
|
||||
className: "border-b col-span-1 lg:col-span-2 dark:border-neutral-800",
|
||||
icon: <CogIcon className="h-6 w-6 text-cyan-500" />,
|
||||
},
|
||||
{
|
||||
title: "Energy Efficient",
|
||||
description:
|
||||
"Built on distributed nodes designed for minimal energy use, Mycelium Cloud redefines sustainability without compromising performance.",
|
||||
icon: <BoltIcon className="h-6 w-6 text-cyan-500" />,
|
||||
className:
|
||||
"col-span-1 lg:col-span-3 lg:border-r dark:border-neutral-800",
|
||||
icon: <BoltIcon className="h-6 w-6 text-cyan-500" />,
|
||||
},
|
||||
{
|
||||
title: "Cost Efficient",
|
||||
description:
|
||||
"No middlemen. No inflated bills. Just pure compute power at a fraction of traditional cloud costs — optimized, transparent, and fair.",
|
||||
icon: <CurrencyDollarIcon className="h-6 w-6 text-cyan-500" />,
|
||||
className: "col-span-1 lg:col-span-3 border-b lg:border-none",
|
||||
icon: <CurrencyDollarIcon className="h-6 w-6 text-cyan-500" />,
|
||||
},
|
||||
];
|
||||
return (
|
||||
@@ -49,18 +43,20 @@ export function HomeBenefits() {
|
||||
</H2>
|
||||
|
||||
<P className="text-sm lg:text-base max-w-2xl my-4 mx-auto text-neutral-500 text-center font-normal dark:text-neutral-300">
|
||||
Mycelium Cloud isn’t just another cloud — it’s a new foundation for digital independence. A self-governing, AI-powered infrastructure that gives you control, efficiency, and trust without compromise.
|
||||
Project Mycelium is a new foundation for digital independence. A self-governing, AI-powered infrastructure that gives you control, efficiency, and trust without compromise.
|
||||
</P>
|
||||
</div>
|
||||
|
||||
<div className="relative ">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-6 mt-12 xl:border rounded-md dark:border-neutral-800">
|
||||
{features.map((feature) => (
|
||||
<FeatureCard key={feature.title} className={feature.className}>
|
||||
<FeatureTitle icon={feature.icon}>{feature.title}</FeatureTitle>
|
||||
<FeatureDescription>{feature.description}</FeatureDescription>
|
||||
</FeatureCard>
|
||||
))}
|
||||
<div className="mt-12 rounded-2xl border border-neutral-200/70 bg-white/40 dark:bg-black/40 dark:border-neutral-800/60 backdrop-blur">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-neutral-200/70 dark:divide-neutral-800/60">
|
||||
{features.map((feature) => (
|
||||
<FeatureCard key={feature.title}>
|
||||
<FeatureTitle icon={feature.icon}>{feature.title}</FeatureTitle>
|
||||
<FeatureDescription>{feature.description}</FeatureDescription>
|
||||
</FeatureCard>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -75,7 +71,7 @@ const FeatureCard = ({
|
||||
className?: string;
|
||||
}) => {
|
||||
return (
|
||||
<div className={cn(`p-4 sm:p-8 relative overflow-hidden`, className)}>
|
||||
<div className={cn(`p-6 lg:p-8 relative overflow-hidden`, className)}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
@@ -85,7 +81,7 @@ const FeatureTitle = ({ children, icon }: { children?: React.ReactNode, icon?: R
|
||||
return (
|
||||
<div className="flex items-center gap-2">
|
||||
{icon}
|
||||
<p className="max-w-5xl text-left tracking-tight text-black dark:text-white text-xl md:text-2xl md:leading-snug">
|
||||
<p className="max-w-5xl text-left tracking-tight text-black dark:text-white text-xl md:text-2xl md:leading-snug">
|
||||
{children}
|
||||
</p>
|
||||
</div>
|
||||
@@ -96,8 +92,8 @@ const FeatureDescription = ({ children }: { children?: React.ReactNode }) => {
|
||||
return (
|
||||
<p
|
||||
className={cn(
|
||||
"text-sm md:text-base max-w-4xl text-left mx-auto",
|
||||
"text-neutral-500 text-center font-normal dark:text-neutral-300",
|
||||
"text-sm md:text-base max-w-4xl",
|
||||
"text-neutral-500 font-normal dark:text-neutral-300",
|
||||
"text-left max-w-sm mx-0 md:text-sm my-2"
|
||||
)}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user