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

components/commercial-project-card.tsx

@@ -0,0 +1,59 @@
+import Link from "next/link";
+import { Project } from "@/lib/types";
+import Chip from "@/components/chip";
+import { Eye } from "lucide-react";
+
+const CommercialProjectCard = ({ project }: { project: Project }) => {
+  return (
+    // Removed h-full to allow flexbox stretch to control height
+    <div className="flex flex-col justify-between p-6 text-white transition-all duration-300 bg-white/5 backdrop-blur-md border border-white/10 rounded-3xl hover:bg-white/10 hover:border-white/20 w-[22rem] md:w-[28rem] shrink-0 snap-center shadow-xl group">
+      <div>
+        <div className="flex items-center justify-between mb-4">
+          <h4 className="text-2xl font-bold text-yellow-400 group-hover:text-yellow-300 transition-colors">
+            {project.name}
+          </h4>
+          {project.commercial && (
+            <span className="px-2 py-1 text-xs font-bold text-black bg-yellow-400 rounded-full">
+              COMMERCIAL
+            </span>
+          )}
+        </div>
+        <p className="mb-6 text-gray-200 leading-relaxed">
+          {project.short_description}
+        </p>
+        <div className="flex flex-wrap gap-2 mb-8">
+          {project.technologies.slice(0, 4).map((tech) => (
+            <Chip key={tech} text={tech} />
+          ))}
+          {project.technologies.length > 4 && (
+            <span className="text-xs text-white/50 self-center">
+              +{project.technologies.length - 4} more
+            </span>
+          )}
+        </div>
+      </div>
+
+      <div className="flex gap-3 mt-auto">
+        <Link
+          href={`/projects/${project.name}`}
+          className="flex-1 px-4 py-3 text-center font-bold text-black bg-yellow-400 rounded-xl hover:bg-yellow-500 transition-colors glass-effect glossy-effect bottom gloss-highlight"
+        >
+          Read more
+        </Link>
+        {project.visit_url && (
+          <a
+            href={project.visit_url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center justify-center px-4 py-3 font-bold text-white border border-white/20 rounded-xl hover:bg-white/10 transition-colors backdrop-blur-md"
+            title="Visit Live Site"
+          >
+            <Eye size={20} />
+          </a>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default CommercialProjectCard;

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;