ourworld_web/www_projectmycelium_com
23
0
Fork 0
forked from emre/www_projectmycelium_com
Code Issues 3 Pull Requests Projects Releases Activity

improvements

Browse Source
This commit is contained in:
Emre
2025-10-24 02:17:33 +03:00
parent 644bb34419
commit 3a7aa82ff7
34 changed files with 740 additions and 442 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/pages/home/HomeBenefits.tsx
View File

@@ -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"
)}
>