feat: redesign the playground front-end

[nicokempe]

✅ PR Checklist

Please ensure the following before submitting your PR:

• My commit message follows Conventional Commits
• I’ve tested the changes and confirmed they work as expected
• I’ve updated any relevant documentation
• I’ve added tests (if applicable)

🔗 Linked Issue

No issue created.

📖 Description

This pull request enhances the structure and design of the Nuxt Feature Flags Playground by introducing a new default layout, improving UI elements, and adding SEO metadata. Below is a summary of the most significant changes grouped by theme:

Layout and Structure Updates:

• Introduced a new default layout in playground/layouts/default.vue with a responsive header, navigation, and footer. This layout is now used across the application, replacing redundant structure in individual pages (playground/app.vue, playground/layouts/default.vue, [1] [2].
• Removed redundant page-specific headers and wrappers from playground/pages/index.vue and playground/pages/scheduled.vue to align with the new layout (playground/pages/index.vue, [1]; playground/pages/scheduled.vue, [2].

UI Enhancements:

• Updated button styles across the app to include hover opacity transitions and cursor pointers for a more interactive user experience (playground/pages/index.vue, [1] [2].
• Corrected a typo in a message to improve clarity: "New unreleased system is currently disabled" (playground/pages/index.vue, playground/pages/index.vueL46-R42).

Feature Additions:

• Added a modal component triggered by the "Beta Button" to demonstrate interactive feature flag usage (playground/pages/index.vue, playground/pages/index.vueR79-R108).

SEO Improvements:

• Added useSeoMeta definitions to multiple pages (playground/pages/protected.vue, [1]; playground/pages/scheduled.vue, [2]; playground/pages/index.vue, [3].

Minor Adjustments:

• Improved spacing and alignment in UI elements, such as adding ml-1 to inline code elements for better readability (playground/pages/index.vue, playground/pages/index.vueL23-R23).

🚨 Breaking Changes

• Yes
• No

🧪 Type of Change

• 🐛 Bug fix
• ✨ New feature
• 🧹 Code style / formatting
• 🔨 Refactoring (no functional changes)
• 🧰 Tooling / CI
• 📝 Docs update
• 🧪 Tests
• 💡 Other (please describe):

🧩 Additional Context

No additional context.

[Copilot]

Pull Request Overview

This PR redesigns the Nuxt Feature Flags Playground front-end by introducing a shared layout, cleaning up page templates, enhancing UI elements, adding a Beta modal, and improving SEO metadata.

• Added a new default.vue layout and applied it across the app via app.vue
• Cleaned up individual pages (index.vue, scheduled.vue), updated styles, and added a Beta feature modal
• Inserted useSeoMeta calls in multiple pages for SEO improvements

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
playground/layouts/default.vue	New default layout with header, navigation, and footer
playground/app.vue	Wrapped <NuxtPage> in the new default layout
playground/pages/index.vue	Removed old header, styled buttons, added Beta modal, SEO metadata, and scoped styles
playground/pages/scheduled.vue	Updated heading style, removed unused import, added SEO metadata
playground/pages/protected.vue	Added SEO metadata

Comments suppressed due to low confidence (2)

playground/pages/scheduled.vue:74

• The import 'useRuntimeConfig' is not used in this file; consider removing it to clean up unused imports.

import { useFeatureFlag, useRuntimeConfig } from '#imports'

playground/pages/index.vue:80

• The newly added Beta Feature Modal and its associated interactions are not covered by tests; consider adding unit or integration tests to verify its visibility toggling and content.

<!-- Modal -->