mirror of
https://github.com/hex248/sprint.git
synced 2026-02-07 18:23:03 +00:00
(unfinished) revised landing and pricing pages
This commit is contained in:
@@ -1,3 +1,4 @@
|
|||||||
|
import { Icon } from "@iconify/react";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import { useSession } from "@/components/session-provider";
|
import { useSession } from "@/components/session-provider";
|
||||||
import ThemeToggle from "@/components/theme-toggle";
|
import ThemeToggle from "@/components/theme-toggle";
|
||||||
@@ -27,27 +28,185 @@ export default function Landing() {
|
|||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main className="flex-1 flex flex-col items-center justify-center gap-8">
|
<main className="flex-1 flex flex-col items-center py-16 px-4">
|
||||||
<div className="max-w-3xl text-center space-y-4">
|
<div className="max-w-6xl w-full space-y-24">
|
||||||
<h1 className="text-[54px] font-basteleur font-700">Need a snappy project management tool?</h1>
|
{/* hero section */}
|
||||||
<p className="text-[24px] font-goudy text-muted-foreground">
|
<div className="text-center space-y-8 pt-8">
|
||||||
Build your next project with <span className="font-goudy font-700">Sprint.</span>
|
<div className="space-y-4">
|
||||||
</p>
|
<h1 className="text-[64px] font-basteleur font-700 leading-tight">
|
||||||
<p className="text-[18px] font-goudy text-muted-foreground font-700">
|
ship faster without the chaos
|
||||||
Sick of Jira? Say hello to your new favorite project management tool.
|
</h1>
|
||||||
</p>
|
<p className="text-[24px] font-goudy text-muted-foreground max-w-3xl mx-auto">
|
||||||
</div>
|
sprint is project management that stays out of your way. track issues, manage sprints, and
|
||||||
|
keep your team moving—without the jira headache.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col items-center gap-8">
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||||
{!isLoading && user ? (
|
{!isLoading && user ? (
|
||||||
<Button asChild size="lg">
|
<Button asChild size="lg" className="text-lg px-8 py-6">
|
||||||
<Link to="/issues">Open app</Link>
|
<Link to="/issues">Open app</Link>
|
||||||
</Button>
|
</Button>
|
||||||
) : (
|
) : (
|
||||||
<Button asChild size="lg">
|
<>
|
||||||
<Link to="/login">Get started</Link>
|
<Button asChild size="lg" className="text-lg px-8 py-6">
|
||||||
</Button>
|
<Link to="/login">start free trial</Link>
|
||||||
)}
|
</Button>
|
||||||
|
<Button asChild variant="outline" size="lg" className="text-lg px-8 py-6">
|
||||||
|
<Link to="/pricing">see pricing</Link>
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<p className="text-sm text-muted-foreground font-goudy">
|
||||||
|
no credit card required · full access for 14 days
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* problem section */}
|
||||||
|
<div className="max-w-4xl mx-auto space-y-6">
|
||||||
|
<h2 className="text-4xl font-basteleur font-700 text-center">
|
||||||
|
tired of spending more time managing jira than building product?
|
||||||
|
</h2>
|
||||||
|
<div className="grid md:grid-cols-3 gap-6">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Icon icon="lucide:timer-off" className="size-8 text-muted-foreground mx-auto" />
|
||||||
|
<p className="text-center font-goudy text-muted-foreground">
|
||||||
|
wasting hours configuring workflows instead of shipping features
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Icon icon="lucide:boxes" className="size-8 text-muted-foreground mx-auto" />
|
||||||
|
<p className="text-center font-goudy text-muted-foreground">
|
||||||
|
drowning in features you'll never use while missing the basics
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Icon icon="lucide:bug-off" className="size-8 text-muted-foreground mx-auto" />
|
||||||
|
<p className="text-center font-goudy text-muted-foreground">
|
||||||
|
context switching kills momentum—your flow state doesn't stand a chance
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* solution section */}
|
||||||
|
<div className="max-w-5xl mx-auto space-y-12">
|
||||||
|
<h2 className="text-5xl font-basteleur font-700 text-center">
|
||||||
|
everything you need, nothing you don't
|
||||||
|
</h2>
|
||||||
|
<div className="grid md:grid-cols-2 gap-8">
|
||||||
|
<div className="border p-8 space-y-4">
|
||||||
|
<Icon icon="lucide:layout-dashboard" className="size-10 text-personality" />
|
||||||
|
<h3 className="text-2xl font-basteleur font-700">see your work at a glance</h3>
|
||||||
|
<p className="font-goudy text-muted-foreground text-lg">
|
||||||
|
beautiful, intuitive issue tracking with customizable statuses. organize by projects and
|
||||||
|
sprints. find what you need in seconds, not minutes.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="border p-8 space-y-4">
|
||||||
|
<Icon icon="lucide:timer" className="size-10 text-personality" />
|
||||||
|
<h3 className="text-2xl font-basteleur font-700">track time without thinking</h3>
|
||||||
|
<p className="font-goudy text-muted-foreground text-lg">
|
||||||
|
built-in time tracking that actually works. start, pause, resume. see where your time goes
|
||||||
|
without juggling another tool.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="border p-8 space-y-4">
|
||||||
|
<Icon icon="lucide:rocket" className="size-10 text-personality" />
|
||||||
|
<h3 className="text-2xl font-basteleur font-700">ship in sprints</h3>
|
||||||
|
<p className="font-goudy text-muted-foreground text-lg">
|
||||||
|
sprint planning that actually works. set date ranges, assign issues, track velocity. keep
|
||||||
|
your team aligned without the ceremony.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="border p-8 space-y-4">
|
||||||
|
<Icon icon="lucide:zap" className="size-10 text-personality" />
|
||||||
|
<h3 className="text-2xl font-basteleur font-700">stay in flow</h3>
|
||||||
|
<p className="font-goudy text-muted-foreground text-lg">
|
||||||
|
minimal clicks, maximum productivity. keyboard shortcuts, resizable panes, and a clean
|
||||||
|
interface that gets out of your way.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* features list */}
|
||||||
|
<div className="max-w-4xl mx-auto border p-8 space-y-6">
|
||||||
|
<h2 className="text-3xl font-basteleur font-700 text-center">
|
||||||
|
built for developers, by a developer
|
||||||
|
</h2>
|
||||||
|
<div className="grid md:grid-cols-2 gap-x-8 gap-y-3">
|
||||||
|
{[
|
||||||
|
"organization and project management",
|
||||||
|
"customizable issue statuses",
|
||||||
|
"sprint planning with date ranges",
|
||||||
|
"built-in time tracking",
|
||||||
|
"role-based access control",
|
||||||
|
"native desktop app (tauri)",
|
||||||
|
"self-hostable on your infrastructure",
|
||||||
|
"clean, resizable interface",
|
||||||
|
"issue assignment and collaboration",
|
||||||
|
"jwt authentication",
|
||||||
|
].map((feature) => (
|
||||||
|
<div key={feature} className="flex items-start gap-2">
|
||||||
|
<Icon icon="lucide:check" className="size-5 text-personality shrink-0 mt-0.5" />
|
||||||
|
<span className="font-goudy">{feature}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* social proof placeholder */}
|
||||||
|
<div className="max-w-4xl mx-auto text-center space-y-8">
|
||||||
|
<h2 className="text-4xl font-basteleur font-700">join developers who've escaped jira</h2>
|
||||||
|
<div className="grid md:grid-cols-3 gap-8">
|
||||||
|
<div className="border p-6 space-y-4">
|
||||||
|
<p className="font-goudy text-lg italic text-muted-foreground">
|
||||||
|
"finally, a project management tool that doesn't slow me down"
|
||||||
|
</p>
|
||||||
|
<p className="text-sm font-goudy font-700">early user feedback</p>
|
||||||
|
</div>
|
||||||
|
<div className="border p-6 space-y-4">
|
||||||
|
<p className="font-goudy text-lg italic text-muted-foreground">
|
||||||
|
"built by someone who actually understands developer workflows"
|
||||||
|
</p>
|
||||||
|
<p className="text-sm font-goudy font-700">early user feedback</p>
|
||||||
|
</div>
|
||||||
|
<div className="border p-6 space-y-4">
|
||||||
|
<p className="font-goudy text-lg italic text-muted-foreground">
|
||||||
|
"the simplicity is refreshing. no bloat, just what we need"
|
||||||
|
</p>
|
||||||
|
<p className="text-sm font-goudy font-700">early user feedback</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* final cta */}
|
||||||
|
<div className="text-center space-y-6 border-t pt-16">
|
||||||
|
<h2 className="text-5xl font-basteleur font-700">ready to ship faster?</h2>
|
||||||
|
<p className="text-xl font-goudy text-muted-foreground">
|
||||||
|
start tracking issues, managing sprints, and shipping product in minutes
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||||
|
{!isLoading && user ? (
|
||||||
|
<Button asChild size="lg" className="text-lg px-8 py-6">
|
||||||
|
<Link to="/issues">Open app</Link>
|
||||||
|
</Button>
|
||||||
|
) : (
|
||||||
|
<Button asChild size="lg" className="text-lg px-8 py-6">
|
||||||
|
<Link to="/login">start your free trial</Link>
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-muted-foreground font-goudy">
|
||||||
|
no credit card required · 14-day free trial · cancel anytime
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
import { Icon } from "@iconify/react";
|
import { Icon } from "@iconify/react";
|
||||||
|
import { useState } from "react";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import { useSession } from "@/components/session-provider";
|
import { useSession } from "@/components/session-provider";
|
||||||
import ThemeToggle from "@/components/theme-toggle";
|
import ThemeToggle from "@/components/theme-toggle";
|
||||||
@@ -7,34 +8,87 @@ import { cn } from "@/lib/utils";
|
|||||||
|
|
||||||
const pricingTiers = [
|
const pricingTiers = [
|
||||||
{
|
{
|
||||||
name: "Indie",
|
name: "Starter",
|
||||||
price: "£0",
|
price: "£0",
|
||||||
|
priceAnnual: "£0",
|
||||||
period: "Free forever",
|
period: "Free forever",
|
||||||
description: "Perfect for individual developers and small teams",
|
description: "Perfect for side projects and solo developers",
|
||||||
features: ["1 organisation (owned or joined)", "1 project", "100 issues", "Up to 5 users"],
|
tagline: "For solo devs and small projects",
|
||||||
cta: "Get started",
|
features: [
|
||||||
|
"1 organisation (owned or joined)",
|
||||||
|
"1 project",
|
||||||
|
"100 issues",
|
||||||
|
"Up to 5 team members",
|
||||||
|
"Basic time tracking",
|
||||||
|
"Email support",
|
||||||
|
],
|
||||||
|
cta: "Get started free",
|
||||||
ctaLink: "/login",
|
ctaLink: "/login",
|
||||||
highlighted: false,
|
highlighted: false,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Pro",
|
name: "Pro",
|
||||||
price: "£12",
|
price: "£11.99",
|
||||||
|
priceAnnual: "£9.99",
|
||||||
period: "per user/month",
|
period: "per user/month",
|
||||||
description: "For growing teams and professional developers",
|
periodAnnual: "per user/month",
|
||||||
|
description: "For growing teams and professionals",
|
||||||
|
tagline: "Most Popular",
|
||||||
features: [
|
features: [
|
||||||
"Unlimited issues",
|
"Everything in starter",
|
||||||
"Unlimited projects",
|
|
||||||
"Unlimited organisations",
|
"Unlimited organisations",
|
||||||
"Time tracking & reports",
|
"Unlimited projects",
|
||||||
|
"Unlimited issues",
|
||||||
|
"Advanced time tracking & reports",
|
||||||
|
"Sprint velocity tracking",
|
||||||
|
"Priority email support",
|
||||||
|
"Custom issue statuses",
|
||||||
|
"Role-based permissions",
|
||||||
],
|
],
|
||||||
cta: "Start free trial",
|
cta: "Try pro free for 14 days",
|
||||||
ctaLink: "/login",
|
ctaLink: "/login",
|
||||||
highlighted: true,
|
highlighted: true,
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
const faqs = [
|
||||||
|
{
|
||||||
|
question: "Can I switch plans?",
|
||||||
|
answer:
|
||||||
|
"Yes, you can upgrade or downgrade at any time. Changes take effect immediately, and we'll prorate any charges.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "Is there a free trial?",
|
||||||
|
answer: "Yes, pro plan includes a 14-day free trial with full access. No credit card required to start.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "What payment methods do you accept?",
|
||||||
|
answer: "We accept all major credit cards.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "What if I need more users?",
|
||||||
|
answer:
|
||||||
|
"Pro plan pricing scales with your team. Add or remove users anytime, and we'll adjust your billing automatically.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "What happens when my trial ends?",
|
||||||
|
answer:
|
||||||
|
"You'll automatically downgrade to the free starter plan. No charges unless you actively upgrade to pro.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "Can I cancel anytime?",
|
||||||
|
answer:
|
||||||
|
"Absolutely. Cancel anytime with no questions asked. You'll keep access until the end of your billing period.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
question: "Do you offer refunds?",
|
||||||
|
answer: "Yes, we offer a 30-day money-back guarantee. If Sprint isn't right for you, just let us know.",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
export default function Pricing() {
|
export default function Pricing() {
|
||||||
const { user, isLoading } = useSession();
|
const { user, isLoading } = useSession();
|
||||||
|
const [billingPeriod, setBillingPeriod] = useState<"monthly" | "annual">("monthly");
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen flex flex-col">
|
<div className="min-h-screen flex flex-col">
|
||||||
@@ -58,44 +112,94 @@ export default function Pricing() {
|
|||||||
</header>
|
</header>
|
||||||
|
|
||||||
<main className="flex-1 flex flex-col items-center py-16 px-4">
|
<main className="flex-1 flex flex-col items-center py-16 px-4">
|
||||||
<div className="max-w-4xl w-full space-y-16">
|
<div className="max-w-5xl w-full space-y-16 flex flex-col items-center">
|
||||||
|
{/* header section */}
|
||||||
<div className="text-center space-y-8">
|
<div className="text-center space-y-8">
|
||||||
<h1 className="text-5xl font-basteleur font-700">Simple, transparent pricing</h1>
|
<h1 className="text-5xl font-basteleur font-700">Simple, transparent pricing</h1>
|
||||||
<p className="text-2xl font-goudy text-muted-foreground">Choose the plan that fits your team</p>
|
<p className="text-2xl font-goudy text-muted-foreground">
|
||||||
|
Choose the plan that fits your team. Scale as you grow.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* billing toggle */}
|
||||||
|
<div className="flex items-center justify-center gap-4">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setBillingPeriod("monthly")}
|
||||||
|
className={cn(
|
||||||
|
"text-lg transition-colors",
|
||||||
|
billingPeriod === "monthly" ? "text-foreground font-700" : "text-muted-foreground",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
monthly
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="relative w-14 h-8 bg-border rounded-full"
|
||||||
|
onClick={() => setBillingPeriod(billingPeriod === "monthly" ? "annual" : "monthly")}
|
||||||
|
aria-label="toggle billing period"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"absolute top-1 w-6 h-6 bg-personality rounded-full transition-transform",
|
||||||
|
billingPeriod === "annual" ? "translate-x-7" : "translate-x-1",
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setBillingPeriod("annual")}
|
||||||
|
className={cn(
|
||||||
|
"text-lg transition-colors",
|
||||||
|
billingPeriod === "annual" ? "text-foreground font-700" : "text-muted-foreground",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
annual
|
||||||
|
</button>
|
||||||
|
<span className="text-md px-3 pb-1 pt-1.25 bg-personality/10 text-personality rounded-full font-600">
|
||||||
|
Save 17%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
{/* pricing tiers */}
|
||||||
|
<div className="max-w-3xl w-full grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||||
{pricingTiers.map((tier) => (
|
{pricingTiers.map((tier) => (
|
||||||
<div
|
<div
|
||||||
key={tier.name}
|
key={tier.name}
|
||||||
className={`flex flex-col border p-8 ${
|
className={`flex flex-col border p-8 ${
|
||||||
tier.highlighted ? "border-2 border-personality shadow-lg relative" : "border-border"
|
tier.highlighted
|
||||||
|
? "border-2 border-personality shadow-lg relative scale-105"
|
||||||
|
: "border-border"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{tier.highlighted && (
|
{tier.highlighted && (
|
||||||
<div className="absolute -top-4 left-1/2 -translate-x-1/2 bg-personality text-background px-4 py-1 text-sm font-600">
|
<div className="absolute -top-4 left-1/2 -translate-x-1/2 bg-personality text-background px-4 py-1 text-sm font-600">
|
||||||
Most popular
|
{tier.tagline}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="space-y-4 mb-8">
|
<div className="space-y-4 mb-8">
|
||||||
<h2 className="text-4xl font-basteleur font-700">{tier.name}</h2>
|
<h2 className="text-3xl font-basteleur font-700">{tier.name}</h2>
|
||||||
|
|
||||||
<div className="space-y-1">
|
<div className="space-y-1">
|
||||||
<div className="flex items-baseline gap-2">
|
<div className="flex items-baseline gap-2">
|
||||||
<span className="text-4xl font-600">{tier.price}</span>
|
<span className="text-4xl font-600">
|
||||||
<span className="text-md text-muted-foreground">{tier.period}</span>
|
{billingPeriod === "annual" ? tier.priceAnnual : tier.price}
|
||||||
|
</span>
|
||||||
|
<span className="text-sm text-muted-foreground">
|
||||||
|
{billingPeriod === "annual" ? tier.periodAnnual : tier.period}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p className="text-xl font-goudy text-muted-foreground">{tier.description}</p>
|
<p className="text-lg font-goudy text-muted-foreground">{tier.description}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ul className="space-y-3 mb-8 flex-1">
|
<ul className="space-y-3 mb-8 flex-1">
|
||||||
{tier.features.map((feature) => (
|
{tier.features.map((feature) => (
|
||||||
<li key={feature} className="flex items-start gap-2">
|
<li key={feature} className="flex items-start gap-2">
|
||||||
<Icon icon="lucide:check" className="size-5 text-personality shrink-0 mt-0.5" />
|
<Icon icon="lucide:check" className="size-5 text-personality shrink-0 mt-0.5" />
|
||||||
<span className="text-sm">{feature}</span>
|
<span className={"text-sm"}>{feature}</span>
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
@@ -103,7 +207,10 @@ export default function Pricing() {
|
|||||||
<Button
|
<Button
|
||||||
asChild
|
asChild
|
||||||
variant={tier.highlighted ? "default" : "outline"}
|
variant={tier.highlighted ? "default" : "outline"}
|
||||||
className={cn("font-700", tier.highlighted ? "bg-personality hover:bg-personality/90" : "")}
|
className={cn(
|
||||||
|
"font-700 h-auto py-3 whitespace-normal text-center",
|
||||||
|
tier.highlighted ? "bg-personality hover:bg-personality/90" : "",
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<Link to={tier.ctaLink}>{tier.cta}</Link>
|
<Link to={tier.ctaLink}>{tier.cta}</Link>
|
||||||
</Button>
|
</Button>
|
||||||
@@ -111,13 +218,51 @@ export default function Pricing() {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="text-center flex flex-col items-center justify-center gap-2">
|
{/* trust signals */}
|
||||||
<p className="text-xl font-goudy text-muted-foreground">Need something custom? </p>
|
<div className="text-center space-y-6 border-t pt-12">
|
||||||
|
<div className="grid md:grid-cols-3 gap-8 max-w-4xl mx-auto">
|
||||||
|
<div className="flex flex-col items-center gap-2">
|
||||||
|
<Icon icon="lucide:shield-check" className="size-8 text-personality" />
|
||||||
|
<p className="font-goudy font-700">Secure & Encrypted</p>
|
||||||
|
<p className="text-sm text-muted-foreground">Your data is encrypted and secure</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col items-center gap-2">
|
||||||
|
<Icon icon="lucide:credit-card" className="size-8 text-personality" />
|
||||||
|
<p className="font-goudy font-700">No Credit Card Required</p>
|
||||||
|
<p className="text-sm text-muted-foreground">Start your free trial today</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col items-center gap-2">
|
||||||
|
<Icon icon="lucide:rotate-ccw" className="size-8 text-personality" />
|
||||||
|
<p className="font-goudy font-700">30-day money back</p>
|
||||||
|
<p className="text-sm text-muted-foreground">Cancel anytime, no questions</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* faq section */}
|
||||||
|
<div className="max-w-3xl mx-auto space-y-8 border-t pt-12">
|
||||||
|
<h2 className="text-4xl font-basteleur font-700 text-center">Frequently Asked Questions</h2>
|
||||||
|
<div className="space-y-6">
|
||||||
|
{faqs.map((faq) => (
|
||||||
|
<div key={faq.question} className="space-y-2">
|
||||||
|
<h3 className="text-xl font-goudy font-700">{faq.question}</h3>
|
||||||
|
<p className="text-muted-foreground font-goudy">{faq.answer}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* final cta */}
|
||||||
|
<div className="text-center space-y-6 border-t pt-12">
|
||||||
|
<h2 className="text-4xl font-basteleur font-700">Still have questions?</h2>
|
||||||
|
<p className="text-xl font-goudy text-muted-foreground">
|
||||||
|
We're here to help. Get in touch with any questions.
|
||||||
|
</p>
|
||||||
<a
|
<a
|
||||||
href="mailto:ob248@proton.me"
|
href="mailto:ob248@proton.me?subject=Sprint Pricing Question"
|
||||||
className="text-personality hover:underline font-goudy text-lg font-700"
|
className="inline-block text-personality hover:underline font-goudy text-lg font-700"
|
||||||
>
|
>
|
||||||
Get in touch
|
Contact Us
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user