From e16f51e36a8f882b1475693e906a81f16bd0b875 Mon Sep 17 00:00:00 2001
From: m5r <mokht@rmi.al>
Date: Sat, 28 Aug 2021 23:55:23 +0800
Subject: [PATCH] frequently asked questions

---
 app/public-area/components/faqs.tsx | 96 +++++++++++++++++++++++++++++
 app/public-area/components/hero.tsx | 44 +++++++++++++
 app/public-area/pages/index.tsx     | 45 ++------------
 3 files changed, 144 insertions(+), 41 deletions(-)
 create mode 100644 app/public-area/components/faqs.tsx
 create mode 100644 app/public-area/components/hero.tsx

diff --git a/app/public-area/components/faqs.tsx b/app/public-area/components/faqs.tsx
new file mode 100644
index 0000000..039645d
--- /dev/null
+++ b/app/public-area/components/faqs.tsx
@@ -0,0 +1,96 @@
+import type { FunctionComponent } from "react";
+import { Disclosure, Transition } from "@headlessui/react";
+import clsx from "clsx";
+
+export default function FAQs() {
+	return (
+		<section className="max-w-6xl mx-auto px-4 sm:px-6">
+			<div className="py-12 md:py-20 border-t border-gray-200">
+				<div className="max-w-3xl mx-auto text-center pb-20">
+					<h2 className="h2 font-mackinac">Questions & Answers</h2>
+				</div>
+
+				<ul className="max-w-3xl mx-auto pl-12">
+					<Accordion title="Do I need coding knowledge to use this product?">
+						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+						labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+						laboris nisi ut aliquip ex ea commodo consequat.
+					</Accordion>
+					<Accordion title="Do you have student or non-profit discounts?">
+						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+						labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+						laboris nisi ut aliquip ex ea commodo consequat.
+					</Accordion>
+					<Accordion title="Is there a way to become an Affiliate reseller of this product?">
+						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+						labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+						laboris nisi ut aliquip ex ea commodo consequat.
+					</Accordion>
+					<Accordion title="What is the difference between the Free and Paid versions?">
+						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+						labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+						laboris nisi ut aliquip ex ea commodo consequat.
+					</Accordion>
+					<Accordion title="How can I change the owner of a workspace?">
+						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
+						labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+						laboris nisi ut aliquip ex ea commodo consequat.
+					</Accordion>
+					<span className="block border-t border-gray-200" aria-hidden="true" />
+				</ul>
+			</div>
+		</section>
+	);
+}
+
+const Accordion: FunctionComponent<{ title: string }> = ({ title, children }) => {
+	return (
+		<Disclosure>
+			{({ open }) => (
+				<>
+					<Disclosure.Button className="flex items-center w-full text-lg font-medium text-left py-5 border-t border-gray-200">
+						<svg
+							className="w-4 h-4 fill-current text-blue-500 flex-shrink-0 mr-8 -ml-12"
+							viewBox="0 0 16 16"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<rect
+								y="7"
+								width="16"
+								height="2"
+								rx="1"
+								className={clsx("transform origin-center transition duration-200 ease-out", {
+									"rotate-180": open,
+								})}
+							/>
+							<rect
+								y="7"
+								width="16"
+								height="2"
+								rx="1"
+								className={clsx("transform origin-center transition duration-200 ease-out", {
+									"rotate-90": !open,
+									"rotate-180": open,
+								})}
+							/>
+						</svg>
+						<span>{title}</span>
+					</Disclosure.Button>
+
+					<Transition
+						enter="transition duration-300 ease-in-out"
+						enterFrom="transform scale-95 opacity-0"
+						enterTo="transform scale-100 opacity-100"
+						leave="transition duration-75 ease-out"
+						leaveFrom="transform scale-100 opacity-100"
+						leaveTo="transform scale-95 opacity-0"
+					>
+						<Disclosure.Panel className="text-gray-600 overflow-hidden">
+							<p className="pb-5">{children}</p>
+						</Disclosure.Panel>
+					</Transition>
+				</>
+			)}
+		</Disclosure>
+	);
+};
diff --git a/app/public-area/components/hero.tsx b/app/public-area/components/hero.tsx
new file mode 100644
index 0000000..86e626c
--- /dev/null
+++ b/app/public-area/components/hero.tsx
@@ -0,0 +1,44 @@
+import CTAForm from "./cta-form";
+import Checkmark from "./checkmark";
+import PhoneMockup from "./phone-mockup";
+
+export default function Hero() {
+	return (
+		<section className="max-w-6xl mx-auto px-4 sm:px-6">
+			<div className="pt-32 pb-10 md:pt-34 md:pb-20">
+				<div className="md:grid md:grid-cols-12 md:gap-12 lg:gap-20 items-center">
+					<div className="md:col-span-7 lg:col-span-7 mb-8 md:mb-0 text-center md:text-left">
+						<h1 className="h1 lg:text-5xl mb-4 font-extrabold font-mackinac">
+							<strong className="bg-gradient-to-br from-primary-500 to-indigo-600 bg-clip-text decoration-clone text-transparent">
+								Take your phone number
+							</strong>
+							<br />
+							<strong className="text-[#24185B]">anywhere you go</strong>
+						</h1>
+						<p className="text-xl text-gray-600">
+							Coming soon! &#128026; Keep your phone number and pay less for your communications, even
+							abroad.
+						</p>
+						<CTAForm />
+						<ul className="max-w-sm sm:max-w-md mx-auto md:max-w-none text-gray-600 mt-8 -mb-2">
+							<li className="flex items-center mb-2">
+								<Checkmark />
+								<span>Send and receive SMS messages.</span>
+							</li>
+							<li className="flex items-center mb-2">
+								<Checkmark />
+								<span>Make and receive phone calls.</span>
+							</li>
+							<li className="flex items-center mb-2">
+								<Checkmark />
+								<span>No download required.</span>
+							</li>
+						</ul>
+					</div>
+
+					<PhoneMockup />
+				</div>
+			</div>
+		</section>
+	);
+}
diff --git a/app/public-area/pages/index.tsx b/app/public-area/pages/index.tsx
index 4152438..7c2155c 100644
--- a/app/public-area/pages/index.tsx
+++ b/app/public-area/pages/index.tsx
@@ -2,10 +2,9 @@ import type { BlitzPage } from "blitz";
 import { Head } from "blitz";
 
 import Header from "../components/header";
-import Checkmark from "../components/checkmark";
-import CTAForm from "../components/cta-form";
-import PhoneMockup from "../components/phone-mockup";
 import ReferralBanner from "../components/referral-banner";
+import Hero from "../components/hero";
+import FAQs from "../components/faqs";
 
 const LandingPage: BlitzPage = () => {
 	return (
@@ -26,44 +25,8 @@ const LandingPage: BlitzPage = () => {
 					<Header />
 
 					<main className="flex-grow">
-						<section>
-							<div className="max-w-6xl mx-auto px-4 sm:px-6">
-								<div className="pt-32 pb-10 md:pt-34 md:pb-16">
-									<div className="md:grid md:grid-cols-12 md:gap-12 lg:gap-20 items-center">
-										<div className="md:col-span-7 lg:col-span-7 mb-8 md:mb-0 text-center md:text-left">
-											<h1 className="h1 lg:text-5xl mb-4 font-extrabold font-mackinac">
-												<strong className="bg-gradient-to-br from-primary-500 to-indigo-600 bg-clip-text decoration-clone text-transparent">
-													Take your phone number
-												</strong>
-												<br />
-												<strong className="text-[#24185B]">anywhere you go</strong>
-											</h1>
-											<p className="text-xl text-gray-600">
-												Coming soon! &#128026; Keep your phone number and pay less for your
-												communications, even abroad.
-											</p>
-											<CTAForm />
-											<ul className="max-w-sm sm:max-w-md mx-auto md:max-w-none text-gray-600 mt-8 -mb-2">
-												<li className="flex items-center mb-2">
-													<Checkmark />
-													<span>Send and receive SMS messages.</span>
-												</li>
-												<li className="flex items-center mb-2">
-													<Checkmark />
-													<span>Make and receive phone calls.</span>
-												</li>
-												<li className="flex items-center mb-2">
-													<Checkmark />
-													<span>No download required.</span>
-												</li>
-											</ul>
-										</div>
-
-										<PhoneMockup />
-									</div>
-								</div>
-							</div>
-						</section>
+						<Hero />
+						<FAQs />
 					</main>
 				</section>
 			</section>