PageSourceSearch

https://isthishealthy.ai/

html isthishealthy.ai collected 2026-10-02 01:11:08 UTC 41,726 bytes, 695 lines download raw bytes

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">&copy; 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.