ourworld_web/www_mycelium_net
23
0
Fork 0
forked from sashaastiadi/www_mycelium_net
Code Issues Pull Requests Activity

fix: improve About section positioning with sticky background and relative content

Browse Source
This commit is contained in:
sasha-astiadi
2025-10-22 14:18:11 +02:00
parent d197ca74ad
commit e7b053bd76
1 changed files with 31 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/About.tsx
View File

@@ -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="sticky top-0 flex h-screen items-center justify-center">
<CircleBackground color="#06b6d4" className="animate-spin-slower" />
</div>
<Container>
<div className="mx-auto max-w-3xl text-center">
<Eyebrow color="accent">Our Mission</Eyebrow>
<SectionHeader color="white" className="mt-2">
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 className="mt-8 flex justify-center">
<Button
href="https://threefold.info/mycelium_network/docs/"
target="_blank"
variant="outline"
color="white"
>
Learn More
</Button>
<div className="relative -mt-[100vh]">
<Container>
<div className="mx-auto max-w-3xl text-center">
<Eyebrow color="accent">Our Mission</Eyebrow>
<SectionHeader color="white" className="mt-2">
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 className="mt-8 flex justify-center">
<Button
href="https://threefold.info/mycelium_network/docs/"
target="_blank"
variant="outline"
color="white"
>
Learn More
</Button>
</div>
</div>
</div>
</Container>
</Container>
</div>
</section>
)
}