mirror of
https://github.com/zen-browser/www.git
synced 2025-07-10 18:25:31 +02:00
Moved some components rendering to server
This commit is contained in:
Zhenya Goroh
parent
a2a4396e81
commit
44e6645d73
7 changed files with 201 additions and 211 deletions
|
|
@ -1,5 +1,3 @@
|
||||||
"use client";
|
|
||||||
|
|
||||||
import Features from "@/components/features";
|
import Features from "@/components/features";
|
||||||
import Header from "@/components/header";
|
import Header from "@/components/header";
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
|
|
||||||
function imageLoader({ src }: { src: string }) {
|
function imageLoader({ src }: { src: string }) {
|
||||||
|
|
|
||||||
|
|
@ -1,34 +1,12 @@
|
||||||
import styled, { keyframes } from "styled-components";
|
import s from './styles.module.css'
|
||||||
|
|
||||||
const hueShift = keyframes`
|
|
||||||
0% {
|
|
||||||
filter: hue-rotate(0deg);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
filter: hue-rotate(170deg);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
filter: hue-rotate(0deg);
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const TextTitle = styled.h1`
|
|
||||||
background-clip: text;
|
|
||||||
background-image: linear-gradient(90deg, #0077e7, #01d8d1);
|
|
||||||
filter: hue-rotate(0deg);
|
|
||||||
animation: ${hueShift} 10s infinite linear 1s;
|
|
||||||
padding-bottom: 8px;
|
|
||||||
user-select: none;
|
|
||||||
cursor: default;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export default function CoolHeaderText() {
|
export default function CoolHeaderText() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="relative mb-3 mt-5 -translate-y-4 animate-fade-in text-balance bg-gradient-to-br from-30% to-black/40 bg-clip-text py-6 text-5xl font-extrabold font-semibold leading-none tracking-tighter text-transparent opacity-0 [--animation-delay:200ms] dark:from-white dark:to-white/40 sm:text-6xl md:text-7xl lg:text-8xl">
|
<div className="relative mb-3 mt-5 -translate-y-4 animate-fade-in text-balance bg-gradient-to-br from-30% to-black/40 bg-clip-text py-6 text-5xl font-extrabold font-semibold leading-none tracking-tighter text-transparent opacity-0 [--animation-delay:200ms] dark:from-white dark:to-white/40 sm:text-6xl md:text-7xl lg:text-8xl">
|
||||||
<TextTitle>
|
<h1 className={s.title}>
|
||||||
Stay focused, browse faster with Zen
|
Stay focused, browse faster with Zen
|
||||||
</TextTitle>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
<div className="pointer-events-none absolute right-20 top-[-5px] mt-12 hidden h-fit w-fit !rotate-[15deg] transform animate-fade-in rounded-full bg-blue-500 px-3 py-1 text-white opacity-0 shadow [--animation-delay:400ms] md:block">
|
<div className="pointer-events-none absolute right-20 top-[-5px] mt-12 hidden h-fit w-fit !rotate-[15deg] transform animate-fade-in rounded-full bg-blue-500 px-3 py-1 text-white opacity-0 shadow [--animation-delay:400ms] md:block">
|
||||||
Alpha Version
|
Alpha Version
|
||||||
24
src/components/cool-header-text/styles.module.css
Normal file
24
src/components/cool-header-text/styles.module.css
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
@keyframes hueShift {
|
||||||
|
0% {
|
||||||
|
filter: hue-rotate(0deg);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
filter: hue-rotate(170deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
filter: hue-rotate(0deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
background-clip: text;
|
||||||
|
background-image: linear-gradient(90deg, #0077e7, #01d8d1);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
filter: hue-rotate(0deg);
|
||||||
|
animation: hueShift 10s infinite linear 1s;
|
||||||
|
padding-bottom: 8px;
|
||||||
|
user-select: none;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
163
src/components/faq/faq.tsx
Normal file
163
src/components/faq/faq.tsx
Normal file
|
|
@ -0,0 +1,163 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import CachedImage from "@/components/CachedImage";
|
||||||
|
import Logo from "@/components/logo";
|
||||||
|
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
|
||||||
|
import { ExternalLinkIcon, EyeClosedIcon, LockClosedIcon, QuestionMarkCircledIcon } from "@radix-ui/react-icons";
|
||||||
|
import { ShieldCheck, ShieldAlertIcon } from "lucide-react";
|
||||||
|
import Link from "next/link";
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
export const FAQ = () => {
|
||||||
|
const [feature, setFeature] = useState("");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="mx-auto mt-36 flex w-full flex-col bg-surface shadow md:w-5/6 md:rounded-md lg:w-3/4 lg:flex-row">
|
||||||
|
<div className="relative flex w-full flex-col justify-center p-5 lg:w-1/2 lg:p-12">
|
||||||
|
<h1 className="text-4xl font-medium text-gray-800 dark:text-gray-100">
|
||||||
|
Frequently Asked Questions{" "}
|
||||||
|
<QuestionMarkCircledIcon className="inline h-8 w-8"></QuestionMarkCircledIcon>
|
||||||
|
</h1>
|
||||||
|
<Accordion
|
||||||
|
type="single"
|
||||||
|
value={feature}
|
||||||
|
onValueChange={(value) => setFeature(value === feature ? "" : value)}
|
||||||
|
className="mt-8"
|
||||||
|
>
|
||||||
|
<AccordionItem value="item-1">
|
||||||
|
<AccordionTrigger>Is it Firefox based?</AccordionTrigger>
|
||||||
|
<AccordionContent>
|
||||||
|
Yes, Zen Browser is focused on being always at the latest version
|
||||||
|
of Firefox, ensuring that you have the latest security updates and
|
||||||
|
features.
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
<AccordionItem value="item-2">
|
||||||
|
<AccordionTrigger>Does it track me?</AccordionTrigger>
|
||||||
|
<AccordionContent>
|
||||||
|
<strong>No!</strong> Zen Browser is built with privacy in mind. We
|
||||||
|
don't track you, we don't collect your data, and we don't sell
|
||||||
|
your data to third parties.
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
<AccordionItem value="item-3">
|
||||||
|
<AccordionTrigger>How secure is Zen Browser?</AccordionTrigger>
|
||||||
|
<AccordionContent>
|
||||||
|
Zen Browser is built on top of Firefox, which is known for its
|
||||||
|
security features. We also have additional security features like
|
||||||
|
HTTPS only built into Zen Browser to help keep you safe online.
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
</Accordion>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative h-auto overflow-hidden rounded-md lg:w-1/2">
|
||||||
|
{feature === "" && (
|
||||||
|
<div className="absolute flex h-full w-full items-center justify-center">
|
||||||
|
<div className="flex w-full flex-col items-center justify-center space-y-6">
|
||||||
|
<div className="flex h-fit w-full max-w-sm animate-fade-in items-center justify-center rounded-full border-2 border-white bg-surface p-4 shadow">
|
||||||
|
<Logo className="h-10 w-10" />
|
||||||
|
<span className="mx-4 text-4xl">+</span>
|
||||||
|
<svg
|
||||||
|
className="relative h-10 w-10 dark:fill-white"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fillOpacity="context-fill-opacity"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
style={{ transform: "scale(2) translate(5%, 5%)" }}
|
||||||
|
d="M10.39 0C8.948.788 7.987 2.025 7.767 3.66c-1.017.162-1.768.781-1.768.781s.72-.44 1.736-.511a4.04 4.04 0 0 1 3.789 2.034s-.758-.62-1.928-.468c1.315.68 1.872 2.002 1.701 3.369-.17 1.367-1.183 2.435-2.354 2.723-1.171.287-2.333.099-3.229-.61-.896-.708-1.251-1.533-1.305-2.254.213-.533.541-.812 1.1-1.092.558-.279 1.422-.283 1.572-.283s.8-.507.95-.894c-.726-.363-1.292-.65-1.696-.934-.404-.283-.492-.534-1.012-.898-.307-1.006-.021-1.955-.021-1.955s-1.043.437-1.93 1.49c0 0-.342-.338-.28-2.006-.427.155-1.366 1.004-1.947 1.92a7.277 7.277 0 0 0-.798 1.723A8.296 8.296 0 0 0-.003 8a8 8 0 0 0 16 0c0-2.256-.93-4.252-2.188-5.002 0 0 .542.932.813 2.43-.4-1.04-1.235-2.166-1.877-2.844-.643-.678-2.068-1.88-2.357-2.584z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div className="flex h-fit w-full max-w-sm animate-fade-in items-center justify-center rounded-full border-2 border-white bg-surface p-4 shadow">
|
||||||
|
<LockClosedIcon className="h-10 w-10" />
|
||||||
|
<span className="mx-4 text-4xl">+</span>
|
||||||
|
<EyeClosedIcon className="h-10 w-10" />
|
||||||
|
</div>
|
||||||
|
<div className="flex h-fit w-full max-w-sm animate-fade-in items-center justify-center rounded-full border-2 border-white bg-surface p-4 shadow">
|
||||||
|
<ShieldCheck className="h-10 w-10" />
|
||||||
|
<span className="mx-4 text-4xl">+</span>
|
||||||
|
<ShieldAlertIcon className="h-10 w-10" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<CachedImage
|
||||||
|
width={1350}
|
||||||
|
height={900}
|
||||||
|
src="www/public/feature-item-1.png"
|
||||||
|
alt="Zen Browser"
|
||||||
|
className="robject-right ounded-md h-full w-full object-cover"
|
||||||
|
/>
|
||||||
|
{feature === "item-1" && (
|
||||||
|
<div className="absolute left-0 top-0 grid h-full w-full grid-rows-3">
|
||||||
|
<div></div>
|
||||||
|
<div className="tems-center m-auto flex h-fit w-fit animate-fade-in rounded-full border-2 border-white bg-surface p-4 shadow">
|
||||||
|
<Logo className="h-10 w-10" />{" "}
|
||||||
|
<span className="mx-4 text-4xl">+</span>{" "}
|
||||||
|
<svg
|
||||||
|
className="relative h-10 w-10 dark:fill-white"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fillOpacity="context-fill-opacity"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
style={{ transform: "scale(2) translate(5%, 5%)" }}
|
||||||
|
d="M10.39 0C8.948.788 7.987 2.025 7.767 3.66c-1.017.162-1.768.781-1.768.781s.72-.44 1.736-.511a4.04 4.04 0 0 1 3.789 2.034s-.758-.62-1.928-.468c1.315.68 1.872 2.002 1.701 3.369-.17 1.367-1.183 2.435-2.354 2.723-1.171.287-2.333.099-3.229-.61-.896-.708-1.251-1.533-1.305-2.254.213-.533.541-.812 1.1-1.092.558-.279 1.422-.283 1.572-.283s.8-.507.95-.894c-.726-.363-1.292-.65-1.696-.934-.404-.283-.492-.534-1.012-.898-.307-1.006-.021-1.955-.021-1.955s-1.043.437-1.93 1.49c0 0-.342-.338-.28-2.006-.427.155-1.366 1.004-1.947 1.92a7.277 7.277 0 0 0-.798 1.723A8.296 8.296 0 0 0-.003 8a8 8 0 0 0 16 0c0-2.256-.93-4.252-2.188-5.002 0 0 .542.932.813 2.43-.4-1.04-1.235-2.166-1.877-2.844-.643-.678-2.068-1.88-2.357-2.584z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
href="https://github.com/zen-browser/desktop?tab=readme-ov-file#compatibility"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="tems-center m-auto flex h-fit w-fit animate-fade-in items-center rounded-full border-2 border-white bg-surface p-4 opacity-0 shadow [--animation-delay:300ms]"
|
||||||
|
>
|
||||||
|
See what version of Firefox Zen uses{" "}
|
||||||
|
<ExternalLinkIcon className="ml-4 h-4 w-4 opacity-50" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{feature === "item-2" && (
|
||||||
|
<div className="absolute left-0 top-0 grid h-full w-full grid-rows-3">
|
||||||
|
<div></div>
|
||||||
|
<div className="tems-center m-auto flex h-fit w-fit animate-fade-in rounded-full border-2 border-white bg-surface p-4 shadow">
|
||||||
|
<LockClosedIcon className="h-10 w-10" />{" "}
|
||||||
|
<span className="mx-4 text-4xl">+</span>{" "}
|
||||||
|
<EyeClosedIcon className="h-10 w-10" />
|
||||||
|
</div>
|
||||||
|
<Link
|
||||||
|
href="/privacy-policy"
|
||||||
|
target="_blank"
|
||||||
|
className="tems-center m-auto flex h-fit w-fit animate-fade-in items-center rounded-full border-2 border-white bg-surface p-4 opacity-0 shadow [--animation-delay:300ms]"
|
||||||
|
prefetch={false}
|
||||||
|
>
|
||||||
|
Learn about Zen's privacy policy{" "}
|
||||||
|
<ExternalLinkIcon className="ml-4 h-4 w-4 opacity-50" />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{feature === "item-3" && (
|
||||||
|
<div className="absolute left-0 top-0 grid h-full w-full grid-rows-3">
|
||||||
|
<div></div>
|
||||||
|
<div className="tems-center m-auto flex h-fit w-fit animate-fade-in rounded-full border-2 border-white bg-surface p-4 shadow">
|
||||||
|
<ShieldCheck className="h-10 w-10" />{" "}
|
||||||
|
<span className="mx-4 text-4xl">+</span>{" "}
|
||||||
|
<ShieldAlertIcon className="h-10 w-10" />
|
||||||
|
</div>
|
||||||
|
<a
|
||||||
|
href="https://docs.zen-browser.app/security"
|
||||||
|
target="_blank"
|
||||||
|
className="tems-center m-auto flex h-fit w-fit animate-fade-in items-center rounded-full border-2 border-white bg-surface p-4 opacity-0 shadow [--animation-delay:300ms]"
|
||||||
|
>
|
||||||
|
See how Zen keeps you safe{" "}
|
||||||
|
<ExternalLinkIcon className="ml-4 h-4 w-4 opacity-50" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
"use client";
|
|
||||||
import {
|
import {
|
||||||
BookmarkCheckIcon,
|
BookmarkCheckIcon,
|
||||||
CheckIcon,
|
CheckIcon,
|
||||||
|
|
@ -6,34 +5,23 @@ import {
|
||||||
EyeIcon,
|
EyeIcon,
|
||||||
HeartHandshake,
|
HeartHandshake,
|
||||||
PaintBucket,
|
PaintBucket,
|
||||||
ShieldAlertIcon,
|
|
||||||
ShieldCheck,
|
|
||||||
SidebarCloseIcon,
|
SidebarCloseIcon,
|
||||||
SidebarIcon,
|
SidebarIcon,
|
||||||
SplitSquareHorizontal,
|
SplitSquareHorizontal,
|
||||||
XIcon,
|
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import {
|
import {
|
||||||
EyeClosedIcon,
|
|
||||||
Link1Icon,
|
Link1Icon,
|
||||||
LockClosedIcon,
|
LockClosedIcon,
|
||||||
QuestionMarkCircledIcon,
|
|
||||||
QuestionMarkIcon,
|
QuestionMarkIcon,
|
||||||
UpdateIcon,
|
UpdateIcon,
|
||||||
} from "@radix-ui/react-icons";
|
} from "@radix-ui/react-icons";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { Button } from "./ui/button";
|
import { Button } from "./ui/button";
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
import React, { useState } from "react";
|
|
||||||
import {
|
|
||||||
Accordion,
|
|
||||||
AccordionContent,
|
|
||||||
AccordionItem,
|
|
||||||
AccordionTrigger,
|
|
||||||
} from "./ui/accordion";
|
|
||||||
import Logo from "./logo";
|
|
||||||
import CachedImage from "./CachedImage";
|
import CachedImage from "./CachedImage";
|
||||||
|
import { FAQ } from "@/components/faq/faq";
|
||||||
|
|
||||||
function Checkmark() {
|
function Checkmark() {
|
||||||
return (
|
return (
|
||||||
|
|
@ -41,12 +29,6 @@ function Checkmark() {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function Cross() {
|
|
||||||
return (
|
|
||||||
<XIcon className="h-7 w-7 rounded-full bg-red-500 p-1 text-black dark:bg-red-400" />
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function Question() {
|
function Question() {
|
||||||
return (
|
return (
|
||||||
<QuestionMarkIcon className="h-7 w-7 rounded-full bg-yellow-500 p-1 text-black dark:bg-yellow-400" />
|
<QuestionMarkIcon className="h-7 w-7 rounded-full bg-yellow-500 p-1 text-black dark:bg-yellow-400" />
|
||||||
|
|
@ -54,7 +36,6 @@ function Question() {
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Features() {
|
export default function Features() {
|
||||||
const [feature, setFeature] = useState("");
|
|
||||||
return (
|
return (
|
||||||
<section className="w-full flex-col" id="features">
|
<section className="w-full flex-col" id="features">
|
||||||
<div className="mx-auto mt-16 flex w-full flex-col bg-surface shadow md:w-5/6 md:rounded-md lg:w-3/4 lg:flex-row">
|
<div className="mx-auto mt-16 flex w-full flex-col bg-surface shadow md:w-5/6 md:rounded-md lg:w-3/4 lg:flex-row">
|
||||||
|
|
@ -345,158 +326,7 @@ export default function Features() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<FAQ />
|
||||||
<div className="mx-auto mt-36 flex w-full flex-col bg-surface shadow md:w-5/6 md:rounded-md lg:w-3/4 lg:flex-row">
|
|
||||||
<div className="relative flex w-full flex-col justify-center p-5 lg:w-1/2 lg:p-12">
|
|
||||||
<h1 className="text-4xl font-medium text-gray-800 dark:text-gray-100">
|
|
||||||
Frequently Asked Questions{" "}
|
|
||||||
<QuestionMarkCircledIcon className="inline h-8 w-8"></QuestionMarkCircledIcon>
|
|
||||||
</h1>
|
|
||||||
<Accordion
|
|
||||||
type="single"
|
|
||||||
value={feature}
|
|
||||||
onValueChange={(value) =>
|
|
||||||
setFeature(value === feature ? "" : value)
|
|
||||||
}
|
|
||||||
className="mt-8"
|
|
||||||
>
|
|
||||||
<AccordionItem value="item-1">
|
|
||||||
<AccordionTrigger>Is it Firefox based?</AccordionTrigger>
|
|
||||||
<AccordionContent>
|
|
||||||
Yes, Zen Browser is focused on being always at the latest
|
|
||||||
version of Firefox, ensuring that you have the latest security
|
|
||||||
updates and features.
|
|
||||||
</AccordionContent>
|
|
||||||
</AccordionItem>
|
|
||||||
<AccordionItem value="item-2">
|
|
||||||
<AccordionTrigger>Does it track me?</AccordionTrigger>
|
|
||||||
<AccordionContent>
|
|
||||||
<strong>No!</strong> Zen Browser is built with privacy in mind.
|
|
||||||
We don't track you, we don't collect your data, and we don't
|
|
||||||
sell your data to third parties.
|
|
||||||
</AccordionContent>
|
|
||||||
</AccordionItem>
|
|
||||||
<AccordionItem value="item-3">
|
|
||||||
<AccordionTrigger>How secure is Zen Browser?</AccordionTrigger>
|
|
||||||
<AccordionContent>
|
|
||||||
Zen Browser is built on top of Firefox, which is known for its
|
|
||||||
security features. We also have additional security features
|
|
||||||
like HTTPS only built into Zen Browser to help keep you safe
|
|
||||||
online.
|
|
||||||
</AccordionContent>
|
|
||||||
</AccordionItem>
|
|
||||||
</Accordion>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="relative h-auto overflow-hidden rounded-md lg:w-1/2">
|
|
||||||
{feature === "" && (
|
|
||||||
<div className="absolute flex h-full w-full items-center justify-center">
|
|
||||||
<div className="flex w-full flex-col items-center justify-center space-y-6">
|
|
||||||
<div className="flex h-fit w-full max-w-sm animate-fade-in items-center justify-center rounded-full border-2 border-white bg-surface p-4 shadow">
|
|
||||||
<Logo className="h-10 w-10" />
|
|
||||||
<span className="mx-4 text-4xl">+</span>
|
|
||||||
<svg
|
|
||||||
className="relative h-10 w-10 dark:fill-white"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
fillOpacity="context-fill-opacity"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
style={{ transform: "scale(2) translate(5%, 5%)" }}
|
|
||||||
d="M10.39 0C8.948.788 7.987 2.025 7.767 3.66c-1.017.162-1.768.781-1.768.781s.72-.44 1.736-.511a4.04 4.04 0 0 1 3.789 2.034s-.758-.62-1.928-.468c1.315.68 1.872 2.002 1.701 3.369-.17 1.367-1.183 2.435-2.354 2.723-1.171.287-2.333.099-3.229-.61-.896-.708-1.251-1.533-1.305-2.254.213-.533.541-.812 1.1-1.092.558-.279 1.422-.283 1.572-.283s.8-.507.95-.894c-.726-.363-1.292-.65-1.696-.934-.404-.283-.492-.534-1.012-.898-.307-1.006-.021-1.955-.021-1.955s-1.043.437-1.93 1.49c0 0-.342-.338-.28-2.006-.427.155-1.366 1.004-1.947 1.92a7.277 7.277 0 0 0-.798 1.723A8.296 8.296 0 0 0-.003 8a8 8 0 0 0 16 0c0-2.256-.93-4.252-2.188-5.002 0 0 .542.932.813 2.43-.4-1.04-1.235-2.166-1.877-2.844-.643-.678-2.068-1.88-2.357-2.584z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div className="flex h-fit w-full max-w-sm animate-fade-in items-center justify-center rounded-full border-2 border-white bg-surface p-4 shadow">
|
|
||||||
<LockClosedIcon className="h-10 w-10" />
|
|
||||||
<span className="mx-4 text-4xl">+</span>
|
|
||||||
<EyeClosedIcon className="h-10 w-10" />
|
|
||||||
</div>
|
|
||||||
<div className="flex h-fit w-full max-w-sm animate-fade-in items-center justify-center rounded-full border-2 border-white bg-surface p-4 shadow">
|
|
||||||
<ShieldCheck className="h-10 w-10" />
|
|
||||||
<span className="mx-4 text-4xl">+</span>
|
|
||||||
<ShieldAlertIcon className="h-10 w-10" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<CachedImage
|
|
||||||
width={1350}
|
|
||||||
height={900}
|
|
||||||
src="www/public/feature-item-1.png"
|
|
||||||
alt="Zen Browser"
|
|
||||||
className="robject-right ounded-md h-full w-full object-cover"
|
|
||||||
/>
|
|
||||||
{feature === "item-1" && (
|
|
||||||
<div className="absolute left-0 top-0 grid h-full w-full grid-rows-3">
|
|
||||||
<div></div>
|
|
||||||
<div className="tems-center m-auto flex h-fit w-fit animate-fade-in rounded-full border-2 border-white bg-surface p-4 shadow">
|
|
||||||
<Logo className="h-10 w-10" />{" "}
|
|
||||||
<span className="mx-4 text-4xl">+</span>{" "}
|
|
||||||
<svg
|
|
||||||
className="relative h-10 w-10 dark:fill-white"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
fillOpacity="context-fill-opacity"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
style={{ transform: "scale(2) translate(5%, 5%)" }}
|
|
||||||
d="M10.39 0C8.948.788 7.987 2.025 7.767 3.66c-1.017.162-1.768.781-1.768.781s.72-.44 1.736-.511a4.04 4.04 0 0 1 3.789 2.034s-.758-.62-1.928-.468c1.315.68 1.872 2.002 1.701 3.369-.17 1.367-1.183 2.435-2.354 2.723-1.171.287-2.333.099-3.229-.61-.896-.708-1.251-1.533-1.305-2.254.213-.533.541-.812 1.1-1.092.558-.279 1.422-.283 1.572-.283s.8-.507.95-.894c-.726-.363-1.292-.65-1.696-.934-.404-.283-.492-.534-1.012-.898-.307-1.006-.021-1.955-.021-1.955s-1.043.437-1.93 1.49c0 0-.342-.338-.28-2.006-.427.155-1.366 1.004-1.947 1.92a7.277 7.277 0 0 0-.798 1.723A8.296 8.296 0 0 0-.003 8a8 8 0 0 0 16 0c0-2.256-.93-4.252-2.188-5.002 0 0 .542.932.813 2.43-.4-1.04-1.235-2.166-1.877-2.844-.643-.678-2.068-1.88-2.357-2.584z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<a
|
|
||||||
href="https://github.com/zen-browser/desktop?tab=readme-ov-file#compatibility"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="tems-center m-auto flex h-fit w-fit animate-fade-in items-center rounded-full border-2 border-white bg-surface p-4 opacity-0 shadow [--animation-delay:300ms]"
|
|
||||||
>
|
|
||||||
See what version of Firefox Zen uses{" "}
|
|
||||||
<ExternalLinkIcon className="ml-4 h-4 w-4 opacity-50" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{feature === "item-2" && (
|
|
||||||
<div className="absolute left-0 top-0 grid h-full w-full grid-rows-3">
|
|
||||||
<div></div>
|
|
||||||
<div className="tems-center m-auto flex h-fit w-fit animate-fade-in rounded-full border-2 border-white bg-surface p-4 shadow">
|
|
||||||
<LockClosedIcon className="h-10 w-10" />{" "}
|
|
||||||
<span className="mx-4 text-4xl">+</span>{" "}
|
|
||||||
<EyeClosedIcon className="h-10 w-10" />
|
|
||||||
</div>
|
|
||||||
<Link
|
|
||||||
href="/privacy-policy"
|
|
||||||
target="_blank"
|
|
||||||
className="tems-center m-auto flex h-fit w-fit animate-fade-in items-center rounded-full border-2 border-white bg-surface p-4 opacity-0 shadow [--animation-delay:300ms]"
|
|
||||||
prefetch={false}
|
|
||||||
>
|
|
||||||
Learn about Zen's privacy policy{" "}
|
|
||||||
<ExternalLinkIcon className="ml-4 h-4 w-4 opacity-50" />
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{feature === "item-3" && (
|
|
||||||
<div className="absolute left-0 top-0 grid h-full w-full grid-rows-3">
|
|
||||||
<div></div>
|
|
||||||
<div className="tems-center m-auto flex h-fit w-fit animate-fade-in rounded-full border-2 border-white bg-surface p-4 shadow">
|
|
||||||
<ShieldCheck className="h-10 w-10" />{" "}
|
|
||||||
<span className="mx-4 text-4xl">+</span>{" "}
|
|
||||||
<ShieldAlertIcon className="h-10 w-10" />
|
|
||||||
</div>
|
|
||||||
<a
|
|
||||||
href="https://docs.zen-browser.app/security"
|
|
||||||
target="_blank"
|
|
||||||
className="tems-center m-auto flex h-fit w-fit animate-fade-in items-center rounded-full border-2 border-white bg-surface p-4 opacity-0 shadow [--animation-delay:300ms]"
|
|
||||||
>
|
|
||||||
See how Zen keeps you safe{" "}
|
|
||||||
<ExternalLinkIcon className="ml-4 h-4 w-4 opacity-50" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mx-auto mt-36 flex w-full flex-col bg-surface p-5 shadow md:w-5/6 md:rounded-md lg:w-3/4 lg:flex-row lg:p-12">
|
<div className="mx-auto mt-36 flex w-full flex-col bg-surface p-5 shadow md:w-5/6 md:rounded-md lg:w-3/4 lg:flex-row lg:p-12">
|
||||||
<div className="flex flex-col justify-center p-16 lg:w-1/2">
|
<div className="flex flex-col justify-center p-16 lg:w-1/2">
|
||||||
<h3 className="text-4xl font-medium text-gray-800 dark:text-gray-100">
|
<h3 className="text-4xl font-medium text-gray-800 dark:text-gray-100">
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,9 @@
|
||||||
"use client";
|
|
||||||
|
|
||||||
import { ArrowRightIcon } from "@radix-ui/react-icons";
|
import { ArrowRightIcon } from "@radix-ui/react-icons";
|
||||||
import { useInView } from "framer-motion";
|
|
||||||
import { useRef } from "react";
|
|
||||||
import { Button } from "./ui/button";
|
import { Button } from "./ui/button";
|
||||||
import { ChevronDown } from "lucide-react";
|
import { ChevronDown } from "lucide-react";
|
||||||
import CoolHeaderText from "./cool-header-text";
|
import CoolHeaderText from "./cool-header-text/cool-header-text";
|
||||||
|
import Link from "next/link";
|
||||||
export default function Header() {
|
export default function Header() {
|
||||||
const ref = useRef(null);
|
|
||||||
const inView = useInView(ref, { once: true, margin: "-100px" });
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<section
|
<section
|
||||||
|
|
@ -24,20 +19,20 @@ export default function Header() {
|
||||||
your data.
|
your data.
|
||||||
</p>
|
</p>
|
||||||
<div className="flex w-full flex-col justify-center md:flex-row">
|
<div className="flex w-full flex-col justify-center md:flex-row">
|
||||||
<a href="/download">
|
<Link href="/download" prefetch={false}>
|
||||||
<Button className="-translate-y-4 animate-fade-in gap-1 text-white opacity-0 ease-in-out [--animation-delay:600ms] dark:text-black">
|
<Button className="-translate-y-4 animate-fade-in gap-1 text-white opacity-0 ease-in-out [--animation-delay:600ms] dark:text-black">
|
||||||
<span>Download Zen Now </span>
|
<span>Download Zen Now </span>
|
||||||
<ArrowRightIcon className="ml-1 size-4 transition-transform duration-300 ease-in-out group-hover:translate-x-1" />
|
<ArrowRightIcon className="ml-1 size-4 transition-transform duration-300 ease-in-out group-hover:translate-x-1" />
|
||||||
</Button>
|
</Button>
|
||||||
</a>
|
</Link>
|
||||||
<a
|
<Link
|
||||||
href="#features"
|
href="#features"
|
||||||
className="-translate-y-4 animate-fade-up opacity-0 [--animation-delay:800ms]"
|
className="-translate-y-4 animate-fade-up opacity-0 [--animation-delay:800ms]"
|
||||||
>
|
>
|
||||||
<Button variant="ghost" className="mt-4 md:ml-4 md:mt-0">
|
<Button variant="ghost" className="mt-4 md:ml-4 md:mt-0">
|
||||||
Start Exploring <ChevronDown className="ml-1 size-4" />
|
Start Exploring <ChevronDown className="ml-1 size-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</a>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</>
|
</>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue