add media page

frontend/rabbi_gerzi/src/views/MediaPage.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import SiteHeader from '@/components/SiteHeader.vue'
+</script>
+
+<template>
+  <div class="media-page">
+    <SiteHeader />
+    <main class="media-page__main" data-cy="media-page">
+      <section class="media-page__hero">
+        <p class="media-page__eyebrow">Rabbi Yehoshua Gerzi</p>
+        <h1 class="media-page__heading">Torah Media</h1>
+        <p class="media-page__intro">
+          Explore Rabbi Gerzi's Torah videos, audio teachings, and written resources.
+        </p>
+      </section>
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.media-page {
+  min-height: 100vh;
+  background: var(--color-cream);
+}
+
+.media-page__main {
+  padding: 5rem 2rem;
+}
+
+.media-page__hero {
+  max-width: 760px;
+  margin: 0 auto;
+  padding: 4rem 3rem;
+  background: var(--color-white);
+  border: 1px solid var(--color-border);
+  border-radius: 14px;
+  text-align: center;
+}
+
+.media-page__eyebrow {
+  margin: 0 0 1rem;
+  color: var(--color-olive);
+  font-size: 0.9rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.media-page__heading {
+  margin: 0;
+  color: var(--color-slate);
+  font-family: var(--font-serif);
+  font-size: clamp(2.25rem, 5vw, 4rem);
+  font-weight: 400;
+  line-height: 1.1;
+}
+
+.media-page__intro {
+  max-width: 34rem;
+  margin: 1.5rem auto 0;
+  color: var(--color-text-muted);
+  font-family: var(--font-serif);
+  font-size: 1.1rem;
+  line-height: 1.7;
+}
+
+@media (max-width: 768px) {
+  .media-page__main {
+    padding: 3rem 1rem;
+  }
+
+  .media-page__hero {
+    padding: 3rem 1.5rem;
+  }
+}
+</style>