fix: remove style wrapper components

Author: stafyniaksacha

components/AppCard.vue

@@ -11,7 +11,7 @@ const year = new Date().getFullYear()
 
 <template>
   <footer class="py-8 bg-muted-100 dark:bg-muted-800">
-    <AppContainer>
+    <div class="app-container">
       <div
         class="w-full flex flex-col md:flex-row items-center justify-between gap-x-12 gap-y-4 px-4 lg:px-6"
       >
@@ -82,6 +82,6 @@ const year = new Date().getFullYear()
           </NuxtLink>
         </span>
       </div>
-    </AppContainer>
+    </div>
   </footer>
 </template>

components/AppContainer.vue

@@ -3,8 +3,8 @@ const appConfig = useAppConfig()
 </script>
 
 <template>
-  <AppSection class="bg-white dark:bg-muted-1000">
-    <AppContainer>
+  <div class="app-section bg-white dark:bg-muted-1000">
+    <div class="app-container">
       <div class="relative">
         <div class="text-center mb-8">
           <h2
@@ -54,6 +54,6 @@ const appConfig = useAppConfig()
           </button>
         </form> -->
       </div>
-    </AppContainer>
-  </AppSection>
+    </div>
+  </div>
 </template>

components/AppFooter.vue

@@ -21,7 +21,7 @@ const { data: navigation } = await useAsyncData('navigation', () =>
     ]"
   >
     <div class="w-full px-4 lg:px-6">
-      <AppContainer>
+      <div class="app-container">
         <div
           class="relative flex items-center ltablet:justify-start justify-between h-16"
         >
@@ -107,7 +107,7 @@ const { data: navigation } = await useAsyncData('navigation', () =>
             <AppNavbarTheme />
           </div>
         </div>
-      </AppContainer>
+      </div>
     </div>
 
     <!-- Mobile menu, show/hide based on menu state. -->

components/AppFooterAction.vue

@@ -12,7 +12,7 @@ const { data: author } = await useAsyncAuthorMeta(() => props.article.author)
 
 <template>
   <div class="relative">
-    <AppCard class="p-4 ltablet:p-5 md:p-5 lg:p-6 rounded-2xl">
+    <div class="app-card p-4 ltablet:p-5 md:p-5 lg:p-6 rounded-2xl">
       <div class="relative">
         <NuxtLink v-if="props.article.cover" :to="props.article._path">
           <img
@@ -95,6 +95,6 @@ const { data: author } = await useAsyncAuthorMeta(() => props.article.author)
           </NuxtLink>
         </div>
       </div>
-    </AppCard>
+    </div>
   </div>
 </template>

components/AppNavbar.vue

@@ -11,7 +11,7 @@ const { data: author } = await useAsyncAuthorMeta(() => props.article.author)
 </script>
 
 <template>
-  <AppCard class="p-3 rounded-xl">
+  <div class="app-card p-3 rounded-xl">
     <div class="relative rounded-lg overflow-hidden">
       <div class="relative">
         <img
@@ -90,7 +90,7 @@ const { data: author } = await useAsyncAuthorMeta(() => props.article.author)
         </div>
       </div>
     </div>
-  </AppCard>
+  </div>
 </template>
 
 <style scoped>

components/AppSection.vue

@@ -11,8 +11,8 @@ const { data: author } = await useAsyncAuthorMeta(() => props.article.author)
 </script>
 
 <template>
-  <AppSection class="bg-muted-100 dark:bg-muted-1000 overflow-hidden">
-    <AppContainer>
+  <div class="app-section bg-muted-100 dark:bg-muted-1000 overflow-hidden">
+    <div class="app-container">
       <header class="grid grid-cols-12 md:gap-x-10 gap-y-10 pt-6 sm:pt-10">
         <!-- Cover image -->
         <div
@@ -94,6 +94,6 @@ const { data: author } = await useAsyncAuthorMeta(() => props.article.author)
           </div>
         </div>
       </header>
-    </AppContainer>
-  </AppSection>
+    </div>
+  </div>
 </template>

components/ArticleCard.vue

@@ -11,7 +11,7 @@ const { data: author } = await useAsyncAuthorMeta(() => props.article.author)
 </script>
 
 <template>
-  <AppCard class="p-6 rounded-xl">
+  <div class="app-card p-6 rounded-xl">
     <div class="relative">
       <NuxtLink
         v-if="props.article.cover"
@@ -102,5 +102,5 @@ const { data: author } = await useAsyncAuthorMeta(() => props.article.author)
         </NuxtLink>
       </div>
     </div>
-  </AppCard>
+  </div>
 </template>