fixesAsPerFeedback

app/blogs/page.tsx

@@ -35,7 +35,7 @@ export default function BlogIndexPage() {
             className="h-20 w-auto md:h-24"
           />
           <p className="font-heading text-sm font-semibold uppercase tracking-wide text-cashmere-700">
-            Kokio Blogs
+            Kokio Blog
           </p>
           <h1 className="font-heading text-4xl font-bold text-outer-space-950 md:text-5xl">
             Guides, updates, and stories from Kokio
@@ -47,11 +47,14 @@ export default function BlogIndexPage() {
         </header>
 
         <div className="flex flex-col gap-6">
-          <ManifestoCard manifesto={manifesto} />
           {posts.map((post) => (
             <PostCard key={post.slug} post={post} />
           ))}
         </div>
+
+        <div className="mt-16 md:mt-20">
+          <ManifestoCard manifesto={manifesto} />
+        </div>
       </div>
     </main>
   );

components/blog/manifesto-card.tsx

@@ -1,33 +1,42 @@
 import Image from "next/image";
 import Link from "next/link";
+import { ArrowRight } from "lucide-react";
 
 import type { Manifesto } from "@/lib/manifesto";
 
+/** Featured banner for /manifesto on the blog index. Deliberately not a
+ * PostCard: it carries the manifesto page's meadow + sand palette so it reads
+ * as a standalone document, separate from the dated posts above it. */
 export function ManifestoCard({ manifesto }: { manifesto: Manifesto }) {
   return (
     <Link
       href="/manifesto"
-      className="group flex flex-col overflow-hidden rounded-3xl border border-esim-black-100 bg-background shadow-sm transition-shadow hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cashmere-500 focus-visible:ring-offset-2 sm:flex-row"
+      className="group relative block overflow-hidden rounded-3xl border-2 border-manifesto-sand-border shadow-sm transition-shadow hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-manifesto-coral focus-visible:ring-offset-2"
     >
-      <div className="relative h-48 w-full shrink-0 bg-cashmere-50 sm:h-auto sm:w-64">
-        <Image
-          src="/manifesto/meadow-bg.png"
-          alt=""
-          fill
-          sizes="(min-width: 640px) 256px, 100vw"
-          className="object-cover transition-transform duration-300 group-hover:scale-105"
-        />
-      </div>
-      <div className="flex flex-1 flex-col gap-3 p-6">
-        <span className="w-fit rounded-full bg-cashmere-100 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-cashmere-700">
-          Manifesto
+      <Image
+        src="/manifesto/meadow-bg.png"
+        alt=""
+        fill
+        sizes="(min-width: 896px) 896px, 100vw"
+        className="object-cover transition-transform duration-500 group-hover:scale-105"
+      />
+      <div className="relative flex flex-col items-center gap-4 bg-manifesto-card/85 px-6 py-12 text-center backdrop-blur-sm transition-colors group-hover:bg-manifesto-card/75 md:px-16 md:py-16">
+        <span className="text-xs font-semibold uppercase tracking-widest text-manifesto-coral">
+          Inside Kokio
         </span>
-        <h2 className="font-heading text-xl font-bold text-outer-space-950 group-hover:text-cashmere-600 md:text-2xl">
+        <h2 className="max-w-2xl font-heading text-2xl font-bold text-manifesto-ink md:text-4xl">
           {manifesto.title}
         </h2>
-        <p className="line-clamp-2 text-sm font-light text-esim-black-700 md:text-base">
+        <p className="max-w-xl text-sm leading-relaxed text-manifesto-ink/80 md:text-base">
           {manifesto.description}
         </p>
+        <span className="mt-2 inline-flex items-center gap-1.5 text-sm font-semibold text-manifesto-teal">
+          Read the Manifesto
+          <ArrowRight
+            aria-hidden="true"
+            className="h-4 w-4 transition-transform group-hover:translate-x-1"
+          />
+        </span>
       </div>
     </Link>
   );