@extends('layouts.app')

@section('title', 'Our Funds - Mikey Network')

@section('content')
    <div class="banner-container position-relative text-center text-white">
        <!-- Banner Image -->
        <img src="{{ asset('images/page-banners/our_funds_banner.png') }}" class="img-fluid w-100" alt="Our Funds Banner">

        <!-- Title at Bottom of Banner -->
        {{-- <div class="position-absolute bottom-0 start-50 translate-middle-x mb-4">
        <h1 class="display-5 fw-bold text-uppercase">Start Your Fund Campaign</h1>
    </div> --}}
    </div>

    <section class="py-3">
  <div class="container text-center">
    <h1 class="ubuntu-sans-400 font-64" style="color: #7d7d7d; font-weight: 500;">
      You Can Start A <span style="color: #EA3B2D; font-weight: 700;">Fund</span> That Sparks Change
    </h1>
  </div>
</section>


    <section class="py-5 bg-white">
  <div class="container" style="max-width: 1140px;">
    <div class="d-flex flex-column flex-md-row align-items-center">

      <!-- Text Content -->
      <div class="pe-md-5 mb-4 mb-md-0" style="flex: 1;">
        <p class="font-roboto-light font-16 line-1-5 mb-0" style="color: #000;">
          Creating a fund is a powerful way for you to honour someone you love—whether it’s a family member, a dear friend, 
          or a colleague who left a lasting mark. It’s more than a tribute—it’s a living legacy. One that brings people together 
          to support causes that truly matter, turning grief into generosity, and memory into meaningful action.
          Strengthen your community through giving and creating a legacy for someone that was important to you. Every donation fuels 
          impact—whether it helps fund lifesaving equipment, supports education, or strengthens community programs.
        </p>
      </div>

      <!-- Illustration -->
      <div style="flex: 1; text-align: center;">
        <img src="/images/fund-1.png" alt="Memory Fund Illustration" style="max-width: 100%; height: auto;">
      </div>

    </div>
  </div>
</section>

<section class="py-5 bg-white">
  <div class="container" style="max-width: 1140px;">
    <div class="d-flex flex-column flex-md-row align-items-center">

      <!-- Illustration -->
      <div style="flex: 1; text-align: center;" class="mb-4 mb-md-0 pe-md-5">
        <img src="/images/fund-2.png" alt="Let Us Help You Illustration" style="max-width: 100%; height: auto;">
      </div>

      <!-- Text Content -->
      <div style="flex: 1;">
        <h3 class="ubuntu-sans-600 font-32 text-uppercase letter-space-0.5 mb-3" style="line-height: 1.4;">Let Us Help You!</h3>
        <p class="font-roboto-light font-16 line-1-5 mb-3" style="color: #000;">
          We can help you with this. Our Fund Assistants will organize all the design and technical details for you. 
          Once you complete the contact information below, an Assistant will call you to review what’s important for you on your Fund page. 
          The Fund page will be designed and sent to you for review. Once you have approved the page, we will post it on the Mikey website 
          and send you a link so that you can begin fundraising. This is an easy process and we will help you every step of the way.
        </p>
        <p class="font-roboto-light font-16 line-1-5 mb-0" style="color: #000;">
          You can include a link to your fundraising page in your email signature, text messages, emails to your friends, 
          family and community, etc. There are so many ways to promote your fund through social media and through events. 
          Your fund page can include a Share button that will allow you and anyone who visits your page to spread the word too.
        </p>
      </div>

    </div>
  </div>
</section>

<div style="position: relative; z-index: 1;">

  <!-- Flower Image -->
  <img src="/images/fund-3.png" alt="Flower Illustration"
       style="position: absolute; top: 40px; right: 140px; max-width: 420px; height: auto; z-index: 2; pointer-events: none;">

  <!-- SECTION 1: Top Text & Button -->
  <section class="py-5 bg-white" style="position: relative; z-index: 1;">
    <div class="container" style="max-width: 1240px;">
      <div class="row">
        <div class="col-md-7">
          <p class="font-roboto-light font-16 line-1-5 mb-4" style="color: #000;">
            If you would like The Mikey Network to post your fund on our social media, we would be delighted to do this. 
            We will make this post sharable so you can share on your socials too.
            <br><br>
            We are here to help make your fund a success and to help honour your loved one.
          </p>
          <a href="#" class="btn-learn-more" style="background-color: #C83B30; color: #fff; text-transform: uppercase; padding: 0.5rem 2rem; border: none; display: inline-block; text-decoration: none; font-family: 'Ubuntu Sans', sans-serif; font-weight: 600; font-size: 14px;">FIND AN EXISTING FUND</a>
        </div>
      </div>
    </div>
  </section>

  <!-- SECTION 2: Form Section -->
  <section class="py-5" style="background-color: #EFD6C2; position: relative; z-index: 1;">
    <div class="container" style="max-width: 1280px;"> <!-- Increased to 1280px -->
      <div class="row">
        <div class="col-lg-8 col-md-10">
          <h2 class="ubuntu-sans-600 font-32 mb-3" style="text-transform: uppercase;">We’ll Help You Every Step of the Way</h2>

          <p class="font-roboto-light font-16 line-1-5 mb-4">
            At The Mikey Network, we make it simple to get started. Just fill out the form below, and we’ll create a beautiful, personalized donation 
            page in honour of your loved one. It will be easy to share, simple to use, and designed with care—so you can focus on what really 
            matters: making a difference. We take care of all the details, so your fund is ready to inspire support and change lives.  
            One form. One link. A legacy that lives on.
          </p>

          <h4 class="font-roboto-semibold font-24 mb-3">Your Contact Information</h4>

          <form>
            <div class="row mb-3">
              <div class="col-md-6 mb-3 mb-md-0">
                <input type="text" class="form-control" style="border-radius: 0;" placeholder="First Name*" required>
              </div>
              <div class="col-md-6">
                <input type="text" class="form-control" style="border-radius: 0;" placeholder="Last Name*" required>
              </div>
            </div>
            <div class="row mb-4">
              <div class="col-md-6 mb-3 mb-md-0">
                <input type="email" class="form-control" style="border-radius: 0;" placeholder="Email*" required>
              </div>
              <div class="col-md-6">
                <input type="text" class="form-control" style="border-radius: 0;" placeholder="Phone Number*" required>
              </div>
            </div>
            <button type="submit" style="background-color: #C83B30; color: #fff; text-transform: uppercase; padding: 0.5rem 2rem; border: none; display: inline-block; text-decoration: none; font-family: 'Ubuntu Sans', sans-serif; font-weight: 600; font-size: 14px;">SUBMIT TO CREATE A FUND</button>
          </form>
        </div>
      </div>
    </div>
  </section>

</div>






@endsection