Marc Mintel
103d71851c
Some checks failed
🧪 CI (QA) / 🧪 Quality Assurance (push) Failing after 1m3s
- Restructure to pnpm monorepo (site moved to apps/web) - Integrate @mintel/tsconfig, @mintel/eslint-config, @mintel/husky-config - Implement Docker service architecture (Varnish, Directus, Gatekeeper) - Setup environment-aware Gitea Actions deployment
55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { IllustrationProps } from './types';
|
|
|
|
export const ResultIllustration: React.FC<IllustrationProps> = ({ className = "", delay = 0 }) => (
|
|
<svg className={className} viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
{/* Result Box */}
|
|
<motion.rect
|
|
x="30" y="30" width="60" height="60" rx="4"
|
|
stroke="currentColor"
|
|
strokeWidth="1"
|
|
className="text-slate-900"
|
|
initial={{ pathLength: 0, rotate: -10, opacity: 0 }}
|
|
whileInView={{ pathLength: 1, rotate: 0, opacity: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 1, delay }}
|
|
/>
|
|
|
|
{/* Checkmark */}
|
|
<motion.path
|
|
d="M 45 60 L 55 70 L 75 50"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
className="text-slate-900"
|
|
initial={{ pathLength: 0 }}
|
|
whileInView={{ pathLength: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5, delay: delay + 1 }}
|
|
/>
|
|
|
|
{/* Sparkles */}
|
|
{[
|
|
{ x: 25, y: 25 },
|
|
{ x: 95, y: 35 },
|
|
{ x: 85, y: 95 }
|
|
].map((pos, i) => (
|
|
<motion.path
|
|
key={i}
|
|
d={`M ${pos.x} ${pos.y-4} V ${pos.y+4} M ${pos.x-4} ${pos.y} H ${pos.x+4}`}
|
|
stroke="currentColor"
|
|
strokeWidth="1"
|
|
className="text-slate-300"
|
|
initial={{ scale: 0, opacity: 0 }}
|
|
whileInView={{ scale: 1, opacity: 1 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: delay + 1.5 + i * 0.2, type: "spring" }}
|
|
/>
|
|
))}
|
|
</svg>
|
|
);
|