ourworld_web/www_projectmycelium_com
22
0
Fork 0
forked from emre/www_projectmycelium_com
Code Issues 3 Pull Requests Projects Releases Activity

refactor: improve Hero and NetworkDownload mobile responsiveness and layout

Browse Source 
- Reduced Hero section bottom padding from pb-24 to pb-12 on mobile
- Added mt-8 top margin to Hero image container on mobile
- Hidden BackgroundIllustration on mobile using hidden md:block
- Removed fixed height from Hero image container and added flex centering
- Changed Hero image from w-auto to w-full for better mobile scaling
- Removed manual link and simplified NetworkDownload description text
- Reduced NetworkDownload gri
This commit is contained in:
sasha-astiadi
2025-11-18 12:23:16 +01:00
parent 39b20f30a4
commit 503fe26303
2 changed files with 8 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -76,7 +76,7 @@ function BackgroundIllustration(props: React.ComponentPropsWithoutRef<'div'>) {
export function Hero() {
return (
<div className="overflow-hidden pb-24 lg:py-12 mt-10 lg:pb-0 border border-t-0 border-b border-gray-100">
<div className="overflow-hidden pb-12 lg:py-12 mt-10 lg:pb-0 border border-t-0 border-b border-gray-100">
<Container>
<div className="flex flex-col-reverse gap-y-16 lg:grid lg:grid-cols-12 lg:gap-x-8 lg:gap-y-20 px-6 lg:px-8">
<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">
@@ -108,13 +108,13 @@ export function Hero() {
</Button>
</div>
</div>
<div className="relative mt-0 lg:mt-10 lg:col-span-5 lg:row-span-2 xl:col-span-6">
<BackgroundIllustration className="absolute left-1/2 top-4 h-[1026px] w-[1026px] -translate-x-1/2 stroke-gray-300/70 sm:top-16 lg:-top-12 lg:ml-12" />
<div className="mx-auto h-[460px] max-w-[520px] mask-[linear-gradient(to_bottom,white_60%,transparent)] lg:absolute lg:-inset-x-10 lg:-top-24 lg:h-auto lg:pt-10 xl:-bottom-32">
<div className="relative mt-8 lg:mt-10 lg:col-span-5 lg:row-span-2 xl:col-span-6">
<BackgroundIllustration className="hidden md:block absolute left-1/2 top-4 h-[1026px] w-[1026px] -translate-x-1/2 stroke-gray-300/70 sm:top-16 lg:-top-12 lg:ml-12" />
<div className="mx-auto max-w-[520px] flex items-center justify-center mask-[linear-gradient(to_bottom,white_60%,transparent)] lg:absolute lg:-inset-x-10 lg:-top-24 lg:h-auto lg:pt-10 xl:-bottom-32">
<img
src={phoneFrame}
alt="Mycelium application demo"
className="mx-auto w-auto max-w-[366px]"
className="mx-auto w-full max-w-[366px] h-auto"
width={366}
height={729}
/>