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

feat: enhance UI components and layout styling

Browse Source 
- Updated FeatureDescription text size to be larger on desktop (lg:text-base)
- Added rounded corners (rounded-3xl) to DarkCard component
- Modified CloudArchitecture section with wider container (max-w-5xl) and updated heading styles
- Adjusted mobile feature navigation indicators with darker colors (bg-gray-600/700)
- Improved hero section typography using H2 and H5 components for better hierarchy
- Refined padding and background styling in CloudFeatures mobile
This commit is contained in:
sasha-astiadi
2025-11-01 21:02:35 +01:00
parent 9d8f1a6919
commit 51ef8dffb5
5 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/pages/cloud/CloudArchitecture.tsx
View File

@@ -1,5 +1,5 @@
import { Container } from '../../components/Container'
import { Eyebrow, SectionHeader, P } from '../../components/Texts'
import { Eyebrow, H3, P } from '../../components/Texts'
const architectureSections = [
{
@@ -39,15 +39,15 @@ const architectureSections = [
export function CloudArchitecture() {
return (
<section className="bg-white py-24 sm:py-32">
<section className="bg-white py-24 lg:py-32">
<Container>
<div className="mx-auto max-w-3xl text-center">
<div className="mx-auto max-w-5xl text-center">
<Eyebrow>
Technical Architecture
</Eyebrow>
<SectionHeader as="h2" className="mt-6 text-gray-900">
Built on a sovereign, encrypted delivery mesh.
</SectionHeader>
<H3 className="mt-6 text-gray-900">
Built on a Sovereign, Encrypted Delivery Mesh.
</H3>
<P className="mt-6 text-gray-600">
Mycelium Cloud rides on the ThreeFold Grid, pairing encrypted mesh
networking with deterministic K3s orchestration. Every layer is

4
src/pages/cloud/CloudFeatures.tsx
View File

@@ -363,7 +363,7 @@ function CloudFeaturesMobile() {
<div className="relative mx-auto w-full max-w-[366px]">
<feature.screen />
</div>
<div className="absolute inset-x-0 bottom-0 bg-gray-800/95 p-6 backdrop-blur-sm sm:p-10">
<div className="absolute inset-x-0 bottom-0 bg-gray-800 p-6 backdrop-blur-sm sm:p-10">
<feature.icon className="h-8 w-8" />
<MobileFeatureTitle color="white" className="mt-6">
{feature.name}
@@ -383,7 +383,7 @@ function CloudFeaturesMobile() {
key={featureIndex}
className={clsx(
'relative h-0.5 w-4 rounded-full',
featureIndex === activeIndex ? 'bg-gray-300' : 'bg-gray-500',
featureIndex === activeIndex ? 'bg-gray-600' : 'bg-gray-700',
)}
aria-label={`Go to slide ${featureIndex + 1}`}
onClick={() => {

10
src/pages/cloud/CloudHero.tsx
View File

@@ -2,7 +2,7 @@ import { useId } from 'react'
import { Button } from '../../components/Button'
import { Container } from '../../components/Container'
import { Eyebrow, SectionHeader, P } from '../../components/Texts'
import { Eyebrow, H2, P, H5 } from '../../components/Texts'
function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
const id = useId()
@@ -82,16 +82,16 @@ export function CloudHero() {
<Eyebrow className="tracking-[0.35em] uppercase text-cyan-500">
Mycelium Cloud
</Eyebrow>
<SectionHeader as="h1" className="mt-6 text-gray-900">
<H2 as="h1" className="mt-6 text-gray-900">
Deploy sovereign Kubernetes clusters on decentralized
infrastructure.
</SectionHeader>
<P className="mt-6 text-gray-600">
</H2>
<H5 className="mt-6 text-gray-600">
Mycelium Cloud turns the ThreeFold Grid into a programmable
substrate for K3s. Launch verifiable clusters with nature-inspired
networking, quantum-safe storage, and zero-image delivery that
keeps every workload deterministic.
</P>
</H5>
<P className="mt-6 text-gray-500">
Developer guide to decentralized cloud computing.
</P>