diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml new file mode 100644 index 0000000..1411cbd --- /dev/null +++ b/.github/workflows/deploy.yml @@ -0,0 +1,49 @@ +name: Deploy to GitHub Pages + +on: + push: + branches: [main] + workflow_dispatch: + +permissions: + contents: read + pages: write + id-token: write + +concurrency: + group: "pages" + cancel-in-progress: false + +jobs: + build: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version: "24" + cache: "npm" + + - name: Install dependencies + run: npm ci + + - name: Build + run: npm run build + + - name: Upload Pages artifact + uses: actions/upload-pages-artifact@v3 + with: + path: ./out + deploy: + needs: build + runs-on: ubuntu-latest + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + steps: + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b831ca9 --- /dev/null +++ b/.gitignore @@ -0,0 +1,42 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.* +.yarn/* +!.yarn/patches +!.yarn/plugins +!.yarn/releases +!.yarn/versions + +# testing +/coverage + +# next.js +/.next/ +/out/ +/dist/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# env files (can opt-in for committing if needed) +.env* + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 0000000..47d151a --- /dev/null +++ b/AGENTS.md @@ -0,0 +1,5 @@ +# Agent / Automation Notes + +This repository uses Next.js (App Router) and is deployed as a static export to GitHub Pages. + +Keep changes compatible with `output: "export"` and static hosting constraints (no server-only features). diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..43c994c --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1 @@ +@AGENTS.md diff --git a/README.md b/README.md index 867ed12..eb0cc04 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,36 @@ -# web -Nueva página web para la comunidad de Python Colombia +This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). + +## Getting Started + +First, run the development server: + +```bash +npm run dev +# or +yarn dev +# or +pnpm dev +# or +bun dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. + +This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! + +## Deploy on GitHub Pages + +This repository is deployed using GitHub Pages via `.github/workflows/deploy.yml`. + +The site is exported statically (`output: "export"`), and the generated files are published from the `out/` directory. diff --git a/SPEC.md b/SPEC.md new file mode 100644 index 0000000..6dc7581 --- /dev/null +++ b/SPEC.md @@ -0,0 +1,492 @@ +# Arquitectura del sitio web de Python Colombia + +## Barra superior (Header) + +``` +----------------------------------------------------------------------------------------- +Logo | Comunidades | Eventos | Noticias | Blog | Podcasts | Tienda | Iniciar sesión +----------------------------------------------------------------------------------------- +``` + +* **Logo** + + * Redirige siempre al Inicio. + +* **Tienda** + + * Botón destacado (Call To Action). + * Puede tener un icono de carrito. + +* **Iniciar sesión** + + * Si el usuario está autenticado: + + * Mi perfil + * Mis publicaciones + * Panel Administrativo (según permisos) + * Cerrar sesión + +--- + +# Inicio (Home) + +La página principal debe responder inmediatamente: + +> ¿Qué es Python Colombia y qué está pasando actualmente? + +## 1. Hero + +Un componente principal con: + +* Imagen o ilustración +* Slogan + +Ejemplo + +> La comunidad oficial de Python en Colombia. +> +> Aprende, comparte y construye con miles de desarrolladores. + +Botones: + +* Únete a la comunidad +* Próximos eventos + +--- + +## 2. Próximos eventos + +Mostrar los próximos eventos. + +Información: + +* Ciudad +* Fecha +* Lugar +* Cupos +* Botón "Ver evento" + +--- + +## 3. Comunidades + +Mapa de Colombia o tarjetas por ciudad. + +Ejemplo + +``` +Bogotá +450 miembros + +Medellín +280 miembros + +Cali +180 miembros + +Barranquilla +95 miembros +``` + +Cada comunidad tendrá: + +* Descripción +* Organizadores +* Próximos eventos +* Miembros +* Redes sociales + +--- + +## 4. Historia + +Una sección sobre: + +* Nacimiento de Python Colombia +* Objetivos +* Misión +* Organización +* Cómo participar + +--- + +## 5. Newsletter + +Formulario simple + +``` +Nombre + +Correo + +[Suscribirme] +``` + +Explicar: + +* Noticias +* Eventos +* Convocatorias +* Podcast +* Blogs destacados + +--- + +## 6. Últimas noticias + +Mostrar las últimas publicaciones. + +Cada tarjeta: + +* Imagen +* Categoría +* Fecha +* Autor +* Resumen +* Leer más + +--- + +## 7. Blogs destacados + +Últimos artículos escritos por la comunidad. + +Mostrar: + +* Autor +* Tiempo de lectura +* Etiquetas +* Likes +* Comentarios + +--- + +## 8. Últimos podcasts + +Tarjetas con: + +* Invitado +* Duración +* Plataformas (Spotify, YouTube, etc.) +* Escuchar + +--- + +## 9. Patrocinadores + +Empresas que apoyan la comunidad. + +Ejemplo: + +* Microsoft +* JetBrains +* PyCharm +* AWS +* Google Cloud + +--- + +## 10. Footer + +* Acerca de +* Código de conducta +* Contacto +* GitHub +* Discord +* LinkedIn +* YouTube +* Política de privacidad + +--- + +# Comunidades + +Listado de comunidades por ciudad. + +Cada comunidad tendrá: + +* Banner +* Descripción +* Organizadores +* Número de miembros +* Próximos eventos +* Historial de eventos +* Fotos +* Patrocinadores locales + +--- + +# Eventos + +Filtros: + +* Ciudad +* Fecha +* Tipo +* Virtual +* Presencial + +Cada evento tendrá: + +* Agenda +* Speakers +* Patrocinadores +* Registro +* Materiales +* Fotografías +* Grabaciones + +Separar: + +* Próximos eventos +* Eventos pasados + +--- + +# Noticias + +Administradas por la célula de Newsletter. + +Cada noticia incluye: + +* Autor +* Fecha +* Categoría +* Imagen +* Contenido +* Comentarios (opcional) + +--- + +# Blog + +Contenido generado por la comunidad. + +Si el usuario inicia sesión: + +``` +[ Publicar artículo ] +``` + +Flujo + +``` +Borrador + ↓ +En revisión + ↓ +Aprobado + ↓ +Publicado +``` + +Características: + +* Markdown +* Resaltado de código +* Imágenes +* Etiquetas +* Series de artículos +* Perfil del autor + +--- + +# Podcasts + +Administrados por la célula de Podcast. + +Cada episodio: + +* Invitados +* Resumen +* Recursos +* Plataformas +* Video +* Audio + +--- + +# Tienda + +Productos oficiales. + +Categorías + +* Camisetas +* Hoodies +* Gorras +* Mugs +* Stickers +* Botellas +* Cuadernos +* Mouse pads + +Cada producto: + +* Variantes +* Tallas +* Inventario +* Precio +* Galería + +--- + +# Autenticación + +Registro mediante: + +* GitHub +* Google +* Microsoft +* Correo electrónico + +Al crear la cuenta: + +``` +Pendiente de aprobación +``` + +Un moderador aprueba el acceso. + +Roles posibles: + +* Usuario +* Autor +* Moderador +* Administrador +* Super Administrador + +--- + +# Panel Administrativo + +## Dashboard + +* Usuarios registrados +* Suscriptores al newsletter +* Próximos eventos +* Publicaciones pendientes +* Estadísticas del sitio + +--- + +## Newsletter + +* CRUD de suscriptores +* Importar/Exportar +* Segmentación +* Historial de campañas + +--- + +## Comunidades + +CRUD de: + +* Ciudades +* Organizadores +* Redes sociales +* Información +* Logos + +--- + +## Eventos + +CRUD completo. + +Además: + +* Registro de asistentes +* Speakers +* Agenda +* Patrocinadores +* Fotografías + +--- + +## Noticias + +CRUD completo. + +Incluye: + +* Programar publicación +* Categorías +* Destacadas + +--- + +## Blogs + +Flujo editorial completo. + +Estados: + +* Borrador +* En revisión +* Requiere cambios +* Aprobado +* Publicado +* Archivado + +--- + +## Podcasts + +CRUD de episodios. + +Incluye: + +* Plataformas +* Invitados +* Recursos +* Transcripción + +--- + +## Tienda + +* Productos +* Categorías +* Inventario +* Pedidos +* Descuentos +* Cupones + +--- + +## Usuarios + +Gestión de: + +* Usuarios +* Roles +* Permisos +* Solicitudes de acceso +* Suspensiones + +--- + +## Configuración + +* Redes sociales +* Logos +* Banners +* SEO +* Analytics +* Integraciones (YouTube, Spotify, GitHub, Mailchimp/Brevo, etc.) + +## Funcionalidades adicionales recomendadas + +Para convertir el sitio en el punto central de la comunidad, incluiría además: + +* **Calendario global** con todos los eventos de Python Colombia. +* **Directorio de speakers**, donde los miembros puedan ofrecer charlas y talleres. +* **Directorio de empresas patrocinadoras** y organizaciones aliadas. +* **Página de voluntariado**, para unirse a células de trabajo (Newsletter, Podcast, Eventos, Diseño, Web, etc.). +* **Sistema de perfiles públicos**, donde cada miembro pueda mostrar su biografía, ciudad, redes sociales y publicaciones. +* **Página de recursos**, con enlaces a documentación, tutoriales, grabaciones de eventos y material de aprendizaje. +* **Galería multimedia** con fotografías y videos de eventos anteriores. +* **SEO optimizado**, con URLs amigables (`/comunidades/bogota`, `/eventos/pyday-medellin-2026`, `/blog/introduccion-a-fastapi`) y metadatos para compartir en redes sociales. +* **Buscador global**, capaz de encontrar comunidades, eventos, noticias, blogs, podcasts y miembros desde una única barra de búsqueda. diff --git a/app/favicon.ico b/app/favicon.ico new file mode 100644 index 0000000..ddc37d9 Binary files /dev/null and b/app/favicon.ico differ diff --git a/app/globals.css b/app/globals.css new file mode 100644 index 0000000..3ed8004 --- /dev/null +++ b/app/globals.css @@ -0,0 +1,111 @@ +@import "tailwindcss"; + +:root { + --background: #0d0d1a; + --foreground: #f4f4f5; +} + +@theme inline { + --color-background: var(--background); + --color-foreground: var(--foreground); + --font-sans: var(--font-geist-sans); + --font-mono: var(--font-geist-mono); +} + +body { + background: var(--background); + color: var(--foreground); + font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif; +} + +/* ── Blob decorativo ──────────────────────────────────────── */ +.blob { + position: absolute; + border-radius: 50%; + filter: blur(100px); + opacity: 0.13; + pointer-events: none; + will-change: transform; +} + +.blob-blue { + width: 520px; + height: 520px; + background: #4584b6; + top: -160px; + left: -160px; + animation: blob-float 11s ease-in-out infinite; +} + +.blob-yellow { + width: 420px; + height: 420px; + background: #ffd43b; + top: -120px; + right: -120px; + animation: blob-float-reverse 13s ease-in-out infinite; +} + +.blob-red { + width: 360px; + height: 360px; + background: #e63329; + bottom: -120px; + left: 8%; + animation: blob-float 15s ease-in-out infinite 2s; +} + +.blob-green { + width: 300px; + height: 300px; + background: #4caf50; + bottom: -80px; + right: 6%; + animation: blob-float-reverse 12s ease-in-out infinite 1s; +} + +/* ── Animaciones de blob ──────────────────────────────────── */ +@keyframes blob-float { + 0%, 100% { transform: translateY(0px) scale(1); } + 50% { transform: translateY(-28px) scale(1.06); } +} + +@keyframes blob-float-reverse { + 0%, 100% { transform: translateY(0px) scale(1); } + 50% { transform: translateY(28px) scale(0.94); } +} + +/* ── Gradiente animado en el texto ───────────────────────── */ +.gradient-text { + background: linear-gradient(135deg, #ffd43b 0%, #4584b6 40%, #ffd43b 80%); + background-size: 200% 200%; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + animation: gradient-shift 5s ease infinite; +} + +@keyframes gradient-shift { + 0%, 100% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } +} + +/* ── Glow suave en el logo ───────────────────────────────── */ +.logo-glow { + filter: drop-shadow(0 0 32px rgba(69, 132, 182, 0.25)); + transition: filter 0.4s ease; +} + +.logo-glow:hover { + filter: drop-shadow(0 0 48px rgba(255, 212, 59, 0.3)); +} + +/* ── Badge «Próximamente» ────────────────────────────────── */ +@keyframes badge-ring { + 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 212, 59, 0.45); } + 60% { box-shadow: 0 0 0 10px rgba(255, 212, 59, 0); } +} + +.badge-glow { + animation: badge-ring 2.8s ease-out infinite; +} diff --git a/app/layout.tsx b/app/layout.tsx new file mode 100644 index 0000000..21ef887 --- /dev/null +++ b/app/layout.tsx @@ -0,0 +1,33 @@ +import type { Metadata } from "next"; +import { Geist, Geist_Mono } from "next/font/google"; +import "./globals.css"; + +const geistSans = Geist({ + variable: "--font-geist-sans", + subsets: ["latin"], +}); + +const geistMono = Geist_Mono({ + variable: "--font-geist-mono", + subsets: ["latin"], +}); + +export const metadata: Metadata = { + title: "Python Colombia · Próximamente", + description: "Sitio web de la comunidad de Python Colombia. Una nueva plataforma está en camino.", +}; + +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( + + {children} + + ); +} diff --git a/app/page.tsx b/app/page.tsx new file mode 100644 index 0000000..1bb26c7 --- /dev/null +++ b/app/page.tsx @@ -0,0 +1,88 @@ +import Image from "next/image"; + +export default function Home() { + return ( +
+ + {/* ── Blobs de color decorativos ────────────────────────── */} +