Feat/rework sections

src/app/(landing)/[locale]/community-edition/page.tsx

@@ -1,8 +1,4 @@
-import { CtaSection } from "@/components/sections/CtaSection"
-import { EditionFeatureSection } from "@/components/sections/EditionFeatureSection"
-import { EditionHeroSection } from "@/components/sections/EditionHeroSection"
-import { EditionInstallSection } from "@/components/sections/EditionInstallSection"
-import { EditionUseCaseSection } from "@/components/sections/EditionUseCaseSection"
+import { PageBlocks } from "@/components/PageBlockRenderer"
 import { LandingContainer } from "@/components/ui/LandingContainer"
 import { getLandingPage } from "@/lib/cms"
 import { isSupportedLocale } from "@/lib/i18n"
@@ -20,31 +16,11 @@ export default async function CommunityEditionPage({ params }: { params: Promise
     if (!isSupportedLocale(locale)) notFound()
 
     const page = await getLandingPage("community-edition", locale)
-    const heroBlock = page?.layout?.find((item) => item.blockType === "editionHero") ?? null
-    const featuresBlock = page?.layout?.find((item) => item.blockType === "editionFeatures") ?? null
-    const installBlock = page?.layout?.find((item) => item.blockType === "editionInstall") ?? null
-    const useCaseBlock = page?.layout?.find((item) => item.blockType === "editionUseCases") ?? null
-    const ctaBlock = page?.layout?.find((item) => item.blockType === "cta") ?? null
 
     return (
         <LandingContainer>
             <div className="h-12 lg:h-16" aria-hidden="true" />
-            <EditionHeroSection
-                content={heroBlock}
-                locale={locale}
-                grainientColors={{
-                    color1: "#10213a",
-                    color2: "#f872e2",
-                    color3: "#f8f172",
-                    backgroundColor: "#0b1324",
-                }}
-            />
-            <div className="h-32" aria-hidden="true" />
-            <EditionFeatureSection content={featuresBlock} />
-            <div className="h-32" aria-hidden="true" />
-            <EditionInstallSection content={installBlock} />
-            <div className="h-32" aria-hidden="true" />
-            <CtaSection content={ctaBlock} />
+            <PageBlocks blocks={page?.layout} locale={locale} />
         </LandingContainer>
     )
 }

src/app/(landing)/[locale]/enterprise-edition/page.tsx

@@ -1,15 +1,10 @@
-import { CtaSection } from "@/components/sections/CtaSection"
-import { EditionFeatureSection } from "@/components/sections/EditionFeatureSection"
-import { EditionHeroSection } from "@/components/sections/EditionHeroSection"
-import { EditionUseCaseSection } from "@/components/sections/EditionUseCaseSection"
+import { PageBlocks } from "@/components/PageBlockRenderer"
 import { LandingContainer } from "@/components/ui/LandingContainer"
 import { getLandingPage } from "@/lib/cms"
-import type { CtaLayoutBlock } from "@/lib/cms"
 import { isSupportedLocale } from "@/lib/i18n"
 import { getLandingPageMetadata } from "@/lib/pageMetadata"
 import type { Metadata } from "next"
 import { notFound } from "next/navigation"
-import React from "react"
 
 export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }): Promise<Metadata> {
     const { locale } = await params
@@ -21,35 +16,11 @@ export default async function EnterpriseEditionPage({ params }: { params: Promis
     if (!isSupportedLocale(locale)) notFound()
 
     const page = await getLandingPage("enterprise-edition", locale)
-    const heroBlock = page?.layout?.find((item) => item.blockType === "editionHero") ?? null
-    const ctaBlock = (page?.layout?.find((item) => item.blockType === "cta") ?? null) as CtaLayoutBlock | null
-    const blocks = page?.layout?.filter((item) => item.blockType === "editionUseCases" || item.blockType === "editionFeatures") ?? []
 
     return (
         <LandingContainer>
             <div className="h-12 lg:h-16" aria-hidden="true" />
-            <EditionHeroSection
-                content={heroBlock}
-                locale={locale}
-                grainientColors={{
-                    color1: "#13102d",
-                    color2: "#7472f8",
-                    color3: "#72c9f8",
-                    backgroundColor: "#140c22",
-                }}
-            />
-            {blocks.map((block, index) => (
-                <React.Fragment key={index}>
-                    <div className="h-32" aria-hidden="true" />
-                    {block.blockType === "editionFeatures" ? (
-                        <EditionFeatureSection content={block} />
-                    ) : block.blockType === "editionUseCases" ? (
-                        <EditionUseCaseSection content={block} />
-                    ) : null}
-                </React.Fragment>
-            ))}
-            <div className="h-32" aria-hidden="true" />
-            <CtaSection content={ctaBlock} floatingCta locale={locale} />
+            <PageBlocks blocks={page?.layout} ctaFloating locale={locale} />
         </LandingContainer>
     )
 }

src/app/(landing)/[locale]/layout.tsx

@@ -1,6 +1,5 @@
 import ConsentManager from "@/components/providers/ConsentManager"
 import { Navigation } from "@/components/navigation/Navigation"
-import { SectionsProvider } from "@/components/providers/SectionsProvider"
 import { FooterSection } from "@/components/sections/FooterSection"
 import { getFooter } from "@/lib/cms"
 import { getNavbarItems } from "@/lib/cms"
@@ -23,21 +22,18 @@ export default async function LocaleLayout({ children, params }: LocaleLayoutPro
         notFound()
     }
 
-    const [items, footer, sections] = await Promise.all([
+    const [items, footer] = await Promise.all([
         getNavbarItems(locale),
         getFooter(locale),
-        getSections(locale),
     ])
 
     return (
         <ConsentManager locale={locale}>
             <div className="relative bg-primary overflow-x-hidden">
                 <Navigation locale={locale} items={items} footer={footer} />
-                <SectionsProvider sections={sections}>
-                    <main id="main-content" className="bg-primary">
-                        {children}
-                    </main>
-                </SectionsProvider>
+                <main id="main-content" className="bg-primary">
+                    {children}
+                </main>
                 <FooterSection locale={locale} footer={footer} />
                 <div className="pointer-events-none absolute inset-x-0 bottom-0 z-50 flex justify-center" aria-hidden="true">
                     <div className="h-16 w-full bg-blue/20 blur-3xl" />

src/app/(landing)/[locale]/page.tsx

@@ -1,13 +1,6 @@
+import { DeploymentImage } from "@/components/DeploymentImage"
+import { PageBlocks } from "@/components/PageBlockRenderer"
 import { LandingContainer } from "@/components/ui/LandingContainer"
-import { HeroSection } from "@/components/sections/HeroSection"
-import { BrandSection } from "@/components/sections/BrandSection"
-import { UseCaseSection } from "@/components/sections/UseCaseSection"
-import { AppFeatureSection } from "@/components/sections/AppFeatureSection"
-import { DeploymentSection } from "@/components/sections/DeploymentSection"
-import { RuntimeFeatureSection } from "@/components/sections/RuntimeFeatureSection"
-import { RoadmapSection } from "@/components/sections/RoadmapSection"
-import { FaqSection } from "@/components/sections/FaqSection"
-import { CtaSection } from "@/components/sections/CtaSection"
 import { getLandingPage } from "@/lib/cms"
 import type { DeploymentLayoutBlock, HeroLayoutBlock } from "@/lib/cms"
 import type { BrandLayoutBlock } from "@/lib/cms"
@@ -26,38 +19,22 @@ export async function generateMetadata({ params }: { params: Promise<{ locale: s
 
 export default async function Page({ params }: { params: Promise<{ locale: string }> }) {
     const { locale } = await params
-    if (!isSupportedLocale(locale)) {
-        notFound()
-    }
+    if (!isSupportedLocale(locale)) notFound()
 
     const page = await getLandingPage("main", locale)
-    const layout = page?.layout ?? []
-    const heroBlock = layout.find((block): block is HeroLayoutBlock => block.blockType === "hero") ?? null
-    const brandBlock = layout.find((block): block is BrandLayoutBlock => block.blockType === "brand") ?? null
-    const useCaseBlock = layout.find((block): block is UseCaseLayoutBlock => block.blockType === "usecase") ?? null
-    const faqBlock = layout.find((block): block is FaqLayoutBlock => block.blockType === "faq") ?? null
-    const ctaBlock = layout.find((block): block is CtaLayoutBlock => block.blockType === "cta") ?? null
-    const deploymentBlock = layout.find((block): block is DeploymentLayoutBlock => block.blockType === "deployment") ?? null
 
     return (
         <LandingContainer>
             <div className="h-12 lg:h-16" aria-hidden="true" />
-            <HeroSection content={heroBlock} />
-            <BrandSection content={brandBlock} />
-            <div className="h-32" aria-hidden="true" />
-            <UseCaseSection content={useCaseBlock} />
-            <div className="h-32" aria-hidden="true" />
-            <AppFeatureSection locale={locale} />
-            <div className="h-32" aria-hidden="true" />
-            <DeploymentSection content={deploymentBlock} />
-            <div className="h-32" aria-hidden="true" />
-            <RuntimeFeatureSection locale={locale} />
-            <div className="h-32" aria-hidden="true" />
-            <RoadmapSection locale={locale} />
-            <div className="h-32" aria-hidden="true" />
-            <FaqSection content={faqBlock} />
-            <div className="h-32" aria-hidden="true" />
-            <CtaSection content={ctaBlock} />
+            <PageBlocks
+                blocks={page?.layout}
+                locale={locale}
+                cardRowChildren={[
+                    <DeploymentImage key="cloud" color="aqua" icon="cloud" text="Cloud" />,
+                    <DeploymentImage key="selfhost" color="pink" icon="server" text="Selfhost" />,
+                    <DeploymentImage key="dynamic" color="brand" icon="cloud-computing" text="Dynamic" />,
+                ]}
+            />
         </LandingContainer>
     )
 }

src/blocks/BentoBlock.ts

@@ -0,0 +1,66 @@
+import type { Block } from "payload"
+
+export const BentoBlock: Block = {
+  slug: "bento",
+  labels: {
+    singular: "Bento",
+    plural: "Bento Blocks",
+  },
+  fields: [
+    {
+      type: "collapsible",
+      label: "Section",
+      fields: [
+        {
+          name: "sectionHeading",
+          label: "Section Heading",
+          type: "text",
+          required: false,
+          localized: true,
+        },
+        {
+          name: "sectionDescription",
+          label: "Section Description",
+          type: "textarea",
+          required: false,
+          localized: true,
+        },
+        {
+          name: "sectionLinkButton",
+          label: "Section Link Button",
+          type: "group",
+          fields: [
+            {
+              name: "label",
+              type: "text",
+              required: false,
+              localized: true,
+            },
+            {
+              name: "url",
+              type: "text",
+              required: false,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: "variant",
+      label: "Variant",
+      type: "select",
+      required: true,
+      defaultValue: "feature",
+      options: [
+        {
+          label: "Feature",
+          value: "feature",
+        },
+        {
+          label: "Runtime",
+          value: "runtime",
+        },
+      ],
+    },
+  ],
+}

src/blocks/CardRowBlock.ts

@@ -0,0 +1,92 @@
+import type { Block } from "payload"
+
+export const CardRowBlock: Block = {
+  slug: "cardRow",
+  labels: {
+    singular: "Card Row",
+    plural: "Card Rows",
+  },
+  fields: [
+    {
+      type: "collapsible",
+      label: "Section",
+      fields: [
+        {
+          name: "sectionHeading",
+          label: "Section Heading",
+          type: "text",
+          required: false,
+          localized: true,
+        },
+        {
+          name: "sectionDescription",
+          label: "Section Description",
+          type: "textarea",
+          required: false,
+          localized: true,
+        },
+        {
+          name: "sectionLinkButton",
+          label: "Section Link Button",
+          type: "group",
+          fields: [
+            {
+              name: "label",
+              type: "text",
+              required: false,
+              localized: true,
+            },
+            {
+              name: "url",
+              type: "text",
+              required: false,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      name: "cards",
+      label: "Cards",
+      type: "array",
+      required: false,
+      fields: [
+        {
+          name: "title",
+          type: "text",
+          required: true,
+          localized: true,
+        },
+        {
+          name: "description",
+          type: "textarea",
+          required: false,
+          localized: true,
+        },
+        {
+          name: "link",
+          type: "group",
+          fields: [
+            {
+              name: "label",
+              type: "text",
+              required: false,
+              localized: true,
+            },
+            {
+              name: "url",
+              type: "text",
+              required: false,
+            },
+          ],
+        },
+        {
+          name: "image",
+          type: "upload",
+          relationTo: "media",
+          required: false,
+        },
+      ],
+    },
+  ],
+}