tio-design-make-experiments 0.0.1

package/src/imports/Navigation-17-3259.tsx

@@ -0,0 +1,564 @@
+import svgPaths from "./svg-vbi95q76mb";
+import imgProfileDropdown from "figma:asset/6276cd19433d265f363bddc7f52f4937da9b1dd4.png";
+import { imgLogoTestinator } from "./svg-vxjpl";
+
+function SpacerTestio() {
+  return <div className="shrink-0 size-[10px]" data-name="spacer-testio" />;
+}
+
+function SpacerTestio1() {
+  return (
+    <div className="h-[20px] relative shrink-0 w-full" data-name="spacer-testio">
+      <div className="absolute bottom-1/2 left-0 right-0 top-0" data-name="spacer" />
+    </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 IconWrapper() {
+  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">
+      <IconWrapper />
+      <p className="font-['Source_Sans_3:Regular',sans-serif] leading-[14px] not-italic 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] leading-[14px] not-italic 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] leading-[14px] not-italic 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="bg-[#1d1d1d] content-stretch flex h-[70px] items-center justify-between py-[11px] relative shrink-0 w-full" 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>
+  );
+}
+
+function SpacerTestio2() {
+  return (
+    <div className="relative shrink-0 size-[30px]" data-name="spacer-testio">
+      <div className="absolute inset-[0_66.67%_66.67%_0]" data-name="spacer" />
+    </div>
+  );
+}
+
+function SpacerTestio3() {
+  return (
+    <div className="h-[20px] relative shrink-0 w-full" data-name="spacer-testio">
+      <div className="absolute bottom-1/2 left-0 right-0 top-0" data-name="spacer" />
+    </div>
+  );
+}
+
+function LogoTestinator1() {
+  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 Group1() {
+  return (
+    <div className="absolute contents inset-[0_0.44%_0_0]" data-name="Group">
+      <LogoTestinator1 />
+    </div>
+  );
+}
+
+function ClipPathGroup1() {
+  return (
+    <div className="absolute contents inset-0" data-name="Clip path group">
+      <Group1 />
+    </div>
+  );
+}
+
+function Logo1() {
+  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>
+      <ClipPathGroup1 />
+    </div>
+  );
+}
+
+function Left1() {
+  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] w-full" />
+      </div>
+    </div>
+  );
+}
+
+function NavlinkHeader3() {
+  return (
+    <div className="bg-[#78eac1] 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] leading-[14px] not-italic relative shrink-0 text-[#1d1d1d] text-[16px] uppercase">Sign in</p>
+    </div>
+  );
+}
+
+function Right1() {
+  return (
+    <div className="content-stretch flex items-center relative shrink-0" data-name="Right">
+      <NavlinkHeader3 />
+    </div>
+  );
+}
+
+function Wrapper1() {
+  return (
+    <div className="content-stretch flex items-center justify-between px-[50px] relative shrink-0 w-[1600px]" data-name="WRAPPER">
+      <Logo1 />
+      <Left1 />
+      <Right1 />
+    </div>
+  );
+}
+
+function HeaderCustomerUi1() {
+  return (
+    <div className="bg-[#1d1d1d] content-stretch flex h-[70px] items-center justify-between py-[11px] relative shrink-0 w-full" 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)]" />
+      <Wrapper1 />
+    </div>
+  );
+}
+
+function SpacerTestio4() {
+  return (
+    <div className="relative shrink-0 size-[50px]" data-name="spacer-testio">
+      <div className="absolute inset-[0_80%_80%_0]" data-name="spacer" />
+    </div>
+  );
+}
+
+function SpacerTestio5() {
+  return <div className="shrink-0 size-[10px]" data-name="spacer-testio" />;
+}
+
+function SpacerTestio6() {
+  return (
+    <div className="h-[20px] relative shrink-0 w-full" data-name="spacer-testio">
+      <div className="absolute bottom-1/2 left-0 right-0 top-0" data-name="spacer" />
+    </div>
+  );
+}
+
+function NavlinkHeader4() {
+  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] leading-[14px] not-italic relative shrink-0 text-[16px] text-white uppercase">Nav link</p>
+    </div>
+  );
+}
+
+function NavlinkHeader5() {
+  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] leading-[14px] not-italic relative shrink-0 text-[16px] text-white uppercase">Active</p>
+      <div className="absolute bg-[#7954ff] bottom-0 h-[2px] left-[15px] right-[15px]" data-name="Marker" />
+    </div>
+  );
+}
+
+function NavlinkHeader6() {
+  return (
+    <div className="bg-[#7954ff] 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] leading-[14px] not-italic relative shrink-0 text-[16px] text-white uppercase">Hover</p>
+    </div>
+  );
+}
+
+function NavlinkHeader7() {
+  return (
+    <div className="bg-[#7954ff] 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] leading-[14px] not-italic relative shrink-0 text-[16px] text-white uppercase">Active Hover</p>
+      <div className="absolute bg-[#7954ff] bottom-0 h-[2px] left-[15px] right-[15px]" data-name="Marker" />
+    </div>
+  );
+}
+
+function NavlinkHeader8() {
+  return (
+    <div className="bg-[#78eac1] 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] leading-[14px] not-italic relative shrink-0 text-[#1d1d1d] text-[16px] uppercase">Highlight</p>
+    </div>
+  );
+}
+
+function Row() {
+  return (
+    <div className="content-stretch flex gap-[10px] items-start relative shrink-0" data-name="ROW">
+      <NavlinkHeader4 />
+      <NavlinkHeader5 />
+      <NavlinkHeader6 />
+      <NavlinkHeader7 />
+      <NavlinkHeader8 />
+    </div>
+  );
+}
+
+function SpacerTestio7() {
+  return (
+    <div className="relative shrink-0 size-[30px]" data-name="spacer-testio">
+      <div className="absolute inset-[0_66.67%_66.67%_0]" data-name="spacer" />
+    </div>
+  );
+}
+
+function SpacerTestio8() {
+  return (
+    <div className="h-[20px] relative shrink-0 w-full" data-name="spacer-testio">
+      <div className="absolute bottom-1/2 left-0 right-0 top-0" data-name="spacer" />
+    </div>
+  );
+}
+
+function IconTest() {
+  return (
+    <div className="relative shrink-0 size-[20px]" data-name="icon-test">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 20">
+        <g id="icon-test">
+          <path clipRule="evenodd" d={svgPaths.p390b0800} fill="var(--fill-0, white)" fillRule="evenodd" 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">
+      <IconTest />
+    </div>
+  );
+}
+
+function NavlinkHeader9() {
+  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] leading-[14px] not-italic relative shrink-0 text-[16px] text-white uppercase">Nav link</p>
+    </div>
+  );
+}
+
+function IconTest1() {
+  return (
+    <div className="relative shrink-0 size-[20px]" data-name="icon-test">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 20">
+        <g id="icon-test">
+          <path clipRule="evenodd" d={svgPaths.p390b0800} fill="var(--fill-0, white)" fillRule="evenodd" id="Union" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function IconWrapper2() {
+  return (
+    <div className="content-stretch flex h-[20px] items-center pr-[8px] relative shrink-0" data-name="Icon wrapper">
+      <IconTest1 />
+    </div>
+  );
+}
+
+function NavlinkHeader10() {
+  return (
+    <div className="content-stretch flex h-[34px] items-center px-[15px] relative rounded-[30px] shrink-0" data-name="Navlink header">
+      <IconWrapper2 />
+      <p className="font-['Source_Sans_3:Regular',sans-serif] leading-[14px] not-italic relative shrink-0 text-[16px] text-white uppercase">Active</p>
+      <div className="absolute bg-[#7954ff] bottom-0 h-[2px] left-[15px] right-[15px]" data-name="Marker" />
+    </div>
+  );
+}
+
+function IconTest2() {
+  return (
+    <div className="relative shrink-0 size-[20px]" data-name="icon-test">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 20">
+        <g id="icon-test">
+          <path clipRule="evenodd" d={svgPaths.p390b0800} fill="var(--fill-0, white)" fillRule="evenodd" id="Union" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function IconWrapper3() {
+  return (
+    <div className="content-stretch flex h-[20px] items-center pr-[8px] relative shrink-0" data-name="Icon wrapper">
+      <IconTest2 />
+    </div>
+  );
+}
+
+function NavlinkHeader11() {
+  return (
+    <div className="bg-[#7954ff] content-stretch flex h-[34px] items-center px-[15px] relative rounded-[30px] shrink-0" data-name="Navlink header">
+      <IconWrapper3 />
+      <p className="font-['Source_Sans_3:Regular',sans-serif] leading-[14px] not-italic relative shrink-0 text-[16px] text-white uppercase">Hover</p>
+    </div>
+  );
+}
+
+function IconTest3() {
+  return (
+    <div className="relative shrink-0 size-[20px]" data-name="icon-test">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 20">
+        <g id="icon-test">
+          <path clipRule="evenodd" d={svgPaths.p390b0800} fill="var(--fill-0, white)" fillRule="evenodd" id="Union" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function IconWrapper4() {
+  return (
+    <div className="content-stretch flex h-[20px] items-center pr-[8px] relative shrink-0" data-name="Icon wrapper">
+      <IconTest3 />
+    </div>
+  );
+}
+
+function NavlinkHeader12() {
+  return (
+    <div className="bg-[#7954ff] content-stretch flex h-[34px] items-center px-[15px] relative rounded-[30px] shrink-0" data-name="Navlink header">
+      <IconWrapper4 />
+      <p className="font-['Source_Sans_3:Regular',sans-serif] leading-[14px] not-italic relative shrink-0 text-[16px] text-white uppercase">Active Hover</p>
+      <div className="absolute bg-[#7954ff] bottom-0 h-[2px] left-[15px] right-[15px]" data-name="Marker" />
+    </div>
+  );
+}
+
+function IconTest4() {
+  return (
+    <div className="relative shrink-0 size-[20px]" data-name="icon-test">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 20">
+        <g id="icon-test">
+          <path clipRule="evenodd" d={svgPaths.p390b0800} fill="var(--fill-0, #1D1D1D)" fillRule="evenodd" id="Union" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function IconWrapper5() {
+  return (
+    <div className="content-stretch flex h-[20px] items-center pr-[8px] relative shrink-0" data-name="Icon wrapper">
+      <IconTest4 />
+    </div>
+  );
+}
+
+function NavlinkHeader13() {
+  return (
+    <div className="bg-[#78eac1] content-stretch flex h-[34px] items-center px-[15px] relative rounded-[30px] shrink-0" data-name="Navlink header">
+      <IconWrapper5 />
+      <p className="font-['Source_Sans_3:Regular',sans-serif] leading-[14px] not-italic relative shrink-0 text-[#1d1d1d] text-[16px] uppercase">Highlight</p>
+    </div>
+  );
+}
+
+function Row1() {
+  return (
+    <div className="content-stretch flex gap-[10px] items-start relative shrink-0" data-name="ROW">
+      <NavlinkHeader9 />
+      <NavlinkHeader10 />
+      <NavlinkHeader11 />
+      <NavlinkHeader12 />
+      <NavlinkHeader13 />
+    </div>
+  );
+}
+
+export default function Navigation() {
+  return (
+    <div className="bg-[#181818] content-stretch flex flex-col items-start p-[50px] relative size-full" data-name="Navigation">
+      <p className="font-['Source_Sans_Pro:Light',sans-serif] leading-[28px] min-w-full not-italic relative shrink-0 text-[25px] text-white w-[min-content] whitespace-pre-wrap">Header</p>
+      <SpacerTestio />
+      <p className="font-['Source_Sans_3:Regular',sans-serif] leading-[22px] min-w-full not-italic relative shrink-0 text-[16px] text-white w-[min-content] whitespace-pre-wrap">Header when the user is signed in</p>
+      <SpacerTestio1 />
+      <HeaderCustomerUi />
+      <SpacerTestio2 />
+      <p className="font-['Source_Sans_3:Regular',sans-serif] leading-[22px] min-w-full not-italic relative shrink-0 text-[16px] text-white w-[min-content] whitespace-pre-wrap">Header when the user is not signed in</p>
+      <SpacerTestio3 />
+      <HeaderCustomerUi1 />
+      <SpacerTestio4 />
+      <p className="font-['Source_Sans_Pro:Light',sans-serif] leading-[28px] min-w-full not-italic relative shrink-0 text-[25px] text-white w-[min-content] whitespace-pre-wrap">Navlinks</p>
+      <SpacerTestio5 />
+      <p className="font-['Source_Sans_3:Regular',sans-serif] leading-[22px] not-italic relative shrink-0 text-[16px] text-white">Navlinks used in the header</p>
+      <SpacerTestio6 />
+      <Row />
+      <SpacerTestio7 />
+      <p className="font-['Source_Sans_3:Regular',sans-serif] leading-[22px] not-italic relative shrink-0 text-[16px] text-white">Navlinks with icons</p>
+      <SpacerTestio8 />
+      <Row1 />
+    </div>
+  );
+}