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

fix: adjust spacing and styling in hero and about sections for better responsive layout

Browse Source
This commit is contained in:
sasha-astiadi
2025-10-14 16:18:15 +02:00
parent e90d57b9e3
commit 251d55506e
3 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/About.tsx
View File

@@ -7,7 +7,7 @@ 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-12 top-0" className="relative overflow-hidden bg-gray-900 py-20 lg:py-32 lg:top-0 top-0"
> >
<div className="absolute top-1/2 left-20 -translate-y-1/2 sm:left-1/2 sm:-translate-x-1/2"> <div className="absolute top-1/2 left-20 -translate-y-1/2 sm:left-1/2 sm:-translate-x-1/2">
<CircleBackground color="#fff" className="animate-spin-slower" /> <CircleBackground color="#fff" className="animate-spin-slower" />
@@ -28,6 +28,7 @@ export function About() {
href="https://docs.ourworld.tf/mycelium_cloud/docs/" href="https://docs.ourworld.tf/mycelium_cloud/docs/"
target="_blank" target="_blank"
variant="outline" variant="outline"
color="white"
> >
Learn More Learn More
</Button> </Button>

3
src/components/Button.tsx
View File

@@ -16,7 +16,8 @@ const variantStyles = {
gray: 'bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80', gray: 'bg-gray-800 text-white hover:bg-gray-900 active:bg-gray-800 active:text-white/80',
}, },
outline: { outline: {
gray: 'border-gray-300 text-gray-700 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80', gray: 'border-gray-300 text-gray-700 hover:text-gray-500 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80',
white: 'border-gray-300 text-white hover:text-gray-200 hover:border-gray-400 active:bg-gray-100 active:text-gray-700/80',
}, },
} }

6
src/components/Hero.tsx
View File

@@ -98,7 +98,7 @@ function PlayIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
export function Hero() { export function Hero() {
return ( return (
<div className="overflow-hidden lg:py-32 pb-4"> <div className="overflow-hidden lg:py-32 lg:pb-0 pb-24">
<Container> <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="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"> <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">
@@ -126,8 +126,8 @@ export function Hero() {
</div> </div>
</div> </div>
<div className="relative lg:mt-10 mt-0 lg:col-span-5 lg:row-span-2 xl:col-span-6"> <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-16 lg:ml-12 xl:-top-14 ml-0" /> <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-10 lg:-bottom-20 lg:h-auto lg:pt-10 xl:-bottom-32"> <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">
<Image <Image
src="/images/phoneframe.png" src="/images/phoneframe.png"
alt="Mycelium application demo" alt="Mycelium application demo"