vibecarbon 0.1.0

package/carbon/src/client/components/ArchitectureSection.tsx

@@ -0,0 +1,46 @@
+import { motion } from 'framer-motion';
+import { Cpu } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import vibecarbonIcon from '../assets/vibecarbon-icon.svg';
+import { ArchitectureDiagram } from './architecture/ArchitectureDiagram';
+import { Badge } from './ui/badge';
+
+export function ArchitectureSection() {
+  const { t } = useTranslation();
+  return (
+    <section id="architecture" className="relative py-24 md:py-36">
+      <div className="mx-auto max-w-7xl px-6">
+        {/* Section Header */}
+        <div className="mx-auto mb-10 max-w-2xl text-center">
+          <motion.div
+            className="flex justify-center mb-6"
+            animate={{ y: [0, -6, 0] }}
+            transition={{ duration: 3, repeat: Infinity, ease: 'easeInOut' }}
+          >
+            <img
+              src={vibecarbonIcon}
+              alt=""
+              width={56}
+              height={56}
+              className="drop-shadow-[0_0_12px_oklch(0.82_0.14_192/0.6)]"
+            />
+          </motion.div>
+          <Badge
+            variant="outline"
+            className="mb-4 border-primary/30 text-primary text-sm px-4 py-1.5"
+          >
+            <Cpu className="size-4" data-icon="inline-start" />
+            {t('landing.architecture.badge')}
+          </Badge>
+          <h2 className="mb-4 text-3xl font-black tracking-tight md:text-4xl">
+            {t('landing.architecture.headline')}
+          </h2>
+          <p className="text-lg text-muted-foreground">{t('landing.architecture.subheading')}</p>
+        </div>
+
+        {/* Architecture Diagram */}
+        <ArchitectureDiagram />
+      </div>
+    </section>
+  );
+}

package/carbon/src/client/components/CTAFooter.tsx

@@ -0,0 +1,59 @@
+import { motion, useScroll, useTransform } from 'framer-motion';
+import { type ReactNode, useRef } from 'react';
+import { useReducedMotion } from '@/hooks/useReducedMotion';
+import { Wordmark } from './Logo';
+
+interface CTAFooterProps {
+  /** Gradient + glow classes for the footer background */
+  gradient?: string;
+  /** CTA content rendered above the footer links */
+  children: ReactNode;
+  /** Footer link elements */
+  footerLinks: ReactNode;
+  /** Optional floating decorative elements rendered above children */
+  floatingElements?: ReactNode;
+}
+
+export function CTAFooter({
+  gradient = 'bg-gradient-to-br from-primary via-primary/80 to-primary/60',
+  children,
+  footerLinks,
+  floatingElements,
+}: CTAFooterProps) {
+  const ref = useRef<HTMLElement>(null);
+  const prefersReducedMotion = useReducedMotion();
+  const { scrollYProgress } = useScroll({
+    target: ref,
+    offset: ['start end', 'end end'],
+  });
+
+  const opacity = useTransform(scrollYProgress, [0, 1], [0, 1]);
+  const y = useTransform(scrollYProgress, [0, 1], [60, 0]);
+
+  return (
+    <footer ref={ref} className="relative bg-[oklch(0.17_0.03_260/0.85)] dark:bg-transparent">
+      {/* Gradient fade — transparent at top, full color at bottom. Glow orbs live inside so they fade with it. */}
+      <motion.div
+        style={{ opacity, y: prefersReducedMotion ? 0 : y }}
+        className={`absolute inset-0 overflow-hidden ${gradient} [mask-image:linear-gradient(to_bottom,transparent,black_40%)]`}
+      >
+        <div className="pointer-events-none absolute top-0 right-0 h-96 w-96 rounded-full bg-white/10 blur-3xl" />
+        <div className="pointer-events-none absolute bottom-0 left-0 h-72 w-72 rounded-full bg-white/10 blur-3xl" />
+      </motion.div>
+
+      {/* CTA */}
+      <div className="relative mx-auto max-w-2xl px-6 pt-20 pb-16 text-center md:pt-28 md:pb-20">
+        {floatingElements && (
+          <div className="relative h-40 mb-2 pointer-events-none">{floatingElements}</div>
+        )}
+        {children}
+      </div>
+
+      {/* Footer */}
+      <div className="relative mx-auto flex max-w-7xl flex-col items-center justify-between gap-4 px-6 py-8 sm:flex-row">
+        <Wordmark size="sm" className="text-white" />
+        {footerLinks}
+      </div>
+    </footer>
+  );
+}

package/carbon/src/client/components/ComparisonSection.tsx

@@ -0,0 +1,132 @@
+import { motion } from 'framer-motion';
+import { Database, Eye, Globe, HardDrive, type LucideIcon, Server, Shield } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import vibecarbonIcon from '../assets/vibecarbon-icon.svg';
+import { GlowTracker } from './effects/GlowTracker';
+
+export function ComparisonSection() {
+  const { t } = useTranslation();
+
+  const comparisons: { risk: string; protection: string; how: string; icon: LucideIcon }[] = [
+    {
+      risk: t('landing.comparison.hacked.risk'),
+      protection: t('landing.comparison.hacked.protection'),
+      how: t('landing.comparison.hacked.how'),
+      icon: Shield,
+    },
+    {
+      risk: t('landing.comparison.exposed.risk'),
+      protection: t('landing.comparison.exposed.protection'),
+      how: t('landing.comparison.exposed.how'),
+      icon: Database,
+    },
+    {
+      risk: t('landing.comparison.traffic.risk'),
+      protection: t('landing.comparison.traffic.protection'),
+      how: t('landing.comparison.traffic.how'),
+      icon: Server,
+    },
+    {
+      risk: t('landing.comparison.redundancy.risk'),
+      protection: t('landing.comparison.redundancy.protection'),
+      how: t('landing.comparison.redundancy.how'),
+      icon: Globe,
+    },
+    {
+      risk: t('landing.comparison.visibility.risk'),
+      protection: t('landing.comparison.visibility.protection'),
+      how: t('landing.comparison.visibility.how'),
+      icon: Eye,
+    },
+    {
+      risk: t('landing.comparison.dataLoss.risk'),
+      protection: t('landing.comparison.dataLoss.protection'),
+      how: t('landing.comparison.dataLoss.how'),
+      icon: HardDrive,
+    },
+  ];
+
+  return (
+    <section className="relative py-24 md:py-36 overflow-hidden">
+      <div className="mx-auto max-w-5xl px-6">
+        {/* Header */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true, margin: '-100px' }}
+          transition={{ duration: 0.5 }}
+          className="text-center mb-10"
+        >
+          <motion.div
+            className="flex justify-center mb-6"
+            animate={{ y: [0, -6, 0] }}
+            transition={{ duration: 3, repeat: Infinity, ease: 'easeInOut' }}
+          >
+            <img
+              src={vibecarbonIcon}
+              alt=""
+              width={56}
+              height={56}
+              className="drop-shadow-[0_0_12px_oklch(0.82_0.14_192/0.6)]"
+            />
+          </motion.div>
+          <h2 className="text-3xl md:text-5xl font-black tracking-tight mb-4">
+            {t('landing.comparison.headline')}{' '}
+            <span className="bg-gradient-to-r from-secondary-accent to-fuchsia-400 bg-clip-text text-transparent">
+              {t('landing.comparison.headlineHighlight')}
+            </span>
+          </h2>
+          <p className="text-lg text-muted-foreground max-w-xl mx-auto">
+            {t('landing.comparison.subheading')}
+          </p>
+        </motion.div>
+
+        {/* Card grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {comparisons.map((item, index) => {
+            const Icon = item.icon;
+            return (
+              <motion.div
+                key={item.risk}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true, margin: '-50px' }}
+                transition={{ duration: 0.4, delay: index * 0.08 }}
+              >
+                <div className="group relative overflow-hidden rounded-2xl border border-border/60 bg-muted/40 dark:border-white/[0.06] dark:bg-white/[0.02] p-6 hover:border-primary/20 transition-all duration-500 h-full">
+                  <GlowTracker />
+                  <div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-primary/30 to-transparent z-10" />
+                  <div
+                    className="absolute inset-0 z-0 pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity duration-500"
+                    style={{
+                      background:
+                        'radial-gradient(400px circle at 50% 50%, oklch(0.65 0.26 350 / 0.08), transparent 90%)',
+                    }}
+                  />
+
+                  <div className="relative z-10">
+                    {/* Icon */}
+                    <div className="flex items-center justify-center w-10 h-10 rounded-xl bg-gradient-to-br from-primary/15 to-secondary-accent/5 group-hover:from-primary/25 group-hover:to-secondary-accent/15 transition-all duration-300 mb-4">
+                      <Icon className="size-5 text-primary" />
+                    </div>
+
+                    {/* Struck-through risk */}
+                    <p className="text-xs text-muted-foreground/50 line-through decoration-muted-foreground/30 mb-1.5">
+                      {item.risk}
+                    </p>
+
+                    {/* Solution */}
+                    <h3 className="text-base font-semibold text-foreground mb-1">
+                      {item.protection}
+                    </h3>
+                    <p className="text-sm text-muted-foreground leading-relaxed">{item.how}</p>
+                  </div>
+                </div>
+              </motion.div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}

package/carbon/src/client/components/ContentPanel.tsx

@@ -0,0 +1,66 @@
+import { cn } from '@/lib/utils';
+
+/**
+ * Layout variants for common page types:
+ * - `narrow`: Settings, forms, profile pages (max-w-2xl)
+ * - `default`: General content, lists (max-w-4xl)
+ * - `wide`: Dashboards, multi-column layouts (max-w-6xl)
+ * - `full`: Data tables that need horizontal space (max-w-full)
+ */
+type LayoutVariant = 'narrow' | 'default' | 'wide' | 'full';
+
+type MaxWidth = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | 'full';
+
+interface ContentPanelProps {
+  children: React.ReactNode;
+  className?: string;
+  /**
+   * Semantic layout variant. Use this for standard layouts:
+   * - `narrow`: Settings, forms, profile pages
+   * - `default`: General content, lists
+   * - `wide`: Dashboards, multi-column layouts
+   * - `full`: Data tables that need horizontal space
+   */
+  variant?: LayoutVariant;
+  /**
+   * Custom max-width override. Only use when variant doesn't fit your needs.
+   * Prefer using `variant` for consistency across the app.
+   */
+  maxWidth?: MaxWidth;
+}
+
+const variantToWidth: Record<LayoutVariant, MaxWidth> = {
+  narrow: '2xl',
+  default: '4xl',
+  wide: '6xl',
+  full: 'full',
+};
+
+const maxWidthClasses: Record<MaxWidth, string> = {
+  sm: 'max-w-sm',
+  md: 'max-w-md',
+  lg: 'max-w-lg',
+  xl: 'max-w-xl',
+  '2xl': 'max-w-2xl',
+  '3xl': 'max-w-3xl',
+  '4xl': 'max-w-4xl',
+  '5xl': 'max-w-5xl',
+  '6xl': 'max-w-6xl',
+  full: 'max-w-full',
+};
+
+export function ContentPanel({
+  children,
+  className,
+  variant = 'default',
+  maxWidth,
+}: ContentPanelProps) {
+  // maxWidth takes precedence over variant for backwards compatibility
+  const resolvedWidth = maxWidth ?? variantToWidth[variant];
+
+  return (
+    <div className="flex-1 pl-1 pr-6 py-6">
+      <div className={cn(maxWidthClasses[resolvedWidth], 'space-y-6', className)}>{children}</div>
+    </div>
+  );
+}

package/carbon/src/client/components/ContentSkeleton.tsx

@@ -0,0 +1,21 @@
+import { Skeleton } from '@/components/ui/skeleton';
+
+export function ContentSkeleton() {
+  return (
+    <>
+      <header className="flex h-10 items-center px-6 mt-6">
+        <Skeleton className="h-5 w-40 rounded-md" />
+      </header>
+      <div className="flex-1 p-6">
+        <div className="max-w-4xl space-y-6">
+          <Skeleton className="h-32 w-full rounded-xl" />
+          <div className="grid grid-cols-2 gap-4">
+            <Skeleton className="h-24 rounded-xl" />
+            <Skeleton className="h-24 rounded-xl" />
+          </div>
+          <Skeleton className="h-48 w-full rounded-xl" />
+        </div>
+      </div>
+    </>
+  );
+}

package/carbon/src/client/components/ErrorBoundary.tsx

@@ -0,0 +1,46 @@
+import { Component, type ErrorInfo, type ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(): State {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error('ErrorBoundary caught an error:', error, info);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="flex min-h-screen flex-col items-center justify-center bg-background px-4 text-center">
+          <h1 className="text-2xl font-bold text-foreground">Something went wrong</h1>
+          <p className="mt-2 text-muted-foreground">
+            An unexpected error occurred. Please try reloading the page.
+          </p>
+          <button
+            type="button"
+            onClick={() => window.location.reload()}
+            className="mt-6 rounded-lg bg-primary px-6 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 transition-colors"
+          >
+            Reload Page
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/carbon/src/client/components/FAQSection.tsx

@@ -0,0 +1,76 @@
+import { motion } from 'framer-motion';
+import { useTranslation } from 'react-i18next';
+
+import vibecarbonIcon from '../assets/vibecarbon-icon.svg';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './ui/accordion';
+
+export function FAQSection() {
+  const { t } = useTranslation();
+
+  const faqs = [
+    { question: t('landing.faq.q1.question'), answer: t('landing.faq.q1.answer') },
+    { question: t('landing.faq.q2.question'), answer: t('landing.faq.q2.answer') },
+    { question: t('landing.faq.q3.question'), answer: t('landing.faq.q3.answer') },
+    { question: t('landing.faq.q4.question'), answer: t('landing.faq.q4.answer') },
+    { question: t('landing.faq.q5.question'), answer: t('landing.faq.q5.answer') },
+    { question: t('landing.faq.q6.question'), answer: t('landing.faq.q6.answer') },
+    { question: t('landing.faq.q7.question'), answer: t('landing.faq.q7.answer') },
+    { question: t('landing.faq.q8.question'), answer: t('landing.faq.q8.answer') },
+    { question: t('landing.faq.q9.question'), answer: t('landing.faq.q9.answer') },
+  ];
+
+  return (
+    <section className="relative py-24 md:py-36">
+      <div className="mx-auto max-w-3xl px-6">
+        <div className="mb-8 text-center">
+          <motion.div
+            className="flex justify-center mb-6"
+            animate={{ y: [0, -6, 0] }}
+            transition={{ duration: 3, repeat: Infinity, ease: 'easeInOut' }}
+          >
+            <img
+              src={vibecarbonIcon}
+              alt=""
+              width={56}
+              height={56}
+              className="drop-shadow-[0_0_12px_oklch(0.82_0.14_192/0.6)]"
+            />
+          </motion.div>
+
+          <motion.h2
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5 }}
+            className="text-3xl md:text-4xl font-black tracking-tight mb-4"
+          >
+            {t('landing.faq.headline')}
+          </motion.h2>
+          <p className="text-lg text-muted-foreground">{t('landing.faq.subheading')}</p>
+        </div>
+
+        <Accordion className="border-none rounded-none bg-transparent">
+          {faqs.map((faq, index) => (
+            <motion.div
+              key={faq.question}
+              initial={{ opacity: 0, y: 16 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.4, delay: index * 0.08 }}
+            >
+              <AccordionItem
+                value={faq.question}
+                className="border border-white/8 dark:border-white/8 bg-white/[0.02] dark:bg-white/[0.02] rounded-xl mb-3 overflow-hidden backdrop-blur-sm"
+              >
+                <AccordionTrigger>{faq.question}</AccordionTrigger>
+                <AccordionContent>
+                  <p className="text-muted-foreground">{faq.answer}</p>
+                </AccordionContent>
+              </AccordionItem>
+            </motion.div>
+          ))}
+        </Accordion>
+      </div>
+    </section>
+  );
+}

package/carbon/src/client/components/FileUpload.tsx

@@ -0,0 +1,210 @@
+import { Loader2, Upload, X } from 'lucide-react';
+import { useCallback, useRef, useState } from 'react';
+import { supabase } from '@/lib/supabase';
+import { cn } from '@/lib/utils';
+import { Button } from './ui/button';
+
+interface FileUploadProps {
+  bucket: string;
+  path: string;
+  accept?: string;
+  maxSize?: number;
+  onUpload: (url: string) => void;
+  onError?: (error: string) => void;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+/**
+ * Drag-and-drop file upload component using Supabase Storage.
+ *
+ * Usage:
+ *   <FileUpload
+ *     bucket="avatars"
+ *     path={`${userId}/avatar`}
+ *     accept="image/*"
+ *     maxSize={2 * 1024 * 1024}
+ *     onUpload={(url) => setAvatarUrl(url)}
+ *   />
+ */
+export function FileUpload({
+  bucket,
+  path,
+  accept,
+  maxSize = 10 * 1024 * 1024,
+  onUpload,
+  onError,
+  className,
+  children,
+}: FileUploadProps) {
+  const [uploading, setUploading] = useState(false);
+  const [dragOver, setDragOver] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const upload = useCallback(
+    async (file: File) => {
+      if (file.size > maxSize) {
+        onError?.(`File too large. Max size: ${Math.round(maxSize / 1024 / 1024)}MB`);
+        return;
+      }
+
+      setUploading(true);
+      try {
+        const ext = file.name.split('.').pop();
+        const filePath = ext ? `${path}.${ext}` : path;
+
+        const { error } = await supabase.storage.from(bucket).upload(filePath, file, {
+          upsert: true,
+        });
+
+        if (error) throw error;
+
+        const {
+          data: { publicUrl },
+        } = supabase.storage.from(bucket).getPublicUrl(filePath);
+
+        onUpload(publicUrl);
+      } catch (err) {
+        onError?.(err instanceof Error ? err.message : 'Upload failed');
+      } finally {
+        setUploading(false);
+      }
+    },
+    [bucket, path, maxSize, onUpload, onError]
+  );
+
+  function handleDrop(e: React.DragEvent) {
+    e.preventDefault();
+    setDragOver(false);
+    const file = e.dataTransfer.files[0];
+    if (file) upload(file);
+  }
+
+  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    if (file) upload(file);
+    // Reset input so same file can be re-selected
+    e.target.value = '';
+  }
+
+  if (children) {
+    return (
+      <>
+        <input
+          ref={inputRef}
+          type="file"
+          accept={accept}
+          onChange={handleChange}
+          className="hidden"
+        />
+        <button type="button" onClick={() => inputRef.current?.click()} className="cursor-pointer">
+          {children}
+        </button>
+      </>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onDragOver={(e) => {
+        e.preventDefault();
+        setDragOver(true);
+      }}
+      onDragLeave={() => setDragOver(false)}
+      onDrop={handleDrop}
+      onClick={() => inputRef.current?.click()}
+      className={cn(
+        'flex w-full cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed p-6 transition-colors',
+        dragOver ? 'border-primary bg-primary/5' : 'border-border hover:border-primary/50',
+        className
+      )}
+    >
+      <input
+        ref={inputRef}
+        type="file"
+        accept={accept}
+        onChange={handleChange}
+        className="hidden"
+      />
+      {uploading ? (
+        <Loader2 className="size-8 animate-spin text-muted-foreground" />
+      ) : (
+        <>
+          <Upload className="mb-2 size-8 text-muted-foreground" />
+          <p className="text-sm text-muted-foreground">
+            Drag & drop or <span className="text-primary underline">browse</span>
+          </p>
+          <p className="mt-1 text-xs text-muted-foreground">
+            Max {Math.round(maxSize / 1024 / 1024)}MB
+          </p>
+        </>
+      )}
+    </button>
+  );
+}
+
+/**
+ * Avatar upload component with preview.
+ */
+export function AvatarUpload({
+  userId,
+  currentUrl,
+  onUpload,
+  size = 'lg',
+}: {
+  userId: string;
+  currentUrl?: string | null;
+  onUpload: (url: string) => void;
+  size?: 'sm' | 'lg';
+}) {
+  const [url, setUrl] = useState(currentUrl || '');
+  const [error, setError] = useState('');
+
+  function handleUpload(newUrl: string) {
+    setUrl(newUrl);
+    setError('');
+    onUpload(newUrl);
+  }
+
+  const sizeClass = size === 'sm' ? 'size-16' : 'size-20';
+
+  return (
+    <div className="flex items-center gap-4">
+      <div
+        className={cn(
+          'relative overflow-hidden rounded-full bg-muted flex items-center justify-center',
+          sizeClass
+        )}
+      >
+        {url ? (
+          <img src={url} alt="Avatar" className="size-full object-cover" />
+        ) : (
+          <span className="text-2xl text-muted-foreground">?</span>
+        )}
+      </div>
+      <div className="space-y-1">
+        <FileUpload
+          bucket="avatars"
+          path={`${userId}/avatar`}
+          accept="image/jpeg,image/png,image/gif,image/webp"
+          maxSize={2 * 1024 * 1024}
+          onUpload={handleUpload}
+          onError={setError}
+        >
+          <Button type="button" variant="outline" size="sm">
+            Change avatar
+          </Button>
+        </FileUpload>
+        {error ? (
+          <p className="flex items-center gap-1 text-xs text-destructive">
+            <X className="size-3" />
+            {error}
+          </p>
+        ) : (
+          <p className="text-xs text-muted-foreground">JPG, PNG or GIF. Max 2MB.</p>
+        )}
+      </div>
+    </div>
+  );
+}

package/carbon/src/client/components/HeaderActions.tsx

@@ -0,0 +1,17 @@
+// import { Bell } from 'lucide-react';
+// import { Button } from './ui/button';
+
+export function HeaderActions() {
+  // Notifications hidden for now - uncomment when ready to use
+  return null;
+  // return (
+  //   <div className="flex items-center gap-1">
+  //     {/* Notifications */}
+  //     <Button variant="ghost" size="icon" className="relative">
+  //       <Bell className="size-5" />
+  //       <span className="absolute top-1.5 right-1.5 size-2 rounded-full bg-destructive" />
+  //       <span className="sr-only">Notifications</span>
+  //     </Button>
+  //   </div>
+  // );
+}