1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Pawtul - Pet Care Business Management</title> 8 9 <!-- Bootstrap 5 CSS --> 10 <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet"> 11 <!-- Inter Font --> 12 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> 13 <!-- Feather Icons --> 14 <link href="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.29.0/feather.min.css" rel="stylesheet"> 15 16 <link href="/static/css/pawtul_new.css" rel="stylesheet"> 17</head> 18 19<body> 20 <!-- Navigation --> 21 <nav class="navbar navbar-expand-lg"> 22 <div class="container"> 23 <a class="navbar-brand" href="/"> 24 <img src="/static/images/logos/png/pawtul_logo.png" class="img-fluid" style="max-width: 200px;"> 25 </a> 26 27 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> 28 <span class="navbar-toggler-icon"></span> 29 </button> 30 31 <div class="collapse navbar-collapse" id="navbarNav"> 32 <ul class="navbar-nav ms-auto"> 33 <li class="nav-item"> 34 <a class="nav-link" href="/">Home</a> 35 </li> 36 <li class="nav-item"> 37 <a class="nav-link" href="/#features">Features</a> 38 </li> 39 <li class="nav-item"> 40 <a class="nav-link" href="/#pricing">Pricing</a> 41 </li> 42 <li class="nav-item"> 43 <a class="nav-link" href="/contact">Contact</a> 44 </li> 45 <li class="nav-item ms-2"> 46 <a class="btn btn-outline-primary" href="/login">Login</a> 47 </li> 48 <li class="nav-item ms-2"> 49 <a class="btn btn-primary" href="/signup">Get Started</a> 50 </li> 51 </ul> 52 </div> 53 </div> 54 </nav> 55 56 <!-- Main Content --> 57 <main> 58 59<!-- Hero Section --> 60<section class="hero-section"> 61 <div class="botanical-decoration botanical-1"></div> 62 <div class="botanical-decoration botanical-2"></div> 63 64 <div class="container"> 65 <div class="row align-items-center"> 66 <div class="col-lg-6"> 67 <div class="hero-content fade-in"> 68 <h1>Manage your business</h1> 69 <p class="lead">with effortless control, and modern elegance</p> 70 <p>Take back control of your pet care business with our redesigned, refined, and rebuilt platform. 71 Everything you need in one beautiful, intuitive app.</p> 72 73 <div class="d-flex flex-wrap gap-3 mt-4"> 74 <a href="/signup" class="btn btn-primary btn-lg"> 75 Get Started Free 76 <i data-feather="arrow-right" class="ms-2"></i> 77 </a> 78 <button type="button" class="btn btn-outline-primary btn-lg" id="watchDemoBtn"> 79 Watch Demo 80 <i data-feather="play" class="ms-2"></i> 81 </button> 82 </div> 83 <div class="d-flex flex-wrap gap-3 mt-4"> 84 <a href="https://api.pawtul.com/magic/download"> 85 <img src="/static/images/app-store-badge.png" alt="Download on the App Store" 86 style="height: 60px; margin-top:11px;"> 87 </a> 88 <a href="https://api.pawtul.com/magic/download"> 89 <img src="/static/images/google-play-badge.png" alt="Get it on Google Play" 90 style="height: 80px;"> 91 </a> 92 </div> 93 94 <!-- <div class="mt-4"> 95 <small class="text-muted">⨠Free forever for up to 20 clients ⢠No credit card required</small> 96 </div> --> 97 </div> 98 </div> 99 <div class="col-lg-6"> 100 <div class="app-showcase fade-in"> 101 <div class="app-images-container"> 102 <!-- Primary App Image --> 103 <div class="app-image-primary"> 104 <div class="phone-frame"> 105 <img src="/static/images/landing/pawtul_calander.jpg" 106 alt="Pawtul App - Appointment Management" class="app-screenshot"> 107 <div class="phone-overlay"></div> 108 </div> 109 </div> 110 111 <!-- Secondary App Image --> 112 <div class="app-image-secondary"> 113 <div class="phone-frame"> 114 <img src="/static/images/landing/pawtul_pet_profile.jpg" alt="Pawtul App - Pet Profiles" 115 class="app-screenshot"> 116 <div class="phone-overlay"></div> 117 </div> 118 </div> 119 120 <!-- Floating Elements --> 121 <div class="floating-element floating-1"> 122 <div class="feature-badge"> 123 <span class="badge-icon">ð </span> 124 <span class="badge-text">Smart Scheduling</span> 125 </div> 126 </div> 127 128 <div class="floating-element floating-2"> 129 <div class="feature-badge"> 130 <span class="badge-icon">ð</span> 131 <span class="badge-text">Pet Profiles</span> 132 </div> 133 </div> 134 135 <div class="floating-element floating-3"> 136 <div class="feature-badge"> 137 <span class="badge-icon">ð°</span> 138 <span class="badge-text">Easy Invoicing</span> 139 </div> 140 </div> 141 </div>
142 </div> 143 </div> 144 </div> 145 </div> 146</section> 147 148<!-- Features Section --> 149<section class="py-5 mt-5" id="features"> 150 <div class="container"> 151 <div class="text-center mb-5 fade-in"> 152 <h2 class="section-title">Everything you need to thrive</h2> 153 <p class="section-subtitle">Powerful features designed specifically for pet care professionals, all in one 154 beautiful platform.</p> 155 </div> 156 157 <div class="row g-4"> 158 <div class="col-lg-4 col-md-6 fade-in"> 159 <div class="feature-card"> 160 <div class="feature-icon"> 161 ð 162 </div> 163 <h4>Organised appointments</h4> 164 <p class="text-muted">Take back control of your time with intelligent scheduling, booking 165 management, and automated reminders.</p> 166 </div> 167 </div> 168 169 <div class="col-lg-4 col-md-6 fade-in"> 170 <div class="feature-card"> 171 <div class="feature-icon"> 172 ð¸ 173 </div> 174 <h4>Profiles made easy</h4> 175 <p class="text-muted">Beautiful pet profiles with tailored info and treasured photos. Keep 176 everything organized and accessible.</p> 177 </div> 178 </div> 179 180 <div class="col-lg-4 col-md-6 fade-in"> 181 <div class="feature-card"> 182 <div class="feature-icon"> 183 ð° 184 </div> 185 <h4>Focus on your finances</h4> 186 <p class="text-muted">Smart invoicing and better business management. Track payments, generate 187 reports, and grow your revenue.</p> 188 </div> 189 </div> 190 191 <div class="col-lg-4 col-md-6 fade-in"> 192 <div class="feature-card"> 193 <div class="feature-icon"> 194 ð¥ 195 </div> 196 <h4>Client Management</h4> 197 <p class="text-muted">Securely store customer information with self-service portals. Keep admin down 198 and information accurate.</p> 199 </div> 200 </div> 201 202 <div class="col-lg-4 col-md-6 fade-in"> 203 <div class="feature-card"> 204 <div class="feature-icon"> 205 ð¥ 206 </div> 207 <h4>Health Records</h4> 208 <p class="text-muted">Digital storage for microchip numbers, vaccination records, and emergency 209 contacts. Everything you need covered.</p> 210 </div> 211 </div> 212 213 <div class="col-lg-4 col-md-6 fade-in"> 214 <div class="feature-card"> 215 <div class="feature-icon"> 216 ð± 217 </div> 218 <h4>Mobile Ready</h4> 219 <p class="text-muted">Access your business anywhere with our beautiful mobile-first design. Work on 220 the go with ease.</p> 221 </div> 222 </div> 223 </div> 224 </div> 225</section> 226 227<!-- Testimonials Section --> 228<section id="reviews" class="py-5 mt-5" style="background: var(--gradient-light);"> 229 <div class="container"> 230 <div class="text-center mb-5 fade-in"> 231 <h2 class="section-title">Loved by pet professionals</h2> 232 <p class="section-subtitle">Join thousands of happy pet care businesses who've made the switch to Pawtul. 233 </p> 234 </div> 235 236 <div class="row g-4"> 237 <div class="col-lg-4 fade-in"> 238 <div class="feature-card"> 239 <div class="mb-3"> 240 <div class="text-warning mb-2">â â â â â </div> 241 <p>"PAWTUL has been so helpful for keeping all my documents in one place including all of my 242 finances, invoices, diary, client details... Making everyday feel like payday!"</p> 243 </div> 244 <div class="d-flex align-items-center"> 245 <div 246 style="width: 40px; height: 40px; background: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; margin-right: 12px;"> 247 P</div> 248 <div> 249 <strong>Pettitt Pet Services</strong> 250 <div class="text-muted small">Dog Walking & Care</div> 251 </div> 252 </div> 253 </div> 254 </div> 255 256 <div class="col-lg-4 fade-in"> 257 <div class="feature-card"> 258 <div class="mb-3"> 259 <div class="text-warning mb-2">â â â â â </div> 260 <p>"Having looked at a number of similar products, none really matched what we needed. Then 261 along came Pawtul. We couldn't be more pleased!"</p> 262 </div> 263 <div class="d-flex align-items-center"> 264 <div 265 style="width: 40px; height: 40px; background: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; margin-right: 12px;"> 266 J</div> 267 <div> 268 <strong>Jangles Home Boarding</strong> 269 <div class="text-muted small">Walking and Day Care</div> 270 </div> 271 </div>
272 </div> 273 </div> 274 275 <div class="col-lg-4 fade-in"> 276 <div class="feature-card"> 277 <div class="mb-3"> 278 <div class="text-warning mb-2">â â â â â </div> 279 <p>"This app absolutely goes above and beyond the other pet care apps currently on the market. 280 You won't regret switching to Pawtul!"</p> 281 </div> 282 <div class="d-flex align-items-center"> 283 <div 284 style="width: 40px; height: 40px; background: var(--primary-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; margin-right: 12px;"> 285 B</div> 286 <div> 287 <strong>Bella Boo's of Newport</strong> 288 <div class="text-muted small">Pet Care Services</div> 289 </div> 290 </div> 291 </div> 292 </div> 293 </div> 294 </div> 295</section> 296 297<!-- Pricing Section --> 298<!-- Pricing Section --> 299<section class="py-5 mt-5" id="pricing"> 300 <div class="container"> 301 <div class="text-center mb-5 fade-in"> 302 <h2 class="section-title">Simple, transparent pricing</h2> 303 <p class="section-subtitle"> 304 Start with a free trial, then choose the plan that fits your business. 305 </p> 306 </div> 307 308 <div class="row justify-content-center g-4"> 309 <!-- Trial --> 310 <div class="col-lg-4 col-md-6 fade-in"> 311 <div class="feature-card text-center"> 312 <h4>7 Day Free Trial</h4> 313 <div class="display-4 fw-bold text-primary mb-3"> 314 Free 315 </div> 316 <p class="text-muted mb-4"> 317 Full Pro access for 7 days â no card required 318 </p> 319 <ul class="list-unstyled text-start mb-4"> 320 <li class="mb-2">â Full Pro features</li> 321 <li class="mb-2">â Mobile & desktop access</li> 322 <li class="mb-2">â Scheduling & bookings</li> 323 <li class="mb-2">â Invoicing & payments</li> 324 <li class="mb-2">â Vaccination tracking</li> 325 </ul> 326 <a href="/signup" class="btn btn-outline-primary w-100"> 327 Start Free Trial 328 </a> 329 </div> 330 </div> 331 332 <!-- Pro --> 333 <div class="col-lg-4 col-md-6 fade-in"> 334 <div class="feature-card text-center position-relative" style="border: 2px solid var(--primary-color);"> 335 <div class="badge bg-primary position-absolute top-0 start-50 translate-middle px-3 py-2"> 336 Most Popular 337 </div> 338 <h4>Pro</h4> 339 <div class="display-4 fw-bold text-primary mb-3"> 340 £12.99<small class="fs-6 text-muted">/month</small> 341 </div> 342 <p class="text-muted mb-4"> 343 Mobile app access only 344 </p> 345 <ul class="list-unstyled text-start mb-4"> 346 <li class="mb-2">â Unlimited clients & pets</li> 347 <li class="mb-2">â Advanced scheduling</li> 348 <li class="mb-2">â Full invoicing system</li> 349 <li class="mb-2">â Limited storage</li> 350 <li class="mb-2">â Customer portals</li> 351 <li class="mb-2">â 1 Employee</li> 352 <li class="mb-2">â 100 Clients</li> 353 <li class="mb-2">â 100 Pets</li> 354 <li class="mb-2">â Desktop & web access</li> 355 </ul> 356 <a href="/signup" class="btn btn-primary w-100"> 357 Start Pro 358 </a> 359 </div> 360 </div> 361 362 <!-- Enterprise --> 363 <div class="col-lg-4 col-md-6 fade-in"> 364 <div class="feature-card text-center"> 365 <h4>Enterprise</h4> 366 <div class="display-4 fw-bold text-primary mb-3"> 367 £39.99<small class="fs-6 text-muted">/month</small> 368 </div> 369 <p class="text-muted mb-4"> 370 Full desktop & web access <br><small>(Coming soon)</small> 371 </p> 372 <ul class="list-unstyled text-start mb-4"> 373 <li class="mb-2">â Everything in Pro</li> 374 <li class="mb-2">â Desktop & web dashboard</li> 375 <li class="mb-2">â Advanced reporting</li> 376 <li class="mb-2">â Multi-account support</li> 377 <li class="mb-2">â Dedicated support</li> 378 <li class="mb-2">â Multiple Employees</li> 379 <li class="mb-2">â Unlimited Clients</li> 380 <li class="mb-2">â Unlimited Pets</li> 381 <li class="mb-2">â Unlimited Storage</li> 382 383 </ul> 384 <a href="/contact" class="btn btn-outline-primary w-100"> 385 Join Waitlist 386 </a> 387 </div> 388 </div> 389 </div> 390 391 <!-- Legacy notice --> 392 <div class="text-center mt-5 text-muted small"> 393 Existing customers and existing enterprise customer will retain access to legacy platform whilst Enterprise 394 is redeveloped. 395 </div> 396 </div> 397</section> 398 399 400<!-- CTA Section --> 401<section class="py-5 mt-5" style="background: var(--text-dark);"> 402 <div class="container text-center"> 403 <div class="row justify-content-center fade-in"> 404 <div class="col-lg-8"> 405 <h2 class="text-white mb-3">Ready to transform your pet business?</h2> 406 <p class="text-white opacity-90 fs-5 mb-4">Join thousands of pet professionals who've already made the 407 switch to effortless business management.</p> 408 <div class="d-flex flex-wrap justify-content-center gap-3"> 409 <a href="/signup" class="btn btn-light btn-lg px-4"> 410 Start Free Today 411 <i data-feather="arrow-right" class="ms-2"></i> 412 </a> 413 <a href="#demo" class="btn btn-outline-light btn-lg px-4"> 414 Schedule Demo 415 </a> 416 </div> 417 <!-- <div class="mt-3"> 418 <small class="text-white opacity-75">⨠No credit card required ⢠Setup in under 5 minutes</small>
419 </div> --> 420 </div> 421 </div> 422 </div> 423</section> 424 425<!-- Video Overlay --> 426<div id="videoOverlay" class="video-overlay"> 427 <div class="video-container"> 428 <button class="close-btn" id="closeVideoBtn">×</button> 429 <video id="demoVideo" controls autoplay> 430 <source src="/static/video/pawtul_demo_v3.mp4" type="video/mp4"> 431 Your browser does not support the video tag. 432 </video> 433 </div> 434</div> 435 436 437 </main> 438 439 <!-- Footer --> 440 <footer class="footer"> 441 <div class="container"> 442 <div class="row"> 443 <div class="col-lg-4 mb-4"> 444 <div class="d-flex align-items-center mb-3"> 445 <img src="/static/images/logos/png/pawtul_logo_white.png" class="img-fluid" 446 style="max-width: 180px;"> 447 </div> 448 <p class="text-muted">Redesigned, refined, rebuilt. The ultimate pet care business management 449 platform.</p> 450 </div> 451 <div class="col-lg-2 col-md-6 mb-4"> 452 <h5>Product</h5> 453 <ul class="list-unstyled"> 454 <li><a href="/#features">Features</a></li> 455 <li><a href="/#pricing">Pricing</a></li> 456 <li><a href="/#reviews">Reviews</a></li> 457 <!-- <li><a href="#security">Security</a></li> --> 458 <!-- <li><a href="#integrations">Integrations</a></li> --> 459 </ul> 460 </div> 461 <div class="col-lg-2 col-md-6 mb-4"> 462 <h5>Company</h5> 463 <ul class="list-unstyled"> 464 <li><a href="#about">About</a></li> 465 <!-- <li><a href="#careers">Careers</a></li> 466 <li><a href="#press">Press</a></li> 467 <li><a href="#blog">Blog</a></li> --> 468 </ul> 469 </div> 470 <div class="col-lg-2 col-md-6 mb-4"> 471 <h5>Support</h5> 472 <ul class="list-unstyled"> 473 <!-- <li><a href="#help">Help Center</a></li> --> 474 <li><a href="/contact">Contact</a></li> 475 <!-- <a class="" href="#" target="_blank" 476 onclick="window.location.href = 'https://api.whatsapp.com/send?phone=447418605429'"><i 477 class="fa-brands fa-whatsapp text-success me-2"></i>Contact</a> --> 478 <!-- <li><a href="#status">Status</a></li> 479 <li><a href="#updates">Updates</a></li> --> 480 </ul> 481 </div> 482 <div class="col-lg-2 col-md-6 mb-4"> 483 <h5>Legal</h5> 484 <ul class="list-unstyled"> 485 <li><a href="/privacy_policy">Privacy</a></li> 486 <li><a href="/terms_and_conditions">Terms</a></li> 487 <li><a href="/eula">END-USER LICENSE AGREEMENT</a></li> 488 <li><a href="/gdpr">GDPR</a></li> 489 </ul> 490 </div> 491 </div> 492 <hr class="my-4" style="border-color: #374151;"> 493 <div class="row align-items-center"> 494 <div class="col-md-6"> 495 <p class="text-muted mb-0">© 2026 Pawtul. All rights reserved.</p> 496 </div> 497 <div class="col-md-6 text-md-end"> 498 <p class="text-muted mb-0">Made with â¤ï¸ for pet professionals</p> 499 </div> 500 </div> 501 </div> 502 </footer> 503 504 <!-- Bootstrap 5 JS --> 505
505<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
505 506 507
507<script> 508 // Fade in animation on scroll 509 const observerOptions = { 510 threshold: 0.1, 511 rootMargin: '0px 0px -50px 0px' 512 }; 513 514 const observer = new IntersectionObserver((entries) => { 515 entries.forEach(entry => { 516 if (entry.isIntersecting) { 517 entry.target.classList.add('visible'); 518 } 519 }); 520 }, observerOptions); 521 522 document.addEventListener('DOMContentLoaded', () => { 523 const fadeElements = document.querySelectorAll('.fade-in'); 524 fadeElements.forEach(el => observer.observe(el)); 525 }); 526 527 // Smooth scrolling for navigation links 528 document.querySelectorAll('a[href^="#"]').forEach(anchor => { 529 anchor.addEventListener('click', function (e) { 530 e.preventDefault(); 531 const target = document.querySelector(this.getAttribute('href')); 532 if (target) { 533 target.scrollIntoView({ 534 behavior: 'smooth', 535 block: 'start' 536 }); 537 } 538 }); 539 }); 540 </script>
540 541 542
543<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.29.0/feather.min.js"></script>
vendor: 1 bytes, line 543
543
544<script> 545 feather.replace(); 546 547 // Add some interactive hover effects 548 document.querySelectorAll('.feature-card').forEach(card => { 549 card.addEventListener('mouseenter', function () { 550 this.style.transform = 'translateY(-8px)'; 551 }); 552 553 card.addEventListener('mouseleave', function () { 554 this.style.transform = 'translateY(0)'; 555 }); 556 }); 557 558 // Parallax effect for app images 559 window.addEventListener('scroll', function () { 560 const scrolled = window.pageYOffset; 561 const parallax1 = document.querySelector('.app-image-primary'); 562 const parallax2 = document.querySelector('.app-image-secondary'); 563 564 if (parallax1 && parallax2) { 565 const speed1 = scrolled * 0.1; 566 const speed2 = scrolled * 0.15; 567 568 parallax1.style.transform = `translateY(${speed1}px) perspective(1000px) rotateY(-15deg) rotateX(5deg)`; 569 parallax2.style.transform = `translateY(${speed2}px) perspective(1000px) rotateY(10deg) rotateX(-3deg)`; 570 } 571 }); 572 573 // Floating elements animation 574 document.querySelectorAll('.floating-element').forEach((element, index) => { 575 const delay = index * 0.5; 576 element.style.animationDelay = `${delay}s`; 577 }); 578 579 // Video overlay functionality 580 const watchDemoBtn = document.getElementById('watchDemoBtn'); 581 const videoOverlay = document.getElementById('videoOverlay'); 582 const closeVideoBtn = document.getElementById('closeVideoBtn'); 583 const demoVideo = document.getElementById('demoVideo'); 584 585 watchDemoBtn.addEventListener('click', function () { 586 videoOverlay.style.display = 'flex'; 587 demoVideo.play(); 588 }); 589 590 closeVideoBtn.addEventListener('click', function () { 591 videoOverlay.style.display = 'none'; 592 demoVideo.pause(); 593 demoVideo.currentTime = 0; 594 }); 595 596 // Close overlay when clicking outside the video 597 videoOverlay.addEventListener('click', function (e) { 598 if (e.target === videoOverlay) { 599 videoOverlay.style.display = 'none'; 600 demoVideo.pause(); 601 demoVideo.currentTime = 0; 602 } 603 }); 604</script>
604 605 606<style> 607 .app-showcase { 608 position: relative; 609 min-height: 500px; 610 display: flex; 611 align-items: center; 612 justify-content: center; 613 } 614 615 .app-images-container { 616 position: relative; 617 width: 100%; 618 max-width: 500px; 619 height: 600px; 620 } 621 622 .app-image-primary { 623 position: absolute; 624 top: 0; 625 left: 50%; 626 transform: translateX(-50%) perspective(1000px) rotateY(-15deg) rotateX(5deg); 627 width: 280px; 628 height: auto; 629 z-index: 2; 630 transition: all 0.6s ease; 631 } 632 633 .app-image-secondary { 634 position: absolute; 635 top: 80px; 636 right: -20px; 637 transform: perspective(1000px) rotateY(10deg) rotateX(-3deg); 638 width: 240px; 639 height: auto; 640 z-index: 1; 641 transition: all 0.6s ease; 642 } 643 644 .phone-frame { 645 position: relative; 646 background: linear-gradient(135deg, #1F2937 0%, #374151 100%); 647 border-radius: 25px; 648 padding: 6px; 649 box-shadow: 650 0 20px 40px rgba(0, 0, 0, 0.3), 651 0 10px 20px rgba(0, 0, 0, 0.2), 652 inset 0 1px 0 rgba(255, 255, 255, 0.1); 653 transition: all 0.4s ease; 654 } 655 656 .phone-frame:hover { 657 transform: translateY(-5px); 658 box-shadow: 659 0 30px 60px rgba(0, 0, 0, 0.4), 660 0 15px 30px rgba(0, 0, 0, 0.3), 661 inset 0 1px 0 rgba(255, 255, 255, 0.1); 662 } 663 664 .app-screenshot { 665 width: 100%; 666 height: auto; 667 border-radius: 20px; 668 display: block; 669 object-fit: cover; 670 } 671 672 .phone-overlay { 673 position: absolute; 674 top: 6px; 675 left: 6px; 676 right: 6px; 677 bottom: 6px; 678 border-radius: 20px; 679 background: linear-gradient(135deg, rgba(20, 184, 166, 0.1) 0%, rgba(94, 234, 212, 0.05) 100%); 680 pointer-events: none; 681 } 682 683 /* Floating Elements */ 684 .floating-element { 685 position: absolute; 686 z-index: 3; 687 animation: float 6s ease-in-out infinite; 688 } 689 690 .floating-1 { 691 top: 50px; 692 left: -30px; 693 animation-delay: 0s; 694 } 695 696 .floating-2 { 697 top: 200px; 698 right: -40px; 699 animation-delay: 2s; 700 } 701 702 .floating-3 { 703 bottom: 100px; 704 left: -20px; 705 animation-delay: 4s; 706 } 707 708 .feature-badge { 709 background: white; 710 border-radius: 50px; 711 padding: 12px 20px; 712 box-shadow: 713 0 10px 30px rgba(0, 0, 0, 0.15), 714 0 4px 10px rgba(0, 0, 0, 0.1); 715 display: flex; 716 align-items: center; 717 gap: 8px; 718 border: 1px solid rgba(20, 184, 166, 0.2); 719 transition: all 0.3s ease; 720 white-space: nowrap; 721 } 722 723 .feature-badge:hover { 724 transform: translateY(-2px); 725 box-shadow: 726 0 15px 40px rgba(0, 0, 0, 0.2), 727 0 6px 15px rgba(0, 0, 0, 0.15); 728 border-color: var(--primary-color); 729 } 730 731 .badge-icon { 732 font-size: 1.2rem; 733 } 734 735 .badge-text { 736 font-size: 0.85rem; 737 font-weight: 600; 738 color: var(--text-dark); 739 } 740 741 @keyframes float { 742 743 0%, 744 100% { 745 transform: translateY(0px); 746 } 747 748 50% { 749 transform: translateY(-20px); 750 } 751 } 752 753 /* Responsive Design */ 754 @media (max-width: 768px) { 755 .app-images-container { 756 height: 450px; 757 max-width: 350px; 758 } 759 760 .app-image-primary { 761 width: 220px; 762 transform: translateX(-50%) perspective(800px) rotateY(-10deg) rotateX(3deg); 763 } 764 765 .app-image-secondary { 766 width: 180px; 767 top: 60px; 768 right: -10px; 769 transform: perspective(800px) rotateY(8deg) rotateX(-2deg); 770 } 771 772 .floating-element { 773 display: none; 774 /* Hide floating elements on mobile for cleaner look */ 775 } 776 } 777 778 @media (max-width: 576px) { 779 .app-images-container { 780 height: 350px; 781 max-width: 280px; 782 } 783 784 .app-image-primary { 785 width: 180px; 786 } 787 788 .app-image-secondary { 789 width: 150px; 790 top: 50px; 791 } 792 } 793 794 /* Load animation */ 795 .app-showcase.fade-in { 796 opacity: 0; 797 transform: translateY(30px); 798 transition: all 0.8s ease; 799 } 800 801 .app-showcase.fade-in.visible { 802 opacity: 1; 803 transform: translateY(0); 804 } 805 806 /* Video Overlay Styles */ 807 .video-overlay { 808 position: fixed; 809 top: 0; 810 left: 0; 811 width: 100%; 812 height: 100%; 813 background: rgba(0, 0, 0, 0.9); 814 display: none; 815 z-index: 9999; 816 justify-content: center; 817 align-items: center; 818 } 819 820 .video-container { 821 position: relative; 822 max-width: 90%; 823 max-height: 90%; 824 } 825 826 .video-container video { 827 width: 100%; 828 height: auto; 829 max-height: 80vh; 830 border-radius: 10px; 831 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); 832 } 833 834 .close-btn { 835 position: absolute; 836 top: -50px; 837 right: 0; 838 background: none; 839 border: none; 840 color: white; 841 font-size: 40px; 842 cursor: pointer; 843 z-index: 10000; 844 transition: color 0.3s ease; 845 } 846 847 .close-btn:hover { 848 color: var(--primary-color); 849 } 850</style> 851 852</body> 853 854</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.