Align border with end of stripes

Author: hasparus

src/components/learn-aggregator/learn-hero-stripes.tsx

@@ -0,0 +1,28 @@
+import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
+
+import blurBean from "./learn-blur-bean.webp"
+
+export function LearnHeroStripes() {
+  return (
+    <div
+      role="presentation"
+      // eslint-disable-next-line tailwindcss/no-contradicting-classname
+      className="pointer-events-none absolute inset-0 bg-neu-50 [--end-1:#FFF] [--end-2:rgb(255_204_239/.2)] [--start-1:#FFEAF8] [--start-2:hsl(var(--color-sec-lighter))] dark:[--end-1:hsl(var(--color-neu-0))] dark:[--end-2:hsl(var(--color-pri-base)/.1)] dark:[--start-1:hsl(var(--color-neu-100)/.2)] dark:[--start-2:hsl(var(--color-sec-light)/.1)] sm:h-[360px] lg:h-[calc(100%-163px)]"
+      style={{
+        maskImage: `url(${blurBean.src})`,
+        WebkitMaskImage: `url(${blurBean.src})`,
+        maskSize: "2200px",
+        WebkitMaskSize: "2200px",
+        maskPosition: "50% 60%",
+        WebkitMaskPosition: "50% 60%",
+        maskRepeat: "no-repeat",
+        WebkitMaskRepeat: "no-repeat",
+      }}
+    >
+      <StripesDecoration
+        evenClassName="bg-[linear-gradient(180deg,var(--start-1)_-80%,var(--end-1)_102%)]"
+        oddClassName="bg-[linear-gradient(180deg,var(--start-2)_-80%,var(--end-2)_102%)]"
+      />
+    </div>
+  )
+}

src/components/learn-aggregator/index.tsx …ents/learn-aggregator/teaser-section.tsxsrc/components/learn-aggregator/index.tsx renamed to src/components/learn-aggregator/teaser-section.tsx src/components/learn-aggregator/index.tsx renamed to src/components/learn-aggregator/teaser-section.tsx

@@ -1,12 +1,10 @@
 import { ReactNode, useState } from "react"
 import { clsx } from "clsx"
 
-import { StripesDecoration } from "@/app/conf/_design-system/stripes-decoration"
 import ArrowDownIcon from "@/app/conf/_design-system/pixelarticons/arrow-down.svg?svgr"
 
 import { Eyebrow } from "@/_design-system/eyebrow"
 
-import blurBean from "./learn-blur-bean.webp"
 import { Button } from "@/app/conf/_design-system/button"
 
 export interface TeaserSectionProps
@@ -156,28 +154,3 @@ function TeaserSectionListItem({
     </li>
   )
 }
-
-export function LearnHeroStripes() {
-  return (
-    <div
-      role="presentation"
-      // eslint-disable-next-line tailwindcss/no-contradicting-classname
-      className="pointer-events-none absolute inset-0 h-[300px] bg-neu-50 [--end-1:#FFF] [--end-2:rgb(255_204_239/.2)] [--start-1:#FFEAF8] [--start-2:hsl(var(--color-sec-lighter))] dark:[--end-1:hsl(var(--color-neu-0))] dark:[--end-2:hsl(var(--color-pri-base)/.1)] dark:[--start-1:hsl(var(--color-neu-100)/.2)] dark:[--start-2:hsl(var(--color-sec-light)/.1)] sm:h-[360px] lg:h-[480px]"
-      style={{
-        maskImage: `url(${blurBean.src})`,
-        WebkitMaskImage: `url(${blurBean.src})`,
-        maskSize: "2200px",
-        WebkitMaskSize: "2200px",
-        maskPosition: "50% 60%",
-        WebkitMaskPosition: "50% 60%",
-        maskRepeat: "no-repeat",
-        WebkitMaskRepeat: "no-repeat",
-      }}
-    >
-      <StripesDecoration
-        evenClassName="bg-[linear-gradient(180deg,var(--start-1)_-80%,var(--end-1)_102%)]"
-        oddClassName="bg-[linear-gradient(180deg,var(--start-2)_-80%,var(--end-2)_102%)]"
-      />
-    </div>
-  )
-}

src/components/toc-hero/toc-hero-contents.tsx

@@ -16,7 +16,7 @@ export function TocHeroContents({
     <div
       {...rest}
       className={clsx(
-        "mt-2 w-full border border-neu-300 bg-neu-0 dark:border-neu-100 lg:mt-4",
+        "mt-2 w-full border border-neu-300 bg-neu-0/[.64] backdrop-blur-[6px] dark:border-neu-100 lg:mt-4",
         className,
       )}
     >

src/pages/learn/index.mdx

@@ -5,8 +5,9 @@ title: Learn
 import { Button } from '@/app/conf/_design-system/button';
 
 import { NavbarFixed } from '../../components/navbar/navbar-fixed'
-import { TocHero, TocHeroContents } from '../../components/toc-hero';
-import { TeaserSection, LearnHeroStripes } from '../../components/learn-aggregator'
+import { TocHero, TocHeroContents } from '../../components/toc-hero'
+import { TeaserSection } from '../../components/learn-aggregator/teaser-section'
+import { LearnHeroStripes } from '../../components/learn-aggregator/learn-hero-stripes'
 import { pagesBySection } from '../../components/learn-aggregator/learn-pages'
 import { CommonQuestionsSection } from '../../components/learn-aggregator/common-questions'
 import { TrainingCoursesSection } from '../../components/learn-aggregator/training-courses'