forked from emre/www_projectmycelium_com
refactor: adjust network page styling and typography
- Changed heading levels from H3 to H4 in NetworkCapabilities for better hierarchy - Updated PrimaryFeatures section with darker background and consistent border styling - Removed text-lg class from paragraph for standard sizing
This commit is contained in:
@@ -9,6 +9,7 @@ export function Features() {
|
|||||||
return (
|
return (
|
||||||
<section className="w-full max-w-8xl mx-auto bg-transparent">
|
<section className="w-full max-w-8xl mx-auto bg-transparent">
|
||||||
|
|
||||||
|
|
||||||
{/* ✅ Top spacer + full-width line */}
|
{/* ✅ Top spacer + full-width line */}
|
||||||
<div className="max-w-7xl mx-auto py-6 border-x border-gray-100 bg-white border-t-0 border-b-0" />
|
<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" />
|
<div className="w-full border-t border-l border-r border-gray-100" />
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import {
|
|||||||
NoSymbolIcon,
|
NoSymbolIcon,
|
||||||
} from '@heroicons/react/24/solid'
|
} from '@heroicons/react/24/solid'
|
||||||
|
|
||||||
import { Eyebrow, H3, P } from '@/components/Texts'
|
import { Eyebrow, H4, P } from '@/components/Texts'
|
||||||
|
|
||||||
export function NetworkCapabilities() {
|
export function NetworkCapabilities() {
|
||||||
return (
|
return (
|
||||||
@@ -22,11 +22,11 @@ export function NetworkCapabilities() {
|
|||||||
<div className="max-w-xl ">
|
<div className="max-w-xl ">
|
||||||
<Eyebrow>WHAT IT ENABLES</Eyebrow>
|
<Eyebrow>WHAT IT ENABLES</Eyebrow>
|
||||||
|
|
||||||
<H3 className="mt-6 text-white">
|
<H4 className="mt-6 text-white">
|
||||||
A Private Networking Layer for Everything You Run
|
A Private Networking Layer for Everything You Run
|
||||||
</H3>
|
</H4>
|
||||||
|
|
||||||
<P className="mt-6 text-lg text-gray-200">
|
<P className="mt-6 text-gray-200">
|
||||||
Mycelium Network is the backbone for secure, autonomous connectivity
|
Mycelium Network is the backbone for secure, autonomous connectivity
|
||||||
across devices, data centers, clusters, and self-hosted environments — anywhere in the world.
|
across devices, data centers, clusters, and self-hosted environments — anywhere in the world.
|
||||||
</P>
|
</P>
|
||||||
|
|||||||
@@ -407,10 +407,13 @@ export function PrimaryFeatures() {
|
|||||||
<section
|
<section
|
||||||
id="howitworks"
|
id="howitworks"
|
||||||
aria-label="Features for investing all your money"
|
aria-label="Features for investing all your money"
|
||||||
className="bg-gray-900 py-20 sm:py-32"
|
className="bg-[#121212]"
|
||||||
>
|
>
|
||||||
<Container>
|
{/* ✅ Top horizontal line with spacing */}
|
||||||
<div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-3xl">
|
<div className="max-w-7xl bg-[#121212] mx-auto py-6 border border-t-0 border-b-0 border-gray-800"></div>
|
||||||
|
<div className="w-full border-t border-l border-r border-gray-800" />
|
||||||
|
<Container className="pt-12 border border-t-0 border-b-0 border-gray-800">
|
||||||
|
<div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-3xl ">
|
||||||
<Eyebrow color="accent">How It Works</Eyebrow>
|
<Eyebrow color="accent">How It Works</Eyebrow>
|
||||||
<SectionHeader color="white" className="mt-2">
|
<SectionHeader color="white" className="mt-2">
|
||||||
How Mycelium Operates
|
How Mycelium Operates
|
||||||
@@ -425,9 +428,12 @@ export function PrimaryFeatures() {
|
|||||||
<div className="mt-16 md:hidden">
|
<div className="mt-16 md:hidden">
|
||||||
<FeaturesMobile />
|
<FeaturesMobile />
|
||||||
</div>
|
</div>
|
||||||
<Container className="hidden md:mt-20 md:block">
|
<Container className="hidden pt-12 pb-12 md:block border border-t-0 border-b-0 border-gray-800">
|
||||||
<FeaturesDesktop />
|
<FeaturesDesktop />
|
||||||
</Container>
|
</Container>
|
||||||
|
{/* ✅ bottom border + bottom spacer to match */}
|
||||||
|
<div className="w-full border-b border-gray-800" />
|
||||||
|
<div className="max-w-7xl mx-auto py-6 border border-t-0 border-b-0 border-gray-800 bg-transparent" />
|
||||||
</section>
|
</section>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user