Add GitHub Pages landing page

thachvd-tfo · thachvd-tfo · commit 96982695d683 · 2026-04-01T09:30:00.000+07:00
diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
@@ -0,0 +1,56 @@
+name: Pages
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build GitHub Pages site
+        env:
+          GITHUB_PAGES: "true"
+        run: npm run build:pages
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: dist
+
+  deploy:
+    runs-on: ubuntu-latest
+    needs: build
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/index.html b/index.html
@@ -2,8 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="./tauri.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="DevStack is a Windows desktop environment for managing Apache, PHP, MySQL, Redis, Node and local project workflows."
+    />
     <title>DevStack</title>
   </head>
 
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "build:pages": "vite build",
     "preview": "vite preview",
     "tauri": "tauri",
     "version:bump": "powershell -ExecutionPolicy Bypass -File .\\scripts\\bump-version.ps1",
diff --git a/src/index.css b/src/index.css
@@ -12,9 +12,18 @@
     font-family: 'Syne', sans-serif;
     margin: 0;
     padding: 0;
+    min-height: 100vh;
+    background-image: radial-gradient(circle at 50% 0%, rgba(0, 229, 160, 0.03) 0%, transparent 50%);
+  }
+
+  body[data-shell='tauri'] {
     overflow: hidden;
     height: 100vh;
-    background-image: radial-gradient(circle at 50% 0%, rgba(0, 229, 160, 0.03) 0%, transparent 50%);
+  }
+
+  body[data-shell='web'] {
+    overflow-x: hidden;
+    overflow-y: auto;
   }
 
   ::-webkit-scrollbar {
@@ -296,4 +305,4 @@
   .shadow-glow {
     box-shadow: 0 0 24px rgba(0, 229, 160, 0.15), inset 0 0 10px rgba(0, 229, 160, 0.05);
   }
-}
+}
diff --git a/src/main.jsx b/src/main.jsx
@@ -1,10 +1,28 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./App";
+import LandingPage from "./pages/LandingPage";
 import "./index.css";
 
-ReactDOM.createRoot(document.getElementById("root")).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-);
+const isTauriRuntime = typeof window !== "undefined" && "__TAURI_INTERNALS__" in window;
+
+document.body.dataset.shell = isTauriRuntime ? "tauri" : "web";
+
+if (!isTauriRuntime) {
+  document.title = "DevStack | Windows local development environment";
+}
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+
+async function bootstrap() {
+  const RootComponent = isTauriRuntime
+    ? (await import("./App")).default
+    : LandingPage;
+
+  root.render(
+    <React.StrictMode>
+      <RootComponent />
+    </React.StrictMode>,
+  );
+}
+
+bootstrap();
diff --git a/src/pages/LandingPage.jsx b/src/pages/LandingPage.jsx
@@ -0,0 +1,193 @@
+import React from "react";
+import appIcon from "../../src-tauri/icons/icon.png";
+
+const features = [
+  {
+    title: "All-in-one control panel",
+    description: "Quản lý Apache, PHP, MySQL, Redis, Node và project services trong một giao diện desktop thống nhất.",
+  },
+  {
+    title: "Native Windows performance",
+    description: "Tauri v2 + Rust backend giúp app nhẹ, khởi động nhanh và xử lý service ổn định hơn Electron-style shells.",
+  },
+  {
+    title: "Built for local workflows",
+    description: "Tạo site local, đổi runtime version, đọc log, cấu hình port và xử lý quick config mà không phải nhớ quá nhiều lệnh.",
+  },
+];
+
+const sections = [
+  "Apache và PHP version switching cho nhiều dự án local",
+  "MySQL management, query nhanh và theo dõi trạng thái dịch vụ",
+  "Sites, virtual hosts, tunnel integrations và log viewer",
+  "Cấu hình tập trung cho ports, startup, editor và update",
+];
+
+function LandingPage() {
+  return (
+    <div className="min-h-screen bg-[radial-gradient(circle_at_top,_rgba(0,229,160,0.16),_transparent_35%),linear-gradient(180deg,#08110f_0%,#0b0f14_45%,#05070a_100%)] text-slate-100">
+      <div className="mx-auto flex min-h-screen w-full max-w-7xl flex-col px-6 py-8 sm:px-10 lg:px-12">
+        <header className="flex flex-col gap-5 border-b border-white/10 pb-6 sm:flex-row sm:items-center sm:justify-between">
+          <div className="flex items-center gap-4">
+            <div className="flex h-14 w-14 items-center justify-center rounded-2xl border border-emerald-400/30 bg-white/5 shadow-[0_0_30px_rgba(0,229,160,0.18)]">
+              <img src={appIcon} alt="DevStack icon" className="h-10 w-10" />
+            </div>
+            <div>
+              <div className="font-mono text-xs uppercase tracking-[0.32em] text-emerald-300/80">DevStack</div>
+              <div className="text-sm text-slate-300">Windows local development environment</div>
+            </div>
+          </div>
+          <div className="flex flex-wrap gap-3">
+            <a
+              href="https://github.com/holdon1996/dev-stack/releases/latest"
+              className="rounded-full border border-emerald-300/30 bg-emerald-300 px-5 py-2 text-sm font-semibold text-slate-950 transition hover:-translate-y-0.5 hover:bg-emerald-200"
+            >
+              Download latest release
+            </a>
+            <a
+              href="https://github.com/holdon1996/dev-stack"
+              className="rounded-full border border-white/15 px-5 py-2 text-sm font-semibold text-slate-100 transition hover:-translate-y-0.5 hover:border-white/30 hover:bg-white/5"
+            >
+              View on GitHub
+            </a>
+          </div>
+        </header>
+
+        <main className="flex-1 py-10 sm:py-14">
+          <section className="grid gap-10 lg:grid-cols-[1.2fr_0.8fr] lg:items-center">
+            <div>
+              <div className="mb-4 inline-flex rounded-full border border-emerald-300/20 bg-emerald-300/10 px-3 py-1 font-mono text-xs uppercase tracking-[0.28em] text-emerald-200">
+                Desktop tool for PHP stacks
+              </div>
+              <h1 className="max-w-4xl font-display text-5xl font-bold leading-[0.95] text-white sm:text-6xl lg:text-7xl">
+                DevStack giúp môi trường local trên Windows gọn hơn, nhanh hơn và dễ kiểm soát hơn.
+              </h1>
+              <p className="mt-6 max-w-2xl text-lg leading-8 text-slate-300">
+                Một app desktop tập trung để quản lý Apache, PHP, MySQL, Redis, tunnels và cấu hình dự án local mà không cần ghép nhiều công cụ rời rạc.
+              </p>
+              <div className="mt-8 flex flex-wrap gap-4">
+                <a
+                  href="https://github.com/holdon1996/dev-stack/releases/latest"
+                  className="rounded-2xl border border-emerald-300/25 bg-emerald-300 px-6 py-3 font-semibold text-slate-950 shadow-[0_18px_50px_rgba(0,229,160,0.2)] transition hover:-translate-y-0.5 hover:bg-emerald-200"
+                >
+                  Tải bản phát hành mới nhất
+                </a>
+                <a
+                  href="https://github.com/holdon1996/dev-stack#quick-start"
+                  className="rounded-2xl border border-white/15 bg-white/5 px-6 py-3 font-semibold text-white transition hover:-translate-y-0.5 hover:border-white/30 hover:bg-white/10"
+                >
+                  Xem hướng dẫn cài đặt
+                </a>
+              </div>
+            </div>
+
+            <div className="relative">
+              <div className="absolute inset-0 rounded-[32px] bg-emerald-300/10 blur-3xl" />
+              <div className="relative overflow-hidden rounded-[32px] border border-white/10 bg-slate-950/70 p-6 shadow-[0_20px_80px_rgba(0,0,0,0.45)] backdrop-blur">
+                <div className="mb-5 flex items-center gap-2">
+                  <span className="h-3 w-3 rounded-full bg-rose-400" />
+                  <span className="h-3 w-3 rounded-full bg-amber-300" />
+                  <span className="h-3 w-3 rounded-full bg-emerald-400" />
+                </div>
+                <div className="space-y-4">
+                  <div className="rounded-2xl border border-white/8 bg-white/5 p-4">
+                    <div className="font-mono text-xs uppercase tracking-[0.24em] text-slate-400">Managed services</div>
+                    <div className="mt-3 flex flex-wrap gap-2">
+                      {["Apache", "PHP", "MySQL", "Redis", "Node"].map((service) => (
+                        <span
+                          key={service}
+                          className="rounded-full border border-emerald-300/20 bg-emerald-300/10 px-3 py-1 text-sm text-emerald-100"
+                        >
+                          {service}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                  <div className="grid gap-3 sm:grid-cols-2">
+                    <div className="rounded-2xl border border-white/8 bg-white/5 p-4">
+                      <div className="text-sm text-slate-400">Focus</div>
+                      <div className="mt-2 text-xl font-semibold text-white">Local PHP workflow</div>
+                    </div>
+                    <div className="rounded-2xl border border-white/8 bg-white/5 p-4">
+                      <div className="text-sm text-slate-400">Runtime</div>
+                      <div className="mt-2 text-xl font-semibold text-white">Tauri v2 + React</div>
+                    </div>
+                  </div>
+                  <div className="rounded-2xl border border-white/8 bg-[linear-gradient(135deg,rgba(0,229,160,0.15),rgba(255,255,255,0.04))] p-4">
+                    <div className="font-mono text-xs uppercase tracking-[0.24em] text-emerald-100/80">Why it matters</div>
+                    <p className="mt-3 text-sm leading-7 text-slate-200">
+                      Khi local stack nằm trong một nơi duy nhất, việc đổi version, đọc log và sửa cấu hình bớt rời rạc hơn rất nhiều.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </section>
+
+          <section className="mt-16 grid gap-5 md:grid-cols-3">
+            {features.map((feature) => (
+              <article
+                key={feature.title}
+                className="rounded-[28px] border border-white/10 bg-white/5 p-6 backdrop-blur-sm transition hover:-translate-y-1 hover:border-emerald-300/30 hover:bg-white/[0.07]"
+              >
+                <h2 className="text-2xl font-semibold text-white">{feature.title}</h2>
+                <p className="mt-4 text-sm leading-7 text-slate-300">{feature.description}</p>
+              </article>
+            ))}
+          </section>
+
+          <section className="mt-16 grid gap-6 lg:grid-cols-[0.95fr_1.05fr]">
+            <div className="rounded-[32px] border border-white/10 bg-[#0a1110]/80 p-7">
+              <div className="font-mono text-xs uppercase tracking-[0.3em] text-emerald-200/80">What you can do</div>
+              <ul className="mt-6 space-y-4">
+                {sections.map((item) => (
+                  <li key={item} className="flex items-start gap-3 text-slate-200">
+                    <span className="mt-2 h-2.5 w-2.5 rounded-full bg-emerald-300 shadow-[0_0_18px_rgba(0,229,160,0.8)]" />
+                    <span className="leading-7">{item}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            <div className="rounded-[32px] border border-white/10 bg-white/5 p-7">
+              <div className="font-mono text-xs uppercase tracking-[0.3em] text-slate-400">Project stack</div>
+              <div className="mt-6 grid gap-4 sm:grid-cols-2">
+                {[
+                  ["Frontend", "React 19 + Tailwind CSS"],
+                  ["Desktop shell", "Tauri v2"],
+                  ["Backend", "Rust commands + system integration"],
+                  ["Distribution", "GitHub Releases + updater support"],
+                ].map(([label, value]) => (
+                  <div key={label} className="rounded-2xl border border-white/8 bg-slate-950/40 p-4">
+                    <div className="text-sm text-slate-400">{label}</div>
+                    <div className="mt-2 text-lg font-semibold text-white">{value}</div>
+                  </div>
+                ))}
+              </div>
+              <div className="mt-6 rounded-2xl border border-amber-300/15 bg-amber-300/10 p-4 text-sm leading-7 text-amber-50">
+                Hiện tại DevStack hướng đến Windows và tối ưu cho quy trình local development truyền thống của PHP stack.
+              </div>
+            </div>
+          </section>
+        </main>
+
+        <footer className="flex flex-col gap-4 border-t border-white/10 pt-6 text-sm text-slate-400 sm:flex-row sm:items-center sm:justify-between">
+          <div>DevStack is open source and distributed through GitHub Releases.</div>
+          <div className="flex flex-wrap gap-4">
+            <a href="https://github.com/holdon1996/dev-stack/issues" className="transition hover:text-white">
+              Issues
+            </a>
+            <a href="https://github.com/holdon1996/dev-stack/releases" className="transition hover:text-white">
+              Releases
+            </a>
+            <a href="https://github.com/holdon1996/dev-stack" className="transition hover:text-white">
+              Repository
+            </a>
+          </div>
+        </footer>
+      </div>
+    </div>
+  );
+}
+
+export default LandingPage;
diff --git a/vite.config.js b/vite.config.js
@@ -3,10 +3,12 @@ import react from "@vitejs/plugin-react";
 
 // @ts-expect-error process is a nodejs global
 const host = process.env.TAURI_DEV_HOST;
+const isPagesBuild = process.env.GITHUB_PAGES === "true";
 
 // https://vite.dev/config/
 export default defineConfig(async () => ({
   plugins: [react()],
+  base: isPagesBuild ? "/dev-stack/" : "./",
 
   // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
   //
