From 4f40912dc9a65c78299b5814ec4710c25c4a0eee Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Tue, 14 Oct 2025 13:01:16 +0200
Subject: [PATCH] style: standardize heading sizes and add responsive text
 scaling across components

---
 src/app/not-found.tsx                | 2 +-
 src/components/About.tsx             | 2 +-
 src/components/Benefits.tsx          | 2 +-
 src/components/CallToAction.tsx      | 2 +-
 src/components/DownloadHero.tsx      | 4 ++--
 src/components/Faqs.tsx              | 2 +-
 src/components/Features.tsx          | 2 +-
 src/components/Hero.tsx              | 2 +-
 src/components/Pricing.tsx           | 4 ++--
 src/components/PrimaryFeatures.tsx   | 2 +-
 src/components/SecondaryFeatures.tsx | 2 +-
 src/components/UseCases.tsx          | 2 +-
 12 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 21704c6..357608e 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -9,7 +9,7 @@ export default function NotFound() {
       <Container className="relative isolate flex h-full flex-col items-center justify-center py-20 text-center sm:py-32">
         <CirclesBackground className="absolute top-1/2 left-1/2 -z-10 mt-44 w-272.5 -translate-x-1/2 -translate-y-1/2 mask-[linear-gradient(to_bottom,white_20%,transparent_75%)] stroke-gray-300/30" />
         <p className="text-sm font-semibold text-gray-900">404</p>
-        <h1 className="mt-2 text-3xl font-medium tracking-tight text-gray-900">
+        <h1 className="mt-2 text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
           Page not found
         </h1>
         <p className="mt-2 text-lg text-gray-600">
diff --git a/src/components/About.tsx b/src/components/About.tsx
index 7c280fc..6ea1560 100644
--- a/src/components/About.tsx
+++ b/src/components/About.tsx
@@ -13,7 +13,7 @@ export function About() {
       </div>
       <Container className="relative">
         <div className="mx-auto max-w-3xl sm:text-center">
-          <h2 className="text-3xl font-medium tracking-tight text-white sm:text-4xl">
+          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
             Discover Mycelium
           </h2>
           <p className="mt-6 text-lg text-gray-300">
diff --git a/src/components/Benefits.tsx b/src/components/Benefits.tsx
index 4e51b94..b6e1d9e 100644
--- a/src/components/Benefits.tsx
+++ b/src/components/Benefits.tsx
@@ -31,7 +31,7 @@ export function Benefits() {
     <section id="howitworks" className="bg-white py-24 sm:py-32 dark:bg-gray-900">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto max-w-5xl lg:mx-0">
-          <h2 className="text-3xl font-medium tracking-tight text-gray-900">
+          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
             Nature's Blueprint for Digital Connectivity
           </h2>
           <p className="mt-6 text-lg text-gray-600">
diff --git a/src/components/CallToAction.tsx b/src/components/CallToAction.tsx
index 2493e09..e29e653 100644
--- a/src/components/CallToAction.tsx
+++ b/src/components/CallToAction.tsx
@@ -16,7 +16,7 @@ export function CallToAction() {
       </div>
       <Container className="relative">
         <div className="mx-auto max-w-2xl sm:text-center">
-          <h2 className="text-3xl font-medium tracking-tight text-white sm:text-4xl">
+          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white sm:text-4xl">
             Get Started Today
           </h2>
           <p className="mt-6 text-lg text-gray-300">
diff --git a/src/components/DownloadHero.tsx b/src/components/DownloadHero.tsx
index 0c60301..68a359d 100644
--- a/src/components/DownloadHero.tsx
+++ b/src/components/DownloadHero.tsx
@@ -36,12 +36,12 @@ export default function DownloadHero() {
     <div className=" py-24 sm:py-32">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="mx-auto max-w-2xl lg:mx-0">
-          <h2 className="text-4xl font-semibold tracking-tight text-pretty text-gray-900 sm:text-5xl">
+          <h2 className="text-5xl lg:text-6xl font-medium tracking-tight text-gray-900">
             Download Mycelium
           </h2>
           <p className="mt-6 text-lg/8 text-gray-600">
             Get Mycelium for Android, Windows, macOS, and iOS to securely connect, store, and interact with the decentralized network—seamlessly and efficiently. Not sure how it works?{' '}
-            <a href="https://docs.ourworld.tf/mycelium_cloud/docs/" className="text-cyan-500 hover:text-cyan-500">
+            <a href="https://docs.ourworld.tf/mycelium_cloud/docs/" className="text-cyan-500 hover:text-cyan-600 font-semibold underline">
               Read the manual.
             </a>
           </p>
diff --git a/src/components/Faqs.tsx b/src/components/Faqs.tsx
index a750b8e..5147309 100644
--- a/src/components/Faqs.tsx
+++ b/src/components/Faqs.tsx
@@ -60,7 +60,7 @@ export function Faqs() {
         <div className="mx-auto max-w-2xl lg:mx-0">
           <h2
             id="faqs-title"
-            className="text-3xl font-medium tracking-tight text-gray-900"
+            className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900"
           >
             Frequently asked questions
           </h2>
diff --git a/src/components/Features.tsx b/src/components/Features.tsx
index c43179a..84f3ff6 100644
--- a/src/components/Features.tsx
+++ b/src/components/Features.tsx
@@ -8,7 +8,7 @@ export function Features() {
   return (
     <section id="features" className="bg-white py-24 sm:py-32">
       <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
-        <p className="mt-2 max-w-lg text-4xl font-semibold tracking-tight text-pretty text-gray-950 sm:text-5xl">
+        <p className="mt-2 max-w-lg text-3xl lg:text-4xl lg:text-4xl font-medium tracking-tight  text-pretty text-gray-950">
           Network Capabilities
         </p>
         <p className="mt-2 max-w-lg text-lg text-gray-600">
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index fe54ea0..15deca4 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -102,7 +102,7 @@ export function Hero() {
       <Container>
         <div className="lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
           <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">
+            <h1 className="text-5xl lg:text-6xl font-medium tracking-tight text-gray-900">
               Mycelium
             </h1>
             <h2 className="mt-6 text-2xl tracking-tight text-gray-600">
diff --git a/src/components/Pricing.tsx b/src/components/Pricing.tsx
index 70015cb..c2952d5 100644
--- a/src/components/Pricing.tsx
+++ b/src/components/Pricing.tsx
@@ -132,7 +132,7 @@ function Plan({
       </h3>
       <p
         className={clsx(
-          'relative mt-5 flex text-3xl tracking-tight',
+          'relative mt-5 flex text-3xl lg:text-4xl tracking-tight',
           featured ? 'text-white' : 'text-gray-900',
         )}
       >
@@ -221,7 +221,7 @@ export function Pricing() {
         <div className="mx-auto max-w-2xl text-center">
           <h2
             id="pricing-title"
-            className="text-3xl font-medium tracking-tight text-gray-900"
+            className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900"
           >
             Flat pricing, no management fees.
           </h2>
diff --git a/src/components/PrimaryFeatures.tsx b/src/components/PrimaryFeatures.tsx
index ff7c51a..f1823fb 100644
--- a/src/components/PrimaryFeatures.tsx
+++ b/src/components/PrimaryFeatures.tsx
@@ -576,7 +576,7 @@ export function PrimaryFeatures() {
     >
       <Container>
         <div className="mx-auto max-w-2xl lg:mx-0 lg:max-w-3xl">
-          <h2 className="text-3xl font-medium tracking-tight text-white">
+          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-white">
             How Mycelium Operates
           </h2>
           <p className="mt-6 text-lg text-gray-300">
diff --git a/src/components/SecondaryFeatures.tsx b/src/components/SecondaryFeatures.tsx
index 2c31ed9..f2521b2 100644
--- a/src/components/SecondaryFeatures.tsx
+++ b/src/components/SecondaryFeatures.tsx
@@ -195,7 +195,7 @@ export function SecondaryFeatures() {
     >
       <Container>
         <div className="mx-auto max-w-4xl sm:text-center">
-          <h2 className="text-3xl font-medium tracking-tight text-gray-900">
+          <h2 className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
             Coming Soon: The Future of Mycelium
           </h2>
           <p className="mt-6 text-lg text-gray-600">
diff --git a/src/components/UseCases.tsx b/src/components/UseCases.tsx
index a338d3a..36e5289 100644
--- a/src/components/UseCases.tsx
+++ b/src/components/UseCases.tsx
@@ -359,7 +359,7 @@ export function UseCases() {
         <div className="mx-auto max-w-2xl  lg:max-w-5xl">
           <h2
             id="usecases-title"
-            className="text-3xl font-medium tracking-tight text-gray-900 sm:text-center"
+            className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900 sm:text-center"
           >
             Powering Secure & Decentralized Connectivity
           </h2>