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 ( return (
<section <section
id="about" 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" /> <CircleBackground color="#06b6d4" className="animate-spin-slower" />
</div> </div>
<Container> <div className="relative -mt-[100vh]">
<div className="mx-auto max-w-3xl text-center"> <Container>
<Eyebrow color="accent">Our Mission</Eyebrow> <div className="mx-auto max-w-3xl text-center">
<SectionHeader color="white" className="mt-2"> <Eyebrow color="accent">Our Mission</Eyebrow>
Discover Mycelium <SectionHeader color="white" className="mt-2">
</SectionHeader> Discover Mycelium
<P color="light" className="mt-6"> </SectionHeader>
Mycelium is an unbreakable network, always finding the shortest path and <P color="light" className="mt-6">
providing 100% secure, peer-to-peer communication. But this is just Mycelium is an unbreakable network, always finding the shortest path and
the beginning. providing 100% secure, peer-to-peer communication. But this is just
</P> the beginning.
<P color="light" className="mt-6"> </P>
Our mission is to create a sustainable digital ecosystem where <P color="light" className="mt-6">
communication is seamless, data is secure, and scalability knows no Our mission is to create a sustainable digital ecosystem where
bounds. communication is seamless, data is secure, and scalability knows no
</P> bounds.
<div className="mt-8 flex justify-center"> </P>
<Button <div className="mt-8 flex justify-center">
href="https://threefold.info/mycelium_network/docs/" <Button
target="_blank" href="https://threefold.info/mycelium_network/docs/"
variant="outline" target="_blank"
color="white" variant="outline"
> color="white"
Learn More >
</Button> Learn More
</Button>
</div>
</div> </div>
</div> </Container>
</Container> </div>
</section> </section>
) )
} }