mokhtar/shellphone.app
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

public area update

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/public-area/components/hero.tsx
View File

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

53
app/public-area/components/testimonials.module.css Normal file
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;
}
}

22
app/public-area/components/testimonials.tsx Normal file
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>
);
}

0
app/public-area/pages/open-metrics.tsx → app/public-area/pages/open.tsx
View File

43
app/public-area/pages/pricing.tsx
View File

@ -18,16 +18,6 @@ const paidFeatures = [
const pricing = {
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",
price: 12.5,
@ -54,15 +44,18 @@ const pricing = {
const Pricing: BlitzPage = () => {
return (
<section className="pt-32 pb-10 px-4 sm:px-6 md:pt-34 md:pb-16">
<div className="bg-white">
<h2 className="text-3xl font-mackinac font-extrabold text-navy sm:text-5xl sm:leading-none sm:tracking-tight">
Simple no-tricks pricing
<div className="bg-white flex flex-col">
<h2 className="text-3xl font-mackinac font-extrabold text-navy sm:text-3xl sm:leading-none sm:tracking-tight">
Simple, no-tricks pricing
</h2>
<p className="mt-6 max-w-2xl text-xl text-gray-500">
One affordable and transparent plan that includes everything you need.
<p className="mt-4 max-w-2xl text-xl text-gray-500">
Our straightforward, <span className="border-b-4 border-primary-600">all-inclusive</span> pricing.
</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) => (
<div
key={tier.title}
@ -76,7 +69,7 @@ const Pricing: BlitzPage = () => {
</p>
) : null}
<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>
</p>
{tier.yearly ? (
@ -94,27 +87,13 @@ const Pricing: BlitzPage = () => {
<span className="ml-3 text-gray-500">{feature}</span>
</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>
</div>
<Link href={Routes.LandingPage({ join_waitlist: "" })}>
<a
onClick={() => Panelbear.track("redirect-to-join-waitlist")}
className={clsx(
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",
)}
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.cta}
</a>