# FIT Labs Landing Page — Implementation Plan > **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking. **Goal:** Build and deploy a single-page landing for fitlabs.dev — FactorIT's AI innovation incubator. **Architecture:** Astro static site with Tailwind CSS. 6 sections in a single `index.astro` page composed from Astro components. No client-side framework — vanilla JS only for navbar scroll, scroll-reveal animations, and gradient mesh. Deployed via Docker (nginx) on Coolify. **Tech Stack:** Astro 5.x, Tailwind CSS 4.x, Lucide Icons (SVG inline), Docker + nginx **Spec:** `docs/superpowers/specs/2026-03-14-fitlabs-landing-design.md` --- ## File Structure ``` fitlabs.dev/ ├── public/ │ ├── LogoFIT.png # Logo (already exists at project root) │ └── favicon.svg # Favicon ├── src/ │ ├── layouts/ │ │ └── Layout.astro # Base HTML: meta/SEO/fonts, slot │ ├── components/ │ │ ├── Navbar.astro # Sticky navbar with scroll behavior │ │ ├── Hero.astro # Gradient mesh hero │ │ ├── About.astro # "Qué es FIT Labs" section │ │ ├── Capabilities.astro # 5 capabilities list │ │ ├── Differentiator.astro # Two-column differentiator │ │ ├── Contact.astro # CTA section │ │ └── Footer.astro # Footer │ ├── pages/ │ │ └── index.astro # Composes all sections │ └── styles/ │ └── global.css # Tailwind imports, custom animations, gradient mesh ├── nginx/ │ └── nginx.conf # Nginx config for static serving ├── Dockerfile # Multi-stage: node build → nginx serve ├── astro.config.mjs # Astro config (static output) ├── package.json ├── tsconfig.json └── .gitignore ``` --- ## Chunk 1: Project Setup & Base Layout ### Task 1: Scaffold Astro Project **Files:** - Create: `package.json`, `astro.config.mjs`, `tsconfig.json`, `.gitignore` - [ ] **Step 1: Initialize Astro project** ```bash cd /Users/felipearentsen/Claude/code/fitlabs.dev npm create astro@latest . -- --template minimal --no-install --typescript strict ``` - [ ] **Step 2: Add Tailwind CSS integration** ```bash npx astro add tailwind -y ``` - [ ] **Step 3: Configure astro.config.mjs for static output** ```javascript // astro.config.mjs import { defineConfig } from 'astro/config'; import tailwindcss from '@astrojs/tailwind'; export default defineConfig({ output: 'static', integrations: [tailwindcss()], site: 'https://fitlabs.dev', }); ``` - [ ] **Step 4: Update .gitignore** Add to `.gitignore`: ``` node_modules/ dist/ .astro/ .superpowers/ ``` - [ ] **Step 5: Move logo to public/** ```bash cp /Users/felipearentsen/Claude/code/fitlabs.dev/LogoFIT.png /Users/felipearentsen/Claude/code/fitlabs.dev/public/LogoFIT.png ``` - [ ] **Step 6: Install dependencies and verify build** ```bash npm install npm run build ``` Expected: Build succeeds, `dist/` directory created. - [ ] **Step 7: Initialize git and commit** ```bash git init git add -A git commit -m "chore: scaffold Astro project with Tailwind CSS" ``` --- ### Task 2: Global Styles & Tailwind Config **Files:** - Create: `src/styles/global.css` - Modify: `tailwind.config.mjs` - [ ] **Step 1: Configure Tailwind with custom colors and fonts** ```javascript // tailwind.config.mjs /** @type {import('tailwindcss').Config} */ export default { content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'], theme: { extend: { colors: { dark: { bg: '#0a0a1a', surface: '#0f172a', footer: '#06080f', }, light: { bg: '#f0f9ff', surface: '#e0e7ff', base: '#f8fafc', }, brand: { blue: '#0369a1', violet: '#7c3aed', cyan: '#06b6d4', }, }, fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'], }, }, }, plugins: [], }; ``` - [ ] **Step 2: Create global.css with Tailwind imports and custom animations** ```css /* src/styles/global.css */ @import 'tailwindcss'; @theme { --font-sans: 'Inter', system-ui, sans-serif; } /* 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; } ``` - [ ] **Step 3: Verify build** ```bash npm run build ``` Expected: Build succeeds. - [ ] **Step 4: Commit** ```bash git add tailwind.config.mjs src/styles/global.css git commit -m "feat: add Tailwind config with brand colors and global animations" ``` --- ### Task 3: Base Layout with SEO **Files:** - Create: `src/layouts/Layout.astro` - [ ] **Step 1: Create Layout.astro with meta tags and Open Graph** ```astro --- // src/layouts/Layout.astro 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; --- ``` - [ ] **Step 2: Add Navbar to index.astro** ```astro --- import Layout from '../layouts/Layout.astro'; import Navbar from '../components/Navbar.astro'; import '../styles/global.css'; ---

Hero placeholder

 ``` - [ ] **Step 3: Verify — dev server, scroll nav behavior, mobile menu** ```bash npm run dev -- --port 4321 ``` Open `http://localhost:4321`. Verify: navbar transparent at top, solid on scroll, mobile menu opens/closes. - [ ] **Step 4: Commit** ```bash git add src/components/Navbar.astro src/pages/index.astro git commit -m "feat: add sticky navbar with scroll behavior and mobile menu" ``` --- ### Task 5: Hero Section **Files:** - Create: `src/components/Hero.astro` - [ ] **Step 1: Create Hero.astro with gradient mesh** ```astro --- // src/components/Hero.astro ---

FactorIT Innovation Lab

FIT Labs

Donde la inteligencia artificial se convierte en soluciones enterprise que escalan

Explorar capacidades ↓
``` - [ ] **Step 2: Add Hero to index.astro (replace placeholder)** Update `index.astro` to import and use `` instead of the hero placeholder div. - [ ] **Step 3: Verify — animated gradient blobs drifting, content centered, CTA visible** ```bash npm run dev -- --port 4321 ``` Open `http://localhost:4321`. Verify: blobs animate, text is readable, button links to `#capacidades`. - [ ] **Step 4: Commit** ```bash git add src/components/Hero.astro src/pages/index.astro git commit -m "feat: add hero section with gradient mesh animation" ``` --- ### Task 6: About Section **Files:** - Create: `src/components/About.astro` - [ ] **Step 1: Create About.astro** ```astro --- // src/components/About.astro ---

Sobre nosotros

La incubadora de innovación de FactorIT

FIT Labs es donde exploramos, prototipamos y llevamos a producción soluciones de inteligencia artificial para empresas. Nacimos del ADN tecnológico de FactorIT para resolver los desafíos más complejos con IA — no entregamos demos, entregamos sistemas que funcionan en el mundo real.

``` - [ ] **Step 2: Add About to index.astro** Import and replace the `#nosotros` placeholder. - [ ] **Step 3: Verify and commit** ```bash npm run build git add src/components/About.astro src/pages/index.astro git commit -m "feat: add about section" ``` --- ### Task 7: Capabilities Section **Files:** - Create: `src/components/Capabilities.astro` - [ ] **Step 1: Create Capabilities.astro** ```astro --- // src/components/Capabilities.astro const capabilities = [ { icon: ``, title: 'Documentos Inteligentes', description: 'OCR, extracción y clasificación automática', borderColor: 'border-brand-cyan', }, { icon: ``, title: 'Agentes de IA', description: 'Conversacionales y autónomos', borderColor: 'border-brand-violet', }, { icon: ``, title: 'Automatización con IA', description: 'Procesos end-to-end inteligentes', borderColor: 'border-brand-blue', }, { icon: ``, title: 'Análisis de Datos', description: 'Insights e inteligencia de negocio', borderColor: 'border-brand-cyan', }, { icon: ``, title: 'Soluciones Industriales', description: 'IA aplicada a tu vertical', borderColor: 'border-brand-violet', }, ]; ---

Capacidades

Lo que construimos

{capabilities.map((cap, i) => (

{cap.title}

{cap.description}

))}
``` - [ ] **Step 2: Add Capabilities to index.astro** Import and replace the `#capacidades` placeholder. - [ ] **Step 3: Verify — 5 items with colored borders, icons visible** ```bash npm run dev -- --port 4321 ``` - [ ] **Step 4: Commit** ```bash git add src/components/Capabilities.astro src/pages/index.astro git commit -m "feat: add capabilities section with icon list" ``` --- ### Task 8: Differentiator Section **Files:** - Create: `src/components/Differentiator.astro` - [ ] **Step 1: Create Differentiator.astro** ```astro --- // src/components/Differentiator.astro 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' }, ]; ---

Nuestro enfoque

Innovación con los pies en la tierra

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.

{values.map((val) => (

{val.text}

))}
``` - [ ] **Step 2: Add to index.astro** Import and replace the light-bg placeholder. - [ ] **Step 3: Verify and commit** ```bash npm run build git add src/components/Differentiator.astro src/pages/index.astro git commit -m "feat: add differentiator section with values" ``` --- ### Task 9: Contact (CTA) Section **Files:** - Create: `src/components/Contact.astro` - [ ] **Step 1: Create Contact.astro** ```astro --- // src/components/Contact.astro ---

¿Tienes un desafío en mente?

Cuéntanos qué problema quieres resolver. Nosotros vemos cómo la IA puede ayudarte.

Conversemos →

contacto@fitlabs.dev

``` - [ ] **Step 2: Add to index.astro** Import and replace the `#contacto` placeholder. - [ ] **Step 3: Verify and commit** ```bash npm run build git add src/components/Contact.astro src/pages/index.astro git commit -m "feat: add CTA contact section" ``` --- ### Task 10: Footer **Files:** - Create: `src/components/Footer.astro` - [ ] **Step 1: Create Footer.astro** ```astro --- // src/components/Footer.astro --- ``` - [ ] **Step 2: Add to index.astro** Import Footer and place after ``. - [ ] **Step 3: Verify and commit** ```bash npm run build git add src/components/Footer.astro src/pages/index.astro git commit -m "feat: add footer with FactorIT branding" ``` --- ## Chunk 3: Animations, Polish & Deployment ### Task 11: Scroll Reveal Animations **Files:** - Modify: `src/layouts/Layout.astro` (add script before ``) - [ ] **Step 1: Add IntersectionObserver script to Layout.astro** Add before ``: ```html ``` - [ ] **Step 2: Verify — sections and capabilities animate on scroll** ```bash npm run dev -- --port 4321 ``` Open `http://localhost:4321`. Scroll down. Verify: sections fade in, capability items slide in from left with staggered delay. - [ ] **Step 3: Commit** ```bash git add src/layouts/Layout.astro git commit -m "feat: add scroll reveal animations" ``` --- ### Task 12: Final index.astro Assembly **Files:** - Modify: `src/pages/index.astro` - [ ] **Step 1: Ensure index.astro imports all components in order** ```astro --- 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'; ---