Initial commit

2026-01-13 16:00:20 +02:00
commit 38397c9441
259 changed files with 49878 additions and 0 deletions
--- a/src/components/sections/about/MetricSplitMediaAbout.tsx
+++ b/src/components/sections/about/MetricSplitMediaAbout.tsx
@@ -0,0 +1,158 @@
+"use client";
+
+import { memo } from "react";
+import TextBox from "@/components/Textbox";
+import MediaContent from "@/components/shared/MediaContent";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+interface Metric {
+  value: string;
+  title: string;
+}
+
+interface MetricSplitMediaAboutProps {
+  title: string;
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  metrics: Metric[];
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+  useInvertedBackground: InvertedBackground;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  gridClassName?: string;
+  leftColumnClassName?: string;
+  rightColumnClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  metricsContainerClassName?: string;
+  metricCardClassName?: string;
+  metricValueClassName?: string;
+  metricTitleClassName?: string;
+  mediaWrapperClassName?: string;
+  imageClassName?: string;
+}
+
+const MetricSplitMediaAbout = ({
+  title,
+  description,
+  tag,
+  tagIcon,
+  metrics,
+  imageSrc,
+  videoSrc,
+  imageAlt = "",
+  videoAriaLabel = "About section video",
+  useInvertedBackground,
+  ariaLabel = "About section",
+  className = "",
+  containerClassName = "",
+  gridClassName = "",
+  leftColumnClassName = "",
+  rightColumnClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  metricsContainerClassName = "",
+  metricCardClassName = "",
+  metricValueClassName = "",
+  metricTitleClassName = "",
+  mediaWrapperClassName = "",
+  imageClassName = "",
+}: MetricSplitMediaAboutProps) => {
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls(
+        "relative py-20 w-full",
+        useInvertedBackground === "invertDefault" && "bg-foreground",
+        className
+      )}
+    >
+      <div className={cls("w-content-width mx-auto", containerClassName)}>
+        <div className={cls("grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-10", gridClassName)}>
+          <div className={cls("flex flex-col gap-6 md:gap-10", leftColumnClassName)}>
+            <TextBox
+              title={title}
+              description={description}
+              tag={tag}
+              tagIcon={tagIcon}
+              useInvertedBackground={useInvertedBackground}
+              className={cls("gap-3 md:gap-3", textBoxClassName)}
+              titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
+              descriptionClassName={cls("text-lg leading-tight text-balance", descriptionClassName)}
+              tagClassName={cls("mb-1", tagClassName)}
+            />
+            {metrics && metrics.length > 0 && (
+              <div className={cls(
+                "grid gap-6 md:gap-4",
+                metrics.length === 1 ? "grid-cols-1" : "grid-cols-1 md:grid-cols-2",
+                metricsContainerClassName
+              )}>
+                {metrics.slice(0, 2).map((metric, index) => (
+                  <div
+                    key={index}
+                    className={cls(
+                      "card rounded-theme-capped p-6 flex flex-col gap-8 md:gap-16",
+                      metricCardClassName
+                    )}
+                  >
+                    <span
+                      className={cls(
+                        "text-6xl font-medium truncate",
+                        shouldUseLightText ? "text-background" : "text-foreground",
+                        metricValueClassName
+                      )}
+                    >
+                      {metric.value}
+                    </span>
+                    <h3
+                      className={cls(
+                        "text-lg",
+                        shouldUseLightText ? "text-background" : "text-foreground",
+                        metricTitleClassName
+                      )}
+                    >
+                      {metric.title}
+                    </h3>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+          <div className={cls("", rightColumnClassName)}>
+            <div className={cls(
+              "w-full h-full overflow-hidden rounded-theme-capped",
+              mediaWrapperClassName
+            )}>
+              <MediaContent
+                imageSrc={imageSrc}
+                videoSrc={videoSrc}
+                imageAlt={imageAlt}
+                videoAriaLabel={videoAriaLabel}
+                imageClassName={cls("w-full h-full object-cover", imageClassName)}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+MetricSplitMediaAbout.displayName = "MetricSplitMediaAbout";
+
+export default memo(MetricSplitMediaAbout);