From ee796931f2aeb1c46c9f21938a743ce18f4c551c Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Tue, 15 Oct 2024 13:14:27 +0200
Subject: [PATCH] Refactor heading tags in browser-slider and faq components

---
 src/components/browser-slider.tsx |  4 ++--
 src/components/faq/faq.tsx        | 37 +++----------------------------
 2 files changed, 5 insertions(+), 36 deletions(-)

diff --git a/src/components/browser-slider.tsx b/src/components/browser-slider.tsx
index ab866db..adeb212 100644
--- a/src/components/browser-slider.tsx
+++ b/src/components/browser-slider.tsx
@@ -9,9 +9,9 @@ export default function BrowserComplexityExample() {
 	const [selectedImage, setSelectedImage] = React.useState([1]);
 	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">
-			<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?
-			</h1>
+			</h2>
 			<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
 				software is the one that you don't notice. However, we can assure you
diff --git a/src/components/faq/faq.tsx b/src/components/faq/faq.tsx
index 61ecfdf..2ec9979 100644
--- a/src/components/faq/faq.tsx
+++ b/src/components/faq/faq.tsx
@@ -19,15 +19,15 @@ import Link from "next/link";
 import { useState } from "react";
 
 export const FAQ = () => {
-	const [feature, setFeature] = useState("");
+	const [feature, setFeature] = useState("item-1");
 
 	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">
+				<h2 className="text-4xl font-medium text-gray-800 dark:text-gray-100">
 					Frequently Asked Questions{" "}
 					<QuestionMarkCircledIcon className="inline h-8 w-8"></QuestionMarkCircledIcon>
-				</h1>
+				</h2>
 				<Accordion
 					type="single"
 					value={feature}
@@ -62,37 +62,6 @@ export const FAQ = () => {
 			</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}