Merge version_11_1779718328926 into main

Merge version_11_1779718328926 into main

src/App.tsx

@@ -2,11 +2,13 @@ import { Routes, Route } from 'react-router-dom';
 import Layout from './components/Layout';
 import HomePage from './pages/HomePage';
 
+import PricingPage from "@/pages/PricingPage";
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route path="/" element={<HomePage />} />
+        <Route path="/pricing" element={<PricingPage />} />
       </Route>
     </Routes>
   );

src/components/Layout.tsx

@@ -34,7 +34,9 @@ export default function Layout() {
   {
     "name": "Metrics",
     "href": "#metrics"
-  }
+  },
+  { name: "Pricing", href: "/pricing" },
+
 ];
 
   return (

src/components/sections/metrics/MetricsIconCards.tsx

@@ -6,7 +6,8 @@ import ScrollReveal from "@/components/ui/ScrollReveal";
 import { resolveIcon } from "@/utils/resolve-icon";
 
 type Metric = {
-  icon: string | LucideIcon;
+  icon?: string | LucideIcon;
+  imageSrc?: string;
   title: string;
   value: string;
 };
@@ -64,9 +65,13 @@ const MetricsIconCards = ({
             return (
               <div key={metric.value} className="flex flex-col items-center justify-center gap-3 p-3 xl:p-4 2xl:p-5 min-h-70 h-full card rounded">
                 <div className="flex items-center justify-center gap-2">
-                  <div className="flex items-center justify-center size-8 primary-button rounded">
-                    <IconComponent className="h-2/5 w-2/5 text-primary-cta-text" strokeWidth={1.5} />
-                  </div>
+                  {metric.imageSrc ? (
+                    <img src={metric.imageSrc} alt={metric.title} className="size-8 object-cover rounded" />
+                  ) : (
+                    <div className="flex items-center justify-center size-8 primary-button rounded">
+                      <IconComponent className="h-2/5 w-2/5 text-primary-cta-text" strokeWidth={1.5} />
+                    </div>
+                  )}
                   <span className="text-xl truncate">{metric.title}</span>
                 </div>
                 <span className="text-7xl font-medium leading-none truncate">{metric.value}</span>

src/pages/HomePage.tsx

@@ -1,12 +1,118 @@
 import AboutMediaOverlay from '@/components/sections/about/AboutMediaOverlay';
-import ContactCta from '@/components/sections/contact/ContactCta';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
 import FeaturesMarqueeCards from '@/components/sections/features/FeaturesMarqueeCards';
 import HeroTiltedCards from '@/components/sections/hero/HeroTiltedCards';
 import MetricsIconCards from '@/components/sections/metrics/MetricsIconCards';
+import FeaturesDetailedSteps from '@/components/sections/features/FeaturesDetailedSteps';
 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 { 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(25deg)_scale(1.1)_translateZ(20px)] shadow-xl hover:shadow-3xl" />
+                  {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 (
@@ -193,17 +299,17 @@ export default function HomePage() {
       description="Our commitment to data-driven strategies consistently delivers outstanding outcomes and measurable success for our diverse clientele."
       metrics={[
         {
-          icon: Sparkles,
+          imageSrc: "https://img.b2bpic.net/free-photo/happy-business-woman-standing-outdoors_1262-20546.jpg",
           title: "Client Satisfaction",
           value: "98%",
         },
         {
-          icon: TrendingUp,
+          imageSrc: "https://img.b2bpic.net/free-photo/smiling-african-american-man-posing-library_74855-1619.jpg",
           title: "Campaign ROI",
           value: "+35%",
         },
         {
-          icon: BarChart2,
+          imageSrc: "https://img.b2bpic.net/free-photo/composition-with-love-emoji_23-2148860254.jpg",
           title: "Website Traffic Increase",
           value: "+70%",
         },
@@ -212,19 +318,144 @@ export default function HomePage() {
     </SectionErrorBoundary>
   </div>
 
+  <div id="how-it-works" data-section="how-it-works">
+    <SectionErrorBoundary name="how-it-works">
+      <FeaturesDetailedSteps
+        tag="Our Process"
+        title="Your Journey to Digital Success"
+        description="We guide you through a clear, collaborative process to ensure your marketing goals are not just met, but exceeded."
+        steps={[
+          {
+            tag: "Step 1",
+            title: "Initial Consultation & Strategy",
+            subtitle: "Understanding Your Vision",
+            description: "We start with a deep dive into your business, goals, and target audience to craft a tailored marketing strategy.",
+            imageSrc: "https://img.b2bpic.net/free-photo/business-people-meeting-discussing-ideas-concept_53876-133614.jpg",
+          },
+          {
+            tag: "Step 2",
+            title: "Implementation & Execution",
+            subtitle: "Bringing the Strategy to Life",
+            description: "Our team meticulously executes the approved strategy, deploying campaigns across chosen digital channels.",
+            imageSrc: "https://img.b2bpic.net/free-photo/young-female-logo-designer-working-graphic-tablet_23-2149119220.jpg",
+          },
+          {
+            tag: "Step 3",
+            title: "Monitoring & Optimization",
+            subtitle: "Continuous Improvement",
+            description: "We continuously monitor performance, analyze data, and optimize campaigns for maximum ROI and sustained growth.",
+            imageSrc: "https://img.b2bpic.net/free-photo/marketing-plan-commercial-strategy-business_53876-133615.jpg",
+          },
+          {
+            tag: "Step 4",
+            title: "Reporting & Review",
+            subtitle: "Transparent Insights",
+            description: "Regular, transparent reports keep you informed of progress, with detailed insights and future recommendations.",
+            imageSrc: "https://img.b2bpic.net/free-photo/professionals-present-financial-charts-meeting_482257-121150.jpg",
+          },
+        ]}
+      />
+    </SectionErrorBoundary>
+  </div>
+
+  <div id="faq" data-section="faq">
+    <SectionErrorBoundary name="faq">
+      <FaqSplitMedia imageSrc="https://img.b2bpic.net/free-photo/digital-marketing-with-laptop-phone-tablet_23-2150168632.jpg"
+        tag="FAQs"
+        title="Your Questions, Answered"
+        description="Find quick answers to the most common questions about our services, processes, and what makes us Madrid's leading marketing agency."
+        items={[
+          {
+            question: "What types of businesses do you work with?",
+            answer: "We partner with businesses of all sizes, from startups to established enterprises, across various industries. Our strategies are tailored to meet your unique goals.",
+          },
+          {
+            question: "How do you measure success?",
+            answer: "We focus on data-driven results. Success is measured through key performance indicators (KPIs) such as increased website traffic, lead generation, conversion rates, and overall ROI, all tracked and reported transparently.",
+          },
+          {
+            question: "What is your approach to digital marketing?",
+            answer: "Our approach is holistic and integrated. We combine SEO, content marketing, social media, and paid advertising to create a cohesive strategy that maximizes your online presence and achieves measurable growth.",
+          },
+          {
+            question: "How long does it take to see results?",
+            answer: "While some results can be seen quickly, especially with paid advertising, sustainable organic growth typically takes 3-6 months. We focus on long-term strategies for lasting impact.",
+          },
+          {
+            question: "Do you offer custom marketing packages?",
+            answer: "Absolutely! We understand that every business is unique. We offer fully customized marketing packages designed to align with your specific objectives, budget, and industry.",
+          },
+        ]}
+      />
+    </SectionErrorBoundary>
+  </div>
+
+    <div id="pricing" data-section="pricing">
+    <SectionErrorBoundary name="pricing">
+      <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."
+        plans={[
+          {
+            tag: "Basic",
+            price: "€499/month",
+            description: "Ideal for startups and small businesses looking to establish an online presence.",
+            features: [
+              "Basic SEO Optimization",
+              "Social Media Setup",
+              "Content Calendar (2 posts/week)",
+              "Monthly Performance Report",
+            ],
+            primaryButton: { text: "Get Started", href: "#contact" },
+          },
+          {
+            tag: "Pro",
+            price: "€999/month",
+            description: "Perfect for growing businesses aiming for significant digital growth and engagement.",
+            features: [
+              "Advanced SEO Strategy",
+              "Full Social Media Management",
+              "Content Creation (4 posts/week)",
+              "Bi-Weekly Performance Reports",
+              "Email Marketing Campaigns",
+            ],
+            highlight: "Most Popular",
+            primaryButton: { text: "Choose Pro", href: "#contact" },
+          },
+          {
+            tag: "Enterprise",
+            price: "Custom",
+            description: "Tailored solutions for large enterprises with complex marketing needs and ambitious goals.",
+            features: [
+              "Dedicated Account Manager",
+              "Comprehensive Digital Strategy",
+              "Unlimited Content Creation",
+              "Weekly Performance Reviews",
+              "Advanced Analytics & Insights",
+              "PR & Influencer Outreach",
+            ],
+            primaryButton: { text: "Contact Us", href: "#contact" },
+          },
+        ]}
+      />
+    </SectionErrorBoundary>
+  </div>
+
   <div id="contact" data-section="contact">
     <SectionErrorBoundary name="contact">
-          <ContactCta
-      tag="Ready to Grow?"
-      text="Let's discuss how our marketing expertise can transform your business. Get a free consultation today!"
-      primaryButton={{
-        text: "Schedule a Call",
-        href: "#",
-      }}
-      secondaryButton={{
-        text: "Email Us",
-        href: "mailto:info@madridmarketinghub.com",
-      }}
+          <ContactSplitForm
+      tag="Get in Touch"
+      title="Let's Discuss Your Next Project"
+      description="Have a question or want to start a project? Fill out the form below and we'll get back to you shortly."
+      inputs={[
+        { name: "name", type: "text", placeholder: "Your Name", required: true },
+        { name: "email", type: "email", placeholder: "Your Email", required: true },
+        { name: "subject", type: "text", placeholder: "Subject" },
+      ]}
+      textarea={{ name: "message", placeholder: "Your Message", rows: 5, required: true }}
+      buttonText="Send Message"
+      imageSrc="https://img.b2bpic.net/free-photo/young-woman-working-laptop-cafe_1303-24700.jpg"
     />
     </SectionErrorBoundary>
   </div>

src/pages/PricingPage.tsx

@@ -0,0 +1,144 @@
+import PricingCenteredCards from "@/components/sections/pricing/PricingCenteredCards";
+import { Check } from "lucide-react";
+import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
+
+const plans = [
+  {
+    tag: "Basic",
+    price: "€499/mo",
+    description: "Ideal for startups and small businesses looking to establish an online presence.",
+    features: [
+      "Basic SEO Optimization",
+      "Social Media Setup",
+      "Content Calendar (2 posts/week)",
+      "Monthly Performance Report",
+    ],
+    primaryButton: { text: "Get Started", href: "/#contact" },
+  },
+  {
+    tag: "Pro",
+    price: "€999/mo",
+    description: "Perfect for growing businesses aiming for significant digital growth and engagement.",
+    features: [
+      "Advanced SEO Strategy",
+      "Full Social Media Management",
+      "Content Creation (4 posts/week)",
+      "Bi-Weekly Performance Reports",
+      "Email Marketing Campaigns",
+    ],
+    primaryButton: { text: "Choose Pro", href: "/#contact" },
+  },
+  {
+    tag: "Enterprise",
+    price: "Custom",
+    description: "Tailored solutions for large enterprises with complex marketing needs and ambitious goals.",
+    features: [
+      "Dedicated Account Manager",
+      "Comprehensive Digital Strategy",
+      "Unlimited Content Creation",
+      "Weekly Performance Reviews",
+      "Advanced Analytics & Insights",
+      "PR & Influencer Outreach",
+    ],
+    primaryButton: { text: "Contact Us", href: "/#contact" },
+  },
+];
+
+export default function PricingPage() {
+  return (
+    <div className="min-h-svh bg-background text-foreground flex flex-col">
+      <div data-webild-section="PricingCenteredCards">
+        <SectionErrorBoundary name="pricing">
+          <PricingCenteredCards
+            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."
+            plans={plans}
+          />
+        </SectionErrorBoundary>
+      </div>
+
+      <div data-webild-section="PricingComparisonTable">
+        <SectionErrorBoundary name="pricing-comparison">
+          <section className="bg-background text-foreground">
+            <div className="w-content-width mx-auto px-4 md:px-6">
+              <div className="text-center">
+                <h2 className="text-4xl md:text-5xl font-medium mb-4">Detailed Feature Comparison</h2>
+                <p className="text-lg text-muted-foreground max-w-content-width mx-auto">
+                  Compare our plans side-by-side to find the perfect fit for your business needs.
+                </p>
+              </div>
+              
+              <div className="overflow-x-auto">
+                <table className="w-full text-left border-collapse min-w-[800px]">
+                  <thead>
+                    <tr>
+                      <th className="p-5 border-b border-border font-medium text-lg w-1/4">Features</th>
+                      <th className="p-5 border-b border-border font-medium text-lg text-center w-1/4">Basic</th>
+                      <th className="p-5 border-b border-border font-medium text-lg text-center w-1/4">Pro</th>
+                      <th className="p-5 border-b border-border font-medium text-lg text-center w-1/4">Enterprise</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr className="bg-card/30">
+                      <td className="p-5 border-b border-border font-medium">SEO Strategy</td>
+                      <td className="p-5 border-b border-border text-center">Basic</td>
+                      <td className="p-5 border-b border-border text-center">Advanced</td>
+                      <td className="p-5 border-b border-border text-center">Comprehensive</td>
+                    </tr>
+                    <tr>
+                      <td className="p-5 border-b border-border font-medium">Social Media Posts</td>
+                      <td className="p-5 border-b border-border text-center">2 per week</td>
+                      <td className="p-5 border-b border-border text-center">4 per week</td>
+                      <td className="p-5 border-b border-border text-center">Unlimited</td>
+                    </tr>
+                    <tr className="bg-card/30">
+                      <td className="p-5 border-b border-border font-medium">Reporting</td>
+                      <td className="p-5 border-b border-border text-center">Monthly</td>
+                      <td className="p-5 border-b border-border text-center">Bi-Weekly</td>
+                      <td className="p-5 border-b border-border text-center">Weekly</td>
+                    </tr>
+                    <tr>
+                      <td className="p-5 border-b border-border font-medium">Email Marketing</td>
+                      <td className="p-5 border-b border-border text-center text-muted-foreground">-</td>
+                      <td className="p-5 border-b border-border text-center">
+                        <div className="flex justify-center">
+                          <Check className="size-5 text-primary-cta" />
+                        </div>
+                      </td>
+                      <td className="p-5 border-b border-border text-center">
+                        <div className="flex justify-center">
+                          <Check className="size-5 text-primary-cta" />
+                        </div>
+                      </td>
+                    </tr>
+                    <tr className="bg-card/30">
+                      <td className="p-5 border-b border-border font-medium">PR & Influencer Outreach</td>
+                      <td className="p-5 border-b border-border text-center text-muted-foreground">-</td>
+                      <td className="p-5 border-b border-border text-center text-muted-foreground">-</td>
+                      <td className="p-5 border-b border-border text-center">
+                        <div className="flex justify-center">
+                          <Check className="size-5 text-primary-cta" />
+                        </div>
+                      </td>
+                    </tr>
+                    <tr>
+                      <td className="p-5 border-b border-border font-medium">Dedicated Manager</td>
+                      <td className="p-5 border-b border-border text-center text-muted-foreground">-</td>
+                      <td className="p-5 border-b border-border text-center text-muted-foreground">-</td>
+                      <td className="p-5 border-b border-border text-center">
+                        <div className="flex justify-center">
+                          <Check className="size-5 text-primary-cta" />
+                        </div>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </section>
+        </SectionErrorBoundary>
+      </div>
+    </div>
+  );
+}

src/routes.ts

@@ -6,4 +6,5 @@ export interface Route {
 
 export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
+  { path: '/pricing', label: 'Pricing', pageFile: 'PricingPage' },
 ];