From 51ef8dffb5a46155d5ceb769dc9091557ae4ef5a Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Sat, 1 Nov 2025 21:02:35 +0100
Subject: [PATCH] feat: enhance UI components and layout styling

- 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
---
 src/components/Texts.tsx              |  2 +-
 src/components/ui/cards.tsx           |  2 +-
 src/pages/cloud/CloudArchitecture.tsx | 12 ++++++------
 src/pages/cloud/CloudFeatures.tsx     |  4 ++--
 src/pages/cloud/CloudHero.tsx         | 10 +++++-----
 5 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/src/components/Texts.tsx b/src/components/Texts.tsx
index f40954e..8410884 100644
--- a/src/components/Texts.tsx
+++ b/src/components/Texts.tsx
@@ -131,7 +131,7 @@ export const FeatureTitle = createTextComponent(
 )
 export const FeatureDescription = createTextComponent(
   'p',
-  'text-sm leading-normal tracking-normal'
+  'lg:text-base text-sm leading-normal tracking-normal'
 )
 export const MobileFeatureTitle = createTextComponent(
   'h3',
diff --git a/src/components/ui/cards.tsx b/src/components/ui/cards.tsx
index 13d6b23..257d975 100644
--- a/src/components/ui/cards.tsx
+++ b/src/components/ui/cards.tsx
@@ -8,7 +8,7 @@ const DarkCard = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "border border-white/10 bg-white/3 p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 hover:bg-white/6 hover:scale-105 hover:shadow-lg hover:shadow-cyan-500/15",
+      "border border-white/10 bg-white/3 p-8 backdrop-blur-sm transition hover:-translate-y-1 hover:border-cyan-300/50 rounded-3xl hover:bg-white/6 hover:scale-105 hover:shadow-lg hover:shadow-cyan-500/15",
       className
     )}
     {...props}
diff --git a/src/pages/cloud/CloudArchitecture.tsx b/src/pages/cloud/CloudArchitecture.tsx
index 79d6188..43070a5 100644
--- a/src/pages/cloud/CloudArchitecture.tsx
+++ b/src/pages/cloud/CloudArchitecture.tsx
@@ -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
diff --git a/src/pages/cloud/CloudFeatures.tsx b/src/pages/cloud/CloudFeatures.tsx
index dcc1fc9..f86cef1 100644
--- a/src/pages/cloud/CloudFeatures.tsx
+++ b/src/pages/cloud/CloudFeatures.tsx
@@ -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={() => {
diff --git a/src/pages/cloud/CloudHero.tsx b/src/pages/cloud/CloudHero.tsx
index 5b2aed6..6a17204 100644
--- a/src/pages/cloud/CloudHero.tsx
+++ b/src/pages/cloud/CloudHero.tsx
@@ -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>