diff --git a/src/app.css b/src/app.css
index 8a74735..ed752f5 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1262,6 +1262,127 @@ body {
   color: #100b2f;
 }
 
+.lp-view-all-btn {
+  width: auto;
+  min-width: 220px;
+}
+
+.lp-role-cta-grid {
+  margin-top: 12px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+.role-benefit-grid {
+  margin-top: 14px;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.role-benefit-card {
+  border: 1px solid rgba(16, 11, 47, 0.14);
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.92);
+  padding: 14px;
+  box-shadow: 0 12px 28px -26px rgba(253, 98, 22, 0.9);
+  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
+}
+
+.role-benefit-card:hover {
+  transform: translateY(-2px);
+  border-color: rgba(253, 98, 22, 0.34);
+  box-shadow: 0 16px 30px -24px rgba(253, 98, 22, 0.55);
+}
+
+.role-benefit-card h3 {
+  margin: 0;
+  font-size: 16px;
+  color: #100b2f;
+  line-height: 1.45;
+}
+
+.role-benefit-card-simple {
+  padding: 16px;
+}
+
+.role-benefit-card-simple p {
+  margin: 8px 0 0;
+  color: #475569;
+  font-size: 13px;
+  line-height: 1.55;
+}
+
+.pro-detail-benefit-meta {
+  margin-bottom: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.pro-detail-benefit-icon-wrap {
+  display: inline-flex;
+  width: 36px;
+  height: 36px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  border: 1px solid rgba(253, 98, 22, 0.35);
+  background: linear-gradient(150deg, rgba(253, 98, 22, 0.18), rgba(253, 98, 22, 0.05));
+}
+
+.pro-detail-benefit-icon-wrap img {
+  width: 17px;
+  height: 17px;
+  opacity: 0.95;
+}
+
+.pro-detail-benefit-index {
+  display: inline-flex;
+  min-width: 32px;
+  height: 24px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  border: 1px solid rgba(253, 98, 22, 0.28);
+  background: rgba(253, 98, 22, 0.1);
+  color: #d14b05;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+}
+
+.role-offer-list {
+  margin-top: 16px;
+  display: grid;
+  gap: 10px;
+}
+
+.role-offer-item {
+  margin: 0;
+  padding: 12px 14px;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.24);
+  background: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.9);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.pro-detail-offer-icon {
+  display: inline-flex;
+  width: 20px;
+  height: 20px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: rgba(253, 98, 22, 0.2);
+  color: #ffc9ab;
+  font-size: 11px;
+}
+
 .lp-path-controls {
   align-items: center;
   gap: 8px;
@@ -1368,20 +1489,69 @@ body {
 }
 
 .benefit-card {
-  border: 1px solid rgba(255, 255, 255, 0.28);
-  border-radius: 14px;
-  padding: 12px;
-  background: rgba(255, 255, 255, 0.07);
+  position: relative;
+  overflow: hidden;
+  border: 1px solid rgba(253, 98, 22, 0.32);
+  border-radius: 16px;
+  padding: 14px;
+  background:
+    radial-gradient(circle at top right, rgba(253, 98, 22, 0.2), transparent 55%),
+    linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
+  box-shadow: 0 20px 42px -30px rgba(253, 98, 22, 0.72);
 }
 
 .benefit-card h3 {
-  margin: 0 0 8px;
-  font-size: 18px;
+  margin: 10px 0 0;
+  color: #fff;
+  font-size: 17px;
+  line-height: 1.35;
 }
 
 .benefit-card p {
   margin: 0;
-  color: rgba(255, 255, 255, 0.85);
+  color: rgba(255, 255, 255, 0.88);
+  font-size: 13px;
+  line-height: 1.55;
+}
+
+.benefit-card .role-card-icon {
+  margin: 0;
+}
+
+.benefit-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.benefit-index {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  border: 1px solid rgba(253, 98, 22, 0.45);
+  background: rgba(253, 98, 22, 0.14);
+  color: #ffd5c0;
+  padding: 4px 9px;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.benefit-divider {
+  display: block;
+  width: 56px;
+  height: 2px;
+  margin: 10px 0 12px;
+  border-radius: 999px;
+  background: linear-gradient(90deg, #fd6116, rgba(253, 98, 22, 0.1));
+}
+
+.benefit-card:hover {
+  border-color: rgba(253, 98, 22, 0.54);
+  transform: translateY(-2px);
 }
 
 .flow-card {
@@ -1493,6 +1663,20 @@ body {
   cursor: pointer;
 }
 
+.pro-detail-faq-icon {
+  display: inline-flex;
+  width: 24px;
+  height: 24px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  border: 1px solid rgba(253, 98, 22, 0.45);
+  background: rgba(253, 98, 22, 0.2);
+  color: #ffc9ab;
+  font-size: 12px;
+  font-weight: 700;
+}
+
 .faq-q-icon {
   display: inline-flex;
   font-size: 18px;
@@ -1523,6 +1707,144 @@ body {
   padding-top: 28px;
 }
 
+.pro-real-grid {
+  margin-top: 14px;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.pro-real-card {
+  border: 1px solid rgba(16, 11, 47, 0.14);
+  border-radius: 14px;
+  background: rgba(255, 255, 255, 0.95);
+  padding: 16px;
+  box-shadow: 0 12px 24px -24px rgba(253, 98, 22, 0.6);
+}
+
+.pro-real-card h3 {
+  margin: 0;
+  color: #100b2f;
+  font-size: 16px;
+}
+
+.pro-real-card ul {
+  margin: 12px 0 0;
+  padding-left: 18px;
+  display: grid;
+  gap: 7px;
+}
+
+.pro-real-card li {
+  color: #334155;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.pro-real-note {
+  margin-top: 14px;
+}
+
+.pro-detail-trust-strip-wrap {
+  margin-top: 12px;
+}
+
+.pro-detail-trust-strip {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.pro-detail-trust-card {
+  position: relative;
+  border: 1px solid rgba(253, 98, 22, 0.24);
+  border-radius: 14px;
+  background: linear-gradient(135deg, rgba(255, 247, 237, 0.92), rgba(255, 255, 255, 0.9));
+  padding: 12px;
+  display: grid;
+  grid-template-columns: 36px 1fr;
+  gap: 10px;
+  align-items: start;
+  box-shadow: 0 12px 28px -24px rgba(253, 98, 22, 0.55);
+  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
+}
+
+.pro-detail-trust-card .role-card-icon {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+
+.pro-detail-trust-label {
+  display: inline-flex;
+  min-width: 36px;
+  height: 24px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  border: 1px solid rgba(253, 98, 22, 0.38);
+  background: rgba(253, 98, 22, 0.12);
+  color: #c2410c;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  padding: 0 8px;
+}
+
+.pro-detail-trust-card:hover {
+  transform: translateY(-2px);
+  border-color: rgba(253, 98, 22, 0.46);
+  box-shadow: 0 18px 36px -24px rgba(253, 98, 22, 0.6);
+}
+
+.pro-detail-trust-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 11px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 15px;
+  font-weight: 700;
+  background: linear-gradient(145deg, #fd6116, #f97316);
+}
+
+.pro-detail-trust-card h3 {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.35;
+  color: #130e3a;
+}
+
+.pro-detail-trust-card p {
+  margin: 6px 0 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: #3f355f;
+}
+
+.pro-detail-cta-points {
+  margin-top: 14px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.pro-detail-cta-points span {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 7px 10px;
+  border-radius: 999px;
+  border: 1px solid rgba(253, 98, 22, 0.45);
+  background: rgba(253, 98, 22, 0.14);
+  color: #ffe9dc;
+  font-size: 12px;
+  font-weight: 600;
+}
+
 .cta-row {
   display: flex;
   align-items: center;
@@ -1648,6 +1970,10 @@ body {
   .benefit-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+
+  .launch-grid {
+    grid-template-columns: 1fr;
+  }
 }
 
 @media (max-width: 820px) {
@@ -1719,6 +2045,10 @@ body {
     grid-template-columns: 1fr;
   }
 
+  .outcome-grid {
+    grid-template-columns: 1fr;
+  }
+
   .hiwCodeTitle {
     font-size: 19px;
   }
@@ -1879,6 +2209,13 @@ body {
   height: 16px;
 }
 
+.pro-detail-bg-chip-icon {
+  font-size: 15px;
+  line-height: 1;
+  color: #fd6116;
+  font-weight: 700;
+}
+
 .lp-chip-slow {
   animation: lp-float-slow 8s ease-in-out infinite;
 }
@@ -1896,6 +2233,518 @@ body {
   z-index: 10;
 }
 
+.pro-detail-hero-slider,
+.pro-list-hero-slider {
+  min-height: 360px;
+}
+
+.pro-detail-hero-image {
+  width: 100%;
+  height: 100%;
+  min-height: 360px;
+  object-fit: cover;
+  border-radius: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.28);
+  box-shadow: 0 24px 52px -34px rgba(2, 6, 23, 0.92);
+}
+
+.role-hero-mock {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  border-radius: 14px;
+  border: 1px solid rgba(253, 98, 22, 0.34);
+  background: linear-gradient(140deg, rgba(16, 11, 47, 0.9), rgba(16, 11, 47, 0.72));
+  color: #fff;
+  padding: 10px 12px;
+  backdrop-filter: blur(14px);
+  box-shadow: 0 18px 36px -24px rgba(253, 98, 22, 0.66);
+}
+
+.role-hero-mock p {
+  margin: 0;
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.72);
+}
+
+.role-hero-mock strong {
+  display: block;
+  margin-top: 2px;
+  font-size: 13px;
+}
+
+.role-hero-mock-a {
+  top: 14px;
+  left: 12px;
+}
+
+.role-hero-mock-b {
+  top: 118px;
+  right: 16px;
+}
+
+.role-hero-mock-c {
+  bottom: 16px;
+  left: 20px;
+}
+
+.role-hero-mock-icon {
+  width: 28px;
+  height: 28px;
+  border-radius: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #fd6116;
+  background: rgba(253, 98, 22, 0.14);
+  border: 1px solid rgba(253, 98, 22, 0.5);
+}
+
+.role-hero-mock-icon svg {
+  width: 14px;
+  height: 14px;
+}
+
+.pro-trust-chips {
+  margin-top: 14px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.pro-trust-chips span {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  border: 1px solid rgba(253, 98, 22, 0.46);
+  background: rgba(253, 98, 22, 0.14);
+  color: #ffd7c1;
+  padding: 5px 9px;
+  font-size: 11px;
+  font-weight: 600;
+}
+
+.role-copy-card .path-body p {
+  min-height: 0;
+}
+
+.role-chip-icon {
+  width: 22px;
+  height: 22px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  color: #fd6116;
+  background: rgba(253, 98, 22, 0.12);
+  border: 1px solid rgba(253, 98, 22, 0.34);
+}
+
+.role-chip-icon svg {
+  width: 13px;
+  height: 13px;
+}
+
+.role-card-icon {
+  width: 30px;
+  height: 30px;
+  border-radius: 9px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #fd6116;
+  background: rgba(253, 98, 22, 0.12);
+  border: 1px solid rgba(253, 98, 22, 0.35);
+}
+
+.role-card-icon svg {
+  width: 15px;
+  height: 15px;
+}
+
+.role-card-icon-light {
+  background: rgba(253, 98, 22, 0.1);
+}
+
+.role-card-icon-dark {
+  background: rgba(253, 98, 22, 0.2);
+  color: #ffc9ab;
+}
+
+.role-section-headline {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.role-section-kicker {
+  margin: 0 0 4px;
+  color: #c2410c;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.role-typical-shell {
+  position: relative;
+  overflow: hidden;
+  border: 1px solid rgba(253, 98, 22, 0.28);
+  background:
+    linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06)),
+    radial-gradient(circle at 86% 20%, rgba(253, 98, 22, 0.16), transparent 42%),
+    radial-gradient(circle at 10% 16%, rgba(174, 198, 255, 0.18), transparent 40%),
+    linear-gradient(160deg, rgba(10, 14, 30, 0.58), rgba(7, 10, 24, 0.52));
+  backdrop-filter: blur(22px) saturate(120%);
+  -webkit-backdrop-filter: blur(22px) saturate(120%);
+  box-shadow:
+    0 26px 48px -34px rgba(0, 0, 0, 0.72),
+    0 0 0 1px rgba(253, 98, 22, 0.14) inset;
+}
+
+.role-typical-shell::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 36%, rgba(255, 255, 255, 0.05) 64%, transparent);
+  pointer-events: none;
+}
+
+.role-typical-shell::after {
+  content: '';
+  position: absolute;
+  width: 54%;
+  height: 64%;
+  right: -6%;
+  top: -14%;
+  border-radius: 999px;
+  background: radial-gradient(circle at center, rgba(253, 98, 22, 0.32), rgba(253, 98, 22, 0.1) 56%, transparent 74%);
+  filter: blur(12px);
+  pointer-events: none;
+  animation: roleOrangeDrift 9s ease-in-out infinite;
+}
+
+.role-typical-shell .section-head h2 {
+  color: #fff;
+}
+
+.role-typical-shell .section-head .sub {
+  color: rgba(255, 255, 255, 0.78);
+}
+
+.role-typical-shell .role-section-kicker {
+  color: #dbe9ff;
+}
+
+.role-typical-shell .role-section-headline h3 {
+  color: #fff;
+}
+
+.role-typical-shell .role-card-icon-light {
+  color: #ffd8c2;
+  background: rgba(253, 98, 22, 0.16);
+  border-color: rgba(253, 98, 22, 0.36);
+}
+
+.role-typical-card {
+  border: 1px solid rgba(255, 255, 255, 0.22);
+  background:
+    linear-gradient(145deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.08)),
+    linear-gradient(180deg, rgba(7, 12, 30, 0.22), rgba(7, 12, 30, 0.12));
+  backdrop-filter: blur(18px) saturate(118%);
+  -webkit-backdrop-filter: blur(18px) saturate(118%);
+  box-shadow: 0 22px 36px -28px rgba(0, 0, 0, 0.6);
+}
+
+.role-typical-card h3 {
+  color: #fff;
+}
+
+.role-typical-list {
+  margin: 12px 0 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  gap: 8px;
+}
+
+.role-typical-list li {
+  display: grid;
+  grid-template-columns: 18px 1fr;
+  align-items: start;
+  gap: 6px;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 13px;
+  line-height: 1.48;
+}
+
+.role-typical-shell .role-typical-list li {
+  color: rgba(255, 255, 255, 0.92);
+}
+
+.role-typical-bullet {
+  margin-top: 1px;
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: #dce8ff;
+  background: rgba(125, 166, 255, 0.16);
+  border: 1px solid rgba(160, 188, 255, 0.44);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.pro-real-note-card {
+  margin-top: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.24);
+  border-radius: 12px;
+  background:
+    linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06)),
+    linear-gradient(180deg, rgba(7, 12, 30, 0.2), rgba(7, 12, 30, 0.12));
+  backdrop-filter: blur(16px) saturate(115%);
+  -webkit-backdrop-filter: blur(16px) saturate(115%);
+  padding: 10px 12px;
+  display: grid;
+  grid-template-columns: 28px 1fr;
+  align-items: start;
+  gap: 10px;
+}
+
+.pro-real-note-card p {
+  margin: 2px 0 0;
+  color: rgba(255, 255, 255, 0.9);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.role-typical-shell .pro-real-note-card p {
+  color: rgba(255, 255, 255, 0.92);
+}
+
+@keyframes roleOrangeDrift {
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0);
+    opacity: 0.46;
+  }
+  50% {
+    transform: translate3d(-14px, 10px, 0);
+    opacity: 0.68;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .role-typical-shell::after {
+    animation: none;
+  }
+}
+
+
+.role-copy-list {
+  margin: 12px 0 0;
+  padding-left: 18px;
+  display: grid;
+  gap: 7px;
+}
+
+.role-copy-list li {
+  color: #334155;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.launch-grid {
+  margin-top: 14px;
+  display: grid;
+  grid-template-columns: 1.05fr 0.95fr;
+  gap: 12px;
+}
+
+.launch-panel {
+  border: 1px solid rgba(253, 98, 22, 0.28);
+  border-radius: 16px;
+  padding: 14px;
+  background:
+    radial-gradient(circle at top right, rgba(253, 98, 22, 0.1), transparent 58%),
+    linear-gradient(165deg, rgba(255, 248, 241, 0.92), rgba(255, 255, 255, 0.96));
+}
+
+.launch-panel-outcomes {
+  border-color: rgba(16, 11, 47, 0.14);
+  background:
+    radial-gradient(circle at top right, rgba(16, 11, 47, 0.08), transparent 62%),
+    linear-gradient(165deg, rgba(246, 249, 255, 0.94), rgba(255, 255, 255, 0.97));
+}
+
+.launch-panel-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.launch-panel-head h3 {
+  margin: 0;
+  color: #100b2f;
+  font-size: 18px;
+  line-height: 1.3;
+}
+
+.launch-kicker {
+  margin: 0 0 3px;
+  color: #fd6116;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.launch-list {
+  margin: 12px 0 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  gap: 8px;
+}
+
+.launch-list li {
+  display: grid;
+  grid-template-columns: 34px 1fr;
+  gap: 9px;
+  align-items: start;
+}
+
+.launch-step {
+  width: 30px;
+  height: 30px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 10px;
+  border: 1px solid rgba(253, 98, 22, 0.34);
+  background: rgba(253, 98, 22, 0.12);
+  color: #fd6116;
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.launch-list p {
+  margin: 5px 0 0;
+  color: #334155;
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+.outcome-grid {
+  margin-top: 12px;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.outcome-tile {
+  border: 1px solid rgba(16, 11, 47, 0.12);
+  border-radius: 12px;
+  padding: 10px 10px 10px 11px;
+  background: rgba(255, 255, 255, 0.74);
+  display: grid;
+  grid-template-columns: 8px 1fr;
+  gap: 8px;
+  align-items: start;
+}
+
+.outcome-dot {
+  width: 8px;
+  height: 8px;
+  margin-top: 6px;
+  border-radius: 999px;
+  background: linear-gradient(180deg, #fd6116, #ff8a4d);
+}
+
+.outcome-tile p {
+  margin: 0;
+  color: #2f3f5a;
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+.pro-detail-float-card,
+.pro-list-float-card {
+  backdrop-filter: blur(14px);
+  border: 1px solid rgba(253, 98, 22, 0.34);
+  background: linear-gradient(135deg, rgba(16, 11, 47, 0.84), rgba(16, 11, 47, 0.62));
+  box-shadow: 0 18px 36px -26px rgba(253, 98, 22, 0.68);
+}
+
+.pro-detail-float-card h3,
+.pro-list-float-card h3 {
+  margin: 0;
+  font-size: 15px;
+}
+
+.pro-detail-float-card ul,
+.pro-list-float-card ul {
+  margin: 10px 0 0;
+  display: grid;
+  gap: 6px;
+  color: rgba(255, 255, 255, 0.82);
+  font-size: 12px;
+}
+
+.pro-detail-float-card-1 {
+  top: 18px;
+  left: 14px;
+}
+
+.pro-detail-float-card-2 {
+  right: 14px;
+  bottom: 18px;
+}
+
+.pro-list-float-card-1 {
+  top: 28px;
+  left: 14px;
+}
+
+.pro-list-float-card-2 {
+  right: 14px;
+  bottom: 28px;
+}
+
+.pro-visual-grid {
+  margin-top: 10px;
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.pro-visual-tile {
+  margin: 0;
+  border-radius: 10px;
+  overflow: hidden;
+  border: 1px solid rgba(253, 98, 22, 0.3);
+  background: rgba(8, 10, 22, 0.45);
+}
+
+.pro-visual-tile img {
+  width: 100%;
+  height: 74px;
+  object-fit: cover;
+  display: block;
+}
+
+.pro-visual-tile figcaption {
+  padding: 6px 8px;
+  font-size: 11px;
+  line-height: 1.3;
+  color: rgba(255, 255, 255, 0.88);
+  text-align: center;
+}
+
 .lp-hero-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -1907,7 +2756,7 @@ body {
 .lp-hero-title {
   margin: 0;
   color: #fff;
-  font-size: clamp(34px, 5vw, 56px);
+  font-size: clamp(28px, 4vw, 44px);
   line-height: 1.08;
   font-weight: 800;
 }
@@ -1915,10 +2764,21 @@ body {
 .lp-hero-copy {
   margin-top: 14px;
   color: rgba(255, 255, 255, 0.8);
-  font-size: 17px;
+  font-size: 15px;
   line-height: 1.6;
 }
 
+.lp-hero-grid .eyebrow {
+  font-size: 13px;
+}
+
+.lp-hero-note {
+  margin-top: 14px;
+  color: rgba(255, 255, 255, 0.72);
+  font-size: 13px;
+  letter-spacing: 0.01em;
+}
+
 .lp-primary-btn,
 .lp-ghost-btn {
   position: relative;
@@ -1992,6 +2852,15 @@ body {
   max-width: 520px;
 }
 
+.role-hero-photo {
+  width: 100%;
+  min-height: 360px;
+  object-fit: cover;
+  border-radius: 20px;
+  border: 1px solid rgba(255, 255, 255, 0.28);
+  box-shadow: 0 24px 52px -34px rgba(2, 6, 23, 0.92);
+}
+
 .lp-hero-slider {
   position: relative;
   min-height: 370px;
@@ -2466,6 +3335,7 @@ body {
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, 0.46);
   box-shadow: 0 24px 34px -24px rgba(2, 6, 23, 0.65);
+  animation: hiwMediaFloat 7s ease-in-out infinite;
 }
 
 .hiwCodeBigRect::before {
@@ -2484,6 +3354,8 @@ body {
   height: 100%;
   object-fit: cover;
   z-index: 1;
+  transform-origin: center;
+  animation: hiwPhotoZoom 8.5s ease-in-out infinite;
 }
 
 .hiwCodeMediaCopy {
@@ -2688,6 +3560,33 @@ body {
   }
 }
 
+@keyframes hiwMediaFloat {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-4px);
+  }
+}
+
+@keyframes hiwPhotoZoom {
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.03);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hiwCodeBigRect,
+  .hiwCodePhoto {
+    animation: none;
+  }
+}
+
 .lp-carousel-nav {
   margin-top: 10px;
   display: flex;
@@ -2810,10 +3709,61 @@ body {
     grid-template-columns: 1fr;
   }
 
+  .lp-role-cta-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .role-benefit-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .pro-real-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .pro-detail-trust-strip {
+    grid-template-columns: 1fr;
+  }
+
   .lp-hero-graph {
     max-width: 100%;
   }
 
+  .pro-detail-float-card,
+  .pro-list-float-card {
+    position: relative;
+    inset: auto;
+    margin-top: 10px;
+  }
+
+  .pro-detail-hero-slider,
+  .pro-list-hero-slider {
+    min-height: 0;
+    display: grid;
+    gap: 10px;
+  }
+
+  .pro-visual-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .pro-detail-hero-image {
+    min-height: 240px;
+  }
+
+  .role-hero-photo {
+    min-height: 240px;
+  }
+
+  .role-hero-mock {
+    position: relative;
+    top: auto;
+    right: auto;
+    left: auto;
+    bottom: auto;
+    margin-top: 10px;
+  }
+
   .contact-mini-faq-grid {
     grid-template-columns: 1fr;
   }
diff --git a/src/components/PublicFooter.tsx b/src/components/PublicFooter.tsx
index f0b209d..b6af56b 100644
--- a/src/components/PublicFooter.tsx
+++ b/src/components/PublicFooter.tsx
@@ -7,6 +7,7 @@ export default function PublicFooter() {
         <img class="public-footer-logo" src="/nxtgauge-logo.png" alt="NXTGAUGE" />
         <p>© {new Date().getFullYear()} Nxtgauge. All rights reserved.</p>
         <div class="public-footer-links">
+          <A href="/professionals">Professionals</A>
           <A href="/terms">Terms</A>
           <A href="/privacy">Privacy</A>
           <A href="/help-center">Help Center</A>
diff --git a/src/components/PublicHeader.tsx b/src/components/PublicHeader.tsx
index 8c9030d..66331bf 100644
--- a/src/components/PublicHeader.tsx
+++ b/src/components/PublicHeader.tsx
@@ -33,6 +33,7 @@ export default function PublicHeader() {
 
         <div class="desktop-only nav-links">
           <A class="nav-underline" classList={{ active: isRouteActive(location.pathname, '/') }} href="/">Home</A>
+          <A class="nav-underline" classList={{ active: location.pathname === '/professionals' || location.pathname.startsWith('/professionals/') }} href="/professionals">Professionals</A>
           <A class="nav-underline" classList={{ active: isRouteActive(location.pathname, '/about') }} href="/about">About Us</A>
           <A class="nav-underline" classList={{ active: isRouteActive(location.pathname, '/help-center') }} href="/help-center">Help Center</A>
           <A class="nav-underline" classList={{ active: isRouteActive(location.pathname, '/contact') }} href="/contact">Contact Us</A>
@@ -64,6 +65,7 @@ export default function PublicHeader() {
         <div id="public-mobile-nav" class="mobile-nav">
           <div class="mobile-nav-links container">
             <A href="/" onClick={() => setMobileOpen(false)}>Home</A>
+            <A href="/professionals" onClick={() => setMobileOpen(false)}>Professionals</A>
             <A href="/about" onClick={() => setMobileOpen(false)}>About Us</A>
             <A href="/help-center" onClick={() => setMobileOpen(false)}>Help Center</A>
             <A href="/contact" onClick={() => setMobileOpen(false)}>Contact Us</A>
diff --git a/src/components/PublicLanding.tsx b/src/components/PublicLanding.tsx
index e7a370e..a651b02 100644
--- a/src/components/PublicLanding.tsx
+++ b/src/components/PublicLanding.tsx
@@ -1,15 +1,16 @@
 import { A } from '@solidjs/router';
-import { createEffect, createMemo, createSignal, For, onCleanup, onMount, Show } from 'solid-js';
+import { createMemo, createSignal, For, onCleanup, onMount, Show } from 'solid-js';
 import OpportunityGraph from '~/components/OpportunityGraph';
 import PublicHeader from '~/components/PublicHeader';
 import PublicFooter from '~/components/PublicFooter';
+import { professionalPages, professionalSignupHref, type ProfessionalCategory } from '~/lib/professionals';
 
-type PathCard = {
+type AudienceCard = {
   title: string;
   description: string;
   button: string;
   chip: string;
-  icon: 'briefcase' | 'user' | 'users' | 'code' | 'camera' | 'sparkles' | 'grad' | 'film' | 'pen' | 'share' | 'dumbbell' | 'utensils';
+  icon: 'briefcase' | 'user' | 'users' | 'code';
   href: string;
   image: string;
   audience: 'customer' | 'professional' | 'company' | 'job_seeker';
@@ -23,127 +24,57 @@ type Flow = {
   steps: Array<{ title: string; description: string }>;
 };
 
-const pathCards: PathCard[] = [
+const audienceCards: AudienceCard[] = [
   {
     title: 'Post a Job',
     description: 'Create verified job openings and find the right talent faster.',
-    button: 'Start as Company',
+    button: 'Explore Company',
     chip: 'Company',
     icon: 'briefcase',
-    href: '/signup?intent=company',
+    href: '/roles/company',
     audience: 'company',
     image: 'https://images.unsplash.com/photo-1484480974693-6ca0a78fb36b?q=80&w=800&auto=format&fit=crop',
   },
   {
     title: 'Apply for Jobs',
     description: 'Build your profile and apply to approved opportunities quickly.',
-    button: 'Start as Job Seeker',
+    button: 'Explore Job Seeker',
     chip: 'Job Seeker',
     icon: 'user',
-    href: '/signup?intent=job_seeker',
+    href: '/roles/job-seeker',
     audience: 'job_seeker',
     image: 'https://images.unsplash.com/photo-1586281380349-632531db7ed4?q=80&w=800&auto=format&fit=crop',
   },
   {
     title: 'Hire a Professional',
     description: 'Post your requirement and discover trusted specialists.',
-    button: 'Start as Customer',
+    button: 'Explore Customer',
     chip: 'Customer',
     icon: 'users',
-    href: '/signup?intent=customer',
+    href: '/roles/customer',
     audience: 'customer',
     image: 'https://images.unsplash.com/photo-1450101499163-c8848c66ca85?q=80&w=800&auto=format&fit=crop',
   },
   {
-    title: 'Join as Developer',
-    description: 'Build products and grow with verified client demand.',
-    button: 'Join Developer',
+    title: 'Join as Professional',
+    description: 'Create a trusted profile and grow through verified demand.',
+    button: 'Explore Professionals',
     chip: 'Professional',
     icon: 'code',
-    href: '/signup?intent=professional',
+    href: '/professionals',
     audience: 'professional',
     image: 'https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=800&auto=format&fit=crop',
   },
-  {
-    title: 'Join as Photographer',
-    description: 'Capture events and campaigns with trusted bookings.',
-    button: 'Join Photographer',
-    chip: 'Professional',
-    icon: 'camera',
-    href: '/signup?intent=professional',
-    audience: 'professional',
-    image: 'https://images.unsplash.com/photo-1516035069371-29a1b244cc32?q=80&w=800&auto=format&fit=crop',
-  },
-  {
-    title: 'Join as Makeup Artist',
-    description: 'Offer styling services with profile-based trust signals.',
-    button: 'Join Makeup Artist',
-    chip: 'Professional',
-    icon: 'sparkles',
-    href: '/signup?intent=professional',
-    audience: 'professional',
-    image: 'https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?q=80&w=800&auto=format&fit=crop',
-  },
-  {
-    title: 'Join as Tutor',
-    description: 'Teach learners and build your reputation with verified profiles.',
-    button: 'Join Tutor',
-    chip: 'Professional',
-    icon: 'grad',
-    href: '/signup?intent=professional',
-    audience: 'professional',
-    image: 'https://images.unsplash.com/photo-1497633762265-9d179a990aa6?q=80&w=800&auto=format&fit=crop',
-  },
-  {
-    title: 'Join as Video Editor',
-    description: 'Create compelling edits and work with quality clients.',
-    button: 'Join Video Editor',
-    chip: 'Professional',
-    icon: 'film',
-    href: '/signup?intent=professional',
-    audience: 'professional',
-    image: 'https://images.unsplash.com/photo-1574717024653-61fd2cf4d44d?q=80&w=800&auto=format&fit=crop',
-  },
-  {
-    title: 'Join as Graphic Designer',
-    description: 'Design brand-ready visuals and collaborate with growing businesses.',
-    button: 'Join Graphic Designer',
-    chip: 'Professional',
-    icon: 'pen',
-    href: '/signup?intent=professional',
-    audience: 'professional',
-    image: 'https://images.unsplash.com/photo-1558655146-d09347e92766?q=80&w=800&auto=format&fit=crop',
-  },
-  {
-    title: 'Join as Social Media Manager',
-    description: 'Plan campaigns and scale audience growth for clients.',
-    button: 'Join Social Manager',
-    chip: 'Professional',
-    icon: 'share',
-    href: '/signup?intent=professional',
-    audience: 'professional',
-    image: 'https://images.unsplash.com/photo-1611162618071-b39a2ec055fb?q=80&w=800&auto=format&fit=crop',
-  },
-  {
-    title: 'Join as Fitness Trainer',
-    description: 'Coach clients with structured plans and trusted profiles.',
-    button: 'Join Trainer',
-    chip: 'Professional',
-    icon: 'dumbbell',
-    href: '/signup?intent=professional',
-    audience: 'professional',
-    image: 'https://images.unsplash.com/photo-1517836357463-d25dfeac3438?q=80&w=800&auto=format&fit=crop',
-  },
-  {
-    title: 'Join as Catering Services',
-    description: 'Showcase event-ready menus to customers and companies.',
-    button: 'Join Catering',
-    chip: 'Professional',
-    icon: 'utensils',
-    href: '/signup?intent=professional',
-    audience: 'professional',
-    image: 'https://images.unsplash.com/photo-1555244162-803834f70033?q=80&w=800&auto=format&fit=crop',
-  },
+];
+
+const roleFilterOptions: Array<{ key: 'all' | ProfessionalCategory; label: string }> = [
+  { key: 'all', label: 'All' },
+  { key: 'creative', label: 'Creative' },
+  { key: 'tech', label: 'Tech' },
+  { key: 'education', label: 'Education' },
+  { key: 'wellness', label: 'Wellness' },
+  { key: 'events', label: 'Events' },
+  { key: 'marketing', label: 'Marketing' },
 ];
 
 const benefits = [
@@ -158,8 +89,8 @@ const benefits = [
 const flows: Flow[] = [
   {
     label: 'Customers',
-    title: 'Need to solution, with verified trust in the middle',
-    description: 'Post your requirement, pass quality checks, and receive focused responses.',
+    title: 'Hire trusted professionals with less noise',
+    description: 'Post requirements, pass review checks, and receive better-fit responses.',
     image: 'https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?q=80&w=1200&auto=format&fit=crop',
     steps: [
       { title: 'Create account', description: 'Sign up quickly with customer intent.' },
@@ -170,8 +101,8 @@ const flows: Flow[] = [
   },
   {
     label: 'Professionals',
-    title: 'Profile first, opportunity next',
-    description: 'Build profile quality once, then receive better-fit lead discovery.',
+    title: 'Build trust once, discover better opportunities',
+    description: 'Create a strong profile and respond to verified demand.',
     image: 'https://images.unsplash.com/photo-1461749280684-dccba630e2f6?q=80&w=1200&auto=format&fit=crop',
     steps: [
       { title: 'Pick role and skills', description: 'Choose service category and specialization.' },
@@ -182,8 +113,8 @@ const flows: Flow[] = [
   },
   {
     label: 'Companies',
-    title: 'Hiring workflows without chaos',
-    description: 'Publish requirements, keep quality high, and track applicants clearly.',
+    title: 'Post jobs with approval-based quality control',
+    description: 'Publish openings, keep quality high, and track applicants clearly.',
     image: 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?q=80&w=1200&auto=format&fit=crop',
     steps: [
       { title: 'Create company profile', description: 'Set hiring context and org details.' },
@@ -194,8 +125,8 @@ const flows: Flow[] = [
   },
   {
     label: 'Job Seekers',
-    title: 'Onboard once, apply with confidence',
-    description: 'Get visible only after approval, then discover jobs with targeted filters.',
+    title: 'Apply to approved opportunities with clarity',
+    description: 'Build your profile and track application progress without confusion.',
     image: 'https://images.unsplash.com/photo-1450101499163-c8848c66ca85?q=80&w=1200&auto=format&fit=crop',
     steps: [
       { title: 'Set up profile', description: 'Complete essentials and work preferences.' },
@@ -225,7 +156,7 @@ const faqs = [
   },
   {
     q: 'Do I need to choose my role during signup?',
-    a: 'Yes. Choose your role first, then we open the correct signup flow for that journey.',
+    a: 'Create one account, then choose and activate the role flow you need.',
   },
 ] as const;
 
@@ -281,20 +212,13 @@ function ChipIcon(props: { kind: (typeof chipNodes)[number]['kind'] }) {
   );
 }
 
-function PathRoleIcon(props: { kind: PathCard['icon'] }) {
+function PathRoleIcon(props: { kind: AudienceCard['icon'] }) {
   const common = { fill: 'none', stroke: 'currentColor', 'stroke-width': '2', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' } as const;
   if (props.kind === 'briefcase') return <svg viewBox="0 0 24 24" aria-hidden="true" {...common}><path d="M16 6V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2" /><path d="M22 13a18 18 0 0 1-20 0" /><rect x="2" y="6" width="20" height="14" rx="2" /></svg>;
   if (props.kind === 'user') return <svg viewBox="0 0 24 24" aria-hidden="true" {...common}><circle cx="12" cy="8" r="4" /><path d="M6 20c1.4-3.2 3.4-5 6-5s4.6 1.8 6 5" /></svg>;
   if (props.kind === 'users') return <svg viewBox="0 0 24 24" aria-hidden="true" {...common}><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" /><circle cx="9" cy="7" r="4" /><path d="M22 21v-2a4 4 0 0 0-3-3.87" /><path d="M16 3.13a4 4 0 0 1 0 7.75" /></svg>;
   if (props.kind === 'code') return <svg viewBox="0 0 24 24" aria-hidden="true" {...common}><path d="m18 16 4-4-4-4" /><path d="m6 8-4 4 4 4" /><path d="m14.5 4-5 16" /></svg>;
-  if (props.kind === 'camera') return <svg viewBox="0 0 24 24" aria-hidden="true" {...common}><path d="M14 4a2 2 0 0 1 1.76 1.05l.49.9A2 2 0 0 0 18 7h2a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h2a2 2 0 0 0 1.76-1.05l.49-.9A2 2 0 0 1 10 4z" /><circle cx="12" cy="13" r="3" /></svg>;
-  if (props.kind === 'sparkles') return <svg viewBox="0 0 24 24" aria-hidden="true" {...common}><path d="M11 2.8a1 1 0 0 1 2 0l1 5.6a2 2 0 0 0 1.6 1.6l5.6 1a1 1 0 0 1 0 2l-5.6 1a2 2 0 0 0-1.6 1.6l-1 5.6a1 1 0 0 1-2 0l-1-5.6A2 2 0 0 0 8.4 14l-5.6-1a1 1 0 0 1 0-2l5.6-1A2 2 0 0 0 10 8.4z" /><path d="M20 2v4M22 4h-4" /></svg>;
-  if (props.kind === 'grad') return <svg viewBox="0 0 24 24" aria-hidden="true" {...common}><path d="m22 10-10-5-10 5 10 5 10-5z" /><path d="M6 12v5c3 2 9 2 12 0v-5" /></svg>;
-  if (props.kind === 'film') return <svg viewBox="0 0 24 24" aria-hidden="true" {...common}><rect x="2" y="2" width="20" height="20" rx="2" /><path d="M7 2v20M17 2v20M2 7h20M2 17h20" /></svg>;
-  if (props.kind === 'pen') return <svg viewBox="0 0 24 24" aria-hidden="true" {...common}><path d="M12 20h9" /><path d="m16.5 3.5 4 4L7 21H3v-4z" /></svg>;
-  if (props.kind === 'share') return <svg viewBox="0 0 24 24" aria-hidden="true" {...common}><circle cx="18" cy="5" r="3" /><circle cx="6" cy="12" r="3" /><circle cx="18" cy="19" r="3" /><path d="M8.6 13.4 15.4 17M15.4 7 8.6 10.6" /></svg>;
-  if (props.kind === 'dumbbell') return <svg viewBox="0 0 24 24" aria-hidden="true" {...common}><path d="M6 10v4M4 9v6M2 8v8M18 10v4M20 9v6M22 8v8M6 12h12" /></svg>;
-  return <svg viewBox="0 0 24 24" aria-hidden="true" {...common}><path d="M3 4h18" /><path d="M6 4v16h12V4" /><path d="M9 10h6M9 14h6" /></svg>;
+  return <svg viewBox="0 0 24 24" aria-hidden="true" {...common}><path d="m18 16 4-4-4-4" /><path d="m6 8-4 4 4 4" /><path d="m14.5 4-5 16" /></svg>;
 }
 
 function CheckBadgeIcon() {
@@ -358,10 +282,7 @@ export default function PublicLanding() {
   const [reduceMotion, setReduceMotion] = createSignal(false);
   const [scrollY, setScrollY] = createSignal(0);
   const [heroTilt, setHeroTilt] = createSignal({ x: 0, y: 0 });
-  const [pathPage, setPathPage] = createSignal(0);
-  const [cardsPerPage, setCardsPerPage] = createSignal(3);
-  const [pathPaused, setPathPaused] = createSignal(false);
-  const [pathTouchStartX, setPathTouchStartX] = createSignal<number | null>(null);
+  const [roleFilter, setRoleFilter] = createSignal<'all' | ProfessionalCategory>('all');
   const [benefitIdx, setBenefitIdx] = createSignal(0);
   const [flowIndex, setFlowIndex] = createSignal(0);
   const [flowStepIndex, setFlowStepIndex] = createSignal(0);
@@ -385,23 +306,8 @@ export default function PublicLanding() {
       });
     };
 
-    const syncCardsPerPage = () => {
-      const w = window.innerWidth;
-      if (w < 640) {
-        setCardsPerPage(1);
-        return;
-      }
-      if (w < 1024) {
-        setCardsPerPage(2);
-        return;
-      }
-      setCardsPerPage(3);
-    };
-
     onScroll();
-    syncCardsPerPage();
     window.addEventListener('scroll', onScroll, { passive: true });
-    window.addEventListener('resize', syncCardsPerPage);
     media.addEventListener('change', syncMotion);
 
     const benefitTimer = window.setInterval(() => setBenefitIdx((x) => (x + 1) % benefits.length), 4200);
@@ -417,37 +323,16 @@ export default function PublicLanding() {
 
     onCleanup(() => {
       window.removeEventListener('scroll', onScroll);
-      window.removeEventListener('resize', syncCardsPerPage);
       media.removeEventListener('change', syncMotion);
       window.clearInterval(benefitTimer);
       window.clearInterval(flowTimer);
     });
   });
-
-  const pagedPaths = createMemo(() => {
-    const cards = pathCards;
-    const per = cardsPerPage();
-    const pages: PathCard[][] = [];
-    for (let i = 0; i < cards.length; i += per) pages.push(cards.slice(i, i + per));
-    return pages;
-  });
-
-  const activePathPage = createMemo(() => {
-    const pages = pagedPaths();
-    if (pages.length === 0) return 0;
-    return pathPage() % pages.length;
-  });
-
-  createEffect(() => {
-    const pagesLen = pagedPaths().length;
-    if (reduceMotion() || pathPaused() || pagesLen <= 1) return;
-    const timer = window.setInterval(() => {
-      setPathPage((prev) => {
-        const next = prev + 1;
-        return next >= pagesLen ? 0 : next;
-      });
-    }, 4200);
-    onCleanup(() => window.clearInterval(timer));
+  const visibleProfessionalCards = createMemo(() => {
+    const filtered = roleFilter() === 'all'
+      ? professionalPages
+      : professionalPages.filter((item) => item.category === roleFilter());
+    return filtered.slice(0, 8);
   });
 
   return (
@@ -484,14 +369,15 @@ export default function PublicLanding() {
         >
           <div class="container lp-hero-grid">
             <div>
-              <h1 class="lp-hero-title">Hire verified professionals. Post jobs. Get approvals in 24-48 hours.</h1>
+              <h1 class="lp-hero-title">Trusted hiring and opportunities, verified.</h1>
               <p class="lp-hero-copy">
-                Nxtgauge connects customers, companies, job seekers, and professionals through a trusted approval workflow.
+                Hire trusted professionals, post verified jobs, and apply faster in one platform.
               </p>
               <div class="hero-actions">
-                <A class="lp-primary-btn" href="/signup?intent=customer">Hire a Professional</A>
-                <A class="lp-ghost-btn lp-ghost-btn-dark" href="/signup?intent=job_seeker">Apply for Jobs</A>
+                <A class="lp-primary-btn" href="/signup?intent=customer">Get Started</A>
+                <A class="lp-ghost-btn lp-ghost-btn-dark" href="#how-it-works">How It Works</A>
               </div>
+              <p class="lp-hero-note">Most profile and listing reviews are completed within 24-48 hours.</p>
             </div>
             <div
               class="lp-hero-graph"
@@ -508,89 +394,75 @@ export default function PublicLanding() {
           <div class="container panel choose-path-panel">
             <div class="section-head">
               <div>
-                <h2>Choose Your Path</h2>
-                <p class="sub">One account, multiple journeys. Pick your goal and get started.</p>
-              </div>
-              <div class="lp-path-controls desktop-only">
-                <button
-                  class="lp-path-arrow"
-                  onClick={() => setPathPage((x) => Math.max(0, x - 1))}
-                  aria-label="Previous cards"
-                  disabled={activePathPage() === 0}
-                >
-                  ←
-                </button>
-                <button
-                  class="lp-path-arrow"
-                  onClick={() => setPathPage((x) => Math.min(Math.max(0, pagedPaths().length - 1), x + 1))}
-                  aria-label="Next cards"
-                  disabled={activePathPage() >= Math.max(0, pagedPaths().length - 1)}
-                >
-                  →
-                </button>
+                <h2>Who Nxtgauge is for</h2>
+                <p class="sub">Start with one account, then activate the journey you need.</p>
               </div>
             </div>
-            <div class="path-carousel-shell">
-              <div
-                class={`path-carousel-track ${pathPaused() ? 'path-carousel-track-hover' : ''}`}
-                style={{ transform: `translate3d(-${activePathPage() * 100}%, 0, 0)` }}
-                onMouseEnter={() => setPathPaused(true)}
-                onMouseLeave={() => setPathPaused(false)}
-                onTouchStart={(event) => {
-                  setPathPaused(true);
-                  setPathTouchStartX(event.changedTouches[0]?.clientX ?? null);
-                }}
-                onTouchEnd={(event) => {
-                  setPathPaused(false);
-                  const startX = pathTouchStartX();
-                  const endX = event.changedTouches[0]?.clientX ?? null;
-                  if (startX == null || endX == null) return;
-                  const deltaX = endX - startX;
-                  if (Math.abs(deltaX) < 40) return;
-                  if (deltaX < 0) {
-                    setPathPage((x) => Math.min(Math.max(0, pagedPaths().length - 1), x + 1));
-                    return;
-                  }
-                  setPathPage((x) => Math.max(0, x - 1));
-                }}
-              >
-                <For each={pagedPaths()}>
-                  {(group) => (
-                    <div class="path-page">
-                      <div class={`path-grid path-grid-${cardsPerPage()}`}>
-                        <For each={group}>
-                          {(card) => (
-                            <article class="path-card path-card-hero">
-                              <div class="path-media">
-                                <img src={card.image} alt={card.title} loading="lazy" />
-                                <div class="path-media-overlay" />
-                              </div>
-                              <div class="path-body">
-                                <div class="path-head-row">
-                                  <span class="path-icon"><PathRoleIcon kind={card.icon} /></span>
-                                  <span class="path-chip"><CheckBadgeIcon />{card.chip}</span>
-                                </div>
-                                <h3>{card.title}</h3>
-                                <p>{card.description}</p>
-                                <A class="path-secondary-btn" href={card.href}>{card.button}</A>
-                              </div>
-                            </article>
-                          )}
-                        </For>
+            <div class="path-grid">
+              <For each={audienceCards}>
+                {(card) => (
+                  <article class="path-card path-card-hero">
+                    <div class="path-media">
+                      <img src={card.image} alt={card.title} loading="lazy" />
+                      <div class="path-media-overlay" />
+                    </div>
+                    <div class="path-body">
+                      <div class="path-head-row">
+                        <span class="path-icon"><PathRoleIcon kind={card.icon} /></span>
+                        <span class="path-chip"><CheckBadgeIcon />{card.chip}</span>
+                      </div>
+                      <h3>{card.title}</h3>
+                      <p>{card.description}</p>
+                      <A class="path-secondary-btn" href={card.href}>{card.button}</A>
+                    </div>
+                  </article>
+                )}
+              </For>
+            </div>
+          </div>
+        </section>
+
+        <section id="professionals" class="public-section scene-dark lp-section">
+          <div class="container panel choose-path-panel">
+            <div class="section-head">
+              <div>
+                <h2>Explore professional categories</h2>
+              </div>
+              <A class="path-secondary-btn lp-view-all-btn" href="/professionals">View all professionals</A>
+            </div>
+            <div class="filter-row">
+              <For each={roleFilterOptions}>
+                {(filter) => (
+                  <button
+                    type="button"
+                    class={`chip-btn ${roleFilter() === filter.key ? 'active' : ''}`}
+                    onClick={() => setRoleFilter(filter.key)}
+                  >
+                    {filter.label}
+                  </button>
+                )}
+              </For>
+            </div>
+            <div class="path-grid">
+              <For each={visibleProfessionalCards()}>
+                {(item) => (
+                  <article class="path-card path-card-hero">
+                    <div class="path-media">
+                      <img src={item.image} alt={item.shortTitle} loading="lazy" />
+                      <div class="path-media-overlay" />
+                    </div>
+                    <div class="path-body">
+                      <div class="path-head-row">
+                        <span class="path-chip">{item.category}</span>
+                      </div>
+                      <h3>{item.shortTitle}</h3>
+                      <p>{item.heroDescription}</p>
+                      <div class="lp-role-cta-grid">
+                        <A class="path-secondary-btn" href={`/professionals/${item.slug}`}>Explore {item.shortTitle}</A>
+                        <A class="path-secondary-btn" href={professionalSignupHref(item.roleKey)}>Join {item.shortTitle}</A>
                       </div>
                     </div>
-                  )}
-                </For>
-              </div>
-            </div>
-            <div class="lp-path-dots">
-              <For each={pagedPaths()}>
-                {(_, idx) => (
-                  <button
-                    class={`lp-path-dot ${idx() === activePathPage() ? 'active' : ''}`}
-                    onClick={() => setPathPage(idx())}
-                    aria-label={`Go to page ${idx() + 1}`}
-                  />
+                  </article>
                 )}
               </For>
             </div>
@@ -713,12 +585,12 @@ export default function PublicLanding() {
             <div class="cta-glow" />
             <div class="cta-copy">
               <p class="eyebrow">Quick Actions</p>
-              <h2>Ready to get started?</h2>
-              <p class="sub">Pick your next action and continue with the correct role flow.</p>
+              <h2>Start with one account. Choose your path after.</h2>
+              <p class="sub">Hire, post, apply, or join as a professional from stable role-specific pages.</p>
             </div>
             <div class="hero-actions cta-actions">
-              <A class="lp-primary-btn pulse" href="/signup?intent=customer">Hire a Professional</A>
-              <A class="lp-ghost-btn lp-ghost-btn-dark" href="/signup?intent=job_seeker">Apply for Jobs</A>
+              <A class="lp-primary-btn pulse" href="/signup?intent=customer">Get Started</A>
+              <A class="lp-ghost-btn lp-ghost-btn-dark" href="/professionals">Explore Professionals</A>
               <A class="lp-ghost-btn lp-ghost-btn-dark" href="/signup?intent=company">Post a Job</A>
             </div>
           </div>
diff --git a/src/components/RoleLandingPage.tsx b/src/components/RoleLandingPage.tsx
new file mode 100644
index 0000000..b30db78
--- /dev/null
+++ b/src/components/RoleLandingPage.tsx
@@ -0,0 +1,458 @@
+import { Meta, Title } from '@solidjs/meta';
+import { A } from '@solidjs/router';
+import { For, Show, createMemo, createSignal, onCleanup, onMount } from 'solid-js';
+import PublicFooter from '~/components/PublicFooter';
+import PublicHeader from '~/components/PublicHeader';
+import {
+  getRoleLandingBySlug,
+  roleChecklist,
+  roleOutcomes,
+  roleTrustChips,
+  type RoleLandingAudience,
+} from '~/lib/role-landings';
+
+const chipNodes = [
+  { left: '8%', top: '20%', size: 34, cls: 'lp-chip-slow', label: '★' },
+  { left: '22%', top: '9%', size: 40, cls: 'lp-chip-mid', label: '✓' },
+  { left: '88%', top: '16%', size: 36, cls: 'lp-chip-fast', label: '↗' },
+  { left: '76%', top: '38%', size: 30, cls: 'lp-chip-mid', label: '✦' },
+  { left: '14%', top: '58%', size: 38, cls: 'lp-chip-fast', label: '⚑' },
+  { left: '62%', top: '72%', size: 34, cls: 'lp-chip-slow', label: '⎈' },
+  { left: '42%', top: '84%', size: 30, cls: 'lp-chip-mid', label: '✓' },
+] as const;
+
+type Props = {
+  slug: string;
+  pathBase: '/professionals' | '/roles';
+  audience?: RoleLandingAudience;
+};
+
+function splitLine(line: string): { title: string; body: string } {
+  const [title, ...rest] = line.split(' - ');
+  return { title, body: rest.join(' - ') };
+}
+
+function SectionGlyph(props: { kind: 'trust' | 'visibility' | 'tracking' | 'benefit' | 'work' | 'expectation' | 'why' | 'check' | 'outcome' }) {
+  const stroke = 'currentColor';
+  if (props.kind === 'tracking') {
+    return (
+      <svg viewBox="0 0 24 24" aria-hidden="true">
+        <path d="M12 6v6l4 2" fill="none" stroke={stroke} stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+        <circle cx="12" cy="12" r="9" fill="none" stroke={stroke} stroke-width="2" />
+      </svg>
+    );
+  }
+  if (props.kind === 'visibility') {
+    return (
+      <svg viewBox="0 0 24 24" aria-hidden="true">
+        <path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6-10-6-10-6Z" fill="none" stroke={stroke} stroke-width="2" />
+        <circle cx="12" cy="12" r="3" fill="none" stroke={stroke} stroke-width="2" />
+      </svg>
+    );
+  }
+  if (props.kind === 'work') {
+    return (
+      <svg viewBox="0 0 24 24" aria-hidden="true">
+        <path d="M4 7h16v11H4z" fill="none" stroke={stroke} stroke-width="2" />
+        <path d="M8 7V5h8v2" fill="none" stroke={stroke} stroke-width="2" />
+      </svg>
+    );
+  }
+  if (props.kind === 'expectation') {
+    return (
+      <svg viewBox="0 0 24 24" aria-hidden="true">
+        <path d="M12 3 4 7v6c0 4 3 7 8 8 5-1 8-4 8-8V7Z" fill="none" stroke={stroke} stroke-width="2" />
+        <path d="m9 12 2 2 4-4" fill="none" stroke={stroke} stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+    );
+  }
+  if (props.kind === 'why') {
+    return (
+      <svg viewBox="0 0 24 24" aria-hidden="true">
+        <path d="M12 2 14.8 8l6.2.7-4.6 4.3 1.2 6.1L12 16l-5.6 3.1 1.2-6.1L3 8.7 9.2 8Z" fill="none" stroke={stroke} stroke-width="2" />
+      </svg>
+    );
+  }
+  if (props.kind === 'check') {
+    return (
+      <svg viewBox="0 0 24 24" aria-hidden="true">
+        <circle cx="12" cy="12" r="9" fill="none" stroke={stroke} stroke-width="2" />
+        <path d="m8 12 2.5 2.5L16 9" fill="none" stroke={stroke} stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+    );
+  }
+  if (props.kind === 'outcome') {
+    return (
+      <svg viewBox="0 0 24 24" aria-hidden="true">
+        <path d="M6 17 18 5" fill="none" stroke={stroke} stroke-width="2" stroke-linecap="round" />
+        <path d="M11 5h7v7" fill="none" stroke={stroke} stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+      </svg>
+    );
+  }
+  if (props.kind === 'benefit') {
+    return (
+      <svg viewBox="0 0 24 24" aria-hidden="true">
+        <path d="M12 3 21 12l-9 9-9-9Z" fill="none" stroke={stroke} stroke-width="2" />
+      </svg>
+    );
+  }
+  return (
+    <svg viewBox="0 0 24 24" aria-hidden="true">
+      <path d="M12 3 4 7v6c0 4 3 7 8 8 5-1 8-4 8-8V7Z" fill="none" stroke={stroke} stroke-width="2" />
+    </svg>
+  );
+}
+
+export default function RoleLandingPage(props: Props) {
+  const [scrollY, setScrollY] = createSignal(0);
+  const [reduceMotion, setReduceMotion] = createSignal(false);
+  const [activeHowStep, setActiveHowStep] = createSignal(0);
+  const [openFaqIdx, setOpenFaqIdx] = createSignal(0);
+  const content = createMemo(() => {
+    const item = getRoleLandingBySlug(String(props.slug || ''));
+    if (!item) return undefined;
+    if (props.audience && item.audience !== props.audience) return undefined;
+    return item;
+  });
+
+  const canonical = createMemo(() => `https://test121.nxtgauge.com${props.pathBase}/${encodeURIComponent(String(props.slug || ''))}`);
+  const pageTitle = createMemo(() => (content() ? `${content()!.shortTitle} | Nxtgauge` : 'Role | Nxtgauge'));
+  const pageDescription = createMemo(() =>
+    content() ? `${content()!.heroDescription} Most role reviews complete in 24-48 hours.` : 'Role landing page on Nxtgauge.'
+  );
+
+  onMount(() => {
+    const media = window.matchMedia('(prefers-reduced-motion: reduce)');
+    const sync = () => setReduceMotion(media.matches);
+    sync();
+    const onScroll = () => setScrollY(window.scrollY || 0);
+    window.addEventListener('scroll', onScroll, { passive: true });
+    media.addEventListener('change', sync);
+    const timer = window.setInterval(() => {
+      if (media.matches) return;
+      const count = content()?.howItWorksSteps.length || 0;
+      if (count <= 1) return;
+      setActiveHowStep((prev) => (prev + 1) % count);
+    }, 2600);
+    onCleanup(() => {
+      window.removeEventListener('scroll', onScroll);
+      media.removeEventListener('change', sync);
+      window.clearInterval(timer);
+    });
+  });
+
+  return (
+    <main class="lp-main">
+      <Title>{pageTitle()}</Title>
+      <Meta name="description" content={pageDescription()} />
+      <Meta property="og:title" content={pageTitle()} />
+      <Meta property="og:description" content={pageDescription()} />
+      <Meta property="og:type" content="website" />
+      <Meta property="og:url" content={canonical()} />
+      <Meta name="twitter:card" content="summary_large_image" />
+      <Meta name="twitter:title" content={pageTitle()} />
+      <Meta name="twitter:description" content={pageDescription()} />
+      <link rel="canonical" href={canonical()} />
+
+      <div class="lp-bg" aria-hidden="true">
+        <div class="lp-dark-base" />
+        <div class="lp-mesh" style={{ transform: `translate3d(0, ${reduceMotion() ? 0 : Math.min(34, scrollY() * 0.1)}px, 0)` }} />
+        <div class="lp-ribbon" style={{ transform: `translate3d(0, ${reduceMotion() ? 0 : Math.min(56, scrollY() * 0.16)}px, 0)` }} />
+        <div class="lp-chips" style={{ transform: `translate3d(0, ${reduceMotion() ? 0 : Math.min(80, scrollY() * 0.22)}px, 0)` }}>
+          <For each={chipNodes}>
+            {(chip) => (
+              <span class={`lp-chip ${chip.cls}`} style={{ left: chip.left, top: chip.top, width: `${chip.size}px`, height: `${chip.size}px` }}>
+                <span class="pro-detail-bg-chip-icon">{chip.label}</span>
+              </span>
+            )}
+          </For>
+        </div>
+        <div class="lp-noise" />
+      </div>
+
+      <div class="lp-content">
+        <PublicHeader />
+
+        <Show
+          when={content()}
+          fallback={
+            <section class="public-section lp-section">
+              <div class="container panel choose-path-panel">
+                <h2>Role landing page not found</h2>
+                <p class="sub">The requested role page is unavailable.</p>
+                <A class="lp-primary-btn" href="/professionals">Back to Professionals</A>
+              </div>
+            </section>
+          }
+        >
+          {(item) => (
+            <>
+              <section class="public-section lp-section-hero">
+                <div class="container lp-hero-grid">
+                  <div>
+                    <p class="eyebrow">{item().heroEyebrow}</p>
+                    <h1 class="lp-hero-title">{item().heroTitle}</h1>
+                    <p class="lp-hero-copy">{item().heroDescription}</p>
+                    <div class="hero-actions">
+                      <A class="lp-primary-btn" href={item().primaryCta.href}>{item().primaryCta.label}</A>
+                      <A class="lp-ghost-btn lp-ghost-btn-dark" href={item().secondaryCta.href}>{item().secondaryCta.label}</A>
+                    </div>
+                    <div class="pro-trust-chips">
+                      <For each={roleTrustChips}>
+                        {(line) => <span>{line}</span>}
+                      </For>
+                    </div>
+                  </div>
+                  <div class="lp-hero-graph">
+                    <img src={item().heroImage} alt={item().shortTitle} class="role-hero-photo" />
+                  </div>
+                </div>
+              </section>
+
+              <section class="public-section lp-section">
+                <div class="container panel choose-path-panel">
+                  <div class="section-head">
+                    <div>
+                      <h2>{item().whatYouGetTitle}</h2>
+                      <p class="sub">{item().whatYouGetSubtitle}</p>
+                    </div>
+                  </div>
+                  <div class="path-grid">
+                    <For each={item().whatYouGetCards}>
+                      {(line, idx) => (
+                        <article class="path-card role-copy-card">
+                          <div class="path-body">
+                            <div class="path-head-row">
+                              <span class="role-chip-icon"><SectionGlyph kind="benefit" /></span>
+                              <span class="path-chip">Benefit {String(idx() + 1).padStart(2, '0')}</span>
+                            </div>
+                            <h3>{splitLine(line).title}</h3>
+                            <p>{splitLine(line).body}</p>
+                          </div>
+                        </article>
+                      )}
+                    </For>
+                  </div>
+                </div>
+              </section>
+
+              <section class="public-section lp-section role-typical-section">
+                <div class="container panel choose-path-panel role-typical-shell">
+                  <div class="section-head">
+                    <div>
+                      <h2>Typical work and expectations</h2>
+                      <p class="sub">Show clients exactly what you handle and what they should confirm before first contact.</p>
+                    </div>
+                  </div>
+                  <div class="pro-real-grid">
+                    <article class="pro-real-card role-typical-card">
+                      <div class="role-section-headline">
+                        <span class="role-card-icon role-card-icon-light"><SectionGlyph kind="work" /></span>
+                        <div>
+                          <p class="role-section-kicker">Project Scope</p>
+                          <h3>{item().typicalLeftTitle}</h3>
+                        </div>
+                      </div>
+                      <ul class="role-typical-list">
+                        <For each={item().typicalLeftItems}>
+                          {(line) => (
+                            <li>
+                              <span class="role-typical-bullet">•</span>
+                              <span>{line}</span>
+                            </li>
+                          )}
+                        </For>
+                      </ul>
+                    </article>
+                    <article class="pro-real-card role-typical-card">
+                      <div class="role-section-headline">
+                        <span class="role-card-icon role-card-icon-light"><SectionGlyph kind="expectation" /></span>
+                        <div>
+                          <p class="role-section-kicker">Buyer Evaluation</p>
+                          <h3>{item().typicalRightTitle}</h3>
+                        </div>
+                      </div>
+                      <ul class="role-typical-list">
+                        <For each={item().typicalRightItems}>
+                          {(line) => (
+                            <li>
+                              <span class="role-typical-bullet">•</span>
+                              <span>{line}</span>
+                            </li>
+                          )}
+                        </For>
+                      </ul>
+                    </article>
+                  </div>
+                  <div class="pro-real-note-card">
+                    <span class="role-card-icon role-card-icon-light"><SectionGlyph kind="check" /></span>
+                    <p>
+                      Profiles that clearly explain who you help, how your process works, and what clients receive tend to get faster replies and better-fit inquiries.
+                    </p>
+                  </div>
+                </div>
+              </section>
+
+              <section class="public-section lp-section">
+                <div class="container panel choose-path-panel">
+                  <div class="section-head">
+                    <div>
+                      <h2>{item().howItWorksTitle}</h2>
+                    </div>
+                  </div>
+                  <article class="hiwCodeCard">
+                    <div class="hiwCodeMedia">
+                      <div class="hiwCodeBigRect">
+                        <img class="hiwCodePhoto" src={item().heroImage} alt={item().shortTitle} />
+                      </div>
+                      <div class="hiwCodeMediaCopy">
+                        <p class="hiwCodeKicker">{item().shortTitle}</p>
+                        <h3 class="hiwCodeTitle">{item().howItWorksTitle}</h3>
+                        <p class="hiwCodeDesc">Simple four-step onboarding with trust checkpoints and clearer status visibility.</p>
+                      </div>
+                    </div>
+                    <div class="hiwCodeBody">
+                      <p class="hiwCodeStepsHeading">Step Flow</p>
+                      <div class="hiwCodeSteps">
+                        <For each={item().howItWorksSteps}>
+                          {(step, idx) => (
+                            <div class={`hiwCodeStep ${idx() === activeHowStep() ? 'hiwCodeStepActive' : ''}`}>
+                              <span class="hiwCodeStepNum">{idx() + 1}</span>
+                              <div>
+                                <h4 class="hiwCodeStepTitle">{step.title}</h4>
+                                <p class="hiwCodeStepDesc">{step.description}</p>
+                              </div>
+                            </div>
+                          )}
+                        </For>
+                      </div>
+                    </div>
+                  </article>
+                </div>
+              </section>
+
+              <section class="public-section lp-section">
+                <div class="container panel panel-dark">
+                  <div class="section-head">
+                    <div>
+                      <h2>{item().whyChooseTitle}</h2>
+                      <p class="sub">Trust-led workflow advantages that improve consistency and first-contact confidence.</p>
+                    </div>
+                  </div>
+                  <div class="benefit-grid">
+                    <For each={item().whyChooseCards}>
+                      {(line, idx) => (
+                        <article class="benefit-card">
+                          <div class="benefit-head">
+                            <span class="role-card-icon role-card-icon-dark"><SectionGlyph kind="why" /></span>
+                            <span class="benefit-index">Advantage {String(idx() + 1).padStart(2, '0')}</span>
+                          </div>
+                          <h3>{splitLine(line).title}</h3>
+                          <span class="benefit-divider" />
+                          <p>{splitLine(line).body}</p>
+                        </article>
+                      )}
+                    </For>
+                  </div>
+                </div>
+              </section>
+
+              <section class="public-section lp-section">
+                <div class="container panel choose-path-panel">
+                  <div class="section-head">
+                    <div>
+                      <h2>Getting started checklist</h2>
+                      <p class="sub">Use this launch sequence to improve profile quality and conversion outcomes from day one.</p>
+                    </div>
+                  </div>
+                  <div class="launch-grid">
+                    <article class="launch-panel">
+                      <div class="launch-panel-head">
+                        <span class="role-card-icon role-card-icon-light"><SectionGlyph kind="check" /></span>
+                        <div>
+                          <p class="launch-kicker">Checklist</p>
+                          <h3>Complete these first</h3>
+                        </div>
+                      </div>
+                      <ol class="launch-list">
+                        <For each={roleChecklist}>
+                          {(line, idx) => (
+                            <li>
+                              <span class="launch-step">{String(idx() + 1).padStart(2, '0')}</span>
+                              <p>{line}</p>
+                            </li>
+                          )}
+                        </For>
+                      </ol>
+                    </article>
+                    <article class="launch-panel launch-panel-outcomes">
+                      <div class="launch-panel-head">
+                        <span class="role-card-icon role-card-icon-light"><SectionGlyph kind="outcome" /></span>
+                        <div>
+                          <p class="launch-kicker">Outcomes</p>
+                          <h3>Platform outcomes you can expect</h3>
+                        </div>
+                      </div>
+                      <div class="outcome-grid">
+                        <For each={roleOutcomes}>
+                          {(line) => (
+                            <article class="outcome-tile">
+                              <span class="outcome-dot" />
+                              <p>{line}</p>
+                            </article>
+                          )}
+                        </For>
+                      </div>
+                    </article>
+                  </div>
+                </div>
+              </section>
+
+              <section class="public-section lp-section landing-faq-section">
+                <div class="container panel panel-dark faq-wrap">
+                  <h2 class="center">{item().shortTitle} FAQs</h2>
+                  <div class="faq-list">
+                    <For each={item().faqs}>
+                      {(faq, idx) => (
+                        <article class={`faq-item ${openFaqIdx() === idx() ? 'open' : ''}`}>
+                          <button class="faq-q" type="button" onClick={() => setOpenFaqIdx((prev) => (prev === idx() ? -1 : idx()))}>
+                            <span>{faq.q}</span>
+                            <span class={`faq-q-icon ${openFaqIdx() === idx() ? 'open' : ''}`}>⌄</span>
+                          </button>
+                          <Show when={openFaqIdx() === idx()}>
+                            <p class="faq-a">{faq.a}</p>
+                          </Show>
+                        </article>
+                      )}
+                    </For>
+                  </div>
+                </div>
+              </section>
+
+              <section class="public-section lp-section">
+                <div class="container panel panel-dark cta-panel">
+                  <div class="cta-copy">
+                    <p class="eyebrow">Start now</p>
+                    <h2>{item().finalCtaHeading}</h2>
+                    <p class="sub">{item().finalCtaSupport}</p>
+                    <div class="pro-detail-cta-points">
+                      <span>Single account</span>
+                      <span>Role visibility</span>
+                      <span>Trust approvals</span>
+                    </div>
+                  </div>
+                  <div class="hero-actions cta-actions">
+                    <A class="lp-primary-btn pulse" href={item().finalPrimaryCta.href}>{item().finalPrimaryCta.label}</A>
+                    <A class="lp-ghost-btn lp-ghost-btn-dark" href={item().finalSecondaryCta.href}>{item().finalSecondaryCta.label}</A>
+                  </div>
+                </div>
+              </section>
+            </>
+          )}
+        </Show>
+
+        <PublicFooter />
+      </div>
+    </main>
+  );
+}
diff --git a/src/data/help-center-seed.ts b/src/data/help-center-seed.ts
new file mode 100644
index 0000000..a6c0306
--- /dev/null
+++ b/src/data/help-center-seed.ts
@@ -0,0 +1,395 @@
+export type SeedHelpCategory = {
+  id: string;
+  key: string;
+  title: string;
+};
+
+export type SeedHelpArticle = {
+  id: string;
+  slug: string;
+  title: string;
+  summary: string;
+  categoryKey: string;
+  category: string;
+  role: 'ALL' | 'company' | 'jobSeeker' | 'professional' | 'customer' | 'platform';
+  tags: string[];
+  updatedAt: string;
+  content: string;
+};
+
+export const HELP_CENTER_SEED_CATEGORIES: SeedHelpCategory[] = [
+  { id: 'seed-cat-getting-started', key: 'getting-started', title: 'Getting Started' },
+  { id: 'seed-cat-account-login', key: 'account-login', title: 'Account & Login' },
+  { id: 'seed-cat-profile-verification', key: 'profile-verification', title: 'Profile & Verification' },
+  { id: 'seed-cat-platform-basics', key: 'platform-basics', title: 'Platform Basics' },
+  { id: 'seed-cat-jobs-applications', key: 'jobs-applications', title: 'Jobs & Applications' },
+  { id: 'seed-cat-leads-requests', key: 'leads-requests', title: 'Leads & Requests' },
+  { id: 'seed-cat-tracecoins-billing', key: 'tracecoins-billing', title: 'TraceCoins & Billing' },
+  { id: 'seed-cat-privacy-safety', key: 'privacy-safety', title: 'Privacy & Safety' },
+  { id: 'seed-cat-troubleshooting', key: 'troubleshooting', title: 'Troubleshooting' },
+];
+
+const updatedAt = '2026-04-06T00:00:00.000Z';
+
+export const HELP_CENTER_SEED_ARTICLES: SeedHelpArticle[] = [
+  {
+    id: 'seed-1',
+    slug: 'create-account-3-steps',
+    title: 'Create your Nxtgauge account in 3 steps',
+    summary: 'Quick steps to sign up, verify, and get ready for your role journey.',
+    categoryKey: 'getting-started',
+    category: 'Getting Started',
+    role: 'ALL',
+    tags: ['account', 'signup', 'getting started'],
+    updatedAt,
+    content: 'Step 1: Sign up with your email or mobile number.\n\nStep 2: Verify OTP and complete basic account details.\n\nStep 3: Continue to role setup and complete your profile.',
+  },
+  {
+    id: 'seed-2',
+    slug: 'choose-role-after-signup',
+    title: 'Choose your role after signup',
+    summary: 'You can create one account first and activate the role path later.',
+    categoryKey: 'getting-started',
+    category: 'Getting Started',
+    role: 'ALL',
+    tags: ['role', 'signup'],
+    updatedAt,
+    content: 'Nxtgauge supports one account with role-based journeys.\n\nAfter signup, choose the role flow you need: company, professional, job seeker, or customer.',
+  },
+  {
+    id: 'seed-3',
+    slug: 'understand-account-statuses',
+    title: 'Understand account statuses: Draft, Review, Approved',
+    summary: 'Learn what each status means and what to do next.',
+    categoryKey: 'getting-started',
+    category: 'Getting Started',
+    role: 'ALL',
+    tags: ['status', 'approval'],
+    updatedAt,
+    content: 'Draft means incomplete.\n\nReview means your submission is being checked.\n\nApproved means your profile or listing is visible in discovery.',
+  },
+  {
+    id: 'seed-4',
+    slug: 'how-nxtgauge-platform-works',
+    title: 'How the Nxtgauge platform works',
+    summary: 'A trust-led submission, review, approval, and discovery workflow.',
+    categoryKey: 'platform-basics',
+    category: 'Platform Basics',
+    role: 'platform',
+    tags: ['workflow', 'trust'],
+    updatedAt,
+    content: 'Users submit profiles, requirements, or jobs.\n\nNxtgauge verifies submissions.\n\nApproved records become visible for discovery and matching.',
+  },
+  {
+    id: 'seed-5',
+    slug: 'one-account-multiple-journeys',
+    title: 'One account, multiple journeys explained',
+    summary: 'Use one account and activate the journey you need.',
+    categoryKey: 'platform-basics',
+    category: 'Platform Basics',
+    role: 'platform',
+    tags: ['account', 'roles'],
+    updatedAt,
+    content: 'You do not need separate accounts for each role.\n\nKeep each role profile complete for better matching quality.',
+  },
+  {
+    id: 'seed-6',
+    slug: 'review-approval-improve-trust',
+    title: 'How review and approval improve trust',
+    summary: 'Approval checkpoints reduce noise and increase confidence.',
+    categoryKey: 'platform-basics',
+    category: 'Platform Basics',
+    role: 'platform',
+    tags: ['review', 'approval', 'trust'],
+    updatedAt,
+    content: 'Review and approval reduce low-quality submissions.\n\nThis creates cleaner discovery and better first-contact confidence.',
+  },
+  {
+    id: 'seed-7',
+    slug: 'track-progress-without-confusion',
+    title: 'How to track progress without confusion',
+    summary: 'Use clear status labels and next actions from your dashboard.',
+    categoryKey: 'platform-basics',
+    category: 'Platform Basics',
+    role: 'ALL',
+    tags: ['tracking', 'status'],
+    updatedAt,
+    content: 'Check status labels daily.\n\nRespond quickly to changes.\n\nFollow the next action shown in your panel.',
+  },
+  {
+    id: 'seed-8',
+    slug: 'platform-terms-simple-words',
+    title: 'Common platform terms in simple words',
+    summary: 'A quick glossary for Draft, Review, Approved, Requirement, and Lead.',
+    categoryKey: 'platform-basics',
+    category: 'Platform Basics',
+    role: 'ALL',
+    tags: ['glossary', 'terms'],
+    updatedAt,
+    content: 'Draft: incomplete.\n\nReview: in verification.\n\nApproved: visible in platform.\n\nRequirement: customer need.\n\nLead: potential opportunity.',
+  },
+  {
+    id: 'seed-9',
+    slug: 'get-better-platform-visibility',
+    title: 'How to get better platform visibility',
+    summary: 'Practical profile improvements that increase discovery quality.',
+    categoryKey: 'platform-basics',
+    category: 'Platform Basics',
+    role: 'ALL',
+    tags: ['visibility', 'profile'],
+    updatedAt,
+    content: 'Complete profile fields, clarify scope, and keep proof updated.\n\nClear profiles usually perform better in discovery.',
+  },
+  {
+    id: 'seed-10',
+    slug: 'reset-password',
+    title: 'How to reset your password',
+    summary: 'Use the forgot password flow and verify securely with OTP.',
+    categoryKey: 'account-login',
+    category: 'Account & Login',
+    role: 'ALL',
+    tags: ['password', 'login'],
+    updatedAt,
+    content: 'Use Forgot Password on the login screen.\n\nVerify OTP and set a new secure password.',
+  },
+  {
+    id: 'seed-11',
+    slug: 'otp-failure-reasons',
+    title: 'Why your login OTP might fail',
+    summary: 'Common OTP failures and quick retry guidance.',
+    categoryKey: 'account-login',
+    category: 'Account & Login',
+    role: 'ALL',
+    tags: ['otp', 'login'],
+    updatedAt,
+    content: 'OTP can fail due to expiry, wrong input, or network delays.\n\nRequest a fresh OTP and retry.',
+  },
+  {
+    id: 'seed-12',
+    slug: 'update-email-phone',
+    title: 'Update email or phone on your account',
+    summary: 'How to request secure account contact updates.',
+    categoryKey: 'account-login',
+    category: 'Account & Login',
+    role: 'ALL',
+    tags: ['account', 'security'],
+    updatedAt,
+    content: 'Go to account settings and submit an update request.\n\nSome changes may require re-verification.',
+  },
+  {
+    id: 'seed-13',
+    slug: 'high-conversion-profile',
+    title: 'How to complete a high-conversion profile',
+    summary: 'Role clarity, scope, portfolio proof, and pricing structure tips.',
+    categoryKey: 'profile-verification',
+    category: 'Profile & Verification',
+    role: 'professional',
+    tags: ['profile', 'conversion'],
+    updatedAt,
+    content: 'Add clear role scope, location, portfolio proof, and service details.\n\nClear profiles get better-fit responses.',
+  },
+  {
+    id: 'seed-14',
+    slug: 'verification-checklist-before-submit',
+    title: 'Verification checklist before submission',
+    summary: 'Use this checklist to reduce correction loops.',
+    categoryKey: 'profile-verification',
+    category: 'Profile & Verification',
+    role: 'ALL',
+    tags: ['verification', 'checklist'],
+    updatedAt,
+    content: 'Check identity fields, category fit, proof quality, and profile completeness before submission.',
+  },
+  {
+    id: 'seed-15',
+    slug: 'verification-timeline-24-48-hours',
+    title: 'Expected verification timeline (24-48 hours)',
+    summary: 'What is normal and what can delay review outcomes.',
+    categoryKey: 'profile-verification',
+    category: 'Profile & Verification',
+    role: 'ALL',
+    tags: ['verification', 'timeline'],
+    updatedAt,
+    content: 'Most profile reviews complete within 24-48 hours.\n\nComplex or incomplete submissions can take longer.',
+  },
+  {
+    id: 'seed-16',
+    slug: 'verification-sent-back-correction',
+    title: 'Why verification was sent back for correction',
+    summary: 'Top reasons for correction requests and how to fix quickly.',
+    categoryKey: 'profile-verification',
+    category: 'Profile & Verification',
+    role: 'ALL',
+    tags: ['verification', 'correction'],
+    updatedAt,
+    content: 'Corrections happen when data is missing, unclear, mismatched, or unsupported.\n\nUpdate details and resubmit.',
+  },
+  {
+    id: 'seed-17',
+    slug: 'companies-post-jobs-correctly',
+    title: 'How companies can post jobs correctly',
+    summary: 'Improve candidate quality with clear role details.',
+    categoryKey: 'jobs-applications',
+    category: 'Jobs & Applications',
+    role: 'company',
+    tags: ['jobs', 'company'],
+    updatedAt,
+    content: 'Use clear job titles, responsibilities, compensation, location, and timeline.\n\nGood clarity improves candidate relevance.',
+  },
+  {
+    id: 'seed-18',
+    slug: 'track-application-status',
+    title: 'How job seekers can track application status',
+    summary: 'Understand submitted, viewed, shortlisted, and closed states.',
+    categoryKey: 'jobs-applications',
+    category: 'Jobs & Applications',
+    role: 'jobSeeker',
+    tags: ['application', 'job seeker'],
+    updatedAt,
+    content: 'Check your applications panel for status changes.\n\nKeep your profile updated to support faster responses.',
+  },
+  {
+    id: 'seed-19',
+    slug: 'improve-application-quality',
+    title: 'How to improve job application quality',
+    summary: 'Simple ways to increase first-pass quality.',
+    categoryKey: 'jobs-applications',
+    category: 'Jobs & Applications',
+    role: 'jobSeeker',
+    tags: ['application', 'quality'],
+    updatedAt,
+    content: 'Tailor profile details to each role and add relevant work proof where possible.',
+  },
+  {
+    id: 'seed-20',
+    slug: 'handle-duplicate-irrelevant-leads',
+    title: 'Handling duplicate or irrelevant leads',
+    summary: 'Reduce noise with better targeting and filters.',
+    categoryKey: 'leads-requests',
+    category: 'Leads & Requests',
+    role: 'professional',
+    tags: ['leads', 'filters'],
+    updatedAt,
+    content: 'Use lead filters and quick decline flows for low-fit requests.\n\nImprove profile targeting to reduce irrelevant leads.',
+  },
+  {
+    id: 'seed-21',
+    slug: 'best-response-window-lead-conversion',
+    title: 'Best response window for higher lead conversion',
+    summary: 'Speed and clarity can improve first-contact outcomes.',
+    categoryKey: 'leads-requests',
+    category: 'Leads & Requests',
+    role: 'professional',
+    tags: ['conversion', 'response'],
+    updatedAt,
+    content: 'Respond early with clear scope and timeline.\n\nStructured replies usually perform better.',
+  },
+  {
+    id: 'seed-22',
+    slug: 'organize-customer-requests',
+    title: 'How to organize incoming customer requests',
+    summary: 'Prioritization methods for faster handling.',
+    categoryKey: 'leads-requests',
+    category: 'Leads & Requests',
+    role: 'professional',
+    tags: ['requests', 'workflow'],
+    updatedAt,
+    content: 'Tag requests by urgency, scope, and budget.\n\nPrioritize high-fit requests first.',
+  },
+  {
+    id: 'seed-23',
+    slug: 'what-are-tracecoins',
+    title: 'What are TraceCoins and where they are used',
+    summary: 'TraceCoins are platform credits used in selected flows.',
+    categoryKey: 'tracecoins-billing',
+    category: 'TraceCoins & Billing',
+    role: 'ALL',
+    tags: ['tracecoins', 'billing'],
+    updatedAt,
+    content: 'TraceCoins are credits for selected premium interactions and utilities inside the platform.',
+  },
+  {
+    id: 'seed-24',
+    slug: 'view-invoices-payment-history',
+    title: 'How to view invoices and payment history',
+    summary: 'Where to find transaction records and billing references.',
+    categoryKey: 'tracecoins-billing',
+    category: 'TraceCoins & Billing',
+    role: 'ALL',
+    tags: ['invoice', 'payments'],
+    updatedAt,
+    content: 'Open billing settings to view purchase records and invoice history.',
+  },
+  {
+    id: 'seed-25',
+    slug: 'refund-failed-payment-guidance',
+    title: 'Refund and failed payment guidance',
+    summary: 'What to do first when transactions fail or remain pending.',
+    categoryKey: 'tracecoins-billing',
+    category: 'TraceCoins & Billing',
+    role: 'ALL',
+    tags: ['refund', 'payment'],
+    updatedAt,
+    content: 'Check payment status first, then raise support with transaction reference if needed.',
+  },
+  {
+    id: 'seed-26',
+    slug: 'report-suspicious-activity',
+    title: 'How to report suspicious activity',
+    summary: 'Raise reports quickly and include useful evidence.',
+    categoryKey: 'privacy-safety',
+    category: 'Privacy & Safety',
+    role: 'ALL',
+    tags: ['safety', 'report'],
+    updatedAt,
+    content: 'Use report actions on profiles or listings and include evidence to help faster review.',
+  },
+  {
+    id: 'seed-27',
+    slug: 'manage-privacy-settings',
+    title: 'Managing privacy settings for your account',
+    summary: 'Control profile visibility and communication preferences.',
+    categoryKey: 'privacy-safety',
+    category: 'Privacy & Safety',
+    role: 'ALL',
+    tags: ['privacy', 'settings'],
+    updatedAt,
+    content: 'Adjust profile visibility and notification preferences from account settings.',
+  },
+  {
+    id: 'seed-28',
+    slug: 'account-safety-best-practices',
+    title: 'Account safety best practices',
+    summary: 'Simple security habits to protect your account.',
+    categoryKey: 'privacy-safety',
+    category: 'Privacy & Safety',
+    role: 'ALL',
+    tags: ['security', 'account'],
+    updatedAt,
+    content: 'Use strong passwords, rotate credentials, and never share OTP codes.',
+  },
+  {
+    id: 'seed-29',
+    slug: 'fix-profile-image-upload-issues',
+    title: 'Fix profile image or upload issues',
+    summary: 'Common upload fixes and file readiness checks.',
+    categoryKey: 'troubleshooting',
+    category: 'Troubleshooting',
+    role: 'ALL',
+    tags: ['upload', 'profile image'],
+    updatedAt,
+    content: 'Try supported formats, smaller file sizes, and stable network before retrying upload.',
+  },
+  {
+    id: 'seed-30',
+    slug: 'dashboard-data-not-refreshing',
+    title: 'What to do if dashboard data does not refresh',
+    summary: 'Quick checks for stale status or delayed updates.',
+    categoryKey: 'troubleshooting',
+    category: 'Troubleshooting',
+    role: 'ALL',
+    tags: ['dashboard', 'refresh'],
+    updatedAt,
+    content: 'Refresh session, confirm active role context, and retry.\n\nIf issue persists, contact support with exact status details.',
+  },
+];
diff --git a/src/lib/help-center.ts b/src/lib/help-center.ts
index 18ba638..17803c9 100644
--- a/src/lib/help-center.ts
+++ b/src/lib/help-center.ts
@@ -1,3 +1,5 @@
+import { HELP_CENTER_SEED_ARTICLES, HELP_CENTER_SEED_CATEGORIES } from '~/data/help-center-seed';
+
 export type HelpArticle = {
   id: string;
   slug: string;
@@ -31,39 +33,78 @@ export async function fetchHelpCenterArticles(input: {
 
   try {
     const res = await fetch(`/api/kb/articles?${params.toString()}`);
-    if (!res.ok) return [];
+    if (!res.ok) return filterArticles(HELP_CENTER_SEED_ARTICLES as HelpArticle[], input);
     const data = await res.json();
     const raw: any[] = Array.isArray(data) ? data : (data.articles ?? []);
-    return raw.map(normalizeArticle);
+    let items = raw.map(normalizeArticle);
+
+    // Fallback: when backend search returns sparse/empty data, apply local filtering
+    // so users can still find articles by simple keywords.
+    if (input.q && items.length === 0) {
+      const allRes = await fetch('/api/kb/articles');
+      if (allRes.ok) {
+        const allData = await allRes.json();
+        const allRaw: any[] = Array.isArray(allData) ? allData : (allData.articles ?? []);
+        items = allRaw.map(normalizeArticle);
+      }
+    }
+
+    if (items.length === 0) {
+      items = HELP_CENTER_SEED_ARTICLES as HelpArticle[];
+    }
+
+    return filterArticles(items, input);
   } catch {
-    return [];
+    return filterArticles(HELP_CENTER_SEED_ARTICLES as HelpArticle[], input);
   }
 }
 
 export async function fetchHelpCenterCategories(): Promise<HelpCategory[]> {
   try {
     const res = await fetch('/api/kb/categories');
-    if (!res.ok) return [];
+    if (!res.ok) return HELP_CENTER_SEED_CATEGORIES;
     const data = await res.json();
     const raw: any[] = Array.isArray(data) ? data : (data.categories ?? []);
-    return raw.map((c) => ({
+    const mapped = raw.map((c) => ({
       id: c.id,
-      key: c.slug,
-      title: c.name,
+      key: c.slug ?? c.key,
+      title: c.name ?? c.title,
     }));
+    return mapped.length > 0 ? mapped : HELP_CENTER_SEED_CATEGORIES;
   } catch {
-    return [];
+    return HELP_CENTER_SEED_CATEGORIES;
   }
 }
 
 export async function fetchArticleBySlug(slug: string): Promise<HelpArticle | null> {
   try {
     const res = await fetch(`/api/kb/articles/${slug}`);
-    if (!res.ok) return null;
+    if (!res.ok) return (HELP_CENTER_SEED_ARTICLES as HelpArticle[]).find((a) => a.slug === slug) ?? null;
     const data = await res.json();
-    return normalizeArticle(data);
+    const normalized = normalizeArticle(data);
+    if (!normalized.slug) {
+      return (HELP_CENTER_SEED_ARTICLES as HelpArticle[]).find((a) => a.slug === slug) ?? null;
+    }
+    return normalized;
   } catch {
-    return null;
+    return (HELP_CENTER_SEED_ARTICLES as HelpArticle[]).find((a) => a.slug === slug) ?? null;
+  }
+}
+
+export async function fetchRelatedArticles(input: {
+  article: HelpArticle;
+  limit?: number;
+}): Promise<HelpArticle[]> {
+  try {
+    const res = await fetch('/api/kb/articles');
+    if (!res.ok) return pickRelated(HELP_CENTER_SEED_ARTICLES as HelpArticle[], input.article, input.limit ?? 4);
+    const data = await res.json();
+    const raw: any[] = Array.isArray(data) ? data : (data.articles ?? []);
+    const all = raw.map(normalizeArticle);
+    if (all.length === 0) return pickRelated(HELP_CENTER_SEED_ARTICLES as HelpArticle[], input.article, input.limit ?? 4);
+    return pickRelated(all, input.article, input.limit ?? 4);
+  } catch {
+    return pickRelated(HELP_CENTER_SEED_ARTICLES as HelpArticle[], input.article, input.limit ?? 4);
   }
 }
 
@@ -98,3 +139,40 @@ export function listHelpCenterCategories(): HelpCategory[] {
 export function getArticleBySlug(_slug: string): HelpArticle | null {
   return null;
 }
+
+function articleMatchesQuery(article: HelpArticle, needle: string): boolean {
+  const haystack = [article.title, article.summary, article.content, article.category, article.categoryKey, article.tags.join(' ')].join(' ').toLowerCase();
+  return haystack.includes(needle);
+}
+
+function filterArticles(items: HelpArticle[], input: { role?: string; categoryKey?: string; q?: string }): HelpArticle[] {
+  let filtered = items;
+
+  if (input.role && input.role !== 'ALL') {
+    const roleNeedle = input.role.toLowerCase();
+    filtered = filtered.filter((a) => a.role === 'ALL' || String(a.role).toLowerCase() === roleNeedle);
+  }
+
+  if (input.categoryKey) {
+    const needle = input.categoryKey.toLowerCase();
+    filtered = filtered.filter((a) => [a.categoryKey, a.category].some((v) => (v || '').toLowerCase().includes(needle)));
+  }
+
+  if (input.q) {
+    const needle = input.q.toLowerCase();
+    filtered = filtered.filter((a) => articleMatchesQuery(a, needle));
+  }
+
+  return filtered;
+}
+
+function pickRelated(allItems: HelpArticle[], current: HelpArticle, limit: number): HelpArticle[] {
+  const all = allItems.filter((a) => a.slug !== current.slug);
+  const sameCategory = all.filter((a) => {
+    const left = `${a.categoryKey}|${a.category}`.toLowerCase();
+    const right = `${current.categoryKey}|${current.category}`.toLowerCase();
+    return left && right && left === right;
+  });
+  const fallback = all.filter((a) => !sameCategory.some((x) => x.slug === a.slug));
+  return [...sameCategory, ...fallback].slice(0, limit);
+}
diff --git a/src/lib/professionals.ts b/src/lib/professionals.ts
new file mode 100644
index 0000000..bc2d442
--- /dev/null
+++ b/src/lib/professionals.ts
@@ -0,0 +1,187 @@
+export type ProfessionalCategory = 'tech' | 'creative' | 'education' | 'wellness' | 'events' | 'marketing';
+
+export type ProfessionalPageContent = {
+  slug: string;
+  roleKey: string;
+  title: string;
+  shortTitle: string;
+  heroTitle: string;
+  heroDescription: string;
+  image: string;
+  category: ProfessionalCategory;
+  benefits: string[];
+  offerHighlights: string[];
+  faqs: Array<{ q: string; a: string }>;
+};
+
+export const professionalPages: ProfessionalPageContent[] = [
+  {
+    slug: 'developer',
+    roleKey: 'DEVELOPER',
+    title: 'Developer Professionals',
+    shortTitle: 'Developer',
+    heroTitle: 'Get verified development opportunities with clear project scope.',
+    heroDescription: 'Join Nxtgauge as a Developer and connect with customers and companies through a trust-first workflow.',
+    image: 'https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=1200&auto=format&fit=crop',
+    category: 'tech',
+    benefits: ['Verified client requirements', 'Structured project details before outreach', 'Clear status tracking for requests and approvals'],
+    offerHighlights: ['Build your trusted developer profile', 'Respond to relevant, role-matched opportunities', 'Grow with less marketplace noise'],
+    faqs: [
+      { q: 'Who should join this page?', a: 'Developers looking for verified client demand and structured project discovery.' },
+      { q: 'How do opportunities stay high quality?', a: 'Requirements and profiles flow through review checkpoints before they become visible.' },
+    ],
+  },
+  {
+    slug: 'photographer',
+    roleKey: 'PHOTOGRAPHER',
+    title: 'Photographer Professionals',
+    shortTitle: 'Photographer',
+    heroTitle: 'Show your portfolio to verified customers and event-focused demand.',
+    heroDescription: 'Join as a Photographer and receive opportunities where trust and profile quality matter.',
+    image: 'https://images.unsplash.com/photo-1516035069371-29a1b244cc32?q=80&w=1200&auto=format&fit=crop',
+    category: 'creative',
+    benefits: ['Verified requirement flow', 'Profile-led visibility', 'Cleaner discovery for event and brand shoots'],
+    offerHighlights: ['Build a trustworthy public profile', 'Get discovered by relevant customer needs', 'Track every response in one workflow'],
+    faqs: [
+      { q: 'Can I highlight specialization?', a: 'Yes. Your profile setup helps present service type and strengths clearly.' },
+      { q: 'Why is verification useful for photographers?', a: 'It reduces spam and improves confidence for both professionals and customers.' },
+    ],
+  },
+  {
+    slug: 'makeup-artist',
+    roleKey: 'MAKEUP_ARTIST',
+    title: 'Makeup Artist Professionals',
+    shortTitle: 'Makeup Artist',
+    heroTitle: 'Grow your makeup services with trusted profile-based discovery.',
+    heroDescription: 'Join Nxtgauge as a Makeup Artist and connect with verified requirements from customers and event planners.',
+    image: 'https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?q=80&w=1200&auto=format&fit=crop',
+    category: 'creative',
+    benefits: ['Verified service requests', 'Cleaner lead quality', 'Role-relevant visibility for styling work'],
+    offerHighlights: ['Create a strong professional profile', 'Respond to approved demand', 'Track status without confusion'],
+    faqs: [
+      { q: 'Is this for freelance artists only?', a: 'It works for freelance and studio-aligned professionals.' },
+      { q: 'What is the biggest advantage here?', a: 'Trust-led discovery reduces low-intent requests and improves match quality.' },
+    ],
+  },
+  {
+    slug: 'tutor',
+    roleKey: 'TUTOR',
+    title: 'Tutor Professionals',
+    shortTitle: 'Tutor',
+    heroTitle: 'Reach serious learners through a trusted tutoring discovery flow.',
+    heroDescription: 'Join as a Tutor to receive verified educational requirements and present your profile with confidence.',
+    image: 'https://images.unsplash.com/photo-1497633762265-9d179a990aa6?q=80&w=1200&auto=format&fit=crop',
+    category: 'education',
+    benefits: ['Verified learner requirements', 'Structured profile presentation', 'Focused subject-based discovery'],
+    offerHighlights: ['Show your strengths and teaching profile', 'Get matched to relevant demand', 'Manage responses with transparent status'],
+    faqs: [
+      { q: 'Can tutors from different subjects join?', a: 'Yes. The role is designed for broad education categories and specialization.' },
+      { q: 'How does trust help tutoring?', a: 'It improves confidence and reduces low-quality demand signals.' },
+    ],
+  },
+  {
+    slug: 'video-editor',
+    roleKey: 'VIDEO_EDITOR',
+    title: 'Video Editor Professionals',
+    shortTitle: 'Video Editor',
+    heroTitle: 'Find better-fit editing opportunities through verified demand.',
+    heroDescription: 'Join as a Video Editor and connect with customers and companies through a review-based trust model.',
+    image: 'https://images.unsplash.com/photo-1574717024653-61fd2cf4d44d?q=80&w=1200&auto=format&fit=crop',
+    category: 'creative',
+    benefits: ['Verified project requirements', 'Better fit between role and demand', 'Clear, trackable opportunity states'],
+    offerHighlights: ['Build a strong editing profile', 'Respond to trusted opportunities', 'Work with less marketplace noise'],
+    faqs: [
+      { q: 'Does this support freelance editors?', a: 'Yes. Freelancers can join and grow through verified opportunity discovery.' },
+      { q: 'Why not a normal listing marketplace?', a: 'Nxtgauge emphasizes trust checks before visibility for better quality interactions.' },
+    ],
+  },
+  {
+    slug: 'graphic-designer',
+    roleKey: 'GRAPHIC_DESIGNER',
+    title: 'Graphic Designer Professionals',
+    shortTitle: 'Graphic Designer',
+    heroTitle: 'Grow design demand through trust-first profile visibility.',
+    heroDescription: 'Join as a Graphic Designer to connect with verified requirements and role-relevant opportunities.',
+    image: 'https://images.unsplash.com/photo-1558655146-d09347e92766?q=80&w=1200&auto=format&fit=crop',
+    category: 'creative',
+    benefits: ['Verified design requests', 'Structured profile and credibility flow', 'Cleaner matching by role and requirement'],
+    offerHighlights: ['Show your design strengths clearly', 'Respond to approved opportunities', 'Track engagement in one place'],
+    faqs: [
+      { q: 'Can brand and social designers both use this?', a: 'Yes. The role supports multiple design demand contexts.' },
+      { q: 'What makes this trustworthy?', a: 'Approval and review checkpoints help reduce fake or low-quality submissions.' },
+    ],
+  },
+  {
+    slug: 'social-media-manager',
+    roleKey: 'SOCIAL_MEDIA_MANAGER',
+    title: 'Social Media Manager Professionals',
+    shortTitle: 'Social Media Manager',
+    heroTitle: 'Access verified social growth opportunities with clearer demand signals.',
+    heroDescription: 'Join as a Social Media Manager and grow with trusted customer and company requirements.',
+    image: 'https://images.unsplash.com/photo-1611162618071-b39a2ec055fb?q=80&w=1200&auto=format&fit=crop',
+    category: 'marketing',
+    benefits: ['Verified campaign requirements', 'Role-specific discovery experience', 'Transparent status flow for responses'],
+    offerHighlights: ['Build a profile clients can trust', 'Respond to relevant campaign demand', 'Manage opportunity updates with clarity'],
+    faqs: [
+      { q: 'Is this useful for independent consultants?', a: 'Yes. It supports independent social media professionals and teams.' },
+      { q: 'How is demand quality maintained?', a: 'Review-oriented workflow helps surface more reliable opportunities.' },
+    ],
+  },
+  {
+    slug: 'fitness-trainer',
+    roleKey: 'FITNESS_TRAINER',
+    title: 'Fitness Trainer Professionals',
+    shortTitle: 'Fitness Trainer',
+    heroTitle: 'Connect with verified fitness demand and build trust quickly.',
+    heroDescription: 'Join as a Fitness Trainer and grow through profile-led visibility in a trust-first marketplace.',
+    image: 'https://images.unsplash.com/photo-1517836357463-d25dfeac3438?q=80&w=1200&auto=format&fit=crop',
+    category: 'wellness',
+    benefits: ['Verified customer requirements', 'Cleaner demand discovery', 'Better trust signals for first-time clients'],
+    offerHighlights: ['Create a strong trainer profile', 'Engage with trusted requirement flow', 'Track request movement clearly'],
+    faqs: [
+      { q: 'Is this only for gym trainers?', a: 'No. It supports trainers across formats and specializations.' },
+      { q: 'Why does verification matter for this role?', a: 'It improves confidence for customers and reduces low-intent interactions.' },
+    ],
+  },
+  {
+    slug: 'catering-services',
+    roleKey: 'CATERING_SERVICES',
+    title: 'Catering Service Professionals',
+    shortTitle: 'Catering Services',
+    heroTitle: 'Get discovered for events through verified requirement workflows.',
+    heroDescription: 'Join as a Catering Service professional and connect with trusted event demand.',
+    image: 'https://images.unsplash.com/photo-1555244162-803834f70033?q=80&w=1200&auto=format&fit=crop',
+    category: 'events',
+    benefits: ['Verified event requirements', 'Profile-first trust visibility', 'Better opportunity clarity before engagement'],
+    offerHighlights: ['Present your service profile with confidence', 'Respond to approved requirements', 'Track outcomes in one flow'],
+    faqs: [
+      { q: 'Can small catering teams join?', a: 'Yes. Both individual and team-based providers can join.' },
+      { q: 'What is the key benefit?', a: 'Higher confidence in demand quality through trusted workflows.' },
+    ],
+  },
+  {
+    slug: 'ugc-content-creator',
+    roleKey: 'UGC_CONTENT_CREATOR',
+    title: 'UGC Content Creator Professionals',
+    shortTitle: 'UGC Content Creator',
+    heroTitle: 'Find trusted brand collaboration demand with verified workflows.',
+    heroDescription: 'Join as a UGC Content Creator and grow with role-matched, quality-controlled opportunities.',
+    image: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?q=80&w=1200&auto=format&fit=crop',
+    category: 'marketing',
+    benefits: ['Verified campaign demand', 'Better matching for creator roles', 'Clear status visibility from request to response'],
+    offerHighlights: ['Build a trusted creator profile', 'Respond to approved opportunities', 'Scale with less discovery noise'],
+    faqs: [
+      { q: 'Is this focused on campaign-style work?', a: 'Yes. It is optimized for creator-brand collaboration demand.' },
+      { q: 'How does Nxtgauge help creators?', a: 'By emphasizing trust and verification before visibility and response cycles.' },
+    ],
+  },
+];
+
+export function getProfessionalBySlug(slug: string): ProfessionalPageContent | undefined {
+  return professionalPages.find((item) => item.slug === slug);
+}
+
+export function professionalSignupHref(roleKey: string): string {
+  return `/signup?intent=professional&role=${encodeURIComponent(roleKey)}`;
+}
+
diff --git a/src/lib/role-landings.ts b/src/lib/role-landings.ts
new file mode 100644
index 0000000..de166bf
--- /dev/null
+++ b/src/lib/role-landings.ts
@@ -0,0 +1,761 @@
+export type RoleLandingAudience = 'professional' | 'company' | 'customer' | 'job_seeker';
+
+export type RoleLandingContent = {
+  slug: string;
+  roleKey: string;
+  audience: RoleLandingAudience;
+  shortTitle: string;
+  heroEyebrow: string;
+  heroTitle: string;
+  heroDescription: string;
+  heroImage: string;
+  primaryCta: { label: string; href: string };
+  secondaryCta: { label: string; href: string };
+  whatYouGetTitle: string;
+  whatYouGetSubtitle: string;
+  whatYouGetCards: string[];
+  typicalLeftTitle: string;
+  typicalLeftItems: string[];
+  typicalRightTitle: string;
+  typicalRightItems: string[];
+  howItWorksTitle: string;
+  howItWorksSteps: Array<{ title: string; description: string }>;
+  whyChooseTitle: string;
+  whyChooseCards: string[];
+  faqs: Array<{ q: string; a: string }>;
+  finalCtaHeading: string;
+  finalCtaSupport: string;
+  finalPrimaryCta: { label: string; href: string };
+  finalSecondaryCta: { label: string; href: string };
+};
+
+export const roleTrustChips = [
+  '24-48h review',
+  'Role visibility',
+  'Trust approvals',
+  'Status tracking',
+] as const;
+
+export const roleValueProps = [
+  {
+    title: 'Profile Review with Real Checks',
+    body: 'Most profile reviews complete in 24-48 hours with clear approval outcomes.',
+  },
+  {
+    title: 'Approved-First Visibility',
+    body: 'Profiles, opportunities, or requirements move through trust checkpoints before discovery.',
+  },
+  {
+    title: 'Clear Status Tracking',
+    body: 'Track progress with less confusion and fewer dead ends.',
+  },
+] as const;
+
+export const roleChecklist = [
+  'Complete your role profile with service scope, location, and clear details',
+  'Add proof of work or supporting profile strength',
+  'Include package, pricing, or service structure where relevant',
+  'Submit for verification',
+  'Monitor status updates',
+  'Respond quickly to approved opportunities',
+] as const;
+
+export const roleOutcomes = [
+  'Trusted profile-led discovery',
+  'Better first-contact trust',
+  'Clearer request or opportunity tracking',
+  'More structured workflow visibility',
+  'Less confusion across stages',
+  'Stronger service or role presentation',
+] as const;
+
+const bySlug: Record<string, RoleLandingContent> = {
+  company: {
+    slug: 'company',
+    roleKey: 'COMPANY',
+    audience: 'company',
+    shortTitle: 'Company',
+    heroEyebrow: 'Company on Nxtgauge',
+    heroTitle: 'Post verified jobs and hire faster through a trust-first workflow',
+    heroDescription:
+      'Join Nxtgauge as a Company and publish job openings through a clearer, approval-led hiring journey. Build employer trust, present roles professionally, and attract better-fit applicants with less noise.',
+    heroImage: '/images/roles/company.jpg',
+    primaryCta: { label: 'Start as Company', href: '/signup?intent=company' },
+    secondaryCta: { label: 'View Open Role Paths', href: '/roles/job-seeker' },
+    whatYouGetTitle: 'What you get as a Company on Nxtgauge',
+    whatYouGetSubtitle: 'Practical platform value focused on stronger trust, clearer discovery, and better conversion quality.',
+    whatYouGetCards: [
+      'Verified job publishing - Create openings that move through trust and approval checkpoints before broad visibility.',
+      'Stronger employer presentation - Show your company profile, role context, and hiring intent more clearly.',
+      'Cleaner applicant flow - Reduce random applications and focus on more relevant candidate interest.',
+      'Status clarity - Track review, approval, and response stages with less confusion.',
+      'Better trust signals - Give applicants more confidence in the legitimacy of your openings.',
+      'Structured hiring setup - Present role type, compensation, expectations, and hiring process in one place.',
+    ],
+    typicalLeftTitle: 'Typical hiring needs from companies',
+    typicalLeftItems: ['Full-time hiring', 'Part-time hiring', 'Internship openings', 'Contract hiring', 'Project-based roles', 'Urgent replacement hiring'],
+    typicalRightTitle: 'What candidates usually expect',
+    typicalRightItems: ['Clear role title and responsibilities', 'Company credibility', 'Salary or compensation clarity', 'Work mode and location', 'Application timeline', 'Response visibility'],
+    howItWorksTitle: 'How joining as a Company works',
+    howItWorksSteps: [
+      { title: 'Create one account', description: 'Sign up once and start your employer journey.' },
+      { title: 'Complete your company profile', description: 'Add company details, hiring context, and business information.' },
+      { title: 'Post a job and submit for review', description: 'Openings move through approval before broader visibility.' },
+      { title: 'Track applicants and responses', description: 'Monitor status updates and manage hiring flow more clearly.' },
+    ],
+    whyChooseTitle: 'Why Companies choose Nxtgauge',
+    whyChooseCards: [
+      'Verified job environment - Helps your openings stand out from low-trust public listings.',
+      'Better-fit applicants - Supports clearer discovery for job seekers who match your needs.',
+      'More structured hiring flow - Gives your team a cleaner process from posting to response tracking.',
+    ],
+    faqs: [
+      { q: 'Can I post internships too?', a: 'Yes. Companies can present full-time, part-time, internship, and other role formats.' },
+      { q: 'Why is approval important for company listings?', a: 'It improves trust for applicants and helps reduce low-quality or misleading posts.' },
+      { q: 'Do I need a separate account for each role?', a: 'No. Nxtgauge supports one account with different role journeys.' },
+      { q: 'What should I include in a job post?', a: 'Add role title, location, work type, responsibilities, candidate expectations, and hiring details.' },
+      { q: 'How long does approval usually take?', a: 'Most profile or job-related approvals are completed within 24-48 hours.' },
+    ],
+    finalCtaHeading: 'Build your Company profile and unlock better-fit opportunities',
+    finalCtaSupport: 'One account. Clear verification path. Better visibility through trusted discovery.',
+    finalPrimaryCta: { label: 'Start as Company', href: '/signup?intent=company' },
+    finalSecondaryCta: { label: 'Explore Other Categories', href: '/professionals' },
+  },
+  customer: {
+    slug: 'customer',
+    roleKey: 'CUSTOMER',
+    audience: 'customer',
+    shortTitle: 'Customer',
+    heroEyebrow: 'Customer on Nxtgauge',
+    heroTitle: 'Post your requirement and discover verified professionals with less noise',
+    heroDescription:
+      'Join Nxtgauge as a Customer and find professionals through a trust-first requirement flow. Share what you need, move through quality checks, and get clearer responses from better-presented profiles.',
+    heroImage: '/images/roles/service_seeker.jpg',
+    primaryCta: { label: 'Start as Customer', href: '/signup?intent=customer' },
+    secondaryCta: { label: 'Hire a Professional', href: '/professionals' },
+    whatYouGetTitle: 'What you get as a Customer on Nxtgauge',
+    whatYouGetSubtitle: 'Practical platform value focused on stronger trust, clearer discovery, and better conversion quality.',
+    whatYouGetCards: [
+      'Verified requirement flow - Requirements move through review before broader discovery.',
+      'Better professional trust - See specialists with stronger profile and approval signals.',
+      'Cleaner discovery - Reduce random replies and focus on more relevant professionals.',
+      'Status visibility - Track how your request progresses and who responds.',
+      'Better first-contact confidence - Make decisions with clearer profile context.',
+      'Structured requirement posting - Present budget, timing, location, and scope in one flow.',
+    ],
+    typicalLeftTitle: 'Typical customer needs on Nxtgauge',
+    typicalLeftItems: ['Event-based services', 'Creative service hiring', 'Coaching and tutoring support', 'Home or lifestyle service needs', 'Business support requirements', 'Urgent specialist requests'],
+    typicalRightTitle: 'What customers usually want to compare',
+    typicalRightItems: ['Service fit', 'Availability', 'Location', 'Pricing or package structure', 'Trust signals', 'Communication clarity'],
+    howItWorksTitle: 'How joining as a Customer works',
+    howItWorksSteps: [
+      { title: 'Create one account', description: 'Sign up once and begin your customer path.' },
+      { title: 'Share your requirement', description: 'Add scope, budget, timing, and key details.' },
+      { title: 'Requirement review', description: 'Quality checks help improve trust before full discovery.' },
+      { title: 'Track responses', description: 'Monitor replies and request status more clearly.' },
+    ],
+    whyChooseTitle: 'Why Customers choose Nxtgauge',
+    whyChooseCards: [
+      'Verified specialist discovery - See professionals through a more trust-led system.',
+      'Cleaner response flow - Reduce confusion across replies and request stages.',
+      'Better fit before contact - Compare stronger profiles before moving ahead.',
+    ],
+    faqs: [
+      { q: 'Can I post any type of requirement?', a: 'You can post requirements that fit the supported categories and role flows on the platform.' },
+      { q: 'Why does review matter for customers?', a: 'It helps maintain trust, reduce fake activity, and improve discovery quality.' },
+      { q: 'Do I need to select one professional immediately?', a: 'No. You can review profiles and move based on fit and responses.' },
+      { q: 'What should I include in my requirement?', a: 'Add your goal, timing, location, budget, and anything important for matching.' },
+      { q: 'How long does approval usually take?', a: 'Most review or approval steps are completed within 24-48 hours.' },
+    ],
+    finalCtaHeading: 'Build your Customer profile and unlock better-fit opportunities',
+    finalCtaSupport: 'One account. Clear verification path. Better visibility through trusted discovery.',
+    finalPrimaryCta: { label: 'Start as Customer', href: '/signup?intent=customer' },
+    finalSecondaryCta: { label: 'Explore Other Categories', href: '/professionals' },
+  },
+  'job-seeker': {
+    slug: 'job-seeker',
+    roleKey: 'JOB_SEEKER',
+    audience: 'job_seeker',
+    shortTitle: 'Job Seeker',
+    heroEyebrow: 'Job Seeker on Nxtgauge',
+    heroTitle: 'Apply to approved opportunities with a stronger profile and clearer status flow',
+    heroDescription:
+      'Join Nxtgauge as a Job Seeker and move through a more structured job search experience. Build a trusted profile, apply to approved openings, and track your progress with better visibility.',
+    heroImage: '/images/roles/job_seeker.jpg',
+    primaryCta: { label: 'Start as Job Seeker', href: '/signup?intent=job_seeker' },
+    secondaryCta: { label: 'View Open Opportunities', href: '/roles/company' },
+    whatYouGetTitle: 'What you get as a Job Seeker on Nxtgauge',
+    whatYouGetSubtitle: 'Practical platform value focused on stronger trust, clearer discovery, and better conversion quality.',
+    whatYouGetCards: [
+      'Approved opportunity access - Browse job openings that sit inside a trust-first workflow.',
+      'Stronger candidate profile - Present experience, skills, and role interests more clearly.',
+      'Less application noise - Focus on verified openings instead of scattered low-context listings.',
+      'Status clarity - Understand where your profile and applications stand.',
+      'Better first impression - Use a stronger profile setup to improve employer confidence.',
+      'Structured role discovery - Explore openings by role, company intent, and fit.',
+    ],
+    typicalLeftTitle: 'Typical job paths on this role flow',
+    typicalLeftItems: ['Full-time roles', 'Part-time roles', 'Internships', 'Entry-level opportunities', 'Specialist roles', 'Growth-stage company openings'],
+    typicalRightTitle: 'What companies usually expect',
+    typicalRightItems: ['Clear candidate profile', 'Skill and role alignment', 'Availability', 'Location or relocation preference', 'Portfolio or work proof where relevant', 'Prompt response'],
+    howItWorksTitle: 'How joining as a Job Seeker works',
+    howItWorksSteps: [
+      { title: 'Create one account', description: 'Sign up once and start your job seeker flow.' },
+      { title: 'Complete your candidate profile', description: 'Add experience, skills, role goals, and availability.' },
+      { title: 'Apply to approved jobs', description: 'Use a cleaner opportunity flow to target relevant openings.' },
+      { title: 'Track application movement', description: 'Monitor updates and response stages with more clarity.' },
+    ],
+    whyChooseTitle: 'Why Job Seekers choose Nxtgauge',
+    whyChooseCards: [
+      'Approved job visibility - See opportunities shaped by platform review and trust signals.',
+      'Cleaner application journey - Avoid some of the noise common in open listing boards.',
+      'Better tracking confidence - Understand what is happening after you apply.',
+    ],
+    faqs: [
+      { q: 'Can I apply without full experience?', a: 'Yes. Different roles may fit different levels, including internships and early-career candidates.' },
+      { q: 'Why does verification matter for job seekers?', a: 'It improves trust for companies and supports cleaner matching.' },
+      { q: 'Can I update my profile later?', a: 'Yes. You can improve your profile, work details, and role preferences over time.' },
+      { q: 'What should I include in my profile?', a: 'Add your experience, role interests, location, availability, and proof of work when relevant.' },
+      { q: 'How long does approval usually take?', a: 'Most profile-related approvals are completed within 24-48 hours.' },
+    ],
+    finalCtaHeading: 'Build your Job Seeker profile and unlock better-fit opportunities',
+    finalCtaSupport: 'One account. Clear verification path. Better visibility through trusted discovery.',
+    finalPrimaryCta: { label: 'Start as Job Seeker', href: '/signup?intent=job_seeker' },
+    finalSecondaryCta: { label: 'Explore Other Categories', href: '/professionals' },
+  },
+  photographer: {
+    slug: 'photographer',
+    roleKey: 'PHOTOGRAPHER',
+    audience: 'professional',
+    shortTitle: 'Photographer',
+    heroEyebrow: 'Photographer on Nxtgauge',
+    heroTitle: 'Show your photography style with trust-first visibility and clearer bookings',
+    heroDescription:
+      'Join Nxtgauge as a Photographer and present your work through a profile-led system built for trust. Build confidence faster, respond to cleaner demand, and manage request movement with more clarity.',
+    heroImage: '/images/roles/photographer.jpg',
+    primaryCta: { label: 'Register as Photographer', href: '/signup?intent=professional&role=PHOTOGRAPHER' },
+    secondaryCta: { label: 'View All Professionals', href: '/professionals' },
+    whatYouGetTitle: 'What you get as a Photographer on Nxtgauge',
+    whatYouGetSubtitle: 'Practical platform value focused on stronger trust, clearer discovery, and better conversion quality.',
+    whatYouGetCards: [
+      'Photographer profile visibility - Show your specialization, service style, location, and strengths more clearly.',
+      'Trust-led discovery - Appear in a marketplace designed to prioritize verified interactions.',
+      'Cleaner demand flow - Reduce low-intent noise and focus on more serious requests.',
+      'Status clarity - Track request movement and response progress more clearly.',
+      'Better first impression - Use approval and profile trust signals to improve confidence.',
+      'Structured opportunity access - Present services, proof of work, and profile strength in one place.',
+    ],
+    typicalLeftTitle: 'Most requested photography projects',
+    typicalLeftItems: [
+      'Event and corporate coverage',
+      'Portrait and family sessions',
+      'Brand and campaign photography',
+      'Product and catalog shoots',
+      'Wedding and pre-wedding shoots',
+      'Social media content production',
+    ],
+    typicalRightTitle: 'What clients compare before booking',
+    typicalRightItems: [
+      'Visual style and editing consistency',
+      'Date and time availability',
+      'Travel range and location coverage',
+      'Package inclusions and pricing clarity',
+      'Portfolio depth in similar projects',
+      'Delivery timeline and output format',
+    ],
+    howItWorksTitle: 'How joining as a Photographer works',
+    howItWorksSteps: [
+      { title: 'Create one account', description: 'Sign up once and start your professional onboarding.' },
+      { title: 'Complete your photographer profile', description: 'Add service scope, working style, location, and package details.' },
+      { title: 'Submit for verification', description: 'Your role details are reviewed before visibility expands.' },
+      { title: 'Start responding to opportunities', description: 'Track request flow and engage with clearer, trust-backed demand.' },
+    ],
+    whyChooseTitle: 'Why Photographers choose Nxtgauge',
+    whyChooseCards: [
+      'Verified customer requirements - Designed to help photographer professionals reduce noise and focus on real demand.',
+      'Cleaner demand discovery - Supports a more focused path to relevant opportunities.',
+      'Better trust for first-time clients - Trust signals help customers feel more confident before first contact.',
+    ],
+    faqs: [
+      { q: 'Is this only for one type of photographer?', a: 'No. It supports different working styles and specializations within the photographer role.' },
+      { q: 'Why does verification matter for this role?', a: 'It improves confidence for customers and reduces low-intent interactions.' },
+      { q: 'What should I include in my profile?', a: 'Add your specialization, service structure, location, proof of work, and clear package details.' },
+      { q: 'Can I update my profile later?', a: 'Yes. You can improve your profile and service details over time.' },
+      { q: 'How long does approval usually take?', a: 'Most profile reviews are completed within 24-48 hours.' },
+    ],
+    finalCtaHeading: 'Build your Photographer profile',
+    finalCtaSupport: 'One account. Verified visibility.',
+    finalPrimaryCta: { label: 'Register as Photographer', href: '/signup?intent=professional&role=PHOTOGRAPHER' },
+    finalSecondaryCta: { label: 'Explore Other Categories', href: '/professionals' },
+  },
+  'makeup-artist': {
+    slug: 'makeup-artist',
+    roleKey: 'MAKEUP_ARTIST',
+    audience: 'professional',
+    shortTitle: 'Makeup Artist',
+    heroEyebrow: 'Makeup Artist on Nxtgauge',
+    heroTitle: 'Grow as a Makeup Artist through profile trust and better-fit client discovery',
+    heroDescription:
+      'Join Nxtgauge as a Makeup Artist and build a profile that helps customers trust your work before first contact. Move through a clearer request flow with stronger presentation and less low-intent noise.',
+    heroImage: '/images/roles/makeup_artist.jpg',
+    primaryCta: { label: 'Register as Makeup Artist', href: '/signup?intent=professional&role=MAKEUP_ARTIST' },
+    secondaryCta: { label: 'View All Professionals', href: '/professionals' },
+    whatYouGetTitle: 'What you get as a Makeup Artist on Nxtgauge',
+    whatYouGetSubtitle: 'Practical platform value focused on stronger trust, clearer discovery, and better conversion quality.',
+    whatYouGetCards: [
+      'Makeup Artist profile visibility - Show your specialization, service style, location, and strengths more clearly.',
+      'Trust-led discovery - Appear in a marketplace designed to prioritize verified interactions.',
+      'Cleaner demand flow - Reduce low-intent noise and focus on more serious requests.',
+      'Status clarity - Track request movement and response progress more clearly.',
+      'Better first impression - Use approval and profile trust signals to improve confidence.',
+      'Structured opportunity access - Present services, proof of work, and profile strength in one place.',
+    ],
+    typicalLeftTitle: 'Typical projects from this role',
+    typicalLeftItems: ['Bridal makeup', 'Party makeup', 'Editorial looks', 'Event-ready styling', 'Fashion shoots', 'Occasion-based makeup services'],
+    typicalRightTitle: 'What customers usually expect',
+    typicalRightItems: ['Look specialization', 'Travel or location support', 'Package details', 'Product/style preferences', 'Portfolio proof', 'Scheduling clarity'],
+    howItWorksTitle: 'How joining as a Makeup Artist works',
+    howItWorksSteps: [
+      { title: 'Create one account', description: 'Sign up once and start your professional onboarding.' },
+      { title: 'Complete your makeup artist profile', description: 'Add service scope, working style, location, and package details.' },
+      { title: 'Submit for verification', description: 'Your role details are reviewed before visibility expands.' },
+      { title: 'Start responding to opportunities', description: 'Track request flow and engage with clearer, trust-backed demand.' },
+    ],
+    whyChooseTitle: 'Why Makeup Artists choose Nxtgauge',
+    whyChooseCards: [
+      'Verified customer requirements - Designed to help makeup artist professionals reduce noise and focus on real demand.',
+      'Cleaner demand discovery - Supports a more focused path to relevant opportunities.',
+      'Better trust for first-time clients - Trust signals help customers feel more confident before first contact.',
+    ],
+    faqs: [
+      { q: 'Is this only for one type of makeup artist?', a: 'No. It supports different working styles and specializations within the makeup artist role.' },
+      { q: 'Why does verification matter for this role?', a: 'It improves confidence for customers and reduces low-intent interactions.' },
+      { q: 'What should I include in my profile?', a: 'Add your specialization, service structure, location, proof of work, and clear package details.' },
+      { q: 'Can I update my profile later?', a: 'Yes. You can improve your profile and service details over time.' },
+      { q: 'How long does approval usually take?', a: 'Most profile reviews are completed within 24-48 hours.' },
+    ],
+    finalCtaHeading: 'Build your Makeup Artist profile and unlock better-fit opportunities',
+    finalCtaSupport: 'One account. Clear verification path. Better visibility through trusted discovery.',
+    finalPrimaryCta: { label: 'Register as Makeup Artist', href: '/signup?intent=professional&role=MAKEUP_ARTIST' },
+    finalSecondaryCta: { label: 'Explore Other Categories', href: '/professionals' },
+  },
+  tutor: {
+    slug: 'tutor',
+    roleKey: 'TUTOR',
+    audience: 'professional',
+    shortTitle: 'Tutor',
+    heroEyebrow: 'Tutor on Nxtgauge',
+    heroTitle: 'Teach with stronger profile credibility and better quality learner discovery',
+    heroDescription:
+      'Join Nxtgauge as a Tutor and present your expertise through a trust-first system. Help learners understand your subject fit, teaching format, and value more clearly before they reach out.',
+    heroImage: '/images/roles/tutor.jpg',
+    primaryCta: { label: 'Register as Tutor', href: '/signup?intent=professional&role=TUTOR' },
+    secondaryCta: { label: 'View All Professionals', href: '/professionals' },
+    whatYouGetTitle: 'What you get as a Tutor on Nxtgauge',
+    whatYouGetSubtitle: 'Practical platform value focused on stronger trust, clearer discovery, and better conversion quality.',
+    whatYouGetCards: [
+      'Tutor profile visibility - Show your specialization, service style, location, and strengths more clearly.',
+      'Trust-led discovery - Appear in a marketplace designed to prioritize verified interactions.',
+      'Cleaner demand flow - Reduce low-intent noise and focus on more serious requests.',
+      'Status clarity - Track request movement and response progress more clearly.',
+      'Better first impression - Use approval and profile trust signals to improve confidence.',
+      'Structured opportunity access - Present services, proof of work, and profile strength in one place.',
+    ],
+    typicalLeftTitle: 'Typical projects from this role',
+    typicalLeftItems: ['School subject tutoring', 'Exam preparation', 'Language coaching', 'Online tutoring sessions', 'Skill-based mentoring', 'Homework and concept support'],
+    typicalRightTitle: 'What customers usually expect',
+    typicalRightItems: ['Subject specialization', 'Teaching format', 'Schedule and availability', 'Learner level fit', 'Session structure', 'Outcome clarity'],
+    howItWorksTitle: 'How joining as a Tutor works',
+    howItWorksSteps: [
+      { title: 'Create one account', description: 'Sign up once and start your professional onboarding.' },
+      { title: 'Complete your tutor profile', description: 'Add service scope, working style, location, and package details.' },
+      { title: 'Submit for verification', description: 'Your role details are reviewed before visibility expands.' },
+      { title: 'Start responding to opportunities', description: 'Track request flow and engage with clearer, trust-backed demand.' },
+    ],
+    whyChooseTitle: 'Why Tutors choose Nxtgauge',
+    whyChooseCards: [
+      'Verified customer requirements - Designed to help tutor professionals reduce noise and focus on real demand.',
+      'Cleaner demand discovery - Supports a more focused path to relevant opportunities.',
+      'Better trust for first-time clients - Trust signals help customers feel more confident before first contact.',
+    ],
+    faqs: [
+      { q: 'Is this only for one type of tutor?', a: 'No. It supports different working styles and specializations within the tutor role.' },
+      { q: 'Why does verification matter for this role?', a: 'It improves confidence for customers and reduces low-intent interactions.' },
+      { q: 'What should I include in my profile?', a: 'Add your specialization, service structure, location, proof of work, and clear package details.' },
+      { q: 'Can I update my profile later?', a: 'Yes. You can improve your profile and service details over time.' },
+      { q: 'How long does approval usually take?', a: 'Most profile reviews are completed within 24-48 hours.' },
+    ],
+    finalCtaHeading: 'Build your Tutor profile and unlock better-fit opportunities',
+    finalCtaSupport: 'One account. Clear verification path. Better visibility through trusted discovery.',
+    finalPrimaryCta: { label: 'Register as Tutor', href: '/signup?intent=professional&role=TUTOR' },
+    finalSecondaryCta: { label: 'Explore Other Categories', href: '/professionals' },
+  },
+  developer: {
+    slug: 'developer',
+    roleKey: 'DEVELOPER',
+    audience: 'professional',
+    shortTitle: 'Developer',
+    heroEyebrow: 'Developer on Nxtgauge',
+    heroTitle: 'Build for real client demand with a stronger developer profile',
+    heroDescription: 'Show your stack clearly, get discovered faster, and respond to better-fit opportunities with less noise.',
+    heroImage: '/images/roles/developer.jpg',
+    primaryCta: { label: 'Register as Developer', href: '/signup?intent=professional&role=DEVELOPER' },
+    secondaryCta: { label: 'View All Professionals', href: '/professionals' },
+    whatYouGetTitle: 'What you get as a Developer on Nxtgauge',
+    whatYouGetSubtitle: 'Practical platform value focused on stronger trust, clearer discovery, and better conversion quality.',
+    whatYouGetCards: [
+      'Developer profile visibility - Show your specialization, service style, location, and strengths more clearly.',
+      'Trust-led discovery - Appear in a marketplace designed to prioritize verified interactions.',
+      'Cleaner demand flow - Reduce low-intent noise and focus on more serious requests.',
+      'Status clarity - Track request movement and response progress more clearly.',
+      'Better first impression - Use approval and profile trust signals to improve confidence.',
+      'Structured opportunity access - Present services, proof of work, and profile strength in one place.',
+    ],
+    typicalLeftTitle: 'Typical projects from this role',
+    typicalLeftItems: ['Web app development', 'Landing page and website builds', 'E-commerce development', 'SaaS feature implementation', 'API or backend work', 'Maintenance and optimization'],
+    typicalRightTitle: 'What customers usually expect',
+    typicalRightItems: ['Tech stack clarity', 'Project scope fit', 'Timeline and availability', 'Communication quality', 'Portfolio proof', 'Delivery confidence'],
+    howItWorksTitle: 'How joining as a Developer works',
+    howItWorksSteps: [
+      { title: 'Create one account', description: 'Sign up once and start your professional onboarding.' },
+      { title: 'Complete your developer profile', description: 'Add service scope, working style, location, and package details.' },
+      { title: 'Submit for verification', description: 'Your role details are reviewed before visibility expands.' },
+      { title: 'Start responding to opportunities', description: 'Track request flow and engage with clearer, trust-backed demand.' },
+    ],
+    whyChooseTitle: 'Why Developers choose Nxtgauge',
+    whyChooseCards: [
+      'Higher-intent project leads - Work with requirements that are reviewed for clarity before wider visibility.',
+      'Better fit before first call - Clients can evaluate your stack, scope fit, and delivery style from your profile.',
+      'Stronger conversion confidence - Trust-led presentation improves first-contact quality and reduces back-and-forth.',
+    ],
+    faqs: [
+      { q: 'Is this only for one type of developer?', a: 'No. It supports different working styles and specializations within the developer role.' },
+      { q: 'Why does verification matter for this role?', a: 'It improves confidence for customers and reduces low-intent interactions.' },
+      { q: 'What should I include in my profile?', a: 'Add your specialization, service structure, location, proof of work, and clear package details.' },
+      { q: 'Can I update my profile later?', a: 'Yes. You can improve your profile and service details over time.' },
+      { q: 'How long does approval usually take?', a: 'Most profile reviews are completed within 24-48 hours.' },
+    ],
+    finalCtaHeading: 'Build your Developer profile and unlock better-fit opportunities',
+    finalCtaSupport: 'One account. Clear verification path. Better visibility through trusted discovery.',
+    finalPrimaryCta: { label: 'Register as Developer', href: '/signup?intent=professional&role=DEVELOPER' },
+    finalSecondaryCta: { label: 'Explore Other Categories', href: '/professionals' },
+  },
+  'video-editor': {
+    slug: 'video-editor',
+    roleKey: 'VIDEO_EDITOR',
+    audience: 'professional',
+    shortTitle: 'Video Editor',
+    heroEyebrow: 'Video Editor on Nxtgauge',
+    heroTitle: 'Turn your editing portfolio into a stronger first impression for quality clients',
+    heroDescription:
+      'Join Nxtgauge as a Video Editor and build profile-led visibility around your editing style, turnaround strength, and service clarity. Access better-presented demand and track request progress more clearly.',
+    heroImage: '/images/roles/video_editor.jpg',
+    primaryCta: { label: 'Register as Video Editor', href: '/signup?intent=professional&role=VIDEO_EDITOR' },
+    secondaryCta: { label: 'View All Professionals', href: '/professionals' },
+    whatYouGetTitle: 'What you get as a Video Editor on Nxtgauge',
+    whatYouGetSubtitle: 'Practical platform value focused on stronger trust, clearer discovery, and better conversion quality.',
+    whatYouGetCards: [
+      'Video Editor profile visibility - Show your specialization, service style, location, and strengths more clearly.',
+      'Trust-led discovery - Appear in a marketplace designed to prioritize verified interactions.',
+      'Cleaner demand flow - Reduce low-intent noise and focus on more serious requests.',
+      'Status clarity - Track request movement and response progress more clearly.',
+      'Better first impression - Use approval and profile trust signals to improve confidence.',
+      'Structured opportunity access - Present services, proof of work, and profile strength in one place.',
+    ],
+    typicalLeftTitle: 'Typical projects from this role',
+    typicalLeftItems: ['Short-form content editing', 'YouTube video editing', 'Ad creative editing', 'Event video edits', 'Reels and social clips', 'Corporate video post-production'],
+    typicalRightTitle: 'What customers usually expect',
+    typicalRightItems: ['Editing style fit', 'Turnaround expectations', 'Revision structure', 'Portfolio quality', 'Format or platform knowledge', 'Communication clarity'],
+    howItWorksTitle: 'How joining as a Video Editor works',
+    howItWorksSteps: [
+      { title: 'Create one account', description: 'Sign up once and start your professional onboarding.' },
+      { title: 'Complete your video editor profile', description: 'Add service scope, working style, location, and package details.' },
+      { title: 'Submit for verification', description: 'Your role details are reviewed before visibility expands.' },
+      { title: 'Start responding to opportunities', description: 'Track request flow and engage with clearer, trust-backed demand.' },
+    ],
+    whyChooseTitle: 'Why Video Editors choose Nxtgauge',
+    whyChooseCards: [
+      'Verified customer requirements - Designed to help video editor professionals reduce noise and focus on real demand.',
+      'Cleaner demand discovery - Supports a more focused path to relevant opportunities.',
+      'Better trust for first-time clients - Trust signals help customers feel more confident before first contact.',
+    ],
+    faqs: [
+      { q: 'Is this only for one type of video editor?', a: 'No. It supports different working styles and specializations within the video editor role.' },
+      { q: 'Why does verification matter for this role?', a: 'It improves confidence for customers and reduces low-intent interactions.' },
+      { q: 'What should I include in my profile?', a: 'Add your specialization, service structure, location, proof of work, and clear package details.' },
+      { q: 'Can I update my profile later?', a: 'Yes. You can improve your profile and service details over time.' },
+      { q: 'How long does approval usually take?', a: 'Most profile reviews are completed within 24-48 hours.' },
+    ],
+    finalCtaHeading: 'Build your Video Editor profile and unlock better-fit opportunities',
+    finalCtaSupport: 'One account. Clear verification path. Better visibility through trusted discovery.',
+    finalPrimaryCta: { label: 'Register as Video Editor', href: '/signup?intent=professional&role=VIDEO_EDITOR' },
+    finalSecondaryCta: { label: 'Explore Other Categories', href: '/professionals' },
+  },
+  'graphic-designer': {
+    slug: 'graphic-designer',
+    roleKey: 'GRAPHIC_DESIGNER',
+    audience: 'professional',
+    shortTitle: 'Graphic Designer',
+    heroEyebrow: 'Graphic Designer on Nxtgauge',
+    heroTitle: 'Present your design work with stronger trust signals and cleaner client discovery',
+    heroDescription:
+      'Join Nxtgauge as a Graphic Designer and showcase your style through a profile-first marketplace built around trust and clarity. Reduce scattered lead noise and respond to better-fit creative opportunities.',
+    heroImage: '/images/roles/graphic_designer.jpg',
+    primaryCta: { label: 'Register as Graphic Designer', href: '/signup?intent=professional&role=GRAPHIC_DESIGNER' },
+    secondaryCta: { label: 'View All Professionals', href: '/professionals' },
+    whatYouGetTitle: 'What you get as a Graphic Designer on Nxtgauge',
+    whatYouGetSubtitle: 'Practical platform value focused on stronger trust, clearer discovery, and better conversion quality.',
+    whatYouGetCards: [
+      'Graphic Designer profile visibility - Show your specialization, service style, location, and strengths more clearly.',
+      'Trust-led discovery - Appear in a marketplace designed to prioritize verified interactions.',
+      'Cleaner demand flow - Reduce low-intent noise and focus on more serious requests.',
+      'Status clarity - Track request movement and response progress more clearly.',
+      'Better first impression - Use approval and profile trust signals to improve confidence.',
+      'Structured opportunity access - Present services, proof of work, and profile strength in one place.',
+    ],
+    typicalLeftTitle: 'Typical projects from this role',
+    typicalLeftItems: ['Brand identity design', 'Social media creatives', 'Marketing collaterals', 'Presentation design', 'Packaging design', 'Campaign visuals'],
+    typicalRightTitle: 'What customers usually expect',
+    typicalRightItems: ['Design style fit', 'Service scope', 'Revision structure', 'Portfolio quality', 'Timeline clarity', 'Brand understanding'],
+    howItWorksTitle: 'How joining as a Graphic Designer works',
+    howItWorksSteps: [
+      { title: 'Create one account', description: 'Sign up once and start your professional onboarding.' },
+      { title: 'Complete your graphic designer profile', description: 'Add service scope, working style, location, and package details.' },
+      { title: 'Submit for verification', description: 'Your role details are reviewed before visibility expands.' },
+      { title: 'Start responding to opportunities', description: 'Track request flow and engage with clearer, trust-backed demand.' },
+    ],
+    whyChooseTitle: 'Why Graphic Designers choose Nxtgauge',
+    whyChooseCards: [
+      'Verified customer requirements - Designed to help graphic designer professionals reduce noise and focus on real demand.',
+      'Cleaner demand discovery - Supports a more focused path to relevant opportunities.',
+      'Better trust for first-time clients - Trust signals help customers feel more confident before first contact.',
+    ],
+    faqs: [
+      { q: 'Is this only for one type of graphic designer?', a: 'No. It supports different working styles and specializations within the graphic designer role.' },
+      { q: 'Why does verification matter for this role?', a: 'It improves confidence for customers and reduces low-intent interactions.' },
+      { q: 'What should I include in my profile?', a: 'Add your specialization, service structure, location, proof of work, and clear package details.' },
+      { q: 'Can I update my profile later?', a: 'Yes. You can improve your profile and service details over time.' },
+      { q: 'How long does approval usually take?', a: 'Most profile reviews are completed within 24-48 hours.' },
+    ],
+    finalCtaHeading: 'Build your Graphic Designer profile and unlock better-fit opportunities',
+    finalCtaSupport: 'One account. Clear verification path. Better visibility through trusted discovery.',
+    finalPrimaryCta: { label: 'Register as Graphic Designer', href: '/signup?intent=professional&role=GRAPHIC_DESIGNER' },
+    finalSecondaryCta: { label: 'Explore Other Categories', href: '/professionals' },
+  },
+  'social-media-manager': {
+    slug: 'social-media-manager',
+    roleKey: 'SOCIAL_MEDIA_MANAGER',
+    audience: 'professional',
+    shortTitle: 'Social Media Manager',
+    heroEyebrow: 'Social Media Manager on Nxtgauge',
+    heroTitle: 'Grow through trusted profile-led visibility and clearer campaign demand',
+    heroDescription:
+      'Join Nxtgauge as a Social Media Manager and present your strategy, niche, and service model with more clarity. Build client trust faster and respond to campaign demand through a cleaner workflow.',
+    heroImage: '/images/roles/social_media_manager.jpg',
+    primaryCta: { label: 'Register as Social Media Manager', href: '/signup?intent=professional&role=SOCIAL_MEDIA_MANAGER' },
+    secondaryCta: { label: 'View All Professionals', href: '/professionals' },
+    whatYouGetTitle: 'What you get as a Social Media Manager on Nxtgauge',
+    whatYouGetSubtitle: 'Practical platform value focused on stronger trust, clearer discovery, and better conversion quality.',
+    whatYouGetCards: [
+      'Social Media Manager profile visibility - Show your specialization, service style, location, and strengths more clearly.',
+      'Trust-led discovery - Appear in a marketplace designed to prioritize verified interactions.',
+      'Cleaner demand flow - Reduce low-intent noise and focus on more serious requests.',
+      'Status clarity - Track request movement and response progress more clearly.',
+      'Better first impression - Use approval and profile trust signals to improve confidence.',
+      'Structured opportunity access - Present services, proof of work, and profile strength in one place.',
+    ],
+    typicalLeftTitle: 'Typical projects from this role',
+    typicalLeftItems: ['Monthly social media management', 'Content planning', 'Campaign support', 'Community management', 'Growth-focused strategy', 'Platform-specific content operations'],
+    typicalRightTitle: 'What customers usually expect',
+    typicalRightItems: ['Platform expertise', 'Industry or niche fit', 'Content process clarity', 'Reporting expectations', 'Package scope', 'Availability'],
+    howItWorksTitle: 'How joining as a Social Media Manager works',
+    howItWorksSteps: [
+      { title: 'Create one account', description: 'Sign up once and start your professional onboarding.' },
+      { title: 'Complete your social media manager profile', description: 'Add service scope, working style, location, and package details.' },
+      { title: 'Submit for verification', description: 'Your role details are reviewed before visibility expands.' },
+      { title: 'Start responding to opportunities', description: 'Track request flow and engage with clearer, trust-backed demand.' },
+    ],
+    whyChooseTitle: 'Why Social Media Managers choose Nxtgauge',
+    whyChooseCards: [
+      'Verified customer requirements - Designed to help social media manager professionals reduce noise and focus on real demand.',
+      'Cleaner demand discovery - Supports a more focused path to relevant opportunities.',
+      'Better trust for first-time clients - Trust signals help customers feel more confident before first contact.',
+    ],
+    faqs: [
+      { q: 'Is this only for one type of social media manager?', a: 'No. It supports different working styles and specializations within the social media manager role.' },
+      { q: 'Why does verification matter for this role?', a: 'It improves confidence for customers and reduces low-intent interactions.' },
+      { q: 'What should I include in my profile?', a: 'Add your specialization, service structure, location, proof of work, and clear package details.' },
+      { q: 'Can I update my profile later?', a: 'Yes. You can improve your profile and service details over time.' },
+      { q: 'How long does approval usually take?', a: 'Most profile reviews are completed within 24-48 hours.' },
+    ],
+    finalCtaHeading: 'Build your Social Media Manager profile and unlock better-fit opportunities',
+    finalCtaSupport: 'One account. Clear verification path. Better visibility through trusted discovery.',
+    finalPrimaryCta: { label: 'Register as Social Media Manager', href: '/signup?intent=professional&role=SOCIAL_MEDIA_MANAGER' },
+    finalSecondaryCta: { label: 'Explore Other Categories', href: '/professionals' },
+  },
+  'fitness-trainer': {
+    slug: 'fitness-trainer',
+    roleKey: 'FITNESS_TRAINER',
+    audience: 'professional',
+    shortTitle: 'Fitness Trainer',
+    heroEyebrow: 'Fitness Trainer on Nxtgauge',
+    heroTitle: 'Grow as a Fitness Trainer through trusted profile-led discovery',
+    heroDescription:
+      'Join Nxtgauge as a Fitness Trainer and connect with customers through a trust-first workflow. Build credibility, complete verification, and respond to better-fit opportunities with more clarity.',
+    heroImage: '/images/roles/fitness_trainer.jpg',
+    primaryCta: { label: 'Register as Fitness Trainer', href: '/signup?intent=professional&role=FITNESS_TRAINER' },
+    secondaryCta: { label: 'View All Professionals', href: '/professionals' },
+    whatYouGetTitle: 'What you get as a Fitness Trainer on Nxtgauge',
+    whatYouGetSubtitle: 'Practical platform value focused on stronger trust, clearer discovery, and better conversion quality.',
+    whatYouGetCards: [
+      'Fitness Trainer profile visibility - Show your specialization, service style, location, and strengths more clearly.',
+      'Trust-led discovery - Appear in a marketplace designed to prioritize verified interactions.',
+      'Cleaner demand flow - Reduce low-intent noise and focus on more serious requests.',
+      'Status clarity - Track request movement and response progress more clearly.',
+      'Better first impression - Use approval and profile trust signals to improve confidence.',
+      'Structured opportunity access - Present services, proof of work, and profile strength in one place.',
+    ],
+    typicalLeftTitle: 'Typical projects from this role',
+    typicalLeftItems: ['Personal fitness coaching', 'Weight-loss transformation programs', 'Strength and conditioning plans', 'Online workout accountability', 'Functional training support', 'Lifestyle and routine-based fitness guidance'],
+    typicalRightTitle: 'What customers usually expect',
+    typicalRightItems: ['Program specialization', 'Session format and schedule', 'Client readiness requirements', 'Service scope', 'Package clarity', 'Coaching style'],
+    howItWorksTitle: 'How joining as a Fitness Trainer works',
+    howItWorksSteps: [
+      { title: 'Create one account', description: 'Sign up once and start your professional onboarding.' },
+      { title: 'Complete your fitness trainer profile', description: 'Add service scope, working style, location, and package details.' },
+      { title: 'Submit for verification', description: 'Your role details are reviewed before visibility expands.' },
+      { title: 'Start responding to opportunities', description: 'Track request flow and engage with clearer, trust-backed demand.' },
+    ],
+    whyChooseTitle: 'Why Fitness Trainers choose Nxtgauge',
+    whyChooseCards: [
+      'Higher-intent client inquiries - Connect with requests that are reviewed for clarity before wider visibility.',
+      'Better program-fit matching - Clients can assess your training style, specialization, and availability early.',
+      'Stronger first-contact conversion - Clear trust signals help reduce drop-offs and improve booking confidence.',
+    ],
+    faqs: [
+      { q: 'Is this only for one type of fitness trainer?', a: 'No. It supports different working styles and specializations within the fitness trainer role.' },
+      { q: 'Why does verification matter for this role?', a: 'It improves confidence for customers and reduces low-intent interactions.' },
+      { q: 'What should I include in my profile?', a: 'Add your specialization, service structure, location, proof of work, and clear package details.' },
+      { q: 'Can I update my profile later?', a: 'Yes. You can improve your profile and service details over time.' },
+      { q: 'How long does approval usually take?', a: 'Most profile reviews are completed within 24-48 hours.' },
+    ],
+    finalCtaHeading: 'Build your Fitness Trainer profile and unlock better-fit opportunities',
+    finalCtaSupport: 'One account. Clear verification path. Better visibility through trusted discovery.',
+    finalPrimaryCta: { label: 'Register as Fitness Trainer', href: '/signup?intent=professional&role=FITNESS_TRAINER' },
+    finalSecondaryCta: { label: 'Explore Other Categories', href: '/professionals' },
+  },
+  'catering-services': {
+    slug: 'catering-services',
+    roleKey: 'CATERING_SERVICES',
+    audience: 'professional',
+    shortTitle: 'Catering Services',
+    heroEyebrow: 'Catering Services on Nxtgauge',
+    heroTitle: 'Showcase your menus and event readiness through a more trusted discovery flow',
+    heroDescription:
+      'Join Nxtgauge as a Catering Services provider and present your service quality, event readiness, and package structure more clearly. Build trust before first contact and respond to cleaner requirement demand.',
+    heroImage: '/images/roles/catering_services.jpg',
+    primaryCta: { label: 'Register as Catering Services', href: '/signup?intent=professional&role=CATERING_SERVICES' },
+    secondaryCta: { label: 'View All Professionals', href: '/professionals' },
+    whatYouGetTitle: 'What you get as a Catering Services on Nxtgauge',
+    whatYouGetSubtitle: 'Practical platform value focused on stronger trust, clearer discovery, and better conversion quality.',
+    whatYouGetCards: [
+      'Catering Services profile visibility - Show your specialization, service style, location, and strengths more clearly.',
+      'Trust-led discovery - Appear in a marketplace designed to prioritize verified interactions.',
+      'Cleaner demand flow - Reduce low-intent noise and focus on more serious requests.',
+      'Status clarity - Track request movement and response progress more clearly.',
+      'Better first impression - Use approval and profile trust signals to improve confidence.',
+      'Structured opportunity access - Present services, proof of work, and profile strength in one place.',
+    ],
+    typicalLeftTitle: 'Typical projects from this role',
+    typicalLeftItems: ['Wedding catering', 'Corporate event catering', 'Birthday and private event catering', 'Buffet service packages', 'Live counter services', 'Custom event menus'],
+    typicalRightTitle: 'What customers usually expect',
+    typicalRightItems: ['Cuisine or menu fit', 'Guest capacity', 'Package structure', 'Location coverage', 'Event readiness', 'Service inclusions'],
+    howItWorksTitle: 'How joining as a Catering Services works',
+    howItWorksSteps: [
+      { title: 'Create one account', description: 'Sign up once and start your professional onboarding.' },
+      { title: 'Complete your catering services profile', description: 'Add service scope, working style, location, and package details.' },
+      { title: 'Submit for verification', description: 'Your role details are reviewed before visibility expands.' },
+      { title: 'Start responding to opportunities', description: 'Track request flow and engage with clearer, trust-backed demand.' },
+    ],
+    whyChooseTitle: 'Why Catering Services choose Nxtgauge',
+    whyChooseCards: [
+      'Verified customer requirements - Designed to help catering services professionals reduce noise and focus on real demand.',
+      'Cleaner demand discovery - Supports a more focused path to relevant opportunities.',
+      'Better trust for first-time clients - Trust signals help customers feel more confident before first contact.',
+    ],
+    faqs: [
+      { q: 'Is this only for one type of catering services?', a: 'No. It supports different working styles and specializations within the catering services role.' },
+      { q: 'Why does verification matter for this role?', a: 'It improves confidence for customers and reduces low-intent interactions.' },
+      { q: 'What should I include in my profile?', a: 'Add your specialization, service structure, location, proof of work, and clear package details.' },
+      { q: 'Can I update my profile later?', a: 'Yes. You can improve your profile and service details over time.' },
+      { q: 'How long does approval usually take?', a: 'Most profile reviews are completed within 24-48 hours.' },
+    ],
+    finalCtaHeading: 'Build your Catering Services profile and unlock better-fit opportunities',
+    finalCtaSupport: 'One account. Clear verification path. Better visibility through trusted discovery.',
+    finalPrimaryCta: { label: 'Register as Catering Services', href: '/signup?intent=professional&role=CATERING_SERVICES' },
+    finalSecondaryCta: { label: 'Explore Other Categories', href: '/professionals' },
+  },
+  'ugc-content-creator': {
+    slug: 'ugc-content-creator',
+    roleKey: 'UGC_CONTENT_CREATOR',
+    audience: 'professional',
+    shortTitle: 'UGC Content Creator',
+    heroEyebrow: 'UGC Content Creator on Nxtgauge',
+    heroTitle: 'Grow your creator profile with trust-first visibility and cleaner campaign demand',
+    heroDescription:
+      'Join Nxtgauge as a UGC Content Creator and showcase your campaign style, content niche, and delivery model in a trust-led workflow built for better-fit collaborations.',
+    heroImage: '/images/roles/social_media_manager.jpg',
+    primaryCta: { label: 'Register as UGC Content Creator', href: '/signup?intent=professional&role=UGC_CONTENT_CREATOR' },
+    secondaryCta: { label: 'View All Professionals', href: '/professionals' },
+    whatYouGetTitle: 'What you get as a UGC Content Creator on Nxtgauge',
+    whatYouGetSubtitle: 'Practical platform value focused on stronger trust, clearer discovery, and better conversion quality.',
+    whatYouGetCards: [
+      'Creator profile visibility - Present your content niche, style, and strengths with clarity.',
+      'Trust-led discovery - Appear in a marketplace designed to prioritize verified interactions.',
+      'Cleaner demand flow - Reduce low-intent noise and focus on stronger collaboration signals.',
+      'Status clarity - Track request movement and response progress more clearly.',
+      'Better first impression - Use approval and profile trust signals to improve confidence.',
+      'Structured opportunity access - Present proof of work and campaign-fit signals in one place.',
+    ],
+    typicalLeftTitle: 'Typical projects from this role',
+    typicalLeftItems: ['Product demo UGC videos', 'Lifestyle brand content', 'Testimonial and review scripts', 'Campaign creative batches', 'Reels and short-form deliverables', 'Performance-oriented content iterations'],
+    typicalRightTitle: 'What customers usually expect',
+    typicalRightItems: ['Niche and style fit', 'Deliverable structure', 'Timeline clarity', 'Revision expectations', 'Usage rights understanding', 'Communication quality'],
+    howItWorksTitle: 'How joining as a UGC Content Creator works',
+    howItWorksSteps: [
+      { title: 'Create one account', description: 'Sign up once and start your professional onboarding.' },
+      { title: 'Complete your creator profile', description: 'Add niche, service scope, style, and package details.' },
+      { title: 'Submit for verification', description: 'Your role details are reviewed before visibility expands.' },
+      { title: 'Start responding to opportunities', description: 'Track request flow and engage with clearer, trust-backed demand.' },
+    ],
+    whyChooseTitle: 'Why UGC Creators choose Nxtgauge',
+    whyChooseCards: [
+      'Verified campaign demand - Designed to reduce low-intent discovery noise.',
+      'Cleaner collaboration flow - Supports clearer matching between creator style and requirement.',
+      'Better trust for first-time brands - Trust signals improve first-contact confidence.',
+    ],
+    faqs: [
+      { q: 'Is this only for one type of UGC creator?', a: 'No. It supports creators across different niches and campaign formats.' },
+      { q: 'Why does verification matter for this role?', a: 'It improves trust for customers and reduces low-intent interactions.' },
+      { q: 'What should I include in my profile?', a: 'Add your niche, service structure, location, proof of work, and package clarity.' },
+      { q: 'Can I update my profile later?', a: 'Yes. You can improve your profile and service details over time.' },
+      { q: 'How long does approval usually take?', a: 'Most profile reviews are completed within 24-48 hours.' },
+    ],
+    finalCtaHeading: 'Build your UGC Content Creator profile and unlock better-fit opportunities',
+    finalCtaSupport: 'One account. Clear verification path. Better visibility through trusted discovery.',
+    finalPrimaryCta: { label: 'Register as UGC Content Creator', href: '/signup?intent=professional&role=UGC_CONTENT_CREATOR' },
+    finalSecondaryCta: { label: 'Explore Other Categories', href: '/professionals' },
+  },
+};
+
+export const roleLandingPages = Object.values(bySlug);
+
+export function getRoleLandingBySlug(slug: string): RoleLandingContent | undefined {
+  return bySlug[String(slug || '').toLowerCase()];
+}
+
+export function getProfessionalLandingBySlug(slug: string): RoleLandingContent | undefined {
+  const item = getRoleLandingBySlug(slug);
+  if (!item || item.audience !== 'professional') return undefined;
+  return item;
+}
diff --git a/src/routes/help-center/article/[slug].tsx b/src/routes/help-center/article/[slug].tsx
index e6f0333..c51666c 100644
--- a/src/routes/help-center/article/[slug].tsx
+++ b/src/routes/help-center/article/[slug].tsx
@@ -1,6 +1,7 @@
 import { A, useParams } from '@solidjs/router';
-import { Show, For, createSignal, createResource, onCleanup, onMount } from 'solid-js';
-import { fetchArticleBySlug } from '~/lib/help-center';
+import { Meta, Title } from '@solidjs/meta';
+import { Show, For, createSignal, createResource, onCleanup, onMount, createMemo } from 'solid-js';
+import { fetchArticleBySlug, fetchRelatedArticles } from '~/lib/help-center';
 import PublicBackground from '~/components/PublicBackground';
 import PublicHeader from '~/components/PublicHeader';
 import PublicFooter from '~/components/PublicFooter';
@@ -15,9 +16,23 @@ function categoryTitle(input: string) {
 
 export default function HelpCenterArticlePage() {
   const params = useParams();
+  const slug = createMemo(() => String(params.slug || '').trim());
   const [scrollY, setScrollY] = createSignal(0);
 
   const [article] = createResource(() => params.slug, fetchArticleBySlug);
+  const [relatedArticles] = createResource(
+    () => article(),
+    (item) => (item ? fetchRelatedArticles({ article: item, limit: 4 }) : [])
+  );
+  const canonical = createMemo(() => `https://test121.nxtgauge.com/help-center/article/${encodeURIComponent(slug())}`);
+  const pageTitle = createMemo(() => {
+    const a = article();
+    return a ? `${a.title} | Nxtgauge Help Center` : 'Help Center Article | Nxtgauge';
+  });
+  const pageDescription = createMemo(() => {
+    const a = article();
+    return a?.summary || 'Read support and product guidance from Nxtgauge Help Center.';
+  });
 
   onMount(() => {
     const onScroll = () => setScrollY(window.scrollY || 0);
@@ -28,6 +43,17 @@ export default function HelpCenterArticlePage() {
 
   return (
     <main class="lp-main">
+      <Title>{pageTitle()}</Title>
+      <Meta name="description" content={pageDescription()} />
+      <Meta property="og:title" content={pageTitle()} />
+      <Meta property="og:description" content={pageDescription()} />
+      <Meta property="og:type" content="article" />
+      <Meta property="og:url" content={canonical()} />
+      <Meta name="twitter:card" content="summary_large_image" />
+      <Meta name="twitter:title" content={pageTitle()} />
+      <Meta name="twitter:description" content={pageDescription()} />
+      <link rel="canonical" href={canonical()} />
+
       <PublicBackground scrollY={scrollY()} />
       <div class="lp-content">
         <PublicHeader />
@@ -84,6 +110,25 @@ export default function HelpCenterArticlePage() {
 
               <section class="public-section scene-dark">
                 <div class="container panel panel-light" style={{ 'max-width': '960px' }}>
+                  <Show when={(relatedArticles() || []).length > 0}>
+                    <div style={{ 'margin-bottom': '20px' }}>
+                      <h2 style={{ margin: '0 0 10px', 'font-size': '22px' }}>Related Articles</h2>
+                      <div style={{ display: 'grid', gap: '10px' }}>
+                        <For each={relatedArticles() || []}>
+                          {(related) => (
+                            <A href={`/help-center/article/${related.slug}`} style={{ 'text-decoration': 'none' }}>
+                              <article style={{ border: '1px solid rgba(255,255,255,0.16)', 'border-radius': '12px', padding: '12px 14px', background: 'rgba(255,255,255,0.02)' }}>
+                                <p style={{ margin: 0, color: '#fd6116', 'font-size': '11px', 'font-weight': '700' }}>{related.category || 'General'}</p>
+                                <h3 style={{ margin: '5px 0 4px', color: '#fff', 'font-size': '16px' }}>{related.title}</h3>
+                                <p style={{ margin: 0, color: 'rgba(255,255,255,0.75)', 'font-size': '13px' }}>{related.summary}</p>
+                              </article>
+                            </A>
+                          )}
+                        </For>
+                      </div>
+                    </div>
+                  </Show>
+
                   <h2>Need more help?</h2>
                   <p class="sub">
                     If this article does not solve your issue, send your question with context to support.
diff --git a/src/routes/help-center/index.tsx b/src/routes/help-center/index.tsx
index 7f9dee3..771c3d4 100644
--- a/src/routes/help-center/index.tsx
+++ b/src/routes/help-center/index.tsx
@@ -1,4 +1,5 @@
 import { A } from '@solidjs/router';
+import { Meta, Title } from '@solidjs/meta';
 import { For, createResource, createSignal } from 'solid-js';
 import PublicBackground from '~/components/PublicBackground';
 import PublicFooter from '~/components/PublicFooter';
@@ -6,6 +7,9 @@ import PublicHeader from '~/components/PublicHeader';
 import { fetchHelpCenterArticles, fetchHelpCenterCategories } from '~/lib/help-center';
 
 export default function HelpCenterPage() {
+  const title = 'Help Center | Nxtgauge';
+  const description = 'Browse Nxtgauge guides for getting started, roles, requests, approvals, and platform troubleshooting.';
+  const canonical = 'https://test121.nxtgauge.com/help-center';
   const [query, setQuery] = createSignal('');
   const [category, setCategory] = createSignal('');
 
@@ -17,6 +21,17 @@ export default function HelpCenterPage() {
 
   return (
     <main class="lp-main">
+      <Title>{title}</Title>
+      <Meta name="description" content={description} />
+      <Meta property="og:title" content={title} />
+      <Meta property="og:description" content={description} />
+      <Meta property="og:type" content="website" />
+      <Meta property="og:url" content={canonical} />
+      <Meta name="twitter:card" content="summary_large_image" />
+      <Meta name="twitter:title" content={title} />
+      <Meta name="twitter:description" content={description} />
+      <link rel="canonical" href={canonical} />
+
       <PublicBackground />
       <div class="lp-content">
         <PublicHeader />
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 895c1a8..aff8e86 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,5 +1,24 @@
+import { Meta, Title } from '@solidjs/meta';
 import PublicLanding from '~/components/PublicLanding';
 
 export default function Home() {
-  return <PublicLanding />;
+  const title = 'Nxtgauge | Verified Jobs & Professional Services Platform';
+  const description = 'Trusted hiring and opportunity discovery for customers, companies, professionals, and job seekers with verification built in.';
+  const canonical = 'https://test121.nxtgauge.com/';
+
+  return (
+    <>
+      <Title>{title}</Title>
+      <Meta name="description" content={description} />
+      <Meta property="og:title" content={title} />
+      <Meta property="og:description" content={description} />
+      <Meta property="og:type" content="website" />
+      <Meta property="og:url" content={canonical} />
+      <Meta name="twitter:card" content="summary_large_image" />
+      <Meta name="twitter:title" content={title} />
+      <Meta name="twitter:description" content={description} />
+      <link rel="canonical" href={canonical} />
+      <PublicLanding />
+    </>
+  );
 }
diff --git a/src/routes/professionals/[slug].tsx b/src/routes/professionals/[slug].tsx
new file mode 100644
index 0000000..cb4c18d
--- /dev/null
+++ b/src/routes/professionals/[slug].tsx
@@ -0,0 +1,7 @@
+import { useParams } from '@solidjs/router';
+import RoleLandingPage from '~/components/RoleLandingPage';
+
+export default function ProfessionalDetailPage() {
+  const params = useParams();
+  return <RoleLandingPage slug={String(params.slug || '')} pathBase="/professionals" audience="professional" />;
+}
diff --git a/src/routes/professionals/index.tsx b/src/routes/professionals/index.tsx
new file mode 100644
index 0000000..2432551
--- /dev/null
+++ b/src/routes/professionals/index.tsx
@@ -0,0 +1,124 @@
+import { A } from '@solidjs/router';
+import { Meta, Title } from '@solidjs/meta';
+import { For, createSignal, onCleanup, onMount } from 'solid-js';
+import PublicFooter from '~/components/PublicFooter';
+import PublicHeader from '~/components/PublicHeader';
+import { professionalPages, professionalSignupHref } from '~/lib/professionals';
+
+const chipNodes = [
+  { left: '10%', top: '18%', size: 32, cls: 'lp-chip-slow', label: '★' },
+  { left: '31%', top: '8%', size: 36, cls: 'lp-chip-mid', label: '✓' },
+  { left: '82%', top: '12%', size: 34, cls: 'lp-chip-fast', label: '↗' },
+  { left: '72%', top: '34%', size: 30, cls: 'lp-chip-mid', label: '✦' },
+  { left: '16%', top: '62%', size: 36, cls: 'lp-chip-fast', label: '⚑' },
+  { left: '63%', top: '72%', size: 32, cls: 'lp-chip-slow', label: '⎈' },
+] as const;
+
+export default function ProfessionalsIndexPage() {
+  const [scrollY, setScrollY] = createSignal(0);
+  const [reduceMotion, setReduceMotion] = createSignal(false);
+  const canonical = 'https://test121.nxtgauge.com/professionals';
+  const title = 'Professionals | Nxtgauge Verified Service Categories';
+  const description = 'Explore verified professional categories on Nxtgauge and register with a trust-first workflow built for better opportunity quality.';
+
+  onMount(() => {
+    const media = window.matchMedia('(prefers-reduced-motion: reduce)');
+    const sync = () => setReduceMotion(media.matches);
+    sync();
+    const onScroll = () => setScrollY(window.scrollY || 0);
+    window.addEventListener('scroll', onScroll, { passive: true });
+    media.addEventListener('change', sync);
+    onCleanup(() => {
+      window.removeEventListener('scroll', onScroll);
+      media.removeEventListener('change', sync);
+    });
+  });
+
+  return (
+    <main class="lp-main">
+      <Title>{title}</Title>
+      <Meta name="description" content={description} />
+      <Meta property="og:title" content={title} />
+      <Meta property="og:description" content={description} />
+      <Meta property="og:type" content="website" />
+      <Meta property="og:url" content={canonical} />
+      <Meta name="twitter:card" content="summary_large_image" />
+      <Meta name="twitter:title" content={title} />
+      <Meta name="twitter:description" content={description} />
+      <link rel="canonical" href={canonical} />
+
+      <div class="lp-bg" aria-hidden="true">
+        <div class="lp-dark-base" />
+        <div class="lp-mesh" style={{ transform: `translate3d(0, ${reduceMotion() ? 0 : Math.min(36, scrollY() * 0.1)}px, 0)` }} />
+        <div class="lp-ribbon" style={{ transform: `translate3d(0, ${reduceMotion() ? 0 : Math.min(58, scrollY() * 0.18)}px, 0)` }} />
+        <div class="lp-chips" style={{ transform: `translate3d(0, ${reduceMotion() ? 0 : Math.min(80, scrollY() * 0.24)}px, 0)` }}>
+          <For each={chipNodes}>
+            {(chip) => (
+              <span class={`lp-chip ${chip.cls}`} style={{ left: chip.left, top: chip.top, width: `${chip.size}px`, height: `${chip.size}px` }}>
+                <span class="pro-detail-bg-chip-icon">{chip.label}</span>
+              </span>
+            )}
+          </For>
+        </div>
+        <div class="lp-noise" />
+      </div>
+      <div class="lp-content">
+        <PublicHeader />
+
+        <section class="public-section lp-section-hero">
+          <div class="container lp-hero-grid">
+            <div>
+              <p class="eyebrow">Professionals</p>
+              <h1 class="lp-hero-title" style="font-size:clamp(32px,4.6vw,52px)">Explore professional categories on Nxtgauge</h1>
+              <p class="lp-hero-copy">
+                Choose your category, understand what Nxtgauge offers for your role, and register with a trust-first workflow.
+              </p>
+              <div class="hero-actions">
+                <A class="lp-primary-btn" href="/signup?intent=professional">Get Started</A>
+                <A class="lp-ghost-btn lp-ghost-btn-dark" href="/professionals#paths">View categories</A>
+              </div>
+              <p class="lp-hero-note">Dedicated role pages are optimized for campaign traffic and search visibility.</p>
+            </div>
+            <div class="lp-hero-graph">
+              <img src="/images/roles/photographer.jpg" alt="Professional photography workspace setup" class="role-hero-photo" />
+            </div>
+          </div>
+        </section>
+
+        <section id="paths" class="public-section lp-section">
+          <div class="container panel choose-path-panel">
+            <div class="section-head">
+              <div>
+                <h2>All professional paths</h2>
+                <p class="sub">Stable landing pages for discovery, SEO, and campaign traffic.</p>
+              </div>
+            </div>
+            <div class="path-grid">
+              <For each={professionalPages}>
+                {(item) => (
+                  <article class="path-card">
+                    <div class="path-media">
+                      <img src={item.image} alt={item.shortTitle} loading="lazy" />
+                      <div class="path-media-overlay" />
+                    </div>
+                    <div class="path-body">
+                      <span class="path-chip">{item.category}</span>
+                      <h3>{item.shortTitle}</h3>
+                      <p>{item.heroDescription}</p>
+                      <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px">
+                        <A class="path-secondary-btn" href={`/professionals/${item.slug}`}>Explore</A>
+                        <A class="path-secondary-btn" href={professionalSignupHref(item.roleKey)}>Register</A>
+                      </div>
+                    </div>
+                  </article>
+                )}
+              </For>
+            </div>
+          </div>
+        </section>
+
+        <PublicFooter />
+      </div>
+    </main>
+  );
+}
diff --git a/src/routes/roles/[slug].tsx b/src/routes/roles/[slug].tsx
new file mode 100644
index 0000000..02295a8
--- /dev/null
+++ b/src/routes/roles/[slug].tsx
@@ -0,0 +1,7 @@
+import { useParams } from '@solidjs/router';
+import RoleLandingPage from '~/components/RoleLandingPage';
+
+export default function RoleLandingRoute() {
+  const params = useParams();
+  return <RoleLandingPage slug={String(params.slug || '')} pathBase="/roles" />;
+}
diff --git a/src/routes/signup.tsx b/src/routes/signup.tsx
index fe35466..d0d9f07 100644
--- a/src/routes/signup.tsx
+++ b/src/routes/signup.tsx
@@ -20,6 +20,7 @@ function normalizeIntent(intent: string | null | undefined): RoleKey {
   const v = String(intent || '').toLowerCase();
   if (v.includes('company')) return 'company';
   if (v.includes('professional')) return 'professional';
+  if (v.includes('developer') || v.includes('photographer') || v.includes('makeup') || v.includes('tutor') || v.includes('video') || v.includes('graphic') || v.includes('social') || v.includes('fitness') || v.includes('catering') || v.includes('ugc')) return 'professional';
   if (v.includes('customer')) return 'customer';
   return 'job_seeker';
 }
@@ -57,7 +58,8 @@ export default function SignupRoute() {
   const [search] = useSearchParams();
   onMount(() => {
     const intent = String(search.intent || '').trim();
-    if (!intent) navigate('/users/choose-role', { replace: true });
+    const role = String(search.role || '').trim();
+    if (!intent && !role) navigate('/users/choose-role', { replace: true });
   });
 
   const [step, setStep] = createSignal<'register' | 'verify'>('register');
@@ -66,7 +68,8 @@ export default function SignupRoute() {
   const [email, setEmail] = createSignal('');
   const [password, setPassword] = createSignal('');
   const [confirmPassword, setConfirmPassword] = createSignal('');
-  const role = createMemo<RoleKey>(() => normalizeIntent(search.intent));
+  const role = createMemo<RoleKey>(() => normalizeIntent(search.intent || search.role));
+  const selectedProfessionalRole = createMemo(() => String(search.role || '').trim().toUpperCase());
   const [termsAccepted, setTermsAccepted] = createSignal(false);
   const [captcha, setCaptcha] = createSignal('');
   const [captchaCode, setCaptchaCode] = createSignal(randomCaptcha());
@@ -152,6 +155,7 @@ export default function SignupRoute() {
       email: input.email.toLowerCase(),
       roleKey: input.roleKey,
       role: input.roleKey,
+      selectedProfessionalRole: selectedProfessionalRole() || null,
       user: input.user || null,
     };
     if (typeof window !== 'undefined') {