feat: .NET Technology Page - Final Refinements

app/services/[slug]/ExpertisePageClient.tsx

@@ -8,15 +8,20 @@ import {
   WhyProcedure,
   TechStack,
   FAQSection,
-  ExpertiseCTA,
   RelatedExpertise,
   WhoWeWorkWith,
   ProcessTimeline,
   UseCasesGrid,
   WhyChooseProcedure,
   QualityMatters,
+  ArchitectureSection,
+  EngagementModels,
+  RiskReversal,
+  PhilosophySection,
+  HowItWorks,
 } from "@/components/expertise";
 import { Testimonials } from "@/components/sections/Testimonials";
+import { Stats } from "@/components/sections/Stats";
 import { CalInline } from "@/components/CalInline";
 import { motion } from "framer-motion";
 
@@ -97,6 +102,8 @@ export default function ExpertisePageClient({
             ? ["Product Design", "UX Design", "UI Design", "Design Systems", "Product Strategy", "User Research"]
             : expertise.slug === "kubernetes"
             ? ["Kubernetes Consulting", "Container Orchestration", "Cloud Native Infrastructure", "Kubernetes Implementation", "Kubernetes Optimization"]
+            : expertise.slug === "dotnet-development"
+            ? [".NET Development Services", "ASP.NET Core Development", "C# Development", "Azure .NET Development", ".NET Migration Services", "Enterprise .NET Consulting"]
             : pageData.hero.badge,
         areaServed: [
           { "@type": "Country", name: "United States" },
@@ -131,6 +138,8 @@ export default function ExpertisePageClient({
             ? ["Backend Engineering", "Software Development", "API Development"]
             : expertise.slug === "frontend-development"
             ? ["Frontend Engineering", "Web Development", "UI/UX Development"]
+            : expertise.slug === "dotnet-development"
+            ? [".NET Development", "ASP.NET Core", "C# Development", "Azure Development", "Enterprise Software Development"]
             : [pageData.hero.badge, "Enterprise AI Engineering", "Software Development"],
       },
       // FAQ Schema (only if FAQs exist)
@@ -192,13 +201,15 @@ export default function ExpertisePageClient({
         badge={pageData.hero.badge}
         headline={pageData.hero.headline}
         headlineAccent={pageData.hero.headlineAccent}
-        tagline={pageData.hero.tagline}
-        description={pageData.hero.description}
+        tagline={expertise.slug === "dotnet-development" ? undefined : pageData.hero.tagline}
+        description={expertise.slug === "dotnet-development" ? pageData.hero.tagline : pageData.hero.description}
         primaryCTA={
           expertise.slug === "frontend-development"
             ? { text: "Talk to a Frontend Specialist", href: "#book-call" }
             : expertise.slug === "backend-development"
             ? { text: "Talk to a Backend Specialist", href: "#book-call" }
+            : expertise.slug === "dotnet-development"
+            ? { text: "Talk to a .NET Expert", href: "#book-call" }
             : undefined
         }
         secondaryCTA={
@@ -207,26 +218,51 @@ export default function ExpertisePageClient({
             "ai-agents",
             "ai-security",
             "ai-privacy",
+            "dotnet-development",
           ].includes(expertise.slug)
             ? undefined
             : { text: "View Case Studies", href: "/work" }
         }
       />
 
+      {expertise.slug === "dotnet-development" && (
+        <Stats
+          title="Proven Outcomes from Enterprise .NET Engineering"
+          subtitle="Procedure has been building production .NET systems for over a decade, from enterprise platforms to high-throughput APIs serving millions of requests."
+          stats={[
+            { value: "40+", label: "Production .NET Systems" },
+            { value: "6–8 Weeks", label: "Time to Production Release" },
+            { value: "95%+", label: "Client Retention Rate" },
+            { value: ".NET 8 + Azure", label: "Primary Stack" },
+          ]}
+        />
+      )}
+
       <CapabilitiesGrid
-        title="Key Capabilities"
-        subtitle="Everything you need to build production-grade solutions"
+        title={expertise.slug === "dotnet-development" ? ".NET Development Capabilities for Production-Grade Systems" : "Key Capabilities"}
+        subtitle={expertise.slug === "dotnet-development" ? "Everything required to design, modernize, and operate production-grade .NET systems at scale." : "Everything you need to build production-grade solutions"}
         capabilities={capabilities}
       />
 
-      {["frontend-development", "backend-development"].includes(expertise.slug) && pageData.whoWeWorkWith && (
+      {["frontend-development", "backend-development", "dotnet-development"].includes(expertise.slug) && pageData.whoWeWorkWith && (
         <WhoWeWorkWith
-          title="Who We Work With"
+          title={pageData.whoWeWorkWith.title || "Who We Work With"}
           audiences={pageData.whoWeWorkWith.audiences.map((a) => ({
             ...a,
             icon: Icons[a.icon as keyof typeof Icons] || Icons.users,
           }))}
           closingStatement={pageData.whoWeWorkWith.closingStatement}
+          commonApplications={pageData.whoWeWorkWith.commonApplications}
+          variant={expertise.slug === "dotnet-development" ? "tabs" : "cards"}
+        />
+      )}
+
+      {/* For dotnet-development: Philosophy section comes early, before TechStack */}
+      {expertise.slug === "dotnet-development" && pageData.philosophy && (
+        <PhilosophySection
+          title={pageData.philosophy.title}
+          subtitle={pageData.philosophy.subtitle}
+          blocks={pageData.philosophy.blocks}
         />
       )}
 
@@ -245,16 +281,31 @@ export default function ExpertisePageClient({
         />
       )}
 
-      <TechStack
-        title="Technologies We Use"
-        subtitle="Production-tested tools and frameworks"
-        technologies={technologies}
-      />
+      {expertise.slug === "dotnet-development" ? (
+        <TechStack
+          title=".NET Technology Stack (Production-Proven)"
+          variant="grouped"
+          groups={[
+            { category: "Runtime & Frameworks", items: [".NET 8 / .NET 9", "ASP.NET Core", "Blazor", "Entity Framework Core", "Minimal APIs"] },
+            { category: "Cloud Platforms", items: ["Microsoft Azure", "AWS", "GCP"] },
+            { category: "Infrastructure & DevOps", items: ["Docker", "[Kubernetes](/services/kubernetes)", "Terraform", "GitHub Actions", "Azure DevOps"] },
+            { category: "Data & Caching", items: ["SQL Server", "PostgreSQL", "Redis", "Azure Cosmos DB"] },
+            { category: "Observability", items: ["Application Insights", "Serilog", "OpenTelemetry", "Seq"] },
+            { category: "Messaging & Patterns", items: ["RabbitMQ", "Azure Service Bus", "MediatR", "MassTransit"] },
+          ]}
+        />
+      ) : (
+        <TechStack
+          title="Technologies We Use"
+          subtitle="Production-tested tools and frameworks"
+          technologies={technologies}
+        />
+      )}
 
       {pageData.useCases && (
         <UseCasesGrid
           title={expertise.slug === "frontend-development" ? "Frontend Development Use Cases" : expertise.slug === "backend-development" ? "Backend Development Use Cases" : "Use Cases"}
-          subtitle={expertise.slug === "frontend-development" ? "Our frontend development services support" : expertise.slug === "backend-development" ? "Our backend development services support" : "Our services support"}
+          subtitle={pageData.useCasesSubtitle || (expertise.slug === "frontend-development" ? "Our frontend development services support" : expertise.slug === "backend-development" ? "Our backend development services support" : "Real-world applications we help teams build and scale")}
           useCases={pageData.useCases.map((uc) => ({
             ...uc,
             icon: Icons[uc.icon as keyof typeof Icons] || Icons.code,
@@ -263,12 +314,14 @@ export default function ExpertisePageClient({
         />
       )}
 
-      {pageData.whyChoose && (
+      {/* For non-dotnet pages: Philosophy section in original position */}
+      {expertise.slug !== "dotnet-development" && pageData.whyChoose && (
         <WhyChooseProcedure
-          title={expertise.slug === "frontend-development" ? "Why Choose Procedure for Frontend Development" : expertise.slug === "backend-development" ? "Why Choose Procedure for Backend Development" : `Why Choose Procedure for ${pageData.hero.badge}`}
-          subtitle="Companies choose Procedure because"
+          title={pageData.whyChoose.title || (expertise.slug === "frontend-development" ? "Why Choose Procedure for Frontend Development" : expertise.slug === "backend-development" ? "Why Choose Procedure for Backend Development" : `Why Choose Procedure for ${pageData.hero.badge}`)}
+          subtitle={pageData.whyChoose.subtitle}
+          reasonsTitle={pageData.whyChoose.reasonsTitle}
           reasons={pageData.whyChoose.reasons}
-          outcomesTitle={expertise.slug === "frontend-development" ? "Outcomes from recent frontend engagements" : expertise.slug === "backend-development" ? "Outcomes from recent backend engagements" : "Outcomes from recent engagements"}
+          outcomesTitle={pageData.whyChoose.outcomesTitle || (expertise.slug === "frontend-development" ? "Outcomes from recent frontend engagements" : expertise.slug === "backend-development" ? "Outcomes from recent backend engagements" : "Outcomes from recent engagements")}
           outcomes={pageData.whyChoose.outcomes}
         />
       )}
@@ -288,6 +341,44 @@ export default function ExpertisePageClient({
         />
       )}
 
+      {pageData.architecture && (
+        <ArchitectureSection
+          title={pageData.architecture.title}
+          subtitle={pageData.architecture.subtitle}
+          diagramSrc={pageData.architecture.diagramSrc}
+          layers={pageData.architecture.layers}
+        />
+      )}
+
+      {pageData.engagementModels && (
+        <EngagementModels
+          title={pageData.engagementModels.title}
+          subtitle={pageData.engagementModels.subtitle}
+          models={pageData.engagementModels.models}
+        />
+      )}
+
+      {pageData.howItWorks && (
+        <HowItWorks
+          title={pageData.howItWorks.title}
+          subtitle={pageData.howItWorks.subtitle}
+          steps={pageData.howItWorks.steps}
+          closingNote={pageData.howItWorks.closingNote}
+        />
+      )}
+
+      {pageData.riskReversal && (
+        <RiskReversal
+          title={pageData.riskReversal.title}
+          subtitle={pageData.riskReversal.subtitle}
+          items={pageData.riskReversal.items || []}
+          closingNote={pageData.riskReversal.closingNote}
+          variant={pageData.riskReversal.variant}
+          leftTriggers={pageData.riskReversal.leftTriggers}
+          rightBlocks={pageData.riskReversal.rightBlocks}
+        />
+      )}
+
       {/* Book a Call Section */}
       <section id="book-call" className="relative py-16 sm:py-24 bg-surface scroll-mt-20">
         <div className="max-w-5xl mx-auto px-4 sm:px-6">
@@ -301,7 +392,11 @@ export default function ExpertisePageClient({
             <h2 className="text-2xl sm:text-3xl md:text-5xl font-bold text-text-primary mb-6">
               Ready to Discuss Your
               <br />
-              <span className="text-highlight">{pageData.hero.badge} Project?</span>
+              <span className="text-highlight">
+                {expertise.slug === "dotnet-development"
+                  ? ".NET Project?"
+                  : `${pageData.hero.badge} Project?`}
+              </span>
             </h2>
             <p className="text-lg text-text-secondary max-w-2xl mx-auto">
               {bookingSubtext[expertise.slug] ||
@@ -324,11 +419,6 @@ export default function ExpertisePageClient({
       {pageData.faqs.length > 0 && <FAQSection faqs={pageData.faqs} />}
 
       {relatedPages.length > 0 && <RelatedExpertise pages={relatedPages} />}
-
-      <ExpertiseCTA
-        headline={pageData.cta.headline}
-        description={pageData.cta.description}
-      />
     </main>
   );
 }