npm - create-landing-app - Versions diffs - 0.2.8 → 0.3.0 - Mend

create-landing-app 0.2.8 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (57) hide show

package/templates/nextjs/optional/i18n-dict/files/components/navs/navbar.tsx CHANGED Viewed

@@ -11,12 +11,15 @@ import { cn } from "@/lib/utils";
 export default function Navbar() {
   const dict = useDictionary();
   const [isVisible, setIsVisible] = useState(true);
+  const [isScrolled, setIsScrolled] = useState(false);
   const lastScrollY = useRef(0);
   useEffect(() => {
     const controlNavbar = () => {
       const currentScrollY = window.scrollY;
+      setIsScrolled(currentScrollY > 10);
       if (currentScrollY < lastScrollY.current || currentScrollY < 10) {
         setIsVisible(true);
       } else {
@@ -33,8 +36,11 @@ export default function Navbar() {
   return (
     <header
       className={cn(
-        "fixed top-0 z-50 w-full border-b border-border/40 bg-background/80 backdrop-blur-sm header-shadow transition-transform duration-300",
-        isVisible ? "translate-y-0" : "-translate-y-[calc(100%+20px)]"
+        "fixed top-0 z-50 w-full transition-all duration-700 ease-in-out",
+        isVisible ? "translate-y-0" : "-translate-y-[calc(100%+20px)]",
+        isScrolled
+          ? "border-b border-border/40 bg-background/80 backdrop-blur-md shadow-sm"
+          : "border-b border-transparent bg-transparent",
       )}
     >
       <div className="content-container flex h-16 items-center justify-between">

package/templates/nextjs/optional/i18n-dict/files/{middleware.ts → proxy.ts} RENAMED Viewed

@@ -14,12 +14,18 @@ function getLocale(request: NextRequest): string {
   return matchLocale(languages, [...i18n.locales], i18n.defaultLocale);
 }
-export function middleware(request: NextRequest) {
+export function proxy(request: NextRequest) {
   const { pathname } = request.nextUrl;
   const pathnameHasLocale = i18n.locales.some(
     (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
   );
-  if (pathnameHasLocale) return;
+  if (pathnameHasLocale) {
+    // Forward detected locale to the root layout via response header
+    const locale = pathname.split("/")[1];
+    const response = NextResponse.next();
+    response.headers.set("x-locale", locale);
+    return response;
+  }
   const locale = getLocale(request);
   request.nextUrl.pathname = `/${locale}${pathname}`;

package/templates/nextjs/optional/i18n-dict/inject/app__layout.tsx ADDED Viewed

@@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import { headers } from "next/headers";
+import { Toaster } from "@/components/ui/sonner";
+import Providers from "@/components/providers";
+import { createMetadata } from "@/lib/metadata";
+import "./globals.css";
+// __PROVIDERS_IMPORT__
+const inter = Inter({ variable: "--font-inter", subsets: ["latin"] });
+export const metadata: Metadata = createMetadata({
+  title: "__PROJECT_NAME__",
+  description: "A modern landing page",
+});
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+  // Locale is set by the i18n middleware via x-locale response header
+  const headersList = await headers();
+  const lang = headersList.get("x-locale") ?? "en";
+  return (
+    <html lang={lang} suppressHydrationWarning>
+      <body className={`${inter.variable} font-sans antialiased`}>
+        <Providers>
+          {/* __PROVIDERS_WRAP_START__ */}
+          {children}
+          {/* __PROVIDERS_WRAP_END__ */}
+        </Providers>
+        <Toaster />
+      </body>
+    </html>
+  );
+}

package/templates/nextjs/optional/sections/blog/files/app/[lang]/blogs/(list)/[category]/main-page.tsx ADDED Viewed

@@ -0,0 +1,15 @@
+"use client";
+import BlogComponent from "@/components/blogs/blog-component";
+import type { Blog, BlogCategory } from "@/lib/blog-api";
+export default function MainPage({
+  category,
+  categories,
+  blogs,
+}: {
+  category: string;
+  categories: BlogCategory[];
+  blogs: Blog[];
+}) {
+  return <BlogComponent category={category} categories={categories} blogs={blogs} />;
+}

package/templates/nextjs/optional/sections/blog/files/app/[lang]/blogs/(list)/[category]/page.tsx ADDED Viewed

@@ -0,0 +1,38 @@
+import { getBlogCategories, getBlogsByCategory } from "@/lib/blog-api";
+import { createMetadata } from "@/lib/metadata";
+import { cache } from "react";
+import MainPage from "./main-page";
+// Cache listing pages — same window as detail pages, tune via NEXT_BLOG_REVALIDATE_SECONDS
+export const revalidate = Number(process.env.NEXT_BLOG_REVALIDATE_SECONDS) || 86400;
+const getCategories = cache(getBlogCategories);
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ category: string; lang: string }>;
+}) {
+  const { category } = await params;
+  const categories = await getCategories();
+  const matched = categories.find((c) => c.slug === category);
+  return createMetadata({
+    title: matched ? `Blog | ${matched.name}` : "Blog",
+    description: "Insights, tutorials, and updates from our team.",
+    path: `/blogs/${category}`,
+  });
+}
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ category: string; lang: string }>;
+}) {
+  const { category } = await params;
+  const [categories, { blogs }] = await Promise.all([
+    getCategories(),
+    getBlogsByCategory({ category, pageSize: 9999 }),
+  ]);
+  return <MainPage category={category} categories={categories} blogs={blogs} />;
+}

package/templates/nextjs/optional/sections/blog/files/app/[lang]/blogs/(list)/layout.tsx ADDED Viewed

@@ -0,0 +1,28 @@
+import Navbar from "@/components/navs/navbar";
+import FooterSection from "@/components/sections/footer-section";
+import LayoutBlogs from "@/components/navs/layout-blogs";
+import { getBlogCategories } from "@/lib/blog-api";
+// Nav categories are static data — cache window tunable via NEXT_BLOG_REVALIDATE_SECONDS
+export const revalidate = Number(process.env.NEXT_BLOG_REVALIDATE_SECONDS) || 86400;
+export default async function Layout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: Promise<{ lang: string }>;
+}) {
+  // params.lang available for future i18n label lookup
+  await params;
+  const categories = await getBlogCategories();
+  return (
+    <>
+      <Navbar />
+      <LayoutBlogs categories={categories}>{children}</LayoutBlogs>
+      <FooterSection />
+    </>
+  );
+}

package/templates/nextjs/optional/sections/blog/files/app/[lang]/blogs/detail/[slugNews]/blog-detail-view.tsx ADDED Viewed

@@ -0,0 +1,122 @@
+"use client";
+import Link from "next/link";
+import { useMemo } from "react";
+import { motion } from "motion/react";
+import { Button } from "@/components/ui/button";
+import type { Blog, BlogCategory } from "@/lib/blog-api";
+import { sanitizeBlogContent } from "@/lib/sanitize";
+import "@/styles/prose.css";
+function CategoryBadges({ categoryIds, categories = [] }: { categoryIds?: string[]; categories?: BlogCategory[] }) {
+  if (!categoryIds?.length) return null;
+  return (
+    <div className="flex flex-wrap gap-1">
+      {categoryIds.map((id) => {
+        const name = categories.find((c) => c.id === id)?.name ?? id;
+        return (
+          <Button key={id} className="h-[22px] w-fit rounded-[4px] bg-primary text-xs text-primary-foreground hover:bg-primary/80">
+            {name}
+          </Button>
+        );
+      })}
+    </div>
+  );
+}
+// Sidebar: related blogs in the same category
+function RelatedBlogs({ blogs, dateFormatter, categories }: { blogs: Blog[]; dateFormatter: Intl.DateTimeFormat; categories: BlogCategory[] }) {
+  if (!blogs.length) return null;
+  return (
+    <aside className="mt-40 col-span-4 flex flex-col gap-4 max-xl:col-span-1 max-xl:mt-0">
+      <h3 className="text-2xl font-semibold text-primary">Related Blogs</h3>
+      <div className="flex flex-col gap-6">
+        {blogs.slice(0, 5).map((blog) => (
+          <Link
+            key={blog.slug}
+            href={`/blogs/detail/${blog.slug}`}
+            className="flex items-start gap-4 hover:opacity-80 transition-opacity"
+          >
+            <div className="h-[91px] w-[118px] flex-shrink-0">
+              {blog.thumbnail ? (
+                <img
+                  src={blog.thumbnail}
+                  alt={blog.name}
+                  loading="lazy"
+                  className="h-full w-full object-cover rounded-[10px]"
+                />
+              ) : (
+                <div className="h-full w-full bg-muted rounded-[10px]" />
+              )}
+            </div>
+            <div className="flex flex-col gap-1">
+              <CategoryBadges categoryIds={blog.categoryIds} categories={categories} />
+              <span className="text-sm font-semibold leading-6 text-primary line-clamp-2">
+                {blog.name}
+              </span>
+              <time dateTime={blog.publishedAt} className="text-sm text-muted-foreground">
+                {dateFormatter.format(new Date(blog.publishedAt))}
+              </time>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </aside>
+  );
+}
+type BlogDetailViewProps = {
+  blog: Blog;
+  relatedBlogs: Blog[];
+  categories: BlogCategory[];
+  lang: string;
+};
+export function BlogDetailView({ blog, relatedBlogs, categories, lang }: BlogDetailViewProps) {
+  // Locale-aware date formatter — useMemo avoids recreation on every render
+  const dateFormatter = useMemo(
+    () => new Intl.DateTimeFormat(lang === "en" ? "en-US" : "vi-VN", {
+      day: "2-digit", month: "2-digit", year: "numeric",
+    }),
+    [lang]
+  );
+  const htmlContent = typeof blog.content === "string"
+    ? blog.content
+    : blog.content?.htmlContent ?? "";
+  return (
+    <motion.div
+      viewport={{ once: true }}
+      initial={{ opacity: 0, y: 40 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      transition={{ duration: 1.1 }}
+      className="py-20 grid grid-cols-12 gap-8 max-xl:grid-cols-1 max-md:mt-9"
+    >
+      {/* Main content */}
+      <article className="col-span-8 max-xl:col-span-1 flex flex-col gap-6">
+        <div className="flex flex-col gap-3">
+          <CategoryBadges categoryIds={blog.categoryIds} categories={categories} />
+          <h1 className="text-3xl font-semibold leading-tight text-primary">{blog.name}</h1>
+          <time dateTime={blog.publishedAt} className="text-sm text-muted-foreground">
+            {dateFormatter.format(new Date(blog.publishedAt))}
+          </time>
+          <div className="rounded-[4px] bg-muted p-4">
+            <p className="text-sm leading-5 text-primary">{blog.description}</p>
+          </div>
+        </div>
+        {blog.thumbnail && (
+          <img src={blog.thumbnail} alt={blog.name} className="w-full rounded-2xl object-cover max-h-[420px]" />
+        )}
+        {htmlContent && (
+          <div
+            className="ProseMirror"
+            dangerouslySetInnerHTML={{ __html: sanitizeBlogContent(htmlContent) }}
+          />
+        )}
+      </article>
+      <RelatedBlogs blogs={relatedBlogs} dateFormatter={dateFormatter} categories={categories} />
+    </motion.div>
+  );
+}

package/templates/nextjs/optional/sections/blog/files/app/[lang]/blogs/detail/[slugNews]/page.tsx ADDED Viewed

@@ -0,0 +1,73 @@
+import { notFound } from "next/navigation";
+import { cache } from "react";
+import { getBlogBySlug, getRelatedBlogs, getBlogCategories, getBlogs } from "@/lib/blog-api";
+import { createMetadata } from "@/lib/metadata";
+import { BlogDetailView } from "./blog-detail-view";
+import Navbar from "@/components/navs/navbar";
+import FooterSection from "@/components/sections/footer-section";
+// Cache this page's HTML — serve stale + regenerate in background after expiry
+export const revalidate = Number(process.env.NEXT_BLOG_REVALIDATE_SECONDS) || 86400;
+// Pre-render top 20 blog detail pages at build time; remaining slugs render on first visit then get cached
+export async function generateStaticParams() {
+  try {
+    const blogs = await getBlogs(20);
+    return blogs.map((blog) => ({ slugNews: blog.slug }));
+  } catch {
+    return []; // build succeeds even if API is down
+  }
+}
+// Deduplicate API calls shared between generateMetadata and Page
+const fetchBlog = cache(getBlogBySlug);
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ slugNews: string; lang: string }>;
+}) {
+  const { slugNews } = await params;
+  const blog = await fetchBlog(slugNews);
+  if (!blog) {
+    return createMetadata({ title: "Blog", description: "Blog" });
+  }
+  return createMetadata({
+    title: blog.name,
+    description: blog.description,
+    image: blog.thumbnail,
+    path: `/blogs/detail/${blog.slug}`,
+  });
+}
+// RSC: fetch blog + related, guard, pass as plain props to client component
+export default async function BlogDetailPage({
+  params,
+}: {
+  params: Promise<{ slugNews: string; lang: string }>;
+}) {
+  const { slugNews, lang } = await params;
+  const blog = await fetchBlog(slugNews);
+  // Guard — must happen server-side before anything renders
+  if (!blog) notFound();
+  // Parallel: categories + related (related needs blog.categoryIds[0] from above)
+  const [categories, relatedBlogs] = await Promise.all([
+    getBlogCategories(),
+    getRelatedBlogs(blog.categoryIds?.[0] ?? "", blog.id ?? ""),
+  ]);
+  return (
+    <>
+      <Navbar />
+      <main className="content-container">
+        <BlogDetailView blog={blog} relatedBlogs={relatedBlogs} categories={categories} lang={lang} />
+      </main>
+      <FooterSection />
+    </>
+  );
+}

package/templates/nextjs/optional/sections/blog/files/app/api/blogs/route.ts ADDED Viewed

@@ -0,0 +1,14 @@
+import { type NextRequest, NextResponse } from "next/server";
+import { getBlogsByCategory } from "@/lib/blog-api";
+// GET /api/blogs?category=all&page=1&pageSize=9999
+export async function GET(request: NextRequest) {
+  const { searchParams } = request.nextUrl;
+  const category = searchParams.get("category") ?? "all";
+  const page = parseInt(searchParams.get("page") ?? "1", 10);
+  const pageSize = parseInt(searchParams.get("pageSize") ?? "9999", 10);
+  const blogs = await getBlogsByCategory({ category, page, pageSize });
+  return NextResponse.json({ blogs });
+}

package/templates/nextjs/optional/sections/blog/files/components/blogs/blog-component.tsx ADDED Viewed

@@ -0,0 +1,58 @@
+"use client";
+import { useQuery } from "@tanstack/react-query";
+import { useIsMobile } from "@/hooks/use-mobile";
+import type { Blog, BlogCategory } from "@/lib/blog-api";
+import BlogViewDesktop from "./blog-view-desktop";
+import { BlogViewMobile } from "./blog-view-mobile";
+async function fetchBlogs(category: string): Promise<Blog[]> {
+  const params = new URLSearchParams({ category, pageSize: "9999" });
+  const res = await fetch(`/api/blogs?${params}`);
+  if (!res.ok) throw new Error("Failed to fetch blogs");
+  const data = await res.json();
+  return data.blogs;
+}
+export default function BlogComponent({ category, categories = [] }: { category: string; categories?: BlogCategory[] }) {
+  const isMobile = useIsMobile();
+  const { data, isError, isPending } = useQuery<Blog[]>({
+    queryKey: ["/blogs/list-all", { category }],
+    queryFn: () => fetchBlogs(category),
+    retry: 0,
+    refetchOnWindowFocus: false,
+  });
+  if (isPending) {
+    return (
+      <div className="grid grid-cols-3 gap-8 max-lg:grid-cols-2 max-sm:grid-cols-1">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <div key={i} className="flex flex-col gap-3 animate-pulse">
+            <div className="h-[200px] w-full rounded-xl bg-muted" />
+            <div className="h-4 w-20 rounded bg-muted" />
+            <div className="h-5 w-full rounded bg-muted" />
+            <div className="h-4 w-3/4 rounded bg-muted" />
+          </div>
+        ))}
+      </div>
+    );
+  }
+  if (isError) {
+    return (
+      <div className="flex min-h-[500px] items-center justify-center text-center text-muted-foreground">
+        Failed to load blogs. Please try again.
+      </div>
+    );
+  }
+  if (!data || data.length === 0) {
+    return (
+      <div className="flex min-h-[500px] items-center justify-center text-center text-2xl font-bold text-primary">
+        No blogs yet
+      </div>
+    );
+  }
+  return isMobile ? <BlogViewMobile data={data} categories={categories} /> : <BlogViewDesktop data={data} categories={categories} />;
+}

package/templates/nextjs/optional/sections/blog/files/components/blogs/blog-view-desktop.tsx ADDED Viewed

@@ -0,0 +1,121 @@
+"use client";
+import Link from "next/link";
+import { motion } from "motion/react";
+import { Button } from "@/components/ui/button";
+import type { Blog, BlogCategory } from "@/lib/blog-api";
+function formatDate(date: string) {
+  return new Date(date).toLocaleDateString("en-GB");
+}
+function Thumbnail({ src, alt, className }: { src?: string; alt?: string; className: string }) {
+  return src ? (
+    <img src={src} alt={alt ?? ""} loading="lazy" className={`h-full w-full object-cover ${className}`} />
+  ) : (
+    <div className={`h-full w-full bg-muted ${className}`} />
+  );
+}
+function CategoryBadges({ categoryIds, categories }: { categoryIds?: string[]; categories: BlogCategory[] }) {
+  if (!categoryIds?.length) return null;
+  return (
+    <div className="flex flex-wrap gap-1">
+      {categoryIds.map((id) => (
+        <Button key={id} className="h-[22px] w-fit rounded-[4px] bg-primary px-2 text-xs text-primary-foreground hover:bg-primary/80">
+          {categories.find((c) => c.id === id)?.name ?? id}
+        </Button>
+      ))}
+    </div>
+  );
+}
+export default function BlogViewDesktop({ data, categories = [] }: { data: Blog[]; categories?: BlogCategory[] }) {
+  const [featured, ...rest] = data;
+  return (
+    <motion.div
+      viewport={{ once: true }}
+      initial={{ opacity: 0, y: 40 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      transition={{ duration: 1.1 }}
+      className="flex flex-col gap-[128px] pb-20"
+    >
+      {/* Featured + Sidebar */}
+      <div className="flex justify-between gap-[29px] max-lg:gap-5">
+        {/* Featured Blog (Left) */}
+        <div className={`flex flex-col gap-2 ${data.length <= 1 ? "w-full" : "w-1/2"}`}>
+          <Link
+            href={`/blogs/detail/${featured.slug}`}
+            className={`w-full ${data.length <= 1 ? "h-[500px]" : "h-[320px]"}`}
+          >
+            <Thumbnail src={featured.thumbnail} alt={featured.name} className="rounded-[16px]" />
+          </Link>
+          <div className="mt-1">
+            <CategoryBadges categoryIds={featured.categoryIds} categories={categories} />
+          </div>
+          <Link
+            href={`/blogs/detail/${featured.slug}`}
+            className="line-clamp-2 text-xl font-semibold leading-[24px] text-primary hover:underline"
+          >
+            {featured.name}
+          </Link>
+          <time dateTime={featured.publishedAt} className="text-sm leading-5 text-primary">
+            {formatDate(featured.publishedAt)}
+          </time>
+          <span className="mt-2 text-sm leading-5 text-primary">{featured.description}</span>
+        </div>
+        {/* Sidebar (Right) — next 3 blogs */}
+        {rest.length > 0 && (
+          <div className="flex w-1/2 flex-col gap-[30px]">
+            {rest.slice(0, 3).map((blog) => (
+              <Link
+                key={blog.slug}
+                href={`/blogs/detail/${blog.slug}`}
+                className="flex gap-[30px] max-xl:gap-6 max-lg:gap-4"
+              >
+                <div className="h-[147px] w-[191px] flex-shrink-0 max-lg:h-[130px] max-lg:w-[169px]">
+                  <Thumbnail src={blog.thumbnail} alt={blog.name} className="rounded-[10px]" />
+                </div>
+                <div className="flex flex-col gap-2">
+                  <CategoryBadges categoryIds={blog.categoryIds} categories={categories} />
+                  <span className="line-clamp-3 text-xl font-semibold leading-[30px] text-primary hover:underline max-xl:text-lg max-lg:text-base">
+                    {blog.name}
+                  </span>
+                  <time dateTime={blog.publishedAt} className="text-sm leading-5 text-primary">
+                    {formatDate(blog.publishedAt)}
+                  </time>
+                </div>
+              </Link>
+            ))}
+          </div>
+        )}
+      </div>
+      {/* Grid — blogs beyond index 4 */}
+      {data.length > 4 && (
+        <div className="flex flex-col gap-[32px]">
+          <span className="text-2xl font-semibold leading-8 text-primary">More Blogs</span>
+          <div className="grid grid-cols-4 gap-8 max-lg:grid-cols-2">
+            {data.slice(4).map((blog) => (
+              <Link key={blog.slug} href={`/blogs/detail/${blog.slug}`} className="flex flex-col gap-[30px]">
+                <div className="h-[220px] w-full max-lg:h-[160px]">
+                  <Thumbnail src={blog.thumbnail} alt={blog.name} className="rounded-[16px]" />
+                </div>
+                <div className="flex flex-col gap-2">
+                  <CategoryBadges categoryIds={blog.categoryIds} categories={categories} />
+                  <span className="line-clamp-2 text-xl font-semibold leading-[30px] text-primary max-xl:text-lg max-lg:text-base">
+                    {blog.name}
+                  </span>
+                  <time dateTime={blog.publishedAt} className="text-sm leading-5 text-primary">
+                    {formatDate(blog.publishedAt)}
+                  </time>
+                </div>
+              </Link>
+            ))}
+          </div>
+        </div>
+      )}
+    </motion.div>
+  );
+}

package/templates/nextjs/optional/sections/blog/files/components/blogs/blog-view-mobile.tsx ADDED Viewed

@@ -0,0 +1,90 @@
+"use client";
+import Link from "next/link";
+import { motion } from "motion/react";
+import { Button } from "@/components/ui/button";
+import type { Blog, BlogCategory } from "@/lib/blog-api";
+function formatDate(date: string) {
+  return new Date(date).toLocaleDateString("en-GB");
+}
+function CategoryBadges({ categoryIds, categories }: { categoryIds?: string[]; categories: BlogCategory[] }) {
+  if (!categoryIds?.length) return null;
+  return (
+    <div className="flex flex-wrap gap-1">
+      {categoryIds.map((id) => (
+        <Button key={id} className="h-[22px] w-fit rounded-[4px] bg-primary px-2 text-xs text-primary-foreground hover:bg-primary/80">
+          {categories.find((c) => c.id === id)?.name ?? id}
+        </Button>
+      ))}
+    </div>
+  );
+}
+export function BlogViewMobile({ data, categories = [] }: { data: Blog[]; categories?: BlogCategory[] }) {
+  const [featured, ...rest] = data;
+  return (
+    <motion.div
+      viewport={{ once: true }}
+      initial={{ opacity: 0, y: 40 }}
+      whileInView={{ opacity: 1, y: 0 }}
+      transition={{ duration: 1.1 }}
+      className="flex flex-col gap-6 pb-20"
+    >
+      {/* Featured Blog */}
+      <div className="flex flex-col gap-2">
+        <Link href={`/blogs/detail/${featured.slug}`} className="h-[230px] w-full">
+          {featured.thumbnail ? (
+            <img
+              src={featured.thumbnail}
+              alt={featured.name}
+              loading="eager"
+              className="h-full w-full object-cover rounded-[16px]"
+            />
+          ) : (
+            <div className="h-full w-full bg-muted rounded-[16px]" />
+          )}
+        </Link>
+        <CategoryBadges categoryIds={featured.categoryIds} categories={categories} />
+        <Link
+          href={`/blogs/detail/${featured.slug}`}
+          className="text-xl font-semibold leading-[30px] text-primary hover:underline"
+        >
+          {featured.name}
+        </Link>
+        <time dateTime={featured.publishedAt} className="text-sm text-primary">
+          {formatDate(featured.publishedAt)}
+        </time>
+        <span className="text-sm text-primary">{featured.description}</span>
+      </div>
+      {/* Rest of blogs */}
+      <div className="flex flex-col gap-6">
+        {rest.map((blog) => (
+          <Link key={blog.slug} href={`/blogs/detail/${blog.slug}`} className="flex items-start gap-4">
+            <div className="h-[91px] w-[118px] flex-shrink-0">
+              {blog.thumbnail ? (
+                <img
+                  src={blog.thumbnail}
+                  alt={blog.name}
+                  loading="lazy"
+                  className="h-full w-full object-cover rounded-[10px]"
+                />
+              ) : (
+                <div className="h-full w-full bg-muted rounded-[10px]" />
+              )}
+            </div>
+            <div className="flex flex-col gap-2">
+              <CategoryBadges categoryIds={blog.categoryIds} categories={categories} />
+              <span className="text-sm font-semibold text-primary hover:underline">{blog.name}</span>
+              <time dateTime={blog.publishedAt} className="text-xs text-primary">
+                {formatDate(blog.publishedAt)}
+              </time>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </motion.div>
+  );
+}