rework landing page hero

This commit is contained in:
m5r 2021-09-01 23:04:16 +08:00
parent c81d8e7937
commit 8699f587f9
8 changed files with 39 additions and 76 deletions

View File

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

View File

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

View File

@ -25,13 +25,13 @@ export default function CTAForm() {
}); });
return ( return (
<form onSubmit={onSubmit} className="mt-8"> <form onSubmit={onSubmit}>
{isSubmitted ? ( {isSubmitted ? (
<p className="text-center md:text-left mt-2 opacity-75 text-green-900 text-md"> <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 You&#39;re on the list! We will be in touch soon
</p> </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 <input
{...register("email")} {...register("email")}
type="email" type="email"

View File

@ -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"> <Disclosure.Button className="flex items-center w-full text-lg font-medium text-left py-5 border-t border-gray-200">
<svg <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" viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >

View File

@ -1,44 +1,39 @@
import CTAForm from "./cta-form"; 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() { export default function Hero() {
return ( return (
<section className="max-w-6xl mx-auto px-4 sm:px-6"> <div className="relative bg-gradient-to-b from-primary-100 to-primary-200">
<div className="pt-32 pb-10 md:pt-34 md:pb-20"> <section className="overflow-hidden">
<div className="md:grid md:grid-cols-12 md:gap-12 lg:gap-20 items-center"> <div className="flex flex-col lg:flex-row lg:items-stretch lg:min-h-screen lg:max-h-[900px]">
<div className="md:col-span-7 lg:col-span-7 mb-8 md:mb-0 text-center md:text-left"> <div className="flex items-center justify-center w-full lg:order-2 lg:w-7/12">
<h1 className="h1 lg:text-5xl mb-4 font-extrabold font-mackinac"> <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">
<strong className="bg-gradient-to-br from-primary-500 to-indigo-600 bg-clip-text decoration-clone text-transparent"> <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 Take your phone number
</strong> </span>{" "}
<br /> <span className="text-[#24185B]">anywhere you go</span>
<strong className="text-[#24185B]">anywhere you go</strong>
</h1> </h1>
<p className="text-xl text-gray-600">
Coming soon! &#128026; Keep your phone number and pay less for your communications, even <p className="text-base lg:text-lg xl:text-xl text-black">
abroad. Coming soon! &#128026; Keep your phone number and pay less for your communications,
even abroad.
</p> </p>
<CTAForm /> <CTAForm />
<ul className="max-w-sm sm:max-w-md mx-auto md:max-w-none text-gray-600 mt-8 -mb-2"> </div>
<li className="flex items-center mb-2"> </div>
<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> </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> </div>
</section> </section>
</div>
); );
} }

View File

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 MiB

View File

@ -7,7 +7,7 @@ module.exports = {
fontFamily: { fontFamily: {
sans: ["Inter var", ...defaultTheme.fontFamily.sans], sans: ["Inter var", ...defaultTheme.fontFamily.sans],
inter: ["Inter var", "sans-serif"], 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: { colors: {
primary: { primary: {