feat: Add dynamic icon field to 'Choose Us' features, enabling admin management and frontend display, while removing static entries and reducing seeded data.

app/Livewire/Datatable/Feature/ChooseUsTable.php

@@ -6,6 +6,7 @@
 use App\Traits\Datatable\WithConfiguration;
 use App\Traits\Datatable\WithPrependColumn;
 use Illuminate\Database\Eloquent\Builder;
+use Illuminate\Support\Facades\Blade;
 use Rappasoft\LaravelLivewireTables\DataTableComponent;
 use Rappasoft\LaravelLivewireTables\Views\Column;
 
@@ -22,6 +23,14 @@ public function columns(): array
 
             Column::make('Keterangan', 'description')->searchable()->sortable(),
 
+            Column::make('Icon', 'icon')
+                ->format(function ($value) {
+                    return Blade::render('<flux:icon.'.$value.'/>');
+                })
+                ->html()
+                ->searchable()
+                ->sortable(),
+
             Column::make('Aksi')
                 ->label(function ($row) {
                     $actions = '';

app/Livewire/Forms/Studio/Feature/ChooseUsForm.php

@@ -17,11 +17,14 @@ class ChooseUsForm extends Form
 
     public string $description = '';
 
+    public string $icon = '';
+
     public function rules(): array
     {
         return [
             'name' => ['required', 'string', 'max:50'],
             'description' => ['required', 'string'],
+            'icon' => ['required', 'string', 'max:30'],
         ];
     }
 
@@ -30,6 +33,7 @@ public function validationAttributes(): array
         return [
             'name' => 'nama',
             'description' => 'keterangan',
+            'icon' => 'ikon',
         ];
     }
 
@@ -39,6 +43,7 @@ public function setChooseUs(ChooseUs $chooseUs): void
 
         $this->name = $chooseUs->name;
         $this->description = $chooseUs->description;
+        $this->icon = $chooseUs->icon;
     }
 
     public function store(): void
@@ -52,6 +57,7 @@ public function store(): void
             ChooseUs::create([
                 'name' => $this->name,
                 'description' => $this->description,
+                'icon' => $this->icon,
                 'sort_order' => 1,
             ]);
         });
@@ -64,6 +70,7 @@ public function update(): void
         $this->chooseUs->update([
             'name' => $this->name,
             'description' => $this->description,
+            'icon' => $this->icon,
         ]);
     }
 

app/Livewire/Home/Index.php

@@ -63,13 +63,7 @@ public function mount(): void
             })
             ->toArray();
 
-        $this->whyChooseUs = ChooseUs::orderBy('sort_order')
+        $this->whyChooseUs = ChooseUs::orderBy('sort_order')->get()->toArray();
-            ->get()
-            ->map(fn (ChooseUs $chooseUs) => [
-                'name' => $chooseUs->name,
-                'description' => $chooseUs->description,
-            ])
-            ->toArray();
 
         $this->perfumeFeatures = PerfumeFeature::orderBy('sort_order')
             ->get()

database/migrations/2025_11_06_100555_create_choose_us_table.php

@@ -14,6 +14,7 @@ public function up(): void
         Schema::create('choose_us', function (Blueprint $table) {
             $table->id();
             $table->string('name', 50);
+            $table->string('icon', 30);
             $table->text('description');
             $table->unsignedInteger('sort_order');
             $table->timestamp('created_at')->useCurrent();

database/seeders/ChooseUsSeeder.php

@@ -14,41 +14,25 @@ public function run(): void
                 'name' => 'Produk 100% Original',
                 'description' => 'Kami hanya menjual parfum original dari brand resmi, tanpa campuran atau versi KW.',
                 'sort_order' => 1,
+                'icon' => 'shield-check',
             ],
             [
                 'name' => 'Harga Terbaik',
                 'description' => 'Dapatkan harga kompetitif dan promo menarik setiap minggu untuk semua produk.',
                 'sort_order' => 2,
-            ],
+                'icon' => 'tag',
-            [
-                'name' => 'Pengiriman Cepat',
-                'description' => 'Pesananmu akan dikirim maksimal 24 jam setelah pembayaran dikonfirmasi.',
-                'sort_order' => 3,
-            ],
-            [
-                'name' => 'Garansi Produk',
-                'description' => 'Jika parfum rusak atau salah kirim, kami siap menggantinya tanpa ribet.',
-                'sort_order' => 4,
             ],
             [
                 'name' => 'Layanan Pelanggan Ramah',
                 'description' => 'Tim kami siap membantu kamu setiap hari melalui chat, email, dan media sosial.',
                 'sort_order' => 5,
-            ],
+                'icon' => 'chat-bubble-left-right',
-            [
-                'name' => 'Program Member Eksklusif',
-                'description' => 'Dapatkan poin reward, diskon spesial, dan akses promo terbatas sebagai member.',
-                'sort_order' => 6,
             ],
             [
                 'name' => 'Koleksi Parfum Lengkap',
                 'description' => 'Tersedia berbagai merek parfum internasional dan lokal dengan varian aroma terbaik.',
                 'sort_order' => 7,
-            ],
+                'icon' => 'cube',
-            [
-                'name' => 'Belanja Aman dan Nyaman',
-                'description' => 'Sistem pembayaran terenkripsi dan kebijakan privasi menjaga data pelanggan tetap aman.',
-                'sort_order' => 8,
             ],
         ]);
     }

resources/views/livewire/home/partials/why.blade.php

@@ -32,72 +32,20 @@ class="rounded-2xl w-full h-[400px] lg:h-[500px] object-cover shadow-xl">
         </div>
 
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-            <article
+            @foreach ($whyChooseUs as $whyChoose)
-                class="bg-white rounded-2xl p-8 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-gray-100 group">
+                <article
-                <div
+                    class="bg-white rounded-2xl p-8 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-gray-100 group">
-                    class="mb-6 w-14 h-14 rounded-full bg-home-primary/5 flex items-center justify-center group-hover:bg-home-primary transition-colors duration-300">
+                    <div
-                    <svg xmlns="http://www.w3.org/2000/svg"
+                        class="mb-6 w-14 h-14 rounded-full bg-home-primary/5 flex items-center justify-center group-hover:bg-home-primary transition-colors duration-300">
-                        class="h-7 w-7 text-home-primary group-hover:text-white transition-colors duration-300"
+                        <flux:icon :name="$whyChoose['icon']"
-                        fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                            class="h-7 w-7 text-home-primary group-hover:text-white transition-colors duration-300" />
-                        <path stroke-linecap="round" stroke-linejoin="round"
+                    </div>
-                            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                    <h3 class="text-xl font-bold text-gray-900 mb-3">{{ $whyChoose['name'] }}</h3>
-                    </svg>
+                    <p class="text-sm text-gray-600 leading-relaxed">
-                </div>
+                        {{ $whyChoose['description'] }}
-                <h3 class="text-xl font-bold text-gray-900 mb-3">Keaslian 100%</h3>
+                    </p>
-                <p class="text-sm text-gray-600 leading-relaxed">
+                </article>
-                    Setiap botol dijamin original dari distributor resmi untuk kualitas dan aroma yang murni.
+            @endforeach
-                </p>
-            </article>
-
-            <article
-                class="bg-white rounded-2xl p-8 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-gray-100 group">
-                <div
-                    class="mb-6 w-14 h-14 rounded-full bg-home-primary/5 flex items-center justify-center group-hover:bg-home-primary transition-colors duration-300">
-                    <svg xmlns="http://www.w3.org/2000/svg"
-                        class="h-7 w-7 text-home-primary group-hover:text-white transition-colors duration-300"
-                        fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                        <path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
-                    </svg>
-                </div>
-                <h3 class="text-xl font-bold text-gray-900 mb-3">Pengiriman Cepat</h3>
-                <p class="text-sm text-gray-600 leading-relaxed">
-                    Pesananmu diproses dan dikirim di hari yang sama untuk sampai lebih cepat dan aman.
-                </p>
-            </article>
-
-            <article
-                class="bg-white rounded-2xl p-8 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-gray-100 group">
-                <div
-                    class="mb-6 w-14 h-14 rounded-full bg-home-primary/5 flex items-center justify-center group-hover:bg-home-primary transition-colors duration-300">
-                    <svg xmlns="http://www.w3.org/2000/svg"
-                        class="h-7 w-7 text-home-primary group-hover:text-white transition-colors duration-300"
-                        fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                        <path stroke-linecap="round" stroke-linejoin="round"
-                            d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2-1.343-2-3-2zm0 4c-2.485 0-4.5 1.567-4.5 3.5V18h9v-2.5c0-1.933-2.015-3.5-4.5-3.5z" />
-                    </svg>
-                </div>
-                <h3 class="text-xl font-bold text-gray-900 mb-3">Harga Bersahabat</h3>
-                <p class="text-sm text-gray-600 leading-relaxed">
-                    Nikmati parfum favorit dengan harga kompetitif tanpa mengurangi kualitas premium.
-                </p>
-            </article>
-
-            <article
-                class="bg-white rounded-2xl p-8 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 border border-gray-100 group">
-                <div
-                    class="mb-6 w-14 h-14 rounded-full bg-home-primary/5 flex items-center justify-center group-hover:bg-home-primary transition-colors duration-300">
-                    <svg xmlns="http://www.w3.org/2000/svg"
-                        class="h-7 w-7 text-home-primary group-hover:text-white transition-colors duration-300"
-                        fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-                        <path stroke-linecap="round" stroke-linejoin="round"
-                            d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z" />
-                    </svg>
-                </div>
-                <h3 class="text-xl font-bold text-gray-900 mb-3">Layanan Terbaik</h3>
-                <p class="text-sm text-gray-600 leading-relaxed">
-                    Tim customer service kami siap membantu 24/7 untuk pengalaman belanja yang sempurna.
-                </p>
-            </article>
         </div>
     </div>
 </section>

resources/views/livewire/studio/feature/choose-us.blade.php

@@ -34,8 +34,7 @@
 
             <flux:field>
                 <flux:label>Nama <span class="text-red-500 ms-1">*</span></flux:label>
-                <flux:input placeholder="200+ Aroma" wire:model="form.name" autofocus
+                <flux:input placeholder="200+ Aroma" wire:model="form.name" autofocus autocomplete="off" />
-                    autocomplete="off" />
                 <flux:error name="form.name" />
             </flux:field>
 
@@ -45,6 +44,14 @@
                     auotocomplete="off" />
             </flux:field>
 
+            <flux:field>
+                <flux:label>Icon <span class="text-red-500 ms-1">*</span></flux:label>
+                <flux:description>Lihat dan copy icon nya di <a href="https://heroicons.com/" class="text-blue-500"
+                        target="_blank">Heroicons</a></flux:description>
+                <flux:input placeholder="tag" wire:model="form.icon" autofocus autocomplete="off" />
+                <flux:error name="form.icon" />
+            </flux:field>
+
             <div class="flex">
                 <flux:spacer />
                 <flux:button variant="primary" class="sm:w-auto cursor-pointer" wire:click="{{ $method }}">