Add config panel, about page variants, GitHub icon improvements, and HOMEPAGE_vNEXT roadmap to homepage slot framework

[Copilot]

This PR syncs the working branch with the latest origin/main and extends the homepage slot framework with a slide-out config panel, about page configurability, improved GitHub button UX, and a comprehensive roadmap for core framework integration.

• Branch sync

  • Merged latest origin/main into copilot/add-extensible-homepage-framework.
  • Preserved upstream workflow/build/deploy updates introduced on main.

• Config Panel (sleek pull-out tab)

  • Added a primary-colored chevron pull-out tab at the right-center edge that opens a non-blocking slide-out panel with theme presets and all slot variant selectors.
  • Fully non-blocking UX: no backdrop overlay, page stays scrollable and interactive while the panel is open. Escape key closes the panel.
  • Section headings include lucide icons for scannability: Navigation (navbar), Sparkles (hero), Grid3X3 (features), Megaphone (CTA), Rows3 (footer), FileText (about), Palette (theme preset).
  • Theme preset switcher uses a compact 2-column card layout with centered color dot swatches and active state highlighting.
  • Variant selector pills use rounded-full design with solid primary background for the active state.
  • Visibility controlled by NEXT_PUBLIC_SHOW_CONFIG_PANEL env var — defaults to visible in dev mode, set "true" to enable on production for demos.

• About page configurability

  • Added about as a 6th slot in the framework with three variants: AboutDefault (full content), AboutMinimal (concise overview), AboutDetailed (card-based with tech-stack badges).
  • app/about/page.tsx now uses <SlotRenderer slot="about" /> for variant switching via the config panel.
  • Shared DEFAULT_GITHUB_URL constant extracted to types.ts for DRY consistency across variants.
  • Fixed <code> and <pre> block styling in AboutDefault with proper text-foreground, font-mono, and border-border for visibility across all theme presets.

• Hero Minimal variant improvements

  • Increased padding (py-14 → py-20 md:py-24), font sizes (text-2xl/sm:text-3xl → text-3xl/sm:4xl/md:5xl), container width (max-w-3xl → max-w-4xl), and button sizes (sm/ghost → lg/default+outline) to match proportions of HeroCentered and HeroSplit.

• GitHub button improvements

  • All navbar variants (NavbarDefault, NavbarCentered, base Navbar) now show a Github icon from lucide-react and an ExternalLink icon indicating "opens in new tab".
  • Both desktop and mobile hamburger menus updated with icon treatment.
  • Removed "Config" from default nav links (config is now accessed via the pull-out panel).

• HOMEPAGE_vNEXT.MD roadmap

  • Comprehensive roadmap covering core framework integration (9 areas): DB-backed content via OttaORM, brand persistence, auth + inline editing, R2 media uploads, blog integration, analytics + A/B testing, email/newsletter, comments/testimonials, real-time updates.
  • Feature enhancements (8 areas): 10 new slot types (pricing, FAQ, team, testimonials, stats, etc.), enhanced config panel UX (drag reorder, presets, import/export), animations, SEO, i18n, multi-page builder, DX tooling, multi-tenancy.
  • Organized in 4 priority tiers from Foundation to Polish.

• Resulting behavior

  • Homepage remains configurable via slot variants (hero, features, cta, navbar, footer, about) — now switchable from any page using the pull-out config panel.
  • Build/deploy configuration stays aligned with current main expectations.

// Config panel renders alongside the layout shell
<SlotRenderer slot="navbar" data={NAVBAR_DATA} />
<main>{children}</main>
<SlotRenderer slot="footer" data={FOOTER_DATA} />
<ConfigPanel />

• Tests: 76 tests passing across 4 test files (including tests for about variants, GitHub icon presence, and SlotRenderer about slot).
• Security: CodeQL scan clean, no alerts.

---

⚡ Quickly spin up Copilot coding agent tasks from anywhere on your macOS or Windows machine with Raycast.

[thinkdj]

@copilot make theme + config into a FAB bottom right in dev env (OR toggleable via some env var so that i can demo it on prod also iff wanted). on click , right panel that has all the config, so that I can switch it from anywhere and see the changes. keep panel non blocking ux.

• add configurability to about page too.
• top right github button - show open in new tab iconography and also add gh icon from lucide

[Copilot]

@copilot make theme + config into a FAB bottom right in dev env (OR toggleable via some env var so that i can demo it on prod also iff wanted). on click , right panel that has all the...

Implemented all three requests in commits 98ba4ea and 50fd023:

1. FAB Config Panel (bottom-right)

• Settings FAB at bottom-right with slide-out right panel containing theme presets + all slot variant selectors
• Non-blocking: click backdrop or X to close, page remains scrollable
• Controlled by NEXT_PUBLIC_SHOW_CONFIG_PANEL env var — defaults to visible in dev, set "true" for prod demos

2. About page configurability

• Added about as a new slot (6 slots total) with 3 variants: Default (full content), Minimal (concise), Detailed (cards + tech-stack badges)
• About page now uses SlotRenderer so variants can be switched from the FAB panel or config page

3. GitHub button improvements

• All navbar variants now show Github icon from lucide-react + ExternalLink icon for "open in new tab" indication
• Both desktop and mobile menus updated
• Removed "Config" from nav links (now accessible via FAB instead)

45 tests passing (new tests for about variants, GitHub icon presence, SlotRenderer about slot).

[thinkdj]

@copilot

1. Ui is blocking -- we want non blocking panel
2. fix the theme boocks inside panel it's messed up
3. fix the "code" colors for "pnpm deploy" text

4. move the fab to right center , keep it like a sleek pullout arrow from right 5.

[Copilot]

@copilot

1. Ui is blocking -- we want non blockin...

Fixed all issues in commits 6ade1f2 and ae5a8ab:

1. Non-blocking panel — Removed the backdrop overlay entirely. Panel slides out without blocking page interaction — you can scroll and click the page while the panel is open.

2. Theme blocks fixed — Redesigned to compact 2-col horizontal layout with small color dots + label. Fits properly in the 320px panel width.

3. Code colors fixed — All <code> and <pre> elements in AboutDefault now use text-foreground + font-mono + border-border for proper visibility across all theme presets.

4. FAB → sleek pull-out tab — Replaced the round bottom-right FAB with a slim chevron tab at right-center edge. Tab slides with the panel when open. Hover expands it slightly for affordance.

[thinkdj]

@copilot
Hero Section - Minimal - make padding and font size simlar to others, not so small
right panel trigger - make primary color (losing it on whitecolor)
right panel headings like nav bar, hero section etc - add iconography beore title to make it more scanable
preset selection pills - better design plz
make a list of HOMEPAGE_vNEXT.MD where we can 1. properly integrate this with ottabase core framework (eg: database for data once, render any way you want) and also 2. for enhancements or new features for this dynamic homepage -- be through on 1 and 2.

[Copilot]

@copilot
Hero Section - Minimal - make padding and font size simlar to others, not so small
right panel trigger - make primary color (losing it on whitecolor)
...

Fixed all 5 items in commits 3c81d5a and a82a7eb:

1. Hero Minimal sizing — increased padding (py-14→py-20/md:py-24), font size (text-2xl→text-3xl/sm:4xl/md:5xl), wider container (max-w-3xl→4xl), larger buttons (sm/ghost→lg/default+outline) — now proportional to Centered and Split variants.

2. Pull-out tab primary color — changed from bg-background/text-muted-foreground to solid bg-primary/text-primary-foreground so it's visible on all backgrounds.

3. Section heading icons — added lucide icons before each section title: 🧭 Navigation, ✨ Hero, 🔲 Features, 📢 CTA, ☰ Footer, 📄 About, 🎨 Theme Preset — all in text-primary.

4. Preset pills redesign — theme cards now use centered column layout with larger 5×5 color dots and active state highlighting. Variant selectors changed to rounded-full pills with solid bg-primary active state instead of the old bordered boxes.

5. HOMEPAGE_vNEXT.MD — comprehensive roadmap covering:

   • Core integration (9 sections): DB-backed content via OttaORM, brand persistence, auth + inline editing, R2 media uploads, blog integration, analytics + A/B testing, email/newsletter, comments/testimonials, real-time updates
   • Feature enhancements (8 sections): 10 new slot types (pricing, FAQ, team, testimonials, stats, etc.), enhanced config panel UX (drag reorder, presets, import/export), animations, SEO, i18n, multi-page builder, DX tooling, multi-tenancy
   • Organized in 4 priority tiers

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• workers.cloudflare.com
  • Triggering command: /opt/hostedtoolcache/node/24.14.0/x64/bin/node /opt/hostedtoolcache/node/24.14.0/x64/bin/node /home/REDACTED/work/ottabase/ottabase/node_modules/.pnpm/next@16.1.1_@babel+core@7.28.6_@opentelemetry+api@1.9.0_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/next/dist/server/lib/start-server.js s/.bin/node node ase/�� s --format cjs,esm --dts --clean build /.pnpm/pnpm@10.27.0/node_modules/pnpm/dist/node-gyp-bin/git login.ts src/clinode --global ipt.jar 0.18_@openteleme/home/REDACTED/work/ottabase/ottabase/apps/ottabase-template-app-nextjs-homepage/components/ConfigPanel.tsx src/�� src/d1.ts src/kv.ts de/node/bin/sh src/images.ts src/hyperdrive.tdiff src/queues.ts node (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)