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

refactor: add mobile hero images to AgentHeroAlt, NodeHero, and Homepod and adjust padding

Browse Source 
- Added mobile-only hero images with mb-8 spacing and md:hidden visibility
  - AgentHeroAlt: /images/mobile/agents.jpg
  - NodeHero: /images/mobile/nodes.jpg
  - Homepod: /images/mobile/pods.jpg
- Changed vertical padding from py-16 to pb-12 pt-4 for mobile, maintaining lg:py-24 for desktop
- Positioned mobile images above content with w-full and object-cover styling
This commit is contained in:
sasha-astiadi
2025-11-19 12:32:07 +01:00
parent c6efc29ab6
commit 3df73ec418
3 changed files with 24 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/pages/agents/AgentHeroAlt.tsx
View File

@@ -11,7 +11,14 @@ export function AgentHeroAlt() {
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/agents.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/agents.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/agents.jpg"
alt="Mycelium Agents 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>MYCELIUM AGENTS - COMING IN 2026</Eyebrow> <Eyebrow>MYCELIUM AGENTS - COMING IN 2026</Eyebrow>
<H3 as="h1" className="mt-4"> <H3 as="h1" className="mt-4">

9
src/pages/nodes/NodeHero.tsx
View File

@@ -11,7 +11,14 @@ export function NodeHero() {
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/gpuhero2.png')] 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/gpuhero2.png')] 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/nodes.jpg"
alt="Mycelium Nodes 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>MYCELIUM NODES</Eyebrow> <Eyebrow>MYCELIUM NODES</Eyebrow>
<H3 as="h1" className="mt-4"> <H3 as="h1" className="mt-4">

9
src/pages/pods/Homepod.tsx
View File

@@ -12,7 +12,14 @@ export default function Homepod() {
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/computehero11.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/computehero11.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/pods.jpg"
alt="Mycelium Pods 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 Pods - Coming Soon Mycelium Pods - Coming Soon