Initial commit

2026-02-04 13:52:45 +00:00
commit 382e6a5646
640 changed files with 76828 additions and 0 deletions
--- a/src/components/sections/contact/ContactCTA.tsx
+++ b/src/components/sections/contact/ContactCTA.tsx
@@ -0,0 +1,105 @@
+"use client";
+
+import TextBox from "@/components/Textbox";
+import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
+import { cls } from "@/lib/utils";
+import type { LucideIcon } from "lucide-react";
+import type { ButtonConfig } from "@/types/button";
+import type { InvertedBackground } from "@/providers/themeProvider/config/constants";
+
+type ContactCTABackgroundProps = Extract<
+    HeroBackgroundVariantProps,
+    | { variant: "plain" }
+    | { variant: "animated-grid" }
+    | { variant: "canvas-reveal" }
+    | { variant: "cell-wave" }
+    | { variant: "downward-rays-animated" }
+    | { variant: "downward-rays-animated-grid" }
+    | { variant: "downward-rays-static" }
+    | { variant: "downward-rays-static-grid" }
+    | { variant: "gradient-bars" }
+    | { variant: "radial-gradient" }
+    | { variant: "rotated-rays-animated" }
+    | { variant: "rotated-rays-animated-grid" }
+    | { variant: "rotated-rays-static" }
+    | { variant: "rotated-rays-static-grid" }
+    | { variant: "sparkles-gradient" }
+>;
+
+interface ContactCTAProps {
+    tag: string;
+    tagIcon?: LucideIcon;
+    title: string;
+    description: string;
+    buttons: ButtonConfig[];
+    background: ContactCTABackgroundProps;
+    useInvertedBackground: InvertedBackground;
+    ariaLabel?: string;
+    className?: string;
+    containerClassName?: string;
+    contentClassName?: string;
+    textBoxClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    tagClassName?: string;
+    buttonContainerClassName?: string;
+    buttonClassName?: string;
+    buttonTextClassName?: string;
+}
+
+const ContactCTA = ({
+    tag,
+    tagIcon,
+    title,
+    description,
+    buttons,
+    background,
+    useInvertedBackground,
+    ariaLabel = "Contact section",
+    className = "",
+    containerClassName = "",
+    contentClassName = "",
+    textBoxClassName = "",
+    titleClassName = "",
+    descriptionClassName = "",
+    tagClassName = "",
+    buttonContainerClassName = "",
+    buttonClassName = "",
+    buttonTextClassName = "",
+}: ContactCTAProps) => {
+    return (
+        <section
+            aria-label={ariaLabel}
+            className={cls("relative py-20 w-full", useInvertedBackground === "invertDefault" && "bg-foreground", className)}
+        >
+            <div className={cls("w-content-width mx-auto relative z-10", containerClassName)}>
+                <div className={cls("relative w-full card rounded-theme-capped py-20 px-10 flex items-center justify-center", contentClassName)}>
+                    <div className="relative z-10 w-full md:w-3/4 mx-auto flex flex-col items-center justify-center">
+                        <TextBox
+                            tag={tag}
+                            tagIcon={tagIcon}
+                            title={title}
+                            description={description}
+                            buttons={buttons}
+                            className={cls("flex flex-col gap-3 md:gap-1", textBoxClassName)}
+                            titleClassName={cls("text-4xl md:text-5xl 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 flex-wrap gap-4 mt-3", buttonContainerClassName)}
+                            buttonClassName={buttonClassName}
+                            buttonTextClassName={buttonTextClassName}
+                            center={true}
+                        />
+                    </div>
+                    <div className="absolute inset-0 w-full h-full z-0 rounded-theme-capped overflow-hidden">
+                        <HeroBackgrounds {...background} />
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+ContactCTA.displayName = "ContactCTA";
+
+export default ContactCTA;