File: /home/durgeshpandey215/public_html/demokalyani.skilladders.com/view/category-home.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title class="product-name">All Categories</title>
<link rel="icon" type="image/png" href="../public/fabicon.png">
<link rel="stylesheet" href="../src/assests/css/style.css">
<link rel="stylesheet" href="../src/assests/css/output.css">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/remixicon/4.2.0/remixicon.css"
referrerpolicy="no-referrer"
/>
<style>
.text-outline {
-webkit-text-stroke: 2px rgb(254, 141, 42); /* Outline effect */
color: transparent; /* Hide fill color */
text-shadow: none; /* Ensure no additional shadow */
}
#preloader {
transition: opacity 0.5s ease, visibility 0.5s ease;
}
</style>
</head>
<body class="w-full h-full box-border overflow-x-hidden">
<div id="preloader" class="fixed inset-0 bg-white flex flex-col items-center justify-center z-50">
<div class="w-12 h-12 border-4 border-orange-500 border-t-transparent rounded-full animate-spin mb-4"></div>
<p class="text-gray-700 text-lg font-semibold">Loading...</p>
</div>
<main class="max-w-[1980px] max-xl:w-full m-[0px_auto] max-sm:w-full">
<header>
<div class=" bg-black">
<div class="h-[50px] w-full text-white m-auto px-[50px] hidden md:flex items-center justify-between">
<div class="flex space-x-[21.75px] mt-0 text-lg 2xl:text-2xl">
<a href="#"><i class="ri-facebook-circle-fill text-white"></i></a>
<a href="#"><i class="ri-instagram-fill"></i></a>
<a href="#"><i class="ri-linkedin-fill"></i></a>
<a href="#"><i class="ri-twitter-fill"></i></a>
</div>
<div class="space-x-3">
<a href="" class="text-white text-sm font-medium"><i class="ri-mail-line pr-2"></i><span>info@kalyanilimited.com</span></a>
<a href="" class="text-white text-sm font-medium"><i class="ri-whatsapp-line pr-2"></i><span>+9174895262</span></a>
<a href="" class="text-white text-sm font-medium"><i class="ri-phone-line pr-2"></i><span>+917270992000</span></a>
</div>
</div>
</div>
<nav class="bg-white py-3 px-4 md:py-6 md:px-8 w-full 2xl:h-[139.39px] m-auto">
<div class="flex justify-between items-center">
<a class="w-[100px] md:w-[140px] 2xl:w-[187.5px] h-auto inline-block object-contain" href="/index.html">
<img class="h-full w-full" src="../public/logo-nav.png" alt="" />
</a>
<ul class="hidden xl:flex gap-6 py-1 px-5 rounded-full">
<li class="font-medium md:text-sm 2xl:text-base text-zinc-500 nav-link md:pt-[2px] xl:pt-0" data-link="/index.html"><a href="/index.html" class="inline-block">Home</a></li>
<li class="relative group font-medium">
<a href="#" class="inline-flex items-center font-medium md:text-sm 2xl:text-base text-zinc-500">
About Kalyani
<span class="ms-[2px]">
<i class="ri-arrow-down-s-line"></i>
</span>
</a>
<ul class="absolute hidden z-30 group-hover:block capitalize hover:block bg-white text-black mt-0 rounded-lg shadow-lg w-60 ">
<!-- Categories will be dynamically inserted here -->
<li><a href="/view/about/aboutcompany.html" class="block px-4 py-2 hover:bg-orange-50">Company Profile</a></li>
<li><a href="/view/about/certificate.html" class="block px-4 py-2 hover:bg-orange-50">Certificate and Membership</a></li>
<li><a href="/view/about/about.html" class="block px-4 py-2 hover:bg-orange-50">Quality policy</a></li>
<li><a href="/view/about/aboutcooprate.html" class="block px-4 py-2 hover:bg-orange-50">Corporate video</a></li>
</ul>
</li>
<li class="relative group/cat font-medium">
<button class=" font-medium flex text-zinc-500 rounded">
<a href="/view/category-home.html">
Our Products
</a>
<span class="ms-[2px]">
<i class="ri-arrow-down-s-line"></i>
</span>
</button>
<ul class="absolute left-0 w-60 bg-white shadow-lg rounded opacity-0 invisible group-hover/cat:opacity-100 group-hover/cat:visible transition duration-200 z-50 categorylist">
</ul>
</li>
<li class="relative group font-medium">
<a href="#" class="inline-flex items-center font-medium md:text-sm 2xl:text-base text-zinc-500">
Business Area
<span class="ms-[2px]">
<i class="ri-arrow-down-s-line"></i>
</span>
</a>
<ul class="absolute hidden z-30 group-hover:block hover:block bg-white text-black mt-0 rounded-lg shadow-lg w-60">
<li><a href="/view/business/domistic_board.html" class="block px-4 py-2 hover:bg-orange-50">Domestic Brand Business</a></li>
<li><a href="/view/business/institution.html" class="block px-4 py-2 hover:bg-orange-50">Institutional Business</a></li>
<li><a href="/view/business/international.html" class="block px-4 py-2 hover:bg-orange-50"> International Business</a></li>
<li><a href="/view/business/manufacture.html" class="block px-4 py-2 hover:bg-orange-50">Contract Manufacturing</a></li>
<li><a href="/view/business/kalyanigrow.html" class="block px-4 py-2 hover:bg-orange-50">Grow with Kalyani</a></li>
<!-- <li><a href="/view/business/domistic_board.html" class="block px-4 py-2 hover:bg-orange-50">Product 1</a></li> -->
</ul>
</li>
<li class="relative group font-medium">
<a href="#" class="inline-flex items-center font-medium md:text-sm 2xl:text-base text-zinc-500">
Key Strength
<span class="ms-[2px]">
<i class="ri-arrow-down-s-line"></i>
</span>
</a>
<ul class="absolute hidden z-30 group-hover:block hover:block bg-white text-black mt-0 rounded-lg shadow-lg w-60">
<li><a href="/view/key-streangths/manfacture-strength.html" class="block px-4 py-2 hover:bg-orange-50">Manufacturing Strength</a></li>
<li><a href="/view/key-streangths/research-development.html" class="block px-4 py-2 hover:bg-orange-50">Research & Development</a></li>
<li><a href="/view/key-streangths/product-development.html" class="block px-4 py-2 hover:bg-orange-50">Product Development</a></li>
<li><a href="/view/key-streangths/marketing-network.html" class="block px-4 py-2 hover:bg-orange-50">Marketing Network</a></li>
<li><a href="/view/key-streangths/packageing.html" class="block px-4 py-2 hover:bg-orange-50">Packaging</a></li>
</ul>
</li>
<li class="font-medium md:text-sm 2xl:text-base text-zinc-500 nav-link" data-link="/kalyanigrow.html"><a href="/view/business/kalyanigrow.html">Blog</a></li>
<li class="font-medium md:text-sm 2xl:text-base text-zinc-500 nav-link" data-link="/contact.html"><a href="/view/contact.html">Contact us</a></li>
</ul>
<div class="hidden xl:flex">
<a href="" class="w-[36px] h-[36px] 2xl:w-[50px] 2xl:h-[50px] bg-[#FEECD4] rounded-full flex items-center justify-center mr-2"><i class="ri-search-2-line text-xl text-[#ED7D0B]"></i></a>
<a
class="rounded-full px-[22px] py-[10px] 2xl:px-[25px] 2xl:py-[13.9px] font-medium md:text-sm 2xl:text-base text-white bg-[rgba(237,125,11,1)]" href="contact.html"
>
Corporate Brochure
</a>
</div>
<div class="block xl:hidden p-4 bg-white shadow-sm text-black">
<button id="openNav" class="text-3xl">
<i class="ri-menu-line"></i>
</button>
</div>
<div id="sideNav" class="fixed top-0 left-0 h-full w-0 bg-white text-black transition-all duration-300 ease-in-out overflow-x-hidden z-50">
<div class="flex justify-between p-4 items-center bg-white">
<img src="../public/logo-nav.png" alt="" srcset="" height="h-20 mx-auto block">
<button id="closeNav" class="text-3xl text-black">
<i class="ri-close-line "></i> <!-- Close icon -->
</button>
</div>
<ul class="mt-8 space-y-2 ">
<li><a href="/index.html" class="block text-lg px-4">Home</a></li>
<div class="w-full max-w-md mx-auto bg-white rounded-lg ">
<!-- Accordion Item 1 -->
<div class="border-b my-1">
<input type="checkbox" id="accordion1" class="peer hidden">
<label for="accordion1" class=" text-lg font-inter cursor-pointer border-b-gray-200 transition-all duration-300 py-2 flex justify-between bg-gray-100 px-5 "><span>Our Products</span> <i class="ri-arrow-down-s-line"></i></label>
<div class="max-h-0 overflow-hidden peer-checked:max-h-64 transition-[max-height] duration-500 ease-in-out bg-gray-50 px-4 ">
<ul class=" list-inside text-sm text-black categorylist list-none">
</ul>
</div>
</div>
<div class="border-b my-1">
<input type="checkbox" id="accordion2" class="peer hidden">
<label for="accordion2" class=" text-lg font-inter cursor-pointer border-b-gray-200 transition-all duration-300 py-2 flex justify-between bg-gray-100 px-5 "><span> About Kalyani</span> <i class="ri-arrow-down-s-line"></i></label>
<div class="max-h-0 overflow-hidden peer-checked:max-h-64 transition-[max-height] duration-500 ease-in-out bg-gray-50 px-4 ">
<ul class=" list-inside text-black text-sm ">
<!-- Categories will be dynamically inserted here -->
<li><a href="/view/about/aboutcompany.html" class="block px-4 py-2 hover:bg-orange-50">Company Profile</a></li>
<li><a href="/view/about/certificate.html" class="block px-4 py-2 hover:bg-orange-50">Certificate and Membership</a></li>
<li><a href="/view/about/about.html" class="block px-4 py-2 hover:bg-orange-50">Quality policy</a></li>
<li><a href="/view/about/aboutcooprate.html" class="block px-4 py-2 hover:bg-orange-50">Corporate video</a></li>
</ul>
</div>
</div>
<!-- 🧩 Parent Accordion -->
<div class="border-b my-1">
<input type="checkbox" id="productacc" class="peer hidden">
<label for="productacc" class="text-lg font-inter cursor-pointer border-b-gray-200 transition-all duration-300 py-2 flex justify-between bg-gray-100 px-5">
<span> Our Products</span> <i class="ri-arrow-down-s-line"></i>
</label>
<!-- 👇 Nested Accordions Wrapper -->
<div class="max-h-0 overflow-hidden peer-checked:max-h-[1000px] transition-[max-height] duration-500 ease-in-out bg-gray-50 px-4 productaccording">
</div>
</div>
<div class="border-b my-1">
<input type="checkbox" id="accordion3" class="peer hidden">
<label for="accordion3" class=" text-lg font-inter cursor-pointer border-b-gray-200 transition-all duration-300 py-2 flex justify-between bg-gray-100 px-5 "><span> Business Area</span> <i class="ri-arrow-down-s-line"></i></label>
<div class="max-h-0 overflow-hidden peer-checked:max-h-64 transition-[max-height] duration-500 ease-in-out bg-gray-50 px-4 ">
<ul class=" list-inside text-black text-sm ">
<li><a href="/view/business/domistic_board.html" class="block px-4 py-2 hover:bg-orange-50">Domestic Brand Business</a></li>
<li><a href="/view/business/institution.html" class="block px-4 py-2 hover:bg-orange-50">Institutional Business</a></li>
<li><a href="/view/business/international.html" class="block px-4 py-2 hover:bg-orange-50"> International Business</a></li>
<li><a href="/view/business/manufacture.html" class="block px-4 py-2 hover:bg-orange-50">Contract Manufacturing</a></li>
<li><a href="/view/business/kalyanigrow.html" class="block px-4 py-2 hover:bg-orange-50">Grow with Kalyani</a></li>
</ul>
</div>
</div>
<div class="border-b my-1">
<input type="checkbox" id="accordion4" class="peer hidden">
<label for="accordion4" class=" text-lg font-inter cursor-pointer border-b-gray-200 transition-all duration-300 py-2 flex justify-between bg-gray-100 px-5 "><span>Key Strength</span> <i class="ri-arrow-down-s-line"></i></label>
<div class="max-h-0 overflow-hidden peer-checked:max-h-64 transition-[max-height] duration-500 ease-in-out bg-gray-50 px-4 ">
<ul class=" list-inside text-black text-sm ">
<!-- Categories will be dynamically inserted here -->
<li><a href="/view/key-streangths/manfacture-strength.html" class="block px-4 py-2 hover:bg-orange-50">Manufacturing Strength</a></li>
<li><a href="/view/key-streangths/research-development.html" class="block px-4 py-2 hover:bg-orange-50">Research & Development</a></li>
<li><a href="/view/key-streangths/product-development.html" class="block px-4 py-2 hover:bg-orange-50">Product Development</a></li>
<li><a href="/view/key-streangths/marketing-network.html" class="block px-4 py-2 hover:bg-orange-50">Marketing Network</a></li>
<li><a href="/view/key-streangths/packageing.html" class="block px-4 py-2 hover:bg-orange-50">Packaging</a></li>
</ul>
</div>
</div>
<!-- Accordion Item 2 -->
</div>
<!-- <li><a href="/view/business/kalyanigrow.html" class="block text-lg px-4">Grow with Kalyani</a></li> -->
<li><a href="/view/contact.html" class="block text-lg px-4">contact us</a></li>
</ul>
</div>
<div id="overlay" class="fixed inset-0 bg-black opacity-0 transition-opacity duration-300 ease-in-out z-40 hidden"></div>
</div>
</nav>
</header>
<section class="w-full max-sm:pt-2 ">
<div class="flex md:flex-wrap lg:flex-nowrap items-start jusfity-center bg-gray-200">
<div class="lg:w-1/2 md:p-7 lg:ps-24 lg:pt-12 max-sm:pt-5 max-sm:pl-2">
<div class="max-w-[521px]">
<div class="HomeNavigator inline-block">
<a class="flex p-[5px_10px] bg-white rounded-2xl mb-[10px]" href="/index.html">
<i class="ri-home-4-line font-medium"></i>
<h3 class="font-medium pl-2 pr-2">Home</h3>
</a>
</div>
<h1 class="text-3xl max-sm:text-2xl font-bold mb-5">Products We Offer for your<br>
Agriculture Solution</h1>
<p class="mb-3 max-sm:text-xs text-zinc-500">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid non
nisi voluptate
ipsam architecto necessitatibus qui natus suscipit mollitia harum?Lorem, ipsum dolor sit amet
consectetur adipisicing elit. Aspernatur earum rerum fugit officiis quisquam ipsam magni facilis
aliquam corporis? Rerum.</p>
<a class="font-bold max-sm:text-1xs" href="">Learn More</a>
</div>
</div>
<div class="w-full lg:w-1/2 h-full">
<img class="h-full w-full bg-cover object-cover" src="/public/HomeImage.png" alt="">
</div>
</div>
</section>
<section class="product-list w-full pt-10">
<div class="p-search flex items-center justify-between lg:px-20">
<form action="" class="flex py-2 px-3 bg-gray-100 rounded-md border border-gray-200">
<i class="ri-search-2-line text-gray-400 pt-1"></i>
<input id="searchInput" class="border-none bg-transparent outline-none p-[2px_10px] w-full font-inter lg:w-96" type="search"
placeholder="Search Products">
</form>
</div>
<div class="productInfo flex flex-wrap items-center space-y-3 justify-evenly mt-10 max-w-[1280px] m-auto homecategory my-7">
<!-- <div class="product-data p-[0px_10px] w-1/3 max-sm:w-full pb-[10px]">
<div
class="ImageBg bg-[url('./assets/Home/homeProduct/2ndImage.png')] w-full h-[200px] bg-cover bg-no-repeat bg-center mb-3 rounded-[20px] relative">
<div class="redirection absolute top-0 right-0 max-xl:p-[10px] p-[20px] bg-white/25 rounded-3xl">
<a href=""><img class="" src="./assets/Home/homeProduct/redirection.png" alt=""></a>
</div>
</div>
<h2 class="text-3xl p-[5px_5px] max-sm:text-2xl max-xl:text-[23px]">Public Health Pesticides</h2>
<p class="p-[5px_5px] max-xl:text-[14px]">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus magni
adipisci itaque enim in asperiores expedita odit officia. Molestias accusamus numquam amet
molestiae deleniti voluptatum?</p>
<div class="productbtnwrap flex items-center justify-between p-[15px_5px]">
<div class="btn1 flex items-center w-[49.5%] p-[15px_20px] rounded-[10px_0px_0px_10px] bg-orange-500">
<img class="max-xl:w-5" src="./assets/Home/homeProduct/categories.png" alt="">
<h3 class="pl-[5px] font-medium text-white whitespace-nowrap max-xl:text-[13px]">6 Category</h3>
</div>
<div class="btn2 flex items-center w-[49.5%] p-[15px_20px] rounded-[0px_10px_10px_0px] bg-orange-500">
<img class="max-xl:w-5" src="./assets/Home/homeProduct/productIcon.png" alt="">
<h3 class="pl-[5px] font-medium text-white whitespace-nowrap max-xl:text-[13px]">300+ Products</h3>
</div>
</div>
</div>
<div class="product-data p-[0px_10px] w-1/3 max-sm:w-full pb-[10px]">
<div
class="ImageBg bg-[url('./assets/Home/homeProduct/3rdImage.png')] w-full h-[200px] bg-cover bg-no-repeat bg-center mb-3 rounded-[20px] relative">
<div class="redirection absolute top-0 right-0 max-xl:p-[10px] p-[20px] bg-white/25 rounded-3xl">
<a href=""><img class="" src="./assets/Home/homeProduct/redirection.png" alt=""></a>
</div>
</div>
<h2 class="text-3xl p-[5px_5px] max-sm:text-2xl max-xl:text-[25px]">product by Ingredient</h2>
<p class="p-[5px_5px] max-xl:text-[14px]">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus magni
adipisci itaque enim in asperiores expedita odit officia. Molestias accusamus numquam amet
molestiae deleniti voluptatum?</p>
<div class="productbtnwrap flex items-center justify-between p-[15px_5px]">
<div class="btn2 flex items-center w-full p-[15px_20px] rounded-[10px_10px_10px_10px] bg-orange-500">
<img src="./assets/Home/homeProduct/productIcon.png" alt="">
<h3 class="pl-[10px] font-medium text-white whitespace-nowrap">300+ Products</h3>
</div>
</div>
</div> -->
</div>
</section>
<section class="w-full mt-20px p-[3rem_2rem] md:p-[5rem_3rem] lg:p-[6rem_5rem] bg-[url('/public/map-base.png')] bg-cover bg-no-repeat bg-center">
<p class="text-3xl font-medium tracking-[1px] w-full lg:w-[60%] xl:w-[55%] max-sm:text-2xl font-dmSans">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="hightlightInfo flex max-sm:flex-wrap max-sm:w-full items-center mt-10">
<div class="info1 mr-10 max-sm:pb-[30px]">
<p>DISTRIBUTER</p>
<h1 class="text-6xl max-sm:text-6xl font-extrabold text-sawarabimincho text-orange-500">20+</h1>
</div>
<div class="info2 mr-10 max-sm:pb-[30px]">
<p>SERVED COUNTRY</p>
<h1 class="text-6xl max-sm:text-6xl font-extrabold text-sawarabimincho text-outline">34k+</h1>
</div>
<div class="info3 mr-10 max-sm:pb-[30px]">
<p>PRODUCT CATEGORY</p>
<h1 class="text-6xl max-sm:text-6xl text-sawarabimincho font-extrabold text-outline">10k+</h1>
</div>
</div>
</section>
<footer class=" pt-16 px-8 md:px-16 2xl:lg:px-32 text-white" style="background-image:url('../public/footerbanner.webp') ; background-repeat: no-repeat; background-size: cover;">
<!-- Top Section -->
<div class="flex flex-col md:flex-row justify-between gap-10">
<!-- Contact Section -->
</div>
<!-- Divider -->
<!-- Middle Section -->
<div class="grid grid-cols-1 lg:grid-cols-11 gap-4 text-base">
<!-- Company Info and Logo -->
<div class="col-span-1 md:col-span-3">
<div class="w-36 aspect-video mb-4">
<img class="h-full w-full object-contain" src="../public/footerLogo.png" alt="Footer Logo" />
</div>
<p>
Kalyani Industries Ltd., established in 2000, is a leading manufacturer, exporter, and supplier of high-quality products.
</p>
<a class="font-semibold underline cursor-pointer">Read More...</a>
<!-- Social Media Icons -->
<div class="flex gap-4 mt-8 text-2xl">
<a href="#"><i class="ri-facebook-circle-fill"></i></a>
<a href="#"><i class="ri-instagram-fill"></i></a>
<a href="#"><i class="ri-linkedin-fill"></i></a>
<a href="#"><i class="ri-twitter-fill"></i></a>
</div>
</div>
<!-- Products Section -->
<div class="col-span-1 md:col-span-4">
<h6 class="mb-6 text-lg font-semibold">Our Products</h6>
<ul class="grid grid-cols-2 text-orange-200 text-base 2xl:text-lg gap-1 " id="footerlist">
</ul>
</div>
<!-- Column 2 -->
<div>
<h6 class="mb-6 text-lg font-semibold">Company</h6>
<ul class="space-y-2 text-orange-200 text-base 2xl:text-lg">
<li><a href="/view/business/kalyanigrow.html">Grow With Us</a></li>
<li><a href="/view/domistic_board.html">About us</a></li>
<li><a href="/view/contact.html">Contact us</a></li>
<!-- <li>Jobs</li>
<li>In Press</li> -->
</ul>
</div>
<div class="col-span-1 md:col-span-3">
<div class="flex font-dmSans gap-5 text-base max-w-[320px] ">
<i class="ri-mail-line text-lg"></i>
<div class="py-1" >
<h6 class="text-lg">Mail</h6>
<a href="mailto:info@kalyanilimited.com" class="text-sm">info@kalyanilimited.com</a>
</div>
</div>
<div class="flex gap-5 text-base max-w-[320px] py-1">
<span class="text-2xl"><i class="ri-phone-line"></i></span>
<div>
<h6 class="text-lg">tel</h6>
<a href="tel:912282215489" class="text-sm">+91 22-82215489</a><br />
<a href="tel:912261278127" class="text-sm">+91 22-61278127</a><br />
<a href="tel:912261278127" class="text-sm">+91 22-62381265</a><br />
<a href="tel:912267421923" class="text-sm">+91 22-67421923</a>
</div>
</div>
<!-- Mail Section -->
<!-- Address Section -->
<div class="flex gap-5 text-base max-w-[320px]">
<span class="text-2xl"><i class="ri-map-pin-line"></i></span>
<div>
<h6 class="text-lg" class="text-base">Address</h6>
<a href="" class="text-sm">
Corporate Office 1202-1204, B Wing, Kailash Business Park, Ghatkopar Powai Link Road, Vikhroli(W), Mumbai -400079.
</a>
</div>
</div>
</div>
</div>
<!-- Divider -->
<div class="my-4">
<hr class="border-t-2 border-white opacity-50" />
</div>
<!-- Bottom Section -->
<div class="flex flex-col md:flex-row justify-between text-sm pb-3">
<p>© 2007-2024 All Rights Reserved with Kalyani Industries Limited.</p>
<div class="flex gap-4 mt-4 md:mt-0">
<a href="#" class="underline">Privacy Policy</a>
<a href="#" class="underline">Terms of Use</a>
</div>
</div>
</footer>
</main>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="../src/assests/js/scripts.js"></script>
<script src="../src/assests/js/api.js"></script>
</body>
</html>