wip

frontend/src/app.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core'
-import { NgbDropdownModule, NgbModalModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgbDropdownModule, NgbModalModule, NgbNavModule } from '@ng-bootstrap/ng-bootstrap'
 import { BrowserModule } from '@angular/platform-browser'
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
 import { CommonModule } from '@angular/common'
@@ -16,10 +16,13 @@ import { AppComponent } from './components/app.component'
 import { MainComponent } from './components/main.component'
 import { ConfigModalComponent } from './components/configModal.component'
 import { SettingsModalComponent } from './components/settingsModal.component'
-import { HomeComponent } from './components/home.component'
+import { HomeComponent, HomeComponentPreloadResolver } from './components/home.component'
 import { LoginComponent } from './components/login.component'
 import { ConnectionListComponent } from './components/connectionList.component'
 import { UpgradeModalComponent } from './components/upgradeModal.component'
+import { HomeIndexComponent } from './components/homeIndex.component'
+import { DemoTerminalComponent } from './components/demoTerminal.component'
+import { HomeFeaturesComponent } from './components/homeFeatures.component'
 import { InstanceInfoResolver } from './api'
 
 import '@fortawesome/fontawesome-svg-core/styles.css'
@@ -30,7 +33,18 @@ const ROUTES = [
         component: HomeComponent,
         resolve: {
             instanceInfo: InstanceInfoResolver,
+            preload: HomeComponentPreloadResolver,
         },
+        children: [
+            {
+                path: '',
+                component: HomeIndexComponent,
+            },
+            {
+                path: 'features',
+                component: HomeFeaturesComponent,
+            },
+        ],
     },
     {
         path: 'app',
@@ -61,6 +75,7 @@ const ROUTES = [
         HttpClientXsrfModule,
         NgbDropdownModule,
         NgbModalModule,
+        NgbNavModule,
         FontAwesomeModule,
         ClipboardModule,
         NgxImageZoomModule,
@@ -74,11 +89,13 @@ const ROUTES = [
         AppComponent,
         MainComponent,
         HomeComponent,
+        HomeIndexComponent,
         LoginComponent,
         ConfigModalComponent,
         SettingsModalComponent,
         ConnectionListComponent,
         UpgradeModalComponent,
+        DemoTerminalComponent,
     ],
     bootstrap: [AppComponent],
 })

frontend/src/components/demoTerminal.component.scss

@@ -0,0 +1,16 @@
+@import "../theme/vars.scss";
+
+:host {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    border-radius: 5px;
+    background: $body-bg;
+    box-shadow: 0 0 2px black, 0 0 50px #6ef2ff05, 0 0 150px #6854ff14;
+}
+
+iframe {
+    flex: auto;
+    display: block;
+    overflow: hidden;
+}

frontend/src/components/demoTerminal.component.ts

@@ -0,0 +1,102 @@
+import { Subject } from 'rxjs'
+import * as semverCompare from 'semver/functions/compare-loose'
+import { HttpClient } from '@angular/common/http'
+import { Component, ElementRef, ViewChild } from '@angular/core'
+import { Version } from '../api'
+import { CommonService } from '../services/common.service'
+
+class DemoConnector {
+    constructor (
+        targetWindow: Window,
+        private commonService: CommonService,
+        private version: Version,
+    ) {
+        targetWindow['tabbyWebDemoDataPath'] = `${this.getDistURL()}/${version.version}/tabby-web-demo/data`
+    }
+
+    async loadConfig (): Promise<string> {
+        return `{
+            recoverTabs: false,
+            web: {
+                preventAccidentalTabClosure: false,
+            },
+        }`
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    async saveConfig (_content: string): Promise<void> { }
+
+    getAppVersion (): string {
+        return this.version.version
+    }
+
+    getDistURL (): string {
+        return this.commonService.backendURL + '/app-dist'
+    }
+
+    getPluginsToLoad (): string[] {
+        return [
+            'tabby-core',
+            'tabby-settings',
+            'tabby-terminal',
+            'tabby-community-color-schemes',
+            'tabby-ssh',
+            'tabby-telnet',
+            'tabby-web',
+            'tabby-web-demo',
+        ]
+    }
+
+    createSocket () {
+        return new DemoSocketProxy()
+    }
+}
+
+
+export class DemoSocketProxy {
+    connect$ = new Subject<void>()
+    data$ = new Subject<Buffer>()
+    error$ = new Subject<Buffer>()
+    close$ = new Subject<Buffer>()
+
+    async connect (options) {
+        this.error$.next(new Error('This web demo can\'t actually access Internet, but feel free to download the release and try it out!'))
+    }
+}
+
+@Component({
+    selector: 'demo-terminal',
+    template: '<iframe #iframe></iframe>',
+    styleUrls: ['./demoTerminal.component.scss'],
+})
+export class DemoTerminalComponent {
+    @ViewChild('iframe') iframe: ElementRef
+    connector: DemoConnector
+
+
+    constructor (
+        private http: HttpClient,
+        private commonService: CommonService,
+    ) {
+        window.addEventListener('message', this.connectorRequestHandler)
+    }
+
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+    connectorRequestHandler = event => {
+        if (event.data === 'request-connector') {
+            this.iframe.nativeElement.contentWindow['__connector__'] = this.connector
+            this.iframe.nativeElement.contentWindow.postMessage('connector-ready', '*')
+        }
+    }
+
+    async ngAfterViewInit (): Promise<void> {
+        const versions = await this.http.get('/api/1/versions').toPromise()
+        versions.sort((a, b) => -semverCompare(a.version, b.version))
+        this.connector = new DemoConnector(this.iframe.nativeElement.contentWindow, this.commonService, versions[0])
+        this.iframe.nativeElement.src = '/terminal'
+    }
+
+    ngOnDestroy (): void {
+        window.removeEventListener('message', this.connectorRequestHandler)
+    }
+}

frontend/src/components/home.component.pug

@@ -1,159 +1,32 @@
 .top-half
-    .navbar
-        img.brand(src='{{_logo}}')
-        .me-auto
-        a.btn.btn-primary([href]='releaseURL', target='_blank')
-            fa-icon([icon]='_downloadIcon', [fixedWidth]='true')
-            span Download
-        a.btn.btn-secondary([href]='donationURL', target='_blank')
-            fa-icon([icon]='_donateIcon', [fixedWidth]='true')
-            span Donate
-        a.btn.btn-secondary(routerLink='/login', *ngIf='instanceInfo.login_enabled')
-            fa-icon([icon]='_loginIcon', [fixedWidth]='true')
-            span Login
+    .container.overflow-hidden
+        .navbar
+            img.brand(src='{{_logo}}')
+            .me-auto
+            a.btn.btn-primary([href]='releaseURL', target='_blank')
+                fa-icon([icon]='_downloadIcon', [fixedWidth]='true')
+                span Download
+            a.btn.btn-secondary([href]='donationURL', target='_blank')
+                fa-icon([icon]='_donateIcon', [fixedWidth]='true')
+                span Donate
+            a.btn.btn-secondary(routerLink='/login', *ngIf='instanceInfo.login_enabled')
+                fa-icon([icon]='_loginIcon', [fixedWidth]='true')
+                span Login
+
+        ul.nav-pills.mb-4(ngbNav, [activeId]='router.url')
+            li([ngbNavItem]='link.link', *ngFor='let link of navLinks')
+                a(ngbNavLink, routerLink='.', [routerLink]='link.link') {{ link.title }}
 
     .container
-        .intro
-            h1 Hey.
-            div My name is Eugene and I've built a nice terminal app, #[em.ms-1 just for you].
-            div Crossplatform, local, SSH, serial, Telnet - it's all there.
-            div Here's a demo 👇
+        div(*ngIf='router.url == "/"')
+            .intro
+                h1 Hey.
+                div My name is Eugene and I've built a nice terminal app, #[em.ms-1 just for you].
+                div Crossplatform, local, SSH, serial, Telnet - it's all there.
+                div Here's a demo 👇
 
-        iframe(#iframe)
+            demo-terminal
 
 .bottom-half
-    .container
-        .d-flex.m-auto.mb-5
-            a.btn.btn-lg.btn-primary.ms-auto.me-3([href]='releaseURL', target='_blank')
-                fa-icon([icon]='_downloadIcon', [fixedWidth]='true')
-                span Latest release
-
-            a.btn.btn-lg.btn-secondary.me-auto([href]='githubURL', target='_blank')
-                fa-icon([icon]='_githubIcon', [fixedWidth]='true')
-                span GitHub
-
-        .quotes
-            .quote
-                .text "reasonable"
-                .author — Michael
-
-            .quote
-                .text "cool"
-                .author — some dude on my ko-fi
-
-            .quote
-                .text "very cool"
-                .author — datsukan
-
-    .section.section-a
-        .container
-            .row
-                .col-12.col-xl-6
-                    lib-ngx-image-zoom(
-                        [fullImage]='screenshots.window',
-                        [thumbImage]='screenshots.window'
-                    )
-                .col-12.col-xl-6
-                    h1 The important stuff
-                    ul
-                        li Runs on #[strong Windows, Mac and Linux]
-                        li Integrated #[strong SSH client] with a connection manager
-                        li Integrated #[strong serial terminal]
-                        li PowerShell, PS Core, WSL, Git-Bash, Cygwin, Cmder and CMD support
-                        li Full #[strong Unicode support] including double-width characters
-                        li File transfer from/to SSH sessions via #[strong SFTP and Zmodem]
-                        li Theming and color schemes
-                        li Fully #[strong configurable shortcuts] and multi-chord shortcuts
-                        li #[strong Remembers your tabs] and split panes
-                        li Proper shell experience on Windows including #[strong tab completion]
-                        li Integrated #[strong encrypted container] for SSH secrets and configuration
-
-    .section.section-b
-        .container
-            .row
-                .col-12.col-xl-6
-                    h1 Terminal features
-                    ul
-                        li Multiple #[strong nested panes]
-                        li #[strong Progress bars] and activity notifications for tabs
-                        li Tabby remembers open tabs and panes where you left off
-                        li Tabs on #[strong any side of the window]
-                        li Optional #[strong quake mode] (terminal docked to a side of the screen)
-                        li Optional #[strong global hotkey] to focus/hide the terminal
-                        li Bracketed paste
-                .col-12.col-xl-6
-                    lib-ngx-image-zoom(
-                        [fullImage]='screenshots.tabs',
-                        [thumbImage]='screenshots.tabs'
-                    )
-
-    .section.section-a
-        .container
-            .row
-                .col-12.col-xl-6
-                    lib-ngx-image-zoom(
-                        [fullImage]='screenshots.ssh',
-                        [thumbImage]='screenshots.ssh'
-                    )
-                .col-12.col-xl-6
-                    h1 SSH Client
-                    ul
-                        li SSH2 client with a connection manager
-                        li #[strong SFTP and Zmodem] file transfers
-                        li #[strong X11] and #[strong port forwarding]
-                        li Jump hosts
-                        li #[strong Agent forwarding] - including Pageant and Windows native OpenSSH Agent
-                        li Login scripts
-                        li Optional built-in #[strong password manager] with a master passphrase
-                        li #[strong Proxy command] support
-
-    .section.section-b
-        .container
-            .row
-                .col-12.col-xl-6
-                    h1 Windows, but nice
-                    ul
-                        li Support for #[strong different shells] in the same window
-                        li Better tab completion #[strong cmd.exe] thanks to Clink.
-                        li Explorer menu integration
-                        li Optional #[strong portable mode]
-                        li Current directory detection that works
-                .col-12.col-xl-6
-                    lib-ngx-image-zoom(
-                        [fullImage]='screenshots.win',
-                        [thumbImage]='screenshots.win'
-                    )
-
-    .section.section-a
-        .container
-            .row
-                .col-12.col-xl-6
-                    lib-ngx-image-zoom(
-                        [fullImage]='screenshots.serial',
-                        [thumbImage]='screenshots.serial'
-                    )
-                .col-12.col-xl-6
-                    h1 Serial Terminal
-                    ul
-                        li Multiple #[strong connection profiles]
-                        li Newline conversion
-                        li Text, #[strong readline] and #[strong byte-by-byte] input modes
-                        li Text and #[strong hexdump] output modes
-                        li Zmodem
-                        li Non-standard baud rates
-
-    .section.section-a
-        .container
-            h1 And just too much stuff to mention here:
-            ul
-                li Themes #[strong customizable with CSS]
-                li Extensible via #[strong plugins] (in JS)
-                li A bunch of color schemes already included
-                li Telnet client
-                li #[strong Font ligatures] and font fallback
-                li #[strong Clickable URLs], IPs and paths
-                li #[strong WinSCP] integration
-                li Shell #[strong profiles]
-                li Simultaneous #[strong multi-pane input]
-                li Optional PuTTY style #[strong right-click paste] and #[strong copy on select]
-                li macOS vibrancy and Win 10 fluent background support
+    .demo-offset(*ngIf='router.url == "/"')
+    router-outlet

frontend/src/components/home.component.scss

@@ -4,18 +4,33 @@
 :host {
     font-size: 20px;
     font-family: 'Fira Code', monospace;
-
-    button, a, .quote {
-        font-family: $font-family-sans-serif;
-    }
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    overflow: auto;
 }
 
 .top-half {
-    background: linear-gradient(#0c141c, #15202b);
+    background: linear-gradient(#0c141c00, #15202b);
 
     h1 {
         font-size: 80px;
     }
+
+    .nav {
+        font-size: 14px;
+        padding: 0 35px;
+    }
+}
+
+.demo-offset {
+    padding-top: 24vw;
+}
+
+.bottom-half {
+    background: $body-bg;
+    overflow: hidden;
+    min-height: 100vh;
 }
 
 .navbar {
@@ -31,87 +46,11 @@
     width: 32px;
 }
 
-h1 {
-    font-family: $font-family-monospace;
-    font-weight: bold;
-    font-size: 48px;
-    text-shadow: 0 0 1px black;
-    margin: 0 0 25px;
-}
-
-.intro {
-    width: 60vw;
-    margin: auto;
-}
-
-iframe {
-    display: block;
+demo-terminal {
     margin: auto;
+    width: calc(min(max(480px, 60vw), 100vw));
+    height: calc(max(460px, 42vw));
     position: relative;
     top: 20vw;
     margin-top: -16vw;
-
-    width: calc(min(max(480px, 60vw), 100vw));
-    height: calc(max(460px, 42vw));
-    overflow: hidden;
-    border-radius: 5px;
-    box-shadow: 0 0 2px black, 0 0 50px #6ef2ff05, 0 0 150px #6854ff14;
-}
-
-
-.bottom-half {
-    padding-top: 24vw;
-}
-
-.quotes {
-    margin: 50px 0;
-    display: flex;
-    justify-content: center;
-    text-align: center;
-
-    .quote {
-        margin: 0 30px;
-
-        .text {
-            font-size: 50px;
-            font-style: italic;
-        }
-
-        .author {
-            font-size: 14px;
-        }
-    }
-
-    @media (max-width: 600px) {
-        & { display: none;}
-    }
-}
-
-strong {
-    background: #849dff;
-    font-weight: normal;
-    padding: 2px 7px;
-    color: black;
-}
-
-.section {
-    padding: 50px 0;
-}
-
-.section-a {
-    background: rgba(0, 0, 0, .5);
-}
-
-.section-b {
-}
-
-::ng-deep lib-ngx-image-zoom {
-    width: 100%;
-    display: block;
-
-    img {
-        min-width: 100px;
-        max-width: 100%;
-        width: 100%;
-    }
 }

frontend/src/components/home.component.ts

@@ -1,72 +1,7 @@
-import { Subject } from 'rxjs'
-import * as semverCompare from 'semver/functions/compare-loose'
-import { HttpClient } from '@angular/common/http'
-import { Component, ElementRef, ViewChild } from '@angular/core'
-import { InstanceInfo, Version } from '../api'
+import { Component, Injectable } from '@angular/core'
+import { ActivatedRoute, Router, Resolve } from '@angular/router'
 import { faCoffee, faDownload, faSignInAlt } from '@fortawesome/free-solid-svg-icons'
-import { faGithub } from '@fortawesome/free-brands-svg-icons'
-import { ActivatedRoute, Router } from '@angular/router'
-import { CommonService } from '../services/common.service'
-
-
-class DemoConnector {
-    constructor (
-        targetWindow: Window,
-        private commonService: CommonService,
-        private version: Version,
-    ) {
-        targetWindow['tabbyWebDemoDataPath'] = `${this.getDistURL()}/${version.version}/tabby-web-demo/data`
-    }
-
-    async loadConfig (): Promise<string> {
-        return `{
-            recoverTabs: false,
-            web: {
-                preventAccidentalTabClosure: false,
-            },
-        }`
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    async saveConfig (_content: string): Promise<void> { }
-
-    getAppVersion (): string {
-        return this.version.version
-    }
-
-    getDistURL (): string {
-        return this.commonService.backendURL + '/app-dist'
-    }
-
-    getPluginsToLoad (): string[] {
-        return [
-            'tabby-core',
-            'tabby-settings',
-            'tabby-terminal',
-            'tabby-community-color-schemes',
-            'tabby-ssh',
-            'tabby-telnet',
-            'tabby-web',
-            'tabby-web-demo',
-        ]
-    }
-
-    createSocket () {
-        return new DemoSocketProxy()
-    }
-}
-
-
-export class DemoSocketProxy {
-    connect$ = new Subject<void>()
-    data$ = new Subject<Buffer>()
-    error$ = new Subject<Buffer>()
-    close$ = new Subject<Buffer>()
-
-    async connect (options) {
-        this.error$.next(new Error('This web demo can\'t actually access Internet, but feel free to download the release and try it out!'))
-    }
-}
+import { InstanceInfo } from '../api'
 
 
 @Component({
@@ -75,8 +10,6 @@ export class DemoSocketProxy {
     styleUrls: ['./home.component.scss'],
 })
 export class HomeComponent {
-    @ViewChild('iframe') iframe: ElementRef
-    connector: DemoConnector
     githubURL = 'https://github.com/Eugeny/tabby'
     releaseURL = `${this.githubURL}/releases/latest`
     donationURL = 'https://ko-fi.com/eugeny'
@@ -84,48 +17,55 @@ export class HomeComponent {
     _logo = require('../assets/logo.svg')
     _downloadIcon = faDownload
     _loginIcon = faSignInAlt
-    _githubIcon = faGithub
     _donateIcon = faCoffee
 
-    screenshots = {
-        window: require('../assets/screenshots/window.png'),
-        tabs: require('../assets/screenshots/tabs.png'),
-        ssh: require('../assets/screenshots/ssh.png'),
-        serial: require('../assets/screenshots/serial.png'),
-        win: require('../assets/screenshots/win.png'),
-    }
+    navLinks = [
+        {
+            title: 'About Tabby',
+            link: '/'
+        },
+        {
+            title: 'Features',
+            link: '/features'
+        },
+    ]
 
     instanceInfo: InstanceInfo
 
     constructor (
-        private http: HttpClient,
-        private commonService: CommonService,
-        route: ActivatedRoute,
-        router: Router,
+        public route: ActivatedRoute,
+        public router: Router,
     ) {
-        window.addEventListener('message', this.connectorRequestHandler)
         this.instanceInfo = route.snapshot.data.instanceInfo
         if (!this.instanceInfo.homepage_enabled) {
             router.navigate(['/app'])
         }
     }
 
-    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-    connectorRequestHandler = event => {
-        if (event.data === 'request-connector') {
-            this.iframe.nativeElement.contentWindow['__connector__'] = this.connector
-            this.iframe.nativeElement.contentWindow.postMessage('connector-ready', '*')
-        }
+    static async preload () {
+        const three = await import(/* webpackChunkName: "gfx" */ 'three')
+        window['THREE'] = three
+        await import(/* webpackChunkName: "gfx" */ 'vanta/src/vanta.waves.js')
     }
 
     async ngAfterViewInit (): Promise<void> {
-        const versions = await this.http.get('/api/1/versions').toPromise()
-        versions.sort((a, b) => -semverCompare(a.version, b.version))
-        this.connector = new DemoConnector(this.iframe.nativeElement.contentWindow, this.commonService, versions[0])
-        this.iframe.nativeElement.src = '/terminal'
-    }
-
-    ngOnDestroy (): void {
-        window.removeEventListener('message', this.connectorRequestHandler)
+        window['VANTA'].WAVES({
+            el: 'body',
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: 0x70f
+        })
+    }
+}
+
+@Injectable({ providedIn: 'root' })
+export class HomeComponentPreloadResolver implements Resolve<Promise<void>> {
+    resolve () {
+        return HomeComponent.preload()
     }
 }

frontend/src/components/homeFeatures.component.pug

@@ -0,0 +1,17 @@
+.container.mt-5.mb-5
+    h1 Features
+
+    .row
+        .col-12.col-md-4
+            .card.bg-dark
+                img.card-img-top([src]='screenshots.progress')
+                .card-body
+                    h5.card-title Smart tabs
+                    .card-text Tabs that detect progress and can notify you when a process is done.
+
+        .col-12.col-md-4
+            .card.bg-dark
+                img.card-img-top([src]='screenshots.zmodem')
+                .card-body
+                    h5.card-title Zmodem transfers
+                    .card-text Full support for Zmodem transfers in SSH, telnet and serial connections.

frontend/src/components/homeFeatures.component.scss

@@ -0,0 +1,3 @@
+:host {
+    font-size: 14px;
+}

frontend/src/components/homeFeatures.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core'
+
+@Component({
+    selector: 'home-features',
+    templateUrl: './homeFeatures.component.pug',
+    styleUrls: ['./homeFeatures.component.scss'],
+})
+export class HomeFeaturesComponent {
+    screenshots = {
+        progress: require('../assets/screenshots/progress.png'),
+        zmodem: require('../assets/screenshots/zmodem.png'),
+    }
+}

frontend/src/components/homeIndex.component.pug

@@ -0,0 +1,135 @@
+.container
+    .d-flex.m-auto.mb-5
+        a.btn.btn-lg.btn-primary.ms-auto.me-3([href]='releaseURL', target='_blank')
+            fa-icon([icon]='_downloadIcon', [fixedWidth]='true')
+            span Latest release
+
+        a.btn.btn-lg.btn-secondary.me-auto([href]='githubURL', target='_blank')
+            fa-icon([icon]='_githubIcon', [fixedWidth]='true')
+            span GitHub
+
+    .quotes
+        .quote
+            .text "reasonable"
+            .author — Michael
+
+        .quote
+            .text "cool"
+            .author — some dude on my ko-fi
+
+        .quote
+            .text "very cool"
+            .author — datsukan
+
+.section.section-a
+    .container
+        .row
+            .col-12.col-xl-6
+                lib-ngx-image-zoom(
+                    [fullImage]='screenshots.window',
+                    [thumbImage]='screenshots.window'
+                )
+            .col-12.col-xl-6
+                h1 The important stuff
+                ul
+                    li Runs on #[strong Windows, Mac and Linux]
+                    li Integrated #[strong SSH client] with a connection manager
+                    li Integrated #[strong serial terminal]
+                    li PowerShell, PS Core, WSL, Git-Bash, Cygwin, Cmder and CMD support
+                    li Full #[strong Unicode support] including double-width characters
+                    li File transfer from/to SSH sessions via #[strong SFTP and Zmodem]
+                    li Theming and color schemes
+                    li Fully #[strong configurable shortcuts] and multi-chord shortcuts
+                    li #[strong Remembers your tabs] and split panes
+                    li Proper shell experience on Windows including #[strong tab completion]
+                    li Integrated #[strong encrypted container] for SSH secrets and configuration
+
+.section.section-b
+    .container
+        .row
+            .col-12.col-xl-6
+                h1 Terminal features
+                ul
+                    li Multiple #[strong nested panes]
+                    li #[strong Progress bars] and activity notifications for tabs
+                    li Tabby remembers open tabs and panes where you left off
+                    li Tabs on #[strong any side of the window]
+                    li Optional #[strong quake mode] (terminal docked to a side of the screen)
+                    li Optional #[strong global hotkey] to focus/hide the terminal
+                    li Bracketed paste
+            .col-12.col-xl-6
+                lib-ngx-image-zoom(
+                    [fullImage]='screenshots.tabs',
+                    [thumbImage]='screenshots.tabs'
+                )
+
+.section.section-a
+    .container
+        .row
+            .col-12.col-xl-6
+                lib-ngx-image-zoom(
+                    [fullImage]='screenshots.ssh',
+                    [thumbImage]='screenshots.ssh'
+                )
+            .col-12.col-xl-6
+                h1 SSH Client
+                ul
+                    li SSH2 client with a connection manager
+                    li #[strong SFTP and Zmodem] file transfers
+                    li #[strong X11] and #[strong port forwarding]
+                    li Jump hosts
+                    li #[strong Agent forwarding] - including Pageant and Windows native OpenSSH Agent
+                    li Login scripts
+                    li Optional built-in #[strong password manager] with a master passphrase
+                    li #[strong Proxy command] support
+
+.section.section-b
+    .container
+        .row
+            .col-12.col-xl-6
+                h1 Windows, but nice
+                ul
+                    li Support for #[strong different shells] in the same window
+                    li Better tab completion #[strong cmd.exe] thanks to Clink.
+                    li Explorer menu integration
+                    li Optional #[strong portable mode]
+                    li Current directory detection that works
+            .col-12.col-xl-6
+                lib-ngx-image-zoom(
+                    [fullImage]='screenshots.win',
+                    [thumbImage]='screenshots.win'
+                )
+
+.section.section-a
+    .container
+        .row
+            .col-12.col-xl-6
+                lib-ngx-image-zoom(
+                    [fullImage]='screenshots.serial',
+                    [thumbImage]='screenshots.serial'
+                )
+            .col-12.col-xl-6
+                h1 Serial Terminal
+                ul
+                    li Multiple #[strong connection profiles]
+                    li Newline conversion
+                    li Text, #[strong readline] and #[strong byte-by-byte] input modes
+                    li Text and #[strong hexdump] output modes
+                    li Zmodem
+                    li Non-standard baud rates
+
+.section.section-a
+    .container
+        h1 And just too much stuff to mention here:
+        ul
+            li Themes #[strong customizable with CSS]
+            li Extensible via #[strong plugins] (in JS)
+            li A bunch of color schemes already included
+            li Telnet client
+            li #[strong Font ligatures] and font fallback
+            li #[strong Clickable URLs], IPs and paths
+            li #[strong WinSCP] integration
+            li Shell #[strong profiles]
+            li Simultaneous #[strong multi-pane input]
+            li Optional PuTTY style #[strong right-click paste] and #[strong copy on select]
+            li macOS vibrancy and Win 10 fluent background support

frontend/src/components/homeIndex.component.scss

@@ -0,0 +1,71 @@
+@import "../theme/vars.scss";
+
+h1 {
+    font-family: $font-family-monospace;
+    font-weight: bold;
+    font-size: 48px;
+    text-shadow: 0 0 1px black;
+    margin: 0 0 25px;
+}
+
+button, a, .quote {
+    font-family: $font-family-sans-serif;
+}
+
+.intro {
+    width: 60vw;
+    margin: auto;
+}
+
+.quotes {
+    margin: 50px 0;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+
+    .quote {
+        margin: 0 30px;
+
+        .text {
+            font-size: 50px;
+            font-style: italic;
+        }
+
+        .author {
+            font-size: 14px;
+        }
+    }
+
+    @media (max-width: 600px) {
+        & { display: none;}
+    }
+}
+
+strong {
+    background: #849dff;
+    font-weight: normal;
+    padding: 2px 7px;
+    color: black;
+}
+
+.section {
+    padding: 50px 0;
+}
+
+.section-a {
+    background: rgba(0, 0, 0, .5);
+}
+
+.section-b {
+}
+
+::ng-deep lib-ngx-image-zoom {
+    width: 100%;
+    display: block;
+
+    img {
+        min-width: 100px;
+        max-width: 100%;
+        width: 100%;
+    }
+}

frontend/src/components/homeIndex.component.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core'
+import { faDownload } from '@fortawesome/free-solid-svg-icons'
+import { faGithub } from '@fortawesome/free-brands-svg-icons'
+
+@Component({
+    selector: 'home-index',
+    templateUrl: './homeIndex.component.pug',
+    styleUrls: ['./homeIndex.component.scss'],
+})
+export class HomeIndexComponent {
+    githubURL = 'https://github.com/Eugeny/tabby'
+    releaseURL = `${this.githubURL}/releases/latest`
+
+    _downloadIcon = faDownload
+    _githubIcon = faGithub
+
+    screenshots = {
+        window: require('../assets/screenshots/window.png'),
+        tabs: require('../assets/screenshots/tabs.png'),
+        ssh: require('../assets/screenshots/ssh.png'),
+        serial: require('../assets/screenshots/serial.png'),
+        win: require('../assets/screenshots/win.png'),
+    }
+}

frontend/src/theme/index.scss

@@ -17,11 +17,11 @@
 @import "~bootstrap/scss/transitions";
 @import "~bootstrap/scss/dropdown";
 @import "~bootstrap/scss/button-group";
-// @import "~bootstrap/scss/nav";
+@import "~bootstrap/scss/nav";
 // @import "~bootstrap/scss/navbar";
 @import "~bootstrap/scss/card";
 // @import "~bootstrap/scss/accordion";
-// @import "~bootstrap/scss/breadcrum/b";
+// @import "~bootstrap/scss/breadcrumb";
 // @import "~bootstrap/scss/pagination";
 @import "~bootstrap/scss/badge";
 @import "~bootstrap/scss/alert";
@@ -58,6 +58,10 @@
   background-color: $gray-700;
 }
 
+body {
+    min-height: 100vh;
+}
+
 
 .dropdown-menu {
   box-shadow: $dropdown-box-shadow;

frontend/src/theme/vars.scss

@@ -140,6 +140,8 @@ $nav-tabs-link-active-color: #eee;
 $nav-tabs-link-active-bg: transparent;
 $nav-tabs-link-active-border-color: #eee;
 
+$nav-pills-link-active-bg: rgba(255, 255, 255, .125);
+
 $navbar-padding-y: 0;
 $navbar-padding-x: 0;