1 files changed, 79 insertions, 79 deletions
diff --git a/apps/web/src/components/landing/handlebars.tsx b/apps/web/src/components/landing/handlebars.tsx
index d768dcf6..26cf9254 100644
--- a/apps/web/src/components/landing/handlebars.tsx
+++ b/apps/web/src/components/landing/handlebars.tsx
@@ -1,105 +1,105 @@
 "use client";
 
 import {
-	motion,
-	useMotionTemplate,
-	useMotionValue,
-	useMotionValueEvent,
-	useTransform,
+  motion,
+  useMotionTemplate,
+  useMotionValue,
+  useMotionValueEvent,
+  useTransform,
 } from "motion/react";
 import { type PropsWithChildren, useEffect, useRef, useState } from "react";
 
 type HandlebarsProps = PropsWithChildren;
 
 export function Handlebars({ children }: HandlebarsProps) {
-	const containerRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
 
-	const [width, setWidth] = useState(0);
+  const [width, setWidth] = useState(0);
 
-	const [leftHandle, setLeftHandle] = useState(0);
-	const [rightHandle, setRightHandle] = useState(width);
+  const [leftHandle, setLeftHandle] = useState(0);
+  const [rightHandle, setRightHandle] = useState(width);
 
-	const leftHandleX = useMotionValue(0);
-	const rightHandleX = useMotionValue(width);
+  const leftHandleX = useMotionValue(0);
+  const rightHandleX = useMotionValue(width);
 
-	useEffect(() => {
-		const el = containerRef.current;
-		if (!el) return;
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
 
-		const observer = new ResizeObserver(() => {
-			setWidth(el.offsetWidth);
-			setRightHandle(el.offsetWidth);
-			rightHandleX.set(el.offsetWidth);
-		});
+    const observer = new ResizeObserver(() => {
+      setWidth(el.offsetWidth);
+      setRightHandle(el.offsetWidth);
+      rightHandleX.set(el.offsetWidth);
+    });
 
-		observer.observe(el);
-		return () => observer.disconnect();
-	}, [rightHandleX.set]);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [rightHandleX.set]);
 
-	useMotionValueEvent(leftHandleX, "change", () => {
-		setLeftHandle(leftHandleX.get());
-	});
-	useMotionValueEvent(rightHandleX, "change", () => {
-		setRightHandle(rightHandleX.get());
-	});
-	const leftGradient = useTransform(leftHandleX, [0, width - 10], [0, 100]);
-	const rightGradient = useTransform(rightHandleX, [0, width + 10], [0, 100]);
+  useMotionValueEvent(leftHandleX, "change", () => {
+    setLeftHandle(leftHandleX.get());
+  });
+  useMotionValueEvent(rightHandleX, "change", () => {
+    setRightHandle(rightHandleX.get());
+  });
+  const leftGradient = useTransform(leftHandleX, [0, width - 10], [0, 100]);
+  const rightGradient = useTransform(rightHandleX, [0, width + 10], [0, 100]);
 
-	return (
-		<div className="flex justify-center gap-4 leading-[4rem] mt-0 md:mt-2">
-			<div ref={containerRef} className="relative -rotate-[2.76deg] mt-2">
-				<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"
-						style={{
-							x: leftHandleX,
-						}}
-						drag="x"
-						dragConstraints={{ left: 0, right: rightHandle - 60 }}
-						dragElastic={0}
-						dragMomentum={false}
-						whileHover={{ scale: 1.05, cursor: "grab" }}
-						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>
-					</motion.div>
+  return (
+    <div className="flex justify-center gap-4 leading-[4rem] mt-0 md:mt-2">
+      <div ref={containerRef} className="relative -rotate-[2.76deg] mt-2">
+        <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"
+            style={{
+              x: leftHandleX,
+            }}
+            drag="x"
+            dragConstraints={{ left: 0, right: rightHandle - 60 }}
+            dragElastic={0}
+            dragMomentum={false}
+            whileHover={{ scale: 1.05, cursor: "grab" }}
+            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>
+          </motion.div>
 
-					<motion.div
-						className="absolute z-10 -left-[30px] h-full border border-yellow-500 w-7 rounded-full bg-accent flex items-center justify-center select-none"
-						style={{
-							x: rightHandleX,
-						}}
-						drag="x"
-						dragConstraints={{
-							left: leftHandle + 60,
-							right: width,
-						}}
-						dragElastic={0}
-						dragMomentum={false}
-						whileHover={{ scale: 1.05, cursor: "grab" }}
-						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>
-					</motion.div>
-				</div>
+          <motion.div
+            className="absolute z-10 -left-[30px] h-full border border-yellow-500 w-7 rounded-full bg-accent flex items-center justify-center select-none"
+            style={{
+              x: rightHandleX,
+            }}
+            drag="x"
+            dragConstraints={{
+              left: leftHandle + 60,
+              right: width,
+            }}
+            dragElastic={0}
+            dragMomentum={false}
+            whileHover={{ scale: 1.05, cursor: "grab" }}
+            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>
+          </motion.div>
+        </div>
 
-				<motion.span
-					className="inline-flex items-center justify-center w-full h-full px-9 relative rounded-2xl will-change-auto"
-					style={{
-						mask: useMotionTemplate`linear-gradient(90deg,
+        <motion.span
+          className="inline-flex items-center justify-center w-full h-full px-9 relative rounded-2xl will-change-auto"
+          style={{
+            mask: useMotionTemplate`linear-gradient(90deg,
             rgba(255, 255, 255, 0) 0%, 
             rgba(255, 255, 255, 0) ${leftGradient}%, 
             rgba(0, 0, 0) ${leftGradient}%, 
             rgba(0, 0, 0) ${rightGradient}%, 
             rgba(255, 255, 255, 0) ${rightGradient}%, 
             rgba(255, 255, 255, 0) 100%)`,
-					}}
-				>
-					{children}
-				</motion.span>
-			</div>
-		</div>
-	);
+          }}
+        >
+          {children}
+        </motion.span>
+      </div>
+    </div>
+  );
 }