muchos cambios

.gitattributes

@@ -1,2 +1,5 @@
 src/*.png filter=lfs diff=lfs merge=lfs -text
 src/*.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

eleventy.config.js

@@ -5,12 +5,17 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.setServerOptions({
     watch: ["src/**/*.css"],
   });
+  eleventyConfig.addWatchTarget("src/");
+  eleventyConfig.addWatchTarget("tailwind.config.js");
 
   eleventyConfig.addShortcode("tailwind", async () => {
     const from = "src/tailwind.css";
     return await postcss.process(await readFile(from, "utf-8"), { from });
   });
   eleventyConfig.addPassthroughCopy("src/**.png");
+  eleventyConfig.addPassthroughCopy("src/**/*.webp");
+  eleventyConfig.addPassthroughCopy("src/**/*.woff");
+  eleventyConfig.addPassthroughCopy("src/**/*.woff2");
 
   eleventyConfig.addExtension(["11ty.jsx", "11ty.ts", "11ty.tsx"], {
     key: "11ty.js",

package.json

@@ -12,6 +12,7 @@
     "esbuild-register": "^3.4.2",
     "postcss": "^8.4.24",
     "postcss-import": "^15.1.0",
+    "postcss-url": "^10.1.3",
     "prettier-plugin-tailwindcss": "^0.3.0",
     "tailwindcss": "^3.3.2",
     "vhtml": "^2.2.0"

pnpm-lock.yaml

@@ -1,4 +1,4 @@
-lockfileVersion: '6.1'
+lockfileVersion: '6.0'
 
 settings:
   autoInstallPeers: true
@@ -23,6 +23,9 @@ devDependencies:
   postcss-import:
     specifier: ^15.1.0
     version: 15.1.0(postcss@8.4.24)
+  postcss-url:
+    specifier: ^10.1.3
+    version: 10.1.3(postcss@8.4.24)
   prettier-plugin-tailwindcss:
     specifier: ^0.3.0
     version: 0.3.0(prettier@2.8.8)
@@ -826,6 +829,10 @@ packages:
       css-tree: 2.2.1
     dev: true
 
+  /cuint@0.2.2:
+    resolution: {integrity: sha512-d4ZVpCW31eWwCMe1YT3ur7mUDnTXbgwyzaL320DrcRT45rfjYxkt5QWLrmOJ+/UEAI2+fQgKe/fCjR8l4TpRgw==}
+    dev: true
+
   /debug@2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
     peerDependencies:
@@ -1411,6 +1418,13 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  /make-dir@3.1.0:
+    resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
+    engines: {node: '>=8'}
+    dependencies:
+      semver: 6.3.1
+    dev: true
+
   /markdown-it@13.0.1:
     resolution: {integrity: sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==}
     hasBin: true
@@ -1457,12 +1471,24 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+  /mime@2.5.2:
+    resolution: {integrity: sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==}
+    engines: {node: '>=4.0.0'}
+    hasBin: true
+    dev: true
+
   /mime@3.0.0:
     resolution: {integrity: sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==}
     engines: {node: '>=10.0.0'}
     hasBin: true
     dev: true
 
+  /minimatch@3.0.8:
+    resolution: {integrity: sha512-6FsRAQsxQ61mw+qP1ZzbL9Bc78x2p5OqNgNpnoAFLTrX8n5Kxph0CsnhmKKNXTWjXqU5L0pGPR7hYk+XWZr60Q==}
+    dependencies:
+      brace-expansion: 1.1.11
+    dev: true
+
   /minimatch@3.1.2:
     resolution: {integrity: sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==}
     dependencies:
@@ -1989,6 +2015,19 @@ packages:
       postcss-selector-parser: 6.0.13
     dev: true
 
+  /postcss-url@10.1.3(postcss@8.4.24):
+    resolution: {integrity: sha512-FUzyxfI5l2tKmXdYc6VTu3TWZsInayEKPbiyW+P6vmmIrrb4I6CGX0BFoewgYHLK+oIL5FECEK02REYRpBvUCw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      postcss: ^8.0.0
+    dependencies:
+      make-dir: 3.1.0
+      mime: 2.5.2
+      minimatch: 3.0.8
+      postcss: 8.4.24
+      xxhashjs: 0.2.2
+    dev: true
+
   /postcss-value-parser@4.2.0:
     resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==}
     dev: true
@@ -2272,6 +2311,11 @@ packages:
     resolution: {integrity: sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==}
     dev: true
 
+  /semver@6.3.1:
+    resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==}
+    hasBin: true
+    dev: true
+
   /semver@7.5.3:
     resolution: {integrity: sha512-QBlUtyVk/5EeHbi7X0fw6liDZc7BBmEaSYn01fMU1OUYbf6GPsbTtd8WmnqbI20SeycoHSeiybkE/q1Q+qlThQ==}
     engines: {node: '>=10'}
@@ -2528,6 +2572,12 @@ packages:
         optional: true
     dev: true
 
+  /xxhashjs@0.2.2:
+    resolution: {integrity: sha512-AkTuIuVTET12tpsVIQo+ZU6f/qDmKuRUcjaqR+OIvm+aCBsZ95i7UVY5WJ9TMsSaZ0DA2WxoZ4acu0sPH+OKAw==}
+    dependencies:
+      cuint: 0.2.2
+    dev: true
+
   /yallist@4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
     dev: true

src/assets/caritas felices.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 79.031 33.875"><defs><clipPath id="a" clipPathUnits="userSpaceOnUse"><path d="M0 6923.749h1920V0H0Z"/></clipPath></defs><g clip-path="url(#a)" transform="matrix(.35278 0 0 -.35278 -97.334 2036.94)"><path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2" d="M291.296 5711.6c-7.947 0-14.39 6.442-14.39 14.39 0 7.946 6.443 14.388 14.39 14.388 7.947 0 14.389-6.442 14.389-14.389 0-7.947-6.442-14.389-14.39-14.389ZM291.296 5744.223c-7.947 0-14.39 6.442-14.39 14.39 0 7.946 6.443 14.388 14.39 14.388 7.947 0 14.389-6.442 14.389-14.389 0-7.947-6.442-14.389-14.39-14.389ZM291.296 5678.978c-7.947 0-14.39 6.442-14.39 14.389 0 7.947 6.443 14.389 14.39 14.389 7.947 0 14.389-6.442 14.389-14.39 0-7.946-6.442-14.388-14.39-14.388ZM305.685 5693.366h52.577v65.936h-52.577M305.685 5725.99h111.89M484.542 5740.378c7.947 0 14.389-6.442 14.389-14.389 0-7.947-6.442-14.389-14.39-14.389-7.946 0-14.388 6.442-14.388 14.39 0 7.946 6.442 14.388 14.389 14.388ZM484.542 5707.755c7.947 0 14.389-6.442 14.389-14.389 0-7.947-6.442-14.389-14.39-14.389-7.946 0-14.388 6.442-14.388 14.39 0 7.946 6.442 14.388 14.389 14.388ZM484.542 5773.001c7.947 0 14.389-6.442 14.389-14.389 0-7.947-6.442-14.389-14.39-14.389-7.946 0-14.388 6.442-14.388 14.39 0 7.946 6.442 14.388 14.389 14.388Z"/><path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="2" d="M292.756 5732.742a6.752 6.752 0 0 0 0-13.505M292.756 5765.365a6.752 6.752 0 0 0 0-13.505M292.756 5700.12a6.752 6.752 0 0 0 0-13.506M483.081 5719.237a6.753 6.753 0 1 0 0 13.505M483.081 5686.614a6.753 6.753 0 1 0 0 13.505M483.081 5751.86a6.753 6.753 0 1 0 0 13.505M470.152 5758.612h-52.577v-65.936h52.577M470.152 5725.99h-52.577"/><path d="M287.402 5717.566a1.67 1.67 0 1 0 0 3.341 1.67 1.67 0 0 0 0-3.34M287.402 5731.071a1.67 1.67 0 1 0 0 3.341 1.67 1.67 0 0 0 0-3.34M287.402 5750.19a1.67 1.67 0 1 0 0 3.34 1.67 1.67 0 0 0 0-3.34M287.402 5763.694a1.67 1.67 0 1 0 0 3.341 1.67 1.67 0 0 0 0-3.34M287.402 5684.944a1.67 1.67 0 1 0 0 3.34 1.67 1.67 0 0 0 0-3.34M287.402 5698.449a1.67 1.67 0 1 0 0 3.34 1.67 1.67 0 0 0 0-3.34M488.435 5734.412a1.67 1.67 0 1 0 0-3.34 1.67 1.67 0 0 0 0 3.34M488.435 5720.907a1.67 1.67 0 1 0 0-3.34 1.67 1.67 0 0 0 0 3.34M488.435 5701.79a1.67 1.67 0 1 0 0-3.34 1.67 1.67 0 0 0 0 3.34M488.435 5688.284a1.67 1.67 0 1 0 0-3.34 1.67 1.67 0 0 0 0 3.34M488.435 5767.035a1.67 1.67 0 1 0 0-3.34 1.67 1.67 0 0 0 0 3.34M488.435 5753.53a1.67 1.67 0 1 0 0-3.34 1.67 1.67 0 0 0 0 3.34"/></g></svg>

src/assets/estrellita.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 23.85 23.84"><defs><clipPath id="a" clipPathUnits="userSpaceOnUse"><path d="M0 6923.75h1920V0H0Z"/></clipPath></defs><g clip-path="url(#a)" transform="matrix(.3528 0 0 -.3528 -287.3 2031.58)"><path id="b" d="M0 0c-20.98 0-33.8-12.82-33.8-33.8C-33.8-12.82-46.62 0-67.6 0c20.98 0 33.8 12.82 33.8 33.8C-33.8 12.82-20.98 0 0 0" transform="translate(882 5725.01)"/><use xlink:href="#b"/></g></svg>

src/assets/iconos landing.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 110.176 25.781"><g style="stroke:#000;stroke-opacity:1;fill:none"><g style="stroke:#000;stroke-opacity:1;fill:none"><path d="M0 0v-59.939" style="fill:none;stroke:#000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="matrix(.35278 0 0 -.35278 14.293 4.42)"/></g><g style="stroke:#000;stroke-opacity:1;fill:none"><path d="m0 0-39.807 10.865v59.939L-.3 59.94" style="fill:none;stroke:#000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="matrix(.35278 0 0 -.35278 14.398 25.426)"/></g><g style="stroke:#000;stroke-opacity:1;fill:none"><path d="m0 0 39.507 10.864v-59.939L-.158-59.939" style="fill:none;stroke:#000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="matrix(.35278 0 0 -.35278 14.293 4.28)"/></g><g style="stroke:#000;stroke-opacity:1;fill:none"><path d="m0 0 20.716-5.736" style="fill:none;stroke:#000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="matrix(.35278 0 0 -.35278 3.67 6.29)"/></g><g style="stroke:#000;stroke-opacity:1;fill:none"><path d="m0 0 20.716-5.736" style="fill:none;stroke:#000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="matrix(.35278 0 0 -.35278 3.67 10.224)"/></g><g style="stroke:#000;stroke-opacity:1;fill:none"><path d="m0 0 20.716-5.736" style="fill:none;stroke:#000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="matrix(.35278 0 0 -.35278 3.67 14.159)"/></g><g style="stroke:#000;stroke-opacity:1;fill:none"><path d="m0 0 20.716-5.736" style="fill:none;stroke:#000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="matrix(.35278 0 0 -.35278 3.67 18.094)"/></g><g style="stroke:#000;stroke-opacity:1;fill:none"><path d="m0 0 20.716 5.736" style="fill:none;stroke:#000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="matrix(.35278 0 0 -.35278 17.607 8.313)"/></g><g style="stroke:#000;stroke-opacity:1;fill:none"><path d="m0 0 20.716 5.736" style="fill:none;stroke:#000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="matrix(.35278 0 0 -.35278 17.607 12.248)"/></g><g style="stroke:#000;stroke-opacity:1;fill:none"><path d="m0 0 20.716 5.736" style="fill:none;stroke:#000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="matrix(.35278 0 0 -.35278 17.607 16.183)"/></g><g style="stroke:#000;stroke-opacity:1;fill:none"><path d="m0 0 20.716 5.736" style="fill:none;stroke:#000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="matrix(.35278 0 0 -.35278 17.607 20.118)"/></g></g><g style="fill:none;stroke:#000;stroke-opacity:1"><path d="M0 0c0-24.477-19.843-43.042-44.319-43.042-19.582 0-35.456 15.875-35.456 35.456 0 15.665 12.699 28.364 28.364 28.364 12.533 0 22.692-10.159 22.692-22.691 0-10.026-8.128-18.153-18.153-18.153-8.021 0-14.523 6.502-14.523 14.522 0 6.417 5.202 11.618 11.618 11.618 5.133 0 9.295-4.161 9.295-9.294a7.436 7.436 0 0 0-7.436-7.436 5.948 5.948 0 0 0-5.948 5.948A4.758 4.758 0 0 0-49.108.051" style="fill:none;stroke:#000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="matrix(.35278 0 0 -.35278 73.768 8.319)"/></g><path d="M176.104 43.08h17.42L175.91 54.218h17.613l-17.9 11.317h17.9" style="fill:none;stroke:#000;stroke-width:.705556;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" transform="translate(-84.565 -42.086)"/></svg>

src/assets/logo grande.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 208.62 105.02"><defs><clipPath id="a" clipPathUnits="userSpaceOnUse"><path d="M0 6923.75h1920V0H0Z"/></clipPath></defs><g clip-path="url(#a)" transform="matrix(.3528 0 0 -.3528 -34.53 2056.76)"><text xml:space="preserve" font-family="PP Fraktion Sans" font-size="89.55" font-weight="700" transform="matrix(1 0 0 -1 435.95 5732.55)"><tspan x="0 55.696991 104.23038 150.70424" y="0">ALFA</tspan><tspan x="0 56.950619 107.72263 158.22601" y="84.71">DATI</tspan><tspan x="0 52.115189 107.81218" y="169.42">ZAR</tspan></text><path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3" d="M393.56 5828.68H99.38v-294.7h294.18"/><path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3" d="M197.72 5534.02v97.9h97.9v-97.9M343.75 5534.02v148.42M149.37 5682.44v-148.42M246.67 5828.4v-294.38"/><path fill="none" stroke="#000" stroke-linejoin="bevel" stroke-miterlimit="10" stroke-width="3" d="m344.37 5681.11-97.9 74.02-97.9-74.02Z"/><path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="3" d="M99.38 5755.13h294.18M393.56 5534.02h294.18v294.66H393.56zM344.37 5828.68v-40.72h-97.9"/></g></svg>

src/assets/logo inline.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 109.18 25.8"><defs><clipPath id="a" clipPathUnits="userSpaceOnUse"><path d="M0 6923.75h1920V0H0Z"/></clipPath></defs><g clip-path="url(#a)" transform="matrix(.3528 0 0 -.3528 -240.17 2038.52)"><path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.7" d="M752.93 5706.2h-71.3v71.42h71.3z"/><path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.7" d="M705.46 5706.21v23.73h23.73v-23.73M740.85 5706.21v35.97M693.75 5742.18v-35.97M717.33 5777.56v-71.35"/><path fill="none" stroke="#000" stroke-linejoin="bevel" stroke-miterlimit="10" stroke-width="1.7" d="m741 5741.86-23.72 17.94-23.73-17.94Z"/><path fill="none" stroke="#000" stroke-miterlimit="10" stroke-width="1.7" d="M681.63 5759.8h71.3M741 5777.62v-9.87h-23.72M752.9 5706.26h236.51v53.51h-236.5"/><text xml:space="preserve" font-family="PP Fraktion Sans" font-size="33.59" font-weight="700" transform="matrix(1 0 0 -1 766.58 5720.29)"><tspan x="0 20.892296 39.097481 56.530117 77.422417 98.784958 117.82986 136.774 147.72398 167.27272 188.16502" y="0">ALFADATIZAR</tspan></text></g></svg>

src/assets/wave.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40.528 11.453"><defs><clipPath id="a" clipPathUnits="userSpaceOnUse"><path d="M0 6923.749h1920V0H0Z"/></clipPath></defs><g clip-path="url(#a)" transform="matrix(.35278 0 0 -.35278 -202.235 2019.818)"><path d="M630.707 5693.004c-4.794 0-9.146 10.129-13.557 10.387-4.923.288-10.508-9.221-14.74-8.658-5.212.693-7.842 11.358-11.623 12.387-7.02 1.91-17.521-.504-17.521 2.116 0 2.621 10.502.207 17.526 2.119 3.78 1.028 6.41 11.692 11.62 12.386 4.232.563 9.817-8.947 14.739-8.659 4.41.257 8.762 10.387 13.556 10.387 4.794 0 9.145-10.13 13.557-10.387 4.923-.288 10.508 9.222 14.74 8.658 5.212-.693 7.842-11.358 11.623-12.387 7.02-1.911 17.52.504 17.52-2.117 0-2.62-10.501-.207-17.525-2.118-3.78-1.028-6.41-11.693-11.62-12.386-4.232-.563-9.817 8.947-14.74 8.659-4.41-.258-8.762-10.387-13.555-10.387"/></g></svg>

src/assets/wobble violeta.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 677.33 75.52"><defs><clipPath id="a" clipPathUnits="userSpaceOnUse"><path d="M0 6923.75h1920V0H0Z"/></clipPath></defs><g clip-path="url(#a)" transform="matrix(.3528 0 0 -.3528 0 2062.82)"><path fill="#d5aada" d="M15.12 5633.29c52.48 0 52.48 115 104.97 115 6.37 0 11.96-1.71 16.97-4.69v.03l.38-.25.25-.15c.55-.34 1.1-.7 1.64-1.07l.2-.15a39.86 39.86 0 0 0 1.75-1.3c29.4-23.07 37.93-91.85 71.77-105.17l.11-.05c.5-.2 1.02-.37 1.54-.55l.48-.15a31.12 31.12 0 0 1 5.48-1.21l1.11-.12 1.06-.1c.65-.04 1.3-.06 1.96-.06l.29-.01c45.85.02 51.65 87.81 87.41 109.95l.13.08c.56.35 1.13.67 1.7.98l.3.16c.51.28 1.04.53 1.58.78l.46.22c.48.21.97.4 1.46.6l.66.25c.43.16.88.3 1.32.44.28.1.56.19.85.27.39.11.78.2 1.18.3.35.09.7.18 1.06.25l1.01.19c.43.07.86.15 1.3.21.27.04.55.06.82.09.52.06 1.03.11 1.56.14l.12.01c.65.04 1.3.07 1.98.07h.09c52.47 0 52.5-114.92 104.93-115 52.44.08 52.45 115 104.92 115h.11c52.38-.15 52.42-115 104.87-115 52.48 0 52.48 115 104.97 115 52.48 0 52.48-115 104.97-115 52.48 0 52.48 115 104.97 115 52.48 0 52.48-115 104.97-115s52.49 115 104.97 115c52.49 0 52.49-115 104.97-115 52.5 0 52.5 115 104.98 115 52.49 0 52.49-114.99 104.97-115 52.49.01 52.49 115 104.98 115a32.6 32.6 0 0 0 17.12-4.77v.12c35.74-21.17 41.73-107.54 85.88-110.28l.5-.01c.51-.03 1.03-.05 1.56-.05 51.54.14 52.42 111.3 102.4 114.88l.21.02.23.02c.7.04 1.42.07 2.15.07h.09c52.47 0 52.49-114.92 104.93-115a32.5 32.5 0 0 1 16.05 4.2v209.88H-.73v-210.04a32.54 32.54 0 0 1 15.85-4.03"/></g></svg>

src/fonts/pp-fraktion/stylesheet.css

@@ -0,0 +1,27 @@
+@font-face {
+    font-family: 'PP Fraktion Sans';
+    src: url('PPFraktionSans-Bold.woff2') format('woff2'),
+        url('PPFraktionSans-Bold.woff') format('woff');
+    font-weight: bold;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'PP Fraktion Sans';
+    src: url('PPFraktionSans-Light.woff2') format('woff2'),
+        url('PPFraktionSans-Light.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'PP Fraktion Sans';
+    src: url('PPFraktionSans-LightItalic.woff2') format('woff2'),
+        url('PPFraktionSans-LightItalic.woff') format('woff');
+    font-weight: 300;
+    font-style: italic;
+    font-display: swap;
+}
+

src/index.11ty.jsx

@@ -1,17 +1,43 @@
 import h from "vhtml";
+import { readFile } from "node:fs/promises";
+
+/**
+ * @param {import("node:fs").PathLike} path
+ */
+async function loadSvg(path) {
+  let f = await readFile(path, "utf-8");
+  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>
+    );
+  };
+}
 
 const postcssImport = require("postcss-import");
 const cssnano = require("cssnano");
-const { readFile } = require("fs/promises");
 const tailwindPlugin = require("tailwindcss")(require("../tailwind.config"));
 const postcss = require("postcss")([
   postcssImport(),
+  require("postcss-url")({ url: "rebase" }),
   tailwindPlugin,
   ...(process.env.ELEVENTY_ENV === "production" ? [cssnano()] : []),
 ]);
 
 export async function render(data) {
-  console.debug(data);
+  const Estrellita = await loadSvg("src/assets/estrellita.svg");
+  const Wave = await loadSvg("src/assets/wave.svg");
+  // console.debug(data);
+  const WobbleVioleta = await loadSvg("src/assets/wobble violeta.svg");
+  const CaritasFelices = await loadSvg("src/assets/caritas felices.svg");
+  const LogoInline = await loadSvg("src/assets/logo inline.svg");
+  const LogoGrande = await loadSvg("src/assets/logo grande.svg");
+  const IconosLanding = await loadSvg("src/assets/iconos landing.svg");
+  const css = await tailwind();
   //TODO: doctype
   return (
     <html lang="es">
@@ -22,36 +48,72 @@ export async function render(data) {
           content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"
         />
         <title>Alfadatizando</title>
-        <style>{await tailwind()}</style>
+        <style dangerouslySetInnerHTML={{ __html: css }}></style>
       </head>
-      <body>
+      <body class="flex flex-col font-sans">
-        <nav class="sticky top-0 w-full bg-blanco px-16 py-4">asdf</nav>
+        <nav class="sticky top-0 w-full bg-blanco px-16 py-4">
-        <section class="h-screen">
+          <LogoInline class="h-12" />
-          <div class="flex h-full">
+        </nav>
-            <div class="h-full flex-1 bg-naranja">asdf</div>
+        <section class="min-h-screen">
-            <div class="h-full flex-1 bg-celeste">asd</div>
+          <div class="grid h-full grid-cols-1 md:grid-cols-2">
+            <div class="flex h-full min-h-[40vh] items-center justify-center bg-naranja p-8">
+              <LogoGrande containerClass="flex-1 max-w-lg" class="w-100" />
+            </div>
+            <div class="flex flex-col bg-celeste px-[20%] py-[30%]">
+              <IconosLanding class="w-64 max-w-full" />
+              <h2 class="my-8 text-5xl">
+                Hackeamos
+                <br />
+                la educación
+                <br />
+                digital
+                <br />
+                <strong>equitativa</strong>
+              </h2>
+              <Wave class="mt-4 w-32" />
+            </div>
           </div>
         </section>
-        <section class="min-h-screen bg-blanco p-32">
+        <section class="min-h-screen bg-blanco">
-          <div class="mb-4 flex justify-center gap-4">
+          <WobbleVioleta />
-            <img class="aspect-[1.3] w-1/3" src="tmp_imagen_roja.png" />
+          <div class="mx-auto w-32 pt-8">
-            <img class="aspect-[1.3] w-1/3" src="tmp_imagen_violeta.png" />
+            <CaritasFelices />
           </div>
-          <img
+          <div class="p-8">
-            class="mx-auto aspect-[1.94] w-5/12 object-contain"
+            <h2 class="flex items-center justify-center gap-4 pb-8 text-5xl font-bold leading-none">
-            src="tmp_imagen_azul.png"
+              <Estrellita class="h-[1em] w-[1em] shrink-0" />{" "}
-          />
+              <span class="text-center">Nuevos saberes</span>{" "}
-        </section>
+              <Estrellita class="h-[1em] w-[1em] shrink-0" />
-        <section class="min-h-screen bg-blanco p-8">
+            </h2>
-          <h2 class="pb-8 text-center text-5xl font-bold">Nuevos saberes</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 }) => (
+              {data.frontpageNuevosSaberes.map(
+                ({ número, título, content }) => (
                   <div class="flex-1 border-l border-current px-6 py-6">
                     <h3 class="pb-4 font-mono text-2xl italic">{número}</h3>
                     <h3 class="pb-4 text-2xl font-bold">{título}</h3>
                     <p>{content}</p>
                   </div>
-            ))}
+                )
+              )}
+            </div>
+          </div>
+        </section>
+        <section class="min-h-screen bg-blanco">
+          <div class="mx-auto max-w-3xl p-4">
+            <div class="mb-4 flex justify-center gap-4 ">
+              <img
+                class="aspect-[1.3] w-1/2"
+                src="assets/img/imagen_naranja.webp"
+              />
+              <img
+                class="aspect-[1.3] w-1/2"
+                src="assets/img/imagen_violeta.webp"
+              />
+            </div>
+            <img
+              class="mx-auto aspect-[1.94] w-8/12 object-contain"
+              src="assets/img/imagen_celeste.webp"
+            />
           </div>
         </section>
         <section class="flex min-h-screen place-content-center bg-blanco">
@@ -68,9 +130,9 @@ export async function render(data) {
                 return (
                   <div class="grid lg:grid-cols-2">
                     <div
-                      class={`aspect-square h-auto w-full max-w-[24rem] overflow-y-scroll ${classes[color]}`}
+                      class={`aspect-square h-auto w-full max-w-[24rem] overflow-y-auto ${classes[color]}`}
                     ></div>
-                    <div class="aspect-square h-auto w-full max-w-[24rem] overflow-y-scroll p-8">
+                    <div class="aspect-square h-auto w-full max-w-[24rem] overflow-y-auto p-8">
                       <h2 class="mb-4 text-4xl">{título}</h2>
                       <p>{content}</p>
                     </div>
@@ -167,5 +229,6 @@ function fillerUdesa(n) {
 
 async function tailwind() {
   const from = "src/tailwind.css";
-  return await postcss.process(await readFile(from, "utf-8"), { from });
+  const css = await postcss.process(await readFile(from, "utf-8"), { from });
+  return css;
 }

src/tailwind.css

@@ -1,3 +1,5 @@
+@import "./fonts/pp-fraktion/stylesheet.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

tailwind.config.js

@@ -10,6 +10,25 @@ module.exports = {
         amarillo: "#f9af39",
         violeta: "#dda7dd",
       },
+      fontFamily: {
+        sans: [
+          "PP Fraktion Sans",
+          "ui-sans-serif",
+          "system-ui",
+          "-apple-system",
+          "BlinkMacSystemFont",
+          '"Segoe UI"',
+          "Roboto",
+          '"Helvetica Neue"',
+          "Arial",
+          '"Noto Sans"',
+          "sans-serif",
+          '"Apple Color Emoji"',
+          '"Segoe UI Emoji"',
+          '"Segoe UI Symbol"',
+          '"Noto Color Emoji"',
+        ],
+      },
     },
   },
   plugins: [],