Add Pitter Patter announcement to home page

src/app/page.tsx

@@ -16,6 +16,7 @@ import { Testimonial } from "@/components/home/Testimonial";
 import Link from "next/link";
 import { getPosts } from "@/posts/posts";
 import { PostSnippet } from "@/components/blog/PostSnippet";
+import { PitterPatterLogo } from "@/components/pitterPatter/PitterPatterLogo";
 
 export default function HomePage() {
   return (
@@ -36,6 +37,13 @@ export default function HomePage() {
                 Get in touch
               </a>
             </nav>
+            <a
+              href="#pitter-patter"
+              className="text-brown flex translate-y-0 flex-row items-center gap-2 self-center rounded-[1.25rem] bg-white px-5 py-2 text-2xl transition-shadow hover:shadow-md active:translate-y-1 active:bg-white/50 active:shadow-none"
+            >
+              <div className="bg-green animate-breathe h-4 w-4 rounded-full drop-shadow-[0_0_calc(var(--spacing)/2)__var(--color-green)]" />
+              <p>We’re building something new</p>
+            </a>
           </HomeSectionHeader>
           <Rule />
           <HomeSectionArticle>
@@ -174,6 +182,42 @@ export default function HomePage() {
           </HomeSectionArticle>
         </HomeSectionWrapper>
       </HomeSection>
+      <HomeSection id="pitter-patter">
+        <HomeSectionWrapper>
+          <HomeSectionHeader>
+            <HomeHeading order={2}>What we’re building</HomeHeading>
+          </HomeSectionHeader>
+          <Rule />
+          <HomeSectionArticle>
+            <div className="flex h-62 flex-col items-center justify-center px-7 py-0.5">
+              <h2 className="font-headings mx-auto text-[1.6875rem] font-extralight md:text-3xl lg:text-4xl">
+                <div className="justify-self-center">
+                  <PitterPatterLogo height="1em" className="w-fit" />
+                </div>
+              </h2>
+              <p className="font-headings justify-self-center text-center text-[1.6875rem] leading-[105%] opacity-60 md:text-3xl lg:text-4xl">
+                better collaborative editing
+              </p>
+            </div>
+            <div className="mx-auto flex max-w-[640px] flex-col gap-4">
+              <HomeParagraph>
+                Over the past two years, the appetite for collaborative rich
+                text editing has grown dramatically. More products need it, but
+                the available solutions are either expensive, opaque, or both.
+                Development teams get stuck with little insight into how their
+                application actually works, or how to improve it.
+              </HomeParagraph>
+              <HomeParagraph className="font-bold">
+                We know there’s a better way, and we’re in a good position to
+                build it.{" "}
+                <Link href="/pitter-patter" className="underline">
+                  Want to learn more?
+                </Link>
+              </HomeParagraph>
+            </div>
+          </HomeSectionArticle>
+        </HomeSectionWrapper>
+      </HomeSection>
       <HomeSection variant="brown">
         <HomeSectionWrapper className="border-x-blueprint flex flex-row gap-8 px-8 pb-8">
           <Spacer direction="left" className="mt-8" />

src/components/pitterPatter/PitterPatterLogo.tsx

@@ -1,6 +1,7 @@
 export function PitterPatterLogo(props: React.SVGProps<SVGSVGElement>) {
   return (
     <svg
+      aria-label="pitter patter"
       viewBox="0 0 274 38"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"