src/pages/HomePage.tsx

@@ -1,14 +1,117 @@
 import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import PricingHighlightedCards from '@/components/sections/pricing/PricingHighlightedCards';
 import FeaturesMarqueeCards from '@/components/sections/features/FeaturesMarqueeCards';
 import HeroTiltedCards from '@/components/sections/hero/HeroTiltedCards';
 import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
 import SocialProofMarquee from '@/components/sections/social-proof/SocialProofMarquee';
 import TestimonialMetricsCards from '@/components/sections/testimonial/TestimonialMetricsCards';
-import { BarChart2, Sparkles, TrendingUp } from "lucide-react";
-import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
-import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
+import { BarChart2, Sparkles, TrendingUp, Check } from 'lucide-react';
+import SectionErrorBoundary from '@/components/ui/SectionErrorBoundary';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import Button from '@/components/ui/Button';
+import TextAnimation from '@/components/ui/TextAnimation';
+import GridOrCarousel from '@/components/ui/GridOrCarousel';
+import ScrollReveal from '@/components/ui/ScrollReveal';
+import { cls } from '@/lib/utils';
+
+// ── Inlined from src/components/sections/pricing/PricingHighlightedCards.tsx (was <PricingHighlightedCards />)
+// You can now edit InlinedPricingHighlightedCards freely below — it is a local copy and
+// will not affect any other page that imports the original PricingHighlightedCards.
+type PricingPlan = {
+  tag: string;
+  price: string;
+  description: string;
+  features: string[];
+  highlight?: string;
+  primaryButton: { text: string; href: string };
+  secondaryButton?: { text: string; href: string };
+};
+
+const InlinedPricingHighlightedCards = ({
+  tag,
+  title,
+  description,
+  primaryButton,
+  secondaryButton,
+  plans,
+}: {
+  tag: string;
+  title: string;
+  description: string;
+  primaryButton?: { text: string; href: string };
+  secondaryButton?: { text: string; href: string };
+  plans: PricingPlan[];
+}) => (
+  <section aria-label="Pricing section" className="py-20">
+    <div className="flex flex-col gap-8">
+      <div className="flex flex-col items-center w-content-width mx-auto gap-2">
+        <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
+          <p>{tag}</p>
+        </div>
+
+        <TextAnimation
+          text={title}
+          variant="fade-blur"
+          gradientText={true}
+          tag="h2"
+          className="text-6xl font-medium text-center text-balance"
+        />
+
+        <TextAnimation
+          text={description}
+          variant="fade-blur"
+          gradientText={false}
+          tag="p"
+          className="md:max-w-6/10 text-lg leading-tight text-center"
+        />
+
+        {(primaryButton || secondaryButton) && (
+          <div className="flex flex-wrap justify-center gap-3 mt-3">
+            {primaryButton && <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>}
+            {secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />}
+          </div>
+        )}
+      </div>
+
+      <ScrollReveal variant="fade">
+        <GridOrCarousel>
+          {plans.map((plan) => (
+            <div key={plan.tag} className="flex flex-col h-full">
+              <div className={cls("px-5 py-2 text-sm", plan.highlight ? "text-center primary-button rounded-t text-primary-cta-text" : "invisible")}>
+                {plan.highlight || "placeholder"}
+              </div>
+
+              <div className={cls("flex flex-col items-center gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 flex-1 card text-center", plan.highlight ? "rounded-t-none rounded-b" : "rounded")}>
+                <div className="flex flex-col gap-1">
+                  <span className="text-5xl font-medium">{plan.price}</span>
+                  <span className="text-xl font-medium">{plan.tag}</span>
+                </div>
+
+                <div className="h-px w-full bg-foreground/20" />
+
+                <div className="flex flex-col gap-3 w-full">
+                  {plan.features.map((feature) => (
+                    <div key={feature} className="flex items-start gap-3">
+                      <div className="flex items-center justify-center shrink-0 size-6 primary-button rounded">
+                        <Check className="size-3 text-primary-cta-text" strokeWidth={2} />
+                      </div>
+                      <span className="text-base text-left">{feature}</span>
+                    </div>
+                  ))}
+                </div>
+
+                <div className="flex flex-col gap-3 w-full mt-auto">
+                  <Button text={plan.primaryButton.text} href={plan.primaryButton.href} variant="primary" className="w-full transform-gpu [perspective:1000px] [transform-style:preserve-3d] transition-transform duration-300 hover:[transform:rotateY(12deg)] hover:scale-105 shadow-lg hover:shadow-2xl" />
+                  {plan.secondaryButton && <Button text={plan.secondaryButton.text} href={plan.secondaryButton.href} variant="secondary" className="w-full" />}
+                </div>
+              </div>
+            </div>
+          ))}
+        </GridOrCarousel>
+      </ScrollReveal>
+    </div>
+  </section>
+);
 
 export default function HomePage() {
   return (
@@ -248,7 +351,7 @@ export default function HomePage() {
 
     <div id="pricing" data-section="pricing">
     <SectionErrorBoundary name="pricing">
-      <PricingHighlightedCards
+      <InlinedPricingHighlightedCards
         tag="Our Packages"
         title="Flexible Plans for Every Business"
         description="Choose the perfect marketing package designed to elevate your brand and achieve your business goals. All plans are customizable."