feat: fix cross-platform logo loading and update build configuration

- Fix logo not displaying on Windows/Linux by using ES module import
- Update build config for separate x64/arm64 installers
- Add cross-platform asset handling notes to workflows
- Update landing page with glassmorphism buttons
- Simplify README badges
- Add release/ to gitignore (packages uploaded via GitHub Releases)

Author: hooosberg

.agent/workflows/build_linux.md

@@ -2,16 +2,47 @@
 description: Build Linux Packages (x64 + ARM64)
 ---
 
-This workflow builds Linux packages (AppImage and deb) for both x64 and ARM64 architectures.
+# Build Linux AppImages
 
-# Prerequisites
+Build separate Linux AppImage packages for x64 and ARM64 architectures.
 
-Ensure the icon is present:
-- `build/icon.png`
+## Prerequisites
+- Node.js installed
+- Dependencies installed (`npm install`)
+- Icon file at `build/icon.png` (copy from `public/icon/DMG_Icon_1024x1024.png` if missing)
 
-# Build Command
+## Output
+All artifacts output to `release/` directory:
+- `GlotShot-{version}-x86_64.AppImage` - Linux x64 AppImage
+- `GlotShot-{version}-arm64.AppImage` - Linux ARM64 AppImage
 
-Run the following command to build Linux packages.
+## Build Command
 
 // turbo
-npm run build && npx electron-builder --linux --x64 --arm64 && mkdir -p release && mv dist/*.AppImage dist/*.deb dist/*.snap release/ 2>/dev/null || true
+```bash
+npm run electron:build -- --linux
+```
+
+## Notes
+- **DO NOT** build `.deb` packages on macOS (requires `fpm` and `dpkg`)
+- Each architecture gets its own separate AppImage
+- Files are named with architecture suffix automatically via `artifactName` in `package.json`
+- `x86_64` is the standard Linux naming for x64 architecture
+
+## Cross-Platform Asset Handling
+
+> **IMPORTANT**: When loading images/assets in React components, always use ES module imports instead of absolute paths.
+
+❌ **WRONG** (only works on macOS):
+```jsx
+<img src="/icon/logo.png" />
+```
+
+✅ **CORRECT** (works on all platforms):
+```jsx
+import logo from '../../public/icon/logo.png';
+// ...
+<img src={logo} />
+```
+
+Vite bundles imported assets into `dist/assets/`, ensuring cross-platform compatibility.

.agent/workflows/build_windows.md

@@ -2,18 +2,47 @@
 description: Build Windows Installers (x64 + ARM64)
 ---
 
-This workflow builds Windows installers for both x64 and ARM64 architectures.
+# Build Windows Installers
 
-# Prerequisites
+Build separate Windows NSIS installers for x64 and ARM64 architectures.
 
-Ensure the icon is present:
-- `build/icon.png` (will be auto-converted to .ico by electron-builder)
+## Prerequisites
+- Node.js installed
+- Dependencies installed (`npm install`)
+- Icon file at `build/icon.png` (copy from `public/icon/DMG_Icon_1024x1024.png` if missing)
 
-**Note:** Building Windows installers from macOS may require Wine. For production builds, consider using GitHub Actions or a Windows environment.
+## Output
+All artifacts output to `release/` directory:
+- `GlotShot-{version}-x64.exe` - Windows x64 installer
+- `GlotShot-{version}-arm64.exe` - Windows ARM64 installer
 
-# Build Command
-
-Run the following command to build Windows installers.
+## Build Command
 
 // turbo
-npm run build && npx electron-builder --win --x64 --arm64 && mkdir -p release && mv dist/*.exe dist/*.blockmap release/ 2>/dev/null || true
+```bash
+npm run electron:build -- --win
+```
+
+## Notes
+- **DO NOT** use combined architecture builds (multiple archs in one target)
+- **DO NOT** build portable versions
+- Each architecture gets its own separate installer
+- Files are named with architecture suffix automatically via `artifactName` in `package.json`
+
+## Cross-Platform Asset Handling
+
+> **IMPORTANT**: When loading images/assets in React components, always use ES module imports instead of absolute paths.
+
+❌ **WRONG** (only works on macOS):
+```jsx
+<img src="/icon/logo.png" />
+```
+
+✅ **CORRECT** (works on all platforms):
+```jsx
+import logo from '../../public/icon/logo.png';
+// ...
+<img src={logo} />
+```
+
+Vite bundles imported assets into `dist/assets/`, ensuring cross-platform compatibility.

.gitignore

@@ -11,7 +11,7 @@ node_modules
 dist
 dist-ssr
 build
-release/
+release
 *.local
 
 # Editor directories and files

package.json

@@ -59,42 +59,40 @@
       "target": [
         {
           "target": "nsis",
-          "arch": [
-            "x64",
-            "arm64"
-          ]
+          "arch": "x64"
         },
         {
-          "target": "portable",
-          "arch": [
-            "x64",
-            "arm64"
-          ]
+          "target": "nsis",
+          "arch": "arm64"
         }
       ],
-      "icon": "build/icon.png"
+      "icon": "build/icon.png",
+      "artifactName": "${productName}-${version}-${arch}.${ext}"
     },
     "linux": {
       "target": [
         {
           "target": "AppImage",
-          "arch": [
-            "x64",
-            "arm64"
-          ]
+          "arch": "x64"
+        },
+        {
+          "target": "AppImage",
+          "arch": "arm64"
         }
       ],
       "icon": "build/icon.png",
       "category": "Graphics",
-      "maintainer": "Maohuhu <huyuanbo412004038@gmail.com>"
+      "maintainer": "Maohuhu <huyuanbo412004038@gmail.com>",
+      "artifactName": "${productName}-${version}-${arch}.${ext}"
     },
     "files": [
       "dist/**/*",
       "electron/**/*",
       "public/**/*"
     ],
     "directories": {
-      "buildResources": "assets"
+      "buildResources": "assets",
+      "output": "release"
     }
   },
   "devDependencies": {

src/components/SettingsModal.jsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { X, LayoutGrid, Monitor, Palette, Keyboard, Settings, Info, Image as ImageIcon, Layers, Github, ExternalLink, Star } from 'lucide-react';
 import './SettingsModal.css';
 import { useTranslation, SUPPORTED_UI_LANGUAGES } from '../locales/i18n';
+import appLogo from '../../public/icon/DMG_Icon_1024x1024.png';
 
 const SettingsModal = ({ isOpen, onClose, initialTab = 'start', appMode, setAppMode, globalSettings, setGlobalSettings, theme, setTheme, glassEffect, setGlassEffect }) => {
     const [activeTab, setActiveTab] = useState(initialTab);
@@ -223,7 +224,7 @@ const SettingsModal = ({ isOpen, onClose, initialTab = 'start', appMode, setAppM
                             <div className="about-hero">
                                 <div className="about-logo-large">
                                     <img
-                                        src="/icon/DMG_Icon_1024x1024.png"
+                                        src={appLogo}
                                         alt="GlotShot"
                                         className="w-full h-full object-cover rounded-[22%]"
                                         style={{ boxShadow: '0 0 20px rgba(0,0,0,0.2)' }}