File: /home/aliazzsr/html.vqode.com/Pankore/contactUs.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="contact-body">
<main>
<header
class="fixed w-full top-0 z-50 py-4 scroll-header max-sm:max-w-[100vw]"
>
<nav class="z-50 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="px-4 menu">
<div class="flex flex-col h-full wrapper">
<div
class="flex items-center justify-between py-4 font-semibold text-black"
>
<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="hidden space-x-3 md:block">
<i
class="fa fa-phone text-purple text-[13px]"
aria-hidden="true"
></i>
<span>+971 4227 4088</span>
</div>
<div class="hidden space-x-3 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 justify-center flex-1 md:justify-between 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" 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 active" 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="block space-x-2 md:hidden">
<i
class="fa fa-phone text-purple text-[13px]"
aria-hidden="true"
></i>
<span>+971 4227 4088</span>
</div>
<div class="block space-x-2 md:hidden">
<i
class="fa fa-envelope text-purple text-[16px]"
aria-hidden="true"
></i>
<span>[email protected]</span>
</div>
</div>
</div>
</div>
<section>
<div
class="contact-banner-image md:h-[75vh] md:max-h-[700px] md:min-h-[600px] min-h-[425px] pt-32 md:pt-4"
>
<div
class="flex flex-col items-center justify-center h-full text-white wrapper banner-content-animation"
>
<h1
class="md:text-[92px] text-[44px] font-bold tracking-[1px] mt-12 mb-6 md:-mt-10 md:mb-0"
>
CONTACT US
</h1>
</div>
</div>
</section>
<section class="relative wrapper">
<div class="text-center md:mt-4 mt-2.5 z-30">
<h3 class="pt-4 mb-1 text-xl font-bold text-purple">PANKORE</h3>
<h2
class="md:text-[54px] text-[36px] tracking-[1px] font-bold md:mb-4 mb-2"
>
WE DELIVER
</h2>
</div>
</section>
<!-- Web View -->
<section
class="grid grid-cols-1 mt-4 mb-8 wrapper md:grid-cols-4 md:gap-6 gap-y-2 gap-x-2 md:pt-3 md:mb-16 max-sm:hidden"
>
<div
style="--i: 0s"
class="standout border border-gray md:px-[20px] py-[20px] px-[14px] rounded-[24px] reveal fade-stagger-top"
>
<div class="contactPageAlign">
<img class="mb-[15px]" src="public/contactUs/icon1.webp" />
</div>
<h6 class="text-[26px] font-semibold pb-2">Best Price</h6>
</div>
<div
style="--i: 0.5s"
class="standout border border-gray md:px-[20px] py-[20px] px-[14px] rounded-[24px] reveal fade-stagger-top"
>
<div class="contactPageAlign">
<img class="mb-[15px]" src="public/contactUs/icon2.webp" />
</div>
<h6 class="text-[26px] font-semibold pb-2">Quality Products</h6>
</div>
<div
style="--i: 1s"
class="standout border border-gray md:px-[20px] py-[20px] px-[14px] rounded-[24px] reveal fade-stagger-top"
>
<div class="contactPageAlign">
<img class="mb-[15px]" src="public/contactUs/icon3.webp" />
</div>
<h6 class="text-[26px] font-semibold pb-2">Good Support</h6>
</div>
<div
style="--i: 1.5s"
class="standout border border-gray md:px-[20px] py-[20px] px-[14px] rounded-[24px] reveal fade-stagger-top"
>
<div class="contactPageAlign">
<img class="mb-[15px]" src="public/contactUs/icon4.webp" />
</div>
<h6 class="text-[26px] font-semibold pb-2">Satisfaction</h6>
</div>
</section>
<!-- Mobile View -->
<section
class="grid grid-cols-1 mt-4 mb-8 wrapper md:grid-cols-4 md:gap-6 gap-y-2 gap-x-2 md:pt-3 md:mb-16 md:hidden"
>
<div
class="standout border border-gray md:px-[20px] py-[20px] px-[14px] rounded-[24px] reveal fade-top"
>
<img class="mb-[15px]" src="public/contactUs/icon1.webp" />
<h6 class="text-[26px] font-semibold pb-2">Best Price</h6>
<p class="font-medium text-paragraph-color">
For any business, customer are always at the center. Being a web and
mobile app development company.
</p>
</div>
<div
class="standout border border-gray md:px-[20px] py-[20px] px-[14px] rounded-[24px] reveal fade-top"
>
<img class="mb-[15px]" src="public/contactUs/icon2.webp" />
<h6 class="text-[26px] font-semibold pb-2">Quality Products</h6>
<p class="font-medium text-paragraph-color">
For any business, customer are always at the center. Being a web and
mobile app development company.
</p>
</div>
<div
class="standout border border-gray md:px-[20px] py-[20px] px-[14px] rounded-[24px] reveal fade-top"
>
<img class="mb-[15px]" src="public/contactUs/icon3.webp" />
<h6 class="text-[26px] font-semibold pb-2">Good Support</h6>
<p class="font-medium text-paragraph-color">
For any business, customer are always at the center. Being a web and
mobile app development company.
</p>
</div>
<div
class="standout border border-gray md:px-[20px] py-[20px] px-[14px] rounded-[24px] reveal fade-top"
>
<img class="mb-[15px]" src="public/contactUs/icon4.webp" />
<h6 class="text-[26px] font-semibold pb-2">Satisfaction</h6>
<p class="font-medium text-paragraph-color">
For any business, customer are always at the center. Being a web and
mobile app development company.
</p>
</div>
</section>
<section
class="grid grid-cols-1 gap-8 mb-8 wrapper md:grid-cols-3 text-dark-gray"
>
<div class="md:col-span-2">
<h4 class="font-bold md:text-[58px] text-[36px] mb-1.5">
LET'S GET IN TOUCH!
</h4>
<form
class="grid grid-cols-1 mt-6 contact-form md:grid-cols-2 gap-x-7 gap-y-5"
>
<div class="">
<label class="text-[18px] font-medium block mb-2" for="name"
>Name <span class="text-red-500">*</span></label
>
<input
class="px-[20px] py-[13px] rounded-[8px] w-full placeholder:text-[#9ca3af] text-[#9ca3af] font-medium"
placeholder="Please enter name"
type="text"
id="name"
name="name"
required
/>
</div>
<div class="">
<label class="text-[18px] font-medium block mb-2" for="email"
>Email <span class="text-red-500">*</span></label
>
<input
class="px-[20px] py-[13px] rounded-[8px] w-full placeholder:text-[#9ca3af] text-[#9ca3af] font-medium"
placeholder="Please enter email"
type="text"
id="email"
name="email"
required
/>
</div>
<div class="">
<label class="text-[18px] font-medium block mb-2" for="phone"
>Phone <span class="text-red-500">*</span></label
>
<input
class="px-[20px] py-[13px] rounded-[8px] w-full placeholder:text-[#9ca3af] text-[#9ca3af] font-medium"
placeholder="Please enter phone"
type="text"
id="phone"
name="phone"
required
/>
</div>
<div class="">
<label class="text-[18px] font-medium block mb-2" for="subject"
>Subject <span class="text-red-500">*</span></label
>
<input
class="px-[20px] py-[13px] rounded-[8px] w-full placeholder:text-[#9ca3af] text-[#9ca3af] font-medium"
placeholder="Please enter name"
type="text"
id="subject"
name="subject"
required
/>
</div>
<div class="w-full md:col-span-2">
<label class="text-[18px] font-medium block mb-2" for="message"
>Message <span class="text-red-500">*</span></label
>
<textarea
rows="4"
class="px-[20px] py-[13px] rounded-[8px] w-full placeholder:text-[#9ca3af] text-[#9ca3af] font-medium resize-none"
placeholder="Please enter name"
type="text"
id="message"
name="message"
required
></textarea>
</div>
<div class="flex justify-end w-full md:col-span-2">
<button
class="px-4 py-2 font-semibold text-white rounded-md bg-purple"
>
SUBMIT
</button>
</div>
</form>
</div>
<div class="relative space-y-2">
<img
class="absolute -right-[40px] md:block hidden reveal fade-right -top-[22px] -z-10"
src="public/whoWeAre/dot1.webp"
/>
<div
class="standout border border-gray bg-white md:px-[24px] py-[20px] px-[16px] rounded-[22px] reveal fade-right"
>
<img class="mb-[15px]" src="public/contactUs/icon5.webp" />
<h6 class="text-[26px] font-semibold pb-[6px]">Our Office</h6>
<p class="text-paragraph-color font-medium text-[17px]">
Office A908 | Al Shaala Building | Port Saeed - Dubai - UAE
</p>
</div>
<div
class="standout border border-gray md:px-[24px] py-[20px] px-[16px] rounded-[22px] reveal fade-right"
>
<img class="mb-[15px]" src="public/contactUs/icon6.webp" />
<h6 class="text-[26px] font-semibold pb-[6px]">Phone / Whatsapp</h6>
<p class="text-paragraph-color font-medium text-[20px]">
+971 4227 4088
</p>
</div>
<div
class="standout border border-gray md:px-[24px] py-[20px] px-[16px] rounded-[22px] reveal fade-right"
>
<img class="mb-[15px]" src="public/contactUs/icon7.webp" />
<h6 class="text-[26px] font-semibold pb-[6px]">Email Us</h6>
<p class="text-paragraph-color font-medium text-[20px]">
[email protected]
</p>
</div>
<div
class="standout border border-gray md:px-[24px] py-[20px] px-[16px] rounded-[22px] reveal fade-right"
>
<img class="mb-[15px]" src="public/contactUs/icon8.webp" />
<h6 class="text-[26px] font-semibold pb-[6px]">P.O Box</h6>
<p class="text-paragraph-color font-medium text-[20px]">15138</p>
</div>
</div>
</section>
<section class="mb-10 overflow-hidden wrapper">
<!-- <img class="reveal fade-top" src="public/contactUs/map.webp" /> -->
<iframe
src="https://www.google.com/maps/embed?pb=!1m17!1m12!1m3!1d3608.401542226823!2d55.32949827538371!3d25.257074377672446!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m2!1m1!2zMjXCsDE1JzI1LjUiTiA1NcKwMTknNTUuNSJF!5e0!3m2!1sen!2s!4v1695631075553!5m2!1sen!2s"
width="100%"
height="400"
style="border: 0"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
></iframe>
</section>
</main>
<section class="transparent-section"></section>
<footer class="justify-between hidden pt-3 pb-6 md:flex bg-purple md:pb-0">
<img class="" src="public/header_footer/footer-left-sugarcane.webp" />
<div class="flex-1 flex flex-col max-w-[800px]">
<div class="flex justify-between flex-1 w-full pt-10 text-white">
<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="mt-4 underline underline-offset-2"
>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 justify-between pt-4 pb-6 bg-purple md:pb-0 md:hidden"
>
<div class="flex justify-between flex-1 px-6 pt-10 text-white">
<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="mt-4 underline underline-offset-2"
>View All</a
>
</nav>
</div>
</div>
<div class="px-4 mt-8 mb-4 text-white">
<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>
<script src="javascript/header-footer.js"></script>
</body>
</html>