From 219369c9a055632d7e294851ebb3f7770b1d3847 Mon Sep 17 00:00:00 2001
From: phoenix <ayomikuntemitope.araoye@gmail.com>
Date: Sun, 25 Aug 2024 09:20:10 +0100
Subject: [PATCH 1/2] chore: updated video to auto play

---
 .../layouts/homepage/HowItWorks.tsx           | 270 ++++++++++++------
 1 file changed, 186 insertions(+), 84 deletions(-)

diff --git a/src/components/layouts/homepage/HowItWorks.tsx b/src/components/layouts/homepage/HowItWorks.tsx
index 0b0656033..c0d78234a 100644
--- a/src/components/layouts/homepage/HowItWorks.tsx
+++ b/src/components/layouts/homepage/HowItWorks.tsx
@@ -1,3 +1,97 @@
+// import { useTranslations } from "next-intl";
+
+// import { Easy, Prebuilt, Scalable } from "./svgs";
+
+// const HowItWorks = () => {
+//   const t = useTranslations("howItWorks");
+//   return (
+//     <>
+
+//       <div className="bg-[#ffffff] py-20">
+//         <div className="mx-auto max-w-7xl px-5 md:px-10 lg:px-10 xl:px-10">
+//           <div className="flex flex-col items-center lg:flex-row">
+//             <div className="w-full md:pr-10 lg:w-3/5 lg:pr-20">
+//               <h1 className="font-inter text-3xl font-bold leading-snug md:text-4xl md:leading-tight">
+//                 <span className="text-primary">
+//                   {t("howItWorksTitlePrefix")}
+//                 </span>{" "}
+//                 {t("howItWorksTitleHighlight")}
+//               </h1>
+//               <p className="font-inter mb-12 mt-6 text-lg font-normal">
+//                 {t("howItWorksDescription")}
+//               </p>
+//             </div>
+
+//             <div className="flex w-full flex-col items-end md:items-start lg:w-2/5">
+//               <div className="mb-9 flex space-x-5">
+//                 <div>
+//                   <Prebuilt />
+//                 </div>
+//                 <div>
+//                   <h3
+//                     className="font-inter mb-2 text-lg font-bold md:text-xl"
+//                     data-testid="prebuilt"
+//                   >
+//                     {t("prebuiltTitle")}
+//                   </h3>
+//                   <small
+//                     className="font-inter text-base font-normal"
+//                     data-testid="section"
+//                   >
+//                     {t("prebuiltDescription")}
+//                   </small>
+//                 </div>
+//               </div>
+
+//               <div className="mb-9 flex space-x-5">
+//                 <div>
+//                   <Scalable />
+//                 </div>
+//                 <div>
+//                   <h3
+//                     className="font-inter mb-2 text-lg font-bold md:text-xl"
+//                     data-testid="scalable"
+//                   >
+//                     {t("scalableTitle")}
+//                   </h3>
+//                   <small
+//                     className="font-inter text-base font-normal"
+//                     data-testid="boilerplate"
+//                   >
+//                     {t("scalableDescription")}
+//                   </small>
+//                 </div>
+//               </div>
+
+//               <div className="mb-9 flex space-x-5">
+//                 <div>
+//                   <Easy />
+//                 </div>
+//                 <div>
+//                   <h3
+//                     className="font-inter mb-2 text-lg font-bold md:text-xl"
+//                     data-testid="easy"
+//                   >
+//                     {t("easyTitle")}
+//                   </h3>
+//                   <small
+//                     className="font-inter text-base font-normal"
+//                     data-testid="tailor"
+//                   >
+//                     {t("easyDescription")}
+//                   </small>
+//                 </div>
+//               </div>
+//             </div>
+//           </div>
+//         </div>
+//       </div>
+//     </>
+//   );
+// };
+
+// export default HowItWorks;
+
 import { useTranslations } from "next-intl";
 
 import { Easy, Prebuilt, Scalable } from "./svgs";
@@ -5,98 +99,106 @@ import { Easy, Prebuilt, Scalable } from "./svgs";
 const HowItWorks = () => {
   const t = useTranslations("howItWorks");
   return (
-    <>
-      <video
-        src={
-          "https://res.cloudinary.com/dif45jmwd/video/upload/v1724572073/aivideo/nofcx7ddauggumuxhb3h.mp4"
-        }
-        controls
-        muted
-        autoPlay
-        loop
-        className="min-w-lg mx-auto my-[50px] w-full max-w-2xl rounded-lg"
-        style={{ height: "350px" }}
-      />
-      <div className="bg-[#ffffff] py-20">
-        <div className="mx-auto max-w-7xl px-5 md:px-10 lg:px-10 xl:px-10">
-          <div className="flex flex-col items-center lg:flex-row">
-            <div className="w-full md:pr-10 lg:w-3/5 lg:pr-20">
-              <h1 className="font-inter text-3xl font-bold leading-snug md:text-4xl md:leading-tight">
-                <span className="text-primary">
-                  {t("howItWorksTitlePrefix")}
-                </span>{" "}
-                {t("howItWorksTitleHighlight")}
-              </h1>
-              <p className="font-inter mb-12 mt-6 text-lg font-normal">
-                {t("howItWorksDescription")}
-              </p>
-            </div>
+    <div className="bg-[#ffffff] py-20">
+      <div className="mx-auto max-w-7xl px-5 md:px-10 lg:px-10 xl:px-10">
+        <div className="grid grid-cols-1 gap-10 lg:grid-cols-2">
+          {/* Text Content */}
+          <div className="flex flex-col justify-center">
+            <h1 className="font-inter text-3xl font-bold leading-snug md:text-4xl md:leading-tight">
+              <span className="text-primary">{t("howItWorksTitlePrefix")}</span>{" "}
+              {t("howItWorksTitleHighlight")}
+            </h1>
+            <p className="font-inter mb-12 mt-6 text-lg font-normal">
+              {t("howItWorksDescription")}
+            </p>
+          </div>
 
-            <div className="flex w-full flex-col items-end md:items-start lg:w-2/5">
-              <div className="mb-9 flex space-x-5">
-                <div>
-                  <Prebuilt />
-                </div>
-                <div>
-                  <h3
-                    className="font-inter mb-2 text-lg font-bold md:text-xl"
-                    data-testid="prebuilt"
-                  >
-                    {t("prebuiltTitle")}
-                  </h3>
-                  <small
-                    className="font-inter text-base font-normal"
-                    data-testid="section"
-                  >
-                    {t("prebuiltDescription")}
-                  </small>
-                </div>
-              </div>
+          <div className="flex flex-col space-y-10">
+            <video
+              src={
+                "https://res.cloudinary.com/dif45jmwd/video/upload/v1724572073/aivideo/nofcx7ddauggumuxhb3h.mp4"
+              }
+              controls
+              muted
+              autoPlay
+              loop
+              className="h-auto w-full rounded-lg shadow-lg"
+              style={{ maxHeight: "400px", maxWidth: "100%" }}
+            />
+          </div>
+        </div>
 
-              <div className="mb-9 flex space-x-5">
-                <div>
-                  <Scalable />
-                </div>
-                <div>
-                  <h3
-                    className="font-inter mb-2 text-lg font-bold md:text-xl"
-                    data-testid="scalable"
-                  >
-                    {t("scalableTitle")}
-                  </h3>
-                  <small
-                    className="font-inter text-base font-normal"
-                    data-testid="boilerplate"
-                  >
-                    {t("scalableDescription")}
-                  </small>
-                </div>
-              </div>
+        <div className="mt-16 grid grid-cols-1 gap-10 lg:grid-cols-2">
+          <div className="order-2 flex flex-col space-y-10 lg:order-1">
+            <video
+              src={
+                "https://res.cloudinary.com/dif45jmwd/video/upload/v1724573854/aivideo/dp61xuzfnqxqte8jwzk3.mp4"
+              }
+              controls
+              muted
+              autoPlay
+              loop
+              className="h-auto w-full rounded-lg shadow-lg"
+              style={{ maxHeight: "400px", maxWidth: "100%" }}
+            />
+          </div>
 
-              <div className="mb-9 flex space-x-5">
-                <div>
-                  <Easy />
-                </div>
-                <div>
-                  <h3
-                    className="font-inter mb-2 text-lg font-bold md:text-xl"
-                    data-testid="easy"
-                  >
-                    {t("easyTitle")}
-                  </h3>
-                  <small
-                    className="font-inter text-base font-normal"
-                    data-testid="tailor"
-                  >
-                    {t("easyDescription")}
-                  </small>
-                </div>
+          <div className="order-1 flex flex-col gap-8 lg:order-2">
+            <div className="flex items-center space-x-5">
+              <Prebuilt />
+              <div>
+                <h3
+                  className="font-inter mb-2 text-lg font-bold md:text-xl"
+                  data-testid="prebuilt"
+                >
+                  {t("prebuiltTitle")}
+                </h3>
+                <small
+                  className="font-inter text-base font-normal"
+                  data-testid="section"
+                >
+                  {t("prebuiltDescription")}
+                </small>
+              </div>
+            </div>
+            <div className="flex items-center space-x-5">
+              <Scalable />
+              <div>
+                <h3
+                  className="font-inter mb-2 text-lg font-bold md:text-xl"
+                  data-testid="scalable"
+                >
+                  {t("scalableTitle")}
+                </h3>
+                <small
+                  className="font-inter text-base font-normal"
+                  data-testid="boilerplate"
+                >
+                  {t("scalableDescription")}
+                </small>
+              </div>
+            </div>
+            <div className="flex items-center space-x-5">
+              <Easy />
+              <div>
+                <h3
+                  className="font-inter mb-2 text-lg font-bold md:text-xl"
+                  data-testid="easy"
+                >
+                  {t("easyTitle")}
+                </h3>
+                <small
+                  className="font-inter text-base font-normal"
+                  data-testid="tailor"
+                >
+                  {t("easyDescription")}
+                </small>
               </div>
             </div>
           </div>
         </div>
       </div>
-    </>
+    </div>
   );
 };
 

From 369c0927bce0132aad35c5ddf99ff4a85587133d Mon Sep 17 00:00:00 2001
From: phoenix <ayomikuntemitope.araoye@gmail.com>
Date: Sun, 25 Aug 2024 09:21:56 +0100
Subject: [PATCH 2/2] chore: updated video to auto play

---
 .../layouts/homepage/HowItWorks.tsx           | 94 -------------------
 1 file changed, 94 deletions(-)

diff --git a/src/components/layouts/homepage/HowItWorks.tsx b/src/components/layouts/homepage/HowItWorks.tsx
index c0d78234a..1b96b066c 100644
--- a/src/components/layouts/homepage/HowItWorks.tsx
+++ b/src/components/layouts/homepage/HowItWorks.tsx
@@ -1,97 +1,3 @@
-// import { useTranslations } from "next-intl";
-
-// import { Easy, Prebuilt, Scalable } from "./svgs";
-
-// const HowItWorks = () => {
-//   const t = useTranslations("howItWorks");
-//   return (
-//     <>
-
-//       <div className="bg-[#ffffff] py-20">
-//         <div className="mx-auto max-w-7xl px-5 md:px-10 lg:px-10 xl:px-10">
-//           <div className="flex flex-col items-center lg:flex-row">
-//             <div className="w-full md:pr-10 lg:w-3/5 lg:pr-20">
-//               <h1 className="font-inter text-3xl font-bold leading-snug md:text-4xl md:leading-tight">
-//                 <span className="text-primary">
-//                   {t("howItWorksTitlePrefix")}
-//                 </span>{" "}
-//                 {t("howItWorksTitleHighlight")}
-//               </h1>
-//               <p className="font-inter mb-12 mt-6 text-lg font-normal">
-//                 {t("howItWorksDescription")}
-//               </p>
-//             </div>
-
-//             <div className="flex w-full flex-col items-end md:items-start lg:w-2/5">
-//               <div className="mb-9 flex space-x-5">
-//                 <div>
-//                   <Prebuilt />
-//                 </div>
-//                 <div>
-//                   <h3
-//                     className="font-inter mb-2 text-lg font-bold md:text-xl"
-//                     data-testid="prebuilt"
-//                   >
-//                     {t("prebuiltTitle")}
-//                   </h3>
-//                   <small
-//                     className="font-inter text-base font-normal"
-//                     data-testid="section"
-//                   >
-//                     {t("prebuiltDescription")}
-//                   </small>
-//                 </div>
-//               </div>
-
-//               <div className="mb-9 flex space-x-5">
-//                 <div>
-//                   <Scalable />
-//                 </div>
-//                 <div>
-//                   <h3
-//                     className="font-inter mb-2 text-lg font-bold md:text-xl"
-//                     data-testid="scalable"
-//                   >
-//                     {t("scalableTitle")}
-//                   </h3>
-//                   <small
-//                     className="font-inter text-base font-normal"
-//                     data-testid="boilerplate"
-//                   >
-//                     {t("scalableDescription")}
-//                   </small>
-//                 </div>
-//               </div>
-
-//               <div className="mb-9 flex space-x-5">
-//                 <div>
-//                   <Easy />
-//                 </div>
-//                 <div>
-//                   <h3
-//                     className="font-inter mb-2 text-lg font-bold md:text-xl"
-//                     data-testid="easy"
-//                   >
-//                     {t("easyTitle")}
-//                   </h3>
-//                   <small
-//                     className="font-inter text-base font-normal"
-//                     data-testid="tailor"
-//                   >
-//                     {t("easyDescription")}
-//                   </small>
-//                 </div>
-//               </div>
-//             </div>
-//           </div>
-//         </div>
-//       </div>
-//     </>
-//   );
-// };
-
-// export default HowItWorks;
-
 import { useTranslations } from "next-intl";
 
 import { Easy, Prebuilt, Scalable } from "./svgs";