<!DOCTYPE html>
<html lang="en">
  <head>
    
    <?php include('includes/meta.php');?>
    <title>H2O | Hosting</title>
    <?php include('includes/css.php');?>
    
  </head>
  <body>
  
  <div class="site-wrap">

    <div class="site-mobile-menu">
      <div class="site-mobile-menu-header">
        <div class="site-mobile-menu-close mt-3">
          <span class="icon-close2 js-menu-toggle"></span>
        </div>
      </div>
      <div class="site-mobile-menu-body"></div>
    </div> <!-- .site-mobile-menu -->
    
    
    
  
    <?php include('includes/social.php');?>
    <!-- Header Section -->
    <?php include('layouts/navbar.php');?>
    <!-- Header Section end -->

    <div class="slide-one-item home-slider owl-carousel">

      <div class="site-blocks-cover overlay" style="background-image: url(images/hero_bg_1.jpg);" data-aos="fade" data-stellar-background-ratio="0.5">
        <div class="container">
          <div class="row align-items-center justify-content-center text-center">
            <div class="col-md-10">
              <h1 class="mb-2">Affordable Hosting</h1>
              <p class="mb-5">from R600/year</p>
              <p>
                <a href="#" class="btn btn-primary py-3 px-5 rounded-0" data-toggle="modal" data-target="#quoteModal">Request quote</a>

              </p>
            </div>
          </div>
        </div>
      </div>  

      <div class="site-blocks-cover overlay" style="background-image: url(images/hero_bg_2.jpg);" data-aos="fade" data-stellar-background-ratio="0.5">
        <div class="container">
          <div class="row align-items-center justify-content-center text-center">
            <div class="col-md-10">
              <h1 class="mb-5">24/7 Customer Support</h1>
              <p>
                <a href="#" class="btn btn-primary py-3 px-5 rounded-0" data-toggle="modal" data-target="#quoteModal">Request Quote</a>
                
              </p>
            </div>
          </div>
        </div>
      </div>  
    </div>

  <?php
	
      spl_autoload_register(function($class) {
        include 'classes/' . $class . '.php';
      });
      
      $emails = new Emailpro();


      if(isset($_POST['send'])){

        $details = [
          "names"     => $_POST['fn']." ".$_POST['sn'],
          "email"     => $_POST['email'],
          "phone"     => $_POST['phone'],
          "service" => $_POST['service'],
          "descr"  	=> $_POST['descr'],
          "subject"   => "Request for a quote"
        ];

        $res = $emails->getQuote($details);
      
        if($res){
          ?>
          <script>
            Swal.fire(
              'Request Sent!',
              'Thank you for emailing us , we will respond soon!',
              'success'
              )
          </script>
          <?php
        }else{
          ?>
          <script>
            Swal.fire(
              'Failed to send request!',
              'Sorry we could not send your request , please try again!',
              'error'
              )
          </script>
          <?php
        }

      }
	?>

    <div class="site-section bg-light">
      <div class="container">
        <div class="row justify-content-center text-center mb-5">
          <div class="col-md-6" data-aos="fade">
            <h2>Different hosting packages to suit every need!</h2>
          </div>
        </div>
        <div class="row hosting">
          <div class="col-md-6 col-lg-4 mb-5 mb-lg-0" data-aos="fade" data-aos-delay="100">

            <div class="unit-2 text-center border py-5 h-100 bg-white">
              <span class="icon fl-bigmug-line-paper122 text-primary"></span>
              <h3 class="h4 text-black">Starter Hosting</h3>
              <p class="mb-4 text-gray-500">Plans start at R60/month</p>
              <!-- <p><a href="#" class="btn btn-primary py-2 px-4 rounded-0">View Details</a></p> -->
            </div>

          </div>
          <div class="col-md-6 col-lg-4 mb-5 mb-lg-0" data-aos="fade" data-aos-delay="200">
            
            <div class="unit-2 text-center border py-5 h-100 bg-white">
              <span class="icon fl-bigmug-line-airplane86 text-primary"></span>
              <h3 class="h4 text-black">Pro (SME) Hosting</h3>
              <p class="mb-4 text-gray-500">Plans start at R120/month</p>
              <!-- <p><a href="#" class="btn btn-primary py-2 px-4 rounded-0">View Details</a></p> -->
            </div>

          </div>
          <div class="col-md-6 col-lg-4 mb-5 mb-lg-0" data-aos="fade" data-aos-delay="300">
            
            <div class="unit-2 text-center border py-5 h-100 bg-white">
              <span class="icon fl-bigmug-line-hot67 text-primary"></span>
              <h3 class="h4 text-black">Pro (Corp) Hosting</h3>
              <p class="mb-4 text-gray-500">Contact us</p>
              <!-- <p><a href="#" class="btn btn-primary py-2 px-4 rounded-0">View Details</a></p> -->
            </div>

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

    <div class="site-blocks-cover overlay" style="background-image: url(images/hero_bg_3.jpg);" data-aos="fade" data-stellar-background-ratio="0.5">
        <div class="container">
          <div class="row align-items-center text-left">
            <div class="col-md-7">
              <h1 class="mb-2">Satisfied Clients</h1>
              <p class="mb-5">We are rated 4.99 / 5.00 (based on 44 Reviews)</p>
              <!-- <p>
                <a href="#" class="btn btn-primary py-3 px-5 rounded-0">Register Now</a>
              </p> -->
            </div>
          </div>
        </div>
      </div>  

    <div class="site-section">
      <div class="container">
        <div class="row justify-content-center text-center mb-5">
          <div class="col-md-6" data-aos="fade" >
            <h2>Why Choose Us</h2>
          </div>
        </div>
        <div class="row hosting">
          <div class="col-md-6 col-lg-4 mb-5 mb-lg-4" data-aos="fade" data-aos-delay="100">

            <div class="unit-3 h-100 bg-white">
              
              <div class="d-flex align-items-center mb-3 unit-3-heading">
                <div class="unit-3-icon-wrap mr-4">
                  <svg class="unit-3-svg" xmlns="http://www.w3.org/2000/svg" width="59px" height="68px">
                    <path fill-rule="evenodd" stroke-width="2px" stroke-linecap="butt" stroke-linejoin="miter" fill="none" d="M29.000,66.000 L1.012,49.750 L1.012,17.250 L29.000,1.000 L56.988,17.250 L56.988,49.750 L29.000,66.000 Z"></path>
                  </svg><span class="unit-3-icon icon fl-bigmug-line-equalization3"></span>
                </div>
                <h2 class="h5">High Quality Hardware</h2>
              </div>
              <div class="unit-3-body">
                <p>
                  We host websites on massive ever running servers which are scalable and always perform at the best of speeds giving your visitors a good website experience.
                </p>
              </div>
            </div>

          </div>
          <div class="col-md-6 col-lg-4 mb-5 mb-lg-4" data-aos="fade" data-aos-delay="200">
            
            <div class="unit-3 h-100 bg-white">
              
              <div class="d-flex align-items-center mb-3 unit-3-heading">
                <div class="unit-3-icon-wrap mr-4">
                  <svg class="unit-3-svg" xmlns="http://www.w3.org/2000/svg" width="59px" height="68px">
                    <path fill-rule="evenodd" stroke-width="2px" stroke-linecap="butt" stroke-linejoin="miter" fill="none" d="M29.000,66.000 L1.012,49.750 L1.012,17.250 L29.000,1.000 L56.988,17.250 L56.988,49.750 L29.000,66.000 Z"></path>
                  </svg><span class="unit-3-icon icon fl-bigmug-line-cube29"></span>
                </div>
                <h2 class="h5">Top Data Centers</h2>
              </div>
              <div class="unit-3-body">
                <p>
                  We use the best data centers located here in South Africa. We always make sure your data is stored in a secure environment.
                </p>
              </div>
            </div>

          </div>
          <div class="col-md-6 col-lg-4 mb-5 mb-lg-4" data-aos="fade" data-aos-delay="300">
            
            <div class="unit-3 h-100 bg-white">
              
              <div class="d-flex align-items-center mb-3 unit-3-heading">
                <div class="unit-3-icon-wrap mr-4">
                  <svg class="unit-3-svg" xmlns="http://www.w3.org/2000/svg" width="59px" height="68px">
                    <path fill-rule="evenodd" stroke-width="2px" stroke-linecap="butt" stroke-linejoin="miter" fill="none" d="M29.000,66.000 L1.012,49.750 L1.012,17.250 L29.000,1.000 L56.988,17.250 L56.988,49.750 L29.000,66.000 Z"></path>
                  </svg><span class="unit-3-icon icon fl-bigmug-line-airplane86"></span>
                </div>
                <h2 class="h5">Outstanding Speed</h2>
              </div>
              <div class="unit-3-body">
                <p>
                  Our massive hosting servers are continously monitored to ensure that they alway perform with high efficiency allowing your websites to load faster.
                </p>
              </div>
            </div>

          </div>

          <div class="col-md-6 col-lg-4 mb-5 mb-lg-4" data-aos="fade" data-aos-delay="400">

            <div class="unit-3 h-100 bg-white">
              
              <div class="d-flex align-items-center mb-3 unit-3-heading">
                <div class="unit-3-icon-wrap mr-4">
                  <svg class="unit-3-svg" xmlns="http://www.w3.org/2000/svg" width="59px" height="68px">
                    <path fill-rule="evenodd" stroke-width="2px" stroke-linecap="butt" stroke-linejoin="miter" fill="none" d="M29.000,66.000 L1.012,49.750 L1.012,17.250 L29.000,1.000 L56.988,17.250 L56.988,49.750 L29.000,66.000 Z"></path>
                  </svg><span class="unit-3-icon icon fl-bigmug-line-hot67"></span>
                </div>
                <h2 class="h5">Amazing Uptime</h2>
              </div>
              <div class="unit-3-body">
                <p>
                  Never experience a down time with our topnotch servers. We always ensure that our clients get the service they pay for.
                </p>
              </div>
            </div>

          </div>
          <div class="col-md-6 col-lg-4 mb-5 mb-lg-4" data-aos="fade" data-aos-delay="500">
            
            <div class="unit-3 h-100 bg-white">
              
              <div class="d-flex align-items-center mb-3 unit-3-heading">
                <div class="unit-3-icon-wrap mr-4">
                  <svg class="unit-3-svg" xmlns="http://www.w3.org/2000/svg" width="59px" height="68px">
                    <path fill-rule="evenodd" stroke-width="2px" stroke-linecap="butt" stroke-linejoin="miter" fill="none" d="M29.000,66.000 L1.012,49.750 L1.012,17.250 L29.000,1.000 L56.988,17.250 L56.988,49.750 L29.000,66.000 Z"></path>
                  </svg><span class="unit-3-icon icon fl-bigmug-line-headphones32"></span>
                </div>
                <h2 class="h5">Best Support</h2>
              </div>
              <div class="unit-3-body">
                <p>Our technical team works 24 hours a day to ensure that all our customers are attended to in the shortest period of time</p>
              </div>
            </div>

          </div>
          <div class="col-md-6 col-lg-4 mb-5 mb-lg-4" data-aos="fade" data-aos-delay="600">
            
            <div class="unit-3 h-100 bg-white">
              
              <div class="d-flex align-items-center mb-3 unit-3-heading">
                <div class="unit-3-icon-wrap mr-4">
                  <svg class="unit-3-svg" xmlns="http://www.w3.org/2000/svg" width="59px" height="68px">
                    <path fill-rule="evenodd" stroke-width="2px" stroke-linecap="butt" stroke-linejoin="miter" fill="none" d="M29.000,66.000 L1.012,49.750 L1.012,17.250 L29.000,1.000 L56.988,17.250 L56.988,49.750 L29.000,66.000 Z"></path>
                  </svg><span class="unit-3-icon icon fl-bigmug-line-user143"></span>
                </div>
                <h2 class="h5">Client Reviews</h2>
              </div>
              <div class="unit-3-body">
                <p>We value the feedback we get from our clients and we make sure we continously provide services they love hence we have good reviews about our platform.</p>
              </div>
            </div>

          </div>

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

    <div class="site-section block-4 bg-light">

      <div class="container">

        <div class="row justify-content-center text-center mb-5">
          <div class="col-md-6" data-aos="fade" >
            <h2>Testimonials</h2>
          </div>
        </div>

        <div class="nonloop-block-4 owl-carousel" data-aos="fade">
          <div class="item col-md-6 mx-auto">
            
            <div class="block-38 text-center">
              <div class="block-38-img">
                <div class="block-38-header"> 
                  <img src="images/person_1.jpg" alt="Image placeholder">
                  <h3 class="block-38-heading">James Nkosana</h3>
                  <p class="block-38-subheading">Creative Director, LE Technologies</p>
                </div>
                <div class="block-38-body">
                  <p>I bet you guys are the cheapest and most affordable web company in South Africa </p>
                </div>
              </div>
            </div>

          </div>
          <div class="item col-md-6 mx-auto">
            <div class="block-38 text-center">
              <div class="block-38-img">
                <div class="block-38-header">
                  <img src="images/person_1.jpg" alt="Image placeholder">
                  <h3 class="block-38-heading">Blessing Moyo</h3>
                  <p class="block-38-subheading">Lead Designer, Aplistream Designs</p>
                </div>
                <div class="block-38-body">
                  <p>Im totally satisfied with the work you have done you guys i greatly appreciate </p>
                </div>
              </div>
            </div>
          </div>

          <div class="item col-md-6 mx-auto">
            
            <div class="block-38 text-center">
              <div class="block-38-img">
                <div class="block-38-header"> 
                  <img src="images/person_1.jpg" alt="Image placeholder">
                  <h3 class="block-38-heading">Spiwe Nkosana</h3>
                  <p class="block-38-subheading">Fashion Designer</p>
                </div>
                <div class="block-38-body">
                  <p>Im totally impressed by your service , i really love the support you give to SMEs </p>
                </div>
              </div>
            </div>

          </div>
          <div class="item col-md-6 mx-auto">
            <div class="block-38 text-center">
              <div class="block-38-img">
                <div class="block-38-header">
                  <img src="images/person_1.jpg" alt="Image placeholder">
                  <h3 class="block-38-heading">Jennifer Greive</h3>
                  <p class="block-38-subheading">Marketer</p>
                </div>
                <div class="block-38-body">
                  <p>Your service is simply the best you guys keep up the good work. </p>
                </div>
              </div>
            </div>
          </div>

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

    <!-- Modal -->
	<div class="modal fade" id="quoteModal" tabindex="-1" role="dialog" aria-labelledby="quoteModal" aria-hidden="true">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
		<div class="modal-header" style="background-color:#ff6600;">
			<h5 class="modal-title" style="color:#fff">H2O Hosting</h5>
			<button type="button" class="close" data-dismiss="modal" aria-label="Close">
			<span aria-hidden="true">&times;</span>
			</button>
		</div>
		<form action="index.php" method="POST">
			<div class="modal-body">
				<div class="row">
				<div class="col-md-6 form-group">
					<label for="">Firstname</label>
					<input type="text" class="form-control" name="fn" required>
				</div>
				<div class="col-md-6 form-group">
					<label for="">Lastname</label>
					<input type="text" class="form-control" name="sn" required>
				</div>
				</div>
				<div class="row">
					<div class="col-md-6 form-group">
						<label for="">Phone number</label>
						<br/><span id="alert-span"></span>
						<input type="text" class="form-control" id="phone" name="phone" oninput="phoneValidate()" required>
					</div>
					<div class="col-md-6 form-group">
						<label for="">Email</label>
						<input type="email" class="form-control" name="email" required>
					</div>
				</div>
				<hr/>
				<div class="form-group">
					<label for="">Select service</label>
					<select class="form-control" id="phone" name="service"  required>
						<option value="">Select option :</option>
						<option value="web development">Website development</option>
						<option value="web and hosting">Web and hosting</option>
						<option value="other">Other IT service</option>
					</select>
				</div>
				
				<div class="form-group">
					<label for="">Description of what you would want us to do for you</label>
					<textarea class="form-control" name="descr" required></textarea>
				</div>
				
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
				<button type="submit" class="btn btn-primary" name="send"  style="background-color:#ff6600;">Submit Details</button>
			</div>
		</form>
		</div>
	</div>
	</div>
  <!-- Modal end -->
  
    <!-- Header Section -->
    <?php include('layouts/footer.php');?>
    <!-- Header Section end -->

  </div>

  <?php include('includes/js.php');?>
  <script>
		function phoneValidate(){
			var spanAlert = document.getElementById('alert-span');
			var pnumber = document.getElementById('phone').value;
		
			var trimmed = pnumber.replace(/\s/g, '');
			var regex = /^0(6|7|8){1}[0-9]{1}[0-9]{7}$/;
			if (regex.test(trimmed) === true) {
				spanAlert.className = "span-success";
				spanAlert.innerHTML = "";  
				// this.enableButton(btnId);
			}else{
				spanAlert.className = "span-danger";
				spanAlert.innerHTML = "Phone number is not a valid SA number";
				
			}
		}
	</script>
  </body>
</html>