joshuafhiggins/realm-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' into themetoggle

Browse Source
This commit is contained in:
mauro 🤙
2024-08-12 12:13:55 +02:00
committed by GitHub
parent e98bc2d176 ad9162b306
commit 6de4235818
3 changed files with 28 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/components/features.tsx
View File

@@ -38,19 +38,13 @@ function Question() {
export default function Features() {
return (
<div>
<div className="relative">
{/*<TextReveal text="Zen will change the way you browse the web. 🌟" />*/}
<h1 className="text-5xl font-bold mt-20 text-center flex justify-center items-center mb-2">
What does Zen offer <SparklesText className="mx-2" text="YOU" />?
</h1>
<p className="text-muted-foreground text-center mb-24">
Zen Browser is packed with features that will change the way you browse
the web. Here are
<br /> some of the features that Zen offers.
</p>
<h1 className="text-5xl font-bold mt-20 text-center p-5 md:p-0 flex flex-col md:flex-row justify-center items-center mb-2">What does Zen offer to <SparklesText className="mx-2" text="YOU" />?</h1>
<p className="text-muted-foreground text-center mx-auto w-3/4 md:w-full p-5 lg:p-0 mb-24">Zen Browser is packed with features that will change the way you browse the web. Here are<br className="hidden md:block"/> some of the features that Zen offers.</p>
<div className="flex flex-col lg:flex-row w-full mt-4 p-5 lg:p-0">
<div className="w-full flex mx-auto lg:mx-0 flex-col lg:mb-24 lg:ml-4 lg:mt-24">
<div className="bg-background relative mx-auto lg:mx-0 flex flex-col max-w-lg justify-center rounded-xl border-2 p-20 md:shadow-xl">
<div className="hover:border-blue-500 transition-all duration-100 bg-background relative mx-auto lg:mx-0 flex flex-col max-w-lg justify-center rounded-xl md:border-2 p-20 md:shadow-xl">
<h1 className="text-5xl font-bold">Split views</h1>
<p className="text-muted-foreground mt-3">
Split your browser into multiple views to browse multiple websites
@@ -58,7 +52,7 @@ export default function Features() {
</p>
<img src="/split-view.png" className="mt-8 w-full h-full" />
</div>
<div className="bg-background mx-auto lg:mx-0 relative flex flex-col mt-8 max-w-lg justify-center rounded-xl border-2 p-20 md:shadow-xl">
<div className="hover:border-blue-500 transition-all duration-100 bg-background mx-auto lg:mx-0 relative flex flex-col mt-8 max-w-lg justify-center rounded-xl md:border-2 p-20 md:shadow-xl">
<h1 className="text-5xl font-bold">Workspaces</h1>
<p className="text-muted-foreground mt-3">
Create workspaces to keep your tabs organized and your browsing
@@ -68,7 +62,7 @@ export default function Features() {
</div>
</div>
<div className="w-full lg:mr-4 flex flex-col">
<div className="bg-background relative mx-auto lg:mx-0 mt-8 lg:mt-0 flex-col flex max-w-lg justify-center rounded-xl border-2 p-20 md:shadow-xl">
<div className="hover:border-blue-500 transition-all duration-100 bg-background relative mx-auto lg:mx-0 mt-8 lg:mt-0 flex-col flex max-w-lg justify-center rounded-xl md:border-2 p-20 md:shadow-xl">
<h1 className="text-5xl font-bold">Profile switching</h1>
<p className="text-muted-foreground mt-3">
Switch between profiles to keep your work and personal browsing
@@ -76,7 +70,7 @@ export default function Features() {
</p>
<img src="/profiles.png" className="mt-8 w-full h-full" />
</div>
<div className="bg-background relative mx-auto lg:mx-0 mt-8 flex-col flex max-w-lg justify-center rounded-xl border-2 p-20 md:shadow-xl">
<div className="hover:border-blue-500 transition-all duration-100 bg-background relative mx-auto lg:mx-0 mt-8 flex-col flex max-w-lg justify-center rounded-xl md:border-2 p-20 md:shadow-xl">
<h1 className="text-5xl font-bold">Side web panels</h1>
<p className="text-muted-foreground mt-3">
Access your favorite websites and services without leaving the
@@ -97,29 +91,13 @@ export default function Features() {
<TableHeader>
<TableRow className="!border-none">
<TableHead className="py-2 text-2xl absolute font-bold text-black dark:text-white">
How Zen differs from other browsers
</TableHead>
<TableHead className="py-2 font-bold text-center">
<img
src="/favicon.ico"
className="bg-black dark:bg-white rounded-md mx-auto mb-2 w-8 h-8"
/>
Zen
</TableHead>
<TableHead className="py-2 pl-4 pr-0 font-bold text-center opacity-60">
<img
src="/floorp.png"
className="bg-black dark:bg-white rounded-md p-1 mx-auto mb-2 w-7 h-7"
/>
Floorp
</TableHead>
<TableHead className="py-2 pl-0 font-bold text-center opacity-60">
<img
src="/librewolf.png"
className="bg-black dark:bg-white rounded-md mx-auto p-1 mb-2 w-7 h-7"
/>
LibreWolf
<span className="hidden md:block">
How Zen differs from other browsers
</span>
</TableHead>
<TableHead className="py-2 font-bold text-center"><img src="/favicon.ico" className="bg-black dark:bg-white rounded-md mx-auto mb-2 w-8 h-8" />Zen</TableHead>
<TableHead className="py-2 pl-4 pr-0 font-bold text-center opacity-60"><img src="/floorp.png" className="bg-black dark:bg-white rounded-md p-1 mx-auto mb-2 w-7 h-7" />Floorp</TableHead>
<TableHead className="py-2 pl-0 font-bold text-center opacity-60"><img src="/librewolf.png" className="bg-black dark:bg-white rounded-md mx-auto p-1 mb-2 w-7 h-7" />LibreWolf</TableHead>
</TableRow>
</TableHeader>
<TableBody>
@@ -191,31 +169,19 @@ export default function Features() {
the web.
</p>
<div className="grid gap-5 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-10">
<FeatureCard
title="Beautifully designed"
description="Zen is designed to be easy to use and beautiful to look at."
/>
<FeatureCard
title="Customizable"
description="Customize Zen to fit your needs. Change the theme, layout, and more."
/>
<FeatureCard
title="Workspaces"
description="Create workspaces to keep your tabs organized."
/>
<FeatureCard
title="Better new tab page"
description="The new tab page in Zen is designed to help you get to your favorite websites faster."
/>
<FeatureCard
title="Tab groups"
description="Organize your tabs into groups to keep your browsing experience organized."
todo
/>
<FeatureCard
title="Vertical tabs"
description="Keep your tabs organized with vertical tabs."
/>
<FeatureCard title="Beautifully designed"
description="Zen is designed to be easy to use and beautiful to look at." />
<FeatureCard title="Customizable"
description="Customize Zen to fit your needs. Change the theme, layout, and more." />
<FeatureCard title="Keyboard shortcuts"
description="Navigate Zen with ease using keyboard shortcuts." />
<FeatureCard title="Your browsing experience, your way"
description="Zen is designed to be customizable to fit your needs." />
<FeatureCard title="Tab groups"
description="Organize your tabs into groups to keep your browsing experience organized."
todo />
<FeatureCard title="Vertical tabs"
description="Keep your tabs organized with vertical tabs." />
</div>
<Button
onClick={() => (window.location.href = "/download")}