From 17eba67fca1a317e5f4deebb885e92cb2e54fa6c Mon Sep 17 00:00:00 2001
From: m5r <mokht@rmi.al>
Date: Fri, 15 Oct 2021 21:57:00 +0200
Subject: [PATCH] public area update

---
 app/public-area/components/hero.tsx           | 12 +++++
 .../components/testimonials.module.css        | 53 +++++++++++++++++++
 app/public-area/components/testimonials.tsx   | 22 ++++++++
 .../pages/{open-metrics.tsx => open.tsx}      |  0
 app/public-area/pages/pricing.tsx             | 43 ++++-----------
 5 files changed, 98 insertions(+), 32 deletions(-)
 create mode 100644 app/public-area/components/testimonials.module.css
 create mode 100644 app/public-area/components/testimonials.tsx
 rename app/public-area/pages/{open-metrics.tsx => open.tsx} (100%)

diff --git a/app/public-area/components/hero.tsx b/app/public-area/components/hero.tsx
index 93af6bd..1e3b880 100644
--- a/app/public-area/components/hero.tsx
+++ b/app/public-area/components/hero.tsx
@@ -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>
diff --git a/app/public-area/components/testimonials.module.css b/app/public-area/components/testimonials.module.css
new file mode 100644
index 0000000..f2d8e84
--- /dev/null
+++ b/app/public-area/components/testimonials.module.css
@@ -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;
+	}
+}
diff --git a/app/public-area/components/testimonials.tsx b/app/public-area/components/testimonials.tsx
new file mode 100644
index 0000000..9c6c393
--- /dev/null
+++ b/app/public-area/components/testimonials.tsx
@@ -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>
+	);
+}
diff --git a/app/public-area/pages/open-metrics.tsx b/app/public-area/pages/open.tsx
similarity index 100%
rename from app/public-area/pages/open-metrics.tsx
rename to app/public-area/pages/open.tsx
diff --git a/app/public-area/pages/pricing.tsx b/app/public-area/pages/pricing.tsx
index 22e77fe..b629800 100644
--- a/app/public-area/pages/pricing.tsx
+++ b/app/public-area/pages/pricing.tsx
@@ -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>