gladvn 0.2.36 → 0.2.37

package/src/dev/showcase/overview-components/FooterCTA.tsx

@@ -0,0 +1,137 @@
+import React, { useState } from "react";
+import { ArrowRightIcon, CheckIcon, CopyIcon } from "lucide-react";
+import { Button } from "../../../components/micro/button";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage
+} from "../../../components/micro/avatar";
+import { cn } from "../../../lib/utils";
+import { Container } from "../../components/Container";
+
+export function FooterCTA({ className }: { className?: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText("npx gladvn init");
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className={className}>
+      {/* 🤝 CONTRIBUTORS */}
+      <Container as="section" className="mb-24">
+        <div className="flex flex-col items-center text-center space-y-8">
+          <div className="space-y-4 max-w-2xl">
+            <h2 className="text-3xl font-extrabold tracking-tight">
+              Contributors
+            </h2>
+          </div>
+
+          <div className="flex flex-wrap justify-center gap-6">
+            {[
+              {
+                name: "Ý Le",
+                role: "Creator & Maintainer",
+                avatar: "https://github.com/duongacy.png",
+                url: "https://github.com/duongacy"
+              },
+            ].map((user) => (
+              <a
+                key={user.name}
+                href={user.url}
+                target="_blank"
+                rel="noreferrer"
+                className="group flex flex-col items-center gap-3 p-4 rounded-2xl hover:bg-muted/50 transition-colors"
+              >
+                <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>
+                </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>
+              </a>
+            ))}
+          </div>
+
+          <Button
+            variant="outline"
+            className="mt-4 rounded-full"
+            render={
+              <a
+                href="https://github.com/duongacy/gladvn"
+                target="_blank"
+                rel="noreferrer"
+              />
+            }
+            nativeButton={false}
+          >
+            Đóng góp cùng chúng tôi
+          </Button>
+        </div>
+      </Container>
+
+      {/* 🚀 FINAL CTA */}
+      <Container as="section">
+        <div className="rounded-[2.5rem] border-2 border-primary/40 bg-gradient-to-br from-primary/10 via-background to-info/5 p-10 md:p-16 shadow-2xl shadow-primary/5 text-center relative overflow-hidden">
+          <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">
+              30 giây là có đồ chơi.
+            </h2>
+            <p className="text-muted-foreground text-lg leading-relaxed">
+              Quẳng hết code vào{" "}
+              <code className="text-sm bg-primary/20 text-primary px-1.5 py-0.5 rounded">
+                src/
+              </code>{" "}
+              rồi xài thôi. Không config rườm rà nhức đầu làm gì.
+            </p>
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-2">
+              <button
+                onClick={handleCopy}
+                className="bg-primary text-primary-foreground hover:bg-primary/90 px-8 py-4 rounded-2xl font-mono text-sm shadow-lg shadow-primary/20 flex items-center gap-4 cursor-pointer transition-all hover:scale-105 active:scale-95"
+              >
+                <span className="font-bold opacity-70">~</span>
+                <span>npx gladvn init</span>
+                <div className="ml-2">
+                  {copied ? (
+                    <CheckIcon className="size-4" />
+                  ) : (
+                    <CopyIcon className="size-4" />
+                  )}
+                </div>
+              </button>
+              <Button
+                render={
+                  <a
+                    href="https://github.com/duongacy/gladvn"
+                    target="_blank"
+                    rel="noreferrer"
+                  />
+                }
+                nativeButton={false}
+                variant="ghost"
+                className="text-muted-foreground hover:text-foreground"
+              >
+                Xem trên GitHub
+                <ArrowRightIcon className="size-4 ml-1" />
+              </Button>
+            </div>
+            <p className="text-xs text-muted-foreground pt-2">
+              Tương thích với npm, yarn, pnpm và bun. Hỗ trợ React 18+.
+            </p>
+          </div>
+        </div>
+      </Container>
+    </div>
+  );
+}

package/src/dev/showcase/overview-components/HeroSection.tsx

@@ -0,0 +1,65 @@
+import { CodeIcon } from "lucide-react";
+import { cn } from "../../../lib/utils";
+import { Container } from "../../components/Container";
+
+export function HeroSection({ className }: { className?: string }) {
+  return (
+    <section className={cn("relative pt-20 pb-32", className)}>
+      <div className="absolute inset-0 -z-10 h-full w-full bg-background bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(var(--primary-rgb),0.2),rgba(255,255,255,0))] dark:bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(var(--primary-rgb),0.15),rgba(255,255,255,0))]" />
+
+      <div className="absolute top-0 inset-x-0 flex justify-center -z-10 pointer-events-none opacity-50 dark:opacity-40 blur-[100px]">
+        <div
+          className="w-[30rem] h-[20rem] bg-primary/40 rounded-full mix-blend-multiply animate-pulse"
+          style={{ animationDuration: "8s" }}
+        />
+        <div
+          className="w-[20rem] h-[15rem] bg-info/30 rounded-full mix-blend-multiply animate-pulse absolute top-10"
+          style={{ animationDuration: "10s" }}
+        />
+      </div>
+
+      <Container className="relative z-10 flex flex-col items-center text-center">
+        <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 mã · Tuỳ biến tự do · Không lock-in
+          </span>
+        </div>
+
+        <h1
+          className="max-w-4xl text-5xl md:text-7xl font-extrabold tracking-tighter mb-8 animate-fade-up"
+          style={{ animationDelay: "100ms", animationFillMode: "both" }}
+        >
+          <span className="block text-foreground drop-shadow-sm">
+            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]">
+            Không giới hạn.
+          </span>
+        </h1>
+
+        <p
+          className="max-w-2xl text-lg md:text-xl text-muted-foreground leading-relaxed mb-10 animate-fade-up"
+          style={{ animationDelay: "200ms", animationFillMode: "both" }}
+        >
+          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">
+            Đọc được, sửa được, xóa được.
+          </strong>
+        </p>
+
+        <div
+          className="max-w-2xl text-lg md:text-xl font-medium text-foreground/90 italic mt-2 p-5 border-l-4 border-primary bg-primary/5 rounded-r-xl shadow-sm animate-fade-up"
+          style={{ animationDelay: "300ms", animationFillMode: "both" }}
+        >
+          "Thư viện này sinh ra để giúp bạn code nhanh hơn, sống nhàn hơn, đừng tự làm khó mình."
+        </div>
+      </Container>
+    </section>
+  );
+}

package/src/dev/showcase/overview-components/PrinciplesSection.tsx

@@ -0,0 +1,128 @@
+import React, { useState } from "react";
+import { SparklesIcon, CheckIcon, CopyIcon } from "lucide-react";
+import { STATS } from "../../data";
+import { cn } from "../../../lib/utils";
+import { Container } from "../../components/Container";
+
+export function PrinciplesSection({ className }: { className?: string }) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText("npx gladvn init");
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className={className}>
+      <Container as="section" className="border-y border-y-border bg-muted/5 py-12 relative overflow-hidden">
+        <div className="absolute inset-0 bg-gradient-to-r from-transparent via-primary/5 to-transparent animate-[pulse_4s_ease-in-out_infinite]" />
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-4 divide-x-0 md:divide-x relative z-10">
+          {STATS.map((s) => (
+            <div
+              key={s.label}
+              className="flex flex-col items-center justify-center text-center space-y-2 group"
+            >
+              <div className="text-4xl md:text-5xl font-black tracking-tighter text-foreground group-hover:text-primary group-hover:scale-110 transition-all duration-300">
+                {s.value}
+              </div>
+              <div className="text-xs md:text-sm font-bold uppercase tracking-[0.2em] text-muted-foreground">
+                {s.label}
+              </div>
+            </div>
+          ))}
+        </div>
+      </Container>
+
+      <Container as="section" className="space-y-12 mt-24">
+        <div className="text-center max-w-2xl mx-auto space-y-4">
+          <h2 className="text-3xl md:text-4xl font-extrabold tracking-tight">
+            Kiến trúc rành mạch. Sửa code không "đổ mồ hôi".
+          </h2>
+          <p className="text-muted-foreground text-lg">
+            Nhiều dự án thường bắt đầu "bốc mùi" sau một thời gian — đụng vào đâu cũng sợ gãy, muốn sửa mà rén. gladvn chia code thành{" "}
+            <strong className="text-foreground">các tầng rạch ròi</strong>
+            {", "}giúp bạn luôn biết chính xác mình đang sửa cái gì, ảnh hưởng tới đâu. Tâm an, code mới nhàn!
+          </p>
+        </div>
+
+        <div
+          id="ownership-section"
+          className="mb-12 rounded-[2.5rem] border-2 border-primary/50 bg-primary/5 p-4 sm:p-6 md:p-12 flex flex-col gap-10 group overflow-hidden relative hover:bg-primary/10 transition-colors duration-500 shadow-2xl shadow-primary/10"
+        >
+          <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" /> 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{" "}
+                <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 phụ thuộc vào ai.
+                </strong>{" "}
+                Đọc được, sửa được, xoá được từng dòng.
+              </p>
+
+              <div className="flex items-center gap-4 pt-2">
+                <button
+                  onClick={handleCopy}
+                  className="bg-background/80 hover:bg-background border-border backdrop-blur-md px-6 py-4 rounded-2xl border hover:border-primary/50 transition-colors font-mono text-sm shadow-inner flex items-center gap-4 cursor-pointer group/copy"
+                >
+                  <span className="text-primary font-bold">~</span>
+                  <span>npx gladvn init</span>
+                  <div className="ml-4 text-muted-foreground group-hover/copy:text-primary transition-colors">
+                    {copied ? (
+                      <CheckIcon className="size-4 text-success" />
+                    ) : (
+                      <CopyIcon className="size-4" />
+                    )}
+                  </div>
+                </button>
+              </div>
+            </div>
+
+            <div className="relative z-10 w-full md:w-1/3 flex flex-col gap-4">
+              <div className="p-3 sm:p-5 rounded-2xl border border-success/30 bg-success/10 shadow-sm flex items-start gap-4 transform group-hover:-translate-x-2 transition-transform">
+                <div className="bg-success text-success-foreground p-2 rounded-full mt-1">
+                  <CheckIcon className="size-4" />
+                </div>
+                <div>
+                  <h4 className="font-bold text-success text-lg">
+                    Toàn bộ Component & Hook
+                  </h4>
+                  <p className="text-xs text-success/80 mt-1">
+                    Nằm gọn trong{" "}
+                    <code className="opacity-80">
+                      src/components/micro/ & macro/
+                    </code>
+                  </p>
+                </div>
+              </div>
+              <div className="p-3 sm:p-5 rounded-2xl border border-success/30 bg-success/10 shadow-sm flex items-start gap-4 transform group-hover:translate-x-2 transition-transform">
+                <div className="bg-success text-success-foreground p-2 rounded-full mt-1">
+                  <CheckIcon className="size-4" />
+                </div>
+                <div>
+                  <h4 className="font-bold text-success text-lg">
+                    CSS Token & Theme Config
+                  </h4>
+                  <p className="text-xs text-success/80 mt-1">
+                    OKLCH color tokens, dark/light mode — đẹp ngay từ đầu
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Container>
+    </div>
+  );
+}