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

refactor:responsive fixes

Browse Source
This commit is contained in:
oscargonzalez
2024-08-12 18:03:17 +02:00
parent 1bd4b2235e
commit 5de55847f4
2 changed files with 40 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/download.tsx
View File

@@ -11,7 +11,7 @@ import Particles from "./ui/particles";
import confetti from 'canvas-confetti';
import { releases, releaseTree } from "@/lib/releases";
import { InfoCircledIcon } from "@radix-ui/react-icons";
import SparklesText from "./ui/sparkles-text";
const BASE_URL = "https://github.com/zen-browser/desktop/releases/latest/download";
function getDefaultPlatformBasedOnUserAgent() {
@@ -214,8 +214,10 @@ export default function DownloadPage() {
</div>
) || (
<>
<h1 className="text-6xl font-bold">Download Zen</h1>
<p className="text-muted-foreground mt-3">We are so excited for you to try Zen Browser. But first, we need to know what kind of device you are using. It will be fast, we promise.</p>
<h1 className="text-6xl font-bold">Download <SparklesText className="mx-2" text="Zen " /></h1>
<p className="text-muted-foreground mt-3">
We're thrilled for you to experience Zen Browser. First, let us know which device you're using. This will only take a moment, we promise.
</p>
</>
)}
<div className="relative w-full">

73
src/components/features.tsx
View File

@@ -40,41 +40,40 @@ export default function Features() {
return (
<div className="relative">
{/*<TextReveal text="Zen will change the way you browse the web. 🌟" />*/}
<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="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 mt-2 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-10">
Discover how Zen Browser can transform your web experience with powerful features that keep you ahead.
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 gap-4 lg:gap-8">
<div className="w-full flex flex-col gap-4 lg:gap-8">
<div className="hover:border-blue-500 transition-all duration-100 bg-background relative mx-auto lg:mx-0 flex flex-col lg:max-w-md justify-center rounded-xl md:border-2 p-10 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
at once.
Multitask effortlessly by splitting your browser into multiple views, so you can browse several sites at once.
</p>
<img src="/split-view.png" className="mt-8 w-full h-full" />
<img src="/split-view.png" className="mt-8 w-full h-full h-auto" />
</div>
<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">
<div className="hover:border-blue-500 transition-all duration-100 bg-background mx-auto lg:mx-0 relative flex flex-col mt-8 lg:max-w-md 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
experience clutter-free.
Stay organized and clutter-free by creating workspaces tailored to your browsing needs.
</p>
<img src="/workspaces.png" className="mt-8 w-full h-full" />
</div>
</div>
<div className="w-full lg:mr-4 flex flex-col">
<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">
<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 lg:max-w-md 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
separate.
Seamlessly switch between work and personal profiles for a focused browsing experience.
</p>
<img src="/profiles.png" className="mt-8 w-full h-full" />
</div>
<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">
<div className="hover:border-blue-500 transition-all duration-100 bg-background relative mx-auto lg:mx-0 mt-8 flex-col flex lg:max-w-md 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
page you're on.
Access favorite sites and services instantly, without leaving your current page.
</p>
<img src="/sidebar.png" className="mt-8 w-full h-full" />
</div>
@@ -84,7 +83,7 @@ export default function Features() {
borderWidth={2}
borderRadius={12}
color={["#A07CFE", "#FE8FB5", "#FFBE7B"]}
className="mt-52 flex relative flex-col items-start justify-start w-full bg-background p-12 rounded-lg md:shadow-xl"
className="mt-20 flex relative flex-col items-start justify-start w-full bg-background p-12 rounded-lg md:shadow-xl"
>
<div className="w-full p-16">
<Table>
@@ -92,7 +91,7 @@ export default function Features() {
<TableRow className="!border-none" style={{ pointerEvents: 'none'}}>
<TableHead className="py-2 text-2xl font-bold text-black dark:text-white">
<span className="">
How Zen differs from other browsers
How Zen compares to other browsers
</span>
</TableHead>
<TableHead className="font-bold text-center min-w-[70px]">
@@ -113,7 +112,7 @@ export default function Features() {
<TableBody>
<TableRow>
<TableCell className="py-3 font-medium">
Contain fine-grained security measures like sandboxing
Fine-grained security like sandboxing
</TableCell>
<TableCell className="py-3">
<Checkmark />
@@ -141,7 +140,7 @@ export default function Features() {
</TableRow>
<TableRow>
<TableCell className="py-3 font-medium">
Based on the latest version of Firefox
Based on the latest Firefox
</TableCell>
<TableCell className="py-3">
<Checkmark />
@@ -171,57 +170,55 @@ export default function Features() {
</Table>
</div>
</ShineBorder>
<div className="flex flex-col items-center justify-center w-full mt-40">
<div className="flex flex-col items-center justify-center w-full mt-20">
<div className="flex flex-col lg:flex-row w-full mt-4 p-5 justify-between items-center">
<RabbitIcon className="mx-auto hidden md:block w-32 h-32" />
<div className="flex flex-col max-w-lg text-center md:text-start">
<h1 className="text-5xl font-bold flex items-center flex-col md:flex-row">Built for <SparklesText className="md:mx-2" text="speed" /></h1>
<p className="text-muted-foreground mt-3">
Zen is built with speed in mind. Improving release after release, with new optimizations and technologies to make your browsing experience faster.<br /><br />
We have been working and benchmarking Zen to make it the fastest browser out there.
Zen is engineered for speed, consistently outperforming competitors with every release, ensuring a faster browsing experience.
</p>
</div>
</div>
<div className="flex flex-col lg:flex-row w-full mt-52 p-5 justify-between items-center">
<div className="flex flex-col lg:flex-row w-full mt-20 p-5 justify-between items-center">
<div className="flex flex-col max-w-lg text-center md:text-start">
<h1 className="text-5xl font-bold flex flex-col md:flex-row items-center">Privacy is <SparklesText className="md:mx-2" text="key" /></h1>
<p className="text-muted-foreground mt-3">
Zen is designed with privacy in mind. We found the perfect balance between privacy and functionality, so you can browse the web without worrying about your data.
Zen strikes the perfect balance between privacy and usability, allowing you to browse without compromising your data.
</p>
</div>
<EyeClosedIcon className="mx-auto hidden md:block w-32 h-32" />
</div>
<div className="flex flex-col lg:flex-row w-full mt-52 p-5 justify-between items-center">
<div className="flex flex-col lg:flex-row w-full mt-20 p-5 justify-between items-center">
<LockClosedIcon className="mx-auto hidden md:block w-32 h-32" />
<div className="flex flex-col text-center md:text-start max-w-lg">
<h1 className="text-5xl font-bold items-center flex-col">Security is <SparklesText className="inline" text="important" /></h1>
<p className="text-muted-foreground mt-3">
Zen is built with security in mind. We use the latest technologies and security measures that no other firefox-based browser offers.
Zen incorporates advanced security technologies that outshine other Firefox-based browsers, keeping you safe online.
</p>
</div>
</div>
</div>
<div className="my-40 w-full flex items-center justify-center flex-col">
<div className="my-20 w-full flex items-center justify-center flex-col">
<h1 className="text-5xl text-center font-bold w-1/2">Want more?</h1>
<p className="text-muted-foreground text-center mt-3 w-1/2">
Zen Browser is packed with features that will change the way you
browse the web. Download it today and experience a new way to browse
the web.
Zen Browser is packed with features designed to revolutionize your browsing.
Download it today and experience a new way to explore 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." />
description="Zen offers an intuitive, aesthetically pleasing interface that’s easy to navigate." />
<FeatureCard title="Customizable"
description="Customize Zen to fit your needs. Change the theme, layout, and more." />
description="Personalize Zen to match your preferences with themes, layouts, and more." />
<FeatureCard title="Keyboard shortcuts"
description="Navigate Zen with ease using keyboard shortcuts." />
description="Boost your productivity with keyboard shortcuts tailored for efficiency." />
<FeatureCard title="Your browsing experience, your way"
description="Zen is designed to be customizable to fit your needs." />
description="Zen adapts to your needs, offering a browsing experience as unique as you." />
<FeatureCard title="Tab groups"
description="Organize your tabs into groups to keep your browsing experience organized."
description="Keep your browsing organized with tab groups that streamline your workflow."
todo />
<FeatureCard title="Vertical tabs"
description="Keep your tabs organized with vertical tabs." />
description="Maximize space and order with vertical tabs, designed for easy access." />
</div>
<Button
onClick={() => (window.location.href = "/download")}