Update src/app/payment/page.tsx

Merge version_4 into main

src/app/payment/page.tsx

@@ -3,10 +3,15 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import ContactCTA from '@/components/sections/contact/ContactCTA';
+import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
 import FooterBase from '@/components/sections/footer/FooterBase';
 
 export default function PaymentPage() {
+  const handlePayment = () => {
+    // Simulated payment trigger for standard methods (Visa, Mastercard)
+    alert("Opening secure payment gateway for Visa / Mastercard...");
+  };
+
   return (
     <ThemeProvider
         defaultButtonVariant="shift-hover"
@@ -33,18 +38,27 @@ export default function PaymentPage() {
               button={{ text: "Get Started", href: "/payment" }}
             />
         </div>
-        <div className="min-h-screen pt-32 pb-20 px-4 flex flex-col items-center justify-center">
-          <h1 className="text-4xl font-bold mb-6">Complete Your Payment</h1>
-          <p className="text-lg opacity-80 mb-10">Securely process your subscription for Place2Page.</p>
-          <div className="w-full max-w-md p-8 rounded-2xl border bg-card">
-            {/* Placeholder for actual payment form component */}
-            <div className="space-y-4">
-              <div className="w-full h-12 bg-accent/20 rounded-lg animate-pulse" />
-              <div className="w-full h-12 bg-accent/20 rounded-lg animate-pulse" />
-              <div className="w-full h-12 bg-primary-cta rounded-lg opacity-90" />
-            </div>
-          </div>
+
+        <div className="pt-32 pb-20">
+          <PricingCardTwo
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            title="Choose Your Plan"
+            description="Select the perfect plan to get your local business online."
+            plans={[
+              {
+                id: "basic",                badge: "Basic",                price: "$0/mo",                subtitle: "Essential tools for getting started.",                buttons: [{ text: "Get Started", onClick: handlePayment }],
+                features: ["Basic listing page", "AI content generation", "Standard support"]
+              },
+              {
+                id: "core",                badge: "Core",                price: "$4.99/mo",                subtitle: "Enhanced tools for growth.",                buttons: [{ text: "Get Started", onClick: handlePayment }],
+                features: ["Everything in Basic", "Custom domain support", "Priority support"]
+              }
+            ]}
+          />
         </div>
+
         <div id="footer" data-section="footer">
             <FooterBase
               columns={[