feat: complete MegaCurcumin website codebase with interactive consoles
This commit is contained in:
Gokulvarthan Ramesh
+250
@@ -0,0 +1,250 @@
|
||||
<!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;">×</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">×</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">×</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>
|
||||
Reference in New Issue
Block a user