mirror of
https://github.com/zen-browser/www.git
synced 2025-07-08 09:20:00 +02:00
refactor: Add new Feature component and update Features page
This commit is contained in:
parent
6a7e72eac8
commit
88d9b0e60b
4 changed files with 52 additions and 1 deletions
BIN
public/sidebar.png
Normal file
BIN
public/sidebar.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 11 KiB |
BIN
public/split-view.png
Normal file
BIN
public/split-view.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 29 KiB |
28
src/components/feature.tsx
Normal file
28
src/components/feature.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue