Portfolio

Fixing Solutions That Build Strong Fasteners

Fixing Solutions That Build Strong Fastenerss

• JNM Fixing — Portfolio Page
• Production-ready, single-file React component styled with Tailwind + shadcn/ui.
• Drop into a Next.js or Vite-React app. Replace placeholder images/links with real assets.
  */

const INDUSTRIES = [
{ value: “all”, label: “All Industries”, icon: Globe },
{ value: “Infrastructure”, label: “Infrastructure”, icon: Construction },
{ value: “Commercial”, label: “Commercial”, icon: Building2 },
{ value: “Industrial”, label: “Industrial”, icon: Factory },
{ value: “Residential”, label: “Residential”, icon: Wrench },
];

const PRODUCT_FILTERS = [
“Wedge Anchors”,
“Drop-in Anchors”,
“Chemical Anchors”,
“Spring Nuts”,
“Threaded Rods”,
“Dispenser Guns”,
“Sausage Guns”,
“SS 316 Anchors”,
];

const CLIENTS = [
{ name: “DMRC”, hint: “Delhi Metro Rail Corporation” },
{ name: “L&T”, hint: “Larsen & Toubro” },
{ name: “DLF”, hint: “DLF Ltd.” },
{ name: “Tata Projects”, hint: “Engineering & Construction” },
{ name: “NBCC”, hint: “National Buildings Construction Corporation” },
];

const CERTS = [
{ label: “ISO 9001:2015”, desc: “Quality Management”, icon: ShieldCheck },
{ label: “MSME Registered”, desc: “Govt. of India”, icon: Award },
{ label: “GST Registered”, desc: “Compliant”, icon: Award },
];

function StatPill({ k, v }: { k: string; v: string }) {
return (
{k}: {v}
);
}

function ProjectCard({ project }: { project: (typeof PROJECTS)[number] }) {
return (

{project.industry}{project.year} {project.title} {project.location} {project.productTags.map((t) => ( {t} ))} {project.metrics.map((m) => ( ))} View details

);
}

function ClientMarquee() {
return (

{CLIENTS.map((c) => (

{c.name}

{c.hint}

))}

);
}

function Certifications() {
return (

{CERTS.map((c) => (

{c.label}

{c.desc}

))}

);
}

export default function PortfolioPage() {
const [industry, setIndustry] = useState(“all”);
const [q, setQ] = useState(“”);
const [product, setProduct] = useState(“all”);

const filtered = useMemo(() => {
return PROJECTS.filter((p) => {
const byIndustry = industry === “all” || p.industry === industry;
const byProduct = product === “all” || p.productTags.includes(product);
const byQ = q.trim()
? [p.title, p.location, p.productTags.join(” “), p.industry]
.join(” “)
.toLowerCase()
.includes(q.toLowerCase())
: true;
return byIndustry && byProduct && byQ;
});
}, [industry, q, product]);

return (

{/* SEO / Structured Data */}