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
18ba8f6
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>The Milestone Foundation | Ethical Legal Funding for Plaintiffs</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <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"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| body { | |
| font-family: 'Lato', sans-serif; | |
| color: #505050; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| font-family: 'Playfair Display', serif; | |
| } | |
| .hero-overlay { | |
| background: linear-gradient(rgba(43, 45, 66, 0.8), rgba(43, 45, 66, 0.6)); | |
| } | |
| .testimonial-card { | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| } | |
| .process-step { | |
| transition: all 0.3s ease; | |
| } | |
| .process-step:hover { | |
| transform: translateY(-5px); | |
| } | |
| .impact-card { | |
| transition: all 0.3s ease; | |
| } | |
| .impact-card:hover { | |
| transform: scale(1.05); | |
| } | |
| .news-card { | |
| transition: all 0.3s ease; | |
| } | |
| .news-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-[#FAFAFA]"> | |
| <!-- Navigation --> | |
| <nav class="bg-[#2B2D42] text-white shadow-md sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <a href="#" class="text-2xl font-bold flex items-center"> | |
| <span class="text-[#E5B100]">The Milestone</span> | |
| <span class="ml-1">Foundation</span> | |
| </a> | |
| </div> | |
| <!-- Mobile menu button --> | |
| <div class="md:hidden"> | |
| <button id="mobile-menu-button" class="text-white focus:outline-none"> | |
| <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| <!-- Desktop menu --> | |
| <div class="hidden md:flex space-x-6"> | |
| <div class="group relative"> | |
| <button class="flex items-center hover:text-[#E5B100] transition"> | |
| What We Do <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </button> | |
| <div class="absolute hidden group-hover:block bg-white text-[#505050] min-w-[200px] rounded shadow-lg mt-1"> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100">About Us</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100">Our Model</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100">Impact</a> | |
| </div> | |
| </div> | |
| <div class="group relative"> | |
| <button class="flex items-center hover:text-[#E5B100] transition"> | |
| How It Works <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </button> | |
| <div class="absolute hidden group-hover:block bg-white text-[#505050] min-w-[200px] rounded shadow-lg mt-1"> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100">For Plaintiffs</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100">For Attorneys</a> | |
| <a href="#" class="block px-4 py-2 hover:bg-gray-100">FAQs</a> | |
| </div> | |
| </div> | |
| <a href="#" class="hover:text-[#E5B100] transition">Apply</a> | |
| <a href="#" class="hover:text-[#E5B100] transition">News & Advocacy</a> | |
| <a href="#" class="hover:text-[#E5B100] transition">Support</a> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-[#2B2D42] mt-2 pb-3"> | |
| <a href="#" class="block px-3 py-2 hover:bg-gray-700">What We Do</a> | |
| <a href="#" class="block px-3 py-2 hover:bg-gray-700">How It Works</a> | |
| <a href="#" class="block px-3 py-2 hover:bg-gray-700">Apply</a> | |
| <a href="#" class="block px-3 py-2 hover:bg-gray-700">News & Advocacy</a> | |
| <a href="#" class="block px-3 py-2 hover:bg-gray-700">Support</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="relative bg-gray-800 text-white"> | |
| <div class="absolute inset-0 hero-overlay"> | |
| <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"> | |
| </div> | |
| <div class="container mx-auto px-4 py-24 relative z-10"> | |
| <div class="max-w-2xl"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">Lawsuit Loans Are Broken. We're Here to Fix Them.</h1> | |
| <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> | |
| <div class="flex flex-wrap gap-4"> | |
| <a href="#" class="bg-[#E5B100] hover:bg-[#d4a300] text-[#2B2D42] font-bold py-3 px-6 rounded transition">Apply for Funding</a> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Problem Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Predatory Lending is Preying on Plaintiffs.</h2> | |
| <div class="max-w-4xl mx-auto"> | |
| <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> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full bg-white rounded-lg overflow-hidden mb-12"> | |
| <thead class="bg-[#2B2D42] text-white"> | |
| <tr> | |
| <th class="py-3 px-4 text-left">Typical Lender</th> | |
| <th class="py-3 px-4 text-left">The Milestone Foundation</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-gray-200"> | |
| <tr> | |
| <td class="py-4 px-4">60%–120% APR</td> | |
| <td class="py-4 px-4 font-semibold">10% simple interest</td> | |
| </tr> | |
| <tr> | |
| <td class="py-4 px-4">Compounding interest</td> | |
| <td class="py-4 px-4 font-semibold">No compounding ever</td> | |
| </tr> | |
| <tr> | |
| <td class="py-4 px-4">Hidden fees</td> | |
| <td class="py-4 px-4 font-semibold">100% transparent</td> | |
| </tr> | |
| <tr> | |
| <td class="py-4 px-4">For-profit motives</td> | |
| <td class="py-4 px-4 font-semibold">Mission-driven nonprofit</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Differentiator Section --> | |
| <section class="py-16 bg-[#FAFAFA]"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto text-center mb-12"> | |
| <h2 class="text-3xl font-bold mb-4">A Safer, Smarter Way to Get Through Litigation.</h2> | |
| <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> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto"> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-[#E5B100] text-white p-2 rounded-full mr-4"> | |
| <i class="fas fa-percentage text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold">10% simple interest</h3> | |
| </div> | |
| <p>Our rates are a fraction of what predatory lenders charge, with no compounding to balloon your costs.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-[#E5B100] text-white p-2 rounded-full mr-4"> | |
| <i class="fas fa-hand-holding-usd text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold">No repayment if you lose</h3> | |
| </div> | |
| <p>We take on the risk—if your case doesn't succeed, you owe us nothing.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-[#E5B100] text-white p-2 rounded-full mr-4"> | |
| <i class="fas fa-eye text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold">No hidden fees or compounding</h3> | |
| </div> | |
| <p>What you see is what you get—no surprises that leave you with nothing after settlement.</p> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-md"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-[#E5B100] text-white p-2 rounded-full mr-4"> | |
| <i class="fas fa-award text-xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold">Endorsed by attorneys and ethics panels</h3> | |
| </div> | |
| <p>Legal professionals trust us as the ethical alternative to predatory lending.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonial Section --> | |
| <section class="py-16 bg-[#2B2D42] text-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Real People. Real Relief.</h2> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="relative"> | |
| <!-- Testimonial Carousel --> | |
| <div id="testimonial-carousel" class="overflow-hidden"> | |
| <div class="flex transition-transform duration-300 ease-in-out"> | |
| <!-- Testimonial 1 --> | |
| <div class="min-w-full"> | |
| <div class="bg-white text-[#505050] p-8 rounded-lg testimonial-card"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-gray-300 overflow-hidden mr-4"> | |
| <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"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Tanya</h4> | |
| <p class="text-sm text-gray-600">Personal Injury Plaintiff</p> | |
| </div> | |
| </div> | |
| <blockquote class="text-lg italic mb-4"> | |
| "With Milestone's help, I could finally take a breath. I wasn't forced into settling just to make rent." | |
| </blockquote> | |
| <div class="flex"> | |
| <i class="fas fa-star text-[#E5B100]"></i> | |
| <i class="fas fa-star text-[#E5B100]"></i> | |
| <i class="fas fa-star text-[#E5B100]"></i> | |
| <i class="fas fa-star text-[#E5B100]"></i> | |
| <i class="fas fa-star text-[#E5B100]"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="min-w-full"> | |
| <div class="bg-white text-[#505050] p-8 rounded-lg testimonial-card"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-gray-300 overflow-hidden mr-4"> | |
| <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"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">Marcus</h4> | |
| <p class="text-sm text-gray-600">Civil Rights Plaintiff</p> | |
| </div> | |
| </div> | |
| <blockquote class="text-lg italic mb-4"> | |
| "They didn't just fund my case—they respected my dignity." | |
| </blockquote> | |
| <div class="flex"> | |
| <i class="fas fa-star text-[#E5B100]"></i> | |
| <i class="fas fa-star text-[#E5B100]"></i> | |
| <i class="fas fa-star text-[#E5B100]"></i> | |
| <i class="fas fa-star text-[#E5B100]"></i> | |
| <i class="fas fa-star text-[#E5B100]"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Carousel Controls --> | |
| <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"> | |
| <i class="fas fa-chevron-left"></i> | |
| </button> | |
| <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"> | |
| <i class="fas fa-chevron-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Process Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Getting Help Shouldn't Be Hard.</h2> | |
| <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto"> | |
| <!-- Step 1 --> | |
| <div class="bg-[#FAFAFA] p-6 rounded-lg shadow-md process-step text-center"> | |
| <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> | |
| <h3 class="text-xl font-semibold mb-3">Apply Online</h3> | |
| <p>Takes just minutes with our simple, straightforward application.</p> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="bg-[#FAFAFA] p-6 rounded-lg shadow-md process-step text-center"> | |
| <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> | |
| <h3 class="text-xl font-semibold mb-3">Attorney Review</h3> | |
| <p>We coordinate with your legal team to understand your case.</p> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="bg-[#FAFAFA] p-6 rounded-lg shadow-md process-step text-center"> | |
| <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> | |
| <h3 class="text-xl font-semibold mb-3">Receive Funds</h3> | |
| <p>Fast and transparent funding when you need it most.</p> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <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> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- For Attorneys Section --> | |
| <section class="py-16 bg-[#2B2D42] text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto"> | |
| <h2 class="text-3xl font-bold mb-6">Your Clients Deserve Better Options.</h2> | |
| <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> | |
| <div class="flex flex-wrap gap-4"> | |
| <a href="#" class="bg-[#E5B100] hover:bg-[#d4a300] text-[#2B2D42] font-bold py-3 px-6 rounded transition">Refer a Client</a> | |
| <a href="#" class="border-2 border-white hover:bg-white hover:text-[#2B2D42] font-bold py-3 px-6 rounded transition">Attorney Resources</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Impact Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Impact in Action</h2> | |
| <div class="grid md:grid-cols-4 gap-6 max-w-6xl mx-auto"> | |
| <!-- Impact Stat 1 --> | |
| <div class="bg-[#FAFAFA] p-6 rounded-lg shadow-sm text-center impact-card"> | |
| <div class="text-4xl font-bold text-[#E5B100] mb-2" id="impact-counter-1">0</div> | |
| <p class="text-lg font-semibold">Million Advanced</p> | |
| </div> | |
| <!-- Impact Stat 2 --> | |
| <div class="bg-[#FAFAFA] p-6 rounded-lg shadow-sm text-center impact-card"> | |
| <div class="text-4xl font-bold text-[#E5B100] mb-2" id="impact-counter-2">0</div> | |
| <p class="text-lg font-semibold">Plaintiffs Supported</p> | |
| </div> | |
| <!-- Impact Stat 3 --> | |
| <div class="bg-[#FAFAFA] p-6 rounded-lg shadow-sm text-center impact-card"> | |
| <div class="text-4xl font-bold text-[#E5B100] mb-2" id="impact-counter-3">0</div> | |
| <p class="text-lg font-semibold">States Reached</p> | |
| </div> | |
| <!-- Impact Stat 4 --> | |
| <div class="bg-[#FAFAFA] p-6 rounded-lg shadow-sm text-center impact-card"> | |
| <div class="text-4xl font-bold text-[#E5B100] mb-2">0</div> | |
| <p class="text-lg font-semibold">Hidden Fees</p> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <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> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- News & Advocacy Section --> | |
| <section class="py-16 bg-[#FAFAFA]"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Fighting for a More Just System</h2> | |
| <div class="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto"> | |
| <!-- News 1 --> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md news-card"> | |
| <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"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">The Ethics of Lawsuit Loans</h3> | |
| <p class="text-gray-600 mb-4">Exploring the moral implications of high-interest legal funding.</p> | |
| <a href="#" class="text-[#E5B100] font-semibold hover:underline">Read More</a> | |
| </div> | |
| </div> | |
| <!-- News 2 --> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md news-card"> | |
| <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"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Nonprofit Legal Funding Explained</h3> | |
| <p class="text-gray-600 mb-4">How ethical alternatives are changing the landscape.</p> | |
| <a href="#" class="text-[#E5B100] font-semibold hover:underline">Read More</a> | |
| </div> | |
| </div> | |
| <!-- News 3 --> | |
| <div class="bg-white rounded-lg overflow-hidden shadow-md news-card"> | |
| <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"> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2">Milestone Wins Nonprofit of the Year</h3> | |
| <p class="text-gray-600 mb-4">Recognized for our commitment to ethical legal funding.</p> | |
| <a href="#" class="text-[#E5B100] font-semibold hover:underline">Read More</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <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> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Final CTA Section --> | |
| <section class="py-16 bg-[#2B2D42] text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Let's Fix Legal Funding—Together.</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Join us in creating a more just system for plaintiffs in need.</p> | |
| <div class="flex flex-wrap justify-center gap-4"> | |
| <a href="#" class="bg-[#E5B100] hover:bg-[#d4a300] text-[#2B2D42] font-bold py-3 px-6 rounded transition">Apply Now</a> | |
| <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> | |
| <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> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-[#2B2D42] text-white pt-12 pb-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid md:grid-cols-4 gap-8 mb-8"> | |
| <!-- Quick Links --> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Quick Links</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-[#E5B100] transition">What We Do</a></li> | |
| <li><a href="#" class="hover:text-[#E5B100] transition">How It Works</a></li> | |
| <li><a href="#" class="hover:text-[#E5B100] transition">Apply</a></li> | |
| <li><a href="#" class="hover:text-[#E5B100] transition">News & Advocacy</a></li> | |
| <li><a href="#" class="hover:text-[#E5B100] transition">Support</a></li> | |
| </ul> | |
| </div> | |
| <!-- Resources --> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Resources</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-[#E5B100] transition">FAQs</a></li> | |
| <li><a href="#" class="hover:text-[#E5B100] transition">Blog</a></li> | |
| <li><a href="#" class="hover:text-[#E5B100] transition">Legal Ethics</a></li> | |
| <li><a href="#" class="hover:text-[#E5B100] transition">Careers</a></li> | |
| <li><a href="#" class="hover:text-[#E5B100] transition">Partner With Us</a></li> | |
| </ul> | |
| </div> | |
| <!-- Contact --> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Contact Us</h3> | |
| <address class="not-italic"> | |
| <p class="mb-2">50 Fountain Plaza, Suite 1300</p> | |
| <p class="mb-2">Buffalo, NY 14202</p> | |
| <p class="mb-2">Local Phone: 716.970.7100</p> | |
| <p class="mb-2">Fax: 716.883.2124</p> | |
| <p class="mb-4"><a href="mailto:[email protected]" class="hover:text-[#E5B100] transition">[email protected]</a></p> | |
| </address> | |
| </div> | |
| <!-- Newsletter --> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Stay Updated</h3> | |
| <p class="mb-4">Subscribe to our newsletter for updates on our work and advocacy efforts.</p> | |
| <form class="flex"> | |
| <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l focus:outline-none text-gray-800 w-full"> | |
| <button type="submit" class="bg-[#E5B100] hover:bg-[#d4a300] text-[#2B2D42] font-bold px-4 py-2 rounded-r transition">Subscribe</button> | |
| </form> | |
| <div class="flex space-x-4 mt-4"> | |
| <a href="#" class="text-white hover:text-[#E5B100] transition"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-white hover:text-[#E5B100] transition"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-white hover:text-[#E5B100] transition"><i class="fab fa-linkedin-in"></i></a> | |
| <a href="#" class="text-white hover:text-[#E5B100] transition"><i class="fab fa-instagram"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 pt-6 text-center text-sm"> | |
| <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> | |
| <p class="mt-4">© 2023 The Milestone Foundation. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', () => { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Testimonial carousel | |
| const testimonialCarousel = document.getElementById('testimonial-carousel'); | |
| const prevTestimonial = document.getElementById('prev-testimonial'); | |
| const nextTestimonial = document.getElementById('next-testimonial'); | |
| let currentTestimonial = 0; | |
| const testimonials = document.querySelectorAll('#testimonial-carousel > div > div'); | |
| function showTestimonial(index) { | |
| testimonialCarousel.querySelector('div').style.transform = `translateX(-${index * 100}%)`; | |
| } | |
| prevTestimonial.addEventListener('click', () => { | |
| currentTestimonial = (currentTestimonial - 1 + testimonials.length) % testimonials.length; | |
| showTestimonial(currentTestimonial); | |
| }); | |
| nextTestimonial.addEventListener('click', () => { | |
| currentTestimonial = (currentTestimonial + 1) % testimonials.length; | |
| showTestimonial(currentTestimonial); | |
| }); | |
| // Auto-rotate testimonials | |
| setInterval(() => { | |
| currentTestimonial = (currentTestimonial + 1) % testimonials.length; | |
| showTestimonial(currentTestimonial); | |
| }, 8000); | |
| // Animated counters | |
| function animateCounter(elementId, target, duration = 2000) { | |
| const element = document.getElementById(elementId); | |
| const start = 0; | |
| const increment = target / (duration / 16); | |
| let current = start; | |
| const timer = setInterval(() => { | |
| current += increment; | |
| if (current >= target) { | |
| clearInterval(timer); | |
| current = target; | |
| } | |
| element.textContent = Math.floor(current).toLocaleString(); | |
| }, 16); | |
| } | |
| // Start counters when they come into view | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| animateCounter('impact-counter-1', 6); | |
| animateCounter('impact-counter-2', 800); | |
| animateCounter('impact-counter-3', 42); | |
| observer.unobserve(entry.target); | |
| } | |
| }); | |
| }, { threshold: 0.5 }); | |
| const impactSection = document.querySelector('#impact-counter-1').parentElement.parentElement; | |
| observer.observe(impactSection); | |
| </script> | |
| <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> | |
| </html> |