281 lines
9.8 KiB
TypeScript
281 lines
9.8 KiB
TypeScript
import React from "react";
|
|
import { cn } from "@/lib/utils";
|
|
import createGlobe from "cobe";
|
|
import { useEffect, useRef } 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'
|
|
|
|
|
|
export function HomeBenefits() {
|
|
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" />,
|
|
},
|
|
{
|
|
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" />,
|
|
},
|
|
{
|
|
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" />,
|
|
},
|
|
{
|
|
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" />,
|
|
},
|
|
];
|
|
return (
|
|
<div className="relative z-20 py-10 lg:py-40 max-w-7xl mx-auto">
|
|
<div className="px-8">
|
|
<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>
|
|
|
|
<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">
|
|
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="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>
|
|
);
|
|
}
|
|
|
|
const FeatureCard = ({
|
|
children,
|
|
className,
|
|
}: {
|
|
children?: React.ReactNode;
|
|
className?: string;
|
|
}) => {
|
|
return (
|
|
<div className={cn(`p-6 lg:p-8 relative overflow-hidden`, className)}>
|
|
{children}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const FeatureTitle = ({ children, icon }: { children?: React.ReactNode, icon?: React.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?: React.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 (
|
|
<div className="relative flex py-8 px-2 gap-10 h-full">
|
|
<div className="w-full p-5 mx-auto bg-white dark:bg-neutral-900 shadow-2xl group h-full">
|
|
<div className="flex flex-1 w-full h-full flex-col space-y-2 ">
|
|
{/* TODO */}
|
|
<img
|
|
src="/linear.webp"
|
|
alt="header"
|
|
width={800}
|
|
height={800}
|
|
className="h-full w-full aspect-square object-cover object-left-top rounded-sm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="absolute bottom-0 z-40 inset-x-0 h-60 bg-gradient-to-t from-white dark:from-black via-white dark:via-black to-transparent w-full pointer-events-none" />
|
|
<div className="absolute top-0 z-40 inset-x-0 h-60 bg-gradient-to-b from-white dark:from-black via-transparent to-transparent w-full pointer-events-none" />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const SkeletonThree = () => {
|
|
return (
|
|
<a
|
|
href="https://www.youtube.com/watch?v=RPa3_AD1_Vs"
|
|
target="__blank"
|
|
className="relative flex gap-10 h-full group/image"
|
|
>
|
|
<div className="w-full mx-auto bg-transparent dark:bg-transparent group h-full">
|
|
<div className="flex flex-1 w-full h-full flex-col space-y-2 relative">
|
|
{/* TODO */}
|
|
<IconBrandYoutubeFilled className="h-20 w-20 absolute z-10 inset-0 text-red-500 m-auto " />
|
|
<img
|
|
src="https://assets.aceternity.com/fireship.jpg"
|
|
alt="header"
|
|
width={800}
|
|
height={800}
|
|
className="h-full w-full aspect-square object-cover object-center rounded-sm blur-none group-hover/image:blur-md transition-all duration-200"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
);
|
|
};
|
|
|
|
export const SkeletonTwo = () => {
|
|
const images = [
|
|
"https://images.unsplash.com/photo-1517322048670-4fba75cbbb62?q=80&w=3000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
|
|
"https://images.unsplash.com/photo-1573790387438-4da905039392?q=80&w=3425&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
|
|
"https://images.unsplash.com/photo-1555400038-63f5ba517a47?q=80&w=3540&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
|
|
"https://images.unsplash.com/photo-1554931670-4ebfabf6e7a9?q=80&w=3387&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
|
|
"https://images.unsplash.com/photo-1546484475-7f7bd55792da?q=80&w=2581&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
|
|
];
|
|
|
|
const imageVariants = {
|
|
whileHover: {
|
|
scale: 1.1,
|
|
rotate: 0,
|
|
zIndex: 100,
|
|
},
|
|
whileTap: {
|
|
scale: 1.1,
|
|
rotate: 0,
|
|
zIndex: 100,
|
|
},
|
|
};
|
|
return (
|
|
<div className="relative flex flex-col items-start p-8 gap-10 h-full overflow-hidden">
|
|
{/* TODO */}
|
|
<div className="flex flex-row -ml-20">
|
|
{images.map((image, idx) => (
|
|
<motion.div
|
|
variants={imageVariants}
|
|
key={"images-first" + idx}
|
|
style={{
|
|
rotate: Math.random() * 20 - 10,
|
|
}}
|
|
whileHover="whileHover"
|
|
whileTap="whileTap"
|
|
className="rounded-xl -mr-4 mt-4 p-1 bg-white dark:bg-neutral-800 dark:border-neutral-700 border border-neutral-100 shrink-0 overflow-hidden"
|
|
>
|
|
<img
|
|
src={image}
|
|
alt="bali images"
|
|
width="500"
|
|
height="500"
|
|
className="rounded-lg h-20 w-20 md:h-40 md:w-40 object-cover shrink-0"
|
|
/>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
<div className="flex flex-row">
|
|
{images.map((image, idx) => (
|
|
<motion.div
|
|
key={"images-second" + idx}
|
|
style={{
|
|
rotate: Math.random() * 20 - 10,
|
|
}}
|
|
variants={imageVariants}
|
|
whileHover="whileHover"
|
|
whileTap="whileTap"
|
|
className="rounded-xl -mr-4 mt-4 p-1 bg-white dark:bg-neutral-800 dark:border-neutral-700 border border-neutral-100 shrink-0 overflow-hidden"
|
|
>
|
|
<img
|
|
src={image}
|
|
alt="bali images"
|
|
width="500"
|
|
height="500"
|
|
className="rounded-lg h-20 w-20 md:h-40 md:w-40 object-cover shrink-0"
|
|
/>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="absolute left-0 z-[100] inset-y-0 w-20 bg-gradient-to-r from-white dark:from-black to-transparent h-full pointer-events-none" />
|
|
<div className="absolute right-0 z-[100] inset-y-0 w-20 bg-gradient-to-l from-white dark:from-black to-transparent h-full pointer-events-none" />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const SkeletonFour = () => {
|
|
return (
|
|
<div className="h-60 md:h-60 flex flex-col items-center relative bg-transparent dark:bg-transparent mt-10">
|
|
<Globe className="absolute -right-10 md:-right-10 -bottom-80 md:-bottom-72" />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const Globe = ({ className }: { className?: string }) => {
|
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
|
|
|
useEffect(() => {
|
|
let phi = 0;
|
|
|
|
if (!canvasRef.current) return;
|
|
|
|
const globe = createGlobe(canvasRef.current, {
|
|
devicePixelRatio: 2,
|
|
width: 600 * 2,
|
|
height: 600 * 2,
|
|
phi: 0,
|
|
theta: 0,
|
|
dark: 1,
|
|
diffuse: 1.2,
|
|
mapSamples: 16000,
|
|
mapBrightness: 6,
|
|
baseColor: [0.3, 0.3, 0.3],
|
|
markerColor: [0.1, 0.8, 1],
|
|
glowColor: [1, 1, 1],
|
|
markers: [
|
|
// longitude latitude
|
|
{ location: [37.7595, -122.4367], size: 0.03 },
|
|
{ location: [40.7128, -74.006], size: 0.1 },
|
|
],
|
|
onRender: (state) => {
|
|
// Called on every animation frame.
|
|
// `state` will be an empty object, return updated params.
|
|
state.phi = phi;
|
|
phi += 0.01;
|
|
},
|
|
});
|
|
|
|
return () => {
|
|
globe.destroy();
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<canvas
|
|
ref={canvasRef}
|
|
style={{ width: 600, height: 600, maxWidth: "100%", aspectRatio: 1 }}
|
|
className={className}
|
|
/>
|
|
);
|
|
};
|