{{-- Header --}}
Edit Hero {{ $hero->name }}
Active
Save Changes Saving...
{{-- Mode Toggle Tabs --}}
{{-- Flash message --}} @if (session()->has('message'))
{{ session('message') }}
@endif @if (session()->has('error'))
{{ session('error') }}
@endif {{-- Custom HTML Mode --}} @if($editMode === 'html')
Custom HTML Mode: This bypasses the builder completely. Make sure your HTML includes all necessary styling and structure. Use Tailwind CSS classes for consistency.
Custom HTML HTML Content Paste your custom HTML here. You can use Tailwind CSS classes, custom fonts, animations, and any HTML structure you need. The HTML will be rendered directly on the homepage.

When enabled, the custom HTML above will be used instead of the builder output.

Tip: You can switch back to Builder Mode anytime using the tabs above. Your custom HTML will be saved.

@else {{-- Builder Mode (existing content) --}}
@endif @if($editMode === 'builder') {{-- Content --}} {{-- Form Column --}}
{{-- Basic Info --}}
Basic Information
Internal Name
Theme @foreach($themes as $key => $label) @endforeach Position @foreach($positions as $key => $label) @endforeach
Display Order
{{-- Content Section --}}
Content
Badge Text Small badge shown above the header Header Header Highlight This part will appear with gradient styling Description
{{-- Custom Hero Image Upload --}}
Custom Hero Image @if($currentHeroImageUrl) {{-- Current Image Preview --}}
Current hero image
Current Image Remove Removing...
@endif {{-- Upload Input --}}
{{ $currentHeroImageUrl ? 'Replace Image' : 'Upload Image' }}

Click to upload or drag and drop

JPEG, PNG or WebP (max 10MB)

Uploading...

 @if($heroImage)

{{ $heroImage->getClientOriginalName() }}

{{ number_format($heroImage->getSize() / 1024, 1) }} KB

Upload Uploading...
@endif
Upload a custom image for this hero. This takes priority over any inventory item image.
{{-- Inventory Item Selection --}}
Featured Product & Image @if($selectedItem)
@if($selectedImageUrl) {{ $selectedItem->product_name }} @else
@endif
{{ $selectedItem->product_name }}
SKU: {{ $selectedItem->sku }}
{{-- Image Gallery --}} @if($selectedItem->images->count() > 0)
Select Hero Image
@foreach($selectedItem->images as $image) @endforeach
Click an image to select it for the hero display
@endif @endif Search Inventory Items @if($inventorySearch && count($inventoryItems) > 0)
@foreach($inventoryItems as $item) @endforeach
@endif
{{-- CTA Buttons --}}
CTA Buttons Add Button
@if(empty($ctaButtons)) No buttons added yet. Add action buttons like "Shop Now" or "View Details". @else
@foreach($ctaButtons as $index => $button)
{{ $button['label'] }}
@if($button['url'])
{{ Str::limit($button['url'], 40) }}
@endif
{{ $button['variant'] }}
@endforeach
@endif
{{-- Floating Badges --}}
Floating Badges Add Badge
@if(empty($floatingBadges)) No floating badges added. These appear around the product image. @else
@foreach($floatingBadges as $index => $badge)
{{ $badge['label'] }}
@if($badge['sublabel'])
{{ $badge['sublabel'] }}
@endif
{{ $badge['position'] }}
@endforeach
@endif
{{-- Feature Bullets --}}
Feature Bullets Add Feature
@if(empty($featureBullets)) No feature bullets added. Add key selling points like "Verified Quality". @else
@foreach($featureBullets as $index => $feature)
{{ $feature['label'] }}
{{ $feature['color'] }}
@endforeach
@endif
{{-- Trust Indicators --}}
Trust Indicators Add Indicator
@if(empty($trustIndicators)) No trust indicators added. Add badges like "Free Shipping" or "30-Day Returns". @else
@foreach($trustIndicators as $index => $indicator)
{{ $indicator['label'] }}
@endforeach
@endif
{{-- Preview Column --}}
Live Preview
@php $hasExtractedColors = !empty($extractedColorPrimary); $previewDefaultClass = $theme === 'dark' ? 'bg-gradient-to-br from-zinc-900 via-zinc-800 to-zinc-900' : 'bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-100'; $previewStyle = ''; if ($hasExtractedColors) { $colorService = app(\App\Services\ColorExtractionService::class); $lightGradient = $colorService->generateLightGradient( $extractedColorPrimary, $extractedColorSecondary ); $darkGradient = $colorService->generateDarkGradient( $extractedColorPrimary, $extractedColorSecondary ); if ($theme === 'light') { $previewStyle = "--preview-light-start: {$lightGradient['start']}; --preview-light-mid: {$lightGradient['mid']}; --preview-light-end: {$lightGradient['end']}; --preview-dark-start: {$darkGradient['start']}; --preview-dark-mid: {$darkGradient['mid']}; --preview-dark-end: {$darkGradient['end']};"; } else { $previewStyle = "--preview-dark-start: {$darkGradient['start']}; --preview-dark-mid: {$darkGradient['mid']}; --preview-dark-end: {$darkGradient['end']};"; } } @endphp
{{-- Decorative shapes (matching homepage) --}} @if($hasExtractedColors) @if($theme === 'light')
@else
@endif @endif
{{-- Content Side --}}
@if($badgeText)
{{ Str::limit($badgeText, 20) }}
@endif

{{ Str::limit($header, 20) }} @if($headerHighlight) {{ Str::limit($headerHighlight, 15) }} @endif

@if($description)

{{ Str::limit($description, 60) }}

@endif @if(!empty($ctaButtons))
@foreach(array_slice($ctaButtons, 0, 2) as $btn) {{ Str::limit($btn['label'], 10) }} @endforeach
@endif
{{-- Image Side (always square to match homepage) --}}
@if($currentHeroImageUrl) Custom hero image @elseif($selectedImageUrl) {{ $selectedItem?->product_name }} @else @endif
{{-- Floating Badges Preview --}} @if(!empty($floatingBadges)) @foreach($floatingBadges as $badge) @php $previewPositionClasses = match($badge['position']) { 'top-left' => '-top-1 -left-1', 'top-right' => '-top-1 -right-1', 'bottom-left' => '-bottom-1 -left-1', 'bottom-right' => '-bottom-1 -right-1', default => '-top-1 -left-1', }; @endphp
{{ Str::limit($badge['label'], 10) }}
@endforeach @endif
{{-- Preview Info --}} @if($selectedItem)
{{ Str::limit($selectedItem->product_name, 30) }}
@else
Select an inventory item to see its image
@endif {{-- Image Controls (under preview for live feedback) --}} @if($selectedItem && $selectedItem->images->count() > 0)
Image Fit @foreach($imageFits as $key => $label) @endforeach Zoom Level: {{ $imageZoom }}%
100% 150% 200%
Show Image Container Show the square box around the image
@endif {{-- Extracted Colors Section --}} @if($selectedItem || $extractedColorPrimary)
Background Colors Re-extract Extracting...
@if($extractedColorPrimary || $extractedColorSecondary) {{-- Selected Colors --}}
{{-- Primary Color --}}
{{ $extractedColorPrimary }}
{{-- Secondary Color --}}
{{ $extractedColorSecondary }}
{{-- Color Palette from Image --}} @if(!empty($colorPalette) && count($colorPalette) > 2)
@foreach($colorPalette as $color) @endforeach
Left-click to set as primary, right-click to set as secondary
@endif These colors create the background gradient. Use color pickers above or select from the extracted palette. @else No colors extracted yet. Select an image and click "Re-extract". @endif
@endif
{{-- Element Edit Modal --}}
{{ $editingElementIndex !== null ? 'Edit' : 'Add' }} {{ match($elementModalType) { 'floating_badge' => 'Floating Badge', 'feature_bullet' => 'Feature Bullet', 'cta_button' => 'CTA Button', 'trust_indicator' => 'Trust Indicator', default => 'Element' } }}
Label @if($elementModalType === 'floating_badge') Sublabel Position @foreach($badgePositions as $key => $label) @endforeach @endif @if($elementModalType === 'cta_button') URL Variant @foreach($variants as $key => $label) @endforeach @endif @if(in_array($elementModalType, ['floating_badge', 'feature_bullet'])) Color @foreach($colors as $key => $label) @endforeach @endif Icon (Heroicon name) Browse icons at heroicons.com. Use names like: star, check-circle, truck, shield-check, gift, fire, bolt
Cancel {{ $editingElementIndex !== null ? 'Update' : 'Add' }}

Remember to click "Save Changes" at the top to save all changes to database.

 @endif {{-- End of builder mode conditional --}} @if($editMode === 'builder')
{{-- Close grid div from builder mode --}} @endif