File: /home/aliazzsr/html.vqode.com/Pankore/home.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 rel="stylesheet" href="css/style.css" />
<!-- <link rel="stylesheet" href="css/home.css" /> -->
<link rel="stylesheet" href="css/output.css" />
</head>
<body class="home-body">
<main>
<header
class="fixed w-full top-0 z-50 py-4 scroll-header max-sm:max-w-[100vw]"
>
<nav class="flex items-center justify-between wrapper z-50">
<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 active" 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" 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>
<!-- Carousel Section -->
<section
id="carouselExampleIndicators"
class="carousel slide"
data-bs-ride="carousel"
>
<div class="carousel-inner">
<div class="carousel-item active relative">
<img
src="public/home/slider1.webp"
class="w-full h-screen object-cover"
alt="..."
/>
<div
class="absolute inset-0 md:pt-28 text-white flex flex-col items-center justify-center px-3 banner-content-animation"
>
<!-- <div
class="flex items-center justify-center font-semibold text-[16px] md:text-[22px] md:font-bold md:space-x-4 space-x-2"
>
<span class="">SUPPLIER</span>
<span>|</span>
<span class="">PROTECTORS</span>
<span>|</span>
<span class="">COMMUNITY</span>
<span>|</span>
<span class="">PARTNERS</span>
</div> -->
<h1
class="md:text-8xl text-center text-[38px] font-bold tracking-[1px] mt-12 mb-6"
>
PAN KORE TRADING
</h1>
<div class="text-center font-medium md:text-lg space-y-[3px]">
<p class="hidden md:block">
Welcome to Pan Kore, the premier trading company based in Dubai since 2011, specializes in food stuff.
</p>
<p class="hidden md:block">
We're renowned for our unwavering commitment to delivering excellence in both products
</p>
<p class="hidden md:block">and services, surpassing industry standards.</p>
<!-- only visible in mobile view -->
<p class="md:hidden">
Welcome to Pan Kore, the premier trading company based in Dubai since 2011, specializes in food stuff.
</p>
</div>
<a
href="contactUs.html"
class="primary-button text-white md:px-8 md:py-[10px] px-6 py-[8px] rounded-lg font-semibold md:text-[16px] text-[14px] mt-12"
>
QUOTATION REQUEST
</a>
</div>
</div>
<div class="carousel-item relative">
<img
src="public/home/slider5.webp"
class="w-full h-screen object-cover"
alt="..."
/>
<div
class="absolute banner-content-animation inset-0 md:pt-28 text-white flex flex-col items-center justify-center px-3"
>
<!-- <div
class="flex items-center justify-center font-semibold text-[16px] md:text-[22px] md:font-bold md:space-x-4 space-x-2"
>
<span class="">QUALITY</span>
<span>|</span>
<span class="">TRUST</span>
<span>|</span>
<span class="">PROFESSIONALISM</span>
<span>|</span>
<span class="">24/7 SUPPORT</span>
</div> -->
<h1
class="md:text-8xl text-center text-[38px] font-bold tracking-[1px] mt-12 mb-6"
>
HIGH-QUALITY PRDUCTS
</h1>
<div class="text-center font-medium md:text-lg space-y-[3px]">
<p class="hidden md:block">
At Pan Kore, we take pride in being your trusted partner for top-quality food products. Our goal is to consistently deliver value
</p>
<p class="hidden md:block">
while adapting to the evolving needs of our customers and the industry. We offer a diverse range of products, including
</p>
<p class="hidden md:block">crystal and refined sugar, lentils, premium rice, sesame seeds, peanuts, flour, and a growing list of other items.</p>
<!-- only visible in mobile view -->
<p class="md:hidden">
At Pan Kore, we take pride in being your trusted partner for top-quality food products.
</p>
</div>
<a
href="contactUs.html"
class="primary-button text-white md:px-8 md:py-[10px] px-6 py-[8px] rounded-lg font-semibold md:text-[16px] text-[14px] mt-12"
>
QUOTATION REQUEST
</a>
</div>
</div>
<div class="carousel-item relative">
<img
src="public/home/slider4.webp"
class="w-full h-screen object-cover"
alt="..."
/>
<div
class="absolute banner-content-animation inset-0 md:pt-28 text-white flex flex-col items-center justify-center px-3"
>
<!-- <div
class="flex items-center justify-center font-semibold text-[16px] md:text-[22px] md:font-bold md:space-x-4 space-x-2"
>
<span class="">QUALITY RELATIONSHIPS</span>
<span>|</span>
<span class="">HIGH-QUALITY </span>
<span>|</span>
<span class="">FOOD PRODUCTS</span>
<span>|</span>
<span class="">CUSTOMERS SATISFACTION</span>
</div> -->
<h1
class="md:text-8xl text-center text-[38px] font-bold tracking-[1px] mt-12 mb-6"
>
QUALITY RELATIONSHIPS
</h1>
<div
class="text-center font-medium md:text-lg text-center space-y-[3px]"
>
<p class="hidden md:block">
At Pan Kore, we value our relationships with suppliers and actively support their efforts to provide our customers with the highest
</p>
<p class="hidden md:block">
quality and safety. We facilitate clients with high-quality food products and prompt services to ensure a seamless
</p>
<p class="hidden md:block">and enjoyable experience.</p>
<!-- only visible in mobile view -->
<p class="md:hidden">
At Pan Kore, we value our relationships with suppliers and actively support their efforts
</p>
</div>
<a
href="contactUs.html"
class="primary-button text-white md:px-8 md:py-[10px] px-6 py-[8px] rounded-lg font-semibold md:text-[16px] text-[14px] mt-12"
>
QUOTATION REQUEST
</a>
</div>
</div>
</div>
<button
class="carousel-control-prev md:-ml-10 md:flex hidden"
type="button"
data-bs-target="#carouselExampleIndicators"
data-bs-slide="prev"
>
<img src="public/home/slider-pre.webp" />
<!-- <span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span> -->
</button>
<button
class="carousel-control-next md:-mr-10 md:flex hidden"
type="button"
data-bs-target="#carouselExampleIndicators"
data-bs-slide="next"
>
<img src="public/home/slider-next.webp" />
<!-- <span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span> -->
</button>
</section>
<!-- Section 2 -->
<section
class="flex md:flex-row sm:space-x-[90px] lg:space-x-4 justify-center flex-col bg-white md:py-14 py-8 wrapper max-sm:overflow-hidden"
>
<div class="flex md:flex-1 reveal fade-left">
<img
class="md:w-auto w-[275px] object-contain"
src="public/home/welcom.webp"
/>
<div
class="bg-purple self-center md:min-w-[185px] min-w-[150px] md:py-3.5 py-2.5 rounded-[22px] text-center text-white border-[8px] border-white md:-translate-x-[50%] -translate-x-[60%] reveal latePopOut"
>
<div>
<span class="font-bold md:text-7xl text-6xl">11</span>
<span class="font-bold text-xl">+</span>
</div>
<p class="text-md font-semibold mt-2.5 leading-[14px]">Years</p>
<p class="text-md font-semibold">Experience</p>
</div>
</div>
<div
class="flex flex-col space-y-3 md:space-y-0 justify-between flex-1 md:-ml-[40px] md:mt-0 mt-8 reveal fade-right"
>
<div>
<h6 class="text-purple font-bold md:text-xl text-2xl">
Pan Kore Your Leading
</h6>
<h4 class="md:text-[54px] text-[32px] font-bold">
Trading Supplier for Food Products
</h4>
</div>
<p class="font-[500] md:text-[16px] text-[16px] text-gray-600">
Welcome to Pan Kore, the premier trading company based in Dubai since 2011, specializes in food stuff. We're renowned for our unwavering commitment to delivering excellence in both products and services, surpassing industry standards. Our dedicated team focuses on customer satisfaction, understanding needs, and providing efficient services that set us apart from the competition.
</p>
<p class="font-[500] md:text-[16px] text-[16px] text-gray-600 pt-2">
Since our beginnings, Pan Kore has continually expanded its presence and now operates in multiple markets, in Africa including Sudan, Djibouti and China. We offer a diverse range of high-quality products tailored to meet the varied demands and preferences of these markets.
</p>
<div
class="grid grid-cols-2 font-semibold md:gap-3 gap-1 mt-4 md:mt-0"
>
<div>
<span class="text-purple font-bold text-md md:mr-2 mr-1"
>---</span
>
<span class="md:text-[18px] text-[16px] font-semibold"
>Core Level Product</span
>
</div>
<div>
<span class="text-purple font-bold text-md md:mr-2 mr-1"
>---</span
>
<span class="md:text-[18px] text-[16px] font-semibold"
>Highest - Quality Product</span
>
</div>
<div>
<span class="text-purple font-bold text-md md:mr-2 mr-1"
>---</span
>
<span class="md:text-[18px] text-[16px] font-semibold"
>Satisfaction Services</span
>
</div>
<div>
<span class="text-purple font-bold text-md md:mr-2 mr-1"
>---</span
>
<span class="md:text-[18px] text-[16px] font-semibold"
>24/7 Support</span
>
</div>
</div>
<a
href="whoWeAre.html"
class="primary-button self-start px-8 md:py-2.5 py-2 md:mt-0 mt-4 rounded-md text-white md:text-[16px] text-[16px] font-medium flex items-center justify-center"
>
View More
<i
class="fa fa-chevron-right md:text-[14px] text-[13px] ml-2"
aria-hidden="true"
></i>
</a>
</div>
</section>
<!-- Section 3 -->
<section class="">
<div
class="w-[100%] h-[550px] overflow-hidden relative reveal fade-top"
>
<div
class="absolute text-white z-10 text-center top-0 left-0 right-0 md:pt-20 pt-7 px-2"
>
<h3 class="font-semibold pt-1.5 text-xl mb-2">WELCOME TO</h3>
<h2
class="md:text-[54px] tracking-[1.5px] text-[36px] font-bold mb-2.5"
>
OUR BUSINESSES
</h2>
<!-- <p class="text-lg font-medium mb-1">
At Pan Kore, we take pride in being your trusted partner for top-quality food products. Our goal is to consistently deliver value while adapting to the
</p>
<p class="text-lg font-medium">
evolving needs of our customers and the industry. We offer a diverse range of products, including crystal and refined sugar, lentils, premium rice,
</p>
<p class="text-lg font-medium">
sesame seeds, peanuts, flour, and a growing list of other items. From our humble beginnings as a small trading company,
</p>
<p class="text-lg font-medium">
we've evolved to meet the varied demands of our clients.
</p> -->
</div>
<video
class="w-[100%] md:h-auto h-full object-cover"
autoplay
muted
loop
id="video"
>
<source src="public/home/our-business.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
<div
class="flex md:flex-row flex-col md:space-x-8 md:space-y-0 space-y-4 md:px-8 px-4 md:-translate-y-[50%] -translate-y-[25%]"
>
<div
id="section3-left"
class="flex-1 overflow-hidden relative reveal fade-left group cursor-pointer"
>
<img
class="w-[100%] md:h-[450px] h-[350px] group-hover:scale-125 transition-all duration-500"
src="public/home/pankore-business.webp"
/>
<a
href="pankoreBusiness.html"
class="absolute inset-0 bg-black/20 md:px-20 px-10 pb-14 pt-20 text-white flex flex-col justify-end"
>
<h3
class="md:font-semibold font-semibold text-[22px] tracking-[1.5px]"
>
Your Leading Trading
</h3>
<h2
class="md:font-bold font-semibold md:text-[44px] text-[28px] mt-2.5 uppercase mb-1 tracking-[0.5px]"
>
Supplier for Food
</h2>
<h2
class="md:font-bold font-semibold md:text-[44px] text-[28px] mb-5 uppercase tracking-[1px]"
>
Products
</h2>
<span
class="primary-button text-white px-8 py-[10px] text-[14px] font-bold self-start"
>
EXPLORE MORE
</span>
</a>
</div>
<div
id="section3-right"
class="flex-1 overflow-hidden reveal fade-right relative group cursor-pointer"
>
<img
class="w-[100%] md:h-[450px] h-[350px] group-hover:scale-125 transition-all duration-500"
src="public/home/product-img10.webp"
/>
<a
href="danBusiness.html"
class="absolute inset-0 bg-black/50 md:px-20 px-10 pb-14 pt-20 text-white flex flex-col justify-end"
>
<h3
class="font-semibold text-[24px] tracking-[1.5px]"
>
Specializing in
</h3>
<h2
class="md:font-bold font-semibold md:text-[44px] text-[28px] mt-2.5 uppercase mb-1 tracking-[0.5px]"
>
Foodstuff Import
</h2>
<h2
class="md:font-bold font-semibold md:text-[44px] text-[28px] mb-5 uppercase tracking-[1px]"
>
& Export
</h2>
<span
class="bg-yellowColor hover:bg-dark-gray hover:text-white text-black px-8 py-[10px] text-[14px] font-bold self-start"
>
EXPLORE MORE
</span>
</a>
</div>
</div>
</section>
<!-- Section 4 -->
<div class="relative">
<img
src="public/home/product-bg.webp"
class="absolute right-0 -top-12 md:block hidden"
/>
</div>
<section class="text-center max-w-[1400px] mx-auto bg-transparent">
<h3
class="text-purple font-bold pt-4 text-xl mb-2 -mt-44 bg-transparent"
>
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 bg-transparent">
Our customers value not only our exceptional products but also our efficient services, timely shipping, and unwavering support.
</p>
<p class="text-gray-700 text-lg font-semibold bg-transparent">
Over the years, these attributes have nurtured and strengthened our relationships with clients.
</p> -->
<!-- Web Slider ----------- -->
<div class="hidden md:block mt-5 bg-white">
<div
id="mySlider"
class="carousel slide relative pb-4"
data-bs-ride="carousel"
>
<!-- <div class="carousel-indicators home-carousel">
<button
type="button"
data-bs-target="#mySlider"
data-bs-slide-to="0"
class="active"
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="px-20">
<div class="carousel-inner">
<div class="carousel-item active home-carousel">
<!-- Item 1 -->
<div class="flex space-x-12 text-start">
<div class="flex-1 overflow-hidden">
<img
class="w-full h-[300px]"
src="public/home/product-img1.webp"
/>
<div
class="bg-[#e5e5e3] px-[28px] -translate-y-[45%] z-20 py-[18px] w-[89%] mx-auto"
>
<h5 class="text-[23px] font-bold mb-3">
White Refined Sugar
</h5>
<a
href="whiteRefinedSugar.html"
class="underline underline-offset-2 text-sm font-bold"
>View More</a
>
</div>
</div>
<div class="flex-1 overflow-hidden">
<img
class="w-full h-[300px]"
src="public/home/product-img2.webp"
/>
<div
class="bg-[#e5e5e3] px-[28px] -translate-y-[45%] z-20 py-[18px] w-[89%] mx-auto"
>
<h5 class="text-[23px] font-bold mb-3">
White Crystal Sugar
</h5>
<a
href="whiteCrystalSugar.html"
class="underline underline-offset-2 text-sm font-bold"
>View More</a
>
</div>
</div>
<div class="flex-1 overflow-hidden">
<img
class="w-full h-[300px]"
src="public/home/product-img3.webp"
/>
<div
class="bg-[#e5e5e3] px-[28px] -translate-y-[45%] z-20 py-[18px] w-[89%] mx-auto"
>
<h5 class="text-[23px] font-bold mb-3">
Parboiled Rice
</h5>
<a
href="proboiledRice.html"
class="underline underline-offset-2 text-sm font-bold"
>View More</a
>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="flex space-x-12 text-start">
<div class="flex-1 overflow-hidden">
<img
class="w-full h-[300px] overflow-hidden"
src="public/home/product-img4.webp"
/>
<div
class="bg-[#e5e5e3] px-[28px] -translate-y-[45%] z-20 py-[18px] w-[89%] mx-auto"
>
<h5 class="text-[23px] font-bold mb-3">
Short Grain Swarna
</h5>
<a
href="shortGrainSwarna.html"
class="underline underline-offset-2 text-sm font-bold"
>View More</a
>
</div>
</div>
<div class="flex-1 overflow-hidden">
<img
class="w-full h-[300px]"
src="public/home/product-img5.webp"
/>
<div
class="bg-[#e5e5e3] px-[28px] -translate-y-[45%] z-20 py-[18px] w-[89%] mx-auto"
>
<h5 class="text-[23px] font-bold mb-3">
Gadarif Halawa Sesame
</h5>
<a
href="gadarifHalawaSesame.html"
class="underline underline-offset-2 text-sm font-bold"
>View More</a
>
</div>
</div>
<div class="flex-1 overflow-hidden">
<img
class="w-full h-[300px]"
src="public/home/product-img6.webp"
/>
<div
class="bg-[#e5e5e3] px-[28px] -translate-y-[45%] z-20 py-[18px] w-[89%] mx-auto"
>
<h5 class="text-[23px] font-bold mb-3">
Non-Gadrif Halawa Sesame
</h5>
<a
href="nonGadrifSesame.html"
class="underline underline-offset-2 text-sm font-bold"
>View More</a
>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="flex space-x-12 text-start">
<div class="flex-1 overflow-hidden">
<img
class="w-full h-[300px]"
src="public/home/product-img8.webp"
/>
<div
class="bg-[#e5e5e3] px-[28px] -translate-y-[45%] z-20 py-[18px] w-[89%] mx-auto"
>
<h5 class="text-[23px] font-bold mb-3">Red Sesame</h5>
<a
href="redSesame.html"
class="underline underline-offset-2 text-sm font-bold"
>View More</a
>
</div>
</div>
<div class="flex-1 overflow-hidden">
<img
class="w-full h-[300px]"
src="public/home/product-img7.webp"
/>
<div
class="bg-[#e5e5e3] px-[28px] -translate-y-[45%] z-20 py-[18px] w-[89%] mx-auto"
>
<h5 class="text-[23px] font-bold mb-3">
kernel Peanuts
</h5>
<a
href="kernelPeanuts.html"
class="underline underline-offset-2 text-sm font-bold"
>View More</a
>
</div>
</div>
<div class="flex-1 overflow-hidden">
<img
class="w-full h-[300px]"
src="public/home/product-img9.webp"
/>
<div
class="bg-[#e5e5e3] px-[28px] -translate-y-[45%] z-20 py-[18px] w-[89%] mx-auto"
>
<h5 class="text-[23px] font-bold mb-3">White Flour</h5>
<a
href="whiteFlour.html"
class="underline underline-offset-2 text-sm font-bold"
>View More</a
>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="flex space-x-12 text-start">
<div class="flex-1 overflow-hidden">
<img
class="w-full h-[300px]"
src="public/home/product-img10.webp"
/>
<div
class="bg-[#e5e5e3] px-[28px] -translate-y-[45%] z-20 py-[18px] w-[89%] mx-auto"
>
<h5 class="text-[23px] font-bold mb-3">Red Lentils</h5>
<a
href="redLentils.html"
class="underline underline-offset-2 text-sm font-bold"
>View More</a
>
</div>
</div>
<div class="flex-1 overflow-hidden">
<img
class="w-full h-[300px]"
src="public/home/product-img11.webp"
/>
<div
class="bg-[#e5e5e3] px-[28px] -translate-y-[45%] z-20 py-[18px] w-[89%] mx-auto"
>
<h5 class="text-[23px] font-bold mb-3">
Milk Powder - Full Cream
</h5>
<a
href="milkPowderFullCream.html"
class="underline underline-offset-2 text-sm font-bold"
>View More</a
>
</div>
</div>
<div class="flex-1 overflow-hidden">
<img
class="w-full h-[300px]"
src="public/home/product-img12.webp"
/>
<div
class="bg-[#e5e5e3] px-[28px] -translate-y-[45%] z-20 py-[18px] w-[89%] mx-auto"
>
<h5 class="text-[23px] font-bold mb-3">Edible Oil</h5>
<a
href="edibleOil.html"
class="underline underline-offset-2 text-sm font-bold"
>View More</a
>
</div>
</div>
</div>
</div>
<!-- Add more carousel items as needed -->
</div>
</div>
<button
class="absolute left-0 bottom-[200px] 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-[200px] 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 container mt-5">
<div
id="mobileSlider"
class="carousel slide relative pb-12"
data-bs-ride="carousel"
>
<!-- <div class="home-carousel carousel-indicators">
<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-6">
<div class="carousel-inner text-start">
<!-- Item 1 -->
<div class="carousel-item active">
<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-[80%] mx-auto"
>
<h5 class="text-xl font-bold md:mb-3 mb-1">
White Refined Sugar
</h5>
<a
href="whiteRefinedSugar.html"
class="underline underline-offset-2 text-sm font-bold"
>View More</a
>
</div>
</div>
<div class="carousel-item">
<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-[80%] mx-auto"
>
<h5 class="text-xl font-bold md:mb-3 mb-1">
White Crystal Sugar
</h5>
<a
href="whiteCrystalSugar.html"
class="underline underline-offset-2 text-sm font-bold"
>View More</a
>
</div>
</div>
<div class="carousel-item">
<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-[80%] mx-auto"
>
<h5 class="text-xl font-bold md:mb-3 mb-1">
Parboiled Rice
</h5>
<a
href="proboiledRice.html"
class="underline underline-offset-2 text-sm font-bold"
>View More</a
>
</div>
</div>
<div class="carousel-item">
<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-[80%] 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-sm font-bold"
>View More</a
>
</div>
</div>
<div class="carousel-item">
<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-[80%] 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-sm font-bold"
>View More</a
>
</div>
</div>
<div class="carousel-item">
<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-[80%] 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 font-bold"
>View More</a
>
</div>
</div>
<div class="carousel-item">
<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-[80%] 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 font-bold"
>View More</a
>
</div>
</div>
<div class="carousel-item">
<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-[80%] 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 font-bold"
>View More</a
>
</div>
</div>
<div class="carousel-item">
<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-[80%] 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 font-bold"
>View More</a
>
</div>
</div>
<div class="carousel-item">
<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-[80%] 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 font-bold"
>View More</a
>
</div>
</div>
<div class="carousel-item">
<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-[80%] 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 font-bold"
>View More</a
>
</div>
</div>
<div class="carousel-item">
<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-[80%] 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 font-bold"
>View More</a
>
</div>
</div>
<!-- Add more carousel items as needed -->
</div>
</div>
<button
class="absolute -left-3 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-3 bottom-[200px] md:-right-[92px] 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>
<section class="bg-[#e5e5e3]">
<div
class="max-w-[1500px] mx-auto relative flex md:flex-row flex-col items-center md:justify-between justify-center md:h-[150px] md:px-36 h-[100px] max-sm:space-y-2"
>
<img
class="absolute left-0 h-full hidden md:block"
src="public/home/here-icon1.webp"
/>
<h5
class="md:text-6xl text-2xl pl-3 md:font-bold font-semibold text-gray-800 z-20"
>
Connect with Us
</h5>
<a
href="contactUs.html"
class="max-sm:ml-3 max-sm:max-w-[130px] primary-button md:px-6 text-[15px] mr-3 px-3 md:py-[11px] py-[8px] font-semibold z-20 text-white"
>
CONTACT US +
</a>
<img
class="absolute right-0 h-full hidden md:block"
src="public/home/here-icon2.webp"
/>
</div>
</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>