Merge pull request #18 from merakiui/Rebuild-categories-using-vueRoute

Rebuild categories using vue route
2025-12-08 14:43:23 +00:00 · 2020-06-13 13:01:46 +02:00
parent 2db9ba7f29 3b18db736e
commit 7bb69a333e
83 changed files with 2487 additions and 1527 deletions
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,5 +1,4 @@
 module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
-}
+  presets: ["@vue/cli-plugin-babel/preset"],
+  plugins: ["@babel/plugin-syntax-dynamic-import"],
+};
--- a/package.json
+++ b/package.json
@@ -12,13 +12,16 @@
    "core-js": "^3.6.4",
    "highlight.js": "^10.0.2",
    "js-beautify": "^1.11.0",
+    "postcss-import": "^12.0.1",
    "tailwindcss": "^1.4.4",
    "vue": "^2.6.11",
    "vue-analytics": "^5.22.1",
    "vue-backtotop": "^1.6.1",
-    "vue-clipboard2": "^0.3.1"
+    "vue-clipboard2": "^0.3.1",
+    "vue-router": "^3.3.2"
  },
  "devDependencies": {
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
    "@vue/cli-plugin-babel": "^4.3.0",
    "@vue/cli-plugin-eslint": "^4.3.0",
    "@vue/cli-service": "^4.3.0",
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,6 +1,7 @@
 module.exports = {
-    plugins: [
-        require('tailwindcss'),
-        require('autoprefixer'),
-    ]
-}
+  plugins: [
+    require("postcss-import"),
+    require("tailwindcss"),
+    require("autoprefixer"),
+  ],
+};
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,19 +1,59 @@
 <template>
-    <div class="min-h-screen bg-white font-roboto" id="app">
+    <div class="bg-white font-roboto" id="app">
        <Header></Header>

-        <main-component></main-component>
+        <main class="container mx-auto px-6" id="main">
+            <div class="mt-16 text-center">
+                <h1 class="text-xl md:text-3xl text-gray-800 font-medium">Discover new components. Build amazing things 🔥</h1>
+            </div>
+
+            <div class="max-w-2xl mx-auto mt-4">
+                <span class="ml-2" v-for="route in routes" :key="route.path">
+                    <router-link class="inline-block mt-2 px-3 py-1 rounded text-sm  cursor-pointer hover:bg-gray-700 hover:text-gray-200" :class="currentPage == route.path ? 'bg-gray-700 text-gray-200' : 'bg-gray-200 text-gray-700'" :to="route.path">
+                        {{ route.name }}
+                    </router-link>
+                </span>
+
+                <p class="mt-8 text-gray-700 text-center">Headers components require simple <span class="font-semibold">- don't panic please 😎 -</span> <a href="https://gist.github.com/Miaababikir/052e31b345781c0f73180b80a285781b" target="_blank" class="text-blue-600 hover:underline">configuration</a></p>
+            </div>
+
+            <div class="mt-16">
+                <router-view></router-view>
+            </div>
+        </main>
+
+        <back-to-top visibleoffset="800">
+            <button class="bg-gray-800 text-white fixed bottom-0 right-0 my-10 mx-10 p-2 rounded-md focus:outline-none" aria-label="Back to top">
+                <svg class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
+                    <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"/>
+                </svg>
+            </button>
+        </back-to-top>
    </div>
 </template>

 <script>
 import Header from "./components/Header";
-import MainComponent from "./components/Main";
+import BackToTop from 'vue-backtotop';

 export default {
    components: {
-        Header, MainComponent
+        Header,
+        BackToTop
    },
+
+    computed: {
+        currentPage() {
+            return this.$route.path;
+        }
+    },
+
+    data() {
+        return {
+            routes: this.$router.options.routes,
+        };
+    },
+    
    mounted() {
        this.$ga.page('/');
    }
--- a/src/Models/Filter.js
+++ b/src/Models/Filter.js
@@ -1,26 +0,0 @@
-import categories from "./components";
-
-export default class Filter {
-
-    constructor() {
-        this.categories = categories;
-    }
-
-    all() {
-        return this.categories;
-    }
-
-    whereCategory(category) {
-
-        if(this.isEmpty(category)) return this.categories;
-
-        let pattern = new RegExp(`^${category}`, 'i');
-
-        return this.categories.filter(category => category.name.match(pattern));
-    }
-
-    isEmpty(string) {
-        return string.length === 0;
-    }
-
-}
--- a/src/Models/components.js
+++ b/src/Models/components.js
@@ -1,71 +0,0 @@
-export default [
-    {
-        name: 'Alert',
-        components: [
-            { name: 'Success alert' },
-            { name: 'Info alert' },
-            { name: 'Warning alert' },
-            { name: 'Error alert' },
-            { name: 'Notification pop' },
-
-        ],
-    },
-    {
-        name: 'Cards',
-        components: [
-            { name: 'Article card' },
-            { name: 'Article card with image' },
-            { name: 'Simple product card' },
-            { name: 'Product card' },
-            { name: 'Product card with evaluation' },
-            { name: 'Testimonial card' },
-            { name: 'User card' },
-            { name: 'User card with details' },
-        ],
-    },
-    {
-        name: 'Forms',
-        components: [
-            {name: 'Inputs Form'},
-            {name: 'Newsletter form'},
-            {name: 'Sign in form'},
-            {name: 'Sign in form with image'},
-        ],
-    },
-    {
-        name: 'Navbars',
-        components: [
-            { name: 'Navbar' },
-            { name: 'Navbar with search' },
-            { name: 'Navbar with avatar' },
-        ]
-    },
-    {
-        name: 'Headers',
-        components: [
-            { name: 'Header with image' },
-            { name: 'Header with pattern' },
-        ],
-    },
-    {
-        name: 'Sections',
-        components: [
-            { name: 'About me' },
-            { name: 'Cards list' },
-            { name: 'Paragraph with image' },
-        ]
-    },
-    {
-        name: 'Paginations',
-        components: [
-            { name: 'Pagination' },
-        ]
-    },
-    {
-        name: 'Footers',
-        components: [
-            { name: 'Simple Footer' },
-            { name: 'Footer with subscribe form' },
-        ]
-    },
-];
--- a/src/assets/css/app.css
+++ b/src/assets/css/app.css
--- a/src/assets/css/custom-utilities.css
+++ b/src/assets/css/custom-utilities.css
--- a/src/assets/css/tailwind.css
+++ b/src/assets/css/tailwind.css
@@ -1,5 +0,0 @@
-@tailwind base;
-
-@tailwind components;
-
-@tailwind utilities;
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,51 +1,47 @@
 <template>
-<div class="border-b-4 border-blue-500">
-    <div class="py-3 px-6 text-center bg-black text-white font-bold">
-        #BlackLivesMatter ✊🏽 👨🏽‍💻
-    </div>
+    <div class="border-b-4 border-blue-500">
+        <nav class="bg-gray-900">
+            <div class="container mx-auto px-6 py-4">
+                <div class="flex justify-between items-center">
+                    <a href="/" class="text-white text-xl font-bold md:text-2xl inline-flex items-center hover:text-blue-400">
+                        <img class="h-10 w-10 mr-1" src="../assets/svg/logo.svg" alt="logo">
+                        Meraki <span class="text-blue-400">UI</span>
+                    </a>

-    <nav class="bg-gray-900">
-        <div class="container mx-auto px-6 py-4">
-            <div class="flex justify-between items-center">
-                <a href="/" class="text-white text-xl font-bold md:text-2xl inline-flex items-center hover:text-blue-400">
-                    <img class="h-10 w-10 mr-1" src="../assets/svg/logo.svg" alt="logo">
-                    Meraki <span class="text-blue-400">UI</span>
-                </a>
-
-                <a class="text-white text-sm font-normal hover:text-blue-400" href="https://github.com/merakiui" target="_blank" aria-label="Github link">
-                    <svg class="h-6 w-6 inline fill-current" viewBox="0 0 30 30">
-                        <path d="M15 1.875C7.75195 1.875 1.875 7.9043 1.875 15.334C1.875 21.2812 5.63672 26.3203 10.8516 28.1016C10.9247 28.1175 10.9994 28.1253 11.0742 28.125C11.5605 28.125 11.748 27.7676 11.748 27.457C11.748 27.1348 11.7363 26.291 11.7305 25.166C11.2963 25.2678 10.8522 25.3209 10.4062 25.3242C7.88086 25.3242 7.30664 23.3613 7.30664 23.3613C6.70898 21.8086 5.84766 21.3926 5.84766 21.3926C4.70508 20.5898 5.8418 20.5664 5.92969 20.5664H5.93555C7.25391 20.6836 7.94531 21.9609 7.94531 21.9609C8.60156 23.1094 9.48047 23.4316 10.2656 23.4316C10.7848 23.4213 11.2959 23.3015 11.7656 23.0801C11.8828 22.2129 12.2227 21.6211 12.5977 21.2812C9.68555 20.9414 6.62109 19.7871 6.62109 14.6309C6.62109 13.1602 7.13086 11.959 7.96875 11.0215C7.83398 10.6816 7.38281 9.31055 8.09766 7.45898C8.19354 7.43604 8.29209 7.42619 8.39062 7.42969C8.86523 7.42969 9.9375 7.61133 11.707 8.8418C13.8572 8.24022 16.1311 8.24022 18.2812 8.8418C20.0508 7.61133 21.123 7.42969 21.5977 7.42969C21.6962 7.42619 21.7947 7.43604 21.8906 7.45898C22.6055 9.31055 22.1543 10.6816 22.0195 11.0215C22.8574 11.9648 23.3672 13.166 23.3672 14.6309C23.3672 19.7988 20.2969 20.9355 17.373 21.2695C17.8418 21.6855 18.2637 22.5059 18.2637 23.7598C18.2637 25.5586 18.2461 27.0117 18.2461 27.4512C18.2461 27.7676 18.4277 28.125 18.9141 28.125C18.9928 28.1253 19.0713 28.1175 19.1484 28.1016C24.3691 26.3203 28.125 21.2754 28.125 15.334C28.125 7.9043 22.248 1.875 15 1.875Z"/>
-                    </svg>
-                </a>
-            </div>
-        </div>
-    </nav>
-
-    <div class="bg-gray-900">
-        <div class="container mx-auto px-6">
-            <div class="md:flex md:h-96 py-16 md:py-0">
-                <div class="flex items-center w-full w-1/2">
-                    <div class="max-w-sm text-white">
-                        <div class="text-xs font-light">Simple UI Starter</div>
-
-                        <h1 class="font-semibold text-2xl mt-2 text-white md:text-3xl">Meraki <span class="text-blue-400">UI </span> Components</h1>
-                        
-                        <p class="mt-2 text-gray-300">
-                            Beautiful <a href="https://tailwindcss.com" class="text-blue-400 hover:underline font-normal">tailwindcss</a> 
-                            components that support RTL languages & fully responsive based on Flexbox & CSS Grid, built by 
-                            <a href="https://twitter.com/khatabwedaa" class="text-blue-400 hover:underline">@khatabwedaa</a> &
-                            <a href="https://twitter.com/miaababikir" class="text-blue-400 hover:underline">@miaababikir</a>
-                        </p>
-                    </div>
+                    <a class="text-white text-sm font-normal hover:text-blue-400" href="https://github.com/merakiui/website" target="_blank" aria-label="Github link">
+                        <svg class="h-6 w-6 inline fill-current" viewBox="0 0 30 30">
+                            <path d="M15 1.875C7.75195 1.875 1.875 7.9043 1.875 15.334C1.875 21.2812 5.63672 26.3203 10.8516 28.1016C10.9247 28.1175 10.9994 28.1253 11.0742 28.125C11.5605 28.125 11.748 27.7676 11.748 27.457C11.748 27.1348 11.7363 26.291 11.7305 25.166C11.2963 25.2678 10.8522 25.3209 10.4062 25.3242C7.88086 25.3242 7.30664 23.3613 7.30664 23.3613C6.70898 21.8086 5.84766 21.3926 5.84766 21.3926C4.70508 20.5898 5.8418 20.5664 5.92969 20.5664H5.93555C7.25391 20.6836 7.94531 21.9609 7.94531 21.9609C8.60156 23.1094 9.48047 23.4316 10.2656 23.4316C10.7848 23.4213 11.2959 23.3015 11.7656 23.0801C11.8828 22.2129 12.2227 21.6211 12.5977 21.2812C9.68555 20.9414 6.62109 19.7871 6.62109 14.6309C6.62109 13.1602 7.13086 11.959 7.96875 11.0215C7.83398 10.6816 7.38281 9.31055 8.09766 7.45898C8.19354 7.43604 8.29209 7.42619 8.39062 7.42969C8.86523 7.42969 9.9375 7.61133 11.707 8.8418C13.8572 8.24022 16.1311 8.24022 18.2812 8.8418C20.0508 7.61133 21.123 7.42969 21.5977 7.42969C21.6962 7.42619 21.7947 7.43604 21.8906 7.45898C22.6055 9.31055 22.1543 10.6816 22.0195 11.0215C22.8574 11.9648 23.3672 13.166 23.3672 14.6309C23.3672 19.7988 20.2969 20.9355 17.373 21.2695C17.8418 21.6855 18.2637 22.5059 18.2637 23.7598C18.2637 25.5586 18.2461 27.0117 18.2461 27.4512C18.2461 27.7676 18.4277 28.125 18.9141 28.125C18.9928 28.1253 19.0713 28.1175 19.1484 28.1016C24.3691 26.3203 28.125 21.2754 28.125 15.334C28.125 7.9043 22.248 1.875 15 1.875Z"/>
+                        </svg>
+                    </a>
                </div>
-                
-                <div class="hidden justify-end items-end w-full w-1/2 md:flex">
-                    <div class="max-w-md">
-                        <img src="../assets/svg/undraw_moonlight_5ksn.svg" alt="moon">
+            </div>
+        </nav>
+
+        <div class="bg-gray-900">
+            <div class="container mx-auto px-6">
+                <div class="md:flex md:h-96 py-16 md:py-0">
+                    <div class="flex items-center w-full w-1/2">
+                        <div class="max-w-sm text-white">
+                            <div class="text-xs font-light">Simple UI Starter</div>
+
+                            <h1 class="font-semibold text-2xl mt-2 text-white md:text-3xl">Meraki <span class="text-blue-400">UI </span> Components</h1>
+                            
+                            <p class="mt-2 text-gray-300">
+                                Beautiful <a href="https://tailwindcss.com" class="text-blue-400 hover:underline font-normal">tailwindcss</a> 
+                                components that support RTL languages & fully responsive based on Flexbox & CSS Grid, built by 
+                                <a href="https://twitter.com/khatabwedaa" class="text-blue-400 hover:underline">@khatabwedaa</a> &
+                                <a href="https://twitter.com/miaababikir" class="text-blue-400 hover:underline">@miaababikir</a>
+                            </p>
+                        </div>
+                    </div>
+                    
+                    <div class="hidden justify-end items-end w-full w-1/2 md:flex">
+                        <div class="max-w-md">
+                            <img src="../assets/svg/undraw_moonlight_5ksn.svg" alt="moon">
+                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
-</div>
 </template>
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -27,116 +27,5 @@
                </view-component>
            </div>
        </div>
-
-        <back-to-top visibleoffset="800">
-            <button class="bg-gray-800 text-white fixed bottom-0 right-0 my-10 mx-10 p-2 rounded-md focus:outline-none" aria-label="Back to top">
-                <svg class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
-                    <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"/>
-                </svg>
-            </button>
-        </back-to-top>
    </div>
-</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";
-// Cards
-import ArticleCard from "./UI/Cards/ArticleCard";
-import ArticleCardWithImage from "./UI/Cards/ArticleCardWithImage";
-import SimpleProductCard from "./UI/Cards/SimpleProductCard";
-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";
-// Header
-import HeaderWithImage from "./UI/Header/HeaderWithImage";
-import HeaderWithPattern from "./UI/Header/HeaderWithPattern";
-// Navbars
-import Navbar from "./UI/Navbars/Navbar";
-import NavbarWithSearch from "./UI/Navbars/NavbarWithSearch";
-import NavbarWithAvatar from "./UI/Navbars/NavbarWithAvatar";
-// Sections
-import AboutMe from "./UI/Sections/AboutMe";
-import CardsList from "./UI/Sections/CardsList";
-import ParagraphWithImage from "./UI/Sections/ParagraphWithImage";
-// Pagination
-import Pagination from "./UI/Paginations/Pagination";
-// Footers
-import SimpleFooter from "./UI/Footers/SimpleFooter";
-import FooterWithSubscribeForm from "./UI/Footers/FooterWithSubscribeForm";
-
-import BackToTop from 'vue-backtotop';
-import Filter from "../Models/Filter";
-import ViewComponent from "./Utilities/ViewComponent";
-
-export default {
-    components: {
-        SuccessAlert,
-        InfoAlert,
-        WarningAlert,
-        ErrorAlert,
-        NotificationPop,
-
-        ArticleCard,
-        ArticleCardWithImage,
-        SimpleProductCard,
-        ProductCard,
-        ProductCardWithEvaluation,
-        TestimonialCard,
-        UserCard,
-        UserCardWithDetails,
-
-        InputsForm,
-        NewsletterForm,
-        SignInForm,
-        SignInFormWithImage,
-
-        HeaderWithImage,
-        HeaderWithPattern,
-
-        Navbar,
-        NavbarWithSearch,
-        NavbarWithAvatar,
-
-        AboutMe,
-        CardsList,
-        ParagraphWithImage,
-
-        Pagination,
-
-        SimpleFooter,
-        FooterWithSubscribeForm,
-
-        BackToTop,
-        ViewComponent,
-    },
-    data() {
-        return {
-            category: 'Alert',
-            categories: [],
-            component: new Filter(),
-        }
-    },
-    
-    created() {
-        this.categories = this.component.all();
-    },
-
-    computed: {
-        list() {
-            return this.component.whereCategory(this.category);
-        },
-    },
-}
-</script>
+</template>
--- a/src/components/UI/Alert/ErrorAlert.vue
+++ b/src/components/UI/Alert/ErrorAlert.vue
@@ -1,28 +0,0 @@
-<template>
-    <div class="px-3" :id="name | toId">
-        <div class="flex max-w-sm mx-auto bg-white rounded-lg overflow-hidden">
-            <div class="flex justify-center items-center w-12 bg-red-500">
-                <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M20 3.36667C10.8167 3.36667 3.3667 10.8167 3.3667 20C3.3667 29.1833 10.8167 36.6333 20 36.6333C29.1834 36.6333 36.6334 29.1833 36.6334 20C36.6334 10.8167 29.1834 3.36667 20 3.36667ZM19.1334 33.3333V22.9H13.3334L21.6667 6.66667V17.1H27.25L19.1334 33.3333Z"/>
-                </svg>
-            </div>
-            
-            <div class="-mx-3 py-2 px-4">
-                <div class="mx-3">
-                    <span class="text-red-500 font-semibold">Error</span>
-                    <p class="text-gray-600 text-sm">Your email is already used!</p>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data() {
-            return {
-                name: 'Error Alert',
-            }
-        }
-    }
-</script>
--- a/src/components/UI/Alert/InfoAlert.vue
+++ b/src/components/UI/Alert/InfoAlert.vue
@@ -1,28 +0,0 @@
-<template>
-    <div class="px-3" :id="name | toId">
-        <div class="flex max-w-sm mx-auto bg-white rounded-lg overflow-hidden">
-            <div class="flex justify-center items-center w-12 bg-blue-500">
-                 <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"/>
-                </svg>
-            </div>
-            
-            <div class="-mx-3 py-2 px-4">
-                <div class="mx-3">
-                    <span class="text-blue-500 font-semibold">Info</span>
-                    <p class="text-gray-600 text-sm">This channel archived by owner !</p>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data() {
-            return {
-                name: 'Info Alert',
-            }
-        }
-    }
-</script>
--- a/src/components/UI/Alert/NotificationPop.vue
+++ b/src/components/UI/Alert/NotificationPop.vue
@@ -1,24 +0,0 @@
-<template>
-    <div class="px-3" :id="name | toId">
-        <div class="flex max-w-sm bg-white shadow-lg rounded-lg overflow-hidden mx-auto">
-            <div class="w-2 bg-gray-800"></div>
-            <div class="flex items-center px-2 py-3">
-                <img class="w-10 h-10 object-cover rounded-full" alt="User avatar" src="https://images.unsplash.com/photo-1477118476589-bff2c5c4cfbb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=200">
-                
-                <div class="mx-3">
-                    <p class="text-gray-600">Sara was replied on the <a class="text-blue-500 hover:text-blue-400 hover:underline">upload image</a>.</p>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data() {
-            return {
-                name: 'Notification Pop',
-            }
-        },
-    }
-</script>
--- a/src/components/UI/Alert/SuccessAlert.vue
+++ b/src/components/UI/Alert/SuccessAlert.vue
@@ -1,28 +0,0 @@
-<template>
-    <div class="px-3" :id="name | toId">
-        <div class="flex max-w-sm mx-auto bg-white rounded-lg overflow-hidden">
-            <div class="flex justify-center items-center w-12 bg-green-500">
-                 <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM16.6667 28.3333L8.33337 20L10.6834 17.65L16.6667 23.6166L29.3167 10.9666L31.6667 13.3333L16.6667 28.3333Z"/>
-                </svg>
-            </div>
-            
-            <div class="-mx-3 py-2 px-4">
-                <div class="mx-3">
-                    <span class="text-green-500 font-semibold">Success</span>
-                    <p class="text-gray-600 text-sm">Your account was registered!</p>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data() {
-            return {
-                name: 'Success Alert',
-            }
-        }
-    }
-</script>
--- a/src/components/UI/Alert/WarningAlert.vue
+++ b/src/components/UI/Alert/WarningAlert.vue
@@ -1,28 +0,0 @@
-<template>
-    <div class="px-3" :id="name | toId">
-        <div class="flex max-w-sm mx-auto bg-white rounded-lg overflow-hidden">
-            <div class="flex justify-center items-center w-12 bg-yellow-500">
-                 <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"/>
-                </svg>
-            </div>
-            
-            <div class="-mx-3 py-2 px-4">
-                <div class="mx-3">
-                    <span class="text-yellow-500 font-semibold">Warning</span>
-                    <p class="text-gray-600 text-sm">Your image size is to large !</p>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data() {
-            return {
-                name: 'Warning Alert',
-            }
-        }
-    }
-</script>
--- a/src/components/UI/Cards/ArticleCard.vue
+++ b/src/components/UI/Cards/ArticleCard.vue
@@ -1,38 +0,0 @@
-<template>
-    <div class="px-3" :id="name | toId">
-        <div class="max-w-2xl mx-auto px-8 py-4 bg-white rounded-lg shadow-md">
-            <div class="flex justify-between items-center">
-                <span class="font-light text-gray-600 text-sm">Mar 10, 2019</span>
-                <a class="px-3 py-1 bg-gray-600 text-gray-100 text-sm font-bold rounded hover:bg-gray-500">Design</a>
-            </div>
-
-            <div class="mt-2">
-                <a href="#" class="text-2xl text-gray-700 font-bold hover:text-gray-600 hover:underline">Accessibility tools for
-                    designers and developers</a>
-                <p class="mt-2 text-gray-600">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora expedita
-                    dicta totam aspernatur doloremque. Excepturi iste iusto eos enim reprehenderit nisi, accusamus
-                    delectus nihil quis facere in modi ratione libero!</p>
-            </div>
-            
-            <div class="flex justify-between items-center mt-4">
-                <a href="#" class="text-blue-600 hover:underline">Read more</a>
-                    <div class="flex items-center">
-                        <img class="mx-4 w-10 h-10 object-cover rounded-full hidden sm:block"
-                             src="https://images.unsplash.com/photo-1502980426475-b83966705988?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=40&q=80"
-                             alt="avatar">
-                        <a class="text-gray-700 font-bold cursor-pointer">Khatab wedaa</a>
-                    </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data() {
-            return {
-                name: 'Article Card',
-            }
-        }
-    }
-</script>
--- a/src/components/UI/Cards/ArticleCardWithImage.vue
+++ b/src/components/UI/Cards/ArticleCardWithImage.vue
@@ -1,39 +0,0 @@
-<template>
-    <div class="px-3" :id="name | toId">
-        <div class="max-w-2xl mx-auto bg-white overflow-hidden shadow-md rounded-lg">
-            <div>
-                <img class="w-full h-64 object-cover" src="https://images.unsplash.com/photo-1550439062-609e1531270e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
-                     alt="Article">
-            </div>
-
-            <div class="p-6">
-                <div>
-                    <span class="text-blue-600 text-xs font-medium uppercase">Product</span>
-                    <a href="#" class="block text-gray-800 font-semibold text-2xl mt-2 hover:text-gray-600 hover:underline">I Built A Successful Blog In One Year</a>
-                    <p class="text-sm text-gray-600 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Molestie parturient et sem ipsum volutpat vel. Natoque sem et aliquam mauris egestas quam volutpat viverra. In pretium nec senectus erat. Et malesuada lobortis.</p>
-                </div>
-
-                <div class="mt-4">
-                    <div class="flex items-center">
-                        <div class="flex items-center">
-                            <img class="h-10 h-10 object-cover rounded-full" src="https://images.unsplash.com/photo-1586287011575-a23134f797f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=48&q=60"
-                                alt="Avatar">
-                            <a href="#" class="mx-2 text-gray-700 font-semibold">Jone Doe</a>
-                        </div>
-                        <span class="mx-1 text-gray-600 text-xs">21 SEP 2015</span>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data() {
-            return {
-                name: 'Article Card With Image'
-            }
-        }
-    }
-</script>
--- a/src/components/UI/Cards/ProductCard.vue
+++ b/src/components/UI/Cards/ProductCard.vue
@@ -1,29 +0,0 @@
-<template>
-    <div class="px-3" :id="name | toId">
-        <div class="max-w-xs mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
-            <div class="px-4 py-2">
-                <h1 class="text-gray-900 font-bold text-3xl uppercase">NIKE AIR</h1>
-                <p class="text-gray-600 text-sm mt-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quos quidem sequi illum facere recusandae voluptatibus</p>
-            </div>
-
-            <img class="h-48 w-full object-cover mt-2"
-                 src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=320&q=80"
-                 alt="NIKE AIR">
-
-            <div class="flex items-center justify-between px-4 py-2 bg-gray-900">
-                <h1 class="text-gray-200 font-bold text-lg">$129</h1>
-                <button class="px-2 py-1 bg-gray-200 text-xs text-gray-900 font-semibold rounded uppercase hover:bg-gray-400 focus:bg-gray-400">Add to cart</button>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data() {
-            return {
-                name: 'Product Card',
-            }
-        }
-    }
-</script>
--- a/src/components/UI/Cards/ProductCardWithEvaluation.vue
+++ b/src/components/UI/Cards/ProductCardWithEvaluation.vue
@@ -1,45 +0,0 @@
-<template>
-    <div class="px-3" :id="name | toId">
-        <div class="flex max-w-md mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
-            <div class="w-1/3 bg-cover"
-                    style="background-image: url('https://images.unsplash.com/photo-1494726161322-5360d4d0eeae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80')"></div>
-
-            <div class="w-2/3 p-4 md:p-4">
-                <h1 class="text-gray-900 font-bold text-2xl">Backpack</h1>
-                <p class="mt-2 text-gray-600 text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit In odit</p>
-                <div class="flex item-center mt-2">
-                    <svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
-                        <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
-                    </svg>
-                    <svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
-                        <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
-                    </svg>
-                    <svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
-                        <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
-                    </svg>
-                    <svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
-                        <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
-                    </svg>
-                    <svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
-                        <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
-                    </svg>
-                </div>
-                <div class="flex item-center justify-between mt-3">
-                    <h1 class="text-gray-700 font-bold text-lg md:text-xl">$220</h1>
-                    <button class="px-2 py-1 bg-gray-800 text-white text-xs font-bold uppercase rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">Add to Cart</button>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-
-    export default {
-        data() {
-            return {
-                name: 'Product Card With Evaluation',
-            }
-        }
-    }
-</script>
--- a/src/components/UI/Cards/SimpleProductCard.vue
+++ b/src/components/UI/Cards/SimpleProductCard.vue
@@ -1,26 +0,0 @@
-<template>
-    <div class="px-3" :id="name | toId">
-        <div class="flex flex-col justify-center items-center max-w-sm mx-auto">
-            <div style="background-image: url(https://images.unsplash.com/photo-1539185441755-769473a23570?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80"
-                    class="bg-gray-300 h-64 w-full rounded-lg shadow-md bg-cover bg-center">
-            </div>
-            <div class="w-56 md:w-64 bg-white -mt-10 shadow-lg rounded-lg overflow-hidden">
-                <div class="py-2 text-center font-bold uppercase tracking-wide text-gray-800">Nike Revolt</div>
-                <div class="flex items-center justify-between py-2 px-3 bg-gray-200">
-                    <h1 class="text-gray-800 font-bold ">$129</h1>
-                    <button class=" bg-gray-800 text-xs text-white px-2 py-1 font-semibold rounded uppercase hover:bg-gray-700">Add to cart</button>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data() {
-            return {
-                name: 'Simple Product Card',
-            }
-        }
-    }
-</script>
--- a/src/components/UI/Cards/TestimonialCard.vue
+++ b/src/components/UI/Cards/TestimonialCard.vue
@@ -1,32 +0,0 @@
-<template>
-    <div class="px-3 my-16" :id="name | toId">
-        <div class="max-w-md mx-auto py-4 px-8 bg-white shadow-lg rounded-lg">
-            <div class="flex justify-center md:justify-end -mt-16">
-                <img class="w-20 h-20 object-cover rounded-full border-2 border-indigo-500"
-                     alt="Testimonial avatar"
-                     src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=76&q=80">
-            </div>
-
-            <div>
-                <h2 class="text-gray-800 text-2xl mt-2 md:mt-0 md:text-3xl font-semibold">Design Tools</h2>
-                <p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolores
-                    deserunt ea doloremque natus error, rerum quas odio quaerat nam ex commodi hic, suscipit in a
-                    veritatis pariatur minus consequuntur!</p>
-            </div>
-            
-            <div class="flex justify-end mt-4">
-                <a href="#" class="text-xl font-medium text-indigo-500">John Doe</a>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data() {
-            return {
-                name: 'Testimonial Card',
-            }
-        }
-    }
-</script>
--- a/src/components/UI/Cards/UserCard.vue
+++ b/src/components/UI/Cards/UserCard.vue
@@ -1,22 +0,0 @@
-<template>
-    <div class="px-3" :id="name | toId">
-        <div class="max-w-xs bg-white shadow-lg rounded-lg overflow-hidden mx-auto">
-            <img class="w-full h-56 object-cover" src="https://images.unsplash.com/photo-1542156822-6924d1a71ace?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="avatar">
-            
-            <div class="py-5 text-center">
-                <a href="#" class="block text-2xl text-gray-800 font-bold">John Doe</a>
-                <span class="text-sm text-gray-700">Software Engineer</span>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data() {
-            return {
-                name: 'User Card',
-            }
-        }
-    }
-</script>
--- a/src/components/UI/Cards/UserCardWithDetails.vue
+++ b/src/components/UI/Cards/UserCardWithDetails.vue
@@ -1,50 +0,0 @@
-<template>
-    <div class="px-3" :id="name | toId">
-        <div class="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
-            <img class="w-full h-56 object-cover object-center" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
-            <div class="flex items-center px-6 py-3 bg-gray-900">
-                <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M17 21C15.8954 21 15 20.1046 15 19V15C15 13.8954 15.8954 13 17 13H19V12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12V13H7C8.10457 13 9 13.8954 9 15V19C9 20.1046 8.10457 21 7 21H3V12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12V21H17ZM19 15H17V19H19V15ZM7 15H5V19H7V15Z"/>
-                </svg>
-
-                <h1 class="mx-3 text-white font-semibold text-lg">Focusing</h1>
-            </div>
-            <div class="py-4 px-6">
-                <h1 class="text-xl font-semibold text-gray-800">Patterson johnson</h1>
-                <p class="py-2 text-gray-700">Full Stack maker & UI / UX Designer , love hip hop music Author of Building UI.</p>
-                <div class="flex items-center mt-4 text-gray-700">
-                    <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M14 11H10V13H14V11Z"/>
-                        <path fill-rule="evenodd" clip-rule="evenodd" d="M7 5V4C7 2.89545 7.89539 2 9 2H15C16.1046 2 17 2.89545 17 4V5H20C21.6569 5 23 6.34314 23 8V18C23 19.6569 21.6569 21 20 21H4C2.34314 21 1 19.6569 1 18V8C1 6.34314 2.34314 5 4 5H7ZM9 4H15V5H9V4ZM4 7C3.44775 7 3 7.44769 3 8V14H21V8C21 7.44769 20.5522 7 20 7H4ZM3 18V16H21V18C21 18.5523 20.5522 19 20 19H4C3.44775 19 3 18.5523 3 18Z"/>
-                    </svg>
-
-                    <h1 class="px-2 text-sm">Meraki UI</h1>
-                </div>
-                <div class="flex items-center mt-4 text-gray-700">
-                    <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path fill-rule="evenodd" clip-rule="evenodd" d="M16.2721 10.2721C16.2721 12.4813 14.4813 14.2721 12.2721 14.2721C10.063 14.2721 8.27214 12.4813 8.27214 10.2721C8.27214 8.063 10.063 6.27214 12.2721 6.27214C14.4813 6.27214 16.2721 8.063 16.2721 10.2721ZM14.2721 10.2721C14.2721 11.3767 13.3767 12.2721 12.2721 12.2721C11.1676 12.2721 10.2721 11.3767 10.2721 10.2721C10.2721 9.16757 11.1676 8.27214 12.2721 8.27214C13.3767 8.27214 14.2721 9.16757 14.2721 10.2721Z"/>
-                        <path fill-rule="evenodd" clip-rule="evenodd" d="M5.79417 16.5183C2.19424 13.0909 2.05438 7.3941 5.48178 3.79418C8.90918 0.194258 14.6059 0.0543983 18.2059 3.48179C21.8058 6.90919 21.9457 12.606 18.5183 16.2059L12.3124 22.7241L5.79417 16.5183ZM17.0698 14.8268L12.243 19.8965L7.17324 15.0698C4.3733 12.404 4.26452 7.9732 6.93028 5.17326C9.59603 2.37332 14.0268 2.26454 16.8268 4.93029C19.6267 7.59604 19.7355 12.0269 17.0698 14.8268Z"/>
-                    </svg>
-
-                    <h1 class="px-2 text-sm">California</h1>
-                </div>
-                <div class="flex items-center mt-4 text-gray-700">
-                    <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path fill-rule="evenodd" clip-rule="evenodd" d="M3.00977 5.83789C3.00977 5.28561 3.45748 4.83789 4.00977 4.83789H20C20.5523 4.83789 21 5.28561 21 5.83789V17.1621C21 18.2667 20.1046 19.1621 19 19.1621H5C3.89543 19.1621 3 18.2667 3 17.1621V6.16211C3 6.11449 3.00333 6.06765 3.00977 6.0218V5.83789ZM5 8.06165V17.1621H19V8.06199L14.1215 12.9405C12.9499 14.1121 11.0504 14.1121 9.87885 12.9405L5 8.06165ZM6.57232 6.80554H17.428L12.7073 11.5263C12.3168 11.9168 11.6836 11.9168 11.2931 11.5263L6.57232 6.80554Z"/>
-                    </svg>
-                    <h1 class="px-2 text-sm">patterson@example.com</h1>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            name: 'User Card With Details',
-        }
-    }
-}
-</script>
--- a/src/components/UI/Footers/FooterWithSubscribeForm.vue
+++ b/src/components/UI/Footers/FooterWithSubscribeForm.vue
@@ -1,46 +0,0 @@
-<template>
-    <div :id="name | toId">
-        <footer class="flex justify-center px-4 text-gray-100 bg-gray-800">
-            <div class="container py-6">
-                <h1 class="text-center text-lg font-bold lg:text-2xl">
-                    Join 31,000+ other and never miss <br> out on new tips, tutorials, and more.
-                </h1>
-
-                <div class="flex justify-center mt-6">
-                    <div class="bg-white rounded-md">
-                        <div class="flex flex-wrap justify-between md:flex-row">
-                            <input type="email" class="m-1 p-2 appearance-none text-gray-700 text-sm focus:outline-none focus:placeholder-white" placeholder="Enter your email" aria-label="Enter your email">
-                            <button class="w-full m-1 p-2 text-sm bg-gray-800 rounded font-semibold uppercase lg:w-auto hover:bg-gray-700">subscribe</button>
-                        </div>
-                    </div>
-                </div>
-
-                <hr class="h-px mt-6 bg-gray-700 border-none">
-
-                <div class="flex flex-col items-center justify-between mt-6 md:flex-row">
-                    <div>
-                        <a href="#" class="text-xl font-bold">Brand</a>
-                    </div>
-                    <div class="flex mt-4 md:m-0">
-                        <div class="-mx-4">
-                        <a href="#" class="px-4 text-sm">About</a>
-                        <a href="#" class="px-4 text-sm">Blog</a>
-                        <a href="#" class="px-4 text-sm">News</a>
-                        <a href="#" class="px-4 text-sm">Contact</a>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </footer>
-    </div>
-</template>
-
-<script>
-    export default {
-        data() {
-            return {
-                name: 'Footer With Subscribe Form',
-            }
-        }
-    }
-</script>
--- a/src/components/UI/Footers/SimpleFooter.vue
+++ b/src/components/UI/Footers/SimpleFooter.vue
@@ -1,35 +0,0 @@
-<template>
-    <div :id="name | toId">
-        <footer class="flex flex-col justify-between items-center px-6 py-2 bg-gray-800 text-gray-100 sm:flex-row">
-            <a href="#" class="text-xl font-bold">Brand</a>
-            <p class="py-2 sm:py-0">All rights reserved</p>
-            <div class="flex -mx-2">
-                <a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Linkden">
-                    <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
-                        <path d="M444.17,32H70.28C49.85,32,32,46.7,32,66.89V441.61C32,461.91,49.85,480,70.28,480H444.06C464.6,480,480,461.79,480,441.61V66.89C480.12,46.7,464.6,32,444.17,32ZM170.87,405.43H106.69V205.88h64.18ZM141,175.54h-.46c-20.54,0-33.84-15.29-33.84-34.43,0-19.49,13.65-34.42,34.65-34.42s33.85,14.82,34.31,34.42C175.65,160.25,162.35,175.54,141,175.54ZM405.43,405.43H341.25V296.32c0-26.14-9.34-44-32.56-44-17.74,0-28.24,12-32.91,23.69-1.75,4.2-2.22,9.92-2.22,15.76V405.43H209.38V205.88h64.18v27.77c9.34-13.3,23.93-32.44,57.88-32.44,42.13,0,74,27.77,74,87.64Z"/>
-                    </svg>
-                </a>
-                <a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Facebook">
-                    <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
-                        <path d="M455.27,32H56.73A24.74,24.74,0,0,0,32,56.73V455.27A24.74,24.74,0,0,0,56.73,480H256V304H202.45V240H256V189c0-57.86,40.13-89.36,91.82-89.36,24.73,0,51.33,1.86,57.51,2.68v60.43H364.15c-28.12,0-33.48,13.3-33.48,32.9V240h67l-8.75,64H330.67V480h124.6A24.74,24.74,0,0,0,480,455.27V56.73A24.74,24.74,0,0,0,455.27,32Z"/>
-                    </svg>
-                </a>
-                <a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Twitter">
-                    <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
-                        <path d="M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z"/>
-                    </svg>
-                </a>
-            </div>
-        </footer>
-    </div>
-</template>
-
-<script>
-    export default {
-        data() {
-            return {
-                name: 'Simple Footer',
-            }
-        }
-    }
-</script>
--- a/src/components/UI/Forms/InputsForm.vue
+++ b/src/components/UI/Forms/InputsForm.vue
@@ -1,45 +0,0 @@
-<template>
-    <div class="px-3" :id="name | toId">
-        <div class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md">
-            <h2 class="text-lg text-gray-700 font-semibold capitalize">Account settings</h2>
-            
-            <form>
-                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-4">
-                    <div>
-                        <label class="text-gray-700" for="username">Username</label>
-                        <input id="username" type="text" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
-                    </div>
-
-                    <div>
-                        <label class="text-gray-700" for="emailAddress">Email Address</label>
-                        <input id="emailAddress" type="email" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
-                    </div>
-
-                    <div>
-                        <label class="text-gray-700" for="password">Password</label>
-                        <input id="password" type="password" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
-                    </div>
-
-                    <div>
-                        <label class="text-gray-700" for="passwordConfirmation">Password Confirmation</label>
-                        <input id="passwordConfirmation" type="password" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
-                    </div>
-                </div>
-
-                <div class="flex justify-end mt-4">
-                    <button class="px-4 py-2 bg-gray-800 text-gray-200 rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">Save</button>
-                </div>
-            </form>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data() {
-            return {
-                name: 'Inputs Form'
-            }
-        }
-    }
-</script>
--- a/src/components/UI/Forms/NewsletterForm.vue
+++ b/src/components/UI/Forms/NewsletterForm.vue
@@ -1,31 +0,0 @@
-<template>
-        <div class="px-3" :id="name | toId">
-            <div class="flex flex-col max-w-4xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden md:flex-row md:h-48">
-                <div class="md:flex md:items-center md:justify-center md:w-1/2 md:bg-gray-700">
-                    <div class="py-6 px-6 md:px-8 md:py-0">
-                        <h2 class="text-gray-700 text-lg font-bold md:text-gray-100">Sign Up For <span class="text-blue-600 md:text-blue-300">Project</span> Updates</h2>
-                        <p class="mt-2 text-gray-600 text-sm md:text-gray-400">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur obcaecati odio</p>
-                    </div>
-                </div>
-                <div class="flex items-center justify-center pb-6 md:py-0 md:w-1/2 md:border-b-8 border-gray-700">
-                    <form>
-                        <div class="flex flex-col rounded-lg overflow-hidden lg:flex-row">
-                            <input class="py-3 px-6 bg-gray-200 text-gray-700 outline-none placeholder-gray-500 focus:bg-gray-300" type="text" name="email" placeholder="Enter your email" aria-label="Enter your email">
-                            <button class="py-3 px-4 bg-gray-700 text-gray-100 text-sm font-semibold uppercase hover:bg-gray-600 focus:bg-gray-600 focus:outline-none">subscribe</button>
-                        </div>
-                    </form>
-                </div>
-            </div>
-        </div>   
-</template>
-
-<script>
-
-export default {
-    data() {
-        return {
-            name: 'Newsletter Form',
-        }
-    }
-}
-</script>
--- a/src/components/UI/Forms/SignInForm.vue
+++ b/src/components/UI/Forms/SignInForm.vue
@@ -1,45 +0,0 @@
-<template>
-    <div class="px-3" :id="name | toId">
-        <div class="bg-white w-full max-w-sm rounded-lg overflow-hidden mx-auto">
-            <div class="py-4 px-6">
-                <div class="text-center font-bold text-gray-700 text-3xl">Brand</div>
-                <div class="mt-1 text-center font-bold text-gray-600 text-xl">Welcome Back</div>
-                <div class="mt-1 text-center text-gray-600">Login or create account</div>
-
-                <form>
-                    <div class="mt-4 w-full">
-                        <input class="w-full mt-2 py-2 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded  block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white"
-                               type="email" placeholder="Email Address" aria-label="Email Address">
-                    </div>
-                    <div class="mt-4 w-full">
-                        <input class="w-full mt-2 py-2 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded  block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white"
-                               type="password" placeholder="Password" aria-label="Password">
-                    </div>
-                    <div class="flex justify-between items-center mt-6">
-                        <a href="#" class="text-gray-600 text-sm hover:text-gray-500">Forget Password?</a>
-                        <button class="py-2 px-4 bg-gray-700 text-white rounded hover:bg-gray-600 focus:outline-none"
-                                type="button">
-                            Login
-                        </button>
-                    </div>
-                </form>
-            </div>
-
-            <div class="flex items-center justify-center py-4 bg-gray-100 text-center">
-                <h1 class="text-gray-600 text-sm">Dont`t have an account? </h1>
-                <a href="#" class="text-blue-600 font-bold mx-2 text-sm hover:text-blue-500">Register</a>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-
-    export default {
-        data() {
-            return {
-                name: 'Sign In Form',
-            }
-        }
-    }
-</script>
--- a/src/components/UI/Forms/SignInFormWithImage.vue
+++ b/src/components/UI/Forms/SignInFormWithImage.vue
@@ -1,70 +0,0 @@
-<template>
-    <div class="px-3" :id="name | toId">
-        <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>
-            
-            <div class="w-full py-8 px-6 md:px-8 lg:w-1/2">
-                <h2 class="text-2xl font-semibold text-gray-700 text-center">Brand</h2>
-                <p class="text-xl text-gray-600 text-center">Welcome back!</p>
-                <a href="#" class="flex items-center justify-center mt-4 text-white rounded-lg shadow-md hover:bg-gray-100">
-                    <div class="px-4 py-3">
-                        <svg class="h-6 w-6" viewBox="0 0 40 40">
-                            <path d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.045 27.2142 24.3525 30 20 30C14.4775 30 10 25.5225 10 20C10 14.4775 14.4775 9.99999 20 9.99999C22.5492 9.99999 24.8683 10.9617 26.6342 12.5325L31.3483 7.81833C28.3717 5.04416 24.39 3.33333 20 3.33333C10.7958 3.33333 3.33335 10.7958 3.33335 20C3.33335 29.2042 10.7958 36.6667 20 36.6667C29.2042 36.6667 36.6667 29.2042 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z"
-                                  fill="#FFC107"/>
-                            <path d="M5.25497 12.2425L10.7308 16.2583C12.2125 12.59 15.8008 9.99999 20 9.99999C22.5491 9.99999 24.8683 10.9617 26.6341 12.5325L31.3483 7.81833C28.3716 5.04416 24.39 3.33333 20 3.33333C13.5983 3.33333 8.04663 6.94749 5.25497 12.2425Z"
-                                  fill="#FF3D00"/>
-                            <path d="M20 36.6667C24.305 36.6667 28.2167 35.0192 31.1742 32.34L26.0159 27.975C24.3425 29.2425 22.2625 30 20 30C15.665 30 11.9842 27.2359 10.5975 23.3784L5.16254 27.5659C7.92087 32.9634 13.5225 36.6667 20 36.6667Z"
-                                  fill="#4CAF50"/>
-                            <path d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.7592 25.1975 27.56 26.805 26.0133 27.9758C26.0142 27.975 26.015 27.975 26.0158 27.9742L31.1742 32.3392C30.8092 32.6708 36.6667 28.3333 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z"
-                                  fill="#1976D2"/>
-                        </svg>
-                    </div>
-                    <h3 class="px-4 py-3 w-5/6 text-center text-gray-600 font-bold">Sign in with Google</h3>
-                </a>
-
-                <div class="mt-4 flex items-center justify-between">
-                    <span class="border-b w-1/5 lg:w-1/4"></span>
-                    <a href="#" class="text-xs text-center text-gray-500 uppercase hover:underline">or login with email</a>
-                    <span class="border-b w-1/5 lg:w-1/4"></span>
-                </div>
-
-                <div class="mt-4">
-                    <label class="block text-gray-700 text-sm font-bold mb-2" for="LoggingEmailAddress">Email Address</label>
-                    <input id="LoggingEmailAddress" class="bg-gray-200 text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full appearance-none focus:outline-none focus:bg-white"
-                           type="email">
-                </div>
-
-                <div class="mt-4">
-                    <div class="flex justify-between">
-                        <label class="block text-gray-700 text-sm font-bold mb-2" for="loggingPassword">Password</label>
-                        <a href="#" class="text-xs text-gray-500 hover:underline">Forget Password?</a>
-                    </div>
-                    <input id="loggingPassword" class="bg-gray-200 text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full appearance-none focus:outline-none focus:bg-white"
-                           type="password">
-                </div>
-
-                <div class="mt-8">
-                    <button class="bg-gray-700 text-white font-bold py-2 px-4 w-full rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">Login
-                    </button>
-                </div>
-                
-                <div class="mt-4 flex items-center justify-between">
-                    <span class="border-b w-1/5 md:w-1/4"></span>
-                    <a href="#" class="text-xs text-gray-500 uppercase hover:underline">or sign up</a>
-                    <span class="border-b w-1/5 md:w-1/4"></span>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-
-    export default {
-        data() {
-            return {
-                name: 'Sign In Form With Image',
-            }
-        }
-    }
-</script>
--- a/src/components/UI/Header/HeaderWithImage.vue
+++ b/src/components/UI/Header/HeaderWithImage.vue
@@ -1,69 +0,0 @@
-<template>
-    <div :id="name | toId">
-        <div>
-            <nav class="bg-white">
-                <div class="px-6 py-2">
-                    <div class="md:flex items-center justify-between">
-                        <div class="flex justify-between items-center">
-                            <div>
-                                <a href="#" class="text-xl font-bold text-gray-800 hover:text-gray-700 md:text-2xl">Brand</a>
-                            </div>
-                    
-                            <div class="md:hidden">
-                                <button type="button" @click="isOpen = !isOpen"
-                                    class="block text-gray-700 hover:text-gray-600 focus:text-gray-600 focus:outline-none" aria-label="Toggle menu">
-                                    <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="!isOpen ? 'hidden' : ''" class="flex flex-col -mx-2 mt-2 md:mt-0 md:flex-row md:block">
-                            <a href="#" class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
-                            <a href="#" class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
-                            <a href="#" class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
-                        </div>
-                    </div>
-                </div>
-            </nav>
-
-            <div class="flex bg-white py-8 md:py-0 md:h-96">
-                <div class="flex items-center justify-center px-6 lg:w-1/2">
-                    <div class="max-w-xl">
-                        <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="hidden lg:block lg:w-1/2">
-                    <div class="h-full object-cover object-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>
-</template>
-
-<script>
-    export default {
-        data() {
-            return {
-                name: 'Header With Image',
-                isOpen: false,
-            }
-        }
-    }
-</script>
--- a/src/components/UI/Header/HeaderWithPattern.vue
+++ b/src/components/UI/Header/HeaderWithPattern.vue
@@ -1,59 +0,0 @@
-<template>
-    <div :id="name | toId">
-        <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 py-6 md:h-96 md:flex-row">
-                    <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="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" aria-label="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" aria-label="Password">
-                                    </div>
-
-                                    <div class="mt-4 flex items-center justify-between">
-                                        <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>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data() {
-            return {
-                name: 'Header With Pattern'
-            }
-        }
-    }
-</script>
--- a/src/components/UI/Navbars/Navbar.vue
+++ b/src/components/UI/Navbars/Navbar.vue
@@ -1,40 +0,0 @@
-<template>
-    <div :id="name | toId">
-        <nav class="bg-white shadow">
-            <div class="container py-3 px-6 mx-auto">
-                <div class="md:flex justify-between items-center">
-                    <div class="flex justify-between items-center">
-                        <div>
-                            <a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a>
-                        </div>
-
-                        <div class="flex md: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="h-6 w-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>
-                    
-                    <div :class="!isOpen ? 'hidden' : ''" class="flex flex-col mt-3 md:flex-row md:mt-0 md:block">
-                        <a href="#" class="text-gray-800 text-sm hover:font-medium md:mx-4">Home</a>
-                        <a href="#" class="text-gray-800 text-sm hover:font-medium md:mx-4">Contact</a>
-                        <a href="#" class="text-gray-800 text-sm hover:font-medium md:mx-4">About Us</a>
-                    </div>
-                </div>
-            </div>
-        </nav>
-    </div>
-</template>
-
-<script>
-    export default {
-        data() {
-            return {
-                name: 'Navbar',
-                isOpen: false,
-            }
-        }
-    }
-</script>
--- a/src/components/UI/Navbars/NavbarWithAvatar.vue
+++ b/src/components/UI/Navbars/NavbarWithAvatar.vue
@@ -1,59 +0,0 @@
-<template>
-    <div :id="name | toId">
-        <nav class="bg-white shadow">
-            <div class="container mx-auto px-6 py-3">
-                <div class="md:flex md:items-center md:justify-between">
-                    <div class="flex justify-between items-center">
-                        <div class="text-xl font-semibold text-gray-700">
-                            <a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a>
-                        </div>
-
-                        <div class="flex md: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="h-6 w-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>
-
-                    <div :class="!isOpen ? 'hidden' : ''" class="md:flex md:items-center md:justify-between flex-1">
-                        <div class="flex flex-col -mx-4 md:flex-row md:items-center md:mx-8">
-                            <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 font-medium rounded-md hover:bg-gray-300">Join Slack</a>
-                            <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 font-medium rounded-md hover:bg-gray-300">Browse Topics</a>
-                            <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 font-medium rounded-md hover:bg-gray-300">Random Item</a>
-                            <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 font-medium rounded-md hover:bg-gray-300">Experts</a>
-                        </div>
-
-                        <div class="flex items-center mt-4 md:mt-0">
-                            <button class="mx-4 hidden md:block text-gray-600 hover:text-gray-700 focus:text-gray-700 focus:outline-none" aria-label="show notifications">
-                                <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                                    <path d="M15 17H20L18.5951 15.5951C18.2141 15.2141 18 14.6973 18 14.1585V11C18 8.38757 16.3304 6.16509 14 5.34142V5C14 3.89543 13.1046 3 12 3C10.8954 3 10 3.89543 10 5V5.34142C7.66962 6.16509 6 8.38757 6 11V14.1585C6 14.6973 5.78595 15.2141 5.40493 15.5951L4 17H9M15 17V18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18V17M15 17H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                                </svg>
-                            </button>
-
-                            <button type="button" class="flex items-center focus:outline-none" aria-label="toggle profile dropdown">
-                                <div class="h-8 w-8 overflow-hidden rounded-full border-2  border-gray-400">
-                                    <img src="https://lh3.googleusercontent.com/a-/AOh14Gi0DgItGDTATTFV6lPiVrqtja6RZ_qrY91zg42o-g" class="h-full w-full object-cover" alt="avatar">
-                                </div>
-
-                                <h3 class="mx-2 text-sm text-gray-700 font-medium md:hidden">Khatab wedaa</h3>
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </nav>
-    </div>
-</template>
-
-<script>
-    export default {
-        data() {
-            return {
-                name: 'Navbar With Avatar',
-                isOpen: false,
-            }
-        }
-    }
-</script>
--- a/src/components/UI/Navbars/NavbarWithSearch.vue
+++ b/src/components/UI/Navbars/NavbarWithSearch.vue
@@ -1,44 +0,0 @@
-<template>
-    <div :id="name | toId">
-        <nav class="bg-white shadow">
-            <div class="container mx-auto px-6 py-3 md:flex">
-                <div class="flex justify-between items-center">
-                    <div>
-                        <a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a>
-                    </div>
-
-                    <div class="flex md: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="h-6 w-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>
-
-                <div :class="!isOpen ? 'hidden' : ''" class="w-full md:flex md:items-center md:justify-between md:block">
-                    <div class="flex flex-col -mx-4 px-2 py-3 md:flex-row md:mx-0 md:py-0">
-                        <a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
-                        <a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
-                        <a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
-                    </div>
-                    
-                    <div>
-                        <input type="text" class="w-full px-4 py-3 leading-tight text-sm text-gray-100 bg-gray-800 rounded placeholder-gray-200 focus:outline-none focus:bg-gray-700" placeholder="Search" aria-label="Search">
-                    </div>
-                </div>
-            </div>
-        </nav>
-    </div>
-</template>
-
-<script>
-    export default {
-        data() {
-            return {
-                name: 'Navbar With Search',
-                isOpen: false,
-            }
-        }
-    }
-</script>
--- a/src/components/UI/Paginations/Pagination.vue
+++ b/src/components/UI/Paginations/Pagination.vue
@@ -1,37 +0,0 @@
-<template>
-    <div class="flex justify-center items-center">
-        <div :id="name | toId">
-            <ul class="flex">
-                <li class="mx-1 px-3 py-2 bg-gray-200 text-gray-500 rounded-lg">
-                    <a href="#" class="flex items-center font-bold cursor-not-allowed">
-                        <span class="mx-1">previous</span>
-                    </a>
-                </li>
-                <li class="mx-1 px-3 py-2 bg-gray-200 text-gray-700 hover:bg-gray-700 hover:text-gray-200 rounded-lg">
-                    <a href="#" class="font-bold">1</a>
-                </li>
-                <li class="mx-1 px-3 py-2 bg-gray-200 text-gray-700 hover:bg-gray-700 hover:text-gray-200 rounded-lg">
-                    <a href="#" class="font-bold">2</a>
-                </li>
-                <li class="mx-1 px-3 py-2 bg-gray-200 text-gray-700 hover:bg-gray-700 hover:text-gray-200 rounded-lg">
-                    <a href="#" class="font-bold">3</a>
-                </li>
-                <li class="mx-1 px-3 py-2 bg-gray-200 text-gray-700 hover:bg-gray-700 hover:text-gray-200 rounded-lg">
-                    <a href="#" class="flex items-center font-bold">
-                        <span class="mx-1">Next</span>
-                    </a>
-                </li>
-            </ul>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data() {
-            return {
-                name: 'Pagination',
-            }
-        }
-    }
-</script>
--- a/src/components/UI/Sections/AboutMe.vue
+++ b/src/components/UI/Sections/AboutMe.vue
@@ -1,62 +0,0 @@
-<template>
-    <div :id="name | toId">
-       <div class="bg-gray-800">
-           <div class="container mx-auto px-6 py-8">
-                <div class="lg:flex items-center">
-                    <div class="lg:w-1/2">
-                        <h2 class="text-gray-100 text-3xl font-bold">Who I am</h2>
-
-                        <p class="text-gray-400 lg:max-w-md mt-4">
-                            Hi I am jane , software engineer <a class="text-indigo-300 font-bold" href="#">@BakaTeam</a> , Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum in sed non alias, fugiat, commodi nemo ut fugit corrupti dolorem sequi ex veniam consequuntur id, maiores beatae ipsa omnis aliquam?
-                        </p>
-
-                        <div class="flex items-center -mx-2 mt-6">
-                            <a class="mx-2" href="#" aria-label="Twitter">
-                                <svg class="fill-current text-gray-300 hover:text-gray-500 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-                                    <path d="M492 109.5c-17.4 7.7-36 12.9-55.6 15.3 20-12 35.4-31 42.6-53.6-18.7 11.1-39.4 19.2-61.5 23.5C399.8 75.8 374.6 64 346.8 64c-53.5 0-96.8 43.4-96.8 96.9 0 7.6.8 15 2.5 22.1-80.5-4-151.9-42.6-199.6-101.3-8.3 14.3-13.1 31-13.1 48.7 0 33.6 17.2 63.3 43.2 80.7-16-.4-31-4.8-44-12.1v1.2c0 47 33.4 86.1 77.7 95-8.1 2.2-16.7 3.4-25.5 3.4-6.2 0-12.3-.6-18.2-1.8 12.3 38.5 48.1 66.5 90.5 67.3-33.1 26-74.9 41.5-120.3 41.5-7.8 0-15.5-.5-23.1-1.4C62.8 432 113.7 448 168.3 448 346.6 448 444 300.3 444 172.2c0-4.2-.1-8.4-.3-12.5C462.6 146 479 129 492 109.5z"/>
-                                </svg>
-                            </a>
-                        
-                            <a class="mx-2" href="#" aria-label="Facebook">
-                                <svg class="fill-current text-gray-300 hover:text-gray-500 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-                                    <path d="M426.8 64H85.2C73.5 64 64 73.5 64 85.2v341.6c0 11.7 9.5 21.2 21.2 21.2H256V296h-45.9v-56H256v-41.4c0-49.6 34.4-76.6 78.7-76.6 21.2 0 44 1.6 49.3 2.3v51.8h-35.3c-24.1 0-28.7 11.4-28.7 28.2V240h57.4l-7.5 56H320v152h106.8c11.7 0 21.2-9.5 21.2-21.2V85.2c0-11.7-9.5-21.2-21.2-21.2z"/>
-                                </svg>
-                            </a>
-                        
-                            <a class="mx-2" href="#" aria-label="Linkden">
-                                <svg class="fill-current text-gray-300 hover:text-gray-500 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-                                    <path d="M417.2 64H96.8C79.3 64 64 76.6 64 93.9V415c0 17.4 15.3 32.9 32.8 32.9h320.3c17.6 0 30.8-15.6 30.8-32.9V93.9C448 76.6 434.7 64 417.2 64zM183 384h-55V213h55v171zm-25.6-197h-.4c-17.6 0-29-13.1-29-29.5 0-16.7 11.7-29.5 29.7-29.5s29 12.7 29.4 29.5c0 16.4-11.4 29.5-29.7 29.5zM384 384h-55v-93.5c0-22.4-8-37.7-27.9-37.7-15.2 0-24.2 10.3-28.2 20.3-1.5 3.6-1.9 8.5-1.9 13.5V384h-55V213h55v23.8c8-11.4 20.5-27.8 49.6-27.8 36.1 0 63.4 23.8 63.4 75.1V384z"/>
-                                </svg>
-                            </a>
-                        
-                            <a class="mx-2" href="#" aria-label="Github">
-                                <svg class="fill-current text-gray-300 hover:text-gray-500 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-                                    <path d="M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9 1.4.3 2.6.4 3.8.4 8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1-8.4 1.9-15.9 2.7-22.6 2.7-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1 10.5 0 20-3.4 25.6-6 2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8 0 0 1.6-.5 5-.5 8.1 0 26.4 3.1 56.6 24.1 17.9-5.1 37-7.6 56.1-7.7 19 .1 38.2 2.6 56.1 7.7 30.2-21 48.5-24.1 56.6-24.1 3.4 0 5 .5 5 .5 12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5 1.2 0 2.6-.1 4-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z"/>
-                                </svg>
-                            </a>
-                        </div>
-                    </div>
-
-                    <div class="mt-8 lg:mt-0 lg:w-1/2">
-                        <div class="flex items-center justify-center lg:justify-end">
-                            <div class="max-w-lg">
-
-                            <img class="w-full h-64 object-cover object-center rounded-md" src="https://images.unsplash.com/photo-1484627147104-f5197bcd6651?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data() {
-            return {
-                name: 'About Me'
-            }
-        }
-    }
-</script>
--- a/src/components/UI/Sections/CardsList.vue
+++ b/src/components/UI/Sections/CardsList.vue
@@ -1,125 +0,0 @@
-<template>
-    <div :id="name | toId">
-        <div class="bg-white container mx-auto px-6 py-8">
-            <h2 class="text-gray-800 font-medium capitalize text-xl md:text-2xl">Our Master Photographers</h2>
-
-            <div class="flex items-center justify-center">
-                <div class="grid gap-12 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-8 md:mt-10">
-                    <div class="max-w-xs w-full text-center">
-                        <div class="mb-3">
-                            <img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1493863641943-9b68992a8d07?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=739&q=80" alt="avatar"/>
-                        </div>
-
-                        <h2 class="text-lg font-medium text-gray-700">Ahmed Omer</h2>
-
-                        <div class="flex item-center justify-center mt-2">
-                            <svg class="w-5 h-5 fill-current text-yellow-500" viewBox="0 0 24 24">
-                                <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
-                            </svg>
-                            <svg class="w-5 h-5 fill-current text-yellow-500" viewBox="0 0 24 24">
-                                <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
-                            </svg>
-                            <svg class="w-5 h-5 fill-current text-yellow-500" viewBox="0 0 24 24">
-                                <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
-                            </svg>
-                            <svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
-                                <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
-                            </svg>
-                            <svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
-                                <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
-                            </svg>
-                        </div>
-                    </div>
-
-                    <div class="max-w-xs w-full text-center">
-                        <div class="mb-3">
-                            <img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1475274226786-e636f48a5645?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1460&q=80" alt="avatar"/>
-                        </div>
-
-                        <h2 class="text-lg font-medium text-gray-700">Hassan Ahmed</h2>
-
-                        <div class="flex item-center justify-center mt-2">
-                            <svg class="w-5 h-5 fill-current text-yellow-500" viewBox="0 0 24 24">
-                                <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
-                            </svg>
-                            <svg class="w-5 h-5 fill-current text-yellow-500" viewBox="0 0 24 24">
-                                <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
-                            </svg>
-                            <svg class="w-5 h-5 fill-current text-yellow-500" viewBox="0 0 24 24">
-                                <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
-                            </svg>
-                            <svg class="w-5 h-5 fill-current text-yellow-500" viewBox="0 0 24 24">
-                                <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
-                            </svg>
-                            <svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
-                                <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
-                            </svg>
-                        </div>
-                    </div>
-
-                    <div class="max-w-xs w-full text-center">
-                        <div class="mb-3">
-                            <img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1473433657392-e7e31b785bc2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="avatar"/>
-                        </div>
-
-                        <h2 class="text-lg font-medium text-gray-700">Khaild Mohamed</h2>
-
-                        <div class="flex item-center justify-center mt-2">
-                            <svg class="w-5 h-5 fill-current text-yellow-500" viewBox="0 0 24 24">
-                                <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
-                            </svg>
-                            <svg class="w-5 h-5 fill-current text-yellow-500" viewBox="0 0 24 24">
-                                <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
-                            </svg>
-                            <svg class="w-5 h-5 fill-current text-yellow-500" viewBox="0 0 24 24">
-                                <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
-                            </svg>
-                            <svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
-                                <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
-                            </svg>
-                            <svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
-                                <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
-                            </svg>
-                        </div>
-                    </div>
-
-                    <div class="max-w-xs w-full text-center">
-                        <div class="mb-3">
-                            <img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1547363484-c07b94906964?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"/>
-                        </div>
-
-                        <h2 class="text-lg font-medium text-gray-700">Ali Omer</h2>
-
-                        <div class="flex item-center justify-center mt-2">
-                            <svg class="w-5 h-5 fill-current text-yellow-500" viewBox="0 0 24 24">
-                                <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
-                            </svg>
-                            <svg class="w-5 h-5 fill-current text-yellow-500" viewBox="0 0 24 24">
-                                <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
-                            </svg>
-                            <svg class="w-5 h-5 fill-current text-yellow-500" viewBox="0 0 24 24">
-                                <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
-                            </svg>
-                            <svg class="w-5 h-5 fill-current text-yellow-500" viewBox="0 0 24 24">
-                                <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
-                            </svg>
-                            <svg class="w-5 h-5 fill-current text-yellow-500" viewBox="0 0 24 24">
-                                <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
-                            </svg>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data() {
-            return {
-                name: 'Cards List'
-            }
-        }
-    }
-</script>
--- a/src/components/UI/Sections/ParagraphWithImage.vue
+++ b/src/components/UI/Sections/ParagraphWithImage.vue
@@ -1,30 +0,0 @@
-<template>
-    <div :id="name | toId">
-        <div>
-            <div class="bg-gray-100 lg:py-12 lg:flex lg:justify-center">
-                <div class="bg-white lg:mx-8 lg:flex lg:max-w-5xl lg:shadow-lg lg:rounded-lg">
-                    <div class="lg:w-1/2">
-                        <div class="h-64 bg-cover lg:rounded-lg lg:h-full" style="background-image:url('https://images.unsplash.com/photo-1497493292307-31c376b6e479?ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80')"></div>
-                    </div>
-                    <div class="py-12 px-6 max-w-xl lg:max-w-5xl lg:w-1/2">
-                        <h2 class="text-2xl text-gray-800 font-bold md:text-3xl">Build Your New <span class="text-indigo-600">Idea</span></h2>
-                        <p class="mt-4 text-gray-600">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem modi reprehenderit vitae exercitationem aliquid dolores ullam temporibus enim expedita aperiam mollitia iure consectetur dicta tenetur, porro consequuntur saepe accusantium consequatur.</p>
-                        <div class="mt-8">
-                            <a href="#" class="bg-gray-900 text-gray-100 px-5 py-3 font-semibold rounded">Start Now</a>
-                        </div>
-                    </div>
-                </div>
-            </div> 
-        </div>
-    </div>
-</template>
-
-<script>
-    export default {
-        data() {
-            return {
-                name: 'Paragraph With Image'
-            }
-        }
-    }
-</script>
--- a/src/components/categories/Alerts.vue
+++ b/src/components/categories/Alerts.vue
@@ -0,0 +1,29 @@
+<template>
+    <div class="w-full max-w-5xl mx-auto my-10">
+        <h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Alerts</h1>
+
+        <success-pop></success-pop>
+        <info-pop></info-pop>
+        <warning-pop></warning-pop>
+        <error-pop></error-pop>
+        <notification-pop></notification-pop>
+    </div>
+</template>
+
+<script>
+import SuccessPop from "../ui/Alerts/SuccessPop";
+import InfoPop from "../ui/Alerts/InfoPop";
+import WarningPop from "../ui/Alerts/WarningPop";
+import ErrorPop from "../ui/Alerts/ErrorPop";
+import NotificationPop from "../ui/Alerts/NotificationPop";
+
+export default {
+    components: { 
+        SuccessPop , 
+        InfoPop , 
+        WarningPop,
+        ErrorPop,
+        NotificationPop,
+    },
+};
+</script>
--- a/src/components/categories/Cards.vue
+++ b/src/components/categories/Cards.vue
@@ -0,0 +1,38 @@
+<template>
+    <div class="w-full max-w-5xl mx-auto my-10">
+        <h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Cards</h1>
+
+        <Article></Article>
+        <article-with-image></article-with-image>
+        <product></product>
+        <product-with-evaluation></product-with-evaluation>
+        <simple-product></simple-product>
+        <testimonial></testimonial>
+        <user></user>
+        <user-with-details></user-with-details>
+    </div>
+</template>
+
+<script>
+import Article from "../ui/Cards/Article";
+import ArticleWithImage from "../ui/Cards/ArticleWithImage";
+import Product from "../ui/Cards/Product";
+import ProductWithEvaluation from "../ui/Cards/ProductWithEvaluation";
+import SimpleProduct from "../ui/Cards/SimpleProduct";
+import Testimonial from "../ui/Cards/Testimonial";
+import User from "../ui/Cards/User";
+import UserWithDetails from "../ui/Cards/UserWithDetails";
+
+export default {
+    components: { 
+        Article,
+        ArticleWithImage,
+        Product,
+        ProductWithEvaluation,
+        SimpleProduct,
+        Testimonial,
+        User,
+        UserWithDetails
+    },
+};
+</script>
--- a/src/components/categories/Footers.vue
+++ b/src/components/categories/Footers.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">Footers</h1>
+
+        <simple></simple>
+        <with-subscribe-form></with-subscribe-form>
+    </div>
+</template>
+
+<script>
+import Simple from "../ui/Footers/Simple";
+import WithSubscribeForm from "../ui/Footers/WithSubscribeForm";
+
+export default {
+    components: { 
+        Simple,
+        WithSubscribeForm,
+    },
+};
+</script>
--- a/src/components/categories/Forms.vue
+++ b/src/components/categories/Forms.vue
@@ -0,0 +1,26 @@
+<template>
+    <div class="w-full max-w-5xl mx-auto my-10">
+        <h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Forms</h1>
+
+        <inputs></inputs>
+        <newsletter></newsletter>
+        <sign-in></sign-in>
+        <sign-in-with-image></sign-in-with-image>
+    </div>
+</template>
+
+<script>
+import Inputs from "../ui/Forms/Inputs";
+import Newsletter from "../ui/Forms/Newsletter";
+import SignIn from "../ui/Forms/SignIn";
+import SignInWithImage from "../ui/Forms/SignInWithImage";
+
+export default {
+    components: { 
+        Inputs,
+        Newsletter,
+        SignIn,
+        SignInWithImage
+    },
+};
+</script>
--- a/src/components/categories/Headers.vue
+++ b/src/components/categories/Headers.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">Headers</h1>
+
+        <with-image></with-image>
+        <with-pattern></with-pattern>
+    </div>
+</template>
+
+<script>
+import WithImage from "../ui/Headers/WithImage";
+import WithPattern from "../ui/Headers/WithPattern";
+
+export default {
+    components: { 
+        WithImage,
+        WithPattern,
+    },
+};
+</script>
--- a/src/components/categories/Navbars.vue
+++ b/src/components/categories/Navbars.vue
@@ -0,0 +1,23 @@
+<template>
+    <div class="w-full max-w-5xl mx-auto my-10">
+        <h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Navbars</h1>
+
+        <simple></simple>
+        <with-search></with-search>
+        <with-avatar-and-alert-icon></with-avatar-and-alert-icon>
+    </div>
+</template>
+
+<script>
+import Simple from "../ui/Navbars/Simple";
+import WithSearch from "../ui/Navbars/WithSearch";
+import WithAvatarAndAlertIcon from "../ui/Navbars/WithAvatarAndAlertIcon";
+
+export default {
+    components: { 
+        Simple,
+        WithSearch,
+        WithAvatarAndAlertIcon,
+    },
+};
+</script>
--- a/src/components/categories/Paginations.vue
+++ b/src/components/categories/Paginations.vue
@@ -0,0 +1,17 @@
+<template>
+    <div class="w-full max-w-5xl mx-auto my-10">
+        <h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Paginations</h1>
+
+        <simple></simple>
+    </div>
+</template>
+
+<script>
+import Simple from "../ui/Paginations/Simple";
+
+export default {
+    components: { 
+        Simple,
+    },
+};
+</script>
--- a/src/components/categories/Sections.vue
+++ b/src/components/categories/Sections.vue
@@ -0,0 +1,23 @@
+<template>
+    <div class="w-full max-w-5xl mx-auto my-10">
+        <h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Sections</h1>
+
+        <about-me></about-me>
+        <our-team></our-team>
+        <paragraph-with-image></paragraph-with-image>
+    </div>
+</template>
+
+<script>
+import AboutMe from "../ui/Sections/AboutMe";
+import OurTeam from "../ui/Sections/OurTeam";
+import ParagraphWithImage from "../ui/Sections/ParagraphWithImage";
+
+export default {
+    components: { 
+        AboutMe,
+        OurTeam,
+        ParagraphWithImage,
+    },
+};
+</script>
--- a/src/components/ui/Alerts/ErrorFullWidth.vue
+++ b/src/components/ui/Alerts/ErrorFullWidth.vue
@@ -0,0 +1,31 @@
+<template>
+    <div :id="name | toId">
+        <div class="w-full bg-red-500 text-white">
+            <div class="flex justify-between items-center container mx-auto py-4 px-6">
+                <div class="flex">
+                    <svg viewBox="0 0 40 40" class="h-6 w-6 fill-current">
+                       <path d="M20 3.36667C10.8167 3.36667 3.3667 10.8167 3.3667 20C3.3667 29.1833 10.8167 36.6333 20 36.6333C29.1834 36.6333 36.6334 29.1833 36.6334 20C36.6334 10.8167 29.1834 3.36667 20 3.36667ZM19.1334 33.3333V22.9H13.3334L21.6667 6.66667V17.1H27.25L19.1334 33.3333Z"></path>
+                    </svg>
+
+                    <p class="mx-3">Validation Error.</p>
+                </div>
+
+                <button class="rounded-md p-1 hover:bg-opacity-25 hover:bg-gray-600 focus:outline-none">
+                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M6 18L18 6M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Error Full Width',
+            }
+        }
+    }
+</script>
--- a/src/components/ui/Alerts/ErrorPop.vue
+++ b/src/components/ui/Alerts/ErrorPop.vue
@@ -0,0 +1,45 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="px-3 py-6" slot="component">
+            <div class="flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden">
+                <div class="flex justify-center items-center w-12 bg-red-500">
+                    <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M20 3.36667C10.8167 3.36667 3.3667 10.8167 3.3667 20C3.3667 29.1833 10.8167 36.6333 20 36.6333C29.1834 36.6333 36.6334 29.1833 36.6334 20C36.6334 10.8167 29.1834 3.36667 20 3.36667ZM19.1334 33.3333V22.9H13.3334L21.6667 6.66667V17.1H27.25L19.1334 33.3333Z"/>
+                    </svg>
+                </div>
+                
+                <div class="-mx-3 py-2 px-4">
+                    <div class="mx-3">
+                        <span class="text-red-500 font-semibold">Error</span>
+                        <p class="text-gray-600 text-sm">Your email is already used!</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Error Pop',
+                code: `
+        <div class="flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden">
+            <div class="flex justify-center items-center w-12 bg-red-500">
+                <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M20 3.36667C10.8167 3.36667 3.3667 10.8167 3.3667 20C3.3667 29.1833 10.8167 36.6333 20 36.6333C29.1834 36.6333 36.6334 29.1833 36.6334 20C36.6334 10.8167 29.1834 3.36667 20 3.36667ZM19.1334 33.3333V22.9H13.3334L21.6667 6.66667V17.1H27.25L19.1334 33.3333Z"/>
+                </svg>
+            </div>
+            
+            <div class="-mx-3 py-2 px-4">
+                <div class="mx-3">
+                    <span class="text-red-500 font-semibold">Error</span>
+                    <p class="text-gray-600 text-sm">Your email is already used!</p>
+                </div>
+            </div>
+        </div>`
+            }
+        }
+    }
+</script>
--- a/src/components/ui/Alerts/InfoFullWidth.vue
+++ b/src/components/ui/Alerts/InfoFullWidth.vue
@@ -0,0 +1,31 @@
+<template>
+    <div :id="name | toId">
+        <div class="w-full bg-blue-500 text-white">
+            <div class="flex justify-between items-center container mx-auto py-4 px-6">
+                <div class="flex">
+                    <svg viewBox="0 0 40 40" class="h-6 w-6 fill-current">
+                        <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"></path>
+                    </svg>
+
+                    <p class="mx-3">Update your avatar.</p>
+                </div>
+
+                <button class="rounded-md p-1 hover:bg-opacity-25 hover:bg-gray-600 focus:outline-none">
+                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M6 18L18 6M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Info Full Width',
+            }
+        }
+    }
+</script>
--- a/src/components/ui/Alerts/InfoPop.vue
+++ b/src/components/ui/Alerts/InfoPop.vue
@@ -0,0 +1,45 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="px-3 py-6" slot="component">
+            <div class="flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden">
+                <div class="flex justify-center items-center w-12 bg-blue-500">
+                    <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"/>
+                    </svg>
+                </div>
+                
+                <div class="-mx-3 py-2 px-4">
+                    <div class="mx-3">
+                        <span class="text-blue-500 font-semibold">Info</span>
+                        <p class="text-gray-600 text-sm">This channel archived by owner !</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Info Pop',
+                code: `
+        <div class="flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden">
+            <div class="flex justify-center items-center w-12 bg-blue-500">
+                <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"/>
+                </svg>
+            </div>
+            
+            <div class="-mx-3 py-2 px-4">
+                <div class="mx-3">
+                    <span class="text-blue-500 font-semibold">Info</span>
+                    <p class="text-gray-600 text-sm">This channel archived by owner !</p>
+                </div>
+            </div>
+        </div>`
+            }
+        }
+    }
+</script>
--- a/src/components/ui/Alerts/NotificationPop.vue
+++ b/src/components/ui/Alerts/NotificationPop.vue
@@ -0,0 +1,39 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="px-3 py-6" slot="component">
+            <div class="flex max-w-sm w-full bg-white shadow-md rounded-lg overflow-hidden mx-auto">
+                <div class="w-2 bg-gray-800"></div>
+                
+                <div class="flex items-center px-2 py-3">
+                    <img class="w-10 h-10 object-cover rounded-full" alt="User avatar" src="https://images.unsplash.com/photo-1477118476589-bff2c5c4cfbb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=200">
+                    
+                    <div class="mx-3">
+                        <p class="text-gray-600">Sara was replied on the <a class="text-blue-500 hover:text-blue-400 hover:underline">upload image</a>.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Notification Pop',
+                code: `
+        <div class="flex max-w-sm w-full bg-white shadow-md rounded-lg overflow-hidden mx-auto">
+            <div class="w-2 bg-gray-800"></div>
+
+            <div class="flex items-center px-2 py-3">
+                <img class="w-10 h-10 object-cover rounded-full" alt="User avatar" src="https://images.unsplash.com/photo-1477118476589-bff2c5c4cfbb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=200">
+                
+                <div class="mx-3">
+                    <p class="text-gray-600">Sara was replied on the <a class="text-blue-500 hover:text-blue-400 hover:underline">upload image</a>.</p>
+                </div>
+            </div>
+        </div>`,
+            }
+        },
+    }
+</script>
--- a/src/components/ui/Alerts/SuccessFullWidth.vue
+++ b/src/components/ui/Alerts/SuccessFullWidth.vue
@@ -0,0 +1,33 @@
+<template>
+    <view-component :name="name">
+        <div slot="component">
+        <div class="w-full bg-green-500 text-white">
+            <div class="flex justify-between items-center container mx-auto py-4 px-6">
+                <div class="flex">
+                    <svg viewBox="0 0 40 40" class="h-6 w-6 fill-current">
+                        <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM16.6667 28.3333L8.33337 20L10.6834 17.65L16.6667 23.6166L29.3167 10.9666L31.6667 13.3333L16.6667 28.3333Z"></path>
+                    </svg>
+
+                    <p class="mx-3">You are finished the tasks.</p>
+                </div>
+
+                <button class="rounded-md p-1 hover:bg-opacity-25 hover:bg-gray-600 focus:outline-none">
+                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M6 18L18 6M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </button>
+            </div>
+        </div>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Success Full Width',
+            }
+        }
+    }
+</script>
--- a/src/components/ui/Alerts/SuccessPop.vue
+++ b/src/components/ui/Alerts/SuccessPop.vue
@@ -0,0 +1,46 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="px-3 py-6" slot="component">
+            <div class="flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden">
+                <div class="flex justify-center items-center w-12 bg-green-500">
+                    <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM16.6667 28.3333L8.33337 20L10.6834 17.65L16.6667 23.6166L29.3167 10.9666L31.6667 13.3333L16.6667 28.3333Z"/>
+                    </svg>
+                </div>
+                
+                <div class="-mx-3 py-2 px-4">
+                    <div class="mx-3">
+                        <span class="text-green-500 font-semibold">Success</span>
+                        <p class="text-gray-600 text-sm">Your account was registered!</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Success Pop',
+                code: `
+        <div class="flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden">
+            <div class="flex justify-center items-center w-12 bg-green-500">
+                <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM16.6667 28.3333L8.33337 20L10.6834 17.65L16.6667 23.6166L29.3167 10.9666L31.6667 13.3333L16.6667 28.3333Z"/>
+                </svg>
+            </div>
+            
+            <div class="-mx-3 py-2 px-4">
+                <div class="mx-3">
+                    <span class="text-green-500 font-semibold">Success</span>
+                    <p class="text-gray-600 text-sm">Your account was registered!</p>
+                </div>
+            </div>
+        </div>
+            `,
+            }
+        }
+    }
+</script>
--- a/src/components/ui/Alerts/WarningFullWidth.vue
+++ b/src/components/ui/Alerts/WarningFullWidth.vue
@@ -0,0 +1,31 @@
+<template>
+    <div :id="name | toId">
+        <div class="w-full bg-yellow-500 text-white">
+            <div class="flex justify-between items-center container mx-auto py-4 px-6">
+                <div class="flex">
+                    <svg viewBox="0 0 40 40" class="h-6 w-6 fill-current">
+                        <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"></path>
+                    </svg>
+
+                    <p class="mx-3">This version is not support.</p>
+                </div>
+
+                <button class="rounded-md p-1 hover:bg-opacity-25 hover:bg-gray-600 focus:outline-none">
+                    <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M6 18L18 6M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Warning Full Width',
+            }
+        }
+    }
+</script>
--- a/src/components/ui/Alerts/WarningPop.vue
+++ b/src/components/ui/Alerts/WarningPop.vue
@@ -0,0 +1,45 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="px-3 py-6" slot="component">
+            <div class="flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden">
+                <div class="flex justify-center items-center w-12 bg-yellow-500">
+                    <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"/>
+                    </svg>
+                </div>
+                
+                <div class="-mx-3 py-2 px-4">
+                    <div class="mx-3">
+                        <span class="text-yellow-500 font-semibold">Warning</span>
+                        <p class="text-gray-600 text-sm">Your image size is to large !</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Warning Pop',
+                code: `
+        <div class="flex max-w-sm w-full mx-auto bg-white shadow-md rounded-lg overflow-hidden">
+            <div class="flex justify-center items-center w-12 bg-yellow-500">
+                 <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M20 3.33331C10.8 3.33331 3.33337 10.8 3.33337 20C3.33337 29.2 10.8 36.6666 20 36.6666C29.2 36.6666 36.6667 29.2 36.6667 20C36.6667 10.8 29.2 3.33331 20 3.33331ZM21.6667 28.3333H18.3334V25H21.6667V28.3333ZM21.6667 21.6666H18.3334V11.6666H21.6667V21.6666Z"/>
+                </svg>
+            </div>
+            
+            <div class="-mx-3 py-2 px-4">
+                <div class="mx-3">
+                    <span class="text-yellow-500 font-semibold">Warning</span>
+                    <p class="text-gray-600 text-sm">Your image size is to large !</p>
+                </div>
+            </div>
+        </div>`
+            }
+        }
+    }
+</script>
--- a/src/components/ui/Cards/Article.vue
+++ b/src/components/ui/Cards/Article.vue
@@ -0,0 +1,57 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="px-3 py-6" slot="component">
+            <div class="max-w-2xl mx-auto px-8 py-4 bg-white rounded-lg shadow-md">
+                <div class="flex justify-between items-center">
+                    <span class="font-light text-gray-600 text-sm">Mar 10, 2019</span>
+                    <a class="px-3 py-1 bg-gray-600 text-gray-100 text-sm font-bold rounded hover:bg-gray-500">Design</a>
+                </div>
+
+                <div class="mt-2">
+                    <a href="#" class="text-2xl text-gray-700 font-bold hover:text-gray-600 hover:underline">Accessibility tools for designers and developers</a>
+                    <p class="mt-2 text-gray-600">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora expedita dicta totam aspernatur doloremque. Excepturi iste iusto eos enim reprehenderit nisi, accusamus delectus nihil quis facere in modi ratione libero!</p>
+                </div>
+                
+                <div class="flex justify-between items-center mt-4">
+                    <a href="#" class="text-blue-600 hover:underline">Read more</a>
+
+                    <div class="flex items-center">
+                        <img class="mx-4 w-10 h-10 object-cover rounded-full hidden sm:block" src="https://images.unsplash.com/photo-1502980426475-b83966705988?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=40&q=80" alt="avatar">
+                        <a class="text-gray-700 font-bold cursor-pointer">Khatab wedaa</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Article',
+                code: `
+        <div class="max-w-2xl mx-auto px-8 py-4 bg-white rounded-lg shadow-md">
+            <div class="flex justify-between items-center">
+                <span class="font-light text-gray-600 text-sm">Mar 10, 2019</span>
+                <a class="px-3 py-1 bg-gray-600 text-gray-100 text-sm font-bold rounded hover:bg-gray-500">Design</a>
+            </div>
+
+            <div class="mt-2">
+                <a href="#" class="text-2xl text-gray-700 font-bold hover:text-gray-600 hover:underline">Accessibility tools for designers and developers</a>
+                <p class="mt-2 text-gray-600">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora expedita dicta totam aspernatur doloremque. Excepturi iste iusto eos enim reprehenderit nisi, accusamus delectus nihil quis facere in modi ratione libero!</p>
+            </div>
+            
+            <div class="flex justify-between items-center mt-4">
+                <a href="#" class="text-blue-600 hover:underline">Read more</a>
+
+                <div class="flex items-center">
+                    <img class="mx-4 w-10 h-10 object-cover rounded-full hidden sm:block" src="https://images.unsplash.com/photo-1502980426475-b83966705988?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=40&q=80" alt="avatar">
+                    <a class="text-gray-700 font-bold cursor-pointer">Khatab wedaa</a>
+                </div>
+            </div>
+        </div>`
+            }
+        }
+    }
+</script>
--- a/src/components/ui/Cards/ArticleWithImage.vue
+++ b/src/components/ui/Cards/ArticleWithImage.vue
@@ -0,0 +1,59 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="px-3 py-6" slot="component">
+            <div class="max-w-2xl mx-auto bg-white overflow-hidden shadow-md rounded-lg">
+                <img class="w-full h-64 object-cover" src="https://images.unsplash.com/photo-1550439062-609e1531270e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Article">
+
+                <div class="p-6">
+                    <div>
+                        <span class="text-blue-600 text-xs font-medium uppercase">Product</span>
+                        <a href="#" class="block text-gray-800 font-semibold text-2xl mt-2 hover:text-gray-600 hover:underline">I Built A Successful Blog In One Year</a>
+                        <p class="text-sm text-gray-600 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Molestie parturient et sem ipsum volutpat vel. Natoque sem et aliquam mauris egestas quam volutpat viverra. In pretium nec senectus erat. Et malesuada lobortis.</p>
+                    </div>
+
+                    <div class="mt-4">
+                        <div class="flex items-center">
+                            <div class="flex items-center">
+                                <img class="h-10 h-10 object-cover rounded-full" src="https://images.unsplash.com/photo-1586287011575-a23134f797f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=48&q=60" alt="Avatar">
+                                <a href="#" class="mx-2 text-gray-700 font-semibold">Jone Doe</a>
+                            </div>
+                            <span class="mx-1 text-gray-600 text-xs">21 SEP 2015</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Article With Image',
+                code: `
+        <div class="max-w-2xl mx-auto bg-white overflow-hidden shadow-md rounded-lg">
+            <img class="w-full h-64 object-cover" src="https://images.unsplash.com/photo-1550439062-609e1531270e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="Article">
+
+            <div class="p-6">
+                <div>
+                    <span class="text-blue-600 text-xs font-medium uppercase">Product</span>
+                    <a href="#" class="block text-gray-800 font-semibold text-2xl mt-2 hover:text-gray-600 hover:underline">I Built A Successful Blog In One Year</a>
+                    <p class="text-sm text-gray-600 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Molestie parturient et sem ipsum volutpat vel. Natoque sem et aliquam mauris egestas quam volutpat viverra. In pretium nec senectus erat. Et malesuada lobortis.</p>
+                </div>
+
+                <div class="mt-4">
+                    <div class="flex items-center">
+                        <div class="flex items-center">
+                            <img class="h-10 h-10 object-cover rounded-full" src="https://images.unsplash.com/photo-1586287011575-a23134f797f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=48&q=60" alt="Avatar">
+                            <a href="#" class="mx-2 text-gray-700 font-semibold">Jone Doe</a>
+                        </div>
+                        <span class="mx-1 text-gray-600 text-xs">21 SEP 2015</span>
+                    </div>
+                </div>
+            </div>
+        </div>`
+            }
+        }
+    }
+</script>
--- a/src/components/ui/Cards/Product.vue
+++ b/src/components/ui/Cards/Product.vue
@@ -0,0 +1,43 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="px-3 py-6" slot="component">
+            <div class="max-w-xs mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
+                <div class="px-4 py-2">
+                    <h1 class="text-gray-900 font-bold text-3xl uppercase">NIKE AIR</h1>
+                    <p class="text-gray-600 text-sm mt-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quos quidem sequi illum facere recusandae voluptatibus</p>
+                </div>
+
+                <img class="h-48 w-full object-cover mt-2" src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=320&q=80" alt="NIKE AIR">
+
+                <div class="flex items-center justify-between px-4 py-2 bg-gray-900">
+                    <h1 class="text-gray-200 font-bold text-lg">$129</h1>
+                    <button class="px-2 py-1 bg-gray-200 text-xs text-gray-900 font-semibold rounded uppercase hover:bg-gray-400 focus:bg-gray-400">Add to cart</button>
+                </div>
+            </div>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Product',
+                code: `
+        <div class="max-w-xs mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
+            <div class="px-4 py-2">
+                <h1 class="text-gray-900 font-bold text-3xl uppercase">NIKE AIR</h1>
+                <p class="text-gray-600 text-sm mt-1">Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi quos quidem sequi illum facere recusandae voluptatibus</p>
+            </div>
+
+            <img class="h-48 w-full object-cover mt-2" src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=320&q=80" alt="NIKE AIR">
+
+            <div class="flex items-center justify-between px-4 py-2 bg-gray-900">
+                <h1 class="text-gray-200 font-bold text-lg">$129</h1>
+                <button class="px-2 py-1 bg-gray-200 text-xs text-gray-900 font-semibold rounded uppercase hover:bg-gray-400 focus:bg-gray-400">Add to cart</button>
+            </div>
+        </div>`,
+            }
+        }
+    }
+</script>
--- a/src/components/ui/Cards/ProductWithEvaluation.vue
+++ b/src/components/ui/Cards/ProductWithEvaluation.vue
@@ -0,0 +1,90 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="px-3 py-6" slot="component">
+            <div class="flex max-w-md mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
+                <div class="w-1/3 bg-cover" style="background-image: url('https://images.unsplash.com/photo-1494726161322-5360d4d0eeae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80')"></div>
+
+                <div class="w-2/3 p-4 md:p-4">
+                    <h1 class="text-gray-900 font-bold text-2xl">Backpack</h1>
+
+                    <p class="mt-2 text-gray-600 text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit In odit</p>
+
+                    <div class="flex item-center mt-2">
+                        <svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
+                            <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
+                        </svg>
+
+                        <svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
+                            <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
+                        </svg>
+
+                        <svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
+                            <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
+                        </svg>
+
+                        <svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
+                            <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
+                        </svg>
+
+                        <svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
+                            <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
+                        </svg>
+                    </div>
+
+                    <div class="flex item-center justify-between mt-3">
+                        <h1 class="text-gray-700 font-bold text-lg md:text-xl">$220</h1>
+                        <button class="px-2 py-1 bg-gray-800 text-white text-xs font-bold uppercase rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">Add to Cart</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </view-component>
+</template>
+
+<script>
+
+    export default {
+        data() {
+            return {
+                name: 'Product With Evaluation',
+                code:`
+        <div class="flex max-w-md mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
+            <div class="w-1/3 bg-cover" style="background-image: url('https://images.unsplash.com/photo-1494726161322-5360d4d0eeae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80')"></div>
+
+            <div class="w-2/3 p-4 md:p-4">
+                <h1 class="text-gray-900 font-bold text-2xl">Backpack</h1>
+                
+                <p class="mt-2 text-gray-600 text-sm">Lorem ipsum dolor sit amet consectetur adipisicing elit In odit</p>
+
+                <div class="flex item-center mt-2">
+                    <svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
+                        <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
+                    </svg>
+
+                    <svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
+                        <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
+                    </svg>
+
+                    <svg class="w-5 h-5 fill-current text-gray-700" viewBox="0 0 24 24">
+                        <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
+                    </svg>
+
+                    <svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
+                        <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
+                    </svg>
+
+                    <svg class="w-5 h-5 fill-current text-gray-500" viewBox="0 0 24 24">
+                        <path d="M12 17.27L18.18 21L16.54 13.97L22 9.24L14.81 8.63L12 2L9.19 8.63L2 9.24L7.46 13.97L5.82 21L12 17.27Z"/>
+                    </svg>
+                </div>
+
+                <div class="flex item-center justify-between mt-3">
+                    <h1 class="text-gray-700 font-bold text-lg md:text-xl">$220</h1>
+                    <button class="px-2 py-1 bg-gray-800 text-white text-xs font-bold uppercase rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">Add to Cart</button>
+                </div>
+            </div>
+        </div>`
+            }
+        }
+    }
+</script>
--- a/src/components/ui/Cards/SimpleProduct.vue
+++ b/src/components/ui/Cards/SimpleProduct.vue
@@ -0,0 +1,41 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="px-3 py-6" slot="component">
+            <div class="flex flex-col justify-center items-center max-w-sm mx-auto">
+                <div class="bg-gray-300 h-64 w-full rounded-lg shadow-md bg-cover bg-center" style="background-image: url(https://images.unsplash.com/photo-1539185441755-769473a23570?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80"></div>
+
+                <div class="w-56 md:w-64 bg-white -mt-10 shadow-lg rounded-lg overflow-hidden">
+                    <h3 class="py-2 text-center font-bold uppercase tracking-wide text-gray-800">Nike Revolt</h3>
+                    
+                    <div class="flex items-center justify-between py-2 px-3 bg-gray-200">
+                        <span class="text-gray-800 font-bold ">$129</span>
+                        <button class=" bg-gray-800 text-xs text-white px-2 py-1 font-semibold rounded uppercase hover:bg-gray-700">Add to cart</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Simple Product',
+                code: `
+        <div class="flex flex-col justify-center items-center max-w-sm mx-auto">
+            <div class="bg-gray-300 h-64 w-full rounded-lg shadow-md bg-cover bg-center" style="background-image: url(https://images.unsplash.com/photo-1539185441755-769473a23570?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1951&q=80"></div>
+
+            <div class="w-56 md:w-64 bg-white -mt-10 shadow-lg rounded-lg overflow-hidden">
+                <h3 class="py-2 text-center font-bold uppercase tracking-wide text-gray-800">Nike Revolt</h3>
+                
+                <div class="flex items-center justify-between py-2 px-3 bg-gray-200">
+                    <span class="text-gray-800 font-bold ">$129</span>
+                    <button class=" bg-gray-800 text-xs text-white px-2 py-1 font-semibold rounded uppercase hover:bg-gray-700">Add to cart</button>
+                </div>
+            </div>
+        </div>`
+            }
+        }
+    }
+</script>
--- a/src/components/ui/Cards/Testimonial.vue
+++ b/src/components/ui/Cards/Testimonial.vue
@@ -0,0 +1,43 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="px-3 pb-6 pt-16" slot="component">
+            <div class="max-w-md mx-auto py-4 px-8 bg-white shadow-lg rounded-lg">
+                <div class="flex justify-center md:justify-end -mt-16">
+                    <img class="w-20 h-20 object-cover rounded-full border-2 border-indigo-500" alt="Testimonial avatar" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=76&q=80">
+                </div>
+
+                <h2 class="text-gray-800 text-2xl mt-2 md:mt-0 md:text-3xl font-semibold">Design Tools</h2>
+
+                <p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolores deserunt ea doloremque natus error, rerum quas odio quaerat nam ex commodi hic, suscipit in a veritatis pariatur minus consequuntur!</p>
+                
+                <div class="flex justify-end mt-4">
+                    <a href="#" class="text-xl font-medium text-indigo-500">John Doe</a>
+                </div>
+            </div>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Testimonial',
+                code: `
+        <div class="max-w-md mx-auto py-4 px-8 bg-white shadow-lg rounded-lg">
+            <div class="flex justify-center md:justify-end -mt-16">
+                <img class="w-20 h-20 object-cover rounded-full border-2 border-indigo-500" alt="Testimonial avatar" src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=76&q=80">
+            </div>
+
+            <h2 class="text-gray-800 text-2xl mt-2 md:mt-0 md:text-3xl font-semibold">Design Tools</h2>
+
+            <p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolores deserunt ea doloremque natus error, rerum quas odio quaerat nam ex commodi hic, suscipit in a veritatis pariatur minus consequuntur!</p>
+            
+            <div class="flex justify-end mt-4">
+                <a href="#" class="text-xl font-medium text-indigo-500">John Doe</a>
+            </div>
+        </div>`
+            }
+        }
+    }
+</script>
--- a/src/components/ui/Cards/User.vue
+++ b/src/components/ui/Cards/User.vue
@@ -0,0 +1,33 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="px-3 py-6" slot="component">
+            <div class="max-w-xs bg-white shadow-lg rounded-lg overflow-hidden mx-auto">
+                <img class="w-full h-56 object-cover" src="https://images.unsplash.com/photo-1542156822-6924d1a71ace?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="avatar">
+                
+                <div class="py-5 text-center">
+                    <a href="#" class="block text-2xl text-gray-800 font-bold">John Doe</a>
+                    <span class="text-sm text-gray-700">Software Engineer</span>
+                </div>
+            </div>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'User',
+                code: `
+        <div class="max-w-xs bg-white shadow-lg rounded-lg overflow-hidden mx-auto">
+            <img class="w-full h-56 object-cover" src="https://images.unsplash.com/photo-1542156822-6924d1a71ace?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" alt="avatar">
+            
+            <div class="py-5 text-center">
+                <a href="#" class="block text-2xl text-gray-800 font-bold">John Doe</a>
+                <span class="text-sm text-gray-700">Software Engineer</span>
+            </div>
+        </div>`
+            }
+        }
+    }
+</script>
--- a/src/components/ui/Cards/UserWithDetails.vue
+++ b/src/components/ui/Cards/UserWithDetails.vue
@@ -0,0 +1,99 @@
+<template>
+   <view-component :name="name" :code="code">
+        <div class="px-3 py-6" slot="component">
+            <div class="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
+                <img class="w-full h-56 object-cover object-center" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
+                
+                <div class="flex items-center px-6 py-3 bg-gray-900">
+                    <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd" clip-rule="evenodd" d="M17 21C15.8954 21 15 20.1046 15 19V15C15 13.8954 15.8954 13 17 13H19V12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12V13H7C8.10457 13 9 13.8954 9 15V19C9 20.1046 8.10457 21 7 21H3V12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12V21H17ZM19 15H17V19H19V15ZM7 15H5V19H7V15Z"/>
+                    </svg>
+
+                    <h1 class="mx-3 text-white font-semibold text-lg">Focusing</h1>
+                </div>
+
+                <div class="py-4 px-6">
+                    <h1 class="text-xl font-semibold text-gray-800">Patterson johnson</h1>
+
+                    <p class="py-2 text-gray-700">Full Stack maker & UI / UX Designer , love hip hop music Author of Building UI.</p>
+                   
+                    <div class="flex items-center mt-4 text-gray-700">
+                        <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M14 11H10V13H14V11Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5V4C7 2.89545 7.89539 2 9 2H15C16.1046 2 17 2.89545 17 4V5H20C21.6569 5 23 6.34314 23 8V18C23 19.6569 21.6569 21 20 21H4C2.34314 21 1 19.6569 1 18V8C1 6.34314 2.34314 5 4 5H7ZM9 4H15V5H9V4ZM4 7C3.44775 7 3 7.44769 3 8V14H21V8C21 7.44769 20.5522 7 20 7H4ZM3 18V16H21V18C21 18.5523 20.5522 19 20 19H4C3.44775 19 3 18.5523 3 18Z"/>
+                        </svg>
+
+                        <h1 class="px-2 text-sm">Meraki UI</h1>
+                    </div>
+
+                    <div class="flex items-center mt-4 text-gray-700">
+                        <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path fill-rule="evenodd" clip-rule="evenodd" d="M16.2721 10.2721C16.2721 12.4813 14.4813 14.2721 12.2721 14.2721C10.063 14.2721 8.27214 12.4813 8.27214 10.2721C8.27214 8.063 10.063 6.27214 12.2721 6.27214C14.4813 6.27214 16.2721 8.063 16.2721 10.2721ZM14.2721 10.2721C14.2721 11.3767 13.3767 12.2721 12.2721 12.2721C11.1676 12.2721 10.2721 11.3767 10.2721 10.2721C10.2721 9.16757 11.1676 8.27214 12.2721 8.27214C13.3767 8.27214 14.2721 9.16757 14.2721 10.2721Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5.79417 16.5183C2.19424 13.0909 2.05438 7.3941 5.48178 3.79418C8.90918 0.194258 14.6059 0.0543983 18.2059 3.48179C21.8058 6.90919 21.9457 12.606 18.5183 16.2059L12.3124 22.7241L5.79417 16.5183ZM17.0698 14.8268L12.243 19.8965L7.17324 15.0698C4.3733 12.404 4.26452 7.9732 6.93028 5.17326C9.59603 2.37332 14.0268 2.26454 16.8268 4.93029C19.6267 7.59604 19.7355 12.0269 17.0698 14.8268Z"/>
+                        </svg>
+
+                        <h1 class="px-2 text-sm">California</h1>
+                    </div>
+
+                    <div class="flex items-center mt-4 text-gray-700">
+                        <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path fill-rule="evenodd" clip-rule="evenodd" d="M3.00977 5.83789C3.00977 5.28561 3.45748 4.83789 4.00977 4.83789H20C20.5523 4.83789 21 5.28561 21 5.83789V17.1621C21 18.2667 20.1046 19.1621 19 19.1621H5C3.89543 19.1621 3 18.2667 3 17.1621V6.16211C3 6.11449 3.00333 6.06765 3.00977 6.0218V5.83789ZM5 8.06165V17.1621H19V8.06199L14.1215 12.9405C12.9499 14.1121 11.0504 14.1121 9.87885 12.9405L5 8.06165ZM6.57232 6.80554H17.428L12.7073 11.5263C12.3168 11.9168 11.6836 11.9168 11.2931 11.5263L6.57232 6.80554Z"/>
+                        </svg>
+
+                        <h1 class="px-2 text-sm">patterson@example.com</h1>
+                    </div>
+                </div>
+            </div>
+        </div>
+   </view-component>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            name: 'User With Details',
+            code: `
+        <div class="max-w-sm mx-auto bg-white shadow-lg rounded-lg overflow-hidden">
+            <img class="w-full h-56 object-cover object-center" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar">
+            
+            <div class="flex items-center px-6 py-3 bg-gray-900">
+                <svg class="h-6 w-6 fill-current text-white" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path fill-rule="evenodd" clip-rule="evenodd" d="M17 21C15.8954 21 15 20.1046 15 19V15C15 13.8954 15.8954 13 17 13H19V12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12V13H7C8.10457 13 9 13.8954 9 15V19C9 20.1046 8.10457 21 7 21H3V12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12V21H17ZM19 15H17V19H19V15ZM7 15H5V19H7V15Z"/>
+                </svg>
+
+                <h1 class="mx-3 text-white font-semibold text-lg">Focusing</h1>
+            </div>
+
+            <div class="py-4 px-6">
+                <h1 class="text-xl font-semibold text-gray-800">Patterson johnson</h1>
+
+                <p class="py-2 text-gray-700">Full Stack maker & UI / UX Designer , love hip hop music Author of Building UI.</p>
+                
+                <div class="flex items-center mt-4 text-gray-700">
+                    <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M14 11H10V13H14V11Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5V4C7 2.89545 7.89539 2 9 2H15C16.1046 2 17 2.89545 17 4V5H20C21.6569 5 23 6.34314 23 8V18C23 19.6569 21.6569 21 20 21H4C2.34314 21 1 19.6569 1 18V8C1 6.34314 2.34314 5 4 5H7ZM9 4H15V5H9V4ZM4 7C3.44775 7 3 7.44769 3 8V14H21V8C21 7.44769 20.5522 7 20 7H4ZM3 18V16H21V18C21 18.5523 20.5522 19 20 19H4C3.44775 19 3 18.5523 3 18Z"/>
+                    </svg>
+
+                    <h1 class="px-2 text-sm">Meraki UI</h1>
+                </div>
+
+                <div class="flex items-center mt-4 text-gray-700">
+                    <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd" clip-rule="evenodd" d="M16.2721 10.2721C16.2721 12.4813 14.4813 14.2721 12.2721 14.2721C10.063 14.2721 8.27214 12.4813 8.27214 10.2721C8.27214 8.063 10.063 6.27214 12.2721 6.27214C14.4813 6.27214 16.2721 8.063 16.2721 10.2721ZM14.2721 10.2721C14.2721 11.3767 13.3767 12.2721 12.2721 12.2721C11.1676 12.2721 10.2721 11.3767 10.2721 10.2721C10.2721 9.16757 11.1676 8.27214 12.2721 8.27214C13.3767 8.27214 14.2721 9.16757 14.2721 10.2721Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5.79417 16.5183C2.19424 13.0909 2.05438 7.3941 5.48178 3.79418C8.90918 0.194258 14.6059 0.0543983 18.2059 3.48179C21.8058 6.90919 21.9457 12.606 18.5183 16.2059L12.3124 22.7241L5.79417 16.5183ZM17.0698 14.8268L12.243 19.8965L7.17324 15.0698C4.3733 12.404 4.26452 7.9732 6.93028 5.17326C9.59603 2.37332 14.0268 2.26454 16.8268 4.93029C19.6267 7.59604 19.7355 12.0269 17.0698 14.8268Z"/>
+                    </svg>
+
+                    <h1 class="px-2 text-sm">California</h1>
+                </div>
+
+                <div class="flex items-center mt-4 text-gray-700">
+                    <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd" clip-rule="evenodd" d="M3.00977 5.83789C3.00977 5.28561 3.45748 4.83789 4.00977 4.83789H20C20.5523 4.83789 21 5.28561 21 5.83789V17.1621C21 18.2667 20.1046 19.1621 19 19.1621H5C3.89543 19.1621 3 18.2667 3 17.1621V6.16211C3 6.11449 3.00333 6.06765 3.00977 6.0218V5.83789ZM5 8.06165V17.1621H19V8.06199L14.1215 12.9405C12.9499 14.1121 11.0504 14.1121 9.87885 12.9405L5 8.06165ZM6.57232 6.80554H17.428L12.7073 11.5263C12.3168 11.9168 11.6836 11.9168 11.2931 11.5263L6.57232 6.80554Z"/>
+                    </svg>
+                    
+                    <h1 class="px-2 text-sm">patterson@example.com</h1>
+                </div>
+            </div>
+        </div>`
+        }
+    }
+}
+</script>
--- a/src/components/ui/Footers/Simple.vue
+++ b/src/components/ui/Footers/Simple.vue
@@ -0,0 +1,67 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="py-6" slot="component">
+            <footer class="flex flex-col justify-between items-center px-6 py-2 bg-gray-800 text-gray-100 sm:flex-row">
+                <a href="#" class="text-xl font-bold">Brand</a>
+                
+                <p class="py-2 sm:py-0">All rights reserved</p>
+
+                <div class="flex -mx-2">
+                    <a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Linkden">
+                        <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
+                            <path d="M444.17,32H70.28C49.85,32,32,46.7,32,66.89V441.61C32,461.91,49.85,480,70.28,480H444.06C464.6,480,480,461.79,480,441.61V66.89C480.12,46.7,464.6,32,444.17,32ZM170.87,405.43H106.69V205.88h64.18ZM141,175.54h-.46c-20.54,0-33.84-15.29-33.84-34.43,0-19.49,13.65-34.42,34.65-34.42s33.85,14.82,34.31,34.42C175.65,160.25,162.35,175.54,141,175.54ZM405.43,405.43H341.25V296.32c0-26.14-9.34-44-32.56-44-17.74,0-28.24,12-32.91,23.69-1.75,4.2-2.22,9.92-2.22,15.76V405.43H209.38V205.88h64.18v27.77c9.34-13.3,23.93-32.44,57.88-32.44,42.13,0,74,27.77,74,87.64Z"/>
+                        </svg>
+                    </a>
+
+                    <a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Facebook">
+                        <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
+                            <path d="M455.27,32H56.73A24.74,24.74,0,0,0,32,56.73V455.27A24.74,24.74,0,0,0,56.73,480H256V304H202.45V240H256V189c0-57.86,40.13-89.36,91.82-89.36,24.73,0,51.33,1.86,57.51,2.68v60.43H364.15c-28.12,0-33.48,13.3-33.48,32.9V240h67l-8.75,64H330.67V480h124.6A24.74,24.74,0,0,0,480,455.27V56.73A24.74,24.74,0,0,0,455.27,32Z"/>
+                        </svg>
+                    </a>
+
+                    <a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Twitter">
+                        <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
+                            <path d="M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z"/>
+                        </svg>
+                    </a>
+                </div>
+            </footer>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Simple',
+                code: `
+        <footer class="flex flex-col justify-between items-center px-6 py-2 bg-gray-800 text-gray-100 sm:flex-row">
+            <a href="#" class="text-xl font-bold">Brand</a>
+            
+            <p class="py-2 sm:py-0">All rights reserved</p>
+
+            <div class="flex -mx-2">
+                <a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Linkden">
+                    <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
+                        <path d="M444.17,32H70.28C49.85,32,32,46.7,32,66.89V441.61C32,461.91,49.85,480,70.28,480H444.06C464.6,480,480,461.79,480,441.61V66.89C480.12,46.7,464.6,32,444.17,32ZM170.87,405.43H106.69V205.88h64.18ZM141,175.54h-.46c-20.54,0-33.84-15.29-33.84-34.43,0-19.49,13.65-34.42,34.65-34.42s33.85,14.82,34.31,34.42C175.65,160.25,162.35,175.54,141,175.54ZM405.43,405.43H341.25V296.32c0-26.14-9.34-44-32.56-44-17.74,0-28.24,12-32.91,23.69-1.75,4.2-2.22,9.92-2.22,15.76V405.43H209.38V205.88h64.18v27.77c9.34-13.3,23.93-32.44,57.88-32.44,42.13,0,74,27.77,74,87.64Z"/>
+                    </svg>
+                </a>
+
+                <a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Facebook">
+                    <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
+                        <path d="M455.27,32H56.73A24.74,24.74,0,0,0,32,56.73V455.27A24.74,24.74,0,0,0,56.73,480H256V304H202.45V240H256V189c0-57.86,40.13-89.36,91.82-89.36,24.73,0,51.33,1.86,57.51,2.68v60.43H364.15c-28.12,0-33.48,13.3-33.48,32.9V240h67l-8.75,64H330.67V480h124.6A24.74,24.74,0,0,0,480,455.27V56.73A24.74,24.74,0,0,0,455.27,32Z"/>
+                    </svg>
+                </a>
+
+                <a href="#" class="mx-2 text-gray-100 hover:text-gray-400" aria-label="Twitter">
+                    <svg class="h-4 w-4 fill-current" viewBox="0 0 512 512">
+                        <path d="M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z"/>
+                    </svg>
+                </a>
+            </div>
+        </footer>`,
+            }
+        }
+    }
+</script>
--- a/src/components/ui/Footers/WithSubscribeForm.vue
+++ b/src/components/ui/Footers/WithSubscribeForm.vue
@@ -0,0 +1,83 @@
+<template>
+     <view-component :name="name" :code="code">
+        <div class="py-6" slot="component">
+            <footer class="flex justify-center px-4 text-gray-100 bg-gray-800">
+                <div class="container py-6">
+                    <h1 class="text-center text-lg font-bold lg:text-2xl">
+                        Join 31,000+ other and never miss <br> out on new tips, tutorials, and more.
+                    </h1>
+
+                    <div class="flex justify-center mt-6">
+                        <div class="bg-white rounded-md">
+                            <div class="flex flex-wrap justify-between md:flex-row">
+                                <input type="email" class="m-1 p-2 appearance-none text-gray-700 text-sm focus:outline-none focus:placeholder-white" placeholder="Enter your email" aria-label="Enter your email">
+                                <button class="w-full m-1 p-2 text-sm bg-gray-800 rounded font-semibold uppercase lg:w-auto hover:bg-gray-700">subscribe</button>
+                            </div>
+                        </div>
+                    </div>
+
+                    <hr class="h-px mt-6 bg-gray-700 border-none">
+
+                    <div class="flex flex-col items-center justify-between mt-6 md:flex-row">
+                        <div>
+                            <a href="#" class="text-xl font-bold">Brand</a>
+                        </div>
+
+                        <div class="flex mt-4 md:m-0">
+                            <div class="-mx-4">
+                                <a href="#" class="px-4 text-sm">About</a>
+                                <a href="#" class="px-4 text-sm">Blog</a>
+                                <a href="#" class="px-4 text-sm">News</a>
+                                <a href="#" class="px-4 text-sm">Contact</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </footer>
+        </div>
+     </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Footer With Subscribe Form',
+                code: `
+        <footer class="flex justify-center px-4 text-gray-100 bg-gray-800">
+            <div class="container py-6">
+                <h1 class="text-center text-lg font-bold lg:text-2xl">
+                    Join 31,000+ other and never miss <br> out on new tips, tutorials, and more.
+                </h1>
+
+                <div class="flex justify-center mt-6">
+                    <div class="bg-white rounded-md">
+                        <div class="flex flex-wrap justify-between md:flex-row">
+                            <input type="email" class="m-1 p-2 appearance-none text-gray-700 text-sm focus:outline-none focus:placeholder-white" placeholder="Enter your email" aria-label="Enter your email">
+                            <button class="w-full m-1 p-2 text-sm bg-gray-800 rounded font-semibold uppercase lg:w-auto hover:bg-gray-700">subscribe</button>
+                        </div>
+                    </div>
+                </div>
+
+                <hr class="h-px mt-6 bg-gray-700 border-none">
+
+                <div class="flex flex-col items-center justify-between mt-6 md:flex-row">
+                    <div>
+                        <a href="#" class="text-xl font-bold">Brand</a>
+                    </div>
+
+                    <div class="flex mt-4 md:m-0">
+                        <div class="-mx-4">
+                            <a href="#" class="px-4 text-sm">About</a>
+                            <a href="#" class="px-4 text-sm">Blog</a>
+                            <a href="#" class="px-4 text-sm">News</a>
+                            <a href="#" class="px-4 text-sm">Contact</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </footer>`
+            }
+        }
+    }
+</script>
--- a/src/components/ui/Forms/Inputs.vue
+++ b/src/components/ui/Forms/Inputs.vue
@@ -0,0 +1,79 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="px-3 py-6" slot="component">
+            <div class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md">
+                <h2 class="text-lg text-gray-700 font-semibold capitalize">Account settings</h2>
+                
+                <form>
+                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-4">
+                        <div>
+                            <label class="text-gray-700" for="username">Username</label>
+                            <input id="username" type="text" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
+                        </div>
+
+                        <div>
+                            <label class="text-gray-700" for="emailAddress">Email Address</label>
+                            <input id="emailAddress" type="email" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
+                        </div>
+
+                        <div>
+                            <label class="text-gray-700" for="password">Password</label>
+                            <input id="password" type="password" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
+                        </div>
+
+                        <div>
+                            <label class="text-gray-700" for="passwordConfirmation">Password Confirmation</label>
+                            <input id="passwordConfirmation" type="password" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
+                        </div>
+                    </div>
+
+                    <div class="flex justify-end mt-4">
+                        <button class="px-4 py-2 bg-gray-800 text-gray-200 rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">Save</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Inputs',
+                code: `
+        <div class="max-w-4xl p-6 mx-auto bg-white rounded-md shadow-md">
+            <h2 class="text-lg text-gray-700 font-semibold capitalize">Account settings</h2>
+            
+            <form>
+                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-4">
+                    <div>
+                        <label class="text-gray-700" for="username">Username</label>
+                        <input id="username" type="text" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
+                    </div>
+
+                    <div>
+                        <label class="text-gray-700" for="emailAddress">Email Address</label>
+                        <input id="emailAddress" type="email" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
+                    </div>
+
+                    <div>
+                        <label class="text-gray-700" for="password">Password</label>
+                        <input id="password" type="password" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
+                    </div>
+
+                    <div>
+                        <label class="text-gray-700" for="passwordConfirmation">Password Confirmation</label>
+                        <input id="passwordConfirmation" type="password" class="w-full mt-1 px-4 py-2 block rounded bg-gray-200 text-gray-800 border border-gray-300 focus:outline-none focus:bg-white">
+                    </div>
+                </div>
+
+                <div class="flex justify-end mt-4">
+                    <button class="px-4 py-2 bg-gray-800 text-gray-200 rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700">Save</button>
+                </div>
+            </form>
+        </div>`
+            }
+        }
+    }
+</script>
--- a/src/components/ui/Forms/Newsletter.vue
+++ b/src/components/ui/Forms/Newsletter.vue
@@ -0,0 +1,55 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="px-3 py-6" slot="component">
+            <div class="flex flex-col max-w-4xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden md:flex-row md:h-48">
+                <div class="md:flex md:items-center md:justify-center md:w-1/2 md:bg-gray-700">
+                    <div class="py-6 px-6 md:px-8 md:py-0">
+                        <h2 class="text-gray-700 text-lg font-bold md:text-gray-100">Sign Up For <span class="text-blue-600 md:text-blue-300">Project</span> Updates</h2>
+                        
+                        <p class="mt-2 text-gray-600 text-sm md:text-gray-400">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur obcaecati odio</p>
+                    </div>
+                </div>
+
+                <div class="flex items-center justify-center pb-6 md:py-0 md:w-1/2 md:border-b-8 border-gray-700">
+                    <form>
+                        <div class="flex flex-col rounded-lg overflow-hidden lg:flex-row">
+                            <input class="py-3 px-6 bg-gray-200 text-gray-700 outline-none placeholder-gray-500 focus:bg-gray-300" type="text" name="email" placeholder="Enter your email" aria-label="Enter your email">
+                            
+                            <button class="py-3 px-4 bg-gray-700 text-gray-100 text-sm font-semibold uppercase hover:bg-gray-600 focus:bg-gray-600 focus:outline-none">subscribe</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>   
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Newsletter',
+                code: `
+        <div class="flex flex-col max-w-4xl mx-auto bg-white rounded-lg shadow-lg overflow-hidden md:flex-row md:h-48">
+            <div class="md:flex md:items-center md:justify-center md:w-1/2 md:bg-gray-700">
+                <div class="py-6 px-6 md:px-8 md:py-0">
+                    <h2 class="text-gray-700 text-lg font-bold md:text-gray-100">Sign Up For <span class="text-blue-600 md:text-blue-300">Project</span> Updates</h2>
+                    
+                    <p class="mt-2 text-gray-600 text-sm md:text-gray-400">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consectetur obcaecati odio</p>
+                </div>
+            </div>
+
+            <div class="flex items-center justify-center pb-6 md:py-0 md:w-1/2 md:border-b-8 border-gray-700">
+                <form>
+                    <div class="flex flex-col rounded-lg overflow-hidden lg:flex-row">
+                        <input class="py-3 px-6 bg-gray-200 text-gray-700 outline-none placeholder-gray-500 focus:bg-gray-300" type="text" name="email" placeholder="Enter your email" aria-label="Enter your email">
+                        
+                        <button class="py-3 px-4 bg-gray-700 text-gray-100 text-sm font-semibold uppercase hover:bg-gray-600 focus:bg-gray-600 focus:outline-none">subscribe</button>
+                    </div>
+                </form>
+            </div>
+        </div>`
+            }
+        }
+    }
+</script>
--- a/src/components/ui/Forms/SignIn.vue
+++ b/src/components/ui/Forms/SignIn.vue
@@ -0,0 +1,83 @@
+<template>
+     <view-component :name="name" :code="code">
+        <div class="px-3 py-6" slot="component">
+            <div class="bg-white w-full max-w-sm rounded-lg shadow-md overflow-hidden mx-auto">
+                <div class="py-4 px-6">
+                    <h2 class="text-center font-bold text-gray-700 text-3xl">Brand</h2>
+
+                    <p class="mt-1 text-center font-bold text-gray-600 text-xl">Welcome Back</p>
+
+                    <span class="mt-1 text-center text-gray-600">Login or create account</span>
+
+                    <form>
+                        <div class="mt-4 w-full">
+                            <input class="w-full mt-2 py-2 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded  block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white" type="email" placeholder="Email Address" aria-label="Email Address">
+                        </div>
+
+                        <div class="mt-4 w-full">
+                            <input class="w-full mt-2 py-2 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded  block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white" type="password" placeholder="Password" aria-label="Password">
+                        </div>
+
+                        <div class="flex justify-between items-center mt-6">
+                            <a href="#" class="text-gray-600 text-sm hover:text-gray-500">Forget Password?</a>
+
+                            <button class="py-2 px-4 bg-gray-700 text-white rounded hover:bg-gray-600 focus:outline-none" type="button">
+                                Login
+                            </button>
+                        </div>
+                    </form>
+                </div>
+
+                <div class="flex items-center justify-center py-4 bg-gray-100 text-center">
+                    <span class="text-gray-600 text-sm">Dont`t have an account? </span>
+                    
+                    <a href="#" class="text-blue-600 font-bold mx-2 text-sm hover:text-blue-500">Register</a>
+                </div>
+            </div>
+        </div>
+     </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Sign In',
+                code: `
+        <div class="bg-white w-full max-w-sm rounded-lg shadow-md overflow-hidden mx-auto">
+            <div class="py-4 px-6">
+                <h2 class="text-center font-bold text-gray-700 text-3xl">Brand</h2>
+
+                <p class="mt-1 text-center font-bold text-gray-600 text-xl">Welcome Back</p>
+
+                <span class="mt-1 text-center text-gray-600">Login or create account</span>
+
+                <form>
+                    <div class="mt-4 w-full">
+                        <input class="w-full mt-2 py-2 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded  block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white" type="email" placeholder="Email Address" aria-label="Email Address">
+                    </div>
+
+                    <div class="mt-4 w-full">
+                        <input class="w-full mt-2 py-2 px-4 bg-gray-100 text-gray-700 border border-gray-300 rounded  block appearance-none placeholder-gray-500 focus:outline-none focus:bg-white" type="password" placeholder="Password" aria-label="Password">
+                    </div>
+
+                    <div class="flex justify-between items-center mt-6">
+                        <a href="#" class="text-gray-600 text-sm hover:text-gray-500">Forget Password?</a>
+
+                        <button class="py-2 px-4 bg-gray-700 text-white rounded hover:bg-gray-600 focus:outline-none" type="button">
+                            Login
+                        </button>
+                    </div>
+                </form>
+            </div>
+
+            <div class="flex items-center justify-center py-4 bg-gray-100 text-center">
+                <span class="text-gray-600 text-sm">Do not have an account? </span>
+                
+                <a href="#" class="text-blue-600 font-bold mx-2 text-sm hover:text-blue-500">Register</a>
+            </div>
+        </div>`
+            }
+        }
+    }
+</script>
--- a/src/components/ui/Forms/SignInWithImage.vue
+++ b/src/components/ui/Forms/SignInWithImage.vue
@@ -0,0 +1,133 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="px-3 py-6" slot="component">
+            <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>
+                
+                <div class="w-full py-8 px-6 md:px-8 lg:w-1/2">
+                    <h2 class="text-2xl font-semibold text-gray-700 text-center">Brand</h2>
+
+                    <p class="text-xl text-gray-600 text-center">Welcome back!</p>
+
+                    <a href="#" class="flex items-center justify-center mt-4 text-white rounded-lg shadow-md hover:bg-gray-100">
+                        <div class="px-4 py-3">
+                            <svg class="h-6 w-6" viewBox="0 0 40 40">
+                                <path d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.045 27.2142 24.3525 30 20 30C14.4775 30 10 25.5225 10 20C10 14.4775 14.4775 9.99999 20 9.99999C22.5492 9.99999 24.8683 10.9617 26.6342 12.5325L31.3483 7.81833C28.3717 5.04416 24.39 3.33333 20 3.33333C10.7958 3.33333 3.33335 10.7958 3.33335 20C3.33335 29.2042 10.7958 36.6667 20 36.6667C29.2042 36.6667 36.6667 29.2042 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z" fill="#FFC107"/>
+                                <path d="M5.25497 12.2425L10.7308 16.2583C12.2125 12.59 15.8008 9.99999 20 9.99999C22.5491 9.99999 24.8683 10.9617 26.6341 12.5325L31.3483 7.81833C28.3716 5.04416 24.39 3.33333 20 3.33333C13.5983 3.33333 8.04663 6.94749 5.25497 12.2425Z" fill="#FF3D00"/>
+                                <path d="M20 36.6667C24.305 36.6667 28.2167 35.0192 31.1742 32.34L26.0159 27.975C24.3425 29.2425 22.2625 30 20 30C15.665 30 11.9842 27.2359 10.5975 23.3784L5.16254 27.5659C7.92087 32.9634 13.5225 36.6667 20 36.6667Z" fill="#4CAF50"/>
+                                <path d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.7592 25.1975 27.56 26.805 26.0133 27.9758C26.0142 27.975 26.015 27.975 26.0158 27.9742L31.1742 32.3392C30.8092 32.6708 36.6667 28.3333 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z" fill="#1976D2"/>
+                            </svg>
+                        </div>
+
+                        <span class="px-4 py-3 w-5/6 text-center text-gray-600 font-bold">Sign in with Google</span>
+                    </a>
+
+                    <div class="mt-4 flex items-center justify-between">
+                        <span class="border-b w-1/5 lg:w-1/4"></span>
+
+                        <a href="#" class="text-xs text-center text-gray-500 uppercase hover:underline">or login with email</a>
+
+                        <span class="border-b w-1/5 lg:w-1/4"></span>
+                    </div>
+
+                    <div class="mt-4">
+                        <label class="block text-gray-700 text-sm font-bold mb-2" for="LoggingEmailAddress">Email Address</label>
+                        <input id="LoggingEmailAddress" class="bg-gray-200 text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full appearance-none focus:outline-none focus:bg-white" type="email">
+                    </div>
+
+                    <div class="mt-4">
+                        <div class="flex justify-between">
+                            <label class="block text-gray-700 text-sm font-bold mb-2" for="loggingPassword">Password</label>
+                            <a href="#" class="text-xs text-gray-500 hover:underline">Forget Password?</a>
+                        </div>
+
+                        <input id="loggingPassword" class="bg-gray-200 text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full appearance-none focus:outline-none focus:bg-white" type="password">
+                    </div>
+
+                    <div class="mt-8">
+                        <button class="bg-gray-700 text-white font-bold py-2 px-4 w-full rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">
+                            Login
+                        </button>
+                    </div>
+                    
+                    <div class="mt-4 flex items-center justify-between">
+                        <span class="border-b w-1/5 md:w-1/4"></span>
+
+                        <a href="#" class="text-xs text-gray-500 uppercase hover:underline">or sign up</a>
+                        
+                        <span class="border-b w-1/5 md:w-1/4"></span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Sign In With 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>
+            
+            <div class="w-full py-8 px-6 md:px-8 lg:w-1/2">
+                <h2 class="text-2xl font-semibold text-gray-700 text-center">Brand</h2>
+
+                <p class="text-xl text-gray-600 text-center">Welcome back!</p>
+
+                <a href="#" class="flex items-center justify-center mt-4 text-white rounded-lg shadow-md hover:bg-gray-100">
+                    <div class="px-4 py-3">
+                        <svg class="h-6 w-6" viewBox="0 0 40 40">
+                            <path d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.045 27.2142 24.3525 30 20 30C14.4775 30 10 25.5225 10 20C10 14.4775 14.4775 9.99999 20 9.99999C22.5492 9.99999 24.8683 10.9617 26.6342 12.5325L31.3483 7.81833C28.3717 5.04416 24.39 3.33333 20 3.33333C10.7958 3.33333 3.33335 10.7958 3.33335 20C3.33335 29.2042 10.7958 36.6667 20 36.6667C29.2042 36.6667 36.6667 29.2042 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z" fill="#FFC107"/>
+                            <path d="M5.25497 12.2425L10.7308 16.2583C12.2125 12.59 15.8008 9.99999 20 9.99999C22.5491 9.99999 24.8683 10.9617 26.6341 12.5325L31.3483 7.81833C28.3716 5.04416 24.39 3.33333 20 3.33333C13.5983 3.33333 8.04663 6.94749 5.25497 12.2425Z" fill="#FF3D00"/>
+                            <path d="M20 36.6667C24.305 36.6667 28.2167 35.0192 31.1742 32.34L26.0159 27.975C24.3425 29.2425 22.2625 30 20 30C15.665 30 11.9842 27.2359 10.5975 23.3784L5.16254 27.5659C7.92087 32.9634 13.5225 36.6667 20 36.6667Z" fill="#4CAF50"/>
+                            <path d="M36.3425 16.7358H35V16.6667H20V23.3333H29.4192C28.7592 25.1975 27.56 26.805 26.0133 27.9758C26.0142 27.975 26.015 27.975 26.0158 27.9742L31.1742 32.3392C30.8092 32.6708 36.6667 28.3333 36.6667 20C36.6667 18.8825 36.5517 17.7917 36.3425 16.7358Z" fill="#1976D2"/>
+                        </svg>
+                    </div>
+
+                    <span class="px-4 py-3 w-5/6 text-center text-gray-600 font-bold">Sign in with Google</span>
+                </a>
+
+                <div class="mt-4 flex items-center justify-between">
+                    <span class="border-b w-1/5 lg:w-1/4"></span>
+
+                    <a href="#" class="text-xs text-center text-gray-500 uppercase hover:underline">or login with email</a>
+
+                    <span class="border-b w-1/5 lg:w-1/4"></span>
+                </div>
+
+                <div class="mt-4">
+                    <label class="block text-gray-700 text-sm font-bold mb-2" for="LoggingEmailAddress">Email Address</label>
+                    <input id="LoggingEmailAddress" class="bg-gray-200 text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full appearance-none focus:outline-none focus:bg-white" type="email">
+                </div>
+
+                <div class="mt-4">
+                    <div class="flex justify-between">
+                        <label class="block text-gray-700 text-sm font-bold mb-2" for="loggingPassword">Password</label>
+                        <a href="#" class="text-xs text-gray-500 hover:underline">Forget Password?</a>
+                    </div>
+
+                    <input id="loggingPassword" class="bg-gray-200 text-gray-700 border border-gray-300 rounded py-2 px-4 block w-full appearance-none focus:outline-none focus:bg-white" type="password">
+                </div>
+
+                <div class="mt-8">
+                    <button class="bg-gray-700 text-white font-bold py-2 px-4 w-full rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-600">
+                        Login
+                    </button>
+                </div>
+                
+                <div class="mt-4 flex items-center justify-between">
+                    <span class="border-b w-1/5 md:w-1/4"></span>
+
+                    <a href="#" class="text-xs text-gray-500 uppercase hover:underline">or sign up</a>
+                    
+                    <span class="border-b w-1/5 md:w-1/4"></span>
+                </div>
+            </div>
+        </div>`
+            }
+        }
+    }
+</script>
--- a/src/components/ui/Headers/WithImage.vue
+++ b/src/components/ui/Headers/WithImage.vue
@@ -0,0 +1,114 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="py-6" slot="component">
+            <header class="bg-white">
+                <nav class="px-6 py-2 shadow">
+                    <div class="md:flex items-center justify-between">
+                        <div class="flex justify-between items-center">
+                            <div>
+                                <a href="#" class="text-xl font-bold text-gray-800 hover:text-gray-700 md:text-2xl">Brand</a>
+                            </div>
+                    
+                            <!-- Mobile menu button -->
+                            <div class="md:hidden">
+                                <button type="button" @click="isOpen = !isOpen" class="block text-gray-700 hover:text-gray-600 focus:text-gray-600 focus:outline-none" aria-label="Toggle menu">
+                                    <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
+                                        <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>
+                    
+                        <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
+                        <div :class="!isOpen ? 'hidden' : ''" class="flex flex-col -mx-2 mt-2 md:mt-0 md:flex-row md:block">
+                            <a href="#" class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
+                            <a href="#" class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
+                            <a href="#" class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
+                        </div>
+                    </div>
+                </nav>
+
+                <div class="flex py-8 md:py-0 md:h-96">
+                    <div class="flex items-center justify-center px-6 lg:w-1/2">
+                        <div class="max-w-xl">
+                            <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="hidden lg:block lg:w-1/2">
+                        <div class="h-full object-cover object-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>
+            </header>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Header With Image',
+                isOpen: false,
+                code: `
+        <header class="bg-white">
+            <nav class="px-6 py-2 shadow">
+                <div class="md:flex items-center justify-between">
+                    <div class="flex justify-between items-center">
+                        <div>
+                            <a href="#" class="text-xl font-bold text-gray-800 hover:text-gray-700 md:text-2xl">Brand</a>
+                        </div>
+                
+                        <!-- Mobile menu button -->
+                        <div class="md:hidden">
+                            <button type="button" class="block text-gray-700 hover:text-gray-600 focus:text-gray-600 focus:outline-none" aria-label="Toggle menu">
+                                <svg viewBox="0 0 24 24" class="h-6 w-6 fill-current">
+                                    <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>
+                
+                    <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
+                    <div class="flex flex-col -mx-2 mt-2 hidden md:mt-0 md:flex-row md:block">
+                        <a href="#" class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
+                        <a href="#" class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
+                        <a href="#" class="py-2 px-2 text-sm text-gray-800 rounded hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
+                    </div>
+                </div>
+            </nav>
+
+            <div class="flex py-8 md:py-0 md:h-96">
+                <div class="flex items-center justify-center px-6 lg:w-1/2">
+                    <div class="max-w-xl">
+                        <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="hidden lg:block lg:w-1/2">
+                    <div class="h-full object-cover object-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>
+        </header>`,
+            }
+        }
+    }
+</script>
--- a/src/components/ui/Headers/WithPattern.vue
+++ b/src/components/ui/Headers/WithPattern.vue
@@ -0,0 +1,111 @@
+<template>
+     <view-component :name="name" :code="code">
+        <div class="py-6" slot="component">
+            <header 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 py-6 md:h-96 md:flex-row">
+                        <div class="md:w-1/2">
+                            <h2 class="text-4xl font-semibold text-gray-100">Brand</h2>
+
+                            <h3 class="text-2xl font-semibold text-gray-100">
+                                Hello <span class="text-indigo-400">Guest</span>
+                            </h3>
+
+                            <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="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" aria-label="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" aria-label="Password">
+                                        </div>
+
+                                        <div class="mt-4 flex items-center justify-between">
+                                            <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>
+                    </div>
+                </div>
+            </header>
+        </div>
+     </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Header With Pattern',
+                code: `
+        <header 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 py-6 md:h-96 md:flex-row">
+                    <div class="md:w-1/2">
+                        <h2 class="text-4xl font-semibold text-gray-100">Brand</h2>
+
+                        <h3 class="text-2xl font-semibold text-gray-100">
+                            Hello <span class="text-indigo-400">Guest</span>
+                        </h3>
+
+                        <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="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" aria-label="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" aria-label="Password">
+                                    </div>
+
+                                    <div class="mt-4 flex items-center justify-between">
+                                        <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>
+                </div>
+            </div>
+        </header>`,
+            }
+        }
+    }
+</script>
--- a/src/components/ui/Navbars/Simple.vue
+++ b/src/components/ui/Navbars/Simple.vue
@@ -0,0 +1,72 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="py-6" slot="component">
+            <nav class="bg-white shadow">
+                <div class="container py-3 px-6 mx-auto">
+                    <div class="md:flex justify-between items-center">
+                        <div class="flex justify-between items-center">
+                            <div>
+                                <a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a>
+                            </div>
+
+                            <!-- Mobile menu button -->
+                            <div class="flex md: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="h-6 w-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 ? 'hidden' : ''" class="flex flex-col mt-3 md:flex-row md:mt-0 md:block">
+                            <a href="#" class="text-gray-800 text-sm hover:font-medium md:mx-4">Home</a>
+                            <a href="#" class="text-gray-800 text-sm hover:font-medium md:mx-4">Contact</a>
+                            <a href="#" class="text-gray-800 text-sm hover:font-medium md:mx-4">About Us</a>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Simple',
+                isOpen: false,
+                code: `
+        <nav class="bg-white shadow">
+            <div class="container py-3 px-6 mx-auto">
+                <div class="md:flex justify-between items-center">
+                    <div class="flex justify-between items-center">
+                        <div>
+                            <a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a>
+                        </div>
+
+                        <!-- Mobile menu button -->
+                        <div class="flex md: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="h-6 w-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-3 hidden md:flex-row md:mt-0 md:block">
+                        <a href="#" class="text-gray-800 text-sm hover:font-medium md:mx-4">Home</a>
+                        <a href="#" class="text-gray-800 text-sm hover:font-medium md:mx-4">Contact</a>
+                        <a href="#" class="text-gray-800 text-sm hover:font-medium md:mx-4">About Us</a>
+                    </div>
+                </div>
+            </div>
+        </nav>`,
+            }
+        }
+    }
+</script>
--- a/src/components/ui/Navbars/WithAvatarAndAlertIcon.vue
+++ b/src/components/ui/Navbars/WithAvatarAndAlertIcon.vue
@@ -0,0 +1,110 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="py-6" slot="component">
+            <nav class="bg-white shadow">
+                <div class="container mx-auto px-6 py-3">
+                    <div class="md:flex md:items-center md:justify-between">
+                        <div class="flex justify-between items-center">
+                            <div class="text-xl font-semibold text-gray-700">
+                                <a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a>
+                            </div>
+
+                            <!-- Mobile menu button -->
+                            <div class="flex md: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="h-6 w-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 ? 'hidden' : ''" class="md:flex md:items-center md:justify-between flex-1">
+                            <div class="flex flex-col -mx-4 md:flex-row md:items-center md:mx-8">
+                                <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 font-medium rounded-md hover:bg-gray-300">Join Slack</a>
+                                <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 font-medium rounded-md hover:bg-gray-300">Browse Topics</a>
+                                <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 font-medium rounded-md hover:bg-gray-300">Random Item</a>
+                                <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 font-medium rounded-md hover:bg-gray-300">Experts</a>
+                            </div>
+
+                            <div class="flex items-center mt-4 md:mt-0">
+                                <button class="mx-4 hidden md:block text-gray-600 hover:text-gray-700 focus:text-gray-700 focus:outline-none" aria-label="show notifications">
+                                    <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                        <path d="M15 17H20L18.5951 15.5951C18.2141 15.2141 18 14.6973 18 14.1585V11C18 8.38757 16.3304 6.16509 14 5.34142V5C14 3.89543 13.1046 3 12 3C10.8954 3 10 3.89543 10 5V5.34142C7.66962 6.16509 6 8.38757 6 11V14.1585C6 14.6973 5.78595 15.2141 5.40493 15.5951L4 17H9M15 17V18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18V17M15 17H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                                    </svg>
+                                </button>
+
+                                <button type="button" class="flex items-center focus:outline-none" aria-label="toggle profile dropdown">
+                                    <div class="h-8 w-8 overflow-hidden rounded-full border-2  border-gray-400">
+                                        <img src="https://lh3.googleusercontent.com/a-/AOh14Gi0DgItGDTATTFV6lPiVrqtja6RZ_qrY91zg42o-g" class="h-full w-full object-cover" alt="avatar">
+                                    </div>
+
+                                    <h3 class="mx-2 text-sm text-gray-700 font-medium md:hidden">Khatab wedaa</h3>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Navbar With Avatar',
+                isOpen: false,
+                code: `
+        <nav class="bg-white shadow">
+            <div class="container mx-auto px-6 py-3">
+                <div class="md:flex md:items-center md:justify-between">
+                    <div class="flex justify-between items-center">
+                        <div class="text-xl font-semibold text-gray-700">
+                            <a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a>
+                        </div>
+
+                        <!-- Mobile menu button -->
+                        <div class="flex md: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="h-6 w-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="hidden md:flex md:items-center md:justify-between flex-1">
+                        <div class="flex flex-col -mx-4 md:flex-row md:items-center md:mx-8">
+                            <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 font-medium rounded-md hover:bg-gray-300">Join Slack</a>
+                            <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 font-medium rounded-md hover:bg-gray-300">Browse Topics</a>
+                            <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 font-medium rounded-md hover:bg-gray-300">Random Item</a>
+                            <a href="#" class="mx-2 mt-2 md:mt-0 px-2 py-1 text-sm text-gray-700 font-medium rounded-md hover:bg-gray-300">Experts</a>
+                        </div>
+
+                        <div class="flex items-center mt-4 md:mt-0">
+                            <button class="mx-4 hidden md:block text-gray-600 hover:text-gray-700 focus:text-gray-700 focus:outline-none" aria-label="show notifications">
+                                <svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M15 17H20L18.5951 15.5951C18.2141 15.2141 18 14.6973 18 14.1585V11C18 8.38757 16.3304 6.16509 14 5.34142V5C14 3.89543 13.1046 3 12 3C10.8954 3 10 3.89543 10 5V5.34142C7.66962 6.16509 6 8.38757 6 11V14.1585C6 14.6973 5.78595 15.2141 5.40493 15.5951L4 17H9M15 17V18C15 19.6569 13.6569 21 12 21C10.3431 21 9 19.6569 9 18V17M15 17H9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                                </svg>
+                            </button>
+
+                            <button type="button" class="flex items-center focus:outline-none" aria-label="toggle profile dropdown">
+                                <div class="h-8 w-8 overflow-hidden rounded-full border-2  border-gray-400">
+                                    <img src="https://lh3.googleusercontent.com/a-/AOh14Gi0DgItGDTATTFV6lPiVrqtja6RZ_qrY91zg42o-g" class="h-full w-full object-cover" alt="avatar">
+                                </div>
+
+                                <h3 class="mx-2 text-sm text-gray-700 font-medium md:hidden">Khatab wedaa</h3>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </nav>`,
+            }
+        }
+    }
+</script>
--- a/src/components/ui/Navbars/WithSearch.vue
+++ b/src/components/ui/Navbars/WithSearch.vue
@@ -0,0 +1,80 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="py-6" slot="component">
+            <nav class="bg-white shadow">
+                <div class="container mx-auto px-6 py-3 md:flex">
+                    <div class="flex justify-between items-center">
+                        <div>
+                            <a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a>
+                        </div>
+                        
+                        <!-- Mobile menu button -->
+                        <div class="flex md: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="h-6 w-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 ? 'hidden' : ''" class="w-full md:flex md:items-center md:justify-between md:block">
+                        <div class="flex flex-col -mx-4 px-2 py-3 md:flex-row md:mx-0 md:py-0">
+                            <a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
+                            <a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
+                            <a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
+                        </div>
+                        
+                        <div>
+                            <input type="text" class="w-full px-4 py-3 leading-tight text-sm text-gray-100 bg-gray-800 rounded placeholder-gray-200 focus:outline-none focus:bg-gray-700" placeholder="Search" aria-label="Search">
+                        </div>
+                    </div>
+                </div>
+            </nav>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'With Search',
+                isOpen: false,
+                code: `
+        <nav class="bg-white shadow">
+            <div class="container mx-auto px-6 py-3 md:flex">
+                <div class="flex justify-between items-center">
+                    <div>
+                        <a href="#" class="text-gray-800 text-xl font-bold hover:text-gray-700 md:text-2xl">Brand</a>
+                    </div>
+                    
+                    <!-- Mobile menu button -->
+                    <div class="flex md: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="h-6 w-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="w-full hidden md:flex md:items-center md:justify-between md:block">
+                    <div class="flex flex-col -mx-4 px-2 py-3 md:flex-row md:mx-0 md:py-0">
+                        <a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Home</a>
+                        <a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">About</a>
+                        <a href="#" class="py-1 px-2 text-gray-800 rounded text-sm hover:bg-gray-900 hover:text-gray-100 hover:font-medium md:mx-2">Contact</a>
+                    </div>
+                    
+                    <div>
+                        <input type="text" class="w-full px-4 py-3 leading-tight text-sm text-gray-100 bg-gray-800 rounded placeholder-gray-200 focus:outline-none focus:bg-gray-700" placeholder="Search" aria-label="Search">
+                    </div>
+                </div>
+            </div>
+        </nav>`,
+            }
+        }
+    }
+</script>
--- a/src/components/ui/Paginations/Simple.vue
+++ b/src/components/ui/Paginations/Simple.vue
@@ -0,0 +1,69 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="px-3 py-6" slot="component">
+            <div class="flex justify-center items-center">
+                <ul class="flex">
+                    <li class="mx-1 px-3 py-2 bg-gray-200 text-gray-500 rounded-lg">
+                        <a href="#" class="flex items-center font-bold cursor-not-allowed">
+                            <span class="mx-1">previous</span>
+                        </a>
+                    </li>
+
+                    <li class="mx-1 px-3 py-2 bg-gray-200 text-gray-700 hover:bg-gray-700 hover:text-gray-200 rounded-lg">
+                        <a href="#" class="font-bold">1</a>
+                    </li>
+
+                    <li class="mx-1 px-3 py-2 bg-gray-200 text-gray-700 hover:bg-gray-700 hover:text-gray-200 rounded-lg">
+                        <a href="#" class="font-bold">2</a>
+                    </li>
+
+                    <li class="mx-1 px-3 py-2 bg-gray-200 text-gray-700 hover:bg-gray-700 hover:text-gray-200 rounded-lg">
+                        <a href="#" class="font-bold">3</a>
+                    </li>
+
+                    <li class="mx-1 px-3 py-2 bg-gray-200 text-gray-700 hover:bg-gray-700 hover:text-gray-200 rounded-lg">
+                        <a href="#" class="flex items-center font-bold">
+                            <span class="mx-1">Next</span>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Pagination',
+                code: `
+        <ul class="flex">
+            <li class="mx-1 px-3 py-2 bg-gray-200 text-gray-500 rounded-lg">
+                <a href="#" class="flex items-center font-bold cursor-not-allowed">
+                    <span class="mx-1">previous</span>
+                </a>
+            </li>
+
+            <li class="mx-1 px-3 py-2 bg-gray-200 text-gray-700 hover:bg-gray-700 hover:text-gray-200 rounded-lg">
+                <a href="#" class="font-bold">1</a>
+            </li>
+
+            <li class="mx-1 px-3 py-2 bg-gray-200 text-gray-700 hover:bg-gray-700 hover:text-gray-200 rounded-lg">
+                <a href="#" class="font-bold">2</a>
+            </li>
+
+            <li class="mx-1 px-3 py-2 bg-gray-200 text-gray-700 hover:bg-gray-700 hover:text-gray-200 rounded-lg">
+                <a href="#" class="font-bold">3</a>
+            </li>
+            
+            <li class="mx-1 px-3 py-2 bg-gray-200 text-gray-700 hover:bg-gray-700 hover:text-gray-200 rounded-lg">
+                <a href="#" class="flex items-center font-bold">
+                    <span class="mx-1">Next</span>
+                </a>
+            </li>
+        </ul>`
+            }
+        }
+    }
+</script>
--- a/src/components/ui/Sections/AboutMe.vue
+++ b/src/components/ui/Sections/AboutMe.vue
@@ -0,0 +1,111 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="py-6" slot="component">
+            <section class="bg-gray-800">
+                <div class="container mx-auto px-6 py-8">
+                    <div class="lg:flex items-center">
+                        <div class="lg:w-1/2">
+                            <h2 class="text-gray-100 text-3xl font-bold">Who I am</h2>
+
+                            <p class="text-gray-400 lg:max-w-md mt-4">
+                                Hi I am jane , software engineer <a class="text-indigo-300 font-bold" href="#">@BakaTeam</a> , Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum in sed non alias, fugiat, commodi nemo ut fugit corrupti dolorem sequi ex veniam consequuntur id, maiores beatae ipsa omnis aliquam?
+                            </p>
+
+                            <div class="flex items-center -mx-2 mt-6">
+                                <a class="mx-2" href="#" aria-label="Twitter">
+                                    <svg class="fill-current text-gray-300 hover:text-gray-500 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                        <path d="M492 109.5c-17.4 7.7-36 12.9-55.6 15.3 20-12 35.4-31 42.6-53.6-18.7 11.1-39.4 19.2-61.5 23.5C399.8 75.8 374.6 64 346.8 64c-53.5 0-96.8 43.4-96.8 96.9 0 7.6.8 15 2.5 22.1-80.5-4-151.9-42.6-199.6-101.3-8.3 14.3-13.1 31-13.1 48.7 0 33.6 17.2 63.3 43.2 80.7-16-.4-31-4.8-44-12.1v1.2c0 47 33.4 86.1 77.7 95-8.1 2.2-16.7 3.4-25.5 3.4-6.2 0-12.3-.6-18.2-1.8 12.3 38.5 48.1 66.5 90.5 67.3-33.1 26-74.9 41.5-120.3 41.5-7.8 0-15.5-.5-23.1-1.4C62.8 432 113.7 448 168.3 448 346.6 448 444 300.3 444 172.2c0-4.2-.1-8.4-.3-12.5C462.6 146 479 129 492 109.5z"/>
+                                    </svg>
+                                </a>
+                            
+                                <a class="mx-2" href="#" aria-label="Facebook">
+                                    <svg class="fill-current text-gray-300 hover:text-gray-500 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                        <path d="M426.8 64H85.2C73.5 64 64 73.5 64 85.2v341.6c0 11.7 9.5 21.2 21.2 21.2H256V296h-45.9v-56H256v-41.4c0-49.6 34.4-76.6 78.7-76.6 21.2 0 44 1.6 49.3 2.3v51.8h-35.3c-24.1 0-28.7 11.4-28.7 28.2V240h57.4l-7.5 56H320v152h106.8c11.7 0 21.2-9.5 21.2-21.2V85.2c0-11.7-9.5-21.2-21.2-21.2z"/>
+                                    </svg>
+                                </a>
+                            
+                                <a class="mx-2" href="#" aria-label="Linkden">
+                                    <svg class="fill-current text-gray-300 hover:text-gray-500 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                        <path d="M417.2 64H96.8C79.3 64 64 76.6 64 93.9V415c0 17.4 15.3 32.9 32.8 32.9h320.3c17.6 0 30.8-15.6 30.8-32.9V93.9C448 76.6 434.7 64 417.2 64zM183 384h-55V213h55v171zm-25.6-197h-.4c-17.6 0-29-13.1-29-29.5 0-16.7 11.7-29.5 29.7-29.5s29 12.7 29.4 29.5c0 16.4-11.4 29.5-29.7 29.5zM384 384h-55v-93.5c0-22.4-8-37.7-27.9-37.7-15.2 0-24.2 10.3-28.2 20.3-1.5 3.6-1.9 8.5-1.9 13.5V384h-55V213h55v23.8c8-11.4 20.5-27.8 49.6-27.8 36.1 0 63.4 23.8 63.4 75.1V384z"/>
+                                    </svg>
+                                </a>
+                            
+                                <a class="mx-2" href="#" aria-label="Github">
+                                    <svg class="fill-current text-gray-300 hover:text-gray-500 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                        <path d="M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9 1.4.3 2.6.4 3.8.4 8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1-8.4 1.9-15.9 2.7-22.6 2.7-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1 10.5 0 20-3.4 25.6-6 2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8 0 0 1.6-.5 5-.5 8.1 0 26.4 3.1 56.6 24.1 17.9-5.1 37-7.6 56.1-7.7 19 .1 38.2 2.6 56.1 7.7 30.2-21 48.5-24.1 56.6-24.1 3.4 0 5 .5 5 .5 12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5 1.2 0 2.6-.1 4-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z"/>
+                                    </svg>
+                                </a>
+                            </div>
+                        </div>
+
+                        <div class="mt-8 lg:mt-0 lg:w-1/2">
+                            <div class="flex items-center justify-center lg:justify-end">
+                                <div class="max-w-lg">
+                                    <img class="w-full h-64 object-cover object-center rounded-md" src="https://images.unsplash.com/photo-1484627147104-f5197bcd6651?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'About Me',
+                code: `
+        <section class="bg-gray-800">
+            <div class="container mx-auto px-6 py-8">
+                <div class="lg:flex items-center">
+                    <div class="lg:w-1/2">
+                        <h2 class="text-gray-100 text-3xl font-bold">Who I am</h2>
+
+                        <p class="text-gray-400 lg:max-w-md mt-4">
+                            Hi I am jane , software engineer <a class="text-indigo-300 font-bold" href="#">@BakaTeam</a> , Lorem ipsum, dolor sit amet consectetur adipisicing elit. Illum in sed non alias, fugiat, commodi nemo ut fugit corrupti dolorem sequi ex veniam consequuntur id, maiores beatae ipsa omnis aliquam?
+                        </p>
+
+                        <div class="flex items-center -mx-2 mt-6">
+                            <a class="mx-2" href="#" aria-label="Twitter">
+                                <svg class="fill-current text-gray-300 hover:text-gray-500 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M492 109.5c-17.4 7.7-36 12.9-55.6 15.3 20-12 35.4-31 42.6-53.6-18.7 11.1-39.4 19.2-61.5 23.5C399.8 75.8 374.6 64 346.8 64c-53.5 0-96.8 43.4-96.8 96.9 0 7.6.8 15 2.5 22.1-80.5-4-151.9-42.6-199.6-101.3-8.3 14.3-13.1 31-13.1 48.7 0 33.6 17.2 63.3 43.2 80.7-16-.4-31-4.8-44-12.1v1.2c0 47 33.4 86.1 77.7 95-8.1 2.2-16.7 3.4-25.5 3.4-6.2 0-12.3-.6-18.2-1.8 12.3 38.5 48.1 66.5 90.5 67.3-33.1 26-74.9 41.5-120.3 41.5-7.8 0-15.5-.5-23.1-1.4C62.8 432 113.7 448 168.3 448 346.6 448 444 300.3 444 172.2c0-4.2-.1-8.4-.3-12.5C462.6 146 479 129 492 109.5z"/>
+                                </svg>
+                            </a>
+                        
+                            <a class="mx-2" href="#" aria-label="Facebook">
+                                <svg class="fill-current text-gray-300 hover:text-gray-500 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M426.8 64H85.2C73.5 64 64 73.5 64 85.2v341.6c0 11.7 9.5 21.2 21.2 21.2H256V296h-45.9v-56H256v-41.4c0-49.6 34.4-76.6 78.7-76.6 21.2 0 44 1.6 49.3 2.3v51.8h-35.3c-24.1 0-28.7 11.4-28.7 28.2V240h57.4l-7.5 56H320v152h106.8c11.7 0 21.2-9.5 21.2-21.2V85.2c0-11.7-9.5-21.2-21.2-21.2z"/>
+                                </svg>
+                            </a>
+                        
+                            <a class="mx-2" href="#" aria-label="Linkden">
+                                <svg class="fill-current text-gray-300 hover:text-gray-500 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M417.2 64H96.8C79.3 64 64 76.6 64 93.9V415c0 17.4 15.3 32.9 32.8 32.9h320.3c17.6 0 30.8-15.6 30.8-32.9V93.9C448 76.6 434.7 64 417.2 64zM183 384h-55V213h55v171zm-25.6-197h-.4c-17.6 0-29-13.1-29-29.5 0-16.7 11.7-29.5 29.7-29.5s29 12.7 29.4 29.5c0 16.4-11.4 29.5-29.7 29.5zM384 384h-55v-93.5c0-22.4-8-37.7-27.9-37.7-15.2 0-24.2 10.3-28.2 20.3-1.5 3.6-1.9 8.5-1.9 13.5V384h-55V213h55v23.8c8-11.4 20.5-27.8 49.6-27.8 36.1 0 63.4 23.8 63.4 75.1V384z"/>
+                                </svg>
+                            </a>
+                        
+                            <a class="mx-2" href="#" aria-label="Github">
+                                <svg class="fill-current text-gray-300 hover:text-gray-500 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                                    <path d="M256 32C132.3 32 32 134.9 32 261.7c0 101.5 64.2 187.5 153.2 217.9 1.4.3 2.6.4 3.8.4 8.3 0 11.5-6.1 11.5-11.4 0-5.5-.2-19.9-.3-39.1-8.4 1.9-15.9 2.7-22.6 2.7-43.1 0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1 1.4-14.1h.1c22.5 2 34.3 23.8 34.3 23.8 11.2 19.6 26.2 25.1 39.6 25.1 10.5 0 20-3.4 25.6-6 2-14.8 7.8-24.9 14.2-30.7-49.7-5.8-102-25.5-102-113.5 0-25.1 8.7-45.6 23-61.6-2.3-5.8-10-29.2 2.2-60.8 0 0 1.6-.5 5-.5 8.1 0 26.4 3.1 56.6 24.1 17.9-5.1 37-7.6 56.1-7.7 19 .1 38.2 2.6 56.1 7.7 30.2-21 48.5-24.1 56.6-24.1 3.4 0 5 .5 5 .5 12.2 31.6 4.5 55 2.2 60.8 14.3 16.1 23 36.6 23 61.6 0 88.2-52.4 107.6-102.3 113.3 8 7.1 15.2 21.1 15.2 42.5 0 30.7-.3 55.5-.3 63 0 5.4 3.1 11.5 11.4 11.5 1.2 0 2.6-.1 4-.4C415.9 449.2 480 363.1 480 261.7 480 134.9 379.7 32 256 32z"/>
+                                </svg>
+                            </a>
+                        </div>
+                    </div>
+
+                    <div class="mt-8 lg:mt-0 lg:w-1/2">
+                        <div class="flex items-center justify-center lg:justify-end">
+                            <div class="max-w-lg">
+                                <img class="w-full h-64 object-cover object-center rounded-md" src="https://images.unsplash.com/photo-1484627147104-f5197bcd6651?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" alt="">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>`
+            }
+        }
+    }
+</script>
--- a/src/components/ui/Sections/OurTeam.vue
+++ b/src/components/ui/Sections/OurTeam.vue
@@ -0,0 +1,103 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="py-6" slot="component">
+            <section class="bg-white container mx-auto p-6">
+                <h2 class="text-gray-800 font-medium capitalize text-xl md:text-2xl">Our Team</h2>
+
+                <div class="flex items-center justify-center">
+                    <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-8">
+                        <div class="max-w-xs w-full text-center">
+                            <img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1493863641943-9b68992a8d07?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=739&q=80" alt="avatar"/>
+
+                            <div class="mt-2">
+                                <h3 class="text-lg font-medium text-gray-700">Ahmed Omer</h3>
+                                <span class="mt-1 font-medium text-gray-600">CEO</span>
+                            </div>
+                        </div>
+
+                        <div class="max-w-xs w-full text-center">
+                            <img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1516756587022-7891ad56a8cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"/>
+
+                            <div class="mt-2">
+                                <h3 class="text-lg font-medium text-gray-700">Jane Doe</h3>
+                                <span class="mt-1 font-medium text-gray-600">Co-founder</span>
+                            </div>
+                        </div>
+
+                        <div class="max-w-xs w-full text-center">
+                            <img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=731&q=80" alt="avatar"/>
+
+                            <div class="mt-2">
+                                <h3 class="text-lg font-medium text-gray-700">Steve Ben</h3>
+                                <span class="mt-1 font-medium text-gray-600">UI/UX</span>
+                            </div>
+                        </div>
+
+                        <div class="max-w-xs w-full text-center">
+                            <img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"/>
+
+                            <div class="mt-2">
+                                <h3 class="text-lg font-medium text-gray-700">Patterson Johnson</h3>
+                                <span class="mt-1 font-medium text-gray-600">Software Engineer</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Our Team',
+                code: `
+        <section class="bg-white container mx-auto p-6">
+            <h2 class="text-gray-800 font-medium capitalize text-xl md:text-2xl">Our Team</h2>
+
+            <div class="flex items-center justify-center">
+                <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-8">
+                    <div class="max-w-xs w-full text-center">
+                        <img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1493863641943-9b68992a8d07?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=739&q=80" alt="avatar"/>
+
+                        <div class="mt-2">
+                            <h3 class="text-lg font-medium text-gray-700">Ahmed Omer</h3>
+                            <span class="mt-1 font-medium text-gray-600">CEO</span>
+                        </div>
+                    </div>
+
+                    <div class="max-w-xs w-full text-center">
+                        <img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1516756587022-7891ad56a8cd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"/>
+
+                        <div class="mt-2">
+                            <h3 class="text-lg font-medium text-gray-700">Jane Doe</h3>
+                            <span class="mt-1 font-medium text-gray-600">Co-founder</span>
+                        </div>
+                    </div>
+
+                    <div class="max-w-xs w-full text-center">
+                        <img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=731&q=80" alt="avatar"/>
+
+                        <div class="mt-2">
+                            <h3 class="text-lg font-medium text-gray-700">Steve Ben</h3>
+                            <span class="mt-1 font-medium text-gray-600">UI/UX</span>
+                        </div>
+                    </div>
+
+                    <div class="max-w-xs w-full text-center">
+                        <img class="h-48 w-full object-cover object-center mx-auto rounded-lg" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"/>
+
+                        <div class="mt-2">
+                            <h3 class="text-lg font-medium text-gray-700">Patterson Johnson</h3>
+                            <span class="mt-1 font-medium text-gray-600">Software Engineer</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>`
+            }
+        }
+    }
+</script>
--- a/src/components/ui/Sections/ParagraphWithImage.vue
+++ b/src/components/ui/Sections/ParagraphWithImage.vue
@@ -0,0 +1,49 @@
+<template>
+    <view-component :name="name" :code="code">
+        <div class="py-6" slot="component">
+            <section class="bg-gray-100 lg:py-12 lg:flex lg:justify-center">
+                <div class="bg-white lg:mx-8 lg:flex lg:max-w-5xl lg:shadow-lg lg:rounded-lg">
+                    <div class="lg:w-1/2">
+                        <div class="h-64 bg-cover lg:rounded-lg lg:h-full" style="background-image:url('https://images.unsplash.com/photo-1497493292307-31c376b6e479?ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80')"></div>
+                    </div>
+
+                    <div class="py-12 px-6 max-w-xl lg:max-w-5xl lg:w-1/2">
+                        <h2 class="text-2xl text-gray-800 font-bold md:text-3xl">Build Your New <span class="text-indigo-600">Idea</span></h2>
+                        <p class="mt-4 text-gray-600">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem modi reprehenderit vitae exercitationem aliquid dolores ullam temporibus enim expedita aperiam mollitia iure consectetur dicta tenetur, porro consequuntur saepe accusantium consequatur.</p>
+                        
+                        <div class="mt-8">
+                            <a href="#" class="bg-gray-900 text-gray-100 px-5 py-3 font-semibold rounded">Start Now</a>
+                        </div>
+                    </div>
+                </div>
+            </section> 
+        </div>
+    </view-component>
+</template>
+
+<script>
+    export default {
+        data() {
+            return {
+                name: 'Paragraph With Image',
+                code:  `
+        <section class="bg-gray-100 lg:py-12 lg:flex lg:justify-center">
+            <div class="bg-white lg:mx-8 lg:flex lg:max-w-5xl lg:shadow-lg lg:rounded-lg">
+                <div class="lg:w-1/2">
+                    <div class="h-64 bg-cover lg:rounded-lg lg:h-full" style="background-image:url('https://images.unsplash.com/photo-1497493292307-31c376b6e479?ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80')"></div>
+                </div>
+
+                <div class="py-12 px-6 max-w-xl lg:max-w-5xl lg:w-1/2">
+                    <h2 class="text-2xl text-gray-800 font-bold md:text-3xl">Build Your New <span class="text-indigo-600">Idea</span></h2>
+                    <p class="mt-4 text-gray-600">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quidem modi reprehenderit vitae exercitationem aliquid dolores ullam temporibus enim expedita aperiam mollitia iure consectetur dicta tenetur, porro consequuntur saepe accusantium consequatur.</p>
+                    
+                    <div class="mt-8">
+                        <a href="#" class="bg-gray-900 text-gray-100 px-5 py-3 font-semibold rounded">Start Now</a>
+                    </div>
+                </div>
+            </div>
+        </section> `
+            }
+        }
+    }
+</script>
--- a/src/components/utilities/CodeSnippet.vue
+++ b/src/components/utilities/CodeSnippet.vue
@@ -1,6 +1,6 @@
 <template>
    <div class="rounded overflow-hidden">
-        <pre><code class="px-8 py-6 rounded-md overflow-x-scroll overflow-hidden">{{ code }}</code></pre>
+        <pre><code class="px-8 py-6 rounded-md overflow-x-scroll overflow-hidden text-sm">{{ code }}</code></pre>
    </div>
 </template>

--- a/src/components/utilities/ViewComponent.vue
+++ b/src/components/utilities/ViewComponent.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="bg-gray-300 border rounded-md overflow-hidden">
+    <div class="bg-gray-300 border rounded-md overflow-hidden mb-12">
        <div class="bg-white px-4 py-2 border-b">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="text-gray-700 font-medium capitalize md:text-lg">{{ name }}</div>
@@ -32,6 +32,7 @@
        <div class="flex justify-center items-center">
            <div class="w-full relative" :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">
                        <div class="w-full h-full absolute top-0 left-0 z-10">
@@ -53,10 +54,8 @@
 <script>
 import CodeSnippet from "./CodeSnippet";

-let beautify_html = require('js-beautify').html;
-
 export default {
-    props: ['name'],
+    props: ['name' , 'code'],

    components: {
        CodeSnippet
@@ -67,15 +66,8 @@ export default {
            viewCode: false,
            rtl: false,
            copied: false,
-            code: null,
        }
    },
-    created() {
-        this.$nextTick(() => {
-            let id = this.$options.filters.toId(this.name);
-            this.code = beautify_html(document.getElementById(id).innerHTML);
-        });
-    },
    methods: {
        onCopy() {
            this.copied = ! this.copied;
--- a/src/main.js
+++ b/src/main.js
@@ -1,20 +1,21 @@
-import Vue from 'vue'
-import App from './App.vue'
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+import App from './App.vue';
+import router from "./router";
 import VueClipboard from 'vue-clipboard2';
 import VueAnalytics from 'vue-analytics';
+import ViewComponent from './components/utilities/ViewComponent';
+
+Vue.use(VueRouter);
+
+Vue.component('view-component', ViewComponent);

 Vue.config.productionTip = false;

 Vue.use(VueClipboard);

-Vue.use(VueAnalytics, {
-  id: 'UA-167213766-1'
-});
+Vue.use(VueAnalytics, { id: 'UA-167213766-1' });

-Vue.filter('toId', (componentName) => {
-  return componentName.toLowerCase().replace(/ /g, '-')
-});
+new Vue({ render: h => h(App), router }).$mount('#app');

-new Vue({
-  render: h => h(App),
-}).$mount('#app');
+router.replace('/alerts');
--- a/src/router.js
+++ b/src/router.js
@@ -0,0 +1,24 @@
+import VueRouter from "vue-router";
+
+const Alerts = () => import("./components/categories/Alerts");
+const Cards = () => import("./components/categories/Cards");
+const Forms = () => import("./components/categories/Forms");
+const Navbars = () => import("./components/categories/Navbars");
+const Headers = () => import("./components/categories/Headers");
+const Sections = () => import("./components/categories/Sections");
+const Paginations = () => import("./components/categories/Paginations");
+const Footers = () => import("./components/categories/Footers");
+
+  export default new VueRouter({
+    mode: 'history',
+    routes: [
+      { path: "/alerts", component: Alerts, name: "Alerts" },
+      { path: "/cards", component: Cards, name: "Cards" },
+      { path: "/forms", component: Forms, name: "Forms" },
+      { path: "/navbars", component: Navbars, name: "Navbars" },
+      { path: "/headers", component: Headers, name: "Headers" },
+      { path: "/sections", component: Sections, name: "Sections" },
+      { path: "/paginations", component: Paginations, name: "Paginations" },
+      { path: "/footers", component: Footers, name: "Footers" },
+    ],
+  });