Developer Docs

Informational Pages

All platform-facing informational pages linked from the footer, user menu, and navigation. These are static content pages that establish the platform's brand, legal compliance, and support infrastructure.

All 17 footer destination routes are implemented.

Route Page Sections
/about About Mallnline Hero, Mission, Features, Stats, Values, Architecture, CTA
/discover Discover Search hero, Curated collections, Verticals browser, Search CTA
/blog Platform Blog Hero, Featured posts, Category filters, Post archive grid
/careers Careers Job listings, company culture, open positions
/press Press / Newsroom Press releases timeline, Media coverage quotes, Assets grid
/investors Investor Relations Key metrics banner, Competitive advantages, Milestones timeline
/help Help Center Support categories, FAQ links, contact options
/contact Contact Us Contact form, support channels, location info
/faq FAQ Categorized question-answer accordion
/shipping Shipping Info Shipping policies, delivery estimates, carrier info
/returns Returns & Refunds Return policies, refund process, exceptions
/privacy Privacy Policy Data handling, GDPR compliance, user rights
/terms Terms of Service Platform terms, user obligations, liability
/cookies Cookie Policy Cookie usage, categories, opt-out instructions
/accessibility Accessibility WCAG 2.1 statement, feedback channels, assistive tech support
/licenses Open Source Licenses Frontend, backend, and infrastructure dependency attributions

Architecture

Design Patterns

All informational pages follow consistent patterns:

  • Hero Section: Badge icon + headline with gradient accent text + subtitle
  • Content Sections: Card grids, timelines, or text blocks with data-reveal scroll animations
  • CTA Footer: Dark gradient background with call-to-action buttons
  • Dark Mode: Full support via :global(.dark-mode) selectors and $mall tokens
  • Responsive: Breakpoints at 768px and 480px

Scroll Reveal Animation

Pages use IntersectionObserver for scroll-triggered reveal animations:

<section data-reveal="hero" class:revealed={isRevealed('hero')}>

[data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity 0.6s ease,
		transform 0.6s ease;
}
[data-reveal].revealed {
	opacity: 1;
	transform: translateY(0);
}

CSS Token Usage

All pages use $mall design tokens — no hardcoded colors:

background: var(--mall-light-bg);
color: var(--mall-light-text);
border-radius: var(--mall-radius-xl);
padding: var(--mall-space-lg);
transition: all var(--mall-transition-base);

Blog Data Module

The platform blog uses a typed data module at src/lib/data/blogPosts.ts:

import { z } from 'zod';

export const BlogPostSchema = z.object({
	slug: z.string(),
	title: z.string(),
	excerpt: z.string(),
	category: z.enum(['Product', 'Engineering', 'Company', 'Community']),
	author: z.string(),
	date: z.string(),
	readTime: z.number(),
	featured: z.boolean()
});

Utility Functions

Function Purpose
getBlogCategories() Returns unique category list
getFeaturedPosts() Returns posts with featured: true
getPostsByCategory() Filters posts by category string
formatBlogDate() ISO date → human-readable format
getCategoryGradient() Category → CSS gradient string

Testing

Test File Type Tests Coverage
tests/blogPosts.test.ts Unit 14 Schema, filters, formatting
e2e/platformBlog.test.ts E2E 6 Render, filters, SEO, cards
e2e/ghost-routes.test.ts E2E N/A Route accessibility checks

File Reference

File Purpose
src/routes/about/+page.svelte About page (7 sections)
src/routes/blog/+page.svelte Blog listing with category filters
src/routes/discover/+page.svelte Curated browsing experience
src/routes/press/+page.svelte Newsroom with press releases
src/routes/investors/+page.svelte Investor relations & metrics
src/routes/careers/+page.svelte Job listings & culture
src/routes/help/+page.svelte Help center categories
src/routes/contact/+page.svelte Contact form & channels
src/routes/faq/+page.svelte FAQ accordion
src/routes/shipping/+page.svelte Shipping policies
src/routes/returns/+page.svelte Returns & refund policy
src/routes/privacy/+page.svelte Privacy policy
src/routes/terms/+page.svelte Terms of service
src/routes/cookies/+page.svelte Cookie policy
src/routes/accessibility/+page.svelte WCAG 2.1 statement
src/routes/licenses/+page.svelte OSS attributions
src/lib/data/blogPosts.ts Blog post data & utilities
src/routes/lobby/SoleContent.svelte Footer with all page links