shellphone.app/app/public-area/components/hero.tsx
2021-09-01 23:04:16 +08:00

40 lines
1.5 KiB
TypeScript

import CTAForm from "./cta-form";
import mockupImage from "../images/phone-mockup.png";
export default function Hero() {
return (
<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>
<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>
</section>
</div>
);
}