{logoUrl ?
: null}
diff --git a/apps/business/src/pages/WebsiteStaticImagesPage.module.css b/apps/business/src/pages/WebsiteStaticImagesPage.module.css
index ecdbf46..fbe5fe0 100644
--- a/apps/business/src/pages/WebsiteStaticImagesPage.module.css
+++ b/apps/business/src/pages/WebsiteStaticImagesPage.module.css
@@ -1,3 +1,9 @@
+.pageHeader {
+ padding-bottom: 16px;
+ margin-bottom: 20px;
+ border-bottom: 1px solid rgba(148, 163, 184, 0.2);
+}
+
.slot {
margin-bottom: 28px;
}
diff --git a/apps/business/src/pages/WebsiteStaticImagesPage.tsx b/apps/business/src/pages/WebsiteStaticImagesPage.tsx
index 76e78a8..624152a 100644
--- a/apps/business/src/pages/WebsiteStaticImagesPage.tsx
+++ b/apps/business/src/pages/WebsiteStaticImagesPage.tsx
@@ -32,7 +32,7 @@ import type {
import { parseAspectRatio } from '../utils/aspectRatio'
import {
staticImagePageLabel,
- staticImagePageOptions,
+ staticImagePagesFromSlots,
} from '../utils/staticImagePages'
import controlStyles from '../components/CategoryRow.module.css'
import pageStyles from '../components/PageContent.module.css'
@@ -122,9 +122,16 @@ export function WebsiteStaticImagesPage() {
}
const pageOptions = useMemo(
- () => staticImagePageOptions(slots.map((slot) => slot.pageKey)),
+ () => staticImagePagesFromSlots(slots.map((slot) => slot.pageKey)),
[slots],
)
+ useEffect(() => {
+ if (pageOptions.length === 0) return
+ if (!pageOptions.includes(pageKey)) {
+ setPageKey(pageOptions[0])
+ }
+ }, [pageOptions, pageKey])
+
const visibleSlots = useMemo(
() => slots.filter((slot) => (slot.pageKey || 'home') === pageKey),
[slots, pageKey],
@@ -271,28 +278,30 @@ export function WebsiteStaticImagesPage() {
]}
/>
-
+
{t('title.staticImages')}
{t('website.staticImages.subtitle', { domain })}
-
-
-
-
+ {pageOptions.length > 1 ? (
+
+
+
+
+ ) : null}
{error &&
{error}
}
diff --git a/apps/business/src/utils/applyBusinessTheme.ts b/apps/business/src/utils/applyBusinessTheme.ts
index 8dbd3e7..86c3841 100644
--- a/apps/business/src/utils/applyBusinessTheme.ts
+++ b/apps/business/src/utils/applyBusinessTheme.ts
@@ -15,6 +15,8 @@ const CSS_VAR_DEFAULTS: Record
= {
'--chart-accent-dark': '#0891b2',
'--chart-accent-rgb': '6 182 212',
'--chart-accent-dark-rgb': '8 145 178',
+ '--page-accent': '#38bdf8',
+ '--page-accent-rgb': '56 189 248',
}
export function applyBusinessPrimaryColor(colorId?: BusinessPrimaryColorId | null) {
@@ -31,6 +33,8 @@ export function applyBusinessPrimaryColor(colorId?: BusinessPrimaryColorId | nul
root.style.setProperty('--chart-accent-dark', tokens.chartAccentDark)
root.style.setProperty('--chart-accent-rgb', tokens.chartAccentRgb)
root.style.setProperty('--chart-accent-dark-rgb', tokens.chartAccentDarkRgb)
+ root.style.setProperty('--page-accent', tokens.pageAccent)
+ root.style.setProperty('--page-accent-rgb', tokens.pageAccentRgb)
}
export function resetBusinessPrimaryColor() {
diff --git a/apps/business/src/utils/businessPrimaryColors.ts b/apps/business/src/utils/businessPrimaryColors.ts
index 9c4d35c..a12332a 100644
--- a/apps/business/src/utils/businessPrimaryColors.ts
+++ b/apps/business/src/utils/businessPrimaryColors.ts
@@ -30,6 +30,9 @@ export type BusinessPrimaryColorTokens = {
chartAccentDark: string
chartAccentRgb: string
chartAccentDarkRgb: string
+ /** Soft analog for the page wash — stays in-family (red→peach, blue→sky). */
+ pageAccent: string
+ pageAccentRgb: string
}
const PURPLE_ACCENT = {
@@ -46,6 +49,36 @@ const CYAN_ACCENT = {
chartAccentDarkRgb: '8 145 178',
} as const
+const PEACH_PAGE = {
+ pageAccent: '#fb923c',
+ pageAccentRgb: '251 146 60',
+} as const
+
+const GOLD_PAGE = {
+ pageAccent: '#fbbf24',
+ pageAccentRgb: '251 191 36',
+} as const
+
+const SKY_PAGE = {
+ pageAccent: '#38bdf8',
+ pageAccentRgb: '56 189 248',
+} as const
+
+const PINK_PAGE = {
+ pageAccent: '#f472b6',
+ pageAccentRgb: '244 114 182',
+} as const
+
+const MINT_PAGE = {
+ pageAccent: '#34d399',
+ pageAccentRgb: '52 211 153',
+} as const
+
+const SAND_PAGE = {
+ pageAccent: '#d6b896',
+ pageAccentRgb: '214 184 150',
+} as const
+
export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
BusinessPrimaryColorId,
BusinessPrimaryColorTokens
@@ -59,6 +92,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryRgb: '239 68 68',
primaryDarkRgb: '220 38 38',
...PURPLE_ACCENT,
+ ...PEACH_PAGE,
},
'dark-red': {
label: 'Dark Red',
@@ -69,16 +103,18 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryRgb: '153 27 27',
primaryDarkRgb: '127 29 29',
...PURPLE_ACCENT,
+ ...PEACH_PAGE,
},
yellow: {
label: 'Yellow',
- primary: '#eab308',
- primaryDark: '#ca8a04',
- primaryLight: '#fef9c3',
- primaryGlow: '#eab308',
- primaryRgb: '234 179 8',
- primaryDarkRgb: '202 138 4',
+ primary: '#facc15',
+ primaryDark: '#eab308',
+ primaryLight: '#fde047',
+ primaryGlow: '#facc15',
+ primaryRgb: '250 204 21',
+ primaryDarkRgb: '234 179 8',
...PURPLE_ACCENT,
+ ...GOLD_PAGE,
},
black: {
label: 'Black',
@@ -89,6 +125,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryRgb: '30 41 59',
primaryDarkRgb: '15 23 42',
...CYAN_ACCENT,
+ ...SKY_PAGE,
},
cyan: {
label: 'Cyan',
@@ -99,6 +136,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryRgb: '6 182 212',
primaryDarkRgb: '8 145 178',
...PURPLE_ACCENT,
+ ...SKY_PAGE,
},
purple: {
label: 'Purple',
@@ -109,6 +147,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryRgb: '168 85 247',
primaryDarkRgb: '147 51 234',
...CYAN_ACCENT,
+ ...PINK_PAGE,
},
'light-blue': {
label: 'Light Blue',
@@ -119,6 +158,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryRgb: '56 189 248',
primaryDarkRgb: '14 165 233',
...CYAN_ACCENT,
+ ...SKY_PAGE,
},
'dark-blue': {
label: 'Blue',
@@ -129,6 +169,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryRgb: '59 130 246',
primaryDarkRgb: '37 99 235',
...CYAN_ACCENT,
+ ...SKY_PAGE,
},
brown: {
label: 'Brown',
@@ -139,6 +180,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryRgb: '139 94 60',
primaryDarkRgb: '111 74 47',
...CYAN_ACCENT,
+ ...SAND_PAGE,
},
navy: {
label: 'Dark Blue',
@@ -149,6 +191,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryRgb: '30 58 138',
primaryDarkRgb: '23 37 84',
...CYAN_ACCENT,
+ ...SKY_PAGE,
},
'dark-green': {
label: 'Dark Green',
@@ -159,6 +202,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryRgb: '22 101 52',
primaryDarkRgb: '20 83 45',
...CYAN_ACCENT,
+ ...MINT_PAGE,
},
orange: {
label: 'Orange',
@@ -169,6 +213,7 @@ export const BUSINESS_PRIMARY_COLOR_PALETTE: Record<
primaryRgb: '234 88 12',
primaryDarkRgb: '194 65 12',
...PURPLE_ACCENT,
+ ...PEACH_PAGE,
},
}
diff --git a/apps/business/src/utils/staticImagePages.ts b/apps/business/src/utils/staticImagePages.ts
index f34e13c..0d60b2b 100644
--- a/apps/business/src/utils/staticImagePages.ts
+++ b/apps/business/src/utils/staticImagePages.ts
@@ -36,3 +36,12 @@ export function staticImagePageOptions(existing: string[]) {
)
return [...STATIC_IMAGE_PAGE_KEYS, ...extras]
}
+
+export function staticImagePagesFromSlots(pageKeys: string[]) {
+ const unique = [...new Set(pageKeys.map((key) => key || 'home'))]
+ const known = STATIC_IMAGE_PAGE_KEYS.filter((key) => unique.includes(key))
+ const extras = unique.filter(
+ (key) => !(STATIC_IMAGE_PAGE_KEYS as readonly string[]).includes(key),
+ )
+ return [...known, ...extras]
+}
diff --git a/apps/customer/src/components/BackgroundOrbs.module.css b/apps/customer/src/components/BackgroundOrbs.module.css
new file mode 100644
index 0000000..157ded3
--- /dev/null
+++ b/apps/customer/src/components/BackgroundOrbs.module.css
@@ -0,0 +1,138 @@
+.bgOrbs {
+ position: fixed;
+ inset: 0;
+ pointer-events: none;
+ z-index: 0;
+ overflow: hidden;
+}
+
+.bgOrbs::after {
+ content: '';
+ position: absolute;
+ inset: 0;
+ background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(255, 255, 255, 0.2) 100%);
+ backdrop-filter: blur(1px);
+}
+
+.orb1,
+.orb2,
+.orb3,
+.orb4 {
+ position: absolute;
+ border-radius: 50%;
+ filter: blur(100px);
+ will-change: transform;
+}
+
+.orb1 {
+ width: 560px;
+ height: 560px;
+ background: radial-gradient(
+ circle,
+ color-mix(in srgb, var(--primary-light) 55%, #ffffff) 0%,
+ color-mix(in srgb, var(--primary) 30%, #ffffff) 55%,
+ transparent 72%
+ );
+ opacity: 0.55;
+ top: -140px;
+ right: -120px;
+ animation: floatOrb1 18s ease-in-out infinite;
+}
+
+.orb2 {
+ width: 480px;
+ height: 480px;
+ background: radial-gradient(
+ circle,
+ color-mix(in srgb, var(--primary) 28%, #ffffff) 0%,
+ color-mix(in srgb, var(--primary) 38%, #ffffff) 50%,
+ transparent 70%
+ );
+ opacity: 0.42;
+ bottom: -100px;
+ left: 15%;
+ animation: floatOrb2 22s ease-in-out infinite;
+}
+
+.orb3 {
+ width: 380px;
+ height: 380px;
+ background: radial-gradient(
+ circle,
+ color-mix(in srgb, var(--page-accent) 30%, #ffffff) 0%,
+ color-mix(in srgb, var(--page-accent) 48%, #ffffff) 55%,
+ transparent 72%
+ );
+ opacity: 0.42;
+ top: 38%;
+ left: -100px;
+ animation: floatOrb3 20s ease-in-out infinite;
+}
+
+.orb4 {
+ width: 320px;
+ height: 320px;
+ background: radial-gradient(
+ circle,
+ color-mix(in srgb, var(--primary-light) 45%, var(--page-accent)) 0%,
+ color-mix(in srgb, var(--page-accent) 32%, var(--primary-light)) 50%,
+ transparent 70%
+ );
+ opacity: 0.38;
+ top: 12%;
+ right: 28%;
+ animation: floatOrb4 24s ease-in-out infinite;
+}
+
+@keyframes floatOrb1 {
+ 0%,
+ 100% {
+ transform: translate(0, 0) scale(1);
+ }
+ 50% {
+ transform: translate(-30px, 25px) scale(1.06);
+ }
+}
+
+@keyframes floatOrb2 {
+ 0%,
+ 100% {
+ transform: translate(0, 0) scale(1);
+ }
+ 50% {
+ transform: translate(35px, -20px) scale(1.05);
+ }
+}
+
+@keyframes floatOrb3 {
+ 0%,
+ 100% {
+ transform: translate(0, 0) scale(1);
+ }
+ 50% {
+ transform: translate(20px, 30px) scale(1.08);
+ }
+}
+
+@keyframes floatOrb4 {
+ 0%,
+ 100% {
+ transform: translate(0, 0) scale(1);
+ }
+ 50% {
+ transform: translate(-25px, -15px) scale(1.04);
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .orb1,
+ .orb2,
+ .orb3,
+ .orb4 {
+ animation: none;
+ }
+}
+
+:global(html[data-theme='dark']) .bgOrbs {
+ display: none;
+}
diff --git a/apps/customer/src/components/BackgroundOrbs.tsx b/apps/customer/src/components/BackgroundOrbs.tsx
new file mode 100644
index 0000000..7a2f9b2
--- /dev/null
+++ b/apps/customer/src/components/BackgroundOrbs.tsx
@@ -0,0 +1,12 @@
+import styles from './BackgroundOrbs.module.css'
+
+export function BackgroundOrbs() {
+ return (
+
+ )
+}
diff --git a/apps/customer/src/components/PageLayout.tsx b/apps/customer/src/components/PageLayout.tsx
index 40dc0c7..54de702 100644
--- a/apps/customer/src/components/PageLayout.tsx
+++ b/apps/customer/src/components/PageLayout.tsx
@@ -3,6 +3,7 @@ import { Outlet, useLocation } from 'react-router-dom'
import { useT } from '../i18n/useT'
import { Sidebar } from './Sidebar'
import { Header } from './Header'
+import { BackgroundOrbs } from './BackgroundOrbs'
import styles from './PageLayout.module.css'
const NAV_EXPAND_QUERY = '(min-width: 1281px)'
@@ -43,6 +44,7 @@ export function PageLayout() {
return (
+
{navOpen ? (