forked from emre/www_projectmycelium_com
refactor: standardize vertical spacing across feature sections
- Reduced py-10 to py-8 for consistent spacing in feature grids and carousels - Restructured HomeHosting and HomeTab sections with full-width border layout pattern - Replaced HomeTab card grid with bento-style component showcase layout
This commit is contained in:
BIN
public/images/bento-network.png
Normal file
BIN
public/images/bento-network.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 151 KiB |
@@ -59,7 +59,7 @@ export default function FeaturesSectionDemo() {
|
||||
},
|
||||
];
|
||||
return (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 relative z-10 py-10 max-w-7xl mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 relative z-10 py-8 max-w-7xl mx-auto">
|
||||
{features.map((feature, index) => (
|
||||
<Feature key={feature.title} {...feature} index={index} />
|
||||
))}
|
||||
@@ -81,7 +81,7 @@ const Feature = ({
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col lg:border-r py-10 relative group/feature dark:border-neutral-800",
|
||||
"flex flex-col lg:border-r py-8 relative group/feature dark:border-neutral-800",
|
||||
(index === 0 || index === 4) && "lg:border-l dark:border-neutral-800",
|
||||
index < 4 && "lg:border-b dark:border-neutral-800"
|
||||
)}
|
||||
|
||||
@@ -40,7 +40,7 @@ export default function FeaturesSectionDemo() {
|
||||
},
|
||||
];
|
||||
return (
|
||||
<div className="relative z-20 py-10 lg:py-40 max-w-7xl mx-auto">
|
||||
<div className="relative z-20 py-8 lg:py-40 max-w-7xl mx-auto">
|
||||
<div className="px-8">
|
||||
<h4 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">
|
||||
Packed with thousands of features
|
||||
|
||||
@@ -62,7 +62,7 @@ export const Carousel = ({ items, initialScroll = 0 }: CarouselProps) => {
|
||||
return (
|
||||
<div className="relative w-full">
|
||||
<div
|
||||
className="flex w-full overflow-x-scroll overscroll-x-auto scroll-smooth py-10 [scrollbar-width:none] md:py-20"
|
||||
className="flex w-full overflow-x-scroll overscroll-x-auto scroll-smooth py-8 [scrollbar-width:none] md:py-20"
|
||||
ref={carouselRef}
|
||||
onScroll={checkScrollability}
|
||||
>
|
||||
@@ -135,7 +135,7 @@ export const Card = ({
|
||||
layoutId={layout ? `card-${card.title}` : undefined}
|
||||
className="relative z-10 flex h-104 w-80 flex-col justify-between overflow-hidden rounded-3xl p-8 md:h-120 md:w-96"
|
||||
>
|
||||
<div className="flex h-2/5 flex-col justify-center py-6 px-4">
|
||||
<div className="flex h-2/5 flex-col justify-center py-4 px-4">
|
||||
<motion.p
|
||||
layoutId={layout ? `category-${card.category}` : undefined}
|
||||
className="text-left font-sans font-semibold text-cyan-500 uppercase tracking-wider text-xs md:text-sm"
|
||||
|
||||
@@ -354,7 +354,7 @@ function CloudFeaturesMobile() {
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
'relative transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-6 outline-2 transition-colors',
|
||||
'relative transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-4 outline-2 transition-colors',
|
||||
activeIndex === featureIndex
|
||||
? 'outline-transparent' // Remove outline for active mobile slide
|
||||
: 'outline-transparent hover:outline-cyan-500',
|
||||
|
||||
@@ -34,7 +34,7 @@ export function HomeBenefits() {
|
||||
},
|
||||
];
|
||||
return (
|
||||
<div className="relative z-20 bg-blackpy-10 lg:py-24 max-w-7xl mx-auto border border-t-0 border-gray-200">
|
||||
<div className="relative z-20 bg-blackpy-6 lg:py-24 max-w-7xl mx-auto border border-t-0 border-gray-200">
|
||||
<div className="px-12">
|
||||
<Eyebrow className="text-center text-cyan-500">
|
||||
Benefits
|
||||
@@ -129,7 +129,7 @@ export function HomeBenefits() {
|
||||
|
||||
export const SkeletonOne = () => {
|
||||
return (
|
||||
<div className="relative flex py-8 px-2 gap-10 h-full">
|
||||
<div className="relative flex py-6 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 */}
|
||||
|
||||
@@ -108,38 +108,51 @@ const features = [
|
||||
|
||||
export function HomeHosting() {
|
||||
return (
|
||||
<section className="mx-4 py-12 border-t-0 lg:mx-auto max-w-7xl border border-gray-200 lg:py-24">
|
||||
<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.
|
||||
</P>
|
||||
</div>
|
||||
<section className="w-full max-w-8xl mx-auto bg-transparent">
|
||||
|
||||
<ul
|
||||
role="list"
|
||||
className="mx-auto grid max-w-2xl grid-cols-1 gap-6 text-sm
|
||||
lg:mt-12 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-md border border-gray-200 p-6 transition-all duration-300 ease-in-out
|
||||
hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white"
|
||||
{/* ✅ Top horizontal line with spacing */}
|
||||
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
|
||||
<div className="w-full border-t border-l border-r border-gray-200" />
|
||||
|
||||
|
||||
{/* ✅ Inner content container */}
|
||||
<div className="max-w-7xl bg-white mx-auto py-12 border border-t-0 border-b-0 border-gray-200">
|
||||
<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.
|
||||
</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 lg:max-w-none lg:grid-cols-4 md:gap-y-10"
|
||||
>
|
||||
<feature.icon className="h-14 w-14" />
|
||||
<h3 className="mt-4 font-semibold text-gray-900">{feature.name}</h3>
|
||||
<p className="mt-2 text-gray-700 leading-snug">{feature.description}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Container>
|
||||
{features.map((feature) => (
|
||||
<li
|
||||
key={feature.name}
|
||||
className="rounded-md border border-gray-200 p-6 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-14 w-14" />
|
||||
<h3 className="mt-4 font-semibold text-gray-900">{feature.name}</h3>
|
||||
<p className="mt-2 text-gray-700 leading-snug">{feature.description}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</Container>
|
||||
|
||||
</div>
|
||||
{/* ✅ Bottom horizontal line with spacing */}
|
||||
<div className="w-full border-b border-gray-200" />
|
||||
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-200"></div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -3,94 +3,147 @@
|
||||
import { useState } from "react";
|
||||
import { Eyebrow, H3, P } from "@/components/Texts";
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
id: "cloud",
|
||||
label: "Kubernetes Clusters",
|
||||
title: "Mycelium Cloud",
|
||||
description: "Deploy Kubernetes clusters on sovereign infrastructure.",
|
||||
image: "/images/testpic.png",
|
||||
link: "/cloud",
|
||||
},
|
||||
{
|
||||
id: "network",
|
||||
label: "Mesh Networking",
|
||||
title: "Mycelium Network",
|
||||
description: "Encrypted peer-to-peer mesh networking across the globe.",
|
||||
image: "/images/testpic.png",
|
||||
link: "/network",
|
||||
},
|
||||
{
|
||||
id: "agent",
|
||||
label: "AI Agents",
|
||||
title: "Mycelium Agents",
|
||||
description: "Private, programmable AI systems that run on your hardware.",
|
||||
image: "/images/testpic.png",
|
||||
link: "/agent",
|
||||
},
|
||||
{
|
||||
id: "compute",
|
||||
label: "Compute & Storage",
|
||||
title: "Hardware Resources",
|
||||
description: "The resource layers powering the stack.",
|
||||
image: "/images/testpic.png",
|
||||
link: "/compute",
|
||||
},
|
||||
];
|
||||
|
||||
export function HomeTab() {
|
||||
const [active, setActive] = useState("cloud");
|
||||
const current = tabs.find((t) => t.id === active)!;
|
||||
|
||||
return (
|
||||
<section className="mx-4 lg:mx-auto max-w-7xl py-24 border border-gray-200 bg-white">
|
||||
<section className="w-full max-w-8xl mx-auto bg-transparent">
|
||||
|
||||
<div className="text-center px-6 lg:px-8">
|
||||
<Eyebrow>Ecosystem</Eyebrow>
|
||||
<H3 className="text-gray-900 mt-2">Mycelium Components</H3>
|
||||
<P className="text-gray-500 max-w-4xl mx-auto mt-6">
|
||||
{/* ✅ Top spacer + full-width line */}
|
||||
<div className="max-w-7xl mx-auto py-6 border-x border-gray-200 bg-white border-t-0 border-b-0" />
|
||||
<div className="w-full border-t border-l border-r border-gray-200" />
|
||||
|
||||
|
||||
{/* ✅ Section with vertical borders */}
|
||||
<div className="mx-auto bg-white max-w-2xl px-6 lg:max-w-7xl lg:px-10 border border-t-0 border-b-0 border-gray-200">
|
||||
<Eyebrow className="pt-12 ">Deploy faster</Eyebrow>
|
||||
<H3 className="mt-2">Mycelium Components</H3>
|
||||
<P className="mt-6 max-w-lg">
|
||||
Each component can be used on its own or combined into a fully sovereign cloud.
|
||||
</P>
|
||||
</div>
|
||||
|
||||
{/* ✅ FULL-WIDTH NO PADDING CARD ROW */}
|
||||
<div className="mt-10 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4
|
||||
divide-y sm:divide-y-0 lg:divide-x divide-gray-200
|
||||
border-t border-b border-gray-200 w-full">
|
||||
<div className="mt-8 grid grid-cols-1 gap-4 sm:mt-10 lg:grid-cols-6 lg:grid-rows-3 pb-12">
|
||||
|
||||
{tabs.map((tab) => (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => setActive(tab.id)}
|
||||
className={`group transition-all text-left
|
||||
${active === tab.id ? "bg-gray-50" : "bg-white"}
|
||||
hover:bg-gray-50 focus:bg-gray-50
|
||||
w-full`}
|
||||
>
|
||||
{/* ✅ Spacing only inside the card, not outside */}
|
||||
<div className="p-6 flex flex-col gap-3">
|
||||
{/* ✅ TOP ROW */}
|
||||
<div className="relative lg:col-span-3">
|
||||
<div className="absolute inset-0 rounded-md bg-white max-lg:rounded-t-4xl lg:rounded-tl-4xl" />
|
||||
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)] lg:rounded-tl-[calc(2rem+1px)]">
|
||||
<img
|
||||
src={tab.image}
|
||||
alt={tab.title}
|
||||
className="w-full h-32 object-cover rounded-md border border-gray-200 shadow-sm"
|
||||
alt=""
|
||||
src="/images/bento-network.png"
|
||||
className="h-50 object-cover object-center"
|
||||
/>
|
||||
|
||||
<h4 className="text-base font-semibold text-gray-900">
|
||||
{tab.title}
|
||||
</h4>
|
||||
|
||||
<p className="text-sm text-gray-500">
|
||||
{tab.description}
|
||||
</p>
|
||||
|
||||
<span className="text-sm font-medium text-gray-900 group-hover:text-cyan-600">
|
||||
Learn More →
|
||||
</span>
|
||||
<div className="px-8 pt-4 pb-0">
|
||||
<h3 className="text-sm/4 font-semibold text-cyan-500">Network</h3>
|
||||
<p className="mt-2 text-lg font-medium lg:text-xl tracking-tight text-gray-950">Mycelium Network</p>
|
||||
<p className="mt-1 max-w-lg text-sm/6 text-gray-600">
|
||||
Encrypted peer-to-peer mesh networking across the globe.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
<div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-t-4xl lg:rounded-tl-4xl" />
|
||||
</div>
|
||||
|
||||
<div className="relative lg:col-span-3">
|
||||
<div className="absolute inset-0 rounded-lg bg-white lg:rounded-tr-4xl" />
|
||||
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-tr-[calc(2rem+1px)]">
|
||||
<img
|
||||
alt=""
|
||||
src="https://tailwindcss.com/plus-assets/img/component-images/bento-01-releases.png"
|
||||
className="h-50 object-cover object-left lg:object-right"
|
||||
/>
|
||||
<div className="px-8 pt-4 pb-0">
|
||||
<h3 className="text-sm/4 font-semibold text-cyan-500">Agents</h3>
|
||||
<p className="mt-2 text-lg font-medium lg:text-xl tracking-tight text-gray-950">Mycelium Agents</p>
|
||||
<p className="mt-1 max-w-lg text-sm/6 text-gray-600">
|
||||
Private, programmable AI systems that run on your hardware.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 lg:rounded-tr-4xl" />
|
||||
</div>
|
||||
|
||||
{/* ✅ ✅ MIDDLE ROW (half-height, equal spacing) */}
|
||||
<div className="relative lg:col-span-6">
|
||||
<div className="absolute inset-0 bg-white rounded-[calc(var(--radius-lg)+1px)]" />
|
||||
<div className="relative flex flex-col items-center justify-center py-6 text-center rounded-[calc(var(--radius-lg)+1px)] shadow-sm">
|
||||
<img
|
||||
alt=""
|
||||
src="https://tailwindcss.com/plus-assets/img/component-images/bento-01-releases.png"
|
||||
className="h-50 object-cover object-left lg:object-right"
|
||||
/>
|
||||
<div className="px-8 pt-4 pb-0">
|
||||
<h3 className="text-sm/4 font-semibold text-cyan-500">Agents</h3>
|
||||
<p className="mt-2 text-lg font-medium lg:text-xl tracking-tight text-gray-950">Mycelium Cloud</p>
|
||||
<p className="mt-1 max-w-lg text-sm/6 text-gray-600">
|
||||
Private, programmable AI systems that run on your hardware.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5" />
|
||||
</div>
|
||||
|
||||
{/* ✅ BOTTOM ROW */}
|
||||
<div className="relative lg:col-span-2">
|
||||
<div className="absolute inset-0 rounded-lg bg-white lg:rounded-bl-4xl" />
|
||||
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-bl-[calc(2rem+1px)]">
|
||||
<img
|
||||
alt=""
|
||||
src="https://tailwindcss.com/plus-assets/img/component-images/bento-01-speed.png"
|
||||
className="h-50 object-cover object-left"
|
||||
/>
|
||||
<div className="px-8 pt-4 pb-0">
|
||||
<h3 className="text-sm/4 font-semibold text-cyan-500">Compute</h3>
|
||||
<p className="mt-2 text-lg font-medium lg:text-xl tracking-tight text-gray-950">Mycelium Compute</p>
|
||||
<p className="mt-1 max-w-lg text-sm/6 text-gray-600">
|
||||
The Compute resource layers powering the stack.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 lg:rounded-bl-4xl" />
|
||||
</div>
|
||||
|
||||
<div className="relative lg:col-span-2">
|
||||
<div className="absolute inset-0 rounded-lg bg-white" />
|
||||
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
|
||||
<img
|
||||
alt=""
|
||||
src="https://tailwindcss.com/plus-assets/img/component-images/bento-01-integrations.png"
|
||||
className="h-50 object-cover"
|
||||
/>
|
||||
<div className="px-8 pt-4 pb-0">
|
||||
<h3 className="text-sm/4 font-semibold text-cyan-500">Storage</h3>
|
||||
<p className="mt-2 text-lg font-medium lg:text-xl tracking-tight text-gray-950">Mycelium Storage</p>
|
||||
<p className="mt-1 max-w-lg text-sm/6 text-gray-600">
|
||||
The Storage resource layers powering the stack.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5" />
|
||||
</div>
|
||||
|
||||
<div className="relative lg:col-span-2">
|
||||
<div className="absolute inset-0 rounded-lg bg-white max-lg:rounded-b-4xl lg:rounded-br-4xl" />
|
||||
<div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-br-[calc(2rem+1px)]">
|
||||
<img
|
||||
alt=""
|
||||
src="https://tailwindcss.com/plus-assets/img/component-images/bento-01-network.png"
|
||||
className="h-50 object-cover"
|
||||
/>
|
||||
<div className="px-8 pt-4 pb-0">
|
||||
<h3 className="text-sm/4 font-semibold text-cyan-500">GPU</h3>
|
||||
<p className="mt-2 text-lg font-medium lg:text-xl tracking-tight text-gray-950">Mycelium GPU</p>
|
||||
<p className="mt-1 max-w-lg text-sm/6 text-gray-600">
|
||||
The GPU resource layers powering the stack.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-b-4xl lg:rounded-br-4xl" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ✅ Bottom full-width line + spacer */}
|
||||
<div className="w-full border-b border-gray-200" />
|
||||
<div className="max-w-7xl mx-auto py-6 border-x border-gray-200 border-t-0 border-b-0" />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -7,9 +7,12 @@ import { FadeIn } from "@/components/ui/FadeIn";
|
||||
|
||||
export function StackSectionDark() {
|
||||
return (
|
||||
<section className="relative w-full bg-[#121212] overflow-hidden py-24 isolate">
|
||||
<section className="relative w-full bg-[#171717] overflow-hidden">
|
||||
{/* ✅ Top horizontal line with spacing */}
|
||||
<div className="max-w-7xl bg-[#111111] mx-auto py-6 border border-t-0 border-b-0 border-gray-600"></div>
|
||||
<div className="w-full border-t border-l border-r border-gray-600" />
|
||||
{/* === Background Layer === */}
|
||||
<div className="absolute inset-0 z-0 bg-transparent">
|
||||
<div className="absolute inset-0 z-0 bg-transparent border-t-0 border-b-0 border-gray-600">
|
||||
{/* Central main aura */}
|
||||
<motion.div
|
||||
className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[1200px] h-[1200px] rounded-full pointer-events-none"
|
||||
@@ -51,7 +54,7 @@ export function StackSectionDark() {
|
||||
</div>
|
||||
|
||||
{/* === Content === */}
|
||||
<div className="relative mx-auto max-w-7xl px-6 lg:px-8 grid grid-cols-1 lg:grid-cols-3 gap-16 items-center pt-12">
|
||||
<div className="relative mx-auto max-w-7xl px-6 lg:px-12 border border-t-0 border-b-0 border-gray-600 grid grid-cols-1 lg:grid-cols-3 gap-16 items-center py-24 ">
|
||||
{/* Left Column - Text */}
|
||||
<div className="text-center lg:text-left z-10">
|
||||
<FadeIn>
|
||||
@@ -69,7 +72,7 @@ export function StackSectionDark() {
|
||||
</div>
|
||||
|
||||
{/* Right Column - Animated Stack */}
|
||||
<div className="lg:col-span-2 flex items-center justify-center lg:justify-start relative z-10">
|
||||
<div className="lg:col-span-2 flex items-center justify-center lg:justify-start relative z-10 pt-10">
|
||||
<motion.div
|
||||
initial={{ y: 30, opacity: 0 }}
|
||||
whileInView={{ y: 0, opacity: 1 }}
|
||||
@@ -93,6 +96,9 @@ export function StackSectionDark() {
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
{/* ✅ Bottom horizontal line with spacing */}
|
||||
<div className="w-full border-b border-gray-600" />
|
||||
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-600"></div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -23,7 +23,7 @@ export function HomeMapSection() {
|
||||
))}
|
||||
</span>
|
||||
</H2>
|
||||
<P className="text-sm md:text-lg text-neutral-500 max-w-2xl mx-auto py-4">
|
||||
<P className="text-sm md:text-lg text-neutral-500 max-w-2xl mx-auto py-6">
|
||||
Mycelium Network's advancement technology enables anyone to deploy
|
||||
their own Internet infrastructure, anywhere.
|
||||
</P>
|
||||
|
||||
@@ -4,7 +4,7 @@ import { GlobeAltIcon } from "@heroicons/react/24/outline";
|
||||
|
||||
export function HomeUniverse() {
|
||||
return (
|
||||
<section className="mx-4 lg:mx-auto max-w-5xl border border-t-0 border-gray-200 py-8 text-center">
|
||||
<section className="mx-4 lg:mx-auto max-w-5xl border border-t-0 border-gray-200 py-4 text-center">
|
||||
<h2 className="text-2xl sm:text-3xl font-semibold text-gray-900 flex flex-wrap items-center justify-center gap-3">
|
||||
|
||||
{/* left text */}
|
||||
|
||||
@@ -348,7 +348,7 @@ function FeaturesMobile() {
|
||||
>
|
||||
<div
|
||||
className={clsx(
|
||||
'relative transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-6 outline-2 transition-colors',
|
||||
'relative transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-4 outline-2 transition-colors',
|
||||
activeIndex === featureIndex
|
||||
? 'outline-transparent' // Remove outline for active mobile slide
|
||||
: 'outline-transparent hover:outline-cyan-500',
|
||||
|
||||
Reference in New Issue
Block a user