From 204cc8f5122b8d648a0eb906bc6e546a44e125cd Mon Sep 17 00:00:00 2001
From: Mauro Balades <mauro.balades@tutanota.com>
Date: Sat, 17 Aug 2024 22:47:53 +0200
Subject: [PATCH] chore: Update Features component to include responsive layout
 for larger screens

---
 src/components/features.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/features.tsx b/src/components/features.tsx
index fb6e225..0e35238 100644
--- a/src/components/features.tsx
+++ b/src/components/features.tsx
@@ -280,8 +280,9 @@ export default function Features() {
         <div className="relative w-full flex items-center">
           <div className={ny("flex flex-col xl:flex-row w-full mt-4 p-5 justify-between items-center w-fit transition-all duration-500 absolute", feature === 0 ? "translate-x-0 opacity-100" : "translate-x-[-100%] opacity-0")}>
             <div className="flex flex-col max-w-xl text-center md:text-start">
-              <h1 className="text-5xl xl:text-5xl font-bold">Built for</h1>
-              <SparklesText className="!text-5xl xl:!text-5xl" text="speed" />
+              <h1 className="text-5xl xl:text-5xl font-bold flex flex-col lg:flex-row">Built for
+                <SparklesText className="!text-5xl xl:!text-5xl" text="speed" />
+              </h1>
               <p className="text-muted-foreground mt-3">
               Zen is engineered for speed, consistently outperforming competitors with every release, ensuring a faster browsing experience.
               </p>
@@ -290,8 +291,9 @@ export default function Features() {
           </div>
           <div className={ny("flex flex-col xl:flex-row w-full mt-4 p-5 justify-between items-center w-fit transition-all duration-500 absolute", feature === 1 ? "translate-x-0 opacity-100" : "translate-x-[-100%] opacity-0")}>
             <div className="flex flex-col max-w-xl text-center md:text-start">
-              <h1 className="text-5xl xl:text-5xl font-bold">Privacy is</h1>
-              <SparklesText className="!text-5xl xl:!text-5xl" text="key" />
+              <h1 className="text-5xl xl:text-5xl font-bold flex flex-col lg:flex-row">Privacy is
+                <SparklesText className="!text-5xl xl:!text-5xl" text="key" />
+              </h1>
               <p className="text-muted-foreground mt-3">
               Zen strikes the perfect balance between privacy and usability, allowing you to browse without compromising your data.
               </p>
@@ -300,8 +302,9 @@ export default function Features() {
           </div>
           <div className={ny("flex flex-col xl:flex-row w-full mt-4 p-5 justify-between items-center w-fit transition-all duration-500 absolute", feature === 2 ? "translate-x-0 opacity-100" : "translate-x-[-100%] opacity-0")}>
             <div className="flex flex-col text-center md:text-start max-w-xl">
-              <h1 className="text-5xl xl:text-5xl font-bold">Security is</h1>
-              <SparklesText className="text-5xl xl:!text-5xl" text="important" />
+              <h1 className="text-5xl xl:text-5xl font-bold flex flex-col lg:flex-row">Security is
+                <SparklesText className="text-5xl xl:!text-5xl" text="important" />
+              </h1>
               <p className="text-muted-foreground mt-3">
               Zen incorporates advanced security technologies that outshine other Firefox-based browsers, keeping you safe online.
               </p>