diff --git a/src/pages/cloud/CloudFeaturesLight.tsx b/src/pages/cloud/CloudFeaturesLight.tsx new file mode 100644 index 0000000..8bd5996 --- /dev/null +++ b/src/pages/cloud/CloudFeaturesLight.tsx @@ -0,0 +1,250 @@ +'use client' + +import { Fragment, useEffect, useId, useRef, useState } from 'react' +import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react' +import clsx from 'clsx' +import { + type MotionProps, + type Variant, + AnimatePresence, + motion, +} from 'framer-motion' +import { useDebouncedCallback } from 'use-debounce' + +import { + Eyebrow, + FeatureDescription, + FeatureTitle, + MobileFeatureTitle, + P, + SectionHeader, +} from '@/components/Texts' +import { Container } from '@/components/Container' + +import reservenodeimg from '/images/cloud/reserve.png' +import billingImg from '/images/cloud/billing.png' +import kubeconfigImg from '/images/cloud/kubeconfig.png' + + +/* ICONS */ +function DeviceUserIcon(props: React.ComponentPropsWithoutRef<'svg'>) { + return ( + + ) +} + +function DeviceNotificationIcon(props: React.ComponentPropsWithoutRef<'svg'>) { + return ( + + ) +} + +function DeviceTouchIcon(props: React.ComponentPropsWithoutRef<'svg'>) { + let id = useId() + return ( + + ) +} + + +/* Feature Data */ +const features = [ + { + name: 'Decentralized Kubernetes', + description: + "Reserve a node and deploy sovereign Kubernetes clusters on decentralized infrastructure.", + icon: DeviceUserIcon, + screen: () => ( + + ), + }, + { + name: 'Manage Your Cluster', + description: + 'Manage your cluster with ease, with a simple and intuitive interface.', + icon: DeviceNotificationIcon, + screen: () => ( + + ), + }, + { + name: 'Personalised Billings & Accounts', + description: + 'Easily manage your cluster billing and accounts with personalised configurations.', + icon: DeviceTouchIcon, + screen: () => ( + + ), + }, +] + + +/* Desktop Component */ +function CloudFeaturesDesktop() { + const [selectedIndex, setSelectedIndex] = useState(0) + + return ( + + + {features.map((feature, i) => ( +
+
+ + + {feature.name} + + + {feature.description} + +
+
+ ))} + + +
+ + {features.map((feature, i) => ( + +
+ +
+ + ))} + +
+ + ) +} + + +/* Mobile Version */ +function CloudFeaturesMobile() { + return ( + <> +
+ {features.map((feature, i) => ( +
+
+
+ +
+
+ + + {feature.name} + + + {feature.description} + +
+
+
+ ))} +
+ + ) +} + + +/* ✅ FINAL LIGHT MODE EXPORT — BOXED CONTAINER + BORDERS MATCHING CloudHeroNew */ +export function CloudFeaturesLight() { + return ( +
+ {/* ✅ Top horizontal line with spacing */} +
+
+ + {/* ✅ Boxed container (border-x only) */} +
+
+ +
+ Platform Overview + + A Decentralized Cloud that Operates Itself + +

+ Mycelium Cloud runs Kubernetes on a sovereign, self-healing network + with compute, storage, and networking built in — so you don’t need + external cloud dependencies. +

+
+ + +
+ +
+ +
+ +
+
+
+ + {/* ✅ Bottom horizontal line */} +
+ + {/* ✅ Bottom spacer matching hero */} +
+
+ ) +} diff --git a/src/pages/cloud/CloudPage.tsx b/src/pages/cloud/CloudPage.tsx index b099018..818111e 100644 --- a/src/pages/cloud/CloudPage.tsx +++ b/src/pages/cloud/CloudPage.tsx @@ -3,10 +3,11 @@ import { CloudArchitecture } from './CloudArchitecture' import { CloudFeatures } from './CloudFeatures' import { CloudUseCases } from './CloudUseCases' import { CloudHeroNew } from './CloudHeroNew' -import { CloudHosting } from './CloudHosting' import { CloudBluePrint } from './CloudBluePrint' import { CallToAction } from './CalltoAction' import { CloudHostingNew } from './CloudHostingNew' +import { CloudFeaturesLight } from './CloudFeaturesLight' + export default function CloudPage() { return ( @@ -20,6 +21,10 @@ export default function CloudPage() { + + + +