Initial commit

2025-12-24 12:35:22 +02:00
commit fbbe077dc9
307 changed files with 62605 additions and 0 deletions
--- a/src/components/sections/about/InlineImageSplitTextAbout.tsx
+++ b/src/components/sections/about/InlineImageSplitTextAbout.tsx
@@ -0,0 +1,130 @@
+"use client";
+
+import React, { memo } from "react";
+import Image from "next/image";
+import Button from "@/components/button/Button";
+import { cls } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { ButtonConfig } from "@/types/button";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type HeadingSegment =
+  | { type: "text"; content: string }
+  | { type: "image"; src: string; alt?: string };
+
+interface InlineImageSplitTextAboutProps {
+  heading: HeadingSegment[];
+  buttons?: ButtonConfig[];
+  useInvertedBackground: InvertedBackground;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  headingClassName?: string;
+  imageWrapperClassName?: string;
+  imageClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+}
+
+const InlineImageSplitTextAbout = ({
+  heading,
+  buttons,
+  useInvertedBackground,
+  ariaLabel = "About section",
+  className = "",
+  containerClassName = "",
+  headingClassName = "",
+  imageWrapperClassName = "",
+  imageClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+}: InlineImageSplitTextAboutProps) => {
+  const theme = useTheme();
+
+  return (
+    <section
+      aria-label={ariaLabel}
+      className={cls(
+        "relative py-20",
+        useInvertedBackground === "invertCard"
+          ? "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground"
+          : "w-full",
+        useInvertedBackground === "invertDefault" && "bg-foreground",
+        className
+      )}
+    >
+      <div
+        className={cls(
+          "w-content-width mx-auto flex flex-col gap-6 items-center",
+          containerClassName
+        )}
+      >
+        <h2
+          className={cls(
+            "text-4xl md:text-5xl font-medium text-center leading-[1.15] text-balance",
+            (useInvertedBackground === "invertDefault" ||
+              useInvertedBackground === "invertCard") &&
+            "text-background",
+            headingClassName
+          )}
+        >
+          {heading.map((segment, index) => {
+            const imageIndex = heading
+              .slice(0, index + 1)
+              .filter(s => s.type === "image").length - 1;
+
+            const element = segment.type === "text" ? (
+              <span key={index}>{segment.content}</span>
+            ) : (
+              <span
+                key={index}
+                className={cls(
+                  "inline-block relative primary-button -mt-[0.2em] h-[1.1em] w-auto aspect-square align-middle mx-1 p-0.5 rounded-theme",
+                  imageIndex % 2 === 0 ? "-rotate-12" : "rotate-12",
+                  imageWrapperClassName
+                )}
+              >
+                <div className="relative w-full h-full">
+                  <Image
+                    src={segment.src}
+                    alt={segment.alt || ""}
+                    width={24}
+                    height={24}
+                    className={cls(
+                      "absolute inset-0 m-auto h-full w-full rounded-theme",
+                      imageClassName
+                    )}
+                    unoptimized={segment.src.startsWith("http") || segment.src.startsWith("//")}
+                    aria-hidden={!segment.alt || segment.alt === ""}
+                  />
+                </div>
+              </span>
+            );
+
+            return (
+              <React.Fragment key={index}>
+                {index > 0 && " "}
+                {element}
+              </React.Fragment>
+            );
+          })}
+        </h2>
+
+        {buttons && buttons.length > 0 && (
+          <div className={cls("flex gap-4", buttonContainerClassName)}>
+            {buttons.slice(0, 2).map((button, index) => (
+              <Button key={index} {...getButtonProps(button, index, theme.defaultButtonVariant, cls("px-8", buttonClassName), cls("text-base", buttonTextClassName))} />
+            ))}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+InlineImageSplitTextAbout.displayName = "InlineImageSplitTextAbout";
+
+export default memo(InlineImageSplitTextAbout);