first commit

2026-09-28 13:52:25 +07:00
commit 566275348c
262 changed files with 37008 additions and 0 deletions
@@ -0,0 +1,56 @@
+import Card from '@/components/site/card';
+import Icon from '@/components/site/icon';
+
+type StepCardProps = {
+    step: string;
+    title: string;
+    description: string;
+    icon?: string;
+    /** Duration or phase label shown next to the number. */
+    badge?: string;
+    footer?: { icon: string; label: string };
+};
+
+export default function StepCard({
+    step,
+    title,
+    description,
+    icon,
+    badge,
+    footer,
+}: StepCardProps) {
+    return (
+        <Card interactive className="flex flex-col justify-between">
+            <div>
+                <div className="flex items-center justify-between pb-5">
+                    <span className="font-display text-headline-xl text-outline-variant group-hover:text-primary font-extrabold transition-colors">
+                        {step}
+                    </span>
+                    {badge && (
+                        <span className="bg-surface-container text-primary rounded px-2.5 py-1 font-mono text-[11px] font-semibold">
+                            {badge}
+                        </span>
+                    )}
+                    {icon && !badge && (
+                        <Icon
+                            name={icon}
+                            className="text-on-surface-variant text-2xl"
+                        />
+                    )}
+                </div>
+                <h3 className="font-display text-on-surface pb-2 text-lg font-bold">
+                    {title}
+                </h3>
+                <p className="text-on-surface-variant text-sm leading-relaxed">
+                    {description}
+                </p>
+            </div>
+            {footer && (
+                <div className="border-outline-variant/30 text-on-surface-variant mt-6 flex items-center gap-2 border-t pt-5 font-mono text-[11px] uppercase">
+                    <Icon name={footer.icon} className="text-primary text-sm" />
+                    {footer.label}
+                </div>
+            )}
+        </Card>
+    );
+}