Mirroring/merakiui
1
0
Fork 0
mirror of https://github.com/bakateam/merakiui.git synced 2025-12-09 15:05:34 +00:00
Code Issues Projects Releases Wiki Activity

WIP

Browse Source
This commit is contained in:
khatabwedaa
2021-09-21 17:31:59 +02:00
parent 5d735abe6a
commit 78dad19fe6
6 changed files with 97 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
components/ui/Footers/WithCta.vue Normal file
View File

@@ -0,0 +1,87 @@
<template>
<view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/QFlk5yNYSR'">
<div class="py-6" slot="component">
<footer class="bg-white dark:bg-gray-800">
<div class="container px-6 py-8 mx-auto">
<div class="text-center">
<a href="#" class="text-2xl font-bold text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Brand</a>
<p class="max-w-lg mx-auto mt-2 text-gray-500 dark:text-gray-300">Join 31,000+ other and never miss out on new tips, tutorials, and more.</p>
<div class="flex flex-col mt-4 sm:flex-row sm:items-center sm:justify-center">
<button class="flex items-center justify-center order-1 w-full px-2 py-2 mt-3 text-sm tracking-wide text-gray-600 capitalize transition-colors duration-200 transform border rounded-md sm:mx-2 dark:border-gray-300 dark:text-white dark:hover:bg-gray-700 sm:mt-0 sm:w-auto hover:bg-gray-50 focus:outline-none focus:ring focus:ring-gray-300 focus:ring-opacity-40">
<svg class="w-5 h-5 mx-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C21.9939 17.5203 17.5203 21.9939 12 22ZM4 12.172C4.04732 16.5732 7.64111 20.1095 12.0425 20.086C16.444 20.0622 19.9995 16.4875 19.9995 12.086C19.9995 7.68451 16.444 4.10977 12.0425 4.086C7.64111 4.06246 4.04732 7.59876 4 12V12.172ZM10 16.5V7.5L16 12L10 16.5Z" fill="currentColor"></path>
</svg>
<span class="mx-1">View Demo</span>
</button>
<button class="w-full px-5 py-2 text-sm tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-600 rounded-md sm:mx-2 sm:order-2 sm:w-auto hover:bg-indigo-500 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-80">Get started</button>
</div>
</div>
<hr class="my-10 dark:border-gray-700" />
<div class="flex flex-col items-center sm:flex-row sm:justify-between">
<p class="text-sm text-gray-400">© Copyright 2021. All Rights Reserved.</p>
<div class="flex mt-3 -mx-2 sm:mt-0">
<a href="#" class="mx-2 text-sm text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" aria-label="Reddit"> Teams </a>
<a href="#" class="mx-2 text-sm text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" aria-label="Reddit"> Privacy </a>
<a href="#" class="mx-2 text-sm text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" aria-label="Reddit"> Cookies </a>
</div>
</div>
</div>
</footer>
</div>
</view-component>
</template>
<script>
export default {
data() {
return {
name: 'With CTA',
code: `
<footer class="bg-white dark:bg-gray-800">
<div class="container px-6 py-8 mx-auto">
<div class="text-center">
<a href="#" class="text-2xl font-bold text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Brand</a>
<p class="max-w-md mx-auto mt-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<div class="flex flex-col mt-4 sm:flex-row sm:items-center sm:justify-center">
<button class="flex items-center justify-center order-1 w-full px-2 py-2 mt-3 text-sm tracking-wide text-gray-600 capitalize transition-colors duration-200 transform border rounded-md sm:mx-2 dark:border-gray-400 dark:text-gray-300 sm:mt-0 sm:w-auto hover:bg-gray-50 focus:outline-none focus:ring focus:ring-gray-300 focus:ring-opacity-40">
<svg class="w-5 h-5 mx-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C21.9939 17.5203 17.5203 21.9939 12 22ZM4 12.172C4.04732 16.5732 7.64111 20.1095 12.0425 20.086C16.444 20.0622 19.9995 16.4875 19.9995 12.086C19.9995 7.68451 16.444 4.10977 12.0425 4.086C7.64111 4.06246 4.04732 7.59876 4 12V12.172ZM10 16.5V7.5L16 12L10 16.5Z" fill="currentColor"></path>
</svg>
<span class="mx-1">View Demo</span>
</button>
<button class="w-full px-5 py-2 text-sm tracking-wide text-white capitalize transition-colors duration-200 transform bg-indigo-600 rounded-md sm:mx-2 sm:order-2 sm:w-auto hover:bg-indigo-500 focus:outline-none focus:ring focus:ring-indigo-300 focus:ring-opacity-80">Get started</button>
</div>
</div>
<hr class="my-10 dark:border-gray-500" />
<div class="flex flex-col items-center sm:flex-row sm:justify-between">
<p class="text-sm text-gray-400">© Copyright 2021. All Rights Reserved.</p>
<div class="flex mt-3 -mx-2 sm:mt-0">
<a href="#" class="mx-2 text-sm text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" aria-label="Reddit"> Teams </a>
<a href="#" class="mx-2 text-sm text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" aria-label="Reddit"> Privacy </a>
<a href="#" class="mx-2 text-sm text-gray-400 hover:text-gray-500 dark:hover:text-gray-300" aria-label="Reddit"> Cookies </a>
</div>
</div>
</div>
</footer>`
}
}
}
</script>

4
components/ui/Footers/WithDetails.vue
View File

@@ -10,7 +10,7 @@
<a href="#" class="text-xl font-bold text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Brand</a>
</div>
<p class="max-w-md mt-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, nisi! Id.</p>
<p class="max-w-md mt-2 text-gray-500 dark:text-gray-400">Join 31,000+ other and never miss out on new tips, tutorials, and more.</p>
<div class="flex mt-4 -mx-2">
<a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300" aria-label="Reddit">
@@ -102,7 +102,7 @@
<a href="#" class="text-xl font-bold text-gray-800 dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Brand</a>
</div>
<p class="max-w-md mt-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, nisi! Id.</p>
<p class="max-w-md mt-2 text-gray-500 dark:text-gray-400">Join 31,000+ other and never miss out on new tips, tutorials, and more.</p>
<div class="flex mt-4 -mx-2">
<a href="#" class="mx-2 text-gray-700 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400" aria-label="Linkden">

4
components/ui/Footers/WithLinks.vue
View File

@@ -145,7 +145,7 @@
</div>
</div>
<hr class="my-10 dark:border-gray-500">
<hr class="my-10 dark:border-gray-700">
<div class="sm:flex sm:items-center sm:justify-between">
<p class="text-sm text-gray-400">© Copyright 2021. All Rights Reserved.</p>
@@ -336,7 +336,7 @@
</div>
</div>
<hr class="my-10 dark:border-gray-500">
<hr class="my-10 dark:border-gray-700">
<div class="sm:flex sm:items-center sm:justify-between">
<p class="text-sm text-gray-400">© Copyright 2021. All Rights Reserved.</p>

2
components/utilities/ViewComponent.vue
View File

@@ -43,7 +43,7 @@
</div>
<div :class="{ 'dark': dark }">
<div class="flex items-center justify-center mt-4 overflow-hidden bg-gray-200 border rounded-lg dark:border-gray-600">
<div class="flex items-center justify-center mt-4 overflow-hidden bg-gray-200 border rounded-lg dark:bg-gray-700 dark:border-gray-600">
<div class="relative w-full" :dir="rtl? 'rtl' : 'ltr'">
<slot class="absolute top-0 left-0 w-full h-full" name="component"></slot>

1
models/Components.js
View File

@@ -118,6 +118,7 @@ export default [
name: "Footers",
components: [
{ name: "Simple" },
{ name: "WithCta" },
{ name: "WithDetails" },
{ name: "WithLinks" },
{ name: "WithSubscribeForm" },

6
pages/index.vue
View File

@@ -76,7 +76,7 @@
<div class="flex flex-col flex-1 overflow-hidden">
<main class="flex-1 lg:overflow-y-auto">
<div class="container px-4 mx-auto">
<div class="py-16 text-center">
<div class="py-8 text-center md:py-16">
<h1
class="text-xl font-medium text-gray-700 sm:flex sm:items-center sm:justify-center lg:text-3xl"
>
@@ -216,6 +216,7 @@ import PricingWithNavigation from "~/components/ui//Pricing/WithNavigation";
import PaginationSimple from "~/components/ui/Pagination/Simple";
// Footers
import FootersSimple from "~/components/ui/Footers/Simple";
import FootersWithCta from "~/components/ui/Footers/WithCta";
import FootersWithDetails from "~/components/ui/Footers/WithDetails";
import FootersWithLinks from "~/components/ui/Footers/WithLinks";
import FootersWithSubscribeForm from "~/components/ui/Footers/WithSubscribeForm";
@@ -288,6 +289,7 @@ export default {
PricingWithNavigation,
PaginationSimple,
FootersSimple,
FootersWithCta,
FootersWithDetails,
FootersWithLinks,
FootersWithSubscribeForm,
@@ -296,7 +298,7 @@ export default {
data() {
return {
sidebarOpen: false,
components_count: 64,
components_count: 65,
categories: [],
activeCategory: "Alerts",
component: new Component(),