btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

feat: landing page + smart components

Browse Source
This commit is contained in:
Liyas Thomas
2021-07-02 05:01:29 +00:00
committed by GitHub
parent fb93db6ad4
commit a130cfcadb
23 changed files with 1124 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
components/landing/Footer.vue Normal file
View File

@@ -0,0 +1,168 @@
<template>
<footer class="flex flex-col px-8 py-16">
<nav class="grid grid-cols-2 gap-4 md:grid-cols-4">
<div class="flex flex-col space-y-2">
<SmartLink
:to="
!$store.state.authUser
? localePath('/')
: localePath(`/${$store.state.login}`)
"
class="my-2"
>
<AppLogo class="h-8" />
</SmartLink>
<span> Kooli </span>
<SmartChangeLanguage />
<ul class="space-y-2">
<li>
<SmartAnchor label="Terms" to="/about/terms" class="footer-nav" />
</li>
<li>
<SmartAnchor
label="Privacy"
to="/about/privacy"
class="footer-nav"
/>
</li>
</ul>
<SmartColorModePicker />
</div>
<div class="flex flex-col space-y-2">
<h4 class="my-2 font-semibold">Solutions</h4>
<ul class="space-y-2">
<li
v-for="(item, index) in navigation.solutions"
:key="`item-${index}`"
>
<SmartAnchor
:label="item.name"
:to="item.link"
class="footer-nav"
/>
</li>
</ul>
</div>
<div class="flex flex-col space-y-2">
<h4 class="my-2 font-semibold">Platform</h4>
<ul class="space-y-2">
<li
v-for="(item, index) in navigation.platform"
:key="`item-${index}`"
>
<SmartAnchor
:label="item.name"
:to="item.link"
class="footer-nav"
/>
</li>
</ul>
</div>
<div class="flex flex-col space-y-2">
<h4 class="my-2 font-semibold">Company</h4>
<ul class="space-y-2">
<li
v-for="(item, index) in navigation.company"
:key="`item-${index}`"
>
<SmartAnchor
:label="item.name"
:to="item.link"
class="footer-nav"
/>
</li>
</ul>
</div>
</nav>
</footer>
</template>
<script>
export default {
data() {
return {
navigation: {
solutions: [
{
name: "SaaS",
link: "/settings",
},
{
name: "Products",
link: "/settings",
},
{
name: "Creators",
link: "/settings",
},
{
name: "Developers",
link: "/settings",
},
{
name: "Finance",
link: "/settings",
},
{
name: "Enterprise",
link: "/settings",
},
],
platform: [
{
name: "Payments",
link: "/settings",
},
{
name: "Subscriptions",
link: "/settings",
},
{
name: "API",
link: "https://docs.kooli.tech/api",
},
{
name: "Guides",
link: "https://docs.kooli.tech/guides",
},
],
company: [
{
name: "About",
link: "/about",
},
{
name: "Jobs",
link: "/about/jobs",
},
{
name: "Integrations",
link: "/about/integrations",
},
{
name: "Support",
link: "",
},
{
name: "Contact",
link: "/about/contact",
},
{
name: "Blog",
link: "https://blog.kooli.tech",
},
],
},
}
},
}
</script>
<style lang="scss" scoped>
.footer-nav {
&:hover,
&:focus {
@apply text-secondaryDark;
}
}
</style>