1 2 3<!DOCTYPE html> 4<html lang="en"> 5<head> 6<!-- Google Tag Manager -->
7<script>
vendor: 331 bytes, lines 7-11
7(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': 8new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], 9j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 10'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); 11})(window,document,'script','dataLayer','
11GTM-PB7Z7TBM
vendor: 3 bytes, line 11
11');
11</script>
11 12<!-- End Google Tag Manager --> 13<!--
13<script src="https://app.dante-ai.com/bubble-embed.js?kb_id=3be32baa-3dea-48b3-a60d-db00ba966bdb&token=448e0b4e-81ae-4017-afb4-6d5b83300ffd&modeltype=gpt-4-omnimodel-mini&tabs=false"></script>
13--> 14<link rel="icon" href="/favicon.png" type="image/png"> 15 16 <meta charset="UTF-8"> 17 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 18 <title>Aero Freight & Logistics</title> 19
19<script src="https://cdn.tailwindcss.com"></script>
19 20
20<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
20 21
21<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
21 22
22<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
22 23
23<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
23 24 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css"> 25 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> 26 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"> 27 <link rel="stylesheet" href="css/style.css?479489917">
vendor: 81 bytes, lines 27-29
27 28 <script src="https://www.google.com/recaptcha/api.js" async defer></script> 29
29<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" rel="stylesheet" /> 30 31<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet"> 32 33
33<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
33 34 <link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css" rel="stylesheet"> 35 36</head> 37<body class="font-sans"> 38<!-- Google Tag Manager (noscript) -->
vendor: 69 bytes, lines 38-39
38 39<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
39GTM-PB7Z7TBM
vendor: 85 bytes, lines 39-40
39" 40height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
41<!-- End Google Tag Manager (noscript) --> 42 <!-- Header --> 43 <header class="header fixed top-0 left-0 right-0 py-4 bg-white"> 44 <div class="container mx-auto px-4 flex justify-between items-center"> 45 <!-- Logo with animation --> 46 <div class="logo w-48 transition-all duration-300"> 47 <a href="index.php" class="flex items-center"> 48 <img src="images/aerologo1.png" > 49 </a> 50 </div> 51 52 <!-- Desktop Menu --> 53 <nav class="header-menu hidden md:block"> 54 <ul class="flex space-x-8"> 55 <li class="has-dropdown relative"> 56 <a href="about-aero-freight.php" class="text-gray-700 hover:text-[#20C261] font-medium transition-colors">About Us <i class="fas fa-chevron-down text-xs ml-1"></i></a> 57 <div class="dropdown-menu absolute top-full left-0 mt-2 w-48 bg-white rounded-md shadow-lg py-2 z-10" style="width:280px!important;"> 58 <a href="why-choose-us.php" class="block px-4 py-2 text-gray-700 hover:bg-[#20C261]/10 hover:text-[#20C261]">Why Choose Us</a> 59 <a href="certifications-achievements.php" class="block px-4 py-2 text-gray-700 hover:bg-[#20C261]/10 hover:text-[#20C261]">Achievements</a> 60 <!--<a href="our-process-flow.php" class="block px-4 py-2 text-gray-700 hover:bg-[#20C261]/10 hover:text-[#20C261]">Our Process Flow</a>--> 61 <a href="environmental-policy.php" class="block px-4 py-2 text-gray-700 hover:bg-[#20C261]/10 hover:text-[#20C261]">Our Environmental Policy</a> 62 </div> 63 </li> 64 65 <li class="has-dropdown relative"> 66 <a href="#" class="text-gray-700 hover:text-[#20C261] font-medium transition-colors">Services <i class="fas fa-chevron-down text-xs ml-1"></i></a> 67 <div class="dropdown-menu absolute top-full left-0 mt-2 bg-white rounded-md shadow-lg py-2 z-10" style="width:350px;left:-112px;"> 68 <a href="3pl-logistics-solutions.php" class="block px-4 py-2 text-gray-700 hover:bg-[#20C261]/10 hover:text-[#20C261]">3PL Logistics </a> 69 <a href="fairs-exhibition-logistics.php" class="block px-4 py-2 text-gray-700 hover:bg-[#20C261]/10 hover:text-[#20C261]">Fairs & Exhibition Logistics</a> 70 <a href="supply-chain-solutions.php" class="block px-4 py-2 text-gray-700 hover:bg-[#20C261]/10 hover:text-[#20C261]">Supply Chain Solutions</a> 71 <a href="military-government-transport-logistics.php" class="block px-4 py-2 text-gray-700 hover:bg-[#20C261]/10 hover:text-[#20C261]">Military & Government Transport & Logistics</a> 72 <a href="breakbulk-and-out-of-gauge-solutions.php" class="block px-4 py-2 text-gray-700 hover:bg-[#20C261]/10 hover:text-[#20C261]">Break Bulk and Outgauge Solutions</a> 73 <a href="reefer-cargo-service.php" class="block px-4 py-2 text-gray-700 hover:bg-[#20C261]/10 hover:text-[#20C261]">Reefer Cargo Service</a> 74 <a href="dangerous-goods-handling.php" class="block px-4 py-2 text-gray-700 hover:bg-[#20C261]/10 hover:text-[#20C261]">Dangerous Goods Handling</a> 75 <a href="liner-agency.php" class="block px-4 py-2 text-gray-700 hover:bg-[#20C261]/10 hover:text-[#20C261]">Liner Agency</a> 76 <a href="ship-agency.php" class="block px-4 py-2 text-gray-700 hover:bg-[#20C261]/10 hover:text-[#20C261]">Ship Agency</a> 77 <a href="chartering.php" class="block px-4 py-2 text-gray-700 hover:bg-[#20C261]/10 hover:text-[#20C261]">Chartering</a> 78 </div> 79 </li> 80 <li><a href="index.php#email" class="text-gray-700 hover:text-[#20C261] font-medium transition-colors">Contact Us</a> 81 </li> 82 </ul> 83 </nav> 84 85 <!-- Mobile Menu Toggle --> 86 <button class="mobile-menu-toggle md:hidden text-gray-700 focus:outline-none"> 87 <i class="fas fa-bars text-2xl"></i> 88 </button> 89 </div> 90 91 <!-- Mobile Menu --> 92 <div class="mobile-menu container mx-auto px-4 bg-white md:hidden"> 93 <ul class="py-2"> 94 <li class="border-b border-gray-100"> 95 <a href="about-aero-freight.php" class="block py-3 text-gray-700 hover:text-[#20C261]">About Us</a> 96 <ul class="pl-4"> 97 <li><a href="why-choose-us.php" class="block py-2 text-gray-600 hover:text-[#20C261]">Why Choose Us</a></li> 98 <li><a href="certifications-achievements.php" class="block py-2 text-gray-600 hover:text-[#20C261]">Achievements</a></li> 99 <!-- <li><a href="our-process-flow.php" class="block py-2 text-gray-600 hover:text-[#20C261]">Our Process Flow</a></li>--> 100 <li><a href="environmental-policy.php" class="block py-2 text-gray-600 hover:text-[#20C261]">Our Environmental Policy</a></li> 101 </ul> 102 </li> 103 <li class="border-b border-gray-100"> 104 <a href="#" class="block py-3 text-gray-700 hover:text-[#20C261]">Services</a> 105 <ul class="pl-4"> 106 <li><a href="3pl-logistics-solutions.php" class="block py-2 text-gray-600 hover:text-[#20C261]">3PL Logistics</a></li> 107 <li><a href="fairs-exhibition-logistics.php" class="block py-2 text-gray-600 hover:text-[#20C261]">Fairs & Exhibition Logistics</a></li> 108 <li><a href="supply-chain-solutions.php" class="block py-2 text-gray-600 hover:text-[#20C261]">Supply Chain Solutions</a></li> 109 <li><a href="military-government-transport-logistics.php" class="block py-2 text-gray-600 hover:text-[#20C261]">Military & Government Transport & Logistics</a></li> 110 <li>
110<a href="breakbulk-and-out-of-gauge-solutions.php" class="block py-2 text-gray-600 hover:text-[#20C261]">Break Bulk and Outgauge Solutions</a></li> 111 <li><a href="reefer-cargo-service.php" class="block py-2 text-gray-600 hover:text-[#20C261]">Reefer Cargo Service</a></li> 112 <li><a href="dangerous-goods-handling.php" class="block py-2 text-gray-600 hover:text-[#20C261]">Dangerous Goods Handling</a></li> 113 <li><a href="liner-agency.php" class="block py-2 text-gray-600 hover:text-[#20C261]">Liner Agency</a></li> 114 <li><a href="ship-agency.php" class="block py-2 text-gray-600 hover:text-[#20C261]">Ship Agency Agency</a></li> 115 <li><a href="chartering.php" class="block py-2 text-gray-600 hover:text-[#20C261]">Chartering</a></li> 116 </ul> 117 </li> 118 <li><a href="index.php#email" class="block py-3 text-gray-700 hover:text-[#20C261]">Contact</a></li> 119 </ul> 120 </div> 121 </header> 122 <!-- Cookie Consent Banner --> 123<div id="cookie-banner" style=" 124 position: fixed; 125 bottom: 0; 126 left: 0; 127 width: 100%; 128 background-color: #fff; 129 color: #000; 130 padding: 15px; 131 box-shadow: 0 -2px 5px rgba(0,0,0,0.1); 132 display: none; 133 z-index: 999999; 134 font-family: Arial, sans-serif; 135"> 136 <div style="max-width: 800px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;"> 137 <div style="flex: 1; margin-bottom: 10px;"> 138 This website uses cookies to enhance the user experience. 139 </div> 140 <div style="flex-shrink: 0;"> 141 <button onclick="handleCookieConsent(true)" style="margin-right: 10px; padding: 8px 16px; background-color: #20C261; color: white; border: none; border-radius: 4px; cursor: pointer;">Accept</button> 142 <button onclick="handleCookieConsent(false)" style="padding: 8px 16px; background-color: #e0e0e0; color: black; border: none; border-radius: 4px; cursor: pointer;">Reject</button> 143 </div> 144 </div> 145</div> 146
147<script> 148 function setCookie(name, value, days) { 149 let expires = ""; 150 if (days) { 151 const date = new Date(); 152 date.setTime(date.getTime() + days*24*60*60*1000); 153 expires = "; expires=" + date.toUTCString(); 154 } 155 document.cookie = name + "=" + (value || "") + expires + "; path=/"; 156 } 157 158 function getCookie(name) { 159 const nameEQ = name + "="; 160 const ca = document.cookie.split(';'); 161 for(let i = 0; i < ca.length; i++) { 162 let c = ca[i]; 163 while (c.charAt(0) === ' ') c = c.substring(1, c.length); 164 if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length); 165 } 166 return null; 167 } 168 169 function handleCookieConsent(accepted) { 170 setCookie("cookieConsent", accepted ? "accepted" : "rejected", 365); 171 document.getElementById("cookie-banner").style.display = "none"; 172 } 173 174 window.onload = function() { 175 const consent = getCookie("cookieConsent"); 176 if (!consent) { 177 document.getElementById("cookie-banner").style.display = "block"; 178 } 179 } 180</script>
180 181 182 <!-- Main Content --> 183 <main class="pt-16"> 184 <!-- Slider Section --> 185 <section class="slider"> 186 <div class="slider-container"> 187 <div class="slide relative text-white"> 188 <img src="images/sliders/slider5.jpg" alt="Slide 1" class="w-full h-screen object-cover"> 189 <div class="absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-40 p-4 text-center"> 190 <h1 class="text-4xl md:text-5xl font-bold mb-4">Global Freight Logistics</h1> 191 <p class="text-lg md:text-xl max-w-xl">Seamless shipping solutions by air, land, and sea â anywhere in the world.</p><br> 192 <!--<a href="index.php#contact" class="inline-block bg-[#20C261] hover:bg-[#1a9f50] text-white font-medium py-3 px-6 rounded-md transition-colors">Get a Quote</a>--> 193 </div> 194 </div> 195 <div class="slide relative text-white"> 196 <img src="images/sliders/slider2.jpg" alt="Slide 1" class="w-full h-screen object-cover"> 197 <div class="absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-40 p-4 text-center"> 198 <h1 class="text-4xl md:text-5xl font-bold mb-4">Smart Warehousing & Distribution</h1> 199 <p class="text-lg md:text-xl max-w-xl">Optimized storage and seamless distribution to keep your supply chain moving.</p><br> 200 <!--<a href="index.php#contact" class="inline-block bg-[#20C261] hover:bg-[#1a9f50] text-white font-medium py-3 px-6 rounded-md transition-colors">Get a Quote</a>--> 201 </div> 202 </div> 203 204 <div class="slide relative text-white"> 205 <img src="images/sliders/slider6.jpg" alt="Slide 1" class="w-full h-screen object-cover"> 206 <div class="absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-40 p-4 text-center"> 207 <h1 class="text-4xl md:text-5xl font-bold mb-4">Reliable Land Cargo Transport</h1> 208 <p class="text-lg md:text-xl max-w-xl">On-time delivery with a GCC wide network of trucks and carriers.</p><br> 209 <!-- <a href="index.php#contact" class="inline-block bg-[#20C261] hover:bg-[#1a9f50] text-white font-medium py-3 px-6 rounded-md transition-colors">Get a Quote</a>--> 210 </div> 211 </div> 212 213 </div> 214 </section> 215 216 <section class="bg-white"> 217 <div class="container mx-auto px-4"> 218 219 <!-- Heading (Full Width) --> 220 221 <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4" style="margin-top:40px;">Your Trusted Logistics Partner</h2> 222 223 224 <!-- Flex Row: Text + Image --> 225 <div class="flex flex-col lg:flex-row items-center justify-between gap-12"> 226 227 <!-- Left: Text Description --> 228 <div class="lg:w-1/2 text-center lg:text-left"> 229 <p class="text-lg text-gray-600 mb-6 leading-relaxed"> 230 Aero Freight has solidified its position as a prominent leader within the realm of freight forwarding companies in the Middle East. </p> 231 <p class="text-lg text-gray-600 mb-6 leading-relaxed"> Through unwavering dedication, a focus on balanced growth strategies, and leveraging cutting-edge technological tools, our team has successfully cultivated a competitive edge among logistics and shipping service providers. 232 </p> 233 <a href="about-aero-freight.php" 234 class="inline-block bg-[#20C261] hover:bg-[#1a9f50] text-white font-medium py-3 px-6 rounded-md transition-colors duration-300"> 235 About Aero Freight 236 </a> 237 </div> 238 239 <!-- Right: Image --> 240 <div class="lg:w-1/2"> 241 <div class="relative overflow-hidden rounded-xl group border-4 border-[#20C261]/20 shadow-lg"> 242 <img src="images/trusted.jpg" alt="Trusted Partner" 243 class="w-full h-auto transition-transform duration-500 group-hover:scale-105" /> 244 <div class="absolute inset-0 bg-[#20C261]/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div> 245 </div> 246 </div> 247 248 </div> 249 </div> 250</section> 251 252<!--- Ser--> 253 254<section class="bg-gray-50" style="margin-bottom:40px;"> 255 <div class="container mx-auto px-4"> 256 <div class="text-center mb-12"> 257 <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb
257-4" style="margin-top:40px;">Our Core Services</h2> 258 </div> 259 260 <!-- Services Grid --> 261 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10"> 262 <!-- Service Card 1 --> 263 <div class="group rounded-lg overflow-hidden shadow-lg bg-white transition-all duration-300"> 264 <!-- Icon Bar --> 265 <div class="w-full px-6 py-4 bg-white border-b-2 border-[#20C261] group-hover:bg-[#20C261] transition-all duration-300 flex items-center space-x-2"> 266 <i class="fas fa-warehouse text-[#20C261] text-xl group-hover:text-white"></i> 267 <span class="text-gray-800 font-semibold group-hover:text-white">Freight Forwarding</span> 268 </div> 269 270 <!-- Image Section --> 271 <div class="relative h-72 overflow-hidden"> 272 <img src="images/service2.jpg" alt="Warehousing" 273 class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" /> 274 <div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex flex-col items-center justify-center text-white px-4 text-center"> 275 <div class="text-xl font-semibold mb-4">Seamless Global Trade</div> 276 <a href="sea-freight-qatar.php" 277 class="opacity-0 translate-y-3 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-500 bg-[#20C261] hover:bg-[#1a9f50] text-white font-medium py-2 px-4 rounded-md"> 278 View More 279 </a> 280 </div> 281 </div> 282 </div> 283 284 <!-- Service Card 2 --> 285 <div class="group rounded-lg overflow-hidden shadow-lg bg-white transition-all duration-300"> 286 <div class="w-full px-6 py-4 bg-white border-b-2 border-[#20C261] group-hover:bg-[#20C261] transition-all duration-300 flex items-center space-x-2"> 287 <i class="fas fa-ship text-[#20C261] text-xl group-hover:text-white"></i> 288 <span class="text-gray-800 font-semibold group-hover:text-white">Warehousing</span> 289 </div> 290 <div class="relative h-72 overflow-hidden"> 291 <img src="images/service3.jpg" alt="Import Export" 292 class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" /> 293 <div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex flex-col items-center justify-center text-white px-4 text-center"> 294 <div class="text-xl font-semibold mb-4">Secure & Scalable Storage</div> 295 <a href="warehousing-and-distribution-qatar.php" 296 class="opacity-0 translate-y-3 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-500 bg-[#20C261] hover:bg-[#1a9f50] text-white font-medium py-2 px-4 rounded-md"> 297 View More 298 </a> 299 </div> 300 </div> 301 </div> 302 303 <!-- Service Card 3 --> 304 <div class="group rounded-lg overflow-hidden shadow-lg bg-white transition-all duration-300"> 305 <div class="w-full px-6 py-4 bg-white border-b-2 border-[#20C261] group-hover:bg-[#20C261] transition-all duration-300 flex items-center space-x-2"> 306 <i class="fas fa-truck text-[#20C261] text-xl group-hover:text-white"></i> 307 <span class="text-gray-800 font-semibold group-hover:text-white">Land Freight</span> 308 </div> 309 <div class="relative h-72 overflow-hidden"> 310 <img src="images/services.jpg" alt="Road Freight" 311 class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" /> 312 <div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex flex-col items-center justify-center text-white px-4 text-center"> 313 <div class="text-xl font-semibold mb-4">Solutions across the GCC & Middle East </div> 314 <a href="overland-road-freight.php" 315 class="opacity-0 translate-y-3 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-500 bg-[#20C261] hover:bg-[#1a9f50] text-white font-medium py-2 px-4 roun
315ded-md"> 316 View More 317 </a> 318 </div> 319 </div> 320 </div> 321 </div> 322 323 <!-- More Services Button --> 324 <!--<div class="text-center mt-12"> 325 <a href="#" 326 class="inline-block bg-[#20C261] hover:bg-[#1a9f50] text-white font-medium py-3 px-6 rounded-md transition-colors duration-300"> 327 Explore More Services 328 </a> 329 </div>--> 330 </div> 331</section> 332 <!-- Parallax Section --> 333 <section class="parallax-section relative w-full h-screen bg-cover bg-center" style="background-image: url('images/parallaxbg1.jpg');"> 334 <div class="parallax-content absolute top-0 left-0 w-full h-full flex items-center justify-center text-center"> 335 <div class="text-white max-w-3xl mx-auto" style="color:#000;background-color:#FFF;opacity:0.9;padding-top:20px;padding-bottom:20px;"> 336 <h2 class="text-4xl md:text-5xl font-bold mb-6" style="color:#000;margin:10px;">Revolutionizing Global Logistics</h2> 337 <p class="text-lg mb-8" style="color:#000; margin:10px;">We provide end-to-end logistics solutions for your business, combining cutting-edge technology with world-class services.</p> 338 <a href="3pl-logistics-solutions.php" class="inline-block bg-[#20C261] hover:bg-[#1a9f50] text-white font-medium py-3 px-6 rounded-md transition-colors" style="margin-bottom:40px;">Explore Services</a> 339 </div> 340 </div> 341 </section> 342 343 <!-- Services Section --> 344 <section class="bg-gray-50" style="margin-top:20px;margin-bottom:20px;"> 345 <div class="container mx-auto px-4"> 346 <div class="text-center mb-12"> 347 <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4" style="margin-top:40px;">Commitment Beyond Cargo</h2> 348 </div> 349 350 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> 351 <div class="service-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg"> 352 <div class="p-6"> 353 <!-- Icon and Title in Same Line --> 354 <div class="flex items-center space-x-4 mb-4"> 355 <div class="service-icon w-12 h-12 bg-[#20C261]/10 rounded-full flex items-center justify-center text-[#20C261]"> 356 <i class="fas fa-warehouse text-2xl"></i> 357 </div> 358 <h3 class="text-xl font-semibold text-gray-800 m-0">Customs Clearance</h3> 359 </div> 360 361 <!-- Description --> 362 <p class="text-gray-600 mb-4"> 363 Streamlined document processing and import/export compliance for smooth border crossing. 364 </p> 365 366 <!-- Link --> 367 <a href="customsclearance.php" class="text-[#20C261] font-medium inline-flex items-center hover:text-[#1a9f50]"> 368 More Details <i class="fas fa-arrow-right ml-2"></i> 369 </a> 370 </div> 371 </div> 372 373 374 <!-- Service 2 --> 375 <div class="service-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg"> 376 <div class="p-6"> 377 <!-- Icon and Title in Same Line --> 378 <div class="flex items-center space-x-4 mb-4"> 379 <div class="service-icon w-12 h-12 bg-[#20C261]/10 rounded-full flex items-center justify-center text-[#20C261]"> 380 <i class="fas fa-ship text-2xl"></i> 381 </div> 382 <h3 class="text-xl font-semibold text-gray-800 m-0">Sea Freight</h3> 383 </div> 384 385 <!-- Description --> 386 <p class="text-gray-600 mb-4"> 387Reliable, global shipping solutions for large, bulk, or containerized cargo </p> 388 389 <!-- Link --> 390 <a href="sea-freight.php" class="text-[#20C261] font-medium inline-flex items-center hover:text-[#1a9f50]"> 391 More Details <i class="fas fa-arrow-right ml-2"></i> 392 </a> 393 </div> 394 </div> 395 396 397 <!-- Service 3 --> 398 <div class="service-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg"> 399 <div class="p-6"> 400 <!-- Icon and Title in Same Line --> 401 <div class="flex items-center space-x-4 mb-4"> 402 <div class="service-icon w-12 h-12 bg-[#20C261]/10 rounded-full flex items-center justify-center text-[#20C261]"> 403 <i class="fas fa-truck text-2xl"></i> 404 </div> 405 <h3 class="text-xl font-semibold text-gray-800 m-0">Distribution & Fulfillment</h3> 406 </div> 407 408 <!-- Description --> 409 <p class="text-gray-600 mb-4"> 410 Efficient distribution and fulfillment solutions with advanced warehouse management. 411 </p> 412 413 <!-- Link --> 414 <a href="warehousing-and-distribution-qatar.php#whservice" class="text-[#20C261] font-medium inline-flex items-center hover:text-[#1a9f50]"> 415 More Details <i class="fas fa-arrow-right ml-2"></i> 416 </a> 417 </div> 418 </div> 419 420 421 <!-- Service 4 --> 422 <div class="service-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg"> 423 <div class="p-6"> 424 <!-- Icon and Title in Same Line --> 425 <div class="flex items-center space-x-4 mb-4"> 426 <div class="service-icon w-12 h-12 bg-[#20C261]/10 rounded-full flex items-center justify-center text-[#20C261]"> 427 <i class="fas fa-boxes text-2xl"></i> 428 </div> 429 <h3 class="text-xl font-semibold text-gray-800 m-0">Packaging & Removal</h3> 430 </div> 431 432 <!-- Description --> 433 <p class="text-gray-600 mb-4">Customized packing and moving service</p> 434 435 <!-- Link --> 436 <a href="packing-and-removal.php" class="text-[#20C261] font-medium inline-flex items-center hover:text-[#1a9f50]"> 437 More Details <i class="fas fa-arrow-right ml-2"></i> 438 </a> 439 </div> 440 </div> 441 442 443 <!-- Service 5 --> 444 <!---<div class="service-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg"> 445 <div class="p-6"> 446 <div class="service-icon w-16 h-16 bg-[#20C261]/10 rounded-full flex items-center justify-center mb-4 text-[#20C261]"> 447 <i class="fas fa-globe-americas text-3xl"></i> 448 </div> 449 <h3 class="text-xl font-semibold text-gray-800 mb
449-3">Courier Services</h3> 450 <p class="text-gray-600 mb-4">Quick pick-up, competitive rates, online tracking</p> 451 <a href="courier-service.php" class="text-[#20C261] font-medium inline-flex items-center hover:text-[#1a9f50]"> 452 More Details <i class="fas fa-arrow-right ml-2"></i> 453 </a> 454 </div> 455 </div>--> 456 457 <div class="service-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg"> 458 <div class="p-6"> 459 <!-- Icon and Title in Same Line --> 460 <div class="flex items-center space-x-4 mb-4"> 461 <div class="service-icon w-12 h-12 bg-[#20C261]/10 rounded-full flex items-center justify-center text-[#20C261]"> 462 <i class="fas fa-globe-americas text-2xl"></i> 463 </div> 464 <h3 class="text-xl font-semibold text-gray-800 m-0">Courier Services</h3> 465 </div> 466 467 <!-- Description --> 468 <p class="text-gray-600 mb-4">Quick pick-up, competitive rates, online tracking</p> 469 470 <!-- Link --> 471 <a href="courier-service.php" class="text-[#20C261] font-medium inline-flex items-center hover:text-[#1a9f50]"> 472 More Details <i class="fas fa-arrow-right ml-2"></i> 473 </a> 474 </div> 475 </div> 476 477 478 <!-- Service 6 --> 479 <div class="service-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-lg"> 480 <div class="p-6"> 481 <!-- Icon and Title in Same Line --> 482 <div class="flex items-center space-x-4 mb-4"> 483 <div class="service-icon w-12 h-12 bg-[#20C261]/10 rounded-full flex items-center justify-center text-[#20C261]"> 484 <i class="fas fa-chart-line text-2xl"></i> 485 </div> 486 <h3 class="text-xl font-semibold text-gray-800 m-0">Consulting</h3> 487 </div> 488 489 <!-- Description --> 490 <p class="text-gray-600 mb-4"> 491 Expert analysis and optimization strategies to reduce costs and improve supply chain efficiency. 492 </p> 493 494 <!-- Link --> 495 <a href="index.php#contact" class="text-[#20C261] font-medium inline-flex items-center hover:text-[#1a9f50]"> 496 More Details <i class="fas fa-arrow-right ml-2"></i> 497 </a> 498 </div> 499 </div> 500 501 </div> 502 </div> 503 </section> 504 </main> 505 506 507<!-- Locations Section (Next to Parallax) --> 508<section class="bg-gray-50"> 509 <div class="container mx-auto px-4"> 510 <div class="text-center mb-12"> 511 <h2 class="text-3xl font-bold text-gray-800 mb-4" id="location">Our Locations</h2> 512 </div> 513 514 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"> 515 <!-- Location 1 --> 516 <div class="location-card bg-white rounded-lg shadow-md overflow-hidden"> 517 <div class="p-6" id="afclocation"> 518 <h3 class="text-xl font-semibold text-gray-800 mb-3">Aero Freight CO LTD,<br> 519Post Box 8681,<br> Opposite to Toyota Towers,<br>C Ring Road, Al Hilal West Zone 42, ST.230 Building No 131, Doha, Qatar.</h3> 520<p class="text-gray-600 mb-4"><a href="mailto:[email protected]">[email protected]</a></p> 521<p class="text-gray-600 mb-4"><a href="tel:9744702222">Tel:+974 44702222, +974 55618135</a></p> 522<p class="text-gray-600 mb-4">Opening Hours :</p> 523<p class="text-gray-600 mb-4">Sun â Thu: 7.30 am â 4:30 pm</p> 524<p class="text-gray-600 mb-4">Sat: 7.30 am â 1:30 pm</p> 525 <!-- <a href="#" class="text-[#20C261] font-medium inline-flex items-center hover:text-[#1a9f50]"> 526 Show Location <i class="fas fa-arrow-right ml-2"></i> 527 </a>--> 528 </div> 529 </div> 530 531 <!-- Location 2 --> 532 <div class="location-card bg-white rounded-lg shadow-md overflow-hidden"> 533 <div class="p-6" id="afelocation"> 534 <h3 class="text-xl font-semibold text-gray-800 mb-3">
534Aero Freight (Emirates) LLC,<br>Post Box 50923,<br> Unit 206, Blue Tower,<br> Sheik Zayed Road,<br> Opp Trade Centre, Dubai,<br> UAE.</h3> 535 536<p class="text-gray-600 mb-4"><a href="mailto:[email protected]">[email protected]</a></p> 537<p class="text-gray-600 mb-4"><a href="tel:97143649434">Tel:+971 43649434</a></p> 538 <p class="text-gray-600 mb-4">NCAGE: 2AFEW</p> 539 <p class="text-gray-600 mb-4">Opening Hours :</p> 540 <p class="text-gray-600 mb-4">Mon â Thu: 8.30 am â 5:30 pm</p> 541 542 543 <!--<a href="#" class="text-[#20C261] font-medium inline-flex items-center hover:text-[#1a9f50]">Show Location <i class="fas fa-arrow-right ml-2"></i> 544 </a>--> 545 </div> 546 </div> 547 <!-- Location 3 --> 548 <div class="location-card bg-white rounded-lg shadow-md overflow-hidden"> 549 <div class="p-6" id="qfzlocation"> 550 <h3 class="text-xl font-semibold text-gray-800 mb-3" style="text-transform:"> 551 Aero Logistics QFZ LLC<br>Plot No. PA AS 01 07, <br>Ras Bufontas Free Zone,<br>Doha,<br> Qatar.</h3> 552<p class="text-gray-600 mb-4"><a href="mailto:[email protected]">[email protected]</a></p> 553<p class="text-gray-600 mb-4"><a href="tel:9744702222">Tel:+974 44702222</a></p> 554 <!-- <h3 class="text-xl font-semibold text-gray-800 mb-3" style="text-transform:">Aero Logistics (FZC) LLC,<br>Post Box 393,<br> Postal Code 322,<br> Sohar Port / Freezone Sultanate Of Oman</h3> 555 <p class="text-gray-600 mb-4">Opening Hours :</p> 556 <p class="text-gray-600 mb-4">Mon â Thu: 8.30 am â 5:30 pm</p> 557 <a href="#" class="text-[#20C261] font-medium inline-flex items-center hover:text-[#1a9f50]"> 558 Show Location <i class="fas fa-arrow-right ml-2"></i> 559 </a>--> 560 </div> 561 </div> 562 563 </div> 564 </div> 565</section> 566 567 568<section class="py-20 bg-white relative overflow-hidden" id="contact" style="background-image:url('images/contact_bg.jpg');background-size:cover;"> 569 <!-- Airplanes --> 570 <!--<img src="images/plane1.png" alt="Left Plane" class="plane-left absolute top-10 left-[0px] w-20 md:w-28 opacity-80 z-0">--> 571 <img src="images/plane2.png" alt="Right Plane" class="plane-right absolute top-10 right[100px] w-20 md:w-28 opacity-80 z-0"> 572 573 <div class="container mx-auto px-4 max-w-2xl relative z-10"> 574 <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center" >Contact Us</h2> 575<img src="images/ship.png" alt="Ship" class="ship-animation absolute bottom 100px left-[200px] w-40 md:w-52 z-0 opacity-80"> 576 577 <form action="" method="POST" class="space-y-6 bg-gray-50 p-8 rounded-lg shadow-md"> 578 <!-- Name --> 579 <div> 580 <label for="name" class="block text-gray-700 font-medium mb-2">Name <span class="text-red-500">*</span></label> 581 <input 582 type="text" 583 id="name" 584 name="name" 585 required 586 class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#20C261]" 587 > 588 </div> 589 590 <!-- Email --> 591 <div id="email"> 592 <label for="email" class="block text-gray-700 font-medium mb-2">Email</label> 593 <input 594 type="email" 595 id="email" 596 name="email" 597 class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#20C261]" 598 > 599 </div> 600 601 <!-- Phone --> 602 <div> 603 <label for="phone" class="block text-gray-700 font-medium mb-2">Phone <span class="text-red-500">*</span></label> 604 <input 605 type="tel" 606 id="phone" 607 name="phone" 608 required 609 pattern="^\+?\d{7,15}$" 610 class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#20C261]" 611 > 612 <small class="text-gray-500">Include country code if applicable</small> 613 </div> 614 615 <!-- Message --> 616 <div> 617 <label for="message" class="block text-gray-700 font-medium mb-2">Message</label> 618 <textarea 619 id="message" 620 name="message" 621 rows="4" 622 class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#20C261]"></textarea> 623 </div> 624 625 <!-- Submit --> 626 <div class="text-center"> 627 <!--<div class="g-recaptcha" data-sitekey="6LdueyErAAAAAEv4WAUFgETMX27tgqWTSG_q_9Fp">-->
628 </div> 629 <button 630 type="submit" name="submit" 631 class="bg-[#20C261] hover:bg-[#1a9f50] text-white font-semibold py-2 px-6 rounded-md transition-all duration-300"> 632 Send Message 633 </button> 634 </div> 635 </form> 636 </div> 637</section> 638 639 640 641
641<script> 642 gsap.registerPlugin(ScrollTrigger); 643 644 // ð¢ Animate ship moving across screen (both directions) 645 gsap.to(".ship-animation", { 646 scrollTrigger: { 647 trigger: "#contact", 648 start: "top bottom", 649 end: "bottom top", 650 scrub: true, // ensures smooth back-and-forth on scroll 651 }, 652 x: window.innerWidth + 300, 653 ease: "none" 654 }); 655 656/*// âï¸ Animate airplane from left on scroll in and out 657 gsap.fromTo(".plane-left", 658 { x: 0, opacity: 0 }, 659 { 660 x: 0, 661 opacity: 1, 662 duration: 1.5, 663 ease: "power2.out", 664 scrollTrigger: { 665 trigger: "#contact", 666 start: "top 80%", 667 end: "bottom top", 668 toggleActions: "play reverse play reverse" 669 } 670 } 671 );*/ 672 673 // âï¸ Animate airplane from right on scroll in and out 674 gsap.fromTo(".plane-right", 675 { x: 900, opacity: 0, scale: 0.8 }, 676 { 677 x: 0, 678 opacity: 1, 679 duration: 2.5, 680 ease: "power2.out", 681 scale: 2.5, 682 scrollTrigger: { 683 trigger: "#contact", 684 start: "top 80%", 685 end: "bottom top", 686 toggleActions: "play reverse play reverse" 687 } 688 } 689 ); 690</script>
690 691 692 693<!-- Discover Our Group of Companies Section --> 694<section class="py-16 bg-gray-100" id="companies"> 695 <div class="container mx-auto px-4 text-center"> 696 <h2 class="text-3xl font-bold text-gray-800 mb-8">Discover Our Group of Companies</h2> 697 <p class="text-lg text-gray-600 mb-12 max-w-2xl mx-auto">We are proud to be part of a diverse family of companies that lead the industry in innovation, quality, and customer satisfaction.</p> 698 699 <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-8 gap-8"> 700 <!-- Company Logo 1 --> 701 <div class="company-logo opacity-0 transform transition-all duration-1000 hover:scale-105 hover:opacity-100 animate__animated animate__fadeIn animate__delay-1s"> 702 <a href="https://containercity.net/" title="Container City for Storage and Maintenence" target="_blank"> <img src="images/logo/ccsm.png" alt="Container City for Storage and Maintenence" class="mx-auto h-16 md:h-20 object-contain"></a> 703 </div> 704 705 <!-- Company Logo 2 --> 706 <div class="company-logo opacity-0 transform transition-all duration-1000 hover:scale-105 hover:opacity-100 animate__animated animate__fadeIn animate__delay-2s"> 707 <a href="https://icssq.com/" title="International Commercial and Shipping Services" target="_blank"><img src="images/logo/icss.png" alt="International Commercial and Shipping Services " class="mx-auto h-16 md:h-20 object-contain"></a> 708 </div> 709 710 <!-- Company Logo 3 --> 711 <div class="company-logo opacity-0 transform transition-all duration-1000 hover:scale-105 hover:opacity-100 animate__animated animate__fadeIn animate__delay-0s"> 712 <a href="https://ctctransformer.com/" title="Continental Trading Company" target="_blank"><img src="images/logo/ctc.png" alt="Continental Trading Company" class="mx-auto h-16 md:h-20 object-contain"></a> 713 </div> 714 715 <!-- Company Logo 4 --> 716 <div class="company-logo opacity-0 transform transition-all duration-1000 hover:scale-105 hover:opacity-100 animate__animated animate__fadeIn animate__delay-0s"> 717 <a href="https://ffmeqatar.com/" title="First Flight Couriers" target="_blank"><img src="images/logo/ff.png" alt="First Flight Couriers" class="mx-auto h-16 md:h-20 object-contain"></a> 718 </div> 719 720 <!-- Company Logo 5 --> 721 <div class="company-logo opacity-0 transform transition-all duration-1000 hover:scale-105 hover:opacity-100 animate__animated animate__fadeIn animate__delay-0s"> 722 <a href="https://mantechqa.com/" title="Mantech Office Systems" target="_blank"target="_blank"><img src="images/logo/mantech.png" alt="Mantech Office Systems" class="mx-auto h-16 md:h-20 object-contain"></a> 723 </div> 724 725 <!-- Company Logo 6 --> 726 <div class="company-logo opacity-0 transform transition-all duration-1000 hover:scale-105 hover:opacity-100 animate__animated animate__fadeIn animate__delay-0s"> 727 <a href="https://kompasstools.com/" title="Kompass International Trading"target="_blank"><img src="images/logo/kompass.png" alt="Kompass International Trading" class="mx-auto h-16 md:h-20 object-contain"></a> 728 </div> 729 730 <!-- Company Logo 7 --> 731 <div class="company-logo opacity-0 transform transition-all duration-1000 hover:scale-105 hover:opacity-100 animate__animated animate__fadeIn animate__delay-0s"> 732 <a href="index.php#afelocation" title="Aero Logistics DWC" target="_blank"><img src="images/logo/dwc.png" alt="Aero Logistics DWC" class="mx-auto h-16 md:h-20 object-contain"></a> 733 </div> 734 735 <!-- Company Logo 8 --> 736 <div class="company-logo opacity-0 transform transition-all duration-1000 hover:scale-105 hover:opacity-100 animate__animated animate__fadeIn animate__delay-0s"> 737 <a href="index.php#qfzlocation" title="Aero Logistics QFZ" target="_blank"><img src="images/logo/qfz.png" alt="Aero Logistics QFZ" class="mx-auto h-16 md:h-20 object-contain"></a> 738 </div> 739 </div> 740 </div> 741</section> 742 743<footer class="bg-gray-800 text-white py-10"> 744 <div class="container mx-auto px-4"> 745 <!--whatsapp--> 746 <a 747 id="whatsapp-float"
748 href="https://api.whatsapp.com/send?phone=97455618135&text=Hi%2C%20get%20me%20more%20info%20about%20freight%20services" 749 target="_blank" 750 rel="noopener noreferrer" 751 aria-label="Chat with us on WhatsApp" 752> 753 <img 754 src="https://upload.wikimedia.org/wikipedia/commons/6/6b/WhatsApp.svg" 755 alt="WhatsApp" 756 /> 757 <span class="wa-tooltip">Chat with us!</span> 758</a> 759 <!--Whatsa pp--> 760 761 <div class="flex flex-wrap md:flex-nowrap justify-between items-start"> 762 <!-- Logo Section --> 763 <div class="w-full md:w-1/4 mb-8 md:mb-0 flex justify-center md:justify-start"> 764 <a href="index.php" class="flex items-center"> 765 <img src="images/afc_white.png" alt="Aero Freight Logo" class="w-44"> 766 </a> 767 </div> 768 769 <!-- Links Section --> 770 <div class="w-full md:w-3/4 flex flex-wrap justify-between text-center md:text-left"> 771 <!-- Services Column --> 772 <div class="w-full md:w-1/3 mb-6 md:mb-0"> 773 <h4 class="text-lg font-semibold mb-3">Services</h4> 774 <ul class="space-y-2"> 775 <li><a href="sea-freight.php">Sea Freight</a></li> 776 <li><a href="air-freight.php">Air Freight</a></li> 777 <li><a href="overland-road-freight.php">Road Freight</a></li> 778 <li><a href="warehousing-and-distribution-qatar.php">Warehousing</a></li> 779 </ul> 780 </div> 781 782 <!-- Useful Links Column --> 783 <div class="w-full md:w-1/3 mb-6 md:mb-0"> 784 <h4 class="text-lg font-semibold mb-3">Useful Links</h4> 785 <ul class="space-y-2"> 786 <li><a href="about-aero-freight.php">About Us</a></li> 787 <li><a href="index.php#contact">Contact Us</a></li> 788 <li><a href="privacypolicy.php">Privacy Policy</a></li> 789 </ul> 790 </div> 791 792 <!-- Special Services Column --> 793 <div class="w-full md:w-1/3"> 794 <h4 class="text-lg font-semibold mb-3">Special Services</h4> 795 <ul class="space-y-2"> 796 <li><a href="jafza_services.php">JAFZA Storage Services</a></li> 797 <li><a href="fairs-exhibition-logistics.php">Fairs & Exhibition Logistics</a></li> 798 <li><a href="supply-chain-solutions.php">Supply Chain Solutions</a></li> 799 <li><a href="military-government-transport-logistics.php">Military & Government Transport & Logistics</a></li> 800 <li><a href="breakbulk-and-out-of-gauge-solutions.php">Break Bulk and Outgauge Solutions</a></li> 801 <!--<li><a href="affordable-office-leasing-in-qatar-aerofreight-real-estate-solutions.php">Real Estate</a></li>--> 802 </ul> 803 </div> 804 </div> 805 </div> 806 807 <!-- Social Media Icons --> 808 <div class="mt-8 flex justify-center space-x-6"> 809 <a href="https://www.facebook.com/aerofreightcompany/" target="_blank" class="hover:text-[#20C261] transition-colors"><i class="fab fa-facebook-f"></i></a> 810 <a href="https://x.com/aerofreightco" target="_blank" class="hover:text-[#20C261] transition-colors"><i class="fab fa-twitter"></i></a> 811 <a href="https://www.linkedin.com/company/aerofreight" target="_blank" class="hover:text-[#20C261] transition-colors"><i class="fab fa-linkedin-in"></i></a> 812 <a href="https://www.instagram.com/aerofreightco/" target="_blank" class="hover:text-[#20C261] transition-colors"><i class="fab fa-instagram"></i></a> 813 </div> 814 815 <!-- Copyright --> 816 <div class="mt-6 text-sm text-center text-gray-400"> 817 © 2025 Aero Group of Companies. All rights reserved. 818 </div> 819 </div> 820</footer> 821
821<script> 822 $(document).ready(function () { 823 // GSAP parallax effect 824 gsap.registerPlugin(ScrollTrigger); 825 826 // Parallax effect for background image and text 827 gsap.to('.parallax-section', { 828 scrollTrigger: { 829 trigger: '.parallax-section', 830 start: 'top top', 831 end: 'bottom top', 832 scrub: true, 833 pin: true, // Pins the section so that it stays in place while scrolling 834 }, 835 backgroundPosition: 'center -30%', // The background will move at -30% as you scroll 836 }); 837 838 gsap.from('.parallax-content', { 839 scrollTrigger: { 840 trigger: '.parallax-section', 841 start: 'top 80%', 842 end: 'bottom top', 843 scrub: true, 844 }, 845 y: 100, // Text starts from below 846 opacity: 0, 847 duration: 0.6, 848 }); 849}); 850 851 $(document).ready(function() { 852 // Initialize slider 853 $('.slider-container').slick({ 854 dots: true, 855 arrows: true, 856 infinite: true, 857 speed: 500, 858 fade: true, 859 cssEase: 'linear', 860 autoplay: true, 861 autoplaySpeed: 5000, 862 prevArrow: '<button type="button" class="slick-prev absolute left-4 top-1/2 transform -translate-y-1/2 z-10 bg-white bg-opacity-30 hover:bg-opacity-50 rounded-full w-10 h-10 flex items-center justify-center"><i class="fas fa-chevron-left"></i></button>', 863 nextArrow: '<button type="button" class="slick-next absolute right-4 top-1/2 transform -translate-y-1/2 z-10 bg-white bg-opacity-30 hover:bg-opacity-50 rounded-full w-10 h-10 flex items-center justify-center"><i class="fas fa-chevron-right"></i></button>', 864 responsive: [ 865 { 866 breakpoint: 768, 867 settings: { 868 arrows: false 869 } 870 } 871 ] 872 }); 873 874 // Mobile menu toggle 875 $('.mobile-menu-toggle').click(function() { 876 $('.mobile-menu').toggleClass('active'); 877 $(this).find('i').toggleClass('fa-bars fa-times'); 878 }); 879 880 // GSAP animations 881 gsap.registerPlugin(ScrollTrigger); 882 883 // Header shrink on scroll 884 ScrollTrigger.create({ 885 start: "top top", 886 end: "max", 887 onUpdate: (self) => { 888 if (self.direction === -1 || self.scroll() < 10) { 889 $('.header').removeClass('shrink'); 890 } else { 891 $('.header').addClass('shrink'); 892 } 893 } 894 }); 895 896 // Animate service cards on scroll 897 gsap.utils.toArray('.service-card').forEach(card => { 898 gsap.from(card, { 899 scrollTrigger: { 900 trigger: card, 901 start: "top 80%", 902 toggleActions: "play none none none" 903 }, 904 y: 50, 905 opacity: 0, 906 duration: 0.8, 907 ease: "power2.out" 908 }); 909 }); 910 911 // Logo animation on scroll 912 gsap.to('.logo', { 913 scrollTrigger: { 914 trigger: 'body', 915 start: 'top top', 916 end: '+=100', 917 scrub: true 918 }, 919 scale: 0.8, 920 y: -5 921 }); 922 }); 923 </script>
923 924</body> 925</html> 926 927</body> 928</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.