feat: add Eyebrow component to section headers across landing page components

src/components/BentoReviews.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { cn } from "@/lib/utils";
-import { SectionHeader, 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,6 +95,7 @@ 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 ">
+            <Eyebrow color="accent">Components</Eyebrow>
             <SectionHeader className="text-center">Augmented Intelligence Fabric</SectionHeader>
           </div>
         </FadeIn>

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>

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 { SectionHeader, P, CT } from '@/components/Texts';
+import { SectionHeader, P, CT, Eyebrow } from '@/components/Texts';
 import { TypeAnimation } from 'react-type-animation'
 import { FadeIn } from './FadeIn';
 
@@ -53,6 +53,7 @@ export function ClickableGalleryLight() {
       <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">
+            <Eyebrow color="accent">Use Cases</Eyebrow>
             <SectionHeader className="text-center" color="dark">Agents with Endless Possibilities.</SectionHeader>
           </div>
         </FadeIn>

src/components/Companies.tsx

@@ -2,7 +2,7 @@
 
 import React from "react";
 import { motion } from "framer-motion";
-import { 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>

src/components/HomeHeroLight2.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useRef, useEffect } from 'react'
-import { H1, H2, P, H5 } from '@/components/Texts'
+import { H1, H2, P, H5, Eyebrow } from '@/components/Texts'
 
 export function HomeHeroLight2() {
   const videoRef = useRef<HTMLVideoElement>(null)
@@ -38,6 +38,7 @@ 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">
+          <Eyebrow color="accent"></Eyebrow>
           <H1 
             className="pt-6"
             style={{ textShadow: '0 2px 8px rgba(0,0,0,0.08)' }}

src/components/StackSectionLight.tsx

@@ -2,7 +2,7 @@
 
 import { motion } from "framer-motion";
 import { StackedCubesLight } from "@/components/ui/StackedCubesLight";
-import { H2, P, SectionHeader } from "@/components/Texts";
+import { H2, P, SectionHeader, Eyebrow } from "@/components/Texts";
 import { FadeIn } from "./FadeIn";
 import { DottedGlowBackground } from '@/components/ui/dotted-glow-background';
 
@@ -30,6 +30,7 @@ export function StackSectionLight() {
         {/* Left Column - Text */}
         <div className="text-center lg:text-left">
           <FadeIn>
+            <Eyebrow color="accent">Technology Layers</Eyebrow>
             <SectionHeader color="dark" className="text-4xl sm:text-5xl font-semibold">
               The Mycelium Stack
             </SectionHeader>

src/components/Steps.tsx

@@ -2,7 +2,7 @@
 
 import React, { useRef } from 'react'
 import { motion, useInView } from 'framer-motion'
-import { SectionHeader, 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,6 +38,7 @@ export function Steps() {
           transition={{ duration: 0.8, delay: 0.1 }}
           className="mx-auto max-w-5xl text-center"
         >
+          <Eyebrow color="accent">Get Started</Eyebrow>
           <SectionHeader className="text-3xl font-medium tracking-tight" color="light">
             Deploy Scalable LLMs and AI Agents in Seconds
           </SectionHeader>

src/components/WorldMap.tsx

@@ -2,7 +2,7 @@
 
 import { Globe } from "@/components/ui/globe"
 import { motion } from "framer-motion"
-import { H2, P, CT, CP, SectionHeader } from "@/components/Texts"
+import { H2, P, CT, CP, SectionHeader, Eyebrow } from "@/components/Texts"
 import { CountUpNumber } from './CountUpNumber'
 
 export function WorldMap() {
@@ -31,6 +31,7 @@ export function WorldMap() {
           transition={{ duration: 0.5 }}
           className="max-w-xl"
         >
+          <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