From aa5c054d83321759b34fe64d5c3132a61e47442b Mon Sep 17 00:00:00 2001
From: oyerohabib <oyerohabib@yahoo.com>
Date: Sun, 25 Aug 2024 08:51:01 +0100
Subject: [PATCH] feat: added marketing videos to the how it works section, and
 improved the layout

---
 .../layouts/homepage/HowItWorks.tsx           | 53 +++++++++++++------
 1 file changed, 36 insertions(+), 17 deletions(-)

diff --git a/src/components/layouts/homepage/HowItWorks.tsx b/src/components/layouts/homepage/HowItWorks.tsx
index 5bc3fb226..ba87f06cf 100644
--- a/src/components/layouts/homepage/HowItWorks.tsx
+++ b/src/components/layouts/homepage/HowItWorks.tsx
@@ -7,8 +7,9 @@ const 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">
+        <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")}
@@ -18,11 +19,35 @@ const HowItWorks = () => {
             </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>
+          {/* First Video and Pre-Built Section */}
+          <div className="flex flex-col space-y-10">
+            <video
+              src={
+                "https://res.cloudinary.com/oyerotech-herokuapp-com/video/upload/v1724570490/Boilerplate_Template_Video_1_iixcin.mp4"
+              }
+              controls
+              className="h-auto w-full rounded-lg shadow-lg"
+              style={{ maxHeight: "400px", maxWidth: "100%" }}
+            />
+          </div>
+        </div>
+
+        <div className="mt-16 grid grid-cols-1 gap-10 lg:grid-cols-2">
+          {/* Second Video and Scalable/Easy Sections */}
+          <div className="order-2 flex flex-col space-y-10 lg:order-1">
+            <video
+              src={
+                "https://res.cloudinary.com/oyerotech-herokuapp-com/video/upload/v1724570524/How-does-it-work_Video_for_HNG_Boilerplate_mh6p6b.mp4"
+              }
+              controls
+              className="h-auto w-full rounded-lg shadow-lg"
+              style={{ maxHeight: "400px", maxWidth: "100%" }}
+            />
+          </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"
@@ -38,11 +63,8 @@ const HowItWorks = () => {
                 </small>
               </div>
             </div>
-
-            <div className="mb-9 flex space-x-5">
-              <div>
-                <Scalable />
-              </div>
+            <div className="flex items-center space-x-5">
+              <Scalable />
               <div>
                 <h3
                   className="font-inter mb-2 text-lg font-bold md:text-xl"
@@ -58,11 +80,8 @@ const HowItWorks = () => {
                 </small>
               </div>
             </div>
-
-            <div className="mb-9 flex space-x-5">
-              <div>
-                <Easy />
-              </div>
+            <div className="flex items-center space-x-5">
+              <Easy />
               <div>
                 <h3
                   className="font-inter mb-2 text-lg font-bold md:text-xl"