frequently asked questions
This commit is contained in:
parent
fca8dda685
commit
e16f51e36a
96
app/public-area/components/faqs.tsx
Normal file
96
app/public-area/components/faqs.tsx
Normal 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>
|
||||
);
|
||||
};
|
||||
44
app/public-area/components/hero.tsx
Normal file
44
app/public-area/components/hero.tsx
Normal 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! 🐚 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>
|
||||
);
|
||||
}
|
||||
@ -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! 🐚 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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user