SUM-257 | rework arc banner (#65)

* SUM-257 | rework arc banner * breakout media query * fixup linter * adjust positioning * SUM-261 | resolve carousel arc lines
SU-SWS · Sep 13, 2024 · e9d82a1 · e9d82a1
1 parent 095ecaa
commit e9d82a1
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 25 deletions.
diff --git a/src/components/patterns/arc-banner.tsx b/src/components/patterns/arc-banner.tsx
@@ -29,9 +29,9 @@ const ArcBanner = ({imageUrl, imageAlt, isSection, isBorder, children, ...props}
   return (
     <BannerWrapper
       {...props}
-      className={twMerge("relative z-0 h-full max-h-fit overflow-hidden @container md:min-h-[400px]", props.className)}
+      className={twMerge("relative h-full max-h-fit overflow-hidden @container md:min-h-[400px]", props.className)}
     >
-      <div className="@6xl:aspect-auto absolute z-10 aspect-[16/9] w-full bg-white @6xl:absolute @6xl:h-full">
+      <div className="4xl:aspect-auto absolute -z-50 aspect-[16/9] w-full bg-white 4xl:h-full">
         {imageUrl && (
           <Image
             className="ed11y-ignore object-cover"
@@ -42,33 +42,18 @@ const ArcBanner = ({imageUrl, imageAlt, isSection, isBorder, children, ...props}
             sizes="100vw"
           />
         )}
-      </div>
-      <div
-        className={twMerge(
-          "clip-arc absolute z-20 mt-10 hidden h-full w-full border-black bg-white md:mt-28 4xl:block",
-          clsx({
-            "before:clip-arc overflow-hidden bg-black-true before:absolute before:left-[2px] before:top-[2px] before:z-[1] before:h-[calc(100%-2px)] before:w-[calc(100%-4px)] before:bg-white before:content-['']":
-              isBorder,
-          })
-        )}
-      />
-      <div className="block h-1/2 4xl:hidden">
         <div
-          className={clsx(
-            "rs-mt-8 absolute left-[-10%] z-20 box-border aspect-[2/1] h-fit min-h-[400px] w-[120%] rounded-t-full border-t border-archway-light bg-white",
-            {"border-t-2": isBorder}
+          className={twMerge(
+            "clip-arc relative h-full w-full border-black bg-white",
+            clsx({
+              "before:clip-arc overflow-hidden bg-black-true before:absolute before:left-0 before:top-[4px] before:z-[1] before:h-[calc(100%-2px)] before:w-full before:bg-white before:content-[''] 4xl:before:top-[2px]":
+                isBorder,
+            })
           )}
         />
       </div>
       {children && (
-        <div
-          className={clsx("relative z-50 mt-[150px] h-full rounded-t-full md:mt-[250px] xl:mt-[350px] 2xl:mt-[400px]", {
-            "bg-white 2xl:bg-transparent": !isBorder,
-            "bg-transparent": isBorder,
-          })}
-        >
-          {children}
-        </div>
+        <div className="z-30 items-center pt-[150px] md:pt-[250px] xl:pt-[350px] 2xl:pt-[400px]">{children}</div>
       )}
     </BannerWrapper>
   )

diff --git a/src/styles/index.css b/src/styles/index.css
@@ -17,7 +17,13 @@
 
 @layer utilities {
   .clip-arc {
-    clip-path: ellipse(51% 90% at 50% 100%);
+    clip-path: circle(55vw at 50% 113%);
+  }
+
+  @media (min-width: 2000px) {
+    .clip-arc {
+      clip-path: ellipse(51% 90% at 50% 110%);
+    }
   }
 }