Update src/app/payment/page.tsx

Merge version_5 into main

src/app/page.tsx

@@ -31,18 +31,13 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingInline
       navItems={[
-        {
-          name: "How it Works",          id: "#how-it-works"},
-        {
-          name: "Features",          id: "#features"},
-        {
-          name: "Pricing",          id: "#pricing"},
-        {
-          name: "FAQ",          id: "#faq"},
+        { name: "How it Works", id: "#how-it-works" },
+        { name: "Features", id: "#features" },
+        { name: "Pricing", id: "#pricing" },
+        { name: "FAQ", id: "#faq" },
       ]}
       brandName="Place2Page"
-      button={{
-        text: "Get Started",        href: "/payment"}}
+      button={{ text: "Get Started", href: "/payment" }}
     />
   </div>
 
@@ -51,8 +46,7 @@ export default function LandingPage() {
       logoText="Place2Page"
       description="Turn your Google Maps listing into a professional, SEO-optimized website instantly—no coding, no designers, no headaches. Let AI do the heavy lifting while you focus on your business."
       buttons={[
-        {
-          text: "Start Free for 30 Days",          href: "/payment"},
+        { text: "Start Free for 30 Days", href: "/payment" },
       ]}
       slides={[
         { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DKQM9lPNI4lPQ9uPYtLimgRQHP/a-futuristic-ai-powered-dashboard-interf-1778205391570-f4e98867.png?_wi=1", imageAlt: "Dashboard preview" },
@@ -65,6 +59,19 @@ export default function LandingPage() {
     />
   </div>
 
+  <div id="contact" data-section="contact">
+      <ContactCTA
+      useInvertedBackground={false}
+      background={{ variant: "sparkles-gradient" }}
+      tag="Ready to get started?"
+      title="Launch Your Site Today"
+      description="Stop struggling with web development and join the future of local business."
+      buttons={[
+        { text: "Start 30-Day Free Trial", href: "/payment" },
+      ]}
+    />
+  </div>
+
   <div id="how-it-works" data-section="how-it-works">
       <FeatureBento
       animationType="slide-up"
@@ -101,11 +108,7 @@ export default function LandingPage() {
   <div id="features" data-section="features">
       <TextAbout
       useInvertedBackground={false}
-      title="Powerful AI Engine"
-      buttons={[
-        {
-          text: "See All Features"},
-      ]}
+      title="Trusted by Local Business Founders"
     />
   </div>
 
@@ -169,20 +172,6 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="contact" data-section="contact">
-      <ContactCTA
-      useInvertedBackground={false}
-      background={{ variant: "sparkles-gradient" }}
-      tag="Ready to get started?"
-      title="Launch Your Site Today"
-      description="Stop struggling with web development and join the future of local business."
-      buttons={[
-        {
-          text: "Start 30-Day Free Trial",          href: "/payment"},
-      ]}
-    />
-  </div>
-
   <div id="footer" data-section="footer">
       <FooterBase
       columns={[

src/app/payment/page.tsx

@@ -3,10 +3,14 @@
 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 = () => {
+    alert("Opening secure payment gateway for Visa / Mastercard...");
+  };
+
   return (
     <ThemeProvider
         defaultButtonVariant="shift-hover"
@@ -33,18 +37,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={[