chore: heygermany customer project

apps/website/components/ui/CSSArrowSeparator.tsx

@@ -0,0 +1,66 @@
+import { Box } from '@pikku/mantine/core';
+import React from 'react';
+
+interface CSSArrowSeparatorProps {
+  /**
+   * Color of the arrow (default: dimmed)
+   */
+  color?: string;
+  /**
+   * Size of the arrow in pixels (default: 20)
+   */
+  size?: number;
+  /**
+   * Margin around the component (default: 'lg')
+   */
+  margin?: string | number;
+}
+
+export const CSSArrowSeparator: React.FC<CSSArrowSeparatorProps> = ({
+  color = 'var(--mantine-color-dimmed)',
+  size = 20,
+  margin = 'lg'
+}) => {
+  return (
+    <Box style={{ margin }}>
+      {/* Top horizontal line */}
+      <Box
+        style={{
+          width: '100%',
+          height: '1px',
+          backgroundColor: color,
+          marginBottom: '4px',
+        }}
+      />
+
+      {/* Arrow pointing down */}
+      <Box
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <Box
+          style={{
+            width: 0,
+            height: 0,
+            borderLeft: `${size}px solid transparent`,
+            borderRight: `${size}px solid transparent`,
+            borderTop: `${size}px solid ${color}`,
+          }}
+        />
+      </Box>
+
+      {/* Bottom horizontal line */}
+      <Box
+        style={{
+          width: '100%',
+          height: '1px',
+          backgroundColor: color,
+          marginTop: '4px',
+        }}
+      />
+    </Box>
+  );
+};