Collaborative tools to design user experience
For everyone, from beginners to experts.
<!-- Hero -->
<div class="position-relative bg-primary overflow-hidden">
<div class="container position-relative zi-2 content-space-3 content-space-md-5">
<div class="w-md-75 w-xl-65 text-center mx-md-auto">
<!-- Heading -->
<div class="mb-7">
<h1 class="display-4 text-white mb-4">Collaborative tools to design user experience</h1>
<p class="lead text-white mb-4">For everyone, from beginners to experts.</p>
</div>
<!-- End Title & Description -->
<div class="d-grid d-sm-flex justify-content-center gap-2">
<a class="btn btn-light btn-transition px-6" href="#">Start now</a>
<a class="btn text-white" href="#">Get in touch <i class="bi-chevron-right small ms-1"></i></a>
</div>
</div>
</div>
<!-- Background Shape -->
<figure class="position-absolute top-0 start-0 w-65">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1246 1078">
<g opacity=".4">
<linearGradient id="doubleEllipseTopLeftID1" gradientUnits="userSpaceOnUse" x1="2073.5078" y1="1.7251" x2="2273.4375" y2="1135.5818" gradientTransform="matrix(-1 0 0 1 2600 0)">
<stop offset="0.4976" style="stop-color:gulpLighten[#377dff,30]"/>
<stop offset="1" style="stop-color:#377dff"/>
</linearGradient>
<polygon fill="url(#doubleEllipseTopLeftID1)" points="519.8,0.6 0,0.6 0,1078 863.4,1078 "/>
<linearGradient id="doubleEllipseTopLeftID2" gradientUnits="userSpaceOnUse" x1="1717.1648" y1="3.779560e-05" x2="1717.1648" y2="644.0417" gradientTransform="matrix(-1 0 0 1 2600 0)">
<stop offset="1.577052e-06" style="stop-color:gulpLighten[#377dff,30]"/>
<stop offset="1" style="stop-color:#377dff"/>
</linearGradient>
<polygon fill="url(#doubleEllipseTopLeftID2)" points="519.7,0 1039.4,0.6 1246,639.1 725.2,644 "/>
</g>
</svg>
</figure>
<!-- End Background Shape -->
<!-- Shape -->
<div class="shape shape-bottom zi-1" style="margin-bottom: -.125rem">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1920 100.1">
<path fill="#fff" d="M0,0c0,0,934.4,93.4,1920,0v100.1H0L0,0z"></path>
</svg>
</div>
<!-- End Shape -->
</div>
<!-- End Hero -->