File: /home/durgeshpandey215/www/sssenterprice.skilladress.com/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homepage Template</title>
<script src="https://cdn.tailwindcss.com"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.2.0/remixicon.css"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"
/>
</head>
<body class="bg-gray-100">
<!-- Header Section -->
<header class="bg-white text-dark fixed w-full z-50">
<div class="max-w-7xl mx-auto px-4 py-4">
<div class="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
<!-- Logo -->
<div class="flex items-center space-x-2">
<img src="../assets/logoB.png" alt="Logo" class="h-11 w-10 object-cover">
</div>
<!-- Contact Info -->
<div class="flex space-x-8 items-center">
<a href="tel:9152521989" class="flex items-center space-x-2">
<i class="ri-phone-fill"></i>
<p class="text-sm">+91 915-252-1989</p>
</a>
<a class="flex items-center space-x-2" href="https://maps.app.goo.gl/uUFUMXE4f9FVXWN66">
<i class="ri-map-pin-line"></i>
<p class="text-sm">Dombivili, India</p>
</a>
</div>
</div>
</div>
</header>
<!-- Carousel (Swiper Slider) -->
<section id="home" class="relative pt-24 md:pt-[75px]">
<div class="swiper mySwiper ">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="../assets/slider_img1.jpg" alt="Slide 1" class="w-full h-70 lg:h-[80vh] object-cover">
</div>
<div class="swiper-slide">
<img src="../assets/slider_img2.jpg" alt="Slide 2" class="w-full h-70 lg:h-[80vh] object-cover">
</div>
<div class="swiper-slide">
<img src="../assets/slider_img3.jpg" alt="Slide 3" class="w-full h-70 lg:h-[80vh] object-cover">
</div>
</div>
<!-- Pagination and Navigation Arrows -->
<div class="swiper-pagination"></div>
<div class="swiper-button-next text-black text-base lg:text-2xl"></div>
<div class="swiper-button-prev text-black text-base lg:text-2xl"></div>
</div>
</section>
<!-- About Us 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 py-9 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>
<a href="#contact" class="text-base capitalize bg-black rounded-full px-5 w-1/2 text-center font-semibold py-2 text-white ">Contact us</a>
</div>
</div>
</section>
<section class="px-5 lg:px-20 bg-white pt-0 md:pt-10">
<div class="grid mt-5 md:mt-0 grid-cols-1 lg:grid-cols-2 gap-3">
<div class="flex flex-col gap-5 lg:p-10">
<h1 class="text-3xl font-semibold">Benefits of Kasya Thali </h1>
<ul class="list-decimal ps-3">
<li><span class="font-semibold text-xl">Relieves Tired Feet</span><br>Helps soothe and rejuvenate tired, achy feet.</li>
<li><span class="font-semibold text-xl">Improves Blood Circulation</span><br>Stimulates better blood flow, which is essential for overall leg health.</li>
<li><span class="font-semibold text-xl">Enhances Leg Mobility</span><br>Increases flexibility and improves range of motion in your legs.</li>
<li><span class="font-semibold text-xl">Promotes Deep Relaxation</span><br>Creates a calming effect, making you feel more relaxed and at ease.</li>
<li><span class="font-semibold text-xl">Eases Muscle Tension</span><br> Helps reduce stiffness and relaxes tight leg muscles.</li>
<li><span class="font-semibold text-xl">Induces Sleep</span><br> Encourages deep and restful sleep by relaxing the body.</li>
<li><span class="font-semibold text-xl ">Reduces Eye Strain</span><br> Provides relief from eye strain by promoting overall relaxation..</li>
<li><span class="font-semibold text-xl">Relieves Stress</span><br>Eases stress and mental fatigue, contributing to a more relaxed state of mind.</li>
</ul>
</div>
<div>
<div class="lg:p-10 mt-5 md:mt-0">
<img class="w-full h-full object-contain" src="../assets/img2.png" alt="">
</div>
</div>
</div>
</section>
<section class="bg-white py-12">
<div class="max-w-7xl mx-auto px-4 md:px-8 lg:px-12">
<h2 class="text-4xl font-bold text-center text-gray-900 mb-8">Our Benefits</h2>
<!-- Grid Layout for Benefits -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
<!-- Benefit 1 -->
<div class="p-4 bg-green-100 rounded-lg shadow-sm flex items-center content-center space-x-3">
<div class="bg-white w-9 h-9 rounded-full flex content-center items-center">
<i class="ri-check-double-line text-center text-xl px-2 text-green-600"></i>
</div>
<p class="text-base font-semibold text-green-600 ">Balances the 3 doshas</p>
</div>
<div class="p-4 bg-green-100 rounded-lg shadow-sm flex items-center content-center space-x-3">
<div class="bg-white w-9 h-9 rounded-full flex content-center items-center">
<i class="ri-check-double-line text-center text-xl px-2 text-green-600"></i>
</div>
<p class="text-base font-semibold text-green-600 ">Restores & balances innate energy</p>
</div>
<div class="p-4 bg-green-100 rounded-lg shadow-sm flex items-center content-center space-x-3">
<div class="bg-white w-9 h-9 rounded-full flex content-center items-center">
<i class="ri-check-double-line text-center text-xl px-2 text-green-600"></i>
</div>
<p class="text-base font-semibold text-green-600 ">Improves blood circulation</p>
</div>
<div class="p-4 bg-green-100 rounded-lg shadow-sm flex items-center content-center space-x-3">
<div class="bg-white w-9 h-9 rounded-full flex content-center items-center">
<i class="ri-check-double-line text-center text-xl px-2 text-green-600"></i>
</div>
<p class="text-base font-semibold text-green-600 ">Improves metabolism</p>
</div>
<div class="p-4 bg-green-100 rounded-lg shadow-sm flex items-center content-center space-x-3">
<div class="bg-white w-9 h-9 rounded-full flex content-center items-center">
<i class="ri-check-double-line text-center text-xl px-2 text-green-600"></i>
</div>
<p class="text-base font-semibold text-green-600 ">Improves digestion & reduces acidity</p>
</div>
<div class="p-4 bg-green-100 rounded-lg shadow-sm flex items-center content-center space-x-3">
<div class="bg-white w-9 h-9 rounded-full flex content-center items-center">
<i class="ri-check-double-line text-center text-xl px-2 text-green-600"></i>
</div>
<p class="text-base font-semibold text-green-600 ">Helps detoxify internal organs</p>
</div>
<div class="p-4 bg-green-100 rounded-lg shadow-sm flex items-center content-center space-x-3">
<div class="bg-white w-9 h-9 rounded-full flex content-center items-center">
<i class="ri-check-double-line text-center text-xl px-2 text-green-600"></i>
</div>
<p class="text-base font-semibold text-green-600 ">Improves condition & mobility of legs</p>
</div>
<div class="p-4 bg-green-100 rounded-lg shadow-sm flex items-center content-center space-x-3">
<div class="bg-white w-9 h-9 rounded-full flex content-center items-center">
<i class="ri-check-double-line text-center text-xl px-2 text-green-600"></i>
</div>
<p class="text-base font-semibold text-green-600 ">Resolves varicose veins problems</p>
</div>
<div class="p-4 bg-green-100 rounded-lg shadow-sm flex items-center content-center space-x-3">
<div class="bg-white w-9 h-9 rounded-full flex content-center items-center">
<i class="ri-check-double-line text-center text-xl px-2 text-green-600"></i>
</div>
<p class="text-base font-semibold text-green-600 ">Heals cracked feet</p>
</div>
<div class="p-4 bg-green-100 rounded-lg shadow-sm flex items-center content-center space-x-3">
<div class="bg-white w-9 h-9 rounded-full flex content-center items-center">
<i class="ri-check-double-line text-center text-xl px-2 text-green-600"></i>
</div>
<p class="text-base font-semibold text-green-600 ">Helps reduce stress & anxiety</p>
</div>
<div class="p-4 bg-green-100 rounded-lg shadow-sm flex items-center content-center space-x-3">
<div class="bg-white w-9 h-9 rounded-full flex content-center items-center">
<i class="ri-check-double-line text-center text-xl px-2 text-green-600"></i>
</div>
<p class="text-base font-semibold text-green-600 ">Relieves eyestrain & dark circles</p>
</div>
<div class="p-4 bg-green-100 rounded-lg shadow-sm flex items-center content-center space-x-3">
<div class="bg-white w-9 h-9 rounded-full flex content-center items-center">
<i class="ri-check-double-line text-center text-xl px-2 text-green-600"></i>
</div>
<p class="text-base font-semibold text-green-600 ">Induces sound sleep & calms the body</p>
</div>
</div>
</div>
</section>
<section class="container bg-white mx-auto py-10 px-5">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div >
<h1 class="text-2xl font-semibold mb-7">FAQ</h1>
<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>
<div >
<div class="max-w-4xl mx-auto">
<h1 class="text-2xl font-semibold mb-7">Leg Massage Pricing</h1>
<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-green-100">
<th class="px-6 py-3 text-left text-sm font-semibold text-green-600 uppercase">Service</th>
<th class="px-6 py-3 text-left text-sm font-semibold text-green-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-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-900 font-semibold">₹1500</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
<section class="py-12 bg-white">
<div class="max-w-7xl mx-auto px-4 md:px-8">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- First Section: Contact Form -->
<div>
<h2 class="text-2xl font-semibold mb-7">Contact Us</h2>
<!-- Contact Form -->
<form class="space-y-6">
<!-- Name Field -->
<div>
<label for="name" class="block text-lg font-medium text-gray-700 mb-1">Name</label>
<input type="text" id="name" name="name" placeholder="Enter your name" class="w-full px-4 py-2 border border-green-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500">
</div>
<!-- Email Field -->
<div>
<label for="email" class="block text-lg font-medium text-gray-700 mb-1">Email</label>
<input type="email" id="email" name="email" placeholder="Enter your email" class="w-full px-4 py-2 border border-green-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500">
</div>
<!-- Phone Field -->
<div>
<label for="phone" class="block text-lg font-medium text-gray-700 mb-1">Phone</label>
<input type="tel" id="phone" name="phone" placeholder="Enter your phone number" class="w-full px-4 py-2 border border-green-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500">
</div>
<!-- Age Field -->
<div>
<label for="age" class="block text-lg font-medium text-gray-700 mb-1">Age</label>
<input type="number" id="age" name="age" placeholder="Enter your age" class="w-full px-4 py-2 border border-green-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500">
</div>
<!-- Message Field -->
<div>
<label for="message" class="block text-lg font-medium text-gray-700 mb-1">Message</label>
<textarea id="message" name="message" rows="4" placeholder="Write your message here" class="w-full px-4 py-2 border border-green-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-green-500"></textarea>
</div>
<!-- Submit Button -->
<div class="text-center">
<button type="submit" class="px-6 py-3 bg-green-600 text-white text-lg font-semibold rounded-lg hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500">
Submit
</button>
</div>
</form>
</div>
<!-- Second Section: Empty Space -->
<div class="bg-gray-50 flex items-center justify-center rounded-lg shadow-md">
<!-- Empty Space for future content -->
<img src="../assets/woman-having-pain-knee-female-hands-holding-her-knee-with-highlighted-instability-swelling_1219450-1263.jpg" alt="" srcset="" class="h-full rounded-xl object-cover">
</div>
</div>
</div>
</section>
<section class="bg-white">
<div class="container mx-auto ">
<h2 class="text-center text-3xl font-bold mb-6 pt-6 ">Find Us on the Map</h2>
<div class="relative w-full h-80">
<iframe class="absolute top-0 left-0 w-full h-full border-0"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.5148264815694!2d144.9648733154134!3d-37.8182719797517!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0x5045675218ce6e0!2sMelbourne%20VIC%2C%20Australia!5e0!3m2!1sen!2sin!4v1632667736748!5m2!1sen!2sin"
allowfullscreen="" loading="lazy"></iframe>
</div>
</div>
</section>
<!-- Footer Section -->
<footer class="bg-zinc-900 pt-10 px-5 lg:px-20 text-white ">
<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>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper(".mySwiper", {
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
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>
</body>
</html>