@codecavepro/brand 1.0.0 → 1.2.0

package/dist/src/components/common/images/LazyImage.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue';
+
+interface Props {
+  src: string;
+  alt?: string;
+  threshold?: number;
+  width?: number;
+  height?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  alt: '',
+  threshold:300,
+});
+
+const image = ref<HTMLImageElement | null>(null);
+
+let observer: IntersectionObserver | null = null;
+
+const loadImage = () => {
+  if (!image.value) {
+    return;
+  }
+
+  const src = image.value.dataset.src;
+
+  if (!src) {
+    return;
+  }
+
+  image.value.src = src;
+  image.value.removeAttribute('data-src');
+
+  observer?.disconnect();
+};
+
+onMounted(() => {
+  if (!image.value) {
+    return;
+  }
+  
+  observer = new IntersectionObserver(
+    (entries) => {
+      const entry = entries[0];
+
+      if (entry?.isIntersecting) {
+        loadImage();
+      }
+    },
+    {
+      rootMargin: `${props.threshold}px`,
+    },
+  );
+
+  observer.observe(image.value);
+});
+
+onUnmounted(() => {
+  observer?.disconnect();
+});
+</script>
+
+<template>
+  <img
+    ref="image"
+    :data-src="src"
+    :alt="alt"
+    :width="width"
+    :height="height"
+  />
+</template>

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

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import Button from "../common/Button.vue";
+import type { Link } from "./links.ts";
+
+defineProps<{
+  groupName: string
+  items: Link[]
+}>()
+</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/footer/links.ts

@@ -0,0 +1,52 @@
+import { paths } from "../../helpers/paths.ts";
+
+export interface Link {
+    name: string
+    href: string
+}
+
+export const services: Link[] = [
+    {name: 'AR & VR', href: paths.arVr},
+    {name: 'Cloud services', href: paths.devops},
+    {name: 'DevOps', href: paths.devops},
+    {name: 'E-commerce', href: paths.ecommerce},
+    {name: 'Web development', href: paths.ecommerce},
+    {name: 'UX\\UI design', href: paths.ecommerce},
+    {name: 'QA & testing', href: paths.ecommerce},
+    {name: 'Automation & AI', href: paths.automation},
+    {name: 'Autodesk plugins', href: paths.autodesk},
+    {name: 'Legacy modernization', href: paths.ecommerce},
+    {name: 'Data migration', href: paths.hubspot}, 
+    {name: 'HubSpot', href: paths.hubspot},
+]
+
+export const industries: Link[] = [
+    {name: 'eCommerce', href: '/'},
+    {name: 'Logistics', href: '/'},
+    {name: 'Healthcare', href: '/'},
+    {name: 'Manufacturing', href: '/'},
+    {name: 'Education', href: '/'},
+    {name: 'Finance', href: '/'},
+]
+
+export const other: Link[] = [
+    {name: 'Our projects', href: paths.projects},
+    {name: 'Feedback', href: paths.testimonials},
+    {name: 'How we work', href: paths.workflow},
+    {name: 'Our strong points', href: paths.strongPoints},
+    {name: 'Our tech stack', href: paths.toolsAndTechnologies},
+    {name: 'All Insights', href: paths.insights},
+    {name: 'F.A.Q.', href: '/#questions'}, 
+]
+
+export const reviews: Link[] = [
+    {name: 'Trustpilot', href: 'https://www.trustpilot.com/review/codecave.pro'},
+    {name: 'Glassdoor', href: 'https://www.glassdoor.com/Reviews/Employee-Review-CodeCave-E8324784-RVW95188942.htm'},
+    {name: 'Clutch', href: 'https://clutch.co/profile/codecave-0-1'},
+    {name: 'G2', href: 'https://www.g2.com/products/codecave/expertises'},
+]
+
+export const legal: Link[] = [
+    {name: 'Cookie policy', href: '/cookie-policy'},
+    {name: 'Privacy policy', href: '/privacy-policy'},
+]

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

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { menu } from "./menu.ts";
+import Button from "../common/Button.vue";
+import Shevron from "../../assets/icons/shevron.vue";
+import { paths } from "../../helpers/paths.ts";
+import Logo from "../../assets/images/logo.svg";
+import ServicesList from "./services-list.vue";
+</script>
+
+<template>
+  <div class="page-container py-3">
+    <nav class="flex justify-between items-center relative text-sm">
+      <ul class="flex">
+        <li v-for="(item, index) in menu.slice(0, 3)" :key="index">
+          <div v-if="item.name === 'Services'" class="dropdown">
+            <Button variant="ghost" class="cursor-pointer dropbtn" :title="item.name">
+              <Shevron class="ml-1" />
+            </Button>
+            <div class="dropdown-content bg-surface-primary-transparent backdrop-blur-3xl rounded-2xl p-5">
+              <ServicesList />
+            </div>
+          </div>
+          <Button v-else as="link" variant="ghost" :title="item.name" :href="item.link" />
+        </li>
+      </ul>
+      <a :href="paths.home" class="absolute left-1/2 -translate-x-1/2 hover:opacity-80 transition-opacity">
+        <img :src="Logo.src" alt="CODECAVE" />
+      </a>
+      <ul class="flex">
+        <li v-for="(item, index) in menu.slice(3, 5)" :key="index">
+          <Button as="link" variant="ghost" :title="item.name" :href="item.link" />
+        </li>
+      </ul>
+    </nav>
+  </div>
+</template>
+
+<style scoped>
+ul:last-of-type li:last-child {
+  position: relative;
+}
+
+ul:last-of-type li:last-child::after {
+  position: absolute;
+  content: '';
+  width: 10px;
+  height: 10px;
+  right: 8px;
+  top: 11px;
+  background: red;
+  border-radius: 50%;
+  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);
+}
+
+.dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdown-content {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 12px;
+  width: max-content;
+
+  opacity: 0;
+  visibility: hidden;
+
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease,
+    visibility 0.2s;
+}
+
+.dropdown-content::before {
+  content: '';
+  position: absolute;
+  top: -20px;
+  left: 0;
+  width: 100px;
+  height: 20px;
+  background-color: transparent;
+}
+
+.dropdown:hover .dropdown-content {
+  opacity: 1;
+  visibility: visible;
+}
+
+.dropdown:hover .dropbtn {
+  color: var(--color-hovered);
+}
+</style>

package/dist/src/components/header/menu.ts

@@ -0,0 +1,41 @@
+import { paths } from "../../helpers/paths.ts";
+import type { Component } from "vue";
+import CloudIcon from "../../assets/icons/cloud-icon.vue";
+import CartIcon from "../../assets/icons/cart-icon.vue";
+import WidgetIcon from "../../assets/icons/widget-icon.vue";
+import LightningIcon from "../../assets/icons/lightning-icon.vue";
+import DatabaseIcon from "../../assets/icons/database-icon.vue";
+import PanoramaIcon from "../../assets/icons/panorama-icon.vue";
+
+interface Submenu {
+    icon: Component
+    name: string
+    description: string
+    link: string
+}
+
+interface Menu {
+    name: string
+    link?: string
+    submenuTitle?: string
+    submenu?: Submenu[]
+}
+
+export const menu: Menu[] = [
+    {
+        name: 'Services',
+        submenuTitle: 'Services',
+        submenu: [
+            {icon: CloudIcon, name: 'Cloud & DevOps', description: 'Optimize costs. Protect your Data', link: paths.devops},
+            {icon: CartIcon, name: 'E-Commerce', description: 'Maximize revenue, dominate Markets', link: paths.ecommerce},
+            {icon: WidgetIcon, name: 'Autodesk plugins', description: '10x efficiency with custom Plugins', link: paths.autodesk},
+            {icon: LightningIcon, name: 'Automation & AI', description: 'Leverage virtual Workforce', link: paths.automation},
+            {icon: DatabaseIcon, name: 'HubSpot', description: 'Aggregate data from all your Tools', link: paths.hubspot},
+            {icon: PanoramaIcon, name: 'AR & VR', description: 'Stunning visualisations for your business', link: paths.arVr},
+        ]
+    },
+    {name: 'Workflow', link: paths.workflow},
+    {name: 'Projects', link: paths.projects},
+    {name: 'Insights', link: paths.insights},
+    {name: 'Contact us', link: paths.contactUs},
+]

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

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { menu } from "./menu.ts";
+import Button from "../common/Button.vue";
+import Shevron from "../../assets/icons/shevron.vue";
+import { onUnmounted, ref, watch } from "vue";
+import { paths } from "../../helpers/paths.ts";
+import Logo from "../../assets/images/logo.svg";
+import BackIcon from "../../assets/icons/back-icon.vue";
+import ServicesList from "./services-list.vue";
+
+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="paths.home" class="px-1.5 hover:opacity-80 transition-opacity">
+            <img :src="Logo.src" 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">
+              {{ menu[0].submenuTitle }}
+            </h2>
+            <ServicesList />
+            <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 menu" :key="index">
+              <div v-if="item.name === 'Services'">
+                <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.name === 'Workflow'" as="link" variant="ghost" title="About us | Workflow" :href="item.link" />
+              <Button v-else-if="item.name === 'Contact us'" as="link" :href="item.link" title="Get a free consultation" variant="tertiary" @click="handleCloseMenu" />
+              <Button v-else as="link" variant="ghost" :title="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,26 @@
+<script setup lang="ts">
+import {menu} from "./menu.ts";
+</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 menu[0].submenu" :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/technology-card.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { paths } from "../../helpers/paths.ts";
+import Button from "../common/Button.vue";
+
+defineProps<{
+  active: boolean
+  name: 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',
+]
+const getTechnologyUrl = (name: string) => {
+  switch (name) {
+    case 'AR & VR':
+      return paths.arVr
+    case 'Autodesk plugins':
+      return paths.autodesk
+    case 'Automation & AI':
+      return paths.automation
+    case 'Cloud & DevOps':
+      return paths.devops
+    case 'E-Commerce':
+      return paths.ecommerce
+    case 'HubSpot':
+      return paths.hubspot
+    default:
+      return ''
+  }
+}
+</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="getTechnologyUrl(name)" 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/form-validator.ts

@@ -0,0 +1,9 @@
+const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+const linkedInRegex = /^https?:\/\/([a-z]{2,3}\.)?linkedin\.com\/.*$/gim
+
+export const isCorrectEmailFormat = (email: string | null): boolean => {
+  return !!email && emailRegex.test(email)
+}
+export const isCorrectLinkedInFormat = (linkedIn: string | null) : boolean => {
+   return !!linkedIn && linkedInRegex.test(linkedIn);
+}

package/dist/src/helpers/paths.ts

@@ -0,0 +1,25 @@
+const services = '/services'
+
+export const paths = {
+    home: '/',
+
+    devops: `${services}/devops`,
+    autodesk: `${services}/autodesk`,
+    hubspot: `${services}/hubspot`,
+    ecommerce: `${services}/ecommerce`,
+    automation: `${services}/automation`,
+    arVr: `${services}/ar-vr`,
+
+    workflow: '/workflow',
+    projects: '/projects',
+    insights: '/insights',
+    contactUs: '/#contact-us',
+    cookiePolicy: '/cookie-policy',
+    privacyPolicy: '/privacy-policy',
+
+    testimonials: '/#testimonials',
+    strongPoints: '/workflow/#our-strong-point',
+    toolsAndTechnologies: '/workflow/#tools-and-technologies'
+}
+
+export const websiteUrl = 'https://www.codecave.it'

package/dist/src/lib/crm/types.ts

@@ -0,0 +1,62 @@
+/* The CRM boundary for form components.
+ *
+ * A form component's job is to collect and validate what a person typed. Which
+ * CRM receives it, what that CRM calls its fields and what its wire format
+ * looks like are not the component's business -- they are the site's. This file
+ * is the line between the two.
+ *
+ * Nothing here mentions HubSpot. That is the point: see hubspot-form-client.ts
+ * for the implementation, which is where every HubSpot-shaped thing lives now.
+ */
+
+export interface CrmFormFieldOption {
+  id: string;
+  label: string;
+}
+
+/** What a component needs in order to render one field. */
+export interface CrmFormFieldSpec {
+  label: string;
+  placeholder?: string;
+  required: boolean;
+  maxLength?: number;
+  options?: CrmFormFieldOption[];
+}
+
+export type ContactFormFieldName =
+  | 'email'
+  | 'firstName'
+  | 'lastName'
+  | 'companyName'
+  | 'linkedinCompanyPage'
+  | 'services'
+  | 'description';
+
+/** Labels, placeholders and options for the contact form, CRM-neutral. */
+export type ContactFormDefinition = Record<ContactFormFieldName, CrmFormFieldSpec>;
+
+/** What the visitor typed, by logical name. */
+export interface ContactFormValues {
+  email: string;
+  firstName: string;
+  lastName: string;
+  companyName: string;
+  linkedinCompanyPage: string;
+  services: string;
+  description: string;
+  privacyPolicyAccepted: boolean;
+}
+
+/* A result rather than a thrown error, deliberately.
+ *
+ * The previous code did `catch (error) { console.log('request err>>', error) }`
+ * -- the form went quiet and the visitor was never told their enquiry had not
+ * been sent. A union the caller has to narrow makes handling the failure the
+ * obvious thing to write, rather than something easy to leave out. */
+export type CrmSubmitResult =
+  | { ok: true }
+  | { ok: false; reason: 'network' | 'rejected'; message?: string };
+
+export interface ICrmFormClient {
+  submit(values: ContactFormValues): Promise<CrmSubmitResult>;
+}