phone-card

1"use client";
2import { LazyVideo } from "./lazy-video";
3 
4export interface PhoneCardProps {
5  title?: string;
6  sub?: string;
7  tone?: string;
8  gradient?: string;
9  videoSrc?: string;
10  imageSrc?: string;
11  mediaType?: "video" | "image";
12}
13 
14export function PhoneCard({
15  title = "8°",
16  sub = "Clear night. Great for render farm runs.",
17  tone = "calm",
18  gradient = "from-[#0f172a] via-[#14532d] to-[#052e16]",
19  videoSrc = "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/A%20new%20chapter%20in%20the%20story%20of%20success.__Introducing%20the%20new%20TAG%20Heuer%20Carrera%20Day-Date%20collection%2C%20reimagined%20with%20bold%20colors%2C%20refined%20finishes%2C%20and%20upgraded%20functionality%20to%20keep%20you%20focused%20on%20your%20goals.%20__Six%20-nDNoRQyFaZ8oaaoty4XaQz8W8E5bqA.mp4",
20  imageSrc = "https://www.jakala.com/hs-fs/hubfs/Vercel%20header-1.jpg?width=800&height=800&name=Vercel%20header-1.jpg",
21  mediaType = "video",
22}: PhoneCardProps) {
23  return (
24    <div className="glass-border relative rounded-[28px] bg-neutral-900 p-2">
25      <div className="relative aspect-[9/19] w-full overflow-hidden rounded-2xl bg-black">
26        {mediaType === "video" ? (
27          <LazyVideo
28            src={videoSrc}
29            className="absolute inset-0 h-full w-full object-cover"
30            autoPlay={true}
31            loop={true}
32            muted={true}
33            playsInline={true}
34            aria-label={`${title} - ${sub}`}
35          />
36        ) : (
37          // biome-ignore lint/performance/noImgElement: next/image causes ESM issues with fumadocs-mdx
38          <img
39            src={imageSrc}
40            alt={`${title} - ${sub}`}
41            className="absolute inset-0 h-full w-full object-cover"
42          />
43        )}
44 
45        {/* Gradient overlay */}
46        <div
47          className={`absolute inset-0 bg-gradient-to-b ${gradient} opacity-60 mix-blend-overlay`}
48        />
49 
50        <div className="relative z-10 p-3">
51          <div className="mx-auto mb-3 h-1.5 w-16 rounded-full bg-white/20" />
52          <div className="space-y-1 px-1">
53            <div className="font-bold text-3xl text-white/90 leading-snug">
54              {title}
55            </div>
56            <p className="text-white/70 text-xs">{sub}</p>
57            <div className="mt-3 inline-flex items-center rounded-full bg-black/40 px-2 py-0.5 text-[10px] text-lime-300 uppercase tracking-wider">
58              {tone === "calm" ? "Joly UI" : tone}
59            </div>
60          </div>
61// … truncated