Update src/app/page.tsx

src/app/page.tsx

@@ -11,6 +11,7 @@ import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSp
 import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
 import ProductCardFour from '@/components/sections/product/ProductCardFour';
+import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
 import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
 import { Award, CheckCircle, Eye } from "lucide-react";
 
@@ -35,6 +36,7 @@ export default function LandingPage() {
         { name: "About", id: "about" },
         { name: "Portfolio", id: "portfolio" },
         { name: "Services", id: "services" },
+        { name: "Pricing", id: "pricing" },
         { name: "Contact", id: "contact" },
       ]}
       brandName="Lens & Light"
@@ -99,6 +101,20 @@ export default function LandingPage() {
     />
   </div>
 
+  <div id="pricing" data-section="pricing">
+    <PricingCardThree
+      animationType="slide-up"
+      textboxLayout="default"
+      useInvertedBackground={false}
+      title="Flexible Pricing Plans"
+      description="Choose the perfect package for your brand's vision."
+      plans={[
+        { id: "basic", name: "Starter", price: "$499", features: ["Up to 2 mins film", "Basic color grading", "Standard resolution"], buttons: [{ text: "Get Started", href: "#contact" }] },
+        { id: "pro", name: "Professional", price: "$999", features: ["Up to 5 mins film", "Advanced color grading", "4K resolution", "Priority support"], buttons: [{ text: "Get Started", href: "#contact" }] }
+      ]}
+    />
+  </div>
+
   <div id="metrics" data-section="metrics">
       <MetricCardOne
       animationType="depth-3d"
@@ -161,7 +177,7 @@ export default function LandingPage() {
       logoText="Lens & Light"
       columns={[
         {
-          title: "Navigation",          items: [{ label: "Portfolio", href: "#portfolio" }, { label: "Services", href: "#services" }]
+          title: "Navigation",          items: [{ label: "Portfolio", href: "#portfolio" }, { label: "Services", href: "#services" }, { label: "Pricing", href: "#pricing" }]
         },
         {
           title: "Social",          items: [{ label: "Instagram", href: "https://instagram.com" }, { label: "Twitter", href: "https://twitter.com" }]
@@ -172,4 +188,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}