tio-design-make-experiments 0.0.1

package/src/imports/Dashboard.tsx

@@ -0,0 +1,1914 @@
+import svgPaths from "./svg-pr0k9194w9";
+import imgProfileDropdown from "figma:asset/6276cd19433d265f363bddc7f52f4937da9b1dd4.png";
+import { imgLogoTestinator } from "./svg-guy0p";
+
+function SpacerTestinator() {
+  return <div className="h-[40px] shrink-0 w-full" data-name="spacer testinator" />;
+}
+
+function Heading() {
+  return (
+    <div className="content-stretch flex gap-[10px] items-end not-italic relative shrink-0 w-full" data-name="HEADING">
+      <p className="flex-[1_0_0] font-['Source_Sans_Pro:Light',sans-serif] leading-[22px] min-h-px min-w-px relative text-[18px] text-white uppercase whitespace-pre-wrap">LATEST REPORT</p>
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[19px] relative shrink-0 text-[#78eac1] text-[13px]">VIEW REPORT</p>
+    </div>
+  );
+}
+
+function SpacerTestio() {
+  return <div className="h-[20px] shrink-0 w-full" data-name="spacer-testio" />;
+}
+
+function MaskGroup() {
+  return (
+    <div className="absolute left-0 size-[180px] top-0" data-name="Mask group">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 180 180">
+        <g id="Mask group">
+          <mask height="180" id="mask0_31_3525" maskUnits="userSpaceOnUse" style={{ maskType: "alpha" }} width="180" x="0" y="0">
+            <path clipRule="evenodd" d={svgPaths.p3f48ef30} fill="var(--fill-0, #262626)" fillRule="evenodd" id="Subtract" />
+          </mask>
+          <g mask="url(#mask0_31_3525)">
+            <rect fill="var(--fill-0, #FF3131)" height="90" id="Rectangle 1" width="90" x="90" />
+            <rect fill="var(--fill-0, #F48D21)" height="90" id="Rectangle 2" width="90" x="90" y="90" />
+            <rect fill="var(--fill-0, #33BA9E)" height="90" id="Rectangle 3" width="90" y="90" />
+          </g>
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function DonutChart() {
+  return (
+    <div className="content-stretch flex flex-col gap-[10px] items-center justify-center relative shrink-0 size-[180px]" data-name="Donut chart">
+      <div className="-translate-x-1/2 absolute left-1/2 size-[180px] top-0" data-name="Subtract">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 180 180">
+          <path clipRule="evenodd" d={svgPaths.p3f48ef30} fill="var(--fill-0, #262626)" fillRule="evenodd" id="Subtract" />
+        </svg>
+      </div>
+      <p className="font-['Source_Sans_Pro:Light',sans-serif] leading-[40px] min-w-full not-italic relative shrink-0 text-[60px] text-center text-white w-[min-content] whitespace-pre-wrap">999</p>
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[13px] min-w-full not-italic relative shrink-0 text-[#888] text-[11px] text-center w-[min-content] whitespace-pre-wrap">Total check executions</p>
+      <MaskGroup />
+    </div>
+  );
+}
+
+function SpacerTailWind() {
+  return (
+    <div className="h-[20px] relative shrink-0 w-full" data-name="Spacer TailWind">
+      <div className="absolute bg-[rgba(217,217,217,0)] inset-0" data-name="Spacer" />
+    </div>
+  );
+}
+
+function LegendDot() {
+  return (
+    <div className="relative shrink-0 size-[5px]" data-name="legend dot">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 5 5">
+        <g id="legend dot">
+          <circle cx="2.5" cy="2.5" fill="var(--fill-0, #33BA9E)" id="legend dot_2" r="2.5" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function LegendItem() {
+  return (
+    <div className="content-stretch flex gap-[6px] items-center justify-center relative shrink-0" data-name="Legend item">
+      <LegendDot />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[13px] not-italic relative shrink-0 text-[#888] text-[11px]">12 passed</p>
+    </div>
+  );
+}
+
+function LegendDot1() {
+  return (
+    <div className="relative shrink-0 size-[5px]" data-name="legend dot">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 5 5">
+        <g id="legend dot">
+          <circle cx="2.5" cy="2.5" fill="var(--fill-0, #FF3131)" id="legend dot_2" r="2.5" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function LegendItem1() {
+  return (
+    <div className="content-stretch flex gap-[6px] items-center justify-center relative shrink-0" data-name="Legend item">
+      <LegendDot1 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[13px] not-italic relative shrink-0 text-[#888] text-[11px]">12 failed</p>
+    </div>
+  );
+}
+
+function LegendDot2() {
+  return (
+    <div className="relative shrink-0 size-[5px]" data-name="legend dot">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 5 5">
+        <g id="legend dot">
+          <circle cx="2.5" cy="2.5" fill="var(--fill-0, #F48D21)" id="legend dot_2" r="2.5" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function LegendItem2() {
+  return (
+    <div className="content-stretch flex gap-[6px] items-center justify-center relative shrink-0" data-name="Legend item">
+      <LegendDot2 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[13px] not-italic relative shrink-0 text-[#888] text-[11px]">12 blocked</p>
+    </div>
+  );
+}
+
+function Legend() {
+  return (
+    <div className="content-stretch flex gap-[10px] items-center justify-center relative shrink-0 w-full" data-name="Legend">
+      <LegendItem />
+      <LegendItem1 />
+      <LegendItem2 />
+    </div>
+  );
+}
+
+function ChartLineHorizontal() {
+  return (
+    <div className="content-stretch flex flex-col items-center relative shrink-0 w-full" data-name="CHART Line horizontal">
+      <DonutChart />
+      <SpacerTailWind />
+      <Legend />
+    </div>
+  );
+}
+
+function CardDonut() {
+  return (
+    <div className="bg-[#1d1d1d] content-stretch flex flex-col items-start p-[30px] relative rounded-[15px] self-stretch shrink-0 w-[300px]" data-name="CARD donut">
+      <Heading />
+      <SpacerTestio />
+      <ChartLineHorizontal />
+    </div>
+  );
+}
+
+function SpacerTestio1() {
+  return <div className="h-[20px] shrink-0 w-full" data-name="spacer-testio" />;
+}
+
+function SpacerTailWind1() {
+  return (
+    <div className="h-[10px] relative shrink-0 w-full" data-name="Spacer TailWind">
+      <div className="absolute bg-[rgba(217,217,217,0)] inset-0" data-name="Spacer" />
+    </div>
+  );
+}
+
+function SpacerTailWind2() {
+  return (
+    <div className="h-[10px] relative shrink-0 w-full" data-name="Spacer TailWind">
+      <div className="absolute bg-[rgba(217,217,217,0)] inset-0" data-name="Spacer" />
+    </div>
+  );
+}
+
+function SpacerTailWind3() {
+  return (
+    <div className="h-[10px] relative shrink-0 w-full" data-name="Spacer TailWind">
+      <div className="absolute bg-[rgba(217,217,217,0)] inset-0" data-name="Spacer" />
+    </div>
+  );
+}
+
+function Col() {
+  return (
+    <div className="content-stretch flex flex-col items-center justify-center relative shrink-0" data-name="COL">
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-center text-white">5</p>
+      <div className="relative shrink-0 size-[10px]" data-name="node">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 10 10">
+          <circle cx="5" cy="5" fill="var(--fill-0, #33BA9E)" id="node" r="5" />
+        </svg>
+      </div>
+      <SpacerTailWind1 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-center text-white">3</p>
+      <div className="relative shrink-0 size-[10px]" data-name="node">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 10 10">
+          <circle cx="5" cy="5" fill="var(--fill-0, #F48D21)" id="node" r="5" />
+        </svg>
+      </div>
+      <SpacerTailWind2 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-center text-white">0</p>
+      <div className="relative shrink-0 size-[10px]" data-name="node">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 10 10">
+          <circle cx="5" cy="5" fill="var(--fill-0, #FF3131)" id="node" r="5" />
+        </svg>
+      </div>
+      <SpacerTailWind3 />
+      <div className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[13px] not-italic relative shrink-0 text-[#888] text-[11px] text-center whitespace-nowrap">
+        <p className="mb-0">19-09-2025</p>
+        <p>10:00</p>
+      </div>
+    </div>
+  );
+}
+
+function SpacerTailWind4() {
+  return (
+    <div className="h-[10px] relative shrink-0 w-full" data-name="Spacer TailWind">
+      <div className="absolute bg-[rgba(217,217,217,0)] inset-0" data-name="Spacer" />
+    </div>
+  );
+}
+
+function SpacerTailWind5() {
+  return (
+    <div className="h-[10px] relative shrink-0 w-full" data-name="Spacer TailWind">
+      <div className="absolute bg-[rgba(217,217,217,0)] inset-0" data-name="Spacer" />
+    </div>
+  );
+}
+
+function SpacerTailWind6() {
+  return (
+    <div className="h-[20px] relative shrink-0 w-full" data-name="Spacer TailWind">
+      <div className="absolute bg-[rgba(217,217,217,0)] inset-0" data-name="Spacer" />
+    </div>
+  );
+}
+
+function Col1() {
+  return (
+    <div className="content-stretch flex flex-col items-center justify-center relative shrink-0" data-name="COL">
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-center text-white">7</p>
+      <div className="relative shrink-0 size-[10px]" data-name="node">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 10 10">
+          <circle cx="5" cy="5" fill="var(--fill-0, #33BA9E)" id="node" r="5" />
+        </svg>
+      </div>
+      <SpacerTailWind4 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-center text-white">4</p>
+      <div className="relative shrink-0 size-[10px]" data-name="node">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 10 10">
+          <circle cx="5" cy="5" fill="var(--fill-0, #F48D21)" id="node" r="5" />
+        </svg>
+      </div>
+      <SpacerTailWind5 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-center text-white">2</p>
+      <div className="relative shrink-0 size-[10px]" data-name="node">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 10 10">
+          <circle cx="5" cy="5" fill="var(--fill-0, #FF3131)" id="node" r="5" />
+        </svg>
+      </div>
+      <SpacerTailWind6 />
+      <div className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[13px] not-italic relative shrink-0 text-[#888] text-[11px] text-center whitespace-nowrap">
+        <p className="mb-0">19-09-2025</p>
+        <p>10:00</p>
+      </div>
+    </div>
+  );
+}
+
+function SpacerTailWind7() {
+  return (
+    <div className="h-[10px] relative shrink-0 w-full" data-name="Spacer TailWind">
+      <div className="absolute bg-[rgba(217,217,217,0)] inset-0" data-name="Spacer" />
+    </div>
+  );
+}
+
+function SpacerTailWind8() {
+  return (
+    <div className="h-[10px] relative shrink-0 w-full" data-name="Spacer TailWind">
+      <div className="absolute bg-[rgba(217,217,217,0)] inset-0" data-name="Spacer" />
+    </div>
+  );
+}
+
+function SpacerTailWind9() {
+  return (
+    <div className="h-[10px] relative shrink-0 w-full" data-name="Spacer TailWind">
+      <div className="absolute bg-[rgba(217,217,217,0)] inset-0" data-name="Spacer" />
+    </div>
+  );
+}
+
+function Col2() {
+  return (
+    <div className="content-stretch flex flex-col items-center justify-center relative shrink-0" data-name="COL">
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-center text-white">6</p>
+      <div className="relative shrink-0 size-[10px]" data-name="node">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 10 10">
+          <circle cx="5" cy="5" fill="var(--fill-0, #F48D21)" id="node" r="5" />
+        </svg>
+      </div>
+      <SpacerTailWind7 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-center text-white">4</p>
+      <div className="relative shrink-0 size-[10px]" data-name="node">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 10 10">
+          <circle cx="5" cy="5" fill="var(--fill-0, #33BA9E)" id="node" r="5" />
+        </svg>
+      </div>
+      <SpacerTailWind8 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-center text-white">0</p>
+      <div className="relative shrink-0 size-[10px]" data-name="node">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 10 10">
+          <circle cx="5" cy="5" fill="var(--fill-0, #FF3131)" id="node" r="5" />
+        </svg>
+      </div>
+      <SpacerTailWind9 />
+      <div className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[13px] not-italic relative shrink-0 text-[#888] text-[11px] text-center whitespace-nowrap">
+        <p className="mb-0">19-09-2025</p>
+        <p>10:00</p>
+      </div>
+    </div>
+  );
+}
+
+function SpacerTailWind10() {
+  return (
+    <div className="h-[48px] relative shrink-0 w-full" data-name="Spacer TailWind">
+      <div className="absolute bg-[rgba(217,217,217,0)] inset-0" data-name="Spacer" />
+    </div>
+  );
+}
+
+function SpacerTailWind11() {
+  return (
+    <div className="h-[10px] relative shrink-0 w-full" data-name="Spacer TailWind">
+      <div className="absolute bg-[rgba(217,217,217,0)] inset-0" data-name="Spacer" />
+    </div>
+  );
+}
+
+function SpacerTailWind12() {
+  return (
+    <div className="h-[20px] relative shrink-0 w-full" data-name="Spacer TailWind">
+      <div className="absolute bg-[rgba(217,217,217,0)] inset-0" data-name="Spacer" />
+    </div>
+  );
+}
+
+function Col3() {
+  return (
+    <div className="content-stretch flex flex-col items-center justify-center relative shrink-0" data-name="COL">
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-center text-white">9</p>
+      <div className="relative shrink-0 size-[10px]" data-name="node">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 10 10">
+          <circle cx="5" cy="5" fill="var(--fill-0, #33BA9E)" id="node" r="5" />
+        </svg>
+      </div>
+      <SpacerTailWind10 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-center text-white">3</p>
+      <div className="relative shrink-0 size-[10px]" data-name="node">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 10 10">
+          <circle cx="5" cy="5" fill="var(--fill-0, #F48D21)" id="node" r="5" />
+        </svg>
+      </div>
+      <SpacerTailWind11 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-center text-white">2</p>
+      <div className="relative shrink-0 size-[10px]" data-name="node">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 10 10">
+          <circle cx="5" cy="5" fill="var(--fill-0, #FF3131)" id="node" r="5" />
+        </svg>
+      </div>
+      <SpacerTailWind12 />
+      <div className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[13px] not-italic relative shrink-0 text-[#888] text-[11px] text-center whitespace-nowrap">
+        <p className="mb-0">19-09-2025</p>
+        <p>10:00</p>
+      </div>
+    </div>
+  );
+}
+
+function SpacerTailWind13() {
+  return (
+    <div className="h-[40px] relative shrink-0 w-full" data-name="Spacer TailWind">
+      <div className="absolute bg-[rgba(217,217,217,0)] inset-0" data-name="Spacer" />
+    </div>
+  );
+}
+
+function SpacerTailWind14() {
+  return (
+    <div className="h-[10px] relative shrink-0 w-full" data-name="Spacer TailWind">
+      <div className="absolute bg-[rgba(217,217,217,0)] inset-0" data-name="Spacer" />
+    </div>
+  );
+}
+
+function SpacerTailWind15() {
+  return (
+    <div className="h-[10px] relative shrink-0 w-full" data-name="Spacer TailWind">
+      <div className="absolute bg-[rgba(217,217,217,0)] inset-0" data-name="Spacer" />
+    </div>
+  );
+}
+
+function Col4() {
+  return (
+    <div className="content-stretch flex flex-col items-center justify-center relative shrink-0" data-name="COL">
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-center text-white">8</p>
+      <div className="relative shrink-0 size-[10px]" data-name="node">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 10 10">
+          <circle cx="5" cy="5" fill="var(--fill-0, #FF3131)" id="node" r="5" />
+        </svg>
+      </div>
+      <SpacerTailWind13 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-center text-white">3</p>
+      <div className="relative shrink-0 size-[10px]" data-name="node">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 10 10">
+          <circle cx="5" cy="5" fill="var(--fill-0, #F48D21)" id="node" r="5" />
+        </svg>
+      </div>
+      <SpacerTailWind14 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-center text-white">0</p>
+      <div className="relative shrink-0 size-[10px]" data-name="node">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 10 10">
+          <circle cx="5" cy="5" fill="var(--fill-0, #33BA9E)" id="node" r="5" />
+        </svg>
+      </div>
+      <SpacerTailWind15 />
+      <div className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[13px] not-italic relative shrink-0 text-[#888] text-[11px] text-center whitespace-nowrap">
+        <p className="mb-0">19-09-2025</p>
+        <p>10:00</p>
+      </div>
+    </div>
+  );
+}
+
+function SpacerTailWind16() {
+  return (
+    <div className="h-[10px] relative shrink-0 w-full" data-name="Spacer TailWind">
+      <div className="absolute bg-[rgba(217,217,217,0)] inset-0" data-name="Spacer" />
+    </div>
+  );
+}
+
+function SpacerTailWind17() {
+  return (
+    <div className="h-[20px] relative shrink-0 w-full" data-name="Spacer TailWind">
+      <div className="absolute bg-[rgba(217,217,217,0)] inset-0" data-name="Spacer" />
+    </div>
+  );
+}
+
+function SpacerTailWind18() {
+  return (
+    <div className="h-[10px] relative shrink-0 w-full" data-name="Spacer TailWind">
+      <div className="absolute bg-[rgba(217,217,217,0)] inset-0" data-name="Spacer" />
+    </div>
+  );
+}
+
+function Col5() {
+  return (
+    <div className="content-stretch flex flex-col items-center justify-center relative shrink-0" data-name="COL">
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-center text-white">5</p>
+      <div className="relative shrink-0 size-[10px]" data-name="node">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 10 10">
+          <circle cx="5" cy="5" fill="var(--fill-0, #33BA9E)" id="node" r="5" />
+        </svg>
+      </div>
+      <SpacerTailWind16 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-center text-white">4</p>
+      <div className="relative shrink-0 size-[10px]" data-name="node">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 10 10">
+          <circle cx="5" cy="5" fill="var(--fill-0, #FF3131)" id="node" r="5" />
+        </svg>
+      </div>
+      <SpacerTailWind17 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-center text-white">0</p>
+      <div className="relative shrink-0 size-[10px]" data-name="node">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 10 10">
+          <circle cx="5" cy="5" fill="var(--fill-0, #F48D21)" id="node" r="5" />
+        </svg>
+      </div>
+      <SpacerTailWind18 />
+      <div className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[13px] not-italic relative shrink-0 text-[#888] text-[11px] text-center whitespace-nowrap">
+        <p className="mb-0">19-09-2025</p>
+        <p>10:00</p>
+      </div>
+    </div>
+  );
+}
+
+function SpacerTailWind19() {
+  return (
+    <div className="h-[10px] relative shrink-0 w-full" data-name="Spacer TailWind">
+      <div className="absolute bg-[rgba(217,217,217,0)] inset-0" data-name="Spacer" />
+    </div>
+  );
+}
+
+function SpacerTailWind20() {
+  return (
+    <div className="h-[20px] relative shrink-0 w-full" data-name="Spacer TailWind">
+      <div className="absolute bg-[rgba(217,217,217,0)] inset-0" data-name="Spacer" />
+    </div>
+  );
+}
+
+function SpacerTailWind21() {
+  return (
+    <div className="h-[10px] relative shrink-0 w-full" data-name="Spacer TailWind">
+      <div className="absolute bg-[rgba(217,217,217,0)] inset-0" data-name="Spacer" />
+    </div>
+  );
+}
+
+function Col6() {
+  return (
+    <div className="content-stretch flex flex-col items-center justify-center relative shrink-0" data-name="COL">
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-center text-white">5</p>
+      <div className="relative shrink-0 size-[10px]" data-name="node">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 10 10">
+          <circle cx="5" cy="5" fill="var(--fill-0, #33BA9E)" id="node" r="5" />
+        </svg>
+      </div>
+      <SpacerTailWind19 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-center text-white">4</p>
+      <div className="relative shrink-0 size-[10px]" data-name="node">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 10 10">
+          <circle cx="5" cy="5" fill="var(--fill-0, #FF3131)" id="node" r="5" />
+        </svg>
+      </div>
+      <SpacerTailWind20 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-center text-white">0</p>
+      <div className="relative shrink-0 size-[10px]" data-name="node">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 10 10">
+          <circle cx="5" cy="5" fill="var(--fill-0, #F48D21)" id="node" r="5" />
+        </svg>
+      </div>
+      <SpacerTailWind21 />
+      <div className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[13px] not-italic relative shrink-0 text-[#888] text-[11px] text-center whitespace-nowrap">
+        <p className="mb-0">19-09-2025</p>
+        <p>10:00</p>
+      </div>
+    </div>
+  );
+}
+
+function ChartLineHorizontal1() {
+  return (
+    <div className="content-stretch flex items-end justify-between relative shrink-0 w-full" data-name="CHART Line horizontal">
+      <Col />
+      <Col1 />
+      <Col2 />
+      <Col3 />
+      <Col4 />
+      <Col5 />
+      <Col6 />
+      <div className="absolute bottom-[40px] h-[121px] left-[25px] right-[27px]" data-name="Line">
+        <div className="absolute inset-[-0.54%_0]">
+          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 708.046 122.31">
+            <path d={svgPaths.p35553200} id="Line" stroke="var(--stroke-0, #33BA9E)" />
+          </svg>
+        </div>
+      </div>
+      <div className="absolute bottom-[41px] h-[71px] left-[25px] right-[28px]" data-name="Line">
+        <div className="absolute inset-[-0.72%_0_-0.7%_0]">
+          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 707.046 72.0106">
+            <path d={svgPaths.p5822d30} id="Line" stroke="var(--stroke-0, #F48D21)" />
+          </svg>
+        </div>
+      </div>
+      <div className="absolute bottom-[40px] h-[102px] left-[25px] right-[27px]" data-name="Line">
+        <div className="absolute inset-[-0.57%_0_-0.49%_0]">
+          <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 708.051 103.081">
+            <path d={svgPaths.p1bd5e640} id="Line" stroke="var(--stroke-0, #FF3131)" />
+          </svg>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SpacerTailWind22() {
+  return (
+    <div className="h-[20px] relative shrink-0 w-full" data-name="Spacer TailWind">
+      <div className="absolute bg-[rgba(217,217,217,0)] inset-0" data-name="Spacer" />
+    </div>
+  );
+}
+
+function LegendDot3() {
+  return (
+    <div className="relative shrink-0 size-[5px]" data-name="legend dot">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 5 5">
+        <g id="legend dot">
+          <circle cx="2.5" cy="2.5" fill="var(--fill-0, #78EAC1)" id="legend dot_2" r="2.5" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function LegendItem3() {
+  return (
+    <div className="content-stretch flex gap-[6px] items-center justify-center relative shrink-0" data-name="Legend item">
+      <LegendDot3 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[13px] not-italic relative shrink-0 text-[#888] text-[11px]">passed</p>
+    </div>
+  );
+}
+
+function LegendDot4() {
+  return (
+    <div className="relative shrink-0 size-[5px]" data-name="legend dot">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 5 5">
+        <g id="legend dot">
+          <circle cx="2.5" cy="2.5" fill="var(--fill-0, #FF3131)" id="legend dot_2" r="2.5" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function LegendItem4() {
+  return (
+    <div className="content-stretch flex gap-[6px] items-center justify-center relative shrink-0" data-name="Legend item">
+      <LegendDot4 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[13px] not-italic relative shrink-0 text-[#888] text-[11px]">failed</p>
+    </div>
+  );
+}
+
+function LegendDot5() {
+  return (
+    <div className="relative shrink-0 size-[5px]" data-name="legend dot">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 5 5">
+        <g id="legend dot">
+          <circle cx="2.5" cy="2.5" fill="var(--fill-0, #F48D21)" id="legend dot_2" r="2.5" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function LegendItem5() {
+  return (
+    <div className="content-stretch flex gap-[6px] items-center justify-center relative shrink-0" data-name="Legend item">
+      <LegendDot5 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[13px] not-italic relative shrink-0 text-[#888] text-[11px]">blocked</p>
+    </div>
+  );
+}
+
+function Legend1() {
+  return (
+    <div className="content-stretch flex gap-[10px] h-[13px] items-center justify-center relative shrink-0 w-full" data-name="Legend">
+      <LegendItem3 />
+      <LegendItem4 />
+      <LegendItem5 />
+    </div>
+  );
+}
+
+function CardLineChart() {
+  return (
+    <div className="bg-[#1d1d1d] flex-[1_0_0] min-h-px min-w-px relative rounded-[15px]" data-name="CARD Line chart">
+      <div className="content-stretch flex flex-col items-start p-[30px] relative w-full">
+        <p className="font-['Source_Sans_Pro:Light',sans-serif] leading-[22px] not-italic relative shrink-0 text-[18px] text-white uppercase w-full whitespace-pre-wrap">TEST SESSION RESULTS</p>
+        <SpacerTestio1 />
+        <ChartLineHorizontal1 />
+        <SpacerTailWind22 />
+        <Legend1 />
+      </div>
+    </div>
+  );
+}
+
+function IconPlusXl() {
+  return (
+    <div className="relative shrink-0 size-[60px]" data-name="icon-plus-xl">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 60 60">
+        <g clipPath="url(#clip0_31_2264)" id="icon-plus-xl">
+          <path d={svgPaths.p2455100} fill="var(--fill-0, #78EAC1)" id="Union" />
+        </g>
+        <defs>
+          <clipPath id="clip0_31_2264">
+            <rect fill="white" height="60" width="60" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+  );
+}
+
+function IconWrapper() {
+  return (
+    <div className="content-stretch flex flex-col items-center justify-center pb-[20px] relative shrink-0" data-name="Icon wrapper">
+      <IconPlusXl />
+    </div>
+  );
+}
+
+function BtnXl() {
+  return (
+    <div className="content-stretch flex flex-col items-center justify-center px-[30px] py-[50px] relative rounded-[10px] self-stretch shrink-0 w-[300px]" data-name="btn-xl">
+      <div aria-hidden="true" className="absolute border border-[#2e2e2e] border-solid inset-0 pointer-events-none rounded-[10px]" />
+      <IconWrapper />
+      <p className="font-['Source_Sans_3:Regular',sans-serif] font-normal leading-[14px] min-w-full relative shrink-0 text-[#78eac1] text-[16px] text-center uppercase w-[min-content] whitespace-pre-wrap">CREATE NEW TEST SESSION</p>
+    </div>
+  );
+}
+
+function Row() {
+  return (
+    <div className="content-stretch flex gap-[40px] items-start relative shrink-0 w-full" data-name="ROW">
+      <CardDonut />
+      <CardLineChart />
+      <BtnXl />
+    </div>
+  );
+}
+
+function SpacerTailWind23() {
+  return (
+    <div className="h-[40px] relative shrink-0 w-full" data-name="Spacer TailWind">
+      <div className="absolute bg-[rgba(217,217,217,0)] inset-0" data-name="Spacer" />
+    </div>
+  );
+}
+
+function SpacerTestio2() {
+  return <div className="h-[20px] shrink-0 w-full" data-name="spacer-testio" />;
+}
+
+function TitelWrapper() {
+  return (
+    <div className="content-stretch flex flex-[1_0_0] items-center min-h-px min-w-px pt-[2px] relative" data-name="Titel wrapper">
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-white">Test session title</p>
+    </div>
+  );
+}
+
+function IconCheckCircleFilled() {
+  return (
+    <div className="relative shrink-0 size-[20px]" data-name="icon-check-circle-filled">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 20">
+        <g id="icon-check-circle-filled">
+          <path d={svgPaths.p30b87920} fill="var(--fill-0, #33BA9E)" id="Union" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function SpacerTestio3() {
+  return <div className="shrink-0 size-[10px]" data-name="spacer-testio" />;
+}
+
+function Item() {
+  return (
+    <div className="content-stretch flex items-center relative shrink-0" data-name="Item">
+      <IconCheckCircleFilled />
+      <SpacerTestio3 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-white w-[15px] whitespace-pre-wrap">1</p>
+    </div>
+  );
+}
+
+function SpacerTestio4() {
+  return <div className="shrink-0 size-[20px]" data-name="spacer-testio" />;
+}
+
+function IconCrossCircleFilled() {
+  return (
+    <div className="relative shrink-0 size-[20px]" data-name="icon-cross-circle-filled">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 20">
+        <g id="icon-cross-circle-filled">
+          <path d={svgPaths.p30bab400} fill="var(--fill-0, #FF3131)" id="Union" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function SpacerTestio5() {
+  return <div className="shrink-0 size-[10px]" data-name="spacer-testio" />;
+}
+
+function Item1() {
+  return (
+    <div className="content-stretch flex items-center relative shrink-0" data-name="Item">
+      <IconCrossCircleFilled />
+      <SpacerTestio5 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-white w-[15px] whitespace-pre-wrap">1</p>
+    </div>
+  );
+}
+
+function SpacerTestio6() {
+  return <div className="shrink-0 size-[20px]" data-name="spacer-testio" />;
+}
+
+function IconBlocked() {
+  return (
+    <div className="relative shrink-0 size-[20px]" data-name="icon-blocked">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 20">
+        <g id="icon-blocked">
+          <g id="blocked" />
+          <path d={svgPaths.p13555100} fill="var(--fill-0, #F48D21)" id="Union" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function SpacerTestio7() {
+  return <div className="shrink-0 size-[10px]" data-name="spacer-testio" />;
+}
+
+function Item2() {
+  return (
+    <div className="content-stretch flex items-center relative shrink-0" data-name="Item">
+      <IconBlocked />
+      <SpacerTestio7 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-white w-[15px] whitespace-pre-wrap">1</p>
+    </div>
+  );
+}
+
+function SpacerTestio8() {
+  return (
+    <div className="h-[20px] relative shrink-0 w-[30px]" data-name="spacer-testio">
+      <div className="absolute bottom-1/2 left-0 right-[66.67%] top-0" data-name="spacer" />
+    </div>
+  );
+}
+
+function Counter() {
+  return (
+    <div className="content-stretch flex items-center relative shrink-0" data-name="COUNTER">
+      <Item />
+      <SpacerTestio4 />
+      <Item1 />
+      <SpacerTestio6 />
+      <Item2 />
+      <SpacerTestio8 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-right text-white w-[87px] whitespace-pre-wrap">3 checks total</p>
+    </div>
+  );
+}
+
+function Header() {
+  return (
+    <div className="bg-[#262626] min-h-[40px] relative rounded-[5px] shrink-0 w-full" data-name="HEADER">
+      <div aria-hidden="true" className="absolute border border-[#262626] border-solid inset-0 pointer-events-none rounded-[5px]" />
+      <div className="content-stretch flex gap-[10px] items-start min-h-[inherit] px-[20px] py-[10px] relative w-full">
+        <TitelWrapper />
+        <Counter />
+      </div>
+    </div>
+  );
+}
+
+function GridListItem() {
+  return (
+    <div className="content-stretch flex flex-col h-[40px] items-start relative rounded-[5px] shrink-0 w-full" data-name="Grid List item">
+      <Header />
+    </div>
+  );
+}
+
+function SpacerTailWind24() {
+  return (
+    <div className="h-[10px] relative shrink-0 w-full" data-name="Spacer TailWind">
+      <div className="absolute bg-[rgba(217,217,217,0)] inset-0" data-name="Spacer" />
+    </div>
+  );
+}
+
+function TitelWrapper1() {
+  return (
+    <div className="content-stretch flex flex-[1_0_0] items-center min-h-px min-w-px pt-[2px] relative" data-name="Titel wrapper">
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-white">Test session title</p>
+    </div>
+  );
+}
+
+function IconCheckCircleFilled1() {
+  return (
+    <div className="relative shrink-0 size-[20px]" data-name="icon-check-circle-filled">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 20">
+        <g id="icon-check-circle-filled">
+          <path d={svgPaths.p30b87920} fill="var(--fill-0, #33BA9E)" id="Union" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function SpacerTestio9() {
+  return <div className="shrink-0 size-[10px]" data-name="spacer-testio" />;
+}
+
+function Item3() {
+  return (
+    <div className="content-stretch flex items-center relative shrink-0" data-name="Item">
+      <IconCheckCircleFilled1 />
+      <SpacerTestio9 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-white w-[15px] whitespace-pre-wrap">33</p>
+    </div>
+  );
+}
+
+function SpacerTestio10() {
+  return <div className="shrink-0 size-[20px]" data-name="spacer-testio" />;
+}
+
+function IconCrossCircleFilled1() {
+  return (
+    <div className="relative shrink-0 size-[20px]" data-name="icon-cross-circle-filled">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 20">
+        <g id="icon-cross-circle-filled">
+          <path d={svgPaths.p30bab400} fill="var(--fill-0, #FF3131)" id="Union" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function SpacerTestio11() {
+  return <div className="shrink-0 size-[10px]" data-name="spacer-testio" />;
+}
+
+function Item4() {
+  return (
+    <div className="content-stretch flex items-center relative shrink-0" data-name="Item">
+      <IconCrossCircleFilled1 />
+      <SpacerTestio11 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-white w-[15px] whitespace-pre-wrap">33</p>
+    </div>
+  );
+}
+
+function SpacerTestio12() {
+  return <div className="shrink-0 size-[20px]" data-name="spacer-testio" />;
+}
+
+function IconBlocked1() {
+  return (
+    <div className="relative shrink-0 size-[20px]" data-name="icon-blocked">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 20">
+        <g id="icon-blocked">
+          <g id="blocked" />
+          <path d={svgPaths.p13555100} fill="var(--fill-0, #F48D21)" id="Union" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function SpacerTestio13() {
+  return <div className="shrink-0 size-[10px]" data-name="spacer-testio" />;
+}
+
+function Item5() {
+  return (
+    <div className="content-stretch flex items-center relative shrink-0" data-name="Item">
+      <IconBlocked1 />
+      <SpacerTestio13 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-white w-[15px] whitespace-pre-wrap">33</p>
+    </div>
+  );
+}
+
+function SpacerTestio14() {
+  return (
+    <div className="h-[20px] relative shrink-0 w-[30px]" data-name="spacer-testio">
+      <div className="absolute bottom-1/2 left-0 right-[66.67%] top-0" data-name="spacer" />
+    </div>
+  );
+}
+
+function Counter1() {
+  return (
+    <div className="content-stretch flex items-center relative shrink-0" data-name="COUNTER">
+      <Item3 />
+      <SpacerTestio10 />
+      <Item4 />
+      <SpacerTestio12 />
+      <Item5 />
+      <SpacerTestio14 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-right text-white w-[87px] whitespace-pre-wrap">99 checks total</p>
+    </div>
+  );
+}
+
+function Header1() {
+  return (
+    <div className="bg-[#262626] min-h-[40px] relative rounded-[5px] shrink-0 w-full" data-name="HEADER">
+      <div aria-hidden="true" className="absolute border border-[#262626] border-solid inset-0 pointer-events-none rounded-[5px]" />
+      <div className="content-stretch flex gap-[10px] items-start min-h-[inherit] px-[20px] py-[10px] relative w-full">
+        <TitelWrapper1 />
+        <Counter1 />
+      </div>
+    </div>
+  );
+}
+
+function GridListItem1() {
+  return (
+    <div className="content-stretch flex flex-col h-[40px] items-start relative rounded-[5px] shrink-0 w-full" data-name="Grid List item">
+      <Header1 />
+    </div>
+  );
+}
+
+function SpacerTailWind25() {
+  return (
+    <div className="h-[10px] relative shrink-0 w-full" data-name="Spacer TailWind">
+      <div className="absolute bg-[rgba(217,217,217,0)] inset-0" data-name="Spacer" />
+    </div>
+  );
+}
+
+function TitelWrapper2() {
+  return (
+    <div className="content-stretch flex flex-[1_0_0] items-center min-h-px min-w-px pt-[2px] relative" data-name="Titel wrapper">
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-white">Test session title</p>
+    </div>
+  );
+}
+
+function IconCheckCircleFilled2() {
+  return (
+    <div className="relative shrink-0 size-[20px]" data-name="icon-check-circle-filled">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 20">
+        <g id="icon-check-circle-filled">
+          <path d={svgPaths.p30b87920} fill="var(--fill-0, #33BA9E)" id="Union" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function SpacerTestio15() {
+  return <div className="shrink-0 size-[10px]" data-name="spacer-testio" />;
+}
+
+function Item6() {
+  return (
+    <div className="content-stretch flex items-center relative shrink-0" data-name="Item">
+      <IconCheckCircleFilled2 />
+      <SpacerTestio15 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-white w-[15px] whitespace-pre-wrap">50</p>
+    </div>
+  );
+}
+
+function SpacerTestio16() {
+  return <div className="shrink-0 size-[20px]" data-name="spacer-testio" />;
+}
+
+function IconCrossCircleFilled2() {
+  return (
+    <div className="relative shrink-0 size-[20px]" data-name="icon-cross-circle-filled">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 20">
+        <g id="icon-cross-circle-filled">
+          <path d={svgPaths.p30bab400} fill="var(--fill-0, #FF3131)" id="Union" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function SpacerTestio17() {
+  return <div className="shrink-0 size-[10px]" data-name="spacer-testio" />;
+}
+
+function Item7() {
+  return (
+    <div className="content-stretch flex items-center relative shrink-0" data-name="Item">
+      <IconCrossCircleFilled2 />
+      <SpacerTestio17 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-white w-[15px] whitespace-pre-wrap">10</p>
+    </div>
+  );
+}
+
+function SpacerTestio18() {
+  return <div className="shrink-0 size-[20px]" data-name="spacer-testio" />;
+}
+
+function IconBlocked2() {
+  return (
+    <div className="relative shrink-0 size-[20px]" data-name="icon-blocked">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 20">
+        <g id="icon-blocked">
+          <g id="blocked" />
+          <path d={svgPaths.p13555100} fill="var(--fill-0, #F48D21)" id="Union" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function SpacerTestio19() {
+  return <div className="shrink-0 size-[10px]" data-name="spacer-testio" />;
+}
+
+function Item8() {
+  return (
+    <div className="content-stretch flex items-center relative shrink-0" data-name="Item">
+      <IconBlocked2 />
+      <SpacerTestio19 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-white w-[15px] whitespace-pre-wrap">1</p>
+    </div>
+  );
+}
+
+function SpacerTestio20() {
+  return (
+    <div className="h-[20px] relative shrink-0 w-[30px]" data-name="spacer-testio">
+      <div className="absolute bottom-1/2 left-0 right-[66.67%] top-0" data-name="spacer" />
+    </div>
+  );
+}
+
+function Counter2() {
+  return (
+    <div className="content-stretch flex items-center relative shrink-0" data-name="COUNTER">
+      <Item6 />
+      <SpacerTestio16 />
+      <Item7 />
+      <SpacerTestio18 />
+      <Item8 />
+      <SpacerTestio20 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-right text-white w-[87px] whitespace-pre-wrap">99 checks total</p>
+    </div>
+  );
+}
+
+function Header2() {
+  return (
+    <div className="bg-[#262626] min-h-[40px] relative rounded-[5px] shrink-0 w-full" data-name="HEADER">
+      <div aria-hidden="true" className="absolute border border-[#262626] border-solid inset-0 pointer-events-none rounded-[5px]" />
+      <div className="content-stretch flex gap-[10px] items-start min-h-[inherit] px-[20px] py-[10px] relative w-full">
+        <TitelWrapper2 />
+        <Counter2 />
+      </div>
+    </div>
+  );
+}
+
+function GridListItem2() {
+  return (
+    <div className="content-stretch flex flex-col h-[40px] items-start relative rounded-[5px] shrink-0 w-full" data-name="Grid List item">
+      <Header2 />
+    </div>
+  );
+}
+
+function SpacerTailWind26() {
+  return (
+    <div className="h-[10px] relative shrink-0 w-full" data-name="Spacer TailWind">
+      <div className="absolute bg-[rgba(217,217,217,0)] inset-0" data-name="Spacer" />
+    </div>
+  );
+}
+
+function TitelWrapper3() {
+  return (
+    <div className="content-stretch flex flex-[1_0_0] items-center min-h-px min-w-px pt-[2px] relative" data-name="Titel wrapper">
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-white">Test session title</p>
+    </div>
+  );
+}
+
+function IconCheckCircleFilled3() {
+  return (
+    <div className="relative shrink-0 size-[20px]" data-name="icon-check-circle-filled">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 20">
+        <g id="icon-check-circle-filled">
+          <path d={svgPaths.p30b87920} fill="var(--fill-0, #33BA9E)" id="Union" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function SpacerTestio21() {
+  return <div className="shrink-0 size-[10px]" data-name="spacer-testio" />;
+}
+
+function Item9() {
+  return (
+    <div className="content-stretch flex items-center relative shrink-0" data-name="Item">
+      <IconCheckCircleFilled3 />
+      <SpacerTestio21 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-white w-[15px] whitespace-pre-wrap">1</p>
+    </div>
+  );
+}
+
+function SpacerTestio22() {
+  return <div className="shrink-0 size-[20px]" data-name="spacer-testio" />;
+}
+
+function IconCrossCircleFilled3() {
+  return (
+    <div className="relative shrink-0 size-[20px]" data-name="icon-cross-circle-filled">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 20">
+        <g id="icon-cross-circle-filled">
+          <path d={svgPaths.p30bab400} fill="var(--fill-0, #FF3131)" id="Union" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function SpacerTestio23() {
+  return <div className="shrink-0 size-[10px]" data-name="spacer-testio" />;
+}
+
+function Item10() {
+  return (
+    <div className="content-stretch flex items-center relative shrink-0" data-name="Item">
+      <IconCrossCircleFilled3 />
+      <SpacerTestio23 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-white w-[15px] whitespace-pre-wrap">1</p>
+    </div>
+  );
+}
+
+function SpacerTestio24() {
+  return <div className="shrink-0 size-[20px]" data-name="spacer-testio" />;
+}
+
+function IconBlocked3() {
+  return (
+    <div className="relative shrink-0 size-[20px]" data-name="icon-blocked">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 20">
+        <g id="icon-blocked">
+          <g id="blocked" />
+          <path d={svgPaths.p13555100} fill="var(--fill-0, #F48D21)" id="Union" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function SpacerTestio25() {
+  return <div className="shrink-0 size-[10px]" data-name="spacer-testio" />;
+}
+
+function Item11() {
+  return (
+    <div className="content-stretch flex items-center opacity-0 relative shrink-0" data-name="Item">
+      <IconBlocked3 />
+      <SpacerTestio25 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-white w-[15px] whitespace-pre-wrap">1</p>
+    </div>
+  );
+}
+
+function SpacerTestio26() {
+  return (
+    <div className="h-[20px] relative shrink-0 w-[30px]" data-name="spacer-testio">
+      <div className="absolute bottom-1/2 left-0 right-[66.67%] top-0" data-name="spacer" />
+    </div>
+  );
+}
+
+function Counter3() {
+  return (
+    <div className="content-stretch flex items-center relative shrink-0" data-name="COUNTER">
+      <Item9 />
+      <SpacerTestio22 />
+      <Item10 />
+      <SpacerTestio24 />
+      <Item11 />
+      <SpacerTestio26 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-right text-white w-[87px] whitespace-pre-wrap">2 checks total</p>
+    </div>
+  );
+}
+
+function Header3() {
+  return (
+    <div className="bg-[#262626] min-h-[40px] relative rounded-[5px] shrink-0 w-full" data-name="HEADER">
+      <div aria-hidden="true" className="absolute border border-[#262626] border-solid inset-0 pointer-events-none rounded-[5px]" />
+      <div className="content-stretch flex gap-[10px] items-start min-h-[inherit] px-[20px] py-[10px] relative w-full">
+        <TitelWrapper3 />
+        <Counter3 />
+      </div>
+    </div>
+  );
+}
+
+function GridListItem3() {
+  return (
+    <div className="content-stretch flex flex-col h-[40px] items-start relative rounded-[5px] shrink-0 w-full" data-name="Grid List item">
+      <Header3 />
+    </div>
+  );
+}
+
+function SpacerTailWind27() {
+  return (
+    <div className="h-[10px] relative shrink-0 w-full" data-name="Spacer TailWind">
+      <div className="absolute bg-[rgba(217,217,217,0)] inset-0" data-name="Spacer" />
+    </div>
+  );
+}
+
+function TitelWrapper4() {
+  return (
+    <div className="content-stretch flex flex-[1_0_0] items-center min-h-px min-w-px pt-[2px] relative" data-name="Titel wrapper">
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-white">Test session title</p>
+    </div>
+  );
+}
+
+function IconCheckCircleFilled4() {
+  return (
+    <div className="relative shrink-0 size-[20px]" data-name="icon-check-circle-filled">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 20">
+        <g id="icon-check-circle-filled">
+          <path d={svgPaths.p30b87920} fill="var(--fill-0, #33BA9E)" id="Union" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function SpacerTestio27() {
+  return <div className="shrink-0 size-[10px]" data-name="spacer-testio" />;
+}
+
+function Item12() {
+  return (
+    <div className="content-stretch flex items-center relative shrink-0" data-name="Item">
+      <IconCheckCircleFilled4 />
+      <SpacerTestio27 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-white w-[15px] whitespace-pre-wrap">99</p>
+    </div>
+  );
+}
+
+function SpacerTestio28() {
+  return <div className="shrink-0 size-[20px]" data-name="spacer-testio" />;
+}
+
+function IconCrossCircleFilled4() {
+  return (
+    <div className="relative shrink-0 size-[20px]" data-name="icon-cross-circle-filled">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 20">
+        <g id="icon-cross-circle-filled">
+          <path d={svgPaths.p30bab400} fill="var(--fill-0, #FF3131)" id="Union" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function SpacerTestio29() {
+  return <div className="shrink-0 size-[10px]" data-name="spacer-testio" />;
+}
+
+function Item13() {
+  return (
+    <div className="content-stretch flex items-center opacity-0 relative shrink-0" data-name="Item">
+      <IconCrossCircleFilled4 />
+      <SpacerTestio29 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-white w-[15px] whitespace-pre-wrap">1</p>
+    </div>
+  );
+}
+
+function SpacerTestio30() {
+  return <div className="shrink-0 size-[20px]" data-name="spacer-testio" />;
+}
+
+function IconBlocked4() {
+  return (
+    <div className="relative shrink-0 size-[20px]" data-name="icon-blocked">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 20">
+        <g id="icon-blocked">
+          <g id="blocked" />
+          <path d={svgPaths.p13555100} fill="var(--fill-0, #F48D21)" id="Union" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function SpacerTestio31() {
+  return <div className="shrink-0 size-[10px]" data-name="spacer-testio" />;
+}
+
+function Item14() {
+  return (
+    <div className="content-stretch flex items-center opacity-0 relative shrink-0" data-name="Item">
+      <IconBlocked4 />
+      <SpacerTestio31 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-white w-[15px] whitespace-pre-wrap">1</p>
+    </div>
+  );
+}
+
+function SpacerTestio32() {
+  return (
+    <div className="h-[20px] relative shrink-0 w-[30px]" data-name="spacer-testio">
+      <div className="absolute bottom-1/2 left-0 right-[66.67%] top-0" data-name="spacer" />
+    </div>
+  );
+}
+
+function Counter4() {
+  return (
+    <div className="content-stretch flex items-center relative shrink-0" data-name="COUNTER">
+      <Item12 />
+      <SpacerTestio28 />
+      <Item13 />
+      <SpacerTestio30 />
+      <Item14 />
+      <SpacerTestio32 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-right text-white w-[87px] whitespace-pre-wrap">99 checks total</p>
+    </div>
+  );
+}
+
+function Header4() {
+  return (
+    <div className="bg-[#262626] min-h-[40px] relative rounded-[5px] shrink-0 w-full" data-name="HEADER">
+      <div aria-hidden="true" className="absolute border border-[#262626] border-solid inset-0 pointer-events-none rounded-[5px]" />
+      <div className="content-stretch flex gap-[10px] items-start min-h-[inherit] px-[20px] py-[10px] relative w-full">
+        <TitelWrapper4 />
+        <Counter4 />
+      </div>
+    </div>
+  );
+}
+
+function GridListItem4() {
+  return (
+    <div className="content-stretch flex flex-col h-[40px] items-start relative rounded-[5px] shrink-0 w-full" data-name="Grid List item">
+      <Header4 />
+    </div>
+  );
+}
+
+function SpacerTailWind28() {
+  return (
+    <div className="h-[10px] relative shrink-0 w-full" data-name="Spacer TailWind">
+      <div className="absolute bg-[rgba(217,217,217,0)] inset-0" data-name="Spacer" />
+    </div>
+  );
+}
+
+function TitelWrapper5() {
+  return (
+    <div className="content-stretch flex flex-[1_0_0] items-center min-h-px min-w-px pt-[2px] relative" data-name="Titel wrapper">
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-white">Test session title</p>
+    </div>
+  );
+}
+
+function IconCheckCircleFilled5() {
+  return (
+    <div className="relative shrink-0 size-[20px]" data-name="icon-check-circle-filled">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 20">
+        <g id="icon-check-circle-filled">
+          <path d={svgPaths.p30b87920} fill="var(--fill-0, #33BA9E)" id="Union" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function SpacerTestio33() {
+  return <div className="shrink-0 size-[10px]" data-name="spacer-testio" />;
+}
+
+function Item15() {
+  return (
+    <div className="content-stretch flex items-center opacity-0 relative shrink-0" data-name="Item">
+      <IconCheckCircleFilled5 />
+      <SpacerTestio33 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-white w-[15px] whitespace-pre-wrap">99</p>
+    </div>
+  );
+}
+
+function SpacerTestio34() {
+  return <div className="shrink-0 size-[20px]" data-name="spacer-testio" />;
+}
+
+function IconCrossCircleFilled5() {
+  return (
+    <div className="relative shrink-0 size-[20px]" data-name="icon-cross-circle-filled">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 20">
+        <g id="icon-cross-circle-filled">
+          <path d={svgPaths.p30bab400} fill="var(--fill-0, #FF3131)" id="Union" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function SpacerTestio35() {
+  return <div className="shrink-0 size-[10px]" data-name="spacer-testio" />;
+}
+
+function Item16() {
+  return (
+    <div className="content-stretch flex items-center relative shrink-0" data-name="Item">
+      <IconCrossCircleFilled5 />
+      <SpacerTestio35 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-white w-[15px] whitespace-pre-wrap">3</p>
+    </div>
+  );
+}
+
+function SpacerTestio36() {
+  return <div className="shrink-0 size-[20px]" data-name="spacer-testio" />;
+}
+
+function IconBlocked5() {
+  return (
+    <div className="relative shrink-0 size-[20px]" data-name="icon-blocked">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 20">
+        <g id="icon-blocked">
+          <g id="blocked" />
+          <path d={svgPaths.p13555100} fill="var(--fill-0, #F48D21)" id="Union" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function SpacerTestio37() {
+  return <div className="shrink-0 size-[10px]" data-name="spacer-testio" />;
+}
+
+function Item17() {
+  return (
+    <div className="content-stretch flex items-center opacity-0 relative shrink-0" data-name="Item">
+      <IconBlocked5 />
+      <SpacerTestio37 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-white w-[15px] whitespace-pre-wrap">1</p>
+    </div>
+  );
+}
+
+function SpacerTestio38() {
+  return (
+    <div className="h-[20px] relative shrink-0 w-[30px]" data-name="spacer-testio">
+      <div className="absolute bottom-1/2 left-0 right-[66.67%] top-0" data-name="spacer" />
+    </div>
+  );
+}
+
+function Counter5() {
+  return (
+    <div className="content-stretch flex items-center relative shrink-0" data-name="COUNTER">
+      <Item15 />
+      <SpacerTestio34 />
+      <Item16 />
+      <SpacerTestio36 />
+      <Item17 />
+      <SpacerTestio38 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-right text-white w-[87px] whitespace-pre-wrap">3 checks total</p>
+    </div>
+  );
+}
+
+function Header5() {
+  return (
+    <div className="bg-[#262626] min-h-[40px] relative rounded-[5px] shrink-0 w-full" data-name="HEADER">
+      <div aria-hidden="true" className="absolute border border-[#262626] border-solid inset-0 pointer-events-none rounded-[5px]" />
+      <div className="content-stretch flex gap-[10px] items-start min-h-[inherit] px-[20px] py-[10px] relative w-full">
+        <TitelWrapper5 />
+        <Counter5 />
+      </div>
+    </div>
+  );
+}
+
+function GridListItem5() {
+  return (
+    <div className="content-stretch flex flex-col h-[40px] items-start relative rounded-[5px] shrink-0 w-full" data-name="Grid List item">
+      <Header5 />
+    </div>
+  );
+}
+
+function SpacerTailWind29() {
+  return (
+    <div className="h-[28px] relative shrink-0 w-full" data-name="Spacer TailWind">
+      <div className="absolute bg-[rgba(217,217,217,0)] inset-0" data-name="Spacer" />
+    </div>
+  );
+}
+
+function IconCheckCircleFilled6() {
+  return (
+    <div className="relative shrink-0 size-[16px]" data-name="icon-check-circle-filled">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 16.0002 16.0002">
+        <g id="icon-check-circle-filled">
+          <path d={svgPaths.p1c7818a0} fill="var(--fill-0, #33BA9E)" id="Union" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function SpacerTestio39() {
+  return <div className="shrink-0 size-[10px]" data-name="spacer-testio" />;
+}
+
+function Item18() {
+  return (
+    <div className="content-stretch flex items-center relative shrink-0" data-name="Item">
+      <IconCheckCircleFilled6 />
+      <SpacerTestio39 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[14px] not-italic relative shrink-0 text-[#888] text-[13px]">passed</p>
+    </div>
+  );
+}
+
+function SpacerTestio40() {
+  return (
+    <div className="relative shrink-0 size-[15px]" data-name="spacer-testio">
+      <div className="absolute inset-[0_33.33%_33.33%_0]" data-name="spacer" />
+    </div>
+  );
+}
+
+function IconCrossCircleFilled6() {
+  return (
+    <div className="relative shrink-0 size-[16px]" data-name="icon-cross-circle-filled">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 16.0002 16.0002">
+        <g id="icon-cross-circle-filled">
+          <path d={svgPaths.p35ef7800} fill="var(--fill-0, #FF3131)" id="Union" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function SpacerTestio41() {
+  return <div className="shrink-0 size-[10px]" data-name="spacer-testio" />;
+}
+
+function Item19() {
+  return (
+    <div className="content-stretch flex items-center relative shrink-0" data-name="Item">
+      <IconCrossCircleFilled6 />
+      <SpacerTestio41 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[14px] not-italic relative shrink-0 text-[#888] text-[13px]">failed</p>
+    </div>
+  );
+}
+
+function SpacerTestio42() {
+  return (
+    <div className="relative shrink-0 size-[15px]" data-name="spacer-testio">
+      <div className="absolute inset-[0_33.33%_33.33%_0]" data-name="spacer" />
+    </div>
+  );
+}
+
+function IconBlocked6() {
+  return (
+    <div className="relative shrink-0 size-[16px]" data-name="icon-blocked">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 16 16">
+        <g id="icon-blocked">
+          <g id="blocked" />
+          <path d={svgPaths.p3e1c0930} fill="var(--fill-0, #F48D21)" id="Union" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function SpacerTestio43() {
+  return <div className="shrink-0 size-[10px]" data-name="spacer-testio" />;
+}
+
+function Item20() {
+  return (
+    <div className="content-stretch flex items-center relative shrink-0" data-name="Item">
+      <IconBlocked6 />
+      <SpacerTestio43 />
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[14px] not-italic relative shrink-0 text-[#888] text-[13px]">blocked</p>
+    </div>
+  );
+}
+
+function Legend2() {
+  return (
+    <div className="content-stretch flex items-center justify-end relative shrink-0 w-full" data-name="Legend">
+      <Item18 />
+      <SpacerTestio40 />
+      <Item19 />
+      <SpacerTestio42 />
+      <Item20 />
+    </div>
+  );
+}
+
+function Card() {
+  return (
+    <div className="bg-[#1d1d1d] relative rounded-[15px] shrink-0 w-full" data-name="CARD">
+      <div className="content-stretch flex flex-col items-start p-[30px] relative w-full">
+        <p className="font-['Source_Sans_Pro:Light',sans-serif] leading-[22px] not-italic relative shrink-0 text-[18px] text-white uppercase w-full whitespace-pre-wrap">LAST TEST SESSIONS</p>
+        <SpacerTestio2 />
+        <GridListItem />
+        <SpacerTailWind24 />
+        <GridListItem1 />
+        <SpacerTailWind25 />
+        <GridListItem2 />
+        <SpacerTailWind26 />
+        <GridListItem3 />
+        <SpacerTailWind27 />
+        <GridListItem4 />
+        <SpacerTailWind28 />
+        <GridListItem5 />
+        <SpacerTailWind29 />
+        <Legend2 />
+      </div>
+    </div>
+  );
+}
+
+function MainContent() {
+  return (
+    <div className="absolute content-stretch flex flex-col items-start left-[160px] px-[50px] py-[64px] top-[70px] w-[1600px]" data-name="MAIN CONTENT">
+      <p className="font-['Source_Sans_Pro:Light',sans-serif] leading-[28px] not-italic relative shrink-0 text-[25px] text-white w-full whitespace-pre-wrap">DASHBOARD</p>
+      <SpacerTestinator />
+      <Row />
+      <SpacerTailWind23 />
+      <Card />
+    </div>
+  );
+}
+
+function LogoTestinator() {
+  return (
+    <div className="absolute inset-[0_0.44%_0_0] mask-alpha mask-intersect mask-no-clip mask-no-repeat mask-position-[0px_0px] mask-size-[148px_34px]" data-name="Logo-testinator" style={{ maskImage: `url('${imgLogoTestinator}')` }}>
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 147.351 34.0003">
+        <g id="Logo-testinator">
+          <path d={svgPaths.pd3f4900} fill="var(--fill-0, white)" id="Vector" />
+          <path d={svgPaths.p2ef9e700} fill="var(--fill-0, white)" id="Vector_2" />
+          <path d={svgPaths.p1507e900} fill="var(--fill-0, white)" id="Vector_3" />
+          <path d={svgPaths.p63b5500} fill="var(--fill-0, white)" id="Vector_4" />
+          <path d={svgPaths.p73e5c00} fill="var(--fill-0, white)" id="Vector_5" />
+          <path d={svgPaths.p269eee80} fill="var(--fill-0, white)" id="Vector_6" />
+          <path d={svgPaths.p32f5f900} fill="var(--fill-0, white)" id="Vector_7" />
+          <path d={svgPaths.p166df900} fill="var(--fill-0, white)" id="Vector_8" />
+          <path d={svgPaths.p3af52100} fill="var(--fill-0, white)" id="Vector_9" />
+          <path d={svgPaths.p224ff200} fill="var(--fill-0, white)" id="Vector_10" />
+          <path d={svgPaths.p29a28100} fill="var(--fill-0, white)" id="Vector_11" />
+          <path d={svgPaths.p38feaa80} fill="var(--fill-0, white)" id="Vector_12" />
+          <path d={svgPaths.p1649b700} fill="var(--fill-0, white)" id="Vector_13" />
+          <path d={svgPaths.p5b04f70} fill="var(--fill-0, white)" id="Vector_14" />
+          <path d={svgPaths.pafbcd00} fill="var(--fill-0, white)" id="Vector_15" />
+          <path d={svgPaths.p94ead80} fill="var(--fill-0, white)" id="Vector_16" />
+          <path d={svgPaths.p3e1a5280} fill="var(--fill-0, white)" id="Vector_17" />
+          <g id="Group">
+            <path d={svgPaths.p288b2800} fill="var(--fill-0, #7954FF)" id="Vector_18" />
+          </g>
+          <path clipRule="evenodd" d={svgPaths.p1f8b5980} fill="var(--fill-0, #78EAC1)" fillRule="evenodd" id="Vector_19" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function Group() {
+  return (
+    <div className="absolute contents inset-[0_0.44%_0_0]" data-name="Group">
+      <LogoTestinator />
+    </div>
+  );
+}
+
+function ClipPathGroup() {
+  return (
+    <div className="absolute contents inset-0" data-name="Clip path group">
+      <Group />
+    </div>
+  );
+}
+
+function Logo() {
+  return (
+    <div className="h-[34px] overflow-clip relative shrink-0 w-[148px]" data-name="Logo">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 32 32">
+        <g id="agenticqa_logo_purpleteal_white" />
+      </svg>
+      <ClipPathGroup />
+    </div>
+  );
+}
+
+function IconPlus() {
+  return (
+    <div className="relative shrink-0 size-[20px]" data-name="icon-plus">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 20">
+        <g id="icon-plus">
+          <g id="Rectangle 10" />
+          <path d={svgPaths.p185c8f80} fill="var(--fill-0, white)" id="Union" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function IconWrapper1() {
+  return (
+    <div className="content-stretch flex h-[20px] items-center pr-[8px] relative shrink-0" data-name="Icon wrapper">
+      <IconPlus />
+    </div>
+  );
+}
+
+function NavlinkHeader() {
+  return (
+    <div className="content-stretch flex h-[34px] items-center px-[15px] relative rounded-[30px] shrink-0" data-name="Navlink header">
+      <IconWrapper1 />
+      <p className="font-['Source_Sans_3:Regular',sans-serif] font-normal leading-[14px] relative shrink-0 text-[16px] text-white uppercase">New Test Session</p>
+    </div>
+  );
+}
+
+function NavlinkHeader1() {
+  return (
+    <div className="content-stretch flex h-[34px] items-center px-[15px] relative rounded-[30px] shrink-0" data-name="Navlink header">
+      <p className="font-['Source_Sans_3:Regular',sans-serif] font-normal leading-[14px] relative shrink-0 text-[16px] text-white uppercase">Test Sessions</p>
+    </div>
+  );
+}
+
+function NavlinkHeader2() {
+  return (
+    <div className="content-stretch flex h-[34px] items-center px-[15px] relative rounded-[30px] shrink-0" data-name="Navlink header">
+      <p className="font-['Source_Sans_3:Regular',sans-serif] font-normal leading-[14px] relative shrink-0 text-[16px] text-white uppercase">Check Suites</p>
+    </div>
+  );
+}
+
+function Left() {
+  return (
+    <div className="flex-[1_0_0] min-h-px min-w-px relative" data-name="Left">
+      <div className="flex flex-row items-center size-full">
+        <div className="content-stretch flex gap-[5px] items-center pl-[32px] relative w-full">
+          <NavlinkHeader />
+          <NavlinkHeader1 />
+          <NavlinkHeader2 />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ProfileDropdown() {
+  return (
+    <div className="overflow-clip relative rounded-[100px] shrink-0 size-[40px]" data-name="Profile dropdown">
+      <img alt="" className="absolute inset-0 max-w-none object-cover pointer-events-none size-full" src={imgProfileDropdown} />
+    </div>
+  );
+}
+
+function Right() {
+  return (
+    <div className="content-stretch flex items-center relative shrink-0" data-name="Right">
+      <ProfileDropdown />
+    </div>
+  );
+}
+
+function Wrapper() {
+  return (
+    <div className="content-stretch flex items-center justify-between px-[50px] relative shrink-0 w-[1600px]" data-name="WRAPPER">
+      <Logo />
+      <Left />
+      <Right />
+    </div>
+  );
+}
+
+function HeaderCustomerUi() {
+  return (
+    <div className="absolute bg-[#1d1d1d] content-stretch flex h-[70px] items-center justify-between left-0 py-[11px] top-0 w-[1920px]" data-name="Header - Customer UI">
+      <div aria-hidden="true" className="absolute border-[#262626] border-b border-solid inset-0 pointer-events-none shadow-[0px_4px_8px_0px_rgba(0,0,0,0.1)]" />
+      <Wrapper />
+    </div>
+  );
+}
+
+export default function Dashboard() {
+  return (
+    <div className="bg-[#181818] relative size-full" data-name="Dashboard">
+      <MainContent />
+      <HeaderCustomerUi />
+    </div>
+  );
+}