transform current website to docs frontpage

.vuepress/public/frontpage/loading.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="64px" height="64px" viewBox="0 0 128 128" xml:space="preserve"><g><path d="M75.4 126.63a11.43 11.43 0 0 1-2.1-22.65 40.9 40.9 0 0 0 30.5-30.6 11.4 11.4 0 1 1 22.27 4.87h.02a63.77 63.77 0 0 1-47.8 48.05v-.02a11.38 11.38 0 0 1-2.93.37z" fill="#10529f" fill-opacity="1"/><animateTransform attributeName="transform" type="rotate" from="0 64 64" to="360 64 64" dur="1200ms" repeatCount="indefinite"></animateTransform></g></svg>

.vuepress/theme/Home.vue

@@ -1,33 +1,105 @@
 <template>
     <div class="home">
-        <div class="hero">
-            <img v-if="data.heroImage" :src="$withBase(data.heroImage)" alt="hero">
-            <h1>{{ data.heroText || $title || 'Hello' }}</h1>
-            <p class="description">
-                {{ data.tagline || $description || 'Welcome to your VuePress site' }}
-            </p>
-            <p class="action" v-if="data.actionText && data.actionLink">
-                <NavLink class="action-button" :item="actionLink"/>
-            </p>
+        <div class="header section bg-blue text-white">
+            <div class="container z-10">
+                <div class="text-center">
+                    <div><img class="max-w-xs" :src="$withBase('pterodactyl.png')"></div>
+                    <h1 class="font-normal text-4xl">The Free Gameserver Management Panel</h1>
+                    <div class="mt-4"><router-link class="btn" to="/project/introduction.html">Get started</router-link><a class="btn" href="https://demo.pterodactyl.io" target="_blank">Demo</a></div>
+                </div>
+            </div>
+            <!-- <div class="absolute pin z-0" id="particles-js"></div> -->
         </div>
-        <div class="features" v-if="data.features && data.features.length">
-            <div class="feature" v-for="feature in data.features">
-                <h2>{{ feature.title }}</h2>
-                <p>{{ feature.details }}</p>
+        <div class="section bg-white rounded-lg" name="about">
+            <div class="container text-center">
+                <h1 class="text-blue mb-4">Pterodactyl Panel</h1>
+                <p>
+                    Pterodactyl Panel is the free, open-source, game agnostic, self-hosted control panel for users, networks, and game service providers. Pterodactyl supports games and servers such as Minecraft (including Spigot, Bungeecord, and Sponge), ARK:
+                    Evolution Evolved, CS:GO, Team Fortress 2, Insurgency, Teamspeak 3, Mumble, and many more. Control all of your games from one unified interface.
+                </p>
+                <img class="max-w-lg w-full m-4" :src="$withBase('frontpage/mockup-macbook-grey.png')"></div>
+        </div>
+        <div class="section bg-blue text-white" name="features">
+            <div class="container text-center">
+                <h1 class="mb-4">Why Pterodactyl</h1>
+                <div class="flex flex-wrap">
+                    <div class="feature"><span><i class="icon icon-lock"></i></span>
+                        <h3>Secure</h3> No MD5 here. We make use of the latest security standards such as BCrypt hashing and AES-256-CBC encryption.</div>
+                    <div class="feature"><span><i class="icon icon-browser"></i></span>
+                        <h3>Themable</h3> Every aspect of Pterodactyl is fully themeable using the Blade templating engine and your own CSS.</div>
+                    <div class="feature"><span><i class="icon icon-anchor"></i></span>
+                        <h3>Docker Based</h3> Pterodactyl is the first game panel to make use of Docker to control servers and harden your network.</div>
+                    <div class="feature"><span><i class="icon icon-wallet"></i></span>
+                        <h3>Free & Open Source</h3> Pterodactyl is 100% free and licensed under a MIT license. All of our code is completely open source as well.</div>
+                    <div class="feature"><span><i class="icon icon-beaker"></i></span>
+                        <h3>User Friendly</h3>Furious clicking and yelling is for video games. Pterodactyl's interface is so simple that even <a href="http://fallout.wikia.com/wiki/Dogmeat_(Fallout)">Dogmeat</a> could use it.</div>
+                    <div class="feature"><span><i class="icon icon-expand"></i></span>
+                        <h3>Scalable</h3>Whether you're a hosting company or some dudes playing video games, Pterodactyl has you covered.</div>
+                </div>
             </div>
         </div>
-        <Content custom/>
-        <div class="footer" v-if="data.footer">
-            {{ data.footer }}
+        <div class="section bg-white rounded-lg" name="screenshots">
+            <div class="text-center">
+                <h1>Screenshots</h1>
+                <div class="screenshots">
+                    <slick ref="slick" :options="slickOptions">
+                        <a :href="$withBase('frontpage/gallery/screenshot-1.png')"><img class="max-w-lg" :src="$withBase('frontpage/gallery/screenshot-1.png')"></a>
+                        <a :href="$withBase('frontpage/gallery/screenshot-2.png')"><img class="max-w-lg" :src="$withBase('frontpage/gallery/screenshot-2.png')"></a>
+                        <a :href="$withBase('frontpage/gallery/screenshot-3.png')"><img class="max-w-lg" :src="$withBase('frontpage/gallery/screenshot-3.png')"></a>
+                        <a :href="$withBase('frontpage/gallery/screenshot-4.png')"><img class="max-w-lg" :src="$withBase('frontpage/gallery/screenshot-4.png')"></a>
+                        <a :href="$withBase('frontpage/gallery/screenshot-5.png')"><img class="max-w-lg" :src="$withBase('frontpage/gallery/screenshot-5.png')"></a>
+                        <a :href="$withBase('frontpage/gallery/screenshot-6.png')"><img class="max-w-lg" :src="$withBase('frontpage/gallery/screenshot-6.png')"></a>
+                        <a :href="$withBase('frontpage/gallery/screenshot-7.png')"><img class="max-w-lg" :src="$withBase('frontpage/gallery/screenshot-7.png')"></a>
+                        <a :href="$withBase('frontpage/gallery/screenshot-8.png')"><img class="max-w-lg" :src="$withBase('frontpage/gallery/screenshot-8.png')"></a>
+                        <a :href="$withBase('frontpage/gallery/screenshot-9.png')"><img class="max-w-lg" :src="$withBase('frontpage/gallery/screenshot-9.png')"></a>
+                    </slick>
+                </div>
+            </div>
+        </div>
+        <div class="section bg-blue text-white">
+            <div class="container text-center">
+                <h1>Get Started</h1>
+                <p class="m-4">Ready to fly on the Pterodactyl?</p>
+                <div class="mt-4"><router-link class="btn" to="/project/introduction.html">Introduction</router-link><a class="btn" href="https://pterodactyl.io/discord">Discord</a></div>
+            </div>
+        </div>
+        <div class="section bg-black text-white text-sm less-padding">
+            <div class="container text-center">
+                <img class="w-16" :src="$withBase('pterodactyl-flat.svg')">
+                <p class="my-4">
+                    There are tons of options out there when it comes to self-hosted game management panels. However, you will find no panel that can compete with Pterodactyl in terms of features, customization, stability, and most of all: price.
+                </p>
+                <p class="my-4">
+                    We're committed to building the best software that we can, and have been working with game management panels for almost five years now. We've seen games change, and are committed to making the most flexible, lightweight, and future proof panel that we can.
+                </p>
+                <div class=" mt-8 pt-8 border-t border-blue px-8">MIT Licensed | Copyright © 2015 - 2018 Dane Everitt & Contributors.</div>
+            </div>
         </div>
     </div>
 </template>
 
 <script>
     import NavLink from './NavLink.vue';
+    import Slick from 'vue-slick';
 
     export default {
-        components: { NavLink },
+        components: { NavLink, Slick },
+        data() {
+            return {
+                slickOptions: {
+                    slidesToShow: 1,
+                    centerMode: true,
+                    centerPadding: '0',
+                    speed: 1000,
+                    autoplay: true,
+                    variableWidth: true,
+                    arrows: false,
+                    dots: true,
+                    pauseOnHover: false,
+                    pauseOnDotsHover: true,
+                },
+            }
+        },
         computed: {
             data() {
                 return this.$page.frontmatter;
@@ -38,6 +110,6 @@
                     text: this.data.actionText
                 };
             }
-        }
+        },
     };
 </script>

.vuepress/theme/fonts/slick/slick.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by Fontastic.me</metadata>
+<defs>
+<font id="slick" horiz-adv-x="512">
+<font-face font-family="slick" units-per-em="512" ascent="480" descent="-32"/>
+<missing-glyph horiz-adv-x="512" />
+
+<glyph unicode="&#8594;" d="M241 113l130 130c4 4 6 8 6 13 0 5-2 9-6 13l-130 130c-3 3-7 5-12 5-5 0-10-2-13-5l-29-30c-4-3-6-7-6-12 0-5 2-10 6-13l87-88-87-88c-4-3-6-8-6-13 0-5 2-9 6-12l29-30c3-3 8-5 13-5 5 0 9 2 12 5z m234 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
+<glyph unicode="&#8592;" d="M296 113l29 30c4 3 6 7 6 12 0 5-2 10-6 13l-87 88 87 88c4 3 6 8 6 13 0 5-2 9-6 12l-29 30c-3 3-8 5-13 5-5 0-9-2-12-5l-130-130c-4-4-6-8-6-13 0-5 2-9 6-13l130-130c3-3 7-5 12-5 5 0 10 2 13 5z m179 143c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
+<glyph unicode="&#8226;" d="M475 256c0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29 40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110z"/>
+<glyph unicode="&#97;" d="M475 439l0-128c0-5-1-9-5-13-4-4-8-5-13-5l-128 0c-8 0-13 3-17 11-3 7-2 14 4 20l40 39c-28 26-62 39-100 39-20 0-39-4-57-11-18-8-33-18-46-32-14-13-24-28-32-46-7-18-11-37-11-57 0-20 4-39 11-57 8-18 18-33 32-46 13-14 28-24 46-32 18-7 37-11 57-11 23 0 44 5 64 15 20 9 38 23 51 42 2 1 4 3 7 3 3 0 5-1 7-3l39-39c2-2 3-3 3-6 0-2-1-4-2-6-21-25-46-45-76-59-29-14-60-20-93-20-30 0-58 5-85 17-27 12-51 27-70 47-20 19-35 43-47 70-12 27-17 55-17 85 0 30 5 58 17 85 12 27 27 51 47 70 19 20 43 35 70 47 27 12 55 17 85 17 28 0 55-5 81-15 26-11 50-26 70-45l37 37c6 6 12 7 20 4 8-4 11-9 11-17z"/>
+</font></defs></svg>

.vuepress/theme/styles/etline.css

@@ -0,0 +1,343 @@
+@font-face {
+  font-family: 'et-line';
+  src:url('../fonts/et-line/et-line.eot');
+  src:url('../fonts/et-line/et-line.eot?#iefix') format('embedded-opentype'),
+  url('../fonts/et-line/et-line.woff') format('woff'),
+  url('../fonts/et-line/et-line.ttf') format('truetype'),
+  url('../fonts/et-line/et-line.svg#et-line') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+/* Use the following CSS code if you want to use data attributes for inserting your icons */
+[data-icon]:before {
+  font-family: 'et-line';
+  content: attr(data-icon);
+  speak: none;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  display:inline-block;
+}
+
+/* Use the following CSS code if you want to have a class per icon */
+/*
+Instead of a list of all class selectors,
+you can use the generic selector below, but it's slower:
+[class*="icon-"] {
+*/
+.icon-mobile, .icon-laptop, .icon-desktop, .icon-tablet, .icon-phone, .icon-document, .icon-documents, .icon-search, .icon-clipboard, .icon-newspaper, .icon-notebook, .icon-book-open, .icon-browser, .icon-calendar, .icon-presentation, .icon-picture, .icon-pictures, .icon-video, .icon-camera, .icon-printer, .icon-toolbox, .icon-briefcase, .icon-wallet, .icon-gift, .icon-bargraph, .icon-grid, .icon-expand, .icon-focus, .icon-edit, .icon-adjustments, .icon-ribbon, .icon-hourglass, .icon-lock, .icon-megaphone, .icon-shield, .icon-trophy, .icon-flag, .icon-map, .icon-puzzle, .icon-basket, .icon-envelope, .icon-streetsign, .icon-telescope, .icon-gears, .icon-key, .icon-paperclip, .icon-attachment, .icon-pricetags, .icon-lightbulb, .icon-layers, .icon-pencil, .icon-tools, .icon-tools-2, .icon-scissors, .icon-paintbrush, .icon-magnifying-glass, .icon-circle-compass, .icon-linegraph, .icon-mic, .icon-strategy, .icon-beaker, .icon-caution, .icon-recycle, .icon-anchor, .icon-profile-male, .icon-profile-female, .icon-bike, .icon-wine, .icon-hotairballoon, .icon-globe, .icon-genius, .icon-map-pin, .icon-dial, .icon-chat, .icon-heart, .icon-cloud, .icon-upload, .icon-download, .icon-target, .icon-hazardous, .icon-piechart, .icon-speedometer, .icon-global, .icon-compass, .icon-lifesaver, .icon-clock, .icon-aperture, .icon-quote, .icon-scope, .icon-alarmclock, .icon-refresh, .icon-happy, .icon-sad, .icon-facebook, .icon-twitter, .icon-googleplus, .icon-rss, .icon-tumblr, .icon-linkedin, .icon-dribbble {
+  font-family: 'et-line';
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  display:inline-block;
+}
+.icon-mobile:before {
+  content: "\e000";
+}
+.icon-laptop:before {
+  content: "\e001";
+}
+.icon-desktop:before {
+  content: "\e002";
+}
+.icon-tablet:before {
+  content: "\e003";
+}
+.icon-phone:before {
+  content: "\e004";
+}
+.icon-document:before {
+  content: "\e005";
+}
+.icon-documents:before {
+  content: "\e006";
+}
+.icon-search:before {
+  content: "\e007";
+}
+.icon-clipboard:before {
+  content: "\e008";
+}
+.icon-newspaper:before {
+  content: "\e009";
+}
+.icon-notebook:before {
+  content: "\e00a";
+}
+.icon-book-open:before {
+  content: "\e00b";
+}
+.icon-browser:before {
+  content: "\e00c";
+}
+.icon-calendar:before {
+  content: "\e00d";
+}
+.icon-presentation:before {
+  content: "\e00e";
+}
+.icon-picture:before {
+  content: "\e00f";
+}
+.icon-pictures:before {
+  content: "\e010";
+}
+.icon-video:before {
+  content: "\e011";
+}
+.icon-camera:before {
+  content: "\e012";
+}
+.icon-printer:before {
+  content: "\e013";
+}
+.icon-toolbox:before {
+  content: "\e014";
+}
+.icon-briefcase:before {
+  content: "\e015";
+}
+.icon-wallet:before {
+  content: "\e016";
+}
+.icon-gift:before {
+  content: "\e017";
+}
+.icon-bargraph:before {
+  content: "\e018";
+}
+.icon-grid:before {
+  content: "\e019";
+}
+.icon-expand:before {
+  content: "\e01a";
+}
+.icon-focus:before {
+  content: "\e01b";
+}
+.icon-edit:before {
+  content: "\e01c";
+}
+.icon-adjustments:before {
+  content: "\e01d";
+}
+.icon-ribbon:before {
+  content: "\e01e";
+}
+.icon-hourglass:before {
+  content: "\e01f";
+}
+.icon-lock:before {
+  content: "\e020";
+}
+.icon-megaphone:before {
+  content: "\e021";
+}
+.icon-shield:before {
+  content: "\e022";
+}
+.icon-trophy:before {
+  content: "\e023";
+}
+.icon-flag:before {
+  content: "\e024";
+}
+.icon-map:before {
+  content: "\e025";
+}
+.icon-puzzle:before {
+  content: "\e026";
+}
+.icon-basket:before {
+  content: "\e027";
+}
+.icon-envelope:before {
+  content: "\e028";
+}
+.icon-streetsign:before {
+  content: "\e029";
+}
+.icon-telescope:before {
+  content: "\e02a";
+}
+.icon-gears:before {
+  content: "\e02b";
+}
+.icon-key:before {
+  content: "\e02c";
+}
+.icon-paperclip:before {
+  content: "\e02d";
+}
+.icon-attachment:before {
+  content: "\e02e";
+}
+.icon-pricetags:before {
+  content: "\e02f";
+}
+.icon-lightbulb:before {
+  content: "\e030";
+}
+.icon-layers:before {
+  content: "\e031";
+}
+.icon-pencil:before {
+  content: "\e032";
+}
+.icon-tools:before {
+  content: "\e033";
+}
+.icon-tools-2:before {
+  content: "\e034";
+}
+.icon-scissors:before {
+  content: "\e035";
+}
+.icon-paintbrush:before {
+  content: "\e036";
+}
+.icon-magnifying-glass:before {
+  content: "\e037";
+}
+.icon-circle-compass:before {
+  content: "\e038";
+}
+.icon-linegraph:before {
+  content: "\e039";
+}
+.icon-mic:before {
+  content: "\e03a";
+}
+.icon-strategy:before {
+  content: "\e03b";
+}
+.icon-beaker:before {
+  content: "\e03c";
+}
+.icon-caution:before {
+  content: "\e03d";
+}
+.icon-recycle:before {
+  content: "\e03e";
+}
+.icon-anchor:before {
+  content: "\e03f";
+}
+.icon-profile-male:before {
+  content: "\e040";
+}
+.icon-profile-female:before {
+  content: "\e041";
+}
+.icon-bike:before {
+  content: "\e042";
+}
+.icon-wine:before {
+  content: "\e043";
+}
+.icon-hotairballoon:before {
+  content: "\e044";
+}
+.icon-globe:before {
+  content: "\e045";
+}
+.icon-genius:before {
+  content: "\e046";
+}
+.icon-map-pin:before {
+  content: "\e047";
+}
+.icon-dial:before {
+  content: "\e048";
+}
+.icon-chat:before {
+  content: "\e049";
+}
+.icon-heart:before {
+  content: "\e04a";
+}
+.icon-cloud:before {
+  content: "\e04b";
+}
+.icon-upload:before {
+  content: "\e04c";
+}
+.icon-download:before {
+  content: "\e04d";
+}
+.icon-target:before {
+  content: "\e04e";
+}
+.icon-hazardous:before {
+  content: "\e04f";
+}
+.icon-piechart:before {
+  content: "\e050";
+}
+.icon-speedometer:before {
+  content: "\e051";
+}
+.icon-global:before {
+  content: "\e052";
+}
+.icon-compass:before {
+  content: "\e053";
+}
+.icon-lifesaver:before {
+  content: "\e054";
+}
+.icon-clock:before {
+  content: "\e055";
+}
+.icon-aperture:before {
+  content: "\e056";
+}
+.icon-quote:before {
+  content: "\e057";
+}
+.icon-scope:before {
+  content: "\e058";
+}
+.icon-alarmclock:before {
+  content: "\e059";
+}
+.icon-refresh:before {
+  content: "\e05a";
+}
+.icon-happy:before {
+  content: "\e05b";
+}
+.icon-sad:before {
+  content: "\e05c";
+}
+.icon-facebook:before {
+  content: "\e05d";
+}
+.icon-twitter:before {
+  content: "\e05e";
+}
+.icon-googleplus:before {
+  content: "\e05f";
+}
+.icon-rss:before {
+  content: "\e060";
+}
+.icon-tumblr:before {
+  content: "\e061";
+}
+.icon-linkedin:before {
+  content: "\e062";
+}
+.icon-dribbble:before {
+  content: "\e063";
+}

.vuepress/theme/styles/home.css

@@ -1,70 +1,105 @@
 .home {
-    @apply .mx-auto;
-    max-width: 960px;
+    padding-top: 52px;
 
-    @screen md {
-        @apply .px-8;
+    .header {
+        @apply .rounded-t-none !important;
     }
 
-    .hero {
-        @apply .text-center .mx-auto;
-        padding-top: 58px;
+    .section {
+        @apply .relative .z-10;
+        padding-top: 5rem;
+        padding-bottom: 5rem;
 
-        img {
-            @apply .my-4;
-            max-height: 20rem;
-
-            @screen smx {
-                max-height: 6rem;
-            }
+        &.less-padding {
+            padding-top: 3rem;
+            padding-bottom: 3rem;
         }
 
-        .action-button {
-            @apply .inline-block .bg-blue .text-white .px-8 .py-4 .rounded .text-lg .font-normal .border .border-blue-dark;
-            transition: background-color 100ms ease;
-
-            &:hover {
-                @apply .no-underline .bg-blue-light .border-blue;
-                transition: background-color 100ms ease;
-            }
-        }
-
-        h1 {
-            @apply .text-5xl .text-black;
-        }
-
-        .description {
-            @apply .text-grey-darkest;
-            font-size: 1.6rem;
+        .container {
+            @apply .px-8 .mx-auto;
         }
     }
 
-    .features {
-        @apply .border-t .py-5 .px-4 .mt-10;
+    .btn {
+        @apply .inline-block .border-2 .border-white .m-3 .p-4 .uppercase .text-white .text-lg .rounded;
+        @apply .no-underline !important;
+        transition: all 100ms linear;
 
-        @screen md {
-            @apply .flex .flex-wrap .items-start .justify-between .px-0;
-            align-content: stretch;
+        &:hover {
+            @apply .text-blue .bg-white;
+        }
+    }
 
-            .feature {
-                @apply .flex-grow ;
-                flex-basis: 30%;
-                max-width: 30%;
+    .feature {
+        @apply .p-4 .my-4 .inline-block;
+
+        span {
+            @apply .block .rounded-full .bg-white .text-blue .text-center .w-24 .h-24 .mx-auto .py-6;
+
+            i {
+                @apply .text-5xl;
             }
         }
 
+        h3 {
+            @apply .p-2 .my-2 .border-b-4 .border-blue-dark;
+        }
+    }
+
+    @screen sm {
         .feature {
-            h2 {
-                @apply .border-b-0 .pb-0 .py-4 .font-normal;
+            @apply .w-1/2;
+        }
+    }
+
+    @screen lg {
+        .feature {
+            @apply .w-1/3;
+        }
+    }
+
+    .screenshots {
+        cursor: ew-resize;
+
+        .item {
+            position: relative;
+            transform: scale(0.7);
+            transition: all .5s ease-in-out;
+
+            img {
+                max-width: 90vw;
+                max-height: 40rem;
             }
 
-            p {
-                @apply .text-grey-darker;
+            &.slick-center {
+                transform: scale(1);
+                z-index: 10;
+            }
+        }
+
+        .slick-dots li {
+            button:before {
+                @apply .text-blue;
+            }
+
+            &.slick-active button:before {
+                @apply .text-blue .opacity-100;
             }
         }
     }
 
-    .footer {
-        @apply .text-center .text-grey .text-sm .pb-8 .px-4;
+    .useful-links {
+        @apply .p-0 .mt-4;
+
+        li {
+            @apply .mx-0 .my-3;
+            list-style: none;
+
+            &::before {
+                @apply .mr-2 .-mt-1 .text-blue;
+                content: '■ ';
+            }
+        }
     }
+
 }

.vuepress/theme/styles/main.css

@@ -9,5 +9,7 @@
 @import "./code.css";
 @import "./notices.css";
 @import "./badges.css";
+@import "./etline.css";
+@import "./slick.css";
 
 @import "tailwindcss/utilities";

.vuepress/theme/styles/slick.css

@@ -0,0 +1,315 @@
+/* Slider */
+.slick-slider {
+  position: relative;
+
+  display: block;
+  box-sizing: border-box;
+
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  -webkit-touch-callout: none;
+  -khtml-user-select: none;
+  -ms-touch-action: pan-y;
+  touch-action: pan-y;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.slick-list {
+  position: relative;
+
+  display: block;
+  overflow: hidden;
+
+  margin: 0;
+  padding: 0;
+}
+
+.slick-list:focus {
+  outline: none;
+}
+
+.slick-list.dragging {
+  cursor: pointer;
+  cursor: hand;
+}
+
+.slick-slider .slick-track,
+.slick-slider .slick-list {
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  -ms-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+}
+
+.slick-track {
+  position: relative;
+  top: 0;
+  left: 0;
+
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.slick-track:before,
+.slick-track:after {
+  display: table;
+
+  content: '';
+}
+
+.slick-track:after {
+  clear: both;
+}
+
+.slick-loading .slick-track {
+  visibility: hidden;
+}
+
+.slick-slide {
+  display: none;
+  float: left;
+
+  height: 100%;
+  min-height: 1px;
+}
+
+[dir='rtl'] .slick-slide {
+  float: right;
+}
+
+.slick-slide img {
+  display: block;
+}
+
+.slick-slide.slick-loading img {
+  display: none;
+}
+
+.slick-slide.dragging img {
+  pointer-events: none;
+}
+
+.slick-initialized .slick-slide {
+  display: block;
+}
+
+.slick-loading .slick-slide {
+  visibility: hidden;
+}
+
+.slick-vertical .slick-slide {
+  display: block;
+
+  height: auto;
+
+  border: 1px solid transparent;
+}
+
+.slick-arrow.slick-hidden {
+  display: none;
+}
+
+/*  --------------- THEME --------------- */
+@charset 'UTF-8';
+/* Slider */
+.slick-loading .slick-list {
+  background: #fff url('../../public/frontpage/loading.svg') center center no-repeat;
+}
+
+/* Icons */
+@font-face {
+  font-family: 'slick';
+  font-weight: normal;
+  font-style: normal;
+
+  src: url('../fonts/slick/slick.eot');
+  src: url('../fonts/slick/slick.eot?#iefix') format('embedded-opentype'), url('../fonts/slick/slick.woff') format('woff'), url('../fonts/slick/slick.ttf') format('truetype'), url('../fonts/slick/slick.svg#slick') format('svg');
+}
+
+/* Arrows */
+.slick-prev,
+.slick-next {
+  font-size: 0;
+  line-height: 0;
+
+  position: absolute;
+  top: 50%;
+
+  display: block;
+
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  -webkit-transform: translate(0, -50%);
+  -ms-transform: translate(0, -50%);
+  transform: translate(0, -50%);
+
+  cursor: pointer;
+
+  color: transparent;
+  border: none;
+  outline: none;
+  background: transparent;
+}
+
+.slick-prev:hover,
+.slick-prev:focus,
+.slick-next:hover,
+.slick-next:focus {
+  color: transparent;
+  outline: none;
+  background: transparent;
+}
+
+.slick-prev:hover:before,
+.slick-prev:focus:before,
+.slick-next:hover:before,
+.slick-next:focus:before {
+  opacity: 1;
+}
+
+.slick-prev.slick-disabled:before,
+.slick-next.slick-disabled:before {
+  opacity: .25;
+}
+
+.slick-prev:before,
+.slick-next:before {
+  font-family: 'slick';
+  font-size: 20px;
+  line-height: 1;
+
+  opacity: .75;
+  color: white;
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.slick-prev {
+  left: -25px;
+}
+
+[dir='rtl'] .slick-prev {
+  right: -25px;
+  left: auto;
+}
+
+.slick-prev:before {
+  content: '←';
+}
+
+[dir='rtl'] .slick-prev:before {
+  content: '→';
+}
+
+.slick-next {
+  right: -25px;
+}
+
+[dir='rtl'] .slick-next {
+  right: auto;
+  left: -25px;
+}
+
+.slick-next:before {
+  content: '→';
+}
+
+[dir='rtl'] .slick-next:before {
+  content: '←';
+}
+
+/* Dots */
+.slick-dotted.slick-slider {
+  margin-bottom: 30px;
+}
+
+.slick-dots {
+  position: absolute;
+  bottom: -25px;
+
+  display: block;
+
+  width: 100%;
+  padding: 0;
+  margin: 0;
+
+  list-style: none;
+
+  text-align: center;
+}
+
+.slick-dots li {
+  position: relative;
+
+  display: inline-block;
+
+  width: 20px;
+  height: 20px;
+  margin: 0 5px;
+  padding: 0;
+
+  cursor: pointer;
+}
+
+.slick-dots li button {
+  font-size: 0;
+  line-height: 0;
+
+  display: block;
+
+  width: 20px;
+  height: 20px;
+  padding: 5px;
+
+  cursor: pointer;
+
+  color: transparent;
+  border: 0;
+  outline: none;
+  background: transparent;
+}
+
+.slick-dots li button:hover,
+.slick-dots li button:focus {
+  outline: none;
+}
+
+.slick-dots li button:hover:before,
+.slick-dots li button:focus:before {
+  opacity: 1;
+}
+
+.slick-dots li button:before {
+  font-family: 'slick';
+  font-size: 6px;
+  line-height: 20px;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  width: 20px;
+  height: 20px;
+
+  content: '•';
+  text-align: center;
+
+  opacity: .25;
+  color: black;
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.slick-dots li.slick-active button:before {
+  opacity: .75;
+  color: black;
+}
+

package.json

@@ -1,5 +1,7 @@
 {
   "dependencies": {
+    "jquery": "^3.3.1",
+    "vue-slick": "^1.1.13",
     "vuepress": "^0.13.0"
   },
   "scripts": {

yarn.lock

@@ -3421,6 +3421,10 @@ joi@^11.1.1:
     isemail "3.x.x"
     topo "2.x.x"
 
+jquery@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.3.1.tgz#958ce29e81c9790f31be7792df5d4d95fc57fbca"
+
 js-base64@^2.1.9:
   version "2.4.8"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.8.tgz#57a9b130888f956834aa40c5b165ba59c758f033"
@@ -5869,6 +5873,10 @@ slice-ansi@1.0.0:
   dependencies:
     is-fullwidth-code-point "^2.0.0"
 
+slick-carousel@^1.6.0:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/slick-carousel/-/slick-carousel-1.8.1.tgz#a4bfb29014887bb66ce528b90bd0cda262cc8f8d"
+
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
@@ -6611,6 +6619,12 @@ vue-server-renderer@^2.5.16:
     serialize-javascript "^1.3.0"
     source-map "0.5.6"
 
+vue-slick@^1.1.13:
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/vue-slick/-/vue-slick-1.1.13.tgz#e7555c49f7e70880aa3b85b91422154667d5218f"
+  dependencies:
+    slick-carousel "^1.6.0"
+
 vue-style-loader@^4.1.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.1.tgz#7c1d051b24f60b1707602b549ed50b4c8111d316"