---
description: 'Use when building or modifying the public-facing landing page for The Collective Hub. Covers SSR-only rendering, section structure, CSS custom properties for theming, theme presets, and dynamic branding from settings.'
applyTo: 'src/routes/+page.svelte', 'src/routes/+layout.svelte', 'src/routes/layout.css', 'src/routes/+page.server.ts'
---
# Public Site & Theming
## Architecture
The public site is a **single SSR-only landing page**. There is no client-side routing beyond the initial page load, no SPA navigation, and no JavaScript-driven content switching.
```
Single page structure:
Hero → About → Events → Social Links → Footer
```
## Section Structure
The page is composed of clearly separated sections:
```svelte
```
Each section is a Svelte component in `src/lib/components/` (for the public site) or defined locally in the route if it's too specific.
## Data Loading
The homepage data is loaded in `+page.server.ts`:
```ts
// src/routes/+page.server.ts
import type { PageServerLoad } from './$types';
export const load: PageServerLoad = async ({ locals }) => {
const settings = locals.siteSettings;
// Optionally load events, nav links, etc.
// const events = await loadEvents(locals.site.id);
return {
settings,
// events,
};
};
```
## Theme System
The site uses **CSS custom properties** generated from the site's theme settings. These are applied to the HTML element and cascade through all components.
### Theme Settings Shape
```typescript
interface ThemeSettings {
preset: 'dark' | 'light' | 'custom';
accentColor: string; // e.g., "#e63946"
backgroundColor: string; // e.g., "#1a1a2e"
textColor: string; // e.g., "#eaeaea"
}
```
### Applying Theme in Layout
In [`src/routes/+layout.svelte`](src/routes/+layout.svelte) or the root layout, apply theme as inline styles:
```svelte
{/if}
```
### Favicon
Set in [`src/app.html`](src/app.html) via the loaded settings:
```html
```
## Section Components
### Hero Section
```svelte
{homepage.heroTitle || branding.siteName}
{homepage.heroSubtitle || branding.tagline}
{#if homepage.primaryButtonLink}
{homepage.primaryButtonText || 'Join Us'}
{/if}
```
### About Section
Displays the `homepage.aboutText` content. Supports markdown rendering for basic formatting.
### Events Section
Shows upcoming events if `homepage.showNextEvent` or `homepage.showSchedule` is enabled. Events are loaded server-side and passed through `data`.
### Social Links Section
Renders social platform links from the `socialLinks` table with platform-appropriate icons.
## CSS Custom Properties Reference
```css
/* Defined at runtime via inline styles on the root element */
:root {
--accent: #e63946; /* Primary accent color */
--bg: #1a1a2e; /* Page background */
--text: #eaeaea; /* Text color */
--accent-hover: #ff6b6b; /* Optional: accent hover state */
}
```
Use these in components instead of hardcoding colors:
```css
/* ✅ */
.button {
background-color: var(--accent);
color: white;
}
/* ❌ */
.button {
background-color: #e63946;
color: white;
}
```
## Rendering Rules
1. **SSR-only**: All content is rendered on the server. No client-side data fetching for page content.
2. **No JavaScript required**: The public page should be fully functional without JS (links, text, images).
3. **Theme-first**: Always use CSS custom properties for colors. Never hardcode theme colors.
4. **Responsive**: The single layout must work on mobile and desktop.
5. **Accessible**: Proper heading hierarchy, alt text on images, sufficient color contrast.