forked from emre/www_projectmycelium_com
feat: add consistent border styling and improve layout spacing
- Applied border-gray-200 borders to main sections for visual consistency - Restructured HomeTab component with full-width card grid layout - Refined spacing and padding across hero, benefits, and hosting sections
This commit is contained in:
@@ -1,22 +1,15 @@
|
||||
"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,
|
||||
image: "/images/testpic.png",
|
||||
link: "/cloud",
|
||||
},
|
||||
{
|
||||
@@ -24,8 +17,7 @@ const tabs = [
|
||||
label: "Mesh Networking",
|
||||
title: "Mycelium Network",
|
||||
description: "Encrypted peer-to-peer mesh networking across the globe.",
|
||||
image: "/images/pages/network.png",
|
||||
bg: networkImage,
|
||||
image: "/images/testpic.png",
|
||||
link: "/network",
|
||||
},
|
||||
{
|
||||
@@ -33,8 +25,7 @@ const tabs = [
|
||||
label: "AI Agents",
|
||||
title: "Mycelium Agents",
|
||||
description: "Private, programmable AI systems that run on your hardware.",
|
||||
image: "/images/pages/agent.png",
|
||||
bg: agentImage,
|
||||
image: "/images/testpic.png",
|
||||
link: "/agent",
|
||||
},
|
||||
{
|
||||
@@ -42,8 +33,7 @@ const tabs = [
|
||||
label: "Compute & Storage",
|
||||
title: "Hardware Resources",
|
||||
description: "The resource layers powering the stack.",
|
||||
image: "/images/pages/compute.png",
|
||||
bg: computeImage,
|
||||
image: "/images/testpic.png",
|
||||
link: "/compute",
|
||||
},
|
||||
];
|
||||
@@ -53,80 +43,53 @@ export function HomeTab() {
|
||||
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">
|
||||
<section className="mx-4 lg:mx-auto max-w-7xl py-24 border border-gray-200 bg-white">
|
||||
|
||||
{/* ✅ 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">
|
||||
<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">
|
||||
Each component can be used on its own or combined into a fully sovereign cloud.
|
||||
</P>
|
||||
</div>
|
||||
|
||||
{/* ✅ Tabs & content centered */}
|
||||
<div className="flex justify-center">
|
||||
<div className="space-y-10 max-w-5xl w-full">
|
||||
{/* ✅ 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">
|
||||
|
||||
{/* ✅ 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>
|
||||
{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">
|
||||
<img
|
||||
src={tab.image}
|
||||
alt={tab.title}
|
||||
className="w-full h-32 object-cover rounded-md border border-gray-200 shadow-sm"
|
||||
/>
|
||||
|
||||
<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>
|
||||
</button>
|
||||
))}
|
||||
|
||||
{/* ✅ 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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user