Update /product

src/components/Card/Component.astro

@@ -14,7 +14,7 @@ type Props = {
   label?: string;
   lineClamp?: number;
   orientation?: 'horizontal' | 'vertical';
-  size?: 'small' | 'micro' | 'medium' | 'large';
+  size?: 'small' | 'micro' | 'medium' | 'large' | 'xlarge';
   svgLogo?: { url: string; alt: string | null };
   title: string;
   fullTitleLength?: boolean | undefined;

src/components/Card/style.module.css

@@ -179,13 +179,20 @@
   }
 }
 
-.card[data-size='large'] {
+.card[data-size='large'],
+.card[data-size='xlarge'] {
   .cardTitle {
     font-size: 24px;
     margin-bottom: 12px;
   }
 }
 
+.card[data-size='xlarge'] {
+  .cardContent {
+    padding: 35px 30px;
+  }
+}
+
 .card[data-boxed='false'] {
   background-color: transparent;
   box-shadow: none;

src/components/Hero/style.module.css

@@ -1,7 +1,6 @@
 .root {
   width: 1000px;
-  padding: rfs(80px) 0;
-  margin: 0 auto;
+  margin: rfs(80px) auto;
   max-width: 100%;
   text-align: center;
 }

src/lib/cma-schema.ts

@@ -30,6 +30,9 @@ export type ImageCarousel = ItemTypeDefinition<
     gallery: {
       type: 'gallery';
     };
+    carousel_height: {
+      type: 'integer';
+    };
   }
 >;
 export type Llmstxt = ItemTypeDefinition<

src/pages/made-for/developers/index.astro

@@ -37,9 +37,9 @@ if (!page) {
     <Fragment slot="title">Your tech stack is literally <mark>killing your business</mark></Fragment
     >
     <Fragment slot="subtitle">
-      That's right. You're <strong>stuck with legacy web technologies</strong>that make all your
-      websites and apps painfully slow and <strong>impossibly hard to build</strong>, maintain and
-      improve. This needs to stop, now.
+      That's right. You're <strong>stuck with legacy web technologies</strong> that make all your websites
+      and apps painfully slow and <strong>impossibly hard to build</strong>, maintain and improve.
+      This needs to stop, now.
     </Fragment>
   </Hero>
   <div id="main-content">

src/pages/product/_graphql.ts

@@ -1,5 +1,3 @@
-import { FeatureCardFragment } from '~/components/FeatureCard/graphql';
-import { PartnerTestimonialQuoteFragment, ReviewQuoteFragment } from '~/components/quote/graphql';
 import { ResponsiveImageFragment } from '~/components/ResponsiveImage/graphql';
 import { TagFragment } from '~/lib/datocms/commonFragments';
 import { CustomerStoryUrlFragment } from '~/lib/datocms/gqlUrlBuilder/customerStory';
@@ -33,39 +31,11 @@ export const query = graphql(
         subheader {
           value
         }
-        pillars {
-          id
-          theme
-          pillarCallout
-          title {
-            value
-          }
-          capability1 {
-            value
-          }
-          capability2 {
-            value
-          }
-          capability3 {
-            value
-          }
-          image {
-            responsiveImage(imgixParams: { auto: format, w: 1000, h: 1000 }) {
-              ...ResponsiveImageFragment
-            }
-          }
-        }
-        quotes: testimonials {
-          __typename
-          ...PartnerTestimonialQuoteFragment
-          ...ReviewQuoteFragment
-        }
-        features {
-          featureGroup
-          ...FeatureCardFragment
-        }
       }
-      customerStories: allCustomerStories(orderBy: [_firstPublishedAt_DESC, _createdAt_DESC]) {
+      customerStories: allCustomerStories(
+        first: 15
+        orderBy: [_firstPublishedAt_DESC, _createdAt_DESC]
+      ) {
         ...CustomerStoryUrlFragment
         title
         coverImage {
@@ -88,13 +58,5 @@ export const query = graphql(
       }
     }
   `,
-  [
-    ResponsiveImageFragment,
-    PartnerTestimonialQuoteFragment,
-    FeatureCardFragment,
-    ReviewQuoteFragment,
-    TagFragment,
-    CustomerStoryUrlFragment,
-    UseCasePageUrlFragment,
-  ],
+  [ResponsiveImageFragment, TagFragment, CustomerStoryUrlFragment, UseCasePageUrlFragment],
 );

src/pages/product/_style.module.css

@@ -35,27 +35,12 @@
   }
 }
 
-.explore {
-  text-align: center;
-
-  h2 {
-    font-family: var(--font-headline);
-    font-size: rfs(60px);
-    line-height: 1.1;
-    margin-bottom: 0.5em;
-  }
-}
-
-.pillarsWrapper {
-  margin-top: -40px;
-}
-
 .teamCards {
   display: grid;
-  gap: rfs(80px) rfs(60px);
+  gap: rfs(30px) rfs(60px);
   grid-template-columns: 1fr;
 
-  @media screen and (min-width: 640px) {
+  @media screen and (min-width: 900px) {
     grid-template-columns: 1fr 1fr;
   }
 }
@@ -65,7 +50,7 @@
   gap: rfs(80px) rfs(60px);
   grid-template-columns: 1fr;
 
-  @media screen and (min-width: 640px) {
+  @media screen and (min-width: 650px) {
     grid-template-columns: 1fr 1fr;
   }
 }
@@ -92,3 +77,13 @@
   color: var(--accent-color);
   font-weight: 600;
 }
+
+.cardGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 24px;
+}
+
+.paddedImage {
+  padding: 20px 0;
+}