mirror of
https://github.com/bakateam/merakiui.git
synced 2025-12-08 22:53:24 +00:00
Add new header & fix with image button
This commit is contained in:
khatabwedaa
130
components/ui/Heros/CenterContent.vue
Normal file
130
components/ui/Heros/CenterContent.vue
Normal file
@@ -0,0 +1,130 @@
|
||||
<template>
|
||||
<view-component :name="name" :code="code" :playUrl="'https://play.tailwindcss.com/8xusXYyo5R'">
|
||||
<div class="py-6" slot="component">
|
||||
<section class="bg-white dark:bg-gray-800">
|
||||
<nav class="container p-6 mx-auto lg:flex lg:justify-between lg:items-center">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="flex lg:hidden">
|
||||
<button @click="isOpen = !isOpen" type="button"
|
||||
class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600"
|
||||
aria-label="toggle menu">
|
||||
<svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
|
||||
<path fill-rule="evenodd"
|
||||
d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z">
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div :class="isOpen ? 'flex' : 'hidden lg:flex'" class="flex-col mt-4 space-y-2 lg:mt-0 lg:flex-row lg:space-x-16 lg:space-y-0">
|
||||
<a class="text-gray-700 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
|
||||
href="#">Home</a>
|
||||
<a class="text-gray-700 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
|
||||
href="#">Components</a>
|
||||
<a class="text-gray-700 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
|
||||
href="#">Pricing</a>
|
||||
<a class="text-gray-700 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
|
||||
href="#">Contact</a>
|
||||
</div>
|
||||
|
||||
<a :class="isOpen ? 'block' : 'hidden lg:block'" class="px-5 py-2 mt-4 font-medium leading-5 text-center text-white capitalize bg-blue-600 rounded-lg lg:mt-0 hover:bg-blue-500 lg:w-auto"
|
||||
href="#">
|
||||
Get started
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="container px-6 py-16 mx-auto text-center">
|
||||
<div class="max-w-lg mx-auto">
|
||||
<h1 class="text-3xl font-bold text-gray-800 dark:text-white md:text-4xl">Building Your Next App with our Awesome components</h1>
|
||||
<p class="mt-6 text-gray-500 dark:text-gray-300">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero similique
|
||||
obcaecati illum mollitia.</p>
|
||||
<button
|
||||
class="px-6 py-2 mt-6 text-sm font-medium leading-5 text-center text-white capitalize bg-blue-600 rounded-lg hover:bg-blue-500 md:mx-0 md:w-auto focus:outline-none">
|
||||
Start 14-Day free trial
|
||||
</button>
|
||||
<p class="mt-3 text-sm text-gray-400 ">No credit card required</p>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center mt-10">
|
||||
<div class="w-full h-64 bg-blue-600 rounded-xl md:w-4/5"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</view-component>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Center Content',
|
||||
isOpen: false,
|
||||
code: `
|
||||
<section class="bg-white dark:bg-gray-800">
|
||||
<nav class="container p-6 mx-auto lg:flex lg:justify-between lg:items-center">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<a class="text-2xl font-bold text-gray-800 dark:text-white lg:text-3xl hover:text-gray-700 dark:hover:text-gray-300" href="#">Brand</a>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<div class="flex lg:hidden">
|
||||
<button type="button"
|
||||
class="text-gray-500 hover:text-gray-600 focus:outline-none focus:text-gray-600"
|
||||
aria-label="toggle menu">
|
||||
<svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
|
||||
<path fill-rule="evenodd"
|
||||
d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z">
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu open: "block", Menu closed: "hidden" -->
|
||||
<div class="flex flex-col mt-4 space-y-2 lg:mt-0 lg:flex-row lg:space-x-16 lg:space-y-0">
|
||||
<a class="text-gray-700 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
|
||||
href="#">Home</a>
|
||||
<a class="text-gray-700 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
|
||||
href="#">Components</a>
|
||||
<a class="text-gray-700 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
|
||||
href="#">Pricing</a>
|
||||
<a class="text-gray-700 dark:text-gray-200 dark:hover:text-blue-400 hover:text-blue-500"
|
||||
href="#">Contact</a>
|
||||
</div>
|
||||
|
||||
<a class="block px-5 py-2 mt-4 font-medium leading-5 text-center text-white capitalize bg-blue-600 rounded-lg lg:mt-0 hover:bg-blue-500 lg:w-auto"
|
||||
href="#">
|
||||
Get started
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
<div class="container px-6 py-16 mx-auto text-center">
|
||||
<div class="max-w-lg mx-auto">
|
||||
<h1 class="text-3xl font-bold text-gray-800 dark:text-white md:text-4xl">Building Your Next App with our Awesome components</h1>
|
||||
<p class="mt-6 text-gray-500 dark:text-gray-300">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Libero similique
|
||||
obcaecati illum mollitia.</p>
|
||||
<button
|
||||
class="px-6 py-2 mt-6 text-sm font-medium leading-5 text-center text-white capitalize bg-blue-600 rounded-lg hover:bg-blue-500 md:mx-0 md:w-auto focus:outline-none">
|
||||
Start 14-Day free trial
|
||||
</button>
|
||||
<p class="mt-3 text-sm text-gray-400 ">No credit card required</p>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center mt-10">
|
||||
<div class="w-full h-64 bg-blue-600 rounded-xl md:w-4/5"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>`,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -27,7 +27,7 @@
|
||||
<a class="block font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Why us?</a>
|
||||
<a class="block font-medium text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-400 hover:underline" href="#">Contact</a>
|
||||
|
||||
<button class="flex items-center px-5 py-2 text-sm font-medium tracking-wide text-center text-white capitalize transition-colors duration-200 transform bg-gray-700 rounded-lg hover:bg-gray-600 focus:outline-none focus:bg-gray-600">
|
||||
<button class="flex items-center justify-center px-5 py-2 text-sm font-medium tracking-wide text-center text-white capitalize transition-colors duration-200 transform bg-gray-700 rounded-lg hover:bg-gray-600 focus:outline-none focus:bg-gray-600">
|
||||
Get in touch
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -94,7 +94,7 @@
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Products',
|
||||
name: 'Products With Side Links',
|
||||
code: `
|
||||
<section class="bg-white dark:bg-gray-900">
|
||||
<div class="container px-6 py-8 mx-auto">
|
||||
@@ -80,6 +80,7 @@ export default [
|
||||
components: [
|
||||
{ name: "ECommerce" },
|
||||
{ name: "WithNewsletterForm" },
|
||||
{ name: "CenterContent" },
|
||||
{ name: "WithSlide" },
|
||||
{ name: "WithImage" },
|
||||
{ name: "WithSideImage" },
|
||||
@@ -96,7 +97,7 @@ export default [
|
||||
components: [
|
||||
{ name: "AboutMe" },
|
||||
{ name: "Feature" },
|
||||
{ name: "Products" },
|
||||
{ name: "ProductsWithSideLinks" },
|
||||
{ name: "OurTeam" },
|
||||
{ name: "ParagraphWithImage" },
|
||||
],
|
||||
|
||||
@@ -160,6 +160,7 @@ import NavbarsWithSocialMediaLinks from "~/components/ui/Navbars/WithSocialMedia
|
||||
// Heros
|
||||
import HerosECommerce from "~/components/ui/Heros/ECommerce";
|
||||
import HerosWithNewsletterForm from "~/components/ui/Heros/WithNewsletterForm";
|
||||
import HerosCenterContent from "~/components/ui/Heros/CenterContent";
|
||||
import HerosWithSlide from "~/components/ui/Heros/WithSlide";
|
||||
import HerosWithImage from "~/components/ui/Heros/WithImage";
|
||||
import HerosWithSideImage from "~/components/ui/Heros/WithSideImage";
|
||||
@@ -171,7 +172,7 @@ import SidebarWithAvatar from "~/components/ui/Sidebar/WithAvatar";
|
||||
// Sections
|
||||
import SectionsAboutMe from "~/components/ui/Sections/AboutMe";
|
||||
import SectionsFeature from "~/components/ui/Sections/Feature";
|
||||
import SectionsProducts from "~/components/ui/Sections/Products";
|
||||
import SectionsProductsWithSideLinks from "~/components/ui/Sections/ProductsWithSideLinks";
|
||||
import SectionsOurTeam from "~/components/ui/Sections/OurTeam";
|
||||
import SectionsParagraphWithImage from "~/components/ui/Sections/ParagraphWithImage";
|
||||
// Pricing
|
||||
@@ -236,6 +237,7 @@ export default {
|
||||
NavbarsWithCategories,
|
||||
HerosECommerce,
|
||||
HerosWithNewsletterForm,
|
||||
HerosCenterContent,
|
||||
HerosWithSlide,
|
||||
HerosWithImage,
|
||||
HerosWithSideImage,
|
||||
@@ -245,7 +247,7 @@ export default {
|
||||
SidebarWithSearch,
|
||||
SectionsAboutMe,
|
||||
SectionsFeature,
|
||||
SectionsProducts,
|
||||
SectionsProductsWithSideLinks,
|
||||
SectionsOurTeam,
|
||||
SectionsParagraphWithImage,
|
||||
PricingSimple,
|
||||
|
||||
Reference in New Issue
Block a user