landing page

2026-04-19 00:22: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/IndexPageHeader.vue
+++ b/resources/js/components/Index/IndexPageHeader.vue
@@ -0,0 +1,110 @@
+<template>
+    <header class="main-header page-wrapper medium">
+        <PageTitle
+            title="Simple <span style='color: #41B883'>&</span> Powerfull Personal Cloud Storage"
+            description="Your private cloud storage software build on Laravel & Vue.js. No limits & no monthly fees. Trully freedom."
+        ></PageTitle>
+
+        <router-link class="sign-up-button" :to="{name: 'SignUp'}">
+            <AuthButton class="button" icon="chevron-right" text="Sign Up Now" />
+        </router-link>
+
+        <div class="features">
+            <div class="feature">
+                <credit-card-icon size="19" class="feature-icon"></credit-card-icon>
+                <b class="feature-title">No credit card required</b>
+            </div>
+            <div class="feature">
+                <hard-drive-icon size="19" class="feature-icon"></hard-drive-icon>
+                <b class="feature-title">5GB Free storage space</b>
+            </div>
+        </div>
+    </header>
+</template>
+
+<script>
+    import HardDriveIcon from "vue-feather-icons/icons/HardDriveIcon";
+    import PageTitle from '@/components/Index/Components/PageTitle'
+    import AuthButton from '@/components/Auth/AuthButton'
+    import { CreditCardIcon } from 'vue-feather-icons'
+
+    export default {
+        name: 'IndexPageHeader',
+        components: {
+            PageTitle,
+            CreditCardIcon,
+            HardDriveIcon,
+            AuthButton,
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_landing-page';
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .features {
+        display: flex;
+        margin-top: 35px;
+
+        .feature {
+            display: flex;
+            margin-right: 35px;
+
+            &:nth-child(1) {
+                path, line, polyline, rect, circle {
+                    stroke: $yellow;
+                }
+            }
+
+            &:nth-child(2) {
+                path, line, polyline, rect, circle {
+                    stroke: $purple;
+                }
+            }
+
+            &:last-child {
+                margin-right: 0;
+            }
+
+            .feature-title {
+                @include font-size(14);
+                font-weight: 700;
+            }
+
+            .feature-icon {
+                margin-right: 10px;
+            }
+        }
+    }
+
+    .main-header {
+        padding-top: 70px;
+    }
+
+    .sign-up-button {
+        margin-top: 65px;
+        display: block;
+
+        .button {
+            margin-left: 0;
+            margin-right: 0;
+        }
+    }
+
+    @media only screen and (max-width: 690px) {
+        .features {
+            display: block;
+
+            .feature {
+                margin-right: 0;
+                margin-bottom: 15px;
+
+                &:last-child {
+                    margin-bottom: 0;
+                }
+            }
+        }
+    }
+</style>