Hugging Face's logo

Spaces:
trippykat
/
milestone
Running

App Files Community
trippykat commited on
Commit
18ba8f6
·
verified ·
1 Parent(s): b8f124a

You are building a homepage for **The Milestone Foundation**, a 501(c)(3) nonprofit organization that provides **non-recourse, ethical financial support** to civil litigation plaintiffs. Their mission is to offer a fair, transparent, and humane alternative to predatory lawsuit loans. The target market includes **low-income plaintiffs in active lawsuits**, **civil rights or personal injury plaintiffs**, and **plaintiffs' attorneys** seeking an ethical referral option for their clients. ## 🖥️ General Website Style & Branding - **Color Palette:** - Deep Indigo (#2B2D42) – for headers and footers - Warm Gold (#E5B100) – for accents and CTAs - Soft Off-White (#FAFAFA) – for background sections - Rich Gray (#505050) – for body text - **Font Pairing:** - **Headers:** 'Playfair Display' (serif, elegant and authoritative) - **Body/Text:** 'Open Sans' or 'Lato' (clean, modern sans-serif) - **Image Guidance:** - Use **real, diverse people**, especially in testimonials (avoid overly glossy stock) - Grayscale or muted overlay on hero background - Include icons for stats and process steps - Optional legal-themed visuals: courthouse steps, balanced scales, etc. --- ## 📋 Main Menu Structure 1. **What We Do** - About Us - Our Model - Impact 2. **How It Works** - For Plaintiffs - For Attorneys - FAQs 3. **Apply** - Apply for Funding - Refer a Client 4. **News & Advocacy** - Blog - Press - Legal Ethics 5. **Support** - Donate - Careers - Partner With Us --- ## 🏠 Homepage Sections ### 1. Hero Section **Headline:** **Lawsuit Loans Are Broken. We’re Here to Fix Them.** **Subheadline:** The Milestone Foundation provides ethical, nonprofit financial support to plaintiffs—so you can pursue justice without being forced into an unfair settlement. **CTA Buttons:** - Apply for Funding (primary, gold) - How We’re Different (secondary, outline) --- ### 2. Problem Section **Title:** Predatory Lending is Preying on Plaintiffs. **Body Copy:** Traditional lawsuit lenders charge outrageous interest and compound fees that can leave plaintiffs with nothing—even when they win. We exist to protect people from that system. **Comparison Table:** | Typical Lender | The Milestone Foundation | |-----------------------------|----------------------------------| | 60%–120% APR | 10% simple interest | | Compounding interest | No compounding ever | | Hidden fees | 100% transparent | | For-profit motives | Mission-driven nonprofit | --- ### 3. Differentiator Section **Title:** A Safer, Smarter Way to Get Through Litigation. **Body Copy:** We’re not a lender—we’re a lifeline. As a nonprofit, we’re committed to making sure plaintiffs don’t have to sacrifice justice for survival. **Key Points (bulleted):** - 10% simple interest - No repayment if you lose - No hidden fees or compounding - Endorsed by attorneys and ethics panels --- ### 4. Testimonial Section **Title:** Real People. Real Relief. **Quote Carousel:** > “With Milestone’s help, I could finally take a breath. I wasn’t forced into settling just to make rent.” > — Tanya, Personal Injury Plaintiff > “They didn’t just fund my case—they respected my dignity.” > — Marcus, Civil Rights Plaintiff --- ### 5. Process Section **Title:** Getting Help Shouldn’t Be Hard. **Steps:** 1. **Apply Online** – Takes just minutes. 2. **Attorney Review** – We coordinate with your legal team. 3. **Receive Funds** – Fast and transparent. **CTA:** Apply Now --- ### 6. For Attorneys **Title:** Your Clients Deserve Better Options. **Copy:** You’ve seen the harm that high-interest lawsuit loans can cause. We’re the ethical alternative you can trust. **CTA Buttons:** Refer a Client | Attorney Resources --- ### 7. Impact Section **Title:** Impact in Action **Visual:** Animated counters or icon grid - $6M+ advanced - 800+ plaintiffs supported - 42 states reached - 0 hidden fees **CTA:** See the Impact --- ### 8. News & Advocacy **Title:** Fighting for a More Just System **Feed:** Latest blog posts, news mentions, and legal ethics commentary. - “The Ethics of Lawsuit Loans” - “Nonprofit Legal Funding Explained” - “Milestone Wins Nonprofit of the Year” --- ### 9. Final CTA **Headline:** Let’s Fix Legal Funding—Together. **CTA Buttons:** - Apply Now - Refer a Client - Support the Mission --- ### 10. Footer **Content:** - Quick links to navigation menu - Social media icons - Newsletter signup (optional) **📬 Contact Info:** Contact Us 50 Fountain Plaza, Suite 1300 Buffalo, NY 14202 Local Phone: 716.970.7100 Fax: 716.883.2124 📧 [email protected] **Required Disclosure:** *The Milestone Foundation* A 501(c)(3) nonprofit organization providing an ethical funding solution to individuals pursuing justice after suffering a catastrophic incident. The foundation helps plaintiffs in need pay for essential living expenses during litigation. Please note that The Milestone Foundation was previously named Bairs Foundation. - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +564 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Milestone
3
- emoji: 🐨
4
- colorFrom: yellow
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: milestone
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,564 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>The Milestone Foundation | Ethical Legal Funding for Plaintiffs</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
12
+ <style>
13
+ body {
14
+ font-family: 'Lato', sans-serif;
15
+ color: #505050;
16
+ }
17
+ h1, h2, h3, h4, h5, h6 {
18
+ font-family: 'Playfair Display', serif;
19
+ }
20
+ .hero-overlay {
21
+ background: linear-gradient(rgba(43, 45, 66, 0.8), rgba(43, 45, 66, 0.6));
22
+ }
23
+ .testimonial-card {
24
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
25
+ }
26
+ .process-step {
27
+ transition: all 0.3s ease;
28
+ }
29
+ .process-step:hover {
30
+ transform: translateY(-5px);
31
+ }
32
+ .impact-card {
33
+ transition: all 0.3s ease;
34
+ }
35
+ .impact-card:hover {
36
+ transform: scale(1.05);
37
+ }
38
+ .news-card {
39
+ transition: all 0.3s ease;
40
+ }
41
+ .news-card:hover {
42
+ transform: translateY(-5px);
43
+ }
44
+ </style>
45
+ </head>
46
+ <body class="bg-[#FAFAFA]">
47
+ <!-- Navigation -->
48
+ <nav class="bg-[#2B2D42] text-white shadow-md sticky top-0 z-50">
49
+ <div class="container mx-auto px-4 py-3">
50
+ <div class="flex justify-between items-center">
51
+ <div class="flex items-center">
52
+ <a href="#" class="text-2xl font-bold flex items-center">
53
+ <span class="text-[#E5B100]">The Milestone</span>
54
+ <span class="ml-1">Foundation</span>
55
+ </a>
56
+ </div>
57
+
58
+ <!-- Mobile menu button -->
59
+ <div class="md:hidden">
60
+ <button id="mobile-menu-button" class="text-white focus:outline-none">
61
+ <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
62
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
63
+ </svg>
64
+ </button>
65
+ </div>
66
+
67
+ <!-- Desktop menu -->
68
+ <div class="hidden md:flex space-x-6">
69
+ <div class="group relative">
70
+ <button class="flex items-center hover:text-[#E5B100] transition">
71
+ What We Do <i class="fas fa-chevron-down ml-1 text-xs"></i>
72
+ </button>
73
+ <div class="absolute hidden group-hover:block bg-white text-[#505050] min-w-[200px] rounded shadow-lg mt-1">
74
+ <a href="#" class="block px-4 py-2 hover:bg-gray-100">About Us</a>
75
+ <a href="#" class="block px-4 py-2 hover:bg-gray-100">Our Model</a>
76
+ <a href="#" class="block px-4 py-2 hover:bg-gray-100">Impact</a>
77
+ </div>
78
+ </div>
79
+ <div class="group relative">
80
+ <button class="flex items-center hover:text-[#E5B100] transition">
81
+ How It Works <i class="fas fa-chevron-down ml-1 text-xs"></i>
82
+ </button>
83
+ <div class="absolute hidden group-hover:block bg-white text-[#505050] min-w-[200px] rounded shadow-lg mt-1">
84
+ <a href="#" class="block px-4 py-2 hover:bg-gray-100">For Plaintiffs</a>
85
+ <a href="#" class="block px-4 py-2 hover:bg-gray-100">For Attorneys</a>
86
+ <a href="#" class="block px-4 py-2 hover:bg-gray-100">FAQs</a>
87
+ </div>
88
+ </div>
89
+ <a href="#" class="hover:text-[#E5B100] transition">Apply</a>
90
+ <a href="#" class="hover:text-[#E5B100] transition">News & Advocacy</a>
91
+ <a href="#" class="hover:text-[#E5B100] transition">Support</a>
92
+ </div>
93
+ </div>
94
+
95
+ <!-- Mobile menu -->
96
+ <div id="mobile-menu" class="hidden md:hidden bg-[#2B2D42] mt-2 pb-3">
97
+ <a href="#" class="block px-3 py-2 hover:bg-gray-700">What We Do</a>
98
+ <a href="#" class="block px-3 py-2 hover:bg-gray-700">How It Works</a>
99
+ <a href="#" class="block px-3 py-2 hover:bg-gray-700">Apply</a>
100
+ <a href="#" class="block px-3 py-2 hover:bg-gray-700">News & Advocacy</a>
101
+ <a href="#" class="block px-3 py-2 hover:bg-gray-700">Support</a>
102
+ </div>
103
+ </div>
104
+ </nav>
105
+
106
+ <!-- Hero Section -->
107
+ <section class="relative bg-gray-800 text-white">
108
+ <div class="absolute inset-0 hero-overlay">
109
+ <img src="https://images.unsplash.com/photo-1589829545856-d10d557cf95f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Justice scales" class="w-full h-full object-cover opacity-30">
110
+ </div>
111
+ <div class="container mx-auto px-4 py-24 relative z-10">
112
+ <div class="max-w-2xl">
113
+ <h1 class="text-4xl md:text-5xl font-bold mb-4">Lawsuit Loans Are Broken. We're Here to Fix Them.</h1>
114
+ <p class="text-xl mb-8">The Milestone Foundation provides ethical, nonprofit financial support to plaintiffs—so you can pursue justice without being forced into an unfair settlement.</p>
115
+ <div class="flex flex-wrap gap-4">
116
+ <a href="#" class="bg-[#E5B100] hover:bg-[#d4a300] text-[#2B2D42] font-bold py-3 px-6 rounded transition">Apply for Funding</a>
117
+ <a href="#" class="border-2 border-white hover:bg-white hover:text-[#2B2D42] font-bold py-3 px-6 rounded transition">How We're Different</a>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </section>
122
+
123
+ <!-- Problem Section -->
124
+ <section class="py-16 bg-white">
125
+ <div class="container mx-auto px-4">
126
+ <h2 class="text-3xl font-bold text-center mb-12">Predatory Lending is Preying on Plaintiffs.</h2>
127
+ <div class="max-w-4xl mx-auto">
128
+ <p class="text-lg mb-8 text-center">Traditional lawsuit lenders charge outrageous interest and compound fees that can leave plaintiffs with nothing—even when they win. We exist to protect people from that system.</p>
129
+
130
+ <div class="overflow-x-auto">
131
+ <table class="min-w-full bg-white rounded-lg overflow-hidden mb-12">
132
+ <thead class="bg-[#2B2D42] text-white">
133
+ <tr>
134
+ <th class="py-3 px-4 text-left">Typical Lender</th>
135
+ <th class="py-3 px-4 text-left">The Milestone Foundation</th>
136
+ </tr>
137
+ </thead>
138
+ <tbody class="divide-y divide-gray-200">
139
+ <tr>
140
+ <td class="py-4 px-4">60%–120% APR</td>
141
+ <td class="py-4 px-4 font-semibold">10% simple interest</td>
142
+ </tr>
143
+ <tr>
144
+ <td class="py-4 px-4">Compounding interest</td>
145
+ <td class="py-4 px-4 font-semibold">No compounding ever</td>
146
+ </tr>
147
+ <tr>
148
+ <td class="py-4 px-4">Hidden fees</td>
149
+ <td class="py-4 px-4 font-semibold">100% transparent</td>
150
+ </tr>
151
+ <tr>
152
+ <td class="py-4 px-4">For-profit motives</td>
153
+ <td class="py-4 px-4 font-semibold">Mission-driven nonprofit</td>
154
+ </tr>
155
+ </tbody>
156
+ </table>
157
+ </div>
158
+ </div>
159
+ </div>
160
+ </section>
161
+
162
+ <!-- Differentiator Section -->
163
+ <section class="py-16 bg-[#FAFAFA]">
164
+ <div class="container mx-auto px-4">
165
+ <div class="max-w-4xl mx-auto text-center mb-12">
166
+ <h2 class="text-3xl font-bold mb-4">A Safer, Smarter Way to Get Through Litigation.</h2>
167
+ <p class="text-lg">We're not a lender—we're a lifeline. As a nonprofit, we're committed to making sure plaintiffs don't have to sacrifice justice for survival.</p>
168
+ </div>
169
+
170
+ <div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
171
+ <div class="bg-white p-6 rounded-lg shadow-md">
172
+ <div class="flex items-center mb-3">
173
+ <div class="bg-[#E5B100] text-white p-2 rounded-full mr-4">
174
+ <i class="fas fa-percentage text-xl"></i>
175
+ </div>
176
+ <h3 class="text-xl font-semibold">10% simple interest</h3>
177
+ </div>
178
+ <p>Our rates are a fraction of what predatory lenders charge, with no compounding to balloon your costs.</p>
179
+ </div>
180
+
181
+ <div class="bg-white p-6 rounded-lg shadow-md">
182
+ <div class="flex items-center mb-3">
183
+ <div class="bg-[#E5B100] text-white p-2 rounded-full mr-4">
184
+ <i class="fas fa-hand-holding-usd text-xl"></i>
185
+ </div>
186
+ <h3 class="text-xl font-semibold">No repayment if you lose</h3>
187
+ </div>
188
+ <p>We take on the risk—if your case doesn't succeed, you owe us nothing.</p>
189
+ </div>
190
+
191
+ <div class="bg-white p-6 rounded-lg shadow-md">
192
+ <div class="flex items-center mb-3">
193
+ <div class="bg-[#E5B100] text-white p-2 rounded-full mr-4">
194
+ <i class="fas fa-eye text-xl"></i>
195
+ </div>
196
+ <h3 class="text-xl font-semibold">No hidden fees or compounding</h3>
197
+ </div>
198
+ <p>What you see is what you get—no surprises that leave you with nothing after settlement.</p>
199
+ </div>
200
+
201
+ <div class="bg-white p-6 rounded-lg shadow-md">
202
+ <div class="flex items-center mb-3">
203
+ <div class="bg-[#E5B100] text-white p-2 rounded-full mr-4">
204
+ <i class="fas fa-award text-xl"></i>
205
+ </div>
206
+ <h3 class="text-xl font-semibold">Endorsed by attorneys and ethics panels</h3>
207
+ </div>
208
+ <p>Legal professionals trust us as the ethical alternative to predatory lending.</p>
209
+ </div>
210
+ </div>
211
+ </div>
212
+ </section>
213
+
214
+ <!-- Testimonial Section -->
215
+ <section class="py-16 bg-[#2B2D42] text-white">
216
+ <div class="container mx-auto px-4">
217
+ <h2 class="text-3xl font-bold text-center mb-12">Real People. Real Relief.</h2>
218
+
219
+ <div class="max-w-4xl mx-auto">
220
+ <div class="relative">
221
+ <!-- Testimonial Carousel -->
222
+ <div id="testimonial-carousel" class="overflow-hidden">
223
+ <div class="flex transition-transform duration-300 ease-in-out">
224
+ <!-- Testimonial 1 -->
225
+ <div class="min-w-full">
226
+ <div class="bg-white text-[#505050] p-8 rounded-lg testimonial-card">
227
+ <div class="flex items-center mb-4">
228
+ <div class="w-12 h-12 rounded-full bg-gray-300 overflow-hidden mr-4">
229
+ <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="Tanya" class="w-full h-full object-cover">
230
+ </div>
231
+ <div>
232
+ <h4 class="font-bold">Tanya</h4>
233
+ <p class="text-sm text-gray-600">Personal Injury Plaintiff</p>
234
+ </div>
235
+ </div>
236
+ <blockquote class="text-lg italic mb-4">
237
+ "With Milestone's help, I could finally take a breath. I wasn't forced into settling just to make rent."
238
+ </blockquote>
239
+ <div class="flex">
240
+ <i class="fas fa-star text-[#E5B100]"></i>
241
+ <i class="fas fa-star text-[#E5B100]"></i>
242
+ <i class="fas fa-star text-[#E5B100]"></i>
243
+ <i class="fas fa-star text-[#E5B100]"></i>
244
+ <i class="fas fa-star text-[#E5B100]"></i>
245
+ </div>
246
+ </div>
247
+ </div>
248
+
249
+ <!-- Testimonial 2 -->
250
+ <div class="min-w-full">
251
+ <div class="bg-white text-[#505050] p-8 rounded-lg testimonial-card">
252
+ <div class="flex items-center mb-4">
253
+ <div class="w-12 h-12 rounded-full bg-gray-300 overflow-hidden mr-4">
254
+ <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Marcus" class="w-full h-full object-cover">
255
+ </div>
256
+ <div>
257
+ <h4 class="font-bold">Marcus</h4>
258
+ <p class="text-sm text-gray-600">Civil Rights Plaintiff</p>
259
+ </div>
260
+ </div>
261
+ <blockquote class="text-lg italic mb-4">
262
+ "They didn't just fund my case—they respected my dignity."
263
+ </blockquote>
264
+ <div class="flex">
265
+ <i class="fas fa-star text-[#E5B100]"></i>
266
+ <i class="fas fa-star text-[#E5B100]"></i>
267
+ <i class="fas fa-star text-[#E5B100]"></i>
268
+ <i class="fas fa-star text-[#E5B100]"></i>
269
+ <i class="fas fa-star text-[#E5B100]"></i>
270
+ </div>
271
+ </div>
272
+ </div>
273
+ </div>
274
+ </div>
275
+
276
+ <!-- Carousel Controls -->
277
+ <button id="prev-testimonial" class="absolute left-0 top-1/2 transform -translate-y-1/2 -translate-x-4 bg-[#E5B100] text-[#2B2D42] rounded-full w-10 h-10 flex items-center justify-center shadow-md hover:bg-[#d4a300] transition">
278
+ <i class="fas fa-chevron-left"></i>
279
+ </button>
280
+ <button id="next-testimonial" class="absolute right-0 top-1/2 transform -translate-y-1/2 translate-x-4 bg-[#E5B100] text-[#2B2D42] rounded-full w-10 h-10 flex items-center justify-center shadow-md hover:bg-[#d4a300] transition">
281
+ <i class="fas fa-chevron-right"></i>
282
+ </button>
283
+ </div>
284
+ </div>
285
+ </div>
286
+ </section>
287
+
288
+ <!-- Process Section -->
289
+ <section class="py-16 bg-white">
290
+ <div class="container mx-auto px-4">
291
+ <h2 class="text-3xl font-bold text-center mb-12">Getting Help Shouldn't Be Hard.</h2>
292
+
293
+ <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
294
+ <!-- Step 1 -->
295
+ <div class="bg-[#FAFAFA] p-6 rounded-lg shadow-md process-step text-center">
296
+ <div class="bg-[#E5B100] text-white w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">1</div>
297
+ <h3 class="text-xl font-semibold mb-3">Apply Online</h3>
298
+ <p>Takes just minutes with our simple, straightforward application.</p>
299
+ </div>
300
+
301
+ <!-- Step 2 -->
302
+ <div class="bg-[#FAFAFA] p-6 rounded-lg shadow-md process-step text-center">
303
+ <div class="bg-[#E5B100] text-white w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">2</div>
304
+ <h3 class="text-xl font-semibold mb-3">Attorney Review</h3>
305
+ <p>We coordinate with your legal team to understand your case.</p>
306
+ </div>
307
+
308
+ <!-- Step 3 -->
309
+ <div class="bg-[#FAFAFA] p-6 rounded-lg shadow-md process-step text-center">
310
+ <div class="bg-[#E5B100] text-white w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-2xl font-bold">3</div>
311
+ <h3 class="text-xl font-semibold mb-3">Receive Funds</h3>
312
+ <p>Fast and transparent funding when you need it most.</p>
313
+ </div>
314
+ </div>
315
+
316
+ <div class="text-center mt-12">
317
+ <a href="#" class="bg-[#E5B100] hover:bg-[#d4a300] text-[#2B2D42] font-bold py-3 px-8 rounded-full text-lg transition inline-block">Apply Now</a>
318
+ </div>
319
+ </div>
320
+ </section>
321
+
322
+ <!-- For Attorneys Section -->
323
+ <section class="py-16 bg-[#2B2D42] text-white">
324
+ <div class="container mx-auto px-4">
325
+ <div class="max-w-4xl mx-auto">
326
+ <h2 class="text-3xl font-bold mb-6">Your Clients Deserve Better Options.</h2>
327
+ <p class="text-xl mb-8">You've seen the harm that high-interest lawsuit loans can cause. We're the ethical alternative you can trust.</p>
328
+
329
+ <div class="flex flex-wrap gap-4">
330
+ <a href="#" class="bg-[#E5B100] hover:bg-[#d4a300] text-[#2B2D42] font-bold py-3 px-6 rounded transition">Refer a Client</a>
331
+ <a href="#" class="border-2 border-white hover:bg-white hover:text-[#2B2D42] font-bold py-3 px-6 rounded transition">Attorney Resources</a>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ </section>
336
+
337
+ <!-- Impact Section -->
338
+ <section class="py-16 bg-white">
339
+ <div class="container mx-auto px-4">
340
+ <h2 class="text-3xl font-bold text-center mb-12">Impact in Action</h2>
341
+
342
+ <div class="grid md:grid-cols-4 gap-6 max-w-6xl mx-auto">
343
+ <!-- Impact Stat 1 -->
344
+ <div class="bg-[#FAFAFA] p-6 rounded-lg shadow-sm text-center impact-card">
345
+ <div class="text-4xl font-bold text-[#E5B100] mb-2" id="impact-counter-1">0</div>
346
+ <p class="text-lg font-semibold">Million Advanced</p>
347
+ </div>
348
+
349
+ <!-- Impact Stat 2 -->
350
+ <div class="bg-[#FAFAFA] p-6 rounded-lg shadow-sm text-center impact-card">
351
+ <div class="text-4xl font-bold text-[#E5B100] mb-2" id="impact-counter-2">0</div>
352
+ <p class="text-lg font-semibold">Plaintiffs Supported</p>
353
+ </div>
354
+
355
+ <!-- Impact Stat 3 -->
356
+ <div class="bg-[#FAFAFA] p-6 rounded-lg shadow-sm text-center impact-card">
357
+ <div class="text-4xl font-bold text-[#E5B100] mb-2" id="impact-counter-3">0</div>
358
+ <p class="text-lg font-semibold">States Reached</p>
359
+ </div>
360
+
361
+ <!-- Impact Stat 4 -->
362
+ <div class="bg-[#FAFAFA] p-6 rounded-lg shadow-sm text-center impact-card">
363
+ <div class="text-4xl font-bold text-[#E5B100] mb-2">0</div>
364
+ <p class="text-lg font-semibold">Hidden Fees</p>
365
+ </div>
366
+ </div>
367
+
368
+ <div class="text-center mt-12">
369
+ <a href="#" class="border-2 border-[#2B2D42] hover:bg-[#2B2D42] hover:text-white text-[#2B2D42] font-bold py-3 px-8 rounded-full text-lg transition inline-block">See the Impact</a>
370
+ </div>
371
+ </div>
372
+ </section>
373
+
374
+ <!-- News & Advocacy Section -->
375
+ <section class="py-16 bg-[#FAFAFA]">
376
+ <div class="container mx-auto px-4">
377
+ <h2 class="text-3xl font-bold text-center mb-12">Fighting for a More Just System</h2>
378
+
379
+ <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
380
+ <!-- News 1 -->
381
+ <div class="bg-white rounded-lg overflow-hidden shadow-md news-card">
382
+ <img src="https://images.unsplash.com/photo-1450101499163-c8848c66ca85?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Legal ethics" class="w-full h-48 object-cover">
383
+ <div class="p-6">
384
+ <h3 class="text-xl font-bold mb-2">The Ethics of Lawsuit Loans</h3>
385
+ <p class="text-gray-600 mb-4">Exploring the moral implications of high-interest legal funding.</p>
386
+ <a href="#" class="text-[#E5B100] font-semibold hover:underline">Read More</a>
387
+ </div>
388
+ </div>
389
+
390
+ <!-- News 2 -->
391
+ <div class="bg-white rounded-lg overflow-hidden shadow-md news-card">
392
+ <img src="https://images.unsplash.com/photo-1589829545856-d10d557cf95f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Nonprofit legal funding" class="w-full h-48 object-cover">
393
+ <div class="p-6">
394
+ <h3 class="text-xl font-bold mb-2">Nonprofit Legal Funding Explained</h3>
395
+ <p class="text-gray-600 mb-4">How ethical alternatives are changing the landscape.</p>
396
+ <a href="#" class="text-[#E5B100] font-semibold hover:underline">Read More</a>
397
+ </div>
398
+ </div>
399
+
400
+ <!-- News 3 -->
401
+ <div class="bg-white rounded-lg overflow-hidden shadow-md news-card">
402
+ <img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Award" class="w-full h-48 object-cover">
403
+ <div class="p-6">
404
+ <h3 class="text-xl font-bold mb-2">Milestone Wins Nonprofit of the Year</h3>
405
+ <p class="text-gray-600 mb-4">Recognized for our commitment to ethical legal funding.</p>
406
+ <a href="#" class="text-[#E5B100] font-semibold hover:underline">Read More</a>
407
+ </div>
408
+ </div>
409
+ </div>
410
+
411
+ <div class="text-center mt-12">
412
+ <a href="#" class="border-2 border-[#2B2D42] hover:bg-[#2B2D42] hover:text-white text-[#2B2D42] font-bold py-3 px-8 rounded-full text-lg transition inline-block">View All News</a>
413
+ </div>
414
+ </div>
415
+ </section>
416
+
417
+ <!-- Final CTA Section -->
418
+ <section class="py-16 bg-[#2B2D42] text-white">
419
+ <div class="container mx-auto px-4 text-center">
420
+ <h2 class="text-3xl font-bold mb-6">Let's Fix Legal Funding—Together.</h2>
421
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Join us in creating a more just system for plaintiffs in need.</p>
422
+
423
+ <div class="flex flex-wrap justify-center gap-4">
424
+ <a href="#" class="bg-[#E5B100] hover:bg-[#d4a300] text-[#2B2D42] font-bold py-3 px-6 rounded transition">Apply Now</a>
425
+ <a href="#" class="border-2 border-white hover:bg-white hover:text-[#2B2D42] font-bold py-3 px-6 rounded transition">Refer a Client</a>
426
+ <a href="#" class="border-2 border-white hover:bg-white hover:text-[#2B2D42] font-bold py-3 px-6 rounded transition">Support the Mission</a>
427
+ </div>
428
+ </div>
429
+ </section>
430
+
431
+ <!-- Footer -->
432
+ <footer class="bg-[#2B2D42] text-white pt-12 pb-6">
433
+ <div class="container mx-auto px-4">
434
+ <div class="grid md:grid-cols-4 gap-8 mb-8">
435
+ <!-- Quick Links -->
436
+ <div>
437
+ <h3 class="text-lg font-bold mb-4">Quick Links</h3>
438
+ <ul class="space-y-2">
439
+ <li><a href="#" class="hover:text-[#E5B100] transition">What We Do</a></li>
440
+ <li><a href="#" class="hover:text-[#E5B100] transition">How It Works</a></li>
441
+ <li><a href="#" class="hover:text-[#E5B100] transition">Apply</a></li>
442
+ <li><a href="#" class="hover:text-[#E5B100] transition">News & Advocacy</a></li>
443
+ <li><a href="#" class="hover:text-[#E5B100] transition">Support</a></li>
444
+ </ul>
445
+ </div>
446
+
447
+ <!-- Resources -->
448
+ <div>
449
+ <h3 class="text-lg font-bold mb-4">Resources</h3>
450
+ <ul class="space-y-2">
451
+ <li><a href="#" class="hover:text-[#E5B100] transition">FAQs</a></li>
452
+ <li><a href="#" class="hover:text-[#E5B100] transition">Blog</a></li>
453
+ <li><a href="#" class="hover:text-[#E5B100] transition">Legal Ethics</a></li>
454
+ <li><a href="#" class="hover:text-[#E5B100] transition">Careers</a></li>
455
+ <li><a href="#" class="hover:text-[#E5B100] transition">Partner With Us</a></li>
456
+ </ul>
457
+ </div>
458
+
459
+ <!-- Contact -->
460
+ <div>
461
+ <h3 class="text-lg font-bold mb-4">Contact Us</h3>
462
+ <address class="not-italic">
463
+ <p class="mb-2">50 Fountain Plaza, Suite 1300</p>
464
+ <p class="mb-2">Buffalo, NY 14202</p>
465
+ <p class="mb-2">Local Phone: 716.970.7100</p>
466
+ <p class="mb-2">Fax: 716.883.2124</p>
467
+ <p class="mb-4"><a href="mailto:[email protected]" class="hover:text-[#E5B100] transition">[email protected]</a></p>
468
+ </address>
469
+ </div>
470
+
471
+ <!-- Newsletter -->
472
+ <div>
473
+ <h3 class="text-lg font-bold mb-4">Stay Updated</h3>
474
+ <p class="mb-4">Subscribe to our newsletter for updates on our work and advocacy efforts.</p>
475
+ <form class="flex">
476
+ <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l focus:outline-none text-gray-800 w-full">
477
+ <button type="submit" class="bg-[#E5B100] hover:bg-[#d4a300] text-[#2B2D42] font-bold px-4 py-2 rounded-r transition">Subscribe</button>
478
+ </form>
479
+ <div class="flex space-x-4 mt-4">
480
+ <a href="#" class="text-white hover:text-[#E5B100] transition"><i class="fab fa-facebook-f"></i></a>
481
+ <a href="#" class="text-white hover:text-[#E5B100] transition"><i class="fab fa-twitter"></i></a>
482
+ <a href="#" class="text-white hover:text-[#E5B100] transition"><i class="fab fa-linkedin-in"></i></a>
483
+ <a href="#" class="text-white hover:text-[#E5B100] transition"><i class="fab fa-instagram"></i></a>
484
+ </div>
485
+ </div>
486
+ </div>
487
+
488
+ <div class="border-t border-gray-700 pt-6 text-center text-sm">
489
+ <p>*The Milestone Foundation* A 501(c)(3) nonprofit organization providing an ethical funding solution to individuals pursuing justice after suffering a catastrophic incident. The foundation helps plaintiffs in need pay for essential living expenses during litigation. Please note that The Milestone Foundation was previously named Bairs Foundation.</p>
490
+ <p class="mt-4">© 2023 The Milestone Foundation. All rights reserved.</p>
491
+ </div>
492
+ </div>
493
+ </footer>
494
+
495
+ <script>
496
+ // Mobile menu toggle
497
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
498
+ const mobileMenu = document.getElementById('mobile-menu');
499
+
500
+ mobileMenuButton.addEventListener('click', () => {
501
+ mobileMenu.classList.toggle('hidden');
502
+ });
503
+
504
+ // Testimonial carousel
505
+ const testimonialCarousel = document.getElementById('testimonial-carousel');
506
+ const prevTestimonial = document.getElementById('prev-testimonial');
507
+ const nextTestimonial = document.getElementById('next-testimonial');
508
+ let currentTestimonial = 0;
509
+ const testimonials = document.querySelectorAll('#testimonial-carousel > div > div');
510
+
511
+ function showTestimonial(index) {
512
+ testimonialCarousel.querySelector('div').style.transform = `translateX(-${index * 100}%)`;
513
+ }
514
+
515
+ prevTestimonial.addEventListener('click', () => {
516
+ currentTestimonial = (currentTestimonial - 1 + testimonials.length) % testimonials.length;
517
+ showTestimonial(currentTestimonial);
518
+ });
519
+
520
+ nextTestimonial.addEventListener('click', () => {
521
+ currentTestimonial = (currentTestimonial + 1) % testimonials.length;
522
+ showTestimonial(currentTestimonial);
523
+ });
524
+
525
+ // Auto-rotate testimonials
526
+ setInterval(() => {
527
+ currentTestimonial = (currentTestimonial + 1) % testimonials.length;
528
+ showTestimonial(currentTestimonial);
529
+ }, 8000);
530
+
531
+ // Animated counters
532
+ function animateCounter(elementId, target, duration = 2000) {
533
+ const element = document.getElementById(elementId);
534
+ const start = 0;
535
+ const increment = target / (duration / 16);
536
+ let current = start;
537
+
538
+ const timer = setInterval(() => {
539
+ current += increment;
540
+ if (current >= target) {
541
+ clearInterval(timer);
542
+ current = target;
543
+ }
544
+ element.textContent = Math.floor(current).toLocaleString();
545
+ }, 16);
546
+ }
547
+
548
+ // Start counters when they come into view
549
+ const observer = new IntersectionObserver((entries) => {
550
+ entries.forEach(entry => {
551
+ if (entry.isIntersecting) {
552
+ animateCounter('impact-counter-1', 6);
553
+ animateCounter('impact-counter-2', 800);
554
+ animateCounter('impact-counter-3', 42);
555
+ observer.unobserve(entry.target);
556
+ }
557
+ });
558
+ }, { threshold: 0.5 });
559
+
560
+ const impactSection = document.querySelector('#impact-counter-1').parentElement.parentElement;
561
+ observer.observe(impactSection);
562
+ </script>
563
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=trippykat/milestone" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
564
+ </html>