Add call booking page

Author: wkirby

bun.lock

@@ -50,6 +50,7 @@
     "prettier": "^3.5.3",
     "pretty-quick": "^4.1.1",
     "react": "^19.1.0",
+    "react-calendly": "^4.4.0",
     "react-dom": "^19.1.0",
     "react-hook-form": "^7.56.4",
     "react-transition-state": "^2.3.1",

package.json

@@ -115,7 +115,7 @@ export const Hero = () => {
 
             <div className={clsx(styles.hero__actions, "animate fade delay-1")}>
               <Button
-                href="/hire"
+                href="/book"
                 variant="primary"
                 size="lg"
                 EndIcon={ChevronRight}

src/components/Hero.tsx

@@ -1,7 +1,7 @@
 import { Footer } from "components/Footer";
 import { Navbar } from "components/Navbar";
 import { Section } from "components/Section";
-import { ChevronRight } from "lucide-react";
+import { ChevronRight, PhoneIcon } from "lucide-react";
 import { PropsWithChildren } from "react";
 import { Button } from "./Button";
 import { Cta, CtaProps } from "./Cta";
@@ -33,13 +33,24 @@ export const SiteLayout: React.FC<
           showTagline={showTagline}
           actions={
             !showTagline && (
-              <Button
-                href="/hire"
-                EndIcon={ChevronRight}
-                size="sm"
-              >
-                Work with us
-              </Button>
+              <>
+                <Button
+                  href="/book"
+                  StartIcon={PhoneIcon}
+                  size="sm"
+                  variant="tertiary"
+                >
+                  Book a call
+                </Button>
+
+                <Button
+                  href="/hire"
+                  EndIcon={ChevronRight}
+                  size="sm"
+                >
+                  Work with us
+                </Button>
+              </>
             )
           }
         />

src/components/SiteLayout.tsx

@@ -0,0 +1,51 @@
+import { NewsletterCTA } from "components/NewsletterCTA";
+import { PageHeader } from "components/PageHeader";
+import { PageMeta } from "components/PageMeta";
+import { Section } from "components/Section";
+import { SiteLayout } from "components/SiteLayout";
+import { NextPage } from "next";
+import { InlineWidget } from "react-calendly";
+
+const HirePage: NextPage = () => {
+  return (
+    <>
+      <PageMeta
+        title="Hire Us"
+        description="Apsis Labs is ready to get started making your project a reality."
+      />
+
+      <SiteLayout
+        contained
+        footer={
+          <Section bordered theme="blue">
+            <NewsletterCTA />
+          </Section>
+        }
+      >
+        <div className="stack gap-lg">
+          <article className="stack gap-md">
+            <PageHeader
+              center
+              title="Book a Call"
+              subtitle={
+                <>
+                  Got a project?{" "}
+                  <span className="text-primary">Let's talk.</span>
+                </>
+              }
+            />
+
+            <InlineWidget
+              styles={{
+                height: "1200px",
+              }}
+              url="https://calendly.com/wyattapsis/30min"
+            />
+          </article>
+        </div>
+      </SiteLayout>
+    </>
+  );
+};
+
+export default HirePage;

src/pages/book.tsx

@@ -159,6 +159,9 @@
   }
 
   &__actions {
+    align-items: center;
+    display: flex;
+    gap: var(--space-2xs);
   }
 
   &__tagline {