feat: design qa (#37)

* feat: delete article

* feat: author name

* feat: thumbnail

* feat: dark mode

* feat: header only main page

* feat: detail

* feat: delete header

Author: syhgpd

app/_components/blog/index.tsx

@@ -8,9 +8,9 @@ export default async function BlogList() {
   // const tags = [...new Set(allTags)].filter((tag) => tag !== undefined);
 
   return (
-    <div className="pt-20 min-h-screen bg-black px-4">
+    <div className="pt-20 min-h-screen bg-white dark:bg-black px-4">
       <div className="max-w-2xl mx-auto flex-col gap-6 flex">
-        <h1 className="text-3xl text-white font-oceanic">Blog</h1>
+        <h1 className="text-3xl dark:text-white text-gray-900 font-oceanic">Blog</h1>
 
         {/* Todo: Category Tag */}
         {/* <div className="flex w-full flex-wrap gap-2">
@@ -24,20 +24,21 @@ export default async function BlogList() {
             const { title, date, tags, author } = frontMatter;
             return (
               <Link
-                href={`/blog/${route}`}
+                href={`/blog${route}`}
+                target="_blank"
                 key={route}
-                className="group flex w-full hover:bg-white/20 duration-300 transition-all cursor-pointer flex-col gap-2 rounded-xl border-gray-700 p-4"
+                className="group flex w-full hover:bg-black/10 dark:hover:bg-white/20 duration-300 transition-all cursor-pointer flex-col gap-2 rounded-xl border-gray-700 p-4"
               >
-                <h1 className="h-16 text-2xl font-medium text-zinc-50">
+                <h1 className="h-16 text-2xl font-medium text-zinc-800 dark:text-zinc-50">
                   {title}
                 </h1>
                 <div className="flex w-full items-center justify-between">
-                  <div className="flex gap-1 text-base text-gray-300">
+                  <div className="flex gap-1 text-base text-gray-400 dark:text-gray-300">
                     <p>{date}</p>
                     <p>∙</p>
                     <p>{author}</p>
                   </div>
-                  <div className="w-fit rounded-full bg-gray-800 px-2 py-1 text-xs text-gray-400 border-[0.5px] border-gray-600">
+                  <div className="w-fit rounded-full bg-gray-100 dark:bg-gray-800 px-2 py-1 text-xs text-gray-400 border-[0.5px] border-gray-300 dark:border-gray-600">
                     # {tags}
                   </div>
                 </div>

app/_components/home/LatestArticles.tsx

@@ -14,7 +14,7 @@ export default async function LatestArticles() {
     <div className="mx-auto flex w-full max-w-[1440px] flex-col gap-10 px-4 py-40 md:max-h-screen md:px-10">
       <div className="flex items-center justify-between">
         <h3 className="text-[32px] text-[#071414]">Latest articles</h3>
-        <Link href="/blog" className="flex items-center gap-7 text-[#002424]">
+        <Link href="/blog" target="_blank" className="flex items-center gap-7 text-[#002424]">
           View All <ArrowRightIcon size={24} />
         </Link>
       </div>

app/_components/home/Roadmap.tsx

@@ -28,13 +28,13 @@ export default function Roadmap() {
           </Link>
         </div>
 
-        <div className="flex w-full flex-col gap-4 drop-shadow-[0_0_100px_rgba(134,255,217,0.40)] md:w-auto">
+        <div className="flex w-full max-w-[646px] flex-col gap-4 drop-shadow-[0_0_100px_rgba(134,255,217,0.40)] md:w-auto">
           {ROADMAP.map(({ title, keywords, className, itemClassName }) => (
             <div
               key={title}
               className={`flex w-full flex-row gap-2 rounded-2xl p-3.5 md:w-[646px] md:rounded-[20px] overflow-scroll ${className}`}
             >
-              <h3 className="flex items-center flex-1 justify-center text-center text-lg md:text-[22px] whitespace-pre-line">
+              <h3 className="flex items-center min-w-32 flex-1 justify-center text-center text-lg md:text-[22px] whitespace-pre-line">
                 {title}
               </h3>
               <div className="flex flex-row gap-2">

app/blog/[[...mdxPath]]/page.tsx

@@ -28,7 +28,7 @@ export default async function BlogDetailPage(props: any) {
   if (Object.keys(params).length === 0) return <BlogList />;
 
   return (
-    <Layout nextThemes={{ forcedTheme: "dark" }}>
+    <Layout>
       <div className="pt-20">
         <Wrapper toc={toc} metadata={filteredMetadata}>
           <MDXContent {...props} params={params} />

app/layout.tsx

@@ -2,7 +2,6 @@
 import { Head } from "nextra/components";
 import type { Metadata } from "next";
 import Footer from "./_components/layout/Footer";
-import Header from "./_components/layout/Header";
 import ToastProvider from "./_providers/ToastProvider";
 import "./globals.css";
 
@@ -21,7 +20,6 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <Head />
       <body>
-        <Header />
         <main>{children}</main>
         <Footer />
         <ToastProvider />

app/page.tsx

@@ -5,17 +5,21 @@ import Roadmap from "./_components/home/Roadmap";
 import Service from "./_components/home/Service";
 import OpenSource from "./_components/home/OpenSource";
 import Banner from "./_components/common/Banner";
+import Header from "./_components/layout/Header";
 
 export default function Home() {
   return (
-    <div className="flex flex-col items-center bg-white">
-      <Welcome />
-      <HowItWorks />
-      <Service />
-      <OpenSource />
-      <Roadmap />
-      <LatestArticles />
-      <Banner />
-    </div>
+    <>
+      <Header />
+      <div className="flex flex-col items-center bg-white">
+        <Welcome />
+        <HowItWorks />
+        <Service />
+        <OpenSource />
+        <Roadmap />
+        <LatestArticles />
+        <Banner />
+      </div>
+    </>
   );
 }

content/come-and-join-us-in-the-playground.mdx

@@ -3,7 +3,7 @@ title: "Meet Our New member : User Interview Agent"
 date: "2025-03-28"
 tags:
   - Team News
-author: Owen Seo
+author: Owen
 thumbnail: "/contents/meet-our-new-member/thumbnail.png"
 ---
 
@@ -31,7 +31,7 @@ But what if we could leverage AI technology to bring the conversational depth an
 
 <hr />
 
-Real Thoughts Emerge Through Conversations
+# Real Thoughts Emerge Through Conversations
 
 <video controls>
   <source src="/contents/meet-our-new-member/3.mp4" type="video/mp4" />
@@ -59,7 +59,7 @@ Of course, due to the nature of Large Language Models (LLMs), prompts are not re
 
 <hr />
 
-Organizing Insights Through AI Agents
+# Organizing Insights Through AI Agents
 
 <video controls>
   <source src="/contents/meet-our-new-member/5.mp4" type="video/mp4" />

content/meet-our-new-member.mdx

@@ -3,7 +3,7 @@ title: The Journey of Building a CS Refund Agent
 date: "2025-03-28"
 tags:
   - Team News
-author: Leo Ko
+author: Leo
 thumbnail: "/contents/the-journey-of-building-a-cs-refund-agent/thumbnail.png"
 ---