rework landing page hero
This commit is contained in:
parent
c81d8e7937
commit
8699f587f9
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
@ -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're on the list! We will be in touch soon
|
You'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"
|
||||||
|
@ -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"
|
||||||
>
|
>
|
||||||
|
@ -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! 🐚 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! 🐚 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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
BIN
app/public-area/images/phone-mockup.png
Normal file
BIN
app/public-area/images/phone-mockup.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.8 MiB |
@ -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: {
|
||||||
|
Loading…
Reference in New Issue
Block a user