Initial commit

src/components/sections/about/AboutFeature.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 Feature {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+}
+
+interface AboutFeatureProps {
+  title: string;
+  features: Feature[];
+  useInvertedBackground: "noInvert" | "invertDefault" | "invertCard";
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  titleClassName?: string;
+  featuresContainerClassName?: string;
+  featureCardClassName?: string;
+  featureIconContainerClassName?: string;
+  featureIconClassName?: string;
+  featureTitleClassName?: string;
+  featureDescriptionClassName?: string;
+}
+
+const AboutFeature = ({
+  title,
+  features,
+  useInvertedBackground,
+  ariaLabel = "About features section",
+  className = "",
+  containerClassName = "",
+  titleClassName = "",
+  featuresContainerClassName = "",
+  featureCardClassName = "",
+  featureIconContainerClassName = "",
+  featureIconClassName = "",
+  featureTitleClassName = "",
+  featureDescriptionClassName = "",
+}: AboutFeatureProps) => {
+  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[features.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, featuresContainerClassName)}>
+          {features.map((feature, index) => {
+            const Icon = feature.icon;
+            return (
+              <div
+                key={index}
+                className={cls(
+                  "card flex flex-col justify-between gap-4 p-6 rounded-theme-capped h-50 md:h-60 2xl:h-70",
+                  featureCardClassName
+                )}
+              >
+                <div className={cls("relative z-1 primary-button h-12 w-fit aspect-square flex items-center justify-center rounded-theme", featureIconContainerClassName)} aria-hidden="true">
+                  <Icon className={cls("h-4/10 w-auto text-background", featureIconClassName)} strokeWidth={1.5} />
+                </div>
+                <div className="relative z-1 flex flex-col gap-1">
+                  <h3 className={cls("text-2xl font-medium", shouldUseLightText && "text-background", featureTitleClassName)}>
+                    {feature.title}
+                  </h3>
+                  <p className={cls("text-sm leading-[1.1]", shouldUseLightText ? "text-background" : "text-foreground", featureDescriptionClassName)}>
+                    {feature.description}
+                  </p>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+AboutFeature.displayName = "AboutFeature";
+
+export default memo(AboutFeature);

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/AboutShowcase.tsx

@@ -0,0 +1,245 @@
+"use client";
+
+import { memo } from "react";
+import CardStackTextBox from "@/components/cardStack/CardStackTextBox";
+import MediaContent from "@/components/shared/MediaContent";
+import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
+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 { CardAnimationType, TitleSegment } from "@/components/cardStack/types";
+import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+interface ShowcaseItem {
+  title: string;
+  imageSrc?: string;
+  videoSrc?: string;
+  imageAlt?: string;
+  videoAriaLabel?: string;
+}
+
+interface ColumnItemProps {
+  item: ShowcaseItem;
+  position: "left" | "right";
+  shouldUseLightText: boolean;
+  useCappedBorderRadius: boolean;
+  itemMediaWrapperClassName: string;
+  itemImageClassName: string;
+  itemTitleClassName: string;
+  mediaRef?: (el: HTMLDivElement | null) => void;
+  textRef?: (el: HTMLDivElement | null) => void;
+}
+
+const ColumnItem = ({
+  item,
+  position,
+  shouldUseLightText,
+  useCappedBorderRadius,
+  itemMediaWrapperClassName,
+  itemImageClassName,
+  itemTitleClassName,
+  mediaRef,
+  textRef,
+}: ColumnItemProps) => {
+  const mediaBlock = (
+    <div ref={mediaRef} className={cls("w-full h-auto md:h-1/2 aspect-square md:aspect-auto overflow-hidden", useCappedBorderRadius ? "rounded-theme-capped" : "rounded-theme", itemMediaWrapperClassName)}>
+      <MediaContent
+        imageSrc={item.imageSrc}
+        videoSrc={item.videoSrc}
+        imageAlt={item.imageAlt || ""}
+        videoAriaLabel={item.videoAriaLabel || "Item video"}
+        imageClassName={cls("w-full h-full object-cover", itemImageClassName)}
+      />
+    </div>
+  );
+
+  const textBlock = (
+    <div ref={textRef} className={cls("relative card rounded-theme-capped md:h-1/2 flex flex-col p-6", position === "left" ? "justify-end text-left" : "md:justify-start md:text-right")}>
+      <h3 className={cls("text-3xl font-medium leading-tight line-clamp-6", shouldUseLightText ? "text-background" : "text-foreground", itemTitleClassName)}>
+        {item.title}
+      </h3>
+    </div>
+  );
+
+  return position === "left" ? (
+    <div className="flex flex-col gap-6 h-full">
+      {mediaBlock}
+      {textBlock}
+    </div>
+  ) : (
+    <div className="flex flex-col gap-6 h-full">
+      {textBlock}
+      {mediaBlock}
+    </div>
+  );
+};
+
+interface AboutShowcaseProps {
+  title: string;
+  titleSegments?: TitleSegment[];
+  description: string;
+  tag?: string;
+  tagIcon?: LucideIcon;
+  buttons?: ButtonConfig[];
+  leftItem: ShowcaseItem;
+  rightItem: ShowcaseItem;
+  centerImageSrc?: string;
+  centerVideoSrc?: string;
+  centerImageAlt?: string;
+  centerVideoAriaLabel?: string;
+  ariaLabel?: string;
+  useCappedBorderRadius: boolean;
+  animationType: CardAnimationType;
+  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;
+  leftColumnClassName?: string;
+  rightColumnClassName?: string;
+  centerColumnClassName?: string;
+  itemTitleClassName?: string;
+  itemMediaWrapperClassName?: string;
+  itemImageClassName?: string;
+  centerMediaWrapperClassName?: string;
+  centerImageClassName?: string;
+}
+
+const AboutShowcase = ({
+  title,
+  titleSegments,
+  description,
+  tag,
+  tagIcon,
+  buttons,
+  leftItem,
+  rightItem,
+  centerImageSrc,
+  centerVideoSrc,
+  centerImageAlt = "",
+  centerVideoAriaLabel = "Showcase video",
+  ariaLabel = "About section",
+  useCappedBorderRadius,
+  animationType,
+  textboxLayout,
+  useInvertedBackground,
+  className = "",
+  containerClassName = "",
+  textBoxClassName = "",
+  titleClassName = "",
+  titleImageWrapperClassName = "",
+  titleImageClassName = "",
+  descriptionClassName = "",
+  tagClassName = "",
+  buttonContainerClassName = "",
+  buttonClassName = "",
+  buttonTextClassName = "",
+  contentClassName = "",
+  leftColumnClassName = "",
+  rightColumnClassName = "",
+  centerColumnClassName = "",
+  itemTitleClassName = "",
+  itemMediaWrapperClassName = "",
+  itemImageClassName = "",
+  centerMediaWrapperClassName = "",
+  centerImageClassName = "",
+}: AboutShowcaseProps) => {
+  const theme = useTheme();
+  const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+  const { itemRefs } = useCardAnimation({ animationType, itemCount: 5 });
+
+  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 md:gap-15", 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("relative grid grid-cols-1 md:grid-cols-3 gap-6", contentClassName)}>
+          <div className={cls("flex flex-col", leftColumnClassName)}>
+            <ColumnItem
+              item={leftItem}
+              position="left"
+              shouldUseLightText={shouldUseLightText}
+              useCappedBorderRadius={useCappedBorderRadius}
+              itemMediaWrapperClassName={itemMediaWrapperClassName}
+              itemImageClassName={itemImageClassName}
+              itemTitleClassName={itemTitleClassName}
+              mediaRef={(el) => { itemRefs.current[0] = el; }}
+              textRef={(el) => { itemRefs.current[1] = el; }}
+            />
+          </div>
+
+          <div className={cls("flex flex-col aspect-[9/16] md:aspect-auto", centerColumnClassName)}>
+            <div
+              ref={(el) => { itemRefs.current[2] = el; }}
+              className={cls("w-full h-full overflow-hidden", useCappedBorderRadius ? "rounded-theme-capped" : "rounded-theme", centerMediaWrapperClassName)}
+            >
+              <MediaContent
+                imageSrc={centerImageSrc}
+                videoSrc={centerVideoSrc}
+                imageAlt={centerImageAlt}
+                videoAriaLabel={centerVideoAriaLabel}
+                imageClassName={cls("w-full h-full object-cover", centerImageClassName)}
+              />
+            </div>
+          </div>
+
+          <div className={cls("flex flex-col", rightColumnClassName)}>
+            <ColumnItem
+              item={rightItem}
+              position="right"
+              shouldUseLightText={shouldUseLightText}
+              useCappedBorderRadius={useCappedBorderRadius}
+              itemMediaWrapperClassName={itemMediaWrapperClassName}
+              itemImageClassName={itemImageClassName}
+              itemTitleClassName={itemTitleClassName}
+              mediaRef={(el) => { itemRefs.current[4] = el; }}
+              textRef={(el) => { itemRefs.current[3] = el; }}
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+AboutShowcase.displayName = "AboutShowcase";
+
+export default memo(AboutShowcase);

src/components/sections/about/BannerGridAbout.tsx

@@ -0,0 +1,279 @@
+"use client";
+
+import React, { memo } from "react";
+import MediaContent from "@/components/shared/MediaContent";
+import { useCardAnimation } from "@/components/cardStack/hooks/useCardAnimation";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { CardAnimationType } from "@/components/cardStack/types";
+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 BannerMedia = MediaProps & {
+    title: string;
+};
+
+type GridCard = {
+    title: string;
+    description: string;
+};
+
+type BottomMedia = MediaProps;
+
+interface BannerGridAboutProps {
+    bannerMedia: BannerMedia;
+    cards: GridCard[];
+    bottomMedia: BottomMedia;
+    animationType: CardAnimationType;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    bannerCardClassName?: string;
+    bannerMediaClassName?: string;
+    bannerTitleClassName?: string;
+    gridClassName?: string;
+    cardClassName?: string;
+    cardTitleClassName?: string;
+    cardDescriptionClassName?: string;
+    bottomMediaCardClassName?: string;
+    bottomMediaClassName?: string;
+}
+
+interface GridCardItemProps {
+    card: GridCard;
+    shouldUseLightText: boolean;
+    cardClassName?: string;
+    cardTitleClassName?: string;
+    cardDescriptionClassName?: string;
+}
+
+const GridCardItem = memo(({
+    card,
+    shouldUseLightText,
+    cardClassName = "",
+    cardTitleClassName = "",
+    cardDescriptionClassName = "",
+}: GridCardItemProps) => {
+    return (
+        <div
+            className={cls(
+                "card rounded-theme-capped p-6 md:p-8 flex flex-col justify-between gap-4 aspect-video",
+                cardClassName
+            )}
+        >
+            <h3 className={cls(
+                "relative z-1 text-xl text-balance md:text-3xl font-medium truncate",
+                shouldUseLightText ? "text-background" : "text-foreground",
+                cardTitleClassName
+            )}>
+                {card.title}
+            </h3>
+            <p className={cls(
+                "relative z-1 text-base text-balance md:text-lg leading-tight line-clamp-3",
+                shouldUseLightText ? "text-background/75" : "text-foreground/75",
+                cardDescriptionClassName
+            )}>
+                {card.description}
+            </p>
+        </div>
+    );
+});
+
+GridCardItem.displayName = "GridCardItem";
+
+const BannerGridAbout = ({
+    bannerMedia,
+    cards,
+    bottomMedia,
+    animationType,
+    useInvertedBackground,
+    ariaLabel = "About section",
+    className = "",
+    containerClassName = "",
+    bannerCardClassName = "",
+    bannerMediaClassName = "",
+    bannerTitleClassName = "",
+    gridClassName = "",
+    cardClassName = "",
+    cardTitleClassName = "",
+    cardDescriptionClassName = "",
+    bottomMediaCardClassName = "",
+    bottomMediaClassName = "",
+}: BannerGridAboutProps) => {
+    const theme = useTheme();
+    const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+
+    const cardCount = cards.length;
+    // 1 card: 3 items (hero, card, media)
+    // 2 cards: 4 items (hero, card1, media, card2)
+    // 3 cards: 5 items (hero, card1, card2, card3, media)
+    const itemCount = cardCount + 2;
+    const { itemRefs } = useCardAnimation({ animationType, itemCount });
+
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls(
+                "relative w-full py-20",
+                useInvertedBackground === "invertCard" && "w-content-width-expanded mx-auto rounded-theme-capped bg-foreground",
+                useInvertedBackground === "invertDefault" && "bg-foreground",
+                className
+            )}
+        >
+            <div className={cls("w-content-width mx-auto", containerClassName)}>
+                <div className="flex flex-col gap-4">
+                    {/* Banner Media Card */}
+                    <div
+                        ref={(el) => { itemRefs.current[0] = el; }}
+                        className={cls(
+                            "relative w-full aspect-video rounded-theme-capped overflow-hidden",
+                            bannerCardClassName
+                        )}
+                    >
+                        <MediaContent
+                            imageSrc={bannerMedia.imageSrc}
+                            videoSrc={bannerMedia.videoSrc}
+                            imageAlt={bannerMedia.imageAlt}
+                            videoAriaLabel={bannerMedia.videoAriaLabel}
+                            imageClassName={cls("w-full h-full object-cover", bannerMediaClassName)}
+                        />
+                        <div className="absolute inset-0 flex items-center justify-center">
+                            <h2 className={cls(
+                                "max-w-8/10 md:max-w-1/2 text-4xl md:text-6xl font-medium text-center text-balance text-background mix-blend-difference",
+                                bannerTitleClassName
+                            )}>
+                                {bannerMedia.title}
+                            </h2>
+                        </div>
+                    </div>
+
+                    {/* Bottom Grid */}
+                    <div className={cls(
+                        "grid gap-4",
+                        cardCount === 1 && "grid-cols-1 md:grid-cols-2",
+                        cardCount === 2 && "grid-cols-1 md:grid-cols-3",
+                        cardCount === 3 && "grid-cols-1 md:grid-cols-3",
+                        gridClassName
+                    )}>
+                        {/* First Card */}
+                        <div ref={(el) => { itemRefs.current[1] = el; }}>
+                            <GridCardItem
+                                card={cards[0]}
+                                shouldUseLightText={shouldUseLightText}
+                                cardClassName={cardClassName}
+                                cardTitleClassName={cardTitleClassName}
+                                cardDescriptionClassName={cardDescriptionClassName}
+                            />
+                        </div>
+
+                        {/* 1 card: Media on right */}
+                        {cardCount === 1 && (
+                            <div
+                                ref={(el) => { itemRefs.current[2] = el; }}
+                                className={cls(
+                                    "relative rounded-theme-capped overflow-hidden aspect-square md:aspect-video",
+                                    bottomMediaCardClassName
+                                )}
+                            >
+                                <MediaContent
+                                    imageSrc={bottomMedia.imageSrc}
+                                    videoSrc={bottomMedia.videoSrc}
+                                    imageAlt={bottomMedia.imageAlt}
+                                    videoAriaLabel={bottomMedia.videoAriaLabel}
+                                    imageClassName={cls("w-full h-full object-cover", bottomMediaClassName)}
+                                />
+                            </div>
+                        )}
+
+                        {/* 2 cards: Media in middle */}
+                        {cardCount === 2 && (
+                            <>
+                                <div
+                                    ref={(el) => { itemRefs.current[2] = el; }}
+                                    className={cls(
+                                        "relative rounded-theme-capped overflow-hidden aspect-square md:aspect-video order-last md:order-none",
+                                        bottomMediaCardClassName
+                                    )}
+                                >
+                                    <MediaContent
+                                        imageSrc={bottomMedia.imageSrc}
+                                        videoSrc={bottomMedia.videoSrc}
+                                        imageAlt={bottomMedia.imageAlt}
+                                        videoAriaLabel={bottomMedia.videoAriaLabel}
+                                        imageClassName={cls("w-full h-full object-cover", bottomMediaClassName)}
+                                    />
+                                </div>
+                                <div ref={(el) => { itemRefs.current[3] = el; }}>
+                                    <GridCardItem
+                                        card={cards[1]}
+                                        shouldUseLightText={shouldUseLightText}
+                                        cardClassName={cardClassName}
+                                        cardTitleClassName={cardTitleClassName}
+                                        cardDescriptionClassName={cardDescriptionClassName}
+                                    />
+                                </div>
+                            </>
+                        )}
+
+                        {/* 3 cards: Card 2, Card 3, then Media full width */}
+                        {cardCount === 3 && (
+                            <>
+                                <div ref={(el) => { itemRefs.current[2] = el; }}>
+                                    <GridCardItem
+                                        card={cards[1]}
+                                        shouldUseLightText={shouldUseLightText}
+                                        cardClassName={cardClassName}
+                                        cardTitleClassName={cardTitleClassName}
+                                        cardDescriptionClassName={cardDescriptionClassName}
+                                    />
+                                </div>
+                                <div ref={(el) => { itemRefs.current[3] = el; }}>
+                                    <GridCardItem
+                                        card={cards[2]}
+                                        shouldUseLightText={shouldUseLightText}
+                                        cardClassName={cardClassName}
+                                        cardTitleClassName={cardTitleClassName}
+                                        cardDescriptionClassName={cardDescriptionClassName}
+                                    />
+                                </div>
+                                <div
+                                    ref={(el) => { itemRefs.current[4] = el; }}
+                                    className={cls(
+                                        "relative rounded-theme-capped overflow-hidden aspect-video md:aspect-[16/3] col-span-2 md:col-span-3",
+                                        bottomMediaCardClassName
+                                    )}
+                                >
+                                    <MediaContent
+                                        imageSrc={bottomMedia.imageSrc}
+                                        videoSrc={bottomMedia.videoSrc}
+                                        imageAlt={bottomMedia.imageAlt}
+                                        videoAriaLabel={bottomMedia.videoAriaLabel}
+                                        imageClassName={cls("w-full h-full object-cover", bottomMediaClassName)}
+                                    />
+                                </div>
+                            </>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+BannerGridAbout.displayName = "BannerGridAbout";
+
+export default memo(BannerGridAbout);

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,81 @@
+"use client";
+
+import { memo } from "react";
+import MediaContent from "@/components/shared/MediaContent";
+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 MediaAboutProps {
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+    buttons?: ButtonConfig[];
+    useInvertedBackground: "noInvert" | "invertDefault" | "invertCard";
+    ariaLabel?: string;
+    className?: string;
+    mediaWrapperClassName?: string;
+    mediaClassName?: string;
+    buttonContainerClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+}
+
+const MediaAbout = ({
+    imageSrc,
+    videoSrc,
+    imageAlt,
+    videoAriaLabel,
+    buttons,
+    useInvertedBackground,
+    ariaLabel = "About section",
+    className = "",
+    mediaWrapperClassName = "",
+    mediaClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+}: MediaAboutProps) => {
+    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("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)}
+                />
+
+                {buttons && buttons.length > 0 && (
+                    <div className={cls("absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 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>
+    );
+};
+
+MediaAbout.displayName = "MediaAbout";
+
+export default memo(MediaAbout);

src/components/sections/about/MediaGridAbout.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import { memo } from "react";
+import MediaContent from "@/components/shared/MediaContent";
+import { cls, shouldUseInvertedText } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+
+type MediaItem = {
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+};
+
+interface MediaGridAboutProps {
+    title: string;
+    description: string;
+    mediaItems: MediaItem[];
+    imagePosition?: "left" | "right";
+    useInvertedBackground: "noInvert" | "invertDefault" | "invertCard";
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    contentCardClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    mediaCardClassName?: string;
+    mediaGridClassName?: string;
+    mediaClassName?: string;
+}
+
+const MediaGridAbout = ({
+    title,
+    description,
+    mediaItems,
+    imagePosition = "right",
+    useInvertedBackground,
+    ariaLabel = "About section",
+    className = "",
+    containerClassName = "",
+    contentCardClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    mediaCardClassName = "",
+    mediaGridClassName = "",
+    mediaClassName = "",
+}: MediaGridAboutProps) => {
+    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-6", contentCardClassName)}>
+            <h2 className={cls("text-4xl md:text-5xl font-medium leading-tight text-balance", shouldUseLightText ? "text-background" : "text-foreground", titleClassName)}>
+                {title}
+            </h2>
+            <p className={cls("text-base md:text-lg leading-tight text-balance", shouldUseLightText ? "text-background/75" : "text-foreground/75", descriptionClassName)}>
+                {description}
+            </p>
+        </div>
+    );
+
+    const items = mediaItems.slice(0, 6);
+    const itemCount = items.length;
+
+    const getGridLayout = () => {
+        switch (itemCount) {
+            case 1:
+                return "grid-cols-1";
+            case 2:
+                return "grid-cols-1";
+            case 3:
+                return "grid-cols-2";
+            case 4:
+                return "grid-cols-2";
+            case 5:
+                return "grid-cols-2";
+            case 6:
+                return "grid-cols-2";
+            default:
+                return "grid-cols-1";
+        }
+    };
+
+    const getItemClassName = (index: number) => {
+        if (itemCount === 3 && index === 2) return "col-span-2";
+        if (itemCount === 5 && index === 4) return "col-span-2";
+        return "";
+    };
+
+    const mediaCard = (
+        <div className={cls("card aspect-square rounded-theme-capped overflow-hidden p-6", mediaCardClassName)}>
+            <div className={cls("relative z-1 grid h-full gap-6", getGridLayout(), mediaGridClassName)}>
+                {items.map((item, index) => (
+                    <div key={index} className={cls("relative overflow-hidden", getItemClassName(index))}>
+                        <MediaContent
+                            imageSrc={item.imageSrc}
+                            videoSrc={item.videoSrc}
+                            imageAlt={item.imageAlt}
+                            videoAriaLabel={item.videoAriaLabel}
+                            imageClassName={cls("absolute inset-0 w-full h-full object-cover", mediaClassName)}
+                        />
+                    </div>
+                ))}
+            </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 grid grid-cols-1 md:grid-cols-2 gap-6", containerClassName)}>
+                {imagePosition === "left" ? (
+                    <>
+                        {mediaCard}
+                        {contentCard}
+                    </>
+                ) : (
+                    <>
+                        {contentCard}
+                        {mediaCard}
+                    </>
+                )}
+            </div>
+        </section>
+    );
+};
+
+MediaGridAbout.displayName = "MediaGridAbout";
+
+export default memo(MediaGridAbout);

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("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-full bg-accent transition-all duration-300",
+                                    activeTab === tab.id ? "w-2 h-2" : "w-0 h-0",
+                                    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,82 @@
+"use client";
+
+import { memo } from "react";
+import MediaContent from "@/components/shared/MediaContent";
+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 ParallaxAboutProps {
+    imageSrc?: string;
+    videoSrc?: string;
+    imageAlt?: string;
+    videoAriaLabel?: string;
+    buttons?: ButtonConfig[];
+    ariaLabel?: string;
+    className?: string;
+    mediaClassName?: string;
+    buttonContainerClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+}
+
+const ParallaxAbout = ({
+    imageSrc,
+    videoSrc,
+    imageAlt,
+    videoAriaLabel,
+    buttons,
+    ariaLabel = "About section",
+    className = "",
+    mediaClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+}: ParallaxAboutProps) => {
+    const theme = useTheme();
+
+    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>
+
+            {buttons && buttons.length > 0 && (
+                <div className={cls("relative z-10 flex items-center justify-center h-full", buttonContainerClassName)}>
+                    <div className="flex gap-4">
+                        {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>
+    );
+};
+
+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/SplitAboutFeatures.tsx

@@ -0,0 +1,94 @@
+"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 FeatureItem {
+  text: string;
+  icon: LucideIcon;
+}
+
+interface SplitAboutFeaturesProps {
+  title: string;
+  features: FeatureItem[];
+  showBorder?: boolean;
+  useInvertedBackground: "noInvert" | "invertDefault" | "invertCard";
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  titleClassName?: string;
+  featuresContainerClassName?: string;
+  featureClassName?: string;
+  featureIconClassName?: string;
+  featureTextClassName?: string;
+}
+
+const SplitAboutFeatures = ({
+  title,
+  features,
+  showBorder = false,
+  useInvertedBackground,
+  ariaLabel = "About features section",
+  className = "",
+  containerClassName = "",
+  titleClassName = "",
+  featuresContainerClassName = "",
+  featureClassName = "",
+  featureIconClassName = "",
+  featureTextClassName = "",
+}: SplitAboutFeaturesProps) => {
+  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 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={cls("relative w-full md:w-1/2 grid grid-cols-2 gap-6", featuresContainerClassName)}>
+            {features.map((feature, index) => {
+              const Icon = feature.icon;
+              const isLastItemOdd = isOddCount && index === features.length - 1;
+              return (
+                <div
+                  key={index}
+                  className={cls("relative card rounded-theme-capped w-full flex items-center gap-3 p-8", isLastItemOdd && "col-span-2", featureClassName)}
+                >
+                  <div className="relative z-1 h-8 w-auto aspect-square rounded-theme primary-button flex items-center justify-center" >
+                    <Icon
+                      className={cls("h-45/100 w-45/100 text-background", featureIconClassName)}
+                      aria-hidden="true"
+                    />
+                  </div>
+                  <p className={cls("relative z-1 text-base leading-tight", shouldUseLightText ? "text-background/75" : "text-foreground/75", featureTextClassName)}>
+                    {feature.text}
+                  </p>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+        {showBorder && <div className="w-full border-b border-foreground/10" />}
+      </div>
+    </section>
+  );
+};
+
+SplitAboutFeatures.displayName = "SplitAboutFeatures";
+
+export default memo(SplitAboutFeatures);

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/TagAboutCard.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import React, { memo } from "react";
+import Tag from "@/components/shared/Tag";
+import TextAnimation from "@/components/text/TextAnimation";
+import { cls } from "@/lib/utils";
+import { useTheme } from "@/providers/themeProvider/ThemeProvider";
+import type { LucideIcon } from "lucide-react";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+interface TagAboutCardProps {
+    tag: string;
+    tagIcon?: LucideIcon;
+    title: string;
+    paragraphs: string[];
+    icon: LucideIcon;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    cardClassName?: string;
+    tagClassName?: string;
+    titleClassName?: string;
+    paragraphsContainerClassName?: string;
+    paragraphClassName?: string;
+    iconBoxClassName?: string;
+    iconClassName?: string;
+}
+
+const TagAboutCard = ({
+    tag,
+    tagIcon,
+    title,
+    paragraphs,
+    icon: Icon,
+    useInvertedBackground,
+    ariaLabel = "About section",
+    className = "",
+    containerClassName = "",
+    cardClassName = "",
+    tagClassName = "",
+    titleClassName = "",
+    paragraphsContainerClassName = "",
+    paragraphClassName = "",
+    iconBoxClassName = "",
+    iconClassName = "",
+}: TagAboutCardProps) => {
+    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 md:w-40 mx-auto", containerClassName)}>
+                <div className={cls("relative card rounded-theme-capped p-8 md:p-12", cardClassName)}>
+                    <div className={cls(
+                        "absolute! -top-7 -right-7 md:-top-8 md:-right-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="flex flex-col gap-6">
+                        <Tag
+                            text={tag}
+                            icon={tagIcon}
+                            className={tagClassName}
+                        />
+
+                        <TextAnimation
+                            text={title}
+                            type={theme.defaultTextAnimation}
+                            variant="words-trigger"
+                            as="h2"
+                            className={cls("text-4xl md:text-5xl font-medium text-balance text-foreground", titleClassName)}
+                        />
+
+                        <div className={cls("flex flex-col gap-3", paragraphsContainerClassName)}>
+                            {paragraphs.map((paragraph, index) => (
+                                <p
+                                    key={index}
+                                    className={cls("text-base text-foreground/75 leading-tight", paragraphClassName)}
+                                >
+                                    {paragraph}
+                                </p>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+TagAboutCard.displayName = "TagAboutCard";
+
+export default memo(TagAboutCard);

src/components/sections/about/TagMediaSplitAbout.tsx

@@ -0,0 +1,238 @@
+"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 {
+    variant: "card" | "border";
+    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 = ({
+    variant,
+    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-6",
+            variant === "card" && "card rounded-theme-capped p-6 md:p-10",
+            contentCardClassName
+        )}>
+            <Tag
+                text={contentTag}
+                icon={contentTagIcon}
+                useInvertedBackground={variant === "card" ? useInvertedBackground : undefined}
+                className={contentTagClassName}
+            />
+            <div className="relative z-1 flex flex-col gap-4">
+                <h2 className={cls(
+                    "text-4xl font-medium leading-tight",
+                    variant === "card"
+                        ? (shouldUseLightText ? "text-background" : "text-foreground")
+                        : (useInvertedBackground !== "noInvert" ? "text-background" : "text-foreground"),
+                    contentTitleClassName
+                )}>
+                    {contentTitle}
+                </h2>
+                <p className={cls(
+                    "text-base md:text-lg leading-tight",
+                    variant === "card"
+                        ? (shouldUseLightText ? "text-background/75" : "text-foreground/75")
+                        : (useInvertedBackground !== "noInvert" ? "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 gap-6",
+                    variant === "border" ? "md:grid-cols-[1fr_1px_1fr] md:gap-10" : "md:grid-cols-2",
+                    contentClassName
+                )}>
+                    {variant === "border" && (
+                        <div className={cls(
+                            "w-full h-px md:hidden",
+                            useInvertedBackground !== "noInvert" ? "bg-background/20" : "bg-foreground/20"
+                        )} />
+                    )}
+
+                    {imagePosition === "left" ? (
+                        <>
+                            {mediaCard}
+                            {variant === "border" && (
+                                <div className={cls(
+                                    "w-full h-px md:w-px md:h-auto md:self-stretch",
+                                    useInvertedBackground !== "noInvert" ? "bg-background/20" : "bg-foreground/20"
+                                )} />
+                            )}
+                            {contentCard}
+                        </>
+                    ) : (
+                        <>
+                            {contentCard}
+                            {variant === "border" && (
+                                <div className={cls(
+                                    "w-full h-px md:w-px md:h-auto md:self-stretch",
+                                    useInvertedBackground !== "noInvert" ? "bg-background/20" : "bg-foreground/20"
+                                )} />
+                            )}
+                            {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);