landing page

2026-04-20 08:52:15 +00:00 · 2020-07-08 09:07:11 +02:00
parent 5a5125967f
commit a43f0e6908
46 changed files with 2926 additions and 641 deletions
--- a/resources/js/components/Index/IndexHeroScreenshot.vue
+++ b/resources/js/components/Index/IndexHeroScreenshot.vue
@@ -0,0 +1,198 @@
+<template>
+    <div class="page-wrapper large hero-screenshot">
+        <img src="/assets/images/vuefilemanager-screenshot.png" alt="VueFileManager screenshot">
+
+        <div class="icons">
+            <link-icon size="20" class="icon"></link-icon>
+            <image-icon size="38" class="icon"></image-icon>
+            <hard-drive-icon size="34" class="icon"></hard-drive-icon>
+            <folder-plus-icon size="40" class="icon"></folder-plus-icon>
+            <settings-icon size="18" class="icon"></settings-icon>
+            <search-icon size="24" class="icon"></search-icon>
+            <star-icon size="18" class="icon"></star-icon>
+            <trash2-icon size="32" class="icon"></trash2-icon>
+            <search-icon size="18" class="icon"></search-icon>
+            <eye-icon size="30" class="icon"></eye-icon>
+            <star-icon size="30" class="icon"></star-icon>
+            <folder-plus-icon size="16" class="icon"></folder-plus-icon>
+            <grid-icon size="20" class="icon"></grid-icon>
+        </div>
+    </div>
+</template>
+
+<script>
+    import {
+        FolderPlusIcon,
+        HardDriveIcon,
+        SettingsIcon,
+        Trash2Icon,
+        SearchIcon,
+        ImageIcon,
+        GridIcon,
+        LinkIcon,
+        StarIcon,
+        EyeIcon,
+    } from 'vue-feather-icons'
+
+    export default {
+        name: 'IndexNavigation',
+        components: {
+            FolderPlusIcon,
+            HardDriveIcon,
+            SettingsIcon,
+            Trash2Icon,
+            SearchIcon,
+            ImageIcon,
+            GridIcon,
+            LinkIcon,
+            StarIcon,
+            EyeIcon,
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_landing-page';
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .icons {
+
+        .icon {
+            position: absolute;
+
+            &:nth-child(1) {
+                top: -14%;
+                right: 2%;
+            }
+
+            &:nth-child(2) {
+                top: -5%;
+                right: 14%;
+                transform: rotate(19deg);
+            }
+
+            &:nth-child(3) {
+                top: -6.5%;
+                right: 28.5%;
+                transform: rotate(-12deg);
+
+                line, path {
+                    stroke: $theme;
+                }
+            }
+
+            &:nth-child(4) {
+                top: -9.5%;
+                right: 41.5%;
+                transform: rotate(13deg);
+
+                path, line {
+                    stroke: $yellow;
+                }
+            }
+
+            &:nth-child(5) {
+                top: -16%;
+                right: 26%;
+
+                circle, path {
+                    stroke: $red;
+                }
+            }
+
+            &:nth-child(6) {
+                top: -13%;
+                right: 49%;
+            }
+
+            &:nth-child(7) {
+                top: 2.5%;
+                right: 46%;
+
+                polygon {
+                    stroke: $purple;
+                }
+            }
+
+            &:nth-child(8) {
+                top: 13%;
+                right: 2.5%;
+                transform: rotate(22deg);
+
+                polyline, path, line {
+                    stroke: $red;
+                }
+            }
+
+            &:nth-child(9) {
+                top: 14%;
+                right: 11%;
+
+                circle, line {
+                    stroke: $purple;
+                }
+            }
+
+            &:nth-child(10) {
+                top: 29%;
+                right: 7%;
+                transform: rotate(19deg);
+            }
+
+            &:nth-child(11) {
+                top: 38%;
+                right: 3%;
+
+                polygon {
+                    stroke: $yellow;
+                }
+            }
+
+            &:nth-child(12) {
+                top: 50%;
+                right: 11.5%;
+                transform: rotate(-22deg);
+            }
+
+            &:nth-child(13) {
+                top: 34%;
+                right: 16%;
+                transform: rotate(13deg);
+
+                rect {
+                    stroke: $theme;
+                }
+            }
+        }
+    }
+
+    .hero-screenshot {
+        padding-top: 75px;
+        padding-bottom: 130px;
+
+        img {
+            border-radius: 8px;
+            max-width: 1165px;
+            box-shadow: 0 7px 255px rgba(#19363C, 0.1);
+        }
+    }
+
+    @media only screen and (max-width: 1390px) and (min-width: 1190px) {
+        .hero-screenshot {
+
+            img {
+                width: 80%;
+            }
+        }
+    }
+
+    @media only screen and (max-width: 1190px) {
+        .hero-screenshot {
+
+            img {
+                width: 100%;
+            }
+        }
+    }
+</style>