forked from emre/www_projectmycelium_com
refactor: add mobile hero image to CloudHeroNew and adjust padding
- Added mobile-only hero image (/images/mobile/cloudpage.jpg) with mb-8 spacing and md:hidden visibility - Changed vertical padding from py-16 to pb-12 pt-4 for mobile, maintaining lg:py-24 for desktop - Positioned mobile image above content with w-full and object-cover styling
This commit is contained in:
@@ -9,7 +9,14 @@ export function CloudHeroNew() {
|
|||||||
className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-100 bg-white overflow-hidden md:bg-[url('/images/cloudhero4.webp')] md:bg-contain md:bg-right md:bg-no-repeat"
|
className="relative mx-auto max-w-7xl border border-t-0 border-b-0 border-gray-100 bg-white overflow-hidden md:bg-[url('/images/cloudhero4.webp')] md:bg-contain md:bg-right md:bg-no-repeat"
|
||||||
>
|
>
|
||||||
{/* Inner padding */}
|
{/* Inner padding */}
|
||||||
<div className="px-6 py-16 lg:py-24">
|
<div className="px-6 pt-4 pb-12 lg:py-24">
|
||||||
|
{/* Mobile-only hero image */}
|
||||||
|
<img
|
||||||
|
src="/images/mobile/cloudpage.jpg"
|
||||||
|
alt="Mycelium Cloud page visual"
|
||||||
|
className="mb-8 w-full object-cover md:hidden"
|
||||||
|
/>
|
||||||
|
|
||||||
<div className="max-w-2xl lg:pl-6">
|
<div className="max-w-2xl lg:pl-6">
|
||||||
<Eyebrow>
|
<Eyebrow>
|
||||||
MYCELIUM CLOUD
|
MYCELIUM CLOUD
|
||||||
|
|||||||
Reference in New Issue
Block a user