75 lines
2.4 KiB
TypeScript
75 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { motion } from "framer-motion";
|
|
import { Reveal } from "@/components/reveal";
|
|
|
|
export type UIScreenshot = {
|
|
src: string;
|
|
title: string;
|
|
description?: string;
|
|
};
|
|
|
|
export function DesktopUIShowcase({
|
|
title = "Desktop Interface",
|
|
subtitle = "Control surface software designed for clarity and speed.",
|
|
screenshots,
|
|
}: {
|
|
title?: string;
|
|
subtitle?: string;
|
|
screenshots: UIScreenshot[];
|
|
}) {
|
|
return (
|
|
<section className="relative overflow-hidden">
|
|
<div className="glass-strong noise-overlay rounded-3xl p-6 sm:p-8 shadow-sm relative overflow-hidden">
|
|
{/* Header */}
|
|
<div className="flex flex-col gap-2">
|
|
<h2 className="text-xl sm:text-2xl font-semibold tracking-tight">
|
|
{title}
|
|
</h2>
|
|
<p className="text-sm sm:text-[15px] text-black/60 max-w-3xl">
|
|
{subtitle}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Grid */}
|
|
<div className="mt-6 sm:mt-8 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
|
|
{screenshots.map((shot, i) => (
|
|
<Reveal key={shot.src}>
|
|
<motion.div
|
|
whileHover={{ y: -6 }}
|
|
transition={{ type: "spring", stiffness: 160, damping: 18 }}
|
|
className="glass rounded-3xl overflow-hidden group"
|
|
>
|
|
{/* Image */}
|
|
<div className="relative aspect-[16/10] w-full overflow-hidden">
|
|
<Image
|
|
src={shot.src}
|
|
alt={shot.title}
|
|
fill
|
|
className="object-cover transition duration-500 group-hover:scale-[1.04]"
|
|
/>
|
|
</div>
|
|
|
|
{/* Caption */}
|
|
<div className="p-4">
|
|
<div className="text-sm font-semibold text-black/75">
|
|
{shot.title}
|
|
</div>
|
|
{shot.description ? (
|
|
<div className="mt-1 text-sm text-black/60 leading-relaxed">
|
|
{shot.description}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</motion.div>
|
|
</Reveal>
|
|
))}
|
|
</div>
|
|
|
|
{/* Specular highlight */}
|
|
<div className="pointer-events-none specular absolute -top-24 -right-24 h-64 w-64 rounded-full opacity-50 blur-2xl" />
|
|
</div>
|
|
</section>
|
|
);
|
|
} |