emre/www_projectmycelium_com
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: simplify header component and improve hero section layouts

Browse Source
This commit is contained in:
sasha-astiadi
2025-10-23 16:36:37 +02:00
parent 987b46588b
commit 9b3c620706
5 changed files with 64 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/home/HomeAurora.tsx
View File

@@ -19,7 +19,7 @@ export function HomeAurora() {
backgroundSize: "cover",
backgroundPosition: "center",
}}
className="relative mx-auto py-24 h-screen flex flex-col items-center justify-center gap-4 px-4 max-w-5xl"
className="relative mx-auto pb-24 pt-0 h-screen flex flex-col items-center justify-center gap-4 px-4 max-w-5xl"
>
<div className="text-center text-gray-800">
<H1>Decentralized Autonomous <span className="text-bold lg:text-8xl">Agentic Cloud.</span></H1>

13
src/pages/home/HomeHero.tsx
View File

@@ -1,28 +1,27 @@
'use client'
import { H1, P } from '@/components/Texts'
import { FadeIn } from '@/components/FadeIn'
import { Button } from '@/components/Button'
export function HomeHero() {
return (
<div
className="relative isolate overflow-hidden bg-white"
<div
className="relative isolate overflow-hidden bg-white h-screen -z-10 flex items-center justify-center"
style={{
backgroundImage: 'url(/images/cloud.png)',
backgroundSize: 'cover',
backgroundPosition: 'center',
}}
>
<div className="mx-auto max-w-7xl px-6 py-24 lg:py-32 lg:flex lg:px-8">
<div className="mx-auto max-w-2xl shrink-0 lg:mx-0 lg:pt-8">
<H1 color="primary" className="mt-10 text-5xl font-semibold tracking-tight text-pretty sm:text-7xl">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="-mt-32 mx-auto max-w-2xl text-center">
<H1 color="primary" className="text-5xl font-semibold tracking-tight text-pretty sm:text-7xl">
Decentralized Autonomous Agentic Cloud.
</H1>
<P color="secondary" className="mt-8 text-lg font-medium text-pretty sm:text-xl/8">
Mycelium's advancements in Agentic infrastructure supports private, secure and autonomous Agents that connect, learn and grow with you.
</P>
<div className="mt-10 flex items-center gap-x-6">
<div className="mt-10 flex items-center justify-center gap-x-6">
<Button variant="solid" color="cyan" href="#">
Get started
</Button>

6
src/pages/network/Hero.tsx
View File

@@ -74,7 +74,7 @@ function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
export function Hero() {
return (
<div className="overflow-hidden lg:py-32 lg:pb-0 pb-24">
<div className="overflow-hidden py-32">
<Container>
<div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20">
<div className="relative z-10 mx-auto max-w-2xl lg:col-span-7 lg:max-w-none lg:pt-6 xl:col-span-6">
@@ -94,8 +94,8 @@ export function Hero() {
</div>
</div>
<div className="relative lg:mt-10 mt-0 lg:col-span-5 lg:row-span-2 xl:col-span-6">
<BackgroundIllustration className="absolute top-4 left-1/2 h-[1026px] w-[1026px] -translate-x-1/2 stroke-gray-300/70 sm:top-16 lg:-top-12 lg:ml-12 ml-0" />
<div className="mx-auto h-[448px] mask-[linear-gradient(to_bottom,white_60%,transparent)] lg:px-0 lg:absolute lg:-inset-x-10 lg:-top-24 lg:h-auto lg:pt-10 xl:-bottom-32">
<BackgroundIllustration className="absolute top-4 left-1/2 h-[1026px] w-[1026px] -translate-x-1/2 stroke-gray-300/70 sm:top-16 lg:top-0 lg:ml-12 ml-0" />
<div className="mx-auto h-[448px] mask-[linear-gradient(to_bottom,white_60%,transparent)] lg:px-0 lg:absolute lg:-inset-x-10 lg:top-0 lg:h-auto lg:pt-10 xl:-bottom-32">
<img
src={phoneFrame}
alt="Mycelium application demo"