1<!DOCTYPE html> 2<html> 3 <head> 4 <title>Is This Healthy?</title> 5 <meta name="viewport" content="width=device-width,initial-scale=1"> 6 <meta name="csrf-param" content="authenticity_token" /> 7<meta name="csrf-token" content="5NiA_5gPxTrA6pE0BnDsyWDPYgvufoDBl-6I9a1E1hGdgEEN488sWge_SALpMi5EwP7o4EU3Zii8VVETCyTerg" /> 8 9 <meta name="trustpilot-one-time-domain-verification-id" content="d9df6c87-7c1d-4f70-b643-570165544de4"/> 10 11 <link rel="icon" type="image/x-icon" href="/favicon.ico" data-turbo-track="reload" /> 12 13 <!-- Tailwind CSS (this is all you need for styling) --> 14 <link rel="stylesheet" href="/assets/application-24a1cf3592274d91cc2bbd716d0ea5b6036564a0e47aafbe986d2ed65394cffb.css" data-turbo-track="reload" /> 15 16 <!-- JavaScript with Stimulus --> 17
17<script src="/assets/application-de81fff2bddf4b89eeca9ab4f22af6954823ba7779ba534dd33ebf80a7e26b85.js" data-turbo-track="reload" type="module"></script>
17 18 19 <!-- Custom color overrides for your brand --> 20 <style> 21 .bg-green-600 { background-color: #91c788 !important; } 22 .bg-green-500 { background-color: #91c788 !important; } 23 .hover\:bg-green-700:hover { background-color: #7fb97e !important; } 24 .hover\:bg-green-600:hover { background-color: #81b678 !important; } 25 .text-green-600 { color: #91c788 !important; } 26 .text-green-700 { color: #7fb97e !important; } 27 .border-green-600 { border-color: #91c788 !important; } 28 .border-green-500 { border-color: #91c788 !important; } 29 .bg-green-100 { background-color: #e5f1e5 !important; } 30 .bg-green-50 { background-color: #f0f7f0 !important; } 31 .focus\:ring-orange-500:focus { --tw-ring-color: #ff725e !important; } 32 .bg-orange-500 { background-color: #ff725e !important; } 33 .bg-orange-600 { background-color: #ff6149 !important; } 34 .hover\:bg-orange-600:hover { background-color: #ff6149 !important; } 35 .hover\:bg-orange-700:hover { background-color: #ff5234 !important; } 36 </style> 37 <link rel="stylesheet" href="/assets/application-24a1cf3592274d91cc2bbd716d0ea5b6036564a0e47aafbe986d2ed65394cffb.css" data-turbo-track="reload" /> 38 39 40<title>CHANGE ME | is-this-healthy.com</title> 41<link rel="icon" type="image/svg+xml" href="https://isthishealthy.ai/favicon.svg" sizes="any"> 42<link rel="icon" type="images/png" href="https://isthishealthy.ai/favicon-16x16.png" sizes="16x16"> 43<link rel="icon" type="image/png" href="https://isthishealthy.ai/android-chrome-192x192.png" sizes="192x192"> 44<link rel="icon" type="image/png" href="https://isthishealthy.ai/android-chrome-512x512.png" sizes="512x512"> 45<link rel="icon" type="image/png" href="https://isthishealthy.ai/apple-touch-icon.png" sizes="180x180"> 46<meta name="description" content="CHANGE ME"> 47<link rel="canonical" href="https://isthishealthy.ai/"> 48<meta property="og:title" content="Is This Healthy?"> 49<meta property="og:type" content="website"> 50<meta property="og:url" content="https://isthishealthy.ai/"> 51<meta property="og:image" content="https://isthishealthy.ai/assets/railsui/meta/opengraph-08d58c575e90969a270e22b37c77dc9c5ba7924731c5bc408abb9feeecc798dc.jpg"> 52<meta property="og:image:width" content="1200"> 53<meta property="og:image:height" content="630"> 54<meta property="og:site_name" content="is-this-healthy.com"> 55<meta property="og:description" content="CHANGE ME"> 56<meta name="twitter:title" content="CHANGE ME"> 57<meta name="twitter:description" content="CHANGE ME"> 58<meta name="twitter:card" content="summary"> 59<meta name="twitter:image" content="https://isthishealthy.ai/assets/railsui/meta/opengraph-mark-439e8331723e531062438c5bbba392354e68bbd256681298496593c2d87c67ab.jpg"> 60<meta name="twitter:image:width" content="400"> 61<meta name="twitter:image:height" content="400"> 62<meta name="viewport" content="width=device-width, initial-scale=1"> 63<meta name="author" content="Is This Healthy?"> 64 65<link rel="preconnect" href="https://fonts.googleapis.com"> 66<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 67<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet"> 68 69<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/tippy.css" data-turbo-track="reload" /> 70 71 72</head> 73 74 <body> 75 <!-- app/views/pages/landing.html.erb --> 76 77<div class="bg-white"> 78 <!-- Header/Navigation --> 79 <header class="sticky top-0 z-50 bg-white"> 80 <div class="mx-auto max-w-7xl px-4 sm:px-6"> 81 <div class="flex items-center justify-between py-6"> 82 <!-- Logo on the left --> 83 <div class="flex justify-start items-center lg:w-0 lg:flex-1"> 84 <a href="/" class="flex items-center"> 85 <img class="h-12 w-auto sm:h-14" alt="Is This Healthy Logo" src="/assets/logo-is-this-healthy-ae86ad2ca772fdd41ae7079899a4b198426c758cb6e90fccd0c8aeb54b10b21e.png" /> 86 <span class="ml-3 text-xl font-bold text-black-600">isthishealthy.ai</span> 87 </a> 88 </div> 89 90 <!-- Nav links in the middle --> 91 <nav class="hidden md:flex space-x-10"> 92 <a href="/" class="text-base font-medium text-gray-500 hover:text-gray-900 transition-colors duration-300">Home</a> 93 <a href="/#features" class="text-base font-medium text-gray-500 hover:text-gray-900 border-b-2 border-transparent hover:border-green-600 transition-all duration-300">Features</a> 94 <a href="/#pricing" class="text-base font-medium text-gray-500 hover:text-gray-900 border-b-2 border-transparent hover:border-green-600 transition-all duration-300">Pricing</a> 95 <a href="/#faq" class="text-base font-medium text-gray-500 hover:text-gray-900 border-b-2 border-transparent hover:border-green-600 transition-all duration-300">FAQ</a> 96 </nav> 97 98 <!-- Buttons on the right --> 99 <div class="hidden md:flex items-center justify-end md:flex-1 lg:w-0 space-x-4"> 100 <a target="_blank" class="inline-flex items-center justify-center whitespace-nowrap rounded-md border border-transparent bg-green-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-green-700" href="https://chromewebstore.google.com/detail/is-this-healthy/hjpagdkmnohahoapmmpldbkomcooibpb"> 101 <img class="w-5 h-5" src="/assets/chrome-118e119cc058f09740223851e4ef33c1f3dd3380ab689e250c2435bf3b1399d2.svg" />
102 <span class="ml-3">Add to Chrome</span> 103</a> 104 <a class="inline-flex items-center justify-center rounded-full bg-green-100 p-3 text-green-600 hover:bg-green-200 transition-colors duration-200" href="/rui/dashboard"> 105 <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> 106 <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" /> 107 </svg> 108</a> </div> 109 110 <!-- Mobile menu button --> 111 <div class="-mr-2 -my-2 md:hidden"> 112 <button id="mobile-menu-button" type="button" class="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-green-500" aria-expanded="false"> 113 <span class="sr-only">Open menu</span> 114 <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true"> 115 <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /> 116 </svg> 117 </button> 118 </div> 119 </div> 120 </div> 121 122 <!-- Mobile menu --> 123 <div id="mobile-menu" class="hidden md:hidden"> 124 <div class="space-y-1 px-2 pb-3 pt-2"> 125 <a href="/" class="block rounded-md px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900">Home</a> 126 <a href="/#features" class="block rounded-md px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900">Features</a> 127 <a href="/#pricing" class="block rounded-md px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900">Pricing</a> 128 <a href="/#faq" class="block rounded-md px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900">FAQ</a> 129 <a href="/rui/dashboard" class="block rounded-md px-3 py-2 text-base font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900">Dashboard</a> 130 </div> 131 </div> 132</header> 133 134 135 <!-- Hero Section --> 136 <div class="relative overflow-hidden bg-white"> 137 <div class="mx-auto max-w-7xl"> 138 <div class="relative z-10 bg-white pb-8 sm:pb-16 md:pb-20 lg:w-full lg:max-w-2xl lg:pb-28 xl:pb-32"> 139 <main class="mx-auto mt-10 max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28"> 140 <div class="sm:text-center lg:text-left"> 141 <h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl md:text-6xl"> 142 <span class="block">Never miss a</span> 143 <span class="block text-green-600">harmful ingredient again</span> 144 </h1> 145 <p class="mt-3 text-base text-gray-500 sm:mx-auto sm:mt-5 sm:max-w-xl sm:text-lg md:mt-5 md:text-xl lg:mx-0"> 146 Whether you have allergies, dietary restrictions, or simply want to know what's in your products â our AI-powered extension scans ingredients instantly and alerts you to anything you should avoid. 147 </p> 148 <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start"> 149 <div class="rounded-md shadow"> 150 <a href="https://chromewebstore.google.com/detail/is-this-healthy/hjpagdkmnohahoapmmpldbkomcooibpb" class="flex w-full items-center justify-center rounded-md border border-transparent bg-green-600 px-8 py-3 text-base font-medium text-white hover:bg-green-700 md:py-4 md:px-10 md:text-lg"> 151 <img class="w-5 h-5" src="/assets/chrome-118e119cc058f09740223851e4ef33c1f3dd3380ab689e250c2435bf3b1399d2.svg" /> 152 <p class="ml-3">Add to Chrome â It's Free</p> 153 </a> 154 </div> 155 <div class="mt-3 sm:mt-0 sm:ml-3"> 156 <a href="#how-it-works" class="flex w-full items-center justify-center rounded-md border border-transparent bg-green-100 px-8 py-3 text-base font-medium text-green-700 hover:bg-green-200 md:py-4 md:px-10 md:text-lg">See How It Works</a> 157 </div> 158 </div> 159 <p class="mt-4 text-sm text-gray-400"> 160 ð¡ï¸ Trusted by parents, allergy sufferers & health-conscious shoppers 161 </p> 162 </div> 163 </main> 164 </div> 165 </div> 166 </div> 167 168 <!-- Who It's For Section --> 169 <div class="bg-green-50 py-12 sm:py-16"> 170 <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> 171 <div class="lg:text-center mb-10"> 172 <h2 class="text-base font-semibold uppercase tracking-wide text-green-600">Who It's For</h2> 173 <p class="mt-2 text-3xl font-bold leading-8 tracking-tight text-gray-900 sm:text-4xl">Built for people who need to know</p> 174 </div> 175 176 <div class="grid md:grid-cols-3 gap-8"> 177 <!-- Allergy Sufferers --> 178 <div class="bg-white rounded-xl p-6 shadow-sm"> 179 <div class="flex items-center justify-center h-12 w-12 rounded-full bg-red-100 text-red-600 mb-4"> 180 <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> 181 <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" /> 182 </svg> 183 </div> 184 <h3 class="text-lg font-semibold text-gray-900 mb-2">Allergy Sufferers</h3> 185 <p class="text-gray-500">Gluten, nuts, lactose, shellfish... Set up your allergens once, get instant alerts every time you shop.</p> 186 </div> 187 188 <!-- Parents --> 189 <div class="bg-white rounded-xl p-6 shadow-sm"> 190 <div class="flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 text-blue-600 mb-4"> 191 <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> 192 <path stroke-linecap="round" stroke-linejoin="round" d="M15.182 15.182a4.5 4.5 0 01-6.364 0M21 12a9 9 0 11-18 0 9 9 0 0118 0zM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75zm-.375 0h.008v.015h-.008V9.75zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75zm-.375 0h.008v.015h-.008V9.75z" /> 193 </svg> 194 </div> 195 <h3 class="text-lg font-semibold text-gray-900 mb-2">Parents</h3> 196 <p class="text-gray-500">Protect your kids from hidden allergens and harmful additives in food and skincare products.</p> 197 </div> 198 199 <!-- Health-Conscious --> 200 <div class="bg-white rounded-xl p-6 shadow-sm"> 201 <div class="flex items-center justify-center h-12 w-12 rounded-full bg-green-100 text-green-600 mb-4"> 202 <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> 203 <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> 204 </svg> 205 </div> 206 <h3 class="text-lg font-semibold text-gray-900 mb-2">Health-Conscious Shoppers</h3> 207 <p class="text-gray-500">Like Yuka, but for online shopping. Get instant health scores and understand what's really in your products.</p> 208 </div> 209 </div> 210 </div> 211 </div> 212 213 <!-- How It Works Section --> 214 <div id="how-it-works" class="bg-white py-12 sm:py-16 lg:py-20"> 215 <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> 216 <div class="lg:text-center mb-12"> 217 <h2 class="text-base font-semibold uppercase tracking-wide text-green-600">How It Works</h2> 218 <p class="mt-2 text-3xl font-bold leading-8 tracking-tight text-gray-900 sm:text-4xl">
2183 seconds to know if it's safe</p> 219 </div> 220 221 <div class="grid md:grid-cols-3 gap-8"> 222 <!-- Step 1 --> 223 <div class="text-center"> 224 <div class="flex items-center justify-center h-16 w-16 rounded-full bg-green-600 text-white text-2xl font-bold mx-auto mb-4">1</div> 225 <h3 class="text-lg font-semibold text-gray-900 mb-2">Browse any product</h3> 226 <p class="text-gray-500">Works on Amazon, Walmart, Sephora, Carrefour, and thousands of other sites.</p> 227 </div> 228 229 <!-- Step 2 --> 230 <div class="text-center"> 231 <div class="flex items-center justify-center h-16 w-16 rounded-full bg-green-600 text-white text-2xl font-bold mx-auto mb-4">2</div> 232 <h3 class="text-lg font-semibold text-gray-900 mb-2">Click the button</h3> 233 <p class="text-gray-500">Our AI instantly analyzes all ingredients and checks against your personal allergen list.</p> 234 </div> 235 236 <!-- Step 3 --> 237 <div class="text-center"> 238 <div class="flex items-center justify-center h-16 w-16 rounded-full bg-green-600 text-white text-2xl font-bold mx-auto mb-4">3</div> 239 <h3 class="text-lg font-semibold text-gray-900 mb-2">Get your score & alerts</h3> 240 <p class="text-gray-500">See a health score from 1-5, warnings for harmful ingredients, and alternatives if needed.</p> 241 </div> 242 </div> 243 </div> 244 </div> 245 246 <!-- Features Section --> 247 <div id="features" class="bg-gray-50 py-12 sm:py-16 lg:py-20"> 248 <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> 249 <div class="lg:text-center"> 250 <h2 class="text-base font-semibold uppercase tracking-wide text-green-600">Features</h2> 251 <p class="mt-2 text-3xl font-bold leading-8 tracking-tight text-gray-900 sm:text-4xl">Everything you need to shop safely</p> 252 </div> 253 254 <div class="mt-12 grid md:grid-cols-2 lg:grid-cols-4 gap-8"> 255 <div class="text-center"> 256 <div class="flex items-center justify-center h-14 w-14 rounded-full bg-green-500 text-white mx-auto mb-4"> 257 <svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> 258 <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" /> 259 </svg> 260 </div> 261 <h3 class="text-lg font-semibold text-gray-900 mb-2">Allergen Alerts</h3> 262 <p class="text-gray-500 text-sm">Instant red alerts for your personal allergens.</p> 263 </div> 264 265 <div class="text-center"> 266 <div class="flex items-center justify-center h-14 w-14 rounded-full bg-green-500 text-white mx-auto mb-4"> 267 <svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> 268 <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /> 269 </svg> 270 </div> 271 <h3 class="text-lg font-semibold text-gray-900 mb-2">Health Score</h3> 272 <p class="text-gray-500 text-sm">Clear 1-5 score in seconds.</p> 273 </div> 274 275 <div class="text-center"> 276 <div class="flex items-center justify-center h-14 w-14 rounded-full bg-green-500 text-white mx-auto mb-4"> 277 <svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> 278 <path stroke-linecap="round" stroke-linejoin="round" d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418" /> 279 </svg> 280 </div> 281 <h3 class="text-lg font-semibold text-gray-900 mb-2">Works Everywhere</h3> 282 <p class="text-gray-500 text-sm">Amazon, Sephora, Walmart & more.</p> 283 </div> 284 285 <div class="text-center"> 286 <div class="flex items-center justify-center h-14 w-14 roun
286ded-full bg-green-500 text-white mx-auto mb-4"> 287 <svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> 288 <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" /> 289 </svg> 290 </div> 291 <h3 class="text-lg font-semibold text-gray-900 mb-2">AI-Powered</h3> 292 <p class="text-gray-500 text-sm">Smart analysis based on science.</p> 293 </div> 294 </div> 295 </div> 296 </div> 297 298 <!-- Social Proof / Trust --> 299 <div class="bg-white py-12"> 300 <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> 301 <div class="text-center"> 302 <p class="text-gray-500 text-lg"> 303 "This extension gives me peace of mind when shopping online for my kids." 304 </p> 305 <p class="mt-2 text-sm text-gray-400">â Antoine, father of 2 with dairy allergies</p> 306 </div> 307 </div> 308 </div> 309 310 <!-- Pricing Section --> 311 <div id="pricing" class="bg-gray-50 py-12 sm:py-16 lg:py-20"> 312 <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> 313 <div class="sm:align-center sm:flex sm:flex-col"> 314 <h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-center">Simple, affordable pricing</h1> 315 <p class="mt-4 text-xl text-gray-500 sm:text-center">Protect what matters. Starting at $0.</p> 316 </div> 317 318 <div class="mt-12 sm:mt-16 sm:grid sm:grid-cols-2 gap-6 lg:mx-auto lg:max-w-4xl"> 319 <!-- Free Tier --> 320 <div class="rounded-lg border border-gray-200 shadow-sm h-full bg-white"> 321 <div class="p-6 flex flex-col h-full"> 322 <h2 class="text-lg font-medium leading-6 text-gray-900">Free</h2> 323 <p class="mt-2 text-sm text-gray-500">Perfect to try it out</p> 324 <div class="mt-4 space-y-3 flex-grow"> 325 <div class="flex items-center gap-2"> 326 <svg class="h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"> 327 <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /> 328 </svg> 329 <span class="text-sm text-gray-600">6 analyses per month</span> 330 </div> 331 <div class="flex items-center gap-2"> 332 <svg class="h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"> 333 <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /> 334 </svg> 335 <span class="text-sm text-gray-600">Health score 1-5</span> 336 </div> 337 <div class="flex items-center gap-2"> 338 <svg class="h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"> 339 <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /> 340 </svg> 341 <span class="text-sm text-gray-600">Ingredient warnings</span> 342 </div> 343 <div class="flex items-center gap-2"> 344 <svg class="h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"> 345 <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /> 346 </svg> 347 <span class="text-sm text-gray-600">Personal allergen alerts</span> 348 </div> 349 <div class="flex items-center gap-2"> 350 <svg class="h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"> 351 <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /> 352 </svg> 353 <span class="text-sm text-gray-600">Dashboard & stats</span> 354 </div> 355 </div> 356 <div class="mt-8"> 357 <p> 358 <span class="text-4xl font-bold tracking-tight text-gray-900">$0</span> 359 <span class="text-base font-medium text-gray-500">/month</span> 360 </p> 361 <a href="https://chromewebstore.google.com/detail/is-this-healthy/hjpagdkmnohahoapmmpldbkomcooibpb" class="mt-6 block w-full rounded-md border border-green-600 bg-white py-3 text-center text-sm font-semibold text-green-600 hover:bg-gray-50">Get started free</a> 362 <p class="mt-3 text-xs text-center text-gray-400 invisible">Placeholder</p> 363 </div> 364 </div> 365 </div> 366 367 <!-- Healthy Tier with Toggle --> 368 <div class="rounded-lg border-2 border-green-500 shadow-lg h-full mt-4 sm:mt-0 bg-white relative"> 369 <div class="absolute -top-3 left-1/2 -translate-x-1/2">
370 <span class="bg-green-500 text-white text-xs font-semibold px-3 py-1 rounded-full">MOST POPULAR</span> 371 </div> 372 <div class="p-6 flex flex-col h-full"> 373 <h2 class="text-lg font-medium leading-6 text-gray-900">Healthy</h2> 374 <p class="mt-2 text-sm text-gray-500">For allergy sufferers & families</p> 375 376 <!-- Billing Toggle --> 377 <div class="mt-4 flex items-center justify-center gap-3"> 378 <span id="monthly-label" class="text-sm font-medium text-gray-900">Monthly</span> 379 <button type="button" id="billing-toggle" class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-gray-200 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2" role="switch" aria-checked="false"> 380 <span class="sr-only">Toggle billing period</span> 381 <span id="toggle-dot" class="pointer-events-none relative inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out translate-x-0"></span> 382 </button> 383 <span id="annual-label" class="text-sm font-medium text-gray-500">Annual</span> 384 <span class="inline-flex items-center rounded-full bg-yellow-100 px-2 py-0.5 text-xs font-medium text-yellow-800">Save 33%</span> 385 </div> 386 387 <div class="mt-4 space-y-3 flex-grow"> 388 <div class="flex items-center gap-2"> 389 <svg class="h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"> 390 <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /> 391 </svg> 392 <span class="text-sm text-gray-600"><strong>500 analyses</strong> per month</span> 393 </div> 394 <div class="flex items-center gap-2"> 395 <svg class="h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"> 396 <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /> 397 </svg> 398 <span class="text-sm text-gray-600">Health score 1-5</span> 399 </div> 400 <div class="flex items-center gap-2"> 401 <svg class="h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"> 402 <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /> 403 </svg> 404 <span class="text-sm text-gray-600">Ingredient warnings</span> 405 </div> 406 <div class="flex items-center gap-2"> 407 <svg class="h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"> 408 <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /> 409 </svg> 410 <span class="text-sm text-gray-600">Personal allergen alerts</span> 411 </div> 412 <div class="flex items-center gap-2"> 413 <svg class="h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"> 414 <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /> 415 </svg> 416 <span class="text-sm text-gray-600"><strong>Full analysis history</strong></span> 417 </div> 418 <div class="flex items-center gap-2"> 419 <svg class="h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"> 420 <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /> 421 </svg> 422 <span class="text-sm text-gray-600">Dashboard & stats</span> 423 </div> 424 <div class="flex items-center gap-2"> 425 <svg class="h-5 w-5 text-green-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"> 426 <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" /> 427 </svg>
428 <span class="text-sm text-gray-600">Priority support</span> 429 </div> 430 <!-- Uber Eats Coming Soon --> 431 <div class="flex items-start gap-2 bg-yellow-50 -mx-2 px-2 py-2 rounded-lg mt-2"> 432 <svg class="h-5 w-5 text-yellow-500 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"> 433 <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" /> 434 </svg> 435 <div> 436 <span class="text-sm text-gray-700 font-medium">Uber Eats cart scanner</span> 437 <span class="text-xs text-yellow-600 ml-1">(coming soon)</span> 438 <p class="text-xs text-gray-500 mt-0.5">Scan your entire cart for calories, allergens & harmful ingredients</p> 439 </div> 440 </div> 441 </div> 442 <div class="mt-8"> 443 <p id="price-display"> 444 <span id="price-amount" class="text-4xl font-bold tracking-tight text-gray-900">$4.90</span> 445 <span id="price-period" class="text-base font-medium text-gray-500">/month</span> 446 </p> 447 <p id="price-subtext" class="text-xs text-gray-500 mt-1 h-4"></p> 448 <a id="checkout-link" href="https://buy.stripe.com/dRm3cucDA3soa2n95k0oM03" class="mt-6 block w-full rounded-md bg-green-600 py-3 text-center text-sm font-semibold text-white hover:bg-green-700">Protect yourself now</a> 449 <p id="billing-note" class="mt-3 text-xs text-center text-gray-400">Cancel anytime. No commitment.</p> 450 </div> 451 </div> 452 </div> 453 </div> 454 </div> 455 </div> 456 457 <!-- FAQ Section --> 458 <div id="faq" class="bg-white py-12 sm:py-16 lg:py-20"> 459 <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> 460 <div class="lg:text-center"> 461 <h2 class="text-base font-semibold uppercase tracking-wide text-green-600">FAQ</h2> 462 <p class="mt-2 text-3xl font-bold leading-8 tracking-tight text-gray-900 sm:text-4xl">Frequently Asked Questions</p> 463 </div> 464 465 <div class="mt-12 max-w-3xl mx-auto"> 466 <div class="faq-accordion space-y-4"> 467 <!-- FAQ Item 1 --> 468 <div class="border border-gray-200 rounded-lg overflow-hidden"> 469 <button class="faq-toggle w-full flex items-center justify-between px-6 py-4 text-lg font-medium text-left text-gray-900 bg-white hover:bg-gray-50 focus:outline-none"> 470 <span>How does the allergen alert work?</span> 471 <svg class="faq-icon h-6 w-6 text-green-500 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 472 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> 473 </svg> 474 </button> 475 <div class="faq-content hidden px-6 py-4 bg-white border-t border-gray-200"> 476 <p class="text-base text-gray-500">Once you set up your allergens in your dashboard (gluten, nuts, lactose, etc.), our AI will automatically check every product you analyze against your list. If a match is found, you'll see a prominent red alert at the top of the analysis.</p> 477 </div> 478 </div> 479 480 <!-- FAQ Item 2 --> 481 <div class="border border-gray-200 rounded-lg overflow-hidden"> 482 <button class="faq-toggle w-full flex items-center justify-between px-6 py-4 text-lg font-medium text-left text-gray-900 bg-white hover:bg-gray-50 focus:outline-none">
483 <span>How does the health score work?</span> 484 <svg class="faq-icon h-6 w-6 text-green-500 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 485 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> 486 </svg> 487 </button> 488 <div class="faq-content hidden px-6 py-4 bg-white border-t border-gray-200"> 489 <p class="text-base text-gray-500">Our health score ranks products from 1 to 5, with 5 being the healthiest. The score is based on the presence of potentially harmful ingredients, nutritional value, and overall product composition. Our AI uses the latest scientific research to evaluate each ingredient. Note: AI can make mistakes and is not always 100% accurate.</p> 490 </div> 491 </div> 492 493 <!-- FAQ Item 3 --> 494 <div class="border border-gray-200 rounded-lg overflow-hidden"> 495 <button class="faq-toggle w-full flex items-center justify-between px-6 py-4 text-lg font-medium text-left text-gray-900 bg-white hover:bg-gray-50 focus:outline-none"> 496 <span>Which websites does it work on?</span> 497 <svg class="faq-icon h-6 w-6 text-green-500 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 498 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> 499 </svg> 500 </button> 501 <div class="faq-content hidden px-6 py-4 bg-white border-t border-gray-200"> 502 <p class="text-base text-gray-500">Our extension works on virtually any website with product pages, including Amazon, Walmart, Target, Sephora, Ulta, Carrefour, and many more. If the ingredients are listed on the page, we can analyze them.</p> 503 </div> 504 </div> 505 506 <!-- FAQ Item 4 --> 507 <div class="border border-gray-200 rounded-lg overflow-hidden"> 508 <button class="faq-toggle w-full flex items-center justify-between px-6 py-4 text-lg font-medium text-left text-gray-900 bg-white hover:bg-gray-50 focus:outline-none"> 509 <span>Is my data private?</span> 510 <svg class="faq-icon h-6 w-6 text-green-500 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 511 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> 512 </svg> 513 </button> 514 <div class="faq-content hidden px-6 py-4 bg-white border-t border-gray-200"> 515 <p class="text-base text-gray-500">Yes! We only analyze the product information on the page you're viewing. We don't track your browsing history or sell any personal information. Your allergen list is stored securely and only used to provide you with personalized alerts.</p> 516 </div> 517 </div> 518 519 <!-- FAQ Item 5 --> 520 <div class="border border-gray-200 rounded-lg overflow-hidden"> 521 <button class="faq-toggle w-full flex items-center justify-between px-6 py-4 text-lg font-medium text-left text-gray-900 bg-white hover:bg-gray-50 focus:outline-none"> 522 <span>Can I cancel anytime?</span> 523 <svg class="faq-icon h-6 w-6 text-green-500 transform transition-transform duration-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"> 524 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> 525 </svg> 526 </button> 527 <div class="faq-content hidden px-6 py-4 bg-white border-t border-gray-200"> 528 <p class="text-base text-gray-500">Absolutely. No commitment, no questions asked. You can cancel your subscription at any time from your dashboard and you'll keep access until the end of your billing period.</p> 529 </div> 530 </div> 531 </div> 532 </div> 533 </div> 534 </div> 535 536 <!-- Final CTA --> 537 <div class="bg-green-600 py-12"> 538 <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 text-center"> 539 <h2 class="text-3xl font-bold text-white mb-4">Stop guessing. Start knowing.</h2> 540 <p class="text-green-100 mb-8 max-w-2xl mx-auto">Shop smarter and safer with Is This Healthy?</p> 541 <a href="https://chromewebstore.google.com/detail/is-this-healthy/hjpagdkmnohahoapmmpldbkomcooibpb" class="inline-flex items-center justify-center rounded-md bg-white px-8 py-3 text-base font-medium text-green-600 hover:bg-green-50"> 542 <img class="w-5 h-5" src="/assets/chrome-118e119cc058f09740223851e4ef33c1f3dd3380ab689e250c2435bf3b1399d2.svg" />
543 <span class="ml-3">Add to Chrome â It's Free</span> 544 </a> 545 </div> 546 </div> 547 548 <footer class="bg-white"> 549 <div class="mx-auto max-w-7xl overflow-hidden px-6 py-12 sm:py-16 lg:px-8"> 550 <nav class="-mb-6 columns-2 sm:flex sm:justify-center sm:space-x-12" aria-label="Footer"> 551 <div class="pb-6"> 552 <a href="/privacy" class="text-sm leading-6 text-gray-600 hover:text-green-800">Privacy Policy</a> 553 </div> 554 </nav> 555 <div class="mt-10 flex justify-center space-x-10"> 556 <a href="#" class="text-gray-400 hover:text-gray-500"> 557 <span class="sr-only"></span> 558 </a> 559 <a href="#" class="text-gray-400 hover:text-gray-500"> 560 <span class="sr-only"></span> 561 </a> 562 </div> 563 <p class="mt-10 text-center text-xs leading-5 text-gray-500">© 2025 Is This Healthy?, Inc. All rights reserved.</p> 564 </div> 565 </footer> 566 567</div> 568
569<script> 570 function initPage() { 571 // Mobile menu toggle 572 const mobileMenuButton = document.getElementById('mobile-menu-button'); 573 const mobileMenu = document.getElementById('mobile-menu'); 574 575 if (mobileMenuButton && mobileMenu) { 576 mobileMenuButton.addEventListener('click', function(e) { 577 e.preventDefault(); 578 e.stopPropagation(); 579 mobileMenu.classList.toggle('hidden'); 580 }); 581 } 582 583 // Pricing Toggle 584 const toggle = document.getElementById('billing-toggle'); 585 const toggleDot = document.getElementById('toggle-dot'); 586 const monthlyLabel = document.getElementById('monthly-label'); 587 const annualLabel = document.getElementById('annual-label'); 588 const priceAmount = document.getElementById('price-amount'); 589 const pricePeriod = document.getElementById('price-period'); 590 const priceSubtext = document.getElementById('price-subtext'); 591 const checkoutLink = document.getElementById('checkout-link'); 592 const billingNote = document.getElementById('billing-note'); 593 594 let isAnnual = false; 595 596 if (toggle) { 597 toggle.addEventListener('click', () => { 598 isAnnual = !isAnnual; 599 600 if (isAnnual) { 601 toggle.classList.remove('bg-gray-200'); 602 toggle.classList.add('bg-green-500'); 603 toggleDot.classList.remove('translate-x-0'); 604 toggleDot.classList.add('translate-x-5'); 605 monthlyLabel.classList.remove('text-gray-900'); 606 monthlyLabel.classList.add('text-gray-500'); 607 annualLabel.classList.remove('text-gray-500'); 608 annualLabel.classList.add('text-gray-900'); 609 610 priceAmount.textContent = '$39'; 611 pricePeriod.textContent = '/year'; 612 priceSubtext.textContent = "That's just $3.25/month"; 613 checkoutLink.href = 'https://buy.stripe.com/7sY7sKbzw4wsdeza9o0oM05'; 614 checkoutLink.textContent = 'Get 4 months free';
615 billingNote.textContent = 'One-time yearly payment.'; 616 } else { 617 toggle.classList.remove('bg-green-500'); 618 toggle.classList.add('bg-gray-200'); 619 toggleDot.classList.remove('translate-x-5'); 620 toggleDot.classList.add('translate-x-0'); 621 monthlyLabel.classList.remove('text-gray-500'); 622 monthlyLabel.classList.add('text-gray-900'); 623 annualLabel.classList.remove('text-gray-900'); 624 annualLabel.classList.add('text-gray-500'); 625 626 priceAmount.textContent = '$4.90'; 627 pricePeriod.textContent = '/month'; 628 priceSubtext.textContent = ''; 629 checkoutLink.href = 'https://buy.stripe.com/dRm3cucDA3soa2n95k0oM03'; 630 checkoutLink.textContent = 'Protect yourself now'; 631 billingNote.textContent = 'Cancel anytime. No commitment.'; 632 } 633 }); 634 } 635 636 // FAQ Accordion 637 const faqToggles = document.querySelectorAll('.faq-toggle'); 638 639 faqToggles.forEach(toggle => { 640 const newToggle = toggle.cloneNode(true); 641 toggle.parentNode.replaceChild(newToggle, toggle); 642 }); 643 644 document.querySelectorAll('.faq-toggle').forEach(toggle => { 645 toggle.addEventListener('click', () => { 646 const content = toggle.nextElementSibling; 647 const icon = toggle.querySelector('.faq-icon'); 648 649 content.classList.toggle('hidden'); 650 651 if (!content.classList.contains('hidden')) { 652 icon.classList.add('rotate-180'); 653 } else { 654 icon.classList.remove('rotate-180'); 655 } 656 657 document.querySelectorAll('.faq-toggle').forEach(otherToggle => { 658 if (otherToggle !== toggle) { 659 const otherContent = otherToggle.nextElementSibling; 660 const otherIcon = otherToggle.querySelector('.faq-icon'); 661 662 otherContent.classList.add('hidden'); 663 otherIcon.classList.remove('rotate-180'); 664 } 665 }); 666 }); 667 }); 668 669 // Handle anchor on page load 670 if (window.location.hash) { 671 history.scrollRestoration = 'manual'; 672 window.scrollTo(0, 0); 673 674 setTimeout(() => { 675 const targetElement = document.querySelector(window.location.hash); 676 if (targetElement) { 677 const headerHeight = document.querySelector('header').offsetHeight; 678 const scrollPosition = targetElement.offsetTop - headerHeight - 20; 679 window.scrollTo({ 680 top: scrollPosition, 681 behavior: 'smooth' 682 }); 683 } 684 }, 50); 685 } 686 } 687 688 document.addEventListener('turbo:load', initPage); 689 document.addEventListener('DOMContentLoaded', initPage); 690</script>
690 691 692 693 694</body> 695</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.