first commit

2026-09-28 13:52:25 +07:00
commit 566275348c
262 changed files with 37008 additions and 0 deletions
@@ -0,0 +1,57 @@
+import type { ReactNode } from 'react';
+import Card from '@/components/site/card';
+import Icon from '@/components/site/icon';
+import IconTile from '@/components/site/icon-tile';
+import { cn } from '@/lib/utils';
+
+type FeatureCardProps = {
+    icon: string;
+    title: ReactNode;
+    description: ReactNode;
+    /** Small label shown opposite the icon, e.g. "01 / JASA RESMI". */
+    tag?: string;
+    /** Outcome line separated by a divider at the bottom of the card. */
+    footer?: string;
+    iconTone?: 'soft' | 'solid' | 'neutral';
+    className?: string;
+};
+
+export default function FeatureCard({
+    icon,
+    title,
+    description,
+    tag,
+    footer,
+    iconTone = 'soft',
+    className,
+}: FeatureCardProps) {
+    return (
+        <Card
+            interactive
+            className={cn('flex flex-col justify-between', className)}
+        >
+            <div className="flex flex-col gap-3">
+                <div className="flex items-center justify-between gap-3">
+                    <IconTile icon={icon} tone={iconTone} groupHover />
+                    {tag && (
+                        <span className="text-primary font-mono text-[11px] font-bold">
+                            {tag}
+                        </span>
+                    )}
+                </div>
+                <h3 className="font-display text-on-surface 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-highlight mt-4 flex items-center gap-1.5 border-t pt-4 font-mono text-[11px]">
+                    <Icon name="done" className="text-sm" />
+                    <span>{footer}</span>
+                </div>
+            )}
+        </Card>
+    );
+}