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

style: lighten border colors from gray-200 to gray-100

Browse Source
This commit is contained in:
sasha-astiadi
2025-11-07 17:28:33 +01:00
parent e8c424539e
commit aca13e275b
30 changed files with 83 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,7 +6,7 @@ export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => voi
<div className="px-4">
{/* Boxed container */}
<div
className="relative mx-auto max-w-7xl border border-t-0 border-gray-200 bg-white overflow-hidden bg-contain bg-right bg-no-repeat"
className="relative mx-auto max-w-7xl border border-t-0 border-gray-100 bg-white overflow-hidden bg-contain bg-right bg-no-repeat"
style={{ backgroundImage: "url('/images/hero11.webp')" }}
>
{/* Inner padding */}

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

@@ -38,16 +38,16 @@ export function HomeBenefits() {
<div className="">
{/* ✅ Top horizontal line with spacing */}
<div className="max-w-7xl bg-transparent mx-auto border border-t-0 border-b-0 border-gray-200" />
<div className="w-full border-t border-l border-r border-gray-200" />
<div className="max-w-7xl bg-transparent mx-auto border border-t-0 border-b-0 border-gray-100" />
<div className="w-full border-t border-l border-r border-gray-100" />
{/* ✅ Main content */}
<div className="mx-auto max-w-7xl border-gray-200">
<div className="mx-auto max-w-7xl border-gray-100">
<dl className="grid grid-cols-1 gap-4 lg:gap-6 lg:grid-cols-4 text-center">
{benefits.map((item) => (
<div
key={item.id}
className="flex flex-col items-center bg-white/40 dark:bg-black/40 py-10 px-4 border border-gray-200 lg:border-t-0 lg:border-b-0"
className="flex flex-col items-center bg-white/40 dark:bg-black/40 py-10 px-4 border border-gray-100 lg:border-t-0 lg:border-b-0"
>
<item.icon className="h-10 w-10 text-cyan-500 mb-4" />
<h3 className="text-lg font-semibold text-black dark:text-white">
@@ -62,8 +62,8 @@ export function HomeBenefits() {
</div>
{/* ✅ Bottom line + 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 className="w-full border-b border-gray-100" />
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100" />
</div>
);
}

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

@@ -111,12 +111,12 @@ export function HomeHosting() {
<section className="w-full max-w-8xl mx-auto bg-transparent">
{/* ✅ 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" />
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
<div className="w-full border-t border-l border-r border-gray-100" />
{/* ✅ Inner content container */}
<div className="max-w-7xl bg-white mx-auto py-12 border border-t-0 border-b-0 border-gray-200">
<div className="max-w-7xl bg-white mx-auto py-12 border border-t-0 border-b-0 border-gray-100">
<Container>
<div className="mx-auto max-w-4xl sm:text-center">
<Eyebrow className="text-cyan-500">IN ACTIVE EVOLUTION</Eyebrow>
@@ -138,7 +138,7 @@ export function HomeHosting() {
{features.map((feature) => (
<li
key={feature.name}
className="rounded-md border border-gray-200 p-6 transition-all duration-300 ease-in-out
className="rounded-md border border-gray-100 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" />
@@ -151,8 +151,8 @@ export function HomeHosting() {
</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>
<div className="w-full border-b border-gray-100" />
<div className="max-w-7xl bg-transparent mx-auto py-6 border border-t-0 border-b-0 border-gray-100"></div>
</section>
)
}

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

@@ -83,12 +83,12 @@ export function HomeTab() {
<section className="w-full max-w-8xl mx-auto bg-transparent">
{/* ✅ 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" />
<div className="max-w-7xl mx-auto py-6 border-x border-gray-100 bg-white border-t-0 border-b-0" />
<div className="w-full border-t border-l border-r border-gray-100" />
{/* ✅ 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">
<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-100">
<Eyebrow className="pt-12 ">Deploy faster</Eyebrow>
<H3 className="mt-2">Mycelium Components</H3>
<P className="mt-6 max-w-lg">
@@ -120,8 +120,8 @@ export function HomeTab() {
</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" />
<div className="w-full border-b border-gray-100" />
<div className="max-w-7xl mx-auto py-6 border-x border-gray-100 border-t-0 border-b-0" />
</section>
);
}

2
src/pages/home/archive/HomeCTA.tsx
View File

@@ -4,7 +4,7 @@ import { ArrowRightIcon } from "@heroicons/react/24/solid";
export function HomeCTA() {
return (
<section className="mx-4 lg:mx-auto max-w-5xl border border-t-0 border-gray-200 py-16">
<section className="mx-4 lg:mx-auto max-w-5xl border border-t-0 border-gray-100 py-16">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8 items-center px-6">
{/* LEFT: Big CTA Button */}

2
src/pages/home/archive/HomeGlobeNew.tsx
View File

@@ -4,7 +4,7 @@ import { Globe } from "@/components/ui/Globe";
export function HomeGlobeNew() {
return (
<section className="mx-4 pt-12 border-t lg:mx-auto max-w-5xl border border-gray-200">
<section className="mx-4 pt-12 border-t lg:mx-auto max-w-5xl border border-gray-100">
<div className="lg:-mt-12 grid grid-cols-1 lg:grid-cols-2 divide-y lg:divide-y-0 lg:divide-x divide-gray-200">
{/* Column 1 */}

2
src/pages/home/archive/HomeHero.tsx
View File

@@ -2,7 +2,7 @@ import { Button } from '@/components/Button'
export function HomeHero() {
return (
<section className="mt-12 bg-transparent border border-gray-200 border-b-0 mx-4 lg:mx-auto max-w-5xl shadow-[0_0_40px_-20px_rgba(0,0,0,0.06)]">
<section className="mt-12 bg-transparent border border-gray-100 border-b-0 mx-4 lg:mx-auto max-w-5xl shadow-[0_0_40px_-20px_rgba(0,0,0,0.06)]">
<div className="px-6 py-12 lg:px-8 lg:py-24">
<div className="max-w-2xl mx-auto text-center">
<h1 className="text-3xl font-semibold tracking-tight text-gray-900 lg:text-5xl">

2
src/pages/home/archive/HomeNew.tsx
View File

@@ -6,7 +6,7 @@ export function HomeAurora({ onGetStartedClick }: { onGetStartedClick: () => voi
<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"
className="relative mx-auto max-w-7xl border border-t-0 border-gray-100 overflow-hidden bg-cover bg-right bg-no-repeat"
style={{ backgroundImage: "url('/images/hero11.webp')" }}
>
{/* Inner padding */}

6
src/pages/home/archive/HomeProductsA.tsx
View File

@@ -2,7 +2,7 @@
export function HomeProductsA() {
return (
<section className="mx-4 pt-12 border-t-0 lg:mx-auto max-w-5xl border border-gray-200">
<section className="mx-4 pt-12 border-t-0 lg:mx-auto max-w-5xl border border-gray-100">
<div className="lg:-mt-12 grid grid-cols-1 lg:grid-cols-2 divide-y lg:divide-y-0 lg:divide-x divide-gray-200">
{/* Product 1 */}
@@ -32,7 +32,7 @@ export function HomeProductsA() {
</div>
{/* Product 3 */}
<div className="px-6 lg:px-24 py-16 flex border-t border-gray-200 flex-col items-center text-center">
<div className="px-6 lg:px-24 py-16 flex border-t border-gray-100 flex-col items-center text-center">
<h2 className="mt-4 text-xl font-semibold tracking-tight text-gray-900 lg:text-2xl">
Mycelium Agents
</h2>
@@ -45,7 +45,7 @@ export function HomeProductsA() {
</div>
{/* Product 4 */}
<div className="px-6 lg:px-24 py-16 flex border-t border-gray-200 flex-col items-center text-center">
<div className="px-6 lg:px-24 py-16 flex border-t border-gray-100 flex-col items-center text-center">
<h2 className="mt-4 text-xl font-semibold tracking-tight text-gray-900 lg:text-2xl">
Compute / Storage / GPU
</h2>

2
src/pages/home/archive/HomeStack.tsx
View File

@@ -31,7 +31,7 @@ export function HomeStack() {
const current = layers.find((l) => l.id === active)!;
return (
<section className="mx-4 pt-12 border-t-0 lg:mx-auto max-w-5xl border border-gray-200">
<section className="mx-4 pt-12 border-t-0 lg:mx-auto max-w-5xl border border-gray-100">
<div className="lg:-mt-12 grid grid-cols-1 lg:grid-cols-5 divide-y lg:divide-y-0 lg:divide-x divide-gray-200">
{/* LEFT COLUMN (2 COLS) */}

2
src/pages/home/archive/HomeStat.tsx
View File

@@ -1,6 +1,6 @@
export function HomeStat() {
return (
<section className="mx-4 pt-12 border-t-0 lg:mx-auto max-w-5xl border border-gray-200">
<section className="mx-4 pt-12 border-t-0 lg:mx-auto max-w-5xl border border-gray-100">
<div className="lg:-mt-12 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 divide-y sm:divide-y-0 lg:divide-y-0 lg:divide-x divide-gray-200">
{/* CORES */}

6
src/pages/home/archive/HomeTabs.tsx
View File

@@ -54,11 +54,11 @@ export function HomeApplication() {
const Icon = current.icon; // ✅ dynamic icon
return (
<section className="mx-4 border-t-0 lg:mx-auto max-w-5xl border border-gray-200">
<section className="mx-4 border-t-0 lg:mx-auto max-w-5xl border border-gray-100">
<div className="grid grid-cols-1 lg:grid-cols-4 gap-12 relative">
{/* ✅ VERTICAL DIVIDER ON DESKTOP */}
<div className="hidden lg:block absolute left-3/4 top-0 bottom-0 border-l border-gray-200 pointer-events-none"></div>
<div className="hidden lg:block absolute left-3/4 top-0 bottom-0 border-l border-gray-100 pointer-events-none"></div>
{/* LEFT COLUMN */}
<div className="lg:col-span-3 space-y-6 lg:pl-6 py-12">
@@ -71,7 +71,7 @@ export function HomeApplication() {
</p>
{/* TABS */}
<div className="inline-flex flex-wrap gap-2 bg-gray-50 rounded-full p-1 border border-gray-200 w-auto">
<div className="inline-flex flex-wrap gap-2 bg-gray-50 rounded-full p-1 border border-gray-100 w-auto">
{tabs.map((tab) => (
<button
key={tab.id}

2
src/pages/home/archive/HomeUniverse.tsx
View File

@@ -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-4 text-center">
<section className="mx-4 lg:mx-auto max-w-5xl border border-t-0 border-gray-100 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 */}

2
src/pages/home/archive/HomeWhy.tsx
View File

@@ -16,7 +16,7 @@ export function HomeWhy() {
];
return (
<section className="mx-4 lg:mx-auto max-w-5xl border border-t-0 border-gray-200 py-12 px-6 text-center">
<section className="mx-4 lg:mx-auto max-w-5xl border border-t-0 border-gray-100 py-12 px-6 text-center">
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 place-items-center">
{items.map(({ label, icon: Icon }) => (
<span