<?php
include "../spar/class/classip.php";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
<meta name="description" content="Page description here">
</head>


<body style"margin:0;">
 <style>
    body {font-family: Arial, Helvetica, sans-serif;}
    form {border: 3px solid #f1f1f1;}

    input[type=text], input[type=password] {
        width: 100%;
        padding: 12px 20px;
        margin: 30px 0;
        display: inline-block;
        border: 1px solid #ccc;
        box-sizing: border-box;

    }

    button {
        background-color: #4292c6;
        color: white;
        padding: 10px 5px;
        margin: 0px 0;
        border: none;
        cursor: pointer;
        width: 12vw;
        boarder-radius: 5px;
    }

    button:hover {
        opacity: 0.8;
    }

    .cancelbtn {
        width: auto;
        padding: 10px 18px;
        background-color: #f44336;
    }

    .imgcontainer {
        text-align: center;
        text-align: Left;
        margin: 24px 0 12px 0;
    }

    img.avatar {
        width: 40%;
        border-radius: 50%;
    }

    .container {
        padding: 16px;
    }

    span.psw {
        float: right;
        padding-top: 16px;
    }

    .cmp-backgroundmedia__overlay {
        bottom: 0;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 20
    }

    /* Change styles for span and cancel button on extra small screens */
    @media screen and (max-width: 300px) {
        span.psw {
            display: block;
            float: none;
        }
        .cancelbtn {
            width: 100%;
        }
    }

    /* Centered text */
    .centered {
        position: absolute;
        top: 50%;
        left: 20%;
        transform: translate(-50%, -50%);
        font-colour: white;
    }

    .spacing {
        display: flex;
        align-items: center;
        width: 95%;
        justify-content: space-evenly;
        padding: 2vw;
    }

    .column {
        float: left;
        width: 50%;
        padding: 0;
    }

    .column2 {
        float: left;
        width: 10%;
        padding: 50px;

    }

    .column3 {
        float: right;
        width: 10%;
        padding: 50px;

    }

    //* Clear floats after the columns */
    .row:after {
        content: "";
        display: table;
        clear: both;
    }

    table, th, td {
        display: flex;
        align-items: center;
    }

    .repair-table {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-top: 30px;
     }

     jj {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }

  </style>
    <nav style="display:flex;flex-direction: row;justify-content: space-between;margin: 5px;align-items: center;">
        <div class="nav-brand"><img style="width:100%;" src="images/logobmw.svg" width="5vm"></div>
        <ul class="nav-links" style="display:flex; justify-content:space -evenly;list-style:none;">
            <li style="margin: 0px 10px;"><a href="/" style="text-decoration: none; color: black;">Proactive Care</a></li>
            <li style="margin: 0px 10px;"><a href="/about" style="text-decoration: none; color: black;">Motorplan</a></li>
            <li style="margin: 0px 10px;"><a href="/services" style="text-decoration: none; color: black;">Road Assitance</a></li>
            <li style="margin: 0px 10px;"><a href="/contact" style="text-decoration: none; color: black;">Value Service</a></li>
            <li style="margin: 0px 10px;"><a href="/contact"style="text-decoration: none; color: black;" >Repairs & Care</a></li>
            <li style="margin: 0px 10px;"><a href="/contact" style="text-decoration: none; color: black;">Warrenty & Cover</a></li>
        </ul>
             
             <button class="jj" type="button" width="50%"><a href="createuser/createuser.php">Login</a></button>
    </nav>

 <div>
   <div>
      <div>
            <img
            src="images/bmwladymantree.webp"
            alt="BMW Service"
            width="3000"
            height="null"
            loading="lazy"
            style="max-width:100%;height:auto;display:block;margin:0;">
      </div>
            <div class="centered" >
                <h1 color:"white">BMW Service</h1>
                <h3 color:"white"> Relax We care.</h3>
                <button type="button" width="50%">Book a Service</button>   <button type="button" width="50%">Find your BMW Service Partner</button>;
            </div>
        </div>
 </div>

  <!-- Proactive Care -->
  <div>
       <div>
           <p align="center">
             Count on your BMW Service Partner to keep you confidently on the<br> road. With our personalised offers and our Proactive Care<br> commitment, we guarantee your BMW receives the precise<br> maintenance, repair, or service it needs. Rest assured, you're <br>always in excellent hands.
           </p>
       </div>

       <div>
          <h2 align="center">Your benefits at a glance</h2>
          <ul align="center" class="spacing">
               <div > 
                    <p>
                     <img src="images/workshop.png" width="50" height="50">
                     <br>
                     Proactive
                    </p>
                </div>
                <div>
                   <img src="images/thumbs-up.png" width="50" height="50">
                   <br>
                    Quality and expertise
                </div>
                
                <div>
                    <img src="images/building.png" width="50" height="50">
                    <br>
                    Large service network
                </div>
                <div>
                    <img src="images/spare-parts.png" width="50" height="50">
                    <br>
                    Original BMW Parts
                </div>
                <div>
                    <img src="images/maintenance.png" width="50" height="50">
                    <br>
                    Comprehensive service offering
                </div>
          </ul>
        </div>
        
      <div>
           <h2 align="center"> Our serivce pledge to you. </h2>
           <h3 align="center"> BMW Service with Proactive Care </h3>
           <p align="center">
             BMW Service with Proactive Care, you receive proactive support in every situation. Whether in the event of<br> an error message in the vehicle, the next due service appointment, a breakdown or an accident. We offer<br>you the ideal solution for your BMW. Lean back and enjoy the benefits of BMW Service with Proactive Care.<br>
           </p>
      </div>

      <div class="spacing">
            <div>
                <img style="width: 30vw;" width="100"  loading="lazy" style="width:100%;height:auto;display:block;" src="images/bmw4seriesred.webp">
                <p>
                    Getting in touch.
                    <br>
                    We will proactively contact you through the My <br>BMWApp, by email or directly in your vehicle. In urgent<br>cases, we will call you.
                </p>
            </div>
            <div>
                <img style="width: 30vw;"width="100"  loading="lazy" style="width:100%;height:auto;display:block;" src="images/manstandingnearpool.webp">
                <p>
                    Service Appointment.
                    <br>
                    We propse convient dates for your<br>service. You choose the best time to vist<br> and book easily online or with your BMW<br> Service Partner.
                </p>
            </div>
            <div>
                <img style="width: 30vw; media="(min-width: 0px) and (max-width: 767px)" type="image/webp" width="767" height="null" src="images/mandogpoolsit.webp">
                <p>
                  Status.
                  <br>
                  You've dropped your car off at the dealer? We'll keep<br> you updated on how the service is proogressing and<br> the cost involved.
                </p>
            </div>
     </div>
      <div style="display:flex;align:center">
            <div style='display: flex; flex-direction: row;'>
            <img style="width:51vw;margin:5%;" src="images/whiteladyyellowcase.webp" >
      </div>

      <div style= "padding: 3vw;">
            <h3 align="center"> What you need for Proactive Care.</h3>
            <h4 align="center">BMW Service with Proactive Care.</h4>
            <p>
                <ul>
                    <li>An active BMW ConnectedDrive account for your BMW</li>
                    <li>A vehicle assigned to your BMW ID, either in the My BMW<br> App or on the My BMW portal</li>
                    <li>Your personal data registered under your BMW ID, with<br> your current phone number, email address, and preferred<br> BMW Service Partner</li>
                </ul>
            </p>
            <p>
             Please consent to our Privacy Policy and agree to receive <br>communications from the BMW South Africa or your<br> preferred BMW  Retailer. For even smoother interactions,<br> enable push notifications in the My BMW App.
            </p>
            <a herf url="link"> Owners Cirle</a><br>
            <a herf url="link"> Download app</a><br>
        </div>
    </div>
    

  <!-- Value Service -->
  <div class="row">
        <div >
            <h1 align="center"> BMW On-Call/ Roadside Assistance. </h1>
            <p align="center">
             We are here for you when it counts. From a flat tyre to an accident, BMW Roadside and Accident Assistance<br> gets you back on track quickly.
            </p>
            <br>
        </div>
            <div class="column" align="center" >
                <h3>Immediate assistance over the phone.</h3>
                <p> Call our specialists for 24/7 assistance, 365 days a year.</p>
                <p> 0800 600 777 / 012 5222 930 </p>
                <p> Get back on the road quickly and reliably.</p>
            </div>
            <div class="column">
             <img src="images/roadassitanceredtriangle.webp"  style='width: 51vw;float:right;margin: 5%'>
            </div>
  </div>

  <div>
        <h1>BMW on Call Packages.</h1>
        <h3>Extend your access to BMW On Call with a BMW On Call package whether you’re out of Motorplan or have an optional<br> Motorplan contract.</h3>
        <section>
            <p>
            Should you opt to extend your Motorplan peace-of-mind with the purchase on an optional Motorplan contract, you have the option to add BMW On Call. You also<br> have access to BMW On Call even after your Motorplan expires with the option to purchase a standalone BMW On Call Package at your preferred BMW Retailer.
            </p>
        </section>
           <div class="row">
                <div>
                    <img src="images/bmwpackagesphonehand.webp" style='width: 51vw;float:left;margin: 5%'>
                </div>
           </div>
  </div>
  <div>
      <div>
            <table align="left">
                <tr>
                 <th>Term</th>
                </tr>
                <tr>
                    <td>12 months</td>
                    <td>24 monhts</td>
                    <td>36 months</td>
                </tr>
            </table>
        </div>
        <div>
            <table align="right" >
                <tr>
                <th>Priced from*<th>
                <tr>
                    <td>R 1003</td>
                    <td>R 2008</td>
                    <td>R 3012</td>
                <tr>
            </table>
        </div>
  </div>
  <div style="display:flex;flex-direction: row;width: 100%;">
     <p>
         Please note: Prices subject to change. Please get in touch with your preferred BMW retailer to enquire further.
     </p>
  </div>

  <div class="spacing">
        <div>
         <img style="width: 40vw;" width="200"  loading="lazy" style="width:100%;height:auto;display:block;" src="images/green5serieslady.webp">
       
            <p>
             Explore other ways to connect with us.
              <br>
                 If you activate Proactive Care, we will contact you immediately in the event of an<br>accident. If your vehicle breaks down, reaxch out to us using the emergency<br> button in your BMW or the My BMW App. For your convience, we receive all<br> vehicle data instaantly, so that we can assit you quickly and easiley.
             </p>
        </div>
        <div>
         <img style="width: 40vw;"width="100"  loading="lazy" style="width:100%;height:auto;display:block;" src="images/greenbmw.webp">
         
            <p>
                Roadside or remote assitance
                <br>
                If our experts can't resolve the issue remotely, we are there for you on site. We<br> dispatch a BMW Service Mobile or towing sevice immediatly. If necessary, we<br> arrange a taxi, flight or hote; for you.
            </p>
        </div>
  </div>
  <div>
        <div>
            <h1 align="center">BMW Value Service.</h1>
            <p align="center">
             Need attractive service rates for BMW 5yrs+? Discover an attractive service offering for your BMW. From<br> brakes to oil changes to an air or microfilter replacement with a discount of up to 20%. Original BMW Parts<br> and expert knowledge included.
            </p>
        </div>
        <div>
          <div class="spacing">
                <div>
                 <img style="width: 30vw;" width="200"  loading="lazy" style="width:100%;height:auto;display:block;" src="images/windscreencar.webp">
                 <p>
                     BMW Windsreen repairs.
                     <br>
                      A small stone can have a big impact. Our experts<br>
                      quickly and easily handle any stone chip in your<br>
                      windscreen to prevent it from becoming a crack.<br>
                      Whether you need a repair or a replacement, we<br>
                      provide the best solution for your BMW.
                 </p>
                </div>
                <div>
                 <img style="width: 30vw;"width="100"  loading="lazy" style="width:100%;height:auto;display:block;" src="images/bumperbmw.webp">
                  <p>
                     BMW Adident repairs.
                     <br>
                     Even after an accident that causes complex<br> damage
                     to the body, paintwork, on-board <br>electronics or
                     safety systems, our experts <br>will repair your vehicle
                     quickly and<br> professionally using state-of-the-art<br>
                     technology and Original BMW Parts.
                   </p>
                </div>
                <div>
                 <img style="width: 30vw; media="(min-width: 0px) and (max-width: 767px)" type="image/webp" width="767" height="null" src="images/hoodcleaning.webp">

                  <p>
                     BMW cosmatic repairs.
                     <br>
                       Does your BMW have a small scratch in the<br>
                       paintwork or a tear in the upholstery? Our specialists<br>
                       and their innovative repair technologies remove<br>
                       minor blemishes without a trace.<br>
                   </p>
                </div>
          </div>
        </div>

    </div>

  </div>
</body>
</html>
