Felipe Arentsen
f11adceceb
- 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>
6.5 KiB
6.5 KiB
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 inpublic/LogoFIT.pngfor 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:
- Documentos Inteligentes — OCR, extraction, automatic classification | border: cyan
- Agentes de IA — Conversational and autonomous | border: violet
- Automatización con IA — End-to-end intelligent processes | border: blue
- Análisis de Datos — Business insights and intelligence | border: cyan
- 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:
- "Arquitectura para escalar" (blue border)
- "Performance en producción" (violet border)
- "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:
Organizationtype
- 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