From 09b5c7320c4f776a14b856b924eb65db78eb790d Mon Sep 17 00:00:00 2001
From: Kyle <yapazik.32@gmail.com>
Date: Tue, 24 Dec 2024 22:57:34 +0200
Subject: [PATCH 1/2] fix: fixes image sizing on 4k displays for home page

---
 src/components/Features.astro   | 2 +-
 src/components/HomeExtras.astro | 8 ++++----
 tailwind.config.mjs             | 1 +
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/Features.astro b/src/components/Features.astro
index e44bb908..d067820d 100644
--- a/src/components/Features.astro
+++ b/src/components/Features.astro
@@ -75,7 +75,7 @@ import { getTitleAnimation, getZoomInAnimation } from '../animations'
         </div>
       </motion.div>
     </div>
-    <div class="relative lg:w-2/3 lg:pl-20 items-center m-auto">
+    <div class="relative lg:w-2/3 3xl:w-2/5 lg:pl-20 items-center m-auto">
       <div class="ml-auto" id="feature-list-image">
         <Image src={browserWorkspaces} alt="Browser Workspaces" class="rounded-xl shadow border-4 border-white" />
         <Image src={browserCompactMode} alt="Browser Compact Mode" class="rounded-xl shadow border-4 border-white" />
diff --git a/src/components/HomeExtras.astro b/src/components/HomeExtras.astro
index e5791acd..c66e0d18 100644
--- a/src/components/HomeExtras.astro
+++ b/src/components/HomeExtras.astro
@@ -12,7 +12,7 @@ import { ArrowRight } from 'lucide-astro';
 
 <section
   id="customization"
-  class="flex w-full px-4 lg:px-12 xl:px-24 py-36 pt-24 gap-16 flex-col lg:flex-row relative overflow-y-hidden"
+  class="flex w-full 3xl:my-32 px-4 lg:px-12 xl:px-24 py-36 pt-24 gap-16 flex-col lg:flex-row relative overflow-y-hidden"
 >
   <div>
     <Title>Customizable<br class="md:hidden" /> to <br class="hidden md:block" />the last pixel</Title>
@@ -27,9 +27,9 @@ import { ArrowRight } from 'lucide-astro';
     </div>
   </div>
   <div class="relative ml-16 h-32 lg:mx-0 lg:w-1/2 flex" id="browser-images">
-    <Image src={browserCollapsed} alt="Zen browser" class="w-2/3 rounded-md shadow-md absolute top-[5%] left-[65%] -translate-x-1/2" />
-    <Image src={browseMultiToolbar} alt="Zen browser" class="w-2/3 rounded-md mx-auto absolute top-1/2 left-1/2 transform -translate-x-1/2" />
-    <Image src={browserSingleToolbar} alt="Zen browser" class="w-2/3 rounded-md shadow-md absolute top-[15%] left-[10%] z-10 -translate-x-1/2" />
+    <Image src={browserCollapsed} alt="Zen browser" class="w-2/3 3xl:w-1/3 rounded-md 3xl:rounded-lg shadow-md absolute top-[5%] left-[65%] -translate-x-1/2" />
+    <Image src={browseMultiToolbar} alt="Zen browser" class="w-2/3 3xl:w-1/3 rounded-md 3xl:rounded-lg mx-auto absolute top-1/2 left-1/2 3xl:left-[55%] transform -translate-x-1/2" />
+    <Image src={browserSingleToolbar} alt="Zen browser" class="w-2/3 3xl:w-1/3 rounded-md 3xl:rounded-lg shadow-md absolute top-[15%] left-[10%] 3xl:left-[35%] z-10 -translate-x-1/2" />
   </div>
 </section>
 <style>
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index 6379b180..28a94d89 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -7,6 +7,7 @@ export default {
 			screens: {
 				'-md': '@media (min-width: 768px)',
 				'-lg': '@media (min-width: 1024px)',
+				'3xl': '2560px'
 			},
 			colors: {
 				"paper": "var(--zen-paper)",

From f33dc03d36be79da1ec49aff68b42d7688e7ded2 Mon Sep 17 00:00:00 2001
From: Kyle <yapazik.32@gmail.com>
Date: Sun, 29 Dec 2024 22:16:33 +0200
Subject: [PATCH 2/2] fixed features image size

---
 src/components/Features.astro   | 2 +-
 src/components/HomeExtras.astro | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Features.astro b/src/components/Features.astro
index d067820d..a2523f7c 100644
--- a/src/components/Features.astro
+++ b/src/components/Features.astro
@@ -75,7 +75,7 @@ import { getTitleAnimation, getZoomInAnimation } from '../animations'
         </div>
       </motion.div>
     </div>
-    <div class="relative lg:w-2/3 3xl:w-2/5 lg:pl-20 items-center m-auto">
+    <div class="relative lg:w-2/3 3xl:w-1/2 lg:pl-20 items-center m-auto">
       <div class="ml-auto" id="feature-list-image">
         <Image src={browserWorkspaces} alt="Browser Workspaces" class="rounded-xl shadow border-4 border-white" />
         <Image src={browserCompactMode} alt="Browser Compact Mode" class="rounded-xl shadow border-4 border-white" />
diff --git a/src/components/HomeExtras.astro b/src/components/HomeExtras.astro
index c66e0d18..45542483 100644
--- a/src/components/HomeExtras.astro
+++ b/src/components/HomeExtras.astro
@@ -12,7 +12,7 @@ import { ArrowRight } from 'lucide-astro';
 
 <section
   id="customization"
-  class="flex w-full 3xl:my-32 px-4 lg:px-12 xl:px-24 py-36 pt-24 gap-16 flex-col lg:flex-row relative overflow-y-hidden"
+  class="flex w-full px-4 lg:px-12 xl:px-24 py-36 pt-24 gap-16 flex-col lg:flex-row relative overflow-y-hidden"
 >
   <div>
     <Title>Customizable<br class="md:hidden" /> to <br class="hidden md:block" />the last pixel</Title>