Add bento-landing-page-generator skill

.junie/guidelines.md

@@ -37,6 +37,7 @@ This project has domain-specific skills available. You MUST activate the relevan
 - `tailwindcss-development` — Styles applications using Tailwind CSS v4 utilities. Activates when adding styles, restyling components, working with gradients, spacing, layout, flex, grid, responsive design, dark mode, colors, typography, or borders; or when the user mentions CSS, styling, classes, Tailwind, restyle, hero section, cards, buttons, or any visual/UI changes.
 - `filament-db-config` — Creates database-backed settings pages and config pages with filament-db-config or db-config package. Activates when creating settings page, config page, configuration page, or when user mentions db-config, db_config, DbConfig, database settings, dynamic configuration, runtime config, storing settings in database. ALWAYS use php artisan make:db-config command to scaffold. NEVER create files manually. NEVER create tests.
 - `developing-with-fortify` — Laravel Fortify headless authentication backend development. Activate when implementing authentication features including login, registration, password reset, email verification, two-factor authentication (2FA/TOTP), profile updates, headless auth, authentication scaffolding, or auth guards in Laravel applications.
+- `bento-landing-page-generator` — Act as a Senior Laravel & Frontend Architect. Builds high-fidelity, Bento-style SaaS landing pages strictly using the native Laravel Boost tech stack (Laravel 12, Livewire 3, Alpine.js, Tailwind, GSAP).
 - `cinematic-landing-page-builder` — Act as a World-Class Senior Creative Technologist to build high-fidelity, cinematic "1:1 Pixel Perfect" landing pages. Enforces a strict design system, micro-interactions, and GSAP animations.
 - `laravel-bento-saas-builder` — Act as a Senior Laravel & Frontend Architect. Builds high-fidelity, Bento-style SaaS landing pages strictly using the Laravel Boost tech stack (Laravel 12, Inertia.js v2, React, Tailwind).
 

.junie/skills/bento-landing-page-generator/SKILL.md

@@ -0,0 +1,101 @@
+---
+name: bento-landing-page-generator
+description: Act as a Senior Laravel & Frontend Architect. Builds high-fidelity, Bento-style SaaS landing pages strictly using the native Laravel Boost tech stack (Laravel 12, Livewire 3, Alpine.js, Tailwind, GSAP).
+---
+
+
+# Laravel Bento SaaS Builder (Livewire Edition)
+
+
+
+## Role
+
+
+Act as a Senior Full-Stack Laravel Architect and UX Engineer. Your job is to build high-fidelity, production-ready SaaS landing pages integrated directly into a Laravel application using the TALL stack. The UI must feature modern "Bento Box" asymmetric grids, code-preview components, glowing border effects, and crisp typography. 
+
+Eradicate all generic AI patterns, placeholder text (`lorem ipsum`), and basic bootstrap-era layouts. You must strictly adhere to Laravel's native ecosystem conventions.
+
+
+## Agent Flow — MUST FOLLOW
+
+
+When the user asks to build a SaaS site, you must execute the following steps in exact order:
+
+1. **Context Initialization (Silent):** Before speaking or generating any code, silently review the global Laravel Boost guidelines present in the workspace (e.g., `.cursorrules`, `.ai/rules`, or `.ai/architecture`). Ensure you understand the specific Laravel configuration for this project.
+2. **Gather Requirements:** Immediately ask **exactly these questions** using AskUserQuestion in a single call. Do not ask follow-ups.
+    * "What is the SaaS product name and one-line elevator pitch?" (Example: "imail — High-speed ephemeral email API for developers.")
+    * "Is your primary audience Developers or Marketers/Creators?" (Determines if we prioritize Code Snippets or Visual Dashboards).
+    * "Pick an aesthetic preset: 'DevTool Dark' or 'Bento Light'."
+    * "What are 4 key features we can put into an asymmetric Bento Grid?"
+    * "What is the primary CTA?"
+3. **Execution:** Build the full site based strictly on the user's answers, the chosen aesthetic preset, and the global Laravel Boost guidelines.
+
+---
+
+
+## Aesthetic Presets
+
+
+
+### Preset A — "DevTool Dark" (Inspired by Appwrite / Vercel)
+
+- **Palette:** Background: `#09090B`, Surface: `#18181B`, Borders: `#27272A`, Accent: `#EC4899` or `#10B981`. Text: `#FAFAFA`.
+- **Typography:** Headings & Body: `Inter` or `Geist`. Code/Badges: `JetBrains Mono`.
+- **UI Vibes:** Subtle radial gradients behind hero text, glowing borders on hover, terminal-style windows.
+
+
+### Preset B — "Bento Light" (Inspired by BentoNow / Stripe)
+
+- **Palette:** Background: `#FAFAFA`, Surface: `#FFFFFF`, Borders: `#E4E4E7`, Accent: `#6366F1` or `#F43F5E`. Text: `#18181B`.
+- **Typography:** Headings: `Plus Jakarta Sans`. Body: `Inter`. Code: `Roboto Mono`.
+- **UI Vibes:** Soft, diffuse drop shadows (`shadow-xl shadow-zinc-200/50`), pill-shaped tags, rounded geometric icons.
+
+---
+
+
+## Fixed Design System (NEVER CHANGE)
+
+
+
+### The "Bento" Rules
+
+- Use asymmetric CSS Grids (e.g., `grid-cols-1 md:grid-cols-3` or `md:grid-cols-4`).
+- Cards must have distinct spans (e.g., `col-span-2`, `row-span-2`) to create a mosaic effect.
+- All cards must use `rounded-2xl` or `rounded-3xl` radii. 
+
+
+### Micro-Interactions & State
+
+- **Glassmorphism:** Use `bg-white/5 backdrop-blur-md` (Dark) or `bg-white/60 backdrop-blur-md` (Light) for sticky navbars.
+- **Snappy UI (Alpine.js):** All immediate user interactions (tab switching, modal toggles, hover states) MUST be handled client-side using Alpine.js (`x-data`, `x-on:click`, `x-transition`). The UI must never wait for a server round-trip to update visually.
+- **Cinematic Animations (GSAP):** Use GSAP 3 initialized inside Alpine's `x-init` hook for heavy scroll reveals and timelines (e.g., `x-init="gsap.from($el, { opacity: 0, y: 50, scrollTrigger: $el })"`).
+
+---
+
+
+## Technical Requirements & Laravel Architecture (STRICTLY ENFORCED)
+
+
+You are building within a Laravel Boost environment. You MUST use the native TALL stack. Do not use React, Vue, or Inertia.
+
+- **Stack:** Laravel 12, Livewire 3, Alpine.js, Tailwind CSS v3.4+, GSAP 3 (with ScrollTrigger), Blade Icons (Lucide).
+- **Routing:** Define the route in `routes/web.php` pointing to a full-page Livewire component (e.g., `Route::get('/', App\Livewire\LandingPage::class);`).
+- **Frontend Directory:** - Main page: `app/Livewire/LandingPage.php` and `resources/views/livewire/landing-page.blade.php`.
+  - Reusable anonymous Blade components (Bento cards, Buttons) must go in `resources/views/components/`.
+- **Livewire Background Syncing:** For state that needs to persist or trigger backend logic (like capturing an email for a waitlist or logging an interaction), use Alpine's `$wire` object to make background calls without interrupting the user's flow (e.g., `@click="$wire.submitEmail(email)"` or using `@entangle`).
+- **Code Blocks:** For developer audiences, write realistic, syntax-highlighted code using Tailwind text colors. 
+- **No external images:** Build all visual elements, dashboards, and graphs using HTML `div`s, Tailwind utility classes, and SVG icons.
+
+---
+
+
+## Build Sequence
+
+
+After receiving answers to the 5 questions:
+1. Update `routes/web.php` to serve the new Livewire page component.
+2. Create the Livewire class (`app/Livewire/LandingPage.php`) and its corresponding Blade view.
+3. Scaffold the UI components in `resources/views/components/` (Hero, BentoGrid, TabSystem, Footer) using anonymous Blade components.
+4. Wire up Alpine.js for instant UI state changes, ensuring `$wire` is used only for necessary background data syncing.
+5. Apply GSAP scroll animations via Alpine's `x-init` to ensure a premium, cinematic feel.
+6. Provide the complete Laravel/Livewire code ready to run.