Merge version_3 into main

Merge version_3 into main

src/app/page.tsx

@@ -4,11 +4,22 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
 import HeroSplit from "@/components/sections/hero/HeroSplit";
 import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
-import ContactSplit from "@/components/sections/contact/ContactSplit";
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
 import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
 import { CheckCircle, Send, Zap } from "lucide-react";
+import { useState } from "react";
 
 export default function LandingPage() {
+  const [formData, setFormData] = useState<Record<string, string>>({
+    recipient_email: "",    message: ""});
+
+  const handleSubmit = (data: Record<string, string>) => {
+    setFormData(data);
+    // Here you would handle sending the email with the provided data
+    // Example: send to your backend with data.recipient_email and data.message
+    console.log("Email form submitted:", data);
+  };
+
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
@@ -74,19 +85,23 @@ export default function LandingPage() {
       </div>
 
       <div id="contact" data-section="contact">
-        <ContactSplit
-          tag="Send Now"
-          tagIcon={Send}
-          tagAnimation="slide-up"
+        <ContactSplitForm
           title="Compose Your Email"
           description="Fill in the recipient's email address and type your message. That's all you need to send an email. Clean, simple, and effective communication."
-          background={{ variant: "plain" }}
+          inputs={[
+            {
+              name: "recipient_email",              type: "email",              placeholder: "recipient@example.com",              required: true
+            }
+          ]}
+          textarea={{
+            name: "message",            placeholder: "Type your message here...",            rows: 5,
+            required: true
+          }}
           useInvertedBackground={false}
-          inputPlaceholder="recipient@example.com"
-          buttonText="Send Email"
-          termsText="Your email will be sent securely. We respect your privacy."
           mediaAnimation="opacity"
           mediaPosition="right"
+          buttonText="Send Email"
+          onSubmit={handleSubmit}
         />
       </div>