refactor not done

2026-07-13 21:52:53 +02:00 · 2025-11-26 08:47:03 +01:00
commit efbebd13b8
431 changed files with 51577 additions and 0 deletions
@@ -0,0 +1,146 @@
+"use client";
+
+import { type PropsWithChildren, useEffect, useRef, useState } from "react";
+
+type HandlebarsProps = PropsWithChildren;
+
+export function Handlebars({ children }: HandlebarsProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const leftHandleRef = useRef<HTMLDivElement>(null);
+  const rightHandleRef = useRef<HTMLDivElement>(null);
+
+  const [width, setWidth] = useState(0);
+  const [leftHandle, setLeftHandle] = useState(0);
+  const [rightHandle, setRightHandle] = useState(0);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    const updateWidth = () => {
+      const newWidth = el.offsetWidth;
+      setWidth(newWidth);
+      setRightHandle(newWidth);
+    };
+
+    const observer = new ResizeObserver(updateWidth);
+    observer.observe(el);
+    updateWidth();
+
+    return () => observer.disconnect();
+  }, []);
+
+  useEffect(() => {
+    const leftEl = leftHandleRef.current;
+    const rightEl = rightHandleRef.current;
+    if (!leftEl || !rightEl) return;
+
+    let isDraggingLeft = false;
+    let isDraggingRight = false;
+    let startX = 0;
+    let initialPosition = 0;
+
+    const handleMouseDown = (e: MouseEvent, isLeft: boolean) => {
+      e.preventDefault();
+      startX = e.clientX;
+      
+      if (isLeft) {
+        isDraggingLeft = true;
+        initialPosition = leftHandle;
+      } else {
+        isDraggingRight = true;
+        initialPosition = rightHandle;
+      }
+
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+    };
+
+    const handleMouseMove = (e: MouseEvent) => {
+      const deltaX = e.clientX - startX;
+      
+      if (isDraggingLeft) {
+        const newPosition = Math.max(0, Math.min(rightHandle - 60, initialPosition + deltaX));
+        setLeftHandle(newPosition);
+        if (leftEl) {
+          leftEl.style.transform = `translateX(${newPosition}px)`;
+        }
+      } else if (isDraggingRight) {
+        const newPosition = Math.max(leftHandle + 60, Math.min(width, initialPosition + deltaX));
+        setRightHandle(newPosition);
+        if (rightEl) {
+          rightEl.style.transform = `translateX(${newPosition}px)`;
+        }
+      }
+    };
+
+    const handleMouseUp = () => {
+      isDraggingLeft = false;
+      isDraggingRight = false;
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+
+    const leftMouseDown = (e: MouseEvent) => handleMouseDown(e, true);
+    const rightMouseDown = (e: MouseEvent) => handleMouseDown(e, false);
+
+    leftEl.addEventListener("mousedown", leftMouseDown);
+    rightEl.addEventListener("mousedown", rightMouseDown);
+
+    return () => {
+      leftEl.removeEventListener("mousedown", leftMouseDown);
+      rightEl.removeEventListener("mousedown", rightMouseDown);
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [leftHandle, rightHandle, width]);
+
+  const leftGradientPercent = width > 0 ? (leftHandle / (width - 10)) * 100 : 0;
+  const rightGradientPercent = width > 0 ? (rightHandle / (width + 10)) * 100 : 0;
+
+  return (
+    <div className="leading-16 -z-10 flex justify-center gap-4">
+      <div
+        ref={containerRef}
+        className="relative -z-10 mt-0.5 -rotate-[2.76deg]"
+      >
+        <div className="absolute inset-0 flex h-full w-full justify-between rounded-2xl border border-yellow-500">
+          <div
+            ref={leftHandleRef}
+            className="bg-background absolute left-0 flex h-full w-7 select-none items-center justify-center rounded-full border border-yellow-500 cursor-grab hover:scale-105 transition-transform"
+            style={{
+              transform: `translateX(${leftHandle}px)`,
+            }}
+          >
+            <div className="h-8 w-2 rounded-full bg-yellow-500" />
+          </div>
+
+          <div
+            ref={rightHandleRef}
+            className="bg-background absolute -left-[30px] flex h-full w-7 select-none items-center justify-center rounded-full border border-yellow-500 cursor-grab hover:scale-105 transition-transform]"
+            style={{
+              transform: `translateX(${rightHandle}px)`,
+            }}
+          >
+            <div className="h-8 w-2 rounded-full bg-yellow-500" />
+          </div>
+        </div>
+
+        <span
+          className="relative inline-flex h-full w-full items-center justify-center rounded-2xl px-9 will-change-auto"
+          style={{
+            mask: `linear-gradient(90deg,
+            rgba(255, 255, 255, 0) 0%, 
+            rgba(255, 255, 255, 0) ${leftGradientPercent}%, 
+            rgba(0, 0, 0) ${leftGradientPercent}%, 
+            rgba(0, 0, 0) ${rightGradientPercent}%, 
+            rgba(255, 255, 255, 0) ${rightGradientPercent}%, 
+            rgba(255, 255, 255, 0) 100%)`,
+          }}
+        >
+          {children}
+        </span>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,45 @@
+"use client";
+
+import { Button } from "../ui/button";
+import { ArrowRight } from "lucide-react";
+import Image from "next/image";
+import { Handlebars } from "./handlebars";
+import Link from "next/link";
+
+export function Hero() {
+  return (
+    <div className="min-h-[calc(100svh-4.5rem)] flex flex-col justify-between items-center text-center px-4">
+      <Image
+        className="absolute top-0 left-0 -z-50 size-full object-cover invert dark:invert-0 opacity-85"
+        src="/landing-page-dark.png"
+        height={1903.5}
+        width={1269}
+        alt="landing-page.bg"
+      />
+      <div className="max-w-3xl mx-auto w-full flex-1 flex flex-col justify-center">
+        <div className="inline-block font-bold tracking-tighter text-4xl md:text-[4rem]">
+          <h1>The Open Source</h1>
+          <Handlebars>Video Editor</Handlebars>
+        </div>
+
+        <p className="mt-10 text-base sm:text-xl text-muted-foreground font-light tracking-wide max-w-xl mx-auto">
+          A simple but powerful video editor that gets the job done. Works on
+          any platform.
+        </p>
+
+        <div className="mt-8 flex gap-8 justify-center">
+          <Link href="/projects">
+            <Button
+              type="submit"
+              size="lg"
+              className="px-6 h-11 text-base bg-foreground"
+            >
+              Try early beta
+              <ArrowRight className="ml-0.5" />
+            </Button>
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}