<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shyama Bhakti – Your Spiritual Companion</title>
<link href="https://fonts.googleapis.com/css2?family=Marcellus&family=Plus+Jakarta+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
<style>
:root {
--saffron: #E8702A;
--deep-maroon: #6B1A2A;
--gold: #C9942B;
--gold-light: #F2D98A;
--cream: #FDF6EC;
--ink: #2A1810;
--ink-muted: #5C3D2E;
--divider: #E8C98A;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background-color: var(--cream);
color: var(--ink);
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 16px;
line-height: 1.8;
background-image: radial-gradient(ellipse at top center, rgba(201,148,43,0.08) 0%, transparent 60%);
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* Hero Section */
.hero {
background: linear-gradient(135deg, var(--deep-maroon) 0%, #3D0A18 50%, #6B1A2A 100%);
color: var(--gold-light);
padding: 100px 24px 80px;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute; inset: 0;
background: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M60 10 L65 50 L100 55 L65 60 L60 110 L55 60 L10 55 L55 50 Z' fill='%23C9942B' fill-opacity='0.06'/%3E%3C/svg%3E") repeat;
pointer-events: none;
}
.hero-container {
max-width: 1100px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 48px;
position: relative;
z-index: 2;
}
.hero-content {
flex: 1.2;
text-align: left;
}
.om-symbol {
font-size: 54px;
color: var(--gold);
display: block;
margin-bottom: 16px;
letter-spacing: 2px;
text-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.hero h1 {
font-family: 'Marcellus', serif;
font-size: clamp(32px, 5vw, 52px);
font-weight: 400;
letter-spacing: 2px;
color: var(--gold-light);
text-shadow: 0 4px 16px rgba(0,0,0,0.6);
margin-bottom: 20px;
line-height: 1.2;
}
.hero p.tagline {
font-size: clamp(17px, 3vw, 20px);
color: rgba(253, 246, 236, 0.9);
max-width: 580px;
margin-bottom: 40px;
}
/* Hero Image Wrapper */
.hero-image-wrapper {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
max-width: 480px;
width: 100%;
}
.hero-image {
width: 100%;
height: auto;
border-radius: 16px;
border: 2px solid var(--gold);
box-shadow: 0 12px 32px rgba(201, 148, 43, 0.25), 0 4px 12px rgba(0, 0, 0, 0.4);
transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.hero-image:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 40px rgba(201, 148, 43, 0.4), 0 8px 16px rgba(0, 0, 0, 0.5);
}
/* App Store Buttons */
.download-buttons {
display: flex;
gap: 20px;
justify-content: flex-start;
flex-wrap: wrap;
}
.btn {
display: flex;
align-items: center;
gap: 12px;
background: rgba(0, 0, 0, 0.3);
border: 1px solid var(--gold);
color: var(--cream);
padding: 12px 24px;
border-radius: 8px;
text-decoration: none;
font-family: sans-serif;
transition: all 0.3s ease;
backdrop-filter: blur(4px);
}
.btn:hover {
background: var(--gold);
color: var(--ink);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0,0,0,0.3);
}
.btn-icon { font-size: 24px; }
.btn-text { text-align: left; line-height: 1.2; }
.btn-text span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.8; }
.btn-text strong { font-size: 16px; font-weight: 600; }
/* Features Section */
.container { max-width: 1100px; margin: 0 auto; padding: 80px 32px; flex-grow: 1; }
.section-title { font-family: 'Marcellus', serif; text-align: center; font-size: 26px; color: var(--deep-maroon); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 48px; }
.divider-ornament { text-align: center; color: var(--gold); font-size: 20px; padding: 0 0 16px; letter-spacing: 8px; opacity: 0.7; }
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
}
.feature-card {
background: linear-gradient(135deg, rgba(201,148,43,0.05), rgba(107,26,42,0.02));
border: 1px solid rgba(201,148,43,0.3);
border-radius: 12px;
padding: 40px 32px;
text-align: center;
transition: all 0.3s ease;
}
.feature-card:hover {
transform: translateY(-5px);
border-color: var(--gold);
box-shadow: 0 8px 24px rgba(201,148,43,0.1);
}
.feature-icon { font-size: 40px; color: var(--saffron); margin-bottom: 20px; }
.feature-title { font-family: 'Marcellus', serif; font-size: 20px; color: var(--deep-maroon); margin-bottom: 16px; letter-spacing: 1px; }
.feature-text { color: var(--ink-muted); font-size: 15.5px; }
/* Footer */
footer { text-align: center; padding: 40px 24px; font-size: 14.5px; color: var(--ink-muted); border-top: 1px solid var(--divider); background-color: rgba(253, 246, 236, 0.9); }
.developer-credit { display: block; margin-top: 8px; font-size: 13.5px; opacity: 0.9; }
footer .nav-links { margin-top: 20px; display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; }
footer .nav-links a { color: var(--deep-maroon); text-decoration: none; font-family: 'Marcellus', serif; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color 0.2s; }
footer .nav-links a:hover { color: var(--saffron); border-color: var(--saffron); }
@media (max-width: 860px) {
.hero { padding: 60px 20px 50px; }
.hero-container {
flex-direction: column;
text-align: center;
gap: 40px;
}
.hero-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.hero p.tagline {
margin-bottom: 30px;
}
.download-buttons {
justify-content: center;
}
.hero-image-wrapper {
max-width: 400px;
}
.container { padding: 50px 20px; }
}
</style>
</head>
<body>
<header class="hero">
<div class="hero-container">
<div class="hero-content">
<span class="om-symbol">ॐ</span>
<h1>Shyama Bhakti</h1>
<p class="tagline">Immerse yourself in divine bliss. Experience premium devotional audio, daily bhajans, and spiritual serenity anywhere, anytime.</p>
<div class="download-buttons">
<a href="https://play.google.com/store/apps/details?id=com.shyama_bhakti.shyamabhakti" class="btn">
<div class="btn-icon">▶</div>
<div class="btn-text">
<span>Get it on</span>
<strong>Google Play</strong>
</div>
</a>
</div>
</div>
<div class="hero-image-wrapper">
<img src="shyama_cover.jpg" alt="Shyama Bhakti Devotional Cover" class="hero-image">
</div>
</div>
</header>
<main class="container">
<div class="divider-ornament">· ✦ ·</div>
<h2 class="section-title">Nourish Your Soul</h2>
<div class="features-grid">
<div class="feature-card">
<div class="feature-icon">🪔</div>
<h3 class="feature-title">Daily Devotionals</h3>
<p class="feature-text">Start your day with handpicked bhajans, aartis, and mantras designed to bring peace to your mind and heart.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🎧</div>
<h3 class="feature-title">Premium Audio</h3>
<p class="feature-text">Enjoy crystal-clear, uninterrupted spiritual music. Unlock our premium tier for an exclusive, ad-free listening experience.</p>
</div>
<div class="feature-card">
<div class="feature-icon">🌸</div>
<h3 class="feature-title">Spiritual Growth</h3>
<p class="feature-text">Deepen your connection with the divine through guided meditations, scriptures, and teachings easily accessible on your device.</p>
</div>
</div>
</main>
<footer>
© 2026 Shyama Bhakti. All rights reserved.
<span class="developer-credit">Developed by Abhinav Agrawal</span>
<div class="nav-links">
<a href="privacy_policy.html">Privacy Policy</a>
<a href="terms.html">Terms & Conditions</a>
<a href="refund_policy.html">Refund Policy</a>
</div>
</footer>
</body>
</html>