Front page cleanup (#83)

* Update front page. * Adjust spacing after metrics.
marinecoders · Jun 7, 2024 · 3d40f49 · 3d40f49
1 parent 777fdf3
commit 3d40f49
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 11 deletions.
diff --git a/src/components/cards/MetricCard.svelte b/src/components/cards/MetricCard.svelte
@@ -4,8 +4,8 @@
   export let metric;
 </script>
 
-<div class="rounded-lg flex h-72 w-56 lg:w-48 xl:w-56 border-2 p-4 border-white">
-  <div class="w-7/8 m-auto align-middle grid gap-4">
+<div class="rounded-lg flex h-72 w-56 xl:w-56 border-2 p-4 px-2 border-white text-center">
+  <div class="w-full m-auto align-middle grid gap-4">
     <img class="mx-auto max-h-24" src={icon} alt="Description" />
     <h3 class="text-6xl h-12 text-white font-menobanner">{value}</h3>
     <p class="content-center font-semibold text-lg text-mcswf-gold">{metric}</p>

diff --git a/src/components/sections/ContentImageFull.svelte b/src/components/sections/ContentImageFull.svelte
@@ -24,7 +24,7 @@
         <img class="w-7/8 rounded-lg object-cover aspect-square {imageClasses}" src={image} alt={imageAltText} />
       </div>
     {/if}
-    <div class="font-light text-white sm:text-lg w-3/4 lg:w-full place-self-center">
+    <div class="lg:font-light text-white sm:text-lg w-3/4 lg:w-full place-self-center">
       <h2 class="mb-4 mt-6 lg:mt-0 tracking-tight lg:text-center text-mcswf-gold text-2xl font-bold md:text-3xl lg:text-4xl {titleClasses}">
         {#if !title}
           <slot name="title" />

diff --git a/src/components/sections/Products.svelte b/src/components/sections/Products.svelte
@@ -12,7 +12,7 @@
     }
 </script>
 
-<div class="flex flex-row justify-center pt-12 pb-4">
+<div class="flex flex-row justify-center pt-12 pb-4 px-8">
   <h1 class="text-center font-bold text-3xl">
     BUILDING PRODUCTS THAT MAKE A DIFFERENCE
   </h1>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -31,19 +31,19 @@ products.sort((a, b) => a.data.order - b.data.order);
       backgroundImg="/images/headset_marine.png"
     />
     <div class="relative z-20">
-      <div class="pt-12 pb-24 h-fit">
+      <div class="pt-12 pb-8 lg:pb-24 h-fit">
         <div class="max-w-[85rem] mx-auto px-4 sm:px-6 lg:px-8 pb-10">
           <h1 class="text-left md:text-center font-bold text-[32px] md:text-[40px] text-mcswf-gold pt-16 px-8">OUR MISSION</h1>
           <p class="text-left md:text-center text-base lg:text-2xl py-16 px-8">
             We provide mission-specific software development, data analytics, and artificial intelligence operations capabilities to MIG commanders to close joint, coalition, and naval kill webs.
             These capabilities enhance Marine commanders decision advantage across the full spectrum of military operations.
           </p>
 
-          <div class="relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 w-fit m-auto z-20">
+          <div class="relative grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 w-full z-20 justify-items-center">
             {
               metrics?.map((item) =>
                 item.data.metrics?.map((p) => (
-                  <div class="text-center m-12">
+                  <div class="text-center my-6 md:m-12">
                     <MetricCard
                       icon={p.icon}
                       value={p.value}
@@ -67,7 +67,7 @@ products.sort((a, b) => a.data.order - b.data.order);
           imageClasses="lg:w-550"
         />
       </div>
-      <div class="h-fit py-20">
+      <div class="h-fit py-10 lg:py-20">
         <ContentImageFull
           flipped
           image="/images/GenPuma.png"

diff --git a/src/pages/products/[...product].astro b/src/pages/products/[...product].astro
@@ -35,7 +35,7 @@ const bgString = 'background-image:url(' + entry.data.background.src + ')';
     linkText="REQUEST APP DEMO"
     backgroundImg={entry.data.background.src}
   />
-  <div class="relative z-20 items-center max-w-screen-xl gap-36 px-4 py-8 mx-auto lg:grid lg:grid-cols-2 lg:py-2 lg:px-6">
+  <div class="relative z-20 items-center max-w-screen-xl lg:gap-20 gap-36 px-4 py-8 mx-auto lg:grid lg:grid-cols-2 lg:py-2 lg:px-6">
     <div class="grid gap-4 mt-8 grid-cols-1 hidden lg:block min-h-[650px]">
       <div class="w-full">
         <img
@@ -52,10 +52,10 @@ const bgString = 'background-image:url(' + entry.data.background.src + ')';
       <ul class="m-4 ml-12 list-disc text-xl md:text-2xl">
         {entry.data.bullets.map((b) => <li>{b}</li>)}
       </ul>
-      <div class="grid grid-cols-1 lg:grid-cols-2 w-fit m-auto z-20">
+      <div class="grid grid-cols-1 lg:grid-cols-2 m-auto z-20">
         {
           entry.data.metrics.map((p) => (
-            <div class="text-center m-12">
+            <div class="text-center my-12 mx-4">
               <MetricCard
                 icon={p.icon}
                 value={p.value}