add resource pages cms (#125)

* add resource pages cms

* improve large image

* improve section header

* home page header

pages/index.tsx

@@ -39,7 +39,6 @@ export default function Homepage({
     <>
       <HeaderPad
         as={GradientBG}
-        className="flex flex-col items-center"
         image={homepageGradient}
         imageType="custom"
         bgChildren={
@@ -61,22 +60,33 @@ export default function Homepage({
         <HomePageHero
           heading={pageData.hero_title}
           description={
-            <div className="[text-wrap:balance]">
+            <div className="[text-wrap:pretty]">
               Plural reduces cluster upgrade cycles from months to hours at
               enterprise scale with streamlined dependency management.
             </div>
           }
           announcementChip={announcementChip}
           ctas={
-            <div className="flex flex-wrap justify-center gap-large">
+            <div className="mx-auto flex w-full max-w-[480px] justify-center gap-large">
               <Button
+                style={{ flex: 1 }}
                 large
-                primary
                 as={Link}
                 href={pageData.hero_cta_url}
               >
                 {pageData.hero_cta_text}
               </Button>
+              <Button
+                style={{ flex: 1 }}
+                floating
+                large
+                onClick={() => setShowVideo(true)}
+              >
+                <div className="flex items-center gap-xsmall px-large text-text">
+                  {playButtonSVG}
+                  {pageData.hero_video_cta_text}
+                </div>
+              </Button>
             </div>
           }
         />
@@ -88,15 +98,6 @@ export default function Homepage({
                 width={1248}
               />
             )}
-            <Button
-              large
-              floating
-              className="group mx-auto mb-xxxxxxlarge w-fit"
-              onClick={() => setShowVideo(true)}
-            >
-              {pageData.hero_video_cta_text}
-              {playButtonSVG}
-            </Button>
           </StandardPageWidth>
         </div>
       </HeaderPad>
@@ -180,12 +181,12 @@ const homepageGradient = `
 
 const playButtonSVG = (
   <svg
-    width="42"
-    height="42"
+    height="24"
+    width="24"
     viewBox="0 0 42 42"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    className="ml-small text-fill-primary group-hover:text-fill-primary-hover"
+    className="text-fill-primary"
     aria-hidden
   >
     <rect

pages/resources/[resource].tsx

@@ -0,0 +1,75 @@
+import { type GetStaticPaths, type InferGetStaticPropsType } from 'next'
+
+import { directusClient } from '@src/apollo-client'
+import { CustomComponents } from '@src/components/custom-page/common'
+import { FooterVariant } from '@src/components/FooterFull'
+import {
+  ResourcePageDocument,
+  type ResourcePageQuery,
+  type ResourcePageQueryVariables,
+  ResourcesPageSlugsDocument,
+  type ResourcesPageSlugsQuery,
+  type ResourcesPageSlugsQueryVariables,
+} from '@src/generated/graphqlDirectus'
+import { propsWithGlobalSettings } from '@src/utils/getGlobalProps'
+
+export default function Resource({
+  resourceInfo,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+  return <CustomComponents components={resourceInfo.components ?? []} />
+}
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const { data, error } = await directusClient.query<
+    ResourcesPageSlugsQuery,
+    ResourcesPageSlugsQueryVariables
+  >({
+    query: ResourcesPageSlugsDocument,
+  })
+
+  if (error) {
+    console.error('GraphQL query error in static:', error)
+  }
+
+  return {
+    paths: data.resource_pages.map((page) => ({
+      params: { resource: page.slug },
+    })),
+    fallback: 'blocking',
+  }
+}
+
+export const getStaticProps = async (context) => {
+  const slug =
+    typeof context?.params?.resource === 'string'
+      ? context?.params?.resource
+      : null
+
+  if (!slug) {
+    return { notFound: true }
+  }
+
+  const { data, error } = await directusClient.query<
+    ResourcePageQuery,
+    ResourcePageQueryVariables
+  >({
+    query: ResourcePageDocument,
+    variables: { slug },
+  })
+
+  if (error) {
+    console.error('GraphQL query error in static: ', error)
+  }
+  const resourceInfo = data.resource_pages?.[0] || null
+
+  if (!resourceInfo) {
+    return { notFound: true }
+  }
+
+  return propsWithGlobalSettings({
+    metaTitle: resourceInfo?.dropdown_title ?? '',
+    metaDescription: '',
+    footerVariant: FooterVariant.kitchenSink,
+    resourceInfo,
+  })
+}

src/components/PageHeros.tsx

@@ -35,15 +35,12 @@ export function HeroMainText({
       )}
       {...props}
     >
-      <div className="flex flex-col gap-y-medium">
+      <div className="flex flex-col items-center gap-y-medium">
         <h1 className="txt-mktg-hero-2 [text-wrap:balance] md:txt-mktg-big-header">
           {preHeading && (
-            <>
-              <strong className="txt-mktg-label mb-medium block [text-wrap:balance]">
-                {preHeading}
-              </strong>
-              <span className="sr-only"> – </span>
-            </>
+            <strong className="txt-mktg-label mb-medium block [text-wrap:balance]">
+              {preHeading}
+            </strong>
           )}
           {heading}
         </h1>
@@ -61,8 +58,8 @@ export function HeroMainText({
           )}
         </TextLimiter>
       </div>
-      {ctas && <div>{ctas}</div>}
-      {children && <div>{children}</div>}
+      {ctas}
+      {children}
     </div>
   )
 }
@@ -160,9 +157,9 @@ export function HomePageHero({
         <HeroMainText
           preHeading={preHeading}
           heading={heading}
-          description={<div className="text-center">{description}</div>}
+          description={description}
           ctas={ctas}
-          className="mx-auto"
+          className="max-w-[768px]"
         />
       </div>
     </StandardPageWidth>

src/components/custom-page/LargeImage.tsx

@@ -46,7 +46,8 @@ export function LargeImage({
           <Body2 $color="text-light">{bodyText}</Body2>
           {ctaText && (
             <Button
-              className="mt-medium w-fit"
+              large
+              className="mt-medium w-full lg:w-fit"
               as={Link}
               target="_blank"
               rel="noopener noreferrer"

src/components/custom-page/SectionHeader.tsx

@@ -8,14 +8,16 @@ export function SectionHeader({
   description,
 }: SectionHeaderComponentFragment) {
   return (
-    <div className="mx-auto flex w-1/2 flex-col items-center gap-medium py-xlarge text-center">
-      {overline && <OverlineLabel>{overline}</OverlineLabel>}
-      {title && (
-        <ResponsiveText textStyles={{ lg: 'mHero2', '': 'mTitle1' }}>
-          {title}
-        </ResponsiveText>
-      )}
-      <Body1 $color="text-light">{description}</Body1>
+    <div className="flex w-full flex-col items-center justify-center py-xlarge">
+      <div className="flex flex-col gap-medium text-center lg:min-w-[400px] lg:max-w-[624px]">
+        {overline && <OverlineLabel>{overline}</OverlineLabel>}
+        {title && (
+          <ResponsiveText textStyles={{ lg: 'mHero2', '': 'mTitle1' }}>
+            {title}
+          </ResponsiveText>
+        )}
+        <Body1 $color="text-light">{description}</Body1>
+      </div>
     </div>
   )
 }