Resolve merge conflicts

1 files changed, 109 insertions, 0 deletions

diff --git a/components/flexibleForm.js b/components/flexibleForm.js
new file mode 100644
index 0000000..22a907f
--- /dev/null
+++ b/components/flexibleForm.js
@@ -0,0 +1,109 @@
+import React from 'react';
+import Container from "./container";
+import Image from 'next/image';
+import { useRouter } from "next/router";
+
+const FlexibleForm = ({ imgPos, data, route}) => {
+    const router = useRouter();
+
+    const handleSubmit = async (event) => {
+        event.preventDefault();
+        const formData = new FormData(event.target);
+
+        try {
+            const response = await fetch(data.formAction, {
+                method: data.formMethod,
+                body: JSON.stringify(Object.fromEntries(formData)),
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+            });
+
+            if (!response.ok) {
+                throw new Error(response.text());
+            }
+
+            console.log('Form submitted successfully');
+            if (route) {
+                router.push(route);
+            }
+        } catch (error) {
+            console.error('Error submitting form:', error);
+        }
+    }
+
+
+    const renderImage = (
+        <div className={`flex items-center justify-center w-full lg:w-1/2 hidden lg:flex ${imgPos === "right" ? "lg:order-1" : ""}`}>
+            <div>
+                <Image
+                    src={data.image}
+                    width="521"
+                    height="auto"
+                    alt="Benefits"
+                    className={"object-cover"}
+                    placeholder="blur"
+                    blurDataURL={data.image.src}
+                />
+            </div>
+        </div>
+    );
+
+    const renderForm = (
+        <div className={`flex items-center justify-center w-full lg:w-1/2 ${data.imgPos === "right" ? "lg:justify-end" : ""}`}>
+            <div>
+                <div className="flex flex-col w-full mt-4">
+                    <h3 className="max-w-2xl mt-3 text-3xl font-bold leading-snug tracking-tight text-gray-800 lg:leading-tight lg:text-4xl dark:text-white">
+                        {data.title}
+                    </h3>
+                    <p className="max-w-2xl text-lg leading-normal text-gray-500 lg:text-xl xl:text-xl dark:text-gray-300">
+                        {data.subtitle}
+                    </p>
+                </div>
+                <div className="mt-5 sm:mx-auto sm:w-full sm:max-w-sm">
+                    <form onSubmit={handleSubmit}  id="testform" className="space-y-3" action={data.formAction} method={data.formMethod}>
+                        {data.formFields.map((field, index) => (
+                            <div key={index}>
+                                <label htmlFor={field.name} className="block text-sm font-medium leading-6 text-gray-900">{field.label}</label>
+                                <div className="mt-0">
+                                    <input
+                                        id={field.name}
+                                        name={field.name}
+                                        type={field.type}
+                                        autoComplete={field.autoComplete}
+                                        required={field.required}
+                                        className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                                    />
+                                </div>
+                            </div>
+                        ))}
+                        <div>
+                            <button type="submit" className="flex w-full justify-center rounded-md bg-indigo-600 px-10 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+                                {data.ctaText || "Submit"}
+                            </button>
+                        </div>
+                    </form>
+                    {data.underneathButton && (
+                        <div className="mt-3 text-center">
+                            <a href={data.underneathButton.url} className="text-sm text-indigo-600 hover:text-indigo-500">{data.underneathButton.text}</a>
+                        </div>
+                    )}
+                    {data.ctaLink && (
+                        <p className="mt-10 text-center text-sm text-gray-500">
+                            {data.ctaLink.text} <a href={data.ctaLink.url} className="font-semibold leading-6 text-indigo-600 hover:text-indigo-500">{data.ctaLink.linkText}</a>
+                        </p>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+
+    return (
+        <Container className="flex flex-wrap mb-0 lg:gap-10 lg:flex-nowrap">
+            {imgPos === "left" ? renderImage : renderForm}
+            {imgPos === "left" ? renderForm : renderImage}
+        </Container>
+    );
+};
+
+export default FlexibleForm;