feat: initial commit

2026-03-22 09:18:07 -03:00
parent f2e4706b4a
commit af0910f428
22 changed files with 10339 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -0,0 +1,5 @@
+<!-- BEGIN:nextjs-agent-rules -->
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
+<!-- END:nextjs-agent-rules -->
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -0,0 +1,23 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Status
+
+This is a new project in its initial state. The repository has been initialized with:
+- `main` branch (production)
+- `develop` branch (development)
+
+No source code, build configuration, or tests exist yet.
+
+## Architecture
+
+Once code is added, document:
+- Tech stack and frameworks
+- High-level component structure
+- Key architectural patterns
+- API design (if applicable)
+
+## Commands
+
+Build, test, and lint commands will be documented here once the project structure is established.
--- a/components.json
+++ b/components.json
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-nova",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;
--- a/mvp_recall.md
+++ b/mvp_recall.md
@@ -0,0 +1,761 @@
+# MVP — Gestor de conocimiento personal práctico
+
+Documento de ejecución pensado para usar directamente con Claude Code.
+
+---
+
+## 1. Objetivo del MVP
+
+Construir una aplicación web local-first para gestión de conocimiento personal enfocada en **captura rápida**, **relación automática** y **recuperación útil**.
+
+No es una app de notas genérica. El MVP debe resolver bien estos casos:
+
+- guardar comandos frecuentes
+- guardar snippets de código
+- registrar decisiones técnicas
+- guardar recetas
+- guardar trámites o procedimientos
+- mantener inventario doméstico simple
+
+La propuesta de valor del MVP es:
+
+1. **Guardar info rápido** con fricción mínima.
+2. **Relacionarla sola** usando metadatos, enlaces sugeridos y contenido similar.
+3. **Devolverla cuando importa** mediante búsqueda potente y vistas útiles.
+
+---
+
+## 2. Principios del producto
+
+### 2.1 Principios funcionales
+
+- Crear una nota debe tomar menos de 10 segundos.
+- La búsqueda debe encontrar contenido por título, texto, tags y tipo.
+- La app debe sugerir relaciones sin exigir organización manual compleja.
+- El sistema debe ser útil desde el día 1 con pocas notas.
+- Debe funcionar bien para conocimiento práctico, no solo escritura larga.
+
+### 2.2 Principios técnicos
+
+- **Local-first**: los datos viven primero en el dispositivo.
+- **Simple de desplegar y mantener**.
+- **Escalable por capas**: empezar pequeño sin bloquear futuras mejoras.
+- **Estructura tipada**: tipos de contenido claros.
+- **Extensible** para futuro tagging semántico, embeddings y sincronización.
+
+---
+
+## 3. Alcance del MVP
+
+### 3.1 Incluye
+
+#### Captura
+- Crear nota rápida desde un input o modal.
+- Campos mínimos:
+  - título
+  - contenido
+  - tipo
+  - tags manuales opcionales
+- Crear desde plantillas simples según tipo.
+
+#### Tipos de nota del MVP
+- `command`
+- `snippet`
+- `decision`
+- `recipe`
+- `procedure`
+- `inventory`
+- `note` (genérico)
+
+#### Organización automática
+- Extracción automática de:
+  - fecha de creación
+  - fecha de actualización
+  - tipo
+  - tags sugeridos por heurística simple
+- Detección de notas relacionadas por:
+  - coincidencia de tags
+  - similitud de título
+  - palabras clave compartidas
+  - mismo tipo
+
+#### Recuperación
+- Búsqueda full-text.
+- Filtros por tipo y tags.
+- Vista de resultados ordenada por relevancia simple.
+- Vista de “relacionadas” dentro de cada nota.
+- Vista de “recientes”.
+
+#### Edición
+- Editar nota existente.
+- Eliminar nota.
+- Marcar favorita.
+- Pin opcional para destacar notas críticas.
+
+#### Persistencia
+- Base local con SQLite.
+- Exportar/importar JSON.
+
+---
+
+### 3.2 No incluye en el MVP
+
+- colaboración multiusuario
+- sincronización en la nube
+- permisos y autenticación compleja
+- edición en tiempo real
+- embeddings/vector DB en producción
+- OCR
+- app móvil nativa
+- plugins
+- automatizaciones complejas
+- parser avanzado de documentos adjuntos
+
+---
+
+## 4. Stack sugerido
+
+## Frontend
+- **Next.js 15** con App Router
+- **TypeScript**
+- **Tailwind CSS**
+- **shadcn/ui** para componentes
+
+## Backend
+- API routes / server actions de Next.js
+- **Prisma** como ORM
+- **SQLite** para MVP
+
+## Búsqueda
+- inicialmente con consultas SQL + normalización simple
+- opcional: SQLite FTS si da tiempo
+
+## Validación
+- **Zod**
+
+## Estado
+- React server components + estado local mínimo
+- si hace falta: Zustand muy limitado
+
+## Testing
+- **Vitest** para lógica
+- **Playwright** para flujo principal si alcanza
+
+## Motivo de esta elección
+
+Este stack permite:
+- iterar rápido
+- mantener una sola codebase
+- ejecutar localmente fácil
+- migrar luego a Postgres sin rehacer todo
+
+---
+
+## 5. Arquitectura funcional
+
+### 5.1 Entidades principales
+
+#### Note
+Campos sugeridos:
+- `id`
+- `title`
+- `content`
+- `type`
+- `createdAt`
+- `updatedAt`
+- `isFavorite`
+- `isPinned`
+
+#### Tag
+- `id`
+- `name`
+
+#### NoteTag
+- `noteId`
+- `tagId`
+
+#### RelatedNote
+- `id`
+- `sourceNoteId`
+- `targetNoteId`
+- `score`
+- `reason`
+
+Opcional en MVP si se prefiere calcular en runtime en vez de persistir.
+
+---
+
+### 5.2 Modelo de datos recomendado
+
+```prisma
+model Note {
+  id         String    @id @default(cuid())
+  title      String
+  content    String
+  type       NoteType  @default(note)
+  isFavorite Boolean   @default(false)
+  isPinned   Boolean   @default(false)
+  createdAt  DateTime  @default(now())
+  updatedAt  DateTime  @updatedAt
+  tags       NoteTag[]
+}
+
+model Tag {
+  id    String    @id @default(cuid())
+  name  String    @unique
+  notes NoteTag[]
+}
+
+model NoteTag {
+  noteId String
+  tagId  String
+  note   Note @relation(fields: [noteId], references: [id], onDelete: Cascade)
+  tag    Tag  @relation(fields: [tagId], references: [id], onDelete: Cascade)
+
+  @@id([noteId, tagId])
+}
+
+enum NoteType {
+  command
+  snippet
+  decision
+  recipe
+  procedure
+  inventory
+  note
+}
+```
+
+---
+
+## 6. UX mínima del MVP
+
+### 6.1 Pantallas
+
+#### Home / Dashboard
+Debe mostrar:
+- barra de búsqueda principal
+- botón “Nueva nota”
+- sección de notas recientes
+- sección de favoritas o pineadas
+- filtros rápidos por tipo
+
+#### Lista de notas
+- búsqueda
+- filtros por tipo
+- filtros por tags
+- cards compactas con:
+  - título
+  - tipo
+  - preview corta
+  - tags
+  - fecha de actualización
+
+#### Detalle de nota
+- título
+- tipo
+- contenido
+- tags
+- acciones: editar, borrar, favorita, pin
+- bloque “Notas relacionadas”
+
+#### Crear/editar nota
+- formulario simple
+- selector de tipo
+- área de contenido grande
+- campo de tags opcional
+- templates por tipo
+
+---
+
+### 6.2 Flujo ideal
+
+1. Usuario abre app.
+2. Escribe una nota nueva en segundos.
+3. La nota se guarda localmente.
+4. El sistema sugiere tags y notas relacionadas.
+5. Días después el usuario la encuentra por búsqueda, filtro o relación.
+
+---
+
+## 7. Lógica de negocio del MVP
+
+### 7.1 Reglas de creación
+
+Al crear una nota:
+- validar que título y contenido no estén vacíos
+- normalizar espacios
+- guardar tipo
+- parsear tags manuales si existen
+- generar tags sugeridos por heurística opcional
+
+### 7.2 Heurísticas de tags sugeridos
+
+Heurística simple inicial:
+- extraer palabras frecuentes relevantes del título
+- detectar bloques de código para sugerir `code`, `bash`, `sql`, etc.
+- detectar patrones:
+  - receta → `cocina`
+  - decisión → `arquitectura`, `backend`, etc. según keywords
+  - inventario → `hogar`
+
+No hace falta IA real en MVP. Debe ser determinístico y simple.
+
+### 7.3 Cálculo de relacionadas
+
+Implementación simple:
+- +3 puntos si comparten tipo
+- +2 por cada tag compartido
+- +1 por palabra relevante compartida en título
+- +1 si una keyword del contenido aparece en ambas
+
+Mostrar top 5 relacionadas con score > umbral.
+
+Se puede calcular:
+- on-demand en el detalle de la nota, o
+- al guardar/editar la nota
+
+Para el MVP, **on-demand** es suficiente.
+
+### 7.4 Búsqueda
+
+Primera versión:
+- buscar en `title`
+- buscar en `content`
+- buscar en nombres de tags
+- permitir filtro por `type`
+
+Orden sugerido:
+1. coincidencia en título
+2. coincidencia en tags
+3. coincidencia en contenido
+4. updatedAt desc
+
+---
+
+## 8. Templates por tipo
+
+### command
+Campos base:
+- título
+- comando
+- explicación
+- contexto de uso
+
+Template de contenido sugerido:
+```md
+## Comando
+
+## Qué hace
+
+## Cuándo usarlo
+
+## Ejemplo
+```
+
+### snippet
+```md
+## Snippet
+
+## Lenguaje
+
+## Qué resuelve
+
+## Notas
+```
+
+### decision
+```md
+## Contexto
+
+## Decisión
+
+## Alternativas consideradas
+
+## Consecuencias
+```
+
+### recipe
+```md
+## Ingredientes
+
+## Pasos
+
+## Tiempo
+
+## Notas
+```
+
+### procedure
+```md
+## Objetivo
+
+## Pasos
+
+## Requisitos
+
+## Problemas comunes
+```
+
+### inventory
+```md
+## Item
+
+## Cantidad
+
+## Ubicación
+
+## Notas
+```
+
+---
+
+## 9. Estructura de carpetas sugerida
+
+```txt
+src/
+  app/
+    page.tsx
+    notes/
+      page.tsx
+      [id]/page.tsx
+    new/page.tsx
+    edit/[id]/page.tsx
+    api/
+      notes/route.ts
+      notes/[id]/route.ts
+      search/route.ts
+  components/
+    note-form.tsx
+    note-card.tsx
+    note-list.tsx
+    search-bar.tsx
+    related-notes.tsx
+    filters.tsx
+    dashboard.tsx
+  lib/
+    prisma.ts
+    db.ts
+    search.ts
+    related.ts
+    tags.ts
+    templates.ts
+    validators.ts
+  types/
+    note.ts
+prisma/
+  schema.prisma
+```
+
+---
+
+## 10. API / acciones mínimas
+
+### CRUD de notas
+- `GET /api/notes`
+- `POST /api/notes`
+- `GET /api/notes/:id`
+- `PUT /api/notes/:id`
+- `DELETE /api/notes/:id`
+
+### búsqueda
+- `GET /api/search?q=...&type=...&tag=...`
+
+### export/import
+- `GET /api/export`
+- `POST /api/import`
+
+---
+
+## 11. Historias de usuario principales
+
+### HU1 — Crear nota rápida
+Como usuario,
+quiero crear una nota en pocos segundos,
+para no perder información útil.
+
+Criterios de aceptación:
+- puedo crear una nota con título, contenido y tipo
+- queda persistida localmente
+- aparece en recientes inmediatamente
+
+### HU2 — Buscar conocimiento guardado
+Como usuario,
+quiero encontrar una nota por texto libre,
+para recuperar información cuando la necesito.
+
+Criterios:
+- la búsqueda encuentra coincidencias en título y contenido
+- puedo filtrar por tipo
+- resultados aparecen rápido
+
+### HU3 — Ver contenido relacionado
+Como usuario,
+quiero que el sistema me muestre notas relacionadas,
+para redescubrir información útil.
+
+Criterios:
+- cada nota muestra hasta 5 relacionadas
+- la relación se basa en reglas simples entendibles
+
+### HU4 — Usar plantillas
+Como usuario,
+quiero crear notas con estructura base según el tipo,
+para capturar mejor cada caso.
+
+Criterios:
+- al elegir un tipo puedo cargar un template sugerido
+- puedo editar el template libremente
+
+### HU5 — Exportar datos
+Como usuario,
+quiero exportar mis datos,
+para no quedar atado a la app.
+
+Criterios:
+- exporta a JSON válido
+- puedo reimportar ese JSON
+
+---
+
+## 12. Roadmap de implementación del MVP
+
+### Fase 1 — Base funcional
+Objetivo: tener CRUD y persistencia.
+
+Entregables:
+- setup Next.js + Tailwind + Prisma + SQLite
+- schema Prisma
+- migraciones
+- CRUD básico de notas
+- listado y detalle
+- formulario crear/editar
+
+### Fase 2 — Búsqueda y filtros
+Objetivo: recuperar bien.
+
+Entregables:
+- search por título/contenido
+- filtros por tipo
+- filtros por tags
+- home con recientes y favoritas
+
+### Fase 3 — Relación automática
+Objetivo: conectar conocimiento.
+
+Entregables:
+- heurística de tags sugeridos
+- cálculo de relacionadas
+- UI de relacionadas en detalle
+
+### Fase 4 — Pulido MVP
+Objetivo: dejarlo presentable y usable.
+
+Entregables:
+- templates por tipo
+- export/import JSON
+- validaciones
+- estados vacíos
+- seed de ejemplo
+
+---
+
+## 13. Definición de terminado
+
+El MVP está listo cuando:
+- se puede crear, editar y borrar notas
+- las notas se persisten en SQLite
+- se puede buscar por texto
+- se puede filtrar por tipo y tags
+- cada nota muestra relacionadas
+- existen templates por tipo
+- existe export/import JSON
+- la UI es suficientemente clara para uso diario local
+
+---
+
+## 14. Riesgos y cómo reducirlos
+
+### Riesgo 1: demasiada ambición
+Mitigación:
+- no agregar sync ni IA real al MVP
+- priorizar velocidad de uso y recuperación
+
+### Riesgo 2: búsqueda pobre
+Mitigación:
+- priorizar calidad de búsqueda antes de features cosméticas
+- evaluar SQLite FTS si la búsqueda simple queda corta
+
+### Riesgo 3: relaciones poco útiles
+Mitigación:
+- mantener heurísticas transparentes
+- mostrar razones simples del match en una versión futura
+
+### Riesgo 4: modelo demasiado genérico
+Mitigación:
+- usar tipos concretos desde el inicio
+- mantener `note` genérico solo como fallback
+
+---
+
+## 15. Mejoras post-MVP
+
+- sincronización entre dispositivos
+- embeddings para similitud semántica real
+- parser de comandos/snippets automático
+- extensión de navegador para guardar rápido
+- captura por share sheet móvil
+- recordatorios contextuales
+- grafos de relación
+- OCR y adjuntos
+- versionado de notas
+- vistas especializadas por tipo
+
+---
+
+## 16. Prompt maestro para ejecutar en Claude Code
+
+Usar este prompt como instrucción principal:
+
+```txt
+Quiero que construyas un MVP funcional de una aplicación llamada “Gestor de conocimiento personal práctico”.
+
+Objetivo del producto:
+- guardar info rápido
+- relacionarla sola
+- devolverla cuando importa
+
+Casos de uso principales:
+- comandos
+- snippets
+- decisiones técnicas
+- recetas
+- trámites/procedimientos
+- inventario doméstico
+
+Stack requerido:
+- Next.js 15 con App Router
+- TypeScript
+- Tailwind CSS
+- shadcn/ui
+- Prisma
+- SQLite
+- Zod
+
+Requisitos funcionales del MVP:
+1. CRUD completo de notas.
+2. Tipos de nota: command, snippet, decision, recipe, procedure, inventory, note.
+3. Formulario de creación/edición con título, contenido, tipo y tags opcionales.
+4. Dashboard con búsqueda, recientes y favoritas/pineadas.
+5. Lista de notas con filtros por tipo y tags.
+6. Búsqueda por título, contenido y tags.
+7. Página de detalle con notas relacionadas.
+8. Templates simples por tipo.
+9. Exportar e importar JSON.
+10. Persistencia local usando SQLite.
+
+Reglas de relacionadas:
+- +3 si comparten tipo
+- +2 por cada tag compartido
+- +1 por palabra relevante compartida en el título
+- +1 por keyword compartida en el contenido
+- mostrar top 5 con score suficiente
+
+Restricciones:
+- No implementar autenticación.
+- No implementar sync cloud.
+- No implementar IA compleja ni vector DB.
+- Mantener el código limpio, modular y listo para evolucionar.
+
+Quiero que generes:
+1. La estructura inicial del proyecto.
+2. El schema de Prisma.
+3. Los componentes principales.
+4. Las rutas/páginas necesarias.
+5. Las utilidades para búsqueda, tags y relacionadas.
+6. Un seed de datos de ejemplo.
+7. Instrucciones claras para correr el proyecto.
+
+Además:
+- usa buenas prácticas
+- separa responsabilidades
+- evita sobreingeniería
+- deja comentarios donde aporten claridad
+- entrega una primera versión funcional de punta a punta
+```
+
+---
+
+## 17. Prompt por etapas para Claude Code
+
+### Etapa 1 — Setup base
+
+```txt
+Crea el proyecto base con Next.js 15, TypeScript, Tailwind, Prisma y SQLite. Configura la estructura de carpetas, instala dependencias, crea el schema inicial de Prisma para Note, Tag y NoteTag, genera migración y deja una app corriendo con una página home básica.
+```
+
+### Etapa 2 — CRUD
+
+```txt
+Implementa el CRUD completo de notas. Debe existir listado, detalle, creación, edición y borrado. Cada nota debe tener title, content, type, tags opcionales, isFavorite e isPinned. Usa validación con Zod.
+```
+
+### Etapa 3 — Búsqueda y filtros
+
+```txt
+Implementa búsqueda por texto sobre título, contenido y tags. Agrega filtros por tipo y tags. Crea una home con notas recientes, favoritas y acceso rápido a crear nota.
+```
+
+### Etapa 4 — Relacionadas
+
+```txt
+Implementa la lógica de notas relacionadas usando reglas heurísticas simples. Muestra hasta 5 notas relacionadas en la vista de detalle.
+```
+
+### Etapa 5 — Templates y export/import
+
+```txt
+Agrega templates por tipo de nota y funciones para exportar e importar datos en JSON. Incluye manejo básico de errores y estados vacíos.
+```
+
+---
+
+## 18. Checklist de validación manual
+
+- [ ] La app inicia sin errores.
+- [ ] Se puede crear una nota.
+- [ ] Se puede editar una nota.
+- [ ] Se puede eliminar una nota.
+- [ ] La búsqueda encuentra texto por título.
+- [ ] La búsqueda encuentra texto por contenido.
+- [ ] Se puede filtrar por tipo.
+- [ ] Las tags se guardan y se pueden usar como filtro.
+- [ ] El detalle muestra relacionadas.
+- [ ] Se puede exportar JSON.
+- [ ] Se puede importar JSON.
+- [ ] Hay seed de ejemplo útil para probar.
+
+---
+
+## 19. Criterio de éxito del MVP
+
+El MVP será exitoso si una persona puede usarlo durante una semana para guardar y recuperar conocimiento práctico sin sentir que necesita otra herramienta para:
+- recordar comandos
+- reutilizar snippets
+- revisar decisiones
+- seguir procedimientos
+- consultar inventario o recetas
+
+---
+
+## 20. Recomendación final
+
+Para este MVP conviene optimizar en este orden:
+
+1. velocidad de captura
+2. calidad de búsqueda
+3. utilidad de relacionadas
+4. claridad visual
+5. exportabilidad
+
+No priorizar IA antes de demostrar que la base manual + heurística ya resuelve valor real.
--- a/next.config.ts
+++ b/next.config.ts
@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "recall",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.3.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.577.0",
+    "next": "16.2.1",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "shadcn": "^4.1.0",
+    "tailwind-merge": "^3.5.0",
+    "tw-animate-css": "^1.4.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.2.1",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}
--- a/postcss.config.mjs
+++ b/postcss.config.mjs
@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;
--- a/public/file.svg
+++ b/public/file.svg
@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
--- a/public/globe.svg
+++ b/public/globe.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
--- a/public/next.svg
+++ b/public/next.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
--- a/public/vercel.svg
+++ b/public/vercel.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
--- a/public/window.svg
+++ b/public/window.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
--- a/src/app/favicon.ico
+++ b/src/app/favicon.ico
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -0,0 +1,130 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-geist-mono);
+  --font-heading: var(--font-sans);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
+}
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -0,0 +1,33 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html
+      lang="en"
+      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+    >
+      <body className="min-h-full flex flex-col">{children}</body>
+    </html>
+  );
+}
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -0,0 +1,65 @@
+import Image from "next/image";
+
+export default function Home() {
+  return (
+    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
+        <Image
+          className="dark:invert"
+          src="/next.svg"
+          alt="Next.js logo"
+          width={100}
+          height={20}
+          priority
+        />
+        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
+          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
+            To get started, edit the page.tsx file.
+          </h1>
+          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
+            Looking for a starting point or more instructions? Head over to{" "}
+            <a
+              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+              className="font-medium text-zinc-950 dark:text-zinc-50"
+            >
+              Templates
+            </a>{" "}
+            or the{" "}
+            <a
+              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+              className="font-medium text-zinc-950 dark:text-zinc-50"
+            >
+              Learning
+            </a>{" "}
+            center.
+          </p>
+        </div>
+        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
+          <a
+            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
+            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Image
+              className="dark:invert"
+              src="/vercel.svg"
+              alt="Vercel logomark"
+              width={16}
+              height={16}
+            />
+            Deploy Now
+          </a>
+          <a
+            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
+            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            Documentation
+          </a>
+        </div>
+      </main>
+    </div>
+  );
+}
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -0,0 +1,60 @@
+"use client"
+
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}
				`@@ -0,0 +1 @@`
				`<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>`
				`@@ -0,0 +1 @@`
				<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
				`@@ -0,0 +1 @@`
				`<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>`