feat(blog): implement scheduled and draft posts filtering and preview UI

app/[locale]/blog/[slug]/page.tsx

@@ -69,6 +69,11 @@ export default async function BlogPost({ params }: BlogPostProps) {
         category={post.frontmatter.category}
         readingTime={getReadingTime(post.content)}
       />
+      {(new Date(post.frontmatter.date) > new Date() || post.frontmatter.public === false) && (
+        <div className="bg-orange-500 text-white text-center py-2 px-4 font-bold text-sm tracking-wider uppercase relative z-50">
+          Preview (Not visible in production)
+        </div>
+      )}
       {/* Featured Image Header */}
       {post.frontmatter.featuredImage ? (
         <div className="relative w-full h-[70vh] min-h-[500px] overflow-hidden group">

app/[locale]/blog/page.tsx

@@ -75,9 +75,16 @@ export default async function BlogIndex({ params }: BlogIndexProps) {
 
           <Container className="relative z-10">
             <div className="max-w-4xl animate-slide-up">
-              <Badge variant="saturated" className="mb-4 md:mb-6">
-                {t('featuredPost')}
-              </Badge>
+              <div className="flex flex-wrap items-center gap-3 mb-4 md:mb-6">
+                <Badge variant="saturated">{t('featuredPost')}</Badge>
+                {featuredPost &&
+                  (new Date(featuredPost.frontmatter.date) > new Date() ||
+                    featuredPost.frontmatter.public === false) && (
+                    <Badge variant="accent" className="bg-orange-500 text-white border-none">
+                      Preview
+                    </Badge>
+                  )}
+              </div>
               {featuredPost && (
                 <>
                   <Heading level={1} className="text-white mb-4 md:mb-8">
@@ -168,6 +175,15 @@ export default async function BlogIndex({ params }: BlogIndexProps) {
                             {post.frontmatter.category}
                           </Badge>
                         )}
+                        {(new Date(post.frontmatter.date) > new Date() ||
+                          post.frontmatter.public === false) && (
+                          <Badge
+                            variant="accent"
+                            className="absolute top-3 right-3 md:top-6 md:right-6 shadow-lg bg-orange-500 text-white border-none"
+                          >
+                            Preview
+                          </Badge>
+                        )}
                       </div>
                     )}
                     <div className="p-5 md:p-10 flex flex-col flex-1">