refactor: Add new Feature component and update Features page

This commit is contained in:
Mauro Balades 2024-07-05 13:02:06 +02:00
parent 6a7e72eac8
commit 88d9b0e60b
4 changed files with 52 additions and 1 deletions

BIN
public/sidebar.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

BIN
public/split-view.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 29 KiB

View file

@ -0,0 +1,28 @@
import { ny } from "@/lib/utils";
export default function Feature({
title,
description,
children,
color,
}: {
title: string;
description: string;
children: React.ReactNode;
color: string;
}) {
return (
<div className="flex items-center relative mx-auto mt-32">
<div
className={"ml-32 flex flex-col justify-center max-w-96"}
>
<h1 className="text-6xl font-bold">{title}</h1>
<p className="text-muted-foreground mt-3">{description}</p>
</div>
<div className={ny(`ml-64 w-96 h-96 rounded-lg relative overflow-hidden`)} style={{ backgroundColor: color }}>
{children}
</div>
</div>
);
}

View file

@ -1,10 +1,33 @@
import Feature from "./feature";
import TextReveal from "./ui/text-reveal"; import TextReveal from "./ui/text-reveal";
export default function Features() { export default function Features() {
return ( return (
<div> <div>
<TextReveal text="Zen will change the way you browse the web. 🌟" /> <TextReveal text="Zen will change the way you browse the web. 🌟" />
TODO: Features here! <Feature
title="Split Views"
description="View multiple tabs at once. Divide your screen into multiple views and browse multiple websites at the same time."
color="#EEDBF9">
<img src="/split-view.png" alt="Split Views" className="w-64 h-64 absolute left-1/2 top-1/2" style={{
transform: "translate(-50%, -50%)"
}} />
</Feature>
<Feature
title="Sidebar"
description="Access websites with ease. The sidebar allows you to quickly access your favorite websites without disrupting your browsing experience."
color="#F5ED97">
<img src="/sidebar.png" alt="Split Views" className="w-80 h-80 absolute right-0 top-0" style={{
transform: "translate(5px, -5px)"
}} />
</Feature>
<Feature
title="Profiles"
description="Switch between profiles with ease. Create multiple profiles to keep your work and personal browsing separate."
color="#8CE7C0">
<>TODO</>
</Feature>
</div> </div>
); );
} }