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

Adding hero component

Browse Source
This commit is contained in:
Mosab Ibrahim
2020-05-06 15:03:32 +02:00
parent bb170627de
commit 7b5b10e2aa
5 changed files with 92 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@@ -16,4 +16,4 @@ export default {
}
</script>
<style src="./assets/css/tailwind.css"></style>
<style src="./assets/css/app.css"></style>

44
src/Models/data.js
View File

@@ -1,28 +1,34 @@
export default [
// {
// name: 'Alert',
// components: [
// { name: 'Notification Pop' },
// { name: 'Alert' },
//
// ],
// },
{
name: 'Alert',
components: [
{ name: 'Notification Pop' },
{ name: 'Alert' },
],
},
{
name: 'Heroes',
components: [
{ name: 'Hero With Pattern' },
],
},
{
name: 'Cards',
components: [
{ name: 'Article Card' },
{ name: 'Article Card With Image' },
// { name: 'Product' },
// { name: 'Product Evaluation' },
// { name: 'Testimonial' },
// { name: 'User Details' },
{ name: 'Product' },
{ name: 'Product Evaluation' },
{ name: 'Testimonial' },
{ name: 'User Details' },
],
},
{
name: 'Forms',
components: [
{name: 'Login'},
{name: 'Subscribe'},
],
},
// {
// name: 'Forms',
// components: [
// {name: 'Login'},
// {name: 'Subscribe'},
// ],
// },
];

5
src/assets/css/app.css Normal file
View File

File diff suppressed because one or more lines are too long

4
src/components/Master.vue
View File

@@ -50,6 +50,9 @@
import ProductEvaluation from "./UI/Cards/ProductWithEvaluation";
import Login from "./UI/Forms/Login";
import Subscribe from "./UI/Forms/Subscribe";
import HeroWithPattern from "./UI/Heroes/HeroWithPattern";
import Component from "../Models/Component";
import ViewComponent from "./Utilities/ViewComponent";
@@ -65,6 +68,7 @@
ProductEvaluation,
Login,
Subscribe,
HeroWithPattern,
ViewComponent
},
data() {

57
src/components/UI/Heroes/HeroWithPattern.vue Normal file
View File

@@ -0,0 +1,57 @@
<template>
<div :id="name | toId">
<div class="w-ful pattern bg-gray-900">
<!--
on the {pattern} class but your pattern background
We are using https://www.heropatterns.com/ give it a try
-->
<div class="px-4 md:px-12 container mx-auto">
<nav class="py-4 flex justify-between items-center text-gray-100">
<a href="#" class="text-2xl font-semibold">Brand</a>
<div class="flex items-center -mx-2">
<a href="#" class="px-4 py-1 border-2 border-white font-semibold rounded">Sign in</a>
<a href="#" class="px-4 py-2 mx-2 font-semibold bg-black rounded">Sign up</a>
</div>
</nav>
<div class="flex items-center flex-col md:flex-row mt-12 pb-12">
<div class="md:w-1/2">
<h1 class="text-4xl font-semibold text-gray-100">Brand</h1>
<p class="text-2xl font-semibold text-gray-100">Hello <span class="text-indigo-400">Guest</span>
</p>
<p class="text-gray-100 mt-3">Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
</div>
<div class="md:w-1/2 flex md:justify-end mt-8 md:mt-0">
<div class="max-w-sm bg-white rounded-lg">
<div class="p-5 text-center">
<h2 class="text-2xl font-semibold text-gray-700 fo">Sign in</h2>
<form action="#">
<div class="mt-4">
<input class="bg-gray-100 px-4 py-2 border border-gray-300 rounded w-full"
type="email" placeholder="Email address">
<input class="bg-gray-100 px-4 py-2 border border-gray-300 rounded w-full mt-3"
type="password" placeholder="Password">
</div>
<div class="mt-4 flex items-center justify-between">
<a href="#" class="text-gray-500 text-sm">Forget Password?</a>
<button class="px-4 py-2 font-semibold bg-black rounded text-gray-100">Login</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
name: 'Hero With Pattern'
}
}
}
</script>