forked from emre/www_projectmycelium_com
style: lighten border colors from gray-200 to gray-100
This commit is contained in:
@@ -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 */}
|
||||
|
||||
@@ -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,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">
|
||||
|
||||
@@ -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 */}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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) */}
|
||||
|
||||
@@ -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 */}
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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 */}
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user