Build resources page
This commit is contained in:
khatabwedaa
parent
21e8aced43
commit
1ed191979f
BIN
assets/images/coolicons-cover.png
Normal file
BIN
assets/images/coolicons-cover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 716 KiB |
|
Before Width: | Height: | Size: 627 KiB After Width: | Height: | Size: 627 KiB |
BIN
assets/images/twitter-large-card.jpg
Normal file
BIN
assets/images/twitter-large-card.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
BIN
assets/images/unsplash.423c2dda15c11c6803adf4cf5297505e.jpg
Normal file
BIN
assets/images/unsplash.423c2dda15c11c6803adf4cf5297505e.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
|
|
@ -2,12 +2,19 @@
|
|||
<header class="bg-gray-900 border-b-4 border-blue-500 pattern">
|
||||
<nav>
|
||||
<div class="container p-4 mx-auto">
|
||||
<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="w-10 h-10 mr-1" src="../assets/svg/logo.svg" alt="logo"> <span class="hidden sm:inline">Meraki <span class="text-blue-400">UI</span></span>
|
||||
</a>
|
||||
<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>
|
||||
</a>
|
||||
|
||||
<div class="flex items-center space-x-4 sm:space-x-6">
|
||||
<div class="mt-2 space-x-4 sm:mt-0">
|
||||
<a class="font-medium text-gray-200 hover:text-blue-400" href="/">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 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>
|
||||
|
|
@ -28,48 +35,7 @@
|
|||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container px-4 py-8 mx-auto md:py-0">
|
||||
<div class="md:flex">
|
||||
<div class="flex items-center w-full md:w-1/2 md:h-128">
|
||||
<div class="max-w-xl text-white">
|
||||
<div class="text-xs font-light">Simple UI Starter</div>
|
||||
|
||||
<h1 class="mt-3 text-2xl font-semibold text-white md:text-3xl">Meraki <span class="text-blue-400">UI </span> Components</h1>
|
||||
|
||||
<p class="mt-3 text-gray-300 md:text-lg">
|
||||
Beautiful <a href="https://tailwindcss.com" class="font-normal text-blue-400 hover:underline">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>.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-wrap items-center mt-4">
|
||||
<a class="flex text-white cursor-pointer hover:underline">
|
||||
<svg class="w-5 h-5 text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<p class="mx-2 text-sm">{{ components_count }} Components</p>
|
||||
</a>
|
||||
|
||||
<a class="flex ml-2 text-white hover:underline" href="https://github.com/merakiui/merakiui/blob/master/LICENSE">
|
||||
<svg class="w-5 h-5 text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1.323l3.954 1.582 1.599-.8a1 1 0 01.894 1.79l-1.233.616 1.738 5.42a1 1 0 01-.285 1.05A3.989 3.989 0 0115 15a3.989 3.989 0 01-2.667-1.019 1 1 0 01-.285-1.05l1.715-5.349L11 6.477V16h2a1 1 0 110 2H7a1 1 0 110-2h2V6.477L6.237 7.582l1.715 5.349a1 1 0 01-.285 1.05A3.989 3.989 0 015 15a3.989 3.989 0 01-2.667-1.019 1 1 0 01-.285-1.05l1.738-5.42-1.233-.617a1 1 0 01.894-1.788l1.599.799L9 4.323V3a1 1 0 011-1zm-5 8.274l-.818 2.552c.25.112.526.174.818.174.292 0 .569-.062.818-.174L5 10.274zm10 0l-.818 2.552c.25.112.526.174.818.174.292 0 .569-.062.818-.174L15 10.274z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<p class="mx-2 text-sm">MIT Licensed</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-center w-full mt-6 md:w-1/2 md:justify-end md:mt-0">
|
||||
<div class="w-full max-w-md">
|
||||
<img src="../assets/svg/Responsive-bro.svg" alt="moon">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<slot></slot>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
|
|
@ -80,7 +46,6 @@ export default {
|
|||
components: { DarkMode },
|
||||
data() {
|
||||
return {
|
||||
components_count: 58,
|
||||
SHARE_LINK: `https://twitter.com/intent/tweet?text=${encodeURIComponent(
|
||||
'Beautiful Tailwind CSS components that support RTL languages & fully responsive based on Flexbox & CSS Grid with elegant Dark Mode 🔥. \n #tailwindcss #100DaysOfCode \n'
|
||||
)}&url=${encodeURIComponent('https://merakiui.com')}`
|
||||
|
|
|
|||
|
|
@ -1,213 +0,0 @@
|
|||
<template>
|
||||
<div class="container px-4 mx-auto">
|
||||
<div class="py-16 text-center">
|
||||
<h1
|
||||
class="text-xl font-medium text-gray-800 md:text-3xl dark:text-white"
|
||||
>
|
||||
Discover new components. Build amazing things 🔥
|
||||
</h1>
|
||||
<div class="max-w-2xl mx-auto">
|
||||
<div class="flex items-center justify-center mt-5">
|
||||
<div class="mt-2 md:mt-0">
|
||||
<span
|
||||
v-for="category in categories"
|
||||
:key="category.name"
|
||||
>
|
||||
<app-button
|
||||
@click="searchText = category.name"
|
||||
class="px-3 py-1 mt-2 ml-2 text-sm rounded cursor-pointer hover:bg-gray-700 hover:text-gray-200 dark:hover:bg-gray-600 dark:hover:text-gray-200 focus:outline-none"
|
||||
:class="
|
||||
category.name === searchText
|
||||
? 'bg-gray-700 text-gray-200 dark:bg-gray-600 dark:text-gray-200'
|
||||
: 'bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-200'"
|
||||
>
|
||||
{{ category.name }}
|
||||
</app-button>
|
||||
</span>
|
||||
</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 dark:text-white"
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Application components
|
||||
import AppButton from "~/components/utilities/AppButton.vue";
|
||||
|
||||
// Alerts
|
||||
import AlertsSuccessPop from "./ui/Alerts/SuccessPop";
|
||||
import AlertsInfoPop from "./ui/Alerts/InfoPop";
|
||||
import AlertsWarningPop from "./ui/Alerts/WarningPop";
|
||||
import AlertsErrorPop from "./ui/Alerts/ErrorPop";
|
||||
import AlertsNotificationPop from "./ui/Alerts/NotificationPop";
|
||||
import AlertsSuccessFullWidth from "./ui/Alerts/SuccessFullWidth";
|
||||
import AlertsInfoFullWidth from "./ui/Alerts/InfoFullWidth";
|
||||
import AlertsWarningFullWidth from "./ui/Alerts/WarningFullWidth";
|
||||
import AlertsErrorFullWidth from "./ui/Alerts/ErrorFullWidth";
|
||||
// Authentication
|
||||
import AuthenticationSimpleLogin from "./ui/Authentication/SimpleLogin";
|
||||
import AuthenticationLoginWithSocailMediaLinks from "./ui/Authentication/LoginWithSocailMediaLinks";
|
||||
import AuthenticationLoginWithSideImage from "./ui/Authentication/LoginWithSideImage";
|
||||
// Buttons
|
||||
import ButtonsPrimary from "./ui/Buttons/Primary";
|
||||
import ButtonsWithIcon from "./ui/Buttons/WithIcon";
|
||||
import ButtonsWithMenu from "./ui/Buttons/WithMenu";
|
||||
// Cards
|
||||
import CardsArticle from "./ui/Cards/Article";
|
||||
import CardsArticleWithImage from "./ui/Cards/ArticleWithImage";
|
||||
import CardsArticleWithSMIcons from "./ui/Cards/ArticleWithSMIcons";
|
||||
import CardsProduct from "./ui/Cards/Product";
|
||||
import CardsProductWithEvaluation from "./ui/Cards/ProductWithEvaluation";
|
||||
import CardsSimpleProduct from "./ui/Cards/SimpleProduct";
|
||||
import CardsTestimonial from "./ui/Cards/Testimonial";
|
||||
import CardsUser from "./ui/Cards/User";
|
||||
import CardsUserWithDetails from "./ui/Cards/UserWithDetails";
|
||||
// Dropdowns
|
||||
import DropdownsSimple from "./ui/Dropdowns/Simple";
|
||||
import DropdownsNotification from "./ui/Dropdowns/Notification";
|
||||
// Forms
|
||||
import FormsNewsletter from "./ui/Forms/Newsletter";
|
||||
import FormsSimpleNewsletter from "./ui/Forms/SimpleNewsletter";
|
||||
import FormsSimple from "./ui/Forms/Simple";
|
||||
import FormsSearch from "./ui/Forms/Search";
|
||||
import FormsContact from "./ui/Forms/Contact";
|
||||
// Navbars
|
||||
import NavbarsSimple from "./ui/Navbars/Simple";
|
||||
import NavbarsECommerce from "./ui/Navbars/ECommerce";
|
||||
import NavbarsWithAvatar from "./ui/Navbars/WithAvatar";
|
||||
import NavbarsWithSearch from "./ui/Navbars/WithSearch";
|
||||
import NavbarsWithCategories from "./ui/Navbars/WithCategories";
|
||||
import NavbarsWithSocailMediaLinks from "./ui/Navbars/WithSocailMediaLinks";
|
||||
// Heros
|
||||
import HerosECommerce from "./ui/Heros/ECommerce";
|
||||
import HerosWithNewsletterForm from "./ui/Heros/WithNewsletterForm";
|
||||
import HerosWithSlide from "./ui/Heros/WithSlide";
|
||||
import HerosWithImage from "./ui/Heros/WithImage";
|
||||
import HerosWithSideImage from "./ui/Heros/WithSideImage";
|
||||
import HerosWithBGImage from "./ui/Heros/WithBGImage";
|
||||
import HerosWithPattern from "./ui/Heros/WithPattern";
|
||||
// Sidebars
|
||||
import SidebarWithSearch from "./ui/Sidebar/WithSearch";
|
||||
import SidebarWithAvatar from "./ui/Sidebar/WithAvatar";
|
||||
// Sections
|
||||
import SectionsAboutMe from "./ui/Sections/AboutMe";
|
||||
import SectionsFeature from "./ui/Sections/Feature";
|
||||
import SectionsOurTeam from "./ui/Sections/OurTeam";
|
||||
import SectionsParagraphWithImage from "./ui/Sections/ParagraphWithImage";
|
||||
// Pricing
|
||||
import PricingSimple from "./ui//Pricing/Simple";
|
||||
import PricingPopular from "./ui//Pricing/Popular";
|
||||
import PricingWithNavigation from "./ui//Pricing/WithNavigation";
|
||||
// paginations
|
||||
import PaginationSimple from "./ui/Pagination/Simple";
|
||||
// Footers
|
||||
import FootersSimple from "./ui/Footers/Simple";
|
||||
import FootersWithDetails from "./ui/Footers/WithDetails";
|
||||
import FootersWithLinks from "./ui/Footers/WithLinks";
|
||||
import FootersWithSubscribeForm from "./ui/Footers/WithSubscribeForm";
|
||||
|
||||
import Component from "~/models/ComponentsFilter";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AppButton,
|
||||
AlertsSuccessPop,
|
||||
AlertsInfoPop,
|
||||
AlertsWarningPop,
|
||||
AlertsErrorPop,
|
||||
AlertsNotificationPop,
|
||||
AlertsSuccessFullWidth,
|
||||
AlertsInfoFullWidth,
|
||||
AlertsWarningFullWidth,
|
||||
AlertsErrorFullWidth,
|
||||
AuthenticationSimpleLogin,
|
||||
AuthenticationLoginWithSocailMediaLinks,
|
||||
AuthenticationLoginWithSideImage,
|
||||
ButtonsPrimary,
|
||||
ButtonsWithIcon,
|
||||
ButtonsWithMenu,
|
||||
CardsArticle,
|
||||
CardsArticleWithImage,
|
||||
CardsArticleWithSMIcons,
|
||||
CardsProduct,
|
||||
CardsProductWithEvaluation,
|
||||
CardsSimpleProduct,
|
||||
CardsTestimonial,
|
||||
CardsUser,
|
||||
CardsUserWithDetails,
|
||||
DropdownsSimple,
|
||||
DropdownsNotification,
|
||||
FormsNewsletter,
|
||||
FormsSimpleNewsletter,
|
||||
FormsSimple,
|
||||
FormsSearch,
|
||||
FormsContact,
|
||||
NavbarsSimple,
|
||||
NavbarsECommerce,
|
||||
NavbarsWithAvatar,
|
||||
NavbarsWithSearch,
|
||||
NavbarsWithSocailMediaLinks,
|
||||
NavbarsWithCategories,
|
||||
HerosECommerce,
|
||||
HerosWithNewsletterForm,
|
||||
HerosWithSlide,
|
||||
HerosWithImage,
|
||||
HerosWithSideImage,
|
||||
HerosWithBGImage,
|
||||
HerosWithPattern,
|
||||
SidebarWithAvatar,
|
||||
SidebarWithSearch,
|
||||
SectionsAboutMe,
|
||||
SectionsFeature,
|
||||
SectionsOurTeam,
|
||||
SectionsParagraphWithImage,
|
||||
PricingSimple,
|
||||
PricingPopular,
|
||||
PricingWithNavigation,
|
||||
PaginationSimple,
|
||||
FootersSimple,
|
||||
FootersWithDetails,
|
||||
FootersWithLinks,
|
||||
FootersWithSubscribeForm,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
categories: [],
|
||||
searchText: "Alerts",
|
||||
component: new Component(),
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.categories = this.component.all();
|
||||
},
|
||||
|
||||
computed: {
|
||||
list() {
|
||||
return this.component.whereCategory(this.searchText);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
# COMPONENTS
|
||||
|
||||
**This directory is not required, you can delete it if you don't want to use it.**
|
||||
|
||||
The components directory contains your Vue.js Components.
|
||||
|
||||
_Nuxt.js doesn't supercharge these components._
|
||||
24
layouts/default.vue
Normal file
24
layouts/default.vue
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<template>
|
||||
<div class="bg-white dark:bg-gray-900 font-roboto">
|
||||
<Nuxt />
|
||||
<footer-component />
|
||||
|
||||
<back-to-top visibleoffset="800">
|
||||
<app-button class="fixed bottom-0 right-0 p-2 mx-10 my-10 text-white bg-gray-800 rounded-md hover:bg-gray-900 dark:hover:bg-gray-700 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 }
|
||||
};
|
||||
</script>
|
||||
|
|
@ -27,11 +27,11 @@ export default {
|
|||
content:
|
||||
"Beautiful Tailwind CSS components that support RTL languages & fully responsive based on Flexbox & CSS Grid with elegant Dark Mode.",
|
||||
},
|
||||
{ hid: "twitter:image", name: "twitter:image", content: 'https://raw.githubusercontent.com/bakateam/merakiui/main/assets/merakiui-thumbnail.png' },
|
||||
{ hid: "twitter:image", name: "twitter:image", content: 'https://raw.githubusercontent.com/bakateam/merakiui/main/assets/images/merakiui-thumbnail.png' },
|
||||
{ hid: "og:title", property: "og:title", content: "Meraki UI Tailwind CSS Components" },
|
||||
{ property: "og:site_name", content: "Meraki UI" },
|
||||
{ hid: "og:type", property: "og:type", content: "website" },
|
||||
{ hid: "og:image", property: "og:image", content: 'https://raw.githubusercontent.com/bakateam/merakiui/main/assets/merakiui-thumbnail.png' },
|
||||
{ hid: "og:image", property: "og:image", content: 'https://raw.githubusercontent.com/bakateam/merakiui/main/assets/images/merakiui-thumbnail.png' },
|
||||
{
|
||||
hid: "og:description",
|
||||
property: "og:description",
|
||||
|
|
|
|||
270
pages/index.vue
270
pages/index.vue
|
|
@ -1,27 +1,265 @@
|
|||
<template>
|
||||
<div class="bg-white dark:bg-gray-900 font-roboto">
|
||||
<header-component />
|
||||
<main-component />
|
||||
<footer-component />
|
||||
<div>
|
||||
<header-component>
|
||||
<div class="container px-4 py-8 mx-auto md:py-0">
|
||||
<div class="md:flex">
|
||||
<div class="flex items-center w-full md:w-1/2 md:h-128">
|
||||
<div class="max-w-xl text-white">
|
||||
<div class="text-xs font-light">Simple UI Starter</div>
|
||||
|
||||
<back-to-top visibleoffset="800">
|
||||
<app-button class="fixed bottom-0 right-0 p-2 mx-10 my-10 text-white bg-gray-800 rounded-md hover:bg-gray-900 dark:hover:bg-gray-700 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>
|
||||
<h1 class="mt-3 text-2xl font-semibold text-white md:text-3xl">Meraki <span class="text-blue-400">UI </span> Components</h1>
|
||||
|
||||
<p class="mt-3 text-gray-300 md:text-lg">
|
||||
Beautiful <a href="https://tailwindcss.com" class="font-normal text-blue-400 hover:underline">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>.
|
||||
</p>
|
||||
|
||||
<div class="flex flex-wrap items-center mt-4">
|
||||
<a class="flex text-white cursor-pointer hover:underline">
|
||||
<svg class="w-5 h-5 text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<p class="mx-2 text-sm">{{ components_count }} Components</p>
|
||||
</a>
|
||||
|
||||
<a class="flex ml-2 text-white hover:underline" href="https://github.com/merakiui/merakiui/blob/master/LICENSE">
|
||||
<svg class="w-5 h-5 text-gray-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1.323l3.954 1.582 1.599-.8a1 1 0 01.894 1.79l-1.233.616 1.738 5.42a1 1 0 01-.285 1.05A3.989 3.989 0 0115 15a3.989 3.989 0 01-2.667-1.019 1 1 0 01-.285-1.05l1.715-5.349L11 6.477V16h2a1 1 0 110 2H7a1 1 0 110-2h2V6.477L6.237 7.582l1.715 5.349a1 1 0 01-.285 1.05A3.989 3.989 0 015 15a3.989 3.989 0 01-2.667-1.019 1 1 0 01-.285-1.05l1.738-5.42-1.233-.617a1 1 0 01.894-1.788l1.599.799L9 4.323V3a1 1 0 011-1zm-5 8.274l-.818 2.552c.25.112.526.174.818.174.292 0 .569-.062.818-.174L5 10.274zm10 0l-.818 2.552c.25.112.526.174.818.174.292 0 .569-.062.818-.174L15 10.274z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
|
||||
<p class="mx-2 text-sm">MIT Licensed</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-center w-full mt-6 md:w-1/2 md:justify-end md:mt-0">
|
||||
<div class="w-full max-w-md">
|
||||
<img src="../assets/svg/Responsive-bro.svg" alt="moon">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header-component>
|
||||
|
||||
<div class="container px-4 mx-auto">
|
||||
<div class="py-16 text-center">
|
||||
<h1
|
||||
class="text-xl font-medium text-gray-800 md:text-3xl dark:text-white"
|
||||
>
|
||||
Discover new components. Build amazing things 🔥
|
||||
</h1>
|
||||
<div class="max-w-2xl mx-auto">
|
||||
<div class="flex items-center justify-center mt-5">
|
||||
<div class="mt-2 md:mt-0">
|
||||
<span
|
||||
v-for="category in categories"
|
||||
:key="category.name"
|
||||
>
|
||||
<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 dark:hover:bg-gray-600 dark:hover:text-gray-200 focus:outline-none"
|
||||
:class="
|
||||
category.name === activeCategory
|
||||
? 'bg-gray-700 text-gray-200 dark:bg-gray-600 dark:text-gray-200'
|
||||
: 'bg-gray-200 text-gray-700 dark:bg-gray-800 dark:text-gray-200'"
|
||||
>
|
||||
{{ category.name }}
|
||||
</app-button>
|
||||
</span>
|
||||
</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 dark:text-white"
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AppButton from "~/components/utilities/AppButton.vue";
|
||||
// Application components
|
||||
import HeaderComponent from "~/components/Header";
|
||||
import MainComponent from "~/components/Main";
|
||||
import FooterComponent from "~/components/Footer";
|
||||
import BackToTop from "vue-backtotop";
|
||||
import AppButton from "~/components/utilities/AppButton.vue";
|
||||
|
||||
// Alerts
|
||||
import AlertsSuccessPop from "~/components/ui/Alerts/SuccessPop";
|
||||
import AlertsInfoPop from "~/components/ui/Alerts/InfoPop";
|
||||
import AlertsWarningPop from "~/components/ui/Alerts/WarningPop";
|
||||
import AlertsErrorPop from "~/components/ui/Alerts/ErrorPop";
|
||||
import AlertsNotificationPop from "~/components/ui/Alerts/NotificationPop";
|
||||
import AlertsSuccessFullWidth from "~/components/ui/Alerts/SuccessFullWidth";
|
||||
import AlertsInfoFullWidth from "~/components/ui/Alerts/InfoFullWidth";
|
||||
import AlertsWarningFullWidth from "~/components/ui/Alerts/WarningFullWidth";
|
||||
import AlertsErrorFullWidth from "~/components/ui/Alerts/ErrorFullWidth";
|
||||
// Authentication
|
||||
import AuthenticationSimpleLogin from "~/components/ui/Authentication/SimpleLogin";
|
||||
import AuthenticationLoginWithSocailMediaLinks from "~/components/ui/Authentication/LoginWithSocailMediaLinks";
|
||||
import AuthenticationLoginWithSideImage from "~/components/ui/Authentication/LoginWithSideImage";
|
||||
// Buttons
|
||||
import ButtonsPrimary from "~/components/ui/Buttons/Primary";
|
||||
import ButtonsWithIcon from "~/components/ui/Buttons/WithIcon";
|
||||
import ButtonsWithMenu from "~/components/ui/Buttons/WithMenu";
|
||||
// Cards
|
||||
import CardsArticle from "~/components/ui/Cards/Article";
|
||||
import CardsArticleWithImage from "~/components/ui/Cards/ArticleWithImage";
|
||||
import CardsArticleWithSMIcons from "~/components/ui/Cards/ArticleWithSMIcons";
|
||||
import CardsProduct from "~/components/ui/Cards/Product";
|
||||
import CardsProductWithEvaluation from "~/components/ui/Cards/ProductWithEvaluation";
|
||||
import CardsSimpleProduct from "~/components/ui/Cards/SimpleProduct";
|
||||
import CardsTestimonial from "~/components/ui/Cards/Testimonial";
|
||||
import CardsUser from "~/components/ui/Cards/User";
|
||||
import CardsUserWithDetails from "~/components/ui/Cards/UserWithDetails";
|
||||
// Dropdowns
|
||||
import DropdownsSimple from "~/components/ui/Dropdowns/Simple";
|
||||
import DropdownsNotification from "~/components/ui/Dropdowns/Notification";
|
||||
// Forms
|
||||
import FormsNewsletter from "~/components/ui/Forms/Newsletter";
|
||||
import FormsSimpleNewsletter from "~/components/ui/Forms/SimpleNewsletter";
|
||||
import FormsSimple from "~/components/ui/Forms/Simple";
|
||||
import FormsSearch from "~/components/ui/Forms/Search";
|
||||
import FormsContact from "~/components/ui/Forms/Contact";
|
||||
// Navbars
|
||||
import NavbarsSimple from "~/components/ui/Navbars/Simple";
|
||||
import NavbarsECommerce from "~/components/ui/Navbars/ECommerce";
|
||||
import NavbarsWithAvatar from "~/components/ui/Navbars/WithAvatar";
|
||||
import NavbarsWithSearch from "~/components/ui/Navbars/WithSearch";
|
||||
import NavbarsWithCategories from "~/components/ui/Navbars/WithCategories";
|
||||
import NavbarsWithSocailMediaLinks from "~/components/ui/Navbars/WithSocailMediaLinks";
|
||||
// Heros
|
||||
import HerosECommerce from "~/components/ui/Heros/ECommerce";
|
||||
import HerosWithNewsletterForm from "~/components/ui/Heros/WithNewsletterForm";
|
||||
import HerosWithSlide from "~/components/ui/Heros/WithSlide";
|
||||
import HerosWithImage from "~/components/ui/Heros/WithImage";
|
||||
import HerosWithSideImage from "~/components/ui/Heros/WithSideImage";
|
||||
import HerosWithBGImage from "~/components/ui/Heros/WithBGImage";
|
||||
import HerosWithPattern from "~/components/ui/Heros/WithPattern";
|
||||
// Sidebars
|
||||
import SidebarWithSearch from "~/components/ui/Sidebar/WithSearch";
|
||||
import SidebarWithAvatar from "~/components/ui/Sidebar/WithAvatar";
|
||||
// Sections
|
||||
import SectionsAboutMe from "~/components/ui/Sections/AboutMe";
|
||||
import SectionsFeature from "~/components/ui/Sections/Feature";
|
||||
import SectionsOurTeam from "~/components/ui/Sections/OurTeam";
|
||||
import SectionsParagraphWithImage from "~/components/ui/Sections/ParagraphWithImage";
|
||||
// Pricing
|
||||
import PricingSimple from "~/components/ui//Pricing/Simple";
|
||||
import PricingPopular from "~/components/ui//Pricing/Popular";
|
||||
import PricingWithNavigation from "~/components/ui//Pricing/WithNavigation";
|
||||
// paginations
|
||||
import PaginationSimple from "~/components/ui/Pagination/Simple";
|
||||
// Footers
|
||||
import FootersSimple from "~/components/ui/Footers/Simple";
|
||||
import FootersWithDetails from "~/components/ui/Footers/WithDetails";
|
||||
import FootersWithLinks from "~/components/ui/Footers/WithLinks";
|
||||
import FootersWithSubscribeForm from "~/components/ui/Footers/WithSubscribeForm";
|
||||
|
||||
// Components
|
||||
import Component from "~/models/ComponentsFilter";
|
||||
|
||||
export default {
|
||||
components: { AppButton, HeaderComponent, MainComponent, FooterComponent, BackToTop }
|
||||
components: {
|
||||
AppButton,
|
||||
HeaderComponent,
|
||||
AlertsSuccessPop,
|
||||
AlertsInfoPop,
|
||||
AlertsWarningPop,
|
||||
AlertsErrorPop,
|
||||
AlertsNotificationPop,
|
||||
AlertsSuccessFullWidth,
|
||||
AlertsInfoFullWidth,
|
||||
AlertsWarningFullWidth,
|
||||
AlertsErrorFullWidth,
|
||||
AuthenticationSimpleLogin,
|
||||
AuthenticationLoginWithSocailMediaLinks,
|
||||
AuthenticationLoginWithSideImage,
|
||||
ButtonsPrimary,
|
||||
ButtonsWithIcon,
|
||||
ButtonsWithMenu,
|
||||
CardsArticle,
|
||||
CardsArticleWithImage,
|
||||
CardsArticleWithSMIcons,
|
||||
CardsProduct,
|
||||
CardsProductWithEvaluation,
|
||||
CardsSimpleProduct,
|
||||
CardsTestimonial,
|
||||
CardsUser,
|
||||
CardsUserWithDetails,
|
||||
DropdownsSimple,
|
||||
DropdownsNotification,
|
||||
FormsNewsletter,
|
||||
FormsSimpleNewsletter,
|
||||
FormsSimple,
|
||||
FormsSearch,
|
||||
FormsContact,
|
||||
NavbarsSimple,
|
||||
NavbarsECommerce,
|
||||
NavbarsWithAvatar,
|
||||
NavbarsWithSearch,
|
||||
NavbarsWithSocailMediaLinks,
|
||||
NavbarsWithCategories,
|
||||
HerosECommerce,
|
||||
HerosWithNewsletterForm,
|
||||
HerosWithSlide,
|
||||
HerosWithImage,
|
||||
HerosWithSideImage,
|
||||
HerosWithBGImage,
|
||||
HerosWithPattern,
|
||||
SidebarWithAvatar,
|
||||
SidebarWithSearch,
|
||||
SectionsAboutMe,
|
||||
SectionsFeature,
|
||||
SectionsOurTeam,
|
||||
SectionsParagraphWithImage,
|
||||
PricingSimple,
|
||||
PricingPopular,
|
||||
PricingWithNavigation,
|
||||
PaginationSimple,
|
||||
FootersSimple,
|
||||
FootersWithDetails,
|
||||
FootersWithLinks,
|
||||
FootersWithSubscribeForm,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
components_count: 58,
|
||||
categories: [],
|
||||
activeCategory: "Alerts",
|
||||
component: new Component(),
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.categories = this.component.all();
|
||||
},
|
||||
|
||||
computed: {
|
||||
list() {
|
||||
return this.component.whereCategory(this.activeCategory);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
117
pages/resources.vue
Normal file
117
pages/resources.vue
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
<template>
|
||||
<div>
|
||||
<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 dark:text-white">
|
||||
Resources 👌
|
||||
</h1>
|
||||
|
||||
<p class="mt-4 text-gray-600 md:text-xl">
|
||||
We are using many design resources on building
|
||||
<a href="/components" 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="https://unsplash.com/" class="relative flex overflow-hidden bg-gray-900 h-80 xl:h-64 rounded-2xl">
|
||||
<img class="object-cover" src="~/assets/images/twitter-large-card.jpg" alt="unsplash">
|
||||
</a>
|
||||
|
||||
<p class="mt-6 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("https://tailwindcss.com/_next/static/media/heroicons-bg.fdbaa28ae8446332a61619794c459a77.svg");">
|
||||
<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>
|
||||
|
||||
<p class="mt-6 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>
|
||||
|
||||
<p class="mt-6 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://www.heropatterns.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>
|
||||
|
||||
<p class="mt-6 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://unsplash.com/" 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="unsplash">
|
||||
</a>
|
||||
|
||||
<p class="mt-6 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.423c2dda15c11c6803adf4cf5297505e.jpg" alt="unsplash">
|
||||
</a>
|
||||
|
||||
<p class="mt-6 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>
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
const colors = require('tailwindcss/colors');
|
||||
|
||||
module.exports = {
|
||||
purge: [
|
||||
'./components/**/*.{vue,js}',
|
||||
|
|
@ -9,6 +11,9 @@ module.exports = {
|
|||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
teal: colors.teal,
|
||||
},
|
||||
fontFamily: {
|
||||
roboto: ["Roboto"],
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in a new issue