FixNow Landing Page 🔧

Una landing page moderna y responsiva para una plataforma que conecta técnicos expertos con personas que necesitan servicios de reparación, optimizada para hosting estático en AWS S3.

📋 Características

Diseño Moderno: UI/UX contemporáneo con gradientes azules y animaciones suaves
Totalmente Responsivo: Optimizado para desktop, tablet y móvil
Animaciones: Efectos de scroll y transiciones fluidas
Mascota: Castor 🦫 como símbolo de trabajo y construcción
Colores Balanceados: Azul primario con naranja como accent
SEO Ready: Meta tags y estructura semántica
Performance: Código optimizado y ligero
Sin Dependencias: HTML, CSS y JavaScript vanilla (no requiere frameworks)

🎨 Secciones Incluidas

Hero Section: Presentación impactante con estadísticas de la plataforma
Servicios: Grid con 8 categorías (computadores, celulares, TV, electrodomésticos, etc.)
Cómo Funciona: 3 pasos simples para conectar con técnicos
Features: Beneficios de usar FixNow (técnicos verificados, respuesta rápida, garantía)
Pricing: Tres planes para técnicos (Básico, Pro, Empresarial)
Testimonials: Testimonios de clientes y técnicos
CTA: Call-to-action dual (buscar técnico / registrarse como técnico)
Footer: Links y información de contacto

📁 Estructura de Archivos

landing-page/
├── index.html      # Landing page principal (single-file con HTML + CSS + JS)
├── error.html      # Página de error 404 (single-file con HTML + CSS + JS)
└── README.md       # Este archivo

Ventajas del single-file:

✅ Solo dos archivos para subir a S3
✅ Más rápido de desplegar
✅ No hay problemas de rutas
✅ Funciona incluso offline

🚀 Despliegue en AWS S3

Paso 1: Crear un Bucket S3

# Crea un bucket (reemplaza 'mi-landing-page' con un nombre único)
aws s3 mb s3://mi-landing-page

Paso 2: Configurar el Bucket para Hosting Web

# Habilitar hosting web estático con página de error
aws s3 website s3://mi-landing-page \
  --index-document index.html \
  --error-document error.html

Paso 3: Configurar Política del Bucket

Crea un archivo bucket-policy.json:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::mi-landing-page/*"
    }
  ]
}

Aplica la política:

aws s3api put-bucket-policy --bucket mi-landing-page --policy file://bucket-policy.json

Paso 4: Desactivar "Block Public Access"

aws s3api put-public-access-block \
    --bucket mi-landing-page \
    --public-access-block-configuration \
    "BlockPublicAcls=false,IgnorePublicAcls=false,BlockPublicPolicy=false,RestrictPublicBuckets=false"

Paso 5: Subir los Archivos

# Subir ambos archivos:
aws s3 cp index.html s3://mi-landing-page/index.html --content-type "text/html"
aws s3 cp error.html s3://mi-landing-page/error.html --content-type "text/html"

# O subirlos en un solo comando:
aws s3 sync . s3://mi-landing-page \
  --exclude "*" \
  --include "*.html" \
  --content-type "text/html"

Paso 6: Obtener la URL

La URL de tu sitio será:

http://mi-landing-page.s3-website-[region].amazonaws.com

Por ejemplo:

http://mi-landing-page.s3-website-us-east-1.amazonaws.com

🌐 Usando la Consola de AWS (Alternativa)

Método Visual:

Accede a AWS Console → S3
Crear Bucket:
- Click en "Create bucket"
- Nombre único: mi-landing-page
- Región: Selecciona tu región
- Desmarcar "Block all public access"
- Confirmar que entiendes que el bucket será público
- Click "Create bucket"
Habilitar Static Website Hosting:
- Click en tu bucket
- Pestaña "Properties"
- Scroll hasta "Static website hosting"
- Click "Edit"
- Seleccionar "Enable"
- Index document: index.html
- Error document: error.html
- Click "Save changes"
Configurar Permisos:
- Pestaña "Permissions"
- En "Bucket policy", click "Edit"
- Pega la política JSON (ver arriba, reemplazando el nombre del bucket)
- Click "Save changes"
Subir Archivos:
- Pestaña "Objects"
- Click "Upload"
- Arrastra index.html y error.html
- Click "Upload"
Acceder a tu Sitio:
- Vuelve a Properties → Static website hosting
- Copia la URL del "Bucket website endpoint"

🎨 Paleta de Colores

--primary: #1e40af;        /* Azul principal (base) */
--primary-dark: #1e3a8a;   /* Azul oscuro */
--primary-light: #3b82f6;  /* Azul claro */
--secondary: #0ea5e9;      /* Azul cielo */
--accent: #f97316;         /* Naranja (accent/CTA) */

Filosofía de color:

🔵 Azul como color dominante → Confianza, profesionalismo, seguridad
🧡 Naranja como accent → Energía, acción, llamados a la acción (botones, precios)
El naranja se usa estratégicamente en CTAs, botones de búsqueda, y elementos interactivos

🛠️ Servicios Disponibles en la Plataforma

💻 Computadores - Reparación de PC, laptops, formateo
📱 Celulares & Tablets - Pantallas, baterías, software
📺 Televisores - Reparación, instalación Smart TV
🔌 Electrodomésticos - Lavadoras, neveras, microondas
⚡ Electricidad - Instalaciones, reparaciones
🚿 Plomería - Tuberías, grifos, instalaciones
❄️ Refrigeración - Aire acondicionado, equipos de frío
🔐 Cerrajería - Apertura, cambio de chapas

🎯 Mejoras Opcionales

Usar CloudFront para HTTPS

# Crear una distribución de CloudFront
aws cloudfront create-distribution \
    --origin-domain-name mi-landing-page.s3.amazonaws.com \
    --default-root-object index.html

Dominio Personalizado

Registra un dominio en Route 53
Crea un certificado SSL en AWS Certificate Manager
Configura CloudFront con tu dominio
Apunta tu dominio a la distribución CloudFront

📊 Optimizaciones

Compresión: Los archivos CSS y JS están minificados-ready
Caché: Configura headers de caché en S3
CDN: Usa CloudFront para mejor rendimiento global
HTTPS: Implementa CloudFront con certificado SSL

🛠️ Personalización

Cambiar Colores

Edita las variables CSS en styles.css:

:root {
    --primary: #6366f1;
    --secondary: #06b6d4;
    --accent: #f59e0b;
    /* ... */
}

Modificar Contenido

Todo el contenido está en index.html. Busca las secciones por comentarios:

<!-- Hero Section -->
<!-- Features Section -->
<!-- Pricing Section -->
<!-- Testimonials Section -->

Agregar Imágenes

Sube imágenes a S3 en una carpeta images/
Referencia en HTML: <img src="images/mi-imagen.jpg">

📱 Testing Local

Simplemente abre index.html en tu navegador, o usa un servidor local:

# Python 3
python -m http.server 8000

# Node.js (con http-server)
npx http-server

# PHP
php -S localhost:8000

Luego visita: http://localhost:8000

📈 Analytics (Opcional)

Agrega Google Analytics pegando el código de tracking antes de </head>:

<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'GA_MEASUREMENT_ID');
</script>

🔒 Seguridad

✅ Bucket configurado solo para lectura pública
✅ Sin credenciales en el código
✅ HTTPS recomendado vía CloudFront
✅ Validación de inputs en formularios (si agregas)

💡 Casos de Uso

Esta landing page es perfecta para:

✅ Practicar despliegue en AWS S3
✅ Aprender sobre hosting estático
✅ Proyectos educativos de cloud
✅ Base para proyectos reales
✅ Demos y prototipos

📚 Recursos Adicionales

🎨 Páginas Incluidas

🏠 index.html - Landing Page Principal

FixNow - Plataforma de Servicios Técnicos

Buscador destacado 🔍 Lo primero que ve el usuario es un input grande para buscar servicios
Mascota Castor 🦫 Con animación de saludo que representa trabajo y construcción
Hero section con gradientes azules animados
8 categorías de servicios (computadores, celulares, TV, electrodomésticos, electricidad, plomería, refrigeración, cerrajería)
Sección "Cómo Funciona" en 3 pasos
Beneficios y features de la plataforma
Planes de precios para técnicos
Testimonios de usuarios (clientes y técnicos)
CTA dual: "Buscar Técnico" y "Soy Técnico"
Footer completo

Estadísticas mostradas:

5,000+ Técnicos Activos
4.8★ Valoración
50K+ Servicios Realizados

❌ error.html - Página de Error 404

Diseño consistente con FixNow (colores azules)
Ilustración SVG personalizada (documento roto)
Botones para navegar (volver al inicio / página anterior)
Sugerencias útiles para el usuario
Animaciones suaves con gradientes azules
Easter egg con código Konami 🎮

¿Cómo probar la página de error?

Localmente: Abre error.html en tu navegador
En S3: Visita cualquier URL que no exista (ej: tu-bucket.s3-website.../pagina-que-no-existe)

✨ Créditos

Diseñado como proyecto educativo para prácticas de arquitectura en la nube.

¡Feliz despliegue! 🎉

Si tienes preguntas o mejoras, no dudes en experimentar y personalizar esta landing page a tu gusto.

Name		Name	Last commit message	Last commit date
.vscode		.vscode
README.md		README.md
buscar-tecnicos.html		buscar-tecnicos.html
error.html		error.html
index.html		index.html
login.html		login.html
perfil-tecnico.html		perfil-tecnico.html
solicitar-servicio.html		solicitar-servicio.html
tecnico.html		tecnico.html

Navigation Menu

Repository files navigation

FixNow Landing Page 🔧

📋 Características

🎨 Secciones Incluidas

📁 Estructura de Archivos

🚀 Despliegue en AWS S3

Paso 1: Crear un Bucket S3

Paso 2: Configurar el Bucket para Hosting Web

Paso 3: Configurar Política del Bucket

Paso 4: Desactivar "Block Public Access"

Paso 5: Subir los Archivos

Paso 6: Obtener la URL

🌐 Usando la Consola de AWS (Alternativa)

Método Visual:

🎨 Paleta de Colores

🛠️ Servicios Disponibles en la Plataforma

🎯 Mejoras Opcionales

Usar CloudFront para HTTPS

Dominio Personalizado

📊 Optimizaciones

🛠️ Personalización

Cambiar Colores

Modificar Contenido

Agregar Imágenes

📱 Testing Local

📈 Analytics (Opcional)

🔒 Seguridad

💡 Casos de Uso

📚 Recursos Adicionales

🎨 Páginas Incluidas

🏠 index.html - Landing Page Principal

❌ error.html - Página de Error 404

✨ Créditos

About

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

FixNow Landing Page 🔧

📋 Características

🎨 Secciones Incluidas

📁 Estructura de Archivos

🚀 Despliegue en AWS S3

Paso 1: Crear un Bucket S3

Paso 2: Configurar el Bucket para Hosting Web

Paso 3: Configurar Política del Bucket

Paso 4: Desactivar "Block Public Access"

Paso 5: Subir los Archivos

Paso 6: Obtener la URL

🌐 Usando la Consola de AWS (Alternativa)

Método Visual:

🎨 Paleta de Colores

🛠️ Servicios Disponibles en la Plataforma

🎯 Mejoras Opcionales

Usar CloudFront para HTTPS

Dominio Personalizado

📊 Optimizaciones

🛠️ Personalización

Cambiar Colores

Modificar Contenido

Agregar Imágenes

📱 Testing Local

📈 Analytics (Opcional)

🔒 Seguridad

💡 Casos de Uso

📚 Recursos Adicionales

🎨 Páginas Incluidas

🏠 index.html - Landing Page Principal

❌ error.html - Página de Error 404

✨ Créditos

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages