import { useEffect, useRef, useState } from ‘react’;
import { Link } from ‘react-router-dom’;
import gsap from ‘gsap’;
import { ScrollTrigger } from ‘gsap/ScrollTrigger’;
import { useCart } from ‘../context/CartContext’;
import { ecommerceAddToCart } from ‘../lib/gtag’;

gsap.registerPlugin(ScrollTrigger);

const categories = [‘All’, ‘Cytokines’, ‘Growth Factors’, ‘Organoid Factors’, ‘Custom Production’];

const allProducts = [
{
id: 1,
name: ‘Recombinant Human IL-2’,
category: ‘Cytokines’,
desc: ‘Ultra-pure recombinant human IL-2 for T-cell and NK-cell activation and expansion. Cell-based bioactivity verified.’,
specs: [‘Purity >98%’, ‘Endotoxin <0.1 EU/ug', 'Activity >=1×10^7 IU/mg’, ‘HEK293 expressed’],
catalog: ‘SB-IL2-100’,
price: 295,
},
{
id: 2,
name: ‘Recombinant Human IL-6’,
category: ‘Cytokines’,
desc: ‘HEK293-expressed recombinant human IL-6 for B-cell differentiation, plasma cell generation, and inflammatory signaling studies.’,
specs: [‘Purity >95%’, ‘Endotoxin <0.1 EU/ug', 'Activity >=5×10^6 IU/mg’],
catalog: ‘SB-IL6-100’,
price: 245,
},
{
id: 3,
name: ‘Recombinant Human TNF-alpha’,
category: ‘Cytokines’,
desc: ‘E. coli-derived high-purity recombinant human TNF-a for inflammation modeling, NF-kB pathway studies, and apoptosis induction.’,
specs: [‘Purity >97%’, ‘Endotoxin <0.01 EU/ug', 'Activity >=2×10^7 IU/mg’],
catalog: ‘SB-TNFA-100’,
price: 195,
},
{
id: 4,
name: ‘Recombinant Human IL-10’,
category: ‘Cytokines’,
desc: ‘Anti-inflammatory cytokine for immune regulation studies, macrophage polarization, and tolerance induction protocols.’,
specs: [‘Purity >95%’, ‘Endotoxin <0.1 EU/ug', 'Activity >=1×10^6 IU/mg’],
catalog: ‘SB-IL10-100’,
price: 345,
},
{
id: 5,
name: ‘Recombinant Human IFN-gamma’,
category: ‘Cytokines’,
desc: ‘Type II interferon for macrophage activation (M1 polarization), antigen presentation studies, and anti-viral defense modeling.’,
specs: [‘Purity >95%’, ‘Endotoxin <0.1 EU/ug', 'Activity >=2×10^7 IU/mg’],
catalog: ‘SB-IFNG-100’,
price: 275,
},
{
id: 6,
name: ‘Recombinant Human IL-7’,
category: ‘Cytokines’,
desc: ‘Essential for T-cell survival, proliferation, and development. Key cytokine for immune cell engineering and adoptive cell therapy research.’,
specs: [‘Purity >95%’, ‘Endotoxin <0.1 EU/ug', 'Activity >=2×10^6 IU/mg’],
catalog: ‘SB-IL7-100’,
price: 425,
},
{
id: 7,
name: ‘Recombinant Human EGF’,
category: ‘Growth Factors’,
desc: ‘Epidermal growth factor for epithelial cell and stem cell proliferation. Essential component of nearly all organoid culture media formulations.’,
specs: [‘Purity >98%’, ‘Endotoxin <0.01 EU/ug', 'Animal-free'], catalog: 'SB-EGF-100', price: 185, }, { id: 8, name: 'Recombinant Human bFGF (FGF-2)', category: 'Growth Factors', desc: 'Basic fibroblast growth factor for pluripotent stem cell maintenance, self-renewal support, and feeder-free culture conditions.', specs: ['Purity >95%’, ‘Endotoxin <0.1 EU/ug', '146 aa, tag-free'], catalog: 'SB-BFGF-100', price: 225, }, { id: 9, name: 'Recombinant Human Noggin', category: 'Organoid Factors', desc: 'BMP signaling inhibitor. Required for intestinal, hepatic, and prostate organoid culture. High-stability formulation for extended culture.', specs: ['Purity >95%’, ‘HEK293 expressed’, ‘Organoid-validated activity’],
catalog: ‘SB-NOG-100’,
price: 395,
},
{
id: 10,
name: ‘Recombinant Human R-spondin-1’,
category: ‘Organoid Factors’,
desc: ‘Wnt pathway amplifier that binds LGR5+ stem cells to drive organoid formation and long-term maintenance. Indispensable for most epithelial organoid models.’,
specs: [‘Purity >90%’, ‘LGR5 reporter validated’, ‘High lot-to-lot consistency’],
catalog: ‘SB-RSPO1-100’,
price: 525,
},
{
id: 11,
name: ‘Recombinant Human Wnt3a’,
category: ‘Organoid Factors’,
desc: ‘Canonical Wnt ligand for intestinal organoid culture, stem cell niche signaling, and beta-catenin pathway activation studies.’,
specs: [‘Purity >90%’, ‘Conditioned medium format’, ‘Organoid-validated’],
catalog: ‘SB-WNT3A-100’,
price: 375,
},
{
id: 12,
name: ‘Recombinant Human Activin A’,
category: ‘Growth Factors’,
desc: ‘TGF-beta superfamily member for mesoderm differentiation, endoderm induction, and directed organoid lineage specification.’,
specs: [‘Purity >98%’, ‘CHO cell expressed’, ‘Tag-free’],
catalog: ‘SB-ACTA-100’,
price: 315,
},
{
id: 13,
name: ‘Recombinant Human BMP-4’,
category: ‘Growth Factors’,
desc: ‘Bone morphogenetic protein for mesoderm and ectoderm differentiation, trophoblast formation, and embryoid body protocols.’,
specs: [‘Purity >97%’, ‘Endotoxin <0.05 EU/ug', 'Activity >=5×10^6 ED50/mg’],
catalog: ‘SB-BMP4-100’,
price: 265,
},
{
id: 14,
name: ‘Recombinant Human FGF10’,
category: ‘Organoid Factors’,
desc: ‘Fibroblast growth factor 10 for lung, salivary gland, and pancreatic organoid culture. Branching morphogenesis driver.’,
specs: [‘Purity >95%’, ‘Endotoxin <0.1 EU/ug', 'Organoid-validated'], catalog: 'SB-FGF10-100', price: 285, }, { id: 15, name: 'Custom Recombinant Protein Sourcing', category: 'Custom Production', desc: 'Need a specific construct, species variant, or hard-to-source factor? We leverage our manufacturer network to find what you need — with technical vetting included.', specs: ['HEK293 or E. coli', 'Your tag, your buffer', '4-6 week turnaround'], catalog: 'SB-CUSTOM', price: 2500, }, ]; export default function Products() { const pageRef = useRef(null);
const [activeCategory, setActiveCategory] = useState(‘All’);
const { addItem } = useCart();

const filtered = activeCategory === ‘All’
? allProducts
: allProducts.filter((p) => p.category === activeCategory);

const handleAddToCart = (product: typeof allProducts[0]) => {
addItem({
id: product.id,
name: product.name,
catalog: product.catalog,
category: product.category,
price: product.price,
image: product.image,
});
ecommerceAddToCart({
id: product.catalog,
name: product.name,
category: product.category,
price: product.price,
quantity: 1,
});
};

useEffect(() => {
if (!pageRef.current) return;
const ctx = gsap.context(() => {
gsap.fromTo(
‘.products-hero’,
{ y: 40, opacity: 0 },
{ y: 0, opacity: 1, duration: 0.8, ease: ‘power3.out’ }
);
}, pageRef);
return () => ctx.revert();
}, []);

useEffect(() => {
if (!pageRef.current) return;
const cards = pageRef.current.querySelectorAll(‘.product-item’);
const ctx = gsap.context(() => {
gsap.fromTo(
cards,
{ y: 40, opacity: 0 },
{ y: 0, opacity: 1, stagger: 0.06, duration: 0.6, ease: ‘power3.out’ }
);
}, pageRef);
return () => ctx.revert();
}, [activeCategory]);

return (

{/* Hero */}

Products

Recombinant Proteins

Ultra-pure recombinant cytokines and growth factors for organoid and cell culture — batch-tested, ship-fast, priced right. That is all we do.

{/* Filter Tabs */}

{categories.map((cat) => (
setActiveCategory(cat)}
className={`shrink-0 px-4 py-2 rounded-full text-sm transition-all ${
activeCategory === cat
? ‘bg-[#39ff14]/15 text-[#39ff14] border border-[#39ff14]/30’
: ‘text-white/50 border border-white/10 hover:border-white/20 hover:text-white/70’
}`}
>
{cat}

))}

{/* Product Grid */}

Showing {filtered.length} products

{filtered.map((product) => (

{product.category}

{product.catalog}

{product.name}

{product.desc}

{product.specs.map((spec) => (

{spec}

))}

${product.price.toLocaleString()}
/ 100ug

handleAddToCart(product)}
className=”flex items-center gap-1.5 px-4 py-2 rounded-full text-xs font-medium transition-all”
style={{
background: ‘rgba(57, 255, 20, 0.1)’,
border: ‘1px solid rgba(57, 255, 20, 0.3)’,
color: ‘#39ff14’,
}}
onMouseEnter={(e) => {
e.currentTarget.style.background = ‘rgba(57, 255, 20, 0.2)’;
e.currentTarget.style.boxShadow = ‘0 0 15px rgba(57, 255, 20, 0.15)’;
}}
onMouseLeave={(e) => {
e.currentTarget.style.background = ‘rgba(57, 255, 20, 0.1)’;
e.currentTarget.style.boxShadow = ‘none’;
}}
>

Add to Cart

))}

{/* Services CTA */}

Custom Services

Need Something Custom?

Through our network of rigorously vetted manufacturing partners, we can source your specific construct with the tag, species, and formulation you need — with full technical vetting and application support included.

{[
{ title: ‘Custom Sourcing’, desc: ‘Your construct, your specifications — sourced and technically vetted through our partner network.’ },
{ title: ‘Bulk Orders’, desc: ‘Milligram to gram scale with volume pricing for high-throughput labs and preclinical studies.’ },
{ title: ‘Technical Vetting’, desc: ‘We validate application suitability before you buy — so you do not waste time on incompatible products.’ },
{ title: ‘Protocol Consulting’, desc: ‘Concentration optimization, combination strategies, and troubleshooting from our application scientists.’ },
].map((s) => (

{s.title}

{s.desc}

))}

Request a Custom Quote

);
}