x

apps/spa/src/components/DynamicHero.tsx

@@ -15,6 +15,7 @@ export default function DynamicHero({ payload }: DynamicHeroProps) {
   const title = getLocalizedField(payload.title, lang);
   const description = getLocalizedField(payload.description, lang);
   const buttonText = getLocalizedField(payload.buttonText, lang);
+  const focalPoint = typeof payload.focalPoint === 'object' && payload.focalPoint ? (payload.focalPoint as { x: string, y: string }) : undefined;
 
   const renderTitle = (text: string) => {
     if (!text) return null;
@@ -41,6 +42,7 @@ export default function DynamicHero({ payload }: DynamicHeroProps) {
           src={imageUrl || `${import.meta.env.VITE_API_URL.replace('/api', '')}/assets/hero.png`}
           className="w-full h-full object-cover"
           alt="Hero Background"
+          style={{ objectPosition: focalPoint ? `${focalPoint.x} ${focalPoint.y}` : undefined }}
           onError={(e) => {
             (e.target as HTMLImageElement).style.display = 'none';
           }}

apps/spa/src/components/DynamicHeroV2.tsx

@@ -23,6 +23,7 @@ export default function DynamicHeroV2({ payload }: DynamicHeroV2Props) {
   const imageUrl = typeof payload.imageUrl === 'string' ? payload.imageUrl : '/assets/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;
 
   const alignClass = align === 'center' ? 'text-center items-center mx-auto' : align === 'right' ? 'text-right items-end ml-auto' : 'text-left items-start';
 
@@ -51,6 +52,7 @@ export default function DynamicHeroV2({ payload }: DynamicHeroV2Props) {
           src={imageUrl}
           alt={title || 'Hero'}
           className="w-full h-full object-cover"
+          style={{ objectPosition: focalPoint ? `${focalPoint.x} ${focalPoint.y}` : undefined }}
         />
         <div className="absolute inset-0 bg-gradient-to-r from-white/90 via-white/50 to-transparent pointer-events-none" />
       </div>

apps/spa/src/components/Navbar.tsx

@@ -15,9 +15,10 @@ import { useMenuStore } from '../store/menuStore'
 interface NavbarProps {
   categories?: Category[]
   topOffsetClassName?: string
+  isTransparent?: boolean
 }
 
-export default function Navbar({ topOffsetClassName = 'top-0' }: NavbarProps) {
+export default function Navbar({ topOffsetClassName = 'top-0', isTransparent = false }: NavbarProps) {
   const isDesktop = useMediaQuery('(min-width: 768px)')
   
   const [searchOpen, setSearchOpen] = useState(false)
@@ -147,12 +148,18 @@ export default function Navbar({ topOffsetClassName = 'top-0' }: NavbarProps) {
 
   const logoUrl = settings?.logoUrl || ''
 
+  const shouldBeTransparent = isTransparent && !scrolled && !mobileOpen && !searchOpen && !langSheetOpen
+
   return (
     <>
       <nav
         ref={navRef}
-        className={`fixed ${finalTopClassName} z-50 w-full border-b border-pop-black/10 transition-all duration-300 ${
-          scrolled ? 'shadow-lg shadow-pop-black/10 backdrop-blur-xl bg-pop-bg/90' : 'shadow-none bg-pop-bg'
+        className={`fixed ${finalTopClassName} z-50 w-full transition-all duration-300 ${
+          scrolled
+            ? 'border-b border-pop-black/10 shadow-lg shadow-pop-black/10 backdrop-blur-xl bg-pop-bg/90'
+            : shouldBeTransparent
+              ? 'border-transparent shadow-none bg-transparent backdrop-blur-none'
+              : 'border-b border-pop-black/10 shadow-none bg-pop-bg'
         } px-4 py-3.5 md:px-6 md:py-4`}
       >
         {/* Single-row layout: Logo (left) | Menu (center, desktop) | Actions (right) */}