add markdown fix

app/use-cases/page.tsx

@@ -11,9 +11,9 @@ import { Card } from "@/components/ui/Card";
 import { Icons } from "@/components/Icons";
 
 const IconMapping: Record<WebsiteType, React.ReactNode> = {
-  twitter: <Icons.Twitter className="text-white hover:bg-brown-50 duration-200" />,
-  github: <Icons.Github className="text-white hover:bg-brown-50 duration-200" />,
-  website: <Icons.Website className="text-white hover:bg-brown-50 duration-200" />,
+  twitter: <Icons.Twitter className="text-white hover:text-brown-50 duration-200" />,
+  github: <Icons.Github className="text-white hover:text-brown-50 duration-200" />,
+  website: <Icons.Website className="text-white hover:text-brown-50 duration-200" />,
 };
 
 export default function UseCases() {
@@ -49,7 +49,7 @@ export default function UseCases() {
                         <span className="text-white text-sm font-normal font-inter line-clamp-5">{project.tldr}</span>
                       </div>
                     </div>
-                    <div className="mt-5">
+                    <div className="flex items-center gap-2 mt-5">
                       {Object.keys(project?.links ?? []).map((website, index) => {
                         // @ts-ignore
                         const url: string | undefined = project.links?.[website] ?? undefined;
@@ -60,11 +60,9 @@ export default function UseCases() {
                         if (!icon) return null;
 
                         return (
-                          <div key={index}>
-                            <AppLink href={url} external>
-                              {icon}
-                            </AppLink>
-                          </div>
+                          <AppLink key={index} href={url} external>
+                            {icon}
+                          </AppLink>
                         );
                       })}
                     </div>

components/AppHeader.tsx

@@ -11,7 +11,7 @@ import { cn } from "../shared/utils";
 import { LABELS } from "../content";
 
 const NavLabel = classed.span(
-  "relative overflow-hidden text-lg text-primary font-semibold group-hover:text-brown-50 hover:text-gold duration-300 after:content-[''] after:h-1 after:w-full after:bottom-0 after:left-0 after:absolute p-2 duration-200",
+  "relative overflow-hidden text-base md:text-lg text-primary font-semibold group-hover:text-brown-50 hover:text-gold duration-300 after:content-[''] after:h-1 after:w-full after:bottom-0 after:left-0 after:absolute p-2 duration-200",
   {
     variants: {
       active: {
@@ -26,7 +26,7 @@ const AppMobileNav = () => {
   const [isOpen, setIsOpen] = useState(false);
 
   return (
-    <div className="relative flex items-center md:hidden">
+    <div className="relative flex items-center lg:hidden">
       <AppContainer className="flex w-full justify-between items-center py-4">
         <Link href="/" type="button" aria-label="logo">
           <Icons.Logo className="text-primary" size={48} />
@@ -98,7 +98,7 @@ const AppDesktopNav = () => {
   const pathname = usePathname();
 
   return (
-    <AppContainer className="hidden md:py-[25px] md:grid items-center grid-cols-[200px_1fr_200px]">
+    <AppContainer className="hidden lg:py-[25px] lg:grid items-center grid-cols-[200px_1fr_200px]">
       <Link href="/">
         <Icons.Logo className="text-primary" />
       </Link>

components/AppMarkdown.tsx

@@ -34,12 +34,12 @@ const REACT_MARKDOWN_CONFIG: Components = {
     }),
   strong: ({ node, ...props }) =>
     createMarkdownElement("span", {
-      className: "underline",
+      className: "font-bold",
       ...props,
     }),
   b: ({ node, ...props }) =>
     createMarkdownElement("b", {
-      className: "text-bold",
+      className: "font-bold",
       ...props,
     }),
   span: ({ ...props }: any) => <Label.Paragraph {...props} />,