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/Hero/HeroHome.vue

@@ -2,7 +2,7 @@
   <div class="pb-12 lg:pb-0">
     <Flex col class="mx-auto max-w-5xl text-center gap-10 mt-36 relative px-4">
       <Text size="5xl" class="flex flex-col items-center justify-center gap-3">
-        <Flex row items-center justify-center class="gap-2 md:gap-4 text-3xl">
+        <Flex row items-center justify-center class="gap-2 md:gap-4 text-2xl sm:text-3xl">
           <Text>Identity.</Text>
           <Text>Data.</Text>
           <Text>Realtime.</Text>
@@ -22,11 +22,11 @@
         </NuxtLink>
       </Flex>
 
-      <NuxtImg src="/img/planet.svg" class="w-[400px] lg:w-[599px] absolute transition-all duration-500 ease-in-out -bottom-[calc(100%-10rem)] -right-52 md:-right-72 lg:-bottom-32 xl:-right-108 planet-wobble" />
       <NuxtImg src="/img/rock-md.svg" class="w-[190px] absolute lg:-top-1 -left-52 transition-all duration-500 ease-in-out floating-rock-1" />
       <NuxtImg src="/img/rock-lg.svg" class="hidden lg:block w-[386px] absolute -bottom-80 left-28 transition-all duration-500 ease-in-out floating-rock-2" />
       <NuxtImg src="/img/shuttle.svg" class="hidden lg:block w-[355px] absolute -bottom-72 right-20 transition-all duration-500 ease-in-out floating-shuttle" />
     </Flex>
+    <NuxtImg src="/img/planet.svg" class="w-[400px] lg:w-[599px] absolute transition-all duration-500 ease-in-out bottom-20 -right-52 sm:-right-32 lg:bottom-74 lg:-right-72 planet-wobble" />
     <NuxtImg src="/img/bird-red.svg" class="w-[260px] lg:w-[342px] relative lg:-top-26 transition-all duration-500 ease-in-out floating" />
   </div>
 </template>

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>