feat: complete FIT Labs landing page

- Astro static site with Tailwind CSS v4 - 6 sections: Hero (gradient mesh), About, Capabilities, Differentiator, CTA, Footer - Sticky navbar with mobile menu - Scroll reveal animations - SEO meta tags and structured data - Docker + nginx config for Coolify deployment Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-14 12:26:00 -06:00
parent f165d005ce
commit f11adceceb
19 changed files with 7047 additions and 27 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,9 @@ pnpm-debug.log*

 # jetbrains setting folder
 .idea/
+
+# superpowers brainstorm
+.superpowers/
+
+# claude
+.claude/
--- a/11
+++ b/11
@@ -0,0 +1,11 @@
+FROM node:lts AS build
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+RUN npm run build
+
+FROM nginx:alpine AS runtime
+COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
+COPY --from=build /app/dist /usr/share/nginx/html
+EXPOSE 8080
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -1,5 +1,11 @@
 // @ts-check
 import { defineConfig } from 'astro/config';
+import tailwindcss from '@tailwindcss/vite';

-// https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+  output: 'static',
+  site: 'https://fitlabs.dev',
+  vite: {
+    plugins: [tailwindcss()],
+  },
+});
--- a/docs/superpowers/plans/2026-03-14-fitlabs-landing.md
+++ b/docs/superpowers/plans/2026-03-14-fitlabs-landing.md
--- a/docs/superpowers/specs/2026-03-14-fitlabs-landing-design.md
+++ b/docs/superpowers/specs/2026-03-14-fitlabs-landing-design.md
@@ -0,0 +1,159 @@
+# FIT Labs Landing Page — Design Spec
+
+## Overview
+
+Single-page landing for **fitlabs.dev**, the innovation incubator of FactorIT. Showcases AI capabilities for enterprise clients. Professional, innovative, not arrogant.
+
+**Stack:** Astro (static output)
+**Deploy:** Coolify
+**Domain:** fitlabs.dev
+
+## Visual Identity
+
+**Approach:** Dual Mode — light/dark alternating sections. Connected to FactorIT but with its own personality.
+
+### Color Palette — "Electric Gradient"
+
+| Role | Color | Hex |
+|------|-------|-----|
+| Dark background | Navy deep | `#0a0a1a` |
+| Dark surface | Slate navy | `#0f172a` |
+| Primary blue | FactorIT evolved | `#0369a1` |
+| Accent violet | Innovation | `#7c3aed` |
+| Accent cyan | Tech highlight | `#06b6d4` |
+| Light background | Ice blue | `#f0f9ff` |
+| Light surface | Soft indigo | `#e0e7ff` |
+| Light base | Snow | `#f8fafc` |
+| Dark text | Headings on light | `#0f172a` |
+| Dark body text | Body on light | `#64748b` |
+| Light text | Headings on dark | `#f8fafc` |
+| Light body text | Body on dark | `#94a3b8` |
+| Primary gradient | CTA / accents | `linear-gradient(135deg, #0369a1, #7c3aed)` |
+| Extended gradient | Decorative | `linear-gradient(135deg, #0369a1, #7c3aed, #06b6d4)` |
+
+### Typography
+
+- **Primary font:** Inter (modern, geometric, excellent readability)
+- **Headings:** 700–800 weight
+- **Body:** 400 weight
+- **Accent text:** Gradient fill on key phrases
+
+### Assets
+
+- `LogoFIT.png` — primary logo, placed in `public/LogoFIT.png` for the Astro build
+- Logo links to factorit.com
+- **Icon library:** Lucide Icons (lightweight, consistent with modern design)
+
+## Page Structure — 6 Sections
+
+### Navbar (sticky)
+
+- Logo FIT Labs (left) — links to factorit.com
+- Navigation links: Capacidades (`#capacidades`), Nosotros (`#nosotros`), Contacto (`#contacto`) (right)
+- Contact button with gradient background
+- Transparent on hero, solid dark on scroll
+- **Mobile:** Hamburger menu → full-screen overlay, slides down, closes on link click or outside tap
+
+### Section 1: Hero (dark)
+
+- **ID:** `id="hero"`
+- **Style:** Gradient mesh — 3 large radial-gradient circles with `blur(80px)`, keyframe-animated position shifts over 20s cycle
+- **Content:**
+  - Subtitle: "FactorIT Innovation Lab" (cyan, uppercase, letter-spaced)
+  - Title: "FIT Labs" (white, bold, large)
+  - Description: "Donde la inteligencia artificial se convierte en soluciones enterprise que escalan"
+  - CTA button: "Explorar capacidades ↓" (gradient background)
+### Section 2: Qué es FIT Labs (light)
+
+- **ID:** `id="nosotros"`
+- **Background:** `#f0f9ff`
+- **Content:**
+  - Label: "Sobre nosotros" (blue, uppercase)
+  - Heading: "La incubadora de innovación de FactorIT"
+  - Body text: explains what FIT Labs is — born from FactorIT's tech DNA to solve complex challenges with AI. Emphasizes real-world production solutions, not demos.
+- **Layout:** Centered text, max-width constrained
+
+### Section 3: Capacidades (dark)
+
+- **ID:** `id="capacidades"`
+- **Style:** Vertical list with colored left border accents
+- **5 capabilities:**
+  1. **Documentos Inteligentes** — OCR, extraction, automatic classification | border: cyan
+  2. **Agentes de IA** — Conversational and autonomous | border: violet
+  3. **Automatización con IA** — End-to-end intelligent processes | border: blue
+  4. **Análisis de Datos** — Business insights and intelligence | border: cyan
+  5. **Soluciones Industriales** — AI applied to your specific vertical | border: violet
+- **Each item:** Icon (left) + title + subtitle on dark card (`#0f172a`)
+- **Interaction:** Subtle hover effect (glow or expand)
+
+### Section 4: Diferenciador (light)
+
+- **Style:** Two-column — narrative text left, value list right
+- **Left column:**
+  - Heading: "Innovación con los pies en la tierra"
+  - Body: "Nos apasiona la IA, pero nos obsesiona que funcione. Cada proyecto que sale de FIT Labs está pensado para integrarse en operaciones reales, soportar carga real, y crecer cuando tu negocio crece."
+- **Right column — 3 values with colored left borders:**
+  1. "Arquitectura para escalar" (blue border)
+  2. "Performance en producción" (violet border)
+  3. "Integración con tu ecosistema" (cyan border)
+- **Tone:** Human, professional, not cold or arrogant
+
+### Section 5: CTA / Contacto (dark)
+
+- **ID:** `id="contacto"`
+- **Style:** Centered, gradient mesh accent (subtle violet glow)
+- **Content:**
+  - Heading: "¿Tienes un desafío en mente?"
+  - Body: "Cuéntanos qué problema quieres resolver. Nosotros vemos cómo la IA puede ayudarte."
+  - Button: "Conversemos →" (gradient, opens `mailto:contacto@fitlabs.dev`)
+  - Email: contacto@fitlabs.dev (text below button, also mailto link)
+
+### Section 6: Footer (dark, darker)
+
+- **Background:** `#06080f`
+- **Left:** FIT Labs logo + "by FactorIT"
+- **Right:** Links — LinkedIn, GitHub, factorit.com
+
+## Animations & Interactions
+
+- **Hero gradient mesh:** 3 radial-gradient circles with `blur(80px)`, keyframe-animated position shifts over 20s cycle
+- **Scroll reveals:** Sections fade in on scroll (IntersectionObserver)
+- **Capability list:** Subtle left-slide-in on scroll, hover glow on border
+- **Navbar:** Transparent → solid background on scroll
+- **CTA button:** Hover scale + glow effect
+- **No heavy JS animations** — keep it performant and lightweight
+
+## Responsive Behavior
+
+- **Desktop (>1024px):** Full layout as described, two-column differentiator
+- **Tablet (768-1024px):** Slightly narrower, differentiator stacks
+- **Mobile (<768px):** Single column, hamburger nav (full-screen overlay), capabilities stack naturally (list already mobile-friendly)
+
+## Technical Decisions
+
+- **Astro** with static output (`output: 'static'`)
+- **Tailwind CSS** for styling
+- **No framework islands needed** — pure HTML/CSS with minimal JS for:
+  - Navbar scroll behavior
+  - Scroll reveal animations
+  - Gradient mesh animation
+- **Deployment:** Coolify with Dockerfile (node build → nginx serve)
+- **SEO:**
+  - `og:title`: "FIT Labs — Innovación con IA by FactorIT"
+  - `og:description`: "Soluciones de inteligencia artificial enterprise que escalan. La incubadora de innovación de FactorIT."
+  - `og:image`: to be created (social share card with FIT Labs branding)
+  - Structured data: `Organization` type
+- **Performance target:** Lighthouse 95+ on all metrics
+
+## Content Language
+
+All content in **Spanish**. The site targets Latin American and Spanish-speaking enterprise clients.
+
+## Out of Scope (v1)
+
+- Blog / articles
+- Project showcase / portfolio
+- Contact form (v1 uses mailto)
+- Multi-language support
+- Analytics dashboard
+- Authentication
--- a/nginx/nginx.conf
+++ b/nginx/nginx.conf
@@ -0,0 +1,36 @@
+worker_processes 1;
+
+events {
+  worker_connections 1024;
+}
+
+http {
+  server {
+    listen 8080;
+    server_name _;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    include /etc/nginx/mime.types;
+
+    gzip on;
+    gzip_min_length 1000;
+    gzip_proxied expired no-cache no-store private auth;
+    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript image/svg+xml;
+
+    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
+      expires 30d;
+      add_header Cache-Control "public, immutable";
+    }
+
+    location / {
+      try_files $uri $uri/index.html /index.html;
+    }
+
+    error_page 404 /404.html;
+    location = /404.html {
+      root /usr/share/nginx/html;
+      internal;
+    }
+  }
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -12,6 +12,8 @@
    "astro": "astro"
  },
  "dependencies": {
-    "astro": "^6.0.4"
+    "@tailwindcss/vite": "^4.2.1",
+    "astro": "^6.0.4",
+    "tailwindcss": "^4.2.1"
  }
 }
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -1,9 +1,7 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
-    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
-    <style>
-        path { fill: #000; }
-        @media (prefers-color-scheme: dark) {
-            path { fill: #FFF; }
-        }
-    </style>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="6" fill="#0a0a1a"/>
+  <text x="50%" y="55%" dominant-baseline="middle" text-anchor="middle"
+        font-family="Inter, sans-serif" font-weight="800" font-size="14" fill="#06b6d4">
+    FIT
+  </text>
 </svg>
--- a/src/components/About.astro
+++ b/src/components/About.astro
@@ -0,0 +1,19 @@
+---
+---
+
+<section id="nosotros" class="bg-light-bg py-24 px-6">
+  <div class="max-w-3xl mx-auto text-center reveal">
+    <p class="text-brand-blue text-xs tracking-[0.2em] uppercase font-semibold mb-3">
+      Sobre nosotros
+    </p>
+    <h2 class="text-3xl md:text-4xl font-bold text-slate-900 mb-6">
+      La incubadora de innovaci&oacute;n de FactorIT
+    </h2>
+    <p class="text-slate-500 text-lg leading-relaxed">
+      FIT Labs es donde exploramos, prototipamos y llevamos a producci&oacute;n soluciones
+      de inteligencia artificial para empresas. Nacimos del ADN tecnol&oacute;gico de
+      FactorIT para resolver los desaf&iacute;os m&aacute;s complejos con IA &mdash; no entregamos
+      demos, entregamos sistemas que funcionan en el mundo real.
+    </p>
+  </div>
+</section>
--- a/src/components/Capabilities.astro
+++ b/src/components/Capabilities.astro
@@ -0,0 +1,62 @@
+---
+const capabilities = [
+  {
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></svg>`,
+    title: 'Documentos Inteligentes',
+    description: 'OCR, extracción y clasificación automática',
+    borderColor: 'border-brand-cyan',
+  },
+  {
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2"/><path d="M20 14h2"/><path d="M15 13v2"/><path d="M9 13v2"/></svg>`,
+    title: 'Agentes de IA',
+    description: 'Conversacionales y autónomos',
+    borderColor: 'border-brand-violet',
+  },
+  {
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h9l-1 8 10-12h-9l1-8z"/></svg>`,
+    title: 'Automatización con IA',
+    description: 'Procesos end-to-end inteligentes',
+    borderColor: 'border-brand-blue',
+  },
+  {
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="m19 9-5 5-4-4-3 3"/></svg>`,
+    title: 'Análisis de Datos',
+    description: 'Insights e inteligencia de negocio',
+    borderColor: 'border-brand-cyan',
+  },
+  {
+    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 20a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8l-7 5V8l-7 5V4a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z"/></svg>`,
+    title: 'Soluciones Industriales',
+    description: 'IA aplicada a tu vertical',
+    borderColor: 'border-brand-violet',
+  },
+];
+---
+
+<section id="capacidades" class="bg-dark-bg py-24 px-6">
+  <div class="max-w-3xl mx-auto">
+    <div class="text-center mb-12 reveal">
+      <p class="text-brand-cyan text-xs tracking-[0.2em] uppercase font-semibold mb-3">
+        Capacidades
+      </p>
+      <h2 class="text-3xl md:text-4xl font-bold text-white">
+        Lo que construimos
+      </h2>
+    </div>
+
+    <div class="flex flex-col gap-4">
+      {capabilities.map((cap, i) => (
+        <div
+          class={`flex items-center gap-5 bg-dark-surface border-l-[3px] ${cap.borderColor} rounded-r-lg px-6 py-5 slide-in hover:bg-dark-surface/80 hover:shadow-[0_0_20px_rgba(6,182,212,0.05)] transition-all duration-300`}
+          style={`transition-delay: ${i * 100}ms;`}
+        >
+          <div class="text-brand-cyan shrink-0" set:html={cap.icon} />
+          <div>
+            <h3 class="text-white font-semibold">{cap.title}</h3>
+            <p class="text-slate-400 text-sm mt-1">{cap.description}</p>
+          </div>
+        </div>
+      ))}
+    </div>
+  </div>
+</section>
--- a/src/components/Contact.astro
+++ b/src/components/Contact.astro
@@ -0,0 +1,29 @@
+---
+---
+
+<section id="contacto" class="relative bg-dark-bg py-24 px-6 overflow-hidden">
+  <div
+    class="absolute top-[-30%] left-1/2 -translate-x-1/2 w-[500px] h-[300px] rounded-full opacity-40"
+    style="background: radial-gradient(circle, rgba(124,58,237,0.15) 0%, transparent 70%); filter: blur(60px);"
+  ></div>
+
+  <div class="relative z-10 max-w-2xl mx-auto text-center reveal">
+    <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">
+      &iquest;Tienes un desaf&iacute;o en mente?
+    </h2>
+    <p class="text-slate-400 text-lg mb-10 leading-relaxed">
+      Cu&eacute;ntanos qu&eacute; problema quieres resolver. Nosotros vemos c&oacute;mo la IA puede ayudarte.
+    </p>
+    <a
+      href="mailto:contacto@fitlabs.dev"
+      class="inline-block px-10 py-4 text-base font-semibold text-white rounded-lg bg-gradient-to-br from-brand-blue to-brand-violet hover:scale-105 hover:shadow-[0_0_30px_rgba(124,58,237,0.3)] transition-all duration-300"
+    >
+      Conversemos &rarr;
+    </a>
+    <p class="mt-5 text-sm text-slate-500">
+      <a href="mailto:contacto@fitlabs.dev" class="hover:text-brand-cyan transition-colors">
+        contacto@fitlabs.dev
+      </a>
+    </p>
+  </div>
+</section>
--- a/src/components/Differentiator.astro
+++ b/src/components/Differentiator.astro
@@ -0,0 +1,36 @@
+---
+const values = [
+  { text: 'Arquitectura para escalar', borderColor: 'border-brand-blue' },
+  { text: 'Performance en producción', borderColor: 'border-brand-violet' },
+  { text: 'Integración con tu ecosistema', borderColor: 'border-brand-cyan' },
+];
+---
+
+<section class="bg-light-bg py-24 px-6">
+  <div class="max-w-4xl mx-auto reveal">
+    <p class="text-brand-blue text-xs tracking-[0.2em] uppercase font-semibold mb-8">
+      Nuestro enfoque
+    </p>
+
+    <div class="flex flex-col md:flex-row gap-12 md:gap-16">
+      <div class="flex-1">
+        <h2 class="text-2xl md:text-3xl font-bold text-slate-900 mb-4">
+          Innovaci&oacute;n con los pies en la tierra
+        </h2>
+        <p class="text-slate-500 leading-relaxed">
+          Nos apasiona la IA, pero nos obsesiona que funcione. Cada proyecto que
+          sale de FIT Labs est&aacute; pensado para integrarse en operaciones reales,
+          soportar carga real, y crecer cuando tu negocio crece.
+        </p>
+      </div>
+
+      <div class="flex-1 flex flex-col gap-3">
+        {values.map((val) => (
+          <div class={`bg-white border-l-[3px] ${val.borderColor} rounded-lg px-5 py-4 shadow-sm`}>
+            <p class="text-slate-900 font-semibold text-sm">{val.text}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  </div>
+</section>
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -0,0 +1,19 @@
+---
+---
+
+<footer class="bg-dark-footer py-8 px-6 border-t border-white/5">
+  <div class="max-w-6xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4">
+    <div>
+      <a href="https://www.factorit.com" target="_blank" rel="noopener noreferrer" class="text-white font-bold text-sm hover:text-brand-cyan transition-colors">
+        FIT <span class="text-brand-cyan">Labs</span>
+      </a>
+      <p class="text-slate-500 text-xs mt-1">by FactorIT</p>
+    </div>
+
+    <div class="flex items-center gap-6 text-sm text-slate-500">
+      <a href="https://www.linkedin.com/company/factorit" target="_blank" rel="noopener noreferrer" class="hover:text-white transition-colors">LinkedIn</a>
+      <a href="https://github.com/factorit" target="_blank" rel="noopener noreferrer" class="hover:text-white transition-colors">GitHub</a>
+      <a href="https://www.factorit.com" target="_blank" rel="noopener noreferrer" class="hover:text-white transition-colors">factorit.com</a>
+    </div>
+  </div>
+</footer>
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -0,0 +1,37 @@
+---
+---
+
+<section id="hero" class="relative min-h-screen flex items-center justify-center bg-dark-bg overflow-hidden">
+  <div class="absolute inset-0 overflow-hidden">
+    <div
+      class="absolute top-[-10%] right-[-5%] w-[500px] h-[500px] rounded-full opacity-60"
+      style="background: radial-gradient(circle, rgba(124,58,237,0.3) 0%, transparent 70%); filter: blur(80px); animation: mesh-drift-1 20s ease-in-out infinite;"
+    ></div>
+    <div
+      class="absolute bottom-[-15%] left-[-10%] w-[600px] h-[600px] rounded-full opacity-50"
+      style="background: radial-gradient(circle, rgba(6,182,212,0.25) 0%, transparent 70%); filter: blur(80px); animation: mesh-drift-2 20s ease-in-out infinite;"
+    ></div>
+    <div
+      class="absolute top-[40%] left-[40%] -translate-x-1/2 -translate-y-1/2 w-[550px] h-[550px] rounded-full opacity-40"
+      style="background: radial-gradient(circle, rgba(3,105,161,0.2) 0%, transparent 70%); filter: blur(80px); animation: mesh-drift-3 20s ease-in-out infinite;"
+    ></div>
+  </div>
+
+  <div class="relative z-10 text-center px-6 max-w-2xl mx-auto">
+    <p class="text-brand-cyan text-xs tracking-[0.2em] uppercase mb-4 font-semibold">
+      FactorIT Innovation Lab
+    </p>
+    <h1 class="text-5xl md:text-7xl font-extrabold text-white mb-6">
+      FIT Labs
+    </h1>
+    <p class="text-lg md:text-xl text-slate-400 mb-10 leading-relaxed">
+      Donde la inteligencia artificial se convierte en soluciones enterprise que escalan
+    </p>
+    <a
+      href="#capacidades"
+      class="inline-block px-8 py-3 text-base font-semibold text-white rounded-lg bg-gradient-to-br from-brand-blue to-brand-violet hover:scale-105 hover:shadow-[0_0_30px_rgba(124,58,237,0.3)] transition-all duration-300"
+    >
+      Explorar capacidades &darr;
+    </a>
+  </div>
+</section>
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -0,0 +1,67 @@
+---
+---
+
+<nav id="navbar" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300">
+  <div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
+    <a href="https://www.factorit.com" target="_blank" rel="noopener noreferrer">
+      <img src="/LogoFIT.png" alt="FIT Labs" class="h-8" />
+    </a>
+
+    <div class="hidden md:flex items-center gap-8">
+      <a href="#capacidades" class="text-sm text-slate-300 hover:text-white transition-colors">Capacidades</a>
+      <a href="#nosotros" class="text-sm text-slate-300 hover:text-white transition-colors">Nosotros</a>
+      <a href="#contacto" class="px-4 py-2 text-sm font-semibold text-white rounded-lg bg-gradient-to-br from-brand-blue to-brand-violet hover:scale-105 transition-transform">
+        Contacto
+      </a>
+    </div>
+
+    <button id="menu-toggle" class="md:hidden text-white" aria-label="Abrir menú">
+      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+      </svg>
+    </button>
+  </div>
+
+  <div id="mobile-menu" class="fixed inset-0 bg-dark-bg/95 backdrop-blur-sm flex flex-col items-center justify-center gap-8 hidden z-40">
+    <button id="menu-close" class="absolute top-6 right-6 text-white" aria-label="Cerrar menú">
+      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+      </svg>
+    </button>
+    <a href="#capacidades" class="text-2xl text-white hover:text-brand-cyan transition-colors mobile-link">Capacidades</a>
+    <a href="#nosotros" class="text-2xl text-white hover:text-brand-cyan transition-colors mobile-link">Nosotros</a>
+    <a href="#contacto" class="text-2xl text-white hover:text-brand-cyan transition-colors mobile-link">Contacto</a>
+  </div>
+</nav>
+
+<script>
+  const navbar = document.getElementById('navbar');
+  window.addEventListener('scroll', () => {
+    if (window.scrollY > 50) {
+      navbar?.classList.add('bg-dark-bg/90', 'backdrop-blur-md', 'shadow-lg');
+    } else {
+      navbar?.classList.remove('bg-dark-bg/90', 'backdrop-blur-md', 'shadow-lg');
+    }
+  });
+
+  const toggle = document.getElementById('menu-toggle');
+  const menu = document.getElementById('mobile-menu');
+  const close = document.getElementById('menu-close');
+  const links = document.querySelectorAll('.mobile-link');
+
+  function openMenu() {
+    menu?.classList.remove('hidden');
+    document.body.style.overflow = 'hidden';
+  }
+  function closeMenu() {
+    menu?.classList.add('hidden');
+    document.body.style.overflow = '';
+  }
+
+  toggle?.addEventListener('click', openMenu);
+  close?.addEventListener('click', closeMenu);
+  links.forEach(link => link.addEventListener('click', closeMenu));
+  menu?.addEventListener('click', (e) => {
+    if (e.target === menu) closeMenu();
+  });
+</script>
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -0,0 +1,74 @@
+---
+interface Props {
+  title?: string;
+  description?: string;
+}
+
+const {
+  title = 'FIT Labs — Innovación con IA by FactorIT',
+  description = 'Soluciones de inteligencia artificial enterprise que escalan. La incubadora de innovación de FactorIT.',
+} = Astro.props;
+---
+
+<!doctype html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content={description} />
+
+    <meta property="og:title" content={title} />
+    <meta property="og:description" content={description} />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://fitlabs.dev" />
+    <meta property="og:site_name" content="FIT Labs" />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content={title} />
+    <meta name="twitter:description" content={description} />
+
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap"
+      rel="stylesheet"
+    />
+
+    <script type="application/ld+json" set:html={JSON.stringify({
+      "@context": "https://schema.org",
+      "@type": "Organization",
+      "name": "FIT Labs",
+      "description": description,
+      "url": "https://fitlabs.dev",
+      "parentOrganization": {
+        "@type": "Organization",
+        "name": "FactorIT",
+        "url": "https://www.factorit.com"
+      }
+    })} />
+
+    <title>{title}</title>
+  </head>
+  <body class="font-sans antialiased">
+    <slot />
+
+    <script>
+      const observer = new IntersectionObserver(
+        (entries) => {
+          entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+              entry.target.classList.add('visible');
+            }
+          });
+        },
+        { threshold: 0.1 }
+      );
+
+      document.querySelectorAll('.reveal, .slide-in').forEach((el) => {
+        observer.observe(el);
+      });
+    </script>
+  </body>
+</html>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,17 +1,23 @@
 ---
+import Layout from '../layouts/Layout.astro';
+import Navbar from '../components/Navbar.astro';
+import Hero from '../components/Hero.astro';
+import About from '../components/About.astro';
+import Capabilities from '../components/Capabilities.astro';
+import Differentiator from '../components/Differentiator.astro';
+import Contact from '../components/Contact.astro';
+import Footer from '../components/Footer.astro';
+import '../styles/global.css';
+---

---
-
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<link rel="icon" href="/favicon.ico" />
-		<meta name="viewport" content="width=device-width" />
-		<meta name="generator" content={Astro.generator} />
-		<title>Astro</title>
-	</head>
-	<body>
-		<h1>Astro</h1>
-	</body>
-</html>
+<Layout>
+  <Navbar />
+  <main>
+    <Hero />
+    <About />
+    <Capabilities />
+    <Differentiator />
+    <Contact />
+  </main>
+  <Footer />
+</Layout>
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -0,0 +1,68 @@
+@import "tailwindcss";
+
+@theme {
+  --font-sans: 'Inter', system-ui, sans-serif;
+
+  --color-dark-bg: #0a0a1a;
+  --color-dark-surface: #0f172a;
+  --color-dark-footer: #06080f;
+
+  --color-light-bg: #f0f9ff;
+  --color-light-surface: #e0e7ff;
+  --color-light-base: #f8fafc;
+
+  --color-brand-blue: #0369a1;
+  --color-brand-violet: #7c3aed;
+  --color-brand-cyan: #06b6d4;
+}
+
+/* Gradient mesh animation for hero */
+@keyframes mesh-drift-1 {
+  0%, 100% { transform: translate(0, 0); }
+  33% { transform: translate(30px, -20px); }
+  66% { transform: translate(-20px, 15px); }
+}
+
+@keyframes mesh-drift-2 {
+  0%, 100% { transform: translate(0, 0); }
+  33% { transform: translate(-25px, 20px); }
+  66% { transform: translate(15px, -30px); }
+}
+
+@keyframes mesh-drift-3 {
+  0%, 100% { transform: translate(0, 0); }
+  33% { transform: translate(20px, 25px); }
+  66% { transform: translate(-30px, -10px); }
+}
+
+/* Scroll reveal */
+.reveal {
+  opacity: 0;
+  transform: translateY(20px);
+  transition: opacity 0.6s ease, transform 0.6s ease;
+}
+
+.reveal.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Capability list slide-in */
+.slide-in {
+  opacity: 0;
+  transform: translateX(-20px);
+  transition: opacity 0.5s ease, transform 0.5s ease;
+}
+
+.slide-in.visible {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+/* Gradient text utility */
+.gradient-text {
+  background: linear-gradient(135deg, #0369a1, #7c3aed);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}