From 3b657b625c6dc4b47ed547440312a50e90f0d234 Mon Sep 17 00:00:00 2001 From: ralksta Date: Fri, 13 Mar 2026 11:34:16 +0100 Subject: [PATCH] fix(hero): fix mosaic layout full-width + update screenshots - Override inherited 2-column grid from .hero by adding display: block to .hero--mosaic - Add explicit grid-column/grid-row for mosaic cells 3 & 4 to prevent auto-placement issues - Slice heroData to 4 images to match 4 defined grid cells - Regenerate hero-mosaic-home.png and theme-studio-home.png screenshots --- app/globals.css | 17 +++++++++++++++-- app/page.tsx | 2 +- docs/screenshots/hero-mosaic-home.png | Bin 697746 -> 1214303 bytes docs/screenshots/theme-studio-home.png | Bin 697746 -> 946090 bytes 4 files changed, 16 insertions(+), 3 deletions(-) diff --git a/app/globals.css b/app/globals.css index 49a5eae..85a44f4 100644 --- a/app/globals.css +++ b/app/globals.css @@ -457,6 +457,7 @@ /* ── Hero: Mosaic Layout ────────────────────────── */ .hero--mosaic { position: relative; + display: block; /* override inherited 1fr 1fr split grid from .hero */ min-height: calc(100vh - 56px); } @@ -479,15 +480,27 @@ /* Cell 1: spans 2 rows on the left */ .hero__mosaic-cell--1 { + grid-column: 1; grid-row: 1 / 3; } -/* Cell 2: wide, top right */ +/* Cell 2: wide, top right — spans 2 columns */ .hero__mosaic-cell--2 { grid-column: 2 / 4; + grid-row: 1; } -/* Remaining cells fill naturally */ +/* Cell 3: bottom middle */ +.hero__mosaic-cell--3 { + grid-column: 2; + grid-row: 2; +} + +/* Cell 4: bottom right */ +.hero__mosaic-cell--4 { + grid-column: 3; + grid-row: 2; +} .hero__mosaic-overlay { position: absolute; diff --git a/app/page.tsx b/app/page.tsx index b3bc1d1..e8f84be 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -145,7 +145,7 @@ export default async function HomePage() { return (
- {heroData.slice(0, 6).map((img, i) => ( + {heroData.slice(0, 4).map((img, i) => (
4U~+kENw zbL(AbqRdy@&7r3U}k7&@PFA(JA$hd+kczEqX{}X{C`>aDd~7`?|;wEY2*L*Cns+GJK$aK z{<271x+nMlejT|`Fqpw9tq1zQ7USQA@^YIiLVz!L{>yzt#Jby@2ODkB#Kc6Q+j5dh zH&2#LQj*U`e}7#@OviiKUD5pFqQKL31nA@5(Zccc^i=3==M{7vcZmbLTyOt3x{P7v zU`%_{`)GTm@u*4K_-*%SDzD>eR=)1XfIhe5=2cUjzo9A)=V*oSyYsoKvhr3*!pEm^ zp~X65*D+>p0RG-yilAUu1UktVLc&R*1}y8fX67WBr@#2dBjH=Vmxk}}FbEi=Kmgz) zZp#btXTaTYREBYYVwX;n&EJ}qO=9$jj&>HokEgkM9VYo6=k*Ehtya600WWwJ;QXyOoBMod~kOw*)bN>kLi={a?nPZ}EE#L^Y#CdRS#$jEw_-9+i1+3C61E zxl{atoCy1$tZjYt&d=iv^N^GI9QOvkF9i<4Y2kclXMcHE^JO(U>+=q{3Vj4L-IkEO zYoL6iJ6|_vpxPYn4UM?Ym#jICBXZ2-u5-7tIv$9c^L;q$H+z3OO0aFu2-BO1!S}Rk zNf3PawOZXU00eg4PIjzZDF@t`{d*4NRgXPRu?hL`tu;95O`A5j3DP6fy3^*iwSfb? z&vJvF$*#SKGvp@1e7^DW`kyUdzrSMGBoGpU7h3*?z}+rL)o}4Ob^X-;ay73y&UKvU z#P#dwdFwfEOTZm`XIs|=NU}a>nbSkq^mBde=^_7L?%Ha3wG{Y{ANW!cXo{|FUj=%p z5`G=k{=gbXl53U>L)iADRWHa(Cl6Xlv_O6VQAI)MupwOviK5ozh+>9@XaQB|eobq> z7j0&}AmyegL?yht=8u9{Ta-27i zk4sQG%_L#FYmf;W4;R<iDkzl@I1FYKR4!oUn1a&F9D_7PixN8M~ z)yW{e7y;Ej&_S>9KhQ-ke>LiKdYNi!{#~reF$#QVu9+Ka?g)H}2z+=Ra6etFeBa-C zn-I1V`uv}m6<&qD&`~t00f3Qrck!Rd)"=IN=^w#@V1^WHiHVL7Pk79G~{q>4O5!69Voc`I!H0jG}C8aAzg>63VCue6iY86>uFxo58G)g$R2kotKxP zRcp{~((Cs_g7X#ZSDpP>@P2mvdeK2NPGMJoWFJrt8AgUGa``%hI4@P1oK5$Dc%_9ClXN-zPGD_5 zudCAe0A*6{nplk}CyLFOraxX+m%s4)i5XDZ>|~baPNSMHx-HnAwwh0NftV%*@Gm$L zkOF855AWi*J*wi+J?%OElZ6dXRL`GzP7Dm}Pft7P>oewQ`ugf?y>r>= zL_}0|vw^l+yl>&1?1R*94rdGJjQ>^x0^-bult_gG@VyVm zSL_N`PXJxHQYAht8jlXXuL4eJp_@om!Sd-$YF%7ldFKtjk_=h`R1FP{${J<&$Jp4| zPyfr2Y>}$8YE){*3f}gAg7=I0ieEP$18|~#jW=pFMkn*~q?h7gBy>U__Bz8oOR6SP zBhjWus{Ha#j&S}I3fd)E?&_;molOzQ92TCF@yt#|%^&NJWhe0y#v*7)n6w*|BM?X>(` zKuBZ3`^{+DT|8=&jAp%s?vlv-!;dNrn}O;VxKL361ABvisdC_T)6-T{lcsgGFr%~W z`|+JNqpc0&zsS(E>XAIM4^aP!$}EEx`*#;e#DW!N6%#(5XH>3Kr*!L#=tJ9SIWa1q z(XLrhq=#Om#XR(g0O+3CdhObJKKm&QXs-dipI=U0Ye4-kHTxM{dEdO|VC~@WDGTYQ zL^@$l`CrCwf4$(JM{%!JrTI55TBe0TU_q2-%_#Tga$c9#nDb2WIz=S-_tX0&NV;k0 zdx>FQ9w`w~PJVuGN!4ux2=WT5BAnfNo_s{j)m#(tN3Lbi)6cp7EUa2OG6E@64olPshYVi=~XUY`l7N-B!J0vW#(LLWP5K8}Xx%mz`2feFG z4~3jDwcChQg%z%vkT;sz+#aHV-S}DwpZ+H_pPmkh&qu4|0cvV$3=K0HC;~vB`g&1! z-Wgqh?wngsP;hW>%jPOaMhEXapITa59cu?Hk`2Q5Y57e9!e&m+M_rhceoy|ZHbsZA8*X6CQX5AAgyAtwGQ>7XxG?*nT| z1|BHno7R?wfZh&LfN8aaj%07!{&igs>A?z3cj%-7ILKid9I~8!y__%$yLzooy|sq? zWC2e<-Q*Uex=w4?G>_uJzyC=+$*$>YEy{U2p}T46j|1awK=vt6H%ErLQLdbiy}iR% z=q3q6@P9J*n$`8Lq|M3ut#BZTS07N5Q6pi*v->vmtR}k{e9{97g}Ncq)WC>oR+I|0 z>EPnz^xvl_2{$31AeZ`o@m+XmUm~i4gt8nf>Cex5`=4zOIB0DmCMYF+9~>X z68Ql67R85;{}k^;09-i$u)|UCOnu?d0rt9`*uW6D3MTuwqP6L&Vkj~y;BjU+?WGSn zTKgw3T)muRuY(d_XEOqh3O-IwZOpW*&YG4sp)TY%Dc*^HqL~YE-ThO)#y%&UiM*4C zppPYCm9FTg^lypQV_#Y{97-lOyDt3>ISN!r$bL@c<4c+zO%g3Q?BAWN!{fD({LSqJ zV%Guyhu$BKkOxSmKhALObdeGwCTMZsKZiP}I4H6j0QNpOx5dW7iUJt+`gVIlzt5=c z(-;HzN%Sx8ys`B;$`0pRQ-yw-exwq}#1^<2p1J@*Hn$+}tiY1}tgI96t@V^VYwqo= zpGM?T+Hnx!_c=&*mzE;p0uHQeNSQo7$X<)0qzSY>Y3%^|{3*QyJLXH!=AVhtkKMgEc(>G@<0=KZt$JX`1v&r41F*MCBH z4`@n1Hv2D7Hjp*VT&+w6sHM;4*KKYZo$mpFTStdEj^jpnA7^9{HL1? z5Y!uRblAoIB%Rxe7i7+-vxD3f)ZHydIIJr#|gr$L?)$OeA!qW|;VHrRS>t&J}>kV4*# z`H%fYeaG5LI@VdVq5td!Hg2APxBY(tbN<gq>?C8C!`kl(Dvpue*dXpsv^60 zX_6r}nVbOCV5vr&a|uo~a||QU;8kU<4&3*fFTGDw`hO#aZL}4OnSbe4r^}~|@4KMa z)pQt2o@*ztD-|6bmjvr&|IZ)ZTf^n|fRCZiJH<{lelp4b1vY|<{-{)pL%?+(XN<sv$LoaJs2Cy^=4}q8@@ef|DT}1nnMTN zF$jt0XX}R$_Sk;~15tFf1eg-w?$P?*ET&{v)UUr~Us5SNb(N>hj+o zsi((DQ2gnJ%n?a*Jr7II>^do^E>;PRW7WxuXgCZ54>w#eI zMLV59A4r`gj_Lg%e^c@fPo+$~6}ynfO-**Xg&E!K>MAf?J~_VCSbCA|1Bqyimrd`TrW()9a=K_O z9)oapBAN^Zrm)tSB}TpIanOA+j>k2RKT3T>6Jo`uc82?NY`)Ahb;Hh4_N zNpCQwI-597^{ABr`GBTU3__E17&V*hXA#{E^#&Py!cs)*Mf-lvSzDKK<2gZ1Ml@wo z@KdNAI@*EAICp+@>9EMsw3h(^XDH;Lkxa`Ga#H|G*#qEN3RxJ&j8ybfoeie)$l78yu;ayGT~VJmyK=X-im%bG5$!}G2%BH5 z#tR2AOt0J4IV-{s-H=S~)73G4A;Hu?A*aXQCeO#n(G0r8-Lig<6LW(*M8;P~uU0Bl zVk``%Wr+$=b?LD-Qus2$g{OjJGD93`;LeJ2>skz?;LA&_7|;ys-yDO5W;d1D(k#6< zfH-`su-wv6RJ}4`;=6A8bOKAq$Ua+UjzT&;N^Ba}Fr7NQ3lmxmE9Z*yD}v6gJU0tu zq*1Jf856tQ4W+3TJIkQW1+?-yRsDgBapX^8T3B`pK-|8&PAdAl?`0nRJ02bD2|JCJ zOm?fw_iRM4r?`j$i$>Zf8lMQkfHoQ~xmDayG(#bfID?^0p&@CZT^*|E*@Y)iLJb4M z-Nx!R{!8L)F%H!LpC;^jEZP}OZ{3Z5`EAJWbK`TkLK~8!x~ELaKU9fKD4d^^RgCL} zRL3(@{Cw9!Sl<&s_i$mCAE(;le&l={S%kvDOo)BKyHEfFw-)#!D5)E>0aU^S%SCbsQn zm`+GRjLONyZQpUuC2LWFKIYAWd1u(^bhv(k&0$v3J--j|Pe^|*|C?A>;pqgKDH;sx zDCTe%Kzt4R=DnX3Y^L1(F2fX~Xc3{mjrZMk<%>Q%5_q(?0zYoDz1vnodgi z$f&d13}CEdRVkG*UBK-_K|<2hn%_y#Fh)%dwZJ{ttLNCOM`31W1~RALBA1OR22&=$ zv!J4*ak{Ou1@@+kS6D(VtH3;iue>6$4|K$S2_+`dhfTf0(WEKRkIX-r+l$BPAz9}r zr)y&C;lM@)k5T!e-46rc7Uo%zBAaQ#HknAT>%JViIYZU;;ZN-oD$fu_HXMAaYhKnm zuynE^IQbmRV~j>KoTSU3?LJW^{cu7S@qX+)&&{3D+(bdw$`hmykQG+bd#EPAqK1}a zcN{M?Q)NewT%SsG`-u2c5ZWN-{TkELI8X*dm*pax_Y8N#{af%Bl$JBQ+|#>UtQR7)RIv+FG!1ubOA;We$Is(!5)=BGT1eX?u%q| zSKRW(iii(^C}IIczsIr3N`!<-@+<2f#oWLC90pjq8q=X=ckUs zScB&qXW|tWT<-6tU<|yt&k!|U1<6ZbVO<11!{ryQ&H=I6l4RtPi&vj_vR4s=9ucU- zLm^i`je(IGaq%+!FjN^Vd8!+*NU3_=KiuuTVPMl@xHj8%4qwylS4d-FjrePdc!TFy%Bef<|-_+xzc z=kob37R45+izNcW zOh+(3+!e~X<8{vjmv*=ToD9adU!LXn?o^vTe&nwoPz26JQC{(xY|bW#*2 zG!yF&XL>cg3uh_*bTRn`8nH8+lg_7?>^|gKV2BI1URhsAefZy=VoaC9BgJH7R&dA% z&L8#ySrkFH4@N@LQ2~5b!S+cn5_aJq@?%ewuEPEbDfuG&(1nVVXxH)@c8Hj;p0F|* ziJwFg2^<@zGnI@gm^0gOmwS5N`s;#xMNo=*?TSm|;LT18*+~Z3Q;K3y#OrmsgR#kf zuu3ani(p8aMv6`4F=9Tamfp#PeRQJ&(gaYXVCl&f6B2?|=#bt8j%@W?&kj3;=9ky8 z@(2^v=RSf)DZfVE%v)WaItnzJj1+r)|LQ8sn`Sf-CnC3RfmDVHxGgT^+oj~ZKW*6@ zrZ5`q87gueLT6rflV0dlWM7(mCX%WcE#KR7SG;$;+#o@pJSw}^Hhy~kYvepOc~0fe z%4FokPfHF*9ZY#0sf~b_c%&|Jt!(6T`&=RXSOz)6&;(Lo%7!=O6A%Jztzoh5UPobY zo1UoX=}Xnvhu|2i@SwXyyfK7XdbUa3SYjl+Y~-?k~c^8 zpPfLxkj@dS37|^l;aS-V5>kI3J1a$@i>l`%5(&@yyy*0I4oO@;e;9gPmu=X|-86BI zsnHz|^IPqj-{+VyryA8=A@r-waLb*v>QLv5)|H@6C1=jjgd!arV&Z`c4_MSCPP_ME z4=s%Up;@75u++#6r6O?A#bm?L_;?}Px6ixRJP6*BQbj5U3Y6Eu34!4K-mW^KXKY4!lQE+RFjg|1pnARHp4h|71Dz+G3+g7?|gu|@&; zO_Y_~7qY;Mzg=XIGcwwWClvgtTmkaS_EZ00lh+1|iC5z;uM;`;EVa>4vpw-B@QV#O zdWNQBdP*nkz6doPz*RCzgFx{z@KDuQUElrm6DKY&J)EC`L3(3146j+yKzRk1<5sPY zM!a$BAD}%_B32gX=$8&SV2HfP4yDD8HF@#fB+fqm-i*Pm0dxf}Xx^%r^mufQq> zZATsa=sy@!sEbc#RR8!}ek^OWfrF9DTo>7EWe^@~BzDq{;oMT{N zTL$XeHH>Isj-14R;d;64+VM&Qdj`R5#MOg9jnsRlNl!oy;spccP7u?O3d7@v2rvI@i*I&v4l6CU(V^srvL661zN;S_~5$irZ5s0c>ZQdO+d zR?=-1Il(U>FSEI;cH$NE?Io!<*r7NgB3i;sg)(8iTZ8+sk@deB zSr>MbdgSF234mduSY;$ryZcwjwvyy2Gjy`7aJM>0?Lc<5$78moU#fMUmW4tatB1 zCmT2x%}jQob2DB7;Z8d~X?L^PSe&+6x;2}aK$_8>`-6-8SyC$n3ORYUJdT|-vP<`~ z-i)`!)Wti#mV+KmI3Jj35&7W2)9*%I_<0b5x9iu+#4gCeft!W}xQV`n1-{x-!&!d9YB5E zBTlB>NF$Fm1tTlPj!@>Mw(S*+uS_O{$Aof+E;;r-BSSq*fBh@C}Iq!-71Wd zU6=~twOq78Xs(5p>J~6*Z(%Dse{IP?6SStsl)pK6?hS%A@e5BA+059N>(DAq}U-9D0pjUXC4nK1tW4oa(A&B#XeM>&Acz z>SvdTr>Ee`Y~#q-j3U3 z4L9oE_Vl5AZZ#O<7HQ|6%%O$ID6xlmO$~i^_N_zJ$n*gJnf?l@nx0pY1R=nMkZX}T z;Sj}IG*P%t<6Gk_e>O`0kF)O@fB`4|9*MV*-$qmr|cMtR7Rme zf}%Gs-^i_RV3u(PisFKoAc7d)D%2Xc3!aI57$2CM+l~Xw}MH z9&akDt_rt0cZ_T)znNq79FO&36NSb@#*j3*|~9OhR03g7D9|YRa0O^ zw3C^}Hdk`GUyXS=y1}|uKgy^~j1hl%TQF)(Qr9aE>qns!;`F!@#Z|ykjJwjM<-UYM zUhs`yJ0SD!&(l{$ z%yq;pp&GZdWy?K#dz~yN6>-o$bai>IG3!%(ijB_~@OeTtHVU|{2w0-km?*`{748Wo z$FO;t?kuX8r`>v%^*6M)xWy8kNXhj&Ip7xlc-}gM6P3H{+6e+bB$}f?{dFQQ8;~#} zybuQ2zjq-a<#~BNmSGPu*p4wCxtH$4?n>(36DSVtFJG--AF+}N6C&qV>IaAqW#4Nq za6$*}k6)wA$XcJjEC6)WP{V~@h%jEpfUt07`ySMe3{~M+n7HIshWXXnSPQj#lA`-z z=1eTnl&E21P)f>5uM7;qxpxo9vxl3|cTOq8nk%hSr<6#C<%fxxSr;rk6euTbE%3-uqmo#!g< zIs}A6W_{2%oa!Xetllz!jNe}JlqcD{H+Ay|qR74n^gJ`( z3`jl0!_$!0ioj008Oq_28!rXae9&bug35WVm(L1P-HVnabh#SfSF9HSU0tOzbbW0- zm0*DAjg#_E3q$p_WKJ15WtYJPM1fzqlrm=O8Ss;xz9ueqzdInaZkH?aFnfZAN1;h3 zj>=na?V~DLpn5=a5x~-9`{u**k;$OZVqwyrv&OcBUUFYTQVknsqQ<=fV-S-zlCofP zgDPCj1&5k~*2Ui}%H&)SX}Xv$QXNML3#YP?6no@XqL39XLxY;GE+BTQdc#RvEO}JY z*hf0{m0^xa)=n3iTqqAl9#t