mirror of
https://github.com/zen-browser/www.git
synced 2025-07-08 01:10:02 +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";
|
||||
|
||||
|
||||
export default function Features() {
|
||||
return (
|
||||
<div>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue