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

Compare commits

base: Mirroring:a4a23accd85b715b3c2f7f1167b849f8a4090f3c
Branches Tags
Mirroring:main
...
compare: Mirroring:78dad19fe659756043fd062c64e222fce5e23323
Branches Tags
Mirroring:main

5 Commits
a4a23accd8 ... 78dad19fe6

Author SHA1 Message Date
khatabwedaa
78dad19fe6 WIP 2021-09-21 17:31:59 +02:00
khatabwedaa
5d735abe6a fix scroll on mobile 2021-09-21 11:08:52 +02:00
khatabwedaa
51cfd5c6fb Add mobild design 2021-09-21 10:55:05 +02:00
khatabwedaa
3638921a33 Redesign website 2021-09-21 10:34:43 +02:00
khatabwedaa
38b43803d6 Add new header & fix with image button 2021-09-21 08:58:16 +02:00
16 changed files with 343 additions and 140 deletions
Expand all files Collapse all files

8
assets/css/custom-utilities.css
View File

File diff suppressed because one or more lines are too long

5
assets/svg/logo-sidebar.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg viewBox="0 0 209 180" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M87.843 108.487L90.617 101.553C91.312 99.571 93.433 98.476 95.451 99.057L132.142 110.072L171.408 45.962L71.598 17.434L87.843 108.487ZM173.547 38.077V0L138.402 26.349L173.547 38.077ZM208.574 22.6245L181.472 0.435799V20.2472L208.574 22.6245ZM172.477 59.434L142.721 108.17L169.585 100.008L172.477 59.434ZM126.594 116.887L96.64 107.892C87.804 129.962 93.985 114.906 66.566 179.728L126.594 116.887ZM63.396 16.6019L0.673634 29.796L75.957 86.179L63.396 16.6019ZM52.7774 78.809L19.6133 53.926L0.634033 68.587L52.7774 78.809Z" fill="#3B82F6"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 635 B

15
assets/svg/logo.svg
View File

@@ -1,10 +1,5 @@
<svg class="w-10 h-10 mr-1" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M132.843 179.487L135.617 172.553C136.312 170.571 138.433 169.476 140.451 170.057L177.142 181.072L216.408 116.962L116.598 88.434L132.843 179.487ZM218.547 109.077V71L183.402 97.349L218.547 109.077ZM253.574 93.6245L226.472 71.4358V91.2472L253.574 93.6245ZM217.477 130.434L187.721 179.17L214.585 171.008L217.477 130.434ZM171.594 187.887L141.64 178.892C132.804 200.962 138.985 185.906 111.566 250.728L171.594 187.887ZM108.396 87.6019L45.6736 100.796L120.957 157.179L108.396 87.6019ZM97.7774 149.809L64.6133 124.926L45.634 139.587L97.7774 149.809Z" fill="#4299E1"/>
<path d="M132.843 179.487L135.617 172.553C136.312 170.571 138.433 169.476 140.451 170.057L177.142 181.072L216.408 116.962L116.598 88.434L132.843 179.487ZM218.547 109.077V71L183.402 97.349L218.547 109.077ZM253.574 93.6245L226.472 71.4358V91.2472L253.574 93.6245ZM217.477 130.434L187.721 179.17L214.585 171.008L217.477 130.434ZM171.594 187.887L141.64 178.892C132.804 200.962 138.985 185.906 111.566 250.728L171.594 187.887ZM108.396 87.6019L45.6736 100.796L120.957 157.179L108.396 87.6019ZM97.7774 149.809L64.6133 124.926L45.634 139.587L97.7774 149.809Z" fill="url(#paint0_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="149.604" y1="71" x2="149.604" y2="250.728" gradientUnits="userSpaceOnUse">
<stop stop-color="#3182CE"/>
<stop offset="1" stop-color="#81E6D9" stop-opacity="0"/>
</linearGradient>
</defs>
</svg>
<svg viewBox="0 0 209 180" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M87.843 108.487L90.617 101.553C91.312 99.571 93.433 98.476 95.451 99.057L132.142 110.072L171.408 45.962L71.598 17.434L87.843 108.487ZM173.547 38.077V0L138.402 26.349L173.547 38.077ZM208.574 22.6245L181.472 0.435799V20.2472L208.574 22.6245ZM172.477 59.434L142.721 108.17L169.585 100.008L172.477 59.434ZM126.594 116.887L96.64 107.892C87.804 129.962 93.985 114.906 66.566 179.728L126.594 116.887ZM63.396 16.6019L0.673634 29.796L75.957 86.179L63.396 16.6019ZM52.7774 78.809L19.6133 53.926L0.634033 68.587L52.7774 78.809Z" fill="#60A5FA"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 635 B

17
components/Footer.vue
View File

@@ -1,17 +0,0 @@
<template>
<div class="container px-6 mx-auto">
<div class="flex flex-col items-center">
<div class="py-6 text-center">
<p class="flex items-center text-sm text-gray-500 sm:text-base">
Build with
<svg class="w-5 h-5 mx-1 text-gray-700" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 8.40001C1.99975 6.95035 2.58239 5.56146 3.61681 4.54584C4.65124 3.53022 6.05058 2.97317 7.5 3.00001C9.21732 2.99089 10.856 3.71919 12 5.00001C13.144 3.71919 14.7827 2.99089 16.5 3.00001C17.9494 2.97317 19.3488 3.53022 20.3832 4.54584C21.4176 5.56146 22.0002 6.95035 22 8.40001C22 13.756 15.621 17.8 12 21C8.387 17.773 2 13.76 2 8.40001Z" fill="currentColor"></path>
</svg> BY &nbsp;
<a href="https://twitter.com/khatabwedaa" target="_blank" class="text-blue-500 hover:underline">Khatab Wedaa</a>
&nbsp; & &nbsp;
<a href="https://twitter.com/miaababikir" target="_blank" class="text-blue-500 hover:underline">Mosab Ibrahim</a>
</p>
</div>
</div>
</div>
</template>

2
components/Header.vue
View File

@@ -5,7 +5,7 @@
<div class="flex flex-col sm:items-center sm:flex-row sm:justify-between">
<div class="flex items-center justify-between sm:justify-start sm:space-x-4 lg:space-x-12">
<a href="/" class="inline-flex items-center text-xl font-bold text-white md:text-2xl hover:text-blue-400">
<img class="w-10 h-10 mr-1" src="../assets/svg/logo.svg" alt="logo"> <span class="hidden md:inline">Meraki <span class="text-blue-400">UI</span></span>
<img class="mr-2 w-7 h-7" src="../assets/svg/logo.svg" alt="logo"> <span class="hidden md:inline">Meraki <span class="text-blue-400">UI</span></span>
</a>
<div class="mt-2 space-x-4 sm:mt-0">

29
components/Logo.vue
View File

@@ -1,29 +0,0 @@
<template>
<svg class="NuxtLogo" width="245" height="180" viewBox="0 0 452 342" xmlns="http://www.w3.org/2000/svg">
<path
d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z"
fill="#00C58E"
/>
<path
d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z"
fill="#108775"
/>
<path
d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z"
fill="#2F495E"
/>
</svg>
</template>
<style>
.NuxtLogo {
animation: 1s appear;
margin: auto;
}
@keyframes appear {
0% {
opacity: 0;
}
}
</style>

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>

130
components/ui/Heros/CenterContent.vue Normal file
View File

@@ -0,0 +1,130 @@
<template>
<view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/8xusXYyo5R'">
<div class="py-6" slot="component">
<section class="bg-white dark:bg-gray-800">
<nav class="container p-6 mx-auto lg:flex lg:justify-between lg:items-center">
<div class="flex items-center justify-between">
<div>
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div>
<!-- Mobile menu button -->
<div class="flex lg:hidden">
<button @click="isOpen = !isOpen" type="button"
class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600"
aria-label="toggle menu">
<svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
<path fill-rule="evenodd"
d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z">
</path>
</svg>
</button>
</div>
</div>
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
<div :class="isOpen ? 'flex' : 'hidden lg:flex'" class="flex-col mt-4 space-y-2 lg:mt-0 lg:flex-row lg:space-x-16 lg:space-y-0">
<a class="text-gray-700 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
href="#">Home</a>
<a class="text-gray-700 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
href="#">Components</a>
<a class="text-gray-700 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
href="#">Pricing</a>
<a class="text-gray-700 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
href="#">Contact</a>
</div>
<a :class="isOpen ? 'block' : 'hidden lg:block'" class="px-5 py-2 mt-4 font-medium leading-5 text-center text-white capitalize bg-blue-600 rounded-lg lg:mt-0 hover:bg-blue-500 lg:w-auto"
href="#">
Get started
</a>
</nav>
<div class="container px-6 py-16 mx-auto text-center">
<div class="max-w-lg mx-auto">
<h1 class="text-3xl font-bold text-gray-800 dark:text-white md:text-4xl">Building Your Next App with our Awesome components</h1>
<p class="mt-6 text-gray-500 dark:text-gray-300">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero similique
obcaecati illum mollitia.</p>
<button
class="px-6 py-2 mt-6 text-sm font-medium leading-5 text-center text-white capitalize bg-blue-600 rounded-lg hover:bg-blue-500 md:mx-0 md:w-auto focus:outline-none">
Start 14-Day free trial
</button>
<p class="mt-3 text-sm text-gray-400 ">No credit card required</p>
</div>
<div class="flex justify-center mt-10">
<div class="w-full h-64 bg-blue-600 rounded-xl md:w-4/5"></div>
</div>
</div>
</section>
</div>
</view-component>
</template>
<script>
export default {
data() {
return {
name: 'Center Content',
isOpen: false,
code: `
<section class="bg-white dark:bg-gray-800">
<nav class="container p-6 mx-auto lg:flex lg:justify-between lg:items-center">
<div class="flex items-center justify-between">
<div>
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
</div>
<!-- Mobile menu button -->
<div class="flex lg:hidden">
<button type="button"
class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600"
aria-label="toggle menu">
<svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
<path fill-rule="evenodd"
d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z">
</path>
</svg>
</button>
</div>
</div>
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
<div class="flex flex-col mt-4 space-y-2 lg:mt-0 lg:flex-row lg:space-x-16 lg:space-y-0">
<a class="text-gray-700 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
href="#">Home</a>
<a class="text-gray-700 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
href="#">Components</a>
<a class="text-gray-700 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
href="#">Pricing</a>
<a class="text-gray-700 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
href="#">Contact</a>
</div>
<a class="block px-5 py-2 mt-4 font-medium leading-5 text-center text-white capitalize bg-blue-600 rounded-lg lg:mt-0 hover:bg-blue-500 lg:w-auto"
href="#">
Get started
</a>
</nav>
<div class="container px-6 py-16 mx-auto text-center">
<div class="max-w-lg mx-auto">
<h1 class="text-3xl font-bold text-gray-800 dark:text-white md:text-4xl">Building Your Next App with our Awesome components</h1>
<p class="mt-6 text-gray-500 dark:text-gray-300">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero similique
obcaecati illum mollitia.</p>
<button
class="px-6 py-2 mt-6 text-sm font-medium leading-5 text-center text-white capitalize bg-blue-600 rounded-lg hover:bg-blue-500 md:mx-0 md:w-auto focus:outline-none">
Start 14-Day free trial
</button>
<p class="mt-3 text-sm text-gray-400 ">No credit card required</p>
</div>
<div class="flex justify-center mt-10">
<div class="w-full h-64 bg-blue-600 rounded-xl md:w-4/5"></div>
</div>
</div>
</section>`,
}
}
}
</script>

2
components/ui/Heros/WithImage.vue
View File

@@ -27,7 +27,7 @@
<a class="block font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Why us?</a>
<a class="block font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Contact</a>
<button class="flex items-center px-5 py-2 text-sm font-medium tracking-wide text-center text-white capitalize transition-colors duration-200 transform bg-gray-700 rounded-lg hover:bg-gray-600 focus:outline-none focus:bg-gray-600">
<button class="flex items-center justify-center px-5 py-2 text-sm font-medium tracking-wide text-center text-white capitalize transition-colors duration-200 transform bg-gray-700 rounded-lg hover:bg-gray-600 focus:outline-none focus:bg-gray-600">
Get in touch
</button>
</div>

2
components/ui/Sections/Products.vue → components/ui/Sections/ProductsWithSideLinks.vue
View File

@@ -94,7 +94,7 @@
export default {
data() {
return {
name: 'Products',
name: 'Products With Side Links',
code: `
<section class="bg-white dark:bg-gray-900">
<div class="container px-6 py-8 mx-auto">

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>

17
layouts/default.vue
View File

@@ -1,24 +1,9 @@
<template>
<div class="bg-white">
<Nuxt />
<footer-component />
<back-to-top visibleoffset="800">
<app-button class="fixed bottom-0 right-0 p-2 mx-5 my-10 text-white bg-gray-800 rounded-md lg:mx-10 hover:bg-gray-900 focus:outline-none" aria-label="Back to top">
<svg class="w-6 h-6" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"/>
</svg>
</app-button>
</back-to-top>
</div>
</template>
<script>
import AppButton from "~/components/utilities/AppButton.vue";
import FooterComponent from "~/components/Footer";
import BackToTop from "vue-backtotop";
export default {
components: { AppButton, FooterComponent, BackToTop }
};
export default {};
</script>

4
models/Components.js
View File

@@ -80,6 +80,7 @@ export default [
components: [
{ name: "ECommerce" },
{ name: "WithNewsletterForm" },
{ name: "CenterContent" },
{ name: "WithSlide" },
{ name: "WithImage" },
{ name: "WithSideImage" },
@@ -96,7 +97,7 @@ export default [
components: [
{ name: "AboutMe" },
{ name: "Feature" },
{ name: "Products" },
{ name: "ProductsWithSideLinks" },
{ name: "OurTeam" },
{ name: "ParagraphWithImage" },
],
@@ -117,6 +118,7 @@ export default [
name: "Footers",
components: [
{ name: "Simple" },
{ name: "WithCta" },
{ name: "WithDetails" },
{ name: "WithLinks" },
{ name: "WithSubscribeForm" },

155
pages/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="font-roboto">
<div class="relative font-roboto">
<header-component>
<div class="container px-4 py-8 mx-auto lg:py-0">
<div class="lg:flex">
@@ -45,62 +45,95 @@
</div>
</header-component>
<div class="container px-4 mx-auto">
<div class="py-16 text-center">
<h1
class="text-xl font-medium text-gray-700 sm:flex sm:items-center sm:justify-center lg:text-3xl"
>
<span>Discover new components. Build amazing things. </span> &nbsp;
<svg class="hidden w-8 h-8 text-blue-500 fill-current sm:block" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.9837 21.9999C6.47237 21.9938 2.00605 17.5203 2 11.9999C2.39311 12.1112 2.79955 12.168 3.20803 12.1689C4.55933 12.1789 5.82888 11.5217 6.6025 10.412C7.29413 9.41154 7.44027 8.13091 6.99186 6.99997C7.27858 7.05119 7.5692 7.07729 7.86045 7.07797C9.1552 7.08764 10.3841 6.50698 11.2 5.49998C11.9984 4.52274 12.3106 3.2352 12.0486 2C17.5625 2.01795 22.0178 6.50963 21.9999 12.0324C21.982 17.5553 17.4976 22.0178 11.9837 21.9999ZM12.7455 18.5679C12.8991 18.634 13.0645 18.6681 13.2317 18.6679C13.7362 18.6674 14.1909 18.363 14.3842 17.8961C14.5775 17.4293 14.4714 16.8919 14.1152 16.5339C13.8805 16.2998 13.5629 16.1683 13.2317 16.1679C12.6392 16.1693 12.1294 16.5877 12.0115 17.1693C11.8937 17.7509 12.2004 18.3353 12.7455 18.5679ZM6.91199 16.8749C7.11205 16.9578 7.32647 17.0003 7.54296 16.9999C8.21842 16.9997 8.82678 16.5907 9.08272 15.9646C9.33866 15.3385 9.19143 14.6195 8.71006 14.1449C8.3989 13.838 7.97969 13.6659 7.54296 13.6659C6.62442 13.667 5.88022 14.4129 5.87967 15.3329C5.87984 16.0017 6.2781 16.606 6.89202 16.8689H6.89702H6.908L6.91199 16.8749ZM16.3276 14.3679C16.9987 14.6502 17.775 14.4627 18.2439 13.9051C18.7127 13.3475 18.7652 12.5493 18.3733 11.9349C18.2506 11.7436 18.0902 11.5793 17.9021 11.4519C17.3853 11.1024 16.7167 11.0716 16.17 11.3721C15.6233 11.6726 15.2902 12.254 15.307 12.8784C15.3238 13.5028 15.6877 14.0654 16.2498 14.3359H16.2378L16.2677 14.3489L16.2877 14.3569H16.2817C16.296 14.3615 16.31 14.3669 16.3236 14.3729L16.3276 14.3679ZM11.9837 10.333C11.5855 10.3323 11.2426 10.6141 11.1655 11.0054C11.0883 11.3967 11.2986 11.7879 11.6672 11.9389C12.0357 12.0899 12.4594 11.9583 12.6782 11.625C12.8969 11.2917 12.8493 10.8499 12.5648 10.571C12.4906 10.4978 12.4032 10.4394 12.3072 10.399L12.2892 10.391L12.2623 10.381C12.1729 10.349 12.0786 10.3328 11.9837 10.333ZM15.7276 6.16697C15.0888 6.16539 14.5526 6.64873 14.4871 7.28522C14.4216 7.92172 14.8481 8.50444 15.4738 8.63339C16.0995 8.76235 16.7211 8.39562 16.9118 7.78494C17.1025 7.17425 16.8004 6.51814 16.2128 6.26698H16.2028C16.0525 6.20267 15.8911 6.16869 15.7276 6.16697ZM4.49593 9.49996C4.03663 9.49996 3.66429 9.12701 3.66429 8.66696C3.66429 8.20691 4.03663 7.83397 4.49593 7.83397C4.95523 7.83397 5.32757 8.20691 5.32757 8.66696C5.32702 9.12679 4.95501 9.49941 4.49593 9.49996ZM3.24797 6.99997C2.55873 6.99997 2 6.44033 2 5.74998C2 5.05963 2.55873 4.49999 3.24797 4.49999C3.9372 4.49999 4.49593 5.05963 4.49593 5.74998C4.49483 6.43988 3.93674 6.99887 3.24797 6.99997ZM8.23983 5.33298C7.55059 5.33298 6.99186 4.77334 6.99186 4.08299C6.99186 3.39264 7.55059 2.833 8.23983 2.833C8.92906 2.833 9.48779 3.39264 9.48779 4.08299C9.48779 4.7735 8.92922 5.33343 8.23983 5.33398V5.33298ZM5.32857 3.66699C4.8694 3.66699 4.49711 3.29425 4.49693 2.83433C4.49675 2.37441 4.86873 2.00137 5.32791 2.001C5.78708 2.00063 6.15967 2.37308 6.16022 2.833C6.16022 3.29321 5.78804 3.66644 5.32857 3.66699Z"></path>
</svg>
</h1>
<div class="max-w-2xl mx-auto">
<div class="flex items-center justify-center mt-5">
<div class="mt-2 lg:mt-0">
<span
v-for="category in categories"
:key="category.name"
<div class="flex bg-white lg:h-screen font-roboto">
<div :class="sidebarOpen ? 'block' : 'hidden'" @click="sidebarOpen = false" class="fixed inset-0 z-20 transition-opacity bg-black opacity-50 lg:hidden"></div>
<div :class="sidebarOpen ? 'translate-x-0 ease-out' : '-translate-x-full ease-in'" class="fixed inset-y-0 left-0 z-30 flex flex-col w-64 h-screen px-4 py-8 overflow-y-auto transition duration-300 transform bg-white border-r border-gray-200 lg:translate-x-0 lg:static lg:inset-0">
<a href="/" class="inline-flex items-center text-xl font-bold text-gray-700 md:text-2xl hover:text-blue-500">
<img class="mr-2 w-7 h-7" src="../assets/svg/logo-sidebar.svg" alt="logo"> <span class="hidden md:inline">Meraki <span class="text-blue-500">UI</span></span>
</a>
<nav class="mt-6 overflow-y-auto">
<div
v-for="category in categories"
:key="category.name"
>
<app-button
@click="updateCategory(category.name)"
class="block px-4 py-2 mt-2 font-medium rounded-md focus:outline-none"
:class="
category.name === activeCategory
? 'text-blue-500 bg-blue-50'
: 'text-gray-500 hover:text-blue-500 hover:underline'"
>
<app-button
@click="activeCategory = category.name"
class="px-3 py-1 mt-2 ml-2 text-sm rounded cursor-pointer hover:bg-gray-700 hover:text-gray-200 focus:outline-none"
:class="
category.name === activeCategory
? 'bg-gray-700 text-gray-200'
: 'bg-gray-200 text-gray-700'"
>
{{ category.name }}
</app-button>
</span>
{{ category.name }}
</app-button>
</div>
</nav>
</div>
<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-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"
>
<span>Discover new components. Build amazing things. </span> &nbsp;
<svg class="hidden w-8 h-8 text-blue-500 fill-current sm:block" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.9837 21.9999C6.47237 21.9938 2.00605 17.5203 2 11.9999C2.39311 12.1112 2.79955 12.168 3.20803 12.1689C4.55933 12.1789 5.82888 11.5217 6.6025 10.412C7.29413 9.41154 7.44027 8.13091 6.99186 6.99997C7.27858 7.05119 7.5692 7.07729 7.86045 7.07797C9.1552 7.08764 10.3841 6.50698 11.2 5.49998C11.9984 4.52274 12.3106 3.2352 12.0486 2C17.5625 2.01795 22.0178 6.50963 21.9999 12.0324C21.982 17.5553 17.4976 22.0178 11.9837 21.9999ZM12.7455 18.5679C12.8991 18.634 13.0645 18.6681 13.2317 18.6679C13.7362 18.6674 14.1909 18.363 14.3842 17.8961C14.5775 17.4293 14.4714 16.8919 14.1152 16.5339C13.8805 16.2998 13.5629 16.1683 13.2317 16.1679C12.6392 16.1693 12.1294 16.5877 12.0115 17.1693C11.8937 17.7509 12.2004 18.3353 12.7455 18.5679ZM6.91199 16.8749C7.11205 16.9578 7.32647 17.0003 7.54296 16.9999C8.21842 16.9997 8.82678 16.5907 9.08272 15.9646C9.33866 15.3385 9.19143 14.6195 8.71006 14.1449C8.3989 13.838 7.97969 13.6659 7.54296 13.6659C6.62442 13.667 5.88022 14.4129 5.87967 15.3329C5.87984 16.0017 6.2781 16.606 6.89202 16.8689H6.89702H6.908L6.91199 16.8749ZM16.3276 14.3679C16.9987 14.6502 17.775 14.4627 18.2439 13.9051C18.7127 13.3475 18.7652 12.5493 18.3733 11.9349C18.2506 11.7436 18.0902 11.5793 17.9021 11.4519C17.3853 11.1024 16.7167 11.0716 16.17 11.3721C15.6233 11.6726 15.2902 12.254 15.307 12.8784C15.3238 13.5028 15.6877 14.0654 16.2498 14.3359H16.2378L16.2677 14.3489L16.2877 14.3569H16.2817C16.296 14.3615 16.31 14.3669 16.3236 14.3729L16.3276 14.3679ZM11.9837 10.333C11.5855 10.3323 11.2426 10.6141 11.1655 11.0054C11.0883 11.3967 11.2986 11.7879 11.6672 11.9389C12.0357 12.0899 12.4594 11.9583 12.6782 11.625C12.8969 11.2917 12.8493 10.8499 12.5648 10.571C12.4906 10.4978 12.4032 10.4394 12.3072 10.399L12.2892 10.391L12.2623 10.381C12.1729 10.349 12.0786 10.3328 11.9837 10.333ZM15.7276 6.16697C15.0888 6.16539 14.5526 6.64873 14.4871 7.28522C14.4216 7.92172 14.8481 8.50444 15.4738 8.63339C16.0995 8.76235 16.7211 8.39562 16.9118 7.78494C17.1025 7.17425 16.8004 6.51814 16.2128 6.26698H16.2028C16.0525 6.20267 15.8911 6.16869 15.7276 6.16697ZM4.49593 9.49996C4.03663 9.49996 3.66429 9.12701 3.66429 8.66696C3.66429 8.20691 4.03663 7.83397 4.49593 7.83397C4.95523 7.83397 5.32757 8.20691 5.32757 8.66696C5.32702 9.12679 4.95501 9.49941 4.49593 9.49996ZM3.24797 6.99997C2.55873 6.99997 2 6.44033 2 5.74998C2 5.05963 2.55873 4.49999 3.24797 4.49999C3.9372 4.49999 4.49593 5.05963 4.49593 5.74998C4.49483 6.43988 3.93674 6.99887 3.24797 6.99997ZM8.23983 5.33298C7.55059 5.33298 6.99186 4.77334 6.99186 4.08299C6.99186 3.39264 7.55059 2.833 8.23983 2.833C8.92906 2.833 9.48779 3.39264 9.48779 4.08299C9.48779 4.7735 8.92922 5.33343 8.23983 5.33398V5.33298ZM5.32857 3.66699C4.8694 3.66699 4.49711 3.29425 4.49693 2.83433C4.49675 2.37441 4.86873 2.00137 5.32791 2.001C5.78708 2.00063 6.15967 2.37308 6.16022 2.833C6.16022 3.29321 5.78804 3.66644 5.32857 3.66699Z"></path>
</svg>
</h1>
</div>
<div class="flex justify-center mb-10">
<carbon-ads></carbon-ads>
</div>
<section v-for="category in list" :key="category.name">
<h1
class="mb-6 text-2xl font-semibold text-gray-800 capitalize"
v-text="category.name"
></h1>
<div
v-for="component in category.components"
:key="component.name"
:name="component.name"
>
<component :is="category.name + component.name"></component>
</div>
</section>
<div class="py-6 text-center">
<p class="flex items-center justify-center text-sm text-gray-500 sm:text-base">
Build with
<svg class="w-5 h-5 mx-1 text-gray-700" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 8.40001C1.99975 6.95035 2.58239 5.56146 3.61681 4.54584C4.65124 3.53022 6.05058 2.97317 7.5 3.00001C9.21732 2.99089 10.856 3.71919 12 5.00001C13.144 3.71919 14.7827 2.99089 16.5 3.00001C17.9494 2.97317 19.3488 3.53022 20.3832 4.54584C21.4176 5.56146 22.0002 6.95035 22 8.40001C22 13.756 15.621 17.8 12 21C8.387 17.773 2 13.76 2 8.40001Z" fill="currentColor"></path>
</svg> BY &nbsp;
<a href="https://twitter.com/khatabwedaa" target="_blank" class="text-blue-500 hover:underline">Khatab Wedaa</a>
&nbsp; & &nbsp;
<a href="https://twitter.com/miaababikir" target="_blank" class="text-blue-500 hover:underline">Mosab Ibrahim</a>
</p>
</div>
</div>
</div>
</div>
<div class="flex justify-center mb-10">
<carbon-ads></carbon-ads>
</div>
<div class="w-full max-w-6xl mx-auto">
<div class="mb-16" v-for="category in list" :key="category.name">
<h1
class="mb-6 text-2xl font-semibold text-gray-800 capitalize"
v-text="category.name"
></h1>
<div
v-for="component in category.components"
:key="component.name"
:name="component.name"
>
<component :is="category.name + component.name"></component>
</div>
</div>
</main>
</div>
</div>
<button @click="sidebarOpen = !sidebarOpen" type="button" class="fixed z-50 flex items-center justify-center p-2 text-white bg-gray-900 rounded-full focus:outline-none lg:hidden bottom-4 right-4">
<span class="sr-only">Open site navigation</span>
<svg v-if="!sidebarOpen" class="w-8 h-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 18H9V16H21V18ZM21 13H3V11H21V13ZM21 8H9V6H21V8Z" fill="currentColor"></path>
</svg>
<svg v-if="sidebarOpen" class="w-8 h-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.59 7L12 10.59L8.41 7L7 8.41L10.59 12L7 15.59L8.41 17L12 13.41L15.59 17L17 15.59L13.41 12L17 8.41L15.59 7Z" fill="currentColor"></path>
</svg>
</button>
</div>
</template>
@@ -160,6 +193,7 @@ import NavbarsWithSocialMediaLinks from "~/components/ui/Navbars/WithSocialMedia
// Heros
import HerosECommerce from "~/components/ui/Heros/ECommerce";
import HerosWithNewsletterForm from "~/components/ui/Heros/WithNewsletterForm";
import HerosCenterContent from "~/components/ui/Heros/CenterContent";
import HerosWithSlide from "~/components/ui/Heros/WithSlide";
import HerosWithImage from "~/components/ui/Heros/WithImage";
import HerosWithSideImage from "~/components/ui/Heros/WithSideImage";
@@ -171,7 +205,7 @@ import SidebarWithAvatar from "~/components/ui/Sidebar/WithAvatar";
// Sections
import SectionsAboutMe from "~/components/ui/Sections/AboutMe";
import SectionsFeature from "~/components/ui/Sections/Feature";
import SectionsProducts from "~/components/ui/Sections/Products";
import SectionsProductsWithSideLinks from "~/components/ui/Sections/ProductsWithSideLinks";
import SectionsOurTeam from "~/components/ui/Sections/OurTeam";
import SectionsParagraphWithImage from "~/components/ui/Sections/ParagraphWithImage";
// Pricing
@@ -182,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";
@@ -236,6 +271,7 @@ export default {
NavbarsWithCategories,
HerosECommerce,
HerosWithNewsletterForm,
HerosCenterContent,
HerosWithSlide,
HerosWithImage,
HerosWithSideImage,
@@ -245,7 +281,7 @@ export default {
SidebarWithSearch,
SectionsAboutMe,
SectionsFeature,
SectionsProducts,
SectionsProductsWithSideLinks,
SectionsOurTeam,
SectionsParagraphWithImage,
PricingSimple,
@@ -253,6 +289,7 @@ export default {
PricingWithNavigation,
PaginationSimple,
FootersSimple,
FootersWithCta,
FootersWithDetails,
FootersWithLinks,
FootersWithSubscribeForm,
@@ -260,7 +297,8 @@ export default {
data() {
return {
components_count: 63,
sidebarOpen: false,
components_count: 65,
categories: [],
activeCategory: "Alerts",
component: new Component(),
@@ -276,5 +314,12 @@ export default {
return this.component.whereCategory(this.activeCategory);
},
},
methods: {
updateCategory(category) {
this.activeCategory = category;
this.sidebarOpen = false;
}
}
};
</script>