Skip to content

feat: Tech pages SEO — industries, philosophy, interlinking, og:image #136

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

Merged
vibemarketerpromax merged 2 commits into from
Mar 3, 2026
Merged

feat: Tech pages SEO — industries, philosophy, interlinking, og:image #136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
07151b7
fix: Add og:image to 7 tech pages and trim long meta descriptions
vibemarketerpromax Mar 3, 2026
558f782
feat: Add industries, philosophy, and cross-page interlinking to 8 te…
vibemarketerpromax 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
10 changes: 8 additions & 2 deletions app/services/[slug]/ExpertisePageClient.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ const TechDecisionTable = dynamic(() => import("./slug-sections/TechDecisionTabl
const FrameworkComparison = dynamic(() => import("./slug-sections/FrameworkComparison"));
const CustomStackTable = dynamic(() => import("./slug-sections/CustomStackTable"));
const DotnetSections = dynamic(() => import("./slug-sections/DotnetSections"));
const TechIndustries = dynamic(() => import("./slug-sections/TechIndustries"));
const WhyTechnology = dynamic(() => import("./slug-sections/WhyTechnology"));
const IntroStatement = dynamic(() => import("./slug-sections/IntroStatement"));

Expand Down Expand Up @@ -270,6 +271,11 @@ export default function ExpertisePageClient({
{expertise.slug === "dotnet" && <DotnetSections slot="specialized" />}
{expertise.slug === "dotnet" && <DotnetSections slot="industries" />}

{/* Non-dotnet tech pages: Industries section */}
{["react", "nextjs", "nodejs", "python", "angular", "flutter", "react-native"].includes(expertise.slug) && (
<TechIndustries slug={expertise.slug} />
)}

{/* Tech slugs: Decision tables (dynamically imported) */}
{["nodejs", "react", "python", "angular", "flutter", "react-native"].includes(expertise.slug) && (
<TechDecisionTable slug={expertise.slug} />
Expand All @@ -280,8 +286,8 @@ export default function ExpertisePageClient({
<FrameworkComparison slug={expertise.slug} />
)}

{/* For dotnet: Philosophy section comes early, before TechStack */}
{expertise.slug === "dotnet" && pageData.philosophy && (
{/* Philosophy section — renders for any page with philosophy frontmatter */}
{pageData.philosophy && (
<PhilosophySection
title={pageData.philosophy.title}
subtitle={pageData.philosophy.subtitle}
Expand Down
113 changes: 90 additions & 23 deletions app/services/[slug]/slug-sections/FrameworkComparison.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,8 +48,14 @@ const comparisonDataMap: Record<string, ComparisonData> = {
],
bottomNote: (
<>
Many projects use both. A public marketing site on Next.js, an
authenticated dashboard on React + Vite, sharing the same component
Many projects use both. A public marketing site on{" "}
<a
href="/technologies/nextjs"
className="text-accent hover:text-accent-light transition-colors"
>
Next.js
</a>
, an authenticated dashboard on React + Vite, sharing the same component
library and design system. We architect for this pattern regularly.
</>
),
Expand Down Expand Up @@ -88,8 +94,22 @@ const comparisonDataMap: Record<string, ComparisonData> = {
<>
Most projects aren&apos;t purely one framework. We&apos;ve built systems
where Django handles the main app, FastAPI serves the ML inference
endpoints, and Flask runs lightweight webhook handlers. The framework
follows the workload.
endpoints, and Flask runs lightweight webhook handlers. For the frontend,
we pair Python backends with{" "}
<a
href="/technologies/react"
className="text-accent hover:text-accent-light transition-colors"
>
React
</a>{" "}
or{" "}
<a
href="/technologies/nextjs"
className="text-accent hover:text-accent-light transition-colors"
>
Next.js
</a>
.
</>
),
},
Expand Down Expand Up @@ -120,8 +140,15 @@ const comparisonDataMap: Record<string, ComparisonData> = {
bottomNote: (
<>
Some projects use both. A Flutter mobile app for the consumer
experience, a React Native companion for a partner-facing tool sharing
the same backend. We architect for this when it makes sense.
experience, a{" "}
<a
href="/technologies/react-native"
className="text-accent hover:text-accent-light transition-colors"
>
React Native
</a>{" "}
companion for a partner-facing tool sharing the same backend. We
architect for this when it makes sense.
</>
),
},
Expand Down Expand Up @@ -160,10 +187,30 @@ const comparisonDataMap: Record<string, ComparisonData> = {
bottomNote: (
<>
The choice often comes down to team expertise and workload type. Node.js
dominates when JavaScript teams need full-stack speed. Go wins when
performance and operational simplicity are the priority. Python is the
default for anything touching data or ML. We regularly run all three in
the same system, each handling the workload it&apos;s best suited for.
dominates when JavaScript teams need full-stack speed with{" "}
<a
href="/technologies/react"
className="text-accent hover:text-accent-light transition-colors"
>
React
</a>{" "}
or{" "}
<a
href="/technologies/nextjs"
className="text-accent hover:text-accent-light transition-colors"
>
Next.js
</a>
. Go wins when performance and operational simplicity are the priority.{" "}
<a
href="/technologies/python"
className="text-accent hover:text-accent-light transition-colors"
>
Python
</a>{" "}
is the default for anything touching data or ML. We regularly run all
three in the same system, each handling the workload it&apos;s best
suited for.
</>
),
},
Expand Down Expand Up @@ -201,11 +248,17 @@ const comparisonDataMap: Record<string, ComparisonData> = {
],
bottomNote: (
<>
Next.js is the safe default for most React projects due to ecosystem
size and flexibility. Consider Nuxt if your team is Vue-native.
Consider Remix if your app is mutation-heavy and you value web-standard
patterns over framework-specific abstractions. We help teams pick based
on their actual workload, not hype cycles.
Next.js is the safe default for most{" "}
<a
href="/technologies/react"
className="text-accent hover:text-accent-light transition-colors"
>
React
</a>{" "}
projects due to ecosystem size and flexibility. Consider Nuxt if your
team is Vue-native. Consider Remix if your app is mutation-heavy and
you value web-standard patterns over framework-specific abstractions.
We help teams pick based on their actual workload, not hype cycles.
</>
),
},
Expand Down Expand Up @@ -244,10 +297,17 @@ const comparisonDataMap: Record<string, ComparisonData> = {
bottomNote: (
<>
Angular excels when structure and consistency across large teams matter
most. React wins on flexibility and hiring pool. Vue hits a sweet spot
for smaller teams that want conventions without rigidity. The right
choice depends on team size, project complexity, and how much
architectural opinion you want from your framework.
most.{" "}
<a
href="/technologies/react"
className="text-accent hover:text-accent-light transition-colors"
>
React
</a>{" "}
wins on flexibility and hiring pool. Vue hits a sweet spot for smaller
teams that want conventions without rigidity. The right choice depends
on team size, project complexity, and how much architectural opinion
you want from your framework.
</>
),
},
Expand Down Expand Up @@ -287,10 +347,17 @@ const comparisonDataMap: Record<string, ComparisonData> = {
<>
.NET and Java compete directly for enterprise backends — the choice
often comes down to existing infrastructure and team expertise rather
than technical superiority. Node.js serves a different niche: full-stack
velocity for JavaScript teams and I/O-heavy workloads. We see many
organizations running .NET for core business logic with Node.js handling
the real-time and API gateway layers.
than technical superiority.{" "}
<a
href="/technologies/nodejs"
className="text-accent hover:text-accent-light transition-colors"
>
Node.js
</a>{" "}
serves a different niche: full-stack velocity for JavaScript teams and
I/O-heavy workloads. We see many organizations running .NET for core
business logic with Node.js handling the real-time and API gateway
layers.
</>
),
},
Expand Down
154 changes: 137 additions & 17 deletions app/services/[slug]/slug-sections/IntroStatement.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,144 @@
"use client";

import { type ReactNode } from "react";
import { m } from "framer-motion";

const introStatements: Record<string, string> = {
react:
"Procedure is a React development company that builds production-grade SPAs, real-time dashboards, and component libraries for fintech, payments, and media companies. Since 2016, Procedure's senior React engineers have shipped interfaces handling millions of transactions for clients including Setu, ESPN, and Pine Labs. Every engineer on a React engagement has 3+ years of production React experience.",
nextjs:
"Procedure is a Next.js development company that delivers SEO-optimized, server-rendered applications with sub-second page loads for content-heavy platforms and SaaS products. Over 9 years, the team has built Next.js applications serving millions of users for clients in fintech, media, and hospitality, including Setu and Treebo. Engineers embed directly in client teams, shipping production Next.js code from day one.",
nodejs:
"Procedure is a Node.js development company that architects high-throughput APIs, event-driven microservices, and real-time backend systems for transaction-heavy industries. Since 2016, Procedure has delivered 100+ backend systems powering fintech platforms, payment infrastructure, and observability tools for clients including Setu, Pine Labs, and Last9. Teams start within 2-5 business days and operate as embedded extensions of the client's engineering organization.",
python:
"Procedure is a Python development company specializing in AI/ML pipelines, data engineering, and backend API systems for enterprises that need production-grade machine learning infrastructure. Since 2016, Procedure's Python engineers have built AI-powered platforms, ETL pipelines, and analytics backends across fintech, healthcare, and SaaS verticals for clients including KredX and Last9. The team brings deep expertise in FastAPI, Django, and ML frameworks like PyTorch and scikit-learn.",
angular:
"Procedure is an Angular development company that builds enterprise-grade admin portals, internal tools, and complex form-driven applications where type safety and long-term maintainability are non-negotiable. Since 2016, Procedure has delivered Angular platforms for telecom, fintech, and payments companies including MCLabs and Pine Labs, with client partnerships averaging 3+ years.",
flutter:
"Procedure is a Flutter development company that delivers cross-platform mobile and web applications from a single codebase, reducing time-to-market by up to 40% compared to native dual-platform development. Since 2016, the team has launched Flutter applications in hospitality, EdTech, and fintech for clients including Treebo and Timely, with production releases in as few as 12 weeks.",
"react-native":
"Procedure is a React Native development company that builds high-performance cross-platform mobile applications for fintech, media, and consumer-facing products where native-quality UX is a hard requirement. Since 2016, Procedure has shipped React Native apps processing real-time data, secure transactions, and media streams for clients including ESPN and KredX.",
dotnet:
"Procedure is a .NET development company that builds secure, high-availability backend systems, payment processing platforms, and enterprise APIs on the Microsoft stack. Since 2016, Procedure has delivered .NET solutions handling mission-critical transaction volumes for clients in payments, telecom, and fintech, including Pine Labs and MCLabs.",
const linkClass = "text-accent hover:text-accent-light transition-colors";

const introStatements: Record<string, ReactNode> = {
react: (
<>
Procedure is a React development company that builds production-grade SPAs,
real-time dashboards, and component libraries for fintech, payments, and
media companies. Since 2016, Procedure&apos;s senior React engineers have
shipped interfaces handling millions of transactions for clients including
Setu, ESPN, and Pine Labs. Every engineer on a React engagement has 3+ years
of production React experience. For projects that need server-side rendering
and SEO, we pair React with{" "}
<a href="/technologies/nextjs" className={linkClass}>
Next.js
</a>
.
</>
),
nextjs: (
<>
Procedure is a Next.js development company that delivers SEO-optimized,
server-rendered applications with sub-second page loads for content-heavy
platforms and SaaS products. Over 9 years, the team has built Next.js
applications serving millions of users for clients in fintech, media, and
hospitality, including Setu and Treebo. Engineers embed directly in client
teams, shipping production Next.js code from day one. Every Next.js project
is backed by our{" "}
<a href="/technologies/react" className={linkClass}>
React
</a>{" "}
and{" "}
<a href="/technologies/nodejs" className={linkClass}>
Node.js
</a>{" "}
engineering depth.
</>
),
nodejs: (
<>
Procedure is a Node.js development company that architects high-throughput
APIs, event-driven microservices, and real-time backend systems for
transaction-heavy industries. Since 2016, Procedure has delivered 100+
backend systems powering fintech platforms, payment infrastructure, and
observability tools for clients including Setu, Pine Labs, and Last9. Teams
start within 2-5 business days and operate as embedded extensions of the
client&apos;s engineering organization. We often pair Node.js backends with{" "}
<a href="/technologies/react" className={linkClass}>
React
</a>{" "}
or{" "}
<a href="/technologies/nextjs" className={linkClass}>
Next.js
</a>{" "}
frontends for full-stack delivery.
</>
),
python: (
<>
Procedure is a Python development company specializing in AI/ML pipelines,
data engineering, and backend API systems for enterprises that need
production-grade machine learning infrastructure. Since 2016, Procedure&apos;s
Python engineers have built AI-powered platforms, ETL pipelines, and
analytics backends across fintech, healthcare, and SaaS verticals for
clients including KredX and Last9. The team brings deep expertise in
FastAPI, Django, and ML frameworks like PyTorch and scikit-learn. For
full-stack delivery, we pair Python backends with{" "}
<a href="/technologies/react" className={linkClass}>
React
</a>{" "}
or{" "}
<a href="/technologies/nodejs" className={linkClass}>
Node.js
</a>{" "}
frontends.
</>
),
angular: (
<>
Procedure is an Angular development company that builds enterprise-grade
admin portals, internal tools, and complex form-driven applications where
type safety and long-term maintainability are non-negotiable. Since 2016,
Procedure has delivered Angular platforms for telecom, fintech, and payments
companies including MCLabs and Pine Labs, with client partnerships averaging
3+ years. For enterprise backends, we pair Angular with{" "}
<a href="/technologies/dotnet" className={linkClass}>
.NET
</a>{" "}
or{" "}
<a href="/technologies/nodejs" className={linkClass}>
Node.js
</a>
.
</>
),
flutter: (
<>
Procedure is a Flutter development company that delivers cross-platform
mobile and web applications from a single codebase, reducing time-to-market
by up to 40% compared to native dual-platform development. Since 2016, the
team has launched Flutter applications in hospitality, EdTech, and fintech
for clients including Treebo and Timely, with production releases in as few
as 12 weeks. For teams with existing JavaScript expertise, we also offer{" "}
<a href="/technologies/react-native" className={linkClass}>
React Native
</a>{" "}
as an alternative cross-platform approach.
</>
),
"react-native": (
<>
Procedure is a React Native development company that builds high-performance
cross-platform mobile applications for fintech, media, and consumer-facing
products where native-quality UX is a hard requirement. Since 2016,
Procedure has shipped React Native apps processing real-time data, secure
transactions, and media streams for clients including ESPN and KredX. Teams
with existing{" "}
<a href="/technologies/react" className={linkClass}>
React
</a>{" "}
web apps benefit from shared code and components across platforms.
</>
),
dotnet: (
<>
Procedure is a .NET development company that builds secure, high-availability
backend systems, payment processing platforms, and enterprise APIs on the
Microsoft stack. Since 2016, Procedure has delivered .NET solutions handling
mission-critical transaction volumes for clients in payments, telecom, and
fintech, including Pine Labs and MCLabs. For real-time and API gateway
layers, we complement .NET with{" "}
<a href="/technologies/nodejs" className={linkClass}>
Node.js
</a>{" "}
when the workload demands it.
</>
),
};

export default function IntroStatement({ slug }: { slug: string }) {
Expand Down
Loading
Loading