новый дизайн

resources/js/Components/LegalDocument.vue

@@ -0,0 +1,45 @@
+<script setup>
+defineProps({
+    eyebrow: { type: String, required: true },
+    title: { type: String, required: true },
+    description: { type: String, required: true },
+    effectiveDate: { type: String, required: true },
+    sections: { type: Array, required: true },
+});
+</script>
+
+<template>
+    <section class="legal-page wrap">
+        <header class="legal-hero">
+            <span class="eyebrow">{{ eyebrow }}</span>
+            <h1 class="h-display">{{ title }}</h1>
+            <p class="lead">{{ description }}</p>
+            <div class="legal-effective">
+                <span>Дата вступления в силу</span>
+                <strong>{{ effectiveDate }}</strong>
+            </div>
+        </header>
+
+        <div class="legal-layout">
+            <aside class="legal-toc">
+                <span>Содержание</span>
+                <a v-for="(section, index) in sections" :key="section.id" :href="`#${section.id}`">
+                    <small>{{ String(index + 1).padStart(2, '0') }}</small>
+                    {{ section.title }}
+                </a>
+            </aside>
+
+            <article class="portal-card legal-document corners">
+                <section v-for="(section, index) in sections" :id="section.id" :key="section.id">
+                    <span class="legal-section-number">{{ String(index + 1).padStart(2, '0') }}</span>
+                    <h2 class="h-serif">{{ section.title }}</h2>
+                    <p v-for="paragraph in section.paragraphs" :key="paragraph">{{ paragraph }}</p>
+                    <ul v-if="section.items">
+                        <li v-for="item in section.items" :key="item">{{ item }}</li>
+                    </ul>
+                    <p v-if="section.note" class="legal-note">{{ section.note }}</p>
+                </section>
+            </article>
+        </div>
+    </section>
+</template>