@codecavepro/brand 1.0.0 → 1.2.0

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

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { gsap } from "gsap";
+
+const props = defineProps<{
+  title: string
+  class?: string
+  href?: string
+}>()
+const isTouchDevice = ref(false)
+const link = ref(null)
+const glow = ref(null)
+const edgeLeft = ref(null)
+const edgeRight = ref(null)
+let leaveTween = null
+const handleMouseMove = (e: MouseEvent) => {
+  if (isTouchDevice.value) return
+
+  const rect = link.value.getBoundingClientRect()
+  const x = e.clientX - rect.left
+  const y = e.clientY - rect.top
+  const percentX = x / rect.width
+  gsap.to(glow.value, {
+    left: x,
+    top: y,
+    duration: 0.5,
+    ease: 'power2.out',
+  })
+  const edgeZone = 0.1
+  let leftOpacity = 0
+  let rightOpacity = 0
+  if (percentX < edgeZone) {
+    leftOpacity = 1 - percentX / edgeZone
+  } else if (percentX > 1 - edgeZone) {
+    rightOpacity = (percentX - (1 - edgeZone)) / edgeZone
+  }
+  edgeLeft.value.style.opacity = leftOpacity
+  edgeRight.value.style.opacity = rightOpacity
+}
+const handleMouseEnter = () => {
+  if (isTouchDevice.value) return
+  if (leaveTween) {
+    leaveTween.kill()
+    leaveTween = null
+  }
+}
+const handleMouseLeave = () => {
+  edgeLeft.value.style.opacity = 1
+  edgeRight.value.style.opacity = 0
+  if (leaveTween) leaveTween.kill()
+  leaveTween = gsap.to(glow.value, {
+    left: '20%',
+    top: '50%',
+    duration: 1,
+    delay: 1,
+    ease: 'power2.out',
+  })
+}
+onMounted(() => {
+  isTouchDevice.value = window.matchMedia("(pointer: coarse)").matches
+    || "ontouchstart" in window
+    || navigator.maxTouchPoints > 0
+})
+</script>
+
+<template>
+  <div :class="`relative inline-block ${props.class ?? ''}`">
+    <div ref="edgeLeft" class="edge-glow -left-2"></div>
+    <a ref="link" :href="href" @mousemove="handleMouseMove" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave" :class="`cursor-pointer flex items-center justify-center relative z-[1] overflow-hidden w-full h-11 px-6 py-1 rounded-full bg-glow-25 ${props.class ?? ''}`">
+      <span class="relative z-[2] text-primary-800 font-bold select-none">
+        {{ title }}
+      </span>
+      <div ref="glow" class="glow"></div>
+    </a>
+    <div ref="edgeRight" class="edge-glow -right-2 opacity-0"></div>
+  </div>
+</template>
+
+<style scoped>
+a {
+  box-shadow: 0 0 64px 0 #7A58FFA8,
+    0 0 16px 0 #4F22FFA6,
+    0 0 4px 2px #5B34FA;
+  transition: transform 0.5s ease;
+}
+
+a:active {
+  transform: scale(0.98);
+}
+
+.edge-glow {
+  position: absolute;
+  z-index: 0;
+  pointer-events: none;
+  top: 50%;
+  width: 100%;
+  height: 80%;
+  transform: translateY(-50%);
+  transition: opacity 0.2s ease;
+  background: radial-gradient(55.23% 55.23% at 50% 50%,
+      #FFFFFF 27.88%,
+      rgba(223, 212, 249, 0.762963) 51.92%,
+      rgba(153, 128, 255, 0) 100%);
+  filter: blur(12px);
+}
+
+.glow {
+  position: absolute;
+  z-index: 1;
+  pointer-events: none;
+  top: 50%;
+  left: 20%;
+  transform: translateY(-50%) translateX(-50%);
+  width: 50%;
+  height: 200%;
+  background: radial-gradient(ellipse at left center,
+      #FFFFFF 27.88%,
+      rgba(223, 212, 249, 0.76) 51.92%,
+      rgba(153, 128, 255, 0) 100%);
+  filter: blur(12px);
+}
+</style>

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

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import AsteriskIcon from "../../assets/icons/asterisk-icon.vue";
+
+defineProps<{
+  id: string
+  label: string
+  type: 'text' | 'email'
+  autocomplete?: string
+  placeholder: string
+  isRequired?: boolean
+  isError?: boolean
+  errorMessage?: string,
+  modelValue?: string
+}>()
+
+defineEmits(['update:modelValue'])
+</script>
+
+<template>
+  <div class="w-full relative">
+    <label :for="id" class="absolute flex items-center gap-0.5 pl-3 pt-3 font-bold text-heading text-sm">
+      <span>{{ label }}</span>
+      <AsteriskIcon v-if="isRequired" />
+    </label>
+    <input :id="id" :type="type" :autocomplete="autocomplete" :placeholder="placeholder" :required="isRequired" :value="modelValue" @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)" 
+    :class="`
+        w-full p-3 pt-7 bg-surface-secondary rounded-lg placeholder:text-xs placeholder:text-body-secondary
+        focus:outline-none transition-colors
+        hover:bg-surface-tertiary
+        ${isError ? 'text-error input-error focus:text-error' : 'text-hovered focus:text-hovered'}
+       `" />
+    <span v-if="isError" class="text-error text-xs">
+      {{ errorMessage }}
+    </span>
+  </div>
+</template>
+
+<style scoped>
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  -webkit-box-shadow: 0 0 0 1000px var(--color-surface-tertiary) inset !important;
+  -webkit-text-fill-color: var(--color-heading) !important;
+  -webkit-background-clip: text !important;
+}
+
+input:focus {
+  box-shadow: 0 0 16px 0 hsl(from var(--color-brand-500) h s l / 0.5),
+    0 0 4px 0 hsl(from var(--color-brand-500) h s l / 0.6);
+}
+
+input.input-error:focus,
+.input-error {
+  box-shadow: 0 0 16px 0 hsl(from var(--color-error-200) h s l / 0.5),
+    0 0 4px 0 hsl(from var(--color-error-100) h s l / 0.6);
+}
+</style>

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

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps<{
+  id: string
+  label: string
+  name: string
+  isChecked?: boolean
+  modelValue?: string
+  variant?: 'primary' | 'secondary'
+}>()
+const baseLabelClass = 'w-fit flex items-center cursor-pointer text-body-primary transition-colors'
+const labelClass = computed(() => {
+  switch (props.variant) {
+    case 'secondary':
+      return `${baseLabelClass} gap-3 p-3 pr-4 bg-surface-primary-transparent rounded-custom border-2 border-surface-quaternary group-hover:bg-surface-tertiary`
+    default:
+      return `${baseLabelClass} gap-2 py-2 px-3 bg-surface-secondary rounded-lg`
+  }
+})
+
+defineEmits(['update:modelValue'])
+</script>
+
+<template>
+  <label
+      :for="id"
+      :class="[labelClass]"
+  >
+    <input
+        type="radio"
+        :id="id"
+        :name="name"
+        :value="id"
+        class="bg-transparent border-[2px] border-surface-quaternary checked:border-action rounded-full hover:border-action"
+        :checked="isChecked"
+        @change="$emit('update:modelValue', id)"
+    />
+    <span class="text-xs whitespace-nowrap">
+      {{ label }}
+    </span>
+  </label>
+</template>
+
+<style scoped>
+input {
+  width: 17px;
+  height: 17px;
+  appearance: none;
+  -webkit-appearance: none;
+  display: grid;
+  place-content: center;
+}
+
+input::before {
+  content: '';
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  transform: scale(0);
+  transition: var(--duration-control) transform ease-in-out;
+  background: var(--color-action);
+}
+
+input:checked::before {
+  transform: scale(1);
+}
+</style>

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

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+defineProps<{
+  id: string
+  label: string
+  placeholder: string
+  isRequired?: boolean
+  isError?: boolean
+  errorMessage?: string,
+  modelValue?: string
+}>()
+
+const textareaRef = ref(null)
+const autoResize = () => {
+  if (textareaRef.value) {
+    textareaRef.value.style.height = 'auto'
+    textareaRef.value.style.height = textareaRef.value.scrollHeight + 'px'
+  }
+}
+
+defineEmits(['update:modelValue'])
+</script>
+
+<template>
+  <div class="w-full relative">
+    <div :class="`focus-area flex flex-col min-h-[7.5rem] p-3 rounded-lg bg-surface-secondary hover:bg-surface-tertiary transition-colors text-heading 
+      ${isError ? 'input-error' : ''}`">
+      <label :for="id" class="font-bold text-sm select-none">
+        {{ label }}
+      </label>
+      <textarea 
+        @input="autoResize" 
+        ref="textareaRef" 
+        :id="id" :placeholder="placeholder" :value="modelValue" @change="$emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)" 
+        :class="`w-full flex-grow resize-none overflow-hidden placeholder:pt-1.5 placeholder:text-xs placeholder:text-body-secondary outline-none 
+        ${isError ? 'text-error focus:text-error' : 'text-hovered focus:text-hovered'}`" />
+    </div>
+    <span v-if="isError" class="text-error text-xs">
+      {{ errorMessage }}
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.focus-area:focus-within {
+  box-shadow: 0 0 16px 0 hsl(from var(--color-brand-500) h s l / 0.5),
+    0 0 4px 0 hsl(from var(--color-brand-500) h s l / 0.8);
+}
+
+.input-error {
+  box-shadow: 0 0 16px 0 hsl(from var(--color-error-200) h s l / 0.5),
+    0 0 4px 0 hsl(from var(--color-error-100) h s l / 0.6);
+}
+</style>

package/dist/src/components/common/effects/TypingEffect.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { gsap } from "gsap";
+import { SplitText } from "gsap/SplitText";
+import { nextTick, onMounted, watch } from "vue";
+
+const props = defineProps<{
+  text1: string
+  text2: string
+}>()
+
+const splitAnimation = () => {
+  gsap.registerPlugin(SplitText)
+  const split = SplitText.create('.split-text span', {
+    type: "words, chars"
+  })
+  gsap.from(split.chars, {
+    opacity: 0.5,
+    duration: 0.1,
+    stagger: 0.1,
+  })
+}
+onMounted(() => {
+  document.fonts.ready.then(() => {
+    splitAnimation()
+  })
+})
+watch(() => [props.text1, props.text2],
+    () => nextTick(splitAnimation))
+</script>
+
+<template>
+  <div class="flex flex-col items-center leading-[130%] text-heading-sm lg:text-heading-lg font-bold">
+    <h2 :key="text1" class="split-text">
+      <span class="block text-heading">{{ text1 }}</span>
+      <span class="block text-action">{{ text2 }}</span>
+    </h2>
+  </div>
+</template>

package/dist/src/components/common/forms/ContactUsForm.vue

@@ -0,0 +1,243 @@
+<script setup lang="ts">
+import GlowButton from "../GlowButton.vue";
+import InputText from "../InputText.vue";
+import Checkbox from "../Checkbox.vue";
+import Radio from "../Radio.vue";
+import TextField from "../TextField.vue";
+import { computed, ref, watch } from "vue";
+import SuccessIcon from "../../../assets/icons/success-icon.vue";
+import CloseIcon from "../../../assets/icons/close-icon.vue";
+import gsap from "gsap";
+import type {
+  ContactFormDefinition,
+  ContactFormValues,
+  CrmSubmitResult,
+  ICrmFormClient,
+} from "../../../lib/crm/types";
+import { isCorrectEmailFormat, isCorrectLinkedInFormat } from "../../../helpers/form-validator.ts";
+
+/* This component knows nothing about HubSpot, or about any other CRM. It is
+ * handed the labels to render and something that can accept a submission; who
+ * that something talks to is the caller's business. See lib/crm/types.ts. */
+const props = defineProps<{
+  definition: ContactFormDefinition
+  client: ICrmFormClient
+}>()
+
+const emit = defineEmits<{
+  (e: 'submit', values: ContactFormValues): void
+  (e: 'submitted', result: CrmSubmitResult): void
+}>()
+
+interface FormField<T = string> {
+  value: T
+  error: string
+  label: string
+  placeholder?: string
+  required: boolean
+  maxLength?: number
+}
+
+const createFormField = <T,>(name: keyof ContactFormDefinition, value: T): FormField<T> => {
+  const spec = props.definition[name]
+
+  return {
+    value,
+    error: '',
+    label: spec.label,
+    placeholder: spec.placeholder,
+    required: spec.required,
+    ...(spec.maxLength === undefined ? {} : { maxLength: spec.maxLength }),
+  }
+}
+
+const formData = ref({
+  email: createFormField('email', ''),
+  firstName: createFormField('firstName', ''),
+  lastName: createFormField('lastName', ''),
+  companyName: createFormField('companyName', ''),
+  linkedinCompanyPage: createFormField('linkedinCompanyPage', ''),
+  services: createFormField('services', ''),
+  description: createFormField('description', ''),
+  privacyPolicy: {
+    value: false,
+    error: '',
+    label: 'I agree with the privacy policy',
+    required: true
+  }
+})
+
+const services = computed(() => props.definition.services.options ?? [])
+
+const validateForm = () => {
+  resetErrorMessages();
+  let isValid = validateRequiredFields();
+
+  let description = formData.value.description;
+  let email = formData.value.email;
+  let linkedInPage = formData.value.linkedinCompanyPage;
+
+  if (email.value !== '' && !isCorrectEmailFormat(email.value)) {
+    email.error = 'Please enter valid email'
+    isValid = false
+  }
+  if (linkedInPage.value !== '' && !isCorrectLinkedInFormat(linkedInPage.value)) {
+    linkedInPage.error = 'Please enter valid LinkedIn page link'
+    isValid = false
+  }
+  if (description.maxLength !== undefined && description.value.length > description.maxLength) {
+    description.error = `You faced characters limits. Max length is ${description.maxLength}`
+    isValid = false
+  }
+
+  return isValid
+}
+
+const resetErrorMessages = () => Object.values(formData.value).forEach(field => field.error = '');
+
+const validateRequiredFields = () => {
+  let isValid = true
+
+  Object.values(formData.value).forEach(field => {
+    const isEmpty = field.value === '' || field.value === false
+
+    if (field.required && isEmpty) {
+      field.error = 'This field is required'
+      isValid = false
+    } else {
+      field.error = ''
+    }
+  })
+
+  return isValid
+}
+
+const resetForm = () => {
+  formData.value.email.value = '';
+  formData.value.firstName.value = '';
+  formData.value.lastName.value = '';
+  formData.value.companyName.value = '';
+  formData.value.linkedinCompanyPage.value = '';
+  formData.value.description.value = '';
+  formData.value.services.value = '';
+  formData.value.privacyPolicy.value = false;
+}
+
+const currentValues = (): ContactFormValues => ({
+  email: formData.value.email.value,
+  firstName: formData.value.firstName.value,
+  lastName: formData.value.lastName.value,
+  companyName: formData.value.companyName.value,
+  linkedinCompanyPage: formData.value.linkedinCompanyPage.value,
+  services: formData.value.services.value,
+  description: formData.value.description.value,
+  privacyPolicyAccepted: formData.value.privacyPolicy.value,
+})
+
+const isSubmitting = ref(false)
+
+const submitContactsForm = async () => {
+  if (isSubmitting.value || !validateForm()) {
+    return
+  }
+
+  const values = currentValues()
+  emit('submit', values)
+
+  isSubmitting.value = true
+  try {
+    const result = await props.client.submit(values)
+
+    if (result.ok) {
+      resetForm()
+      showAlert('success')
+    } else {
+      /* The previous code logged the failure and showed nothing, so a visitor
+       * whose enquiry never sent had no way to know. The wording below is a
+       * placeholder for a writer -- see CCWEB2-325. */
+      showAlert('error')
+    }
+
+    emit('submitted', result)
+  } finally {
+    isSubmitting.value = false
+  }
+}
+
+const alertKind = ref<'success' | 'error' | null>(null)
+const isAlertVisible = computed(() => alertKind.value !== null)
+
+const ALERT_TEXT = {
+  success: 'Sent! We will contact you within next 1-3 business days.',
+  error: 'We could not send your request. Please try again, or email us at hello@codecave.pro.',
+} as const
+
+const showAlert = (kind: 'success' | 'error') => {
+  if (alertKind.value !== null) return
+
+  alertKind.value = kind
+  setTimeout(() => {
+    alertKind.value = null
+  }, 10000)
+}
+
+watch(isAlertVisible, () => {
+  gsap.timeline()
+    .from('.form-alert', {
+      x: 120,
+      duration: 0.5,
+    })
+})
+
+</script>
+
+<template>
+  <form class="flex flex-col gap-14 relative" novalidate>
+    <div class="space-y-5">
+      <fieldset class="space-y-2">
+        <InputText id="email" v-model="formData.email.value" :isRequired=formData.email.required :label=formData.email.label type="email" :isError="!!formData.email.error" :errorMessage="formData.email.error" :placeholder="formData.email.placeholder ?? ''" autocomplete="email" />
+        <div class="flex flex-col xl:flex-row gap-2">
+          <InputText id="firstname" v-model="formData.firstName.value" :isRequired=formData.firstName.required :label=formData.firstName.label type="text" :isError="!!formData.firstName.error" :errorMessage="formData.firstName.error" :placeholder="formData.firstName.placeholder ?? ''" autocomplete="given-name" />
+          <InputText id="lastname" v-model="formData.lastName.value" :isRequired=formData.lastName.required :label=formData.lastName.label type="text" :isError="!!formData.lastName.error" :errorMessage="formData.lastName.error" :placeholder="formData.lastName.placeholder ?? ''" autocomplete="family-name" />
+        </div>
+        <div class="flex flex-col xl:flex-row gap-2">
+          <InputText id="companyName" v-model="formData.companyName.value" :isRequired=formData.companyName.required :label=formData.companyName.label type="text" :isError="!!formData.companyName.error" :errorMessage="formData.companyName.error" :placeholder="formData.companyName.placeholder ?? ''" />
+          <InputText id="linkedinCompanyPage" v-model="formData.linkedinCompanyPage.value" :isRequired=formData.linkedinCompanyPage.required :label=formData.linkedinCompanyPage.label type="text" :isError="!!formData.linkedinCompanyPage.error" :errorMessage="formData.linkedinCompanyPage.error" :placeholder="formData.linkedinCompanyPage.placeholder ?? ''" />
+        </div>
+      </fieldset>
+      <fieldset class="space-y-3">
+        <legend class="pl-3 text-sm text-heading font-bold">{{ formData.services.label }}</legend>
+        <div class="flex flex-wrap gap-2">
+          <Radio v-for="item in services" :key="item.id" :id="item.id" :label="item.label" v-model="formData.services.value" name="services" />
+        </div>
+      </fieldset>
+      <fieldset class="space-y-3">
+        <TextField id="project" v-model="formData.description.value" :isRequired=formData.description.required :label=formData.description.label :isError="!!formData.description.error" :errorMessage="formData.description.error" :placeholder="formData.description.placeholder ?? ''" />
+      </fieldset>
+      <div class="space-y-2">
+        <Checkbox id="privacy" v-model="formData.privacyPolicy.value" :label="formData.privacyPolicy.label" :isRequired="formData.privacyPolicy.required" :isError="!!formData.privacyPolicy.error" />
+        <Checkbox id="promotions" label="I agree to receive promotional materials" />
+      </div>
+    </div>
+    <GlowButton @click="submitContactsForm" title="Leave consultation request" class="self-center lg:self-start" />
+    <div v-show="isAlertVisible" class="border border-action group absolute bottom-19.25 md:fixed z-50 left-1/2 -translate-x-1/2 md:top-24 form-alert flex gap-2 md:gap-8 items-center justify-between w-full h-fit max-w-139 bg-surface-secondary p-4 md:px-6 md:py-2.5 rounded-3xl">
+      <div v-if="alertKind === 'success'" class="w-8 h-8">
+        <component :is="SuccessIcon" class="w-8 h-8" />
+      </div>
+      <p class="text-sm md:text-lg font-bold text-heading md:max-w-sm">
+        {{ alertKind ? ALERT_TEXT[alertKind] : '' }}
+      </p>
+      <button @click="alertKind = null" class="group-hover:text-action text-heading transition-colors cursor-pointer">
+        <component :is="CloseIcon" />
+      </button>
+    </div>
+  </form>
+</template>
+
+<style scoped>
+.form-alert {
+  box-shadow: 0 -34px 40px 0 #2814701A,
+    0 -10px 24px 0 #2814701A,
+    0 -6px 6px 0 #28147014;
+}
+</style>

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

@@ -0,0 +1,56 @@
+<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>