forked from emre/www_projectmycelium_com
refactor: consolidate cloud and agents page components
- Removed duplicate hero component variations (AgentsHero/AgentsHeroAlt, CloudHero/CloudHeroAlt) - Deleted unused CloudCTA, CloudGettingStarted, and CloudDesign components - Cleaned up empty files and legacy page structure
This commit is contained in:
@@ -34,7 +34,7 @@ export function HomeBenefits() {
|
||||
},
|
||||
];
|
||||
return (
|
||||
<div className="relative z-20 py-10 lg:py-24 max-w-7xl mx-auto">
|
||||
<div className="relative z-20 bg-blackpy-10 lg:py-24 max-w-7xl mx-auto">
|
||||
<div className="px-12">
|
||||
<Eyebrow className="text-center text-cyan-500">
|
||||
Benefits
|
||||
@@ -207,7 +207,7 @@ export const SkeletonTwo = () => {
|
||||
}}
|
||||
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"
|
||||
className="rounded-xl -mr-4 mt-4 p-1 bg-black s border-neutral-100 shrink-0 overflow-hidden"
|
||||
>
|
||||
<img
|
||||
src={image}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
|
||||
import { Container } from '../../components/Container'
|
||||
import {Eyebrow, H3, P } from '../../components/Texts'
|
||||
import { Eyebrow, H3, P } from '../../components/Texts'
|
||||
|
||||
/* ✅ Custom Icons */
|
||||
|
||||
@@ -82,8 +81,6 @@ function VPNIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
|
||||
)
|
||||
}
|
||||
|
||||
/* ✅ Updated Feature List */
|
||||
|
||||
const features = [
|
||||
{
|
||||
name: 'Kubernetes Clusters',
|
||||
@@ -107,48 +104,40 @@ const features = [
|
||||
},
|
||||
]
|
||||
|
||||
/* ✅ Component */
|
||||
|
||||
export function HomeHosting() {
|
||||
return (
|
||||
<section
|
||||
id="comingsoon"
|
||||
aria-label="Features"
|
||||
className="py-20 sm:py-32 relative isolate overflow-hidden"
|
||||
style={{
|
||||
backgroundImage: "url('/images/bg2.jpg')",
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
}}
|
||||
className="py-20 sm:py-32"
|
||||
>
|
||||
{/* ✅ Soft overlay for readable text */}
|
||||
<div className="absolute inset-0 bg-white/60 backdrop-blur-[1px]" />
|
||||
|
||||
<Container className="relative z-10">
|
||||
<Container>
|
||||
<div className="mx-auto max-w-4xl sm:text-center">
|
||||
<Eyebrow className="text-cyan-500">IN ACTIVE EVOLUTION</Eyebrow>
|
||||
<H3 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
|
||||
Expanding the Network Layer
|
||||
</H3>
|
||||
<P className="mt-6 text-lg text-gray-600">
|
||||
The Mycelium Network is evolving to support richer data movement, identity, and application connectivity across the mesh.
|
||||
These enhancements deepen autonomy and improve real-world usability.
|
||||
The Mycelium Network is evolving to support richer data movement, identity,
|
||||
and application connectivity across the mesh. These enhancements deepen autonomy
|
||||
and improve real-world usability.
|
||||
</P>
|
||||
</div>
|
||||
|
||||
<ul
|
||||
role="list"
|
||||
className="mx-auto mt-12 grid max-w-2xl grid-cols-1 gap-6 text-sm sm:grid-cols-2 md:gap-y-10 lg:max-w-none lg:grid-cols-4"
|
||||
className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-6 text-sm
|
||||
sm:mt-20 sm:grid-cols-2 md:gap-y-10 lg:max-w-none lg:grid-cols-4"
|
||||
>
|
||||
{features.map((feature) => (
|
||||
<li
|
||||
key={feature.name}
|
||||
className="rounded-2xl border border-gray-200 px-8 py-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/70 backdrop-blur-sm"
|
||||
className="rounded-2xl border border-gray-200 p-8 transition-all duration-300 ease-in-out
|
||||
hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white"
|
||||
>
|
||||
<feature.icon className="h-12 w-12" />
|
||||
<p className="mt-6 font-semibold text-gray-900 text-sm lg:text-base leading-tight">{feature.name}</p>
|
||||
<p className="mt-2 text-gray-700 leading-tight">{feature.description}</p>
|
||||
<feature.icon className="h-14 w-14" />
|
||||
<h3 className="mt-6 font-semibold text-gray-900">{feature.name}</h3>
|
||||
<p className="mt-2 text-gray-700">{feature.description}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
|
||||
import { useRef } from 'react'
|
||||
import { AnimatedSection } from '../../components/AnimatedSection'
|
||||
import { StackSectionLight } from './StackSection'
|
||||
import { StackSectionDark } from './StackSectionDark'
|
||||
import { WorldMap } from './HomeGlobe'
|
||||
import { HomeBenefits } from './HomeBenefits'
|
||||
import { CallToAction } from './CallToAction'
|
||||
import { HomeSlider } from './HomeSlider'
|
||||
import { HomeHostingDark } from './HomeHostingDark'
|
||||
import { HomeHosting } from './HomeHosting'
|
||||
import { HomeAurora } from './HomeAurora'
|
||||
import { HomeTab } from './HomeTab'
|
||||
|
||||
|
||||
export default function HomePage() {
|
||||
@@ -27,15 +27,15 @@ export default function HomePage() {
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
<HomeHostingDark />
|
||||
<HomeHosting />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
<StackSectionLight />
|
||||
<StackSectionDark />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection ref={sliderRef}>
|
||||
<HomeSlider />
|
||||
<AnimatedSection>
|
||||
<HomeTab />
|
||||
</AnimatedSection>
|
||||
|
||||
<AnimatedSection>
|
||||
|
||||
133
src/pages/home/HomeTab.tsx
Normal file
133
src/pages/home/HomeTab.tsx
Normal file
@@ -0,0 +1,133 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Button } from "@/components/Button";
|
||||
import { Eyebrow, H3, P } from "@/components/Texts";
|
||||
|
||||
import cloudImage from "/images/pages/cloud.png";
|
||||
import networkImage from "/images/pages/network.png";
|
||||
import agentImage from "/images/pages/agent.png";
|
||||
import computeImage from "/images/pages/compute.png";
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
id: "cloud",
|
||||
label: "Kubernetes Clusters",
|
||||
title: "Mycelium Cloud",
|
||||
description: "Deploy Kubernetes clusters on sovereign infrastructure.",
|
||||
image: "/images/pages/cloud.png",
|
||||
bg: cloudImage,
|
||||
link: "/cloud",
|
||||
},
|
||||
{
|
||||
id: "network",
|
||||
label: "Mesh Networking",
|
||||
title: "Mycelium Network",
|
||||
description: "Encrypted peer-to-peer mesh networking across the globe.",
|
||||
image: "/images/pages/network.png",
|
||||
bg: networkImage,
|
||||
link: "/network",
|
||||
},
|
||||
{
|
||||
id: "agent",
|
||||
label: "AI Agents",
|
||||
title: "Mycelium Agents",
|
||||
description: "Private, programmable AI systems that run on your hardware.",
|
||||
image: "/images/pages/agent.png",
|
||||
bg: agentImage,
|
||||
link: "/agent",
|
||||
},
|
||||
{
|
||||
id: "compute",
|
||||
label: "Compute & Storage",
|
||||
title: "Hardware Resources",
|
||||
description: "The resource layers powering the stack.",
|
||||
image: "/images/pages/compute.png",
|
||||
bg: computeImage,
|
||||
link: "/compute",
|
||||
},
|
||||
];
|
||||
|
||||
export function HomeTab() {
|
||||
const [active, setActive] = useState("cloud");
|
||||
const current = tabs.find((t) => t.id === active)!;
|
||||
|
||||
return (
|
||||
<section className="mx-4 px-6 lg:px-8 lg:mx-auto max-w-7xl py-24">
|
||||
<div className="space-y-12 text-center">
|
||||
|
||||
{/* ✅ Replaced H1 + P with Eyebrow + H3 + P */}
|
||||
<Eyebrow className="text-gray-500">Ecosystem</Eyebrow>
|
||||
|
||||
<H3 className="text-gray-900">
|
||||
Mycelium Components
|
||||
</H3>
|
||||
|
||||
<P className="text-gray-500 max-w-4xl mx-auto">
|
||||
Each component can be used on its own or combined into a fully sovereign cloud.
|
||||
</P>
|
||||
|
||||
{/* ✅ Tabs & content centered */}
|
||||
<div className="flex justify-center">
|
||||
<div className="space-y-10 max-w-5xl w-full">
|
||||
|
||||
{/* ✅ Tabs */}
|
||||
<div className="flex justify-center">
|
||||
<div className="flex flex-wrap gap-3 bg-gray-50 rounded-full p-2 border border-gray-200">
|
||||
{tabs.map((tab) => (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => setActive(tab.id)}
|
||||
className={`px-5 py-2 rounded-full text-sm font-medium transition-all
|
||||
${
|
||||
active === tab.id
|
||||
? "bg-white border border-gray-300 shadow-sm"
|
||||
: "text-gray-500 hover:text-gray-900"
|
||||
}`}
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ✅ 2-column layout */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
|
||||
{/* Left content */}
|
||||
<div className="space-y-4 text-left mx-auto">
|
||||
<h4 className="text-sm font-semibold text-gray-900 uppercase tracking-wide">
|
||||
{current.title}
|
||||
</h4>
|
||||
|
||||
<p className="text-sm text-gray-500 leading-relaxed max-w-md">
|
||||
{current.description}
|
||||
</p>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
color="gray"
|
||||
asChild
|
||||
className="mt-2"
|
||||
>
|
||||
<a href={current.link}>Learn More</a>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Right content */}
|
||||
<div className="flex items-center justify-center">
|
||||
<img
|
||||
src={current.image}
|
||||
alt={current.title}
|
||||
className="w-full max-w-xs object-contain rounded-xl border border-gray-200 shadow-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import { CheckIcon, XMarkIcon } from '@heroicons/react/24/outline'
|
||||
import { Eyebrow, H3, P, CT } from '../../components/Texts'
|
||||
import { Eyebrow, H3, P, CT } from '../../../components/Texts'
|
||||
|
||||
const features = [
|
||||
{ name: 'Infrastructure Ownership', cloud: <XMarkIcon className="h-6 w-6 text-red-500" />, mycelium: <CheckIcon className="h-6 w-6 text-green-500" /> },
|
||||
Reference in New Issue
Block a user