HTML
1302 lines
41.4 KB
Prakrti | Premium Ayurvedic & Naturopathy Center
Experience authentic Ayurvedic healing at Prakrti - Where ancient wisdom meets modern wellness.
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 authentic Ayurvedic healing at Prakrti - Where ancient wisdom meets modern wellness.">
<title>Prakrti | Premium Ayurvedic & Naturopathy 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=DM+Serif+Display&family=Space+Grotesk: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 {
--sage: #7d9f7d;
--forest: #2d4a3e;
--sand: #e8dcc4;
--cream: #f7f5f0;
--terracotta: #c4785a;
--charcoal: #1a1a1a;
--white: #ffffff;
--text: #3a3a3a;
--radius-xl: 24px;
--radius-full: 9999px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Space Grotesk', sans-serif;
background: var(--cream);
color: var(--text);
line-height: 1.7;
}
h1,
h2,
h3,
h4 {
font-family: 'DM Serif Display', serif;
font-weight: 400;
color: var(--charcoal);
}
a {
text-decoration: none;
color: inherit;
}
.container {
max-width: 1300px;
margin: 0 auto;
padding: 0 2rem;
}
/* Bento Grid Trend */
.bento {
display: grid;
gap: 1.5rem;
}
/* Navbar - Pill Style */
.navbar {
position: fixed;
top: 1.5rem;
left: 50%;
transform: translateX(-50%);
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(20px);
padding: 0.8rem 1.5rem;
border-radius: var(--radius-full);
z-index: 1000;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
display: flex;
align-items: center;
gap: 2rem;
}
.logo {
font-family: 'DM Serif Display', serif;
font-size: 1.4rem;
color: var(--forest);
}
.nav-links {
display: flex;
gap: 1.8rem;
list-style: none;
}
.nav-links a {
font-size: 0.9rem;
font-weight: 500;
color: var(--text);
transition: 0.3s;
}
.nav-links a:hover {
color: var(--forest);
}
.nav-cta {
background: var(--forest);
color: var(--white);
padding: 0.6rem 1.4rem;
border-radius: var(--radius-full);
font-size: 0.85rem;
font-weight: 600;
transition: 0.3s;
}
.nav-cta:hover {
background: var(--charcoal);
transform: scale(1.05);
}
.menu-toggle {
display: none;
background: none;
border: none;
font-size: 1.3rem;
cursor: pointer;
}
/* Hero - Split Asymmetric */
.hero {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
padding: 8rem 0 4rem;
overflow: hidden;
}
.hero-content {
padding: 3rem;
}
.hero-tag {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--sand);
padding: 0.5rem 1rem;
border-radius: var(--radius-full);
font-size: 0.8rem;
font-weight: 600;
color: var(--terracotta);
margin-bottom: 1.5rem;
}
.hero h1 {
font-size: clamp(2.5rem, 5vw, 4.5rem);
line-height: 1.1;
margin-bottom: 1.5rem;
}
.hero h1 span {
color: var(--sage);
}
.hero p {
font-size: 1.1rem;
color: var(--text);
opacity: 0.8;
margin-bottom: 2rem;
max-width: 480px;
}
.hero-btns {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.btn {
padding: 1rem 2rem;
border-radius: var(--radius-full);
font-weight: 600;
font-size: 0.95rem;
transition: 0.3s;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.btn-primary {
background: var(--forest);
color: var(--white);
}
.btn-primary:hover {
background: var(--charcoal);
transform: translateY(-2px);
}
.btn-outline {
border: 2px solid var(--forest);
color: var(--forest);
}
.btn-outline:hover {
background: var(--forest);
color: var(--white);
}
.hero-visual {
position: relative;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.hero-img-wrap {
position: relative;
width: 90%;
max-width: 550px;
}
.hero-img-main {
width: 100%;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}
.hero-img-main img {
width: 100%;
height: 550px;
object-fit: cover;
display: block;
}
.hero-float {
position: absolute;
background: var(--white);
padding: 1.2rem 1.5rem;
border-radius: 16px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}
.hero-float.top {
top: -20px;
right: -30px;
}
.hero-float.bottom {
bottom: 30px;
left: -40px;
}
.float-stat {
font-family: 'DM Serif Display', serif;
font-size: 2rem;
color: var(--forest);
line-height: 1;
}
.float-label {
font-size: 0.8rem;
color: var(--text);
opacity: 0.7;
}
/* Marquee Trend */
.marquee {
background: var(--forest);
padding: 1rem 0;
overflow: hidden;
}
.marquee-track {
display: flex;
gap: 4rem;
animation: scroll 20s linear infinite;
white-space: nowrap;
}
.marquee-item {
display: flex;
align-items: center;
gap: 0.8rem;
color: var(--white);
font-size: 0.95rem;
font-weight: 500;
}
.marquee-item i {
color: var(--sage);
}
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* Bento Services */
.services {
padding: 6rem 0;
}
.section-head {
text-align: center;
margin-bottom: 4rem;
}
.section-tag {
display: inline-block;
background: var(--sand);
color: var(--terracotta);
padding: 0.4rem 1rem;
border-radius: var(--radius-full);
font-size: 0.8rem;
font-weight: 600;
margin-bottom: 1rem;
}
.section-head h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.section-head p {
color: var(--text);
opacity: 0.7;
max-width: 600px;
margin: 0 auto;
}
.services-bento {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto auto;
gap: 1.5rem;
}
.service-card {
background: var(--white);
border-radius: var(--radius-xl);
overflow: hidden;
transition: 0.4s;
position: relative;
}
.service-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}
.service-card.large {
grid-column: span 2;
display: grid;
grid-template-columns: 1fr 1fr;
}
.service-img {
height: 220px;
overflow: hidden;
}
.service-card.large .service-img {
height: 100%;
}
.service-img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: 0.5s;
}
.service-card:hover .service-img img {
transform: scale(1.08);
}
.service-body {
padding: 1.8rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.service-icon {
width: 50px;
height: 50px;
background: var(--sage);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 1.2rem;
margin-bottom: 1rem;
}
.service-body h3 {
font-size: 1.4rem;
margin-bottom: 0.6rem;
}
.service-body p {
font-size: 0.95rem;
color: var(--text);
opacity: 0.7;
margin-bottom: 1rem;
}
.service-link {
color: var(--forest);
font-weight: 600;
font-size: 0.9rem;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.service-link:hover {
gap: 0.7rem;
}
/* About - Overlap Cards */
.about {
padding: 6rem 0;
background: var(--sand);
}
.about-grid {
display: grid;
grid-template-columns: 1.2fr 1fr;
gap: 4rem;
align-items: center;
}
.about-visual {
position: relative;
}
.about-img-1 {
width: 80%;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}
.about-img-1 img {
width: 100%;
height: 450px;
object-fit: cover;
display: block;
}
.about-img-2 {
position: absolute;
bottom: -30px;
right: 0;
width: 55%;
border-radius: var(--radius-xl);
overflow: hidden;
border: 6px solid var(--sand);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}
.about-img-2 img {
width: 100%;
height: 250px;
object-fit: cover;
display: block;
}
.about-content h2 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
}
.about-content p {
margin-bottom: 1.5rem;
opacity: 0.8;
}
.about-list {
list-style: none;
margin-bottom: 2rem;
}
.about-list li {
display: flex;
align-items: center;
gap: 0.8rem;
margin-bottom: 0.8rem;
font-weight: 500;
}
.about-list i {
color: var(--sage);
font-size: 1.1rem;
}
/* Process - Timeline */
.process {
padding: 6rem 0;
background: var(--forest);
color: var(--white);
position: relative;
overflow: hidden;
}
.process::before {
content: '';
position: absolute;
inset: 0;
background: url('https://images.unsplash.com/photo-1545389336-cf090694435e?w=1600') center/cover;
opacity: 0.08;
}
.process .section-head h2 {
color: var(--white);
}
.process .section-head p {
color: rgba(255, 255, 255, 0.7);
}
.process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
position: relative;
z-index: 2;
}
.process-card {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-xl);
padding: 2rem;
text-align: center;
transition: 0.3s;
}
.process-card:hover {
background: rgba(255, 255, 255, 0.12);
transform: translateY(-5px);
}
.process-num {
width: 55px;
height: 55px;
background: var(--terracotta);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'DM Serif Display', serif;
font-size: 1.5rem;
margin: 0 auto 1.2rem;
}
.process-card h4 {
font-size: 1.2rem;
margin-bottom: 0.6rem;
color: var(--white);
}
.process-card p {
font-size: 0.9rem;
opacity: 0.7;
}
/* Testimonials - Horizontal Cards */
.testimonials {
padding: 6rem 0;
}
.testimonials-scroll {
display: flex;
gap: 1.5rem;
overflow-x: auto;
padding: 1rem 0;
scrollbar-width: none;
-ms-overflow-style: none;
}
.testimonials-scroll::-webkit-scrollbar {
display: none;
}
.testimonial-card {
flex: 0 0 380px;
background: var(--white);
padding: 2rem;
border-radius: var(--radius-xl);
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.06);
}
.test-stars {
color: var(--terracotta);
margin-bottom: 1rem;
}
.test-text {
font-size: 1rem;
font-style: italic;
margin-bottom: 1.5rem;
line-height: 1.7;
}
.test-author {
display: flex;
align-items: center;
gap: 1rem;
}
.test-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
}
.test-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.test-name {
font-weight: 600;
}
.test-role {
font-size: 0.85rem;
opacity: 0.6;
}
/* Contact - Glass Card */
.contact {
padding: 6rem 0;
background: linear-gradient(135deg, var(--sage) 0%, var(--forest) 100%);
position: relative;
}
.contact-wrap {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 3rem;
background: var(--white);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}
.contact-info {
background: var(--forest);
color: var(--white);
padding: 3rem;
}
.contact-info h2 {
font-size: 2rem;
margin-bottom: 1rem;
color: var(--white);
}
.contact-info>p {
opacity: 0.8;
margin-bottom: 2rem;
}
.contact-list {
list-style: none;
}
.contact-list li {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.5rem;
}
.contact-list i {
color: var(--sage);
margin-top: 0.2rem;
}
.contact-form {
padding: 3rem;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.form-group {
margin-bottom: 1.2rem;
}
.form-group label {
display: block;
font-weight: 600;
margin-bottom: 0.4rem;
font-size: 0.9rem;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 0.9rem 1rem;
border: 2px solid var(--sand);
border-radius: 10px;
font-family: inherit;
font-size: 0.95rem;
transition: 0.3s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--forest);
}
.form-group textarea {
min-height: 100px;
resize: vertical;
}
.submit-btn {
width: 100%;
padding: 1rem;
background: var(--forest);
color: var(--white);
border: none;
border-radius: 10px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: 0.3s;
}
.submit-btn:hover {
background: var(--charcoal);
}
/* Footer - Minimal */
.footer {
background: var(--charcoal);
color: var(--white);
padding: 4rem 0 2rem;
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 3rem;
margin-bottom: 3rem;
}
.footer-brand p {
opacity: 0.6;
margin: 1rem 0 1.5rem;
font-size: 0.95rem;
}
.footer-social {
display: flex;
gap: 0.8rem;
}
.footer-social a {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: 0.3s;
}
.footer-social a:hover {
background: var(--sage);
transform: translateY(-3px);
}
.footer-col h4 {
font-size: 1.1rem;
margin-bottom: 1.2rem;
color: var(--white);
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 0.6rem;
}
.footer-links a {
opacity: 0.6;
font-size: 0.9rem;
transition: 0.3s;
}
.footer-links a:hover {
opacity: 1;
color: var(--sage);
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
font-size: 0.85rem;
opacity: 0.5;
}
/* Responsive */
@media (max-width: 1024px) {
.hero {
grid-template-columns: 1fr;
text-align: center;
}
.hero-content {
order: 2;
}
.hero-visual {
order: 1;
padding: 2rem;
}
.hero p {
margin: 0 auto 2rem;
}
.hero-btns {
justify-content: center;
}
.hero-float {
display: none;
}
.services-bento {
grid-template-columns: 1fr 1fr;
}
.service-card.large {
grid-column: span 2;
}
.about-grid {
grid-template-columns: 1fr;
}
.about-visual {
max-width: 500px;
margin: 0 auto;
}
.process-grid {
grid-template-columns: 1fr 1fr;
}
.contact-wrap {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.navbar {
top: 1rem;
padding: 0.6rem 1rem;
gap: 1rem;
}
.nav-links,
.nav-cta {
display: none;
}
.menu-toggle {
display: block;
}
.services-bento,
.process-grid {
grid-template-columns: 1fr;
}
.service-card.large {
grid-column: span 1;
grid-template-columns: 1fr;
}
.form-row {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: 1fr;
}
.footer-bottom {
flex-direction: column;
text-align: center;
}
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar">
<a href="#" class="logo">Prakrti</a>
<button class="menu-toggle"><i class="fas fa-bars"></i></button>
<ul class="nav-links">
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#about">About</a></li>
<li><a href="#process">Process</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<a href="#contact" class="nav-cta">Book Now</a>
</nav>
<!-- Hero -->
<section id="home" class="hero">
<div class="hero-content">
<div class="hero-tag"><i class="fas fa-leaf"></i> Established 1992</div>
<h1>Heal Naturally with <span>Ayurveda</span></h1>
<p>Experience authentic healing through personalized Ayurvedic treatments and naturopathy. Restore balance
to mind, body, and spirit.</p>
<div class="hero-btns">
<a href="#contact" class="btn btn-primary">Start Your Journey <i class="fas fa-arrow-right"></i></a>
<a href="#services" class="btn btn-outline">Our Treatments</a>
</div>
</div>
<div class="hero-visual">
<div class="hero-img-wrap">
<div class="hero-img-main">
<img src="https://images.unsplash.com/photo-1544161515-4ab6ce6db874?w=800" alt="Ayurvedic therapy">
</div>
<div class="hero-float top">
<div class="float-stat">98%</div>
<div class="float-label">Client Satisfaction</div>
</div>
<div class="hero-float bottom">
<div class="float-stat">30+</div>
<div class="float-label">Years Experience</div>
</div>
</div>
</div>
</section>
<!-- Marquee -->
<div class="marquee">
<div class="marquee-track">
<span class="marquee-item"><i class="fas fa-check-circle"></i> 100% Natural Ingredients</span>
<span class="marquee-item"><i class="fas fa-check-circle"></i> Certified Practitioners</span>
<span class="marquee-item"><i class="fas fa-check-circle"></i> Personalized Treatments</span>
<span class="marquee-item"><i class="fas fa-check-circle"></i> No Side Effects</span>
<span class="marquee-item"><i class="fas fa-check-circle"></i> Holistic Healing</span>
<span class="marquee-item"><i class="fas fa-check-circle"></i> Ancient Wisdom</span>
<span class="marquee-item"><i class="fas fa-check-circle"></i> 100% Natural Ingredients</span>
<span class="marquee-item"><i class="fas fa-check-circle"></i> Certified Practitioners</span>
<span class="marquee-item"><i class="fas fa-check-circle"></i> Personalized Treatments</span>
<span class="marquee-item"><i class="fas fa-check-circle"></i> No Side Effects</span>
</div>
</div>
<!-- Services Bento -->
<section id="services" class="services">
<div class="container">
<div class="section-head">
<span class="section-tag">Our Services</span>
<h2>Holistic Treatment Programs</h2>
<p>Discover our comprehensive range of authentic Ayurvedic therapies designed for complete wellness.</p>
</div>
<div class="services-bento">
<div class="service-card large">
<div class="service-img"><img
src="https://images.unsplash.com/photo-1600334129128-685c5582fd35?w=800" alt="Panchakarma">
</div>
<div class="service-body">
<div class="service-icon"><i class="fas fa-spa"></i></div>
<h3>Panchakarma Detox</h3>
<p>A comprehensive five-step purification therapy that eliminates toxins and rejuvenates your
entire system for lasting 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-img"><img
src="https://images.unsplash.com/photo-1519823551278-64ac92734fb1?w=600" alt="Abhyanga">
</div>
<div class="service-body">
<div class="service-icon"><i class="fas fa-hand-holding-heart"></i></div>
<h3>Abhyanga Massage</h3>
<p>Traditional warm oil massage therapy promoting 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-img"><img
src="https://images.unsplash.com/photo-1515377905703-c4788e51af15?w=600" alt="Consultation">
</div>
<div class="service-body">
<div class="service-icon"><i class="fas fa-user-md"></i></div>
<h3>Dosha Analysis</h3>
<p>Comprehensive constitution assessment for personalized treatment recommendations.</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-img"><img
src="https://images.unsplash.com/photo-1490645935967-10de6ba17061?w=600" alt="Nutrition">
</div>
<div class="service-body">
<div class="service-icon"><i class="fas fa-utensils"></i></div>
<h3>Dietary Guidance</h3>
<p>Custom nutrition plans aligned with your dosha for optimal health.</p>
<a href="#contact" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a>
</div>
</div>
<div class="service-card large">
<div class="service-body">
<div class="service-icon"><i class="fas fa-mortar-pestle"></i></div>
<h3>Herbal Medicine</h3>
<p>Custom-formulated herbal preparations using pure, organic ingredients following traditional
recipes passed down through generations.</p>
<a href="#contact" class="service-link">Learn More <i class="fas fa-arrow-right"></i></a>
</div>
<div class="service-img"><img
src="https://images.unsplash.com/photo-1471193945509-9ad0617afabf?w=800" alt="Herbal"></div>
</div>
</div>
</div>
</section>
<!-- About -->
<section id="about" class="about">
<div class="container">
<div class="about-grid">
<div class="about-visual">
<div class="about-img-1"><img
src="https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=800"
alt="Wellness center"></div>
<div class="about-img-2"><img
src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=600" alt="Therapy">
</div>
</div>
<div class="about-content">
<span class="section-tag">About Prakrti</span>
<h2>Three Decades of Healing Excellence</h2>
<p>Founded in 1992, Prakrti has been at the forefront of authentic Ayurvedic practice. Our center
combines ancient wisdom with modern understanding to deliver transformative wellness
experiences.</p>
<p>Every treatment is personalized based on your unique constitution, ensuring optimal results and
lasting benefits.</p>
<ul class="about-list">
<li><i class="fas fa-check-circle"></i> Certified Ayurvedic Practitioners</li>
<li><i class="fas fa-check-circle"></i> 100% Organic Herbal Formulations</li>
<li><i class="fas fa-check-circle"></i> Personalized Treatment Plans</li>
<li><i class="fas fa-check-circle"></i> Traditional Authentic Methods</li>
</ul>
<a href="#contact" class="btn btn-primary">Schedule Consultation</a>
</div>
</div>
</div>
</section>
<!-- Process -->
<section id="process" class="process">
<div class="container">
<div class="section-head">
<span class="section-tag">Our Process</span>
<h2>Your Wellness Journey</h2>
<p>A structured approach to ensure personalized care at every step.</p>
</div>
<div class="process-grid">
<div class="process-card">
<div class="process-num">1</div>
<h4>Consultation</h4>
<p>Comprehensive health assessment and dosha evaluation</p>
</div>
<div class="process-card">
<div class="process-num">2</div>
<h4>Planning</h4>
<p>Customized treatment protocol for your needs</p>
</div>
<div class="process-card">
<div class="process-num">3</div>
<h4>Treatment</h4>
<p>Authentic therapies by skilled practitioners</p>
</div>
<div class="process-card">
<div class="process-num">4</div>
<h4>Support</h4>
<p>Ongoing guidance and follow-up care</p>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="testimonials">
<div class="container">
<div class="section-head">
<span class="section-tag">Testimonials</span>
<h2>Client Stories</h2>
</div>
<div class="testimonials-scroll">
<div class="testimonial-card">
<div class="test-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="test-text">"The Panchakarma program transformed my health completely. The practitioners
are incredibly knowledgeable and the facility is serene."</p>
<div class="test-author">
<div class="test-avatar"><img src="https://randomuser.me/api/portraits/women/45.jpg" alt="">
</div>
<div>
<div class="test-name">Priya Sharma</div>
<div class="test-role">Wellness Program Client</div>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="test-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="test-text">"After years of digestive issues, the personalized treatment plan finally gave
me relief. Highly recommend their holistic approach."</p>
<div class="test-author">
<div class="test-avatar"><img src="https://randomuser.me/api/portraits/men/32.jpg" alt=""></div>
<div>
<div class="test-name">Arjun Patel</div>
<div class="test-role">Nutrition Client</div>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="test-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="test-text">"The Abhyanga therapy sessions have become essential to my wellness routine.
Truly rejuvenating experience every time."</p>
<div class="test-author">
<div class="test-avatar"><img src="https://randomuser.me/api/portraits/women/68.jpg" alt="">
</div>
<div>
<div class="test-name">Meera Iyer</div>
<div class="test-role">Regular Client</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact" class="contact">
<div class="container">
<div class="contact-wrap">
<div class="contact-info">
<h2>Get in Touch</h2>
<p>Schedule a consultation to begin your wellness journey with us.</p>
<ul class="contact-list">
<li><i class="fas fa-map-marker-alt"></i>
<div>123 Wellness Road, Health District<br>City Center, State 12345</div>
</li>
<li><i class="fas fa-phone-alt"></i>
<div>+1 (555) 123-4567</div>
</li>
<li><i class="fas fa-envelope"></i>
<div>info@prakrti.com</div>
</li>
<li><i class="fas fa-clock"></i>
<div>Mon-Sat: 8AM - 7PM<br>Sun: 9AM - 1PM</div>
</li>
</ul>
</div>
<form class="contact-form" id="contactForm">
<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</label><input type="email" required></div>
<div class="form-group"><label>Phone</label><input type="tel"></div>
</div>
<div class="form-group"><label>Service</label><select>
<option>Select a service</option>
<option>Panchakarma</option>
<option>Abhyanga</option>
<option>Consultation</option>
<option>Herbal Medicine</option>
</select></div>
<div class="form-group"><label>Message</label><textarea
placeholder="Tell us about your wellness goals..."></textarea></div>
<button type="submit" class="submit-btn">Request Consultation</button>
</form>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<div class="logo" style="font-size:1.6rem;">Prakrti</div>
<p>Authentic Ayurvedic healing for modern wellness. Restore balance naturally.</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-col">
<h4>Quick Links</h4>
<ul class="footer-links">
<li><a href="#home">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Services</h4>
<ul class="footer-links">
<li><a href="#">Panchakarma</a></li>
<li><a href="#">Abhyanga</a></li>
<li><a href="#">Herbal Medicine</a></li>
<li><a href="#">Nutrition</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Contact</h4>
<ul class="footer-links">
<li>123 Wellness Road</li>
<li>+1 (555) 123-4567</li>
<li>info@prakrti.com</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2026 Prakrti. All rights reserved.</p>
<div><a href="#">Privacy</a> · <a href="#">Terms</a> · <a href="#">Disclaimer</a></div>
</div>
</div>
</footer>
<script>
// Form Handler
document.getElementById('contactForm').addEventListener('submit', e => {
e.preventDefault();
alert('Thank you! We will contact you within 24 hours.');
e.target.reset();
});
// Scroll animations
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, .process-card, .testimonial-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>