landing page

2026-04-27 18:40:39 +00:00 · 2020-07-08 09:07:11 +02:00
parent 5a5125967f
commit a43f0e6908
46 changed files with 2926 additions and 641 deletions
@@ -0,0 +1,199 @@
+<template>
+    <div class="landing-page">
+
+        <!--Navigation-->
+        <Navigation class="page-wrapper small"/>
+
+        <!--Page content-->
+        <div class="page-wrapper small">
+
+            <!--Headline-->
+            <PageTitle
+                    class="headline"
+                    title="Contact Us"
+                    description="Dominion, open bearing brought may dominion male beginning."
+            ></PageTitle>
+
+            <!--Content-->
+            <div class="page-content">
+                <ValidationObserver @submit.prevent="contactForm" ref="contactForm" v-slot="{ invalid }" tag="form"
+                                    class="form block-form">
+
+                    <div class="block-wrapper">
+                        <label>{{ $t('page_registration.label_email') }}</label>
+                        <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
+                                            v-slot="{ errors }">
+                            <input v-model="contact.email" :placeholder="$t('page_registration.placeholder_email')" type="email"
+                                   :class="{'is-error': errors[0]}"/>
+                            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                        </ValidationProvider>
+                    </div>
+
+                    <div class="block-wrapper">
+                        <label>Message:</label>
+                        <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Message" rules="required"
+                                            v-slot="{ errors }">
+                            <textarea v-model="contact.message" placeholder="Type your message here..." rows="4" :class="{'is-error': errors[0]}"></textarea>
+                            <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
+                        </ValidationProvider>
+                    </div>
+
+                    <div>
+                        <AuthButton class="submit-button" icon="chevron-right" text="Send Message" :loading="isLoading" :disabled="isLoading"/>
+                    </div>
+                </ValidationObserver>
+            </div>
+        </div>
+
+        <!--Footer-->
+        <PageFooter/>
+    </div>
+</template>
+
+<script>
+    import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+    import AuthButton from '@/components/Auth/AuthButton'
+    import {required} from 'vee-validate/dist/rules'
+
+    import PageTitle from '@/components/Index/Components/PageTitle'
+    import PageFooter from '@/components/Index/IndexPageFooter'
+    import Navigation from '@/components/Index/IndexNavigation'
+    import {mapGetters} from 'vuex'
+    import axios from 'axios'
+
+    export default {
+        name: 'ContactUs',
+        components: {
+            ValidationProvider,
+            ValidationObserver,
+            AuthButton,
+            PageFooter,
+            Navigation,
+            PageTitle,
+            required,
+        },
+        computed: {
+            ...mapGetters(['config']),
+        },
+        data() {
+            return {
+                isLoading: false,
+                contact: {
+                    email: '',
+                    message: '',
+                },
+            }
+        },
+        methods: {
+            async contactForm() {
+
+                // Validate fields
+                const isValid = await this.$refs.contactForm.validate();
+
+                if (!isValid) return;
+
+                // Start loading
+                this.isLoading = true
+
+                // Send request to get user token
+                axios
+                    .post('/api/user/register', this.register)
+                    .then(() => {
+
+                        // End loading
+                        this.isLoading = false
+
+                        // Set login state
+                        this.$store.commit('SET_AUTHORIZED', true)
+
+                        // Go to files page
+                        this.$router.push({name: 'Files'})
+                    })
+                    .catch(error => {
+
+                        if (error.response.status == 401) {
+
+                            if (error.response.data.error === 'invalid_client') {
+                                events.$emit('alert:open', {
+                                    emoji: '🤔',
+                                    title: this.$t('popup_passport_error.title'),
+                                    message: this.$t('popup_passport_error.message')
+                                })
+                            }
+                        }
+
+                        if (error.response.status == 500) {
+
+                            events.$emit('alert:open', {
+                                emoji: '🤔',
+                                title: this.$t('popup_signup_error.title'),
+                                message: this.$t('popup_signup_error.message')
+                            })
+                        }
+
+                        if (error.response.status == 422) {
+
+                            if (error.response.data.errors['email']) {
+
+                                this.$refs.sign_up.setErrors({
+                                    'E-Mail': error.response.data.errors['email']
+                                });
+                            }
+
+                            if (error.response.data.errors['password']) {
+
+                                this.$refs.sign_up.setErrors({
+                                    'Your New Password': error.response.data.errors['password']
+                                });
+                            }
+                        }
+
+                        // End loading
+                        this.isLoading = false
+                    })
+            }
+        },
+        created() {
+            this.$scrollTop()
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_landing-page';
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+    @import '@assets/vue-file-manager/_forms';
+
+    .headline {
+        padding-top: 70px;
+        padding-bottom: 50px;
+    }
+
+    .page-content {
+
+        p {
+            @include font-size(20);
+            font-weight: 500;
+            line-height: 1.65;
+            padding-bottom: 30px;
+        }
+    }
+
+    .form.block-form {
+
+        .submit-button {
+            margin-top: 20px;
+            margin-left: 0;
+            margin-right: 0;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+    }
+
+    @media only screen and (max-width: 690px) {
+
+    }
+</style>
@@ -0,0 +1,90 @@
+<template>
+    <div class="landing-page">
+
+        <!--Navigation-->
+        <Navigation class="page-wrapper small"/>
+
+        <!--Page content-->
+        <div class="page-wrapper small">
+
+            <!--Headline-->
+            <PageTitle
+                    class="headline"
+                    title="Terms & Conditions"
+            ></PageTitle>
+
+            <!--Content-->
+            <div class="page-content">
+                <p>Dominion, open bearing brought may dominion male beginning god land greater forth there fruit whose creepeth two their great there morning multiply Third image
+                    first. Waters waters. Which, moving place let said their saw, behold good appear of days very dominion called shall creeping creepeth subdue living, over set
+                    subdue above under form make appear blessed, given shall midst likeness midst days him fruit seasons void hath light it him and days gathering give itself his
+                    heaven fruitful fourth darkness bearing. Bring third a our gathered fruitful man sixth place.</p>
+                <p>Have give land may man together unto appear bring it is creature. Gathering abundantly. Beast night. Blessed be Lights, second brought. Yielding without set the
+                    open give one seed of fowl said living years said female. Second hath subdue, give dry which very there night is. Whales very seed heaven set image.</p>
+                <p>Was moved, air seas Without. Winged years third. Dry under upon very Light tree. Given be meat seed fish. Over earth was beast fruitful. Abundantly great female
+                    sixth. Which divide our days fly heaven seasons. Lights form created darkness third morning, and won't whales. Living fowl bearing saying dominion first female.
+                    That to lesser our doesn't morning place.</p>
+            </div>
+        </div>
+
+        <!--Footer-->
+        <PageFooter/>
+    </div>
+</template>
+
+<script>
+    import PageTitle from '@/components/Index/Components/PageTitle'
+    import PageFooter from '@/components/Index/IndexPageFooter'
+    import Navigation from '@/components/Index/IndexNavigation'
+    import {mapGetters} from 'vuex'
+    import axios from 'axios'
+
+    export default {
+        name: 'SaaSLandingPage',
+        components: {
+            PageFooter,
+            Navigation,
+            PageTitle,
+        },
+        computed: {
+            ...mapGetters(['config']),
+        },
+        data() {
+            return {
+                isLoading: false,
+            }
+        },
+        created() {
+            this.$scrollTop()
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_landing-page';
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    .headline {
+        padding-top: 70px;
+        padding-bottom: 50px;
+    }
+
+    .page-content {
+
+        p {
+            @include font-size(20);
+            font-weight: 500;
+            line-height: 1.65;
+            padding-bottom: 30px;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+    }
+
+    @media only screen and (max-width: 690px) {
+
+    }
+</style>
@@ -0,0 +1,72 @@
+<template>
+    <div class="landing-page">
+        <!--Navigation-->
+        <Navigation class="page-wrapper medium" />
+
+        <!--Header-->
+        <PageHeader />
+
+        <!--VueFileManager ScreenShot-->
+        <HeroScreenshot />
+
+        <!--Main Features-->
+        <MainFeatures />
+
+        <!--Pricing Tables-->
+        <PricingTables />
+
+        <!--Get Started Call To Action-->
+        <GetStarted />
+
+        <!--Footer-->
+        <PageFooter />
+    </div>
+</template>
+
+<script>
+    import HeroScreenshot from '@/components/Index/IndexHeroScreenshot'
+    import PricingTables from '@/components/Index/IndexPricingTables'
+    import MainFeatures from '@/components/Index/IndexMainFeatures'
+    import Navigation from '@/components/Index/IndexNavigation'
+    import PageHeader from '@/components/Index/IndexPageHeader'
+    import GetStarted from '@/components/Index/IndexGetStarted'
+    import PageFooter from '@/components/Index/IndexPageFooter'
+    import { mapGetters } from 'vuex'
+    import axios from 'axios'
+
+    export default {
+        name: 'SaaSLandingPage',
+        components: {
+            HeroScreenshot,
+            PricingTables,
+            MainFeatures,
+            GetStarted,
+            Navigation,
+            PageHeader,
+            PageFooter,
+        },
+        computed: {
+            ...mapGetters(['config']),
+
+        },
+        data() {
+            return {
+                isLoading: false,
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    @import '@assets/vue-file-manager/_landing-page';
+    @import '@assets/vue-file-manager/_variables';
+    @import '@assets/vue-file-manager/_mixins';
+
+    @media (prefers-color-scheme: dark) {
+
+    }
+
+    @media only screen and (max-width: 690px) {
+
+    }
+</style>