Update src/app/page.tsx

src/app/page.tsx

@@ -14,6 +14,26 @@ import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
 import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
 
 export default function LandingPage() {
+  const handlePayment = (price: string) => {
+    const script = document.createElement("script");
+    script.src = "https://checkout.razorpay.com/v1/checkout.js";
+    script.onload = () => {
+      const options = {
+        key: "YOUR_RAZORPAY_KEY",        amount: parseInt(price.replace(/\D/g, "")) * 100 * 21,
+        currency: "INR",        name: "TechPlatform",        description: "Purchase of 21 units",        handler: async (response: any) => {
+          alert("Payment Successful! Ref: " + response.razorpay_payment_id);
+          await fetch("/api/submit-lead", {
+            method: "POST",            body: JSON.stringify({ paymentId: response.razorpay_payment_id, units: 21 }),
+          });
+        },
+        theme: { color: "#3b82f6" },
+      };
+      const rzp = new (window as any).Razorpay(options);
+      rzp.open();
+    };
+    document.body.appendChild(script);
+  };
+
   return (
     <ThemeProvider
         defaultButtonVariant="text-stagger"
@@ -31,22 +51,10 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleApple
       navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "Features",
-          id: "features",
-        },
-        {
-          name: "Pricing",
-          id: "pricing",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
+        { name: "Home", id: "hero" },
+        { name: "Features", id: "features" },
+        { name: "Pricing", id: "pricing" },
+        { name: "Contact", id: "contact" },
       ]}
       brandName="TechPlatform"
     />
@@ -54,20 +62,12 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroLogoBillboard
-      background={{
-        variant: "gradient-bars",
-      }}
+      background={{ variant: "gradient-bars" }}
       logoText="TechPlatform"
       description="The ultimate solution for scaling your digital infrastructure with ease."
       buttons={[
-        {
-          text: "Get Started",
-          href: "#pricing",
-        },
-        {
-          text: "Learn More",
-          href: "#features",
-        },
+        { text: "Get Started", href: "#pricing" },
+        { text: "Learn More", href: "#features" },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/technology-abstract-background-with-particle-lines_53876-104054.jpg"
       imageAlt="modern tech dashboard UI"
@@ -91,27 +91,9 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={true}
       features={[
-        {
-          id: "f1",
-          title: "Real-time Analytics",
-          description: "Monitor your data with precision and clarity.",
-          tag: "Speed",
-          imageSrc: "http://img.b2bpic.net/free-vector/navigation-banner-set_1284-13444.jpg",
-        },
-        {
-          id: "f2",
-          title: "Seamless Integration",
-          description: "Works perfectly with your existing tech stack.",
-          tag: "Unified",
-          imageSrc: "http://img.b2bpic.net/free-vector/20-ux-ui-blue-color-icon-pack-like-list-vision-parameters-monitoring-volume_1142-24669.jpg",
-        },
-        {
-          id: "f3",
-          title: "Cloud Scale",
-          description: "Grow without limits, powered by reliable architecture.",
-          tag: "Scale",
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-living-room-interior-with-smart-home-control-panel_9975-33223.jpg",
-        },
+        { id: "f1", title: "Real-time Analytics", description: "Monitor your data with precision and clarity.", tag: "Speed", imageSrc: "http://img.b2bpic.net/free-vector/navigation-banner-set_1284-13444.jpg" },
+        { id: "f2", title: "Seamless Integration", description: "Works perfectly with your existing tech stack.", tag: "Unified", imageSrc: "http://img.b2bpic.net/free-vector/20-ux-ui-blue-color-icon-pack-like-list-vision-parameters-monitoring-volume_1142-24669.jpg" },
+        { id: "f3", title: "Cloud Scale", description: "Grow without limits, powered by reliable architecture.", tag: "Scale", imageSrc: "http://img.b2bpic.net/free-photo/modern-living-room-interior-with-smart-home-control-panel_9975-33223.jpg" },
       ]}
       title="Core Features"
       description="Powerful capabilities to streamline your workflow."
@@ -124,55 +106,12 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       plans={[
-        {
-          id: "basic",
-          price: "$29",
-          name: "Basic",
-          buttons: [
-            {
-              text: "Choose Basic",
-            },
-          ],
-          features: [
-            "1 User",
-            "Basic Analytics",
-            "Email Support",
-          ],
-        },
-        {
-          id: "pro",
-          price: "$99",
-          name: "Professional",
-          badge: "Popular",
-          buttons: [
-            {
-              text: "Choose Pro",
-            },
-          ],
-          features: [
-            "5 Users",
-            "Advanced Analytics",
-            "24/7 Support",
-          ],
-        },
-        {
-          id: "enterprise",
-          price: "$299",
-          name: "Enterprise",
-          buttons: [
-            {
-              text: "Choose Enterprise",
-            },
-          ],
-          features: [
-            "Unlimited Users",
-            "Full API Access",
-            "Dedicated Manager",
-          ],
-        },
+        { id: "basic", price: "$29", name: "Basic", buttons: [{ text: "Buy Basic", onClick: () => handlePayment("$29") }], features: ["1 User", "Basic Analytics", "Email Support"] },
+        { id: "pro", price: "$99", name: "Professional", badge: "Popular", buttons: [{ text: "Buy Pro", onClick: () => handlePayment("$99") }], features: ["5 Users", "Advanced Analytics", "24/7 Support"] },
+        { id: "enterprise", price: "$299", name: "Enterprise", buttons: [{ text: "Buy Enterprise", onClick: () => handlePayment("$299") }], features: ["Unlimited Users", "Full API Access", "Dedicated Manager"] },
       ]}
       title="Flexible Plans"
-      description="Choose the right plan for your team size."
+      description="Choose the right plan for your team size. All purchases are for 21 units."
     />
   </div>
 
@@ -182,33 +121,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       metrics={[
-        {
-          id: "m1",
-          value: "99.9%",
-          title: "Uptime",
-          items: [
-            "Always on",
-            "Reliability guaranteed",
-          ],
-        },
-        {
-          id: "m2",
-          value: "500+",
-          title: "Customers",
-          items: [
-            "Global presence",
-            "Trusted leaders",
-          ],
-        },
-        {
-          id: "m3",
-          value: "100M+",
-          title: "API Calls",
-          items: [
-            "High throughput",
-            "Robust handling",
-          ],
-        },
+        { id: "m1", value: "99.9%", title: "Uptime", items: ["Always on", "Reliability guaranteed"] },
+        { id: "m2", value: "500+", title: "Customers", items: ["Global presence", "Trusted leaders"] },
+        { id: "m3", value: "100M+", title: "API Calls", items: ["High throughput", "Robust handling"] },
       ]}
       title="Proven Results"
       description="Numbers that define our impact."
@@ -220,46 +135,11 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       testimonials={[
-        {
-          id: "1",
-          title: "Game changer",
-          quote: "This platform transformed our daily productivity.",
-          name: "Jane Doe",
-          role: "CTO",
-          imageSrc: "http://img.b2bpic.net/free-photo/stylish-bearded-hipster-male-dressed-suit-sunglasses-dark-grey-background_613910-12487.jpg",
-        },
-        {
-          id: "2",
-          title: "Excellent service",
-          quote: "I've never experienced such smooth integration.",
-          name: "John Smith",
-          role: "CEO",
-          imageSrc: "http://img.b2bpic.net/free-photo/confident-cheerful-businesswoman_1262-21021.jpg",
-        },
-        {
-          id: "3",
-          title: "Invaluable tool",
-          quote: "A must-have for any serious tech startup.",
-          name: "Alice Wang",
-          role: "Lead Dev",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-man-black-shirt-poses-against-dark-background-standing-studio_613910-15100.jpg",
-        },
-        {
-          id: "4",
-          title: "Pure efficiency",
-          quote: "Reliability like no other in the industry.",
-          name: "Bob Chen",
-          role: "Engineer",
-          imageSrc: "http://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman_74855-1573.jpg",
-        },
-        {
-          id: "5",
-          title: "Highly recommended",
-          quote: "Best platform investment we have made.",
-          name: "Charlie Lee",
-          role: "Founder",
-          imageSrc: "http://img.b2bpic.net/free-photo/business-woman-standing_1187-1543.jpg",
-        },
+        { id: "1", title: "Game changer", quote: "This platform transformed our daily productivity.", name: "Jane Doe", role: "CTO", imageSrc: "http://img.b2bpic.net/free-photo/stylish-bearded-hipster-male-dressed-suit-sunglasses-dark-grey-background_613910-12487.jpg" },
+        { id: "2", title: "Excellent service", quote: "I've never experienced such smooth integration.", name: "John Smith", role: "CEO", imageSrc: "http://img.b2bpic.net/free-photo/confident-cheerful-businesswoman_1262-21021.jpg" },
+        { id: "3", title: "Invaluable tool", quote: "A must-have for any serious tech startup.", name: "Alice Wang", role: "Lead Dev", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-man-black-shirt-poses-against-dark-background-standing-studio_613910-15100.jpg" },
+        { id: "4", title: "Pure efficiency", quote: "Reliability like no other in the industry.", name: "Bob Chen", role: "Engineer", imageSrc: "http://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman_74855-1573.jpg" },
+        { id: "5", title: "Highly recommended", quote: "Best platform investment we have made.", name: "Charlie Lee", role: "Founder", imageSrc: "http://img.b2bpic.net/free-photo/business-woman-standing_1187-1543.jpg" },
       ]}
       title="Client Success"
       description="Hear what our partners have to say."
@@ -271,21 +151,9 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={true}
       faqs={[
-        {
-          id: "q1",
-          title: "Is my data secure?",
-          content: "Yes, we prioritize security with enterprise-grade encryption.",
-        },
-        {
-          id: "q2",
-          title: "Can I upgrade anytime?",
-          content: "Absolutely, plans are flexible and can be modified.",
-        },
-        {
-          id: "q3",
-          title: "Do you offer support?",
-          content: "Our support team is available 24/7 to help you.",
-        },
+        { id: "q1", title: "Is my data secure?", content: "Yes, we prioritize security with enterprise-grade encryption." },
+        { id: "q2", title: "Can I upgrade anytime?", content: "Absolutely, plans are flexible and can be modified." },
+        { id: "q3", title: "Do you offer support?", content: "Our support team is available 24/7 to help you." },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/wireless-router-with-copy-space_23-2148295822.jpg"
       title="Common Questions"
@@ -297,35 +165,22 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactCTA
       useInvertedBackground={false}
-      background={{
-        variant: "sparkles-gradient",
-      }}
+      background={{ variant: "sparkles-gradient" }}
       tag="Get in touch"
       title="Ready to get started?"
       description="Our team is ready to help you hit the ground running."
-      buttons={[
-        {
-          text: "Contact Support",
-          href: "mailto:hello@techplatform.com",
-        },
-      ]}
+      buttons={[{ text: "Contact Support", href: "mailto:hello@techplatform.com" }]}
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterLogoReveal
       logoText="TechPlatform"
-      leftLink={{
-        text: "Privacy Policy",
-        href: "#",
-      }}
-      rightLink={{
-        text: "Terms of Service",
-        href: "#",
-      }}
+      leftLink={{ text: "Privacy Policy", href: "#" }}
+      rightLink={{ text: "Terms of Service", href: "#" }}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}