public area update

This commit is contained in:
m5r 2021-10-15 21:57:00 +02:00
parent 545ee225aa
commit 17eba67fca
5 changed files with 98 additions and 32 deletions

View File

@ -23,6 +23,18 @@ export default function Hero() {
</p> </p>
<CTAForm /> <CTAForm />
<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>
</div> </div>
</div> </div>
</div> </div>

View File

@ -0,0 +1,53 @@
.location {
opacity: 0;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
.location:nth-child(1) {
animation: quotefade 14s 0s infinite linear;
}
.location:nth-child(2) {
animation: quotefade 14s 2s infinite linear;
}
.location:nth-child(3) {
animation: quotefade 14s 4s infinite linear;
}
.location:nth-child(4) {
animation: quotefade 14s 6s infinite linear;
}
.location:nth-child(5) {
animation: quotefade 14s 8s infinite linear;
}
.location:nth-child(6) {
animation: quotefade 14s 10s infinite linear;
}
.location:nth-child(7) {
animation: quotefade 14s 12s infinite linear;
}
@keyframes quotefade {
0% {
opacity: 0;
}
2% {
opacity: 1;
}
12% {
opacity: 1;
}
14% {
opacity: 0;
}
100% {
opacity: 0;
}
}

View File

@ -0,0 +1,22 @@
import styles from "./testimonials.module.css";
export default function Testimonials() {
return (
<div className="bg-rebeccapurple-600">
<div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
<p className="text-xl text-white text-center text-base font-semibold uppercase text-gray-600 tracking-wider">
Trusted by digital nomads in
<div className="h-[2rem] relative flex">
<span className={styles.location}>Bali</span>
<span className={styles.location}>Tulum</span>
<span className={styles.location}>Tbilissi</span>
<span className={styles.location}>Bansko</span>
<span className={styles.location}>Zanzibar</span>
<span className={styles.location}>Mauritius</span>
<span className={styles.location}>Amsterdam</span>
</div>
</p>
</div>
</div>
);
}

View File

@ -18,16 +18,6 @@ const paidFeatures = [
const pricing = { const pricing = {
tiers: [ tiers: [
{
title: "Free",
price: 0,
frequency: "",
description: "The essentials to let you try Shellphone.",
features: ["SMS (send only)"],
unavailableFeatures: paidFeatures.slice(1),
cta: "Join waitlist",
yearly: false,
},
{ {
title: "Yearly", title: "Yearly",
price: 12.5, price: 12.5,
@ -54,15 +44,18 @@ const pricing = {
const Pricing: BlitzPage = () => { const Pricing: BlitzPage = () => {
return ( return (
<section className="pt-32 pb-10 px-4 sm:px-6 md:pt-34 md:pb-16"> <section className="pt-32 pb-10 px-4 sm:px-6 md:pt-34 md:pb-16">
<div className="bg-white"> <div className="bg-white flex flex-col">
<h2 className="text-3xl font-mackinac font-extrabold text-navy sm:text-5xl sm:leading-none sm:tracking-tight"> <h2 className="text-3xl font-mackinac font-extrabold text-navy sm:text-3xl sm:leading-none sm:tracking-tight">
Simple no-tricks pricing Simple, no-tricks pricing
</h2> </h2>
<p className="mt-6 max-w-2xl text-xl text-gray-500"> <p className="mt-4 max-w-2xl text-xl text-gray-500">
One affordable and transparent plan that includes everything you need. Our straightforward, <span className="border-b-4 border-primary-600">all-inclusive</span> pricing.
</p> </p>
<div className="mt-24 space-y-12 lg:space-y-0 lg:grid lg:grid-cols-3 lg:gap-x-8"> <p className="mt-8 text-lg text-gray-500 mx-auto">
Start a free trial with the essentials features to discover Shellphone no credit card required
</p>
<div className="mt-4 mx-auto space-y-12 lg:space-y-0 lg:grid lg:grid-cols-2 lg:gap-x-8">
{pricing.tiers.map((tier) => ( {pricing.tiers.map((tier) => (
<div <div
key={tier.title} key={tier.title}
@ -76,7 +69,7 @@ const Pricing: BlitzPage = () => {
</p> </p>
) : null} ) : null}
<p className="mt-4 flex items-baseline text-gray-900"> <p className="mt-4 flex items-baseline text-gray-900">
<span className="text-4xl font-extrabold tracking-tight">{tier.price}</span> <span className="text-3xl font-extrabold tracking-tight">{tier.price}</span>
<span className="ml-1 text-xl font-semibold">{tier.frequency}</span> <span className="ml-1 text-xl font-semibold">{tier.frequency}</span>
</p> </p>
{tier.yearly ? ( {tier.yearly ? (
@ -94,27 +87,13 @@ const Pricing: BlitzPage = () => {
<span className="ml-3 text-gray-500">{feature}</span> <span className="ml-3 text-gray-500">{feature}</span>
</li> </li>
))} ))}
{tier.unavailableFeatures.map((feature) => (
<li key={feature} className="flex">
<span className="ml-9 text-gray-400">
{~feature.indexOf("(coming soon)")
? feature.slice(0, feature.indexOf("(coming soon)"))
: feature}
</span>
</li>
))}
</ul> </ul>
</div> </div>
<Link href={Routes.LandingPage({ join_waitlist: "" })}> <Link href={Routes.LandingPage({ join_waitlist: "" })}>
<a <a
onClick={() => Panelbear.track("redirect-to-join-waitlist")} onClick={() => Panelbear.track("redirect-to-join-waitlist")}
className={clsx( className="bg-rebeccapurple-500 text-white hover:bg-rebeccapurple-600 mt-8 block w-full py-3 px-6 border border-transparent rounded-md text-center font-medium"
tier.yearly
? "bg-rebeccapurple-500 text-white hover:bg-rebeccapurple-600"
: "bg-rebeccapurple-50 text-rebeccapurple-700 hover:bg-rebeccapurple-100",
"mt-8 block w-full py-3 px-6 border border-transparent rounded-md text-center font-medium",
)}
> >
{tier.cta} {tier.cta}
</a> </a>