IP Checker Landing Page

Landing page promocional para la extensión de Chrome IP Checker, construida con Next.js, Tailwind CSS y Framer Motion. Desplegada como sitio estático en Azure Static Web Apps.

---

🚀 Stack Tecnológico

Tecnología	Versión	Uso
Next.js	16.x	Framework React con export estático
React	19.x	UI library
TypeScript	5.x	Tipado estático
Tailwind CSS	4.x	Estilos utilitarios
Framer Motion	12.x	Animaciones
Lenis	1.x	Smooth scroll
Azure Static Web Apps	—	Hosting y CI/CD

---

🌐 Sobre el Proyecto

IP Checker es una extensión gratuita para Chrome (y navegadores basados en Chromium) que muestra al instante:

• 🌍 Dirección IPv4 e IPv6 pública
• 🏢 ISP / Proveedor de internet
• 📍 Ciudad, región y país (con bandera)
• 📮 Código postal vía geolocalización
• 🕐 Zona horaria de la conexión actual
• 📋 Copia al portapapeles con un clic

Este repositorio contiene la landing page promocional de la extensión, no la extensión en sí.

---

✨ Características de la Landing

• Bilingüe (ES / EN): detección automática del idioma del navegador, con persistencia en localStorage y selector manual en el nav.
• Animaciones con Framer Motion: hero con line-reveal, secciones con scroll-triggered animations y glow blobs animados.
• Smooth scroll con Lenis para una experiencia de navegación fluida.
• Secciones: Hero → Proof Strip → Features → How It Works → Social Proof → FAQ → CTA → Footer.
• Mockup del popup integrado directamente en el hero, construido con JSX puro (sin imágenes externas).
• Export estático (next export) compatible con Azure Static Web Apps.

---

📁 Estructura del Proyecto

ip-checker-landing/
├── app/
│   ├── globals.css         # Estilos globales y variables CSS
│   ├── layout.tsx          # Root layout con LanguageProvider
│   └── page.tsx            # Página principal (composición de secciones)
├── components/
│   ├── Animated*.tsx       # Versiones animadas de cada sección
│   ├── Nav.tsx             # Barra de navegación con selector de idioma
│   ├── PopupMockup.tsx     # Mockup visual del popup de la extensión
│   ├── ProofStrip.tsx      # Banda de métricas de confianza
│   ├── Footer.tsx          # Pie de página
│   └── SmoothScrollProvider.tsx  # Inicialización de Lenis
├── contexts/
│   └── LanguageContext.tsx # Contexto global de idioma (ES/EN)
├── lib/
│   └── translations.ts     # Todas las cadenas de texto ES + EN
├── public/                 # Assets estáticos
├── next.config.ts          # Config Next.js (output: 'export')
├── tailwind.config.ts      # Config Tailwind
└── .github/workflows/      # CI/CD Azure Static Web Apps

---

🛠️ Instalación y Desarrollo

Requisitos

• Node.js 18+
• npm o yarn

Pasos

# Clonar el repositorio
git clone https://github.com/CreativityTech-co/ip-checker-landing.git
cd ip-checker-landing

# Instalar dependencias
npm install

# Iniciar servidor de desarrollo
npm run dev

Abre http://localhost:3000 en tu navegador.

Scripts disponibles

npm run dev      # Servidor de desarrollo con hot-reload
npm run build    # Build de producción + export estático (carpeta /out)
npm run start    # Servidor de producción (requiere build previo)
npm run lint     # Linting con ESLint

---

🌍 Internacionalización (i18n)

El sistema de idioma está implementado sin librerías externas usando React Context:

• Auto-detección: lee navigator.language al cargar y detecta si el idioma del navegador es español.
• Persistencia: guarda la preferencia en localStorage bajo la clave lang.
• Selector manual: disponible en la barra de navegación.
• Traducciones: todas las cadenas de texto se encuentran centralizadas en lib/translations.ts, con soporte para es y en.

Para agregar un nuevo idioma, extiende el tipo Lang y agrega un objeto con las mismas claves en translations.ts.

---

☁️ Deploy

El proyecto se despliega automáticamente en Azure Static Web Apps mediante GitHub Actions:

• Push a master → build y deploy automático.
• Pull Request abierto → deploy de preview.
• Pull Request cerrado → entorno de preview eliminado.

El workflow se encuentra en .github/workflows/azure-static-web-apps-wonderful-sea-0ce83e910.yml.

El build genera la carpeta /out con el sitio estático, lista para ser servida por cualquier CDN o servicio de hosting estático.

---

🔒 Privacidad

La landing page no recopila ningún dato del usuario. La extensión IP Checker tampoco almacena datos en servidores propios: los datos de IP se obtienen de una API pública y se guardan localmente en el navegador por 5 minutos.

---

👤 Autor

Creativity Tech
© 2026 Creativity Tech. Todos los derechos reservados.