Started working on new site
This commit is contained in:
mauro-balades
41
next.config.js
Normal file
41
next.config.js
Normal file
@@ -0,0 +1,41 @@
|
||||
const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')
|
||||
|
||||
/** @type {import('next').NextConfig} */
|
||||
module.exports = (phase, { defaultConfig }) => {
|
||||
const defaultConfigWWW = {
|
||||
images: {
|
||||
remotePatterns: [
|
||||
{
|
||||
protocol: "https",
|
||||
hostname: "raw.githubusercontent.com",
|
||||
},
|
||||
{
|
||||
protocol: "https",
|
||||
hostname: "cdn.jsdelivr.net",
|
||||
}
|
||||
],
|
||||
domains: ['cdn.jsdelivr.net', "raw.githubusercontent.com"], // Allow images from jsDelivr
|
||||
},
|
||||
experimental: {
|
||||
serverActions: {
|
||||
// edit: updated to new key. Was previously `allowedForwardedHosts`
|
||||
allowedOrigins: ["localhost:3000", "get-zen.vercel.app"],
|
||||
},
|
||||
},
|
||||
compiler: {
|
||||
styledComponents: true,
|
||||
},
|
||||
};
|
||||
if (phase === PHASE_DEVELOPMENT_SERVER) {
|
||||
return {
|
||||
...defaultConfigWWW,
|
||||
// development only config options here
|
||||
};
|
||||
}
|
||||
return {
|
||||
...defaultConfigWWW,
|
||||
// production only config options here
|
||||
output: 'export',
|
||||
};
|
||||
};
|
||||
|
||||
@@ -1,28 +0,0 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
output: 'export',
|
||||
images: {
|
||||
remotePatterns: [
|
||||
{
|
||||
protocol: "https",
|
||||
hostname: "raw.githubusercontent.com",
|
||||
},
|
||||
{
|
||||
protocol: "https",
|
||||
hostname: "cdn.jsdelivr.net",
|
||||
}
|
||||
],
|
||||
domains: ['cdn.jsdelivr.net', "raw.githubusercontent.com"], // Allow images from jsDelivr
|
||||
},
|
||||
experimental: {
|
||||
serverActions: {
|
||||
// edit: updated to new key. Was previously `allowedForwardedHosts`
|
||||
allowedOrigins: ["localhost:3000", "get-zen.vercel.app"],
|
||||
},
|
||||
},
|
||||
compiler: {
|
||||
styledComponents: true,
|
||||
},
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
@@ -41,6 +41,8 @@
|
||||
--color-two: #fe8bbb;
|
||||
--color-three: #9e7aff;
|
||||
|
||||
--surface: rgb(235, 235, 235);
|
||||
|
||||
/*
|
||||
--color-one: #37ecba;
|
||||
--color-two: #72afd3;
|
||||
@@ -52,6 +54,8 @@
|
||||
--background: 0 0% 0%;
|
||||
--foreground: 0 0% 98%;
|
||||
|
||||
--surface: rgb(23, 23, 23);
|
||||
|
||||
--card: 0 0% 3.9%;
|
||||
--card-foreground: 0 0% 98%;
|
||||
|
||||
@@ -86,5 +90,7 @@
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,9 +4,11 @@ import {
|
||||
CheckIcon,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
ExternalLinkIcon,
|
||||
EyeIcon,
|
||||
EyeOffIcon,
|
||||
Github,
|
||||
HeartHandshake,
|
||||
HomeIcon,
|
||||
RabbitIcon,
|
||||
ShieldAlertIcon,
|
||||
@@ -45,19 +47,19 @@ 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" />
|
||||
<CheckIcon className="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" />
|
||||
<XIcon className="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" />
|
||||
<QuestionMarkIcon className="text-black rounded-full bg-yellow-500 dark:bg-yellow-400 p-1 w-7 h-7" />
|
||||
);
|
||||
}
|
||||
|
||||
@@ -70,389 +72,87 @@ export default function Features() {
|
||||
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>
|
||||
<section className="flex-col w-full" id="features">
|
||||
<div className='w-full md:w-3/4 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-10 shadow'>
|
||||
<div className='p-16 lg:w-1/2 flex flex-col justify-center'>
|
||||
<h1 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Built for simplicity</h1>
|
||||
<p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>Zen Browser is designed to be simple and easy to use. It's built with the user in mind, so you can focus on what matters most.</p>
|
||||
<div className='w-full mt-8'>
|
||||
<div className='flex items-center'>
|
||||
<Checkmark />
|
||||
<p className='ml-2 text-gray-600 dark:text-gray-300'>Completely Customizable</p>
|
||||
</div>
|
||||
<div className='flex items-center mt-4'>
|
||||
<Checkmark />
|
||||
<p className='ml-2 text-gray-600 dark:text-gray-300'>Vertical Tabs</p>
|
||||
</div>
|
||||
<div className='flex items-center mt-4'>
|
||||
<Checkmark />
|
||||
<p className='ml-2 text-gray-600 dark:text-gray-300'>Thoughtful Design</p>
|
||||
</div>
|
||||
</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>
|
||||
<a href="/download">
|
||||
<Button className="mt-4 rounded-full p-5 ml-auto">
|
||||
Download Zen now!
|
||||
</Button>
|
||||
</a>
|
||||
</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>
|
||||
<a href="/download">
|
||||
<Button className="mt-4 rounded-full p-5 ml-4">
|
||||
Download Zen now!
|
||||
</Button>
|
||||
</a>
|
||||
</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>
|
||||
<img src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/browser-1.png" alt="Zen Browser" className="rounded-md lg:w-1/2" />
|
||||
</div>
|
||||
<div className='w-full md:w-3/4 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-36 shadow'>
|
||||
<img src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/browser-2.png" alt="Zen Browser" className="rounded-md lg:w-1/2" />
|
||||
<div className='p-16 lg:w-1/2 flex flex-col justify-center'>
|
||||
<h1 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Split Views</h1>
|
||||
<p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>Zen Browser allows you to split your view into multiple panes, so you can work on multiple things at once. It's perfect for multitasking.</p>
|
||||
<div className="relative">
|
||||
<Button className='mt-8' onClick={() => window.open('/download', '_self')}>Download Now</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='w-full md:w-3/4 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-36 shadow'>
|
||||
<div className='p-16 lg:w-1/2 flex flex-col justify-center'>
|
||||
<h1 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Sidebar</h1>
|
||||
<p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>Zen Browser has a built-in sidebar that lets you quickly access your favorite websites, bookmarks, and more. It's the perfect way to stay organized.</p>
|
||||
<div className='w-full mt-8'>
|
||||
<div className='flex items-center'>
|
||||
<Checkmark />
|
||||
<p className='ml-2 text-gray-600 dark:text-gray-300'>Quick Access</p>
|
||||
</div>
|
||||
<div className='flex items-center mt-4'>
|
||||
<Checkmark />
|
||||
<p className='ml-2 text-gray-600 dark:text-gray-300'>Customizable</p>
|
||||
</div>
|
||||
<div className='flex items-center mt-4'>
|
||||
<Checkmark />
|
||||
<p className='ml-2 text-gray-600 dark:text-gray-300'>Easy to Use</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/browser-3.png" alt="Zen Browser" className="rounded-md lg:w-1/2" />
|
||||
</div>
|
||||
<div className='w-full md:w-3/4 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-36 shadow'>
|
||||
<img src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/browser-4.jpg" alt="Zen Browser" className="rounded-md lg:w-1/2" />
|
||||
<div className='p-16 lg:w-1/2 flex flex-col justify-center'>
|
||||
<h1 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Introducing Compact Mode</h1>
|
||||
<p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>Zen Browser's compact mode gives you more screen real estate by hiding the title bar and tabs. It's perfect for when you need to focus on your work.</p>
|
||||
<div className="relative">
|
||||
<Button className='mt-8' onClick={() => window.open('/download', '_self')}>What are you waiting for?</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='w-full md:w-3/4 p-5 lg:p-12 flex flex-col lg:flex-row md:rounded-md mx-auto bg-surface mt-36 shadow'>
|
||||
<div className="flex p-16 lg:w-1/2 flex-col justify-center">
|
||||
<h3 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Convinced?</h3>
|
||||
<p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>Download Zen Browser now and experience the future of browsing.</p>
|
||||
<div className="relative">
|
||||
<Button className='mt-8' onClick={() => window.open('/download', '_self')}>Download Now</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="border-t lg:border-t-0 lg:border-l h-[1px] lg:h-[unset] lg:w-[1px] mx-2"></div>
|
||||
<div className="flex p-16 lg:w-1/2 flex-col justify-center">
|
||||
<h3 className='text-4xl font-medium text-gray-800 dark:text-gray-100'>Even more convinced? <HeartHandshake className='inline text-red-500 h-10 w-10' /></h3>
|
||||
<p className='text-lg mt-4 text-gray-600 dark:text-gray-300'>Help support the development of Zen Browser by donating to our cause.</p>
|
||||
<div className="relative mt-8 flex">
|
||||
<Button variant="ghost" onClick={() => window.open('https://patreon.com/zen_browser', '_blank')}>Patreon <ExternalLinkIcon className='opacity-50 h-4 w-4 ml-4' /></Button>
|
||||
<Button className="ml-8" variant="ghost" onClick={() => window.open('https://ko-fi.com/zen_browser', '_blank')}>Ko-fi <ExternalLinkIcon className='opacity-50 h-4 w-4 ml-4' /></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@ import AnimatedGradientText from "./ui/animated-gradient-text";
|
||||
import { Button } from "./ui/button";
|
||||
import { BorderBeam } from "./ui/border-beam";
|
||||
import { ny } from "@/lib/utils";
|
||||
import { ChevronRight } from "lucide-react";
|
||||
import { ChevronDown, ChevronRight } from "lucide-react";
|
||||
import Particles from "./ui/particles";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
@@ -18,7 +18,7 @@ export default function Header() {
|
||||
<>
|
||||
<section
|
||||
id="hero"
|
||||
className="relative mx-auto mt-40 max-w-7xl px-6 text-center md:px-8"
|
||||
className="relative mx-auto min-h-screen flex justify-center flex-col max-w-7xl px-6 text-center md:px-8"
|
||||
>
|
||||
<a href="/download">
|
||||
<AnimatedGradientText>
|
||||
@@ -42,64 +42,22 @@ export default function Header() {
|
||||
<br className="hidden md:block" /> We care about your experience, not
|
||||
your data.
|
||||
</p>
|
||||
<a href="/download">
|
||||
<Button
|
||||
className="animate-fade-in -translate-y-4 gap-1 rounded-lg text-white opacity-0 ease-in-out [--animation-delay:600ms] dark:text-black"
|
||||
>
|
||||
<span>Download Zen Now </span>
|
||||
<ArrowRightIcon className="ml-1 size-4 transition-transform duration-300 ease-in-out group-hover:translate-x-1" />
|
||||
</Button>
|
||||
</a>
|
||||
<div
|
||||
ref={ref}
|
||||
className="animate-fade-up relative mt-32 opacity-0 [--animation-delay:400ms] [perspective:2000px] after:absolute after:inset-0 after:z-50 after:[background:linear-gradient(to_top,hsl(var(--background))_10%,transparent)]"
|
||||
>
|
||||
<div
|
||||
className={`rounded-xl border border-white/10 bg-white bg-opacity-[0.01] before:absolute before:bottom-1/2 before:left-0 before:top-0 before:size-full before:opacity-0 before:[background-image:linear-gradient(to_bottom,var(--color-one),var(--color-one),transparent_40%)] before:[filter:blur(180px)] ${
|
||||
inView ? "before:animate-image-glow" : ""
|
||||
}`}
|
||||
<div className="flex justify-center w-full">
|
||||
<a href="/download">
|
||||
<Button
|
||||
className="animate-fade-in -translate-y-4 gap-1 rounded-lg text-white opacity-0 ease-in-out [--animation-delay:600ms] dark:text-black"
|
||||
>
|
||||
<BorderBeam
|
||||
size={200}
|
||||
duration={12}
|
||||
delay={11}
|
||||
colorFrom="var(--color-one)"
|
||||
colorTo="var(--color-two)"
|
||||
/>
|
||||
|
||||
<img
|
||||
width={1500}
|
||||
height={700}
|
||||
src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/browser-dark.png"
|
||||
alt="browser Image"
|
||||
className="relative hidden rounded-[inherit] border object-contain dark:block"
|
||||
/>
|
||||
<img
|
||||
width={1500}
|
||||
height={700}
|
||||
src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/browser-light.png"
|
||||
alt="browser Image"
|
||||
className="relative block rounded-[inherit] border object-contain dark:hidden"
|
||||
/>
|
||||
</div>
|
||||
<span>Download Zen Now </span>
|
||||
<ArrowRightIcon className="ml-1 size-4 transition-transform duration-300 ease-in-out group-hover:translate-x-1" />
|
||||
</Button>
|
||||
</a>
|
||||
<a href="#features" className="animate-fade-up -translate-y-4 opacity-0 [--animation-delay:800ms]">
|
||||
<Button variant="ghost" className="ml-4">
|
||||
Start Exploring <ChevronDown className="ml-1 size-4" />
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
<Particles
|
||||
className="absolute inset-0 -z-10 hidden dark:block"
|
||||
quantity={50}
|
||||
ease={70}
|
||||
size={0.05}
|
||||
staticity={40}
|
||||
color="#ffffff"
|
||||
/>
|
||||
<Particles
|
||||
className="absolute inset-0 -z-10 block dark:hidden"
|
||||
quantity={50}
|
||||
ease={70}
|
||||
size={0.05}
|
||||
staticity={40}
|
||||
color="#000000"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@ import { type VariantProps, cva } from "class-variance-authority";
|
||||
import { ny } from "@/lib/utils";
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
|
||||
"inline-flex items-center justify-center whitespace-nowrap rounded-full text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
@@ -21,7 +21,7 @@ const buttonVariants = cva(
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-4 py-2",
|
||||
default: "h-12 px-8 py-4",
|
||||
sm: "h-8 rounded-md px-3 text-xs",
|
||||
lg: "h-10 rounded-md px-8",
|
||||
icon: "h-9 w-9",
|
||||
|
||||
@@ -28,6 +28,7 @@ const config = {
|
||||
ring: 'hsl(var(--ring))',
|
||||
background: 'hsl(var(--background))',
|
||||
foreground: 'hsl(var(--foreground))',
|
||||
surface: "var(--surface)",
|
||||
primary: {
|
||||
DEFAULT: 'hsl(var(--primary))',
|
||||
foreground: 'hsl(var(--primary-foreground))',
|
||||
|
||||
Reference in New Issue
Block a user