Initial commit

src/components/sections/about/AboutMetric.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import React, { memo } from "react";
+import TextAnimation from "@/components/text/TextAnimation";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+
+interface Metric {
+  icon: LucideIcon;
+  label: string;
+  value: string;
+}
+
+interface AboutMetricProps {
+  title: string;
+  metrics: Metric[];
+  useInvertedBackground: "noInvert" | "invertDefault" | "invertCard";
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  titleClassName?: string;
+  metricsContainerClassName?: string;
+  metricCardClassName?: string;
+  metricIconClassName?: string;
+  metricLabelClassName?: string;
+  metricValueClassName?: string;
+}
+
+const AboutMetric = ({
+  title,
+  metrics,
+  useInvertedBackground,
+  ariaLabel = "About metrics section",
+  className = "",
+  containerClassName = "",
+  titleClassName = "",
+  metricsContainerClassName = "",
+  metricCardClassName = "",
+  metricIconClassName = "",
+  metricLabelClassName = "",
+  metricValueClassName = "",
+}: AboutMetricProps) => {
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+  const gridColsMap = {
+    2: "md:grid-cols-2",
+    3: "md:grid-cols-3",
+    4: "md:grid-cols-4",
+  };
+  const gridCols = gridColsMap[metrics.length as keyof typeof gridColsMap] || "md:grid-cols-4";
+
+  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-8", containerClassName)}>
+        <TextAnimation
+          type={theme.defaultTextAnimation}
+          text={title}
+          variant="words-trigger"
+          className={cls("text-2xl md:text-5xl font-medium leading-[1.175]", (useInvertedBackground === "invertDefault" || useInvertedBackground === "invertCard") && "text-background", titleClassName)}
+        />
+
+        <div className={cls("grid grid-cols-1 gap-6", gridCols, metricsContainerClassName)}>
+          {metrics.map((metric, index) => {
+            const Icon = metric.icon;
+            return (
+              <div
+                key={index}
+                className={cls(
+                  "h-fit card rounded-theme-capped px-6 py-8 md:py-10 flex flex-col items-center justify-center gap-3",
+                  metricCardClassName
+                )}
+              >
+                <div className="relative z-1 w-full flex items-center justify-center gap-2">
+                  <div className={cls("h-8 primary-button aspect-square rounded-theme flex items-center justify-center", metricIconClassName)}>
+                    <Icon className="h-4/10 text-background" strokeWidth={1.5} />
+                  </div>
+                  <h3 className={cls("text-xl truncate", shouldUseLightText && "text-background", metricLabelClassName)}>
+                    {metric.label}
+                  </h3>
+                </div>
+                <div className="relative z-1 w-full flex items-center justify-center">
+                  <h4 className={cls("text-6xl font-medium truncate", shouldUseLightText && "text-background", metricValueClassName)}>
+                    {metric.value}
+                  </h4>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+AboutMetric.displayName = "AboutMetric";
+
+export default memo(AboutMetric);

src/components/sections/about/AboutPhoneTimeline.tsx

@@ -0,0 +1,214 @@
+"use client";
+
+import React, { memo, useMemo } from "react";
+import TimelinePhoneView from "@/components/cardStack/layouts/timelines/TimelinePhoneView";
+import TextAnimation from "@/components/text/TextAnimation";
+import Button from "@/components/button/Button";
+import Tag from "@/components/shared/Tag";
+import { cls } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, TitleSegment } from "@/components/cardStack/types";
+import type { TimelinePhoneViewItem } from "@/components/cardStack/hooks/usePhoneAnimations";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type AboutPhone = {
+    imageAlt?: string;
+    videoAriaLabel?: string;
+} & (
+        | { imageSrc: string; videoSrc?: never }
+        | { videoSrc: string; imageSrc?: never }
+    );
+
+interface AboutPhoneTimelineProps {
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    phoneOne: AboutPhone;
+    phoneTwo: AboutPhone;
+    textboxLayout: TextboxLayout;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    desktopContainerClassName?: string;
+    mobileContainerClassName?: string;
+    desktopContentClassName?: string;
+    desktopWrapperClassName?: string;
+    mobileWrapperClassName?: string;
+    phoneFrameClassName?: string;
+    mobilePhoneFrameClassName?: string;
+    titleImageWrapperClassName?: string;
+    titleImageClassName?: string;
+    contentClassName?: string;
+    tagClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    buttonContainerClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+}
+
+interface AboutContentProps {
+    title: string;
+    description: string;
+    tag: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    useInvertedBackground: "noInvert" | "invertDefault" | "invertCard";
+    contentClassName: string;
+    tagClassName: string;
+    titleClassName: string;
+    descriptionClassName: string;
+    buttonContainerClassName: string;
+    buttonClassName: string;
+    buttonTextClassName: string;
+}
+
+const AboutContent = ({
+    title,
+    description,
+    tag,
+    tagIcon: TagIcon,
+    buttons,
+    useInvertedBackground,
+    contentClassName,
+    tagClassName,
+    titleClassName,
+    descriptionClassName,
+    buttonContainerClassName,
+    buttonClassName,
+    buttonTextClassName,
+}: AboutContentProps) => {
+    const theme = useTheme();
+
+    return (
+        <div className={cls("h-full w-full flex items-center justify-center px-10", contentClassName)}>
+            <div className="flex flex-col gap-3 md:gap-1 items-center mb-0 md:mb-[12.5vh] 2xl:mb-[14vh]">
+                <Tag
+                    text={tag}
+                    icon={TagIcon}
+                    useInvertedBackground={useInvertedBackground}
+                    className={cls("mb-1 md:mb-3", tagClassName)}
+                />
+
+                <TextAnimation
+                    type={theme.defaultTextAnimation}
+                    text={title}
+                    variant="trigger"
+                    as="h2"
+                    className={cls("text-6xl font-medium text-center", (useInvertedBackground === "invertDefault" || useInvertedBackground === "invertCard") && "text-background", titleClassName)}
+                />
+
+                <TextAnimation
+                    type={theme.defaultTextAnimation}
+                    text={description}
+                    variant="trigger"
+                    as="p"
+                    className={cls("text-lg leading-[1.2] text-center", (useInvertedBackground === "invertDefault" || useInvertedBackground === "invertCard") ? "text-background/75" : "text-foreground/75", descriptionClassName)}
+                />
+
+                {buttons && buttons.length > 0 && (
+                    <div className={cls("flex gap-4 mt-1 md:mt-3 justify-center", buttonContainerClassName)}>
+                        {buttons.map((button, index) => (
+                            <Button key={`${button.text}-${index}`} {...getButtonProps(button, index, theme.defaultButtonVariant, buttonClassName, buttonTextClassName)} />
+                        ))}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+const AboutPhoneTimeline = ({
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    phoneOne,
+    phoneTwo,
+    textboxLayout,
+    useInvertedBackground,
+    ariaLabel = "About section",
+    className = "",
+    containerClassName = "",
+    desktopContainerClassName = "",
+    mobileContainerClassName = "",
+    desktopContentClassName = "",
+    desktopWrapperClassName = "",
+    mobileWrapperClassName = "",
+    phoneFrameClassName = "",
+    mobilePhoneFrameClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    contentClassName = "",
+    tagClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+}: AboutPhoneTimelineProps) => {
+    const timelineItems: TimelinePhoneViewItem[] = useMemo(() => [{
+        trigger: 'about-trigger',
+        content: (
+            <AboutContent
+                title={title}
+                description={description}
+                tag={tag}
+                tagIcon={tagIcon}
+                buttons={buttons}
+                useInvertedBackground={useInvertedBackground}
+                contentClassName={contentClassName}
+                tagClassName={tagClassName}
+                titleClassName={titleClassName}
+                descriptionClassName={descriptionClassName}
+                buttonContainerClassName={buttonContainerClassName}
+                buttonClassName={buttonClassName}
+                buttonTextClassName={buttonTextClassName}
+            />
+        ),
+        imageOne: phoneOne.imageSrc,
+        videoOne: phoneOne.videoSrc,
+        imageAltOne: phoneOne.imageAlt || `${title} - Image 1`,
+        videoAriaLabelOne: phoneOne.videoAriaLabel || `${title} - Video 1`,
+        imageTwo: phoneTwo.imageSrc,
+        videoTwo: phoneTwo.videoSrc,
+        imageAltTwo: phoneTwo.imageAlt || `${title} - Image 2`,
+        videoAriaLabelTwo: phoneTwo.videoAriaLabel || `${title} - Video 2`,
+    }], [title, description, tag, tagIcon, buttons, phoneOne, phoneTwo, useInvertedBackground, contentClassName, tagClassName, titleClassName, descriptionClassName, buttonContainerClassName, buttonClassName, buttonTextClassName]);
+
+    return (
+        <TimelinePhoneView
+            items={timelineItems}
+            showTextBox={false}
+            title=""
+            titleSegments={titleSegments}
+            description=""
+            textboxLayout={textboxLayout}
+            useInvertedBackground={useInvertedBackground}
+            className={className}
+            containerClassName={containerClassName}
+            desktopContainerClassName={desktopContainerClassName}
+            mobileContainerClassName={mobileContainerClassName}
+            desktopContentClassName={desktopContentClassName}
+            desktopWrapperClassName={desktopWrapperClassName}
+            mobileWrapperClassName={mobileWrapperClassName}
+            phoneFrameClassName={phoneFrameClassName}
+            mobilePhoneFrameClassName={mobilePhoneFrameClassName}
+            titleImageWrapperClassName={titleImageWrapperClassName}
+            titleImageClassName={titleImageClassName}
+            ariaLabel={ariaLabel}
+        />
+    );
+};
+
+AboutPhoneTimeline.displayName = "AboutPhoneTimeline";
+
+export default memo(AboutPhoneTimeline);

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);

src/components/sections/about/MediaAbout.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { memo } from "react";
+import MediaContent from "@/components/shared/MediaContent";
+import TextBox from "@/components/Textbox";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig } from "@/types/button";
+
+interface MediaAboutProps {
+    title: string;
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+    useInvertedBackground: "noInvert" | "invertDefault" | "invertCard";
+    ariaLabel?: string;
+    className?: string;
+    textBoxClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    tagClassName?: string;
+    buttonContainerClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+    mediaWrapperClassName?: string;
+    mediaClassName?: string;
+}
+
+const MediaAbout = ({
+    title,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    imageSrc,
+    videoSrc,
+    imageAlt,
+    videoAriaLabel,
+    useInvertedBackground,
+    ariaLabel = "About section",
+    className = "",
+    textBoxClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    tagClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+    mediaWrapperClassName = "",
+    mediaClassName = "",
+}: MediaAboutProps) => {
+
+    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("relative w-content-width mx-auto aspect-square md:aspect-video rounded-theme-capped overflow-hidden", mediaWrapperClassName)}>
+                <MediaContent
+                    imageSrc={imageSrc}
+                    videoSrc={videoSrc}
+                    imageAlt={imageAlt}
+                    videoAriaLabel={videoAriaLabel}
+                    imageClassName={cls("w-full h-full object-cover", mediaClassName)}
+                />
+
+                <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+                    <div className="relative z-10 flex items-center justify-center h-full w-content-width md:w-45 mx-auto">
+                        <TextBox
+                            title={title}
+                            description={description}
+                            tag={tag}
+                            tagIcon={tagIcon}
+                            buttons={buttons}
+                            className={cls("flex flex-col gap-3 md:gap-1", textBoxClassName)}
+                            titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
+                            descriptionClassName={cls("text-base md:text-lg leading-[1.2]", descriptionClassName)}
+                            tagClassName={cls("px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-3", tagClassName)}
+                            buttonContainerClassName={cls("flex gap-4 mt-3", buttonContainerClassName)}
+                            buttonClassName={buttonClassName}
+                            buttonTextClassName={buttonTextClassName}
+                            center={true}
+                        />
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+MediaAbout.displayName = "MediaAbout";
+
+export default memo(MediaAbout);

src/components/sections/about/MediaSplitAbout.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import { memo } from "react";
+import MediaContent from "@/components/shared/MediaContent";
+import Button from "@/components/button/Button";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { ButtonConfig } from "@/types/button";
+
+interface MediaSplitAboutProps {
+    title: string;
+    description: string;
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+    buttons?: ButtonConfig[];
+    imagePosition?: "left" | "right";
+    useInvertedBackground: "noInvert" | "invertDefault" | "invertCard";
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    contentCardClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    buttonContainerClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+    mediaCardClassName?: string;
+    mediaClassName?: string;
+}
+
+const MediaSplitAbout = ({
+    title,
+    description,
+    imageSrc,
+    videoSrc,
+    imageAlt,
+    videoAriaLabel,
+    buttons,
+    imagePosition = "right",
+    useInvertedBackground,
+    ariaLabel = "About section",
+    className = "",
+    containerClassName = "",
+    contentCardClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+    mediaCardClassName = "",
+    mediaClassName = "",
+}: MediaSplitAboutProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    const contentCard = (
+        <div className={cls("card rounded-theme-capped p-6 md:p-10 flex flex-col justify-between gap-10", contentCardClassName)}>
+            <div className="relative z-1 flex flex-col gap-4">
+                <h2 className={cls("text-4xl font-medium leading-tight", shouldUseLightText ? "text-background" : "text-foreground", titleClassName)}>
+                    {title}
+                </h2>
+                <p className={cls("text-base md:text-lg leading-tight", shouldUseLightText ? "text-background/75" : "text-foreground/75", descriptionClassName)}>
+                    {description}
+                </p>
+            </div>
+
+            {buttons && buttons.length > 0 && (
+                <div className={cls("relative z-1 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>
+    );
+
+    const mediaCard = (
+        <div className={cls("card md:aspect-square rounded-theme-capped overflow-hidden", mediaCardClassName)}>
+            <MediaContent
+                imageSrc={imageSrc}
+                videoSrc={videoSrc}
+                imageAlt={imageAlt}
+                videoAriaLabel={videoAriaLabel}
+                imageClassName={cls("relative z-1 w-full h-full object-cover", mediaClassName)}
+            />
+        </div>
+    );
+
+    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 grid grid-cols-1 md:grid-cols-2 gap-6", containerClassName)}>
+                {imagePosition === "left" ? (
+                    <>
+                        {mediaCard}
+                        {contentCard}
+                    </>
+                ) : (
+                    <>
+                        {contentCard}
+                        {mediaCard}
+                    </>
+                )}
+            </div>
+        </section>
+    );
+};
+
+MediaSplitAbout.displayName = "MediaSplitAbout";
+
+export default memo(MediaSplitAbout);

src/components/sections/about/MediaSplitTabsAbout.tsx

@@ -0,0 +1,163 @@
+"use client";
+
+import { memo, useState } from "react";
+import MediaContent from "@/components/shared/MediaContent";
+import AnimationContainer from "@/components/sections/AnimationContainer";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+
+interface TabOption {
+    id: string;
+    label: string;
+    description: string;
+}
+
+interface MediaSplitTabsAboutProps {
+    title: string;
+    description?: string;
+    tabs: TabOption[];
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+    imagePosition?: "left" | "right";
+    useInvertedBackground: "noInvert" | "invertDefault" | "invertCard";
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    contentCardClassName?: string;
+    titleClassName?: string;
+    titleDescriptionClassName?: string;
+    tabsContainerClassName?: string;
+    tabClassName?: string;
+    activeTabClassName?: string;
+    tabIndicatorClassName?: string;
+    descriptionClassName?: string;
+    mediaCardClassName?: string;
+    mediaClassName?: string;
+}
+
+const MediaSplitTabsAbout = ({
+    title,
+    description,
+    tabs,
+    imageSrc,
+    videoSrc,
+    imageAlt,
+    videoAriaLabel,
+    imagePosition = "right",
+    useInvertedBackground,
+    ariaLabel = "About section",
+    className = "",
+    containerClassName = "",
+    contentCardClassName = "",
+    titleClassName = "",
+    titleDescriptionClassName = "",
+    tabsContainerClassName = "",
+    tabClassName = "",
+    activeTabClassName = "",
+    tabIndicatorClassName = "",
+    descriptionClassName = "",
+    mediaCardClassName = "",
+    mediaClassName = "",
+}: MediaSplitTabsAboutProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+    const [activeTab, setActiveTab] = useState(tabs[0]?.id || "");
+
+    const activeTabData = tabs.find((tab) => tab.id === activeTab);
+
+    const contentCard = (
+        <div className={cls("card rounded-theme-capped p-6 md:p-10 md:h-160 2xl:h-180 flex flex-col justify-between gap-3 md:gap-6", contentCardClassName)}>
+            <div className="relative z-1 flex flex-col gap-2">
+                <h2 className={cls("text-4xl font-medium leading-tight", shouldUseLightText ? "text-background" : "text-foreground", titleClassName)}>
+                    {title}
+                </h2>
+                {description && (
+                    <p className={cls("text-base md:text-lg leading-tight", shouldUseLightText ? "text-background" : "text-foreground", titleDescriptionClassName)}>
+                        {description}
+                    </p>
+                )}
+            </div>
+
+            <div className="relative z-1 flex flex-col gap-6">
+                <div className={cls("group flex flex-wrap gap-x-6 gap-y-1 md:gap-6", tabsContainerClassName)}>
+                    {tabs.map((tab) => (
+                        <button
+                            key={tab.id}
+                            type="button"
+                            onClick={() => setActiveTab(tab.id)}
+                            className={cls(
+                                "flex items-center gap-2 text-lg md:text-xl transition-colors cursor-pointer",
+                                activeTab === tab.id
+                                    ? (shouldUseLightText ? "text-background" : "text-foreground")
+                                    : (shouldUseLightText ? "text-background/50" : "text-foreground/50"),
+                                activeTab === tab.id && activeTabClassName,
+                                tabClassName
+                            )}
+                            aria-pressed={activeTab === tab.id}
+                        >
+                            <span
+                                className={cls(
+                                    "rounded-theme w-2 h-2 border border-accent group-hover:scale-125 group-hover:bg-accent transition-all duration-300",
+                                    activeTab === tab.id ? "bg-accent" : "bg-transparent",
+                                    tabIndicatorClassName
+                                )}
+                                aria-hidden="true"
+                            />
+                            {tab.label}
+                        </button>
+                    ))}
+                </div>
+
+                <div className="w-full h-px bg-accent" />
+
+                <AnimationContainer
+                    key={activeTab}
+                    className="w-full"
+                >
+                    <p className={cls("text-base md:text-lg leading-tight", shouldUseLightText ? "text-background" : "text-foreground", descriptionClassName)}>
+                        {activeTabData?.description}
+                    </p>
+                </AnimationContainer>
+            </div>
+        </div>
+    );
+
+    const mediaCard = (
+        <div className={cls("card aspect-square md:aspect-auto md:h-160 2xl:h-180 rounded-theme-capped overflow-hidden", mediaCardClassName)}>
+            <MediaContent
+                imageSrc={imageSrc}
+                videoSrc={videoSrc}
+                imageAlt={imageAlt}
+                videoAriaLabel={videoAriaLabel}
+                imageClassName={cls("relative z-1 w-full h-full object-cover", mediaClassName)}
+            />
+        </div>
+    );
+
+    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 grid grid-cols-1 md:grid-cols-10 gap-6", containerClassName)}>
+                {imagePosition === "left" ? (
+                    <>
+                        <div className="md:col-span-4">{mediaCard}</div>
+                        <div className="md:col-span-6">{contentCard}</div>
+                    </>
+                ) : (
+                    <>
+                        <div className="md:col-span-6">{contentCard}</div>
+                        <div className="md:col-span-4">{mediaCard}</div>
+                    </>
+                )}
+            </div>
+        </section>
+    );
+};
+
+MediaSplitTabsAbout.displayName = "MediaSplitTabsAbout";
+
+export default memo(MediaSplitTabsAbout);

src/components/sections/about/ParallaxAbout.tsx

@@ -0,0 +1,95 @@
+"use client";
+
+import { memo } from "react";
+import MediaContent from "@/components/shared/MediaContent";
+import TextBox from "@/components/Textbox";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig } from "@/types/button";
+
+interface ParallaxAboutProps {
+    title: string;
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+    ariaLabel?: string;
+    className?: string;
+    textBoxClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    tagClassName?: string;
+    buttonContainerClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+    mediaClassName?: string;
+}
+
+const ParallaxAbout = ({
+    title,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    imageSrc,
+    videoSrc,
+    imageAlt,
+    videoAriaLabel,
+    ariaLabel = "About section",
+    className = "",
+    textBoxClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    tagClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+    mediaClassName = "",
+}: ParallaxAboutProps) => {
+
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls("relative z-0 w-full h-svh", className)}
+            style={{
+                clipPath: "polygon(0% 0, 100% 0%, 100% 100%, 0 100%)",
+            }}
+        >
+            <div className="fixed inset-0 w-full h-full">
+                <MediaContent
+                    imageSrc={imageSrc}
+                    videoSrc={videoSrc}
+                    imageAlt={imageAlt}
+                    videoAriaLabel={videoAriaLabel}
+                    imageClassName={cls("w-full h-full object-cover rounded-none!", mediaClassName)}
+                />
+            </div>
+
+            <div className="relative z-10 flex items-center justify-center h-full w-content-width md:w-45 mx-auto">
+                <TextBox
+                    title={title}
+                    description={description}
+                    tag={tag}
+                    tagIcon={tagIcon}
+                    buttons={buttons}
+                    className={cls("flex flex-col gap-3 md:gap-1", textBoxClassName)}
+                    titleClassName={cls("text-6xl font-medium text-balance", titleClassName)}
+                    descriptionClassName={cls("text-base md:text-lg leading-[1.2]", descriptionClassName)}
+                    tagClassName={cls("px-3 py-1 text-sm rounded-theme card text-foreground inline-flex items-center gap-2 mb-3", tagClassName)}
+                    buttonContainerClassName={cls("flex gap-4 mt-3", buttonContainerClassName)}
+                    buttonClassName={buttonClassName}
+                    buttonTextClassName={buttonTextClassName}
+                    center={true}
+                />
+            </div>
+        </section>
+    );
+};
+
+ParallaxAbout.displayName = "ParallaxAbout";
+
+export default memo(ParallaxAbout);

src/components/sections/about/SplitAbout.tsx

@@ -0,0 +1,178 @@
+"use client";
+
+import { memo, Fragment } from "react";
+import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
+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 { ButtonConfig } from "@/types/button";
+import type { TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+interface BulletPoint {
+  title: string;
+  description: string;
+  icon?: LucideIcon;
+}
+
+interface SplitAboutProps {
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  bulletPoints: BulletPoint[];
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+  ariaLabel?: string;
+  imagePosition?: "left" | "right";
+  textboxLayout: TextboxLayout;
+  useInvertedBackground: InvertedBackground;
+  className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  titleImageWrapperClassName?: string;
+  titleImageClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  contentClassName?: string;
+  bulletPointClassName?: string;
+  bulletTitleClassName?: string;
+  bulletDescriptionClassName?: string;
+  mediaWrapperClassName?: string;
+  imageClassName?: string;
+}
+
+const SplitAbout = ({
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon,
+  buttons,
+  bulletPoints,
+  imageSrc,
+  videoSrc,
+  imageAlt = "",
+  videoAriaLabel = "About section video",
+  ariaLabel = "About section",
+  imagePosition = "right",
+  textboxLayout,
+  useInvertedBackground,
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  titleImageWrapperClassName = "",
+  titleImageClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  contentClassName = "",
+  bulletPointClassName = "",
+  bulletTitleClassName = "",
+  bulletDescriptionClassName = "",
+  mediaWrapperClassName = "",
+  imageClassName = "",
+}: SplitAboutProps) => {
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+  const mediaContent = (
+    <div className={cls("w-full md:w-6/10 2xl:w-7/10 overflow-hidden rounded-theme-capped card md:relative p-4", mediaWrapperClassName)}>
+      <div className="md:relative w-full md:h-full">
+        <MediaContent
+          imageSrc={imageSrc}
+          videoSrc={videoSrc}
+          imageAlt={imageAlt}
+          videoAriaLabel={videoAriaLabel}
+          imageClassName={cls("z-1 w-full h-auto object-cover rounded-theme-capped md:absolute md:inset-0 md:h-full", imageClassName)}
+        />
+      </div>
+    </div>
+  );
+
+  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-8", containerClassName)}>
+        <CardStackTextBox
+          title={title}
+          titleSegments={titleSegments}
+          description={description}
+          tag={tag}
+          tagIcon={tagIcon}
+          buttons={buttons}
+          textboxLayout={textboxLayout}
+          useInvertedBackground={useInvertedBackground}
+          textBoxClassName={textBoxClassName}
+          titleClassName={titleClassName}
+          titleImageWrapperClassName={titleImageWrapperClassName}
+          titleImageClassName={titleImageClassName}
+          descriptionClassName={descriptionClassName}
+          tagClassName={tagClassName}
+          buttonContainerClassName={buttonContainerClassName}
+          buttonClassName={buttonClassName}
+          buttonTextClassName={buttonTextClassName}
+        />
+
+        <div className={cls("flex flex-col md:flex-row gap-6 md:items-stretch")}>
+          {imagePosition === "left" && mediaContent}
+
+          <div className={cls("w-full md:w-4/10 2xl:w-3/10 rounded-theme-capped card p-6 flex flex-col gap-6 justify-center", contentClassName)}>
+            {bulletPoints.map((point, index) => {
+              const Icon = point.icon;
+              return (
+                <Fragment key={index}>
+                  <div className={cls("relative z-1 flex flex-col gap-2", bulletPointClassName)}>
+                    {Icon && (
+                      <div className="h-10 w-fit aspect-square rounded-theme primary-button flex items-center justify-center flex-shrink-0 mb-1">
+                        <Icon className="h-[40%] w-[40%] text-background" strokeWidth={1.5} />
+                      </div>
+                    )}
+                    <div className="flex flex-col gap-0">
+                      <h3 className={cls("text-xl font-medium", shouldUseLightText && "text-background", bulletTitleClassName)}>
+                        {point.title}
+                      </h3>
+                      <p className={cls("text-base leading-[1.4]", shouldUseLightText ? "text-background" : "text-foreground", bulletDescriptionClassName)}>
+                        {point.description}
+                      </p>
+                    </div>
+                  </div>
+                  {index < bulletPoints.length - 1 && (
+                    <div className="relative z-1 w-full border-b border-accent/10" />
+                  )}
+                </Fragment>
+              );
+            })}
+          </div>
+
+          {imagePosition === "right" && mediaContent}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+SplitAbout.displayName = "SplitAbout";
+
+export default memo(SplitAbout);

src/components/sections/about/SplitAboutCards.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import React, { memo } from "react";
+import TextBox from "@/components/Textbox";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig } from "@/components/cardStack/types";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+interface FeatureCard {
+  id: string;
+  title: string;
+  description: string;
+  label: string;
+}
+
+interface SplitAboutCardsProps {
+  title: string;
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  features: FeatureCard[];
+  buttons?: ButtonConfig[];
+  useInvertedBackground: InvertedBackground;
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  textBoxClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  tagClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+  featuresContainerClassName?: string;
+  featureCardClassName?: string;
+  featureTitleClassName?: string;
+  featureDescriptionClassName?: string;
+  featureLabelClassName?: string;
+}
+
+const SplitAboutCards = ({
+  title,
+  description,
+  tag,
+  tagIcon,
+  features,
+  buttons,
+  useInvertedBackground,
+  ariaLabel = "About section",
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  featuresContainerClassName = "",
+  featureCardClassName = "",
+  featureTitleClassName = "",
+  featureDescriptionClassName = "",
+  featureLabelClassName = "",
+}: SplitAboutCardsProps) => {
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+  const isOddCount = features.length % 2 !== 0;
+
+  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-30", containerClassName)}>
+        <div className="flex flex-col lg:flex-row gap-6 lg:gap-15">
+          <div className="w-full lg:w-1/3">
+            <TextBox
+              title={title}
+              description={description}
+              tag={tag}
+              tagIcon={tagIcon}
+              buttons={buttons}
+              textboxLayout="default"
+              useInvertedBackground={useInvertedBackground}
+              className={cls("gap-2! md:gap-3!", textBoxClassName)}
+              titleClassName={cls("text-5xl", titleClassName)}
+              descriptionClassName={descriptionClassName}
+              tagClassName={tagClassName}
+              buttonContainerClassName={buttonContainerClassName}
+              buttonClassName={buttonClassName}
+              buttonTextClassName={buttonTextClassName}
+            />
+          </div>
+
+          <div className={cls("w-full lg:w-2/3 grid grid-cols-1 md:grid-cols-2 gap-6", featuresContainerClassName)}>
+            {features.map((feature, index) => {
+              const isLastItemOdd = isOddCount && index === features.length - 1;
+              return (
+                <div
+                  key={feature.id}
+                  className={cls("card rounded-theme-capped p-6 flex flex-col gap-10", isLastItemOdd && "md:col-span-2", featureCardClassName)}
+                >
+                <div className="relative z-1 flex flex-col gap-1">
+                  <h3 className={cls("text-2xl md:text-3xl font-medium", shouldUseLightText ? "text-background" : "text-foreground", featureTitleClassName)}>
+                    {feature.title}
+                  </h3>
+                  <p className={cls("text-base leading-tight", shouldUseLightText ? "text-background/75" : "text-foreground/75", featureDescriptionClassName)}>
+                    {feature.description}
+                  </p>
+                </div>
+
+                <p className={cls("relative z-1 text-xl md:text-2xl font-medium", shouldUseLightText ? "text-background" : "text-foreground", featureLabelClassName)}>
+                  {feature.label}
+                </p>
+              </div>
+            );
+            })}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+SplitAboutCards.displayName = "SplitAboutCards";
+
+export default memo(SplitAboutCards);

src/components/sections/about/SplitAboutMetric.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import React, { memo } from "react";
+import TextAnimation from "@/components/text/TextAnimation";
+import { cls } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+
+interface Metric {
+  label: string;
+  value: string;
+}
+
+interface SplitAboutMetricProps {
+  title: string;
+  description: string[];
+  metrics: [Metric, Metric];
+  showBorder?: boolean;
+  useInvertedBackground: "noInvert" | "invertDefault" | "invertCard";
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  metricsContainerClassName?: string;
+  metricClassName?: string;
+  metricValueClassName?: string;
+  metricLabelClassName?: string;
+}
+
+const SplitAboutMetric = ({
+  title,
+  description,
+  metrics,
+  showBorder = false,
+  useInvertedBackground,
+  ariaLabel = "About metrics section",
+  className = "",
+  containerClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  metricsContainerClassName = "",
+  metricClassName = "",
+  metricValueClassName = "",
+  metricLabelClassName = "",
+}: SplitAboutMetricProps) => {
+  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-30", containerClassName)}>
+        <div className="flex flex-col md:flex-row gap-3 md:gap-15">
+          <div className="w-full md:w-1/2">
+            <TextAnimation
+              type={theme.defaultTextAnimation}
+              text={title}
+              variant="trigger"
+              className={cls("text-7xl font-medium", (useInvertedBackground === "invertDefault" || useInvertedBackground === "invertCard") && "text-background", titleClassName)}
+            />
+          </div>
+
+          <div className="w-full md:w-1/2 flex flex-col gap-12">
+            {description.map((desc, index) => (
+              <TextAnimation
+                key={index}
+                type={theme.defaultTextAnimation}
+                text={desc}
+                variant="words-trigger"
+                className={cls("text-base md:text-2xl leading-[1.3]", (useInvertedBackground === "invertDefault" || useInvertedBackground === "invertCard") ? "text-background/75" : "text-foreground/75", descriptionClassName)}
+              />
+            ))}
+
+            <div className="relative w-full border-b border-accent/50" />
+
+            <div className={cls("relative grid grid-cols-2 gap-8 md:gap-12", metricsContainerClassName)}>
+              {metrics.map((metric, index) => (
+                <div
+                  key={index}
+                  className={cls("w-full flex flex-col items-center text-center gap-0", metricClassName)}
+                >
+                  <h3 className={cls("w-full text-9xl font-medium leading-[1.0] truncate", (useInvertedBackground === "invertDefault" || useInvertedBackground === "invertCard") && "text-background", metricValueClassName)}>
+                    {metric.value}
+                  </h3>
+                  <p className={cls("text-sm truncate", (useInvertedBackground === "invertDefault" || useInvertedBackground === "invertCard") ? "text-background/80" : "text-foreground/80", metricLabelClassName)}>
+                    {metric.label}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+        {showBorder && <div className="w-full border-b border-foreground/10" />}
+      </div>
+    </section>
+  );
+};
+
+SplitAboutMetric.displayName = "SplitAboutMetric";
+
+export default memo(SplitAboutMetric);

src/components/sections/about/TagAbout.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import React, { memo } from "react";
+import TextAnimation from "@/components/text/TextAnimation";
+import { cls } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+
+interface TagAboutProps {
+  tag: string;
+  description: string;
+  useInvertedBackground: "noInvert" | "invertDefault" | "invertCard";
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  tagClassName?: string;
+  descriptionClassName?: string;
+}
+
+const TagAbout = ({
+  tag,
+  description,
+  useInvertedBackground,
+  ariaLabel = "About section",
+  className = "",
+  containerClassName = "",
+  tagClassName = "",
+  descriptionClassName = "",
+}: TagAboutProps) => {
+  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 relative overflow-hidden", containerClassName)}>
+        <p className={cls("inline-block mr-15 text-base md:text-xl text-accent", tagClassName)}>
+          {tag}
+        </p>
+        <TextAnimation
+          type={theme.defaultTextAnimation}
+          text={description}
+          variant="words-trigger"
+          as="span"
+          className={cls(" !inline text-2xl md:text-5xl font-medium leading-[1.15]", (useInvertedBackground === "invertDefault" || useInvertedBackground === "invertCard") && "text-background", descriptionClassName)}
+        />
+      </div>
+    </section>
+  );
+};
+
+TagAbout.displayName = "TagAbout";
+
+export default memo(TagAbout);

src/components/sections/about/TagMediaSplitAbout.tsx

@@ -0,0 +1,211 @@
+"use client";
+
+import { memo } from "react";
+import MediaContent from "@/components/shared/MediaContent";
+import Tag from "@/components/shared/Tag";
+import Button from "@/components/button/Button";
+import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { getButtonProps } from "@/lib/buttonUtils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+interface TagMediaSplitAboutProps {
+    title: string;
+    titleSegments?: TitleSegment[];
+    description: string;
+    tag?: string;
+    tagIcon?: LucideIcon;
+    buttons?: ButtonConfig[];
+    textboxLayout: TextboxLayout;
+    contentTag: string;
+    contentTagIcon?: LucideIcon;
+    contentTitle: string;
+    contentDescription: string;
+    contentButtons?: ButtonConfig[];
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+    imagePosition?: "left" | "right";
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    textBoxTitleClassName?: string;
+    textBoxDescriptionClassName?: string;
+    textBoxClassName?: string;
+    textBoxTagClassName?: string;
+    textBoxButtonContainerClassName?: string;
+    textBoxButtonClassName?: string;
+    textBoxButtonTextClassName?: string;
+    titleImageWrapperClassName?: string;
+    titleImageClassName?: string;
+    contentClassName?: string;
+    contentCardClassName?: string;
+    contentTagClassName?: string;
+    contentTitleClassName?: string;
+    contentDescriptionClassName?: string;
+    contentButtonContainerClassName?: string;
+    contentButtonClassName?: string;
+    contentButtonTextClassName?: string;
+    mediaCardClassName?: string;
+    mediaClassName?: string;
+}
+
+const TagMediaSplitAbout = ({
+    title,
+    titleSegments,
+    description,
+    tag,
+    tagIcon,
+    buttons,
+    textboxLayout,
+    contentTag,
+    contentTagIcon,
+    contentTitle,
+    contentDescription,
+    contentButtons,
+    imageSrc,
+    videoSrc,
+    imageAlt,
+    videoAriaLabel,
+    imagePosition = "right",
+    useInvertedBackground,
+    ariaLabel = "About section",
+    className = "",
+    containerClassName = "",
+    textBoxTitleClassName = "",
+    textBoxDescriptionClassName = "",
+    textBoxClassName = "",
+    textBoxTagClassName = "",
+    textBoxButtonContainerClassName = "",
+    textBoxButtonClassName = "",
+    textBoxButtonTextClassName = "",
+    titleImageWrapperClassName = "",
+    titleImageClassName = "",
+    contentClassName = "",
+    contentCardClassName = "",
+    contentTagClassName = "",
+    contentTitleClassName = "",
+    contentDescriptionClassName = "",
+    contentButtonContainerClassName = "",
+    contentButtonClassName = "",
+    contentButtonTextClassName = "",
+    mediaCardClassName = "",
+    mediaClassName = "",
+}: TagMediaSplitAboutProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    const contentCard = (
+        <div className={cls(
+            "flex flex-col justify-between gap-4 md:gap-6 card rounded-theme-capped p-6 md:p-10",
+            contentCardClassName
+        )}>
+            <Tag
+                text={contentTag}
+                icon={contentTagIcon}
+                useInvertedBackground={useInvertedBackground}
+                className={contentTagClassName}
+            />
+            <div className="relative z-1 flex flex-col gap-4">
+                <h2 className={cls(
+                    "text-4xl font-medium leading-tight",
+                    shouldUseLightText ? "text-background" : "text-foreground",
+                    contentTitleClassName
+                )}>
+                    {contentTitle}
+                </h2>
+                <p className={cls(
+                    "text-base md:text-lg leading-tight",
+                    shouldUseLightText ? "text-background/75" : "text-foreground/75",
+                    contentDescriptionClassName
+                )}>
+                    {contentDescription}
+                </p>
+                {contentButtons && contentButtons.length > 0 && (
+                    <div className={cls("relative z-1 flex gap-4", contentButtonContainerClassName)}>
+                        {contentButtons.slice(0, 2).map((button, index) => (
+                            <Button
+                                key={`${button.text}-${index}`}
+                                {...getButtonProps(button, index, theme.defaultButtonVariant, contentButtonClassName, contentButtonTextClassName)}
+                            />
+                        ))}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+
+    const mediaCard = (
+        <div className={cls("card rounded-theme-capped overflow-hidden", mediaCardClassName)}>
+            <MediaContent
+                imageSrc={imageSrc}
+                videoSrc={videoSrc}
+                imageAlt={imageAlt}
+                videoAriaLabel={videoAriaLabel}
+                imageClassName={cls("relative z-1 w-full h-full md:aspect-square object-cover", mediaClassName)}
+            />
+        </div>
+    );
+
+    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-10", containerClassName)}>
+                <CardStackTextBox
+                    title={title}
+                    titleSegments={titleSegments}
+                    description={description}
+                    tag={tag}
+                    tagIcon={tagIcon}
+                    buttons={buttons}
+                    textboxLayout={textboxLayout}
+                    useInvertedBackground={useInvertedBackground}
+                    textBoxClassName={textBoxClassName}
+                    titleClassName={textBoxTitleClassName}
+                    titleImageWrapperClassName={titleImageWrapperClassName}
+                    titleImageClassName={titleImageClassName}
+                    descriptionClassName={textBoxDescriptionClassName}
+                    tagClassName={textBoxTagClassName}
+                    buttonContainerClassName={textBoxButtonContainerClassName}
+                    buttonClassName={textBoxButtonClassName}
+                    buttonTextClassName={textBoxButtonTextClassName}
+                />
+
+                <div className={cls(
+                    "grid grid-cols-1 md:grid-cols-2 gap-6",
+                    contentClassName
+                )}>
+                    {imagePosition === "left" ? (
+                        <>
+                            {mediaCard}
+                            {contentCard}
+                        </>
+                    ) : (
+                        <>
+                            {contentCard}
+                            {mediaCard}
+                        </>
+                    )}
+                </div>
+            </div>
+        </section>
+    );
+};
+
+TagMediaSplitAbout.displayName = "TagMediaSplitAbout";
+
+export default memo(TagMediaSplitAbout);

src/components/sections/about/TestimonialAboutCard.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import React, { memo } from "react";
+import MediaContent from "@/components/shared/MediaContent";
+import Tag from "@/components/shared/Tag";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type MediaProps =
+    | {
+        imageSrc: string;
+        imageAlt?: string;
+        videoSrc?: never;
+        videoAriaLabel?: never;
+    }
+    | {
+        videoSrc: string;
+        videoAriaLabel?: string;
+        imageSrc?: never;
+        imageAlt?: never;
+    };
+
+type TestimonialAboutCardProps = MediaProps & {
+    tag: string;
+    tagIcon?: LucideIcon;
+    title: string;
+    description: string;
+    subdescription: string;
+    icon: LucideIcon;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    contentClassName?: string;
+    tagClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    subdescriptionClassName?: string;
+    footerClassName?: string;
+    iconBoxClassName?: string;
+    iconClassName?: string;
+    mediaWrapperClassName?: string;
+    mediaClassName?: string;
+};
+
+const TestimonialAboutCard = ({
+    tag,
+    tagIcon,
+    title,
+    description,
+    subdescription,
+    icon: Icon,
+    imageSrc,
+    videoSrc,
+    imageAlt = "",
+    videoAriaLabel = "Testimonial video",
+    useInvertedBackground,
+    ariaLabel = "Testimonial section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    contentClassName = "",
+    tagClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    subdescriptionClassName = "",
+    footerClassName = "",
+    iconBoxClassName = "",
+    iconClassName = "",
+    mediaWrapperClassName = "",
+    mediaClassName = "",
+}: TestimonialAboutCardProps) => {
+    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 grid grid-cols-1 md:grid-cols-5 gap-6", containerClassName)}>
+                <div className={cls("relative md:col-span-3 card rounded-theme-capped p-8 md:p-12", cardClassName)}>
+                    <div className={cls(
+                        "absolute -top-7 -left-7 md:-top-8 md:-left-8 primary-button rounded-theme-capped h-14 md:h-16 w-auto aspect-square flex items-center justify-center",
+                        iconBoxClassName
+                    )}>
+                        <Icon className={cls("h-5/10 text-background", iconClassName)} strokeWidth={1.5} />
+                    </div>
+
+                    <div className={cls("relative h-full flex flex-col justify-center gap-4 md:gap-6 py-8 md:py-4", contentClassName)}>
+                        <Tag
+                            text={tag}
+                            icon={tagIcon}
+                            className={cls("mb-1", tagClassName)}
+                        />
+
+                        <h2 className={cls("text-3xl md:text-4xl font-medium text-foreground leading-tight", titleClassName)}>
+                            {title}
+                        </h2>
+
+                        <div className={cls("flex items-center gap-2", footerClassName)}>
+                            <span className={cls("text-base text-foreground", descriptionClassName)}>
+                                {description}
+                            </span>
+                            <span className="text-accent">•</span>
+                            <span className={cls("text-base text-foreground/75", subdescriptionClassName)}>
+                                {subdescription}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+
+                <div className={cls("md:col-span-2 card aspect-square rounded-theme-capped overflow-hidden", mediaWrapperClassName)}>
+                    <MediaContent
+                        imageSrc={imageSrc}
+                        videoSrc={videoSrc}
+                        imageAlt={imageAlt}
+                        videoAriaLabel={videoAriaLabel}
+                        imageClassName={cls("w-full h-full object-cover", mediaClassName)}
+                    />
+                </div>
+            </div>
+        </section>
+    );
+};
+
+TestimonialAboutCard.displayName = "TestimonialAboutCard";
+
+export default memo(TestimonialAboutCard);

src/components/sections/about/TextAbout.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import React, { memo } from "react";
+import TextAnimation from "@/components/text/TextAnimation";
+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";
+
+interface TextAboutProps {
+  title: string;
+  buttons?: ButtonConfig[];
+  useInvertedBackground: "noInvert" | "invertDefault" | "invertCard";
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  titleClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+}
+
+const TextAbout = ({
+  title,
+  buttons,
+  useInvertedBackground,
+  ariaLabel = "About section",
+  className = "",
+  containerClassName = "",
+  titleClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+}: TextAboutProps) => {
+  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)}>
+        <TextAnimation
+          type={theme.defaultTextAnimation}
+          text={title}
+          variant="words-trigger"
+          className={cls("text-2xl md:text-5xl font-medium text-center leading-[1.175]", (useInvertedBackground === "invertDefault" || useInvertedBackground === "invertCard") && "text-background", titleClassName)}
+        />
+
+        {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>
+  );
+};
+
+TextAbout.displayName = "TextAbout";
+
+export default memo(TextAbout);

src/components/sections/about/TextSplitAbout.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import React, { memo } from "react";
+import TextAnimation from "@/components/text/TextAnimation";
+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";
+
+interface TextSplitAboutProps {
+  title: string;
+  description: string[];
+  buttons?: ButtonConfig[];
+  showBorder?: boolean;
+  useInvertedBackground: "noInvert" | "invertDefault" | "invertCard";
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  titleClassName?: string;
+  descriptionClassName?: string;
+  buttonContainerClassName?: string;
+  buttonClassName?: string;
+  buttonTextClassName?: string;
+}
+
+const TextSplitAbout = ({
+  title,
+  description,
+  buttons,
+  showBorder = false,
+  useInvertedBackground,
+  ariaLabel = "About section",
+  className = "",
+  containerClassName = "",
+  titleClassName = "",
+  descriptionClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+}: TextSplitAboutProps) => {
+  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-30", containerClassName)}>
+        <div className="flex flex-col md:flex-row gap-3 md:gap-15">
+          <div className="w-full md:w-1/2">
+            <TextAnimation
+              type={theme.defaultTextAnimation}
+              text={title}
+              variant="trigger"
+              className={cls("text-7xl font-medium", (useInvertedBackground === "invertDefault" || useInvertedBackground === "invertCard") && "text-background", titleClassName)}
+            />
+          </div>
+
+          <div className="w-full md:w-1/2 flex flex-col gap-6">
+            {description.map((desc, index) => (
+              <TextAnimation
+                key={index}
+                type={theme.defaultTextAnimation}
+                text={desc}
+                variant="words-trigger"
+                className={cls("text-base md:text-2xl leading-[1.3]", (useInvertedBackground === "invertDefault" || useInvertedBackground === "invertCard") ? "text-background/75" : "text-foreground/75", descriptionClassName)}
+              />
+            ))}
+
+            {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>
+        </div>
+        {showBorder && <div className="w-full border-b border-foreground/10" />}
+      </div>
+    </section>
+  );
+};
+
+TextSplitAbout.displayName = "TextSplitAbout";
+
+export default memo(TextSplitAbout);