File size: 21,131 Bytes
2d6f4ec
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
199b35e
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CreditWise AI Fixer - Smart Credit Repair Solution</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
        body {
            font-family: 'Poppins', sans-serif;
        }
        .bg-gradient-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .transition-all {
            transition: all 0.3s ease;
        }
        .vanta-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 0;
        }
        .content-overlay {
            position: relative;
            z-index: 10;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Vanta.js Background -->
    <div id="vanta-bg" class="vanta-container"></div>

    <!-- Navigation -->
    <nav class="bg-white shadow-sm content-overlay">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <i data-feather="credit-card" class="text-indigo-600 mr-2"></i>
                    <span class="text-xl font-semibold text-gray-900">CreditWise AI Fixer</span>
                </div>
                <div class="flex items-center space-x-4">
                    <a href="#" class="text-gray-700 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">How It Works</a>
                    <a href="#" class="text-gray-700 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">Pricing</a>
                    <a href="#" class="text-gray-700 hover:text-indigo-600 px-3 py-2 rounded-md text-sm font-medium">About</a>
                    <a href="#" class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 transition-all">Get Started</a>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <div class="relative content-overlay">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
            <div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
                <div class="mb-12 lg:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
                        AI-Powered Credit Repair <span class="text-indigo-600">Made Simple</span>
                    </h1>
                    <p class="text-lg text-gray-600 mb-8">
                        Upload your credit reports from Experian, TransUnion, and Equifax. Our AI scans for discrepancies and generates custom dispute letters automatically. Boost your credit score effortlessly.
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="bg-indigo-600 text-white px-6 py-3 rounded-md font-medium hover:bg-indigo-700 transition-all">Start Now for $99</a>
                        <a href="#" class="border border-gray-300 text-gray-700 px-6 py-3 rounded-md font-medium hover:bg-gray-50 transition-all">
                            <div class="flex items-center">
                                <i data-feather="play-circle" class="mr-2"></i>
                                Watch Demo
                            </div>
                        </a>
                    </div>
                </div>
                <div class="relative">
                    <div class="bg-white p-6 rounded-xl shadow-xl border border-gray-100">
                        <div class="flex items-center mb-4">
                            <div class="rounded-full bg-indigo-100 p-2 mr-3">
                                <i data-feather="upload" class="text-indigo-600"></i>
                            </div>
                            <h3 class="text-lg font-medium">Upload Your Credit Reports</h3>
                        </div>
                        <div class="mb-6">
                            <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer hover:border-indigo-400 transition-all">
                                <i data-feather="upload-cloud" class="mx-auto text-gray-400 w-12 h-12"></i>
                                <p class="mt-2 text-sm text-gray-600">Drag and drop your PDF reports here</p>
                                <p class="text-xs text-gray-500 mt-1">Supported: Experian, TransUnion, Equifax</p>
                            </div>
                        </div>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-500">Or select files manually</span>
                            <button class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-indigo-700 transition-all">Browse Files</button>
                        </div>
                    </div>
                    <div class="absolute -bottom-6 -left-6 w-16 h-16 rounded-full bg-indigo-200 opacity-20"></div>
                    <div class="absolute -top-6 -right-6 w-24 h-24 rounded-full bg-purple-200 opacity-20"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- How It Works Section -->
    <div class="bg-white py-16 content-overlay">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">How CreditWise AI Fixer Works</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">Three simple steps to improve your credit score with AI technology</p>
            </div>
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-gray-50 p-6 rounded-xl card-hover transition-all">
                    <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mb-4">
                        <i data-feather="upload" class="text-indigo-600 w-6 h-6"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-900 mb-2">1. Upload Reports</h3>
                    <p class="text-gray-600">Upload your credit reports from Experian, TransUnion, and Equifax in PDF format.</p>
                </div>
                <div class="bg-gray-50 p-6 rounded-xl card-hover transition-all">
                    <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mb-4">
                        <i data-feather="search" class="text-indigo-600 w-6 h-6"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-900 mb-2">2. AI Analysis</h3>
                    <p class="text-gray-600">Our AI scans your reports for errors, discrepancies, and outdated information.</p>
                </div>
                <div class="bg-gray-50 p-6 rounded-xl card-hover transition-all">
                    <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mb-4">
                        <i data-feather="mail" class="text-indigo-600 w-6 h-6"></i>
                    </div>
                    <h3 class="text-xl font-semibold text-gray-900 mb-2">3. Get Letters</h3>
                    <p class="text-gray-600">Receive customized dispute letters ready to mail to each credit bureau.</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Features Section -->
    <div class="bg-gray-50 py-16 content-overlay">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center">
                <div>
                    <h2 class="text-3xl font-bold text-gray-900 mb-6">AI-Powered Credit Repair Features</h2>
                    <div class="space-y-6">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <div class="bg-indigo-100 rounded-full p-2">
                                    <i data-feather="check-circle" class="text-indigo-600"></i>
                                </div>
                            </div>
                            <div class="ml-3">
                                <h3 class="text-lg font-medium text-gray-900">Comprehensive Error Detection</h3>
                                <p class="mt-1 text-gray-600">Our AI identifies all types of errors including incorrect personal information, duplicate accounts, and inaccurate payment history.</p>
                            </div>
                        </div>
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <div class="bg-indigo-100 rounded-full p-2">
                                    <i data-feather="file-text" class="text-indigo-600"></i>
                                </div>
                            </div>
                            <div class="ml-3">
                                <h3 class="text-lg font-medium text-gray-900">Custom Dispute Letters</h3>
                                <p class="mt-1 text-gray-600">Personalized letters generated with your information, formatted correctly for each credit bureau's requirements.</p>
                            </div>
                        </div>
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <div class="bg-indigo-100 rounded-full p-2">
                                    <i data-feather="shield" class="text-indigo-600"></i>
                                </div>
                            </div>
                            <div class="ml-3">
                                <h3 class="text-lg font-medium text-gray-900">Secure Document Handling</h3>
                                <p class="mt-1 text-gray-600">Bank-level encryption protects your sensitive information. All documents are automatically deleted after 30 days.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="mt-12 lg:mt-0">
                    <img src="http://static.photos/finance/1024x576/1" alt="Credit Report Analysis" class="rounded-xl shadow-lg w-full">
                </div>
            </div>
        </div>
    </div>

    <!-- Pricing Section -->
    <div class="bg-white py-16 content-overlay">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-gray-900 mb-4">Simple, Transparent Pricing</h2>
                <p class="text-lg text-gray-600 max-w-3xl mx-auto">One-time payment. No subscriptions. No hidden fees.</p>
            </div>
            <div class="flex justify-center">
                <div class="bg-indigo-50 border border-indigo-100 rounded-xl p-8 max-w-md w-full">
                    <div class="text-center mb-6">
                        <h3 class="text-2xl font-bold text-indigo-900 mb-2">Full Service Package</h3>
                        <p class="text-gray-600 mb-4">Everything you need to dispute errors on all three credit reports</p>
                        <div class="flex justify-center items-baseline">
                            <span class="text-5xl font-bold text-gray-900">$99</span>
                            <span class="ml-1 text-lg text-gray-600">one-time</span>
                        </div>
                    </div>
                    <ul class="space-y-3 mb-8">
                        <li class="flex items-center">
                            <i data-feather="check" class="text-indigo-600 mr-2"></i>
                            <span class="text-gray-700">Analysis of all 3 credit reports</span>
                        </li>
                        <li class="flex items-center">
                            <i data-feather="check" class="text-indigo-600 mr-2"></i>
                            <span class="text-gray-700">Comprehensive error detection</span>
                        </li>
                        <li class="flex items-center">
                            <i data-feather="check" class="text-indigo-600 mr-2"></i>
                            <span class="text-gray-700">12 custom dispute letters</span>
                        </li>
                        <li class="flex items-center">
                            <i data-feather="check" class="text-indigo-600 mr-2"></i>
                            <span class="text-gray-700">Credit improvement tips</span>
                        </li>
                        <li class="flex items-center">
                            <i data-feather="check" class="text-indigo-600 mr-2"></i>
                            <span class="text-gray-700">Priority email support</span>
                        </li>
                    </ul>
                    <button class="w-full bg-indigo-600 text-white py-3 px-4 rounded-md font-medium hover:bg-indigo-700 transition-all">Get Started Now</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Testimonials Section -->
    <div class="bg-gray-900 text-white py-16 content-overlay">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-white mb-4">Success Stories</h2>
                <p class="text-lg text-gray-300 max-w-3xl mx-auto">See how CreditWise AI Fixer has helped others improve their credit</p>
            </div>
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-gray-800 p-6 rounded-xl">
                    <div class="flex items-center mb-4">
                        <img src="http://static.photos/people/200x200/1" alt="Sarah J." class="w-12 h-12 rounded-full mr-4">
                        <div>
                            <h4 class="font-medium text-white">Sarah J.</h4>
                            <p class="text-indigo-300 text-sm">Score improved by 112 points</p>
                        </div>
                    </div>
                    <p class="text-gray-300">"I found 8 errors across my reports that I didn't even know about. The dispute letters were perfectly formatted and easy to send. My credit score jumped within 45 days!"</p>
                </div>
                <div class="bg-gray-800 p-6 rounded-xl">
                    <div class="flex items-center mb-4">
                        <img src="http://static.photos/people/200x200/2" alt="Michael T." class="w-12 h-12 rounded-full mr-4">
                        <div>
                            <h4 class="font-medium text-white">Michael T.</h4>
                            <p class="text-indigo-300 text-sm">Score improved by 87 points</p>
                        </div>
                    </div>
                    <p class="text-gray-300">"The AI caught things that a credit repair company missed when I paid them $500 last year. For $99, this is an absolute steal. Highly recommend!"</p>
                </div>
                <div class="bg-gray-800 p-6 rounded-xl">
                    <div class="flex items-center mb-4">
                        <img src="http://static.photos/people/200x200/3" alt="David R." class="w-12 h-12 rounded-full mr-4">
                        <div>
                            <h4 class="font-medium text-white">David R.</h4>
                            <p class="text-indigo-300 text-sm">Score improved by 64 points</p>
                        </div>
                    </div>
                    <p class="text-gray-300">"I was skeptical about using AI for credit repair, but the process was so simple and the results were better than I expected. Will use again in the future!"</p>
                </div>
            </div>
        </div>
    </div>

    <!-- CTA Section -->
    <div class="bg-gradient-primary py-16 content-overlay">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 class="text-3xl font-bold text-white mb-6">Ready to Improve Your Credit Score?</h2>
            <p class="text-xl text-indigo-100 mb-8 max-w-3xl mx-auto">Take control of your financial future today. Our AI-powered credit repair makes it easy and affordable.</p>
            <button class="bg-white text-indigo-600 px-8 py-3 rounded-md font-bold hover:bg-gray-100 transition-all shadow-lg">Start Now for $99</button>
        </div>
    </div>

    <!-- Footer -->
    <footer class="bg-gray-800 content-overlay">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-white font-medium mb-4">Product</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white">How It Works</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Features</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-white font-medium mb-4">Company</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white">About Us</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Terms of Service</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-white font-medium mb-4">Resources</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Credit Education</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Help Center</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">Contact Us</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-white font-medium mb-4">Connect</h3>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white">
                            <i data-feather="facebook"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white">
                            <i data-feather="twitter"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white">
                            <i data-feather="instagram"></i>
                        </a>
                        <a href="#" class="text-gray-400 hover:text-white">
                            <i data-feather="linkedin"></i>
                        </a>
                    </div>
                    <div class="mt-6">
                        <p class="text-gray-400 text-sm">© 2023 CreditWise AI Fixer. All rights reserved.</p>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // Initialize Vanta.js
        VANTA.GLOBE({
            el: "#vanta-bg",
            mouseControls: true,
            touchControls: true,
            gyroControls: false,
            minHeight: 200.00,
            minWidth: 200.00,
            scale: 1.00,
            scaleMobile: 1.00,
            color: 0x5d6af7,
            backgroundColor: 0xf8fafc,
            size: 0.8
        });

        // Initialize feather icons
        feather.replace();

        // Simple animation for cards on scroll
        document.addEventListener('DOMContentLoaded', function() {
            anime({
                targets: '.card-hover',
                translateY: [20, 0],
                opacity: [0, 1],
                duration: 1000,
                delay: anime.stagger(200),
                easing: 'easeOutExpo'
            });
        });
    </script>
</body>
</html>