Redesign website

assets/svg/logo-sidebar.svg

@@ -0,0 +1,5 @@
+
+<svg viewBox="0 0 209 180" fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M87.843 108.487L90.617 101.553C91.312 99.571 93.433 98.476 95.451 99.057L132.142 110.072L171.408 45.962L71.598 17.434L87.843 108.487ZM173.547 38.077V0L138.402 26.349L173.547 38.077ZM208.574 22.6245L181.472 0.435799V20.2472L208.574 22.6245ZM172.477 59.434L142.721 108.17L169.585 100.008L172.477 59.434ZM126.594 116.887L96.64 107.892C87.804 129.962 93.985 114.906 66.566 179.728L126.594 116.887ZM63.396 16.6019L0.673634 29.796L75.957 86.179L63.396 16.6019ZM52.7774 78.809L19.6133 53.926L0.634033 68.587L52.7774 78.809Z" fill="#3B82F6"/>
+</svg>

assets/svg/logo.svg

@@ -1,10 +1,5 @@
-<svg class="w-10 h-10 mr-1" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+
-    <path d="M132.843 179.487L135.617 172.553C136.312 170.571 138.433 169.476 140.451 170.057L177.142 181.072L216.408 116.962L116.598 88.434L132.843 179.487ZM218.547 109.077V71L183.402 97.349L218.547 109.077ZM253.574 93.6245L226.472 71.4358V91.2472L253.574 93.6245ZM217.477 130.434L187.721 179.17L214.585 171.008L217.477 130.434ZM171.594 187.887L141.64 178.892C132.804 200.962 138.985 185.906 111.566 250.728L171.594 187.887ZM108.396 87.6019L45.6736 100.796L120.957 157.179L108.396 87.6019ZM97.7774 149.809L64.6133 124.926L45.634 139.587L97.7774 149.809Z" fill="#4299E1"/>
+<svg viewBox="0 0 209 180" fill="none"
-    <path d="M132.843 179.487L135.617 172.553C136.312 170.571 138.433 169.476 140.451 170.057L177.142 181.072L216.408 116.962L116.598 88.434L132.843 179.487ZM218.547 109.077V71L183.402 97.349L218.547 109.077ZM253.574 93.6245L226.472 71.4358V91.2472L253.574 93.6245ZM217.477 130.434L187.721 179.17L214.585 171.008L217.477 130.434ZM171.594 187.887L141.64 178.892C132.804 200.962 138.985 185.906 111.566 250.728L171.594 187.887ZM108.396 87.6019L45.6736 100.796L120.957 157.179L108.396 87.6019ZM97.7774 149.809L64.6133 124.926L45.634 139.587L97.7774 149.809Z" fill="url(#paint0_linear)"/>
+    xmlns="http://www.w3.org/2000/svg">
-    <defs>
+    <path d="M87.843 108.487L90.617 101.553C91.312 99.571 93.433 98.476 95.451 99.057L132.142 110.072L171.408 45.962L71.598 17.434L87.843 108.487ZM173.547 38.077V0L138.402 26.349L173.547 38.077ZM208.574 22.6245L181.472 0.435799V20.2472L208.574 22.6245ZM172.477 59.434L142.721 108.17L169.585 100.008L172.477 59.434ZM126.594 116.887L96.64 107.892C87.804 129.962 93.985 114.906 66.566 179.728L126.594 116.887ZM63.396 16.6019L0.673634 29.796L75.957 86.179L63.396 16.6019ZM52.7774 78.809L19.6133 53.926L0.634033 68.587L52.7774 78.809Z" fill="#60A5FA"/>
-        <linearGradient id="paint0_linear" x1="149.604" y1="71" x2="149.604" y2="250.728" gradientUnits="userSpaceOnUse">
-            <stop stop-color="#3182CE"/>
-            <stop offset="1" stop-color="#81E6D9" stop-opacity="0"/>
-        </linearGradient>
-    </defs>
 </svg>

components/Footer.vue

@@ -1,17 +0,0 @@
-<template>
-    <div class="container px-6 mx-auto">
-        <div class="flex flex-col items-center">
-            <div class="py-6 text-center">
-                <p class="flex items-center text-sm text-gray-500 sm:text-base">
-                    Build with 
-                    <svg class="w-5 h-5 mx-1 text-gray-700" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M2 8.40001C1.99975 6.95035 2.58239 5.56146 3.61681 4.54584C4.65124 3.53022 6.05058 2.97317 7.5 3.00001C9.21732 2.99089 10.856 3.71919 12 5.00001C13.144 3.71919 14.7827 2.99089 16.5 3.00001C17.9494 2.97317 19.3488 3.53022 20.3832 4.54584C21.4176 5.56146 22.0002 6.95035 22 8.40001C22 13.756 15.621 17.8 12 21C8.387 17.773 2 13.76 2 8.40001Z" fill="currentColor"></path>
-                    </svg> BY &nbsp;
-                    <a href="https://twitter.com/khatabwedaa" target="_blank" class="text-blue-500 hover:underline">Khatab Wedaa</a> 
-                    &nbsp; & &nbsp;
-                    <a href="https://twitter.com/miaababikir" target="_blank" class="text-blue-500 hover:underline">Mosab Ibrahim</a>
-                </p>
-            </div>
-        </div>
-    </div>
-</template>

components/Header.vue

@@ -5,7 +5,7 @@
                 <div class="flex flex-col sm:items-center sm:flex-row sm:justify-between">
                     <div class="flex items-center justify-between sm:justify-start sm:space-x-4 lg:space-x-12">
                         <a href="/" class="inline-flex items-center text-xl font-bold text-white md:text-2xl hover:text-blue-400">
-                            <img class="w-10 h-10 mr-1" src="../assets/svg/logo.svg" alt="logo"> <span class="hidden md:inline">Meraki <span class="text-blue-400">UI</span></span>
+                            <img class="mr-2 w-7 h-7" src="../assets/svg/logo.svg" alt="logo"> <span class="hidden md:inline">Meraki <span class="text-blue-400">UI</span></span>
                         </a>
 
                         <div class="mt-2 space-x-4 sm:mt-0">

components/Logo.vue

@@ -1,29 +0,0 @@
-<template>
-  <svg class="NuxtLogo" width="245" height="180" viewBox="0 0 452 342" xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z"
-      fill="#00C58E"
-    />
-    <path
-      d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z"
-      fill="#108775"
-    />
-    <path
-      d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z"
-      fill="#2F495E"
-    />
-  </svg>
-</template>
-
-<style>
-.NuxtLogo {
-  animation: 1s appear;
-  margin: auto;
-}
-
-@keyframes appear {
-  0% {
-    opacity: 0;
-  }
-}
-</style>

layouts/default.vue

@@ -1,24 +1,9 @@
 <template>
     <div class="bg-white">
         <Nuxt />
-        <footer-component />
-
-        <back-to-top visibleoffset="800">
-            <app-button class="fixed bottom-0 right-0 p-2 mx-5 my-10 text-white bg-gray-800 rounded-md lg:mx-10 hover:bg-gray-900 focus:outline-none" aria-label="Back to top">
-                <svg class="w-6 h-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>
-            </app-button>
-        </back-to-top>
     </div>
 </template>
 
 <script>
-import AppButton from "~/components/utilities/AppButton.vue";
+export default {};
-import FooterComponent from "~/components/Footer";
-import BackToTop from "vue-backtotop";
-
-export default {
-    components: { AppButton, FooterComponent, BackToTop }
-};
 </script>

pages/index.vue

@@ -45,6 +45,34 @@
         </div>
     </header-component>
 
+    <div class="flex h-screen bg-white font-roboto">
+        <div class="flex flex-col w-64 h-screen px-4 py-8 bg-white border-r border-gray-200">
+            <a href="/" class="inline-flex items-center text-xl font-bold text-gray-700 md:text-2xl hover:text-blue-500">
+                <img class="mr-2 w-7 h-7" src="../assets/svg/logo-sidebar.svg" alt="logo"> <span class="hidden md:inline">Meraki <span class="text-blue-500">UI</span></span>
+            </a>
+            
+            <nav class="mt-6 overflow-y-auto">
+                <div
+                    v-for="category in categories"
+                    :key="category.name"
+                >
+                    <app-button
+                        @click="activeCategory = category.name"
+                        class="block px-4 py-2 mt-2 font-medium rounded-md focus:outline-none"
+                        :class="
+                            category.name === activeCategory
+                                ? 'text-blue-500 bg-blue-50'
+                                : 'text-gray-500 hover:text-blue-500 hover:underline'"
+                        >
+                        {{ category.name }}
+                    </app-button>
+                </div>
+
+            </nav>
+        </div>
+
+        <div class="flex flex-col flex-1 overflow-hidden">
+            <main class="flex-1 overflow-x-hidden overflow-y-auto">
                 <div class="container px-4 mx-auto">
                     <div class="py-16 text-center">
                         <h1
@@ -57,35 +85,13 @@
                             </svg>
 
                         </h1>
-            <div class="max-w-2xl mx-auto">
-                <div class="flex items-center justify-center mt-5">
-                    <div class="mt-2 lg:mt-0">
-                        <span
-                            v-for="category in categories"
-                            :key="category.name"
-                        >
-                            <app-button
-                                @click="activeCategory = category.name"
-                                class="px-3 py-1 mt-2 ml-2 text-sm rounded cursor-pointer hover:bg-gray-700 hover:text-gray-200 focus:outline-none"
-                                :class="
-                                    category.name === activeCategory
-                                        ? 'bg-gray-700 text-gray-200'
-                                        : 'bg-gray-200 text-gray-700'"
-                                >
-                                {{ category.name }}
-                            </app-button>
-                        </span>
-                    </div>
-                </div>
-            </div>
                     </div>
 
                     <div class="flex justify-center mb-10">
                         <carbon-ads></carbon-ads>
                     </div>
 
-        <div class="w-full max-w-6xl mx-auto">
+                    <section v-for="category in list" :key="category.name">
-            <div class="mb-16" v-for="category in list" :key="category.name">
                         <h1
                             class="mb-6 text-2xl font-semibold text-gray-800 capitalize"
                             v-text="category.name"
@@ -98,8 +104,22 @@
                         >
                             <component :is="category.name + component.name"></component>
                         </div>
+                    </section>
+
+                    <div class="py-6 text-center">
+                        <p class="flex items-center justify-center text-sm text-gray-500 sm:text-base">
+                            Build with 
+                            <svg class="w-5 h-5 mx-1 text-gray-700" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M2 8.40001C1.99975 6.95035 2.58239 5.56146 3.61681 4.54584C4.65124 3.53022 6.05058 2.97317 7.5 3.00001C9.21732 2.99089 10.856 3.71919 12 5.00001C13.144 3.71919 14.7827 2.99089 16.5 3.00001C17.9494 2.97317 19.3488 3.53022 20.3832 4.54584C21.4176 5.56146 22.0002 6.95035 22 8.40001C22 13.756 15.621 17.8 12 21C8.387 17.773 2 13.76 2 8.40001Z" fill="currentColor"></path>
+                            </svg> BY &nbsp;
+                            <a href="https://twitter.com/khatabwedaa" target="_blank" class="text-blue-500 hover:underline">Khatab Wedaa</a> 
+                            &nbsp; & &nbsp;
+                            <a href="https://twitter.com/miaababikir" target="_blank" class="text-blue-500 hover:underline">Mosab Ibrahim</a>
+                        </p>
                     </div>
                 </div>
+            </main>
+        </div>
     </div>
 </div>
 </template>
@@ -262,7 +282,7 @@ export default {
 
     data() {
         return {
-            components_count: 63,
+            components_count: 64,
             categories: [],
             activeCategory: "Alerts",
             component: new Component(),