File: /home/durgeshpandey215/public_html/sssenterprice.skilladress.com/src/index_old.html
<!doctype html>
<html data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./css/output.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
<body>
<nav class="p-5 lg:px-20 py-5 border-b sticky top-0 z-50 bg-white">
<div class="flex justify-between items-center">
<div><img class="w-16 h-auto object-contain" src="../assets/logoB.png" alt=""></div>
<div class="flex items-center gap-3">
<!-- <button
class="px-5 py-2 rounded-full font-semibold border-zinc-900 text-zinc-900 border-2 hover:bg-zinc-100"> Contact
Us</button> -->
<a href="tel:9152521989" class="px-5 py-2 rounded-full font-semibold bg-zinc-900 text-white flex items-center gap-2"><i class="ri-phone-fill"></i><span>Call us</span></a>
</div>
</div>
</nav>
<section>
<!-- Swiper -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide bg-slate-100 w-full h-auto lg:h-[80vh] grid place-content-center font-semibold">
<img src="../assets/slider_img1.jpg" class="w-full h-full object-cover" alt="">
</div>
<div class="swiper-slide bg-slate-100 w-full h-auto lg:h-[80vh] grid place-content-center font-semibold">
<img src="../assets/slider_img2.jpg" class="w-full h-full object-cover" alt="">
</div>
<div class="swiper-slide bg-slate-100 w-full h-auto lg:h-[80vh] grid place-content-center font-semibold">
<img src="../assets/slider_img3.jpg" class="w-full h-full object-cover" alt="">
</div>
</div>
</div>
<!-- Swiper JS -->
</section>
<section class="px-5 lg:px-20 mt-10">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-3">
<div>
<div class="md:p-10">
<img class="w-full h-full object-cover" src="../assets/img1.png" alt="">
</div>
</div>
<div class="flex flex-col justify-center gap-5 md:p-10">
<h1 class="text-2xl font-semibold">BENEFITS OF KANSYA</h1>
<p>kansya thali foot massage Therapy massaging technique makes use of small bowls or plates made of ‘kansya’ or bronze – an alloy comprising of copper, zinc and tin. This unique treatment stimulates nerve endings in our feet and optimises blood circulation. It provides relief for a number of ailments, increases the strength and stamina of legs and brings balance to the mind and body.</p>
</div>
</div>
</section>
<section class="flex justify-center my-10 lg:my-0">
<div class="lg:w-3/4 flex flex-col lg:flex-row gap-3 justify-between p-10 bg-green-50 rounded-2xl border-2 border-green-600 ">
<ul class="flex flex-col gap-3">
<li class="flex items-center gap-2"><i class="text-green-600 font-semibold ri-check-fill"></i>Balances the 3 doshas</li>
<li class="flex items-center gap-2"><i class="text-green-600 font-semibold ri-check-fill"></i>Restores & balances innate energy</li>
<li class="flex items-center gap-2"><i class="text-green-600 font-semibold ri-check-fill"></i>Improves blood circulation</li>
<li class="flex items-center gap-2"><i class="text-green-600 font-semibold ri-check-fill"></i>Improves metabolism</li>
</ul>
<ul class="flex flex-col gap-3">
<li class="flex items-center gap-2"><i class="text-green-600 font-semibold ri-check-fill"></i>Improves digestion & reduces acidity</li>
<li class="flex items-center gap-2"><i class="text-green-600 font-semibold ri-check-fill"></i>Helps detoxify internal organs</li>
<li class="flex items-center gap-2"><i class="text-green-600 font-semibold ri-check-fill"></i>Improves condition & mobility of legs</li>
<li class="flex items-center gap-2"><i class="text-green-600 font-semibold ri-check-fill"></i>Resolves varicose veins problems</li>
</ul>
<ul class="flex flex-col gap-3">
<li class="flex items-center gap-2"><i class="text-green-600 font-semibold ri-check-fill"></i>Heals cracked feet</li>
<li class="flex items-center gap-2"><i class="text-green-600 font-semibold ri-check-fill"></i>Helps reduce stress & anxiety</li>
<li class="flex items-center gap-2"><i class="text-green-600 font-semibold ri-check-fill"></i>Relieves eyestrain & dark circles</li>
<li class="flex items-center gap-2"><i class="text-green-600 font-semibold ri-check-fill"></i>Induces sound sleep & calms the body</li>
</ul>
</div>
</section>
<section class="px-5 lg:px-20">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-3">
<div class="flex flex-col justify-center gap-5 lg:p-10">
<h1 class="text-2xl font-semibold">Benefits of ayurvedic foot <br> massage with bronze plate:</h1>
<div class="flex flex-wrap gap-3">
<span class="px-4 py-2 font-semibold bg-zinc-100 text-zinc-900 rounded-full">Head</span>
<span class="px-4 py-2 font-semibold bg-zinc-100 text-zinc-900 rounded-full">Breasts</span>
<span class="px-4 py-2 font-semibold bg-zinc-100 text-zinc-900 rounded-full">Eyes</span>
<span class="px-4 py-2 font-semibold bg-zinc-100 text-zinc-900 rounded-full">Ears</span>
<span class="px-4 py-2 font-semibold bg-zinc-100 text-zinc-900 rounded-full">Shoulder</span>
<span class="px-4 py-2 font-semibold bg-zinc-100 text-zinc-900 rounded-full">Lungs – Bronchi</span>
<span class="px-4 py-2 font-semibold bg-zinc-100 text-zinc-900 rounded-full">Thyroid</span>
<span class="px-4 py-2 font-semibold bg-zinc-100 text-zinc-900 rounded-full">Heart</span>
<span class="px-4 py-2 font-semibold bg-zinc-100 text-zinc-900 rounded-full">Stomach</span>
<span class="px-4 py-2 font-semibold bg-zinc-100 text-zinc-900 rounded-full">Duodenum – Pancreas</span>
<span class="px-4 py-2 font-semibold bg-zinc-100 text-zinc-900 rounded-full">Kidney</span>
<span class="px-4 py-2 font-semibold bg-zinc-100 text-zinc-900 rounded-full">Transverse Colon</span>
<span class="px-4 py-2 font-semibold bg-zinc-100 text-zinc-900 rounded-full">Knee</span>
<span class="px-4 py-2 font-semibold bg-zinc-100 text-zinc-900 rounded-full">Bladder</span>
<span class="px-4 py-2 font-semibold bg-zinc-100 text-zinc-900 rounded-full">Ovaries, testicles</span>
<span class="px-4 py-2 font-semibold bg-zinc-100 text-zinc-900 rounded-full">Nervo Sciatic</span>
<span class="px-4 py-2 font-semibold bg-zinc-100 text-zinc-900 rounded-full">Ascending Colon</span>
<span class="px-4 py-2 font-semibold bg-zinc-100 text-zinc-900 rounded-full">Appendix</span>
<span class="px-4 py-2 font-semibold bg-zinc-100 text-zinc-900 rounded-full">Descending Colon</span>
<span class="px-4 py-2 font-semibold bg-zinc-100 text-zinc-900 rounded-full">Spleen</span>
<span class="px-4 py-2 font-semibold bg-zinc-100 text-zinc-900 rounded-full">Liver</span>
<span class="px-4 py-2 font-semibold bg-zinc-100 text-zinc-900 rounded-full">Gallbladder</span>
<span class="px-4 py-2 font-semibold bg-zinc-100 text-zinc-900 rounded-full">Duodenum</span>
<span class="px-4 py-2 font-semibold bg-zinc-100 text-zinc-900 rounded-full">Spine</span>
</div>
</div>
<div>
<div class="lg:p-10">
<img class="w-full h-full object-contain" src="../assets/img2.png" alt="">
</div>
</div>
</div>
</section>
<section>
<div class="max-w-2xl mx-auto p-4">
<div class="space-y-4">
<!-- Accordion Item 1 -->
<div class="accordion-item">
<button
class="accordion-header w-full flex justify-between items-center p-4 bg-white border border-gray-200 rounded-lg transition-all duration-300 ease-in-out"
onclick="toggleAccordion(this)"
>
<span class="font-semibold text-lg">Accordion Title 1</span>
<svg class="accordion-icon w-5 h-5 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div class="accordion-content max-h-0 overflow-hidden transition-[max-height] duration-500 ease-in-out bg-gray-50 px-4 ">
<p class="my-2">This is the content of Accordion 1. It will expand and collapse smoothly.</p>
</div>
</div>
<!-- Accordion Item 2 -->
<div class="accordion-item">
<button
class="accordion-header w-full flex justify-between items-center p-4 bg-white border border-gray-200 rounded-lg transition-all duration-300 ease-in-out"
onclick="toggleAccordion(this)"
>
<span class="font-semibold text-lg">Accordion Title 2</span>
<svg class="accordion-icon w-5 h-5 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div class="accordion-content max-h-0 overflow-hidden transition-[max-height] duration-500 ease-in-out bg-gray-50 px-4">
<p class="my-2">This is the content of Accordion 2. It will expand and collapse smoothly.</p>
</div>
</div>
</div>
</div>
</section>
<section class="my-5">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl font-extrabold text-center text-gray-900 mb-8">Leg Massage Pricing</h2>
<div class="overflow-x-auto">
<table class="min-w-full table-auto bg-white border border-gray-200 rounded-lg shadow-sm">
<thead>
<tr class="bg-gray-100">
<th class="px-6 py-3 text-left text-sm font-semibold text-gray-600 uppercase">Service</th>
<th class="px-6 py-3 text-left text-sm font-semibold text-gray-600 uppercase">Details</th>
<th class="px-6 py-3 text-left text-sm font-semibold text-gray-600 uppercase">Price</th>
</tr>
</thead>
<tbody>
<!-- One-Time Price -->
<tr class="border-t border-gray-200">
<td class="px-6 py-4 text-gray-700">One-Time Leg Massage</td>
<td class="px-6 py-4 text-gray-500">15-minute session</td>
<td class="px-6 py-4 text-gray-900 font-semibold">₹50</td>
</tr>
<!-- Monthly Subscription -->
<tr class="border-t border-gray-200">
<td class="px-6 py-4 text-gray-700">Monthly Subscription</td>
<td class="px-6 py-4 text-gray-500">Unlimited sessions, 15-minute each</td>
<td class="px-6 py-4 text-gray-900 font-semibold">₹1500</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section class="container mx-auto py-10 px-5">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Contact Form -->
<div class="bg-green-50 p-8 rounded-lg">
<h2 class="text-2xl font-semibold">Contact Us</h2>
<form action="#" method="POST" class="space-y-4">
<!-- Name -->
<div>
<label for="name" class="block text-sm font-medium text-gray-700">Name</label>
<input type="text" id="name" name="name" required class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 sm:text-sm outline-none">
</div>
<!-- Email -->
<div>
<label for="email" class="block text-sm font-medium text-gray-700">Email</label>
<input type="email" id="email" name="email" required class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 sm:text-sm outline-none">
</div>
<!-- Contact Number -->
<div>
<label for="contact" class="block text-sm font-medium text-gray-700">Contact Number</label>
<input type="text" id="contact" name="contact" required class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 sm:text-sm outline-none">
</div>
<!-- Age -->
<div>
<label for="age" class="block text-sm font-medium text-gray-700">Age</label>
<input type="number" id="age" name="age" required class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 sm:text-sm outline-none">
</div>
<!-- Message -->
<div>
<label for="message" class="block text-sm font-medium text-gray-700">Message</label>
<textarea id="message" name="message" rows="4" required class="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-green-500 focus:border-green-500 sm:text-sm outline-none"></textarea>
</div>
<!-- Submit Button -->
<div>
<button type="submit" class="w-full bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2">Submit</button>
</div>
</form>
</div>
<!-- Google Map -->
<div class="bg-white p-8 rounded-lg">
<h2 class="text-2xl font-semibold">Our Location</h2>
<div class="aspect-w-16 aspect-h-9">
<iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d3768.5715087110425!2d73.10878807381917!3d19.170224849010474!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sUrbano%20N0006%20Downtown%20Lodha%20Palava%20phace%202%20Dombivili%20East%20Pincode.421204!5e0!3m2!1sen!2sin!4v1727959803866!5m2!1sen!2sin" class="w-full" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</div>
</div>
</section>
<footer class="bg-zinc-900 pt-10 px-5 lg:px-20 text-white mt-10">
<div class="flex flex-col lg:flex-row gap-3 justify-between">
<div><img class="w-16 h-auto object-contain" src="../assets/logow.png" alt=""></div>
<div class="flex flex-col lg:flex-row gap-8">
<div>
<span class="flex items-center text-lg font-semibold gap-2"><i class="ri-phone-fill"></i>Call Us</span>
<ul>
<li class="text-zinc-500" ><a href="tel:9152521989">+91 9152521989</a></li>
<!-- <li class="text-zinc-500" ><a href="">+91 77777777777</a></li> -->
</ul>
</div>
<!-- <div>
<span class="flex items-center text-lg font-semibold gap-2"><i class="ri-mail-line"></i>Mail Us</span>
<ul>
<li class="text-zinc-500" ><a href="">hello@sssenterprise.com</a></li>
<li class="text-zinc-500" ><a href="">support@sssenterprise.com</a></li>
</ul>
</div> -->
<div>
<span class="flex items-center text-lg font-semibold gap-2"><i class="ri-map-pin-2-line"></i>Find us</span>
<ul>
<li class="text-zinc-500 max-w-80" ><a href="">Urbano N0006 Downtown Lodha Palava phace 2 Dombivili East Pincode.421204</a></li>
</ul>
</div>
</div>
</div>
<div class=" pt-5 pb-3 border-t border-zinc-700 mt-5 text-zinc-500 flex flex-col lg:flex-row gap-3 justify-between">
<span>© Copyright 2022, All Rights Reserved by SSS EnterPrise</span>
<span><a href="">Design & Developed by <b>WhizzAct Pvt Ltd</b></a></span>
</div>
</footer>
</body>
<script>
var swiper = new Swiper(".mySwiper", {});
function toggleAccordion(element) {
const content = element.nextElementSibling;
const icon = element.querySelector('.accordion-icon');
if (content.style.maxHeight) {
content.style.maxHeight = null; // Collapse
icon.classList.remove('rotate-180'); // Reset arrow icon
} else {
content.style.maxHeight = content.scrollHeight + "px"; // Expand
icon.classList.add('rotate-180'); // Rotate arrow icon
}
}
</script>
</html>