decentralized-video-chat/public/landing/landing.html

389 lines
26 KiB
HTML
Raw Normal View History

2020-03-24 11:20:28 +08:00
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Neon Chat</title>
<link rel="stylesheet" href="css/style.css">
2020-03-24 12:00:47 +08:00
<link rel="shortcut icon" href="images/logo.svg">
2020-03-24 13:04:30 +08:00
<style>
.pulse {
/*margin:100px;*/
/*display: block;*/
/*width: 22px;*/
/*height: 22px;*/
/*border-radius: 50%;*/
/*background: #cca92c;*/
/*cursor: pointer;*/
box-shadow: 0 0 0 rgba(120, 120, 120, 0.4);
animation: pulse 4s infinite;
}
.pulse:hover {
animation: none;
}
@-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(120, 120, 120, 0.4);
}
70% {
-webkit-box-shadow: 0 0 0 15px rgba(120, 120, 120, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(120, 120, 120, 0);
}
}
@keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(120, 120, 120, 0.4);
box-shadow: 0 0 0 0 rgba(120, 120, 120, 0.4);
}
70% {
-moz-box-shadow: 0 0 0 10px rgba(120, 120, 120, 0);
box-shadow: 0 0 0 15px rgba(120, 120, 120, 0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(120, 120, 120, 0);
box-shadow: 0 0 0 0 rgba(120, 120, 120, 0);
}
}
</style>
2020-03-24 11:20:28 +08:00
</head>
<body class="has-animations">
<div class="body-wrap">
<header class="site-header reveal-from-top">
<div class="container">
<div class="site-header-inner">
<div class="brand"><h1 class="m-0"><a href="landing.html"><img src="images/logo.svg" alt="Neon"
width="32"
height="32"></a></h1></div>
<button id="header-nav-toggle" class="header-nav-toggle" aria-controls="primary-menu"
aria-expanded="false"><span class="screen-reader">Menu</span> <span class="hamburger"><span
class="hamburger-inner"></span></span></button>
<!-- <nav id="header-nav" class="header-nav">-->
<!-- <div class="header-nav-inner">-->
<!-- <ul class="list-reset text-xxs header-nav-right">-->
<!-- <li><a href="additional.html">Secondary page</a></li>-->
<!-- </ul>-->
<!-- <ul class="list-reset header-nav-right">-->
<!-- <li><a class="button button-primary button-sm" href="signup.html">Sign up</a></li>-->
<!-- </ul>-->
<!-- </div>-->
<!-- </nav>-->
</div>
</div>
</header>
<main class="site-content">
<section class="hero section illustration-section-01">
<div class="container">
<div class="hero-inner section-inner">
<div class="split-wrap invert-mobile">
<div class="split-item">
<div class="hero-content split-item-content center-content-mobile"><h1
class="mt-0 mb-16 reveal-from-bottom" data-reveal-delay="150">The most advanced
video chat ever created.</h1>
<p class="mt-0 mb-32 reveal-from-bottom" data-reveal-delay="300">Decentralized video
calling provides real-time HD quality and latency simply
not available with traditional technology.</p>
<div class="reveal-from-bottom" data-reveal-delay="450"><a
2020-03-24 13:04:30 +08:00
class="button button-primary button-wide-mobile pulse"
style="border:0; background: linear-gradient(100deg, #376DF9 0, #FF5FA0 75%, #FFC55A 100%);"
href="/">Try now</a>
2020-03-24 11:20:28 +08:00
</div>
</div>
<style>@media (min-width: 641px) {
.hero .split-wrap .split-item {
min-height: 492px
}
}</style>
</div>
</div>
</div>
</div>
</section>
<div>
<!-- <section class="clients section reveal-fade">-->
<!-- <div class="container">-->
<!-- <div class="clients-inner section-inner has-top-divider has-bottom-divider">-->
<!-- <ul class="list-reset">-->
<!-- <li class="reveal-from-top"><img src="images/clients-01.svg" alt="Clients 01"></li>-->
<!-- <li class="reveal-from-bottom" data-reveal-delay="150"><img src="images/clients-02.svg"-->
<!-- alt="Clients 02"></li>-->
<!-- <li class="reveal-from-top" data-reveal-delay="300"><img src="images/clients-03.svg"-->
<!-- alt="Clients 03"></li>-->
<!-- <li class="reveal-from-bottom" data-reveal-delay="450"><img src="images/clients-04.svg"-->
<!-- alt="Clients 04"></li>-->
<!-- <li class="reveal-from-top" data-reveal-delay="600"><img src="images/clients-05.svg"-->
<!-- alt="Clients 05"></li>-->
<!-- </ul>-->
<!-- </div>-->
<!-- </div>-->
<!-- </section>-->
<!-- Video-->
<!-- <section class="section center-content">-->
<!-- <div class="container">-->
<!-- <div class="section-inner">-->
<!-- <div class="section-header reveal-from-bottom">-->
<!-- <div class="container-xs"><h2 class="mt-0 mb-16">Built exclusively for you</h2>-->
<!-- <p class="m-0">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore-->
<!-- eu fugiat nulla pariatur excepteur sint — occaecat cupidatat non proident, sunt in culpa-->
<!-- qui.</p></div>-->
<!-- </div>-->
<!-- <div class="reveal-from-bottom"><a class="modal-trigger" aria-controls="modal-01"-->
<!-- data-video="https://player.vimeo.com/video/174002812"-->
<!-- href="#"><img src="images/video-placeholder.svg" alt="Video"-->
<!-- width="712" height="400"></a></div>-->
<!-- <div id="modal-01" class="modal modal-video">-->
<!-- <div class="modal-inner">-->
<!-- <div class="responsive-video">-->
<!-- <iframe src="#" frameborder="0" webkitallowfullscreen mozallowfullscreen-->
<!-- allowfullscreen></iframe>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </section>-->
<!-- End Video-->
</div>
<section class="features-tiles section center-content">
<div class="container">
<div class="features-tiles-inner section-inner has-top-divider">
<div class="section-header">
2020-03-24 12:00:47 +08:00
<div class="container-xs reveal-from-bottom" data-reveal-delay="650"><h2 class="mt-0 mb-16">See
the whole picture</h2>
<p class="m-0">Neon chat is built radically different to any other video chat you've used.
Under the hood ddecentralized peer to peer calling for maximum video quality
with the lowest latency. Its good, trust us.</p></div>
2020-03-24 11:20:28 +08:00
</div>
<div class="tiles-wrap">
<div class="tiles-item reveal-from-right">
<div class="tiles-item-inner">
<div class="features-tiles-item-header">
<div class="features-tiles-item-image mb-16"><img
src="images/feature-tile-icon-01.svg" alt="Feature tile icon 01" width="72"
height="72"></div>
</div>
2020-03-24 12:00:47 +08:00
<div class="features-tiles-item-content"><h4 class="mt-0 mb-8">Lowest Latency</h4>
<p class="m-0 text-sm">Breakthrough peer to peer WebRTC technology means your
video feed goes directly to the other person without a server. No middleman. No
extra stops.</p>
</div>
2020-03-24 11:20:28 +08:00
</div>
</div>
<div class="tiles-item reveal-from-left">
<div class="tiles-item-inner">
<div class="features-tiles-item-header">
<div class="features-tiles-item-image mb-16"><img
src="images/feature-tile-icon-02.svg" alt="Feature tile icon 02" width="72"
height="72"></div>
</div>
2020-03-24 12:00:47 +08:00
<div class="features-tiles-item-content"><h4 class="mt-0 mb-8">Best Video Quality</h4>
<p class="m-0 text-sm">State of the art video compression and scaling optimization
mean your calls have never looked better.</p></div>
2020-03-24 11:20:28 +08:00
</div>
</div>
<div class="tiles-item reveal-from-right">
<div class="tiles-item-inner">
<div class="features-tiles-item-header">
<div class="features-tiles-item-image mb-16"><img
src="images/feature-tile-icon-03.svg" alt="Feature tile icon 03" width="72"
height="72"></div>
</div>
2020-03-24 12:00:47 +08:00
<div class="features-tiles-item-content"><h4 class="mt-0 mb-8">Total Privacy</h4>
<p class="m-0 text-sm">Each chat room is single use with data only
transferring between the two callers. Your data is yours to keep.</p></div>
2020-03-24 11:20:28 +08:00
</div>
</div>
<div class="tiles-item reveal-from-left">
<div class="tiles-item-inner">
<div class="features-tiles-item-header">
<div class="features-tiles-item-image mb-16"><img
src="images/feature-tile-icon-04.svg" alt="Feature tile icon 04" width="72"
height="72"></div>
</div>
2020-03-24 12:00:47 +08:00
<div class="features-tiles-item-content"><h4 class="mt-0 mb-8">No Download Required</h4>
<p class="m-0 text-sm">No download means you can get back to what matter most. Just
open chats in Chrome or Firefox.</p></div>
2020-03-24 11:20:28 +08:00
</div>
</div>
2020-03-24 12:00:47 +08:00
2020-03-24 11:20:28 +08:00
<div class="tiles-item reveal-from-right">
<div class="tiles-item-inner">
<div class="features-tiles-item-header">
<div class="features-tiles-item-image mb-16"><img
src="images/feature-tile-icon-05.svg" alt="Feature tile icon 05" width="72"
height="72"></div>
</div>
2020-03-24 12:00:47 +08:00
<div class="features-tiles-item-content"><h4 class="mt-0 mb-8">No Server Needed</h4>
<p class="m-0 text-sm">Calls are entirely between you and the other caller.
Decentralized from any server. Data never leaves the browser. Cool right?</p>
</div>
2020-03-24 11:20:28 +08:00
</div>
</div>
2020-03-24 12:00:47 +08:00
2020-03-24 11:20:28 +08:00
<div class="tiles-item reveal-from-left">
<div class="tiles-item-inner">
<div class="features-tiles-item-header">
<div class="features-tiles-item-image mb-16"><img
src="images/feature-tile-icon-06.svg" alt="Feature tile icon 06" width="72"
height="72"></div>
</div>
2020-03-24 12:00:47 +08:00
<div class="features-tiles-item-content"><h4 class="mt-0 mb-8">Maximum Security</h4>
<p class="m-0 text-sm">End to end state of the art encryption means your calls are
exactly that. Your calls.</p></div>
2020-03-24 11:20:28 +08:00
</div>
</div>
</div>
</div>
2020-03-24 12:00:47 +08:00
</div>
</section>
<section class="section">
<div class="container">
<div class="section-inner has-top-divider">
<div class="container-xs">
2020-03-24 13:04:30 +08:00
<div class="section-header center-content"><h2 class="m-0">Tired of the old way of
2020-03-24 12:00:47 +08:00
chatting? </h2></div>
<div class="center-content">
2020-03-24 13:04:30 +08:00
<a class="button button-primary button-wide-mobile pulse"
style="border:0; background: linear-gradient(100deg, #376DF9 0, #FF5FA0 75%, #FFC55A 100%);"
href="/">Try now</a>
2020-03-24 12:00:47 +08:00
</div>
</div>
</div>
2020-03-24 11:20:28 +08:00
</div>
</section>
<div>
<!-- <section class="testimonial section">-->
<!-- <div class="container">-->
<!-- <div class="testimonial-inner section-inner has-top-divider">-->
<!-- <div class="section-header center-content">-->
<!-- <div class="container-xs"><h2 class="mt-0 mb-16">Don't take our word for it</h2>-->
<!-- <p class="m-0">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore-->
<!-- eu fugiat nulla pariatur excepteur sint — occaecat cupidatat non proident, sunt in culpa-->
<!-- qui.</p></div>-->
<!-- </div>-->
<!-- <div class="tiles-wrap">-->
<!-- <div class="tiles-item reveal-from-right" data-reveal-delay="200">-->
<!-- <div class="tiles-item-inner">-->
<!-- <div class="testimonial-item-content"><p class="text-sm mb-0">— Duis aute irure dolor in-->
<!-- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.-->
<!-- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt-->
<!-- mollit anim id est laborum cillum dolore eu fugiat.</p></div>-->
<!-- <div class="testimonial-item-footer text-xs mt-32 mb-0 has-top-divider"><span-->
<!-- class="testimonial-item-name text-color-high">Roman Level</span> <span-->
<!-- class="text-color-low">/ </span><span class="testimonial-item-link"><a href="#">AppName</a></span>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="tiles-item reveal-from-bottom">-->
<!-- <div class="tiles-item-inner">-->
<!-- <div class="testimonial-item-content"><p class="text-sm mb-0">— Duis aute irure dolor in-->
<!-- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.-->
<!-- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt-->
<!-- mollit anim id est laborum cillum dolore eu fugiat.</p></div>-->
<!-- <div class="testimonial-item-footer text-xs mt-32 mb-0 has-top-divider"><span-->
<!-- class="testimonial-item-name text-color-high">Diana Rynzhuk</span> <span-->
<!-- class="text-color-low">/ </span><span class="testimonial-item-link"><a href="#">AppName</a></span>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="tiles-item reveal-from-left" data-reveal-delay="200">-->
<!-- <div class="tiles-item-inner">-->
<!-- <div class="testimonial-item-content"><p class="text-sm mb-0">— Duis aute irure dolor in-->
<!-- reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.-->
<!-- Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt-->
<!-- mollit anim id est laborum cillum dolore eu fugiat.</p></div>-->
<!-- <div class="testimonial-item-footer text-xs mt-32 mb-0 has-top-divider"><span-->
<!-- class="testimonial-item-name text-color-high">Ben Stafford</span> <span-->
<!-- class="text-color-low">/ </span><span class="testimonial-item-link"><a href="#">AppName</a></span>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </section>-->
<!-- <section class="cta section center-content-mobile reveal-from-bottom">-->
<!-- <div class="container">-->
<!-- <div class="cta-inner section-inner cta-split">-->
<!-- <div class="cta-slogan"><h3 class="m-0">For previewing layouts and visual?</h3></div>-->
<!-- <div class="cta-action">-->
<!-- <div class="has-icon-right"><label for="newsletter"-->
<!-- class="form-label screen-reader">Subscribe</label> <input-->
<!-- id="newsletter" class="form-input" type="email" placeholder="Your best email">-->
<!-- <svg width="16" height="12" xmlns="http://www.w3.org/2000/svg">-->
<!-- <path d="M9 5H1c-.6 0-1 .4-1 1s.4 1 1 1h8v5l7-6-7-6v5z" fill="#376DF9"-->
<!-- fill-rule="nonzero"/>-->
<!-- </svg>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </section>-->
</div>
</main>
<footer class="site-footer center-content-mobile">
<div class="container">
<div class="site-footer-inner">
<div class="footer-top space-between text-xxs">
<div class="brand"><a href="landing.html"><img src="images/logo.svg" alt="Neon" width="32"
height="32"></a>
</div>
<!-- <div class="footer-social">-->
<!-- <ul class="list-reset">-->
<!-- <li><a href="#">-->
<!-- <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">-->
<!-- <title>Facebook</title>-->
<!-- <path d="M6.023 16L6 9H3V6h3V4c0-2.7 1.672-4 4.08-4 1.153 0 2.144.086 2.433.124v2.821h-1.67c-1.31 0-1.563.623-1.563 1.536V6H13l-1 3H9.28v7H6.023z"/>-->
<!-- </svg>-->
<!-- </a></li>-->
<!-- <li><a href="#">-->
<!-- <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">-->
<!-- <title>Twitter</title>-->
<!-- <path d="M16 3c-.6.3-1.2.4-1.9.5.7-.4 1.2-1 1.4-1.8-.6.4-1.3.6-2.1.8-.6-.6-1.5-1-2.4-1-1.7 0-3.2 1.5-3.2 3.3 0 .3 0 .5.1.7-2.7-.1-5.2-1.4-6.8-3.4-.3.5-.4 1-.4 1.7 0 1.1.6 2.1 1.5 2.7-.5 0-1-.2-1.5-.4C.7 7.7 1.8 9 3.3 9.3c-.3.1-.6.1-.9.1-.2 0-.4 0-.6-.1.4 1.3 1.6 2.3 3.1 2.3-1.1.9-2.5 1.4-4.1 1.4H0c1.5.9 3.2 1.5 5 1.5 6 0 9.3-5 9.3-9.3v-.4C15 4.3 15.6 3.7 16 3z"/>-->
<!-- </svg>-->
<!-- </a></li>-->
<!-- <li><a href="#">-->
<!-- <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">-->
<!-- <title>Instagram</title>-->
<!-- <g>-->
<!-- <circle cx="12.145" cy="3.892" r="1"/>-->
<!-- <path d="M8 12c-2.206 0-4-1.794-4-4s1.794-4 4-4 4 1.794 4 4-1.794 4-4 4zm0-6c-1.103 0-2 .897-2 2s.897 2 2 2 2-.897 2-2-.897-2-2-2z"/>-->
<!-- <path d="M12 16H4c-2.056 0-4-1.944-4-4V4c0-2.056 1.944-4 4-4h8c2.056 0 4 1.944 4 4v8c0 2.056-1.944 4-4 4zM4 2c-.935 0-2 1.065-2 2v8c0 .953 1.047 2 2 2h8c.935 0 2-1.065 2-2V4c0-.935-1.065-2-2-2H4z"/>-->
<!-- </g>-->
<!-- </svg>-->
<!-- </a></li>-->
<!-- </ul>-->
<!-- </div>-->
</div>
<div class="footer-bottom space-between text-xxs invert-order-desktop">
2020-03-24 12:00:47 +08:00
<nav class="footer-nav">
<ul class="list-reset">
<li><a href="https://ianramzy.com">Another Project By Ian Ramzy</a></li>
<!-- <li><a href="#">Contact</a></li>-->
<!-- <li><a href="#">About us</a></li>-->
<!-- <li><a href="#">FAQ's</a></li>-->
<!-- <li><a href="#">Support</a></li>-->
</ul>
</nav>
2020-03-24 11:20:28 +08:00
<div class="footer-copyright">&copy; 2020 Neon Chat, all rights reserved</div>
</div>
</div>
</div>
</footer>
</div>
<script src="js/main.min.js"></script>
</body>
</html>