New ecosystem illustration (#7301)

Author: hasparus

.github/workflows/tests-e2e.yaml

@@ -48,7 +48,7 @@ jobs:
             up -d --wait
 
       - name: cypress
-        timeout-minutes: 8
+        timeout-minutes: 12
         uses: cypress-io/github-action@v6
         env:
           CI: true

packages/web/docs/src/app/feed.xml/route.ts

@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 import RSS from 'rss';
 import { getChangelogs } from '../../components/product-updates';
 

packages/web/docs/src/app/page.tsx

@@ -92,7 +92,7 @@ export default function IndexPage(): ReactElement {
       </Hero>
       <LandingPageFeatureTabs className="relative mt-6 sm:mt-[-72px]" />
       <TrustedBySection className="mx-auto my-8 md:my-16 lg:my-24" />
-      <EcosystemManagementSection className="mx-4 md:mx-6" />
+      <EcosystemManagementSection className="max-sm:rounded-none sm:mx-4 md:mx-6" />
       <StatsList className="mt-6 md:mt-0">
         <StatsItem label="GitHub commits" value={7} suffix="K" decimal />
         <StatsItem label="Active developers" value={9.6} suffix="K" decimal />

packages/web/docs/src/components/ecosystem-management/dashed-line.tsx

@@ -0,0 +1,49 @@
+import { cn } from '../../lib/utils';
+import css from './ecosystem-management.module.css';
+
+export interface DashedLineProps extends React.SVGProps<SVGSVGElement> {
+  short?: boolean;
+}
+
+export function DashedLine(props: DashedLineProps) {
+  const commonProps: React.SVGProps<SVGSVGElement> = {
+    preserveAspectRatio: 'none',
+    stroke: 'currentColor',
+    fill: 'none',
+    vectorEffect: 'non-scaling-stroke',
+    ...props,
+  };
+
+  if (props.short) {
+    return (
+      <svg
+        {...commonProps}
+        width="111"
+        viewBox="0 0 111 114"
+        className={cn('h-full overflow-visible', css['animate-dash-reverse'], props.className)}
+      >
+        <path
+          d="M0 112.5H31.3352C44.59 112.5 55.3351 101.755 55.3352 88.5001L55.3355 25.4999C55.3356 12.2451 66.0807 1.50001 79.3355 1.5L111 1.5"
+          strokeWidth="3"
+          strokeDasharray="3 6"
+        />
+      </svg>
+    );
+  }
+
+  return (
+    <svg
+      {...commonProps}
+      width="107"
+      viewBox="0 0 107 326"
+      className={cn('h-full overflow-visible', css['animate-dash'], props.className)}
+    >
+      <path
+        d="M 150 0 H 77.659 c -13.255 0 -24 10.745 -24 24 V 303.5 c 0 13.255 -10.746 24 -24 24 H 0"
+        strokeWidth={3}
+        strokeDasharray="3 6"
+        vectorEffect="non-scaling-stroke"
+      />
+    </svg>
+  );
+}