admin/homaroma
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

x

Browse Source
This commit is contained in:
Your Name committed 2026-07-11 23:58:05 -04:00
1 parent 862eeef48b
commit 5c09629b6f
12 files changed
+135 -47
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/admin/src/components/page-builder/FocalPointPicker.tsx
+52
View File
@@ -0,0 +1,52 @@
import React, { useRef } from 'react';
interface FocalPointPickerProps {
imageUrl: string;
focalPoint?: { x: string; y: string };
onChange: (focalPoint: { x: string; y: string }) => void;
}
export default function FocalPointPicker({ imageUrl, focalPoint, onChange }: FocalPointPickerProps) {
const containerRef = useRef<HTMLDivElement>(null);
const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
if (!containerRef.current) return;
const rect = containerRef.current.getBoundingClientRect();
const x = ((e.clientX - rect.left) / rect.width) * 100;
const y = ((e.clientY - rect.top) / rect.height) * 100;
onChange({ x: `${x.toFixed(2)}%`, y: `${y.toFixed(2)}%` });
};
const currentX = focalPoint?.x || '50%';
const currentY = focalPoint?.y || '50%';
return (
<div className="space-y-2">
<label className="text-[10px] uppercase font-bold tracking-widest text-slate-400">
Focal Point (Click image to set)
</label>
<div
ref={containerRef}
onClick={handleClick}
className="relative w-full overflow-hidden rounded-xl border border-white/10 bg-night-950/50 cursor-crosshair"
style={{ aspectRatio: '16/9' }}
>
<img
src={imageUrl}
alt="Focal point"
className="absolute inset-0 w-full h-full object-cover"
draggable={false}
/>
<div
className="absolute w-6 h-6 -ml-3 -mt-3 bg-white/20 border-2 border-white rounded-full shadow-[0_0_10px_rgba(0,0,0,0.5)] pointer-events-none flex items-center justify-center backdrop-blur-sm"
style={{ left: currentX, top: currentY }}
>
<div className="w-1.5 h-1.5 bg-white rounded-full" />
</div>
</div>
<div className="text-xs text-slate-400 font-mono">
X: {currentX}, Y: {currentY}
</div>
</div>
);
}
apps/admin/src/components/page-builder/HeroForm.tsx
+12 -1
View File
@@ -1,12 +1,13 @@
import { UploadCloud, Image as ImageIcon } from 'lucide-react';
import { type PageSection } from '@homaroma/types';
import FocalPointPicker from './FocalPointPicker';
interface HeroFormProps {
editingSection: Partial<PageSection>;
editingLang: string;
getLocalizedValue: (payload: any, field: string) => string;
updateLocalizedValue: (field: string, value: string) => void;
updatePayloadValue: (field: string, value: string | number) => void;
updatePayloadValue: (field: string, value: any) => void;
setUploadTarget: (target: { type: 'main' | 'slide'; index?: number } | null) => void;
setIsMediaModalOpen: (open: boolean) => void;
}
@@ -47,6 +48,16 @@ export default function HeroForm({
</div>
</div>
{editingSection.payload?.imageUrl && (
<div className="md:col-span-2">
<FocalPointPicker
imageUrl={editingSection.payload.imageUrl}
focalPoint={editingSection.payload.focalPoint}
onChange={(focalPoint) => updatePayloadValue('focalPoint', focalPoint)}
/>
</div>
)}
<div className="space-y-2">
<label className="text-[10px] uppercase font-bold tracking-widest text-slate-400">Tagline</label>
<input
apps/spa/src/components/DynamicHero.tsx
+2
View File
@@ -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
+2
View File
@@ -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
+10 -3
View File
@@ -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) */}
apps/spa/src/pages/CategoryPage.tsx
+19 -19
View File
@@ -119,42 +119,42 @@ export default function CategoryPage() {
/>
</div>
) : (
<div className="relative h-64 md:h-80 overflow-hidden">
<img
src={getCategoryImage(typeof category?.name === 'string' ? category.name : (category?.name as any)?.en || '')}
className="absolute inset-0 w-full h-full object-cover brightness-30 scale-105"
alt={typeof category?.name === 'string' ? category.name : (category?.name as any)?.[i18n.language] || (category?.name as any)?.en || ''}
onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }}
/>
<div className="absolute inset-0 bg-night-900/40" />
<div className="absolute inset-0 bg-gradient-to-t from-night-900/90 via-night-900/10 to-transparent" />
<div className="absolute bottom-0 left-0 right-0 px-6 pb-10 pt-20">
<div className="max-w-7xl mx-auto">
<div className="bg-spa-stone/5 border-b border-spa-stone/10 pt-32 pb-16 px-6">
<div className="max-w-7xl mx-auto flex flex-col-reverse md:flex-row items-center gap-10 md:gap-16">
<div className="flex-1 text-center md:text-left">
{/* Breadcrumb */}
<div className="flex items-center gap-2 text-xs text-spa-sage/80 uppercase tracking-widest mb-4 font-semibold">
<Link to="/" className="hover:text-spa-light transition-colors">Home</Link>
<div className="flex items-center justify-center md:justify-start gap-2 text-xs text-spa-stone/60 uppercase tracking-widest mb-4 font-semibold">
<Link to="/" className="hover:text-spa-forest transition-colors">Home</Link>
<span>/</span>
<Link to="/shop" className="hover:text-spa-light transition-colors">Shop</Link>
<Link to="/shop" className="hover:text-spa-forest transition-colors">Shop</Link>
<span>/</span>
<span className="text-spa-light">{typeof category?.name === 'string' ? category.name : (category?.name as any)?.[localStorage.getItem('app_lang') || 'en'] || (category?.name as any)?.en || '...'}</span>
<span className="text-spa-forest">{typeof category?.name === 'string' ? category.name : (category?.name as any)?.[localStorage.getItem('app_lang') || 'en'] || (category?.name as any)?.en || '...'}</span>
</div>
<h1 className="text-4xl md:text-5xl font-bold text-spa-light">
<h1 className="text-4xl md:text-5xl font-bold text-spa-forest">
{loading ? (
<div className="h-10 w-48 bg-spa-light animate-pulse rounded-lg" />
<div className="h-10 w-48 bg-spa-stone/20 animate-pulse rounded-lg mx-auto md:mx-0" />
) : (
typeof category?.name === 'string' ? category.name : (category?.name as any)?.[i18n.language] || (category?.name as any)?.en || ''
)}
</h1>
{!loading && category?._count && (
<p className="text-spa-sage mt-2">
<p className="text-spa-stone mt-4">
{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-spa-stone/10">
<img
src={getCategoryImage(typeof category?.name === 'string' ? category.name : (category?.name as any)?.en || '')}
className="absolute inset-0 w-full h-full object-cover"
alt={typeof category?.name === 'string' ? category.name : (category?.name as any)?.[i18n.language] || (category?.name as any)?.en || ''}
onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }}
/>
</div>
</div>
</div>
)}
{/* Products Grid */}
<div className="max-w-7xl mx-auto px-6 py-16 space-y-10">
{/* Other Category Pills */}
apps/spa/src/pages/HomePage.tsx
+1 -1
View File
@@ -45,7 +45,7 @@ export default function HomePage() {
return (
<div className="min-h-screen bg-pop-bg">
<Navbar categories={categories} />
<Navbar categories={categories} isTransparent={true} />
{loading ? (
<div className="min-h-[60vh] flex items-center justify-center">
apps/website/src/app/[lang]/category/[id]/page.tsx
+21 -18
View File
@@ -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
+1 -1
View File
@@ -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
+8 -3
View File
@@ -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
+6 -1
View File
@@ -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">
packages/types/index.ts
+1
View File
@@ -309,6 +309,7 @@ export const HeroSectionPayloadSchema = z.object({
imageUrl: z.string().min(1),
buttonText: LocalizedStringSchema,
buttonLink: z.string(),
focalPoint: z.object({ x: z.string(), y: z.string() }).optional(),
});
export type HeroSectionPayload = z.infer<typeof HeroSectionPayloadSchema>;