ourworld_web/www_projectmycelium_com
23
0
Fork 0
forked from emre/www_projectmycelium_com
Code Issues 4 Pull Requests Releases Activity

feat: add consistent border styling and improve layout spacing

Browse Source 
- 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:
sasha-astiadi
2025-11-06 15:45:15 +01:00
parent b3836062a3
commit 5f0c749f94
6 changed files with 124 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Header.tsx
View File

@@ -27,7 +27,7 @@ export function Header() {
return ( return (
<header className="bg-transparent"> <header className="bg-transparent">
<nav> <nav className="border-b border-gray-200">
<Container className="flex bg-transparent justify-between py-4"> <Container className="flex bg-transparent justify-between py-4">
<div className="relative z-10 flex items-center gap-16"> <div className="relative z-10 flex items-center gap-16">
<Link to="/" aria-label="Home"> <Link to="/" aria-label="Home">

19
src/pages/home/HomeAurora.tsx
View File

@@ -1,16 +1,17 @@
import { H1, H5 } from "@/components/Texts" import { H1, H5 } from "@/components/Texts"
import { Button } from "@/components/Button" import { Button } from "@/components/Button"
export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => void }) { export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => void }) {
return ( return (
<div className="px-4">
{/* Boxed container */}
<div <div
className="relative bg-cover sm:bg-contain bg-right bg-no-repeat" className="relative mx-auto max-w-7xl border border-t-0 border-gray-200 overflow-hidden bg-contain bg-right bg-no-repeat"
style={{ backgroundImage: "url('/images/hero11.webp')" }} style={{ backgroundImage: "url('/images/hero11.webp')" }}
> >
<div className="mx-auto max-w-7xl lg:px-4"> {/* Inner padding */}
<div className="px-6 pt-12 pb-24 sm:pb-32 lg:col-span-5 lg:px-0 lg:pt-40 lg:pb-48 xl:col-span-5"> <div className="px-6 py-16 lg:py-24 ">
<div className="mx-auto max-w-2xl lg:mx-0"> <div className="max-w-2xl lg:pl-6">
<div className="hidden sm:flex"> <div className="hidden sm:flex">
<div className="relative rounded-full px-3 py-1 text-sm/6 text-gray-500 ring-1 ring-gray-900/10 hover:ring-gray-900/20"> <div className="relative rounded-full px-3 py-1 text-sm/6 text-gray-500 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
Deploying at scale?{' '} Deploying at scale?{' '}
@@ -20,24 +21,26 @@ export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => voi
</a> </a>
</div> </div>
</div> </div>
<H1 className="mt-8"> <H1 className="mt-8">
The Sovereign Agentic Cloud The Sovereign Agentic Cloud
</H1> </H1>
<H5 className="mt-8 text-lg text-gray-600"> <H5 className="mt-8 text-lg text-gray-600">
Host nodes, deploy workloads, or build private AI systems, Host nodes, deploy workloads, or build private AI systems,
all on infrastructure you own and control. all on infrastructure you own and control.
</H5> </H5>
<div className="mt-10 flex items-center gap-x-6"> <div className="mt-10 flex items-center gap-x-6">
<Button <Button
variant="solid" variant="solid"
className=""
color="cyan" color="cyan"
onClick={onGetStartedClick} onClick={onGetStartedClick}
> >
Start Hosting Start Hosting
</Button> </Button>
<Button to="#" variant="outline"> <Button to="#" variant="outline">
Deploy in Cloud <span aria-hidden="true"> →</span> Deploy in Cloud →
</Button> </Button>
</div> </div>
</div> </div>

4
src/pages/home/HomeBenefits.tsx
View File

@@ -34,7 +34,7 @@ export function HomeBenefits() {
}, },
]; ];
return ( return (
<div className="relative z-20 bg-blackpy-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 border border-t-0 border-gray-200">
<div className="px-12"> <div className="px-12">
<Eyebrow className="text-center text-cyan-500"> <Eyebrow className="text-center text-cyan-500">
Benefits Benefits
@@ -44,7 +44,7 @@ export function HomeBenefits() {
</H2> </H2>
</div> </div>
<div className="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-7 lg:grid-rows-2 lg:px-12 px-6"> <div className="mt-10 grid grid-cols-1 gap-4 lg:grid-cols-7 lg:grid-rows-2 lg:px-12 px-6">
<div className="flex p-px lg:col-span-4"> <div className="flex p-px lg:col-span-4">
<div className="w-full overflow-hidden rounded-lg bg-white/40 dark:bg-black/40 shadow-sm border border-transparent transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-cyan-500/50 hover:border-cyan-500 max-lg:rounded-t-4xl lg:rounded-tl-4xl"> <div className="w-full overflow-hidden rounded-lg bg-white/40 dark:bg-black/40 shadow-sm border border-transparent transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-cyan-500/50 hover:border-cyan-500 max-lg:rounded-t-4xl lg:rounded-tl-4xl">
<div className="flex items-center"> <div className="flex items-center">

20
src/pages/home/HomeHosting.tsx
View File

@@ -1,7 +1,9 @@
"use client";
import { Container } from '../../components/Container' import { Container } from '../../components/Container'
import { Eyebrow, H3, P } from '../../components/Texts' import { Eyebrow, H3, P } from '../../components/Texts'
/* ✅ Custom Icons */ /* ✅ Custom Icons (unchanged) */
function KubernetesIcon(props: React.ComponentPropsWithoutRef<'svg'>) { function KubernetesIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
return ( return (
@@ -106,11 +108,7 @@ const features = [
export function HomeHosting() { export function HomeHosting() {
return ( return (
<section <section className="mx-4 py-12 border-t-0 lg:mx-auto max-w-7xl border border-gray-200 lg:py-24">
id="comingsoon"
aria-label="Features"
className="py-20 sm:py-32"
>
<Container> <Container>
<div className="mx-auto max-w-4xl sm:text-center"> <div className="mx-auto max-w-4xl sm:text-center">
<Eyebrow className="text-cyan-500">IN ACTIVE EVOLUTION</Eyebrow> <Eyebrow className="text-cyan-500">IN ACTIVE EVOLUTION</Eyebrow>
@@ -126,18 +124,18 @@ export function HomeHosting() {
<ul <ul
role="list" role="list"
className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-6 text-sm className="mx-auto 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" lg:mt-12 sm:grid-cols-2 md:gap-y-10 lg:max-w-none lg:grid-cols-4"
> >
{features.map((feature) => ( {features.map((feature) => (
<li <li
key={feature.name} key={feature.name}
className="rounded-2xl border border-gray-200 p-8 transition-all duration-300 ease-in-out 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" hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white"
> >
<feature.icon className="h-14 w-14" /> <feature.icon className="h-14 w-14" />
<h3 className="mt-6 font-semibold text-gray-900">{feature.name}</h3> <h3 className="mt-4 font-semibold text-gray-900">{feature.name}</h3>
<p className="mt-2 text-gray-700">{feature.description}</p> <p className="mt-2 text-gray-700 leading-snug">{feature.description}</p>
</li> </li>
))} ))}
</ul> </ul>

105
src/pages/home/HomeTab.tsx
View File

@@ -1,22 +1,15 @@
"use client"; "use client";
import { useState } from "react"; import { useState } from "react";
import { Button } from "@/components/Button";
import { Eyebrow, H3, P } from "@/components/Texts"; 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 = [ const tabs = [
{ {
id: "cloud", id: "cloud",
label: "Kubernetes Clusters", label: "Kubernetes Clusters",
title: "Mycelium Cloud", title: "Mycelium Cloud",
description: "Deploy Kubernetes clusters on sovereign infrastructure.", description: "Deploy Kubernetes clusters on sovereign infrastructure.",
image: "/images/pages/cloud.png", image: "/images/testpic.png",
bg: cloudImage,
link: "/cloud", link: "/cloud",
}, },
{ {
@@ -24,8 +17,7 @@ const tabs = [
label: "Mesh Networking", label: "Mesh Networking",
title: "Mycelium Network", title: "Mycelium Network",
description: "Encrypted peer-to-peer mesh networking across the globe.", description: "Encrypted peer-to-peer mesh networking across the globe.",
image: "/images/pages/network.png", image: "/images/testpic.png",
bg: networkImage,
link: "/network", link: "/network",
}, },
{ {
@@ -33,8 +25,7 @@ const tabs = [
label: "AI Agents", label: "AI Agents",
title: "Mycelium Agents", title: "Mycelium Agents",
description: "Private, programmable AI systems that run on your hardware.", description: "Private, programmable AI systems that run on your hardware.",
image: "/images/pages/agent.png", image: "/images/testpic.png",
bg: agentImage,
link: "/agent", link: "/agent",
}, },
{ {
@@ -42,8 +33,7 @@ const tabs = [
label: "Compute & Storage", label: "Compute & Storage",
title: "Hardware Resources", title: "Hardware Resources",
description: "The resource layers powering the stack.", description: "The resource layers powering the stack.",
image: "/images/pages/compute.png", image: "/images/testpic.png",
bg: computeImage,
link: "/compute", link: "/compute",
}, },
]; ];
@@ -53,80 +43,53 @@ export function HomeTab() {
const current = tabs.find((t) => t.id === active)!; const current = tabs.find((t) => t.id === active)!;
return ( return (
<section className="mx-4 px-6 lg:px-8 lg:mx-auto max-w-7xl py-24"> <section className="mx-4 lg:mx-auto max-w-7xl py-24 border border-gray-200 bg-white">
<div className="space-y-12 text-center">
{/* ✅ Replaced H1 + P with Eyebrow + H3 + P */} <div className="text-center px-6 lg:px-8">
<Eyebrow className="text-gray-500">Ecosystem</Eyebrow> <Eyebrow>Ecosystem</Eyebrow>
<H3 className="text-gray-900 mt-2">Mycelium Components</H3>
<H3 className="text-gray-900"> <P className="text-gray-500 max-w-4xl mx-auto mt-6">
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. Each component can be used on its own or combined into a fully sovereign cloud.
</P> </P>
</div>
{/* ✅ Tabs & content centered */} {/* ✅ FULL-WIDTH NO PADDING CARD ROW */}
<div className="flex justify-center"> <div className="mt-10 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4
<div className="space-y-10 max-w-5xl w-full"> 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) => ( {tabs.map((tab) => (
<button <button
key={tab.id} key={tab.id}
onClick={() => setActive(tab.id)} onClick={() => setActive(tab.id)}
className={`px-5 py-2 rounded-full text-sm font-medium transition-all className={`group transition-all text-left
${ ${active === tab.id ? "bg-gray-50" : "bg-white"}
active === tab.id hover:bg-gray-50 focus:bg-gray-50
? "bg-white border border-gray-300 shadow-sm" w-full`}
: "text-gray-500 hover:text-gray-900"
}`}
> >
{tab.label} {/* ✅ Spacing only inside the card, not outside */}
</button> <div className="p-6 flex flex-col gap-3">
))} <img
</div> src={tab.image}
</div> alt={tab.title}
className="w-full h-32 object-cover rounded-md border border-gray-200 shadow-sm"
/>
{/* ✅ 2-column layout */} <h4 className="text-base font-semibold text-gray-900">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12"> {tab.title}
{/* 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> </h4>
<p className="text-sm text-gray-500 leading-relaxed max-w-md"> <p className="text-sm text-gray-500">
{current.description} {tab.description}
</p> </p>
<Button <span className="text-sm font-medium text-gray-900 group-hover:text-cyan-600">
variant="outline" Learn More →
color="gray" </span>
asChild
className="mt-2"
>
<a href={current.link}>Learn More</a>
</Button>
</div> </div>
</button>
))}
{/* 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> </div>
</section> </section>
); );

51
src/pages/home/archive/HomeNew.tsx Normal file
View File

@@ -0,0 +1,51 @@
import { H1, H5 } from "@/components/Texts"
import { Button } from "@/components/Button"
export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => void }) {
return (
<div className="px-4">
{/* Boxed container */}
<div
className="relative mx-auto max-w-7xl border border-t-0 border-gray-200 overflow-hidden bg-cover bg-right bg-no-repeat"
style={{ backgroundImage: "url('/images/hero11.webp')" }}
>
{/* Inner padding */}
<div className="px-6 pt-12 pb-24 sm:pb-32 lg:pt-40 lg:pb-48">
<div className="max-w-2xl">
<div className="hidden sm:flex">
<div className="relative rounded-full px-3 py-1 text-sm/6 text-gray-500 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
Deploying at scale?{' '}
<a href="#" className="font-semibold whitespace-nowrap text-cyan-600">
<span aria-hidden="true" className="absolute inset-0" />
Book a call <span>&rarr;</span>
</a>
</div>
</div>
<H1 className="mt-8">
The Sovereign Agentic Cloud
</H1>
<H5 className="mt-8 text-lg text-gray-600">
Host nodes, deploy workloads, or build private AI systems,
all on infrastructure you own and control.
</H5>
<div className="mt-10 flex items-center gap-x-6">
<Button
variant="solid"
color="cyan"
onClick={onGetStartedClick}
>
Start Hosting
</Button>
<Button to="#" variant="outline">
Deploy in Cloud →
</Button>
</div>
</div>
</div>
</div>
</div>
)
}