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

refactor: Add new icons and improve layout of Features component

Browse Source
This commit is contained in:
mauro 🤙
2024-08-12 11:10:00 +00:00
parent 89356005ca
commit 1c713a8cb7
1 changed files with 32 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/features.tsx
View File

@@ -13,8 +13,8 @@ import {
TableHeader, TableHeader,
TableRow, TableRow,
} from "./ui/table"; } from "./ui/table";
import { CheckIcon, XIcon } from "lucide-react"; import { CheckIcon, EyeIcon, EyeOffIcon, RabbitIcon, XIcon } from "lucide-react";
import { QuestionMarkIcon } from "@radix-ui/react-icons"; import { LockClosedIcon, QuestionMarkIcon } from "@radix-ui/react-icons";
import ShineBorder from "./ui/shine-border"; import ShineBorder from "./ui/shine-border";
import SparklesText from "./ui/sparkles-text"; import SparklesText from "./ui/sparkles-text";
@@ -161,6 +161,36 @@ export default function Features() {
</Table> </Table>
</div> </div>
</ShineBorder> </ShineBorder>
<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">
<RabbitIcon className="mx-auto w-32 h-32" />
<div className="flex flex-col max-w-lg">
<h1 className="text-5xl font-bold flex items-center">Built for <SparklesText className="mx-2" text="speed" /></h1>
<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 />
We have been working and benchmarking Zen to make it the fastest browser out there.
</p>
</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 max-w-lg">
<h1 className="text-5xl font-bold flex items-center">Privacy is <SparklesText className="mx-2" text="key" /></h1>
<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.
</p>
</div>
<EyeOffIcon className="mx-auto w-32 h-32" />
</div>
<div className="flex flex-col lg:flex-row w-full mt-52 p-5 lg:p-0 justify-between items-center">
<LockClosedIcon className="mx-auto w-32 h-32" />
<div className="flex flex-col max-w-lg">
<h1 className="text-5xl font-bold flex items-center">Security is <SparklesText className="mx-2" text="important" /></h1>
<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.
</p>
</div>
</div>
</div>
<div className="my-40 w-full flex items-center justify-center flex-col"> <div className="my-40 w-full flex items-center justify-center flex-col">
<h1 className="text-5xl text-center font-bold w-1/2">Want more?</h1> <h1 className="text-5xl text-center font-bold w-1/2">Want more?</h1>
<p className="text-muted-foreground text-center mt-3 w-1/2"> <p className="text-muted-foreground text-center mt-3 w-1/2">