From bbb289a3ae669cc7c5d7965ec05e58aa8644026b Mon Sep 17 00:00:00 2001
From: Sean O'Connor <sean@soconnor.dev>
Date: Wed, 9 Sep 2026 19:24:47 -0400
Subject: [PATCH] Feature Manyangles in the product showcase

---
 src/app/page.tsx       | 107 ++++++++++++++++++++++++++++++++++++++++-
 src/styles/globals.css |  20 ++++++++
 2 files changed, 125 insertions(+), 2 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 40ef988..cc3654b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -361,14 +361,33 @@ const hristudioFeatures = [
   },
 ];
 
+const manyanglesFeatures = [
+  {
+    title: "One link for everyone",
+    body: "Guests upload from any phone, without an account or app to install.",
+  },
+  {
+    title: "Review before sharing",
+    body: "Hosts approve photos before they appear in the shared gallery.",
+  },
+  {
+    title: "Full-quality originals",
+    body: "Keep the original files while optimized previews make browsing fast.",
+  },
+  {
+    title: "Albums for any gathering",
+    body: "Bring everyone's photos together for weddings, parties, and events.",
+  },
+];
+
 function Projects() {
   return (
     <section id="projects" className="scroll-mt-20">
       <div className="mx-auto max-w-6xl px-6 py-24">
         <SectionHeading
           eyebrow="Projects"
-          title="Four products, built end to end."
-          description="Racetix sells tickets for short tracks. beenvoice invoices for freelancers and small businesses. RaceHub runs the official Riverhead Raceway site. HRIStudio makes human-robot interaction research reproducible. All four run in production, operated end to end."
+          title="Five products, built end to end."
+          description="Racetix sells tickets for short tracks. beenvoice invoices for freelancers and small businesses. RaceHub runs the official Riverhead Raceway site. HRIStudio makes human-robot interaction research reproducible. Manyangles brings event photos together in shared albums."
         />
       </div>
 
@@ -516,6 +535,90 @@ function Projects() {
         </div>
       </a>
 
+      <a
+        id="manyangles"
+        href="https://ma.hadlock.tech"
+        target="_blank"
+        rel="noreferrer"
+        className="manyangles-showcase group border-border relative isolate block scroll-mt-20 overflow-hidden border-y"
+      >
+        <div
+          aria-hidden="true"
+          className="manyangles-backdrop absolute inset-0 -z-10"
+        />
+        <div className="relative mx-auto grid max-w-6xl gap-10 px-6 py-16 md:grid-cols-[1.1fr_0.9fr] md:py-24">
+          <div>
+            <div
+              className="text-text flex items-center gap-2.5 text-2xl font-bold tracking-tight"
+              translate="no"
+            >
+              <svg
+                viewBox="0 0 32 32"
+                fill="none"
+                aria-hidden="true"
+                className="text-manyangles-blue h-8 w-8 shrink-0"
+              >
+                <path
+                  d="M14 4H8a4 4 0 0 0-4 4v6M18 4h6a4 4 0 0 1 4 4v6M28 18v6a4 4 0 0 1-4 4h-6M14 28H8a4 4 0 0 1-4-4v-6"
+                  stroke="currentColor"
+                  strokeWidth="3"
+                  strokeLinecap="round"
+                />
+                <circle cx="21" cy="11" r="2.25" fill="currentColor" />
+                <path
+                  d="m8.5 22 5-6.2a1.7 1.7 0 0 1 2.6-.1l2.6 2.9 1.7-1.8a1.7 1.7 0 0 1 2.5 0l1.6 1.8"
+                  stroke="currentColor"
+                  strokeWidth="3"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+              Manyangles
+            </div>
+            <h3 className="text-text mt-6 max-w-xl text-3xl font-semibold tracking-tight sm:text-4xl">
+              Every angle.
+              <br />
+              <span className="text-manyangles-blue">One shared album.</span>
+            </h3>
+            <p className="text-text-secondary mt-4 max-w-xl text-base leading-relaxed">
+              Manyangles collects the moments guests capture at weddings,
+              parties, and gatherings. Share one upload link, review what comes
+              in, and bring everyone&apos;s photos together in a shared gallery.
+            </p>
+            <span className="text-manyangles-blue mt-8 inline-flex items-center gap-2 text-sm font-bold tracking-widest uppercase transition group-hover:opacity-70">
+              Explore Manyangles
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                className="h-4 w-4 transition-transform group-hover:translate-x-1"
+                aria-hidden="true"
+              >
+                <path d="M5 12h14M12 5l7 7-7 7" />
+              </svg>
+            </span>
+          </div>
+          <div className="grid content-center gap-4 sm:grid-cols-2 md:grid-cols-1 lg:grid-cols-2">
+            {manyanglesFeatures.map((f) => (
+              <div key={f.title} className="flex items-start gap-3">
+                <span className="text-manyangles-blue mt-0.5 shrink-0">
+                  <CheckIcon className="h-4 w-4" />
+                </span>
+                <div>
+                  <h4 className="text-text text-sm font-semibold">{f.title}</h4>
+                  <p className="text-text-secondary/80 mt-1 text-xs leading-relaxed">
+                    {f.body}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </a>
+
       <a
         href="https://riverheadraceway.com"
         target="_blank"
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 254b53f..fccd978 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -53,6 +53,7 @@
   --color-racetix-overlay-mid: var(--racetix-overlay-mid);
   --color-racetix-overlay-end: var(--racetix-overlay-end);
   --color-racehub-red: var(--racehub-red);
+  --color-manyangles-blue: light-dark(#3156c8, #7f9cff);
   --color-hristudio-teal: var(--hristudio-teal);
 }
 
@@ -289,3 +290,22 @@ body {
 :root.light .theme-logo-dark {
   display: none;
 }
+
+/* Manyangles: album-paper tones and a soft blue wash in both themes. */
+.manyangles-showcase {
+  background-color: light-dark(#f4f1ea, #0d1018);
+}
+
+.manyangles-backdrop {
+  background-image:
+    radial-gradient(
+      ellipse at 85% 25%,
+      light-dark(#3156c81a, #7f9cff1a),
+      transparent 65%
+    ),
+    repeating-linear-gradient(
+      -12deg,
+      transparent 0 80px,
+      light-dark(#3156c808, #7f9cff08) 80px 81px
+    );
+}