proklim/resources/views/welcome.blade.php

653 lines
34 KiB
PHP
Raw Permalink Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!--
THEME: Small Apps | Bootstrap App Landing Template
VERSION: 1.0.0
AUTHOR: Themefisher
HOMEPAGE: https://themefisher.com/products/small-apps-free-app-landing-page-template/
DEMO: https://demo.themefisher.com/small-apps/
GITHUB: https://github.com/themefisher/Small-Apps-Bootstrap-App-Landing-Template
Get HUGO Version : https://themefisher.com/products/small-apps-hugo-app-landing-theme/
WEBSITE: https://themefisher.com
TWITTER: https://twitter.com/themefisher
FACEBOOK: https://www.facebook.com/themefisher
-->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>PROKLIM | PROGRAM KAMPUNG IKLIM</title>
<!-- Mobile Specific Metas
================================================== -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Bootstrap App Landing Template">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
<meta name="author" content="Themefisher">
<meta name="generator" content="Themefisher Small Apps Template v1.0">
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.png" />
<!-- PLUGINS CSS STYLE -->
<link rel="stylesheet" href="{{ asset('assets/plugins/bootstrap/bootstrap.min.') }}css">
<link rel="stylesheet" href="{{ asset('assets/plugins/themify-icons/themify-icons.css') }}">
<link rel="stylesheet" href="{{ asset('assets/plugins/slick/slick.css') }}">
<link rel="stylesheet" href="{{ asset('assets/plugins/slick/slick-theme.css') }}">
<link rel="stylesheet" href="{{ asset('assets/plugins/fancybox/jquery.fancybox.min.css') }}">
<link rel="stylesheet" href="{{ asset('assets/plugins/aos/aos.css') }}">
<link rel="stylesheet" href="{{ asset('layout_home/assets/css/button.css') }}">
<!-- CUSTOM CSS -->
<link href="{{ asset('assets/css/style.css') }}" rel="stylesheet">
</head>
<body class="body-wrapper" data-spy="scroll" data-target=".privacy-nav">
<nav class="navbar main-nav navbar-expand-lg px-2 px-sm-0 py-2 py-lg-0">
<div class="container">
<a class="navbar-brand" href="index.html"><img src="{{ asset('assets/images/proklim.png') }}"
alt="logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="ti-menu"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown active">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Home
<span><i class="ti-angle-down"></i></span>
</a>
<!-- Dropdown list -->
<ul class="dropdown-menu">
<li><a class="dropdown-item active" href="index.html">Homepage</a></li>
<li><a class="dropdown-item" href="homepage-2.html">Homepage 2</a></li>
<li><a class="dropdown-item active3" href="homepage-3.html">Homepage 3</a></li>
<li class="dropdown dropdown-submenu dropright">
<a class="dropdown-item dropdown-toggle" href="#!" id="dropdown0301" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Sub Menu</a>
<ul class="dropdown-menu" aria-labelledby="dropdown0301">
<li><a class="dropdown-item" href="index.html">Submenu 11</a></li>
<li><a class="dropdown-item" href="index.html">Submenu 12</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item dropdown @@pages">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">Pages
<span><i class="ti-angle-down"></i></span>
</a>
<!-- Dropdown list -->
<ul class="dropdown-menu">
<li><a class="dropdown-item @@team" href="team.html">Team</a></li>
<li><a class="dropdown-item @@career" href="career.html">Career</a></li>
<li><a class="dropdown-item @@blog" href="blog.html">Blog</a></li>
<li><a class="dropdown-item @@blogSingle" href="blog-single.html">Blog
Single</a></li>
<li><a class="dropdown-item @@privacy"
href="privacy-policy.html">Privacy</a></li>
<li><a class="dropdown-item @@faq" href="FAQ.html">FAQ</a></li>
<li><a class="dropdown-item" href="sign-in.html">Sign In</a></li>
<li><a class="dropdown-item" href="sign-up.html">Sign Up</a></li>
<li><a class="dropdown-item" href="404.html">404</a></li>
<li><a class="dropdown-item" href="comming-soon.html">Coming Soon</a></li>
<li class="dropdown dropdown-submenu dropleft">
<a class="dropdown-item dropdown-toggle" href="#!" id="dropdown0501"
role="button" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Sub Menu</a>
<ul class="dropdown-menu" aria-labelledby="dropdown0501">
<li><a class="dropdown-item" href="index.html">Submenu 21</a></li>
<li><a class="dropdown-item" href="index.html">Submenu 22</a></li>
</ul>
</li>
</ul>
</li>
<li class="nav-item @@about">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item @@contact">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!--====================================
= Hero Section =
=====================================-->
<section class="section gradient-banner">
<div class="shapes-container">
<div class="shape" data-aos="fade-down-left" data-aos-duration="1500" data-aos-delay="100"></div>
<div class="shape" data-aos="fade-down" data-aos-duration="1000" data-aos-delay="100"></div>
<div class="shape" data-aos="fade-up-right" data-aos-duration="1000" data-aos-delay="200"></div>
<div class="shape" data-aos="fade-up" data-aos-duration="1000" data-aos-delay="200"></div>
<div class="shape" data-aos="fade-down-left" data-aos-duration="1000" data-aos-delay="100"></div>
<div class="shape" data-aos="fade-down-left" data-aos-duration="1000" data-aos-delay="100"></div>
<div class="shape" data-aos="zoom-in" data-aos-duration="1000" data-aos-delay="300"></div>
<div class="shape" data-aos="fade-down-right" data-aos-duration="500" data-aos-delay="200"></div>
<div class="shape" data-aos="fade-down-right" data-aos-duration="500" data-aos-delay="100"></div>
<div class="shape" data-aos="zoom-out" data-aos-duration="2000" data-aos-delay="500"></div>
<div class="shape" data-aos="fade-up-right" data-aos-duration="500" data-aos-delay="200"></div>
<div class="shape" data-aos="fade-down-left" data-aos-duration="500" data-aos-delay="100"></div>
<div class="shape" data-aos="fade-up" data-aos-duration="500" data-aos-delay="0"></div>
<div class="shape" data-aos="fade-down" data-aos-duration="500" data-aos-delay="0"></div>
<div class="shape" data-aos="fade-up-right" data-aos-duration="500" data-aos-delay="100"></div>
<div class="shape" data-aos="fade-down-left" data-aos-duration="500" data-aos-delay="0"></div>
</div>
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 order-2 order-md-1 text-center text-md-left">
<h1 class="text-white font-weight-bold mb-4">Program Kampung Iklim (ProKlim)</h1>
<p class="text-white mb-5">program nasional di Indonesia yang bertujuan untuk meningkatkan keterlibatan masyarakat dalam upaya adaptasi dan mitigasi perubahan iklim.</p>
<button class="btn btn-primary">
<span class="btn-txt">Pendaftaran</span>
</button>
<button class="btn btn-red">
<a href="{{ route('login.login') }}"<span class="btn-txt">Login</span></a>
</button>
</div>
<div class="col-md-6 text-center order-1 order-md-2">
<img class="img-fluid" src="{{ asset('assets/images/bg.png') }}" alt="screenshot">
</div>
</div>
</div>
</section>
<!--==== End of Hero Section ====-->
<section class="section pt-0 position-relative pull-top">
<div class="container">
<div class="rounded shadow p-5 bg-white">
<div class="row">
<div class="col-lg-4 col-md-6 mt-5 mt-md-0 text-center">
<i class="ti-paint-bucket text-primary h1"></i>
<h3 class="mt-4 text-capitalize h5 ">Meningkatkan Kualitas Lingkungan</h3>
{{-- <p class="regular text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam
non, recusandae
tempore ipsam dignissimos molestias.</p> --}}
</div>
<div class="col-lg-4 col-md-6 mt-5 mt-md-0 text-center">
<i class="ti-shine text-primary h1"></i>
<h3 class="mt-4 text-capitalize h5 ">Membangun Ketahanan Masyarakat</h3>
{{-- <p class="regular text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam
non, recusandae
tempore ipsam dignissimos molestias.</p> --}}
</div>
<div class="col-lg-4 col-md-12 mt-5 mt-lg-0 text-center">
<i class="ti-thought text-primary h1"></i>
<h3 class="mt-4 text-capitalize h5 ">Menghemat Sumber Energi dan Daya</h3>
{{-- <p class="regular text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam
non, recusandae
tempore ipsam dignissimos molestias.</p> --}}
</p>
</div>
</div>
</div>
</div>
</section>
<!--==================================
= Feature Grid =
===================================-->
<section class="feature section pt-0">
<div class="container">
<div class="row">
<div class="col-lg-6 ml-auto justify-content-center">
<!-- Feature Mockup -->
<div class="image-content" data-aos="fade-right">
<img class="img-fluid" src="{{ asset('assets/images/feature/feature-new-01.jpg') }}"
alt="iphone">
</div>
</div>
<div class="col-lg-6 mr-auto align-self-center">
<div class="feature-content">
<!-- Feature Title -->
<h2>Increase your productivity with <a
href="https://themefisher.com/products/small-apps-free-app-landing-page-template/">Small
Apps</a></h2>
<!-- Feature Description -->
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut
aliquip ex ea commodo consequat.</p>
</div>
<!-- Testimonial Quote -->
<div class="testimonial">
<p>
"InVision is a window into everything that's being designed at Twitter. It gets all of our
best work in one
place."
</p>
<ul class="list-inline meta">
<li class="list-inline-item">
<img src="{{ asset('assets/images/testimonial/feature-testimonial-thumb.jpg') }}"
alt="">
</li>
<li class="list-inline-item">Jonathon Andrew , Themefisher.com</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<section class="feature section pt-0">
<div class="container">
<div class="row">
<div class="col-lg-6 ml-auto align-self-center">
<div class="feature-content">
<!-- Feature Title -->
<h2>Increase your productivity with <a
href="{{ asset('assets/images/feature/feature-new-02.jpg') }}">Small Apps</a></h2>
<!-- Feature Description -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex
ea commodo consequat.</p>
</div>
<!-- Testimonial Quote -->
<div class="testimonial">
<p>
"InVision is a window into everything that's being designed at Twitter. It gets all of our
best work in one
place."
</p>
<ul class="list-inline meta">
<li class="list-inline-item">
<img src="{{ asset('assets/images/testimonial/feature-testimonial-thumb.jpg') }}"
alt="">
</li>
<li class="list-inline-item">Jonathon Andrew , Themefisher.com</li>
</ul>
</div>
</div>
<div class="col-lg-6 mr-auto justify-content-center">
<!-- Feature mockup -->
<div class="image-content" data-aos="fade-left">
<img class="img-fluid" src="{{ asset('assets/images/feature/feature-new-02.jpg') }}"
alt="ipad">
</div>
</div>
</div>
</div>
</section>
<!--==== End of Feature Grid ====-->
<!--==============================
= Services =
===============================-->
<section class="service section bg-gray">
<div class="container-fluid p-0">
<div class="row">
<div class="col-lg-12">
<div class="section-title">
<h2>An Interface For Lifestyle</h2>
<p><a href="https://themefisher.com/products/small-apps-free-app-landing-page-template/">Small
Apps</a> makes
it easy to stay on top of your Life Style. No late tasks. No gimmicks.</p>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-lg-6 align-self-center">
<!-- Feature Image -->
<div class="service-thumb left" data-aos="fade-right">
<img class="img-fluid" src="{{ asset('assets/images/feature/iphone-ipad.jpg') }}"
alt="iphone-ipad">
</div>
</div>
<div class="col-lg-5 mr-auto align-self-center">
<div class="service-box">
<div class="row align-items-center">
<div class="col-md-6 col-xs-12">
<!-- Service 01 -->
<div class="service-item">
<!-- Icon -->
<i class="ti-bookmark"></i>
<!-- Heading -->
<h3>Easy Prototyping</h3>
<!-- Description -->
<p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur
aliquet quam id dui</p>
</div>
</div>
<div class="col-md-6 col-xs-12">
<!-- Service 01 -->
<div class="service-item">
<!-- Icon -->
<i class="ti-pulse"></i>
<!-- Heading -->
<h3>Sensor Bridge</h3>
<!-- Description -->
<p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur
aliquet quam id dui</p>
</div>
</div>
<div class="col-md-6 col-xs-12">
<!-- Service 01 -->
<div class="service-item">
<!-- Icon -->
<i class="ti-bar-chart"></i>
<!-- Heading -->
<h3>Strategist</h3>
<!-- Description -->
<p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur
aliquet quam id dui</p>
</div>
</div>
<div class="col-md-6 col-xs-12">
<!-- Service 01 -->
<div class="service-item">
<!-- Icon -->
<i class="ti-panel"></i>
<!-- Heading -->
<h3>Art Direction</h3>
<!-- Description -->
<p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur
aliquet quam id dui</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--==== End of Services ====-->
<!--=================================
= Video Promo =
==================================-->
<section class="video-promo section bg-1">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="content-block">
<!-- Heading -->
<h2>Watch Our PROKLIM Video</h2>
<!-- Promotional Speech -->
{{-- <p>Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur arcu erat, accumsan id
imperdiet et,
porttitor at sem. Vivamus </p> --}}
<!-- Popup Video -->
<a data-fancybox href="https://www.youtube.com/watch?v=jrkvirglgaQ">
<i class="ti-control-play video"></i>
</a>
</div>
</div>
</div>
</div>
</section>
<!--==== End of Video Promo ====-->
<!--=================================
= Testimonial =
==================================-->
<section class="section testimonial" id="testimonial">
<div class="container">
<div class="row">
<div class="col-lg-12">
<!-- Testimonial Slider -->
<div class="testimonial-slider owl-carousel owl-theme">
<!-- Testimonial 01 -->
<div class="item">
<div class="block shadow">
<!-- Speech -->
<p>
Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec sollicitudin
molestie malesuada.
Donec sollicitudin molestie malesuada. Pellentesque in ipsum id orci porta dapibus.
Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Pellentesque in ipsum id orci porta dapibus.
Quisque velit nisi,
pretium ut lacinia in, elementum id enim.
</p>
<!-- Person Thumb -->
<div class="image">
<img src="{{ asset('assets/images/testimonial/feature-testimonial-thumb.jpg') }}"
alt="image">
</div>
<!-- Name and Company -->
<cite>Abraham Linkon , Themefisher.com</cite>
</div>
</div>
<!-- Testimonial 01 -->
<div class="item">
<div class="block shadow">
<!-- Speech -->
<p>
Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec sollicitudin
molestie malesuada.
Donec sollicitudin molestie malesuada. Pellentesque in ipsum id orci porta dapibus.
Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Pellentesque in ipsum id orci porta dapibus.
Quisque velit nisi,
pretium ut lacinia in, elementum id enim.
</p>
<!-- Person Thumb -->
<div class="image">
<img src="{{ asset('assets/images/testimonial/feature-testimonial-thumb.jpg') }}"
alt="image">
</div>
<!-- Name and Company -->
<cite>Abraham Linkon , Themefisher.com</cite>
</div>
</div>
<!-- Testimonial 01 -->
<div class="item">
<div class="block shadow">
<!-- Speech -->
<p>
Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec sollicitudin
molestie malesuada.
Donec sollicitudin molestie malesuada. Pellentesque in ipsum id orci porta dapibus.
Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Pellentesque in ipsum id orci porta dapibus.
Quisque velit nisi,
pretium ut lacinia in, elementum id enim.
</p>
<!-- Person Thumb -->
<div class="image">
<img src="{{ asset('assets/images/testimonial/feature-testimonial-thumb.jpg') }}"
alt="image">
</div>
<!-- Name and Company -->
<cite>Abraham Linkon , Themefisher.com</cite>
</div>
</div>
<!-- Testimonial 01 -->
<div class="item">
<div class="block shadow">
<!-- Speech -->
<p>
Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Donec sollicitudin
molestie malesuada.
Donec sollicitudin molestie malesuada. Pellentesque in ipsum id orci porta dapibus.
Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Pellentesque in ipsum id orci porta dapibus.
Quisque velit nisi,
pretium ut lacinia in, elementum id enim.
</p>
<!-- Person Thumb -->
<div class="image">
<img src="{{ asset('assets/images/testimonial/feature-testimonial-thumb.jpg') }}"
alt="image">
</div>
<!-- Name and Company -->
<cite>Abraham Linkon , Themefisher.com</cite>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--==== End of Testimonial ====-->
<section class="call-to-action-app section bg-blue">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>It's time to change your mind</h2>
<p>Download over 2 million humans .Get <a
href="https://themefisher.com/products/small-apps-free-app-landing-page-template/">Small
Apps</a> free forever!
<br>We say you wont look back.
</p>
<ul class="list-inline">
<li class="list-inline-item">
<a href="" class="btn btn-rounded-icon">
<i class="ti-apple"></i>
Iphone
</a>
</li>
<li class="list-inline-item">
<a href="" class="btn btn-rounded-icon">
<i class="ti-android"></i>
Android
</a>
</li>
<li class="list-inline-item">
<a href="" class="btn btn-rounded-icon">
<i class="ti-microsoft-alt"></i>
Windows
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<!--============================
= Footer =
=============================-->
<footer>
<div class="footer-main">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-12 m-md-auto align-self-center">
<div class="block">
<a href="index.html"><img src="{{ asset('assets/images/logo-alt.png') }}"
alt="footer-logo"></a>
<!-- Social Site Icons -->
<ul class="social-icon list-inline">
<li class="list-inline-item">
<a href="https://www.facebook.com/themefisher"><i class="ti-facebook"></i></a>
</li>
<li class="list-inline-item">
<a href="https://twitter.com/themefisher"><i class="ti-twitter"></i></a>
</li>
<li class="list-inline-item">
<a href="https://www.instagram.com/themefisher/"><i class="ti-instagram"></i></a>
</li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-3 col-6 mt-5 mt-lg-0">
<div class="block-2">
<!-- heading -->
<h6>Product</h6>
<!-- links -->
<ul>
<li><a href="team.html">Teams</a></li>
<li><a href="blog.html">Blogs</a></li>
<li><a href="FAQ.html">FAQs</a></li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-3 col-6 mt-5 mt-lg-0">
<div class="block-2">
<!-- heading -->
<h6>Resources</h6>
<!-- links -->
<ul>
<li><a href="sign-up.html">Singup</a></li>
<li><a href="sign-in.html">Login</a></li>
<li><a href="blog.html">Blog</a></li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-3 col-6 mt-5 mt-lg-0">
<div class="block-2">
<!-- heading -->
<h6>Company</h6>
<!-- links -->
<ul>
<li><a href="career.html">Career</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="team.html">Investor</a></li>
<li><a href="privacy.html">Terms</a></li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-3 col-6 mt-5 mt-lg-0">
<div class="block-2">
<!-- heading -->
<h6>Company</h6>
<!-- links -->
<ul>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="team.html">Team</a></li>
<li><a href="privacy-policy.html">Privacy Policy</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="text-center bg-dark py-4">
<small class="text-secondary">Copyright &copy;
<script>
document.write(new Date().getFullYear())
</script>. Designed &amp; Developed by <a
href="https://themefisher.com/">Themefisher</a>
</small class="text-secondary">
</div>
<div class="text-center bg-dark py-1">
<small>
<p>Distributed By <a href="https://themewagon.com/">Themewagon</a></p>
</small class="text-secondary">
</div>
</footer>
<!-- To Top -->
<div class="scroll-top-to">
<i class="ti-angle-up"></i>
</div>
<!-- JAVASCRIPTS -->
<script src="{{ asset('assets/plugins/jquery/jquery.min.js') }}"></script>
<script src="{{ asset('assets/plugins/bootstrap/bootstrap.min.js') }}"></script>
<script src="{{ asset('assets/plugins/slick/slick.min.js') }}"></script>
<script src="{{ asset('assets/plugins/fancybox/jquery.fancybox.min.js') }}"></script>
<script src="{{ asset('assets/plugins/syotimer/jquery.syotimer.min.js') }}"></script>
<script src="{{ asset('assets/plugins/aos/aos.js') }}"></script>
<!-- google map -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAgeuuDfRlweIs7D6uo4wdIHVvJ0LonQ6g"></script>
<script src="{{ asset('assets/plugins/google-map/gmap.js') }}"></script>
<script src="{{ asset('assets/js/script.js') }}"></script>
</body>
</html>