gladvn 0.2.17 → 0.2.19

package/src/dev/showcase/overview.tsx

@@ -1,9 +1,12 @@
+import { useEffect, useState } from "react";
+
 import {
   AccessibilityIcon,
   ArrowRightIcon,
   BlocksIcon,
   BoxIcon,
   CheckIcon,
+  CodeIcon,
   ComponentIcon,
   CopyIcon,
   DatabaseIcon,
@@ -13,15 +16,15 @@ import {
   ShieldCheckIcon,
   SlidersHorizontalIcon,
   SparklesIcon,
-  CodeIcon,
 } from "lucide-react";
-import { useEffect, useState } from "react";
 import { toast } from "sonner";
-import { GladvnLogo } from "../../dev/components/GladvnLogo";
 
 import { ProgressPreset as Progress } from "../../components/macro/progress-preset";
-import { Avatar, AvatarFallback, AvatarImage } from "../../components/micro/avatar";
-import { Badge } from "../../components/micro/badge";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "../../components/micro/avatar";
 import { Button } from "../../components/micro/button";
 import {
   Card,
@@ -34,8 +37,9 @@ import {
   Select,
   SelectContent,
   SelectItem,
+  SelectPortal,
   SelectTrigger,
-  SelectValue, SelectPortal
+  SelectValue,
 } from "../../components/micro/select";
 import { Switch } from "../../components/micro/switch";
 import { ColorSwatch } from "../../dev/components/showcase";
@@ -115,12 +119,10 @@ export default function OverviewSection() {
         </div>
 
         <div className="container relative z-10 flex flex-col items-center text-center px-4">
-          <div
-            className="inline-flex items-center gap-2 px-4 py-1.5 mb-8 text-sm font-medium rounded-full border border-primary/20 bg-background/50 backdrop-blur-md shadow-sm animate-fade-up"
-          >
+          <div className="inline-flex items-center gap-2 px-4 py-1.5 mb-8 text-sm font-medium rounded-full border border-primary/20 bg-background/50 backdrop-blur-md shadow-sm animate-fade-up">
             <CodeIcon className="w-3.5 h-3.5 text-primary" />
             <span className="text-muted-foreground">
-              Copy code · Own everything · Zero lock-in
+              Copy mã · Tuỳ biến tự do · Không lock-in
             </span>
           </div>
 
@@ -132,7 +134,7 @@ export default function OverviewSection() {
               Tinh tế. Đẳng cấp.
             </span>
             <span className="block mt-2 bg-gradient-to-r leading-[1.2] from-primary via-info to-primary bg-[length:200%_auto] bg-clip-text text-transparent animate-[spin_8s_linear_infinite] [animation-name:gradient] [animation-duration:8s] [animation-timing-function:linear] [animation-iteration-count:infinite]">
-              Sạch sẽ.
+              Của bạn.
             </span>
           </h1>
 
@@ -140,11 +142,14 @@ export default function OverviewSection() {
             className="max-w-2xl text-lg md:text-xl text-muted-foreground leading-relaxed mb-10 animate-fade-up"
             style={{ animationDelay: "200ms", animationFillMode: "both" }}
           >
-            Đa số component library bắt bạn phải phụ thuộc vào họ mãi mãi.
-            gladvn copy thẳng source code vào dự án của bạn —{" "}
+            Phần lớn component library giữ code trong node_modules — bạn dùng
+            được nhưng không sửa được. gladvn copy thẳng vào{" "}
+            <code className="text-sm bg-primary/20 text-primary px-1.5 py-0.5 rounded">
+              src/
+            </code>{" "}
+            của bạn.{" "}
             <strong className="text-foreground">
-              không node_modules ẩn, không breaking change bất ngờ, không
-              vendor lock-in.
+              Đọc được, sửa được, xóa được.
             </strong>
           </p>
         </div>
@@ -243,7 +248,7 @@ export default function OverviewSection() {
                         Kiến trúc Micro/Macro
                       </h4>
                       <p className="text-xs text-muted-foreground font-medium mt-1">
-                        Lắp ráp từ những mảnh ghép tối giản
+                        Primitive nhỏ, lắp thành preset lớn
                       </p>
                     </div>
                   </div>
@@ -253,9 +258,11 @@ export default function OverviewSection() {
                       <DatabaseIcon className="size-6" />
                     </div>
                     <div>
-                      <h4 className="font-bold text-sm">Data-Driven Design</h4>
+                      <h4 className="font-bold text-sm">
+                        Thiết kế theo Dữ liệu
+                      </h4>
                       <p className="text-xs text-muted-foreground font-medium mt-1">
-                        Dữ liệu quyết định cấu trúc UI
+                        Truyền items vào root, không map() thủ công
                       </p>
                     </div>
                   </div>
@@ -265,7 +272,7 @@ export default function OverviewSection() {
                       <ShieldCheckIcon className="size-6" />
                     </div>
                     <div>
-                      <h4 className="font-bold text-sm">Strict Styling</h4>
+                      <h4 className="font-bold text-sm">Styling có Kỷ luật</h4>
                       <p className="text-xs text-muted-foreground font-medium mt-1">
                         Nói không với Magic CSS
                       </p>
@@ -302,12 +309,11 @@ export default function OverviewSection() {
       <section className="container max-w-6xl mx-auto space-y-12 px-4">
         <div className="text-center max-w-2xl mx-auto space-y-4">
           <h2 className="text-3xl md:text-4xl font-extrabold tracking-tight">
-            Rõ ràng từ đầu. Dùng lâu không sợ vỡ.
+            Kiến trúc rõ ràng. Sửa không lo vỡ.
           </h2>
           <p className="text-muted-foreground text-lg">
-            Nhiều dự án bắt đầu gãy ở năm thứ hai — ai cũng muốn sửa nhưng
-            không ai dám sửa vì không biết cái gì sẽ hỏng theo. gladvn chia code
-            thành{" "}
+            Nhiều dự án bắt đầu gãy ở năm thứ hai — muốn sửa mà không dám, vì
+            không biết gì sẽ vỡ theo. gladvn chia code thành{" "}
             <strong className="text-foreground">các tầng rõ ràng</strong>
             {", "}nên bạn luôn biết mình đang sửa ở đâu và ảnh hưởng đến đâu.
           </p>
@@ -321,22 +327,22 @@ export default function OverviewSection() {
           <div className="flex flex-col md:flex-row items-start gap-6 md:gap-8">
             <div className="relative z-10 flex-1 space-y-6">
               <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-primary text-primary-foreground text-sm font-bold uppercase tracking-wider shadow-lg shadow-primary/20">
-                <SparklesIcon className="size-4" /> Điểm khác biệt lớn nhất
+                <SparklesIcon className="size-4" /> Cốt lõi
               </div>
               <h3 className="text-3xl md:text-5xl font-extrabold tracking-tight">
                 Code là của bạn, 100%
               </h3>
               <p className="text-muted-foreground text-lg leading-relaxed max-w-2xl">
-                Chạy một lệnh — toàn bộ components, hooks, styles, contexts
-                được copy thẳng vào thư mục{" "}
+                Chạy một lệnh — toàn bộ components, hooks, styles, contexts được
+                copy thẳng vào thư mục{" "}
                 <code className="text-sm bg-primary/20 text-primary px-1.5 py-0.5 rounded">
                   src/
                 </code>{" "}
                 của bạn.{" "}
                 <strong className="text-foreground">
-                  Không qua node_modules, không bị khóa vào bất kỳ ai
+                  Không qua node_modules. Không phụ thuộc vào ai.
                 </strong>{" "}
-                — bạn đọc được, sửa được, xoá được từng dòng.
+                Đọc được, sửa được, xoá được từng dòng.
               </p>
 
               <div className="flex items-center gap-4 pt-2">
@@ -409,7 +415,6 @@ export default function OverviewSection() {
               Tuỳ chỉnh theo từng tầng kiến trúc
             </p>
             <div className="grid sm:grid-cols-3 gap-4">
-
               {/* MACRO — RECOMMENDED */}
               <div className="p-5 rounded-2xl border-2 border-primary/40 bg-primary/5 space-y-3 relative">
                 <div className="absolute top-3 right-3 text-[10px] font-bold uppercase tracking-wider text-primary bg-primary/10 px-2 py-0.5 rounded-full">
@@ -419,7 +424,7 @@ export default function OverviewSection() {
                   src/components/macro/
                 </div>
                 <h4 className="font-bold text-foreground text-base">
-                  Sửa Macro — an toàn nhất
+                  Macro — Sửa an toàn
                 </h4>
                 <p className="text-sm text-muted-foreground leading-relaxed">
                   Bắt đầu ở đây. Mỗi Macro là một preset độc lập — thêm footer
@@ -441,7 +446,7 @@ export default function OverviewSection() {
                   src/components/micro/
                 </div>
                 <h4 className="font-bold text-foreground text-base">
-                  Sửa Micro — cẩn thận hơn
+                  Micro — Sửa cẩn thận
                 </h4>
                 <p className="text-sm text-muted-foreground leading-relaxed">
                   Micro là nền — mọi Macro đều xây trên nó. Sửa variant của
@@ -462,18 +467,17 @@ export default function OverviewSection() {
                   src/index.css
                 </div>
                 <h4 className="font-bold text-foreground text-base">
-                  Sửa CSS — ảnh hưởng toàn bộ
+                  CSS Token — Đổi một chỗ, cả app thay đổi
                 </h4>
                 <p className="text-sm text-muted-foreground leading-relaxed">
-                  CSS token quyết định màu, font, border-radius cho tất cả.
-                  Đổi một token ở đây thì{" "}
+                  CSS token quyết định màu, font, border-radius cho tất cả. Đổi
+                  một token ở đây thì{" "}
                   <strong className="text-foreground">
                     toàn bộ giao diện cập nhật ngay
                   </strong>
                   . Dùng khi muốn rebrand, không phải để vá lỗi lẻ tẻ.
                 </p>
               </div>
-
             </div>
           </div>
         </div>
@@ -489,19 +493,17 @@ export default function OverviewSection() {
                 Micro & Macro
               </h3>
               <p className="text-muted-foreground max-w-lg text-lg leading-relaxed">
-                Micro là component thuần — chỉ lo style, không ép layout.
-                Macro là preset — lắp ghép Micro thành giao diện hoàn chỉnh.
+                Micro là component thuần — chỉ lo style, không ép layout. Macro
+                là preset — lắp ghép Micro thành giao diện hoàn chỉnh.
                 <strong className="text-foreground block mt-2">
                   Micro không bao giờ tự quyết layout. Việc đó thuộc về Macro.
                 </strong>
               </p>
             </div>
             <div className="relative z-10 mt-auto pt-6 space-y-3">
-              <CodeBlock type="success" title="Uỷ quyền cho Macro (Preset):">
+              <CodeBlock type="success" title="Đúng — Để Macro lo layout:">
                 <span className="text-success/80">
-                  {
-                    "/* Macro thấy toàn bộ cấu trúc nên gắn class thẳng vào đích */"
-                  }
+                  {"/* Macro biết con mình là gì → gắn class chính xác */"}
                 </span>
                 <br />
                 <span className="text-foreground">{"<AlertDialogFooter>"}</span>
@@ -519,14 +521,9 @@ export default function OverviewSection() {
                 </span>
               </CodeBlock>
 
-              <CodeBlock
-                type="destructive"
-                title="Ép Layout ở Micro (Primitive):"
-              >
+              <CodeBlock type="destructive" title="Sai — Micro tự đoán layout:">
                 <span className="text-destructive/80">
-                  {
-                    "/* Micro mù mờ về thẻ con nên phải dùng Magic CSS đoán mò */"
-                  }
+                  {"/* Micro không biết con mình là gì → phải đoán bằng CSS */"}
                 </span>
                 <br />
                 <span className="text-foreground">{"<AlertDialogFooter"}</span>
@@ -556,22 +553,27 @@ export default function OverviewSection() {
                 Style Encapsulation
               </h3>
               <p className="text-muted-foreground text-base leading-relaxed">
-                Mỗi component là một hộp kín về style. Muốn tuỳ chỉnh từ ngoài
-                thì dùng{" "}
-                <code>data-slot</code> — đã có sẵn contract rõ ràng.{" "}
+                Style của mỗi component không rò rỉ ra ngoài. Muốn tuỳ chỉnh thì
+                dùng <code>data-slot</code> — contract rõ ràng, có sẵn.{" "}
                 <strong className="text-foreground">
-                  Refactor bên trong thoải mái mà không phá code bên ngoài.
+                  Refactor bên trong mà không ảnh hưởng bên ngoài.
                 </strong>
               </p>
             </div>
             <div className="relative z-10 mt-auto pt-6 space-y-3">
               <div className="p-3 rounded-xl border border-destructive/20 bg-destructive/5 text-xs font-mono shadow-sm flex items-center">
-                <span className="text-destructive font-bold mr-3 text-lg">❌</span>
-                <span className="opacity-80 line-through">{"[&>div>span]:color"}</span>
+                <span className="text-destructive font-bold mr-3 text-lg">
+                  ❌
+                </span>
+                <span className="opacity-80 line-through">
+                  {"[&>div>span]:color"}
+                </span>
               </div>
               <div className="p-3 rounded-xl border border-success/20 bg-success/5 text-xs font-mono shadow-sm flex items-center">
                 <span className="text-success font-bold mr-3 text-lg">✅</span>
-                <span className="text-foreground font-medium">data-[slot=icon]:color</span>
+                <span className="text-foreground font-medium">
+                  data-[slot=icon]:color
+                </span>
               </div>
             </div>
           </div>
@@ -586,9 +588,9 @@ export default function OverviewSection() {
                 Variant × Color
               </h3>
               <p className="text-muted-foreground text-lg leading-relaxed max-w-lg">
-                Variant (solid, outline, ghost...) và Color (primary, destructive...)
-                là hai trục hoàn toàn độc lập. Kết hợp tự do mà không bị bùng nổ
-                class.
+                Variant (solid, outline, ghost...) và Color (primary,
+                destructive...) là hai trục độc lập. Kết hợp tự do mà class
+                không phình ra.
               </p>
             </div>
             <div className="relative z-10 mt-auto pt-8 grid sm:grid-cols-2 gap-4">
@@ -598,8 +600,8 @@ export default function OverviewSection() {
                   Variant
                 </strong>
                 <span className="text-sm text-muted-foreground leading-relaxed">
-                  solid, outline, ghost, soft. Quyết định viền, nền, độ trong
-                  suốt.
+                  solid, outline, ghost, soft. Quyết định cách component trông
+                  như thế nào.
                 </span>
               </div>
               <div className="p-3 sm:p-5 rounded-2xl border border-border bg-background/60 backdrop-blur-md shadow-sm hover:shadow-md transition-shadow">
@@ -608,7 +610,8 @@ export default function OverviewSection() {
                   Trục Color
                 </strong>
                 <span className="text-sm text-muted-foreground leading-relaxed">
-                  primary, secondary, destructive. Quyết định dải màu sắc (hue).
+                  primary, secondary, destructive. Quyết định bảng màu của
+                  component.
                 </span>
               </div>
             </div>
@@ -624,8 +627,8 @@ export default function OverviewSection() {
                 Zero-prop Defaults
               </h3>
               <p className="text-muted-foreground text-lg leading-relaxed max-w-lg">
-                Quẳng component vào mà không truyền prop nào — nó vẫn chạy đẹp,
-                vẫn đúng behavior.{" "}
+                Đặt component vào mà không truyền prop nào — vẫn chạy đẹp, vẫn
+                đúng behavior.{" "}
                 <strong className="text-foreground">
                   Không phải tra docs mỗi lần dùng.
                 </strong>
@@ -659,8 +662,8 @@ export default function OverviewSection() {
                 Headless + Style
               </h3>
               <p className="text-muted-foreground text-base leading-relaxed">
-                Keyboard, focus, ARIA — Base UI lo hết. Micro component chỉ
-                thêm lớp style lên trên, không tự viết logic tương tác.{" "}
+                Keyboard, focus, ARIA — Base UI lo hết. Micro component chỉ thêm
+                lớp style lên trên, không tự viết logic tương tác.{" "}
                 <strong className="text-foreground">
                   Behavior đúng sẵn, không cần test lại.
                 </strong>
@@ -668,13 +671,15 @@ export default function OverviewSection() {
             </div>
             <div className="relative z-10 mt-auto pt-8">
               <div className="p-4 rounded-xl bg-foreground/5 border border-border/50 text-[11px] sm:text-xs font-mono shadow-inner space-y-1">
-                <div className="text-muted-foreground">// Micro = Headless + Style</div>
+                <div className="text-muted-foreground">
+                  // Micro = Headless + Style
+                </div>
                 <div>
-                  <span className="text-primary">{'<Base UI Select>'}</span>
+                  <span className="text-primary">{"<Base UI Select>"}</span>
                   <span className="text-muted-foreground"> ← behavior</span>
                 </div>
                 <div className="pl-4">
-                  <span className="text-success">{'<SelectTrigger>'}</span>
+                  <span className="text-success">{"<SelectTrigger>"}</span>
                   <span className="text-muted-foreground"> ← style only</span>
                 </div>
               </div>
@@ -690,8 +695,8 @@ export default function OverviewSection() {
                 CSS Token
               </h3>
               <p className="text-muted-foreground text-lg leading-relaxed max-w-lg">
-                Không component nào hardcode màu hay spacing. Tất cả đều
-                tham chiếu từ hệ thống token chung.{" "}
+                Không component nào hardcode màu hay spacing. Tất cả đều tham
+                chiếu từ hệ thống token chung.{" "}
                 <strong className="text-foreground">
                   Đổi một token — cả app cập nhật.
                 </strong>
@@ -699,13 +704,17 @@ export default function OverviewSection() {
             </div>
             <div className="relative z-10 mt-auto pt-8 grid sm:grid-cols-2 gap-4">
               <div className="p-4 rounded-xl border border-success/20 bg-success/5 shadow-sm">
-                <div className="text-success font-semibold mb-2 text-sm">✅ Token</div>
+                <div className="text-success font-semibold mb-2 text-sm">
+                  ✅ Token
+                </div>
                 <div className="text-[11px] font-mono text-success/80">
                   oklch(var(--primary))
                 </div>
               </div>
               <div className="p-4 rounded-xl border border-destructive/20 bg-destructive/5 shadow-sm opacity-60">
-                <div className="text-destructive font-semibold mb-2 text-sm">❌ Hardcode</div>
+                <div className="text-destructive font-semibold mb-2 text-sm">
+                  ❌ Hardcode
+                </div>
                 <div className="text-[11px] font-mono text-destructive/80 line-through">
                   #2563eb
                 </div>
@@ -723,9 +732,9 @@ export default function OverviewSection() {
                 Polymorphism
               </h3>
               <p className="text-muted-foreground text-base leading-relaxed">
-                Dùng <code>render</code> prop để đổi thẻ HTML root —
-                ví dụ biến Button thành Link. Không cần prop <code>as</code>
-                {" "}hay tạo wrapper lồng nhau.
+                Dùng <code>render</code> prop để đổi thẻ HTML root — ví dụ biến
+                Button thành Link. Không cần prop <code>as</code> hay tạo
+                wrapper lồng nhau.
               </p>
             </div>
             <div className="relative z-10 mt-auto pt-6 space-y-3">
@@ -756,9 +765,8 @@ export default function OverviewSection() {
                 Stateless Primitive
               </h3>
               <p className="text-muted-foreground text-base leading-relaxed">
-                Micro component không chứa{" "}
-                <code>useState</code> hay <code>useEffect</code>. State nằm ở
-                Headless UI hoặc Macro.{" "}
+                Micro component không chứa <code>useState</code> hay{" "}
+                <code>useEffect</code>. State nằm ở Headless UI hoặc Macro.{" "}
                 <strong className="text-foreground">
                   Component càng đơn giản, càng ít bug.
                 </strong>
@@ -767,10 +775,14 @@ export default function OverviewSection() {
             <div className="relative z-10 mt-auto pt-6 space-y-3">
               <div className="p-3 rounded-xl border border-success/20 bg-success/5 text-[11px] font-mono shadow-sm flex items-center">
                 <span className="text-success font-bold mr-3 text-lg">✅</span>
-                <span className="text-success/90">{"function Button({ ...props })"}</span>
+                <span className="text-success/90">
+                  {"function Button({ ...props })"}
+                </span>
               </div>
               <div className="p-3 rounded-xl border border-destructive/20 bg-destructive/5 text-[11px] font-mono shadow-sm flex items-center opacity-70">
-                <span className="text-destructive font-bold mr-3 text-lg">❌</span>
+                <span className="text-destructive font-bold mr-3 text-lg">
+                  ❌
+                </span>
                 <span className="text-destructive/80 line-through">
                   {"const [open, setOpen] = useState()"}
                 </span>
@@ -788,8 +800,8 @@ export default function OverviewSection() {
                 Accessibility
               </h3>
               <p className="text-muted-foreground text-base leading-relaxed">
-                Semantic HTML, <code>aria-describedby</code> cho form,
-                icon trang trí tự ẩn khỏi screen reader.{" "}
+                Semantic HTML, <code>aria-describedby</code> cho form, icon
+                trang trí tự ẩn khỏi screen reader.{" "}
                 <strong className="text-foreground">
                   Chuẩn WCAG — không cần nghĩ thêm.
                 </strong>
@@ -823,12 +835,11 @@ export default function OverviewSection() {
                 Explicit State Contract
               </h3>
               <p className="text-muted-foreground text-base leading-relaxed">
-                Component expose trạng thái ra ngoài qua{" "}
-                <code>data-attributes</code>, không phải qua imperative ref
-                methods. Consumer CSS và animation target chính xác từng
-                trạng thái mà không cần JavaScript.{" "}
+                Component công khai trạng thái qua <code>data-attributes</code>,
+                không phải qua imperative ref. Bạn style và animate trực tiếp
+                trên từng trạng thái, không cần JavaScript.{" "}
                 <strong className="text-foreground">
-                  State là public API — phải tường minh và ổn định.
+                  State là public API — tường minh và ổn định.
                 </strong>
               </p>
             </div>
@@ -843,7 +854,9 @@ export default function OverviewSection() {
                   <span className="text-muted-foreground">:opacity-50</span>
                 </div>
                 <div className="pt-1 border-t border-border/30">
-                  <span className="text-destructive/60 line-through">ref.current.isOpen</span>
+                  <span className="text-destructive/60 line-through">
+                    ref.current.isOpen
+                  </span>
                 </div>
               </div>
             </div>
@@ -859,9 +872,9 @@ export default function OverviewSection() {
                 3-Layer Source Ownership
               </h3>
               <p className="text-muted-foreground text-base leading-relaxed">
-                Source được phân tầng: <code>micro/</code> (primitive không
-                có layout cứng nhắc), <code>macro/</code> (preset lắp ráp có
-                chủ đích), <code>index.css</code> (token toàn hệ thống).{" "}
+                Source được phân tầng: <code>micro/</code> (primitive không có
+                layout cứng nhắc), <code>macro/</code> (preset lắp ráp có chủ
+                đích), <code>index.css</code> (token toàn hệ thống).{" "}
                 <strong className="text-foreground">
                   Sửa ở tầng nào chỉ ảnh hưởng đến tầng đó.
                 </strong>
@@ -870,15 +883,21 @@ export default function OverviewSection() {
             <div className="relative z-10 mt-auto pt-6 space-y-2">
               <div className="p-3 rounded-xl border border-border bg-background/60 text-[11px] font-mono flex items-center gap-3">
                 <span className="text-destructive font-bold">CSS</span>
-                <span className="text-muted-foreground">index.css — token toàn cục</span>
+                <span className="text-muted-foreground">
+                  index.css — token toàn cục
+                </span>
               </div>
               <div className="p-3 rounded-xl border border-border bg-background/60 text-[11px] font-mono flex items-center gap-3">
                 <span className="text-warning font-bold">Macro</span>
-                <span className="text-muted-foreground">macro/ — preset lắp ráp</span>
+                <span className="text-muted-foreground">
+                  macro/ — preset lắp ráp
+                </span>
               </div>
               <div className="p-3 rounded-xl border border-border bg-background/60 text-[11px] font-mono flex items-center gap-3">
                 <span className="text-success font-bold">Micro</span>
-                <span className="text-muted-foreground">micro/ — primitive thuần</span>
+                <span className="text-muted-foreground">
+                  micro/ — primitive thuần
+                </span>
               </div>
             </div>
           </div>
@@ -936,66 +955,41 @@ export default function OverviewSection() {
               Scoped Theme Tunnel
             </h3>
             <p className="text-muted-foreground text-xl leading-relaxed">
-              Tưởng tượng: app đang chạy Light Mode nhưng bạn cần một vùng nền
-              tối nổi bật — hero section, dark sidebar, CTA banner. Bọc vùng đó
-              trong{" "}
-              <code className="text-sm bg-warning/20 text-warning px-1.5 py-0.5 rounded">
-                {"<ThemeProvider defaultMode=\"dark\">"}
-              </code>{" "}
-              là đủ để mọi component con hiểu ngữ cảnh đang là Dark và tự điều
-              chỉnh màu sắc.
+              Dark section bên trong Light app? Dễ. Nhưng khi Tooltip hay Dialog
+              render qua Portal — chúng thoát khỏi DOM tree và{" "}
+              <strong className="text-foreground">mất theme</strong>. Hầu hết
+              thư viện bỏ cuộc ở đây.
             </p>
             <p className="text-muted-foreground text-xl leading-relaxed">
-              <strong className="text-foreground">
-                Nhưng có một bẫy ẩn:
-              </strong>{" "}
-              khi người dùng mở Tooltip hoặc Dialog từ bên trong vùng tối đó,
-              component này render ra{" "}
-              <code className="text-sm bg-warning/20 text-warning px-1.5 py-0.5 rounded">
-                document.body
-              </code>{" "}
-              qua React Portal — thoát hoàn toàn khỏi DOM tree. CSS variable
-              dark mode mất theo. Tooltip hiện ra{" "}
-              <strong className="text-foreground">trắng lạc quẻ</strong> giữa
-              nền đen. Đây là điểm mà hầu hết thư viện bỏ cuộc.
-            </p>
-            <p className="text-muted-foreground text-xl leading-relaxed">
-              gladvn giải quyết bằng{" "}
+              gladvn dùng{" "}
               <code className="text-sm bg-warning/20 text-warning px-1.5 py-0.5 rounded">
                 {"<ThemeWrapper>"}
               </code>{" "}
-              — một lớp được đặt{" "}
-              <strong className="text-foreground">ngay bên trong Portal</strong>{" "}
-              để đọc theme context từ trước khi vượt qua ranh giới Portal và
-              tái-inject nó vào phía bên kia.{" "}
+              để tunnel theme xuyên qua Portal boundary.{" "}
               <strong className="text-foreground">
-                Theme không bị chặn lại ở ranh giới — nó được đào hầm xuyên
-                qua.
-              </strong>{" "}
-              Kết quả: Dialog, Tooltip, Select... luôn hiển thị đúng màu dark
-              dù chúng render ở đâu trong DOM.
+                Dialog, Tooltip, Select... luôn đúng màu, dù render ở đâu trong
+                DOM.
+              </strong>
             </p>
           </div>
 
           <div className="relative z-10 grid sm:grid-cols-2 gap-6 max-w-3xl">
             <div className="p-6 rounded-2xl border border-success/30 bg-success/10 shadow-sm flex flex-col gap-2">
               <div className="text-success font-semibold text-lg flex items-center gap-2">
-                ✅ gladvn — ThemeWrapper
+                ✅ gladvn
               </div>
               <p className="text-success/80 text-sm leading-relaxed">
-                Theme được tunnel xuyên qua Portal boundary. Dialog, Tooltip,
-                Select... luôn hiển thị đúng dark mode dù render tại{" "}
+                Tooltip, Dialog trong dark section luôn đúng màu — kể cả khi
+                Portal render ra{" "}
                 <code className="opacity-80">document.body</code>.
               </p>
             </div>
             <div className="p-6 rounded-2xl border border-destructive/30 bg-destructive/10 shadow-sm opacity-80 flex flex-col gap-2">
               <div className="text-destructive font-semibold text-lg flex items-center gap-2">
-                ❌ Các thư viện thông thường
+                ❌ Thư viện khác
               </div>
               <p className="text-destructive/80 text-sm leading-relaxed">
-                Theme bị mất khi vượt qua Portal. Tooltip, Dialog bên trong
-                dark section vẫn hiển thị màu Light Mode — lỗi thầm lặng, khó
-                debug.
+                Tooltip, Dialog "trắng lạc quẻ" — theme bị mất khi vượt Portal.
               </p>
             </div>
           </div>
@@ -1007,7 +1001,7 @@ export default function OverviewSection() {
               color="warning"
               className="gap-2 font-bold px-6 py-5 rounded-xl border-warning/30 bg-warning/10 hover:bg-warning/20 shadow-sm"
             >
-              Xem Demo Thực tế
+              Xem demo thực tế
               <ArrowRightIcon className="size-4" />
             </Button>
           </div>
@@ -1026,9 +1020,9 @@ export default function OverviewSection() {
               Không gian màu OKLCH
             </h3>
             <p className="text-muted-foreground text-xl leading-relaxed">
-              Mọi token màu sắc được tính toán toán học trên không gian OKLCH.
-              Đảm bảo độ chuyển sắc hoàn hảo, tỉ lệ tương phản WCAG AAA/AA trên
-              mọi theme mà không cần định nghĩa thủ công từng dải màu.
+              Mọi token màu sắc được tính trên không gian OKLCH — chuyển sắc
+              mượt, tương phản đạt WCAG AA/AAA trên mọi theme mà không cần định
+              nghĩa thủ công từng dải màu.
             </p>
           </div>
 
@@ -1065,7 +1059,7 @@ export default function OverviewSection() {
                 role: "Creator & Maintainer",
                 avatar: "https://github.com/duongacy.png",
                 url: "https://github.com/duongacy",
-              }
+              },
             ].map((user) => (
               <a
                 key={user.name}
@@ -1076,18 +1070,34 @@ export default function OverviewSection() {
               >
                 <Avatar className="size-16 border-2 border-transparent group-hover:border-primary/20 transition-all duration-300 group-hover:scale-105">
                   <AvatarImage src={user.avatar} alt={user.name} />
-                  <AvatarFallback className="text-lg bg-primary/5 text-primary">{user.name.substring(0, 2).toUpperCase()}</AvatarFallback>
+                  <AvatarFallback className="text-lg bg-primary/5 text-primary">
+                    {user.name.substring(0, 2).toUpperCase()}
+                  </AvatarFallback>
                 </Avatar>
                 <div className="text-center">
-                  <div className="font-semibold text-sm group-hover:text-primary transition-colors">{user.name}</div>
-                  <div className="text-xs text-muted-foreground mt-0.5">{user.role}</div>
+                  <div className="font-semibold text-sm group-hover:text-primary transition-colors">
+                    {user.name}
+                  </div>
+                  <div className="text-xs text-muted-foreground mt-0.5">
+                    {user.role}
+                  </div>
                 </div>
               </a>
             ))}
           </div>
 
-          <Button variant="outline" className="mt-4 rounded-full" render={<a href="https://github.com/duongacy/gladcn" target="_blank" rel="noreferrer" />}>
-            Trở thành Contributor
+          <Button
+            variant="outline"
+            className="mt-4 rounded-full"
+            render={
+              <a
+                href="https://github.com/duongacy/gladcn"
+                target="_blank"
+                rel="noreferrer"
+              />
+            }
+          >
+            Đóng góp cùng chúng tôi
           </Button>
         </div>
       </section>
@@ -1098,14 +1108,14 @@ export default function OverviewSection() {
           <div className="absolute inset-0 bg-[radial-gradient(ellipse_60%_60%_at_50%_0%,rgba(var(--primary-rgb),0.15),transparent)] pointer-events-none" />
           <div className="relative z-10 space-y-6 max-w-2xl mx-auto">
             <h2 className="text-3xl md:text-5xl font-extrabold tracking-tight">
-              Thử ngay?
+              30 giây. Xong.
             </h2>
             <p className="text-muted-foreground text-lg leading-relaxed">
-              30 giây — toàn bộ code nằm trong{" "}
+              Toàn bộ code nằm trong{" "}
               <code className="text-sm bg-primary/20 text-primary px-1.5 py-0.5 rounded">
                 src/
               </code>{" "}
-              của bạn. Không config, không đọc docs.
+              của bạn. Không config rườm rà. Chạy là dùng.
             </p>
             <div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-2">
               <button
@@ -1123,11 +1133,17 @@ export default function OverviewSection() {
                 </div>
               </button>
               <Button
-                render={<a href="?component=overview" />}
+                render={
+                  <a
+                    href="https://github.com/duongacy/gladcn"
+                    target="_blank"
+                    rel="noreferrer"
+                  />
+                }
                 variant="ghost"
                 className="text-muted-foreground hover:text-foreground"
               >
-                Xem tài liệu đầy đủ
+                Xem trên GitHub
                 <ArrowRightIcon className="size-4 ml-1" />
               </Button>
             </div>