@codecavepro/brand 2.0.1 → 2.1.0

package/README.md

@@ -149,18 +149,22 @@ Two things to know about it:
 
 ## The components
 
-13 components and 13 icons — the buttons, the form controls and the forms
-themselves, the review card and the typing effect codecave.pro renders — ship as
+19 components and 13 icons — the buttons, the form controls and the forms
+themselves, the nav bar, the footer link group, the article and technology
+cards, the review card and the typing effect codecave.pro renders — ship as
 **source**, byte-for-byte the files the site builds from. Not a reimplementation
 of them, and not a bundle compiled from a snapshot: the same files, kept
 identical by a check that runs on every push.
 
-**The site's own menus are deliberately absent, and `BrandNav` is why they can
-be.** The footer link group, the article and technology cards and the two menus
-all reach codecave.pro's route table and menu data, so shipping them would put
-one site's navigation behind an npm release — changing a menu item would mean
-publishing. `BrandNav` is the same bar with the coupling removed: it takes its
-items, its wordmark and its active state as props and reaches nothing.
+**None of them knows your routes.** Six of these shipped for the first time in
+2.1.0 and were held back before it, because each read codecave.pro's own route
+table or menu data directly — installing one would have put that site's
+navigation behind an npm release, so changing a menu item would mean publishing.
+They now take the same information as props: `basePath` on `ArticlePreview`,
+`items` on `link-group` and `services-list`, `serviceLinks` and `ctaHref` on
+`technologies`, `href` on `technology-card`, `items` and `logo` on
+`mobile-menu`. `BrandNav` was the first to be built that way and is the reason
+the rest could follow.
 
 ```vue
 <BrandNav

package/dist/src/components/common/ArticlePreview.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { formattedDate } from "../../helpers/date-formatter.ts";
+
+/* The fields this component actually reads, instead of the generated Strapi
+ * `Article`. TypeScript is structural, so a real Article still satisfies this
+ * -- callers pass exactly what they passed before -- but the component no
+ * longer carries the CMS schema with it. */
+type ArticleSummary = {
+  slug: string | null
+  title: string
+  excerpt: string
+  date: Date | null
+  locale: string | null
+  readingtime: unknown
+  cover: { url: string; name: string }
+}
+
+const props = defineProps<{
+  article: ArticleSummary
+  className?: string
+  /* CMS media URLs arrive relative ("uploads/x.png"). The site injects its own
+   * resolver; a caller whose URLs are already absolute passes nothing. */
+  resolveImage?: (url: string) => string
+  /* Prefix the slug is appended to. Was `paths.insights`, read straight off
+   * this site's route table -- the last thing keeping this component from
+   * being installable. The caller owns where its articles live. */
+  basePath?: string
+}>()
+
+const imageUrl = (url: string) => props.resolveImage?.(url) ?? url
+</script>
+
+<template>
+  <a :href="`${basePath ?? ''}${article.slug}/`" :class="`mx-1 lg:mx-2 w-full h-full self-start sm:self-auto p-6 flex flex-col gap-5 sm:gap-8
+      rounded-[2.25rem] bg-surface-secondary hover:bg-surface-secondary transition-colors cursor-pointer border-surface-tertiary border
+      ${className ?? ''}`">
+    <div class="flex flex-col sm:flex-row gap-5 sm:gap-8 h-fit">
+      <img loading="lazy" class="sm:w-[132px] sm:h-[132px] rounded-xl object-cover" 
+        :src="imageUrl(article.cover.url)" 
+        :alt="article.cover.name" 
+        :width="100" 
+        :height="100"/>
+      <div class="space-y-2 sm:space-y-3">
+        <time class="text-body-secondary text-xs sm:text-sm" :datetime="article.date?.toString()">
+          {{ formattedDate(article.locale, article.date) }}
+        </time>
+        <h3 class="font-bold text-lg md:text-xl text-heading">
+          {{ article.title }}
+        </h3>
+      </div>
+    </div>
+    <div class="text-sm flex flex-col justify-between h-full">
+      <p class="text-body-secondary-lighter">
+        {{ article.excerpt }}
+      </p>
+      <p class="text-xs sm:text-sm text-body-secondary mt-6 sm:mt-7">
+        Reading time: {{ article.readingtime }} m.
+      </p>
+    </div>
+  </a>
+</template>

package/dist/src/components/common/BrandNav.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 /**
- * The CODECAVE top bar. Ghost-button links split around a centred wordmark.
+ * The CODECAVE top bar. Ghost-style links split around a centred wordmark.
  *
  * AUTHORED, not captured. Every other component this package ships is a copy of
  * a file codecave.pro builds from, and docs/source_examples/ holds nothing
@@ -9,8 +9,8 @@
  * into one, so neither repo owns it any more.
  *
  * WHY IT CAN SHIP WHEN THE MENUS COULD NOT. desktop-menu.vue and mobile-menu.vue
- * are excluded from this package (CCWEB2-371) because they reach the site paths.ts
- * and menu.ts -- installing one would put codecave.pro navigation behind an npm
+ * were excluded from this package (CCWEB2-371) because they reach the site
+ * menu.ts -- installing one would put codecave.pro navigation behind an npm
  * release. This takes its items, its logo and its active state as PROPS, so it
  * reaches nothing. That is the whole difference, and it is why the same bar can
  * serve a marketing site and a documentation site without either one lending the
@@ -20,6 +20,17 @@
  * HTML and ships no JavaScript, which is what the docs bar already does and what
  * the site header does NOT -- it is `client:only`, so it renders nothing at all
  * until Vue boots. The dropdown below is CSS hover for the same reason.
+ *
+ * IT NEEDS tokens.css AND NOTHING ELSE. The links are styled here rather than
+ * borrowed, and that is deliberate: the two ghost buttons this system already
+ * has DISAGREE, so there was nothing to borrow. colors_and_type.css's
+ * `.btn-ghost` renders 48px, because it cancels `height` while `.btn` sets
+ * `min-height`; Button.vue's `ghost` variant renders 40px, because it drops the
+ * `min-h-12` off its base class. Eight pixels, one of them a dead override of
+ * the kind CCWEB2-331 records elsewhere. Neither is portable either -- a docs
+ * page has the stylesheet and no Tailwind, a consumer site has Tailwind and not
+ * the stylesheet. Standing on tokens instead means this bar renders the same in
+ * both, and a consumer needs no global class layer to install it.
  */
 export interface NavItem {
   /** Link text, and the value `current` is matched against. */
@@ -28,6 +39,11 @@ export interface NavItem {
   href?: string;
   /** Names a slot to render as a hover dropdown under this item. */
   slot?: string;
+  /** Draws the attention dot. codecave.pro puts it on "Contact us"; it used to
+   *  be a `ul:last-of-type li:last-child::after` rule, which meant the marker
+   *  belonged to a POSITION rather than to an item and moved on its own the
+   *  first time the menu was reordered. Naming the item is the fix. */
+  badge?: boolean;
 }
 
 withDefaults(defineProps<{
@@ -39,7 +55,14 @@ withDefaults(defineProps<{
    *  its own asset pipeline, and this package ships no brand marks. */
   logo: string;
   logoHref?: string;
+  /** Alt text of the wordmark image. */
   logoAlt?: string;
+  /** Accessible name of the wordmark LINK, when it should differ from the alt
+   *  text -- "CODECAVE design system, documentation home" reads better on a
+   *  home link than the wordmark does. Left off, the link is named by the image
+   *  alt, which is the right default and the reason this is not simply
+   *  `logoAlt` twice. */
+  logoLabel?: string;
   /** `name` of the item to mark aria-current="page". */
   current?: string;
 }>(), {
@@ -54,33 +77,33 @@ withDefaults(defineProps<{
   <nav class="brand-nav" aria-label="Main">
     <div class="brand-nav-inner">
       <ul>
-        <li v-for="item in left" :key="item.name" :class="{ dropdown: item.slot }">
+        <li v-for="item in left" :key="item.name" :class="{ dropdown: item.slot, badged: item.badge }">
           <a
             v-if="item.href"
-            class="btn btn-ghost"
+            class="brand-nav-link"
             :href="item.href"
-            :aria-current="item.name === current ? &apos;page&apos; : undefined"
+            :aria-current="item.name === current ? 'page' : undefined"
           >{{ item.name }}</a>
-          <span v-else class="btn btn-ghost dropbtn">{{ item.name }}<slot name="chevron" /></span>
+          <span v-else class="brand-nav-link dropbtn">{{ item.name }}<slot name="chevron" /></span>
           <div v-if="item.slot" class="dropdown-content">
             <slot :name="item.slot" />
           </div>
         </li>
       </ul>
 
-      <a class="brand-nav-logo" :href="logoHref" :aria-label="logoAlt">
+      <a class="brand-nav-logo" :href="logoHref" :aria-label="logoLabel">
         <img :src="logo" :alt="logoAlt" />
       </a>
 
       <ul>
-        <li v-for="item in right" :key="item.name" :class="{ dropdown: item.slot }">
+        <li v-for="item in right" :key="item.name" :class="{ dropdown: item.slot, badged: item.badge }">
           <a
             v-if="item.href"
-            class="btn btn-ghost"
+            class="brand-nav-link"
             :href="item.href"
-            :aria-current="item.name === current ? &apos;page&apos; : undefined"
+            :aria-current="item.name === current ? 'page' : undefined"
           >{{ item.name }}</a>
-          <span v-else class="btn btn-ghost dropbtn">{{ item.name }}<slot name="chevron" /></span>
+          <span v-else class="brand-nav-link dropbtn">{{ item.name }}<slot name="chevron" /></span>
           <div v-if="item.slot" class="dropdown-content">
             <slot :name="item.slot" />
           </div>
@@ -91,16 +114,11 @@ withDefaults(defineProps<{
 </template>
 
 <style scoped>
-/* Layout only. Every colour comes from colors_and_type.css, which ships beside
- * this file -- .btn-ghost included, so the links are the same ghost buttons the
- * rest of the system uses and a palette change moves the bar with it.
- *
- * The three values that used to differ between the site bar and the docs bar are
- * settled here on the docs side: 16px links on the 48px --control-height grid,
- * a 28px wordmark, and the 1px rule underneath. The site had shrunk all three
- * with a text-sm wrapper, which quietly took its ghost buttons off the control
- * grid every other control sits on. */
+/* Every colour and nearly every length below is a token from tokens.css. The
+ * literals that remain are the link padding and the blur radius, neither of
+ * which the token set names. */
 .brand-nav {
+  --brand-nav-pad: 0.75rem;      /* the site header's py-3 */
   position: sticky;
   top: 0;
   z-index: 100;
@@ -111,14 +129,28 @@ withDefaults(defineProps<{
 }
 
 .brand-nav-inner {
-  box-sizing: border-box;
+  box-sizing: border-box;   /* the site resets this globally; a docs page does not */
   position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
   max-width: var(--max-width-desktop);
   margin: 0 auto;
-  padding: 0.75rem 1.25rem;
+  /* Pins the row, so the bar's height follows --control-height rather than
+     whatever the links happen to measure. */
+  min-height: calc(var(--control-height) + 2 * var(--brand-nav-pad));
+  padding: var(--brand-nav-pad) var(--gutter-base);
+}
+
+/* The page gutter, stepped at the same two breakpoints .page-container steps at.
+   It is repeated here rather than read off --gutter-base because that token does
+   not change with the viewport -- the class switches to a different token
+   instead. A bar that skipped this sat 20px inboard of every heading it topped. */
+@media (min-width: 768px) {
+  .brand-nav-inner { padding-left: var(--gutter-md); padding-right: var(--gutter-md); }
+}
+@media (min-width: 1280px) {
+  .brand-nav-inner { padding-left: var(--gutter-xl); padding-right: var(--gutter-xl); }
 }
 
 .brand-nav ul {
@@ -128,6 +160,47 @@ withDefaults(defineProps<{
   padding: 0;
   list-style: none;
 }
+.brand-nav li { margin: 0; }
+
+/* The ghost button, declared rather than inherited. See the note in the script
+   block: the two that exist disagree by 8px, and neither is available in both of
+   the places this bar has to render. */
+.brand-nav-link {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--control-height);
+  padding: 0.5rem 1.5rem;
+  border-radius: var(--radius-pill);
+  color: var(--color-body-primary);
+  font-family: var(--font-sans);
+  font-size: var(--text-body);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--leading-body);
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color var(--transition-colors);
+}
+.brand-nav-link:hover,
+.brand-nav-link:active { color: var(--color-hovered); }
+
+/* The attention dot. Sized and placed against the 48px row rather than the 40px
+   one the site drew it on, so it stays clear of the pill's right edge. */
+.badged { position: relative; }
+.badged::after {
+  content: "";
+  position: absolute;
+  top: 15px;
+  right: 8px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--color-error-400);
+  box-shadow: 0 0 12px 0 var(--color-error-400),
+              0 0 4px 0 hsl(from var(--color-error-400) h s l / 0.5);
+}
 
 .brand-nav-logo {
   position: absolute;

package/dist/src/components/footer/link-group.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import Button from "../common/Button.vue";
+
+/* Declared here rather than imported from ./links.ts, which is this site's
+ * footer content. TypeScript is structural, so every existing caller still
+ * passes exactly what it passed before -- links.ts's own `Link` satisfies this
+ * -- but the component no longer reaches out of itself for a two-field shape.
+ * Same reasoning as ArticlePreview.vue's ArticleSummary. */
+type LinkItem = {
+  name: string
+  href: string
+}
+
+defineProps<{
+  groupName: string
+  items: LinkItem[]
+}>()
+</script>
+
+<template>
+  <div class="space-y-4">
+    <p class="text-body-secondary uppercase font-bold text-xs">
+      {{ groupName }}
+    </p>
+    <div class="space-y-3 xl:space-y-2 text-sm">
+      <div :key="index" v-for="(item, index) in items">
+        <Button
+            :title="item.name"
+            as="link"
+            :href="item.href"
+            variant="text"
+        />
+      </div>
+    </div>
+  </div>
+</template>

package/dist/src/components/header/mobile-menu.vue

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import Button from "../common/Button.vue";
+import Shevron from "../../assets/icons/shevron.vue";
+import { computed, onUnmounted, ref, watch } from "vue";
+import BackIcon from "../../assets/icons/back-icon.vue";
+import ServicesList from "./services-list.vue";
+
+/* Everything this drawer used to read out of menu.ts, paths.ts and the site's
+ * logo asset now arrives as props, so it reaches no route table and no asset
+ * pipeline of its own.
+ *
+ * The Services branch keys off `submenu` being present rather than off the
+ * label being the string "Services"; mobileTitle and emphasis carry the two
+ * other wordings that were hard-coded here. */
+const props = defineProps<{
+  items: {
+    name: string
+    link?: string
+    submenuTitle?: string
+    submenu?: { icon: unknown; name: string; description: string; link: string }[]
+    mobileTitle?: string
+    emphasis?: boolean
+  }[]
+  /** Resolved URL of the wordmark. */
+  logo: string
+  homeHref?: string
+}>()
+
+const servicesItem = computed(() => props.items.find((i) => i.submenu?.length))
+
+const isMenuOpen = ref(false)
+const isServicesOpen = ref(false)
+let scrollPosition = 0
+
+const lockScroll = () => {
+  scrollPosition = window.scrollY || window.pageYOffset
+
+  document.body.style.overflow = 'hidden'
+  document.body.style.position = 'fixed'
+  document.body.style.top = `-${scrollPosition}px`
+  document.body.style.width = '100%'
+
+  const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth
+  if (scrollbarWidth > 0) {
+    document.body.style.paddingRight = `${scrollbarWidth}px`
+  }
+}
+
+const unlockScroll = () => {
+  document.body.style.position = ''
+  document.body.style.top = ''
+  document.body.style.width = ''
+  document.body.style.paddingRight = ''
+  document.body.style.overflow = ''
+  window.scrollTo(0, scrollPosition)
+}
+
+watch(isMenuOpen, (newVal) => {
+  if (newVal) {
+    lockScroll()
+  } else {
+    unlockScroll()
+  }
+})
+
+onUnmounted(() => {
+  if (isMenuOpen.value) {
+    unlockScroll()
+  }
+})
+const handleCloseMenu = () => {
+  isMenuOpen.value = false
+}
+</script>
+
+<template>
+  <div>
+    <div :class="`fixed z-50 top-0 w-full bg-surface-primary-transparent backdrop-blur-3xl ${isMenuOpen ? 'rounded-b-3xl' : 'rounded-none'}`">
+      <div :class="`h-full px-5 ${isMenuOpen ? 'pb-5' : 'pb-0'} flex flex-col gap-2 transition-all`">
+        <div class="flex justify-between items-center py-1.5">
+          <a :href="homeHref" class="px-1.5 hover:opacity-80 transition-opacity">
+            <img :src="logo" alt="CODECAVE" />
+          </a>
+          <button @click="isMenuOpen = !isMenuOpen" :class="`burger-menu ${isMenuOpen ? 'text-action' : 'text-heading'} transition-colors`">
+            <span></span>
+          </button>
+        </div>
+        <nav v-if="isMenuOpen" class="h-full text-sm">
+          <div v-if="isServicesOpen">
+            <h2 class="text-center font-bold text-body-primary py-2.5">
+              {{ servicesItem?.submenuTitle }}
+            </h2>
+            <ServicesList :items="servicesItem?.submenu ?? []" />
+            <button class="pt-4" @click="isServicesOpen = false">
+              <component class="w-11 h-11 text-action" :is="BackIcon" />
+            </button>
+          </div>
+          <ul v-else class="h-full flex flex-col items-center gap-3 justify-around px-4 pt-2">
+            <li v-for="(item, index) in items" :key="index">
+              <div v-if="item.submenu?.length">
+                <Button :title="item.name" variant="ghost" @click="isServicesOpen = true" class="transition-transform duration-150 pr-1">
+                  <Shevron class="rotate-270 ml-1" />
+                </Button>
+              </div>
+              <Button v-else-if="item.emphasis" as="link" :href="item.link" :title="item.mobileTitle ?? item.name" variant="tertiary" @click="handleCloseMenu" />
+              <Button v-else as="link" variant="ghost" :title="item.mobileTitle ?? item.name" :href="item.link" />
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+    <div v-if="isMenuOpen" class="fixed z-0 inset-0" @click="handleCloseMenu">
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.burger-menu {
+  display: flex;
+  justify-content: space-around;
+  flex-direction: column;
+  padding: 0.625rem;
+  width: 3rem;
+  height: 3rem;
+}
+
+.burger-menu::before,
+.burger-menu::after,
+.burger-menu span {
+  content: '';
+  width: 100%;
+  height: 0.1rem;
+  background-color: currentColor;
+  border-radius: 3rem;
+}
+</style>

package/dist/src/components/header/services-list.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+/* The submenu entries to render. This read menu.ts directly, which is this
+ * site's navigation content -- the one thing keeping the component out of the
+ * brand package. The caller passes the list instead. */
+defineProps<{
+  items: {
+    icon: unknown
+    name: string
+    description: string
+    link: string
+  }[]
+}>()
+</script>
+
+<template>
+  <ul class="grid xl:grid-cols-2 gap-3.5 xl:gap-x-8 xl:gap-y-4">
+    <li v-for="item in items" :key="item.name">
+      <a :href="item.link" class="flex items-center gap-3 group">
+        <div class="w-fit p-3 rounded-xl bg-surface-tertiary">
+          <component
+              class="w-5 h-5 text-default-transparent group-active:text-hovered group-hover:text-hovered transition-colors"
+              :is="item.icon"
+          />
+        </div>
+        <div class="text-sm">
+          <h3 class="font-bold text-heading group-active:text-hovered group-hover:text-hovered transition-colors">
+            {{ item.name }}
+          </h3>
+          <p class="text-body-secondary-lighter group-active:text-hovered group-hover:text-hovered transition-colors">
+            {{ item.description }}
+          </p>
+        </div>
+      </a>
+    </li>
+  </ul>
+</template>

package/dist/src/components/homepage/technologies.vue

@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import { Carousel, type CarouselConfig, Slide } from "vue3-carousel";
+import "vue3-carousel/carousel.css";
+import { BREAKPOINTS } from "../../helpers/breakpoints.ts";
+import GlowButton from "../common/GlowButton.vue";
+import TypingEffect from "../common/effects/TypingEffect.vue";
+import TechnologyCard from "./technology-card.vue";
+import { carouselGestureLocker } from "../../helpers/carousel-gesture-locker.ts";
+
+/* See ArticlePreview.vue: the fields read here, not the generated Strapi
+ * `Technology`, which a caller may still pass unchanged. This component
+ * renders no images, so it needs no resolver. */
+type TechnologySummary = {
+  name: string
+  title1: string
+  title2: string
+}
+
+const props = defineProps<{
+  technologies: TechnologySummary[]
+  hideSelected?: boolean
+  /* Where the consultation button goes. Was `paths.contactUs`, read straight
+   * off this site's route table. */
+  ctaHref?: string
+  /* Technology name to service URL. Plain data rather than a resolver function
+   * because every call site mounts this with `client:only`, and Astro can only
+   * hand an island props it can serialise. @helpers/service-links.ts holds the
+   * site's map; a name that is missing renders an inert button. */
+  serviceLinks?: Record<string, string>
+}>()
+
+const activeIndex = ref(0)
+const defaultAutoplayValue = 12000
+const autoplay = ref(defaultAutoplayValue)
+const handleMouseOver = (index: number) => {
+  activeIndex.value = index
+  autoplay.value = 0
+}
+const selectedTechnology = computed(() => {
+  return props.technologies[activeIndex.value]
+})
+const handleMouseLeave = () => {
+  activeIndex.value = 0
+  autoplay.value = defaultAutoplayValue
+}
+const config = computed<Partial<CarouselConfig>>(() => ({
+  gap: 8,
+  itemsToShow: 'auto',
+  autoplay: autoplay.value,
+  wrapAround: true,
+  height: 220,
+  snapAlign: 'center',
+  pauseAutoplayOnHover: true,
+  transition: 500,
+  breakpoints: {
+    [BREAKPOINTS.md]: {
+      gap: 16,
+    },
+    [BREAKPOINTS.xl]: {
+      enabled: false,
+    },
+  }
+}))
+const carouselLocker = carouselGestureLocker()
+</script>
+
+<template>
+  <section :class="`page-container
+          ${hideSelected ? 'pt-8' : 'flex flex-col pt-4 md:pt-14 pb-20 xl:pb-0 swipe-over'}`">
+    <div v-if="!hideSelected" class="flex flex-col items-center text-center">
+      <div class="space-y-3">
+        <div class="flex justify-center gap-6 font-bold text-xl">
+          <div class="flex flex-col xl:flex-row xl:gap-2">
+            <span class="text-body-primary">15+</span>
+            <span class="text-body-secondary-lighter">Years of experience</span>
+          </div>
+          <div class="flex flex-col xl:flex-row xl:gap-2">
+            <span class="text-body-primary">4.8</span>
+            <span class="text-body-secondary-lighter">Average rating</span>
+          </div>
+        </div>
+        <TypingEffect
+            :text1="selectedTechnology.title1"
+            :text2="selectedTechnology.title2"
+        />
+      </div>
+    </div>
+    <div v-if="!hideSelected" class="self-center pt-10 pb-[4.5rem] md:pt-14 md:pb-16">
+      <GlowButton title="Get a free consultation" :href="ctaHref" />
+    </div>
+    <div v-else class="pt-[7.5rem] pb-20 space-y-7 text-center">
+      <h2 class="font-bold text-heading-md text-heading">
+        Looking for something specific?
+      </h2>
+      <p class="text-xl mx-auto max-w-lg text-body-secondary-lighter">
+        We offer a variety of services that might be a game-changer for your business.
+      </p>
+    </div>
+    <div class="hidden xl:block relative h-80">
+      <div
+          v-for="(item, index) in technologies"
+          :key="index"
+          @mouseover="handleMouseOver(index)"
+          @mouseleave="handleMouseLeave"
+      >
+        <TechnologyCard
+            :name="item.name"
+            :href="serviceLinks?.[item.name]"
+            :active="activeIndex === index"
+            className="w-72 h-72"
+            :index="index"
+        />
+      </div>
+    </div>
+      <div ref="carouselLocker">
+        <Carousel
+            v-model="activeIndex"
+            v-bind="config"
+            class="-mx-4 xl:mx-0 xl:hidden"
+        >
+          <Slide v-for="(item, index) in technologies" :key="index">
+            <div class="flex items-center w-[190px] h-[220px]">
+            <TechnologyCard
+                :name="item.name"
+                :href="serviceLinks?.[item.name]"
+                :active="activeIndex === index"
+                :className="`w-full h-full ${activeIndex === index ? 'max-h-full' : 'max-h-[190px]'}`"
+            />
+            </div>
+          </Slide>
+        </Carousel>
+    </div>
+  </section>
+</template>

package/dist/src/components/homepage/technology-card.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import Button from "../common/Button.vue";
+
+defineProps<{
+  active: boolean
+  name: string
+  /* Where "Explore service" goes. The card used to switch on `name` over this
+   * site's six service routes; that map is now @helpers/service-links.ts and
+   * the caller passes the result, so the card reaches no route table. An empty
+   * string renders the button inert, exactly as the switch's default did. */
+  href?: string
+  className?: string
+  index?: number
+}>()
+
+const rotate = [
+  '-rotate-4 left-2 top-10',
+  '-rotate-1 left-1/4 top-20',
+  'rotate-1 left-1/2 top-20',
+  'rotate-4 right-2 top-10',
+  '-rotate-2 right-2/3 top-3/5',
+  'rotate-2 left-2/3 top-3/5',
+]
+
+const translate = [
+  'xl:-translate-y-1/3',
+  'xl:-translate-y-1/3',
+  'xl:-translate-y-1/3',
+  'xl:-translate-y-1/3',
+  'xl:-translate-y-1/2',
+  'xl:-translate-y-1/2',
+]
+</script>
+
+<template>
+  <div :class="`rounded-3xl card-wrapper cursor-pointer select-none absolute transform transition-transform duration-500
+  ${rotate[index]} ${active ? `${translate[index]}` : ''} ${className || ''}`">
+    <div class="card flex flex-col items-center justify-around">
+      <h3 class="max-w-[8rem] text-center text-xl font-bold text-heading text-balance">
+        {{ name }}
+      </h3>
+      <Button as="link" :href="href ?? ''" title="Explore service" variant="tertiary" :class="`${active ? 'block' : 'hidden xl:block xl:opacity-0'}`" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.card-wrapper {
+  background:
+    linear-gradient(hsl(from var(--color-technology-gradient-25) h s l / 0.1),
+      hsl(from var(--color-technology-gradient-0) h s l / 0.1),
+      hsl(from var(--color-technology-gradient-50) h s l / 0.1)) border-box;
+}
+
+.card {
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  position: relative;
+  background: transparent;
+  backdrop-filter: blur(14px);
+}
+
+.card::before {
+  content: '';
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  border-radius: inherit;
+  border: 1px solid transparent;
+  outline: 1px solid transparent;
+  -webkit-backface-visibility: hidden;
+  transform: translate3d(0, 0, 0);
+  background: linear-gradient(hsl(from var(--color-brand-500) h s l / 0.35),
+      hsl(from var(--color-brand-400) h s l / 0.675),
+      var(--color-brand-500)) border-box;
+  mask: linear-gradient(black, black) border-box,
+    linear-gradient(black, black) padding-box;
+  mask-composite: subtract;
+}
+</style>

package/dist/src/helpers/breakpoints.ts

@@ -0,0 +1,5 @@
+export const BREAKPOINTS = {
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+}

package/dist/src/helpers/carousel-gesture-locker.ts

@@ -0,0 +1,72 @@
+import { onMounted, onUnmounted, ref } from 'vue';
+
+export function carouselGestureLocker() {
+  const carouselRoot = ref<HTMLElement | null>(null)
+
+  let viewport: HTMLElement | null = null
+
+  let startX = 0
+  let startY = 0
+  let gestureLocked = false
+  let isVerticalGesture = false
+
+  const onTouchStart = (e: TouchEvent) => {
+    startX = e.touches[0].clientX
+    startY = e.touches[0].clientY
+
+    gestureLocked = false
+    isVerticalGesture = false
+  }
+
+  const onTouchMove = (e: TouchEvent) => {
+    const dx = Math.abs(e.touches[0].clientX - startX)
+    const dy = Math.abs(e.touches[0].clientY - startY)
+
+    if (!gestureLocked) {
+      if (dx < 10 && dy < 10) return
+
+      gestureLocked = true
+      isVerticalGesture = dy > dx
+    }
+
+    if (isVerticalGesture) {
+      e.stopImmediatePropagation()
+    }
+  }
+
+  const onTouchEnd = () => {
+    gestureLocked = false
+    isVerticalGesture = false
+  }
+
+  onMounted(() => {
+
+    viewport =
+      carouselRoot.value?.querySelector('.carousel__viewport') ?? null
+
+    if (!viewport) return
+
+    viewport.addEventListener('touchstart', onTouchStart, {
+      passive: true,
+    })
+
+    viewport.addEventListener('touchmove', onTouchMove, {
+      passive: false,
+    })
+
+    viewport.addEventListener('touchend', onTouchEnd)
+
+    viewport.addEventListener('touchcancel', onTouchEnd)
+  })
+
+  onUnmounted(() => {
+    if (!viewport) return
+
+    viewport.removeEventListener('touchstart', onTouchStart)
+    viewport.removeEventListener('touchmove', onTouchMove)
+    viewport.removeEventListener('touchend', onTouchEnd)
+    viewport.removeEventListener('touchcancel', onTouchEnd)
+  })
+
+  return carouselRoot;
+}

package/dist/src/helpers/date-formatter.ts

@@ -0,0 +1,10 @@
+export const formattedDate = (locale: string | null, date: Date | null) => {
+if (!locale || !date) return '';
+
+    const newDate = new Date(date)
+    return new Intl.DateTimeFormat(locale, {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric'
+    }).format(newDate)
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codecavepro/brand",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "CODECAVE design system — colour, typography and layout tokens as CSS custom properties and as a typed module.",
   "license": "Unlicense",
   "type": "module",
@@ -41,7 +41,8 @@
     "gsap": "^3.13.0",
     "isomorphic-dompurify": "^3.22.0",
     "marked": "^18.0.5",
-    "vue": "^3.5.22"
+    "vue": "^3.5.22",
+    "vue3-carousel": "^0.17.0"
   },
   "peerDependenciesMeta": {
     "gsap": {
@@ -52,6 +53,9 @@
     },
     "marked": {
       "optional": true
+    },
+    "vue3-carousel": {
+      "optional": true
     }
   },
   "scripts": {