1<!doctype html> 2<html lang="en"> 3 <head> 4 <meta charset="utf-8" /> 5<!-- This site is hosted on Netlify. Anyone can build and deploy a site 6 like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=6d49fad2-010d-4bc1-a65d-167b0faf188e 7 Netlify hosting facts for this site: static/SSR served via Netlify Edge. --> 8 <link rel="icon" href="./favicon.ico" /> 9 <meta name="viewport" content="width=device-width, initial-scale=1" /> 10 <link href="./_app/immutable/entry/start.Bhzkf1w_.js" rel="modulepreload"> 11 <link href="./_app/immutable/chunks/ViDYVyGk.js" rel="modulepreload"> 12 <link href="./_app/immutable/chunks/B232ALK4.js" rel="modulepreload"> 13 <link href="./_app/immutable/entry/app.DXsuJ8Ij.js" rel="modulepreload"> 14 <link href="./_app/immutable/chunks/Dp1pzeXC.js" rel="modulepreload"> 15 <link href="./_app/immutable/chunks/BXhwi9sJ.js" rel="modulepreload"> 16 <link href="./_app/immutable/chunks/BXaGBBoa.js" rel="modulepreload"> 17 <link href="./_app/immutable/nodes/0.BWHbsSJp.js" rel="modulepreload"> 18 <link href="./_app/immutable/chunks/BpIDZO9t.js" rel="modulepreload"> 19 <link href="./_app/immutable/chunks/PGtNHcse.js" rel="modulepreload"> 20 <link href="./_app/immutable/chunks/DxAsu0tI.js" rel="modulepreload"> 21 <link href="./_app/immutable/chunks/porqwz5r.js" rel="modulepreload"> 22 <link href="./_app/immutable/chunks/BM8A1LG4.js" rel="modulepreload"> 23 <link href="./_app/immutable/chunks/oTKp1ypB.js" rel="modulepreload"> 24 <link href="./_app/immutable/chunks/Cw9hRD3K.js" rel="modulepreload"> 25 <link href="./_app/immutable/chunks/CtF8lmCD.js" rel="modulepreload"> 26 <link href="./_app/immutable/chunks/B1clm_GN.js" rel="modulepreload"> 27 <link href="./_app/immutable/nodes/4.YLnmqXWa.js" rel="modulepreload"> 28 <link href="./_app/immutable/chunks/DM4fnqED.js" rel="modulepreload"> 29 <link href="./_app/immutable/chunks/DOXG6GBn.js" rel="modulepreload"> 30 <link href="./_app/immutable/chunks/5OKMvTsk.js" rel="modulepreload"> 31 <link href="./_app/immutable/chunks/C8JsYuk_.js" rel="modulepreload"> 32 <link href="./_app/immutable/chunks/4LbDbJ0q.js" rel="modulepreload"> 33 <link href="./_app/immutable/chunks/UdpOrlnz.js" rel="modulepreload"> 34 <link href="./_app/immutable/chunks/B2dYlsSe.js" rel="modulepreload"> 35 <link href="./_app/immutable/chunks/CEcLVhbI.js" rel="modulepreload"> 36 <link href="./_app/immutable/chunks/nzQeAhpo.js" rel="modulepreload"> 37 <link href="./_app/immutable/chunks/C5QqlZAP.js" rel="modulepreload"> 38 <link href="./_app/immutable/chunks/Bup5LBQz.js" rel="modulepreload"> 39 <link href="./_app/immutable/nodes/9.lJ7H495U.js" rel="modulepreload"> 40 <link href="./_app/immutable/chunks/BP-_wjZZ.js" rel="modulepreload"> 41 <link href="./_app/immutable/chunks/jZEIRuD3.js" rel="modulepreload"> 42 <link href="./_app/immutable/chunks/BGFdVicR.js" rel="modulepreload"> 43 <link href="./_app/immutable/chunks/CWmCwdDg.js" rel="modulepreload"> 44 <link href="./_app/immutable/chunks/CAZ3I1wQ.js" rel="modulepreload"> 45 <link href="./_app/immutable/chunks/jLiRLHDe.js" rel="modulepreload"> 46 <link href="./_app/immutable/chunks/B-bd-nZJ.js" rel="modulepreload"> 47 <link href="./_app/immutable/chunks/B1xDsxBA.js" rel="modulepreload"> 48 <link href="./_app/immutable/chunks/BOmV3_Wv.js" rel="modulepreload"> 49 <link href="./_app/immutable/chunks/s-7BGGhE.js" rel="modulepreload"> 50 <!--1et7q0p--><!--[-1--><!--]--> <!---->
50<script>(function setInitialMode({ defaultMode = "system", themeColors: themeColors2, darkClassNames: darkClassNames2 = ["dark"], lightClassNames: lightClassNames2 = [], defaultTheme = "", modeStorageKey: modeStorageKey2 = "mode-watcher-mode", themeStorageKey: themeStorageKey2 = "mode-watcher-theme" }) { 51 const rootEl = document.documentElement; 52 const mode = localStorage.getItem(modeStorageKey2) ?? defaultMode; 53 const theme = localStorage.getItem(themeStorageKey2) ?? defaultTheme; 54 const light = mode === "light" || mode === "system" && window.matchMedia("(prefers-color-scheme: light)").matches; 55 if (light) { 56 if (darkClassNames2.length) 57 rootEl.classList.remove(...darkClassNames2.filter(Boolean)); 58 if (lightClassNames2.length) 59 rootEl.classList.add(...lightClassNames2.filter(Boolean)); 60 } else { 61 if (lightClassNames2.length) 62 rootEl.classList.remove(...lightClassNames2.filter(Boolean)); 63 if (darkClassNames2.length) 64 rootEl.classList.add(...darkClassNames2.filter(Boolean)); 65 } 66 rootEl.style.colorScheme = light ? "light" : "dark"; 67 if (themeColors2) { 68 const themeMetaEl = document.querySelector('meta[name="theme-color"]'); 69 if (themeMetaEl) { 70 themeMetaEl.setAttribute("content", mode === "light" ? themeColors2.light : themeColors2.dark); 71 } 72 } 73 if (theme) { 74 rootEl.setAttribute("data-theme", theme); 75 localStorage.setItem(themeStorageKey2, theme); 76 } 77 localStorage.setItem(modeStorageKey2, mode); 78})({"defaultMode":"dark","darkClassNames":["dark"],"lightClassNames":[],"defaultTheme":"","modeStorageKey":"mode-watcher-mode","themeStorageKey":"mode-watcher-theme"});</script>
78<!----><!----> 79 <link href="./_app/immutable/assets/0.Bj6jrr_T.css" rel="stylesheet"> 80 <link href="./_app/immutable/assets/pm-command.DpHa0LAF.css" rel="stylesheet"> 81 <link href="./_app/immutable/assets/scroll-area.bHHIbcsu.css" rel="stylesheet"> 82 <link href="./_app/immutable/assets/table-row.CV-KWLNP.css" rel="stylesheet"> 83 </head> 84 <body data-sveltekit-preload-data="hover" class="relative"> 85 <div style="display: contents"><!--[--><!--[0--><!--[--><!--[-1--><!--]--><!----> <section aria-label="Notifications alt+T" tabindex="-1" aria-live="polite" aria-relevant="additions text" aria-atomic="false" class="svelte-yd8r4v"><!--[-1--><!--]--></section><!----> <!--[0--><!--[--><div class="bg-background border-border sticky top-0 z-50 flex h-14 w-full items-center justify-between border-b px-4"><div class="flex items-center gap-4"><a href="/" class="flex items-center gap-2"><svg class="h-8 w-8 fill-primary" id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0, 0, 400,400"><g id="svgg"><path id="path0" d="M171.296 12.630 C 123.016 16.615,79.575 38.850,49.439 75.000 C -19.476 157.669,0.059 280.762,91.150 337.824 C 93.902 339.548,97.811 342.408,99.836 344.180 C 176.333 411.083,294.627 398.630,355.914 317.222 C 418.813 233.675,395.475 113.671,305.926 60.181 C 304.602 59.390,302.102 57.481,300.370 55.938 C 265.981 25.304,216.970 8.860,171.296 12.630 M197.407 31.309 C 312.247 41.298,378.278 167.035,321.006 266.667 C 263.964 365.900,124.014 373.246,56.437 280.556 C 15.296 224.126,17.240 143.013,61.002 90.016 C 61.079 89.922,88.968 117.672,122.977 151.681 L 184.813 213.516 196.296 202.037 L 207.780 190.558 145.893 128.670 L 84.006 66.782 85.984 65.126 C 109.201 45.693,140.087 33.798,174.630 30.986 C 178.957 30.634,191.726 30.815,197.407 31.309 M348.841 120.926 C 403.418 201.246,374.452 311.814,287.424 355.366 C 249.404 374.392,202.896 377.716,164.074 364.182 C 161.546 363.300,159.448 362.196,161.296 362.719 C 167.249 364.404,191.907 364.638,204.630 363.129 C 305.145 351.211,374.908 257.534,357.559 157.778 C 355.156 143.962,351.473 131.956,344.664 115.741 L 344.042 114.259 344.806 115.185 C 345.226 115.694,347.042
85118.278,348.841 120.926 " stroke="none" fill="#14141c" fill-rule="evenodd"></path><path id="path1" d="M346.268 119.074 C 398.046 240.489,301.165 375.189,170.185 363.892 C 160.873 363.088,160.857 363.144,169.665 365.708 C 235.301 384.814,304.729 361.273,345.430 306.111 C 384.978 252.512,386.641 177.899,349.529 122.222 C 345.098 115.574,344.550 115.045,346.268 119.074 " stroke="none" fill="inherit" fill-rule="evenodd"></path><path id="path2" d="M169.300 31.697 C 143.741 34.231,120.140 42.430,98.766 56.200 C 94.780 58.768,85.635 65.467,84.924 66.339 C 84.552 66.797,94.601 77.009,146.128 128.536 C 180.035 162.442,207.778 190.350,207.778 190.553 C 207.778 190.756,202.653 196.048,196.390 202.314 L 185.003 213.706 123.143 151.847 L 61.283 89.988 57.905 94.531 C -4.739 178.774,31.853 300.569,130.535 336.276 C 233.090 373.384,341.464 297.357,341.480 188.293 C 341.494 95.603,261.208 22.583,169.300 31.697 " stroke="none" fill="#fcfcfc" fill-rule="evenodd"></path><path id="path3" d="M176.764 31.007 C 177.327 31.092,178.161 31.089,178.616 31.001 C 179.072 30.914,178.611 30.844,177.593 30.847 C 176.574 30.849,176.201 30.921,176.764 31.007 M190.278 31.002 C 190.736 31.090,191.486 31.090,191.944 31.002 C 192.403 30.914,192.028 30.842,191.111 30.842 C 190.194 30.842,189.819 30.914,190.278 31.002 M359.345 170.741 C 359.345 171.454,359.421 171.745,359.515 171.389 C 359.608 171.032,359.608 170.449,359.515 170.093 C 359.421 169.736,359.345 170.028,359.345 170.741 M359.723 175.370 C 359.727 176.185,359.803 176.475,359.892 176.014 C 359.980 175.553,359.977 174.887,359.884 174.533 C 359.791 174.179,359.719 174.556,359.723 175.370 M360.134 182.593 C 360.134 184.528,360.196 185.319,360.272 184.352 C 360.349 183.384,360.349 181.801,360.272 180.833 C 360.196 179.866,360.134 180.657,360.134 182.593 M26.760 180.926 C 26.764 181.741,26.840 182.030,26.929 181.570 C 27.017 181.109,27.014 180.442,26.921 180.088 C 26.828 179.734,26.756 180.111,26.760 180.926 M341.582 182.222 C 341.582 183.139,341.655 183.514,341.743 183.056 C 341.831 182.597,341.831 181.847,341.743 181.389 C 341.655 180.931,341.582 181.306,341.582 182.222 M360.135 193.889 C 360.136 195.926,360.198 196.712,360.273 195.636 C 360.349 194.559,360.348 192.893,360.272 191.932 C 360.196 190.971,360.134 191.852,360.135 193.889 M341.575 194.630 C 341.579 195.444,341.655 195.734,341.743 195.273 C 341.832 194.813,341.829 194.146,341.736 193.792 C 341.643 193.438,341.571 193.815,341.575 194.630 M26.768 195.556 C 26.768 196.472,26.840 196.847,26.928 196.389 C 27.016 195.931,27.016 195.181,26.928 194.722 C 26.840 194.264,26.768 194.639,26.768 195.556 M376.019 200.926 C 376.023 201.741,376.099 202.030,376.188 201.570 C 376.276 201.109,376.273 200.442,376.180 200.088 C 376.088 199.734,376.015 200.111,376.019 200.926 M359.716 201.111 C 359.716 201.824,359.792 202.116,359.885 201.759 C 359.978 201.403,359.978 200.819,359.885 200.463 C 359.792 200.106,359.716 200.398,359.716 201.111 M376.426 211.481 C 376.426 213.213,376.490 213.921,376.567 213.056 C 376.645 212.190,376.645 210.773,376.567 209.907 C 376.490 209.042,376.426 209.750,376.426 211.481 M376.019 221.667 C 376.023 222.481,376.099 222.771,376.188 222.310 C 376.276 221.850,376.273 221.183,376.180 220.829 C 376.088 220.475,376.015 220.852,376.019 221.667 M375.271 230.000 C 375.271 230.713,375.347 231.005,375.440 230.648 C 375.534 230.292,375.534 229.708,375.440 229.352 C 375.347 228.995,375.271 229.287,375.271 230.000 M339.815 270.370 C 339.299 271.389,338.960 272.222,339.062 272.222 C 339.163 272.222,339.669 271.389,340.185 270.370 C 340.701 269.352,341.040 268.519,340.938 268.519 C 340.837 268.519,340.331 269.352,339.815 270.370 M360.446 280.945 C 359.590 282.672,358.897 284.208,358.908 284.357 C 358.918 284.507,359.678 283.154,360.598 281.350 C 361.517 279.547,362.209 278.012,362.136 277.938 C 362.063 277.865,361.302 279.218,360.446 280.945 M317.940 302.685 L 316.852 303.889 318.056 302.801 C 318.718 302.203,319.259 301.661,319.259 301.597 C 319.259 301.311,318.954 301.563,317.940 302.685 M308.513 312.870 L 303.519 317.963 308.611 312.968 C 313.342 308.328,313.872 307.778,313.606 307.778 C 313.552 307.778,311.261 310.069,308.513 312.870 M334.983 318.981 L 333.519 320.556 335.093 319.092 C 336.556 317.730,336.837 317.407,336.557 317.407 C 336.496 317.407,335.788 318.116,334.983 318.981 M329.065 325.278 L 326.111 328.333 329.167 325.379 C 332.005 322.635,332.391 322.222,332.121 322.222 C 332.065 322.222,330.690 323.597,329.065 325.278 M322.760 331.204 L 321.296 332.778 322.870 331.314 C 324.334 329.952,324.615 329.630,324.334 329.630 C 324.274 329.630,323.566 330.338,322.760 331.204 M176.574 345.817 C 177.032 345.905,177.782 345.905,178.241 345.817 C 178.699 345.729,178.324 345.656,177.407 345.656 C 176.491 345.656,176.116 345.729,176.574 345.817 M190.098 345.821 C 190.661 345.906,191.494 345.904,191.950 345.816 C 192.405 345.728,191.944 345.659,190.926 345.661 C 189.907 345.664,189.535 345.736,190.098 345.821 M162.407 363.333 C 162.137 363.771,162.499 363.771,163.519 363.333 C 164.233 363.026,164.230 363.014,163.448 362.989 C 163.001 362.975,162.533 363.130,162.407 363.333 M166.019 363.589 C 166.375 363.682,166.958 363.682,167.315 363.589 C 167.671 363.495,167.380 363.419,166.667 363.419 C 165.954 363.419,165.662 363.495,166.019 363.589 M170.652 363.966 C 171.113 364.054,171.780 364.051,172.134 363.958 C 172.488 363.865,172.111 363.793,171.296 363.797 C 170.481 363.801,170.192 363.877,170.652 363.966 M196.759 363.959 C 197.116 364.052,197.699 364.052,198.056 363.959 C 198.412 363.866,198.120 363.790,197.407 363.790 C 196.694 363.790,196.403 363.866,196.759 363.959 M176.389 364.346 C 177.356 364.423,178.940 364.423,179.907 364.346 C 180.875 364.270,180.083 364.208,178.148 364.208 C 176.213 364.208,175.421 364.270,176.389 364.346 M188.611 364.346 C 189.579 364.423,191.162 364.423,192.130 364.346 C 193.097 364.270,192.306 364.208,190.370 364.208 C 188.435 364.208,187.644 364.270,188.611 364.346 M196.019 371.366 C 196.375 371.460,196.958 371.460,197.315 371.366 C 197.671 371.273,197.380 371.197,196.667 371.197 C 195.954 371.197,195.
85662 371.273,196.019 371.366 M204.172 372.118 C 204.735 372.203,205.568 372.200,206.024 372.113 C 206.479 372.025,206.019 371.955,205.000 371.958 C 203.981 371.961,203.609 372.032,204.172 372.118 M224.722 372.113 C 225.181 372.202,225.931 372.202,226.389 372.113 C 226.847 372.025,226.472 371.953,225.556 371.953 C 224.639 371.953,224.264 372.025,224.722 372.113 M213.796 372.492 C 214.560 372.572,215.810 372.572,216.574 372.492 C 217.338 372.412,216.713 372.347,215.185 372.347 C 213.657 372.347,213.032 372.412,213.796 372.492 " stroke="none" fill="#8c741c" fill-rule="evenodd"></path><path id="path4" d="M181.759 31.016 C 183.236 31.086,185.653 31.086,187.130 31.016 C 188.606 30.945,187.398 30.888,184.444 30.888 C 181.491 30.888,180.282 30.945,181.759 31.016 M172.315 31.366 C 172.671 31.460,173.255 31.460,173.611 31.366 C 173.968 31.273,173.676 31.197,172.963 31.197 C 172.250 31.197,171.958 31.273,172.315 31.366 M198.981 31.737 C 199.338 31.830,199.921 31.830,200.278 31.737 C 200.634 31.644,200.343 31.567,199.630 31.567 C 198.917 31.567,198.625 31.644,198.981 31.737 M84.891 66.030 L 84.097 66.875 146.030 128.715 L 207.963 190.556 146.199 128.698 L 84.435 66.841 85.263 66.013 C 85.718 65.558,85.999 65.185,85.888 65.185 C 85.776 65.185,85.327 65.565,84.891 66.030 M295.370 77.037 C 297.808 79.481,299.887 81.481,299.988 81.481 C 300.090 81.481,298.179 79.481,295.741 77.037 C 293.303 74.593,291.225 72.593,291.123 72.593 C 291.021 72.593,292.932 74.593,295.370 77.037 M301.111 83.079 C 301.111 83.143,301.653 83.684,302.315 84.283 L 303.519 85.370 302.431 84.167 C 301.417 83.045,301.111 82.793,301.111 83.079 M27.123 176.667 C 27.123 177.380,27.199 177.671,27.292 177.315 C 27.386 176.958,27.386 176.375,27.292 176.019 C 27.199 175.662,27.123 175.954,27.123 176.667 M26.817 188.148 C 26.817 191.509,26.874 192.884,26.942 191.204 C 27.011 189.523,27.011 186.773,26.942 185.093 C 26.874 183.412,26.817 184.787,26.817 188.148 M341.627 188.519 C 341.627 191.269,341.685 192.394,341.756 191.019 C 341.827 189.644,341.827 187.394,341.756 186.019 C 341.685 184.644,341.627 185.769,341.627 188.519 M196.109 202.315 L 184.630 213.889 196.204 202.410 C 202.569 196.096,207.778 190.888,207.778 190.836 C 207.778 190.574,206.777 191.559,196.109 202.315 M341.197 199.630 C 341.197 200.343,341.273 200.634,341.366 200.278 C 341.460 199.921,341.460 199.338,341.366 198.981 C 341.273 198.625,341.197 198.917,341.197 199.630 M70.370 297.222 C 71.683 298.546,72.840 299.630,72.942 299.630 C 73.043 299.630,72.053 298.546,70.741 297.222 C 69.428 295.898,68.271 294.815,68.170 294.815 C 68.068 294.815,69.058 295.898,70.370 297.222 M295.370 299.630 C 292.932 302.074,291.021 304.074,291.123 304.074 C 291.225 304.074,293.303 302.074,295.741 299.630 C 298.179 297.185,300.090 295.185,299.988 295.185 C 299.887 295.185,297.808 297.185,295.370 299.630 M75.556 302.407 C 76.868 303.731,78.025 304.815,78.127 304.815 C 78.229 304.815,77.238 303.731,75.926 302.407 C 74.614 301.083,73.457 300.000,73.355 300.000 C 73.253 300.000,74.243 301.083,75.556 302.407 M288.310 306.389 L 287.222 307.593 288.426 306.505 C 289.088 305.906,289.630 305.365,289.630 305.301 C 289.630 305.015,289.324 305.267,288.310 306.389 M168.241 345.070 C 168.597 345.163,169.181 345.163,169.537 345.070 C 169.894 344.977,169.602 344.901,168.889 344.901 C 168.176 344.901,167.884 344.977,168.241 345.070 M181.389 345.831 C 182.866 345.901,185.282 345.901,186.759 345.831 C 188.236 345.760,187.028 345.703,184.074 345.703 C 181.120 345.703,179.912 345.760,181.389 345.831 " stroke="none" fill="#979797" fill-rule="evenodd"></path></g></svg> <span class="text-xl font-medium">Retroui Svelte</span></a> <nav class="hidden lg:flex items-center gap-0"><!--[--><a href="/docs" class="inline-block p-3 hover:underline">Docs</a><a href="/docs/components" class="inline-block p-3 hover:underline">Components</a><a href="/templates" class="inline-block p-3 hover:underline">Templates</a><a href="/themes" class="inline-block p-3 hover:underline">Themes</a><!--]--></nav></div> <div class="flex items-center gap-4"><div class="hidden md:block"><!--[0--><a data-slot="button" class="font-head rounded-md shadow-md text-center shrink-0 outline-hidden cursor-pointer duration-200 font-medium justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:shadow-none bg-secondary shadow-primary text-secondary-foreground border-2 border-border transition hover:translate-y-1 h-9 px-4 py-2 has-[>svg]:px-3 flex gap-2 items-center" href="https://github.com/Mhamad6000/retroui-svelte" target="_blank"><svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92
8510.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)" fill="currentColor"></path></svg> <span>Github</span><!----></a><!--]--><!----></div> <!--[0--><a data-slot="button" class="font-head rounded-md shadow-md text-center shrink-0 inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:shadow-none bg-secondary shadow-primary text-secondary-foreground border-2 border-border transition hover:translate-y-1 size-8 md:hidden" href="https://github.com/Mhamad6000/retroui-svelte" target="_blank"><svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)" fill="currentColor"></path></svg> <span class="sr-only">Github</span><!----></a><!--]--><!----> <!--[-1--><button data-slot="button" class="font-head rounded-md shadow-md text-center shrink-0 inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:shadow-none bg-secondary shadow-primary text-secondary-foreground border-2 border-border transition hover:translate-y-1 size-8" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-sun scale-100 rotate-0 !transition-all dark:scale-0 dark:-rotate-90"><!--[--><!----><circle cx="12" cy="12" r="4"><!----></circle><!----><!----><path d="M12 2v2"><!----></path><!----><!----><path d="M12 20v2"><!----></path><!----><!----><path d="m4.93 4.93 1.41 1.41"><!----></path><!----><!----><path d="m17.66 17.66 1.41 1.41"><!----></path><!----><!----><path d="M2 12h2"><!----></path><!----><!----><path d="M20 12h2"><!----></path><!----><!----><path d="m6.34 17.66-1.41 1.41"><!----></path><!----><!----><path d="m19.07 4.93-1.41 1.41"><!----></path><!----><!--]--><!----><!----></svg><!----> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-moon absolute scale-0 rotate-90 !transition-all dark:scale-100 dark:rotate-0"><!--[--><!----><path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"><!----></path><!----><!--]--><!----><!----></svg><!----> <span class="sr-only">Toggle theme</span><!----></button><!--]--><!----> <!--[-1--><button data-slot="button" class="font-head rounded-md shadow-md text-center shrink-0 inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:shadow-none bg-secondary shadow-primary text-secondary-foreground border-2 border-border transition hover:translate-y-1 size-8 lg:hidden" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-menu"><!--[--><!----><path d="M4 12h16"><!----></path><!----><!----><path d="M4 18h16"><!----></path><!----><!----><path d="M4 6h16"><!----></path><!----><!--]--><!----><!----></svg><!----> <span class="sr-only">Toggle Sidebar</span><!----></button><!--]--><!----></div></div> <!--[--><!--[--><!--[--><!--[-1--><!--]--><!--]--><!--]--><!----><!--]--><!----><!----> <main><!--[--><div class="min-h-screen bg-background pb-16">
85<div class="border-b-2 border-foreground/10"><div class="mx-auto max-w-6xl px-4 py-10"><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 px-2.5 py-1.5 text-sm mb-3 border-2 border-foreground/20 bg-primary text-primary-foreground"><!---->Templates<!----><!----></span><!----><!----> <h1 class="font-head text-3xl uppercase md:text-5xl">Ready-made templates</h1> <p class="mt-2 max-w-xl text-muted-foreground">Drop-in landing page templates built with RetroUI components. Copy the install command or grab 86 the source.</p></div></div> <div class="mx-auto max-w-6xl space-y-20 px-4 pt-12"><!--[--><div class="space-y-4"><div class="flex flex-col gap-2"><h2 class="font-head text-2xl uppercase">Portfolio</h2> <p class="max-w-xl text-sm text-muted-foreground">A dark retro portfolio landing page with skills, testimonials, process, experience, and contact sections.</p></div> <div class="border-border relative w-full rounded-md border bg-[#24292e] text-[#e1e4e8] svelte-1mhb543"><div class="flex place-items-center justify-between gap-2 border-b border-white/80 py-1 pr-2"><div class="flex place-items-center gap-2 px-2"><div class="flex size-4 place-items-center justify-center opacity-75"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-terminal text-primary size-3"><!--[--><!----><path d="M12 19h8"><!----></path><!----><!----><path d="m4 17 6-6-6-6"><!----></path><!----><!--]--><!----><!----></svg><!----></div> <!--[--><!--[--><!--$s1--><!--[-1--><div data-slot="tabs" class="flex flex-col gap-2" id="bits-s1" data-orientation="horizontal" data-tabs-root=""><!--[--><!--[--><!--$s2--><!--[-1--><div data-slot="tabs-list" class="inline-flex w-fit items-center justify-center h-auto bg-transparent p-0" id="bits-s2" role="tablist" aria-orientation="horizontal" data-orientation="horizontal" data-tabs-list=""><!--[--><!--[--><!--[--><!--$s3--><!--[-1--><button data-slot="tabs-trigger" class="data-[state=active]:border-border rounded-md data-[state=active]:bg-primary data-[state=active]:text-primary-foreground border-2 border-transparent px-4 py-1 transition-all focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=active]:font-semibold [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 h-7 font-mono text-sm font-light" id="bits-s3" role="tab" data-state="active" data-value="npm" data-orientation="horizontal" aria-selected="true" data-tabs-trigger="" tabindex="0" type="button"><!---->npm<!----><!----></button><!--]--><!--]--><!--]--><!--[--><!--[--><!--$s4--><!--[-1--><button data-slot="tabs-trigger" class="data-[state=active]:border-border rounded-md data-[state=active]:bg-primary data-[state=active]:text-primary-foreground border-2 border-transparent px-4 py-1 transition-all focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=active]:font-semibold [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 h-7 font-mono text-sm font-light" id="bits-s4" role="tab" data-state="inactive" data-value="pnpm" data-orientation="horizontal" aria-selected="false" data-tabs-trigger="" tabindex="0" type="button"><!---->pnpm<!----><!----></button><!--]--><!--]--><!--]--><!--[--><!--[--><!--$s5--><!--[-1--><button data-slot="tabs-trigger" class="data-[state=active]:border-border rounded-md data-[state=active]:bg-primary data-[state=active]:text-primary-foreground border-2 border-transparent px-4 py-1 transition-all focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=active]:font-semibold [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 h-7 font-mono text-sm font-light" id="bits-s5" role="tab" data-state="inactive" data-value="yarn" data-orientation="horizontal" aria-selected="false" data-tabs-trigger="" tabindex="0" type="button"><!---->yarn<!----><!----></button><!--]--><!--]--><!--]--><!--[--><!--[--><!--$s6--><!--[-1--><button data-slot="tabs-trigger" class="data-[state=active]:border-border rounded-md data-[state=active]:bg-primary data-[state=active]:text-primary-foreground border-2 border-transparent px-4 py-1 transition-all focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=active]:font-semibold [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 h-7 font-mono text-sm font-light" id="bits-s6" role="tab" data-state="inactive" data-value="bun" data-orientation="horizontal" aria-selected="false" data-tabs-trigger="" tabindex="0" type="button"><!---->bun<!----><!----></button><!--]--><!--]--><!--]--><!--]--><!----></div><!--]--><!--]--><!--]--><!----></div><!--]--><!--]--><!--]--></div> <!--[--><!--[--><!--[--><!--[--><!--$s7--><!--[0--><!--[--><!--[-1--><button data-slot="button" class="font-head rounded-md shadow-md text-center shrink-0 inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:shadow-none bg-primary text-primary-foreground border-2 border-border transition hover:translate-y-1 hover:bg-primary-hover size-8 z-10 relative right-auto top-auto" type="button" data-pre-copy-btn="" title="Copy code"><!--[-1--><svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
86<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg><!--]--><!----></button><!--]--><!--]--><!----><!--]--><!--]--><!--]--> <!--[--><!--[--><!--[-1--><!--]--><!--]--><!--]--><!----><!----><!--]--><!----><!--]--></div> <div class="no-scrollbar overflow-x-auto svelte-1mhb543"><!--[-1--><div class="p-3"><span class="font-mono text-sm leading-none font-light text-nowrap">npx shadcn-svelte@latest add https://retroui-svelte.netlify.app/r/portfolio.json</span></div><!--]--></div></div><!----> <!--[--><!--$s8--><!--[-1--><div data-slot="tabs" class="flex flex-col gap-2 w-full" id="bits-s8" data-orientation="horizontal" data-tabs-root=""><!--[--><!--$s9--><!--[-1--><div data-slot="tabs-list" class="inline-flex h-9 items-center w-full justify-start rounded-none border-b border-foreground/10 pb-0" id="bits-s9" role="tablist" aria-orientation="horizontal" data-orientation="horizontal" data-tabs-list=""><!--[--><!--$s10--><!--[-1--><button data-slot="tabs-trigger" class="data-[state=active]:border-border rounded-md data-[state=active]:bg-primary data-[state=active]:text-primary-foreground border-2 border-transparent px-4 py-1 font-medium transition-all focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=active]:font-semibold [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" id="bits-s10" role="tab" data-state="active" data-value="preview" data-orientation="horizontal" aria-selected="true" data-tabs-trigger="" tabindex="0" type="button"><!---->Preview<!----><!----></button><!--]--><!--]--><!----> <!--[--><!--$s11--><!--[-1--><button data-slot="tabs-trigger" class="data-[state=active]:border-border rounded-md data-[state=active]:bg-primary data-[state=active]:text-primary-foreground border-2 border-transparent px-4 py-1 font-medium transition-all focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=active]:font-semibold [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" id="bits-s11" role="tab" data-state="inactive" data-value="code" data-orientation="horizontal" aria-selected="false" data-tabs-trigger="" tabindex="0" type="button"><!---->Code<!----><!----></button><!--]--><!--]--><!----><!----></div><!--]--><!--]--><!----> <!--[--><!--$s12--><!--[-1--><div data-slot="tabs-content" class="border-border rounded-md mt-2 flex-1 outline-none border-0 p-0 pt-4" id="bits-s12" role="tabpanel" tabindex="0" data-value="preview" data-state="active" data-orientation="horizontal" data-tabs-content=""><div class="h-[calc(100vh-30rem)] overflow-auto rounded-lg border-2 border-foreground
86/10"><div class="dark bg-background text-foreground"><nav class="sticky top-0 z-50 border-b-2 border-foreground/10 bg-background/95 backdrop-blur-sm"><div class="mx-auto flex max-w-6xl items-center justify-between px-4 py-3.5"><span class="font-head text-xl">Mhamad<span class="text-primary">.</span></span> <div class="hidden items-center gap-8 md:flex"><a href="#work" class="font-sans text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">Work</a> <a href="#skills" class="font-sans text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">Skills</a> <a href="#process" class="font-sans text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">Process</a> <a href="#experience" class="font-sans text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">Experience</a> <a href="#contact" class="font-sans text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">Contact</a></div> <div class="hidden md:flex items-center gap-2"><!--[0--><a data-slot="button" class="font-head rounded-md shadow-md text-center shrink-0 inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:shadow-none bg-primary text-primary-foreground border-2 border-border transition hover:translate-y-1 hover:bg-primary-hover h-8 gap-1.5 px-3 has-[>svg]:px-2.5" href="#contact"><!---->Get In Touch<!----></a><!--]--><!----></div> <button class="flex size-9 items-center justify-center border-2 border-foreground md:hidden" aria-label="Menu"><div class="flex flex-col gap-1"><span class="block h-0.5 w-5 bg-foreground"></span><span class="block h-0.5 w-5 bg-foreground"></span></div></button></div> <!--[-1--><!--]--></nav> <section class="relative overflow-hidden border-b-2 border-foreground
86/10 bg-background pt-16 pb-20 md:pt-24 md:pb-32"><div class="absolute inset-0 opacity-20" style="background-image: linear-gradient(to right, var(--foreground) 0.3px, transparent 1px), linear-gradient(to bottom, var(--foreground) 0.3px, transparent 1px); background-size: 40px 40px;"></div> <div class="relative mx-auto max-w-6xl px-4"><div class="grid gap-12 lg:grid-cols-5"><div class="flex flex-col justify-center gap-6 lg:col-span-3"><div class="inline-flex w-fit items-center gap-2 rounded-md border border-foreground/20 bg-card px-3 py-1.5"><div class="size-2 rounded-full bg-green-500"></div> <span class="font-sans text-xs font-medium text-muted-foreground">Sulaymaniyah · Available for work</span></div> <h1 class="font-head text-5xl leading-[1.05] md:text-7xl lg:text-8xl uppercase"><span class="text-foreground">Build</span> <span class="text-foreground">Ship</span> <span class="text-cyan-400">Scale</span></h1> <p class="max-w-lg font-sans text-base leading-relaxed md:text-lg text-muted-foreground">I build fast, accessible web apps. I specialize in Svelte, TypeScript, and building products people love to use.</p> <div class="flex flex-wrap gap-3"><!--[0--><a data-slot="button" class="font-head rounded-md shadow-md text-center shrink-0 inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:shadow-none bg-primary text-primary-foreground border-2 border-border transition hover:translate-y-1 hover:bg-primary-hover h-10 px-6 has-[>svg]:px-4" href="#work"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-code mr-2 size-4"><!--[--><!----><path d="m16 18 6-6-6-6"><!----></path><!----><!----><path d="m8 6-6 6 6 6"><!----></path><!----><!--]--><!----><!----></svg><!---->View My Work<!----></a><!--]--><!----> <!--[0--><a data-slot="button" class="font-head rounded-md shadow-md text-center shrink-0 inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:shadow-none bg-transparent border-2 transition hover:translate-y-1 h-10 px-6 has-[>svg]:px-4 border-foreground text-foreground hover:bg-foreground hover:text-background" href="#contact"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-mail mr-2 size-4"><!--[--><!----><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"><!----></path><!----><!----><rect x="2" y="4" width="20" height="16" rx="2"><!----></rect><!----><!--]--><!----><!----></svg><!---->Get In Touch<!----></a><!--]--><!----></div> <div class="mt-2 rounded-md border-2 border-foreground bg-card max-w-xl overflow-hidden"><div class="grid grid-cols-2 divide-x divide-foreground md:grid-cols-4"><!--[--><div class="px-3 py-4 text-center"><div class="font-head text-xl md:text-2xl text-foreground">5+</div> <div class="font-sans text-[10px] font-medium uppercase tracking-wide text-muted-foreground md:text-xs">Years</div></div><div class="px-3 py-4 text-center"><div class="font-head text-xl md:text-2xl text-foreground">30+</div> <div class="font-sans text-[10px] font-medium uppercase tracking-wide text-muted-foreground md:text-xs">Projects</div></div><div class="px-3 py-4 text-center"><div class="font-head text-xl md:text-2xl text-foreground">15+</div> <div class="font-sans text-[10px] font-medium uppercase tracking-wide text-muted-foreground md:text-xs">Clients</div></div><div class="px-3 py-4 text-center"><div class="font-head text-xl md:text-2xl text-foreground">99%</div> <div class="font-sans text-[10px] font-medium uppercase tracking-wide text-muted-foreground md:text-xs">Satisfaction</div></div><!--]--></div></div></div> <div class="flex items-center justify-center lg:col-span-2"><div class="relative w-full max-w-md"><div class="absolute left-4 top-4 -z-10 h-full w-full bg-cyan-400"></div> <div class="absolute left-2 top-2 -z-10 h-full w-full bg-primary"></div> <div class="relative border-2 border-foreground bg-card"><div class="flex items-center gap-1.5 border-b-2 border-foreground
86/10 bg-card px-4 py-2.5"><div class="size-2.5 rounded-full bg-red-500"></div> <div class="size-2.5 rounded-full bg-primary"></div> <div class="size-2.5 rounded-full bg-green-500"></div> <span class="ml-3 font-mono text-xs text-muted-foreground">~/portfolio</span></div> <div class="space-y-1.5 p-4 font-mono text-[13px] leading-relaxed text-muted-foreground"><div><span class="text-green-400">$</span> <span class="text-cyan-400">npm run deploy</span></div> <div class="text-muted-foreground/60">> [email protected] deploy</div> <div class="text-muted-foreground/60">Compiling <span class="text-primary">6</span> projects</div> <div class="flex items-center gap-2"><span class="text-green-400">â</span> <span class="text-muted-foreground">Svelte components compiled</span></div> <div class="flex items-center gap-2"><span class="text-green-400">â</span> <span class="text-muted-foreground">Assets optimized</span></div> <div class="flex items-center gap-2"><span class="text-green-400">â</span> <span class="text-muted-foreground">Deployment ready</span></div>
86 <div class="mt-2 border-t border-foreground/10 pt-2 text-xs text-muted-foreground/60"><span class="text-green-400">â</span> 5+ exp · <span class="text-green-400">â</span> 30+ shipped</div></div></div></div></div></div></div></section> <section id="work" class="border-b-2 border-foreground/10 py-16 md:py-24 bg-card/30"><div class="mx-auto max-w-6xl px-4"><div class="mb-10 flex flex-col gap-4 md:flex-row md:items-end md:justify-between"><div><div class="mb-2 flex items-center gap-3"><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap border font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 px-2.5 py-1.5 text-sm bg-primary text-primary-foreground uppercase tracking-wide"><!---->Portfolio<!----><!----></span><!----><!----></div> <!----><h2 class="lg:text-4xl font-semibold text-4xl md:text-5xl font-head uppercase"><!---->Selected Work<!----><!----></h2><!----><!----></div></div> <!--[--><!--$s13--><!--[-1--><div data-slot="tabs" class="flex flex-col gap-2 w-full" id="bits-s13" data-orientation="horizontal" data-tabs-root=""><!--[--><!--$s14--><!--[-1--><div data-slot="tabs-list" class="inline-flex h-9 w-fit items-center justify-center mb-8 border-foreground
86/10" id="bits-s14" role="tablist" aria-orientation="horizontal" data-orientation="horizontal" data-tabs-list=""><!--[--><!--$s15--><!--[-1--><button data-slot="tabs-trigger" class="data-[state=active]:border-border rounded-md data-[state=active]:bg-primary data-[state=active]:text-primary-foreground border-2 border-transparent px-4 py-1 font-medium transition-all focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=active]:font-semibold [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" id="bits-s15" role="tab" data-state="active" data-value="all" data-orientation="horizontal" aria-selected="true" data-tabs-trigger="" tabindex="0" type="button"><!---->All<!----><!----></button><!--]--><!--]--><!----> <!--[--><!--$s16--><!--[-1--><button data-slot="tabs-trigger" class="data-[state=active]:border-border rounded-md data-[state=active]:bg-primary data-[state=active]:text-primary-foreground border-2 border-transparent px-4 py-1 font-medium transition-all focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=active]:font-semibold [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" id="bits-s16" role="tab" data-state="inactive" data-value="svelte" data-orientation="horizontal" aria-selected="false" data-tabs-trigger="" tabindex="0" type="button"><!---->Svelte<!----><!----></button><!--]--><!--]--><!----> <!--[--><!--$s17--><!--[-1--><button data-slot="tabs-trigger" class="data-[state=active]:border-border rounded-md data-[state=active]:bg-primary data-[state=active]:text-primary-foreground border-2 border-transparent px-4 py-1 font-medium transition-all focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=active]:font-semibold [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" id="bits-s17" role="tab" data-state="inactive" data-value="node.js" data-orientation="horizontal" aria-selected="false" data-tabs-trigger="" tabindex="0" type="button"><!---->Node.js<!----><!----></button><!--]--><!--]--><!----> <!--[--><!--$s18--><!--[-1--><button data-slot="tabs-trigger" class="data-[state=active]:border-border rounded-md data-[state=active]:bg-primary data-[state=active]:text-primary-foreground border-2 border-transparent px-4 py-1 font-medium transition-all focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=active]:font-semibold [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" id="bits-s18" role="tab" data-state="inactive" data-value="typescript" data-orientation="horizontal" aria-selected="false" data-tabs-trigger="" tabindex="0" type="button"><!---->TypeScript<!----><!----></button><!--]--><!--]--><!----><!----></div><!--]--><!--]--><!----> <!--[--><!--$s19--><!--[-1--><div data-slot="tabs-content" class="border-border rounded-md mt-2 flex-1 outline-none border-0 p-0" id="bits-s19" role="tabpanel" tabindex="0" data-value="all" data-state="active" data-orientation="horizontal" data-tabs-content=""><div class="grid gap-5 md:grid-cols-2"><!--[--><div class="group relative rounded-md border-2 border-foreground bg-card p-5 transition-all hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_var(--primary)]"><div class="flex items-start justify-between mb-2"><h3 class="font-head text-lg text-foreground">RetroUI</h3> <!--[0--><!--[0--><a data-slot="button" class="font-head rounded-md shadow-md hover:shadow-none text-center inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 bg-transparent border-transparent !shadow-none hover:border-border transition border-2 size-8 [&_svg]:size-4 shrink-0 text-muted-foreground hover:text-foreground" href="#" aria-label="View project"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-arrow-up-right"><!--[--><!----><path d="M7 7h10v10"><!----></path><!----><!----><path d="M7 17 17 7"><!----></path><!----><!--]--><!----><!----></svg><!----></a>
86<!--]--><!--]--></div> <p class="text-sm text-muted-foreground mb-3">40+ neubrutalism components for Svelte 5 with 16 themes and CLI installer.</p> <div class="flex flex-wrap gap-1.5"><!--[--><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap border font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 outline-2 px-2 py-1 text-xs bg-primary text-primary-foreground"><!---->Svelte<!----><!----></span><!----><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap border font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 outline-2 px-2 py-1 text-xs bg-primary text-primary-foreground"><!---->TypeScript<!----><!----></span><!----><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap border font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 outline-2 px-2 py-1 text-xs bg-primary text-primary-foreground"><!---->Tailwind<!----><!----></span><!----><!--]--></div></div><div class="group relative rounded-md border-2 border-foreground bg-card p-5 transition-all hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_var(--primary)]"><div class="flex items-start justify-between mb-2"><h3 class="font-head text-lg text-foreground">FlowDash</h3> <!--[0--><!--[0--><a data-slot="button" class="font-head rounded-md shadow-md hover:shadow-none text-center inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 bg-transparent border-transparent !shadow-none hover:border-border transition border-2 size-8 [&_svg]:size-4 shrink-0 text-muted-foreground hover:text-foreground" href="#" aria-label="View project"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-arrow-up-right"><!--[--><!----><path d="M7 7h10v10"><!----></path><!----><!----><path d="M7 17 17 7"><!----></path><!----><!--]--><!----><!----></svg><!----></a><!--]--><!--]--></div> <p class="text-sm text-muted-foreground mb-3">Real-time analytics dashboard processing 50k events/sec with live WebSocket updates.</p> <div class="flex flex-wrap gap-1.5"><!--[--><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap border font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 outline-2 px-2 py-1 text-xs bg-primary text-primary-foreground"><!---->Svelte<!----><!----></span><!----><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap border font-medium transition-[color,box-shadow] focu
86s-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 outline-2 px-2 py-1 text-xs bg-primary text-primary-foreground"><!---->WebSocket<!----><!----></span><!----><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap border font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 outline-2 px-2 py-1 text-xs bg-primary text-primary-foreground"><!---->D3<!----><!----></span><!----><!--]--></div></div><div class="group relative rounded-md border-2 border-foreground bg-card p-5 transition-all hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_var(--primary)]"><div class="flex items-start justify-between mb-2"><h3 class="font-head text-lg text-foreground">Forge CLI</h3> <!--[0--><!--[0--><a data-slot="button" class="font-head rounded-md shadow-md hover:shadow-none text-center inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 bg-transparent border-transparent !shadow-none hover:border-border transition border-2 size-8 [&_svg]:size-4 shrink-0 text-muted-foreground hover:text-foreground" href="#" aria-label="View project"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-arrow-up-right"><!--[--><!----><path d="M7 7h10v10"><!----></path><!----><!----><path d="M7 17 17 7"><!----></path><!----><!--]--><!----><!----></svg><!----></a><!--]--><!--]--></div> <p class="text-sm text-muted-foreground mb-3">Project scaffolding tool generating production-ready full-stack templates.</p> <div class="flex flex-wrap gap-1.5"><!--[--><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap border font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 outline-2 px-2 py-1 text-xs bg-primary text-primary-foreground"><!---->Node.js<!----><!----></span><!----><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap border font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 outline-2 px-2 py-1 text-xs bg-primary text-primary-foreground"><!---->CLI<!----><!----></span><!----><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap border font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 outline-2 px-2 py-1 text-xs bg-primary text-primary-foreground"><!---->TypeScript<!----><!----></span><!----><!--]--></div></div><div class="group relative rounded-md border-2 border-foreground bg-card p-5 transition-all hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_var(--primary)]"><div class="flex items-start justify-between mb-2"><h3 class="font-head text-lg text-foreground">PixelForge</h3> <!--[0--><!--[0--><a data-slot="button" class="font-head rounded-md shadow-md hover:shadow-none text-center inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 bg-transparent border-transparent !shadow-none hover:border-border transition border-2 size-8 [&_svg]:size-4 shrink-0 text-muted-foreground hover:text-foreground" href="#" aria-label="View project"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-arrow-up-right"><!--[--><!----><path d="M7 7h10v10"><!----></path><!----><!----><path d="M7 17 17 7"><!----></path><!----><!--]--><!----><!----></svg><!----></a>
86<!--]--><!--]--></div> <p class="text-sm text-muted-foreground mb-3">AI-powered design-to-code pipeline converting Figma to clean Svelte components.</p> <div class="flex flex-wrap gap-1.5"><!--[--><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap border font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 outline-2 px-2 py-1 text-xs bg-primary text-primary-foreground"><!---->Python<!----><!----></span><!----><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap border font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 outline-2 px-2 py-1 text-xs bg-primary text-primary-foreground"><!---->AI<!----><!----></span><!----><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap border font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 outline-2 px-2 py-1 text-xs bg-primary text-primary-foreground"><!---->Figma<!----><!----></span><!----><!--]--></div></div><div class="group relative rounded-md border-2 border-foreground bg-card p-5 transition-all hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_var(--primary)]"><div class="flex items-start justify-between mb-2"><h3 class="font-head text-lg text-foreground">TaskFlow</h3> <!--[0--><!--[0--><a data-slot="button" class="font-head rounded-md shadow-md hover:shadow-none text-center inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 bg-transparent border-transparent !shadow-none hover:border-border transition border-2 size-8 [&_svg]:size-4 shrink-0 text-muted-foreground hover:text-foreground" href="#" aria-label="View project"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-arrow-up-right"><!--[--><!----><path d="M7 7h10v10"><!----></path><!----><!----><path d="M7 17 17 7"><!----></path><!----><!--]--><!----><!----></svg><!----></a><!--]--><!--]--></div> <p class="text-sm text-muted-foreground mb-3">Kanban-style project management board with real-time collaboration.</p> <div class="flex flex-wrap gap-1.5"><!--[--><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap border font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 outline-2 px-2 py-1 text-xs bg-primary text-primary-foreground"><!---->Svelte<!----><!----></span><!----><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap border font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 outline-2 px-2 py-1 text-xs bg-primary text-primary-foreground"><!---->Node.js<!----><!----></span><!----><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap border font-medium transition-[color,box-shadow] focu
86s-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 outline-2 px-2 py-1 text-xs bg-primary text-primary-foreground"><!---->WebSocket<!----><!----></span><!----><!--]--></div></div><div class="group relative rounded-md border-2 border-foreground bg-card p-5 transition-all hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_var(--primary)]"><div class="flex items-start justify-between mb-2"><h3 class="font-head text-lg text-foreground">DevMetrics</h3> <!--[0--><!--[0--><a data-slot="button" class="font-head rounded-md shadow-md hover:shadow-none text-center inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 bg-transparent border-transparent !shadow-none hover:border-border transition border-2 size-8 [&_svg]:size-4 shrink-0 text-muted-foreground hover:text-foreground" href="#" aria-label="View project"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-arrow-up-right"><!--[--><!----><path d="M7 7h10v10"><!----></path><!----><!----><path d="M7 17 17 7"><!----></path><!----><!--]--><!----><!----></svg><!----></a><!--]--><!--]--></div> <p class="text-sm text-muted-foreground mb-3">Developer productivity tracking dashboard with GitHub integration.</p> <div class="flex flex-wrap gap-1.5"><!--[--><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap border font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 outline-2 px-2 py-1 text-xs bg-primary text-primary-foreground"><!---->React<!----><!----></span><!----><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap border font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 outline-2 px-2 py-1 text-xs bg-primary text-primary-foreground"><!---->TypeScript<!----><!----></span><!----><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap border font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 outline-2 px-2 py-1 text-xs bg-primary text-primary-foreground"><!---->GitHub API<!----><!----></span><!----><!--]--></div></div><!--]--></div><!----></div><!--]--><!--]--><!----><!----></div><!--]--><!--]--><!----></div></section>
86 <section id="skills" class="border-b-2 border-foreground/10 py-16 md:py-24 bg-background"><div class="mx-auto max-w-6xl px-4"><div class="mb-2 flex items-center gap-3"><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap border font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 px-2.5 py-1.5 text-sm bg-green-500 text-white uppercase tracking-wide"><!---->Stack<!----><!----></span><!----><!----> <div class="h-px flex-1 bg-foreground/10"></div></div> <!----><h2 class="lg:text-4xl font-semibold mb-10 text-4xl md:text-5xl font-head uppercase"><!---->Skills & Tools<!----><!----></h2><!----><!----> <div class="grid grid-cols-2 gap-3 md:grid-cols-4"><!--[--><div class="group flex min-h-[140px] flex-col items-center justify-center gap-2 rounded-2xl border-2 border-foreground bg-card p-3 transition-all hover:-translate-y-0.5 hover:shadow-[3px_3px_0_0_var(--tool-color)]" style="--tool-color: #FF3E00;"><div class="flex size-10 items-center justify-center rounded-xl border-2 border-foreground bg-background" style="color: #FF3E00;"><!--[0--><svg class="size-6" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path d="M0 0h128v128H0z" fill="none"></path><path fill="#ff3e00" d="M110.43 16.936C98.553-.076 75.09-5.118 58.13 5.696l-29.792 19a34.2 34.2 0 0 0-15.48 22.897a25.478 30.64 0 0 0-.572 6.396a36.15 36.15 0 0 0 4.163 16.73A34.4 34.4 0 0 0 11.34 83.5a25.348 30.483 0 0 0 .345 14.412a36.5 36.5 0 0 0 5.9 13.152c11.878 17.01 35.394 22.053 52.3 11.24l29.762-19.001a34.13 34.13 0 0 0 15.438-22.918a35.5 35.5 0 0 0 .572-6.386a36.2 36.2 0 0 0-4.112-16.71a34.4 34.4 0 0 0 5.112-12.77c.369-2.11.557-4.245.562-6.386a36.4 36.4 0 0 0-6.787-21.178z"></path><path fill="#fff" d="M55.219 112.662a28.463 34.23 0 0 1-5.954.76a23.64 23.64 0 0 1-19.435-10.187a21.9 21.9 0 0 1-4.08-12.74a15.658 18.83 0 0 1 .333-3.833a15.425 18.55 0 0 1 .72-2.782l.561-1.708l1.52 1.156a38.7 38.7 0 0 0 11.658 5.834l1.104.333l-.104 1.104v.573a6.63 6.63 0 0 0 1.228 3.854a7.1 7.1 0 0 0 2.538 2.288a8.262 9.936 0 0 0 3.312.837a8.251 9.923 0 0 0 1.79-.229a7.272 8.745 0 0 0 1.833-.802l29.76-19.094a6.26 6.26 0 0 0 2.904-5.302a6.62 6.62 0 0 0-1.26-3.844a7.14 7.14 0 0 0-2.553-2.252a8.313 9.997 0 0 0-3.307-.81a8.246 9.917 0 0 0-1.79.23a6.938 8.344 0 0 0-1.822.801l-11.346 7.25a24.376 29.314 0 0 1-6.048 2.656a23.64 23.64 0 0 1-25.39-9.416a21.94 21.94 0 0 1-4.08-12.74c.002-1.285.114-2.567.333-3.833a20.65 20.65 0 0 1 9.286-13.781l29.792-18.99a21.9 21.9 0 0 1 6.048-2.667a24 24 0 0 1 5.954-.75A23.68 23.68 0 0 1 98.22 24.745a21.94 21.94 0 0 1 4.029 12.75a15.748 18.939 0 0 1-.334 3.844a15.407 18.529 0 0 1-.718 2.781l-.562 1.708l-1.52-1.114a38.4 38.4 0 0 0-11.658-5.834l-1.104-.343l.104-1.105v-.572a6.7 6.7 0 0 0-1.228-3.865a7.1 7.1 0 0 0-2.55-2.25a8.309 9.992 0 0 0-3.3-.813a8.221 9.887 0 0 0-1.77.271a6.819 8.2 0 0 0-1.831.802l-29.793 18.99a5.88 7.071 0 0 0-1.836 1.79a4.75 5.713 0 0 0-.963 2.377a5.037 6.057 0 0 0-.136 1.104a6.62 6.62 0 0 0 1.228 3.844a7.1 7.1 0 0 0 2.549 2.25a8.299 9.98 0 0 0 3.301.812a8.247 9.918 0 0 0 1.79-.23a6.943 8.35 0 0 0 1.833-.801l11.367-7.292a24.218 29.125 0 0 1 6.048-2.656a28.526 34.305 0 0 1 5.954-.76A23.66 23.66 0 0 1 96.566 60.61a21.94 21.94 0 0 1 3.737 16.614a20.6 20.6 0 0 1-9.286 13.781l-29.74 18.99a24.308 29.233 0 0 1-6.057 2.667z"></path></svg><!--]--><!----></div> <span class="font-head text-xs uppercase text-center">Svelte</span></div><div class="group flex min-h-[140px] flex-col items-center justify-center gap-2 rounded-2xl border-2 border-foreground bg-card p-3 transition-all hover:-translate-y-0.5 hover:shadow-[3px_3px_0_0_var(--tool-color)]" style="--tool-color: #3178C6;"><div class="flex size-10 items-center justify-center rounded-xl border-2 border-foreground bg-background" style="color: #3178C6;"><!--[1--><svg class="size-6" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32">
86<path d="M0 0h32v32H0z" fill="none"></path><path fill="#007acc" d="M23.827 8.243a4.4 4.4 0 0 1 2.223 1.281a6 6 0 0 1 .852 1.143c.011.045-1.534 1.083-2.471 1.662c-.034.023-.169-.124-.322-.35a2.01 2.01 0 0 0-1.67-1c-1.077-.074-1.771.49-1.766 1.433a1.3 1.3 0 0 0 .153.666c.237.49.677.784 2.059 1.383c2.544 1.095 3.636 1.817 4.31 2.843a5.16 5.16 0 0 1 .416 4.333a4.76 4.76 0 0 1-3.932 2.815a11 11 0 0 1-2.708-.028a6.53 6.53 0 0 1-3.616-1.884a6.3 6.3 0 0 1-.926-1.371a3 3 0 0 1 .327-.208c.158-.09.756-.434 1.32-.761l1.024-.6l.214.312a4.8 4.8 0 0 0 1.35 1.292a3.3 3.3 0 0 0 3.458-.175a1.545 1.545 0 0 0 .2-1.974c-.276-.395-.84-.727-2.443-1.422a8.8 8.8 0 0 1-3.349-2.055a4.7 4.7 0 0 1-.976-1.777a7.1 7.1 0 0 1-.062-2.268a4.33 4.33 0 0 1 3.644-3.374a9 9 0 0 1 2.691.084m-8.343 1.483l.011 1.454h-4.63v13.148H7.6V11.183H2.97V9.755a14 14 0 0 1 .04-1.466c.017-.023 2.832-.034 6.245-.028l6.211.017Z"></path></svg><!--]--><!----></div> <span class="font-head text-xs uppercase text-center">TypeScript</span></div><div class="group flex min-h-[140px] flex-col items-center justify-center gap-2 rounded-2xl border-2 border-foreground bg-card p-3 transition-all hover:-translate-y-0.5 hover:shadow-[3px_3px_0_0_var(--tool-color)]" style="--tool-color: #61DAFB;"><div class="flex size-10 items-center justify-center rounded-xl border-2 border-foreground bg-background" style="color: #61DAFB;"><!--[2--><svg class="size-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="2" fill="currentColor"></circle><ellipse cx="12" cy="12" rx="9" ry="3.5" stroke="currentColor" stroke-width="1.5"></ellipse><ellipse cx="12" cy="12" rx="9" ry="3.5" stroke="currentColor" stroke-width="1.5" transform="rotate(60 12 12)"></ellipse><ellipse cx="12" cy="12" rx="9" ry="3.5" stroke="currentColor" stroke-width="1.5" transform="rotate(120 12 12)"></ellipse></svg><!--]--><!----></div> <span class="font-head text-xs uppercase text-center">React</span></div><div class="group flex min-h-[140px] flex-col items-center justify-center gap-2 rounded-2xl border-2 border-foreground bg-card p-3 transition-all hover:-translate-y-0.5 hover:shadow-[3px_3px_0_0_var(--tool-color)]" style="--tool-color: #06B6D4;"><div class="flex size-10 items-center justify-center rounded-xl border-2 border-foreground bg-background" style="color: #06B6D4;"><!--[3--><svg class="size-6" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path d="M0 0h128v128H0z" fill="none"></path><path fill="#38bdf8" d="M64.004 25.602c-17.067 0-27.73 8.53-32 25.597c6.398-8.531 13.867-11.73 22.398-9.597c4.871 1.214 8.352 4.746 12.207 8.66C72.883 56.629 80.145 64 96.004 64c17.066 0 27.73-8.531 32-25.602q-9.6 12.803-22.399 9.602c-4.87-1.215-8.347-4.746-12.207-8.66c-6.27-6.367-13.53-13.738-29.394-13.738M32.004 64c-17.066 0-27.73 8.531-32 25.602Q9.603 76.799 22.402 80c4.871 1.215 8.352 4.746 12.207 8.66c6.274 6.367 13.536 13.738 29.395 13.738c17.066 0 27.73-8.53 32-25.597q-9.6 12.797-22.399 9.597c-4.87-1.214-8.347-4.746-12.207-8.66C55.128 71.371 47.868 64 32.004 64m0 0"></path></svg><!--]--><!----></div> <span class="font-head text-xs uppercase text-center">Tailwind</span></div><div class="group flex min-h-[140px] flex-col items-center justify-center gap-2 rounded-2xl border-2 border-foreground bg-card p-3 transition-all hover:-translate-y-0.5 hover:shadow-[3px_3px_0_0_var(--tool-color)]" style="--tool-color: #339933;"><div class="flex size-10 items-center justify-center rounded-xl border-2 border-foreground bg-background" style="color: #339933;"><!--[4--><svg class="size-6" xmlns="http://www.w3.org/2000/svg" width="0.89em" height="1em" viewBox="0 0 256 289"><path d="M0 0h256v289H0z" fill="none"></path><path fill="#539e43" d="M128 288.464c-3.975 0-7.685-1.06-11.13-2.915l-35.247-20.936c-5.3-2.915-2.65-3.975-1.06-4.505c7.155-2.385 8.48-2.915 15.9-7.156c.796-.53 1.856-.265 2.65.265l27.032 16.166c1.06.53 2.385.53 3.18 0l105.74-61.217c1.06-.53 1.59-1.59 1.59-2.915V83.08c0-1.325-.53-2.385-1.59-2.915l-105.74-60.953c-1.06-.53-2.385-.53-3.18 0L20.405 80.166c-1.06.53-1.59 1.855-1.59 2.915v122.17c0 1.06.53 2.385 1.59 2.915l28.887 16.695c15.636 7.95 25.44-1.325 25.44-10.6V93.68c0-1.59 1.326-3.18 3.181-3.18h13.516c1.59 0 3.18 1.325 3.18 3.18v12
860.58c0 20.936-11.396 33.126-31.272 33.126c-6.095 0-10.865 0-24.38-6.625l-27.827-15.9C4.24 220.885 0 213.465 0 205.515V83.346C0 75.396 4.24 67.976 11.13 64L116.87 2.783c6.625-3.71 15.635-3.71 22.26 0L244.87 64C251.76 67.975 256 75.395 256 83.346v122.17c0 7.95-4.24 15.37-11.13 19.345L139.13 286.08c-3.445 1.59-7.42 2.385-11.13 2.385m32.596-84.009c-46.377 0-55.917-21.2-55.917-39.221c0-1.59 1.325-3.18 3.18-3.18h13.78c1.59 0 2.916 1.06 2.916 2.65c2.12 14.045 8.215 20.936 36.306 20.936c22.261 0 31.802-5.035 31.802-16.96c0-6.891-2.65-11.926-37.367-15.372c-28.886-2.915-46.907-9.275-46.907-32.33c0-21.467 18.02-34.187 48.232-34.187c33.921 0 50.617 11.66 52.737 37.101q0 1.193-.795 2.385c-.53.53-1.325 1.06-2.12 1.06h-13.78c-1.326 0-2.65-1.06-2.916-2.385c-3.18-14.575-11.395-19.345-33.126-19.345c-24.38 0-27.296 8.48-27.296 14.84c0 7.686 3.445 10.07 36.306 14.31c32.597 4.24 47.967 10.336 47.967 33.127c-.265 23.321-19.345 36.571-53.002 36.571"></path></svg><!--]--><!----></div> <span class="font-head text-xs uppercase text-center">Node.js</span></div><div class="group flex min-h-[140px] flex-col items-center justify-center gap-2 rounded-2xl border-2 border-foreground bg-card p-3 transition-all hover:-translate-y-0.5 hover:shadow-[3px_3px_0_0_var(--tool-color)]" style="--tool-color: #3776AB;"><div class="flex size-10 items-center justify-center rounded-xl border-2 border-foreground bg-background" style="color: #3776AB;"><!--[5--><svg class="size-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2c-2.5 0-4.5 1-4.5 2.5v2h5v1h-7C4 7.5 3 9.5 3 12s1 4.5 2.5 4.5h1.5v-2.5c0-1.5 1.5-3 3.5-3h4.5c1.5 0 2.5-1 2.5-2.5V4.5C17 3 15 2 12 2zm-2 2c.8 0 1.5.7 1.5 1.5S10.8 7 10 7s-1.5-.7-1.5-1.5S9.2 4 10 4z" fill="currentColor"></path><path d="M12 22c2.5 0 4.5-1 4.5-2.5v-2h-5v-1h7c1.5 0 2.5-2 2.5-4.5s-1-4.5-2.5-4.5h-1.5v2.5c0 1.5-1.5 3-3.5 3H9C7.5 13 6.5 14 6.5 15.5v4C6.5 21 8.5 22 12 22zm2-2c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5 1.5.7 1.5 1.5-.7 1.5-1.5 1.5z" fill="currentColor"></path></svg><!--]--><!----></div> <span class="font-head text-xs uppercase text-center">Python</span></div><div class="group flex min-h-[140px] flex-col items-center justify-center gap-2 rounded-2xl border-2 border-foreground bg-card p-3 transition-all hover:-translate-y-0.5 hover:shadow-[3px_3px_0_0_var(--tool-color)]" style="--tool-color: #4169E1;"><div class="flex size-10 items-center justify-center rounded-xl border-2 border-foreground bg-background" style="color: #4169E1;"><!--[6--><svg class="size-6" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 128 128"><path d="M0 0h128v128H0z" fill="none"></path><path d="M93.809 92.112c.785-6.533.55-7.492 5.416-6.433l1.235.108c3.742.17 8.637-.602 11.513-1.938c6.191-2.873 9.861-7.668 3.758-6.409c-13.924 2.873-14.881-1.842-14.881-1.842c14.703-21.815 20.849-49.508 15.543-56.287c-14.47-18.489-39.517-9.746-39.936-9.52l-.134.025c-2.751-.571-5.83-.912-9.289-.968c-6.301-.104-11.082 1.652-14.709 4.402c0 0-44.683-18.409-42.604 23.151c.442 8.841 12.672 66.898 27.26 49.362c5.332-6.412 10.484-11.834 10.484-11.834c2.558 1.699 5.622 2.567 8.834 2.255l.249-.212c-.078.796-.044 1.575.099 2.497c-3.757 4.199-2.653 4.936-10.166 6.482c-7.602 1.566-3.136 4.355-.221 5.084c3.535.884 11.712 2.136 17.238-5.598l-.22.882c1.474 1.18 1.375 8.477 1.583 13.69c.209 5.214.558 10.079 1.621 12.948s2.317 10.256 12.191 8.14c8.252-1.764 14.561-4.309 15.136-27.985"></path><path d="M75.458 125.256c-4.367 0-7.211-1.689-8.938-3.32c-2.607-2.46-3.641-5.629-4.259-7.522l-.267-.79c-1.244-3.358-1.666-8.193-1.916-14.419c-.038-.935-.064-1.898-.093-2.919c-.021-.747-.047-1.684-.085-2.664a18.8 18.8 0 0 1-4.962 1.568c-3.079.526-6.389.356-9.84-.507c-2.435-.609-4.965-1.871-6.407-3.82c-4.203 3.681-8.212 3.182-10.396 2.453c-3.853-1.285-7.301-4.896-10.542-11.037c-2.309-4.375-4.542-10.075-6.638-16.943c-3.65-11.96-5.969-24.557-6.175-28.693C4.292 23.698 7.777 14.44 15.296 9.129C27.157.751 45.128 5.678 51.68 7.915c4.402-2.653 9.581-3.944 15.433-3.851c3.143.051 6.136.327 8.916.823c2.9-.912 8.628-2.221 15.185-2.139c12.081.144 22.092 4.852 28.949 13.615c4.894 6.252 2.474 19.381.597 26.651c-2.642 10.226-7.271 21.102-12.957 30.57c1.544.011 3.781-.174 6.961-.831c6.274-1.295 8.109 2.069 8.607 3.575c1.995 6.042
86-6.677 10.608-9.382 11.864c-3.466 1.609-9.117 2.589-13.745 2.377l-.202-.013l-1.216-.107l-.12 1.014l-.116.991c-.311 11.999-2.025 19.598-5.552 24.619c-3.697 5.264-8.835 6.739-13.361 7.709c-1.544.33-2.947.474-4.219.474m-9.19-43.671c2.819 2.256 3.066 6.501 3.287 14.434c.028.99.054 1.927.089 2.802c.106 2.65.355 8.855 1.327 11.477c.137.371.26.747.39 1.146c1.083 3.316 1.626 4.979 6.309 3.978c3.931-.843 5.952-1.599 7.534-3.851c2.299-3.274 3.585-9.86 3.821-19.575l4.783.116l-4.75-.57l.14-1.186c.455-3.91.783-6.734 3.396-8.602c2.097-1.498 4.486-1.353 6.389-1.01c-2.091-1.58-2.669-3.433-2.823-4.193l-.399-1.965l1.121-1.663c6.457-9.58 11.781-21.354 14.609-32.304c2.906-11.251 2.02-17.226 1.134-18.356c-11.729-14.987-32.068-8.799-34.192-8.097l-.359.194l-1.8.335l-.922-.191c-2.542-.528-5.366-.82-8.393-.869c-4.756-.08-8.593 1.044-11.739 3.431l-2.183 1.655l-2.533-1.043c-5.412-2.213-21.308-6.662-29.696-.721c-4.656 3.298-6.777 9.76-6.305 19.207c.156 3.119 2.275 14.926 5.771 26.377c4.831 15.825 9.221 21.082 11.054 21.693c.32.108 1.15-.537 1.976-1.529a271 271 0 0 1 10.694-12.07l2.77-2.915l3.349 2.225c1.35.897 2.839 1.406 4.368 1.502l7.987-6.812l-1.157 11.808c-.026.265-.039.626.065 1.296l.348 2.238l-1.51 1.688l-.174.196l4.388 2.025z"></path><path fill="#336791" d="M115.731 77.44c-13.925 2.873-14.882-1.842-14.882-1.842c14.703-21.816 20.849-49.51 15.545-56.287C101.924.823 76.875 9.566 76.457 9.793l-.135.024c-2.751-.571-5.83-.911-9.291-.967c-6.301-.103-11.08 1.652-14.707 4.402c0 0-44.684-18.408-42.606 23.151c.442 8.842 12.672 66.899 27.26 49.363c5.332-6.412 10.483-11.834 10.483-11.834c2.559 1.699 5.622 2.567 8.833 2.255l.25-.212c-.078.796-.042 1.575.1 2.497c-3.758 4.199-2.654 4.936-10.167 6.482c-7.602 1.566-3.136 4.355-.22 5.084c3.534.884 11.712 2.136 17.237-5.598l-.221.882c1.473 1.18 2.507 7.672 2.334 13.557s-.29 9.926.871 13.082c1.16 3.156 2.316 10.256 12.192 8.14c8.252-1.768 12.528-6.351 13.124-13.995c.422-5.435 1.377-4.631 1.438-9.49l.767-2.3c.884-7.367.14-9.743 5.225-8.638l1.235.108c3.742.17 8.639-.602 11.514-1.938c6.19-2.871 9.861-7.667 3.758-6.408"></path><path fill="#fff" d="M75.957 122.307c-8.232 0-10.84-6.519-11.907-9.185c-1.562-3.907-1.899-19.069-1.551-31.503a1.59 1.59 0 0 1 1.64-1.55a1.594 1.594 0 0 1 1.55 1.639c-.401 14.341.168 27.337 1.324 30.229c1.804 4.509 4.54 8.453 12.275 6.796c7.343-1.575 10.093-4.359 11.318-11.46c.94-5.449 2.799-20.951 3.028-24.01a1.593 1.593 0 0 1 1.71-1.472a1.597 1.597 0 0 1 1.472 1.71c-.239 3.185-2.089 18.657-3.065 24.315c-1.446 8.387-5.185 12.191-13.794 14.037c-1.463.313-2.792.453-4 .454M31.321 90.466a6.7 6.7 0 0 1-2.116-.35c-5.347-1.784-10.44-10.492-15.138-25.885c-3.576-11.717-5.842-23.947-6.041-27.922c-.589-11.784 2.445-20.121 9.02-24.778c13.007-9.216 34.888-.44 35.813-.062a1.596 1.596 0 0 1-1.207 2.955c-.211-.086-21.193-8.492-32.768-.285c-5.622 3.986-8.203 11.392-7.672 22.011c.167 3.349 2.284 15.285 5.906 27.149c4.194 13.742 8.967 22.413 13.096 23.79c.648.216 2.62.873 5.439-2.517A245 245 0 0 1 45.88 73.046a1.596 1.596 0 0 1 2.304 2.208c-.048.05-4.847 5.067-10.077 11.359c-2.477 2.979-4.851 3.853-6.786 3.853m69.429-13.445a1.596 1.596 0 0 1-1.322-2.487c14.863-22.055 20.08-48.704 15.612-54.414c-5.624-7.186-13.565-10.939-23.604-11.156c-7.433-.16-13.341 1.738-14.307 2.069l-.243.099c-.971.305-1.716-.227-1.997-.849a1.6 1.6 0 0 1 .631-2.025c.046-.027.192-.089.429-.176l-.021.006l.021-.007c1.641-.601 7.639-2.4 15.068-2.315c11.108.118 20.284 4.401 26.534 12.388c2.957 3.779 2.964 12.485.019 23.887c-3.002 11.625-8.651 24.118-15.497 34.277c-.306.457-.81.703-1.323.703m.76 10.21c-2.538 0-4.813-.358-6.175-1.174c-1.4-.839-1.667-1.979-1.702-2.584c-.382-6.71 3.32-7.878 5.208-8.411c-.263-.398-.637-.866-1.024-1.349c-1.101-1.376-2.609-3.26-3.771-6.078c-.182-.44-.752-1.463-1.412-2.648c-3.579-6.418-11.026-19.773-6.242-26.612c2.214-3.165 6.623-4.411 13.119-3.716C97.6 28.837 88.5 10.625 66.907 10.271c-6.494-.108-11.82 1.889-15.822 5.93c-8.96 9.049-8.636 25.422-8.631 25.586a1.595 1.595 0 1 1-3.19.084c-.02-.727-.354-17.909 9.554-27.916C53.455 9.272 59.559 6.96 66.96 7.081c13.814.227 22.706 7.25 27.732 13.101c5.479 6.377 8.165 13.411 8.386 15.759c.165 1.746-1.088 2.095-1.341 2.147l-.576.013c-6.375-1.021-10.465-.312-12.156 2.104c-3.639 5.201 3.406 17.834 6.414 23.229c.768 1.376 1.322 2.371 1.576 2.985c.988 2.396 2.277 4.006 3.312 5.3c.911 1.138 1.7 2.125 1.982 3.283c.131.23 1.99 2.98 13.021.703c2.765-.57 4.423-.083 4.93 1.45c.997 3.015-4.597 6.532-7.694 7.97c-2.775 1.29-7.204 2.106-11.036 2.106m-4.696-4.021c.35.353 2.101.962 5.727.806c3.224-.138 6.624-.839 8.664-1.786c2.609-1.212 4.351-2.567 5.253-3.492l-.5.092c-7.053 1.456-12.042 1.262-14.828-.577a6 6 0 0 1-.54-.401c-.302.119-.581.197-.78.253c-1.58.443-3.214.902-2.996 5.105m-45.562 8.915c-1.752 0-3.596-.239-5.479-.71c-1.951-.488-5.24-1.957-5.19-4.37c.057-2.707 3.994-3.519 5.476-3.824c5.354-1.103 5.703-1.545 7.376-3.67c.488-.619 1.095-1.39 1.923-2.314c1.229-1.376 2.572-2.073 3.992-2.073c.989 0 1.8.335 2.336.558c1.708.708 3.133 2.42 3.719 4.467c.529 1.847.276 3.625-.71 5.006c-3.237 4.533-7.886 6.93-13.443 6.93m-7.222-4.943c.481.372 1.445.869 2.518 1.137c1.631.408 3.213.615 4.705.615c4.546 0 8.196-1.882 10.847-5.594c.553-.774.387-1.757.239-2.274c-.31-1.083-1.08-2.068-1.873-2.397c-.43-.178-.787-.314-1.115-.314c-.176 0-.712 0-1.614 1.009a41 41 0 0 0-1.794 2.162c-2.084 2.646-3.039 3.544-9.239 4.821c-1.513.31-2.289.62
866-2.674.835m12.269-7.36a1.596 1.596 0 0 1-1.575-1.354a8 8 0 0 1-.08-.799c-4.064-.076-7.985-1.82-10.962-4.926c-3.764-3.927-5.477-9.368-4.699-14.927c.845-6.037.529-11.366.359-14.229c-.047-.796-.081-1.371-.079-1.769c.003-.505.013-1.844 4.489-4.113c1.592-.807 4.784-2.215 8.271-2.576c5.777-.597 9.585 1.976 10.725 7.246c3.077 14.228.244 20.521-1.825 25.117c-.385.856-.749 1.664-1.04 2.447l-.257.69c-1.093 2.931-2.038 5.463-1.748 7.354a1.595 1.595 0 0 1-1.335 1.819zM42.464 42.26l.062 1.139c.176 2.974.504 8.508-.384 14.86c-.641 4.585.759 9.06 3.843 12.276c2.437 2.542 5.644 3.945 8.94 3.945h.068c.369-1.555.982-3.197 1.642-4.966l.255-.686c.329-.884.714-1.74 1.122-2.646c1.991-4.424 4.47-9.931 1.615-23.132c-.565-2.615-1.936-4.128-4.189-4.627c-4.628-1.022-11.525 2.459-12.974 3.837m9.63-.677c-.08.564 1.033 2.07 2.485 2.271c1.449.203 2.689-.975 2.768-1.539s-1.033-1.186-2.485-1.388s-2.691.092-2.768.656m2.818 2.826l-.407-.028c-.9-.125-1.81-.692-2.433-1.518c-.219-.29-.576-.852-.505-1.354c.101-.736.999-1.177 2.4-1.177c.313 0 .639.023.967.069c.766.106 1.477.327 2.002.62c.91.508.977 1.075.936 1.368c-.112.813-1.405 2.02-2.96 2.02m-2.289-2.732c.045.348.907 1.496 2.029 1.651l.261.018c1.036 0 1.81-.815 1.901-1.082c-.096-.182-.762-.634-2.025-.81a6 6 0 0 0-.821-.059c-.812 0-1.243.183-1.345.282m43.605-1.245c.079.564-1.033 2.07-2.484 2.272c-1.45.202-2.691-.975-2.771-1.539c-.076-.564 1.036-1.187 2.486-1.388c1.45-.203 2.689.092 2.769.655m-2.819 2.56c-1.396 0-2.601-1.086-2.7-1.791c-.115-.846 1.278-1.489 2.712-1.688c.316-.044.629-.066.93-.066c1.238 0 2.058.363 2.14.949c.053.379-.238.964-.739 1.492c-.331.347-1.026.948-1.973 1.079zm.943-3.013q-.416 0-.856.061c-1.441.201-2.301.779-2.259 1.089c.048.341.968 1.332 2.173 1.332l.297-.021c.787-.109 1.378-.623 1.66-.919c.443-.465.619-.903.598-1.052c-.028-.198-.56-.49-1.613-.49m3.965 32.843a1.594 1.594 0 0 1-1.324-2.483c3.398-5.075 2.776-10.25 2.175-15.255c-.257-2.132-.521-4.337-.453-6.453c.07-2.177.347-3.973.614-5.71c.317-2.058.617-4.002.493-6.31a1.595 1.595 0 1 1 3.186-.172c.142 2.638-.197 4.838-.525 6.967c-.253 1.643-.515 3.342-.578 5.327c-.061 1.874.178 3.864.431 5.97c.64 5.322 1.365 11.354-2.691 17.411a1.6 1.6 0 0 1-1.328.708"></path></svg><!--]--><!----></div> <span class="font-head text-xs uppercase text-center">PostgreSQL</span></div><div class="group flex min-h-[140px] flex-col items-center justify-center gap-2 rounded-2xl border-2 border-foreground bg-card p-3 transition-all hover:-translate-y-0.5 hover:shadow-[3px_3px_0_0_var(--tool-color)]" style="--tool-color: #2496ED;"><div class="flex size-10 items-center justify-center rounded-xl border-2 border-foreground bg-background" style="color: #2496ED;"><!--[7--><svg class="size-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 14h12c0 3-2 5-5 5H7c-2 0-3-2-3-5z" fill="currentColor"></path><path d="M4 10h2v2H4zm3 0h2v2H7zm3 0h2v2h-2zm3 0h2v2h-2zm3 0h2v2h-2M7 7h2v2H7zm3 0h2v2h-2zm3 0h2v2h-2zm3 0h2v2h-2" fill="currentColor"></path><path d="M19 9c0-2-1.5-3-3-3v2c1 0 1.5.5 1.5 1.5H19z" fill="currentColor"></path></svg><!--]--><!----></div> <span class="font-head text-xs uppercase text-center">Docker</span></div><div class="group flex min-h-[140px] flex-col items-center justify-center gap-2 rounded-2xl border-2 border-foreground bg-card p-3 transition-all hover:-translate-y-0.5 hover:shadow-[3px_3px_0_0_var(--tool-color)]" style="--tool-color: #FF9900;"><div class="flex size-10 items-center justify-center rounded-xl border-2 border-foreground bg-background" style="color: #FF9900;"><!--[8--><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path d="M0 0h32v32H0z" fill="none"></path><path fill="#9d5125" d="M30 19.152v1.273c0 2.307-2.545 4.693-5.648 4.693H7.648C4.506 25.118 2 22.771 2 20.424v-1.272Z"></path><path fill="#f58535" d="M12.778 6.782A7.11 7.11 0 0 1 19.3 11a3.64 3.64 0 0 1 2.068-.636a3.583 3.583 0 0 1 3.619 3.5A5.69 5.69 0 0 1 3
860 18.993v.477c0 2.347-2.545 4.693-5.688 4.693H7.648C4.506 24.163 2 21.816 2 19.47v-.477a5.53 5.53 0 0 1 3.619-4.853v-.2a7.13 7.13 0 0 1 7.159-7.158"></path><path fill="#fff" d="m9 15.095l-1.869 6.523h1.113l.438-1.591h1.909l.4 1.591H12.1l-1.75-6.523Zm-.159 4.1l.8-3.222l.756 3.222Zm7.954 1.031h-.039l-.875-5.131h-1.114l-.835 5.091h-.04l-.875-5.091h-1.034l1.273 6.562h1.193l.835-4.931h.04l.835 4.931h1.233l1.313-6.562h-1.074zm5.29-2.148l-.716-.239c-.716-.278-.994-.6-.994-1.153a.9.9 0 1 1 1.79 0v.119H23.2v-.159c0-.676-.159-1.71-1.869-1.71a1.8 1.8 0 0 0-2.031 1.869a1.73 1.73 0 0 0 1.392 1.79l.716.239a1.1 1.1 0 0 1 .955 1.153a.93.93 0 0 1-.994.955q-1.074 0-1.074-1.193v-.159h-1.034v.159a1.786 1.786 0 0 0 1.989 1.989c1.312 0 2.187-.557 2.187-1.949a1.73 1.73 0 0 0-1.352-1.711"></path></svg><!--]--><!----></div> <span class="font-head text-xs uppercase text-center">AWS</span></div><div class="group flex min-h-[140px] flex-col items-center justify-center gap-2 rounded-2xl border-2 border-foreground bg-card p-3 transition-all hover:-translate-y-0.5 hover:shadow-[3px_3px_0_0_var(--tool-color)]" style="--tool-color: #E10098;"><div class="flex size-10 items-center justify-center rounded-xl border-2 border-foreground bg-background" style="color: #E10098;"><!--[9--><svg class="size-6" xmlns="http://www.w3.org/2000/svg" width="0.89em" height="1em" viewBox="0 0 256 288"><path d="M0 0h256v288H0z" fill="none"></path><path fill="#e535ab" fill-rule="evenodd" d="m152.576 32.963l59.146 34.15a25.8 25.8 0 0 1 5.818-4.604c12.266-7.052 27.912-2.865 35.037 9.402c7.052 12.267 2.865 27.912-9.402 35.037a25.7 25.7 0 0 1-6.831 2.72v68.325a25.7 25.7 0 0 1 6.758 2.702c12.34 7.125 16.527 22.771 9.402 35.038c-7.052 12.266-22.771 16.453-35.038 9.402a25.5 25.5 0 0 1-6.34-5.147l-58.786 33.94a25.7 25.7 0 0 1 1.295 8.08c0 14.103-11.458 25.636-25.635 25.636s-25.635-11.46-25.635-25.636c0-2.52.362-4.954 1.037-7.253l-59.13-34.14a25.8 25.8 0 0 1-5.738 4.52c-12.34 7.051-27.986 2.864-35.038-9.402c-7.051-12.267-2.864-27.913 9.402-35.038a25.7 25.7 0 0 1 6.758-2.703v-68.324a25.7 25.7 0 0 1-6.831-2.72C.558 99.897-3.629 84.178 3.423 71.911s22.77-16.454 35.037-9.402a25.8 25.8 0 0 1 5.79 4.575l59.163-34.159a25.7 25.7 0 0 1-1.048-7.29C102.365 11.46 113.823 0 128 0s25.635 11.459 25.635 25.635c0 2.548-.37 5.007-1.059 7.328m-6.162 10.522l59.287 34.23a25.6 25.6 0 0 0 2.437 19.831c3.609 6.278 9.488 10.44 16.013 12.062v68.41q-.5.122-.993.264L145.725 44.17q.351-.336.689-.684m-36.123.7l-77.432 134.11a26 26 0 0 0-1.01-.27v-68.417c6.525-1.622 12.404-5.784 16.013-12.062a25.6 25.6 0 0 0 2.427-19.869l59.27-34.22q.359.371.732.727m24.872 6.075l77.414 134.08a25.5 25.5 0 0 0-4.513 5.757a25.7 25.7 0 0 0-2.702 6.758H50.64a25.7 25.7 0 0 0-2.704-6.758a25.8 25.8 0 0 0-4.506-5.724l77.429-134.107A25.7 25.7 0 0 0 128 51.27c2.487 0 4.89-.352 7.163-1.01m11.795 194.478l58.902-34.008a26 26 0 0 1-.473-1.682H50.607q-.123.499-.266.992l59.19 34.175A25.56 25.56 0 0 1 128 236.373a25.56 25.56 0 0 1 18.958 8.365"></path></svg><!--]--><!----></div> <span class="font-head text-xs uppercase text-center">GraphQL</span></div><div class="group flex min-h-[140px] flex-col items-center justify-center gap-2 rounded-2xl border-2 border-foreground bg-card p-3 transition-all hover:-translate-y-0.5 hover:shadow-[3px_3px_0_0_var(--tool-color)]" style="--tool-color: #22C55E;"><div class="flex size-10 items-center justify-center rounded-xl border-2 border-foreground bg-background" style="color: #22C55E;"><!--[10--><svg class="size-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="8" stroke="currentColor" stroke-width="1.5"></circle><path d="M12 6v6l4 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path><circle cx="12" cy="12" r="2" fill="currentColor"></circle></svg><!--]--><!----></div> <span class="font-head text-xs uppercase text-center">CI/CD</span></div><div class="group flex min-h-[140px] flex-col items-center justify-center gap-2 rounded-2xl border-2 border-foreground bg-card p-3 transition-all hover:-translate-y-0.5 hover:shadow-[3px_3px_0_0_var(--tool-color)]" style="--tool-color: #FFFFFF;"><div class="flex size-10 items-center justify-center rounded-xl border-2 border-foreground bg-background" style="color: #FFFFFF;"><!--[11-->
86<svg class="size-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="3" y="3" width="18" height="18" rx="2" fill="currentColor"></rect><path d="M8.5 8v8h1.5v-5l4 5h1.5V8h-1.5v5l-4-5H8.5z" fill="#18181b"></path></svg><!--]--><!----></div> <span class="font-head text-xs uppercase text-center">Next.js</span></div><!--]--></div></div></section> <section id="process" class="border-b-2 border-foreground/10 py-16 md:py-24 bg-card/30"><div class="mx-auto max-w-6xl px-4"><div class="text-center mb-12"><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap border font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 px-2.5 py-1.5 text-sm bg-primary text-primary-foreground uppercase tracking-wide mb-4"><!---->How It Works<!----><!----></span><!----><!----> <!----><h2 class="lg:text-4xl font-semibold text-4xl md:text-5xl font-head uppercase mb-3"><!---->From Idea To Launch<!----><!----></h2><!----><!----> <!----><h3 class="font-medium text-2xl md:text-3xl font-head uppercase text-primary"><!---->In Weeks<!----><!----></h3><!----><!----> <p class="mt-4 max-w-lg mx-auto font-sans text-muted-foreground">Three simple steps to transform your idea into a shipped product.</p></div> <div class="grid gap-10 lg:grid-cols-2 items-center"><div class="relative pl-10"><div class="absolute left-[19px] top-4 bottom-4 w-0.5 bg-foreground
86/20"></div> <!--[--><div class="relative pb-10 last:pb-0"><div class="absolute -left-10 top-0 z-10 flex size-10 items-center justify-center border-2 border-foreground shadow-[2px_2px_0_0_var(--foreground)] bg-cyan-500"><!--[--><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-link-2 size-5 text-white"><!--[--><!----><path d="M9 17H7A5 5 0 0 1 7 7h2"><!----></path><!----><!----><path d="M15 7h2a5 5 0 1 1 0 10h-2"><!----></path><!----><!----><line x1="8" x2="16" y1="12" y2="12"><!----></line><!----><!--]--><!----><!----></svg><!--]--></div> <div class="pl-12"><span class="font-mono text-xs font-medium uppercase text-cyan-400">Step 01</span> <h3 class="font-head text-lg uppercase mt-0.5 mb-1">Discovery</h3> <p class="text-sm text-muted-foreground leading-relaxed">We dive into your goals, users, and constraints. I ask the right questions so we build the right thing from day one.</p></div></div><div class="relative pb-10 last:pb-0"><div class="absolute -left-10 top-0 z-10 flex size-10 items-center justify-center border-2 border-foreground shadow-[2px_2px_0_0_var(--foreground)] bg-primary"><!--[--><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-activity size-5 text-white"><!--[--><!----><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"><!----></path><!----><!--]--><!----><!----></svg><!--]--></div> <div class="pl-12"><span class="font-mono text-xs font-medium uppercase text-primary">Step 02</span> <h3 class="font-head text-lg uppercase mt-0.5 mb-1">Build & Iterate</h3> <p class="text-sm text-muted-foreground leading-relaxed">I ship working increments weekly. You get real progress, not mockups, and we refine together every step of the way.</p></div></div><div class="relative pb-10 last:pb-0"><div class="absolute -left-10 top-0 z-10 flex size-10 items-center justify-center border-2 border-foreground shadow-[2px_2px_0_0_var(--foreground)] bg-green-500"><!--[--><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-rocket size-5 text-white"><!--[--><!----><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"><!----></path><!----><!----><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"><!----></path><!----><!----><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"><!----></path><!----><!----><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"><!----></path><!----><!--]--><!----><!----></svg><!--]--></div> <div class="pl-12"><span class="font-mono text-xs font-medium uppercase text-green-400">Step 03</span> <h3 class="font-head text-lg uppercase mt-0.5 mb-1">Launch & Scale</h3> <p class="text-sm text-muted-foreground leading-relaxed">From deployment to monitoring, I make sure the product is production-ready and your team can own it.</p></div></div><!--]--></div> <div class="relative flex items-center justify-center min-h-[280px]"><div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64"><div class="absolute inset-0 rounded-t-full border-[16px] border-foreground"></div> <div class="absolute inset-4 rounded-t-full border-[16px] border-primary"></div> <div class="absolute inset-8 rounded-t-full border-[16px] border-cyan-400"></div> <div class="absolute inset-12 rounded-t-full border-[16px] border-rose-500"></div></div> <div class="absolute bottom-0 left-1/2 -translate-x-1/2 flex flex-col-reverse items-center"><!--[--><div class="h-3 w-16 border-2 border-foreground bg-card -mt-0.5" style="width: 64px;"></div><div class="h-3 w-16 border-2 border-foreground bg-card -mt-0.5" style="width: 80px;"></div><div class="h-3 w-16 border-2 border-foreground bg-card -mt-0.5" style="width: 96px;"></div><div class="h-3 w-16 border-2 border-foreground bg-card -mt-0.5" style="width: 112px;"></div><div class="h-3 w-16 border-2 border-foreground bg-card -mt-0.5" style="width: 128px;"></div><div class="h-3 w-16 border-2 border-foreground bg-card -mt-0.5" style="width: 144px;"></div><!--]--></div> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-sparkles absolute bottom-4 right-1/4 size-6 text-primary"><!--[--><!----><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594
861.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"><!----></path><!----><!----><path d="M20 2v4"><!----></path><!----><!----><path d="M22 4h-4"><!----></path><!----><!----><circle cx="4" cy="20" r="2"><!----></circle><!----><!--]--><!----><!----></svg><!----> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-sparkles absolute top-8 right-8 size-4 text-cyan-400"><!--[--><!----><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"><!----></path><!----><!----><path d="M20 2v4"><!----></path><!----><!----><path d="M22 4h-4"><!----></path><!----><!----><circle cx="4" cy="20" r="2"><!----></circle><!----><!--]--><!----><!----></svg><!----></div></div></div></section>
86 <section class="border-b-2 border-foreground/10 py-16 md:py-24 bg-background"><div class="mx-auto max-w-6xl px-4"><div class="text-center mb-12"><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap border font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 px-2.5 py-1.5 text-sm bg-green-500 text-white uppercase tracking-wide mb-4"><!---->Testimonials<!----><!----></span><!----><!----> <!----><h2 class="lg:text-4xl font-semibold text-4xl md:text-5xl font-head uppercase mb-1"><!---->Loved By <span class="text-green-400">Clients</span><!----><!----></h2><!----><!----> <!----><h2 class="lg:text-4xl font-semibold text-4xl md:text-5xl font-head uppercase"><!---->Worldwide<!----><!----></h2><!----><!----></div> <div class="grid gap-6 md:grid-cols-3"><!--[--><div class="relative h-full"><div class="relative h-full rounded-md border-2 border-foreground bg-card p-6"><div class="mb-4 flex items-center gap-3"><img src="https://i.pravatar.cc/150?u=sarah.chen" alt="Sarah Chen" class="size-12 rounded-full border-2 border-foreground object-cover"/></div> <p class="mb-5 text-sm leading-relaxed text-muted-foreground">"Alex delivered a design system that cut our UI development time in half. The components are beautiful and the DX is outstanding."</p> <div class="mb-4 flex gap-0.5"><!--[--><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-star size-4 fill-current text-primary"><!--[--><!----><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"><!----></path><!----><!--]--><!----><!----></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-star size-4 fill-current text-primary"><!--[--><!----><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"><!----></path><!----><!--]--><!----><!----></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-star size-4 fill-current text-primary"><!--[--><!----><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"><!----></path><!----><!--]--><!----><!----></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-star size-4 fill-current text-primary"><!--[--><!----><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"><!----></path><!----><!--]--><!----><!----></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-star size-4 fill-current text-primary"><!--[--><!----><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"><!----></path><!----><!--]--><!----><!----></svg><!--]--></div> <div><span class="block font-head text-sm text-foreground">Sarah Chen</span> <span class="block font-sans text-xs text-muted-foreground">CTO, TechCorp</span></div></div></div><div class="relative h-full"><div class="relative h-full rounded-md border-2 border-foreground bg-card p-6"><div class="mb-4 flex items-center gap-3"><img src="https://i.pravatar.cc/150?u=Marcus Rivera" alt="Marcus Rivera" class="size-12 rounded-full border-2 border-foreground object-cover"/>
86</div> <p class="mb-5 text-sm leading-relaxed text-muted-foreground">"Clear communication, on-time delivery, and the final product exceeded every expectation. Alex is a true partner."</p> <div class="mb-4 flex gap-0.5"><!--[--><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-star size-4 fill-current text-cyan-400"><!--[--><!----><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"><!----></path><!----><!--]--><!----><!----></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-star size-4 fill-current text-cyan-400"><!--[--><!----><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"><!----></path><!----><!--]--><!----><!----></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-star size-4 fill-current text-cyan-400"><!--[--><!----><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"><!----></path><!----><!--]--><!----><!----></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-star size-4 fill-current text-cyan-400"><!--[--><!----><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"><!----></path><!----><!--]--><!----><!----></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-star size-4 fill-current text-cyan-400"><!--[--><!----><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"><!----></path><!----><!--]--><!----><!----></svg><!--]--></div> <div><span class="block font-head text-sm text-foreground">Marcus Rivera</span> <span class="block font-sans text-xs text-muted-foreground">Product Lead, Startup Inc</span></div></div></div><div class="relative h-full"><div class="relative h-full rounded-md border-2 border-foreground bg-card p-6"><div class="mb-4 flex items-center gap-3"><img src="https://i.pravatar.cc/150?u=Priya Patel" alt="Priya Patel" class="size-12 rounded-full border-2 border-foreground object-cover"/>
86</div> <p class="mb-5 text-sm leading-relaxed text-muted-foreground">"I've worked with many developers, but Alex stands out for attention to detail and genuine care about the product."</p> <div class="mb-4 flex gap-0.5"><!--[--><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-star size-4 fill-current text-rose-500"><!--[--><!----><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"><!----></path><!----><!--]--><!----><!----></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-star size-4 fill-current text-rose-500"><!--[--><!----><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"><!----></path><!----><!--]--><!----><!----></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-star size-4 fill-current text-rose-500"><!--[--><!----><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"><!----></path><!----><!--]--><!----><!----></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-star size-4 fill-current text-rose-500"><!--[--><!----><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"><!----></path><!----><!--]--><!----><!----></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-star size-4 fill-current text-rose-500"><!--[--><!----><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"><!----></path><!----><!--]--><!----><!----></svg><!--]--></div> <div><span class="block font-head text-sm text-foreground">Priya Patel</span> <span class="block font-sans text-xs text-muted-foreground">Founder, InnoLabs</span></div></div></div><!--]--></div></div></section>
86 <section id="experience" class="border-b-2 border-foreground/10 py-16 md:py-24 bg-card/30"><div class="mx-auto max-w-4xl px-4"><div class="mb-10 flex items-center gap-3"><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap border font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 px-2.5 py-1.5 text-sm bg-cyan-500 text-white uppercase tracking-wide"><!---->Experience<!----><!----></span><!----><!----> <div class="h-px flex-1 bg-foreground/10"></div></div> <!----><h2 class="lg:text-4xl font-semibold mb-10 text-4xl md:text-5xl font-head uppercase"><!---->Career Path<!----><!----></h2><!----><!----> <div class="relative pl-10"><div class="absolute left-[15px] top-3 bottom-3 w-0.5 bg-foreground/20"></div> <!--[--><div class="relative pb-10 last:pb-0"><div class="absolute -left-10 top-0.5 z-10 flex size-8 items-center justify-center rounded-full border-2 border-foreground bg-background font-head text-xs text-foreground">1</div> <div class="rounded-md border-2 border-foreground bg-card p-5 transition-all hover:-translate-y-0.5 hover:shadow-[3px_3px_0_0_var(--primary)]"><h3 class="font-head text-lg uppercase text-foreground">Senior Frontend Engineer</h3> <p class="mt-0.5 font-sans text-sm font-medium text-muted-foreground">TechCorp <span class="mx-2">·</span> 2023 - Present</p> <p class="mt-2 text-sm text-muted-foreground">Leading the design system team. Built a component library used across 12 product teams, reducing UI dev time by 40%.</p> <!--[0--><div class="mt-3 flex flex-wrap gap-1.5"><!--[--><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap border font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 outline-2 bg-primary text-black px-2 py-1 text-xs"><!---->Svelte<!----><!----></span><!----><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap border font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 outline-2 bg-primary text-black px-2 py-1 text-xs"><!---->Design Systems<!----><!----></span><!----><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap border font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 outline-2 bg-primary text-black px-2 py-1 text-xs"><!---->Leadership<!----><!----></span><!----><!--]--></div><!--]--></div></div><div class="relative pb-10 last:pb-0"><div class="absolute -left-10 top-0.5 z-10 flex size-8 items-center justify-center rounded-full border-2 border-foreground bg-background font-head text-xs text-foreground">2</div> <div class="rounded-md border-2 border-foreground bg-card p-5 transition-all hover:-translate-y-0.5 hover:shadow-[3px_3px_0_0_var(--primary)]"><h3 class="font-head text-lg uppercase text-foreground">Full-Stack Developer</h3> <p class="mt-0.5 font-sans text-sm font-medium text-muted-foreground">Startup Inc <span class="mx-2">·</span> 2021 - 2023</p> <p class="mt-2 text-sm text-muted-foreground">Architected a real-time collaboration platform serving 50k+ users. Designed WebSocket infrastru
86cture and component architecture.</p> <!--[0--><div class="mt-3 flex flex-wrap gap-1.5"><!--[--><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap border font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 outline-2 bg-primary text-black px-2 py-1 text-xs"><!---->Svelte<!----><!----></span><!----><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap border font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 outline-2 bg-primary text-black px-2 py-1 text-xs"><!---->Node.js<!----><!----></span><!----><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap border font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 outline-2 bg-primary text-black px-2 py-1 text-xs"><!---->WebSocket<!----><!----></span><!----><!--]--></div><!--]--></div></div><div class="relative pb-10 last:pb-0"><div class="absolute -left-10 top-0.5 z-10 flex size-8 items-center justify-center rounded-full border-2 border-foreground bg-background font-head text-xs text-foreground">3</div> <div class="rounded-md border-2 border-foreground bg-card p-5 transition-all hover:-translate-y-0.5 hover:shadow-[3px_3px_0_0_var(--primary)]"><h3 class="font-head text-lg uppercase text-foreground">Junior Developer</h3> <p class="mt-0.5 font-sans text-sm font-medium text-muted-foreground">Agency Co <span class="mx-2">·</span> 2019 - 2021</p> <p class="mt-2 text-sm text-muted-foreground">Delivered 20+ client projects. Built reusable component patterns that became the agency's internal standard library.</p> <!--[0--><div class="mt-3 flex flex-wrap gap-1.5"><!--[--><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap border font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 outline-2 bg-primary text-black px-2 py-1 text-xs"><!---->React<!----><!----></span><!----><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap border font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 outline-2 bg-primary text-black px-2 py-1 text-xs"><!---->TypeScript<!----><!----></span><!----><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap border font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 outline-2 bg-primary text-black px-2 py-1 text-xs"><!---->CSS<!----><!----></span><!----><!--]--></div><!--]--></div></div><!--]--></div></div></section>
86 <section id="contact" class="border-b-2 border-foreground/10 py-16 md:py-24 bg-background"><div class="mx-auto max-w-6xl px-4"><div class="grid gap-12 lg:grid-cols-2"><div class="flex flex-col justify-center gap-6"><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap border font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 px-2.5 py-1.5 text-sm bg-primary text-primary-foreground uppercase tracking-wide w-fit"><!---->Contact<!----><!----></span><!----><!----> <!----><h2 class="lg:text-4xl font-semibold text-3xl md:text-4xl font-head uppercase"><!---->Let's Build Together<!----><!----></h2><!----><!----> <!----><p class="text-base font-sans leading-relaxed text-muted-foreground"><!---->Passionate developer with 5+ years of experience shipping modern web products. I specialize in Svelte, TypeScript, and design systems.<!----><!----></p><!----><!----> <!--[--><div data-slot="alert" class="relative rounded-md grid w-full grid-cols-[0_1fr] gap-y-0.5 border-2 p-4 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current text-foreground items-center border-foreground
86/10 bg-card" role="alert"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-mail mr-3 size-5 shrink-0 text-primary"><!--[--><!----><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"><!----></path><!----><!----><rect x="2" y="4" width="20" height="16" rx="2"><!----></rect><!----><!--]--><!----><!----></svg><!----> <!--[--><!----><h5 class="font-head text-lg col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight" data-slot="alert-title"><!---->Have a project in mind? Drop me a message.<!----><!----><!----></h5><!----><!--]--><!----></div><!--]--> <!--[--><!--$s20--><!--[-1--><div data-slot="separator" class="shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px bg-foreground/10" id="bits-s20" role="separator" aria-orientation="horizontal" data-orientation="horizontal" data-separator-root=""><!----></div><!--]--><!--]--><!----> <div class="flex flex-wrap gap-3"><!--[--><!--[0--><a data-slot="button" class="font-head rounded-md text-center shrink-0 inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 border-2 border-border transition h-8 gap-1.5 px-3 has-[>svg]:px-2.5 shadow-[2px_2px_0_0_var(--foreground)] hover:shadow-none hover:translate-y-0.5 bg-white text-black hover:bg-zinc-200" href="#"><!--[--><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-github mr-2 size-4"><!--[--><!----><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"><!----></path><!----><!----><path d="M9 18c-4.51 2-5-2-7-2"><!----></path><!----><!--]--><!----><!----></svg><!--]--> GitHub<!----></a><!--]--><!--[0--><a data-slot="button" class="font-head rounded-md text-center shrink-0 inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 border-2 border-border transition h-8 gap-1.5 px-3 has-[>svg]:px-2.5 shadow-[2px_2px_0_0_var(--foreground)] hover:shadow-none hover:translate-y-0.5 bg-blue-500 text-white hover:bg-blue-600" href="#"><!--[--><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-linkedin mr-2 size-4"><!--[--><!----><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"><!----></path><!----><!----><rect width="4" height="12" x="2" y="9"><!----></rect><!----><!----><circle cx="4" cy="4" r="2"><!----></circle><!----><!--]--><!----><!----></svg><!--]--> LinkedIn<!----></a><!--]--><!--[0--><a data-slot="button" class="font-head rounded-md text-center shrink-0 inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 border-2 border-border transition h-8 gap-1.5 px-3 has-[>svg]:px-2.5 shadow-[2px_2px_0_0_var(--foreground)] hover:shadow-none hover:translate-y-0.5 bg-sky-500 text-white hover:bg-sky-600" href="#"><!--[--><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-twitter mr-2 size-4"><!--[--><!----><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"><!----></path><!----><!--]--><!----><!----></svg><!--]--> Twitter<!----></a>
86<!--]--><!--]--></div></div> <div class="rounded-md border-2 border-foreground bg-card p-6 shadow-[4px_4px_0_0_var(--primary)]"><h3 class="mb-4 font-head text-xl uppercase">Send a message</h3> <form class="flex flex-col gap-4"><div class="grid gap-4 sm:grid-cols-2"><div class="grid gap-2"><label for="name" class="font-sans text-sm font-medium text-foreground">Name</label> <!--[-1--><input data-slot="input" class="bg-background rounded-md selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground flex h-9 w-full min-w-0 border-2 px-4 py-2 text-base shadow-md transition-[color,box-shadow] outline-none focus:shadow-xs focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 md:text-sm aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aria-invalid:shadow-xs aria-invalid:shadow-destructive" type="text" value="" id="name" placeholder="Your name"/><!--]--><!----></div> <div class="grid gap-2"><label for="email" class="font-sans text-sm font-medium text-foreground">Email</label> <!--[-1--><input data-slot="input" class="bg-background rounded-md selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground flex h-9 w-full min-w-0 border-2 px-4 py-2 text-base shadow-md transition-[color,box-shadow] outline-none focus:shadow-xs focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 md:text-sm aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aria-invalid:shadow-xs aria-invalid:shadow-destructive" type="email" value="" id="email" placeholder="[email protected]"/><!--]--><!----></div></div> <div class="grid gap-2"><label for="message" class="font-sans text-sm font-medium text-foreground">Message</label> <textarea data-slot="textarea" class="aria-invalid:ring-destructive/20 rounded-md dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border-border placeholder:text-muted-foreground flex field-sizing-content w-full border-2 bg-transparent px-4 py-2 shadow-md transition-[color,box-shadow] outline-none focus:shadow-xs focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 md:text-sm min-h-28" id="message" placeholder="Tell me about your project..."></textarea><!----></div> <!--[-1--><button data-slot="button" class="font-head rounded-md shadow-md text-center shrink-0 inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:shadow-none bg-primary text-primary-foreground border-2 border-border transition hover:translate-y-1 hover:bg-primary-hover h-10 px-6 has-[>svg]:px-4" type="submit"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-send mr-2 size-4"><!--[--><!----><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z"><!----></path><!----><!----><path d="m21.854 2.147-10.94 10.939"><!----></path><!----><!--]--><!----><!----></svg><!---->Send Message<!----></button><!--]--><!----></form></div></div></div></section> <footer class="bg-card text-foreground"><div class="mx-auto max-w-6xl px-4 py-12">
86<div class="grid gap-8 border-b-2 border-foreground/10 pb-10 md:grid-cols-3 md:divide-x md:divide-foreground/10"><div class="md:pr-8"><h2 class="font-head text-4xl uppercase leading-none md:text-5xl">Mhamad<br/>Dev</h2> <div class="mt-4 h-1.5 w-16 bg-primary"></div> <div class="mt-5 border-l-2 border-foreground pl-4"><p class="font-sans text-sm text-muted-foreground">Passionate developer with 5+ years of experience shipping modern web products. I specialize in Svelte, TypeScript, and design systems.</p></div></div> <div class="md:px-8"><div class="mb-5 inline-block bg-foreground px-3 py-1.5"><span class="font-head text-sm uppercase text-background">Index</span></div> <ul class="space-y-3"><!--[--><li class="flex items-center justify-between border-b border-foreground/10 pb-2"><a href="#work" rel="external" class="font-head text-sm uppercase text-foreground hover:text-primary transition-colors">Work</a> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-arrow-up-right size-4 text-muted-foreground"><!--[--><!----><path d="M7 7h10v10"><!----></path><!----><!----><path d="M7 17 17 7"><!----></path><!----><!--]--><!----><!----></svg><!----></li><li class="flex items-center justify-between border-b border-foreground
86/10 pb-2"><a href="#skills" rel="external" class="font-head text-sm uppercase text-foreground hover:text-primary transition-colors">Skills</a> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-arrow-up-right size-4 text-muted-foreground"><!--[--><!----><path d="M7 7h10v10"><!----></path><!----><!----><path d="M7 17 17 7"><!----></path><!----><!--]--><!----><!----></svg><!----></li><li class="flex items-center justify-between border-b border-foreground/10 pb-2"><a href="#process" rel="external" class="font-head text-sm uppercase text-foreground hover:text-primary transition-colors">Process</a> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-arrow-up-right size-4 text-muted-foreground"><!--[--><!----><path d="M7 7h10v10"><!----></path><!----><!----><path d="M7 17 17 7"><!----></path><!----><!--]--><!----><!----></svg><!----></li><li class="flex items-center justify-between border-b border-foreground
86/10 pb-2"><a href="#contact" rel="external" class="font-head text-sm uppercase text-foreground hover:text-primary transition-colors">Contact</a> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-arrow-up-right size-4 text-muted-foreground"><!--[--><!----><path d="M7 7h10v10"><!----></path><!----><!----><path d="M7 17 17 7"><!----></path><!----><!--]--><!----><!----></svg><!----></li><!--]--></ul></div> <div class="md:pl-8"><div class="mb-5 inline-block bg-foreground px-3 py-1.5"><span class="font-head text-sm uppercase text-background">Social</span></div> <ul class="space-y-3"><!--[--><li><!--[0--><a data-slot="button" class="font-head rounded-md shadow-md hover:shadow-none text-center shrink-0 inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 bg-transparent border-transparent !shadow-none hover:border-border transition border-2 h-9 py-2 has-[>svg]:px-3 w-full justify-start gap-3 px-0 text-foreground hover:bg-transparent hover:text-primary" href="#"><!--[--><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-github size-4"><!--[--><!----><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"><!----></path><!----><!----><path d="M9 18c-4.51 2-5-2-7-2"><!----></path><!----><!--]--><!----><!----></svg><!--]--> <span class="font-sans text-sm">GitHub</span><!----></a><!--]--><!----></li><li><!--[0--><a data-slot="button" class="font-head rounded-md shadow-md hover:shadow-none text-center shrink-0 inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 bg-transparent border-transparent !shadow-none hover:border-border transition border-2 h-9 py-2 has-[>svg]:px-3 w-full justify-start gap-3 px-0 text-foreground hover:bg-transparent hover:text-primary" href="#"><!--[--><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-linkedin size-4"><!--[--><!----><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"><!----></path><!----><!----><rect width="4" height="12" x="2" y="9"><!----></rect><!----><!----><circle cx="4" cy="4" r="2"><!----></circle><!----><!--]--><!----><!----></svg><!--]--> <span class="font-sans text-sm">LinkedIn</span><!----></a><!--]--><!----></li><li><!--[0--><a data-slot="button" class="font-head rounded-md shadow-md hover:shadow-none text-center shrink-0 inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 bg-transparent border-transparent !shadow-none hover:border-border transition border-2 h-9 py-2 has-[>svg]:px-3 w-full justify-start gap-3 px-0 text-foreground hover:bg-transparent hover:text-primary" href="#"><!--[--><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-twitter size-4"><!--[--><!----><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"><!----></path><!----><!--]--><!----><!----></svg><!--]--> <span class="font-sans text-sm">Twitter</span><!----></a>
86<!--]--><!----></li><!--]--></ul></div></div> <div class="flex flex-col items-center justify-between gap-3 pt-6 md:flex-row"><span class="font-sans text-xs text-muted-foreground">© 2026 Mhamad. All rights reserved.</span> <span class="font-sans text-xs text-muted-foreground">Built with <span class="font-head text-primary">RetroUI</span></span></div></div></footer></div><!----></div><!----></div><!--]--><!--]--><!----> <!--[--><!--$s21--><!--[-1--><div data-slot="tabs-content" class="border-border rounded-md mt-2 flex-1 outline-none border-0 p-0 pt-4" id="bits-s21" role="tabpanel" hidden="" tabindex="0" data-value="code" data-state="inactive" data-orientation="horizontal" data-tabs-content=""><!--[--><div class="flex h-24 items-center justify-center rounded-lg border-2 border-foreground/10 bg-[#24292e]"><span class="text-sm text-[#e1e4e8]/60">Highlighting code...</span></div><!--]--><!----></div><!--]--><!--]--><!----><!----></div><!--]--><!--]--><!----></div><div class="space-y-4"><div class="flex flex-col gap-2"><h2 class="font-head text-2xl uppercase">Retro Characters</h2> <p class="max-w-xl text-sm text-muted-foreground">A cream and pink retro cartoon character shop landing page with products, customization form, and footer.</p></div> <div class="border-border relative w-full rounded-md border bg-[#24292e] text-[#e1e4e8] svelte-1mhb543"><div class="flex place-items-center justify-between gap-2 border-b border-white/80 py-1 pr-2"><div class="flex place-items-center gap-2 px-2"><div class="flex size-4 place-items-center justify-center opacity-75"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-terminal text-primary size-3"><!--[--><!----><path d="M12 19h8"><!----></path><!----><!----><path d="m4 17 6-6-6-6"><!----></path><!----><!--]--><!----><!----></svg><!----></div> <!--[--><!--[--><!--$s22--><!--[-1--><div data-slot="tabs" class="flex flex-col gap-2" id="bits-s22" data-orientation="horizontal" data-tabs-root=""><!--[--><!--[--><!--$s23--><!--[-1--><div data-slot="tabs-list" class="inline-flex w-fit items-center justify-center h-auto bg-transparent p-0" id="bits-s23" role="tablist" aria-orientation="horizontal" data-orientation="horizontal" data-tabs-list=""><!--[--><!--[--><!--[--><!--$s24--><!--[-1--><button data-slot="tabs-trigger" class="data-[state=active]:border-border rounded-md data-[state=active]:bg-primary data-[state=active]:text-primary-foreground border-2 border-transparent px-4 py-1 transition-all focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=active]:font-semibold [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 h-7 font-mono text-sm font-light" id="bits-s24" role="tab" data-state="active" data-value="npm" data-orientation="horizontal" aria-selected="true" data-tabs-trigger="" tabindex="0" type="button"><!---->npm<!----><!----></button><!--]--><!--]--><!--]--><!--[--><!--[--><!--$s25--><!--[-1--><button data-slot="tabs-trigger" class="data-[state=active]:border-border rounded-md data-[state=active]:bg-primary data-[state=active]:text-primary-foreground border-2 border-transparent px-4 py-1 transition-all focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=active]:font-semibold [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 h-7 font-mono text-sm font-light" id="bits-s25" role="tab" data-state="inactive" data-value="pnpm" data-orientation="horizontal" aria-selected="false" data-tabs-trigger="" tabindex="0" type="button"><!---->pnpm<!----><!----></button><!--]--><!--]--><!--]--><!--[--><!--[--><!--$s26--><!--[-1--><button data-slot="tabs-trigger" class="data-[state=active]:border-border rounded-md data-[state=active]:bg-primary data-[state=active]:text-primary-foreground border-2 border-transparent px-4 py-1 transition-all focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=active]:font-semibold [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 h-7 font-mono text-sm font-light" id="bits-s26" role="tab" data-state="inactive" data-value="yarn" data-orientation="horizontal" aria-selected="false" data-tabs-trigger="" tabindex="0" type="button"><!---->yarn<!----><!----></button><!--]--><!--]--><!--]--><!--[--><!--[--><!--$s27--><!--[-1--><button data-slot="tabs-trigger" class="data-[state=active]:border-border rounded-md data-[state=active]:bg-primary data-[state=active]:text-primary-foreground border-2 border-transparent px-4 py-1 transition-all focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=active]:font-semibold [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 h-7 font-mono text-sm font-light" id="bits-s27" role="tab" data-state="inactive" data-value="bun" data-orientation="horizontal" aria-selected="false" data-tabs-trigger="" tabindex="0" type="button"><!---->bun<!----><!----></button><!--]--><!--]--><!--]--><!--]--><!----></div><!--]--><!--]--><!--]--><!----></div><!--]--><!--]--><!--]--></div> <!--[--><!--[--><!--[--><!--[--><!--$s28--><!--[0--><!--[--><!--[-1--><button data-slot="button" class="font-head rounded-md shadow-md text-center shrink-0 inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:shadow-none bg-primary text-primary-foreground border-2 border-border transition hover:translate-y-1 hover:bg-primary-hover size-8 z-10 relative right-auto top-auto" type="button" data-pre-copy-btn="" title="Copy code"><!--[-1--><svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
86<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg><!--]--><!----></button><!--]--><!--]--><!----><!--]--><!--]--><!--]--> <!--[--><!--[--><!--[-1--><!--]--><!--]--><!--]--><!----><!----><!--]--><!----><!--]--></div> <div class="no-scrollbar overflow-x-auto svelte-1mhb543"><!--[-1--><div class="p-3"><span class="font-mono text-sm leading-none font-light text-nowrap">npx shadcn-svelte@latest add https://retroui-svelte.netlify.app/r/retro-characters.json</span></div><!--]--></div></div><!----> <!--[--><!--$s29--><!--[-1--><div data-slot="tabs" class="flex flex-col gap-2 w-full" id="bits-s29" data-orientation="horizontal" data-tabs-root=""><!--[--><!--$s30--><!--[-1--><div data-slot="tabs-list" class="inline-flex h-9 items-center w-full justify-start rounded-none border-b border-foreground/10 pb-0" id="bits-s30" role="tablist" aria-orientation="horizontal" data-orientation="horizontal" data-tabs-list=""><!--[--><!--$s31--><!--[-1--><button data-slot="tabs-trigger" class="data-[state=active]:border-border rounded-md data-[state=active]:bg-primary data-[state=active]:text-primary-foreground border-2 border-transparent px-4 py-1 font-medium transition-all focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=active]:font-semibold [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" id="bits-s31" role="tab" data-state="active" data-value="preview" data-orientation="horizontal" aria-selected="true" data-tabs-trigger="" tabindex="0" type="button"><!---->Preview<!----><!----></button><!--]--><!--]--><!----> <!--[--><!--$s32--><!--[-1--><button data-slot="tabs-trigger" class="data-[state=active]:border-border rounded-md data-[state=active]:bg-primary data-[state=active]:text-primary-foreground border-2 border-transparent px-4 py-1 font-medium transition-all focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=active]:font-semibold [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4" id="bits-s32" role="tab" data-state="inactive" data-value="code" data-orientation="horizontal" aria-selected="false" data-tabs-trigger="" tabindex="0" type="button"><!---->Code<!----><!----></button><!--]--><!--]--><!----><!----></div><!--]--><!--]--><!----> <!--[--><!--$s33--><!--[-1--><div data-slot="tabs-content" class="border-border rounded-md mt-2 flex-1 outline-none border-0 p-0 pt-4" id="bits-s33" role="tabpanel" tabindex="0" data-value="preview" data-state="active" data-orientation="horizontal" data-tabs-content=""><div class="h-[calc(100vh-30rem)] overflow-auto rounded-lg border-2 border-foreground
86/10"><div class="retro-characters min-h-screen font-sans" style="--rc-bg: #F5F0E6; --rc-fg: #1E1B2E; --rc-primary: #D94A7A; --rc-primary-fg: #ffffff; --rc-secondary: #3AAFA9; --rc-accent: #F4D03F; --rc-card: #FFFDF7; --rc-border: #1E1B2E; --rc-muted: #8A849E;"><nav class="sticky top-0 z-50 border-b-2 bg-[var(--rc-bg)]" style="border-color: var(--rc-border);"><div class="mx-auto flex max-w-6xl items-center justify-between px-4 py-4"><a href="#top" class="flex items-center gap-2 font-head text-2xl tracking-tight text-[var(--rc-fg)]"><span class="flex size-8 items-center justify-center rounded-lg bg-[var(--rc-primary)] text-[var(--rc-primary-fg)]"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-sparkles size-5"><!--[--><!----><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"><!----></path><!----><!----><path d="M20 2v4"><!----></path><!----><!----><path d="M22 4h-4"><!----></path><!----><!----><circle cx="4" cy="20" r="2"><!----></circle><!----><!--]--><!----><!----></svg><!----></span> Retro Characters</a> <div class="hidden items-center gap-8 md:flex"><!--[--><a href="#products" rel="external" class="text-sm font-medium text-[var(--rc-fg)] hover:text-[var(--rc-primary)]">Shop</a><a href="#customize" rel="external" class="text-sm font-medium text-[var(--rc-fg)] hover:text-[var(--rc-primary)]">Customize</a><a href="#how-it-works" rel="external" class="text-sm font-medium text-[var(--rc-fg)] hover:text-[var(--rc-primary)]">How it works</a><!--]--></div> <div class="flex items-center gap-3"><!--[-1--><button data-slot="button" class="font-head rounded-md shadow-md text-center shrink-0 inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:shadow-none transition hover:translate-y-1 size-8 relative border-2 border-[var(--rc-border)] bg-[var(--rc-card)] text-[var(--rc-fg)] hover:bg-[var(--rc-accent)] hover:text-[var(--rc-fg)]" type="button"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-shopping-cart size-5"><!--[--><!----><circle cx="8" cy="21" r="1"><!----></circle><!----><!----><circle cx="19" cy="21" r="1"><!----></circle><!----><!----><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"><!----></path><!----><!--]--><!----><!----></svg><!----> <!--[-1--><!--]--><!----></button><!--]--><!----> <!--[-1--><button data-slot="button" class="font-head rounded-md shadow-md text-center shrink-0 outline-hidden cursor-pointer duration-200 font-medium items-center justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:shadow-none transition hover:translate-y-1 h-9 px-4 py-2 has-[>svg]:px-3 hidden border-2 border-[var(--rc-border)] bg-[var(--rc-primary)] text-[var(--rc-primary-fg)] hover:bg-[var(--rc-primary)]/90 md:inline-flex" type="button" style="box-shadow: 3px 3px 0 0 var(--rc-border);"><!---->Get Started<!----></button><!--]--><!----> <!--[-1--><button data-slot="button" class="font-head rounded-md shadow-md text-center shrink-0 inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:shadow-none bg-primary border-2 border-border transition hover:translate-y-1 hover:bg-primary-hover size-8 md:hidden text-black bg-transparent!" type="button"><!--[-1--><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-menu size-5 text-black"><!--[--><!----><path d="M4 12h16"><!----></path><!----><!----><path d="M4 18h16"><!----></path><!----><!----><path d="M4 6h16"><!----></path><!----><!--]--><!----><!----></svg><!--]--><!----></button><!--]--><!----></div></div> <!--[-1--><!--]--></nav> <section class="relative overflow-hidden border-b-2 border-[var(--rc-border)] bg-[var(--rc-bg)] py-16 md:py-24"><div class="mx-auto max-w-6xl px-4"><div class="grid gap-12 lg:grid-cols-2 lg:items-center"><div class="flex flex-col gap-6"><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap font-medium transition-[color,box-shadow] focu
86s-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 px-2.5 py-1.5 text-sm w-fit border-2 border-[var(--rc-border)] bg-[var(--rc-accent)] text-[var(--rc-fg)] hover:bg-[var(--rc-accent)]"><!---->New drops every Friday<!----><!----></span><!----><!----> <h1 class="font-head text-4xl leading-[1.1] text-[var(--rc-fg)] md:text-6xl lg:text-7xl">Bring Retro Vibes to Your Projects</h1> <p class="max-w-md text-lg text-[var(--rc-muted)]">A curated collection of nostalgic, customizable cartoon characters perfect for apps, websites, stickers, and merch.</p> <div class="flex flex-wrap gap-3"><!--[0--><a data-slot="button" class="font-head rounded-md shadow-md text-center shrink-0 inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:shadow-none transition hover:translate-y-1 h-9 px-4 py-2 has-[>svg]:px-3 border-2 border-[var(--rc-border)] bg-[var(--rc-primary)] text-[var(--rc-primary-fg)] hover:bg-[var(--rc-primary)]/90" href="#products" style="box-shadow: 4px 4px 0 0 var(--rc-border);"><!---->Shop Characters<!----></a><!--]--><!----> <!--[0--><a data-slot="button" class="font-head rounded-md shadow-md text-center shrink-0 inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:shadow-none transition hover:translate-y-1 h-9 px-4 py-2 has-[>svg]:px-3 border-2 border-[var(--rc-border)] bg-[var(--rc-card)] text-[var(--rc-fg)] hover:bg-[var(--rc-secondary)] hover:text-[var(--rc-primary-fg)]" href="#customize"><!---->Customize Yours<!----></a><!--]--><!----></div> <div class="mt-4 grid grid-cols-4 gap-4 border-t-2 border-[var(--rc-border)]/20 pt-6"><!--[--><div><div class="font-head text-2xl text-[var(--rc-fg)] md:text-3xl">120+</div> <div class="text-xs text-[var(--rc-muted)]">Characters</div></div><div><div class="font-head text-2xl text-[var(--rc-fg)] md:text-3xl">50+</div> <div class="text-xs text-[var(--rc-muted)]">Outfits</div></div><div><div class="font-head text-2xl text-[var(--rc-fg)] md:text-3xl">4k</div> <div class="text-xs text-[var(--rc-muted)]">PNG exports</div></div><div><div class="font-head text-2xl text-[var(--rc-fg)] md:text-3xl">â</div> <div class="text-xs text-[var(--rc-muted)]">Combinations</div></div><!--]--></div></div> <div class="relative"><div class="absolute -left-4 -top-4 z-0 hidden h-full w-full rounded-2xl border-2 border-[var(--rc-border)] bg-[var(--rc-secondary)] lg:block"></div> <div class="relative z-10 grid grid-cols-2 gap-4 rounded-2xl border-2 border-[var(--rc-border)] bg-[var(--rc-card)] p-5 shadow-[6px_6px_0_0_var(--rc-border)]"><!--[--><div class="flex flex-col items-center gap-2 rounded-xl border-2 border-[var(--rc-border)] bg-[var(--rc-bg)] p-3 transition-transform hover:-translate-y-1"><div class="size-24" style="color: #D94A7A;"><!--[0--><svg viewBox="0 0 120 120" fill="none"><rect x="20" y="20" width="80" height="80" rx="16" fill="#D94A7A"></rect><circle cx="45" cy="55" r="6" fill="#fff"></circle><circle cx="75" cy="55" r="6" fill="#fff"></circle><circle cx="47" cy="55" r="2.5" fill="#1E1B2E"></circle><circle cx="77" cy="55" r="2.5" fill="#1E1B2E"></circle><path d="M45 78c8 8 22 8 30 0" stroke="#fff" stroke-width="4" stroke-linecap="round"></path><rect x="38" y="34" width="12" height="6" rx="3" fill="#F4D03F"></rect><rect x="70" y="34" width="12" height="6" rx="3" fill="#F4D03F"></rect></svg><!--]--><!----></div> <span class="font-head text-sm text-[var(--rc-fg)]">Pixel Buddy</span></div><div class="flex flex-col items-center gap-2 rounded-xl border-2 border-[var(--rc-border)] bg-[var(--rc-bg)] p-3 transition-transform hover:-translate-y-1"><div class="size-24" style="color: #3AAFA9;"><!--[1--><svg viewBox="0 0 120 120" fill="none"><circle cx="60" cy="60" r="48" fill="#3AAFA9"></circle><circle cx="44" cy="55" r="7" fill="#fff"></circle><circle cx="76" cy="55" r="7" fill="#fff"></circle><circle cx="46" cy="55" r="3" fill="#1E1B2E"></circle><circle cx="78" cy="55" r="3" fill="#1E1B2E"></circle><path d="M42 76c10 8 26 8 36 0" stroke="#fff" stroke-width="4" stroke-linecap="round"></path><rect x="34" y="44" width="52" height="28" rx="6" fill="#F4D03F" opacity=".9"></rect><circle cx="44" cy="58" r="5" fill="#1E1B2E"></circle><circle cx="76" cy="58" r="5" fill="#1E1B2E"></circle><rect x="52" y="56" width="16" height="4" rx="2" fill="#D94A7A"></rect></svg><!--]--><!----></div> <span class="font-head text-sm text-[var(--rc-fg)]">Cassette Cat</span></div><div class="flex flex-col items-center gap-2 rounded-xl border-2 border-[var(--rc-border)] bg-[var(--rc-bg)] p-3 transition-transform hover:-translate-y-1"><div class="size-24" style="color: #F4D03F;"><!--[2--><svg viewBox="0 0 120 120" fill="none"><circle cx="60" cy="65" r="42" fill="#F4D03F"></circle><ellipse cx="45" cy="58" rx="8" ry="10" fill="#fff"></ellipse><ellipse cx="75" cy="58" rx="8" ry="10" fill="#fff"></ellipse><circle cx="47" cy="58" r="3.5" fill="#1E1B2E"></circle><circle cx="77" cy="58" r="3.5" fill="#1E1B2E"></circle><path d="M48 82c7 6 17 6 24 0" stroke="#D94A7A" stroke-width="4" stroke-linecap="round"></path><path d="M30 40c8-12 52-12 60 0" stroke="#3AAFA9" stroke-width="5" stroke-linecap="round"></path><circle cx="60" cy="28" r="6" fill="#D94A7A"></circle></svg><!--]--><!----></div> <span class="font-head text-sm text-[var(--rc-fg)]">Disco Duck</span></div><div class="flex flex-col items-center gap-2 rounded-xl border-2 border-[var(--rc-border)] bg-[var(--rc-bg)] p-3 transition-transform hover:-translate-y-1"><div class="size-24" style="color: #8E44AD;"><!--[3--><svg viewBox="0 0 120 120" fill="none"><path d="M28 60c0-26 18-42 32-42s32 16 32 42c0 22-18 38-32 38S28 82 28 60z" fill="#8E44AD"></path><ellipse cx="42" cy="58" rx="10" ry="12" fill="#fff"></ellipse><ellipse cx="78" cy="58" rx="10" ry="12" fill="#fff"></ellipse><circle cx="45" cy="58" r="4" fill="#1E1B2E"></circle><circle cx="81" cy="58" r="4" fill="#1E1B2E"></circle><path d="M48 82c8 6 16 6 24 0" stroke="#F4D03F" stroke-width="4" stroke-linecap="round"></path><path d="M22 48c-4-8 6-14 10-6" stroke="#3AAFA9" stroke-width="4" stroke-linecap="round"></path><path d="M98 48c4-8-6-14-10-6" stroke="#3AAFA9" stroke-width="4" stroke-linecap="round"></path></svg><!--]--><!----></div> <span class="font-head text-sm text-[var(--rc-fg)]">Arcade Alien</span></div><!--]--></div></div></div></div></section> <section id="products" class="bg-[var(--rc-bg)] py-16 md:py-24"><div class="mx-auto max-w-6xl px-4"><div class="mb-10 text-center"><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap font-medium transition-[color,box-shadow] focu
86s-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 px-2.5 py-1.5 text-sm mb-3 border-2 border-[var(--rc-border)] bg-[var(--rc-secondary)] text-[var(--rc-primary-fg)] hover:bg-[var(--rc-secondary)]"><!---->The Shop<!----><!----></span><!----><!----> <h2 class="font-head text-3xl text-[var(--rc-fg)] md:text-5xl">Retro Characters</h2> <p class="mx-auto mt-3 max-w-lg text-[var(--rc-muted)]">Pick a character, mix outfits, and export in any format you need.</p></div> <div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3"><!--[--><div class="group relative flex flex-col gap-4 rounded-2xl border-2 border-[var(--rc-border)] bg-[var(--rc-card)] p-5 transition-all hover:-translate-y-1" style="box-shadow: 4px 4px 0 0 var(--rc-border);"><div class="absolute -right-2 -top-2 z-10"><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 px-2.5 py-1.5 text-sm border-2 border-[var(--rc-border)] bg-[var(--rc-accent)] text-[var(--rc-fg)]"><!---->Best Seller<!----><!----></span><!----><!----></div> <div class="flex aspect-square items-center justify-center rounded-xl border-2 border-[var(--rc-border)] bg-[var(--rc-bg)]" style="color: #D94A7A;"><div class="size-40"><!--[0--><svg viewBox="0 0 120 120" fill="none"><rect x="20" y="20" width="80" height="80" rx="16" fill="#D94A7A"></rect><circle cx="45" cy="55" r="6" fill="#fff"></circle><circle cx="75" cy="55" r="6" fill="#fff"></circle><circle cx="47" cy="55" r="2.5" fill="#1E1B2E"></circle><circle cx="77" cy="55" r="2.5" fill="#1E1B2E"></circle><path d="M45 78c8 8 22 8 30 0" stroke="#fff" stroke-width="4" stroke-linecap="round"></path><rect x="38" y="34" width="12" height="6" rx="3" fill="#F4D03F"></rect><rect x="70" y="34" width="12" height="6" rx="3" fill="#F4D03F"></rect></svg><!--]--><!----></div></div> <div><h3 class="font-head text-lg text-[var(--rc-fg)]">Pixel Buddy</h3> <p class="text-sm text-[var(--rc-muted)]">High-res PNG + SVG bundle</p></div> <div class="mt-auto flex items-center justify-between"><span class="font-head text-xl text-[var(--rc-fg)]">$12</span> <!--[-1--><button data-slot="button" class="font-head rounded-md shadow-md text-center shrink-0 inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:shadow-none transition hover:translate-y-1 h-8 gap-1.5 px-3 has-[>svg]:px-2.5 border-2 border-[var(--rc-border)] bg-[var(--rc-primary)] text-[var(--rc-primary-fg)] hover:bg-[var(--rc-primary)]/90" type="button" style="box-shadow: 2px 2px 0 0 var(--rc-border);"><!---->Add to Cart<!----></button><!--]--><!----></div></div>
86<div class="group relative flex flex-col gap-4 rounded-2xl border-2 border-[var(--rc-border)] bg-[var(--rc-card)] p-5 transition-all hover:-translate-y-1" style="box-shadow: 4px 4px 0 0 var(--rc-border);"><div class="absolute -right-2 -top-2 z-10"><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 px-2.5 py-1.5 text-sm border-2 border-[var(--rc-border)] bg-[var(--rc-accent)] text-[var(--rc-fg)]"><!---->New<!----><!----></span><!----><!----></div> <div class="flex aspect-square items-center justify-center rounded-xl border-2 border-[var(--rc-border)] bg-[var(--rc-bg)]" style="color: #3AAFA9;"><div class="size-40"><!--[1--><svg viewBox="0 0 120 120" fill="none"><circle cx="60" cy="60" r="48" fill="#3AAFA9"></circle><circle cx="44" cy="55" r="7" fill="#fff"></circle><circle cx="76" cy="55" r="7" fill="#fff"></circle><circle cx="46" cy="55" r="3" fill="#1E1B2E"></circle><circle cx="78" cy="55" r="3" fill="#1E1B2E"></circle><path d="M42 76c10 8 26 8 36 0" stroke="#fff" stroke-width="4" stroke-linecap="round"></path><rect x="34" y="44" width="52" height="28" rx="6" fill="#F4D03F" opacity=".9"></rect><circle cx="44" cy="58" r="5" fill="#1E1B2E"></circle><circle cx="76" cy="58" r="5" fill="#1E1B2E"></circle><rect x="52" y="56" width="16" height="4" rx="2" fill="#D94A7A"></rect></svg><!--]--><!----></div></div> <div><h3 class="font-head text-lg text-[var(--rc-fg)]">Cassette Cat</h3> <p class="text-sm text-[var(--rc-muted)]">High-res PNG + SVG bundle</p></div> <div class="mt-auto flex items-center justify-between"><span class="font-head text-xl text-[var(--rc-fg)]">$15</span> <!--[-1--><button data-slot="button" class="font-head rounded-md shadow-md text-center shrink-0 inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:shadow-none transition hover:translate-y-1 h-8 gap-1.5 px-3 has-[>svg]:px-2.5 border-2 border-[var(--rc-border)] bg-[var(--rc-primary)] text-[var(--rc-primary-fg)] hover:bg-[var(--rc-primary)]/90" type="button" style="box-shadow: 2px 2px 0 0 var(--rc-border);"><!---->Add to Cart<!----></button><!--]--><!----></div></div>
86<div class="group relative flex flex-col gap-4 rounded-2xl border-2 border-[var(--rc-border)] bg-[var(--rc-card)] p-5 transition-all hover:-translate-y-1" style="box-shadow: 4px 4px 0 0 var(--rc-border);"><div class="absolute -right-2 -top-2 z-10"><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 px-2.5 py-1.5 text-sm border-2 border-[var(--rc-border)] bg-[var(--rc-accent)] text-[var(--rc-fg)]"><!---->Popular<!----><!----></span><!----><!----></div> <div class="flex aspect-square items-center justify-center rounded-xl border-2 border-[var(--rc-border)] bg-[var(--rc-bg)]" style="color: #F4D03F;"><div class="size-40"><!--[2--><svg viewBox="0 0 120 120" fill="none"><circle cx="60" cy="65" r="42" fill="#F4D03F"></circle><ellipse cx="45" cy="58" rx="8" ry="10" fill="#fff"></ellipse><ellipse cx="75" cy="58" rx="8" ry="10" fill="#fff"></ellipse><circle cx="47" cy="58" r="3.5" fill="#1E1B2E"></circle><circle cx="77" cy="58" r="3.5" fill="#1E1B2E"></circle><path d="M48 82c7 6 17 6 24 0" stroke="#D94A7A" stroke-width="4" stroke-linecap="round"></path><path d="M30 40c8-12 52-12 60 0" stroke="#3AAFA9" stroke-width="5" stroke-linecap="round"></path><circle cx="60" cy="28" r="6" fill="#D94A7A"></circle></svg><!--]--><!----></div></div> <div><h3 class="font-head text-lg text-[var(--rc-fg)]">Disco Duck</h3> <p class="text-sm text-[var(--rc-muted)]">High-res PNG + SVG bundle</p></div> <div class="mt-auto flex items-center justify-between"><span class="font-head text-xl text-[var(--rc-fg)]">$10</span> <!--[-1--><button data-slot="button" class="font-head rounded-md shadow-md text-center shrink-0 inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:shadow-none transition hover:translate-y-1 h-8 gap-1.5 px-3 has-[>svg]:px-2.5 border-2 border-[var(--rc-border)] bg-[var(--rc-primary)] text-[var(--rc-primary-fg)] hover:bg-[var(--rc-primary)]/90" type="button" style="box-shadow: 2px 2px 0 0 var(--rc-border);"><!---->Add to Cart<!----></button><!--]--><!----></div></div>
86<div class="group relative flex flex-col gap-4 rounded-2xl border-2 border-[var(--rc-border)] bg-[var(--rc-card)] p-5 transition-all hover:-translate-y-1" style="box-shadow: 4px 4px 0 0 var(--rc-border);"><div class="absolute -right-2 -top-2 z-10"><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 px-2.5 py-1.5 text-sm border-2 border-[var(--rc-border)] bg-[var(--rc-accent)] text-[var(--rc-fg)]"><!---->Bundle<!----><!----></span><!----><!----></div> <div class="flex aspect-square items-center justify-center rounded-xl border-2 border-[var(--rc-border)] bg-[var(--rc-bg)]" style="color: #8E44AD;"><div class="size-40"><!--[3--><svg viewBox="0 0 120 120" fill="none"><path d="M28 60c0-26 18-42 32-42s32 16 32 42c0 22-18 38-32 38S28 82 28 60z" fill="#8E44AD"></path><ellipse cx="42" cy="58" rx="10" ry="12" fill="#fff"></ellipse><ellipse cx="78" cy="58" rx="10" ry="12" fill="#fff"></ellipse><circle cx="45" cy="58" r="4" fill="#1E1B2E"></circle><circle cx="81" cy="58" r="4" fill="#1E1B2E"></circle><path d="M48 82c8 6 16 6 24 0" stroke="#F4D03F" stroke-width="4" stroke-linecap="round"></path><path d="M22 48c-4-8 6-14 10-6" stroke="#3AAFA9" stroke-width="4" stroke-linecap="round"></path><path d="M98 48c4-8-6-14-10-6" stroke="#3AAFA9" stroke-width="4" stroke-linecap="round"></path></svg><!--]--><!----></div></div> <div><h3 class="font-head text-lg text-[var(--rc-fg)]">Arcade Alien</h3> <p class="text-sm text-[var(--rc-muted)]">High-res PNG + SVG bundle</p></div> <div class="mt-auto flex items-center justify-between"><span class="font-head text-xl text-[var(--rc-fg)]">$14</span> <!--[-1--><button data-slot="button" class="font-head rounded-md shadow-md text-center shrink-0 inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:shadow-none transition hover:translate-y-1 h-8 gap-1.5 px-3 has-[>svg]:px-2.5 border-2 border-[var(--rc-border)] bg-[var(--rc-primary)] text-[var(--rc-primary-fg)] hover:bg-[var(--rc-primary)]/90" type="button" style="box-shadow: 2px 2px 0 0 var(--rc-border);"><!---->Add to Cart<!----></button><!--]--><!----></div></div>
86<div class="group relative flex flex-col gap-4 rounded-2xl border-2 border-[var(--rc-border)] bg-[var(--rc-card)] p-5 transition-all hover:-translate-y-1" style="box-shadow: 4px 4px 0 0 var(--rc-border);"><div class="absolute -right-2 -top-2 z-10"><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 px-2.5 py-1.5 text-sm border-2 border-[var(--rc-border)] bg-[var(--rc-accent)] text-[var(--rc-fg)]"><!---->Premium<!----><!----></span><!----><!----></div> <div class="flex aspect-square items-center justify-center rounded-xl border-2 border-[var(--rc-border)] bg-[var(--rc-bg)]" style="color: #E67E22;"><div class="size-40"><!--[4--><svg viewBox="0 0 120 120" fill="none"><circle cx="60" cy="66" r="40" fill="#E67E22"></circle><circle cx="34" cy="42" r="10" fill="#E67E22"></circle><circle cx="86" cy="42" r="10" fill="#E67E22"></circle><circle cx="44" cy="60" r="7" fill="#fff"></circle><circle cx="76" cy="60" r="7" fill="#fff"></circle><circle cx="46" cy="60" r="3" fill="#1E1B2E"></circle><circle cx="78" cy="60" r="3" fill="#1E1B2E"></circle><ellipse cx="60" cy="78" rx="10" ry="7" fill="#F4D03F"></ellipse><rect x="30" y="52" width="60" height="8" rx="4" fill="#3AAFA9" opacity=".8"></rect></svg><!--]--><!----></div></div> <div><h3 class="font-head text-lg text-[var(--rc-fg)]">Synth Bear</h3> <p class="text-sm text-[var(--rc-muted)]">High-res PNG + SVG bundle</p></div> <div class="mt-auto flex items-center justify-between"><span class="font-head text-xl text-[var(--rc-fg)]">$18</span> <!--[-1--><button data-slot="button" class="font-head rounded-md shadow-md text-center shrink-0 inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:shadow-none transition hover:translate-y-1 h-8 gap-1.5 px-3 has-[>svg]:px-2.5 border-2 border-[var(--rc-border)] bg-[var(--rc-primary)] text-[var(--rc-primary-fg)] hover:bg-[var(--rc-primary)]/90" type="button" style="box-shadow: 2px 2px 0 0 var(--rc-border);"><!---->Add to Cart<!----></button><!--]--><!----></div></div>
86<div class="group relative flex flex-col gap-4 rounded-2xl border-2 border-[var(--rc-border)] bg-[var(--rc-card)] p-5 transition-all hover:-translate-y-1" style="box-shadow: 4px 4px 0 0 var(--rc-border);"><div class="absolute -right-2 -top-2 z-10"><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 px-2.5 py-1.5 text-sm border-2 border-[var(--rc-border)] bg-[var(--rc-accent)] text-[var(--rc-fg)]"><!---->Sale<!----><!----></span><!----><!----></div> <div class="flex aspect-square items-center justify-center rounded-xl border-2 border-[var(--rc-border)] bg-[var(--rc-bg)]" style="color: #D94A7A;"><div class="size-40"><!--[5--><svg viewBox="0 0 120 120" fill="none"><ellipse cx="60" cy="70" rx="38" ry="34" fill="#D94A7A"></ellipse><ellipse cx="44" cy="62" rx="9" ry="11" fill="#fff"></ellipse><ellipse cx="76" cy="62" rx="9" ry="11" fill="#fff"></ellipse><circle cx="46" cy="62" r="3.5" fill="#1E1B2E"></circle><circle cx="78" cy="62" r="3.5" fill="#1E1B2E"></circle><path d="M48 84c8 5 16 5 24 0" stroke="#fff" stroke-width="4" stroke-linecap="round"></path><path d="M28 44c0-12 10-20 16-14" stroke="#F4D03F" stroke-width="5" stroke-linecap="round"></path><path d="M92 44c0-12-10-20-16-14" stroke="#F4D03F" stroke-width="5" stroke-linecap="round"></path><rect x="32" y="88" width="56" height="14" rx="4" fill="#1E1B2E"></rect><circle cx="42" cy="95" r="4" fill="#3AAFA9"></circle><circle cx="78" cy="95" r="4" fill="#3AAFA9"></circle></svg><!--]--><!----></div></div> <div><h3 class="font-head text-lg text-[var(--rc-fg)]">Boombox Bunny</h3> <p class="text-sm text-[var(--rc-muted)]">High-res PNG + SVG bundle</p></div> <div class="mt-auto flex items-center justify-between"><span class="font-head text-xl text-[var(--rc-fg)]">$13</span> <!--[-1--><button data-slot="button" class="font-head rounded-md shadow-md text-center shrink-0 inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:shadow-none transition hover:translate-y-1 h-8 gap-1.5 px-3 has-[>svg]:px-2.5 border-2 border-[var(--rc-border)] bg-[var(--rc-primary)] text-[var(--rc-primary-fg)] hover:bg-[var(--rc-primary)]/90" type="button" style="box-shadow: 2px 2px 0 0 var(--rc-border);"><!---->Add to Cart<!----></button><!--]--><!----></div></div><!--]--></div></div></section> <section id="customize" class="border-y-2 border-[var(--rc-border)] bg-[var(--rc-secondary)] py-16 md:py-24"><div class="mx-auto max-w-6xl px-4"><div class="grid gap-10 lg:grid-cols-2 lg:items-center"><div><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 px-2.5 py-1.5 text-sm mb-3 border-2 border-[var(--rc-border)] bg-[var(--rc-accent)] text-[var(--rc-fg)] hover:bg-[var(--rc-accent)]"><!---->Custom Work<!----><!----></span><!----><!----> <h2 class="font-head text-3xl text-[var(--rc-primary-fg)] md:text-5xl">Have a character idea?</h2> <p class="mt-4 max-w-md text-lg text-[var(--rc-primary-fg)]/80">We can turn your sketch, doodle, or dream into a polished retro character ready for any project.</p> <ul class="mt-6 space-y-3"><!--[--><li class="flex items-center gap-2 text-[var(--rc-primary-fg)]"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-star size-4 fill-[var(--rc-accent)] text-[var(--rc-accent)]"><!--[--><!----><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"><!----></path><!----><!--]--><!----><!----></svg><!----> Original character design</li><li class="flex items-center gap-2 text-[var(--rc-primary-fg)]"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-star size-4 fill-[var(--rc-accent)] text-[var(--rc-accent)]"><!--[--><!----><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"><!----></path><!----><!--]--><!----><!----></svg><!----> Unlimited revisions</li><li class="flex items-center gap-2 text-[var(--rc-primary-fg)]"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-star size-4 fill-[var(--rc-accent)] text-[var(--rc-accent)]"><!--[--><!----><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"><!----></path><!----><!--]--><!----><!----></svg><!----> Commercial license included</li><li class="flex items-center gap-2 text-[var(--rc-primary-fg)]"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-star size-4 fill-[var(--rc-accent)] text-[var(--rc-accent)]"><!--[--><!----><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"><!----></path><!----><!--]--><!----><!----></svg><!----> Source files delivered</li>
86<!--]--></ul></div> <form class="rounded-2xl border-2 border-[var(--rc-border)] bg-[var(--rc-card)] p-6 shadow-[6px_6px_0_0_var(--rc-border)]"><h3 class="mb-4 font-head text-xl text-[var(--rc-fg)]">Tell us your idea</h3> <div class="space-y-4"><div><label for="idea" class="mb-1 block text-sm font-medium text-[var(--rc-fg)]">Describe your character</label> <textarea data-slot="textarea" class="aria-invalid:ring-destructive/20 rounded-md dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex field-sizing-content w-full px-4 py-2 shadow-md transition-[color,box-shadow] outline-none focus:shadow-xs focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 md:text-sm min-h-[120px] border-2 border-[var(--rc-border)] bg-[var(--rc-bg)] text-[var(--rc-fg)] placeholder:text-[var(--rc-muted)]" id="idea" placeholder="A 90s roller-skating robot with sunglasses..."></textarea><!----></div> <div><label for="email" class="mb-1 block text-sm font-medium text-[var(--rc-fg)]">Email</label> <!--[-1--><input data-slot="input" class="rounded-md selection:bg-primary selection:text-primary-foreground flex h-9 w-full min-w-0 px-4 py-2 text-base shadow-md transition-[color,box-shadow] outline-none focus:shadow-xs focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 md:text-sm aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aria-invalid:shadow-xs aria-invalid:shadow-destructive border-2 border-[var(--rc-border)] bg-[var(--rc-bg)] text-[var(--rc-fg)] placeholder:text-[var(--rc-muted)]" type="email" value="" id="email" placeholder="[email protected]"/><!--]--><!----></div> <!--[-1--><button data-slot="button" class="font-head rounded-md shadow-md text-center shrink-0 inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:shadow-none transition hover:translate-y-1 h-9 px-4 py-2 has-[>svg]:px-3 w-full border-2 border-[var(--rc-border)] bg-[var(--rc-primary)] text-[var(--rc-primary-fg)] hover:bg-[var(--rc-primary)]/90" type="submit" style="box-shadow: 3px 3px 0 0 var(--rc-border);"><!---->Start a custom request<!----></button><!--]--><!----></div></form></div></div></section> <section id="how-it-works" class="bg-[var(--rc-bg)] py-16 md:py-24"><div class="mx-auto max-w-6xl px-4"><div class="mb-10 text-center"><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 px-2.5 py-1.5 text-sm mb-3 border-2 border-[var(--rc-border)] bg-[var(--rc-primary)] text-[var(--rc-primary-fg)] hover:bg-[var(--rc-primary)]"><!---->How it works<!----><!----></span><!----><!----> <h2 class="font-head text-3xl text-[var(--rc-fg)] md:text-5xl">From idea to asset</h2></div> <div class="grid gap-6 md:grid-cols-3"><!--[--><div class="relative rounded-2xl border-2 border-[var(--rc-border)] bg-[var(--rc-card)] p-6" style="box-shadow: 4px 4px 0 0 var(--rc-border);"><div class="mb-4 flex size-12 items-center justify-center rounded-xl border-2 border-[var(--rc-border)] bg-[var(--rc-accent)] text-[var(--rc-fg)]"><!--[--><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-sparkles size-6"><!--[--><!----><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"><!----></path><!----><!----><path d="M20 2v4"><!----></path><!----><!----><path d="M22 4h-4"><!----></path><!----><!----><circle cx="4" cy="20" r="2"><!----></circle><!----><!--]--><!----><!----></svg><!--]--></div> <div class="absolute right-4 top-4 font-head text-4xl text-[var(--rc-border)]/20">01</div> <h3 class="font-head text-lg text-[var(--rc-fg)]">Pick a base</h3> <p class="mt-2 text-sm text-[var(--rc-muted)]">Browse our library of hand-drawn retro characters.</p></div><div class="relative rounded-2xl border-2 border-[var(--rc-border)] bg-[var(--rc-card)] p-6" style="box-shadow: 4px 4px 0 0 var(--rc-border);"><div class="mb-4 flex size-12 items-center justify-center rounded-xl border-2 border-[var(--rc-border)] bg-[var(--rc-accent)] text-[var(--rc-fg)]"><!--[--><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-palette size-6"><!--[--><!----><path d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"><!----></path><!----><!----><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"><!----></circle><!----><!----><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"><!----></circle><!----><!----><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"><!----></circle><!----><!----><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"><!----></circle><!----><!--]--><!----><!----></svg><!--]--></div> <div class="absolute right-4 top-4 font-head text-4xl text-[var(--rc-border)]/20">02</div> <h3 class="font-head text-lg text-[var(--rc-fg)]">Customize looks</h3> <p class="mt-2 text-sm text-[var(--rc-muted)]">Change outfits, colors, accessories, and poses.</p></div><div class="relative rounded-2xl border-2 border-[var(--rc-border)] bg-[var(--rc-card)] p-6" style="box-shadow: 4px 4px 0 0 var(--rc-border);"><div class="mb-4 flex size-12 items-center justify-center rounded-xl border-2 border-[var(--rc-border)] bg-[var(--rc-accent)] text-[var(--rc-fg)]"><!--[--><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-download size-6"><!--[--><!----><path d="M12 15V3"><!----></path><!----><!----><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"><!----></path><!----><!----><path d="m7 10 5 5 5-5"><!----></path><!----><!--]--><!----><!----></svg><!--]--></div> <div class="absolute right-4 top-4 font-head text-4xl text-[var(--rc-border)]/20">03</div> <h3 class="font-head text-lg text-[var(--rc-fg)]">Download & use</h3> <p class="mt-2 text-sm text-[var(--rc-muted)]">Get high-res PNGs, SVGs, or Figma components.</p></div><!--]--></div></div></section> <section class="border-y-2 border-[var(--rc-border)] bg-[var(--rc-bg)] py-16 md:py-24"><div class="mx-auto max-w-6xl px-4"><div class="mb-10 text-center"><!----><span data-slot="badge" class="focus-visible:border-ring rounded-md focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap font-medium transition-[color,box-shadow] focu
86s-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3 px-2.5 py-1.5 text-sm mb-3 border-2 border-[var(--rc-border)] bg-[var(--rc-secondary)] text-[var(--rc-primary-fg)] hover:bg-[var(--rc-secondary)]"><!---->Loved by creators<!----><!----></span><!----><!----> <h2 class="font-head text-3xl text-[var(--rc-fg)] md:text-5xl">What they say</h2></div> <div class="grid gap-6 md:grid-cols-2"><!--[--><div class="rounded-2xl border-2 border-[var(--rc-border)] bg-[var(--rc-card)] p-6" style="box-shadow: 4px 4px 0 0 var(--rc-border);"><div class="mb-4 flex gap-0.5"><!--[--><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-star size-4 fill-[var(--rc-accent)] text-[var(--rc-accent)]"><!--[--><!----><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"><!----></path><!----><!--]--><!----><!----></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-star size-4 fill-[var(--rc-accent)] text-[var(--rc-accent)]"><!--[--><!----><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"><!----></path><!----><!--]--><!----><!----></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-star size-4 fill-[var(--rc-accent)] text-[var(--rc-accent)]"><!--[--><!----><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"><!----></path><!----><!--]--><!----><!----></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-star size-4 fill-[var(--rc-accent)] text-[var(--rc-accent)]"><!--[--><!----><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"><!----></path><!----><!--]--><!----><!----></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-star size-4 fill-[var(--rc-accent)] text-[var(--rc-accent)]"><!--[--><!----><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"><!----></path><!----><!--]--><!----><!----></svg><!--]--></div> <p class="mb-5 text-[var(--rc-fg)]">âThe characters gave our app a warm, nostalgic personality our users love.â</p> <div class="flex items-center gap-3"><img src="https://i.pravatar.cc/150?u=jamie" alt="Jamie Doe" class="size-10 rounded-full border-2 border-[var(--rc-border)] object-cover"/>
86 <div><div class="font-head text-sm text-[var(--rc-fg)]">Jamie Doe</div> <div class="text-xs text-[var(--rc-muted)]">Founder, Pixel Studio</div></div></div></div><div class="rounded-2xl border-2 border-[var(--rc-border)] bg-[var(--rc-card)] p-6" style="box-shadow: 4px 4px 0 0 var(--rc-border);"><div class="mb-4 flex gap-0.5"><!--[--><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-star size-4 fill-[var(--rc-accent)] text-[var(--rc-accent)]"><!--[--><!----><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"><!----></path><!----><!--]--><!----><!----></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-star size-4 fill-[var(--rc-accent)] text-[var(--rc-accent)]"><!--[--><!----><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"><!----></path><!----><!--]--><!----><!----></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-star size-4 fill-[var(--rc-accent)] text-[var(--rc-accent)]"><!--[--><!----><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"><!----></path><!----><!--]--><!----><!----></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-star size-4 fill-[var(--rc-accent)] text-[var(--rc-accent)]"><!--[--><!----><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"><!----></path><!----><!--]--><!----><!----></svg><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-star size-4 fill-[var(--rc-accent)] text-[var(--rc-accent)]"><!--[--><!----><path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"><!----></path><!----><!--]--><!----><!----></svg><!--]--></div> <p class="mb-5 text-[var(--rc-fg)]">âRetro Characters delivered exactly the mascot we had in mind. Fast and playful.â</p> <div class="flex items-center gap-3"><img src="https://i.pravatar.cc/150?u=sam" alt="Sam Lee" class="size-10 rounded-full border-2 border-[var(--rc-border)] object-cover"/>
86 <div><div class="font-head text-sm text-[var(--rc-fg)]">Sam Lee</div> <div class="text-xs text-[var(--rc-muted)]">Design Lead, Arcade Co</div></div></div></div><!--]--></div></div></section> <footer class="bg-[var(--rc-fg)] text-[var(--rc-bg)]"><div class="mx-auto max-w-6xl px-4 py-12"><div class="grid gap-10 md:grid-cols-3"><div><a href="#top" class="flex items-center gap-2 font-head text-2xl"><span class="flex size-8 items-center justify-center rounded-lg bg-[var(--rc-primary)] text-[var(--rc-primary-fg)]"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-sparkles size-5"><!--[--><!----><path d="M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z"><!----></path><!----><!----><path d="M20 2v4"><!----></path><!----><!----><path d="M22 4h-4"><!----></path><!----><!----><circle cx="4" cy="20" r="2"><!----></circle><!----><!--]--><!----><!----></svg><!----></span> Retro Characters</a> <p class="mt-3 max-w-xs text-sm text-[var(--rc-bg)]/70">Hand-drawn cartoon characters with a vintage soul.</p></div> <div><h4 class="mb-3 font-head text-sm uppercase tracking-wide">Links</h4> <ul class="space-y-2"><!--[--><li><a href="#products" rel="external" class="text-sm text-[var(--rc-bg)]/70 hover:text-[var(--rc-bg)]">Shop</a></li><li><a href="#customize" rel="external" class="text-sm text-[var(--rc-bg)]/70 hover:text-[var(--rc-bg)]">Customize</a></li><li><a href="#how-it-works" rel="external" class="text-sm text-[var(--rc-bg)]/70 hover:text-[var(--rc-bg)]">How it works</a></li><li><a href="#contact" rel="external" class="text-sm text-[var(--rc-bg)]/70 hover:text-[var(--rc-bg)]">Contact</a></li><!--]--></ul></div> <div><h4 class="mb-3 font-head text-sm uppercase tracking-wide">Connect</h4> <div class="flex gap-3"><!--[--><!--[0--><a data-slot="button" class="font-head rounded-md shadow-md text-center shrink-0 inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:shadow-none border-2 transition hover:translate-y-1 size-8 border-[var(--rc-bg)]/30 bg-transparent text-[var(--rc-bg)] hover:border-[var(--rc-bg)] hover:bg-[var(--rc-bg)] hover:text-[var(--rc-fg)]" href="#"><!--[--><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-instagram size-4"><!--[--><!----><rect width="20" height="20" x="2" y="2" rx="5" ry="5"><!----></rect><!----><!----><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"><!----></path><!----><!----><line x1="17.5" x2="17.51" y1="6.5" y2="6.5"><!----></line><!----><!--]--><!----><!----></svg><!--]--><!----></a><!--]--><!--[0--><a data-slot="button" class="font-head rounded-md shadow-md text-center shrink-0 inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:shadow-none border-2 transition hover:translate-y-1 size-8 border-[var(--rc-bg)]/30 bg-transparent text-[var(--rc-bg)] hover:border-[var(--rc-bg)] hover:bg-[var(--rc-bg)] hover:text-[var(--rc-fg)]" href="#"><!--[--><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-twitter size-4"><!--[--><!----><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"><!----></path><!----><!--]--><!----><!----></svg><!--]--><!----></a>
86<!--]--><!--[0--><a data-slot="button" class="font-head rounded-md shadow-md text-center shrink-0 inline-flex outline-hidden cursor-pointer duration-200 font-medium items-center justify-center data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 hover:shadow-none border-2 transition hover:translate-y-1 size-8 border-[var(--rc-bg)]/30 bg-transparent text-[var(--rc-bg)] hover:border-[var(--rc-bg)] hover:bg-[var(--rc-bg)] hover:text-[var(--rc-fg)]" href="#"><!--[--><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-facebook size-4"><!--[--><!----><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"><!----></path><!----><!--]--><!----><!----></svg><!--]--><!----></a><!--]--><!--]--></div> <div class="mt-4 flex items-center gap-2 text-sm text-[var(--rc-bg)]/70"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide-icon lucide lucide-mail size-4"><!--[--><!----><path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"><!----></path><!----><!----><rect x="2" y="4" width="20" height="16" rx="2"><!----></rect><!----><!--]--><!----><!----></svg><!----> [email protected]</div></div></div> <!--[--><!--$s34--><!--[-1--><div data-slot="separator" class="shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px my-8 bg-[var(--rc-bg)]/20" id="bits-s34" role="separator" aria-orientation="horizontal" data-orientation="horizontal" data-separator-root=""><!----></div><!--]--><!--]--><!----> <div class="flex flex-col items-center justify-between gap-3 md:flex-row"><span class="text-xs text-[var(--rc-bg)]/60">© 2026 Retro Characters. All rights reserved.</span> <span class="text-xs text-[var(--rc-bg)]/60">Made with retro love.</span></div></div></footer></div><!----></div><!----></div><!--]--><!--]--><!----> <!--[--><!--$s35--><!--[-1--><div data-slot="tabs-content" class="border-border rounded-md mt-2 flex-1 outline-none border-0 p-0 pt-4" id="bits-s35" role="tabpanel" hidden="" tabindex="0" data-value="code" data-state="inactive" data-orientation="horizontal" data-tabs-content=""><!--[--><div class="flex h-24 items-center justify-center rounded-lg border-2 border-foreground
86/10 bg-[#24292e]"><span class="text-sm text-[#e1e4e8]/60">Highlighting code...</span></div><!--]--><!----></div><!--]--><!--]--><!----><!----></div><!--]--><!--]--><!----></div><!--]--></div></div><!--]--><!----></main><!--]--><!--]--><!----><!--]--><!--]--> <!--[-1--><!--]--><!--]--> 87 88
88<script> 89 { 90 91 __sveltekit_1gqoto2 = { 92 base: new URL(".", location).pathname.slice(0, -1) 93 }; 94 95 const element = document.currentScript.parentElement; 96 97 Promise.all([ 98 import("./_app/immutable/entry/start.Bhzkf1w_.js"), 99 import("./_app/immutable/entry/app.DXsuJ8Ij.js") 100 ]).then(([kit, app]) => { 101 kit.start(app, element, { 102 node_ids: [0, 4, 9], 103 data: [null,null,null], 104 form: null, 105 error: null 106 }); 107 }); 108 } 109 </script>
109 110 </div> 111 </body> 112</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.