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

Compare commits

base: Mirroring:1b99a164220f06d3b5f10c1f47bebf595a875739
Branches Tags
Mirroring:main
...
compare: Mirroring:1c3103700321c7a9bb9f5dfd5ddad52d126bb088
Branches Tags
Mirroring:main

6 Commits
1b99a16422 ... 1c31037003

Author SHA1 Message Date
khatabwedaa
1c31037003 WIP 2021-12-16 18:50:36 +02:00
khatabwedaa
ee63cb8501 Merge branch 'new-design' of github.com:bakateam/merakiui into new-design 2021-12-16 18:40:57 +02:00
khatabwedaa
f7a2871e1e fix mobile overflow 2021-12-16 18:40:43 +02:00
khatab Wedaa
74b5ceed59 Update components.vue 2021-12-16 18:05:46 +02:00
khatabwedaa
b0d592f818 components page 2021-12-16 17:58:46 +02:00
khatabwedaa
1edf0fca5c WIP 2021-12-16 15:56:30 +02:00
10 changed files with 72 additions and 278 deletions
Expand all files Collapse all files

BIN
assets/images/coolicons-cover.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 716 KiB

BIN
assets/images/header-img.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 172 KiB

BIN
assets/images/tailwindcss.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 107 KiB

BIN
assets/images/unsplash.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 42 KiB

1
assets/svg/hero-pattern.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 7.3 KiB

47
components/Header.vue
View File

@@ -1,39 +1,30 @@
<template>
<header class="bg-gray-900 pattern">
<nav>
<div class="container p-4 mx-auto">
<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="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>
<header class="bg-gray-900">
<nav class="container px-4 py-4 mx-auto sm:px-6">
<div class="flex items-center justify-between">
<a href="/" class="inline-flex items-center text-xl font-bold text-white md:text-2xl hover:text-blue-400">
<img class="mr-2 w-7 h-7" src="../assets/svg/logo.svg" alt="logo"> <span class="hidden sm:inline">Meraki <span class="text-blue-400">UI</span></span>
</a>
<div class="mt-2 space-x-4 sm:mt-0">
<a class="font-medium text-gray-200 hover:text-blue-400" href="/components">Components</a>
<a class="font-medium text-gray-200 hover:text-blue-400" href="/resources">Resources</a>
</div>
</div>
<div class="flex items-center justify-center space-x-4 sm:space-x-6">
<a target="_blank" :href="SHARE_LINK" class="flex items-center space-x-3 text-sm text-white cursor-pointer hover:decoration-blue-500 hover:underline">
<svg class="w-5 h-5 sm:w-6 sm:h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.995 6.68799C20.8914 6.15208 21.5622 5.30823 21.882 4.31399C21.0397 4.81379 20.118 5.16587 19.157 5.35499C17.8246 3.94552 15.7135 3.60251 14.0034 4.51764C12.2933 5.43277 11.4075 7.37948 11.841 9.26999C8.39062 9.09676 5.17598 7.4669 2.99702 4.78599C1.85986 6.74741 2.44097 9.25477 4.32502 10.516C3.64373 10.4941 2.97754 10.3096 2.38202 9.97799C2.38202 9.99599 2.38202 10.014 2.38202 10.032C2.38241 12.0751 3.82239 13.8351 5.82502 14.24C5.19308 14.4119 4.53022 14.4372 3.88702 14.314C4.45022 16.0613 6.06057 17.2583 7.89602 17.294C6.37585 18.4871 4.49849 19.1342 2.56602 19.131C2.22349 19.1315 1.88123 19.1118 1.54102 19.072C3.50341 20.333 5.78739 21.0023 8.12002 21C11.3653 21.0223 14.484 19.7429 16.7787 17.448C19.0734 15.1531 20.3526 12.0342 20.33 8.78899C20.33 8.60299 20.3257 8.41799 20.317 8.23399C21.1575 7.62659 21.8828 6.87414 22.459 6.01199C21.676 6.35905 20.8455 6.58691 19.995 6.68799Z" fill="currentColor"></path>
</svg>
<div class="flex items-center justify-center mt-6 space-x-4 sm:space-x-6 sm:mt-0">
<a target="_blank" :href="SHARE_LINK" class="flex items-center space-x-3 font-medium text-white hover:text-blue-400 hover:underline">
<svg class="w-5 h-5 sm:w-6 sm:h-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.995 6.68799C20.8914 6.15208 21.5622 5.30823 21.882 4.31399C21.0397 4.81379 20.118 5.16587 19.157 5.35499C17.8246 3.94552 15.7135 3.60251 14.0034 4.51764C12.2933 5.43277 11.4075 7.37948 11.841 9.26999C8.39062 9.09676 5.17598 7.4669 2.99702 4.78599C1.85986 6.74741 2.44097 9.25477 4.32502 10.516C3.64373 10.4941 2.97754 10.3096 2.38202 9.97799C2.38202 9.99599 2.38202 10.014 2.38202 10.032C2.38241 12.0751 3.82239 13.8351 5.82502 14.24C5.19308 14.4119 4.53022 14.4372 3.88702 14.314C4.45022 16.0613 6.06057 17.2583 7.89602 17.294C6.37585 18.4871 4.49849 19.1342 2.56602 19.131C2.22349 19.1315 1.88123 19.1118 1.54102 19.072C3.50341 20.333 5.78739 21.0023 8.12002 21C11.3653 21.0223 14.484 19.7429 16.7787 17.448C19.0734 15.1531 20.3526 12.0342 20.33 8.78899C20.33 8.60299 20.3257 8.41799 20.317 8.23399C21.1575 7.62659 21.8828 6.87414 22.459 6.01199C21.676 6.35905 20.8455 6.58691 19.995 6.68799Z" fill="currentColor"></path>
</svg>
<span>Share on TWITTER</span>
</a>
<span>Share on twitter</span>
</a>
<a class="flex items-center space-x-4 text-sm text-white hover:underline hover:decoration-blue-500" href="https://github.com/merakiui/merakiui" target="_blink">
<svg class="w-5 h-5 fill-current sm:w-6 sm:h-6" viewBox="0 0 30 30">
<path d="M15 1.875C7.75195 1.875 1.875 7.9043 1.875 15.334C1.875 21.2812 5.63672 26.3203 10.8516 28.1016C10.9247 28.1175 10.9994 28.1253 11.0742 28.125C11.5605 28.125 11.748 27.7676 11.748 27.457C11.748 27.1348 11.7363 26.291 11.7305 25.166C11.2963 25.2678 10.8522 25.3209 10.4062 25.3242C7.88086 25.3242 7.30664 23.3613 7.30664 23.3613C6.70898 21.8086 5.84766 21.3926 5.84766 21.3926C4.70508 20.5898 5.8418 20.5664 5.92969 20.5664H5.93555C7.25391 20.6836 7.94531 21.9609 7.94531 21.9609C8.60156 23.1094 9.48047 23.4316 10.2656 23.4316C10.7848 23.4213 11.2959 23.3015 11.7656 23.0801C11.8828 22.2129 12.2227 21.6211 12.5977 21.2812C9.68555 20.9414 6.62109 19.7871 6.62109 14.6309C6.62109 13.1602 7.13086 11.959 7.96875 11.0215C7.83398 10.6816 7.38281 9.31055 8.09766 7.45898C8.19354 7.43604 8.29209 7.42619 8.39062 7.42969C8.86523 7.42969 9.9375 7.61133 11.707 8.8418C13.8572 8.24022 16.1311 8.24022 18.2812 8.8418C20.0508 7.61133 21.123 7.42969 21.5977 7.42969C21.6962 7.42619 21.7947 7.43604 21.8906 7.45898C22.6055 9.31055 22.1543 10.6816 22.0195 11.0215C22.8574 11.9648 23.3672 13.166 23.3672 14.6309C23.3672 19.7988 20.2969 20.9355 17.373 21.2695C17.8418 21.6855 18.2637 22.5059 18.2637 23.7598C18.2637 25.5586 18.2461 27.0117 18.2461 27.4512C18.2461 27.7676 18.4277 28.125 18.9141 28.125C18.9928 28.1253 19.0713 28.1175 19.1484 28.1016C24.3691 26.3203 28.125 21.2754 28.125 15.334C28.125 7.9043 22.248 1.875 15 1.875Z"/>
</svg>
<a class="text-white hover:text-blue-400" href="https://github.com/bakateam/merakiui" target="_blink">
<svg class="w-5 h-5 fill-current sm:w-6 sm:h-6" viewBox="0 0 30 30">
<path d="M15 1.875C7.75195 1.875 1.875 7.9043 1.875 15.334C1.875 21.2812 5.63672 26.3203 10.8516 28.1016C10.9247 28.1175 10.9994 28.1253 11.0742 28.125C11.5605 28.125 11.748 27.7676 11.748 27.457C11.748 27.1348 11.7363 26.291 11.7305 25.166C11.2963 25.2678 10.8522 25.3209 10.4062 25.3242C7.88086 25.3242 7.30664 23.3613 7.30664 23.3613C6.70898 21.8086 5.84766 21.3926 5.84766 21.3926C4.70508 20.5898 5.8418 20.5664 5.92969 20.5664H5.93555C7.25391 20.6836 7.94531 21.9609 7.94531 21.9609C8.60156 23.1094 9.48047 23.4316 10.2656 23.4316C10.7848 23.4213 11.2959 23.3015 11.7656 23.0801C11.8828 22.2129 12.2227 21.6211 12.5977 21.2812C9.68555 20.9414 6.62109 19.7871 6.62109 14.6309C6.62109 13.1602 7.13086 11.959 7.96875 11.0215C7.83398 10.6816 7.38281 9.31055 8.09766 7.45898C8.19354 7.43604 8.29209 7.42619 8.39062 7.42969C8.86523 7.42969 9.9375 7.61133 11.707 8.8418C13.8572 8.24022 16.1311 8.24022 18.2812 8.8418C20.0508 7.61133 21.123 7.42969 21.5977 7.42969C21.6962 7.42619 21.7947 7.43604 21.8906 7.45898C22.6055 9.31055 22.1543 10.6816 22.0195 11.0215C22.8574 11.9648 23.3672 13.166 23.3672 14.6309C23.3672 19.7988 20.2969 20.9355 17.373 21.2695C17.8418 21.6855 18.2637 22.5059 18.2637 23.7598C18.2637 25.5586 18.2461 27.0117 18.2461 27.4512C18.2461 27.7676 18.4277 28.125 18.9141 28.125C18.9928 28.1253 19.0713 28.1175 19.1484 28.1016C24.3691 26.3203 28.125 21.2754 28.125 15.334C28.125 7.9043 22.248 1.875 15 1.875Z"/>
</svg>
</a>
</div>
<span class="hidden sm:inline">Code on GITHUB</span>
</a>
</div>
</div>
</nav>
<slot></slot>
</header>
</template>

2
layouts/default.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="bg-white">
<div class="bg-white font-roboto">
<Nuxt />
</div>
</template>

134
pages/components.vue
View File

@@ -1,104 +1,36 @@
<template>
<div class="relative font-roboto">
<div class="relative">
<div class="flex flex-col bg-white xl:h-screen xl:overflow-hidden">
<header-component class="fixed z-40 w-full xl:z-50"></header-component>
<div class="flex bg-white xl:h-screen">
<div :class="sidebarOpen ? 'block' : 'hidden'" @click="sidebarOpen = false" class="fixed inset-0 z-20 transition-opacity bg-black opacity-50 xl: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 xl:translate-x-0 xl:static xl: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>
<div class="flex pt-16 overflow-hidden 2xl:pt-20">
<div :class="sidebarOpen ? 'block' : 'hidden'" @click="sidebarOpen = false" class="fixed inset-0 z-50 transition-opacity bg-black opacity-50 xl:hidden"></div>
<nav class="mt-6 overflow-y-auto">
<div
v-for="category in categories"
:key="category.name"
class="block px-4 py-2 mt-1 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="updateCategory(category.name)" class="w-full text-left">
{{ category.name }}
</app-button>
</div>
</nav>
</div>
<div class="flex flex-col flex-1 overflow-hidden">
<nav class="bg-white shadow dark:bg-gray-800">
<div class="container px-6 py-4 mx-auto lg:flex lg:justify-between lg:items-center">
<div class="lg:flex 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 :class="sidebarOpen ? 'translate-x-0 ease-out' : '-translate-x-full ease-in'" class="fixed inset-y-0 left-0 z-50 flex flex-col w-64 h-screen px-4 py-8 pb-20 overflow-y-auto transition duration-300 transform bg-white border-gray-200 xl:translate-x-0 xl:static xl: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"> Meraki <span class="text-blue-500">UI</span>
</a>
<nav class="mt-6">
<div
v-for="category in categories"
:key="category.name"
class="block px-4 py-2 mt-1 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="updateCategory(category.name)" class="w-full text-left">
{{ category.name }}
</app-button>
</div>
<!-- Mobile menu button -->
<div class="flex lg:hidden">
<button type="button" class="text-gray-500 dark:text-gray-200 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none focus:text-gray-600 dark:focus:text-gray-400" 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>
<div class="flex flex-col text-gray-600 capitalize dark:text-gray-300 lg:flex lg:px-16 lg:-mx-4 lg:flex-row lg:items-center">
<a href="#" class="mt-2 lg:mt-0 lg:mx-4 hover:text-gray-800 dark:hover:text-gray-200">features</a>
<a href="#" class="mt-2 lg:mt-0 lg:mx-4 hover:text-gray-800 dark:hover:text-gray-200">downloads</a>
<a href="#" class="mt-2 lg:mt-0 lg:mx-4 hover:text-gray-800 dark:hover:text-gray-200">docs</a>
<a href="#" class="mt-2 lg:mt-0 lg:mx-4 hover:text-gray-800 dark:hover:text-gray-200">support</a>
<a href="#" class="mt-2 lg:mt-0 lg:mx-4 hover:text-gray-800 dark:hover:text-gray-200">blog</a>
<div class="relative mt-4 lg:mt-0 lg:mx-4">
<span class="absolute inset-y-0 left-0 flex items-center pl-3">
<svg class="w-4 h-4 text-gray-600 dark:text-gray-300" viewBox="0 0 24 24" fill="none">
<path d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</span>
<input type="text" class="w-full py-1 pl-10 pr-4 text-gray-700 placeholder-gray-600 bg-white border-b border-gray-600 dark:placeholder-gray-300 dark:focus:border-gray-300 lg:w-56 lg:border-transparent dark:bg-gray-800 dark:text-gray-300 focus:outline-none focus:border-gray-600" placeholder="Search">
</div>
</div>
</nav>
</div>
<div class="flex justify-center mt-6 lg:flex lg:mt-0 lg:-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">
<svg class="w-5 h-5 fill-current" 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 22ZM6.807 10.543C6.20862 10.5433 5.67102 10.9088 5.45054 11.465C5.23006 12.0213 5.37133 12.6558 5.807 13.066C5.92217 13.1751 6.05463 13.2643 6.199 13.33C6.18644 13.4761 6.18644 13.6229 6.199 13.769C6.199 16.009 8.814 17.831 12.028 17.831C15.242 17.831 17.858 16.009 17.858 13.769C17.8696 13.6229 17.8696 13.4761 17.858 13.33C18.4649 13.0351 18.786 12.3585 18.6305 11.7019C18.475 11.0453 17.8847 10.5844 17.21 10.593H17.157C16.7988 10.6062 16.458 10.7512 16.2 11C15.0625 10.2265 13.7252 9.79927 12.35 9.77L13 6.65L15.138 7.1C15.1931 7.60706 15.621 7.99141 16.131 7.992C16.1674 7.99196 16.2038 7.98995 16.24 7.986C16.7702 7.93278 17.1655 7.47314 17.1389 6.94094C17.1122 6.40873 16.6729 5.991 16.14 5.991C16.1022 5.99191 16.0645 5.99491 16.027 6C15.71 6.03367 15.4281 6.21641 15.268 6.492L12.82 6C12.7983 5.99535 12.7762 5.993 12.754 5.993C12.6094 5.99472 12.4851 6.09583 12.454 6.237L11.706 9.71C10.3138 9.7297 8.95795 10.157 7.806 10.939C7.53601 10.6839 7.17843 10.5422 6.807 10.543ZM12.18 16.524C12.124 16.524 12.067 16.524 12.011 16.524C11.955 16.524 11.898 16.524 11.842 16.524C11.0121 16.5208 10.2054 16.2497 9.542 15.751C9.49626 15.6958 9.47445 15.6246 9.4814 15.5533C9.48834 15.482 9.52348 15.4163 9.579 15.371C9.62737 15.3318 9.68771 15.3102 9.75 15.31C9.81233 15.31 9.87275 15.3315 9.921 15.371C10.4816 15.7818 11.159 16.0022 11.854 16C11.9027 16 11.9513 16 12 16C12.059 16 12.119 16 12.178 16C12.864 16.0011 13.5329 15.7863 14.09 15.386C14.1427 15.3322 14.2147 15.302 14.29 15.302C14.3653 15.302 14.4373 15.3322 14.49 15.386C14.5985 15.4981 14.5962 15.6767 14.485 15.786V15.746C13.8213 16.2481 13.0123 16.5208 12.18 16.523V16.524ZM14.307 14.08H14.291L14.299 14.041C13.8591 14.011 13.4994 13.6789 13.4343 13.2429C13.3691 12.8068 13.6162 12.3842 14.028 12.2269C14.4399 12.0697 14.9058 12.2202 15.1478 12.5887C15.3899 12.9572 15.3429 13.4445 15.035 13.76C14.856 13.9554 14.6059 14.0707 14.341 14.08H14.306H14.307ZM9.67 14C9.11772 14 8.67 13.5523 8.67 13C8.67 12.4477 9.11772 12 9.67 12C10.2223 12 10.67 12.4477 10.67 13C10.67 13.5523 10.2223 14 9.67 14Z">
</path>
</svg>
</a>
<a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300"
aria-label="Facebook">
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M2.00195 12.002C2.00312 16.9214 5.58036 21.1101 10.439 21.881V14.892H7.90195V12.002H10.442V9.80204C10.3284 8.75958 10.6845 7.72064 11.4136 6.96698C12.1427 6.21332 13.1693 5.82306 14.215 5.90204C14.9655 5.91417 15.7141 5.98101 16.455 6.10205V8.56104H15.191C14.7558 8.50405 14.3183 8.64777 14.0017 8.95171C13.6851 9.25566 13.5237 9.68693 13.563 10.124V12.002H16.334L15.891 14.893H13.563V21.881C18.8174 21.0506 22.502 16.2518 21.9475 10.9611C21.3929 5.67041 16.7932 1.73997 11.4808 2.01722C6.16831 2.29447 2.0028 6.68235 2.00195 12.002Z">
</path>
</svg>
</a>
<a href="#" class="mx-2 text-gray-600 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-300" aria-label="Github">
<svg class="w-5 h-5 fill-current" viewBox="0 0 24 24" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M12.026 2C7.13295 1.99937 2.96183 5.54799 2.17842 10.3779C1.395 15.2079 4.23061 19.893 8.87302 21.439C9.37302 21.529 9.55202 21.222 9.55202 20.958C9.55202 20.721 9.54402 20.093 9.54102 19.258C6.76602 19.858 6.18002 17.92 6.18002 17.92C5.99733 17.317 5.60459 16.7993 5.07302 16.461C4.17302 15.842 5.14202 15.856 5.14202 15.856C5.78269 15.9438 6.34657 16.3235 6.66902 16.884C6.94195 17.3803 7.40177 17.747 7.94632 17.9026C8.49087 18.0583 9.07503 17.99 9.56902 17.713C9.61544 17.207 9.84055 16.7341 10.204 16.379C7.99002 16.128 5.66202 15.272 5.66202 11.449C5.64973 10.4602 6.01691 9.5043 6.68802 8.778C6.38437 7.91731 6.42013 6.97325 6.78802 6.138C6.78802 6.138 7.62502 5.869 9.53002 7.159C11.1639 6.71101 12.8882 6.71101 14.522 7.159C16.428 5.868 17.264 6.138 17.264 6.138C17.6336 6.97286 17.6694 7.91757 17.364 8.778C18.0376 9.50423 18.4045 10.4626 18.388 11.453C18.388 15.286 16.058 16.128 13.836 16.375C14.3153 16.8651 14.5612 17.5373 14.511 18.221C14.511 19.555 14.499 20.631 14.499 20.958C14.499 21.225 14.677 21.535 15.186 21.437C19.8265 19.8884 22.6591 15.203 21.874 10.3743C21.089 5.54565 16.9181 1.99888 12.026 2Z">
</path>
</svg>
</a>
</div>
</div>
</nav>
<main class="flex-1 lg:overflow-y-auto">
<div class="container px-4 mx-auto">
<main id="main" class="flex flex-col flex-1 overflow-x-hidden lg:overflow-y-auto">
<div class="container px-4 mx-auto sm:px-6 ">
<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"
@@ -132,15 +64,7 @@
</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>
<p class="text-gray-600">© Copyright {{ new Date().getFullYear() }} by <a href="https://github.com/merakiui" target="_blank" class="font-medium text-gray-700 underline decoration-blue-500">Meraki UI</a></p>
</div>
</div>
</main>
@@ -163,6 +87,7 @@
<script>
// Application components
import AppButton from "~/components/utilities/AppButton.vue";
import HeaderComponent from "../components/Header.vue";
// Alerts
import AlertsSuccessPop from "~/components/ui/Alerts/SuccessPop";
@@ -264,6 +189,7 @@ import Component from "~/models/ComponentsFilter";
export default {
components: {
AppButton,
HeaderComponent,
AlertsSuccessPop,
AlertsInfoPop,
AlertsWarningPop,
@@ -367,6 +293,8 @@ export default {
updateCategory(category) {
this.activeCategory = category;
this.sidebarOpen = false;
document.getElementById('main').scrollTop = 0;
window.scrollTo(0,0)
}
}
};

37
pages/index.vue
View File

@@ -1,19 +1,20 @@
<template>
<div class="relative font-roboto">
<header-component class="h-screen overflow-hidden">
<div class="container flex flex-col flex-1 h-full justify-center px-4 py-8 mx-auto lg:py-0">
<div class="text-white text-center max-w-3xl mx-auto">
<h1 class="text-2xl font-semibold text-white lg:text-4xl leading-relaxed">Start building your next project with an awesome components build with utilities</h1>
<header class="flex flex-col h-screen overflow-hidden bg-gray-900 pattern">
<header-component class="pattern"></header-component>
<p class="mt-6 text-gray-300 lg:text-xl">
Beautiful <a href="https://tailwindcss.com" class="font-normal text-blue-400 hover:underline">Tailwind CSS</a>
<div class="container flex items-center flex-1 px-6 py-8 mx-auto lg:py-0">
<div class="max-w-3xl mx-auto text-center text-white">
<h1 class="text-2xl font-semibold leading-relaxed text-white lg:text-4xl">Start building your next project with an awesome components build with utilities</h1>
<p class="mt-4 text-gray-300 lg:mt-6 lg:text-xl">
Beautiful <a href="https://tailwindcss.com" class="font-normal underline decoration-blue-500">Tailwind CSS</a>
components that support RTL languages & fully responsive based on Flexbox & CSS Grid with elegant
<a href="https://tailwindcss.com/docs/dark-mode" class="font-normal text-blue-400 hover:underline">Dark Mode</a>.
<a href="https://tailwindcss.com/docs/dark-mode" class="font-normal underline decoration-blue-500">Dark Mode</a>.
</p>
<div class="flex space-x-5 flex-wrap justify-center items-center mt-6">
<div class="flex flex-wrap items-center justify-center mt-6 space-x-5">
<a href="/components" class="flex text-white hover:underline">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
</svg>
@@ -21,27 +22,31 @@
</a>
<a class="flex text-white hover:underline" href="https://github.com/merakiui/merakiui/blob/master/LICENSE">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 text-gray-300 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 6l3 1m0 0l-3 9a5.002 5.002 0 006.001 0M6 7l3 9M6 7l6-2m6 2l3-1m-3 1l-3 9a5.002 5.002 0 006.001 0M18 7l3 9m-3-9l-6-2m0-2v2m0 16V5m0 16H9m3 0h3" />
</svg>
<p class="mx-2">MIT Licensed</p>
</a>
</div>
<div class="grid grid-cols-1 gap-3 mt-8 text-center sm:flex sm:justify-center sm:gap-0 sm:space-x-4">
<a href="/components" class="px-4 py-3 text-sm font-semibold text-gray-900 bg-white rounded-lg hover:bg-gray-300 hover:text-gray-700 focus:outline-none focus:ring focus:ring-opacity-40 focus:ring-gray-100"> Browse Components</a>
<a href="#" class="px-4 py-3 text-sm font-semibold text-gray-300 bg-gray-800 rounded-lg hover:bg-gray-700 focus:outline-none focus:ring focus:ring-opacity-40 focus:ring-gray-600">Permium Themes</a>
</div>
</div>
</div>
</header-component>
</div>
</header>
</template>
<script>
import HeaderComponent from "~/components/Header";
import HeaderComponent from "../components/Header.vue";
export default {
components: {
HeaderComponent,
HeaderComponent
},
data() {
return {
components_count: 78,

129
pages/resources.vue
View File

@@ -1,129 +0,0 @@
<template>
<div class="font-roboto">
<header-component />
<div class="container px-4 py-12 mx-auto">
<div class="max-w-xl mx-auto text-center">
<h1 class="text-xl font-medium text-gray-800 md:text-3xl">
Resources 👌
</h1>
<p class="mt-4 text-gray-600 md:text-xl">
We are using many design resources on building
<a href="/#main" target="_blank" class="text-blue-500 hover:underline">Meraki UI Components</a>
you can check them all the resources are free.
</p>
</div>
<div class="flex justify-center my-10">
<carbon-ads></carbon-ads>
</div>
<div class="grid gap-8 mt-10 md:grid-cols-2 xl:grid-cols-3">
<div>
<a href="http://tailwindcss.com" class="relative flex overflow-hidden bg-gray-900 h-80 xl:h-64 rounded-2xl">
<img class="object-cover" src="~/assets/images/tailwindcss.jpg" alt="tailwindcss">
</a>
<h4 class="mt-2 text-2xl font-medium text-gray-800">Tailwind CSS</h4>
<p class="mt-2 text-gray-700">A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. </p>
</div>
<div>
<a href="https://heroicons.com" class="relative flex h-80 xl:h-64 rounded-2xl bg-gradient-to-br from-purple-600 to-purple-500">
<div class="absolute inset-0 flex items-center justify-center p-6 bg-contain" style="background-image: url(&quot;https://tailwindcss.com/_next/static/media/heroicons-bg.fdbaa28ae8446332a61619794c459a77.svg&quot;);">
<div class="max-w-full w-60">
<div class="relative" style="padding-top: 25%;">
<span class="sr-only">Heroicons</span>
<svg width="240" height="60" fill="none" viewBox="0 0 240 60" class="absolute inset-0 w-full h-full">
<path fill="#fff" d="M88.503 24.216c-2.15 0-3.817.802-4.78 2.245V18.25h-4.137v22.452h4.138v-8.66c0-2.79 1.507-3.977 3.528-3.977 1.86 0 3.175 1.122 3.175 3.303v9.334h4.138v-9.847c0-4.266-2.662-6.64-6.062-6.64zm12.449 10.167h12.092c.097-.545.161-1.09.161-1.7 0-4.714-3.368-8.467-8.115-8.467-5.036 0-8.468 3.688-8.468 8.468 0 4.779 3.4 8.467 8.789 8.467 3.079 0 5.484-1.25 6.992-3.432l-3.336-1.924c-.706.93-1.988 1.603-3.592 1.603-2.181 0-3.945-.898-4.523-3.015zm-.064-3.207c.481-2.053 1.989-3.24 4.202-3.24 1.732 0 3.464.93 3.977 3.24h-8.179zm18.701-3.753v-2.758h-4.137v16.037h4.137v-7.666c0-3.367 2.727-4.33 4.876-4.073v-4.619c-2.021 0-4.042.898-4.876 3.08zm13.693 13.728c4.715 0 8.499-3.688 8.499-8.468 0-4.779-3.784-8.467-8.499-8.467-4.715 0-8.468 3.688-8.468 8.468 0 4.779 3.753 8.467 8.468 8.467zm0-4.041c-2.438 0-4.33-1.828-4.33-4.426s1.892-4.427 4.33-4.427c2.469 0 4.362 1.828 4.362 4.427 0 2.598-1.893 4.426-4.362 4.426zm12.821-14.37c1.412 0 2.566-1.154 2.566-2.533 0-1.38-1.154-2.566-2.566-2.566-1.379 0-2.534 1.186-2.534 2.566 0 1.379 1.155 2.534 2.534 2.534zm-2.052 17.962h4.137V24.665h-4.137v16.037zm14.916.449c3.144 0 5.87-1.668 7.249-4.17l-3.592-2.052c-.642 1.315-2.021 2.117-3.689 2.117-2.469 0-4.298-1.829-4.298-4.362 0-2.566 1.829-4.395 4.298-4.395 1.636 0 3.015.834 3.657 2.15l3.56-2.085c-1.315-2.47-4.041-4.138-7.185-4.138-4.875 0-8.467 3.688-8.467 8.468 0 4.779 3.592 8.467 8.467 8.467zm16.179 0c4.715 0 8.5-3.688 8.5-8.468 0-4.779-3.785-8.467-8.5-8.467s-8.467 3.688-8.467 8.468c0 4.779 3.752 8.467 8.467 8.467zm0-4.041c-2.437 0-4.33-1.828-4.33-4.426s1.893-4.427 4.33-4.427c2.47 0 4.362 1.828 4.362 4.427 0 2.598-1.892 4.426-4.362 4.426zm19.686-12.894c-2.149 0-3.817.802-4.779 2.245v-1.796h-4.138v16.037h4.138v-8.66c0-2.79 1.507-3.977 3.528-3.977 1.86 0 3.175 1.122 3.175 3.303v9.334h4.138v-9.847c0-4.266-2.662-6.64-6.062-6.64zm12.77 5.004c0-.866.834-1.316 1.861-1.316 1.186 0 2.084.61 2.566 1.636l3.528-1.924c-1.251-2.213-3.496-3.4-6.094-3.4-3.304 0-6.094 1.828-6.094 5.1 0 5.645 8.275 4.362 8.275 6.703 0 .93-.898 1.38-2.213 1.38-1.604 0-2.695-.77-3.144-2.085l-3.592 2.02c1.155 2.47 3.528 3.817 6.736 3.817 3.432 0 6.447-1.668 6.447-5.132 0-5.901-8.276-4.426-8.276-6.8z"></path><path stroke="#AC94FA" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M43.328 14.608a26.329 26.329 0 0015.953 5.613c.247 1.331.376 2.705.376 4.111 0 10.272-6.905 18.937-16.329 21.597C33.904 43.269 27 34.604 27 24.332c0-1.406.13-2.78.376-4.112a26.328 26.328 0 0015.952-5.612z"></path>
</svg>
</div>
</div>
</div>
</a>
<h4 class="mt-2 text-2xl font-medium text-gray-800">Heroicons</h4>
<p class="mt-2 text-gray-700">A set of free MIT-licensed high-quality SVG icons for you to use in your web projects.</p>
</div>
<div>
<a href="https://www.heropatterns.com" class="relative flex h-80 xl:h-64 rounded-2xl bg-gradient-to-br from-teal-600 to-teal-500">
<div class="absolute inset-0 flex items-center justify-center p-6 bg-cover" style="background-image:url(https://tailwindcss.com/_next/static/media/heropatterns-bg.c2cf738690295dca4780cfdcba97c95f.svg)">
<div class="max-w-full w-60">
<div class="relative" style="padding-top:25%">
<span class="sr-only">Heropatterns</span>
<svg width="240" height="60" fill="none" viewBox="0 0 240 60" class="absolute inset-0 w-full h-full">
<path fill="#fff" d="M64.503 24.214c-2.15 0-3.817.802-4.78 2.245v-8.211h-4.137V40.7h4.138v-8.66c0-2.79 1.507-3.977 3.528-3.977 1.86 0 3.175 1.122 3.175 3.303V40.7h4.138v-9.847c0-4.266-2.662-6.64-6.062-6.64zm12.449 10.168h12.092a9.56 9.56 0 00.16-1.7c0-4.715-3.367-8.468-8.114-8.468-5.036 0-8.468 3.689-8.468 8.468s3.4 8.467 8.789 8.467c3.079 0 5.484-1.25 6.992-3.432l-3.336-1.924c-.705.93-1.988 1.604-3.592 1.604-2.181 0-3.945-.899-4.523-3.015zm-.064-3.208c.481-2.053 1.989-3.24 4.202-3.24 1.732 0 3.464.93 3.977 3.24h-8.179zm18.702-3.753v-2.758h-4.138V40.7h4.137v-7.666c0-3.367 2.727-4.33 4.876-4.073v-4.619c-2.021 0-4.042.898-4.876 3.08zm13.692 13.729c4.715 0 8.499-3.69 8.499-8.468 0-4.78-3.784-8.468-8.499-8.468-4.715 0-8.468 3.689-8.468 8.468s3.753 8.467 8.468 8.467zm0-4.042c-2.438 0-4.33-1.828-4.33-4.426 0-2.599 1.892-4.427 4.33-4.427 2.469 0 4.362 1.829 4.362 4.427s-1.893 4.426-4.362 4.426zm20.102-12.894c-2.341 0-4.041.866-5.196 2.341v-1.892h-4.137v22.452h4.137v-8.307c1.155 1.475 2.855 2.341 5.196 2.341 4.298 0 7.826-3.688 7.826-8.467 0-4.78-3.528-8.468-7.826-8.468zm-.77 12.99c-2.533 0-4.426-1.828-4.426-4.522 0-2.695 1.893-4.523 4.426-4.523 2.566 0 4.459 1.828 4.459 4.523 0 2.694-1.893 4.522-4.459 4.522zm23.061-12.541v1.892c-1.154-1.443-2.886-2.341-5.228-2.341-4.266 0-7.794 3.689-7.794 8.468s3.528 8.467 7.794 8.467c2.342 0 4.074-.898 5.228-2.341V40.7h4.138V24.663h-4.138zm-4.458 12.541c-2.534 0-4.426-1.828-4.426-4.522 0-2.695 1.892-4.523 4.426-4.523 2.566 0 4.458 1.828 4.458 4.523 0 2.694-1.892 4.522-4.458 4.522zm20.88-8.564v-3.977h-3.625v-4.49l-4.137 1.25v3.24h-2.791v3.977h2.791v6.672c0 4.33 1.956 6.03 7.762 5.388v-3.753c-2.374.129-3.625.097-3.625-1.635V28.64h3.625zm10.822 0v-3.977h-3.624v-4.49l-4.138 1.25v3.24h-2.79v3.977h2.79v6.672c0 4.33 1.957 6.03 7.762 5.388v-3.753c-2.373.129-3.624.097-3.624-1.635V28.64h3.624zm5.271 5.742h12.092a9.58 9.58 0 00.16-1.7c0-4.715-3.367-8.468-8.114-8.468-5.036 0-8.468 3.689-8.468 8.468s3.4 8.467 8.788 8.467c3.079 0 5.485-1.25 6.993-3.432l-3.336-1.924c-.706.93-1.989 1.604-3.593 1.604-2.181 0-3.945-.899-4.522-3.015zm-.064-3.208c.481-2.053 1.988-3.24 4.202-3.24 1.732 0 3.464.93 3.977 3.24h-8.179zm18.701-3.753v-2.758h-4.138V40.7h4.138v-7.666c0-3.367 2.726-4.33 4.875-4.073v-4.619c-2.02 0-4.041.898-4.875 3.08zm15.57-3.207c-2.149 0-3.816.802-4.779 2.245v-1.796h-4.137V40.7h4.137v-8.66c0-2.79 1.508-3.977 3.528-3.977 1.861 0 3.176 1.122 3.176 3.303V40.7h4.137v-9.847c0-4.266-2.662-6.64-6.062-6.64zm12.771 5.004c0-.866.834-1.316 1.86-1.316 1.187 0 2.085.61 2.566 1.636l3.528-1.924c-1.251-2.213-3.496-3.4-6.094-3.4-3.304 0-6.094 1.828-6.094 5.1 0 5.645 8.275 4.362 8.275 6.703 0 .93-.898 1.38-2.213 1.38-1.604 0-2.694-.77-3.143-2.085l-3.593 2.02c1.155 2.47 3.529 3.817 6.736 3.817 3.432 0 6.447-1.668 6.447-5.132 0-5.901-8.275-4.426-8.275-6.8z"></path><path stroke="#AFECEF" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M19.328 14.608a26.329 26.329 0 0015.953 5.613c.247 1.331.376 2.705.376 4.111 0 10.272-6.905 18.937-16.329 21.597C9.904 43.269 3 34.604 3 24.332c0-1.406.13-2.78.376-4.112a26.328 26.328 0 0015.952-5.612z"></path>
</svg>
</div>
</div>
</div>
</a>
<h4 class="mt-2 text-2xl font-medium text-gray-800">Heropatterns</h4>
<p class="mt-2 text-gray-700">A set of free MIT-licensed high-quality SVG patterns for you to use in your web projects. </p>
</div>
<div>
<a href="https://storyset.com" class="relative flex h-80 xl:h-64 rounded-2xl bg-gradient-to-br from-blue-900 to-blue-800">
<div class="absolute inset-0 flex items-center justify-center p-6 bg-cover" style="background-image:url(https://tailwindcss.com/_next/static/media/heropatterns-bg.c2cf738690295dca4780cfdcba97c95f.svg)">
<div class="max-w-full w-60">
<div class="relative">
<span class="sr-only">Storyset</span>
<svg viewBox="0 0 299 65" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M42.3804 25.81C39.1335 24.2193 35.5927 23.3171 31.9804 23.16C28.6504 23.16 26.9804 24.33 26.9804 26.16C26.9804 27.99 29.3304 28.51 32.2904 28.95L35.1904 29.39C42.2504 30.46 46.1904 33.62 46.1904 39.14C46.1904 45.87 40.6704 50.21 31.1904 50.21C26.7404 50.21 20.9204 49.37 16.6904 46.37L20.1504 39.71C23.4309 41.898 27.3087 43.016 31.2504 42.91C35.3204 42.91 37.2504 41.77 37.2504 39.85C37.2504 38.27 35.6104 37.39 31.8404 36.85L29.1804 36.48C21.6404 35.48 17.9104 32.14 17.9104 26.59C17.9104 19.9 23.0904 15.93 31.6704 15.93C36.3969 15.8411 41.0743 16.9015 45.3004 19.02L42.3804 25.81Z" fill="#F8FAFB"/>
<path d="M76.4204 26.35H64.6104V36.44C64.6104 40.51 66.7604 42 69.4904 42C71.7584 41.798 73.9406 41.0351 75.8404 39.78L78.8404 46.78C75.6968 49.0428 71.9136 50.2444 68.0404 50.21C59.9604 50.21 55.8304 45.63 55.8304 37.21V26.35H48.4404L51.7404 18.54H55.8304V7.07999H64.6104V18.54H76.4204V26.35Z" fill="#F8FAFB"/>
<path d="M117.02 33.01C117.02 42.84 109.51 50.17 99.3503 50.17C89.1903 50.17 81.7803 42.84 81.7803 33.01C81.7803 23.18 89.2503 15.85 99.3703 15.85C109.49 15.85 117.02 23.19 117.02 33.01ZM90.7103 33.01C90.7103 38.29 94.4103 42.01 99.3503 42.01C104.29 42.01 108.03 38.3 108.03 33.01C108.03 27.72 104.3 24.01 99.3503 24.01C94.4003 24.01 90.7103 27.75 90.7103 33.01Z" fill="#F8FAFB"/>
<path d="M161.52 62.92H151.9L163.3 42.4L149.24 16.75H159.24L168.24 33.5L176.83 16.75H186.45L161.52 62.92Z" fill="#F8FAFB"/>
<path d="M146.72 17.42L143.14 25.61C141.731 24.9428 140.19 24.601 138.63 24.61C134.43 24.61 131.57 27.17 131.57 32.09V50.21H122.57V16.9H131.28V20.59C133.33 17.42 136.6 16.08 140.7 16.08C142.772 16.152 144.813 16.6064 146.72 17.42V17.42Z" fill="#F8FAFB"/>
<path d="M7.44024 21.6H0.240234C0.248171 15.9003 2.51589 10.4363 6.5462 6.40598C10.5765 2.37566 16.0405 0.107943 21.7402 0.100006V7.29999C17.9525 7.31578 14.3244 8.82747 11.6461 11.5058C8.9677 14.1842 7.45603 17.8123 7.44024 21.6V21.6Z" fill="#1273EB"/>
<path d="M291.321 43.3H298.521C298.513 48.9997 296.245 54.4637 292.215 58.494C288.184 62.5243 282.72 64.7921 277.021 64.8V57.6C278.903 57.6174 280.771 57.2593 282.513 56.5468C284.256 55.8343 285.839 54.7817 287.171 53.4503C288.502 52.119 289.555 50.5356 290.267 48.7928C290.98 47.0501 291.338 45.1827 291.321 43.3V43.3Z" fill="#1273EB"/>
<path d="M212.3 24C209.166 22.0507 205.551 21.012 201.86 21C197.31 21 194.31 22.92 194.31 26C194.31 28.66 196.63 30 200.81 30.48L204.58 30.95C211.36 31.83 215.3 34.62 215.3 39.85C215.3 45.91 209.84 49.72 201.3 49.72C196.543 49.8103 191.88 48.381 187.99 45.64L190.32 41.87C192.74 43.75 195.98 45.34 201.37 45.34C206.76 45.34 210.16 43.55 210.16 40.18C210.16 37.62 208 36.07 203.49 35.53L199.68 35.1C192.5 34.22 189.14 31.02 189.14 26.27C189.14 20.27 194.22 16.6 201.87 16.6C206.339 16.5192 210.736 17.7236 214.54 20.07L212.3 24Z" fill="#F8FAFB"/>
<path d="M250.52 33.06C250.523 33.6914 250.49 34.3225 250.42 34.95H224.85C225.56 41.82 230.38 45.36 236.14 45.36C239.896 45.3576 243.51 43.9277 246.25 41.36L248.94 44.8C247.204 46.4725 245.148 47.7773 242.895 48.6365C240.642 49.4956 238.239 49.8913 235.83 49.8C226.4 49.8 219.7 43.1 219.7 33.23C219.7 23.36 226.44 16.62 235.53 16.62C244.19 16.59 250.46 23.36 250.52 33.06ZM224.92 30.87H245.4C244.76 24.87 240.86 21.07 235.4 21.07C229.53 21.07 225.78 25.11 224.92 30.87Z" fill="#F8FAFB"/>
<path d="M278.21 22.75H264.43V37.86C264.43 42.86 267.06 45.03 270.77 45.03C273.183 44.9925 275.524 44.2063 277.47 42.78L279.83 46.58C277.113 48.6586 273.781 49.7738 270.36 49.75C263.49 49.75 259.41 45.98 259.41 37.96V22.75H252.41V18.21H259.41V8.07999H264.41V18.23H278.19L278.21 22.75Z" fill="#F8FAFB"/>
</svg>
</div>
</div>
</div>
</a>
<h4 class="mt-2 text-2xl font-medium text-gray-800">Storyset</h4>
<p class="mt-2 text-gray-700">Awesome free customizable illustrations for your next project Customize, animate and download our illustrations to make incredible landing pages, app or presentations. </p>
</div>
<div>
<a href="https://coolicons.cool" class="relative flex overflow-hidden bg-gray-900 h-80 xl:h-64 rounded-2xl">
<img class="object-cover" src="~/assets/images/coolicons-cover.png" alt="cool icons">
</a>
<h4 class="mt-2 text-2xl font-medium text-gray-800">Coolicons</h4>
<p class="mt-2 text-gray-700">coolicons are perfect for use in web and mobile. Support for SVG, your favourite design tool and webfont. Completely free and open source. </p>
</div>
<div>
<a href="https://unsplash.com/" class="relative flex overflow-hidden bg-gray-600 h-80 xl:h-64 rounded-2xl">
<img class="object-cover" src="~/assets/images/unsplash.jpg" alt="unsplash">
</a>
<h4 class="mt-2 text-2xl font-medium text-gray-800">Unsplash</h4>
<p class="mt-2 text-gray-700">Unsplash is an amazing resource for finding beautiful, high-resolution, free photos that you can use in your projects. </p>
</div>
</div>
</div>
</div>
</template>
<script>
import HeaderComponent from "~/components/Header";
export default {
components: { HeaderComponent }
};
</script>