refactor: replace hardcoded text styles with reusable Text components

src/components/SecondaryFeatures.tsx

@@ -1,4 +1,11 @@
 import { useId } from 'react'
+import {
+  Eyebrow,
+  FeatureDescription,
+  P,
+  SectionHeader,
+  SecondaryFeatureTitle,
+} from './Texts'
 
 import { Container } from '@/components/Container'
 
@@ -195,13 +202,16 @@ export function SecondaryFeatures() {
     >
       <Container>
         <div className="mx-auto max-w-4xl sm:text-center">
-          <h2 className="text-base/7 font-semibold text-cyan-500">Roadmap</h2>
-          <p className="text-3xl lg:text-4xl font-medium tracking-tight text-gray-900">
+          <Eyebrow color="accent">Roadmap</Eyebrow>
+          <SectionHeader as="h2" className="mt-2">
             Coming Soon: The Future of Mycelium
-          </p>
-          <p className="mt-6 text-lg text-gray-600">
-            Mycelium is evolving to bring even more powerful decentralized features, designed to enhance your experience and expand possibilities. Be the first to explore what's coming next by staying connected with our latest updates.
-          </p>
+          </SectionHeader>
+          <P color="secondary" className="mt-6">
+            Mycelium is evolving to bring even more powerful decentralized
+            features, designed to enhance your experience and expand possibilities.
+            Be the first to explore what's coming next by staying connected with
+            our latest updates.
+          </P>
         </div>
         <ul
           role="list"
@@ -213,10 +223,12 @@ export function SecondaryFeatures() {
               className="rounded-2xl border border-gray-200 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20"
             >
               <feature.icon className="h-8 w-8" />
-              <h3 className="mt-6 font-semibold text-gray-900">
+              <SecondaryFeatureTitle color="primary" className="mt-6">
                 {feature.name}
-              </h3>
-              <p className="mt-2 text-gray-700">{feature.description}</p>
+              </SecondaryFeatureTitle>
+              <FeatureDescription color="tertiary" className="mt-2">
+                {feature.description}
+              </FeatureDescription>
             </li>
           ))}
         </ul>