265 lines
14 KiB
TypeScript
265 lines
14 KiB
TypeScript
import { mdiArrowRight, mdiCheckCircleOutline, mdiLogin, mdiShieldCheckOutline, mdiStarCircleOutline } from '@mdi/js';
|
|
import Head from 'next/head';
|
|
import Link from 'next/link';
|
|
import React, { ReactElement } from 'react';
|
|
import BaseButton from '../components/BaseButton';
|
|
import CardBox from '../components/CardBox';
|
|
import LayoutGuest from '../layouts/Guest';
|
|
import { getPageTitle } from '../config';
|
|
import { subscriptionPlans, trialDays } from '../subscriptionPlans';
|
|
|
|
const metrics = [
|
|
['7 days', 'default review delay'],
|
|
['5 sources', 'Stripe, Square, PayPal, Shopify, WooCommerce'],
|
|
['4 states', 'pending, sent, clicked, reviewed'],
|
|
];
|
|
|
|
const steps = [
|
|
['Capture', 'Receive Stripe, Square, PayPal, Shopify, or WooCommerce webhooks as soon as checkout happens.'],
|
|
['Schedule', 'Create the customer, transaction, and review request automatically with your preferred delay.'],
|
|
['Track', 'Follow pending, sent, clicked, and reviewed requests from one workspace.'],
|
|
];
|
|
|
|
const features = [
|
|
'Business review links and templates',
|
|
'Webhook-created customers and transactions',
|
|
'Readable queue with message preview',
|
|
'Admin CRUD and API docs still available',
|
|
];
|
|
|
|
export default function Starter() {
|
|
return (
|
|
<div className="min-h-screen bg-[#F7F8FC] text-slate-950">
|
|
<Head>
|
|
<title>{getPageTitle('Review Flow')}</title>
|
|
<meta
|
|
name="description"
|
|
content="Review Flow helps businesses queue and track review requests after customer purchases or visits."
|
|
/>
|
|
</Head>
|
|
|
|
<header className="sticky top-0 z-20 border-b border-white/70 bg-white/80 backdrop-blur-xl">
|
|
<div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4">
|
|
<Link href="/" className="flex items-center gap-3 font-black tracking-tight">
|
|
<span className="flex h-10 w-10 items-center justify-center rounded-2xl bg-[#101828] text-white shadow-lg shadow-indigo-950/20">
|
|
★
|
|
</span>
|
|
<span className="text-xl">Review Flow</span>
|
|
</Link>
|
|
<nav className="flex items-center gap-3">
|
|
<BaseButton href="/#pricing" label="Pricing" color="whiteDark" />
|
|
<BaseButton href="/login" icon={mdiLogin} label="Login" color="whiteDark" />
|
|
<BaseButton href="/reviewflow" icon={mdiArrowRight} label="Admin interface" color="info" />
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<section className="relative isolate overflow-hidden px-6 py-20 md:py-28">
|
|
<div className="absolute left-1/2 top-0 -z-10 h-[640px] w-[920px] -translate-x-1/2 rounded-full bg-[radial-gradient(circle_at_center,#7C3AED_0%,#10B981_38%,transparent_68%)] opacity-20 blur-3xl" />
|
|
<div className="mx-auto grid max-w-7xl gap-12 lg:grid-cols-[1.05fr_0.95fr] lg:items-center">
|
|
<div>
|
|
<div className="mb-6 inline-flex items-center gap-2 rounded-full border border-emerald-200 bg-emerald-50 px-4 py-2 text-sm font-bold text-emerald-700">
|
|
<span className="h-2 w-2 rounded-full bg-emerald-500" />
|
|
Review automation for modern local businesses
|
|
</div>
|
|
<h1 className="max-w-4xl text-5xl font-black leading-[0.95] tracking-tight text-slate-950 md:text-7xl">
|
|
Ask at the perfect moment. Earn more five-star reviews.
|
|
</h1>
|
|
<p className="mt-6 max-w-2xl text-lg leading-8 text-slate-600">
|
|
Review Flow turns Stripe, Square, PayPal, Shopify, and WooCommerce webhooks into scheduled review requests with a clean queue, message preview, and admin controls already wired into your app.
|
|
</p>
|
|
<div className="mt-8 flex flex-wrap gap-3">
|
|
<BaseButton href="/reviewflow" icon={mdiStarCircleOutline} label="Open Review Flow" color="info" className="shadow-xl shadow-indigo-600/20" />
|
|
<BaseButton href="/login" icon={mdiShieldCheckOutline} label="Login to admin" color="whiteDark" />
|
|
</div>
|
|
<div className="mt-10 grid max-w-2xl gap-3 sm:grid-cols-3">
|
|
{metrics.map(([value, label]) => (
|
|
<div key={label} className="rounded-3xl border border-white bg-white/80 p-5 shadow-xl shadow-slate-200/60">
|
|
<p className="text-3xl font-black text-slate-950">{value}</p>
|
|
<p className="mt-1 text-sm text-slate-500">{label}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<CardBox className="border-0 bg-white/90 shadow-2xl shadow-indigo-950/10 ring-1 ring-slate-200/70" cardBoxClassName="p-0">
|
|
<div className="rounded-t-3xl bg-[#101828] p-5 text-white">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm font-bold uppercase tracking-[0.25em] text-emerald-300">Live workflow</p>
|
|
<h2 className="mt-2 text-2xl font-black">Review request queued</h2>
|
|
</div>
|
|
<span className="rounded-full bg-emerald-400/20 px-3 py-1 text-sm font-bold text-emerald-200 ring-1 ring-emerald-300/30">
|
|
pending
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-5 p-6">
|
|
<div className="rounded-3xl bg-slate-50 p-5">
|
|
<p className="text-xs font-black uppercase tracking-[0.25em] text-slate-400">Customer</p>
|
|
<p className="mt-2 text-lg font-black">Maya Chen</p>
|
|
<p className="text-slate-500">maya@example.com</p>
|
|
</div>
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
<div className="rounded-3xl bg-indigo-50 p-5 text-indigo-950">
|
|
<p className="text-sm font-bold text-indigo-500">Scheduled</p>
|
|
<p className="text-2xl font-black">+7 days</p>
|
|
</div>
|
|
<div className="rounded-3xl bg-emerald-50 p-5 text-emerald-950">
|
|
<p className="text-sm font-bold text-emerald-600">Destination</p>
|
|
<p className="text-2xl font-black">Google</p>
|
|
</div>
|
|
</div>
|
|
<div className="rounded-3xl border border-dashed border-slate-200 p-5">
|
|
<p className="font-black">How was your experience with Review Flow Studio?</p>
|
|
<p className="mt-2 text-sm leading-6 text-slate-500">
|
|
Hi Maya, thank you for choosing us. We would love to hear about your experience.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardBox>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="px-6 pb-20">
|
|
<div className="mx-auto grid max-w-7xl gap-6 lg:grid-cols-3">
|
|
{steps.map(([title, copy], index) => (
|
|
<div key={title} className="rounded-[2rem] border border-slate-200 bg-white p-8 shadow-xl shadow-slate-200/50">
|
|
<div className="mb-5 flex h-12 w-12 items-center justify-center rounded-2xl bg-slate-950 text-lg font-black text-white">
|
|
{index + 1}
|
|
</div>
|
|
<h3 className="text-2xl font-black">{title}</h3>
|
|
<p className="mt-3 leading-7 text-slate-600">{copy}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section id="pricing" className="px-6 pb-20">
|
|
<div className="mx-auto max-w-7xl">
|
|
<div className="mx-auto max-w-3xl text-center">
|
|
<p className="text-sm font-black uppercase tracking-[0.3em] text-emerald-600">Simple pricing</p>
|
|
<h2 className="mt-4 text-4xl font-black tracking-tight text-slate-950 md:text-5xl">Choose Starter or Pro.</h2>
|
|
<p className="mt-5 text-lg leading-8 text-slate-600">
|
|
Every plan starts with a {trialDays}-day free trial. Starter covers the core review workflow. Pro adds the advanced automation and reputation marketing tools growing teams need.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-12 grid gap-6 lg:grid-cols-2">
|
|
{subscriptionPlans.map((plan) => {
|
|
const isPro = plan.id === 'pro';
|
|
|
|
return (
|
|
<CardBox
|
|
key={plan.id}
|
|
className={`relative overflow-hidden border-0 bg-white shadow-2xl ${
|
|
isPro ? 'shadow-indigo-950/20 ring-2 ring-indigo-600' : 'shadow-slate-200/70 ring-1 ring-slate-200'
|
|
}`}
|
|
cardBoxClassName="p-0"
|
|
>
|
|
{plan.highlight && (
|
|
<div className="absolute right-6 top-6 rounded-full bg-indigo-600 px-4 py-1 text-sm font-black text-white shadow-lg shadow-indigo-600/30">
|
|
{plan.highlight}
|
|
</div>
|
|
)}
|
|
<div className="p-8">
|
|
<p className="text-sm font-black uppercase tracking-[0.3em] text-slate-400">Review Flow</p>
|
|
<h3 className="mt-3 text-3xl font-black text-slate-950">{plan.name}</h3>
|
|
<p className="mt-3 min-h-[56px] leading-7 text-slate-600">{plan.tagline}</p>
|
|
|
|
<div className="mt-8 flex items-end gap-2">
|
|
<span className="text-5xl font-black tracking-tight text-slate-950">${plan.priceMonthly}</span>
|
|
<span className="pb-2 font-bold text-slate-500">/month</span>
|
|
</div>
|
|
<p className="mt-2 text-sm font-bold text-emerald-600">{plan.trialDays}-day free trial included</p>
|
|
|
|
<div className="mt-8 grid gap-3 rounded-3xl bg-slate-50 p-5 sm:grid-cols-2">
|
|
<div>
|
|
<p className="text-2xl font-black text-slate-950">{plan.limits.monthlyReviewRequests.toLocaleString()}</p>
|
|
<p className="text-sm text-slate-500">review requests/month</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-2xl font-black text-slate-950">{plan.limits.businesses}</p>
|
|
<p className="text-sm text-slate-500">businesses/locations</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-2xl font-black text-slate-950">{plan.limits.teamMembers}</p>
|
|
<p className="text-sm text-slate-500">team members</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-2xl font-black text-slate-950">{plan.limits.paymentConnectors}</p>
|
|
<p className="text-sm text-slate-500">payment connectors</p>
|
|
</div>
|
|
</div>
|
|
|
|
<BaseButton
|
|
href={`/register?plan=${plan.id}`}
|
|
icon={mdiArrowRight}
|
|
label={plan.ctaLabel}
|
|
color={isPro ? 'info' : 'whiteDark'}
|
|
className="mt-8 w-full shadow-xl shadow-indigo-600/10"
|
|
/>
|
|
</div>
|
|
|
|
<div className={isPro ? 'bg-indigo-950 p-8 text-white' : 'bg-slate-950 p-8 text-white'}>
|
|
<p className="mb-5 text-sm font-black uppercase tracking-[0.25em] text-emerald-300">Included features</p>
|
|
<div className="grid gap-3">
|
|
{plan.features.map((feature) => (
|
|
<div key={feature} className="flex items-start gap-3">
|
|
<span className="mt-1 text-emerald-300">
|
|
<svg className="h-5 w-5" viewBox="0 0 24 24">
|
|
<path fill="currentColor" d={mdiCheckCircleOutline} />
|
|
</svg>
|
|
</span>
|
|
<span className="font-semibold text-slate-100">{feature}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</CardBox>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="bg-[#101828] px-6 py-20 text-white">
|
|
<div className="mx-auto grid max-w-7xl gap-10 lg:grid-cols-[0.8fr_1.2fr] lg:items-center">
|
|
<div>
|
|
<p className="text-sm font-black uppercase tracking-[0.3em] text-emerald-300">First MVP slice</p>
|
|
<h2 className="mt-4 text-4xl font-black tracking-tight md:text-5xl">A complete thin workflow, not just a screen.</h2>
|
|
<p className="mt-5 leading-8 text-slate-300">
|
|
The admin workspace lets a user connect payment webhooks, receive events, create transactions and customers, queue review requests, browse recent activity, and inspect the generated message.
|
|
</p>
|
|
</div>
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
{features.map((feature) => (
|
|
<div key={feature} className="flex items-start gap-3 rounded-3xl bg-white/10 p-5 ring-1 ring-white/10">
|
|
<span className="mt-1 text-emerald-300"><svg className="h-5 w-5" viewBox="0 0 24 24"><path fill="currentColor" d={mdiCheckCircleOutline} /></svg></span>
|
|
<span className="font-semibold text-slate-100">{feature}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer className="bg-white px-6 py-8">
|
|
<div className="mx-auto flex max-w-7xl flex-col gap-4 text-sm text-slate-500 md:flex-row md:items-center md:justify-between">
|
|
<p>© 2026 Review Flow. All rights reserved.</p>
|
|
<div className="flex gap-5">
|
|
<Link href="/privacy-policy/" className="hover:text-slate-950">Privacy Policy</Link>
|
|
<Link href="/terms-of-use/" className="hover:text-slate-950">Terms of Use</Link>
|
|
<Link href="/login" className="font-bold text-slate-950">Login</Link>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
Starter.getLayout = function getLayout(page: ReactElement) {
|
|
return <LayoutGuest>{page}</LayoutGuest>;
|
|
};
|