File: /home/aliazzsr/html.vqode.com/Pankore/danBusiness.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="danBusiness-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/danBusiness/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" 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
class="dan-banner-image md:h-[80vh] md:min-h-[600px] min-h-[425px]"
>
<div
class="pt-16 h-full text-white flex flex-col items-center justify-center px-3 banner-content-animation"
>
<h1
class="typewriter md:text-[92px] text-center [36px] font-bold tracking-[1px] mt-12 mb-6"
>
DAN'S ONGOING GROWTH
</h1>
<div class="text-center font-medium md:text-lg space-y-[3px]">
<p class="hidden md:block">
DAN is remains committed to maintaining quality at competitive prices while providing good customer service and transparency.
</p>
<p class="hidden md:block">
The company is strategically planning to expand into Arab, African, and global markets. Our growth is driven by
</p>
<p class="hidden md:block">a commitment to quality and meeting customer needs worldwide.</p>
<!-- only visible in mobile view -->
<p class="md:hidden">
DAN is remains committed to maintaining quality at competitive prices while providing good customer service and transparency. The company is strategically planning to expand into Arab, African, and global markets. Our growth is driven by a commitment to quality and meeting customer needs worldwide.
</p>
</div>
<a
href="contactUs.html"
class="primary-button bg-yellowColor 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>
</section>
<section
class="wrapper md:mt-16 max-sm:mt-6 grid md:grid-cols-2 grid-cols-1 md:gap-8 max-sm:gap-4 md:pb-14 pb-2 max-sm:overflow-x-hidden"
>
<div class="flex items-center justify-between reveal fade-left">
<img
src="public/danBusiness/img1.webp"
class="rounded-[24px] w-[26%] h-full"
/>
<img
src="public/danBusiness/img2.webp"
class="rounded-[24px] w-[70%] h-full"
/>
</div>
<div class="flex flex-col justify-center reveal fade-right md:pt-3">
<h6 class="text-yellowColor font-semibold md:text-xl text-2xl">
SPECIALIZING IN FOODSTUFF
</h6>
<h4
class="md:text-[54px] text-[32px] font-bold mb-3 md:leading-[56px] pr-14"
>
IMPORT & EXPORT
</h4>
<p
class="md:font-semibold font-semibold md:text-[21px] text-[18px] leading-7 text-dark-gray mb-3.5"
>
Ready to experience excellence in foodstuff import and export? Connect with DAN today and discover the quality and value we bring to the table.
</p>
<p
class="font-[500] md:text-[18px] text-[17px] text-gray-600 text-paragraph-color leading-[28px]"
>
DAN Foodstuff Trading Company L.L.C, a UAE-based company specializing in the import, export, and trading of foodstuff. Established in 2017, DAN has quickly gained recognition in the foodstuff industry for its dedication to delivering high-quality products across a wide range of commodities.
</p>
</div>
</section>
<section
class="wrapper flex flex-col md:flex-row md:space-x-8 max-sm:space-y-6 pb-14 md:mt-14"
>
<div
class="flex flex-col justify-center md:w-[44%] reveal fade-left pt-3"
>
<h6 class="text-yellowColor font-semibold md:text-xl text-2xl mb-2">
DEDICATED TO VALUING CUSTOMERS
</h6>
<h4
class="md:text-[56px] text-[32px] font-bold mb-2.5 md:leading-[56px] pr-14"
>
AND PROVIDING EFFECTIVE SERVICE
</h4>
<p
class="md:text-[18px] text-[17px] text-gray-600 text-dark-gray leading-[28px] mt-2 font-medium"
>
At DAN, we are committed to offer high-quality food products with a focus on providing reliable delivery services. We've made investments in our team, processes, and technologies, emphasizing a customer-centric approach that helps build good relationships with our clients.
</p>
</div>
<div
class="flex rounded-[24px] overflow-hidden relative md:w-[56%] reveal fade-right md:min-h-[350px]"
>
<img
class="flex-1 w-[50%] h-full"
src="public/danBusiness/img3.webp"
/>
<img
class="flex-1 w-[50%] h-full"
src="public/danBusiness/img4.webp"
/>
<div
class="bg-white reveal latePopOut rounded-[24px] text-center absolute top-[50%] left-[50%] w-[185px] pb-[32px] pt-[42px] -translate-y-[50%] -translate-x-[50%]"
>
<h3
class="text-yellowColor font-bold text-[80px] leading-[48px] pl-2"
>
6 <span class="text-[24px] -ml-2.5">+</span>
</h3>
<h6 class="font-semibold text-[18px]">Years</h6>
<h6 class="font-semibold text-[18px]">Experience</h6>
</div>
</div>
</section>
<section
class="dan-banner2-image md:h-[370px] h-[325px] text-center md:pt-20 pt-12 relative"
>
<div class="text-white font-bold md:text-[56px] text-[32px]">
<h4>Get In Touch For</h4>
<h4>Further Information</h4>
</div>
<button
class="primary-button bg-yellowColor text-[15px] mt-10 text-white font-semibold px-[38px] py-[15px] rounded-full"
>
<i class="fa-regular fa-envelope mr-2"></i>
MAIL US NOW
</button>
</section>
<section
class="wrapper grid md:grid-cols-4 grid-cols-2 justify-between md:py-12 py-8 gap-y-5"
>
<div
style="--i: 0s"
class="flex flex-col items-center reveal fade-top fade-stagger-top"
>
<div class="relative flex items-center justify-center">
<img class="" src="public/danBusiness/shape-icon.webp" />
<div class="absolute text-white text-[34px] font-bold">
10 <span class="text-[18px] font-semibold -ml-1.5">+</span>
</div>
</div>
<h3 class="text-yellowColor md:text-[20px] text-[18px] mt-3">
Core Level Product
</h3>
</div>
<div
style="--i: 0.5s"
class="flex flex-col items-center reveal fade-top fade-stagger-top"
>
<div class="relative flex items-center justify-center">
<img class="" src="public/danBusiness/shape-icon.webp" />
<div class="absolute text-white text-[34px] font-bold">
100 <span class="text-[18px] font-semibold -ml-1.5">%</span>
</div>
</div>
<h3 class="text-yellowColor md:text-[20px] text-[18px] mt-3">
High-Quality Products
</h3>
</div>
<div
style="--i: 1s"
class="flex flex-col items-center reveal fade-top fade-stagger-top"
>
<div class="relative flex items-center justify-center">
<img class="" src="public/danBusiness/shape-icon.webp" />
<div class="absolute text-white text-[34px] font-bold">
100 <span class="text-[18px] font-semibold -ml-1.5">%</span>
</div>
</div>
<h3 class="text-yellowColor md:text-[20px] text-[18px] mt-3">
Satisfaction Services
</h3>
</div>
<div
style="--i: 1.5s"
class="flex flex-col items-center reveal fade-top fade-stagger-top"
>
<div class="relative flex items-center justify-center">
<img class="" src="public/danBusiness/shape-icon.webp" />
<div class="absolute text-white text-[34px] font-bold">
24 <span class="text-[18px] font-semibold -ml-1.5">/</span>7
</div>
</div>
<h3 class="text-yellowColor md:text-[20px] text-[18px] mt-3">
Support
</h3>
</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/danBusiness-header-footer.js"></script>
</body>
</html>