Align layout with Figma design

.gitignore

@@ -12,6 +12,12 @@ dist
 dist-ssr
 *.local
 
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional eslint cache
+.eslintcache
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

index.html

@@ -7,8 +7,6 @@
 
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link rel="preconnect" href="https://rsms.me/" />
-    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
     <link
       href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap"
       rel="stylesheet"

package-lock.json

@@ -13,6 +13,7 @@
         "@tanstack/react-query": "^5.82.0",
         "@tanstack/react-query-devtools": "^5.82.0",
         "d3": "^7.9.0",
+        "normalize-scss": "^8.0.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "sass": "^1.89.2"
@@ -4565,6 +4566,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/normalize-scss": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-scss/-/normalize-scss-8.0.0.tgz",
+      "integrity": "sha512-C6GXIxQ2LOYWrde27xWbONavmybobxp+V6TY8BiBJw5M+yMNEg2R0WjaeDtmP5JsunFYKvFOvgMAIC0/OxZuJQ==",
+      "license": "(MIT OR GPL-2.0)"
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",

package.json

@@ -9,12 +9,16 @@
     "lint": "eslint .",
     "preview": "vite preview"
   },
+  "browserslist": [
+    "last 2 versions"
+  ],
   "dependencies": {
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^7.2.0",
     "@tanstack/react-query": "^5.82.0",
     "@tanstack/react-query-devtools": "^5.82.0",
     "d3": "^7.9.0",
+    "normalize-scss": "^8.0.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "sass": "^1.89.2"

public/placeholder-instructions.svg

@@ -0,0 +1,112 @@
+<svg width="459" height="459" viewBox="0 0 459 459" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g filter="url(#filter0_d_39_2978)">
+        <rect x="4.83203" y="0.549561" width="450" height="450" rx="20" fill="#F8F9FA"
+            shape-rendering="crispEdges" />
+        <g filter="url(#filter1_d_39_2978)">
+            <rect x="60.0742" y="105.05" width="343" height="304" rx="10" fill="white"
+                shape-rendering="crispEdges" />
+            <path
+                d="M273.492 151.181C272.671 153.231 269.622 152.633 269.636 150.425L269.877 112.245C269.885 110.991 271.031 110.054 272.261 110.295L286.219 113.032C287.449 113.274 288.157 114.575 287.69 115.739L273.492 151.181Z"
+                fill="#FF611A" />
+            <path
+                d="M199.273 133.423C199.348 135.82 195.911 136.294 195.333 133.967L178.72 67.0269C178.434 65.8735 179.21 64.7264 180.387 64.5639L194.854 62.5666C196.031 62.4041 197.09 63.2978 197.127 64.4856L199.273 133.423Z"
+                fill="#148C8E" />
+            <rect x="181.074" y="76" width="263" height="44" rx="10" fill="#FF611A" />
+            <path
+                d="M197.894 91.8C199.961 91.8 201.561 92.3733 202.694 93.52C203.828 94.6533 204.394 96.28 204.394 98.4C204.394 100.507 203.828 102.133 202.694 103.28C201.561 104.427 199.961 105 197.894 105H192.794V91.8H197.894ZM197.754 102.8C199.008 102.8 199.948 102.427 200.574 101.68C201.214 100.92 201.534 99.8267 201.534 98.4C201.534 96.9733 201.214 95.8867 200.574 95.14C199.948 94.38 199.008 94 197.754 94H195.554V102.8H197.754ZM211.529 105.2C210.476 105.2 209.556 104.993 208.769 104.58C207.996 104.167 207.396 103.573 206.969 102.8C206.543 102.027 206.329 101.093 206.329 100C206.329 98.9067 206.543 97.9733 206.969 97.2C207.396 96.4267 207.989 95.8333 208.749 95.42C209.523 95.0067 210.403 94.8 211.389 94.8C212.403 94.8 213.263 95.0067 213.969 95.42C214.676 95.82 215.216 96.3733 215.589 97.08C215.963 97.7733 216.149 98.5667 216.149 99.46C216.149 99.7267 216.143 99.98 216.129 100.22C216.116 100.46 216.096 100.673 216.069 100.86H208.089V98.96H214.869L213.549 99.44C213.549 98.6 213.356 97.9533 212.969 97.5C212.596 97.0467 212.063 96.82 211.369 96.82C210.863 96.82 210.423 96.94 210.049 97.18C209.689 97.42 209.416 97.78 209.229 98.26C209.043 98.7267 208.949 99.32 208.949 100.04C208.949 100.747 209.049 101.333 209.249 101.8C209.463 102.253 209.756 102.593 210.129 102.82C210.516 103.047 210.976 103.16 211.509 103.16C212.096 103.16 212.569 103.047 212.929 102.82C213.289 102.593 213.569 102.28 213.769 101.88L215.949 102.72C215.736 103.24 215.409 103.687 214.969 104.06C214.543 104.433 214.029 104.72 213.429 104.92C212.843 105.107 212.209 105.2 211.529 105.2ZM219.851 93.56C219.278 93.56 218.851 93.44 218.571 93.2C218.291 92.9467 218.151 92.58 218.151 92.1C218.151 91.6067 218.291 91.24 218.571 91C218.851 90.7467 219.278 90.62 219.851 90.62C220.425 90.62 220.851 90.7467 221.131 91C221.411 91.24 221.551 91.6067 221.551 92.1C221.551 92.58 221.411 92.9467 221.131 93.2C220.851 93.44 220.425 93.56 219.851 93.56ZM221.211 95V105H218.471V95H221.211ZM224.116 105V95H226.576L226.736 98L226.396 97.68C226.556 97.0267 226.809 96.4867 227.156 96.06C227.502 95.6333 227.922 95.32 228.416 95.12C228.922 94.9067 229.476 94.8 230.076 94.8C230.769 94.8 231.382 94.9333 231.916 95.2C232.462 95.4667 232.889 95.8733 233.196 96.42C233.516 96.9533 233.676 97.6267 233.676 98.44V105H230.936V99.22C230.936 98.3667 230.769 97.78 230.436 97.46C230.102 97.1267 229.669 96.96 229.136 96.96C228.762 96.96 228.396 97.0533 228.036 97.24C227.689 97.4133 227.402 97.7 227.176 98.1C226.962 98.5 226.856 99.0333 226.856 99.7V105H224.116ZM241.139 105.2C240.085 105.2 239.165 104.993 238.379 104.58C237.605 104.167 237.005 103.573 236.579 102.8C236.152 102.027 235.939 101.093 235.939 100C235.939 98.9067 236.152 97.9733 236.579 97.2C237.005 96.4267 237.599 95.8333 238.359 95.42C239.132 95.0067 240.012 94.8 240.999 94.8C242.012 94.8 242.872 95.0067 243.579 95.42C244.285 95.82 244.825 96.3733 245.199 97.08C245.572 97.7733 245.759 98.5667 245.759 99.46C245.759 99.7267 245.752 99.98 245.739 100.22C245.725 100.46 245.705 100.673 245.679 100.86H237.699V98.96H244.479L243.159 99.44C243.159 98.6 242.965 97.9533 242.579 97.5C242.205 97.0467 241.672 96.82 240.979 96.82C240.472 96.82 240.032 96.94 239.659 97.18C239.299 97.42 239.025 97.78 238.839 98.26C238.652 98.7267 238.559 99.32 238.559 100.04C238.559 100.747 238.659 101.333 238.859 101.8C239.072 102.253 239.365 102.593 239.739 102.82C240.125 103.047 240.585 103.16 241.119 103.16C241.705 103.16 242.179 103.047 242.539 102.82C242.899 102.593 243.179 102.28 243.379 101.88L245.559 102.72C245.345 103.24 245.019 103.687 244.579 104.06C244.152 104.433 243.639 104.72 243.039 104.92C242.452 105.107 241.819 105.2 241.139 105.2ZM254.474 105V91.8H264.374V94.02H257.234V97.3H262.854V99.42H257.234V102.78H264.654V105H254.474ZM268.23 93.56C267.657 93.56 267.23 93.44 266.95 93.2C266.67 92.9467 266.53 92.58 266.53 92.1C266.53 91.6067 266.67 91.24 266.95 91C267.23 90.7467 267.657 90.62 268.23 90.62C268.803 90.62 269.23 90.7467 269.51 91C269.79 91.24 269.93 91.6067 269.93 92.1C269.93 92.58 269.79 92.9467 269.51 93.2C269.23 93.44 268.803 93.56 268.23 93.56ZM269.59 95V105H266.85V95H269.59ZM272.495 105V95H274.955L275.115 98L274.775 97.68C274.935 97.0267 275.188 96.4867 275.535 96.06C275.881 95.6333 276.301 95.32 276.795 95.12C277.301 94.9067 277.855 94.8 278.455 94.8C279.148 94.8 279.761 94.9333 280.295 95.2C280.841 95.4667 281.268 95.8733 281.575 96.42C281.895 96.9533 282.055 97.6267 282.055 98.44V105H279.315V99.22C279.315 98.3667 279.148 97.78 278.815 97.46C278.481 97.1267 278.048 96.96 277.515 96.96C277.141 96.96 276.775 97.0533 276.415 97.24C276.068 97.4133 275.781 97.7 275.555 98.1C275.341 98.5 275.235 99.0333 275.235 99.7V105H272.495ZM294.098 92.62L294.418 94.58C294.364 94.58 294.304 94.58 294.238 94.58C294.184 94.5667 294.124 94.56 294.058 94.56C293.444 94.56 292.984 94.7 292.678 94.98C292.371 95.2467 292.218 95.62 292.218 96.1L291.098 95.64C291.098 95.1067 291.204 94.6133 291.418 94.16C291.631 93.6933 291.944 93.32 292.358 93.04C292.784 92.76Line truncated
+                fill="white" />
+        </g>
+        <rect x="36.1182" y="23" width="289" height="44" rx="10" fill="#148C8E" />
+        <path
+            d="M47.8382 52V38.8H57.7382V41.02H50.5982V44.3H56.2182V46.42H50.5982V49.78H58.0182V52H47.8382ZM61.5944 40.56C61.0211 40.56 60.5944 40.44 60.3144 40.2C60.0344 39.9467 59.8944 39.58 59.8944 39.1C59.8944 38.6067 60.0344 38.24 60.3144 38C60.5944 37.7467 61.0211 37.62 61.5944 37.62C62.1677 37.62 62.5944 37.7467 62.8744 38C63.1544 38.24 63.2944 38.6067 63.2944 39.1C63.2944 39.58 63.1544 39.9467 62.8744 40.2C62.5944 40.44 62.1677 40.56 61.5944 40.56ZM62.9544 42V52H60.2144V42H62.9544ZM65.8589 52V42H68.3189L68.4789 45L68.1389 44.68C68.2989 44.0267 68.5523 43.4867 68.8989 43.06C69.2456 42.6333 69.6656 42.32 70.1589 42.12C70.6656 41.9067 71.2189 41.8 71.8189 41.8C72.5123 41.8 73.1256 41.9333 73.6589 42.2C74.2056 42.4667 74.6323 42.8733 74.9389 43.42C75.2589 43.9533 75.4189 44.6267 75.4189 45.44V52H72.6789V46.22C72.6789 45.3667 72.5123 44.78 72.1789 44.46C71.8456 44.1267 71.4123 43.96 70.8789 43.96C70.5056 43.96 70.1389 44.0533 69.7789 44.24C69.4323 44.4133 69.1456 44.7 68.9189 45.1C68.7056 45.5 68.5989 46.0333 68.5989 46.7V52H65.8589ZM90.455 38.8C91.9484 38.8 93.1217 39.16 93.975 39.88C94.8284 40.6 95.255 41.5667 95.255 42.78C95.255 44.0733 94.8284 45.0667 93.975 45.76C93.1217 46.44 91.955 46.78 90.475 46.78L90.195 46.94H87.355V52H84.635V38.8H90.455ZM90.135 44.84C90.9084 44.84 91.4817 44.6867 91.855 44.38C92.2417 44.06 92.435 43.5733 92.435 42.92C92.435 42.2667 92.2417 41.7867 91.855 41.48C91.4817 41.16 90.9084 41 90.135 41H87.355V44.84H90.135ZM91.755 45.42L96.035 52H92.935L89.395 46.22L91.755 45.42ZM102.393 52.2C101.34 52.2 100.42 51.9933 99.6335 51.58C98.8601 51.1667 98.2601 50.5733 97.8335 49.8C97.4068 49.0267 97.1935 48.0933 97.1935 47C97.1935 45.9067 97.4068 44.9733 97.8335 44.2C98.2601 43.4267 98.8535 42.8333 99.6135 42.42C100.387 42.0067 101.267 41.8 102.253 41.8C103.267 41.8 104.127 42.0067 104.833 42.42C105.54 42.82 106.08 43.3733 106.453 44.08C106.827 44.7733 107.013 45.5667 107.013 46.46C107.013 46.7267 107.007 46.98 106.993 47.22C106.98 47.46 106.96 47.6733 106.933 47.86H98.9535V45.96H105.733L104.413 46.44C104.413 45.6 104.22 44.9533 103.833 44.5C103.46 44.0467 102.927 43.82 102.233 43.82C101.727 43.82 101.287 43.94 100.913 44.18C100.553 44.42 100.28 44.78 100.093 45.26C99.9068 45.7267 99.8135 46.32 99.8135 47.04C99.8135 47.7467 99.9135 48.3333 100.113 48.8C100.327 49.2533 100.62 49.5933 100.993 49.82C101.38 50.0467 101.84 50.16 102.373 50.16C102.96 50.16 103.433 50.0467 103.793 49.82C104.153 49.5933 104.433 49.28 104.633 48.88L106.813 49.72C106.6 50.24 106.273 50.6867 105.833 51.06C105.407 51.4333 104.893 51.72 104.293 51.92C103.707 52.1067 103.073 52.2 102.393 52.2ZM113.876 41.8C114.769 41.8 115.522 41.9333 116.136 42.2C116.762 42.4533 117.262 42.8067 117.636 43.26C118.022 43.7 118.296 44.1933 118.456 44.74L115.896 45.66C115.762 45.06 115.536 44.6067 115.216 44.3C114.896 43.9933 114.462 43.84 113.916 43.84C113.409 43.84 112.976 43.96 112.616 44.2C112.256 44.4267 111.982 44.78 111.796 45.26C111.609 45.7267 111.516 46.3133 111.516 47.02C111.516 47.7267 111.609 48.3133 111.796 48.78C111.996 49.2467 112.276 49.5933 112.636 49.82C113.009 50.0467 113.442 50.16 113.936 50.16C114.336 50.16 114.676 50.0933 114.956 49.96C115.236 49.8133 115.462 49.6067 115.636 49.34C115.822 49.0733 115.949 48.7533 116.016 48.38L118.496 49.18C118.349 49.78 118.076 50.3067 117.676 50.76C117.276 51.2133 116.762 51.5667 116.136 51.82C115.509 52.0733 114.782 52.2 113.956 52.2C112.929 52.2 112.022 51.9933 111.236 51.58C110.449 51.1667 109.842 50.5733 109.416 49.8C108.989 49.0267 108.776 48.0933 108.776 47C108.776 45.9067 108.989 44.9733 109.416 44.2C109.842 43.4267 110.442 42.8333 111.216 42.42C111.989 42.0067 112.876 41.8 113.876 41.8ZM120.625 52V37.62H123.365V43.7C123.685 43.06 124.125 42.5867 124.685 42.28C125.245 41.96 125.878 41.8 126.585 41.8C127.278 41.8 127.891 41.9333 128.425 42.2C128.971 42.4667 129.398 42.8733 129.705 43.42C130.025 43.9533 130.185 44.6267 130.185 45.44V52H127.445V46.24C127.445 45.3733 127.278 44.78 126.945 44.46C126.611 44.1267 126.185 43.96 125.665 43.96C125.278 43.96 124.905 44.0533 124.545 44.24C124.198 44.4133 123.911 44.7067 123.685 45.12C123.471 45.52 123.365 46.0533 123.365 46.72V52H120.625ZM136.469 38.94V48.74C136.469 49.22 136.589 49.5733 136.829 49.8C137.083 50.0133 137.423 50.12 137.849 50.12C138.183 50.12 138.476 50.0733 138.729 49.98C138.983 49.8733 139.209 49.7333 139.409 49.56L139.849 51.38C139.529 51.6333 139.129 51.8333 138.649 51.98C138.169 52.1267 137.663 52.2 137.129 52.2C136.463 52.2 135.869 52.1 135.349 51.9C134.843 51.7 134.443 51.38 134.149 50.94C133.869 50.5 133.729 49.9133 133.729 49.18V39.7L136.469 38.94ZM139.669 42V44.04H131.889V42H139.669ZM146.163 52.2C145.11 52.2 144.19 51.9933 143.403 51.58C142.63 51.1667 142.03 50.5733 141.603 49.8C141.176 49.0267 140.963 48.0933 140.963 47C140.963 45.9067 141.176 44.9733 141.603 44.2C142.03 43.4267 142.623 42.8333 143.383 42.42C144.156 42.0067 145.036 41.8 146.023 41.8C147.036 41.8 147.896 42.0067 148.603 42.42C149.31 42.82 149.85Line truncated
+            fill="white" />
+        <mask id="path-9-outside-1_39_2978" maskUnits="userSpaceOnUse" x="92.8604" y="147.678"
+            width="282" height="60" fill="black">
+            <rect fill="white" x="92.8604" y="147.678" width="282" height="60" />
+            <path d="M92.8604 147.678H374.545V206.673H92.8604V147.678Z" />
+        </mask>
+        <path
+            d="M92.8604 206.673V206.939H93.3898V206.673V206.407H92.8604V206.673ZM94.4488 206.673V206.939H95.5078V206.673V206.407H94.4488V206.673ZM96.5667 206.673V206.939H97.6257V206.673V206.407H96.5667V206.673ZM98.6847 206.673V206.939H99.7436V206.673V206.407H98.6847V206.673ZM100.803 206.673V206.939H101.862V206.673V206.407H100.803V206.673ZM102.921 206.673V206.939H103.979V206.673V206.407H102.921V206.673ZM105.038 206.673V206.939H106.097V206.673V206.407H105.038V206.673ZM107.156 206.673V206.939H108.215V206.673V206.407H107.156V206.673ZM109.274 206.673V206.939H110.333V206.673V206.407H109.274V206.673ZM111.392 206.673V206.939H112.451V206.673V206.407H111.392V206.673ZM113.51 206.673V206.939H114.569V206.673V206.407H113.51V206.673ZM115.628 206.673V206.939H116.687V206.673V206.407H115.628V206.673ZM117.746 206.673V206.939H118.805V206.673V206.407H117.746V206.673ZM119.864 206.673V206.939H120.923V206.673V206.407H119.864V206.673ZM121.982 206.673V206.939H123.041V206.673V206.407H121.982V206.673ZM124.1 206.673V206.939H125.159V206.673V206.407H124.1V206.673ZM126.218 206.673V206.939H127.277V206.673V206.407H126.218V206.673ZM128.336 206.673V206.939H129.395V206.673V206.407H128.336V206.673ZM130.454 206.673V206.939H131.513V206.673V206.407H130.454V206.673ZM132.572 206.673V206.939H133.631V206.673V206.407H132.572V206.673ZM134.689 206.673V206.939H135.748V206.673V206.407H134.689V206.673ZM136.807 206.673V206.939H137.866V206.673V206.407H136.807V206.673ZM138.925 206.673V206.939H139.984V206.673V206.407H138.925V206.673ZM141.043 206.673V206.939H142.102V206.673V206.407H141.043V206.673ZM143.161 206.673V206.939H144.22V206.673V206.407H143.161V206.673ZM145.279 206.673V206.939H146.338V206.673V206.407H145.279V206.673ZM147.397 206.673V206.939H148.456V206.673V206.407H147.397V206.673ZM149.515 206.673V206.939H150.574V206.673V206.407H149.515V206.673ZM151.633 206.673V206.939H152.692V206.673V206.407H151.633V206.673ZM153.751 206.673V206.939H154.81V206.673V206.407H153.751V206.673ZM155.869 206.673V206.939H156.928V206.673V206.407H155.869V206.673ZM157.987 206.673V206.939H159.046V206.673V206.407H157.987V206.673ZM160.105 206.673V206.939H161.164V206.673V206.407H160.105V206.673ZM162.223 206.673V206.939H163.282V206.673V206.407H162.223V206.673ZM164.34 206.673V206.939H165.399V206.673V206.407H164.34V206.673ZM166.458 206.673V206.939H167.517V206.673V206.407H166.458V206.673ZM168.576 206.673V206.939H169.635V206.673V206.407H168.576V206.673ZM170.694 206.673V206.939H171.753V206.673V206.407H170.694V206.673ZM172.812 206.673V206.939H173.871V206.673V206.407H172.812V206.673ZM174.93 206.673V206.939H175.989V206.673V206.407H174.93V206.673ZM177.048 206.673V206.939H178.107V206.673V206.407H177.048V206.673ZM179.166 206.673V206.939H180.225V206.673V206.407H179.166V206.673ZM181.284 206.673V206.939H182.343V206.673V206.407H181.284V206.673ZM183.402 206.673V206.939H184.461V206.673V206.407H183.402V206.673ZM185.52 206.673V206.939H186.579V206.673V206.407H185.52V206.673ZM187.638 206.673V206.939H188.697V206.673V206.407H187.638V206.673ZM189.756 206.673V206.939H190.815V206.673V206.407H189.756V206.673ZM191.874 206.673V206.939H192.933V206.673V206.407H191.874V206.673ZM193.992 206.673V206.939H195.051V206.673V206.407H193.992V206.673ZM196.11 206.673V206.939H197.168V206.673V206.407H196.11V206.673ZM198.227 206.673V206.939H199.286V206.673V206.407H198.227V206.673ZM200.345 206.673V206.939H201.404V206.673V206.407H200.345V206.673ZM202.463 206.673V206.939H203.522V206.673V206.407H202.463V206.673ZM204.581 206.673V206.939H205.64V206.673V206.407H204.581V206.673ZM206.699 206.673V206.939H207.758V206.673V206.407H206.699V206.673ZM208.817 206.673V206.939H209.876V206.673V206.407H208.817V206.673ZM210.935 206.673V206.939H211.994V206.673V206.407H210.935V206.673ZM213.053 206.673V206.939H214.112V206.673V206.407H213.053V206.673ZM215.171 206.673V206.939H216.23V206.673V206.407H215.171V206.673ZM217.289 206.673V206.939H218.348V206.673V206.407H217.289V206.673ZM219.407 206.673V206.939H220.466V206.673V206.407H219.407V206.673ZM221.525 206.673V206.939H222.584V206.673V206.407H221.525V206.673ZM223.643 206.673V206.939H224.702V206.673V206.407H223.643V206.673ZM225.761 206.673V206.939H226.82V206.673V206.407H225.761V206.673ZM227.878 206.673V206.939H228.937V206.673V206.407H227.878V206.673ZM229.996 206.673V206.939H231.055V206.673V206.407H229.996V206.673ZM232.114 206.673V206.939H233.173V206.673V206.407H232.114V206.673ZM234.232 206.673V206.939H235.291V206.673V206.407H234.232V206.673ZM236.35 206.673V206.939H237.409V206.673V206.407H236.35V206.673ZM238.468 206.673V206.939H239.527V206.673V206.407H238.468V206.673ZM240.586 206.673V206.939H241.645V206.673V206.407H240.586V206.673ZM242.704 206.673V206.939H243.763V206.673V206.407H242.704V206.673ZM244.822 206.673V206.939H245.881V206.673V206.407H244.822V206.673ZM246.94 206.673V206.939H247.999V206.673V206.407H246.94V206.673ZM249.058 206.673V206.939H250.117V206.673V206.407H249.058V206.673ZM251.176 206.673V206.939H252.235V206.673V206.407H251.176V206.673ZM253.294 206.673V206.939H254.352V206.673V206.407H253.294V206.673ZM2Line truncated
+            fill="black" mask="url(#path-9-outside-1_39_2978)" />
+        <rect width="12.7555" height="12.7555" transform="translate(92.8604 178.504)" fill="#CCD0DB" />
+        <rect width="12.7555" height="12.7555" transform="translate(108.273 178.504)" fill="#CCD0DB" />
+        <rect width="12.7555" height="12.7555" transform="translate(123.686 178.504)" fill="#CCD0DB" />
+        <rect width="12.7555" height="12.7555" transform="translate(92.8604 193.917)" fill="#CCD0DB" />
+        <rect width="12.7555" height="12.7555" transform="translate(108.273 193.917)" fill="#CCD0DB" />
+        <rect width="12.7555" height="12.7555" transform="translate(123.686 193.917)" fill="#CCD0DB" />
+        <rect width="12.7555" height="12.7555" transform="translate(152.386 147.678)" fill="#9CD8D9" />
+        <rect width="12.7555" height="12.7555" transform="translate(167.799 147.678)" fill="#9CD8D9" />
+        <rect width="12.7555" height="12.7555" transform="translate(183.212 147.678)" fill="#9CD8D9" />
+        <rect width="12.7555" height="12.7555" transform="translate(152.386 163.091)" fill="#9CD8D9" />
+        <rect width="12.7555" height="12.7555" transform="translate(167.799 163.091)" fill="#9CD8D9" />
+        <rect width="12.7555" height="12.7555" transform="translate(183.212 163.091)" fill="#9CD8D9" />
+        <rect width="12.7555" height="12.7555" transform="translate(152.386 178.504)" fill="#9CD8D9" />
+        <rect width="12.7555" height="12.7555" transform="translate(167.799 178.504)" fill="#9CD8D9" />
+        <rect width="12.7555" height="12.7555" transform="translate(183.212 178.504)" fill="#9CD8D9" />
+        <rect width="12.7555" height="12.7555" transform="translate(152.386 193.917)" fill="#9CD8D9" />
+        <rect width="12.7555" height="12.7555" transform="translate(167.799 193.917)" fill="#9CD8D9" />
+        <rect width="12.7555" height="12.7555" transform="translate(183.212 193.917)" fill="#9CD8D9" />
+        <rect width="12.7555" height="12.7555" transform="translate(211.912 163.091)" fill="#42B5B7" />
+        <rect width="12.7555" height="12.7555" transform="translate(227.325 163.092)" fill="#42B5B7" />
+        <rect width="12.7555" height="12.7555" transform="translate(242.738 163.092)" fill="#FF7D43" />
+        <rect width="12.7555" height="12.7555" transform="translate(211.912 178.505)" fill="#42B5B7" />
+        <rect width="12.7555" height="12.7555" transform="translate(227.325 178.505)" fill="#42B5B7" />
+        <rect width="12.7555" height="12.7555" transform="translate(242.738 178.505)" fill="#42B5B7" />
+        <rect width="12.7555" height="12.7555" transform="translate(211.912 193.917)" fill="#42B5B7" />
+        <rect width="12.7555" height="12.7555" transform="translate(227.325 193.917)" fill="#42B5B7" />
+        <rect width="12.7555" height="12.7555" transform="translate(242.738 193.917)" fill="#42B5B7" />
+        <rect width="12.7555" height="12.7555" transform="translate(271.438 178.504)" fill="#148C8E" />
+        <rect width="12.7555" height="12.7555" transform="translate(286.851 178.504)" fill="#148C8E" />
+        <rect width="12.7555" height="12.7555" transform="translate(302.264 178.504)" fill="#148C8E" />
+        <rect width="12.7555" height="12.7555" transform="translate(271.438 193.917)" fill="#148C8E" />
+        <rect width="12.7555" height="12.7555" transform="translate(286.851 193.917)" fill="#148C8E" />
+        <rect width="12.7555" height="12.7555" transform="translate(302.264 193.917)" fill="#148C8E" />
+        <rect width="12.7555" height="12.7555" transform="translate(330.964 163.091)" fill="#366768" />
+        <rect width="12.7555" height="12.7555" transform="translate(346.377 163.092)" fill="#366768" />
+        <rect width="12.7555" height="12.7555" transform="translate(361.79 163.092)" fill="#366768" />
+        <rect width="12.7555" height="12.7555" transform="translate(330.964 178.505)" fill="#366768" />
+        <rect width="12.7555" height="12.7555" transform="translate(346.377 178.505)" fill="#366768" />
+        <rect width="12.7555" height="12.7555" transform="translate(361.79 178.505)" fill="#366768" />
+        <rect width="12.7555" height="12.7555" transform="translate(330.964 193.917)" fill="#366768" />
+        <rect width="12.7555" height="12.7555" transform="translate(346.377 193.917)" fill="#366768" />
+        <rect width="12.7555" height="12.7555" transform="translate(361.79 193.917)" fill="#366768" />
+        <path
+            d="M95.1094 261.411V260.14H121.116V261.411H95.1094ZM98.7269 258.868C98.1413 258.868 97.6528 258.672 97.2613 258.28C96.8698 257.888 96.6736 257.399 96.6728 256.814V244.397C96.6728 243.813 96.869 243.324 97.2613 242.932C97.6536 242.539 98.1417 242.344 98.7256 242.344H117.499C118.084 242.344 118.572 242.54 118.964 242.932C119.355 243.323 119.551 243.812 119.552 244.397V256.816C119.552 257.4 119.356 257.888 118.964 258.28C118.571 258.671 118.083 258.868 117.498 258.868H98.7269ZM98.7269 257.597H117.499C117.694 257.597 117.873 257.516 118.037 257.352C118.201 257.189 118.282 257.009 118.281 256.814V244.397C118.281 244.202 118.2 244.023 118.037 243.86C117.873 243.696 117.694 243.614 117.498 243.614H98.7269C98.5311 243.614 98.3515 243.696 98.1879 243.86C98.0252 244.022 97.9439 244.202 97.9439 244.397V256.816C97.9439 257.011 98.0252 257.189 98.1879 257.352C98.3506 257.515 98.5298 257.597 98.7256 257.597"
+            fill="black" />
+        <path
+            d="M147.435 245.726L141.395 252.586L141.175 252.366L137.875 256.106L137.455 253.546L144.235 245.726H147.435ZM138.815 245.726V258.926H136.055V245.726H138.815ZM142.155 250.286L147.595 258.926H144.435L140.035 251.826L142.155 250.286ZM152.389 245.726V258.926H149.629V245.726H152.389ZM162.841 252.446V254.806H155.781V252.446H162.841ZM170.621 245.526C171.821 245.526 172.874 245.732 173.781 246.146C174.688 246.559 175.461 247.172 176.101 247.986L174.561 249.766C174.014 249.072 173.414 248.566 172.761 248.246C172.121 247.912 171.374 247.746 170.521 247.746C169.961 247.746 169.494 247.819 169.121 247.966C168.761 248.112 168.494 248.306 168.321 248.546C168.161 248.786 168.081 249.052 168.081 249.346C168.081 249.706 168.221 250.012 168.501 250.266C168.781 250.506 169.261 250.706 169.941 250.866L172.401 251.426C173.708 251.719 174.641 252.159 175.201 252.746C175.774 253.319 176.061 254.066 176.061 254.986C176.061 255.852 175.834 256.599 175.381 257.226C174.928 257.839 174.294 258.312 173.481 258.646C172.668 258.966 171.734 259.126 170.681 259.126C169.761 259.126 168.914 259.019 168.141 258.806C167.381 258.579 166.701 258.272 166.101 257.886C165.501 257.499 165.001 257.052 164.601 256.546L166.161 254.686C166.468 255.112 166.848 255.492 167.301 255.826C167.754 256.159 168.268 256.426 168.841 256.626C169.428 256.812 170.041 256.906 170.681 256.906C171.228 256.906 171.688 256.846 172.061 256.726C172.448 256.592 172.734 256.412 172.921 256.186C173.121 255.946 173.221 255.659 173.221 255.326C173.221 254.979 173.101 254.686 172.861 254.446C172.634 254.192 172.208 253.999 171.581 253.866L168.901 253.266C168.128 253.079 167.461 252.839 166.901 252.546C166.354 252.239 165.934 251.852 165.641 251.386C165.361 250.906 165.221 250.339 165.221 249.686C165.221 248.899 165.434 248.192 165.861 247.566C166.288 246.939 166.901 246.446 167.701 246.086C168.514 245.712 169.488 245.526 170.621 245.526ZM188.572 248.926L183.952 253.746L183.412 254.006L180.412 257.226L180.372 254.306L185.452 248.926H188.572ZM181.132 244.546V258.926H178.392V244.546H181.132ZM184.332 252.106L188.812 258.926H185.712L182.452 253.706L184.332 252.106ZM191.803 247.486C191.23 247.486 190.803 247.366 190.523 247.126C190.243 246.872 190.103 246.506 190.103 246.026C190.103 245.532 190.243 245.166 190.523 244.926C190.803 244.672 191.23 244.546 191.803 244.546C192.377 244.546 192.803 244.672 193.083 244.926C193.363 245.166 193.503 245.532 193.503 246.026C193.503 246.506 193.363 246.872 193.083 247.126C192.803 247.366 192.377 247.486 191.803 247.486ZM193.163 248.926V258.926H190.423V248.926H193.163ZM198.768 244.546V255.846C198.768 256.312 198.848 256.639 199.008 256.826C199.168 257.012 199.435 257.106 199.808 257.106C200.035 257.106 200.221 257.092 200.368 257.066C200.515 257.026 200.701 256.972 200.928 256.906L200.688 258.706C200.461 258.839 200.175 258.939 199.828 259.006C199.495 259.086 199.161 259.126 198.828 259.126C197.855 259.126 197.141 258.892 196.688 258.426C196.248 257.946 196.028 257.186 196.028 256.146V244.546H198.768ZM205.155 244.546V255.846C205.155 256.312 205.235 256.639 205.395 256.826C205.555 257.012 205.821 257.106 206.195 257.106C206.421 257.106 206.608 257.092 206.755 257.066C206.901 257.026 207.088 256.972 207.315 256.906L207.075 258.706C206.848 258.839 206.561 258.939 206.215 259.006C205.881 259.086 205.548 259.126 205.215 259.126C204.241 259.126 203.528 258.892 203.075 258.426C202.635 257.946 202.415 257.186 202.415 256.146V244.546H205.155ZM226.185 245.726L220.145 252.586L219.925 252.366L216.625 256.106L216.205 253.546L222.985 245.726H226.185ZM217.565 245.726V258.926H214.805V245.726H217.565ZM220.905 250.286L226.345 258.926H223.185L218.785 251.826L220.905 250.286ZM233.623 252.546C233.623 251.972 233.457 251.526 233.123 251.206C232.803 250.886 232.377 250.726 231.843 250.726C231.35 250.726 230.917 250.852 230.543 251.106C230.17 251.359 229.897 251.779 229.723 252.366L227.383 251.646C227.61 250.766 228.103 250.059 228.863 249.526C229.637 248.992 230.67 248.726 231.963 248.726C232.843 248.726 233.61 248.866 234.263 249.146C234.917 249.412 235.423 249.819 235.783 250.366C236.157 250.912 236.343 251.599 236.343 252.426V256.486C236.343 256.992 236.583 257.246 237.063 257.246C237.29 257.246 237.503 257.212 237.703 257.146L237.543 258.846C237.197 259.019 236.763 259.106 236.243 259.106C235.777 259.106 235.357 259.026 234.983 258.866C234.61 258.706 234.317 258.466 234.103 258.146C233.89 257.812 233.783 257.399 233.783 256.906V256.826L234.263 256.746C234.183 257.252 233.963 257.686 233.603 258.046C233.243 258.392 232.803 258.659 232.283 258.846C231.777 259.032 231.25 259.126 230.703 259.126C230.023 259.126 229.437 259.026 228.943 258.826C228.45 258.612 228.07 258.306 227.803 257.906C227.537 257.506 227.403 257.012 227.403 256.426C227.403 255.679 227.643 255.072 228.123 254.606C228.603 254.126 229.29 253.799 230.183 253.626L233.943 252.866L233.923 254.566L231.523 255.046C231.07 255.139 230.723 255.266 230.483 255.426C230.257 255.572 230.143 255.819 230.14Line truncated
+            fill="#052433" />
+        <path
+            d="M102.21 302.306L97.9016 306.719L97.7221 306.913L95.0743 309.621V308.005L100.639 302.306H102.21ZM95.6727 302.306V312.179H94.476V302.306H95.6727ZM98.0213 305.956L102.255 312.179H100.819L97.034 306.629L98.0213 305.956ZM106.396 312.328C105.918 312.328 105.464 312.239 105.035 312.059C104.616 311.88 104.272 311.59 104.003 311.191C103.744 310.783 103.614 310.254 103.614 309.606V304.699H104.811V309.292C104.811 310.05 104.975 310.573 105.304 310.862C105.633 311.142 106.097 311.281 106.696 311.281C106.975 311.281 107.249 311.236 107.518 311.147C107.788 311.047 108.027 310.897 108.236 310.698C108.456 310.488 108.625 310.224 108.745 309.905C108.875 309.586 108.939 309.207 108.939 308.768V304.699H110.136V312.179H109.089L109.014 311.042C108.755 311.491 108.401 311.82 107.952 312.029C107.513 312.229 106.995 312.328 106.396 312.328ZM112.921 312.179V304.699H113.894L114.058 305.926C114.268 305.467 114.572 305.123 114.971 304.894C115.38 304.664 115.873 304.549 116.452 304.549C116.581 304.549 116.721 304.559 116.871 304.579C117.03 304.599 117.165 304.639 117.275 304.699L117.065 305.791C116.955 305.751 116.836 305.721 116.706 305.701C116.576 305.681 116.392 305.671 116.153 305.671C115.843 305.671 115.529 305.761 115.21 305.941C114.901 306.12 114.642 306.394 114.432 306.763C114.223 307.122 114.118 307.581 114.118 308.14V312.179H112.921ZM118.489 312.179V311.266L122.409 306.674L123.351 305.701L122.02 305.731H118.534V304.699H124.682V305.612L120.763 310.204L119.836 311.176L121.287 311.147H124.802V312.179H118.489ZM130.028 312.328C129.32 312.328 128.687 312.174 128.129 311.865C127.58 311.555 127.151 311.112 126.842 310.533C126.533 309.945 126.378 309.247 126.378 308.439C126.378 307.631 126.533 306.938 126.842 306.36C127.151 305.771 127.575 305.322 128.114 305.013C128.652 304.704 129.265 304.549 129.954 304.549C130.652 304.549 131.245 304.699 131.734 304.998C132.232 305.297 132.611 305.706 132.871 306.225C133.13 306.734 133.26 307.307 133.26 307.945C133.26 308.115 133.255 308.269 133.245 308.409C133.235 308.549 133.22 308.673 133.2 308.783H127.156V307.721H132.676L132.063 307.841C132.063 307.122 131.863 306.569 131.464 306.18C131.076 305.791 130.562 305.597 129.924 305.597C129.435 305.597 129.011 305.711 128.652 305.941C128.303 306.16 128.029 306.484 127.829 306.913C127.64 307.332 127.545 307.841 127.545 308.439C127.545 309.027 127.645 309.536 127.844 309.965C128.044 310.394 128.323 310.723 128.682 310.952C129.051 311.171 129.49 311.281 129.998 311.281C130.547 311.281 130.991 311.176 131.33 310.967C131.679 310.758 131.958 310.473 132.168 310.114L133.11 310.668C132.921 311.007 132.676 311.301 132.377 311.55C132.088 311.8 131.744 311.994 131.345 312.134C130.956 312.263 130.517 312.328 130.028 312.328ZM135.536 312.179V304.699H136.508L136.673 305.926C136.882 305.467 137.186 305.123 137.585 304.894C137.994 304.664 138.488 304.549 139.066 304.549C139.196 304.549 139.335 304.559 139.485 304.579C139.644 304.599 139.779 304.639 139.889 304.699L139.679 305.791C139.57 305.751 139.45 305.721 139.32 305.701C139.191 305.681 139.006 305.671 138.767 305.671C138.458 305.671 138.144 305.761 137.824 305.941C137.515 306.12 137.256 306.394 137.046 306.763C136.837 307.122 136.732 307.581 136.732 308.14V312.179H135.536ZM148.209 304.699L144.978 307.93L144.694 308.215L142.24 310.668V309.172L146.698 304.699H148.209ZM142.839 301.258V312.179H141.642V301.258H142.839ZM145.083 307.317L148.389 312.179H146.938L144.08 307.99L145.083 307.317ZM151.267 301.258V310.279C151.267 310.658 151.336 310.922 151.476 311.072C151.616 311.211 151.84 311.281 152.149 311.281C152.349 311.281 152.513 311.266 152.643 311.236C152.772 311.206 152.947 311.152 153.166 311.072L152.972 312.119C152.812 312.189 152.638 312.239 152.448 312.268C152.259 312.308 152.064 312.328 151.865 312.328C151.257 312.328 150.803 312.164 150.504 311.835C150.214 311.506 150.07 311.002 150.07 310.324V301.258H151.267ZM159.07 307.347C159.07 306.788 158.921 306.36 158.621 306.06C158.322 305.751 157.898 305.597 157.35 305.597C156.831 305.597 156.393 305.711 156.034 305.941C155.675 306.16 155.41 306.519 155.241 307.018L154.268 306.419C154.468 305.861 154.837 305.412 155.375 305.073C155.914 304.724 156.582 304.549 157.38 304.549C157.918 304.549 158.407 304.644 158.846 304.834C159.285 305.013 159.629 305.292 159.878 305.671C160.137 306.04 160.267 306.519 160.267 307.108V310.728C160.267 311.087 160.456 311.266 160.835 311.266C161.025 311.266 161.209 311.241 161.389 311.191L161.329 312.134C161.13 312.234 160.87 312.283 160.551 312.283C160.262 312.283 160.003 312.229 159.773 312.119C159.544 312.009 159.364 311.845 159.235 311.625C159.105 311.396 159.04 311.112 159.04 310.773V310.623L159.34 310.668C159.22 311.057 159.015 311.376 158.726 311.625C158.437 311.865 158.113 312.044 157.754 312.164C157.395 312.273 157.041 312.328 156.692 312.328C156.253 312.328 155.844 312.254 155.465 312.104C155.086 311.954 154.782 311.73 154.553 311.431C154.333 311.122 154.223 310.743 154.223 310.294C154.223 309.735 154.408 309.277 Line truncated
+            fill="#052433" />
+    </g>
+    <defs>
+        <filter id="filter0_d_39_2978" x="0.832031" y="0.549561" width="458" height="458"
+            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix"
+                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+            <feOffset dy="4" />
+            <feGaussianBlur stdDeviation="2" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_39_2978" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_39_2978"
+                result="shape" />
+        </filter>
+        <filter id="filter1_d_39_2978" x="58.3143" y="62.5475" width="387.52" height="350.022"
+            filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix in="SourceAlpha" type="matrix"
+                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+            <feOffset dy="1.75991" />
+            <feGaussianBlur stdDeviation="0.879956" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_39_2978" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_39_2978"
+                result="shape" />
+        </filter>
+    </defs>
+</svg>
+    

public/vite.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

src/App.tsx

@@ -1,62 +1,73 @@
 import { useQuery } from "@tanstack/react-query";
 import * as d3 from "d3";
-import { useEffect, useState } from "react";
+
-import Legend from "./components/Legend";
-import QRCode from "./components/QRCode";
-import { QuestionGroupChart } from "./components/QuestionGroupChart";
-import { config } from "./config";
-import { getSampleData } from "./lib/data";
 import { fetchCategoryMetadata } from "./lib/metadata";
 
+import { Instructions } from "./components/Instructions";
+import Legend from "./components/Legend";
+import QRCode from "./components/QRCode";
+import { WaffleChart } from "./components/WaffleChart";
+
+import { fetchGoogleSheet } from "./lib/parser";
+import "./styles/App.scss";
+
 function App() {
-  const { data: categoryMetadata } = useQuery({
+  const metadataQuery = useQuery({
     queryKey: ["categoryMetadata"],
     queryFn: fetchCategoryMetadata,
   });
-  const { data, isPending, isError } = useQuery({
+  const responseQuery = useQuery({
     queryKey: ["responses"],
-    queryFn: getSampleData,
+    queryFn: fetchGoogleSheet,
-    refetchInterval: 2 * 1000, // Refresh every 5 seconds
+    // queryFn: getSampleData,
+    refetchInterval: 5 * 1000, // Refresh every 5 seconds
   });
 
-  if (isPending) return <div>Loading...</div>;
+  if (metadataQuery.isPending || responseQuery.isPending)
-  if (isError) return <div>Error loading data</div>;
+    return <div>Loading...</div>;
+  if (metadataQuery.isError || responseQuery.isError)
+    return <div>Error loading data</div>;
 
-  if (!data.length) return null;
+  // Sort responses by timestamp to easily find the latest response
+  const responses = responseQuery.data.sort(
+    (a, b) => a.timestamp - b.timestamp
+  );
+  const categoryMetadata = metadataQuery.data;
+
+  if (!responses.length) return null;
 
   // Group data by question (outside the component)
   const questionGroups = Array.from(
-    d3.group(data, (d) => d.question).entries()
+    d3.group(responses, (d) => d.question).entries()
   );
 
-  // Get unique response categories (sorted for consistent ordering)
-  const allResponses = [...new Set(data.map((d) => d.response))];
-  const sortedResponses = allResponses.sort((a, b) => a - b);
-
   // Create scales
-  const xScale = d3
-    .scaleBand()
-    .domain(sortedResponses)
-    .range([0, sortedResponses.length * config.groupSpacing]);
   return (
-    <>
+    <div className="layout">
       <div className="chart-container">
         <div className="charts">
           {questionGroups.map(([question, groupData]) => (
-            <QuestionGroupChart
+            <WaffleChart
               key={question}
               question={question}
               metadata={categoryMetadata.find((m) => m.category === question)}
               groupData={groupData}
-              responses={sortedResponses}
+              responses={[...new Set(responses.map((d) => d.response))]}
-              xScale={xScale}
+              latestResponseTimestamp={
+                responses[responses.length - 1].timestamp
+              }
             />
           ))}
         </div>
         <Legend />
       </div>
+      <div className="qr">
         <QRCode />
-    </>
+      </div>
+      <div className="instructions">
+        <Instructions />
+      </div>
+    </div>
   );
 }
 

src/components/Instructions.tsx

@@ -0,0 +1,7 @@
+export function Instructions() {
+  return (
+    <>
+      <img width="400" src="/placeholder-instructions.svg" alt="Instructions" />
+    </>
+  );
+}

src/components/QRCode.tsx

@@ -8,8 +8,12 @@ export default function QRCode() {
         Scanne den Code und zeige, welche KI-Skills du mitbringst — ganz
         egal, auf welchem Level du bist.
       </p>
-      <div className="qr-code bracket-frame">
+      <div className="qr-code">
-        <img src="/qr_code_ki-skills-umfrage.png" />
+        <img
+          className="viewfinder"
+          src="/qr_code_ki-skills-umfrage.png"
+          alt="QR Code"
+        />
       </div>
     </div>
   );

src/components/WaffleChart.tsx

@@ -1,25 +1,27 @@
 import MaterialIcon from "@mui/material/Icon";
 import * as d3 from "d3";
 import { useEffect, useRef } from "react";
+
 import { colorScheme, config } from "../config";
-
 import { CategoryMetadata } from "../lib/metadata";
+import { ResponseData } from "../lib/parser";
 
-import "./Chart.css";
+import "../styles/Chart.scss";
 
 interface QuestionGroupChartProps {
   question: string;
   metadata?: CategoryMetadata;
-  groupData: { response: string }[];
+  groupData: ResponseData[];
-  responses: string[];
+  responses: number[];
-  xScale: d3.ScaleBand<string>;
+  latestResponseTimestamp: number;
 }
 
 function makeDot(
   g: d3.Selection<SVGGElement, unknown, null, undefined>,
   dotX: number,
   dotY: number
-) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+): d3.Selection<any, unknown, null, undefined> {
   const shape = config.dotShape;
   if (shape === "circle") {
     return g
@@ -40,23 +42,30 @@ function makeDot(
   throw new Error(`Unsupported shape: ${shape}`);
 }
 
-export function QuestionGroupChart({
+export function WaffleChart({
   question,
   metadata,
   groupData,
   responses,
-  xScale,
+  latestResponseTimestamp,
 }: QuestionGroupChartProps) {
   const svgRef = useRef(null);
 
   useEffect(() => {
+    const sortedResponses = [...responses].sort((a, b) => a - b);
+
+    const chartHeight = config.chartHeight;
+    const chartWidth = responses.length * config.groupSpacing;
+    const xScale = d3
+      .scaleBand<number>()
+      .domain([0, 1, 2, 3, 4])
+      .range([0, chartWidth]);
+
     // Clear SVG
     d3.select(svgRef.current).selectAll("*").remove();
 
     // Group responses by category (within this group only)
     const responseGroups = d3.group(groupData, (d) => d.response);
-    const chartHeight = config.chartHeight;
-    const chartWidth = xScale.range()[1];
 
     const svg = d3
       .select(svgRef.current)
@@ -64,25 +73,45 @@ export function QuestionGroupChart({
       .attr("height", chartHeight);
     const g = svg.append("g");
 
+    // Create x-axis
+    if (config.renderXAxis) {
+      const axisY = chartHeight - config.dotRadius - config.dotSpacing;
+      g.append("line")
+        .attr("x1", 0)
+        .attr("y1", axisY)
+        .attr("x2", chartWidth)
+        .attr("y2", axisY)
+        .attr("stroke", "#000")
+        .attr("stroke-width", 0.5)
+        .attr("stroke-dasharray", "2,2");
+    }
+
     // Dots
-    responses.forEach((response) => {
+    sortedResponses.forEach((response) => {
       const responseData = responseGroups.get(response) || [];
-      const x = xScale(response) || 0;
+      // Use xScale(response) as the group center
-      responseData.forEach((_, index) => {
+      const x = (xScale(response) || 0) + config.dotRadius;
+      responseData.forEach((entry, index) => {
         const row = Math.floor(index / config.columnsPerGroup);
         const col = index % config.columnsPerGroup;
         const dotX =
           x +
-          xScale.bandwidth() / 2 +
           (col - (config.columnsPerGroup - 1) / 2) *
             (config.dotRadius * 2 + config.dotSpacing);
         const dotY =
           chartHeight - (row + 1) * (config.dotRadius * 2 + config.dotSpacing);
 
-        makeDot(g, dotX, dotY).attr("fill", colorScheme[response] || "#666");
+        const dot = makeDot(g, dotX, dotY).attr(
+          "fill",
+          colorScheme[response] || "#666"
+        );
+        const isLatest = entry.timestamp === latestResponseTimestamp;
+        if (isLatest) {
+          dot.attr("class", "latest");
+        }
       });
     });
-  }, [groupData, responses, xScale, question]);
+  }, [groupData, responses, question, latestResponseTimestamp]);
   return (
     <div className="question-group">
       <svg ref={svgRef}></svg>
@@ -94,5 +123,3 @@ export function QuestionGroupChart({
     </div>
   );
 }
-
-export default QuestionGroupChart;

src/config.ts

@@ -1,15 +1,16 @@
-const dotRadius = 8;
+const dotRadius = 7;
-const dotSpacing = 2;
+const dotSpacing = 1;
 const columnsPerGroup = 3;
-const groupGap = 8;
+const groupGap = dotRadius;
 
 export const config = {
   dotRadius,
   dotSpacing,
   columnsPerGroup,
   groupSpacing: (2 * dotRadius + dotSpacing) * columnsPerGroup + groupGap,
-  chartHeight: 150,
+  chartHeight: 50,
   dotShape: "rect", // "circle" or "rect"
+  renderXAxis: true, // Whether to render the x-axis
 };
 
 // Color scheme for Likert scale responses

src/styles/App.scss

@@ -0,0 +1,78 @@
+@use "shared" as *;
+
+.layout {
+  display: grid;
+  grid-template-areas:
+    "main qr"
+    "main instructions";
+  grid-template-columns: auto 400px;
+  grid-template-rows: 1fr 1fr;
+  grid-gap: 36px;
+
+  margin: 75px 50px;
+}
+
+.chart-container {
+  @include rounded;
+  @include shadow;
+
+  grid-area: main;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  padding: 75px 50px;
+  margin: 0;
+  gap: 50px;
+
+  background-color: $bg-grey;
+}
+
+.charts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 25px;
+}
+
+.qr {
+  grid-area: qr;
+}
+
+.instructions {
+  grid-area: instructions;
+}
+
+.question-group {
+  @include shadow-small;
+
+  background-color: #ffffff;
+  border-radius: 4px;
+
+  padding: 28px 14px;
+
+  flex: 0 1 250px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+
+  svg {
+    align-self: center;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  .question-title {
+    margin-block: 13px;
+
+    font-size: 15px;
+    font-weight: 600;
+
+    .material-icons {
+      vertical-align: middle;
+      margin-right: 0.5rem;
+    }
+  }
+}

src/styles/Chart.scss

@@ -1,10 +1,12 @@
+@use "shared" as *;
+
 .dot {
   stroke: #fff;
   stroke-width: 1;
 }
 
-.selected {
+.latest {
-  fill: rgb(223 110 38);
+  fill: rgba(255, 125, 67, 1); //$aai-orange;
 }
 
 .axis-label {

src/styles/Legend.scss

@@ -6,18 +6,21 @@
     width: 32px;
     height: 32px;
     border-radius: 4px;
-    margin-right: 8px;
+    margin-right: 5px;
     vertical-align: middle;
     @include shadow;
   }
 
   ul {
     list-style: none;
-    margin: 16px;
+
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: center;
-    gap: 16px;
+    gap: 20px;
+
+    padding: 0;
+    margin: 0;
   }
 }

src/styles/QRCode.scss

@@ -2,13 +2,12 @@
 
 .qr-code-container {
   @include rounded;
+  @include shadow;
 
   background-color: $aai-orange;
-  flex-basis: 20%;
+  padding: 40px 25px;
-  flex-shrink: 0;
-  padding: 16px;
 
-  color: #fff;
+  color: $bg-grey;
 
   display: flex;
   flex-direction: column;
@@ -16,14 +15,92 @@
 
   p {
     text-align: center;
+    font-size: 20px;
   }
 
+  .qr-code {
+    display: flex;
+    justify-content: center;
+
+    background-color: #fff;
+    border-radius: $border-radius;
+    padding: 25px;
+
     img {
       display: block;
-    margin: 0 auto;
+      width: 150px;
-    background-color: #fff;
-    border-radius: 16px;
-    padding: 16px;
-    width: 50%;
     }
   }
+}
+
+.viewfinder {
+  $viewfinder-size: 24px;
+  $viewfinder-color: $aai-orange;
+  $viewfinder-width: 4px;
+  padding: $viewfinder-width;
+  background: 
+                /* Top-left corner */ linear-gradient(
+      to right,
+      $viewfinder-color 0%,
+      $viewfinder-color $viewfinder-size,
+      transparent $viewfinder-size
+    ),
+    linear-gradient(
+      to bottom,
+      $viewfinder-color 0%,
+      $viewfinder-color $viewfinder-size,
+      transparent $viewfinder-size
+    ),
+    /* Top-right corner */
+      linear-gradient(
+        to left,
+        $viewfinder-color 0%,
+        $viewfinder-color $viewfinder-size,
+        transparent $viewfinder-size
+      ),
+    linear-gradient(
+      to bottom,
+      $viewfinder-color 0%,
+      $viewfinder-color $viewfinder-size,
+      transparent $viewfinder-size
+    ),
+    /* Bottom-left corner */
+      linear-gradient(
+        to right,
+        $viewfinder-color 0%,
+        $viewfinder-color $viewfinder-size,
+        transparent $viewfinder-size
+      ),
+    linear-gradient(
+      to top,
+      $viewfinder-color 0%,
+      $viewfinder-color $viewfinder-size,
+      transparent $viewfinder-size
+    ),
+    /* Bottom-right corner */
+      linear-gradient(
+        to left,
+        $viewfinder-color 0%,
+        $viewfinder-color $viewfinder-size,
+        transparent $viewfinder-size
+      ),
+    linear-gradient(
+      to top,
+      $viewfinder-color 0%,
+      $viewfinder-color $viewfinder-size,
+      transparent $viewfinder-size
+    );
+
+  background-size:
+                /* Top-left */ 100% $viewfinder-width,
+    $viewfinder-width 100%, /* Top-right */ 100% $viewfinder-width,
+    $viewfinder-width 100%, /* Bottom-left */ 100% $viewfinder-width,
+    $viewfinder-width 100%, /* Bottom-right */ 100% $viewfinder-width,
+    $viewfinder-width 100%;
+
+  background-position:
+                /* Top-left */ 0 0, 0 0,
+    /* Top-right */ 100% 0, 100% 0, /* Bottom-left */ 0 100%, 0 100%,
+    /* Bottom-right */ 100% 100%, 100% 100%;
+  background-repeat: no-repeat;
+}

src/styles/_shared.scss

@@ -4,47 +4,24 @@ $aai-blue-light: hsl(196.8deg 63% 55.5%);
 $aai-green-dark: hsl(181deg 75% 37%);
 $aai-green-light: hsl(127.5deg 100% 87.5%);
 
-$aai-grey: hsl(202.5deg 20% 76.5%);
+$aai-grey: #b7c6cf;
 $aai-orange: hsl(18.6deg 100% 55.1%);
 
+$bg-grey: #f8f9fa;
+
+$border-radius: 30px;
 @mixin rounded {
-  border-radius: 16px;
+  border-radius: $border-radius;
 }
 
 @mixin shadow {
-  filter: drop-shadow(0 16px 16px rgb($aai-grey, 80%));
+  box-shadow: 0px 4px 4px 0 rgba(0, 0, 0, 0.25);
+}
+
+@mixin shadow-small {
+  box-shadow: 0px 2px 2px 0 rgba(0, 0, 0, 0.25);
 }
 
 @mixin no-shadow {
-  filter: none;
+  box-shadow: none;
-}
-
-$border-radius: 16px;
-
-@mixin button {
-  @include shadow;
-
-  background-color: $aai-action-button;
-  color: #ffffff;
-
-  border-radius: $border-radius;
-  cursor: pointer;
-
-  display: flex;
-  align-items: center;
-
-  overflow: hidden;
-
-  &:active {
-    @include no-shadow;
-  }
-
-  span {
-    flex: 1 auto;
-    white-space: nowrap;
-    text-align: center;
-    font-weight: bold;
-    text-transform: uppercase;
-    font-size: 16px;
-  }
 }

src/styles/index.scss

@@ -1,24 +1,15 @@
 @use "shared" as *;
+@use "normalize-scss" as normalize;
+
+@include normalize.normalize();
 
 :root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-family: "Work Sans", system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
   font-weight: 400;
 
   color-scheme: only light;
-  color: #213547;
+  color: $aai-blue-dark;
   background-color: #ffffff;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-body {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
 }
 
 h1,
@@ -27,8 +18,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: "Work Sans", sans-serif;
+  font-weight: 600;
-  font-weight: 800;
   margin: 0;
 }
 
@@ -40,74 +30,3 @@ a {
 a:hover {
   color: $aai-blue-light;
 }
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-#root {
-  display: flex;
-  gap: 16px;
-  margin: 16px;
-  flex-direction: row;
-  align-items: start;
-}
-
-.chart-container {
-  @include rounded;
-  @include shadow;
-
-  display: flex;
-  flex-direction: column;
-
-  background-color: #ffffff;
-}
-
-.charts {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
-  padding: 16px;
-}
-
-.question-group {
-  @include rounded;
-  @include shadow;
-
-  background-color: #ffffff;
-  padding: 16px;
-  border: 1px solid #ddd;
-
-  flex: 1 1 300px;
-
-  display: flex;
-  flex-direction: column;
-  align-items: start;
-  gap: 8px;
-}
-
-.question-group svg {
-  align-self: center;
-  margin-bottom: 16px;
-}
-
-.question-group p {
-  font-size: 14px;
-  color: #666;
-  line-height: 1.4;
-}
-
-.question-title {
-  font-size: 16px;
-  font-weight: bold;
-  color: #333;
-}
-
-.question-title .material-icons {
-  vertical-align: top;
-  margin-right: 1ex;
-}

vite.config.ts

@@ -1,7 +1,7 @@
-import { defineConfig } from 'vite'
+import react from "@vitejs/plugin-react";
-import react from '@vitejs/plugin-react'
+import { defineConfig } from "vite";
 
 // https://vite.dev/config/
 export default defineConfig({
   plugins: [react()],
-})
+});