x

apps/website/src/app/[lang]/category/[id]/page.tsx

@@ -84,25 +84,28 @@ export default async function CategoryPage({ params }: { params: Promise<{ id: s
       {heroSections.length > 0 ? (
         <DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
       ) : (
-        <section className="relative overflow-hidden bg-surface-card">
-          <Image
-            src={category.imageUrl || getCategoryImage(categoryName)}
-            alt={categoryName}
-            fill
-            unoptimized
-            className="absolute inset-0 h-full w-full object-cover"
-          />
-          <div className="absolute inset-0 bg-gradient-to-r from-surface-page/95 via-surface-page/70 to-white/20" />
-          <div className="relative mx-auto max-w-7xl px-6 py-20">
-            <div className="mb-5 flex items-center gap-2 text-xs font-semibold uppercase tracking-widest text-muted-text">
-              <Link href="/" className="transition hover:text-brand-primary">Home</Link>
-              <span>/</span>
-              <Link href="/shop" className="transition hover:text-brand-primary">Shop</Link>
-              <span>/</span>
-              <span className="text-text-main">{categoryName}</span>
+        <section className="relative overflow-hidden bg-surface-card border-b border-line-primary/10">
+          <div className="relative mx-auto max-w-7xl px-6 pt-32 pb-12 md:pt-32 md:pb-20 flex flex-col-reverse md:flex-row items-center gap-10 md:gap-16">
+            <div className="flex-1 text-center md:text-left">
+              <div className="mb-5 flex items-center justify-center md:justify-start gap-2 text-xs font-semibold uppercase tracking-widest text-muted-text">
+                <Link href="/" className="transition hover:text-brand-primary">Home</Link>
+                <span>/</span>
+                <Link href="/shop" className="transition hover:text-brand-primary">Shop</Link>
+                <span>/</span>
+                <span className="text-text-main">{categoryName}</span>
+              </div>
+              <h1 className="text-4xl font-semibold text-text-main md:text-6xl">{categoryName}</h1>
+              {category._count && <p className="mt-4 text-muted-text">{category._count.products} products available</p>}
+            </div>
+            <div className="relative w-48 h-48 md:w-72 md:h-72 shrink-0 rounded-3xl overflow-hidden shadow-lg border border-line-primary/5">
+              <Image
+                src={category.imageUrl || getCategoryImage(categoryName)}
+                alt={categoryName}
+                fill
+                unoptimized
+                className="object-cover"
+              />
             </div>
-            <h1 className="text-5xl font-semibold text-text-main md:text-6xl">{categoryName}</h1>
-            {category._count && <p className="mt-3 text-muted-text">{category._count.products} products available</p>}
           </div>
         </section>
       )}

apps/website/src/app/[lang]/shop/page.tsx

@@ -50,7 +50,7 @@ export default async function ShopPage({ searchParams, params }: { searchParams:
       {heroSections.length > 0 ? (
         <DynamicPageRenderer sections={heroSections} categories={categories} lang={lang} />
       ) : (
-        <section className="border-b border-line-primary bg-surface-card px-6 py-16 text-center">
+        <section className="border-b border-line-primary bg-surface-card px-6 pt-32 pb-16 text-center">
           <p className="ui-eyebrow">All Products</p>
           <h1 className="mt-4 text-5xl font-semibold tracking-tight text-text-main">The Collection</h1>
           <p className="mx-auto mt-4 max-w-2xl text-muted-text">

apps/website/src/components/Navbar.tsx

@@ -150,15 +150,20 @@ export default function Navbar({ categories = [], initialMenu = [], settings = n
   const activeLanguage = LANGUAGES.find((language) => lang.startsWith(language.code) || language.code.startsWith(lang)) ?? LANGUAGES[0]
   const brandName = settings?.brandName || ''
 
+  const isHome = getPathWithoutLocale(pathname) === '/'
+  const isTransparent = isHome && !scrolled && !mobileOpen && !searchOpen && !langSheetOpen
+
   return (
     <>
       <nav
         ref={navRef}
         data-scrolled={scrolled}
-        className={`global-navbar fixed top-0 z-50 w-full border-b border-black/5 px-4 py-3.5 transition-all duration-300 md:px-6 md:py-4 ${
+        className={`global-navbar fixed top-0 z-50 w-full border-b px-4 py-3.5 transition-all duration-300 md:px-6 md:py-4 ${
           scrolled
-            ? 'bg-surface-page/95 shadow-lg shadow-black/5 backdrop-blur-xl'
-            : 'bg-surface-page/80 backdrop-blur-xl md:bg-surface-nav-rest md:backdrop-blur-none'
+            ? 'border-black/5 bg-surface-page/95 shadow-lg shadow-black/5 backdrop-blur-xl'
+            : isTransparent
+              ? 'border-transparent bg-transparent shadow-none backdrop-blur-none'
+              : 'border-black/5 bg-surface-page/80 backdrop-blur-xl md:bg-surface-nav-rest md:backdrop-blur-none'
         }`}
       >
         <div className="flex w-full items-center justify-between gap-4">

apps/website/src/components/dynamic/DynamicPageRenderer.tsx

@@ -104,6 +104,7 @@ function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang
   const buttonText = localizedFromRecord(payload, 'buttonText', resolvedLang)
   const imageUrl = typeof payload.imageUrl === 'string' ? payload.imageUrl : '/images/hero.png'
   const buttonLink = typeof payload.buttonLink === 'string' ? payload.buttonLink : '/shop'
+  const focalPoint = typeof payload.focalPoint === 'object' && payload.focalPoint ? (payload.focalPoint as { x: string, y: string }) : undefined
 
   return (
     <section className="ui-hero-shell">
@@ -113,6 +114,7 @@ function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang
         fill
         unoptimized
         className="absolute inset-0 h-full w-full scale-[1.02] object-cover"
+        style={{ objectPosition: focalPoint ? `${focalPoint.x} ${focalPoint.y}` : undefined }}
       />
       <div className="relative z-10 mx-auto mt-16 w-full max-w-4xl space-y-6 px-8 text-center md:mt-0">
         <div className="space-y-6">
@@ -213,6 +215,7 @@ function HeroV2Section({ payload, lang }: { payload: Record<string, unknown>, la
   const imageUrl = typeof payload.imageUrl === 'string' ? payload.imageUrl : '/images/hero.png'
   const align = typeof payload.contentAlignment === 'string' ? payload.contentAlignment : 'left'
   const showOrnament = typeof payload.showOrnament === 'boolean' ? payload.showOrnament : true
+  const focalPoint = typeof payload.focalPoint === 'object' && payload.focalPoint ? (payload.focalPoint as { x: string, y: string }) : undefined
 
   // Alignment classes
   const alignClass = align === 'center' ? 'text-center items-center mx-auto' : align === 'right' ? 'text-right items-end ml-auto' : 'text-left items-start'
@@ -226,6 +229,7 @@ function HeroV2Section({ payload, lang }: { payload: Record<string, unknown>, la
           fill
           unoptimized
           className="object-cover"
+          style={{ objectPosition: focalPoint ? `${focalPoint.x} ${focalPoint.y}` : undefined }}
         />
       </div>
       
@@ -668,12 +672,13 @@ function HeroArticleSection({ payload, lang }: { payload: Record<string, unknown
     : typeof payload.publishDate === 'string'
       ? payload.publishDate
       : ''
+  const focalPoint = typeof payload.focalPoint === 'object' && payload.focalPoint ? (payload.focalPoint as { x: string, y: string }) : undefined
 
   return (
     <section className="ui-hero-shell min-h-[60vh] px-6 py-24 text-center md:min-h-[76vh]">
       {imageUrl && (
         <>
-          <Image src={imageUrl} alt={title} fill unoptimized className="absolute inset-0 h-full w-full object-cover" />
+          <Image src={imageUrl} alt={title} fill unoptimized className="absolute inset-0 h-full w-full object-cover" style={{ objectPosition: focalPoint ? `${focalPoint.x} ${focalPoint.y}` : undefined }} />
         </>
       )}
       <div className="relative z-10 mx-auto max-w-4xl space-y-6">