vibecarbon 0.1.0

package/carbon/src/client/components/architecture/ArchitectureDiagram.tsx

@@ -0,0 +1,413 @@
+import { motion } from 'framer-motion';
+import {
+  Cloud,
+  Container,
+  Database,
+  Globe,
+  HardDrive,
+  Key,
+  Layers,
+  Radio,
+  Server,
+  Zap,
+} from 'lucide-react';
+import { FresnelEdge } from '../effects/FresnelEdge';
+import { GlowTracker } from '../effects/GlowTracker';
+
+/* ------------------------------------------------------------------ */
+/*  Layer data                                                         */
+/* ------------------------------------------------------------------ */
+
+interface TechItem {
+  icon: React.ComponentType<{ className?: string; strokeWidth?: number }>;
+  label: string;
+  accent: 'teal' | 'magenta';
+}
+
+interface LayerConfig {
+  id: string;
+  title: string;
+  /** Tailwind max-width class — drives the pyramid shape */
+  maxWidth: string;
+  borderColor: string;
+  glowShadow: string;
+  /** Framer Motion entrance delay (bottom-up stagger) */
+  delay: number;
+  /** Framer Motion entrance y offset */
+  yOffset: number;
+  accent: 'teal' | 'magenta';
+  items: TechItem[];
+  /** Optional second row of items (Supabase uses a 2×2 + banner layout) */
+  itemsRow2?: TechItem[];
+  /** Full-width banner item (PostgreSQL) */
+  banner?: TechItem;
+  /** Show divider between items (Backend layer) */
+  divider?: boolean;
+  /** Show dot-grid background (Infrastructure layer) */
+  dotGrid?: boolean;
+}
+
+const LAYERS: LayerConfig[] = [
+  {
+    id: 'frontend',
+    title: 'FRONTEND',
+    maxWidth: 'max-w-md',
+    borderColor: 'border-primary/20',
+    glowShadow: '0 8px 32px oklch(0.82 0.14 192 / 0.15)',
+    delay: 0.55,
+    yOffset: 10,
+    accent: 'teal',
+    items: [
+      { icon: Zap, label: 'React 19', accent: 'teal' },
+      { icon: Globe, label: 'Vite', accent: 'teal' },
+      { icon: Layers, label: 'Shadcn UI', accent: 'teal' },
+    ],
+  },
+  {
+    id: 'backend',
+    title: 'BACKEND',
+    maxWidth: 'max-w-lg',
+    borderColor: 'border-primary/20',
+    glowShadow: '0 8px 24px oklch(0.82 0.14 192 / 0.10)',
+    delay: 0.4,
+    yOffset: 20,
+    accent: 'teal',
+    divider: true,
+    items: [
+      { icon: Globe, label: 'Traefik', accent: 'teal' },
+      { icon: Server, label: 'Hono API', accent: 'teal' },
+    ],
+  },
+  {
+    id: 'supabase',
+    title: 'SUPABASE',
+    maxWidth: 'max-w-xl',
+    borderColor: 'border-primary/20',
+    glowShadow: '0 8px 28px oklch(0.75 0.20 270 / 0.12)',
+    delay: 0.25,
+    yOffset: 30,
+    accent: 'teal',
+    items: [
+      { icon: Key, label: 'Auth', accent: 'teal' },
+      { icon: Globe, label: 'REST API', accent: 'teal' },
+    ],
+    itemsRow2: [
+      { icon: Radio, label: 'Realtime', accent: 'teal' },
+      { icon: HardDrive, label: 'Storage', accent: 'teal' },
+    ],
+    banner: { icon: Database, label: 'PostgreSQL + RLS', accent: 'teal' },
+  },
+  {
+    id: 'infrastructure',
+    title: 'INFRASTRUCTURE',
+    maxWidth: 'max-w-2xl',
+    borderColor: 'border-secondary-accent/20',
+    glowShadow: '0 8px 32px oklch(0.65 0.26 350 / 0.12)',
+    delay: 0.1,
+    yOffset: 40,
+    accent: 'magenta',
+    dotGrid: true,
+    items: [
+      { icon: Container, label: 'Docker', accent: 'teal' },
+      { icon: Layers, label: 'Kubernetes', accent: 'teal' },
+      { icon: HardDrive, label: 'S3 Storage', accent: 'magenta' },
+      { icon: Cloud, label: 'Hetzner', accent: 'magenta' },
+    ],
+  },
+];
+
+/* ------------------------------------------------------------------ */
+/*  TechChip                                                           */
+/* ------------------------------------------------------------------ */
+
+function TechChip({ icon: Icon, label, accent }: TechItem) {
+  const styles = {
+    teal: {
+      bg: 'bg-primary/10',
+      icon: 'text-primary',
+      border: 'border-primary/20',
+      hoverGlow: '0 0 12px oklch(0.82 0.14 192 / 0.35)',
+    },
+    magenta: {
+      bg: 'bg-secondary-accent/10',
+      icon: 'text-secondary-accent',
+      border: 'border-secondary-accent/20',
+      hoverGlow: '0 0 12px oklch(0.65 0.26 350 / 0.35)',
+    },
+  }[accent];
+
+  return (
+    <motion.div
+      whileHover={{ scale: 1.05 }}
+      transition={{ type: 'spring', stiffness: 400, damping: 20 }}
+      className={`
+        flex items-center gap-2 rounded-lg border px-3 py-2
+        bg-gradient-to-br from-black/[0.03] dark:from-white/5 to-transparent
+        transition-shadow duration-200
+        ${styles.border}
+      `}
+      style={{ '--chip-glow': styles.hoverGlow } as React.CSSProperties}
+      onMouseEnter={(e) => {
+        (e.currentTarget as HTMLElement).style.boxShadow = styles.hoverGlow;
+      }}
+      onMouseLeave={(e) => {
+        (e.currentTarget as HTMLElement).style.boxShadow = 'none';
+      }}
+    >
+      <div className={`${styles.bg} rounded p-1.5`}>
+        <Icon className={`size-4 ${styles.icon}`} strokeWidth={1.5} />
+      </div>
+      <span className="font-medium text-foreground text-xs sm:text-sm">{label}</span>
+    </motion.div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  TechBanner — full-width item (PostgreSQL)                         */
+/* ------------------------------------------------------------------ */
+
+function TechBanner({ icon: Icon, label, accent }: TechItem) {
+  const isTeal = accent === 'teal';
+  return (
+    <div
+      className={`
+        flex items-center justify-center gap-2 rounded-lg border px-4 py-2
+        bg-gradient-to-r
+        ${isTeal ? 'from-primary/10 via-primary/5 to-primary/10 border-primary/25' : 'from-secondary-accent/10 via-secondary-accent/5 to-secondary-accent/10 border-secondary-accent/25'}
+      `}
+    >
+      <Icon
+        className={`size-4 ${isTeal ? 'text-primary' : 'text-secondary-accent'}`}
+        strokeWidth={1.5}
+      />
+      <span className="font-semibold text-foreground text-xs sm:text-sm">{label}</span>
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  FlowConnector — animated pulse between layers                     */
+/* ------------------------------------------------------------------ */
+
+function FlowConnector({ delay }: { delay: number }) {
+  return (
+    <motion.div
+      className="flex flex-col items-center h-8 md:h-10"
+      initial={{ opacity: 0 }}
+      whileInView={{ opacity: 1 }}
+      viewport={{ once: true, amount: 0.5 }}
+      transition={{ delay: delay + 0.15, duration: 0.4 }}
+    >
+      {/* Animated gradient line */}
+      <div className="relative w-0.5 flex-1 overflow-hidden rounded-full">
+        <div
+          className="absolute inset-0 motion-safe:animate-[flowPulse_2s_ease-in-out_infinite]"
+          style={{
+            backgroundImage:
+              'linear-gradient(to bottom, transparent 0%, oklch(0.82 0.14 192 / 0.6) 40%, oklch(0.82 0.14 192 / 0.8) 50%, oklch(0.82 0.14 192 / 0.6) 60%, transparent 100%)',
+            backgroundSize: '100% 300%',
+          }}
+        />
+        {/* Static fallback for reduced motion */}
+        <div className="absolute inset-0 motion-reduce:block hidden bg-gradient-to-b from-border/40 via-border/60 to-border/40" />
+      </div>
+      {/* Glowing midpoint dot */}
+      <div className="relative shrink-0 my-0.5">
+        <div className="size-1.5 rounded-full bg-primary/70" />
+        <div className="absolute inset-0 size-1.5 rounded-full bg-primary/40 motion-safe:animate-ping" />
+      </div>
+      <div className="relative w-0.5 flex-1 overflow-hidden rounded-full">
+        <div
+          className="absolute inset-0 motion-safe:animate-[flowPulse_2s_ease-in-out_infinite]"
+          style={{
+            backgroundImage:
+              'linear-gradient(to bottom, transparent 0%, oklch(0.82 0.14 192 / 0.6) 40%, oklch(0.82 0.14 192 / 0.8) 50%, oklch(0.82 0.14 192 / 0.6) 60%, transparent 100%)',
+            backgroundSize: '100% 300%',
+            animationDelay: '0.3s',
+          }}
+        />
+        <div className="absolute inset-0 motion-reduce:block hidden bg-gradient-to-b from-border/40 via-border/60 to-border/40" />
+      </div>
+    </motion.div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  MobileFlowBar — simplified connector for mobile                   */
+/* ------------------------------------------------------------------ */
+
+function MobileFlowBar() {
+  return (
+    <div className="flex justify-center h-4">
+      <div
+        className="w-4 h-full rounded-full"
+        style={{
+          background:
+            'linear-gradient(to bottom, oklch(0.82 0.14 192 / 0.3), oklch(0.65 0.26 350 / 0.3))',
+        }}
+      />
+    </div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  LayerPlatform                                                      */
+/* ------------------------------------------------------------------ */
+
+function LayerPlatform({ layer }: { layer: LayerConfig }) {
+  const labelBg =
+    layer.accent === 'teal'
+      ? 'bg-primary/10 text-primary'
+      : 'bg-secondary-accent/10 text-secondary-accent';
+
+  const mobileBorderColor =
+    layer.accent === 'teal' ? 'oklch(0.82 0.14 192 / 0.6)' : 'oklch(0.65 0.26 350 / 0.6)';
+
+  return (
+    <motion.div
+      className={`w-full ${layer.maxWidth} mx-auto`}
+      initial={{ y: layer.yOffset, opacity: 0 }}
+      whileInView={{ y: 0, opacity: 1 }}
+      viewport={{ once: true, amount: 0.3 }}
+      transition={{
+        delay: layer.delay,
+        duration: 0.5,
+        ease: [0.25, 0.46, 0.45, 0.94],
+      }}
+    >
+      <FresnelEdge
+        className="rounded-2xl"
+        edgeColor={
+          layer.accent === 'teal' ? 'oklch(0.82 0.14 192 / 0.12)' : 'oklch(0.65 0.26 350 / 0.12)'
+        }
+        glowStrength={0.3}
+      >
+        <motion.div
+          className={`
+            relative rounded-2xl border backdrop-blur-xl
+            bg-gradient-to-br from-white/[0.06] to-transparent
+            ${layer.borderColor}
+          `}
+          style={{ boxShadow: layer.glowShadow }}
+          whileHover={{ y: -2 }}
+          transition={{ type: 'spring', stiffness: 300, damping: 25 }}
+        >
+          {/* Thick left accent border on mobile only */}
+          <div
+            className="absolute left-0 top-0 bottom-0 w-1 rounded-l-2xl md:hidden"
+            style={{ backgroundColor: mobileBorderColor }}
+            aria-hidden="true"
+          />
+          <GlowTracker />
+
+          {/* Dot grid background for infrastructure */}
+          {layer.dotGrid && (
+            <div
+              className="absolute inset-0 overflow-hidden rounded-2xl pointer-events-none opacity-60"
+              style={{
+                backgroundImage:
+                  'radial-gradient(circle, oklch(0.65 0.26 350 / 0.08) 1px, transparent 1px)',
+                backgroundSize: '24px 24px',
+              }}
+              aria-hidden="true"
+            />
+          )}
+
+          {/* Layer label badge */}
+          <div
+            className={`
+              absolute -top-2.5 left-4 z-10 px-2 py-0.5 rounded text-[10px] font-mono font-semibold tracking-wider
+              ${labelBg}
+            `}
+          >
+            {layer.title}
+          </div>
+
+          {/* Content */}
+          <div className="relative z-[1] px-4 py-5 sm:px-6">
+            {/* Default layout: items in a row */}
+            {!layer.divider && !layer.itemsRow2 && (
+              <div className="flex flex-wrap items-center justify-center gap-2">
+                {layer.items.map((item) => (
+                  <TechChip key={item.label} {...item} />
+                ))}
+              </div>
+            )}
+
+            {/* Backend layout: divider between items */}
+            {layer.divider && (
+              <div className="flex items-center justify-center gap-3">
+                {layer.items.map((item, i) => (
+                  <div key={item.label} className="flex items-center gap-3">
+                    {i > 0 && (
+                      <div className="hidden sm:block h-8 w-px bg-gradient-to-b from-transparent via-border/60 to-transparent" />
+                    )}
+                    <TechChip {...item} />
+                  </div>
+                ))}
+              </div>
+            )}
+
+            {/* Supabase layout: 2×2 grid + banner */}
+            {layer.itemsRow2 && (
+              <div className="flex flex-col gap-2">
+                <div className="grid grid-cols-2 gap-2">
+                  {layer.items.map((item) => (
+                    <TechChip key={item.label} {...item} />
+                  ))}
+                  {layer.itemsRow2.map((item) => (
+                    <TechChip key={item.label} {...item} />
+                  ))}
+                </div>
+                {layer.banner && <TechBanner {...layer.banner} />}
+              </div>
+            )}
+          </div>
+        </motion.div>
+      </FresnelEdge>
+    </motion.div>
+  );
+}
+
+/* ------------------------------------------------------------------ */
+/*  ArchitectureDiagram (exported)                                     */
+/* ------------------------------------------------------------------ */
+
+export function ArchitectureDiagram() {
+  // Render order: bottom-up visually, but DOM order is top-down
+  // (frontend first, infrastructure last)
+  return (
+    <>
+      {/* Keyframe for flow pulse animation */}
+      <style>{`
+        @keyframes flowPulse {
+          0% { background-position: 0 -100%; }
+          100% { background-position: 0 200%; }
+        }
+      `}</style>
+
+      <div className="relative w-full max-w-3xl mx-auto">
+        <div className="flex flex-col gap-0">
+          {LAYERS.map((layer, i) => (
+            <div key={layer.id}>
+              {/* Layer platform */}
+              <LayerPlatform layer={layer} />
+
+              {/* Flow connector (not after last layer) */}
+              {i < LAYERS.length - 1 && (
+                <>
+                  <div className="hidden md:block">
+                    <FlowConnector delay={layer.delay} />
+                  </div>
+                  <div className="md:hidden">
+                    <MobileFlowBar />
+                  </div>
+                </>
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </>
+  );
+}