From b1fa3f39060076f77a8db6a612ca7a34da4808ae Mon Sep 17 00:00:00 2001
From: khatabwedaa <khatabwedaa@gmail.com>
Date: Thu, 7 May 2020 15:41:41 +0200
Subject: [PATCH] add all heroes components

---
 src/Models/data.js                           | 14 ++--
 src/components/Master.vue                    | 63 ++++++++++-----
 src/components/UI/Heroes/HeroWithImage.vue   | 85 ++++++++++++++++++++
 src/components/UI/Heroes/HeroWithPattern.vue | 42 +++++-----
 src/components/Utilities/ViewComponent.vue   |  2 +-
 5 files changed, 157 insertions(+), 49 deletions(-)
 create mode 100644 src/components/UI/Heroes/HeroWithImage.vue

diff --git a/src/Models/data.js b/src/Models/data.js
index 2a39fbf..d2ca85a 100644
--- a/src/Models/data.js
+++ b/src/Models/data.js
@@ -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: [
diff --git a/src/components/Master.vue b/src/components/Master.vue
index 615f757..7029591 100644
--- a/src/components/Master.vue
+++ b/src/components/Master.vue
@@ -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 {
diff --git a/src/components/UI/Heroes/HeroWithImage.vue b/src/components/UI/Heroes/HeroWithImage.vue
new file mode 100644
index 0000000..1deb874
--- /dev/null
+++ b/src/components/UI/Heroes/HeroWithImage.vue
@@ -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>
\ No newline at end of file
diff --git a/src/components/UI/Heroes/HeroWithPattern.vue b/src/components/UI/Heroes/HeroWithPattern.vue
index 5ea2309..d381f7f 100644
--- a/src/components/UI/Heroes/HeroWithPattern.vue
+++ b/src/components/UI/Heroes/HeroWithPattern.vue
@@ -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>
diff --git a/src/components/Utilities/ViewComponent.vue b/src/components/Utilities/ViewComponent.vue
index 0a4f047..e3ff918 100644
--- a/src/components/Utilities/ViewComponent.vue
+++ b/src/components/Utilities/ViewComponent.vue
@@ -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">