<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@100;200;300;400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/media.css">
<title>Home</title>
</head>
<body>
<section class="scroll-sticky">
<div class="main-scroll streamline">
<div class="st-heading">
<h2>Streamline the entire order process using Rigbot TMS to automate each step.</h2>
</div>
<div class="inner-pannel">
<section class="panel ">
<div class="stream-inner">
<div class="left-animated">
<img src="images/tracking 1.png">
</div>
<div class="right-content">
<h3>Automatic entry: </h3>
<p>Our Network TMS is can get capture information from bills and auto fill the data into your system using Machine learning and vision technology. Saving time and redundant effort.</p>
</div>
</div>
<div class="truck-road truck-progress">
<h3>Create</h3>
<span class="circle"></span>
</div>
</section>
<section class="panel ">
<div class="stream-inner">
<div class="left-animated">
<img src="images/tracking 1.png">
</div>
<div class="right-content">
<h3>Automatic entry: </h3>
<p>Our Network TMS is can get capture information from bills and auto fill the data into your system using Machine learning and vision technology. Saving time and redundant effort.</p>
</div>
</div>
<div class="truck-road full-road">
<h3>quote</h3>
<span class="circle"></span>
</div>
</section>
<section class="panel ">
<div class="stream-inner">
<div class="left-animated">
<img src="images/tracking 1.png">
</div>
<div class="right-content">
<h3>Automatic entry: </h3>
<p>Our Network TMS is can get capture information from bills and auto fill the data into your system using Machine learning and vision technology. Saving time and redundant effort.</p>
</div>
</div>
<div class="truck-road full-road">
<h3>Dispatch</h3>
<span class="circle"></span>
</div>
</section>
<section class="panel ">
<div class="stream-inner">
<div class="left-animated">
<img src="images/tracking 1.png">
</div>
<div class="right-content">
<h3>Automatic entry: </h3>
<p>Our Network TMS is can get capture information from bills and auto fill the data into your system using Machine learning and vision technology. Saving time and redundant effort.</p>
</div>
</div>
<div class="truck-road full-road">
<h3>In-Transit</h3>
<span class="circle"></span>
</div>
</section>
<section class="panel ">
<div class="stream-inner">
<div class="left-animated">
<img src="images/tracking 1.png">
</div>
<div class="right-content">
<h3>Automatic entry: </h3>
<p>Our Network TMS is can get capture information from bills and auto fill the data into your system using Machine learning and vision technology. Saving time and redundant effort.</p>
</div>
</div>
<div class="truck-road last-road">
<h3>complete</h3>
<span class="circle"></span>
</div>
</section>
</div>
<!-- <div class="progress-bar" id="myBar"></div> -->
<div class="truck-slide">
<img src="images/truck-scroll.png">
</div>
<div class="lines">
<div class="line-1 line"></div>
<div class="line-2 line"></div>
<div class="line-3 line"></div>
<div class="line-4 line"></div>
<div class="line-5 line"></div>
<div class="line-6 line"></div>
</div>
</div>
</section>
<section class="w-a-m main-counter">
<div class="divider">
<img src="images/vector-20.png" class="img-fluid" alt="vector-20">
</div>
<div class="container">
<div class="row">
<div class="col-12">
<div class="mak-heading">
<h2>We are making a difference</h2>
</div>
</div>
</div>
<div class="count-sec">
<div class="row">
<div class="col-lg-3 col-md-6 col-12">
<div class="number-counter">
<span class="counter">6,200</span><span>+</span>
<h3>Trucks and Trailer units in the field being curated</h3>
</div>
</div>
<div class="col-lg-3 col-md-6 col-12">
<div class="number-counter">
<span class="counter">2,000</span><span>+</span>
<h3>Dashcams in operation</h3>
</div>
</div>
<div class="col-lg-3 col-md-6 col-12">
<div class="number-counter">
<span class="counter">17,000</span><span>+</span>
<h3>Happy Drivers</h3>
</div>
</div>
<div class="col-lg-3 col-md-6 col-12">
<div class="number-counter">
<span class="counter">5,00,000</span><span>+</span>
<h3>Loads Scheduled</h3>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js?r=5426'></script>
<script src='https://assets.codepen.io/16327/ScrollTrigger.min.js'></script>
<script src='https://codepen.io/GreenSock/pen/ZEGdQLM/7ba936b34824fefdccfe2c6d9f0b740b.js'></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
/*================= streamline section css start ============================*/
.st-heading {
max-width: 1320px;
margin: 0 auto;
padding-top: 70px;
}
.truck-slide {
justify-content: center;
display: flex;
padding-top: 151px;
z-index: 0;
position: relative;
}
.truck-road {
background: #D9D9D9;
height: 7PX;
width: 50%;
position: absolute;
bottom: -58%;
right: 0px;
Z-INDEX: -1;
}
.streamline {
background: #F9FAFF;
}
.st-heading h2 {
font-family: 'Sora';
font-style: normal;
font-weight: 600;
font-size: 48px;
line-height: 60px;
text-align: center;
color: #000000;
max-width: 1033px;
margin: 0 auto;
}
.stream-inner {
max-width: 1088.49px;
margin: 0 auto;
width: 100%;
}
.right-content h3 {
font-family: 'Sora';
font-style: normal;
font-weight: 600;
font-size: 30px;
line-height: 35px;
text-transform: capitalize;
color: #000000;
text-align: left;
}
.right-content p {
font-family: 'Sora';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 30px;
text-transform: capitalize;
color: #272D3D;
text-align: left;
margin-top: 18px;
}
.stream-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 103px;
}
.left-animated {
background: #FFFFFF;
box-shadow: 0px 0px 23px rgba(0, 0, 0, 0.1);
border-radius: 10px;
padding: 39px 46px;
position: relative;
margin-left: 102px;
}
.right-content {
background: #FFFFFF;
box-shadow: 0px 2px 11px rgba(0, 0, 0, 0.03);
border-radius: 10px;
max-width: 653px;
padding: 63px 58px 33px;
}
.left-animated::before {
position: absolute;
content: "";
top: -38px;
left: -102px;
background: linear-gradient(180deg, #43627B 0%, #A2C4D5 100%);
border-radius: 5px;
height: 100%;
width: 100%;
z-index: -1;
}
.full-road {
width: 100%;
}
.last-road {
left: 0px;
}
.truck-road h3 {
font-family: 'Sora';
font-style: normal;
font-weight: 700;
font-size: 32px;
line-height: 40px;
text-align: left;
color: #162E4C;
position: relative;
top: 0px;
left: 0px;
transform: translate(-36px, -142px);
}
.full-road h3 {
transform: translate(13px, -142px);
text-align: center;
}
.last-road h3 {
text-align: right;
transform: translate(92px, -142px);
}
.main-scroll {
height: 100vh;
}
.main-scroll .panel {
width: 100% !important;
flex: 0 0 100%;
}
.inner-pannel {
display: flex;
justify-content: flex-start;
}
.firstContainer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background: yellow;
}
.lastContainer {
display: flex;
height: 100vh;
background: yellow;
}
/* SCROLL DOWN */
.scroll-down {
position: absolute;
bottom: 30px;
left: 50%;
transform: translate(-50%, 0);
color: black;
font-weight: 400;
text-transform: uppercase;
font-size: 16px;
overflow: visible;
}
.panel {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
font-weight: 600;
font-size: 1.5em;
text-align: center;
color: white;
position: relative;
box-sizing: border-box;
padding: 10px;
}
.progress-bar {
height: 8px;
background: #04AA6D;
width: 0%;
}
.content {
padding: 100px 0;
margin: 50px auto 0 auto;
width: 80%;
}
.circle {
background: #FFF2EE;
border: 6px solid #162E4C;
height: 48px;
max-width: 48px;
border-radius: 50%;
position: relative;
width: 100%;
display: flex;
left: -11px;
position: absolute;
top: -20px;
}
.truck-road.last-road span.circle {
justify-content: flex-end !important;
margin-left: auto;
right: 0px;
}
.full-road span.circle {
left: 50%;
}
.line {
width: 114px;
height: 1px;
background: #000;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
opacity: 0.3;
}
.lines {
animation: rotate3d infinite ease-in-out 1s;
position: absolute;
top: 10%;
height: 63%;
width: 100%;
}
.line-1 {
top: 20%;
left: 20%;
}
.line-2 {
top: 40%;
}
.line-3 {
top: 80%;
left: 30%;
}
.line-4 {
top: 30%;
right: 0;
left: initial;
}
.line-5 {
top: 60%;
right: 10%;
left: initial;
}
.line-6 {
top: 90%;
right: 30%;
left: initial;
}
@keyframes rotate3d {
0% {
right: 0;
}
100% {
right: 100%;
}
}
@keyframes rotate2d {
0% {
left: 0;
}
100% {
left: 100%;
}
}
.start-sticky {
position: sticky !important;
top: 0 !important;
z-index: -1;
}
.start-sticky .main-scroll {
position: relative !important;
transform: translate(0px, 0px) !important;
}
.integrated , .our-m , .testimonial , .pricing , .contact-form {
background: #fff;
}
/*================= streamline section css start ============================*/
/*============================= Counter Css Start =================================*/
.w-a-m {
background: #E7F1F9;
box-shadow: 0px -10px 12px 4px rgba(178, 178, 178, 0.17);
padding-top: 120px;
padding-bottom: 160px;
z-index: 0;
position: relative;
}
.w-a-m .divider {
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.w-a-m .mak-heading {
text-align: center;
position: relative;
margin-bottom: 60px;
max-width: 710px;
margin: 0 auto;
}
.w-a-m .mak-heading h2 {
font-weight: 600;
font-size: 48px;
line-height: 60px;
text-align: center;
color: #000000;
position: relative;
}
.w-a-m .mak-heading h2:after {
/* border: 1px solid #F1582C; */
position: absolute;
content: '';
height: 1px;
width: 100%;
background: #F1582C;
bottom: -13px;
right: 0;
max-width: 470px;
}
.count-sec {
margin-top: 60px;
text-align: center;
/* background: #fff; */
background: #FFFFFF;
box-shadow: 0px 0px 22px rgba(0, 0, 0, 0.04);
border-radius: 15px;
padding: 49px 64px;
}
.count-sec .number-counter span {
font-weight: 700;
font-size: 27px;
line-height: 34px;
text-align: center;
color: #081F40;
}
.count-sec .number-counter h3 {
font-weight: 400;
font-size: 18px;
line-height: 30px;
text-align: center;
color: #272D3D;
margin-top: 22px;
padding: 0 20px;
}
/*============================= Counter Css End =================================*/
/*================= streamline slider script==============================*/
gsap.registerPlugin(ScrollTrigger);
let sections = gsap.utils.toArray(".panel");
gsap.to(sections, {
xPercent: -100 * (sections.length - 1),
ease: "none",
scrollTrigger: {
trigger: ".main-scroll",
pin: true,
scrub: 1,
onLeave: (self) => disableTheme(),
onEnterBack: (self) => changeTheme(),
snap: 1 / (sections.length - 1),
end: () => "+=" + document.querySelector(".main-scroll").offsetWidth,
},
});
function changeTheme() {
console.log("test 1");
$(".main-scroll").removeClass("start-sticky");
}
function disableTheme() {
$(".scroll-sticky").addClass("start-sticky");
console.log("test 2");
}
$(".nav-items-product .nav-item").click(function () {
if ($(this).hasClass("active")) {
console.log("hassclass");
$(this).removeClass("active");
$(".nav-items-product").removeClass("main-active");
} else {
console.log("notc lass");
$(".nav-items-product").removeClass("main-active");
$(this).parents(".nav-items-product").find(".nav-item").removeClass("active");
$(this).addClass("active");
$(".nav-items-product").addClass("main-active");
}
});
(function( $ ){
"use strict";
$.fn.counterUp = function( options ) {
// Defaults
var settings = $.extend({
'time': 400,
'delay': 10
}, options);
return this.each(function(){
// Store the object
var $this = $(this);
var $settings = settings;
var counterUpper = function() {
var nums = [];
var divisions = $settings.time / $settings.delay;
var num = $this.text();
var isComma = /[0-9]+,[0-9]+/.test(num);
num = num.replace(/,/g, '');
var isInt = /^[0-9]+$/.test(num);
var isFloat = /^[0-9]+\.[0-9]+$/.test(num);
var decimalPlaces = isFloat ? (num.split('.')[1] || []).length : 0;
// Generate list of incremental numbers to display
for (var i = divisions; i >= 1; i--) {
// Preserve as int if input was int
var newNum = parseInt(num / divisions * i);
// Preserve float if input was float
if (isFloat) {
newNum = parseFloat(num / divisions * i).toFixed(decimalPlaces);
}
// Preserve commas if input had commas
if (isComma) {
while (/(\d+)(\d{3})/.test(newNum.toString())) {
newNum = newNum.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2');
}
}
nums.unshift(newNum);
}
$this.data('counterup-nums', nums);
$this.text('0');
// Updates the number until we're done
var f = function() {
$this.text($this.data('counterup-nums').shift());
if ($this.data('counterup-nums').length) {
setTimeout($this.data('counterup-func'), $settings.delay);
} else {
delete $this.data('counterup-nums');
$this.data('counterup-nums', null);
$this.data('counterup-func', null);
}
};
$this.data('counterup-func', f);
// Start the count up
setTimeout($this.data('counterup-func'), $settings.delay);
};
counterUpper();
// Perform counts when the element gets into view
// $this.waypoint(counterUpper, { offset: '100%', triggerOnce: true });
});
};
})( jQuery );
// custom code
jQuery(document).ready(function( $ ) {
$('.counter').counterUp({
delay: 10,
time: 5000
});
});
