feature/services-pages (#7)

Reviewed-on: #7 Co-authored-by: mifi <badmf@mifi.dev> Co-committed-by: mifi <badmf@mifi.dev>
2026-03-10 00:51:18 +00:00
parent 66640fa535
commit 7012f0fdd2
98 changed files with 4119 additions and 1189 deletions
--- a/src/routes/terms-of-service/+page.svelte
+++ b/src/routes/terms-of-service/+page.svelte
@@ -0,0 +1,139 @@
+<script lang="ts">
+    import Navigation from '$lib/components/Navigation.svelte';
+    import { termsOfService } from '$lib/data/terms-of-service';
+
+    const navItems = [{ label: 'Home', href: '/', umamiEventLabel: 'home' }];
+</script>
+
+<Navigation items={navItems} page="terms-of-service" />
+
+<main id="main" class="legal-page">
+    <div class="container narrow">
+        <header id="header" class="legal-header">
+            <h1>{termsOfService.title}</h1>
+            <p class="legal-last-updated">Last updated: {termsOfService.lastUpdated}</p>
+        </header>
+
+        <div class="legal-content">
+            {#each termsOfService.intro as para}
+                <p>{para}</p>
+            {/each}
+
+            {#each termsOfService.sections as section (section.id)}
+                <section
+                    id={section.id}
+                    class="legal-section"
+                    aria-labelledby={`${section.id}-heading`}
+                >
+                    <h2 id={`${section.id}-heading`}>{section.heading}</h2>
+                    {#each section.body as para}
+                        <p>
+                            {#if section.id === 'contact' && para === 'legal@mifi.ventures'}
+                                <a href="mailto:legal@mifi.ventures"
+                                    >legal@mifi.ventures</a
+                                >
+                            {:else if section.id === 'contact' && para === 'https://mifi.ventures'}
+                                <a href="https://mifi.ventures" rel="noopener noreferrer"
+                                    >https://mifi.ventures</a
+                                >
+                            {:else}
+                                {para}
+                            {/if}
+                        </p>
+                    {/each}
+                    {#if section.list}
+                        <ul>
+                            {#each section.list as item}
+                                <li>{item}</li>
+                            {/each}
+                        </ul>
+                    {/if}
+                </section>
+            {/each}
+        </div>
+
+        <nav class="legal-cross-links" aria-label="Related legal pages">
+            <a href="/privacy-policy">Privacy Policy</a>
+        </nav>
+    </div>
+</main>
+
+<style>
+    .legal-page {
+        padding: var(--space-xxl) 0;
+        background-color: var(--color-bg);
+    }
+
+    .narrow {
+        max-width: var(--max-narrow-width);
+        margin: 0 auto;
+        padding: 0 var(--space-md);
+    }
+
+    .legal-header {
+        margin-bottom: var(--space-xl);
+    }
+
+    .legal-header h1 {
+        font-family: var(--font-family-heading);
+        font-size: var(--font-size-xxl);
+        font-weight: var(--font-weight-bold);
+        line-height: var(--line-height-heading);
+        color: var(--color-text);
+        margin: 0 0 var(--space-sm) 0;
+    }
+
+    .legal-last-updated {
+        font-size: var(--font-size-medium);
+        color: var(--color-text-tertiary);
+        margin: 0;
+    }
+
+    .legal-content {
+        font-size: var(--font-size-base);
+        line-height: var(--line-height-base);
+        color: var(--color-text);
+    }
+
+    .legal-content p {
+        margin: 0 0 var(--space-md) 0;
+    }
+
+    .legal-section {
+        margin-bottom: var(--space-xl);
+    }
+
+    .legal-section h2 {
+        font-family: var(--font-family-heading);
+        font-size: var(--font-size-xl);
+        font-weight: var(--font-weight-semibold);
+        line-height: var(--line-height-tight);
+        color: var(--color-text);
+        margin: 0 0 var(--space-md) 0;
+    }
+
+    .legal-section ul {
+        margin: 0 0 var(--space-md) 0;
+        padding-left: var(--space-lg);
+    }
+
+    .legal-section li {
+        margin-bottom: var(--space-xs);
+    }
+
+    .legal-cross-links {
+        margin-top: var(--space-xxl);
+        padding-top: var(--space-xl);
+        border-top: 1px solid var(--color-border);
+    }
+
+    .legal-cross-links a {
+        color: var(--color-primary);
+        text-decoration: underline;
+        text-underline-offset: 0.2em;
+    }
+
+    .legal-cross-links a:hover {
+        color: var(--color-primary-hover);
+    }
+</style>