459 lines
19 KiB
TypeScript
459 lines
19 KiB
TypeScript
'use client';
|
|
import Sticky from 'react-sticky-el';
|
|
import {
|
|
CheckIcon,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
EyeIcon,
|
|
EyeOffIcon,
|
|
Github,
|
|
HomeIcon,
|
|
RabbitIcon,
|
|
ShieldAlertIcon,
|
|
ShieldCheck,
|
|
SidebarCloseIcon,
|
|
SidebarIcon,
|
|
SpaceIcon,
|
|
SplitSquareHorizontal,
|
|
SplitSquareVertical,
|
|
XIcon,
|
|
} from 'lucide-react';
|
|
import {
|
|
Cross1Icon,
|
|
EyeClosedIcon,
|
|
HeartFilledIcon,
|
|
LockClosedIcon,
|
|
QuestionMarkIcon,
|
|
ReloadIcon,
|
|
UpdateIcon,
|
|
} from '@radix-ui/react-icons';
|
|
import Image from 'next/image';
|
|
import Link from 'next/link';
|
|
import { Button } from './ui/button';
|
|
import { COLORS } from './create-theme';
|
|
import { Slider } from './ui/slider';
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from './ui/table';
|
|
import React, { useState } from 'react';
|
|
import { ny } from '@/lib/utils';
|
|
|
|
function Checkmark() {
|
|
return (
|
|
<CheckIcon className="mx-auto text-black rounded-full bg-green-500 dark:bg-green-400 p-1 w-7 h-7" />
|
|
);
|
|
}
|
|
|
|
function Cross() {
|
|
return (
|
|
<XIcon className="mx-auto text-black rounded-full bg-red-500 dark:bg-red-400 p-1 w-7 h-7" />
|
|
);
|
|
}
|
|
|
|
function Question() {
|
|
return (
|
|
<QuestionMarkIcon className="mx-auto text-black rounded-full bg-yellow-500 dark:bg-yellow-400 p-1 w-7 h-7" />
|
|
);
|
|
}
|
|
|
|
export default function Features() {
|
|
const [feature, setFeature] = useState(0);
|
|
React.useEffect(() => {
|
|
const interval = setInterval(() => {
|
|
setFeature((feature) => (feature + 1) % 3);
|
|
}, 3000);
|
|
return () => clearInterval(interval);
|
|
});
|
|
return (
|
|
<div className="max-w-[1300px] relative my-32 mx-auto md:border-2 rounded-md md:w-full xl:w-4/5 2xl:w-3/5">
|
|
<div className="grid grid-cols-1 md:grid-cols-3 md:grid-rows-10 w-full">
|
|
<div className="items-center justify-center flex flex-col p-16">
|
|
<div className="rounded-full px-8 py-3 shadow border-2 flex items-center justify-center">
|
|
<RabbitIcon className="mx-auto w-7 h-7" />
|
|
</div>
|
|
<div className="mt-10">
|
|
<h2 className="text-lg font-bold text-center">
|
|
Goodbye bad performance
|
|
</h2>
|
|
<p className="text-center text-sm mt-2 text-muted-foreground">
|
|
We are constantly tweaking Firefox's engine and settings to make it
|
|
faster than ever. <a className="text-blue-500" href="https://docs.zen-browser.app/benchmarks" target='_blank'>Learn more</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="items-center justify-center md:border-l-2 flex flex-col p-16">
|
|
<div className="rounded-full px-8 py-3 shadow border-2 flex items-center justify-center">
|
|
<LockClosedIcon className="mx-auto w-7 h-7" />
|
|
</div>
|
|
<div className="mt-10">
|
|
<h2 className="text-lg font-bold text-center">Privacy first</h2>
|
|
<p className="text-center text-sm mt-2 text-muted-foreground">
|
|
We don't track you. We don't sell your data. We don't even know
|
|
who you are.{' '}
|
|
<a className="text-blue-500" href="/privacy-policy">
|
|
Learn more
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="items-center justify-center md:border-l-2 flex flex-col p-16">
|
|
<div className="rounded-full px-8 py-3 shadow border-2 flex items-center justify-center">
|
|
<ShieldCheck className="mx-auto w-7 h-7" />
|
|
</div>
|
|
<div className="mt-10">
|
|
<h2 className="text-lg font-bold text-center">Secure by default</h2>
|
|
<p className="text-center text-sm mt-2 text-muted-foreground">
|
|
We are always using the latest security features from Firefox to
|
|
keep you safe.{' '}
|
|
<a
|
|
className="text-blue-500"
|
|
href="https://docs.zen-browser.app/faq#how-do-i-know-zen-is-safe"
|
|
>
|
|
Learn more
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="relative md:border-t-2 hidden md:block flex-col p-16 row-span-4 scrollarea">
|
|
<Sticky
|
|
stickyClassName="mx-auto py-32"
|
|
hideOnBoundaryHit={false}
|
|
boundaryElement=".scrollarea"
|
|
topOffset={-130}
|
|
>
|
|
<h2 className="text-3xl font-bold">User experience comes first</h2>
|
|
<p className="text-sm mt-2 text-muted-foreground">
|
|
We are always looking for ways to make your experience better.
|
|
Always looking for feedback and suggestions!
|
|
</p>
|
|
</Sticky>
|
|
</div>
|
|
<div className="relative md:grid border-t-2 md:border-l-2 md:col-span-2 md:grid-cols-2 row-span-2">
|
|
<div className="p-16 md:px-32 h-full md:absolute top-0 left-0 flex flex-col">
|
|
<div className="">
|
|
<div>
|
|
<h2 className="text-3xl font-bold">Customization is key</h2>
|
|
<p className="text-sm mt-2 text-muted-foreground">
|
|
We are always looking for ways to make your experience better.
|
|
With stackable themes that can be mixed and matched, you can
|
|
create a browser that is truly yours.{' '}
|
|
<a
|
|
className="text-blue-500"
|
|
href="https://docs.zen-browser.app/themes-store/themes-marketplace"
|
|
>
|
|
Learn more
|
|
</a>
|
|
</p>
|
|
</div>
|
|
<Link href="/download">
|
|
<Button className="mt-4 rounded-full p-5 ml-auto">
|
|
Download Zen now!
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
<div className="border rounded-lg shadow-md mt-16 mx-auto p-4 bg-white dark:bg-black flex w-fit transform -translate-x-1/3">
|
|
{COLORS.map((color) => (
|
|
<div
|
|
key={color}
|
|
className="w-5 h-5 rounded-full mx-3 "
|
|
style={{ backgroundColor: color }}
|
|
/>
|
|
))}
|
|
</div>
|
|
<div className="border w-1/2 rounded-lg shadow-md mt-16 mx-auto p-4 bg-white dark:bg-black flex transform translate-x-[calc(50%-1.5rem)]">
|
|
<Slider defaultValue={[80]} max={100} />
|
|
</div>
|
|
<a
|
|
href="/themes"
|
|
className="border-2 w-fit md:w-1/2 lg:w-fit flex items-center justify-center rounded-xl shadow-md mt-16 mx-auto p-4 bg-white dark:bg-black border-blue-500 flex text-muted-foreground"
|
|
>
|
|
<span>Checkout our themes store</span>
|
|
<ChevronRight className="w-5 h-5 ml-2" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className="relative md:grid md:border-l-2 border-t-2 md:col-span-2 grid-cols-2 row-span-2">
|
|
<div className="p-16 md:px-32 h-full md:absolute top-0 left-0 flex flex-col">
|
|
<div className="flex flex-col md:flex-row">
|
|
<div className="relative">
|
|
<h2 className="text-3xl font-bold">Compact mode is here!</h2>
|
|
<p className="text-sm mt-2 text-muted-foreground">
|
|
With a new compact mode, you can save space and focus on what
|
|
matters.
|
|
</p>
|
|
<div className="bg-blue-600 p-1 px-2 text-white rounded-md text-xs transform rotate-[10deg] absolute right-0 top-[-10px]">
|
|
Killer feature
|
|
</div>
|
|
</div>
|
|
<Link href="/download">
|
|
<Button className="mt-4 rounded-full p-5 ml-4">
|
|
Download Zen now!
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
<img
|
|
src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/compact-mode.png"
|
|
className="scale-105 hover:scale-110 transform rotate-[-2deg] transition-all duration-100 rounded-md w-full shadow-md dark:shadow-none dark:border-2 mt-16 border-blue-600"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col p-5 md:p-16 md:col-span-2 border-t-2 row-span-2">
|
|
<div className="rounded-full px-8 py-3 shadow border-2 flex items-center">
|
|
<div className="font-bold text-md">
|
|
What makes Zen Browser different?
|
|
</div>
|
|
<img src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/favicon.ico" className="ml-auto w-7 h-7" />
|
|
</div>
|
|
<div className="h-full w-full flex items-center justify-center">
|
|
<Table className="w-full">
|
|
<TableHeader>
|
|
<TableRow
|
|
className="!border-none"
|
|
style={{ pointerEvents: 'none' }}
|
|
>
|
|
<TableHead className="py-2 text-2xl font-bold text-black dark:text-white">
|
|
<span className="">How Zen compares to other browsers</span>
|
|
</TableHead>
|
|
<TableHead className="py-2 font-bold text-center">
|
|
<img
|
|
height={32}
|
|
width={32}
|
|
src="/favicon.ico"
|
|
className="border-2 rounded-lg mx-auto mb-2 w-8 h-8"
|
|
alt="zen"
|
|
/>
|
|
Zen
|
|
</TableHead>
|
|
<TableHead className="py-2 pl-4 lg:pr-0 pr-2 font-bold text-center opacity-60">
|
|
<img
|
|
height={32}
|
|
width={32}
|
|
src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/floorp.png"
|
|
className="bg-black dark:bg-white rounded-md p-1 mx-auto mb-2 w-7 h-7"
|
|
alt="floorp"
|
|
/>
|
|
Floorp
|
|
</TableHead>
|
|
<TableHead className="py-2 pl-0 font-bold text-center opacity-60">
|
|
<img
|
|
height={32}
|
|
width={32}
|
|
src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/librewolf.png"
|
|
className="bg-black dark:bg-white rounded-md mx-auto p-1 mb-2 w-7 h-7"
|
|
alt="librewolf"
|
|
/>
|
|
LibreWolf
|
|
</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
<TableRow className="border-none">
|
|
<TableCell className="py-3 font-medium">
|
|
Fine-grained security like sandboxing
|
|
</TableCell>
|
|
<TableCell className="py-3">
|
|
<Checkmark />
|
|
</TableCell>
|
|
<TableCell className="py-3 pl-4 pr-0">
|
|
<Cross />
|
|
</TableCell>
|
|
<TableCell className="py-3">
|
|
<Checkmark />
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow className="border-none">
|
|
<TableCell className="py-3 font-medium">
|
|
Optimized for peak performance
|
|
</TableCell>
|
|
<TableCell className="py-3">
|
|
<Checkmark />
|
|
</TableCell>
|
|
<TableCell className="py-3 pl-4 pr-0">
|
|
<Cross />
|
|
</TableCell>
|
|
<TableCell className="py-3">
|
|
<Cross />
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow className="border-none">
|
|
<TableCell className="py-3 font-medium">
|
|
Based on the latest Firefox
|
|
</TableCell>
|
|
<TableCell className="py-3">
|
|
<Checkmark />
|
|
</TableCell>
|
|
<TableCell className="py-3 pl-4 pr-0">
|
|
<Cross />
|
|
</TableCell>
|
|
<TableCell className="py-3">
|
|
<Checkmark />
|
|
</TableCell>
|
|
</TableRow>
|
|
<TableRow className="border-none">
|
|
<TableCell className="py-3 font-medium">
|
|
Customizable with cutting-edge features
|
|
</TableCell>
|
|
<TableCell className="py-3">
|
|
<Checkmark />
|
|
</TableCell>
|
|
<TableCell className="py-3 pl-4 pr-0">
|
|
<Checkmark />
|
|
</TableCell>
|
|
<TableCell className="py-3">
|
|
<Cross />
|
|
</TableCell>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
<div className="border-t-2 md:border-l-2 row-span-3 grid grid-rows-3">
|
|
<div className="flex items-center flex-col justify-center p-16">
|
|
<div className="border-2 shadow-md rounded-full p-8 py-3 flex items-center justify-center">
|
|
<Github className="w-8 h-8" />
|
|
<h2 className="text-lg font-bold ml-4">Open source</h2>
|
|
</div>
|
|
<p className="text-sm mt-8 text-muted-foreground text-center">
|
|
Zen Browser is open source and always will be. You can check out
|
|
the source code on our{' '}
|
|
<a
|
|
className="text-blue-500"
|
|
href="https://github.com/zen-browser"
|
|
>
|
|
Github
|
|
</a>
|
|
!
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col items-center justify-center p-16 md:border-t-2">
|
|
<div className="border-2 shadow-md rounded-full p-8 py-3 flex items-center justify-center">
|
|
<ReloadIcon className="w-8 h-8" />
|
|
<h2 className="text-lg font-bold ml-4">Updated</h2>
|
|
</div>
|
|
<p className="text-sm mt-8 text-muted-foreground text-center">
|
|
We are always working on new features and improvements. You can
|
|
expect regular updates to keep your browser up to date.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex flex-col p-16 md:border-t-2">
|
|
<div className="border-2 mt-4 shadow-md rounded-full p-8 py-3 flex items-center justify-center">
|
|
<HeartFilledIcon className="w-8 h-8" />
|
|
<h2 className="text-lg font-bold ml-4">Community</h2>
|
|
</div>
|
|
<p className="text-sm mt-8 text-muted-foreground text-center">
|
|
Zen Browser is built by a community of passionate developers and
|
|
designers. You can join us on our{' '}
|
|
<a className="text-blue-500" href="https://discord.gg/nnShMQzR4b">
|
|
Discord
|
|
</a>
|
|
!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col md:border-t-2 md:col-span-2 grid grid-cols-1 md:grid-cols-2">
|
|
<div className="p-16 border-r-2 flex flex-col items-center justify-center">
|
|
<div className="border-2 shadow-md rounded-full p-8 py-3 flex items-center justify-center">
|
|
<EyeClosedIcon className="w-8 h-8" />
|
|
<h2 className="text-lg font-bold ml-4">Your Data</h2>
|
|
</div>
|
|
<p className="text-sm mt-8 text-muted-foreground text-center">
|
|
We are always looking for ways to improve your privacy. Zen
|
|
Browser comes with built-in privacy features to keep you safe.
|
|
</p>
|
|
</div>
|
|
<div className="p-16 flex flex-col items-center justify-center">
|
|
<div className="border-2 shadow-md rounded-full p-8 py-3 flex items-center justify-center">
|
|
<UpdateIcon className="w-8 h-8" />
|
|
<h2 className="text-lg font-bold ml-4">Improvements</h2>
|
|
</div>
|
|
<p className="text-sm mt-8 text-muted-foreground text-center">
|
|
We are always looking for ways to make Zen Browser better. You can
|
|
expect regular updates with new features and improvements.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col border-t-2 md:col-span-3 grid grid-cols-1 md:grid-cols-3 grid-rows-2 row-span-2">
|
|
<div className="relative p-16 border-r-2 flex flex-col items-center justify-center row-span-2 col-span-2">
|
|
<div className="relative w-full h-full flex items-center justify-center">
|
|
<img
|
|
src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/split-view.png"
|
|
className={ny(
|
|
'absolute hover:scale-105 rounded-md w-full shadow-md dark:shadow-none dark:border-2 border-blue-500 transform transition-all duration-300',
|
|
feature === 0 ? 'translate-x-0' : '-translate-x-1/4 opacity-0'
|
|
)}
|
|
/>
|
|
<img
|
|
src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/workspaces.png"
|
|
className={ny(
|
|
'absolute hover:scale-105 rounded-md w-full shadow-md dark:shadow-none dark:border-2 border-blue-500 transform transition-all duration-300',
|
|
feature === 1 ? 'translate-x-0' : '-translate-x-1/4 opacity-0'
|
|
)}
|
|
/>
|
|
<img
|
|
src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/sidebar.png"
|
|
className={ny(
|
|
'absolute hover:scale-105 rounded-md w-full shadow-md dark:shadow-none dark:border-2 border-blue-500 transform transition-all duration-300',
|
|
feature === 2 ? 'translate-x-0' : '-translate-x-1/4 opacity-0'
|
|
)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="p-16 flex flex-col items-center justify-around row-span-2">
|
|
<div
|
|
className={ny(
|
|
feature === 0 ? 'opacity-100' : 'opacity-50',
|
|
'mt-10 md:mt-0 transform transition-all duration-200 cursor-pointer'
|
|
)}
|
|
onClick={() => setFeature(0)}
|
|
>
|
|
<h2 className="text-lg font-bold ml-4 flex items-center">
|
|
<SplitSquareHorizontal className="w-4 h-4 mr-2" />
|
|
Split view
|
|
</h2>
|
|
<p className="text-sm mt-2 text-muted-foreground ml-5">
|
|
Split your browser into two windows to work more efficiently.
|
|
</p>
|
|
</div>
|
|
<div
|
|
className={ny(
|
|
feature === 1 ? 'opacity-100' : 'opacity-50',
|
|
'mt-10 md:mt-0 transform transition-all duration-200 cursor-pointer'
|
|
)}
|
|
onClick={() => setFeature(1)}
|
|
>
|
|
<h2 className="text-lg font-bold ml-4 flex items-center">
|
|
<HomeIcon className="w-4 h-4 mr-2" />
|
|
Workspaces
|
|
</h2>
|
|
<p className="text-sm mt-2 text-muted-foreground ml-5">
|
|
Organize your tabs into workspaces to keep things tidy.
|
|
</p>
|
|
</div>
|
|
<div
|
|
className={ny(
|
|
feature === 2 ? 'opacity-100' : 'opacity-50',
|
|
'mt-10 md:mt-0 transform transition-all duration-200 cursor-pointer'
|
|
)}
|
|
onClick={() => setFeature(2)}
|
|
>
|
|
<h2 className="text-lg font-bold ml-4 flex items-center">
|
|
<SidebarIcon className="w-4 h-4 mr-2" />
|
|
Sidebar
|
|
</h2>
|
|
<p className="text-sm mt-2 text-muted-foreground ml-5">
|
|
Keep your favorite websites at your fingertips with the sidebar.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|