From f11adcecebd6734060a0d30b389d7fbe3d485f47 Mon Sep 17 00:00:00 2001 From: Felipe Arentsen Date: Sat, 14 Mar 2026 12:26:00 -0600 Subject: [PATCH] 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) --- .gitignore | 6 + Dockerfile | 11 + astro.config.mjs | 10 +- .../plans/2026-03-14-fitlabs-landing.md | 1097 ++++ .../2026-03-14-fitlabs-landing-design.md | 159 + nginx/nginx.conf | 36 + package-lock.json | 5288 +++++++++++++++++ package.json | 6 +- public/favicon.svg | 14 +- src/components/About.astro | 19 + src/components/Capabilities.astro | 62 + src/components/Contact.astro | 29 + src/components/Differentiator.astro | 36 + src/components/Footer.astro | 19 + src/components/Hero.astro | 37 + src/components/Navbar.astro | 67 + src/layouts/Layout.astro | 74 + src/pages/index.astro | 36 +- src/styles/global.css | 68 + 19 files changed, 7047 insertions(+), 27 deletions(-) create mode 100644 Dockerfile create mode 100644 docs/superpowers/plans/2026-03-14-fitlabs-landing.md create mode 100644 docs/superpowers/specs/2026-03-14-fitlabs-landing-design.md create mode 100644 nginx/nginx.conf create mode 100644 package-lock.json create mode 100644 src/components/About.astro create mode 100644 src/components/Capabilities.astro create mode 100644 src/components/Contact.astro create mode 100644 src/components/Differentiator.astro create mode 100644 src/components/Footer.astro create mode 100644 src/components/Hero.astro create mode 100644 src/components/Navbar.astro create mode 100644 src/layouts/Layout.astro create mode 100644 src/styles/global.css diff --git a/.gitignore b/.gitignore index 16d54bb..df86edd 100644 --- a/.gitignore +++ b/.gitignore @@ -22,3 +22,9 @@ pnpm-debug.log* # jetbrains setting folder .idea/ + +# superpowers brainstorm +.superpowers/ + +# claude +.claude/ diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..3616810 --- /dev/null +++ b/Dockerfile @@ -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 diff --git a/astro.config.mjs b/astro.config.mjs index e762ba5..a2fc1d4 100644 --- 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()], + }, +}); \ No newline at end of file diff --git a/docs/superpowers/plans/2026-03-14-fitlabs-landing.md b/docs/superpowers/plans/2026-03-14-fitlabs-landing.md new file mode 100644 index 0000000..c0d0188 --- /dev/null +++ b/docs/superpowers/plans/2026-03-14-fitlabs-landing.md @@ -0,0 +1,1097 @@ +# 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'; +--- + + + +
+ + + + + +
+