updates per client feedback

Author: rudietuesdays

frontend/src/components/CallToAction.astro

@@ -40,7 +40,16 @@ const {
 ---
 
 <div class="container">
-  <div class="call-to-action mt-24 mb-32 flex flex-col items-center gap-12 rounded-xl px-12 py-20 md:px-24">
+  <div class="flex md:hidden call-to-action mt-24 mb-32 flex-col items-center gap-12 rounded-xl px-4 py-12">
+    <Heading level="h2" class="text-center text-3xl md:text-6xl">{title}</Heading>
+    <Link href={link} isButton size="md">
+      {linkText}
+      {icon && (
+        <Icon aria-hidden="true" name={`lucide:${icon}`} size="1.2rem" />
+      )}
+    </Link>
+  </div>
+  <div class="hidden md:flex call-to-action mt-24 mb-32 flex-col items-center gap-12 rounded-xl px-12 py-20 md:px-24">
     <Heading level="h2" class="text-center text-3xl md:text-6xl">{title}</Heading>
     <Link href={link} isButton size="lg" animateOnHover animationType="nudge">
       {linkText}

frontend/src/components/Hero.astro

@@ -22,7 +22,7 @@ import src from '@assets/images/jaydot-windows.jpg'
   <div class="container">
     <div class="grid grid-cols-1 items-stretch gap-12 md:grid-cols-2">
       <div class="flex flex-col gap-8 md:items-start">
-        <h1 class="text-6xl/18 lg:text-8xl/28">
+        <h1 class="text-6xl/18 leading-18 lg:text-8xl/28 lg:leading-28">
           <slot><span class="text-gradient">Affordable housing</span> solutions for DC</slot>
         </h1>
         <div class="flex flex-col gap-3 lg:flex-row">

frontend/src/pages/about.astro

@@ -65,7 +65,7 @@ const approaches = [
             src={building1}
             alt="FIXME"
             decoding="async"
-            loading="lazy"
+            loading="eager"
           />
           <div>
             <p class="mb-4">

frontend/src/pages/index.astro

@@ -186,14 +186,14 @@ const testimonials = [
   )}
 
   {data?.testimonials?.length && (
-    <section class="mb-8 md:mb-16">
+    <section class="my-8 py-8">
       <div class="container">
         <Heading level="h2" class="mb-8">Trusted by our participants</Heading>
         <p class="mb-12 italic">But don't take our word for it. See what they have to say.</p>
-        <div class="flex flex-wrap gap-4">
+        <div class="masonry">
           {
             data.testimonials.map((t: any) => (
-              <div class="testimonial w-full md:w-[49%] lg:w-[32%] only:w-full">
+              <div class="testimonial w-full break-inside-avoid mb-8">
                 <p class="mb-3">{t.quote}</p>
                 <p class="text-right italic">- {t.attribution}</p>
               </div>
@@ -216,7 +216,7 @@ const testimonials = [
   {data?.partners?.length && (
     <section class="mb-8 md:mb-16">
       <div class="container">
-        <Heading level="h2" class="mb-16">Our partners</Heading>
+        <Heading level="h2" class="mb-24">Our partners</Heading>
         <div class="grid gap-2 md:grid-cols-2 lg:grid-cols-4">
           {/* {data.partners.map((partner: any) => <FeaturedPartners src={partner.logo.url} alt={partner.logo.alt || `${partner.name}'s logo.'`} url={partner.url} />)} */}
           {partners.map((partner: any) => <FeaturedPartners src={partner.src} alt={partner.alt || `logo.'`} url={partner.url} />)}

frontend/src/pages/team.astro

@@ -217,7 +217,7 @@ const team = [
 
   <section class="my-16">
     <div class="container space-y-12">
-      <div class="grid gap-6 lg:gap-10 md:grid-cols-2 lg:grid-cols-3">
+      <div class="grid gap-6 lg:gap-10 md:grid-cols-2 xl:grid-cols-3">
         {
           team.map((person: any) => (
             <div class="container mb-20 flex flex-col items-start justify-start">
@@ -235,8 +235,8 @@ const team = [
               ) : null}
               <div class="mt-6">
                 <div>
-                  <div class="text-2xl font-bold">{person.name}</div>
-                  <div class="italic">({person.pronouns})</div>
+                  <span class="text-2xl font-bold">{person.name}</span>{' '}
+                  <span class="italic">({person.pronouns})</span>
                 </div>
                 <Accordion>
                   <AccordionItem title={person.title} variant="chevron">
@@ -254,7 +254,7 @@ const team = [
       <Heading level="h2">
         Consultants
       </Heading>
-      <div class="grid gap-6 lg:gap-10 md:grid-cols-2 lg:grid-cols-3">
+      <div class="grid gap-6 lg:gap-10 md:grid-cols-2 xl:grid-cols-3">
         {
           consultants.map((person: any) => (
             <div class="container mb-20 flex flex-col items-start justify-start">
@@ -272,8 +272,8 @@ const team = [
               ) : null}
               <div class="mt-6">
                 <div>
-                  <div class="text-2xl font-bold">{person.name}</div>
-                  <div class="italic">({person.pronouns})</div>
+                  <span class="text-2xl font-bold">{person.name}</span>{' '}
+                  <span class="italic">({person.pronouns})</span>
                 </div>
                 <Accordion>
                   <AccordionItem title={person.title} variant="chevron">