Files
megacurcumin_website/products.html
T

251 lines
12 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our Products | Cure Select Healthcare - MegaCurcumin™ Formulations</title>
<meta name="description" content="Explore our complete portfolio of science-backed nutraceutical solutions featuring MegaCurcumin™ across digestive, women's, cardio, cognitive, joint, and men's wellness.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/variables.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/animations.css">
<link rel="stylesheet" href="css/responsive.css">
</head>
<body>
<!-- Top Bar -->
<div class="top-bar">
<div class="container top-bar-inner">
<div class="top-bar-left">
<span class="top-bar-badge">MegaCurcumin™ Portfolio</span>
<span>Cure Select Healthcare • Science-Backed Nutraceutical Ingredients & Formulations</span>
</div>
<div class="top-bar-right">
<a href="mailto:info@cureselecthealthcare.com">info@cureselecthealthcare.com</a>
<a href="tel:+919876543210">+91 98765 43210</a>
</div>
</div>
</div>
<!-- Header -->
<header class="site-header">
<div class="container">
<nav class="navbar" aria-label="Main Navigation">
<a href="index.html" class="brand-logo">
<svg width="38" height="38" viewBox="0 0 40 40" fill="none">
<circle cx="20" cy="20" r="19" fill="#0B3B2C" stroke="#D97706" stroke-width="2"/>
<path d="M12 28C12 19.1634 19.1634 12 28 12C28 20.8366 20.8366 28 12 28Z" fill="#F59E0B" fill-opacity="0.9"/>
<path d="M14 26C18 20 22 16 26 14" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round"/>
</svg>
<div class="logo-text">
<span><strong class="brand-highlight">Cure Select</strong> <span class="brand-accent">Healthcare</span></span>
<span class="brand-sub">MegaCurcumin™</span>
</div>
</a>
<ul class="nav-menu">
<li><a href="index.html" class="nav-link">Home</a></li>
<li><a href="about.html" class="nav-link">About Us</a></li>
<li><a href="products.html" class="nav-link active">Our Products</a></li>
<li><a href="innovation.html" class="nav-link">Innovation</a></li>
<li><a href="research-development.html" class="nav-link">Research & Development</a></li>
<li><a href="certifications.html" class="nav-link">Certifications</a></li>
<li><a href="contact.html" class="nav-link">Contact Us</a></li>
</ul>
<div class="nav-actions">
<button class="btn btn-gold btn-sm" data-open-modal="partner">Request Sample</button>
<button class="mobile-toggle" aria-label="Toggle Menu">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
</button>
</div>
</nav>
</div>
</header>
<!-- Banner -->
<section class="section section-bg-dark" style="padding: 4.5rem 0; background: linear-gradient(135deg, rgba(6,35,28,0.95) 0%, rgba(11,59,44,0.9) 100%), url('images/hero-lab.jpg') center/cover no-repeat;">
<div class="container text-center">
<div class="section-kicker">Product Portfolio</div>
<h1 style="color: #fff; margin-bottom: 1.25rem;">Explore Our Innovative Solutions</h1>
<p class="lead" style="max-width: 820px; margin: 0 auto; color: #cbd5e1;">
Discover our portfolio of science-backed nutraceutical ingredients and formulations designed for diverse health and wellness applications.
</p>
</div>
</section>
<!-- Products Main Explorer -->
<section class="products-showcase-section">
<div class="container">
<!-- Filter Tabs -->
<div class="product-tabs-wrapper" id="product-tabs-target">
<!-- Rendered dynamically -->
</div>
<!-- Search & Format Filter Toolbar -->
<div class="product-filter-toolbar">
<div class="product-search-box">
<svg class="search-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
<input type="text" id="product-search-input" class="product-search-input" placeholder="Search formulations, bio-actives, or health areas..." aria-label="Search formulations">
<button type="button" id="product-search-clear" class="search-clear-btn" aria-label="Clear search" style="display: none;">&times;</button>
</div>
<div class="product-format-filters" id="product-format-filters">
<button class="format-filter-btn active" data-format="all">All Formats</button>
<button class="format-filter-btn" data-format="Capsules">Capsules & Tablets</button>
<button class="format-filter-btn" data-format="RTD">RTD Liquids</button>
<button class="format-filter-btn" data-format="Gummies">Functional Gummies</button>
<button class="format-filter-btn" data-format="Stickpack">Powders & Stickpacks</button>
</div>
<div class="product-results-meta">
<span id="product-results-count" class="product-results-count">Showing all formulations</span>
</div>
</div>
<!-- Grid Target -->
<div class="grid grid-3" id="product-grid-target">
<!-- Rendered dynamically -->
</div>
</div>
</section>
<!-- Turnkey Dosage Formats -->
<section class="section section-bg-tint">
<div class="container">
<div class="section-header">
<div class="section-kicker">Turnkey Versatility</div>
<h2 class="section-title">Formulation Flexibility Across Diverse Formats</h2>
<p class="section-subtitle">
MegaCurcumin™ is engineered for optimal stability and compatibility across traditional and novel delivery formats.
</p>
</div>
<div class="grid grid-4">
<div class="card" style="text-align: center;">
<img src="images/format-capsules.jpg" alt="Capsules & Tablets Formulation" class="dosage-format-img">
<h4>Capsules & Tablets</h4>
<p style="font-size: 0.85rem; color: var(--neutral-600);">High-density, free-flowing powders optimized for high-speed automated encapsulation.</p>
</div>
<div class="card" style="text-align: center;">
<img src="images/format-rtd.jpg" alt="RTD & Liquid Drinks Formulation" class="dosage-format-img">
<h4>RTD & Liquid Drinks</h4>
<p style="font-size: 0.85rem; color: var(--neutral-600);">Hydro-Clear solid dispersion that dissolves instantly with 100% clarity and zero sediment.</p>
</div>
<div class="card" style="text-align: center;">
<img src="images/format-gummies.jpg" alt="Functional Gummies Formulation" class="dosage-format-img">
<h4>Functional Gummies</h4>
<p style="font-size: 0.85rem; color: var(--neutral-600);">Heat-stable micro-emulsions that withstand gummy cooking temperatures with neutral taste.</p>
</div>
<div class="card" style="text-align: center;">
<img src="images/format-stickpack.jpg" alt="Stickpacks & Effervescents Formulation" class="dosage-format-img">
<h4>Stickpacks & Effervescents</h4>
<p style="font-size: 0.85rem; color: var(--neutral-600);">Moisture-stable granules dispersing in cold water with refreshing mouthfeel.</p>
</div>
</div>
</div>
</section>
<!-- B2B Sample CTA -->
<section class="section section-bg-white">
<div class="container">
<div class="partner-banner">
<div class="partner-banner-content">
<h2>Request a MegaCurcumin™ Sample Kit</h2>
<p>We supply evaluation samples alongside complete analytical certificates (HPLC, dissolution, microbial) to support your R&D benchmarking.</p>
<div class="partner-banner-actions">
<button class="btn btn-gold btn-lg" data-open-modal="partner">Request Sample Kit</button>
<a href="contact.html" class="btn btn-outline-white btn-lg">Contact Cure Select</a>
</div>
</div>
</div>
</div>
</section>
<!-- Modals -->
<div class="modal-overlay" id="product-detail-modal" role="dialog" aria-modal="true">
<div class="modal-container">
<div class="modal-header">
<h3 id="modal-prod-title">Product Details</h3>
<button class="modal-close-btn">&times;</button>
</div>
<div class="modal-body" id="modal-prod-body"></div>
</div>
</div>
<div class="modal-overlay" id="b2b-sample-modal" role="dialog" aria-modal="true">
<div class="modal-container">
<div class="modal-header">
<div>
<h3>Request Technical Sample & Dossier</h3>
<p style="font-size: 0.85rem; color: var(--neutral-600); margin-bottom: 0;">Cure Select Healthcare — MegaCurcumin™ Evaluation</p>
</div>
<button class="modal-close-btn">&times;</button>
</div>
<div class="modal-body">
<form class="ajax-form">
<div class="form-row">
<div class="form-group">
<label class="form-label">Full Name *</label>
<input type="text" class="form-input" required>
</div>
<div class="form-group">
<label class="form-label">Company Name *</label>
<input type="text" class="form-input" required>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">Email Address *</label>
<input type="email" class="form-input" required>
</div>
<div class="form-group">
<label class="form-label">Phone Number *</label>
<input type="tel" class="form-input" required>
</div>
</div>
<div class="form-group">
<label class="form-label">Target Formulation *</label>
<input type="text" id="sample-product-interest" class="form-input" value="MegaCurcumin™ UltraBio 29X" required>
</div>
<div class="form-group">
<label class="form-label">Sample Delivery Address *</label>
<textarea class="form-textarea" style="min-height: 80px;" required></textarea>
</div>
<button type="submit" class="btn btn-gold" style="width: 100%;">Submit Sample Request</button>
</form>
</div>
</div>
</div>
<!-- Footer -->
<footer class="site-footer">
<div class="container">
<div class="footer-bottom">
<div>© <script>document.write(new Date().getFullYear())</script> Cure Select Healthcare. All Rights Reserved.</div>
<div class="footer-bottom-links">
<a href="index.html">Home</a>
<a href="about.html">About Us</a>
<a href="innovation.html">Innovation</a>
<a href="contact.html">Contact</a>
</div>
</div>
</div>
</footer>
<script src="js/data.js"></script>
<script src="js/main.js"></script>
</body>
</html>