PageSourceSearch

https://radrep.ai/

html radrep.ai collected 2026-10-05 12:28:41 UTC 76,093 bytes, 1,369 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en" class="scroll-smooth">
3
4<head>
5<!-- Google tag (gtag.js) -->
vendor: 65 bytes, lines 5-6
5
6<script async src="https://www.googletagmanager.com/gtag/js?id=
6AW-18024253244
vendor: 13 bytes, line 6
6"></script>
7<script>
8  
vendor: 138 bytes, lines 8-12
8window.dataLayer = window.dataLayer || [];
9  function gtag(){dataLayer.push(arguments);}
10  gtag('js', new Date());
11
12  gtag('config', '
12AW-18024253244
vendor: 5 bytes, line 12
12');
13</script>
13
14    <meta charset="UTF-8">
15    <meta name="viewport" content="width=device-width, initial-scale=1.0">
16    <title>RadRep.AI | Built for Radiologists Who Value Time</title>
17    <!-- Favicon Updated to ICO -->
18    <link rel="icon" type="image/png" href="bg-removebg-preview (1).png">
19    <!-- Tailwind CSS -->
20    
20<script src="https://cdn.tailwindcss.com"></script>
20
21    <!-- Icons Library -->
22    
22<script src="https://unpkg.com/lucide@latest"></script>
22
23    <!-- Google Fonts -->
24    <style>
25        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
26
27        body {
28            font-family: 'Inter', sans-serif;
29            background-color: #000000;
30            color: #ffffff;
31        }
32
33        /* Custom Scrollbar */
34        ::-webkit-scrollbar {
35            width: 8px;
36        }
37
38        ::-webkit-scrollbar-track {
39            background: #000;
40        }
41
42        ::-webkit-scrollbar-thumb {
43            background: #333;
44            border-radius: 4px;
45        }
46
47        ::-webkit-scrollbar-thumb:hover {
48            background: #555;
49        }
50
51        /* Fade Up Animation Class */
52        .fade-up {
53            opacity: 0;
54            transform: translateY(30px);
55            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
56        }
57
58        .fade-up.visible {
59            opacity: 1;
60            transform: translateY(0);
61        }
62
63        /* Grid Background Pattern */
64        .grid-bg {
65            background-image: linear-gradient(to right, #1a1a1a 1px, transparent 1px),
66                linear-gradient(to bottom, #1a1a1a 1px, transparent 1px);
67            background-size: 40px 40px;
68            mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
69            -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
70        }
71
72        /* Glitch Effect on Hover for Logo */
73        .glitch-hover:hover {
74            animation: glitch 0.3s cubic-bezier(.25, .46, .45, .94) both infinite;
75            color: #ccc;
76        }
77
78        @keyframes glitch {
79            0% {
80                transform: translate(0)
81            }
82
83            20% {
84                transform: translate(-2px, 2px)
85            }
86
87            40% {
88                transform: translate(-2px, -2px)
89            }
90
91            60% {
92                transform: translate(2px, 2px)
93            }
94
95            80% {
96                transform: translate(2px, -2px)
97            }
98
99            100% {
100                transform: translate(0)
101            }
102        }
103
104        /* Infinite Scroll Animation - ADDED THIS BLOCK */
105        @keyframes scroll {
106            0% { transform: translateX(0); }
107            100% { transform: translateX(-50%); }
108        }
109        .animate-scroll {
110            display: flex;
111            width: max-content;
112            animation: scroll 30s linear infinite;
113        }
114        .animate-scroll:hover {
115            animation-play-state: paused;
116        }
117    </style>
118</head>
119
120<body class="antialiased selection:bg-white selection:text-black min-h-screen flex flex-col">
121
122    <!-- Navigation -->
123    <nav class="fixed w-full z-50 top-0 bg-black/80 backdrop-blur-md border-b border-white/10">
124        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
125            <div class="flex items-center justify-between h-16">
126                <!-- Logo -->
127                <div class="flex-shrink-0 cursor-pointer group">
128                    <img src="RedRep 300-80.svg" alt="RadRep.AI Logo" class="h-10 w-auto glitch-hover object-contain">
129                </div>
130
131                <!-- Desktop Menu -->
132                <div class="hidden md:block">
133                    <div class="ml-10 flex items-baseline space-x-8">
134                        <a href="#features" class="hover:text-gray-300 px-3 py-2 rounded-md text-sm font-medium transition-colors">Features</a>
135                        <a href="#product" class="hover:text-gray-300 px-3 py-2 rounded-md text-sm font-medium transition-colors">Product</a>
136                        <a href="#pricing" class="hover:text-gray-300 px-3 py-2 rounded-md text-sm font-medium transition-colors">Pricing</a>
137                        <a href="#testimonials" class="hover:text-gray-300 px-3 py-2 rounded-md text-sm font-medium transition-colors">Reviews</a>
138                        <a href="https://app.radrep.ai/" class="px-5 py-2 rounded-full text-sm font-semibold bg-white text-black hover:bg-gray-200 transition-transform transform hover:scale-105">Login</a>
139                    </div>
140                </div>
141
142                <!-- Mobile menu button -->
143                <div class="-mr-2 flex md:hidden">
144                    <button type="button" onclick="toggleMobileMenu()"
145                        class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-800 focus:outline-none">
146                        <i data-lucide="menu" class="h-6 w-6"></i>
147                    </button>
148                </div>
149            </div>
150        </div>
151
152        <!-- Mobile Menu -->
153        <div class="md:hidden hidden bg-zinc-900 border-b border-white/10" id="mobile-menu">
154            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
155                <a href="#features" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-800">Features</a>
156                <a href="#product" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-800">Product</a>
157                <a href="#pricing" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-800">Pricing</a>
158                <a href="#testimonials" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-800">Reviews</a>
159                <a href="https://app.radrep.ai/" class="w-full text-center block px-3 py-2 rounded-md text-base font-medium bg-white text-black mt-4 hover:bg-gray-200">Login</a>
160            </div>
161        </div>
162    </nav>
163<main class="flex-grow">
164    <!-- Hero Section -->
165    <section class="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden">
166        <div class="absolute inset-0 grid-bg -z-10"></div>
167        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
168            <div class="fade-up">
169                <div
170                    class="inline-flex items-center px-3 py-1 rounded-full border border-white/20 bg-white/5 text-xs font-medium mb-8">
171                    <span class="w-2 h-2 rounded-full bg-white mr-2 animate-pulse"></span>
172                    v1.0 is now live
173                </div>
174                
175                <!-- Updated Slideshow Headline -->
176                <h1 class="text-5xl md:text-7xl font-bold tracking-tight mb-6 min-h-[160px] md:min-h-[180px] flex flex-col justify-center">
177                    <span id="hero-rotating-text" class="block transition-all duration-700 ease-in-out transform translate-y-0 opacity-100">
178                        Built for <br />
179                        <span class="text-transparent bg-clip-text bg-gradient-to-r from-gray-200 to-gray-500">Radiologists Who Value Time.</span>
180                    </span>
181                </h1>
182
183                <p class="mt-4 max-w-2xl mx-auto text-xl text-gray-400">
184                    RadRep AI turns dictation into finalized radiology reports with clinical accuracy. Cut report
185                    delays. Keep your focus on cases.
186                </p>
187                <div class="mt-10 flex justify-center gap-4">
188                    <a href="https://app.radrep.ai/auth?mode=signup"
189                        class="bg-white text-black px-8 py-4 rounded-full font-bold hover:bg-gray-200 transition-all transform hover:-translate-y-1">
190                        Start Free Trial
191                    </a>
192                    <!-- UPDATED DEMO BUTTON -->
193                    <button onclick="openVideoModal()"
194                        class="border border-white/30 px-8 py-4 rounded-full font-bold hover:bg-white/10 transition-all flex items-center gap-2 cursor-pointer">
195                        Watch Demo <i data-lucide="play-circle" class="w-4 h-4"></i>
196                    </button>
197                </div>
198            </div>
199
200             <!-- Hero GIF Embed -->
201            <div class="mt-20 relative fade-up delay-100">
202                <div class="absolute inset-0 bg-gradient-to-t from-black via-trans
202parent to-transparent z-10 pointer-events-none"></div>
203                <!-- Removed 'aspect-video' to allow custom GIF dimensions (1280x622) -->
204                <div class="rounded-xl border border-white/10 bg-gray-900/50 backdrop-blur-sm shadow-2xl overflow-hidden mx-auto max-w-5xl relative group">
205                    <img 
206                        src="radrepdemo.gif" 
207                        alt="RadRep Dashboard Animation" 
208                        class="w-full h-auto block" 
209                        onerror="this.onerror=null; this.parentElement.innerHTML='<div class=\'w-full h-full flex items-center justify-center text-gray-500 bg-gray-900 py-12\'><p>GIF not found. Please ensure radrepdemo.gif is in the folder.</p></div>'"
210                    >
211                </div>
212            </div>
213        </div>
214    </section>
215    <!-- Features Section -->
216    <section id="features" class="py-24 relative">
217        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
218            <div class="text-center max-w-3xl mx-auto mb-16 fade-up">
219                <h2 class="text-3xl md:text-5xl font-bold mb-4">Clinical Precision</h2>
220                <p class="text-gray-400 text-lg">RadRep AI is trained on radiology language.
221                    It understands findings, impressions, and formats.
222                    No generic speech errors.</p>
223            </div>
224
225            <div class="grid md:grid-cols-3 gap-8">
226                <!-- Feature 1 -->
227                <div
228                    class="p-8 rounded-2xl bg-white/5 border border-white/10 hover:border-white/30 transition-colors fade-up group">
229                    <div
230                        class="w-12 h-12 rounded-full bg-white flex items-center justify-center mb-6 text-black group-hover:scale-110 transition-transform">
231                        <i data-lucide="zap" class="w-6 h-6"></i>
232                    </div>
233                    <h3 class="text-xl font-bold mb-3">Rapid Report Drafting</h3>
234                    <p class="text-gray-400 leading-relaxed">
235                        Dictate once.
236                        Your report is ready in minutes.
237                        No manual typing.
238                    </p>
239                </div>
240                <!-- Feature 2 -->
241                <div
242                    class="p-8 rounded-2xl bg-white/5 border border-white/10 hover:border-white/30 transition-colors fade-up delay-100 group">
243                    <div
244                        class="w-12 h-12 rounded-full bg-white flex items-center justify-center mb-6 text-black group-hover:scale-110 transition-transform">
245                        <i data-lucide="layout-template" class="w-6 h-6"></i>
246                    </div>
247                    <h3 class="text-xl font-bold mb-3">Smart Template Selection</h3>
248                    <p class="text-gray-400 leading-relaxed">
249                        The system matches each study to the right format.
250                        CT. MRI. X-ray.
251                        Your reporting style stays consistent.
252
253                    </p>
254                </div>
255                <!-- Feature 3 -->
256                <div
257                    class="p-8 rounded-2xl bg-white/5 border border-white/10 hover:border-white/30 transition-colors fade-up delay-200 group">
258                    <div
259                        class="w-12 h-12 rounded-full bg-white flex items-center justify-center mb-6 text-black group-hover:scale-110 transition-transform">
260                        <i data-lucide="check-circle" class="w-6 h-6"></i>
261                    </div>
262                    <h3 class="text-xl font-bold mb-3">Accuracy Checks</h3>
263                    <p class="text-gray-400 leading-relaxed">
264                        RadRep AI flags missing data and mismatches.
265                        Laterality. Measurements. Key details.
266                        Fewer revisions later. </p>
267                </div>
268                <!-- Feature 3 -->
269                <div
270                    class="p-8 rounded-2xl bg-white/5 border border-white/10 hover:border-white/30 transition-colors fade-up delay-200 group">
271                    <div
272                        class="w-12 h-12 rounded-full bg-white flex items-center justify-center mb-6 text-black group-hover:scale-110 transition-transform">
273                        <i data-lucide="list-ordered" class="w-6 h-6"></i>
274                    </div>
275                    <h3 class="text-xl font-bold mb-3">Structured Data Formatting
276                    </h3>
277                    <p class="text-gray-400 leading-relaxed">
278                        Findings convert into clean report sections.
279                        History. Observations. Impression.
280                        No messy layouts. </p>
281                </div>
282                <!-- Feature 3 -->
283                <div
284                    class="p-8 rounded-2xl bg-white/5 border border-white/10 hover:border-white/30 transition-colors fade-up delay-200 group">
285                    <div
286                        class="w-12 h-12 rounded-full bg-white flex items-center justify-center mb-6 text-black group-hover:scale-110 transition-transform">
287                        <i data-lucide="shield-check" class="w-6 h-6"></i>
288                    </div>
289                    <h3 class="text-xl font-bold mb-3">Clinical Consistency</h3>
290                    <p class="text-gray-400 leading-relaxed">
291                        Terminology stays uniform across reports.
292                        No variation in phrasing.
293                        No confusion for reviewers. </p>
294                </div>
295                <!-- Feature 3 -->
296                <div
297                    class="p-8 rounded-2xl bg-white/5 border border-white/10 hover:border-white/30 transition-colors fade-up delay-200 group">
298                    <div
299                        class="w-12 h-12 rounded-full bg-white flex items-center justify-center mb-6 text-black group-hover:scale-110 transition-transform">
300                        <i data-lucide="git-merge" class="w-6 h-6"></i>
301                    </div>
302                    <h3 class="text-xl font-bold mb-3">Workflow Integration</h3>
303                    <p class="text-gray-400 leading-relaxed">
304                        Connects with your PACS and RIS.
305                        Reports move directly into your system.
306                        No extra steps. </p>
307                </div>
308            </div>
309        </div>
310    </section>
311
312    <!-- Product Showcase (Large Image Areas) -->
313    <!-- Product Showcase -->
314    <section id="product" class="py-24 bg-black relative">
315        <div class="absolute right-0 top-0 w-1/3 h-full bg-gradient-to-l from-white/5 to-transparent pointer-events-none"></div>
316        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
317            <div class="grid md:grid-cols-2 gap-12 items-center">
318                <div class="fade-up">
319                    <h2 class="text-3xl md:text-4xl font-bold mb-6">Works Inside Your Workflow</h2>
320                    <p class="text-gray-400 text-lg mb-6">
321                        Works where you work. PACS, Windows, MAC, or Mobile. RadRep slots into your existing workflow without friction.
322                    </p>
323                    <ul class="space-y-4">
324                        <li class="flex items-center gap-3">
325                            <i data-lucide="check-circle" class="text-green-500 w-5 h-5"></i>
326                            <span class="text-gray-300">One-click PACS sync</span>
327                        </li>
328                        <li class="flex items-center gap-3">
329                            <i data-lucide="check-circle" class="text-green-500 w-5 h-5"></i>
330                            <span class="text-gray-300">Customizable tone presets</span>
331                        </li>
332                        <li class="flex items-center gap-3">
333                            <i data-lucide="check-circle" class="text-green-500 w-5 h-5"></i>
334                            <span class="text-gray-300">Human-in-the-loop approval mode</span>
335                        </li>
336                    </ul>
337                </div>
338                
339                <!-- CSS Generated Integration Mockup -->
340                <div class="relative rounded-2xl overflow-hidden border border-white/10 bg-zinc-900/50 backdrop-blur-sm p-10 fade-up delay-100 group min-h-[400px] flex items-center justify-center">
341                      <!-- Background Grid -->
342                      <div class="absolute inset-0 grid-bg opacity-50"></div>
343                      
344                      <!-- Central Hub -->
345                      <div class="relative z-10 flex flex-col items-center">
346                          <div class="w-24 h-24 rounded-full bg-black border-2 border-white flex items-center justify-center shadow-[0_0_30px_rgba(255,255,255,0.2)] z-20">
347                              <span class="text-xl font-bold">RR</span>
348                          </div>
349                          
350                          <!-- Connecting Lines -->
351                          <div class="absolute w-[300px] h-[300px] border border-white/10 rounded-full animate-[spin_10s_linear_infinite] z-0"></div>
352                          <div class="absolute w-[200px] h-[200px] border border-white/20 rounded-full animate-[spin_15s_linear_infinite_reverse] z-0"></div>
353
354                          <!-- Satellites -->
355                          <div class="absolute -top-24 bg-zinc-800 p-3 rounded-lg border border-white/10 flex items-center gap-2 shadow-lg animate-bounce duration-[3000ms]">
356                              <i data-lucide="database" class="w-4 h-4 text-blue-400"></i> <span class="text-xs font-mono">PACS</span>
357                          </div>
358                          <div class="absolute -bottom-24 bg-zinc-800 p-3 rounded-lg border border-white/10 flex items-center gap-2 shadow-lg animate-bounce duration-[3000ms] delay-75">
359                              <i data-lucide="mail" class="w-4 h-4 text-yellow-400"></i> <span class="text-xs font-mono">Windows</span>
360                          </div>
361                          <div class="absolute -right-24 bg-zinc-800 p-3 rounded-lg border border-white/10 flex items-center gap-2 shadow-lg animate-bounce duration-[3000ms] delay-150">
362                              <i data-lucide="message-square" class="w-4 h-4 text-green-400"></i> <span class="text-xs font-mono">Mac</span>
363                          </div>
364                          <div class="absolute -left-24 bg-zinc-800 p-3 rounded-lg border border-white/10 flex items-center gap-2 shadow-lg animate-bounce duration-[3000ms] delay-200">
365                              <i data-lucide="file-text" class="w-4 h-4 text-purple-400"></i> <span class="text-xs font-mono">Mobile</span>
366                          </div>
367                      </div>
368
369                    <!-- Status Indicator -->
370                    <div class="absolute top-4 right-4 flex items-center gap-2 bg-black/50 px-3 py-1 rounded-full border border-white/10">
371                        <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
372                        <span class="text-[10px] uppercase font-bold text-gray-400">System Online</span>
373                    </div>
374                </div>
375            </div>
376        </div>
377    </section>
378    
379<section id="extension" class="py-24 relative overflow-hidden bg-black/50 border-t border-white/5">
380        <div class="absolute inset-0 bg-zinc-900/10"></div>
381        <div class="absolute -left-20 top-40 w-72 h-72 bg-purple-500/10 rounded-full blur-[100px] pointer-events-none">
382        </div>
383
384        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
385            <div class="grid md:grid-cols-2 gap-16 items-center">
386
387                <!-- Image Section (Visual Side - Replaced Video) -->
388                <div class="order-2 md:order-1 fade-up">
389                    <div class="relative rounded-xl border border-white/10 bg-black shadow-2xl overflow-hidden group">
390                        <!-- Image Element instead of Video -->
391                        <img src="browser.jpeg" 
392                             alt="Browser Extension Interface" 
393                             class="w-full h-auto max-h-[600px] block mx-auto object-contain bg-zinc-900/40"
394                             onerror="this.onerror=null; this.parentElement.innerHTML='<div class=\'w-full h-64 flex items-center justify-center text-gray-500 bg-zinc-900 py-12\'><p>Image not found. Please ensure extension-preview.jpg is in the folder.</p></div>'"
395                        >
396                    </div>
397                </div>
398
399                <!-- Text Content Side -->
400              <div class="order-1 md:order-2 fade-up delay-100">
401                    <div
402                        class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-purple-500/10 border border-purple-500/20 text-purple-300 text-xs font-medium mb-6">
403                        <i data-lucide="chrome" class="w-3 h-3"></i> Browser Extension
404                        <span class="ml-2 px-2 py-0.5 bg-green-500/20 text-green-400 rounded text-[10px] uppercase font-bold tracking-wider animate-pulse">New Update</span>
405                    </div>
406                    <h2 class="text-3xl md:text-5xl font-bold mb-6">Zero Tab Switching.</h2>
407                    <p class="text-gray-400 text-lg mb-8 leading-relaxed">
408                        We heard your feedback. Don't lose your place—our updated Google Chrome Extension floats directly over your web-based PACS or RIS. You can now see your live dictation text right while viewing images. Dictate, edit, and transfer text without ever switching tabs.
409                    </p>
410
411                    <div class="space-y-4">
412                        <div class="flex items-start gap-4">
413                            <div
414                                class="w-10 h-10 rounded-lg bg-zinc-800 flex items-center justify-center flex-shrink-0 border border-white/5">
415                                <i data-lucide="layers" class="w-5 h-5 text-white"></i>
416                            </div>
417                            <div>
418                                <h4 class="text-white font-bold mb-1">Live Dictation Overlay</h4>
419                                <p class="text-sm text-gray-400">Keeps your dictated report side-by-side with your image scans. No dual-monitor hunting required.</p>
420                            </div>
421                        </div>
422                        <div class="flex items-start gap-4">
423                            <div
424                                class="w-10 h-10 rounded-lg bg-zinc-800 flex items-center justify-center flex-shrink-0 border border-white/5">
425                                <i data-lucide="copy" class="w-5 h-5 text-white"></i>
426                            </div>
427                            <div>
428                                <h4 class="text-white font-bold mb-1">Instant Transfer</h4>
429                                <p class="text-sm text-gray-400">One click pushes the final report into your RIS field.
430                                </p>
431                            </div>
432                        </div>
433                    </div>
434
435                    <!-- NEW: Download Extension Button -->
436                    <div class="mt-8">
437                                               <a href="https://chromewebstore.google.com/detail/radrep-side-panel/ehpmhhnpiidconiddicjccfepimggiil" class="inline-flex items-center justify-center gap-2 bg-white text-black px-8 py-4 rounded-full font-bold hover:bg-gray-200 transition-all transform hover:-translate-y-1 shadow-[0_0_20px_rgba(255,255,255,0.3)] hover:shadow-[0_0_30px_rgba(255,255,255,0.5)]">
438                            <i data-lucide="download" class="w-5 h-5"></i>
439                            Download Radrep Extension
440                        </a>
441                    </div>
442                    
443                </div>
444
445            </div>
446        </div>
447        
448
449 
450    <section id="windows-app" class="py-24 relative overflow-hidden bg-zinc-950 border-t border-white/5">
451        <div class="absolute inset-0 bg-black/40"></div>
452        <!-- Soft Blue Glow Behind -->
453        <div class="absolute right-0 top-1/4 w-96 h-96 bg-blue-500/10 rounded-full blur-[120px] pointer-events-none"></div>
454
455        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
456            <div class="grid md:grid-cols-2 gap-16 items-center">
457
458                <!-- Text Content Side (Left) -->
459                <div class="fade-up">
460                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-blue-500/10 border border-blue-500/20 text-blue-300 text-xs font-medium mb-6">
461                        <i data-lucide="monitor" class="w-3 h-3"></i> Desktop App
462                        <span class="ml-2 px-2 py-0.5 bg-blue-500/20 text-blue-400 rounded text-[10px] uppercase font-bold tracking-wider animate-pulse">New Release</span>
463                    </div>
464                    <h2 class="text-3xl md:text-5xl font-bold mb-6">Native Windows Integration.</h2>
465                    <p class="text-gray-400 text-lg mb-8 leading-relaxed">
466                        Need to dictate outside the browser? The RadRep Windows Installer brings our AI directly to your desktop. It seamlessly floats over <strong>any local DICOM viewer</strong>
466 or thick-client RIS application.
467                    </p>
468
469                    <div class="space-y-4">
470                        <div class="flex items-start gap-4">
471                            <div class="w-10 h-10 rounded-lg bg-zinc-800 flex items-center justify-center flex-shrink-0 border border-white/5">
472                                <i data-lucide="app-window" class="w-5 h-5 text-white"></i>
473                            </div>
474                            <div>
475                                <h4 class="text-white font-bold mb-1">Universal App Compatibility</h4>
476                                <p class="text-sm text-gray-400">Works perfectly alongside Radiant, OsiriX, Horos, or any standalone medical imaging software.</p>
477                            </div>
478                        </div>
479                        <div class="flex items-start gap-4">
480                            <div class="w-10 h-10 rounded-lg bg-zinc-800 flex items-center justify-center flex-shrink-0 border border-white/5">
481                                <i data-lucide="zap" class="w-5 h-5 text-white"></i>
482                            </div>
483                            <div>
484                                <h4 class="text-white font-bold mb-1">Always-on-Top Widget</h4>
485                                <p class="text-sm text-gray-400">A minimal, distraction-free dictation window stays visible while you scroll through complex slices.</p>
486                            </div>
487                        </div>
488                    </div>
489
490                    <!-- Download Button -->
491                    <div class="mt-8">
492                        <!-- UPDATE THIS HREF WITH THE REAL EXE DOWNLOAD LINK -->
493                        <a href="https://debp8y81bsymj.cloudfront.net/radrep/app/RadRepSetup.exe" class="inline-flex items-center justify-center gap-2 bg-white text-black px-8 py-4 rounded-full font-bold hover:bg-gray-200 transition-all transform hover:-translate-y-1 shadow-[0_0_20px_rgba(255,255,255,0.3)] hover:shadow-[0_0_30px_rgba(255,255,255,0.5)]">
494                            <i data-lucide="download" class="w-5 h-5"></i>
495                            Download for Windows
496                        </a>
497                    </div>
498                </div>
499
500                <!-- Image/Visual Section (Right) -->
501                <div class="fade-up delay-100">
502                    <div class="relative rounded-xl border border-white/10 bg-black shadow-2xl overflow-hidden group p-8 bg-gradient-to-br from-zinc-900 to-black flex items-center justify-center min-h-[400px]">
503                        
504                        <!-- CSS Illustration of the Windows App Installer -->
505                        <div class="relative w-full max-w-sm">
506                            <!-- Animated Glow Border -->
507                            <div class="absolute -inset-1 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg blur opacity-25 group-hover:opacity-50 transition duration-1000 group-hover:duration-200"></div>
508                            
509                            <!-- Application Window Mockup -->
510                            <div class="relative bg-zinc-950 rounded-lg border border-white/10 p-6 shadow-2xl">
511                                <div class="flex items-center justify-between border-b border-white/10 pb-4 mb-6">
512                                    <div class="flex items-center gap-2">
513                                        <div class="w-3 h-3 rounded-full bg-zinc-700"></div>
514                                        <div class="w-3 h-3 rounded-full bg-zinc-700"></div>
515                                        <div class="w-3 h-3 rounded-full bg-zinc-700"></div>
516                                    </div>
517                                    <div class="text-xs text-gray-500 font-mono flex items-center gap-2">
518                                        <i data-lucide="shield-check" class="w-3 h-3 text-green-500"></i>
519                                        RadRep_Setup.exe
520                                    </div>
521                                </div>
522                                <div class="flex flex-col items-center justify-center py-4">
523                                    <div class="w-20 h-20 bg-blue-500/10 rounded-2xl flex items-center justify-center border border-blue-500/20 mb-6">
524                                        <img src="RedRep 300-80.svg" alt="Icon" class="w-12 h-auto opacity-80" onerror="this.onerror=null; this.parentElement.innerHTML='<i data-lucide=\'cpu\' class=\'w-10 h-10 text-blue-400\'></i>'">
525                                    </div>
526                                    <h3 class="text-white font-bold text-xl mb-1">RadRep Desktop</h3>
527                                    <p class="text-gray-400 text-sm mb-8">Ready to install on Windows 10/11</p>
528                                    
529                                    <!-- Animated Progress Bar -->
530                                    <div class="w-full bg-zinc-900 rounded-full h-2 mb-3 overflow-hidden border border-white/5">
531                                        <div class="bg-blue-500 h-2 rounded-full w-2/3 animate-[pulse_2s_ease-in-out_infinite] shadow-[0_0_10px_rgba(59,130,246,0.5)]"></div>
532                                    </div>
533                                    <div class="w-full flex justify-between text-xs text-gray-500 font-mono">
534                                        <span>Extracting files...</span>
535                                        <span>68%</span>
536                                    </div>
537                                </div>
538                            </div>
539                        </div>
540                        
541                    </div>
542                </div>
543
544            </div>
545        </div>
546    </section>
547    
548
549        
550        <section id="pricing" class="py-24 bg-zinc-950 relative border-t border-white/5">
551        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
552            <div class="text-center mb-16 fade-up">
553                <h2 class="text-3xl md:text-5xl font-bold mb-2">Transparent Pricing</h2>
554                <p class="text-gray-400">Choose the plan that fits your volume.</p>
555            </div>
556
557            <!-- Pricing Grid -->
558            <div id="pricing-grid" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
559                <!-- Cards will be injected by JS -->
560            </div>
561
562            <!-- Payment Methods Marquee -->
563            <div class="mt-24 pt-10 border-t border-white/10 fade-up">
564                <p class="text-center text-gray-500 mb-8 text-sm font-medium uppercase tracking-wider">Secure Payment Options We Accept</p>
565                
566                <div class="relative w-full overflow-hidden">
567                    <!-- Gradient Masks for smooth fade edges -->
568                    <div class="absolute left-0 top-0 bottom-0 w-20 bg-gradient-to-r from-zinc-950 to-transparent z-10 pointer-events-none"></div>
569                    <div class="absolute right-0 top-0 bottom-0 w-20 bg-gradient-to-l from-zinc-950 to-transparent z-10 pointer-events-none"></div>
570
571                    <div class="animate-scroll gap-8">
572                        <!-- Set 1 -->
573                        <!-- Visa -->
574                        <div class="flex items-center justify-center bg-white/5 border border-white/10 rounded-lg px-6 py-4 min-w-[120px] h-[60px] grayscale hover:grayscale-0 transition-all duration-300 hover:bg-white/10">
575                            <svg class="h-8 w-auto fill-white" viewBox="0 0 50 16" xmlns="http://www.w3.org/2000/svg">
576                                <path d="M21.5 0.5L18.1 15.5H13.7L17.1 0.5H21.5ZM36.8 10.5C36.8 6.4 31.2 6.2 31.2 4.4C31.2 3.9 31.7 3.3 32.9 3.2C33.5 3.2 35.1 3.1 36.8 3.9L37.5 0.7C36.6 0.4 35.4 0 33.9 0C29.9 0 27.1 2.1 27.1 5.1C27.1 9.5 33.1 9.9 33.1 11.4C33.1 12.5 32 12.9 31 12.9C29.9 12.9 28 12.6 27 12.1L26.3 15.3C27.3 15.8 29.2 16.1 31.1 16.1C35.3 16.1 38 14 38 10.8V10.5H36.8ZM47.6 15.5H51.2L47.9 0.5H44.3C43.5 0.5 42.8 0.9 42.5 1.6L36.3 15.5H40.5L41.3 13.3H46.6L47.1 15.5H47.6ZM42.5 10.3L44.6 4.6L45.9 10.3H42.5ZM10.5 0.5L7.1 15.5H2.9L0.5 4.8C0.4 4.3 0.3 4 0 3.4L0.1 0.5H3.8C4.3 0.5 4.8 0.8 4.9 1.6L6 8.1L9 0.5H10.5Z"/>
577                            </svg>
578                        </div>
579                        
580                        <!-- Mastercard -->
581                        <div class="flex items-center justify-center bg-white/5 border border-white/10 rounded-lg px-6 py-4 min-w-[120px] h-[60px] grayscale hover:grayscale-0 transition-all duration-300 hover:bg-white/10">
582                            <svg class="h-8 w-auto" viewBox="0 0 50 30" fill="none" xmlns="http://www.w3.org/2000/svg">
583                                <circle cx="16" cy="15" r="14" fill="#EB001B" fill-opacity="0.9"/>
584                                <circle cx="34" cy="15" r="14" fill="#F79E1B" fill-opacity="0.9"/>
585                                <path d="M25 5.5C22.6 8.1 21.1 11.4 21.1 15C21.1 18.6 22.6 21.9 25 24.5C27.4 21.9 28.9 18.6 28.9 15C28.9 11.4 27.4 8.1 25 5.5Z" fill="#FF5F00"/>
586                            </svg>
587                        </div>
588
589                        <!-- Amex -->
590                        <div class="flex items-center justify-center bg-white/5 border border-white/10 rounded-lg px-6 py-4 min-w-[120px] h-[60px] grayscale hover:grayscale-0 transition-all duration-300 hover:bg-white/10">
591                            <svg class="h-8 w-auto fill-blue-500" viewBox="0 0 50 30" xmlns="http://www.w3.org/2000/svg">
592                                <rect width="50" height="30" rx="4" fill="#2563EB"/>
593                                <path d="M12.5 18H9.5L8.5 21H6L10 8H13L16.5 21H14L12.5 18ZM11 11.5L10.5 15.5H12L11 11.5ZM23 21H20.5V12.5L18.5 21H16L18 12L16.5 8H20L22 16.5L24 8H27.5L26 12L27.5 21H25L23 12.5V21ZM34.5 11H31V13H34V15.5H31V18.5H35V21H28.5V8H34.5V11ZM42.5 21H39.5L38 18.5L36.5 21H34L37 15.5L34.5 11L33 8H35.5L37.5 12L39.5 8H42L39.5 12.5L42.5 18V21Z" fill="white"/>
594                            </svg>
595                        </div>
596
597                        <!-- RuPay -->
598                        <div class="flex items-center justify-center bg-white/5 border border-white/10 rounded-lg px-6 py-4 min-w-[120px] h-[60px] grayscale hover:grayscale-0 transition-all duration-300 hover:bg-white/10">
599                             <div class="font-bold text-2xl tracking-tighter italic text-white flex">
600                                <span class="text-orange-500">Ru</span><span class="text-green-500">Pay</span>
601                                <div class="ml-1 relative top-1">
602                                    <svg width="20" height="6" viewBox="0 0 20 6" fill="none">
603                                        <path d="M0 3L3 0L6 3H20V6H0V3Z" fill="#16A34A"/>
604                                    </svg>
605                                </div>
606                             </div>
607                        </div>
608
609                        <!-- UPI -->
610                        <div class="flex items-center justify-center bg-white/5 border border-white/10 rounded-lg px-6 py-4 min-w-[120px] h-[60px] grayscale hover:grayscale-0 transition-all duration-300 hover:bg-white/10">
611                            <div class="font-bold text-xl text-white border-2 border-white px-2 py-0.5 rounded">
612                                UPI
613                            </div>
614                        </div>
615
616                        <!-- Netbanking -->
617                        <div class="flex items-center justify-center bg-white/5 border border-white/10 rounded-lg px-6 py-4 min-w-[120px] h-[60px] grayscale hover:grayscale-0 transition-all duration-300 hover:bg-white/10 gap-2">
618                            <i data-lucide="landmark" class="w-6 h-6 text-white"></i>
619                            <span class="font-semibold text-white text-sm">NetBanking</span>
620                        </div>
621
622                        <!-- DUPLICATE SET FOR INFINITE LOOP -->
623                        
624                        <!-- Visa -->
625                        <div class="flex items-center justify-center bg-white/5 border border-white/10 rounded-lg px-6 py-4 min-w-[120px] h-[60px] grayscale hover:grayscale-0 transition-all duration-300 hover:bg-white/10">
626                            <svg class="h-8 w-auto fill-white" viewBox="0 0 50 16" xmlns="http://www.w3.org/2000/svg">
627                                <path d="M21.5 0.5L18.1 15.5H13.7L17.1 0.5H21.5ZM36.8 10.5C36.8 6.4 31.2 6.2 31.2 4.4C31.2 3.9 31.7 3.3 32.9 3.2C33.5 3.2 35.1 3.1 36.8 3.9L37.5 0.7C36.6 0.4 35.4 0 33.9 0C29.9 0 27.1 2.1 27.1 5.1C27.1 9.5 33.1 9.9 33.1 11.4C33.1 12.5 32 12.9 31 12.9C29.9 12.9 28 12.6 27 12.1L26.3 15.3C27.3 15.8 29.2 16.1 31.1 16.1C35.3 16.1 38 14 38 10.8V10.5H36.8ZM47.6 15.5H51.2L47.9 0.5H44.3C43.5 0.5 42.8 0.9 42.5 1.6L36.3 15.5H40.5L41.3 13.3H46.6L47.1 15.5H47.6ZM42.5 10.3L44.6 4.6L45.9 10.3H42.5ZM10.5 0.5L7.1 15.5H2.9L0.5 4.8C0.4 4.3 0.3 4 0 3.4L0.1 0.5H3.8C4.3 0.5 4.8 0.8 4.9 1.6L6 8.1L9 0.5H10.5Z"/>
628                            </svg>
629                        </div>
630                        
631                        <!-- Mastercard -->
632                        <div class="flex items-center justify-center bg-white/5 border border-white/10 rounded-lg px-6 py-4 min-w-[120px] h-[60px] grayscale hover:grayscale-0 transition-all duration-300 hover:bg-white/10">
633                            <svg class="h-8 w-auto" viewBox="0 0 50 30" fill="none" xmlns="http://www.w3.org/2000/svg">
634                                <circle cx="16" cy="15" r="14" fill="#EB001B" fill-opacity="0.9"/>
635                                <circle cx="34" cy="15" r="14" fill="#F79E1B" fill-opacity="0.9"/>
636                                <path d="M25 5.5C22.6 8.1 21.1 11.4 21.1 15C21.1 18.6 22.6 21.9 25 24.5C27.4 21.9 28.9 18.6 28.9 15C28.9 11.4 27.4 8.1 25 5.5Z" fill="#FF5F00"/>
637                            </svg>
638                        </div>
639
640                        <!-- Amex -->
641                        <div class="flex items-center justify-center bg-white/5 border border-white/10 rounded-lg px-6 py-4 min-w-[120px] h-[60px] grayscale hover:grayscale-0 transition-all duration-300 hover:bg-white/10">
642                            <svg class="h-8 w-auto fill-blue-500" viewBox="0 0 50 30" xmlns="http://www.w3.org/2000/svg">
643                                <rect width="50" height="30" rx="4" fill="#2563EB"/>
644                                <path d="M12.5 18H9.5L8.5 21H6L10 8H13L16.5 21H14L12.5 18ZM11 11.5L10.5 15.5H12L11 11.5ZM23 21H20.5V12.5L18.5 21H16L18 12L16.5 8H20L22 16.5L24 8H27.5L26 12L27.5 21H25L23 12.5V21ZM34.5 11H31V13H34V15.5H31V18.5H35V21H28.5V8H34.5V11ZM42.5 21H39.5L38 18.5L36.5 21H34L37 15.5L34.5 11L33 8H35.5L37.5 12L39.5 8H42L39.5 12.5L42.5 18V21Z" fill="white"/>
645                            </svg>
646                        </div>
647
648                        <!-- RuPay -->
649                        <div class="flex items-center justify-center bg-white/5 border border-white/10 rounded-lg px-6 py-4 min-w-[120px] h-[60px] grayscale hover:grayscale-0 transition-all duration-300 hover:bg-white/10">
650                             <div class="font-bold text-2xl tracking-tighter italic text-white flex">
651                                <span class="text-orange-500">Ru</span><span class="text-green-500">Pay</span>
652                                <div class="ml-1 relative top-1">
653                                    <svg width="20" height="6" viewBox="0 0 20 6" fill="none">
654                                        <path d="M0 3L3 0L6 3H20V6H0V3Z" fill="#16A34A"/>
655                                    </svg>
656                                </div>
657                             </div>
658                        </div>
659
660                        <!-- UPI -->
661                        <div class="flex items-center justify-center bg-white/5 border border-white/10 rounded-lg px-6 py-4 min-w-[120px] h-[60px] grayscale hover:grayscale-0 transition-all duration-300 hover:bg-white/10">
662                            <div class="font-bold text-xl text-white border-2 border-white px-2 py-0.5 rounded">
663                                UPI
664                            </div>
665                        </div>
666
667                        <!-- Netbanking -->
668                        <div class="flex items-center justify-center bg-white/5 border border-white/10 rounded-lg px-6 py-4 min-w-[120px] h-[60px] grayscale hover:grayscale-0 transition-all duration-300 hover:bg-white/10 gap-2">
669                            <i data-lucide="landmark" class="w-6 h-6 text-white"></i>
670                            <span class="font-semibold text-white text-sm">NetBanking</span>
671                        </div>
672                    </div>
673                </div>
674            </div>
675        </div>
676    </section>
677<section id="free-trial" class="py-20 relative bg-gradient-to-b from-black to-zinc-950 border-t border-white/5">
678        <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
679            <div class="bg-zinc-900/40 border border-white/10 rounded-3xl p-8 md:p-14 text-center shadow-2xl relative overflow-hidden fade-up">
680                <!-- Soft Glow Behind -->
681                <div class="absolute inset-0 bg-gradient-to-r from-purple-500/10 via-trans
681parent to-blue-500/10 pointer-events-none"></div>
682                
683                <div class="inline-flex items-center px-4 py-2 rounded-full border border-green-500/30 bg-green-500/10 text-green-400 text-sm font-bold mb-6">
684                    <i data-lucide="gift" class="w-4 h-4 mr-2"></i> Zero Risk, Full Access
685                </div>
686                
687                <h2 class="text-3xl md:text-5xl font-bold mb-6 text-white">Start your Free Trial today.</h2>
688                <p class="text-xl text-gray-400 mb-10 max-w-2xl mx-auto leading-relaxed">
689                    Experience the speed and accuracy of RadRep AI. Get up to 150 reports completely free. No credit card required to start saving time.
690                </p>
691                
692                <div class="flex flex-col sm:flex-row justify-center gap-4">
693                    <a href="https://app.radrep.ai/auth?mode=signup" class="bg-white text-black px-10 py-4 rounded-full font-bold hover:bg-gray-200 transition-all transform hover:-translate-y-1 shadow-[0_0_20px_rgba(255,255,255,0.2)] hover:shadow-[0_0_30px_rgba(255,255,255,0.4)]">
694                        Start Free Trial
695                    </a>
696                    <a href="#contact" class="border border-white/20 px-10 py-4 rounded-full font-bold text-white hover:bg-white/10 transition-all">
697                        Talk to Sales
698                    </a>
699                </div>
700                
701                <ul class="mt-10 flex flex-wrap justify-center gap-x-8 gap-y-4 text-sm text-gray-400">
702                    <li class="flex items-center gap-2">
703                        <i data-lucide="check-circle-2" class="w-5 h-5 text-green-500"></i> Up to 150 free reports
704                    </li>
705                    <li class="flex items-center gap-2">
706                        <i data-lucide="check-circle-2" class="w-5 h-5 text-green-500"></i> Full Template Access
707                    </li>
708                    <li class="flex items-center gap-2">
709                        <i data-lucide="check-circle-2" class="w-5 h-5 text-green-500"></i> No credit card needed
710                    </li>
711                </ul>
712            </div>
713        </div>
714    </section>
715
716    <!-- NEW Contact Form Section -->
717    <section id="contact" class="py-24 border-t border-white/10">
718        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
719            <div class="grid md:grid-cols-2 gap-12 items-center">
720                <!-- Contact Info -->
721                <div class="fade-up">
722                    <h2 class="text-3xl md:text-5xl font-bold mb-6">Let's start a conversation</h2>
723                    <p class="text-gray-400 text-lg mb-8">
724                        Switch to RadRep AI and see results from day one.
725                    </p>
726                      <!-- Email Link -->
727                        <div class="space-y-6">
728                        <!-- WhatsApp Link -->
729                        <div class="flex items-center gap-4">
730                            <div class="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center border border-white/10 flex-shrink-0">
731                                <i data-lucide="message-circle" class="w-5 h-5 text-white"></i>
732                            </div>
733                            <div>
734                                <p class="text-sm text-gray-400">Message us at</p>
735                                <a href="https://wa.me/9336458573?text=Hi,%20I%20would%20like%20to%20know%20more%20about%20Radrep%20Ai." target="_blank" class="text-white font-medium hover:text-green-400 hover:underline transition-colors break-all">
736                                    WhatsApp
737                                </a>
738                            </div>
739                        </div>
740
741                        <!-- Email Link -->
742                        <div class="flex items-center gap-4">
743                            <div class="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center border border-white/10 flex-shrink-0">
744                                <i data-lucide="mail" class="w-5 h-5 text-white"></i>
745                            </div>
746                            <div>
747                                <p class="text-sm text-gray-400">Email us at</p>
748                                <a href="mailto:[email protected]" class="text-white font-medium hover:text-gray-300 hover:underline transition-colors">
749                                    [email protected]
750                                </a>
751                            </div>
752                        </div>
753
754                        <!-- Location -->
755                          <div class="flex items-center gap-4">
756                            <div class="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center border border-white/10 flex-shrink-0">
757                                <i data-lucide="map-pin" class="w-5 h-5 text-white"></i>
758                            </div>
759                            <div>
760                                <p class="text-sm text-gray-400">Headquarters</p>
761                                <p class="text-white font-medium">USA/India</p>
762                            </div>
763                        </div>
764                    </div>
765                </div>
766
767
768                <!-- Contact Form (Visual Only) -->
769                <form onsubmit="handleContactSubmit(event)" action="contact.php" method="POST" class="space-y-6">
770                        <div class="grid grid-cols-2 gap-6">
771                            <div>
772                                <label class="block text-sm text-gray-400 mb-1">First Name</label>
773                                <input type="text" name="first_name" required class="w-full bg-black/50 border border-white/10 rounded-lg p-3 text-white focus:outline-none focus:border-white transition-colors focus:ring-1 focus:ring-white">
774                            </div>
775                            <div>
776                                <label class="block text-sm text-gray-400 mb-1">Last Name</label>
777                                <input type="text" name="last_name" class="w-full bg-black/50 border border-white/10 rounded-lg p-3 text-white focus:outline-none focus:border-white transition-colors focus:ring-1 focus:ring-white">
778                            </div>
779                        </div>
780                        
781                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
782                            <div>
783                                <label class="block text-sm text-gray-400 mb-1">Email</label>
784                                <input type="email" name="email" required class="w-full bg-black/50 border border-white/10 rounded-lg p-3 text-white focus:outline-none focus:border-white transition-colors focus:ring-1 focus:ring-white">
785                            </div>
786                            <div>
787                                <label class="block text-sm text-gray-400 mb-1">Phone Number</label>
788                                <input type="tel" name="phone" value="+1" class="w-full bg-black/50 border border-white/10 rounded-lg p-3 text-white focus:outline-none focus:border-white transition-colors focus:ring-1 focus:ring-white" placeholder="+1 (555) 000-0000">
789                            </div>
790                        </div>
791                        <div>
792                            <label class="block text-sm text-gray-400 mb-1">Message</label>
793                            <textarea name="message" rows="4" required class="w-full bg-black/50 border border-white/10 rounded-lg p-3 text-white focus:outline-none focus:border-white transition-colors focus:ring-1 focus:ring-white"></textarea>
794                        </div>
795
796                        <div>
797                            <p class="text-xs text-gray-500 leading-relaxed">
798                                By providing a telephone number and submitting this form you are consenting to be contacted by SMS text message. Message & data rates may apply. Message frequency may vary. <a href="/privacy-policy/" class="underline hover:text-gray-300 transition-colors">Privacy Policy</a>. Reply Help for more information. You can reply STOP to opt-out of further messaging.
799                            </p>
800                        </div>
801
802                        <button type="submit" class="w-full bg-white text-black font-bold py-3 rounded-lg hover:bg-gray-200 transition-colors transform hover:scale-[1.02]">
803                            Send Message
804                        </button>
805                    </form>
806    </section>
807
808    <!-- Testimonials -->
809    <section id="testimonials" class="py-24">
810        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
811            <div class="text-center mb-16 fade-up">
812                <h2 class="text-3xl md:text-4xl font-bold">What Radiologists Say</h2>
813            </div>
814            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
815                <!-- Review 1 -->
816                <div class="bg-white/5 p-6 rounded-xl border border-white/10 fade-up">
817                    <div class="flex items-center gap-1 mb-4 text-white">
818                        <i data-lucide="star" class="w-4 h-4 fill-white"></i>
819                        <i data-lucide="star" class="w-4 h-4 fill-white"></i>
820                        <i data-lucide="star" class="w-4 h-4 fill-white"></i>
821                        <i data-lucide="star" class="w-4 h-4 fill-white"></i>
822                        <i data-lucide="star" class="w-4 h-4 fill-white"></i>
823                    </div>
824                    <p class="text-gray-300 mb-6 text-sm">"RadRep AI cut my reporting time almost in half.
825                        Dictation feels natural.
826                        The reports need very little correction."</p>
827                    <div class="flex items-center gap-3">
828                        <div class="w-10 h-10 rounded-full bg-gray-700"></div> <!-- Avatar Placeholder -->
829                        <div>
830                            <div class="text-sm font-bold">Dr. Ankit Verma</div>
831                            <div class="text-xs text-gray-500">Consultant Radiologist, Delhi</div>
832                        </div>
833                    </div>
834                </div>
835
836                <!-- Review 2 -->
837                <div class="bg-white/5 p-6 rounded-xl border border-white/10 fade-up delay-100">
838                    <div class="flex items-center gap-1 mb-4 text-white">
839                        <i data-lucide="star" class="w-4 h-4 fill-white"></i>
840                        <i data-lucide="star" class="w-4 h-4 fill-white"></i>
841                        <i data-lucide="star" class="w-4 h-4 fill-white"></i>
842                        <i data-lucide="star" class="w-4 h-4 fill-white"></i>
843                        <i data-lucide="star" class="w-4 h-4 fill-white"></i>
844                    </div>
845                    <p class="text-gray-300 mb-6 text-sm">"The system understands radiology terms well.
846                        Chest, CT, MRI — all formatted clean.
847                        It saves me effort every day."</p>
848                    <div class="flex items-center gap-3">
849                        <div class="w-10 h-10 rounded-full bg-gray-700"></div>
850                        <div>
851                            <div class="text-sm font-bold">Dr. Ritu Malhotra</div>
852                            <div class="text-xs text-gray-500">Senior Radiologist, Gurgaon</div>
853                        </div>
854                    </div>
855                </div>
856
857                <!-- Review 3 -->
858                <div class="bg-white/5 p-6 rounded-xl border border-white/10 fade-up delay-200">
859                    <div class="flex items-center gap-1 mb-4 text-white">
860                        <i data-lucide="star" class="w-4 h-4 fill-white"></i>
861                        <i data-lucide="star" class="w-4 h-4 fill-white"></i>
862                        <i data-lucide="star" class="w-4 h-4 fill-white"></i>
863                        <i data-lucide="star" class="w-4 h-4 fill-white"></i>
864                        <i data-lucide="star" class="w-4 h-4 fill-white"></i>
865                    </div>
866                    <p class="text-gray-300 mb-6 text-sm">“Earlier, I spent hours fixing report drafts.
867                        Now most reports are ready in minutes.
868                        That time goes back to patient cases."</p>
869                    <div class="flex items-center gap-3">
870                        <div class="w-10 h-10 rounded-full bg-gray-700"></div>
871                        <div>
872                            <div class="text-sm font-bold">Dr. Sandeep Iyer</div>
873                            <div class="text-xs text-gray-500">Head of Radiology, Bangalore</div>
874                        </div>
875                    </div>
876                </div>
877            </div>
878        </div>
879    </section>
880
881    <!-- NEW Contact Form Section -->
882
883    <!-- CTA Section -->
884    <section class="py-20 relative overflow-hidden bg-zinc-900 border-t border-white/10">
885        <div class="max-w-4xl mx-auto px-4 text-center relative z-10 fade-up">
886            <h2 class="text-4xl md:text-6xl font-bold mb-6">
887                Save time. Stay informed.</h2>
888            <p class="text-xl text-gray-400 mb-10">RadRep AI newsletter: tips, updates, time saved!!</p>
889            
890            <!-- Changed div to form, added action="contact.php" and method="POST" -->
891            <!-- UPDATED: Added onsubmit="handleContactSubmit(event)" to trigger AJAX and show green toast -->
892            <form onsubmit="handleContactSubmit(event)" action="contact.php" method="POST" class="flex flex-col sm:flex-row justify-center gap-4">
893                
894                <!-- Hidden Input: This tells contact.php to use the 'cta_signup' logic (email only) -->
895                <input type="hidden" name="form_type" value="cta_signup">
896                
897                <!-- Added name="email" and required -->
898                <input type="email" name="email" placeholder="Enter your work email" required
899                    class="px-6 py-4 rounded-full bg-black border border-white/20 text-white placeholder-gray-500 focus:outline-none focus:border-white w-full sm:w-auto" />
900                
901                <!-- Added type="submit" -->
902                <button type="submit"
903                    class="bg-white text-black px-8 py-4 rounded-full font-bold hover:bg-gray-200 transition-colors w-full sm:w-auto">
904                    Get Started
905                </button>
906            </form>
907        </div>
908    </section>
909</main>
910    <!-- Footer -->
911    <footer class="border-t border-white/10 py-12 bg-black">
912        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row justify-between items-center gap-4">
913            <div class="text-center md:text-left flex items-center">
914    <p class="text-xs text-gray-500">&copy; 2026 RadRep Inc. All rights reserved.</p>
915</div>
916            
917             <div class="flex items-center gap-6 order-1 md:order-2">
918                <!-- X (Twitter) -->
919                <a href="https://x.com/radrepai" target="_blank" aria-label="X (formerly Twitter)" class="text-gray-400 hover:text-white transition-colors transform hover:scale-110">
920                    <svg viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5">
921                        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path>
922                    </svg>
923                </a>
924                <!-- Instagram -->
925                <a href="https://www.instagram.com/radrep.ai" target="_blank" aria-label="Instagram" class="text-gray-400 hover:text-white transition-colors transform hover:scale-110">
926                    <i data-lucide="instagram" class="w-5 h-5"></i>
927                </a>
928                <!-- LinkedIn -->
929                <a href="https://www.linkedin.com/company/112413022/admin/dashboard/" target="_blank" aria-label="LinkedIn" class="text-gray-400 hover:text-white transition-colors transform hover:scale-110">
930                    <i data-lucide="linkedin" class="w-5 h-5"></i>
931                </a>
932              
932  <!-- YouTube -->
933                <a href="https://www.youtube.com/@radrepai" target="_blank" aria-label="YouTube" class="text-gray-400 hover:text-white transition-colors transform hover:scale-110">
934                    <i data-lucide="youtube" class="w-5 h-5"></i>
935                </a>
936            </div>
937            
938            <div class="flex gap-6 text-sm text-gray-500">
939                <a href="/privacy-policy/" class="hover:text-white transition-colors">Privacy Policy</a>
940                <a href="/refund-policy/" class="hover:text-white transition-colors">Refund Policy</a>
941                 <a href="/faq/" class="hover:text-white transition-colors">F&Q</a>
942                <a href="/terms/" class="hover:text-white transition-colors">Terms & Conditions</a>
943                <a href="/support/" class="hover:text-white transition-colors">Support</a>
944
945            </div>
946        </div>
947    </footer>
948
949    <!-- Toast Notification (Required for handleContactSubmit) -->
950   <!-- Toast Notification (Required for handleContactSubmit) -->
951   <div id="toast" class="fixed bottom-4 right-4 px-6 py-3 rounded-lg shadow-xl transform translate-y-24 opacity-0 transition-all duration-300 z-[110] flex items-center gap-3 border bg-zinc-800 border-white/10">
952        <div id="toast-icon"></div>
953        <div id="toast-msg" class="text-white text-sm font-medium"></div>
954    </div>
955    
956    <!-- NEW: Video Modal Overlay -->
957    <div id="video-modal" class="fixed inset-0 z-[100] flex items-center justify-center bg-black/90 backdrop-blur-md hidden" onclick="closeVideoModal(event)">
958        <div class="relative w-full max-w-5xl mx-4">
959            <!-- Close Button -->
960            <button onclick="closeVideoModal()" class="absolute -top-12 right-0 text-gray-400 hover:text-white transition-colors flex items-center gap-2">
961                <span class="text-sm font-medium">Close</span>
962                <i data-lucide="x" class="w-6 h-6"></i>
963            </button>
964            
965            <!-- Video Container (16:9) -->
966            <div class="relative w-full aspect-video bg-black rounded-xl overflow-hidden shadow-2xl border border-white/10">
967                <iframe 
968                    id="youtube-frame"
969                    class="w-full h-full" 
970                    src="" 
971                    title="YouTube video player" 
972                    frameborder="0" 
973                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
974                    referrerpolicy="strict-origin-when-cross-origin"
975                    allowfullscreen>
976                </iframe>
977            </div>
978        </div>
979    </div>
980
981   
981<script>
982        // Initialize Icons
983        lucide.createIcons();
984        
985        // --- VIDEO MODAL LOGIC ---
986        const YOUTUBE_VIDEO_ID = "8eg_bP2X7zo"; 
987        
988        function openVideoModal() {
989            const modal = document.getElementById('video-modal');
990            const frame = document.getElementById('youtube-frame');
991            frame.src = `https://www.youtube.com/embed/${YOUTUBE_VIDEO_ID}?autoplay=1&rel=0&modestbranding=1`;
992            modal.classList.remove('hidden');
993            document.body.style.overflow = 'hidden';
994        }
995        
996        function closeVideoModal(event) {
997            if (event && event.target !== event.currentTarget) return;
998            const modal = document.getElementById('video-modal');
999            const frame = document.getElementById('youtube-frame');
1000            frame.src = "";
1001            modal.classList.add('hidden');
1002            document.body.style.overflow = 'auto';
1003        }
1004        
1005        document.addEventListener('keydown', function(event) {
1006            if (event.key === "Escape") closeVideoModal();
1007        });
1008
1009        // --- Hero Text Slideshow Logic ---
1010        const heroTextOptions = [
1011            `Built for <br /><span class="text-transparent bg-clip-text bg-gradient-to-r from-gray-200 to-gray-500">Radiologists Who Value Time.</span>`,
1012            `Your Personal <br /><span class="text-transparent bg-clip-text bg-gradient-to-r from-gray-200 to-gray-500">AI Medical Transcriptionist.</span>`,
1013        ];
1014        let heroTextIndex = 0;
1015        const heroTextEl = document.getElementById('hero-rotating-text');
1016
1017        if (heroTextEl) {
1018            setInterval(() => {
1019                heroTextEl.classList.add('opacity-0', 'translate-y-4');
1020                heroTextEl.classList.remove('opacity-100', 'translate-y-0');
1021
1022                setTimeout(() => {
1023                    heroTextIndex = (heroTextIndex + 1) % heroTextOptions.length;
1024                    heroTextEl.innerHTML = heroTextOptions[heroTextIndex];
1025                    heroTextEl.classList.remove('opacity-0', 'translate-y-4');
1026                    heroTextEl.classList.add('opacity-100', 'translate-y-0');
1027                }, 700);
1028            }, 3500);
1029        }
1030
1031
1032     // --- Pricing Logic ---
1033
1034
1035
1036        // Data Structures updated with requested plans and discounts
1037
1038        const pricingIndia = [
1039
1040            { name: "Monthly", price: "₹2,999", period: "", originalPrice: null, discount: null, billedText: "Billed monthly", features: ["Unlimited AI Dictation", "Smart Template Selection", "Standard Support"], btn: "Get Monthly", popular: false, badgeText: null, link: "https://app.radrep.ai/auth?mode=signup" },
1041
1042            { name: "Quarterly", price: "₹8,499", period: "", originalPrice: "₹8,997", discount: "~5% OFF", billedText: "Effective ₹2,833/mo" , features: ["Unlimited AI Dictation", "Smart Template Selection", "Standard Support"], btn: "Get Quarterly", popular: false, badgeText: null, link: "https://app.radrep.ai/auth?mode=signup" },
1043
1044            { name: "Half-Yearly", price: "₹15,999", period: "", originalPrice: "₹17,994", discount: "~11% OFF", billedText: "Effective ₹2,666/mo", features: ["Unlimited AI Dictation", "Smart Template Selection", "Priority Support"], btn: "Get Half-Yearly", popular: false, badgeText: "POPULAR", link: "https://app.radrep.ai/auth?mode=signup" },
1045
1046            { name: "Yearly", price: "₹29,999", period: "", originalPrice: "₹35,988", discount: "~17% OFF", billedText: "Effective ₹2,499/mo", features: ["Unlimited AI Dictation", "Smart Template Selection", "24/7 Priority Support"], btn: "Get Yearly", popular: true, badgeText: "BEST VALUE", link: "https://app.radrep.ai/auth?mode=signup" }
1047
1048        ];
1049
1050
1051
1052        // Global equivalent reflecting similar timeline structures and approximate % off scaling
1053
1054        const pricingGlobal = [
1055
1056            { name: "Monthly", price: "$49", period: "", originalPrice: null, discount: null, billedText: "Billed monthly", features: ["Unlimited AI Dictation", "Smart Template Selection", "Standard Support"], btn: "Get Monthly", popular: false, badgeText: null, link: "https://app.radrep.ai/auth?mode=signup" },
1057
1058            { name: "Quarterly", price: "$139", period: "", originalPrice
1058: "$147", discount: "~5% OFF", billedText: "Effective $46/mo", features: ["Unlimited AI Dictation", "Smart Template Selection", "Standard Support"], btn: "Get Quarterly", popular: false, badgeText: null, link: "https://app.radrep.ai/auth?mode=signup" },
1059
1060            { name: "Half-Yearly", price: "$265", period: "", originalPrice: "$294", discount: "~10% OFF", billedText: "Effective $44/mo", features: ["Unlimited AI Dictation", "Smart Template Selection", "Priority Support"], btn: "Get Half-Yearly", popular: false, badgeText: "POPULAR", link: "https://app.radrep.ai/auth?mode=signup" },
1061
1062            { name: "Yearly", price: "$489", period: "", originalPrice: "$588", discount: "~17% OFF", billedText: "Effective $40/mo", features: ["Unlimited AI Dictation", "Smart Template Selection", "24/7 Priority Support"], btn: "Get Yearly", popular: true, badgeText: "BEST VALUE", link: "https://app.radrep.ai/auth?mode=signup" }
1063
1064        ];
1065
1066
1067
1068        const grid = document.getElementById('pricing-grid');
1069
1070
1071
1072        // Function to render cards dynamically
1073
1074        function renderPricing(data) {
1075
1076            grid.innerHTML = data.map((plan, index) => `
1077
1078                <div class="relative flex flex-col p-6 rounded-2xl bg-white/5 border ${plan.popular ? 'border-green-500/50 bg-green-900/10' : 'border-white/10'} hover:border-white/30 transition-all fade-up group" style="animation-delay: ${index * 100}ms">
1079
1080                    ${plan.badgeText ? `<div class="absolute top-0 right-0 ${plan.popular ? 'bg-green-500 text-black' : 'bg-white text-black'} text-[10px] font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">${plan.badgeText}</div>` : ''}
1081
1082                    ${plan.discount ? `<div class="absolute -top-3 left-4 bg-purple-600 text-white text-[11px] font-bold px-3 py-1 rounded-full shadow-lg z-10">${plan.discount}</div>` : ''}
1083
1084                    
1085
1086                    <h3 class="text-xl font-bold mb-2 pt-2">${plan.name}</h3>
1087
1088                    
1089
1090                    <div class="mb-4 min-h-[85px] border-b border-white/10 pb-4">
1091
1092                        <div class="h-5">
1093
1094                            ${plan.originalPrice ? `<span class="text-sm text-gray-500 line-through">${plan.originalPrice}</span>` : ''}
1095
1096                        </div>
1097
1098                        <div class="flex items-baseline gap-1 -mt-1">
1099
1100                            <span class="text-4xl font-bold text-white">${plan.price}</span>
1101                            ${plan.price.includes('₹') ? '<span class="text-gray-400 text-[10px] font-medium ml-1">(+GST)</span>' : ''}
1102
1103                            <span class="text-gray-400 text-sm">${plan.period}</span>
1104
1105                        </div>
1106
1107                        <div class="text-sm text-green-400 mt-2 font-medium bg-green-500/10 inline-block px-2 py-0.5 rounded">${plan.billedText}</div>
1108
1109                    </div>
1110
1111                    
1112
1113                    <ul class="space-y-3 mb-8 flex-1 pt-2">
1114
1115                        ${plan.features.map(f => `
1116
1117                            <li class="flex items-center gap-2 text-sm text-gray-300">
1118
1119                                <i data-lucide="check" class="w-4 h-4 text-green-500 flex-shrink-0"></i> ${f}
1120
1121                            </li>
1122
1123                        `).join('')}
1124
1125                    </ul>
1126
1127                    <a href="${plan.link}" class="block w-full text-center py-3 rounded-lg font-bold transition-colors ${plan.popular ? 'bg-white text-black hover:bg-gray-200' : 'border border-white/20 hover:bg-white/10'}">
1128
1129                        ${plan.btn}
1130
1131                    </a>
1132
1133                </div>
1134
1135            `).join('');
1136
1137
1138
1139            // Re-init icons for new content
1140
1141            lucide.createIcons();
1142
1143
1144
1145            // Re-observe for animation
1146
1147            document.querySelectorAll('#pricing-grid .fade-up').forEach(el => observer.observe(el));
1148
1149        }
1150
1151
1152
1153        // Logic to handle location
1154
1155        async function initPricing() {
1156
1157            let dataToRender = pricingIndia;
1158
1159
1160
1161            try {
1162
1163                // Try to detect country, default to India if fails (IPAPI is free limit dependent)
1164
1165                const response = await fetch('https://ipapi.co/json/');
1166
1167                if (response.ok) {
1168
1169                    const data = await response.json();
1170
1171                    if (data.country_code && data.country_code !== 'IN') {
1172
1173                        dataToRender = pricingGlobal;
1174
1175                    }
1176
1177                }
1178
1179            } catch (error) {
1180
1181                console.log('Location detection failed. Defaulting to India pricing.');
1182
1183            }
1184
1185
1186
1187            renderPricing(dataToRender);
1188
1189        }
1190
1191
1192
1193        // Initialize
1194
1195        initPricing();
1196
1197
1198
1199        // --- UI Logic ---
1200
1201        function toggleMobileMenu() {
1202
1203            const menu = document.getElementById('mobile-menu');
1204
1205            menu.classList.toggle('hidden');
1206
1207        }
1208
1209
1210
1211        function showToast(message, type = 'success') {
1212
1213            const toast = document.getElementById('toast');
1214
1215            const toastMsg = document.getElementById('toast-msg');
1216
1217            const toastIcon = document.getElementById('toast-icon');
1218
1219
1220
1221            toastMsg.innerText = message;
1222
1223            toast.className = "fixed bottom-4 right-4 px-6 py-3 rounded-lg shadow-xl transform translate-y-24 opacity-0 transition-all duration-300 z-[110] flex items-center gap-3 border bg-zinc-800 border-white/10";
1224
1225
1226
1227            if (type === 'success') {
1228
1229                toast.classList.add('border-green-500/50');
1230
1231                toastIcon.innerHTML = '<i data-lucide="check-circle" class="w-5 h-5 text-green-500"></i>';
1232
1233            } else {
1234
1235                toast.classList.add('border-red-500/50');
1236
1237                toastIcon.innerHTML = '<i data-lucide="alert-circle" class="w-5 h-5 text-red-500"></i>';
1238
1239            }
1240
1241
1242
1243            lucide.createIcons();
1244
1245            setTimeout(() => toast.classList.remove('translate-y-24', 'opacity-0'), 10);
1246
1247            setTimeout(() => toast.classList.add('translate-y-24', 'opacity-0'), 3500);
1248
1249        }
1250
1251
1252
1253        async function handleContactSubmit(e) {
1254
1255            e.preventDefault();
1256
1257            const form = e.target;
1258
1259            const btn = form.querySelector('button[type="submit"]');
1260
1261            const originalText = btn.innerText;
1262
1263
1264
1265            btn.innerText = 'Sending...';
1266
1267            btn.disabled = true;
1268
1269
1270
1271            const action = form.getAttribute('action');
1272
1273            
1274
1275            try {
1276
1277                // Try to send to backend
1278
1279                const response = await fetch(action, {
1280
1281                    method: form.method || 'POST',
1282
1283                    body: new FormData(form),
1284
1285                    headers: { 'Accept': 'application/json' }
1286
1287                });
1288
1289
1290
1291                if (response.ok) {
1292
1293                    showToast('Message sent successfully! We will be in touch.', 'success');
1294
1295                    form.reset();
1296
1297                } else {
1298
1299                    // Fallback for demo preview (since contact.php doesn't exist here)
1300
1301                    if (response.status === 404 || response.status === 405) {
1302
1303                        await new Promise(resolve => setTimeout(resolve, 1000)); // Simulate delay
1304
1305                        showToast('Message sent! (Preview Mode Simulation)', 'success');
1306
1307                        form.reset();
1308
1309                    } else {
1310
1311                        showToast('Something went wrong. Please try again.', 'error');
1312
1313                    }
1314
1315                }
1316
1317            } catch (error) {
1318
1319                // If fetch completely fails (network error), still show success for preview purposes
1320
1321                await new Promise(resolve => setTimeout(resolve, 1000));
1322
1323                showToast('Message sent! (Offline Simulation)', 'success');
1324
1325                form.reset();
1326
1327            } finally {
1328
1329                btn.innerText = originalText;
1330
1331                btn.disabled = false;
1332
1333            }
1334
1335        }
1336
1337
1338
1339        // Animation Observer
1340
1341        const observerOptions = { threshold: 0.1 };
1342
1343        const observer = new IntersectionObserver((entries, observer) => {
1344
1345            entries.forEach(entry => {
1346
1347                if (entry.isIntersecting) {
1348
1349                    entry.target.classList.add('visible');
1350
1351                    observer.unobserve(entry.target);
1352
1353                }
1354
1355            });
1356
1357        }, observerOptions);
1358
1359
1360
1361        document.querySelectorAll('.fade-up').forEach(el => observer.observe(el));
1362
1363    </script>
1363
1364
1365</body>
1366
1367
1368
1369</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.