- ID de l'analyse :
- ef97daf3-0ec4-47e7-b496-65bcca049af4Terminée
- URL soumise :
- https://astro.build/
- Fin du rapport :
Liens : 17 trouvé(s)
Liens sortants identifiés à partir de la page
| Lien | texte |
|---|---|
| https://x.com/astrodotbuild | Follow Astro on x.com (formerly Twitter) |
| https://github.com/withastro/astro | Go to Astro's GitHub repo |
| https://lookerstudio.google.com/u/0/reporting/55bc8fad-44c2-4280-aa0b-5f3f0cd3d2be/page/M6ZPC?params=%7B%22df44%22:%22include%25EE%2580%25800%25EE%2580%2580IN%25EE%2580%2580WordPress%25EE%2580%2580Next.js%25EE%2580%2580Nuxt.js%25EE%2580%2580Gatsby%25EE%2580%2580Astro%25EE%2580%2580SvelteKit%25EE%2580%2580Remix%22%7D | View the full dataset |
| https://httparchive.org/ | HTTP Archive |
| https://developer.chrome.com/docs/crux | Chrome UX Report |
| https://www.netlify.com/?utm_campaign=Astro-2024&utm_source=astro-referral | NetlifyOfficial Deployment Partner |
| https://sentry.io/welcome/?utm_medium=partner&utm_source=astro&utm_campaign=astro-homepage | SentryOfficial App Monitoring Partner |
| https://www.storyblok.com/technologies?utm_source=astro&utm_medium=sponsor&utm_campaign=DGM_BRA_ASTR_TRA&utm_content=Astro_3#astro | StoryblokOfficial CMS Partner |
| https://www.jetbrains.com/ | JetBrains |
| https://handsontable.com/ | HandsOnTable |
Variables JavaScript : 4 trouvée(s)
Les variables JavaScript globales chargées dans l'objet fenêtre d'une page sont des variables déclarées en dehors des fonctions et accessibles depuis n'importe quel endroit du code au sein du champ d'application actuel
| Nom | Type |
|---|---|
| onbeforetoggle | object |
| documentPictureInPicture | object |
| onscrollend | object |
| fathom | object |
Messages de journal de console : 0 trouvé(s)
Messages consignés dans la console web
HTML
Le corps HTML de la page en données brutes
<!DOCTYPE html><html lang="en" class="astro-gray-700 overflow-x-hidden break-words text-astro-gray-100 [color-scheme:dark] [word-break:break-word] bg-astro-dark-900" data-astro-cid-ouamjn2i=""><head><link rel="stylesheet" href="/_astro/_slug_.jL3slsUV.css">
<style>#stardust[data-astro-cid-iiwwisjq]{background:linear-gradient(270deg,#bc52ee1a 100%,#3245ff4d)}.primary[data-astro-cid-6ixtg63z]{border-color:transparent;--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.primary[data-astro-cid-6ixtg63z]:hover{--tw-bg-opacity: 1;background-color:rgb(242 246 250 / var(--tw-bg-opacity))}.primary[data-astro-cid-6ixtg63z]:focus{outline-style:solid;outline-width:2px;outline-offset:2px}.secondary[data-astro-cid-6ixtg63z]{border-color:#858b984d;background-color:#2c2c2c4d;--tw-text-opacity: 1;color:rgb(191 193 201 / var(--tw-text-opacity))}.secondary[data-astro-cid-6ixtg63z]:hover{border-color:#858b9899;background-color:#2c2c2c4d;--tw-text-opacity: 1;color:rgb(242 246 250 / var(--tw-text-opacity))}.ghost[data-astro-cid-6ixtg63z]{border-color:transparent;background-color:transparent;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.ghost[data-astro-cid-6ixtg63z]:hover{background-color:#ffffff0d}#scanner-inlet[data-astro-cid-kj3rbqrk]{background:radial-gradient(3337.59% 50% at 50% 50%,#3245ff,#bc52ee00)}#scanner-light[data-astro-cid-kj3rbqrk]{background:linear-gradient(42deg,#3245ff4d 23.59%,#bc52ee4d 76.41%)}@media screen and (max-width: 1023px){#unscanned-docs-container[data-astro-cid-kj3rbqrk],#scanned-docs-container[data-astro-cid-kj3rbqrk]{animation-name:marquee;animation-duration:50s;animation-play-state:paused;animation-timing-function:linear;animation-iteration-count:infinite}}#unscanned-docs-container[data-astro-cid-kj3rbqrk],#scanned-docs-container[data-astro-cid-kj3rbqrk]{animation:marquee 50s linear infinite}#content-collections[data-astro-cid-kj3rbqrk] #unscanned-docs-container[data-astro-cid-kj3rbqrk],#content-collections[data-astro-cid-kj3rbqrk] #scanned-docs-container[data-astro-cid-kj3rbqrk]{animation-play-state:paused}#content-collections[data-astro-cid-kj3rbqrk]:hover #unscanned-docs-container[data-astro-cid-kj3rbqrk],#content-collections[data-astro-cid-kj3rbqrk]:hover #scanned-docs-container[data-astro-cid-kj3rbqrk]{animation-play-state:running;animation:marquee 50s linear infinite}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(100%)}}@media (prefers-reduced-motion){#unscanned-docs-container[data-astro-cid-kj3rbqrk],#scanned-docs-container[data-astro-cid-kj3rbqrk]{animation-play-state:paused}}#zero-js[data-astro-cid-of5bu3ny]{font-size:200px;font-weight:700;line-height:200px;--tw-drop-shadow: drop-shadow(inset 0px 0px 0px 1.5px rgba(255,255,255,.06),inset 0px 1.5px 0px 0px rgba(255,255,255,.15));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}h2[data-astro-cid-rreterqb]{font-variation-settings:"wght" 290,"wdth" 490!important}h2[data-astro-cid-rreterqb] strong[data-astro-cid-rreterqb]{font-variation-settings:"wght" 475,"wdth" 490}#stardust[data-astro-cid-b2xzbshs]{background:linear-gradient(270deg,#40debf4d,#334ba94d)}
:root.disclosure-open{overflow-y:hidden}body:before{content:"";position:fixed;display:block;inset:0;z-index:11;background:#0d0f14;pointer-events:none;opacity:0;transition:opacity .4s cubic-bezier(.23,1,.32,1)}:root.disclosure-open body:before{opacity:1}:root.disclosure-open #nav[data-astro-cid-ouamjn2i]{overflow-y:auto}
</style><script type="module" src="/_astro/hoisted.MmyfpQeu.js"></script>
<script type="module" src="/_astro/page.DLDqgDPY.js"></script> <!-- High Priority Global Metadata --><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>Astro</title><meta name="generator" content="Astro v4.14.6"><meta name="theme-color" content="#8D46E7"><!-- Fathom - beautiful, simple website analytics --><script src="https://cdn.usefathom.com/script.js" data-site="EZBHTSIG" defer=""></script><!-- Font preloads, omit MDIO to improve initial load --><link rel="preload" href="/fonts/Obviously.woff2?v=1" as="font" type="font/woff2" crossorigin=""><link rel="preload" href="/fonts/Inter.woff2?v=1" as="font" type="font/woff2" crossorigin=""><!-- Low Priority Global Metadata --><link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="mask-icon" href="/favicon.svg" color="#8D46E7"><link rel="sitemap" href="/sitemap-index.xml"><link rel="alternate" type="application/rss+xml" href="/rss.xml" title="RSS"><link rel="canonical" href="https://astro.build/"><meta name="description" content="Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between."><meta property="og:title" content="Astro"><meta property="og:type" content="website"><meta property="og:url" content="https://astro.build/"><meta property="og:locale" content="en"><meta property="og:description" content="Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between."><meta property="og:site_name" content="Astro"><meta property="og:image" content="https://astro.build/og/astro.jpg"><meta property="og:image:alt" content="Astro - Build the web you want."><meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="astrodotbuild"><meta name="twitter:title" content="Astro"><meta name="twitter:description" content="Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between."><meta name="twitter:image" content="https://astro.build/og/astro.jpg"><meta name="twitter:image:alt" content="Astro - Build the web you want."><meta name="robots" content="max-image-preview:large"><meta name="x-astro-vitals-route" content="/"></head> <body class="flex min-h-screen max-w-screen flex-col overflow-x-hidden" data-astro-cid-ouamjn2i=""> <a href="#main" class="skip-link w-fit z-50 mt-3 px-4 py-2 inline-flex justify-center text-white font-semibold bg-astro-dark-800 border border-astro-dark-100/20 rounded-full" data-astro-cid-hoe5mouk="">
Skip to content
</a> <div id="nav" class="inset-x-0 top-0 z-20 max-h-screen sticky bg-black/30 backdrop-blur-xl" data-astro-cid-ouamjn2i=""> <header class="shadow"> <nav aria-label="Primary" class="container flex h-header items-center"> <nav class="w-full flex items-center justify-between"> <a href="/" data-astro-prefetch="" title="Home" data-home-link=""> <span class="sr-only">Astro Logo</span> <svg width="114" height="30" viewBox="0 0 114 30" fill="none" xmlns="http://www.w3.org/2000/svg" class="translate-y-[3px]"> <path d="M7.70883 25.5523C6.35819 24.3134 5.9639 21.7103 6.52661 19.8245C7.50233 21.0135 8.85426 21.3901 10.2546 21.6027C12.4164 21.9308 14.5395 21.8081 16.5477 20.8166C16.7774 20.7031 16.9897 20.5522 17.2407 20.3993C17.4292 20.9478 17.4782 21.5017 17.4124 22.0653C17.2524 23.4381 16.5716 24.4985 15.4887 25.3023C15.0557 25.6238 14.5975 25.9112 14.1503 26.2144C12.7765 27.1462 12.4048 28.2387 12.921 29.828C12.9333 29.8667 12.9443 29.9054 12.972 29.9999C12.2705 29.6849 11.7582 29.2263 11.3678 28.6232C10.9554 27.9867 10.7592 27.2826 10.7489 26.5208C10.7437 26.1501 10.7437 25.776 10.694 25.4106C10.5727 24.5195 10.1559 24.1205 9.37051 24.0975C8.56451 24.0739 7.92694 24.5739 7.75787 25.3613C7.74497 25.4217 7.72625 25.4814 7.70754 25.5516L7.70883 25.5523Z" fill="white"></path> <path d="M0 19.5103C0 19.5103 3.99947 17.5552 8.01012 17.5552L11.034 8.16461C11.1472 7.71047 11.4778 7.40185 11.8509 7.40185C12.2241 7.40185 12.5547 7.71047 12.6679 8.16461L15.6918 17.5552C20.4418 17.5552 23.7019 19.5103 23.7019 19.5103C23.7019 19.5103 16.9085 0.939907 16.8952 0.902648C16.7002 0.353607 16.3711 0 15.9273 0H7.77531C7.33154 0 7.01567 0.353607 6.80741 0.902648C6.79274 0.939204 0 19.5103 0 19.5103Z" fill="white"></path> <path d="M42.1674 13.5366C42.1674 15.1822 40.1276 16.165 37.3032 16.165C35.4651 16.165 34.815 15.7079 34.815 14.748C34.815 13.7423 35.622 13.2624 37.4601 13.2624C39.1189 13.2624 40.531 13.2852 42.1674 13.4909V13.5366ZM42.1898 11.5025C41.1811 11.274 39.6568 11.1368 37.8412 11.1368C32.551 11.1368 30.0629 12.3939 30.0629 15.3193C30.0629 18.3591 31.7665 19.5247 35.7116 19.5247C39.0516 19.5247 41.3156 18.679 42.145 16.5992H42.2795C42.2571 17.102 42.2346 17.6048 42.2346 17.9934C42.2346 19.0676 42.414 19.159 43.2882 19.159H47.4127C47.1885 18.519 47.054 16.7135 47.054 15.1593C47.054 13.4909 47.1213 12.2339 47.1213 10.5426C47.1213 7.09149 45.059 4.8974 38.6033 4.8974C35.8237 4.8974 32.7303 5.37736 30.3767 6.08587C30.6008 7.02292 30.9147 8.9199 31.0716 10.1541C33.1114 9.19416 36.0031 8.78277 38.2446 8.78277C41.338 8.78277 42.1898 9.49128 42.1898 10.9311V11.5025Z" fill="white"></path> <path d="M53.5069 14.4965C52.9465 14.5651 52.1843 14.5651 51.3998 14.5651C50.5704 14.5651 49.8083 14.5423 49.2927 14.4737C49.2927 14.6565 49.2703 14.8622 49.2703 15.0451C49.2703 17.902 51.1308 19.5704 57.6762 19.5704C63.8406 19.5704 65.8356 17.9248 65.8356 15.0222C65.8356 12.2796 64.513 10.9311 58.6625 10.634C54.1121 10.4283 53.7086 9.92552 53.7086 9.35415C53.7086 8.69135 54.2914 8.34852 57.34 8.34852C60.5006 8.34852 61.3524 8.78277 61.3524 9.69697V9.90267C61.8007 9.87981 62.6077 9.85696 63.4371 9.85696C64.2216 9.85696 65.0734 9.87981 65.5666 9.92552C65.5666 9.71983 65.589 9.53698 65.589 9.377C65.589 6.0173 62.8094 4.92026 57.4296 4.92026C51.3774 4.92026 49.3375 6.40584 49.3375 9.30843C49.3375 11.9139 50.9739 13.5366 56.7796 13.788C61.061 13.9252 61.5317 14.4051 61.5317 15.0679C61.5317 15.7764 60.8368 16.0964 57.8331 16.0964C54.3811 16.0964 53.5069 15.6164 53.5069 14.6337V14.4965Z" fill="white"></path> <path d="M73.2341 2.4519C71.5978 3.9832 68.6613 5.51449 67.0249 5.92588C67.0474 6.77152 67.0474 8.32566 67.0474 9.1713L68.5492 9.19416C68.5268 10.8169 68.5044 12.7824 68.5044 14.0852C68.5044 17.1249 70.0959 19.4104 75.0498 19.4104C77.1345 19.4104 78.5242 19.1818 80.2503 18.8162C80.0709 17.6963 79.8692 15.9821 79.8019 14.6794C78.7708 15.0222 77.4707 15.2051 76.0361 15.2051C74.0411 15.2051 73.2341 14.6565 73.2341 13.0795C73.2341 11.7082 73.2341 10.4283 73.2565 9.23987C75.8119 9.26272 78.3673 9.30844 79.8692 9.35415C79.8468 8.16568 79.8916 6.45155 79.9589 5.30879C77.7845 5.3545 75.3412 5.37736 73.3238 5.37736C73.3462 4.37173 73.3686 3.41182 73.391 2.4519H73.2341Z" fill="white"></path> <path d="M86.6222 8.48565C86.6446 7.29719 86.667 6.29156 86.6894 5.30879H82.1838C82.2511 7.27433 82.2511 9.28558 82.2511 12.2339C82.2511 15.1822 82.2287 17.2163 82.1838 19.159H87.3395C87.2498 17.7877 87.2274 15.4793 87.2274 13.5138C87.2274 10.4055 88.4827 9.51413 91.3295 9.51413C92.652 9.51413 93.5935 9.67412 94.4229 9.97123C94.4453 8.80562 94.6694 6.54297 94.8039 5.53734C93.9521 5.28594 93.0107 5.12595 91.8675 5.12595C89.4242 5.1031 87.6309 6.10872 86.8015 8.50851L86.6222 8.48565Z" fill="white"></path> <path d="M109.067 12.1425C109.067 14.6337 107.273 15.7993 104.449 15.7993C101.647 15.7993 99.8536 14.7022 99.8536 12.1425C99.8536 9.5827 101.669 8.62278 104.449 8.62278C107.251 8.62278 109.067 9.65126 109.067 12.1425ZM113.751 12.0282C113.751 7.06863 109.896 4.85169 104.449 4.85169C98.9794 4.85169 95.2584 7.06863 95.2584 12.0282C95.2584 16.9649 98.7328 19.6161 104.426 19.6161C110.165 19.6161 113.751 16.9649 113.751 12.0282Z" fill="white"></path> </svg> </a> <div class="hidden shrink flex-row items-center gap-16 lg:flex text-base"> <a href="https://docs.astro.build" class="link">Documentation</a> <a href="/showcase/" data-astro-prefetch="" class="link">Showcase</a> <details id="resources-menu" class="group relative"> <summary class="accordion link flex cursor-pointer items-center gap-2">
Resources
<span class="sr-only">Open resources menu</span> <svg width="22" height="13" viewBox="0 0 22 13" fill="none" xmlns="http://www.w3.org/2000/svg" class="inline-block size-3 rotate-0 transition-transform group-open:-rotate-180 duration-500 " aria-hidden="true"><path d="M1 1L11 11L21 1" stroke="currentColor" stroke-width="2"></path></svg> </summary> <ul class="flex flex-col absolute left-0 top-full translate-y-2 min-w-44 rounded-xl bg-astro-dark-800 p-1 text-astro-gray-200 shadow-lg border border-astro-dark-100/10 invisible group-open:visible origin-top scale-95 group-open:scale-100 opacity-0 group-open:opacity-100 transition-all duration-500"> <li> <a href="/themes/" data-astro-prefetch="" class="flex items-center gap-2 rounded-md p-3 leading-none transition hover:bg-astro-dark-700 hover:text-white"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 " aria-hidden="true"><path d="M7.42002 15.5399C7.23377 15.7273 7.12923 15.9807 7.12923 16.2449C7.12923 16.5091 7.23377 16.7625 7.42002 16.9499C7.51298 17.0436 7.62358 17.118 7.74544 17.1688C7.8673 17.2196 7.99801 17.2457 8.13002 17.2457C8.26203 17.2457 8.39274 17.2196 8.5146 17.1688C8.63646 17.118 8.74706 17.0436 8.84002 16.9499C9.02627 16.7625 9.13081 16.5091 9.13081 16.2449C9.13081 15.9807 9.02627 15.7273 8.84002 15.5399C8.74706 15.4462 8.63646 15.3718 8.5146 15.321C8.39274 15.2702 8.26203 15.2441 8.13002 15.2441C7.99801 15.2441 7.8673 15.2702 7.74544 15.321C7.62358 15.3718 7.51298 15.4462 7.42002 15.5399ZM7.42002 7.04989C7.23377 7.23726 7.12923 7.49071 7.12923 7.75489C7.12923 8.01908 7.23377 8.27253 7.42002 8.45989C7.51298 8.55362 7.62358 8.62802 7.74544 8.67879C7.8673 8.72955 7.99801 8.75569 8.13002 8.75569C8.26203 8.75569 8.39274 8.72955 8.5146 8.67879C8.63646 8.62802 8.74706 8.55362 8.84002 8.45989C9.02627 8.27253 9.13081 8.01908 9.13081 7.75489C9.13081 7.49071 9.02627 7.23726 8.84002 7.04989C8.74706 6.95617 8.63646 6.88177 8.5146 6.831C8.39274 6.78023 8.26203 6.7541 8.13002 6.7541C7.99801 6.7541 7.8673 6.78023 7.74544 6.831C7.62358 6.88177 7.51298 6.95617 7.42002 7.04989ZM12.37 17.0499C12.1722 17.0499 11.9789 17.1085 11.8145 17.2184C11.65 17.3283 11.5218 17.4845 11.4461 17.6672C11.3705 17.8499 11.3506 18.051 11.3892 18.245C11.4278 18.439 11.5231 18.6171 11.6629 18.757C11.8028 18.8969 11.9809 18.9921 12.1749 19.0307C12.3689 19.0693 12.57 19.0495 12.7527 18.9738C12.9354 18.8981 13.0916 18.7699 13.2015 18.6055C13.3114 18.441 13.37 18.2477 13.37 18.0499C13.3768 17.9144 13.356 17.779 13.3087 17.6518C13.2615 17.5247 13.189 17.4085 13.0954 17.3102C13.0019 17.212 12.8893 17.1339 12.7646 17.0805C12.6399 17.0272 12.5057 16.9997 12.37 16.9999V17.0499ZM6.37002 11.0499C6.17224 11.0499 5.9789 11.1085 5.81445 11.2184C5.65 11.3283 5.52183 11.4845 5.44614 11.6672C5.37045 11.8499 5.35065 12.051 5.38924 12.245C5.42782 12.439 5.52306 12.6171 5.66291 12.757C5.80277 12.8969 5.98095 12.9921 6.17493 13.0307C6.36891 13.0693 6.56998 13.0495 6.7527 12.9738C6.93543 12.8981 7.09161 12.7699 7.20149 12.6055C7.31137 12.441 7.37002 12.2477 7.37002 12.0499C7.3768 11.9144 7.35595 11.779 7.30875 11.6518C7.26154 11.5247 7.18895 11.4085 7.09541 11.3102C7.00187 11.212 6.88932 11.1339 6.76462 11.0805C6.63991 11.0272 6.50566 10.9997 6.37002 10.9999V11.0499ZM12.37 5.04989C12.1722 5.04989 11.9789 5.10854 11.8145 5.21842C11.65 5.32831 11.5218 5.48449 11.4461 5.66721C11.3705 5.84994 11.3506 6.051 11.3892 6.24499C11.4278 6.43897 11.5231 6.61715 11.6629 6.757C11.8028 6.89685 11.9809 6.99209 12.1749 7.03068C12.3689 7.06926 12.57 7.04946 12.7527 6.97377C12.9354 6.89809 13.0916 6.76991 13.2015 6.60546C13.3114 6.44102 13.37 6.24768 13.37 6.04989C13.3768 5.91443 13.356 5.779 13.3087 5.65184C13.2615 5.52468 13.189 5.40846 13.0954 5.31024C13.0019 5.21202 12.8893 5.13385 12.7646 5.0805C12.6399 5.02715 12.5057 4.99972 12.37 4.99989V5.04989ZM15.91 7.09989C15.7696 7.23951 15.6737 7.41768 15.6347 7.61182C15.5956 7.80597 15.6151 8.00734 15.6906 8.19041C15.7661 8.37348 15.8943 8.53001 16.0588 8.64016C16.2234 8.7503 16.417 8.8091 16.615 8.8091C16.8131 8.8091 17.0066 8.7503 17.1712 8.64016C17.3358 8.53001 17.464 8.37348 17.5395 8.19041C17.615 8.00734 17.6344 7.80597 17.5954 7.61182C17.5563 7.41768 17.4605 7.23951 17.32 7.09989C17.1393 6.90685 16.8896 6.79321 16.6253 6.78384C16.3611 6.77447 16.1039 6.87013 15.91 7.04989V7.09989ZM22.21 7.09989C21.2958 5.27219 19.8904 3.73531 18.1516 2.6616C16.4128 1.58788 14.4092 1.01978 12.3656 1.021C10.322 1.02222 8.31914 1.59271 6.5816 2.66851C4.84407 3.7443 3.44057 5.28286 2.5285 7.11166C1.61643 8.94045 1.23184 10.9872 1.41787 13.0223C1.60389 15.0574 2.35317 17.0005 3.58169 18.6336C4.8102 20.2668 6.46938 21.5254 8.37316 22.2683C10.2769 23.0113 12.35 23.2092 14.36 22.8399C14.8655 22.7448 15.3469 22.5499 15.7761 22.2666C16.2054 21.9833 16.5739 21.6172 16.86 21.1899C17.1684 20.7253 17.3811 20.2039 17.4858 19.6562C17.5906 19.1086 17.5852 18.5455 17.47 17.9999C17.407 17.6702 17.3736 17.3355 17.37 16.9999C17.3744 16.0309 17.6603 15.084 18.1929 14.2744C18.7255 13.4648 19.4819 12.8275 20.37 12.4399C20.8489 12.2255 21.2787 11.9152 21.633 11.5282C21.9873 11.1413 22.2586 10.6858 22.43 10.1899C22.6034 9.68318 22.6733 9.1468 22.6355 8.61258C22.5977 8.07835 22.453 7.55715 22.21 7.07989V7.09989ZM20.51 9.53989C20.4247 9.77921 20.2922 9.99898 20.1205 10.1862C19.9487 10.3734 19.7411 10.5243 19.51 10.6299C18.28 11.1805 17.2351 12.0744 16.5007 13.2044C15.7663 14.3343 15.3737 15.6523 15.37 16.9999C15.3715 17.47 15.4184 17.9388 15.51 18.3999C15.5711 18.6817 15.5751 18.9729 15.5219 19.2562C15.4686 19.5396 15.3592 19.8095 15.2 20.0499C15.0653 20.2603 14.8881 20.4402 14.6797 20.578C14.4713 20.7157 14.2364 20.8084 13.99 20.8499C13.4559 20.9503 12.9135 21.0005 12.37 20.9999C11.1642 21.0005 9.97054 20.7587 8.85994 20.289C7.74935 19.8193 6.74447 19.1313 5.90498 18.2656C5.06549 17.4 4.4085 16.3745 3.97304 15.2501C3.53757 14.1256 3.33251 12.9251 3.37002 11.7199C3.44763 9.47269 4.35903 7.33485 5.92665 5.72286C7.49428 4.11086 9.60585 3.14018 11.85 2.99989H12.36C14.0358 3.00031 15.6781 3.46858 17.1021 4.35196C18.5261 5.23534 19.6752 6.49874 20.42 7.99989C20.6493 8.47488 20.6816 9.02118 20.51 9.51989V9.53989ZM12.37 10.9999C12.1722 10.9999 11.9789 11.0585 11.8145 11.1684C11.65 11.2783 11.5218 11.4345 11.4461 11.6172C11.3705 11.7999 11.3506 12.001 11.3892 12.195C11.4278 12.389 11.5231 12.5671 11.6629 12.707C11.8028 12.8469 11.9809 12.9421 12.1749 12.9807C12.3689 13.0193 12.57 12.9995 12.7527 12.9238C12.9354 12.8481 13.0916 12.7199 13.2015 12.5555C13.3114 12.391 13.37 12.1977 13.37 11.9999C13.37 11.7347 13.2647 11.4803 13.0771 11.2928C12.8896 11.1053 12.6352 10.9999 12.37 10.9999Z" fill="currentColor"></path></svg> Themes
</a> </li> <li> <a href="/integrations/" data-astro-prefetch="" class="flex items-center gap-2 rounded-md p-3 leading-none transition hover:bg-astro-dark-700 hover:text-white"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 " aria-hidden="true"><path d="M21 2H9C8.73478 2 8.48043 2.10536 8.29289 2.29289C8.10536 2.48043 8 2.73478 8 3V7H6C5.73478 7 5.48043 7.10536 5.29289 7.29289C5.10536 7.48043 5 7.73478 5 8V12H3C2.73478 12 2.48043 12.1054 2.29289 12.2929C2.10536 12.4804 2 12.7348 2 13V21C2 21.2652 2.10536 21.5196 2.29289 21.7071C2.48043 21.8946 2.73478 22 3 22H11C11.2652 22 11.5196 21.8946 11.7071 21.7071C11.8946 21.5196 12 21.2652 12 21V19H16C16.2652 19 16.5196 18.8946 16.7071 18.7071C16.8946 18.5196 17 18.2652 17 18V16H21C21.2652 16 21.5196 15.8946 21.7071 15.7071C21.8946 15.5196 22 15.2652 22 15V3C22 2.73478 21.8946 2.48043 21.7071 2.29289C21.5196 2.10536 21.2652 2 21 2ZM10 20H4V14H10V20ZM15 17H12V13C12 12.7348 11.8946 12.4804 11.7071 12.2929C11.5196 12.1054 11.2652 12 11 12H7V9H15V17ZM20 14H17V8C17 7.73478 16.8946 7.48043 16.7071 7.29289C16.5196 7.10536 16.2652 7 16 7H10V4H20V14Z" fill="currentColor"></path></svg> Integrations
</a> </li> <li> <a href="https://docs.astro.build/en/tutorial/0-introduction/" class="flex items-center gap-2 rounded-md p-3 leading-none transition hover:bg-astro-dark-700 hover:text-white"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 " aria-hidden="true"><path d="M21.17 2.06012C20.4532 1.93665 19.7274 1.8731 19 1.87012C16.5184 1.86809 14.0885 2.57969 12 3.92012C9.90617 2.59729 7.47667 1.90315 5.00002 1.92012C4.27267 1.9231 3.54683 1.98665 2.83002 2.11012C2.59523 2.1506 2.3826 2.27358 2.23044 2.45691C2.07827 2.64025 1.99656 2.87189 2.00002 3.11012V15.1101C1.99788 15.2571 2.02815 15.4027 2.08867 15.5366C2.1492 15.6705 2.23849 15.7894 2.3502 15.8849C2.4619 15.9803 2.59328 16.05 2.73498 16.089C2.87668 16.1279 3.02522 16.1351 3.17002 16.1101C4.60304 15.862 6.07123 15.9032 7.48809 16.2312C8.90495 16.5592 10.2418 17.1675 11.42 18.0201L11.54 18.0901H11.65C11.7609 18.1363 11.8799 18.1601 12 18.1601C12.1202 18.1601 12.2391 18.1363 12.35 18.0901H12.46L12.58 18.0201C13.75 17.1484 15.083 16.5205 16.5002 16.1735C17.9173 15.8265 19.3897 15.7675 20.83 16.0001C20.9748 16.0251 21.1234 16.0179 21.2651 15.979C21.4068 15.94 21.5381 15.8703 21.6498 15.7749C21.7616 15.6794 21.8508 15.5605 21.9114 15.4266C21.9719 15.2927 22.0022 15.1471 22 15.0001V3.00012C21.9896 2.77228 21.9016 2.55483 21.7507 2.38386C21.5997 2.21289 21.3948 2.09866 21.17 2.06012ZM11 15.3501C9.14991 14.3768 7.09054 13.8688 5.00002 13.8701C4.67002 13.8701 4.34002 13.8701 4.00002 13.8701V3.87012C4.33308 3.85093 4.66697 3.85093 5.00002 3.87012C7.13341 3.86776 9.22024 4.49381 11 5.67012V15.3501ZM20 13.9101C19.66 13.9101 19.33 13.9101 19 13.9101C16.9095 13.9088 14.8501 14.4168 13 15.3901V5.67012C14.7798 4.49381 16.8666 3.86776 19 3.87012C19.3331 3.85093 19.667 3.85093 20 3.87012V13.9101ZM21.17 18.0601C20.4532 17.9367 19.7274 17.8731 19 17.8701C16.5184 17.8681 14.0885 18.5797 12 19.9201C9.91154 18.5797 7.48166 17.8681 5.00002 17.8701C4.27267 17.8731 3.54683 17.9367 2.83002 18.0601C2.69985 18.0808 2.57505 18.127 2.46279 18.196C2.35053 18.2651 2.25302 18.3557 2.17589 18.4625C2.09876 18.5694 2.04351 18.6905 2.01333 18.8188C1.98315 18.9471 1.97862 19.0801 2.00002 19.2101C2.05084 19.4698 2.20251 19.6988 2.42181 19.8468C2.64111 19.9949 2.91016 20.05 3.17002 20.0001C4.60304 19.752 6.07123 19.7932 7.48809 20.1212C8.90495 20.4492 10.2418 21.0575 11.42 21.9101C11.5894 22.0307 11.7921 22.0955 12 22.0955C12.2079 22.0955 12.4107 22.0307 12.58 21.9101C13.7582 21.0575 15.0951 20.4492 16.512 20.1212C17.9288 19.7932 19.397 19.752 20.83 20.0001C21.0899 20.05 21.3589 19.9949 21.5782 19.8468C21.7975 19.6988 21.9492 19.4698 22 19.2101C22.0214 19.0801 22.0169 18.9471 21.9867 18.8188C21.9565 18.6905 21.9013 18.5694 21.8242 18.4625C21.747 18.3557 21.6495 18.2651 21.5373 18.196C21.425 18.127 21.3002 18.0808 21.17 18.0601Z" fill="currentColor"></path></svg> Tutorials
</a> </li> </ul> </details> <a href="/blog/" data-astro-prefetch="" class="link">Blog</a> </div> <div class="hidden gap-4 sm:flex"> <div class="flex items-center gap-4"> <a target="_blank" rel="noopener noreferer" class="link flex items-center gap-2 text-white" href="/chat"> <span class="sr-only">Join the Astro community on Discord</span> <svg viewBox="0 0 16 16" aria-hidden="true" width="24" height="24" astro-icon="social/discord"><path fill="currentColor" d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z"></path></svg> </a><a target="_blank" rel="noopener noreferer" class="link flex items-center gap-2 text-white" href="https://x.com/astrodotbuild"> <span class="sr-only">Follow Astro on x.com (formerly Twitter)</span> <svg viewBox="0 0 24 24" aria-hidden="true" width="24" height="24" astro-icon="social/twitter"><path fill="currentColor" d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></svg> </a><a target="_blank" rel="noopener noreferer" class="link flex items-center gap-2 text-white" href="https://github.com/withastro/astro"> <span class="sr-only">Go to Astro's GitHub repo</span> <svg viewBox="0 0 16 16" aria-hidden="true" width="24" height="24" astro-icon="social/github"><path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg> </a> </div> </div> </nav> <button id="astro-header-drawer-button" type="button" class="link ml-6 lg:hidden" aria-controls="astro-header-drawer" aria-expanded="false"> <svg width="24" height="17" viewBox="0 0 24 17" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-6 "><line y1="0.5" x2="24" y2="0.5" stroke="currentColor"></line><line y1="8.5" x2="24" y2="8.5" stroke="currentColor"></line><line y1="16.5" x2="24" y2="16.5" stroke="currentColor"></line></svg> <span class="sr-only">Show Menu</span> </button> </nav> <div id="astro-header-drawer" class="-translate-x-4 border-t border-astro-gray-500 opacity-0 transition data-[open]:translate-x-0 data-[open]:opacity-100" style="display: none;"> <nav aria-label="Primary" class="text-xl flex flex-col divide-y divide-astro-gray-500 pb-12 text-left [&>*]:p-6"> <a href="https://docs.astro.build/" class="link"> Docs</a> <a href="/showcase/" data-astro-prefetch="" class="link"> Showcase</a> <details class="group"> <summary class="accordion link flex cursor-pointer list-none items-center justify-between">
Resources
<svg width="22" height="13" viewBox="0 0 22 13" fill="none" xmlns="http://www.w3.org/2000/svg" class="inline-block size-3 rotate-0 transition-transform group-open:-rotate-180 duration-300 "><path d="M1 1L11 11L21 1" stroke="currentColor" stroke-width="2"></path></svg> </summary> <div class="mt-4 flex flex-col gap-4 text-xl font-light"> <a href="/themes/" data-astro-prefetch="" class="link flex items-center gap-4"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.42002 15.5399C7.23377 15.7273 7.12923 15.9807 7.12923 16.2449C7.12923 16.5091 7.23377 16.7625 7.42002 16.9499C7.51298 17.0436 7.62358 17.118 7.74544 17.1688C7.8673 17.2196 7.99801 17.2457 8.13002 17.2457C8.26203 17.2457 8.39274 17.2196 8.5146 17.1688C8.63646 17.118 8.74706 17.0436 8.84002 16.9499C9.02627 16.7625 9.13081 16.5091 9.13081 16.2449C9.13081 15.9807 9.02627 15.7273 8.84002 15.5399C8.74706 15.4462 8.63646 15.3718 8.5146 15.321C8.39274 15.2702 8.26203 15.2441 8.13002 15.2441C7.99801 15.2441 7.8673 15.2702 7.74544 15.321C7.62358 15.3718 7.51298 15.4462 7.42002 15.5399ZM7.42002 7.04989C7.23377 7.23726 7.12923 7.49071 7.12923 7.75489C7.12923 8.01908 7.23377 8.27253 7.42002 8.45989C7.51298 8.55362 7.62358 8.62802 7.74544 8.67879C7.8673 8.72955 7.99801 8.75569 8.13002 8.75569C8.26203 8.75569 8.39274 8.72955 8.5146 8.67879C8.63646 8.62802 8.74706 8.55362 8.84002 8.45989C9.02627 8.27253 9.13081 8.01908 9.13081 7.75489C9.13081 7.49071 9.02627 7.23726 8.84002 7.04989C8.74706 6.95617 8.63646 6.88177 8.5146 6.831C8.39274 6.78023 8.26203 6.7541 8.13002 6.7541C7.99801 6.7541 7.8673 6.78023 7.74544 6.831C7.62358 6.88177 7.51298 6.95617 7.42002 7.04989ZM12.37 17.0499C12.1722 17.0499 11.9789 17.1085 11.8145 17.2184C11.65 17.3283 11.5218 17.4845 11.4461 17.6672C11.3705 17.8499 11.3506 18.051 11.3892 18.245C11.4278 18.439 11.5231 18.6171 11.6629 18.757C11.8028 18.8969 11.9809 18.9921 12.1749 19.0307C12.3689 19.0693 12.57 19.0495 12.7527 18.9738C12.9354 18.8981 13.0916 18.7699 13.2015 18.6055C13.3114 18.441 13.37 18.2477 13.37 18.0499C13.3768 17.9144 13.356 17.779 13.3087 17.6518C13.2615 17.5247 13.189 17.4085 13.0954 17.3102C13.0019 17.212 12.8893 17.1339 12.7646 17.0805C12.6399 17.0272 12.5057 16.9997 12.37 16.9999V17.0499ZM6.37002 11.0499C6.17224 11.0499 5.9789 11.1085 5.81445 11.2184C5.65 11.3283 5.52183 11.4845 5.44614 11.6672C5.37045 11.8499 5.35065 12.051 5.38924 12.245C5.42782 12.439 5.52306 12.6171 5.66291 12.757C5.80277 12.8969 5.98095 12.9921 6.17493 13.0307C6.36891 13.0693 6.56998 13.0495 6.7527 12.9738C6.93543 12.8981 7.09161 12.7699 7.20149 12.6055C7.31137 12.441 7.37002 12.2477 7.37002 12.0499C7.3768 11.9144 7.35595 11.779 7.30875 11.6518C7.26154 11.5247 7.18895 11.4085 7.09541 11.3102C7.00187 11.212 6.88932 11.1339 6.76462 11.0805C6.63991 11.0272 6.50566 10.9997 6.37002 10.9999V11.0499ZM12.37 5.04989C12.1722 5.04989 11.9789 5.10854 11.8145 5.21842C11.65 5.32831 11.5218 5.48449 11.4461 5.66721C11.3705 5.84994 11.3506 6.051 11.3892 6.24499C11.4278 6.43897 11.5231 6.61715 11.6629 6.757C11.8028 6.89685 11.9809 6.99209 12.1749 7.03068C12.3689 7.06926 12.57 7.04946 12.7527 6.97377C12.9354 6.89809 13.0916 6.76991 13.2015 6.60546C13.3114 6.44102 13.37 6.24768 13.37 6.04989C13.3768 5.91443 13.356 5.779 13.3087 5.65184C13.2615 5.52468 13.189 5.40846 13.0954 5.31024C13.0019 5.21202 12.8893 5.13385 12.7646 5.0805C12.6399 5.02715 12.5057 4.99972 12.37 4.99989V5.04989ZM15.91 7.09989C15.7696 7.23951 15.6737 7.41768 15.6347 7.61182C15.5956 7.80597 15.6151 8.00734 15.6906 8.19041C15.7661 8.37348 15.8943 8.53001 16.0588 8.64016C16.2234 8.7503 16.417 8.8091 16.615 8.8091C16.8131 8.8091 17.0066 8.7503 17.1712 8.64016C17.3358 8.53001 17.464 8.37348 17.5395 8.19041C17.615 8.00734 17.6344 7.80597 17.5954 7.61182C17.5563 7.41768 17.4605 7.23951 17.32 7.09989C17.1393 6.90685 16.8896 6.79321 16.6253 6.78384C16.3611 6.77447 16.1039 6.87013 15.91 7.04989V7.09989ZM22.21 7.09989C21.2958 5.27219 19.8904 3.73531 18.1516 2.6616C16.4128 1.58788 14.4092 1.01978 12.3656 1.021C10.322 1.02222 8.31914 1.59271 6.5816 2.66851C4.84407 3.7443 3.44057 5.28286 2.5285 7.11166C1.61643 8.94045 1.23184 10.9872 1.41787 13.0223C1.60389 15.0574 2.35317 17.0005 3.58169 18.6336C4.8102 20.2668 6.46938 21.5254 8.37316 22.2683C10.2769 23.0113 12.35 23.2092 14.36 22.8399C14.8655 22.7448 15.3469 22.5499 15.7761 22.2666C16.2054 21.9833 16.5739 21.6172 16.86 21.1899C17.1684 20.7253 17.3811 20.2039 17.4858 19.6562C17.5906 19.1086 17.5852 18.5455 17.47 17.9999C17.407 17.6702 17.3736 17.3355 17.37 16.9999C17.3744 16.0309 17.6603 15.084 18.1929 14.2744C18.7255 13.4648 19.4819 12.8275 20.37 12.4399C20.8489 12.2255 21.2787 11.9152 21.633 11.5282C21.9873 11.1413 22.2586 10.6858 22.43 10.1899C22.6034 9.68318 22.6733 9.1468 22.6355 8.61258C22.5977 8.07835 22.453 7.55715 22.21 7.07989V7.09989ZM20.51 9.53989C20.4247 9.77921 20.2922 9.99898 20.1205 10.1862C19.9487 10.3734 19.7411 10.5243 19.51 10.6299C18.28 11.1805 17.2351 12.0744 16.5007 13.2044C15.7663 14.3343 15.3737 15.6523 15.37 16.9999C15.3715 17.47 15.4184 17.9388 15.51 18.3999C15.5711 18.6817 15.5751 18.9729 15.5219 19.2562C15.4686 19.5396 15.3592 19.8095 15.2 20.0499C15.0653 20.2603 14.8881 20.4402 14.6797 20.578C14.4713 20.7157 14.2364 20.8084 13.99 20.8499C13.4559 20.9503 12.9135 21.0005 12.37 20.9999C11.1642 21.0005 9.97054 20.7587 8.85994 20.289C7.74935 19.8193 6.74447 19.1313 5.90498 18.2656C5.06549 17.4 4.4085 16.3745 3.97304 15.2501C3.53757 14.1256 3.33251 12.9251 3.37002 11.7199C3.44763 9.47269 4.35903 7.33485 5.92665 5.72286C7.49428 4.11086 9.60585 3.14018 11.85 2.99989H12.36C14.0358 3.00031 15.6781 3.46858 17.1021 4.35196C18.5261 5.23534 19.6752 6.49874 20.42 7.99989C20.6493 8.47488 20.6816 9.02118 20.51 9.51989V9.53989ZM12.37 10.9999C12.1722 10.9999 11.9789 11.0585 11.8145 11.1684C11.65 11.2783 11.5218 11.4345 11.4461 11.6172C11.3705 11.7999 11.3506 12.001 11.3892 12.195C11.4278 12.389 11.5231 12.5671 11.6629 12.707C11.8028 12.8469 11.9809 12.9421 12.1749 12.9807C12.3689 13.0193 12.57 12.9995 12.7527 12.9238C12.9354 12.8481 13.0916 12.7199 13.2015 12.5555C13.3114 12.391 13.37 12.1977 13.37 11.9999C13.37 11.7347 13.2647 11.4803 13.0771 11.2928C12.8896 11.1053 12.6352 10.9999 12.37 10.9999Z" fill="currentColor"></path></svg> Themes
</a> <a href="/integrations/" data-astro-prefetch="" class="link flex items-center gap-4"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21 2H9C8.73478 2 8.48043 2.10536 8.29289 2.29289C8.10536 2.48043 8 2.73478 8 3V7H6C5.73478 7 5.48043 7.10536 5.29289 7.29289C5.10536 7.48043 5 7.73478 5 8V12H3C2.73478 12 2.48043 12.1054 2.29289 12.2929C2.10536 12.4804 2 12.7348 2 13V21C2 21.2652 2.10536 21.5196 2.29289 21.7071C2.48043 21.8946 2.73478 22 3 22H11C11.2652 22 11.5196 21.8946 11.7071 21.7071C11.8946 21.5196 12 21.2652 12 21V19H16C16.2652 19 16.5196 18.8946 16.7071 18.7071C16.8946 18.5196 17 18.2652 17 18V16H21C21.2652 16 21.5196 15.8946 21.7071 15.7071C21.8946 15.5196 22 15.2652 22 15V3C22 2.73478 21.8946 2.48043 21.7071 2.29289C21.5196 2.10536 21.2652 2 21 2ZM10 20H4V14H10V20ZM15 17H12V13C12 12.7348 11.8946 12.4804 11.7071 12.2929C11.5196 12.1054 11.2652 12 11 12H7V9H15V17ZM20 14H17V8C17 7.73478 16.8946 7.48043 16.7071 7.29289C16.5196 7.10536 16.2652 7 16 7H10V4H20V14Z" fill="currentColor"></path></svg> Integrations
</a> <a href="https://docs.astro.build/en/tutorial/0-introduction/" class="link flex items-center gap-4"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.17 2.06012C20.4532 1.93665 19.7274 1.8731 19 1.87012C16.5184 1.86809 14.0885 2.57969 12 3.92012C9.90617 2.59729 7.47667 1.90315 5.00002 1.92012C4.27267 1.9231 3.54683 1.98665 2.83002 2.11012C2.59523 2.1506 2.3826 2.27358 2.23044 2.45691C2.07827 2.64025 1.99656 2.87189 2.00002 3.11012V15.1101C1.99788 15.2571 2.02815 15.4027 2.08867 15.5366C2.1492 15.6705 2.23849 15.7894 2.3502 15.8849C2.4619 15.9803 2.59328 16.05 2.73498 16.089C2.87668 16.1279 3.02522 16.1351 3.17002 16.1101C4.60304 15.862 6.07123 15.9032 7.48809 16.2312C8.90495 16.5592 10.2418 17.1675 11.42 18.0201L11.54 18.0901H11.65C11.7609 18.1363 11.8799 18.1601 12 18.1601C12.1202 18.1601 12.2391 18.1363 12.35 18.0901H12.46L12.58 18.0201C13.75 17.1484 15.083 16.5205 16.5002 16.1735C17.9173 15.8265 19.3897 15.7675 20.83 16.0001C20.9748 16.0251 21.1234 16.0179 21.2651 15.979C21.4068 15.94 21.5381 15.8703 21.6498 15.7749C21.7616 15.6794 21.8508 15.5605 21.9114 15.4266C21.9719 15.2927 22.0022 15.1471 22 15.0001V3.00012C21.9896 2.77228 21.9016 2.55483 21.7507 2.38386C21.5997 2.21289 21.3948 2.09866 21.17 2.06012ZM11 15.3501C9.14991 14.3768 7.09054 13.8688 5.00002 13.8701C4.67002 13.8701 4.34002 13.8701 4.00002 13.8701V3.87012C4.33308 3.85093 4.66697 3.85093 5.00002 3.87012C7.13341 3.86776 9.22024 4.49381 11 5.67012V15.3501ZM20 13.9101C19.66 13.9101 19.33 13.9101 19 13.9101C16.9095 13.9088 14.8501 14.4168 13 15.3901V5.67012C14.7798 4.49381 16.8666 3.86776 19 3.87012C19.3331 3.85093 19.667 3.85093 20 3.87012V13.9101ZM21.17 18.0601C20.4532 17.9367 19.7274 17.8731 19 17.8701C16.5184 17.8681 14.0885 18.5797 12 19.9201C9.91154 18.5797 7.48166 17.8681 5.00002 17.8701C4.27267 17.8731 3.54683 17.9367 2.83002 18.0601C2.69985 18.0808 2.57505 18.127 2.46279 18.196C2.35053 18.2651 2.25302 18.3557 2.17589 18.4625C2.09876 18.5694 2.04351 18.6905 2.01333 18.8188C1.98315 18.9471 1.97862 19.0801 2.00002 19.2101C2.05084 19.4698 2.20251 19.6988 2.42181 19.8468C2.64111 19.9949 2.91016 20.05 3.17002 20.0001C4.60304 19.752 6.07123 19.7932 7.48809 20.1212C8.90495 20.4492 10.2418 21.0575 11.42 21.9101C11.5894 22.0307 11.7921 22.0955 12 22.0955C12.2079 22.0955 12.4107 22.0307 12.58 21.9101C13.7582 21.0575 15.0951 20.4492 16.512 20.1212C17.9288 19.7932 19.397 19.752 20.83 20.0001C21.0899 20.05 21.3589 19.9949 21.5782 19.8468C21.7975 19.6988 21.9492 19.4698 22 19.2101C22.0214 19.0801 22.0169 18.9471 21.9867 18.8188C21.9565 18.6905 21.9013 18.5694 21.8242 18.4625C21.747 18.3557 21.6495 18.2651 21.5373 18.196C21.425 18.127 21.3002 18.0808 21.17 18.0601Z" fill="currentColor"></path></svg> Tutorials
</a> </div> </details> <a href="/blog/" data-astro-prefetch="" class="link"> Blog</a> <div class="flex flex-col gap-6"> <div class="flex items-center gap-4"> <a target="_blank" rel="noopener noreferer" class="link flex items-center gap-2 text-white" href="/chat"> <span class="sr-only">Join the Astro community on Discord</span> <svg viewBox="0 0 16 16" aria-hidden="true" width="24" height="24" astro-icon="social/discord"><path fill="currentColor" d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z"></path></svg> </a><a target="_blank" rel="noopener noreferer" class="link flex items-center gap-2 text-white" href="https://x.com/astrodotbuild"> <span class="sr-only">Follow Astro on x.com (formerly Twitter)</span> <svg viewBox="0 0 24 24" aria-hidden="true" width="24" height="24" astro-icon="social/twitter"><path fill="currentColor" d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></svg> </a><a target="_blank" rel="noopener noreferer" class="link flex items-center gap-2 text-white" href="https://github.com/withastro/astro"> <span class="sr-only">Go to Astro's GitHub repo</span> <svg viewBox="0 0 16 16" aria-hidden="true" width="24" height="24" astro-icon="social/github"><path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg> </a> </div> <a href="https://docs.astro.build/" class="button button-primary">Read the docs</a> <a href="https://studio.astro.build/" class="button button-white">Astro Studio</a> </div> </nav> </div> </header> </div> <main id="main" class="relative z-10 flex flex-1 flex-col" data-astro-cid-ouamjn2i=""> <section class="relative"> <div class="mt-16 md:mt-20 lg:mt-24 px-4 sm:px-8 mx-auto w-full sm:max-w-screen-md flex flex-col items-center justify-center gap-5 md:gap-6 lg:gap-8"> <a href="/blog/cloudinary-astro-sdk-launch/" class="h-9 group w-fit flex items-center justify-center gap-0 bg-astro-dark-900/55 backdrop-blur-3xl rounded-full"> <div class="px-3 h-full w-fit flex items-center gap-2 bg-gradient-to-tr from-[#1321AC] to-[#881ABD] rounded-full"> <span class="text-sm text-white font-light">Astro x Cloudinary SDK</span> <svg xmlns="http://www.w3.org/2000/svg" class="size-4 text-white block sm:hidden" viewBox="0 0 24 24"> <path fill="currentColor" d="m16.172 11l-5.364-5.364l1.414-1.414L20 12l-7.778 7.778l-1.414-1.414L16.172 13H4v-2z"></path> </svg> </div> <div class="hidden sm:flex px-3 h-full w-fit items-center justify-center gap-2"> <span class="text-sm text-astro-gray-100 group-hover:underline font-light">Now available to try!</span> <svg xmlns="http://www.w3.org/2000/svg" class="size-4 text-astro-gray-100" viewBox="0 0 24 24"> <path fill="currentColor" d="m16.172 11l-5.364-5.364l1.414-1.414L20 12l-7.778 7.778l-1.414-1.414L16.172 13H4v-2z"></path> </svg> </div> </a> <div class="flex flex-col items-center"> <h1 class="text-balance mb-4 text-center text-3xl/[1.1] font-bold font-heading sm:max-w-[24ch] md:text-4xl/[1.1] xl:text-5xl/[1.1]">
The web framework for content-driven websites
</h1> <p class="body body-large px-2 text-center text-astro-gray-200 md:px-8 sm:max-w-5xl" style="text-wrap: balance;"> Astro powers the world's fastest marketing sites, blogs, e-commerce websites, and more. </p> </div> <div class="grid grid-rows-2 gap-2"> <a href="https://docs.astro.build/" class="primary w-full h-fit px-4 py-2 group inline-flex items-center justify-center gap-2 rounded-full border text-base font-normal transition-all ease-in-out duration-500 hover:cursor-pointer" data-astro-cid-6ixtg63z=""> <span class="bg-clip-text text-transparent bg-blue-purple-gradient group-hover:text-astro-blue transition-all ease-in-out duration-500">
Get Started
</span> </a> <div data-code-block="" class="px-4 py-2 bg-astro-dark-900/55 backdrop-blur-lg rounded-xl"> <div class="group h-full flex items-center"> <svg width="22" height="13" viewBox="0 0 22 13" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-2 relative block w-3 -rotate-90 text-astro-gray-200 " aria-hidden="true"><path d="M1 1L11 11L21 1" stroke="currentColor" stroke-width="2"></path></svg> <code data-code="" class="flex-1 font-mono font-light text-sm text-astro-gray-200 mr-2"> npm create astro@latest </code> <div class="relative"> <button data-copy-button="" class="block mr-1 transition hover:scale-110 active:scale-100 active:transition-colors text-astro-gray-200 group-hover:text-astro-gray-100" title="Copy to clipboard"> <svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24"> <path fill="currentColor" d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.006-1zM5.002 8L5 20h10V8zM9 6h8v10h2V4H9z"></path> </svg> </button> <p data-tooltip="" class="absolute left-1/2 top-[calc(100%+8px)] -translate-x-1/2 whitespace-nowrap rounded bg-black/50 p-2 text-sm leading-none opacity-0 transition data-[visible=true]:opacity-100" data-visible="false" aria-hidden="true">
Copied!
</p> </div> </div> </div> </div> </div> <img loading="eager" fetchpriority="high" src="/_astro/HeroBackground.B0iWl89K_1mX4z9.webp" alt="" class="blur-lg absolute -z-50 -translate-x-1/2 inset-x-1/2 -inset-y-full w-[2353px] h-[1969px] object-cover max-w-[unset]"> <div class="mt-8 sm:mt-16 xs:p-6 mx-auto w-full max-w-screen-xl space-y-5 sm:space-y-8 p-4 sm:p-8"> <div class="landing-section gap-4 sm:gap-6"> <p class="text-astro-gray-1280 font-light text-base text-balance">
Used by some of the largest companies around the world:
</p> <div class="flex flex-wrap lg:flex-nowrap items-center justify-center gap-x-8 gap-y-6 px-4"> <svg viewBox="0 0 74 24" aria-label="Google" class="h-9" astro-icon="logos/google"><path fill="currentColor" d="M9.24 8.19v2.46h5.88c-.18 1.38-.64 2.39-1.34 3.1-.86.86-2.2 1.8-4.54 1.8-3.62 0-6.45-2.92-6.45-6.54s2.83-6.54 6.45-6.54c1.95 0 3.38.77 4.43 1.76L15.4 2.5C13.94 1.08 11.98 0 9.24 0 4.28 0 .11 4.04.11 9s4.17 9 9.13 9c2.68 0 4.7-.88 6.28-2.52 1.62-1.62 2.13-3.91 2.13-5.75 0-.57-.04-1.1-.13-1.54H9.24zM25 6.19c-3.21 0-5.83 2.44-5.83 5.81 0 3.34 2.62 5.81 5.83 5.81s5.83-2.46 5.83-5.81c0-3.37-2.62-5.81-5.83-5.81zm0 9.33c-1.76 0-3.28-1.45-3.28-3.52 0-2.09 1.52-3.52 3.28-3.52s3.28 1.43 3.28 3.52c0 2.07-1.52 3.52-3.28 3.52zM53.58 7.49h-.09c-.57-.68-1.67-1.3-3.06-1.3C47.53 6.19 45 8.72 45 12c0 3.26 2.53 5.81 5.43 5.81 1.39 0 2.49-.62 3.06-1.32h.09v.81c0 2.22-1.19 3.41-3.1 3.41-1.56 0-2.53-1.12-2.93-2.07l-2.22.92c.64 1.54 2.33 3.43 5.15 3.43 2.99 0 5.52-1.76 5.52-6.05V6.49h-2.42v1zm-2.93 8.03c-1.76 0-3.1-1.5-3.1-3.52 0-2.05 1.34-3.52 3.1-3.52 1.74 0 3.1 1.5 3.1 3.54.01 2.03-1.36 3.5-3.1 3.5zM38 6.19c-3.21 0-5.83 2.44-5.83 5.81 0 3.34 2.62 5.81 5.83 5.81s5.83-2.46 5.83-5.81c0-3.37-2.62-5.81-5.83-5.81zm0 9.33c-1.76 0-3.28-1.45-3.28-3.52 0-2.09 1.52-3.52 3.28-3.52s3.28 1.43 3.28 3.52c0 2.07-1.52 3.52-3.28 3.52zM58 .24h2.51v17.57H58zM68.26 15.52c-1.3 0-2.22-.59-2.82-1.76l7.77-3.21-.26-.66c-.48-1.3-1.96-3.7-4.97-3.7-2.99 0-5.48 2.35-5.48 5.81 0 3.26 2.46 5.81 5.76 5.81 2.66 0 4.2-1.63 4.84-2.57l-1.98-1.32c-.66.96-1.56 1.6-2.86 1.6zm-.18-7.15c1.03 0 1.91.53 2.2 1.28l-5.25 2.17c0-2.44 1.73-3.45 3.05-3.45z"></path></svg><svg fill="none" viewBox="0 0 579 112" aria-label="Microsoft" class="h-6" astro-icon="logos/microsoft"><path fill="#fff" d="M579 50.87V36.801h-17.471V14.93l-.588.18-16.411 5.022-.323.098v16.573h-25.901V27.57c0-4.3.961-7.59 2.855-9.783 1.882-2.168 4.573-3.27 8.005-3.27 2.467 0 5.021.581 7.592 1.727l.645.288V1.716l-.303-.112c-2.399-.862-5.661-1.296-9.704-1.296-5.096 0-9.726 1.109-13.764 3.307-4.041 2.2-7.219 5.343-9.446 9.337-2.218 3.99-3.344 8.599-3.344 13.699V36.8h-12.166v14.07h12.166v59.27h17.464v-59.27h25.901v37.665c0 15.513 7.317 23.374 21.748 23.374 2.371 0 4.867-.278 7.415-.822 2.594-.559 4.361-1.117 5.401-1.713l.23-.136v-14.2l-.711.47c-.948.632-2.128 1.148-3.512 1.532-1.389.39-2.55.587-3.45.587-3.38 0-5.881-.911-7.433-2.709-1.569-1.814-2.365-4.986-2.365-9.423V50.87H579ZM449.675 97.63c-6.338 0-11.336-2.102-14.858-6.242-3.544-4.161-5.339-10.094-5.339-17.632 0-7.776 1.795-13.863 5.34-18.098 3.525-4.206 8.474-6.342 14.715-6.342 6.056 0 10.876 2.04 14.329 6.064 3.47 4.046 5.232 10.084 5.232 17.952 0 7.964-1.656 14.081-4.922 18.174-3.244 4.06-8.121 6.124-14.497 6.124Zm.777-62.596c-12.094 0-21.699 3.544-28.548 10.533-6.844 6.99-10.315 16.662-10.315 28.752 0 11.483 3.388 20.72 10.069 27.448 6.682 6.731 15.775 10.141 27.025 10.141 11.723 0 21.137-3.593 27.983-10.679 6.845-7.078 10.313-16.66 10.313-28.466 0-11.663-3.254-20.968-9.675-27.652-6.424-6.687-15.46-10.077-26.852-10.077Zm-67.02 0c-8.227 0-15.032 2.105-20.23 6.253-5.23 4.174-7.882 9.648-7.882 16.271 0 3.443.572 6.502 1.699 9.096 1.134 2.602 2.888 4.894 5.219 6.817 2.313 1.907 5.884 3.906 10.615 5.939 3.978 1.636 6.945 3.02 8.829 4.112 1.842 1.07 3.149 2.144 3.887 3.192.717 1.024 1.081 2.427 1.081 4.157 0 4.927-3.69 7.325-11.282 7.325-2.816 0-6.029-.588-9.548-1.748a35.883 35.883 0 0 1-9.777-4.957l-.725-.52v16.814l.266.124c2.471 1.14 5.587 2.102 9.259 2.859 3.665.758 6.995 1.143 9.888 1.143 8.927 0 16.115-2.114 21.361-6.288 5.278-4.202 7.954-9.805 7.954-16.657 0-4.944-1.441-9.183-4.279-12.602-2.819-3.392-7.713-6.505-14.538-9.257-5.437-2.182-8.92-3.994-10.357-5.385-1.386-1.343-2.089-3.243-2.089-5.649 0-2.133.868-3.841 2.651-5.225 1.796-1.39 4.296-2.098 7.432-2.098 2.91 0 5.887.46 8.848 1.36 2.958.901 5.557 2.108 7.726 3.584l.714.487v-15.95l-.274-.117c-2.001-.859-4.64-1.593-7.846-2.189-3.191-.592-6.085-.89-8.602-.89ZM309.791 97.63c-6.337 0-11.337-2.102-14.858-6.242-3.544-4.161-5.336-10.092-5.336-17.632 0-7.776 1.794-13.863 5.34-18.098 3.521-4.206 8.47-6.342 14.714-6.342 6.053 0 10.874 2.04 14.328 6.064 3.471 4.046 5.231 10.084 5.231 17.952 0 7.964-1.657 14.081-4.922 18.174-3.244 4.06-8.118 6.124-14.497 6.124Zm.779-62.596c-12.097 0-21.703 3.544-28.548 10.533-6.844 6.99-10.317 16.662-10.317 28.752 0 11.488 3.39 20.72 10.072 27.448 6.681 6.731 15.774 10.141 27.024 10.141 11.721 0 21.137-3.593 27.983-10.679 6.844-7.078 10.313-16.66 10.313-28.466 0-11.663-3.255-20.968-9.677-27.652-6.426-6.687-15.46-10.077-26.85-10.077Zm-65.375 14.468v-12.7h-17.251v73.338h17.251V72.624c0-6.379 1.446-11.62 4.3-15.578 2.818-3.911 6.573-5.893 11.158-5.893 1.554 0 3.298.256 5.187.763 1.87.504 3.224 1.05 4.023 1.627l.725.525V36.676l-.28-.12c-1.606-.683-3.879-1.027-6.755-1.027-4.335 0-8.215 1.393-11.538 4.135-2.917 2.411-5.025 5.716-6.637 9.838h-.183Zm-48.146-14.468c-7.914 0-14.974 1.697-20.978 5.043-6.017 3.353-10.67 8.14-13.836 14.228-3.152 6.072-4.753 13.166-4.753 21.077 0 6.929 1.552 13.288 4.619 18.892 3.068 5.614 7.411 10.006 12.909 13.052 5.49 3.042 11.835 4.584 18.86 4.584 8.199 0 15.199-1.639 20.811-4.871l.226-.13V91.104l-.725.53a32.424 32.424 0 0 1-8.44 4.394c-3.049 1.064-5.829 1.602-8.266 1.602-6.769 0-12.204-2.118-16.148-6.294-3.953-4.181-5.958-10.053-5.958-17.441 0-7.435 2.091-13.457 6.21-17.9 4.107-4.431 9.551-6.679 16.181-6.679 5.67 0 11.195 1.92 16.423 5.712l.723.526V38.9l-.233-.132c-1.967-1.101-4.651-2.01-7.981-2.7-3.317-.688-6.561-1.035-9.644-1.035Zm-51.448 1.768h-17.252v73.338h17.252V36.802Zm-8.45-31.243c-2.839 0-5.315.967-7.35 2.882-2.043 1.921-3.079 4.34-3.079 7.194 0 2.809 1.024 5.183 3.047 7.053 2.011 1.864 4.495 2.809 7.383 2.809s5.381-.945 7.416-2.806c2.047-1.873 3.086-4.246 3.086-7.056 0-2.755-1.011-5.148-3.002-7.116-1.99-1.964-4.514-2.96-7.501-2.96ZM94.108 31.391v78.749h17.606V7.804H87.347L56.374 83.816 26.317 7.804H.957V110.14h16.546V31.383h.568l31.74 78.757h12.485L93.54 31.39h.568Z"></path></svg><svg viewBox="0 0 295 97" aria-label="The Guardian" class="h-8" astro-icon="logos/theguardian"><path fill="currentColor" d="M66.9 51.7c1-.5 2.1-1.1 3.1-1.6.4-.2 1.8-.7 2-1.1.1-.2 0-.8 0-1.1V9.5c0-.1.1-.8 0-.9-.1-.1-.9 0-1 0h-2.2c-.8 0-.7.1-1.2.7-1.9 2.5-3.8 5-5.7 7.6-.9 1.2-1.8 2.3-2.6 3.5-.6.8-.6.9-1.7.9l.3-6.6c.1-1.6.1-3.2.2-4.8 0-.6.1-1.2.1-1.8 0-.2-.1-.8 0-.9.2-.3 2-.1 2.5-.1h37.4c.2 0 1.1-.1 1.3 0 .2.1.1.7.1 1 .1 1.3.1 2.7.2 4 .1 2.9.2 5.7.4 8.6v.6c-.5 0-.9.1-1.3-.2-.4-.3-.7-.9-1-1.3-1.2-1.6-2.4-3.3-3.7-4.9l-3.6-4.8c-.2-.3-.5-1-.9-1.2-.3-.2-.9-.1-1.3-.1h-1.6c-.2 0-1-.1-1.2 0-.1.1 0 .1-.1.3-.2.8 0 1.8 0 2.6v34.8c0 .7-.2 1.7 0 2.4s1.8 1.2 2.5 1.5c.7.4 1.9.7 2.5 1.3.2.2.4 1.2.2 1.5-.1.1-.6 0-.7 0h-22c-.2 0-.9.1-1 0-.1-.4 0-1.2 0-1.5zm37.1-1.8V7.5c0-.6.2-1.5 0-2.1-.2-.7-1.4-.8-2.1-1.1-.4-.1-1.7-.4-1.9-.8v-.8h.3c.4-.2 1.2-.2 1.7-.3.9-.2 1.8-.3 2.6-.5 2-.4 4.1-.8 6.1-1.1 1.2-.2 2.4-.5 3.6-.7.3 0 1.5-.2 1.6 0 .1.1 0 .5 0 .6v20.7c3.8-3.8 10.4-5.9 15.7-4.6 4.6 1.1 6.1 5.4 6.1 9.8.1 5.6 0 11.1 0 16.7v4.5c0 .5-.2 1.7 0 2.2.1.2.5.3.7.5.7.4 1.5.8 2.2 1.2.1.1.4.2.4.3.1.1.1 1 0 1.1-.1.2-.1.1-.4.1-1.1.2-2.3 0-3.3 0h-14.4c-.1 0-.6.1-.7 0-.1-.1-.1-1.2 0-1.3.3-.4 1.5-.8 1.9-1.1.3-.2 1.2-.5 1.4-.8.2-.3 0-1.4 0-1.7v-4.1c0-5.8.1-11.7 0-17.5 0-1.7-.3-3.7-2-4.6-.9-.5-2.1-.6-3.1-.6-.8 0-1.6.2-2.3.4-.6.2-1.7.6-2.1 1.1-.3.4-.1 1-.1 1.5v23.6c0 .5-.2 1.5 0 1.9.1.2.5.4.8.5.7.4 1.6.8 2.3 1.2.1.1.3.1.3.2.1.1.1 1 0 1.1-.1.1-.2.1-.4.1-1.1.1-2.3 0-3.4 0h-14.4c-.1 0-.6.1-.7 0-.1-.1 0-1.1.1-1.3.3-.4 1.4-.8 1.8-1 .7-.3 1.2-.6 1.7-.9zm47.5-13.8c.2 4.4 1.6 9.3 5.6 11.7 2.1 1.2 4.7 1.6 7.1 1.4 2.9-.3 5.3-1.7 7.8-3 0 .4.1 1.1 0 1.5-.2.4-.7.9-1 1.2-.4.4-.9.9-1.4 1.3-1.7 1.4-3.6 2.4-5.6 3.1-3.8 1.3-8.2 1.2-12.1.2-3.1-.8-5.9-2.3-8-4.7-2.1-2.4-3.3-5.5-3.8-8.7-1.1-6.9.2-14.8 5.9-19.4 5-4 13-4.8 18.9-2.4 7.2 2.9 8.4 11.1 8.4 17.9h-19.1c-.9-.1-1.8-.1-2.7-.1zm-.2-1.7c2-.1 4-.2 6.1-.4 1.2-.1 2.5-.1 3.7-.2.2 0 .7 0 .9-.1.3-.2.1-2.2.1-2.6-.1-3.6-.2-8-2.3-11.1-1.5-2.2-3.8-1.8-5.2.2-2.9 3.9-3.3 9.7-3.3 14.2zM-.1 70.9c0-5.6 1.1-11.4 4.2-16.1 3-4.6 7.8-7.6 13-9.1 6.3-1.8 13.3-1.6 19.8-.4 1.4.3 2.8.6 4.1 1 .2.1 1.1.3 1.2.5v.3c.3 1.2.1 2.7.1 3.9.1 3.1.1 6.3.2 9.4-.4 0-1.1.1-1.4 0-.2-.1-.4-.6-.5-.8-.8-1.2-1.6-2.4-2.3-3.7-1.7-2.7-3.5-5.4-5.2-8.1-.9-1.5-3.4-1.5-5-1.5-1.8 0-3.6.3-5.1 1.2-3.4 2.1-5 6.2-5.9 9.9-1.4 5.9-1.3 12.1-1 18.1.3 4.6.7 9.5 2.5 13.7 1.1 2.6 3 4.9 5.9 5.5.9.2 1.8.2 2.8.1.6-.1 2.7-.2 3-.8.1-.2 0-.7 0-.9V76.7c0-.7.2-1-.4-1.4-.7-.4-1.5-.8-2.2-1.3-.5-.3-1.5-.6-1.8-1-.2-.2-.3-1.3-.1-1.5.1-.2.1-.1.4-.1.9-.2 2.1 0 3 0h15.5c1 0 2.1-.1 3.1 0h.4c.1.1.1 1.5 0 1.7-.2.3-1.2.7-1.6.9-.7.4-1.5.8-2.2 1.3-.8.4-.7.4-.7 1.3v16.3c0 .2.1.7 0 .9-.2.5-2.3.8-2.9 1-1.7.5-3.5.9-5.3 1.2-3.5.6-7 .8-10.5.7-5.6-.2-11.5-1.4-16.1-4.8-4-2.9-6.6-7.3-7.8-12.1C.2 77-.1 73.9-.1 70.9zM46 61.8c0-.2-.1-1 0-1.1.1-.1.2 0 .3-.1.6-.3 1.4-.3 2.1-.4 2.3-.4 4.6-.8 7-1.2 1.8-.3 3.6-.7 5.3-.9.5-.1 1.1-.1 1.6.1.5.1.3 0 .4.4.2 1.2 0 2.6 0 3.8v20.9c0 2.5-.7 7.1 1.7 8.6 1.2.8 2.9.8 4.3.5 1.1-.2 3.2-1 3.6-2.2.1-.3 0-.7 0-1V64.7c0-.2.1-.8 0-1-.3-.3-1.3-.6-1.6-.7-.6-.2-1.1-.5-1.7-.7-.2-.1-.9-.2-1-.4-.1-.1-.1-1 0-1.1.1-.1.1 0 .2-.1.5-.3 1.4-.2 1.9-.3 4.1-.7 8.3-1.6 12.5-2.2.5-.1 1-.1 1.5 0s.3-.1.4.4c.2 1 0 2.4 0 3.5v28.8c0 .3-.1.8 0 1.2.1.3 0 .2.5.4 1 .4 2.1.9 3.1 1.3.3.1.4.1.5.3.1.2.1.9 0 .9-.2.2-1.2.1-1.4.2-2.2.3-4.4.5-6.7.8-2 .2-4 .5-5.9.7-.4.1-.8.1-1.2 0-.2 0-.8 0-.9-.1-.1-.2 0-1 0-1.2v-1.7c0-.3.2-1.1 0-1.4-.2-.3-.6.1-.9.3-.8.7-1.7 1.4-2.6 1.9-3.3 2-7.4 2.9-11.2 2.1-2.8-.6-5.2-2.2-6.4-4.9-.9-1.9-1.1-4-1.1-6v-21c0-.2.1-.8 0-1-.2-.3-1.4-.6-1.7-.8-1-.4-1.8-.7-2.6-1.1zm94.3-3.8c.2 0 1.1 0 1.2.2.1.1 0 .8 0 .9v8.8c0 .3-.1.8 0 1.1v.2c.4.4.5-.9.6-1 .9-3.7 2.6-8 6.4-9.5.7-.3 1.4-.4 2.1-.5.6 0 2.3-.2 2.6.3.1.2 0 .7 0 .9v10.2c-2.4-.5-5.1-.4-7.4.1-1.1.2-2.1.5-3.1 1-.5.2-.6.1-.7.5-.1.4 0 1.1 0 1.5V92c0 .2-.1.5 0 .7.2.3.9.5 1.2.6.5.3 1.1.6 1.6.9.2.1.5.2.6.4.1.1.1 1.3 0 1.4-.1.1-.7 0-.9 0h-16.6c-.5 0-1.4.2-1.8 0h-.3c-.1-.1 0-1.2 0-1.3.2-.6 1.5-1 2.1-1.3.4-.2 1.2-.5 1.4-.9.1-.2 0-.8 0-1V63.7c0-.1.1-.6 0-.7-.1-.1-.6-.2-.8-.2-.6-.2-1.2-.4-1.8-.5-.6-.2-2.1-.3-1.6-1.3.1-.3.5-.2.9-.3 4.4-.8 8.7-1.6 13.1-2.4.4-.2.8-.2 1.2-.3zm37.7.9V48.6c0-.3.1-.9 0-1.2-.1-.2-.5-.3-.8-.4-.8-.3-1.6-.6-2.5-.9-.6-.2-.9-.1-.9-.8 0-.6-.1-.4.4-.5 1.1-.4 2.4-.4 3.5-.6 3.3-.6 6.5-1.2 9.8-1.8.7-.1 1.4-.3 2.1-.2.8.1.9-.1.9.6.1 1.6 0 3.3 0 4.9v43.8c0 .4-.1.4.2.6.6.4 1.6.6 2.2.8.4.1 1.5.3 1.7.6.1.1.1 1.2 0 1.3-.1.1-.7.1-.8.1-1.4.2-2.7.4-4.1.5-3.1.4-6.2.8-9.4 1.2-.5.1-1.7.3-1.9-.1-.2-.4 0-1.7 0-2.1 0-.3.2-1.6 0-1.8-.2-.2-2.4 1.8-2.7 2-1.2.8-2.5 1.4-3.9 1.8-2.2.6-4.7.6-6.9.1-9.6-2.2-11.6-13.6-10.8-21.9.4-4.4 1.8-8.8 4.8-12 2.8-2.9 6.6-4.4 10.5-4.7 3-.3 5.9-.1 8.6 1zm0 31.9V61.6c0-.6-.1-.7-.8-1.1-1.4-.8-3.2-1.1-4.7-.5-2.3.9-3.4 3.6-4 5.8-1.2 4-1.3 8.3-1.2 12.5.1 3.6.2 8 2.2 11.2 1.8 2.8 5.9 3.5 8.5 1.3zM211.1 58c.5.1 1.1-.1 1.3.4.1.3 0 1 0 1.3V91c0 .4-.1 1 0 1.4.1.4.5.5.9.7.6.3 1.1.6 1.7.9.2.1.8.3.9.6 0 .1.1 1.3 0 1.4h-.3c-.6.1-1.4 0-2.1 0h-15.2c-.4 0-1.5.2-1.8 0-.2-.1-.3-1.3-.1-1.5.2-.3.9-.5 1.2-.6.6-.3 1.2-.7 1.8-1 .5-.3.4-.2.4-.6.2-1.5 0-3.2 0-4.7V65.3c0-.4.1-1.1 0-1.5-.1-.4-.6-.4-1-.6-.7-.3-1.3-.5-2-.8-.2-.1-1-.2-1.2-.5-.1-.1-.1-1.1 0-1.2.1-.1.3 0 .4-.1.8-.3 1.7-.3 2.6-.5 1.3-.2 2.5-.5 3.8-.7 2.5-.4 4.9-.9 7.4-1.3.5.1.9 0 1.3-.1zm1.4-9.3c-.2 6-8.3 8.6-12 3.9-1.7-2.2-1.8-5.2-.3-7.5s4.4-3.3 7.1-2.7c3 .6 5.2 3.2 5.2 6.3zm43.8 43.9V63.9c0-.1.1-.6 0-.7-.1-.2-.7-.3-.9-.3l-1.8-.6c-.3-.1-1.1-.2-1.3-.5-.2-.2-.1-.7-.1-1 0-.6.2-.5.8-.6l6.6-1.2 6.6-1.2c.4-.1.7-.2 1.1-.2.2 0 1.2 0 1.4.1.1.1 0 .7 0 .9v1.9c0 .3-.2 1.2 0 1.5.2.4.6 0 .9-.3.9-.7 1.8-1.3 2.8-1.8 3.6-2 7.9-2.9 12-2.3 2.8.4 5.1 1.9 6.1 4.6.7 1.9.8 3.9.8 5.9v22.8c0 .4-.1 1.1 0 1.5.1.4.4.5.9.7.5.3 1.1.6 1.6.9.2.1.9.3 1 .6.1.2.1 1.2 0 1.3-.1.2.1 0-.2.1-.4.2-1.3 0-1.8 0h-14.3c-.6 0-2.9.3-3.2-.1-.1-.1-.1-1.2 0-1.4.1-.2.7-.4.9-.5.6-.3 1.1-.6 1.7-.9.2-.1.8-.3.9-.5.1-.2 0-.6 0-.8V69.1c0-1.6.1-3.4-.9-4.8-.8-1.2-2.2-1.5-3.6-1.6-1.1 0-2.1.1-3.1.4-.5.2-2 .6-2.3 1.2-.1.2 0 .6 0 .8V91c0 .3-.1 1 0 1.3.1.4.7.5 1 .7.5.3 1.1.6 1.6.9.2.1.6.3.7.4.1.1.1 1.3 0 1.4 0 .1-.1 0-.2 0-.4.2-1.4 0-1.8 0h-16.8c-.5 0-.6.1-.7-.2-.1-.2-.1-1.1 0-1.3.1-.2.7-.4.9-.5 1-.1 1.8-.6 2.7-1.1zm-21.2-18.4c0-2.6.1-5.3-.1-8-.3-2.9-1.1-6.1-4.4-6.7-1-.2-2.8-.5-3.5.3-.7.7-1.2 1.7-1.8 2.5l-5.1 6.9c-.3.4-.6 1.2-1 1.4-.1.1-1.1.1-1.1 0-.1-.1 0-.8 0-1v-8.1c0-.3-.1-.8 0-1.1.2-.5 2.4-.8 2.9-1 2.8-.7 5.7-1.2 8.6-1.4 4.1-.3 8.7-.2 12.5 1.6 3 1.4 4.9 3.9 5.4 7.1.3 1.6.2 3.4.2 5v20c0 .3-.2 1.1 0 1.3.1.1.6.2.7.2.8.2 1.5.4 2.3.6.5.1.6.1.6.6s.1.5-.5.7c-.7.3-1.4.6-2.1.8-3.7 1.1-9.5 1.4-12.2-2-.2-.3-.8-1.6-1.1-1.7-.4-.1-1.6 1.5-2 1.8-1.6 1.4-3.7 2.2-5.8 2.5-3.9.5-8.1-.3-10.5-3.7-2-2.9-2.4-7.4-.9-10.6 2.7-6.1 10.7-6.7 16.5-7.7.7 0 1.5-.2 2.4-.3zm0 16.6V76c-3 .2-6.1.4-7.2 3.7-.8 2.2-.8 4.8-.5 7.1.2 1.6.6 3.6 2.1 4.6 1.6 1.1 4.3.9 5.6-.6zM108.5 74.2c0-2.6.1-5.3-.1-8-.3-2.9-1.1-6.1-4.4-6.7-1-.2-2.8-.5-3.5.3-.7.7-1.2 1.7-1.8 2.5l-5.1 6.9c-.3.4-.6 1.2-1 1.4-.1.1-1.1.1-1.1 0-.1-.1 0-.8 0-1v-8c0-.3-.1-.8 0-1.1.2-.5 2.3-.8 2.9-1 2.8-.7 5.7-1.2 8.5-1.4 4.1-.3 8.7-.2 12.5 1.6 3 1.4 4.9 3.9 5.4 7.1.3 1.6.2 3.4.2 5v20c0 .3-.2 1.1 0 1.3.1.1.6.2.7.2.8.2 1.5.4 2.3.6.5.1.6.1.6.6s.1.5-.5.7c-.7.3-1.4.6-2.1.8-3.7 1.1-9.5 1.4-12.2-2-.2-.3-.8-1.6-1.1-1.7-.4-.1-1.6 1.5-1.9 1.8-1.6 1.4-3.7 2.2-5.8 2.5-3.9.5-8.1-.3-10.5-3.7-2-2.9-2.4-7.4-.9-10.6 2.7-6.1 10.7-6.7 16.4-7.7.8-.1 1.6-.3 2.5-.4zm0 16.6V76c-3 .2-6.1.4-7.2 3.7-.8 2.2-.8 4.8-.5 7.1.2 1.6.6 3.6 2.1 4.6 1.6 1.1 4.3.9 5.6-.6z"></path></svg><svg viewBox="0 0 142 31" aria-label="NordVPN" class="h-8" astro-icon="logos/nordvpn"><g fill="currentColor" fill-rule="evenodd"><path d="M139.996 13A1.994 1.994 0 0 1 138 11a2 2 0 1 1 4 0 2 2 0 0 1-2.004 2zm0-3.636c-.896 0-1.617.727-1.617 1.636 0 .91.721 1.636 1.617 1.636.89 0 1.625-.727 1.625-1.636 0-.91-.736-1.636-1.625-1.636zm-.298 1.956v.822h-.474V9.858h.904c.444 0 .816.233.816.72a.661.661 0 0 1-.438.655l.474.909h-.517l-.416-.822h-.35zm.765-.727c0-.226-.19-.284-.372-.284h-.393v.567h.4c.175 0 .365-.072.365-.283zM59.18 24l-6.84-10.26V24H49.3V9.123h3.515l6.46 9.709V9.123h3.04V24H59.18zm4.946-5.054c0-3.021 2.489-5.32 5.567-5.32 3.059 0 5.51 2.242 5.51 5.263 0 3.059-2.489 5.339-5.548 5.339-3.078 0-5.529-2.223-5.529-5.282zm3.04-.038c0 1.539 1.121 2.603 2.508 2.603s2.489-1.064 2.489-2.603c0-1.52-1.121-2.584-2.508-2.584s-2.489 1.064-2.489 2.584zm15.304-5.054v2.907c-.399-.076-.817-.076-.95-.076-1.425 0-2.413.988-2.413 2.869V24H76.2V13.854h2.812v1.482h.038c.551-1.159 1.577-1.596 2.622-1.596.228 0 .589.057.798.114zM91.031 24v-1.292h-.038c-.95 1.387-2.47 1.482-3.154 1.482-2.945 0-4.826-2.546-4.826-5.282 0-2.565 1.957-5.244 4.864-5.244.589 0 1.995.114 3.04 1.349h.038V8.534H93.9V24h-2.869zm0-5.092c0-1.52-1.121-2.565-2.508-2.565s-2.508 1.045-2.508 2.565c0 1.539 1.121 2.603 2.508 2.603s2.508-1.064 2.508-2.603zM100.199 24 94.822 9.123h3.325l3.857 11.305 3.876-11.305h3.268L103.752 24h-3.553zm21.062-10.108c0 3.287-2.318 4.864-5.434 4.864h-2.337V24h-3.078V9.123h5.529c2.983 0 5.32 1.615 5.32 4.769zm-3.097.076c0-1.444-1.216-1.938-2.489-1.938h-2.185v3.857h2.204c1.216 0 2.47-.532 2.47-1.919zM132.69 24l-6.84-10.26V24h-3.04V9.123h3.515l6.46 9.709V9.123h3.04V24h-3.135zM3.71 31A19.472 19.472 0 0 1 0 19.534C0 8.745 8.728 0 19.494 0c10.767 0 19.494 8.745 19.494 19.534A19.47 19.47 0 0 1 35.278 31l-9.363-15.235-.904 1.53.917 4.254-6.434-11.03-3.98 6.733.927 4.297-3.373-5.776L3.71 31z"></path></g></svg><svg fill="currentColor" viewBox="0 0 4500 300" aria-label="Porsche" class="h-3.5" astro-icon="logos/porsche"><path d="M502 221c48 0 74-26 74-74V74c0-48-26-74-74-74H0v300h68v-79h434zm6-143v65c0 8-4 12-12 12H68V66h428c8 0 12 4 12 12zm228 222c-48 0-74-26-74-74V74c0-48 26-74 74-74h417c48 0 74 26 74 74v152c0 48-26 74-74 74H736zm411-66c8 0 12-4 12-12V78c0-8-4-12-12-12H742c-8 0-12 4-12 12v144c0 8 4 12 12 12h405zm675-36c40 17 68 56 68 102h-68c0-54-25-79-79-79h-361v79h-68V0h502c48 0 74 26 74 74v50c0 46-24 72-68 74zm-12-43c8 0 12-4 12-12V78c0-8-4-12-12-12h-428v89h428zm162-81c0-48 26-74 74-74h492v56h-486c-8 0-12 4-12 12v42c0 8 4 12 12 12h422c48 0 74 26 74 74v30c0 48-26 74-74 74h-492v-56h486c8 0 12-4 12-12v-42c0-8-4-12-12-12h-422c-48 0-74-26-74-74V74zm661 0c0-48 26-74 74-74h480v66h-474c-8 0-12 4-12 12v144c0 8 4 12 12 12h474v66h-480c-48 0-74-26-74-74V74zM3817 0v300h-68V183h-407v117h-68V0h68v117h407V0h68zm156 56v66h527v56h-527v66h527v56h-595V0h595v56h-527z"></path></svg><svg fill="currentColor" viewBox="0 0 199 22" aria-label="NBC News" class="h-5" astro-icon="logos/nbc-news"><path d="m101.7 14.68-.11-.14-.15-.18c-1.94 1.76-3.18 2.75-5.98 2.75h-.12A6.2 6.2 0 0 1 89.1 11a6.2 6.2 0 0 1 6.27-6.13c2.78.02 4.25 1.61 4.96 2.37l.11.12.08-.08.01-.02.07-.07.12-.13 2.97-3.15c-.36-.39-3.14-3.9-8.29-3.9a10.92 10.92 0 0 0-10.9 10.95c0 5.99 4.74 11.02 10.85 11.04 4.59 0 6.92-1.99 9.07-3.95l-2.72-3.36Zm-18.98.19c0 5.69-4.28 6.58-6.96 6.58H64.33V.56h11.42c3.5 0 6.3 2.11 6.3 6.07a4 4 0 0 1-2.28 3.57c1.62.87 2.95 2.15 2.95 4.67ZM68.51 4.47v3.96h6.74c1.1 0 2.33-.5 2.33-1.97s-.95-1.99-2.49-1.99h-6.58Zm9.77 10.4c0-2-1.57-2.52-3.1-2.52H68.5v4.99h6.83c1.24 0 2.94-.46 2.94-2.47ZM42.24.56h4.61l9.5 13.5V.57h4.32v20.89h-4.61L46.56 7.9v13.54h-4.32V.55Zm108.18 16.49v4.4h-16.7V.54h16.46v4.2H137.9v3.67h10.52v4.19H137.9v4.43h12.52ZM111.63.55h4.61l9.5 13.51V.56h4.32v20.88h-4.61l-9.5-13.54v13.54h-4.32V.55Zm63.58 0-3.61 13.62L167.88.55h-4.48l-3.72 13.62L156.07.55h-4.09l5.4 20.9h4.4l3.86-13.16 3.87 13.15h4.4L179.3.55h-4.09Zm18.97 9.12c-3.3-1.5-9.18-.36-9.14-3.22.02-1.1 1.53-2.05 3.96-2.07 2.73-.03 6.2 1.52 6.2 1.52l2.2-3.72S192.94 0 189.09 0c-5.87 0-8.64 2.75-8.64 6.18 0 3.52 1.86 4.91 2.87 5.43 3.26 1.69 6.92 1.23 8.89 2.28 2.16 1.14 1.3 3.88-3.12 3.5a15 15 0 0 1-7.5-2.45l-2.41 3.6a20.67 20.67 0 0 0 9.91 3.46c3.44.02 9.01-.95 8.92-6.96-.04-2.44-1.16-4.17-3.82-5.37ZM15.5 21.44 5.67 14.5c-2.5-1.77-4.97.04-5.5 1.9-.77 2.76.96 5.05 3.68 5.05h11.63Zm15.44 0c2.72 0 4.45-2.3 3.68-5.05-.53-1.87-3-3.68-5.5-1.9l-9.82 6.95h11.64ZM24.85 5.26 19.81 17.5 18.38 6.86c-.19-1.44 2.12-2.33 2.12-2.33-.2-.5-.94-.5-.94-.5H18A3.57 3.57 0 0 1 22.39.12c2.37.56 3.23 3.3 2.46 5.15Zm-8.07-1.05c.37-2.7-1.9-4.7-4.37-4.1-2.37.56-3.23 3.3-2.46 5.16l5.04 12.22 1.8-13.28Zm-2.2 15.29L9.75 7.79C8.62 5.07 5.62 4.73 3.96 6.33 2.8 7.45 1.9 10.5 4.5 12.35l10.08 7.15Zm15.72-7.15c2.6-1.84 1.7-4.9.54-6.02-1.66-1.6-4.66-1.26-5.79 1.46l-4.83 11.7 10.08-7.14Z"></path></svg> </div> </div> </div> </section> <section class="mt-20 sm:mt-36 xs:p-6 mx-auto w-full max-w-screen-xl space-y-8 p-4 sm:p-8" data-astro-cid-rreterqb=""> <div class="space-y-1" data-astro-cid-rreterqb=""> <span class="bg-clip-text text-transparent bg-red-pink-gradient font-semibold" data-astro-cid-rreterqb="">What is Astro?</span> <h2 class="max-w-screen-lg text-balance text-2xl font-light font-heading md:text-3xl xl:text-4xl md:leading-tight" data-astro-cid-rreterqb=""> <strong data-astro-cid-rreterqb="">Astro</strong> is a JavaScript web framework optimized for building fast, content-driven
websites.
</h2> </div> <div class="grid grid-cols-1 gap-8 md:grid-cols-2 md:gap-12 lg:grid-cols-3" data-astro-cid-rreterqb=""> <div> <div> <div class="size-fit rounded-full p-0.5 lg:p-[3px] from-astro-blue/25 to-astro-green/25 bg-blue-green-gradient" data-astro-cid-rreterqb=""> <div class="size-12 lg:size-14 landing-section bg-black text-white rounded-full" data-astro-cid-rreterqb=""> <div class="size-full landing-section bg-gradient-to-br rounded-full" data-astro-cid-rreterqb=""> <svg viewBox="0 0 24 24" data-astro-cid-rreterqb="" class="size-5 lg:size-7" astro-icon="ri:server-line"><path fill="currentColor" d="M5 11h14V5H5v6zm16-7v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1zm-2 9H5v6h14v-6zM7 15h3v2H7v-2zm0-8h3v2H7V7z"></path></svg> </div> </div> </div> </div> <div class="mt-3 space-y-0"> <h2 class="text-base text-white font-semibold">Server-First</h2> <p class="text-astro-gray-200 font-light text-base text-balance">
Astro improves website performance by rendering components on the server, sending
lightweight HTML to the browser with zero unneccessary JavaScript overhead.
</p> </div> </div> <div> <div> <div class="size-fit rounded-full p-0.5 lg:p-[3px] bg-red-pink-gradient" data-astro-cid-rreterqb=""> <div class="size-12 lg:size-14 landing-section bg-black text-white rounded-full" data-astro-cid-rreterqb=""> <div class="size-full landing-section bg-gradient-to-br from-astro-red/20 to-astro-pink/20 rounded-full" data-astro-cid-rreterqb=""> <svg viewBox="0 0 24 24" data-astro-cid-rreterqb="" class="size-5 lg:size-7" astro-icon="ri:file-list-3-line"><path fill="currentColor" d="M19 22H5a3 3 0 0 1-3-3V3a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v12h4v4a3 3 0 0 1-3 3zm-1-5v2a1 1 0 0 0 2 0v-2h-2zm-2 3V4H4v15a1 1 0 0 0 1 1h11zM6 7h8v2H6V7zm0 4h8v2H6v-2zm0 4h5v2H6v-2z"></path></svg> </div> </div> </div> </div> <div class="mt-3 space-y-0"> <h2 class="text-base text-white font-semibold">Content-Driven</h2> <p class="text-astro-gray-200 font-light text-base text-balance">
Astro was designed to work with your content, no matter where it lives. Load data from your
file system, external API, or your favorite CMS.
</p> </div> </div> <div> <div> <div class="size-fit rounded-full p-0.5 lg:p-[3px] bg-orange-yellow-gradient" data-astro-cid-rreterqb=""> <div class="size-12 lg:size-14 landing-section bg-black text-white rounded-full" data-astro-cid-rreterqb=""> <div class="size-full landing-section bg-gradient-to-br from-astro-orange/15 to-astro-yellow/15 rounded-full" data-astro-cid-rreterqb=""> <svg viewBox="0 0 24 24" data-astro-cid-rreterqb="" class="size-5 lg:size-7" astro-icon="ri:dashboard-line"><path fill="currentColor" d="M13 21V11h8v10h-8zM3 13V3h8v10H3zm6-2V5H5v6h4zM3 21v-6h8v6H3zm2-2h4v-2H5v2zm10 0h4v-6h-4v6zM13 3h8v6h-8V3zm2 2v2h4V5h-4z"></path></svg> </div> </div> </div> </div> <div class="mt-3 space-y-0"> <h2 class="text-base text-white font-semibold">Customizable</h2> <p class="text-astro-gray-200 font-light text-base text-balance">
Extend Astro with your favorite tools. Bring your own JavaScript UI components, CSS
libraries, themes, integrations, and more.
</p> </div> </div> </div> </section> <section class="mt-20 md:mt-24 lg:mt-28 xl:mt-36 relative w-full max-w-screen-xl mx-auto px-4 sm:px-8"> <div class="w-full"> <span class="bg-clip-text text-transparent bg-red-pink-gradient font-semibold">Best-In-Class Performance</span> <h2 class="mt-1 font-heading text-2xl lg:text-3xl text-white text-balance"> <strong>Astro Islands</strong> </h2> <p class="mt-3 w-full lg:w-2/3 xl:w-1/2 text-base text-astro-gray-200 lg:text-balance font-light"> Islands optimize your website like no other web framework can. Leverage Astro's unique page load performance to improve conversion rates, Core Web Vitals, and SEO. </p> <div class="mt-4"> </div> </div> <div id="stardust" class="w-full shrink-0 absolute -z-50 rotate-[-7deg] blur-[160px] rounded-full h-56 md:h-80 lg:h-96" data-astro-cid-b2xzbshs=""></div> <div class="mt-8 p-4 sm:p-8 bg-astro-dark-800 border border-astro-dark-100/20 rounded-xl sm:rounded-2xl"> <p class="text-astro-gray-300">Real-World Core Web Vitals</p> <div class="mt-8 mb-5"> <div data-glow="" class="mt-4 w-full group whitespace-nowrap flex flex-col lg:flex-row lg:items-center justify-start gap-4"> <p class="lg:w-2/12 xl:w-1/12 min-w-36 hidden lg:block text-xl lg:text-end heading-3 font-bold"> Astro </p> <div class="h-8 sm:h-10 w-full flex items-center gap-2 outline outline-offset-2 sm:outline-offset-4 outline-1 outline-astro-gray-500 group-data-[glow]:outline-astro-gray-400 rounded-lg"> <div style="width:62%" class="px-2 h-full flex items-center gap-2 bg-astro-gray-500 group-data-[glow]:bg-blue-green-gradient rounded-lg"> <svg fill="currentColor" viewBox="0 0 85 107" aria-label="Astro logo" class="size-[22px]" astro-icon="logos/astro"><path d="M27.59 91.136c-4.834-4.418-6.246-13.703-4.232-20.429 3.492 4.241 8.33 5.584 13.342 6.343 7.737 1.17 15.336.732 22.523-2.804.822-.405 1.582-.943 2.48-1.489.675 1.957.85 3.932.615 5.943-.573 4.896-3.01 8.678-6.885 11.545-1.55 1.147-3.19 2.172-4.79 3.253-4.917 3.323-6.247 7.22-4.4 12.888.044.139.084.277.183.614-2.51-1.124-4.344-2.76-5.742-4.911-1.475-2.27-2.177-4.78-2.214-7.498-.019-1.322-.019-2.656-.197-3.96-.434-3.178-1.926-4.601-4.737-4.683-2.884-.084-5.166 1.699-5.771 4.507-.046.216-.113.429-.18.68l.004.001ZM0 69.587s14.314-6.973 28.668-6.973L39.49 29.12c.405-1.62 1.588-2.72 2.924-2.72 1.335 0 2.518 1.1 2.924 2.72L56.16 62.614c17 0 28.668 6.973 28.668 6.973S60.514 3.352 60.467 3.219C59.769 1.261 58.591 0 57.003 0H27.827c-1.588 0-2.718 1.261-3.464 3.22C24.311 3.35 0 69.586 0 69.586Z"></path></svg> </div> <p class="sr-only">Astro Core Web Vitals Passing</p> <p class="text-lg sm:text-xl group-data-[glow]:text-2xl sm:group-data-[glow]:text-3xl font-semibold text-astro-gray-300 group-data-[glow]:bg-clip-text group-data-[glow]:text-transparent group-data-[glow]:bg-blue-green-gradient"> 62% </p> </div> </div> <div class="mt-4 w-full group whitespace-nowrap flex flex-col lg:flex-row lg:items-center justify-start gap-4"> <p class="lg:w-2/12 xl:w-1/12 min-w-36 hidden lg:block text-xl lg:text-end heading-3 font-bold"> Gatsby </p> <div class="h-8 sm:h-10 w-full flex items-center gap-2 outline outline-offset-2 sm:outline-offset-4 outline-1 outline-astro-gray-500 group-data-[glow]:outline-astro-gray-400 rounded-lg"> <div style="width:44%" class="px-2 h-full flex items-center gap-2 bg-astro-gray-500 group-data-[glow]:bg-blue-green-gradient rounded-lg"> <svg fill="none" viewBox="0 0 18 18" aria-label="Gatsby logo" class="size-[19px]" astro-icon="logos/gatsby"><path fill="#fff" d="M9 0C4.05 0 0 4.05 0 9s4.05 9 9 9 9-4.05 9-9-4.05-9-9-9ZM3.986 14.014c-1.35-1.35-2.057-3.15-2.057-4.885l7.007 6.942c-1.8-.064-3.6-.707-4.95-2.057Zm6.557 1.865L2.12 7.457C2.83 4.307 5.657 1.93 9 1.93c2.379 0 4.436 1.157 5.721 2.892l-.964.836C12.664 4.18 10.93 3.214 9 3.214c-2.507 0-4.629 1.607-5.464 3.857l7.393 7.393c1.864-.643 3.278-2.25 3.728-4.178h-3.086V9h4.5c0 3.343-2.378 6.171-5.528 6.879Z"></path></svg> </div> <p class="sr-only">Gatsby Core Web Vitals Passing</p> <p class="text-lg sm:text-xl group-data-[glow]:text-2xl sm:group-data-[glow]:text-3xl font-semibold text-astro-gray-300 group-data-[glow]:bg-clip-text group-data-[glow]:text-transparent group-data-[glow]:bg-blue-green-gradient"> 44% </p> </div> </div> <div class="mt-4 w-full group whitespace-nowrap flex flex-col lg:flex-row lg:items-center justify-start gap-4"> <p class="lg:w-2/12 xl:w-1/12 min-w-36 hidden lg:block text-xl lg:text-end heading-3 font-bold"> WordPress </p> <div class="h-8 sm:h-10 w-full flex items-center gap-2 outline outline-offset-2 sm:outline-offset-4 outline-1 outline-astro-gray-500 group-data-[glow]:outline-astro-gray-400 rounded-lg"> <div style="width:43%" class="px-2 h-full flex items-center gap-2 bg-astro-gray-500 group-data-[glow]:bg-blue-green-gradient rounded-lg"> <svg viewBox="0 0 512 512" aria-label="WordPress logo" class="size-5" astro-icon="logos/wordpress"><path fill="currentColor" d="m61.7 169.4 101.5 278C92.2 413 43.3 340.2 43.3 256c0-30.9 6.6-60.1 18.4-86.6m337.9 75.9c0-26.3-9.4-44.5-17.5-58.7-10.8-17.5-20.9-32.4-20.9-49.9 0-19.6 14.8-37.8 35.7-37.8.9 0 1.8.1 2.8.2-37.9-34.7-88.3-55.9-143.7-55.9-74.3 0-139.7 38.1-177.8 95.9 5 .2 9.7.3 13.7.3 22.2 0 56.7-2.7 56.7-2.7 11.5-.7 12.8 16.2 1.4 17.5 0 0-11.5 1.3-24.3 2l77.5 230.4L249.8 247l-33.1-90.8c-11.5-.7-22.3-2-22.3-2-11.5-.7-10.1-18.2 1.3-17.5 0 0 35.1 2.7 56 2.7 22.2 0 56.7-2.7 56.7-2.7 11.5-.7 12.8 16.2 1.4 17.5 0 0-11.5 1.3-24.3 2l76.9 228.7 21.2-70.9c9-29.4 16-50.5 16-68.7m-139.9 29.3-63.8 185.5c19.1 5.6 39.2 8.7 60.1 8.7 24.8 0 48.5-4.3 70.6-12.1-.6-.9-1.1-1.9-1.5-2.9zm183-120.7c.9 6.8 1.4 14 1.4 21.9 0 21.6-4 45.8-16.2 76.2l-65 187.9C426.2 403 468.7 334.5 468.7 256c0-37-9.4-71.8-26-102.1M504 256c0 136.8-111.3 248-248 248C119.2 504 8 392.7 8 256 8 119.2 119.2 8 256 8c136.7 0 248 111.2 248 248m-11.4 0c0-130.5-106.2-236.6-236.6-236.6C125.5 19.4 19.4 125.5 19.4 256S125.6 492.6 256 492.6c130.5 0 236.6-106.1 236.6-236.6"></path></svg> </div> <p class="sr-only">WordPress Core Web Vitals Passing</p> <p class="text-lg sm:text-xl group-data-[glow]:text-2xl sm:group-data-[glow]:text-3xl font-semibold text-astro-gray-300 group-data-[glow]:bg-clip-text group-data-[glow]:text-transparent group-data-[glow]:bg-blue-green-gradient"> 43% </p> </div> </div> <div class="mt-4 w-full group whitespace-nowrap flex flex-col lg:flex-row lg:items-center justify-start gap-4"> <p class="lg:w-2/12 xl:w-1/12 min-w-36 hidden lg:block text-xl lg:text-end heading-3 font-bold"> Next.js </p> <div class="h-8 sm:h-10 w-full flex items-center gap-2 outline outline-offset-2 sm:outline-offset-4 outline-1 outline-astro-gray-500 group-data-[glow]:outline-astro-gray-400 rounded-lg"> <div style="width:27%" class="px-2 h-full flex items-center gap-2 bg-astro-gray-500 group-data-[glow]:bg-blue-green-gradient rounded-lg"> <svg fill="none" viewBox="0 0 20 20" aria-label="Next.js logo" class="size-5" astro-icon="logos/next-js"><path stroke="#fff" stroke-width="1.5" d="M19.25 10a9.25 9.25 0 1 1-18.5 0 9.25 9.25 0 0 1 18.5 0Z"></path><path fill="url(#astroicon:logos/next-jsa)" d="M16.61 17.5 7.68 6H6v8h1.35V7.7l8.2 10.62c.38-.25.73-.52 1.06-.82Z"></path><path fill="url(#astroicon:logos/next-jsb)" d="M14.11 6h-1.33v8h1.33V6Z"></path><defs><linearGradient id="astroicon:logos/next-jsa" x1="12.11" x2="16.06" y1="12.94" y2="17.83" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"></stop><stop offset="1" stop-color="#fff" stop-opacity="0"></stop></linearGradient><linearGradient id="astroicon:logos/next-jsb" x1="13.44" x2="13.42" y1="6" y2="11.88" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"></stop><stop offset="1" stop-color="#fff" stop-opacity="0"></stop></linearGradient></defs></svg> </div> <p class="sr-only">Next.js Core Web Vitals Passing</p> <p class="text-lg sm:text-xl group-data-[glow]:text-2xl sm:group-data-[glow]:text-3xl font-semibold text-astro-gray-300 group-data-[glow]:bg-clip-text group-data-[glow]:text-transparent group-data-[glow]:bg-blue-green-gradient"> 27% </p> </div> </div> <div class="mt-4 w-full group whitespace-nowrap flex flex-col lg:flex-row lg:items-center justify-start gap-4"> <p class="lg:w-2/12 xl:w-1/12 min-w-36 hidden lg:block text-xl lg:text-end heading-3 font-bold"> Nuxt </p> <div class="h-8 sm:h-10 w-full flex items-center gap-2 outline outline-offset-2 sm:outline-offset-4 outline-1 outline-astro-gray-500 group-data-[glow]:outline-astro-gray-400 rounded-lg"> <div style="width:26%" class="px-2 h-full flex items-center gap-2 bg-astro-gray-500 group-data-[glow]:bg-blue-green-gradient rounded-lg"> <svg fill="currentColor" viewBox="0 0 22 22" aria-label="Nuxt logo" class="size-6" astro-icon="logos/nuxt"><path d="M12.1 17.09h6.73c.22 0 .43-.08.61-.18.19-.11.38-.25.49-.43.1-.18.18-.4.18-.6 0-.22-.08-.43-.18-.61l-4.56-7.84a1.1 1.1 0 0 0-.42-.42 1.47 1.47 0 0 0-.67-.19c-.22 0-.42.08-.6.19-.2.1-.33.24-.43.42l-1.16 2-2.3-3.88a1.28 1.28 0 0 0-.43-.49c-.19-.1-.4-.12-.6-.12-.22 0-.43.02-.61.12-.2.1-.38.3-.49.49l-5.65 9.72c-.1.18-.12.39-.12.6 0 .22.01.43.12.61s.3.32.49.43c.18.1.39.18.6.18h4.26c1.68 0 2.9-.76 3.76-2.19l2.07-3.58 1.09-1.88 3.34 5.7h-4.43l-1.1 1.95Zm-4.8-1.95H4.32L8.75 7.5 11 11.32l-1.49 2.6c-.57.92-1.21 1.22-2.21 1.22Z"></path></svg> </div> <p class="sr-only">Nuxt Core Web Vitals Passing</p> <p class="text-lg sm:text-xl group-data-[glow]:text-2xl sm:group-data-[glow]:text-3xl font-semibold text-astro-gray-300 group-data-[glow]:bg-clip-text group-data-[glow]:text-transparent group-data-[glow]:bg-blue-green-gradient"> 26% </p> </div> </div> </div> <p class="text-astro-gray-300 text-balance"> <a class="text-astro-gray-100 underline underline-offset-2 decoration-astro-gray-300 hover:decoration-white transition-colors durartion-500 ease-out" href="https://lookerstudio.google.com/u/0/reporting/55bc8fad-44c2-4280-aa0b-5f3f0cd3d2be/page/M6ZPC?params=%7B%22df44%22:%22include%25EE%2580%25800%25EE%2580%2580IN%25EE%2580%2580WordPress%25EE%2580%2580Next.js%25EE%2580%2580Nuxt.js%25EE%2580%2580Gatsby%25EE%2580%2580Astro%25EE%2580%2580SvelteKit%25EE%2580%2580Remix%22%7D">
View the full dataset</a>
· Based on real-world performance data from
<a class="text-astro-gray-100 underline underline-offset-2 decoration-astro-gray-300 hover:decoration-white transition-colors durartion-500 ease-out" href="https://httparchive.org/" target="_blank">HTTP Archive</a> and the
<a class="text-astro-gray-100 underline underline-offset-2 decoration-astro-gray-300 hover:decoration-white transition-colors durartion-500 ease-out" href="https://developer.chrome.com/docs/crux" target="_blank">Chrome UX Report</a>.
</p> </div> </section> <section class="mt-20 md:mt-24 lg:mt-28 xl:mt-36 relative"> <div class="w-full max-w-screen-xl mx-auto px-4 sm:px-8"> <div class="w-full"> <span class="bg-clip-text text-transparent bg-red-pink-gradient font-semibold">Maximum Flexibility</span> <h2 class="mt-1 font-heading text-2xl lg:text-3xl text-white text-balance"> <strong>Zero Lock-in</strong> </h2> <p class="mt-3 w-full lg:w-2/3 xl:w-1/2 text-base text-astro-gray-200 lg:text-balance font-light"> Astro supports every major UI framework. Bring your existing components and take advantage of Astro's optimized client build performance. </p> <div class="mt-4"> <a href="https://docs.astro.build/en/guides/integrations-guide/#official-integrations" class="secondary px-4 py-2 group inline-flex items-center justify-center gap-2 rounded-full border text-base font-normal transition-all ease-in-out duration-500 hover:cursor-pointer" data-astro-cid-6ixtg63z=""> Integrate your favorite framework </a> </div> </div> </div> <div class="mx-auto w-full max-w-screen-xl"> <div role="tablist" aria-label="Ecosystem Tabs" class="mt-4 py-1 sm:mt-8 px-4 sm:px-8 w-full flex items-center overflow-x-auto text-nowrap no-scrollbar gap-4 sm:gap-6"> <button role="tab" id="react" data-tab="react" aria-selected="true" class="integration-tab group relative flex flex-col items-center gap-3 whitespace-nowrap rounded-full rounded-lg"> <div class="size-fit landing-section rounded-full p-0.5 lg:p-1 bg-astro-dark-100 group-hover:bg-astro-gray-200 transition-all duration-300 ease-in-out group-aria-selected:bg-[#61DAFB]"> <div class="bg-black size-12 lg:size-16 landing-section rounded-full"> <div class="w-full h-full landing-section rounded-full bg-astro-dark-100/20 grayscale group-aria-selected:grayscale-0 group-aria-selected:bg-[#61DAFB]/20"> <img class="size-6 sm:size-8" src="/assets/integrations/react.svg" alt="React Logo" loading="lazy"> </div> </div> </div> <p class="font-medium text-base text-astro-gray-300 group-hover:text-astro-gray-200 transition-all duration-300 ease-in-out group-aria-selected:text-[#61DAFB]"> React </p> </button> <button role="tab" id="vue" data-tab="vue" aria-selected="false" class="integration-tab group relative flex flex-col items-center gap-3 whitespace-nowrap rounded-full rounded-lg"> <div class="size-fit landing-section rounded-full p-0.5 lg:p-1 bg-astro-dark-100 group-hover:bg-astro-gray-200 transition-all duration-300 ease-in-out group-aria-selected:bg-[#41B883]"> <div class="bg-black size-12 lg:size-16 landing-section rounded-full"> <div class="w-full h-full landing-section rounded-full bg-astro-dark-100/20 grayscale group-aria-selected:grayscale-0 group-aria-selected:bg-[#41B883]/20"> <img class="size-5 lg:size-6" src="/assets/integrations/vue.svg" alt="Vue Logo" loading="lazy"> </div> </div> </div> <p class="font-medium text-base text-astro-gray-300 group-hover:text-astro-gray-200 transition-all duration-300 ease-in-out group-aria-selected:text-[#41B883]"> Vue </p> </button> <button role="tab" id="preact" data-tab="preact" aria-selected="false" class="integration-tab group relative flex flex-col items-center gap-3 whitespace-nowrap rounded-full rounded-lg"> <div class="size-fit landing-section rounded-full p-0.5 lg:p-1 bg-astro-dark-100 group-hover:bg-astro-gray-200 transition-all duration-300 ease-in-out group-aria-selected:bg-[#673AB8]"> <div class="bg-black size-12 lg:size-16 landing-section rounded-full"> <div class="w-full h-full landing-section rounded-full bg-astro-dark-100/20 grayscale group-aria-selected:grayscale-0 group-aria-selected:bg-[#673AB8]/20"> <img class="size-6 sm:size-8" src="/assets/integrations/preact.svg" alt="Preact Logo" loading="lazy"> </div> </div> </div> <p class="font-medium text-base text-astro-gray-300 group-hover:text-astro-gray-200 transition-all duration-300 ease-in-out group-aria-selected:text-[#673AB8]"> Preact </p> </button> <button role="tab" id="svelte" data-tab="svelte" aria-selected="false" class="integration-tab group relative flex flex-col items-center gap-3 whitespace-nowrap rounded-full rounded-lg"> <div class="size-fit landing-section rounded-full p-0.5 lg:p-1 bg-astro-dark-100 group-hover:bg-astro-gray-200 transition-all duration-300 ease-in-out group-aria-selected:bg-[#FF3E00]"> <div class="bg-black size-12 lg:size-16 landing-section rounded-full"> <div class="w-full h-full landing-section rounded-full bg-astro-dark-100/20 grayscale group-aria-selected:grayscale-0 group-aria-selected:bg-[#FF3E00]/20"> <img class="size-6 sm:size-8" src="/assets/integrations/svelte.svg" alt="Svelte Logo" loading="lazy"> </div> </div> </div> <p class="font-medium text-base text-astro-gray-300 group-hover:text-astro-gray-200 transition-all duration-300 ease-in-out group-aria-selected:text-[#FF3E00]"> Svelte </p> </button> <button role="tab" id="solid" data-tab="solid" aria-selected="false" class="integration-tab group relative flex flex-col items-center gap-3 whitespace-nowrap rounded-full rounded-lg"> <div class="size-fit landing-section rounded-full p-0.5 lg:p-1 bg-astro-dark-100 group-hover:bg-astro-gray-200 transition-all duration-300 ease-in-out group-aria-selected:bg-[#76B3E1]"> <div class="bg-black size-12 lg:size-16 landing-section rounded-full"> <div class="w-full h-full landing-section rounded-full bg-astro-dark-100/20 grayscale group-aria-selected:grayscale-0 group-aria-selected:bg-[#76B3E1]/20"> <img class="size-5 lg:size-7" src="/assets/integrations/solid.svg" alt="Solid Logo" loading="lazy"> </div> </div> </div> <p class="font-medium text-base text-astro-gray-300 group-hover:text-astro-gray-200 transition-all duration-300 ease-in-out group-aria-selected:text-[#76B3E1]"> Solid </p> </button> </div> </div> <div class="my-4 sm:my-8 w-full border-t border-t-astro-gray-600"></div> <div class="mx-auto w-full max-w-screen-xl px-4 sm:px-8"> <section data-tab="react" role="tabpanel" aria-labelledby="react" id="integration-panel-1" class="mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4"> <div class="lg:col-span-2 bg-[#07040F] p-1 rounded-[20px]"> <div class="w-full h-80 xl:h-96 min-h-80 code bg-astro-dark-400 border border-astro-dark-100/20 rounded-2xl overflow-y-auto">
<div class="expressive-code"><link rel="stylesheet" href="/_astro/ec.cmf2d.css"><script type="module" src="/_astro/ec.qopfj.js"></script><pre data-language="astro"><code><div class="ec-line"><div class="code"><span style="--0:#8B909D;--0fs:italic">---</span></div></div><div class="ec-line highlight mark"><div class="code"><span style="--0:#54B9FF">import</span><span style="--0:#EEF0F9"> </span><span style="--0:#4BF3C8">BuyButton</span><span style="--0:#EEF0F9"> </span><span style="--0:#54B9FF">from</span><span style="--0:#EEF0F9"> </span><span style="--0:#FFD493">'../components/BuyButton.jsx'</span><span style="--0:#EEF0F9">;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#54B9FF">import</span><span style="--0:#EEF0F9"> { </span><span style="--0:#4BF3C8">getProductDetails</span><span style="--0:#EEF0F9"> } </span><span style="--0:#54B9FF">from</span><span style="--0:#EEF0F9"> </span><span style="--0:#FFD493">"ecommerce-package"</span><span style="--0:#EEF0F9">;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#54B9FF">import</span><span style="--0:#EEF0F9"> </span><span style="--0:#4BF3C8">ProductPageLayout</span><span style="--0:#EEF0F9"> </span><span style="--0:#54B9FF">from</span><span style="--0:#EEF0F9"> </span><span style="--0:#FFD493">'../layouts/ProductPageLayout.astro'</span><span style="--0:#EEF0F9">;</span></div></div><div class="ec-line"><div class="code">
</div></div><div class="ec-line"><div class="code"><span style="--0:#54B9FF">const</span><span style="--0:#EEF0F9"> </span><span style="--0:#ACAFFF">product</span><span style="--0:#EEF0F9"> = </span><span style="--0:#54B9FF">await</span><span style="--0:#EEF0F9"> </span><span style="--0:#00DAEF">getProductDetails</span><span style="--0:#EEF0F9">(</span><span style="--0:#4BF3C8">Astro</span><span style="--0:#EEF0F9">.</span><span style="--0:#4BF3C8">params</span><span style="--0:#EEF0F9">.</span><span style="--0:#4BF3C8">slug</span><span style="--0:#EEF0F9">);</span></div></div><div class="ec-line"><div class="code"><span style="--0:#8B909D;--0fs:italic">---</span></div></div><div class="ec-line"><div class="code">
</div></div><div class="ec-line"><div class="code"><span style="--0:#EEF0F9"><</span><span style="--0:#ACAFFF">ProductPageLayout</span><span style="--0:#EEF0F9">></span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#EEF0F9"> </span></span><span style="--0:#EEF0F9"><</span><span style="--0:#54B9FF">img</span><span style="--0:#EEF0F9"> </span><span style="--0:#4BF3C8">src</span><span style="--0:#EEF0F9">=</span><span style="--0:#54B9FF">{</span><span style="--0:#4BF3C8">product</span><span style="--0:#EEF0F9">.</span><span style="--0:#4BF3C8">imageUrl</span><span style="--0:#54B9FF">}</span><span style="--0:#EEF0F9"> </span><span style="--0:#4BF3C8">alt</span><span style="--0:#EEF0F9">=</span><span style="--0:#54B9FF">{</span><span style="--0:#4BF3C8">product</span><span style="--0:#EEF0F9">.</span><span style="--0:#4BF3C8">imageAlt</span><span style="--0:#54B9FF">}</span><span style="--0:#EEF0F9"> /></span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#EEF0F9"> </span></span><span style="--0:#EEF0F9"><</span><span style="--0:#54B9FF">h2</span><span style="--0:#EEF0F9">></span><span style="--0:#54B9FF">{</span><span style="--0:#4BF3C8">product</span><span style="--0:#EEF0F9">.</span><span style="--0:#4BF3C8">name</span><span style="--0:#54B9FF">}</span><span style="--0:#EEF0F9"></</span><span style="--0:#54B9FF">h2</span><span style="--0:#EEF0F9">></span></div></div><div class="ec-line highlight mark"><div class="code"><span class="indent"><span style="--0:#EEF0F9"> </span></span><span style="--0:#EEF0F9"><</span><span style="--0:#ACAFFF">BuyButton</span><span style="--0:#EEF0F9"> </span><span style="--0:#4BF3C8">id</span><span style="--0:#EEF0F9">=</span><span style="--0:#54B9FF">{</span><span style="--0:#4BF3C8">product</span><span style="--0:#EEF0F9">.</span><span style="--0:#4BF3C8">id</span><span style="--0:#54B9FF">}</span><span style="--0:#EEF0F9"> </span><span style="--0:#4BF3C8">client:load</span><span style="--0:#EEF0F9"> /></span></div></div><div class="ec-line"><div class="code"><span style="--0:#EEF0F9"></</span><span style="--0:#ACAFFF">ProductPageLayout</span><span style="--0:#EEF0F9">></span></div></div></code></pre></div> </div> </div> <div class="order-first sm:order-last h-fit lg:-mt-[4.5rem] bg-[#07040F] border border-astro-gray-600 rounded-2xl"> <div class="h-[2.438rem] px-3 flex items-center whitespace-no-wrap pointer-events-none select-none border-b border-b-astro-gray-600"> <span class="mx-1 inline-block h-3 w-3 rounded-full bg-astro-gray-600"></span> <span class="mx-1 inline-block h-3 w-3 rounded-full bg-astro-gray-600"></span> <span class="mx-1 inline-block h-3 w-3 rounded-full bg-astro-gray-600"></span> </div> <div class="h-[21.5rem] md:max-lg:h-[18rem] xl:h-[26.3rem] overflow-hidden"> <div class="pt-10 sm:pt-0 size-full flex items-end justify-center overflow-hidden"> <div class="w-2/3 md:max-xl:w-4/5 px-3 pt-3 bg-astro-gray-600 rounded-t-3xl"> <div class="p-2 sm:p-4 size-full flex flex-col bg-astro-gray-700 rounded-t-2xl space-y-2"> <img class="w-full h-40 md:h-36 lg:h-40 xl:h-56 rounded-xl object-center object-contain" src="/_astro/astro-cap.jt5HlOg8_Z1BQ7al.webp" alt="Official Astro Cap Swag" loading="lazy" decoding="async"> <div class="flex items-center justify-between text-sm xl:text-base"> <h2 class="text-astro-gray-300 font-medium">Snapback Cap</h2> <p class="text-astro-gray-300 font-medium">$15.50</p> </div> <button type="button" disabled="" aria-disabled="true" class="px-4 py-2 inline-flex items-center justify-center gap-2 text-base font-normal rounded-lg transition-all ease-in-out duration-700 bg-[#61DAFB] text-gray-950">
Add to cart
</button> </div> </div> </div> </div> </div> </section> <section data-tab="vue" role="tabpanel" aria-labelledby="vue" id="integration-panel-2" class="mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 hidden"> <div class="lg:col-span-2 bg-[#07040F] p-1 rounded-[20px]"> <div class="w-full h-80 xl:h-96 min-h-80 code bg-astro-dark-400 border border-astro-dark-100/20 rounded-2xl overflow-y-auto">
<div class="expressive-code"><link rel="stylesheet" href="/_astro/ec.cmf2d.css"><script type="module" src="/_astro/ec.qopfj.js"></script><pre data-language="astro"><code><div class="ec-line"><div class="code"><span style="--0:#8B909D;--0fs:italic">---</span></div></div><div class="ec-line highlight mark"><div class="code"><span style="--0:#54B9FF">import</span><span style="--0:#EEF0F9"> </span><span style="--0:#4BF3C8">BuyButton</span><span style="--0:#EEF0F9"> </span><span style="--0:#54B9FF">from</span><span style="--0:#EEF0F9"> </span><span style="--0:#FFD493">'../components/BuyButton.vue'</span><span style="--0:#EEF0F9">;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#54B9FF">import</span><span style="--0:#EEF0F9"> { </span><span style="--0:#4BF3C8">getProductDetails</span><span style="--0:#EEF0F9"> } </span><span style="--0:#54B9FF">from</span><span style="--0:#EEF0F9"> </span><span style="--0:#FFD493">"ecommerce-package"</span><span style="--0:#EEF0F9">;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#54B9FF">import</span><span style="--0:#EEF0F9"> </span><span style="--0:#4BF3C8">ProductPageLayout</span><span style="--0:#EEF0F9"> </span><span style="--0:#54B9FF">from</span><span style="--0:#EEF0F9"> </span><span style="--0:#FFD493">'../layouts/ProductPageLayout.astro'</span><span style="--0:#EEF0F9">;</span></div></div><div class="ec-line"><div class="code">
</div></div><div class="ec-line"><div class="code"><span style="--0:#54B9FF">const</span><span style="--0:#EEF0F9"> </span><span style="--0:#ACAFFF">product</span><span style="--0:#EEF0F9"> = </span><span style="--0:#54B9FF">await</span><span style="--0:#EEF0F9"> </span><span style="--0:#00DAEF">getProductDetails</span><span style="--0:#EEF0F9">(</span><span style="--0:#4BF3C8">Astro</span><span style="--0:#EEF0F9">.</span><span style="--0:#4BF3C8">params</span><span style="--0:#EEF0F9">.</span><span style="--0:#4BF3C8">slug</span><span style="--0:#EEF0F9">);</span></div></div><div class="ec-line"><div class="code"><span style="--0:#8B909D;--0fs:italic">---</span></div></div><div class="ec-line"><div class="code">
</div></div><div class="ec-line"><div class="code"><span style="--0:#EEF0F9"><</span><span style="--0:#ACAFFF">ProductPageLayout</span><span style="--0:#EEF0F9">></span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#EEF0F9"> </span></span><span style="--0:#EEF0F9"><</span><span style="--0:#54B9FF">img</span><span style="--0:#EEF0F9"> </span><span style="--0:#4BF3C8">src</span><span style="--0:#EEF0F9">=</span><span style="--0:#54B9FF">{</span><span style="--0:#4BF3C8">product</span><span style="--0:#EEF0F9">.</span><span style="--0:#4BF3C8">imageUrl</span><span style="--0:#54B9FF">}</span><span style="--0:#EEF0F9"> </span><span style="--0:#4BF3C8">alt</span><span style="--0:#EEF0F9">=</span><span style="--0:#54B9FF">{</span><span style="--0:#4BF3C8">product</span><span style="--0:#EEF0F9">.</span><span style="--0:#4BF3C8">imageAlt</span><span style="--0:#54B9FF">}</span><span style="--0:#EEF0F9"> /></span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#EEF0F9"> </span></span><span style="--0:#EEF0F9"><</span><span style="--0:#54B9FF">h2</span><span style="--0:#EEF0F9">></span><span style="--0:#54B9FF">{</span><span style="--0:#4BF3C8">product</span><span style="--0:#EEF0F9">.</span><span style="--0:#4BF3C8">name</span><span style="--0:#54B9FF">}</span><span style="--0:#EEF0F9"></</span><span style="--0:#54B9FF">h2</span><span style="--0:#EEF0F9">></span></div></div><div class="ec-line highlight mark"><div class="code"><span class="indent"><span style="--0:#EEF0F9"> </span></span><span style="--0:#EEF0F9"><</span><span style="--0:#ACAFFF">BuyButton</span><span style="--0:#EEF0F9"> </span><span style="--0:#4BF3C8">id</span><span style="--0:#EEF0F9">=</span><span style="--0:#54B9FF">{</span><span style="--0:#4BF3C8">product</span><span style="--0:#EEF0F9">.</span><span style="--0:#4BF3C8">id</span><span style="--0:#54B9FF">}</span><span style="--0:#EEF0F9"> </span><span style="--0:#4BF3C8">client:load</span><span style="--0:#EEF0F9"> /></span></div></div><div class="ec-line"><div class="code"><span style="--0:#EEF0F9"></</span><span style="--0:#ACAFFF">ProductPageLayout</span><span style="--0:#EEF0F9">></span></div></div></code></pre></div> </div> </div> <div class="order-first sm:order-last h-fit lg:-mt-[4.5rem] bg-[#07040F] border border-astro-gray-600 rounded-2xl"> <div class="h-[2.438rem] px-3 flex items-center whitespace-no-wrap pointer-events-none select-none border-b border-b-astro-gray-600"> <span class="mx-1 inline-block h-3 w-3 rounded-full bg-astro-gray-600"></span> <span class="mx-1 inline-block h-3 w-3 rounded-full bg-astro-gray-600"></span> <span class="mx-1 inline-block h-3 w-3 rounded-full bg-astro-gray-600"></span> </div> <div class="h-[21.5rem] md:max-lg:h-[18rem] xl:h-[26.3rem] overflow-hidden"> <div class="pt-10 sm:pt-0 size-full flex items-end justify-center overflow-hidden"> <div class="w-2/3 md:max-xl:w-4/5 px-3 pt-3 bg-astro-gray-600 rounded-t-3xl"> <div class="p-2 sm:p-4 size-full flex flex-col bg-astro-gray-700 rounded-t-2xl space-y-2"> <img class="w-full h-40 md:h-36 lg:h-40 xl:h-56 rounded-xl object-center object-contain" src="/_astro/astro-cap.jt5HlOg8_Z1BQ7al.webp" alt="Official Astro Cap Swag" loading="lazy" decoding="async"> <div class="flex items-center justify-between text-sm xl:text-base"> <h2 class="text-astro-gray-300 font-medium">Snapback Cap</h2> <p class="text-astro-gray-300 font-medium">$15.50</p> </div> <button type="button" disabled="" aria-disabled="true" class="px-4 py-2 inline-flex items-center justify-center gap-2 text-base font-normal rounded-lg transition-all ease-in-out duration-700 bg-[#41B883] text-white">
Add to cart
</button> </div> </div> </div> </div> </div> </section> <section data-tab="preact" role="tabpanel" aria-labelledby="preact" id="integration-panel-3" class="mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 hidden"> <div class="lg:col-span-2 bg-[#07040F] p-1 rounded-[20px]"> <div class="w-full h-80 xl:h-96 min-h-80 code bg-astro-dark-400 border border-astro-dark-100/20 rounded-2xl overflow-y-auto">
<div class="expressive-code"><link rel="stylesheet" href="/_astro/ec.cmf2d.css"><script type="module" src="/_astro/ec.qopfj.js"></script><pre data-language="astro"><code><div class="ec-line"><div class="code"><span style="--0:#8B909D;--0fs:italic">---</span></div></div><div class="ec-line highlight mark"><div class="code"><span style="--0:#54B9FF">import</span><span style="--0:#EEF0F9"> </span><span style="--0:#4BF3C8">BuyButton</span><span style="--0:#EEF0F9"> </span><span style="--0:#54B9FF">from</span><span style="--0:#EEF0F9"> </span><span style="--0:#FFD493">'../components/BuyButton.jsx'</span><span style="--0:#EEF0F9">;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#54B9FF">import</span><span style="--0:#EEF0F9"> { </span><span style="--0:#4BF3C8">getProductDetails</span><span style="--0:#EEF0F9"> } </span><span style="--0:#54B9FF">from</span><span style="--0:#EEF0F9"> </span><span style="--0:#FFD493">"ecommerce-package"</span><span style="--0:#EEF0F9">;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#54B9FF">import</span><span style="--0:#EEF0F9"> </span><span style="--0:#4BF3C8">ProductPageLayout</span><span style="--0:#EEF0F9"> </span><span style="--0:#54B9FF">from</span><span style="--0:#EEF0F9"> </span><span style="--0:#FFD493">'../layouts/ProductPageLayout.astro'</span><span style="--0:#EEF0F9">;</span></div></div><div class="ec-line"><div class="code">
</div></div><div class="ec-line"><div class="code"><span style="--0:#54B9FF">const</span><span style="--0:#EEF0F9"> </span><span style="--0:#ACAFFF">product</span><span style="--0:#EEF0F9"> = </span><span style="--0:#54B9FF">await</span><span style="--0:#EEF0F9"> </span><span style="--0:#00DAEF">getProductDetails</span><span style="--0:#EEF0F9">(</span><span style="--0:#4BF3C8">Astro</span><span style="--0:#EEF0F9">.</span><span style="--0:#4BF3C8">params</span><span style="--0:#EEF0F9">.</span><span style="--0:#4BF3C8">slug</span><span style="--0:#EEF0F9">);</span></div></div><div class="ec-line"><div class="code"><span style="--0:#8B909D;--0fs:italic">---</span></div></div><div class="ec-line"><div class="code">
</div></div><div class="ec-line"><div class="code"><span style="--0:#EEF0F9"><</span><span style="--0:#ACAFFF">ProductPageLayout</span><span style="--0:#EEF0F9">></span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#EEF0F9"> </span></span><span style="--0:#EEF0F9"><</span><span style="--0:#54B9FF">img</span><span style="--0:#EEF0F9"> </span><span style="--0:#4BF3C8">src</span><span style="--0:#EEF0F9">=</span><span style="--0:#54B9FF">{</span><span style="--0:#4BF3C8">product</span><span style="--0:#EEF0F9">.</span><span style="--0:#4BF3C8">imageUrl</span><span style="--0:#54B9FF">}</span><span style="--0:#EEF0F9"> </span><span style="--0:#4BF3C8">alt</span><span style="--0:#EEF0F9">=</span><span style="--0:#54B9FF">{</span><span style="--0:#4BF3C8">product</span><span style="--0:#EEF0F9">.</span><span style="--0:#4BF3C8">imageAlt</span><span style="--0:#54B9FF">}</span><span style="--0:#EEF0F9"> /></span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#EEF0F9"> </span></span><span style="--0:#EEF0F9"><</span><span style="--0:#54B9FF">h2</span><span style="--0:#EEF0F9">></span><span style="--0:#54B9FF">{</span><span style="--0:#4BF3C8">product</span><span style="--0:#EEF0F9">.</span><span style="--0:#4BF3C8">name</span><span style="--0:#54B9FF">}</span><span style="--0:#EEF0F9"></</span><span style="--0:#54B9FF">h2</span><span style="--0:#EEF0F9">></span></div></div><div class="ec-line highlight mark"><div class="code"><span class="indent"><span style="--0:#EEF0F9"> </span></span><span style="--0:#EEF0F9"><</span><span style="--0:#ACAFFF">BuyButton</span><span style="--0:#EEF0F9"> </span><span style="--0:#4BF3C8">id</span><span style="--0:#EEF0F9">=</span><span style="--0:#54B9FF">{</span><span style="--0:#4BF3C8">product</span><span style="--0:#EEF0F9">.</span><span style="--0:#4BF3C8">id</span><span style="--0:#54B9FF">}</span><span style="--0:#EEF0F9"> </span><span style="--0:#4BF3C8">client:load</span><span style="--0:#EEF0F9"> /></span></div></div><div class="ec-line"><div class="code"><span style="--0:#EEF0F9"></</span><span style="--0:#ACAFFF">ProductPageLayout</span><span style="--0:#EEF0F9">></span></div></div></code></pre></div> </div> </div> <div class="order-first sm:order-last h-fit lg:-mt-[4.5rem] bg-[#07040F] border border-astro-gray-600 rounded-2xl"> <div class="h-[2.438rem] px-3 flex items-center whitespace-no-wrap pointer-events-none select-none border-b border-b-astro-gray-600"> <span class="mx-1 inline-block h-3 w-3 rounded-full bg-astro-gray-600"></span> <span class="mx-1 inline-block h-3 w-3 rounded-full bg-astro-gray-600"></span> <span class="mx-1 inline-block h-3 w-3 rounded-full bg-astro-gray-600"></span> </div> <div class="h-[21.5rem] md:max-lg:h-[18rem] xl:h-[26.3rem] overflow-hidden"> <div class="pt-10 sm:pt-0 size-full flex items-end justify-center overflow-hidden"> <div class="w-2/3 md:max-xl:w-4/5 px-3 pt-3 bg-astro-gray-600 rounded-t-3xl"> <div class="p-2 sm:p-4 size-full flex flex-col bg-astro-gray-700 rounded-t-2xl space-y-2"> <img class="w-full h-40 md:h-36 lg:h-40 xl:h-56 rounded-xl object-center object-contain" src="/_astro/astro-cap.jt5HlOg8_Z1BQ7al.webp" alt="Official Astro Cap Swag" loading="lazy" decoding="async"> <div class="flex items-center justify-between text-sm xl:text-base"> <h2 class="text-astro-gray-300 font-medium">Snapback Cap</h2> <p class="text-astro-gray-300 font-medium">$15.50</p> </div> <button type="button" disabled="" aria-disabled="true" class="px-4 py-2 inline-flex items-center justify-center gap-2 text-base font-normal rounded-lg transition-all ease-in-out duration-700 bg-[#673AB8] text-white">
Add to cart
</button> </div> </div> </div> </div> </div> </section> <section data-tab="svelte" role="tabpanel" aria-labelledby="svelte" id="integration-panel-4" class="mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 hidden"> <div class="lg:col-span-2 bg-[#07040F] p-1 rounded-[20px]"> <div class="w-full h-80 xl:h-96 min-h-80 code bg-astro-dark-400 border border-astro-dark-100/20 rounded-2xl overflow-y-auto">
<div class="expressive-code"><link rel="stylesheet" href="/_astro/ec.cmf2d.css"><script type="module" src="/_astro/ec.qopfj.js"></script><pre data-language="astro"><code><div class="ec-line"><div class="code"><span style="--0:#8B909D;--0fs:italic">---</span></div></div><div class="ec-line highlight mark"><div class="code"><span style="--0:#54B9FF">import</span><span style="--0:#EEF0F9"> </span><span style="--0:#4BF3C8">BuyButton</span><span style="--0:#EEF0F9"> </span><span style="--0:#54B9FF">from</span><span style="--0:#EEF0F9"> </span><span style="--0:#FFD493">'../components/BuyButton.svelte'</span><span style="--0:#EEF0F9">;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#54B9FF">import</span><span style="--0:#EEF0F9"> { </span><span style="--0:#4BF3C8">getProductDetails</span><span style="--0:#EEF0F9"> } </span><span style="--0:#54B9FF">from</span><span style="--0:#EEF0F9"> </span><span style="--0:#FFD493">"ecommerce-package"</span><span style="--0:#EEF0F9">;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#54B9FF">import</span><span style="--0:#EEF0F9"> </span><span style="--0:#4BF3C8">ProductPageLayout</span><span style="--0:#EEF0F9"> </span><span style="--0:#54B9FF">from</span><span style="--0:#EEF0F9"> </span><span style="--0:#FFD493">'../layouts/ProductPageLayout.astro'</span><span style="--0:#EEF0F9">;</span></div></div><div class="ec-line"><div class="code">
</div></div><div class="ec-line"><div class="code"><span style="--0:#54B9FF">const</span><span style="--0:#EEF0F9"> </span><span style="--0:#ACAFFF">product</span><span style="--0:#EEF0F9"> = </span><span style="--0:#54B9FF">await</span><span style="--0:#EEF0F9"> </span><span style="--0:#00DAEF">getProductDetails</span><span style="--0:#EEF0F9">(</span><span style="--0:#4BF3C8">Astro</span><span style="--0:#EEF0F9">.</span><span style="--0:#4BF3C8">params</span><span style="--0:#EEF0F9">.</span><span style="--0:#4BF3C8">slug</span><span style="--0:#EEF0F9">);</span></div></div><div class="ec-line"><div class="code"><span style="--0:#8B909D;--0fs:italic">---</span></div></div><div class="ec-line"><div class="code">
</div></div><div class="ec-line"><div class="code"><span style="--0:#EEF0F9"><</span><span style="--0:#ACAFFF">ProductPageLayout</span><span style="--0:#EEF0F9">></span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#EEF0F9"> </span></span><span style="--0:#EEF0F9"><</span><span style="--0:#54B9FF">img</span><span style="--0:#EEF0F9"> </span><span style="--0:#4BF3C8">src</span><span style="--0:#EEF0F9">=</span><span style="--0:#54B9FF">{</span><span style="--0:#4BF3C8">product</span><span style="--0:#EEF0F9">.</span><span style="--0:#4BF3C8">imageUrl</span><span style="--0:#54B9FF">}</span><span style="--0:#EEF0F9"> </span><span style="--0:#4BF3C8">alt</span><span style="--0:#EEF0F9">=</span><span style="--0:#54B9FF">{</span><span style="--0:#4BF3C8">product</span><span style="--0:#EEF0F9">.</span><span style="--0:#4BF3C8">imageAlt</span><span style="--0:#54B9FF">}</span><span style="--0:#EEF0F9"> /></span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#EEF0F9"> </span></span><span style="--0:#EEF0F9"><</span><span style="--0:#54B9FF">h2</span><span style="--0:#EEF0F9">></span><span style="--0:#54B9FF">{</span><span style="--0:#4BF3C8">product</span><span style="--0:#EEF0F9">.</span><span style="--0:#4BF3C8">name</span><span style="--0:#54B9FF">}</span><span style="--0:#EEF0F9"></</span><span style="--0:#54B9FF">h2</span><span style="--0:#EEF0F9">></span></div></div><div class="ec-line highlight mark"><div class="code"><span class="indent"><span style="--0:#EEF0F9"> </span></span><span style="--0:#EEF0F9"><</span><span style="--0:#ACAFFF">BuyButton</span><span style="--0:#EEF0F9"> </span><span style="--0:#4BF3C8">id</span><span style="--0:#EEF0F9">=</span><span style="--0:#54B9FF">{</span><span style="--0:#4BF3C8">product</span><span style="--0:#EEF0F9">.</span><span style="--0:#4BF3C8">id</span><span style="--0:#54B9FF">}</span><span style="--0:#EEF0F9"> </span><span style="--0:#4BF3C8">client:load</span><span style="--0:#EEF0F9"> /></span></div></div><div class="ec-line"><div class="code"><span style="--0:#EEF0F9"></</span><span style="--0:#ACAFFF">ProductPageLayout</span><span style="--0:#EEF0F9">></span></div></div></code></pre></div> </div> </div> <div class="order-first sm:order-last h-fit lg:-mt-[4.5rem] bg-[#07040F] border border-astro-gray-600 rounded-2xl"> <div class="h-[2.438rem] px-3 flex items-center whitespace-no-wrap pointer-events-none select-none border-b border-b-astro-gray-600"> <span class="mx-1 inline-block h-3 w-3 rounded-full bg-astro-gray-600"></span> <span class="mx-1 inline-block h-3 w-3 rounded-full bg-astro-gray-600"></span> <span class="mx-1 inline-block h-3 w-3 rounded-full bg-astro-gray-600"></span> </div> <div class="h-[21.5rem] md:max-lg:h-[18rem] xl:h-[26.3rem] overflow-hidden"> <div class="pt-10 sm:pt-0 size-full flex items-end justify-center overflow-hidden"> <div class="w-2/3 md:max-xl:w-4/5 px-3 pt-3 bg-astro-gray-600 rounded-t-3xl"> <div class="p-2 sm:p-4 size-full flex flex-col bg-astro-gray-700 rounded-t-2xl space-y-2"> <img class="w-full h-40 md:h-36 lg:h-40 xl:h-56 rounded-xl object-center object-contain" src="/_astro/astro-cap.jt5HlOg8_Z1BQ7al.webp" alt="Official Astro Cap Swag" loading="lazy" decoding="async"> <div class="flex items-center justify-between text-sm xl:text-base"> <h2 class="text-astro-gray-300 font-medium">Snapback Cap</h2> <p class="text-astro-gray-300 font-medium">$15.50</p> </div> <button type="button" disabled="" aria-disabled="true" class="px-4 py-2 inline-flex items-center justify-center gap-2 text-base font-normal rounded-lg transition-all ease-in-out duration-700 bg-[#FF3E00] text-white">
Add to cart
</button> </div> </div> </div> </div> </div> </section> <section data-tab="solid" role="tabpanel" aria-labelledby="solid" id="integration-panel-5" class="mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 hidden"> <div class="lg:col-span-2 bg-[#07040F] p-1 rounded-[20px]"> <div class="w-full h-80 xl:h-96 min-h-80 code bg-astro-dark-400 border border-astro-dark-100/20 rounded-2xl overflow-y-auto">
<div class="expressive-code"><link rel="stylesheet" href="/_astro/ec.cmf2d.css"><script type="module" src="/_astro/ec.qopfj.js"></script><pre data-language="astro"><code><div class="ec-line"><div class="code"><span style="--0:#8B909D;--0fs:italic">---</span></div></div><div class="ec-line highlight mark"><div class="code"><span style="--0:#54B9FF">import</span><span style="--0:#EEF0F9"> </span><span style="--0:#4BF3C8">BuyButton</span><span style="--0:#EEF0F9"> </span><span style="--0:#54B9FF">from</span><span style="--0:#EEF0F9"> </span><span style="--0:#FFD493">'../components/BuyButton.jsx'</span><span style="--0:#EEF0F9">;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#54B9FF">import</span><span style="--0:#EEF0F9"> { </span><span style="--0:#4BF3C8">getProductDetails</span><span style="--0:#EEF0F9"> } </span><span style="--0:#54B9FF">from</span><span style="--0:#EEF0F9"> </span><span style="--0:#FFD493">"ecommerce-package"</span><span style="--0:#EEF0F9">;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#54B9FF">import</span><span style="--0:#EEF0F9"> </span><span style="--0:#4BF3C8">ProductPageLayout</span><span style="--0:#EEF0F9"> </span><span style="--0:#54B9FF">from</span><span style="--0:#EEF0F9"> </span><span style="--0:#FFD493">'../layouts/ProductPageLayout.astro'</span><span style="--0:#EEF0F9">;</span></div></div><div class="ec-line"><div class="code">
</div></div><div class="ec-line"><div class="code"><span style="--0:#54B9FF">const</span><span style="--0:#EEF0F9"> </span><span style="--0:#ACAFFF">product</span><span style="--0:#EEF0F9"> = </span><span style="--0:#54B9FF">await</span><span style="--0:#EEF0F9"> </span><span style="--0:#00DAEF">getProductDetails</span><span style="--0:#EEF0F9">(</span><span style="--0:#4BF3C8">Astro</span><span style="--0:#EEF0F9">.</span><span style="--0:#4BF3C8">params</span><span style="--0:#EEF0F9">.</span><span style="--0:#4BF3C8">slug</span><span style="--0:#EEF0F9">);</span></div></div><div class="ec-line"><div class="code"><span style="--0:#8B909D;--0fs:italic">---</span></div></div><div class="ec-line"><div class="code">
</div></div><div class="ec-line"><div class="code"><span style="--0:#EEF0F9"><</span><span style="--0:#ACAFFF">ProductPageLayout</span><span style="--0:#EEF0F9">></span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#EEF0F9"> </span></span><span style="--0:#EEF0F9"><</span><span style="--0:#54B9FF">img</span><span style="--0:#EEF0F9"> </span><span style="--0:#4BF3C8">src</span><span style="--0:#EEF0F9">=</span><span style="--0:#54B9FF">{</span><span style="--0:#4BF3C8">product</span><span style="--0:#EEF0F9">.</span><span style="--0:#4BF3C8">imageUrl</span><span style="--0:#54B9FF">}</span><span style="--0:#EEF0F9"> </span><span style="--0:#4BF3C8">alt</span><span style="--0:#EEF0F9">=</span><span style="--0:#54B9FF">{</span><span style="--0:#4BF3C8">product</span><span style="--0:#EEF0F9">.</span><span style="--0:#4BF3C8">imageAlt</span><span style="--0:#54B9FF">}</span><span style="--0:#EEF0F9"> /></span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#EEF0F9"> </span></span><span style="--0:#EEF0F9"><</span><span style="--0:#54B9FF">h2</span><span style="--0:#EEF0F9">></span><span style="--0:#54B9FF">{</span><span style="--0:#4BF3C8">product</span><span style="--0:#EEF0F9">.</span><span style="--0:#4BF3C8">name</span><span style="--0:#54B9FF">}</span><span style="--0:#EEF0F9"></</span><span style="--0:#54B9FF">h2</span><span style="--0:#EEF0F9">></span></div></div><div class="ec-line highlight mark"><div class="code"><span class="indent"><span style="--0:#EEF0F9"> </span></span><span style="--0:#EEF0F9"><</span><span style="--0:#ACAFFF">BuyButton</span><span style="--0:#EEF0F9"> </span><span style="--0:#4BF3C8">id</span><span style="--0:#EEF0F9">=</span><span style="--0:#54B9FF">{</span><span style="--0:#4BF3C8">product</span><span style="--0:#EEF0F9">.</span><span style="--0:#4BF3C8">id</span><span style="--0:#54B9FF">}</span><span style="--0:#EEF0F9"> </span><span style="--0:#4BF3C8">client:load</span><span style="--0:#EEF0F9"> /></span></div></div><div class="ec-line"><div class="code"><span style="--0:#EEF0F9"></</span><span style="--0:#ACAFFF">ProductPageLayout</span><span style="--0:#EEF0F9">></span></div></div></code></pre></div> </div> </div> <div class="order-first sm:order-last h-fit lg:-mt-[4.5rem] bg-[#07040F] border border-astro-gray-600 rounded-2xl"> <div class="h-[2.438rem] px-3 flex items-center whitespace-no-wrap pointer-events-none select-none border-b border-b-astro-gray-600"> <span class="mx-1 inline-block h-3 w-3 rounded-full bg-astro-gray-600"></span> <span class="mx-1 inline-block h-3 w-3 rounded-full bg-astro-gray-600"></span> <span class="mx-1 inline-block h-3 w-3 rounded-full bg-astro-gray-600"></span> </div> <div class="h-[21.5rem] md:max-lg:h-[18rem] xl:h-[26.3rem] overflow-hidden"> <div class="pt-10 sm:pt-0 size-full flex items-end justify-center overflow-hidden"> <div class="w-2/3 md:max-xl:w-4/5 px-3 pt-3 bg-astro-gray-600 rounded-t-3xl"> <div class="p-2 sm:p-4 size-full flex flex-col bg-astro-gray-700 rounded-t-2xl space-y-2"> <img class="w-full h-40 md:h-36 lg:h-40 xl:h-56 rounded-xl object-center object-contain" src="/_astro/astro-cap.jt5HlOg8_Z1BQ7al.webp" alt="Official Astro Cap Swag" loading="lazy" decoding="async"> <div class="flex items-center justify-between text-sm xl:text-base"> <h2 class="text-astro-gray-300 font-medium">Snapback Cap</h2> <p class="text-astro-gray-300 font-medium">$15.50</p> </div> <button type="button" disabled="" aria-disabled="true" class="px-4 py-2 inline-flex items-center justify-center gap-2 text-base font-normal rounded-lg transition-all ease-in-out duration-700 bg-[#76B3E1] text-gray-950">
Add to cart
</button> </div> </div> </div> </div> </div> </section> </div> </section> <section class="mt-20 md:mt-24 lg:mt-28 xl:mt-36 w-full max-w-screen-xl mx-auto px-4 sm:px-8"> <div class="w-full"> <span class="bg-clip-text text-transparent bg-red-pink-gradient font-semibold">Everything you need</span> <h2 class="mt-1 font-heading text-2xl lg:text-3xl text-white text-balance"> <strong>Fully Featured</strong> </h2> <p class="mt-3 w-full lg:w-2/3 xl:w-1/2 text-base text-astro-gray-200 lg:text-balance font-light"> Astro comes with everything you need to build a modern website. Need more? Extend Astro with integrations. </p> <div class="mt-4"> </div> </div> <!-- features grid for mobile and desktop screens only - hidden on tablet screens --> <div class="mt-4 sm:mt-8 grid grid-cols-1 lg:grid-cols-3 gap-2 lg:gap-4 md:max-lg:hidden"> <a id="content-collections" href="https://docs.astro.build/en/guides/content-collections/" class="group flex flex-col justify-between bg-astro-dark-800 border border-astro-dark-100/20 hover:border-astro-dark-100/40 rounded-xl xl:rounded-2xl overflow-hidden" data-astro-cid-kj3rbqrk=""> <div class="pt-4 lg:pt-6 min-h-52" data-astro-cid-kj3rbqrk=""> <div class="size-full flex items-center justify-between overflow-hidden" data-astro-cid-kj3rbqrk=""> <div class="w-1/2 h-full min-h-40 relative flex items-center overflow-hidden" data-astro-cid-kj3rbqrk=""> <div id="unscanned-docs-container" class="absolute right-1 motion-reduce:right-4 flex items-center justify-center gap-8" data-astro-cid-kj3rbqrk="" style="animation-play-state: paused;"> <div class="relative" data-astro-cid-kj3rbqrk=""> <svg width="64" height="80" viewBox="0 0 64 80" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M0 8C0 3.58172 3.58172 0 8 0H37.3972C39.3933 0 41.3173 0.746214 42.7914 2.09212L52 10.5L61.8784 21.2016C63.2425 22.6794 64 24.6168 64 26.6279V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M0 8C0 3.58172 3.58172 0 8 0H37C41.4183 0 45 3.58172 45 8V11C45 15.4183 48.5817 19 53 19H56C60.4183 19 64 22.5817 64 27V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class="size-[18px] landing-section absolute -bottom-1.5 -right-2 bg-astro-red rounded-full" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" width="14" height="14" astro-icon="ri:close-line"><path fill="currentColor" d="m12 10.586 4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"></path></svg> </div> </div><div class="relative" data-astro-cid-kj3rbqrk=""> <svg width="64" height="80" viewBox="0 0 64 80" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M0 8C0 3.58172 3.58172 0 8 0H37.3972C39.3933 0 41.3173 0.746214 42.7914 2.09212L52 10.5L61.8784 21.2016C63.2425 22.6794 64 24.6168 64 26.6279V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M0 8C0 3.58172 3.58172 0 8 0H37C41.4183 0 45 3.58172 45 8V11C45 15.4183 48.5817 19 53 19H56C60.4183 19 64 22.5817 64 27V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class="size-[18px] landing-section absolute -bottom-1.5 -right-2 bg-astro-red rounded-full" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" width="14" height="14" astro-icon="ri:close-line"><path fill="currentColor" d="m12 10.586 4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"></path></svg> </div> </div><div class="relative" data-astro-cid-kj3rbqrk=""> <svg width="64" height="80" viewBox="0 0 64 80" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M0 8C0 3.58172 3.58172 0 8 0H37.3972C39.3933 0 41.3173 0.746214 42.7914 2.09212L52 10.5L61.8784 21.2016C63.2425 22.6794 64 24.6168 64 26.6279V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M0 8C0 3.58172 3.58172 0 8 0H37C41.4183 0 45 3.58172 45 8V11C45 15.4183 48.5817 19 53 19H56C60.4183 19 64 22.5817 64 27V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class="size-[18px] landing-section absolute -bottom-1.5 -right-2 bg-astro-red rounded-full" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" width="14" height="14" astro-icon="ri:close-line"><path fill="currentColor" d="m12 10.586 4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"></path></svg> </div> </div><div class="relative" data-astro-cid-kj3rbqrk=""> <svg width="64" height="80" viewBox="0 0 64 80" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M0 8C0 3.58172 3.58172 0 8 0H37.3972C39.3933 0 41.3173 0.746214 42.7914 2.09212L52 10.5L61.8784 21.2016C63.2425 22.6794 64 24.6168 64 26.6279V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M0 8C0 3.58172 3.58172 0 8 0H37C41.4183 0 45 3.58172 45 8V11C45 15.4183 48.5817 19 53 19H56C60.4183 19 64 22.5817 64 27V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class="size-[18px] landing-section absolute -bottom-1.5 -right-2 bg-astro-red rounded-full" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" width="14" height="14" astro-icon="ri:close-line"><path fill="currentColor" d="m12 10.586 4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"></path></svg> </div> </div><div class="relative" data-astro-cid-kj3rbqrk=""> <svg width="64" height="80" viewBox="0 0 64 80" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M0 8C0 3.58172 3.58172 0 8 0H37.3972C39.3933 0 41.3173 0.746214 42.7914 2.09212L52 10.5L61.8784 21.2016C63.2425 22.6794 64 24.6168 64 26.6279V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M0 8C0 3.58172 3.58172 0 8 0H37C41.4183 0 45 3.58172 45 8V11C45 15.4183 48.5817 19 53 19H56C60.4183 19 64 22.5817 64 27V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class="size-[18px] landing-section absolute -bottom-1.5 -right-2 bg-astro-red rounded-full" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" width="14" height="14" astro-icon="ri:close-line"><path fill="currentColor" d="m12 10.586 4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"></path></svg> </div> </div><div class="relative" data-astro-cid-kj3rbqrk=""> <svg width="64" height="80" viewBox="0 0 64 80" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M0 8C0 3.58172 3.58172 0 8 0H37.3972C39.3933 0 41.3173 0.746214 42.7914 2.09212L52 10.5L61.8784 21.2016C63.2425 22.6794 64 24.6168 64 26.6279V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M0 8C0 3.58172 3.58172 0 8 0H37C41.4183 0 45 3.58172 45 8V11C45 15.4183 48.5817 19 53 19H56C60.4183 19 64 22.5817 64 27V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class="size-[18px] landing-section absolute -bottom-1.5 -right-2 bg-astro-red rounded-full" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" width="14" height="14" astro-icon="ri:close-line"><path fill="currentColor" d="m12 10.586 4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"></path></svg> </div> </div><div class="relative" data-astro-cid-kj3rbqrk=""> <svg width="64" height="80" viewBox="0 0 64 80" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M0 8C0 3.58172 3.58172 0 8 0H37.3972C39.3933 0 41.3173 0.746214 42.7914 2.09212L52 10.5L61.8784 21.2016C63.2425 22.6794 64 24.6168 64 26.6279V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M0 8C0 3.58172 3.58172 0 8 0H37C41.4183 0 45 3.58172 45 8V11C45 15.4183 48.5817 19 53 19H56C60.4183 19 64 22.5817 64 27V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class="size-[18px] landing-section absolute -bottom-1.5 -right-2 bg-astro-red rounded-full" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" width="14" height="14" astro-icon="ri:close-line"><path fill="currentColor" d="m12 10.586 4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"></path></svg> </div> </div><div class="relative" data-astro-cid-kj3rbqrk=""> <svg width="64" height="80" viewBox="0 0 64 80" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M0 8C0 3.58172 3.58172 0 8 0H37.3972C39.3933 0 41.3173 0.746214 42.7914 2.09212L52 10.5L61.8784 21.2016C63.2425 22.6794 64 24.6168 64 26.6279V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M0 8C0 3.58172 3.58172 0 8 0H37C41.4183 0 45 3.58172 45 8V11C45 15.4183 48.5817 19 53 19H56C60.4183 19 64 22.5817 64 27V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class="size-[18px] landing-section absolute -bottom-1.5 -right-2 bg-astro-red rounded-full" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" width="14" height="14" astro-icon="ri:close-line"><path fill="currentColor" d="m12 10.586 4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"></path></svg> </div> </div><div class="relative" data-astro-cid-kj3rbqrk=""> <svg width="64" height="80" viewBox="0 0 64 80" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M0 8C0 3.58172 3.58172 0 8 0H37.3972C39.3933 0 41.3173 0.746214 42.7914 2.09212L52 10.5L61.8784 21.2016C63.2425 22.6794 64 24.6168 64 26.6279V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M0 8C0 3.58172 3.58172 0 8 0H37C41.4183 0 45 3.58172 45 8V11C45 15.4183 48.5817 19 53 19H56C60.4183 19 64 22.5817 64 27V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class="size-[18px] landing-section absolute -bottom-1.5 -right-2 bg-astro-red rounded-full" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" width="14" height="14" astro-icon="ri:close-line"><path fill="currentColor" d="m12 10.586 4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"></path></svg> </div> </div><div class="relative" data-astro-cid-kj3rbqrk=""> <svg width="64" height="80" viewBox="0 0 64 80" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M0 8C0 3.58172 3.58172 0 8 0H37.3972C39.3933 0 41.3173 0.746214 42.7914 2.09212L52 10.5L61.8784 21.2016C63.2425 22.6794 64 24.6168 64 26.6279V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M0 8C0 3.58172 3.58172 0 8 0H37C41.4183 0 45 3.58172 45 8V11C45 15.4183 48.5817 19 53 19H56C60.4183 19 64 22.5817 64 27V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class="size-[18px] landing-section absolute -bottom-1.5 -right-2 bg-astro-red rounded-full" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" width="14" height="14" astro-icon="ri:close-line"><path fill="currentColor" d="m12 10.586 4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"></path></svg> </div> </div> </div> </div> <div class="w-1/2 h-full min-h-40 relative flex items-center bg-astro-dark-800 overflow-hidden" data-astro-cid-kj3rbqrk=""> <div id="scanner-inlet" class="w-px h-full md:max-lg:h-40" data-astro-cid-kj3rbqrk=""></div> <div id="scanner-light" class="w-12 h-2/3 md:max-lg:h-40 blur-xl z-30" data-astro-cid-kj3rbqrk=""></div> <div id="scanned-docs-container" class="absolute z-10 -left-[59.5rem] motion-reduce:left-4 flex items-center justify-center gap-8" data-astro-cid-kj3rbqrk="" style="animation-play-state: paused;"> <div class="relative pt-0.5" data-astro-cid-kj3rbqrk=""> <svg width="66" height="82" viewBox="0 0 66 82" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M53.3674 11.1609L53.3529 11.1452L53.3371 11.1308L44.1285 2.72287C42.5623 1.29285 40.5181 0.5 38.3972 0.5H9C4.30558 0.5 0.5 4.30558 0.5 9V73C0.5 77.6944 4.30558 81.5 9 81.5H57C61.6944 81.5 65.5 77.6944 65.5 73V27.6279C65.5 25.4911 64.6952 23.4326 63.2458 21.8625L53.3674 11.1609Z" fill="#6B7AAB" stroke="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M1 9C1 4.58172 4.58172 1 9 1H38C42.4183 1 46 4.58172 46 9V12C46 16.4183 49.5817 20 54 20H57C61.4183 20 65 23.5817 65 28V73C65 77.4183 61.4183 81 57 81H9C4.58172 81 1 77.4183 1 73V9Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class=" absolute -bottom-2 -right-2" data-astro-cid-kj3rbqrk=""> <div class="relative landing-section" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="text-[#3178C6]" width="22" height="22" astro-icon="ri:shield-fill"><path fill="currentColor" d="M3.783 2.826 12 1l8.217 1.826a1 1 0 0 1 .783.976v9.987a6 6 0 0 1-2.672 4.992L12 23l-6.328-4.219A6 6 0 0 1 3 13.79V3.802a1 1 0 0 1 .783-.976z"></path></svg> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="absolute m-auto inset-0 text-white" width="14" height="14" astro-icon="ri:check-line"><path fill="currentColor" d="m10 15.172 9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path></svg> </div> </div> </div><div class="relative pt-0.5" data-astro-cid-kj3rbqrk=""> <svg width="66" height="82" viewBox="0 0 66 82" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M53.3674 11.1609L53.3529 11.1452L53.3371 11.1308L44.1285 2.72287C42.5623 1.29285 40.5181 0.5 38.3972 0.5H9C4.30558 0.5 0.5 4.30558 0.5 9V73C0.5 77.6944 4.30558 81.5 9 81.5H57C61.6944 81.5 65.5 77.6944 65.5 73V27.6279C65.5 25.4911 64.6952 23.4326 63.2458 21.8625L53.3674 11.1609Z" fill="#6B7AAB" stroke="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M1 9C1 4.58172 4.58172 1 9 1H38C42.4183 1 46 4.58172 46 9V12C46 16.4183 49.5817 20 54 20H57C61.4183 20 65 23.5817 65 28V73C65 77.4183 61.4183 81 57 81H9C4.58172 81 1 77.4183 1 73V9Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class=" absolute -bottom-2 -right-2" data-astro-cid-kj3rbqrk=""> <div class="relative landing-section" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="text-[#3178C6]" width="22" height="22" astro-icon="ri:shield-fill"><path fill="currentColor" d="M3.783 2.826 12 1l8.217 1.826a1 1 0 0 1 .783.976v9.987a6 6 0 0 1-2.672 4.992L12 23l-6.328-4.219A6 6 0 0 1 3 13.79V3.802a1 1 0 0 1 .783-.976z"></path></svg> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="absolute m-auto inset-0 text-white" width="14" height="14" astro-icon="ri:check-line"><path fill="currentColor" d="m10 15.172 9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path></svg> </div> </div> </div><div class="relative pt-0.5" data-astro-cid-kj3rbqrk=""> <svg width="66" height="82" viewBox="0 0 66 82" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M53.3674 11.1609L53.3529 11.1452L53.3371 11.1308L44.1285 2.72287C42.5623 1.29285 40.5181 0.5 38.3972 0.5H9C4.30558 0.5 0.5 4.30558 0.5 9V73C0.5 77.6944 4.30558 81.5 9 81.5H57C61.6944 81.5 65.5 77.6944 65.5 73V27.6279C65.5 25.4911 64.6952 23.4326 63.2458 21.8625L53.3674 11.1609Z" fill="#6B7AAB" stroke="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M1 9C1 4.58172 4.58172 1 9 1H38C42.4183 1 46 4.58172 46 9V12C46 16.4183 49.5817 20 54 20H57C61.4183 20 65 23.5817 65 28V73C65 77.4183 61.4183 81 57 81H9C4.58172 81 1 77.4183 1 73V9Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class=" absolute -bottom-2 -right-2" data-astro-cid-kj3rbqrk=""> <div class="relative landing-section" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="text-[#3178C6]" width="22" height="22" astro-icon="ri:shield-fill"><path fill="currentColor" d="M3.783 2.826 12 1l8.217 1.826a1 1 0 0 1 .783.976v9.987a6 6 0 0 1-2.672 4.992L12 23l-6.328-4.219A6 6 0 0 1 3 13.79V3.802a1 1 0 0 1 .783-.976z"></path></svg> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="absolute m-auto inset-0 text-white" width="14" height="14" astro-icon="ri:check-line"><path fill="currentColor" d="m10 15.172 9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path></svg> </div> </div> </div><div class="relative pt-0.5" data-astro-cid-kj3rbqrk=""> <svg width="66" height="82" viewBox="0 0 66 82" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M53.3674 11.1609L53.3529 11.1452L53.3371 11.1308L44.1285 2.72287C42.5623 1.29285 40.5181 0.5 38.3972 0.5H9C4.30558 0.5 0.5 4.30558 0.5 9V73C0.5 77.6944 4.30558 81.5 9 81.5H57C61.6944 81.5 65.5 77.6944 65.5 73V27.6279C65.5 25.4911 64.6952 23.4326 63.2458 21.8625L53.3674 11.1609Z" fill="#6B7AAB" stroke="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M1 9C1 4.58172 4.58172 1 9 1H38C42.4183 1 46 4.58172 46 9V12C46 16.4183 49.5817 20 54 20H57C61.4183 20 65 23.5817 65 28V73C65 77.4183 61.4183 81 57 81H9C4.58172 81 1 77.4183 1 73V9Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class=" absolute -bottom-2 -right-2" data-astro-cid-kj3rbqrk=""> <div class="relative landing-section" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="text-[#3178C6]" width="22" height="22" astro-icon="ri:shield-fill"><path fill="currentColor" d="M3.783 2.826 12 1l8.217 1.826a1 1 0 0 1 .783.976v9.987a6 6 0 0 1-2.672 4.992L12 23l-6.328-4.219A6 6 0 0 1 3 13.79V3.802a1 1 0 0 1 .783-.976z"></path></svg> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="absolute m-auto inset-0 text-white" width="14" height="14" astro-icon="ri:check-line"><path fill="currentColor" d="m10 15.172 9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path></svg> </div> </div> </div><div class="relative pt-0.5" data-astro-cid-kj3rbqrk=""> <svg width="66" height="82" viewBox="0 0 66 82" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M53.3674 11.1609L53.3529 11.1452L53.3371 11.1308L44.1285 2.72287C42.5623 1.29285 40.5181 0.5 38.3972 0.5H9C4.30558 0.5 0.5 4.30558 0.5 9V73C0.5 77.6944 4.30558 81.5 9 81.5H57C61.6944 81.5 65.5 77.6944 65.5 73V27.6279C65.5 25.4911 64.6952 23.4326 63.2458 21.8625L53.3674 11.1609Z" fill="#6B7AAB" stroke="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M1 9C1 4.58172 4.58172 1 9 1H38C42.4183 1 46 4.58172 46 9V12C46 16.4183 49.5817 20 54 20H57C61.4183 20 65 23.5817 65 28V73C65 77.4183 61.4183 81 57 81H9C4.58172 81 1 77.4183 1 73V9Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class=" absolute -bottom-2 -right-2" data-astro-cid-kj3rbqrk=""> <div class="relative landing-section" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="text-[#3178C6]" width="22" height="22" astro-icon="ri:shield-fill"><path fill="currentColor" d="M3.783 2.826 12 1l8.217 1.826a1 1 0 0 1 .783.976v9.987a6 6 0 0 1-2.672 4.992L12 23l-6.328-4.219A6 6 0 0 1 3 13.79V3.802a1 1 0 0 1 .783-.976z"></path></svg> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="absolute m-auto inset-0 text-white" width="14" height="14" astro-icon="ri:check-line"><path fill="currentColor" d="m10 15.172 9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path></svg> </div> </div> </div><div class="relative pt-0.5" data-astro-cid-kj3rbqrk=""> <svg width="66" height="82" viewBox="0 0 66 82" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M53.3674 11.1609L53.3529 11.1452L53.3371 11.1308L44.1285 2.72287C42.5623 1.29285 40.5181 0.5 38.3972 0.5H9C4.30558 0.5 0.5 4.30558 0.5 9V73C0.5 77.6944 4.30558 81.5 9 81.5H57C61.6944 81.5 65.5 77.6944 65.5 73V27.6279C65.5 25.4911 64.6952 23.4326 63.2458 21.8625L53.3674 11.1609Z" fill="#6B7AAB" stroke="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M1 9C1 4.58172 4.58172 1 9 1H38C42.4183 1 46 4.58172 46 9V12C46 16.4183 49.5817 20 54 20H57C61.4183 20 65 23.5817 65 28V73C65 77.4183 61.4183 81 57 81H9C4.58172 81 1 77.4183 1 73V9Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class=" absolute -bottom-2 -right-2" data-astro-cid-kj3rbqrk=""> <div class="relative landing-section" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="text-[#3178C6]" width="22" height="22" astro-icon="ri:shield-fill"><path fill="currentColor" d="M3.783 2.826 12 1l8.217 1.826a1 1 0 0 1 .783.976v9.987a6 6 0 0 1-2.672 4.992L12 23l-6.328-4.219A6 6 0 0 1 3 13.79V3.802a1 1 0 0 1 .783-.976z"></path></svg> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="absolute m-auto inset-0 text-white" width="14" height="14" astro-icon="ri:check-line"><path fill="currentColor" d="m10 15.172 9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path></svg> </div> </div> </div><div class="relative pt-0.5" data-astro-cid-kj3rbqrk=""> <svg width="66" height="82" viewBox="0 0 66 82" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M53.3674 11.1609L53.3529 11.1452L53.3371 11.1308L44.1285 2.72287C42.5623 1.29285 40.5181 0.5 38.3972 0.5H9C4.30558 0.5 0.5 4.30558 0.5 9V73C0.5 77.6944 4.30558 81.5 9 81.5H57C61.6944 81.5 65.5 77.6944 65.5 73V27.6279C65.5 25.4911 64.6952 23.4326 63.2458 21.8625L53.3674 11.1609Z" fill="#6B7AAB" stroke="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M1 9C1 4.58172 4.58172 1 9 1H38C42.4183 1 46 4.58172 46 9V12C46 16.4183 49.5817 20 54 20H57C61.4183 20 65 23.5817 65 28V73C65 77.4183 61.4183 81 57 81H9C4.58172 81 1 77.4183 1 73V9Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class=" absolute -bottom-2 -right-2" data-astro-cid-kj3rbqrk=""> <div class="relative landing-section" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="text-[#3178C6]" width="22" height="22" astro-icon="ri:shield-fill"><path fill="currentColor" d="M3.783 2.826 12 1l8.217 1.826a1 1 0 0 1 .783.976v9.987a6 6 0 0 1-2.672 4.992L12 23l-6.328-4.219A6 6 0 0 1 3 13.79V3.802a1 1 0 0 1 .783-.976z"></path></svg> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="absolute m-auto inset-0 text-white" width="14" height="14" astro-icon="ri:check-line"><path fill="currentColor" d="m10 15.172 9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path></svg> </div> </div> </div><div class="relative pt-0.5" data-astro-cid-kj3rbqrk=""> <svg width="66" height="82" viewBox="0 0 66 82" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M53.3674 11.1609L53.3529 11.1452L53.3371 11.1308L44.1285 2.72287C42.5623 1.29285 40.5181 0.5 38.3972 0.5H9C4.30558 0.5 0.5 4.30558 0.5 9V73C0.5 77.6944 4.30558 81.5 9 81.5H57C61.6944 81.5 65.5 77.6944 65.5 73V27.6279C65.5 25.4911 64.6952 23.4326 63.2458 21.8625L53.3674 11.1609Z" fill="#6B7AAB" stroke="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M1 9C1 4.58172 4.58172 1 9 1H38C42.4183 1 46 4.58172 46 9V12C46 16.4183 49.5817 20 54 20H57C61.4183 20 65 23.5817 65 28V73C65 77.4183 61.4183 81 57 81H9C4.58172 81 1 77.4183 1 73V9Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class=" absolute -bottom-2 -right-2" data-astro-cid-kj3rbqrk=""> <div class="relative landing-section" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="text-[#3178C6]" width="22" height="22" astro-icon="ri:shield-fill"><path fill="currentColor" d="M3.783 2.826 12 1l8.217 1.826a1 1 0 0 1 .783.976v9.987a6 6 0 0 1-2.672 4.992L12 23l-6.328-4.219A6 6 0 0 1 3 13.79V3.802a1 1 0 0 1 .783-.976z"></path></svg> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="absolute m-auto inset-0 text-white" width="14" height="14" astro-icon="ri:check-line"><path fill="currentColor" d="m10 15.172 9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path></svg> </div> </div> </div><div class="relative pt-0.5" data-astro-cid-kj3rbqrk=""> <svg width="66" height="82" viewBox="0 0 66 82" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M53.3674 11.1609L53.3529 11.1452L53.3371 11.1308L44.1285 2.72287C42.5623 1.29285 40.5181 0.5 38.3972 0.5H9C4.30558 0.5 0.5 4.30558 0.5 9V73C0.5 77.6944 4.30558 81.5 9 81.5H57C61.6944 81.5 65.5 77.6944 65.5 73V27.6279C65.5 25.4911 64.6952 23.4326 63.2458 21.8625L53.3674 11.1609Z" fill="#6B7AAB" stroke="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M1 9C1 4.58172 4.58172 1 9 1H38C42.4183 1 46 4.58172 46 9V12C46 16.4183 49.5817 20 54 20H57C61.4183 20 65 23.5817 65 28V73C65 77.4183 61.4183 81 57 81H9C4.58172 81 1 77.4183 1 73V9Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class=" absolute -bottom-2 -right-2" data-astro-cid-kj3rbqrk=""> <div class="relative landing-section" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="text-[#3178C6]" width="22" height="22" astro-icon="ri:shield-fill"><path fill="currentColor" d="M3.783 2.826 12 1l8.217 1.826a1 1 0 0 1 .783.976v9.987a6 6 0 0 1-2.672 4.992L12 23l-6.328-4.219A6 6 0 0 1 3 13.79V3.802a1 1 0 0 1 .783-.976z"></path></svg> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="absolute m-auto inset-0 text-white" width="14" height="14" astro-icon="ri:check-line"><path fill="currentColor" d="m10 15.172 9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path></svg> </div> </div> </div><div class="relative pt-0.5" data-astro-cid-kj3rbqrk=""> <svg width="66" height="82" viewBox="0 0 66 82" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M53.3674 11.1609L53.3529 11.1452L53.3371 11.1308L44.1285 2.72287C42.5623 1.29285 40.5181 0.5 38.3972 0.5H9C4.30558 0.5 0.5 4.30558 0.5 9V73C0.5 77.6944 4.30558 81.5 9 81.5H57C61.6944 81.5 65.5 77.6944 65.5 73V27.6279C65.5 25.4911 64.6952 23.4326 63.2458 21.8625L53.3674 11.1609Z" fill="#6B7AAB" stroke="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M1 9C1 4.58172 4.58172 1 9 1H38C42.4183 1 46 4.58172 46 9V12C46 16.4183 49.5817 20 54 20H57C61.4183 20 65 23.5817 65 28V73C65 77.4183 61.4183 81 57 81H9C4.58172 81 1 77.4183 1 73V9Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class=" absolute -bottom-2 -right-2" data-astro-cid-kj3rbqrk=""> <div class="relative landing-section" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="text-[#3178C6]" width="22" height="22" astro-icon="ri:shield-fill"><path fill="currentColor" d="M3.783 2.826 12 1l8.217 1.826a1 1 0 0 1 .783.976v9.987a6 6 0 0 1-2.672 4.992L12 23l-6.328-4.219A6 6 0 0 1 3 13.79V3.802a1 1 0 0 1 .783-.976z"></path></svg> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="absolute m-auto inset-0 text-white" width="14" height="14" astro-icon="ri:check-line"><path fill="currentColor" d="m10 15.172 9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path></svg> </div> </div> </div> </div> </div> </div> </div> <div class="p-4 xl:p-6 space-y-2" data-astro-cid-kj3rbqrk=""> <h3 class="text-base text-white font-semibold" data-astro-cid-kj3rbqrk="">Content Collections</h3> <p class="text-astro-gray-200 font-light text-sm xl:text-base md:text-balance" data-astro-cid-kj3rbqrk="">
Organize your Markdown and MDX with built-in TypeScript type-safety and frontmatter
validation.
</p> </div> </a> <a href="https://docs.astro.build/en/basics/astro-components/" class="group flex flex-col bg-astro-dark-800 border border-astro-dark-100/20 hover:border-astro-dark-100/40 rounded-xl xl:rounded-2xl overflow-hidden" data-astro-cid-of5bu3ny=""> <div class="pt-4 px-4 lg:pt-6 min-h-52 space-y-2 relative" data-astro-cid-of5bu3ny=""> <p id="zero-js" class="absolute z-20 top-0 left-1/2 -translate-x-1/2 bg-clip-text text-transparent bg-gradient-to-b from-[#495057] to-[#211F2F] opacity-70 transition duration-500 ease-in-out motion-safe:group-hover:scale-110 motion-safe:group-hover:opacity-100" data-astro-cid-of5bu3ny="">
0
</p> <div class="absolute top-0 left-0 z-10 size-full bg-[radial-gradient(#252730_0.5px,transparent_0.5px)] [background-size:5px_5px] [mask-image:radial-gradient(ellipse_50%_60%_at_50%_40%,#ffffff_40%,transparent_100%)]" data-astro-cid-of5bu3ny=""></div> </div> <div class="p-4 xl:p-6 xl:mt-4 space-y-2" data-astro-cid-of5bu3ny=""> <h3 class="text-base text-white font-semibold" data-astro-cid-of5bu3ny="">Zero JavaScript, By Default</h3> <p class="text-astro-gray-200 font-light text-sm xl:text-base md:text-balance" data-astro-cid-of5bu3ny="">
Astro only ships the JavaScript you need and automatically strips away the rest for a faster
website.
</p> </div> </a> <a href="https://docs.astro.build/en/guides/view-transitions/" class="group flex flex-col bg-astro-dark-800 border border-astro-dark-100/20 hover:border-astro-dark-100/40 rounded-xl xl:rounded-2xl overflow-hidden"> <div class="pt-4 px-4 lg:pt-6 min-h-52 space-y-2 mix-blend-luminosity group-hover:mix-blend-normal"> <div class="flex items-center justify-center gap-2"> <div class="w-1/3 h-20 xl:h-24 motion-safe:group-hover:w-1/2 xl:motion-safe:group-hover:w-48 rounded-lg xl:rounded-xl bg-gradient-to-tr from-[#211F2F] to-[#074170] transition-all ease-in-out duration-[1.5s]"></div> <div class="w-1/3 h-20 xl:h-24 motion-safe:group-hover:w-1/2 xl:motion-safe:group-hover:w-48 rounded-lg xl:rounded-xl bg-gradient-to-tr from-[#184560] to-[#08203E] transition-all ease-in-out duration-[1.5s]"></div> <div class="w-1/3 h-20 xl:h-24 motion-safe:group-hover:w-full rounded-lg xl:rounded-xl bg-gradient-to-tr from-[#000328] to-[#103783] transition-all ease-in-out duration-[1.5s]"></div> </div> <div class="flex items-center justify-center gap-2"> <div class="w-1/2 motion-safe:group-hover:w-full h-20 xl:h-24 rounded-lg xl:rounded-xl bg-gradient-to-tr from-[#243748] to-[#0A3431] transition-all ease-in-out duration-[1.5s]"></div> <div class="w-1/2 h-20 xl:h-24 rounded-lg xl:rounded-xl bg-gradient-to-tr from-[#133A94] to-[#08203E] transition-all ease-in-out duration-[1.5s]"></div> </div> </div> <div class="p-4 xl:p-6 space-y-2"> <h3 class="text-base text-white font-semibold">View Transitions</h3> <p class="text-astro-gray-200 font-light text-sm xl:text-base md:text-balance">
Seamlessly morph, fade, and swipe across pages with built-in, browser-native View Transition
APIs.
</p> </div> </a> <a href="https://docs.astro.build/en/guides/middleware/" class="flex flex-col bg-astro-dark-800 border border-astro-dark-100/20 hover:border-astro-dark-100/40 rounded-xl xl:rounded-2xl overflow-hidden"> <div class="p-4 xl:p-6 space-y-2"> <h3 class="text-base text-white font-semibold">Middleware</h3> <p class="hidden sm:block text-astro-gray-200 font-light text-sm xl:text-base md:text-balance"> Wrap incoming requests with custom logic like authentication, logging, or data fetching. </p> </div> </a> <a href="https://docs.astro.build/en/guides/actions/" class="flex flex-col bg-astro-dark-800 border border-astro-dark-100/20 hover:border-astro-dark-100/40 rounded-xl xl:rounded-2xl overflow-hidden"> <div class="p-4 xl:p-6 space-y-2"> <h3 class="text-base text-white font-semibold">Actions</h3> <p class="hidden sm:block text-astro-gray-200 font-light text-sm xl:text-base md:text-balance"> Write type-safe backend functions that you can call directly from your frontend JavaScript client code. </p> </div> </a> <a href="https://docs.astro.build/en/guides/environment-variables/" class="flex flex-col bg-astro-dark-800 border border-astro-dark-100/20 hover:border-astro-dark-100/40 rounded-xl xl:rounded-2xl overflow-hidden"> <div class="p-4 xl:p-6 space-y-2"> <h3 class="text-base text-white font-semibold">Environment Variables</h3> <p class="hidden sm:block text-astro-gray-200 font-light text-sm xl:text-base md:text-balance"> Avoid common configuration mistakes with a built-in API to manage your environment variables. </p> </div> </a> <a href="https://astro.build/integrations/?search=&categories%5B%5D=adapters" class="flex flex-col bg-astro-dark-800 border border-astro-dark-100/20 hover:border-astro-dark-100/40 rounded-xl xl:rounded-2xl overflow-hidden"> <div class="p-4 xl:p-6 space-y-2"> <h3 class="text-base text-white font-semibold">Deployment Adapters</h3> <p class="hidden sm:block text-astro-gray-200 font-light text-sm xl:text-base md:text-balance"> Add an integration to instantly customize your project for Vercel, AWS, or your favorite hosting platform. </p> </div> </a> <a href="https://docs.astro.build/en/guides/integrations-guide/" class="flex flex-col bg-astro-dark-800 border border-astro-dark-100/20 hover:border-astro-dark-100/40 rounded-xl xl:rounded-2xl overflow-hidden"> <div class="p-4 xl:p-6 space-y-2"> <h3 class="text-base text-white font-semibold">UI Integrations</h3> <p class="hidden sm:block text-astro-gray-200 font-light text-sm xl:text-base md:text-balance"> Bring your favorite UI frameworks and component libraries with Astro's flexible island architecture. </p> </div> </a> <a href="https://docs.astro.build/en/guides/dev-toolbar/" class="flex flex-col bg-astro-dark-800 border border-astro-dark-100/20 hover:border-astro-dark-100/40 rounded-xl xl:rounded-2xl overflow-hidden"> <div class="p-4 xl:p-6 space-y-2"> <h3 class="text-base text-white font-semibold">Dev Toolbar</h3> <p class="hidden sm:block text-astro-gray-200 font-light text-sm xl:text-base md:text-balance"> Extend your development environment with apps and integrations for the built-in development toolbar. </p> </div> </a> </div> <!-- features grid for tablet screens only --> <div class="mt-4 sm:mt-8 md:max-lg:grid md:grid-cols-2 gap-4 hidden"> <div class="space-y-4"> <a id="content-collections" href="https://docs.astro.build/en/guides/content-collections/" class="group flex flex-col justify-between bg-astro-dark-800 border border-astro-dark-100/20 hover:border-astro-dark-100/40 rounded-xl xl:rounded-2xl overflow-hidden" data-astro-cid-kj3rbqrk=""> <div class="pt-4 lg:pt-6 min-h-52" data-astro-cid-kj3rbqrk=""> <div class="size-full flex items-center justify-between overflow-hidden" data-astro-cid-kj3rbqrk=""> <div class="w-1/2 h-full min-h-40 relative flex items-center overflow-hidden" data-astro-cid-kj3rbqrk=""> <div id="unscanned-docs-container" class="absolute right-1 motion-reduce:right-4 flex items-center justify-center gap-8" data-astro-cid-kj3rbqrk=""> <div class="relative" data-astro-cid-kj3rbqrk=""> <svg width="64" height="80" viewBox="0 0 64 80" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M0 8C0 3.58172 3.58172 0 8 0H37.3972C39.3933 0 41.3173 0.746214 42.7914 2.09212L52 10.5L61.8784 21.2016C63.2425 22.6794 64 24.6168 64 26.6279V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M0 8C0 3.58172 3.58172 0 8 0H37C41.4183 0 45 3.58172 45 8V11C45 15.4183 48.5817 19 53 19H56C60.4183 19 64 22.5817 64 27V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class="size-[18px] landing-section absolute -bottom-1.5 -right-2 bg-astro-red rounded-full" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" width="14" height="14" astro-icon="ri:close-line"><path fill="currentColor" d="m12 10.586 4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"></path></svg> </div> </div><div class="relative" data-astro-cid-kj3rbqrk=""> <svg width="64" height="80" viewBox="0 0 64 80" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M0 8C0 3.58172 3.58172 0 8 0H37.3972C39.3933 0 41.3173 0.746214 42.7914 2.09212L52 10.5L61.8784 21.2016C63.2425 22.6794 64 24.6168 64 26.6279V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M0 8C0 3.58172 3.58172 0 8 0H37C41.4183 0 45 3.58172 45 8V11C45 15.4183 48.5817 19 53 19H56C60.4183 19 64 22.5817 64 27V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class="size-[18px] landing-section absolute -bottom-1.5 -right-2 bg-astro-red rounded-full" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" width="14" height="14" astro-icon="ri:close-line"><path fill="currentColor" d="m12 10.586 4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"></path></svg> </div> </div><div class="relative" data-astro-cid-kj3rbqrk=""> <svg width="64" height="80" viewBox="0 0 64 80" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M0 8C0 3.58172 3.58172 0 8 0H37.3972C39.3933 0 41.3173 0.746214 42.7914 2.09212L52 10.5L61.8784 21.2016C63.2425 22.6794 64 24.6168 64 26.6279V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M0 8C0 3.58172 3.58172 0 8 0H37C41.4183 0 45 3.58172 45 8V11C45 15.4183 48.5817 19 53 19H56C60.4183 19 64 22.5817 64 27V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class="size-[18px] landing-section absolute -bottom-1.5 -right-2 bg-astro-red rounded-full" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" width="14" height="14" astro-icon="ri:close-line"><path fill="currentColor" d="m12 10.586 4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"></path></svg> </div> </div><div class="relative" data-astro-cid-kj3rbqrk=""> <svg width="64" height="80" viewBox="0 0 64 80" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M0 8C0 3.58172 3.58172 0 8 0H37.3972C39.3933 0 41.3173 0.746214 42.7914 2.09212L52 10.5L61.8784 21.2016C63.2425 22.6794 64 24.6168 64 26.6279V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M0 8C0 3.58172 3.58172 0 8 0H37C41.4183 0 45 3.58172 45 8V11C45 15.4183 48.5817 19 53 19H56C60.4183 19 64 22.5817 64 27V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class="size-[18px] landing-section absolute -bottom-1.5 -right-2 bg-astro-red rounded-full" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" width="14" height="14" astro-icon="ri:close-line"><path fill="currentColor" d="m12 10.586 4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"></path></svg> </div> </div><div class="relative" data-astro-cid-kj3rbqrk=""> <svg width="64" height="80" viewBox="0 0 64 80" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M0 8C0 3.58172 3.58172 0 8 0H37.3972C39.3933 0 41.3173 0.746214 42.7914 2.09212L52 10.5L61.8784 21.2016C63.2425 22.6794 64 24.6168 64 26.6279V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M0 8C0 3.58172 3.58172 0 8 0H37C41.4183 0 45 3.58172 45 8V11C45 15.4183 48.5817 19 53 19H56C60.4183 19 64 22.5817 64 27V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class="size-[18px] landing-section absolute -bottom-1.5 -right-2 bg-astro-red rounded-full" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" width="14" height="14" astro-icon="ri:close-line"><path fill="currentColor" d="m12 10.586 4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"></path></svg> </div> </div><div class="relative" data-astro-cid-kj3rbqrk=""> <svg width="64" height="80" viewBox="0 0 64 80" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M0 8C0 3.58172 3.58172 0 8 0H37.3972C39.3933 0 41.3173 0.746214 42.7914 2.09212L52 10.5L61.8784 21.2016C63.2425 22.6794 64 24.6168 64 26.6279V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M0 8C0 3.58172 3.58172 0 8 0H37C41.4183 0 45 3.58172 45 8V11C45 15.4183 48.5817 19 53 19H56C60.4183 19 64 22.5817 64 27V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class="size-[18px] landing-section absolute -bottom-1.5 -right-2 bg-astro-red rounded-full" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" width="14" height="14" astro-icon="ri:close-line"><path fill="currentColor" d="m12 10.586 4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"></path></svg> </div> </div><div class="relative" data-astro-cid-kj3rbqrk=""> <svg width="64" height="80" viewBox="0 0 64 80" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M0 8C0 3.58172 3.58172 0 8 0H37.3972C39.3933 0 41.3173 0.746214 42.7914 2.09212L52 10.5L61.8784 21.2016C63.2425 22.6794 64 24.6168 64 26.6279V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M0 8C0 3.58172 3.58172 0 8 0H37C41.4183 0 45 3.58172 45 8V11C45 15.4183 48.5817 19 53 19H56C60.4183 19 64 22.5817 64 27V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class="size-[18px] landing-section absolute -bottom-1.5 -right-2 bg-astro-red rounded-full" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" width="14" height="14" astro-icon="ri:close-line"><path fill="currentColor" d="m12 10.586 4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"></path></svg> </div> </div><div class="relative" data-astro-cid-kj3rbqrk=""> <svg width="64" height="80" viewBox="0 0 64 80" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M0 8C0 3.58172 3.58172 0 8 0H37.3972C39.3933 0 41.3173 0.746214 42.7914 2.09212L52 10.5L61.8784 21.2016C63.2425 22.6794 64 24.6168 64 26.6279V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M0 8C0 3.58172 3.58172 0 8 0H37C41.4183 0 45 3.58172 45 8V11C45 15.4183 48.5817 19 53 19H56C60.4183 19 64 22.5817 64 27V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class="size-[18px] landing-section absolute -bottom-1.5 -right-2 bg-astro-red rounded-full" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" width="14" height="14" astro-icon="ri:close-line"><path fill="currentColor" d="m12 10.586 4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"></path></svg> </div> </div><div class="relative" data-astro-cid-kj3rbqrk=""> <svg width="64" height="80" viewBox="0 0 64 80" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M0 8C0 3.58172 3.58172 0 8 0H37.3972C39.3933 0 41.3173 0.746214 42.7914 2.09212L52 10.5L61.8784 21.2016C63.2425 22.6794 64 24.6168 64 26.6279V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M0 8C0 3.58172 3.58172 0 8 0H37C41.4183 0 45 3.58172 45 8V11C45 15.4183 48.5817 19 53 19H56C60.4183 19 64 22.5817 64 27V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class="size-[18px] landing-section absolute -bottom-1.5 -right-2 bg-astro-red rounded-full" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" width="14" height="14" astro-icon="ri:close-line"><path fill="currentColor" d="m12 10.586 4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"></path></svg> </div> </div><div class="relative" data-astro-cid-kj3rbqrk=""> <svg width="64" height="80" viewBox="0 0 64 80" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M0 8C0 3.58172 3.58172 0 8 0H37.3972C39.3933 0 41.3173 0.746214 42.7914 2.09212L52 10.5L61.8784 21.2016C63.2425 22.6794 64 24.6168 64 26.6279V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M0 8C0 3.58172 3.58172 0 8 0H37C41.4183 0 45 3.58172 45 8V11C45 15.4183 48.5817 19 53 19H56C60.4183 19 64 22.5817 64 27V72C64 76.4183 60.4183 80 56 80H8C3.58172 80 0 76.4183 0 72V8Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class="size-[18px] landing-section absolute -bottom-1.5 -right-2 bg-astro-red rounded-full" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" width="14" height="14" astro-icon="ri:close-line"><path fill="currentColor" d="m12 10.586 4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636z"></path></svg> </div> </div> </div> </div> <div class="w-1/2 h-full min-h-40 relative flex items-center bg-astro-dark-800 overflow-hidden" data-astro-cid-kj3rbqrk=""> <div id="scanner-inlet" class="w-px h-full md:max-lg:h-40" data-astro-cid-kj3rbqrk=""></div> <div id="scanner-light" class="w-12 h-2/3 md:max-lg:h-40 blur-xl z-30" data-astro-cid-kj3rbqrk=""></div> <div id="scanned-docs-container" class="absolute z-10 -left-[59.5rem] motion-reduce:left-4 flex items-center justify-center gap-8" data-astro-cid-kj3rbqrk=""> <div class="relative pt-0.5" data-astro-cid-kj3rbqrk=""> <svg width="66" height="82" viewBox="0 0 66 82" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M53.3674 11.1609L53.3529 11.1452L53.3371 11.1308L44.1285 2.72287C42.5623 1.29285 40.5181 0.5 38.3972 0.5H9C4.30558 0.5 0.5 4.30558 0.5 9V73C0.5 77.6944 4.30558 81.5 9 81.5H57C61.6944 81.5 65.5 77.6944 65.5 73V27.6279C65.5 25.4911 64.6952 23.4326 63.2458 21.8625L53.3674 11.1609Z" fill="#6B7AAB" stroke="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M1 9C1 4.58172 4.58172 1 9 1H38C42.4183 1 46 4.58172 46 9V12C46 16.4183 49.5817 20 54 20H57C61.4183 20 65 23.5817 65 28V73C65 77.4183 61.4183 81 57 81H9C4.58172 81 1 77.4183 1 73V9Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class=" absolute -bottom-2 -right-2" data-astro-cid-kj3rbqrk=""> <div class="relative landing-section" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="text-[#3178C6]" width="22" height="22" astro-icon="ri:shield-fill"><path fill="currentColor" d="M3.783 2.826 12 1l8.217 1.826a1 1 0 0 1 .783.976v9.987a6 6 0 0 1-2.672 4.992L12 23l-6.328-4.219A6 6 0 0 1 3 13.79V3.802a1 1 0 0 1 .783-.976z"></path></svg> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="absolute m-auto inset-0 text-white" width="14" height="14" astro-icon="ri:check-line"><path fill="currentColor" d="m10 15.172 9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path></svg> </div> </div> </div><div class="relative pt-0.5" data-astro-cid-kj3rbqrk=""> <svg width="66" height="82" viewBox="0 0 66 82" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M53.3674 11.1609L53.3529 11.1452L53.3371 11.1308L44.1285 2.72287C42.5623 1.29285 40.5181 0.5 38.3972 0.5H9C4.30558 0.5 0.5 4.30558 0.5 9V73C0.5 77.6944 4.30558 81.5 9 81.5H57C61.6944 81.5 65.5 77.6944 65.5 73V27.6279C65.5 25.4911 64.6952 23.4326 63.2458 21.8625L53.3674 11.1609Z" fill="#6B7AAB" stroke="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M1 9C1 4.58172 4.58172 1 9 1H38C42.4183 1 46 4.58172 46 9V12C46 16.4183 49.5817 20 54 20H57C61.4183 20 65 23.5817 65 28V73C65 77.4183 61.4183 81 57 81H9C4.58172 81 1 77.4183 1 73V9Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class=" absolute -bottom-2 -right-2" data-astro-cid-kj3rbqrk=""> <div class="relative landing-section" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="text-[#3178C6]" width="22" height="22" astro-icon="ri:shield-fill"><path fill="currentColor" d="M3.783 2.826 12 1l8.217 1.826a1 1 0 0 1 .783.976v9.987a6 6 0 0 1-2.672 4.992L12 23l-6.328-4.219A6 6 0 0 1 3 13.79V3.802a1 1 0 0 1 .783-.976z"></path></svg> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="absolute m-auto inset-0 text-white" width="14" height="14" astro-icon="ri:check-line"><path fill="currentColor" d="m10 15.172 9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path></svg> </div> </div> </div><div class="relative pt-0.5" data-astro-cid-kj3rbqrk=""> <svg width="66" height="82" viewBox="0 0 66 82" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M53.3674 11.1609L53.3529 11.1452L53.3371 11.1308L44.1285 2.72287C42.5623 1.29285 40.5181 0.5 38.3972 0.5H9C4.30558 0.5 0.5 4.30558 0.5 9V73C0.5 77.6944 4.30558 81.5 9 81.5H57C61.6944 81.5 65.5 77.6944 65.5 73V27.6279C65.5 25.4911 64.6952 23.4326 63.2458 21.8625L53.3674 11.1609Z" fill="#6B7AAB" stroke="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M1 9C1 4.58172 4.58172 1 9 1H38C42.4183 1 46 4.58172 46 9V12C46 16.4183 49.5817 20 54 20H57C61.4183 20 65 23.5817 65 28V73C65 77.4183 61.4183 81 57 81H9C4.58172 81 1 77.4183 1 73V9Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class=" absolute -bottom-2 -right-2" data-astro-cid-kj3rbqrk=""> <div class="relative landing-section" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="text-[#3178C6]" width="22" height="22" astro-icon="ri:shield-fill"><path fill="currentColor" d="M3.783 2.826 12 1l8.217 1.826a1 1 0 0 1 .783.976v9.987a6 6 0 0 1-2.672 4.992L12 23l-6.328-4.219A6 6 0 0 1 3 13.79V3.802a1 1 0 0 1 .783-.976z"></path></svg> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="absolute m-auto inset-0 text-white" width="14" height="14" astro-icon="ri:check-line"><path fill="currentColor" d="m10 15.172 9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path></svg> </div> </div> </div><div class="relative pt-0.5" data-astro-cid-kj3rbqrk=""> <svg width="66" height="82" viewBox="0 0 66 82" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M53.3674 11.1609L53.3529 11.1452L53.3371 11.1308L44.1285 2.72287C42.5623 1.29285 40.5181 0.5 38.3972 0.5H9C4.30558 0.5 0.5 4.30558 0.5 9V73C0.5 77.6944 4.30558 81.5 9 81.5H57C61.6944 81.5 65.5 77.6944 65.5 73V27.6279C65.5 25.4911 64.6952 23.4326 63.2458 21.8625L53.3674 11.1609Z" fill="#6B7AAB" stroke="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M1 9C1 4.58172 4.58172 1 9 1H38C42.4183 1 46 4.58172 46 9V12C46 16.4183 49.5817 20 54 20H57C61.4183 20 65 23.5817 65 28V73C65 77.4183 61.4183 81 57 81H9C4.58172 81 1 77.4183 1 73V9Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class=" absolute -bottom-2 -right-2" data-astro-cid-kj3rbqrk=""> <div class="relative landing-section" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="text-[#3178C6]" width="22" height="22" astro-icon="ri:shield-fill"><path fill="currentColor" d="M3.783 2.826 12 1l8.217 1.826a1 1 0 0 1 .783.976v9.987a6 6 0 0 1-2.672 4.992L12 23l-6.328-4.219A6 6 0 0 1 3 13.79V3.802a1 1 0 0 1 .783-.976z"></path></svg> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="absolute m-auto inset-0 text-white" width="14" height="14" astro-icon="ri:check-line"><path fill="currentColor" d="m10 15.172 9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path></svg> </div> </div> </div><div class="relative pt-0.5" data-astro-cid-kj3rbqrk=""> <svg width="66" height="82" viewBox="0 0 66 82" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M53.3674 11.1609L53.3529 11.1452L53.3371 11.1308L44.1285 2.72287C42.5623 1.29285 40.5181 0.5 38.3972 0.5H9C4.30558 0.5 0.5 4.30558 0.5 9V73C0.5 77.6944 4.30558 81.5 9 81.5H57C61.6944 81.5 65.5 77.6944 65.5 73V27.6279C65.5 25.4911 64.6952 23.4326 63.2458 21.8625L53.3674 11.1609Z" fill="#6B7AAB" stroke="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M1 9C1 4.58172 4.58172 1 9 1H38C42.4183 1 46 4.58172 46 9V12C46 16.4183 49.5817 20 54 20H57C61.4183 20 65 23.5817 65 28V73C65 77.4183 61.4183 81 57 81H9C4.58172 81 1 77.4183 1 73V9Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class=" absolute -bottom-2 -right-2" data-astro-cid-kj3rbqrk=""> <div class="relative landing-section" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="text-[#3178C6]" width="22" height="22" astro-icon="ri:shield-fill"><path fill="currentColor" d="M3.783 2.826 12 1l8.217 1.826a1 1 0 0 1 .783.976v9.987a6 6 0 0 1-2.672 4.992L12 23l-6.328-4.219A6 6 0 0 1 3 13.79V3.802a1 1 0 0 1 .783-.976z"></path></svg> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="absolute m-auto inset-0 text-white" width="14" height="14" astro-icon="ri:check-line"><path fill="currentColor" d="m10 15.172 9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path></svg> </div> </div> </div><div class="relative pt-0.5" data-astro-cid-kj3rbqrk=""> <svg width="66" height="82" viewBox="0 0 66 82" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M53.3674 11.1609L53.3529 11.1452L53.3371 11.1308L44.1285 2.72287C42.5623 1.29285 40.5181 0.5 38.3972 0.5H9C4.30558 0.5 0.5 4.30558 0.5 9V73C0.5 77.6944 4.30558 81.5 9 81.5H57C61.6944 81.5 65.5 77.6944 65.5 73V27.6279C65.5 25.4911 64.6952 23.4326 63.2458 21.8625L53.3674 11.1609Z" fill="#6B7AAB" stroke="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M1 9C1 4.58172 4.58172 1 9 1H38C42.4183 1 46 4.58172 46 9V12C46 16.4183 49.5817 20 54 20H57C61.4183 20 65 23.5817 65 28V73C65 77.4183 61.4183 81 57 81H9C4.58172 81 1 77.4183 1 73V9Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class=" absolute -bottom-2 -right-2" data-astro-cid-kj3rbqrk=""> <div class="relative landing-section" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="text-[#3178C6]" width="22" height="22" astro-icon="ri:shield-fill"><path fill="currentColor" d="M3.783 2.826 12 1l8.217 1.826a1 1 0 0 1 .783.976v9.987a6 6 0 0 1-2.672 4.992L12 23l-6.328-4.219A6 6 0 0 1 3 13.79V3.802a1 1 0 0 1 .783-.976z"></path></svg> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="absolute m-auto inset-0 text-white" width="14" height="14" astro-icon="ri:check-line"><path fill="currentColor" d="m10 15.172 9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path></svg> </div> </div> </div><div class="relative pt-0.5" data-astro-cid-kj3rbqrk=""> <svg width="66" height="82" viewBox="0 0 66 82" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M53.3674 11.1609L53.3529 11.1452L53.3371 11.1308L44.1285 2.72287C42.5623 1.29285 40.5181 0.5 38.3972 0.5H9C4.30558 0.5 0.5 4.30558 0.5 9V73C0.5 77.6944 4.30558 81.5 9 81.5H57C61.6944 81.5 65.5 77.6944 65.5 73V27.6279C65.5 25.4911 64.6952 23.4326 63.2458 21.8625L53.3674 11.1609Z" fill="#6B7AAB" stroke="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M1 9C1 4.58172 4.58172 1 9 1H38C42.4183 1 46 4.58172 46 9V12C46 16.4183 49.5817 20 54 20H57C61.4183 20 65 23.5817 65 28V73C65 77.4183 61.4183 81 57 81H9C4.58172 81 1 77.4183 1 73V9Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class=" absolute -bottom-2 -right-2" data-astro-cid-kj3rbqrk=""> <div class="relative landing-section" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="text-[#3178C6]" width="22" height="22" astro-icon="ri:shield-fill"><path fill="currentColor" d="M3.783 2.826 12 1l8.217 1.826a1 1 0 0 1 .783.976v9.987a6 6 0 0 1-2.672 4.992L12 23l-6.328-4.219A6 6 0 0 1 3 13.79V3.802a1 1 0 0 1 .783-.976z"></path></svg> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="absolute m-auto inset-0 text-white" width="14" height="14" astro-icon="ri:check-line"><path fill="currentColor" d="m10 15.172 9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path></svg> </div> </div> </div><div class="relative pt-0.5" data-astro-cid-kj3rbqrk=""> <svg width="66" height="82" viewBox="0 0 66 82" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M53.3674 11.1609L53.3529 11.1452L53.3371 11.1308L44.1285 2.72287C42.5623 1.29285 40.5181 0.5 38.3972 0.5H9C4.30558 0.5 0.5 4.30558 0.5 9V73C0.5 77.6944 4.30558 81.5 9 81.5H57C61.6944 81.5 65.5 77.6944 65.5 73V27.6279C65.5 25.4911 64.6952 23.4326 63.2458 21.8625L53.3674 11.1609Z" fill="#6B7AAB" stroke="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M1 9C1 4.58172 4.58172 1 9 1H38C42.4183 1 46 4.58172 46 9V12C46 16.4183 49.5817 20 54 20H57C61.4183 20 65 23.5817 65 28V73C65 77.4183 61.4183 81 57 81H9C4.58172 81 1 77.4183 1 73V9Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class=" absolute -bottom-2 -right-2" data-astro-cid-kj3rbqrk=""> <div class="relative landing-section" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="text-[#3178C6]" width="22" height="22" astro-icon="ri:shield-fill"><path fill="currentColor" d="M3.783 2.826 12 1l8.217 1.826a1 1 0 0 1 .783.976v9.987a6 6 0 0 1-2.672 4.992L12 23l-6.328-4.219A6 6 0 0 1 3 13.79V3.802a1 1 0 0 1 .783-.976z"></path></svg> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="absolute m-auto inset-0 text-white" width="14" height="14" astro-icon="ri:check-line"><path fill="currentColor" d="m10 15.172 9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path></svg> </div> </div> </div><div class="relative pt-0.5" data-astro-cid-kj3rbqrk=""> <svg width="66" height="82" viewBox="0 0 66 82" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M53.3674 11.1609L53.3529 11.1452L53.3371 11.1308L44.1285 2.72287C42.5623 1.29285 40.5181 0.5 38.3972 0.5H9C4.30558 0.5 0.5 4.30558 0.5 9V73C0.5 77.6944 4.30558 81.5 9 81.5H57C61.6944 81.5 65.5 77.6944 65.5 73V27.6279C65.5 25.4911 64.6952 23.4326 63.2458 21.8625L53.3674 11.1609Z" fill="#6B7AAB" stroke="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M1 9C1 4.58172 4.58172 1 9 1H38C42.4183 1 46 4.58172 46 9V12C46 16.4183 49.5817 20 54 20H57C61.4183 20 65 23.5817 65 28V73C65 77.4183 61.4183 81 57 81H9C4.58172 81 1 77.4183 1 73V9Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class=" absolute -bottom-2 -right-2" data-astro-cid-kj3rbqrk=""> <div class="relative landing-section" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="text-[#3178C6]" width="22" height="22" astro-icon="ri:shield-fill"><path fill="currentColor" d="M3.783 2.826 12 1l8.217 1.826a1 1 0 0 1 .783.976v9.987a6 6 0 0 1-2.672 4.992L12 23l-6.328-4.219A6 6 0 0 1 3 13.79V3.802a1 1 0 0 1 .783-.976z"></path></svg> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="absolute m-auto inset-0 text-white" width="14" height="14" astro-icon="ri:check-line"><path fill="currentColor" d="m10 15.172 9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path></svg> </div> </div> </div><div class="relative pt-0.5" data-astro-cid-kj3rbqrk=""> <svg width="66" height="82" viewBox="0 0 66 82" fill="none" xmlns="http://www.w3.org/2000/svg" data-astro-cid-kj3rbqrk=""> <path d="M53.3674 11.1609L53.3529 11.1452L53.3371 11.1308L44.1285 2.72287C42.5623 1.29285 40.5181 0.5 38.3972 0.5H9C4.30558 0.5 0.5 4.30558 0.5 9V73C0.5 77.6944 4.30558 81.5 9 81.5H57C61.6944 81.5 65.5 77.6944 65.5 73V27.6279C65.5 25.4911 64.6952 23.4326 63.2458 21.8625L53.3674 11.1609Z" fill="#6B7AAB" stroke="#6B7AAB" data-astro-cid-kj3rbqrk=""></path> <path d="M1 9C1 4.58172 4.58172 1 9 1H38C42.4183 1 46 4.58172 46 9V12C46 16.4183 49.5817 20 54 20H57C61.4183 20 65 23.5817 65 28V73C65 77.4183 61.4183 81 57 81H9C4.58172 81 1 77.4183 1 73V9Z" fill="#2F3854" data-astro-cid-kj3rbqrk=""></path> <rect x="10" y="27" width="32" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="37" width="40" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> <rect x="10" y="47" width="28" height="4" rx="2" fill="#6B7AAB" data-astro-cid-kj3rbqrk=""></rect> </svg> <div class=" absolute -bottom-2 -right-2" data-astro-cid-kj3rbqrk=""> <div class="relative landing-section" data-astro-cid-kj3rbqrk=""> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="text-[#3178C6]" width="22" height="22" astro-icon="ri:shield-fill"><path fill="currentColor" d="M3.783 2.826 12 1l8.217 1.826a1 1 0 0 1 .783.976v9.987a6 6 0 0 1-2.672 4.992L12 23l-6.328-4.219A6 6 0 0 1 3 13.79V3.802a1 1 0 0 1 .783-.976z"></path></svg> <svg viewBox="0 0 24 24" data-astro-cid-kj3rbqrk="" class="absolute m-auto inset-0 text-white" width="14" height="14" astro-icon="ri:check-line"><path fill="currentColor" d="m10 15.172 9.192-9.193 1.415 1.414L10 18l-6.364-6.364 1.414-1.414z"></path></svg> </div> </div> </div> </div> </div> </div> </div> <div class="p-4 xl:p-6 space-y-2" data-astro-cid-kj3rbqrk=""> <h3 class="text-base text-white font-semibold" data-astro-cid-kj3rbqrk="">Content Collections</h3> <p class="text-astro-gray-200 font-light text-sm xl:text-base md:text-balance" data-astro-cid-kj3rbqrk="">
Organize your Markdown and MDX with built-in TypeScript type-safety and frontmatter
validation.
</p> </div> </a> <a href="https://docs.astro.build/en/guides/view-transitions/" class="group flex flex-col bg-astro-dark-800 border border-astro-dark-100/20 hover:border-astro-dark-100/40 rounded-xl xl:rounded-2xl overflow-hidden"> <div class="pt-4 px-4 lg:pt-6 min-h-52 space-y-2 mix-blend-luminosity group-hover:mix-blend-normal"> <div class="flex items-center justify-center gap-2"> <div class="w-1/3 h-20 xl:h-24 motion-safe:group-hover:w-1/2 xl:motion-safe:group-hover:w-48 rounded-lg xl:rounded-xl bg-gradient-to-tr from-[#211F2F] to-[#074170] transition-all ease-in-out duration-[1.5s]"></div> <div class="w-1/3 h-20 xl:h-24 motion-safe:group-hover:w-1/2 xl:motion-safe:group-hover:w-48 rounded-lg xl:rounded-xl bg-gradient-to-tr from-[#184560] to-[#08203E] transition-all ease-in-out duration-[1.5s]"></div> <div class="w-1/3 h-20 xl:h-24 motion-safe:group-hover:w-full rounded-lg xl:rounded-xl bg-gradient-to-tr from-[#000328] to-[#103783] transition-all ease-in-out duration-[1.5s]"></div> </div> <div class="flex items-center justify-center gap-2"> <div class="w-1/2 motion-safe:group-hover:w-full h-20 xl:h-24 rounded-lg xl:rounded-xl bg-gradient-to-tr from-[#243748] to-[#0A3431] transition-all ease-in-out duration-[1.5s]"></div> <div class="w-1/2 h-20 xl:h-24 rounded-lg xl:rounded-xl bg-gradient-to-tr from-[#133A94] to-[#08203E] transition-all ease-in-out duration-[1.5s]"></div> </div> </div> <div class="p-4 xl:p-6 space-y-2"> <h3 class="text-base text-white font-semibold">View Transitions</h3> <p class="text-astro-gray-200 font-light text-sm xl:text-base md:text-balance">
Seamlessly morph, fade, and swipe across pages with built-in, browser-native View Transition
APIs.
</p> </div> </a> <a href="https://docs.astro.build/en/guides/integrations-guide/" class="flex flex-col bg-astro-dark-800 border border-astro-dark-100/20 hover:border-astro-dark-100/40 rounded-xl xl:rounded-2xl overflow-hidden"> <div class="p-4 xl:p-6 space-y-2"> <h3 class="text-base text-white font-semibold">UI Integrations</h3> <p class="hidden sm:block text-astro-gray-200 font-light text-sm xl:text-base md:text-balance"> Bring your favorite UI frameworks and component libraries with Astro's flexible island architecture. </p> </div> </a> </div> <div class="space-y-4"> <a href="https://docs.astro.build/en/basics/astro-components/" class="group flex flex-col bg-astro-dark-800 border border-astro-dark-100/20 hover:border-astro-dark-100/40 rounded-xl xl:rounded-2xl overflow-hidden" data-astro-cid-of5bu3ny=""> <div class="pt-4 px-4 lg:pt-6 min-h-52 space-y-2 relative" data-astro-cid-of5bu3ny=""> <p id="zero-js" class="absolute z-20 top-0 left-1/2 -translate-x-1/2 bg-clip-text text-transparent bg-gradient-to-b from-[#495057] to-[#211F2F] opacity-70 transition duration-500 ease-in-out motion-safe:group-hover:scale-110 motion-safe:group-hover:opacity-100" data-astro-cid-of5bu3ny="">
0
</p> <div class="absolute top-0 left-0 z-10 size-full bg-[radial-gradient(#252730_0.5px,transparent_0.5px)] [background-size:5px_5px] [mask-image:radial-gradient(ellipse_50%_60%_at_50%_40%,#ffffff_40%,transparent_100%)]" data-astro-cid-of5bu3ny=""></div> </div> <div class="p-4 xl:p-6 xl:mt-4 space-y-2" data-astro-cid-of5bu3ny=""> <h3 class="text-base text-white font-semibold" data-astro-cid-of5bu3ny="">Zero JavaScript, By Default</h3> <p class="text-astro-gray-200 font-light text-sm xl:text-base md:text-balance" data-astro-cid-of5bu3ny="">
Astro only ships the JavaScript you need and automatically strips away the rest for a faster
website.
</p> </div> </a> <a href="https://docs.astro.build/en/reference/configuration-reference/#experimentalactions" class="flex flex-col bg-astro-dark-800 border border-astro-dark-100/20 hover:border-astro-dark-100/40 rounded-xl xl:rounded-2xl overflow-hidden"> <div class="p-4 xl:p-6 space-y-2"> <h3 class="text-base text-white font-semibold">Actions</h3> <p class="hidden sm:block text-astro-gray-200 font-light text-sm xl:text-base md:text-balance"> Write type-safe backend functions that you can call directly from your frontend JavaScript client code. </p> </div> </a> <a href="https://docs.astro.build/en/guides/environment-variables/" class="flex flex-col bg-astro-dark-800 border border-astro-dark-100/20 hover:border-astro-dark-100/40 rounded-xl xl:rounded-2xl overflow-hidden"> <div class="p-4 xl:p-6 space-y-2"> <h3 class="text-base text-white font-semibold">Environment Variables</h3> <p class="hidden sm:block text-astro-gray-200 font-light text-sm xl:text-base md:text-balance"> Avoid common configuration mistakes with a built-in API to manage your environment variables. </p> </div> </a> <a href="https://astro.build/integrations/?search=&categories%5B%5D=adapters" class="flex flex-col bg-astro-dark-800 border border-astro-dark-100/20 hover:border-astro-dark-100/40 rounded-xl xl:rounded-2xl overflow-hidden"> <div class="p-4 xl:p-6 space-y-2"> <h3 class="text-base text-white font-semibold">Deployment Adapters</h3> <p class="hidden sm:block text-astro-gray-200 font-light text-sm xl:text-base md:text-balance"> Add an integration to instantly customize your project for Vercel, AWS, or your favorite hosting platform. </p> </div> </a> <a href="https://docs.astro.build/en/guides/dev-toolbar/" class="flex flex-col bg-astro-dark-800 border border-astro-dark-100/20 hover:border-astro-dark-100/40 rounded-xl xl:rounded-2xl overflow-hidden"> <div class="p-4 xl:p-6 space-y-2"> <h3 class="text-base text-white font-semibold">Dev Toolbar</h3> <p class="hidden sm:block text-astro-gray-200 font-light text-sm xl:text-base md:text-balance"> Extend your development environment with apps and integrations for the built-in development toolbar. </p> </div> </a> </div> </div> </section> <section class="mt-20 md:mt-24 lg:mt-28 xl:mt-36 relative"> <div class="w-full max-w-screen-xl mx-auto px-4 sm:px-8"> <div class="w-full"> <span class="bg-clip-text text-transparent bg-red-pink-gradient font-semibold">Ecosystem</span> <h2 class="mt-1 font-heading text-2xl lg:text-3xl text-white text-balance"> <strong>Themes</strong> </h2> <p class="mt-3 w-full lg:w-2/3 xl:w-1/2 text-base text-astro-gray-200 lg:text-balance font-light"> Get started faster with a pre-built website theme for Astro. Customize it to make it your own. </p> <div class="mt-4"> </div> </div> </div> <div class="mx-auto w-full max-w-screen-xl"> <div role="tablist" aria-label="Ecosystem Tabs" class="mt-4 py-1 sm:mt-8 px-4 sm:px-8 w-full flex items-center overflow-x-auto whitespace-nowrap no-scrollbar gap-4"> <button role="tab" id="trending" data-tab="trending" tabindex="0" aria-selected="true" class="ecosystem-tab px-6 py-2 group size-fit inline-flex items-center rounded-full bg-astro-dark-600/30 hover:bg-astro-dark-600/70 aria-selected:bg-white transition-all ease-in-out duration-500"> <p class="text-base font-normal text-astro-gray-200 group-aria-selected:bg-clip-text group-aria-selected:text-transparent group-aria-selected:bg-blue-purple-gradient"> Trending </p> </button> <button role="tab" id="e-commerce" data-tab="e-commerce" tabindex="-1" aria-selected="false" class="ecosystem-tab px-6 py-2 group size-fit inline-flex items-center rounded-full bg-astro-dark-600/30 hover:bg-astro-dark-600/70 aria-selected:bg-white transition-all ease-in-out duration-500"> <p class="text-base font-normal text-astro-gray-200 group-aria-selected:bg-clip-text group-aria-selected:text-transparent group-aria-selected:bg-blue-purple-gradient"> E-Commerce </p> </button> <button role="tab" id="blogs" data-tab="blogs" tabindex="-1" aria-selected="false" class="ecosystem-tab px-6 py-2 group size-fit inline-flex items-center rounded-full bg-astro-dark-600/30 hover:bg-astro-dark-600/70 aria-selected:bg-white transition-all ease-in-out duration-500"> <p class="text-base font-normal text-astro-gray-200 group-aria-selected:bg-clip-text group-aria-selected:text-transparent group-aria-selected:bg-blue-purple-gradient"> Blogs </p> </button> <button role="tab" id="docs" data-tab="docs" tabindex="-1" aria-selected="false" class="ecosystem-tab px-6 py-2 group size-fit inline-flex items-center rounded-full bg-astro-dark-600/30 hover:bg-astro-dark-600/70 aria-selected:bg-white transition-all ease-in-out duration-500"> <p class="text-base font-normal text-astro-gray-200 group-aria-selected:bg-clip-text group-aria-selected:text-transparent group-aria-selected:bg-blue-purple-gradient"> Docs </p> </button> <button role="tab" id="portfolios" data-tab="portfolios" tabindex="-1" aria-selected="false" class="ecosystem-tab px-6 py-2 group size-fit inline-flex items-center rounded-full bg-astro-dark-600/30 hover:bg-astro-dark-600/70 aria-selected:bg-white transition-all ease-in-out duration-500"> <p class="text-base font-normal text-astro-gray-200 group-aria-selected:bg-clip-text group-aria-selected:text-transparent group-aria-selected:bg-blue-purple-gradient"> Portfolios </p> </button> <button role="tab" id="landing pages" data-tab="landing pages" tabindex="-1" aria-selected="false" class="ecosystem-tab px-6 py-2 group size-fit inline-flex items-center rounded-full bg-astro-dark-600/30 hover:bg-astro-dark-600/70 aria-selected:bg-white transition-all ease-in-out duration-500"> <p class="text-base font-normal text-astro-gray-200 group-aria-selected:bg-clip-text group-aria-selected:text-transparent group-aria-selected:bg-blue-purple-gradient"> Landing Pages </p> </button> </div> </div> <div id="stardust" class="w-full shrink-0 absolute bottom-0 -z-50 rotate-[-7deg] blur-[160px] rounded-full h-80 lg:h-96 xl:h-[44rem]" data-astro-cid-iiwwisjq=""></div> <div class="my-4 w-full border-t border-t-astro-gray-600"></div> <div class="mx-auto w-full max-w-screen-xl px-4 sm:px-8"> <section data-tab="trending" role="tabpanel" aria-labelledby="trending" id="ecosystem-panel-1"> <div class="p-1 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 rounded-2xl"> <a href="https://astro.build/themes/details/starlight/" target="_blank" class="size-fit group relative rounded-xl border border-astro-dark-100/20"> <img src="/_astro/starlight-lp.Cy5G1hqN_2utiid.webp" class="width-full rounded-xl object-cover object-center" alt="Starlight theme by Astro" width="800" height="507" loading="lazy" decoding="async"> <div class="m-auto size-full hidden group-hover:landing-section absolute inset-0 z-10 bg-gradient-to-b from-transparent to-30% to-astro-dark-900/80 rounded-xl"> <div class="px-4 py-2 inline-flex items-center justify-center gap-2 rounded-full border text-base font-normal transition-all ease-in-out duration-500 hover:cursor-pointer font-sans font-bold border-astro-dark-100/30 hover:border-astro-dark-100/60 text-astro-gray-200 hover:text-astro-gray-100 bg-astro-dark-600/30 hover:bg-astro-dark-600/30"> <span>View Theme</span> <svg viewBox="0 0 24 24" width="18" height="18" astro-icon="ri:eye-line"><path fill="currentColor" d="M12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9C2.121 6.88 6.608 3 12 3zm0 16a9.005 9.005 0 0 0 8.777-7 9.005 9.005 0 0 0-17.554 0A9.005 9.005 0 0 0 12 19zm0-2.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"></path></svg> </div> </div> </a><a href="https://astro.build/themes/details/astroship/" target="_blank" class="size-fit group relative rounded-xl border border-astro-dark-100/20"> <img src="/_astro/astroship.knBTcZAP_ZXxDEQ.webp" class="width-full rounded-xl object-cover object-center" alt="AstroShip theme by Web3Templates" width="800" height="507" loading="lazy" decoding="async"> <div class="m-auto size-full hidden group-hover:landing-section absolute inset-0 z-10 bg-gradient-to-b from-transparent to-30% to-astro-dark-900/80 rounded-xl"> <div class="px-4 py-2 inline-flex items-center justify-center gap-2 rounded-full border text-base font-normal transition-all ease-in-out duration-500 hover:cursor-pointer font-sans font-bold border-astro-dark-100/30 hover:border-astro-dark-100/60 text-astro-gray-200 hover:text-astro-gray-100 bg-astro-dark-600/30 hover:bg-astro-dark-600/30"> <span>View Theme</span> <svg viewBox="0 0 24 24" width="18" height="18" astro-icon="ri:eye-line"><path fill="currentColor" d="M12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9C2.121 6.88 6.608 3 12 3zm0 16a9.005 9.005 0 0 0 8.777-7 9.005 9.005 0 0 0-17.554 0A9.005 9.005 0 0 0 12 19zm0-2.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"></path></svg> </div> </div> </a><a href="https://astro.build/themes/details/astrolus/" target="_blank" class="size-fit group relative rounded-xl border border-astro-dark-100/20"> <img src="/_astro/astrolus.ffg8hvUW_ZuzOQO.webp" class="width-full rounded-xl object-cover object-center" alt="Astrolus theme by Tailus-UI" width="800" height="507" loading="lazy" decoding="async"> <div class="m-auto size-full hidden group-hover:landing-section absolute inset-0 z-10 bg-gradient-to-b from-transparent to-30% to-astro-dark-900/80 rounded-xl"> <div class="px-4 py-2 inline-flex items-center justify-center gap-2 rounded-full border text-base font-normal transition-all ease-in-out duration-500 hover:cursor-pointer font-sans font-bold border-astro-dark-100/30 hover:border-astro-dark-100/60 text-astro-gray-200 hover:text-astro-gray-100 bg-astro-dark-600/30 hover:bg-astro-dark-600/30"> <span>View Theme</span> <svg viewBox="0 0 24 24" width="18" height="18" astro-icon="ri:eye-line"><path fill="currentColor" d="M12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9C2.121 6.88 6.608 3 12 3zm0 16a9.005 9.005 0 0 0 8.777-7 9.005 9.005 0 0 0-17.554 0A9.005 9.005 0 0 0 12 19zm0-2.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"></path></svg> </div> </div> </a><a href="https://astro.build/themes/details/prima-persona/" target="_blank" class="size-fit group relative rounded-xl border border-astro-dark-100/20 hidden lg:block"> <img src="/_astro/prima-persona.Dzc-txkT_Z13PXSe.webp" class="width-full rounded-xl object-cover object-center" alt="Prima Persona theme by Lexington Themes" width="800" height="507" loading="lazy" decoding="async"> <div class="m-auto size-full hidden group-hover:landing-section absolute inset-0 z-10 bg-gradient-to-b from-transparent to-30% to-astro-dark-900/80 rounded-xl"> <div class="px-4 py-2 inline-flex items-center justify-center gap-2 rounded-full border text-base font-normal transition-all ease-in-out duration-500 hover:cursor-pointer font-sans font-bold border-astro-dark-100/30 hover:border-astro-dark-100/60 text-astro-gray-200 hover:text-astro-gray-100 bg-astro-dark-600/30 hover:bg-astro-dark-600/30"> <span>View Theme</span> <svg viewBox="0 0 24 24" width="18" height="18" astro-icon="ri:eye-line"><path fill="currentColor" d="M12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9C2.121 6.88 6.608 3 12 3zm0 16a9.005 9.005 0 0 0 8.777-7 9.005 9.005 0 0 0-17.554 0A9.005 9.005 0 0 0 12 19zm0-2.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"></path></svg> </div> </div> </a><a href="https://astro.build/themes/details/tailcast/" target="_blank" class="size-fit group relative rounded-xl border border-astro-dark-100/20 hidden lg:block"> <img src="/_astro/tailcast.yVop1N_i_Z1uBVFX.webp" class="width-full rounded-xl object-cover object-center" alt="Tailcast theme by matt765" width="800" height="507" loading="lazy" decoding="async"> <div class="m-auto size-full hidden group-hover:landing-section absolute inset-0 z-10 bg-gradient-to-b from-transparent to-30% to-astro-dark-900/80 rounded-xl"> <div class="px-4 py-2 inline-flex items-center justify-center gap-2 rounded-full border text-base font-normal transition-all ease-in-out duration-500 hover:cursor-pointer font-sans font-bold border-astro-dark-100/30 hover:border-astro-dark-100/60 text-astro-gray-200 hover:text-astro-gray-100 bg-astro-dark-600/30 hover:bg-astro-dark-600/30"> <span>View Theme</span> <svg viewBox="0 0 24 24" width="18" height="18" astro-icon="ri:eye-line"><path fill="currentColor" d="M12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9C2.121 6.88 6.608 3 12 3zm0 16a9.005 9.005 0 0 0 8.777-7 9.005 9.005 0 0 0-17.554 0A9.005 9.005 0 0 0 12 19zm0-2.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"></path></svg> </div> </div> </a> <div class="size-fit group relative"> <img src="/_astro/more-themes.BRI40hdA_Z2n581H.webp" class="width-full rounded-xl isolate select-none" alt="An image showing all types of content driven websites you can build with Astro" width="800" height="507" loading="lazy" decoding="async"> <div class="m-auto size-full landing-section absolute inset-0 z-10 bg-gradient-to-b from-transparent to-30% to-astro-dark-900/20 group-hover:to-astro-dark-900/50 rounded-xl"> <a href="/themes" class="secondary px-4 py-2 group inline-flex items-center justify-center gap-2 rounded-full border text-base font-normal transition-all ease-in-out duration-500 hover:cursor-pointer" data-astro-cid-6ixtg63z=""> <span>Browse more themes</span> <svg viewBox="0 0 24 24" width="18" height="18" astro-icon="ri:arrow-right-line"><path fill="currentColor" d="m16.172 11-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"></path></svg> </a> </div> </div> </div> </section> <section data-tab="e-commerce" role="tabpanel" aria-labelledby="e-commerce" class="hidden" id="ecosystem-panel-2"> <div> <div class="p-1 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 rounded-2xl"> <a href="https://astro.build/themes/details/astro-shopify/" target="_blank" class="size-fit group relative rounded-xl border border-astro-dark-100/20"> <img src="/_astro/astro-shopify.B2cAlq31_shOnD.webp" class="width-full rounded-xl object-cover object-center" alt="Astro Shopify theme by thomasKn" width="800" height="1022" loading="lazy" decoding="async"> <div class="m-auto size-full hidden group-hover:landing-section absolute inset-0 z-10 bg-gradient-to-b from-transparent to-30% to-astro-dark-900/80 rounded-xl"> <div class="px-4 py-2 inline-flex items-center justify-center gap-2 rounded-full border text-base font-normal transition-all ease-in-out duration-500 hover:cursor-pointer font-sans font-bold border-astro-dark-100/30 hover:border-astro-dark-100/60 text-astro-gray-200 hover:text-astro-gray-100 bg-astro-dark-600/30 hover:bg-astro-dark-600/30"> <span>View Theme</span> <svg viewBox="0 0 24 24" width="18" height="18" astro-icon="ri:eye-line"><path fill="currentColor" d="M12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9C2.121 6.88 6.608 3 12 3zm0 16a9.005 9.005 0 0 0 8.777-7 9.005 9.005 0 0 0-17.554 0A9.005 9.005 0 0 0 12 19zm0-2.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"></path></svg> </div> </div> </a><a href="https://astro.build/themes/details/quick-store/" target="_blank" class="size-fit group relative rounded-xl border border-astro-dark-100/20"> <img src="/_astro/quick-store.Dy67a8cK_ZTGAUh.webp" class="width-full rounded-xl object-cover object-center" alt="Quick Store theme by Lexington Themes" width="800" height="1022" loading="lazy" decoding="async"> <div class="m-auto size-full hidden group-hover:landing-section absolute inset-0 z-10 bg-gradient-to-b from-transparent to-30% to-astro-dark-900/80 rounded-xl"> <div class="px-4 py-2 inline-flex items-center justify-center gap-2 rounded-full border text-base font-normal transition-all ease-in-out duration-500 hover:cursor-pointer font-sans font-bold border-astro-dark-100/30 hover:border-astro-dark-100/60 text-astro-gray-200 hover:text-astro-gray-100 bg-astro-dark-600/30 hover:bg-astro-dark-600/30"> <span>View Theme</span> <svg viewBox="0 0 24 24" width="18" height="18" astro-icon="ri:eye-line"><path fill="currentColor" d="M12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9C2.121 6.88 6.608 3 12 3zm0 16a9.005 9.005 0 0 0 8.777-7 9.005 9.005 0 0 0-17.554 0A9.005 9.005 0 0 0 12 19zm0-2.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"></path></svg> </div> </div> </a><a href="https://astro.build/themes/details/skncre-a-hygraph-cosmetics-brand-e-commerce/" target="_blank" class="size-fit group relative rounded-xl border border-astro-dark-100/20 hidden lg:block"> <img src="/_astro/SKNCRE.R_heZtGw_1qO2O7.webp" class="width-full rounded-xl object-cover object-center" alt="SKNCRE theme by Bryan Robinson" width="800" height="1022" loading="lazy" decoding="async"> <div class="m-auto size-full hidden group-hover:landing-section absolute inset-0 z-10 bg-gradient-to-b from-transparent to-30% to-astro-dark-900/80 rounded-xl"> <div class="px-4 py-2 inline-flex items-center justify-center gap-2 rounded-full border text-base font-normal transition-all ease-in-out duration-500 hover:cursor-pointer font-sans font-bold border-astro-dark-100/30 hover:border-astro-dark-100/60 text-astro-gray-200 hover:text-astro-gray-100 bg-astro-dark-600/30 hover:bg-astro-dark-600/30"> <span>View Theme</span> <svg viewBox="0 0 24 24" width="18" height="18" astro-icon="ri:eye-line"><path fill="currentColor" d="M12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9C2.121 6.88 6.608 3 12 3zm0 16a9.005 9.005 0 0 0 8.777-7 9.005 9.005 0 0 0-17.554 0A9.005 9.005 0 0 0 12 19zm0-2.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"></path></svg> </div> </div> </a> </div> <a href="https://astro.build/themes/?search=&categories%5B%5D=ecommerce" class="mt-4 px-2 sm:px-4 group flex items-center justify-start gap-2 text-astro-gray-200 hover:text-astro-gray-100"> <span class="underline underline-offset-2 decoration-[0.5px] decoration-transparent group-hover:decoration-astro-gray-100">Browse more e-commerce themes</span> <svg viewBox="0 0 24 24" width="18" height="18" astro-icon="ri:arrow-right-line"><path fill="currentColor" d="m16.172 11-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"></path></svg> </a> </div> </section> <section data-tab="blogs" role="tabpanel" aria-labelledby="blogs" class="hidden" id="ecosystem-panel-3"> <div> <div class="p-1 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 rounded-2xl"> <a href="https://astro.build/themes/details/astronano/" target="_blank" class="size-fit group relative rounded-xl border border-astro-dark-100/20"> <img src="/_astro/astro-nano.DpaKlVSa_2vUfV8.webp" class="width-full rounded-xl object-cover object-center" alt="Astro Nano theme by Mark Horn" width="800" height="507" loading="lazy" decoding="async"> <div class="m-auto size-full hidden group-hover:landing-section absolute inset-0 z-10 bg-gradient-to-b from-transparent to-30% to-astro-dark-900/80 rounded-xl"> <div class="px-4 py-2 inline-flex items-center justify-center gap-2 rounded-full border text-base font-normal transition-all ease-in-out duration-500 hover:cursor-pointer font-sans font-bold border-astro-dark-100/30 hover:border-astro-dark-100/60 text-astro-gray-200 hover:text-astro-gray-100 bg-astro-dark-600/30 hover:bg-astro-dark-600/30"> <span>View Theme</span> <svg viewBox="0 0 24 24" width="18" height="18" astro-icon="ri:eye-line"><path fill="currentColor" d="M12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9C2.121 6.88 6.608 3 12 3zm0 16a9.005 9.005 0 0 0 8.777-7 9.005 9.005 0 0 0-17.554 0A9.005 9.005 0 0 0 12 19zm0-2.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"></path></svg> </div> </div> </a><a href="https://astro.build/themes/details/stablo-blog-template/" target="_blank" class="size-fit group relative rounded-xl border border-astro-dark-100/20"> <img src="/_astro/stablo.20_iaSBy_123y3u.webp" class="width-full rounded-xl object-cover object-center" alt="Stablo theme by Web3Templates" width="800" height="507" loading="lazy" decoding="async"> <div class="m-auto size-full hidden group-hover:landing-section absolute inset-0 z-10 bg-gradient-to-b from-transparent to-30% to-astro-dark-900/80 rounded-xl"> <div class="px-4 py-2 inline-flex items-center justify-center gap-2 rounded-full border text-base font-normal transition-all ease-in-out duration-500 hover:cursor-pointer font-sans font-bold border-astro-dark-100/30 hover:border-astro-dark-100/60 text-astro-gray-200 hover:text-astro-gray-100 bg-astro-dark-600/30 hover:bg-astro-dark-600/30"> <span>View Theme</span> <svg viewBox="0 0 24 24" width="18" height="18" astro-icon="ri:eye-line"><path fill="currentColor" d="M12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9C2.121 6.88 6.608 3 12 3zm0 16a9.005 9.005 0 0 0 8.777-7 9.005 9.005 0 0 0-17.554 0A9.005 9.005 0 0 0 12 19zm0-2.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"></path></svg> </div> </div> </a><a href="https://astro.build/themes/details/microblog/" target="_blank" class="size-fit group relative rounded-xl border border-astro-dark-100/20"> <img src="/_astro/microblog.Cd8W9ATs_Z15CPR0.webp" class="width-full rounded-xl object-cover object-center" alt="Microblog theme by Lexington Themes" width="800" height="507" loading="lazy" decoding="async"> <div class="m-auto size-full hidden group-hover:landing-section absolute inset-0 z-10 bg-gradient-to-b from-transparent to-30% to-astro-dark-900/80 rounded-xl"> <div class="px-4 py-2 inline-flex items-center justify-center gap-2 rounded-full border text-base font-normal transition-all ease-in-out duration-500 hover:cursor-pointer font-sans font-bold border-astro-dark-100/30 hover:border-astro-dark-100/60 text-astro-gray-200 hover:text-astro-gray-100 bg-astro-dark-600/30 hover:bg-astro-dark-600/30"> <span>View Theme</span> <svg viewBox="0 0 24 24" width="18" height="18" astro-icon="ri:eye-line"><path fill="currentColor" d="M12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9C2.121 6.88 6.608 3 12 3zm0 16a9.005 9.005 0 0 0 8.777-7 9.005 9.005 0 0 0-17.554 0A9.005 9.005 0 0 0 12 19zm0-2.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"></path></svg> </div> </div> </a><a href="https://astro.build/themes/details/dante/" target="_blank" class="size-fit group relative rounded-xl border border-astro-dark-100/20"> <img src="/_astro/dante.eaFko76u_Z1fzS3p.webp" class="width-full rounded-xl object-cover object-center" alt="Dante theme by Asta Bankauske" width="800" height="507" loading="lazy" decoding="async"> <div class="m-auto size-full hidden group-hover:landing-section absolute inset-0 z-10 bg-gradient-to-b from-transparent to-30% to-astro-dark-900/80 rounded-xl"> <div class="px-4 py-2 inline-flex items-center justify-center gap-2 rounded-full border text-base font-normal transition-all ease-in-out duration-500 hover:cursor-pointer font-sans font-bold border-astro-dark-100/30 hover:border-astro-dark-100/60 text-astro-gray-200 hover:text-astro-gray-100 bg-astro-dark-600/30 hover:bg-astro-dark-600/30"> <span>View Theme</span> <svg viewBox="0 0 24 24" width="18" height="18" astro-icon="ri:eye-line"><path fill="currentColor" d="M12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9C2.121 6.88 6.608 3 12 3zm0 16a9.005 9.005 0 0 0 8.777-7 9.005 9.005 0 0 0-17.554 0A9.005 9.005 0 0 0 12 19zm0-2.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"></path></svg> </div> </div> </a><a href="https://astro.build/themes/details/brutal/" target="_blank" class="size-fit group relative rounded-xl border border-astro-dark-100/20 hidden lg:block"> <img src="/_astro/brutal.Dj5i2_cI_Z1t3fcS.webp" class="width-full rounded-xl object-cover object-center" alt="Brutal theme by ElianCodes" width="800" height="507" loading="lazy" decoding="async"> <div class="m-auto size-full hidden group-hover:landing-section absolute inset-0 z-10 bg-gradient-to-b from-transparent to-30% to-astro-dark-900/80 rounded-xl"> <div class="px-4 py-2 inline-flex items-center justify-center gap-2 rounded-full border text-base font-normal transition-all ease-in-out duration-500 hover:cursor-pointer font-sans font-bold border-astro-dark-100/30 hover:border-astro-dark-100/60 text-astro-gray-200 hover:text-astro-gray-100 bg-astro-dark-600/30 hover:bg-astro-dark-600/30"> <span>View Theme</span> <svg viewBox="0 0 24 24" width="18" height="18" astro-icon="ri:eye-line"><path fill="currentColor" d="M12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9C2.121 6.88 6.608 3 12 3zm0 16a9.005 9.005 0 0 0 8.777-7 9.005 9.005 0 0 0-17.554 0A9.005 9.005 0 0 0 12 19zm0-2.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"></path></svg> </div> </div> </a><a href="https://astro.build/themes/details/openblog/" target="_blank" class="size-fit group relative rounded-xl border border-astro-dark-100/20 hidden lg:block"> <img src="/_astro/openblog.N-z7mp58_Zefjpc.webp" class="width-full rounded-xl object-cover object-center" alt="OpenBlog theme by danielcgilibert" width="800" height="507" loading="lazy" decoding="async"> <div class="m-auto size-full hidden group-hover:landing-section absolute inset-0 z-10 bg-gradient-to-b from-transparent to-30% to-astro-dark-900/80 rounded-xl"> <div class="px-4 py-2 inline-flex items-center justify-center gap-2 rounded-full border text-base font-normal transition-all ease-in-out duration-500 hover:cursor-pointer font-sans font-bold border-astro-dark-100/30 hover:border-astro-dark-100/60 text-astro-gray-200 hover:text-astro-gray-100 bg-astro-dark-600/30 hover:bg-astro-dark-600/30"> <span>View Theme</span> <svg viewBox="0 0 24 24" width="18" height="18" astro-icon="ri:eye-line"><path fill="currentColor" d="M12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9C2.121 6.88 6.608 3 12 3zm0 16a9.005 9.005 0 0 0 8.777-7 9.005 9.005 0 0 0-17.554 0A9.005 9.005 0 0 0 12 19zm0-2.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"></path></svg> </div> </div> </a> </div> <a href="https://astro.build/themes/?search=&categories%5B%5D=blog" class="mt-4 px-2 sm:px-4 group flex items-center justify-start gap-2 text-astro-gray-200 hover:text-astro-gray-100"> <span class="underline underline-offset-2 decoration-[0.5px] decoration-transparent group-hover:decoration-astro-gray-100">Browse more blog themes</span> <svg viewBox="0 0 24 24" width="18" height="18" astro-icon="ri:arrow-right-line"><path fill="currentColor" d="m16.172 11-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"></path></svg> </a> </div> </section> <section data-tab="docs" role="tabpanel" aria-labelledby="docs" class="hidden" id="ecosystem-panel-4"> <div> <div class="p-1 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 rounded-2xl"> <a href="https://astro.build/themes/details/starlight/" target="_blank" class="size-fit group relative rounded-xl border border-astro-dark-100/20"> <img src="/_astro/starlight.CUYv-tJR_g0VG1.webp" class="width-full rounded-xl object-cover object-center" alt="Starlight theme by Astro" width="800" height="1022" loading="lazy" decoding="async"> <div class="m-auto size-full hidden group-hover:landing-section absolute inset-0 z-10 bg-gradient-to-b from-transparent to-30% to-astro-dark-900/80 rounded-xl"> <div class="px-4 py-2 inline-flex items-center justify-center gap-2 rounded-full border text-base font-normal transition-all ease-in-out duration-500 hover:cursor-pointer font-sans font-bold border-astro-dark-100/30 hover:border-astro-dark-100/60 text-astro-gray-200 hover:text-astro-gray-100 bg-astro-dark-600/30 hover:bg-astro-dark-600/30"> <span>View Theme</span> <svg viewBox="0 0 24 24" width="18" height="18" astro-icon="ri:eye-line"><path fill="currentColor" d="M12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9C2.121 6.88 6.608 3 12 3zm0 16a9.005 9.005 0 0 0 8.777-7 9.005 9.005 0 0 0-17.554 0A9.005 9.005 0 0 0 12 19zm0-2.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"></path></svg> </div> </div> </a><a href="https://astro.build/themes/details/astro-design-system-docs/" target="_blank" class="size-fit group relative rounded-xl border border-astro-dark-100/20 hidden lg:block"> <img src="/_astro/astro-design-system.B26E2C8I_2oBSok.webp" class="width-full rounded-xl object-cover object-center" alt="Astro Design System theme by jordi" width="800" height="1022" loading="lazy" decoding="async"> <div class="m-auto size-full hidden group-hover:landing-section absolute inset-0 z-10 bg-gradient-to-b from-transparent to-30% to-astro-dark-900/80 rounded-xl"> <div class="px-4 py-2 inline-flex items-center justify-center gap-2 rounded-full border text-base font-normal transition-all ease-in-out duration-500 hover:cursor-pointer font-sans font-bold border-astro-dark-100/30 hover:border-astro-dark-100/60 text-astro-gray-200 hover:text-astro-gray-100 bg-astro-dark-600/30 hover:bg-astro-dark-600/30"> <span>View Theme</span> <svg viewBox="0 0 24 24" width="18" height="18" astro-icon="ri:eye-line"><path fill="currentColor" d="M12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9C2.121 6.88 6.608 3 12 3zm0 16a9.005 9.005 0 0 0 8.777-7 9.005 9.005 0 0 0-17.554 0A9.005 9.005 0 0 0 12 19zm0-2.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"></path></svg> </div> </div> </a><a href="https://astro.build/themes/details/ion/" target="_blank" class="size-fit group relative rounded-xl border border-astro-dark-100/20"> <img src="/_astro/ion.VBQu18If_ZmVuls.webp" class="width-full rounded-xl object-cover object-center" alt="Ion theme by Louis Escher" width="800" height="1022" loading="lazy" decoding="async"> <div class="m-auto size-full hidden group-hover:landing-section absolute inset-0 z-10 bg-gradient-to-b from-transparent to-30% to-astro-dark-900/80 rounded-xl"> <div class="px-4 py-2 inline-flex items-center justify-center gap-2 rounded-full border text-base font-normal transition-all ease-in-out duration-500 hover:cursor-pointer font-sans font-bold border-astro-dark-100/30 hover:border-astro-dark-100/60 text-astro-gray-200 hover:text-astro-gray-100 bg-astro-dark-600/30 hover:bg-astro-dark-600/30"> <span>View Theme</span> <svg viewBox="0 0 24 24" width="18" height="18" astro-icon="ri:eye-line"><path fill="currentColor" d="M12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9C2.121 6.88 6.608 3 12 3zm0 16a9.005 9.005 0 0 0 8.777-7 9.005 9.005 0 0 0-17.554 0A9.005 9.005 0 0 0 12 19zm0-2.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"></path></svg> </div> </div> </a> </div> <a href="https://astro.build/themes/?search=&categories%5B%5D=docs" class="mt-4 px-2 sm:px-4 group flex items-center justify-start gap-2 text-astro-gray-200 hover:text-astro-gray-100"> <span class="underline underline-offset-2 decoration-[0.5px] decoration-transparent group-hover:decoration-astro-gray-100">Browse more documentation themes</span> <svg viewBox="0 0 24 24" width="18" height="18" astro-icon="ri:arrow-right-line"><path fill="currentColor" d="m16.172 11-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"></path></svg> </a> </div> </section> <section data-tab="portfolios" role="tabpanel" aria-labelledby="portfolios" class="hidden" id="ecosystem-panel-5"> <div class="p-1 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 rounded-2xl"> <a href="https://astro.build/themes/details/astrofy-personal-porfolio-website-template/" target="_blank" class="size-fit group relative rounded-xl border border-astro-dark-100/20"> <img src="/_astro/astrofy.x0ny8wy6_ZrCtIe.webp" class="width-full rounded-xl object-cover object-center" alt="Astrofy theme by manuelernestog" width="800" height="507" loading="lazy" decoding="async"> <div class="m-auto size-full hidden group-hover:landing-section absolute inset-0 z-10 bg-gradient-to-b from-transparent to-30% to-astro-dark-900/80 rounded-xl"> <div class="px-4 py-2 inline-flex items-center justify-center gap-2 rounded-full border text-base font-normal transition-all ease-in-out duration-500 hover:cursor-pointer font-sans font-bold border-astro-dark-100/30 hover:border-astro-dark-100/60 text-astro-gray-200 hover:text-astro-gray-100 bg-astro-dark-600/30 hover:bg-astro-dark-600/30"> <span>View Theme</span> <svg viewBox="0 0 24 24" width="18" height="18" astro-icon="ri:eye-line"><path fill="currentColor" d="M12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9C2.121 6.88 6.608 3 12 3zm0 16a9.005 9.005 0 0 0 8.777-7 9.005 9.005 0 0 0-17.554 0A9.005 9.005 0 0 0 12 19zm0-2.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"></path></svg> </div> </div> </a><a href="https://astro.build/themes/details/swissfolio/" target="_blank" class="size-fit group relative rounded-xl border border-astro-dark-100/20"> <img src="/_astro/swissfolio.kHDsdhvO_b3raJ.webp" class="width-full rounded-xl object-cover object-center" alt="Swissfolio theme by Lexington Themes" width="800" height="507" loading="lazy" decoding="async"> <div class="m-auto size-full hidden group-hover:landing-section absolute inset-0 z-10 bg-gradient-to-b from-transparent to-30% to-astro-dark-900/80 rounded-xl"> <div class="px-4 py-2 inline-flex items-center justify-center gap-2 rounded-full border text-base font-normal transition-all ease-in-out duration-500 hover:cursor-pointer font-sans font-bold border-astro-dark-100/30 hover:border-astro-dark-100/60 text-astro-gray-200 hover:text-astro-gray-100 bg-astro-dark-600/30 hover:bg-astro-dark-600/30"> <span>View Theme</span> <svg viewBox="0 0 24 24" width="18" height="18" astro-icon="ri:eye-line"><path fill="currentColor" d="M12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9C2.121 6.88 6.608 3 12 3zm0 16a9.005 9.005 0 0 0 8.777-7 9.005 9.005 0 0 0-17.554 0A9.005 9.005 0 0 0 12 19zm0-2.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"></path></svg> </div> </div> </a><a href="https://astro.build/themes/details/gurido/" target="_blank" class="size-fit group relative rounded-xl border border-astro-dark-100/20"> <img src="/_astro/gurido.C74fIMwD_Z5LNiP.webp" class="width-full rounded-xl object-cover object-center" alt="Gurido theme by Lexington Themes" width="800" height="507" loading="lazy" decoding="async"> <div class="m-auto size-full hidden group-hover:landing-section absolute inset-0 z-10 bg-gradient-to-b from-transparent to-30% to-astro-dark-900/80 rounded-xl"> <div class="px-4 py-2 inline-flex items-center justify-center gap-2 rounded-full border text-base font-normal transition-all ease-in-out duration-500 hover:cursor-pointer font-sans font-bold border-astro-dark-100/30 hover:border-astro-dark-100/60 text-astro-gray-200 hover:text-astro-gray-100 bg-astro-dark-600/30 hover:bg-astro-dark-600/30"> <span>View Theme</span> <svg viewBox="0 0 24 24" width="18" height="18" astro-icon="ri:eye-line"><path fill="currentColor" d="M12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9C2.121 6.88 6.608 3 12 3zm0 16a9.005 9.005 0 0 0 8.777-7 9.005 9.005 0 0 0-17.554 0A9.005 9.005 0 0 0 12 19zm0-2.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"></path></svg> </div> </div> </a><a href="https://astro.build/themes/details/shareyourlinks/" target="_blank" class="size-fit group relative rounded-xl border border-astro-dark-100/20 hidden lg:block"> <img src="/_astro/share-your-links.D4SkifyL_Z14xmT3.webp" class="width-full rounded-xl object-cover object-center" alt="ShareYourLinks theme by Angela Sofia Osorio" width="800" height="507" loading="lazy" decoding="async"> <div class="m-auto size-full hidden group-hover:landing-section absolute inset-0 z-10 bg-gradient-to-b from-transparent to-30% to-astro-dark-900/80 rounded-xl"> <div class="px-4 py-2 inline-flex items-center justify-center gap-2 rounded-full border text-base font-normal transition-all ease-in-out duration-500 hover:cursor-pointer font-sans font-bold border-astro-dark-100/30 hover:border-astro-dark-100/60 text-astro-gray-200 hover:text-astro-gray-100 bg-astro-dark-600/30 hover:bg-astro-dark-600/30"> <span>View Theme</span> <svg viewBox="0 0 24 24" width="18" height="18" astro-icon="ri:eye-line"><path fill="currentColor" d="M12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9C2.121 6.88 6.608 3 12 3zm0 16a9.005 9.005 0 0 0 8.777-7 9.005 9.005 0 0 0-17.554 0A9.005 9.005 0 0 0 12 19zm0-2.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"></path></svg> </div> </div> </a><a href="https://astro.build/themes/details/esquelete-cv/" target="_blank" class="size-fit group relative rounded-xl border border-astro-dark-100/20 hidden lg:block"> <img src="/_astro/esquelete-cv.CFllQl57_Z1xUlNc.webp" class="width-full rounded-xl object-cover object-center" alt="Esquelete CV theme by Martín" width="800" height="507" loading="lazy" decoding="async"> <div class="m-auto size-full hidden group-hover:landing-section absolute inset-0 z-10 bg-gradient-to-b from-transparent to-30% to-astro-dark-900/80 rounded-xl"> <div class="px-4 py-2 inline-flex items-center justify-center gap-2 rounded-full border text-base font-normal transition-all ease-in-out duration-500 hover:cursor-pointer font-sans font-bold border-astro-dark-100/30 hover:border-astro-dark-100/60 text-astro-gray-200 hover:text-astro-gray-100 bg-astro-dark-600/30 hover:bg-astro-dark-600/30"> <span>View Theme</span> <svg viewBox="0 0 24 24" width="18" height="18" astro-icon="ri:eye-line"><path fill="currentColor" d="M12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9C2.121 6.88 6.608 3 12 3zm0 16a9.005 9.005 0 0 0 8.777-7 9.005 9.005 0 0 0-17.554 0A9.005 9.005 0 0 0 12 19zm0-2.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"></path></svg> </div> </div> </a> <div class="size-fit group relative"> <img src="/_astro/more-portfolio-themes.CEQpWrzr_21hHiE.webp" class="width-full rounded-xl isolate select-none" alt="An image showing all types of content driven websites you can build with Astro" width="800" height="507" loading="lazy" decoding="async"> <div class="m-auto size-full landing-section absolute inset-0 z-10 bg-gradient-to-b from-transparent to-30% to-astro-dark-900/20 group-hover:to-astro-dark-900/50 rounded-xl"> <a href="https://astro.build/themes/?search=&categories%5B%5D=portfolio" class="secondary px-4 py-2 group inline-flex items-center justify-center gap-2 rounded-full border text-base font-normal transition-all ease-in-out duration-500 hover:cursor-pointer" data-astro-cid-6ixtg63z=""> <span>Browse more portfolio themes</span> <svg viewBox="0 0 24 24" width="18" height="18" astro-icon="ri:arrow-right-line"><path fill="currentColor" d="m16.172 11-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"></path></svg> </a> </div> </div> </div> </section> <section data-tab="landing pages" role="tabpanel" aria-labelledby="landing pages" class="hidden" id="ecosystem-panel-6"> <div class="p-1 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 rounded-2xl"> <a href="https://astro.build/themes/details/sendit/" target="_blank" class="size-fit group relative rounded-xl border border-astro-dark-100/20"> <img src="/_astro/sendit.Mx3kHD-6_Xzgg2.webp" class="width-full rounded-xl object-cover object-center" alt="Sendit theme by CloudCannon" width="800" height="507" loading="lazy" decoding="async"> <div class="m-auto size-full hidden group-hover:landing-section absolute inset-0 z-10 bg-gradient-to-b from-transparent to-30% to-astro-dark-900/80 rounded-xl"> <div class="px-4 py-2 inline-flex items-center justify-center gap-2 rounded-full border text-base font-normal transition-all ease-in-out duration-500 hover:cursor-pointer font-sans font-bold border-astro-dark-100/30 hover:border-astro-dark-100/60 text-astro-gray-200 hover:text-astro-gray-100 bg-astro-dark-600/30 hover:bg-astro-dark-600/30"> <span>View Theme</span> <svg viewBox="0 0 24 24" width="18" height="18" astro-icon="ri:eye-line"><path fill="currentColor" d="M12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9C2.121 6.88 6.608 3 12 3zm0 16a9.005 9.005 0 0 0 8.777-7 9.005 9.005 0 0 0-17.554 0A9.005 9.005 0 0 0 12 19zm0-2.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"></path></svg> </div> </div> </a><a href="https://astro.build/themes/details/stone/" target="_blank" class="size-fit group relative rounded-xl border border-astro-dark-100/20"> <img src="/_astro/stone.DAxs2jJD_Z1M4jdr.webp" class="width-full rounded-xl object-cover object-center" alt="Stone theme by m6v3l9" width="800" height="507" loading="lazy" decoding="async"> <div class="m-auto size-full hidden group-hover:landing-section absolute inset-0 z-10 bg-gradient-to-b from-transparent to-30% to-astro-dark-900/80 rounded-xl"> <div class="px-4 py-2 inline-flex items-center justify-center gap-2 rounded-full border text-base font-normal transition-all ease-in-out duration-500 hover:cursor-pointer font-sans font-bold border-astro-dark-100/30 hover:border-astro-dark-100/60 text-astro-gray-200 hover:text-astro-gray-100 bg-astro-dark-600/30 hover:bg-astro-dark-600/30"> <span>View Theme</span> <svg viewBox="0 0 24 24" width="18" height="18" astro-icon="ri:eye-line"><path fill="currentColor" d="M12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9C2.121 6.88 6.608 3 12 3zm0 16a9.005 9.005 0 0 0 8.777-7 9.005 9.005 0 0 0-17.554 0A9.005 9.005 0 0 0 12 19zm0-2.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"></path></svg> </div> </div> </a><a href="https://astro.build/themes/details/positivus/" target="_blank" class="size-fit group relative rounded-xl border border-astro-dark-100/20"> <img src="/_astro/positivus.BjNv8JwM_1nWH2k.webp" class="width-full rounded-xl object-cover object-center" alt="Positivus theme by Manul Thanura" width="800" height="507" loading="lazy" decoding="async"> <div class="m-auto size-full hidden group-hover:landing-section absolute inset-0 z-10 bg-gradient-to-b from-transparent to-30% to-astro-dark-900/80 rounded-xl"> <div class="px-4 py-2 inline-flex items-center justify-center gap-2 rounded-full border text-base font-normal transition-all ease-in-out duration-500 hover:cursor-pointer font-sans font-bold border-astro-dark-100/30 hover:border-astro-dark-100/60 text-astro-gray-200 hover:text-astro-gray-100 bg-astro-dark-600/30 hover:bg-astro-dark-600/30"> <span>View Theme</span> <svg viewBox="0 0 24 24" width="18" height="18" astro-icon="ri:eye-line"><path fill="currentColor" d="M12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9C2.121 6.88 6.608 3 12 3zm0 16a9.005 9.005 0 0 0 8.777-7 9.005 9.005 0 0 0-17.554 0A9.005 9.005 0 0 0 12 19zm0-2.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"></path></svg> </div> </div> </a><a href="https://astro.build/themes/details/atom/" target="_blank" class="size-fit group relative rounded-xl border border-astro-dark-100/20 hidden lg:block"> <img src="/_astro/atom.YzcaRLyp_ZO3n2A.webp" class="width-full rounded-xl object-cover object-center" alt="Atom theme by Méschac Irung" width="800" height="507" loading="lazy" decoding="async"> <div class="m-auto size-full hidden group-hover:landing-section absolute inset-0 z-10 bg-gradient-to-b from-transparent to-30% to-astro-dark-900/80 rounded-xl"> <div class="px-4 py-2 inline-flex items-center justify-center gap-2 rounded-full border text-base font-normal transition-all ease-in-out duration-500 hover:cursor-pointer font-sans font-bold border-astro-dark-100/30 hover:border-astro-dark-100/60 text-astro-gray-200 hover:text-astro-gray-100 bg-astro-dark-600/30 hover:bg-astro-dark-600/30"> <span>View Theme</span> <svg viewBox="0 0 24 24" width="18" height="18" astro-icon="ri:eye-line"><path fill="currentColor" d="M12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9C2.121 6.88 6.608 3 12 3zm0 16a9.005 9.005 0 0 0 8.777-7 9.005 9.005 0 0 0-17.554 0A9.005 9.005 0 0 0 12 19zm0-2.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"></path></svg> </div> </div> </a><a href="https://astro.build/themes/details/astroplate/" target="_blank" class="size-fit group relative rounded-xl border border-astro-dark-100/20 hidden lg:block"> <img src="/_astro/astroplate.DWGGgLDV_Z1A2WKD.webp" class="width-full rounded-xl object-cover object-center" alt="Astroplate theme by Zeon Studio" width="800" height="507" loading="lazy" decoding="async"> <div class="m-auto size-full hidden group-hover:landing-section absolute inset-0 z-10 bg-gradient-to-b from-transparent to-30% to-astro-dark-900/80 rounded-xl"> <div class="px-4 py-2 inline-flex items-center justify-center gap-2 rounded-full border text-base font-normal transition-all ease-in-out duration-500 hover:cursor-pointer font-sans font-bold border-astro-dark-100/30 hover:border-astro-dark-100/60 text-astro-gray-200 hover:text-astro-gray-100 bg-astro-dark-600/30 hover:bg-astro-dark-600/30"> <span>View Theme</span> <svg viewBox="0 0 24 24" width="18" height="18" astro-icon="ri:eye-line"><path fill="currentColor" d="M12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9C2.121 6.88 6.608 3 12 3zm0 16a9.005 9.005 0 0 0 8.777-7 9.005 9.005 0 0 0-17.554 0A9.005 9.005 0 0 0 12 19zm0-2.5a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9zm0-2a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"></path></svg> </div> </div> </a> <div class="size-fit group relative"> <img src="/_astro/more-lp-themes.D8wLTVEK_1mresM.webp" class="width-full rounded-xl isolate select-none" alt="An image showing all types of content driven websites you can build with Astro" width="800" height="507" loading="lazy" decoding="async"> <div class="m-auto size-full landing-section absolute inset-0 z-10 bg-gradient-to-b from-transparent to-30% to-astro-dark-900/20 group-hover:to-astro-dark-900/50 rounded-xl"> <a href="/themes" class="secondary px-4 py-2 group inline-flex items-center justify-center gap-2 rounded-full border text-base font-normal transition-all ease-in-out duration-500 hover:cursor-pointer" data-astro-cid-6ixtg63z=""> <span>Browse more themes</span> <svg viewBox="0 0 24 24" width="18" height="18" astro-icon="ri:arrow-right-line"><path fill="currentColor" d="m16.172 11-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z"></path></svg> </a> </div> </div> </div> </section> </div> </section> <section class="mt-20 sm:mt-36 mx-auto w-full max-w-screen-xl px-4 sm:px-8"> <div class="overflow-hidden rounded-2xl border-y-[0.5px] border-astro-dark-100/20 bg-cover bg-center" style="background-image:url(/_astro/final-cta.-VPcghul_Z2avkpu.webp)"> <div class="landing-section h-full min-h-[24rem] gap-8 lg:gap-12 p-8 md:p-20 xl:min-h-[44rem] lg:p-40"> <h2 class="text-balance text-xl md:text-2xl xl:text-4xl font-heading font-bold">
Start building with <br> Astro today
</h2> <div class="grid grid-rows-2 gap-2"> <a href="https://docs.astro.build/" class="primary w-full h-fit px-4 py-2 group inline-flex items-center justify-center gap-2 rounded-full border text-base font-normal transition-all ease-in-out duration-500 hover:cursor-pointer" data-astro-cid-6ixtg63z=""> <span class="bg-clip-text text-transparent bg-blue-purple-gradient group-hover:text-astro-blue transition-all ease-in-out duration-500">
Get Started
</span> </a> <div data-code-block="" class="px-4 py-2 bg-astro-dark-900/55 backdrop-blur-lg rounded-xl"> <div class="group h-full flex items-center"> <svg width="22" height="13" viewBox="0 0 22 13" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-2 relative block w-3 -rotate-90 text-astro-gray-200 " aria-hidden="true"><path d="M1 1L11 11L21 1" stroke="currentColor" stroke-width="2"></path></svg> <code data-code="" class="flex-1 font-mono font-light text-sm text-astro-gray-200 mr-2"> npm create astro@latest </code> <div class="relative"> <button data-copy-button="" class="block mr-1 transition hover:scale-110 active:scale-100 active:transition-colors text-astro-gray-200 group-hover:text-astro-gray-100" title="Copy to clipboard"> <svg xmlns="http://www.w3.org/2000/svg" class="size-5" viewBox="0 0 24 24"> <path fill="currentColor" d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.006-1zM5.002 8L5 20h10V8zM9 6h8v10h2V4H9z"></path> </svg> </button> <p data-tooltip="" class="absolute left-1/2 top-[calc(100%+8px)] -translate-x-1/2 whitespace-nowrap rounded bg-black/50 p-2 text-sm leading-none opacity-0 transition data-[visible=true]:opacity-100" data-visible="false" aria-hidden="true">
Copied!
</p> </div> </div> </div> </div> </div> </div> </section> <section class="mt-20 md:mt-24 lg:mt-28 xl:mt-36 w-full max-w-screen-xl mx-auto px-4 sm:px-8"> <h2 class="max-w-screen-md mx-auto font-heading text-2xl lg:text-3xl font-bold text-white text-balance text-center">
Astro is free, open-source software made possible by these wonderful sponsors
</h2> <div class="mt-8 lg:mt-10 max-w-4xl w-full mx-auto border border-astro-dark-100/20 bg-astro-dark-800 rounded-xl sm:rounded-2xl overflow-hidden"> <div class="h-96 lg:h-44 flex flex-col lg:grid lg:grid-cols-3 lg:grid-rows-[1fr_auto_auto_1fr] sm:gap-y-4 text-center items-center justify-center lg:divide-x divide-y lg:divide-y-0 divide-astro-dark-100/20"> <a href="https://www.netlify.com/?utm_campaign=Astro-2024&utm_source=astro-referral" rel="sponsored" target="_blank" class="size-full basis-1/3 flex flex-col lg:grid lg:grid-rows-subgrid lg:row-span-full items-center justify-center gap-2 sm:gap-4 -outline-offset-2 hover:bg-astro-gray-100/5 transition-colors duration-400"> <svg viewBox="0 0 512 209" height="60" alt="" class="lg:row-start-2 lg:mx-auto" astro-icon="sponsors/netlify"><g clip-path="url(#astroicon:sponsors/netlifya)"><path fill="#32E6E2" d="M117.436 207.036v-52.432l1.093-1.094h10.923l1.093 1.094v52.432l-1.093 1.094h-10.923l-1.093-1.094Zm0-153.513V1.093L118.529 0h10.923l1.093 1.093v52.43l-1.093 1.093h-10.923l-1.093-1.093ZM69.954 169.238h-1.545l-7.722-7.726v-1.545l18.033-18.029 8.178.004 1.097 1.089v8.178l-18.041 18.029Zm-.008-130.346h-1.544l-7.723 7.726v1.545l18.033 18.029 8.178-.004 1.097-1.09v-8.177l-18.04-18.03ZM1.093 97.51h74.278l1.094 1.094v10.922l-1.094 1.094H1.093L0 109.526V98.604l1.093-1.094Zm439.906 0h69.911l1.094 1.094v10.922l-1.094 1.094h-74.277l-1.094-1.094 4.366-10.922 1.094-1.094Z"></path><path fill="#fff" d="m212.056 108.727-1.093 1.094h-33.884l-1.093 1.093c0 2.187 2.187 8.743 10.93 8.743 3.28 0 6.556-1.093 7.65-3.28l1.093-1.093h13.117l1.093 1.093c-1.093 6.557-6.556 16.397-22.953 16.397-18.58 0-27.327-13.117-27.327-28.417s8.743-28.416 26.233-28.416c17.491 0 26.234 13.117 26.234 28.416v4.374-.004Zm-16.397-10.93c0-1.093-1.093-8.743-9.837-8.743-8.743 0-9.836 7.65-9.836 8.743l1.093 1.094h17.487l1.093-1.094Zm47.001 17.487c0 2.186 1.093 3.28 3.28 3.28h9.836l1.094 1.093v10.93l-1.094 1.094h-9.836c-9.837 0-18.58-4.374-18.58-16.397V91.237l-1.094-1.094h-7.649l-1.094-1.093V78.12l1.094-1.094h7.649l1.094-1.093v-9.837l1.093-1.093h13.117l1.093 1.094v9.836l1.094 1.093h12.023l1.094 1.094v10.93l-1.094 1.093h-12.023l-1.094 1.094v24.047h-.003Zm40.44 16.397h-13.117l-1.094-1.094V56.264l1.094-1.094H283.1l1.093 1.094v74.323l-1.093 1.094Zm29.51-63.394h-13.117l-1.094-1.093v-10.93l1.094-1.094h13.117l1.093 1.094v10.93l-1.093 1.093Zm0 63.394h-13.117l-1.094-1.094V78.124l1.094-1.094h13.117l1.093 1.094v52.463l-1.093 1.094Zm51.37-75.417v10.93l-1.094 1.093h-9.836c-2.187 0-3.281 1.093-3.281 3.28v4.374l1.094 1.093h10.93l1.093 1.094v10.93l-1.093 1.093h-10.93l-1.094 1.093v39.347l-1.093 1.093h-13.117l-1.093-1.093V91.244l-1.094-1.093h-7.649l-1.094-1.093v-10.93l1.094-1.094h7.649l1.094-1.093v-4.374c0-12.023 8.743-16.397 18.58-16.397h9.836l1.094 1.094h.004Zm40.44 76.51c-4.374 10.93-8.743 17.487-24.047 17.487h-5.467l-1.093-1.094v-10.93l1.093-1.093h5.467c5.463 0 6.556-1.094 7.65-4.374v-1.093L370.536 89.05V78.12l1.094-1.094h9.836l1.094 1.094 13.117 37.164h1.093l13.117-37.164 1.093-1.094h9.837l1.093 1.094v10.93l-17.486 43.72-.004.004Zm-268.966-1.093-1.093-1.094.007-31.67c0-5.463-2.148-9.699-8.743-9.836-3.391-.088-7.271-.008-11.416.168l-.619.634.008 40.704-1.094 1.094H99.391l-1.093-1.094V77.539l1.093-1.094 29.51-.267c14.784 0 20.767 10.158 20.767 21.623v32.786l-1.093 1.094h-13.121Z"></path></g><defs><clipPath id="astroicon:sponsors/netlifya"><path fill="#fff" d="M0 0h512v208.126H0z"></path></clipPath></defs></svg> <span class="sr-only">Netlify</span> <span class="lg:row-start-3 font-light text-astro-gray-300">Official Deployment Partner</span> </a><a href="https://sentry.io/welcome/?utm_medium=partner&utm_source=astro&utm_campaign=astro-homepage" rel="sponsored" target="_blank" class="size-full basis-1/3 flex flex-col lg:grid lg:grid-rows-subgrid lg:row-span-full items-center justify-center gap-2 sm:gap-4 -outline-offset-2 hover:bg-astro-gray-100/5 transition-colors duration-400"> <svg class="lg:row-start-2 lg:mx-auto" viewBox="0 0 200 44" height="32" alt="" astro-icon="sponsors/sentry"><path fill="currentColor" d="M29 2.26a4.67 4.67 0 0 0-8 0l-6.58 11.27a32.21 32.21 0 0 1 17.75 26.66h-4.62a27.68 27.68 0 0 0-15.46-22.72L6 28a15.92 15.92 0 0 1 9.23 12.17H4.62A.76.76 0 0 1 4 39.06l2.94-5a10.74 10.74 0 0 0-3.36-1.9l-2.91 5a4.54 4.54 0 0 0 1.69 6.24 4.66 4.66 0 0 0 2.26.6h14.53a19.4 19.4 0 0 0-8-17.31l2.31-4A23.87 23.87 0 0 1 23.76 44h12.31a35.88 35.88 0 0 0-16.41-31.8l4.67-8a.77.77 0 0 1 1.05-.27c.53.29 20.29 34.77 20.66 35.17a.76.76 0 0 1-.68 1.13H40.6q.09 1.91 0 3.81h4.78A4.59 4.59 0 0 0 50 39.43a4.49 4.49 0 0 0-.62-2.28Zm95.32 26.02L109.56 9.22h-3.68v25.55h3.73V15.19l15.18 19.58h3.26V9.22h-3.73Zm-37.17-4.74h13.23v-3.32H87.14v-7.69h14.93V9.21H83.34v25.56h18.92v-3.32H87.14ZM71.59 20.3C66.44 19.06 65 18.08 65 15.7c0-2.14 1.89-3.59 4.71-3.59a12.06 12.06 0 0 1 7.07 2.55l2-2.83a14.1 14.1 0 0 0-9-3c-5.06 0-8.59 3-8.59 7.27 0 4.6 3 6.19 8.46 7.52 4.86 1.12 6.35 2.16 6.35 4.49s-2 3.77-5.09 3.77a12.34 12.34 0 0 1-8.3-3.26l-2.25 2.69a15.94 15.94 0 0 0 10.42 3.85c5.48 0 9-2.95 9-7.51-.03-3.86-2.31-5.93-8.19-7.35ZM195.7 9.22l-7.69 12-7.64-12h-4.46L186 24.67v10.11h3.84V24.55L200 9.22Zm-64.63 3.46h8.37v22.1h3.84v-22.1h8.37V9.22h-20.57Zm38.34 12.12c3.86-1.07 6-3.77 6-7.63 0-4.91-3.59-8-9.38-8h-11.36v25.59h3.8v-9.18h6.45l6.48 9.2h4.44l-7-9.82Zm-10.95-2.5v-9.7h7.17c3.74 0 5.88 1.77 5.88 4.84s-2.29 4.86-5.84 4.86Z"></path></svg> <span class="sr-only">Sentry</span> <span class="lg:row-start-3 font-light text-astro-gray-300">Official App Monitoring Partner</span> </a><a href="https://www.storyblok.com/technologies?utm_source=astro&utm_medium=sponsor&utm_campaign=DGM_BRA_ASTR_TRA&utm_content=Astro_3#astro" rel="sponsored" target="_blank" class="size-full basis-1/3 flex flex-col lg:grid lg:grid-rows-subgrid lg:row-span-full items-center justify-center gap-2 sm:gap-4 -outline-offset-2 hover:bg-astro-gray-100/5 transition-colors duration-400"> <svg viewBox="0 0 251 53" height="40" alt="" class="lg:row-start-2 lg:mx-auto" astro-icon="sponsors/storyblok"><g fill="none"><path fill="currentColor" d="M72.913 37.089a17.26 17.26 0 0 1-5.385-.838 12.283 12.283 0 0 1-4.497-2.619l2.353-3.98a21.357 21.357 0 0 0 3.817 2.095 8.83 8.83 0 0 0 3.555.733c.837 0 1.517-.157 1.987-.471.47-.262.68-.734.68-1.31 0-.523-.262-1.047-.889-1.361a13.58 13.58 0 0 0-3.085-1.048l-3.66-1.204c-.993-.42-1.778-.838-2.405-1.31a3.855 3.855 0 0 1-1.36-1.57 5.14 5.14 0 0 1-.418-2.096 6.813 6.813 0 0 1 2.458-5.341c.732-.629 1.673-1.1 2.718-1.467 1.046-.366 2.197-.524 3.4-.524 1.62 0 3.136.21 4.548.629 1.412.471 2.771 1.257 4.078 2.409l-2.562 3.928a17.404 17.404 0 0 0-3.241-1.833 6.985 6.985 0 0 0-2.824-.576c-.68 0-1.307.104-1.778.419-.522.262-.732.733-.732 1.361 0 .629.262 1.048.785 1.362.523.314 1.568.628 2.98.995 1.31.33 2.602.733 3.87 1.205 1.045.419 1.881.89 2.561 1.361a4.664 4.664 0 0 1 1.882 4.085c0 2.147-.784 3.823-2.405 5.08-1.568 1.257-3.66 1.886-6.43 1.886Zm25.882-1.52c-.89.367-1.935.734-3.085 1.048-1.15.314-2.3.524-3.503.524a8.143 8.143 0 0 1-2.3-.314 5.226 5.226 0 0 1-1.935-1.048c-.523-.419-.942-1.047-1.255-1.728-.314-.733-.523-1.623-.523-2.67V20.12h-2.72v-4.924h2.772v-6.86h6.484v6.808h4.392v4.975H92.73v9.008c0 .681.156 1.205.522 1.571.366.262.837.42 1.36.42.523 0 1.046-.053 1.516-.263.523-.157.994-.314 1.36-.523l1.255 5.237h.052Zm12.235 1.52a12.53 12.53 0 0 1-4.863-.89 10.257 10.257 0 0 1-5.856-6.023 12.064 12.064 0 0 1 0-8.485 10.257 10.257 0 0 1 5.856-6.022c1.412-.576 3.033-.89 4.863-.89a10.97 10.97 0 0 1 8.47 3.404c.994.995 1.726 2.2 2.248 3.508a11.749 11.749 0 0 1 0 8.537 10.31 10.31 0 0 1-5.803 5.97 12.53 12.53 0 0 1-4.915.89Zm-4.706-11.103c0 1.676.418 3.037 1.307 4.032.941 1.048 2.092 1.572 3.451 1.572a4.285 4.285 0 0 0 3.399-1.572 5.833 5.833 0 0 0 .993-1.78c.262-.681.366-1.467.366-2.252 0-1.728-.47-3.09-1.36-4.085-.888-1.048-2.039-1.571-3.398-1.571a4.441 4.441 0 0 0-3.399 1.57c-.418.525-.784 1.048-1.045 1.782a6.819 6.819 0 0 0-.314 2.304Zm33.097-5.185c-1.568 0-3.032.262-4.34.786a5.23 5.23 0 0 0-2.77 2.2v12.935h-6.537V15.197h6.013v4.295c.732-1.467 1.674-2.619 2.876-3.404 1.15-.838 2.353-1.257 3.66-1.31h.68l.418.053v5.97Zm2.876 19.116c.91.316 1.861.493 2.823.523.785 0 1.412-.262 1.883-.785.418-.524.784-1.571 1.15-2.933l-8.157-21.525h6.745l4.967 15.869 4.34-15.869h6.118l-8.21 24.981a8.521 8.521 0 0 1-9.934 5.866c-.522-.105-1.15-.262-1.725-.524v-5.603Zm35.345-2.828c-1.62 0-3.084-.315-4.287-1.048a7.587 7.587 0 0 1-2.928-2.88v3.561h-5.7V6.766h6.589v11.94a7.788 7.788 0 0 1 7.006-3.928c1.36 0 2.614.262 3.765.89 1.15.524 2.091 1.362 2.98 2.357a13.74 13.74 0 0 1 1.882 12.36 11.547 11.547 0 0 1-2.143 3.561 9.615 9.615 0 0 1-7.164 3.143Zm-1.83-5.5a4.968 4.968 0 0 0 4.706-3.351 6.503 6.503 0 0 0-.993-6.232 4.233 4.233 0 0 0-3.451-1.676c-.994 0-1.935.366-2.824 1.047a7.496 7.496 0 0 0-1.986 2.723v4.504a5.123 5.123 0 0 0 4.6 2.933l-.052.053Zm15.059-24.823h6.536v22.257c0 1.676.68 2.462 2.091 2.462a4.595 4.595 0 0 0 2.144-.524l.889 4.87a14.933 14.933 0 0 1-5.804 1.258c-1.882 0-3.346-.524-4.34-1.467-1.046-1.047-1.568-2.409-1.568-4.294V6.766h.052Zm24 30.323a12.53 12.53 0 0 1-4.863-.89 10.31 10.31 0 0 1-5.909-6.023 12.06 12.06 0 0 1 2.196-12.046c1.046-1.047 2.196-1.833 3.66-2.461 1.412-.576 3.033-.89 4.863-.89a10.97 10.97 0 0 1 8.47 3.404c1.046.995 1.726 2.2 2.249 3.508a11.798 11.798 0 0 1-2.196 12.046 10.038 10.038 0 0 1-3.66 2.461 12.53 12.53 0 0 1-4.863.89h.052Zm-4.759-11.103c0 1.676.418 3.037 1.307 4.032.941 1.048 2.092 1.572 3.451 1.572a4.337 4.337 0 0 0 3.399-1.572 5.833 5.833 0 0 0 .993-1.78c.262-.681.366-1.467.366-2.252 0-1.728-.47-3.09-1.36-4.085-.888-1.048-2.038-1.571-3.398-1.571a4.441 4.441 0 0 0-3.398 1.57c-.419.525-.785 1.048-1.046 1.782-.262.733-.314 1.466-.314 2.304Zm33.934 10.736-5.595-8.694-2.3 2.41v6.284h-6.536V6.766h6.536V24.1l7.267-8.903h6.955l-7.739 9.27L251 36.722h-6.954Z"></path><path fill="#0AB3AF" d="M2.327 0C1.034 0 0 1.033 0 2.273v40.602c0 1.24 1.034 2.015 2.275 2.015h5.997V53l7.446-8.058h27.195c1.241 0 2.017-.775 2.017-2.067V2.325c0-1.24-.724-2.325-2.017-2.325H2.327Z"></path><path fill="#FFF" d="M29.102 8.115c1.033 0 1.912.206 2.738.67a7.12 7.12 0 0 1 2.067 1.653 7.739 7.739 0 0 1 1.757 5.007c0 1.343-.362 2.633-1.033 3.872a6.457 6.457 0 0 1-3.1 2.788c1.653.464 2.945 1.29 3.926 2.478.93 1.239 1.395 2.839 1.395 4.852 0 1.29-.235 2.44-.723 3.304-.517.93-1.292 1.704-2.222 2.272-.982.62-2.067 1.187-3.307 1.445-1.24.31-2.583.568-3.979.568H8.33V8.114h20.772Zm-2.968 16.157H15.778v4.883h10.107c.598 0 1.145-.244 1.593-.635.399-.39.648-.976.648-1.709a2.89 2.89 0 0 0-.548-1.758c-.398-.488-.846-.781-1.444-.781Zm-.846-9.767h-9.51V18.9h9.31c.498 0 .996-.244 1.395-.537.448-.293.647-.928.647-1.758 0-.733-.2-1.27-.548-1.612a2.013 2.013 0 0 0-1.294-.488Z"></path></g></svg> <span class="sr-only">Storyblok</span> <span class="lg:row-start-3 font-light text-astro-gray-300">Official CMS Partner</span> </a> </div> <div class="grid grid-cols-2 lg:flex lg:flex-wrap divide-y divide-astro-dark-100/20"> <a href="https://www.jetbrains.com/" rel="sponsored" target="_blank" class="h-32 lg:h-44 grow shrink basis-1/2 p-4 lg:basis-1/4 flex flex-col items-center justify-center gap-2 sm:gap-4 first:border-t first:border-astro-dark-100/20 odd:border-r odd:border-astro-dark-100/20 lg:[&:nth-child(2)]:border-r lg:[&:nth-child(6)]:border-r lg:[&:nth-child]:border-astro-dark-100/20 hover:bg-astro-gray-100/5 transition-colors duration-400 last:odd:col-span-2 last:odd:border-r-0 -outline-offset-2"> <svg viewBox="0 0 230 50" height="32" alt="" astro-icon="sponsors/jetbrains"><path fill="#fff" d="M67.18 31.57c0 .65-.13 1.22-.4 1.73-.28.5-.66.89-1.17 1.16a3.5 3.5 0 0 1-1.71.41h-3.21v4.68h3.89a7.9 7.9 0 0 0 3.94-.99 7.17 7.17 0 0 0 2.74-2.7c.66-1.16 1-2.46 1-3.9V16.58h-5.08v14.98Zm13.67-1.4H91.5V25.9H80.85V21h11.76v-4.4H75.9v22.95h17.03v-4.42H80.85v-4.94Zm13.68-9.03h6.8v18.4h5.08v-18.4h6.77V16.6H94.52v4.56h.01Zm36 6.9a6 6 0 0 0-1.28-.5 4.86 4.86 0 0 0 3.67-4.91 5.4 5.4 0 0 0-.95-3.13 6.33 6.33 0 0 0-2.67-2.15 9.53 9.53 0 0 0-3.92-.77h-10.2v22.95h10.4a10 10 0 0 0 4.12-.81 6.62 6.62 0 0 0 2.81-2.26c.67-.96 1-2.06 1-3.3 0-1.13-.25-2.14-.78-3.04a5.4 5.4 0 0 0-2.19-2.1v.02Zm-10.41-7.6h4.5c.63 0 1.18.12 1.66.34a2.56 2.56 0 0 1 1.52 2.41 2.64 2.64 0 0 1-1.52 2.52 3.7 3.7 0 0 1-1.66.35h-4.5v-5.63.01Zm7.76 13.89c-.29.43-.7.77-1.23 1-.53.24-1.13.35-1.83.35h-4.7V29.8h4.7c.68 0 1.28.13 1.82.38.52.25.94.6 1.23 1.06.3.46.44.97.44 1.56 0 .59-.14 1.1-.43 1.53Zm22.66-4.07a6.99 6.99 0 0 0 2.96-2.57 7.02 7.02 0 0 0 1.05-3.86c0-1.46-.34-2.7-1.03-3.8a6.82 6.82 0 0 0-2.92-2.54c-1.26-.6-2.72-.9-4.38-.9h-10.04v22.95h5.08v-8.36h3.3l4.67 8.36h5.8l-5.25-8.97.77-.3h-.01Zm-1.65-4.69c-.28.48-.68.86-1.21 1.1a4 4 0 0 1-1.85.4h-4.58v-6.35h4.58c.7 0 1.32.13 1.85.38s.93.62 1.21 1.1c.28.47.43 1.03.43 1.67 0 .64-.15 1.2-.43 1.69v.01Zm15.77-8.98-8.2 22.95h5.16l1.63-5.06h8.5l1.75 5.06h5.06l-8.4-22.95h-5.5Zm-.26 14.05 2.64-8.1.31-1.47.31 1.47 2.82 8.1h-6.08Zm15.84 8.9h5.25V16.6h-5.25v22.95ZM204 32.11l-9.87-15.52h-4.95v22.95h4.64V24.02l9.82 15.52h5V16.6H204v15.52Zm24.14-2.56a6.85 6.85 0 0 0-2.09-2.4 7.58 7.58 0 0 0-3.08-1.3l-3.9-.8c-.61-.15-1.1-.4-1.46-.77a1.88 1.88 0 0 1-.54-1.36c0-.5.13-.92.4-1.29.26-.36.63-.65 1.1-.85a4.1 4.1 0 0 1 1.65-.3c.63 0 1.19.1 1.67.31.48.22.85.51 1.12.9.27.4.4.83.4 1.32h5.09a6.38 6.38 0 0 0-1.1-3.54 7.03 7.03 0 0 0-2.94-2.4 10.1 10.1 0 0 0-4.29-.87c-1.6 0-3.02.3-4.26.9a7.04 7.04 0 0 0-2.91 2.5 6.54 6.54 0 0 0-1.05 3.64c0 1.1.23 2.1.68 2.99a5.9 5.9 0 0 0 1.9 2.22c.82.58 1.76 1 2.85 1.23l4.13.85a3.1 3.1 0 0 1 1.6.88c.4.43.6.96.6 1.6 0 .5-.15.97-.44 1.38-.3.4-.7.71-1.21.93a4.5 4.5 0 0 1-1.83.33c-.7 0-1.37-.12-1.94-.36a2.97 2.97 0 0 1-1.33-1.06 2.63 2.63 0 0 1-.47-1.56h-5.08a6.7 6.7 0 0 0 1.15 3.8 7.48 7.48 0 0 0 3.1 2.54c1.3.61 2.8.92 4.5.92 1.7 0 3.22-.31 4.53-.94a7.46 7.46 0 0 0 3.08-2.58 6.51 6.51 0 0 0 1.1-3.73c0-1.14-.25-2.18-.74-3.14h.01Z"></path><path fill="url(#astroicon:sponsors/jetbrainsa)" d="M16.54 3.3 3.77 16.07a9.57 9.57 0 0 0-2.8 6.77v22.83A3.83 3.83 0 0 0 4.8 49.5h22.83a9.59 9.59 0 0 0 6.77-2.8l12.77-12.77a9.57 9.57 0 0 0 2.8-6.77V4.33A3.83 3.83 0 0 0 46.14.5H23.31a9.59 9.59 0 0 0-6.77 2.8Z"></path><path d="M37.72 12.75H7.09v30.63h30.63V12.75Z"></path><path fill="#fff" d="M23.94 36.48H10.92v3.07h13.02v-3.07Z"></path><defs><linearGradient id="astroicon:sponsors/jetbrainsa" x1="1.62" x2="48.91" y1="48.52" y2="1.89" gradientUnits="userSpaceOnUse"><stop stop-color="#FF9419"></stop><stop offset=".43" stop-color="#FF021D"></stop><stop offset=".99" stop-color="#E600FF"></stop></linearGradient></defs></svg> <span class="sr-only">JetBrains</span> </a><a href="https://buttercms.com/?utm_source=astro.build&utm_medium=banner&utm_campaign=sponsorship" rel="sponsored" target="_blank" class="h-32 lg:h-44 grow shrink basis-1/2 p-4 lg:basis-1/4 flex flex-col items-center justify-center gap-2 sm:gap-4 first:border-t first:border-astro-dark-100/20 odd:border-r odd:border-astro-dark-100/20 lg:[&:nth-child(2)]:border-r lg:[&:nth-child(6)]:border-r lg:[&:nth-child]:border-astro-dark-100/20 hover:bg-astro-gray-100/5 transition-colors duration-400 last:odd:col-span-2 last:odd:border-r-0 -outline-offset-2"> <svg xml:space="preserve" viewBox="0 0 401.4 56.4" height="22" alt="" astro-icon="sponsors/buttercms"><path fill="currentColor" d="M24.6 22c.4 0 .7-.1 1-.2l10-5.4c1-.5 1.3-1.8.8-2.8s-1.8-1.3-2.8-.8l-9.9 5.4c-1 .3-1.5 1.3-1.3 2.3.3 1 1.3 1.7 2.2 1.5.1 0 0 0 0 0zm15.2 7.9c.3 0 .7-.1 1-.3L56.7 21c.6-.3 1-1 1-1.7 0-.8-.3-1.5-.9-1.8-.7-.4-1.4-.4-2.1-.1L38.8 26c-.9.4-1.5 1.4-1.2 2.4.2 1 1.2 1.6 2.2 1.5zM81 18.6c-.4-1.2-1.3-2.2-2.4-2.7L61.4 6.8c-2.8-1.4-6.1-1.4-9 0l-1.4.6L39.1 1c-2.8-1.4-6.1-1.4-9 0L2.5 15.9c-1.4.6-2.3 1.9-2.5 3.4v15.2c0 .8.4 1.5 1.1 1.8l35 19c2.8 1.4 6.2 1.4 9 0L80 36.1c.7-.3 1.1-1 1.1-1.8v-15c0-.2-.1-.5-.1-.7zm-76.5.9L32 4.7c1.6-.7 3.5-.7 5.2 0L51 12.1l3.3-1.8c1.7-.7 3.6-.7 5.2 0l17.1 9.2.2.1-.2.1-33.4 18c-1.7.8-3.6.8-5.2 0L4.5 19.5h-.2.2zm38.6 32.3c-1.6.7-3.5.7-5.1 0L4.1 33.3v-9.2L36 41.3c2.8 1.4 6.2 1.4 9 0l32-17.2v9L43.1 51.8zm72.6-42.5h18.2c8.7 0 13.1 3.1 13.1 9.1 0 1.9-.5 3.7-1.6 5.2s-2.6 2.6-4.3 3.2c2.2.4 4.2 1.5 5.7 3.1s2.2 3.6 2.2 5.7c0 3.8-1.4 6.7-4.1 8.7-2.7 2-6.6 3-11.8 3h-17.5v-5.4l1.8-.2c.4 0 .8-.2 1.1-.5.2-.4.3-.9.3-1.3V15.2l-3.1-.3V9.3zm13.1 6.4v9h2.7c3.5 0 5.3-1.6 5.3-4.8 0-2.8-1.7-4.2-5.1-4.2 0-.1-2.9-.1-2.9 0zm0 15.1v9.9h3.7c3.8 0 5.8-1.8 5.8-5.2 0-3.1-1.9-4.7-5.7-4.7 0-.1-3.8-.1-3.8 0zM180.7 18v22c0 .5 0 .9.3 1.3.2.3.6.4 1 .5l1.5.1v5.2h-11.7v-3.6h-.2c-1.7 3-4.5 4.4-8.5 4.4-3.1 0-5.3-.8-6.8-2.3-1.4-1.6-2.1-4-2.1-7.3v-13c0-.4-.1-.8-.4-1.1-.2-.3-.6-.5-1-.5l-1.6-.2V18H164v18.4c-.1 1.1.1 2.2.6 3.1.6.8 1.6 1.1 2.5 1 1.1.1 2.2-.4 2.9-1.2.7-1 1.1-2.2 1-3.4V25.3c0-.5-.1-.9-.3-1.3-.3-.3-.7-.4-1.1-.4l-1.3-.2V18h12.4zm18.2-6.6V18h8.1c2.5-1.1 4.3-3.4 5.5-6.7h5.3V18h6.9l-.5 6.3h-6.4v12.3c-.1 1.1.2 2.2.7 3.2.4.5 1.3.8 2.7.8 1.2 0 2.5-.3 3.6-.8l1.4 6.3c-2.5 1.3-5.2 1.9-7.9 1.8-1.3 0-2.5-.1-3.8-.3-.9-.2-1.8-.4-2.7-.8-.7-.3-1.3-.8-1.8-1.4-.4-.5-.8-1-1.1-1.6s-.5-1.3-.6-2c-.1-.6-.2-1.3-.3-2V24.3h-9v12.3c-.1 1 .1 2.1.6 3.1.5.7 1.4 1.1 2.3 1 1.1 0 2.2-.3 3.2-.8l1.7 6.2c-2.3 1.2-4.9 1.9-7.5 1.8-3.7 0-6.4-.9-7.9-2.6-1.5-1.7-2.3-4.2-2.3-7.6V24.3h-3.9l.8-5.5c3.6-.8 6.2-3.3 7.6-7.4h5.3zm43.8 5.9c2.7-.1 5.3.6 7.5 2.2 2 1.6 3 4.1 2.8 6.6 0 6.9-5.3 10.2-16 10 .1 1.3.7 2.6 1.7 3.5 1.2 1 2.7 1.4 4.2 1.4 2.6-.1 5.2-.9 7.4-2.3l2.6 6.3c-.5.4-1 .7-1.6.9-1.3.6-2.6 1-4 1.4-1.9.5-3.8.7-5.7.7-4.9 0-8.5-1.3-10.8-4-2.3-2.6-3.5-6.2-3.5-10.7-.1-4.1 1.3-8.2 4-11.4 2.7-3 6.5-4.6 11.4-4.6zm2 9.2c0-.7-.2-1.4-.7-1.9s-1.2-.7-1.9-.6c-1.4 0-2.8.6-3.6 1.8-1 1.3-1.6 2.9-1.6 4.6 5.2.2 7.7-1.2 7.7-3.9h.1zm27.8-2c-1.1 0-2.1.5-2.7 1.3-.7.9-1.1 2.1-1 3.3v12.5l5.1.3v5.3h-18.1V42l1.9-.2c.4.1.8-.1 1.1-.4.2-.4.3-.9.3-1.4V25.3c0-.4-.1-.8-.3-1.2-.3-.3-.6-.4-1-.4l-2-.2V18H268v4.4h.1c.7-1.4 1.7-2.7 3-3.6 1.6-1.1 3.5-1.7 5.4-1.6 1.9-.1 3.7.2 5.4.9v11.3l-7.6.4v-3.9c0-.7-.2-1.1-.5-1.2-.4-.1-.9-.2-1.3-.2zm36.2-8c-1.2-.3-2.3-.4-3.4-.4-6.1 0-9.2 3.9-9.2 11.8 0 3.8.8 6.8 2.3 9s3.9 3.3 7.1 3.4c1.1 0 2.1-.1 3.2-.4.6-.2 1-.8 1-1.5v-3.7l7.3.4v10.5c-3.8 1.7-7.9 2.5-12.1 2.3-6.1 0-10.8-1.6-14.1-4.9-3.3-3.3-5-8.1-5-14.5 0-3.2.5-6.4 1.6-9.4.9-2.5 2.4-4.6 4.4-6.3 1.8-1.4 3.8-2.5 6-3.3 2.2-.7 4.6-1 6.9-1 4.2-.1 8.3.7 12.2 2.4v10l-7.4.4V18c0-.9-.3-1.4-.8-1.5zm14.9-7.2h14.6l7.5 24.8h.2l7.7-24.7h14.6v5.4l-1.8.2c-.5 0-.9.2-1.2.5-.3.4-.4.9-.3 1.3l1.9 24.8 2.9.1v5.6h-15.3v-5.5l1.8-.2c.4.1.8-.1 1-.4.2-.4.3-.9.2-1.3l-.9-16.1h-.1l-7.2 23.5h-7.1l-7-23.1h-.2l-1 17.3 2.8.2v5.6h-15.3v-5.5l1.8-.2c.5 0 .9-.2 1.2-.5.2-.4.4-.9.4-1.4l2-24.6-3.2-.2V9.3zm61.9 31.3c3.5 0 5.3-1.4 5.3-4.2 0-1.1-.5-2.2-1.4-2.8-1.4-.8-2.9-1.4-4.5-1.8-1.3-.3-2.7-.8-4-1.3-1.2-.5-2.3-1.2-3.4-1.9-1.2-.9-2.2-2-2.8-3.3-.6-1.5-1-3.2-1-4.8-.1-3.4 1.4-6.7 4-8.8 2.7-2.1 6.2-3.1 10.6-3.1 4-.2 8 .6 11.7 2.2v9.3l-7.4.5v-2.9c0-.8-.3-1.3-.8-1.4-1.1-.3-2.2-.4-3.3-.4-1.1 0-2.2.3-3.1.8-.8.6-1.3 1.6-1.2 2.6-.1 1.1.5 2.2 1.4 2.8 1.5.9 3.1 1.6 4.8 2 1.4.4 2.5.8 3.3 1.1.9.4 1.9.8 2.8 1.3 1 .5 1.9 1.2 2.6 2 .7.9 1.2 1.8 1.6 2.9.5 1.3.7 2.6.7 4 .2 3.6-1.3 7-4.1 9.3-2.7 2.2-6.4 3.3-11.2 3.3-4.3.1-8.6-.7-12.6-2.3V36l7.5-.5v3.2c0 .9.3 1.4.9 1.6 1.1.2 2.3.4 3.6.3z"></path></svg> <span class="sr-only">ButterCMS</span> </a><a href="https://arcjet.com/?ref=astro.build" rel="sponsored" target="_blank" class="h-32 lg:h-44 grow shrink basis-1/2 p-4 lg:basis-1/4 flex flex-col items-center justify-center gap-2 sm:gap-4 first:border-t first:border-astro-dark-100/20 odd:border-r odd:border-astro-dark-100/20 lg:[&:nth-child(2)]:border-r lg:[&:nth-child(6)]:border-r lg:[&:nth-child]:border-astro-dark-100/20 hover:bg-astro-gray-100/5 transition-colors duration-400 last:odd:col-span-2 last:odd:border-r-0 -outline-offset-2"> <svg fill="#fff" viewBox="0 0 1040 460" height="64" alt="" astro-icon="sponsors/arcjet"><path d="M730.36 287.81c-23.75 0-40.8-17.69-40.8-42.06 0-24.22 17.06-41.75 40.16-41.75 23.1 0 40.31 17.53 40.31 41.75 0 1.27-.16 3.18-.32 4.78H707.9c1.75 13.06 11 22.14 23.1 22.14 8.6 0 16.57-4.62 20.56-11.47l14.34 9.24c-7.17 10.36-21.03 17.37-35.53 17.37Zm-21.67-50.83h42.22c-2.87-10.67-11-17.84-21.2-17.84-10.19 0-18.16 7.17-21.02 17.84Zm-54.39 50.56V206.1h18.48v85.82c0 11.25-2.19 19.48-6.72 24.35-5.21 5.88-12.43 8.74-21.67 8.74l-5.04-16.63c5.54 0 9.4-1.51 11.59-4.54 2.18-3.19 3.36-8.56 3.36-16.29Zm20.81-111.86a11.6 11.6 0 1 1-23.22 0 11.6 11.6 0 0 1 23.22 0Zm117.1-.01h18.48v30.4h16.1v15.14h-16.1v64.53h-18.48V221.2H779.2v-15.14h13.01v-30.4ZM398.1 285.74l14.94-30.25h56.8l14.77 30.25h19.27L441.44 158 379 285.74h19.1Zm22.68-46.07 20.66-42.1 20.66 42.1h-41.32Zm215.82-6.39c-5.79-7.38-12.77-13.36-25.81-13.36-13.55 0-23.43 10.85-23.43 25.99 0 14.97 9.88 25.97 23.43 25.97 13.04 0 20.02-6.12 25.8-13.48v20.96c-6.94 5.32-15.8 8.45-25.8 8.45-24.06 0-41.43-17.69-41.43-41.9 0-24.38 17.37-41.9 41.43-41.9 9.97 0 18.87 3.03 25.8 8.32v20.95Zm-103.55 52.46h-18.43V206.1h18.43v7.63c3.55-3.98 6.5-6.3 8.91-7.44a22.2 22.2 0 0 1 9.67-2.2c3.69 0 9.91 1.5 15.11 4.7l-8.38 16.75c-3.52-2.51-6.87-3.68-10.22-3.68-10.06 0-15.09 7.54-15.09 22.62v41.25Zm-248.99-56.02c11.82 3.02 21.6 5.44 41.94 9.95a1167.78 1167.78 0 0 0-41.94 9.96 11.24 11.24 0 0 0-8.1 8.1c-3.03 11.82-5.45 21.6-9.96 41.94a1169.35 1169.35 0 0 0-9.95-41.94 11.24 11.24 0 0 0-8.11-8.1c-11.82-3.03-21.6-5.45-41.94-9.96 20.34-4.51 30.12-6.93 41.94-9.95a11.24 11.24 0 0 0 8.1-8.11c3.03-11.82 5.45-21.6 9.96-41.94 4.51 20.34 6.93 30.12 9.95 41.94a11.24 11.24 0 0 0 8.11 8.1Z"></path><path d="m174.65 236.37 3.35 3.3-3.35 3.3c-30.83-2.23-59.89-2.55-106.7-3.06L46 239.67l21.65-.24c46.99-.51 76.1-.83 107-3.06Zm629.8-152.12c78.17 0 150.86 66.1 150.86 145.75 0 79.64-72.67 145.74-150.83 145.75h-1.23c79.92-.68 144.5-65.67 144.5-145.75S883.17 84.93 803.25 84.26l1.2-.01Z"></path></svg> <span class="sr-only">ArcJet</span> </a><a href="https://handsontable.com/" rel="sponsored" target="_blank" class="h-32 lg:h-44 grow shrink basis-1/2 p-4 lg:basis-1/4 flex flex-col items-center justify-center gap-2 sm:gap-4 first:border-t first:border-astro-dark-100/20 odd:border-r odd:border-astro-dark-100/20 lg:[&:nth-child(2)]:border-r lg:[&:nth-child(6)]:border-r lg:[&:nth-child]:border-astro-dark-100/20 hover:bg-astro-gray-100/5 transition-colors duration-400 last:odd:col-span-2 last:odd:border-r-0 -outline-offset-2"> <svg fill="#fff" viewBox="0 0 232 36" height="23" alt="" astro-icon="sponsors/handsontable"><path d="M198.47.5h-5.71v24.19h5.71V.5ZM177.7 22.09v2.6h-5.75V.5h5.75v9.9a5.93 5.93 0 0 1 5.23-2.96c3.92 0 7.1 2.95 7.1 8.7v.26c0 5.79-3.18 8.68-7.13 8.68-2.5 0-4.37-1.2-5.2-3Zm6.49-5.69v-.25c0-2.96-1.29-4.37-3.31-4.37-2.1 0-3.34 1.5-3.34 4.33v.26c0 2.86 1.25 4.3 3.34 4.3 2.15 0 3.3-1.5 3.3-4.27Zm-121.46.07v-.26c0-5.72 3.14-8.77 7.13-8.77 2.63 0 4.2 1.12 5.17 2.83V.5h5.75v24.2h-5.75v-2.73a5.66 5.66 0 0 1-5.24 3.12c-3.88 0-7.06-2.8-7.06-8.61Zm12.46-.1v-.26c0-2.82-1.19-4.33-3.3-4.33-2.16 0-3.32 1.44-3.32 4.37v.25c0 2.83 1.25 4.27 3.25 4.27 2.08 0 3.37-1.44 3.37-4.3ZM.45 1.72h6.62v8.77h7.55V1.72h6.58V24.7h-6.58v-9.06H7.07v9.06H.45V1.72ZM24 20.03c0-3.95 3.35-5.5 8.93-5.5h1.61v-.38c0-1.6-.38-2.66-2.22-2.66-1.57 0-2.15.93-2.28 1.99h-5.4c.26-4.05 3.44-6.04 8.04-6.04 4.62 0 7.58 1.9 7.58 6.36v10.9h-5.59v-1.96c-.8 1.22-2.28 2.35-4.98 2.35-3.02 0-5.69-1.48-5.69-5.05Zm10.54-1.22v-1.03h-1.5c-2.32 0-3.35.45-3.35 1.83 0 .97.64 1.58 2 1.58 1.63 0 2.85-.93 2.85-2.38ZM49.27 7.9h-5.75v16.8h5.75v-9.41c0-2.16 1.16-3.18 2.86-3.18 1.67 0 2.41.93 2.41 2.82v9.77h5.75V13.77c0-4.3-2.25-6.33-5.5-6.33a5.92 5.92 0 0 0-5.52 3.15v-2.7Zm39.09 11.47h-5.3c.12 3.72 2.92 5.71 7.7 5.71 4.66 0 7.62-1.8 7.62-5.78 0-3.6-2.25-4.82-6.9-5.4-2.06-.25-2.83-.57-2.83-1.38 0-.77.64-1.31 1.9-1.31 1.3 0 1.92.54 2.14 1.67h5.2c-.38-4.02-3.27-5.43-7.41-5.43-3.89 0-7.2 1.8-7.2 5.52 0 3.5 1.9 4.82 6.4 5.4 2.3.32 3.1.7 3.1 1.51 0 .84-.63 1.38-2.05 1.38-1.63 0-2.18-.67-2.37-1.9Zm11.62-2.86v-.26c0-5.4 4.02-8.8 9.22-8.8 5.17 0 9.16 3.3 9.16 8.64v.26c0 5.46-4.02 8.74-9.2 8.74-5.16 0-9.18-3.15-9.18-8.58Zm12.53-.1v-.25c0-2.83-1.13-4.4-3.3-4.4-2.16 0-3.35 1.5-3.35 4.33v.26c0 2.89 1.13 4.46 3.34 4.46 2.15 0 3.31-1.6 3.31-4.4Zm14.1-8.51h-5.75v16.8h5.75v-9.41c0-2.16 1.15-3.18 2.86-3.18 1.67 0 2.4.93 2.4 2.82v9.77h5.76V13.77c0-4.3-2.25-6.33-5.5-6.33-2.8 0-4.62 1.41-5.52 3.15v-2.7Zm15.06 11.4v-7.48h-2.03V7.89h2.03v-3.5h5.75v3.5h3.3v3.92h-3.3v6.94c0 1.22.6 1.76 1.7 1.76.56.01 1.12-.09 1.64-.29v4.37c-1.03.3-2.1.47-3.18.48-3.8 0-5.91-1.83-5.91-5.78Zm19.69-4.75c-5.6 0-8.93 1.54-8.93 5.5 0 3.56 2.66 5.04 5.68 5.04 2.7 0 4.18-1.13 4.98-2.35v1.96h5.6V13.8c0-4.46-2.96-6.36-7.59-6.36-4.6 0-7.77 2-8.03 6.04h5.4c.12-1.06.7-2 2.28-2 1.83 0 2.21 1.07 2.21 2.67v.39h-1.6Zm1.6 3.24v1.03c0 1.45-1.22 2.38-2.86 2.38-1.35 0-1.99-.61-1.99-1.58 0-1.38 1.03-1.83 3.34-1.83h1.51Zm38.19-1.28v-.26c0-5.4 4.01-8.8 9.09-8.8 4.59 0 8.54 2.63 8.54 8.67v1.51h-11.82c.16 2.22 1.44 3.5 3.5 3.5 1.9 0 2.7-.86 2.92-1.99h5.4c-.51 3.8-3.44 5.95-8.51 5.95-5.27 0-9.12-3.09-9.12-8.58Zm12.04-2.12c-.1-2.03-1.09-3.15-2.95-3.15-1.74 0-2.93 1.12-3.22 3.15h6.17Zm17.84 11.43h-9.7v9.7h9.7v-9.7Z"></path></svg> <span class="sr-only">HandsOnTable</span> </a><a href="https://route4me.com/" rel="sponsored" target="_blank" class="h-32 lg:h-44 grow shrink basis-1/2 p-4 lg:basis-1/4 flex flex-col items-center justify-center gap-2 sm:gap-4 first:border-t first:border-astro-dark-100/20 odd:border-r odd:border-astro-dark-100/20 lg:[&:nth-child(2)]:border-r lg:[&:nth-child(6)]:border-r lg:[&:nth-child]:border-astro-dark-100/20 hover:bg-astro-gray-100/5 transition-colors duration-400 last:odd:col-span-2 last:odd:border-r-0 -outline-offset-2"> <svg viewBox="0 0 150 36" height="32" alt="" astro-icon="sponsors/route4me"><path fill="#fff" fill-rule="evenodd" d="M38.93 13.49h3.23c.4 0 .73-.08 1.05-.24.33-.16.57-.33.73-.57a2 2 0 0 0 .32-1.05c0-.4-.08-.8-.24-1.05-.16-.24-.4-.48-.64-.56a1.63 1.63 0 0 0-.9-.25c-.32-.08-.72-.08-1.04-.08H39v3.8h-.08Zm-3.71-7.03h6.54c.89 0 1.7.08 2.42.24.81.17 1.46.49 2.02.81.57.4 1.05.9 1.38 1.62.32.64.48 1.53.48 2.5a4.8 4.8 0 0 1-.97 3.07 4.5 4.5 0 0 1-2.74 1.62l4.28 7.19h-4.45l-3.55-6.79h-1.86v6.79h-3.71V6.46h.16ZM53.4 17.6c0 .9.23 1.62.72 2.19.48.57 1.21.8 2.1.8.89 0 1.62-.23 2.1-.8.48-.57.73-1.3.73-2.18 0-.89-.25-1.62-.73-2.18-.48-.57-1.21-.81-2.1-.81-.89 0-1.62.24-2.1.8-.49.65-.73 1.3-.73 2.19Zm-3.56 0c0-.96.16-1.77.48-2.5.33-.72.81-1.37 1.38-1.93a6.52 6.52 0 0 1 4.52-1.62c.89 0 1.7.16 2.5.4.81.33 1.46.73 2.02 1.22a6.51 6.51 0 0 1 1.38 1.94c.32.72.48 1.61.48 2.5 0 .97-.16 1.78-.48 2.5a6.48 6.48 0 0 1-1.38 1.94 6.52 6.52 0 0 1-4.52 1.62c-.89 0-1.7-.16-2.5-.4a7.06 7.06 0 0 1-2.02-1.22 6.51 6.51 0 0 1-1.38-1.94 6.02 6.02 0 0 1-.48-2.5Zm26.09 5.9h-3.47v-1.6h-.09c-.16.24-.32.48-.48.65-.16.24-.4.4-.73.64-.32.16-.64.33-.97.4-.4.09-.72.17-1.2.17a5.6 5.6 0 0 1-2.19-.4 2.94 2.94 0 0 1-1.3-1.14 5.1 5.1 0 0 1-.64-1.77c-.08-.65-.16-1.38-.16-2.18V11.8h3.56v6.79c0 .32.08.73.24.97.16.24.32.56.56.72.25.17.57.33 1.05.33.49 0 .81-.08 1.13-.24.33-.17.49-.4.65-.65.16-.24.24-.57.32-.97.08-.32.08-.73.08-1.13V11.8h3.64v11.72Zm10.42-8.8H83.2v3.88c0 .32 0 .64.08.89 0 .24.08.48.24.64.08.16.24.33.49.49.24.08.56.16.88.16.17 0 .4 0 .73-.08.32 0 .57-.16.73-.24v2.98c-.4.17-.8.25-1.21.33-.4.08-.9.08-1.3.08-.56 0-1.13-.08-1.7-.16a4.28 4.28 0 0 1-1.36-.65c-.4-.24-.65-.65-.9-1.13a3.4 3.4 0 0 1-.32-1.62V14.7H77.3v-2.9h2.26V8.31h3.56v3.47h3.15v2.91h.08Zm9.77 1.62c0-.65-.16-1.13-.56-1.54-.4-.4-.97-.64-1.62-.64-.4 0-.73.08-1.05.16-.32.16-.56.32-.8.48-.25.24-.41.4-.5.73-.07.24-.15.56-.23.8h4.76Zm3.07 5.17a5.7 5.7 0 0 1-2.18 1.7c-.89.4-1.78.56-2.75.56a8.6 8.6 0 0 1-2.5-.4 7.06 7.06 0 0 1-2.02-1.22 6.52 6.52 0 0 1-1.37-1.94 6.3 6.3 0 0 1-.49-2.5 6.03 6.03 0 0 1 1.86-4.44 6.52 6.52 0 0 1 4.52-1.62c.81 0 1.62.16 2.27.4.64.33 1.2.73 1.7 1.22.48.56.8 1.2 1.04 1.94.25.72.4 1.61.4 2.5v1.13h-8.31c.16.73.48 1.21.97 1.62a2.79 2.79 0 0 0 3.23.24c.4-.24.72-.65 1.05-1.05l2.58 1.86Z" clip-rule="evenodd"></path><path fill="#FFC63C" fill-rule="evenodd" d="m108.56 11.15-3.8 5.9h3.8v-5.9Zm0 8.96h-7.35v-3.07l6.87-10.58h3.88v10.58h2.18v3.07h-2.19v3.4h-3.47v-3.4h.08Z" clip-rule="evenodd"></path><path fill="#fff" fill-rule="evenodd" d="M116.48 6.46h5.57l3.96 11.15 3.96-11.15h5.57v17.05h-3.71V10.42h-.09l-4.44 13.09h-2.83l-4.28-13.09v13.09h-3.71V6.46Zm29.97 9.86c0-.65-.17-1.13-.57-1.54-.4-.4-.97-.64-1.62-.64-.4 0-.72.08-1.04.16-.33.16-.57.32-.81.48-.25.24-.4.4-.49.73l-.24.8h4.77Zm3.06 5.17a5.78 5.78 0 0 1-2.18 1.7c-.88.4-1.77.56-2.74.56-.89 0-1.7-.16-2.5-.4a7.05 7.05 0 0 1-2.03-1.22 6.53 6.53 0 0 1-1.37-1.94 6.3 6.3 0 0 1-.48-2.5c0-.97.16-1.78.48-2.5.32-.73.8-1.38 1.38-1.94a6.53 6.53 0 0 1 4.52-1.62c.8 0 1.61.16 2.26.4.65.33 1.21.73 1.7 1.22.48.56.8 1.2 1.05 1.94.24.72.4 1.61.4 2.5v1.13h-8.32c.16.73.48 1.21.97 1.62a2.79 2.79 0 0 0 3.23.24c.4-.24.73-.65 1.05-1.05l2.58 1.86Z" clip-rule="evenodd"></path><path fill="#FF6400" fill-rule="evenodd" d="M28.2 1.53a1.53 1.53 0 1 1 1.53 1.54c-.81.08-1.54-.65-1.54-1.54ZM0 1.53C0 .73.73 0 1.53 0c.9 0 1.62.73 1.62 1.53 0 .9-.73 1.62-1.62 1.62C.73 3.15 0 2.42 0 1.53Zm22.3 32.15a1.53 1.53 0 1 1 3.06 0 1.53 1.53 0 0 1-3.07 0Z" clip-rule="evenodd"></path><path fill="#FFC63C" fill-rule="evenodd" d="M20.03 6.62c.24.25.24.57 0 .73l-2.66 2.67c-.25.24-.16.4.16.56a5.33 5.33 0 0 1 3.23 3.23c.08.24.32.33.56.16L24 11.31c.24-.24.57-.24.73 0l2.34 2.34c.24.24.4.16.4-.16V4.2c0-.16-.08-.24-.24-.24h-9.37c-.32 0-.32.16-.16.4l2.34 2.26Zm-6.3 3.88c.24-.08.32-.32.16-.56l-2.66-2.67c-.24-.24-.24-.57 0-.73l2.34-2.34c.24-.24.16-.4-.16-.4H4.2c-.16.16-.32.24-.32.4v9.29c0 .32.16.32.4.16l2.34-2.34c.25-.24.57-.24.73 0l2.67 2.66c.24.25.4.17.56-.16a5.34 5.34 0 0 1 3.15-3.3Zm2.18 10.66c-.32 0-.4.25-.32.49l1.53 3.39c.09.24 0 .57-.24.73l-2.99 1.37c-.24.16-.24.32 0 .4l8.73 3.15c.16.09.32 0 .32-.16l3.23-8.72c.08-.24 0-.4-.32-.24l-3 1.37c-.23.16-.56 0-.72-.24l-1.7-3.64c-.07-.24-.32-.24-.48-.08a5.47 5.47 0 0 1-1.94 1.62c-.48.24-1.13.4-1.7.48 0 0-.24.08-.4.08Z" clip-rule="evenodd"></path><path fill="#FF6400" fill-rule="evenodd" d="M11.71 15.67a3.88 3.88 0 0 1 7.76 0 3.95 3.95 0 0 1-3.88 3.96 4 4 0 0 1-3.88-3.96Z" clip-rule="evenodd"></path></svg> <span class="sr-only">Route4Me, Route Planner and Route Optimizer</span> </a> </div> </div> </section> <div class="h-20 sm:h-36"></div> </main> <footer class="w-full border-t border-astro-dark-100/20 bg-astro-dark-900"> <div class="w-full max-w-screen-2xl mx-auto px-4 sm:px-8"> <nav aria-label="Secondary" class="flex flex-col lg:flex-row links-start justify-between gap-12 py-8 md:py-12"> <div class=" flex flex-col md:max-lg:w-1/2 lg:max-w-sm"> <p class="font-semibold md:text-xl">Let's keep in touch</p> <p class="mb-4 pt-2 text-astro-gray-200 lg:text-balance">
Enter your email to stay up to date with the latest updates from Astro.
</p> <form action="https://buttondown.email/api/emails/embed-subscribe/withastro" method="post" target="popupwindow" onsubmit="window.open('https://buttondown.email/withastro', 'popupwindow')" class="flex flex-col justify-between"> <input class="mb-2 h-10 rounded-lg border border-astro-gray-600 bg-astro-dark-900 px-3 py-1 text-astro-gray-100 focus:outline-none focus:ring-[1px] focus:ring-astro-gray-400" type="email" placeholder="[email protected]" name="email" id="bd-email" required=""> <input type="submit" value="Subscribe to our newsletter" class="!h-10 border border-astro-dark-100/10 font-sm font-light bg-astro-gray-600/50 hover:bg-astro-gray-600/30 hover:cursor-pointer rounded-full"> </form> </div> <div class="grid grid-cols-2 gap-12 sm:flex sm:flex-wrap sm:gap-16 lg:gap-20"> <section class="group flex flex-col"> <h2 id="footerHeading0" class="mb-4 label-base leading-none text-white"> Resources </h2> <ul aria-labelledby="footerHeading0" class="flex flex-col gap-2"> <li> <a href="https://docs.astro.build/en/getting-started/" class="whitespace-nowrap link"> Docs </a> </li><li> <a href="/themes/" class="whitespace-nowrap link"> Themes </a> </li><li> <a href="/showcase/" class="whitespace-nowrap link"> Showcase </a> </li><li> <a href="/integrations/" class="whitespace-nowrap link"> Integrations </a> </li><li> <a href="https://astro.new/" class="whitespace-nowrap link"> Starter templates </a> </li> </ul> </section><section class="group flex flex-col"> <h2 id="footerHeading1" class="mb-4 label-base leading-none text-white"> Ecosystem </h2> <ul aria-labelledby="footerHeading1" class="flex flex-col gap-2"> <li> <a href="https://studio.astro.build/" class="whitespace-nowrap link"> Studio </a> </li><li> <a href="https://community.astro.build" class="whitespace-nowrap link"> Community </a> </li><li> <a href="https://github.com/withastro/astro/blob/main/CONTRIBUTING.md" class="whitespace-nowrap link"> Contributing </a> </li> </ul> </section><section class="group flex flex-col"> <h2 id="footerHeading2" class="mb-4 label-base leading-none text-white"> About </h2> <ul aria-labelledby="footerHeading2" class="flex flex-col gap-2"> <li> <a href="/press/" class="whitespace-nowrap link"> Press </a> </li><li> <a href="/telemetry/" class="whitespace-nowrap link"> Telemetry </a> </li><li> <a href="/partnerships/" class="whitespace-nowrap link"> Partner with us </a> </li> </ul> </section><section class="group flex flex-col"> <h2 id="footerHeading3" class="mb-4 label-base leading-none text-white"> More </h2> <ul aria-labelledby="footerHeading3" class="flex flex-col gap-2"> <li> <a href="/blog/" class="whitespace-nowrap link"> Blog </a> </li><li> <a href="/wallpapers/" class="whitespace-nowrap link"> Wallpapers </a> </li><li> <a href="https://shop.astro.build" class="whitespace-nowrap link"> Swag Shop </a> </li> </ul> </section><section class="group flex flex-col"> <h2 id="footerHeading4" class="mb-4 label-base leading-none text-white"> Legal </h2> <ul aria-labelledby="footerHeading4" class="flex flex-col gap-2"> <li> <a href="/privacy/" class="whitespace-nowrap link"> Privacy Policy </a> </li><li> <a href="/terms/" class="whitespace-nowrap link"> Terms of Service </a> </li> </ul> </section> </div> </nav> <hr class="border-astro-gray-500"> <nav aria-label="Legal" class="py-8 flex flex-col-reverse sm:flex-row items-center justify-between gap-4"> <div class="flex items-center gap-4"> <a target="_blank" class="link" href="https://github.com/withastro/astro/blob/main/LICENSE">
MIT License © 2024
</a> <a class="link" target="_blank" href="https://github.com/withastro/astro/graphs/contributors">
Astro Contributors
</a> </div> <div class="flex items-center gap-4"> <a target="_blank" rel="noopener noreferer" class="link flex items-center gap-2 text-white" href="/chat"> <span class="sr-only">Join the Astro community on Discord</span> <svg viewBox="0 0 16 16" aria-hidden="true" width="24" height="24" astro-icon="social/discord"><path fill="currentColor" d="M13.545 2.907a13.227 13.227 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.19 12.19 0 0 0-3.658 0 8.258 8.258 0 0 0-.412-.833.051.051 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.041.041 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032c.001.014.01.028.021.037a13.276 13.276 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019c.308-.42.582-.863.818-1.329a.05.05 0 0 0-.01-.059.051.051 0 0 0-.018-.011 8.875 8.875 0 0 1-1.248-.595.05.05 0 0 1-.02-.066.051.051 0 0 1 .015-.019c.084-.063.168-.129.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.052.052 0 0 1 .053.007c.08.066.164.132.248.195a.051.051 0 0 1-.004.085 8.254 8.254 0 0 1-1.249.594.05.05 0 0 0-.03.03.052.052 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.235 13.235 0 0 0 4.001-2.02.049.049 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.034.034 0 0 0-.02-.019Zm-8.198 7.307c-.789 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612Zm5.316 0c-.788 0-1.438-.724-1.438-1.612 0-.889.637-1.613 1.438-1.613.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612Z"></path></svg> </a><a target="_blank" rel="noopener noreferer" class="link flex items-center gap-2 text-white" href="https://x.com/astrodotbuild"> <span class="sr-only">Follow Astro on x.com (formerly Twitter)</span> <svg viewBox="0 0 24 24" aria-hidden="true" width="24" height="24" astro-icon="social/twitter"><path fill="currentColor" d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></svg> </a><a target="_blank" rel="noopener noreferer" class="link flex items-center gap-2 text-white" href="https://github.com/withastro/astro"> <span class="sr-only">Go to Astro's GitHub repo</span> <svg viewBox="0 0 16 16" aria-hidden="true" width="24" height="24" astro-icon="social/github"><path fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.012 8.012 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg> </a><a target="_blank" rel="noopener noreferer" class="link flex items-center gap-2 text-white" href="https://m.webtoo.ls/@astro"> <span class="sr-only">Follow Astro on Mastodon</span> <svg viewBox="0 0 16 16" aria-hidden="true" width="24" height="24" astro-icon="social/mastodon"><path fill="currentColor" d="M11.19 12.195c2.016-.24 3.77-1.475 3.99-2.603.348-1.778.32-4.339.32-4.339 0-3.47-2.286-4.488-2.286-4.488C12.062.238 10.083.017 8.027 0h-.05C5.92.017 3.942.238 2.79.765c0 0-2.285 1.017-2.285 4.488l-.002.662c-.004.64-.007 1.35.011 2.091.083 3.394.626 6.74 3.78 7.57 1.454.383 2.703.463 3.709.408 1.823-.1 2.847-.647 2.847-.647l-.06-1.317s-1.303.41-2.767.36c-1.45-.05-2.98-.156-3.215-1.928a3.614 3.614 0 0 1-.033-.496s1.424.346 3.228.428c1.103.05 2.137-.064 3.188-.189zm1.613-2.47H11.13v-4.08c0-.859-.364-1.295-1.091-1.295-.804 0-1.207.517-1.207 1.541v2.233H7.168V5.89c0-1.024-.403-1.541-1.207-1.541-.727 0-1.091.436-1.091 1.296v4.079H3.197V5.522c0-.859.22-1.541.66-2.046.456-.505 1.052-.764 1.793-.764.856 0 1.504.328 1.933.983L8 4.39l.417-.695c.429-.655 1.077-.983 1.934-.983.74 0 1.336.259 1.791.764.442.505.661 1.187.661 2.046v4.203z"></path></svg> </a><a target="_blank" rel="noopener noreferer" class="link flex items-center gap-2 text-white" href="https://www.reddit.com/r/withastro/"> <span class="sr-only">Join the official Astro community on Reddit</span> <svg fill="currentColor" viewBox="0 0 256 256" aria-hidden="true" width="24" height="24" astro-icon="social/reddit"><path d="M248 104a32 32 0 0 0-52.94-24.19c-16.75-8.9-36.76-14.28-57.66-15.53l5.19-31.17 17.72 2.72a24 24 0 1 0 2.87-15.74l-26-4a8 8 0 0 0-9.11 6.59l-6.87 41.48c-21.84.94-42.82 6.38-60.26 15.65a32 32 0 0 0-42.59 47.74A59 59 0 0 0 16 144c0 21.93 12 42.35 33.91 57.49C70.88 216 98.61 224 128 224s57.12-8 78.09-22.51C228 186.35 240 165.93 240 144a59 59 0 0 0-2.35-16.45A32.16 32.16 0 0 0 248 104M72 128a16 16 0 1 1 16 16 16 16 0 0 1-16-16m91.75 55.07a76.18 76.18 0 0 1-71.5 0 8 8 0 1 1 7.5-14.14 60.18 60.18 0 0 0 56.5 0 8 8 0 1 1 7.5 14.14M168 144a16 16 0 1 1 16-16 16 16 0 0 1-16 16"></path></svg> </a> </div> </nav> </div> </footer> <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" aria-hidden="true" astro-icon-spritesheet=""> </svg></body></html>