feat(back-end): introduce payload

Payload is the next.js Headless CMS and App Framework,
I would like to pick it up and modify it as it is MIT licensed.

Many features in Payload is not applicable for our project.
So, I modify it so that it is light and clear.

1 files changed, 34 insertions, 0 deletions

diff --git a/src/app/(main)/(home)/page.tsx b/src/app/(main)/(home)/page.tsx
new file mode 100644
index 0000000..a94193c
--- /dev/null
+++ b/src/app/(main)/(home)/page.tsx
@@ -0,0 +1,34 @@
+import Hero from '@/app/(main)/(home)/_components/hero';
+import Posts from '@/app/(main)/(home)/_components/posts';
+import { Icons } from '@/components/icons/icons';
+import { Section } from '@/components/section';
+import Separator from '@/components/separator';
+import { getSortedByDatePosts } from '@/lib/source';
+import { getPublishedPosts } from '@/lib/payload-posts';
+import { CTA } from './_components/call-to-action';
+
+export default async function Home() {
+  // 获取 MDX 文章（保留原有功能）
+  // const mdxPosts = getSortedByDatePosts().slice(0, 3);
+
+  // 获取 Payload CMS 文章
+  const { posts: payloadPosts } = await getPublishedPosts({ limit: 3 });
+
+  return (
+    <>
+      <Hero />
+      <Section className='py-8 sm:py-16'>
+        <h2 className='text-center font-semibold text-2xl sm:text-3xl md:text-4xl lg:text-5xl'>
+          <span className='inline-flex items-center gap-3'>
+            Posts
+            <Icons.posts className='size-10 fill-fd-primary/30 text-fd-primary transition-transform hover:rotate-12 hover:scale-125' />
+          </span>
+        </h2>
+      </Section>
+      <Separator />
+      <Posts mdxPosts={[]} payloadPosts={payloadPosts} />
+      <Separator />
+      <CTA />
+    </>
+  );
+}