add all heroes components
This commit is contained in:
khatabwedaa
parent
4b6fdee0ab
commit
b1fa3f3906
|
|
@ -31,13 +31,13 @@ export default [
|
|||
{name: 'Sign In Form With Image'},
|
||||
],
|
||||
},
|
||||
// {
|
||||
// name: 'Heroes',
|
||||
// components: [
|
||||
// { name: 'Hero With Pattern' },
|
||||
// { name: 'Hero With Image' },
|
||||
// ],
|
||||
// },
|
||||
{
|
||||
name: 'Heroes',
|
||||
components: [
|
||||
{ name: 'Hero With Image' },
|
||||
{ name: 'Hero With Pattern' },
|
||||
],
|
||||
},
|
||||
// {
|
||||
// name: 'Navigation',
|
||||
// components: [
|
||||
|
|
|
|||
|
|
@ -8,8 +8,7 @@
|
|||
<input class="w-full bg-white mt-6 px-6 py-4 border border-gray-300 text-gray-800 rounded-lg focus:outline-none focus:bg-gray-100 placeholder-gray-700"
|
||||
type="text" placeholder="Search.." v-model="searchText">
|
||||
</div>
|
||||
<div class="flex flex-col md:flex-row items-center justify-start mt-5 ">
|
||||
<span class="text-gray-700">Categories : </span>
|
||||
<div class="flex items-center justify-center mt-5 ">
|
||||
<div class="mt-2 md:mt-0">
|
||||
<button @click="searchText = ''"
|
||||
class="ml-1 px-3 py-1 cursor-pointer hover:bg-gray-700 hover:text-gray-200 rounded text-sm focus:outline-none"
|
||||
|
|
@ -42,40 +41,62 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
// Alerts
|
||||
import SuccessAlert from "./UI/Alert/SuccessAlert";
|
||||
import InfoAlert from "./UI/Alert/InfoAlert";
|
||||
import WarningAlert from "./UI/Alert/WarningAlert";
|
||||
import ErrorAlert from "./UI/Alert/ErrorAlert";
|
||||
import NotificationPop from "./UI/Alert/NotificationPop";
|
||||
import Alert from "./UI/Alert/Alert";
|
||||
import UserDetails from "./UI/Cards/UserDetails";
|
||||
import Testimonial from "./UI/Cards/Testimonial";
|
||||
// Cards
|
||||
import ArticleCard from "./UI/Cards/ArticleCard";
|
||||
import ArticleCardWithImage from "./UI/Cards/ArticleCardWithImage";
|
||||
import Product from "./UI/Cards/Product";
|
||||
import ProductEvaluation from "./UI/Cards/ProductWithEvaluation";
|
||||
import MultiColumnForm from "./UI/Forms/MultiColumnForm";
|
||||
import CasualForm from "./UI/Forms/CasualForm";
|
||||
import Login from "./UI/Forms/Login";
|
||||
import Subscribe from "./UI/Forms/Subscribe";
|
||||
import ProductCard from "./UI/Cards/ProductCard";
|
||||
import ProductCardWithEvaluation from "./UI/Cards/ProductCardWithEvaluation";
|
||||
import TestimonialCard from "./UI/Cards/TestimonialCard";
|
||||
import UserCard from "./UI/Cards/UserCard";
|
||||
import UserCardWithDetails from "./UI/Cards/UserCardWithDetails";
|
||||
// Forms
|
||||
import InputsForm from "./UI/Forms/InputsForm";
|
||||
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";
|
||||
|
||||
// import NavbarWithSearch from "./UI/Navigation/NavbarWithSearch";
|
||||
// import FooterWithSubscribeForm from "./UI/Navigation/FooterWithSubscribeForm";
|
||||
// import SimplePagination from "./UI/Paginations/SimplePagination";
|
||||
// import ParagraphWithImage from "./UI/Sections/ParagraphWithImage";
|
||||
|
||||
import Component from "../Models/Component";
|
||||
import ViewComponent from "./Utilities/ViewComponent";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SuccessAlert,
|
||||
InfoAlert,
|
||||
WarningAlert,
|
||||
ErrorAlert,
|
||||
NotificationPop,
|
||||
Alert,
|
||||
UserDetails,
|
||||
Testimonial,
|
||||
|
||||
ArticleCard,
|
||||
ArticleCardWithImage,
|
||||
Product,
|
||||
ProductEvaluation,
|
||||
MultiColumnForm,
|
||||
CasualForm,
|
||||
Login,
|
||||
Subscribe,
|
||||
ProductCard,
|
||||
ProductCardWithEvaluation,
|
||||
TestimonialCard,
|
||||
UserCard,
|
||||
UserCardWithDetails,
|
||||
|
||||
InputsForm,
|
||||
NewsletterForm,
|
||||
SignInForm,
|
||||
SignInFormWithImage,
|
||||
|
||||
HeroWithImage,
|
||||
HeroWithPattern,
|
||||
ViewComponent
|
||||
|
||||
ViewComponent,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
85
src/components/UI/Heroes/HeroWithImage.vue
Normal file
85
src/components/UI/Heroes/HeroWithImage.vue
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
<template>
|
||||
<div :id="name | toId">
|
||||
<div class="w-full">
|
||||
<nav class="bg-white">
|
||||
<div class="container mx-auto px-6 py-2">
|
||||
<div class="md:flex items-center justify-between">
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="text-2xl font-bold text-gray-800 hover:text-gray-700 md:text-3xl">
|
||||
<a href="#">Brand</a>
|
||||
</div>
|
||||
|
||||
<div class="md:hidden">
|
||||
<button type="button"
|
||||
class="block text-gray-700 hover:text-gray-600 focus:text-gray-600 focus:outline-none">
|
||||
<svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
|
||||
<path
|
||||
d="M16.24 14.83a1 1 0 0 1-1.41 1.41L12 13.41l-2.83 2.83a1 1 0 0 1-1.41-1.41L10.59 12 7.76 9.17a1 1 0 0 1 1.41-1.41L12 10.59l2.83-2.83a1 1 0 0 1 1.41 1.41L13.41 12l2.83 2.83z"
|
||||
class="hidden"></path>
|
||||
<path
|
||||
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 -mx-2 md:flex-row hidden md:block">
|
||||
<a href="#"
|
||||
class="text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium py-2 px-2 md:mx-2">Home</a>
|
||||
<a href="#"
|
||||
class="text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium py-2 px-2 md:mx-2">About</a>
|
||||
<a href="#"
|
||||
class="text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium py-2 px-2 md:mx-2">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="bg-white relative">
|
||||
<div class="container mx-auto px-6">
|
||||
<div class="flex h-96">
|
||||
<div class="flex items-center lg:w-1/2">
|
||||
<div class="absolute left-0 mx-6 max-w-md">
|
||||
<h2 class="text-2xl font-semibold text-gray-800 md:text-3xl">
|
||||
Build Your New <span class="text-indigo-600">Idea</span>
|
||||
</h2>
|
||||
|
||||
<p class="mt-2 text-sm text-gray-500 md:text-base">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis commodi cum cupiditate ducimus, fugit harum id necessitatibus odio quam quasi, quibusdam rem tempora voluptates.
|
||||
</p>
|
||||
|
||||
<div class="flex mt-6">
|
||||
<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 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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="absolute h-96 hidden lg:right-0 lg:block lg:w-1/2" style="clip-path: polygon(10% 0px, 100% 0%, 100% 100%, 0px 100%);">
|
||||
<div class="h-full bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1508394522741-82ac9c15ba69?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=748&q=80');">
|
||||
<div class="h-full bg-black opacity-25"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
name: 'Hero With Image',
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,42 +1,44 @@
|
|||
<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 flex-col md:flex-row text-gray-100">
|
||||
<a href="#" class="text-2xl font-semibold">Brand</a>
|
||||
<div class="flex items-center -mx-2 mt-2 md:mt-0">
|
||||
<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 class="pattern bg-gray-900">
|
||||
<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 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 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>
|
||||
<div class="flex items-center flex-col md:flex-row mt-12 pb-12">
|
||||
|
||||
<div class="flex items-center flex-col py-6 md:py-0 md:flex-row md:h-96">
|
||||
<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 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">
|
||||
<input class="w-full py-2 px-4 bg-gray-100 border border-gray-300 rounded focus:outline-none focus:bg-white" type="email" placeholder="Email address">
|
||||
<input class="w-full mt-4 py-2 px-4 bg-gray-100 border border-gray-300 rounded focus:outline-none focus:bg-white" 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>
|
||||
<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>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@
|
|||
</div>
|
||||
|
||||
<div class="flex justify-center items-center p-3 sm:p-6">
|
||||
<div class="w-full relative" :dir="rtl? 'rtl' : 'ltr'">
|
||||
<div class="w-full" :dir="rtl? 'rtl' : 'ltr'">
|
||||
<slot class="w-full h-full absolute top-0 left-0" name="component"></slot>
|
||||
<transition name="fade">
|
||||
<div v-if="copied">
|
||||
|
|
|
|||
Loading…
Reference in a new issue