@mdn/fred 0.0.1

package/components/observatory/assets/landing-illustration.svg

@@ -0,0 +1,93 @@
+<svg width="345" height="318" viewBox="0 0 345 318" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M202.364 217.973C226.702 210.209 298.185 171.631 308.448 149.06C319.259 125.283 300.49 90.5217 273.73 71.5437C247.456 52.9111 217.579 71.6478 193.35 65.529C171.354 59.9739 149.164 51.5938 127.36 60.0365C104.116 69.037 129.341 105.169 82.804 117.681C34.5343 130.659 34.0934 176.87 47.5673 197.3C60.4283 216.801 115.041 197.29 138.454 203.734C160.252 209.733 180.153 225.059 202.364 217.973Z"
+    fill="url(#paint0_linear_6797_502)" />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M187.165 304.049C149.315 303.775 112.033 304.682 83.6966 305.957C53.8451 307.301 26.9894 312.009 30.7804 314C31.9242 318.249 72.7662 314.073 101.564 315.343C127.709 316.496 152.302 317.859 187.165 317.997C224.331 318.144 243.846 312.875 287.574 316.078C335.061 319.556 348.503 315.933 343.409 314C338.547 312.155 291.835 308.528 264.346 307.262C238.754 306.084 221.707 304.298 187.165 304.049Z"
+    fill="#D5D5D5" />
+  <path
+    d="M268.422 156L330.422 183.818V225.545C330.422 264.143 303.969 300.237 268.422 309C232.875 300.237 206.422 264.143 206.422 225.545V183.818L268.422 156ZM268.422 197.727C258.777 197.727 249.133 205.377 249.133 215.114V225.545C245 225.545 240.866 229.718 240.866 234.586V258.927C240.866 263.1 245 267.273 249.822 267.273H287.711C291.844 267.273 295.977 263.1 295.977 258.232V233.891C295.977 229.718 291.844 225.545 287.711 225.545V215.114C287.711 205.377 278.066 197.727 268.422 197.727ZM268.422 206.073C273.933 206.073 278.755 209.55 278.755 215.114V225.545H258.089V215.114C258.089 209.55 262.911 206.073 268.422 206.073Z"
+    fill="#B5B1F8" />
+  <path
+    d="M179.308 155.193L192.82 150.799L188.316 163.249L171.051 164.713L168.048 161.784C168.048 161.784 164.14 156.12 162.043 152.263C158.777 146.258 154.536 128.096 154.536 128.096L160.542 127.363L179.308 155.193Z"
+    fill="#D99654" />
+  <path
+    d="M217.157 303.844L224.562 305.296V309.654L209.752 310.38C209.752 310.38 209.461 309.003 209.752 308.201C210.458 306.256 213.279 308.023 214.936 306.749C216.073 305.874 217.157 303.844 217.157 303.844Z"
+    fill="#0D086C" />
+  <path
+    d="M193.813 302.91L201.219 304.363V308.72L186.408 309.446C186.408 309.446 186.117 308.069 186.408 307.268C187.114 305.322 189.935 307.09 191.592 305.815C192.729 304.94 193.813 302.91 193.813 302.91Z"
+    fill="#0D086C" />
+  <path
+    d="M201.692 138.958L206.9 136.726C206.9 136.726 212.853 130.029 207.645 127.052C202.436 124.076 209.906 123.229 208.389 121.844C206.826 120.418 204.945 124.498 203.18 123.332C201.24 122.05 209.133 117.379 203.18 117.379C197.227 117.379 202.663 115.266 201.692 114.402C199.954 112.858 196.941 112.413 195.739 114.402C195.609 114.618 195.531 114.863 195.493 115.124C194.917 113.728 194.045 112.419 192.762 112.17C191.308 111.888 189.042 112.914 189.042 112.914V114.402C189.042 114.402 187.453 115.064 186.81 115.891C186.411 116.404 186.016 116.731 186.065 117.379C186.128 118.198 187.23 118.112 187.554 118.867C187.897 119.668 187.51 120.229 187.554 121.099C187.986 129.714 199.459 139.702 199.459 139.702L201.692 138.958Z"
+    fill="black" stroke="black" />
+  <path
+    d="M178.307 128.409C178.186 130.446 180.636 130.955 181.264 131.79C184.453 136.031 181.006 139.439 187.158 140.825C191.963 139.733 192.666 140.874 195.205 132.189C195.84 123.069 192.979 121.899 189.06 121C185.692 120.801 185.606 124.213 183.603 126.814C181.444 128.732 180.746 128.206 178.307 128.409Z"
+    fill="#F2AE9B" />
+  <path d="M197.227 130.027L189.786 128.539" stroke="black" stroke-width="0.5" />
+  <path
+    d="M202.332 143.032L199.27 133.843C199.27 133.843 200.682 133.452 201.312 132.822C202.203 131.93 202.511 131.006 202.332 129.758C202.206 128.876 202.024 128.252 201.311 127.717C200.354 127 199.345 127.239 198.248 127.717C196.729 128.38 195.949 131.284 195.949 131.284L194.998 130.03L187.158 140.829C187.158 140.829 191.004 138.757 193.142 139.785C196.002 141.16 194.998 147.696 194.998 147.696C196.527 145.991 200.802 144.737 202.332 143.032Z"
+    fill="#F2AE9B" />
+  <path d="M188.125 135.93C188.125 135.93 185.123 137.728 183.07 136.75" stroke="black" stroke-width="0.2"
+    stroke-linecap="round" stroke-linejoin="round" />
+  <path
+    d="M185.33 126.66C184.577 128.001 184.963 129.595 186.117 130.242C187.272 130.889 188.833 130.388 189.585 129.047C190.338 127.705 189.952 126.112 188.798 125.465C187.643 124.817 186.082 125.318 185.33 126.66Z"
+    stroke="black" stroke-width="0.5" />
+  <path d="M185.32 126.311C185.32 126.311 184.576 125.565 183.832 125.566" stroke="black" stroke-width="0.5" />
+  <ellipse cx="0.744105" cy="1.48821" rx="0.744105" ry="1.48821"
+    transform="matrix(-0.848214 -0.529653 -0.529653 0.848214 188.297 126.352)" fill="black" />
+  <path
+    d="M187.35 256.591C184.285 239.592 195.135 214.855 195.135 214.855C195.135 214.855 194.209 217.945 208.75 217.946C223.291 217.946 224.25 215.185 224.25 215.185C224.25 215.185 223.943 235.072 224.907 248.194C226.237 266.314 224.907 305.648 224.907 305.648L215.825 306.38L203.903 248.194V277.092V305.648L193.335 302.719C193.335 302.719 189.595 269.038 187.35 256.591Z"
+    fill="#EA9541" />
+  <path
+    d="M204.664 250.001L195.735 216.32C195.735 216.32 184.573 232.429 187.55 252.198C190.526 271.967 194.247 303.452 194.247 303.452L204.664 306.381V250.001Z"
+    fill="#E8672C" />
+  <path
+    d="M195.759 216.506C196.079 220.014 214.451 220.341 225.498 216.506C225.498 216.506 225.6 200.406 224.266 190.215C222.623 177.658 219.706 170.987 216.784 158.666C216.404 157.03 207.057 145.145 205.561 144.394L202.568 142.892C201.251 142.892 195.881 146.961 194.608 147.94C194.658 147.875 194.684 147.84 194.684 147.84L194.337 148.15C194.337 148.15 194.435 148.074 194.608 147.94C193.819 148.987 187.052 157.939 185.359 159.417C183.12 161.371 181.617 161.671 181.617 161.671L169.068 130.73L164.409 131.766L171.143 163.173C171.143 163.173 174.482 170.126 178.625 171.436C181.414 172.318 183.305 171.971 186.107 171.129C188.689 170.353 192.093 167.68 192.093 167.68L195.759 216.506Z"
+    fill="#F7E7CD" />
+  <path
+    d="M160.949 126.367L155.195 128.642C155.195 128.642 151.283 122.349 151.201 121.404C151.118 120.459 151.34 121.024 151.34 121.024M155.568 117.083C155.568 117.083 154.985 116.334 155.178 117.562C155.372 118.789 156.923 122.738 156.923 122.738M153.484 116.925C153.484 116.925 153.012 116.459 153.094 117.403C153.177 118.348 155.562 122.947 155.562 122.947M152.426 118.643C152.426 118.643 151.704 118.275 152.148 119.404C152.591 120.533 154.672 123.623 154.672 123.623"
+    stroke="black" stroke-width="0.5" stroke-linecap="round" />
+  <path
+    d="M160.133 126.636C160.133 126.636 165.051 121.233 162.962 122.265C161.17 123.151 160.173 123.119 159.695 122.988L159.33 122.818L156.26 117.262C156.26 117.262 155.048 116.151 155.174 117.339C155.3 118.526 156.628 122.374 156.628 122.374L153.873 116.865C153.873 116.865 153.08 116.216 153.111 117.128C153.141 118.04 155.263 122.537 155.263 122.537L152.982 118.403C152.982 118.403 151.681 117.929 152.061 119.029C152.44 120.129 154.341 123.163 154.341 123.163L151.678 120.391C151.678 120.391 150.98 120.017 151.011 120.929C151.041 121.842 155.158 128.558 155.158 128.558L160.133 126.636Z"
+    fill="#FE987B" />
+  <path
+    d="M156.56 125.367C156.56 125.367 157.053 124.373 157.568 123.818C158.026 123.326 159.314 122.956 159.314 122.956"
+    stroke="black" stroke-width="0.5" stroke-linecap="round" />
+  <path
+    d="M176.175 121.545L108.619 92.8173C108.619 92.8173 88.611 90.3547 87.5709 93.6779C86.4387 97.2953 102.646 108.137 102.646 108.137L130.305 115.366L174.641 127.443L176.175 121.545Z"
+    fill="#D9D9D9" />
+  <path
+    d="M112.039 94.2898C112.039 94.2898 107.131 90.7225 102.518 88.3772C98.4299 86.2986 91.7406 83.885 91.7406 83.885C91.7406 83.885 89.2522 88.6426 87.8224 91.798C86.266 95.2328 84.274 100.988 84.274 100.988C84.274 100.988 90.7658 105.666 95.5136 106.413C100.171 107.146 102.644 108.135 102.644 108.135C102.644 108.135 106.305 104.714 108.499 101.999C110.686 99.2925 112.039 94.2898 112.039 94.2898Z"
+    fill="#3E7AD8" />
+  <path
+    d="M142.375 115.157C142.375 115.157 133.706 120.407 128.89 119.657C124.075 118.907 123.111 110.656 123.111 110.656C123.111 110.656 123.784 120.218 127.927 119.657C131.796 119.133 128.89 115.157 128.89 115.157"
+    stroke="#90BAE1" />
+  <path
+    d="M132.745 124.157C129.971 123.202 128.893 118.906 128.893 118.906C127.351 120.106 126.966 120.906 126.966 121.156C126.966 121.406 127.6 123.692 128.893 124.907C130.292 126.222 131.597 126.695 133.708 127.157C134.282 127.283 134.955 127.342 135.635 127.361V204.389C133.472 204.689 131.782 205.164 131.782 205.164L128.893 208.915L123.113 251.669L118.298 306.424H123.113L126.003 251.669L131.782 208.915L135.635 208.165V306.424H139.488V208.165L143.34 208.915L148.156 252.419L149.119 306.424H154.898L152.009 251.669L146.23 208.915C146.23 208.915 145.006 206.276 143.34 205.164C142.347 204.501 140.959 204.223 139.488 204.161V127.157V124.157L135.635 124.588C135.635 124.588 133.796 124.518 132.745 124.157Z"
+    fill="#90BAE1" />
+  <path
+    d="M169.695 129.945L165.741 130.907C165.741 130.907 161.978 124.135 161.982 123.17C161.986 122.205 162.141 122.809 162.141 122.809M166.33 119.482C166.33 119.482 165.86 118.638 165.934 119.904C166.008 121.17 167.094 125.386 167.094 125.386M164.441 119.005C164.441 119.005 164.049 118.463 164.045 119.428C164.041 120.392 165.833 125.389 165.833 125.389M163.332 120.575C163.332 120.575 162.703 120.094 163.014 121.299C163.324 122.504 164.964 125.934 164.964 125.934"
+    stroke="black" stroke-width="0.5" stroke-linecap="round" />
+  <path
+    d="M169.058 126.166C169.058 126.166 169.244 124.852 169.539 124.115C169.801 123.461 170.412 122.606 170.412 122.606"
+    stroke="black" stroke-width="0.5" stroke-linecap="round" />
+  <path
+    d="M169.448 129.704C169.448 129.704 171.801 121.405 170.254 122.965C169.92 123.301 169.681 123.864 169.512 124.44C169.221 125.431 169.137 126.463 169.137 126.463L166.643 119.721C166.643 119.721 165.86 118.637 165.933 119.903C166.007 121.169 167.093 125.384 167.093 125.384L164.754 119.244C164.754 119.244 164.049 118.462 164.045 119.427C164.041 120.391 165.833 125.388 165.833 125.388L163.882 120.753C163.882 120.753 162.703 120.093 163.013 121.298C163.323 122.503 164.964 125.933 164.964 125.933L162.613 122.685C162.613 122.685 161.985 122.204 161.981 123.169C161.977 124.134 165.74 130.906 165.74 130.906L169.448 129.704Z"
+    fill="#F2AE9B" />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M0 48.5C0 62.5833 11.1929 74 25 74C38.8071 74 50 62.5833 50 48.5C50 34.4167 38.8071 23 25 23C11.1929 23 0 34.4167 0 48.5ZM27.8018 51.8236L30.0802 58.2315L28.1579 58.915L25.8795 52.5071L26.2057 51.8209L26.0868 51.4662C24.6919 51.8466 23.1627 51.748 21.7642 51.0831C20.2667 50.3712 19.1134 49.0937 18.5579 47.5314C18.0025 45.9692 18.0903 44.2503 18.8022 42.7529C19.5141 41.2554 20.7917 40.1021 22.3539 39.5466C23.9162 38.9912 25.6351 39.079 27.1325 39.7909C28.6299 40.5028 29.7832 41.7804 30.3387 43.3426C30.8942 44.9049 30.8063 46.6238 30.0944 48.1212C29.4296 49.5197 28.3059 50.5616 26.9839 51.1472L27.1156 51.4973L27.8018 51.8236ZM26.5131 41.0939L26.0229 40.8928C25.5997 41.2454 24.9149 41.857 24.2386 42.6749L26.7228 43.856C26.9302 42.815 26.9722 41.8979 26.9784 41.3471C26.8345 41.2467 26.6781 41.1723 26.5131 41.0939ZM29.2419 45.0535C29.1547 43.9152 28.6599 42.828 27.8307 42.0185C27.8203 42.5779 27.7716 43.3748 27.5915 44.2689L29.2419 45.0535ZM21.7195 41.4774L23.3699 42.262C23.9496 41.5578 24.5369 41.017 24.9642 40.6557C23.8129 40.5237 22.6574 40.8263 21.7195 41.4774ZM20.1052 43.3723C19.8987 43.8066 19.7493 44.3 19.6855 44.7702L21.5444 45.6539L22.0596 44.3014L22.7833 43.048L20.9244 42.1643C20.6 42.5106 20.3116 42.938 20.1052 43.3723ZM27.9723 48.7097C28.2967 48.3634 28.585 47.9361 28.7915 47.5018C28.998 47.0675 29.1473 46.574 29.2111 46.1038L27.3522 45.2201C27.2153 45.6875 27.0435 46.1383 26.8371 46.5726C26.6306 47.007 26.3894 47.4247 26.1134 47.826L27.9723 48.7097ZM23.6519 43.461L22.9282 44.7144L22.413 46.0669L25.2448 47.4131C25.5207 47.0118 25.762 46.594 25.9684 46.1597C26.1749 45.7254 26.3466 45.2745 26.4836 44.8072L23.6519 43.461ZM22.3836 49.7802C22.5399 49.8545 22.6963 49.9288 22.8563 49.973C23.2882 49.6245 23.9817 49.0171 24.6581 48.1991L22.1738 47.0181C21.9665 48.059 21.9332 48.9803 21.9356 49.5353L22.3836 49.7802ZM27.1771 49.3967L25.5267 48.6121C24.947 49.3162 24.3598 49.8571 23.9324 50.2183C25.0837 50.3503 26.2393 50.0477 27.1771 49.3967ZM19.6548 45.8205C19.7419 46.9589 20.2368 48.0461 21.066 48.8556C21.0764 48.2961 21.1251 47.4993 21.3052 46.6051L19.6548 45.8205ZM18.4519 29.7369C17.8351 29.9562 17.3306 30.4117 17.0495 31.003L14.9296 35.462L17.1591 36.5219L19.279 32.0629L23.738 34.1827L24.7979 31.9532L20.3389 29.8334C19.7476 29.5522 19.0688 29.5175 18.4519 29.7369ZM31.802 67.2833C32.4189 67.0639 32.9234 66.6085 33.2045 66.0172L35.3243 61.5582L33.0948 60.4982L30.975 64.9573L26.5159 62.8374L25.456 65.067L29.9151 67.1868C30.5064 67.4679 31.1851 67.5026 31.802 67.2833ZM6.35379 55.1851C6.57314 55.802 7.02855 56.3065 7.61986 56.5876L12.0789 58.7074L13.1388 56.4779L8.67978 54.3581L10.7996 49.899L8.5701 48.8391L6.45026 53.2982C6.16915 53.8895 6.13445 54.5682 6.35379 55.1851ZM43.9002 41.835C43.6808 41.2182 43.2254 40.7137 42.6341 40.4326L38.1751 38.3127L37.1151 40.5422L41.5742 42.6621L39.4543 47.1211L41.6839 48.181L43.8037 43.722C44.0848 43.1307 44.1195 42.4519 43.9002 41.835Z"
+    fill="#F9CD6B" />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M99.5 67C89.2827 67 81 58.7173 81 48.5C81 38.2827 89.2827 30 99.5 30C109.717 30 118 38.2827 118 48.5C118 58.7173 109.717 67 99.5 67ZM102.183 44.4996L104.116 43.6144C104.116 43.6144 104.696 43.3489 105.207 43.6995C105.525 44.1386 105.747 44.6219 105.968 45.1053C108.181 49.9389 106.085 55.5762 101.251 57.7892C96.4173 60.0022 90.78 57.9057 88.567 53.0721C86.354 48.2385 88.4505 42.6012 93.2841 40.3882C93.2841 40.3882 94.2508 39.9456 94.6934 40.9123L95.5786 42.8458L96.5453 42.4032C96.5453 42.4032 97.5121 41.9606 97.9547 42.9273L98.3973 43.894L100.331 43.0088C100.331 43.0088 101.297 42.5662 101.74 43.5329L102.183 44.4996ZM90.2792 51.7035C90.6332 52.4769 91.6198 52.8438 92.3931 52.4897C93.1665 52.1356 93.5334 51.1491 93.1793 50.3757C92.8252 49.6024 91.8387 49.2355 91.0653 49.5896C90.292 49.9436 89.9251 50.9302 90.2792 51.7035ZM92.1951 44.3949C91.4217 44.749 91.0548 45.7355 91.4089 46.5089C91.763 47.2822 92.7495 47.6491 93.5229 47.295C94.2963 46.941 94.6632 45.9544 94.3091 45.1811C93.955 44.4077 92.9685 44.0408 92.1951 44.3949ZM97.285 55.5122C97.6391 56.2855 98.6256 56.6524 99.399 56.2983C100.172 55.9443 100.539 54.9577 100.185 54.1844C99.8311 53.411 98.8446 53.0441 98.0712 53.3982C97.2978 53.7523 96.9309 54.7388 97.285 55.5122ZM95.5554 50.4573C95.9094 51.2306 96.896 51.5975 97.6693 51.2434C98.4427 50.8894 98.8096 49.9028 98.4555 49.1295C98.1014 48.3561 97.1149 47.9892 96.3415 48.3433C95.5682 48.6974 95.2013 49.6839 95.5554 50.4573ZM101.274 50.1777C101.628 50.9511 102.615 51.3179 103.388 50.9639C104.162 50.6098 104.528 49.6233 104.174 48.8499C103.82 48.0765 102.834 47.7096 102.06 48.0637C101.287 48.4178 100.92 49.4043 101.274 50.1777ZM111.163 46.235L109.229 47.1202L110.114 49.0537L112.048 48.1685L111.163 46.235ZM110.277 44.3016L107.622 38.5013L105.688 39.3865L108.344 45.1868L110.277 44.3016Z"
+    fill="#F9CD6B" />
+  <path fill-rule="evenodd" clip-rule="evenodd"
+    d="M47 100.5C47 108.508 53.4919 115 61.5 115C69.5081 115 76 108.508 76 100.5C76 92.4919 69.5081 86 61.5 86C53.4919 86 47 92.4919 47 100.5ZM69.1046 97.5965C69.0351 97.7689 68.9449 97.9864 68.8349 98.2381C68.5449 98.9016 68.1194 99.7992 67.5768 100.738C67.0334 101.679 66.3789 102.651 65.6336 103.468C64.8855 104.288 64.0695 104.928 63.2083 105.244C62.382 105.548 61.3849 105.602 60.3237 105.491C59.2666 105.38 58.1788 105.108 57.1913 104.79C56.2053 104.473 55.3307 104.113 54.7022 103.833C54.4678 103.728 54.2681 103.635 54.1103 103.559C54.1766 103.404 54.2613 103.212 54.3634 102.99C54.644 102.382 55.0542 101.555 55.5723 100.684C56.6267 98.9112 58.0613 97.0695 59.682 96.377C60.5156 96.0208 61.5372 95.9109 62.6321 95.9665C63.7227 96.0219 64.8531 96.2398 65.8828 96.5101C66.9108 96.7799 67.8269 97.0989 68.4863 97.3508C68.7306 97.4441 68.9392 97.528 69.1046 97.5965ZM53.4701 103.799C53.2369 104.241 53.237 104.241 53.2371 104.241L53.2375 104.241L53.2387 104.242L53.2428 104.244L53.2578 104.252L53.3136 104.281C53.3622 104.305 53.433 104.341 53.5239 104.386C53.7057 104.475 53.9683 104.6 54.2945 104.746C54.9462 105.037 55.8555 105.411 56.8848 105.742C57.9125 106.073 59.0712 106.365 60.2192 106.486C61.3631 106.606 62.5298 106.559 63.5534 106.183C64.6216 105.79 65.5657 105.027 66.3726 104.142C67.1823 103.254 67.8776 102.217 68.4427 101.239C69.0089 100.259 69.4508 99.3258 69.7512 98.6386C69.9015 98.2945 70.0168 98.0111 70.0948 97.8127C70.1339 97.7135 70.1636 97.6355 70.1838 97.5819L70.2068 97.5199L70.2128 97.5033L70.2145 97.4988L70.215 97.4974L70.2152 97.497C70.2152 97.4968 70.2153 97.4967 69.7447 97.3275C69.9532 96.873 69.9531 96.873 69.9529 96.8729L69.9525 96.8727L69.9512 96.8721L69.9469 96.8702L69.9313 96.8631L69.8726 96.8369C69.8216 96.8144 69.7472 96.7819 69.6516 96.7414C69.4607 96.6604 69.185 96.5472 68.8431 96.4166C68.16 96.1557 67.2086 95.8242 66.1367 95.5428C65.0664 95.2619 63.8645 95.0279 62.6829 94.9678C61.5055 94.908 60.315 95.019 59.2891 95.4574C57.3493 96.2862 55.7761 98.3853 54.7129 100.173C54.1723 101.082 53.7461 101.941 53.4552 102.572C53.3096 102.888 53.1974 103.148 53.1213 103.329C53.0833 103.42 53.0542 103.492 53.0345 103.541L53.012 103.597L53.006 103.613L53.0044 103.617L53.0039 103.618L53.0037 103.618C53.0037 103.619 53.0036 103.619 53.4701 103.799ZM53.4701 103.799L53.0036 103.619L52.8435 104.034L53.2369 104.241L53.4701 103.799ZM69.7447 97.3275L70.2153 97.4967L70.3707 97.0645L69.9532 96.873L69.7447 97.3275ZM59.1206 101.893C59.7757 103.54 61.6425 104.345 63.2902 103.69C64.9379 103.035 65.7425 101.168 65.0873 99.5203C64.4322 97.8726 62.5653 97.068 60.9177 97.7232C59.27 98.3783 58.4654 100.245 59.1206 101.893ZM59.5718 101.384C59.8525 102.09 60.6526 102.434 61.3588 102.154C62.0649 101.873 62.4097 101.073 62.129 100.367C61.8482 99.6606 61.0481 99.3157 60.342 99.5965C59.6358 99.8773 59.291 100.677 59.5718 101.384Z"
+    fill="#F9CD6B" />
+  <defs>
+    <linearGradient id="paint0_linear_6797_502" x1="127.551" y1="45.6208" x2="202.834" y2="204.145"
+      gradientUnits="userSpaceOnUse">
+      <stop stop-color="#090968" />
+      <stop offset="1" stop-color="#A388FF" />
+    </linearGradient>
+  </defs>
+</svg>

package/components/observatory/assets/mdn.svg

@@ -0,0 +1,8 @@
+<svg width="50" height="53" viewBox="0 -5 50 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M44.1704 3.97266H6.66704C4.37517 3.97266 2.5 5.96016 2.5 8.38932V43.7227C2.5 46.1518 4.37517 48.1393 6.66704 48.1393H44.1704C46.4623 48.1393 48.3375 46.1518 48.3375 43.7227V8.38932C48.3375 5.96016 46.4623 3.97266 44.1704 3.97266ZM44.1704 43.7227H6.66704V12.806H44.1704V43.7227Z"
+    fill="#5A23D7" />
+  <path
+    d="M22.9494 17.2266L17.3079 36.4822H15L20.6218 17.2266H22.9494ZM25.0009 17.2266V36.4822H22.9494V17.2266H25.0009ZM32.9503 17.2266L27.3285 36.4822H25.0206L30.6424 17.2266H32.9503ZM35.0018 17.2266V36.4822H32.9503V17.2266H35.0018Z"
+    fill="#5A23D7" />
+</svg>

package/components/observatory/assets/pass-icon.svg

@@ -0,0 +1,7 @@
+<svg aria-hidden="true" class="pass" width="24" height="27" viewBox="0 -2 24 25" fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+  <circle cx="12" cy="11.8984" r="9" fill="#fff" />
+  <path
+    d="M12 1.89844C6.5 1.89844 2 6.39844 2 11.8984C2 17.3984 6.5 21.8984 12 21.8984C17.5 21.8984 22 17.3984 22 11.8984C22 6.39844 17.5 1.89844 12 1.89844ZM10 16.8984L5 11.8984L6.41 10.4884L10 14.0684L17.59 6.47844L19 7.89844L10 16.8984Z"
+    fill="#000" />
+</svg>

package/components/observatory/assets/results-icon.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="19" viewBox="0 0 20 19" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M15.45 12.73L20 4.86V16.55V18.55H0V0.55H2V13.09L7.5 3.55L14 7.33L18.24 0L19.97 1L14.74 10.05L8.23 6.3L2.31 16.55H4.57L8.96 8.99L15.45 12.73Z" />
+</svg>

package/components/observatory/assets/scanning.svg

@@ -0,0 +1,4 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 8.33333C5 7.44928 5.35119 6.60143 5.97631 5.97631C6.60143 5.35119 7.44928 5 8.33333 5H15V8.33333H8.33333V15H5V8.33333ZM45 41.6667C45 42.5507 44.6488 43.3986 44.0237 44.0237C43.3986 44.6488 42.5507 45 41.6667 45H35V41.6667H41.6667V35H45V41.6667ZM8.33333 45C7.44928 45 6.60143 44.6488 5.97631 44.0237C5.35119 43.3986 5 42.5507 5 41.6667V35H8.33333V41.6667H15V45H8.33333ZM41.6667 5C42.5507 5 43.3986 5.35119 44.0237 5.97631C44.6488 6.60143 45 7.44928 45 8.33333V15H41.6667V8.33333H35V5H41.6667Z" fill="#5A23D7"/>
+<path d="M34.7936 13.2656H14.3989C13.1525 13.2656 12.1328 14.2854 12.1328 15.5317V33.6604C12.1328 34.9067 13.1525 35.9264 14.3989 35.9264H34.7936C36.04 35.9264 37.0597 34.9067 37.0597 33.6604V15.5317C37.0597 14.2854 36.04 13.2656 34.7936 13.2656ZM34.7936 33.6604H14.3989V17.7978H34.7936V33.6604Z" fill="#5A23D7"/>
+</svg>

package/components/observatory/assets/security.svg

@@ -0,0 +1,3 @@
+<svg width="50" height="53" viewBox="0 0 50 53" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.9167 28.1578H27.0833V30.3659H22.9167V28.1578ZM43.75 10.4927V23.7415C43.75 35.8862 35.8333 47.3685 25 50.2391C14.1667 47.3685 6.25 35.8862 6.25 23.7415V10.4927L25 1.66016L43.75 10.4927ZM35.4167 21.5334H30.8333C30.4167 20.2085 29.5833 19.1044 28.5417 18.2212L31.0417 15.5714L29.5833 14.0257L26.6667 17.1171H25C24.5833 17.1171 23.9583 17.1171 23.5417 17.3379L20.625 14.0257L18.9583 15.7922L21.4583 18.442C20.4167 19.1044 19.5833 20.2085 19.1667 21.5334H14.5833V23.7415H18.75V25.9496H14.5833V28.1578H18.75V30.3659H14.5833V32.574H19.1667C20 35.2238 22.2917 36.9903 25 36.9903C27.7083 36.9903 30 35.2238 30.8333 32.574H35.4167V30.3659H31.25V28.1578H35.4167V25.9496H31.25V23.7415H35.4167V21.5334ZM22.9167 25.9496H27.0833V23.7415H22.9167V25.9496Z" fill="#5A23D7"/>
+</svg>

package/components/observatory/assets/stars.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 0L16.74 2.75L14 4L16.74 5.26L18 8L19.25 5.26L22 4L19.25 2.75M8 3L5.5 8.5L0 11L5.5 13.5L8 19L10.5 13.5L16 11L10.5 8.5M18 14L16.74 16.74L14 18L16.74 19.25L18 22L19.25 19.25L22 18L19.25 16.74" fill="#DFD172"/>
+</svg>

package/components/observatory/assets/summary-icon.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="21" viewBox="0 0 16 21" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M9 6.04143C9 6.93111 9.72123 7.65234 10.6109 7.65234C12.0461 7.65234 12.7648 5.91716 11.75 4.90234C10.7352 3.88753 9 4.60626 9 6.04143ZM2 0.652344H9.17157C9.70201 0.652344 10.2107 0.863057 10.5858 1.23813L15.4142 6.06656C15.7893 6.44163 16 6.95034 16 7.48077V18.6523C16 19.1828 15.7893 19.6915 15.4142 20.0666C15.0391 20.4416 14.5304 20.6523 14 20.6523H2C0.89 20.6523 0 19.7523 0 18.6523V2.65234C0 1.54234 0.89 0.652344 2 0.652344ZM3 17.6523C3 18.2046 3.44772 18.6523 4 18.6523C4.55228 18.6523 5 18.2046 5 17.6523V13.6523C5 13.1001 4.55228 12.6523 4 12.6523C3.44772 12.6523 3 13.1001 3 13.6523V17.6523ZM7 17.6523C7 18.2046 7.44772 18.6523 8 18.6523C8.55229 18.6523 9 18.2046 9 17.6523V11.6523C9 11.1001 8.55229 10.6523 8 10.6523C7.44772 10.6523 7 11.1001 7 11.6523V17.6523ZM11 17.6523C11 18.2046 11.4477 18.6523 12 18.6523C12.5523 18.6523 13 18.2046 13 17.6523V15.6523C13 15.1001 12.5523 14.6523 12 14.6523C11.4477 14.6523 11 15.1001 11 15.6523V17.6523Z" />
+</svg>

package/components/observatory/assets/tooltip-arrow.svg

@@ -0,0 +1,5 @@
+<svg class="arrow" width="22" height="22" viewBox="0 0 22 22" fill="#000">
+  <path
+    d="m 12.124245,1.7326853 c 0.394693,-0.6021957 1.277247,-0.6025185 1.67234,-6.199e-4 l 8.811894,13.4234876 c 0.43647,0.664838 -0.04025,1.548435 -0.835536,1.548746 l -17.6138661,0.0065 C 3.363768,16.71112 2.8863753,15.827807 3.3223322,15.16266 Z"
+    id="path1" />
+</svg>

package/components/observatory/constants.js

@@ -0,0 +1,41 @@
+export const OBSERVATORY_API_URL = "https://observatory-api.mdn.mozilla.net";
+
+/**
+ * Scoring table for Observatory grades
+ * @type {Array<{grade: string, scoreText: string, score: number, stars?: boolean}>}
+ */
+const SCORING_TABLE = [
+  { grade: "A+", scoreText: "100+", score: 100, stars: true },
+  { grade: "A", scoreText: "90", score: 90, stars: true },
+  { grade: "A-", scoreText: "85", score: 85, stars: true },
+  { grade: "B+", scoreText: "80", score: 80 },
+  { grade: "B", scoreText: "70", score: 70 },
+  { grade: "B-", scoreText: "65", score: 65 },
+  { grade: "C+", scoreText: "60", score: 60 },
+  { grade: "C", scoreText: "50", score: 50 },
+  { grade: "C-", scoreText: "45", score: 45 },
+  { grade: "D+", scoreText: "40", score: 40 },
+  { grade: "D", scoreText: "30", score: 30 },
+  { grade: "D-", scoreText: "25", score: 25 },
+  { grade: "F", scoreText: "0", score: 0 },
+];
+
+/**
+ * Maintain consistent test order.
+ * @type {string[]}
+ */
+const TEST_NAMES_IN_ORDER = [
+  "content-security-policy",
+  "cookies",
+  "cross-origin-resource-sharing",
+  "redirection",
+  "referrer-policy",
+  "strict-transport-security",
+  "subresource-integrity",
+  "x-content-type-options",
+  "x-frame-options",
+  "cross-origin-resource-policy",
+];
+
+// Export the constants
+export { SCORING_TABLE, TEST_NAMES_IN_ORDER };

package/components/observatory/index.css

@@ -0,0 +1,406 @@
+/* Observatory main layout */
+
+.obs-layout {
+  --spacing: 2rem;
+
+  --progress-color: var(--observatory-accent);
+
+  --observatory-accent: light-dark(
+    var(--color-purple-20),
+    var(--color-purple-80)
+  );
+  --observatory-accent-light: light-dark(
+    var(--color-purple-20),
+    var(--color-purple-80)
+  );
+
+  --observatory-pass-icon-bg: light-dark(
+    var(--color-green-90),
+    var(--color-green-20)
+  );
+  --observatory-pass-icon-color: light-dark(
+    var(--color-green-50),
+    var(--color-green-80)
+  );
+  --observatory-fail-icon-bg: light-dark(
+    var(--color-red-90),
+    var(--color-red-10)
+  );
+  --observatory-fail-icon-color: light-dark(
+    var(--color-red-50),
+    var(--color-red-80)
+  );
+
+  --observatory-table-bg: light-dark(var(--color-white), var(--color-gray-10));
+  --observatory-table-bg-alternate: light-dark(
+    var(--color-gray-90),
+    var(--color-gray-10)
+  );
+  --observatory-table-header-bg: light-dark(
+    var(--color-gray-90),
+    var(--color-gray-10)
+  );
+
+  --observatory-grade-a-bg: light-dark(#d2fadd, #265c3d);
+  --observatory-grade-a-border: light-dark(#017a37, #89fca1);
+  --observatory-grade-b-bg: light-dark(#e8fad2, #52662a);
+  --observatory-grade-b-border: light-dark(#547a01, #d5fc88);
+  --observatory-grade-c-bg: light-dark(#faf8d2, #66602a);
+  --observatory-grade-c-border: light-dark(#7a7001, #fcf988);
+  --observatory-grade-d-bg: light-dark(#fae8d2, #5c3d26);
+  --observatory-grade-d-border: light-dark(#a65001, #ff6a00);
+  --observatory-grade-f-bg: light-dark(#fad2d2, #5c2626);
+  --observatory-grade-f-border: light-dark(#aa0000, #fc8888);
+  --observatory-arrow-down-color: light-dark(
+    var(--color-red-20),
+    var(--color-red-80)
+  );
+  --observatory-arrow-up-color: light-dark(
+    var(--color-green-50),
+    var(--color-green-80)
+  );
+
+  --form-invalid-color: light-dark(var(--color-red-50), var(--color-red-80));
+
+  --font-body: inter, var(--font-fallback);
+
+  /* icons */
+  --alert-circle-img: url("./assets/alert-circle.svg");
+
+  /* Draw a top border in our color */
+}
+
+/* landing */
+.obs-landing-top {
+  display: grid;
+
+  grid-template-areas: "form svg auto";
+  grid-template-columns: 2fr 1fr minmax(0, 200px);
+
+  gap: 0 6.25rem;
+
+  max-width: var(--max-width);
+
+  padding-block: 0.75rem;
+  padding-inline: 1rem;
+
+  @media (--screen-xxlarge) {
+    padding-inline: calc((100% - 1440px + (1rem * 2)) / 2);
+  }
+  --border-radius: 0.3rem;
+
+  @media (--screen-large-and-narrower) {
+    grid-template-areas: "form svg";
+    grid-template-columns: auto;
+  }
+
+  @media (--screen-small-and-narrower) {
+    grid-template-areas: "form" "svg";
+
+    .landing-illustration {
+      text-align: center;
+    }
+  }
+
+  .accent {
+    color: var(--observatory-accent);
+  }
+}
+
+.obs-landing-top__form {
+  grid-area: form;
+
+  p {
+    margin: 1rem 0 2rem;
+  }
+}
+
+.obs-landing-top__illustration {
+  grid-area: svg;
+
+  svg {
+    width: auto;
+    max-width: 50vw;
+    height: 100%;
+  }
+
+  @media (--screen-small-and-narrower) {
+    text-align: center;
+  }
+}
+
+.obs-landing-about {
+  padding-block: 0.75rem;
+  padding-inline: 1rem;
+
+  @media (--screen-xxlarge) {
+    padding-inline: calc((100% - 1440px + (1rem * 2)) / 2);
+  }
+
+  color: var(--color-text-secondary);
+
+  background-color: light-dark(var(--color-gray-90), var(--color-gray-05));
+
+  p {
+    color: var(--color-text-secondary);
+  }
+
+  h1,
+  h2 {
+    font-style: normal;
+    font-weight: 600;
+    letter-spacing: var(--heading-letter-spacing);
+  }
+
+  h2 {
+    margin-bottom: 2rem;
+  }
+
+  @media (--screen-medium-and-wider) {
+    .assessment {
+      margin-left: 0;
+    }
+
+    .scanning {
+      margin-left: 3.125rem;
+    }
+
+    .security {
+      margin-left: 6.25rem;
+    }
+
+    .mdn {
+      margin-left: 9.75rem;
+    }
+  }
+
+  @media (--screen-small-and-narrower) {
+    figure ~ figure {
+      margin-top: 1.75rem;
+    }
+
+    .lines {
+      display: none;
+    }
+  }
+
+  @media (--screen-medium-only) {
+    .about-copy {
+      width: 80%;
+    }
+  }
+
+  svg defs#defs3 #gradient {
+    stop#stop1 {
+      stop-color: var(--observatory-accent);
+    }
+
+    stop#stop2 {
+      stop-color: color-mix(
+        in srgb,
+        var(--observatory-accent),
+        var(--color-background-secondary)
+      );
+    }
+
+    stop#stop3 {
+      stop-color: var(--color-background-secondary);
+    }
+  }
+
+  figure {
+    display: grid;
+
+    grid-template-columns: 2rem 1fr;
+
+    gap: 1.5rem;
+    align-items: start;
+
+    figcaption {
+      p {
+        margin: 0;
+        color: var(--color-text-primary);
+      }
+    }
+
+    &.assessment {
+      margin-left: 0;
+    }
+
+    &.assessment,
+    &.scanning,
+    &.security,
+    &.mdn {
+      svg path {
+        fill: var(--observatory-accent);
+      }
+    }
+  }
+}
+
+.obs-links__link {
+  display: inline-block;
+
+  margin-top: 2rem;
+  margin-right: 1rem;
+
+  font-size: var(--type-tiny-font-size);
+
+  color: var(--color-text-secondary);
+
+  text-decoration: underline;
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  &::before {
+    display: inline-block;
+
+    width: 1.5em;
+    height: 1.5em;
+
+    margin-right: 0.2em;
+
+    vertical-align: middle;
+
+    content: "";
+
+    background-color: var(--color-text-secondary);
+
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: cover;
+  }
+}
+
+.obs-links__link--faq {
+  &::before {
+    mask-image: url("../icon/circle-help.svg");
+  }
+}
+
+.obs-links__link--feedback {
+  &::before {
+    mask-image: url("../icon/circle-alert.svg");
+  }
+}
+
+/* results */
+.obs-results {
+  display: grid;
+
+  grid-template-areas:
+    "header"
+    "main"
+    "sidebar";
+  grid-template-columns: 1fr minmax(0, 200px);
+
+  row-gap: 0;
+  column-gap: 3rem;
+
+  max-width: var(--max-width);
+
+  padding-block: 0.75rem;
+  padding-inline: 1rem;
+
+  color: var(--color-text-primary);
+
+  background-color: light-dark(var(--color-gray-90), var(--color-gray-05));
+
+  @media (--screen-xxlarge) {
+    padding-inline: calc((100% - 1440px + (1rem * 2)) / 2);
+  }
+
+  --summary-icon: url("assets/summary-icon.svg");
+  --results-icon: url("assets/results-icon.svg");
+  --border-radius: 0.3rem;
+
+  @media (--screen-medium-and-wider) {
+    grid-template-areas: "header sidebar" "main sidebar";
+    grid-template-columns: minmax(0, 1fr) 12rem;
+    column-gap: 1rem;
+
+    section.header,
+    section.main {
+      padding: 0;
+    }
+  }
+
+  @media (--screen-xlarge-and-wider) {
+    grid-template-areas: "header sidebar" "main sidebar";
+    grid-template-columns: 2fr minmax(0, 200px);
+    column-gap: 3rem;
+  }
+}
+
+.obs-results__header {
+  display: flex;
+
+  flex-wrap: wrap;
+
+  grid-area: header;
+
+  gap: 1.5rem;
+  align-items: start;
+  justify-content: space-between;
+}
+
+.obs-results__feedback {
+  .obs-links__link {
+    margin-top: 1.5rem;
+    font-size: var(--font-size-small);
+  }
+}
+
+.obs-results__mdn-results {
+  grid-area: main;
+}
+
+.obs-toc {
+  grid-area: sidebar;
+  padding: 0;
+  margin-bottom: 2rem;
+}
+
+h2.obs-toc__heading {
+  margin: 0 0 1rem;
+  margin-top: 1.5rem;
+
+  font: var(--type-heading-h5);
+  font-size: var(--type-base-font-size-rem);
+
+  color: var(--color-text-secondary);
+
+  letter-spacing: 1.5px;
+}
+
+.obs-toc__list {
+  display: inline-block;
+
+  padding: 0.5rem 1rem;
+
+  font-size: var(--type-smaller-font-size);
+
+  color: var(--color-text-secondary);
+
+  text-decoration: none;
+
+  list-style: none;
+
+  border-left: 2px solid var(--color-border-primary);
+}
+
+.obs-toc__item {
+  padding: 0.5rem 0;
+  color: var(--color-text-secondary);
+
+  a {
+    color: var(--color-text-secondary);
+    text-decoration: none;
+  }
+}
+
+.obs-results__title-accent {
+  color: var(--observatory-accent);
+}