From 9ab53425792361a164c16ffadde8926b8fe98cbb Mon Sep 17 00:00:00 2001
From: Kamil Kisiela <kamil.kisiela@gmail.com>
Date: Tue, 9 Jan 2024 12:59:30 +0100
Subject: [PATCH] Add Talk To Us button to hero element (#3770)

---
 .../web/docs/src/components/landing-page.tsx   | 11 ++++++++++-
 packages/web/docs/src/components/pricing.tsx   | 18 ++++++++++--------
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/packages/web/docs/src/components/landing-page.tsx b/packages/web/docs/src/components/landing-page.tsx
index 59546b4b2..421a6b5d0 100644
--- a/packages/web/docs/src/components/landing-page.tsx
+++ b/packages/web/docs/src/components/landing-page.tsx
@@ -2,7 +2,7 @@ import { ReactElement, ReactNode, useState } from 'react';
 import Head from 'next/head';
 import Image, { StaticImageData } from 'next/image';
 import Link from 'next/link';
-import { FiGithub, FiGlobe, FiLogIn, FiPackage, FiServer, FiTruck } from 'react-icons/fi';
+import { FiGithub, FiGlobe, FiLogIn, FiPackage, FiPhone, FiServer, FiTruck } from 'react-icons/fi';
 import * as Tooltip from '@radix-ui/react-tooltip';
 import { cn } from '../lib';
 import { BookIcon } from './book-icon';
@@ -328,6 +328,15 @@ export function IndexPage(): ReactElement {
               >
                 <FiGithub /> Star on GitHub
               </a>
+              <a
+                className={cn(classes.link, 'flex flex-row items-center gap-2')}
+                href="#"
+                onClick={() => {
+                  (window as any).$crisp?.push(['do', 'chat:open']);
+                }}
+              >
+                <FiPhone /> Talk to us
+              </a>
             </>
           </HeroLinks>
           <HereTrustedBy>
diff --git a/packages/web/docs/src/components/pricing.tsx b/packages/web/docs/src/components/pricing.tsx
index 7bd060a0b..6cb60b62b 100644
--- a/packages/web/docs/src/components/pricing.tsx
+++ b/packages/web/docs/src/components/pricing.tsx
@@ -106,14 +106,16 @@ export function Pricing({ gradient }: { gradient: [string, string] }): ReactElem
   return (
     <div className="w-full bg-neutral-900">
       <div className="mx-auto my-12 box-border w-full max-w-[1024px] px-6">
-        <h2
-          className="bg-clip-text text-2xl font-bold leading-normal text-transparent md:text-3xl"
-          style={{
-            backgroundImage: `linear-gradient(-70deg, ${gradient[1]}, ${gradient[0]})`,
-          }}
-        >
-          Pricing
-        </h2>
+        <a id="pricing">
+          <h2
+            className="bg-clip-text text-2xl font-bold leading-normal text-transparent md:text-3xl"
+            style={{
+              backgroundImage: `linear-gradient(-70deg, ${gradient[1]}, ${gradient[0]})`,
+            }}
+          >
+            Pricing
+          </h2>
+        </a>
         <p className="text-gray-400">
           All features are available on all plans - including the free plan. Our pricing is honest
           and based only on your real usage.