add custom development page

apps/gatsby/src/components/custom-development/ApplicationSteps.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+import { ThreeCardSection } from "../general/ThreeCardSection.tsx";
+import { StaticImage } from "gatsby-plugin-image";
+
+import "./css/application-steps.css";
+import { useBookCallModal } from "../book-call/hooks/useBookCallModal.tsx";
+
+export const ApplicationSteps = () => {
+  const { modal, clickHandler } = useBookCallModal();
+
+  return (
+    <div className="application-steps">
+      {modal}
+      <div className="application-steps__contents">
+        <ThreeCardSection
+          sectionContents={{
+            sectionHeading: "Your dream application, just three steps away",
+            cards: [
+              {
+                icon: (
+                  <StaticImage
+                    src="../icons/chat-icon.png"
+                    alt="chat icon"
+                    className="application-steps__image"
+                  />
+                ),
+                heading: "Step 1: Let’s chat",
+                paragraphs: ["Schedule a call with our founder to discuss your vision and goals."],
+              },
+              {
+                icon: (
+                  <StaticImage
+                    src="../icons/clipboard-icon.png"
+                    alt="clipboard icon"
+                    className="application-steps__image"
+                  />
+                ),
+                heading: "Step 2: Plan your success",
+                paragraphs: [
+                  "We’ll put together a tailored proposal, detailing the scope, timeline, and cost of your project.",
+                ],
+              },
+              {
+                icon: (
+                  <StaticImage
+                    src="../icons/rocket-blastoff-icon.png"
+                    alt="rocket blastoff icon"
+                    className="application-steps__image"
+                  />
+                ),
+                heading: "Step 3: Sit back and watch your vision come alive",
+                paragraphs: [
+                  "Our dedicated team will take the reins, keeping you in the loop at every stage of the development process.",
+                ],
+              },
+            ],
+          }}
+        />
+        <button className="better-way__button button" type="button" onClick={clickHandler}>
+          Book my launch call
+        </button>
+      </div>
+    </div>
+  );
+};

apps/gatsby/src/components/custom-development/CustomDevelopmentCallToAction.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { useBookCallModal } from "../book-call/hooks/useBookCallModal.tsx";
+
+import "./css/custom-development-call-to-action.css";
+
+export const CustomDevelopmentCallToAction = () => {
+  const { modal, clickHandler } = useBookCallModal();
+
+  return (
+    <div className="custom-development-call-to-action">
+      {modal}
+      <div className="custom-development-call-to-action__contents">
+        <h2 className="custom-development-call-to-action__heading">Ready to get started?</h2>
+        <p>
+          Ready to get started? Let’s schedule a call and begin your journey to software success.
+        </p>
+
+        <button className="exasperation__button button" type="button" onClick={clickHandler}>
+          Book Your Launch Call
+        </button>
+      </div>
+    </div>
+  );
+};

apps/gatsby/src/components/custom-development/CustomDevelopmentHero.tsx

@@ -0,0 +1,20 @@
+// STATUS: complete
+import React from "react";
+
+import "./css/custom-development-hero.css";
+
+export const CustomDevelopmentHero = () => (
+  <div className="custom-development-hero">
+    <div className="custom-development-hero__contents">
+      <h1 className="custom-development-hero__heading">
+        Say Hello to Stress-Free
+        <br />
+        Software Development
+      </h1>
+      <p className="custom-development-hero__text">
+        Unleash the potential of your ideas with LaunchWare, your go-to team for custom software
+        development.
+      </p>
+    </div>
+  </div>
+);

apps/gatsby/src/components/custom-development/EmbraceLaunchWare.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { StaticImage } from "gatsby-plugin-image";
+
+import "./css/embrace-launchware.css";
+
+export const EmbraceLaunchWare = () => (
+  <div className="embrace-launchware">
+    <div className="embrace-launchware__contents">
+      <h2 className="embrace-launchware__heading">Embrace the LaunchWare Advantage</h2>
+      <p>
+        Ready to transform your software idea into a successful application? Here’s what you can
+        look forward to when you partner with LaunchWare:
+      </p>
+      <ul role="list" className="embrace-launchware__list">
+        <li>
+          A custom software solution that reflects your vision and wows your users - we believe
+          technology is a force for good and should solve real problems for your users.
+        </li>
+        <li>
+          A break from the headaches of recruitment and team management - we take extra care when
+          assigning the right resources so they blend into your culture and make things easy for you
+          and your team.
+        </li>
+        <li>
+          A dedicated team of experts at your disposal - we place a strong emphasis on continuous
+          development of our staff to make sure we can match your needs to the right expertise.
+        </li>
+        <li>
+          A transparent development process that keeps you in the loop - we believe that software
+          development is first and foremost an exercise in communication and that is reflected in
+          how we work with our clients on each and every project.
+        </li>
+        <li>
+          The peace of mind that comes with knowing your software is in good hands - from our
+          expertise to our transparency, we build a partnership with you so you feel comfortable at
+          each step of the process. No black boxes or feature factories where you worry about what
+          will be delivered at the end of the project.
+        </li>
+      </ul>
+    </div>
+  </div>
+);

apps/gatsby/src/components/custom-development/HassleFreeSolutions.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { TextImageBlock } from "../general/TextImageBlock.tsx";
+import { StaticImage } from "gatsby-plugin-image";
+
+import "./css/hassle-free-solutions.css";
+
+export const HassleFreeSolutions = () => (
+  <div className="hassle-free-solutions">
+    <TextImageBlock
+      image={
+        <StaticImage
+          layout="constrained"
+          className="contact-us-chat__image"
+          alt="Pair of hands typing on a laptop"
+          width={680}
+          src="../../images/contact/hands-and-laptop.jpg"
+        />
+      }
+      headingText="Welcome to a world of hassle-free software solutions"
+      text="Picture this: your innovative idea transformed into a fully-functional, user-friendly application that not only meets your needs but also delights your end users. Sounds like a dream? With LaunchWare, it’s your new reality."
+      webViewImagePosition="right"
+    />
+  </div>
+);

apps/gatsby/src/components/custom-development/HeroBullets.tsx

@@ -0,0 +1,44 @@
+import { faCheckCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React from "react";
+import { ThreeCardSection } from "../general/ThreeCardSection.tsx";
+
+import "./css/highlight-bullets.css";
+
+export const HeroBullets = () => {
+  const sectionContents = {
+    cards: [
+      {
+        heading: "Turn your ideas into applications",
+        icon: (
+          <FontAwesomeIcon height="36px" className="highlight-bullets__icon" icon={faCheckCircle} />
+        ),
+      },
+      {
+        heading: "Tailored software solutions",
+        icon: (
+          <FontAwesomeIcon height="36px" className="highlight-bullets__icon" icon={faCheckCircle} />
+        ),
+      },
+      {
+        heading: "Dedicated team of experts",
+        icon: (
+          <FontAwesomeIcon
+            height="36px"
+            width="36px"
+            className="highlight-bullets__icon"
+            icon={faCheckCircle}
+          />
+        ),
+      },
+    ],
+  };
+
+  return (
+    <div className="highlight-bullets">
+      <div className="highlight-bullets__contents">
+        <ThreeCardSection sectionContents={sectionContents} iconsInline={true} />
+      </div>
+    </div>
+  );
+};

apps/gatsby/src/components/custom-development/NoMoreJuggling.tsx

@@ -0,0 +1,22 @@
+import { StaticImage } from "gatsby-plugin-image";
+import React from "react";
+import { TextImageBlock } from "../general/TextImageBlock.tsx";
+
+import "./css/no-more-juggling.css";
+
+export const NoMoreJuggling = () => (
+  <TextImageBlock
+    image={
+      <StaticImage
+        layout="constrained"
+        className="contact-us-chat__image"
+        alt="Pair of hands typing on a laptop"
+        width={680}
+        src="../../images/contact/hands-and-laptop.jpg"
+      />
+    }
+    headingText="No More Juggling Between Recruitment and Development"
+    text="Ever felt like you’re juggling too many balls trying to transform your software ideas into reality? You’re not alone. Many tech leaders are grappling with finding the right team, juggling project timelines, and staying true to their vision. It can feel like an uphill battle, and we get it."
+    webViewImagePosition="left"
+  />
+);

apps/gatsby/src/components/custom-development/PartnerWithExperts.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { TextImageBlock } from "../general/TextImageBlock.tsx";
+import { StaticImage } from "gatsby-plugin-image";
+
+import "./css/partner-with-experts.css";
+
+export const PartnerWithExperts = () => (
+  <div className="partner-with-experts">
+    <TextImageBlock
+      image={
+        <StaticImage
+          layout="constrained"
+          className="contact-us-chat__image"
+          alt="Pair of hands typing on a laptop"
+          width={680}
+          src="../../images/contact/hands-and-laptop.jpg"
+        />
+      }
+      headingText="Discover the Ease of Partnering with Experts"
+      text="With LaunchWare, you gain more than a service provider; you gain a partner who speaks your language. We handle the intricacies of the development process, transforming your ideas into functional, user-centric software."
+      webViewImagePosition="left"
+    />
+  </div>
+);

apps/gatsby/src/components/custom-development/Testimonials.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { UserCircleIcon } from "@heroicons/react/24/solid";
+import { Tagline } from "../general/Tagline";
+import { StaticImage } from "gatsby-plugin-image";
+
+import "./css/testimonials.css";
+
+export const Testimonials = () => (
+  <div className="testimonials">
+    <div className="testimonials__contents">
+      <StaticImage
+        alt=""
+        className="testimonials__decorative-square"
+        src="../../images/decorations/decorative_square.png"
+      />
+      <div className="testimonials__text-container">
+        <div className="testimonials__heading-container">
+          <Tagline tagline="Testimonials" />
+          <h3 className="testimonials__heading">Don't just take our word for it</h3>
+        </div>
+        <ul className="testimonials__cards-container">
+          <li className="testimonials__card">
+            <p className="testimonials__text">
+              &#8220;They showed up and did exactly what I thought they were going to do and
+              I&#8217;m thrilled.&#8221;
+            </p>
+            <div className="testimonials__name">
+              <UserCircleIcon className="testimonials__icon" />
+              <div>
+                <p className="testimonials__semibold">Catherine Headen</p>
+                <p>Director, Product &amp; Design</p>
+              </div>
+            </div>
+          </li>
+          <li className="testimonials__card">
+            <p className="testimonials__text">
+              &#8220;A strong sense of vision about the process [without being] religious about any
+              specific aspect. They have a strong point of view while remaining open to change their
+              minds.” &#8221;
+            </p>
+            <div className="testimonials__name">
+              <UserCircleIcon className="testimonials__icon" />
+              <div>
+                <p className="testimonials__semibold">David Evans</p>
+                <p>VP of Product</p>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+);

apps/gatsby/src/components/custom-development/WeAreWithYou.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { TextImageBlock } from "../general/TextImageBlock.tsx";
+import { StaticImage } from "gatsby-plugin-image";
+
+import "./css/we-are-with-you.css";
+
+export const WeAreWithYou = () => (
+  <div className="we-are-with-you">
+    <TextImageBlock
+      image={
+        <StaticImage
+          layout="constrained"
+          className="contact-us-chat__image"
+          alt="Pair of hands typing on a laptop"
+          width={680}
+          src="../../images/contact/hands-and-laptop.jpg"
+        />
+      }
+      headingText="We’re With You, Every Step of the Way"
+      text="At LaunchWare, we’re not just about delivering top-notch code. We’re here to guide you through every step of the process, ensuring that your journey from concept to code is as smooth as possible. We pride ourselves on clear communication, actionable plans, and a steadfast commitment to making your software vision a reality."
+      webViewImagePosition="right"
+    />
+  </div>
+);

apps/gatsby/src/components/custom-development/css/application-steps.css

@@ -0,0 +1,21 @@
+.application-steps {
+  @apply parent-section;
+  @apply bg-launch-black;
+
+  & .three-card-section__heading-container {
+    @apply max-w-none flex-grow;
+  }
+
+  & .three-card-section__heading {
+    @apply text-white text-left w-full;
+  }
+}
+
+.application-steps__contents {
+  @apply contents-container;
+  @apply flex-col space-y-6;
+}
+
+.application-steps__image {
+  @apply h-16 w-14 items-center;
+}

apps/gatsby/src/components/custom-development/css/custom-development-call-to-action.css

@@ -0,0 +1,23 @@
+@import "../../../css/index.css";
+
+.custom-development-call-to-action {
+  @apply parent-section;
+  @apply bg-launch-neutral-20;
+}
+
+.custom-development-call-to-action__contents {
+  @apply contents-container;
+  @apply flex-col space-y-6;
+}
+
+.custom-development-call-to-action__heading {
+  @apply text-5xl text-center max-w-xl lg:max-w-3xl;
+}
+
+.custom-development-call-to-action__uppercase {
+  @apply uppercase;
+}
+
+.custom-development-call-to-action__text {
+  @apply text-center text-launch-black-80;
+}