Add theme library with 8 industry-specific color schemes
Themes: - Purple Gradient (General/Tech) - Midnight Royal (Luxury) - Clean Mint (Health/Wellness) - Slate Modern (Corporate/Tech) - Modern Estate (Real Estate) - Impact Orange (Non-Profit) - Solar Flux (Solar/Energy) - Arctic Flow (HVAC) Each theme includes header, footer, and primary color. Supports custom brand name replacement.
This commit is contained in:
cawcenter
131
src/lib/themes.ts
Normal file
131
src/lib/themes.ts
Normal file
@@ -0,0 +1,131 @@
|
||||
/**
|
||||
* Site Theme Library
|
||||
*
|
||||
* Pre-built color schemes and header/footer templates for different industries.
|
||||
* Use these when creating new sites via API.
|
||||
*/
|
||||
|
||||
export const SITE_THEMES = {
|
||||
// Purple Gradient (Default)
|
||||
purple_gradient: {
|
||||
name: "Purple Gradient",
|
||||
industry: "General / Tech",
|
||||
header: `<nav style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 1rem 0; box-shadow: 0 2px 10px rgba(0,0,0,0.1);"><div style="max-width: 800px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 20px;"><a href="/" style="color: white; font-weight: 700; font-size: 1.25rem; text-decoration: none;">Aesthetic Help</a><div style="display: flex; gap: 2rem;"><a href="/" style="color: white; text-decoration: none; font-weight: 500;">Home</a><a href="/about" style="color: white; text-decoration: none; font-weight: 500;">About</a><a href="/services" style="color: white; text-decoration: none; font-weight: 500;">Services</a><a href="/contact" style="color: white; text-decoration: none; font-weight: 500;">Contact</a></div></div></nav>`,
|
||||
footer: `<footer style="background: #f8f9fa; padding: 3rem 20px 2rem; margin-top: 4rem; border-top: 3px solid #667eea;"><div style="max-width: 800px; margin: 0 auto; text-align: center;"><div style="margin-bottom: 1.5rem;"><a href="/" style="color: #667eea; text-decoration: none; margin: 0 1rem;">Home</a><a href="/privacy" style="color: #667eea; text-decoration: none; margin: 0 1rem;">Privacy</a><a href="/terms" style="color: #667eea; text-decoration: none; margin: 0 1rem;">Terms</a></div><p style="color: #666; margin: 0; font-size: 0.875rem;">© 2025 Aesthetic Help. All rights reserved.</p></div></footer>`,
|
||||
primary_color: "#667eea"
|
||||
},
|
||||
|
||||
// Midnight Royal (Luxury)
|
||||
midnight_royal: {
|
||||
name: "Midnight Royal",
|
||||
industry: "Luxury / High-End",
|
||||
header: `<nav style="background: linear-gradient(135deg, #1a2a6c 0%, #b21f1f 100%); padding: 1rem 0; box-shadow: 0 4px 15px rgba(0,0,0,0.2);"><div style="max-width: 800px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 20px;"><a href="/" style="color: white; font-weight: 700; font-size: 1.25rem; text-decoration: none;">Luxury Aesthetics</a><div style="display: flex; gap: 2rem;"><a href="/" style="color: white; text-decoration: none;">Home</a><a href="/about" style="color: white; text-decoration: none;">About</a><a href="/services" style="color: white; text-decoration: none;">Services</a></div></div></nav>`,
|
||||
footer: `<footer style="background: #0f0f0f; color: white; padding: 3rem 20px; border-top: 5px solid #b21f1f;"><div style="max-width: 800px; margin: 0 auto; text-align: center;"><p>© 2025 Luxury Aesthetics. All Rights Reserved.</p></div></footer>`,
|
||||
primary_color: "#1a2a6c"
|
||||
},
|
||||
|
||||
// Clean Mint (Trust/Health)
|
||||
clean_mint: {
|
||||
name: "Clean Mint",
|
||||
industry: "Health / Wellness",
|
||||
header: `<nav style="background: linear-gradient(135deg, #00b09b 0%, #96c93d 100%); padding: 1rem 0;"><div style="max-width: 800px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 20px;"><a href="/" style="color: white; font-weight: 800; text-decoration: none;">Health Solutions</a><div style="display: flex; gap: 2rem;"><a href="/" style="color: white; text-decoration: none;">Home</a><a href="/about" style="color: white; text-decoration: none;">About</a></div></div></nav>`,
|
||||
footer: `<footer style="background: #f0fdf4; padding: 2rem; border-top: 2px solid #00b09b; text-align: center;"><p style="color: #166534;">© 2025 Health Solutions. All Rights Reserved.</p></footer>`,
|
||||
primary_color: "#00b09b"
|
||||
},
|
||||
|
||||
// Slate Modern (Corporate/Tech)
|
||||
slate_modern: {
|
||||
name: "Slate Modern",
|
||||
industry: "Corporate / Tech",
|
||||
header: `<nav style="background: #2c3e50; padding: 1.5rem 0; border-bottom: 4px solid #3498db;"><div style="max-width: 800px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 20px;"><a href="/" style="color: #3498db; font-weight: 900; text-transform: uppercase; text-decoration: none;">Tech Solutions</a><div style="display: flex; gap: 2rem;"><a href="/" style="color: white; text-decoration: none;">Home</a><a href="/about" style="color: white; text-decoration: none;">About</a></div></div></nav>`,
|
||||
footer: `<footer style="background: #ecf0f1; padding: 4rem 20px; text-align: center; color: #2c3e50;"><p>Powered by Valhalla God Mode</p></footer>`,
|
||||
primary_color: "#3498db"
|
||||
},
|
||||
|
||||
// Modern Estate (Real Estate)
|
||||
modern_estate: {
|
||||
name: "Modern Estate",
|
||||
industry: "Real Estate",
|
||||
header: `<nav style="background: #1e293b; padding: 1.25rem 0; border-bottom: 3px solid #e2e8f0;"><div style="max-width: 800px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 20px;"><a href="/" style="color: white; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; text-decoration: none;">Elite Properties</a><div style="display: flex; gap: 1.5rem;"><a href="/listings" style="color: #cbd5e1; text-decoration: none;">Listings</a><a href="/contact" style="color: #cbd5e1; text-decoration: none;">Contact</a></div></div></nav>`,
|
||||
footer: `<footer style="background: #0f172a; color: #94a3b8; padding: 4rem 20px; text-align: center;"><p>© 2025 Modern Estate Group. Licensed Brokerage.</p></footer>`,
|
||||
primary_color: "#1e293b"
|
||||
},
|
||||
|
||||
// Impact Orange (Non-Profit)
|
||||
impact_orange: {
|
||||
name: "Impact Orange",
|
||||
industry: "Non-Profit / Charity",
|
||||
header: `<nav style="background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); padding: 1rem 0; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);"><div style="max-width: 800px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 20px;"><a href="/" style="color: white; font-weight: 800; font-size: 1.5rem; text-decoration: none;">United Cause</a><a href="/donate" style="background: white; color: #ea580c; padding: 0.5rem 1.25rem; border-radius: 9999px; font-weight: 700; text-decoration: none;">Donate Now</a></div></nav>`,
|
||||
footer: `<footer style="background: #fff7ed; padding: 3rem 20px; border-top: 4px solid #f97316; text-align: center;"><p style="color: #9a3412;">Helping families since 1998. Tax-exempt 501(c)(3).</p></footer>`,
|
||||
primary_color: "#f97316"
|
||||
},
|
||||
|
||||
// Solar Flux (Solar/Energy)
|
||||
solar_flux: {
|
||||
name: "Solar Flux",
|
||||
industry: "Solar / Energy",
|
||||
header: `<nav style="background: linear-gradient(90deg, #facc15 0%, #3b82f6 100%); padding: 1rem 0;"><div style="max-width: 800px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 20px;"><a href="/" style="color: #1e3a8a; font-weight: 900; font-size: 1.25rem; text-decoration: none;">SolarMax Systems</a><div style="display: flex; gap: 1.5rem;"><a href="/savings" style="color: #1e3a8a; font-weight: 600; text-decoration: none;">Calculator</a><a href="/contact" style="color: #1e3a8a; font-weight: 600; text-decoration: none;">Contact</a></div></div></nav>`,
|
||||
footer: `<footer style="background: #1e3a8a; color: white; padding: 3rem 20px; text-align: center;"><div style="margin-bottom: 1rem;">⭐ Over 5,000 Panels Installed</div><p>© 2025 SolarMax Energy</p></footer>`,
|
||||
primary_color: "#3b82f6"
|
||||
},
|
||||
|
||||
// Arctic Flow (HVAC)
|
||||
arctic_flow: {
|
||||
name: "Arctic Flow",
|
||||
industry: "HVAC / Mechanical",
|
||||
header: `<nav style="background: white; padding: 1rem 0; border-bottom: 4px solid #0ea5e9;"><div style="max-width: 800px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 0 20px;"><a href="/" style="color: #0369a1; font-weight: 800; text-decoration: none;"><span style="color: #ef4444;">Hot</span> & <span style="color: #0ea5e9;">Cold</span> Pros</a><div style="color: #0369a1; font-weight: 700;">📞 24/7 Dispatch</div></div></nav>`,
|
||||
footer: `<footer style="background: #f1f5f9; padding: 3rem 20px; text-align: center; border-top: 1px solid #e2e8f0;"><p style="color: #475569;">Insured, Licensed, and Ready. All Brands Serviced.</p></footer>`,
|
||||
primary_color: "#0ea5e9"
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Get theme config for a site
|
||||
*/
|
||||
export function getTheme(themeName: keyof typeof SITE_THEMES) {
|
||||
return SITE_THEMES[themeName];
|
||||
}
|
||||
|
||||
/**
|
||||
* List all available themes
|
||||
*/
|
||||
export function listThemes() {
|
||||
return Object.entries(SITE_THEMES).map(([key, theme]) => ({
|
||||
key,
|
||||
name: theme.name,
|
||||
industry: theme.industry,
|
||||
primaryColor: theme.primary_color
|
||||
}));
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate site config JSON for a theme
|
||||
*/
|
||||
export function generateSiteConfig(themeName: keyof typeof SITE_THEMES, brandName?: string) {
|
||||
const theme = SITE_THEMES[themeName];
|
||||
|
||||
// Replace default brand name if provided
|
||||
let header = theme.header;
|
||||
let footer = theme.footer;
|
||||
|
||||
if (brandName) {
|
||||
// Replace common brand names in templates
|
||||
const brandNames = [
|
||||
'Aesthetic Help', 'Luxury Aesthetics', 'Health Solutions',
|
||||
'Tech Solutions', 'Elite Properties', 'United Cause',
|
||||
'SolarMax Systems', 'Hot & Cold Pros'
|
||||
];
|
||||
|
||||
brandNames.forEach(defaultName => {
|
||||
header = header.replace(new RegExp(defaultName, 'g'), brandName);
|
||||
footer = footer.replace(new RegExp(defaultName, 'g'), brandName);
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
header,
|
||||
footer,
|
||||
primary_color: theme.primary_color,
|
||||
custom_css: ''
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user