From f61b0621a25bcf868c25171218a6d8d0b59e106d Mon Sep 17 00:00:00 2001
From: MarconLP <13001502+MarconLP@users.noreply.github.com>
Date: Sun, 2 Jul 2023 08:54:25 +0200
Subject: [PATCH] re-design how does snapify work landing page section

---
 src/pages/index.tsx | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index e2bc61b..c07881d 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -161,17 +161,8 @@ const Home: NextPage = () => {
                 Get started easily. Share video instantly.
               </span>
             </div>
-            <div className="mt-6 flex flex-col gap-x-6 lg:mt-16 lg:flex-row lg:gap-x-20">
-              <div className="mb-24 flex flex-1 items-center justify-center lg:mb-0">
-                <Image
-                  src="https://f003.backblazeb2.com/file/test-cloudflares/how+it+works.webp"
-                  width={600}
-                  height={575}
-                  alt="step description"
-                  unoptimized
-                />
-              </div>
-              <div className="flex flex-1 flex-col items-center justify-center gap-y-12">
+            <div className="mt-6 flex flex-col gap-x-6 xl:mt-16 xl:flex-row xl:gap-x-20">
+              <div className="mt-24 flex flex-1 flex-col items-center justify-center gap-8 xl:flex-row xl:items-start xl:gap-12">
                 {[
                   {
                     icon: (
@@ -202,9 +193,9 @@ const Home: NextPage = () => {
                 ].map(({ title, description, icon }) => (
                   <div
                     key={title}
-                    className="flex w-full max-w-[600px] gap-x-4 lg:max-w-none"
+                    className="flex w-full max-w-[600px] gap-x-4 xl:max-w-none"
                   >
-                    <div className="">{icon}</div>
+                    <div className="shrink-0">{icon}</div>
                     <div className="flex flex-col">
                       <span className="mb-4 text-[32px]">{title}</span>
                       <span>{description}</span>