src/app/page.tsx

@@ -127,6 +127,8 @@ export default function LandingPage() {
       ]}
       buttonAnimation="slide-up"
       showBorder={false}
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AO9gCSLoDdKgboXV6NtXXgvfy1/dmitry-kudin-headshot-1774368740000-abcdef.png"
+      imageAlt="Dmitry Kudin professional headshot"
     />
   </div>
 

src/components/sections/about/TextSplitAbout.tsx

@@ -2,6 +2,7 @@
 
 import TextAnimation from "@/components/text/TextAnimation";
 import Button from "@/components/button/Button";
+import MediaContent from "@/components/shared/MediaContent";
 import { cls } from "@/lib/utils";
 import { getButtonProps } from "@/lib/buttonUtils";
 import { useTheme } from "@/providers/themeProvider/ThemeProvider";
@@ -16,6 +17,8 @@ interface TextSplitAboutProps {
   showBorder?: boolean;
   useInvertedBackground: boolean;
   ariaLabel?: string;
+  imageSrc?: string;
+  imageAlt?: string;
   className?: string;
   containerClassName?: string;
   titleClassName?: string;
@@ -33,6 +36,8 @@ const TextSplitAbout = ({
   showBorder = false,
   useInvertedBackground = false,
   ariaLabel = "About section",
+  imageSrc,
+  imageAlt,
   className = "",
   containerClassName = "",
   titleClassName = "",
@@ -51,7 +56,14 @@ const TextSplitAbout = ({
     >
       <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">
+          <div className="w-full md:w-1/2 flex flex-col gap-6">
+            {imageSrc && imageAlt && (
+              <MediaContent
+                src={imageSrc}
+                alt={imageAlt}
+                imageClassName="w-full h-auto rounded-theme object-cover"
+              />
+            )}
             <TextAnimation
               type={theme.defaultTextAnimation}
               text={title}