Website update

website/docusaurus.config.ts

@@ -84,8 +84,9 @@ const config: Config = {
           type: 'docSidebar',
           sidebarId: 'docsSidebar',
           position: 'left',
-          label: 'Docs',
+          label: 'Documentation',
         },
+        { to: '/services', label: 'Services', position: 'left' },
         { to: '/blog', label: 'Blog', position: 'left' },
         {
           href: vars.github,

website/src/components/ctas/services.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Button } from '../atoms/buttons';
+
+export default function CTAServices() {
+  return (
+    <div data-elb="cta" data-elbaction="visible:impression">
+      <div className="mx-auto max-w-7xl py-12 px-4 text-center sm:px-6 lg:py-16 lg:px-8">
+        <h2 className="text-3xl font-extrabold tracking-tight sm:text-4xl">
+          <span
+            data-elb-cta={`title:start your trial`}
+            className="block text-black dark:text-white"
+          >
+            Let's discuss how
+            <span className="inline px-2 text-elbwalker-600">walkerOS</span>
+            <br />
+            can elevate your analytics.
+          </span>
+        </h2>
+        <div className="mx-auto mt-5 max-w-md sm:flex sm:justify-center md:mt-8">
+          <Button link="https://calendly.com/elb-alexander/30min">
+            Schedule free call
+          </Button>
+          <Button link="mailto:[email protected]" isSecondary>
+            Write us an email{' '}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

website/src/components/services/features.tsx

@@ -0,0 +1,71 @@
+import clsx from 'clsx';
+import Heading from '@theme/Heading';
+import {
+  PresentationChartBarIcon,
+  CodeBracketIcon,
+  RocketLaunchIcon,
+} from '@heroicons/react/24/outline';
+
+import Link from '@docusaurus/Link';
+
+type FeatureItem = {
+  title: string;
+  link: string;
+  icon: JSX.Element;
+  children: React.ReactNode;
+};
+
+function Feature({ title, link, icon, children }: FeatureItem) {
+  return (
+    <div className={clsx('col col--4')}>
+      <div className="text--center">{icon}</div>
+      <div className="text--center padding-horiz--md mt-2">
+        <Heading as="h3">
+          <Link to={link} className="text-black dark:text-white">
+            {title}
+          </Link>
+        </Heading>
+        <p>{children}</p>
+      </div>
+    </div>
+  );
+}
+
+export default function Features(): JSX.Element {
+  const iconMeasurementplan = (
+    <PresentationChartBarIcon
+      className="h-12 w-12 text-elbwalker"
+      aria-hidden="true"
+    />
+  );
+  const iconSetup = (
+    <CodeBracketIcon className="h-12 w-12 text-elbwalker" aria-hidden="true" />
+  );
+  const iconExperts = (
+    <RocketLaunchIcon className="h-12 w-12 text-elbwalker" aria-hidden="true" />
+  );
+
+  return (
+    <section className="my-20">
+      <div className="container">
+        <div className="row">
+          <Feature title="Measurement plan meeting" icon={iconMeasurementplan}>
+            We'll work with your team to blend your current tracking setup with
+            our proven best practices for measuring user behavior. Together
+            we'll define the events to track.
+          </Feature>
+          <Feature title="Base setup support" icon={iconSetup}>
+            Whether it's implementing walker.js, managing consent handling, or
+            setting up server-side data collection using Google Cloud Platform
+            and BigQuery, we'll tailor our support to your needs.
+          </Feature>
+          <Feature title="Connect with tracking experts" icon={iconExperts}>
+            Stay connected with the elbwalker team through bi-weekly check-ins
+            after your initial onboarding. Plus, access our developers to
+            address production-related challenges.
+          </Feature>
+        </div>
+      </div>
+    </section>
+  );
+}

website/src/components/services/hero.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Button } from '../atoms/buttons';
+
+export default function Hero() {
+  const CheckSVG = ({ children }) => (
+    <span className="text-s mx-1.5 inline-flex items-center rounded-full px-2.5 py-0.5 font-medium">
+      <svg
+        aria-hidden="true"
+        className="h-4 w-4 mr-1"
+        fill="#34d399"
+        viewBox="0 0 20 20"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fillRule="evenodd"
+          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+          clipRule="evenodd"
+        ></path>
+      </svg>
+      {children}
+    </span>
+  );
+
+  return (
+    <main className="relative mx-3 mt-16 max-w-7xl sm:mt-24 lg:mx-auto">
+      <div className="text-center	">
+        <h1 className="text-4xl font-extrabold tracking-tight sm:text-5xl md:text-6xl">
+          <div className="block text-elbwalker-600 block">walkerOS</div>
+          <div className="block xl:inline text-black dark:text-white">
+            Professional services{' '}
+          </div>
+        </h1>
+        <p className="mx-auto mt-3 max-w-md text-base sm:text-lg md:mt-5 md:max-w-3xl md:text-xl">
+          We help you set up and leverage walkerOS. Go from tracking chaos to
+          tracking excellence in record speed.
+        </p>
+        <div className="mx-auto mt-5 max-w-md sm:flex sm:justify-center md:mt-8">
+          <Button link="https://calendly.com/elb-alexander/30min">
+            Schedule free call
+          </Button>
+          <Button link="mailto:[email protected]" isSecondary>
+            Write an email
+          </Button>
+        </div>
+      </div>
+      <div className="mt-10 text-center">
+        <CheckSVG>direct support from the creators</CheckSVG>
+        <CheckSVG>initial setup in 5 days</CheckSVG>
+        <CheckSVG>fully integrated into your infrastructure</CheckSVG>
+      </div>
+    </main>
+  );
+}

website/src/components/services/projects.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Button } from '../atoms/buttons';
+
+import { CheckIcon } from '@heroicons/react/20/solid';
+
+const includedFeatures = [
+  'Measurement plan',
+  'Implementation guidance',
+  'Client- and server-side setup',
+  'Ongoing training & development',
+];
+
+export default function Projects() {
+  return (
+    <div className="py-24 sm:py-16">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto mt-16 max-w-2xl rounded-3xl ring-1 ring-gray-700 sm:mt-20 lg:mx-0 lg:flex lg:max-w-none">
+          <div className="p-8 sm:p-10 lg:flex-auto">
+            <h3 className="text-3xl font-semibold tracking-tight text-white">
+              Projects (5+ days)
+            </h3>
+            <p className="mt-6 text-base/7 text-gray-200">
+              Partner with us to design and implement a robust pipeline for
+              high-quality, privacy-friendly data. We're creating a solution
+              tailored to your unique needs, ensuring long-term success.
+            </p>
+            <div className="mt-10 flex items-center gap-x-4">
+              <h4 className="flex-none text-sm/6 font-semibold text-elbwalker-600">
+                What's included
+              </h4>
+              <div className="h-px flex-auto bg-gray-800" />
+            </div>
+            <ul
+              role="list"
+              className="mt-8 grid grid-cols-1 gap-4 text-sm/6 text-gray-200 sm:grid-cols-2 sm:gap-6"
+            >
+              {includedFeatures.map((feature) => (
+                <li key={feature} className="flex gap-x-3">
+                  <CheckIcon
+                    aria-hidden="true"
+                    className="h-6 w-5 flex-none text-elbwalker-600"
+                  />
+                  {feature}
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className="-mt-2 p-2 lg:mt-0 lg:w-full lg:max-w-md lg:shrink-0">
+            <div className="rounded-2xl bg-gray-800 py-10 text-center ring-1 ring-inset ring-gray-900/5 lg:flex lg:flex-col lg:justify-center lg:py-16">
+              <div className="mx-auto max-w-xs px-8">
+                <p className="text-base font-semibold text-gray-200"></p>
+                <p className="mt-6 flex items-baseline justify-center gap-x-2">
+                  <span className="text-5xl font-semibold tracking-tight text-white">
+                    Custom
+                  </span>
+                  <span className="text-sm/6 font-semibold tracking-wide text-gray-200">
+                    EUR
+                  </span>
+                </p>
+                <a
+                  href="https://calendly.com/elb-alexander/30min"
+                  className="mt-10 block w-full rounded-md bg-elbwalker-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-elbwalker-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-elbwalker-600"
+                >
+                  Schedule free call
+                </a>
+                <p className="mt-6 text-xs/5 text-gray-800">
+                  Invoices and receipts available for easy company reimbursement
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

website/src/components/services/sparring.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Button } from '../atoms/buttons';
+
+import { CheckIcon } from '@heroicons/react/20/solid';
+
+const includedFeatures = [
+  'Troubleshooting',
+  'Quick fixes',
+  'Strategy sparring',
+  'Live Q&A',
+];
+
+export default function Sparring() {
+  return (
+    <div className="py-24 sm:py-16">
+      <div className="mx-auto max-w-7xl px-6 lg:px-8">
+        <div className="mx-auto mt-16 max-w-2xl rounded-3xl ring-1 ring-gray-700 sm:mt-20 lg:mx-0 lg:flex lg:max-w-none">
+          <div className="p-8 sm:p-10 lg:flex-auto">
+            <h3 className="text-3xl font-semibold tracking-tight text-white">
+              Consulting Call (2h)
+            </h3>
+            <p className="mt-6 text-base/7 text-gray-200">
+              Start strong with a dedicated consulting session. Use this time to
+              review your setup, refine your measurement plan, or get expert
+              answers to your questions.
+            </p>
+            <div className="mt-10 flex items-center gap-x-4">
+              <h4 className="flex-none text-sm/6 font-semibold text-elbwalker-600">
+                What's included
+              </h4>
+              <div className="h-px flex-auto bg-gray-800" />
+            </div>
+            <ul
+              role="list"
+              className="mt-8 grid grid-cols-1 gap-4 text-sm/6 text-gray-200 sm:grid-cols-2 sm:gap-6"
+            >
+              {includedFeatures.map((feature) => (
+                <li key={feature} className="flex gap-x-3">
+                  <CheckIcon
+                    aria-hidden="true"
+                    className="h-6 w-5 flex-none text-elbwalker-600"
+                  />
+                  {feature}
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className="-mt-2 p-2 lg:mt-0 lg:w-full lg:max-w-md lg:shrink-0">
+            <div className="rounded-2xl bg-gray-800 py-10 text-center ring-1 ring-inset ring-gray-900/5 lg:flex lg:flex-col lg:justify-center lg:py-16">
+              <div className="mx-auto max-w-xs px-8">
+                <p className="text-base font-semibold text-gray-200"></p>
+                <p className="mt-6 flex items-baseline justify-center gap-x-2">
+                  <span className="text-5xl font-semibold tracking-tight text-white">
+                    399
+                  </span>
+                  <span className="text-sm/6 font-semibold tracking-wide text-gray-200">
+                    EUR
+                  </span>
+                </p>
+                <a
+                  href="https://calendar.app.google/iY7L57quiZPBtmxR6"
+                  className="mt-10 block w-full rounded-md bg-elbwalker-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-elbwalker-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-elbwalker-600"
+                >
+                  Schedule now
+                </a>
+                <p className="mt-6 text-xs/5 text-gray-200">
+                  Invoices and receipts available for easy company reimbursement
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}