feat(dimentorin): slicing landing - detail articles page

apps/dimentorin/src/app/(public)/_components/header.tsx

@@ -2,7 +2,7 @@ import { CloseOutlined, MenuOutlined } from "@ant-design/icons";
 import { Button } from "@imphnen-frontend-service/ui/atoms";
 import { cn, For, Show } from "@imphnen-frontend-service/utils";
 import { motion, useMotionValueEvent, useScroll, Variants } from "framer-motion";
-import { FC, useState } from "react";
+import { FC, useMemo, useState } from "react";
 import { Link, NavLink, useLocation } from "react-router-dom";
 
 const MENUS: { label: string; href: string }[] = [
@@ -30,6 +30,13 @@ export const Header: FC = () => {
     else setShow(true)
   })
 
+  const isActive = useMemo(() => {
+    return (path: string) => {
+      if (path === '/' && location.pathname !== '/') return false
+      return location.pathname.includes(path)
+    }
+  }, [location.pathname]);
+
   return (
     <div className={cn("w-full px-8 pt-8 top-0 z-50 md:px-[60px] md:pt-[60px] lg:px-20 sticky", !show && "overflow-hidden")}>
       <motion.header
@@ -63,7 +70,7 @@ export const Header: FC = () => {
                 variant="text"
                 className={cn(
                   "px-10 py-1.5 text-neutral-300 hover:text-neutral-400 lg:px-2.5 lg:py-2",
-                  location.pathname === menu.href && "text-primary-500 hover:text-primary-500"
+                  isActive(menu.href) && "text-primary-500 hover:text-primary-500"
                 )}
               >
                 <NavLink to={menu.href}>{menu.label}</NavLink>

apps/dimentorin/src/app/(public)/articles/_components/card/article.tsx

@@ -1,6 +1,7 @@
 import { Button } from "@imphnen-frontend-service/ui/atoms"
 import { cn, Show } from "@imphnen-frontend-service/utils"
 import { FC } from "react"
+import { Link } from "react-router-dom"
 
 export type ArticleCardProps = {
   variant?: "default" | "recent" | "featured"
@@ -31,7 +32,8 @@ export const ArticleCard: FC<ArticleCardProps> = ({ variant = 'default' }) => {
         <div className="w-max bg-primary-200 text-primary-600 px-3 py-1 text-xs font-medium rounded-4xl mb-4 xl:mb-[15px]">
           5 min read
         </div>
-        <h1
+        <Link
+          to="/articles/detail"
           className={cn(
             "text-[15px] text-neutral-800 font-semibold mb-4 line-clamp-2 md:text-[19px] xl:mb-[23px]",
             variant === "featured" && "text-[19px] md:text-[23px]",
@@ -39,7 +41,7 @@ export const ArticleCard: FC<ArticleCardProps> = ({ variant = 'default' }) => {
           )}
         >
           Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        </h1>
+        </Link>
         <Show condition={variant !== "recent"}>
           <p 
             className={cn(