53 lines
1.8 KiB
TypeScript
53 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import type { ReactNode } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { usePrefersReducedMotion } from '@/lib/motion';
|
|
|
|
// Line-art frame for the strategist's portrait. Built so it reads as
|
|
// deliberate with today's placeholder inside and accepts the real photograph
|
|
// when it arrives without any rework: the frame never assumes what it wraps.
|
|
//
|
|
// The gold arc traces roughly three quarters of the circle and draws itself in
|
|
// — an open frame, not a closed badge.
|
|
export function MarcoRetrato({ children, className = '' }: { children: ReactNode; className?: string }) {
|
|
const reduced = usePrefersReducedMotion();
|
|
|
|
return (
|
|
<div className={`relative w-44 h-44 md:w-64 md:h-64 shrink-0 ${className}`}>
|
|
<svg viewBox="0 0 100 100" className="absolute -inset-3 w-[calc(100%+1.5rem)] h-[calc(100%+1.5rem)] text-dorado" aria-hidden="true" focusable="false">
|
|
{reduced ? (
|
|
<circle
|
|
cx={50}
|
|
cy={50}
|
|
r={47}
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth={1.5}
|
|
strokeLinecap="round"
|
|
strokeDasharray="220 295"
|
|
transform="rotate(-120 50 50)"
|
|
/>
|
|
) : (
|
|
<motion.circle
|
|
cx={50}
|
|
cy={50}
|
|
r={47}
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth={1.5}
|
|
strokeLinecap="round"
|
|
strokeDasharray="220 295"
|
|
transform="rotate(-120 50 50)"
|
|
initial={{ pathLength: 0, opacity: 0 }}
|
|
whileInView={{ pathLength: 1, opacity: 1 }}
|
|
viewport={{ once: true, amount: 0.4 }}
|
|
transition={{ duration: 1.2, ease: [0.22, 1, 0.36, 1] }}
|
|
/>
|
|
)}
|
|
</svg>
|
|
<div className="relative w-full h-full rounded-full overflow-hidden">{children}</div>
|
|
</div>
|
|
);
|
|
}
|