From bca730681e7179dbcd21d553e0b4fe75e030dc27 Mon Sep 17 00:00:00 2001
From: sasha-astiadi <sasha@incubaid.com>
Date: Wed, 22 Oct 2025 13:01:08 +0200
Subject: [PATCH] refactor: replace hardcoded text elements with reusable Text
 components in Hero section

---
 src/components/Hero.tsx  | 22 +++++++++++-----------
 src/components/Texts.tsx |  3 ++-
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index c6cdee2..80cb11a 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -3,6 +3,7 @@ import Image from 'next/image'
 import clsx from 'clsx'
 
 import { DownloadLink } from '@/components/DownloadLink'
+import { H1, H2, H3, H4, H5, P } from '@/components/Texts'
 import { Button } from '@/components/Button'
 import phoneFrame from '@/images/phoneframe.png'
 import { Container } from '@/components/Container'
@@ -103,18 +104,17 @@ export function Hero() {
       <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="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 lg:text-6xl font-medium tracking-tight text-gray-900">
-              Mycelium
-            </h1>
-              <h2 className="mt-6 lg:text-2xl text-xl tracking-tight leading-normal text-gray-600">
-                Unleashing the Power of Decentralized Networks
-            </h2>
-            <p className="mt-6 lg:text-xl text-lg text-gray-600 lg:leading-normal leading-tight">
-              Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The future of secure, efficient, and scalable networking.
-            </p>
-            <p className="mt-6 text-lg text-gray-600 ">
+            <H1>Mycelium</H1>
+            <H5 color="secondary" className="mt-6">
+              Unleashing the Power of Decentralized Networks
+            </H5>
+            <P color="secondary" className="mt-6">
+              Discover Mycelium, an end-to-end encrypted IPv6 overlay network. The
+              future of secure, efficient, and scalable networking.
+            </P>
+            <P color="secondary" className="mt-6">
               Coming Soon: New Decentralized Features
-            </p>
+            </P>
             <div className="mt-8 flex flex-wrap gap-x-6 gap-y-4">
               <DownloadLink />
               {/* <Button
diff --git a/src/components/Texts.tsx b/src/components/Texts.tsx
index e218f57..ecefbd5 100644
--- a/src/components/Texts.tsx
+++ b/src/components/Texts.tsx
@@ -59,10 +59,11 @@ export const H1 = createTextComponent(
 )
 export const H2 = createTextComponent('h2', 'text-4xl lg:text-6xl font-medium')
 export const H3 = createTextComponent('h3', 'text-3xl lg:text-5xl font-medium')
-export const H4 = createTextComponent('h4', 'text-2xl lg:text-4xl font-semibold')
+export const H4 = createTextComponent('h4', 'text-2xl lg:text-4xl font-medium')
 export const P = createTextComponent(
   'p',
   'text-base lg:text-lg leading-relaxed'
 )
 export const Small = createTextComponent('small', 'text-sm font-medium')
 export const Subtle = createTextComponent('p', 'text-sm text-gray-500')
+export const H5 = createTextComponent('h5', 'text-xl lg:text-2xl font-semibold')