Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -9,6 +9,7 @@ import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
 import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
+import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
 import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
 import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
 import { Award, CheckCircle, Clock, Cloud, Code, Github, LayoutDashboard, Linkedin, Palette } from "lucide-react";
@@ -34,6 +35,7 @@ export default function LandingPage() {
         { name: "Home", id: "hero" },
         { name: "About", id: "about" },
         { name: "Projects", id: "projects" },
+        { name: "Pricing", id: "pricing" },
         { name: "Contact", id: "contact" },
       ]}
       brandName="Brian Mokwena Studio"
@@ -107,6 +109,21 @@ export default function LandingPage() {
     />
   </div>
 
+  <div id="pricing" data-section="pricing">
+      <PricingCardFive
+      animationType="slide-up"
+      textboxLayout="split"
+      useInvertedBackground={false}
+      title="Transparent Pricing Packages"
+      description="Affordable, high-value web development solutions tailored to your business needs."
+      plans={[
+        { id: "basic", tag: "Starter", price: "$999", period: "/ project", description: "Perfect for landing pages and simple business sites.", button: { text: "Get Started" }, featuresTitle: "Core Features", features: ["Responsive Design", "Basic SEO", "CMS Integration"] },
+        { id: "pro", tag: "Pro", price: "$2,499", period: "/ project", description: "For scaling businesses needing custom functionality.", button: { text: "Get Started" }, featuresTitle: "Pro Features", features: ["Advanced Auth", "Database Design", "Cloud Setup"] },
+        { id: "enterprise", tag: "Enterprise", price: "$5,000+", period: "/ custom", description: "Full-scale SaaS platforms and complex web apps.", button: { text: "Contact Sales" }, featuresTitle: "Enterprise Features", features: ["Full-Stack Build", "Maintenance", "Custom API Dev"] },
+      ]}
+    />
+  </div>
+
   <div id="services" data-section="services">
       <FeatureBento
       textboxLayout="split"