refactor: Improve responsiveness of Features component layout

This commit is contained in:
mauro 🤙
2024-08-12 11:30:01 +00:00
parent 1c713a8cb7
commit 680384f446

View File

@@ -162,29 +162,29 @@ export default function Features() {
</div> </div>
</ShineBorder> </ShineBorder>
<div className="flex flex-col items-center justify-center w-full mt-40"> <div className="flex flex-col items-center justify-center w-full mt-40">
<div className="flex flex-col lg:flex-row w-full mt-4 p-5 lg:p-0 justify-between items-center"> <div className="flex flex-col lg:flex-row w-full mt-4 p-5 justify-between items-center">
<RabbitIcon className="mx-auto w-32 h-32" /> <RabbitIcon className="mx-auto hidden md:block w-32 h-32" />
<div className="flex flex-col max-w-lg"> <div className="flex flex-col max-w-lg text-center md:text-start">
<h1 className="text-5xl font-bold flex items-center">Built for <SparklesText className="mx-2" text="speed" /></h1> <h1 className="text-5xl font-bold flex items-center flex-col md:flex-row">Built for <SparklesText className="md:mx-2" text="speed" /></h1>
<p className="text-muted-foreground mt-3"> <p className="text-muted-foreground mt-3">
Zen is built with speed in mind. Improving release after release, with new optimizations and technologies to make your browsing experience faster.<br /><br /> Zen is built with speed in mind. Improving release after release, with new optimizations and technologies to make your browsing experience faster.<br /><br />
We have been working and benchmarking Zen to make it the fastest browser out there. We have been working and benchmarking Zen to make it the fastest browser out there.
</p> </p>
</div> </div>
</div> </div>
<div className="flex flex-col lg:flex-row w-full mt-52 p-5 lg:p-0 justify-between items-center"> <div className="flex flex-col lg:flex-row w-full mt-52 p-5 justify-between items-center">
<div className="flex flex-col max-w-lg"> <div className="flex flex-col max-w-lg text-center md:text-start">
<h1 className="text-5xl font-bold flex items-center">Privacy is <SparklesText className="mx-2" text="key" /></h1> <h1 className="text-5xl font-bold flex flex-col md:flex-row items-center">Privacy is <SparklesText className="md:mx-2" text="key" /></h1>
<p className="text-muted-foreground mt-3"> <p className="text-muted-foreground mt-3">
Zen is designed with privacy in mind. We found the perfect balance between privacy and functionality, so you can browse the web without worrying about your data. Zen is designed with privacy in mind. We found the perfect balance between privacy and functionality, so you can browse the web without worrying about your data.
</p> </p>
</div> </div>
<EyeOffIcon className="mx-auto w-32 h-32" /> <EyeOffIcon className="mx-auto hidden md:block w-32 h-32" />
</div> </div>
<div className="flex flex-col lg:flex-row w-full mt-52 p-5 lg:p-0 justify-between items-center"> <div className="flex flex-col lg:flex-row w-full mt-52 p-5 justify-between items-center">
<LockClosedIcon className="mx-auto w-32 h-32" /> <LockClosedIcon className="mx-auto hidden md:block w-32 h-32" />
<div className="flex flex-col max-w-lg"> <div className="flex flex-col text-center md:text-start max-w-lg">
<h1 className="text-5xl font-bold flex items-center">Security is <SparklesText className="mx-2" text="important" /></h1> <h1 className="text-5xl font-bold items-center flex-col">Security is <SparklesText className="inline" text="important" /></h1>
<p className="text-muted-foreground mt-3"> <p className="text-muted-foreground mt-3">
Zen is built with security in mind. We use the latest technologies and security measures that no other firefox-based browser offers. Zen is built with security in mind. We use the latest technologies and security measures that no other firefox-based browser offers.
</p> </p>