srcdev-nuxt-components 9.3.6 → 9.3.8

package/app/pages/ui/scroll-reveal-image.vue

@@ -1,483 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <!-- ── Page header ──────────────────────────────────────────────── -->
-        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-48']">
-          <h1 class="page-heading-1">ScrollRevealImage / ScrollRevealFrame</h1>
-          <p class="page-body-normal">
-            A pure-CSS parallax reveal. No scroll listeners, no JS animation — driven entirely by
-            <code>animation-timeline: view()</code>
-            . Scroll down to see each variant in action.
-          </p>
-          <p class="page-body-normal">
-            <code>ScrollRevealFrame</code>
-            is the generic primitive — it accepts any slot content (images, grids, video).
-            <code>ScrollRevealImage</code>
-            is a convenience wrapper that adds
-            <code>NuxtImg</code>
-            optimisation and a horizontal focal-point prop.
-          </p>
-        </PageRow>
-
-        <!-- ── Interactive demo ──────────────────────────────────────────── -->
-        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-48']">
-          <h2 class="page-heading-2 mbe-8">Interactive demo</h2>
-          <p class="page-body-normal mbe-16">Adjust the props then scroll through the image on the right.</p>
-          <div class="demo-controls">
-            <p class="demo-controls__heading">Props</p>
-            <div class="demo-controls__fields">
-              <MultipleRadiobuttons
-                v-model="frameHeight"
-                v-model:field-data="frameHeightData"
-                name="frameHeight"
-                legend="frameHeight"
-                label="frameHeight"
-                error-message=""
-                :is-button="true"
-                :is-pill="true"
-                :field-has-error="false"
-                options-layout="inline"
-              />
-              <MultipleRadiobuttons
-                v-model="parallaxOffset"
-                v-model:field-data="parallaxOffsetData"
-                name="parallaxOffset"
-                legend="parallaxOffset"
-                label="parallaxOffset"
-                error-message=""
-                :is-button="true"
-                :is-pill="true"
-                :field-has-error="false"
-                options-layout="inline"
-              />
-              <MultipleRadiobuttons
-                v-model="focalX"
-                v-model:field-data="focalXData"
-                name="focalX"
-                legend="focalX"
-                label="focalX"
-                error-message=""
-                :is-button="true"
-                :is-pill="true"
-                :field-has-error="false"
-                options-layout="inline"
-              />
-              <MultipleRadiobuttons
-                v-model="radius"
-                v-model:field-data="radiusData"
-                name="radius"
-                legend="radius"
-                label="radius"
-                error-message=""
-                :is-button="true"
-                :is-pill="true"
-                :field-has-error="false"
-                options-layout="inline"
-              />
-            </div>
-          </div>
-        </PageRow>
-
-        <!-- ── Variants ──────────────────────────────────────────────────── -->
-        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-24']">
-          <h2 class="page-heading-2">Variants</h2>
-        </PageRow>
-
-        <!-- Default -->
-        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-32']">
-          <div class="sri-demo-row">
-            <div class="sri-demo-row__info">
-              <h3 class="page-heading-3 mbe-8">Default</h3>
-              <p class="page-body-normal mbe-12">
-                All props at their default values. A portrait image with a generous parallax offset panning from top to
-                bottom as the frame crosses the viewport.
-              </p>
-              <dl class="sri-props">
-                <dt>frameHeight</dt>
-                <dd>540px</dd>
-                <dt>parallaxOffset</dt>
-                <dd>36rem</dd>
-                <dt>focalX</dt>
-                <dd>50%</dd>
-              </dl>
-            </div>
-            <ScrollRevealImage
-              src="/images/page/hero/hero-blonde.jpg"
-              alt="Blonde hair portrait"
-              :img-width="1280"
-              :img-height="1920"
-            />
-          </div>
-        </PageRow>
-
-        <!-- Short frame / banner -->
-        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-32']">
-          <div class="sri-demo-row">
-            <div class="sri-demo-row__info">
-              <h3 class="page-heading-3 mbe-8">Short frame — landscape image</h3>
-              <p class="page-body-normal mbe-12">
-                A shallow frame with a wide banner image. The reduced
-                <code>parallaxOffset</code>
-                is proportional to the shorter frame height.
-              </p>
-              <dl class="sri-props">
-                <dt>frameHeight</dt>
-                <dd>320px</dd>
-                <dt>parallaxOffset</dt>
-                <dd>24rem</dd>
-              </dl>
-            </div>
-            <ScrollRevealImage
-              src="/images/banners/banner-mid-brown.webp"
-              alt="Mid brown hair banner"
-              :img-width="1920"
-              :img-height="800"
-              frame-height="320px"
-              parallax-offset="24rem"
-            />
-          </div>
-        </PageRow>
-
-        <!-- Rounded corners -->
-        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-32']">
-          <div class="sri-demo-row">
-            <div class="sri-demo-row__info">
-              <h3 class="page-heading-3 mbe-8">Rounded corners</h3>
-              <p class="page-body-normal mbe-12">
-                The
-                <code>radius</code>
-                prop applies
-                <code>border-radius</code>
-                to the clipping frame, so the image reveal stays contained within the rounded shape.
-              </p>
-              <dl class="sri-props">
-                <dt>frameHeight</dt>
-                <dd>480px</dd>
-                <dt>parallaxOffset</dt>
-                <dd>36rem</dd>
-                <dt>radius</dt>
-                <dd>2.4rem</dd>
-              </dl>
-            </div>
-            <ScrollRevealImage
-              src="/images/banners/banner-ginger.webp"
-              alt="Ginger hair banner"
-              :img-width="1920"
-              :img-height="800"
-              frame-height="480px"
-              radius="2.4rem"
-            />
-          </div>
-        </PageRow>
-
-        <!-- Focal point -->
-        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-32']">
-          <div class="sri-demo-row">
-            <div class="sri-demo-row__info">
-              <h3 class="page-heading-3 mbe-8">Horizontal focal point</h3>
-              <p class="page-body-normal mbe-12">
-                <code>focalX</code>
-                pins the horizontal crop axis. Here it is pushed right so the subject stays centred in the narrower
-                right-hand column.
-              </p>
-              <dl class="sri-props">
-                <dt>frameHeight</dt>
-                <dd>540px</dd>
-                <dt>parallaxOffset</dt>
-                <dd>36rem</dd>
-                <dt>focalX</dt>
-                <dd>75%</dd>
-              </dl>
-            </div>
-            <ScrollRevealImage
-              src="/images/page/hero/hero-red.jpg"
-              alt="Red hair portrait"
-              :img-width="1280"
-              :img-height="1920"
-              focal-x="75%"
-            />
-          </div>
-        </PageRow>
-
-        <!-- Tall frame -->
-        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-32']">
-          <div class="sri-demo-row">
-            <div class="sri-demo-row__info">
-              <h3 class="page-heading-3 mbe-8">Tall frame — maximum travel</h3>
-              <p class="page-body-normal mbe-12">
-                A tall frame combined with a large
-                <code>parallaxOffset</code>
-                creates the most dramatic reveal — nearly the full image height is traversed as you scroll.
-              </p>
-              <dl class="sri-props">
-                <dt>frameHeight</dt>
-                <dd>70vh</dd>
-                <dt>parallaxOffset</dt>
-                <dd>60rem</dd>
-              </dl>
-            </div>
-            <ScrollRevealImage
-              src="/images/page/hero/hero-hair.jpg"
-              alt="Hair portrait"
-              :img-width="1280"
-              :img-height="1920"
-              frame-height="70vh"
-              parallax-offset="60rem"
-            />
-          </div>
-        </PageRow>
-
-        <!-- ScrollRevealFrame: image grid -->
-        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-48']">
-          <div class="sri-demo-row">
-            <div class="sri-demo-row__info">
-              <h3 class="page-heading-3 mbe-8">Image grid — ScrollRevealFrame</h3>
-              <p class="page-body-normal mbe-12">
-                <code>ScrollRevealFrame</code>
-                accepts arbitrary slot content. Here a six-image CSS grid scrolls as a single unit inside the clipping
-                frame — no
-                <code>focalX</code>
-                or
-                <code>NuxtImg</code>
-                wiring needed.
-              </p>
-              <dl class="sri-props">
-                <dt>component</dt>
-                <dd>ScrollRevealFrame</dd>
-                <dt>frameHeight</dt>
-                <dd>480px</dd>
-                <dt>parallaxOffset</dt>
-                <dd>36rem</dd>
-              </dl>
-            </div>
-            <ScrollRevealFrame frame-height="480px" parallax-offset="36rem">
-              <div class="sri-image-grid">
-                <div class="sri-image-grid__cell">
-                  <NuxtImg
-                    src="/images/services/service-balayage.jpg"
-                    alt="Balayage service"
-                    :width="800"
-                    :height="800"
-                    loading="lazy"
-                    decoding="async"
-                    class="sri-image-grid__img"
-                  />
-                </div>
-                <div class="sri-image-grid__cell">
-                  <NuxtImg
-                    src="/images/services/service-colour.jpg"
-                    alt="Colour service"
-                    :width="800"
-                    :height="800"
-                    loading="lazy"
-                    decoding="async"
-                    class="sri-image-grid__img"
-                  />
-                </div>
-                <div class="sri-image-grid__cell">
-                  <NuxtImg
-                    src="/images/services/service-cut.jpg"
-                    alt="Cut service"
-                    :width="800"
-                    :height="800"
-                    loading="lazy"
-                    decoding="async"
-                    class="sri-image-grid__img"
-                  />
-                </div>
-                <div class="sri-image-grid__cell">
-                  <NuxtImg
-                    src="/images/services/service-highlights.jpg"
-                    alt="Highlights service"
-                    :width="800"
-                    :height="800"
-                    loading="lazy"
-                    decoding="async"
-                    class="sri-image-grid__img"
-                  />
-                </div>
-                <div class="sri-image-grid__cell">
-                  <NuxtImg
-                    src="/images/services/service-lowlights.jpg"
-                    alt="Lowlights service"
-                    :width="800"
-                    :height="800"
-                    loading="lazy"
-                    decoding="async"
-                    class="sri-image-grid__img"
-                  />
-                </div>
-                <div class="sri-image-grid__cell">
-                  <NuxtImg
-                    src="/images/services/service-toner.jpg"
-                    alt="Toner service"
-                    :width="800"
-                    :height="800"
-                    loading="lazy"
-                    decoding="async"
-                    class="sri-image-grid__img"
-                  />
-                </div>
-              </div>
-            </ScrollRevealFrame>
-          </div>
-        </PageRow>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { IFormMultipleOptions } from "~/types/forms/types.forms";
-
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "ScrollRevealImage / ScrollRevealFrame",
-  meta: [
-    {
-      name: "description",
-      content: "ScrollRevealImage and ScrollRevealFrame — pure-CSS parallax scroll reveal effect demo",
-    },
-  ],
-  bodyAttrs: {
-    class: "scroll-reveal-image-page",
-  },
-});
-
-const frameHeight = ref("540px");
-const parallaxOffset = ref("36rem");
-const focalX = ref("50%");
-const radius = ref("0px");
-
-const frameHeightData = ref<IFormMultipleOptions>({
-  data: [
-    { id: "fh-320", name: "frameHeight", value: "320px", label: "320px" },
-    { id: "fh-540", name: "frameHeight", value: "540px", label: "540px" },
-    { id: "fh-60vh", name: "frameHeight", value: "60vh", label: "60vh" },
-    { id: "fh-80vh", name: "frameHeight", value: "80vh", label: "80vh" },
-  ],
-  total: 4,
-  skip: 0,
-  limit: 4,
-});
-
-const parallaxOffsetData = ref<IFormMultipleOptions>({
-  data: [
-    { id: "po-20", name: "parallaxOffset", value: "20rem", label: "20rem" },
-    { id: "po-36", name: "parallaxOffset", value: "36rem", label: "36rem" },
-    { id: "po-48", name: "parallaxOffset", value: "48rem", label: "48rem" },
-    { id: "po-60", name: "parallaxOffset", value: "60rem", label: "60rem" },
-  ],
-  total: 4,
-  skip: 0,
-  limit: 4,
-});
-
-const focalXData = ref<IFormMultipleOptions>({
-  data: [
-    { id: "fx-left", name: "focalX", value: "20%", label: "left" },
-    { id: "fx-center", name: "focalX", value: "50%", label: "center" },
-    { id: "fx-right", name: "focalX", value: "80%", label: "right" },
-  ],
-  total: 3,
-  skip: 0,
-  limit: 3,
-});
-
-const radiusData = ref<IFormMultipleOptions>({
-  data: [
-    { id: "r-0", name: "radius", value: "0px", label: "none" },
-    { id: "r-8", name: "radius", value: "0.8rem", label: "0.8rem" },
-    { id: "r-16", name: "radius", value: "1.6rem", label: "1.6rem" },
-    { id: "r-24", name: "radius", value: "2.4rem", label: "2.4rem" },
-  ],
-  total: 4,
-  skip: 0,
-  limit: 4,
-});
-</script>
-
-<style lang="css">
-.scroll-reveal-image-page {
-  .sri-demo-row {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: 3.2rem;
-    align-items: start;
-
-    @media (width >= 768px) {
-      grid-template-columns: 1fr 2fr;
-    }
-
-    & .sri-demo-row__info {
-      position: sticky;
-      top: 2.4rem;
-    }
-  }
-
-  .sri-props {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    gap: 0.4rem 1.2rem;
-    font-size: 1.3rem;
-    margin: 0;
-
-    dt {
-      color: var(--slate-07);
-      font-family: monospace;
-    }
-
-    dd {
-      margin: 0;
-      font-family: monospace;
-      color: var(--slate-10);
-    }
-  }
-
-  .sri-image-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-template-rows: repeat(2, 1fr);
-    gap: 0.4rem;
-    height: 100%;
-  }
-
-  .sri-image-grid__cell {
-    overflow: hidden;
-    min-height: 0;
-  }
-
-  .sri-image-grid__img {
-    display: block;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  .demo-controls {
-    padding: 1.6rem;
-    border: 1px solid var(--slate-06);
-    border-radius: 0.8rem;
-    margin-block: 2.4rem;
-
-    & .demo-controls__heading {
-      font-size: 1.1rem;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.08em;
-      color: var(--slate-08);
-      margin-block-end: 1.2rem;
-    }
-
-    & .demo-controls__fields {
-      display: flex;
-      flex-direction: column;
-      gap: 1.2rem;
-    }
-  }
-}
-</style>

package/app/pages/ui/section-parallax.vue

@@ -1,54 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="full" :style-class-passthrough="['expanding-panel-section', 'mbe-20']">
-          <h1 class="page-heading-1">SectionParallax Component</h1>
-          <p class="mbe-12">Static image displayed as page scrolls through it.</p>
-        </PageRow>
-        <SectionParallax
-          background-image="/images/rotating-carousel/image-3.webp"
-          :style-class-passthrough="['mbe-20']"
-        >
-          <PageRow tag="div" variant="full" :style-class-passthrough="['expanding-panel-section', 'mbe-20']">
-            <h1 class="page-heading-1">SectionParallax Content</h1>
-            <p class="page-body-normal">This is default slot content for the SectionParallax component.</p>
-            <p class="page-body-normal">As it's a slot, any html content can be placed here.</p>
-          </PageRow>
-        </SectionParallax>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "SectionParallax Component",
-  meta: [
-    {
-      name: "description",
-      content: "SectionParallax Component description content",
-    },
-  ],
-  bodyAttrs: {
-    class: "section-parallax-page",
-  },
-});
-
-const forceOpened = ref(false);
-</script>
-
-<style lang="css">
-.section-parallax-page {
-  /* Page specific styles */
-
-  margin-block-end: 100vh;
-
-  .section-parallax {
-  }
-}
-</style>

package/app/pages/ui/services/colour-finder.vue

@@ -1,43 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
-          <h2 class="page-heading-2">ColourFinder</h2>
-        </PageRow>
-
-        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
-          <ColourFinder />
-        </PageRow>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "ColourFinder",
-  meta: [
-    {
-      name: "description",
-      content: "ColourFinder Meta description content",
-    },
-  ],
-  bodyAttrs: {
-    class: "colour-finder-page",
-  },
-});
-</script>
-
-<style lang="css">
-.colour-finder-page {
-  .colour-finder {
-    max-inline-size: 800px;
-    margin-inline: auto;
-  }
-}
-</style>

package/app/pages/ui/services/services-cards.vue

@@ -1,57 +0,0 @@
-<template>
-  <div>
-    <NuxtLayout name="default">
-      <template #layout-content>
-        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
-          <h1 class="page-heading-1">Services Card Grid</h1>
-          <p class="page-body-normal">Example of a services card grid component.</p>
-        </PageRow>
-
-        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
-          <ServicesCardGrid
-            :services-data="servicesData ?? []"
-            :eyebrow-config="{ fontSize: 'large' }"
-            :hero-config="{ tag: 'h2', fontSize: 'heading' }"
-          />
-        </PageRow>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "Services Card Grid",
-  meta: [{ name: "description", content: "Services Card Grid" }],
-  bodyAttrs: {
-    class: "page-services-card-grid",
-  },
-});
-
-const store = useServicesStore();
-const { servicesData } = storeToRefs(store);
-
-if (servicesData.value.length === 0) {
-  await store.fetchServicesData();
-}
-</script>
-
-<style lang="css">
-.page-services-card-grid {
-  /* Page specific styles here */
-  .services-card-grid {
-    --_gap: 4rem;
-    --_column-min-width: 250px;
-
-    .services-card {
-      --_eyebrow-text-margin-block: 0.8rem 0;
-      --_hero-text-margin-block: 2rem 1rem;
-      --_description-text-colour: var(--colour-text-secondary);
-    }
-  }
-}
-</style>