Add sign-in and registration category

src/components/categories/Forms.vue

@@ -4,23 +4,17 @@
 
         <simple></simple>
         <newsletter></newsletter>
-        <sign-in></sign-in>
-        <sign-in-with-image></sign-in-with-image>
     </div>
 </template>
 
 <script>
 import Simple from "../ui/Forms/Simple";
 import Newsletter from "../ui/Forms/Newsletter";
-import SignIn from "../ui/Forms/SignIn";
-import SignInWithImage from "../ui/Forms/SignInWithImage";
 
 export default {
     components: { 
         Simple,
         Newsletter,
-        SignIn,
-        SignInWithImage
     },
 };
 </script>

src/components/categories/Sign-inAndRegistration.vue

@@ -0,0 +1,20 @@
+<template>
+    <div class="w-full max-w-5xl mx-auto my-10">
+        <h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Sign-in and Registration</h1>
+
+        <simple-card></simple-card>
+        <with-side-image></with-side-image>
+    </div>
+</template>
+
+<script>
+import SimpleCard from "../ui/Sign-inAndRegistration/SimpleCard";
+import WithSideImage from "../ui/Sign-inAndRegistration/WithSideImage";
+
+export default {
+    components: { 
+        SimpleCard,
+        WithSideImage
+    },
+};
+</script>

src/components/ui/Sign-inAndRegistration/SimpleCard.vue

@@ -42,7 +42,7 @@
     export default {
         data() {
             return {
-                name: 'Sign In',
+                name: 'Simple Card',
                 code: `
         <div class="bg-white w-full max-w-sm rounded-lg shadow-md overflow-hidden mx-auto">
             <div class="py-4 px-6">

src/components/ui/Sign-inAndRegistration/WithSideImage.vue

@@ -67,7 +67,7 @@
     export default {
         data() {
             return {
-                name: 'Sign In With Image',
+                name: 'With Side Image',
                 code: `
         <div class="flex max-w-sm mx-auto bg-white rounded-lg shadow-lg overflow-hidden lg:max-w-4xl">
             <div class="hidden lg:block lg:w-1/2 bg-cover" style="background-image:url('https://images.unsplash.com/photo-1546514714-df0ccc50d7bf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=667&q=80')"></div>

src/router.js

@@ -6,6 +6,7 @@ const Forms = () => import("./components/categories/Forms");
 const Navbars = () => import("./components/categories/Navbars");
 const Heros = () => import("./components/categories/Heros");
 const Sections = () => import("./components/categories/Sections");
+const SignInAndRegistration = () => import("./components/categories/Sign-inAndRegistration");
 const Paginations = () => import("./components/categories/Paginations");
 const Footers = () => import("./components/categories/Footers");
 
@@ -19,6 +20,7 @@ export default new VueRouter({
         { path: "/navbars", component: Navbars, name: "Navbars" },
         { path: "/heros", component: Heros, name: "Heros" },
         { path: "/sections", component: Sections, name: "Sections" },
+        { path: "/sign-in-and-registration", component: SignInAndRegistration, name: "Sign-in and Registration" },
         { path: "/paginations", component: Paginations, name: "Paginations" },
         { path: "/footers", component: Footers, name: "Footers" },
     ],