feat: add landing page for Cloudflare Pages by jcanizalez · Pull Request #14 · jcanizalez/vorn

jcanizalez · 2026-03-14T00:00:20Z

Summary

Add self-contained landing page (website/index.html) for Cloudflare Pages deployment
Dark theme with teal/cyan gradient accents matching the VibeGrid logo
All 7 app screenshots, 5 agent SVG icons, tabbed install commands, scroll animations
Responsive design (mobile/tablet/desktop), no build step required

Sections

Hero, value proposition cards, 6 feature showcases with screenshots, supported agents, secondary features grid, tabbed terminal install commands, footer

Cloudflare Pages Config

Publish directory: website
Build command: (none)

Test plan

Open website/index.html locally and verify all sections render
Test responsive layout at mobile/tablet/desktop widths
Verify all images load, scroll animations trigger, nav links smooth-scroll
Test install command tab switching and copy-to-clipboard
Test mobile hamburger menu
Deploy to Cloudflare Pages and verify live site

Self-contained website/index.html with dark theme, scroll animations, agent icons, feature showcase, and tabbed install commands.

… layout - Shift gradients from purple/blue to teal/cyan matching logo colors - Use transparent logo, remove duplicate wordmark text - Fix terminal install commands wrapping (nowrap + wider container) - Add app icon as favicon - Update version to v0.7.0 - Remove "Made by" footer line

Copilot

Pull request overview

Adds a self-contained static marketing/landing page under website/ intended for Cloudflare Pages deployment (no build step), presenting VibeGrid’s product pitch, screenshots, supported agents, and install commands.

Changes:

Introduces website/index.html with inline CSS for layout/theme and responsive behavior.
Adds interactive behaviors via inline JS (scroll reveal, sticky/scrolled navbar, mobile menu toggle, install-command tabs + copy-to-clipboard).
References screenshot/image assets under website/assets/ for the hero and feature sections.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

jcanizalez · 2026-03-14T00:09:45Z

+<body>
+  <div class="dot-grid" aria-hidden="true"></div>
+
+  <!-- ===== NAVBAR ===== -->
+  <nav class="nav" id="nav">
+    <div class="nav-inner">
+      <a href="#" class="nav-logo">


Fixed — changed to href="/" in 059d1a6.

jcanizalez · 2026-03-14T00:11:01Z

+            <p>Run Claude, Copilot, Codex, OpenCode, and Gemini simultaneously. Resize, reorder, minimize. Real-time status detection for every agent.</p>
+          </div>
+          <div class="feature-media">
+            <img src="assets/hero.png" alt="Multi-agent grid layout" loading="lazy" decoding="async">


Good catch — the PR description counts the floating-widget.png which is in the assets directory but used as secondary feature context, not as a feature screenshot. The 6 feature screenshots + 1 widget asset = 7 total images copied. Updating PR description for clarity.

jcanizalez · 2026-03-14T00:09:46Z

+      opacity: 0;
+      transition: transform 0.3s var(--ease-out-expo), opacity 0.3s ease;
+    }
+    .mobile-menu.open {
+      transform: translateY(0);
+      opacity: 1;


Fixed — added pointer-events: none when closed and pointer-events: auto when open in 059d1a6.

jcanizalez · 2026-03-14T00:09:48Z

+        </a>
+        <a href="#install" class="nav-cta">Download</a>
+      </div>
+      <button class="hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false">


Fixed — added aria-controls="mobile-menu" in 059d1a6.

jcanizalez · 2026-03-14T00:09:49Z

+    html {
+      scroll-behavior: smooth;
+      scroll-padding-top: 80px;
+    }


Fixed — added @media (prefers-reduced-motion: reduce) block that disables all animations and smooth scroll in 059d1a6.

jcanizalez · 2026-03-14T00:09:50Z

+  <div class="mobile-menu" id="mobile-menu">
+    <a href="#features">Features</a>
+    <a href="#agents">Agents</a>
+    <a href="#install">Install</a>
+    <a href="https://github.com/jcanizalez/vibegrid" target="_blank" rel="noopener">GitHub</a>


Fixed — mobile menu now toggles aria-hidden on open/close in 059d1a6.

jcanizalez · 2026-03-14T00:09:51Z

+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add('visible');
+          observer.unobserve(entry.target);
+        }
+      });
+    }, { threshold: 0.08, rootMargin: '0px 0px -40px 0px' });
+
+    document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
+


Fixed — wrapped in if ('IntersectionObserver' in window) with fallback that shows all elements immediately in 059d1a6.

jcanizalez · 2026-03-14T00:09:52Z

+      navigator.clipboard.writeText(activeCode.textContent.trim()).then(() => {
+        this.textContent = 'Copied!';
+        this.classList.add('copied');
+        setTimeout(() => {
+          this.textContent = 'Copy';
+          this.classList.remove('copied');
+        }, 2000);
+      });


Fixed — added error callback that shows "Failed" feedback in 059d1a6.

jcanizalez · 2026-03-14T00:11:02Z

+                <code>curl -fsSL https://raw.githubusercontent.com/jcanizalez/vibegrid/main/install.sh | sh</code>
+              </div>
+              <div class="terminal-line" data-panel="win">
+                <span class="terminal-prompt">&gt;</span>
+                <code>irm https://raw.githubusercontent.com/jcanizalez/vibegrid/main/install.ps1 | iex</code>


These install commands match the official instructions in the project README and are the standard distribution method. The GitHub Releases link is already provided as an alternative below the terminal block.

- Logo link: href="#" → href="/" - Mobile menu: add pointer-events:none when closed, toggle aria-hidden - Hamburger: add aria-controls="mobile-menu" - Add prefers-reduced-motion media query to disable animations - IntersectionObserver: add feature detection fallback - Clipboard: add error handling with .catch() path

- feat: extract standalone server for multi-client architecture (#18) - feat: add workspaces to group projects (#17) - feat: redesign kanban board cards and columns (#16) - feat: add landing page with OS-detected download buttons (#14, #19) - fix: mini-card close cleanup and confirm popover placement (#15)

…age (#20) - feat: extract standalone server for multi-client architecture (#18) - feat: add workspaces to group projects (#17) - feat: redesign kanban board cards and columns (#16) - feat: add landing page with OS-detected download buttons (#14, #19) - fix: mini-card close cleanup and confirm popover placement (#15)

* v0.7.1: server extraction, workspaces, kanban redesign, and landing page - feat: extract standalone server for multi-client architecture (#18) - feat: add workspaces to group projects (#17) - feat: redesign kanban board cards and columns (#16) - feat: add landing page with OS-detected download buttons (#14, #19) - fix: mini-card close cleanup and confirm popover placement (#15) * v0.7.2: fix workspace switching and server startup - Sync server database.ts with workspaces schema (was missing from #17) - Broadcast config:changed events to WS clients on config save - Add ws to root dependencies (fixes bufferutil resolve error) - Fix server entry path resolution in dev mode - Use npx tsx instead of Electron binary to spawn server in dev

* v0.7.1: server extraction, workspaces, kanban redesign, and landing page - feat: extract standalone server for multi-client architecture (#18) - feat: add workspaces to group projects (#17) - feat: redesign kanban board cards and columns (#16) - feat: add landing page with OS-detected download buttons (#14, #19) - fix: mini-card close cleanup and confirm popover placement (#15) * v0.7.2: fix workspace switching and server startup - Sync server database.ts with workspaces schema (was missing from #17) - Broadcast config:changed events to WS clients on config save - Add ws to root dependencies (fixes bufferutil resolve error) - Fix server entry path resolution in dev mode - Use npx tsx instead of Electron binary to spawn server in dev * feat: extract MCP server into standalone @vibegrid/mcp package - Create @vibegrid/mcp package with stdio MCP server (npx @vibegrid/mcp) - Move all 6 tool categories (21 tools) from src/main/mcp-tools/ to packages/mcp/ - Tools import from @vibegrid/server instead of Electron main process - Remove --mcp mode, mcp-socket-server, mcp-proxy from Electron - Update MCP settings UI to show npx @vibegrid/mcp commands - Fix Zod 4 + MCP SDK compatibility for workflow tool schemas * chore: remove duplicate manager files from src/main Delete 18 old manager files that are now in packages/server/src/. Update 4 test files to import from packages/server/src/ instead. Remaining in src/main/: index.ts (thin shell), ipc-handlers.ts (bridge delegation), menu.ts, update-manager.ts, logger.ts, ipc-safe-handle.ts, server/ (bridge + launcher). * fix: address Copilot review comments - Replace dialog.showMessageBox with log.warn in server database.ts (server package has no Electron dependency) - Remove private:true from @vibegrid/mcp so it can be published to npm - Redirect console.info and console.debug to stderr in MCP entry point (prevents stdout corruption of JSON-RPC stream)

* v0.7.1: server extraction, workspaces, kanban redesign, and landing page - feat: extract standalone server for multi-client architecture (#18) - feat: add workspaces to group projects (#17) - feat: redesign kanban board cards and columns (#16) - feat: add landing page with OS-detected download buttons (#14, #19) - fix: mini-card close cleanup and confirm popover placement (#15) * feat: redesign task board UI with polished kanban, list, and inline task creation - Kanban cards: task short IDs, status icons, date footer, top-right menu on hover - List view: collapsible colored section bars with chevron toggle and animations - Pill-style segmented view toggle for List/Board and Grid/Tabs - Inline floating form for task creation replacing centered modal - Add task buttons in kanban columns and list sections * fix: address PR review comments - Fix nested button in list view section headers (use div + proper button) - Plumb status through to AddTaskDialog so column/section + buttons create tasks with the correct initial status - Fix useEffect deps for dialog init (include editingTask) - Use stable task ID suffix for short IDs instead of order field

jcanizalez added 2 commits March 13, 2026 17:27

feat: add landing page for Cloudflare Pages

9ba1bfb

Self-contained website/index.html with dark theme, scroll animations, agent icons, feature showcase, and tabbed install commands.

Copilot AI review requested due to automatic review settings March 14, 2026 00:00

Copilot started reviewing on behalf of jcanizalez March 14, 2026 00:00 View session

Copilot AI reviewed Mar 14, 2026

View reviewed changes

jcanizalez added 2 commits March 13, 2026 18:05

style: format index.html with prettier

42e776b

jcanizalez merged commit 811bc8a into main Mar 14, 2026
1 check passed

jcanizalez mentioned this pull request Mar 14, 2026

v0.7.1: server extraction, workspaces, kanban redesign, and landing page #20

Merged

jcanizalez deleted the main-worktree-7c80e3b9 branch March 14, 2026 15:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add landing page for Cloudflare Pages#14

feat: add landing page for Cloudflare Pages#14
jcanizalez merged 4 commits intomainfrom
main-worktree-7c80e3b9

jcanizalez commented Mar 14, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

jcanizalez Mar 14, 2026

Uh oh!

jcanizalez Mar 14, 2026

Uh oh!

jcanizalez Mar 14, 2026

Uh oh!

jcanizalez Mar 14, 2026

Uh oh!

jcanizalez Mar 14, 2026

Uh oh!

jcanizalez Mar 14, 2026

Uh oh!

jcanizalez Mar 14, 2026

Uh oh!

jcanizalez Mar 14, 2026

Uh oh!

jcanizalez Mar 14, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

jcanizalez commented Mar 14, 2026

Summary

Sections

Cloudflare Pages Config

Test plan

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants