Bob AI: Populate src/pages/PricingPage.tsx (snippet builder, 3 sections)
This commit is contained in:
kudinDmitriyUp
@@ -1,111 +1,38 @@
|
||||
import React from 'react';
|
||||
import { routes } from "@/routes";
|
||||
import NavbarCentered from "@/components/ui/NavbarCentered";
|
||||
import HeroBillboard from "@/components/sections/hero/HeroBillboard";
|
||||
import PricingLayeredCards from "@/components/sections/pricing/PricingLayeredCards";
|
||||
import Button from "@/components/ui/Button";
|
||||
import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
|
||||
import TextAnimation from "@/components/ui/TextAnimation";
|
||||
import ImageOrVideo from "@/components/ui/ImageOrVideo";
|
||||
import ScrollReveal from "@/components/ui/ScrollReveal";
|
||||
import { Check } from "lucide-react";
|
||||
import GridOrCarousel from "@/components/ui/GridOrCarousel";
|
||||
import { cls } from "@/lib/utils";
|
||||
import FaqSimple from "@/components/sections/faq/FaqSimple";
|
||||
import FooterSimple from "@/components/sections/footer/FooterSimple";
|
||||
|
||||
export default function PricingPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-background text-foreground flex flex-col">
|
||||
<NavbarCentered
|
||||
logo="AcmeCorp"
|
||||
navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
|
||||
ctaButton={{ text: "Get Started", href: "/signup" }}
|
||||
/>
|
||||
|
||||
<main className="flex-grow">
|
||||
<HeroBillboard
|
||||
tag="Pricing"
|
||||
title="Simple, transparent pricing"
|
||||
description="Choose the perfect plan for your business needs. No hidden fees, cancel anytime."
|
||||
primaryButton={{ text: "View Plans", href: "#plans" }}
|
||||
secondaryButton={{ text: "Contact Sales", href: "/contact" }}
|
||||
/>
|
||||
|
||||
<div id="plans">
|
||||
<PricingLayeredCards
|
||||
tag="Plans"
|
||||
title="Find your perfect fit"
|
||||
description="Whether you're just starting out or scaling up, we have a plan for you."
|
||||
plans={[
|
||||
{
|
||||
tag: "Starter",
|
||||
price: "$19",
|
||||
description: "Perfect for individuals and small projects.",
|
||||
primaryButton: { text: "Get Started", href: "/signup?plan=starter" },
|
||||
features: ["1 User", "Basic Support", "10GB Storage", "Community Access"]
|
||||
},
|
||||
{
|
||||
tag: "Pro",
|
||||
price: "$49",
|
||||
description: "Best for small teams and growing businesses.",
|
||||
primaryButton: { text: "Start Free Trial", href: "/signup?plan=pro" },
|
||||
features: ["5 Users", "Priority Support", "100GB Storage", "Advanced Analytics", "Custom Domains"]
|
||||
},
|
||||
{
|
||||
tag: "Enterprise",
|
||||
price: "Custom",
|
||||
description: "For large organizations with complex needs.",
|
||||
primaryButton: { text: "Contact Sales", href: "/contact" },
|
||||
features: ["Unlimited Users", "24/7 Dedicated Support", "Unlimited Storage", "Custom Integrations", "SLA Guarantee"]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FaqSimple
|
||||
tag="FAQ"
|
||||
title="Frequently asked questions"
|
||||
description="Everything you need to know about the product and billing."
|
||||
items={[
|
||||
{
|
||||
question: "Can I change my plan later?",
|
||||
answer: "Yes, you can upgrade or downgrade your plan at any time from your account settings. Prorated charges will be applied automatically."
|
||||
},
|
||||
{
|
||||
question: "What payment methods do you accept?",
|
||||
answer: "We accept all major credit cards, PayPal, and wire transfers for annual enterprise plans."
|
||||
},
|
||||
{
|
||||
question: "Is there a free trial?",
|
||||
answer: "Yes, we offer a 14-day free trial on all our paid plans. No credit card is required to start your trial."
|
||||
},
|
||||
{
|
||||
question: "Do you offer discounts for non-profits?",
|
||||
answer: "Yes, we offer a 50% discount for eligible non-profit organizations. Please contact our support team for more details."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</main>
|
||||
|
||||
<FooterSimple
|
||||
brand="AcmeCorp"
|
||||
columns={[
|
||||
{
|
||||
title: "Product",
|
||||
items: [
|
||||
{ label: "Features", href: "/features" },
|
||||
{ label: "Pricing", href: "/pricing" },
|
||||
{ label: "Changelog", href: "/changelog" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Careers", href: "/careers" },
|
||||
{ label: "Contact", href: "/contact" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
copyright="© 2024 AcmeCorp. All rights reserved."
|
||||
links={[
|
||||
{ label: "Privacy Policy", href: "/privacy" },
|
||||
{ label: "Terms of Service", href: "/terms" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<>
|
||||
<div data-webild-section="HeroSplit"><section aria-label="Hero section" className="relative flex items-center h-fit md:h-svh pt-25 pb-20 md:py-0"><HeroBackgroundSlot /><div className="flex flex-col md:flex-row items-center gap-12 md:gap-20 w-content-width mx-auto"><div className="w-full md:w-1/2"><div className="flex flex-col items-center md:items-start gap-3"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Set Courses</p></div><TextAnimation text="Authentic Izakaya Courses" variant="fade-blur" gradientText={true} tag="h1" className="text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-center md:text-left text-balance" /><TextAnimation text="Experience the warmth of traditional Japanese hospitality. From casual bites to premium omakase and craft sake pairings, discover the perfect dining package for your evening." variant="fade-blur" gradientText={false} tag="p" className="md:max-w-8/10 text-lg md:text-xl leading-snug text-center md:text-left text-balance" /><div className="flex flex-wrap max-md:justify-center gap-3 mt-2 md:mt-3"><Button text="View Courses" href="#courses" variant="primary" /><Button text="Book a Table" href="/reservations" variant="secondary" animationDelay={0.1} /></div></div></div><ScrollReveal variant="slide-up" delay={0.2} className="w-full md:w-1/2 h-100 md:h-[65vh] md:max-h-[75svh] p-2 xl:p-3 2xl:p-4 card rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/yakitori-japanese-grilled-chicken-skewers_1339-102554.jpg" /></ScrollReveal></div></section></div>
|
||||
<div data-webild-section="PricingHighlightedCards"><section aria-label="Pricing section" className="py-20"><div className="flex flex-col gap-8 md:gap-10"><div className="flex flex-col items-center w-content-width mx-auto gap-2"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Dining Experiences</p></div><TextAnimation text="Savor the Authentic Flavors of Japan" variant="slide-up" gradientText={true} tag="h2" className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance" /><TextAnimation text="Choose from our carefully curated tasting menus, designed to showcase the finest seasonal ingredients and traditional techniques." variant="slide-up" gradientText={false} tag="p" className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance" /><div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3"><Button text="View Full Menu" href="/menu" variant="primary" /><Button variant="secondary" animationDelay={0.1} /></div></div><ScrollReveal variant="fade-blur"><GridOrCarousel><div key="Tasting Menu" className="flex flex-col h-full"><div className="px-5 py-2 text-base invisible">placeholder</div><div className="flex flex-col items-center gap-4 xl:gap-5 2xl:gap-6 p-6 xl:p-7 2xl:p-8 flex-1 card text-center rounded"><div className="flex flex-col gap-1"><span className="text-5xl md:text-6xl font-semibold">¥4,500</span><span className="text-base font-medium">Tasting Menu</span></div><div className="h-px w-full bg-foreground/20" /><div className="flex flex-col gap-3 w-full"><div key="3 seasonal appetizers" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">3 seasonal appetizers</span></div>
|
||||
<div key="Chef's choice sashimi" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">Chef's choice sashimi</span></div>
|
||||
<div key="Signature grilled yakitori" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">Signature grilled yakitori</span></div>
|
||||
<div key="Rice and miso soup" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">Rice and miso soup</span></div></div><div className="flex flex-col gap-3 w-full mt-auto"><Button text="Reserve Table" href="/reservations" variant="primary" className="w-full" /></div></div></div>
|
||||
<div key="Chef's Choice" className="flex flex-col h-full"><div className="px-5 py-2 text-base text-center primary-button rounded-t text-primary-cta-text">Most Popular</div><div className="flex flex-col items-center gap-4 xl:gap-5 2xl:gap-6 p-6 xl:p-7 2xl:p-8 flex-1 card text-center rounded-t-none rounded-b"><div className="flex flex-col gap-1"><span className="text-5xl md:text-6xl font-semibold">¥8,800</span><span className="text-base font-medium">Chef's Choice</span></div><div className="h-px w-full bg-foreground/20" /><div className="flex flex-col gap-3 w-full"><div key="Premium seasonal appetizers" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">Premium seasonal appetizers</span></div>
|
||||
<div key="Deluxe sashimi platter" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">Deluxe sashimi platter</span></div>
|
||||
<div key="Wagyu beef preparation" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">Wagyu beef preparation</span></div>
|
||||
<div key="Seasonal tempura" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">Seasonal tempura</span></div>
|
||||
<div key="Hand-crafted dessert" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">Hand-crafted dessert</span></div></div><div className="flex flex-col gap-3 w-full mt-auto"><Button text="Book Omakase" href="/reservations" variant="primary" className="w-full" /></div></div></div>
|
||||
<div key="Ultimate Journey" className="flex flex-col h-full"><div className="px-5 py-2 text-base invisible">placeholder</div><div className="flex flex-col items-center gap-4 xl:gap-5 2xl:gap-6 p-6 xl:p-7 2xl:p-8 flex-1 card text-center rounded"><div className="flex flex-col gap-1"><span className="text-5xl md:text-6xl font-semibold">¥15,000</span><span className="text-base font-medium">Ultimate Journey</span></div><div className="h-px w-full bg-foreground/20" /><div className="flex flex-col gap-3 w-full"><div key="Full Omakase Experience" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">Full Omakase Experience</span></div>
|
||||
<div key="5 premium sake pairings" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">5 premium sake pairings</span></div>
|
||||
<div key="Guided tasting notes" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">Guided tasting notes</span></div>
|
||||
<div key="Exclusive private room option" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">Exclusive private room option</span></div></div><div className="flex flex-col gap-3 w-full mt-auto"><Button text="Inquire Now" href="/contact" variant="primary" className="w-full" /></div></div></div></GridOrCarousel></ScrollReveal></div></section></div>
|
||||
<div data-webild-section="FaqSimple"><FaqSimple
|
||||
tag="FAQ"
|
||||
title="Questions About Our Pricing?"
|
||||
description="Find answers to common questions about our set courses, sake pairings, and reservations. We are always happy to assist you."
|
||||
primaryButton={{"text":"Book a Table","href":"/reservations"}}
|
||||
secondaryButton={{"text":"Contact Us","href":"/contact"}}
|
||||
items={[{"question":"Is sake pairing included in the set course price?","answer":"Our premium sake pairings are offered as an optional addition to our set courses. You can also order sake by the glass or bottle."},{"question":"Do you offer vegetarian or vegan omakase options?","answer":"Yes, we can accommodate most dietary restrictions with advance notice. Please let us know when making your reservation."},{"question":"Can we order a la carte instead of a set course?","answer":"While our dining room focuses on the omakase experience, our bar area offers a full a la carte menu of traditional izakaya favorites."},{"question":"What is your cancellation policy?","answer":"We ask for at least 24 hours notice for cancellations. Late cancellations may incur a fee of 50% of the selected course price."},{"question":"Are there extra fees for private dining rooms?","answer":"Our private tatami rooms require a minimum spend rather than a room fee. Please contact us directly to reserve these spaces."}]}
|
||||
/></div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user