rework landing page hero

app/core/styles/index.css

@@ -52,6 +52,11 @@
 	font-display: optional;
 }
 
+.font-heading {
+	@apply font-mackinac tracking-tight font-bold;
+	word-spacing: 0.025em;
+}
+
 .divide-y > :first-child {
 	@apply border-t;
 }

app/public-area/components/checkmark.tsx

@@ -1,11 +0,0 @@
-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

@@ -25,13 +25,13 @@ export default function CTAForm() {
 	});
 
 	return (
-		<form onSubmit={onSubmit} className="mt-8">
+		<form onSubmit={onSubmit}>
 			{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">
+				<div className="flex flex-col sm:flex-row justify-center w-full md:max-w-md md:mx-0">
 					<input
 						{...register("email")}
 						type="email"

app/public-area/components/faqs.tsx

@@ -40,7 +40,7 @@ const Accordion: FunctionComponent<{ title: string }> = ({ title, children }) =>
 				<>
 					<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"
+							className="w-4 h-4 fill-current text-primary-500 flex-shrink-0 mr-8 -ml-12"
 							viewBox="0 0 16 16"
 							xmlns="http://www.w3.org/2000/svg"
 						>

app/public-area/components/hero.tsx

@@ -1,44 +1,39 @@
 import CTAForm from "./cta-form";
-import Checkmark from "./checkmark";
-import PhoneMockup from "./phone-mockup";
+
+import mockupImage from "../images/phone-mockup.png";
 
 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 className="relative bg-gradient-to-b from-primary-100 to-primary-200">
+			<section className="overflow-hidden">
+				<div className="flex flex-col lg:flex-row lg:items-stretch lg:min-h-screen lg:max-h-[900px]">
+					<div className="flex items-center justify-center w-full lg:order-2 lg:w-7/12">
+						<div className="h-full px-4 pt-24 pb-16 sm:px-6 lg:px-24 2xl:px-32 lg:pt-40 lg:pb-14">
+							<div className="flex flex-col flex-1 h-full space-y-8">
+								<h1 className="font-heading text-4xl leading-tight lg:leading-tight xl:text-5xl xl:leading-tight">
+									<span className="bg-gradient-to-br from-primary-500 to-indigo-600 bg-clip-text decoration-clone text-transparent">
+										Take your phone number
+									</span>{" "}
+									<span className="text-[#24185B]">anywhere you go</span>
+								</h1>
+
+								<p className="text-base lg:text-lg xl:text-xl text-black">
+									Coming soon! &#128026; Keep your phone number and pay less for your communications,
+									even abroad.
+								</p>
+
+								<CTAForm />
+							</div>
+						</div>
 					</div>
 
-					<PhoneMockup />
+					<div className="relative w-full overflow-hidden lg:w-5/12 lg:order-1">
+						<div className="lg:absolute lg:bottom-0 lg:left-0">
+							<img className="w-full" src={mockupImage.src} alt="App screenshot on a phone" />
+						</div>
+					</div>
 				</div>
-			</div>
-		</section>
+			</section>
+		</div>
 	);
 }

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

@@ -1,26 +0,0 @@
-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>
-	);
-}

tailwind.config.js

@@ -7,7 +7,7 @@ module.exports = {
 			fontFamily: {
 				sans: ["Inter var", ...defaultTheme.fontFamily.sans],
 				inter: ["Inter var", "sans-serif"],
-				mackinac: ["P22 Mackinac Pro", "sans-serif"],
+				mackinac: ["P22 Mackinac Pro", "ui-serif", "Georgia", "Cambria", "Times New Roman", "Times", "serif"],
 			},
 			colors: {
 				primary: {