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 & thumbnailsFeaturedPosts→ 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:
