shellphone.app/app/public-area/pages/index.tsx

77 lines
2.5 KiB
TypeScript
Raw Normal View History

2021-08-25 08:52:24 +00:00
import type { BlitzPage } from "blitz";
2021-08-26 21:11:12 +00:00
import { Head } from "blitz";
2021-08-25 08:52:24 +00:00
import Header from "../components/header";
2021-08-26 21:11:12 +00:00
import Checkmark from "../components/checkmark";
2021-08-27 21:09:45 +00:00
import CTAForm from "../components/cta-form";
import PhoneMockup from "../components/phone-mockup";
import ReferralBanner from "../components/referral-banner";
2021-08-25 08:52:24 +00:00
const LandingPage: BlitzPage = () => {
return (
<>
<Head>
<title>Shellphone: Your Personal Cloud Phone</title>
<link
rel="preload"
href="/fonts/P22MackinacPro-ExtraBold.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
</Head>
2021-08-26 21:11:12 +00:00
<ReferralBanner />
2021-08-26 19:09:12 +00:00
<section className="font-inter antialiased bg-white text-gray-900 tracking-tight">
<section className="flex flex-col min-h-screen overflow-hidden">
<Header />
<main className="flex-grow">
<section>
<div className="max-w-6xl mx-auto px-4 sm:px-6">
2021-08-26 21:11:12 +00:00
<div className="pt-32 pb-10 md:pt-34 md:pb-16">
2021-08-26 19:09:12 +00:00
<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">
2021-08-26 21:37:03 +00:00
<h1 className="h1 lg:text-5xl mb-4 font-extrabold font-mackinac">
2021-08-26 22:00:22 +00:00
<strong className="bg-gradient-to-br from-primary-500 to-indigo-600 bg-clip-text decoration-clone text-transparent">
2021-08-26 21:37:03 +00:00
Take your phone number
</strong>
<br />
<strong className="text-[#24185B]">anywhere you go</strong>
2021-08-26 19:09:12 +00:00
</h1>
<p className="text-xl text-gray-600">
2021-08-26 21:11:12 +00:00
Coming soon! &#128026; Keep your phone number and pay less for your
communications, even abroad.
2021-08-26 19:09:12 +00:00
</p>
2021-08-27 21:09:45 +00:00
<CTAForm />
2021-08-26 19:09:12 +00:00
<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">
2021-08-26 21:11:12 +00:00
<Checkmark />
<span>Send and receive SMS messages.</span>
2021-08-26 19:09:12 +00:00
</li>
<li className="flex items-center mb-2">
2021-08-26 21:11:12 +00:00
<Checkmark />
<span>Make and receive phone calls.</span>
2021-08-26 19:09:12 +00:00
</li>
<li className="flex items-center mb-2">
2021-08-26 21:11:12 +00:00
<Checkmark />
<span>No download required.</span>
2021-08-26 19:09:12 +00:00
</li>
</ul>
</div>
2021-08-27 21:09:45 +00:00
<PhoneMockup />
2021-08-26 19:09:12 +00:00
</div>
</div>
</div>
</section>
</main>
</section>
2021-08-25 08:52:24 +00:00
</section>
</>
);
};
LandingPage.suppressFirstRenderFlicker = true;
export default LandingPage;