---
layout: default
---
<div id="particles-js"></div>
    <div class="head-intro position-relative overflow-hidden p-3 p-md-5 text-center">
	    <div class="row h-100">
      <div class="col-md-8 p-lg-8 mx-auto my-auto">
	      <h1 class="display-4 font-weight-light title-text">{{ site.title }}</h1>
	      <span class="lead font-weight-normal" id="typed"></span>
	<!-- [> <a class="btn btn-outline-secondary" href="#">Coming soon</a> <] -->
		  <!-- <a href="{{ site.baseurl }}/docs/" class="btn btn-lg btn-secondary">Get started</a> -->
<div class="col-md-8 col-lg-8 mx-auto my-5">
		  <a href="{{ site.baseurl }}/docs/get_started/" class="btn btn-light bg-white">Get started</a>
		  </div>
      </div>
      </div>
    </div>


    <div class="home-section bg-white">
	    <div class="container">

		    <div class="row">
			    <div class="col">
				    <h2 class="mb-4">Features</h2>
			    </div>
		    </div>
		    <div class="row">
			    {% for feature in site.data.features %}
			    <div class="col-lg-4 col-md-6">
				    <i class="{{feature.icon}} fa-2x my-3"></i>
				    <h5 class="mb-1">{{feature.title}}</h5>
				    <p class="mb-2">{{feature.description}}</p>
			    </div><!-- /.col-lg-4 -->
			    {% endfor %}
		    </div>

		    <hr class="featurette-divider">

		    <div class="row featurette">
			    <div class="col-md-4">
				    <h2 class="featurette-heading">OSQP beats most QP solvers.</h2>
				    <p class="lead">We benchmarked OSQP against problems from many different classes, applications and scalings. OSQP beats most available commercial and academic solvers.</p>
			    </div>
			    <div class="col-md-8">
				    <a href="https://github.com/osqp/osqp_benchmarks"> <img class="img-fluid mx-auto" src="{{ site.baseurl }}/assets/images/benchmarks/performance_profiles.jpg" alt="Performance Profiles"> </a>
			    </div>
		    </div>

		    <hr class="featurette-divider mb-3">

		    <!-- <div class="row"> -->
		    <!--         <div class="col"> -->
		    <!--                 <h2 class="mb-5">Users</h2> -->
		    <!--         </div> -->
		    <!--         </div> -->
		    <div class="row slider">

			    {% for user in site.data.users %}
			    <div class="slider_block">
				    <img src="{{ site.baseurl }}/assets/images/users/{{ user.logo }}" alt="{{ user.name }}">
			    </div>
			    {% endfor %}
		    </div>

		    <hr class="featurette-divider mt-3">

		    <div class="row">
			    <div class="col">
				    <h2 class="mb-5">Credits</h2>
			    </div>
		    </div>
		    <div class="row">
			    {% for contributor in site.data.credits %}
			    <div class="col-lg-4 col-md-6">
				    {% if contributor.website %} <a href="{{contributor.website}}">{% endif %}
					    <img class="rounded-circle mb-2" src="{{ site.baseurl }}/assets/images/credits/{{ contributor.name | downcase | replace: ' ', '_'}}.jpg" alt="{{ contributor.name }}" width="140" height="140">
					    {% if contributor.website %} </a> {% endif %}
				    <h5 class="mb-1">{{contributor.name}}</h5>
				    <p class="my-1">{{contributor.role}}</p>
				    {% if contributor.affiliation %} <p class="mb-5"><b>{{contributor.affiliation}}</b></p>{% endif %}
			    </div><!-- /.col-lg-4 -->
			    {% endfor %}
		    </div>
		    <div class="row">
			    <div class="col my-5">
				    And many others...
			    </div>
		    </div>





	    </div>
    </div>