@codecavepro/brand 2.8.1 → 3.0.0

package/README.md

@@ -155,7 +155,7 @@ Two things to know about it:
 
 ## The components
 
-22 components and 13 icons — the buttons, the form controls and the forms
+20 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
@@ -212,8 +212,7 @@ surprises you.
 
 `vue` is the only required peer. Four more are optional, each wanted by one or two
 components; leave one out and only those are affected — `gsap` by `GlowButton.vue`,
-`effects/TypingEffect.vue` and `forms/ContactUsForm.vue`; `vue3-carousel` by
-`homepage/technologies.vue`; `marked` and `isomorphic-dompurify` by
+`effects/TypingEffect.vue` and `forms/ContactUsForm.vue`; `marked` and `isomorphic-dompurify` by
 `project/pain-points-item.vue`.
 
 ### Import the theme, not just the tokens

package/dist/colors_and_type.css

@@ -619,7 +619,7 @@ a:hover { color: var(--color-hovered); }
 
 /* ---------------------------------------------------------------------------
  * Cards — sources: homepage/projects.astro, common/ArticlePreview.vue,
- *                  homepage/technology-card.vue
+ *                  common/technology-card.vue
  * Depth is never built from surface contrast: the card sits ONE narrow step
  * off the page (#0F0F15 on #0A0A0B). Radius and border carry the separation.
  * ------------------------------------------------------------------------ */
@@ -636,7 +636,7 @@ a:hover { color: var(--color-hovered); }
 .card-article { border-radius: var(--radius-article); }
 
 /* Feature card — gradient hairline drawn with mask-composite, blurred
- * backdrop, no fill. Source: homepage/technology-card.vue.
+ * backdrop, no fill. Source: common/technology-card.vue.
  * Since the rebuild brand-400 is violet (#5F3ABD), so the ring reads violet
  * end to end; cyan survives only in the wash tokens above. */
 .card-feature {

package/dist/src/common/HeaderBrows.vue

@@ -1,12 +1,21 @@
+<script setup lang="ts">
+import Button from "./Button.vue";
+
+const props = defineProps<{
+  brows: {
+    header: string;
+    description: string;
+  }[]
+}>()
+</script>
+
 <template>
     <div class="flex flex-col md:flex-row gap-4 md:gap-6 text-lg md:text-xl">
+      <div v-for="brow in props.brows">
           <div class="space-x-1">
-            <span class="font-bold text-body-primary">15+</span>
-            <span class="text-body-secondary">Years of experience</span>
+            <span class="font-bold text-body-primary">{{ brow.header }}</span>
+            <span class="text-body-secondary">{{ brow.description }}</span>
           </div>
-          <div class="space-x-1">
-            <span class="font-bold text-body-primary">4.7</span>
-            <span class="text-body-secondary">Average rating</span>
-          </div>
-        </div>
+      </div>
+    </div>
 </template>

package/dist/src/{homepage → common}/technology-card.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Button from "../common/Button.vue";
+import Button from "./Button.vue";
 import { computed } from 'vue'
 
 const props = defineProps<{

package/dist/src/footer/FooterCta.vue

@@ -1,5 +1,11 @@
 <script setup lang="ts">
 import Button from "../common/Button.vue";
+
+const props = defineProps<{
+  header?: string;
+  description?: string;
+  subDescription?: string;
+}>()
 </script>
 
 <template>
@@ -8,13 +14,13 @@ import Button from "../common/Button.vue";
 >
   <div class="flex-1">
     <h3 class="text-heading font-bold xl:text-[32px] text-2xl">
-      Grab our AI trends research!
+      {{ props.header }}
     </h3>
 
     <p class="md:mt-1 mt-4 text-body-secondary-lighter text-pretty">
-      We’ve researched current state of the AI in 3 industries so you don’t have to.
+      {{ props.description }}
       <br>
-      Check what we’ve found about yours.
+      {{ props.subDescription }}
     </p>
   </div>
 

package/package.json

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

package/dist/src/common/forms/ResearchForm.vue

@@ -1,56 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import InputText from '../InputText.vue'
-import Button from '../Button.vue'
-import { isCorrectEmailFormat } from "../../helpers/form-validator.ts";
-
-const email = ref('')
-
-const hasError = ref(false)
-const emailErrorMessage = ref('')
-
-const submitForm = () => {
-    hasError.value = false
-    emailErrorMessage.value = ''
-
-    if (!email.value.trim()) {
-        hasError.value = true
-        emailErrorMessage.value = 'This field is required'
-        return
-    }
-
-    if (!isCorrectEmailFormat(email.value)) {
-        hasError.value = true
-        emailErrorMessage.value = 'Please enter valid email'
-        return
-    }
-}
-</script>
-
-<template>
-    <form
-        novalidate
-        class="flex flex-col gap-4 md:flex-row md:items-center"
-        @submit.prevent="submitForm"
-    >
-        <div class="md:w-64 xl:w-80">
-            <InputText
-                id="file-email"
-                v-model="email"
-                is-required
-                :isError="hasError"
-                :errorMessage="emailErrorMessage"
-                label="E-mail"
-                type="email"
-                placeholder="Where should we send it?"
-                autocomplete="email"
-            />
-        </div>
-
-        <Button
-            title="Grab research"
-            variant="tertiary"
-            class="w-40 flex-shrink-0"
-        />
-    </form>
-</template>

package/dist/src/helpers/breakpoints.ts

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

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

@@ -1,72 +0,0 @@
-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/homepage/technologies.vue

@@ -1,136 +0,0 @@
-<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 HeaderBrows from "../common/HeaderBrows.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 text-xl">
-          <div class="space-x-1">
-            <span class="font-bold text-body-primary">15+</span>
-            <span class="text-body-secondary-lighter">Years of experience</span>
-          </div>
-          <div class="space-x-1">
-            <span class="font-bold text-body-primary">4.7</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>