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 Header from "@/components/header";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
|
||||
function imageLoader({ src }: { src: string }) {
|
||||
|
|
|
|||
|
|
@ -1,34 +1,12 @@
|
|||
import styled, { keyframes } from "styled-components";
|
||||
|
||||
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;
|
||||
`;
|
||||
import s from './styles.module.css'
|
||||
|
||||
export default function CoolHeaderText() {
|
||||
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">
|
||||
<TextTitle>
|
||||
<h1 className={s.title}>
|
||||
Stay focused, browse faster with Zen
|
||||
</TextTitle>
|
||||
</h1>
|
||||
</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">
|
||||
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 {
|
||||
BookmarkCheckIcon,
|
||||
CheckIcon,
|
||||
|
|
@ -6,34 +5,23 @@ import {
|
|||
EyeIcon,
|
||||
HeartHandshake,
|
||||
PaintBucket,
|
||||
ShieldAlertIcon,
|
||||
ShieldCheck,
|
||||
SidebarCloseIcon,
|
||||
SidebarIcon,
|
||||
SplitSquareHorizontal,
|
||||
XIcon,
|
||||
} from "lucide-react";
|
||||
import {
|
||||
EyeClosedIcon,
|
||||
Link1Icon,
|
||||
LockClosedIcon,
|
||||
QuestionMarkCircledIcon,
|
||||
QuestionMarkIcon,
|
||||
UpdateIcon,
|
||||
} from "@radix-ui/react-icons";
|
||||
import Link from "next/link";
|
||||
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 { FAQ } from "@/components/faq/faq";
|
||||
|
||||
function Checkmark() {
|
||||
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() {
|
||||
return (
|
||||
<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() {
|
||||
const [feature, setFeature] = useState("");
|
||||
return (
|
||||
<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">
|
||||
|
|
@ -345,158 +326,7 @@ export default function Features() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<FAQ />
|
||||
<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">
|
||||
<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 { useInView } from "framer-motion";
|
||||
import { useRef } from "react";
|
||||
import { Button } from "./ui/button";
|
||||
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() {
|
||||
const ref = useRef(null);
|
||||
const inView = useInView(ref, { once: true, margin: "-100px" });
|
||||
return (
|
||||
<>
|
||||
<section
|
||||
|
|
@ -24,20 +19,20 @@ export default function Header() {
|
|||
your data.
|
||||
</p>
|
||||
<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">
|
||||
<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
|
||||
</Link>
|
||||
<Link
|
||||
href="#features"
|
||||
className="-translate-y-4 animate-fade-up opacity-0 [--animation-delay:800ms]"
|
||||
>
|
||||
<Button variant="ghost" className="mt-4 md:ml-4 md:mt-0">
|
||||
Start Exploring <ChevronDown className="ml-1 size-4" />
|
||||
</Button>
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue