HTML
1794 lines
58.8 KB
Veda Naturals | Ancient Ayurvedic Wisdom for Modern Living
Discover authentic Ayurvedic wellness solutions and natural healing therapies at Veda Naturals.
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="Discover authentic Ayurvedic wellness solutions and natural healing therapies at Veda Naturals.">
<title>Veda Naturals | Ancient Ayurvedic Wisdom for Modern Living</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=Cormorant+Garamond:wght@400;500;600;700&family=Nunito+Sans: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: #4a6741;
--primary-dark: #3a5234;
--secondary: #d4a574;
--accent: #8b5a2b;
--cream: #faf7f2;
--sand: #e8dfd3;
--dark: #2c2c2c;
--light: #f5f5f5;
--white: #ffffff;
--text: #444444;
--text-light: #666666;
--gradient-primary: linear-gradient(135deg, #4a6741 0%, #6b8e5e 100%);
--gradient-gold: linear-gradient(135deg, #d4a574 0%, #c9956a 100%);
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
--shadow-md: 0 4px 20px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.12);
--transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Nunito Sans', sans-serif;
color: var(--text);
background-color: var(--cream);
line-height: 1.7;
overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
color: var(--dark);
line-height: 1.3;
}
a {
text-decoration: none;
color: inherit;
}
img {
max-width: 100%;
height: auto;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
/* Navigation */
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(250, 247, 242, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
padding: 1.2rem 0;
z-index: 1000;
transition: var(--transition);
}
.navbar.scrolled {
padding: 0.8rem 0;
box-shadow: var(--shadow-sm);
}
.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: 45px;
height: 45px;
background: var(--gradient-primary);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 1.2rem;
}
.logo-text {
font-family: 'Cormorant Garamond', serif;
font-size: 1.6rem;
font-weight: 700;
color: var(--primary);
letter-spacing: 1px;
}
.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: var(--transition);
}
.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: var(--gradient-primary);
color: var(--white);
padding: 0.8rem 1.8rem;
border-radius: 30px;
font-weight: 600;
font-size: 0.9rem;
transition: var(--transition);
box-shadow: 0 4px 15px rgba(74, 103, 65, 0.3);
}
.nav-cta:hover {
transform: translateY(-2px);
box-shadow: 0 6px 25px rgba(74, 103, 65, 0.4);
}
.mobile-toggle {
display: none;
background: none;
border: none;
font-size: 1.5rem;
color: var(--dark);
cursor: pointer;
}
/* Hero Section */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
position: relative;
padding-top: 80px;
overflow: hidden;
}
.hero-bg {
position: absolute;
top: 0;
right: 0;
width: 55%;
height: 100%;
background: url('https://images.unsplash.com/photo-1512290923902-8a9f81dc236c?w=1200') center/cover;
clip-path: polygon(15% 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, 247, 242, 0) 30%);
}
.hero-content {
position: relative;
z-index: 10;
max-width: 600px;
padding: 4rem 0;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--sand);
padding: 0.5rem 1.2rem;
border-radius: 30px;
font-size: 0.85rem;
font-weight: 600;
color: var(--accent);
margin-bottom: 2rem;
}
.hero-badge i {
font-size: 0.8rem;
}
.hero h1 {
font-size: clamp(2.5rem, 5vw, 4rem);
margin-bottom: 1.5rem;
line-height: 1.2;
}
.hero h1 span {
color: var(--primary);
}
.hero p {
font-size: 1.15rem;
color: var(--text-light);
margin-bottom: 2.5rem;
max-width: 500px;
}
.hero-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.btn {
padding: 1rem 2rem;
border-radius: 50px;
font-weight: 600;
font-size: 0.95rem;
transition: var(--transition);
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.btn-primary {
background: var(--gradient-primary);
color: var(--white);
box-shadow: 0 4px 20px rgba(74, 103, 65, 0.35);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(74, 103, 65, 0.45);
}
.btn-outline {
border: 2px solid var(--primary);
color: var(--primary);
background: transparent;
}
.btn-outline:hover {
background: var(--primary);
color: var(--white);
}
/* Floating Elements */
.floating-leaf {
position: absolute;
opacity: 0.15;
animation: float 6s ease-in-out infinite;
}
.floating-leaf:nth-child(1) {
top: 20%;
left: 5%;
font-size: 3rem;
animation-delay: 0s;
}
.floating-leaf:nth-child(2) {
bottom: 25%;
left: 8%;
font-size: 2rem;
animation-delay: 2s;
}
@keyframes float {
0%,
100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(5deg);
}
}
/* Features Bar */
.features-bar {
background: var(--white);
padding: 4rem 0;
margin-top: -50px;
position: relative;
z-index: 20;
border-radius: 20px;
margin-left: 3rem;
margin-right: 3rem;
box-shadow: var(--shadow-lg);
}
.features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
.feature-item {
text-align: center;
padding: 1rem;
}
.feature-icon {
width: 70px;
height: 70px;
background: var(--cream);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.2rem;
font-size: 1.8rem;
color: var(--primary);
transition: var(--transition);
}
.feature-item:hover .feature-icon {
background: var(--gradient-primary);
color: var(--white);
transform: scale(1.1);
}
.feature-item h4 {
font-size: 1.1rem;
margin-bottom: 0.5rem;
}
.feature-item p {
font-size: 0.9rem;
color: var(--text-light);
}
/* About Section */
.about {
padding: 8rem 0;
background: var(--cream);
}
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
align-items: center;
}
.about-images {
position: relative;
}
.about-img-main {
width: 85%;
border-radius: 20px;
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.about-img-main img {
width: 100%;
height: 500px;
object-fit: cover;
display: block;
}
.about-img-secondary {
position: absolute;
bottom: -40px;
right: 0;
width: 55%;
border-radius: 20px;
overflow: hidden;
box-shadow: var(--shadow-lg);
border: 6px solid var(--white);
}
.about-img-secondary img {
width: 100%;
height: 280px;
object-fit: cover;
display: block;
}
.about-badge {
position: absolute;
top: -20px;
right: 20%;
background: var(--gradient-gold);
color: var(--white);
padding: 1.2rem;
border-radius: 15px;
text-align: center;
box-shadow: var(--shadow-md);
}
.about-badge .number {
font-family: 'Cormorant Garamond', serif;
font-size: 2.5rem;
font-weight: 700;
line-height: 1;
}
.about-badge .label {
font-size: 0.85rem;
font-weight: 600;
}
.about-content .section-label {
display: inline-block;
color: var(--secondary);
font-weight: 700;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 1rem;
}
.about-content h2 {
font-size: 2.8rem;
margin-bottom: 1.5rem;
}
.about-content .lead {
font-size: 1.1rem;
color: var(--text-light);
margin-bottom: 2rem;
}
.about-features {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-bottom: 2rem;
}
.about-feature {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.about-feature i {
width: 40px;
height: 40px;
background: var(--cream);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
font-size: 1rem;
flex-shrink: 0;
}
.about-feature h5 {
font-size: 1rem;
margin-bottom: 0.3rem;
}
.about-feature p {
font-size: 0.9rem;
color: var(--text-light);
}
/* Services Section */
.services {
padding: 8rem 0;
background: var(--white);
}
.section-header {
text-align: center;
max-width: 700px;
margin: 0 auto 4rem;
}
.section-header .section-label {
display: inline-block;
color: var(--secondary);
font-weight: 700;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 1rem;
}
.section-header h2 {
font-size: 2.8rem;
margin-bottom: 1rem;
}
.section-header p {
color: var(--text-light);
font-size: 1.1rem;
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
}
.service-card {
background: var(--cream);
border-radius: 20px;
overflow: hidden;
transition: var(--transition);
position: relative;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
}
.service-image {
height: 220px;
overflow: hidden;
}
.service-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.service-card:hover .service-image img {
transform: scale(1.1);
}
.service-content {
padding: 2rem;
}
.service-icon {
width: 55px;
height: 55px;
background: var(--gradient-primary);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
font-size: 1.4rem;
margin-top: -50px;
position: relative;
box-shadow: var(--shadow-md);
}
.service-content h3 {
font-size: 1.4rem;
margin: 1rem 0 0.8rem;
}
.service-content p {
color: var(--text-light);
font-size: 0.95rem;
margin-bottom: 1.2rem;
}
.service-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--primary);
font-weight: 600;
font-size: 0.9rem;
transition: var(--transition);
}
.service-link:hover {
gap: 0.8rem;
}
/* Process Section */
.process {
padding: 8rem 0;
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
color: var(--white);
position: relative;
overflow: hidden;
}
.process::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=1600') center/cover;
opacity: 0.1;
}
.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.8);
}
.process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
position: relative;
z-index: 2;
}
.process-card {
text-align: center;
padding: 2rem 1.5rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.15);
transition: var(--transition);
}
.process-card:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-5px);
}
.process-number {
width: 60px;
height: 60px;
background: var(--gradient-gold);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
font-family: 'Cormorant Garamond', serif;
font-size: 1.8rem;
font-weight: 700;
color: var(--white);
}
.process-card h4 {
color: var(--white);
font-size: 1.3rem;
margin-bottom: 0.8rem;
}
.process-card p {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.7);
}
/* Testimonials Section */
.testimonials {
padding: 8rem 0;
background: var(--cream);
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2.5rem;
}
.testimonial-card {
background: var(--white);
padding: 2.5rem;
border-radius: 20px;
box-shadow: var(--shadow-sm);
transition: var(--transition);
}
.testimonial-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-5px);
}
.testimonial-rating {
color: var(--secondary);
margin-bottom: 1.2rem;
}
.testimonial-text {
font-size: 1rem;
color: var(--text);
font-style: italic;
margin-bottom: 1.5rem;
line-height: 1.8;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 1rem;
}
.author-avatar {
width: 55px;
height: 55px;
border-radius: 50%;
overflow: hidden;
}
.author-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.author-info h5 {
font-size: 1rem;
margin-bottom: 0.2rem;
}
.author-info p {
font-size: 0.85rem;
color: var(--text-light);
}
/* Contact Section */
.contact {
padding: 8rem 0;
background: var(--white);
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 4rem;
align-items: stretch;
}
.contact-info h2 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
}
.contact-info .lead {
color: var(--text-light);
margin-bottom: 2.5rem;
font-size: 1.05rem;
}
.contact-details {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.contact-item {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.contact-item-icon {
width: 50px;
height: 50px;
background: var(--cream);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary);
font-size: 1.2rem;
flex-shrink: 0;
}
.contact-item h5 {
font-size: 1rem;
margin-bottom: 0.3rem;
}
.contact-item p {
color: var(--text-light);
font-size: 0.95rem;
}
.contact-form-card {
background: var(--cream);
padding: 3rem;
border-radius: 25px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--dark);
font-size: 0.95rem;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 1rem 1.2rem;
border: 2px solid var(--sand);
border-radius: 12px;
font-family: 'Nunito Sans', sans-serif;
font-size: 1rem;
transition: var(--transition);
background: var(--white);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary);
}
.form-group textarea {
min-height: 120px;
resize: vertical;
}
.submit-btn {
width: 100%;
padding: 1.1rem 2rem;
background: var(--gradient-primary);
color: var(--white);
border: none;
border-radius: 12px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: var(--transition);
}
.submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 25px rgba(74, 103, 65, 0.4);
}
/* Footer */
.footer {
background: var(--dark);
color: var(--white);
padding: 5rem 0 2rem;
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 3rem;
margin-bottom: 4rem;
}
.footer-brand .logo {
margin-bottom: 1.5rem;
}
.footer-brand .logo-text {
color: var(--white);
}
.footer-brand p {
color: rgba(255, 255, 255, 0.7);
margin-bottom: 1.5rem;
font-size: 0.95rem;
}
.footer-social {
display: flex;
gap: 1rem;
}
.footer-social a {
width: 42px;
height: 42px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
transition: var(--transition);
}
.footer-social a:hover {
background: var(--secondary);
transform: translateY(-3px);
}
.footer-column h4 {
color: var(--white);
font-size: 1.2rem;
margin-bottom: 1.5rem;
position: relative;
padding-bottom: 0.8rem;
}
.footer-column h4::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 2px;
background: var(--secondary);
}
.footer-links {
list-style: none;
}
.footer-links li {
margin-bottom: 0.8rem;
}
.footer-links a {
color: rgba(255, 255, 255, 0.7);
transition: var(--transition);
font-size: 0.95rem;
}
.footer-links a:hover {
color: var(--secondary);
padding-left: 5px;
}
.footer-contact p {
display: flex;
align-items: flex-start;
gap: 0.8rem;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 1rem;
font-size: 0.95rem;
}
.footer-contact i {
color: var(--secondary);
margin-top: 0.2rem;
}
.footer-bottom {
padding-top: 2rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.footer-bottom p {
color: rgba(255, 255, 255, 0.5);
font-size: 0.9rem;
}
.footer-legal {
display: flex;
gap: 2rem;
}
.footer-legal a {
color: rgba(255, 255, 255, 0.5);
font-size: 0.9rem;
transition: var(--transition);
}
.footer-legal a:hover {
color: var(--secondary);
}
/* Responsive Design */
@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.2;
}
.hero-content {
max-width: 100%;
text-align: center;
}
.hero p {
margin-left: auto;
margin-right: auto;
}
.hero-buttons {
justify-content: center;
}
.features-bar {
margin: -30px 1.5rem 0;
}
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
.about-grid,
.contact-grid {
grid-template-columns: 1fr;
gap: 3rem;
}
.about-images {
max-width: 500px;
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: 2rem;
gap: 1.5rem;
box-shadow: var(--shadow-lg);
transform: translateY(-150%);
transition: var(--transition);
}
.nav-menu.active {
transform: translateY(0);
}
.nav-cta {
display: none;
}
.features-grid,
.services-grid,
.testimonials-grid,
.process-grid {
grid-template-columns: 1fr;
}
.form-row {
grid-template-columns: 1fr;
}
.about-features {
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: 2rem;
}
.section-header h2,
.about-content h2 {
font-size: 2rem;
}
.features-bar {
margin: 0 1rem;
padding: 2rem 1rem;
}
.contact-form-card {
padding: 2rem 1.5rem;
}
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="nav-container">
<a href="#" class="logo">
<div class="logo-icon">
<i class="fas fa-leaf"></i>
</div>
<span class="logo-text">Veda Naturals</span>
</a>
<button class="mobile-toggle" aria-label="Toggle menu">
<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">Our 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>
<!-- Hero Section -->
<section id="home" class="hero">
<div class="floating-leaf"><i class="fas fa-leaf"></i></div>
<div class="floating-leaf"><i class="fas fa-seedling"></i></div>
<div class="hero-bg"></div>
<div class="container">
<div class="hero-content">
<div class="hero-badge">
<i class="fas fa-certificate"></i>
Authentic Ayurvedic Practice Since 1985
</div>
<h1>Discover the <span>Ancient Wisdom</span> of Natural Healing</h1>
<p>Experience holistic wellness through time-tested Ayurvedic therapies. Our certified practitioners
create personalized treatment plans to restore balance, vitality, and inner harmony.</p>
<div class="hero-buttons">
<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">
Explore Services
</a>
</div>
</div>
</div>
</section>
<!-- Features Bar -->
<section class="features-bar">
<div class="container">
<div class="features-grid">
<div class="feature-item">
<div class="feature-icon">
<i class="fas fa-leaf"></i>
</div>
<h4>100% Natural</h4>
<p>Pure herbal formulations</p>
</div>
<div class="feature-item">
<div class="feature-icon">
<i class="fas fa-user-md"></i>
</div>
<h4>Expert Practitioners</h4>
<p>Certified Ayurvedic doctors</p>
</div>
<div class="feature-item">
<div class="feature-icon">
<i class="fas fa-heart"></i>
</div>
<h4>Holistic Approach</h4>
<p>Mind, body & spirit balance</p>
</div>
<div class="feature-item">
<div class="feature-icon">
<i class="fas fa-shield-alt"></i>
</div>
<h4>Safe Treatments</h4>
<p>No harmful side effects</p>
</div>
</div>
</div>
</section>
<!-- About 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 session">
</div>
<div class="about-img-secondary">
<img src="https://images.unsplash.com/photo-1600334129128-685c5582fd35?w=600"
alt="Natural herbal remedies">
</div>
<div class="about-badge">
<div class="number">38+</div>
<div class="label">Years of Excellence</div>
</div>
</div>
<div class="about-content">
<span class="section-label">About Veda Naturals</span>
<h2>A Legacy of Traditional Healing & Modern Wellness</h2>
<p class="lead">For nearly four decades, we have been dedicated to preserving and sharing the
profound wisdom of Ayurveda. Our center combines ancient healing traditions with contemporary
understanding to offer transformative wellness experiences.</p>
<div class="about-features">
<div class="about-feature">
<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-feature">
<i class="fas fa-check-circle"></i>
<div>
<h5>Traditional Methods</h5>
<p>Authentic practices from ancient texts</p>
</div>
</div>
<div class="about-feature">
<i class="fas fa-check-circle"></i>
<div>
<h5>Natural Ingredients</h5>
<p>Carefully sourced organic herbs</p>
</div>
</div>
<div class="about-feature">
<i class="fas fa-check-circle"></i>
<div>
<h5>Lasting Results</h5>
<p>Focus on root cause, 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>
<!-- Services Section -->
<section id="services" class="services">
<div class="container">
<div class="section-header">
<span class="section-label">Our Services</span>
<h2>Comprehensive Ayurvedic Wellness Programs</h2>
<p>Explore our range of traditional therapies designed to address various health concerns and promote
overall well-being.</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 therapy">
</div>
<div class="service-content">
<div class="service-icon">
<i class="fas fa-spa"></i>
</div>
<h3>Panchakarma Therapy</h3>
<p>A comprehensive five-step detoxification and rejuvenation program that cleanses the body of
accumulated toxins and restores natural balance.</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 remedies">
</div>
<div class="service-content">
<div class="service-icon">
<i class="fas fa-mortar-pestle"></i>
</div>
<h3>Herbal Medicine</h3>
<p>Custom-formulated herbal preparations using time-tested Ayurvedic recipes to address specific
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-1515377905703-c4788e51af15?w=600"
alt="Wellness 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 (Prakriti) and current health status to create
personalized wellness 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="Abhyanga 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 performed by skilled therapists to promote circulation,
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 consultation">
</div>
<div class="service-content">
<div class="service-icon">
<i class="fas fa-utensils"></i>
</div>
<h3>Nutritional Guidance</h3>
<p>Personalized dietary recommendations based on your dosha type, seasonal variations, and
individual health 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 therapy">
</div>
<div class="service-content">
<div class="service-icon">
<i class="fas fa-om"></i>
</div>
<h3>Yoga & Meditation</h3>
<p>Complementary practices including yoga postures, breathing exercises, and meditation
techniques 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>
<!-- Process Section -->
<section id="process" class="process">
<div class="container">
<div class="section-header">
<span class="section-label">How It Works</span>
<h2>Your Path to Wellness</h2>
<p>Our structured approach ensures you receive personalized care at every step of your healing journey.
</p>
</div>
<div class="process-grid">
<div class="process-card">
<div class="process-number">1</div>
<h4>Initial Consultation</h4>
<p>Meet with our practitioners for a comprehensive health assessment and dosha evaluation.</p>
</div>
<div class="process-card">
<div class="process-number">2</div>
<h4>Personalized Plan</h4>
<p>Receive a customized treatment protocol designed specifically for your unique needs.</p>
</div>
<div class="process-card">
<div class="process-number">3</div>
<h4>Treatment Phase</h4>
<p>Experience authentic Ayurvedic therapies administered by our skilled practitioners.</p>
</div>
<div class="process-card">
<div class="process-number">4</div>
<h4>Ongoing Support</h4>
<p>Continue your wellness journey with lifestyle guidance and follow-up consultations.</p>
</div>
</div>
</div>
</section>
<!-- Testimonials 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 the profound benefits of 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">"After years of struggling with chronic fatigue, the Panchakarma program
at Veda Naturals completely transformed my energy levels. The practitioners are incredibly
knowledgeable and caring."</p>
<div class="testimonial-author">
<div class="author-avatar">
<img src="https://randomuser.me/api/portraits/women/45.jpg" alt="Priya M.">
</div>
<div class="author-info">
<h5>Priya M.</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 I received helped resolve digestive issues I 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 K.">
</div>
<div class="author-info">
<h5>Rajesh K.</h5>
<p>Nutrition Consultation 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 Abhyanga therapy sessions have become an essential part of 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 S.">
</div>
<div class="author-info">
<h5>Anita S.</h5>
<p>Regular Client, 3 Years</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact 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 Today</h2>
<p class="lead">Schedule a consultation with our experienced practitioners to discuss your health
goals and learn 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@vedanaturals.com<br>appointments@vedanaturals.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 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="email">Email Address</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="phone">Phone Number</label>
<input type="tel" id="phone" name="phone">
</div>
</div>
<div class="form-group">
<label for="service">Service of Interest</label>
<select id="service" name="service">
<option value="">Select a service</option>
<option value="consultation">Initial Consultation</option>
<option value="panchakarma">Panchakarma Therapy</option>
<option value="abhyanga">Abhyanga Therapy</option>
<option value="nutrition">Nutritional Guidance</option>
<option value="herbal">Herbal Medicine</option>
<option value="yoga">Yoga & Meditation</option>
</select>
</div>
<div class="form-group">
<label for="message">Your Message</label>
<textarea id="message" name="message"
placeholder="Tell us about your health concerns or questions..."></textarea>
</div>
<button type="submit" class="submit-btn">
Request Consultation <i class="fas fa-paper-plane"></i>
</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<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-leaf"></i>
</div>
<span class="logo-text">Veda Naturals</span>
</div>
<p>Dedicated to preserving authentic Ayurvedic traditions while providing personalized wellness
solutions for modern living. Your journey to holistic health begins here.</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">Our Services</a></li>
<li><a href="#process">Treatment Process</a></li>
<li><a href="#testimonials">Client Stories</a></li>
<li><a href="#contact">Contact Us</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 Therapy</a></li>
<li><a href="#">Nutrition Guidance</a></li>
<li><a href="#">Yoga Programs</a></li>
</ul>
</div>
<div class="footer-column footer-contact">
<h4>Contact Info</h4>
<p><i class="fas fa-map-marker-alt"></i> 123 Wellness Avenue, City Center</p>
<p><i class="fas fa-phone-alt"></i> +1 (555) 123-4567</p>
<p><i class="fas fa-envelope"></i> info@vedanaturals.com</p>
<p><i class="fas fa-clock"></i> Mon-Sat: 8AM - 7PM</p>
</div>
</div>
<div class="footer-bottom">
<p>© 2026 Veda Naturals. All rights reserved. This website is for informational purposes only.</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>
// Mobile Navigation Toggle
const mobileToggle = document.querySelector('.mobile-toggle');
const navMenu = document.querySelector('.nav-menu');
mobileToggle.addEventListener('click', () => {
navMenu.classList.toggle('active');
const icon = mobileToggle.querySelector('i');
icon.classList.toggle('fa-bars');
icon.classList.toggle('fa-times');
});
// Navbar Scroll Effect
const navbar = document.querySelector('.navbar');
window.addEventListener('scroll', () => {
if (window.scrollY > 50) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});
// Smooth Scroll for Navigation Links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
const offsetTop = target.offsetTop - 80;
window.scrollTo({
top: offsetTop,
behavior: 'smooth'
});
// Close mobile menu if open
navMenu.classList.remove('active');
const icon = mobileToggle.querySelector('i');
icon.classList.add('fa-bars');
icon.classList.remove('fa-times');
}
});
});
// Form Submission Handler
const form = document.getElementById('consultationForm');
form.addEventListener('submit', (e) => {
e.preventDefault();
const formData = new FormData(form);
const data = Object.fromEntries(formData);
console.log('Form submitted:', data);
alert('Thank you for your enquiry! Our team will contact you within 24 hours to schedule your consultation.');
form.reset();
});
// Scroll Animation for Cards
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);
document.querySelectorAll('.service-card, .testimonial-card, .process-card').forEach(card => {
card.style.opacity = '0';
card.style.transform = 'translateY(30px)';
card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(card);
});
</script>
</body>
</html>