index options added

resources/js/components/Index/Components/PricingTables.vue

@@ -11,11 +11,11 @@
                 </header>
                 <section class="plan-features">
                     <b class="storage-size">{{ plan.data.attributes.capacity_formatted }}</b>
-                    <span class="storage-description">Of Storage Capacity</span>
+                    <span class="storage-description">{{ $t('page_pricing_tables.storage_capacity') }}</span>
                 </section>
                 <footer class="plan-footer">
                     <b class="price">
-                        {{ plan.data.attributes.price }}/Mo.
+                        {{ plan.data.attributes.price }}/{{ $t('global.monthly_ac') }}
                     </b>
                 </footer>
             </div>

resources/js/components/Index/IndexGetStarted.vue

@@ -1,15 +1,15 @@
 <template>
-    <div class="page-wrapper large get-started">
+    <div class="page-wrapper large get-started" v-if="index.section_get_started === '1'">
 
         <PageTitle
                 class="page-title"
                 type="center"
-                title="Ready to Get <span style='color: #41B883'>Started</span><br> With Us?"
-                description="Your private cloud storage software build on Laravel & Vue.js. No limits & no monthly fees. Trully freedom."
+                :title="index.get_started_title"
+                :description="index.get_started_description"
         ></PageTitle>
 
         <router-link tag="button" class="get-started-button" :to="{name: 'SignUp'}">
-            <span class="content">Get Started</span>
+            <span class="content">{{ $t('page_index.get_started_button') }}</span>
             <chevron-right-icon size="22"></chevron-right-icon>
         </router-link>
 
@@ -44,21 +44,22 @@
     import PageTitle from '@/components/Index/Components/PageTitle'
     import {
         ChevronRightIcon,
+        UploadCloudIcon,
         FolderPlusIcon,
         HardDriveIcon,
         SettingsIcon,
         Trash2Icon,
         SearchIcon,
+        ShareIcon,
         CloudIcon,
         ImageIcon,
+        InfoIcon,
         GridIcon,
         LinkIcon,
         StarIcon,
         EyeIcon,
     } from 'vue-feather-icons'
-    import ShareIcon from "vue-feather-icons/icons/ShareIcon";
-    import UploadCloudIcon from "vue-feather-icons/icons/UploadCloudIcon";
-    import InfoIcon from "vue-feather-icons/icons/InfoIcon";
+    import { mapGetters } from 'vuex'
 
     export default {
         name: 'IndexGetStarted',
@@ -79,7 +80,10 @@
             LinkIcon,
             StarIcon,
             EyeIcon,
-        }
+        },
+        computed: {
+            ...mapGetters(['index']),
+        },
     }
 </script>
 

resources/js/components/Index/IndexHeroScreenshot.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="page-wrapper large hero-screenshot">
-        <img class="hero-light" src="/assets/images/vuefilemanager-screenshot-light.png" alt="VueFileManager application">
-        <img class="hero-dark" src="/assets/images/vuefilemanager-screenshot-dark.png" alt="VueFileManager application">
+        <img class="hero-light" src="/assets/images/vuefilemanager-screenshot-light.png" :alt="config.app_name">
+        <img class="hero-dark" src="/assets/images/vuefilemanager-screenshot-dark.png" :alt="config.app_name">
 
         <div class="icons">
             <link-icon size="20" class="icon"></link-icon>
@@ -22,6 +22,7 @@
 </template>
 
 <script>
+    import { mapGetters } from 'vuex'
     import {
         FolderPlusIcon,
         HardDriveIcon,
@@ -36,7 +37,7 @@
     } from 'vue-feather-icons'
 
     export default {
-        name: 'IndexNavigation',
+        name: 'IndexHeroScreenshot',
         components: {
             FolderPlusIcon,
             HardDriveIcon,
@@ -48,7 +49,10 @@
             LinkIcon,
             StarIcon,
             EyeIcon,
-        }
+        },
+        computed: {
+            ...mapGetters(['config']),
+        },
     }
 </script>
 

resources/js/components/Index/IndexMainFeatures.vue

@@ -1,11 +1,12 @@
 <template>
     <section class="main-features page-wrapper medium">
         <PageTitle
+                v-if="index.section_features === '1'"
                 type="center"
-                title="The Fastest Growing <span style='color: #41B883'>File Manager</span> on the CodeCanyon Market"
-                description="Your private cloud storage software build on Laravel & Vue.js. No limits & no monthly fees. Trully freedom."
+                :title="index.features_title"
+                :description="index.features_description"
         ></PageTitle>
-        <div class="content">
+        <div v-if="index.section_feature_boxes === '1'" class="content">
             <div class="hero">
                 <img src="/assets/images/hero-Illustration.svg" alt="Hero">
             </div>
@@ -15,10 +16,10 @@
                         <cloud-icon size="24"></cloud-icon>
                     </div>
                     <h3 class="title">
-                        Truly Freedom
+                        {{ index.feature_title_1 }}
                     </h3>
                     <p class="description">
-                        You have full control over VueFileManager, no third authorities will control your service or usage, only you.
+                        {{ index.feature_description_1 }}
                     </p>
                 </div>
                 <div class="feature">
@@ -26,10 +27,10 @@
                         <user-icon size="24"></user-icon>
                     </div>
                     <h3 class="title">
-                        The Sky is the Limit
+                        {{ index.feature_title_2 }}
                     </h3>
                     <p class="description">
-                        VueFileManager is cloud storage software. You have to install and running application on your own server hosting.
+                        {{ index.feature_description_2 }}
                     </p>
                 </div>
                 <div class="feature">
@@ -37,10 +38,10 @@
                         <hard-drive-icon size="24"></hard-drive-icon>
                     </div>
                     <h3 class="title">
-                        No Monthly Fees
+                        {{ index.feature_title_3 }}
                     </h3>
                     <p class="description">
-                        When you running VueFileManager on your own server hosting, anybody can't control your content or resell your user data. Your data is safe.
+                        {{ index.feature_description_3 }}
                     </p>
                 </div>
             </div>
@@ -49,8 +50,9 @@
 </template>
 
 <script>
-    import PageTitle from '@/components/Index/Components/PageTitle'
     import { UserIcon, CloudIcon, HardDriveIcon } from 'vue-feather-icons'
+    import PageTitle from '@/components/Index/Components/PageTitle'
+    import { mapGetters } from 'vuex'
 
     export default {
         name: 'IndexMainFeatures',
@@ -59,7 +61,10 @@
             HardDriveIcon,
             CloudIcon,
             UserIcon,
-        }
+        },
+        computed: {
+            ...mapGetters(['index']),
+        },
     }
 </script>
 

resources/js/components/Index/IndexNavigation.vue

@@ -1,37 +1,37 @@
 <template>
     <nav class="main-navigation">
         <router-link :to="{name: 'SaaSLandingPage'}" tag="div" class="logo">
-            <img v-if="config.app_logo_horizontal" :src="config.app_logo_horizontal" :alt="config.app_name">
+            <img v-if="config.app_logo_horizontal" :src="$getImage(config.app_logo_horizontal)" :alt="config.app_name">
             <b v-if="! config.app_logo_horizontal" class="logo-text">{{ config.app_name }}</b>
         </router-link>
         <div class="navigation">
             <ul class="navigation-links">
                 <li>
                     <a href="/#pricing">
-                        Pricing
+                        {{ $t('page_index.menu.pricing') }}
                     </a>
                 </li>
                 <li>
                     <router-link :to="{name: 'ContactUs'}">
-                        Contact Us
+                        {{ $t('page_index.menu.contact_us') }}
                     </router-link>
                 </li>
             </ul>
             <ul class="navigation-links">
                 <li>
                     <router-link :to="{name: 'SignIn'}">
-                        Log In
+                        {{ $t('page_index.menu.log_in') }}
                     </router-link>
                 </li>
                 <li>
                     <router-link class="cta-button" :to="{name: 'SignUp'}">
-                        Sign Up
+                        {{ $t('page_index.menu.sign_in') }}
                     </router-link>
                 </li>
             </ul>
         </div>
         <router-link class="cta-button log-in" :to="{name: 'SignIn'}">
-            Log In
+            {{ $t('page_index.menu.log_in') }}
         </router-link>
     </nav>
 </template>

resources/js/components/Index/IndexPageFooter.vue

@@ -1,41 +1,29 @@
 <template>
     <footer class="page-wrapper medium">
         <router-link :to="{name: 'SaaSLandingPage'}" tag="div" class="logo">
-            <img v-if="config.app_logo_horizontal" :src="config.app_logo_horizontal" :alt="config.app_name">
+            <img v-if="config.app_logo_horizontal" :src="$getImage(config.app_logo_horizontal)" :alt="config.app_name">
             <b v-if="! config.app_logo_horizontal" class="logo-text">{{ config.app_name }}</b>
         </router-link>
         <ul class="navigation-links">
             <li>
                 <a href="/#pricing">
-                    Pricing
+                    {{ $t('page_index.menu.pricing') }}
                 </a>
             </li>
             <li>
                 <router-link :to="{name: 'ContactUs'}">
-                    Contact Us
+                    {{ $t('page_index.menu.contact_us') }}
                 </router-link>
             </li>
         </ul>
         <ul class="navigation-links">
-            <li>
-                <router-link :to="{name: 'DynamicPage', params: {slug: 'terms-of-service'}}">
-                    Terms of Service
-                </router-link>
-            </li>
-            <li>
-                <router-link :to="{name: 'DynamicPage', params: {slug: 'privacy-policy'}}">
-                    Privacy Policy
-                </router-link>
-            </li>
-            <li>
-                <router-link :to="{name: 'DynamicPage', params: {slug: 'cookie-policy'}}">
-                    Cookie Policy
+            <li v-if="legal.visibility" v-for="(legal, index) in config.legal" :key="index">
+                <router-link :to="{name: 'DynamicPage', params: {slug: legal.slug }}">
+                    {{ legal.title }}
                 </router-link>
             </li>
         </ul>
-        <p class="copyright">
-            © 2020 {{ config.app_name }}. All rights reserved.
-        </p>
+        <p class="copyright" v-html="config.app_footer"></p>
     </footer>
 </template>
 
@@ -100,6 +88,11 @@
         color: $text-muted;
         padding-top: 50px;
         padding-bottom: 20px;
+
+        /deep/ a {
+            color: $theme;
+            font-weight: 700;
+        }
     }
 
     @media only screen and (max-width: 960px) {

resources/js/components/Index/IndexPageHeader.vue

@@ -1,22 +1,22 @@
 <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."
+            :title="index.header_title"
+            :description="index.header_description"
         ></PageTitle>
 
         <router-link class="sign-up-button" :to="{name: 'SignUp'}">
-            <AuthButton class="button" icon="chevron-right" text="Sign Up Now" />
+            <AuthButton class="button" icon="chevron-right" :text="$t('page_index.sign_up_button')" />
         </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>
+                <b class="feature-title">{{ $t('page_index.sign_feature_1') }}</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>
+                <b class="feature-title">{{ $t('page_index.sign_feature_2', {defaultSpace: config.storageDefaultSpace}) }}</b>
             </div>
         </div>
     </header>
@@ -27,6 +27,7 @@
     import PageTitle from '@/components/Index/Components/PageTitle'
     import AuthButton from '@/components/Auth/AuthButton'
     import { CreditCardIcon } from 'vue-feather-icons'
+    import { mapGetters } from 'vuex'
 
     export default {
         name: 'IndexPageHeader',
@@ -35,7 +36,10 @@
             CreditCardIcon,
             HardDriveIcon,
             AuthButton,
-        }
+        },
+        computed: {
+            ...mapGetters(['index', 'config']),
+        },
     }
 </script>
 

resources/js/components/Index/IndexPricingTables.vue

@@ -1,19 +1,17 @@
 <template>
-    <div class="page-wrapper medium pricing" v-if="! isEmpty">
+    <div class="page-wrapper medium pricing" v-if="! isEmpty && index.section_pricing_content === '1'">
         <div id="pricing" class="page-title center">
-            <h1 class="title">
-                Pick the <span style="color: #41B883">Best Plan</span> For Your Needs
-            </h1>
+            <h1 class="title" v-html="index.pricing_title"></h1>
         </div>
 
         <PricingTables class="pricing-tables" @load="pricingLoaded"/>
 
         <div class="page-title center">
             <h2 class="description">
-                Your private cloud storage software build on Laravel & Vue.js. No limits & no monthly fees. Trully freedom.
+                {{ index.pricing_description }}
             </h2>
             <router-link class="sign-up-button" :to="{name: 'SignUp'}">
-                <AuthButton class="button" icon="chevron-right" text="Sign Up Now" />
+                <AuthButton class="button" icon="chevron-right" :text="$t('page_index.sign_up_button')" />
             </router-link>
         </div>
 
@@ -26,6 +24,7 @@
     import PricingTables from '@/components/Index/Components/PricingTables'
     import AuthButton from '@/components/Auth/AuthButton'
     import { CloudIcon } from 'vue-feather-icons'
+    import { mapGetters } from 'vuex'
 
     export default {
         name: 'IndexPricingTables',
@@ -34,6 +33,9 @@
             AuthButton,
             CloudIcon,
         },
+        computed: {
+            ...mapGetters(['index']),
+        },
         data() {
             return {
                 isEmpty: false,
@@ -41,7 +43,6 @@
         },
         methods: {
             pricingLoaded(pricing) {
-
                 if (pricing.length === 0)
                     this.isEmpty = true
             }