From feb1eb8364b3fea3fdcf6f088cc9b978c87a1335 Mon Sep 17 00:00:00 2001
From: Dante Mogrim <dantemogrim@Enzo.local>
Date: Mon, 14 Oct 2024 18:32:52 +0200
Subject: [PATCH 1/2] Make buttons more responsive

On tablets and larger phone screens, these two were lacking a margin
setting (leading to a "squished" look). This commit resolves that.
---
 src/pages/LandingPage.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/LandingPage.jsx b/src/pages/LandingPage.jsx
index f4f4db8b..dfc66f9d 100644
--- a/src/pages/LandingPage.jsx
+++ b/src/pages/LandingPage.jsx
@@ -88,9 +88,9 @@ export default function LandingPage() {
                 </div>
               </div>
             </FadeIn>
-            <div className="mt-4 flex gap-4 justify-start font-semibold md:block md:mt-12">
+            <div className="flex items-start justify-start gap-4 mt-4 font-semibold md:mt-12">
               <button
-                className="bg-white shadow-lg px-9 py-3 rounded-full border border-zinc-200 hover:bg-zinc-100 transition-all duration-300"
+                className="py-3 transition-all duration-300 bg-white border rounded-full shadow-lg px-9 border-zinc-200 hover:bg-zinc-100"
                 onClick={() =>
                   document
                     .getElementById("learn-more")
@@ -101,7 +101,7 @@ export default function LandingPage() {
               </button>
               <Link
                 to="/editor"
-                className="md:mt-2 inline-block bg-sky-900 text-white ps-7 pe-6 py-3 rounded-full shadow-lg hover:bg-sky-800 transition-all duration-300"
+                className="inline-block py-3 text-white transition-all duration-300 rounded-full shadow-lg bg-sky-900 ps-7 pe-6 hover:bg-sky-800"
               >
                 Try it for yourself <i className="bi bi-arrow-right ms-1"></i>
               </Link>

From 249d11f9e5d8c9b9b3808ad2b89364c4d44e1712 Mon Sep 17 00:00:00 2001
From: Dante Mogrim <dantemogrim@Enzo.local>
Date: Tue, 15 Oct 2024 19:23:38 +0200
Subject: [PATCH 2/2] Make buttons more responsive w/o relying on flex

---
 src/pages/LandingPage.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/LandingPage.jsx b/src/pages/LandingPage.jsx
index dfc66f9d..9936d02d 100644
--- a/src/pages/LandingPage.jsx
+++ b/src/pages/LandingPage.jsx
@@ -88,9 +88,9 @@ export default function LandingPage() {
                 </div>
               </div>
             </FadeIn>
-            <div className="flex items-start justify-start gap-4 mt-4 font-semibold md:mt-12">
+            <div className="mt-4 font-semibold md:mt-12">
               <button
-                className="py-3 transition-all duration-300 bg-white border rounded-full shadow-lg px-9 border-zinc-200 hover:bg-zinc-100"
+                className="py-3 mb-4 xl:mb-0 mr-4 transition-all duration-300 bg-white border rounded-full shadow-lg px-9 border-zinc-200 hover:bg-zinc-100"
                 onClick={() =>
                   document
                     .getElementById("learn-more")