From d78fc4ec7c902313003d65eb48e537966c463729 Mon Sep 17 00:00:00 2001
From: aashirwadRunjan <aashirwad.ranjan.in@rupeek.com>
Date: Tue, 24 Sep 2024 17:05:54 +0530
Subject: [PATCH] improved the FAQ section

---
 src/components/features.tsx | 184 +++++++++++++++++++++---------------
 1 file changed, 108 insertions(+), 76 deletions(-)

diff --git a/src/components/features.tsx b/src/components/features.tsx
index 5e2538d..9971a65 100644
--- a/src/components/features.tsx
+++ b/src/components/features.tsx
@@ -85,7 +85,7 @@ function Question() {
 }
 
 export default function Features() {
-	const [feature, setFeature] = useState("item-1");
+	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">
@@ -395,47 +395,76 @@ 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={setFeature}
-						defaultValue="item-1"
-						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 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">
+					
+				<div className="relative h-auto overflow-hidden rounded-md lg:w-1/2">	
+					{feature === "" && (
+					<div className="flex items-center justify-center absolute h-full w-full">
+						<div className="flex flex-col items-center justify-center space-y-6 w-full">
+							<div className="flex w-full max-w-sm items-center justify-center h-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>
+							<div className="flex w-full max-w-sm items-center justify-center h-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>
+							<div className="flex w-full max-w-sm items-center justify-center h-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>
+						</div>
+					</div>
+
+					)}
+
+						{/* Show individual image when respective feature is selected */}
 					<CachedImage
 						width={1350}
 						height={900}
@@ -443,71 +472,74 @@ export default function Features() {
 						alt="Zen Browser"
 						className="robject-right ounded-md h-full w-full object-cover"
 					/>
-					{feature == "item-1" && (
+					{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>
+							<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"
-								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]"
+							href="https://github.com/zen-browser/desktop?tab=readme-ov-file#compatibility"
+							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 what version of Firefox Zen uses{" "}
-								<ExternalLinkIcon className="ml-4 h-4 w-4 opacity-50" />
+							See what version of Firefox Zen uses{" "}
+							<ExternalLinkIcon className="ml-4 h-4 w-4 opacity-50" />
 							</a>
 						</div>
 					)}
-					{feature == "item-2" && (
+
+					{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" />
+							<LockClosedIcon className="h-10 w-10" />{" "}
+							<span className="mx-4 text-4xl">+</span>{" "}
+							<EyeClosedIcon className="h-10 w-10" />
 							</div>
 							<a
-								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]"
+							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]"
 							>
-								Learn about Zen's privacy policy{" "}
-								<ExternalLinkIcon className="ml-4 h-4 w-4 opacity-50" />
+							Learn about Zen's privacy policy{" "}
+							<ExternalLinkIcon className="ml-4 h-4 w-4 opacity-50" />
 							</a>
 						</div>
 					)}
-					{feature == "item-3" && (
+
+					{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" />
+							<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]"
+							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" />
+							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="flex flex-col justify-center p-16 lg:w-1/2">
 					<h3 className="text-4xl font-medium text-gray-800 dark:text-gray-100">