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:40:38 +02:00
parent 4801564772
commit 88d8c51999
1 changed files with 7 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/features.tsx
View File

@@ -280,8 +280,8 @@ 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 lg: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 lg: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-lg text-center md:text-start"> <div className="flex flex-col max-w-lg text-center md:text-start">
<h1 className="text-5xl lg:text-8xl font-bold">Built for</h1> <h1 className="text-5xl lg:text-5xl font-bold">Built for</h1>
<SparklesText className="!text-5xl lg:!text-8xl" text="speed" /> <SparklesText className="!text-5xl lg:!text-5xl" text="speed" />
<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 +290,8 @@ export default function Features() {
</div> </div>
<div className={ny("flex flex-col lg: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 lg: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-lg text-center md:text-start"> <div className="flex flex-col max-w-lg text-center md:text-start">
<h1 className="text-5xl lg:text-8xl font-bold">Privacy is</h1> <h1 className="text-5xl lg:text-5xl font-bold">Privacy is</h1>
<SparklesText className="!text-5xl lg:!text-8xl" text="key" /> <SparklesText className="!text-5xl lg:!text-5xl" text="key" />
<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 +300,8 @@ export default function Features() {
</div> </div>
<div className={ny("flex flex-col lg: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 lg: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-lg"> <div className="flex flex-col text-center md:text-start max-w-lg">
<h1 className="text-5xl lg:text-8xl font-bold">Security is</h1> <h1 className="text-5xl lg:text-5xl font-bold">Security is</h1>
<SparklesText className="text-5xl lg:!text-8xl" text="important" /> <SparklesText className="text-5xl lg:!text-5xl" text="important" />
<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>
@@ -313,7 +313,7 @@ export default function Features() {
height={1000} height={1000}
width={800} width={800}
src="/color-preview.png" src="/color-preview.png"
className="rounded-xl mt-64 lg:mt-0 lg:ml-52 border-2 border-blue-500 shadow-lg lg:scale-[1.4] hover:scale-105 lg:hover:scale-[1.5] transition-all duration-200" className="rounded-xl mt-64 lg:mt-0 lg:ml-52 border-2 border-blue-500 shadow-lg lg:scale-[1.3] hover:scale-105 lg:hover:scale-[1.4] transition-all duration-200"
alt="" alt=""
/> />
</div> </div>