feat: add CommercialProjects component and related project cards; update project data structure

components/commercial-projects.tsx

@@ -0,0 +1,32 @@
+import { projects } from "@/lib/data";
+import CommercialProjectCard from "@/components/commercial-project-card";
+
+const CommercialProjects = () => {
+  const commercialProjects = projects.filter((p) => p.commercial);
+
+  return (
+    <div
+      id="commercial-projects"
+      className="flex flex-col items-center justify-center gap-8 p-4 w-full"
+    >
+      <div className="text-center">
+        <h3 className="mt-4 mb-2 text-5xl font-bold tracking-tight text-white">
+          Commissioned Work 💼
+        </h3>
+        <p className="text-xl text-white/80 max-w-2xl mx-auto">
+          Selected commercial projects and freelance commissions.
+        </p>
+      </div>
+
+      <div className="w-full max-w-[90vw] md:max-w-6xl">
+        <div className="flex items-stretch gap-6 overflow-x-auto pb-8 pt-4 px-4 snap-x snap-mandatory md:justify-center scrollbar-thin scrollbar-thumb-yellow-400 scrollbar-track-white/10">
+          {commercialProjects.map((project) => (
+            <CommercialProjectCard key={project.id} project={project} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CommercialProjects;