fix: honour zones.footer in FlexibleLayout runtime (fixes #63) (#89)

* feat: render footer zone in FlexibleLayout (fixes #63)

Adds missing footer zone rendering to inline FlexibleLayout case in App.tsx
to honor the zone schema contract. The footer zone was previously configured
in YAML but dropped at runtime due to incomplete implementation.

Co-authored-by: Mervin Praison <[email protected]>

* feat: add missing footer zone rendering to FlexibleLayout (fixes #63)

The inline FlexibleLayout implementation in App.tsx was missing the footer
zone rendering, causing zones.footer widgets to be schema-valid but
runtime-dropped. This adds the missing footer zone section to match the
proper FlexibleLayout component, ensuring footer widgets from examples
07-colorful and 08-corporate now render correctly.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-authored-by: Claude <[email protected]>

* fix: add array length checks for all zone conditionals in FlexibleLayout

- Fix footer zone rendering to check both existence AND non-empty length
- Apply consistent fix to all zone conditionals (hero, leftSidebar, bottomNav, footer)
- Prevents rendering empty styled wrappers when zones array is empty but defined
- Addresses issue identified in Gemini Code Assist review

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-authored-by: Mervin Praison <[email protected]>

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Mervin Praison <[email protected]>
Co-authored-by: Claude <[email protected]>
Co-authored-by: MervinPraison <[email protected]>
Co-authored-by: Cursor <[email protected]>

src/frontend/src/App.tsx

@@ -228,7 +228,7 @@ export default function App() {
         return (
           <div className="flex justify-center">
             <div className="w-full max-w-4xl px-6">
-              {zones?.hero && <ZoneWidgets widgets={zones.hero} />}
+              {zones?.hero && zones.hero.length > 0 && <ZoneWidgets widgets={zones.hero} />}
               <Content config={config} routes={routes} selectedItem={selectedItem} />
             </div>
           </div>
@@ -237,7 +237,7 @@ export default function App() {
         // Full width content
         return (
           <div className="px-6">
-            {zones?.hero && <ZoneWidgets widgets={zones.hero} />}
+            {zones?.hero && zones.hero.length > 0 && <ZoneWidgets widgets={zones.hero} />}
             <Content config={config} routes={routes} selectedItem={selectedItem} />
           </div>
         )
@@ -250,7 +250,7 @@ export default function App() {
         
         return (
           <div className="flex flex-col">
-            {zones?.hero && <ZoneWidgets widgets={zones.hero} />}
+            {zones?.hero && zones.hero.length > 0 && <ZoneWidgets widgets={zones.hero} />}
             <div className="flex flex-1">
               {shouldRenderNavigation && (
                 <aside className="w-64 border-r p-4 hidden md:block">
@@ -266,11 +266,16 @@ export default function App() {
               </div>
               <Toc selectedItem={selectedItem} zones={zones} />
             </div>
-            {zones?.bottomNav && (
+            {zones?.bottomNav && zones.bottomNav.length > 0 && (
               <div className="border-t p-4 bg-muted/30">
                 <ZoneWidgets widgets={zones.bottomNav} />
               </div>
             )}
+            {zones?.footer && zones.footer.length > 0 && (
+              <div className="border-t p-4 bg-muted/50">
+                <ZoneWidgets widgets={zones.footer} />
+              </div>
+            )}
           </div>
         )
       }