1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Property turnover app for vacation rentals | listo</title> 7 <meta name="description" content="Photo checklists, real-time tracking, team accountability. Achieve consistent 5-star ratings that increase visibility, bookings, and revenue."> 8 <link rel="canonical" href="https://checklis.to/platform"> 9 <!-- Favicons --> 10 <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"> 11 <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"> 12 <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> 13 <!-- Analytics (Meta Pixel + GA4) - loads with consent --> 14
14<script src="/js/analytics.js"></script>
14 15 <!-- Fonts --> 16 <link rel="preconnect" href="https://fonts.googleapis.com"> 17 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 18 <link href="css/theme.css" rel="stylesheet" type="text/css"> 19 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"> 20 <style>:root { --primary-blue: #2563eb; --primary-blue-dark: #1e40af; --secondary-green: #059669; --accent-orange: #ea580c; --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937; --gray-900: #111827; --white: #ffffff; --gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --gradient-cta: linear-gradient(135deg, #2563eb 0%, #1e40af 100%); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; color: var(--gray-800); overflow-x: hidden; } /* Navigation */.navbar { position: fixed; top: 0; width: 100%; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--gray-200); z-index: 1000; transition: all 0.3s ease; } .navbar.scrolled { background: rgba(255, 255, 255, 0.98); box-shadow: var(--shadow-lg); } .nav-container { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; } .logo { display: flex; align-items: center; text-decoration: none; } .logo img { height: 40px; width: auto; } .nav-links { display: flex; list-style: none; gap: 2rem; align-items: center; } .nav-links a { text-decoration: none; color: var(--gray-700); font-weight: 500; transition: color 0.3s ease; } .nav-links a:hover, .nav-links a.active { color: var(--primary-blue); } .nav-cta { display: flex; gap: 1rem; align-items: center; } .btn { padding: 0.75rem 1.5rem; border-radius: 0.5rem; text-decoration: none; font-weight: 600; transition: all 0.3s ease; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.5rem; } .btn-secondary { background: var(--gray-100); color: var(--gray-700); } .btn-secondary:hover { background: var(--gray-200); } .btn-primary { background: var(--gradient-cta); color: var(--white); box-shadow: var(--shadow-lg); } .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-xl); } /* Hero Section */.hero { padding-top: 80px; min-height: 40vh; background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--white); position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" patternUnits="userSpaceOnUse" width="100" height="100"><circle cx="50" cy="50" r="25" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>'); opacity: 0.1; } .hero-container { max-width: 1200px; margin: 0 auto; padding: 2rem 2rem; position: relative; z-index: 2; } .hero h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 900; line-height: 1.1; margin-bottom: 1.5rem; letter-spacing: -0.02em; opacity: 0; animation: fadeInUp 1s ease 0.5s forwards; } .hero-subheading { font-size: clamp(1.25rem, 3vw, 1.5rem); margin-bottom: 2rem; opacity: 0.9; max-width: 600px; margin-left: auto; margin-right: auto; opacity: 0; animation: fadeInUp 1s ease 0.7s forwards; } /* Platform Features */.features-section { padding: 6rem 0; background: var(--white); } .container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; } .feature { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; margin-bottom: 6rem; } .feature:nth-child(even) .feature-content { order: 2; } .feature:nth-child(even) .feature-image { order: 1; } .feature-number { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--primary-blue); color: var(--white); border-radius: 50%; font-weight: 700; margin-bottom: 1rem; } .feature-title { font-size: 2.5rem; font-weight: 800; margin-bottom: 1.5rem; color: var(--gray-900); } .feature-description { font-size: 1.125rem; color: var(--gray-600); margin-bottom: 2rem; line-height: 1.7; } .feature-list { list-style: none; margin-bottom: 2rem; } .feature-list li { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; color: var(--gray-700); } .feature-list li::before { content: 'â¢'; color: var(--primary-blue); font-weight: 700; font-size: 1.5rem; line-height: 1; } .feature-image { background: var(--gray-100); border-radius: 1rem; margin: 0 auto; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; box-shadow: var(--shadow-xl); } .feature-image.iphone { width: 350px; height: 700px; border-radius: 2rem; } .feature-image.android { width: 300px; height: 650px; border-radius: 1.5rem; } .feature-image img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .image-placeholder { padding: 1.5rem; text-align: center; color: var(--gray-500); display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; } /* CTA Section */.cta-section { padding: 6rem 0; background: var(--gradient-hero); color: var(--white); text-align: center; } .cta-title { font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 800; margin-bottom: 1.5rem; } .cta-subtitle { font-size: 1.25rem; margin-bottom: 3rem; opacity: 0.9; } .cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .btn-cta-primary { background: var(--white); color: var(--primary-blue); padding: 1rem 2rem; font-size: 1.125rem; } /* Footer */.footer { background: var(--gray-900); color: var(--white); padding: 4rem 0 2rem; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 3rem; margin-bottom: 3rem; } .footer-column h4 { font-size: 1.125rem; font-weight: 700; margin-bottom: 1.5rem; color: var(--white); } .footer-column ul { list-style: none; } .footer-column ul li { margin-bottom: 0.75rem; } .footer-column ul li a { color: var(--gray-300); text-decoration: none; transition: color 0.3s ease; } .footer-column ul li a:hover { color: var(--white); } .footer-bottom { border-top: 1px solid var(--gray-700); padding-top: 2rem; text-align: center; color: var(--gray-400); font-size: 0.9rem; } /* Animations */@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Responsive */@media (max-width: 768px) { .nav-links { display: none; } .feature { grid-template-columns: 1fr; } .feature:nth-child(even) .feature-content, .feature:nth-child(even) .feature-image { order: unset; } .cta-buttons { flex-direction: column; align-items: center; } } /* Scroll animations */.scroll-fade { opacity: 0; transform: translateY(30px); transition: all 0.8s ease; } .scroll-fade.visible { opacity: 1; transform: translateY(0); }</style> 21 <!-- CTA Handler Styles --> 22 <link rel="stylesheet" href="/css/cta-handler.css"> 23 <!-- Shared Navigation Styles --> 24 <link rel="stylesheet" href="/css/shared-nav.css"> 25 <link rel="stylesheet" href="/css/shared-footer.css"> 26 <!-- Cookie Consent Styles --> 27 <link rel="stylesheet" href="/css/cookie-consent.css"> 28 <!-- Screenshot Quality Enhancement --> 29 <link rel="stylesheet" href="/css/screenshot-quality.css"> 30 <!-- Structured Data: WebPage + Service + Breadcrumb --> 31
31<script type="application/ld+json"> 32 { 33 "@context": "https://schema.org", 34 "@type": "WebPage", 35 "name": "Property turnover app for vacation rentals", 36 "description": "How the listo platform works: build photo checklists, send them to your team, review verification photos, and protect your 5-star ratings.", 37 "url": "https://checklis.to/platform.html", 38 "primaryImageOfPage": "https://checklis.to/og-image.png", 39 "mainEntity": { 40 "@type": "SoftwareApplication", 41 "name": "listo", 42 "applicationCategory": "BusinessApplication", 43 "operatingSystem": "iOS, Android, Web" 44 } 45 } 46 </script>
46 47
47<script type="application/ld+json"> 48 { 49 "@context": "https://schema.org", 50 "@type": "BreadcrumbList", 51 "itemListElement": [ 52 { "@type": "ListItem", "position": 1, "name": "Home", "item": "https://checklis.to/" }, 53 { "@type": "ListItem", "position": 2, "name": "Platform", "item": "https://checklis.to/platform.html" } 54 ] 55 } 56 </script>
56 57 </head> 58 <body> 59 <!-- Navigation will be loaded here --> 60 <div id="nav-placeholder"></div> 61 <!-- Hero Section --> 62 <section class="hero"> 63 <div class="hero-container"> 64 <h1>Everything You Need for <br>Perfect Turnovers</h1> 65 <p class="hero-subheading">Achieve consistent 5-star ratings and maximize your revenue</p> 66 </div> 67 </section> 68 <!-- Platform Features --> 69 <section class="features-section"> 70 <div class="container"> 71 <!-- Section 1: Create Your Checklists --> 72 <div class="feature scroll-fade"> 73 <div class="feature-content"> 74 <h2 class="feature-title">Create Your Checklists Room by Room</h2> 75 <p class="feature-description"> 76 Set up each property by adding rooms (bedroom, bathroom, kitchen, etc.), then add checklist items to each room. Upload reference photos showing exactly how things should look. Your team sees your standards for every item in every room. </p> 77 <ul class="feature-list"> 78 <li>Add rooms for each property (bedroom, bathroom, kitchen)</li> 79 <li>Create checklist items within each room</li> 80 <li>Upload reference photos showing your standards</li> 81 <li>Reorder items by drag and drop for workflow efficiency</li> 82 <li>Mark items as photo-required for critical areas</li> 83 </ul> 84 </div> 85 <div class="feature-image iphone"> 86 <img src="/screenshots/Host-screenshots-apple-iphone-15-pro-max-black-titanium-mockup/host-towels-item-set-quality-standard-portrait.png" alt="Host setting quality standards with reference photo for towels"> 87 </div> 88 </div> 89 <!-- Section 2: Team Members Complete Inspections --> 90 <div class="feature scroll-fade"> 91 <div class="feature-content"> 92 <h2 class="feature-title">Your Team Completes Inspections with Photos</h2> 93 <p class="feature-description"> 94 Cleaners open the app on their phone (Android or iPhone), select the property, and start the inspection. They work through each room, verifying items and taking photos as proof. The app shows your reference photo next to their photo for easy comparison. When done, you get notified instantly. </p> 95 <ul class="feature-list"> 96 <li>Step-by-step checklist guides cleaners through every room</li> 97 <li>Take photos to verify each item is complete</li> 98 <li>See your reference photo while taking verification photo</li> 99 <li>Report issues on the spot with a photo and priority level</li> 100 <li>Submit inspection - you get notified via push notification and email</li> 101 <li>Available in English, Spanish, French, German, Italian, and Portuguese</li> 102 </ul> 103 </div> 104 <div class="feature-image android"> 105 <img src="/screenshots/team-member-google-pixel-8-rose-mockup/team-member-reviewing-towels-photo-ok-not-ok-portrait.png" alt="Team member reviewing towels photo with OK and NOT OK buttons"> 106 </div> 107 </div> 108 <!-- Section 3: Review Results Instantly --> 109 <div class="feature scroll-fade"> 110 <div class="feature-content"> 111 <h2 class="feature-title">Review Every Detail with Photo Proof</h2> 112 <p class="feature-description"> 113 When your cleaner completes an inspection, you get notified immediately. Open the completed inspection to see every photo they took, room by room. Filter by "OK" or "Not OK" items. See who did the work and exactly when. All photo evidence is timestamped and stored permanently. </p> 114 <ul class="feature-list"> 115 <li>Push notification and email when inspection completes</li> 116 <li>View all photos with reference photos side by side</li> 117 <li>Filter to see only items marked "OK" or "Not OK"</li> 118 <li>See inspector name, completion time, and property details</li> 119 <li>Permanent photo records with timestamps for your protection</li> 120 </ul> 121 </div> 122 <div class="feature-image iphone"> 123 <img src="/screenshots/Host-screenshots-apple-iphone-15-pro-max-black-titanium-mockup/host-viewing-completed-ins
123pection-towels-issue-portrait.png" alt="Host reviewing completed inspection with photo proof of issues"> 124 </div> 125 </div> 126 <!-- Section 4: Track Issues & Keep Properties Running --> 127 <div class="feature scroll-fade"> 128 <div class="feature-content"> 129 <h2 class="feature-title">Never Lose Track of an Issue</h2> 130 <p class="feature-description"> 131 Broken towel rack? Low on supplies? Your team reports it with a photo. Assign it to the right person. Track it until it's fixed. Everything that needs attention stays visible until it's done. </p> 132 <ul class="feature-list"> 133 <li>Report issues during inspections with photos</li> 134 <li>Assign to cleaners, handymen, or yourself</li> 135 <li>Track supplies that need replenishing</li> 136 <li>Set priority levels (low, medium, high, urgent)</li> 137 <li>Nothing falls through the cracks</li> 138 </ul> 139 </div> 140 <div class="feature-image iphone"> 141 <img src="/screenshots/Host-screenshots-apple-iphone-15-pro-max-black-titanium-mockup/host-todo-page-with-soap-supply-issue-portrait.png" alt="Host tracking issues and tasks that need attention"> 142 </div> 143 </div> 144 <!-- Section 5: Protect Against Guest Complaints --> 145 <div class="feature scroll-fade"> 146 <div class="feature-content"> 147 <h2 class="feature-title">Photo Evidence Protects Your 5-Star Rating</h2> 148 <p class="feature-description"> 149 Guest claims the bathtub wasn't clean? Pull up your timestamped inspection photos. Zoom in to show the sparkling condition before their arrival. Counter unfair complaints with clear, zoomable photo evidence that protects your 5-star rating. </p> 150 <ul class="feature-list"> 151 <li>Zoom into photos to show pristine details that prove cleanliness</li> 152 <li>Timestamped photos document exact property condition before guest check-in</li> 153 <li>Counter complaints about bathtubs, showers, floors, and other high-scrutiny areas</li> 154 <li>Photo quality stays sharp even when zoomed - every detail is visible</li> 155 <li>Permanent storage - evidence is always available when you need it</li> 156 </ul> 157 </div> 158 <div class="feature-image iphone"> 159 <img src="/screenshots/Host-screenshots-apple-iphone-15-pro-max-black-titanium-mockup/zoomed-in-bathtub-proof-of-cleaning-portrait.png" alt="Host zooming into bathtub photo to counter guest complaint about cleanliness"> 160 </div> 161 </div> 162 </div> 163 </section> 164 165 <!-- What listo Is and Isn't --> 166 <section style="padding: 3rem 0 6rem 0; background: var(--gray-50);"> 167 <div class="container"> 168 <div style="max-width: 800px; margin: 0 auto;"> 169 <div style="background: var(--primary-blue); color: white; padding: 2rem; border-radius: 1rem; text-align: center;"> 170 <p style="font-size: 1.125rem; line-height: 1.7; margin: 0;"><strong>Built to work alongside your existing tools.</strong> Keep using what works for bookings, pricing, and accounting. Use listo to keep standards clear and easy to follow with easy to use photo checklists.</p> 171 </div> 172 </div> 173 </div> 174 </section> 175 176 <!-- CTA Section --> 177 <section class="cta-section"> 178 <div class="container"> 179 <h2 class="cta-title">Ready to Set Your Standards?</h2> 180 <p class="cta-subtitle">Trusted by hundreds of hosts and property managers</p> 181 <div class="cta-buttons"> 182 <a href="/pricing" class="btn btn-cta-primary">See pricing</a> 183 <a href="#download" class="btn btn-cta-primary listo-app-download-cta">Try it now</a> 184 </div> 185 </div> 186 </section> 187 <!-- Footer will be loaded here --> 188 <div id="footer-placeholder"></div> 189
189<script> 190 // Navbar scroll effect 191 window.addEventListener('scroll', () => { 192 const navbar = document.getElementById('navbar'); 193 if (window.scrollY > 50) { 194 navbar.classList.add('scrolled'); 195 } else { 196 navbar.classList.remove('scrolled'); 197 } 198 }); 199 200 // Scroll animations 201 const observerOptions = { 202 threshold: 0.1, 203 rootMargin: '0px 0px -50px 0px' 204 }; 205 206 const observer = new IntersectionObserver((entries) => { 207 entries.forEach(entry => { 208 if (entry.isIntersecting) { 209 entry.target.classList.add('visible'); 210 } 211 }); 212 }, observerOptions); 213 214 document.querySelectorAll('.scroll-fade').forEach(el => { 215 observer.observe(el); 216 }); 217 </script>
217 218 <!-- Cookie Consent Banner --> 219 <div id="cookie-consent-banner" class="cookie-consent"> 220 <div class="cookie-consent-container"> 221 <div class="cookie-consent-text"> 222 We use cookies to improve your experience and analyze site usage. By clicking "Accept", you consent to our use of cookies. <a href="/privacy">Learn more</a> 223 </div> 224 <div class="cookie-consent-buttons"> 225 <button id="cookie-accept" class="cookie-btn cookie-btn-accept">Accept</button> 226 <button id="cookie-decline" class="cookie-btn cookie-btn-decline">Decline</button> 227 </div> 228 </div> 229 </div> 230 <!-- CTA Handler Script --> 231
231<script src="/js/cta-handler.js"></script>
231 232 <!-- Shared Navigation Script --> 233
233<script src="/js/shared-nav.js"></script>
233 234 <!-- Cookie Consent Script --> 235
235<script src="/js/cookie-consent.js"></script>
235 236 <!-- Shared Footer Script --> 237
237<script src="/js/shared-footer.js"></script>
237 238 </body> 239</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.