feat: new public website

apps/public/src/components/feature-card.tsx

@@ -0,0 +1,76 @@
+import { cn } from '@/lib/utils';
+import type { LucideIcon } from 'lucide-react';
+
+interface FeatureCardProps {
+  illustration?: React.ReactNode;
+  title: string;
+  description: string;
+  icon?: LucideIcon;
+  children?: React.ReactNode;
+  className?: string;
+  variant?: 'default' | 'large';
+}
+
+interface FeatureCardContainerProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+export const FeatureCardBackground = () => (
+  <div
+    className={cn(
+      'pointer-events-none absolute inset-0 bg-linear-to-br opacity-0 blur-2xl transition-opacity duration-300 group-hover:opacity-100',
+      'dark:from-blue-500/10 dark:via-transparent dark:to-emerald-500/5',
+      'light:from-blue-800/20 light:via-transparent light:to-emerald-900/10',
+    )}
+  />
+);
+
+export function FeatureCardContainer({
+  children,
+  className,
+}: FeatureCardContainerProps) {
+  return (
+    <div
+      className={cn(
+        'col gap-8 p-6 rounded-3xl border bg-background group relative overflow-hidden',
+        className,
+      )}
+    >
+      <FeatureCardBackground />
+      {children}
+    </div>
+  );
+}
+
+export function FeatureCard({
+  illustration,
+  title,
+  description,
+  icon: Icon,
+  children,
+  className,
+}: FeatureCardProps) {
+  if (illustration) {
+    return (
+      <FeatureCardContainer className={className}>
+        {illustration}
+        <div className="col gap-2" data-content>
+          <h3 className="text-xl font-semibold">{title}</h3>
+          <p className="text-muted-foreground">{description}</p>
+        </div>
+        {children}
+      </FeatureCardContainer>
+    );
+  }
+
+  return (
+    <FeatureCardContainer className={className}>
+      {Icon && <Icon className="size-6" />}
+      <div className="col gap-2">
+        <h3 className="text-lg font-semibold">{title}</h3>
+        <p className="text-sm text-muted-foreground">{description}</p>
+      </div>
+    </FeatureCardContainer>
+  );
+}