feat: qa-0421 (#40)

* feat: change main image

* feat: change favicon

* feat: client component

* feat: add blog category chip

* feat: update header

* feat: useURLSearchParams

* feat: style

* feat: value card

* feat: key

* feat: suspence

Author: syhgpd

app/_components/about/OurValue.tsx

@@ -1,11 +1,10 @@
 "use client";
 
 import { OUR_VALUE } from "@/app/_constants/about";
-import { ArrowUpRight, Plus } from "lucide-react";
-import Image from "next/image";
+import { ArrowUpRight } from "lucide-react";
 import { Button } from "../common/button";
 import { openToast } from "../common/toast";
-import { addBasePath } from "@/app/_lib/add-base-path";
+import ValueCard from "./ValueCard";
 
 export default function OurValue() {
   return (
@@ -22,36 +21,7 @@ export default function OurValue() {
           </p>
         </div>
         <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
-          {OUR_VALUE.map(({ title, content, thumbnail }, i) => (
-            <div key={i} className="flex flex-col gap-4">
-              <h3 className="text-2xl text-[#002424] md:hidden">{title}</h3>
-              <div className="group relative aspect-[703/518] overflow-hidden rounded-2xl text-[#E6FDFC]">
-                <Image
-                  src={addBasePath(thumbnail)}
-                  alt={title}
-                  fill
-                  objectFit="cover"
-                />
-                <div className="absolute top-0 h-full w-full bg-[#000000]/40 opacity-0 backdrop-blur-2xl transition-all duration-300 group-hover:opacity-100" />
-
-                <div className="absolute top-10 right-10 flex h-10 w-10 items-center justify-center rounded-full border-2 border-[#FFFFFF] group-hover:hidden">
-                  <Plus size={32} strokeWidth={1.5} color="#FFFFFF" />
-                </div>
-
-                <div className="flex h-full w-full flex-col justify-center p-8 md:p-14">
-                  <p className="hidden translate-y-[-20px] transform text-base opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100 md:block">
-                    Our Value {i + 1}
-                  </p>
-                  <h3 className="mt-4 hidden translate-y-[-20px] transform text-[32px] opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100 md:block">
-                    {title}
-                  </h3>
-                  <p className="translate-y-[20px] transform text-sm opacity-0 transition-all duration-300 group-hover:block group-hover:translate-y-0 group-hover:opacity-60 md:mt-auto md:text-xl">
-                    {content}
-                  </p>
-                </div>
-              </div>
-            </div>
-          ))}
+          {OUR_VALUE.map((props, i) => <ValueCard key={i} {...props} index={i} />)}
         </div>
       </div>
 

app/_components/about/ValueCard.tsx

@@ -0,0 +1,53 @@
+import { addBasePath } from "@/app/_lib/add-base-path";
+import clsx from "clsx";
+import { Plus, X } from "lucide-react";
+import Image from "next/image";
+import { useState } from "react";
+
+interface ValueCardProps {
+    title: string;
+    content: string;
+    thumbnail: string;
+    index: number;
+}
+
+export default function ValueCard({ title, content, thumbnail, index }: ValueCardProps) {
+    const [showContent, setShowContent] = useState(false);
+
+    return (
+        <div key={index} className="flex flex-col gap-4">
+            <h3 className="text-2xl text-[#002424] md:hidden">{title}</h3>
+            <div className="group relative aspect-[703/518] overflow-hidden rounded-2xl text-[#E6FDFC]">
+                <Image
+                    src={addBasePath(thumbnail)}
+                    alt={title}
+                    fill
+                    objectFit="cover"
+                />
+                <div className={clsx(["absolute top-0 h-full w-full bg-[#000000]/40 opacity-0 backdrop-blur-2xl transition-all duration-300 md:group-hover:opacity-100", showContent && "opacity-100"])} />
+
+                <div
+                    className="absolute top-10 right-10 flex h-10 w-10 items-center justify-center rounded-full border-2 border-[#FFFFFF] cursor-pointer md:group-hover:hidden"
+                    onClick={() => setShowContent((prev) => !prev)}
+                >
+                    {showContent ? <X size={32} strokeWidth={1.5} color="#FFFFFF" /> : <Plus size={32} strokeWidth={1.5} color="#FFFFFF" />}
+                </div>
+
+                <div className="flex h-full w-full flex-col justify-center p-8 md:p-14">
+                    <p className="hidden translate-y-[-20px] transform text-base opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100 md:block">
+                        Our Value {index + 1}
+                    </p>
+                    <h3 className="mt-4 hidden translate-y-[-20px] transform text-[32px] opacity-0 transition-all duration-300 group-hover:translate-y-0 group-hover:opacity-100 md:block">
+                        {title}
+                    </h3>
+
+                    <p
+                        className={clsx(["mt-4 text-sm transition-opacity duration-300 md:mt-auto md:text-xl opacity-0 md:group-hover:block md:group-hover:opacity-60", showContent && "block opacity-60"])}
+                    >
+                        {content}
+                    </p>
+                </div>
+            </div>
+        </div>
+    )
+}

app/_components/blog/BlogList.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { useURLSearchParams } from "@/app/_hooks/useURLSearchParams";
+import Link from "next/link";
+import { Item } from "nextra/normalize-pages";
+
+export default function BlogList({ posts }: { posts: Item[] }) {
+    const { searchParams } = useURLSearchParams();
+    const tag = searchParams.get("tag");
+
+    const filteredPosts = posts.filter((post) => {
+        if (!post.frontMatter) return false;
+        if (tag && !post.frontMatter.tags?.includes(tag)) return false;
+        return true;
+    });
+
+    if (filteredPosts.length === 0) {
+        return (
+            <p className="text-base text-[#002424] mt-4 text-center">No results found.</p>
+        )
+    }
+
+    return (
+        <div className="flex flex-col items-center gap-3">
+            {filteredPosts.map(({ frontMatter, route }) => {
+                const { title, date, tags, author } = frontMatter;
+                return (
+                    <Link
+                        href={`/blog${route}`}
+                        key={route}
+                        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-lg 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-400 dark:text-gray-300">
+                                <p>{date}</p>
+                                <p>∙</p>
+                                <p>{author}</p>
+                            </div>
+                            <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>
+                    </Link>
+                )
+            })}
+        </div>
+    )
+}

app/_components/blog/CategoryChip.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { BLOG_TAGS } from "@/app/_constants/blog";
+import { useURLSearchParams } from "@/app/_hooks/useURLSearchParams";
+import { cva } from "class-variance-authority";
+
+const chipVariants = cva(
+    "w-fit rounded-full border cursor-pointer px-3 py-[6px] text-sm min-w-10 text-center",
+    {
+        variants: {
+            select: {
+                true: "bg-gray-800 border-gray-800 text-gray-100 dark:bg-gray-100 dark:border-gray-100 dark:text-gray-900",
+                false: "border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white transition-all duration-200",
+            },
+        },
+        defaultVariants: {
+            select: false,
+        },
+    },
+);
+
+export default function CategoryChip() {
+    const { searchParams, searchParamsChange, deleteSearchParams } = useURLSearchParams()
+    const selectTag = searchParams.get("tag");
+
+    return (
+        <div className="flex w-full flex-wrap gap-2 select-none">
+            <div className={chipVariants({ select: selectTag === null })} onClick={() => deleteSearchParams("tag")}>All</div>
+            {BLOG_TAGS?.map((tag, i) => <div key={tag + i} className={chipVariants({ select: selectTag === tag })} onClick={() => searchParamsChange({ tag })}>{tag}</div>)}
+        </div>
+    )
+}

app/_components/blog/index.tsx

@@ -1,50 +1,19 @@
+import CategoryChip from "./CategoryChip";
+import BlogList from "./BlogList";
 import { getPosts } from "@/app/_lib/getPost";
-// import { getTags } from "@/app/_lib/getTags";
-import Link from "next/link";
+import { Suspense } from "react";
 
-export default async function BlogList() {
+export default async function BlogHome() {
   const posts = await getPosts();
-  // const allTags = await getTags();
-  // const tags = [...new Set(allTags)].filter((tag) => tag !== undefined);
 
   return (
     <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 dark:text-white text-gray-900 font-oceanic">Blog</h1>
-
-        {/* Todo: Category Tag */}
-        {/* <div className="flex w-full flex-wrap gap-2">
-          <div className="w-fit rounded-full cursor-pointer bg-gray-100 px-2 py-1 text-sm text-gray-900 min-w-10 text-center">All</div>
-          {tags?.map((tag, i) => <div key={tag + i} className="w-fit rounded-full cursor-pointer bg-gray-100 px-2 py-1 text-sm text-gray-900">{tag}</div>)}
-        </div> */}
-
-        <div className="flex flex-col items-center gap-3">
-          {posts.map(({ frontMatter, route }) => {
-            if (!frontMatter) return null;
-            const { title, date, tags, author } = frontMatter;
-            return (
-              <Link
-                href={`/blog${route}`}
-                key={route}
-                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-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-400 dark:text-gray-300">
-                    <p>{date}</p>
-                    <p>∙</p>
-                    <p>{author}</p>
-                  </div>
-                  <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>
-              </Link>
-            )
-          })}
-        </div>
+        <Suspense>
+          <CategoryChip />
+          <BlogList posts={posts} />
+        </Suspense>
       </div>
     </div >
   );

app/_components/common/Banner.tsx

@@ -8,7 +8,7 @@ export default function Banner() {
         <div className="w-full bg-[#E6FDFC] md:flex md:justify-between md:px-20">
             <div className="flex flex-col gap-10 px-4 pt-20 pb-9 text-[#002424] md:pt-60">
                 <p className="text-base md:h-18">Coming soon</p>
-                <h3 className="text-[50px] md:text-6xl font-oceanic">Wrtn Agent OS</h3>
+                <h3 className="text-[42px] md:text-6xl font-oceanic">Wrtn Agent OS</h3>
 
                 <Button variant="secondary" className="w-fit" onClick={openToast}>Take a tour
                     <ArrowRightIcon strokeWidth={1.5} size={20} />

app/_components/home/Client.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { useRef } from "react";
+import { useInView } from "framer-motion";
+import { Item } from "nextra/normalize-pages";
+
+import Header from "../layout/Header";
+import Welcome from "./Welcome";
+import HowItWorks from "./HowItWorks";
+import Service from "./Service";
+import OpenSource from "./OpenSource";
+import Roadmap from "./Roadmap";
+import Banner from "../common/Banner";
+import LatestArticles from "./LatestArticles";
+
+export default function HomeClient({ posts }: { posts: Item[] }) {
+    const darkSectionRef = useRef(null);
+    const isDark = useInView(darkSectionRef, { margin: "0px 0px -99% 0px" });
+
+    return (
+        <>
+            <Header isDark={isDark} />
+            <div className="flex flex-col items-center bg-white">
+                <Welcome />
+                <HowItWorks />
+                <Service />
+                <div ref={darkSectionRef}>
+                    <OpenSource />
+                    <Roadmap />
+                </div>
+                <LatestArticles posts={posts} />
+                <Banner />
+            </div>
+        </>
+    );
+}

app/_components/home/HowItWorks.tsx

@@ -10,7 +10,7 @@ export default function HowItWorks() {
   return (
     <section className="flex w-full max-w-[1440px] flex-col gap-5 px-4 py-24 text-[#002424] md:px-8 md:py-40">
       <p className="text-base">Coming soon</p>
-      <h2 className="font-oceanic text-[40px] leading-[46px] whitespace-pre-line md:text-[48px] md:leading-[56px] ">
+      <h2 className="font-oceanic text-[24px] leading-normal whitespace-pre-line md:text-[48px] md:leading-[56px] ">
         {"Unchain your potential\nwith Wrtn Agent OS"}
       </h2>
       <p className="text-base leading-6 md:whitespace-pre-line text-[#767676]">
@@ -21,7 +21,7 @@ export default function HowItWorks() {
       <Button variant="secondary" className="w-fit" onClick={openToast}>
         Agent OS <ArrowRightIcon strokeWidth={1.5} size={20} />
       </Button>
-      <div className="relative aspect-72/31 min-h-[300px] w-full cursor-pointer overflow-hidden rounded-3xl">
+      <div className="relative aspect-72/31 min-h-[320px] w-full cursor-pointer overflow-hidden rounded-3xl">
         <Image
           src={addBasePath("/images/main.png")}
           alt="thumbnail"

app/_components/home/LatestArticles.tsx

@@ -1,13 +1,11 @@
 import { daysAgo, formatDate } from "@/app/_lib/date";
-import { getPosts } from "@/app/_lib/getPost";
 import { ArrowRightIcon } from "lucide-react";
 import Image from "next/image";
 import Link from "next/link";
 import { addBasePath } from "@/app/_lib/add-base-path";
+import { Item } from "nextra/normalize-pages";
 
-
-export default async function LatestArticles() {
-  const posts = await getPosts();
+export default function LatestArticles({ posts }: { posts: Item[] }) {
   const viewPosts = posts.filter(({ name }) => ["the-journey-of-building-a-cs-refund-agent", "meet-our-new-member"].includes(name));
 
   return (

app/_components/home/OpenSource.tsx

@@ -7,9 +7,9 @@ import { addBasePath } from "@/app/_lib/add-base-path";
 
 export default function OpenSource() {
   return (
-    <div className="flex w-full flex-col bg-black items-center gap-20 pb-[100px] pt-[200px] px-4 md:pb-0 md:px-8">
+    <div className="flex w-full flex-col bg-[linear-gradient(0deg,_#000_90%,_rgba(0,0,0,0)_100%)] items-center gap-20 pb-[100px] pt-[200px] px-4 md:pb-0 md:px-8">
       <div className="flex flex-col md:items-center md:text-center gap-6">
-        <h2 className="font-oceanic text-[40px] leading-[46px] text-[#E6FDFC] md:whitespace-pre-line">
+        <h2 className="font-oceanic text-[24px] leading-normal md:text-[40px] md:leading-[46px] text-[#E6FDFC] md:whitespace-pre-line">
           {"Based on powerful\nOpen Source Ecosystem"}
         </h2>
         <p className="text-base text-[#BEBEBE] md:text-lg md:whitespace-pre-line">
@@ -29,9 +29,6 @@ export default function OpenSource() {
           autoPlay
           loop
           muted
-          controls
-          controlsList="nodownload"
-          disablePictureInPicture
           playsInline
           className="h-full w-full object-cover"
           preload="auto"

app/_components/home/Roadmap.tsx

@@ -5,11 +5,11 @@ import { ROADMAP } from "@/app/_constants/roadmap";
 
 export default function Roadmap() {
   return (
-    <section className="flex w-full items-center justify-center bg-[#071511] px-4 py-40 md:h-[960px] md:max-h-screen">
+    <section className="flex w-full items-center justify-center bg-linear-to-b from-[#000000] to-[#002424] px-4 md:px-8 py-40 md:h-[960px] md:max-h-screen">
       <div className="flex w-full max-w-[1440px] flex-col items-center justify-between gap-6 md:flex-row">
         <div className="flex flex-col gap-6">
           <p className="text-base text-[#E6FDFC]">Roadmap</p>
-          <h2 className="font-oceanic text-[40px] leading-[46px] whitespace-pre-line text-[#E6FDFC]">
+          <h2 className="font-oceanic text-[24px] leading-normal md:text-[40px] md:leading-[46px] whitespace-pre-line text-[#E6FDFC]">
             {"Built from the ground up\nfor every layer of AI Agents"}
           </h2>
           <p className="text-lg md:whitespace-pre-line text-[#A7B4B3]">
@@ -28,20 +28,20 @@ export default function Roadmap() {
           </Link>
         </div>
 
-        <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">
+        <div className="flex w-full md: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}`}
+              className={`flex w-full md:flex-row flex-col gap-2 rounded-2xl p-3.5 md:w-[646px] md:rounded-[20px] overflow-scroll ${className}`}
             >
-              <h3 className="flex items-center min-w-32 flex-1 justify-center text-center text-lg md:text-[22px] whitespace-pre-line">
+              <h3 className="flex items-center min-w-32 font-semibold flex-1 justify-center text-center text-lg md:text-[22px] md:whitespace-pre-line">
                 {title}
               </h3>
               <div className="flex flex-row gap-2">
                 {keywords.map((keyword) => (
                   <div
                     key={keyword}
-                    className="relative flex-1 rounded-md bg-linear-to-b from-[#18EDC9CC] to-[#18EDC933] p-px h-28 w-28 md:h-[132px] md:w-[132px] md:rounded-[10px]"
+                    className="relative flex-1 rounded-md bg-linear-to-b from-[#18EDC9CC] to-[#18EDC933] p-px min-h-28 min-w-28 md:h-[132px] md:w-[132px] md:rounded-[10px]"
                   >
                     <div
                       className={`font-md flex h-full w-full bg-linear-to-b items-center justify-center gap-2 text-sm rounded-md text-center md:text-lg md:rounded-[10px] ${itemClassName}`}