vibeasite-templates/template-saas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Seed: saas template (34 files)

Browse Source
This commit is contained in:
jyswee
2026-07-23 22:54:39 +00:00
parent 557b623c6e
commit 74762be45c
1 changed files with 6 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Pricing.tsx
+6 -6
View File
@@ -106,7 +106,7 @@ export default function PricingPage() {
<div className="mx-auto max-w-7xl px-6">
<div className="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto stagger">
{tiers.map((tier) => (
<Card key={tier.name} className={`relative flex flex-col hover:border-primary/50 hover:shadow-xl transition-all duration-300 \${tier.popular ? "ring-2 ring-indigo-600 shadow-xl shadow-indigo-100" : "border-slate-200"}`}>
<Card key={tier.name} className={`relative flex flex-col hover:border-primary/50 hover:shadow-xl transition-all duration-300 ${tier.popular ? "ring-2 ring-indigo-600 shadow-xl shadow-indigo-100" : "border-slate-200"}`}>
{tier.popular && (
<div className="absolute -top-4 left-1/2 -translate-x-1/2 bg-primary text-primary-foreground px-4 py-1 rounded-full text-sm font-medium shadow-lg flex items-center gap-1.5">
<Sparkles className="h-3.5 w-3.5" /> Most Popular
@@ -116,11 +116,11 @@ export default function PricingPage() {
<CardTitle className="text-xl">{tier.name}</CardTitle>
<p className="text-sm text-slate-500 mt-1">{tier.description}</p>
<div className="mt-4">
<span className="text-4xl font-bold">\${billing === "monthly" ? tier.monthlyPrice : tier.annualPrice}</span>
<span className="text-4xl font-bold">${billing === "monthly" ? tier.monthlyPrice : tier.annualPrice}</span>
<span className="text-slate-500 ml-1">/mo</span>
</div>
{billing === "annual" && (
<p className="text-sm text-green-600 mt-1">Billed annually (\${tier.annualPrice * 12}/yr)</p>
<p className="text-sm text-green-600 mt-1">Billed annually (${tier.annualPrice * 12}/yr)</p>
)}
</CardHeader>
<CardContent className="flex-1 flex flex-col">
@@ -133,11 +133,11 @@ export default function PricingPage() {
))}
</ul>
{tier.name === "Enterprise" ? (
<Button asChild className={`mt-8 w-full rounded-full active:scale-[0.98] \${tier.popular ? "bg-indigo-600 hover:bg-indigo-500 text-white" : ""}`} variant="outline">
<Button asChild className={`mt-8 w-full rounded-full active:scale-[0.98] ${tier.popular ? "bg-indigo-600 hover:bg-indigo-500 text-white" : ""}`} variant="outline">
<Link to="/contact">{tier.cta}</Link>
</Button>
) : (
<Button onClick={() => handleCheckout(tier)} disabled={checkoutBusy} className={`mt-8 w-full rounded-full active:scale-[0.98] \${tier.popular ? "bg-indigo-600 hover:bg-indigo-500 text-white" : ""}`} variant={tier.popular ? "default" : "outline"}>
<Button onClick={() => handleCheckout(tier)} disabled={checkoutBusy} className={`mt-8 w-full rounded-full active:scale-[0.98] ${tier.popular ? "bg-indigo-600 hover:bg-indigo-500 text-white" : ""}`} variant={tier.popular ? "default" : "outline"}>
{tier.cta}
</Button>
)}
@@ -192,7 +192,7 @@ export default function PricingPage() {
<h2 className="animate-fade-up text-3xl font-bold text-center mb-12 tracking-tight sm:text-4xl">Frequently Asked Questions</h2>
<Accordion type="single" collapsible className="space-y-3 stagger">
{faqs.map((faq, i) => (
<AccordionItem key={i} value={`faq-\${i}`} className="border border-slate-200 rounded-xl px-6 data-[state=open]:shadow-md transition-shadow">
<AccordionItem key={i} value={`faq-${i}`} className="border border-slate-200 rounded-xl px-6 data-[state=open]:shadow-md transition-shadow">
<AccordionTrigger className="text-left font-medium hover:no-underline py-4">{faq.q}</AccordionTrigger>
<AccordionContent className="text-slate-500 pb-4">{faq.a}</AccordionContent>
</AccordionItem>