Initial commit

2018-07-01 01:17:14 +08:00 · 2018-07-01 01:17:14 +08:00 · c2e59caee1
commit c2e59caee1
36 changed files with 5160 additions and 0 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,10 @@
+module.exports = {
+	root: true,
+	extends: [
+		'airbnb-base',
+	],
+	rules: {
+		indent: ['error', 'tab'],
+		'no-tabs': 'off',
+	},
+};
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,4 @@
+node_modules
+
+public
+static
--- a/.modernizr.json
+++ b/.modernizr.json
@ -0,0 +1,9 @@
+{
+	"options": ["setClasses"],
+	"feature-detects": [
+		"css/customproperties",
+		"test/css/cssgrid",
+		"test/css/backgroundcliptext",
+		"dom/passiveeventlisteners"
+	]
+}
--- a/.sasslintrc
+++ b/.sasslintrc
@ -0,0 +1,5 @@
+{
+	"rules": {
+		"no-ids": 1
+	}
+}
--- a/Gruntfile.js
+++ b/Gruntfile.js
@ -0,0 +1,95 @@
+const path = require('path');
+
+const autoprefixer = require('autoprefixer');
+const sass = require('node-sass');
+
+module.exports = function init(grunt) {
+	grunt.initConfig({
+		pkg: grunt.file.readJSON('package.json'),
+
+		// CSS
+
+		sass: {
+			options: {
+				implementation: sass,
+				includePaths: ['.', path.resolve(__dirname, 'node_modules')],
+				outputStyle: 'compressed',
+				sourceMap: true,
+			},
+			dist: {
+				expand: true,
+				cwd: 'src/',
+				src: ['**/*.scss'],
+				dest: 'static/',
+				ext: '.css',
+			},
+		},
+		postcss: {
+			options: {
+				map: true,
+				processors: [
+					autoprefixer({ browsers: 'last 1 version, not dead, >1% in SG' }),
+				],
+			},
+			dist: {
+				expand: true,
+				cwd: 'static/',
+				src: ['**/*.css'],
+				dest: 'static/',
+			},
+		},
+
+		// SVG
+
+		svgmin: {
+			dist: {
+				expand: true,
+				cwd: 'src/',
+				src: ['**/*.svg'],
+				dest: 'static/',
+			},
+		},
+
+		// JS
+
+		babel: {
+			options: {
+				presets: ['@babel/preset-env'],
+				sourceMap: true,
+			},
+			dist: {
+				expand: true,
+				cwd: 'src/',
+				src: ['**/*.js'],
+				dest: 'static/',
+			},
+		},
+
+		watch: {
+			css: {
+				files: 'src/**/*.scss',
+				tasks: ['sass', 'postcss'],
+			},
+			svg: {
+				files: 'src/**/*.svg',
+				tasks: ['svgmin'],
+			},
+			js: {
+				files: 'src/**/*.js',
+				tasks: ['babel'],
+			},
+		},
+	});
+
+	// CSS
+	grunt.loadNpmTasks('grunt-sass');
+	grunt.loadNpmTasks('grunt-postcss');
+	// SVG
+	grunt.loadNpmTasks('grunt-svgmin');
+	// JS
+	grunt.loadNpmTasks('grunt-babel');
+
+	grunt.loadNpmTasks('grunt-contrib-watch');
+
+	grunt.registerTask('default', ['sass', 'postcss', 'svgmin', 'babel']);
+};
--- a/config.toml
+++ b/config.toml
@ -0,0 +1,4 @@
+#baseURL = "https://beepvoice.app"
+baseURL = "https://beepvoice.app/"
+languageCode = "en"
+title = "Beep"
--- a/content/_index.html
+++ b/content/_index.html
@ -0,0 +1,27 @@
+---
+title: "Beep"
+date: 2018-06-30T17:53:55+08:00
+---
+
+<div class="home-hero-wrapper">
+
+	<svg width="1" height="1" viewBox="0 0 1 1" preserveAspectRatio="none" class="background-cut">
+		<polygon points="0,0 1,0 0,1" style="fill:#fff" />
+	</svg>
+
+	<section class="home-hero">
+		
+		<div class="text">
+			<h1>The new way to communicate</h1>
+
+			<!-- <a href="/get"><div class="btn">Get the app</div></a> -->
+			Coming soon
+		</div>
+
+		<div class="picture">
+			<img class="screenshot" src="screenshot.svg" />
+		</div>
+
+	</section>
+
+</div>
--- a/content/company/_index.html
+++ b/content/company/_index.html
@ -0,0 +1,20 @@
+---
+title: "Company"
+date: 2018-06-30T17:53:55+08:00
+---
+
+<div class="company-hero-wrapper">
+
+	<section class="company-hero">
+
+		<h1>We're a team of people dedicated to building a genuine form of communication.</h1>
+
+		<p>
+			Beep is a telecommunications company trying to reinvent online communication. We're 
+			applying voice communication into messaging to make online conversations more fluid 
+			and expressive.
+		</p>
+
+	</section>
+
+</div>
--- a/content/enterprise/_index.html
+++ b/content/enterprise/_index.html
@ -0,0 +1,11 @@
+---
+title: "Beep for Enterprise"
+date: 2018-06-30T17:53:55+08:00
+---
+
+<section class="frame">
+	
+	<h1>Beep for Enterprise</h1>
+	<p>Want to use Beep in your organisation when it's available? <a href="{{ "/contact" | relURL }}">Contact us</a></p>
+
+</section>
--- a/content/get/_index.html
+++ b/content/get/_index.html
@ -0,0 +1,12 @@
+---
+title: "Beep"
+date: 2018-06-30T17:53:55+08:00
+---
+
+<div class="frame">
+
+	<h1>Get Beep</h1>
+
+	<p>Beep isn't ready yet. Check back later.</p>
+
+</div>
--- a/content/pricing/_index.html
+++ b/content/pricing/_index.html
@ -0,0 +1,5 @@
+---
+title: "Pricing"
+date: 2018-06-30T17:42:14+08:00
+---
+Hello
--- a/content/screenshot.svg
+++ b/content/screenshot.svg
--- a/layouts/404.html
+++ b/layouts/404.html
@ -0,0 +1,11 @@
+{{ partial "header.html" . }}
+
+{{ partial "navigation.html" . }}
+
+<main class="frame" style="text-align: center">
+	<h1>Coming soon</h1>
+</main>
+
+{{ partial "navigation-footer.html" . }}
+
+{{ partial "footer.html" . }}
--- a/layouts/_default/index.html
+++ b/layouts/_default/index.html
@ -0,0 +1,9 @@
+{{ partial "header.html" . }}
+
+{{ partial "navigation.html" . }}
+
+{{ .Content }}
+
+{{ partial "navigation-footer.html" . }}
+
+{{ partial "footer.html" . }}
--- a/layouts/_default/section.html
+++ b/layouts/_default/section.html
@ -0,0 +1,9 @@
+{{ partial "header.html" . }}
+
+{{ partial "navigation.html" . }}
+
+{{ .Content }}
+
+{{ partial "navigation-footer.html" . }}
+
+{{ partial "footer.html" . }}
--- a/layouts/partials/badbrowser.html
+++ b/layouts/partials/badbrowser.html
@ -0,0 +1,3 @@
+<div class="badbrowser">
+	Your browser is outdated, so some things may look wonky.
+</div>
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@ -0,0 +1,2 @@
+</body>
+</html>
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="{{ .Site.LanguageCode }}">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta name="referrer" content="no-referrer-when-downgrade">
+
+	<title>
+		{{ $url := replace .Permalink ( printf "%s" .Site.BaseURL) "" }}
+		{{ if eq $url "/" }}
+			{{ .Site.Title }}
+		{{ else }}
+			{{ .Title }}
+		{{ end }}
+	</title>
+
+	<link rel="canonical" href="{{ .Permalink }}">
+
+	{{ partial "resources.html" . }}
+</head>
+<body>
+
+	{{ partial "badbrowser.html" . }}
+
--- a/layouts/partials/navigation-footer.html
+++ b/layouts/partials/navigation-footer.html
@ -0,0 +1,72 @@
+<nav class="navfooter">
+	<div class="icon">
+		<img src="{{ "/appicon.svg" | relURL }}">
+	</div>
+	<div class="groups">
+		<div class="group">
+			<a href="{{ "/get" | relURL }}">
+				<div class="link">Get the app</div>
+			</a>
+			<a href="{{ "/account" | relURL }}">
+				<div class="link">Manage account</div>
+			</a>
+			<a href="{{ "/help" | relURL }}">
+				<div class="link">Help center</div>
+			</a>
+		</div>
+		<div class="group">
+			<a href="{{ "/enterprise" | relURL }}">
+				<div class="title">
+					Beep for Enterprise
+				</div>
+			</a>
+			<a href="{{ "/enterprise#benefits" | relURL }}">
+				<div class="link">Benefits</div>
+			</a>
+			<a href="{{ "/enterprise#pricing" | relURL }}">
+				<div class="link">Pricing</div>
+			</a>
+			<a href="{{ "/enterprise#get" | relURL }}">
+				<div class="link">Get started</div>
+			</a>
+			<a href="{{ "/enterprise#api" | relURL }}">
+				<div class="link">API</div>
+			</a>
+		</div>
+		<div class="group">
+			<div class="title">
+				Social
+			</div>
+			<a href="{{ "https://twitter.com/beepvoice" | relURL }}">
+				<div class="link">Twitter</div>
+			</a>
+			<a href="{{ "https://instagram.com/beepvoice" | relURL }}">
+				<div class="link">Instagram</div>
+			</a>
+			<a href="{{ "/contact" | relURL }}">
+				<div class="link">Contact us</div>
+			</a>
+		</div>
+		<div class="group">
+			<div class="group">
+				<div class="title">
+					Company
+				</div>
+				<a href="{{ "/company" | relURL }}">
+					<div class="link">About us</div>
+				</a>
+			</div>
+			<div class="group">
+				<div class="title">
+					Legal
+				</div>
+				<a href="{{ "/privacy" | relURL }}">
+					<div class="link">Your privacy matters</div>
+				</a>
+				<a href="{{ "/terms" | relURL }}">
+					<div class="link">Terms and conditions</div>
+				</a>
+			</div>
+		</div>
+	</div>
+</nav>
--- a/layouts/partials/navigation.html
+++ b/layouts/partials/navigation.html
@ -0,0 +1,21 @@
+<div class="navbar-wrapper">
+	<nav class="navbar">
+		<div class="brand">
+			<a href="{{ "/" | relURL }}">
+				<img src="{{ "/logo.svg" | relURL }}">
+			</a>
+		</div>
+		<input type="checkbox" class="menu material-icons">
+		<div class="links">
+			<a href="{{ "/#features" | relURL }}">
+				<div class="link">Features</div>
+			</a>
+			<a href="{{ "/enterprise" | relURL }}">
+				<div class="link">Enterprise</div>
+			</a>
+			<a href="{{ "/get" | relURL }}">
+				<div class="link button">Download</div>
+			</a>
+		</div>
+	</nav>
+</div>
--- a/layouts/partials/resources.html
+++ b/layouts/partials/resources.html
@ -0,0 +1,5 @@
+<link rel="stylesheet" href="https://rsms.me/inter/inter-ui.css">
+<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+<link rel="stylesheet" href="{{ "/main.css" | relURL }}">
+<script type="text/javascript" src="{{ "/modernizr.js" | relURL }}" async></script>
+<script type="text/javascript" src="{{ "/sticky.js" | relURL }}" async></script>
--- a/package.json
+++ b/package.json
@ -0,0 +1,28 @@
+{
+  "name": "beep-website",
+  "version": "1.0.0",
+  "scripts": {
+    "build": "modernizr -c .modernizr.json -d static/modernizr.js && grunt",
+    "lint": "eslint --fix src/**/*.js && sass-lint src/**/*.scss",
+    "watch": "grunt watch"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0-beta.51",
+    "@babel/preset-env": "^7.0.0-beta.51",
+    "autoprefixer": "^8.6.4",
+    "eslint": "^5.0.1",
+    "eslint-config-airbnb-base": "^13.0.0",
+    "eslint-plugin-import": "^2.13.0",
+    "grunt": "^1.0.3",
+    "grunt-babel": "^8.0.0-beta.0",
+    "grunt-cli": "^1.2.0",
+    "grunt-contrib-watch": "^1.1.0",
+    "grunt-postcss": "^0.9.0",
+    "grunt-sass": "^3.0.0",
+    "grunt-svgmin": "^5.0.0",
+    "node-sass": "^4.9.0",
+    "normalize.css": "^8.0.0",
+    "modernizr": "github:Modernizr/Modernizr#c5ffa86ccfa56a4a898b9004ea7a3aa337a09551",
+    "sass-lint": "^1.12.1"
+  }
+}
--- a/src/_badbrowser.scss
+++ b/src/_badbrowser.scss
@ -0,0 +1,14 @@
+.badbrowser {
+	display: none;
+	padding: 1.5rem;
+	background: #ffe0db;
+	color: #661104;
+}
+
+.no-customproperties,
+.no-cssgrid,
+.no-backgroundcliptext {
+	.badbrowser {
+		display: block;
+	}
+}
--- a/src/_base.scss
+++ b/src/_base.scss
@ -0,0 +1,103 @@
+
+// BASE
+
+*, *:before, *:after {
+	box-sizing: border-box;
+}
+
+// UNITS
+
+html {
+	font-size: 16px;
+}
+
+// ELEVATION
+
+:root {
+	--elevation-color: rgba(0, 0, 0, 0.333);
+	--elevation-color-on-dark: rgba(0, 0, 0, 0.5);
+	@for $elevation from 1 to 24 {
+		--elevation-#{$elevation}: #{$elevation/16/2}rem #{$elevation/16/2}rem #{$elevation/16*2}rem var(--elevation-color);
+		--elevation-#{$elevation}-on-dark: #{$elevation/16/2}rem #{$elevation/16/2}rem #{$elevation/16*2}rem var(--elevation-color-on-dark);
+	}
+}
+
+// COLOR
+
+$color-deep-blue: #364dfc;
+$color-cyan-blue: #27d8ed;
+
+$color-mute: mix($color-deep-blue, $color-cyan-blue, 15%);
+$color-chill: mix($color-deep-blue, $color-cyan-blue, 50%);
+$color-bold: mix($color-deep-blue, $color-cyan-blue, 75%);
+
+$color-primary: $color-bold;
+$color-secondary: $color-mute;
+$color-middle: $color-chill;
+
+$color-highlight: transparentize($color-chill, 0.25);
+
+$color-text: mix($color-chill, #002, 33.3%);
+
+:root {
+	// theme
+	--color-gradient-primary: #{$color-primary};
+	--color-gradient-secondary: #{$color-secondary};
+	--color-primary: #{$color-primary};
+	--color-secondary: #{$color-secondary};
+	--color-middle: #{$color-middle};
+	// interactions
+	--color-highlight: #{$color-highlight};
+	// text
+	--color-text: #{$color-text};
+	--color-text-bold: #{$color-primary};
+}
+
+// GRADIENTS
+
+:root {
+	--gradient-linear: linear-gradient(120deg, var(--color-gradient-secondary) 20%, var(--color-gradient-primary) 80%);
+	--gradient-linear-background: linear-gradient(180deg, var(--color-gradient-secondary) 0%, var(--color-gradient-primary) 100%);
+	--gradient-linear-background-reverse: linear-gradient(0deg, var(--color-gradient-secondary) 0%, var(--color-gradient-primary) 100%);
+	--gradient-radial: radial-gradient(circle at right bottom, var(--color-gradient-secondary) 0%, var(--color-gradient-primary) 100%);
+	--gradient-radial-text: radial-gradient(ellipse at 90% 100%, var(--color-gradient-secondary) 16.66%, var(--color-gradient-primary) 83.33%);
+	--gradient-radial-reverse: radial-gradient(circle at left top, var(--color-gradient-secondary) 0%, var(--color-gradient-primary) 100%);
+}
+
+// TYPOGRAPHY
+
+body {
+	line-height: 1.2;
+	font-family: 'Inter UI';
+	color: var(--color-text);
+}
+
+// RADIUS
+
+:root {
+	--radius-cut: 1.5rem;
+	--radius-dialog: 0.5rem;
+}
+
+// PADDING
+
+:root {
+	@for $padding from 1 to 48 {
+		--padding-#{$padding}: #{$padding/16}rem;
+	}
+}
+
+// SIZES
+
+:root {
+	--safe-top: 0px;
+	--size-appbar: 3.5rem;
+	--safe-bottom: 0px;
+	--size-controls: 3.5rem;
+}
+
+// TODO: better solution
+
+input, textarea, button, a {
+	outline: none;
+}
--- a/src/_company.scss
+++ b/src/_company.scss
@ -0,0 +1,7 @@
+.company-hero-wrapper {
+
+}
+
+.company-hero {
+	@extend .frame;
+}
--- a/src/_frame.scss
+++ b/src/_frame.scss
@ -0,0 +1,16 @@
+.frame {
+	padding: 2rem;
+	margin: 0 auto;
+	max-width: 64rem + 6rem * 2;
+
+	@media screen and (min-width: 60rem) {
+		padding-left: 6rem;
+		padding-right: 6rem;
+	}
+	
+	@media screen and (max-width: 40rem) {
+		padding: 1.5rem;
+		padding: 1.5rem;
+	}
+}
+
--- a/src/_home.scss
+++ b/src/_home.scss
@ -0,0 +1,81 @@
+.home-hero-wrapper {
+
+	position: relative;
+	background: var(--gradient-linear-background);
+	overflow: hidden;
+
+	.background-cut {
+		z-index: 5;
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 90%;
+
+		@media screen and (max-width: 40rem) {
+			width: 60rem;
+			height: 30rem;
+		}
+	}
+
+	.home-hero { // force hero content back on top
+		z-index: 10;
+		position: relative;
+	}
+
+}
+
+.home-hero {
+	@extend .frame;
+
+	display: flex;
+	align-items: center;
+	
+	@media screen and (max-width: 40rem) {
+		flex-direction: column;
+		align-items: stretch;
+	}
+
+	.text {
+		flex: 1;
+		
+		padding-bottom: 10rem;
+		@media screen and (max-width: 40rem) {
+			padding-bottom: 0;
+		}
+	}
+	
+	h1 {
+		margin: 0.333em 0;
+
+		background: var(--gradient-radial-text);
+		background-clip: text;
+		-webkit-background-clip: text;
+		color: transparent;
+
+		font-size: 3rem;
+		@media screen and (max-width: 50rem) {
+			font-size: 2rem;
+		}
+	}
+
+	.picture {
+		padding-left: 1rem;
+		padding-right: 6rem;
+		@media screen and (max-width: 50rem) {
+			padding-right: 2rem;
+		}
+		@media screen and (max-width: 40rem) {
+			padding: 3rem 1rem;
+		}
+
+		text-align: center;
+	}
+
+	.screenshot {
+		box-shadow: var(--elevation-8);
+		border-radius: 1rem;
+		width: 15rem;
+	}
+
+}
--- a/src/_navigation-footer.scss
+++ b/src/_navigation-footer.scss
@ -0,0 +1,55 @@
+.navfooter {
+	@extend .frame;
+
+	display: flex;
+	align-items: flex-start;
+	
+	a {
+		text-decoration: none;
+		color: inherit;
+	}
+
+	.icon {
+		margin-right: 2rem;
+		@media screen and (min-width: 60rem) {
+			margin-right: 3rem;
+		}
+		
+		img {
+			height: 4rem;
+			@media screen and (max-width: 40rem) {
+				height: 3rem;
+			}
+			border-radius: 0.75 * 33.3%;
+			box-shadow: var(--elevation-4);
+		}
+	}
+
+	.groups {
+		flex-grow: 1;
+		display: grid;
+		grid-template-columns: 50% 50%;
+		@media screen and (min-width: 60rem) {
+			grid-template-columns: 25% 25% 25% 25%;
+		}
+		@media screen and (max-width: 40rem) {
+			grid-template-columns: 100%;
+		}
+	}
+
+	.group {
+		//margin-right: 1rem;
+		margin-bottom: 1rem;
+	}
+
+	.title {
+		font-weight: 700;
+		color: $color-primary;
+	}
+
+	.title,
+	.link {
+		margin-bottom: 0.25rem;
+	}
+}
+
--- a/src/_navigation.scss
+++ b/src/_navigation.scss
@ -0,0 +1,115 @@
+.navbar-wrapper {
+	background: #fff;
+	position: sticky;
+	top: 0;
+	z-index: 100;
+
+	&.shadow {
+		box-shadow: var(--elevation-4);
+	}
+	transition: 0.5s box-shadow;
+}
+
+.navbar {
+	@extend .frame;
+
+	display: flex;
+	align-items: center;
+	
+	a {
+		text-decoration: none;
+		color: inherit;
+	}
+
+	.brand {
+		flex-grow: 1;
+		font-size: 0;
+		
+		img {
+			height: 2rem;
+		}
+	}
+
+	.menu {
+		display: none;
+
+		@media screen and (max-width: 40rem) {
+			display: block;
+			appearance: none;
+			color: $color-primary;
+			font-size: 2rem;
+
+			&::before {
+				content: "menu";
+			}
+
+			&:checked::before {
+				content: "close";
+			}
+
+			&:checked + .links {
+				display: block;
+			}
+		}
+	}
+
+	.brand, .menu { // mobile
+		position: relative;
+		z-index: 10;
+	}
+
+	.links {
+		font-weight: 700;
+		color: $color-primary;
+
+		display: flex;
+		align-items: center;
+
+		@media screen and (max-width: 40rem) {
+			flex-direction: column;
+			align-items: stretch;
+
+			display: none;
+
+			position: absolute;
+			z-index: 5;
+			top: 0;
+			left: 0;
+			width: 100%;
+
+			padding-top: 6rem;
+
+			background: #fff;
+			font-size: 1.5em;
+			box-shadow: var(--elevation-8);
+		}
+	}
+	
+	.link {
+		margin-left: 1.5rem;
+		
+		@media screen and (max-width: 40rem) {
+			margin-bottom: 1.5rem;
+			margin-left: 1.5rem;
+			margin-right: 1.5rem;
+		}
+	}
+
+	.button {
+		background: $color-primary;
+		color: #fff;
+		line-height: 1;
+
+		@media screen and (max-width: 40rem) {
+			text-align: center;
+			font-size: 1.25rem;
+			padding-top: 0.75rem;
+			padding-bottom: 0.75rem;
+		}
+
+		padding: 0.5rem 1.5rem;
+		border-radius: 2rem;
+	}
+
+}
+
--- a/src/appicon.svg
+++ b/src/appicon.svg
@ -0,0 +1,20 @@
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="128" height="128" rx="24" fill="url(#paint0_radial)"/>
+<path d="M0 0H32C49.6731 0 64 14.3269 64 32C64 49.6731 49.6731 64 32 64C14.3269 64 0 49.6731 0 32V0Z" transform="translate(32 32)" fill="url(#paint1_radial)"/>
+<path d="M0 0H32C49.6731 0 64 14.3269 64 32C64 49.6731 49.6731 64 32 64C14.3269 64 0 49.6731 0 32V0Z" transform="translate(32 32)" fill="url(#paint2_linear)"/>
+<defs>
+<radialGradient id="paint0_radial" cx="0.5" cy="0.5" r="0.5" gradientUnits="userSpaceOnUse" gradientTransform="translate(256 256) scale(256) rotate(180)">
+<stop offset="0.248619" stop-color="#29C3EF"/>
+<stop offset="1" stop-color="#3270F8"/>
+<stop offset="1" stop-color="#3270F8"/>
+</radialGradient>
+<radialGradient id="paint1_radial" cx="0.5" cy="0.5" r="0.5" gradientUnits="userSpaceOnUse" gradientTransform="translate(135 135) scale(142) rotate(180)">
+<stop offset="0.171271" stop-color="#27D8ED"/>
+<stop offset="1" stop-color="#364DFC"/>
+</radialGradient>
+<linearGradient id="paint2_linear" x2="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(64) scale(64) rotate(90)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.75"/>
+</linearGradient>
+</defs>
+</svg>
--- a/src/images/appicon.svg
+++ b/src/images/appicon.svg
@ -0,0 +1,20 @@
+<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="128" height="128" rx="24" fill="url(#paint0_radial)"/>
+<path d="M0 0H32C49.6731 0 64 14.3269 64 32C64 49.6731 49.6731 64 32 64C14.3269 64 0 49.6731 0 32V0Z" transform="translate(32 32)" fill="url(#paint1_radial)"/>
+<path d="M0 0H32C49.6731 0 64 14.3269 64 32C64 49.6731 49.6731 64 32 64C14.3269 64 0 49.6731 0 32V0Z" transform="translate(32 32)" fill="url(#paint2_linear)"/>
+<defs>
+<radialGradient id="paint0_radial" cx="0.5" cy="0.5" r="0.5" gradientUnits="userSpaceOnUse" gradientTransform="translate(256 256) scale(256) rotate(180)">
+<stop offset="0.248619" stop-color="#29C3EF"/>
+<stop offset="1" stop-color="#3270F8"/>
+<stop offset="1" stop-color="#3270F8"/>
+</radialGradient>
+<radialGradient id="paint1_radial" cx="0.5" cy="0.5" r="0.5" gradientUnits="userSpaceOnUse" gradientTransform="translate(135 135) scale(142) rotate(180)">
+<stop offset="0.171271" stop-color="#27D8ED"/>
+<stop offset="1" stop-color="#364DFC"/>
+</radialGradient>
+<linearGradient id="paint2_linear" x2="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(64) scale(64) rotate(90)">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.75"/>
+</linearGradient>
+</defs>
+</svg>
--- a/src/images/logo.svg
+++ b/src/images/logo.svg
@ -0,0 +1,13 @@
+<svg width="289" height="128" viewBox="0 0 289 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0H32C49.6731 0 64 14.3269 64 32C64 49.6731 49.6731 64 32 64C14.3269 64 0 49.6731 0 32V0Z" transform="translate(32 32)" fill="url(#paint0_radial)"/>
+<path d="M15.1136 40.6278C24.1818 40.6278 29.4915 36.5312 29.4915 28.7756C29.4915 24.679 27.4034 21.0795 22.7102 19.9659C26.608 18.2955 28.4176 14.8551 28.4176 11.1562C28.4176 4.19602 22.9886 0 13.8807 0H0V40.6278H15.1136ZM7.67614 6.50284H13.8807C18.5739 6.50284 20.7614 8.51137 20.7614 11.8722C20.7614 15.0142 18.4943 17.1023 14.517 17.2813L7.67614 17.3011V6.50284ZM21.9148 28.6761C21.9148 32.1562 19.3693 34.1847 15.1136 34.1847H7.67614V22.9688H15.4119C19.7074 22.9688 21.9148 25.017 21.9148 28.6761Z" transform="translate(131.321 43.2727)" fill="#3270F8"/>
+<path d="M48.3288 41.304C54.1953 41.304 58.4709 38.5597 60.3004 35.2585L55.468 31.3608C53.8374 33.7869 51.6499 35.0795 48.647 35.0795C44.6499 35.0795 41.7067 32.733 40.9908 28.0597H61.076V24.8778C61.076 15.054 55.5078 9.78409 47.5732 9.78409C38.5646 9.78409 33.6129 16.5653 33.6129 25.7926C33.6129 34.5426 38.9226 41.304 48.3288 41.304ZM47.5732 15.9688C51.7493 15.9688 53.9368 19.2898 53.9368 22.8097H41.0504C41.6868 18.5938 43.8544 15.9688 47.5732 15.9688Z" transform="translate(131.321 43.2727)" fill="#3270F8"/>
+<path d="M79.6648 41.304C85.5312 41.304 89.8068 38.5597 91.6364 35.2585L86.804 31.3608C85.1733 33.7869 82.9858 35.0795 79.983 35.0795C75.9858 35.0795 73.0426 32.733 72.3267 28.0597H92.4119V24.8778C92.4119 15.054 86.8438 9.78409 78.9091 9.78409C69.9006 9.78409 64.9489 16.5653 64.9489 25.7926C64.9489 34.5426 70.2585 41.304 79.6648 41.304ZM78.9091 15.9688C83.0852 15.9688 85.2727 19.2898 85.2727 22.8097H72.3864C73.0227 18.5938 75.1903 15.9688 78.9091 15.9688Z" transform="translate(131.321 43.2727)" fill="#3270F8"/>
+<path d="M97.3984 52.1818H104.995V38.6591C106.586 40.2699 108.813 41.304 111.915 41.304C119.731 41.304 125.2 34.821 125.2 25.5142C125.2 16.267 119.731 9.78409 111.955 9.78409C108.933 9.78409 106.745 10.7983 105.174 12.3892H104.796L104.737 10.1818H97.3984V52.1818ZM104.915 30.0881C104.577 28.6563 104.438 26.5483 104.418 25.4347C104.438 24.4006 104.558 22.7699 104.896 21.3381C105.433 19.3097 107.222 15.9688 111.2 15.9688C115.654 15.9688 117.921 19.9858 117.921 25.5142C117.921 31.142 115.654 35.0795 111.18 35.0795C107.62 35.0795 105.512 32.554 104.915 30.0881Z" transform="translate(131.321 43.2727)" fill="#3270F8"/>
+<defs>
+<radialGradient id="paint0_radial" cx="0.5" cy="0.5" r="0.5" gradientUnits="userSpaceOnUse" gradientTransform="translate(135 135) scale(142) rotate(180)">
+<stop offset="0.171271" stop-color="#29C3EF"/>
+<stop offset="1" stop-color="#3270F8"/>
+</radialGradient>
+</defs>
+</svg>
--- a/src/logo.svg
+++ b/src/logo.svg
@ -0,0 +1,13 @@
+<svg width="240" height="64" viewBox="0 0 240 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 0H32C49.6731 0 64 14.3269 64 32C64 49.6731 49.6731 64 32 64C14.3269 64 0 49.6731 0 32V0Z" fill="url(#paint0_radial)"/>
+<path d="M15.1136 40.6278C24.1818 40.6278 29.4915 36.5312 29.4915 28.7756C29.4915 24.679 27.4034 21.0795 22.7102 19.9659C26.608 18.2955 28.4176 14.8551 28.4176 11.1562C28.4176 4.19602 22.9886 0 13.8807 0H0V40.6278H15.1136ZM7.67614 6.50284H13.8807C18.5739 6.50284 20.7614 8.51137 20.7614 11.8722C20.7614 15.0142 18.4943 17.1023 14.517 17.2813L7.67614 17.3011V6.50284ZM21.9148 28.6761C21.9148 32.1562 19.3693 34.1847 15.1136 34.1847H7.67614V22.9688H15.4119C19.7074 22.9688 21.9148 25.017 21.9148 28.6761Z" transform="translate(99.321 11.2727)" fill="#3270F8"/>
+<path d="M48.3288 41.304C54.1953 41.304 58.4709 38.5597 60.3004 35.2585L55.468 31.3608C53.8374 33.7869 51.6499 35.0795 48.647 35.0795C44.6499 35.0795 41.7067 32.733 40.9908 28.0597H61.076V24.8778C61.076 15.054 55.5078 9.78409 47.5732 9.78409C38.5646 9.78409 33.6129 16.5653 33.6129 25.7926C33.6129 34.5426 38.9226 41.304 48.3288 41.304ZM47.5732 15.9688C51.7493 15.9688 53.9368 19.2898 53.9368 22.8097H41.0504C41.6868 18.5938 43.8544 15.9688 47.5732 15.9688Z" transform="translate(99.321 11.2727)" fill="#3270F8"/>
+<path d="M79.6648 41.304C85.5312 41.304 89.8068 38.5597 91.6364 35.2585L86.804 31.3608C85.1733 33.7869 82.9858 35.0795 79.983 35.0795C75.9858 35.0795 73.0426 32.733 72.3267 28.0597H92.4119V24.8778C92.4119 15.054 86.8438 9.78409 78.9091 9.78409C69.9006 9.78409 64.9489 16.5653 64.9489 25.7926C64.9489 34.5426 70.2585 41.304 79.6648 41.304ZM78.9091 15.9688C83.0852 15.9688 85.2727 19.2898 85.2727 22.8097H72.3864C73.0227 18.5938 75.1903 15.9688 78.9091 15.9688Z" transform="translate(99.321 11.2727)" fill="#3270F8"/>
+<path d="M97.3984 52.1818H104.995V38.6591C106.586 40.2699 108.813 41.304 111.915 41.304C119.731 41.304 125.2 34.821 125.2 25.5142C125.2 16.267 119.731 9.78409 111.955 9.78409C108.933 9.78409 106.745 10.7983 105.174 12.3892H104.796L104.737 10.1818H97.3984V52.1818ZM104.915 30.0881C104.577 28.6563 104.438 26.5483 104.418 25.4347C104.438 24.4006 104.558 22.7699 104.896 21.3381C105.433 19.3097 107.222 15.9688 111.2 15.9688C115.654 15.9688 117.921 19.9858 117.921 25.5142C117.921 31.142 115.654 35.0795 111.18 35.0795C107.62 35.0795 105.512 32.554 104.915 30.0881Z" transform="translate(99.321 11.2727)" fill="#3270F8"/>
+<defs>
+<radialGradient id="paint0_radial" cx="0.5" cy="0.5" r="0.5" gradientUnits="userSpaceOnUse" gradientTransform="translate(135 135) scale(142) rotate(180)">
+<stop offset="0.171271" stop-color="#29C3EF"/>
+<stop offset="1" stop-color="#3270F8"/>
+</radialGradient>
+</defs>
+</svg>
--- a/src/main.scss
+++ b/src/main.scss
@ -0,0 +1,14 @@
+
+// relies on non-standard behaviour
+@import 'normalize.css/normalize';
+
+@import 'base';
+
+@import 'badbrowser';
+
+@import 'frame';
+@import 'navigation';
+@import 'navigation-footer';
+
+@import 'home';
+@import 'company';
--- a/src/sticky.js
+++ b/src/sticky.js
@ -0,0 +1,25 @@
+/* eslint-env browser */
+
+function configureScroll() {
+	const navbarWrapper = document.querySelector('.navbar-wrapper');
+
+	window.addEventListener('scroll', () => {
+		if (document.scrollingElement.scrollTop > 0) {
+			if (!navbarWrapper.classList.contains('shadow')) {
+				navbarWrapper.classList.add('shadow');
+			}
+		} else if (navbarWrapper.classList.contains('shadow')) {
+			navbarWrapper.classList.remove('shadow');
+		}
+	}, window.Modernizr.passiveeventlisteners ? { passive: true } : false);
+}
+
+function tryConfigureScroll() {
+	if (!window.Modernizr) {
+		setTimeout(tryConfigureScroll, 100);
+	} else {
+		configureScroll();
+	}
+}
+
+tryConfigureScroll();
--- a/yarn.lock
+++ b/yarn.lock