gw-svelte/src/lib/components/LegalPage.svelte

<script lang="ts">
  import type { LegalPageBlock, LegalPageContent } from '$lib/types';

  export let pageContent: LegalPageContent;

  function isParagraph(block: LegalPageBlock): boolean {
    return block.type === 'paragraph';
  }

  function getParagraphContent(block: LegalPageBlock): string {
    return typeof block.content === 'string' ? block.content : block.content.join(' ');
  }

  function getListItems(block: LegalPageBlock): string[] {
    return Array.isArray(block.content) ? block.content : [block.content];
  }

  function isSubItem(item: string): boolean {
    return /^\([a-z]\)/.test(item.trimStart());
  }
</script>

<main class="legal-page">
  <section class="legal-hero">
    <div class="legal-inner">
      <h1>{pageContent.title}</h1>
    </div>
  </section>

  <section class="legal-body">
    <div class="legal-inner">
      <div class="legal-card">
        {#each pageContent.sections as section}
          <section class="legal-section">
            <h2>{section.title}</h2>

            {#each section.blocks as block}
              {#if isParagraph(block)}
                <p>{getParagraphContent(block)}</p>
              {:else}
                <ul class="legal-list">
                  {#each getListItems(block) as item}
                    <li class:sub-item={isSubItem(item)}>{item}</li>
                  {/each}
                </ul>
              {/if}
            {/each}
          </section>
        {/each}
      </div>
    </div>
  </section>
</main>

<style>
  .legal-page {
    background: var(--off-white);
  }

  .legal-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 50px;
  }

  .legal-hero {
    padding: 72px 0 28px;
  }

  .legal-hero h1 {
    margin: 0;
    text-align: center;
    font-family: var(--font-head);
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: #000;
  }

  .legal-body {
    padding: 0 0 88px;
  }

  .legal-card {
    padding: 40px 44px;
    border-radius: 28px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(17, 20, 24, 0.05);
  }

  .legal-section {
    padding: 0;
  }

  .legal-section + .legal-section {
    margin-top: 34px;
    padding-top: 34px;
    border-top: 1px solid rgba(17, 20, 24, 0.08);
  }

  .legal-section h2 {
    margin: 0 0 16px;
    padding-left: 14px;
    border-left: 3px solid var(--green);
    font-family: var(--font-head);
    font-size: clamp(14px, 1.4vw, 17px);
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: #000;
  }

  .legal-section p {
    margin: 16px 0 0;
    color: #34363a;
    font-size: 16px;
    line-height: 1.8;
  }

  .legal-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .legal-list + .legal-list,
  .legal-section p + .legal-list,
  .legal-list + p {
    margin-top: 14px;
  }

  .legal-list li {
    position: relative;
    padding-left: 18px;
    color: #34363a;
    font-size: 16px;
    line-height: 1.8;
  }

  .legal-list li::before {
    content: '–';
    position: absolute;
    left: 0;
    color: var(--green);
    font-size: 14px;
    line-height: 1.9;
  }

  .legal-list li.sub-item {
    padding-left: 34px;
  }

  .legal-list li + li {
    margin-top: 10px;
  }

  @media (max-width: 768px) {
    .legal-inner {
      padding: 0 24px;
    }

    .legal-hero {
      padding: 56px 0 20px;
    }

    .legal-hero h1 {
      font-size: 34px;
    }

    .legal-body {
      padding: 0 0 64px;
    }

    .legal-card {
      padding: 28px 22px;
      border-radius: 28px;
    }

    .legal-section + .legal-section {
      margin-top: 26px;
      padding-top: 26px;
    }

    .legal-section h2 {
      font-size: 14px;
    }
  }
</style>