style: update border colors from gray-200 to gray-300 and standardize cyan color usage

style: update feature card styling with cyan hover effects and consistent padding
style: update stat cards with consistent hover effects and modern styling
2025-10-22 15:47:52 +02:00 · 2025-10-22 15:47:41 +02:00 · 2025-10-22 15:35:35 +02:00 · 2025-10-22 15:27:47 +02:00 · 2025-10-22 15:18:39 +02:00
26 changed files with 184 additions and 91 deletions
--- a/src/app/(main)/layout.tsx
+++ b/src/app/(main)/layout.tsx
@@ -1 +0,0 @@
-export { Layout as default } from '@/components/Layout'
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,14 +1,14 @@
 import { type Metadata } from 'next'
 import Script from 'next/script'
-import { Mulish } from 'next/font/google'
+import { Inter } from 'next/font/google'
 import clsx from 'clsx'

 import '@/styles/tailwind.css'

-const mulish = Mulish({
+const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
-  variable: '--font-mulish',
+  variable: '--font-inter',
 })

 export const metadata: Metadata = {
@@ -26,7 +26,7 @@ export default function RootLayout({
  children: React.ReactNode
 }) {
  return (
-    <html lang="en" className={clsx('antialiased', mulish.variable)}>
+    <html lang="en" className={clsx('antialiased', inter.variable)}>
      <head>
        {/* MailerLite Universal */}
        <Script id="mailerlite-universal" strategy="afterInteractive">
--- a/src/components/Archives/Steps
+++ b/src/components/Archives/Steps
@@ -57,7 +57,7 @@ export function Steps() {
              initial={{ opacity: 0, y: 20 }}
              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
              transition={{ duration: 0.5, delay: 0.3 + index * 0.2 }}
-              className="rounded-2xl border border-gray-200 p-8 dark:border-gray-700"
+              className="rounded-2xl border border-gray-300 p-8 dark:border-gray-700"
            >
              <feature.icon className="h-8 w-8 mb-4 text-[#2F3178]" />
              <CT as="span" className="font-semibold">{feature.name}</CT>
--- a/src/components/BentoReviews.tsx
+++ b/src/components/BentoReviews.tsx
@@ -1,7 +1,7 @@
 "use client";

 import { cn } from "@/lib/utils";
-import { H2, P } from "@/components/Texts";
+import { SectionHeader, P, Eyebrow } from "@/components/Texts";
 import React, { useState, useEffect, useRef } from "react";
 import { BentoGrid, MotionBentoGridItem } from "@/components/ui/bento-grid";
 import { AnimatePresence, motion } from "framer-motion";
@@ -95,7 +95,8 @@ export function BentoReviews() {
      <div className="relative isolate py-24 bg-black text-center w-full lg:px-0 px-4">
        <FadeIn transition={{ duration: 0.8, delay: 0.1 }}>
          <div className="mx-auto max-w-5xl ">
-            <H2 className="text-center">Augmented Intelligence Fabric</H2>
+            <Eyebrow color="accent">Components</Eyebrow>
+            <SectionHeader className="text-center">Augmented Intelligence Fabric</SectionHeader>
          </div>
        </FadeIn>
        <FadeIn transition={{ duration: 0.8, delay: 0.2 }}>
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -10,7 +10,7 @@ const baseStyles = {

 const variantStyles = {
  solid: {
-    cyan: 'relative overflow-hidden bg-[#005eff] text-white before:absolute before:inset-0 active:before:bg-transparent hover:before:bg-white/10 active:bg-[#005eff] active:text-white/80 before:transition-colors',
+    cyan: 'relative overflow-hidden bg-cyan-500 text-white before:absolute before:inset-0 active:before:bg-transparent hover:before:bg-white/10 active:bg-cyan-600 active:text-white/80 before:transition-colors',
    white:
      'bg-white text-cyan-900 hover:bg-white/90 active:bg-white/90 active:text-cyan-900/70',
    gray: 'bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80',
--- a/src/components/CallTo.tsx
+++ b/src/components/CallTo.tsx
@@ -1,16 +1,16 @@
 "use client"

-import { H2, P } from '@/components/Texts'
+import { SectionHeader, P } from '@/components/Texts'

 export function CallTo() {
  return (
    <div className="relative isolate overflow-hidden max-w-5xl mx-auto py-24">
-      <div className="relative isolate overflow-hidden bg-gray-50/10 px-6 py-24 text-center shadow-md shadow-gray-900/5 sm:rounded-3xl sm:px-16 border border-gray-200">
+      <div className="relative isolate overflow-hidden bg-gray-50/10 px-6 py-24 text-center shadow-md shadow-gray-900/5 sm:rounded-3xl sm:px-16 border border-gray-300">
        <div className="mx-auto max-w-4xl text-center">
-          <H2 color="primary">
+          <SectionHeader color="primary">
          Are you Ready?
-          </H2>
-          <P color="custom" className="mt-8 max-w-3xl">
+          </SectionHeader>
+          <P className="mt-8 max-w-3xl">
            Why hand out your intelligence to centralized giants when you can build your own?
          </P>
          <div className="mt-10 flex items-center justify-center gap-x-6">
--- a/src/components/CallToAction.tsx
+++ b/src/components/CallToAction.tsx
@@ -4,6 +4,7 @@ import { CircleBackground } from '@/components/CircleBackground'
 import { Container } from '@/components/Container'
 import { Button } from '@/components/Button'
 import { FadeIn } from '@/components/FadeIn'
+import { Eyebrow } from '@/components/Texts'

 export function CallToAction() {
  return (
@@ -27,6 +28,7 @@ export function CallToAction() {
      <Container className="relative z-20">
          <FadeIn>
                <div className="mx-auto max-w-md text-center">
+          <Eyebrow color="accent"></Eyebrow>
          <h2 className="text-3xl font-medium tracking-tight text-white sm:text-4xl">
            Decentralized AI Agents that are Truly Yours
          </h2>
--- a/src/components/ClickableGallery.tsx
+++ b/src/components/ClickableGallery.tsx
@@ -6,7 +6,7 @@ import Image from 'next/image'
 import { motion, AnimatePresence } from 'framer-motion'
 import { wrap } from 'popmotion'
 import { Button } from '@/components/Button';
-import { H2, P, CT } from '@/components/Texts';
+import { SectionHeader, P, CT } from '@/components/Texts';
 import { TypeAnimation } from 'react-type-animation'
 import { FadeIn } from './FadeIn';

@@ -53,7 +53,7 @@ export function ClickableGallery() {
      <div className="relative isolate pt-8 pb-0 bg-transparent text-center w-full">
        <FadeIn transition={{ duration: 0.8, delay: 0.1 }}>
          <div className="mx-auto max-w-5xl lg:mt-12">
-            <H2 className="text-center">Agents with Endless Possibilities.</H2>
+            <SectionHeader className="text-center">Agents with Endless Possibilities.</SectionHeader>
          </div>
        </FadeIn>
        <FadeIn transition={{ duration: 0.8, delay: 0.2 }}>
--- a/src/components/ClickableGalleryLight.tsx
+++ b/src/components/ClickableGalleryLight.tsx
@@ -6,7 +6,7 @@ import Image from 'next/image'
 import { motion, AnimatePresence } from 'framer-motion'
 import { wrap } from 'popmotion'
 import { Button } from '@/components/Button';
-import { H2, P, CT } from '@/components/Texts';
+import { SectionHeader, P, CT, Eyebrow } from '@/components/Texts';
 import { TypeAnimation } from 'react-type-animation'
 import { FadeIn } from './FadeIn';

@@ -49,11 +49,12 @@ export function ClickableGalleryLight() {
  const prev = () => setActive((i) => wrap(0, galleryItems.length, i - 1))

  return (
-    <div className="bg-white">
+    <div className="bg-[#FAFAFA]">
      <div className="relative isolate pt-8 pb-0 text-center w-full">
        <FadeIn transition={{ duration: 0.8, delay: 0.1 }}>
          <div className="mx-auto max-w-5xl lg:mt-12">
-            <H2 className="text-center" color="dark">Agents with Endless Possibilities.</H2>
+            <Eyebrow color="accent">Use Cases</Eyebrow>
+            <SectionHeader className="text-center" color="dark">Agents with Endless Possibilities.</SectionHeader>
          </div>
        </FadeIn>
        <FadeIn transition={{ duration: 0.8, delay: 0.2 }}>
--- a/src/components/Companies.tsx
+++ b/src/components/Companies.tsx
@@ -2,7 +2,7 @@

 import React from "react";
 import { motion } from "framer-motion";
-import { H2, P } from '@/components/Texts';
+import { P, Eyebrow } from '@/components/Texts';
 import { InfiniteMovingCards } from "@/components/magicui/infinite-moving-cards";


@@ -50,6 +50,7 @@ export function Companies() {
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 1 }}
        >
+          <Eyebrow color="accent"></Eyebrow>
          <P className="hidden min-xl:text-gray-100 text-center mb-6">
            Mycelium Cloud allows you to deploy and scale AI agents from top global providers on a decentralized, privacy-first infrastructure.
          </P>
--- a/src/components/CountUpNumber.tsx
+++ b/src/components/CountUpNumber.tsx
@@ -1,18 +1,18 @@
 'use client'

 import CountUp from 'react-countup'
-import { H2 } from './Texts'
+import { SectionHeader } from './Texts'

 interface CountUpNumberProps {
  end: number
  className?: string
-  color?: 'light' | 'primary' | 'secondary' | 'custom'
+  color?: 'light' | 'primary' | 'secondary'
 }

 export function CountUpNumber({ end, className, color }: CountUpNumberProps) {
  return (
-    <H2 color={color} className={className}>
+    <SectionHeader color={color} className={className}>
      <CountUp end={end} duration={2.75} separator="," />
-    </H2>
+    </SectionHeader>
  )
 }
--- a/src/components/Faqs.tsx
+++ b/src/components/Faqs.tsx
@@ -62,7 +62,7 @@ export function Faqs() {
      id="faqs"
      ref={ref}
      aria-labelledby="faqs-title"
-      className="border-t border-gray-200 py-20 sm:py-32 relative overflow-hidden"
+      className="border-t border-gray-300 py-20 sm:py-32 relative overflow-hidden"
    >
      <motion.div
        initial={{ opacity: 0 }}
--- a/src/components/Fields.tsx
+++ b/src/components/Fields.tsx
@@ -3,7 +3,7 @@ import clsx from 'clsx'

 const formClasses = {
  light:
-    'block w-full appearance-none rounded-lg border border-gray-200 bg-white py-[calc(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-gray-900 placeholder:text-gray-400 focus:border-cyan-500 focus:outline-none focus:ring-cyan-500 sm:text-sm',
+    'block w-full appearance-none rounded-lg border border-gray-300 bg-white py-[calc(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-gray-900 placeholder:text-gray-400 focus:border-cyan-500 focus:outline-none focus:ring-cyan-500 sm:text-sm',
  dark:
    'block w-full appearance-none rounded-lg border border-gray-600 bg-transparent py-[calc(--spacing(2)-1px)] px-[calc(--spacing(3)-1px)] text-white placeholder:text-gray-400 focus:border-cyan-500 focus:outline-none focus:ring-cyan-500 sm:text-sm',
 }
--- a/src/components/GetStarted.tsx
+++ b/src/components/GetStarted.tsx
@@ -1,6 +1,6 @@
 "use client";

-import { H2, P, CP } from "@/components/Texts";
+import { SectionHeader, P, CP } from "@/components/Texts";
 import { Button } from "@/components/Button";

 export  function GetStarted() {
@@ -36,7 +36,7 @@ export  function GetStarted() {
      }}
    >
      <div className="max-w-8xl mx-auto px-4 text-left mb-12">
-        <H2>Get Started</H2>
+        <SectionHeader>Get Started</SectionHeader>
        <P>Explore the documentation, code, and support channels to start building with Mycelium Cloud.</P>
      </div>

--- a/src/components/GridStats.tsx
+++ b/src/components/GridStats.tsx
@@ -3,7 +3,7 @@
 import CountUp from "react-countup";
 import React from "react";
 import { Button } from "@/components/Button";
-import { H2, P } from "@/components/Texts";
+import { SectionHeader, P } from "@/components/Texts";

 export function GridStats() {
  return (
@@ -21,9 +21,9 @@ export function GridStats() {
          {/* Column 1: Title & Description */}
          <div className="flex flex-col space-y-10">
            <div>
-              <H2 color="light">
+              <SectionHeader color="light">
                Robust Infrastructure for your Intellegence Needs
-              </H2>
+              </SectionHeader>
              <P color="light" className="mt-6">
                Mycelium's groundbreaking technology provides dedicated, performance-validated GPUs for your AI workloads.
              </P>
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -72,7 +72,7 @@ export function Header() {
              {({ open }) => (
                <>
                  <PopoverButton
-                    className="relative z-10 -m-2 inline-flex items-center rounded-lg stroke-white p-2 hover:bg-gray-200/50 hover:stroke-gray-400 focus:not-data-focus:outline-hidden active:stroke-white"
+                    className="relative z-10 -m-2 inline-flex items-center rounded-lg stroke-white p-2 hover:bg-gray-300/50 hover:stroke-gray-400 focus:not-data-focus:outline-hidden active:stroke-white"
                    aria-label="Toggle site navigation"
                  >
                    {({ open }) =>
--- a/src/components/HomeAbout.tsx
+++ b/src/components/HomeAbout.tsx
@@ -8,7 +8,7 @@ import { Bars3Icon, XMarkIcon, ChevronDoubleDownIcon } from '@heroicons/react/24
 import Image from 'next/image'
 import diamondSvg from '@/images/diamond.svg'
 import { Container } from '@/components/Container';
-import { H2, P, H3 } from '@/components/Texts';
+import { SectionHeader, P, H3 } from '@/components/Texts';
 import { Candy } from '@/components/Candy'

 const navigation = [
@@ -65,10 +65,10 @@ export function HomeAbout() {
            transition={{ duration: 1, delay: 0.2 }}
            className="absolute top-24 left-0 max-w-xl text-left"
          >
-            <H2>
+            <SectionHeader>
              Enterprise AI Agents
              That Never Sleep.
-            </H2>
+            </SectionHeader>
          </motion.div>
          <motion.div
            initial={{ opacity: 0, y: 20 }}
@@ -76,7 +76,7 @@ export function HomeAbout() {
            transition={{ duration: 1, delay: 0.4 }}
            className="absolute top-54 left-0 max-w-xl text-left"
          >
-            <P color="custom">
+            <P>
              With Mycelium Cloud, you can deploy purpose-built AI agents to automate any workflow. Keep complete control of your data while scaling from simple tasks to complex decision-making.
            </P>
          </motion.div>
--- a/src/components/HomeHero.tsx
+++ b/src/components/HomeHero.tsx
@@ -5,7 +5,7 @@ import { motion } from 'framer-motion'
 import { TypeAnimation } from 'react-type-animation'
 import { Dialog, DialogPanel } from '@headlessui/react'
 import { Bars3Icon, XMarkIcon, ChevronDoubleDownIcon } from '@heroicons/react/24/outline'
-import { H1, H2, PL } from '@/components/Texts'
+import { H1, H2, P } from '@/components/Texts'

 const navigation = [
  { name: 'Product', href: '#' },
@@ -54,9 +54,9 @@ export function HomeHero() {
              transition={{ duration: 1, delay: 1 }}
              className="mt-12"
            >
-              <PL className="mx-auto max-w-4xl text-center text-gray-100" color="light">
+              <P className="mx-auto max-w-4xl text-center " color="secondary">
                Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
-              </PL>
+              </P>
            </motion.div>
          </div>
        </div>
--- a/src/components/HomeHeroLight2.tsx
+++ b/src/components/HomeHeroLight2.tsx
@@ -1,6 +1,7 @@
 'use client'

 import { useRef, useEffect } from 'react'
+import { H1, H2, P, H5, Eyebrow } from '@/components/Texts'

 export function HomeHeroLight2() {
  const videoRef = useRef<HTMLVideoElement>(null)
@@ -37,20 +38,21 @@ export function HomeHeroLight2() {
      {/* Content */}
      <div className="relative z-10 h-full flex items-center justify-center">
        <div className="mx-auto max-w-4xl text-center px-6 lg:px-8">
-          <h1
-            className="pt-6 text-5xl sm:text-7xl font-semibold tracking-tight leading-tight text-gray-900"
+          <Eyebrow color="accent"></Eyebrow>
+          <H1 
+            className="pt-6"
            style={{ textShadow: '0 2px 8px rgba(0,0,0,0.08)' }}
          >
            Decentralized Autonomous Agentic Cloud.
-          </h1>
+          </H1>

-          <p
-            className="mt-8 text-lg sm:text-xl font-medium text-gray-800/90 leading-relaxed"
+          <H5
+            className="mt-8"
            style={{ textShadow: '0 1px 4px rgba(0,0,0,0.06)' }}
          >
            Mycelium&apos;s advancements in Agentic infrastructure support private, secure, and
            autonomous Agents that connect, learn, and grow with you.
-          </p>
+          </H5>
        </div>
      </div>
    </section>
--- a/src/components/StackSectionLight.tsx
+++ b/src/components/StackSectionLight.tsx
@@ -2,7 +2,7 @@

 import { motion } from "framer-motion";
 import { StackedCubesLight } from "@/components/ui/StackedCubesLight";
-import { H2, P } from "@/components/Texts";
+import { H2, P, SectionHeader, Eyebrow } from "@/components/Texts";
 import { FadeIn } from "./FadeIn";
 import { DottedGlowBackground } from '@/components/ui/dotted-glow-background';

@@ -10,7 +10,7 @@ export function StackSectionLight() {
  return (
    <section className="relative w-full overflow-hidden py-24 lg:py-40">
      {/* === Background Layer === */}
-      <div className="absolute inset-0 -z-10 bg-white">
+      <div className="absolute inset-0 -z-10 bg-[#FAFAFA]">
        {/* Dotted Glow Background */}
        <DottedGlowBackground
          gap={15}
@@ -30,9 +30,10 @@ export function StackSectionLight() {
        {/* Left Column - Text */}
        <div className="text-center lg:text-left">
          <FadeIn>
-            <H2 color="dark" className="text-4xl sm:text-5xl font-semibold">
+            <Eyebrow color="accent">Technology Layers</Eyebrow>
+            <SectionHeader color="dark" className="text-4xl sm:text-5xl font-semibold">
              The Mycelium Stack
-            </H2>
+            </SectionHeader>
          </FadeIn>

          <FadeIn>
--- a/src/components/Steps.tsx
+++ b/src/components/Steps.tsx
@@ -2,7 +2,7 @@

 import React, { useRef } from 'react'
 import { motion, useInView } from 'framer-motion'
-import { H2, P, CT, CP } from '@/components/Texts'
+import { SectionHeader, P, CT, CP, Eyebrow } from '@/components/Texts'
 import { TbCircleNumber1Filled, TbCircleNumber2Filled, TbCircleNumber3Filled } from 'react-icons/tb'

 const features = [
@@ -38,9 +38,10 @@ export function Steps() {
          transition={{ duration: 0.8, delay: 0.1 }}
          className="mx-auto max-w-5xl text-center"
        >
-          <H2 className="text-3xl font-medium tracking-tight" color="light">
+          <Eyebrow color="accent">Get Started</Eyebrow>
+          <SectionHeader className="text-3xl font-medium tracking-tight" color="light">
            Deploy Scalable LLMs and AI Agents in Seconds
-          </H2>
+          </SectionHeader>
          <P className="mt-6" color="light">
            Launch and scale intelligence on your own terms. Mycelium Cloud makes it simple to deploy models, integrate knowledge, and run everything on a network you control.
          </P>
@@ -57,7 +58,7 @@ export function Steps() {
              initial={{ opacity: 0, y: 20 }}
              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
              transition={{ duration: 0.5, delay: 0.3 + index * 0.2 }}
-              className="rounded-2xl border border-white/20 bg-black/30 lg:py-8 lg:px-8 py-6 px-6 backdrop-blur-sm transition-all duration-300 ease-in-out hover:scale-105 hover:border-white/40 hover:bg-black/40"
+              className="rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
            >
              <feature.icon className="h-8 w-8 mb-4 text-white" />
              <CT as="span" className="font-semibold" color="light">{feature.name}</CT>
--- a/src/components/Texts.tsx
+++ b/src/components/Texts.tsx
@@ -4,11 +4,14 @@ import React from 'react'
 import { cn } from '@/lib/utils'

 const colorVariants = {
-  primary: 'text-[#fffff]',
-  secondary: 'text-gray-200',
-  custom: 'text-[#015eff]',
-  light: '[#fcfcfc]',
-  dark: 'text-gray-800',
+  primary: 'text-gray-900',
+  secondary: 'text-gray-600',
+  light: 'text-gray-50',
+  accent: 'text-cyan-500',
+  white: 'text-white',
+  dark: 'text-gray-950',
+  tertiary: 'text-gray-700',
+  lightSecondary: 'text-gray-300',
 } as const

 type TextOwnProps = {
@@ -16,17 +19,19 @@ type TextOwnProps = {
  className?: string
 }

-// Polymorphic helpers (no forwardRef needed)
-type PolymorphicProps<E extends React.ElementType, P> =
-  P & { as?: E } &
-  Omit<React.ComponentPropsWithoutRef<E>, keyof P | 'as'>
+// Polymorphic helpers
+type PolymorphicProps<E extends React.ElementType, P> = P & {
+  as?: E
+} & Omit<React.ComponentPropsWithoutRef<E>, keyof P | 'as'>

 const createTextComponent = <DefaultElement extends React.ElementType>(
  defaultElement: DefaultElement,
  defaultClassName: string
 ) => {
-  type Props<E extends React.ElementType = DefaultElement> =
-    PolymorphicProps<E, TextOwnProps>
+  type Props<E extends React.ElementType = DefaultElement> = PolymorphicProps<
+    E,
+    TextOwnProps
+  >

  function Text<E extends React.ElementType = DefaultElement>({
    as,
@@ -39,24 +44,106 @@ 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(${typeof defaultElement === 'string' ? defaultElement : 'Component'})`
+  ;(Text as any).displayName = `Text(${typeof defaultElement === 'string' ? defaultElement : 'Component'
+  })`
  return Text
 }

-// Exports
-export const H1 = createTextComponent('h1', 'text-5xl font-medium tracking-tight text-balance lg:text-8xl')
-export const PL = createTextComponent('p', 'text-2xl font-medium text-pretty leading-[1.2] lg:text-3xl')
-export const H2 = createTextComponent('h2', 'text-3xl font-medium text-pretty lg:text-4xl')
-export const P  = createTextComponent('p', 'text-lg font-normal text-pretty leading-snug lg:text-xl lg:leading-normal')
-export const H3 = createTextComponent('h3', 'text-2xl lg:text-3xl font-medium')
-export const H4 = createTextComponent('h4', 'text-xl lg:text-2xl font-semibold leading-[1.15]')
+// Exports based on your tailwind.css and the example
+export const H1 = createTextComponent(
+  'h1',
+  'text-6xl lg:text-7xl 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 P = createTextComponent(
+  'p',
+  'text-base lg:text-lg leading-relaxed'
+)
+export const Small = createTextComponent(
+  'small',
+  'text-sm font-medium leading-normal tracking-normal'
+)
+export const Subtle = createTextComponent(
+  'p',
+  'text-sm leading-normal tracking-normal text-gray-500'
+)
+export const H5 = createTextComponent(
+  'h5',
+  'text-lg lg:text-xl font-medium 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 leading-tight tracking-tight'
+)
+export const CardEyebrow = createTextComponent(
+  'h3',
+  'text-sm/4 font-semibold tracking-wide'
+)
+export const CardTitle = createTextComponent(
+  'p',
+  '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 MobileFeatureTitle = createTextComponent(
+  'h3',
+  'text-sm font-semibold sm:text-lg leading-snug tracking-tight'
+)
+export const SecondaryFeatureTitle = createTextComponent(
+  'h3',
+  '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 PageHeader = createTextComponent(
+  'h2',
+  'text-5xl lg:text-6xl font-medium leading-tight tracking-tight'
+)
+export const DownloadCardTitle = createTextComponent(
+  'dt',
+  'text-base/7 font-semibold tracking-wide'
+)
+export const DownloadCardDescription = createTextComponent(
+  'dd',
+  'text-base/7 leading-normal tracking-normal'
+)
 export const CT = createTextComponent('span', 'text-lg lg:text-xl font-semibold text-center')
 export const CP = createTextComponent('p', 'text-sm lg:text-base leading-[1.525] font-light')
-export const NL = createTextComponent('span', 'text-lg font-semibold leading-[1.23]')
--- a/src/components/UseCases.tsx
+++ b/src/components/UseCases.tsx
@@ -14,7 +14,7 @@ import {
 } from '@heroicons/react/24/solid'

 import { Container } from '@/components/Container'
-import { H2, P, CT, CP } from '@/components/Texts'
+import { SectionHeader, P, CT, CP } from '@/components/Texts'
 import { motion, useInView } from 'framer-motion'

 interface Review {
@@ -147,9 +147,9 @@ export function UseCases() {
            transition={{ duration: 0.8, delay: 0.1 }}
            className="flex flex-col items-start justify-start pt-10 lg:pr-12"
          >
-            <H2 id="usecases-title" color="light" className="text-left">
+            <SectionHeader id="usecases-title" color="light" className="text-left">
            Augmented Intelligence Fabric
-            </H2>
+            </SectionHeader>
            <P className="mt-4 text-left" color="light">
            The sovereign substrate for autonomous AI.
 Stateless, geo-aware, end-to-end encrypted—and verifiable from intent to execution.
--- a/src/components/WorldMap.tsx
+++ b/src/components/WorldMap.tsx
@@ -2,7 +2,7 @@

 import { Globe } from "@/components/ui/globe"
 import { motion } from "framer-motion"
-import { H2, P, CT, CP } from "@/components/Texts"
+import { H2, P, CT, CP, SectionHeader, Eyebrow } from "@/components/Texts"
 import { CountUpNumber } from './CountUpNumber'

 export function WorldMap() {
@@ -31,8 +31,9 @@ export function WorldMap() {
          transition={{ duration: 0.5 }}
          className="max-w-xl"
        >
-          <H2 color="light">Mycelium Network is Live.</H2>
-          <P className="hidden mt-4 text-base leading-relaxed font-light" color="light">
+          <Eyebrow color="accent">Network</Eyebrow>
+          <SectionHeader color="light">Mycelium Network is Live.</SectionHeader>
+          <P className=" mt-4 text-base leading-relaxed" color="light">
            Mycelium Cloud's advancement technology enables anyone to deploy
            their own Internet infrastructure, anywhere.
          </P>
@@ -58,8 +59,7 @@ export function WorldMap() {
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.5, delay: 0.4 }}
-              whileHover={{ scale: 1.05 }}
-              className="lg:absolute lg:top-12 lg:-left-12 rounded-xl bg-white/5 backdrop-blur-md border border-white/10 px-4 lg:py-8 py-6 shadow-md w-80"
+              className="lg:absolute lg:top-12 lg:-left-12 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
            >
              <CT color="light" className="uppercase tracking-wide">CORES</CT>
              <CountUpNumber end={54958} color="light" className="mt-2 text-3xl font-bold" />
@@ -72,8 +72,7 @@ export function WorldMap() {
              initial={{ opacity: 0, x: 20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.5, delay: 0.5 }}
-              whileHover={{ scale: 1.05 }}
-              className="lg:absolute lg:-top-10 lg:right-0 rounded-xl bg-white/5 backdrop-blur-md border border-white/10 px-4 lg:py-8 py-6 shadow-md w-80"
+              className="lg:absolute lg:-top-10 lg:right-0 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
            >
              <CT color="light" className="uppercase tracking-wide">NODES</CT>
              <CountUpNumber end={1493} color="light" className="mt-2 text-3xl font-bold" />
@@ -86,8 +85,7 @@ export function WorldMap() {
              initial={{ opacity: 0, x: -20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.5, delay: 0.6 }}
-              whileHover={{ scale: 1.05 }}
-              className="lg:absolute lg:bottom-28 lg:-left-12 rounded-xl bg-white/5 backdrop-blur-md border border-white/10 px-4 lg:py-8 py-6 shadow-md w-80"
+              className="lg:absolute lg:bottom-28 lg:-left-12 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
            >
              <CT color="light" className="uppercase tracking-wide">SSD CAPACITY</CT>
              <CountUpNumber end={5388956} color="light" className="mt-2 text-3xl font-bold" />
@@ -100,8 +98,7 @@ export function WorldMap() {
              initial={{ opacity: 0, x: 20 }}
              animate={{ opacity: 1, x: 0 }}
              transition={{ duration: 0.5, delay: 0.7 }}
-              whileHover={{ scale: 1.05 }}
-              className="lg:absolute lg:top-44 lg:right-0 rounded-xl bg-white/5 backdrop-blur-md border border-white/10 px-4 lg:py-8 py-6 shadow-md w-80"
+              className="lg:absolute lg:top-47 lg:right-0 w-80 rounded-2xl border border-gray-300 p-8 transition-all duration-300 ease-in-out hover:scale-105 hover:border-cyan-500 hover:shadow-lg hover:shadow-cyan-500/20 bg-white/5 backdrop-blur-md"
            >
              <CT color="light" className="uppercase tracking-wide">COUNTRIES</CT>
              <CountUpNumber end={44} color="light" className="mt-2 text-3xl font-bold" />
--- a/src/components/ui/globe.tsx
+++ b/src/components/ui/globe.tsx
@@ -20,8 +20,9 @@ const GLOBE_CONFIG: COBEOptions = {
  mapSamples: 16000,
  mapBrightness: 1.1,
  baseColor: [0.8, 0.8, 0.8], // sleek dark gray globe
-  markerColor: [0.3, 0.6, 1], // soft, elegant blue
-  glowColor: [0.8, 0.8, 0.85], // subtle glow
+  markerColor: [0.02, 0.71, 0.83], // cyan-500
+  glowColor: [0.8, 0.8, 0.85], // grey
+  
  markers: [
    // --- Core Global Markers ---
    { location: [14.5995, 120.9842], size: 0.03 }, // Manila
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -64,7 +64,7 @@
  --color-gray-900: oklch(0.205 0 0);
  --color-gray-950: oklch(0.145 0 0);

-  --font-sans: var(--font-mulish);
+  --font-sans: var(--font-inter);

  --container-2xl: 40rem;
Author	SHA1	Message	Date
sasha-astiadi	76e0bdb7be	style: update border colors from gray-200 to gray-300 and standardize cyan color usage	2025-10-22 15:47:52 +02:00
sasha-astiadi	85c041ab49	style: update feature card styling with cyan hover effects and consistent padding	2025-10-22 15:47:41 +02:00
sasha-astiadi	0231c4835c	style: update stat cards with consistent hover effects and modern styling	2025-10-22 15:35:35 +02:00
sasha-astiadi	4efc563aa9	feat: add Eyebrow component to section headers across landing page components	2025-10-22 15:27:47 +02:00
sasha-astiadi	d70c2b6874	chore: switch from Mulish to Inter font family	2025-10-22 15:18:39 +02:00
				`@@ -1 +0,0 @@`
				`export { Layout as default } from '@/components/Layout'`