home page fixes

Author: marshallswain

app/components/FooterMain.vue

@@ -7,7 +7,7 @@ const { data: products } = await useAsyncData(() => queryCollection('products').
     <div class="flex items-center justify-center py-8">
       <Logo />
     </div>
-    <Footer class="sm:footer-horizontal text-neutral-content max-w-[87rem] mx-auto p-10 justify-evenly text-lg">
+    <Footer class="sm:footer-horizontal text-neutral-content max-w-[87rem] mx-auto p-10 justify-evenly text-lg -ml-5.5 sm:ml-0">
       <nav class="flex flex-col gap-4">
         <FooterTitle class="normal-case">Products</FooterTitle>
         <NuxtLink v-for="product in products" :key="product.slug" class="link link-hover" :to="product.slug">

app/components/ProductCard.vue

@@ -6,7 +6,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="p-4">
+  <div>
     <Card class="h-full items-start bg-primary-content text-base-100 p-2">
       <CardBody class="gap-6">
         <figure class="flex flex-col !items-start !justify-start invert">

app/components/Products.vue

@@ -18,12 +18,12 @@ defineProps<{
       :subTitle="subTitle"
       :description="description"
     />
-    <Flex class="mt-8 flex-wrap">
+    <Flex class="mt-8 flex-wrap px-2 lg:px-0">
       <ProductCard 
         v-for="product in products" 
         :key="product.slug"
         :product="product"
-        class="w-full md:w-1/2 lg:w-1/2"
+        class="w-full md:w-1/2 lg:w-1/2 p-2 lg:p-4"
       />
     </Flex>
   </div>

app/pages/index.vue

@@ -19,7 +19,7 @@ useSeoMeta({
     </div>
     <div class="h-64"></div>
   </div>
-  <div class="bg-base-200 min-h-screen max-w-[82rem] mx-auto -mt-64 rounded-4xl p-6 pt-12 lg:p-12">
+  <div class="bg-base-200 min-h-screen max-w-[82rem] mx-auto -mt-64 rounded-4xl pt-12 lg:p-12">
     <!-- <ValueGuide /> -->
 
     <Products 
@@ -31,6 +31,6 @@ useSeoMeta({
     <Titles title="Latest News" sub-title="Stay up to date with the latest Feathers news and updates" class="mt-30 mb-8"/>
     <BlogPosts :posts="posts || []" class="my-24" />
 
-    <Discord />
+    <Discord class="mx-4" />
   </div>
 </template>