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

Merge branch 'master' of github.com:merakiui/website

Browse Source
This commit is contained in:
khatabwedaa
2020-05-08 17:09:55 +02:00
parent bd8257f768 bf27cbe581
commit 0679117112
16 changed files with 118 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
LICENSE Normal file
View File

@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2020 Meraki UI
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

2
README.md
View File

@@ -1,4 +1,4 @@
# docs
# Meraki UI website
## Project setup
```

60
src/Models/data.js
View File

@@ -2,47 +2,53 @@ export default [
{
name: 'Alert',
components: [
{ name: 'Success Alert' },
{ name: 'Info Alert' },
{ name: 'Warning Alert' },
{ name: 'Error Alert' },
{ name: 'Notification Pop' },
{ name: 'Success alert' },
{ name: 'Info alert' },
{ name: 'Warning alert' },
{ name: 'Error alert' },
{ name: 'Notification pop' },
],
},
{
name: 'Cards',
components: [
{ name: 'Article Card' },
{ name: 'Article Card With Image' },
{ name: 'Product Card' },
{ name: 'Product Card With Evaluation' },
{ name: 'Testimonial Card' },
{ name: 'User Card' },
{ name: 'User Card With Details' },
{ name: 'Article card' },
{ name: 'Article card with image' },
{ name: 'Product card' },
{ name: 'Product card with evaluation' },
{ name: 'Testimonial card' },
{ name: 'User card' },
{ name: 'User card with details' },
],
},
{
name: 'Forms',
components: [
{name: 'Inputs Form'},
{name: 'Newsletter Form'},
{name: 'Sign In Form'},
{name: 'Sign In Form With Image'},
{name: 'Newsletter form'},
{name: 'Sign in form'},
{name: 'Sign in form with image'},
],
},
{
name: 'Heroes',
components: [
{ name: 'Hero With Image' },
{ name: 'Hero With Pattern' },
],
},
{
name: 'Navbars',
name: 'Navbars',
components: [
{ name: 'Navbar' },
{ name: 'Navbar With Search' },
{ name: 'Navbar with search' },
]
},
{
name: 'Headers',
components: [
{ name: 'Header with image' },
{ name: 'Header with pattern' },
],
},
{
name: 'Sections',
components: [
{ name: 'Paragraph with image' },
]
},
{
@@ -51,4 +57,10 @@ export default [
{ name: 'Pagination' },
]
},
{
name: 'Footers',
components: [
{ name: 'Footer with subscribe form' },
]
},
];

23
src/components/Master.vue
View File

@@ -23,7 +23,7 @@
</div>
</div>
</div>
<p class="mt-8 text-gray-700">Heroes components require simple(Don't panic please😘) <a class="text-blue-600 hover:underline" href="https://gist.github.com/Miaababikir/052e31b345781c0f73180b80a285781b" target="_blank">configuration</a></p>
<p class="mt-8 text-gray-700">Header components require simple(Don't panic please😘) <a class="text-blue-600 hover:underline" href="https://gist.github.com/Miaababikir/052e31b345781c0f73180b80a285781b" target="_blank">configuration</a></p>
</div>
<div class="w-full max-w-5xl mx-auto">
@@ -61,14 +61,19 @@
import NewsletterForm from "./UI/Forms/NewsletterForm";
import SignInForm from "./UI/Forms/SignInForm";
import SignInFormWithImage from "./UI/Forms/SignInFormWithImage";
// Heroes
import HeroWithImage from "./UI/Heroes/HeroWithImage";
import HeroWithPattern from "./UI/Heroes/HeroWithPattern";
// Header
import HeaderWithImage from "./UI/Header/HeaderWithImage";
import HeaderWithPattern from "./UI/Header/HeaderWithPattern";
// Navbars
import Navbar from "./UI/Navbars/Navbar";
import NavbarWithSearch from "./UI/Navbars/NavbarWithSearch";
// Paginations
// Sections
import ParagraphWithImage from "./UI/Sections/ParagraphWithImage";
// Pagination
import Pagination from "./UI/Paginations/Pagination";
// Footers
import FooterWithSubscribeForm from "./UI/Footers/FooterWithSubscribeForm";
import Component from "../Models/Component";
@@ -95,14 +100,18 @@
SignInForm,
SignInFormWithImage,
HeroWithImage,
HeroWithPattern,
HeaderWithImage,
HeaderWithPattern,
Navbar,
NavbarWithSearch,
ParagraphWithImage,
Pagination,
FooterWithSubscribeForm,
ViewComponent,
},
data() {

12
src/components/UI/Cards/ArticleCard.vue
View File

@@ -7,7 +7,7 @@
</div>
<div class="mt-2">
<a class="text-2xl text-gray-700 font-bold hover:text-gray-600 hover:underline">Accessibility tools for
<a href="#" class="text-2xl text-gray-700 font-bold hover:text-gray-600 hover:underline">Accessibility tools for
designers and developers</a>
<p class="mt-2 text-gray-600">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora expedita
dicta totam aspernatur doloremque. Excepturi iste iusto eos enim reprehenderit nisi, accusamus
@@ -15,15 +15,13 @@
</div>
<div class="flex justify-between items-center mt-4">
<a class="text-blue-600 hover:underline">Read more</a>
<div>
<a class="flex items-center">
<a href="#" class="text-blue-600 hover:underline">Read more</a>
<div class="flex items-center">
<img class="mx-4 w-10 h-10 object-cover rounded-full hidden sm:block"
src="https://images.unsplash.com/photo-1502980426475-b83966705988?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=40&q=80"
alt="avatar">
<h1 class="text-gray-700 font-bold">Khatab wedaa</h1>
</a>
</div>
<a class="text-gray-700 font-bold cursor-pointer">Khatab wedaa</a>
</div>
</div>
</div>
</div>

9
src/components/UI/Cards/ArticleCardWithImage.vue
View File

@@ -9,18 +9,17 @@
<div class="p-6">
<div>
<span class="text-blue-600 text-xs font-medium uppercase">Product</span>
<a class="block text-gray-800 font-semibold text-2xl mt-2 hover:text-gray-600 hover:underline">I Built A Successful Blog In One Year</a>
<a href="#" class="block text-gray-800 font-semibold text-2xl mt-2 hover:text-gray-600 hover:underline">I Built A Successful Blog In One Year</a>
<p class="text-sm text-gray-600 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Molestie parturient et sem ipsum volutpat vel. Natoque sem et aliquam mauris egestas quam volutpat viverra. In pretium nec senectus erat. Et malesuada lobortis.</p>
</div>
<div class="mt-4">
<div class="flex items-center">
<a class="flex items-center">
<div class="flex items-center">
<img class="h-10 h-10 object-cover rounded-full" src="https://images.unsplash.com/photo-1586287011575-a23134f797f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=48&q=60"
alt="Avatar">
<span class="mx-2 text-gray-700 font-semibold">Jone Doe</span>
</a>
<a href="#" class="mx-2 text-gray-700 font-semibold">Jone Doe</a>
</div>
<span class="mx-1 text-gray-600 text-xs">21 SEP 2015</span>
</div>
</div>

4
src/components/UI/Cards/TestimonialCard.vue
View File

@@ -7,14 +7,14 @@
</div>
<div>
<h2 class="text-gray-800 text-3xl font-semibold">Design Tools</h2>
<h2 class="text-gray-800 text-2xl mt-2 md:mt-0 md:text-3xl font-semibold">Design Tools</h2>
<p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolores
deserunt ea doloremque natus error, rerum quas odio quaerat nam ex commodi hic, suscipit in a
veritatis pariatur minus consequuntur!</p>
</div>
<div class="flex justify-end mt-4">
<a class="text-xl font-medium text-indigo-500">John Doe</a>
<a href="#" class="text-xl font-medium text-indigo-500">John Doe</a>
</div>
</div>
</div>

2
src/components/UI/Cards/UserCard.vue
View File

@@ -4,7 +4,7 @@
<img class="w-full h-56 object-cover" src="https://images.unsplash.com/photo-1542156822-6924d1a71ace?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="avatar">
<div class="py-5 text-center">
<a class="block text-2xl text-gray-800 font-bold">John Doe</a>
<a href="#" class="block text-2xl text-gray-800 font-bold">John Doe</a>
<span class="text-sm text-gray-700">Software Engineer</span>
</div>
</div>

4
src/components/UI/Forms/SignInForm.vue
View File

@@ -14,7 +14,7 @@
<input class="w-full mt-2 py-2 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white" type="password" placeholder="Password">
</div>
<div class="flex justify-between items-center mt-6">
<a class="text-gray-600 text-sm hover:text-gray-500">Forget Password?</a>
<a href="#" class="text-gray-600 text-sm hover:text-gray-500">Forget Password?</a>
<button class="py-2 px-4 bg-gray-700 text-white rounded hover:bg-gray-600 focus:outline-none" type="button">
Login
</button>
@@ -24,7 +24,7 @@
<div class="flex items-center justify-center py-4 bg-gray-100 text-center">
<h1 class="text-gray-600 text-sm">Dont`t have an account? </h1>
<a class="text-blue-600 font-bold mx-2 text-sm hover:text-blue-500">Register</a>
<a href="#" class="text-blue-600 font-bold mx-2 text-sm hover:text-blue-500">Register</a>
</div>
</div>
</div>

8
src/components/UI/Forms/SignInFormWithImage.vue
View File

@@ -6,7 +6,7 @@
<div class="w-full p-8 lg:w-1/2">
<h2 class="text-2xl font-semibold text-gray-700 text-center">Brand</h2>
<p class="text-xl text-gray-600 text-center">Welcome back!</p>
<a class="flex items-center justify-center mt-4 text-white rounded-lg shadow-md hover:bg-gray-100">
<a href="#" class="flex items-center justify-center mt-4 text-white rounded-lg shadow-md hover:bg-gray-100">
<div class="px-4 py-3">
<svg class="h-6 w-6" viewBox="0 0 40 40">
<path d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.045 27.2142 24.3525 30 20 30C14.4775 30 10 25.5225 10 20C10 14.4775 14.4775 9.99999 20 9.99999C22.5492 9.99999 24.8683 10.9617 26.6342 12.5325L31.3483 7.81833C28.3717 5.04416 24.39 3.33333 20 3.33333C10.7958 3.33333 3.33335 10.7958 3.33335 20C3.33335 29.2042 10.7958 36.6667 20 36.6667C29.2042 36.6667 36.6667 29.2042 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z"
@@ -24,7 +24,7 @@
<div class="mt-4 flex items-center justify-between">
<span class="border-b w-1/5 lg:w-1/4"></span>
<a class="text-xs text-center text-gray-500 uppercase hover:underline">or login with email</a>
<a href="#" class="text-xs text-center text-gray-500 uppercase hover:underline">or login with email</a>
<span class="border-b w-1/5 lg:w-1/4"></span>
</div>
@@ -37,7 +37,7 @@
<div class="mt-4">
<div class="flex justify-between">
<label class="block text-gray-700 text-sm font-bold mb-2">Password</label>
<a class="text-xs text-gray-500 hover:underline">Forget Password?</a>
<a href="#" class="text-xs text-gray-500 hover:underline">Forget Password?</a>
</div>
<input class="bg-gray-200 text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full appearance-none focus:outline-none focus:bg-white"
type="password">
@@ -50,7 +50,7 @@
<div class="mt-4 flex items-center justify-between">
<span class="border-b w-1/5 md:w-1/4"></span>
<a class="text-xs text-gray-500 uppercase hover:underline">or sign up</a>
<a href="#" class="text-xs text-gray-500 uppercase hover:underline">or sign up</a>
<span class="border-b w-1/5 md:w-1/4"></span>
</div>
</div>

14
src/components/UI/Heroes/HeroWithImage.vue → src/components/UI/Header/HeaderWithImage.vue
View File

@@ -6,7 +6,7 @@
<div class="md:flex items-center justify-between">
<div class="flex justify-between items-center">
<div>
<a class="text-xl font-bold text-gray-800 hover:text-gray-700 md:text-2xl">Brand</a>
<a href="#" class="text-xl font-bold text-gray-800 hover:text-gray-700 md:text-2xl">Brand</a>
</div>
<div class="md:hidden">
@@ -25,9 +25,9 @@
</div>
<div :class="!isOpen ? 'hidden' : ''" class="flex flex-col -mx-2 mt-2 md:mt-0 md:flex-row md:block">
<a class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
<a class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
<a class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
<a href="#" class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
<a href="#" class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
<a href="#" class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
</div>
</div>
</div>
@@ -47,11 +47,11 @@
</p>
<div class="flex mt-6">
<a class="px-3 py-2 block bg-gray-900 text-gray-200 text-xs font-semibold rounded hover:bg-gray-800">
<a href="#" class="px-3 py-2 block bg-gray-900 text-gray-200 text-xs font-semibold rounded hover:bg-gray-800">
Get Started
</a>
<a class="mx-4 px-3 py-2 block bg-gray-300 text-gray-900 text-xs font-semibold rounded hover:bg-gray-400">
<a href="#" class="mx-4 px-3 py-2 block bg-gray-300 text-gray-900 text-xs font-semibold rounded hover:bg-gray-400">
Learn More
</a>
</div>
@@ -74,7 +74,7 @@
export default {
data() {
return {
name: 'Hero With Image',
name: 'Header With Image',
isOpen: false,
}
}

10
src/components/UI/Heroes/HeroWithPattern.vue → src/components/UI/Header/HeaderWithPattern.vue
View File

@@ -4,12 +4,12 @@
<div class="container mx-auto px-6">
<nav class="flex flex-col py-2 sm:flex-row sm:justify-between sm:items-center">
<div>
<a class="text-2xl font-semibold text-white hover:text-gray-300">Brand</a>
<a href="#" class="text-2xl font-semibold text-white hover:text-gray-300">Brand</a>
</div>
<div class="flex items-center -mx-2 mt-2 sm:mt-0">
<a class="px-3 py-1 border-2 font-semibold rounded text-sm text-white hover:bg-gray-700">Sign In</a>
<a class="mx-2 px-3 py-2 font-semibold bg-black rounded text-sm text-white hover:bg-gray-800">Sign Up</a>
<a href="#" class="px-3 py-1 border-2 font-semibold rounded text-sm text-white hover:bg-gray-700">Sign In</a>
<a href="#" class="mx-2 px-3 py-2 font-semibold bg-black rounded text-sm text-white hover:bg-gray-800">Sign Up</a>
</div>
</nav>
@@ -34,7 +34,7 @@
</div>
<div class="mt-4 flex items-center justify-between">
<a class="text-gray-600 text-sm hover:underline">Forget Password?</a>
<a href="#" class="text-gray-600 text-sm hover:underline">Forget Password?</a>
<button class="px-4 py-2 font-semibold bg-gray-900 rounded text-white hover:bg-gray-800">Login</button>
</div>
@@ -52,7 +52,7 @@
export default {
data() {
return {
name: 'Hero With Pattern'
name: 'Header With Pattern'
}
}
}

8
src/components/UI/Navbars/Navbar.vue
View File

@@ -5,7 +5,7 @@
<div class="md:flex justify-between items-center">
<div class="flex justify-between items-center">
<div>
<a class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a>
<a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a>
</div>
<div class="md:hidden">
@@ -18,9 +18,9 @@
</div>
<div :class="!isOpen ? 'hidden' : ''" class="flex flex-col mt-3 md:flex-row md:mt-0 md:block">
<a class="text-gray-800 text-sm hover:font-medium md:mx-4">Home</a>
<a class="text-gray-800 text-sm hover:font-medium md:mx-4">Contact</a>
<a class="text-gray-800 text-sm hover:font-medium md:mx-4">About Us</a>
<a href="#" class="text-gray-800 text-sm hover:font-medium md:mx-4">Home</a>
<a href="#" class="text-gray-800 text-sm hover:font-medium md:mx-4">Contact</a>
<a href="#" class="text-gray-800 text-sm hover:font-medium md:mx-4">About Us</a>
</div>
</div>
</div>

8
src/components/UI/Navbars/NavbarWithSearch.vue
View File

@@ -4,7 +4,7 @@
<div class="container mx-auto px-6 py-3 md:flex">
<div class="flex justify-between items-center">
<div>
<a class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a>
<a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a>
</div>
<div class="md:hidden">
@@ -18,9 +18,9 @@
<div :class="!isOpen ? 'hidden' : ''" class="w-full md:flex md:items-center md:justify-between md:block">
<div class="flex flex-col -mx-4 px-2 py-3 md:flex-row md:mx-0 md:py-0">
<a class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
<a class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
<a class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
<a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
<a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
<a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
</div>
<div>

10
src/components/UI/Paginations/Pagination.vue
View File

@@ -3,21 +3,21 @@
<div :id="name | toId">
<ul class="flex">
<li class="mx-1 px-3 py-2 bg-gray-200 text-gray-500 rounded-lg">
<a class="flex items-center font-bold">
<a href="#" class="flex items-center font-bold cursor-not-allowed">
<span class="mx-1">previous</span>
</a>
</li>
<li class="mx-1 px-3 py-2 bg-gray-200 text-gray-700 hover:bg-gray-700 hover:text-gray-200 rounded-lg">
<a class="font-bold">1</a>
<a href="#" class="font-bold">1</a>
</li>
<li class="mx-1 px-3 py-2 bg-gray-200 text-gray-700 hover:bg-gray-700 hover:text-gray-200 rounded-lg">
<a class="font-bold">2</a>
<a href="#" class="font-bold">2</a>
</li>
<li class="mx-1 px-3 py-2 bg-gray-200 text-gray-700 hover:bg-gray-700 hover:text-gray-200 rounded-lg">
<a class="font-bold">3</a>
<a href="#" class="font-bold">3</a>
</li>
<li class="mx-1 px-3 py-2 bg-gray-200 text-gray-700 hover:bg-gray-700 hover:text-gray-200 rounded-lg">
<a class="flex items-center font-bold">
<a href="#" class="flex items-center font-bold">
<span class="mx-1">Next</span>
</a>
</li>

2
src/components/UI/Null/ParagraphWithImage.vue → src/components/UI/Sections/ParagraphWithImage.vue
View File

@@ -10,7 +10,7 @@
<h2 class="text-3xl text-gray-800 font-bold">Build Your New <span class="text-indigo-600">Idea</span></h2>
<p class="mt-4 text-gray-600">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem modi reprehenderit vitae exercitationem aliquid dolores ullam temporibus enim expedita aperiam mollitia iure consectetur dicta tenetur, porro consequuntur saepe accusantium consequatur.</p>
<div class="mt-8">
<a class="bg-gray-900 text-gray-100 px-5 py-3 font-semibold rounded">Start Now</a>
<a href="#" class="bg-gray-900 text-gray-100 px-5 py-3 font-semibold rounded">Start Now</a>
</div>
</div>
</div>