public: new page and copy improvements

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

@@ -1,6 +1,6 @@
-import { cn } from '@/lib/utils';
 import type { LucideIcon } from 'lucide-react';
 import Link from 'next/link';
+import { cn } from '@/lib/utils';
 
 interface FeatureCardProps {
   link?: {
@@ -21,12 +21,17 @@ interface FeatureCardContainerProps {
   className?: string;
 }
 
-export const FeatureCardBackground = () => (
+export const FeatureCardBackground = ({
+  interactive = true,
+}: {
+  interactive?: boolean;
+}) => (
   <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',
+      'dark:from-blue-500/20 dark:via-transparent dark:to-emerald-500/10',
       'light:from-blue-800/20 light:via-transparent light:to-emerald-900/10',
+      interactive === false && 'opacity-100'
     )}
   />
 );
@@ -38,8 +43,8 @@ export function FeatureCardContainer({
   return (
     <div
       className={cn(
-        'col gap-8 p-6 rounded-3xl border bg-background group relative overflow-hidden',
-        className,
+        'col group relative gap-8 overflow-hidden rounded-3xl border bg-background p-6',
+        className
       )}
     >
       <FeatureCardBackground />
@@ -62,13 +67,13 @@ export function FeatureCard({
       <FeatureCardContainer className={className}>
         {illustration}
         <div className="col gap-2" data-content>
-          <h3 className="text-xl font-semibold">{title}</h3>
+          <h3 className="font-semibold text-xl">{title}</h3>
           <p className="text-muted-foreground">{description}</p>
         </div>
         {children}
         {link && (
           <Link
-            className="mx-6 text-sm text-muted-foreground hover:text-primary transition-colors"
+            className="mx-6 text-muted-foreground text-sm transition-colors hover:text-primary"
             href={link.href}
           >
             {link.children}
@@ -82,13 +87,13 @@ export function FeatureCard({
     <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>
+        <h3 className="font-semibold text-lg">{title}</h3>
+        <p className="text-muted-foreground text-sm">{description}</p>
       </div>
       {children}
       {link && (
         <Link
-          className="text-sm text-muted-foreground hover:text-primary transition-colors"
+          className="text-muted-foreground text-sm transition-colors hover:text-primary"
           href={link.href}
         >
           {link.children}