+
+
+
+
+
+
+
diff --git a/packages/shared-landing-ui/src/i18n/index.ts b/packages/shared-landing-ui/src/i18n/index.ts
new file mode 100644
index 000000000..b4358cdde
--- /dev/null
+++ b/packages/shared-landing-ui/src/i18n/index.ts
@@ -0,0 +1,175 @@
+/**
+ * Shared i18n utilities for landing pages
+ */
+
+export * from './types';
+
+import {
+ type Language,
+ type CommonTranslations,
+ type Translations,
+ languages,
+ defaultLang,
+ defaultCommonTranslations,
+} from './types';
+
+/**
+ * Get the language from a URL pathname
+ * Supports both /en/page and /page patterns
+ */
+export function getLangFromUrl(url: URL): Language {
+ const [, lang] = url.pathname.split('/');
+ if (lang && lang in languages) {
+ return lang as Language;
+ }
+ return defaultLang;
+}
+
+/**
+ * Get the route without the language prefix
+ */
+export function getRouteFromUrl(url: URL): string {
+ const pathname = url.pathname;
+ const [, lang, ...rest] = pathname.split('/');
+
+ if (lang && lang in languages) {
+ return '/' + rest.join('/') || '/';
+ }
+ return pathname;
+}
+
+/**
+ * Create a localized path
+ */
+export function localizePath(path: string, lang: Language): string {
+ // If the language is the default language, don't add a prefix
+ if (lang === defaultLang) {
+ return path;
+ }
+ // Ensure path starts with /
+ const normalizedPath = path.startsWith('/') ? path : `/${path}`;
+ return `/${lang}${normalizedPath}`;
+}
+
+/**
+ * Create a translation function for a specific language
+ */
+export function useTranslations
+ {
+ languageEntries.map(([code, label]) => (
+
+ {label}
+
+ ))
+ }
+
+
+
+
+ {
+ brand.logo ? (
+ 
+ ) : (
+
+ )
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {title} + {titleHighlight && {titleHighlight}} +
+ {subtitle &&{subtitle}
} +
+
+
+ {
+ scrollHint && (
+
+ {
+ apps.map((app) => (
+
+
+
+
+
+ ))
+ }
+
+
+ {app.logo.startsWith('/') ? (
+ 
+ ) : (
+ {app.logo}
+ )}
+
+
+
+
+
+
+ {app.category}
+ {app.name}
+{app.description}
+
+ {scrollHint}
+
+
+ )
+ }
+
+
+
+
+
+ {title}
+ {subtitle &&{subtitle}
} +
+ {
+ items.map((item) => (
+
+
+
+ ))
+ }
+
+ {item.number && {item.number}}
+
+ {item.title}
+{item.text}
+
+
+
+ {
+ principles.map((principle) => (
+
+
+
+ ))
+ }
+
+
+
+
+
+ {principle.title}
+{principle.description}
+
+
+
+
+
+ {title}
+ {subtitle &&{subtitle}
} +
+ {
+ items.map((item, index) => (
+
+
+
+
+ ))
+ }
+
+ {item.badge}
+
+ {item.title}
+{item.text}
+
+
+
+
diff --git a/packages/shared-landing-ui/src/themes/chat.css b/packages/shared-landing-ui/src/themes/chat.css
new file mode 100644
index 000000000..36982aad2
--- /dev/null
+++ b/packages/shared-landing-ui/src/themes/chat.css
@@ -0,0 +1,80 @@
+/**
+ * Chat Theme - Blue
+ * AI chat application
+ */
+:root {
+ /* Primary colors - Vibrant Blue */
+ --color-primary: #0ea5e9;
+ --color-primary-hover: #0284c7;
+ --color-primary-glow: rgba(14, 165, 233, 0.3);
+
+ /* Text colors */
+ --color-text-primary: #f8fafc;
+ --color-text-secondary: #cbd5e1;
+ --color-text-muted: #64748b;
+
+ /* Background colors - Dark slate */
+ --color-background-page: #0f172a;
+ --color-background-card: #1e293b;
+ --color-background-card-hover: #334155;
+
+ /* Border colors */
+ --color-border: rgba(14, 165, 233, 0.2);
+ --color-border-hover: rgba(14, 165, 233, 0.4);
+}
+
+/* Light mode support */
+@media (prefers-color-scheme: light) {
+ :root {
+ --color-primary: #0284c7;
+ --color-primary-hover: #0369a1;
+ --color-primary-glow: rgba(2, 132, 199, 0.2);
+
+ --color-text-primary: #0c4a6e;
+ --color-text-secondary: #0369a1;
+ --color-text-muted: #0ea5e9;
+
+ --color-background-page: #f0f9ff;
+ --color-background-card: #ffffff;
+ --color-background-card-hover: #e0f2fe;
+
+ --color-border: #bae6fd;
+ --color-border-hover: #7dd3fc;
+ }
+}
+
+/* Force dark mode class */
+.dark {
+ --color-primary: #0ea5e9;
+ --color-primary-hover: #38bdf8;
+ --color-primary-glow: rgba(14, 165, 233, 0.3);
+
+ --color-text-primary: #f8fafc;
+ --color-text-secondary: #cbd5e1;
+ --color-text-muted: #64748b;
+
+ --color-background-page: #0f172a;
+ --color-background-card: #1e293b;
+ --color-background-card-hover: #334155;
+
+ --color-border: rgba(14, 165, 233, 0.2);
+ --color-border-hover: rgba(14, 165, 233, 0.4);
+}
+
+/* Force light mode class */
+.light {
+ --color-primary: #0284c7;
+ --color-primary-hover: #0369a1;
+ --color-primary-glow: rgba(2, 132, 199, 0.2);
+
+ --color-text-primary: #0c4a6e;
+ --color-text-secondary: #0369a1;
+ --color-text-muted: #0ea5e9;
+
+ --color-background-page: #f0f9ff;
+ --color-background-card: #ffffff;
+ --color-background-card-hover: #e0f2fe;
+
+ --color-border: #bae6fd;
+ --color-border-hover: #7dd3fc;
+}
diff --git a/packages/shared-landing-ui/src/themes/picture.css b/packages/shared-landing-ui/src/themes/picture.css
new file mode 100644
index 000000000..c9e527ff0
--- /dev/null
+++ b/packages/shared-landing-ui/src/themes/picture.css
@@ -0,0 +1,80 @@
+/**
+ * Picture Theme - Dark Indigo
+ * AI image generation app
+ */
+:root {
+ /* Primary colors - Indigo/Purple */
+ --color-primary: #6366f1;
+ --color-primary-hover: #4f46e5;
+ --color-primary-glow: rgba(99, 102, 241, 0.3);
+
+ /* Text colors */
+ --color-text-primary: #f8fafc;
+ --color-text-secondary: #cbd5e1;
+ --color-text-muted: #64748b;
+
+ /* Background colors - Deep dark */
+ --color-background-page: #0c0a1d;
+ --color-background-card: #1a1833;
+ --color-background-card-hover: #252345;
+
+ /* Border colors */
+ --color-border: rgba(99, 102, 241, 0.2);
+ --color-border-hover: rgba(99, 102, 241, 0.4);
+}
+
+/* Light mode support */
+@media (prefers-color-scheme: light) {
+ :root {
+ --color-primary: #4f46e5;
+ --color-primary-hover: #4338ca;
+ --color-primary-glow: rgba(79, 70, 229, 0.2);
+
+ --color-text-primary: #1e1b4b;
+ --color-text-secondary: #4338ca;
+ --color-text-muted: #6366f1;
+
+ --color-background-page: #fafafa;
+ --color-background-card: #ffffff;
+ --color-background-card-hover: #f5f3ff;
+
+ --color-border: #e0e7ff;
+ --color-border-hover: #c7d2fe;
+ }
+}
+
+/* Force dark mode class */
+.dark {
+ --color-primary: #6366f1;
+ --color-primary-hover: #818cf8;
+ --color-primary-glow: rgba(99, 102, 241, 0.3);
+
+ --color-text-primary: #f8fafc;
+ --color-text-secondary: #cbd5e1;
+ --color-text-muted: #64748b;
+
+ --color-background-page: #0c0a1d;
+ --color-background-card: #1a1833;
+ --color-background-card-hover: #252345;
+
+ --color-border: rgba(99, 102, 241, 0.2);
+ --color-border-hover: rgba(99, 102, 241, 0.4);
+}
+
+/* Force light mode class */
+.light {
+ --color-primary: #4f46e5;
+ --color-primary-hover: #4338ca;
+ --color-primary-glow: rgba(79, 70, 229, 0.2);
+
+ --color-text-primary: #1e1b4b;
+ --color-text-secondary: #4338ca;
+ --color-text-muted: #6366f1;
+
+ --color-background-page: #fafafa;
+ --color-background-card: #ffffff;
+ --color-background-card-hover: #f5f3ff;
+
+ --color-border: #e0e7ff;
+ --color-border-hover: #c7d2fe;
+}
diff --git a/packages/shared-landing-ui/src/themes/zitare.css b/packages/shared-landing-ui/src/themes/zitare.css
new file mode 100644
index 000000000..101141fa0
--- /dev/null
+++ b/packages/shared-landing-ui/src/themes/zitare.css
@@ -0,0 +1,80 @@
+/**
+ * Zitare Theme - Green/Teal
+ * Daily inspiration quotes app
+ */
+:root {
+ /* Primary colors - Teal/Emerald */
+ --color-primary: #14b8a6;
+ --color-primary-hover: #0d9488;
+ --color-primary-glow: rgba(20, 184, 166, 0.3);
+
+ /* Text colors */
+ --color-text-primary: #f8fafc;
+ --color-text-secondary: #cbd5e1;
+ --color-text-muted: #64748b;
+
+ /* Background colors - Dark with teal tint */
+ --color-background-page: #0a1a18;
+ --color-background-card: #132d2a;
+ --color-background-card-hover: #1a3f3b;
+
+ /* Border colors */
+ --color-border: rgba(20, 184, 166, 0.2);
+ --color-border-hover: rgba(20, 184, 166, 0.4);
+}
+
+/* Light mode support */
+@media (prefers-color-scheme: light) {
+ :root {
+ --color-primary: #0d9488;
+ --color-primary-hover: #0f766e;
+ --color-primary-glow: rgba(13, 148, 136, 0.2);
+
+ --color-text-primary: #134e4a;
+ --color-text-secondary: #0f766e;
+ --color-text-muted: #14b8a6;
+
+ --color-background-page: #f0fdfa;
+ --color-background-card: #ffffff;
+ --color-background-card-hover: #ccfbf1;
+
+ --color-border: #99f6e4;
+ --color-border-hover: #5eead4;
+ }
+}
+
+/* Force dark mode class */
+.dark {
+ --color-primary: #14b8a6;
+ --color-primary-hover: #2dd4bf;
+ --color-primary-glow: rgba(20, 184, 166, 0.3);
+
+ --color-text-primary: #f8fafc;
+ --color-text-secondary: #cbd5e1;
+ --color-text-muted: #64748b;
+
+ --color-background-page: #0a1a18;
+ --color-background-card: #132d2a;
+ --color-background-card-hover: #1a3f3b;
+
+ --color-border: rgba(20, 184, 166, 0.2);
+ --color-border-hover: rgba(20, 184, 166, 0.4);
+}
+
+/* Force light mode class */
+.light {
+ --color-primary: #0d9488;
+ --color-primary-hover: #0f766e;
+ --color-primary-glow: rgba(13, 148, 136, 0.2);
+
+ --color-text-primary: #134e4a;
+ --color-text-secondary: #0f766e;
+ --color-text-muted: #14b8a6;
+
+ --color-background-page: #f0fdfa;
+ --color-background-card: #ffffff;
+ --color-background-card-hover: #ccfbf1;
+
+ --color-border: #99f6e4;
+ --color-border-hover: #5eead4;
+}
+
+
+
+ {backText}
+
+
+
+
+
+
+
+
+ {title}
+{lastUpdatedText}: {lastUpdated.toLocaleDateString()}
+
+
+
+
+