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

public pages smol tings

Browse Source
This commit is contained in:
m5r 2021-09-25 07:08:29 +08:00
parent 2f45e1d9a8
commit 12983316f5
3 changed files with 9 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/public-area/components/layout.tsx
View File

@ -12,7 +12,7 @@ const Layout: FunctionComponent<Props> = ({ children, title }) => (
<div className="pt-32 pb-10 md:pt-34 md:pb-16"> <div className="pt-32 pb-10 md:pt-34 md:pb-16">
{title ? ( {title ? (
<div className="max-w-5xl mx-auto"> <div className="max-w-5xl mx-auto">
<h1 className="h1 mb-16 font-extrabold font-mackinac">{title}</h1> <h1 className="h1 mb-16 text-navy font-extrabold font-mackinac">{title}</h1>
</div> </div>
) : null} ) : null}

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

@ -2,6 +2,7 @@ import type { BlitzPage } from "blitz";
import { Link, Routes } from "blitz"; import { Link, Routes } from "blitz";
import { HiCheck, HiX } from "react-icons/hi"; import { HiCheck, HiX } from "react-icons/hi";
import clsx from "clsx"; import clsx from "clsx";
import * as Panelbear from "@panelbear/panelbear-js";
import BaseLayout from "../components/base-layout"; import BaseLayout from "../components/base-layout";
@ -29,7 +30,7 @@ const pricing = {
}, },
{ {
title: "Yearly", title: "Yearly",
price: 10, price: 12.5,
frequency: "/month", frequency: "/month",
description: "Text and call anyone, anywhere in the world, all year long.", description: "Text and call anyone, anywhere in the world, all year long.",
features: paidFeatures, features: paidFeatures,
@ -54,7 +55,7 @@ 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">
<h2 className="text-3xl font-mackinac font-extrabold text-gray-900 sm:text-5xl sm:leading-none sm:tracking-tight"> <h2 className="text-3xl font-mackinac font-extrabold text-navy sm:text-5xl 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-6 max-w-2xl text-xl text-gray-500">
@ -68,18 +69,18 @@ const Pricing: BlitzPage = () => {
className="relative p-8 bg-white border border-gray-200 rounded-2xl shadow-sm flex flex-col" className="relative p-8 bg-white border border-gray-200 rounded-2xl shadow-sm flex flex-col"
> >
<div className="flex-1"> <div className="flex-1">
<h3 className="text-xl font-semibold text-gray-900">{tier.title}</h3> <h3 className="text-2xl font-mackinac font-semibold text-gray-900">{tier.title}</h3>
{tier.yearly ? ( {tier.yearly ? (
<p className="absolute top-0 py-1.5 px-4 bg-primary-500 rounded-full text-xs font-semibold uppercase tracking-wide text-white transform -translate-y-1/2"> <p className="absolute top-0 py-1.5 px-4 bg-primary-500 rounded-full text-xs font-semibold uppercase tracking-wide text-white transform -translate-y-1/2">
Get 2 months free! Get 2 months free!
</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-5xl font-extrabold tracking-tight">{tier.price}€</span> <span className="text-4xl 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 ? (
<p className="text-gray-500 text-sm">Billed yearly ({tier.price * 10}€)</p> <p className="text-gray-500 text-sm">Billed yearly ({tier.price * 12}€)</p>
) : null} ) : null}
<p className="mt-6 text-gray-500">{tier.description}</p> <p className="mt-6 text-gray-500">{tier.description}</p>
@ -108,6 +109,7 @@ const Pricing: BlitzPage = () => {
<Link href={Routes.LandingPage({ join_waitlist: "" })}> <Link href={Routes.LandingPage({ join_waitlist: "" })}>
<a <a
onClick={() => Panelbear.track("redirect-to-join-waitlist")}
className={clsx( className={clsx(
tier.yearly tier.yearly
? "bg-primary-500 text-white hover:bg-primary-600" ? "bg-primary-500 text-white hover:bg-primary-600"

1
tailwind.config.js
View File

@ -82,6 +82,7 @@ module.exports = {
800: "#97266D", 800: "#97266D",
900: "#702459", 900: "#702459",
}, },
navy: "#24185B",
}, },
boxShadow: { boxShadow: {
"2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.08)", "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.08)",