Refactor heading tags in browser-slider and faq components

This commit is contained in:
mr. M 2024-10-15 13:14:27 +02:00
parent 4c5c96c59b
commit ee796931f2
No known key found for this signature in database
GPG key ID: CBD57A2AEDBDA1FB
2 changed files with 5 additions and 36 deletions

View file

@ -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

View file

@ -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}