File: /home/aliazzsr/html.vqode.com/Pankore/productsSlider.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<script
defer
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>
<link
href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/output.css" />
</head>
<body class="products-body">
<main>
<header class="fixed w-full top-0 z-50 py-4 scroll-header">
<nav class="flex items-center justify-between wrapper">
<a>
<img
class="header-logo md:h-auto h-[55px]"
src="public/header_footer/logo.webp"
/>
</a>
<button id="menu-button">
<img class="header-menu" src="public/header_footer/menu.webp" />
</button>
</nav>
</header>
<div id="menu" class="menu px-4">
<div class="h-full flex flex-col wrapper">
<div
class="flex items-center justify-between py-4 text-black font-semibold"
>
<button id="closeMenu">
<i
class="fa fa-times fa-xmark text-gray-500 md:text-[32px] text-[20px] absolute md:right-14 right-4 md:top-6 top-3"
aria-hidden="true"
></i>
</button>
<a class="flex-1">
<img
id="menu-button"
class="md:h-auto h-[50px]"
src="public/menu/logo.webp"
/>
</a>
<div class="flex items-center justify-between md:flex-1">
<div class="flex items-center space-x-3">
<i
class="fa fa-globe text-purple text-[16px]"
aria-hidden="true"
></i>
<div class="font-bold text-[17px] space-x-1.5">
<span>EN</span>
<span class="text-slate-500/80 text-lg font-[300]">|</span>
<span class="text-slate-500/80">AR</span>
</div>
</div>
<div class="space-x-3 hidden md:block">
<i
class="fa fa-phone text-purple text-[13px]"
aria-hidden="true"
></i>
<span>+971 4227 4088</span>
</div>
<div class="space-x-3 hidden md:block">
<i
class="fa fa-envelope text-purple text-[16px]"
aria-hidden="true"
></i>
<span>[email protected]</span>
</div>
</div>
</div>
<div
class="flex items-center flex-1 md:justify-between justify-center 2xl:justify-center 2xl:space-x-12"
>
<div id="menu-left-images" class="flex items-center space-x-8">
<img
class="rounded-[28px] h-[460px] hidden md:inline-flex"
src="public/menu/menu-img1.webp"
/>
<img
class="rounded-[28px] h-[460px] hidden md:inline-flex"
src="public/menu/menu-img2.webp"
/>
</div>
<div
id="menu-center"
class="bg-black rounded-[34px] md:w-[450px] w-[380px] md:px-20 px-6 md:py-14 py-8"
>
<span class="text-neutral-600 font-semibold text-[18px]"
>Menu</span
>
<nav>
<ul
class="text-white font-[600] tracking-[1px] text-[22px] space-y-7 mt-6"
>
<li class="nav-item" id="home">
<a href="home.html">HOME</a>
</li>
<li class="nav-item" id="about">
<a href="whoWeAre.html">WHO WE ARE</a>
</li>
<li class="nav-item" id="services">
<a href="businesses.html">OUR BUSINESS</a>
</li>
<li class="nav-item active" id="contact">
<a href="productsSlider.html">PRODUCTS</a>
</li>
<li class="nav-item" id="services">
<a href="blogListing.html">BLOGS</a>
</li>
<li class="nav-item" id="contact">
<a href="contactUs.html">CONTACT US</a>
</li>
</ul>
</nav>
</div>
<div id="menu-right-images" class="flex items-center space-x-8">
<img
class="rounded-[28px] h-[460px] hidden md:inline-flex"
src="public/menu/menu-img3.webp"
/>
<img
class="rounded-[28px] h-[460px] hidden md:inline-flex"
src="public/menu/menu-img4.webp"
/>
</div>
</div>
<div class="flex items-center justify-between pb-2 font-semibold">
<div class="space-x-2 md:hidden block">
<i
class="fa fa-phone text-purple text-[13px]"
aria-hidden="true"
></i>
<span>+971 4227 4088</span>
</div>
<div class="space-x-2 md:hidden block">
<i
class="fa fa-envelope text-purple text-[16px]"
aria-hidden="true"
></i>
<span>[email protected]</span>
</div>
</div>
</div>
</div>
<section>
<div class="relative">
<img
class="w-full md:h-[80vh] md:min-h-[600px] min-h-[475px] hidden md:block"
src="public/products/product-list-banner.webp"
/>
<img
class="w-full md:h-[80vh] md:min-h-[600px] min-h-[475px] md:hidden"
src="public/products/products-m-banner.webp"
/>
<div
class="absolute banner-content-animation inset-0 text-white flex flex-col items-center justify-center px-3"
>
<h1
class="md:text-[92px] text-[36px] font-bold tracking-[1px] mt-16 mb-6"
>
OUR PRODUCTS
</h1>
<div class="font-medium md:text-lg text-center space-y-[3px]">
<p class="hidden md:block">
We are dedicated to delivering excellence in everything we do, from the quality of
</p>
<p class="hidden md:block">
our products to the service we provide to our customers.
</p>
<p class="hidden md:block">business opportunities</p>
<!-- only visible in mobile view -->
<p class="md:hidden">
We are dedicated to delivering excellence in everything we do, from the quality of our products to the service we provide to our customers.
</p>
</div>
<a
href="contactUs.html"
class="primary-button text-white md:px-10 md:py-[9px] px-6 py-[8px] space-x-2 rounded-lg font-semibold md:text-[15px] text-[14px] mt-12"
type="button"
>
<span>CONTACT US</span> <span class="text-lg">+</span>
</a>
</div>
</div>
</section>
<!-- Section 2 -->
<div class="relative">
<img
src="public/products/product-list-sugar-vector.webp"
class="absolute hidden md:block left-0 top-10 -z-10"
/>
</div>
<section class="relative max-w-[1400px] mx-auto">
<div class="text-center mt-4 z-30">
<h3 class="text-purple font-bold pt-4 text-xl mb-2">SEE OUR</h3>
<h2
class="md:text-[54px] text-[36px] tracking-[1px] font-bold md:mb-4 mb-2"
>
COMPANY PRODUCTS
</h2>
<p class="text-gray-700 text-lg font-semibold px-2">
We have established ourselves as a trusted player in the global foodstuff industry, enabling the trade of goods
</p>
<p class="text-gray-700 text-lg font-semibold">
and services across borders and between different regions.
</p>
</div>
<!-- Web Slider -->
<div class="hidden md:block mt-5 pb-8">
<div
id="mySlider"
class="carousel slide relative pb-4 z-10"
data-bs-ride="carousel"
>
<!-- <div class="carousel-indicators product-carousel">
<button
type="button"
data-bs-target="#mySlider"
data-bs-slide-to="0"
class="active rounded-full"
aria-current="true"
aria-label="Slide 1"
></button>
<button
type="button"
data-bs-target="#mySlider"
data-bs-slide-to="1"
aria-label="Slide 2"
></button>
<button
type="button"
data-bs-target="#mySlider"
data-bs-slide-to="2"
aria-label="Slide 3"
></button>
<button
type="button"
data-bs-target="#mySlider"
data-bs-slide-to="3"
aria-label="Slide 4"
></button>
</div> -->
<div class="md:px-20">
<div class="carousel-inner">
<div class="carousel-item active">
<!-- Item 1 -->
<div class="flex space-x-12 text-start">
<div class="flex-1 relative p-1.5">
<div
class="bg-purple absolute -z-10 -top-2 left-0 w-[70%] h-[50%]"
></div>
<div class="overflow-hidden">
<img
class="w-full h-[300px] object-cover"
src="public/home/product-img1.webp"
/>
</div>
<div
class="px-[28px] shadow-md bg-white -translate-y-[28%] z-20 py-[24px] w-[89%] mx-auto"
>
<h5 class="text-[23px] font-bold mb-2">
White Refined Sugar
</h5>
<!-- <div class="font-semibold py-2.5">
<h6 class="">Polarisation: 99.7% min</h6>
<h6>Moisture content: 0.06% max</h6>
</div> -->
<a
href="whiteRefinedSugar.html"
class="underline cursor-pointer underline-offset-2 text-[15px] font-bold text-purple"
>View More</a
>
</div>
</div>
<div class="flex-1 relative pt-1.5">
<div
class="bg-purple absolute -z-10 -top-2 -left-1.5 w-[70%] h-[50%]"
></div>
<div class="overflow-hidden">
<img
class="w-full h-[300px]"
src="public/home/product-img2.webp"
/>
</div>
<div
class="px-[28px] shadow-md bg-white -translate-y-[28%] z-20 py-[24px] w-[89%] mx-auto"
>
<h5 class="text-[23px] font-bold mb-2">
White Crystal Sugar
</h5>
<a
href="whiteCrystalSugar.html"
class="underline cursor-pointer underline-offset-2 text-[15px] font-bold text-purple"
>View More</a
>
</div>
</div>
<div class="flex-1 relative pt-1.5">
<div
class="bg-purple absolute -z-10 -top-2 -left-1.5 w-[70%] h-[50%]"
></div>
<div class="overflow-hidden">
<img
class="w-full h-[300px]"
src="public/home/product-img3.webp"
/>
</div>
<div
class="px-[28px] shadow-md bg-white -translate-y-[28%] z-20 py-[24px] w-[89%] mx-auto"
>
<h5 class="text-[23px] font-bold mb-2">Parboiled Rice</h5>
<a
href="proboiledRice.html"
class="underline cursor-pointer underline-offset-2 text-[15px] font-bold text-purple"
>View More</a
>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="flex space-x-12 text-start">
<div class="flex-1 relative p-1.5">
<div
class="bg-purple absolute -z-10 -top-2 left-0 w-[70%] h-[50%]"
></div>
<div class="overflow-hidden">
<img
class="w-full h-[300px]"
src="public/home/product-img4.webp"
/>
</div>
<div
class="px-[28px] shadow-md bg-white -translate-y-[28%] z-20 py-[24px] w-[89%] mx-auto"
>
<h5 class="text-[23px] font-bold mb-2">
Short Grain Swarna
</h5>
<a
href="shortGrainSwarna.html"
class="underline cursor-pointer underline-offset-2 text-[15px] font-bold text-purple"
>View More</a
>
</div>
</div>
<div class="flex-1 relative pt-1.5">
<div
class="bg-purple absolute -z-10 -top-2 -left-1.5 w-[70%] h-[50%]"
></div>
<div class="overflow-hidden">
<img
class="w-full h-[300px]"
src="public/home/product-img5.webp"
/>
</div>
<div
class="px-[28px] shadow-md bg-white -translate-y-[28%] z-20 py-[24px] w-[89%] mx-auto"
>
<h5 class="text-[23px] font-bold mb-2">
Gadarif Halawa Sesame
</h5>
<a
href="gadarifHalawaSesame.html"
class="underline cursor-pointer underline-offset-2 text-[15px] font-bold text-purple"
>View More</a
>
</div>
</div>
<div class="flex-1 relative pt-1.5">
<div
class="bg-purple absolute -z-10 -top-2 -left-1.5 w-[70%] h-[50%]"
></div>
<div class="overflow-hidden">
<img
class="w-full h-[300px]"
src="public/home/product-img6.webp"
/>
</div>
<div
class="px-[28px] shadow-md bg-white -translate-y-[28%] z-20 py-[24px] w-[89%] mx-auto"
>
<h5 class="text-[23px] font-bold mb-2">
Non-Gadrif Halawa Sesame
</h5>
<a href="nonGadrifSesame.html"
class="underline cursor-pointer underline-offset-2 text-[15px] font-bold text-purple"
>View More</a
>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="flex space-x-12 text-start">
<div class="flex-1 relative pt-1.5">
<div
class="bg-purple absolute -z-10 -top-2 -left-1.5 w-[70%] h-[50%]"
></div>
<div class="overflow-hidden">
<img
class="w-full h-[300px]"
src="public/home/product-img8.webp"
/>
</div>
<div
class="px-[28px] shadow-md bg-white -translate-y-[28%] z-20 py-[24px] w-[89%] mx-auto"
>
<h5 class="text-[23px] font-bold mb-2">Red Sesame</h5>
<a
href="redSesame.html"
class="underline cursor-pointer underline-offset-2 text-[15px] font-bold text-purple"
>View More</a
>
</div>
</div>
<div class="flex-1 relative p-1.5">
<div
class="bg-purple absolute -z-10 -top-2 left-0 w-[70%] h-[50%]"
></div>
<div class="overflow-hidden">
<img
class="w-full h-[300px]"
src="public/home/product-img7.webp"
/>
</div>
<div
class="px-[28px] shadow-md bg-white -translate-y-[28%] z-20 py-[24px] w-[89%] mx-auto"
>
<h5 class="text-[23px] font-bold mb-2">Kernel Peanuts</h5>
<a
href="kernelPeanuts.html"
class="underline cursor-pointer underline-offset-2 text-[15px] font-bold text-purple"
>View More</a
>
</div>
</div>
<div class="flex-1 relative pt-1.5">
<div
class="bg-purple absolute -z-10 -top-2 -left-1.5 w-[70%] h-[50%]"
></div>
<div class="overflow-hidden">
<img
class="w-full h-[300px]"
src="public/home/product-img9.webp"
/>
</div>
<div
class="px-[28px] shadow-md bg-white -translate-y-[28%] z-20 py-[24px] w-[89%] mx-auto"
>
<h5 class="text-[23px] font-bold mb-2">White Flour</h5>
<a
href="whiteFlour.html"
class="underline cursor-pointer underline-offset-2 text-[15px] font-bold text-purple"
>View More</a
>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="flex space-x-12 text-start">
<div class="flex-1 relative p-1.5">
<div
class="bg-purple absolute -z-10 -top-2 -left-0 w-[70%] h-[50%]"
></div>
<div class="overflow-hidden">
<img
class="w-full h-[300px]"
src="public/home/product-img10.webp"
/>
</div>
<div
class="px-[28px] shadow-md bg-white -translate-y-[28%] z-20 py-[24px] w-[89%] mx-auto"
>
<h5 class="text-[23px] font-bold mb-2">Red Lentils</h5>
<a
href="redLentils.html"
class="underline cursor-pointer underline-offset-2 text-[15px] font-bold text-purple"
>View More</a
>
</div>
</div>
<div class="flex-1 relative pt-1.5">
<div
class="bg-purple absolute -z-10 -top-2 -left-1.5 w-[70%] h-[50%]"
></div>
<div class="overflow-hidden">
<img
class="w-full h-[300px]"
src="public/home/product-img11.webp"
/>
</div>
<div
class="px-[28px] shadow-md bg-white -translate-y-[28%] z-20 py-[24px] w-[89%] mx-auto"
>
<h5 class="text-[23px] font-bold mb-2">
Milk Powder - Full Cream
</h5>
<a
href="milkPowderFullCream.html"
class="underline cursor-pointer underline-offset-2 text-[15px] font-bold text-purple"
>View More</a
>
</div>
</div>
<div class="flex-1 relative pt-1.5">
<div
class="bg-purple absolute -z-10 -top-2 -left-1.5 w-[70%] h-[50%]"
></div>
<div class="overflow-hidden">
<img
class="w-full h-[300px]"
src="public/home/product-img12.webp"
/>
</div>
<div
class="px-[28px] shadow-md bg-white -translate-y-[28%] z-20 py-[24px] w-[89%] mx-auto"
>
<h5 class="text-[23px] font-bold mb-2">Edible Oil</h5>
<a
href="edibleOil.html"
class="underline cursor-pointer underline-offset-2 text-[15px] font-bold text-purple"
>View More</a
>
</div>
</div>
</div>
</div>
<!-- Add more carousel items as needed -->
</div>
</div>
<button
class="absolute left-0 bottom-[140px] bg-black w-10 h-10 flex items-center justify-center"
type="button"
data-bs-target="#mySlider"
data-bs-slide="prev"
>
<i
class="fa fa-chevron-left text-white text-lg"
aria-hidden="true"
></i>
<span class="visually-hidden">Previous</span>
</button>
<button
class="absolute right-0 bottom-[140px] bg-black w-10 h-10 flex items-center justify-center"
type="button"
data-bs-target="#mySlider"
data-bs-slide="next"
>
<i
class="fa fa-chevron-right text-white text-lg"
aria-hidden="true"
></i>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<!-- Mobile Slider -->
<div class="md:hidden mt-5">
<div
id="mobileSlider"
class="carousel slide relative pb-12"
data-bs-ride="carousel"
>
<!-- <div class="carousel-indicators product-carousel">
<button
type="button"
data-bs-target="#mobileSlider"
data-bs-slide-to="0"
class="active"
aria-current="true"
aria-label="Slide 1"
></button>
<button
type="button"
data-bs-target="#mobileSlider"
data-bs-slide-to="1"
aria-label="Slide 2"
></button>
<button
type="button"
data-bs-target="#mobileSlider"
data-bs-slide-to="2"
aria-label="Slide 3"
></button>
<button
type="button"
data-bs-target="#mobileSlider"
data-bs-slide-to="3"
aria-label="Slide 4"
></button>
<button
type="button"
data-bs-target="#mobileSlider"
data-bs-slide-to="4"
aria-label="Slide 5"
></button>
<button
type="button"
data-bs-target="#mobileSlider"
data-bs-slide-to="5"
aria-label="Slide 6"
></button>
<button
type="button"
data-bs-target="#mobileSlider"
data-bs-slide-to="6"
aria-label="Slide 7"
></button>
<button
type="button"
data-bs-target="#mobileSlider"
data-bs-slide-to="7"
aria-label="Slide 8"
></button>
<button
type="button"
data-bs-target="#mobileSlider"
data-bs-slide-to="8"
aria-label="Slide 9"
></button>
<button
type="button"
data-bs-target="#mobileSlider"
data-bs-slide-to="9"
aria-label="Slide 10"
></button>
<button
type="button"
data-bs-target="#mobileSlider"
data-bs-slide-to="10"
aria-label="Slide 11"
></button>
<button
type="button"
data-bs-target="#mobileSlider"
data-bs-slide-to="11"
aria-label="Slide 12"
></button>
</div> -->
<div class="px-[34px]">
<div class="carousel-inner text-start">
<!-- Item 1 -->
<div class="carousel-item active relative pt-1.5 pl-1.5">
<div
class="bg-purple absolute -z-10 top-0 left-0 w-[70%] h-[45%]"
></div>
<img
class="w-full h-[300px]"
src="public/home/product-img1.webp"
/>
<div
class="bg-[#e5e5e3] px-[28px] -translate-y-[30%] z-20 md:py-[18px] py-[16px] w-[88%] mx-auto"
>
<h5 class="text-xl font-bold md:mb-3 mb-1">
White Refined Sugar
</h5>
<a
href="whiteRefinedSugar.html"
class="underline text-purple underline-offset-2 text-sm font-bold"
>View More</a
>
</div>
</div>
<div class="carousel-item relative pt-1.5 pl-1.5">
<div
class="bg-purple absolute -z-10 top-0 left-0 w-[70%] h-[45%]"
></div>
<img
class="w-full h-[300px]"
src="public/home/product-img2.webp"
/>
<div
class="bg-[#e5e5e3] px-[28px] -translate-y-[30%] z-20 md:py-[18px] py-[16px] w-[88%] mx-auto"
>
<h5 class="text-xl font-bold md:mb-3 mb-1">
White Crystal Sugar
</h5>
<a
href="whiteCrystalSugar.html"
class="underline text-purple underline-offset-2 text-sm font-bold"
>View More</a
>
</div>
</div>
<div class="carousel-item relative pt-1.5 pl-1.5">
<div
class="bg-purple absolute -z-10 top-0 left-0 w-[70%] h-[45%]"
></div>
<img
class="w-full h-[300px]"
src="public/home/product-img3.webp"
/>
<div
class="bg-[#e5e5e3] px-[28px] -translate-y-[30%] z-20 md:py-[18px] py-[16px] w-[88%] mx-auto"
>
<h5 class="text-xl font-bold md:mb-3 mb-1">
Parboiled Rice
</h5>
<a
href="proboiledRice.html"
class="underline text-purple underline-offset-2 text-sm font-bold"
>View More</a
>
</div>
</div>
<div class="carousel-item relative pt-1.5 pl-1.5">
<div
class="bg-purple absolute -z-10 top-0 left-0 w-[70%] h-[45%]"
></div>
<img
class="w-full h-[300px]"
src="public/home/product-img4.webp"
/>
<div
class="bg-[#e5e5e3] px-[28px] -translate-y-[30%] z-20 md:py-[18px] py-[16px] w-[88%] mx-auto"
>
<h5 class="text-xl font-bold md:mb-3 mb-1">
Short Grain Swarna
</h5>
<a
href="shortGrainSwarna.html"
class="underline underline-offset-2 text-purple text-sm font-bold"
>View More</a
>
</div>
</div>
<div class="carousel-item relative pt-1.5 pl-1.5">
<div
class="bg-purple absolute -z-10 top-0 left-0 w-[70%] h-[45%]"
></div>
<img
class="w-full h-[300px]"
src="public/home/product-img5.webp"
/>
<div
class="bg-[#e5e5e3] px-[28px] -translate-y-[30%] z-20 md:py-[18px] py-[16px] w-[88%] mx-auto"
>
<h5 class="text-xl font-bold md:mb-3 mb-1">
Gadarif Halawa Sesame
</h5>
<a
href="gadarifHalawaSesame.html"
class="underline underline-offset-2 text-purple text-sm font-bold"
>View More</a
>
</div>
</div>
<div class="carousel-item relative pt-1.5 pl-1.5">
<div
class="bg-purple absolute -z-10 top-0 left-0 w-[70%] h-[45%]"
></div>
<img
class="w-full h-[300px]"
src="public/home/product-img6.webp"
/>
<div
class="bg-[#e5e5e3] px-[28px] -translate-y-[30%] z-20 md:py-[18px] py-[16px] w-[88%] mx-auto"
>
<h5 class="text-xl font-bold md:mb-3 mb-1">
Non-Gadrif Halawa Sesame
</h5>
<a
href="nonGadrifSesame.html"
class="underline underline-offset-2 text-sm text-purple font-bold"
>View More</a
>
</div>
</div>
<div class="carousel-item relative pt-1.5 pl-1.5">
<div
class="bg-purple absolute -z-10 top-0 left-0 w-[70%] h-[45%]"
></div>
<img
class="w-full h-[300px]"
src="public/home/product-img8.webp"
/>
<div
class="bg-[#e5e5e3] px-[28px] -translate-y-[30%] z-20 md:py-[18px] py-[16px] w-[88%] mx-auto"
>
<h5 class="text-xl font-bold md:mb-3 mb-1">Red Sesame</h5>
<a
href="redSesame.html"
class="underline underline-offset-2 text-sm text-purple font-bold"
>View More</a
>
</div>
</div>
<div class="carousel-item relative pt-1.5 pl-1.5">
<div
class="bg-purple absolute -z-10 top-0 left-0 w-[70%] h-[45%]"
></div>
<img
class="w-full h-[300px]"
src="public/home/product-img7.webp"
/>
<div
class="bg-[#e5e5e3] px-[28px] -translate-y-[30%] z-20 md:py-[18px] py-[16px] w-[88%] mx-auto"
>
<h5 class="text-xl font-bold md:mb-3 mb-1">
Kernel Peanuts
</h5>
<a
href="kernelPeanuts.html"
class="underline underline-offset-2 text-sm text-purple font-bold"
>View More</a
>
</div>
</div>
<div class="carousel-item relative pt-1.5 pl-1.5">
<div
class="bg-purple absolute -z-10 top-0 left-0 w-[70%] h-[45%]"
></div>
<img
class="w-full h-[300px]"
src="public/home/product-img9.webp"
/>
<div
class="bg-[#e5e5e3] px-[28px] -translate-y-[30%] z-20 md:py-[18px] py-[16px] w-[88%] mx-auto"
>
<h5 class="text-xl font-bold md:mb-3 mb-1">White Flour</h5>
<a
href="whiteFlour.html"
class="underline underline-offset-2 text-sm text-purple font-bold"
>View More</a
>
</div>
</div>
<div class="carousel-item relative pt-1.5 pl-1.5">
<div
class="bg-purple absolute -z-10 top-0 left-0 w-[70%] h-[45%]"
></div>
<img
class="w-full h-[300px]"
src="public/home/product-img10.webp"
/>
<div
class="bg-[#e5e5e3] px-[28px] -translate-y-[30%] z-20 md:py-[18px] py-[16px] w-[88%] mx-auto"
>
<h5 class="text-xl font-bold md:mb-3 mb-1">Red Lentils</h5>
<a
href="redLentils.html"
class="underline underline-offset-2 text-sm text-purple font-bold"
>View More</a
>
</div>
</div>
<div class="carousel-item relative pt-1.5 pl-1.5">
<div
class="bg-purple absolute -z-10 top-0 left-0 w-[70%] h-[45%]"
></div>
<img
class="w-full h-[300px]"
src="public/home/product-img11.webp"
/>
<div
class="bg-[#e5e5e3] px-[28px] -translate-y-[30%] z-20 md:py-[18px] py-[16px] w-[88%] mx-auto"
>
<h5 class="text-xl font-bold md:mb-3 mb-1">
Milk Powder - Full Cream
</h5>
<a
href="milkPowderFullCream.html"
class="underline underline-offset-2 text-sm text-purple font-bold"
>View More</a
>
</div>
</div>
<div class="carousel-item relative pt-1.5 pl-1.5">
<div
class="bg-purple absolute -z-10 top-0 left-0 w-[70%] h-[45%]"
></div>
<img
class="w-full h-[300px]"
src="public/home/product-img12.webp"
/>
<div
class="bg-[#e5e5e3] px-[28px] -translate-y-[30%] z-20 md:py-[18px] py-[16px] w-[88%] mx-auto"
>
<h5 class="text-xl font-bold md:mb-3 mb-1">Edible Oil</h5>
<a
href="edibleOil.html"
class="underline underline-offset-2 text-sm text-purple font-bold"
>View More</a
>
</div>
</div>
<!-- Add more carousel items as needed -->
</div>
</div>
<button
class="absolute left-0 md:-left-[92px] bottom-[200px] bg-black md:w-10 md:h-10 w-8 h-8 flex items-center justify-center"
type="button"
data-bs-target="#mobileSlider"
data-bs-slide="prev"
>
<i class="fa fa-chevron-left text-white" aria-hidden="true"></i>
<span class="visually-hidden">Previous</span>
</button>
<button
class="absolute right-0 md:-right-[92px] bottom-[200px] bg-black md:w-10 md:h-10 w-8 h-8 flex items-center justify-center"
type="button"
data-bs-target="#mobileSlider"
data-bs-slide="next"
>
<i class="fa fa-chevron-right text-white" aria-hidden="true"></i>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</section>
</main>
<section class="transparent-section">
</section>
<footer class="md:flex bg-purple justify-between pt-3 pb-6 md:pb-0 hidden">
<img class="" src="public/header_footer/footer-left-sugarcane.webp" />
<div class="flex-1 flex flex-col max-w-[800px]">
<div class="flex w-full justify-between text-white flex-1 pt-10">
<div>
<h4 class="font-semibold text-[22px] mb-8">OUR PAGES</h4>
<nav class="space-y-3 flex flex-col text-[17px] font-[500]">
<a href="home.html">Home</a>
<a href="whoWeAre.html">Who We Are</a>
<a href="productsSlider.html">Products</a>
<a href="pankoreBusiness.html">Our Businesses</a>
<a href="blogListing.html">Blog</a>
<a href="contactUs.html">Contact Us</a>
</nav>
</div>
<div class="">
<h4 class="font-semibold text-[22px] mb-8">ASK FOR MORE</h4>
<form class="flex flex-col space-y-4">
<input
type="text"
class="placeholder-white outline-none border text-sm border-white px-4 py-[13px] bg-transparent text-white w-[240px]"
placeholder="Enter full name"
/>
<input
type="text"
class="placeholder-white outline-none border text-sm border-white px-4 py-[13px] bg-transparent text-white w-[240px]"
placeholder="Enter email address"
/>
<textarea rows="2" class="footer-msg px-[20px] py-[13px] w-full placeholder:text-[#ffffff] text-[#ffffff] font-medium resize-none" placeholder="Type..." type="text" id="message" name="message" required=""></textarea>
<button
class="text-purple bg-white py-[12px] text-[16px] font-bold w-[240px]"
type="submit"
>
SUBMIT NOW
</button>
</form>
</div>
<div class="">
<h4 class="font-semibold text-[22px] mb-8">OUR PRODUCTS</h4>
<nav class="space-y-3 flex flex-col text-[17px] font-[500]">
<a href="whiteRefinedSugar.html">White Refined Sugar</a>
<a href="whiteCrystalSugar.html">White Crystal Sugar</a>
<a href="proboiledRice.html">Proboiled Rice</a>
<a href="shortGrainSwarna.html">Short Grain Swarna</a>
<a href="gadarifHalawaSesame.html">Gadarif Halawa Sesame</a>
<a
href="productsGrid.html"
class="underline underline-offset-2 mt-4"
>View All</a
>
</nav>
</div>
</div>
<div
class="flex -mx-10 items-center justify-center text-white text-[14px] footer-border mt-auto pt-[26px] pb-[26px] px-3"
>
<div>
<span class="font-[400]">COPYRIGHT: </span
><span class="font-bold"> ©2023. ALL RIGHTS RESERVED</span>
</div>
</div>
</div>
<img class="" src="public/header_footer/footer-right-sugarcane.webp" />
</footer>
<footer
class="flex flex-col bg-purple justify-between pt-4 pb-6 md:pb-0 md:hidden"
>
<div class="flex justify-between text-white flex-1 pt-10 px-6">
<div>
<h4 class="font-semibold md:text-[22px] text-[18px] md:mb-8 mb-3">
OUR PAGES
</h4>
<nav
class="space-y-3 flex flex-col md:text-[18px] text-[16px] font-[500]"
>
<a href="home.html">Home</a>
<a href="whoWeAre.html">Who We Are</a>
<a href="productsSlider.html">Products</a>
<a href="pankoreBusiness.html">Our Businesses</a>
<a href="blogListing.html">Blog</a>
<a href="contactUs.html">Contact Us</a>
</nav>
</div>
<div>
<h4 class="font-semibold md:text-[22px] text-[18px] md:mb-8 mb-3">
OUR PRODUCTS
</h4>
<nav
class="space-y-3 flex flex-col md:text-[18px] text-[16px] font-[500]"
>
<a href="whiteRefinedSugar.html">White Refined Sugar</a>
<a href="whiteCrystalSugar.html">White Crystal Sugar</a>
<a href="proboiledRice.html">Proboiled Rice</a>
<a href="shortGrainSwarna.html">Short Grain Swarna</a>
<a href="gadarifHalawaSesame.html">Gadarif Halawa Sesame</a>
<a
href="productsGrid.html"
class="underline underline-offset-2 mt-4"
>View All</a
>
</nav>
</div>
</div>
<div class="text-white mt-8 px-4 mb-4">
<h4 class="font-semibold md:text-[22px] text-[18px] mb-4">
ASK FOR MORE
</h4>
<form class="flex flex-col space-y-4">
<input
type="text"
class="placeholder-white outline-none border text-sm border-white px-4 py-[13px] bg-transparent text-white w-full"
placeholder="Enter full name"
/>
<input
type="text"
class="placeholder-white outline-none border text-sm border-white px-4 py-[13px] bg-transparent text-white w-full"
placeholder="Enter email address"
/>
<textarea rows="2" class="footer-msg px-[20px] py-[13px] w-full placeholder:text-[#ffffff] text-[#ffffff] font-medium resize-none" placeholder="Type..." type="text" id="message" name="message" required=""></textarea>
<button
class="text-purple bg-white py-[12px] text-[16px] font-bold w-full"
type="submit"
>
SUBMIT NOW
</button>
</form>
</div>
<div class="text-white text-[15px] footer-border mt-auto pt-[28px] px-4">
<div>
<span class="font-[400]">COPYRIGHT: </span
><span class="font-bold"> ©2023. ALL RIGHTS RESERVED</span>
</div>
</div>
</footer>
<!-- Add your JavaScript scripts here or link to external scripts -->
<script src="javascript/header-footer.js"></script>
</body>
</html>