ourworld_web/www_projectmycelium_com
22
0
Fork 0
forked from emre/www_projectmycelium_com
Code Issues 9 Pull Requests Projects Releases Activity

feat: redesign network page with improved layout and typography

Browse Source 
- Replaced hardcoded text elements with reusable typography components (H2, H3, P, Eyebrow, CT, CP)
- Updated NetworkCapabilities section with dark theme, two-column layout, and visual separators
- Added consistent border styling and spacing across Features and Hero sections
This commit is contained in:
sasha-astiadi
2025-11-07 23:13:40 +01:00
parent de89539de1
commit f04a7eb3cf
3 changed files with 110 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/pages/network/Hero.tsx
View File

@@ -2,6 +2,7 @@ import { useId } from 'react'
import { Container } from '@/components/Container'
import { Button } from '@/components/Button'
import phoneFrame from '../../images/phoneframe.png'
import { H3, Eyebrow, P, CT, CP } from "@/components/Texts";
function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
let id = useId()
@@ -74,24 +75,24 @@ function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
export function Hero() {
return (
<div className="overflow-hidden pb-24 lg:py-32 lg:pb-0">
<div className="overflow-hidden pb-24 lg:py-12 mt-10 lg:pb-0 border border-t-0 border-b border-gray-100">
<Container>
<div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
<div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20 px-6 lg:px-8">
<div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
<h1 className="text-4xl font-medium tracking-tight text-gray-900 lg:text-6xl">
<H3 className="mb-4">
Mycelium Network
</h1>
<h2 className="mt-6 text-xl leading-normal tracking-tight text-gray-600 lg:text-2xl">
</H3>
<CT className="mt-8 font-medium text-gray-600 ">
Encrypted Peer-to-Peer Connectivity Across the Globe
</h2>
<p className="mt-6 text-lg leading-tight text-gray-600 lg:text-xl lg:leading-normal">
</CT>
<P className="mt-6 text-lg leading-tight text-gray-600 lg:text-xl lg:leading-normal">
Mycelium Network provides an unbreakable sovereign IPv6 mesh that connects people, nodes, and applications directly, with no central servers.
</p>
<p className="mt-6 text-lg leading-tight text-gray-600 lg:text-xl lg:leading-normal">
</P>
<P className="mt-6 text-lg leading-tight text-gray-600 lg:text-xl lg:leading-normal">
Works Alone. Works Together.
Mycelium Network can be used standalone, or together with Mycelium Cloud
for full-stack sovereignty.
</p>
</P>
<div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
<Button to="/download" variant="solid" color="cyan">
Get Mycelium Connector