feat: redesign benefits section with image cards
- Replaced icon-based feature cards with new image-based card layout using product benefit images - Updated grid layout to 7-column system with asymmetric card sizes for better visual hierarchy - Added hover effects with cyan highlights and scale transitions for better interactivity - Implemented responsive design with custom rounded corners for mobile/desktop views - Removed unused FeatureCard, FeatureTitle and FeatureDescription components - Adde
This commit is contained in:
@@ -3,7 +3,6 @@ import createGlobe from "cobe";
|
||||
import { useEffect, useRef, type ReactNode } from "react";
|
||||
import { motion } from "motion/react";
|
||||
import { IconBrandYoutubeFilled } from "@tabler/icons-react";
|
||||
import { LockClosedIcon, CogIcon, BoltIcon, CurrencyDollarIcon } from '@heroicons/react/24/solid'
|
||||
import { H2, P } from '@/components/Texts'
|
||||
|
||||
|
||||
@@ -13,30 +12,30 @@ export function HomeBenefits() {
|
||||
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" />,
|
||||
image: "/images/benefits/sovereign.webp",
|
||||
},
|
||||
{
|
||||
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" />,
|
||||
image: "/images/benefits/autonomous.webp",
|
||||
},
|
||||
{
|
||||
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" />,
|
||||
image: "/images/benefits/energy.webp",
|
||||
},
|
||||
{
|
||||
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" />,
|
||||
image: "/images/benefits/cost.webp",
|
||||
},
|
||||
];
|
||||
return (
|
||||
<div className="relative z-20 py-10 lg:py-40 max-w-7xl mx-auto">
|
||||
<div className="px-8">
|
||||
<div className="px-12">
|
||||
<H2 className="text-3xl lg:text-5xl lg:leading-tight max-w-5xl mx-auto text-center tracking-tight font-medium text-black dark:text-white">
|
||||
Why It Changes Everything
|
||||
</H2>
|
||||
@@ -46,60 +45,88 @@ export function HomeBenefits() {
|
||||
</P>
|
||||
</div>
|
||||
|
||||
<div className="relative ">
|
||||
<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 className="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-7 lg:grid-rows-2 lg:px-12 px-6">
|
||||
<div className="flex p-px lg:col-span-4">
|
||||
<div className="w-full overflow-hidden rounded-lg bg-white/40 dark:bg-black/40 shadow-sm border border-transparent transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-cyan-500/50 hover:border-cyan-500 max-lg:rounded-t-4xl lg:rounded-tl-4xl">
|
||||
<div className="flex items-center">
|
||||
<div className="w-1/3 p-2">
|
||||
<img
|
||||
alt={features[0].title}
|
||||
src={features[0].image}
|
||||
className="w-40 h-40 object-contain"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-2/3 p-2 pr-12">
|
||||
<h3 className="text-lg font-semibold text-black dark:text-white">{features[0].title}</h3>
|
||||
<p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
|
||||
{features[0].description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex p-px lg:col-span-3">
|
||||
<div className="w-full overflow-hidden rounded-lg bg-white/40 dark:bg-black/40 shadow-sm border border-transparent transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-cyan-500/50 hover:border-cyan-500 lg:rounded-tr-4xl">
|
||||
<div className="flex items-center">
|
||||
<div className="w-1/3 p-4">
|
||||
<img
|
||||
alt={features[1].title}
|
||||
src={features[1].image}
|
||||
className="w-40 h-40 object-contain"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-2/3 p-4">
|
||||
<h3 className="text-lg font-semibold text-black dark:text-white">{features[1].title}</h3>
|
||||
<p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
|
||||
{features[1].description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex p-px lg:col-span-3">
|
||||
<div className="w-full overflow-hidden rounded-lg bg-white/40 dark:bg-black/40 shadow-sm border border-transparent transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-cyan-500/50 hover:border-cyan-500 lg:rounded-bl-4xl">
|
||||
<div className="flex items-center">
|
||||
<div className="w-1/3 p-4">
|
||||
<img
|
||||
alt={features[2].title}
|
||||
src={features[2].image}
|
||||
className="w-40 h-40 object-contain"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-2/3 p-4">
|
||||
<h3 className="text-lg font-semibold text-black dark:text-white">{features[2].title}</h3>
|
||||
<p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
|
||||
{features[2].description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex p-px lg:col-span-4">
|
||||
<div className="w-full overflow-hidden rounded-lg bg-white/40 dark:bg-black/40 shadow-sm border border-transparent transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-cyan-500/50 hover:border-cyan-500 max-lg:rounded-b-4xl lg:rounded-br-4xl">
|
||||
<div className="flex items-center">
|
||||
<div className="w-1/3 p-2">
|
||||
<img
|
||||
alt={features[3].title}
|
||||
src={features[3].image}
|
||||
className="w-40 h-40 object-contain"
|
||||
/>
|
||||
</div>
|
||||
<div className="w-2/3 p-2 pr-12">
|
||||
<h3 className="text-lg font-semibold text-black dark:text-white">{features[3].title}</h3>
|
||||
<p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
|
||||
{features[3].description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const FeatureCard = ({
|
||||
children,
|
||||
className,
|
||||
}: {
|
||||
children?: ReactNode;
|
||||
className?: string;
|
||||
}) => {
|
||||
return (
|
||||
<div className={cn(`p-6 lg:p-8 relative overflow-hidden`, className)}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const FeatureTitle = ({ children, icon }: { children?: ReactNode; icon?: ReactNode }) => {
|
||||
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">
|
||||
{children}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const FeatureDescription = ({ children }: { children?: ReactNode }) => {
|
||||
return (
|
||||
<p
|
||||
className={cn(
|
||||
"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"
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</p>
|
||||
);
|
||||
};
|
||||
|
||||
export const SkeletonOne = () => {
|
||||
return (
|
||||
|
||||
Reference in New Issue
Block a user