Build an Optimized Hero Image & Featured Posts Section in Next.js (With Prisma & Tailwind CSS)

FINAL IMPROVED PROMPT 1 (HeroImage.jsx)

Navbar next js 15 tailwind prompts

• HeroImage → for hero banners & thumbnails

• FeaturedPosts → for homepage SEO boost

You are a senior Next.js developer working in a production-grade project using Next.js App Router and Tailwind CSS.

Create a reusable image component at:

src/components/OptimizedImage/HeroImage.jsx

## Requirements:

### Imports:

- Import Image from "next/image"

---

## Component API:

Export default function HeroImage with props:

- src (string, required)

- alt (string, required)

- className (string, optional, default = "")

- isHero (boolean, optional, default = false)

---

## Image Optimization Logic:

1. If src exists:

- Convert .png, .jpg, .jpeg → .webp

- Example:

"/images/post.png" → "/images/post.webp"

2. If src is missing or invalid:

- fallback to:

"/images/blog/placeholder.webp"

---

## Blur Placeholder:

Create helper function:

function generateBlurDataURL() {

return "data:image/webp;base64,UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==";

}

---

## Rendering Rules:

Use <Image /> with:

- width={1920}

- height={1080}

- alt={alt}

- src={processedSrc}

---

## Dynamic Behavior:

- className:

"object-cover w-full h-full" + className

- priority:

true ONLY if isHero === true

- loading:

"eager" if isHero

"lazy" otherwise

- sizes:

if isHero:

"100vw"

else:

"(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"

- quality:

80 if isHero

75 otherwise

- placeholder:

"blur"

- blurDataURL:

generateBlurDataURL()

---

## Additional Requirements:

- Ensure no runtime errors if src is undefined

- Keep code minimal and readable

- Use modern ES6 syntax

- No unnecessary re-renders

---

## Output:

Return only the complete component code.

FINAL IMPROVED PROMPT 2 (FeaturedPosts.jsx)

You are a senior full-stack Next.js developer using Prisma and Tailwind CSS.

Create a production-ready Featured Posts component at:

src/components/FeaturedPosts/FeaturedPosts.jsx

---

## Imports:

- import Image from "next/image"

- import Link from "next/link"

- import { prisma } from "@/lib/prisma"

- import { DEFAULT_SITE_ID } from "@/lib/site"

---

## Component API:

Export default async function:

FeaturedPosts({ excludeIds = [] })

---

## Data Fetching (Server Component):

Use Prisma:

const posts = await prisma.post.findMany({

where: {

siteId: DEFAULT_SITE_ID,

featured: true,

published: true,

...(excludeIds.length > 0 && {

id: { notIn: excludeIds }

})

},

select: {

id: true,

slug: true,

title: true,

mainImage: true,

category: {

select: { name: true }

}

},

orderBy: {

createdAt: "desc"

},

take: 8

});

---

## Edge Case:

- If posts.length === 0 → return null

---

## UI Layout:

### Section:

- className: "py-12 bg-white"

### Header:

- Center aligned

- Small label:

"More Featured"

→ text-blue-600 uppercase text-xs tracking-wide

- Title:

"Additional Featured Stories"

→ text-2xl md:text-3xl font-bold text-gray-900

---

## Grid Layout:

- grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6 mt-10

---

## Card Design:

Each post:

- Wrap in Link:

href=/blog/${post.slug}}

### Card Container:

- "group relative h-[340px] rounded-xl overflow-hidden shadow-lg bg-gray-50 flex flex-col"

---

## Image Section:

- container:

"relative w-full h-[210px] bg-gray-200 overflow-hidden"

- imageSrc:

post.mainImage || "/images/blog/placeholder.webp"

- <Image />

- fill

- className:

"object-cover transition-transform duration-500 group-hover:scale-105"

- sizes:

"(max-width: 768px) 100vw, 50vw"

---

## Content Section:

- padding: p-4 flex flex-col gap-2

### Category Badge:

- if exists:

- "inline-block bg-blue-100 text-blue-600 text-xs font-medium px-3 py-1 rounded-full w-fit"

### Title:

- "text-sm font-bold text-gray-900 line-clamp-2 group-hover:text-blue-600 transition"

---

## UX Enhancements:

- Smooth hover animation

- Maintain aspect ratio

- Accessible alt text:

post.title

---

## Output:

Return full clean component code only.