srcdev-nuxt-components 9.3.6 → 9.3.8

package/app/pages/ui/navigation/navigation-horizontal.vue

@@ -1,484 +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">Navigation Horizontal</h2>
-          <p class="page-body-medium">This navigation has a reflective glow effect</p>
-        </PageRow>
-
-        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
-          <DisplayThemeSwitch />
-        </PageRow>
-
-        <PageRow tag="div" variant="full" :style-class-passthrough="['mbe-4']">
-          <PageRow tag="div" variant="content">
-            <h3 class="page-heading-3">User controllable</h3>
-          </PageRow>
-          <div class="nav-preview" :class="`theme-${theme}`" :style="navStyle">
-            <NavigationHorizontal :nav-item-data="navItemData" />
-          </div>
-        </PageRow>
-
-        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
-          <div class="nav-playground">
-            <fieldset>
-              <legend>Theme</legend>
-              <div class="control-row">
-                <label>Light / Dark</label>
-                <div class="theme-toggle">
-                  <button :class="{ active: theme === 'light' }" @click="setTheme('light')">Light</button>
-                  <button :class="{ active: theme === 'dark' }" @click="setTheme('dark')">Dark</button>
-                </div>
-              </div>
-            </fieldset>
-
-            <fieldset>
-              <legend>Colours</legend>
-              <div class="control-row">
-                <label for="active-colour">Active / glow colour</label>
-                <input id="active-colour" v-model="controls.activeColour" type="color" />
-              </div>
-              <div class="control-row">
-                <label for="link-colour">Link text colour</label>
-                <input id="link-colour" v-model="controls.linkColour" type="color" />
-              </div>
-              <div class="control-row">
-                <label for="link-bg">Link background</label>
-                <input id="link-bg" v-model="controls.linkBg" type="color" />
-              </div>
-              <div class="control-row">
-                <label for="border-colour">Border colour</label>
-                <input id="border-colour" v-model="controls.borderColour" type="color" />
-              </div>
-              <div class="control-row">
-                <label for="border-opacity">Border opacity — {{ controls.borderOpacity }}</label>
-                <input
-                  id="border-opacity"
-                  v-model.number="controls.borderOpacity"
-                  type="range"
-                  min="0"
-                  max="1"
-                  step="0.05"
-                />
-              </div>
-            </fieldset>
-
-            <fieldset>
-              <legend>Borders</legend>
-              <div class="control-row">
-                <label for="border-start">Border top — {{ controls.borderStart }}px</label>
-                <input id="border-start" v-model.number="controls.borderStart" type="range" min="0" max="10" step="1" />
-              </div>
-              <div class="control-row">
-                <label for="border-end">Border bottom — {{ controls.borderEnd }}px</label>
-                <input id="border-end" v-model.number="controls.borderEnd" type="range" min="0" max="10" step="1" />
-              </div>
-            </fieldset>
-
-            <fieldset>
-              <legend>Layout</legend>
-              <div class="control-row">
-                <label for="list-padding">List padding — {{ controls.listPadding }}rem</label>
-                <input
-                  id="list-padding"
-                  v-model.number="controls.listPadding"
-                  type="range"
-                  min="0"
-                  max="6"
-                  step="0.5"
-                />
-              </div>
-              <div class="control-row">
-                <label for="list-gap">List gap — {{ controls.listGap }}rem</label>
-                <input id="list-gap" v-model.number="controls.listGap" type="range" min="0" max="10" step="0.25" />
-              </div>
-              <div class="control-row">
-                <label for="link-padding-block">Link vertical padding — {{ controls.linkPaddingBlock }}rem</label>
-                <input
-                  id="link-padding-block"
-                  v-model.number="controls.linkPaddingBlock"
-                  type="range"
-                  min="0"
-                  max="2"
-                  step="0.1"
-                />
-              </div>
-              <div class="control-row">
-                <label for="link-padding-inline">Link horizontal padding — {{ controls.linkPaddingInline }}rem</label>
-                <input
-                  id="link-padding-inline"
-                  v-model.number="controls.linkPaddingInline"
-                  type="range"
-                  min="0"
-                  max="3"
-                  step="0.1"
-                />
-              </div>
-              <div class="control-row">
-                <label for="link-border-radius">Link border radius — {{ controls.linkBorderRadius }}rem</label>
-                <input
-                  id="link-border-radius"
-                  v-model.number="controls.linkBorderRadius"
-                  type="range"
-                  min="0"
-                  max="2"
-                  step="0.1"
-                />
-              </div>
-            </fieldset>
-
-            <fieldset>
-              <legend>Glow Effect</legend>
-              <div class="control-row">
-                <label for="glow-pos-x">Origin X — {{ controls.glowPosX }}%</label>
-                <input id="glow-pos-x" v-model.number="controls.glowPosX" type="range" min="-100" max="100" step="1" />
-              </div>
-              <div class="control-row">
-                <label for="glow-pos-y">Origin Y — {{ controls.glowPosY }}%</label>
-                <input id="glow-pos-y" v-model.number="controls.glowPosY" type="range" min="-100" max="200" step="1" />
-              </div>
-              <div class="control-row">
-                <label for="glow-inner-stop">Inner gradient stop — {{ controls.glowInnerStop }}%</label>
-                <input
-                  id="glow-inner-stop"
-                  v-model.number="controls.glowInnerStop"
-                  type="range"
-                  min="0"
-                  max="50"
-                  step="1"
-                />
-              </div>
-              <div class="control-row">
-                <label for="glow-outer-stop">Outer gradient stop — {{ controls.glowOuterStop }}%</label>
-                <input
-                  id="glow-outer-stop"
-                  v-model.number="controls.glowOuterStop"
-                  type="range"
-                  min="50"
-                  max="100"
-                  step="1"
-                />
-              </div>
-              <div class="control-row">
-                <label for="glow-size">Glow spread — {{ controls.glowSize }}px</label>
-                <input id="glow-size" v-model.number="controls.glowSize" type="range" min="0" max="100" step="1" />
-              </div>
-              <div class="control-row">
-                <label for="glow-opacity">Glow opacity — {{ controls.glowOpacity }}</label>
-                <input
-                  id="glow-opacity"
-                  v-model.number="controls.glowOpacity"
-                  type="range"
-                  min="0"
-                  max="1"
-                  step="0.05"
-                />
-              </div>
-              <div class="control-row">
-                <label for="anchor-offset">Anchor spread — {{ controls.anchorOffset }}px</label>
-                <input
-                  id="anchor-offset"
-                  v-model.number="controls.anchorOffset"
-                  type="range"
-                  min="0"
-                  max="100"
-                  step="1"
-                />
-              </div>
-            </fieldset>
-
-            <fieldset>
-              <legend>Animation</legend>
-              <div class="control-row">
-                <label for="transition-duration">Transition — {{ controls.transitionDuration }}ms</label>
-                <input
-                  id="transition-duration"
-                  v-model.number="controls.transitionDuration"
-                  type="range"
-                  min="0"
-                  max="1000"
-                  step="50"
-                />
-              </div>
-            </fieldset>
-          </div>
-        </PageRow>
-
-        <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20']">
-          <div class="css-snippet">
-            <div class="css-snippet-header">
-              <h3 class="page-heading-3">CSS Token Snippet</h3>
-              <button class="copy-btn" @click="copySnippet">{{ copied ? "Copied!" : "Copy" }}</button>
-            </div>
-            <pre class="css-snippet-code">{{ cssSnippet }}</pre>
-          </div>
-        </PageRow>
-      </template>
-    </NuxtLayout>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { NavItemData } from "~/types/components/navigation-horizontal.d";
-definePageMeta({
-  layout: false,
-});
-
-useHead({
-  title: "Navigation Horizontal",
-  meta: [
-    {
-      name: "description",
-      content: "Navigation Horizontal Meta description content",
-    },
-  ],
-  bodyAttrs: {
-    class: "navigation-horizontal-page",
-  },
-});
-
-const navItemData: NavItemData = {
-  main: [
-    { text: "Home", href: "#", isExternal: true, iconName: "home", cssName: "home-link" },
-    { text: "About", href: "#", isExternal: true, iconName: "info", cssName: "about-link" },
-    { text: "Services", href: "#", isExternal: true, iconName: "services", cssName: "services-link" },
-    { text: "Contact", href: "#", isExternal: true, iconName: "contact", cssName: "contact-link" },
-  ],
-};
-
-type Theme = "light" | "dark";
-
-const themeDefaults: Record<
-  Theme,
-  { linkColour: string; linkBg: string; borderColour: string; borderOpacity: number }
-> = {
-  dark: { linkColour: "#ffffff", linkBg: "#333333", borderColour: "#ffffff", borderOpacity: 0.2 },
-  light: { linkColour: "#1a1a1a", linkBg: "#e8e8e8", borderColour: "#000000", borderOpacity: 0.15 },
-};
-
-const theme = ref<Theme>("dark");
-
-const controls = reactive({
-  activeColour: "#00ff00",
-  linkColour: themeDefaults.dark.linkColour,
-  linkBg: themeDefaults.dark.linkBg,
-  borderColour: themeDefaults.dark.borderColour,
-  borderOpacity: themeDefaults.dark.borderOpacity,
-  borderStart: 0,
-  borderEnd: 3,
-  listPadding: 2,
-  listGap: 3,
-  linkPaddingBlock: 0.5,
-  linkPaddingInline: 1,
-  linkBorderRadius: 0.2,
-  glowPosX: 50,
-  glowPosY: 100,
-  glowInnerStop: 10,
-  glowOuterStop: 75,
-  glowSize: 32,
-  glowOpacity: 0.5,
-  anchorOffset: 40,
-  transitionDuration: 300,
-});
-
-const setTheme = (newTheme: Theme) => {
-  theme.value = newTheme;
-  const defaults = themeDefaults[newTheme];
-  controls.linkColour = defaults.linkColour;
-  controls.linkBg = defaults.linkBg;
-  controls.borderColour = defaults.borderColour;
-  controls.borderOpacity = defaults.borderOpacity;
-};
-
-const cssSnippet = computed(() => {
-  const borderColour = `color-mix(in srgb, ${controls.borderColour} ${Math.round(controls.borderOpacity * 100)}%, transparent)`;
-  return `.your-selector {
-  /* Colours */
-  --nav-active-colour: ${controls.activeColour};
-  --nav-link-colour: ${controls.linkColour};
-  --nav-link-bg: ${controls.linkBg};
-  --nav-border-colour: ${borderColour};
-
-  /* Borders */
-  --nav-border-start: ${controls.borderStart}px;
-  --nav-border-end: ${controls.borderEnd}px;
-
-  /* Layout */
-  --nav-list-padding: ${controls.listPadding}rem;
-  --nav-list-gap: ${controls.listGap}rem;
-  --nav-link-padding-block: ${controls.linkPaddingBlock}rem;
-  --nav-link-padding-inline: ${controls.linkPaddingInline}rem;
-  --nav-link-border-radius: ${controls.linkBorderRadius}rem;
-
-  /* Glow effect */
-  --nav-glow-pos-x: ${controls.glowPosX}%;
-  --nav-glow-pos-y: ${controls.glowPosY}%;
-  --nav-glow-inner-stop: ${controls.glowInnerStop}%;
-  --nav-glow-outer-stop: ${controls.glowOuterStop}%;
-  --nav-glow-size: ${controls.glowSize}px;
-  --nav-glow-opacity: ${controls.glowOpacity};
-  --nav-anchor-offset: ${controls.anchorOffset}px;
-
-  /* Animation */
-  --nav-transition-duration: ${controls.transitionDuration}ms;
-}`;
-});
-
-const copied = ref(false);
-const copySnippet = async () => {
-  await navigator.clipboard.writeText(cssSnippet.value);
-  copied.value = true;
-  setTimeout(() => {
-    copied.value = false;
-  }, 2000);
-};
-
-const navStyle = computed(() => ({
-  "--nav-active-colour": controls.activeColour,
-  "--nav-link-colour": controls.linkColour,
-  "--nav-link-bg": controls.linkBg,
-  "--nav-border-colour": `color-mix(in srgb, ${controls.borderColour} ${Math.round(controls.borderOpacity * 100)}%, transparent)`,
-  "--nav-border-start": `${controls.borderStart}px`,
-  "--nav-border-end": `${controls.borderEnd}px`,
-  "--nav-list-padding": `${controls.listPadding}rem`,
-  "--nav-list-gap": `${controls.listGap}rem`,
-  "--nav-link-padding-block": `${controls.linkPaddingBlock}rem`,
-  "--nav-link-padding-inline": `${controls.linkPaddingInline}rem`,
-  "--nav-link-border-radius": `${controls.linkBorderRadius}rem`,
-  "--nav-glow-pos-x": `${controls.glowPosX}%`,
-  "--nav-glow-pos-y": `${controls.glowPosY}%`,
-  "--nav-glow-inner-stop": `${controls.glowInnerStop}%`,
-  "--nav-glow-outer-stop": `${controls.glowOuterStop}%`,
-  "--nav-glow-size": `${controls.glowSize}px`,
-  "--nav-glow-opacity": String(controls.glowOpacity),
-  "--nav-anchor-offset": `${controls.anchorOffset}px`,
-  "--nav-transition-duration": `${controls.transitionDuration}ms`,
-  "color-scheme": theme.value,
-}));
-</script>
-
-<style lang="css">
-.navigation-horizontal-page {
-  .nav-preview {
-    padding: 4rem 0;
-    transition: background 300ms;
-
-    &.theme-dark {
-      --page-bg: hsl(0 0% 8%);
-      /* background: var(--page-bg); */
-    }
-
-    &.theme-light {
-      --page-bg: hsl(0 0% 95%);
-      /* background: var(--page-bg); */
-    }
-  }
-
-  .nav-playground {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
-    gap: 2rem;
-    padding-block: 2rem;
-
-    fieldset {
-      border: 1px solid light-dark(var(--slate-04), var(--slate-06));
-      border-radius: 0.4rem;
-      padding: 1.6rem;
-
-      legend {
-        font-weight: bold;
-        padding: 0 0.8rem;
-        font-size: 1.4rem;
-      }
-
-      .control-row {
-        display: grid;
-        grid-template-columns: 1fr 14rem;
-        gap: 1rem;
-        align-items: center;
-        padding: 0.5rem 0;
-
-        label {
-          font-size: 1.3rem;
-        }
-
-        input[type="range"] {
-          width: 100%;
-          cursor: pointer;
-        }
-
-        input[type="color"] {
-          height: 3.2rem;
-          width: 100%;
-          padding: 0.2rem;
-          border: 1px solid light-dark(var(--slate-04), var(--slate-06));
-          border-radius: 0.2rem;
-          cursor: pointer;
-          background: transparent;
-        }
-      }
-    }
-
-    .theme-toggle {
-      display: flex;
-      gap: 0.4rem;
-
-      button {
-        padding: 0.4rem 1.6rem;
-        border: 1px solid light-dark(var(--slate-05), var(--slate-06));
-        border-radius: 0.2rem;
-        cursor: pointer;
-        background: transparent;
-        font-size: 1.3rem;
-        color: inherit;
-
-        &.active {
-          background: light-dark(var(--slate-03), var(--slate-07));
-          font-weight: bold;
-        }
-      }
-    }
-  }
-
-  .css-snippet {
-    border: 1px solid light-dark(var(--slate-04), var(--slate-06));
-    border-radius: 0.4rem;
-    overflow: hidden;
-
-    .css-snippet-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 1rem 1.6rem;
-      border-block-end: 1px solid light-dark(var(--slate-04), var(--slate-06));
-      /* background: light-dark(var(--slate-02), var(--slate-08)); */
-    }
-
-    .css-snippet-code {
-      margin: 0;
-      padding: 1.6rem;
-      font-family: monospace;
-      font-size: 1.3rem;
-      line-height: 1.6;
-      overflow-x: auto;
-      white-space: pre;
-      /* background: light-dark(var(--slate-01), var(--slate-09)); */
-    }
-
-    .copy-btn {
-      padding: 0.4rem 1.2rem;
-      border: 1px solid light-dark(var(--slate-05), var(--slate-06));
-      border-radius: 0.2rem;
-      cursor: pointer;
-      background: transparent;
-      font-size: 1.3rem;
-      color: inherit;
-
-      &:hover {
-        background: light-dark(var(--slate-03), var(--slate-07));
-      }
-    }
-  }
-}
-</style>

package/app/pages/ui/navigation/site-navigation/about.vue

@@ -1,36 +0,0 @@
-<template>
-  <div class="snav-demo-page">
-    <h1>About</h1>
-    <p>This is the About page. The active indicator in the navigation above should be sitting under "About". Lots of images below to simulate a content-heavy page.</p>
-
-    <div class="snav-demo-split">
-      <div class="snav-demo-split__text">
-        <h2>Our Story</h2>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
-        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-        <h2>Our Team</h2>
-        <p>We are a team of dedicated professionals committed to delivering the best experience. Our combined expertise spans design, development, and user experience research.</p>
-        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis.</p>
-      </div>
-      <NuxtImg src="/images/rotating-carousel/image-1.webp" alt="About hero" width="600" height="800" loading="eager" class="snav-demo-split__img" />
-    </div>
-
-    <h2>Gallery</h2>
-    <div class="snav-demo-grid">
-      <NuxtImg v-for="n in 9" :key="n" :src="`/images/rotating-carousel/image-${n}.webp`" :alt="`About gallery ${n}`" width="600" height="400" loading="lazy" class="snav-demo-img" />
-    </div>
-
-    <h2>Behind the scenes</h2>
-    <div class="snav-demo-grid snav-demo-grid--wide">
-      <NuxtImg src="/images/banners/banner-ginger.jpeg" alt="Behind the scenes 1" width="800" height="500" loading="lazy" class="snav-demo-img" />
-      <NuxtImg src="/images/banners/banner-mid-brown.webp" alt="Behind the scenes 2" width="800" height="500" loading="lazy" class="snav-demo-img" />
-      <NuxtImg src="/images/page/hero/hero-dark.jpg" alt="Behind the scenes 3" width="800" height="500" loading="lazy" class="snav-demo-img" />
-      <NuxtImg src="/images/page/hero/hero-red.jpg" alt="Behind the scenes 4" width="800" height="500" loading="lazy" class="snav-demo-img" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-definePageMeta({ layout: "site-navigation-demo" });
-useHead({ title: "SiteNavigation Demo — About" });
-</script>

package/app/pages/ui/navigation/site-navigation/contact.vue

@@ -1,39 +0,0 @@
-<template>
-  <div class="snav-demo-page">
-    <h1>Contact</h1>
-    <p>This is the Contact page. The active indicator in the navigation above should be sitting under "Contact".</p>
-
-    <div class="snav-demo-split">
-      <div class="snav-demo-split__text">
-        <h2>Get in Touch</h2>
-        <p>We'd love to hear from you. Whether you have a question about our services, want to book an appointment, or just want to say hello — our door is always open.</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-        <h3>Opening Hours</h3>
-        <ul>
-          <li>Monday – Friday: 9am – 7pm</li>
-          <li>Saturday: 9am – 5pm</li>
-          <li>Sunday: Closed</li>
-        </ul>
-        <h3>Address</h3>
-        <p>123 Example Street<br />London, UK<br />EC1A 1BB</p>
-      </div>
-      <NuxtImg src="/images/rotating-carousel/55-woman-garden-backdrop.webp" alt="Contact hero" width="600" height="800" loading="eager" class="snav-demo-split__img" />
-    </div>
-
-    <h2>Find Us</h2>
-    <div class="snav-demo-grid snav-demo-grid--wide">
-      <NuxtImg src="/images/rotating-carousel/image-5.webp" alt="Location 1" width="800" height="500" loading="lazy" class="snav-demo-img" />
-      <NuxtImg src="/images/rotating-carousel/image-6.webp" alt="Location 2" width="800" height="500" loading="lazy" class="snav-demo-img" />
-    </div>
-
-    <h2>Instagram</h2>
-    <div class="snav-demo-grid">
-      <NuxtImg v-for="n in [1, 2, 3, 7, 8, 9]" :key="n" :src="`/images/rotating-carousel/image-${n}.webp`" :alt="`Instagram post ${n}`" width="600" height="600" loading="lazy" class="snav-demo-img snav-demo-img--square" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-definePageMeta({ layout: "site-navigation-demo" });
-useHead({ title: "SiteNavigation Demo — Contact" });
-</script>

package/app/pages/ui/navigation/site-navigation/index.vue

@@ -1,38 +0,0 @@
-<template>
-  <div class="snav-demo-page">
-    <h1>Home</h1>
-    <p>Welcome to the SiteNavigation component demo. Resize the window to see the burger menu collapse, and navigate between pages to see the active indicator update. This page is intentionally heavy with images to stress-test nav behaviour during loading.</p>
-
-    <NuxtImg
-      src="/images/banners/banner-ginger.jpeg"
-      alt="Hero banner"
-      width="1200"
-      height="600"
-      loading="eager"
-      class="snav-demo-hero"
-    />
-
-    <h2>Featured Gallery</h2>
-    <div class="snav-demo-grid">
-      <NuxtImg v-for="n in 9" :key="n" :src="`/images/rotating-carousel/image-${n}.webp`" :alt="`Gallery image ${n}`" width="600" height="400" loading="lazy" class="snav-demo-img" />
-    </div>
-
-    <h2>More Images</h2>
-    <div class="snav-demo-grid snav-demo-grid--wide">
-      <NuxtImg src="/images/banners/banner-light-brunette.webp" alt="Banner light brunette" width="800" height="500" loading="lazy" class="snav-demo-img" />
-      <NuxtImg src="/images/banners/banner-mid-brown.webp" alt="Banner mid brown" width="800" height="500" loading="lazy" class="snav-demo-img" />
-      <NuxtImg src="/images/rotating-carousel/35-light-brown-highlights.webp" alt="Light brown highlights" width="800" height="500" loading="lazy" class="snav-demo-img" />
-      <NuxtImg src="/images/rotating-carousel/55-woman-garden-backdrop.webp" alt="Woman garden backdrop" width="800" height="500" loading="lazy" class="snav-demo-img" />
-    </div>
-
-    <h2>Hero Images</h2>
-    <div class="snav-demo-grid">
-      <NuxtImg v-for="hero in ['hero-blonde', 'hero-dark', 'hero-hair', 'hero-red']" :key="hero" :src="`/images/page/hero/${hero}.jpg`" :alt="hero" width="600" height="400" loading="lazy" class="snav-demo-img" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-definePageMeta({ layout: "site-navigation-demo" });
-useHead({ title: "SiteNavigation Demo — Home" });
-</script>

package/app/pages/ui/navigation/site-navigation/portfolio.vue

@@ -1,43 +0,0 @@
-<template>
-  <div class="snav-demo-page">
-    <h1>Portfolio</h1>
-    <p>This is the Portfolio page. The active indicator in the navigation above should be sitting under "Portfolio". Maximum image load to stress-test navigation behaviour.</p>
-
-    <h2>Spotlight Work</h2>
-    <div class="snav-demo-grid snav-demo-grid--dense">
-      <NuxtImg v-for="n in 9" :key="n" :src="`/images/rotating-carousel/image-${n}.webp`" :alt="`Portfolio piece ${n}`" width="600" height="600" loading="lazy" class="snav-demo-img snav-demo-img--square" />
-    </div>
-
-    <h2>Featured Looks</h2>
-    <div class="snav-demo-grid snav-demo-grid--wide">
-      <NuxtImg src="/images/banners/banner-ginger.jpeg" alt="Ginger look" width="800" height="500" loading="lazy" class="snav-demo-img" />
-      <NuxtImg src="/images/banners/banner-light-brunette.webp" alt="Light brunette look" width="800" height="500" loading="lazy" class="snav-demo-img" />
-      <NuxtImg src="/images/banners/banner-mid-brown.webp" alt="Mid brown look" width="800" height="500" loading="lazy" class="snav-demo-img" />
-      <NuxtImg src="/images/rotating-carousel/35-light-brown-highlights.webp" alt="Light brown highlights" width="800" height="500" loading="lazy" class="snav-demo-img" />
-      <NuxtImg src="/images/rotating-carousel/55-woman-garden-backdrop.webp" alt="Garden backdrop" width="800" height="500" loading="lazy" class="snav-demo-img" />
-      <NuxtImg src="/images/rotating-carousel/indian-pink-stripe.webp" alt="Pink stripe" width="800" height="500" loading="lazy" class="snav-demo-img" />
-      <NuxtImg src="/images/rotating-carousel/spanish-green-stripe.webp" alt="Green stripe" width="800" height="500" loading="lazy" class="snav-demo-img" />
-    </div>
-
-    <h2>Hero Series</h2>
-    <div class="snav-demo-grid">
-      <NuxtImg v-for="hero in ['hero-blonde', 'hero-dark', 'hero-hair', 'hero-red']" :key="hero" :src="`/images/page/hero/${hero}.jpg`" :alt="hero" width="600" height="400" loading="lazy" class="snav-demo-img" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-definePageMeta({ layout: "site-navigation-demo" });
-useHead({ title: "SiteNavigation Demo — Portfolio" });
-</script>
-
-<style lang="css">
-.snav-demo-img--square {
-  aspect-ratio: 1 / 1;
-}
-
-.snav-demo-grid--dense {
-  grid-template-columns: repeat(3, 1fr);
-  gap: 0.8rem;
-}
-</style>