Rename Headers category to Heros

src/App.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="bg-white font-roboto" id="app">
-        <Header></Header>
+        <main-header></main-header>
 
         <main class="container mx-auto px-6" id="main">
             <div class="mt-16 text-center">
@@ -21,7 +21,7 @@
                 </div>
 
                 <p class="mt-8 text-gray-700 text-center">
-                    Headers components require simple <span class="font-semibold">- don't panic please 😎 -</span>
+                    Heros 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>
@@ -42,12 +42,12 @@
 </template>
 
 <script>
-import Header from "./components/Header";
+import MainHeader from "./components/Header";
 import BackToTop from "vue-backtotop";
 
 export default {
     components: {
-        Header,
+        MainHeader,
         BackToTop,
     },
 

src/components/categories/Heros.vue

@@ -1,6 +1,6 @@
 <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>
+        <h1 class="text-2xl text-gray-800 font-semibold capitalize mb-6">Heros</h1>
 
         <e-commerce></e-commerce>
         <with-image></with-image>
@@ -9,9 +9,9 @@
 </template>
 
 <script>
-import ECommerce from "../ui/Headers/ECommerce";
-import WithImage from "../ui/Headers/WithImage";
-import WithPattern from "../ui/Headers/WithPattern";
+import ECommerce from "../ui/Heros/ECommerce";
+import WithImage from "../ui/Heros/WithImage";
+import WithPattern from "../ui/Heros/WithPattern";
 
 export default {
     components: { 

src/components/ui/Heros/WithImage.vue

@@ -57,7 +57,7 @@
     export default {
         data() {
             return {
-                name: 'Header With Image',
+                name: 'With Image',
                 isOpen: false,
                 code: `
         <header class="bg-white">

src/components/ui/Heros/WithPattern.vue

@@ -56,7 +56,7 @@
     export default {
         data() {
             return {
-                name: 'Header With Pattern',
+                name: 'With Pattern',
                 code: `
         <header class="pattern bg-gray-900">
             <div class="container mx-auto px-6">

src/router.js

@@ -4,7 +4,7 @@ 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 Heros = () => import("./components/categories/Heros");
 const Sections = () => import("./components/categories/Sections");
 const Paginations = () => import("./components/categories/Paginations");
 const Footers = () => import("./components/categories/Footers");
@@ -17,7 +17,7 @@ export default new VueRouter({
         { 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: "/heros", component: Heros, name: "Heros" },
         { path: "/sections", component: Sections, name: "Sections" },
         { path: "/paginations", component: Paginations, name: "Paginations" },
         { path: "/footers", component: Footers, name: "Footers" },