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>
This commit is contained in:
159
docs/superpowers/specs/2026-03-14-fitlabs-landing-design.md
Normal file
159
docs/superpowers/specs/2026-03-14-fitlabs-landing-design.md
Normal file
@@ -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
|
||||
Reference in New Issue
Block a user