Initial commit

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