HTML
1572 lines
52.3 KB
Satva Wellness | Premium Ayurvedic Healing Center
Experience premium Ayurvedic wellness at Satva - Where ancient healing meets modern luxury
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="Experience premium Ayurvedic wellness at Satva - Where ancient healing meets modern luxury">
<title>Satva Wellness | Premium Ayurvedic Healing Center</title>
<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;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary: #2d5f4f;
--primary-light: #3d7a65;
--secondary: #c9a86a;
--accent: #8b6f47;
--cream: #faf8f5;
--sand: #ede8e0;
--dark: #1a1a1a;
--text: #2c2c2c;
--text-light: #5a5a5a;
--white: #ffffff;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Inter', sans-serif;
color: var(--text);
background: var(--cream);
line-height: 1.7;
overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Playfair Display', serif;
font-weight: 600;
color: var(--dark);
line-height: 1.2;
}
a {
text-decoration: none;
color: inherit;
}
img {
max-width: 100%;
height: auto;
display: block;
}
.container {
max-width: 1300px;
margin: 0 auto;
padding: 0 2rem;
}
/* Navbar */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(250, 248, 245, 0.95);
backdrop-filter: blur(20px);
padding: 1.2rem 0;
z-index: 1000;
transition: all 0.3s ease;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.04);
}
.navbar.scrolled {
padding: 0.8rem 0;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1400px;
margin: 0 auto;
padding: 0 3rem;
}
.logo {
display: flex;
align-items: center;
gap: 0.8rem;
}
.logo-icon {
width: 48px;
height: 48px;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 1.3rem;
}
.logo-text {
font-family: 'Playfair Display', serif;
font-size: 1.7rem;
font-weight: 700;
color: var(--primary);
letter-spacing: 0.5px;
}
.nav-menu {
display: flex;
list-style: none;
gap: 3rem;
}
.nav-menu a {
font-size: 0.95rem;
font-weight: 600;
color: var(--text);
position: relative;
padding: 0.5rem 0;
transition: color 0.3s;
}
.nav-menu a::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--secondary);
transition: width 0.3s ease;
}
.nav-menu a:hover::before {
width: 100%;
}
.nav-menu a:hover {
color: var(--primary);
}
.nav-cta {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
color: var(--white);
padding: 0.9rem 2rem;
border-radius: 50px;
font-weight: 600;
font-size: 0.9rem;
transition: all 0.3s;
box-shadow: 0 4px 15px rgba(45, 95, 79, 0.3);
}
.nav-cta:hover {
transform: translateY(-2px);
box-shadow: 0 6px 25px rgba(45, 95, 79, 0.4);
}
.mobile-toggle {
display: none;
background: none;
border: none;
font-size: 1.5rem;
color: var(--dark);
cursor: pointer;
}
/* Hero */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
position: relative;
padding-top: 100px;
overflow: hidden;
background: linear-gradient(135deg, var(--cream) 0%, var(--sand) 100%);
}
.hero-bg {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: 100%;
background: url('https://images.unsplash.com/photo-1544161515-4ab6ce6db874?w=1200') center/cover;
clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
}
.hero-bg::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to right, var(--cream) 0%, rgba(250, 248, 245, 0) 40%);
}
.hero-content {
position: relative;
z-index: 10;
max-width: 650px;
padding: 4rem 0;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.6rem;
background: var(--white);
padding: 0.6rem 1.5rem;
border-radius: 50px;
font-size: 0.85rem;
font-weight: 600;
color: var(--accent);
margin-bottom: 2rem;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
.hero h1 {
font-size: clamp(2.8rem, 5vw, 4.5rem);
margin-bottom: 1.8rem;
line-height: 1.15;
}
.hero h1 span {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero p {
font-size: 1.2rem;
color: var(--text-light);
margin-bottom: 3rem;
max-width: 550px;
line-height: 1.8;
}
.hero-buttons {
display: flex;
gap: 1.2rem;
flex-wrap: wrap;
}
.btn {
padding: 1.1rem 2.5rem;
border-radius: 50px;
font-weight: 600;
font-size: 0.95rem;
transition: all 0.3s;
display: inline-flex;
align-items: center;
gap: 0.6rem;
}
.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.35);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(45, 95, 79, 0.45);
}
.btn-outline {
border: 2px solid var(--primary);
color: var(--primary);
background: transparent;
}
.btn-outline:hover {
background: var(--primary);
color: var(--white);
}
/* Stats Bar */
.stats-bar {
background: var(--white);
padding: 4rem 0;
margin-top: -60px;
position: relative;
z-index: 20;
border-radius: 24px;
margin-left: 3rem;
margin-right: 3rem;
box-shadow: 0 10px 60px rgba(0, 0, 0, 0.1);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 3rem;
}
.stat-item {
text-align: center;
padding: 1.5rem;
}
.stat-icon {
width: 75px;
height: 75px;
background: linear-gradient(135deg, var(--cream) 0%, var(--sand) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
font-size: 2rem;
color: var(--primary);
transition: all 0.4s;
}
.stat-item:hover .stat-icon {
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
color: var(--white);
transform: scale(1.1) rotate(5deg);
}
.stat-number {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
font-weight: 700;
color: var(--primary);
line-height: 1;
margin-bottom: 0.5rem;
}
.stat-label {
font-size: 0.95rem;
color: var(--text-light);
font-weight: 500;
}
/* About */
.about {
padding: 9rem 0;
background: var(--cream);
}
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6rem;
align-items: center;
}
.about-images {
position: relative;
}
.about-img-main {
width: 90%;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.about-img-main img {
width: 100%;
height: 550px;
object-fit: cover;
}
.about-img-float {
position: absolute;
bottom: -40px;
right: 0;
width: 50%;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
border: 8px solid var(--white);
}
.about-img-float img {
width: 100%;
height: 300px;
object-fit: cover;
}
.about-badge {
position: absolute;
top: -25px;
right: 25%;
background: linear-gradient(135deg, var(--secondary) 0%, var(--accent) 100%);
color: var(--white);
padding: 1.5rem;
border-radius: 16px;
text-align: center;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}
.about-badge .number {
font-family: 'Playfair Display', serif;
font-size: 3rem;
font-weight: 700;
line-height: 1;
}
.about-badge .label {
font-size: 0.9rem;
font-weight: 600;
margin-top: 0.3rem;
}
.section-label {
display: inline-block;
color: var(--secondary);
font-weight: 700;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 2.5px;
margin-bottom: 1.2rem;
}
.about-content h2 {
font-size: 3rem;
margin-bottom: 1.8rem;
}
.about-content .lead {
font-size: 1.15rem;
color: var(--text-light);
margin-bottom: 2.5rem;
line-height: 1.8;
}
.about-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.8rem;
margin-bottom: 2.5rem;
}
.about-list-item {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.about-list-item i {
width: 45px;
height: 45px;
background: var(--sand);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
font-size: 1.1rem;
flex-shrink: 0;
}
.about-list-item h5 {
font-size: 1.05rem;
margin-bottom: 0.3rem;
}
.about-list-item p {
font-size: 0.9rem;
color: var(--text-light);
}
/* Services */
.services {
padding: 9rem 0;
background: var(--white);
}
.section-header {
text-align: center;
max-width: 750px;
margin: 0 auto 5rem;
}
.section-header h2 {
font-size: 3rem;
margin-bottom: 1.2rem;
}
.section-header p {
color: var(--text-light);
font-size: 1.15rem;
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
}
.service-card {
background: var(--cream);
border-radius: 24px;
overflow: hidden;
transition: all 0.4s;
}
.service-card:hover {
transform: translateY(-12px);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
}
.service-image {
height: 240px;
overflow: hidden;
}
.service-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.service-card:hover .service-image img {
transform: scale(1.1);
}
.service-content {
padding: 2.2rem;
}
.service-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 1.5rem;
margin-top: -55px;
position: relative;
box-shadow: 0 8px 25px rgba(45, 95, 79, 0.3);
}
.service-content h3 {
font-size: 1.5rem;
margin: 1.2rem 0 0.9rem;
}
.service-content p {
color: var(--text-light);
font-size: 0.95rem;
margin-bottom: 1.5rem;
line-height: 1.7;
}
.service-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--primary);
font-weight: 600;
font-size: 0.9rem;
transition: gap 0.3s;
}
.service-link:hover {
gap: 0.9rem;
}
/* Process */
.process {
padding: 9rem 0;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
color: var(--white);
position: relative;
overflow: hidden;
}
.process::before {
content: '';
position: absolute;
inset: 0;
background: url('https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=1600') center/cover;
opacity: 0.08;
}
.process .section-header {
position: relative;
z-index: 2;
}
.process .section-label {
color: var(--secondary);
}
.process h2 {
color: var(--white);
}
.process p {
color: rgba(255, 255, 255, 0.85);
}
.process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2.5rem;
position: relative;
z-index: 2;
}
.process-card {
text-align: center;
padding: 2.5rem 2rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s;
}
.process-card:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-8px);
}
.process-number {
width: 65px;
height: 65px;
background: linear-gradient(135deg, var(--secondary) 0%, var(--accent) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.8rem;
font-family: 'Playfair Display', serif;
font-size: 2rem;
font-weight: 700;
color: var(--white);
}
.process-card h4 {
color: var(--white);
font-size: 1.4rem;
margin-bottom: 0.9rem;
}
.process-card p {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.75);
}
/* Testimonials */
.testimonials {
padding: 9rem 0;
background: var(--cream);
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
}
.testimonial-card {
background: var(--white);
padding: 3rem;
border-radius: 24px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
transition: all 0.3s;
}
.testimonial-card:hover {
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
transform: translateY(-8px);
}
.testimonial-rating {
color: var(--secondary);
margin-bottom: 1.5rem;
font-size: 1.1rem;
}
.testimonial-text {
font-size: 1.05rem;
color: var(--text);
font-style: italic;
margin-bottom: 2rem;
line-height: 1.8;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 1.2rem;
}
.author-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
overflow: hidden;
}
.author-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.author-info h5 {
font-size: 1.05rem;
margin-bottom: 0.3rem;
}
.author-info p {
font-size: 0.85rem;
color: var(--text-light);
}
/* Contact */
.contact {
padding: 9rem 0;
background: var(--white);
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.3fr;
gap: 5rem;
align-items: stretch;
}
.contact-info h2 {
font-size: 2.8rem;
margin-bottom: 1.8rem;
}
.contact-info .lead {
color: var(--text-light);
margin-bottom: 3rem;
font-size: 1.1rem;
line-height: 1.8;
}
.contact-details {
display: flex;
flex-direction: column;
gap: 2rem;
}
.contact-item {
display: flex;
align-items: flex-start;
gap: 1.2rem;
}
.contact-item-icon {
width: 55px;
height: 55px;
background: var(--sand);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
font-size: 1.3rem;
flex-shrink: 0;
}
.contact-item h5 {
font-size: 1.05rem;
margin-bottom: 0.4rem;
}
.contact-item p {
color: var(--text-light);
font-size: 0.95rem;
}
.contact-form-card {
background: var(--cream);
padding: 3.5rem;
border-radius: 28px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.8rem;
}
.form-group {
margin-bottom: 1.8rem;
}
.form-group label {
display: block;
font-weight: 600;
margin-bottom: 0.6rem;
color: var(--dark);
font-size: 0.95rem;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 1.1rem 1.4rem;
border: 2px solid var(--sand);
border-radius: 14px;
font-family: 'Inter', sans-serif;
font-size: 1rem;
transition: all 0.3s;
background: var(--white);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(45, 95, 79, 0.1);
}
.form-group textarea {
min-height: 130px;
resize: vertical;
}
.submit-btn {
width: 100%;
padding: 1.2rem 2rem;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
color: var(--white);
border: none;
border-radius: 14px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s;
}
.submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(45, 95, 79, 0.4);
}
/* Footer */
.footer {
background: var(--dark);
color: var(--white);
padding: 5rem 0 2rem;
}
.footer-grid {
display: grid;
grid-template-columns: 1.8fr 1fr 1fr 1fr;
gap: 4rem;
margin-bottom: 4rem;
}
.footer-brand .logo-text {
color: var(--white);
}
.footer-brand p {
color: rgba(255, 255, 255, 0.65);
margin: 1.5rem 0;
font-size: 0.95rem;
line-height: 1.7;
}
.footer-social {
display: flex;
gap: 1rem;
}
.footer-social a {
width: 45px;
height: 45px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
transition: all 0.3s;
}
.footer-social a:hover {
background: var(--secondary);
transform: translateY(-3px);
}
.footer-column h4 {
color: var(--white);
font-size: 1.2rem;
margin-bottom: 1.8rem;
position: relative;
padding-bottom: 0.9rem;
}
.footer-column h4::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 45px;
height: 2px;
background: var(--secondary);
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 0.9rem;
}
.footer-links a {
color: rgba(255, 255, 255, 0.65);
transition: all 0.3s;
font-size: 0.95rem;
}
.footer-links a:hover {
color: var(--secondary);
padding-left: 6px;
}
.footer-bottom {
padding-top: 2.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1.5rem;
}
.footer-bottom p {
color: rgba(255, 255, 255, 0.5);
font-size: 0.9rem;
}
.footer-legal {
display: flex;
gap: 2.5rem;
}
.footer-legal a {
color: rgba(255, 255, 255, 0.5);
font-size: 0.9rem;
transition: color 0.3s;
}
.footer-legal a:hover {
color: var(--secondary);
}
/* Responsive */
@media (max-width: 1200px) {
.footer-grid {
grid-template-columns: 1fr 1fr 1fr;
}
.footer-brand {
grid-column: 1 / -1;
}
}
@media (max-width: 992px) {
.hero-bg {
width: 100%;
clip-path: none;
opacity: 0.25;
}
.hero-content {
max-width: 100%;
text-align: center;
}
.hero p {
margin-left: auto;
margin-right: auto;
}
.hero-buttons {
justify-content: center;
}
.stats-bar {
margin: -40px 2rem 0;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
}
.about-grid,
.contact-grid {
grid-template-columns: 1fr;
gap: 4rem;
}
.about-images {
max-width: 550px;
margin: 0 auto;
}
.services-grid,
.testimonials-grid {
grid-template-columns: 1fr 1fr;
}
.process-grid {
grid-template-columns: repeat(2, 1fr);
}
.footer-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.mobile-toggle {
display: block;
}
.nav-menu {
position: fixed;
top: 70px;
left: 0;
right: 0;
background: var(--white);
flex-direction: column;
padding: 2.5rem;
gap: 2rem;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
transform: translateY(-150%);
transition: transform 0.4s;
}
.nav-menu.active {
transform: translateY(0);
}
.nav-cta {
display: none;
}
.stats-grid,
.services-grid,
.testimonials-grid,
.process-grid {
grid-template-columns: 1fr;
}
.form-row {
grid-template-columns: 1fr;
}
.about-list {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr;
}
.footer-bottom {
flex-direction: column;
text-align: center;
}
}
@media (max-width: 576px) {
.hero h1 {
font-size: 2.2rem;
}
.section-header h2,
.about-content h2 {
font-size: 2.2rem;
}
.stats-bar {
margin: 0 1.5rem;
padding: 3rem 1.5rem;
}
.contact-form-card {
padding: 2.5rem 2rem;
}
}
</style>
</head>
<body>
<nav class="navbar">
<div class="nav-container">
<a href="#" class="logo">
<div class="logo-icon"><i class="fas fa-spa"></i></div>
<span class="logo-text">Satva</span>
</a>
<button class="mobile-toggle" onclick="document.querySelector('.nav-menu').classList.toggle('active')">
<i class="fas fa-bars"></i>
</button>
<ul class="nav-menu">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#process">Process</a></li>
<li><a href="#testimonials">Reviews</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<a href="#contact" class="nav-cta">Book Consultation</a>
</div>
</nav>
<section id="home" class="hero">
<div class="hero-bg"></div>
<div class="container">
<div class="hero-content">
<div class="hero-badge"><i class="fas fa-award"></i> Certified Ayurvedic Excellence Since 1988</div>
<h1>Experience <span>Authentic Healing</span> Through Ancient Wisdom</h1>
<p>Discover holistic wellness with personalized Ayurvedic treatments. Our expert practitioners blend
traditional knowledge with modern care to restore your natural balance.</p>
<div class="hero-buttons">
<a href="#contact" class="btn btn-primary">Begin Your Journey <i class="fas fa-arrow-right"></i></a>
<a href="#services" class="btn btn-outline">Explore Treatments</a>
</div>
</div>
</div>
</section>
<section class="stats-bar">
<div class="container">
<div class="stats-grid">
<div class="stat-item">
<div class="stat-icon"><i class="fas fa-leaf"></i></div>
<div class="stat-number">100%</div>
<div class="stat-label">Natural Ingredients</div>
</div>
<div class="stat-item">
<div class="stat-icon"><i class="fas fa-user-md"></i></div>
<div class="stat-number">35+</div>
<div class="stat-label">Expert Practitioners</div>
</div>
<div class="stat-item">
<div class="stat-icon"><i class="fas fa-users"></i></div>
<div class="stat-number">15K+</div>
<div class="stat-label">Happy Clients</div>
</div>
<div class="stat-item">
<div class="stat-icon"><i class="fas fa-certificate"></i></div>
<div class="stat-number">35</div>
<div class="stat-label">Years Experience</div>
</div>
</div>
</div>
</section>
<section id="about" class="about">
<div class="container">
<div class="about-grid">
<div class="about-images">
<div class="about-img-main"><img
src="https://images.unsplash.com/photo-1544161515-4ab6ce6db874?w=800"
alt="Ayurvedic treatment"></div>
<div class="about-img-float"><img
src="https://images.unsplash.com/photo-1600334129128-685c5582fd35?w=600"
alt="Herbal medicine"></div>
<div class="about-badge">
<div class="number">35+</div>
<div class="label">Years of Healing</div>
</div>
</div>
<div class="about-content">
<span class="section-label">About Satva Wellness</span>
<h2>A Legacy of Authentic Ayurvedic Practice</h2>
<p class="lead">For over three decades, Satva has been a beacon of traditional healing, combining
ancient Ayurvedic wisdom with compassionate modern care to help thousands achieve optimal
wellness.</p>
<div class="about-list">
<div class="about-list-item">
<i class="fas fa-check-circle"></i>
<div>
<h5>Personalized Care</h5>
<p>Treatments tailored to your unique constitution</p>
</div>
</div>
<div class="about-list-item">
<i class="fas fa-check-circle"></i>
<div>
<h5>Ancient Wisdom</h5>
<p>Authentic practices from sacred texts</p>
</div>
</div>
<div class="about-list-item">
<i class="fas fa-check-circle"></i>
<div>
<h5>Pure Ingredients</h5>
<p>Organic herbs from trusted sources</p>
</div>
</div>
<div class="about-list-item">
<i class="fas fa-check-circle"></i>
<div>
<h5>Lasting Results</h5>
<p>Addressing root causes, not symptoms</p>
</div>
</div>
</div>
<a href="#services" class="btn btn-primary">Discover Our Approach <i
class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
</section>
<section id="services" class="services">
<div class="container">
<div class="section-header">
<span class="section-label">Our Services</span>
<h2>Comprehensive Wellness Programs</h2>
<p>Explore our range of traditional Ayurvedic therapies designed to promote complete mind-body-spirit
harmony.</p>
</div>
<div class="services-grid">
<div class="service-card">
<div class="service-image"><img
src="https://images.unsplash.com/photo-1519823551278-64ac92734fb1?w=600" alt="Panchakarma">
</div>
<div class="service-content">
<div class="service-icon"><i class="fas fa-spa"></i></div>
<h3>Panchakarma Detox</h3>
<p>Complete five-step purification program that eliminates toxins and rejuvenates your entire
system 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-1600334129128-685c5582fd35?w=600" alt="Herbal"></div>
<div class="service-content">
<div class="service-icon"><i class="fas fa-mortar-pestle"></i></div>
<h3>Herbal Medicine</h3>
<p>Custom-formulated preparations using time-tested recipes to address your specific health
concerns.</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-1515377905703-c4788e51af15?w=600" alt="Consultation">
</div>
<div class="service-content">
<div class="service-icon"><i class="fas fa-heartbeat"></i></div>
<h3>Wellness Consultation</h3>
<p>Comprehensive assessment of your constitution and health to create personalized treatment
plans.</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-1571019613454-1cb2f99b2d8b?w=600" alt="Massage">
</div>
<div class="service-content">
<div class="service-icon"><i class="fas fa-hand-holding-heart"></i></div>
<h3>Abhyanga Therapy</h3>
<p>Traditional warm oil massage promoting circulation, deep relaxation, and tissue nourishment.
</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-1490645935967-10de6ba17061?w=600" alt="Diet"></div>
<div class="service-content">
<div class="service-icon"><i class="fas fa-utensils"></i></div>
<h3>Nutritional Guidance</h3>
<p>Personalized dietary plans based on your dosha type and individual wellness goals.</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-1545389336-cf090694435e?w=600" alt="Yoga"></div>
<div class="service-content">
<div class="service-icon"><i class="fas fa-om"></i></div>
<h3>Yoga & Meditation</h3>
<p>Complementary practices including asanas, pranayama, and meditation for holistic wellness.
</p>
<a href="#contact" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</section>
<section id="process" class="process">
<div class="container">
<div class="section-header">
<span class="section-label">How It Works</span>
<h2>Your Healing Journey</h2>
<p>Our structured approach ensures personalized care at every step of your wellness transformation.</p>
</div>
<div class="process-grid">
<div class="process-card">
<div class="process-number">1</div>
<h4>Initial Assessment</h4>
<p>Comprehensive health evaluation and dosha analysis by our expert practitioners.</p>
</div>
<div class="process-card">
<div class="process-number">2</div>
<h4>Custom Plan</h4>
<p>Personalized treatment protocol designed specifically for your unique needs.</p>
</div>
<div class="process-card">
<div class="process-number">3</div>
<h4>Treatment</h4>
<p>Authentic Ayurvedic therapies administered by skilled, certified practitioners.</p>
</div>
<div class="process-card">
<div class="process-number">4</div>
<h4>Ongoing Care</h4>
<p>Continued support with lifestyle guidance and regular follow-up consultations.</p>
</div>
</div>
</div>
</section>
<section id="testimonials" class="testimonials">
<div class="container">
<div class="section-header">
<span class="section-label">Client Experiences</span>
<h2>Stories of Transformation</h2>
<p>Hear from those who have experienced profound healing through our Ayurvedic treatments.</p>
</div>
<div class="testimonials-grid">
<div class="testimonial-card">
<div class="testimonial-rating"><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 Panchakarma program completely transformed my energy levels. After
years of chronic fatigue, I finally feel alive again. The practitioners are incredibly
knowledgeable."</p>
<div class="testimonial-author">
<div class="author-avatar"><img src="https://randomuser.me/api/portraits/women/45.jpg"
alt="Priya"></div>
<div class="author-info">
<h5>Priya Sharma</h5>
<p>Wellness Program Client</p>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-rating"><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 dietary guidance resolved digestive issues I'd had for over a
decade. The approach is thorough, personalized, and truly focused on sustainable results."</p>
<div class="testimonial-author">
<div class="author-avatar"><img src="https://randomuser.me/api/portraits/men/32.jpg"
alt="Rajesh"></div>
<div class="author-info">
<h5>Rajesh Kumar</h5>
<p>Nutrition Client</p>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="testimonial-rating"><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">"Abhyanga therapy has become essential to my wellness routine. The
traditional techniques combined with the serene environment make each visit truly rejuvenating."
</p>
<div class="testimonial-author">
<div class="author-avatar"><img src="https://randomuser.me/api/portraits/women/68.jpg"
alt="Anita"></div>
<div class="author-info">
<h5>Anita Desai</h5>
<p>Regular Client, 3 Years</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="contact" class="contact">
<div class="container">
<div class="contact-grid">
<div class="contact-info">
<span class="section-label">Get In Touch</span>
<h2>Begin Your Wellness Journey</h2>
<p class="lead">Schedule a consultation with our experienced practitioners to discuss your health
goals and discover how Ayurveda can support your well-being.</p>
<div class="contact-details">
<div class="contact-item">
<div class="contact-item-icon"><i class="fas fa-map-marker-alt"></i></div>
<div>
<h5>Visit Us</h5>
<p>123 Wellness Avenue, Health District<br>City Center, State 12345</p>
</div>
</div>
<div class="contact-item">
<div class="contact-item-icon"><i class="fas fa-phone-alt"></i></div>
<div>
<h5>Call Us</h5>
<p>+1 (555) 123-4567<br>+1 (555) 987-6543</p>
</div>
</div>
<div class="contact-item">
<div class="contact-item-icon"><i class="fas fa-envelope"></i></div>
<div>
<h5>Email Us</h5>
<p>info@satvawellness.com<br>appointments@satvawellness.com</p>
</div>
</div>
<div class="contact-item">
<div class="contact-item-icon"><i class="fas fa-clock"></i></div>
<div>
<h5>Working Hours</h5>
<p>Monday - Saturday: 8:00 AM - 7:00 PM<br>Sunday: 9:00 AM - 1:00 PM</p>
</div>
</div>
</div>
</div>
<div class="contact-form-card">
<form id="consultationForm">
<div class="form-row">
<div class="form-group"><label>First Name</label><input type="text" required></div>
<div class="form-group"><label>Last Name</label><input type="text" required></div>
</div>
<div class="form-row">
<div class="form-group"><label>Email Address</label><input type="email" required></div>
<div class="form-group"><label>Phone Number</label><input type="tel"></div>
</div>
<div class="form-group">
<label>Service of Interest</label>
<select>
<option>Select a service</option>
<option>Initial Consultation</option>
<option>Panchakarma Therapy</option>
<option>Abhyanga Therapy</option>
<option>Nutritional Guidance</option>
<option>Herbal Medicine</option>
<option>Yoga & Meditation</option>
</select>
</div>
<div class="form-group"><label>Your Message</label><textarea
placeholder="Tell us about your health concerns..."></textarea></div>
<button type="submit" class="submit-btn">Request Consultation <i
class="fas fa-paper-plane"></i></button>
</form>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<div class="logo">
<div class="logo-icon"><i class="fas fa-spa"></i></div><span class="logo-text">Satva</span>
</div>
<p>Dedicated to preserving authentic Ayurvedic traditions while providing personalized wellness
solutions for modern living.</p>
<div class="footer-social">
<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-youtube"></i></a>
<a href="#"><i class="fab fa-whatsapp"></i></a>
</div>
</div>
<div class="footer-column">
<h4>Quick Links</h4>
<ul class="footer-links">
<li><a href="#about">About Us</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#process">Process</a></li>
<li><a href="#testimonials">Reviews</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Our Services</h4>
<ul class="footer-links">
<li><a href="#">Panchakarma</a></li>
<li><a href="#">Herbal Medicine</a></li>
<li><a href="#">Abhyanga</a></li>
<li><a href="#">Nutrition</a></li>
<li><a href="#">Yoga</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Contact Info</h4>
<ul class="footer-links">
<li>123 Wellness Avenue</li>
<li>+1 (555) 123-4567</li>
<li>info@satvawellness.com</li>
<li>Mon-Sat: 8AM - 7PM</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>
window.addEventListener('scroll', () => {
const nav = document.querySelector('.navbar');
nav.classList.toggle('scrolled', window.scrollY > 50);
});
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
window.scrollTo({ top: target.offsetTop - 80, behavior: 'smooth' });
document.querySelector('.nav-menu').classList.remove('active');
}
});
});
document.getElementById('consultationForm').addEventListener('submit', e => {
e.preventDefault();
alert('Thank you! We will contact you within 24 hours.');
e.target.reset();
});
const observer = new IntersectionObserver(entries => {
entries.forEach(e => { if (e.isIntersecting) { e.target.style.opacity = 1; e.target.style.transform = 'translateY(0)'; } });
}, { threshold: 0.1 });
document.querySelectorAll('.service-card, .testimonial-card, .process-card').forEach(el => {
el.style.opacity = 0; el.style.transform = 'translateY(30px)'; el.style.transition = 'all 0.6s ease';
observer.observe(el);
});
</script>
</body>
</html>