payload integration with blogs and events

package.json

@@ -15,16 +15,17 @@
     "start": "cross-env NODE_OPTIONS=--no-deprecation next start"
   },
   "dependencies": {
-    "@payloadcms/db-mongodb": "latest",
-    "@payloadcms/next": "latest",
-    "@payloadcms/payload-cloud": "latest",
-    "@payloadcms/richtext-lexical": "latest",
+    "@payloadcms/db-mongodb": "3.57.0",
+    "@payloadcms/next": "3.57.0",
+    "@payloadcms/payload-cloud": "3.57.0",
+    "@payloadcms/richtext-lexical": "3.57.0",
+    "@payloadcms/storage-s3": "3.57.0",
     "@tabler/icons-react": "^3.31.0",
     "@tailwindcss/postcss": "^4.1.4",
     "cross-env": "^7.0.3",
     "graphql": "^16.8.1",
     "next": "15.2.3",
-    "payload": "latest",
+    "payload": "3.57.0",
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "sharp": "0.32.6",

src/app/(frontend)/about/page.tsx

@@ -5,15 +5,23 @@ import Hero from '@/components/about/Hero'
 import Descriptions from '@/components/about/Descriptions'
 import MeetTheWDCCTeam from '@/components/about/MeetTheWDCCTeam'
 import QuotesSection from '@/components/about/QuotesSection'
+import { getAboutPageImages } from '@/lib/payload/images'
 
 export default async function AboutPage() {
+  const [heroImage, descriptionImage1, descriptionImage2, quoteImage] = await Promise.all([
+    getAboutPageImages('hero'),
+    getAboutPageImages('description-1'),
+    getAboutPageImages('description-2'),
+    getAboutPageImages('quote'),
+  ])
+
   return (
     <div className="home">
       <Header />
-      <Hero />
-      <Descriptions />
+      <Hero heroImage={heroImage} />
+      <Descriptions descriptionImage1={descriptionImage1} descriptionImage2={descriptionImage2} />
       <MeetTheTeam />
-      <QuotesSection />
+      <QuotesSection quoteImage={quoteImage} />
       <MeetTheWDCCTeam />
       <Footer />
     </div>

src/app/(frontend)/blogs/[slug]/page.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import Header from '@/components/common/Header'
+import Footer from '@/components/common/Footer'
+import { notFound } from 'next/navigation'
+import { getBlogBySlug } from '@/lib/payload/blogs'
+import { BLOG_TEMPLATES } from '@/lib/blog-templates'
+
+export default async function BlogPage({
+                                         params,
+                                       }: {
+  params: Promise<{ slug: string }>
+}) {
+  const { slug } = await params
+  const blog = await getBlogBySlug(slug)
+  if (!blog) return notFound()
+
+  const Template = BLOG_TEMPLATES[blog.template]
+
+  return (
+    <>
+      <Header />
+      <Template blog={blog} />
+      <Footer />
+    </>
+  )
+}

src/app/(frontend)/blogs/page.tsx

@@ -2,50 +2,36 @@ import React from 'react'
 import Header from '@/components/common/Header'
 import Footer from '@/components/common/Footer'
 import BlogCard from '@/components/blogs/BlogCard'
-import placeholderImage from '@/assets/groupPic.png'
-import {getBlogs} from "@/lib/payload/blogs";
-import {Blog} from "@/payload-types";
 import Search from '@/components/blogs/Search'
+import { getBlogs } from '@/lib/payload/blogs'
+import type { BlogType } from '@/types/blog'
 
 // This page is erroring.
 // force-dynamic is a temporary patch to prevent this page from being statically generated and failing the deployment build
 // Please remove when it's fixed
 export const dynamic = 'force-dynamic'
 
 export default async function BlogsPage() {
-  const data = await getBlogs({ page: 1, limit: 10 });
+
+  const { docs: blogs } = await getBlogs({ page: 1, limit: 10 })
 
   return (
-    <div className={'blogs'}>
+    <div className="blogs">
       <Header />
 
       {/* Hero Section */}
       <div className="px-[2.5rem] lg:px-[7rem] pt-16 pb-8 text-center">
-        <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-6xl font-extrabold leading-tight tracking-wide ">
+        <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-6xl font-extrabold leading-tight tracking-wide">
           BLOGS
         </h1>
-        <p className="text-sm sm:text-base md:text-lg lg:text-xl font-normal ">
+        <p className="text-sm sm:text-base md:text-lg lg:text-xl font-normal">
           A collection of insights, reflections, and voices from our community.
         </p>
       </div>
 
-      {/* Search Bar */}
-      <Search />
+      {/* Search Bar Filter + Blog Grid */}
+      <Search blogs={blogs} />
 
-      {/* Blog Grid */}
-      <div className="px-[2.5rem] lg:px-[7rem] mb-16 flex-1">
-        <div className=" grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 gap-[3rem] ">
-            {data.docs.map((blog: Blog) => (
-                // TODO: Change placeholderImage to blog.ImageUrl once all images come from CMS
-                <BlogCard
-                    key={blog.id}
-                    title={blog.title}
-                    description={blog.description ?? ''}
-                    imageUrl={typeof blog.image === 'object' && blog.image?.url ? blog.image.url : placeholderImage}
-                />
-            ))}
-        </div>
-      </div>
       <Footer />
     </div>
   )

src/app/(frontend)/events/page.tsx

@@ -1,31 +1,23 @@
-'use client'
-
-import { useState } from 'react'
 import Header from '@/components/common/Header'
 import Footer from '@/components/common/Footer'
 import Hero from '@/components/events/Hero'
 import EventsSignUpModal from '@/components/events/EventsSignUpModal'
 import RecentEvents from '@/components/events/RecentEvents'
 import PastEventsSection from '@/components/events/PastEventsSection'
 import PastEventsPopUpModal from '@/components/events/PastEventsPopUpModal'
+import {getPastEvents, getUpcomingEvents} from "@/lib/payload/events";
 
-export default function EventsPage() {
-  const [signOpen, setSignOpen] = useState(false)
+export default async function EventsPage() {
+  const upcoming = await getUpcomingEvents(5)
+  const past = await getPastEvents()
 
   return (
     <div className="home">
       <Header />
       <Hero />
-      <RecentEvents />
-      <PastEventsSection />
+      <RecentEvents initialEvents={upcoming}/>
+      <PastEventsSection initialEvents={past}/>
       <Footer />
-      <EventsSignUpModal signOpen={signOpen} setSignOpen={setSignOpen} />
-      <PastEventsPopUpModal
-        signOpen={signOpen}
-        setSignOpen={setSignOpen}
-        events={[]}
-        initialIdx={0}
-      />
     </div>
   )
 }

src/app/(frontend)/global.css

@@ -186,45 +186,75 @@
   }
 }
 
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+}
+
+@keyframes wiggle {
+  0%, 100% {
+    transform: rotate(0deg);
+  }
+  25% {
+    transform: rotate(-3deg);
+  }
+  75% {
+    transform: rotate(3deg);
+  }
+}
+
+@keyframes glow {
+  0%, 100% {
+    box-shadow: 0 0 5px rgba(19, 56, 78, 0.3);
+  }
+  50% {
+    box-shadow: 0 0 20px rgba(19, 56, 78, 0.6), 0 0 30px rgba(19, 56, 78, 0.4);
+  }
+}
+
 /* Animation Utility Classes */
 .animate-slide-in-left {
-  animation: slideInFromLeft 0.8s ease-out forwards;
+  animation: slideInFromLeft 0.5s ease-out forwards;
 }
 
 .animate-slide-in-right {
-  animation: slideInFromRight 0.8s ease-out forwards;
+  animation: slideInFromRight 0.5s ease-out forwards;
 }
 
 .animate-slide-in-bottom {
-  animation: slideInFromBottom 0.8s ease-out forwards;
+  animation: slideInFromBottom 0.5s ease-out forwards;
 }
 
 .animate-slide-in-top {
-  animation: slideInFromTop 0.8s ease-out forwards;
+  animation: slideInFromTop 0.5s ease-out forwards;
 }
 
 .animate-fade-in {
-  animation: fadeIn 1s ease-out forwards;
+  animation: fadeIn 0.6s ease-out forwards;
 }
 
 .animate-bob {
-  animation: bobUpDown 4s ease-in-out infinite;
+  animation: bobUpDown 3s ease-in-out infinite;
 }
 
 .animate-float {
-  animation: float 6s ease-in-out infinite;
+  animation: float 4s ease-in-out infinite;
 }
 
 .animate-scale-in {
-  animation: scaleIn 0.6s ease-out forwards;
+  animation: scaleIn 0.4s ease-out forwards;
 }
 
 .animate-gentle-rotate {
-  animation: gentleRotate 8s ease-in-out infinite;
+  animation: gentleRotate 6s ease-in-out infinite;
 }
 
 .animate-breathe {
-  animation: breathe 5s ease-in-out infinite;
+  animation: breathe 3s ease-in-out infinite;
 }
 
 .animate-shimmer {
@@ -233,6 +263,18 @@
   animation: shimmer 2s infinite;
 }
 
+.animate-pulse {
+  animation: pulse 2s ease-in-out infinite;
+}
+
+.animate-wiggle {
+  animation: wiggle 1s ease-in-out infinite;
+}
+
+.animate-glow {
+  animation: glow 3s ease-in-out infinite;
+}
+
 /* Staggered animations for multiple elements */
 .animate-stagger-1 { animation-delay: 0.1s; }
 .animate-stagger-2 { animation-delay: 0.2s; }

src/app/(frontend)/page.tsx

@@ -4,14 +4,26 @@ import Footer from '@/components/common/Footer'
 import HeroSection from '@/components/home/HeroSection'
 import WhatWeDo from '@/components/home/WhatWeDo'
 import WhoWeAre from '@/components/home/WhoWeAre'
+import Events from '@/components/home/Events'
+import { getPastEvents, getUpcomingEvents } from '@/lib/payload/events'
+import { getHomePageImages } from '@/lib/payload/images'
 
 export default async function HomePage() {
+  const upcoming = await getUpcomingEvents(5)
+  const past = await getPastEvents()
+
+  const [heroImage, whatWeDoImage, whoWeAreImage] = await Promise.all([
+    getHomePageImages('hero'),
+    getHomePageImages('what-we-do'),
+    getHomePageImages('who-we-are'),
+  ])
   return (
     <div className="home">
       <Header />
-      <HeroSection />
-      <WhoWeAre />
-      <WhatWeDo />
+      <HeroSection heroImage={heroImage} />
+      <WhoWeAre whoWeAreImage={whoWeAreImage} />
+      <WhatWeDo whatWeDoImage={whatWeDoImage} />
+      <Events initialEvents={upcoming} />
       <Footer />
     </div>
   )

src/collections/AboutPageImages.ts

@@ -0,0 +1,47 @@
+import { isEditorOrAdmin } from '@/access/UserAccess'
+import type { CollectionConfig } from 'payload'
+
+export const AboutPageImages: CollectionConfig = {
+  slug: 'about-page-images',
+  admin: {
+    useAsTitle: 'title',
+  },
+  access: {
+    read: () => true,
+    create: isEditorOrAdmin,
+    update: isEditorOrAdmin,
+    delete: isEditorOrAdmin,
+  },
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+      required: true,
+    },
+    {
+      name: 'image',
+      type: 'upload',
+      relationTo: 'media',
+      required: true,
+    },
+    {
+      name: 'placement',
+      type: 'select',
+      options: [
+        { label: 'Hero Section', value: 'hero' },
+        { label: 'Decription Image 1 (Top Right)', value: 'description-1' },
+        { label: 'Description Image 2 (Bottom Left)', value: 'description-2' },
+        { label: 'Quote Section', value: 'quote' },
+      ],
+      required: true,
+      admin: {
+        description: 'Where should this image appear on the about page?',
+      },
+    },
+    {
+      name: 'alt',
+      type: 'text',
+      required: true,
+    },
+  ],
+}