rename landing-page directory to public-area

app/public-area/components/checkmark.tsx

@@ -0,0 +1,11 @@
+export default function Checkmark() {
+	return (
+		<svg
+			className="w-3 h-3 fill-current text-primary-400 mr-2 flex-shrink-0"
+			viewBox="0 0 12 12"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path d="M10.28 2.28L3.989 8.575 1.695 6.28A1 1 0 00.28 7.695l3 3a1 1 0 001.414 0l7-7A1 1 0 0010.28 2.28z" />
+		</svg>
+	);
+}

app/public-area/components/cta-form.tsx

@@ -0,0 +1,46 @@
+import { useMutation } from "blitz";
+import { useForm } from "react-hook-form";
+
+import joinWaitlist from "../mutations/join-waitlist";
+
+type Form = {
+	email: string;
+};
+
+export default function CTAForm() {
+	const [joinWaitlistMutation] = useMutation(joinWaitlist);
+	const {
+		handleSubmit,
+		register,
+		formState: { isSubmitted },
+	} = useForm<Form>();
+	const onSubmit = handleSubmit(async ({ email }) => {
+		if (isSubmitted) {
+			return;
+		}
+
+		return joinWaitlistMutation({ email });
+	});
+
+	return (
+		<form onSubmit={onSubmit} className="mt-8">
+			{isSubmitted ? (
+				<p className="text-center md:text-left mt-2 opacity-75 text-green-900 text-md">
+					You&#39;re on the list! We will be in touch soon
+				</p>
+			) : (
+				<div className="flex flex-col sm:flex-row justify-center max-w-sm mx-auto sm:max-w-md md:mx-0">
+					<input
+						{...register("email")}
+						type="email"
+						className="form-input w-full mb-2 sm:mb-0 sm:mr-2 focus:outline-none focus:ring-primary-500 focus:border-primary-500"
+						placeholder="Enter your email address"
+					/>
+					<button type="submit" className="btn text-white bg-primary-500 hover:bg-primary-400 flex-shrink-0">
+						Request access
+					</button>
+				</div>
+			)}
+		</form>
+	);
+}

app/public-area/components/header.tsx

@@ -0,0 +1,23 @@
+import { Link } from "blitz";
+
+function Header() {
+	return (
+		<header className="absolute w-full z-30">
+			<div className="max-w-6xl mx-auto px-4 sm:px-6">
+				<div className="flex items-center justify-between h-20">
+					{/* Site branding */}
+					<div className="flex-shrink-0 mr-5">
+						{/* Logo */}
+						<Link href="/">
+							<a className="block">
+								<img className="w-10 h-10" src="/shellphone.png" />
+							</a>
+						</Link>
+					</div>
+				</div>
+			</div>
+		</header>
+	);
+}
+
+export default Header;

app/public-area/components/phone-mockup.tsx

@@ -0,0 +1,26 @@
+import mockupImage from "../images/mockup-image-01.png";
+import iphoneMockup from "../images/iphone-mockup.png";
+
+export default function PhoneMockup() {
+	return (
+		<div className="md:col-span-5 lg:col-span-5 text-center md:text-right">
+			<div className="inline-flex relative justify-center items-center">
+				<img
+					className="absolute max-w-[84.33%]"
+					src={mockupImage.src}
+					width={290}
+					height={624}
+					alt="Features illustration"
+				/>
+				<img
+					className="relative max-w-full mx-auto md:mr-0 md:max-w-none h-auto pointer-events-none"
+					src={iphoneMockup.src}
+					width={344}
+					height={674}
+					alt="iPhone mockup"
+					aria-hidden="true"
+				/>
+			</div>
+		</div>
+	);
+}

app/public-area/components/referral-banner.tsx

@@ -0,0 +1,35 @@
+import { XIcon } from "@heroicons/react/outline";
+
+export default function ReferralBanner() {
+	const isDisabled = true;
+	if (isDisabled) {
+		return null;
+	}
+
+	return (
+		<div className="relative bg-primary-600">
+			<div className="max-w-7xl mx-auto py-3 px-3 sm:px-6 lg:px-8">
+				<div className="pr-16 sm:text-center sm:px-16">
+					<p className="font-medium text-white">
+						<span>&#127881; New: Get one month free for every friend that joins and subscribe!</span>
+						<span className="block sm:ml-2 sm:inline-block">
+							<a href="#" className="text-white font-bold underline">
+								{" "}
+								Learn more <span aria-hidden="true">&rarr;</span>
+							</a>
+						</span>
+					</p>
+				</div>
+				<div className="absolute inset-y-0 right-0 pt-1 pr-1 flex items-start sm:pt-1 sm:pr-2 sm:items-start">
+					<button
+						type="button"
+						className="flex p-2 rounded-md hover:bg-primary-500 focus:outline-none focus:ring-2 focus:ring-white"
+					>
+						<span className="sr-only">Dismiss</span>
+						<XIcon className="h-6 w-6 text-white" aria-hidden="true" />
+					</button>
+				</div>
+			</div>
+		</div>
+	);
+}

app/public-area/mutations/join-waitlist.ts

@@ -0,0 +1,23 @@
+import { resolver } from "blitz";
+import { z } from "zod";
+
+import appLogger from "../../../integrations/logger";
+import { addSubscriber } from "../../../integrations/mailchimp";
+
+const logger = appLogger.child({ mutation: "join-waitlist" });
+
+const bodySchema = z.object({
+	email: z.string().email(),
+});
+
+export default resolver.pipe(resolver.zod(bodySchema), async ({ email }, ctx) => {
+	try {
+		await addSubscriber(email);
+	} catch (error: any) {
+		logger.error(error.response?.data);
+
+		if (error.response?.data.title !== "Member Exists") {
+			throw error;
+		}
+	}
+});

app/public-area/pages/index.tsx

@@ -0,0 +1,76 @@
+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";
+
+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>
+			<ReferralBanner />
+			<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">
+								<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>
+				</section>
+			</section>
+		</>
+	);
+};
+
+LandingPage.suppressFirstRenderFlicker = true;
+
+export default LandingPage;