ZacharyZhang-NY
c0f677ccc9
- navbar: sticky, transparent to blur-on-scroll, wordmark + mono nav links + theme toggle + Download CTA, Reicon Menu/Xmark icons (components/layout) - theme-toggle: Reicon Sun/Moon icons - hero: meadow badge, tight Instrument Sans headline, Download + How-it-works CTAs, availability line, framed dashboard shot (components/sections) - features: five stacked heading-over-panel sections mapping the org chart, office, messages, connectors and cost-control screens - ui/media-frame: shared framed product-shot panel - reveal: progressive enhancement — content is visible without JS and only hidden once the js class is present, then revealed on scroll - remove the superseded flat navbar/hero/features components Verified: next build green; desktop + mobile screenshots reviewed.
30 lines
735 B
TypeScript
30 lines
735 B
TypeScript
/** Framed product screenshot panel: rounded, bordered, soft shadow on the page. */
|
|
export function MediaFrame({
|
|
src,
|
|
alt,
|
|
priority = false,
|
|
className = "",
|
|
}: {
|
|
src: string;
|
|
alt: string;
|
|
priority?: boolean;
|
|
className?: string;
|
|
}) {
|
|
return (
|
|
<div
|
|
className={`overflow-hidden rounded-xl border border-[var(--border)] bg-[var(--panel-illustration)] shadow-[0_24px_70px_-28px_rgba(10,29,8,0.3)] md:rounded-2xl ${className}`}
|
|
>
|
|
<img
|
|
src={src}
|
|
alt={alt}
|
|
width={2400}
|
|
height={1600}
|
|
loading={priority ? "eager" : "lazy"}
|
|
decoding="async"
|
|
fetchPriority={priority ? "high" : "auto"}
|
|
className="block h-auto w-full"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|