finalize page

Author: fabianhueske

apps/docs/app/components/LandingComponentShowcase.vue

@@ -27,10 +27,10 @@ const futureFlags = {
 // reserves space and the section doesn't shift when the cards hydrate. Each
 // inner array matches one column's cards below, in order.
 const skeletonColumns = [
-  [340, 470, 340, 60],
-  [260, 280, 340, 60],
-  [400, 240, 60],
-  [360, 320, 200, 60],
+  [317, 398, 164, 90],
+  [283, 373, 202, 90],
+  [516, 432, 90],
+  [462, 303, 180, 90],
 ];
 </script>
 
@@ -110,37 +110,53 @@ const skeletonColumns = [
   inset-inline: 0;
   bottom: 0;
   height: 640px;
-  background: linear-gradient(to bottom, transparent, var(--ui-bg) 90%);
+  background: linear-gradient(to bottom, transparent, var(--ui-bg) 75%);
   pointer-events: none;
 }
 .dark .showcase-fade {
   background-image: linear-gradient(
     to bottom,
     transparent,
-    var(--ui-bg-muted) 90%
+    var(--ui-bg-muted) 75%
   );
 }
 
 /* Explicit 4-column grid: card placement per column is decided in the template
- * (each .showcase-col stacks its cards). Collapses to 2 then 1 column on
- * narrower viewports. --showcase-gutter is both the column gap and the vertical
- * gap between stacked cards. */
+ * (each .showcase-col stacks its cards). --showcase-gutter is both the column
+ * gap and the vertical gap between stacked cards. */
 .showcase-grid {
   --showcase-gutter: var(--scale-size-20);
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: var(--showcase-gutter);
 }
 
-@media (max-width: 1024px) {
+/* Each column is a curated stack, so narrower viewports drop whole columns
+ * (4 -> 3 -> 2) instead of reflowing everything into one endless stack. The
+ * skeleton fallback uses the same classes, so it collapses in step. */
+@media (max-width: 1439.98px) {
   .showcase-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .showcase-col:nth-child(4) {
+    display: none;
   }
 }
 
-@media (max-width: 640px) {
+@media (max-width: 1023.98px) {
   .showcase-grid {
-    grid-template-columns: minmax(0, 1fr);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .showcase-col:nth-child(3) {
+    display: none;
+  }
+}
+
+/* Smartphones skip the showcase entirely; the hero hands over to the next
+ * section directly (the hero fade shortens to match, see index.vue). */
+@media (max-width: 639.98px) {
+  .showcase-section {
+    display: none;
   }
 }
 

apps/docs/app/components/LandingDocsCarousel.vue

@@ -246,65 +246,58 @@ function onKeydown(event: KeyboardEvent) {
 }
 
 .docs-carousel__viewport {
-  cursor: grab;
   touch-action: pan-y;
   outline: none;
   user-select: none;
   -webkit-user-select: none;
+  /* Contain the arc horizontally (so the off-screen cards never create a page
+     scrollbar). The clip box is grown with padding, then handed back to the
+     layout via matching negative margins, because WebKit clips BOTH axes when
+     either one is clipped: without the headroom, the side cards curving down
+     the arc (and the hovered card's top) get cut at the box edge. */
+  overflow-x: clip;
+  padding-top: 32px;
+  margin-top: -32px;
+  padding-bottom: 240px;
+  margin-bottom: -240px;
 }
 .doc-slide {
   -webkit-user-drag: none;
 }
 
-/* The arc spans the full viewport width. */
+/* The arc spans the full viewport width. The height leaves room below the
+   centered card for its hover expansion ("Read more" growing the card
+   downward); the side cards' arc drop spills into the viewport's padding
+   headroom above. No edge-fade mask: the per-card opacity falloff already
+   fades the arc out toward the sides, and a mask would put a visible cut
+   through the slides where they curve toward the edges. */
+/* The grab cursor lives on the wheel (not the viewport) so the viewport's
+   clip-headroom padding below the arc doesn't advertise dragging. */
 .docs-carousel__wheel {
   position: relative;
-  height: 430px;
-  /* Clip horizontally (no page scroll) but let cards spill vertically so the
-     lower cards in the arc aren't cut off. */
-  overflow-x: clip;
-  overflow-y: visible;
-  /* Fade the arc out toward the viewport edges, past the content width. The
-     gradient is horizontal; the mask is deliberately far taller than the wheel
-     (and centered) so the cards spilling above/below aren't clipped by it. */
-  --edge-fade: max(64px, calc((100% - 1620px) / 2));
-  -webkit-mask-image: linear-gradient(
-    to right,
-    transparent,
-    #000 var(--edge-fade),
-    #000 calc(100% - var(--edge-fade)),
-    transparent
-  );
-  mask-image: linear-gradient(
-    to right,
-    transparent,
-    #000 var(--edge-fade),
-    #000 calc(100% - var(--edge-fade)),
-    transparent
-  );
-  -webkit-mask-size: 100% 3000px;
-  mask-size: 100% 3000px;
-  -webkit-mask-position: center;
-  mask-position: center;
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-}
-.docs-carousel__wheel.is-dragging {
-  cursor: grabbing;
+  height: 460px;
+  cursor: grab;
 }
-/* Only one card shows on small screens, so the edge fade would just clip its
-   sides — drop it there. */
+/* One card at a time on phones (and its "Read more" is always expanded there),
+   so the wheel doesn't need the desktop headroom; tighten the gap down to the
+   controls. */
 @media (max-width: 639.98px) {
   .docs-carousel__wheel {
-    -webkit-mask-image: none;
-    mask-image: none;
+    height: 420px;
   }
 }
+.docs-carousel__wheel.is-dragging {
+  cursor: grabbing;
+}
 .docs-carousel__card {
   position: absolute;
   top: 45%;
   left: 50%;
-  width: clamp(300px, 25vw, 390px);
+  /* Desktop width everywhere; on small screens the card just caps at 90% of
+     the viewport instead of shrinking early. */
+  width: 390px;
+  max-width: 90vw;
+  max-width: 90dvw;
   transition:
     transform 0.55s var(--ease-out),
     opacity 0.55s var(--ease-out);
@@ -325,7 +318,9 @@ function onKeydown(event: KeyboardEvent) {
   flex-direction: column;
   overflow: hidden;
   border: 1px solid var(--ui-border);
-  border-radius: 1.25rem;
+  /* 1rem matches the landing page's other card surfaces (accordion items and
+     the copy-command line). */
+  border-radius: 1rem;
   background: var(--ui-bg);
   /* Shared landing elevation (defined on .landing) so cards match the accordion
    * and copy line in both themes. */

apps/docs/app/components/LandingUfo.vue

@@ -15,6 +15,8 @@ let raf = 0;
 let running = false;
 let reduced = false;
 let hovering = false;
+let heroVisible = false;
+let heroObserver: IntersectionObserver | null = null;
 
 // Coordinates are relative to the hero's top-left.
 const target = { x: 0, y: 0 }; // cursor position, offset to sit above the cursor
@@ -24,7 +26,7 @@ const dest = { x: 0, y: 0 }; // where the current creep ends
 
 const OFFSET_X = -4; // sit a tiny bit to the left of the cursor
 const OFFSET_Y = -26; // hover a bit above the cursor
-const IDLE_DELAY = 1600; // cursor must be still this long before it dares appear
+const IDLE_DELAY = 2600; // cursor must be still this long before it dares appear
 const MOVE_EPS = 5; // movement under this counts as "still"
 const SWAY_AMP = 2; // tiny left-right sway while scanning
 
@@ -136,7 +138,11 @@ function frame(now: number) {
 
   if (phase === "hidden") {
     scaleVal = 0;
-    if (hovering && now - lastMoveTime > IDLE_DELAY) startAppear(now);
+    // Re-checked at the moment of appearing (not just at pointerenter): the
+    // hero must still be on screen and the page still in dark mode, so a
+    // scroll-away or a theme switch mid-run can't summon an invisible UFO.
+    if (hovering && heroVisible && isDark() && now - lastMoveTime > IDLE_DELAY)
+      startAppear(now);
   } else if (phase === "appear") {
     const t = clamp01((now - tStart) / tDur);
     scaleVal = easeOut(t);
@@ -171,11 +177,20 @@ function frame(now: number) {
     pos.y = from.y + (dest.y - from.y) * e;
     if (t >= 1) {
       gliding = false;
-      phase = "scan";
-      scanning.value = true;
-      scanRestX = pos.x;
-      scanRestY = pos.y;
-      scanStart = now;
+      // Only start scanning (and the cursor-cycle gag) when the cursor is
+      // actually still being watched: pointer inside the hero, hero on
+      // screen, dark mode. If the pointer left mid-approach (the 3s linger
+      // keeps the machine running), flee instead of scanning a cursor that
+      // is somewhere else on the page.
+      if (!hovering || !heroVisible || !isDark()) {
+        startFlee(now);
+      } else {
+        phase = "scan";
+        scanning.value = true;
+        scanRestX = pos.x;
+        scanRestY = pos.y;
+        scanStart = now;
+      }
     }
   } else if (phase === "scan") {
     // tiny left-right sway while it scans
@@ -259,13 +274,35 @@ function onLeave() {
   }, 3000);
 }
 
+// Scrolling moves the hero under a stationary cursor without firing any
+// pointer events, which would otherwise leave `hovering` and the idle timer
+// stale (the UFO then "randomly" appears while the user reads another
+// section). Treat scrolling as cursor activity and spook the UFO like any
+// other movement.
+function onScroll() {
+  lastMoveTime = performance.now();
+  if (phase !== "hidden" && phase !== "flee") startFlee(performance.now());
+}
+
 onMounted(() => {
   reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
   hero = root.value?.parentElement ?? null;
   if (!hero) return;
   hero.addEventListener("pointermove", onMove);
   hero.addEventListener("pointerenter", onEnter);
   hero.addEventListener("pointerleave", onLeave);
+  window.addEventListener("scroll", onScroll, { passive: true });
+
+  // Hard stop (which also tears down the cursor cycle) whenever the hero
+  // scrolls out of view: the UFO must never act while it can't be seen.
+  heroObserver = new IntersectionObserver(
+    ([entry]) => {
+      heroVisible = entry?.isIntersecting ?? false;
+      if (!heroVisible && running) stop();
+    },
+    { threshold: 0.2 },
+  );
+  heroObserver.observe(hero);
 });
 
 onBeforeUnmount(() => {
@@ -274,6 +311,8 @@ onBeforeUnmount(() => {
     hero.removeEventListener("pointerenter", onEnter);
     hero.removeEventListener("pointerleave", onLeave);
   }
+  window.removeEventListener("scroll", onScroll);
+  heroObserver?.disconnect();
   if (leaveTimer) clearTimeout(leaveTimer);
   stopCursorCycle();
   cancelAnimationFrame(raf);

apps/docs/app/components/showcase/ConnectNexusCard.vue

@@ -7,7 +7,7 @@ import MtPasswordField from "@shopware-ag/meteor-component-library/MtPasswordFie
 import MtButton from "@shopware-ag/meteor-component-library/MtButton";
 import MtLink from "@shopware-ag/meteor-component-library/MtLink";
 
-const email = ref("mia.chen@company.io");
+const email = ref("mia.chen@example.com");
 const password = ref("peekaboo");
 const muted = "color-text-secondary-default";
 
@@ -92,7 +92,8 @@ onMounted(() => {
               <mt-text size="xs" :color="muted">
                 Don't have an account?
               </mt-text>
-              <mt-link as="a" href="#">Register now</mt-link>
+              <!-- Decorative demo link: prevent the href="#" scroll-to-top jump. -->
+              <mt-link as="a" href="#" @click.prevent>Register now</mt-link>
             </div>
           </div>
         </div>
@@ -149,6 +150,7 @@ onMounted(() => {
 }
 .connect__footer {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: var(--scale-size-4);
   font-size: var(--font-size-xs);

apps/docs/app/components/showcase/CustomDomainCard.vue

@@ -38,7 +38,12 @@ const statusColor = computed(() =>
             <mt-text size="xs">SSL certificate valid</mt-text>
           </div>
         </div>
-        <mt-link to="#" type="external">Learn about custom domains</mt-link>
+        <!-- Decorative demo link: a plain anchor (not router-link, whose own
+             click handler could navigate before a prevent) with the jump to
+             "#" suppressed. -->
+        <mt-link as="a" href="#" type="external" @click.prevent>
+          Learn about custom domains
+        </mt-link>
       </div>
     </mt-card>
   </div>

apps/docs/app/components/showcase/ProductSpecificationCard.vue

@@ -58,6 +58,7 @@ const productImage = "/showcase-product.jpg";
           label="Price"
           size="small"
           :min="0"
+          :step="0.25"
           :digits="2"
           :show-controls="false"
         >

apps/docs/app/components/showcase/ShareInviteCard.vue

@@ -19,9 +19,9 @@ const { addSnackbar } = useSnackbar();
 
 const inviteEmail = ref("");
 const shareUsers = [
-  { firstName: "Mia", lastName: "Chen", email: "mia.chen@company.io" },
-  { firstName: "Jonas", lastName: "Weber", email: "jonas.weber@company.io" },
-  { firstName: "Adrian", lastName: "Silva", email: "adrian.silva@company.io" },
+  { firstName: "Mia", lastName: "Chen", email: "mia.chen@example.com" },
+  { firstName: "Jonas", lastName: "Weber", email: "jonas.weber@example.com" },
+  { firstName: "Adrian", lastName: "Silva", email: "adrian.silva@example.com" },
 ];
 const muted = "color-text-secondary-default";
 </script>
@@ -61,10 +61,12 @@ const muted = "color-text-secondary-default";
               variant="circle"
             />
             <div class="min-w-0 flex-1">
-              <mt-text size="xs" weight="medium"
+              <mt-text size="xs" weight="medium" class="w-full truncate"
                 >{{ u.firstName }} {{ u.lastName }}</mt-text
               >
-              <mt-text size="xs" :color="muted">{{ u.email }}</mt-text>
+              <mt-text size="xs" :color="muted" class="w-full truncate">{{
+                u.email
+              }}</mt-text>
             </div>
             <mt-dropdown-menu-root>
               <mt-dropdown-menu-trigger as-child>