frequently asked questions

This commit is contained in:
m5r 2021-08-28 23:55:23 +08:00
parent fca8dda685
commit e16f51e36a
3 changed files with 144 additions and 41 deletions

View File

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

View File

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

View File

@ -2,10 +2,9 @@ import type { BlitzPage } from "blitz";
import { Head } from "blitz"; import { Head } from "blitz";
import Header from "../components/header"; 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 ReferralBanner from "../components/referral-banner";
import Hero from "../components/hero";
import FAQs from "../components/faqs";
const LandingPage: BlitzPage = () => { const LandingPage: BlitzPage = () => {
return ( return (
@ -26,44 +25,8 @@ const LandingPage: BlitzPage = () => {
<Header /> <Header />
<main className="flex-grow"> <main className="flex-grow">
<section> <Hero />
<div className="max-w-6xl mx-auto px-4 sm:px-6"> <FAQs />
<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>
</main> </main>
</section> </section>
</section> </section>