joshuafhiggins/realm-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: Update Features component to include responsive layout for larger screens

Browse Source
This commit is contained in:
Mauro Balades
2024-08-17 22:47:53 +02:00
parent 3f9702f4d7
commit 204cc8f512
1 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/features.tsx
View File

@@ -280,8 +280,9 @@ export default function Features() {
<div className="relative w-full flex items-center"> <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={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"> <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> <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" /> <SparklesText className="!text-5xl xl:!text-5xl" text="speed" />
</h1>
<p className="text-muted-foreground mt-3"> <p className="text-muted-foreground mt-3">
Zen is engineered for speed, consistently outperforming competitors with every release, ensuring a faster browsing experience. Zen is engineered for speed, consistently outperforming competitors with every release, ensuring a faster browsing experience.
</p> </p>
@@ -290,8 +291,9 @@ export default function Features() {
</div> </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={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"> <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> <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" /> <SparklesText className="!text-5xl xl:!text-5xl" text="key" />
</h1>
<p className="text-muted-foreground mt-3"> <p className="text-muted-foreground mt-3">
Zen strikes the perfect balance between privacy and usability, allowing you to browse without compromising your data. Zen strikes the perfect balance between privacy and usability, allowing you to browse without compromising your data.
</p> </p>
@@ -300,8 +302,9 @@ export default function Features() {
</div> </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={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"> <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> <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" /> <SparklesText className="text-5xl xl:!text-5xl" text="important" />
</h1>
<p className="text-muted-foreground mt-3"> <p className="text-muted-foreground mt-3">
Zen incorporates advanced security technologies that outshine other Firefox-based browsers, keeping you safe online. Zen incorporates advanced security technologies that outshine other Firefox-based browsers, keeping you safe online.
</p> </p>