refactor: Remove NextJS from project

1 files changed, 77 insertions, 0 deletions

diff --git a/src/components/Benefits.js b/src/components/Benefits.js
new file mode 100644
index 0000000..ee90e84
--- /dev/null
+++ b/src/components/Benefits.js
@@ -0,0 +1,77 @@
+import React from "react";
+import Container from "./Container";
+
+const Benefits = (props) => {
+    const { data } = props;
+    return (
+        <>
+            <Container className="flex flex-wrap mb-20 lg:gap-10 lg:flex-nowrap ">
+                <div
+                    className={`flex items-center justify-center w-full lg:w-1/2 ${
+                        props.imgPos === "right" ? "lg:order-1" : ""
+                    }`}>
+                    <div>
+                        <img
+                            src={data.image}
+                            width="521"
+                            height="auto"
+                            alt="Benefits"
+                            className={"object-cover"}
+                            placeholder="blur"
+                            blurDataURL={data.image.src}
+                        />
+                    </div>
+                </div>
+
+                <div
+                    className={`flex flex-wrap items-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 py-4 text-lg leading-normal text-gray-500 lg:text-xl xl:text-xl dark:text-gray-300">
+                                {data.desc}
+                            </p>
+                        </div>
+
+                        <div className="w-full mt-5">
+                            {data.bullets.map((item, index) => (
+                                <Benefit key={index} title={item.title} icon={item.icon}>
+                                    {item.desc}
+                                </Benefit>
+                            ))}
+                        </div>
+                    </div>
+                </div>
+            </Container>
+        </>
+    );
+};
+
+function Benefit(props) {
+    return (
+        <>
+            <div className="flex items-start mt-8 space-x-3">
+                <div className="flex items-center justify-center flex-shrink-0 mt-1 bg-indigo-500 rounded-md w-11 h-11 ">
+                    {React.cloneElement(props.icon, {
+                        className: "w-7 h-7 text-indigo-50",
+                    })}
+                </div>
+                <div>
+                    <h4 className="text-xl font-medium text-gray-800 dark:text-gray-200">
+                        {props.title}
+                    </h4>
+                    <p className="mt-1 text-gray-500 dark:text-gray-400">
+                        {props.children}
+                    </p>
+                </div>
+            </div>
+        </>
+    );
+}
+
+export default Benefits;