From f45b9d362d06cdb0f3a3092a1b811e5fbdfbc0f0 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Sun, 14 Jun 2026 11:45:24 +0000
Subject: [PATCH] Bob AI: Populate src/pages/PricingPage.tsx (snippet builder,
 3 sections)

---
 src/pages/PricingPage.tsx | 139 +++++++++-----------------------------
 1 file changed, 33 insertions(+), 106 deletions(-)

diff --git a/src/pages/PricingPage.tsx b/src/pages/PricingPage.tsx
index 9bd7450..01170a4 100644
--- a/src/pages/PricingPage.tsx
+++ b/src/pages/PricingPage.tsx
@@ -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>
+    </>
   );
-}
\ No newline at end of file
+}