add heros section

Author: claudemyburgh

AGENTS.md

@@ -212,4 +212,11 @@ Use Wayfinder to generate TypeScript functions for Laravel routes. Import from `
 
 - IMPORTANT: Activate `inertia-react-development` when working with Inertia React client-side patterns.
 
+=== tailwindcss/shadcn rules ===
+
+# TailwindCSS & Shadcn Colors
+
+- NEVER use hardcoded theme colors like `bg-zinc-50`, `dark:bg-black`, `bg-emerald-50/50`, `dark:bg-zinc-950`, `text-emerald-700`, `dark:text-emerald-400`.
+- ALWAYS use semantic Shadcn variables and color tokens defined in `resources/css/app.css` (e.g., `bg-background`, `text-foreground`, `bg-card`, `text-card-foreground`, `bg-muted`, `text-muted-foreground`, `bg-primary`, `text-primary-foreground`, `bg-secondary`, `text-secondary-foreground`, `border-border`, `bg-destructive`, etc.). This ensures layout consistency and automatic compatibility in both light and dark modes.
+
 </laravel-boost-guidelines>

GEMINI.md

@@ -212,4 +212,11 @@ Use Wayfinder to generate TypeScript functions for Laravel routes. Import from `
 
 - IMPORTANT: Activate `inertia-react-development` when working with Inertia React client-side patterns.
 
+=== tailwindcss/shadcn rules ===
+
+# TailwindCSS & Shadcn Colors
+
+- NEVER use hardcoded theme colors like `bg-zinc-50`, `dark:bg-black`, `bg-emerald-50/50`, `dark:bg-zinc-950`, `text-emerald-700`, `dark:text-emerald-400`.
+- ALWAYS use semantic Shadcn variables and color tokens defined in `resources/css/app.css` (e.g., `bg-background`, `text-foreground`, `bg-card`, `text-card-foreground`, `bg-muted`, `text-muted-foreground`, `bg-primary`, `text-primary-foreground`, `bg-secondary`, `text-secondary-foreground`, `border-border`, `bg-destructive`, etc.). This ensures layout consistency and automatic compatibility in both light and dark modes.
+
 </laravel-boost-guidelines>

app/Actions/Registry/StoreRegistryAction.php

@@ -8,6 +8,14 @@ class StoreRegistryAction
 {
     public function handle(array $data): Registry
     {
-        return Registry::create($data);
+        if (! isset($data['user_id']) && auth()->check()) {
+            $data['user_id'] = auth()->id();
+        }
+
+        $registry = new Registry;
+        $registry->forceFill($data);
+        $registry->save();
+
+        return $registry;
     }
 }

app/Console/Commands/RegistryBuildCommand.php

@@ -63,13 +63,40 @@ public function handle(): int
                 if (isset($pathParts[1]) && $pathParts[1] === 'ui') {
                     $itemType = 'registry:ui';
                     $category = $pathParts[2] ?? 'components';
+                } elseif (isset($pathParts[1]) && $pathParts[1] === 'blocks') {
+                    $itemType = 'registry:block';
+                    $category = $pathParts[2] ?? 'blocks';
                 } else {
                     $itemType = 'registry:block';
-                    $category = 'blocks';
+                    $category = $pathParts[1] ?? 'blocks';
                 }
             }
 
-            $name = ($itemType === 'registry:block') ? ($pathParts[1] ?? $filename) : $filename;
+            // Normalise and group category names
+            $categoryMap = [
+                'hero-section' => 'hero-sections',
+                'pricing-section' => 'pricing',
+                'cards-stats' => 'stats',
+                'booking-form' => 'forms',
+                'rental-listings' => 'properties',
+                'property-detail' => 'properties',
+                'reviews-slider' => 'reviews',
+                'buttons-gallery' => 'galleries',
+                'canvas-gallery' => 'galleries',
+                'inputs-gallery' => 'galleries',
+                'music-player' => 'media',
+                'threejs' => 'canvas',
+            ];
+            $category = str_starts_with($category, 'hero-') ? 'hero-sections' : ($categoryMap[$category] ?? $category);
+
+            $name = $filename;
+            if ($itemType === 'registry:block') {
+                if (isset($pathParts[1]) && $pathParts[1] === 'blocks') {
+                    $name = $pathParts[2] ?? $filename;
+                } else {
+                    $name = $pathParts[1] ?? $filename;
+                }
+            }
 
             if (isset($registryItems[$name])) {
                 $registryItems[$name]['files'][] = [
@@ -181,9 +208,78 @@ public function handle(): int
         }
         unset($item);
 
+        $descriptions = [
+            'analytics-dashboard' => 'A comprehensive, premium analytics dashboard showing statistics, performance metrics, and graphs.',
+            'booking-form' => 'A clean and responsive booking card form layout for properties or services.',
+            'buttons-gallery' => 'A showcase of various button designs including magnetic, particles, and shining effect variants.',
+            'canvas-gallery' => 'A beautiful presentation displaying interactive HTML Canvas art and experiments.',
+            'cards-stats' => 'A collection of metric statistics cards with trends, indicator badges, and compact styling.',
+            'feature-grid' => 'A clean grid layout to present core features of a product with icons and card hover states.',
+            'hero-section' => 'A stunning and modern landing page hero section with typography and call to actions.',
+            'inputs-gallery' => 'An interactive display showcasing specialized text, phone, currency, slug, and rating input components.',
+            'music-player' => 'An immersive, premium client-side music player layout with playlist and visual controls.',
+            'pricing-section' => 'A modern tiered pricing section with hover scale states, tags, and toggles.',
+            'property-detail' => 'A clean and rich property details display page containing descriptions, photos, and reviews.',
+            'rental-listings' => 'A responsive layout showing real estate property rental cards with search filters.',
+            'reviews-slider' => 'A premium, smooth testimonial reviews slider with star ratings and user profiles.',
+            'gsap-marquee' => 'A high-performance GSAP-powered horizontal scrolling marquee component.',
+            'marquee' => 'A lightweight CSS-based horizontal text/elements scrolling marquee.',
+            'text-animator' => 'An elegant text animator rendering typography with premium transitions.',
+            'button-magnetic' => 'A premium magnetic button pull effect that snaps to the cursor position on hover.',
+            'button-particles' => 'A vibrant button trigger releasing interactive confetti/particle explosions on click.',
+            'button-shine' => 'A sleek button design showcasing a subtle glowing reflective shine transition.',
+            'pixel-canvas' => 'An interactive background canvas that draws pixel highlights under the mouse cursor.',
+            'back-light' => 'A modern card wrapper creating a glowing, color-matching backlight shadow behind components.',
+            'glow-conic' => 'A beautiful border animation powered by a rotating conic color gradient.',
+            'glow-radial' => 'An interactive background overlay that reflects cursor positioning with radial gradients. Requires GlowStack wrapping to function.',
+            'glow-stack' => 'A coordinated hover effect sharing cursor coordinates across a card stack.',
+            'input-currency' => 'A smart text input formatting numeric entries into localized currency notation as you type.',
+            'input-number' => 'A numeric spinner input containing up/down stepper buttons and range constraints.',
+            'input-phone' => 'A formatted text input enforcing phone masks and raw numeric outputs.',
+            'input-slug' => 'A reactive field transforming raw keystrokes into clean URL-safe slug strings.',
+            'multi-select' => 'A dropdown selector allowing search, selection, and creation of multiple tags.',
+            'progress-circle' => 'A clean SVG circular progress meter displaying animated percentage levels.',
+            'interactive-rating' => 'A star-based rating component supporting interactive hover feedback and selections.',
+            'animated-tabs' => 'A tab selection bar showcasing smooth fluid sliding indicator animations.',
+            'waves-three' => 'A responsive WebGL 3D waves animation powered by Three.js.',
+            'use-dark-mode' => 'A React hook detecting and toggling light/dark system color schemes.',
+            'use-headroom' => 'A React scroll hook enabling/disabling visibility of nav headers based on scroll direction.',
+            'use-hover' => 'A ref-bound React hover hook managing mouse entrance and exit event states.',
+            'use-pixel-canvas' => 'A helper hook handling pixel drawing mathematics for the Pixel Canvas component.',
+            'audio-context' => 'A browser Web Audio API manager providing playback nodes for the music player.',
+            'glow-geometry' => 'A helper library managing mouse coordinate tracking for glow wrappers.',
+            'pixel-canvas-helper' => 'A mathematical helper module driving pixel animations for the Pixel Canvas.',
+            'heading' => 'A structured typographic heading component supporting levels 1 to 6.',
+            'paragraph' => 'A versatile paragraph text component supporting default, lead, and muted layout variants.',
+            'badge-indicator' => 'A clean and customizable badge indicator component with optional Lucide icon support.',
+            'heading-block' => 'A composite title heading block containing category badge, main title, and description.',
+            'input-number-stepper' => 'A numeric entry component with side-by-side plus and minus adjustment buttons.',
+            'button-special' => 'A collection of unique styled buttons with pulsing, glowing, drawing, or gradient border effects.',
+            'hero-gradient' => 'A mesh gradient hero banner utilizing HeadingBlock typography and custom neon buttons.',
+            'hero-split' => 'A split two-column hero section with an interactive PixelCanvas visual panel and CTA options.',
+            'hero-minimal-centered' => 'A clean centered hero banner with simple typography and special draw and pulse CTA buttons.',
+            'hero-phone-mockup' => 'A split hero layout showcasing app copy alongside a high-fidelity glowing smartphone dashboard mockup.',
+            'hero-features-grid' => 'A centered hero banner paired with a three-column micro-grid of cards displaying key app features.',
+            'hero-video-dialog' => 'A centered hero section featuring a simulated dashboard mockup with an interactive play state.',
+            'hero-particles' => 'A high-impact centered hero set against an animated backdrop of floating ambient light particles.',
+            'hero-conic-glow' => 'A dark theme hero section displaying a centerpiece panel framed by a rotating conic border gradient.',
+            'hero-waitlist' => 'An interactive private beta submission form featuring custom number steppers and subscription feedback.',
+            'hero-trusted-by' => 'A centered landing page hero banner with an integrated client brand logo cloud for social proof.',
+            'hero-tabs-showcase' => 'A structured full-stack hero layout with tabbed navigation displaying frontend, backend, and migration code snippets.',
+            'hero-waves' => 'An immersive black-themed hero banner using a WebGL 3D waves canvas backdrop behind high-end typography.',
+            'phone-mockup' => 'A high-fidelity CSS-only smartphone mock frame that acts as a container for mobile previews.',
+            'code-window' => 'An interactive code editor window mockup with custom file tags and active indicators.',
+            'browser-mockup' => 'A clean browser mockup container frame with close/minimize chrome controls and viewport slot.',
+            'particles-backdrop' => 'A pure CSS background animation engine rendering drifting ambient particle glows.',
+            'logo-cloud' => 'A horizontal social proof logo grid displaying client/partner brands.',
+            'glowing-card' => 'An interactive card container that tracks mouse hover coordinates to trace a glowing radial spotlight.',
+            'hero-glowing-cards' => 'A centered hero banner utilizing three mouse-tracing GlowingCard components to show features.',
+        ];
+
         $databaseRecords = [];
         foreach ($registryItems as $name => $item) {
             try {
+                $item['description'] = $descriptions[$name] ?? 'A beautiful component for your application.';
                 $parsed = Registry::fromRegistry($item);
                 $attributes = $parsed->toArray();
                 unset($attributes['id'], $attributes['created_at'], $attributes['updated_at'], $attributes['deleted_at'], $attributes['user_id']);

app/Http/Controllers/DashboardComponentsController.php

@@ -0,0 +1,154 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Actions\Registry\DeleteRegistryAction;
+use App\Actions\Registry\StoreRegistryAction;
+use App\Actions\Registry\UpdateRegistryAction;
+use App\Http\Requests\Registry\StoreRequest;
+use App\Http\Requests\Registry\UpdateRequest;
+use App\Models\Registry;
+use Illuminate\Http\Request;
+use Inertia\Inertia;
+use Inertia\Response;
+
+class DashboardComponentsController extends Controller
+{
+    /**
+     * Display a listing of the components.
+     */
+    public function index(Request $request): Response
+    {
+        $components = Registry::ofTypes([
+            'registry:ui',
+            'registry:block',
+            'registry:hook',
+            'registry:lib',
+        ])
+            ->orderBy('title')
+            ->get()
+            ->map(fn (Registry $item) => [
+                'id' => $item->id,
+                'name' => $item->name,
+                'title' => $item->title,
+                'type' => $item->type,
+                'description' => $item->description,
+                'categories' => $item->categories ?? [],
+                'author' => $item->author,
+                'dependencies' => $item->dependencies ?? [],
+                'registryDependencies' => $item->registryDependencies ?? [],
+            ]);
+
+        return Inertia::render('dashboard/components/index', [
+            'components' => $components,
+        ]);
+    }
+
+    /**
+     * Show the form for creating a new component.
+     */
+    public function create(): Response
+    {
+        // Get all unique categories across components for suggestions
+        $categories = Registry::ofTypes([
+            'registry:ui',
+            'registry:block',
+            'registry:hook',
+            'registry:lib',
+        ])
+            ->get()
+            ->flatMap(fn ($item) => $item->categories ?? [])
+            ->unique()
+            ->sort()
+            ->values()
+            ->all();
+
+        return Inertia::render('dashboard/components/create', [
+            'categories' => $categories,
+        ]);
+    }
+
+    /**
+     * Store a newly created component in storage.
+     */
+    public function store(StoreRequest $request, StoreRegistryAction $action)
+    {
+        $action->handle($request->validated());
+
+        return redirect()
+            ->route('dashboard.components.index')
+            ->with('success', 'Component created successfully.');
+    }
+
+    /**
+     * Show the form for editing the specified component.
+     */
+    public function edit(string $name): Response
+    {
+        $component = Registry::where('name', $name)->firstOrFail();
+
+        // Get all unique categories for suggestions
+        $categories = Registry::ofTypes([
+            'registry:ui',
+            'registry:block',
+            'registry:hook',
+            'registry:lib',
+        ])
+            ->get()
+            ->flatMap(fn ($item) => $item->categories ?? [])
+            ->unique()
+            ->sort()
+            ->values()
+            ->all();
+
+        return Inertia::render('dashboard/components/edit', [
+            'component' => [
+                'id' => $component->id,
+                'name' => $component->name,
+                'title' => $component->title,
+                'type' => $component->type,
+                'description' => $component->description,
+                'author' => $component->author,
+                'categories' => $component->categories ?? [],
+                'dependencies' => $component->dependencies ?? [],
+                'registryDependencies' => $component->registryDependencies ?? [],
+                'files' => $component->files ?? [],
+                'css' => $component->css ?? [],
+                'css_base' => $component->css_base ?? [],
+                'vars_theme' => $component->vars_theme ?? [],
+                'vars_light' => $component->vars_light ?? [],
+                'vars_dark' => $component->vars_dark ?? [],
+            ],
+            'categories' => $categories,
+        ]);
+    }
+
+    /**
+     * Update the specified component in storage.
+     */
+    public function update(UpdateRequest $request, string $name, UpdateRegistryAction $action)
+    {
+        $component = Registry::where('name', $name)->firstOrFail();
+
+        // Ensure the ID is available for uniqueness validation checks
+        $request->merge(['id' => $component->id]);
+
+        $action->handle($component, $request->validated());
+
+        return redirect()
+            ->route('dashboard.components.index')
+            ->with('success', 'Component updated successfully.');
+    }
+
+    /**
+     * Remove the specified component from storage.
+     */
+    public function destroy(string $name, DeleteRegistryAction $action)
+    {
+        $action->handle($name);
+
+        return redirect()
+            ->route('dashboard.components.index')
+            ->with('success', 'Component deleted successfully.');
+    }
+}

app/Http/Middleware/HandleInertiaRequests.php

@@ -46,6 +46,7 @@ public function share(Request $request): array
                 'plan_name' => $subscription?->type,
                 'on_grace_period' => $subscription?->onGracePeriod() ?? false,
                 'ends_at' => $subscription?->ends_at,
+                'is_admin' => $user->hasAnyRole(['super-admin', 'admin']),
             ]);
         }