Yes yes yes

import { client } from '@/lib/sanity'
import { Post } from '@/types/sanity'
import NewsSlider from '@/app/components/NewsSlider' // We'll create this next

async function getLatestPosts(): Promise<Post[]> {
const query = `*[_type == "post"] | order(publishedAt desc)[0...8]{
title,
slug,
excerpt,
publishedAt,
mainImage,
"author": coalesce(author->name, author),
categories
}`
return await client.fetch(query)
}

export default async function LatestNewsSection() {
const posts = await getLatestPosts()

if (posts.length === 0) {
return (
<section className="w-full bg-[#f8fafc] py-12 text-center">
<p className="text-gray-500">No news available.</p>
</section>
)
}

return (
<section className="w-full bg-[#f8fafc] py-12 md:py-16 border-t border-gray-100 relative overflow-hidden">
<div className="max-w-[1400px] mx-auto px-4 md:px-6">
{/* Header Area */}
<div className="flex items-center justify-between mb-8 md:mb-10">
<div className="flex items-center gap-3">
<div className="w-1.5 h-7 md:h-8 bg-[#008ddf] rounded-full shadow-sm shadow-[#008ddf]/40"></div>
<div>
<h2 className="text-xl md:text-3xl font-extrabold text-gray-900 tracking-tight">
Latest From CricBlink
</h2>
<p className="text-[10px] md:text-xs text-gray-500 font-bold uppercase tracking-widest mt-0.5">
Official Cricket News Feed
</p>
</div>
</div>

<div className="hidden md:flex items-center gap-2 bg-white px-3 py-1.5 rounded-full shadow-sm border border-gray-100">
<div className="w-2 h-2 bg-[#E4405F] rounded-full animate-pulse"></div>
<span className="text-[10px] font-bold uppercase tracking-widest text-gray-400">Live Updates</span>
</div>
</div>

{/* The Client-Side Slider Component */}
<NewsSlider posts={posts} />
</div>
</section>
)
}