wip

apps/website/components/ui/Button.tsx

@@ -11,7 +11,7 @@ type ButtonAsLink = AnchorHTMLAttributes<HTMLAnchorElement> & {
 };
 
 type ButtonProps = (ButtonAsButton | ButtonAsLink) & {
-  variant?: 'primary' | 'secondary';
+  variant?: 'primary' | 'secondary' | 'danger';
   children: ReactNode;
 };
 
@@ -26,8 +26,9 @@ export default function Button({
   
   const variantStyles = {
     primary: 'bg-primary-blue text-white shadow-[0_0_15px_rgba(25,140,255,0.4)] hover:shadow-[0_0_25px_rgba(25,140,255,0.6)] active:ring-2 active:ring-primary-blue focus-visible:outline-primary-blue',
-    secondary: 'bg-iron-gray text-white border border-charcoal-outline shadow-[0_0_10px_rgba(25,140,255,0.2)] hover:shadow-[0_0_20px_rgba(25,140,255,0.4)] hover:border-primary-blue focus-visible:outline-primary-blue'
-  };
+    secondary: 'bg-iron-gray text-white border border-charcoal-outline shadow-[0_0_10px_rgba(25,140,255,0.2)] hover:shadow-[0_0_20px_rgba(25,140,255,0.4)] hover:border-primary-blue focus-visible:outline-primary-blue',
+    danger: 'bg-red-600 text-white shadow-[0_0_15px_rgba(248,113,113,0.4)] hover:shadow-[0_0_25px_rgba(248,113,113,0.6)] active:ring-2 active:ring-red-600 focus-visible:outline-red-600'
+  } as const;
 
   const classes = `${baseStyles} ${variantStyles[variant]} ${className}`;
 

apps/website/components/ui/Card.tsx

@@ -1,13 +1,17 @@
-import { ReactNode } from 'react';
+import { ReactNode, MouseEventHandler } from 'react';
 
 interface CardProps {
   children: ReactNode;
   className?: string;
+  onClick?: MouseEventHandler<HTMLDivElement>;
 }
 
-export default function Card({ children, className = '' }: CardProps) {
+export default function Card({ children, className = '', onClick }: CardProps) {
   return (
-    <div className={`rounded-lg bg-iron-gray p-6 shadow-card border border-charcoal-outline hover:shadow-glow transition-shadow duration-200 ${className}`}>
+    <div
+      className={`rounded-lg bg-iron-gray p-6 shadow-card border border-charcoal-outline hover:shadow-glow transition-shadow duration-200 ${className}`}
+      onClick={onClick}
+    >
       {children}
     </div>
   );

apps/website/components/ui/MockupStack.tsx

@@ -32,7 +32,7 @@ export default function MockupStack({ children, index = 0 }: MockupStackProps) {
         <div
           className="absolute rounded-lg bg-iron-gray/80 border border-charcoal-outline"
           style={{
-            rotate: rotation1,
+            rotate: `${rotation1}deg`,
             zIndex: 1,
             top: '-8px',
             left: '-8px',
@@ -46,7 +46,7 @@ export default function MockupStack({ children, index = 0 }: MockupStackProps) {
         <div
           className="absolute rounded-lg bg-iron-gray/90 border border-charcoal-outline"
           style={{
-            rotate: rotation2,
+            rotate: `${rotation2}deg`,
             zIndex: 2,
             top: '-4px',
             left: '-4px',
@@ -75,7 +75,7 @@ export default function MockupStack({ children, index = 0 }: MockupStackProps) {
       <motion.div
         className="absolute rounded-lg bg-iron-gray/80 border border-charcoal-outline"
         style={{
-          rotate: rotation1,
+          rotate: `${rotation1}deg`,
           zIndex: 1,
           top: '-8px',
           left: '-8px',
@@ -91,7 +91,7 @@ export default function MockupStack({ children, index = 0 }: MockupStackProps) {
       <motion.div
         className="absolute rounded-lg bg-iron-gray/90 border border-charcoal-outline"
         style={{
-          rotate: rotation2,
+          rotate: `${rotation2}deg`,
           zIndex: 2,
           top: '-4px',
           left: '-4px',