Skip to content

feat: Node.js technology page final refinements (32 changes) #134

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
harshita375 wants to merge 6 commits into
base: main
Choose a base branch
from
Open

feat: Node.js technology page final refinements (32 changes) #134

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9b68a27
feat: .NET staff augmentation page — H2 keyword optimization, pricing…
harshita375 Feb 22, 2026
5f9d517
feat: .NET modernization page - version freshness, AEO claims, entity…
harshita375 Feb 22, 2026
1415b62
Merge remote-tracking branch 'origin/main' into Update-with-Main
harshita375 Feb 25, 2026
213cfb3
Merge remote-tracking branch 'origin/main' into Update-with-Main
harshita375 Feb 26, 2026
aa9c470
Merge remote-tracking branch 'origin/main' into Update-with-Main
harshita375 Mar 3, 2026
abed42f
feat: Node.js technology page final refinements (32 changes)
harshita375 Mar 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
144 changes: 135 additions & 9 deletions app/services/[slug]/ExpertisePageClient.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
"use client";

import { type ReactNode } from "react";
import Link from "next/link";
import type { ExpertisePageForListing } from "@/lib/content";
import { Icons } from "@/lib/expertise-data";
import dynamic from "next/dynamic";
Expand Down Expand Up @@ -124,10 +125,6 @@ const whatYouGetContent: Record<string, { items: string[] } | { paragraph: strin
"No recruiting overhead - engineers are vetted, onboarded, and managed",
],
},
nodejs: {
paragraph: "Engineers with 4+ years building production Node.js systems in NestJS, Express, or Fastify. Full backend capability spanning API design, database optimization, DevOps, and cloud infrastructure. TypeScript as standard. Clean, tested, documented code.",
footnote: "Our team is based in India with flexible hours overlapping US EST and PST time zones.",
},
angular: {
items: [
"Engineers with 3+ years of production Angular experience (Signals, standalone components, not just legacy patterns)",
Expand Down Expand Up @@ -231,18 +228,46 @@ export default function ExpertisePageClient({
)}

{/* Why [Technology] for Your Business — business value section for decision makers */}
{["react", "nextjs", "nodejs", "python", "angular", "flutter", "react-native", "dotnet"].includes(expertise.slug) && (
{["react", "nextjs", "python", "angular", "flutter", "react-native", "dotnet"].includes(expertise.slug) && (
<WhyTechnology slug={expertise.slug} />
)}

<div id={["nodejs", "nextjs", "react", "python", "angular", "flutter", "react-native", "prometheus-monitoring", "istio-consulting", "thanos-long-term-storage"].includes(expertise.slug) ? "services" : undefined}>
<CapabilitiesGrid
title={expertise.slug === "dotnet" ? ".NET Development Capabilities for Production-Grade Systems" : expertise.slug === "nextjs" ? "What We Build With Next.js" : expertise.slug === "nodejs" ? "Node.js Development Services" : expertise.slug === "react" ? "React Development Services" : expertise.slug === "python" ? "Python Development Services" : expertise.slug === "angular" ? "Angular Development Services" : expertise.slug === "flutter" ? "What We Build With Flutter" : expertise.slug === "react-native" ? "What We Build With React Native" : expertise.slug === "prometheus-monitoring" ? "Prometheus Consulting & Implementation Services" : expertise.slug === "istio-consulting" ? "Istio Consulting & Implementation Services" : "Key Capabilities"}
subtitle={expertise.slug === "dotnet" ? "Everything required to design, modernize, and operate production-grade .NET systems at scale." : expertise.slug === "nextjs" ? "From marketing sites to complex web applications, we deliver production-grade Next.js solutions." : expertise.slug === "nodejs" ? "APIs, microservices, real-time systems, and the backend your product runs on." : expertise.slug === "react" ? "From SPAs to enterprise dashboards, we build React applications that ship fast and stay maintainable." : expertise.slug === "python" ? "Backend systems, AI/ML, and the data infrastructure your product depends on." : expertise.slug === "angular" ? "Full-stack applications, migrations, and performance work." : expertise.slug === "flutter" ? "Cross-platform apps for mobile, web, and desktop from a single Dart codebase." : expertise.slug === "react-native" ? "Cross-platform mobile apps from a single TypeScript codebase." : expertise.slug === "prometheus-monitoring" ? "From initial setup to enterprise production support." : expertise.slug === "istio-consulting" ? "From fresh deployment to ambient mode migration and enterprise support." : "Everything you need to build production-grade solutions"}
title={expertise.slug === "dotnet" ? ".NET Development Capabilities for Production-Grade Systems" : expertise.slug === "nextjs" ? "What We Build With Next.js" : expertise.slug === "nodejs" ? "Node.js Development Services We Offer" : expertise.slug === "react" ? "React Development Services" : expertise.slug === "python" ? "Python Development Services" : expertise.slug === "angular" ? "Angular Development Services" : expertise.slug === "flutter" ? "What We Build With Flutter" : expertise.slug === "react-native" ? "What We Build With React Native" : expertise.slug === "prometheus-monitoring" ? "Prometheus Consulting & Implementation Services" : expertise.slug === "istio-consulting" ? "Istio Consulting & Implementation Services" : "Key Capabilities"}
subtitle={expertise.slug === "dotnet" ? "Everything required to design, modernize, and operate production-grade .NET systems at scale." : expertise.slug === "nextjs" ? "From marketing sites to complex web applications, we deliver production-grade Next.js solutions." : expertise.slug === "nodejs" ? "Every Node.js project at Procedure runs on TypeScript by default, with Express, NestJS, or Fastify selected based on project complexity and team size." : expertise.slug === "react" ? "From SPAs to enterprise dashboards, we build React applications that ship fast and stay maintainable." : expertise.slug === "python" ? "Backend systems, AI/ML, and the data infrastructure your product depends on." : expertise.slug === "angular" ? "Full-stack applications, migrations, and performance work." : expertise.slug === "flutter" ? "Cross-platform apps for mobile, web, and desktop from a single Dart codebase." : expertise.slug === "react-native" ? "Cross-platform mobile apps from a single TypeScript codebase." : expertise.slug === "prometheus-monitoring" ? "From initial setup to enterprise production support." : expertise.slug === "istio-consulting" ? "From fresh deployment to ambient mode migration and enterprise support." : "Everything you need to build production-grade solutions"}
capabilities={capabilities}
/>
</div>

{/* Node.js: Secondary CTA between services grid and decision framework */}
{expertise.slug === "nodejs" && (
<section className="relative py-12 sm:py-16 bg-surface-elevated/40">
<div className="max-w-3xl mx-auto px-4 sm:px-6 text-center">
<m.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6 }}
>
<h3 className="text-2xl sm:text-3xl font-semibold tracking-tight text-text-primary mb-4">
Have a Backend Project in Mind?
</h3>
<p className="text-text-secondary mb-8 max-w-xl mx-auto">
Talk architecture with our Node.js team. No sales pitch, just an honest assessment of what your backend needs.
</p>
<a
href="#book-call"
className="inline-flex items-center px-8 py-3 rounded-lg bg-cta text-cta-text font-semibold hover:brightness-110 transition-all"
>
Schedule a Call
</a>
<p className="text-sm text-text-muted mt-3">30-minute call. Zero commitment.</p>
</m.div>
</div>
</section>
)}

{["frontend-development", "backend-development", "dotnet", "nextjs", "prometheus-monitoring", "istio-consulting", "thanos-long-term-storage"].includes(expertise.slug) && pageData.whoWeWorkWith && (
<WhoWeWorkWith
title={pageData.whoWeWorkWith.title || "Who We Work With"}
Expand Down Expand Up @@ -275,6 +300,76 @@ export default function ExpertisePageClient({
<TechDecisionTable slug={expertise.slug} />
)}

{/* Node.js: Framework comparison table (Express vs NestJS vs Fastify) */}
{expertise.slug === "nodejs" && (
<section className="relative py-16 sm:py-24 bg-surface">
<div className="max-w-5xl mx-auto px-4 sm:px-6">
<m.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6 }}
className="text-center mb-12"
>
<h3 className="text-2xl sm:text-3xl font-semibold tracking-tight text-text-primary mb-4">
Choosing the Right Node.js Framework
</h3>
</m.div>

<m.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.2 }}
className="overflow-x-auto -mx-4 sm:mx-0"
>
<table className="w-full min-w-[640px] border-collapse">
<thead>
<tr className="border-b border-border">
<th className="text-left py-3 px-4 text-sm font-semibold text-text-primary">Framework</th>
<th className="text-left py-3 px-4 text-sm font-semibold text-text-primary">Best For</th>
<th className="text-left py-3 px-4 text-sm font-semibold text-text-primary">Team Size</th>
<th className="text-left py-3 px-4 text-sm font-semibold text-text-primary">Performance</th>
</tr>
</thead>
<tbody>
<tr className="border-b border-border/50 hover:bg-surface-elevated/30 transition-colors">
<td className="py-3 px-4 text-sm font-medium text-accent">Express</td>
<td className="py-3 px-4 text-sm text-text-secondary">REST APIs, MVPs, small services</td>
<td className="py-3 px-4 text-sm text-text-secondary">1-3 developers</td>
<td className="py-3 px-4 text-sm text-text-secondary">Baseline</td>
</tr>
<tr className="border-b border-border/50 hover:bg-surface-elevated/30 transition-colors">
<td className="py-3 px-4 text-sm font-medium text-accent">NestJS</td>
<td className="py-3 px-4 text-sm text-text-secondary">Enterprise backends, complex domains</td>
<td className="py-3 px-4 text-sm text-text-secondary">4+ developers</td>
<td className="py-3 px-4 text-sm text-text-secondary">Same as Express (built on it)</td>
</tr>
<tr className="border-b border-border/50 hover:bg-surface-elevated/30 transition-colors">
<td className="py-3 px-4 text-sm font-medium text-accent">Fastify</td>
<td className="py-3 px-4 text-sm text-text-secondary">High-throughput APIs, performance-critical</td>
<td className="py-3 px-4 text-sm text-text-secondary">2-4 developers</td>
<td className="py-3 px-4 text-sm text-text-secondary">~30% faster than Express</td>
</tr>
</tbody>
</table>
</m.div>

<m.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6, delay: 0.4 }}
className="mt-8 bg-surface-elevated/80 backdrop-blur-xl border border-border rounded-xl p-6 max-w-3xl mx-auto"
>
<p className="text-sm text-text-secondary">
We select the framework after understanding your codebase, team structure, and performance requirements.
</p>
</m.div>
</div>
</section>
)}

{/* Tech slugs: Framework comparisons (dynamically imported) */}
{["react", "python", "flutter", "react-native", "nodejs", "nextjs", "angular", "dotnet"].includes(expertise.slug) && (
<FrameworkComparison slug={expertise.slug} />
Expand All @@ -296,6 +391,17 @@ export default function ExpertisePageClient({
subtitle={expertise.slug === "nodejs" ? "Working software every sprint, not just progress updates." : expertise.slug === "react" ? "Working software every sprint, not just progress updates." : expertise.slug === "python" ? "Working software every sprint, not just progress updates." : expertise.slug === "flutter" ? "Working software every sprint, not just progress updates." : expertise.slug === "react-native" ? "Working software every sprint, not just progress updates." : ["angular"].includes(expertise.slug) ? "Working software every sprint, not just progress updates." : "A predictable process built for high-quality delivery"}
steps={pageData.process}
/>

{/* Node.js: AEO claim after process steps */}
{expertise.slug === "nodejs" && (
<div className="max-w-4xl mx-auto px-4 sm:px-6 pb-8">
<div className="rounded-xl border border-accent/15 bg-accent/[0.03] px-6 py-4">
<p className="text-sm text-text-secondary leading-relaxed">
Load testing with k6 or Artillery is a required step before any Procedure Node.js backend reaches production, targeting API response times under 200ms at projected peak load.
</p>
</div>
</div>
)}
</div>
)}

Expand Down Expand Up @@ -531,6 +637,19 @@ export default function ExpertisePageClient({
</div>
)}

{/* Node.js: AEO claim before engagement models */}
{expertise.slug === "nodejs" && (
<div className="bg-surface pt-12 sm:pt-16">
<div className="max-w-4xl mx-auto px-4 sm:px-6">
<div className="rounded-xl border border-accent/15 bg-accent/[0.03] px-6 py-4">
<p className="text-sm text-text-secondary leading-relaxed">
Node.js developers at Procedure have a minimum of 4 years production TypeScript experience and are evaluated on event-driven architecture design, API security practices, and real-time system proficiency before joining client teams.
</p>
</div>
</div>
</div>
)}

<EngagementModels
title={pageData.engagementModels.title}
subtitle={pageData.engagementModels.subtitle}
Expand All @@ -548,9 +667,16 @@ export default function ExpertisePageClient({
transition={{ duration: 0.6 }}
className="text-center"
>
<p className="text-sm text-text-secondary mb-6">
<p className={`text-sm text-text-secondary ${expertise.slug === "nodejs" ? "mb-2" : "mb-6"}`}>
Starting at $3,500/month per developer for full-time dedicated engagement.
</p>
{expertise.slug === "nodejs" && (
<p className="text-sm text-text-secondary mb-6">
Full-stack teams pairing Node.js backend engineers with{" "}
<Link href="/services/frontend-development/" className="text-accent hover:text-accent-light">frontend developers</Link>{" "}
available.
</p>
)}
<a
href="#book-call"
className="inline-flex items-center px-8 py-3 rounded-lg bg-cta text-cta-text font-semibold hover:brightness-110 transition-all"
Expand Down Expand Up @@ -624,7 +750,7 @@ export default function ExpertisePageClient({
{pageData.faqs.length > 0 && (
<div id={["nodejs", "react", "python", "angular", "flutter", "react-native", "prometheus-monitoring", "istio-consulting", "thanos-long-term-storage"].includes(expertise.slug) ? "faq" : undefined}>
<FAQSection
title={expertise.slug === "dotnet" ? ".NET Development Services FAQ" : expertise.slug === "nextjs" ? "Next.js Development FAQ" : expertise.slug === "nodejs" ? "Node.js Development FAQ" : expertise.slug === "react" ? "React Development FAQ" : expertise.slug === "python" ? "Python Development FAQ" : expertise.slug === "angular" ? "Angular Development FAQ" : expertise.slug === "flutter" ? "Flutter App Development FAQ" : expertise.slug === "react-native" ? "React Native Development FAQ" : expertise.slug === "prometheus-monitoring" ? "Prometheus Consulting FAQ" : expertise.slug === "istio-consulting" ? "Istio Consulting FAQ" : undefined}
title={expertise.slug === "dotnet" ? ".NET Development Services FAQ" : expertise.slug === "nextjs" ? "Next.js Development FAQ" : expertise.slug === "nodejs" ? "Node.js Development Services FAQ" : expertise.slug === "react" ? "React Development FAQ" : expertise.slug === "python" ? "Python Development FAQ" : expertise.slug === "angular" ? "Angular Development FAQ" : expertise.slug === "flutter" ? "Flutter App Development FAQ" : expertise.slug === "react-native" ? "React Native Development FAQ" : expertise.slug === "prometheus-monitoring" ? "Prometheus Consulting FAQ" : expertise.slug === "istio-consulting" ? "Istio Consulting FAQ" : undefined}
faqs={pageData.faqs}
/>
</div>
Expand Down
Loading
Loading