HTML
1672 lines
56.3 KB
Satva Wellness | Transform Your Health Through Ayurveda
Transform your health naturally with authentic Ayurvedic treatments. Experience holistic healing with our certified practitioners and personalized wellness programs.
Live Preview
Source Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Transform your health naturally with authentic Ayurvedic treatments. Experience holistic healing with our certified practitioners and personalized wellness programs.">
<meta property="og:title" content="Satva Wellness | Authentic Ayurvedic Healing">
<meta property="og:description" content="Discover natural healing through ancient Ayurvedic wisdom. Free consultation available.">
<meta property="og:image" content="https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=1600">
<meta property="og:type" content="website">
<title>Satva Wellness | Transform Your Health Through Ayurveda</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: #2d5f4f;
--primary-light: #3d7f6f;
--accent: #c4a35a;
--accent-light: #d4af37;
--bg-cream: #faf8f5;
--bg-light: #f5f0e8;
--text-dark: #2d2d2d;
--text-muted: #666;
--white: #ffffff;
--shadow: 0 5px 20px rgba(0,0,0,0.08);
--shadow-hover: 0 15px 40px rgba(0,0,0,0.12);
}
body {
font-family: 'Inter', sans-serif;
color: var(--text-dark);
line-height: 1.7;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Playfair Display', serif;
line-height: 1.2;
font-weight: 700;
}
img {
max-width: 100%;
height: auto;
display: block;
}
a {
text-decoration: none;
color: inherit;
}
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 1.5rem;
}
/* Top Announcement Bar */
.announcement-bar {
background: var(--primary);
color: var(--white);
text-align: center;
padding: 0.8rem 1rem;
font-size: 0.85rem;
font-weight: 500;
}
.announcement-bar a {
color: var(--accent-light);
text-decoration: underline;
margin-left: 0.5rem;
}
/* Navigation */
.navbar {
background: var(--white);
position: sticky;
top: 0;
z-index: 1000;
transition: all 0.3s ease;
}
.navbar.scrolled {
box-shadow: 0 2px 15px rgba(0,0,0,0.06);
}
.nav-container {
max-width: 1280px;
margin: 0 auto;
padding: 1.2rem 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
font-weight: 700;
color: var(--primary);
}
.logo span {
color: var(--accent);
}
.nav-links {
display: flex;
gap: 2.5rem;
list-style: none;
align-items: center;
}
.nav-links a {
font-size: 0.95rem;
font-weight: 600;
color: var(--text-dark);
transition: color 0.3s ease;
}
.nav-links a:hover {
color: var(--primary);
}
.nav-cta {
background: var(--primary);
color: var(--white) !important;
padding: 0.8rem 1.8rem;
border-radius: 50px;
transition: all 0.3s ease;
}
.nav-cta:hover {
background: var(--primary-light);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(45, 95, 79, 0.3);
}
.mobile-menu-btn {
display: none;
background: none;
border: none;
font-size: 1.5rem;
color: var(--primary);
cursor: pointer;
}
/* Hero Section */
.hero {
background: linear-gradient(135deg, var(--bg-cream) 0%, var(--bg-light) 100%);
padding: 6rem 0;
}
.hero-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.hero-text .badge {
display: inline-block;
background: rgba(196, 163, 90, 0.15);
color: var(--accent);
padding: 0.5rem 1.2rem;
border-radius: 50px;
font-size: 0.85rem;
font-weight: 600;
margin-bottom: 1.5rem;
letter-spacing: 0.5px;
}
.hero-text h1 {
font-size: clamp(2.5rem, 5vw, 4.5rem);
margin-bottom: 1.5rem;
color: var(--text-dark);
}
.hero-text h1 .highlight {
color: var(--primary);
position: relative;
display: inline-block;
}
.hero-text p {
font-size: 1.15rem;
color: var(--text-muted);
margin-bottom: 2.5rem;
max-width: 540px;
}
.hero-buttons {
display: flex;
gap: 1.2rem;
flex-wrap: wrap;
}
.btn {
display: inline-block;
padding: 1.1rem 2.3rem;
border-radius: 50px;
font-weight: 600;
transition: all 0.3s ease;
cursor: pointer;
border: none;
font-size: 1rem;
}
.btn-primary {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
color: var(--white);
box-shadow: 0 4px 20px rgba(45, 95, 79, 0.3);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(45, 95, 79, 0.4);
}
.btn-secondary {
background: var(--white);
color: var(--primary);
border: 2px solid var(--primary);
}
.btn-secondary:hover {
background: var(--primary);
color: var(--white);
transform: translateY(-2px);
}
.hero-image {
position: relative;
}
.hero-image img {
width: 100%;
height: 550px;
object-fit: cover;
border-radius: 20px;
box-shadow: var(--shadow-hover);
}
.floating-badge {
position: absolute;
bottom: 2rem;
left: 2rem;
background: var(--white);
padding: 1.5rem 2rem;
border-radius: 16px;
box-shadow: var(--shadow);
}
.floating-badge .number {
font-size: 2.5rem;
font-weight: 700;
color: var(--primary);
font-family: 'Playfair Display', serif;
}
.floating-badge .label {
font-size: 0.9rem;
color: var(--text-muted);
}
/* Trust Bar */
.trust-bar {
background: var(--white);
padding: 4rem 0;
}
.trust-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 3rem;
text-align: center;
}
.trust-item i {
font-size: 2.5rem;
color: var(--accent);
margin-bottom: 1rem;
transition: transform 0.3s ease;
}
.trust-item:hover i {
transform: scale(1.1) rotate(5deg);
}
.trust-item .number {
font-size: 2.5rem;
font-weight: 700;
color: var(--primary);
margin-bottom: 0.5rem;
font-family: 'Playfair Display', serif;
}
.trust-item .label {
font-size: 0.95rem;
color: var(--text-muted);
font-weight: 500;
}
/* About Section */
.about {
padding: 6rem 0;
background: var(--bg-cream);
}
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
align-items: center;
}
.about-image {
position: relative;
}
.about-image img {
width: 100%;
height: 600px;
object-fit: cover;
border-radius: 20px;
box-shadow: var(--shadow);
}
.about-badge {
position: absolute;
top: 2rem;
right: -1rem;
background: var(--accent);
color: var(--white);
padding: 1.8rem;
border-radius: 50%;
width: 120px;
height: 120px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-hover);
}
.about-badge .years {
font-size: 2.2rem;
font-weight: 700;
font-family: 'Playfair Display', serif;
}
.about-badge .text {
font-size: 0.75rem;
text-align: center;
line-height: 1.2;
}
.about-text .section-tag {
color: var(--accent);
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 1rem;
display: block;
}
.about-text h2 {
font-size: clamp(2rem, 4vw, 3rem);
margin-bottom: 1.5rem;
color: var(--text-dark);
}
.about-text p {
color: var(--text-muted);
margin-bottom: 1.5rem;
font-size: 1.05rem;
}
.features-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.2rem;
margin: 2rem 0;
}
.feature-item {
display: flex;
align-items: center;
gap: 0.8rem;
}
.feature-item i {
color: var(--primary);
font-size: 1.2rem;
}
.feature-item span {
font-weight: 500;
color: var(--text-dark);
}
/* Services Section */
.services {
padding: 6rem 0;
background: var(--white);
}
.section-header {
text-align: center;
max-width: 700px;
margin: 0 auto 4rem;
}
.section-header .section-tag {
color: var(--accent);
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 1rem;
display: block;
}
.section-header h2 {
font-size: clamp(2rem, 4vw, 3rem);
margin-bottom: 1rem;
color: var(--text-dark);
}
.section-header p {
color: var(--text-muted);
font-size: 1.05rem;
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
}
.service-card {
background: var(--white);
border-radius: 20px;
overflow: hidden;
box-shadow: var(--shadow);
transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
cursor: pointer;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-hover);
}
.service-image {
position: relative;
overflow: hidden;
height: 240px;
}
.service-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.service-card:hover .service-image img {
transform: scale(1.1);
}
.service-icon {
position: absolute;
top: 1.5rem;
left: 1.5rem;
background: var(--white);
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: var(--primary);
box-shadow: var(--shadow);
}
.service-content {
padding: 2rem;
}
.service-content h3 {
font-size: 1.4rem;
margin-bottom: 1rem;
color: var(--text-dark);
}
.service-content p {
color: var(--text-muted);
margin-bottom: 1.5rem;
line-height: 1.7;
}
.service-link {
color: var(--primary);
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: gap 0.3s ease;
}
.service-link:hover {
gap: 0.8rem;
}
/* Process Section */
.process {
padding: 6rem 0;
background: var(--text-dark);
color: var(--white);
}
.process .section-header .section-tag {
color: var(--accent-light);
}
.process .section-header h2,
.process .section-header p {
color: var(--white);
}
.process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 3rem;
}
.process-step {
text-align: center;
}
.step-number {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
font-size: 2rem;
font-weight: 700;
font-family: 'Playfair Display', serif;
box-shadow: 0 5px 20px rgba(196, 163, 90, 0.3);
}
.process-step h3 {
font-size: 1.3rem;
margin-bottom: 1rem;
}
.process-step p {
color: rgba(255, 255, 255, 0.8);
line-height: 1.6;
}
/* Testimonials Section */
.testimonials {
padding: 6rem 0;
background: var(--bg-light);
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
}
.testimonial-card {
background: var(--white);
padding: 2.5rem;
border-radius: 20px;
border-left: 4px solid var(--accent);
box-shadow: var(--shadow);
}
.stars {
color: var(--accent);
font-size: 1.1rem;
margin-bottom: 1.5rem;
}
.testimonial-text {
font-style: italic;
color: var(--text-muted);
margin-bottom: 1.5rem;
line-height: 1.8;
font-size: 1.05rem;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 1rem;
}
.author-avatar {
width: 55px;
height: 55px;
border-radius: 50%;
object-fit: cover;
}
.author-info h4 {
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.3rem;
}
.author-info p {
font-size: 0.85rem;
color: var(--text-muted);
}
/* Conditions Section */
.conditions {
padding: 6rem 0;
background: var(--white);
}
.conditions-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
.condition-card {
background: var(--bg-cream);
padding: 2rem;
border-radius: 16px;
text-align: center;
transition: all 0.3s ease;
}
.condition-card:hover {
background: var(--primary);
color: var(--white);
transform: translateY(-5px);
}
.condition-card i {
font-size: 2.5rem;
color: var(--accent);
margin-bottom: 1rem;
transition: color 0.3s ease;
}
.condition-card:hover i {
color: var(--white);
}
.condition-card h3 {
font-size: 1.1rem;
font-weight: 600;
}
/* CTA Section */
.cta-section {
padding: 6rem 0;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
text-align: center;
color: var(--white);
}
.cta-section h2 {
font-size: clamp(2rem, 4vw, 3rem);
margin-bottom: 1.5rem;
}
.cta-section p {
font-size: 1.15rem;
margin-bottom: 2.5rem;
max-width: 700px;
margin-left: auto;
margin-right: auto;
opacity: 0.95;
}
.cta-section .btn {
background: var(--white);
color: var(--primary);
font-size: 1.1rem;
padding: 1.2rem 3rem;
}
.cta-section .btn:hover {
background: var(--accent);
color: var(--white);
}
/* Contact Section */
.contact {
padding: 6rem 0;
background: var(--bg-cream);
}
.contact-content {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 4rem;
}
.contact-info h2 {
font-size: clamp(2rem, 4vw, 2.8rem);
margin-bottom: 1rem;
}
.contact-info > p {
color: var(--text-muted);
margin-bottom: 3rem;
font-size: 1.05rem;
}
.contact-item {
display: flex;
gap: 1.5rem;
margin-bottom: 2rem;
}
.contact-icon {
width: 55px;
height: 55px;
min-width: 55px;
background: var(--white);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
color: var(--primary);
box-shadow: var(--shadow);
}
.contact-details h4 {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-muted);
margin-bottom: 0.5rem;
font-weight: 600;
}
.contact-details p {
color: var(--text-dark);
font-weight: 500;
}
.contact-form-wrapper {
background: var(--white);
padding: 3rem;
border-radius: 24px;
box-shadow: var(--shadow-hover);
}
.contact-form-wrapper h3 {
font-size: 1.8rem;
margin-bottom: 1.5rem;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1rem;
}
.form-group {
margin-bottom: 1rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
font-size: 0.9rem;
color: var(--text-dark);
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 1.1rem;
border: 2px solid #e0e0e0;
border-radius: 12px;
font-size: 0.95rem;
font-family: 'Inter', sans-serif;
transition: border-color 0.3s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary);
}
.form-group textarea {
resize: vertical;
min-height: 120px;
}
.submit-btn {
width: 100%;
background: linear-gradient(135deg, var(--primary), var(--primary-light));
color: var(--white);
padding: 1.2rem;
border: none;
border-radius: 12px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(45, 95, 79, 0.3);
}
/* Footer */
.footer {
background: #1e1e1e;
color: rgba(255, 255, 255, 0.8);
padding: 5rem 0 2rem;
}
.footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: 3rem;
margin-bottom: 3rem;
}
.footer-brand h3 {
font-size: 1.8rem;
color: var(--white);
margin-bottom: 1rem;
}
.footer-brand p {
margin-bottom: 1.5rem;
line-height: 1.8;
font-size: 0.95rem;
}
.social-links {
display: flex;
gap: 1rem;
}
.social-links a {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.social-links a:hover {
background: var(--accent);
transform: translateY(-3px);
}
.footer-column h4 {
color: var(--white);
margin-bottom: 1.5rem;
font-size: 1.1rem;
}
.footer-column ul {
list-style: none;
}
.footer-column ul li {
margin-bottom: 0.8rem;
}
.footer-column ul li a {
color: rgba(255, 255, 255, 0.7);
transition: color 0.3s ease;
font-size: 0.95rem;
}
.footer-column ul li a:hover {
color: var(--accent);
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-legal {
display: flex;
gap: 2rem;
}
.footer-legal a {
color: rgba(255, 255, 255, 0.7);
font-size: 0.9rem;
}
.footer-legal a:hover {
color: var(--white);
}
/* Responsive Design */
@media (max-width: 992px) {
.hero-content {
grid-template-columns: 1fr;
gap: 3rem;
}
.hero-image {
order: -1;
}
.trust-grid {
grid-template-columns: repeat(2, 1fr);
}
.about-content {
grid-template-columns: 1fr;
gap: 3rem;
}
.services-grid {
grid-template-columns: repeat(2, 1fr);
}
.process-grid {
grid-template-columns: repeat(2, 1fr);
}
.testimonials-grid {
grid-template-columns: 1fr;
}
.conditions-grid {
grid-template-columns: repeat(2, 1fr);
}
.contact-content {
grid-template-columns: 1fr;
}
.footer-content {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.nav-links {
position: fixed;
top: 80px;
left: -100%;
width: 100%;
height: calc(100vh - 80px);
background: var(--white);
flex-direction: column;
padding: 2rem;
transition: left 0.3s ease;
box-shadow: var(--shadow);
}
.nav-links.active {
left: 0;
}
.mobile-menu-btn {
display: block;
}
.hero {
padding: 3rem 0;
}
.hero-text h1 {
font-size: 2.2rem;
}
.hero-buttons {
flex-direction: column;
}
.btn {
width: 100%;
text-align: center;
}
.trust-grid,
.services-grid,
.process-grid,
.conditions-grid {
grid-template-columns: 1fr;
}
.form-row {
grid-template-columns: 1fr;
}
.contact-form-wrapper {
padding: 2rem;
}
.footer-content {
grid-template-columns: 1fr;
}
.footer-bottom {
flex-direction: column;
gap: 1rem;
text-align: center;
}
section {
padding: 3rem 0 !important;
}
}
</style>
</head>
<body>
<!-- Announcement Bar -->
<div class="announcement-bar">
🌿 Limited Offer: Free Ayurvedic Consultation for First-Time Visitors - <a href="#contact">Book Now!</a>
</div>
<!-- Navigation -->
<nav class="navbar">
<div class="nav-container">
<a href="#" class="logo">Satva<span>Wellness</span></a>
<ul class="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#contact" class="nav-cta">Free Consultation</a></li>
</ul>
<button class="mobile-menu-btn" id="mobileMenuBtn">
<i class="fas fa-bars"></i>
</button>
</div>
</nav>
<!-- Hero Section -->
<section class="hero" id="home">
<div class="container">
<div class="hero-content">
<div class="hero-text">
<span class="badge">✨ Trusted by 15,000+ Clients</span>
<h1>Transform Your Health Through <span class="highlight">Authentic Ayurveda</span></h1>
<p>Experience holistic healing with personalized treatments rooted in 5,000 years of ancient wisdom. Restore balance, vitality, and wellness naturally.</p>
<div class="hero-buttons">
<a href="#contact" class="btn btn-primary">Book Free Consultation</a>
<a href="#services" class="btn btn-secondary">Explore Programs</a>
</div>
</div>
<div class="hero-image">
<img src="https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?w=800&q=80" alt="Ayurvedic healing">
<div class="floating-badge">
<div class="number">25+</div>
<div class="label">Years Experience</div>
</div>
</div>
</div>
</div>
</section>
<!-- Trust Bar -->
<section class="trust-bar">
<div class="container">
<div class="trust-grid">
<div class="trust-item">
<i class="fas fa-leaf"></i>
<div class="number">100%</div>
<div class="label">Natural Ingredients</div>
</div>
<div class="trust-item">
<i class="fas fa-users"></i>
<div class="number">15K+</div>
<div class="label">Happy Clients</div>
</div>
<div class="trust-item">
<i class="fas fa-award"></i>
<div class="number">25+</div>
<div class="label">Years Experience</div>
</div>
<div class="trust-item">
<i class="fas fa-certificate"></i>
<div class="number">98%</div>
<div class="label">Success Rate</div>
</div>
</div>
</div>
</section>
<!-- About Section -->
<section class="about" id="about">
<div class="container">
<div class="about-content">
<div class="about-image">
<img src="https://images.unsplash.com/photo-1600334089648-b0d9d3028eb2?w=800&q=80" alt="Ayurvedic herbs">
<div class="about-badge">
<div class="years">25+</div>
<div class="text">Years of Healing</div>
</div>
</div>
<div class="about-text">
<span class="section-tag">About Satva Wellness</span>
<h2>Ancient Wisdom Meets Modern Wellness</h2>
<p>At Satva Wellness, we believe in the profound healing power of Ayurveda. Our certified practitioners combine time-honored techniques with modern understanding to create personalized wellness journeys for each client.</p>
<p>Founded 25 years ago, we've helped thousands rediscover balance, vitality, and optimal health through authentic Ayurvedic treatments, herbal remedies, and lifestyle guidance.</p>
<div class="features-grid">
<div class="feature-item">
<i class="fas fa-check-circle"></i>
<span>Certified Practitioners</span>
</div>
<div class="feature-item">
<i class="fas fa-check-circle"></i>
<span>Personalized Treatments</span>
</div>
<div class="feature-item">
<i class="fas fa-check-circle"></i>
<span>100% Natural Herbs</span>
</div>
<div class="feature-item">
<i class="fas fa-check-circle"></i>
<span>Holistic Approach</span>
</div>
<div class="feature-item">
<i class="fas fa-check-circle"></i>
<span>Proven Results</span>
</div>
<div class="feature-item">
<i class="fas fa-check-circle"></i>
<span>Ongoing Support</span>
</div>
</div>
<a href="#contact" class="btn btn-primary" style="margin-top: 1.5rem;">Start Your Journey</a>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section class="services" id="services">
<div class="container">
<div class="section-header">
<span class="section-tag">Our Services</span>
<h2>Comprehensive Ayurvedic Treatments</h2>
<p>Discover our range of personalized healing programs designed to restore balance and vitality to your body, mind, and spirit.</p>
</div>
<div class="services-grid">
<div class="service-card">
<div class="service-image">
<img src="https://images.unsplash.com/photo-1600334129128-685c5582fd35?w=600&q=80" alt="Panchakarma">
<div class="service-icon">
<i class="fas fa-spa"></i>
</div>
</div>
<div class="service-content">
<h3>Panchakarma Detox</h3>
<p>Deep cleansing therapy to eliminate toxins, rejuvenate your system, and restore natural balance through traditional five-step purification.</p>
<a href="#contact" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a>
</div>
</div>
<div class="service-card">
<div class="service-image">
<img src="https://images.unsplash.com/photo-1600334129750-991e50ad7e8f?w=600&q=80" alt="Abhyanga Massage">
<div class="service-icon">
<i class="fas fa-hands"></i>
</div>
</div>
<div class="service-content">
<h3>Abhyanga Massage</h3>
<p>Therapeutic full-body oil massage using warm herbal oils to improve circulation, calm the nervous system, and nourish tissues.</p>
<a href="#contact" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a>
</div>
</div>
<div class="service-card">
<div class="service-image">
<img src="https://images.unsplash.com/photo-1505576399279-565b52d4ac71?w=600&q=80" alt="Herbal Medicine">
<div class="service-icon">
<i class="fas fa-seedling"></i>
</div>
</div>
<div class="service-content">
<h3>Herbal Medicine</h3>
<p>Customized herbal formulations using pure, ethically sourced ingredients to address your unique health concerns naturally.</p>
<a href="#contact" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a>
</div>
</div>
<div class="service-card">
<div class="service-image">
<img src="https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=600&q=80" alt="Dietary Consultation">
<div class="service-icon">
<i class="fas fa-utensils"></i>
</div>
</div>
<div class="service-content">
<h3>Dietary Consultation</h3>
<p>Personalized nutrition guidance based on your dosha type to optimize digestion, energy levels, and overall wellness.</p>
<a href="#contact" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a>
</div>
</div>
<div class="service-card">
<div class="service-image">
<img src="https://images.unsplash.com/photo-1593811167562-9cef47bfc4d7?w=600&q=80" alt="Stress Management">
<div class="service-icon">
<i class="fas fa-brain"></i>
</div>
</div>
<div class="service-content">
<h3>Stress Management</h3>
<p>Holistic programs combining meditation, breathing exercises, and herbal support to reduce stress and enhance mental clarity.</p>
<a href="#contact" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a>
</div>
</div>
<div class="service-card">
<div class="service-image">
<img src="https://images.unsplash.com/photo-1545205597-3d9d02c29597?w=600&q=80" alt="Lifestyle Coaching">
<div class="service-icon">
<i class="fas fa-heartbeat"></i>
</div>
</div>
<div class="service-content">
<h3>Lifestyle Coaching</h3>
<p>Comprehensive guidance on daily routines, sleep, exercise, and self-care practices aligned with Ayurvedic principles.</p>
<a href="#contact" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</section>
<!-- Process Section -->
<section class="process">
<div class="container">
<div class="section-header">
<span class="section-tag">How It Works</span>
<h2>Your Healing Journey in 4 Steps</h2>
<p>Our proven process ensures personalized care and lasting results</p>
</div>
<div class="process-grid">
<div class="process-step">
<div class="step-number">1</div>
<h3>Initial Consultation</h3>
<p>Comprehensive assessment of your health history, dosha type, and wellness goals through detailed consultation.</p>
</div>
<div class="process-step">
<div class="step-number">2</div>
<h3>Personalized Plan</h3>
<p>Custom treatment protocol designed specifically for your unique constitution and health needs.</p>
</div>
<div class="process-step">
<div class="step-number">3</div>
<h3>Treatment Sessions</h3>
<p>Expert-guided therapies using authentic Ayurvedic techniques and premium natural ingredients.</p>
</div>
<div class="process-step">
<div class="step-number">4</div>
<h3>Ongoing Support</h3>
<p>Continuous guidance, follow-ups, and lifestyle recommendations to maintain your wellness journey.</p>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="testimonials" id="testimonials">
<div class="container">
<div class="section-header">
<span class="section-tag">Success Stories</span>
<h2>What Our Clients Say</h2>
<p>Real transformations from people who trusted us with their wellness journey</p>
</div>
<div class="testimonials-grid">
<div class="testimonial-card">
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<p class="testimonial-text">"After years of digestive issues, the Panchakarma program completely transformed my health. I feel energized, balanced, and finally free from discomfort. The practitioners are knowledgeable and genuinely caring."</p>
<div class="testimonial-author">
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Priya Sharma" class="author-avatar">
<div class="author-info">
<h4>Priya Sharma</h4>
<p>Panchakarma Program</p>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<p class="testimonial-text">"The stress management program gave me tools I use daily. My anxiety has reduced significantly, and I sleep better than I have in years. Satva Wellness truly understands holistic healing."</p>
<div class="testimonial-author">
<img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Rajesh Kumar" class="author-avatar">
<div class="author-info">
<h4>Rajesh Kumar</h4>
<p>Stress Management</p>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="stars">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
<p class="testimonial-text">"The personalized herbal treatments and dietary guidance helped me manage my chronic pain naturally. I'm amazed at how much better I feel without relying on medications. Highly recommend!"</p>
<div class="testimonial-author">
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Anjali Desai" class="author-avatar">
<div class="author-info">
<h4>Anjali Desai</h4>
<p>Herbal Medicine Program</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Conditions Section -->
<section class="conditions">
<div class="container">
<div class="section-header">
<span class="section-tag">Conditions We Treat</span>
<h2>Comprehensive Healing Solutions</h2>
<p>Our Ayurvedic treatments effectively address a wide range of health conditions</p>
</div>
<div class="conditions-grid">
<div class="condition-card">
<i class="fas fa-stomach"></i>
<h3>Digestive Disorders</h3>
</div>
<div class="condition-card">
<i class="fas fa-head-side-cough"></i>
<h3>Respiratory Issues</h3>
</div>
<div class="condition-card">
<i class="fas fa-joint"></i>
<h3>Joint Pain & Arthritis</h3>
</div>
<div class="condition-card">
<i class="fas fa-brain"></i>
<h3>Stress & Anxiety</h3>
</div>
<div class="condition-card">
<i class="fas fa-bed"></i>
<h3>Sleep Disorders</h3>
</div>
<div class="condition-card">
<i class="fas fa-weight"></i>
<h3>Weight Management</h3>
</div>
<div class="condition-card">
<i class="fas fa-allergies"></i>
<h3>Skin Conditions</h3>
</div>
<div class="condition-card">
<i class="fas fa-heartbeat"></i>
<h3>Hormonal Imbalance</h3>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta-section">
<div class="container">
<h2>Ready to Transform Your Health?</h2>
<p>Start your journey to holistic wellness today with a complimentary consultation. Our experts are ready to create your personalized healing plan.</p>
<a href="#contact" class="btn">Claim Your Free Consultation</a>
</div>
</section>
<!-- Contact Section -->
<section class="contact" id="contact">
<div class="container">
<div class="contact-content">
<div class="contact-info">
<span class="section-tag">Get In Touch</span>
<h2>Start Your Wellness Journey Today</h2>
<p>Have questions? Ready to book your consultation? We're here to help you every step of the way.</p>
<div class="contact-item">
<div class="contact-icon">
<i class="fas fa-map-marker-alt"></i>
</div>
<div class="contact-details">
<h4>Visit Us</h4>
<p>123 Wellness Lane, Green Valley<br>Mumbai, Maharashtra 400001</p>
</div>
</div>
<div class="contact-item">
<div class="contact-icon">
<i class="fas fa-phone"></i>
</div>
<div class="contact-details">
<h4>Call Us</h4>
<p>+91 98765 43210<br>+91 98765 43211</p>
</div>
</div>
<div class="contact-item">
<div class="contact-icon">
<i class="fas fa-envelope"></i>
</div>
<div class="contact-details">
<h4>Email Us</h4>
<p>info@satvawellness.com<br>support@satvawellness.com</p>
</div>
</div>
<div class="contact-item">
<div class="contact-icon">
<i class="fas fa-clock"></i>
</div>
<div class="contact-details">
<h4>Working Hours</h4>
<p>Mon - Sat: 8:00 AM - 8:00 PM<br>Sunday: 9:00 AM - 5:00 PM</p>
</div>
</div>
</div>
<div class="contact-form-wrapper">
<h3>Book Your Free Consultation</h3>
<form id="contactForm">
<div class="form-row">
<div class="form-group">
<label for="firstName">First Name *</label>
<input type="text" id="firstName" name="firstName" required>
</div>
<div class="form-group">
<label for="lastName">Last Name *</label>
<input type="text" id="lastName" name="lastName" required>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="phone">Phone Number *</label>
<input type="tel" id="phone" name="phone" required>
</div>
<div class="form-group">
<label for="email">Email Address</label>
<input type="email" id="email" name="email">
</div>
</div>
<div class="form-group">
<label for="service">Service Interested In *</label>
<select id="service" name="service" required>
<option value="">Select a service</option>
<option value="panchakarma">Panchakarma Detox</option>
<option value="abhyanga">Abhyanga Massage</option>
<option value="herbal">Herbal Medicine</option>
<option value="dietary">Dietary Consultation</option>
<option value="stress">Stress Management</option>
<option value="lifestyle">Lifestyle Coaching</option>
<option value="other">Other / Not Sure</option>
</select>
</div>
<div class="form-group">
<label for="message">Message (Optional)</label>
<textarea id="message" name="message" placeholder="Tell us about your health concerns or questions..."></textarea>
</div>
<button type="submit" class="submit-btn">Schedule Free Consultation</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<div class="footer-brand">
<h3>SatvaWellness</h3>
<p>Transforming lives through authentic Ayurvedic healing. Experience the power of natural wellness and holistic balance.</p>
<div class="social-links">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
<div class="footer-column">
<h4>Quick Links</h4>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About Us</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#testimonials">Testimonials</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Services</h4>
<ul>
<li><a href="#services">Panchakarma</a></li>
<li><a href="#services">Abhyanga Massage</a></li>
<li><a href="#services">Herbal Medicine</a></li>
<li><a href="#services">Stress Management</a></li>
<li><a href="#services">Lifestyle Coaching</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Contact Info</h4>
<ul>
<li><i class="fas fa-map-marker-alt"></i> 123 Wellness Lane, Mumbai</li>
<li><i class="fas fa-phone"></i> +91 98765 43210</li>
<li><i class="fas fa-envelope"></i> info@satvawellness.com</li>
<li><i class="fas fa-clock"></i> Mon-Sat: 8AM - 8PM</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2026 Satva Wellness. All rights reserved.</p>
<div class="footer-legal">
<a href="#">Privacy Policy</a>
<a href="#">Terms of Service</a>
<a href="#">Disclaimer</a>
</div>
</div>
</div>
</footer>
<script>
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
const navHeight = document.querySelector('.navbar').offsetHeight;
const targetPosition = target.offsetTop - navHeight;
window.scrollTo({
top: targetPosition,
behavior: 'smooth'
});
// Close mobile menu if open
document.querySelector('.nav-links').classList.remove('active');
}
});
});
// Navbar scroll effect
window.addEventListener('scroll', () => {
const nav = document.querySelector('.navbar');
nav.classList.toggle('scrolled', window.scrollY > 50);
});
// Mobile menu toggle
const mobileMenuBtn = document.getElementById('mobileMenuBtn');
const navLinks = document.querySelector('.nav-links');
mobileMenuBtn.addEventListener('click', () => {
navLinks.classList.toggle('active');
const icon = mobileMenuBtn.querySelector('i');
icon.classList.toggle('fa-bars');
icon.classList.toggle('fa-times');
});
// Form submission
document.getElementById('contactForm').addEventListener('submit', function(e) {
e.preventDefault();
// Get form data
const formData = new FormData(this);
const data = Object.fromEntries(formData);
// Show success message
alert('Thank you for your interest! We will contact you within 24 hours to schedule your free consultation.');
// Reset form
this.reset();
// In a real application, you would send this data to a server
console.log('Form submitted:', data);
});
// Scroll animations (simple fade-in effect)
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -50px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
// Observe elements for animation
document.querySelectorAll('.service-card, .testimonial-card, .process-step, .condition-card').forEach(el => {
el.style.opacity = '0';
el.style.transform = 'translateY(20px)';
el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(el);
});
</script>
</body>
</html>