Skip to content

Commit 27bb2fc

Browse files
author
Raul Mauricio Uñate Castro
committed
Version Editorial - 0.0.1-beta.1
1 parent 80a977e commit 27bb2fc

25 files changed

Lines changed: 1745 additions & 157 deletions

‎app/globals.css‎

Lines changed: 142 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
@import "tailwindcss";
2+
/* Antes de los overrides dark de la sección Leaflet para ganar en el cascade */
3+
@import "leaflet/dist/leaflet.css";
24

35
:root {
46
--background: #0d0d1a;
@@ -8,104 +10,176 @@
810
@theme inline {
911
--color-background: var(--background);
1012
--color-foreground: var(--foreground);
11-
--font-sans: var(--font-geist-sans);
13+
--font-sans: var(--font-titillium);
1214
--font-mono: var(--font-geist-mono);
1315
}
1416

17+
/* ── Paleta oficial (extraída de public/images/logo.png) ──
18+
Tailwind v4 no usa tailwind.config.ts: los tokens se declaran aquí
19+
y generan clases como bg-python-blue o text-accent-orange. */
20+
@theme {
21+
/* Marca */
22+
--color-python-blue: #306998;
23+
--color-python-blue-light: #4b8bbe;
24+
--color-python-yellow: #ffd43b;
25+
--color-python-yellow-light: #ffe873;
26+
27+
/* Acentos del mosaico del logo */
28+
--color-accent-red: #e24329;
29+
--color-accent-orange: #f58220;
30+
--color-accent-green: #2fb350;
31+
--color-accent-purple: #5c4ee5;
32+
33+
/* Neutros (modo oscuro) */
34+
--color-night: #0d0d1a;
35+
--color-night-soft: #12122a;
36+
--color-night-card: #16162e;
37+
}
38+
39+
@media (prefers-reduced-motion: no-preference) {
40+
html {
41+
scroll-behavior: smooth;
42+
}
43+
}
44+
1545
body {
1646
background: var(--background);
1747
color: var(--foreground);
18-
font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
48+
font-family: var(--font-titillium), "Segoe UI", Arial, sans-serif;
1949
}
2050

21-
/* ── Blob decorativo ──────────────────────────────────────── */
22-
.blob {
23-
position: absolute;
24-
border-radius: 50%;
25-
filter: blur(100px);
26-
opacity: 0.13;
27-
pointer-events: none;
28-
will-change: transform;
51+
::selection {
52+
background: var(--color-python-yellow);
53+
color: var(--color-night);
54+
}
55+
56+
/* ── Utilidades editoriales de marca ──────────────────── */
57+
58+
/* Esquina inferior derecha cortada: contraste angular frente al mapa orgánico */
59+
@utility cut-corner {
60+
clip-path: polygon(
61+
0 0,
62+
100% 0,
63+
100% calc(100% - 18px),
64+
calc(100% - 18px) 100%,
65+
0 100%
66+
);
67+
}
68+
69+
/* Corte diagonal inferior para portadas de eventos */
70+
@utility clip-diagonal {
71+
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 0 100%);
72+
}
73+
74+
/* Texto contorneado para marcas de agua */
75+
@utility text-stroke {
76+
-webkit-text-stroke: 1px rgb(255 255 255 / 0.1);
77+
color: transparent;
2978
}
3079

31-
.blob-blue {
32-
width: 520px;
33-
height: 520px;
34-
background: #4584b6;
35-
top: -160px;
36-
left: -160px;
37-
animation: blob-float 11s ease-in-out infinite;
80+
/* ── Animación de entrada al hacer scroll (componente Reveal) ── */
81+
.reveal {
82+
opacity: 0;
83+
transform: translateY(24px);
84+
transition:
85+
opacity 0.7s ease,
86+
transform 0.7s ease;
3887
}
3988

40-
.blob-yellow {
41-
width: 420px;
42-
height: 420px;
43-
background: #ffd43b;
44-
top: -120px;
45-
right: -120px;
46-
animation: blob-float-reverse 13s ease-in-out infinite;
89+
.reveal.is-visible {
90+
opacity: 1;
91+
transform: none;
4792
}
4893

49-
.blob-red {
50-
width: 360px;
51-
height: 360px;
52-
background: #e63329;
53-
bottom: -120px;
54-
left: 8%;
55-
animation: blob-float 15s ease-in-out infinite 2s;
94+
@media (prefers-reduced-motion: reduce) {
95+
.reveal {
96+
opacity: 1;
97+
transform: none;
98+
transition: none;
99+
}
56100
}
57101

58-
.blob-green {
59-
width: 300px;
60-
height: 300px;
61-
background: #4caf50;
62-
bottom: -80px;
63-
right: 6%;
64-
animation: blob-float-reverse 12s ease-in-out infinite 1s;
102+
/* ── Leaflet (mapa del hero) ────────────────────────── */
103+
.leaflet-container {
104+
background: var(--color-night);
105+
font-family: inherit;
65106
}
66107

67-
/* ── Animaciones de blob ──────────────────────────────────── */
68-
@keyframes blob-float {
69-
0%, 100% { transform: translateY(0px) scale(1); }
70-
50% { transform: translateY(-28px) scale(1.06); }
108+
/* Marcador cuadrado del mosaico con anillo pulsante */
109+
.map-marker {
110+
background: transparent;
111+
border: 0;
112+
}
113+
114+
.map-marker__dot {
115+
position: absolute;
116+
inset: 0;
117+
border: 2px solid var(--color-night);
118+
}
119+
120+
.map-marker__ring {
121+
position: absolute;
122+
inset: 0;
123+
opacity: 0.5;
124+
animation: marker-pulse 2s ease-out infinite;
125+
}
126+
127+
@keyframes marker-pulse {
128+
0% {
129+
transform: scale(1);
130+
opacity: 0.5;
131+
}
132+
100% {
133+
transform: scale(2.4);
134+
opacity: 0;
135+
}
136+
}
137+
138+
@media (prefers-reduced-motion: reduce) {
139+
.map-marker__ring {
140+
animation: none;
141+
opacity: 0;
142+
}
143+
}
144+
145+
/* Popup acorde al estilo editorial (anguloso, sombra dura) */
146+
.leaflet-popup-content-wrapper {
147+
background: var(--color-night);
148+
color: var(--foreground);
149+
border: 1px solid rgb(255 255 255 / 0.2);
150+
border-radius: 0;
151+
box-shadow: 8px 8px 0 0 rgb(0 0 0 / 0.45);
71152
}
72153

73-
@keyframes blob-float-reverse {
74-
0%, 100% { transform: translateY(0px) scale(1); }
75-
50% { transform: translateY(28px) scale(0.94); }
154+
.leaflet-popup-content {
155+
margin: 16px;
76156
}
77157

78-
/* ── Gradiente animado en el texto ───────────────────────── */
79-
.gradient-text {
80-
background: linear-gradient(135deg, #ffd43b 0%, #4584b6 40%, #ffd43b 80%);
81-
background-size: 200% 200%;
82-
-webkit-background-clip: text;
83-
-webkit-text-fill-color: transparent;
84-
background-clip: text;
85-
animation: gradient-shift 5s ease infinite;
158+
.leaflet-popup-content p {
159+
margin: 0;
86160
}
87161

88-
@keyframes gradient-shift {
89-
0%, 100% { background-position: 0% 50%; }
90-
50% { background-position: 100% 50%; }
162+
.leaflet-popup-tip {
163+
background: var(--color-night);
164+
border: 1px solid rgb(255 255 255 / 0.2);
165+
box-shadow: none;
91166
}
92167

93-
/* ── Glow suave en el logo ───────────────────────────────── */
94-
.logo-glow {
95-
filter: drop-shadow(0 0 32px rgba(69, 132, 182, 0.25));
96-
transition: filter 0.4s ease;
168+
.leaflet-container a.leaflet-popup-close-button {
169+
color: #a1a1aa;
97170
}
98171

99-
.logo-glow:hover {
100-
filter: drop-shadow(0 0 48px rgba(255, 212, 59, 0.3));
172+
.leaflet-container a.leaflet-popup-close-button:hover {
173+
color: #ffffff;
101174
}
102175

103-
/* ── Badge «Próximamente» ────────────────────────────────── */
104-
@keyframes badge-ring {
105-
0%, 100% { box-shadow: 0 0 0 0 rgba(255, 212, 59, 0.45); }
106-
60% { box-shadow: 0 0 0 10px rgba(255, 212, 59, 0); }
176+
/* Atribución OSM/CARTO discreta sobre fondo oscuro */
177+
.leaflet-control-attribution {
178+
background: rgb(13 13 26 / 0.85) !important;
179+
color: #71717a;
180+
font-size: 10px;
107181
}
108182

109-
.badge-glow {
110-
animation: badge-ring 2.8s ease-out infinite;
183+
.leaflet-control-attribution a {
184+
color: #a1a1aa;
111185
}

‎app/layout.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
import { Geist, Geist_Mono } from "next/font/google";
1+
import { Geist_Mono, Titillium_Web } from "next/font/google";
22
import ConsoleInit from "./ConsoleInit";
33
import "./globals.css";
44
export { metadata, viewport } from "@/lib/seo";
55

6-
const geistSans = Geist({
7-
variable: "--font-geist-sans",
6+
// 300 detalles/lead · 400 cuerpo · 600 labels · 700 botones · 900 titulares
7+
const titillium = Titillium_Web({
8+
variable: "--font-titillium",
89
subsets: ["latin"],
10+
weight: ["300", "400", "600", "700", "900"],
911
});
1012

1113
const geistMono = Geist_Mono({
@@ -21,7 +23,7 @@ export default function RootLayout({
2123
return (
2224
<html
2325
lang="es"
24-
className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
26+
className={`${titillium.variable} ${geistMono.variable} h-full antialiased`}
2527
>
2628
<body className="min-h-full flex flex-col">
2729
<ConsoleInit />

‎app/page.tsx‎

Lines changed: 17 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,89 +1,23 @@
1-
import Image from "next/image";
2-
import { asset } from "@/lib/assets";
1+
import Navbar from "@/components/layout/Navbar";
2+
import Footer from "@/components/layout/Footer";
3+
import Hero from "@/components/sections/Hero";
4+
import Communities from "@/components/sections/Communities";
5+
import Events from "@/components/sections/Events";
6+
import Sponsors from "@/components/sections/Sponsors";
7+
import Newsletter from "@/components/sections/Newsletter";
38

49
export default function Home() {
510
return (
6-
<div className="relative min-h-screen flex flex-col items-center justify-center overflow-hidden bg-[#0d0d1a]">
7-
8-
{/* ── Blobs de color decorativos ────────────────────────── */}
9-
<div className="blob blob-blue" aria-hidden="true" />
10-
<div className="blob blob-yellow" aria-hidden="true" />
11-
<div className="blob blob-red" aria-hidden="true" />
12-
<div className="blob blob-green" aria-hidden="true" />
13-
14-
{/* ── Grilla sutil de fondo ─────────────────────────────── */}
15-
<div
16-
className="absolute inset-0 opacity-[0.025]"
17-
aria-hidden="true"
18-
style={{
19-
backgroundImage:
20-
"linear-gradient(rgba(255,255,255,0.6) 1px, transparent 1px), " +
21-
"linear-gradient(90deg, rgba(255,255,255,0.6) 1px, transparent 1px)",
22-
backgroundSize: "60px 60px",
23-
}}
24-
/>
25-
26-
{/* ── Contenido principal ───────────────────────────────── */}
27-
<main className="relative z-10 flex flex-col items-center gap-8 px-6 py-16 text-center max-w-3xl mx-auto">
28-
29-
{/* Logo */}
30-
<div className="logo-glow">
31-
<Image
32-
src={asset("/images/logo.png")}
33-
alt="Python Colombia"
34-
width={480}
35-
height={148}
36-
priority
37-
className="w-56 sm:w-72 md:w-[420px] h-auto"
38-
/>
39-
</div>
40-
41-
{/* Badge «Próximamente» */}
42-
<span className="badge-glow inline-flex items-center gap-2 rounded-full border border-yellow-400/30 bg-yellow-400/10 px-5 py-2 text-xs font-bold tracking-[0.2em] uppercase text-yellow-300">
43-
<span className="h-2 w-2 rounded-full bg-yellow-400 animate-pulse" />
44-
Próximamente
45-
</span>
46-
47-
{/* Encabezado principal */}
48-
<h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-white leading-tight tracking-tight max-w-2xl">
49-
El hogar digital de la comunidad{" "}
50-
<span className="gradient-text">Python Colombia</span>{" "}
51-
se está renovando.
52-
</h1>
53-
54-
{/* Subtexto */}
55-
<p className="text-zinc-400 text-base sm:text-lg leading-relaxed max-w-lg">
56-
Estamos construyendo algo increíble para ti y toda la comunidad.
57-
Vuelve pronto y sé parte de este gran paso.
58-
</p>
59-
60-
{/* Snippet decorativo tipo código */}
61-
<div className="mt-2 w-full max-w-sm rounded-xl border border-zinc-700/50 bg-zinc-900/60 backdrop-blur-sm px-6 py-4 text-left font-mono text-sm leading-7">
62-
<span className="text-[#ffd43b]">import</span>{" "}
63-
<span className="text-[#4584b6]">python_colombia</span>
64-
<br />
65-
<br />
66-
<span className="text-[#4caf50]">community</span>{" "}
67-
<span className="text-zinc-300">=</span>{" "}
68-
<span className="text-[#4584b6]">python_colombia</span>
69-
<span className="text-zinc-300">.</span>
70-
<span className="text-zinc-200">Community</span>
71-
<span className="text-zinc-300">()</span>
72-
<br />
73-
<span className="text-zinc-500"># coming soon... 🐍</span>
74-
</div>
75-
11+
<>
12+
<Navbar />
13+
<main className="flex-1">
14+
<Hero />
15+
<Communities />
16+
<Events />
17+
<Sponsors />
18+
<Newsletter />
7619
</main>
77-
78-
{/* ── Footer ────────────────────────────────────────────── */}
79-
<footer className="relative z-10 pb-8 text-center">
80-
<p className="text-zinc-600 text-sm">
81-
© {new Date().getFullYear()} Python Colombia
82-
<span className="mx-2 text-zinc-700">·</span>
83-
Comunidad de Python en Colombia ♥
84-
</p>
85-
</footer>
86-
87-
</div>
20+
<Footer />
21+
</>
8822
);
8923
}

0 commit comments

Comments
 (0)