From dbc1d2e1a3fc5a87b196f40d9c40ee29548d5264 Mon Sep 17 00:00:00 2001
From: Brandon McConnell <brandon@dreamthinkbuild.com>
Date: Wed, 30 Jul 2025 15:03:16 -0400
Subject: [PATCH] Refine spacing to match previous spacing

Correct hero spacing changes caused by line-height adjustments in Tailwind v4
---
 apps/web/src/components/landing/handlebars.tsx | 8 ++++----
 apps/web/src/components/landing/hero.tsx       | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/components/landing/handlebars.tsx b/apps/web/src/components/landing/handlebars.tsx
index 4c332b37..3ed39a9f 100644
--- a/apps/web/src/components/landing/handlebars.tsx
+++ b/apps/web/src/components/landing/handlebars.tsx
@@ -46,8 +46,8 @@ export function Handlebars({ children }: HandlebarsProps) {
   const rightGradient = useTransform(rightHandleX, [0, width + 10], [0, 100]);
 
   return (
-    <div className="flex justify-center gap-4 leading-16 mt-0 md:mt-2">
-      <div ref={containerRef} className="relative -rotate-[2.76deg] mt-2">
+    <div className="flex justify-center gap-4 leading-16">
+      <div ref={containerRef} className="relative -rotate-[2.76deg] mt-0.5">
         <div className="absolute inset-0 w-full h-full rounded-2xl border border-yellow-500 flex justify-between z-1">
           <motion.div
             className="absolute z-10 left-0 h-full border border-yellow-500 w-7 rounded-full bg-accent flex items-center justify-center select-none"
@@ -62,7 +62,7 @@ export function Handlebars({ children }: HandlebarsProps) {
             whileDrag={{ scale: 1.1, cursor: "grabbing" }}
             transition={{ type: "spring", stiffness: 400, damping: 30 }}
           >
-            <div className="w-2 h-8 rounded-full bg-yellow-500"></div>
+            <div className="w-2 h-8 rounded-full bg-yellow-500" />
           </motion.div>
 
           <motion.div
@@ -81,7 +81,7 @@ export function Handlebars({ children }: HandlebarsProps) {
             whileDrag={{ scale: 1.1, cursor: "grabbing" }}
             transition={{ type: "spring", stiffness: 400, damping: 30 }}
           >
-            <div className="w-2 h-8 rounded-full bg-yellow-500"></div>
+            <div className="w-2 h-8 rounded-full bg-yellow-500" />
           </motion.div>
         </div>
 
diff --git a/apps/web/src/components/landing/hero.tsx b/apps/web/src/components/landing/hero.tsx
index dba958ac..2c6a130e 100644
--- a/apps/web/src/components/landing/hero.tsx
+++ b/apps/web/src/components/landing/hero.tsx
@@ -30,7 +30,7 @@ export function Hero() {
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ delay: 0.6, duration: 0.8 }}
-          className="mb-8 flex justify-center"
+          className="mb-4 flex justify-center"
         >
           <SponsorButton
             href="https://vercel.com/home?utm_source=opencut"