landing-5

Author: ComputelessComputer

apps/web/package.json

@@ -14,6 +14,7 @@
     "@hypr/ui": "workspace:*",
     "@hypr/utils": "workspace:*",
     "@iconify-icon/react": "^3.0.1",
+    "@mux/mux-player-react": "^3.7.0",
     "@nangohq/frontend": "^0.69.5",
     "@nangohq/node": "^0.69.5",
     "@sentry/tanstackstart-react": "^10.22.0",

apps/web/public/hyprnote_with_noise.png renamed to apps/web/public/hyprnote/icon.png

@@ -0,0 +1,88 @@
+import { cn } from "@hypr/utils";
+import { Icon } from "@iconify-icon/react";
+import MuxPlayer, { type MuxPlayerRefAttributes } from "@mux/mux-player-react";
+import { useEffect, useRef } from "react";
+
+interface VideoModalProps {
+  playbackId: string;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function VideoModal({ playbackId, isOpen, onClose }: VideoModalProps) {
+  const playerRef = useRef<MuxPlayerRefAttributes>(null);
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (isOpen && playerRef.current) {
+      playerRef.current.play().catch(() => {
+        // Ignore autoplay errors
+      });
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && isOpen) {
+        onClose();
+      }
+    };
+
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isOpen, onClose]);
+
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "";
+    }
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, [isOpen]);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-4"
+      onClick={onClose}
+    >
+      <div
+        ref={modalRef}
+        className="relative w-full max-w-6xl aspect-video"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Close button */}
+        <button
+          onClick={onClose}
+          className={cn(
+            "absolute -top-12 right-0 p-2",
+            "text-white hover:text-neutral-300",
+            "transition-colors duration-200",
+          )}
+          aria-label="Close video"
+        >
+          <Icon icon="mdi:close" className="text-3xl" />
+        </button>
+
+        {/* Video */}
+        <MuxPlayer
+          ref={playerRef}
+          playbackId={playbackId}
+          autoPlay
+          loop
+          accentColor="#78716c"
+          className="w-full h-full rounded-lg"
+          metadata={{
+            videoTitle: "Hyprnote Feature Demo",
+          }}
+        />
+      </div>
+    </div>
+  );
+}

apps/web/public/hyprnote-logo.svg renamed to apps/web/public/hyprnote/logo.svg

@@ -0,0 +1,104 @@
+import { cn } from "@hypr/utils";
+import MuxPlayer, { type MuxPlayerRefAttributes } from "@mux/mux-player-react";
+import { useEffect, useRef, useState } from "react";
+
+interface VideoPlayerProps {
+  playbackId: string;
+  className?: string;
+  onLearnMore?: () => void;
+  showButtons?: boolean;
+  onExpandVideo?: () => void;
+}
+
+export function VideoPlayer({
+  playbackId,
+  className,
+  onLearnMore,
+  showButtons = true,
+  onExpandVideo,
+}: VideoPlayerProps) {
+  const [isHovered, setIsHovered] = useState(false);
+  const [showControls, setShowControls] = useState(false);
+  const playerRef = useRef<MuxPlayerRefAttributes>(null);
+
+  useEffect(() => {
+    if (playerRef.current) {
+      if (isHovered) {
+        playerRef.current.play().catch(() => {
+          // Ignore autoplay errors
+        });
+        setShowControls(true);
+      } else {
+        playerRef.current.pause();
+        playerRef.current.currentTime = 0;
+        setShowControls(false);
+      }
+    }
+  }, [isHovered]);
+
+  return (
+    <div
+      className={cn("relative w-full h-full overflow-hidden group", className)}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      <MuxPlayer
+        ref={playerRef}
+        playbackId={playbackId}
+        loop
+        muted
+        playsInline
+        accentColor="#78716c"
+        className="w-full h-full object-cover"
+        style={{
+          "--controls": "none",
+          aspectRatio: "16/9",
+        } as React.CSSProperties}
+      />
+
+      {/* Buttons overlay - slide up from bottom */}
+      {showButtons && showControls && (
+        <div
+          className={cn(
+            "absolute bottom-0 left-0 right-0",
+            "transition-all duration-300 ease-out",
+            "flex gap-0",
+            isHovered ? "translate-y-0 opacity-100" : "translate-y-full opacity-0",
+          )}
+        >
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onLearnMore?.();
+            }}
+            className={cn(
+              "flex-1 py-4 text-xs font-mono",
+              "bg-stone-100/95 text-stone-800",
+              "border-r border-stone-400/50",
+              "hover:bg-stone-200/95 active:bg-stone-400/95",
+              "transition-all duration-150",
+              "backdrop-blur-sm",
+            )}
+          >
+            Learn more
+          </button>
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onExpandVideo?.();
+            }}
+            className={cn(
+              "flex-1 py-4 text-xs font-mono",
+              "bg-stone-100/95 text-stone-800",
+              "hover:bg-stone-200/95 active:bg-stone-400/95",
+              "transition-all duration-150",
+              "backdrop-blur-sm",
+            )}
+          >
+            Expand video
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

apps/web/public/hyprnote_signature_light.svg renamed to apps/web/public/hyprnote/signature.svg

@@ -0,0 +1,50 @@
+import { cn } from "@hypr/utils";
+import { Icon } from "@iconify-icon/react";
+import MuxPlayer from "@mux/mux-player-react";
+
+interface VideoThumbnailProps {
+  playbackId: string;
+  className?: string;
+  onPlay?: () => void;
+}
+
+export function VideoThumbnail({
+  playbackId,
+  className,
+  onPlay,
+}: VideoThumbnailProps) {
+  return (
+    <div className={cn("relative w-full h-full overflow-hidden group cursor-pointer", className)} onClick={onPlay}>
+      {/* Static thumbnail from Mux */}
+      <MuxPlayer
+        playbackId={playbackId}
+        muted
+        playsInline
+        className="w-full h-full object-cover pointer-events-none"
+        style={{
+          "--controls": "none",
+          aspectRatio: "16/9",
+        } as React.CSSProperties}
+      />
+
+      {/* Overlay with play button */}
+      <div className="absolute inset-0 bg-black/20 group-hover:bg-black/30 transition-all duration-200 flex items-center justify-center">
+        <button
+          onClick={(e) => {
+            e.stopPropagation();
+            onPlay?.();
+          }}
+          className={cn(
+            "size-16 rounded-full bg-white/90 backdrop-blur-sm",
+            "flex items-center justify-center",
+            "hover:bg-white hover:scale-110 transition-all duration-200",
+            "shadow-xl",
+          )}
+          aria-label="Play video"
+        >
+          <Icon icon="mdi:play" className="text-4xl text-stone-700 ml-1" />
+        </button>
+      </div>
+    </div>
+  );
+}