Changes

Co-authored-by: domfelipe <53182096+domfelipe@users.noreply.github.com>

public/favicon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
+  <rect width="64" height="64" rx="14" fill="#FFFFFF"/>
+  <text x="32" y="46" font-family="Inter, system-ui, sans-serif" font-size="44" font-weight="800"
+        text-anchor="middle" fill="#6366F1" letter-spacing="-2">M<tspan fill="#F59E0B">.</tspan></text>
+</svg>

public/og.svg

@@ -0,0 +1,20 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630">
+  <defs>
+    <radialGradient id="bg" cx="50%" cy="50%" r="75%">
+      <stop offset="0%" stop-color="#6366F1" />
+      <stop offset="100%" stop-color="#0F172A" />
+    </radialGradient>
+  </defs>
+  <rect width="1200" height="630" fill="url(#bg)" />
+  <g font-family="Inter, system-ui, sans-serif" text-anchor="middle">
+    <text x="600" y="320" font-size="120" font-weight="800" fill="#FFFFFF" letter-spacing="-4">
+      Mika<tspan fill="#F59E0B">.</tspan>
+    </text>
+    <text x="600" y="400" font-size="36" font-weight="500" fill="#F1F5F9">
+      Seu assistente de IA no Telegram
+    </text>
+    <text x="600" y="570" font-size="24" font-weight="400" fill="#94A3B8">
+      mika.domco.ai
+    </text>
+  </g>
+</svg>

src/components/mika/Logo.tsx

@@ -0,0 +1,19 @@
+import { Link } from "@tanstack/react-router";
+import { cn } from "@/lib/utils";
+
+export function Logo({ className, size = "md" }: { className?: string; size?: "sm" | "md" | "lg" }) {
+  const sizes = {
+    sm: "text-xl",
+    md: "text-2xl",
+    lg: "text-3xl",
+  };
+  return (
+    <Link
+      to="/"
+      aria-label="Mika — página inicial"
+      className={cn("font-bold tracking-tight text-foreground", sizes[size], className)}
+    >
+      Mika<span className="text-accent">.</span>
+    </Link>
+  );
+}

src/components/mika/ThemeToggle.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { Moon, Sun } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useTheme } from "@/components/theme-provider";
+
+export function ThemeToggle() {
+  const { theme, toggleTheme } = useTheme();
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      aria-label={theme === "dark" ? "Mudar para tema claro" : "Mudar para tema escuro"}
+      onClick={toggleTheme}
+      className="rounded-lg"
+    >
+      <Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+    </Button>
+  );
+}

src/components/theme-provider.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
+
+type Theme = "light" | "dark";
+type ThemeContextValue = {
+  theme: Theme;
+  setTheme: (t: Theme) => void;
+  toggleTheme: () => void;
+};
+
+const ThemeContext = createContext<ThemeContextValue | null>(null);
+const STORAGE_KEY = "mika-theme";
+
+function applyTheme(theme: Theme) {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  if (theme === "dark") root.classList.add("dark");
+  else root.classList.remove("dark");
+  root.style.colorScheme = theme;
+}
+
+function getInitialTheme(): Theme {
+  if (typeof window === "undefined") return "light";
+  try {
+    const stored = window.localStorage.getItem(STORAGE_KEY);
+    if (stored === "light" || stored === "dark") return stored;
+  } catch {}
+  if (window.matchMedia?.("(prefers-color-scheme: dark)").matches) return "dark";
+  return "light";
+}
+
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  const [theme, setThemeState] = useState<Theme>("light");
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    const t = getInitialTheme();
+    setThemeState(t);
+    applyTheme(t);
+    setMounted(true);
+  }, []);
+
+  const setTheme = (t: Theme) => {
+    setThemeState(t);
+    applyTheme(t);
+    try {
+      window.localStorage.setItem(STORAGE_KEY, t);
+    } catch {}
+  };
+
+  const toggleTheme = () => setTheme(theme === "dark" ? "light" : "dark");
+
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme, toggleTheme }}>
+      <div style={{ visibility: mounted ? "visible" : "visible" }}>{children}</div>
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) throw new Error("useTheme deve ser usado dentro de ThemeProvider");
+  return ctx;
+}

src/routeTree.gen.ts

@@ -57,3 +57,12 @@ const rootRouteChildren: RootRouteChildren = {
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
   ._addFileTypes<FileRouteTypes>()
+
+import type { getRouter } from './router.tsx'
+import type { createStart } from '@tanstack/react-start'
+declare module '@tanstack/react-start' {
+  interface Register {
+    ssr: true
+    router: Awaited<ReturnType<typeof getRouter>>
+  }
+}

src/styles.css

@@ -5,47 +5,48 @@
 @custom-variant dark (&:is(.dark *));
 
 /*
- * Design system definition.
+ * Mika Design System
- *
+ * Paleta inspirada em Linear / Supabase / Cal.com.
- * The @theme inline block maps CSS custom properties to Tailwind utility
+ * - Primary: Indigo (#6366F1) — confiança e tecnologia
- * classes (e.g. --color-primary -> bg-primary, text-primary).
+ * - Secondary: Emerald (#10B981) — sucesso/check
- *
+ * - Accent: Amber (#F59E0B) — destaque, ponto final do wordmark
- * The :root and .dark blocks define the actual color values using oklch.
+ * Todas as cores em oklch.
- * All colors MUST use oklch format.
- *
- * To add a new semantic color:
- * 1. Add the variable to :root (light value) and .dark (dark value)
- * 2. Register it in @theme inline as --color-<name>: var(--<name>)
  */
 
 @theme inline {
+  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
   --radius-2xl: calc(var(--radius) + 8px);
   --radius-3xl: calc(var(--radius) + 12px);
-  --radius-4xl: calc(var(--radius) + 16px);
+
   --color-background: var(--background);
   --color-foreground: var(--foreground);
+  --color-surface: var(--surface);
   --color-card: var(--card);
   --color-card-foreground: var(--card-foreground);
   --color-popover: var(--popover);
   --color-popover-foreground: var(--popover-foreground);
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
+  --color-primary-dark: var(--primary-dark);
+  --color-primary-light: var(--primary-light);
   --color-secondary: var(--secondary);
   --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
   --color-accent: var(--accent);
   --color-accent-foreground: var(--accent-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
   --color-destructive: var(--destructive);
   --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
-  --color-ring-offset-background: var(--background);
   --color-chart-1: var(--chart-1);
   --color-chart-2: var(--chart-2);
   --color-chart-3: var(--chart-3);
@@ -63,73 +64,115 @@
 
 :root {
   --radius: 0.625rem;
-  --background: oklch(1 0 0);
+
-  --foreground: oklch(0.129 0.042 264.695);
+  /* Mika light tokens */
+  --background: oklch(0.985 0 0);          /* #FAFAFA */
+  --foreground: oklch(0.18 0.04 265);      /* #0F172A */
+  --surface: oklch(1 0 0);                 /* #FFFFFF */
+
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0.129 0.042 264.695);
+  --card-foreground: oklch(0.18 0.04 265);
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.129 0.042 264.695);
+  --popover-foreground: oklch(0.18 0.04 265);
-  --primary: oklch(0.208 0.042 265.755);
+
-  --primary-foreground: oklch(0.984 0.003 247.858);
+  --primary: oklch(0.62 0.19 277);         /* #6366F1 indigo-500 */
-  --secondary: oklch(0.968 0.007 247.896);
+  --primary-foreground: oklch(0.99 0 0);
-  --secondary-foreground: oklch(0.208 0.042 265.755);
+  --primary-dark: oklch(0.55 0.21 277);    /* #4F46E5 indigo-600 */
-  --muted: oklch(0.968 0.007 247.896);
+  --primary-light: oklch(0.74 0.13 277);   /* #818CF8 indigo-400 */
-  --muted-foreground: oklch(0.554 0.046 257.417);
+
-  --accent: oklch(0.968 0.007 247.896);
+  --secondary: oklch(0.72 0.17 162);       /* #10B981 emerald-500 */
-  --accent-foreground: oklch(0.208 0.042 265.755);
+  --secondary-foreground: oklch(0.99 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
+
-  --destructive-foreground: oklch(0.984 0.003 247.858);
+  --accent: oklch(0.78 0.16 75);           /* #F59E0B amber-500 */
-  --border: oklch(0.929 0.013 255.508);
+  --accent-foreground: oklch(0.18 0.04 265);
-  --input: oklch(0.929 0.013 255.508);
+
-  --ring: oklch(0.704 0.04 256.788);
+  --muted: oklch(0.96 0.005 256);
-  --chart-1: oklch(0.646 0.222 41.116);
+  --muted-foreground: oklch(0.55 0.03 256);/* #64748B */
-  --chart-2: oklch(0.6 0.118 184.704);
+
-  --chart-3: oklch(0.398 0.07 227.392);
+  --destructive: oklch(0.63 0.23 25);      /* #EF4444 */
-  --chart-4: oklch(0.828 0.189 84.429);
+  --destructive-foreground: oklch(0.99 0 0);
-  --chart-5: oklch(0.769 0.188 70.08);
+  --success: oklch(0.72 0.17 162);
-  --sidebar: oklch(0.984 0.003 247.858);
+  --warning: oklch(0.78 0.16 75);
-  --sidebar-foreground: oklch(0.129 0.042 264.695);
+
-  --sidebar-primary: oklch(0.208 0.042 265.755);
+  --border: oklch(0.92 0.01 256);          /* #E2E8F0 */
-  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+  --input: oklch(0.92 0.01 256);
-  --sidebar-accent: oklch(0.968 0.007 247.896);
+  --ring: oklch(0.62 0.19 277);
-  --sidebar-accent-foreground: oklch(0.208 0.042 265.755);
+
-  --sidebar-border: oklch(0.929 0.013 255.508);
+  --chart-1: oklch(0.62 0.19 277);
-  --sidebar-ring: oklch(0.704 0.04 256.788);
+  --chart-2: oklch(0.72 0.17 162);
+  --chart-3: oklch(0.78 0.16 75);
+  --chart-4: oklch(0.55 0.21 277);
+  --chart-5: oklch(0.74 0.13 277);
+
+  --sidebar: oklch(1 0 0);
+  --sidebar-foreground: oklch(0.18 0.04 265);
+  --sidebar-primary: oklch(0.62 0.19 277);
+  --sidebar-primary-foreground: oklch(0.99 0 0);
+  --sidebar-accent: oklch(0.96 0.005 256);
+  --sidebar-accent-foreground: oklch(0.18 0.04 265);
+  --sidebar-border: oklch(0.92 0.01 256);
+  --sidebar-ring: oklch(0.62 0.19 277);
+
+  /* Gradientes & sombras Mika */
+  --gradient-hero: radial-gradient(circle at 30% 20%, oklch(0.62 0.19 277 / 0.18), transparent 60%),
+                   radial-gradient(circle at 80% 80%, oklch(0.72 0.17 162 / 0.12), transparent 55%);
+  --gradient-primary: linear-gradient(135deg, oklch(0.62 0.19 277), oklch(0.55 0.21 277));
+  --shadow-soft: 0 1px 2px oklch(0.18 0.04 265 / 0.04), 0 4px 12px oklch(0.18 0.04 265 / 0.06);
+  --shadow-glow: 0 10px 40px -10px oklch(0.62 0.19 277 / 0.45);
 }
 
 .dark {
-  --background: oklch(0.129 0.042 264.695);
+  --background: oklch(0.18 0.04 265);      /* #0F172A */
-  --foreground: oklch(0.984 0.003 247.858);
+  --foreground: oklch(0.96 0.01 247);      /* #F1F5F9 */
-  --card: oklch(0.208 0.042 265.755);
+  --surface: oklch(0.25 0.04 260);         /* #1E293B */
-  --card-foreground: oklch(0.984 0.003 247.858);
+
-  --popover: oklch(0.208 0.042 265.755);
+  --card: oklch(0.25 0.04 260);
-  --popover-foreground: oklch(0.984 0.003 247.858);
+  --card-foreground: oklch(0.96 0.01 247);
-  --primary: oklch(0.929 0.013 255.508);
+  --popover: oklch(0.25 0.04 260);
-  --primary-foreground: oklch(0.208 0.042 265.755);
+  --popover-foreground: oklch(0.96 0.01 247);
-  --secondary: oklch(0.279 0.041 260.031);
+
-  --secondary-foreground: oklch(0.984 0.003 247.858);
+  --primary: oklch(0.62 0.19 277);
-  --muted: oklch(0.279 0.041 260.031);
+  --primary-foreground: oklch(0.99 0 0);
-  --muted-foreground: oklch(0.704 0.04 256.788);
+  --primary-dark: oklch(0.55 0.21 277);
-  --accent: oklch(0.279 0.041 260.031);
+  --primary-light: oklch(0.74 0.13 277);
-  --accent-foreground: oklch(0.984 0.003 247.858);
+
-  --destructive: oklch(0.704 0.191 22.216);
+  --secondary: oklch(0.72 0.17 162);
-  --destructive-foreground: oklch(0.984 0.003 247.858);
+  --secondary-foreground: oklch(0.99 0 0);
-  --border: oklch(1 0 0 / 10%);
+
-  --input: oklch(1 0 0 / 15%);
+  --accent: oklch(0.78 0.16 75);
-  --ring: oklch(0.551 0.027 264.364);
+  --accent-foreground: oklch(0.18 0.04 265);
-  --chart-1: oklch(0.488 0.243 264.376);
+
-  --chart-2: oklch(0.696 0.17 162.48);
+  --muted: oklch(0.28 0.04 260);
-  --chart-3: oklch(0.769 0.188 70.08);
+  --muted-foreground: oklch(0.65 0.03 256);
-  --chart-4: oklch(0.627 0.265 303.9);
+
-  --chart-5: oklch(0.645 0.246 16.439);
+  --destructive: oklch(0.63 0.23 25);
-  --sidebar: oklch(0.208 0.042 265.755);
+  --destructive-foreground: oklch(0.99 0 0);
-  --sidebar-foreground: oklch(0.984 0.003 247.858);
+  --success: oklch(0.72 0.17 162);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --warning: oklch(0.78 0.16 75);
-  --sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+
-  --sidebar-accent: oklch(0.279 0.041 260.031);
+  --border: oklch(0.32 0.03 256);          /* #334155 */
-  --sidebar-accent-foreground: oklch(0.984 0.003 247.858);
+  --input: oklch(0.32 0.03 256);
-  --sidebar-border: oklch(1 0 0 / 10%);
+  --ring: oklch(0.74 0.13 277);
-  --sidebar-ring: oklch(0.551 0.027 264.364);
+
+  --chart-1: oklch(0.74 0.13 277);
+  --chart-2: oklch(0.72 0.17 162);
+  --chart-3: oklch(0.78 0.16 75);
+  --chart-4: oklch(0.55 0.21 277);
+  --chart-5: oklch(0.62 0.19 277);
+
+  --sidebar: oklch(0.22 0.04 262);
+  --sidebar-foreground: oklch(0.96 0.01 247);
+  --sidebar-primary: oklch(0.74 0.13 277);
+  --sidebar-primary-foreground: oklch(0.99 0 0);
+  --sidebar-accent: oklch(0.28 0.04 260);
+  --sidebar-accent-foreground: oklch(0.96 0.01 247);
+  --sidebar-border: oklch(0.32 0.03 256);
+  --sidebar-ring: oklch(0.74 0.13 277);
+
+  --gradient-hero: radial-gradient(circle at 30% 20%, oklch(0.62 0.19 277 / 0.25), transparent 60%),
+                   radial-gradient(circle at 80% 80%, oklch(0.72 0.17 162 / 0.18), transparent 55%);
+  --shadow-soft: 0 1px 2px oklch(0 0 0 / 0.3), 0 8px 24px oklch(0 0 0 / 0.35);
+  --shadow-glow: 0 10px 40px -10px oklch(0.62 0.19 277 / 0.55);
 }
 
 @layer base {
@@ -137,8 +180,38 @@
     border-color: var(--color-border);
   }
 
+  html {
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+
   body {
     background-color: var(--color-background);
     color: var(--color-foreground);
+    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+  }
+
+  ::selection {
+    background-color: oklch(0.62 0.19 277 / 0.25);
+    color: var(--color-foreground);
+  }
+}
+
+@layer utilities {
+  .bg-gradient-hero {
+    background-image: var(--gradient-hero);
+  }
+  .bg-gradient-primary {
+    background-image: var(--gradient-primary);
+  }
+  .shadow-soft {
+    box-shadow: var(--shadow-soft);
+  }
+  .shadow-glow {
+    box-shadow: var(--shadow-glow);
+  }
+  .text-balance {
+    text-wrap: balance;
   }
 }