project type and added query file

src/app/(frontend)/page.tsx

@@ -1,12 +1,13 @@
 import { headers as getHeaders } from 'next/headers.js'
 import Image from 'next/image'
 import { getPayload } from 'payload'
-import type { Payload } from 'payload'
 import React from 'react'
 
 import config from '@/src/payload.config'
-import './styles.css'
 import { RichText } from '@payloadcms/richtext-lexical/react'
+import Link from 'next/link'
+import { ItemCardGrid } from '@payloadcms/ui'
+import { HOMEPAGE_QUERY, PROJECT_QUERY } from '@/utilities/queries'
 
 export default async function HomePage() {
   const headers = await getHeaders()
@@ -14,14 +15,9 @@ export default async function HomePage() {
   const payload = await getPayload({ config: payloadConfig })
   const { user } = await payload.auth({ headers })
 
-  const homePage = await payload.find({
-    collection: 'pages',
-    where: {
-      title: {
-        equals: 'Home',
-      },
-    },
-  })
+  const homePage = HOMEPAGE_QUERY
+
+  const projects = PROJECT_QUERY
 
   const page = homePage.docs?.[0]
 
@@ -72,6 +68,39 @@ export default async function HomePage() {
         <p>Update this page by editing</p>
         <code>app/(frontend)/page.tsx</code>
       </div>
+      <div>
+        {projects.docs.length > 0 && (
+          <div className='space-y-4'>
+            {projects.docs
+              .filter((item) => item.featuredProject)
+              .map((item) => (
+                  <article
+                    key={item.id}
+                    className="border-2 border-white rounded col-span-full" // full width styling
+                  >
+                    <Link className="no-decoration" href={`/${item.slug}`}>
+                      <h3 className="text-lg font-bold">{item.title}</h3>
+                      <p>{item.description}</p>
+                    </Link>
+                  </article>
+              ))
+            }
+            <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
+              {projects.docs
+                .filter((item) => !item.featuredProject)
+                .map((item) => (
+                  <article key={item.id} className="border-2 border-white rounded">
+                    <Link className="no-decoration" href={`/${item.slug}`}>
+                      <h3 className="text-lg font-bold">{item.title}</h3>
+                      <p>{item.description}</p>
+                    </Link>
+                  </article>
+                ))
+              }
+            </div>
+          </div>
+        )}
+      </div>
     </div>
   )
 }