feat: add unique IDs to CircleBackground components for tracking

README.md

@@ -148,3 +148,84 @@ To create a new page, follow these steps:
     ```
 
 The new page will be accessible at `http://localhost:3000/new-page`.
+
+### Download Page
+
+The download page, located at `src/app/(main)/download/page.tsx`, provides users with download links for the Mycelium application across various operating systems. The page is composed of the following components:
+
+- **DownloadHero**: Displays the main header and a grid of download cards for each supported platform (iOS, macOS, Windows, Android, and Linux).
+- **DevHub**: Provides links to developer resources, including documentation, support channels, forums, and community groups.
+- **Faqs**: A frequently asked questions section to address common user queries.
+
+### Not Found Page
+
+The `not-found.tsx` file at `src/app/not-found.tsx` defines a custom 404 error page. This page is displayed whenever a user navigates to a non-existent route. It features a clean and simple layout with a 404 message and a button that directs the user back to the homepage.
+
+### Typography with `Texts.tsx`
+
+The `src/components/Texts.tsx` file implements a flexible and consistent typography system using a factory pattern. It exports a set of reusable text components, such as `H1`, `P`, and `SectionHeader`, each with predefined styles and color variants.
+
+This approach ensures that the visual hierarchy and design language remain consistent throughout the application. To use a text component, simply import it and use it like any other React component:
+
+```tsx
+import { H1, P } from '@/components/Texts';
+
+function MyComponent() {
+  return (
+    <div>
+      <H1 color="accent">This is a heading</H1>
+      <P color="secondary">This is a paragraph.</P>
+    </div>
+  );
+}
+```
+
+### Button Components
+
+The `src/components/Button.tsx` file provides a polymorphic button component that can be rendered as either a `<button>` or a Next.js `<Link>`. It supports two main variants (`solid` and `outline`) and multiple color schemes.
+
+This component is used throughout the application to ensure that all buttons and links have a consistent look and feel. Example usage:
+
+```tsx
+import { Button } from '@/components/Button';
+
+function MyComponent() {
+  return (
+    <div>
+      <Button variant="solid" color="cyan">Submit</Button>
+      <Button href="/about" variant="outline">Learn More</Button>
+    </div>
+  );
+}
+```
+
+### Adding Images
+
+To add images to the project while ensuring they are optimized, use the Next.js `Image` component. Follow these steps:
+
+1.  **Place Your Image**: Add your image file to the `src/images/` directory.
+
+2.  **Import the Image**: In the component where you want to display the image, import it at the top of the file:
+
+    ```tsx
+    import myImage from '@/images/my-image.png';
+    ```
+
+3.  **Use the `Image` Component**: Use the `Image` component from `next/image` to render your image. Provide the `src`, `alt`, `width`, and `height` props for proper rendering and accessibility.
+
+    ```tsx
+    import Image from 'next/image';
+    import myImage from '@/images/my-image.png';
+
+    export function MyComponent() {
+      return (
+        <Image
+          src={myImage}
+          alt="A descriptive alt text for accessibility"
+          width={500}
+          height={300}
+          priority // Optional: Add this if the image is critical for the initial page load
+        />
+      );
+    }
+    ```

src/app/(main)/page.tsx

@@ -6,7 +6,7 @@ import { PrimaryFeatures } from '@/components/PrimaryFeatures'
 import { UseCases } from '@/components/UseCases'
 import { SecondaryFeatures } from '@/components/SecondaryFeatures'
 import { Benefits } from '@/components/Benefits'
-import { About } from '@/components/About'
+import { AboutNew } from '@/components/AboutNew'
 import { Features } from '@/components/Features'
 
 export default function Home() {
@@ -16,7 +16,7 @@ export default function Home() {
         <Hero />
       </AnimatedSection>
       <AnimatedSection>
-        <About />
+        <AboutNew />
       </AnimatedSection>
       <AnimatedSection>
         <Features />

src/components/About.tsx

@@ -8,39 +8,41 @@ export function About() {
   return (
     <section
       id="about"
-      className="relative overflow-hidden bg-gray-900 py-20 lg:py-32 lg:top-0 top-0"
+      className="relative bg-gray-900 py-20 lg:py-32"
     >
-      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+      <div className="relative -mt-[100vh]">
-        <CircleBackground color="#06b6d4" className="animate-spin-slower" />
+        <Container>
+                     <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+        <CircleBackground id="aboutcircle" color="#06b6d4" className="animate-spin-slower" />
       </div>
-      <Container className="relative">
+          <div className="mx-auto max-w-3xl text-center">
-        <div className="mx-auto max-w-3xl text-center">
+            <Eyebrow color="accent">Our Mission</Eyebrow>
-          <Eyebrow color="accent">Our Mission</Eyebrow>
+            <SectionHeader color="white" className="mt-2">
-          <SectionHeader color="white" className="mt-2">
+              Discover Mycelium
-            Discover Mycelium
+            </SectionHeader>
-          </SectionHeader>
+            <P color="light" className="mt-6">
-          <P color="light" className="mt-6">
+              Mycelium is an unbreakable network, always finding the shortest path and
-            Mycelium is an unbreakable network, always finding the shortest path and
+              providing 100% secure, peer-to-peer communication. But this is just
-            providing 100% secure, peer-to-peer communication. But this is just
+              the beginning.
-            the beginning.
+            </P>
-          </P>
+            <P color="light" className="mt-6">
-          <P color="light" className="mt-6">
+              Our mission is to create a sustainable digital ecosystem where
-            Our mission is to create a sustainable digital ecosystem where
+              communication is seamless, data is secure, and scalability knows no
-            communication is seamless, data is secure, and scalability knows no
+              bounds.
-            bounds.
+            </P>
-          </P>
+            <div className="mt-8 flex justify-center">
-          <div className="mt-8 flex justify-center">
+              <Button
-            <Button
+                href="https://threefold.info/mycelium_network/docs/"
-              href="https://threefold.info/mycelium_network/docs/"
+                target="_blank"
-              target="_blank"
+                variant="outline"
-              variant="outline"
+                color="white"
-              color="white"
+              >
-            >
+                Learn More
-              Learn More
+              </Button>
-            </Button>
+            </div>
           </div>
-        </div>
+        </Container>
-      </Container>
+      </div>
     </section>
   )
 }

src/components/AboutNew.tsx

@@ -0,0 +1,37 @@
+import { AppStoreLink } from '@/components/AppStoreLink'
+import { P, SectionHeader } from '@/components/Texts'
+import { WindowsLink } from '@/components/WindowsLink'
+import { AndroidLink } from './AndroidLink'
+import { LinuxLink } from '@/components/LinuxLink'
+import { CircleBackground } from '@/components/CircleBackground'
+import { Container } from '@/components/Container'
+
+export function AboutNew() {
+  return (
+    <section
+      id="get-free-shares-today"
+      className="relative overflow-hidden bg-gray-900 py-20 sm:py-28"
+    >
+      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+        <CircleBackground id="aboutcircle" color="#06b6d4" className="animate-spin-slower" />
+      </div>
+      <Container>
+        <div className="mx-auto max-w-2xl text-center">
+          <SectionHeader as="h2" color="white">
+            Discover Mycelium
+          </SectionHeader>
+           <P color="light" className="mt-6">
+              Mycelium is an unbreakable network, always finding the shortest path and
+              providing 100% secure, peer-to-peer communication. But this is just
+              the beginning.
+            </P>
+            <P color="light" className="mt-6">
+              Our mission is to create a sustainable digital ecosystem where
+              communication is seamless, data is secure, and scalability knows no
+              bounds.
+            </P>
+        </div>
+      </Container>
+    </section>
+  )
+}

src/components/CallToAction.tsx

@@ -13,9 +13,9 @@ export function CallToAction() {
       className="relative overflow-hidden bg-gray-900 py-20 sm:py-28"
     >
       <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-        <CircleBackground color="#06b6d4" className="animate-spin-slower" />
+        <CircleBackground id="cta_circle" color="#06b6d4" className="animate-spin-slower" />
       </div>
-      <Container className="relative">
+      <Container>
         <div className="mx-auto max-w-2xl text-center">
           <SectionHeader as="h2" color="white">
             Get Started Today

src/components/ContentDistribution.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { motion, useReducedMotion } from 'framer-motion';
+import clsx from 'clsx';
 
 type Props = {
   className?: string;     // e.g. "w-full h-80"
@@ -135,7 +136,12 @@ export default function ContentDistribution({ className, bg = '#ffffff' }: Props
   const prefersReduced = useReducedMotion();
 
   return (
-    <div className={className} aria-hidden="true" role="img" style={{ background: bg }}>
+        <div
+      className={clsx('relative overflow-hidden', className)}
+      aria-hidden="true"
+      role="img"
+      style={{ background: bg }}
+    >
       <svg viewBox={`0 0 ${W} ${H}`} width="100%" height="100%">
         {/* subtle radial background + rings */}
         <defs>

src/components/Features.tsx

@@ -5,114 +5,92 @@ import ProxyDetection from '@/components/ProxyDetection'
 import ProxyForwarding from '@/components/ProxyForwarding'
 import ContentDistribution from '@/components/ContentDistribution'
 
+const eyebrow = 'Core Components'
+const sectionHeader = 'Network Capabilities'
+const description1 = 'Built for resilience and autonomy, the Mycelium Network dynamically connects nodes through intelligent routing, proxy discovery, and decentralized delivery.'
+const description2 = 'Each component — from message passing to content distribution — works in harmony to create a fully self-healing, self-optimizing data mesh.'
+
+const cards = [
+  {
+    eyebrow: 'Routing',
+    title: 'Automatic pathfinding',
+    description: 'The Mycelium Network automatically discovers the shortest and fastest routes between nodes, ensuring optimal data flow and network efficiency without manual configuration.',
+    component: <Pathfinding />,
+    className: 'lg:col-span-3',
+    roundedClassName: 'max-lg:rounded-t-4xl lg:rounded-tl-4xl',
+    roundedInnerClassName: 'max-lg:rounded-t-[calc(2rem+1px)] lg:rounded-tl-[calc(2rem+1px)]'
+  },
+  {
+    eyebrow: 'Communication',
+    title: 'Distributed message bus',
+    description: 'Acts as a global message layer that lets nodes exchange information seamlessly. Enables resilient, asynchronous communication across the entire decentralized mesh.',
+    component: <MessageBus />,
+    className: 'lg:col-span-3',
+    roundedClassName: 'lg:rounded-tr-4xl',
+    roundedInnerClassName: 'lg:rounded-tr-[calc(2rem+1px)]'
+  },
+  {
+    eyebrow: 'Discovery',
+    title: 'Automatic proxy detection',
+    description: 'The system continuously scans for open SOCKS5 proxies within the network, making it effortless to find available connection points without manual setup.',
+    component: <ProxyDetection className="h-80" />,
+    className: 'lg:col-span-2',
+    roundedClassName: 'lg:rounded-bl-4xl',
+    roundedInnerClassName: 'lg:rounded-bl-[calc(2rem+1px)]'
+  },
+  {
+    eyebrow: 'Connectivity',
+    title: 'Seamless proxy forwarding',
+    description: 'Local SOCKS5 connections can be forwarded through nearby nodes or remote proxies. When browsers use the local proxy, traffic moves securely through the mesh—like a built-in VPN.',
+    component: <ProxyForwarding className="h-80" />,
+    className: 'lg:col-span-2',
+    roundedClassName: '',
+    roundedInnerClassName: ''
+  },
+  {
+    eyebrow: 'Delivery',
+    title: 'Decentralized content distribution',
+    description: 'Mycelium can serve data from distributed 0-DBs, creating a CDN-like layer that delivers content faster and more reliably—without relying on centralized servers.',
+    component: <ContentDistribution className="h-80" />,
+    className: 'lg:col-span-2',
+    roundedClassName: 'max-lg:rounded-b-4xl lg:rounded-br-4xl',
+    roundedInnerClassName: 'max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-br-[calc(2rem+1px)]'
+  }
+]
+
 export function Features() {
   return (
-    <section id="features" className=" py-24">
+    <section id="features" className="py-24">
       <div className="mx-auto max-w-2xl px-6 lg:max-w-7xl lg:px-8">
-        <Eyebrow color="accent">Core Components</Eyebrow>
+        <Eyebrow color="accent">{eyebrow}</Eyebrow>
         <SectionHeader color="dark" className="mt-2 max-w-2xl text-pretty">
-          Network Capabilities
+          {sectionHeader}
         </SectionHeader>
-        <P color="secondary" className="mt-4 max-w-4xl">
+        <P color="secondary" className="mt-4 max-w-4xl text-black">
-          Built for resilience and autonomy, the Mycelium Network dynamically
+          {description1}
-          connects nodes through intelligent routing, proxy discovery, and
-          decentralized delivery.
         </P>
         <P color="secondary" className="mt-2 max-w-4xl">
-          Each component — from message passing to content distribution — works in
+          {description2}
-          harmony to create a fully self-healing, self-optimizing data mesh.
         </P>
         <div className="mt-10 grid grid-cols-1 gap-x-4 gap-y-8 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
-          <div className="group relative lg:col-span-3 transition-all duration-300 ease-in-out hover:scale-105">
+          {cards.map((card, index) => (
-            <div className="absolute inset-0 rounded-lg bg-white max-lg:rounded-t-4xl lg:rounded-tl-4xl" />
+            <div key={index} className={`group relative ${card.className} transition-all duration-300 ease-in-out hover:scale-105`}>
-            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-t-[calc(2rem+1px)] lg:rounded-tl-[calc(2rem+1px)]">
+              <div className={`absolute inset-0 rounded-lg bg-transparent ${card.roundedClassName}`} />
-              <Pathfinding />
+              <div className={`flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] ${card.roundedInnerClassName}`}>
-              <div className="p-10 pt-4">
+                {card.component}
-                <CardEyebrow color="accent">Routing</CardEyebrow>
+                <div className="p-10 pt-4">
-                <CardTitle color="dark" className="mt-2">
+                  <CardEyebrow color="accent">{card.eyebrow}</CardEyebrow>
-                  Automatic pathfinding
+                  <CardTitle color="dark" className="mt-2">
-                </CardTitle>
+                    {card.title}
-                <CardDescription color="secondary" className="mt-2 max-w-lg">
+                  </CardTitle>
-                  The Mycelium Network automatically discovers the shortest and
+                  <CardDescription color="secondary" className="mt-2 max-w-lg">
-                  fastest routes between nodes, ensuring optimal data flow and
+                    {card.description}
-                  network efficiency without manual configuration.
+                  </CardDescription>
-                </CardDescription>
+                </div>
               </div>
+              <div className={`pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 group-hover:outline-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/20 ${card.roundedClassName}`} />
             </div>
-            <div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-t-4xl lg:rounded-tl-4xl group-hover:outline-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/20" />
+          ))}
-          </div>
-          <div className="group relative lg:col-span-3 transition-all duration-300 ease-in-out hover:scale-105">
-            <div className="absolute inset-0 rounded-lg bg-white lg:rounded-tr-4xl" />
-            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-tr-[calc(2rem+1px)]">
-              <MessageBus />
-              <div className="p-10 pt-4">
-                <CardEyebrow color="accent">Communication</CardEyebrow>
-                <CardTitle color="dark" className="mt-2">
-                  Distributed message bus
-                </CardTitle>
-                <CardDescription color="secondary" className="mt-2 max-w-lg">
-                  Acts as a global message layer that lets nodes exchange
-                  information seamlessly. Enables resilient, asynchronous
-                  communication across the entire decentralized mesh.
-                </CardDescription>
-              </div>
-            </div>
-            <div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 lg:rounded-tr-4xl group-hover:outline-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/20" />
-          </div>
-          <div className="group relative lg:col-span-2 transition-all duration-300 ease-in-out hover:scale-105">
-            <div className="absolute inset-0 rounded-lg bg-white lg:rounded-bl-4xl" />
-            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] lg:rounded-bl-[calc(2rem+1px)]">
-              <ProxyDetection className="h-80" />
-              <div className="p-10 pt-4">
-                <CardEyebrow color="accent">Discovery</CardEyebrow>
-                <CardTitle color="dark" className="mt-2">
-                  Automatic proxy detection
-                </CardTitle>
-                <CardDescription color="secondary" className="mt-2 max-w-lg">
-                  The system continuously scans for open SOCKS5 proxies within the
-                  network, making it effortless to find available connection points
-                  without manual setup.
-                </CardDescription>
-              </div>
-            </div>
-            <div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 lg:rounded-bl-4xl group-hover:outline-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/20" />
-          </div>
-          <div className="group relative lg:col-span-2 transition-all duration-300 ease-in-out hover:scale-105">
-            <div className="absolute inset-0 rounded-lg bg-white" />
-            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)]">
-              <ProxyForwarding className="h-80" />
-              <div className="p-10 pt-4">
-                <CardEyebrow color="accent">Connectivity</CardEyebrow>
-                <CardTitle color="dark" className="mt-2">
-                  Seamless proxy forwarding
-                </CardTitle>
-                <CardDescription color="secondary" className="mt-2 max-w-lg">
-                  Local SOCKS5 connections can be forwarded through nearby nodes or
-                  remote proxies. When browsers use the local proxy, traffic moves
-                  securely through the mesh—like a built-in VPN.
-                </CardDescription>
-              </div>
-            </div>
-            <div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 group-hover:outline-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/20" />
-          </div>
-          <div className="group relative lg:col-span-2 transition-all duration-300 ease-in-out hover:scale-105">
-            <div className="absolute inset-0 rounded-lg bg-white max-lg:rounded-b-4xl lg:rounded-br-4xl" />
-            <div className="relative flex h-full flex-col overflow-hidden rounded-[calc(var(--radius-lg)+1px)] max-lg:rounded-b-[calc(2rem+1px)] lg:rounded-br-[calc(2rem+1px)]">
-              <ContentDistribution className="h-80" />
-              <div className="p-10 pt-4">
-                <CardEyebrow color="accent">Delivery</CardEyebrow>
-                <CardTitle color="dark" className="mt-2">
-                  Decentralized content distribution
-                </CardTitle>
-                <CardDescription color="secondary" className="mt-2 max-w-lg">
-                  Mycelium can serve data from distributed 0-DBs, creating a
-                  CDN-like layer that delivers content faster and more
-                  reliably—without relying on centralized servers.
-                </CardDescription>
-              </div>
-            </div>
-            <div className="pointer-events-none absolute inset-0 rounded-lg shadow-sm outline outline-black/5 max-lg:rounded-b-4xl lg:rounded-br-4xl group-hover:outline-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/20" />
-          </div>
         </div>
       </div>
     </section>

src/components/MessageBus.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { motion, useReducedMotion } from 'framer-motion';
+import clsx from 'clsx';
 
 type Props = {
   className?: string;      // e.g. "w-full h-72"
@@ -72,7 +73,12 @@ export default function MessageBus({ className, bg = '#ffffff' }: Props) {
   const H = 460;
 
   return (
-    <div className={className} aria-hidden="true" role="img" style={{ background: bg }}>
+        <div
+      className={clsx('relative overflow-hidden', className)}
+      aria-hidden="true"
+      role="img"
+      style={{ background: bg }}
+    >
       <svg viewBox={`0 0 ${W} ${H}`} width="100%" height="100%">
 
         {/* subtle grid */}

src/components/PrimaryFeatures.tsx

@@ -259,7 +259,7 @@ function FeaturesDesktop() {
       onChange={onChange}
       vertical
     >
-      <TabList className="relative z-10 order-last col-span-6 space-y-6">
+      <TabList className="z-10 order-last col-span-6 space-y-6">
         {features.map((feature, featureIndex) => (
           <div
             key={feature.name}
@@ -294,7 +294,7 @@ function FeaturesDesktop() {
       </TabList>
       <div className="relative col-span-6">
         <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-          <CircleBackground color="#13B5C8" className="animate-spin-slower" />
+          <CircleBackground id="primaryfeatures_desktop_circle" color="#13B5C8" className="animate-spin-slower" />
         </div>
         <PhoneFrame className="z-10 mx-auto w-full max-w-[366px]">
           <TabPanels as={Fragment}>
@@ -368,7 +368,7 @@ function FeaturesMobile() {
             ref={(ref) => ref && (slideRefs.current[featureIndex] = ref)}
             className="w-full flex-none snap-center px-4 sm:px-6 transition-all duration-300 ease-in-out hover:scale-105"
           >
-            <div
+                        <div
               className={clsx(
                 'relative transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-6 outline-2 transition-colors',
                 activeIndex === featureIndex
@@ -377,7 +377,8 @@ function FeaturesMobile() {
               )}
             >
               <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-                <CircleBackground
+                                <CircleBackground
+                  id={`primaryfeatures_mobile_circle_${featureIndex}`}
                   color="#13B5C8"
                   className={featureIndex % 2 === 1 ? 'rotate-180' : undefined}
                 />

src/components/ProxyDetection.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { motion, useReducedMotion } from 'framer-motion';
+import clsx from 'clsx';
 
 type Props = {
   className?: string;   // e.g. "w-full h-64"
@@ -160,8 +161,8 @@ export default function ProxyDetection({ className, bg = '#ffffff' }: Props) {
   const delays = [0.8, 0.6, 0.4, 0.2, 0.0];
 
   return (
-    <div
+        <div
-      className={className}
+      className={clsx('relative overflow-hidden', className)}
       aria-hidden="true"
       role="img"
       style={{ background: bg }}

src/components/ProxyForwarding.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { motion, useReducedMotion } from 'framer-motion';
+import clsx from 'clsx';
 
 type Props = {
   className?: string;   // e.g. "w-full h-72"
@@ -124,7 +125,12 @@ export default function ProxyForwarding({ className, bg = '#ffffff' }: Props) {
   const DEST = { x: 860, y: 210 };
 
   return (
-    <div className={className} aria-hidden="true" role="img" style={{ background: bg }}>
+        <div
+      className={clsx('relative overflow-hidden', className)}
+      aria-hidden="true"
+      role="img"
+      style={{ background: bg }}
+    >
       <svg viewBox={`0 0 ${W} ${H}`} width="100%" height="100%">
         {/* subtle grid bg */}
         <defs>

src/components/Texts.tsx

@@ -44,15 +44,14 @@ const createTextComponent = <DefaultElement extends React.ElementType>(
     return (
       <Tag
         className={cn(defaultClassName, colorVariants[color], className)}
-        {...(props as object)}
+        {...props}
       >
         {children}
       </Tag>
     )
   }
 
-  ;(Text as any).displayName = `Text(${
+  ;(Text as any).displayName = `Text(${typeof defaultElement === 'string' ? defaultElement : 'Component'
-    typeof defaultElement === 'string' ? defaultElement : 'Component'
   })`
   return Text
 }
@@ -60,47 +59,89 @@ const createTextComponent = <DefaultElement extends React.ElementType>(
 // Exports based on your tailwind.css and the example
 export const H1 = createTextComponent(
   'h1',
-  'text-5xl lg:text-8xl font-medium tracking-tight'
+  'text-5xl lg:text-8xl font-medium leading-tight tracking-tight'
+)
+export const H2 = createTextComponent(
+  'h2',
+  'text-4xl lg:text-6xl font-medium leading-tight tracking-tight'
+)
+export const H3 = createTextComponent(
+  'h3',
+  'text-3xl lg:text-5xl font-medium leading-tight tracking-tight'
+)
+export const H4 = createTextComponent(
+  'h4',
+  'text-2xl lg:text-4xl font-medium leading-snug tracking-tight'
 )
-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-medium')
 export const P = createTextComponent(
   'p',
   'text-base lg:text-lg leading-relaxed'
 )
-export const Small = createTextComponent('small', 'text-sm font-medium')
+export const Small = createTextComponent(
-export const Subtle = createTextComponent('p', 'text-sm text-gray-500')
+  'small',
-export const H5 = createTextComponent('h5', 'text-xl lg:text-2xl font-semibold')
+  'text-sm font-medium leading-normal tracking-normal'
-export const Eyebrow = createTextComponent('h2', 'text-base/7 font-semibold')
+)
+export const Subtle = createTextComponent(
+  'p',
+  'text-sm leading-normal tracking-normal text-gray-500'
+)
+export const H5 = createTextComponent(
+  'h5',
+  'text-xl lg:text-2xl font-semibold leading-snug tracking-tight'
+)
+export const Eyebrow = createTextComponent(
+  'h2',
+  'text-base/7 font-semibold tracking-wide'
+)
 export const SectionHeader = createTextComponent(
   'p',
-  'text-3xl lg:text-4xl font-medium tracking-tight'
+  'text-3xl lg:text-4xl font-medium leading-tight tracking-tight'
+)
+export const CardEyebrow = createTextComponent(
+  'h3',
+  'text-sm/4 font-semibold tracking-wide'
 )
-export const CardEyebrow = createTextComponent('h3', 'text-sm/4 font-semibold')
 export const CardTitle = createTextComponent(
   'p',
-  'text-lg font-medium tracking-tight'
+  'text-lg font-medium leading-snug tracking-tight'
+)
+export const CardDescription = createTextComponent(
+  'p',
+  'text-sm/6 leading-normal tracking-normal'
+)
+export const FeatureTitle = createTextComponent(
+  'h3',
+  'text-lg font-semibold leading-snug tracking-tight'
+)
+export const FeatureDescription = createTextComponent(
+  'p',
+  'text-sm leading-normal tracking-normal'
 )
-export const CardDescription = createTextComponent('p', 'text-sm/6')
-export const FeatureTitle = createTextComponent('h3', 'text-lg font-semibold')
-export const FeatureDescription = createTextComponent('p', 'text-sm')
 export const MobileFeatureTitle = createTextComponent(
   'h3',
-  'text-sm font-semibold sm:text-lg'
+  'text-sm font-semibold sm:text-lg leading-snug tracking-tight'
 )
 export const SecondaryFeatureTitle = createTextComponent(
   'h3',
-  'font-semibold'
+  'text-base font-semibold leading-snug tracking-tight'
+)
+export const Question = createTextComponent(
+  'h3',
+  'text-lg/6 font-semibold tracking-tight'
+)
+export const Answer = createTextComponent(
+  'p',
+  'mt-4 text-sm leading-normal tracking-normal'
 )
-export const Question = createTextComponent('h3', 'text-lg/6 font-semibold')
-export const Answer = createTextComponent('p', 'mt-4 text-sm')
 export const PageHeader = createTextComponent(
   'h2',
-  'text-5xl lg:text-6xl font-medium tracking-tight'
+  'text-5xl lg:text-6xl font-medium leading-tight tracking-tight'
 )
 export const DownloadCardTitle = createTextComponent(
   'dt',
-  'text-base/7 font-semibold'
+  'text-base/7 font-semibold tracking-wide'
+)
+export const DownloadCardDescription = createTextComponent(
+  'dd',
+  'text-base/7 leading-normal tracking-normal'
 )
-export const DownloadCardDescription = createTextComponent('dd', 'text-base/7')