847 lines
41 KiB
PHP
847 lines
41 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>REKBER</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content=" " />
|
|
<meta name="keywords" content="" />
|
|
<meta content="Themesdesign" name="author" />
|
|
|
|
<link rel="shortcut icon" href="{{ asset('assets/images/logo-rekber.png') }}">
|
|
|
|
<!-- Bootstrap css -->
|
|
<link rel="stylesheet" href="{{ asset('assets/css/home/bootstrap.min.css') }}" type="text/css"
|
|
id="bootstrap-style" />
|
|
|
|
<!-- Material Icon Css -->
|
|
<link rel="stylesheet" href="{{ asset('assets/css/home/materialdesignicons.min.css') }}" type="text/css" />
|
|
|
|
<!-- Unicon Css -->
|
|
<link rel="stylesheet" href="{{ asset('assets/css/home/line.css') }}" />
|
|
|
|
<!-- Swiper Css -->
|
|
<link rel="stylesheet" href="{{ asset('assets/css/home/tiny-slider.css') }}" type="text/css" />
|
|
<link rel="stylesheet" href="{{ asset('assets/css/home/swiper.min.css') }}" type="text/css" />
|
|
|
|
<!-- Custom Css -->
|
|
<link rel="stylesheet" href="{{ asset('assets/css/home/style.min.css') }}" type="text/css" />
|
|
|
|
<link rel="stylesheet" href="{{ asset('assets/css/home/main.css') }}" type="text/css" />
|
|
|
|
<!-- colors -->
|
|
<link href="{{ asset('assets/css/home/colors/default.css') }}" rel="stylesheet" type="text/css" id="color-opt" />
|
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
|
|
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
|
|
</head>
|
|
|
|
<body data-bs-spy="scroll" data-bs-target="#navbarCollapse" style="overflow-y: scroll;">
|
|
<!-- button on scroll -->
|
|
<button id="scrollToTopBtn" class="wow fadeInDown">
|
|
<iconify-icon icon="mingcute:up-line" width="30" height="30"></iconify-icon>
|
|
</button>
|
|
|
|
<!-- light-dark mode button -->
|
|
<a href="javascript: void(0);" id="mode" class="mode-btn text-white rounded-end" onclick="toggleBtn()">
|
|
<i class="uil uil-brightness mode-dark mx-auto"></i>
|
|
<i class="uil uil-moon bx-spin mode-light"></i>
|
|
</a>
|
|
<!-- START NAVBAR -->
|
|
<nav class="navbar navbar-expand-lg fixed-top navbar-custom sticky sticky-light bg-light" id="navbar">
|
|
<div class="container-fluid">
|
|
|
|
<!-- LOGO -->
|
|
<a class="navbar-brand logo text-uppercase" href="#">
|
|
<img src="{{ asset('assets/images/logo-light.svg') }}" class="logo-dark" alt="logo" height="40">
|
|
<img src="{{ asset('assets/images/logo-dark.svg') }}" class="logo-light" alt="logo" height="40">
|
|
</a>
|
|
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
|
|
aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="mdi mdi-menu"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarCollapse">
|
|
<ul class="navbar-nav ms-auto" id="navbar-navlist">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#home">Home</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#service">Servis</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#features">Fitur</a>
|
|
</li>
|
|
{{-- <li class="nav-item">
|
|
<a class="nav-link" href="#testimonial">Testimoni</a>
|
|
</li> --}}
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#app">Aplikasi</a>
|
|
</li>
|
|
</ul>
|
|
<div class="ms-auto">
|
|
<a class="btn bg-gradiant" href="{{ route('login') }}">
|
|
<span class="label">Login</span>
|
|
<span class="bg"></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<!-- END NAVBAR -->
|
|
|
|
|
|
|
|
<!-- home section -->
|
|
<section class="home-2 bg-secondary" id="home">
|
|
<div class="background-line">
|
|
<div class="line-rounded"></div>
|
|
</div>
|
|
<!-- start container -->
|
|
<div class="container position-relative">
|
|
<!-- start row -->
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col-lg-8">
|
|
<div class="title-typewrite text-center text-black margin-top-120">
|
|
<i class="mdi mdi-crown f-30 wow fadeIn"></i>
|
|
<h1 class="home-title mb-0 display-5">
|
|
<span class="typewrite wow fadeIn" data-period="2000"
|
|
data-type='[ "Aplikasi Rekening Bersama" ]'>
|
|
<span class="wrap"></span>
|
|
</span>
|
|
</h1>
|
|
<p class="text-black-50 mt-4 wow fadeInUp">Melangkah bersama Rekber Dompet era Digital yang
|
|
cerdas,
|
|
terpercaya dan aman dalam Transaksi.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end row -->
|
|
|
|
<div class="phone-mockup">
|
|
<div class="row align-items-center justify-content-center wow fadeIn">
|
|
<div class="col-lg-3">
|
|
<img src="{{ asset('assets/images/home/phone-2.png') }}" width="650" alt=""
|
|
class="img-fluid">
|
|
</div>
|
|
<div class="col-lg-4">
|
|
|
|
<div class="video-preview video-container mt-4">
|
|
<img src="{{ asset('assets/images/features/phone.png') }}" alt="" width="650"
|
|
class="img-fluid">
|
|
|
|
{{-- <div class="watch-video">
|
|
<a href="#" class="video-play-icon watch text-white" data-bs-toggle="modal"
|
|
data-bs-target="#watchvideomodal">
|
|
<i
|
|
class="mdi mdi-play text-center d-inline-block rounded-pill text-light bg-primary fs-30 avatar-lg me-1"></i>
|
|
</a>
|
|
</div> --}}
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-3">
|
|
<img src="{{ asset('assets/images/home/phone-3.png') }}" width="650" alt=""
|
|
class="img-fluid">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end container -->
|
|
|
|
<div class="background-line-2">
|
|
<div class="line-rounded"></div>
|
|
</div>
|
|
|
|
|
|
{{-- <div class="modal fade bd-example-modal-lg" id="watchvideomodal" data-keyboard="false" tabindex="-1"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-dialog modal-lg">
|
|
<div class="modal-content hero-modal-0 bg-transparent">
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
<video id="VisaChipCardVideo" class="w-100" controls="">
|
|
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
|
|
</video>
|
|
</div>
|
|
</div>
|
|
</div> --}}
|
|
|
|
</section>
|
|
<!-- end home section -->
|
|
|
|
|
|
|
|
|
|
<!-- service section -->
|
|
<section class="section service home2-service bg-light" id="service">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-6">
|
|
<div class="title text-center mb-5">
|
|
<h6 class="mb-0 text-primary wow fadeInUp" data-wow-delay="0.1s">Rekber</h6>
|
|
<h2 class="text-black wow fadeInUp">Bersama dengan Rekber</h2>
|
|
<div class="border-phone">
|
|
<p class="text-muted wow fadeInUp">Memberikan solusi inovatif transfer antar akun melalui
|
|
konsep
|
|
rekening bersama sebagai penampungan uang sementara.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row justify-content-between">
|
|
<div class="col-lg-4 wow fadeInUp">
|
|
<div class="service-box text-center">
|
|
<div class="service-icon p-4">
|
|
<img src="{{ asset('assets\images\service\logo-inovasi.svg') }}" alt="logo">
|
|
</div>
|
|
|
|
<div class="service-content mt-4">
|
|
<a href="#">
|
|
<h5 class="fw-bold">Inovasi Cerdas</h5>
|
|
</a>
|
|
<p class="text-muted">Rekber mempersembahkan solusi transaksi canggih yang memberikan
|
|
kemudahan dan keamanan bersama.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 pt-4 pt-lg-0 wow fadeInUp">
|
|
<div class="service-box text-center shadow">
|
|
<div class="service-icon p-4">
|
|
<img src="{{ asset('assets\images\service\logo-keamanan.svg') }}" alt="logo">
|
|
</div>
|
|
|
|
<div class="service-content mt-4">
|
|
<a href="#">
|
|
<h5 class="fw-bold">Keamanan Terpercaya</h5>
|
|
</a>
|
|
<p class="text-muted"> Rekber menjamin perlindungan data dan dana, memberi anda ketenangan
|
|
saat bertransaksi.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 pt-4 pt-lg-0 wow fadeInUp">
|
|
<div class="service-box text-center">
|
|
<div class="service-icon p-4"
|
|
style=" background-repeat: no-repeat; background-position: center;">
|
|
<img src="{{ asset('assets\images\service\logo-fleksibilitas.svg') }}" alt="logo"
|
|
height="70">
|
|
</div>
|
|
|
|
<div class="service-content mt-4">
|
|
<a href="#">
|
|
<h5 class="fw-bold">Fleksibilitas Modern</h5>
|
|
</a>
|
|
<p class="text-muted">Dengan Rekber, anda memiliki kontrol penuh atas pembayaran,
|
|
beradaptasi dengan kebutuhan transaksi.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end section -->
|
|
|
|
|
|
<!-- start features -->
|
|
<div class="section features" id="features">
|
|
<!-- start container -->
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-6">
|
|
<div class="title text-center mb-5">
|
|
<h6 class="mb-0 fw-bold text-primary wow fadeInUp">Fitur Rekber</h6>
|
|
<h2 class="f-40 text-black wow fadeInUp">Fitur yang disediakan Rekber</h2>
|
|
<p class="text-muted wow fadeInUp">Fitur Rekber Terbaru: Memastikan transaksi aman dan
|
|
terpercaya, ekspor
|
|
dan lihat fiturnya.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row justify-content-center">
|
|
|
|
|
|
<div class="col-lg-12">
|
|
<div class="tab-content mt-2" id="pills-tabContent">
|
|
<div class="tab-pane fade show active" id="pills-home" role="tabpanel"
|
|
aria-labelledby="pills-home-tab">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-4 order-2 order-lg-first wow fadeInLeft">
|
|
<div class="features-item text-start text-lg-end">
|
|
<div class="icon avatar-sm text-center ms-lg-auto rounded-circle">
|
|
<i class="mdi mdi-message-alert-outline f-24"></i>
|
|
</div>
|
|
<div class="content mt-3">
|
|
<h5>Notifikasi</h5>
|
|
<p>Semua aktivitas yang dilakukan di Rekber akan muncul notifikasinya.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="features-item text-start text-lg-end mt-5">
|
|
<div class="icon avatar-sm text-center ms-lg-auto rounded-circle">
|
|
<i class="mdi mdi-autorenew f-24"></i>
|
|
</div>
|
|
<div class="content mt-3">
|
|
<h5>Refund</h5>
|
|
<p>Pengguna dapat melakukan Refund apa bila ada ketidak sesuain pembelian.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="features-item text-start text-lg-end mt-5 mb-5">
|
|
<div class="icon avatar-sm text-center ms-lg-auto rounded-circle">
|
|
<i class="mdi mdi-login f-24"></i>
|
|
</div>
|
|
<div class="content mt-3">
|
|
<h5>Login & Register</h5>
|
|
<p> Keamanan, identifikasi, akses, dan pengalaman yang terpercaya.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-4 wow fadeInUp">
|
|
<img src="{{ asset('assets/images/features/phone.png') }}" alt=""
|
|
class="img-fluid">
|
|
</div>
|
|
<div class="col-lg-4 order-last wow fadeInRight">
|
|
<div class="features-item">
|
|
<div class="icon avatar-sm text-center rounded-circle">
|
|
<i class="mdi mdi-plus f-24"></i>
|
|
</div>
|
|
<div class="content mt-3">
|
|
<h5>Tambah Kontak</h5>
|
|
<p>Pengguna dapat menambahkan akun pengguna lainnya untuk memudahkan
|
|
transaksi.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="features-item mt-5">
|
|
<div class="icon avatar-sm text-center rounded-circle">
|
|
<i class="mdi mdi-eyedropper f-24"></i>
|
|
</div>
|
|
<div class="content mt-3">
|
|
<h5>Edit Kontak</h5>
|
|
<p>Pengguna dapat memperbaru kontak akun Pengguna lainnya.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="features-item mt-5">
|
|
<div class="icon avatar-sm text-center rounded-circle">
|
|
<i class="mdi mdi-delete f-24"></i>
|
|
</div>
|
|
<div class="content mt-3">
|
|
<h5>Hapus Kontak</h5>
|
|
<p>Pengguna dapat menghapus kontak akun Pengguna lainnya.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end container -->
|
|
</div>
|
|
<!-- end features -->
|
|
|
|
|
|
|
|
<!-- start testimonial -->
|
|
<section class="section bg-light testimonial" id="testimonial" style="display: none;">
|
|
<!-- start container -->
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-lg-4">
|
|
<div class="title">
|
|
<p class=" text-primary fw-bold mb-0">Testimoni Pengguna<i
|
|
class="mdi mdi-cellphone-iphone"></i>
|
|
</p>
|
|
<h3>Tanggapan Pengguna Rekber</h3>
|
|
<p class="text-muted">Pengalaman Sukses Pengguna: Bagaimana Rekber
|
|
Mengubah Pengalaman
|
|
Transaksi Mereka?</p>
|
|
<button class="btn bg-gradiant">Baca Lebih Banyak<i class="mdi mdi-arrow-right"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-8">
|
|
<div class="testi-slider" id="testi-slider">
|
|
<div class="item">
|
|
<div class="testi-box position-relative overflow-hidden">
|
|
<div class="row align-items-center">
|
|
<div class="col-md-5">
|
|
<img src="{{ asset('assets/images/testi/img-1.png') }}" alt=""
|
|
class="img-fluid">
|
|
</div>
|
|
<div class="col-md-7">
|
|
<div class="p-4">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="avatar">
|
|
<img src="{{ asset('assets/images/user/img-1.jpg') }}"
|
|
alt="" class="img-fluid rounded-circle">
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<p class="f-14 mb-0 text-dark fw-bold"><span
|
|
class="text-muted fw-normal">Review By </span> Septhea
|
|
Zisca
|
|
</p>
|
|
<div class="date">
|
|
<p class="text-muted mb-0 f-14">28 jan, 2021 <span>10:25
|
|
AM</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-3">
|
|
<h5 class="fw-bold">Bermanfaat banget buat yang suka belanja barang
|
|
</h5>
|
|
<p class="text-muted f-14">Dengan Rekber aku merasa lebih aman
|
|
melakukan transaksi, kalau barang tidak sesuai bisa refund dan uang
|
|
bisa kembali
|
|
</p>
|
|
<button class="btn btn-sm bg-gradiant"><i
|
|
class="mdi mdi-plus f-16 align-middle"></i>
|
|
Follow</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="back-image position-absolute end-0 bottom-0">
|
|
<img src="{{ asset('assets/images/testi/rating-image.png') }}" alt=""
|
|
class="img-fluid">
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<!-- slider item -->
|
|
|
|
<div class="item">
|
|
<div class="testi-box position-relative overflow-hidden">
|
|
<div class="row align-items-center">
|
|
<div class="col-md-5">
|
|
<img src="{{ asset('assets/images/testi/img-2.png') }}" alt=""
|
|
class="img-fluid">
|
|
</div>
|
|
<div class="col-md-7">
|
|
<div class="p-4">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="avatar">
|
|
<img src="{{ asset('assets/images/user/img-2.jpg') }}"
|
|
alt="" class="img-fluid rounded-circle">
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<p class="f-14 mb-0 text-dark fw-bold"><span
|
|
class="text-muted fw-normal">Review By </span> Freanki
|
|
Fabel
|
|
</p>
|
|
<div class="date">
|
|
<p class="text-muted mb-0 f-14">28 jan, 2021 <span>10:25
|
|
AM</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-3">
|
|
<h5 class="fw-bold">Easy and prefect solution</h5>
|
|
<p class="text-muted f-14">Start working with Styza that can provide
|
|
everything you need to generate awareness, drive traffic, connect.
|
|
</p>
|
|
<button class="btn btn-sm bg-gradiant"><i
|
|
class="mdi mdi-plus f-16 align-middle"></i>
|
|
Follow</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="back-image position-absolute end-0 bottom-0">
|
|
<img src="{{ asset('assets/images/testi/rating-image.png') }}" alt=""
|
|
class="img-fluid">
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- slider item -->
|
|
<div class="item ">
|
|
<div class="testi-box position-relative overflow-hidden">
|
|
<div class="row align-items-center">
|
|
<div class="col-md-5">
|
|
<img src="{{ asset('assets/images/testi/img-3.png') }}" alt=""
|
|
class="img-fluid">
|
|
</div>
|
|
<div class="col-md-7">
|
|
<div class="p-4">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="avatar">
|
|
<img src="{{ asset('assets/images/user/img-3.jpg') }}"
|
|
alt="" class="img-fluid rounded-circle">
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<p class="f-14 mb-0 text-dark fw-bold"><span
|
|
class="text-muted fw-normal">Review By </span> Freanki
|
|
Fabel
|
|
</p>
|
|
<div class="date">
|
|
<p class="text-muted mb-0 f-14">28 jan, 2021 <span>10:25
|
|
AM</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-3">
|
|
<h5 class="fw-bold">Bulid The App That Everyone Love.</h5>
|
|
<p class="text-muted f-14">Start working with Styza that can provide
|
|
everything you need to generate awareness, drive traffic, connect.
|
|
</p>
|
|
<button class="btn btn-sm bg-gradiant"><i
|
|
class="mdi mdi-plus f-16 align-middle"></i>
|
|
Follow</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="back-image position-absolute end-0 bottom-0">
|
|
<img src="{{ asset('assets/images/testi/rating-image.png') }}" alt=""
|
|
class="img-fluid">
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- slider item -->
|
|
<div class="item ">
|
|
<div class="testi-box position-relative overflow-hidden">
|
|
<div class="row align-items-center">
|
|
<div class="col-md-5">
|
|
<img src="{{ asset('assets/images/testi/img-4.png') }}" alt=""
|
|
class="img-fluid">
|
|
</div>
|
|
<div class="col-md-7">
|
|
<div class="p-4">
|
|
<div class="d-flex align-items-center">
|
|
<div class="flex-shrink-0">
|
|
<div class="avatar">
|
|
<img src="{{ asset('assets/images/user/img-4.jpg') }}"
|
|
alt="" class="img-fluid rounded-circle">
|
|
</div>
|
|
</div>
|
|
<div class="flex-grow-1 ms-3">
|
|
<p class="f-14 mb-0 text-dark fw-bold"><span
|
|
class="text-muted fw-normal">Review By </span> Freanki
|
|
Fabel
|
|
</p>
|
|
<div class="date">
|
|
<p class="text-muted mb-0 f-14">28 jan, 2021 <span>10:25
|
|
AM</span></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-3">
|
|
<h5 class="fw-bold">Bulid The App That Everyone Love.</h5>
|
|
<p class="text-muted f-14">Start working with Styza that can provide
|
|
everything you need to generate awareness, drive traffic, connect.
|
|
</p>
|
|
<button class="btn btn-sm bg-gradiant"><i
|
|
class="mdi mdi-plus f-16 align-middle"></i>
|
|
Follow</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="back-image position-absolute end-0 bottom-0">
|
|
<img src="{{ asset('assets/images/testi/rating-image.png') }}" alt=""
|
|
class="img-fluid">
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<!-- slider item -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end container -->
|
|
</section>
|
|
<!-- end testimonial -->
|
|
|
|
|
|
|
|
|
|
<!-- slider section -->
|
|
<section class="section app-slider bg-light" id="app">
|
|
<!-- start container -->
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8">
|
|
<div class="title text-center mb-5">
|
|
<h6 class="mb-0 fw-bold text-primary">Aplikasi Rekber</h6>
|
|
<h2 class="f-40 text-black">Aplikasi Mobile Rekber</h2>
|
|
<p class="text-muted">Dapatkan kemudahan transaksi dalam genggaman Anda dengan Aplikasi Mobile
|
|
Rekber. Lihat lebih lengkap Aplikasi Mobile Rekber.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-lg-12">
|
|
<div class="swiper-container">
|
|
<div class="fream-phone ">
|
|
<img src="{{ asset('assets/images/testi/phone-fream.png') }}" alt=""
|
|
class="img-fluid">
|
|
</div>
|
|
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide border-radius">
|
|
<img src="{{ asset('assets/images/testi/ss/s-1.png') }}" alt="">
|
|
</div>
|
|
<div class="swiper-slide border-radius">
|
|
<img src="{{ asset('assets/images/testi/ss/s-2.png') }}" alt="">
|
|
</div>
|
|
<div class="swiper-slide border-radius">
|
|
<img src="{{ asset('assets/images/testi/ss/s-3.png') }}" alt="">
|
|
</div>
|
|
<div class="swiper-slide border-radius">
|
|
<img src="{{ asset('assets/images/testi/ss/s-4.png') }}" alt="">
|
|
</div>
|
|
<div class="swiper-slide border-radius">
|
|
<img src="{{ asset('assets/images/testi/ss/s-5.png') }}" alt="">
|
|
</div>
|
|
<div class="swiper-slide border-radius">
|
|
<img src="{{ asset('assets/images/testi/ss/s-6.png') }}" alt="">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- navigation buttons -->
|
|
<div class="swiper-pagination"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end container -->
|
|
</div>
|
|
</section>
|
|
<!-- end section -->
|
|
|
|
|
|
|
|
|
|
<!-- cta section -->
|
|
<section class="section cta">
|
|
<div class="bg-overlay-gradiant"></div>
|
|
<!-- start container -->
|
|
<div class="container position-relative">
|
|
<div class="row">
|
|
<div class="col-lg-6">
|
|
<div class="py-5">
|
|
<h1 class="display-4 text-white">Transaksi Aman Uang Bisa kembali</h1>
|
|
<p class="text-white-50 mt-3 f-18">Gunakan Rekber untuk Transaksi Aman!
|
|
Uang Aman Sampai
|
|
Transaksi Selesai, dengan Jaminan Pengembalian jika Disetujui oleh Kedua Belah Pihak.
|
|
Download Sekarang!</p>
|
|
<div class="d-flex mt-4 ">
|
|
<div class="googleplay">
|
|
<a href="#"><img src="{{ asset('assets/images/img-googleplay.png') }}"
|
|
alt="" class="img-fluid ms-3"></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="cta-phone-image">
|
|
<img src="{{ asset('assets/images/cta-bg.png') }}" alt="" class=" img-fluid">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end container -->
|
|
</section>
|
|
<!-- end section -->
|
|
|
|
|
|
<!-- footer section -->
|
|
<section class=" section footer bg-light overflow-hidden" style="margin-top: 10rem">
|
|
<!-- container -->
|
|
<div class="container">
|
|
<div class="row ">
|
|
<div class="col-lg-3">
|
|
<a class="navbar-brand logo text-uppercase" href="#">
|
|
<img src="{{ asset('assets/images/logo-light.svg') }}" class="logo-dark" alt="logo"
|
|
height="30">
|
|
<img src="{{ asset('assets/images/logo-dark.svg') }}" class="logo-light" alt="logo"
|
|
height="30">
|
|
</a>
|
|
<p class="text-black-50 mt-2 mb-0">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
|
|
Beatae,
|
|
deserunt expedita! Id sit dicta quidem aperiam aut ad debitis numquam .</p>
|
|
</div>
|
|
|
|
<div class="col-md-2 ml-4 mt-3">
|
|
<div class="text-start">
|
|
<h5 class="bottom-item"><a href="#About">Tentang</a></h5>
|
|
<h5 class="bottom-item"><a href="#About">Produk</a></h5>
|
|
<h5 class="bottom-item"><a href="#About">Fitur</a></h5>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-3 mt-3">
|
|
<h6 class="bottom-item">Nikmati fitur rekber</h6>
|
|
<ul class="footer-item list-unstyled footer-link mt-3">
|
|
<li><a href="{{ route('login') }}">Sign Up Sekarang!</a></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="col-md-3 mt-3">
|
|
<h5 class="bottom-item">Unduh Aplikasi</h5>
|
|
<img src="{{ asset('assets/images/img-googleplay.png') }}" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- end container -->
|
|
</section>
|
|
|
|
<section class="bottom-footer py-4">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-6">
|
|
<p class="mb-0 text-center text-muted">©
|
|
<script>
|
|
document.write(new Date().getFullYear())
|
|
</script> Rekber. PT.Abbauf, Inc. All
|
|
rights reserved
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<!-- end footer -->
|
|
|
|
<script>
|
|
new WOW().init();
|
|
</script>
|
|
|
|
|
|
<script>
|
|
const btn = document.querySelector(".btn");
|
|
const bg = btn.querySelector(".bg");
|
|
|
|
const handleOrigin = (e) => {
|
|
bg.style.left = `${e.pageX - btn.offsetLeft}px`;
|
|
bg.style.top = `${e.pageY - btn.offsetTop}px`;
|
|
};
|
|
|
|
btn.addEventListener("mouseenter", handleOrigin);
|
|
btn.addEventListener("mouseleave", handleOrigin);
|
|
</script>
|
|
|
|
|
|
<script src="{{ asset('assets/js/home/jquery.min.js') }}"></script>
|
|
|
|
|
|
<!--Bootstrap Js-->
|
|
<script src="{{ asset('assets/js/home/bootstrap.bundle.min.js') }}"></script>
|
|
|
|
<!-- Slider Js -->
|
|
<script src="{{ asset('assets/js/home/tiny-slider.js') }}"></script>
|
|
|
|
<script src="{{ asset('assets/js/home/swiper.min.js') }}"></script>
|
|
|
|
<!-- App Js -->
|
|
<script src="{{ asset('assets/js/home/app.js') }}"></script>
|
|
|
|
<script>
|
|
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
|
var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
|
|
return new bootstrap.Tooltip(tooltipTriggerEl);
|
|
})
|
|
</script>
|
|
|
|
<script>
|
|
var TxtType = function(el, toRotate, period) {
|
|
this.toRotate = toRotate;
|
|
this.el = el;
|
|
this.loopNum = 0;
|
|
this.period = parseInt(period, 10) || 2000;
|
|
this.txt = '';
|
|
this.tick();
|
|
this.isDeleting = false;
|
|
};
|
|
|
|
TxtType.prototype.tick = function() {
|
|
var i = this.loopNum % this.toRotate.length;
|
|
var fullTxt = this.toRotate[i];
|
|
if (this.isDeleting) {
|
|
this.txt = fullTxt.substring(0, this.txt.length - 1);
|
|
} else {
|
|
this.txt = fullTxt.substring(0, this.txt.length + 1);
|
|
}
|
|
this.el.innerHTML = '<span class="wrap">' + this.txt + '</span>';
|
|
var that = this;
|
|
var delta = 200 - Math.random() * 100;
|
|
if (this.isDeleting) {
|
|
delta /= 2;
|
|
}
|
|
if (!this.isDeleting && this.txt === fullTxt) {
|
|
delta = this.period;
|
|
this.isDeleting = true;
|
|
} else if (this.isDeleting && this.txt === '') {
|
|
this.isDeleting = false;
|
|
this.loopNum++;
|
|
delta = 500;
|
|
}
|
|
setTimeout(function() {
|
|
that.tick();
|
|
}, delta);
|
|
};
|
|
|
|
function typewrite() {
|
|
if (toRotate === 'undefined') {
|
|
changeText();
|
|
} else
|
|
var elements = document.getElementsByClassName('typewrite');
|
|
for (var i = 0; i < elements.length; i++) {
|
|
var toRotate = elements[i].getAttribute('data-type');
|
|
var period = elements[i].getAttribute('data-period');
|
|
if (toRotate) {
|
|
new TxtType(elements[i], JSON.parse(toRotate), period);
|
|
}
|
|
}
|
|
// INJECT CSS
|
|
var css = document.createElement("style");
|
|
css.type = "text/css";
|
|
css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #ffffff}";
|
|
document.body.appendChild(css);
|
|
};
|
|
typewrite();
|
|
</script>
|
|
|
|
<script>
|
|
const scrollToTopButton = document.getElementById('scrollToTopBtn');
|
|
window.onscroll = function() {
|
|
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
|
|
scrollToTopButton.style.display = 'block';
|
|
} else {
|
|
scrollToTopButton.style.display = 'none';
|
|
}
|
|
};
|
|
scrollToTopButton.addEventListener('click', () => {
|
|
document.body.scrollTop = 0;
|
|
document.documentElement.scrollTop = 0;
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|