shellphone.app/app/features/public-area/components/hero.tsx

52 lines
1.9 KiB
TypeScript
Raw Normal View History

2021-08-28 15:55:23 +00:00
import CTAForm from "./cta-form";
2021-09-01 15:04:16 +00:00
import mockupImage from "../images/phone-mockup.png";
2021-08-28 15:55:23 +00:00
export default function Hero() {
return (
<div className="relative bg-gradient-to-b from-rebeccapurple-100 to-rebeccapurple-200">
2021-09-01 15:04:16 +00:00
<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">
2021-09-01 15:44:15 +00:00
<div className="flex flex-col flex-1 justify-center h-full space-y-8">
2021-09-02 18:57:09 +00:00
<h1 className="font-heading text-4xl leading-none lg:leading-tight xl:text-5xl xl:leading-tight">
<span className="bg-gradient-to-br from-rebeccapurple-500 to-indigo-600 bg-clip-text decoration-clone text-transparent">
2021-09-01 15:04:16 +00:00
Take your phone number
</span>{" "}
2022-05-14 17:53:04 +00:00
<span className="text-[#24185B]">anywhere you go</span>
2021-09-01 15:04:16 +00:00
</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 />
2021-10-15 19:57:00 +00:00
<div className="max-w-lg mx-auto md:mx-0">
<span className="block md:inline mx-2">
<em> </em>Free trial
</span>
<span className="block md:inline mx-2">
<em> </em>No credit card required
</span>
<span className="block md:inline mx-2">
<em> </em>Cancel anytime
</span>
</div>
2021-09-01 15:04:16 +00:00
</div>
</div>
2021-08-28 15:55:23 +00:00
</div>
2021-09-01 15:04:16 +00:00
<div className="relative w-full overflow-hidden lg:w-5/12 lg:order-1">
<div className="lg:absolute lg:bottom-0 lg:left-0">
2022-05-14 10:22:06 +00:00
<img className="w-full" src={mockupImage} alt="App screenshot on a phone" />
2021-09-01 15:04:16 +00:00
</div>
</div>
2021-08-28 15:55:23 +00:00
</div>
2021-09-01 15:04:16 +00:00
</section>
</div>
2021-08-28 15:55:23 +00:00
);
}