first commit
This commit is contained in:
Inshal
253
resources/js/views/front-pages/front-page-footer.vue
Normal file
253
resources/js/views/front-pages/front-page-footer.vue
Normal file
@@ -0,0 +1,253 @@
|
||||
<script setup>
|
||||
import appleImg from '@images/front-pages/landing-page/apple-icon.png'
|
||||
import googlePlayImg from '@images/front-pages/landing-page/google-play-icon.png'
|
||||
import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
|
||||
import { themeConfig } from '@themeConfig'
|
||||
|
||||
const menus = [
|
||||
{
|
||||
name: 'Pricing',
|
||||
to: { name: 'front-pages-pricing' },
|
||||
},
|
||||
{
|
||||
name: 'Payment',
|
||||
to: { name: 'front-pages-payment' },
|
||||
isNew: true,
|
||||
},
|
||||
{
|
||||
name: 'Maintenance',
|
||||
to: { name: 'pages-misc-under-maintenance' },
|
||||
},
|
||||
{
|
||||
name: 'Comming Soon',
|
||||
to: { name: 'pages-misc-coming-soon' },
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="footer">
|
||||
<VSheet
|
||||
class="footer-top pt-15"
|
||||
theme="dark"
|
||||
>
|
||||
<VContainer>
|
||||
<VRow>
|
||||
<!-- 👉 Footer -->
|
||||
<VCol
|
||||
cols="12"
|
||||
lg="5"
|
||||
>
|
||||
<div class="mb-4 footer-form">
|
||||
<div class="d-flex align-center gap-x-3 mb-6">
|
||||
<VNodeRenderer :nodes="themeConfig.app.logo" />
|
||||
<div class="footer-title">
|
||||
MATERIO
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-body-1 footer-text mb-6">
|
||||
Most Powerful & Comprehensive 🤩 Vuejs Admin Template with Elegant Material Design & Unique Layouts.
|
||||
</div>
|
||||
<VForm class="subscribe-form d-flex align-center gap-4">
|
||||
<VTextField
|
||||
label="Subscribe to newsletter"
|
||||
placeholder="john@email.com"
|
||||
theme="dark"
|
||||
density="compact"
|
||||
class="footer-text"
|
||||
/>
|
||||
<VBtn>Subscribe</VBtn>
|
||||
</VForm>
|
||||
</div>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Pages -->
|
||||
<VCol>
|
||||
<div class="d-flex justify-space-between flex-grow-1 gap-x-16 gap-y-8 flex-md-row flex-column">
|
||||
<div>
|
||||
<div class="footer-heading mb-6">
|
||||
Pages
|
||||
</div>
|
||||
<ul style="list-style: none;">
|
||||
<li
|
||||
v-for="(item, index) in menus"
|
||||
:key="index"
|
||||
class="mb-4"
|
||||
>
|
||||
<RouterLink
|
||||
class="footer-text text-no-wrap"
|
||||
:to="item.to"
|
||||
>
|
||||
<div class="d-flex align-center">
|
||||
<div>{{ item.name }}</div>
|
||||
<template v-if="item.isNew">
|
||||
<VChip
|
||||
color="primary"
|
||||
variant="elevated"
|
||||
size="small"
|
||||
class="ms-2"
|
||||
>
|
||||
New
|
||||
</VChip>
|
||||
</template>
|
||||
</div>
|
||||
</RouterLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 👉 Products -->
|
||||
<div>
|
||||
<div class="footer-heading mb-6">
|
||||
Products
|
||||
</div>
|
||||
<ul>
|
||||
<li
|
||||
v-for="(item, index) in ['Page Builder', 'Admin Dashboards', 'UI Kits', 'Illustrations']"
|
||||
:key="index"
|
||||
class="mb-4"
|
||||
style="list-style: none;"
|
||||
>
|
||||
<RouterLink
|
||||
to=""
|
||||
class="footer-text text-no-wrap"
|
||||
>
|
||||
{{ item }}
|
||||
</RouterLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- 👉 Download App -->
|
||||
<div>
|
||||
<div class="footer-heading mb-6">
|
||||
Download our app
|
||||
</div>
|
||||
<div>
|
||||
<VBtn
|
||||
v-for="(item, index) in [
|
||||
{ image: appleImg, store: 'App Store' },
|
||||
{ image: googlePlayImg, store: 'Google Play' },
|
||||
]"
|
||||
:key="index"
|
||||
color="#211B2C"
|
||||
size="x-large"
|
||||
class="mb-4 d-block"
|
||||
>
|
||||
<template #default>
|
||||
<div class="d-flex gap-x-3">
|
||||
<div>
|
||||
<VImg
|
||||
:src="item.image"
|
||||
height="34"
|
||||
width="34"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-body-2 text-white">
|
||||
Download on the
|
||||
</div>
|
||||
<div class="text-body-2 font-weight-medium text-white">
|
||||
{{ item.store }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</VBtn>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VContainer>
|
||||
</VSheet>
|
||||
|
||||
<div class="footer-line w-100">
|
||||
<VContainer>
|
||||
<div class="d-flex justify-space-between flex-wrap gap-y-4">
|
||||
<span class="d-flex align-center">
|
||||
©
|
||||
|
||||
{{ new Date().getFullYear() }},
|
||||
Made with ❤️ by <a
|
||||
href="https://themeselection.com"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="ms-1 font-weight-medium"
|
||||
style="color: rgba(255,255,255,var(--v-high-emphasis-opacity));"
|
||||
>ThemeSelection</a>
|
||||
</span>
|
||||
<div class="d-flex gap-x-2">
|
||||
<template
|
||||
v-for="(item, index) in [
|
||||
{ title: 'github', icon: 'bxl-github', href: 'https://github.com/themeselection' },
|
||||
{ title: 'facebook', icon: 'bxl-facebook', href: 'https://www.facebook.com/ThemeSelections/' },
|
||||
{ title: 'twitter', icon: 'bxl-twitter', href: 'https://twitter.com/Theme_Selection' },
|
||||
{ title: 'instagram', icon: 'bxl-linkedin', href: 'https://in.linkedin.com/company/themeselection' },
|
||||
]"
|
||||
:key="index"
|
||||
>
|
||||
<IconBtn
|
||||
:href="item.href"
|
||||
size="small"
|
||||
target="_blank"
|
||||
color="#fff"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<VIcon :icon="item.icon" />
|
||||
</IconBtn>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</VContainer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.footer-top {
|
||||
background: url("@images/front-pages/backgrounds/footer-bg.png") lightgray 50% / cover no-repeat;
|
||||
}
|
||||
|
||||
.footer-heading{
|
||||
color: rgba(255, 255, 255, var(--v-high-emphasis-opacity));
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.footer-text{
|
||||
color: rgba(255, 255, 255, var(--v-medium-emphasis-opacity));
|
||||
}
|
||||
|
||||
.footer-title{
|
||||
color: rgba(255, 255, 255, var(--v-high-emphasis-opacity));
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.15px;
|
||||
line-height: 1.5rem;
|
||||
}
|
||||
|
||||
.footer-line {
|
||||
background: #211b2c;
|
||||
color: rgba(255, 255, 255, var(--v-medium-emphasis-opacity));
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.footer{
|
||||
color: rgba(255, 255, 255, 70%);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.footer {
|
||||
@media (min-width: 600px) and (max-width: 960px) {
|
||||
.v-container {
|
||||
padding-inline: 2rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-form{
|
||||
@media (min-width: 1280px) {
|
||||
max-inline-size: 400px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user