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="mx-auto max-w-7xl px-6">
<div className="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto stagger"> <div className="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto stagger">
{tiers.map((tier) => ( {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 && ( {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"> <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 <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> <CardTitle className="text-xl">{tier.name}</CardTitle>
<p className="text-sm text-slate-500 mt-1">{tier.description}</p> <p className="text-sm text-slate-500 mt-1">{tier.description}</p>
<div className="mt-4"> <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> <span className="text-slate-500 ml-1">/mo</span>
</div> </div>
{billing === "annual" && ( {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> </CardHeader>
<CardContent className="flex-1 flex flex-col"> <CardContent className="flex-1 flex flex-col">
@@ -133,11 +133,11 @@ export default function PricingPage() {
))} ))}
</ul> </ul>
{tier.name === "Enterprise" ? ( {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> <Link to="/contact">{tier.cta}</Link>
</Button> </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} {tier.cta}
</Button> </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> <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"> <Accordion type="single" collapsible className="space-y-3 stagger">
{faqs.map((faq, i) => ( {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> <AccordionTrigger className="text-left font-medium hover:no-underline py-4">{faq.q}</AccordionTrigger>
<AccordionContent className="text-slate-500 pb-4">{faq.a}</AccordionContent> <AccordionContent className="text-slate-500 pb-4">{faq.a}</AccordionContent>
</AccordionItem> </AccordionItem>