commit e4c373f050ce5f3b864cc66754ad8eee16c96e6b Author: Azmat Ali Date: Mon Mar 2 13:22:47 2026 +0530 Initial commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..1511b30 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +/node_modules +.netlify +.env diff --git a/about.html b/about.html new file mode 100644 index 0000000..5d788ac --- /dev/null +++ b/about.html @@ -0,0 +1,360 @@ + + + + + + + About Us | MediGlobe Healthcare + + + + + + + + + + + + + +
+
+ Home + › + About Us +
+
+ + + + +
+
+ +
+
+ 🌿 Est. DSPR Mediglobe Healthcare LLP +
+

Healing the World,
Naturally.

+

+ A pioneering wellness enterprise bridging ancient Ayurvedic wisdom + with modern healthcare — formulating high-quality herbal remedies + that promote holistic healing for a global community. +

+
+ " +

Universe of Medical Services: Healing the World, Naturally.

+
+
+ + +
+
+
🏢
+
+
Registered Name
+
DSPR Mediglobe Healthcare LLP
+
+
+
+
🌿
+
+
Focus Area
+
+ Ayurvedic Proprietary Medicines & Herbal Cosmetics +
+
+
+
+
✅
+
+
Core Philosophy
+
+ 100% Natural · Purity Driven · Result Oriented +
+
+
+
+
+
+ + + + +
+
+
+
100%
+
Natural & Chemical-Free Products
+
+
+
8+
+
Proprietary Herbal Formulations
+
+ +
+
24/7
+
Dedicated Customer Care
+
+
+
+ + + + +
+
🎯 Who We Are
+

Our Vision & Mission

+

+ At DSPR Mediglobe, we don't just treat symptoms — we nurture the body's + innate ability to heal, ensuring a healthier, more vibrant life for our + global community. +

+ +
+ +
+
🌐
+
Our Vision
+
+ To become a global benchmark in Ayurvedic Excellence, transforming + lives through innovative, nature-based healthcare solutions that are + accessible, sustainable, and scientifically grounded. +
+
+ + +
+
🎯
+
Our Mission
+
+ To manufacture and deliver products that merge the purity of + traditional Ayurvedic medicine with the rigour of modern science — + empowering lives through transparent, affordable, and genuinely + effective natural healthcare. +
+ + +
+
+
+
+
Quality First
+
+ 100% natural, chemical-free products meeting the highest + safety and potency standards +
+
+
+
+
+
+
Holistic Healing
+
+ Preventive healthcare integrating traditional herbal knowledge + with modern wellness +
+
+
+
+
+
+
Empowering Lives
+
+ Restoring consumer confidence in natural healing through + transparency and affordability +
+
+
+
+
+
+
Sustainable Innovation
+
+ Continuously developing new formulations for contemporary + lifestyle diseases using nature +
+
+
+
+
+
+
+ + + + +
+
+ +
+
🌱 Our Philosophy
+

+ Where Ancient Wisdom
Meets Modern Science +

+
+

+ DSPR Mediglobe Healthcare LLP was founded on a simple but powerful + conviction: nature holds the key to ultimate wellness. Rooted in + the rich heritage of Indian traditional medicine, every + formulation we create draws on centuries of Ayurvedic knowledge — + herbs, oils, and botanical extracts that have stood the test of + time as genuine healers. +

+

+ What sets us apart is our refusal to choose between tradition and + science. Our in-house research and development team rigorously + validates every ingredient, ensuring that the ancient remedies we + bring to market meet contemporary standards of purity, potency, + and safety. The result is a product range that is both deeply + rooted and clinically credible. +

+

+ From our advanced skincare solutions in the Ultimate Radiance + range to specialised therapeutic formulations like GS Crusher and + Arsha Heal, every product is a testament to our commitment to + providing healthcare that works — naturally. +

+
+
+ + +
+
+
🌿
+
+
100% Natural Ingredients
+
+ Every formulation uses only plant-based, chemical-free raw + materials sourced from trusted Ayurvedic suppliers +
+
+
+
+
🔬
+
+
Scientifically Validated
+
+ Each product is clinically tested for safety, potency, and + efficacy before it reaches your hands +
+
+
+
+
🤝
+
+
Transparent & Trustworthy
+
+ Full ingredient disclosure, honest claims, and no hidden + chemicals — ever +
+
+
+
+
🌍
+
+
Globally Accessible
+
+ Delivering Ayurvedic excellence to customers in 80+ countries at + prices that respect every budget +
+
+
+
+
+
+ + + + +
+
+
💊 Our Range
+

+ Formulations Built for Every Need +

+

+ From daily skincare to targeted therapeutic treatments — each range is + formulated to address specific wellness needs using the power of + Ayurvedic botanicals. +

+ +
+
+
✨
+
Herbal Cosmetics
+
Ultimate Radiance
+
+ Advanced skincare solutions designed to brighten, protect, and + restore your skin's natural glow. Powered by Vitamin C, + Niacinamide, Kojic Acid, and time-tested botanical extracts. + Includes our Fairness Cream, Anti Acne Cream, and Brightening Face + Wash. +
+
+ +
+
💊
+
Ayurvedic Therapeutics
+
GS Crusher & Joint Care
+
+ Specialised formulations targeting musculoskeletal health, joint + pain, and inflammatory conditions. Blending Boswellia, Shallaki, + and Guggul with modern nutraceuticals like Glucosamine and + Collagen Peptide for comprehensive relief. +
+
+ +
+
🌿
+
Herbal Remedies
+
Arsha Heal & Wellness
+
+ Targeted therapeutic preparations for digestive health, pain + management, and systemic wellness. Rooted in classical Ayurvedic + texts, updated for modern bioavailability and clinical efficacy + standards. +
+
+
+
+
+ + + + +
+
+

Ready to Experience
Natural Healing?

+

+ Explore our complete range of Ayurvedic formulations — crafted with + purity, backed by science, and delivered with care to your door. +

+
+ 🛒 Shop All Products + View My Cart → +
+
+
+ + + + + + + + diff --git a/assets/css/about.css b/assets/css/about.css new file mode 100644 index 0000000..1e4ec4d --- /dev/null +++ b/assets/css/about.css @@ -0,0 +1,742 @@ +/* ── ABOUT PAGE STYLES ── */ + +.about-page { + background: #f8fafc; +} + +/* ── BREADCRUMB ── */ +.breadcrumb-bar { + background: white; + border-bottom: 0.0625rem solid var(--gray-200); + padding: var(--space-3) 0; +} + +.breadcrumb-inner { + max-width: 80rem; + margin: 0 auto; + padding: 0 var(--space-6); + display: flex; + align-items: center; + gap: var(--space-2); + font-size: var(--text-md); + color: var(--gray-400); +} + +.breadcrumb-inner a { + color: var(--gray-600); + transition: color 0.2s; +} + +.breadcrumb-inner a:hover { + color: var(--blue); +} +.breadcrumb-inner .sep { + color: var(--gray-300); +} +.breadcrumb-inner .current { + color: var(--blue); + font-weight: 600; +} + +/* ── HERO BANNER ── */ +.about-hero { + background: linear-gradient(135deg, #0e4da4 0%, #1a6fd4 50%, #17a2b8 100%); + padding: var(--space-14) var(--space-6); + position: relative; + overflow: hidden; +} + +/* decorative circles */ +.about-hero::before, +.about-hero::after { + content: ""; + position: absolute; + border-radius: 50%; + opacity: 0.08; + background: white; +} + +.about-hero::before { + width: 32rem; + height: 32rem; + top: -12rem; + right: -8rem; +} + +.about-hero::after { + width: 20rem; + height: 20rem; + bottom: -8rem; + left: -4rem; +} + +.about-hero-inner { + max-width: 80rem; + margin: 0 auto; + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-12); + align-items: center; + position: relative; + z-index: 1; +} + +.about-hero-tag { + display: inline-flex; + align-items: center; + gap: var(--space-2); + background: rgba(255, 255, 255, 0.15); + color: rgba(255, 255, 255, 0.9); + font-size: var(--text-sm); + font-weight: 700; + letter-spacing: 0.08em; + text-transform: uppercase; + padding: var(--space-1) var(--space-3); + border-radius: var(--radius-full); + border: 0.0625rem solid rgba(255, 255, 255, 0.25); + margin-bottom: var(--space-4); +} + +.about-hero h1 { + font-size: 2.75rem; + font-weight: 900; + color: white; + line-height: 1.15; + letter-spacing: -0.03em; + margin-bottom: var(--space-5); +} + +.about-hero h1 em { + font-style: normal; + color: var(--yellow); +} + +.about-hero-desc { + font-size: var(--text-xl); + color: rgba(255, 255, 255, 0.82); + line-height: 1.75; + margin-bottom: var(--space-6); + max-width: 30rem; +} + +.about-hero-statement { + display: flex; + align-items: flex-start; + gap: var(--space-3); + background: rgba(255, 255, 255, 0.1); + border: 0.0625rem solid rgba(255, 255, 255, 0.2); + border-radius: var(--radius-xl); + padding: var(--space-4) var(--space-5); + backdrop-filter: blur(6px); +} + +.about-hero-statement .quote-mark { + font-size: 3rem; + line-height: 1; + color: var(--yellow); + font-weight: 900; + margin-top: -0.5rem; + flex-shrink: 0; +} + +.about-hero-statement p { + font-size: var(--text-lg); + color: rgba(255, 255, 255, 0.92); + font-style: italic; + line-height: 1.6; + font-weight: 500; +} + +/* Hero right — identity cards */ +.about-hero-cards { + display: flex; + flex-direction: column; + gap: var(--space-4); +} + +.identity-card { + background: rgba(255, 255, 255, 0.12); + border: 0.0625rem solid rgba(255, 255, 255, 0.2); + border-radius: var(--radius-xl); + padding: var(--space-5) var(--space-6); + backdrop-filter: blur(8px); + display: flex; + align-items: center; + gap: var(--space-4); + transition: background 0.2s; +} + +.identity-card:hover { + background: rgba(255, 255, 255, 0.18); +} + +.identity-icon { + width: 3rem; + height: 3rem; + border-radius: var(--radius-lg); + background: rgba(255, 255, 255, 0.15); + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + flex-shrink: 0; +} + +.identity-label { + font-size: var(--text-sm); + color: rgba(255, 255, 255, 0.6); + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.06em; + margin-bottom: var(--space-1); +} + +.identity-value { + font-size: var(--text-lg); + color: white; + font-weight: 700; + line-height: 1.3; +} + +/* ── STATS STRIP ── */ +.stats-strip { + background: white; + border-bottom: 0.0625rem solid var(--gray-200); +} + +.stats-inner { + max-width: 80rem; + margin: 0 auto; + padding: var(--space-8) var(--space-6); + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: var(--space-6); +} + +.stat-item { + text-align: center; + padding: var(--space-5); + border-radius: var(--radius-xl); + transition: background 0.2s; +} + +.stat-item:hover { + background: var(--gray-50); +} + +.stat-num { + font-size: 2.5rem; + font-weight: 900; + color: var(--blue); + line-height: 1; + letter-spacing: -0.03em; + margin-bottom: var(--space-2); +} + +.stat-num span { + color: var(--yellow); +} + +.stat-label { + font-size: var(--text-md); + color: var(--gray-600); + font-weight: 500; + line-height: 1.4; +} + +.stat-divider { + width: 0.0625rem; + background: var(--gray-200); + margin: var(--space-4) 0; + align-self: stretch; +} + +/* ── SECTION WRAPPER ── */ +.about-section { + max-width: 80rem; + margin: 0 auto; + padding: var(--space-12) var(--space-6); +} + +.section-label { + display: inline-flex; + align-items: center; + gap: var(--space-2); + background: var(--blue-light); + color: var(--blue); + font-size: var(--text-sm); + font-weight: 700; + letter-spacing: 0.07em; + text-transform: uppercase; + padding: var(--space-1) var(--space-3); + border-radius: var(--radius-full); + margin-bottom: var(--space-4); +} + +.section-heading { + font-size: var(--text-deal); + font-weight: 900; + color: var(--gray-800); + letter-spacing: -0.03em; + line-height: 1.15; + margin-bottom: var(--space-4); +} + +.section-heading em { + font-style: normal; + color: var(--blue); +} + +.section-subtext { + font-size: var(--text-xl); + color: var(--gray-600); + line-height: 1.75; + max-width: 40rem; +} + +/* ── VISION & MISSION ── */ +.vm-grid { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-6); + margin-top: var(--space-8); +} + +.vm-card { + background: white; + border: 0.0625rem solid var(--gray-200); + border-radius: var(--radius-xl); + padding: var(--space-8); + position: relative; + overflow: hidden; + transition: box-shadow 0.25s, transform 0.25s; +} + +.vm-card:hover { + box-shadow: 0 0.75rem 2rem rgba(26, 111, 212, 0.1); + transform: translateY(-0.25rem); +} + +/* accent bar */ +.vm-card::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 0.25rem; + background: linear-gradient(90deg, var(--blue), var(--teal)); + border-radius: var(--radius-xl) var(--radius-xl) 0 0; +} + +.vm-card.mission-card::before { + background: linear-gradient(90deg, var(--teal), #17a2b8cc); +} + +.vm-icon { + width: 3.5rem; + height: 3.5rem; + border-radius: var(--radius-lg); + background: var(--blue-light); + display: flex; + align-items: center; + justify-content: center; + font-size: 1.75rem; + margin-bottom: var(--space-5); +} + +.mission-card .vm-icon { + background: #e6f9fb; +} + +.vm-title { + font-size: var(--text-5xl); + font-weight: 800; + color: var(--gray-800); + margin-bottom: var(--space-3); + letter-spacing: -0.02em; +} + +.vm-text { + font-size: var(--text-lg); + color: var(--gray-600); + line-height: 1.75; +} + +/* ── MISSION PILLARS ── */ +.pillars-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--space-4); + margin-top: var(--space-6); +} + +.pillar-item { + display: flex; + align-items: flex-start; + gap: var(--space-4); + background: var(--gray-50); + border-radius: var(--radius-lg); + padding: var(--space-4) var(--space-5); + border: 0.0625rem solid var(--gray-200); + transition: all 0.2s; +} + +.pillar-item:hover { + border-color: var(--blue); + background: var(--blue-light); +} + +.pillar-dot { + width: 0.5rem; + height: 0.5rem; + background: var(--blue); + border-radius: var(--radius-full); + margin-top: 0.45rem; + flex-shrink: 0; +} + +.pillar-title { + font-size: var(--text-md); + font-weight: 700; + color: var(--blue); + margin-bottom: var(--space-1); +} + +.pillar-text { + font-size: var(--text-md); + color: var(--gray-600); + line-height: 1.6; +} + +/* ── PHILOSOPHY STRIP ── */ +.philosophy-strip { + background: linear-gradient(135deg, #edf4ff 0%, #e0edfc 50%, #d4e6f8 100%); + padding: var(--space-12) 0; + margin: var(--space-6) 0 0; +} + +.philosophy-inner { + max-width: 80rem; + margin: 0 auto; + padding: 0 var(--space-6); + display: grid; + grid-template-columns: 1.1fr 1fr; + gap: var(--space-12); + align-items: center; +} + +.philosophy-text-col .section-label { + margin-bottom: var(--space-4); +} + +.philosophy-body { + font-size: var(--text-lg); + color: var(--gray-600); + line-height: 1.8; + margin-top: var(--space-5); +} + +.philosophy-body p { + margin-bottom: var(--space-4); +} +.philosophy-body p:last-child { + margin-bottom: 0; +} + +/* Philosophy values column */ +.philosophy-values { + display: flex; + flex-direction: column; + gap: var(--space-4); +} + +.value-card { + background: white; + border-radius: var(--radius-xl); + padding: var(--space-5) var(--space-6); + border: 0.0625rem solid var(--gray-200); + display: flex; + align-items: center; + gap: var(--space-4); + transition: all 0.2s; +} + +.value-card:hover { + border-color: var(--blue); + box-shadow: 0 0.25rem 1rem rgba(26, 111, 212, 0.1); + transform: translateX(0.25rem); +} + +.value-icon { + width: 3rem; + height: 3rem; + border-radius: var(--radius-md); + background: var(--blue-light); + display: flex; + align-items: center; + justify-content: center; + font-size: 1.375rem; + flex-shrink: 0; +} + +.value-title { + font-size: var(--text-md); + font-weight: 800; + color: var(--gray-800); + margin-bottom: var(--space-1); +} + +.value-desc { + font-size: var(--text-sm); + color: var(--gray-400); + line-height: 1.5; +} + +/* ── PRODUCT RANGE SECTION ── */ +.range-section { + background: white; + padding: var(--space-12) 0; +} + +.range-inner { + max-width: 80rem; + margin: 0 auto; + padding: 0 var(--space-6); +} + +.range-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-5); + margin-top: var(--space-8); +} + +.range-card { + border-radius: var(--radius-xl); + padding: var(--space-7, 1.75rem) var(--space-6); + display: flex; + flex-direction: column; + gap: var(--space-3); + border: 0.0625rem solid var(--gray-200); + transition: all 0.25s; + position: relative; + overflow: hidden; +} + +.range-card::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 0.1875rem; + background: linear-gradient(90deg, var(--blue), var(--teal)); + transform: scaleX(0); + transition: transform 0.3s; + transform-origin: left; +} + +.range-card:hover { + box-shadow: 0 0.75rem 2rem rgba(26, 111, 212, 0.1); + transform: translateY(-0.25rem); + border-color: var(--blue); +} + +.range-card:hover::after { + transform: scaleX(1); +} + +.rc-1 { + background: linear-gradient(135deg, #f9efe7 0%, white 60%); +} +.rc-2 { + background: linear-gradient(135deg, #e4edf8 0%, white 60%); +} +.rc-3 { + background: linear-gradient(135deg, #e8f2e8 0%, white 60%); +} + +.range-icon { + font-size: 2.25rem; + margin-bottom: var(--space-2); +} + +.range-name { + font-size: var(--text-3xl); + font-weight: 800; + color: var(--gray-800); + letter-spacing: -0.02em; +} + +.range-tag { + display: inline-block; + background: var(--blue-light); + color: var(--blue); + font-size: var(--text-sm); + font-weight: 700; + padding: var(--space-1) var(--space-2); + border-radius: var(--radius-sm); + width: fit-content; +} + +.range-desc { + font-size: var(--text-md); + color: var(--gray-600); + line-height: 1.65; +} + +/* ── CTA SECTION ── */ +.about-cta { + background: linear-gradient(135deg, #0e4da4 0%, #1a6fd4 60%, #17a2b8 100%); + padding: var(--space-14) var(--space-6); + text-align: center; + position: relative; + overflow: hidden; +} + +.about-cta::before { + content: ""; + position: absolute; + width: 28rem; + height: 28rem; + border-radius: 50%; + background: rgba(255, 255, 255, 0.06); + top: -10rem; + left: -6rem; +} + +.about-cta::after { + content: ""; + position: absolute; + width: 20rem; + height: 20rem; + border-radius: 50%; + background: rgba(255, 255, 255, 0.05); + bottom: -8rem; + right: -4rem; +} + +.about-cta-inner { + max-width: 44rem; + margin: 0 auto; + position: relative; + z-index: 1; +} + +.about-cta h2 { + font-size: var(--text-deal); + font-weight: 900; + color: white; + letter-spacing: -0.03em; + margin-bottom: var(--space-4); + line-height: 1.2; +} + +.about-cta h2 em { + font-style: normal; + color: var(--yellow); +} + +.about-cta p { + font-size: var(--text-xl); + color: rgba(255, 255, 255, 0.82); + line-height: 1.7; + margin-bottom: var(--space-8); +} + +.cta-buttons { + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-4); + flex-wrap: wrap; +} + +.btn-cta-primary { + display: inline-flex; + align-items: center; + gap: var(--space-2); + background: white; + color: var(--blue); + border: none; + border-radius: var(--radius-md); + padding: var(--space-3) var(--space-7, 1.75rem); + font-size: var(--text-lg); + font-weight: 800; + cursor: pointer; + font-family: inherit; + text-decoration: none; + transition: all 0.2s; +} + +.btn-cta-primary:hover { + background: var(--blue-light); + transform: translateY(-0.0625rem); +} + +.btn-cta-outline { + display: inline-flex; + align-items: center; + gap: var(--space-2); + background: transparent; + color: white; + border: 0.125rem solid rgba(255, 255, 255, 0.5); + border-radius: var(--radius-md); + padding: var(--space-3) var(--space-7, 1.75rem); + font-size: var(--text-lg); + font-weight: 700; + cursor: pointer; + font-family: inherit; + text-decoration: none; + transition: all 0.2s; +} + +.btn-cta-outline:hover { + border-color: white; + background: rgba(255, 255, 255, 0.1); +} + +/* ── RESPONSIVE ── */ +@media (max-width: 56.25rem) { + .about-hero-inner { + grid-template-columns: 1fr; + } + .about-hero h1 { + font-size: 2rem; + } + .stats-inner { + grid-template-columns: repeat(2, 1fr); + } + .vm-grid { + grid-template-columns: 1fr; + } + .pillars-grid { + grid-template-columns: 1fr; + } + .philosophy-inner { + grid-template-columns: 1fr; + } + .range-grid { + grid-template-columns: 1fr; + } + .about-cta h2 { + font-size: var(--text-6xl); + } +} + +@media (max-width: 40rem) { + .stats-inner { + grid-template-columns: 1fr 1fr; + } + .nav-links, + .search-box { + display: none; + } + .topbar-right { + display: none; + } + .about-hero { + padding: var(--space-10) var(--space-4); + } +} diff --git a/assets/css/cart.css b/assets/css/cart.css new file mode 100644 index 0000000..c5e1f82 --- /dev/null +++ b/assets/css/cart.css @@ -0,0 +1,595 @@ +/* ── PAGE BASE ── */ +body { + background: #f8fafc; +} + +/* ── PAGE BACKGROUND ── */ +.cart-page { + max-width: 100rem; + margin: 0 auto; + padding: var(--space-6); +} + +/* ── PAGE TITLE ── */ +.cart-page-title { + margin: 0 auto var(--space-6); + display: flex; + align-items: center; + gap: var(--space-3); +} + +.cart-page-title h1 { + font-size: var(--text-deal, 2.125rem); + font-weight: 900; + color: var(--gray-800); + letter-spacing: -0.04em; +} + +.cart-page-title .item-count { + background: var(--blue); + color: white; + font-size: var(--text-md); + font-weight: 700; + padding: var(--space-1) var(--space-3); + border-radius: var(--radius-full); +} + +/* ── CART LAYOUT ── */ +.cart-layout { + margin: 0 auto; + display: grid; + grid-template-columns: 3fr 1fr; + gap: var(--space-4); + align-items: start; +} + +/* ── CART ITEMS PANEL ── */ +.cart-items-panel { + display: flex; + flex-direction: column; + gap: var(--space-3); +} + +/* Column headers */ +.cart-col-headers { + display: grid; + grid-template-columns: 2fr 1fr 1fr 1fr auto; + gap: var(--space-4); + padding: 0 var(--space-5); + font-size: var(--text-sm); + font-weight: 700; + color: var(--gray-400); + text-transform: uppercase; + letter-spacing: 0.06em; +} + +/* Single cart item card */ +.cart-item { + margin-bottom: 1rem; + background: white; + border: 0.0625rem solid var(--gray-200); + border-radius: var(--radius-xl); + padding: var(--space-5); + display: grid; + grid-template-columns: 2fr 1fr 1fr 1fr auto; + gap: var(--space-4); + align-items: center; + transition: box-shadow 0.2s, border-color 0.2s; +} + +.cart-item:hover { + border-color: var(--gray-300); + box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.06); +} + +/* Product info cell */ +.cart-item-info { + display: flex; + align-items: center; + gap: var(--space-4); +} + +.cart-item-img { + width: 4.5rem; + height: 4.5rem; + border-radius: var(--radius-lg); + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + overflow: hidden; + background: var(--gray-50); +} + +/* when a real image is present */ +.cart-item-img.has-image img { + width: 100%; + height: 100%; + object-fit: fill; +} + +/* fallback emoji when no image */ +.cart-item-img.no-image { + background: linear-gradient(135deg, #f5ece6, #e8d4c8); + font-size: 2rem; +} + +.img-cream { + background: linear-gradient(135deg, #f9efe7, #eed9c4); +} +.img-fair { + background: linear-gradient(135deg, #f5ece6, #e8d4c8); +} +.img-oil { + background: linear-gradient(135deg, #e4edf8, #c8d8f0); +} +.img-wash { + background: linear-gradient(135deg, #e8f2e8, #c8dcc8); +} + +.cart-item-name { + font-size: var(--text-md); + font-weight: 700; + color: var(--gray-800); + line-height: 1.4; + margin-bottom: var(--space-1); +} + +.cart-item-sku { + font-size: var(--text-sm); + color: var(--gray-400); +} + +/* Price cell */ +.cart-item-price { + font-size: var(--text-xl); + font-weight: 700; + color: var(--gray-700); +} + +/* Quantity cell */ +.qty-control { + display: flex; + align-items: center; + gap: var(--space-2); + border: 0.0625rem solid var(--gray-200); + border-radius: var(--radius-md); + padding: var(--space-1) var(--space-2); + width: fit-content; + background: var(--gray-50); +} + +.qty-btn { + background: none; + border: none; + cursor: pointer; + width: 1.5rem; + height: 1.5rem; + border-radius: var(--radius-sm); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--text-lg); + font-weight: 700; + color: var(--gray-600); + transition: background 0.15s, color 0.15s; + line-height: 1; +} + +.qty-btn:hover { + background: var(--blue-light); + color: var(--blue); +} + +.qty-num { + font-size: var(--text-md); + font-weight: 700; + color: var(--gray-800); + min-width: 1.5rem; + text-align: center; +} + +/* Subtotal cell */ +.cart-item-subtotal { + font-size: var(--text-xl); + font-weight: 800; + color: var(--red); +} + +/* Remove button */ +.remove-btn { + background: none; + border: none; + cursor: pointer; + width: 2rem; + height: 2rem; + border-radius: var(--radius-md); + display: flex; + align-items: center; + justify-content: center; + color: var(--gray-400); + transition: background 0.2s, color 0.2s; + flex-shrink: 0; +} + +.remove-btn:hover { + background: #fef2f2; + color: var(--red); +} + +/* Empty cart state */ +.empty-cart { + background: white; + border: 0.0625rem solid var(--gray-200); + border-radius: var(--radius-xl); + padding: var(--space-14) var(--space-10); + text-align: center; + display: none; +} + +.empty-cart.visible { + display: block; +} + +.empty-icon { + font-size: 4rem; + margin-bottom: var(--space-4); + opacity: 0.35; +} + +.empty-cart h3 { + font-size: var(--text-4xl); + font-weight: 800; + color: var(--gray-800); + margin-bottom: var(--space-2); +} + +.empty-cart p { + font-size: var(--text-md); + color: var(--gray-400); + margin-bottom: var(--space-6); +} + +/* ── CART SUMMARY PANEL ── */ +.cart-summary { + position: sticky; + top: calc(4.125rem + var(--space-4)); + display: flex; + flex-direction: column; + gap: var(--space-4); +} + +.summary-card { + background: white; + border: 0.0625rem solid var(--gray-200); + border-radius: var(--radius-xl); + overflow: hidden; +} + +.summary-header { + padding: var(--space-5) var(--space-6); + border-bottom: 0.0625rem solid var(--gray-100); +} + +.summary-header h2 { + font-size: var(--text-3xl); + font-weight: 800; + color: var(--gray-800); +} + +.summary-body { + padding: var(--space-5) var(--space-6); + display: flex; + flex-direction: column; + gap: var(--space-4); +} + +.summary-row { + display: flex; + align-items: center; + justify-content: space-between; + font-size: var(--text-md); + color: var(--gray-600); +} + +.summary-row .label { + font-weight: 500; +} + +.summary-row .value { + font-weight: 600; + color: var(--gray-800); +} + +.summary-row .value.free { + color: var(--teal); + font-weight: 700; +} + +.summary-divider { + border: none; + border-top: 0.0625rem solid var(--gray-100); +} + +.summary-total-row { + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-5) var(--space-6); + border-top: 0.0625rem solid var(--gray-200); + background: var(--gray-50); +} + +.summary-total-row .total-label { + font-size: var(--text-lg); + font-weight: 800; + color: var(--gray-800); +} + +.summary-total-row .total-value { + font-size: var(--text-deal-price, 1.625rem); + font-weight: 900; + color: var(--red); +} + +/* Coupon input */ +.coupon-card { + background: white; + border: 0.0625rem solid var(--gray-200); + border-radius: var(--radius-xl); + padding: var(--space-5) var(--space-6); +} + +.coupon-card h3 { + font-size: var(--text-md); + font-weight: 700; + color: var(--gray-800); + margin-bottom: var(--space-3); + display: flex; + align-items: center; + gap: var(--space-2); +} + +.coupon-field { + display: flex; + gap: var(--space-2); +} + +.coupon-field input { + flex: 1; + border: 0.0625rem solid var(--gray-200); + border-radius: var(--radius-md); + padding: var(--space-2) var(--space-3); + font-size: var(--text-md); + font-family: inherit; + color: var(--gray-800); + outline: none; + transition: border-color 0.2s; +} + +.coupon-field input::placeholder { + color: var(--gray-400); +} + +.coupon-field input:focus { + border-color: var(--blue); +} + +.coupon-field button { + background: var(--blue-light); + color: var(--blue); + border: none; + border-radius: var(--radius-md); + padding: var(--space-2) var(--space-4); + font-size: var(--text-md); + font-weight: 700; + cursor: pointer; + font-family: inherit; + transition: background 0.2s, color 0.2s; + white-space: nowrap; +} + +.coupon-field button:hover { + background: var(--blue); + color: white; +} + +/* CTA buttons */ +.btn-checkout { + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-2); + background: var(--blue); + color: white; + border: none; + border-radius: var(--radius-md); + padding: var(--space-4) var(--space-6); + font-size: var(--text-xl); + font-weight: 700; + cursor: pointer; + font-family: inherit; + width: 100%; + transition: background 0.2s, transform 0.15s; +} + +.btn-checkout:hover { + background: var(--blue-dark); + transform: translateY(-0.0625rem); +} + +.btn-checkout::after { + content: "→"; +} + +.btn-continue { + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-2); + background: white; + color: var(--blue); + border: 0.09375rem solid var(--blue); + border-radius: var(--radius-md); + padding: var(--space-3) var(--space-6); + font-size: var(--text-md); + font-weight: 600; + cursor: pointer; + font-family: inherit; + width: 100%; + transition: background 0.2s, color 0.2s; + text-decoration: none; +} + +.btn-continue:hover { + background: var(--blue-light); +} + +.btn-continue::before { + content: "←"; +} + +.btn-clear { + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-2); + background: none; + color: var(--gray-400); + border: none; + font-size: var(--text-md); + font-weight: 500; + cursor: pointer; + font-family: inherit; + width: 100%; + padding: var(--space-2); + border-radius: var(--radius-md); + transition: color 0.2s, background 0.2s; +} + +.btn-clear:hover { + color: var(--red); + background: #fef2f2; +} + +/* Trust badges */ +.trust-badges { + display: flex; + flex-direction: column; + gap: var(--space-3); + padding: var(--space-5) var(--space-6); + border-top: 0.0625rem solid var(--gray-100); +} + +.trust-item { + display: flex; + align-items: center; + gap: var(--space-3); + font-size: var(--text-md); + color: var(--gray-600); +} + +.trust-item .ti-icon { + width: 2rem; + height: 2rem; + border-radius: var(--radius-md); + background: var(--blue-light); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--text-xl); + flex-shrink: 0; +} + +.trust-item .ti-text strong { + display: block; + font-weight: 700; + color: var(--gray-800); + font-size: var(--text-md); +} + +.trust-item .ti-text span { + font-size: var(--text-sm); + color: var(--gray-400); +} + +@media (max-width: 56.25rem) { + .cart-layout { + grid-template-columns: 1fr !important; + } + + .cart-summary { + position: static; + width: 100%; + } + + .cart-col-headers { + display: none; + } + + .cart-item { + grid-template-columns: 1fr; + gap: var(--space-4); + padding: var(--space-4); + } + + /* Keep price visible */ + .cart-item-price { + font-size: var(--text-md); + font-weight: 600; + color: var(--gray-600); + } + + /* Show subtotal but move below */ + .cart-item-subtotal { + font-size: var(--text-lg); + font-weight: 800; + color: var(--red); + } + + /* Stack quantity & remove nicely */ + .qty-control { + margin-top: var(--space-2); + } + + .remove-btn { + align-self: flex-end; + } +} + +@media (max-width: 30rem) { + /* 480px */ + + .cart-page { + padding: var(--space-6) var(--space-4); + } + + .cart-page-title { + flex-direction: column; + align-items: flex-start; + gap: var(--space-2); + } + + .cart-item-info { + flex-direction: column; + align-items: flex-start; + gap: var(--space-2); + } + + .cart-item-img { + width: 4rem; + height: 4rem; + } + + .qty-control { + transform: scale(0.95); + } + + .summary-header h2 { + font-size: var(--text-xl); + } + + .summary-total-row .total-value { + font-size: var(--text-xl); + } +} diff --git a/assets/css/checkout.css b/assets/css/checkout.css new file mode 100644 index 0000000..0afd221 --- /dev/null +++ b/assets/css/checkout.css @@ -0,0 +1,165 @@ +/* ── PAGE BASE ── */ +body { + background: #f8fafc; +} + +.checkout-page { + max-width: 100rem; + margin: 0 auto; + padding: var(--space-6); +} + +/* ── PAGE TITLE ── */ +.checkout-page-title { + margin: 0 auto var(--space-6); + display: flex; + align-items: center; + gap: var(--space-3); +} + +.checkout-page-title h1 { + font-size: var(--text-deal, 2.125rem); + font-weight: 900; + color: var(--gray-800); + letter-spacing: -0.04em; +} + +.checkout-layout { + margin: 0 auto; + display: grid; + grid-template-columns: 3fr 1fr; + gap: var(--space-4); + align-items: start; +} + +.checkout-form-card, +.checkout-summary-card { + background: white; + border: 0.0625rem solid var(--gray-200); + border-radius: var(--radius-xl); + padding: var(--space-6); +} + +.checkout-title { + font-size: var(--text-3xl); + font-weight: 800; + margin-bottom: var(--space-4); + color: var(--gray-800); +} + +.checkout-form { + display: flex; + flex-direction: column; + gap: var(--space-3); +} + +.checkout-form input { + border: 0.0625rem solid var(--gray-200); + border-radius: var(--radius-md); + padding: var(--space-3); + font-size: var(--text-md); + font-family: inherit; + outline: none; + transition: border-color 0.2s; +} + +.checkout-form input:focus { + border-color: var(--blue); +} + +.form-group { + display: flex; + flex-direction: column; + gap: var(--space-1); + flex: 1; +} + +.form-group label { + font-size: var(--text-sm); + font-weight: 600; + color: var(--gray-700); +} + +.form-group label span { + color: var(--red); + font-weight: 700; +} + +.form-group input { + border: 0.0625rem solid var(--gray-200); + border-radius: var(--radius-md); + padding: var(--space-3); + font-size: var(--text-md); + font-family: inherit; + outline: none; + transition: border-color 0.2s, box-shadow 0.2s; +} + +.form-group input:focus { + border-color: var(--blue); + box-shadow: 0 0 0 0.125rem rgba(26, 111, 212, 0.15); +} + +.form-row { + display: flex; + gap: var(--space-4); +} + +@media (max-width: 56.25rem) { + .form-row { + flex-direction: column; + } +} + +.checkout-continue { + margin-top: var(--space-4); +} + +.checkout-summary { + margin-top: var(--space-4); + display: flex; + flex-direction: column; + gap: var(--space-3); +} + +.summary-row { + display: flex; + justify-content: space-between; + font-size: var(--text-md); +} + +.total-row { + font-size: var(--text-xl); + font-weight: 800; + color: var(--red); +} + +.qr-section { + margin-top: var(--space-6); + text-align: center; +} + +.qr-wrapper { + margin-top: var(--space-3); + border-radius: var(--radius-lg); + overflow: hidden; + transition: filter 0.3s ease; +} + +.qr-wrapper img { + width: 100%; + height: auto; + display: block; +} + +.qr-wrapper.blurred { + filter: blur(12px); + pointer-events: none; +} + +/* Responsive */ +@media (max-width: 56.25rem) { + .checkout-layout { + grid-template-columns: 1fr; + } +} diff --git a/assets/css/components.css b/assets/css/components.css new file mode 100644 index 0000000..d2603eb --- /dev/null +++ b/assets/css/components.css @@ -0,0 +1,123 @@ +.product-card { + background: white; + border: 0.0625rem solid var(--gray-200); + border-radius: var(--radius-xl); + overflow: hidden; + cursor: pointer; + transition: all 0.25s; + position: relative; +} + +.product-card-link { + position: absolute; + inset: 0; + z-index: 1; +} + +.product-card:hover { + border-color: var(--blue); + box-shadow: 0 0.5rem 1.5rem rgba(26, 111, 212, 0.12); + transform: translateY(-0.25rem); +} + +.product-img { + height: 18rem; + background: var(--gray-50); /* neutral fallback while image loads */ + display: flex; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; +} + +.product-img img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; + transition: transform 0.35s ease; +} + +.product-card:hover .product-img img { + transform: scale(1.05); /* subtle zoom on hover */ +} + +.product-disc { + position: absolute; + top: var(--space-3); + left: var(--space-3); + background: var(--red); + color: white; + font-size: var(--text-xs); + font-weight: 800; + padding: var(--space-1) var(--space-2); + border-radius: var(--radius-sm); + z-index: 3; + pointer-events: none; +} + +.product-body { + padding: var(--space-4); +} +.product-name { + font-size: var(--text-md); + font-weight: 700; + color: var(--gray-800); + margin-bottom: var(--space-2); + line-height: 1.4; +} +.product-rating { + font-size: var(--text-sm); + color: #f4b400; + margin-bottom: var(--space-2); +} + +.product-price { + display: flex; + align-items: baseline; + gap: var(--space-2); + margin-bottom: var(--space-3); +} +.product-price .rp-now { + font-size: var(--text-xl); + font-weight: 800; + color: var(--blue); +} +.product-price .rp-old { + font-size: var(--text-md); + color: var(--gray-400); + text-decoration: line-through; +} + +.product-add-btn { + display: flex; + align-items: center; + justify-content: center; + place-self: end; + gap: var(--space-2); + width: 100%; + background: var(--blue-light); + color: var(--blue); + border: none; + border-radius: var(--radius-md); + padding: var(--space-3); + font-size: var(--text-md); + font-weight: 700; + cursor: pointer; + font-family: inherit; + transition: all 0.25s ease; + position: relative; + overflow: hidden; + position: relative; + z-index: 2; +} + +.product-add-btn svg { + width: 18px; + height: 18px; +} + +.product-add-btn:hover { + background: var(--blue); + color: white; +} diff --git a/assets/css/product.css b/assets/css/product.css new file mode 100644 index 0000000..096e48b --- /dev/null +++ b/assets/css/product.css @@ -0,0 +1,1066 @@ +/* ── PAGE BASE ── */ +body { + background: #f8fafc; +} + +/* ── PRODUCT WRAPPER ── */ +.product-page { + max-width: 100rem; + margin: 0 auto; + padding: var(--space-6); +} + +/* ── PRODUCT TOP GRID ── */ +.product-top { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-8); + align-items: start; + margin-bottom: var(--space-10); +} + +/* ── GALLERY ── */ +.gallery-col { + display: flex; + flex-direction: column; + gap: var(--space-4); +} + +.gallery-main { + background: white; + border-radius: var(--radius-xl); + border: 0.0625rem solid var(--gray-200); + overflow: hidden; + aspect-ratio: 1; + display: flex; + align-items: center; + justify-content: center; + position: relative; +} + +.gallery-main-img { + width: 100%; + height: 100%; + object-fit: contain; + padding: var(--space-8); + transition: opacity 0.25s; +} + +/* SVG placeholder main image */ +.gallery-main-placeholder { + width: 70%; + height: 70%; + display: flex; + align-items: center; + justify-content: center; +} + +.gallery-thumbs { + display: flex; + gap: var(--space-3); +} + +.thumb { + flex: 1; + aspect-ratio: 1; + background: white; + border: 0.125rem solid var(--gray-200); + border-radius: var(--radius-lg); + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + overflow: hidden; + transition: border-color 0.2s; + padding: var(--space-2); + font-size: 1.75rem; +} + +.thumb:hover, +.thumb.active { + border-color: var(--blue); +} + +/* ── PRODUCT SUMMARY ── */ +.summary-col { + display: flex; + flex-direction: column; + gap: 0; +} + +.product-title-row { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: var(--space-4); + margin-bottom: var(--space-3); +} + +.product-title { + font-size: 1.625rem; + font-weight: 800; + color: var(--gray-800); + line-height: 1.25; + letter-spacing: -0.02em; +} + +.product-nav-arrows { + display: flex; + align-items: center; + gap: var(--space-2); + flex-shrink: 0; + margin-top: var(--space-1); +} + +.prod-nav-btn { + background: none; + border: 0.0625rem solid var(--gray-200); + border-radius: var(--radius-md); + width: 2rem; + height: 2rem; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + color: var(--gray-600); + font-size: var(--text-lg); + transition: all 0.2s; +} + +.prod-nav-btn:hover { + border-color: var(--blue); + color: var(--blue); +} + +.prod-nav-btn.grid-btn { + background: var(--blue); + border-color: var(--blue); + color: white; +} + +/* Rating row */ +.rating-row { + display: flex; + align-items: center; + gap: var(--space-3); + margin-bottom: var(--space-4); + padding-bottom: var(--space-4); + border-bottom: 0.0625rem solid var(--gray-100); +} + +.stars { + color: #f4b400; + font-size: var(--text-xl); + letter-spacing: 0.05em; +} +.rating-count { + font-size: var(--text-md); + color: var(--gray-400); +} +.rating-divider { + color: var(--gray-200); +} +.review-link { + font-size: var(--text-md); + color: var(--blue); + cursor: pointer; +} +.review-link:hover { + text-decoration: underline; +} + +/* Price */ +.product-price-row { + display: flex; + align-items: baseline; + gap: var(--space-3); + margin-bottom: var(--space-4); +} + +.price-current { + font-size: var(--text-deal-price); + font-weight: 900; + color: var(--blue); +} + +.price-original { + font-size: var(--text-4xl); + color: var(--gray-400); + text-decoration: line-through; + font-weight: 500; +} + +.price-badge { + background: var(--red); + color: white; + font-size: var(--text-sm); + font-weight: 800; + padding: var(--space-1) var(--space-2); + border-radius: var(--radius-sm); +} + +/* Short desc */ +.product-short-desc { + font-size: var(--text-lg); + color: var(--gray-600); + line-height: 1.75; + margin-bottom: var(--space-4); +} + +/* Benefits pills */ +.benefit-pills { + display: flex; + flex-wrap: wrap; + gap: var(--space-2); + margin-bottom: var(--space-5); +} + +.benefit-pill { + display: flex; + align-items: center; + gap: var(--space-1); + background: var(--blue-light); + color: var(--blue); + font-size: var(--text-sm); + font-weight: 600; + padding: var(--space-1) var(--space-3); + border-radius: var(--radius-full); +} + +/* Stock */ +.stock-status { + display: flex; + align-items: center; + gap: var(--space-2); + font-size: var(--text-md); + font-weight: 700; + color: #16a34a; + margin-bottom: var(--space-5); +} + +.stock-dot { + width: 0.5rem; + height: 0.5rem; + background: #16a34a; + border-radius: var(--radius-full); +} + +/* Divider */ +.prod-divider { + border: none; + border-top: 0.0625rem solid var(--gray-100); + margin: var(--space-4) 0; +} + +/* Qty + Add to cart */ +.qty-cart-row { + display: flex; + align-items: center; + gap: var(--space-3); + margin-bottom: var(--space-5); + flex-wrap: wrap; +} + +.qty-control { + display: flex; + align-items: center; + border: 0.0625rem solid var(--gray-200); + border-radius: var(--radius-md); + overflow: hidden; + background: white; +} + +.qty-btn { + background: none; + border: none; + cursor: pointer; + width: 2.5rem; + height: 2.75rem; + display: flex; + align-items: center; + justify-content: center; + font-size: var(--text-xl); + font-weight: 700; + color: var(--gray-600); + transition: background 0.15s, color 0.15s; +} + +.qty-btn:hover { + background: var(--gray-100); + color: var(--blue); +} + +.qty-num { + font-size: var(--text-md); + font-weight: 700; + color: var(--gray-800); + min-width: 2.5rem; + text-align: center; + border-left: 0.0625rem solid var(--gray-200); + border-right: 0.0625rem solid var(--gray-200); + height: 2.75rem; + display: flex; + align-items: center; + justify-content: center; +} + +.add-to-cart-btn { + flex: 1; + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-2); + background: var(--blue); + color: white; + border: none; + border-radius: var(--radius-md); + padding: var(--space-3) var(--space-6); + font-size: var(--text-lg); + font-weight: 700; + cursor: pointer; + font-family: inherit; + transition: background 0.2s, transform 0.15s; + min-height: 2.75rem; +} + +.add-to-cart-btn:hover { + background: var(--blue-dark); + transform: translateY(-0.0625rem); +} +.add-to-cart-btn::after { + content: "+"; + font-size: var(--text-4xl); + font-weight: 300; + margin-left: var(--space-1); +} + +.wishlist-btn { + width: 2.75rem; + height: 2.75rem; + border: 0.0625rem solid var(--gray-200); + border-radius: var(--radius-md); + background: white; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + color: var(--gray-400); + font-size: var(--text-xl); + transition: all 0.2s; +} + +.wishlist-btn:hover { + border-color: var(--red); + color: var(--red); + background: #fef2f2; +} + +/* Meta */ +.product-meta-block { + display: flex; + flex-direction: column; + gap: var(--space-2); + margin-bottom: var(--space-5); +} + +.meta-row { + display: flex; + align-items: flex-start; + gap: var(--space-2); + font-size: var(--text-md); + color: var(--gray-600); +} + +.meta-row .meta-label { + font-weight: 700; + color: var(--gray-800); + min-width: 5.5rem; +} + +.meta-tag { + display: inline-flex; + align-items: center; + background: var(--gray-100); + color: var(--gray-600); + font-size: var(--text-sm); + padding: var(--space-1) var(--space-2); + border-radius: var(--radius-sm); + margin-right: var(--space-1); + transition: all 0.15s; + cursor: pointer; +} + +.meta-tag:hover { + background: var(--blue-light); + color: var(--blue); +} + +/* Share */ +.share-row { + display: flex; + align-items: center; + gap: var(--space-3); + padding-top: var(--space-4); + border-top: 0.0625rem solid var(--gray-100); +} + +.share-label { + font-size: var(--text-md); + font-weight: 700; + color: var(--gray-800); +} + +.share-icons { + display: flex; + gap: var(--space-2); +} + +.share-icon { + width: 2rem; + height: 2rem; + border-radius: var(--radius-full); + background: var(--gray-100); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--text-md); + font-weight: 700; + cursor: pointer; + color: var(--gray-600); + transition: all 0.2s; + font-style: normal; +} + +.share-icon:hover { + background: var(--blue); + color: white; +} + +/* ── PRODUCT LOWER SECTION: TABS + SIDEBAR ── */ +.product-lower { + display: grid; + grid-template-columns: 1fr 19rem; + gap: var(--space-8); + align-items: start; +} + +/* ── TABS ── */ +.tabs-panel { + background: white; + border-radius: var(--radius-xl); + border: 0.0625rem solid var(--gray-200); + overflow: hidden; +} + +.tab-nav { + display: flex; + border-bottom: 0.0625rem solid var(--gray-200); +} + +.tab-nav-btn { + background: none; + border: none; + cursor: pointer; + font-family: inherit; + font-size: var(--text-lg); + font-weight: 600; + color: var(--gray-600); + padding: var(--space-4) var(--space-6); + border-bottom: 0.1875rem solid transparent; + margin-bottom: -0.0625rem; + transition: all 0.2s; + white-space: nowrap; +} + +.tab-nav-btn:hover { + color: var(--blue); +} +.tab-nav-btn.active { + color: var(--blue); + border-bottom-color: var(--blue); +} + +.tab-pane { + display: none; + padding: var(--space-8); +} +.tab-pane.active { + display: block; +} + +/* Description content */ +.desc-lead { + font-size: var(--text-xl); + font-weight: 600; + color: var(--gray-800); + line-height: 1.6; + margin-bottom: var(--space-5); +} + +.desc-body { + font-size: var(--text-lg); + color: var(--gray-600); + line-height: 1.85; + margin-bottom: var(--space-5); +} + +.desc-body p { + margin-bottom: var(--space-4); +} +.desc-body p:last-child { + margin-bottom: 0; +} + +.desc-features { + display: grid; + grid-template-columns: 1fr 1fr; + gap: var(--space-3) var(--space-6); + margin: var(--space-6) 0; +} + +.desc-feature { + display: flex; + align-items: flex-start; + gap: var(--space-3); + font-size: var(--text-md); + color: var(--gray-700); +} + +.desc-feature .feat-icon { + width: 2rem; + height: 2rem; + border-radius: var(--radius-md); + background: var(--blue-light); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--text-xl); + flex-shrink: 0; +} + +.desc-feature .feat-text strong { + display: block; + font-weight: 700; + color: var(--gray-800); + font-size: var(--text-md); + margin-bottom: 0.125rem; +} +.desc-feature .feat-text span { + font-size: var(--text-sm); + color: var(--gray-400); +} + +.how-to-use { + background: var(--gray-50); + border-radius: var(--radius-lg); + padding: var(--space-5); + margin-top: var(--space-6); +} + +.how-to-use h4 { + font-size: var(--text-lg); + font-weight: 700; + color: var(--gray-800); + margin-bottom: var(--space-4); + display: flex; + align-items: center; + gap: var(--space-2); +} + +.how-steps { + display: flex; + flex-direction: column; + gap: var(--space-3); + counter-reset: steps; +} + +.how-step { + display: flex; + align-items: flex-start; + gap: var(--space-3); + font-size: var(--text-md); + color: var(--gray-600); + line-height: 1.6; +} + +.step-num { + width: 1.5rem; + height: 1.5rem; + background: var(--blue); + color: white; + border-radius: var(--radius-full); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--text-sm); + font-weight: 800; + flex-shrink: 0; + margin-top: 0.125rem; +} + +/* Ingredients tab */ +.ingredients-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-4); + margin-bottom: var(--space-6); +} + +.ingredient-card { + background: var(--gray-50); + border-radius: var(--radius-lg); + padding: var(--space-4); + text-align: center; + border: 0.0625rem solid var(--gray-200); + transition: all 0.2s; +} + +.ingredient-card:hover { + border-color: var(--blue); + background: var(--blue-light); +} + +.ing-icon { + font-size: 2rem; + margin-bottom: var(--space-2); +} +.ing-name { + font-size: var(--text-md); + font-weight: 700; + color: var(--gray-800); + margin-bottom: var(--space-1); +} +.ing-role { + font-size: var(--text-sm); + color: var(--gray-400); + line-height: 1.5; +} + +.full-ingredients { + background: var(--gray-50); + border-radius: var(--radius-lg); + padding: var(--space-4) var(--space-5); + font-size: var(--text-md); + color: var(--gray-600); + line-height: 1.8; + border: 0.0625rem solid var(--gray-200); +} + +.full-ingredients strong { + color: var(--gray-800); +} + +/* Reviews tab */ +.reviews-summary { + display: grid; + grid-template-columns: 10rem 1fr; + gap: var(--space-8); + align-items: center; + padding-bottom: var(--space-6); + border-bottom: 0.0625rem solid var(--gray-100); + margin-bottom: var(--space-6); +} + +.rating-big { + text-align: center; + background: var(--gray-50); + border-radius: var(--radius-xl); + padding: var(--space-6); + border: 0.0625rem solid var(--gray-200); +} + +.rating-big .score { + font-size: 3.5rem; + font-weight: 900; + color: var(--blue); + line-height: 1; +} +.rating-big .stars-big { + font-size: var(--text-5xl); + color: #f4b400; + margin: var(--space-2) 0; +} +.rating-big .total { + font-size: var(--text-md); + color: var(--gray-400); +} + +.rating-bars { + display: flex; + flex-direction: column; + gap: var(--space-2); +} + +.rating-bar-row { + display: flex; + align-items: center; + gap: var(--space-3); + font-size: var(--text-md); + color: var(--gray-600); +} +.rating-bar-row .bar-label { + min-width: 2.5rem; + font-weight: 600; + color: var(--gray-700); +} +.bar-track { + flex: 1; + height: 0.5rem; + background: var(--gray-200); + border-radius: var(--radius-full); + overflow: hidden; +} +.bar-fill { + height: 100%; + background: #f4b400; + border-radius: var(--radius-full); +} +.bar-count { + min-width: 1.5rem; + text-align: right; + color: var(--gray-400); +} + +.review-list { + display: flex; + flex-direction: column; + gap: var(--space-5); +} + +.review-card { + padding: var(--space-5); + border: 0.0625rem solid var(--gray-200); + border-radius: var(--radius-lg); + background: var(--gray-50); +} + +.review-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: var(--space-3); +} +.reviewer-info { + display: flex; + align-items: center; + gap: var(--space-3); +} + +.reviewer-avatar { + width: 2.5rem; + height: 2.5rem; + border-radius: var(--radius-full); + background: linear-gradient(135deg, var(--blue), var(--teal)); + display: flex; + align-items: center; + justify-content: center; + color: white; + font-size: var(--text-lg); + font-weight: 700; +} + +.reviewer-name { + font-size: var(--text-md); + font-weight: 700; + color: var(--gray-800); +} +.reviewer-date { + font-size: var(--text-sm); + color: var(--gray-400); +} +.review-stars { + color: #f4b400; + font-size: var(--text-lg); +} +.review-title { + font-size: var(--text-md); + font-weight: 700; + color: var(--gray-800); + margin-bottom: var(--space-2); +} +.review-text { + font-size: var(--text-md); + color: var(--gray-600); + line-height: 1.7; +} +.verified-badge { + display: inline-flex; + align-items: center; + gap: var(--space-1); + background: #ecfdf5; + color: #16a34a; + font-size: var(--text-xs); + font-weight: 700; + padding: var(--space-1) var(--space-2); + border-radius: var(--radius-sm); + margin-top: var(--space-2); +} + +/* ── SIDEBAR ── */ +.product-sidebar { + display: flex; + flex-direction: column; + gap: var(--space-4); +} + +.sidebar-promo { + background: white; + border: 0.0625rem solid var(--gray-200); + border-radius: var(--radius-xl); + overflow: hidden; +} + +.sidebar-promo-img { + height: 11rem; + background: var(--gray-50); /* neutral fallback while loading */ + display: flex; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; /* keeps image inside rounded corners */ +} + +.sidebar-promo-img img { + width: 100%; + height: 100%; + object-fit: contain; + padding: var(--space-4); + transition: transform 0.35s ease; +} + +.sidebar-promo:hover .sidebar-promo-img img { + transform: scale(1.05); +} + +.sidebar-disc { + position: absolute; + top: var(--space-3); + right: var(--space-3); + width: 3rem; + height: 3rem; + background: var(--red); + border-radius: var(--radius-full); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: white; + font-size: var(--text-xs); + font-weight: 800; + line-height: 1.2; +} + +.sidebar-promo-body { + padding: var(--space-4) var(--space-5); +} +.sidebar-promo-body h4 { + font-size: var(--text-3xl); + font-weight: 800; + color: var(--gray-800); + margin-bottom: var(--space-2); +} + +.sidebar-price { + display: flex; + align-items: baseline; + gap: var(--space-2); + margin-bottom: var(--space-4); +} +.sidebar-price .s-now { + font-size: var(--text-4xl); + font-weight: 800; + color: var(--blue); +} +.sidebar-price .s-old { + font-size: var(--text-md); + color: var(--gray-400); + text-decoration: line-through; +} + +.sidebar-buy-btn { + display: flex; + align-items: center; + justify-content: center; + gap: var(--space-2); + background: var(--blue); + color: white; + border: none; + border-radius: var(--radius-md); + padding: var(--space-3) var(--space-5); + font-size: var(--text-md); + font-weight: 700; + cursor: pointer; + font-family: inherit; + width: 100%; + transition: background 0.2s; +} + +.sidebar-buy-btn:hover { + background: var(--blue-dark); +} +.sidebar-buy-btn::after { + content: "+"; + font-size: var(--text-3xl); + font-weight: 300; +} + +/* Delivery info card */ +.delivery-card { + background: white; + border: 0.0625rem solid var(--gray-200); + border-radius: var(--radius-xl); + padding: var(--space-5); + display: flex; + flex-direction: column; + gap: var(--space-4); +} + +.delivery-item { + display: flex; + align-items: flex-start; + gap: var(--space-3); +} + +.delivery-icon { + width: 2.5rem; + height: 2.5rem; + border-radius: var(--radius-md); + background: var(--blue-light); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--text-xl); + flex-shrink: 0; +} + +.delivery-text strong { + display: block; + font-size: var(--text-md); + font-weight: 700; + color: var(--gray-800); +} +.delivery-text span { + font-size: var(--text-sm); + color: var(--gray-400); +} + +/* ── RELATED PRODUCTS ── */ +.related-section { + margin-top: var(--space-10); +} + +.related-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: var(--space-6); +} + +.related-title { + font-size: var(--text-deal, 2.125rem); + font-weight: 800; + color: var(--gray-800); + letter-spacing: -0.03em; +} + +.related-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: var(--space-4); +} + +/* ── TOAST NOTIFICATION ── */ +.toast { + position: fixed; + bottom: var(--space-6); + right: var(--space-6); + background: var(--gray-800); + color: white; + padding: var(--space-3) var(--space-5); + border-radius: var(--radius-lg); + font-size: var(--text-md); + font-weight: 600; + display: flex; + align-items: center; + gap: var(--space-3); + box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.2); + transform: translateY(6rem); + opacity: 0; + transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); + z-index: 9999; + pointer-events: none; +} + +.toast.show { + transform: translateY(0); + opacity: 1; +} +.toast-icon { + font-size: var(--text-xl); +} +.toast-view { + color: var(--yellow); + cursor: pointer; + pointer-events: all; + margin-left: var(--space-2); + text-decoration: underline; +} +/* ===================================== + FORCE PRODUCT IMAGES TO BE RESPONSIVE +===================================== */ + +.gallery-main img, +.sidebar-promo-img img { + width: 100%; + max-width: 100%; + height: auto; + display: block; + object-fit: contain; +} + +/* ── RESPONSIVE ── */ +@media (max-width: 64rem) { + .product-top { + grid-template-columns: 1fr; + gap: var(--space-6); + } + .gallery-col { + max-width: 28rem; + margin: 0 auto; + width: 100%; + } + .product-lower { + grid-template-columns: 1fr; + } + .product-sidebar { + display: grid; + grid-template-columns: 1fr 1fr; + } + .related-grid { + grid-template-columns: repeat(2, 1fr); + } + .desc-features { + grid-template-columns: 1fr; + } + .ingredients-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (max-width: 40rem) { + .product-sidebar { + grid-template-columns: 1fr; + } + .related-grid { + grid-template-columns: 1fr; + } + .reviews-summary { + grid-template-columns: 1fr; + } + .ingredients-grid { + grid-template-columns: 1fr; + } + .tab-nav { + overflow-x: auto; + } +} diff --git a/assets/css/styles.css b/assets/css/styles.css new file mode 100644 index 0000000..6218b2c --- /dev/null +++ b/assets/css/styles.css @@ -0,0 +1,1299 @@ +/* 1️⃣ Font definitions FIRST */ +@font-face { + font-family: "Plus Jakarta Sans"; + src: url("../fonts/plus-jakarta-sans-regular.woff2") format("woff2"); + font-weight: 400; + font-display: swap; +} + +@font-face { + font-family: "Plus Jakarta Sans"; + src: url("../fonts/plus-jakarta-sans-500.woff2") format("woff2"); + font-weight: 500; + font-display: swap; +} + +@font-face { + font-family: "Plus Jakarta Sans"; + src: url("../fonts/plus-jakarta-sans-600.woff2") format("woff2"); + font-weight: 600; + font-display: swap; +} + +@font-face { + font-family: "Plus Jakarta Sans"; + src: url("../fonts/plus-jakarta-sans-700.woff2") format("woff2"); + font-weight: 700; + font-display: swap; +} + +@font-face { + font-family: "Plus Jakarta Sans"; + src: url("../fonts/plus-jakarta-sans-800.woff2") format("woff2"); + font-weight: 800; + font-display: swap; +} + +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +:root { + --font-main: "Plus Jakarta Sans", sans-serif; + + --blue: #1a6fd4; + --blue-dark: #0e4da4; + --blue-light: #e8f1fd; + --teal: #17a2b8; + --red: #e53935; + --yellow: #fbbf24; + --white: #ffffff; + --gray-50: #f9fafb; + --gray-100: #f3f4f6; + --gray-200: #e5e7eb; + --gray-300: #d1d5db; + --gray-400: #9ca3af; + --gray-600: #4b5563; + --gray-700: #374151; + --gray-800: #1f2937; + + /* Spacing scale */ + --space-1: 0.25rem; /* 4px */ + --space-2: 0.5rem; /* 8px */ + --space-3: 0.75rem; /* 12px */ + --space-4: 1rem; /* 16px */ + --space-5: 1.25rem; /* 20px */ + --space-6: 1.5rem; /* 24px */ + --space-8: 2rem; /* 32px */ + --space-10: 2.5rem; /* 40px */ + --space-12: 3rem; /* 48px */ + --space-14: 3.5rem; /* 56px */ + + /* Border radius scale */ + --radius-sm: 0.25rem; /* 4px */ + --radius-md: 0.5rem; /* 8px */ + --radius-lg: 0.75rem; /* 12px */ + --radius-xl: 0.875rem; /* 14px */ + --radius-2xl: 1rem; /* 16px */ + --radius-full: 9999px; + + /* Font size scale */ + --text-xs: 0.625rem; /* 10px */ + --text-sm: 0.6875rem; /* 11px */ + --text-base: 0.75rem; /* 12px */ + --text-md: 0.8125rem; /* 13px */ + --text-lg: 0.875rem; /* 14px */ + --text-xl: 0.9375rem; /* 15px */ + --text-2xl: 1rem; /* 16px */ + --text-3xl: 1.125rem; /* 18px */ + --text-4xl: 1.25rem; /* 20px */ + --text-5xl: 1.375rem; /* 22px */ + --text-6xl: 1.5rem; /* 24px */ + --text-hero: 4rem; /* 60px */ + --text-deal: 2.125rem; /* 34px */ + --text-deal-price: 1.625rem; /* 26px */ +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: var(--font-main); + color: var(--gray-800); + background: #fff; + overflow-x: hidden; +} + +a { + text-decoration: none; + color: inherit; +} + +/* ── TOPBAR ── */ +.topbar { + background: var(--blue); + color: white; + font-size: var(--text-md); + padding: var(--space-2) 0; +} +.topbar-inner { + max-width: 100rem; + margin: 0 auto; + padding: 0 var(--space-6); + display: flex; + align-items: center; + justify-content: space-between; +} +.topbar-welcome { + display: flex; + align-items: center; + gap: var(--space-3); +} +.topbar-welcome span { + opacity: 0.9; +} +.topbar-welcome .covid-link { + color: var(--yellow); + font-weight: 600; +} +.topbar-phone-badge { + background: var(--blue-dark); + color: white; + border-radius: var(--radius-full); + padding: var(--space-1) var(--space-4); + font-weight: 700; + font-size: var(--text-md); + display: flex; + align-items: center; + gap: var(--space-2); +} +.topbar-right { + display: flex; + align-items: center; + gap: var(--space-5); +} +.topbar-right a { + color: rgba(255, 255, 255, 0.85); + font-size: var(--text-md); + transition: color 0.2s; + display: flex; + align-items: center; + gap: var(--space-1); +} +.topbar-right a:hover { + color: white; +} + +/* ── NAVBAR ── */ +nav { + background: white; + border-bottom: 0.0625rem solid var(--gray-200); + position: relative; + top: 0; + z-index: 999; + box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.06); +} + +.nav-inner { + max-width: 100rem; + margin: 0 auto; + padding: var(--space-4) var(--space-6); + display: flex; + align-items: center; + gap: var(--space-7, 1.75rem); +} + +.logo { + display: flex; + align-items: center; + gap: var(--space-2); + flex-shrink: 0; +} + +.logo-image { + width: 7rem; + height: 7rem; + position: relative; + display: block; + object-fit: fill; + transition: transform 0.4s ease; +} + +.logo-image svg { + width: 2.875rem; + height: 2.875rem; +} + +.logo-texts .brand { + font-size: var(--text-2xl); + font-weight: 900; + color: var(--blue-dark); + letter-spacing: -0.03125rem; + display: block; + line-height: 1.1; +} + +.logo-texts .brand em { + color: var(--blue); + font-style: normal; +} + +.logo-texts .sub { + font-size: 0.5625rem; + letter-spacing: 0.09375rem; + color: var(--gray-400); + text-transform: uppercase; + display: block; +} + +.nav-links { + display: flex; + list-style: none; + gap: var(--space-1); + align-items: center; + flex: 1; +} + +.nav-links a { + font-size: var(--text-md); + font-weight: 500; + color: var(--gray-700); + padding: var(--space-2) var(--space-3); + border-radius: var(--radius-md); + transition: all 0.2s; +} + +.nav-links a:hover, +.nav-links .active a { + color: var(--blue); + background: var(--blue-light); +} + +.nav-links .active a { + font-weight: 600; +} + +.nav-right { + display: flex; + align-items: center; + gap: var(--space-2); + margin-left: auto; +} + +.search-box { + display: flex; + align-items: center; + border: 0.09375rem solid var(--gray-200); + border-radius: var(--radius-full); + overflow: hidden; + height: 2.25rem; + transition: border-color 0.2s; +} + +.search-box:focus-within { + border-color: var(--blue); +} + +.search-box input { + border: none; + outline: none; + font-size: var(--text-md); + padding: 0 var(--space-3); + font-family: inherit; + width: 8.75rem; + color: var(--gray-700); + background: transparent; +} + +.search-box button { + background: none; + border: none; + cursor: pointer; + padding: 0 var(--space-2); + color: var(--gray-400); + display: flex; + align-items: center; +} + +.icon-btn { + background: none; + border: none; + cursor: pointer; + padding: var(--space-2); + color: var(--gray-600); + display: flex; + align-items: center; + border-radius: var(--radius-md); + transition: background 0.2s; +} + +.icon-btn:hover { + background: var(--gray-100); +} + +.cart-btn { + display: flex; + align-items: center; + gap: var(--space-2); + background: var(--blue); + color: white; + border: none; + border-radius: var(--radius-full); + padding: var(--space-2) var(--space-4); + font-size: var(--text-md); + font-weight: 600; + cursor: pointer; + font-family: inherit; + transition: background 0.2s; +} + +.cart-btn:hover { + background: var(--blue-dark); +} + +.cart-count { + background: white; + color: var(--blue); + border-radius: var(--radius-full); + width: 1.125rem; + height: 1.125rem; + font-size: var(--text-sm); + font-weight: 700; + display: flex; + align-items: center; + justify-content: center; +} + +/* Hide hamburger on desktop */ +@media (min-width: 768px) { + #menu-toggle { + display: none; + } +} + +/* Hide nav links on mobile */ +@media (max-width: 767px) { + .nav-links { + display: none; + } +} + +/* Overlay background */ +.mobile-menu-overlay { + position: absolute; + top: 100%; + left: 0; + right: 0; + + background: white; + z-index: 999; + + transform: translateY(-20px); + opacity: 0; + pointer-events: none; + + transition: transform 0.25s ease, opacity 0.2s ease; + + padding: var(--space-6); + /* padding-bottom: 0; */ + box-shadow: 0 12px 25px rgba(0, 0, 0, 0.08); +} + +.mobile-menu-overlay.active { + transform: translateY(0); + opacity: 1; + pointer-events: auto; +} + +/* Header */ +.mobile-menu-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: var(--space-6); +} + +.mobile-menu-title { + font-size: var(--text-xl); + font-weight: 800; +} + +.close-menu { + background: none; + border: none; + font-size: 1.5rem; + cursor: pointer; +} + +/* Links */ +.mobile-nav-links { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + /* gap: var(--space-5); */ +} + +.mobile-nav-links a { + position: relative; + z-index: 1; + display: block; + text-decoration: none; + font-size: var(--text-lg); + font-weight: 600; + color: var(--gray-800); +} + +.mobile-nav-links li { + position: relative; + padding: var(--space-4) 0; /* Y-axis padding here */ +} + +.mobile-nav-links li::before { + content: ""; + position: absolute; + + left: calc(-1 * var(--space-6)); + right: calc(-1 * var(--space-6)); + top: 0; + bottom: 0; + + background: var(--blue-light); + opacity: 0; + + transition: opacity 0.2s ease; + + z-index: 0; +} + +.mobile-nav-links li:hover::before { + opacity: 1; +} + +.mobile-nav-links li:hover::before { + opacity: 1; + transform: scaleX(1); +} + +/* ── BREADCRUMB ── */ +.breadcrumb-bar { + background: white; + border-bottom: 0.0625rem solid var(--gray-200); + padding: var(--space-3) 0; +} +.breadcrumb-inner { + max-width: 100rem; + margin: 0 auto; + padding: 0 var(--space-6); + display: flex; + align-items: center; + gap: var(--space-2); + font-size: var(--text-md); + color: var(--gray-400); +} +.breadcrumb-inner a { + color: var(--gray-600); + transition: color 0.2s; +} +.breadcrumb-inner a:hover { + color: var(--blue); +} +.breadcrumb-inner .sep { + color: var(--gray-300); + font-size: var(--text-lg); +} +.breadcrumb-inner .current { + color: var(--blue); + font-weight: 600; +} + +/* ── HERO LAYOUT ── */ +.hero-section { + max-width: 100rem; + margin: 0 auto; + padding: var(--space-4) var(--space-6) var(--space-3); + + gap: var(--space-4); +} + +.hero-main { + background: url("../images/hero.webp") center / cover no-repeat; + border-radius: var(--radius-xl); + padding: var(--space-11, 2.75rem) var(--space-10) 0; + position: relative; + overflow: hidden; + min-height: 40rem; + display: flex; + align-items: center; + gap: var(--space-14); + justify-content: space-between; +} + +.hero-content { + /* position: relative; */ + /* z-index: 2; */ + /* padding-bottom: var(--space-11, 2.75rem); */ +} + +.hero-cat { + font-size: var(--text-6xl); + /* color: #a50f0a; */ + /* color: #fbbf24; */ + color: var(--yellow); + font-weight: 500; + letter-spacing: 0.05em; + margin-bottom: var(--space-2); +} + +.hero-h1 { + font-size: var(--text-hero); + font-weight: 900; + color: #fff7ed; + /* color: var(--white); */ + line-height: 1; + letter-spacing: 0.05em; + margin-bottom: var(--space-3); +} + +.hero-desc { + font-size: var(--text-2xl); + color: rgba(255, 255, 255, 0.85); + line-height: 1.65; + margin-bottom: var(--space-6); + max-width: 17.5rem; +} + +.btn-primary { + display: inline-flex; + align-items: center; + gap: var(--space-2); + background: var(--blue); + color: white; + padding: var(--space-4) var(--space-6); + border-radius: var(--radius-md); + font-size: var(--text-md); + font-weight: 700; + transition: all 0.2s; + border: none; + cursor: pointer; + font-family: inherit; +} + +.btn-primary:hover { + background: var(--blue-dark); + transform: translateY(-0.0625rem); +} + +.btn-primary::after { + content: "→"; +} + +/* HERO CTA PREMIUM EFFECT */ +.hero-buy-btn { + position: relative; + overflow: hidden; + transition: all 0.3s ease; +} + +.hero-buy-btn:hover { + transform: translateY(-3px); + box-shadow: 0 12px 30px rgba(26, 111, 212, 0.35); +} + +/* Check text hidden initially */ +.hero-buy-btn .btn-check { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%) scale(0); + opacity: 0; + transition: all 0.3s ease; + font-weight: 600; +} + +/* When added */ +.hero-buy-btn.added .btn-text { + opacity: 0; +} + +.hero-buy-btn.added .btn-check { + opacity: 1; + transform: translate(-50%, -50%) scale(1); +} + +/* Ripple effect */ +.hero-buy-btn::after { + content: ""; + position: absolute; + width: 0; + height: 0; + background: rgba(255, 255, 255, 0.4); + border-radius: 50%; + transform: translate(-50%, -50%); + top: 50%; + left: 50%; + transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease; + opacity: 0; +} + +.hero-buy-btn:active::after { + width: 300px; + height: 300px; + opacity: 1; + transition: 0s; +} + +.hero-product-wrap { + /* position: absolute; */ + /* right: 4.375rem; */ + /* bottom: 0; */ + z-index: 2; + display: flex; + align-items: flex-end; +} + +.hero-disc { + position: absolute; + top: 4rem; + right: 13.125rem; + width: 4.625rem; + height: 4.625rem; + background: var(--yellow); + border-radius: var(--radius-full); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + z-index: 3; + box-shadow: 0 0.375rem 1.25rem rgba(251, 191, 36, 0.45); + font-weight: 900; +} + +.hero-disc .pct { + font-size: 1.375rem; + color: #7c3800; + line-height: 1; +} + +.hero-disc .off { + font-size: var(--text-md); + color: #7c3800; +} + +.hero-dots { + position: absolute; + bottom: 1.25rem; + left: var(--space-10); + display: flex; + gap: var(--space-2); + z-index: 3; +} + +.dot { + width: 0.625rem; + height: 0.625rem; + border-radius: var(--radius-full); + background: var(--gray-300); + cursor: pointer; + transition: all 0.2s; +} + +.dot.active { + background: var(--blue); + width: 1.625rem; + border-radius: var(--radius-sm); +} + +/* ── SIDE BANNERS ── */ +.hero-side { + display: flex; + flex-direction: column; + gap: var(--space-4); +} + +.side-card { + flex: 1; + border-radius: var(--radius-lg); + padding: var(--space-8); + display: flex; + align-items: center; + justify-content: space-between; + cursor: pointer; + transition: transform 0.22s; + overflow: hidden; + letter-spacing: 0.05em; +} + +.side-card:hover { + transform: scale(1.025); +} + +.side-card-1 { + background: url("../images/body-lotion.webp") center / cover no-repeat; +} + +.side-card-2 { + background: url("../images/sanitizer.webp") center / cover no-repeat; +} + +.side-cat { + font-size: var(--text-2xl); + color: var(--gray-600); + margin-bottom: var(--space-1); +} + +.side-card > div { + align-self: self-start; +} + +.side-card > svg { + align-self: self-end; +} + +.side-card h3 { + font-size: var(--text-6xl); + font-weight: 800; + color: var(--gray-800); + line-height: 1.1; + margin-bottom: var(--space-2); +} + +.shop-now { + font-size: var(--text-sm); + font-weight: 700; + color: var(--red); + display: flex; + align-items: center; + gap: var(--space-1); +} + +.shop-now::after { + content: "→"; +} + +/* ── FEATURED STRIP ── */ +.featured-strip { + max-width: 100rem; + margin: 0 auto; + padding: var(--space-6); + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-4); +} + +.feat-card { + height: 40rem; + border-radius: var(--radius-lg); + position: relative; + overflow: hidden; + cursor: pointer; + transition: transform 0.3s; +} + +.feat-card:hover { + transform: scale(1.02); +} + +.feat-card:hover .feat-img { + transform: scale(1.06); +} + +.feat-card-bg { + position: absolute; + inset: 0; +} + +a.feat-card { + text-decoration: none; + color: inherit; + display: block; +} + +.feat-img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.5s; +} + +.feat-overlay { + position: absolute; + inset: 0; + background: linear-gradient(to top, rgba(0, 0, 0, 0.58) 0%, transparent 55%); +} + +.feat-info { + position: absolute; + bottom: 0; + left: 0; + right: 0; + padding: var(--space-6); + z-index: 2; +} + +.feat-tag { + font-size: var(--text-md); + color: rgba(255, 255, 255, 0.8); + margin-bottom: var(--space-1); + font-weight: 500; +} + +.feat-name { + font-size: var(--text-6xl); + font-weight: 800; + color: white; + margin-bottom: var(--space-2); +} + +.feat-shop { + font-size: var(--text-sm); + font-weight: 700; + color: #ff6b6b; + display: flex; + align-items: center; + gap: var(--space-1); +} + +.feat-shop::after { + content: "→"; +} + +.feat-disc { + position: absolute; + top: var(--space-3); + left: var(--space-3); + width: 3.25rem; + height: 3.25rem; + background: var(--yellow); + border-radius: var(--radius-full); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + z-index: 3; + font-weight: 900; + box-shadow: 0 0.25rem 0.875rem rgba(251, 191, 36, 0.4); +} + +.feat-disc .p { + font-size: var(--text-2xl); + color: #7c3800; + line-height: 1; +} + +.feat-disc .o { + font-size: var(--text-xs); + color: #7c3800; +} + +.bg-cream { + background: url("../images/fairness-cream.webp") center / cover no-repeat; +} + +.bg-facewash { + background: url("../images/playfair-facewash.webp") center / cover no-repeat; +} + +.bg-acne { + background: url("../images/anti-acne-cream.webp") center / cover no-repeat; +} + +/* ── OUR PRODUCTS ── */ +.section-wrap-span-2 { + max-width: 100rem; + margin: 0 auto; + padding: var(--space-5) var(--space-6) var(--space-10); + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--space-4); +} + +.section-wrap { + max-width: 100rem; + margin: 0 auto; + padding: var(--space-5) var(--space-6) var(--space-10); +} + +.sec-row { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: var(--space-6); +} + +.sec-title { + font-size: var(--text-deal, 2.125rem); + font-weight: 800; + color: var(--gray-800); + letter-spacing: -0.03em; +} + +.view-all { + font-size: var(--text-md); + font-weight: 600; + color: var(--blue); + display: flex; + align-items: center; + gap: var(--space-1); +} + +.view-all::after { + content: "→"; + font-size: var(--text-xl); +} + +.products-grid-span-2 { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--space-4); +} + +.products-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: var(--space-4); +} + +/* CARD HOVER LIFT */ +.prod-card { + position: relative; + cursor: pointer; + transition: all 0.3s ease; +} + +.prod-card:hover { + transform: translateY(-8px); + box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); +} + +.prod-card-link { + position: absolute; + inset: 0; + z-index: 1; + border-radius: inherit; +} + +/* HIDE ICON UNTIL HOVER */ +.cart-icon-btn { + position: absolute; + z-index: 2; + bottom: 10px; + right: 18px; + width: 44px; + height: 44px; + border-radius: 50%; + border: none; + background: #1a6fd4; + color: white; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + box-shadow: 0 6px 18px rgba(26, 111, 212, 0.35); + transition: all 0.3s ease; + opacity: 0; + transform: translateY(10px); +} + +.prod-card:hover .cart-icon-btn { + opacity: 1; + transform: translateY(0); +} + +/* TOOLTIP */ +.tooltip { + position: absolute; + bottom: 55px; + background: #222; + color: white; + font-size: 12px; + padding: 6px 10px; + border-radius: 6px; + opacity: 0; + transition: 0.2s; + white-space: nowrap; +} + +.cart-icon-btn:hover .tooltip { + opacity: 1; +} + +/* ADDED CHECK */ +.added-check { + position: absolute; + font-size: 18px; + opacity: 0; + transform: scale(0); + transition: 0.3s; +} + +.cart-icon-btn.added .cart-svg { + display: none; +} + +.cart-icon-btn.added .added-check { + opacity: 1; + transform: scale(1); +} + +/* QUANTITY BADGE */ +.prod-qty-badge { + position: absolute; + top: 12px; + right: 12px; + background: #e63946; + color: white; + font-size: 12px; + padding: 4px 8px; + border-radius: 20px; + display: none; +} + +.prod-img-box { + position: relative; + aspect-ratio: 1 / 1; /* makes it square */ + overflow: hidden; +} + +.prod-img-box img { + width: 100%; + height: 100%; + object-fit: cover; /* fills box and crops neatly */ + display: block; + transition: transform 0.4s ease; +} + +.prod-card:hover .prod-img-box img { + transform: scale(1.05); +} + +.disc-tag { + position: absolute; + top: var(--space-2); + left: var(--space-2); + background: var(--red); + color: white; + font-size: var(--text-xs); + font-weight: 700; + padding: var(--space-1) var(--space-2); + border-radius: var(--radius-sm); +} + +.prod-body { + padding: var(--space-3); +} + +.prod-name { + font-size: var(--text-md); + font-weight: 600; + color: var(--gray-800); + line-height: 1.42; + margin-bottom: var(--space-2); + min-height: 2.375rem; +} + +.prod-price { + display: flex; + align-items: center; + gap: var(--space-2); +} + +.price-now { + font-size: var(--text-xl); + font-weight: 800; + color: var(--red); +} + +.price-old { + font-size: var(--text-base); + color: var(--gray-400); + text-decoration: line-through; +} + +/* ── FOOTER ── */ +footer { + background: white; + border-top: 0.0625rem solid var(--gray-200); + padding: var(--space-12) 0 var(--space-6); + margin-top: var(--space-12); +} + +.footer-grid { + max-width: 100rem; + margin: 0 auto; + padding: 0 var(--space-6); + display: grid; + grid-template-columns: 2fr 1fr 1fr 1.4fr; + gap: var(--space-12); + margin-bottom: var(--space-8); +} + +.footer-brand-desc { + font-size: var(--text-md); + color: var(--gray-600); + line-height: 1.7; + margin-top: var(--space-3); + max-width: 16.875rem; +} +.footer-socials { + display: flex; + gap: var(--space-2); + margin-top: var(--space-4); +} +.soc-btn { + width: 2rem; + height: 2rem; + border-radius: var(--radius-sm); + background: var(--gray-100); + display: flex; + align-items: center; + justify-content: center; + font-size: var(--text-md); + cursor: pointer; + font-weight: 700; + color: var(--gray-600); + transition: all 0.2s; +} +.soc-btn:hover { + background: var(--blue); + color: white; +} +.footer-col h4 { + font-size: var(--text-lg); + font-weight: 700; + color: var(--gray-800); + margin-bottom: var(--space-4); +} +.footer-col ul { + list-style: none; + display: flex; + flex-direction: column; + gap: var(--space-2); +} +.footer-col li::before { + content: "•"; + color: var(--blue); + margin-right: var(--space-2); +} +.footer-col li a { + font-size: var(--text-md); + color: var(--gray-600); + transition: color 0.2s; +} +.footer-col li a:hover { + color: var(--blue); +} +.contact-row { + display: flex; + gap: var(--space-2); + align-items: flex-start; + font-size: var(--text-md); + color: var(--gray-600); + margin-bottom: var(--space-3); +} +.contact-row .ic { + font-size: var(--text-xl); + margin-top: 0.0625rem; +} +.footer-bottom { + max-width: 100rem; + margin: 0 auto; + padding: var(--space-4) var(--space-6) 0; + border-top: 0.0625rem solid var(--gray-200); + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + gap: var(--space-3); +} +.footer-bottom p { + font-size: var(--text-md); + color: var(--gray-400); +} +.footer-bottom-links { + display: flex; + gap: var(--space-5); +} +.footer-bottom-links a { + font-size: var(--text-md); + color: var(--gray-400); + transition: color 0.2s; +} +.footer-bottom-links a:hover { + color: var(--blue); +} + +/* ── RESPONSIVE ── */ +@media (max-width: 68.75rem) { + .products-grid { + grid-template-columns: repeat(2, 1fr); + } + .section-wrap-span-2 { + grid-template-columns: 1fr; + } + .footer-grid { + grid-template-columns: 1fr 1fr; + } +} + +@media (max-width: 56.25rem) { + .hero-section { + grid-template-columns: 1fr; + } + .hero-side { + flex-direction: row; + } + .deal-inner { + grid-template-columns: 1fr; + } + .deal-img { + max-width: 350px; + margin: 0 auto; + } + .featured-strip { + grid-template-columns: 1fr; + } + .insta-grid { + grid-template-columns: repeat(3, 1fr); + } +} + +@media (max-width: 40rem) { + .nav-links, + .search-box { + display: none; + } + + .logo-image { + width: 5rem; + height: 5rem; + } + + .hero-main { + background: url("../images/hero-mobile.webp") center / cover no-repeat; + } + + .hero-disc { + top: 2rem; + right: 2rem; + width: 3rem; + height: 3rem; + } + + .hero-disc .pct { + font-size: var(--text-lg); + } + + .hero-disc .off { + font-size: var(--text-xs); + } + + .products-grid { + grid-template-columns: 1fr; + } + .products-grid-span-2 { + grid-template-columns: 1fr; + } + .hero-side { + flex-direction: column; + } + .deal-img { + max-width: 240px; + margin: 0 auto; + } + .footer-grid { + grid-template-columns: 1fr; + } + .topbar-right { + display: none; + } + .featured-strip { + grid-template-columns: 1fr; + } +} diff --git a/assets/fonts/plus-jakarta-sans-500.woff2 b/assets/fonts/plus-jakarta-sans-500.woff2 new file mode 100644 index 0000000..3eeabdd Binary files /dev/null and b/assets/fonts/plus-jakarta-sans-500.woff2 differ diff --git a/assets/fonts/plus-jakarta-sans-600.woff2 b/assets/fonts/plus-jakarta-sans-600.woff2 new file mode 100644 index 0000000..d6e4d1e Binary files /dev/null and b/assets/fonts/plus-jakarta-sans-600.woff2 differ diff --git a/assets/fonts/plus-jakarta-sans-700.woff2 b/assets/fonts/plus-jakarta-sans-700.woff2 new file mode 100644 index 0000000..ca15140 Binary files /dev/null and b/assets/fonts/plus-jakarta-sans-700.woff2 differ diff --git a/assets/fonts/plus-jakarta-sans-800.woff2 b/assets/fonts/plus-jakarta-sans-800.woff2 new file mode 100644 index 0000000..cd71b26 Binary files /dev/null and b/assets/fonts/plus-jakarta-sans-800.woff2 differ diff --git a/assets/fonts/plus-jakarta-sans-regular.woff2 b/assets/fonts/plus-jakarta-sans-regular.woff2 new file mode 100644 index 0000000..954c272 Binary files /dev/null and b/assets/fonts/plus-jakarta-sans-regular.woff2 differ diff --git a/assets/images/anti-acne-cream.webp b/assets/images/anti-acne-cream.webp new file mode 100644 index 0000000..4839654 Binary files /dev/null and b/assets/images/anti-acne-cream.webp differ diff --git a/assets/images/arshaheal.webp b/assets/images/arshaheal.webp new file mode 100644 index 0000000..6cc88ba Binary files /dev/null and b/assets/images/arshaheal.webp differ diff --git a/assets/images/fairness-cream.webp b/assets/images/fairness-cream.webp new file mode 100644 index 0000000..58c884b Binary files /dev/null and b/assets/images/fairness-cream.webp differ diff --git a/assets/images/gscrusher.webp b/assets/images/gscrusher.webp new file mode 100644 index 0000000..f19a96f Binary files /dev/null and b/assets/images/gscrusher.webp differ diff --git a/assets/images/hero-mobile.webp b/assets/images/hero-mobile.webp new file mode 100644 index 0000000..fd13e8f Binary files /dev/null and b/assets/images/hero-mobile.webp differ diff --git a/assets/images/hero.webp b/assets/images/hero.webp new file mode 100644 index 0000000..0b69c1d Binary files /dev/null and b/assets/images/hero.webp differ diff --git a/assets/images/jointsure.webp b/assets/images/jointsure.webp new file mode 100644 index 0000000..fc913f2 Binary files /dev/null and b/assets/images/jointsure.webp differ diff --git a/assets/images/logo.webp b/assets/images/logo.webp new file mode 100644 index 0000000..1b9b0ad Binary files /dev/null and b/assets/images/logo.webp differ diff --git a/assets/images/med-bottle.webp b/assets/images/med-bottle.webp new file mode 100644 index 0000000..9dd149a Binary files /dev/null and b/assets/images/med-bottle.webp differ diff --git a/assets/images/playfair-facewash.webp b/assets/images/playfair-facewash.webp new file mode 100644 index 0000000..89039ca Binary files /dev/null and b/assets/images/playfair-facewash.webp differ diff --git a/assets/images/qr-code.jpeg b/assets/images/qr-code.jpeg new file mode 100644 index 0000000..7dcd71d Binary files /dev/null and b/assets/images/qr-code.jpeg differ diff --git a/assets/js/cart.js b/assets/js/cart.js new file mode 100644 index 0000000..1e8d445 --- /dev/null +++ b/assets/js/cart.js @@ -0,0 +1,110 @@ +const Cart = (function () { + const STORAGE_KEY = "cart"; + const TAX_RATE = 0.05; + let couponDiscount = 0; + + // ───────────────────────────── + // Internal + // ───────────────────────────── + function getCart() { + return JSON.parse(localStorage.getItem(STORAGE_KEY)) || []; + } + + function saveCart(cart) { + localStorage.setItem(STORAGE_KEY, JSON.stringify(cart)); + window.dispatchEvent(new Event("cartUpdated")); + } + + function findItem(cart, id) { + return cart.find((item) => item.id === id); + } + + // ───────────────────────────── + // Public API + // ───────────────────────────── + + function addItem(product, quantity = 1) { + const cart = getCart(); + const existing = findItem(cart, product.id); + + if (existing) { + existing.quantity += quantity; + } else { + cart.push({ + id: product.id, + name: product.basic.name, + price: product.pricing.price, + image: product.media.mainImage, + quantity, + }); + } + + saveCart(cart); + } + + function removeItem(id) { + const cart = getCart().filter((item) => item.id !== id); + saveCart(cart); + } + + function updateQuantity(id, quantity) { + const cart = getCart(); + const item = findItem(cart, id); + if (!item) return; + + item.quantity = Math.max(1, quantity); + saveCart(cart); + } + + function clear() { + localStorage.removeItem(STORAGE_KEY); + window.dispatchEvent(new Event("cartUpdated")); + } + + function applyCoupon(code) { + if (code === "MEDI10") { + couponDiscount = 0.1; + window.dispatchEvent(new Event("cartUpdated")); + return true; + } + + couponDiscount = 0; + window.dispatchEvent(new Event("cartUpdated")); + return false; + } + + function getTotals() { + const cart = getCart(); + + const subtotal = cart.reduce( + (sum, item) => sum + item.price * item.quantity, + 0 + ); + + const tax = subtotal * TAX_RATE; + const discount = subtotal * couponDiscount; + const total = subtotal - discount; + + return { + subtotal, + tax, + discount, + total, + }; + } + + function getTotalCount() { + return getCart().reduce((sum, item) => sum + item.quantity, 0); + } + + return { + getCart, + addItem, + removeItem, + updateQuantity, + clear, + applyCoupon, + getTotals, + getTotalCount, + }; +})(); diff --git a/assets/js/checkout.js b/assets/js/checkout.js new file mode 100644 index 0000000..ffbdc2c --- /dev/null +++ b/assets/js/checkout.js @@ -0,0 +1,43 @@ +document.addEventListener("DOMContentLoaded", () => { + const cartItemsContainer = document.getElementById("checkout-items"); + const subtotalEl = document.getElementById("checkout-subtotal"); + const totalEl = document.getElementById("checkout-total"); + + const qrWrapper = document.getElementById("qr-wrapper"); + const form = document.getElementById("checkout-form"); + + const cart = Cart.getCart(); + + if (cart.length === 0) { + cartItemsContainer.innerHTML = "

Your cart is empty.

"; + return; + } + + let subtotal = 0; + + cart.forEach((item) => { + subtotal += item.price * item.quantity; + + const row = document.createElement("div"); + row.className = "summary-row"; + row.innerHTML = ` + ${item.name} × ${item.quantity} + ₹${(item.price * item.quantity).toFixed(2)} + `; + cartItemsContainer.appendChild(row); + }); + + const total = subtotal; + + subtotalEl.textContent = `₹${subtotal.toFixed(2)}`; + totalEl.textContent = `₹${total.toFixed(2)}`; + + // Unlock QR on valid form submit + form.addEventListener("submit", (e) => { + e.preventDefault(); + + if (!form.checkValidity()) return; + + qrWrapper.classList.remove("blurred"); + }); +}); diff --git a/assets/js/components.js b/assets/js/components.js new file mode 100644 index 0000000..5979541 --- /dev/null +++ b/assets/js/components.js @@ -0,0 +1,49 @@ +async function loadComponent(id, file) { + const el = document.getElementById(id); + if (!el) return; + const res = await fetch(file); + const html = await res.text(); + el.innerHTML = html; +} + +async function initComponents() { + console.log("init"); + await Promise.all([ + loadComponent("topbar-placeholder", "components/topbar.html"), + loadComponent("navbar-placeholder", "components/navbar.html"), + loadComponent("footer-placeholder", "components/footer.html"), + loadComponent("toast-placeholder", "components/toast.html"), + ]); + + // ✅ DOM is fully ready now — safe to run these + setActiveNavLink(); + updateCartCount(); + + // ✅ Tell cart.js it can now render + document.dispatchEvent(new Event("components:ready")); + + const menuToggle = document.getElementById("menu-toggle"); + const mobileMenu = document.getElementById("mobile-menu"); + + if (!menuToggle || !mobileMenu) return; + + menuToggle.addEventListener("click", () => { + mobileMenu.classList.toggle("active"); + }); +} + +function setActiveNavLink() { + const page = window.location.pathname.split("/").pop() || "index.html"; + document.querySelectorAll(".nav-links a").forEach((a) => { + a.parentElement.classList.toggle("active", a.getAttribute("href") === page); + }); +} + +function updateCartCount() { + const cart = JSON.parse(localStorage.getItem("cart")) || []; + const total = cart.reduce((s, i) => s + i.quantity, 0); + const el = document.getElementById("nav-cart-count"); + if (el) el.textContent = total; +} + +initComponents(); diff --git a/assets/js/product-renderer.js b/assets/js/product-renderer.js new file mode 100644 index 0000000..23f895d --- /dev/null +++ b/assets/js/product-renderer.js @@ -0,0 +1,300 @@ +function renderRelatedProducts(product) { + const container = document.querySelector(".related-grid"); + if (!container || !product.relatedProductIds) return; + + const relatedProducts = product.relatedProductIds + .map((id) => PRODUCTS.find((p) => p.id === id)) + .filter(Boolean); + + container.innerHTML = relatedProducts + .map( + (p) => ` +
+
+ ${ + p.pricing.discountPercent + ? `
-${p.pricing.discountPercent}%
` + : "" + } + ${p.basic.name} +
+
+
${p.basic.name}
+
★★★★★
+
+ ₹${p.pricing.price} + ${ + p.pricing.originalPrice + ? `₹${p.pricing.originalPrice}` + : "" + } +
+ + View Product + +
+
+ ` + ) + .join(""); +} + +function renderProduct(productId) { + const product = PRODUCTS.find((p) => p.id === productId); + + if (!product) { + console.error("Product not found:", productId); + return; + } + + // ========================= + // BASIC INFO + // ========================= + const { basic, pricing, media, rating } = product; + + // Title + document.title = product.seo?.title || basic.name; + document.querySelector(".product-title").textContent = basic.name; + + // Breadcrumb + const breadcrumbCurrent = document.querySelector(".breadcrumb-bar .current"); + if (breadcrumbCurrent) + breadcrumbCurrent.textContent = basic.shortName || basic.name; + + // Image + const mainImg = document.querySelector(".gallery-main img"); + if (mainImg && media?.mainImage) { + mainImg.src = media.mainImage; + mainImg.alt = basic.name; + } + + // ========================= + // PRICING + // ========================= + document.querySelector(".price-current").textContent = `₹${pricing.price}`; + document.querySelector(".price-original").textContent = pricing.originalPrice + ? `₹${pricing.originalPrice}` + : ""; + + document.querySelector(".price-badge").textContent = pricing.discountPercent + ? `-${pricing.discountPercent}%` + : ""; + + // Stock + const stockStatus = document.querySelector(".stock-status"); + if (stockStatus) { + stockStatus.innerHTML = ` + + ${pricing.stockStatus} — Ships within ${pricing.shipsWithin} + `; + } + + // ========================= + // RATING + // ========================= + if (rating) { + document.querySelector(".rating-count").textContent = + rating.average.toFixed(1); + document.querySelector( + ".review-link" + ).textContent = `${rating.totalReviews} Reviews`; + + const soldText = document.querySelector(".rating-row span[style]"); + if (soldText) soldText.textContent = `${rating.sold} sold`; + + // Reviews tab count + const reviewTabBtn = document.querySelectorAll(".tab-nav-btn")[2]; + if (reviewTabBtn) + reviewTabBtn.textContent = `Reviews (${rating.totalReviews})`; + + // Big rating + const scoreEl = document.querySelector(".rating-big .score"); + if (scoreEl) scoreEl.textContent = rating.average.toFixed(1); + + const totalEl = document.querySelector(".rating-big .total"); + if (totalEl) + totalEl.textContent = `Based on ${rating.totalReviews} reviews`; + + // Rating bars + const bars = document.querySelectorAll(".rating-bar-row"); + bars.forEach((bar) => { + const label = bar.querySelector(".bar-label").textContent.trim()[0]; + const count = rating.breakdown[label] || 0; + const percent = rating.totalReviews + ? (count / rating.totalReviews) * 100 + : 0; + + bar.querySelector(".bar-fill").style.width = `${percent}%`; + bar.querySelector(".bar-count").textContent = count; + }); + } + + // ========================= + // SUMMARY + // ========================= + document.querySelector(".product-short-desc").textContent = + product.summary.shortDescription; + + // Benefit pills + const pillsContainer = document.querySelector(".benefit-pills"); + if (pillsContainer) { + pillsContainer.innerHTML = product.summary.benefitPills + .map((p) => `${p.icon} ${p.text}`) + .join(""); + } + + // Meta + document.querySelector(".meta-row span:last-child").textContent = basic.sku; + document + .querySelectorAll(".meta-row")[1] + .querySelector("span:last-child").textContent = basic.weight; + document + .querySelectorAll(".meta-row")[2] + .querySelector("span:last-child").textContent = `₹${pricing.price}`; + + // Categories + const categoryContainer = document + .querySelectorAll(".meta-row")[3] + .querySelector("div"); + categoryContainer.innerHTML = basic.category + .map((c) => `${c}`) + .join(""); + + // Tags + const tagContainer = document + .querySelectorAll(".meta-row")[4] + .querySelector("div"); + tagContainer.innerHTML = basic.tags + .map((t) => `${t}`) + .join(""); + + // Ideal for + document + .querySelectorAll(".meta-row")[5] + .querySelector("span:last-child").textContent = basic.idealFor; + + // ========================= + // DESCRIPTION TAB + // ========================= + const descTab = product.descriptionTab; + + document.querySelector(".desc-lead").textContent = descTab.lead; + + const descBody = document.querySelector(".desc-body"); + descBody.innerHTML = descTab.paragraphs.map((p) => `

${p}

`).join(""); + + // Features + const featuresContainer = document.querySelector(".desc-features"); + featuresContainer.innerHTML = descTab.features + .map( + (f) => ` +
+
${f.icon}
+
+ ${f.title} + ${f.text} +
+
+ ` + ) + .join(""); + + // How To Use + const howSteps = document.querySelector(".how-steps"); + howSteps.innerHTML = descTab.howToUse + .map( + (step, i) => ` +
+
${i + 1}
+ ${step} +
+ ` + ) + .join(""); + + // ========================= + // INGREDIENTS TAB + // ========================= + const ingTab = product.ingredientsTab; + + document + .querySelectorAll(".tab-pane")[1] + .querySelector(".desc-lead").textContent = ingTab.lead; + + const ingGrid = document.querySelector(".ingredients-grid"); + ingGrid.innerHTML = ingTab.ingredients + .map( + (i) => ` +
+
${i.icon}
+
${i.name}
+
${i.role}
+
+ ` + ) + .join(""); + + document.querySelector( + ".full-ingredients" + ).innerHTML = `Full Ingredient List: ${ingTab.fullIngredients}`; + + // ========================= + // REVIEWS TAB + // ========================= + const reviewList = document.querySelector(".review-list"); + reviewList.innerHTML = product.reviews + .map( + (r) => ` +
+
+
+
${r.avatarLetter}
+
+
${r.name}
+
${r.date}
+
+
+
${"★".repeat(r.rating)}${"☆".repeat( + 5 - r.rating + )}
+
+
${r.title}
+
${r.text}
+ ${ + r.verified + ? `
✓ Verified Purchase
` + : "" + } +
+ ` + ) + .join(""); + + // ========================= + // SHIPPING TAB + // ========================= + const shippingTab = product.shipping; + const shippingLead = document + .querySelectorAll(".tab-pane")[3] + .querySelector(".desc-lead"); + shippingLead.textContent = shippingTab.lead; + + const shippingBody = document + .querySelectorAll(".tab-pane")[3] + .querySelector(".desc-body"); + + shippingBody.innerHTML = shippingTab.policies + .map((p) => `

${p.title}: ${p.text}

`) + .join(""); + + renderRelatedProducts(product); +} diff --git a/assets/js/products.js b/assets/js/products.js new file mode 100644 index 0000000..351f8db --- /dev/null +++ b/assets/js/products.js @@ -0,0 +1,1196 @@ +const PRODUCTS = [ + { + id: "cs-5572", + slug: "clear-skin-naturally-anti-acne-cream", + + // ========================= + // BASIC INFO + // ========================= + basic: { + name: "Clear Skin Naturally – Herbal Anti-Acne Cream with Neem, Aloe & Tulsi", + shortName: "Herbal Anti-Acne Cream", + sku: "CS-5572", + brand: "MediGlobe", + homeCategory: "Herbal Cosmetics", + category: ["Skincare", "Anti-Acne", "Herbal Care"], + tags: ["Pimples", "Acne Control", "Neem", "Aloe Vera", "Tulsi"], + idealFor: "Oily, acne-prone, and combination skin types", + weight: "100 GM", + type: "Cream", + }, + + // ========================= + // PRICING + // ========================= + pricing: { + currency: "INR", + price: 260, + originalPrice: 299, + discountPercent: 13, + stockStatus: "In Stock", + shipsWithin: "24 hours", + }, + + // ========================= + // MEDIA + // ========================= + media: { + mainImage: "assets/images/anti-acne-cream.webp", + gallery: ["assets/images/anti-acne-cream.webp"], + }, + + // ========================= + // RATING DATA + // ========================= + rating: { + average: 4.9, + totalReviews: 48, + sold: 312, + breakdown: { + 5: 41, + 4: 5, + 3: 2, + 2: 0, + 1: 0, + }, + }, + + // ========================= + // SUMMARY SECTION + // ========================= + summary: { + shortDescription: + "A 100% natural anti-acne cream powered by Neem, Aloe Vera, and Tulsi. This herbal formula helps fight acne-causing bacteria, soothe redness, and prevent future breakouts — all while keeping skin hydrated and balanced.", + + benefitPills: [ + { icon: "🌿", text: "100% Natural" }, + { icon: "🛡", text: "Acne Defense" }, + { icon: "💧", text: "Soothing Hydration" }, + { icon: "✨", text: "Spot Control" }, + ], + }, + + // ========================= + // DESCRIPTION TAB + // ========================= + descriptionTab: { + lead: "Say goodbye to stubborn breakouts with Clear Skin Naturally — a herbal anti-acne cream formulated to target pimples at their root while keeping your skin calm and hydrated.", + + paragraphs: [ + "Clear Skin Naturally combines three powerful Ayurvedic botanicals — Neem, Aloe Vera, and Tulsi — known for their purifying, soothing, and healing properties. The formula works to reduce acne-causing bacteria and control excess oil without stripping the skin of essential moisture.", + + "Neem acts as a natural purifier, helping combat impurities that lead to breakouts. Aloe Vera provides cooling hydration, reducing redness and irritation. Tulsi supports clearer skin by minimizing blemishes and helping prevent future pimples.", + + "Unlike harsh chemical treatments that over-dry the skin, this gentle herbal formula maintains moisture balance, leaving your complexion smoother, clearer, and refreshed.", + ], + + features: [ + { + icon: "🛡", + title: "Triple Action Defense", + text: "Neem helps fight acne-causing bacteria naturally", + }, + { + icon: "💧", + title: "Soothing Hydration", + text: "Aloe Vera calms redness and prevents dryness", + }, + { + icon: "🌿", + title: "Healing Touch", + text: "Tulsi helps reduce blemishes and future breakouts", + }, + { + icon: "✨", + title: "Clearer Complexion", + text: "Promotes smoother, spot-free skin over time", + }, + { + icon: "🌱", + title: "Pure & Chemical-Free", + text: "A gentle herbal approach to pimple control", + }, + ], + + howToUse: [ + "Cleanse face thoroughly and pat dry.", + "Apply a small amount to affected areas or entire face.", + "Gently massage until fully absorbed.", + "Use twice daily for best results.", + ], + }, + + // ========================= + // INGREDIENTS TAB + // ========================= + ingredientsTab: { + lead: "A powerful trio of Ayurvedic botanicals formulated to purify, soothe, and restore acne-prone skin.", + + ingredients: [ + { + icon: "🌿", + name: "Neem Extract", + role: "Natural antibacterial support to fight acne-causing impurities", + }, + { + icon: "💧", + name: "Aloe Vera", + role: "Soothes irritation and provides lightweight hydration", + }, + { + icon: "🌱", + name: "Tulsi Extract", + role: "Supports blemish control and clearer skin", + }, + { + icon: "✨", + name: "Herbal Base Complex", + role: "Helps maintain oil balance and skin smoothness", + }, + ], + + fullIngredients: + "Neem Extract, Aloe Vera Gel, Tulsi Extract, Herbal Cream Base, Natural Emulsifiers, Cosmetic-Grade Preservatives.", + }, + + // ========================= + // REVIEWS TAB + // ========================= + reviews: [ + { + id: "r1", + name: "Kavya R.", + avatarLetter: "K", + rating: 5, + date: "February 10, 2025", + title: "Cleared my skin in under 2 weeks!", + text: "I've struggled with hormonal acne for years and tried everything — prescription retinoids, benzoyl peroxide, you name it. This cream worked without damaging my skin barrier. Breakouts reduced dramatically in the first week.", + verified: true, + }, + { + id: "r2", + name: "Shivam T.", + avatarLetter: "S", + rating: 5, + date: "January 28, 2025", + title: "Finally something that doesn't dry my face out", + text: "Most acne products leave my skin tight and flaky. This one keeps it comfortable and hydrated while still fighting pimples.", + verified: true, + }, + { + id: "r3", + name: "Neha P.", + avatarLetter: "N", + rating: 5, + date: "December 15, 2024", + title: "Works great on sensitive skin too", + text: "I have rosacea alongside acne. This cream is soothing with no burning or irritation. Inflammation calmed down within days.", + verified: true, + }, + { + id: "r4", + name: "Arjun M.", + avatarLetter: "A", + rating: 4, + date: "November 30, 2024", + title: "Very good, takes about 3 weeks", + text: "Results weren’t instant, but by week 3 my face was noticeably clearer and smoother.", + verified: true, + }, + ], + + // ========================= + // SHIPPING TAB + // ========================= + shipping: { + lead: "Fast, reliable delivery with a stress-free returns policy.", + policies: [ + { + title: "Standard Shipping", + text: "5–7 business days. Free on orders over ₹999.", + }, + { + title: "Express Shipping", + text: "2–3 business days. Available for ₹99 flat rate.", + }, + { + title: "Returns Policy", + text: "Unopened products may be returned within 30 days. Opened skincare products cannot be returned due to hygiene regulations unless damaged.", + }, + { + title: "Damaged or Incorrect Orders", + text: "Contact customer support within 48 hours with photographs for replacement or refund.", + }, + ], + }, + + // ========================= + // RELATED PRODUCTS + // ========================= + relatedProductIds: [ + "cs-5572", // Radiance Cream + // "pf-6621", // Playfair Facewash + // "mo-9921", // Ortho Oil + ], + + // ========================= + // SEO + // ========================= + seo: { + title: + "MediGlobe | Anti Acne Cream – 100% Natural Acne & Pimple Control Formula", + description: + "Buy Clear Skin Naturally Anti-Acne Cream with Neem, Aloe & Tulsi. Fights pimples, soothes redness, and prevents breakouts naturally.", + keywords: [ + "anti acne cream", + "herbal acne treatment", + "neem acne cream", + "pimple removal cream", + ], + }, + }, + { + id: "pf-6621", + slug: "playfair-herbal-brightening-facewash", + + basic: { + name: "Playfair Facewash – Herbal Brightening & Radiance Cleanser", + shortName: "Playfair Facewash", + sku: "PF-6621", + brand: "MediGlobe", + homeCategory: "Herbal Cosmetics", + category: ["Skincare", "Facewash", "Brightening"], + tags: ["Dark Spots", "Pigmentation", "Daily Cleanser", "Herbal Facewash"], + idealFor: "All skin types looking for brighter and even-toned skin", + weight: "100ml", + type: "Facewash", + }, + + pricing: { + currency: "INR", + price: 260, + originalPrice: 290, + discountPercent: 10, + stockStatus: "In Stock", + shipsWithin: "24 hours", + }, + + media: { + mainImage: "assets/images/playfair-facewash.webp", + gallery: ["assets/images/playfair-facewash.webp"], + }, + + rating: { + average: 4.6, + totalReviews: 44, + sold: 221, + breakdown: { + 5: 31, + 4: 9, + 3: 3, + 2: 1, + 1: 0, + }, + }, + + summary: { + shortDescription: + "A gentle herbal brightening facewash designed to cleanse deeply, reduce pigmentation, and restore your skin’s natural glow without over-drying.", + + benefitPills: [ + { icon: "✨", text: "Brightening Cleanse" }, + { icon: "🌿", text: "Herbal Formula" }, + { icon: "💧", text: "Gentle & Hydrating" }, + { icon: "🌞", text: "Daily Use Safe" }, + ], + }, + + descriptionTab: { + lead: "Reveal your natural glow with Playfair Herbal Brightening Facewash — a gentle yet effective cleanser crafted to restore clarity and radiance.", + + paragraphs: [ + "Playfair Facewash helps remove dirt, oil, and impurities while supporting a more even skin tone.", + "Infused with herbal extracts, the formula works to reduce the appearance of dark spots and pigmentation without stripping essential moisture.", + "Its mild cleansing base makes it suitable for daily use, leaving your skin refreshed, smooth, and naturally radiant.", + ], + + features: [ + { + icon: "✨", + title: "Brightening Power", + text: "Helps reduce pigmentation and uneven skin tone", + }, + { + icon: "🌿", + title: "Herbal Care", + text: "Natural extracts for a safe, refreshing cleanse", + }, + { + icon: "💧", + title: "Gentle Hydration", + text: "Maintains moisture balance during cleansing", + }, + { + icon: "🌞", + title: "Daily Use Formula", + text: "Mild and suitable for regular application", + }, + ], + + howToUse: [ + "Wet your face with water.", + "Apply a small amount and gently massage in circular motions.", + "Rinse thoroughly with clean water.", + "Use twice daily for best results.", + ], + }, + + ingredientsTab: { + lead: "A refreshing blend of herbal extracts designed for brightening and gentle cleansing.", + + ingredients: [ + { + icon: "🌿", + name: "Herbal Brightening Extracts", + role: "Support clarity and even tone", + }, + { + icon: "💧", + name: "Hydrating Cleansing Base", + role: "Cleans without stripping moisture", + }, + { + icon: "✨", + name: "Pigmentation Support Botanicals", + role: "Reduce dark spot appearance", + }, + { + icon: "🌞", + name: "Skin Refresh Complex", + role: "Leaves skin smooth and radiant", + }, + ], + + fullIngredients: + "Herbal Extract Blend, Brightening Botanicals, Mild Cleansing Agents, Hydration Complex, Stabilizers.", + }, + + reviews: [], + + shipping: { + lead: "Fast and secure shipping across India.", + policies: [ + { title: "Standard Shipping", text: "5–7 business days." }, + { title: "Express Shipping", text: "2–3 business days available." }, + { + title: "Returns", + text: "30-day return policy for unopened products.", + }, + ], + }, + + relatedProductIds: ["ur-9043", "cs-5572"], + + seo: { + title: "Playfair Herbal Brightening Facewash | MediGlobe", + description: + "Playfair Herbal Brightening Facewash gently cleanses, reduces dark spots, and restores natural radiance for healthy glowing skin.", + keywords: [ + "herbal facewash", + "brightening cleanser", + "pigmentation facewash", + "daily herbal facewash", + ], + }, + }, + { + id: "js-7741", + slug: "joint-sure-8-in-1-joint-recovery-tablet", + + basic: { + name: "Joint Sure Tablet – The Ultimate 8-in-1 Joint Recovery Formula", + shortName: "Joint Sure Tablet", + sku: "JS-7741", + brand: "MediGlobe", + homeCategory: "Herbal Ortho Meds", + category: ["Nutraceuticals", "Joint Care", "Bone Health"], + tags: ["Joint Pain", "Cartilage", "Glucosamine", "Collagen", "Arthritis"], + idealFor: "Athletes, active professionals, and seniors", + weight: "10×10 Tablets (100 Tablets total)", + type: "Tablet", + }, + + pricing: { + currency: "INR", + price: 645, + originalPrice: 860, + discountPercent: 25, + stockStatus: "In Stock", + shipsWithin: "24 hours", + }, + + media: { + mainImage: "assets/images/jointsure.webp", + gallery: ["assets/images/jointsure.webp"], + }, + + rating: { + average: 4.7, + totalReviews: 41, + sold: 198, + breakdown: { + 5: 29, + 4: 7, + 3: 3, + 2: 1, + 1: 1, + }, + }, + + summary: { + shortDescription: + "A high-potency 8-in-1 nutraceutical blend engineered to repair, lubricate, and protect your joints. Combines Glucosamine, Chondroitin, Hyaluronic Acid, Collagen Type-2 and clinically validated botanicals.", + + benefitPills: [ + { icon: "💊", text: "8-in-1 Formula" }, + { icon: "🦴", text: "Cartilage Repair" }, + { icon: "💧", text: "Deep Joint Lubrication" }, + { icon: "✅", text: "Athletes & Seniors" }, + ], + }, + + descriptionTab: { + lead: "Restore mobility with Joint Sure — a scientifically advanced joint support formula targeting cartilage repair, lubrication, and inflammation control.", + + paragraphs: [ + "Joint Sure takes a comprehensive 8-in-1 approach to joint wellness by addressing cartilage degradation, synovial lubrication, and inflammatory pathways simultaneously.", + "Glucosamine and Chondroitin provide structural building blocks, while Hyaluronic Acid enhances joint fluid lubrication to reduce friction.", + "Botanical extracts like Boswellia, Rosehip, and Curcuma Longa support natural inflammation control without harsh gastric side effects.", + ], + + features: [ + { + icon: "🦴", + title: "Cartilage Reconstruction", + text: "750mg Glucosamine + Chondroitin support cartilage rebuilding", + }, + { + icon: "💧", + title: "Joint Lubrication", + text: "Hyaluronic Acid improves fluid motion and shock absorption", + }, + { + icon: "🌿", + title: "Inflammation Control", + text: "Boswellia, Rosehip & Turmeric soothe discomfort", + }, + { + icon: "💪", + title: "Structural Strength", + text: "Collagen Type-2 & MSM strengthen connective tissue", + }, + ], + + howToUse: [ + "Take 1 tablet twice daily with meals.", + "Swallow whole with water.", + "Continue consistently for 12 weeks for optimal results.", + ], + }, + + ingredientsTab: { + lead: "Eight clinically validated compounds targeting every layer of joint health.", + + ingredients: [ + { + icon: "🦴", + name: "Glucosamine Sulphate", + role: "Cartilage matrix synthesis", + }, + { + icon: "🔗", + name: "Chondroitin Sulphate", + role: "Maintains elasticity", + }, + { + icon: "💧", + name: "Hyaluronic Acid", + role: "Lubricates joint surfaces", + }, + { + icon: "🧬", + name: "Collagen Peptide Type-2", + role: "Strengthens cartilage matrix", + }, + { icon: "⚗️", name: "MSM", role: "Reduces pain and swelling" }, + ], + + fullIngredients: + "Glucosamine Sulphate 750mg, Chondroitin Sulphate 750mg, Hyaluronic Acid 200mg, Collagen Type-2, MSM, Boswellia Serrata, Rosehip Extract, Curcuma Longa.", + }, + + reviews: [], + + shipping: { + lead: "Fast and reliable shipping across India.", + policies: [ + { title: "Standard Shipping", text: "5–7 business days." }, + { title: "Express Shipping", text: "2–3 business days available." }, + { + title: "Returns", + text: "30-day return policy for unopened products.", + }, + ], + }, + + relatedProductIds: ["mo-9921", "cs-5572"], + + seo: { + title: "Joint Sure 8-in-1 Joint Recovery Tablet | MediGlobe", + description: + "High-potency 8-in-1 joint support with Glucosamine, Hyaluronic Acid, and Collagen Type-2 for cartilage repair and mobility.", + keywords: ["joint supplement", "glucosamine tablet", "arthritis support"], + }, + }, + { + id: "mo-3381", + slug: "medi-ortho-pain-relief-oil", + + basic: { + name: "Medi Ortho Pain Relief Oil – Ayurvedic Formula for Joint & Muscular Pain", + shortName: "Medi Ortho Oil", + sku: "MO-3381", + brand: "MediGlobe", + homeCategory: "Herbal Ortho Meds", + category: ["Best Seller", "Pain Relief", "Ayurvedic"], + tags: ["Joint Pain", "Muscle Pain", "Arthritis", "Herbal", "Recovery"], + idealFor: "Joint Pain, Sprains, Back Pain, Post-Workout Recovery", + weight: "100ml", + type: "Herbal Oil", + }, + + pricing: { + currency: "INR", + price: 230, + originalPrice: 325, + discountPercent: 29, + stockStatus: "In Stock", + shipsWithin: "24 hours", + }, + + media: { + mainImage: "assets/images/hero-mobile.webp", + gallery: ["assets/images/hero-mobile.webp"], + }, + + rating: { + average: 4.6, + totalReviews: 58, + sold: 312, + breakdown: { + 5: 40, + 4: 10, + 3: 5, + 2: 2, + 1: 1, + }, + }, + + summary: { + shortDescription: + "Don't just mask the pain — soothe it at the source. A premium herbal blend crafted for deep tissue penetration and fast-acting comfort.", + + benefitPills: [ + { icon: "🍃", text: "100% Herbal Extracts" }, + { icon: "🔥", text: "Deep Soothing Warmth" }, + { icon: "🏃", text: "Enhances Mobility" }, + { icon: "💧", text: "Non-Staining Formula" }, + ], + }, + + descriptionTab: { + lead: "Healing in Every Drop. Medi Ortho Pain Relief Oil is the natural answer to every ache — pure herbal power crafted to help you move without limits.", + + paragraphs: [ + "Pain can limit daily life — whether it's muscle strain, arthritic stiffness, or lower back ache from desk work. Most synthetic pain relief products provide only surface-level relief.", + "Medi Ortho penetrates multiple layers of skin and muscle tissue to reach inflamed joints directly. Its warming herbal complex stimulates circulation, reduces swelling, and relaxes tense fibres.", + "The fast-absorbing, non-staining formula integrates seamlessly into your routine — no greasy residue, no lingering odour. Just effective herbal relief at ₹230.", + ], + + features: [ + { + icon: "🍃", + title: "100% Herbal Extracts", + text: "Pure plant-based actives — no synthetic chemicals.", + }, + { + icon: "🔥", + title: "Deep Soothing Warmth", + text: "Stimulates circulation and relaxes muscle fibres.", + }, + { + icon: "🏃", + title: "Enhances Mobility & Recovery", + text: "Reduces stiffness and supports post-exercise recovery.", + }, + { + icon: "💧", + title: "Non-Staining Formula", + text: "Fast-absorbing and residue-free.", + }, + { + icon: "🚫", + title: "Zero Side Effects", + text: "No steroids or NSAIDs — safe for long-term use.", + }, + { + icon: "⚡", + title: "Fast-Acting Relief", + text: "Noticeable pain reduction within minutes.", + }, + ], + + howToUse: [ + "Clean and dry the affected area.", + "Apply 8–10 drops to the joint or muscle.", + "Massage for 3–5 minutes until absorbed.", + "Use warm compress for enhanced penetration.", + "Apply 2–3 times daily for acute pain.", + ], + }, + + ingredientsTab: { + lead: "A concentrated blend of Ayurvedic herbs and therapeutic essential oils for natural pain relief.", + + ingredients: [ + { + icon: "🌿", + name: "Nirgundi (Vitex negundo)", + role: "Reduces inflammation and deep muscular pain.", + }, + { + icon: "🪴", + name: "Mahanarayan Oil", + role: "Classical Ayurvedic base oil for joint relief.", + }, + { + icon: "❄️", + name: "Eucalyptus Oil", + role: "Improves circulation and delivers cooling relief.", + }, + { + icon: "🔴", + name: "Wintergreen Oil", + role: "Natural methyl salicylate for targeted analgesic effect.", + }, + { + icon: "🫚", + name: "Sesame Seed Oil", + role: "Nourishes joints and reduces dryness imbalance.", + }, + { + icon: "🌶️", + name: "Capsaicin Extract", + role: "Interrupts pain signals at nerve level.", + }, + ], + + fullIngredients: + "Sesame Seed Oil, Mahanarayan Tail Base, Nirgundi Extract, Eucalyptus Oil, Wintergreen Oil, Capsaicin Extract, Boswellia Serrata, Ginger Oil, Peppermint Oil, Camphor, Cedar Oil, Guggul Extract, Vitamin E.", + }, + + reviews: [], + + shipping: { + lead: "Fast, reliable shipping across India.", + policies: [ + { + title: "Standard Shipping", + text: "5–7 business days. Free above ₹999.", + }, + { title: "Express Shipping", text: "2–3 business days available." }, + { + title: "Returns", + text: "30-day return policy for unopened products.", + }, + ], + }, + + relatedProductIds: ["js-7741", "gs-3324"], + + seo: { + title: "Medi Ortho Pain Relief Oil | Ayurvedic Joint & Muscle Relief", + description: + "Medi Ortho Pain Relief Oil provides fast-acting herbal relief for joint and muscle pain. 100% Ayurvedic formula for safe daily use.", + keywords: [ + "herbal pain relief oil", + "joint pain ayurvedic oil", + "muscle pain massage oil", + "arthritis herbal oil", + ], + }, + }, + { + id: "gs-3324", + slug: "gs-crusher-gallbladder-digestive-support", + + basic: { + name: "GS Crusher – Natural Gallbladder & Digestive Support Formula", + shortName: "GS Crusher", + sku: "GS-3324", + brand: "MediGlobe", + homeCategory: "Herbal Gastro Meds", + category: ["Herbal Supplements", "Digestive Care", "Gallbladder Support"], + tags: ["Gallstones", "Acidity", "Detox", "Bloating", "Herbal"], + idealFor: "Adults seeking natural digestive and gallbladder support", + weight: "30 Tablets (Safety-Sealed Bottle)", + type: "Tablet", + }, + + pricing: { + currency: "INR", + price: 240, + originalPrice: 299, + discountPercent: 20, + stockStatus: "In Stock", + shipsWithin: "24 hours", + }, + + media: { + mainImage: "assets/images/gscrusher.webp", + gallery: ["assets/images/gscrusher.webp"], + }, + + rating: { + average: 4.6, + totalReviews: 28, + sold: 142, + breakdown: { + 5: 19, + 4: 6, + 3: 2, + 2: 1, + 1: 0, + }, + }, + + summary: { + shortDescription: + "A specialized herbal formulation crafted to support gallbladder health, improve bile flow, and restore digestive balance. Provides natural lithontriptic support, acidity relief, and detoxification.", + + benefitPills: [ + { icon: "🌿", text: "100% Herbal" }, + { icon: "🟢", text: "Gallbladder Care" }, + { icon: "🔥", text: "Acidity Relief" }, + { icon: "⚖", text: "Digestive Balance" }, + ], + }, + + descriptionTab: { + lead: "Take a proactive approach to digestive health with GS Crusher — a herbal formulation designed to support gallbladder wellness and restore digestive comfort naturally.", + + paragraphs: [ + "Gallbladder discomfort and acidity often stem from bile imbalance and toxin accumulation. GS Crusher uses traditional lithontriptic herbs to support natural management of gallbladder stones while promoting healthy bile flow.", + "The herbal blend works gently to cool the digestive tract, balance stomach pH levels, and reduce burning sensations associated with acid reflux and hyperacidity.", + "By supporting liver and gallbladder detoxification pathways, GS Crusher helps reduce bloating, heaviness after meals, and digestive discomfort without harsh chemical intervention.", + ], + + features: [ + { + icon: "🟢", + title: "Gallbladder Support", + text: "Herbal lithontriptic complex assists natural stone management", + }, + { + icon: "🔥", + title: "Acidity Relief", + text: "Balances pH and reduces burning sensation", + }, + { + icon: "🌿", + title: "Detoxification", + text: "Supports liver and bile cleansing pathways", + }, + { + icon: "⚖", + title: "Gentle Digestion", + text: "Reduces bloating and heaviness after meals", + }, + ], + + howToUse: [ + "Take 1 tablet twice daily after meals.", + "Use consistently for 6–8 weeks for best results.", + "Maintain proper hydration throughout the day.", + "Consult physician if diagnosed with gallstones.", + ], + }, + + ingredientsTab: { + lead: "A carefully selected blend of traditional herbs known for gallbladder and digestive support.", + + ingredients: [ + { + icon: "🌿", + name: "Lithontriptic Herbal Complex", + role: "Supports natural management of gallbladder stones", + }, + { + icon: "🔥", + name: "Digestive Cooling Herbs", + role: "Balances acidity and stomach pH", + }, + { + icon: "🟢", + name: "Bile Flow Enhancers", + role: "Promotes healthy bile secretion", + }, + { + icon: "⚖", + name: "Metabolic Support Extracts", + role: "Improves digestion and reduces bloating", + }, + ], + + fullIngredients: + "Proprietary Herbal Blend for Gallbladder Support, Digestive Cooling Extracts, Bile Flow Enhancers, Metabolic Support Herbs, Microcrystalline Cellulose, Magnesium Stearate.", + }, + + reviews: [], + + shipping: { + lead: "Fast, secure delivery across India.", + policies: [ + { title: "Standard Shipping", text: "5–7 business days." }, + { title: "Express Shipping", text: "2–3 business days available." }, + { + title: "Returns", + text: "30-day return policy for unopened products.", + }, + ], + }, + + relatedProductIds: ["js-7741", "ah-1187"], + + seo: { + title: "GS Crusher Herbal Gallbladder Support | MediGlobe", + description: + "GS Crusher supports gallbladder wellness, reduces acidity, and promotes digestive balance with a 100% herbal formula.", + keywords: [ + "gallbladder herbal supplement", + "acidity relief tablets", + "digestive detox herbal", + "natural gallstone support", + ], + }, + }, + { + id: "ah-1187", + slug: "arsha-heal-ayurvedic-piles-relief-capsules", + + basic: { + name: "Arsha Heal – Ayurvedic Relief for Bleeding Piles & Haemorrhoids", + shortName: "Arsha Heal", + sku: "AH-1187", + brand: "MediGlobe", + homeCategory: "Herbal Gastro Meds", + category: ["Ayurvedic Medicine", "Digestive Care", "Piles Relief"], + tags: ["Bleeding Piles", "Haemorrhoids", "Fissures", "Herbal Capsule"], + idealFor: + "Individuals suffering from bleeding piles, fissures, and haemorrhoids", + weight: "30 Capsules", + type: "Capsule", + }, + + pricing: { + currency: "INR", + price: 240, + originalPrice: 299, + discountPercent: 20, + stockStatus: "In Stock", + shipsWithin: "24 hours", + }, + + media: { + mainImage: "assets/images/arshaheal.webp", + gallery: ["assets/images/arshaheal.webp"], + }, + + rating: { + average: 4.8, + totalReviews: 36, + sold: 184, + breakdown: { + 5: 28, + 4: 6, + 3: 1, + 2: 1, + 1: 0, + }, + }, + + summary: { + shortDescription: + "A potent Ayurvedic capsule formulated to provide fast relief from bleeding piles and haemorrhoids. Works internally to reduce inflammation, control bleeding, and support natural healing.", + + benefitPills: [ + { icon: "🩸", text: "Controls Bleeding" }, + { icon: "🌿", text: "Reduces Swelling" }, + { icon: "💧", text: "Eases Bowel Movement" }, + { icon: "🛡", text: "100% Herbal & Safe" }, + ], + }, + + descriptionTab: { + lead: "Experience gentle yet effective relief from piles discomfort with Arsha Heal — a traditional Ayurvedic formulation designed for internal healing and long-term support.", + + paragraphs: [ + "Bleeding piles and haemorrhoids can significantly impact daily comfort and confidence. Arsha Heal combines powerful Ayurvedic herbs known for their anti-inflammatory and haemostatic properties to control bleeding and shrink haemorrhoidal masses.", + "The formulation supports smoother bowel movements by improving digestion and softening stools, reducing strain and preventing further irritation.", + "Unlike harsh chemical treatments, Arsha Heal works naturally from within to support tissue repair and long-term recovery.", + ], + + features: [ + { + icon: "🩸", + title: "Bleeding Control", + text: "Helps manage and reduce bleeding in internal and external piles", + }, + { + icon: "🌿", + title: "Inflammation Reduction", + text: "Shrinks haemorrhoidal swelling and reduces discomfort", + }, + { + icon: "💧", + title: "Gentle Digestion Support", + text: "Promotes easier bowel movements", + }, + { + icon: "🛡", + title: "Safe Ayurvedic Blend", + text: "Herbal formula suitable for long-term management", + }, + ], + + howToUse: [ + "Take 1 capsule twice daily after meals.", + "Use with warm water for best absorption.", + "Continue for 4–6 weeks for sustained results.", + "Consult a physician in case of severe symptoms.", + ], + }, + + ingredientsTab: { + lead: "A traditional Ayurvedic herbal blend crafted for piles and haemorrhoid management.", + + ingredients: [ + { + icon: "🌿", + name: "Ayurvedic Anti-Inflammatory Herbs", + role: "Help reduce swelling and irritation", + }, + { + icon: "🩸", + name: "Haemostatic Herbal Extracts", + role: "Assist in controlling bleeding", + }, + { + icon: "💧", + name: "Digestive Support Botanicals", + role: "Improve bowel movement comfort", + }, + { + icon: "🛡", + name: "Natural Healing Complex", + role: "Supports tissue repair and recovery", + }, + ], + + fullIngredients: + "Traditional Ayurvedic Herbal Blend for Piles Management, Natural Anti-inflammatory Extracts, Digestive Support Herbs, Capsule Shell (Vegetarian).", + }, + + reviews: [], + + shipping: { + lead: "Reliable shipping and discreet packaging across India.", + policies: [ + { title: "Standard Shipping", text: "5–7 business days." }, + { title: "Express Shipping", text: "2–3 business days available." }, + { + title: "Returns", + text: "30-day return policy for unopened products.", + }, + ], + }, + + relatedProductIds: ["gs-3324", "js-7741"], + + seo: { + title: "Arsha Heal Ayurvedic Capsules for Bleeding Piles | MediGlobe", + description: + "Arsha Heal provides herbal relief from bleeding piles, haemorrhoids, and fissures with a traditional Ayurvedic formulation.", + keywords: [ + "piles capsule", + "ayurvedic haemorrhoids medicine", + "bleeding piles relief", + "herbal fissure treatment", + ], + }, + }, + { + id: "ur-9043", + slug: "ultimate-radiance-herbal-fairness-cream", + + basic: { + name: "Ultimate Radiance – Premium Herbal Fairness Cream", + shortName: "Ultimate Radiance Cream", + sku: "UR-9043", + brand: "MediGlobe", + homeCategory: "Herbal Cosmetics", + category: ["Skincare", "Brightening", "Herbal Care"], + tags: ["Dark Spots", "Pigmentation", "Skin Brightening", "Herbal Cream"], + idealFor: "All skin types seeking brighter, even-toned complexion", + weight: "100 GM", + type: "Cream", + }, + + pricing: { + currency: "INR", + price: 373, + originalPrice: 420, + discountPercent: 11, + stockStatus: "In Stock", + shipsWithin: "24 hours", + }, + + media: { + mainImage: "assets/images/fairness-cream.webp", + gallery: ["assets/images/fairness-cream.webp"], + }, + + rating: { + average: 4.7, + totalReviews: 52, + sold: 276, + breakdown: { + 5: 38, + 4: 10, + 3: 3, + 2: 1, + 1: 0, + }, + }, + + summary: { + shortDescription: + "A premium herbal fairness cream formulated to brighten uneven skin tone, reduce dark spots, and nourish deeply for a naturally radiant glow.", + + benefitPills: [ + { icon: "✨", text: "Natural Brightening" }, + { icon: "💧", text: "Deep Nourishment" }, + { icon: "☀️", text: "Sun Protection Support" }, + { icon: "🌿", text: "Herbal Enriched" }, + ], + }, + + descriptionTab: { + lead: "Unlock a brighter, more even complexion with Ultimate Radiance — a herbal fairness cream designed to nourish, protect, and enhance your natural glow.", + + paragraphs: [ + "Ultimate Radiance blends traditional Ayurvedic extracts with modern skincare science to reduce pigmentation, dark spots, and uneven tone.", + "Unlike harsh chemical lightening agents, this herbal formula supports gradual brightening while maintaining skin health and hydration.", + "Its lightweight, non-greasy texture absorbs quickly, leaving behind a silky matte finish and a visibly refreshed appearance.", + ], + + features: [ + { + icon: "✨", + title: "Natural Brightening", + text: "Helps reduce dark spots and uneven pigmentation", + }, + { + icon: "💧", + title: "Deep Nourishment", + text: "Herbal oils keep skin soft and hydrated", + }, + { + icon: "☀️", + title: "Environmental Shield", + text: "Supports protection against tanning and stressors", + }, + { + icon: "🌿", + title: "Herbal Enriched Formula", + text: "Traditional botanical extracts for healthy glow", + }, + ], + + howToUse: [ + "Cleanse face thoroughly before application.", + "Apply a small amount evenly over face and neck.", + "Massage gently in upward circular motions.", + "Use twice daily for best results.", + ], + }, + + ingredientsTab: { + lead: "A carefully selected blend of herbal extracts and nourishing oils for radiant skin.", + + ingredients: [ + { + icon: "🌿", + name: "Ayurvedic Brightening Extracts", + role: "Support even skin tone and radiance", + }, + { + icon: "💧", + name: "Herbal Oils Complex", + role: "Deep nourishment and hydration", + }, + { + icon: "✨", + name: "Pigmentation Control Botanicals", + role: "Reduce dark spots and discoloration", + }, + { + icon: "☀️", + name: "Skin Protection Blend", + role: "Helps defend against tanning and stress", + }, + ], + + fullIngredients: + "Ayurvedic Herbal Extracts, Natural Brightening Botanicals, Nourishing Herbal Oils, Cream Base, Cosmetic-Grade Stabilizers.", + }, + + reviews: [], + + shipping: { + lead: "Fast and secure delivery across India.", + policies: [ + { title: "Standard Shipping", text: "5–7 business days." }, + { title: "Express Shipping", text: "2–3 business days available." }, + { + title: "Returns", + text: "30-day return policy for unopened products.", + }, + ], + }, + + relatedProductIds: ["cs-5572", "pf-6621"], + + seo: { + title: "Ultimate Radiance Herbal Fairness Cream | MediGlobe", + description: + "Premium herbal fairness cream to reduce dark spots, brighten skin tone, and nourish deeply for radiant, healthy-looking skin.", + keywords: [ + "herbal fairness cream", + "dark spot removal cream", + "skin brightening cream", + "ayurvedic pigmentation cream", + ], + }, + }, +]; diff --git a/cart.html b/cart.html new file mode 100644 index 0000000..8e0b7c0 --- /dev/null +++ b/cart.html @@ -0,0 +1,294 @@ + + + + + + My Cart – MediGlobe Healthcare + + + + + + + + + + + +
+
+ Home + › + My Cart +
+
+ + +
+ +
+

My Cart

+ 0 items +
+ + +
+ +
+ +
+ Product + Price + Quantity + Subtotal + +
+ + +
+ + +
+
🛒
+

Your cart is empty

+

Looks like you haven't added anything yet.

+ + Start Shopping + +
+
+ + +
+ +
+
+

Order Summary

+
+ +
+
+ Subtotal + ₹0.00 +
+
+
+ Shipping + Free +
+
+
+ Discount + — +
+
+ +
+ Total + ₹0.00 +
+ +
+ + Proceed to Checkout + + Continue Shopping + +
+ + +
+
+
🔒
+
+ Secure Checkout + SSL encrypted payment +
+
+
+
🚚
+
+ Free Shipping + On all orders over ₹50 +
+
+
+
↩️
+
+ Easy Returns + 30-day return policy +
+
+
+
+ + +
+

🏷️ Have a coupon?

+
+ + +
+
+
+
+
+ + + + + + + + + diff --git a/checkout.html b/checkout.html new file mode 100644 index 0000000..10fff0b --- /dev/null +++ b/checkout.html @@ -0,0 +1,124 @@ + + + + + + Checkout – MediGlobe + + + + + + + + + + + +
+
+ Home + › + Checkout +
+
+ +
+
+

Checkout

+
+
+ +
+

Billing Details

+ +
+
+
+ + +
+ +
+ + +
+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+
+ + +
+ +
+ + +
+
+ +
+ + +
+ + +
+
+ + +
+

Your Order

+ +
+ +
+
+ Subtotal + ₹0.00 +
+ +
+ +
+ Total + ₹0.00 +
+
+ + +
+
+ Payment QR Code +
+ +

Fill billing details to unlock payment QR.

+
+
+
+
+ + + + + + + + diff --git a/components/footer.html b/components/footer.html new file mode 100644 index 0000000..eb15d69 --- /dev/null +++ b/components/footer.html @@ -0,0 +1,75 @@ + diff --git a/components/navbar.html b/components/navbar.html new file mode 100644 index 0000000..fabad3b --- /dev/null +++ b/components/navbar.html @@ -0,0 +1,77 @@ + diff --git a/components/topbar.html b/components/topbar.html new file mode 100644 index 0000000..28bb80c --- /dev/null +++ b/components/topbar.html @@ -0,0 +1,12 @@ +
+
+
+
📞 9422682020
+
+
+ 👤 Sign In + 📝 Sign Up + ♡ Wishlist +
+
+
diff --git a/index.html b/index.html new file mode 100644 index 0000000..0fdb916 --- /dev/null +++ b/index.html @@ -0,0 +1,352 @@ + + + + + + + MediGlobe Healthcare | Medical & Wellness Products Online + + + + + + + + + + + + + +
+ +
+
+
Pain Relief Oil
+

MEDI ORTHO

+

+ An Ayurvedic pain relief oil formulated to reduce inflammation, + soothe stiffness, and promote smooth mobility. +

+ + BUY NOW + ✓ Added + +
+ + +
+ 29% + OFF +
+
+
+ + +
+ + +
+
+
+ 20%OFF +
+
+
All Skin Type
+
Fairness Cream
+
SHOP NOW
+
+ + + + +
+
+
+ 10%OFF +
+
+
100% Natural
+
Face Wash
+
SHOP NOW
+
+ + + + +
+
+
+ 30%OFF +
+
+
100% Natural
+
Anti Acne Cream
+
SHOP NOW
+
+ +
+ +
+ +
+
+

Herbal Ortho Meds

+
+
+
+ + +
+
+

Herbal Gastro Meds

+
+
+
+
+ + +
+
+

Herbal Cosmetics

+
+
+
+ + + + + +
+ 🛒 + Item added to cart! + View Cart +
+ + + + + + + + + + diff --git a/product.html b/product.html new file mode 100644 index 0000000..dc3207f --- /dev/null +++ b/product.html @@ -0,0 +1,319 @@ + + + + + + + Loading Product... + + + + + + + + + + + + + + +
+
+ Home + › + Product + › + Loading... +
+
+ +
+ + + +
+ +
+
+ +
+
+ + +
+
+

+
+ + +
+ ★★★★★ + + | + + | + +
+ + +
+ + + +
+ + +

+ + +
+ + +
+ +
+ + +
+
+ + 1 + +
+ + +
+ +
+ + +
+
+ SKU: + +
+
+ Weight: + +
+
+ Price: + +
+
+ Categories: +
+
+
+ Tags: +
+
+
+ Ideal For: + +
+
+
+
+ + + + + +
+
+
+ + + + +
+ + +
+

+
+
+
+

📋 How to Use

+
+
+
+ + +
+

+
+
+
+ + +
+
+
+
+
★★★★★
+
+
+
+
+
+
+ + +
+

+
+
+
+
+ + + + + +
+
+

Related Products

+
+ +
+
+
+ + + + +
+ 🛒 + Item added to cart! + + View Cart + +
+ + + + + + + + + +