Compare commits
12 commits
Author | SHA1 | Date | |
---|---|---|---|
Cat /dev/Nulo | 94108bdf44 | ||
Cat /dev/Nulo | 7cef19205e | ||
Cat /dev/Nulo | 5d99d6b8b0 | ||
Cat /dev/Nulo | f4086b9fac | ||
Cat /dev/Nulo | c9186b19d7 | ||
Cat /dev/Nulo | f1f1f308e7 | ||
Cat /dev/Nulo | 85cb916369 | ||
Cat /dev/Nulo | 402415f4ef | ||
Cat /dev/Nulo | a39b5db469 | ||
Cat /dev/Nulo | 7c28e98252 | ||
Cat /dev/Nulo | ae43165e45 | ||
Cat /dev/Nulo | ad4049ddd9 |
4
.gitattributes
vendored
4
.gitattributes
vendored
|
@ -1,5 +1,5 @@
|
|||
src/*.png filter=lfs diff=lfs merge=lfs -text
|
||||
src/*.jpg filter=lfs diff=lfs merge=lfs -text
|
||||
*.png filter=lfs diff=lfs merge=lfs -text
|
||||
*.jpg filter=lfs diff=lfs merge=lfs -text
|
||||
*.woff filter=lfs diff=lfs merge=lfs -text
|
||||
*.woff2 filter=lfs diff=lfs merge=lfs -text
|
||||
*.webp filter=lfs diff=lfs merge=lfs -text
|
||||
|
|
|
@ -12,10 +12,11 @@ module.exports = function (eleventyConfig) {
|
|||
const from = "src/tailwind.css";
|
||||
return await postcss.process(await readFile(from, "utf-8"), { from });
|
||||
});
|
||||
eleventyConfig.addPassthroughCopy("src/**.png");
|
||||
eleventyConfig.addPassthroughCopy("src/**/*.png");
|
||||
eleventyConfig.addPassthroughCopy("src/**/*.webp");
|
||||
eleventyConfig.addPassthroughCopy("src/**/*.woff");
|
||||
eleventyConfig.addPassthroughCopy("src/**/*.woff2");
|
||||
eleventyConfig.addPassthroughCopy("src/assets/img/**/*.svg");
|
||||
|
||||
eleventyConfig.addExtension(["11ty.jsx", "11ty.ts", "11ty.tsx"], {
|
||||
key: "11ty.js",
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
module.exports = {
|
||||
plugins: [require('prettier-plugin-tailwindcss')],
|
||||
}
|
||||
printWidth: 120,
|
||||
plugins: [require("prettier-plugin-tailwindcss")],
|
||||
};
|
||||
|
|
|
@ -1,22 +1,26 @@
|
|||
[
|
||||
{
|
||||
"content": "¿Querés hackear el futuro?",
|
||||
"buttonText": "Doná",
|
||||
"buttonUrl": "// TODO:"
|
||||
},
|
||||
{
|
||||
"content": "¿Querés transformar la educación de tu municipio?",
|
||||
"buttonText": "Contactanos",
|
||||
"buttonUrl": "// TODO:"
|
||||
"content": "¿Sos docente y querés capacitarte?",
|
||||
"buttonText": "Postula a una beca",
|
||||
"//": "TODO: URL",
|
||||
"buttonUrl": "javascript:alert('Todavía no terminamos el sitio, ¡esperanos!')"
|
||||
},
|
||||
{
|
||||
"content": "¿Querés acelerar la transformación digital de tu escuela?",
|
||||
"buttonText": "Escribinos",
|
||||
"buttonUrl": "// TODO:"
|
||||
"//": "TODO: URL",
|
||||
"buttonUrl": "javascript:alert('Todavía no terminamos el sitio, ¡esperanos!')"
|
||||
},
|
||||
{
|
||||
"content": "¿Sos docente y querés capacitarte?",
|
||||
"buttonText": "Ingresá",
|
||||
"buttonUrl": "// TODO:"
|
||||
"content": "¿Querés transformar la educación de tu municipio?",
|
||||
"buttonText": "Contactanos",
|
||||
"//": "TODO: URL",
|
||||
"buttonUrl": "javascript:alert('Todavía no terminamos el sitio, ¡esperanos!')"
|
||||
},
|
||||
{
|
||||
"content": "¿Querés hackear el futuro?",
|
||||
"buttonText": "Doná",
|
||||
"//": "TODO: URL",
|
||||
"buttonUrl": "javascript:alert('Todavía no terminamos el sitio, ¡esperanos!')"
|
||||
}
|
||||
]
|
||||
|
|
|
@ -1,22 +1,22 @@
|
|||
[
|
||||
{
|
||||
"número": "01_",
|
||||
"título": "Alfabetizaciones fusionadas",
|
||||
"content": "La función principal de la escuela es el aprendizaje de los saberes fundamentales que nos hacen humanos: Leer y escribir textos, el mundo, los números... los algoritmos. Necesitamos nuevas respuestas para que las escuelas sigan siendo escuela. El sentido pedagógico de nuestra propuesta: alfabetizaciones en plural."
|
||||
"título": "Alfadatizar! Alfabetizaciones fusionadas",
|
||||
"content": "Aprender a leer, aprender a escribir, en este tiempo de IA, es aprender a leer algoritmos a través de las palabras, aprender a escribir textos para que se conviertan en datos.. en papel, en pantallas. El lenguaje ya no funciona en singular. Se trata de alfabetizaciones en plural."
|
||||
},
|
||||
{
|
||||
"número": "02_",
|
||||
"título": "Aprendizajes híbridos",
|
||||
"content": "La pandemia cambió para siempre la sociedad, la economía y la educación. Teletrabajo, home banking, comercio y pagos electrónicos, consumos culturales, lecturas y escrituras de discursos híbridos. La equidad educativa será híbrida o no será."
|
||||
"content": "La equidad educativa será híbrida o no será. La pandemia cambió para siempre la sociedad, la cultura y la democracia. Teletrabajo, home banking, comercio y pagos electrónicos. Demos lugar a nuevos aprendizajes: Artes electrónicas, ciudadanía digital, lectoescrituras anfibias, ciencias datificadas, humanidades digitales."
|
||||
},
|
||||
{
|
||||
"número": "03_",
|
||||
"título": "Orientaciones computacionales",
|
||||
"content": "Oficios digitales, Programación, Cultura Creativa (Maker) & preparación para el trabajo. Imaginar futuros sociodigitales inclusivos. Acceso equitativo a las nuevas culturas del trabajo."
|
||||
"título": "Secundarias orientadas",
|
||||
"content": "Cultura del hacer (maker), saberes digitales aplicados, creatividad, para trabajar y emprender en proyectos personales o sociales. Imaginar futuros sociodigitales inclusivos. Empoderar saberes tecnosociales populares. Rediseñar orientaciones para dar acceso equitativo a las nuevas culturas del trabajo."
|
||||
},
|
||||
{
|
||||
"número": "04_",
|
||||
"título": "Tecnopedagogía",
|
||||
"content": "Equipos directivos se apropian y co-diseñan el proyecto. Sentido educativo de proyectos escolares tecnológicamente sustentables. Autonomía de la Escuela en el mundo de los datos. Espacios de aprendizaje fexibles. Ecosistemas EdTech accesibles en contextos vulnerables"
|
||||
"content": "Promover los saberes tecnopedagógicos de los equipos directivos docentes que se apropian y co-diseñan su proyecto educativo. Darle sentido a proyectos escolares tecnológicamente sustentables. Una Escuela con autonomía en el mundo de los datos. Repensar espacios de aprendizaje flexibles que habitan aulas físicas y virtuales, que promuevan aprendizajes personales y colaborativos. Construirmos plataformas EdTech accesibles en contextos vulnerables."
|
||||
}
|
||||
]
|
||||
|
|
BIN
src/assets/img/alianzas/agd.png
(Stored with Git LFS)
Normal file
BIN
src/assets/img/alianzas/agd.png
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
src/assets/img/alianzas/diocesis de san isidro.png
(Stored with Git LFS)
Normal file
BIN
src/assets/img/alianzas/diocesis de san isidro.png
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
src/assets/img/alianzas/edpuzzle.png
(Stored with Git LFS)
Normal file
BIN
src/assets/img/alianzas/edpuzzle.png
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
src/assets/img/alianzas/fdcsa.png
(Stored with Git LFS)
Normal file
BIN
src/assets/img/alianzas/fdcsa.png
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
src/assets/img/alianzas/fe y alegria.png
(Stored with Git LFS)
Normal file
BIN
src/assets/img/alianzas/fe y alegria.png
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
src/assets/img/alianzas/fidu.png
(Stored with Git LFS)
Normal file
BIN
src/assets/img/alianzas/fidu.png
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
src/assets/img/alianzas/finnegans.png
(Stored with Git LFS)
Normal file
BIN
src/assets/img/alianzas/finnegans.png
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
src/assets/img/alianzas/globant.png
(Stored with Git LFS)
Normal file
BIN
src/assets/img/alianzas/globant.png
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
src/assets/img/alianzas/jesuitas.png
(Stored with Git LFS)
Normal file
BIN
src/assets/img/alianzas/jesuitas.png
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
src/assets/img/alianzas/legamaster.png
(Stored with Git LFS)
Normal file
BIN
src/assets/img/alianzas/legamaster.png
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
src/assets/img/alianzas/mercadolibre.png
(Stored with Git LFS)
Normal file
BIN
src/assets/img/alianzas/mercadolibre.png
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
src/assets/img/alianzas/mercadolibre2.webp
(Stored with Git LFS)
Normal file
BIN
src/assets/img/alianzas/mercadolibre2.webp
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
src/assets/img/alianzas/schoology-t.webp
(Stored with Git LFS)
Normal file
BIN
src/assets/img/alianzas/schoology-t.webp
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
src/assets/img/alianzas/schoology.png
(Stored with Git LFS)
Normal file
BIN
src/assets/img/alianzas/schoology.png
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
src/assets/img/alianzas/udesa.webp
(Stored with Git LFS)
Normal file
BIN
src/assets/img/alianzas/udesa.webp
(Stored with Git LFS)
Normal file
Binary file not shown.
BIN
src/assets/img/alianzas/udesa4.webp
(Stored with Git LFS)
Normal file
BIN
src/assets/img/alianzas/udesa4.webp
(Stored with Git LFS)
Normal file
Binary file not shown.
1
src/assets/img/favicon.svg
Normal file
1
src/assets/img/favicon.svg
Normal file
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="394.241" height="396.94" viewBox="0 0 104.31 105.024"><g style="stroke:#fd5e37;stroke-width:14.734;stroke-dasharray:none;stroke-opacity:1"><path d="M0 0h-294.18v-294.705H0M-1.494 7.389l.11-309.461" style="fill:none;stroke:#fd5e37;stroke-width:14.734;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="matrix(.33935 0 0 -.33935 102.324 2.507)"/></g><g style="stroke:#fd5e37;stroke-width:14.734;stroke-dasharray:none;stroke-opacity:1"><path d="M0 0v97.898h97.898V0" style="fill:none;stroke:#fd5e37;stroke-width:14.734;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="matrix(.33935 0 0 -.33935 35.865 102.499)"/></g><g style="stroke:#fd5e37;stroke-width:14.734;stroke-dasharray:none;stroke-opacity:1"><path d="M0 0v148.418" style="fill:none;stroke:#fd5e37;stroke-width:14.734;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="matrix(.33935 0 0 -.33935 85.418 102.499)"/></g><g style="stroke:#fd5e37;stroke-width:14.734;stroke-dasharray:none;stroke-opacity:1"><path d="M0 0v-148.418" style="fill:none;stroke:#fd5e37;stroke-width:14.734;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="matrix(.33935 0 0 -.33935 19.458 52.133)"/></g><g style="stroke:#fd5e37;stroke-width:14.734;stroke-dasharray:none;stroke-opacity:1"><path d="M0 0v-294.381" style="fill:none;stroke:#fd5e37;stroke-width:14.734;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="matrix(.33935 0 0 -.33935 52.476 2.6)"/></g><g style="stroke:#fd5e37;stroke-width:14.734;stroke-dasharray:none;stroke-opacity:1"><path d="m-2.098-4.472-97.898 74.02-97.898-74.02Z" style="fill:none;stroke:#fd5e37;stroke-width:14.734;stroke-linecap:butt;stroke-linejoin:bevel;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="matrix(.33935 0 0 -.33935 85.631 52.583)"/></g><g style="stroke:#fd5e37;stroke-width:14.734;stroke-dasharray:none;stroke-opacity:1"><path d="M0 0h294.18" style="fill:none;stroke:#fd5e37;stroke-width:14.734;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="matrix(.33935 0 0 -.33935 2.495 27.465)"/></g><g style="stroke:#fd5e37;stroke-width:14.734;stroke-dasharray:none;stroke-opacity:1"><path d="M0 0v-40.72h-97.898" style="fill:none;stroke:#fd5e37;stroke-width:14.734;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="matrix(.33935 0 0 -.33935 85.631 2.507)"/></g></svg>
|
After Width: | Height: | Size: 2.7 KiB |
BIN
src/assets/img/screenshot.png
(Stored with Git LFS)
Normal file
BIN
src/assets/img/screenshot.png
(Stored with Git LFS)
Normal file
Binary file not shown.
|
@ -10,12 +10,7 @@ async function loadSvg(path) {
|
|||
return (props) => {
|
||||
let s = f;
|
||||
if (props.class) s = f.replace("<svg", `<svg class="${props.class}"`);
|
||||
return (
|
||||
<div
|
||||
class={props.containerClass}
|
||||
dangerouslySetInnerHTML={{ __html: s }}
|
||||
></div>
|
||||
);
|
||||
return <div class={props.containerClass} dangerouslySetInnerHTML={{ __html: s }}></div>;
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -33,30 +28,42 @@ export async function render(data) {
|
|||
const IconosLanding = await loadSvg("src/assets/iconos landing.svg");
|
||||
const css = await tailwind();
|
||||
|
||||
const CuadradoAlfabetizaciones = await loadSvg(
|
||||
"src/assets/cuadrados/alfabetizaciones.svg"
|
||||
);
|
||||
const CuadradoCaraDeLapiz = await loadSvg(
|
||||
"src/assets/cuadrados/cara de lapiz.svg"
|
||||
);
|
||||
const CuadradoAlfabetizaciones = await loadSvg("src/assets/cuadrados/alfabetizaciones.svg");
|
||||
const CuadradoCaraDeLapiz = await loadSvg("src/assets/cuadrados/cara de lapiz.svg");
|
||||
const CuadradoDatos = await loadSvg("src/assets/cuadrados/datos.svg");
|
||||
const CuadradoEscuelas = await loadSvg("src/assets/cuadrados/escuelas.svg");
|
||||
|
||||
const meta = {
|
||||
title: "Alfadatizar",
|
||||
url: "https://staging.alfadatiz.ar/",
|
||||
description:
|
||||
"Digitalizamos escuelas de contextos vulnerables con un modelo sustentable basado en el liderazgo directivo.",
|
||||
};
|
||||
|
||||
return (
|
||||
"<!doctype html>" +
|
||||
(
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"
|
||||
/>
|
||||
{/* TODO: SEO */}
|
||||
<title>Alfadatizar</title>
|
||||
<meta
|
||||
name="description"
|
||||
content="Alfadatizar alfadatiza alfadatizando."
|
||||
/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover" />
|
||||
|
||||
<title>{meta.title}</title>
|
||||
<meta name="description" content={meta.description} />
|
||||
<link rel="icon" href={`${meta.url}assets/img/favicon.svg`} />
|
||||
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content={meta.url} />
|
||||
<meta property="og:title" content={meta.title} />
|
||||
<meta property="og:description" content={meta.description} />
|
||||
<meta property="og:image" content={`${meta.url}assets/img/screenshot.png`} />
|
||||
|
||||
<meta property="twitter:card" content="summary_large_image" />
|
||||
<meta property="twitter:url" content={meta.url} />
|
||||
<meta property="twitter:title" content={meta.title} />
|
||||
<meta property="twitter:description" content={meta.description} />
|
||||
<meta property="twitter:image" content={`${meta.url}assets/img/screenshot.png`} />
|
||||
|
||||
<style dangerouslySetInnerHTML={{ __html: css }}></style>
|
||||
</head>
|
||||
<body class="flex flex-col font-sans">
|
||||
|
@ -66,13 +73,10 @@ export async function render(data) {
|
|||
</nav>
|
||||
<section class="grid flex-1 grid-cols-1 md:grid-cols-2">
|
||||
<div class="flex min-h-[40vh] items-center justify-center bg-naranja p-[15%]">
|
||||
<LogoGrande
|
||||
containerClass="flex-1 min-w-[25vw]"
|
||||
class="w-100"
|
||||
/>
|
||||
<LogoGrande containerClass="flex-1 min-w-[25vw]" class="w-100" />
|
||||
</div>
|
||||
<div class="flex flex-col justify-evenly bg-celeste px-[20%] py-[20%]">
|
||||
<IconosLanding class="w-3xl min-w-[20vw] md:max-w-[50%]" />
|
||||
<IconosLanding class="w-full min-w-[20vw] md:max-w-[50%]" />
|
||||
<h2 class="my-[20%] text-[5vmax] leading-none md:my-[10%] md:text-[5vmin]">
|
||||
Hackeamos
|
||||
<br />
|
||||
|
@ -82,7 +86,7 @@ export async function render(data) {
|
|||
<br />
|
||||
<strong>equitativa</strong>
|
||||
</h2>
|
||||
<Wave class="mt-4 min-w-[12%] max-w-[40%] md:max-w-[20%]" />
|
||||
<Wave class="mt-4 w-full min-w-[12%] max-w-[40%] md:max-w-[20%]" />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
@ -93,20 +97,17 @@ export async function render(data) {
|
|||
</div>
|
||||
<div class="p-[10%] py-16">
|
||||
<h2 class="flex items-center justify-center gap-4 pb-8 text-5xl font-bold leading-none">
|
||||
<Estrellita class="h-[1em] w-[1em] shrink-0" />{" "}
|
||||
<span class="text-center">Nuevos saberes</span>{" "}
|
||||
<Estrellita class="h-[1em] w-[1em] shrink-0" /> <span class="text-center">Nuevos saberes</span>{" "}
|
||||
<Estrellita class="h-[1em] w-[1em] shrink-0" />
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-4">
|
||||
{data.frontpageNuevosSaberes.map(
|
||||
({ número, título, content }) => (
|
||||
<div class="flex-1 border-l border-current px-6 py-6">
|
||||
<h3 class="pb-4 text-2xl italic">{número}</h3>
|
||||
<h3 class="pb-4 text-2xl font-bold">{título}</h3>
|
||||
<p>{content}</p>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
{data.frontpageNuevosSaberes.map(({ número, título, content }) => (
|
||||
<div class="flex-1 border-l border-current px-6 py-6">
|
||||
<h3 class="pb-4 text-2xl italic">{número}</h3>
|
||||
<h3 class="pb-4 text-2xl font-bold">{título}</h3>
|
||||
<p>{content}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div class="mt-16 flex items-center justify-between">
|
||||
<Circulo class="h-6" />
|
||||
|
@ -135,56 +136,48 @@ export async function render(data) {
|
|||
/>
|
||||
</div>
|
||||
<div class="flex items-center gap-4">
|
||||
<Wave
|
||||
containerClass="mx-8 shrink-[2] max-w-[10vw]"
|
||||
class="w-full"
|
||||
/>
|
||||
<Wave containerClass="mx-8 w-full shrink-[2] max-w-[10vw]" class="w-full" />
|
||||
<img
|
||||
class="mx-auto aspect-[1.94] w-8/12 flex-auto object-contain"
|
||||
src="assets/img/imagen_celeste.webp"
|
||||
alt="dos mujeres riendose mirando una tablet"
|
||||
loading="lazy"
|
||||
/>
|
||||
<Wave
|
||||
containerClass="mx-8 shrink-[2] max-w-[10vw]"
|
||||
class="w-full"
|
||||
/>
|
||||
<Wave containerClass="mx-8 w-full shrink-[2] max-w-[10vw]" class="w-full" />
|
||||
</div>
|
||||
</div>
|
||||
<VinculosPuntos class="m-16 mx-auto h-16" />
|
||||
</section>
|
||||
<section class="flex place-content-center bg-blanco">
|
||||
<div class="grid grid-cols-1 place-content-center xl:grid-cols-2">
|
||||
{Object.entries(data.frontpageCuadrados).map(
|
||||
([color, { título, content }]) => {
|
||||
// ¿por qué así en vez de `bg-${color}`? para que lo detecte tailwind.
|
||||
const classes = {
|
||||
celeste: "bg-celeste",
|
||||
amarillo: "bg-amarillo lg:order-last xl:order-none",
|
||||
naranja: "bg-naranja xl:order-last",
|
||||
violeta: "bg-violeta lg:order-last",
|
||||
};
|
||||
const iconos = {
|
||||
celeste: <CuadradoAlfabetizaciones class="w-32" />,
|
||||
amarillo: <CuadradoCaraDeLapiz class="w-32" />,
|
||||
naranja: <CuadradoDatos class="w-32" />,
|
||||
violeta: <CuadradoEscuelas class="w-32" />,
|
||||
};
|
||||
return (
|
||||
<div class="grid lg:grid-cols-2">
|
||||
<div
|
||||
class={`aspect-square h-auto w-full max-w-[24rem] ${classes[color]} flex items-center justify-center`}
|
||||
>
|
||||
{iconos[color]}
|
||||
</div>
|
||||
<div class="h-auto w-full max-w-[24rem] overflow-y-auto break-words p-8 lg:aspect-square">
|
||||
<h2 class="mb-4 text-4xl font-bold">{título}</h2>
|
||||
<p class="text-2xl leading-6">{content}</p>
|
||||
</div>
|
||||
{Object.entries(data.frontpageCuadrados).map(([color, { título, content }]) => {
|
||||
// ¿por qué así en vez de `bg-${color}`? para que lo detecte tailwind.
|
||||
const classes = {
|
||||
celeste: "bg-celeste",
|
||||
amarillo: "bg-amarillo lg:order-last xl:order-none",
|
||||
naranja: "bg-naranja xl:order-last",
|
||||
violeta: "bg-violeta lg:order-last",
|
||||
};
|
||||
const iconos = {
|
||||
celeste: <CuadradoAlfabetizaciones class="w-32" />,
|
||||
amarillo: <CuadradoCaraDeLapiz class="w-32" />,
|
||||
naranja: <CuadradoDatos class="w-32" />,
|
||||
violeta: <CuadradoEscuelas class="w-32" />,
|
||||
};
|
||||
return (
|
||||
<div class="grid lg:grid-cols-2">
|
||||
<div
|
||||
class={`aspect-square h-auto w-full max-w-[24rem] ${classes[color]} flex items-center justify-center`}
|
||||
>
|
||||
{iconos[color]}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
)}
|
||||
<div class="h-auto w-full max-w-[24rem] overflow-y-auto break-words p-8 lg:aspect-square">
|
||||
<h2 class="mb-4 text-4xl font-bold">{título}</h2>
|
||||
<p class="text-2xl leading-6">{content}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
<section class="flex min-h-screen items-center bg-[black] text-[white]">
|
||||
|
@ -207,9 +200,8 @@ export async function render(data) {
|
|||
</div>
|
||||
<div class="flex flex-col items-start gap-4 p-4">
|
||||
<p class="text-xl leading-6">
|
||||
Formamos a los docentes para enseñar clases híbridas,
|
||||
alfabetizaciones aumentadas y pensamiento computacional
|
||||
aplicado.
|
||||
Formamos a los docentes para enseñar clases híbridas, alfabetizaciones aumentadas y pensamiento
|
||||
computacional aplicado.
|
||||
</p>
|
||||
<a
|
||||
class="border border-[white] bg-[black] p-3 text-xl font-bold uppercase leading-none"
|
||||
|
@ -222,39 +214,86 @@ export async function render(data) {
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="grid w-full grid-cols-2 justify-center gap-[1px] gap-y-6 bg-amarillo px-[10%] py-12 md:grid-cols-4">
|
||||
{data.frontpageFooterButtons.map(
|
||||
({ content, buttonText, buttonUrl }) => (
|
||||
<div class="flex flex-col justify-end">
|
||||
<section class="-mb-6 grid w-full grid-flow-col-dense grid-cols-2 grid-rows-[repeat(4,_auto)] justify-center gap-[1px] bg-amarillo px-[10%] py-12 md:grid-cols-4 md:grid-rows-[repeat(2,_auto)]">
|
||||
{data.frontpageFooterButtons.map(({ content, buttonText, buttonUrl }) => (
|
||||
<>
|
||||
<div className="flex flex-col justify-end">
|
||||
<h2 class="px-3 pb-4 text-xl">{content}</h2>
|
||||
<a
|
||||
href={buttonUrl}
|
||||
class="px-4 py-3 font-bold outline outline-1 outline-[black]"
|
||||
>
|
||||
{buttonText}
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
<a href={buttonUrl} class="mb-6 px-4 py-3 font-bold outline outline-1 outline-[black]">
|
||||
{buttonText}
|
||||
</a>
|
||||
</>
|
||||
))}
|
||||
</section>
|
||||
<section class="grid grid-cols-1 gap-8 bg-blanco px-[10%] py-8 md:grid-cols-10">
|
||||
<div class="col-span-4 border-l border-gray-500 pl-4">
|
||||
<h2 class="py-2 text-xl font-semibold">Socios</h2>
|
||||
<div class="grid grid-cols-3 mr-16">{fillerUdesa(6)}</div>
|
||||
<div class="flex flex-col border-l border-gray-500 pl-4 md:col-span-4">
|
||||
<h2 class="py-2 text-xl font-semibold">Alianzas socioeducativas</h2>
|
||||
<div class="grid flex-1 grid-cols-2 place-content-evenly items-center gap-4">
|
||||
<a href="https://fdcsa.org.ar">
|
||||
<img
|
||||
loading="lazy"
|
||||
src="assets/img/alianzas/fdcsa.png"
|
||||
alt="Fundación por el desarrollo comunitario San Andrés"
|
||||
/>
|
||||
</a>
|
||||
<a href="https://udesa.edu.ar">
|
||||
<img loading="lazy" src="assets/img/alianzas/udesa4.webp" alt="Universidad de San Andrés" />
|
||||
</a>
|
||||
<a href="https://www.feyalegria.org/argentina/" class="grid grid-cols-2 gap-2">
|
||||
<img loading="lazy" src="assets/img/alianzas/jesuitas.png" alt="jesuitas" />
|
||||
<img loading="lazy" src="assets/img/alianzas/fe y alegria.png" alt="fe y alegria" />
|
||||
</a>
|
||||
<a href="https://www.obispado-si.org.ar/">
|
||||
<img
|
||||
loading="lazy"
|
||||
src="assets/img/alianzas/diocesis de san isidro.png"
|
||||
alt="diocesis de san isidro"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-3 border-l border-gray-500 pl-4">
|
||||
<h2 class="py-2 text-xl font-semibold">Socios etec lab</h2>
|
||||
<div class="grid grid-cols-2 mr-16">{fillerUdesa(4)}</div>
|
||||
<div class="flex flex-col border-l border-gray-500 pl-4 md:col-span-3">
|
||||
<h2 class="py-2 text-xl font-semibold">Alianzas EdTech</h2>
|
||||
<div class="grid flex-1 grid-cols-2 place-content-evenly items-center gap-4">
|
||||
<a href="https://fidu.la/#gestion-academica">
|
||||
<img loading="lazy" src="assets/img/alianzas/fidu.png" alt="fidu" />
|
||||
</a>
|
||||
<a href="https://edpuzzle.com/">
|
||||
<img loading="lazy" src="assets/img/alianzas/edpuzzle.png" alt="edpuzzle" />
|
||||
</a>
|
||||
<a href="https://tintafresca.com.ar/schoology/">
|
||||
<img loading="lazy" src="assets/img/alianzas/schoology-t.webp" alt="schoology" />
|
||||
</a>
|
||||
<a href="https://legamasterlatam.com">
|
||||
<img loading="lazy" src="assets/img/alianzas/legamaster.png" alt="legamaster" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-3 border-l border-gray-500 pl-4">
|
||||
<h2 class="py-2 text-xl font-semibold">Donantes</h2>
|
||||
<div class="grid grid-cols-2 mr-16">{fillerUdesa(4)}</div>
|
||||
<div class="flex flex-col gap-3 border-l border-gray-500 pl-4 md:col-span-3">
|
||||
{/* TODO: revisar */}
|
||||
<h2 class="py-2 text-xl font-semibold">Nos acompañan</h2>
|
||||
<div class="grid flex-1 grid-cols-2 place-content-evenly items-center gap-4">
|
||||
<a href="https://finneg.com/ar/">
|
||||
<img loading="lazy" src="assets/img/alianzas/finnegans.png" alt="Finnegans" />
|
||||
</a>
|
||||
<a href="https://www.globant.com/es">
|
||||
<img loading="lazy" src="assets/img/alianzas/globant.png" alt="Globant" />
|
||||
</a>
|
||||
<a href="https://www.mercadolibre.com.ar/">
|
||||
<img loading="lazy" src="assets/img/alianzas/mercadolibre2.webp" alt="MercadoLibre" />
|
||||
</a>
|
||||
<a href="https://www.agd.com.ar/">
|
||||
<img loading="lazy" src="assets/img/alianzas/agd.png" alt="AGD" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="flex flex-wrap items-end justify-between gap-8 bg-violeta px-[10%] py-24">
|
||||
<LogoInline class="w-full max-w-[16rem]" />
|
||||
<a class="text-xl" href="mailto:TODO@alfadatiz.ar">
|
||||
TODO@alfadatiz.ar
|
||||
{/* TODO: activar mail */}
|
||||
<a class="text-xl" href="mailto:info@alfadatiz.ar">
|
||||
info@alfadatiz.ar
|
||||
</a>
|
||||
</section>
|
||||
</body>
|
||||
|
@ -262,15 +301,3 @@ export async function render(data) {
|
|||
)
|
||||
);
|
||||
}
|
||||
|
||||
function fillerUdesa(n) {
|
||||
return Array(n)
|
||||
.fill(0)
|
||||
.map(() => (
|
||||
<img
|
||||
class="grayscale"
|
||||
src="udesa.png"
|
||||
alt="logo de la universidad de san andrés"
|
||||
/>
|
||||
));
|
||||
}
|
||||
|
|
|
@ -2,7 +2,9 @@
|
|||
"compilerOptions": {
|
||||
"target": "es2021" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
|
||||
"jsx": "react" /* Specify what JSX code is generated. */,
|
||||
"jsxFactory": "h" /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h' */,
|
||||
"jsxFactory": "h",
|
||||
/* https://github.com/developit/vhtml/issues/31 */
|
||||
"jsxFragmentFactory": "null",
|
||||
"module": "commonjs" /* Specify what module code is generated. */,
|
||||
"esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables `allowSyntheticDefaultImports` for type compatibility. */,
|
||||
"forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
|
||||
|
|
Reference in a new issue