ourworld_web/www_project_mycelium
22
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
sasha-astiadi
2025-10-22 15:27:47 +02:00
parent d70c2b6874
commit 4efc563aa9
8 changed files with 16 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/BentoReviews.tsx
View File

@@ -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>

2
src/components/CallToAction.tsx
View File

@@ -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>

3
src/components/ClickableGalleryLight.tsx
View File

@@ -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>

3
src/components/Companies.tsx
View File

@@ -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>

3
src/components/HomeHeroLight2.tsx
View File

@@ -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)' }}

3
src/components/StackSectionLight.tsx
View File

@@ -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>

3
src/components/Steps.tsx
View File

@@ -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>

3
src/components/WorldMap.tsx
View File

@@ -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