mirror of
https://github.com/zen-browser/www.git
synced 2025-07-08 09:20:00 +02:00
Refactor heading tags in browser-slider and faq components
This commit is contained in:
parent
4c5c96c59b
commit
ee796931f2
2 changed files with 5 additions and 36 deletions
|
@ -9,9 +9,9 @@ export default function BrowserComplexityExample() {
|
||||||
const [selectedImage, setSelectedImage] = React.useState([1]);
|
const [selectedImage, setSelectedImage] = React.useState([1]);
|
||||||
return (
|
return (
|
||||||
<div className="mx-auto mb-32 flex h-screen w-full flex-col items-center md:w-5/6 lg:w-3/4 xl:mb-64">
|
<div className="mx-auto mb-32 flex h-screen w-full flex-col items-center md:w-5/6 lg:w-3/4 xl:mb-64">
|
||||||
<h1 className="text-center text-4xl font-bold md:text-5xl">
|
<h2 className="text-center text-4xl font-bold md:text-5xl">
|
||||||
How much browser do you want?
|
How much browser do you want?
|
||||||
</h1>
|
</h2>
|
||||||
<p className="text-md mx-auto mt-4 w-2/3 text-center text-muted-foreground">
|
<p className="text-md mx-auto mt-4 w-2/3 text-center text-muted-foreground">
|
||||||
Zen is designed to be simple and easy to use. We believe that the best
|
Zen is designed to be simple and easy to use. We believe that the best
|
||||||
software is the one that you don't notice. However, we can assure you
|
software is the one that you don't notice. However, we can assure you
|
||||||
|
|
|
@ -19,15 +19,15 @@ import Link from "next/link";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
|
|
||||||
export const FAQ = () => {
|
export const FAQ = () => {
|
||||||
const [feature, setFeature] = useState("");
|
const [feature, setFeature] = useState("item-1");
|
||||||
|
|
||||||
return (
|
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="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">
|
<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">
|
<h2 className="text-4xl font-medium text-gray-800 dark:text-gray-100">
|
||||||
Frequently Asked Questions{" "}
|
Frequently Asked Questions{" "}
|
||||||
<QuestionMarkCircledIcon className="inline h-8 w-8"></QuestionMarkCircledIcon>
|
<QuestionMarkCircledIcon className="inline h-8 w-8"></QuestionMarkCircledIcon>
|
||||||
</h1>
|
</h2>
|
||||||
<Accordion
|
<Accordion
|
||||||
type="single"
|
type="single"
|
||||||
value={feature}
|
value={feature}
|
||||||
|
@ -62,37 +62,6 @@ export const FAQ = () => {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="relative h-auto overflow-hidden rounded-md lg:w-1/2">
|
<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
|
<CachedImage
|
||||||
width={1350}
|
width={1350}
|
||||||
height={900}
|
height={900}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue