From 2afebd23b69d7eb623457583e31e63a415a84b1a Mon Sep 17 00:00:00 2001
From: raineer <raineerdelarita@gmail.com>
Date: Tue, 28 Jul 2026 21:40:36 +0800
Subject: [PATCH 1/2]  CBP-135 follow-up: metadataBase, JSON-LD, H1 fixes,
 alt-text fixesauto extend membership

---
 .../app/(marketing)/_components/JsonLd.tsx    |  12 ++
 .../_components/landing/LandingDiamond.tsx    |   4 +-
 .../_components/landing/LandingMovingText.tsx |  10 +-
 .../landing/LandingWhyChoose-us.tsx           |   2 +-
 .../_components/landing/LandingWhyChoose.tsx  |  50 +++----
 .../_components/AiIntegrationSolutions.tsx    |   8 +-
 .../careers/_components/CodevsProject.tsx     |  20 ++-
 .../careers/_components/JobListings.tsx       |  52 ++++++-
 .../codevs/_components/CodevsProject.tsx      |  26 ++--
 .../_components/CodevsProject.tsx             |  26 ++--
 .../app/(marketing)/profiles/[id]/page.tsx    |  19 ++-
 .../app/(marketing)/services/page.tsx         |  26 +++-
 apps/codebility/app/layout.tsx                | 141 +++++++++++-------
 13 files changed, 266 insertions(+), 130 deletions(-)
 create mode 100644 apps/codebility/app/(marketing)/_components/JsonLd.tsx

diff --git a/apps/codebility/app/(marketing)/_components/JsonLd.tsx b/apps/codebility/app/(marketing)/_components/JsonLd.tsx
new file mode 100644
index 000000000..e71b013c9
--- /dev/null
+++ b/apps/codebility/app/(marketing)/_components/JsonLd.tsx
@@ -0,0 +1,12 @@
+// CBP-135 follow-up: shared JSON-LD renderer.
+// Usage: <JsonLd data={someSchemaObject} />
+export default function JsonLd({ data }: { data: Record<string, unknown> }) {
+  return (
+    <script
+      type="application/ld+json"
+      // JSON.stringify is safe here — schema.org data is server-generated,
+      // not raw user input, so no XSS risk via this dangerouslySetInnerHTML.
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
+    />
+  );
+}
diff --git a/apps/codebility/app/(marketing)/_components/landing/LandingDiamond.tsx b/apps/codebility/app/(marketing)/_components/landing/LandingDiamond.tsx
index 7bb963594..b3336b08b 100644
--- a/apps/codebility/app/(marketing)/_components/landing/LandingDiamond.tsx
+++ b/apps/codebility/app/(marketing)/_components/landing/LandingDiamond.tsx
@@ -7,7 +7,7 @@ const Diamond = ({ color }: { color?: string }) => {
       {color === "violet" ? (
         <div className="relative">
           <Image
-            alt="diamond-icon"
+            alt=""
             src="https://codebility-cdn.pages.dev/assets/svgs/icon-diamond-purple.svg"
             width={30}
             height={30}
@@ -18,7 +18,7 @@ const Diamond = ({ color }: { color?: string }) => {
       ) : color === "teal" ? (
         <div className="relative">
           <Image
-            alt="diamond-icon"
+            alt=""
             src="https://codebility-cdn.pages.dev/assets/svgs/icon-diamond-teal.svg"
             width={30}
             height={30}
diff --git a/apps/codebility/app/(marketing)/_components/landing/LandingMovingText.tsx b/apps/codebility/app/(marketing)/_components/landing/LandingMovingText.tsx
index 6a4dfc719..ae107fca1 100644
--- a/apps/codebility/app/(marketing)/_components/landing/LandingMovingText.tsx
+++ b/apps/codebility/app/(marketing)/_components/landing/LandingMovingText.tsx
@@ -6,7 +6,7 @@ const MovingText = () => {
     <div className="text-md border-light-900/5 bg-light-900/5 flex w-full flex-col items-center justify-center gap-4 border-y-4 p-8 text-center text-white md:mt-20 md:text-3xl lg:text-5xl">
       <div className="flex w-full flex-row items-center justify-center gap-4 px-4">
         <Image
-          alt="diamond-icon"
+          alt=""
           src="/assets/svgs/icon-diamond-purple.svg"
 
           width={30}
@@ -15,7 +15,7 @@ const MovingText = () => {
         Mobile Development{" "}
         <span>
           <Image
-            alt="diamond-icon"
+            alt=""
             src="/assets/svgs/icon-diamond-sky.svg"
             width={30}
             height={30}
@@ -25,7 +25,7 @@ const MovingText = () => {
         Digital Marketing
         <span>
           <Image
-            alt="diamond-icon"
+            alt=""
             src="/assets/svgs/icon-diamond-purple.svg"
             width={30}
             height={30}
@@ -37,7 +37,7 @@ const MovingText = () => {
         UI/UX Design{" "}
         <span>
           <Image
-            alt="diamond-icon"
+            alt=""
             src="/assets/svgs/icon-diamond-sky.svg"
             width={30}
             height={30}
@@ -47,7 +47,7 @@ const MovingText = () => {
         AI-Development{" "}
         <span>
           <Image
-            alt="diamond-icon"
+            alt=""
             src="/assets/svgs/icon-diamond-purple.svg"
             width={30}
             height={30}
diff --git a/apps/codebility/app/(marketing)/_components/landing/LandingWhyChoose-us.tsx b/apps/codebility/app/(marketing)/_components/landing/LandingWhyChoose-us.tsx
index 334dae19b..58c33e695 100644
--- a/apps/codebility/app/(marketing)/_components/landing/LandingWhyChoose-us.tsx
+++ b/apps/codebility/app/(marketing)/_components/landing/LandingWhyChoose-us.tsx
@@ -259,7 +259,7 @@ const WhyChooseUs = () => {
                 >
                   <Image
                     src="https://codebility-cdn.pages.dev/assets/images/index/choose-heart.png"
-                    alt="tailored"
+                    alt="Customer-centric solution icon"
                     width={200}
                     height={200}
                     className="h-[150px] w-[150px] object-contain lg:h-[200px] lg:w-[200px]"
diff --git a/apps/codebility/app/(marketing)/_components/landing/LandingWhyChoose.tsx b/apps/codebility/app/(marketing)/_components/landing/LandingWhyChoose.tsx
index df4c306af..b6d764e54 100644
--- a/apps/codebility/app/(marketing)/_components/landing/LandingWhyChoose.tsx
+++ b/apps/codebility/app/(marketing)/_components/landing/LandingWhyChoose.tsx
@@ -10,18 +10,18 @@ const WhyChoose = () => {
     <div id="3" className="text-light-900  relative  w-full p-2 md:p-12">
       <div className="flex flex-col items-center justify-center ">
         <div className=" max-w-[1200px] md:px-14">
-          <h1 className="px-4 text-2xl font-bold md:px-0 md:text-3xl">
+          <h2 className="px-4 text-2xl font-bold md:px-0 md:text-3xl">
             Why Choose Codebility?
-          </h1>
+          </h2>
           <div className="flex w-full flex-col  gap-2 px-4 pt-10 md:flex-row md:items-center md:justify-center md:px-0 ">
             {/* 1st col */}
             <div className="flex flex-col items-center justify-center gap-4">
               <div className="bg-light-900/25 flex h-[400px] w-full flex-col justify-between rounded-lg p-6 md:max-w-[700px]">
-                <h1 className="gap-4">
+                <h3 className="gap-4">
                   01 <span>Pushing Creativity Boundaries</span>
-                </h1>
+                </h3>
                 <div>
-                  <h2 className="text-3xl font-bold">Innovative Approach</h2>
+                  <h4 className="text-3xl font-bold">Innovative Approach</h4>
                   <p>
                     Embrace innovation with Codebility. Crafting <br />
                     revolutionary digital solutions that create new posibilites
@@ -31,8 +31,7 @@ const WhyChoose = () => {
               <div className="flex w-full flex-col gap-4 md:flex-row">
                 <div className=" h-[320px] w-full   rounded-lg  ">
                   <Image
-
-                    alt="A guy sitting"
+                    alt="Codebility developer working at a desk"
                     src="/assets/images/campaign/guy-sitting.png"
                     width={300}
                     height={90}
@@ -40,12 +39,12 @@ const WhyChoose = () => {
                   />
                 </div>
                 <div className="flex h-[320px] w-full flex-col gap-4 rounded-lg bg-[#0A0A0A] p-4 md:max-w-[600px]">
-                  <h1>03</h1>
-                  <h2 className="text-[#02FFE2]">Tailored for you</h2>
-                  <h3 className="text-lg font-bold">
+                  <h3>03</h3>
+                  <h4 className="text-[#02FFE2]">Tailored for you</h4>
+                  <h5 className="text-lg font-bold">
                     Customer- <br />
                     Centric Solution
-                  </h3>
+                  </h5>
                   <p>
                     Understanding your vision and helping you bring your online
                     vision to life.{" "}
@@ -56,12 +55,12 @@ const WhyChoose = () => {
             {/* 2nd col */}
             <div className="flex flex-col items-center justify-center gap-4 ">
               <div className="flex h-[400px] w-full flex-col  justify-between rounded-lg bg-[#6A78F2] p-6 md:h-[540px] md:pl-6 md:pt-6">
-                <h1 className="gap-4">
+                <h3 className="gap-4">
                   02 <span>Digital Maestros Collective</span>
-                </h1>
+                </h3>
                 <div className="flex flex-row">
                   <div className="flex max-w-[600px] flex-col">
-                    <h2 className="pt-14 text-3xl font-bold">Expert Team</h2>
+                    <h4 className="pt-14 text-3xl font-bold">Expert Team</h4>
 
                     <p className=" pt-4">
                       At codebility our passionate experts bring their A-Game to
@@ -70,8 +69,7 @@ const WhyChoose = () => {
                   </div>
                   <Image
                     src="/assets/images/campaign/laptop-browsing.png"
-                    alt="Laptop Browsing"
-
+                    alt="Codebility team member browsing on a laptop"
                     width={410}
                     height={120}
                     className="hidden  md:block md:size-60 md:object-cover md:pt-36"
@@ -79,9 +77,9 @@ const WhyChoose = () => {
                 </div>
               </div>
               <div className="bg-light-900/5 flex h-[180px]  w-full items-center justify-center rounded-lg">
-                <h1 className="px-2 text-center text-2xl font-bold md:text-3xl">
+                <h3 className="px-2 text-center text-2xl font-bold md:text-3xl">
                   Your Uniqueness is our focus
-                </h1>
+                </h3>
               </div>
             </div>
           </div>
@@ -91,18 +89,17 @@ const WhyChoose = () => {
               <div className="w-full rounded-lg md:h-[400px] ">
                 <Image
                   src="/assets/images/campaign/inquire.png"
-                  alt="projects"
+                  alt="Codebility project inquiry illustration"
                   width={100}
                   className="w-full rounded-lg object-cover"
-
                   height={100}
                 />
               </div>
               <div className="flex flex-col">
-                <h1 className="pt-0 md:pt-2">
+                <h3 className="pt-0 md:pt-2">
                   Build your own website with us today and ensure a <br />{" "}
                   reliable, cutting-edge online presence.
-                </h1>
+                </h3>
                 <Link
                   href="/services"
                   className="flex items-end justify-end md:pt-6"
@@ -125,18 +122,17 @@ const WhyChoose = () => {
               <div className="w-full rounded-lg md:h-[400px]">
                 <Image
                   src="/assets/images/campaign/codevs.png"
-                  alt="codevs"
+                  alt="Codebility developer team collaborating"
                   width={100}
                   height={100}
                   className="w-full rounded-lg object-cover"
-
                 />
               </div>
               <div className="flex flex-col">
-                <h1 className="pt-0 md:pt-2">
+                <h3 className="pt-0 md:pt-2">
                   Connect with the best developer to meet your <br /> needs
                   through our top-rated professionals.
-                </h1>
+                </h3>
                 <Link
                   href="/codev"
                   className="flex items-end justify-end md:pt-6"
@@ -149,7 +145,7 @@ const WhyChoose = () => {
                     Hire a CoDev{" "}
                     <span className="text-black-400 flex size-7 flex-col items-center justify-center rounded-full bg-white">
                       <Image
-                        alt="arrow-right-icon"
+                        alt="Arrow pointing right"
                         src="/assets/svgs/icon-arrow-right.svg"
                         width={7}
                         height={7}
diff --git a/apps/codebility/app/(marketing)/ai-integration/_components/AiIntegrationSolutions.tsx b/apps/codebility/app/(marketing)/ai-integration/_components/AiIntegrationSolutions.tsx
index 00eee2fdc..a88405bc3 100644
--- a/apps/codebility/app/(marketing)/ai-integration/_components/AiIntegrationSolutions.tsx
+++ b/apps/codebility/app/(marketing)/ai-integration/_components/AiIntegrationSolutions.tsx
@@ -64,7 +64,7 @@ const AISolutions = () => {
             <div className="col-start-1 col-end-2 row-start-3 row-end-5 hidden overflow-hidden rounded-xl bg-customBlue-100 lg:block">
               <Image
                 src="/assets/images/ai-integration/woman.jpg"
-                alt="woman"
+                alt="Woman working on a laptop"
                 width={300}
                 height={450}
                 className="h-full w-full object-cover"
@@ -74,7 +74,7 @@ const AISolutions = () => {
               <div className="flex h-full flex-col place-items-center justify-around gap-3">
                 <Image
                   src="/assets/images/ai-integration/scalable.png"
-                  alt="tailored"
+                  alt="Seamless scalability icon"
                   width={200}
                   height={200}
                   className="h-[150px] w-[150px] object-contain lg:h-[200px] lg:w-[200px]"
@@ -104,7 +104,7 @@ const AISolutions = () => {
               <div className="flex h-full flex-col place-items-center justify-around gap-3  xl:px-10 xl:py-5">
                 <Image
                   src="/assets/images/index/choose-heart.png"
-                  alt="tailored"
+                  alt="Customer support icon"
                   width={200}
                   height={200}
                   className="h-[150px] w-[150px] object-contain lg:h-[200px] lg:w-[200px]"
@@ -125,7 +125,7 @@ const AISolutions = () => {
               <div className="flex h-full flex-col place-items-center justify-around gap-3 xl:px-12 xl:py-5">
                 <Image
                   src="/assets/images/ai-integration/robot.png"
-                  alt="tailored"
+                  alt="AI robot icon representing automated content management"
                   width={200}
                   height={200}
                   className="h-[150px] w-[150px] object-contain lg:h-[200px] lg:w-[200px]"
diff --git a/apps/codebility/app/(marketing)/careers/_components/CodevsProject.tsx b/apps/codebility/app/(marketing)/careers/_components/CodevsProject.tsx
index c9b5ef8dd..d2335660a 100644
--- a/apps/codebility/app/(marketing)/careers/_components/CodevsProject.tsx
+++ b/apps/codebility/app/(marketing)/careers/_components/CodevsProject.tsx
@@ -37,13 +37,15 @@ export default async function ProjectSection() {
     return (
       <section className="bg-black-400 relative flex min-h-screen w-full flex-col justify-center text-center ">
         <div className="mb-10 space-y-2">
-          <h1 className="text-2xl font-bold uppercase tracking-[0.7em] text-white lg:text-4xl">
+          {/* CBP-135 follow-up: was <h1>, duplicated a second <h1> below for
+              one visual title. Demoted to non-heading eyebrow label. */}
+          <span className="block text-2xl font-bold uppercase tracking-[0.7em] text-white lg:text-4xl">
             Our Featured
-          </h1>
+          </span>
           <p className="text-customTeal text-lg font-bold lg:text-2xl">internal</p>
-          <h1 className="text-3xl font-normal uppercase -tracking-widest text-white lg:text-5xl">
+          <h2 className="text-3xl font-normal uppercase -tracking-widest text-white lg:text-5xl">
             Projects
-          </h1>
+          </h2>
         </div>
         <div className="text-center text-white">
           Error loading projects. Please try again.
@@ -87,13 +89,15 @@ export default async function ProjectSection() {
   return (
     <Section className="bg-black-400 relative mt-10 flex  w-full flex-col justify-center text-center ">
       <div className="mb-10 space-y-2">
-        <h1 className="text-2xl font-bold uppercase tracking-[0.7em] text-white lg:text-4xl">
+        {/* CBP-135 follow-up: was <h1>, duplicated a second <h1> below for
+            one visual title. Demoted to non-heading eyebrow label. */}
+        <span className="block text-2xl font-bold uppercase tracking-[0.7em] text-white lg:text-4xl">
           Our Featured
-        </h1>
+        </span>
         <p className="text-customTeal text-lg font-bold lg:text-2xl">internal</p>
-        <h1 className="text-3xl font-normal uppercase -tracking-widest text-white lg:text-5xl">
+        <h2 className="text-3xl font-normal uppercase -tracking-widest text-white lg:text-5xl">
           Projects
-        </h1>
+        </h2>
       </div>
 
       {slides.length > 0 ? (
diff --git a/apps/codebility/app/(marketing)/careers/_components/JobListings.tsx b/apps/codebility/app/(marketing)/careers/_components/JobListings.tsx
index 6ebbc1629..581f5ea8c 100644
--- a/apps/codebility/app/(marketing)/careers/_components/JobListings.tsx
+++ b/apps/codebility/app/(marketing)/careers/_components/JobListings.tsx
@@ -8,6 +8,7 @@ import { JobListing } from "../_types/job-listings";
 import JobApplicationModal from "./JobApplicationModal";
 import { createClientClientComponent } from "@/utils/supabase/client";
 import { Skeleton } from "@/components/ui/skeleton/skeleton";
+import JsonLd from "../../_components/JsonLd";
 
 export default function JobListings() {
   const [currentPage, setCurrentPage] = useState(1);
@@ -117,8 +118,57 @@ export default function JobListings() {
     }
   };
 
+  // CBP-135 follow-up: JobPosting JSON-LD.
+  // NOTE: this is a client component that fetches data via useEffect, so this
+  // schema only exists in the DOM post-hydration, not in initial server HTML.
+  // Works for crawlers that fully render JS (Googlebot does) but is less
+  // reliable than server-rendered JSON-LD. Proper fix is fetching job data
+  // server-side in careers/page.tsx and passing it down — flagged as a
+  // follow-up, not done here to keep this change minimal.
+  const jobPostingSchema = jobListings.length > 0 ? {
+    "@context": "https://schema.org",
+    "@type": "ItemList",
+    itemListElement: jobListings.map((job, index) => ({
+      "@type": "ListItem",
+      position: index + 1,
+      item: {
+        "@type": "JobPosting",
+        title: job.title,
+        description: job.description,
+        datePosted: job.posted_date,
+        // schema.org expects FULL_TIME / PART_TIME / CONTRACTOR / INTERN.
+        // Explicit map instead of a string transform — Contract and
+        // Internship don't follow the same uppercase+underscore pattern
+        // as Full-time/Part-time, so a naive transform produces wrong values.
+        employmentType: {
+          "Full-time": "FULL_TIME",
+          "Part-time": "PART_TIME",
+          "Contract": "CONTRACTOR",
+          "Internship": "INTERN",
+        }[job.type] || undefined,
+        hiringOrganization: {
+          "@type": "Organization",
+          name: "Codebility",
+          sameAs: "https://www.codebility.tech",
+        },
+        jobLocation: job.remote
+          ? undefined
+          : { "@type": "Place", address: job.location },
+        applicantLocationRequirements: job.remote
+          ? { "@type": "Country", name: "Anywhere" }
+          : undefined,
+        baseSalary: job.salary_range ? {
+          "@type": "MonetaryAmount",
+          currency: "PHP",
+          value: { "@type": "QuantitativeValue", value: job.salary_range },
+        } : undefined,
+      },
+    })),
+  } : null;
+
   return (
     <section id="open-positions" className="relative py-20 border-y border-gray-800">
+      {jobPostingSchema && <JsonLd data={jobPostingSchema} />}
       <div className="mx-auto max-w-7xl px-6">
         <div className="mb-12 text-center">
           <h2 className="mb-4 text-4xl font-light tracking-tight text-white">
@@ -387,4 +437,4 @@ export default function JobListings() {
       />
     </section>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/codebility/app/(marketing)/codevs/_components/CodevsProject.tsx b/apps/codebility/app/(marketing)/codevs/_components/CodevsProject.tsx
index 48f999050..f92adab20 100644
--- a/apps/codebility/app/(marketing)/codevs/_components/CodevsProject.tsx
+++ b/apps/codebility/app/(marketing)/codevs/_components/CodevsProject.tsx
@@ -37,13 +37,15 @@ export default async function ProjectSection() {
     return (
       <section className="bg-black-400 relative flex min-h-screen w-full flex-col justify-center text-center ">
         <div className="mb-10 space-y-2">
-          <h1 className="text-2xl font-bold uppercase tracking-[0.7em] text-white lg:text-4xl">
+          {/* CBP-135 follow-up: was <h1>, duplicated a second <h1> below for
+              one visual title. Demoted to non-heading eyebrow label. */}
+          <span className="block text-2xl font-bold uppercase tracking-[0.7em] text-white lg:text-4xl">
             Our Featured
-          </h1>
+          </span>
           <p className="text-customTeal text-lg font-bold lg:text-2xl">internal</p>
-          <h1 className="text-3xl font-normal uppercase -tracking-widest text-white lg:text-5xl">
+          <h2 className="text-3xl font-normal uppercase -tracking-widest text-white lg:text-5xl">
             Projects
-          </h1>
+          </h2>
         </div>
         <div className="text-center text-white">
           Error loading projects. Please try again.
@@ -65,7 +67,7 @@ export default async function ProjectSection() {
   if (activeProjects && activeProjects.length > 0) {
     for (const project of activeProjects) {
       let imageUrl = '';
-      
+
       if (project.main_image && project.main_image.trim()) {
         imageUrl = project.main_image.trim();
 
@@ -92,7 +94,7 @@ export default async function ProjectSection() {
         // Use fallback image for projects without images
         imageUrl = '/assets/images/index/projects-large.jpg';
       }
-      
+
       // Store both the image URL and project data
       projectsWithImages.push({
         ...project,
@@ -107,13 +109,15 @@ export default async function ProjectSection() {
   return (
     <Section className="bg-black-400 relative mt-10 flex  w-full flex-col justify-center text-center ">
       <div className="mb-10 space-y-2">
-        <h1 className="text-2xl font-bold uppercase tracking-[0.7em] text-white lg:text-4xl">
+        {/* CBP-135 follow-up: was <h1>, duplicated a second <h1> below for
+            one visual title. Demoted to non-heading eyebrow label. */}
+        <span className="block text-2xl font-bold uppercase tracking-[0.7em] text-white lg:text-4xl">
           Our Featured
-        </h1>
+        </span>
         <p className="text-customTeal text-lg font-bold lg:text-2xl">internal</p>
-        <h1 className="text-3xl font-normal uppercase -tracking-widest text-white lg:text-5xl">
+        <h2 className="text-3xl font-normal uppercase -tracking-widest text-white lg:text-5xl">
           Projects
-        </h1>
+        </h2>
       </div>
 
       {slides.length > 0 ? (
@@ -129,4 +133,4 @@ export default async function ProjectSection() {
       )}
     </Section>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/codebility/app/(marketing)/hire-a-codev/_components/CodevsProject.tsx b/apps/codebility/app/(marketing)/hire-a-codev/_components/CodevsProject.tsx
index 48f999050..f92adab20 100644
--- a/apps/codebility/app/(marketing)/hire-a-codev/_components/CodevsProject.tsx
+++ b/apps/codebility/app/(marketing)/hire-a-codev/_components/CodevsProject.tsx
@@ -37,13 +37,15 @@ export default async function ProjectSection() {
     return (
       <section className="bg-black-400 relative flex min-h-screen w-full flex-col justify-center text-center ">
         <div className="mb-10 space-y-2">
-          <h1 className="text-2xl font-bold uppercase tracking-[0.7em] text-white lg:text-4xl">
+          {/* CBP-135 follow-up: was <h1>, duplicated a second <h1> below for
+              one visual title. Demoted to non-heading eyebrow label. */}
+          <span className="block text-2xl font-bold uppercase tracking-[0.7em] text-white lg:text-4xl">
             Our Featured
-          </h1>
+          </span>
           <p className="text-customTeal text-lg font-bold lg:text-2xl">internal</p>
-          <h1 className="text-3xl font-normal uppercase -tracking-widest text-white lg:text-5xl">
+          <h2 className="text-3xl font-normal uppercase -tracking-widest text-white lg:text-5xl">
             Projects
-          </h1>
+          </h2>
         </div>
         <div className="text-center text-white">
           Error loading projects. Please try again.
@@ -65,7 +67,7 @@ export default async function ProjectSection() {
   if (activeProjects && activeProjects.length > 0) {
     for (const project of activeProjects) {
       let imageUrl = '';
-      
+
       if (project.main_image && project.main_image.trim()) {
         imageUrl = project.main_image.trim();
 
@@ -92,7 +94,7 @@ export default async function ProjectSection() {
         // Use fallback image for projects without images
         imageUrl = '/assets/images/index/projects-large.jpg';
       }
-      
+
       // Store both the image URL and project data
       projectsWithImages.push({
         ...project,
@@ -107,13 +109,15 @@ export default async function ProjectSection() {
   return (
     <Section className="bg-black-400 relative mt-10 flex  w-full flex-col justify-center text-center ">
       <div className="mb-10 space-y-2">
-        <h1 className="text-2xl font-bold uppercase tracking-[0.7em] text-white lg:text-4xl">
+        {/* CBP-135 follow-up: was <h1>, duplicated a second <h1> below for
+            one visual title. Demoted to non-heading eyebrow label. */}
+        <span className="block text-2xl font-bold uppercase tracking-[0.7em] text-white lg:text-4xl">
           Our Featured
-        </h1>
+        </span>
         <p className="text-customTeal text-lg font-bold lg:text-2xl">internal</p>
-        <h1 className="text-3xl font-normal uppercase -tracking-widest text-white lg:text-5xl">
+        <h2 className="text-3xl font-normal uppercase -tracking-widest text-white lg:text-5xl">
           Projects
-        </h1>
+        </h2>
       </div>
 
       {slides.length > 0 ? (
@@ -129,4 +133,4 @@ export default async function ProjectSection() {
       )}
     </Section>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/codebility/app/(marketing)/profiles/[id]/page.tsx b/apps/codebility/app/(marketing)/profiles/[id]/page.tsx
index cb7d16201..173fd9483 100644
--- a/apps/codebility/app/(marketing)/profiles/[id]/page.tsx
+++ b/apps/codebility/app/(marketing)/profiles/[id]/page.tsx
@@ -5,6 +5,7 @@ import Logo from "@/components/shared/Logo";
 import { getCodevs } from "@/lib/server/codev.service";
 import { Codev } from "@/types/home/codev";
 
+import JsonLd from "../../_components/JsonLd";
 import ProfileCloseButton from "./_components/ProfileCloseButton";
 import ProfileContent from "./_components/ProfileContent";
 
@@ -68,8 +69,24 @@ export default async function CodevBioPage(props: Props) {
     const codev = data[0] as Codev;
     const availableSchedule = codev.work_schedules ? codev.work_schedules[0] : null;
 
+    // CBP-135 follow-up: Person schema, built only from confirmed Codev type fields.
+    // JSON.stringify drops undefined keys automatically, so optional fields
+    // that are null/missing on this codev simply won't appear in the output.
+    const personSchema = {
+        "@context": "https://schema.org",
+        "@type": "Person",
+        name: `${codev.first_name} ${codev.last_name}`,
+        jobTitle: codev.display_position || codev.positions?.[0] || undefined,
+        description: codev.about || undefined,
+        image: codev.image_url || undefined,
+        url: `https://www.codebility.tech/profiles/${id}`,
+        sameAs: [codev.github, codev.linkedin, codev.portfolio_website].filter(Boolean),
+        knowsAbout: codev.tech_stacks?.length ? codev.tech_stacks : undefined,
+    };
+
     return (
         <section className="from-black-500 to-black-100 relative flex min-h-screen flex-col bg-gradient-to-l">
+            <JsonLd data={personSchema} />
             <div className="bg-section-wrapper absolute inset-0 bg-fixed bg-repeat opacity-20"></div>
             <div className="relative flex-grow px-5 py-5 md:px-10 md:py-10 lg:px-32 lg:py-20">
                 <div className="flex justify-between gap-2">
@@ -87,4 +104,4 @@ export default async function CodevBioPage(props: Props) {
             </div>
         </section>
     );
-}
\ No newline at end of file
+}
diff --git a/apps/codebility/app/(marketing)/services/page.tsx b/apps/codebility/app/(marketing)/services/page.tsx
index 8b6877769..bc39617c2 100644
--- a/apps/codebility/app/(marketing)/services/page.tsx
+++ b/apps/codebility/app/(marketing)/services/page.tsx
@@ -6,6 +6,7 @@ import { createClientServerComponent } from "@/utils/supabase/server";
 
 import Footer from "../_components/MarketingFooter";
 import Navigation from "../_components/MarketingNavigation";
+import JsonLd from "../_components/JsonLd";
 import { ServicesPageContent } from "./_components/layout";
 import { ClientTechyBackground } from "./_components/visuals";
 import { ServiceProvider } from "./_context";
@@ -95,8 +96,31 @@ const ServicesPage = async () => {
         tech_stack: item.tech_stack || [],
     }));
 
+    // CBP-135 follow-up: ItemList of CreativeWork, not "Service" schema.
+    // This page renders a project portfolio (name, gallery, github_link, members,
+    // tech_stack) — it has no serviceType/provider fields "Service" schema requires.
+    // ItemList/CreativeWork matches what's actually on the page.
+    const portfolioSchema = {
+        "@context": "https://schema.org",
+        "@type": "ItemList",
+        name: "Codebility Project Portfolio",
+        itemListElement: mappedData.map((project, index) => ({
+            "@type": "ListItem",
+            position: index + 1,
+            item: {
+                "@type": "CreativeWork",
+                name: project.name,
+                description: project.description || project.tagline || undefined,
+                image: project.main_image || undefined,
+                url: project.website_url || undefined,
+                keywords: project.tech_stack?.length ? project.tech_stack.join(", ") : undefined,
+            },
+        })),
+    };
+
     return (
         <div className="relative flex min-h-screen w-full flex-col overflow-x-hidden overflow-y-hidden bg-[#030303]">
+            <JsonLd data={portfolioSchema} />
             <ClientTechyBackground />
             <div className="relative z-10">
                 <Navigation />
@@ -108,4 +132,4 @@ const ServicesPage = async () => {
     );
 };
 
-export default ServicesPage;
\ No newline at end of file
+export default ServicesPage;
diff --git a/apps/codebility/app/layout.tsx b/apps/codebility/app/layout.tsx
index 069ec3472..5ac87efe9 100644
--- a/apps/codebility/app/layout.tsx
+++ b/apps/codebility/app/layout.tsx
@@ -8,55 +8,78 @@ import { ThemeProvider } from "@/context/ThemeProvider";
 import ToasterContext from "@/context/ToasterProvider";
 import ReactQueryProvider from "@/hooks/reactQuery";
 import { TooltipProvider } from "@codevs/ui/tooltip";
+import JsonLd from "@/app/(marketing)/_components/JsonLd";
 
 const outfit = Outfit({
-	subsets: ["latin"],
-	preload: false,
+    subsets: ["latin"],
+    preload: false,
 });
 
+// CBP-135 follow-up: sitewide Organization + WebSite JSON-LD.
+// Static schema — no data dependency, safe to render on every page.
+const organizationSchema = {
+    "@context": "https://schema.org",
+    "@type": "Organization",
+    name: "Codebility",
+    url: "https://www.codebility.tech",
+    logo: "https://www.codebility.tech/assets/images/logo.png",
+    description: "Everyone has the ability to code",
+};
+
+const websiteSchema = {
+    "@context": "https://schema.org",
+    "@type": "WebSite",
+    name: "Codebility",
+    url: "https://www.codebility.tech",
+};
+
 export async function generateMetadata(): Promise<Metadata> {
-	return {
-		title: "Codebility",
-		description: "Everyone has the ability to code",
-		icons: {
-			icon: [
-				{ url: "/favicon.ico" },
-				{ url: "/favicon-16x16.png", sizes: "16x16", type: "image/png" },
-				{ url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
-			],
-			apple: [{ url: "/apple-touch-icon.png", sizes: "180x180" }],
-			other: [
-				{ rel: "mask-icon", url: "/safari-pinned-tab.svg", color: "#5bbad5" },
-			],
-		},
-		manifest: "/site.webmanifest",
-		openGraph: {
-			title: "Codebility",
-			description: "Everyone has the ability to code",
-			url: "https://www.codebility.tech/",
-			siteName: "Codebility",
-			images: [
-				{
-					url: "/og-image.jpg",
-					width: 1200,
-					height: 630,
-					alt: "Codebility Logo",
-				},
-			],
-			type: "website",
-		},
-	};
+    return {
+        // CBP-135 follow-up fix: metadataBase was missing on dev, confirmed via
+        // pasted layout.tsx. Required so relative OG image paths (/og-image.jpg)
+        // resolve correctly in social previews.
+        metadataBase: new URL("https://www.codebility.tech"),
+        title: "Codebility",
+        description: "Everyone has the ability to code",
+        icons: {
+            icon: [
+                { url: "/favicon.ico" },
+                { url: "/favicon-16x16.png", sizes: "16x16", type: "image/png" },
+                { url: "/favicon-32x32.png", sizes: "32x32", type: "image/png" },
+            ],
+            apple: [{ url: "/apple-touch-icon.png", sizes: "180x180" }],
+            other: [
+                { rel: "mask-icon", url: "/safari-pinned-tab.svg", color: "#5bbad5" },
+            ],
+        },
+        manifest: "/site.webmanifest",
+        openGraph: {
+            title: "Codebility",
+            description: "Everyone has the ability to code",
+            url: "https://www.codebility.tech/",
+            siteName: "Codebility",
+            images: [
+                {
+                    url: "/og-image.jpg",
+                    width: 1200,
+                    height: 630,
+                    alt: "Codebility Logo",
+                },
+            ],
+            type: "website",
+        },
+    };
 }
 
 export default function RootLayout({
-	children,
+    children,
 }: {
-	children: React.ReactNode;
+    children: React.ReactNode;
 }) {
-	return (
-		<html lang="en" className={outfit.className} suppressHydrationWarning>
-			<head>
-				{/*  <script
+    return (
+        <html lang="en" className={outfit.className} suppressHydrationWarning>
+            <head>
+                {/*  <script
           dangerouslySetInnerHTML={{
             __html: `
               (function() {
@@ -76,23 +99,25 @@ export default function RootLayout({
             `,
           }}
         /> */}
-			</head>
-			<body suppressHydrationWarning>
-				<ReactQueryProvider>
-					<ThemeProvider
-						attribute="class"
-						defaultTheme="system"
-						enableSystem
-						disableTransitionOnChange
-					>
-						<TooltipProvider>
-							<Toaster />
-							<ToasterContext />
-							{children}
-						</TooltipProvider>
-					</ThemeProvider>
-				</ReactQueryProvider>
-			</body>
-		</html>
-	);
+            </head>
+            <body suppressHydrationWarning>
+                <JsonLd data={organizationSchema} />
+                <JsonLd data={websiteSchema} />
+                <ReactQueryProvider>
+                    <ThemeProvider
+                        attribute="class"
+                        defaultTheme="system"
+                        enableSystem
+                        disableTransitionOnChange
+                    >
+                        <TooltipProvider>
+                            <Toaster />
+                            <ToasterContext />
+                            {children}
+                        </TooltipProvider>
+                    </ThemeProvider>
+                </ReactQueryProvider>
+            </body>
+        </html>
+    );
 }

From fcda0c64dca1b0315c91632bfcce3f32466bc305 Mon Sep 17 00:00:00 2001
From: raineer <raineerdelarita@gmail.com>
Date: Tue, 18 Aug 2026 19:58:22 +0800
Subject: [PATCH 2/2] fix: escape < in JSON-LD to prevent stored XSS (CBP-135
 follow-up)

---
 .../app/(marketing)/_components/JsonLd.tsx          | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/apps/codebility/app/(marketing)/_components/JsonLd.tsx b/apps/codebility/app/(marketing)/_components/JsonLd.tsx
index e71b013c9..cfc8872ef 100644
--- a/apps/codebility/app/(marketing)/_components/JsonLd.tsx
+++ b/apps/codebility/app/(marketing)/_components/JsonLd.tsx
@@ -4,9 +4,14 @@ export default function JsonLd({ data }: { data: Record<string, unknown> }) {
   return (
     <script
       type="application/ld+json"
-      // JSON.stringify is safe here — schema.org data is server-generated,
-      // not raw user input, so no XSS risk via this dangerouslySetInnerHTML.
-      dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
+      // Escaping "<" prevents stored XSS: several schema fields (profile bio,
+      // job descriptions) are user-editable, so JSON.stringify alone isn't
+      // enough — it escapes quotes but not "<", letting a value like
+      // "</script><script>alert(1)</script>" break out of this tag and run
+      // on a public page with no login required. "\u003c" is valid JSON and
+      // parses back to "<", so schema.org validators (e.g. Google's Rich
+      // Results tool) still read it correctly.
+      dangerouslySetInnerHTML={{ __html: JSON.stringify(data).replace(/</g, "\\u003c") }}
     />
   );
-}
+}
\ No newline at end of file