public area update

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>

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;
+	}
+}

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>
+	);
+}