- {(title || titleSegments || description) && (
-
- {Children.map(childrenArray, (child, index) => (
- = ({
+ title,
+ description,
+ email,
+ phone,
+ className = '',
+}) => {
+ const [formData, setFormData] = useState>({
+ name: '',
+ email: '',
+ message: '',
+ });
- const handleSubmit = async (email: string) => {
- try {
- await sendContactEmail({ email });
- console.log("Email send successfully");
- } catch (error) {
- console.error("Failed to send email:", error);
- }
- };
+ const handleChange = (e: React.ChangeEvent) => {
+ const { name, value } = e.target;
+ setFormData(prev => ({
+ ...prev,
+ [name]: value,
+ }));
+ };
- return (
-
-
- );
+ const handleSubmitClick = () => {
+ // Form submission logic would go here
+ console.log('Form data:', formData);
+ };
+
+ return (
+ = ({
+ title,
+ description,
+ imageSrc,
+ className = '',
+}) => {
+ const [formData, setFormData] = useState>({
+ name: '',
+ email: '',
+ message: '',
+ });
- const handleSubmit = async (email: string) => {
- try {
- await sendContactEmail({ email });
- console.log("Email send successfully");
- } catch (error) {
- console.error("Failed to send email:", error);
- }
- };
+ const handleChange = (e: React.ChangeEvent) => {
+ const { name, value } = e.target;
+ setFormData(prev => ({
+ ...prev,
+ [name]: value,
+ }));
+ };
- const contactContent = (
-
{ itemRefs.current[index] = el; }}
- >
- {child}
+
);
};
-TimelineBase.displayName = "TimelineBase";
-
-export default React.memo(TimelineBase);
+export default TimelineBase;
\ No newline at end of file
diff --git a/src/components/sections/contact/ContactCenter.tsx b/src/components/sections/contact/ContactCenter.tsx
index e0cae92..fe1c5be 100644
--- a/src/components/sections/contact/ContactCenter.tsx
+++ b/src/components/sections/contact/ContactCenter.tsx
@@ -1,131 +1,81 @@
-"use client";
+'use client';
-import ContactForm from "@/components/form/ContactForm";
-import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
-import { cls } from "@/lib/utils";
-import { LucideIcon } from "lucide-react";
-import { sendContactEmail } from "@/utils/sendContactEmail";
-import type { ButtonAnimationType } from "@/types/button";
-
-type ContactCenterBackgroundProps = 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" }
->;
+import React, { useState } from 'react';
interface ContactCenterProps {
- title: string;
- description: string;
- tag: string;
- tagIcon?: LucideIcon;
- tagAnimation?: ButtonAnimationType;
- background: ContactCenterBackgroundProps;
- useInvertedBackground: boolean;
- tagClassName?: string;
- inputPlaceholder?: string;
- buttonText?: string;
- termsText?: string;
- onSubmit?: (email: string) => void;
- ariaLabel?: string;
- className?: string;
- containerClassName?: string;
- contentClassName?: string;
- titleClassName?: string;
- descriptionClassName?: string;
- formWrapperClassName?: string;
- formClassName?: string;
- inputClassName?: string;
- buttonClassName?: string;
- buttonTextClassName?: string;
- termsClassName?: string;
+ title: string;
+ description: string;
+ email?: string;
+ phone?: string;
+ className?: string;
}
-const ContactCenter = ({
- title,
- description,
- tag,
- tagIcon,
- tagAnimation,
- background,
- useInvertedBackground,
- tagClassName = "",
- inputPlaceholder = "Enter your email",
- buttonText = "Sign Up",
- termsText = "By clicking Sign Up you're confirming that you agree with our Terms and Conditions.",
- onSubmit,
- ariaLabel = "Contact section",
- className = "",
- containerClassName = "",
- contentClassName = "",
- titleClassName = "",
- descriptionClassName = "",
- formWrapperClassName = "",
- formClassName = "",
- inputClassName = "",
- buttonClassName = "",
- buttonTextClassName = "",
- termsClassName = "",
-}: ContactCenterProps) => {
+const ContactCenter: React.FC
+ {items.map((item, index) => (
+
-
+ ))}
+
+
-
+
+
+ {item.icon || index + 1}
- ))}
+ {index < items.length - 1 && (
+
+ )}
+
+
{item.title}
+{item.description}
+
-
-
-
-
-
-
-
-
+
+ );
};
-ContactCenter.displayName = "ContactCenter";
-
-export default ContactCenter;
+export default ContactCenter;
\ No newline at end of file
diff --git a/src/components/sections/contact/ContactSplit.tsx b/src/components/sections/contact/ContactSplit.tsx
index 9f7ca93..1a0aec9 100644
--- a/src/components/sections/contact/ContactSplit.tsx
+++ b/src/components/sections/contact/ContactSplit.tsx
@@ -1,171 +1,84 @@
-"use client";
+'use client';
-import ContactForm from "@/components/form/ContactForm";
-import MediaContent from "@/components/shared/MediaContent";
-import HeroBackgrounds, { type HeroBackgroundVariantProps } from "@/components/background/HeroBackgrounds";
-import { cls } from "@/lib/utils";
-import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
-import { LucideIcon } from "lucide-react";
-import { sendContactEmail } from "@/utils/sendContactEmail";
-import type { ButtonAnimationType } from "@/types/button";
-
-type ContactSplitBackgroundProps = 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" }
->;
+import React, { useState } from 'react';
interface ContactSplitProps {
- title: string;
- description: string;
- tag: string;
- tagIcon?: LucideIcon;
- tagAnimation?: ButtonAnimationType;
- background: ContactSplitBackgroundProps;
- useInvertedBackground: boolean;
- imageSrc?: string;
- videoSrc?: string;
- imageAlt?: string;
- videoAriaLabel?: string;
- mediaPosition?: "left" | "right";
- mediaAnimation: ButtonAnimationType;
- inputPlaceholder?: string;
- buttonText?: string;
- termsText?: string;
- onSubmit?: (email: string) => void;
- ariaLabel?: string;
- className?: string;
- containerClassName?: string;
- contentClassName?: string;
- contactFormClassName?: string;
- tagClassName?: string;
- titleClassName?: string;
- descriptionClassName?: string;
- formWrapperClassName?: string;
- formClassName?: string;
- inputClassName?: string;
- buttonClassName?: string;
- buttonTextClassName?: string;
- termsClassName?: string;
- mediaWrapperClassName?: string;
- mediaClassName?: string;
+ title: string;
+ description: string;
+ imageSrc?: string;
+ className?: string;
}
-const ContactSplit = ({
- title,
- description,
- tag,
- tagIcon,
- tagAnimation,
- background,
- useInvertedBackground,
- imageSrc,
- videoSrc,
- imageAlt = "",
- videoAriaLabel = "Contact section video",
- mediaPosition = "right",
- mediaAnimation,
- inputPlaceholder = "Enter your email",
- buttonText = "Sign Up",
- termsText = "By clicking Sign Up you're confirming that you agree with our Terms and Conditions.",
- onSubmit,
- ariaLabel = "Contact section",
- className = "",
- containerClassName = "",
- contentClassName = "",
- contactFormClassName = "",
- tagClassName = "",
- titleClassName = "",
- descriptionClassName = "",
- formWrapperClassName = "",
- formClassName = "",
- inputClassName = "",
- buttonClassName = "",
- buttonTextClassName = "",
- termsClassName = "",
- mediaWrapperClassName = "",
- mediaClassName = "",
-}: ContactSplitProps) => {
- const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
+const ContactSplit: React.FC{title}
+{description}
+ + {email &&Email: {email}
} + {phone &&Phone: {phone}
} +
- ) => void;
- ariaLabel?: string;
- className?: string;
- containerClassName?: string;
- contentClassName?: string;
- formCardClassName?: string;
- titleClassName?: string;
- descriptionClassName?: string;
- buttonClassName?: string;
- buttonTextClassName?: string;
- mediaWrapperClassName?: string;
- mediaClassName?: string;
+ title: string;
+ description: string;
+ inputs: FormInput[];
+ imageSrc?: string;
+ className?: string;
}
-const ContactSplitForm = ({
- title,
- description,
- inputs,
- textarea,
- useInvertedBackground,
- imageSrc,
- videoSrc,
- imageAlt = "",
- videoAriaLabel = "Contact section video",
- mediaPosition = "right",
- mediaAnimation,
- buttonText = "Submit",
- onSubmit,
- ariaLabel = "Contact section",
- className = "",
- containerClassName = "",
- contentClassName = "",
- formCardClassName = "",
- titleClassName = "",
- descriptionClassName = "",
- buttonClassName = "",
- buttonTextClassName = "",
- mediaWrapperClassName = "",
- mediaClassName = "",
-}: ContactSplitFormProps) => {
- const theme = useTheme();
- const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
- const { containerRef: mediaContainerRef } = useButtonAnimation({ animationType: mediaAnimation });
+const ContactSplitForm: React.FC = ({
+ title,
+ description,
+ inputs,
+ imageSrc,
+ className = '',
+}) => {
+ const [formData, setFormData] = useState>({
+ ...inputs.reduce((acc, input) => ({ ...acc, [input.name]: '' }), {}),
+ });
- // Validate minimum inputs requirement
- if (inputs.length < 2) {
- throw new Error("ContactSplitForm requires at least 2 inputs");
- }
+ const handleChange = (e: React.ChangeEvent) => {
+ const { name, value } = e.target;
+ setFormData(prev => ({
+ ...prev,
+ [name]: value,
+ }));
+ };
- // Initialize form data dynamically
- const initialFormData: Record = {};
- inputs.forEach(input => {
- initialFormData[input.name] = "";
- });
- if (textarea) {
- initialFormData[textarea.name] = "";
- }
+ const handleSubmitClick = () => {
+ // Form submission logic would go here
+ console.log('Form data:', formData);
+ };
- const [formData, setFormData] = useState(initialFormData);
-
- const handleSubmit = async (e: React.FormEvent) => {
- e.preventDefault();
- try {
- await sendContactEmail({ formData });
- console.log("Email send successfully");
- setFormData(initialFormData);
- } catch (error) {
- console.error("Failed to send email:", error);
- }
- };
-
- const getButtonConfigProps = () => {
- if (theme.defaultButtonVariant === "hover-bubble") {
- return { bgClassName: "w-full" };
- }
- if (theme.defaultButtonVariant === "icon-arrow") {
- return { className: "justify-between" };
- }
- return {};
- };
-
- const formContent = (
-
-
+ const handleSubmitClick = () => {
+ // Form submission logic would go here
+ console.log('Form data:', formData);
+ };
+
+ return (
+
+
-
- );
+ )}
+
+ );
};
-ContactSplit.displayName = "ContactSplit";
-
-export default ContactSplit;
+export default ContactSplit;
\ No newline at end of file
diff --git a/src/components/sections/contact/ContactSplitForm.tsx b/src/components/sections/contact/ContactSplitForm.tsx
index 15ed065..f8b8b57 100644
--- a/src/components/sections/contact/ContactSplitForm.tsx
+++ b/src/components/sections/contact/ContactSplitForm.tsx
@@ -1,214 +1,80 @@
-"use client";
+'use client';
-import { useState } from "react";
-import TextAnimation from "@/components/text/TextAnimation";
-import Button from "@/components/button/Button";
-import Input from "@/components/form/Input";
-import Textarea from "@/components/form/Textarea";
-import MediaContent from "@/components/shared/MediaContent";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import { useButtonAnimation } from "@/components/hooks/useButtonAnimation";
-import { getButtonProps } from "@/lib/buttonUtils";
-import type { AnimationType } from "@/components/text/types";
-import type { ButtonAnimationType } from "@/types/button";
-import {sendContactEmail} from "@/utils/sendContactEmail";
+import React, { useState } from 'react';
-export interface InputField {
- name: string;
- type: string;
- placeholder: string;
- required?: boolean;
- className?: string;
-}
-
-export interface TextareaField {
- name: string;
- placeholder: string;
- rows?: number;
- required?: boolean;
- className?: string;
+interface FormInput {
+ name: string;
+ type: string;
+ placeholder: string;
+ required?: boolean;
}
interface ContactSplitFormProps {
- title: string;
- description: string;
- inputs: InputField[];
- textarea?: TextareaField;
- useInvertedBackground: boolean;
- imageSrc?: string;
- videoSrc?: string;
- imageAlt?: string;
- videoAriaLabel?: string;
- mediaPosition?: "left" | "right";
- mediaAnimation: ButtonAnimationType;
- buttonText?: string;
- onSubmit?: (data: Record
+
+ {imageSrc && (
+ {title}
+{description}
+ +
+ 
- );
-
- const mediaContent = (
-
-
- );
-
- return (
-
-
-
- {mediaPosition === "left" && mediaContent}
- {contactContent}
- {mediaPosition === "right" && mediaContent}
-
-
-