diff --git a/app/Livewire/Home/Index.php b/app/Livewire/Home/Index.php
index 25869c7..de319d1 100644
--- a/app/Livewire/Home/Index.php
+++ b/app/Livewire/Home/Index.php
@@ -2,6 +2,9 @@
 
 namespace App\Livewire\Home;
 
+use App\Models\ChooseUs;
+use App\Models\Faq;
+use App\Models\PerfumeFeature;
 use Livewire\Attributes\Layout;
 use Livewire\Component;
 
@@ -10,6 +13,39 @@
 ])]
 class Index extends Component
 {
+    public array $perfumeFeatures = [];
+
+    public array $faqs = [];
+
+    public array $whyChooseUs = [];
+
+    public function mount()
+    {
+        $this->perfumeFeatures = PerfumeFeature::orderBy('sort_order')
+            ->get()
+            ->map(fn (PerfumeFeature $perfumeFeature) => [
+                'name' => $perfumeFeature->name,
+                'description' => $perfumeFeature->description,
+            ])
+            ->toArray();
+
+        $this->faqs = Faq::orderBy('sort_order')
+            ->get()
+            ->map(fn (Faq $faq) => [
+                'question' => $faq->question,
+                'answer' => $faq->answer,
+            ])
+            ->toArray();
+
+        $this->whyChooseUs = ChooseUs::orderBy('sort_order')
+            ->get()
+            ->map(fn (ChooseUs $chooseUs) => [
+                'name' => $chooseUs->name,
+                'description' => $chooseUs->description,
+            ])
+            ->toArray();
+    }
+
     public function render()
     {
         return view('livewire.home.index', [
diff --git a/resources/views/livewire/home/index.blade.php b/resources/views/livewire/home/index.blade.php
index 889e6be..0b15929 100644
--- a/resources/views/livewire/home/index.blade.php
+++ b/resources/views/livewire/home/index.blade.php
@@ -1,14 +1,15 @@
 <div class="">
     <!-- /header -->
     <section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600"
-        data-image-src="{{ asset('assets/img/photos/bg22.png') }}">
+        data-image-src="{{ asset('assets/images/bg/bg22.png') }}">
         <div class="container pt-16 pt-md-18 pb-9">
             <div class="row gx-0 gy-10 align-items-center text-center text-lg-start">
                 <div class="col-lg-6 col-xxl-5 position-relative" data-cues="slideInDown" data-group="page-title"
                     data-delay="700">
-                    <img src="{{ asset('assets/img/svg/doodle1.svg') }}" class="h-9 position-absolute d-none d-lg-block"
-                        data-cue="fadeIn" data-delay="3000" style="top: -9%; left: -6%" alt="doodle 1">
-                    <img src="{{ asset('assets/img/svg/doodle2.svg') }}"
+                    <img src="{{ asset('assets/images/svg/doodle1.svg') }}"
+                        class="h-9 position-absolute d-none d-lg-block" data-cue="fadeIn" data-delay="3000"
+                        style="top: -9%; left: -6%" alt="doodle 1">
+                    <img src="{{ asset('assets/images/svg/doodle2.svg') }}"
                         class="h-15 position-absolute d-none d-lg-block" data-cue="fadeIn" data-delay="3000"
                         style="bottom: 9%; right: -22%" alt="doodle 2">
                     <h1 class="display-1 fs-50 mb-4">Temukan
@@ -31,8 +32,7 @@ class="h-15 position-absolute d-none d-lg-block" data-cue="fadeIn" data-delay="3
                 <!-- /column -->
                 <div class="col-lg-6 ms-auto mb-n20 mb-xxl-n22" data-cues="slideInDown" data-delay="600">
                     <figure>
-                        <img src="{{ asset('assets/img/photos/devices3.png') }}"
-                            srcset="{{ asset('assets/img/photos/devices3@2x.png') }}" alt="hero banner">
+                        <img src="{{ asset('assets/images/devices3.png') }}" alt="hero banner">
                     </figure>
                 </div>
                 <!-- /column -->
@@ -56,10 +56,10 @@ class="h-15 position-absolute d-none d-lg-block" data-cue="fadeIn" data-delay="3
         <div class="container pt-18 pt-md-20 pb-14 pb-md-16">
             <div class="row text-center">
                 <div class="col-lg-10 col-xl-9 col-xxl-8 mx-auto position-relative">
-                    <img src="./assets/img/svg/doodle3.svg" class="h-11 position-absolute d-none d-lg-block"
-                        style="top: -45%; left: 23%" alt="">
-                    <img src="./assets/img/svg/doodle4.svg" class="h-8 position-absolute d-none d-lg-block"
-                        style="top: 6%; right: 2%" alt="">
+                    <img src="{{ asset('assets/images/svg/doodle3.svg') }}"
+                        class="h-11 position-absolute d-none d-lg-block" style="top: -45%; left: 23%" alt="">
+                    <img src="{{ asset('assets/images/svg/doodle4.svg') }}"
+                        class="h-8 position-absolute d-none d-lg-block" style="top: 6%; right: 2%" alt="">
                     <h2 class="fs-16 text-uppercase text-muted mb-3">Keunggulan Kami</h2>
                     <h3 class="display-3 mb-11 px-lg-5 px-xl-0 px-xxl-6">Kami hadirkan pengalaman <span
                             class="text-gradient gradient-7">parfum eksklusif</span> yang membuatmu tampil percaya diri
@@ -73,56 +73,56 @@ class="text-gradient gradient-7">parfum eksklusif</span> yang membuatmu tampil p
                     <div class="row gx-md-8 gy-10 text-center">
                         <div class="col-md-6 col-lg-3">
                             <div class="svg-bg svg-bg-lg bg-pale-yellow rounded-xl mb-4"> <img
-                                    src="./assets/img/icons/solid/cloud-network-2.svg"
+                                    src="./assets/images/icons/solid/cloud-network-2.svg"
                                     class="svg-inject icon-svg solid text-navy" alt="" /> </div>
                             <h4 class="fs-20">Tahan Lama</h4>
                         </div>
                         <!--/column -->
                         <div class="col-md-6 col-lg-3">
                             <div class="svg-bg svg-bg-lg bg-pale-green rounded-xl mb-4"> <img
-                                    src="./assets/img/icons/solid/touchscreen.svg"
+                                    src="./assets/images/icons/solid/touchscreen.svg"
                                     class="svg-inject icon-svg solid text-navy" alt="" /> </div>
                             <h4 class="fs-20">Kualitas Terjamin</h4>
                         </div>
                         <!--/column -->
                         <div class="col-md-6 col-lg-3">
                             <div class="svg-bg svg-bg-lg bg-pale-purple rounded-xl mb-4"> <img
-                                    src="./assets/img/icons/solid/lock.svg" class="svg-inject icon-svg solid text-navy"
-                                    alt="" /> </div>
+                                    src="./assets/images/icons/solid/lock.svg"
+                                    class="svg-inject icon-svg solid text-navy" alt="" /> </div>
                             <h4 class="fs-20">Bahan Premium</h4>
                         </div>
                         <!--/column -->
                         <div class="col-md-6 col-lg-3">
                             <div class="svg-bg svg-bg-lg bg-pale-pink rounded-xl mb-4"> <img
-                                    src="./assets/img/icons/solid/rocket.svg"
+                                    src="./assets/images/icons/solid/rocket.svg"
                                     class="svg-inject icon-svg solid text-navy" alt="" /> </div>
                             <h4 class="fs-20">Ramah Untuk Kulit</h4>
                         </div>
                         <!--/column -->
                         <div class="col-md-6 col-lg-3">
                             <div class="svg-bg svg-bg-lg bg-pale-violet rounded-xl mb-4"> <img
-                                    src="./assets/img/icons/solid/bar-chart.svg"
+                                    src="./assets/images/icons/solid/bar-chart.svg"
                                     class="svg-inject icon-svg solid text-navy" alt="" /> </div>
                             <h4 class="fs-20">200+ Aroma</h4>
                         </div>
                         <!--/column -->
                         <div class="col-md-6 col-lg-3">
                             <div class="svg-bg svg-bg-lg bg-pale-orange rounded-xl mb-4"> <img
-                                    src="./assets/img/icons/solid/safe.svg" class="svg-inject icon-svg solid text-navy"
-                                    alt="" /> </div>
+                                    src="./assets/images/icons/solid/safe.svg"
+                                    class="svg-inject icon-svg solid text-navy" alt="" /> </div>
                             <h4 class="fs-20">Kemasan Elegant</h4>
                         </div>
                         <!--/column -->
                         <div class="col-md-6 col-lg-3">
                             <div class="svg-bg svg-bg-lg bg-pale-blue rounded-xl mb-4"> <img
-                                    src="./assets/img/icons/solid/controls.svg"
+                                    src="./assets/images/icons/solid/controls.svg"
                                     class="svg-inject icon-svg solid text-navy" alt="" /> </div>
                             <h4 class="fs-20">Bebas Alkohol</h4>
                         </div>
                         <!--/column -->
                         <div class="col-md-6 col-lg-3">
                             <div class="svg-bg svg-bg-lg bg-pale-leaf rounded-xl mb-4"> <img
-                                    src="./assets/img/icons/solid/checked.svg"
+                                    src="./assets/images/icons/solid/checked.svg"
                                     class="svg-inject icon-svg solid text-navy" alt="" /> </div>
                             <h4 class="fs-20">Tersertifikasi</h4>
                         </div>
@@ -135,10 +135,12 @@ class="svg-inject icon-svg solid text-navy" alt="" /> </div>
             <!-- /.row -->
             <div class="row text-center">
                 <div class="col-md-10 col-lg-7 mx-auto position-relative">
-                    <img src="./assets/img/svg/doodle5.svg" class="w-15 position-absolute d-none d-lg-block"
-                        data-delay="1800" style="bottom: -60%; right: 10%" alt="">
-                    <img src="./assets/img/svg/doodle6.svg" class="h-15 position-absolute d-none d-lg-block"
-                        data-delay="1800" style="top: -40%; left: -5%" alt="">
+                    <img src="{{ asset('assets/images/svg/doodle5.svg') }}"
+                        class="w-15 position-absolute d-none d-lg-block" data-delay="1800"
+                        style="bottom: -60%; right: 10%" alt="">
+                    <img src="{{ asset('assets/images/svg/doodle6.svg') }}"
+                        class="h-15 position-absolute d-none d-lg-block" data-delay="1800"
+                        style="top: -40%; left: -5%" alt="">
                     <h2 class="fs-16 text-uppercase text-muted mb-3">Keunggulan Kami</h2>
                     <h3 class="display-3 mb-11 px-lg-5 px-xl-0 px-xxl-6">Kami hadirkan pengalaman <span
                             class="text-gradient gradient-7">parfum eksklusif</span> yang membuatmu tampil percaya diri
@@ -149,51 +151,41 @@ class="text-gradient gradient-7">parfum eksklusif</span> yang membuatmu tampil p
             <!-- /.row -->
             <div class="row mb-lg-20 mb-xl-23">
                 <div class="col-xxl-11 mx-auto">
-                    <div class="row gy-10 gy-lg-0 text-center d-flex align-items-center">
-                        <div class="col-md-6 col-lg-4 mx-auto mb-n10 mb-lg-0">
-                            <figure class="mx-auto">
-                                <img src="./assets/img/photos/devices4.png"
-                                    srcset="./assets/img/photos/devices4@2x.png 2x" alt="">
-                            </figure>
+                    @if (!empty($perfumeFeatures))
+                        <div class="row gy-10 gy-lg-0 text-center d-flex align-items-center">
+                            <div class="col-md-6 col-lg-4 order-lg-first">
+                                @foreach (array_slice($perfumeFeatures, 0, 2) as $index => $feature)
+                                    <div class="{{ $index == 0 ? 'mb-8' : '' }}">
+                                        <span class="fs-60 lh-1 mb-3 fw-normal text-gradient gradient-7">
+                                            {{ str_pad($index + 1, 2, '0', STR_PAD_LEFT) }}
+                                        </span>
+                                        <h4 class="fs-20">{{ $feature['name'] }}</h4>
+                                        <p class="mb-0 px-xl-7">{{ $feature['description'] }}</p>
+                                    </div>
+                                @endforeach
+                            </div>
+
+                            <div class="col-md-6 col-lg-4 mx-auto mb-n10 mb-lg-0">
+                                <figure class="mx-auto">
+                                    <img src="{{ asset('assets/images/devices4.png') }}" alt="perfume">
+                                </figure>
+                            </div>
+
+                            <div class="w-100 d-lg-none"></div>
+
+                            <div class="col-md-6 col-lg-4">
+                                @foreach (array_slice($perfumeFeatures, 2, 2) as $index => $feature)
+                                    <div class="{{ $index == 0 ? 'mb-8' : '' }}">
+                                        <span class="fs-60 lh-1 mb-3 fw-normal text-gradient gradient-7">
+                                            {{ str_pad($index + 3, 2, '0', STR_PAD_LEFT) }}
+                                        </span>
+                                        <h4 class="fs-20">{{ $feature['name'] }}</h4>
+                                        <p class="mb-0 px-xl-7">{{ $feature['description'] }}</p>
+                                    </div>
+                                @endforeach
+                            </div>
                         </div>
-                        <!-- /column -->
-                        <div class="w-100 d-lg-none"></div>
-                        <div class="col-md-6 col-lg-4 order-lg-first">
-                            <div class="mb-8">
-                                <span class="fs-60 lh-1 mb-3 fw-normal text-gradient gradient-7">01</span>
-                                <h4 class="fs-20">Tahan Lama</h4>
-                                <p class="mb-0 px-xl-7">Wanginya tetap segar dari pagi hingga malam, membuatmu selalu
-                                    percaya diri.</p>
-                            </div>
-                            <!-- /div -->
-                            <div>
-                                <span class="fs-60 lh-1 mb-3 fw-normal text-gradient gradient-7">02</span>
-                                <h4 class="fs-20">Bahan Premium</h4>
-                                <p class="mb-0 px-xl-7">Hanya menggunakan bahan berkualitas tinggi untuk aroma yang
-                                    elegan dan mewah.</p>
-                            </div>
-                            <!-- /div -->
-                        </div>
-                        <!-- /column -->
-                        <div class="col-md-6 col-lg-4">
-                            <div class="mb-8">
-                                <span class="fs-60 lh-1 mb-3 fw-normal text-gradient gradient-7">03</span>
-                                <h4 class="fs-20">Ramah untuk Kulit</h4>
-                                <p class="mb-0 px-xl-7">Formulasi lembut, aman, dan nyaman dipakai setiap hari tanpa
-                                    menimbulkan iritasi.</p>
-                            </div>
-                            <!-- /div -->
-                            <div>
-                                <span class="fs-60 lh-1 mb-3 fw-normal text-gradient gradient-7">04</span>
-                                <h4 class="fs-20">Kemasan Elegan & Praktis</h4>
-                                <p class="mb-0 px-xl-7">Desain botol modern dan mudah dibawa, cocok untuk koleksi atau
-                                    hadiah.</p>
-                            </div>
-                            <!-- /div -->
-                        </div>
-                        <!-- /column -->
-                    </div>
-                    <!-- /.row -->
+                    @endif
                 </div>
                 <!-- /column -->
             </div>
@@ -203,7 +195,7 @@ class="text-gradient gradient-7">parfum eksklusif</span> yang membuatmu tampil p
     </section>
     <!-- /section -->
     <section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600 bg-content"
-        data-image-src="./assets/img/photos/bg23.png">
+        data-image-src="{{ asset('assets/images/bg/bg23.png') }}">
         <div class="container py-14 pt-md-16 pt-lg-0 pb-md-17 position-relative" style="z-index: 2;">
             <div class="row">
                 <div class="col-xl-11 col-xxl-10 mx-auto">
@@ -211,179 +203,69 @@ class="text-gradient gradient-7">parfum eksklusif</span> yang membuatmu tampil p
                         <div class="player" data-plyr-provider="vimeo" data-plyr-embed-id="165101721"></div>
                     </div>
                     <div class="position-relative">
-                        <img src="./assets/img/svg/doodle7.svg" class="h-7 position-absolute d-none d-lg-block"
-                            data-delay="1800" style="top: -90%; right: -3%" alt="">
-                        <img src="./assets/img/svg/doodle8.svg" class="h-14 position-absolute d-none d-lg-block"
-                            data-delay="1800" style="top: -20%; left: -12%" alt="">
+                        <img src="{{ asset('assets/images/svg/doodle7.svg') }}"
+                            class="h-7 position-absolute d-none d-lg-block" data-delay="1800"
+                            style="top: -90%; right: -3%" alt="">
+                        <img src="{{ asset('assets/images/svg/doodle8.svg') }}"
+                            class="h-14 position-absolute d-none d-lg-block" data-delay="1800"
+                            style="top: -20%; left: -12%" alt="">
                         <h2 class="fs-16 text-uppercase text-muted mb-3 text-center">FAQ</h2>
-                        <h3 class="display-3 mb-11 px-lg-8 px-xl-11 text-center">If you don't see an <span
-                                class="text-gradient gradient-7">answer</span> to your question, you can send
-                            us an email from our contact form.</h3>
+                        <h3 class="display-3 mb-11 px-lg-8 px-xl-11 text-center">Pertanyaan yang sering diajukan
+                            <span class="text-gradient gradient-7">seputar layanan </span>kami.
+                        </h3>
                     </div>
                     <div class="row">
                         <div class="col-lg-6 mb-0">
                             <div id="accordion-1" class="accordion-wrapper">
-                                <div class="card accordion-item shadow-lg">
-                                    <div class="card-header" id="accordion-heading-1-1">
-                                        <button class="collapsed" data-bs-toggle="collapse"
-                                            data-bs-target="#accordion-collapse-1-1" aria-expanded="false"
-                                            aria-controls="accordion-collapse-1-1">Can I cancel my
-                                            subscription?</button>
-                                    </div>
-                                    <!-- /.card-header -->
-                                    <div id="accordion-collapse-1-1" class="collapse"
-                                        aria-labelledby="accordion-heading-1-1" data-bs-target="#accordion-1">
-                                        <div class="card-body">
-                                            <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris
-                                                condimentum nibh, ut fermentum massa justo sit amet risus. Cras
-                                                mattis consectetur purus sit amet fermentum. Praesent commodo
-                                                cursus magna, vel scelerisque nisl consectetur et. Cum sociis
-                                                natoque penatibus et magnis dis parturient montes, nascetur
-                                                ridiculus mus. Donec sed odio dui. Cras justo odio, dapibus ac
-                                                facilisis.</p>
+                                @foreach (array_slice($faqs, 0, ceil(count($faqs) / 2)) as $index => $faq)
+                                    <div class="card accordion-item shadow-lg">
+                                        <div class="card-header" id="accordion-heading-1-{{ $index }}">
+                                            <button class="collapsed" data-bs-toggle="collapse"
+                                                data-bs-target="#accordion-collapse-1-{{ $index }}"
+                                                aria-expanded="false"
+                                                aria-controls="accordion-collapse-1-{{ $index }}">{{ $faq['question'] }}</button>
                                         </div>
-                                        <!-- /.card-body -->
-                                    </div>
-                                    <!-- /.collapse -->
-                                </div>
-                                <!-- /.card -->
-                                <div class="card accordion-item shadow-lg">
-                                    <div class="card-header" id="accordion-heading-1-2">
-                                        <button class="collapsed" data-bs-toggle="collapse"
-                                            data-bs-target="#accordion-collapse-1-2" aria-expanded="false"
-                                            aria-controls="accordion-collapse-1-2">Which payment methods do you
-                                            accept?</button>
-                                    </div>
-                                    <!-- /.card-header -->
-                                    <div id="accordion-collapse-1-2" class="collapse"
-                                        aria-labelledby="accordion-heading-1-2" data-bs-target="#accordion-1">
-                                        <div class="card-body">
-                                            <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris
-                                                condimentum nibh, ut fermentum massa justo sit amet risus. Cras
-                                                mattis consectetur purus sit amet fermentum. Praesent commodo
-                                                cursus magna, vel scelerisque nisl consectetur et. Cum sociis
-                                                natoque penatibus et magnis dis parturient montes, nascetur
-                                                ridiculus mus. Donec sed odio dui. Cras justo odio, dapibus ac
-                                                facilisis.</p>
+                                        <div id="accordion-collapse-1-{{ $index }}" class="collapse"
+                                            aria-labelledby="accordion-heading-1-{{ $index }}"
+                                            data-bs-target="#accordion-{{ $index }}">
+                                            <div class="card-body">
+                                                <p>{{ $faq['answer'] }}</p>
+                                            </div>
                                         </div>
-                                        <!-- /.card-body -->
                                     </div>
-                                    <!-- /.collapse -->
-                                </div>
-                                <!-- /.card -->
-                                <div class="card accordion-item shadow-lg">
-                                    <div class="card-header" id="accordion-heading-1-3">
-                                        <button class="collapsed" data-bs-toggle="collapse"
-                                            data-bs-target="#accordion-collapse-1-3" aria-expanded="false"
-                                            aria-controls="accordion-collapse-1-3">How can I manage my
-                                            Account?</button>
-                                    </div>
-                                    <!-- /.card-header -->
-                                    <div id="accordion-collapse-1-3" class="collapse"
-                                        aria-labelledby="accordion-heading-1-3" data-bs-target="#accordion-1">
-                                        <div class="card-body">
-                                            <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris
-                                                condimentum nibh, ut fermentum massa justo sit amet risus. Cras
-                                                mattis consectetur purus sit amet fermentum. Praesent commodo
-                                                cursus magna, vel scelerisque nisl consectetur et. Cum sociis
-                                                natoque penatibus et magnis dis parturient montes, nascetur
-                                                ridiculus mus. Donec sed odio dui. Cras justo odio, dapibus ac
-                                                facilisis.</p>
-                                        </div>
-                                        <!-- /.card-body -->
-                                    </div>
-                                    <!-- /.collapse -->
-                                </div>
-                                <!-- /.card -->
+                                @endforeach
                             </div>
-                            <!-- /.accordion-wrapper -->
                         </div>
-                        <!--/column -->
+
                         <div class="col-lg-6">
-                            <div id="accordion-2" class="accordion-wrapper">
-                                <div class="card accordion-item shadow-lg">
-                                    <div class="card-header" id="accordion-heading-2-1">
-                                        <button class="collapsed" data-bs-toggle="collapse"
-                                            data-bs-target="#accordion-collapse-2-1" aria-expanded="false"
-                                            aria-controls="accordion-collapse-2-1">How do I get my
-                                            subscription receipt?</button>
-                                    </div>
-                                    <!-- /.card-header -->
-                                    <div id="accordion-collapse-2-1" class="collapse"
-                                        aria-labelledby="accordion-heading-2-1" data-bs-target="#accordion-2">
-                                        <div class="card-body">
-                                            <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris
-                                                condimentum nibh, ut fermentum massa justo sit amet risus. Cras
-                                                mattis consectetur purus sit amet fermentum. Praesent commodo
-                                                cursus magna, vel scelerisque nisl consectetur et. Cum sociis
-                                                natoque penatibus et magnis dis parturient montes, nascetur
-                                                ridiculus mus. Donec sed odio dui. Cras justo odio, dapibus ac
-                                                facilisis.</p>
+                            @foreach (array_slice($faqs, ceil(count($faqs) / 2)) as $index => $faq)
+                                <div id="accordion-2" class="accordion-wrapper">
+                                    <div class="card accordion-item shadow-lg">
+                                        <div class="card-header" id="accordion-heading-2-{{ $index }}">
+                                            <button class="collapsed" data-bs-toggle="collapse"
+                                                data-bs-target="#accordion-collapse-2-{{ $index }}"
+                                                aria-expanded="false"
+                                                aria-controls="accordion-collapse-2-{{ $index }}">{{ $faq['question'] }}</button>
                                         </div>
-                                        <!-- /.card-body -->
-                                    </div>
-                                    <!-- /.collapse -->
-                                </div>
-                                <!-- /.card -->
-                                <div class="card accordion-item shadow-lg">
-                                    <div class="card-header" id="accordion-heading-2-2">
-                                        <button class="collapsed" data-bs-toggle="collapse"
-                                            data-bs-target="#accordion-collapse-2-2" aria-expanded="false"
-                                            aria-controls="accordion-collapse-2-2">Are there any discounts for
-                                            people in need?</button>
-                                    </div>
-                                    <!-- /.card-header -->
-                                    <div id="accordion-collapse-2-2" class="collapse"
-                                        aria-labelledby="accordion-heading-2-2" data-bs-target="#accordion-2">
-                                        <div class="card-body">
-                                            <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris
-                                                condimentum nibh, ut fermentum massa justo sit amet risus. Cras
-                                                mattis consectetur purus sit amet fermentum. Praesent commodo
-                                                cursus magna, vel scelerisque nisl consectetur et. Cum sociis
-                                                natoque penatibus et magnis dis parturient montes, nascetur
-                                                ridiculus mus. Donec sed odio dui. Cras justo odio, dapibus ac
-                                                facilisis.</p>
+                                        <div id="accordion-collapse-2-{{ $index }}" class="collapse"
+                                            aria-labelledby="accordion-heading-2-{{ $index }}"
+                                            data-bs-target="#accordion-2">
+                                            <div class="card-body">
+                                                <p>{{ $faq['answer'] }}</p>
+                                            </div>
                                         </div>
-                                        <!-- /.card-body -->
                                     </div>
-                                    <!-- /.collapse -->
-                                </div>
-                                <!-- /.card -->
-                                <div class="card accordion-item shadow-lg">
-                                    <div class="card-header" id="accordion-heading-2-3">
-                                        <button class="collapsed" data-bs-toggle="collapse"
-                                            data-bs-target="#accordion-collapse-2-3" aria-expanded="false"
-                                            aria-controls="accordion-collapse-2-3">Do you offer a free trial
-                                            edit?</button>
-                                    </div>
-                                    <!-- /.card-header -->
-                                    <div id="accordion-collapse-2-3" class="collapse"
-                                        aria-labelledby="accordion-heading-2-3" data-bs-target="#accordion-2">
-                                        <div class="card-body">
-                                            <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris
-                                                condimentum nibh, ut fermentum massa justo sit amet risus. Cras
-                                                mattis consectetur purus sit amet fermentum. Praesent commodo
-                                                cursus magna, vel scelerisque nisl consectetur et. Cum sociis
-                                                natoque penatibus et magnis dis parturient montes, nascetur
-                                                ridiculus mus. Donec sed odio dui. Cras justo odio, dapibus ac
-                                                facilisis.</p>
-                                        </div>
-                                        <!-- /.card-body -->
-                                    </div>
-                                    <!-- /.collapse -->
-                                </div>
-                                <!-- /.card -->
-                            </div>
-                            <!-- /.accordion-wrapper -->
+                            @endforeach
                         </div>
-                        <!--/column -->
+                        <!-- /.accordion-wrapper -->
                     </div>
-                    <!--/.row -->
+                    <!--/column -->
                 </div>
-                <!--/column -->
+                <!--/.row -->
             </div>
-            <!--/.row -->
+            <!--/column -->
         </div>
+        <!--/.row -->
         <!-- /.container -->
     </section>
     <!-- /section -->
@@ -391,10 +273,12 @@ class="text-gradient gradient-7">answer</span> to your question, you can send
         <div class="container py-16 py-md-18">
             <div class="row text-center">
                 <div class="col-md-11 col-lg-9 col-xl-8 col-xxl-7 mx-auto position-relative">
-                    <img src="./assets/img/svg/doodle3.svg" class="h-11 position-absolute d-none d-lg-block"
-                        style="top: -20%; right: -12%" alt="">
-                    <img src="./assets/img/svg/doodle9.svg" class="h-17 position-absolute d-none d-lg-block"
-                        style="bottom: 5%; left: -17%" alt="">
+                    <img src="{{ asset('assets/images/svg/doodle3.svg') }}"
+                        class="h-11 position-absolute d-none d-lg-block" style="top: -20%; right: -12%"
+                        alt="">
+                    <img src="{{ asset('assets/images/svg/doodle9.svg') }}"
+                        class="h-17 position-absolute d-none d-lg-block" style="bottom: 5%; left: -17%"
+                        alt="">
                     <h2 class="fs-16 text-uppercase text-muted mb-3 text-center">Mengapa Harus Kami?</h2>
                     <h3 class="display-3 mb-12 text-center">Karena kami percaya <span
                             class="text-gradient gradient-7">setiap orang berhak wangi mewah</span> tanpa harus
@@ -405,102 +289,40 @@ class="text-gradient gradient-7">setiap orang berhak wangi mewah</span> tanpa ha
             <!-- /.row -->
             <div class="row d-flex align-items-start mb-19">
                 <div class="col-lg-6 position-lg-sticky" style="top: 8rem;">
-                    <figure><img src="./assets/img/photos/devices5.png"
-                            srcset="./assets/img/photos/devices5@2x.png 2x" alt=""></figure>
+                    <figure>
+                        <img src="{{ asset('assets/images/devices5.png') }}" alt="image">
+                    </figure>
                 </div>
                 <!-- /column -->
                 <div class="col-lg-5 ms-auto">
-                    <div class="d-flex flex-row mb-8">
-                        <div>
-                            <div class="svg-bg svg-bg-lg bg-pale-grape rounded-xl me-5"><img
-                                    src="./assets/img/icons/solid/calendar.svg"
-                                    class="svg-inject icon-svg solid text-navy" alt="" /></div>
+                    @foreach ($whyChooseUs as $item)
+                        <div class="d-flex flex-row mb-8">
+                            <div class="card card-border-start border-primary">
+                                <div class="card-body py-4">
+                                    <h4 class="fs-20">{{ $loop->iteration }}. {{ $item['name'] }}</h4>
+                                    <p class="m-0">{{ $item['description'] }}</p>
+                                </div>
+                            </div>
                         </div>
-                        <div>
-                            <h4 class="fs-20">Scheduled Transactions</h4>
-                            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
-                                mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent
-                                commodo cursus magna.</p>
-                        </div>
-                    </div>
-                    <div class="d-flex flex-row mb-8">
-                        <div>
-                            <div class="svg-bg svg-bg-lg bg-pale-green rounded-xl me-5"><img
-                                    src="./assets/img/icons/solid/currency.svg"
-                                    class="svg-inject icon-svg solid text-navy" alt="" /></div>
-                        </div>
-                        <div>
-                            <h4 class="fs-20">Multiple Currencies</h4>
-                            <p>Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a
-                                pharetra augue. Maecenas faucibus mollis interdum.</p>
-                        </div>
-                    </div>
-                    <div class="d-flex flex-row mb-8">
-                        <div>
-                            <div class="svg-bg svg-bg-lg bg-pale-pink rounded-xl me-5"><img
-                                    src="./assets/img/icons/solid/server.svg"
-                                    class="svg-inject icon-svg solid text-navy" alt="" /></div>
-                        </div>
-                        <div>
-                            <h4 class="fs-20">Database Management</h4>
-                            <p>Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a
-                                ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et
-                                magnis dis parturient montes.</p>
-                        </div>
-                    </div>
-                    <div class="d-flex flex-row mb-8">
-                        <div>
-                            <div class="svg-bg svg-bg-lg bg-pale-yellow rounded-xl me-5"><img
-                                    src="./assets/img/icons/solid/devices.svg"
-                                    class="svg-inject icon-svg solid text-navy" alt="" /></div>
-                        </div>
-                        <div>
-                            <h4 class="fs-20">Sync Between Devices</h4>
-                            <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
-                                mus. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Praesent
-                                commodo cursus magna.</p>
-                        </div>
-                    </div>
-                    <div class="d-flex flex-row mb-8">
-                        <div>
-                            <div class="svg-bg svg-bg-lg bg-pale-blue rounded-xl me-5"><img
-                                    src="./assets/img/icons/solid/search.svg"
-                                    class="svg-inject icon-svg solid text-navy" alt="" /></div>
-                        </div>
-                        <div>
-                            <h4 class="fs-20">Smart Search</h4>
-                            <p>Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a
-                                pharetra augue. Maecenas faucibus mollis interdum.</p>
-                        </div>
-                    </div>
-                    <div class="d-flex flex-row mb-8">
-                        <div>
-                            <div class="svg-bg svg-bg-lg bg-pale-leaf rounded-xl me-5"><img
-                                    src="./assets/img/icons/solid/compare.svg"
-                                    class="svg-inject icon-svg solid text-navy" alt="" /></div>
-                        </div>
-                        <div>
-                            <h4 class="fs-20">Detailed Reports</h4>
-                            <p>Pellentesque ornare sem lacinia quam venenatis vestibulum. Integer posuere erat a
-                                ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et
-                                magnis dis parturient montes.</p>
-                        </div>
-                    </div>
+                    @endforeach
                 </div>
                 <!-- /column -->
             </div>
             <!-- /.row -->
             <div class="row">
                 <div class="col-md-11 col-lg-10 col-xl-9 col-xxl-8 mx-auto text-center position-relative">
-                    <img src="./assets/img/svg/doodle1.svg" class="h-9 position-absolute d-none d-lg-block"
-                        style="top: 2%; left: 9%" alt="">
-                    <img src="./assets/img/svg/doodle10.svg" class="h-7 position-absolute d-none d-lg-block"
-                        style="top: -45%; left: -17%" alt="">
-                    <img src="./assets/img/svg/doodle11.svg" class="h-13 position-absolute d-none d-lg-block"
-                        style="top: -40%; right: -15%" alt="">
-                    <h2 class="fs-16 text-uppercase text-muted mb-3">Happy Customers</h2>
-                    <h3 class="display-3 mb-11 px-xl-10 px-xxl-13">Don't take our word for it. See what <span
-                            class="text-gradient gradient-7">customers</span> are saying about us.</h3>
+                    <img src="{{ asset('assets/images/svg/doodle1.svg') }}"
+                        class="h-9 position-absolute d-none d-lg-block" style="top: 2%; left: 9%" alt="">
+                    <img src="{{ asset('assets/images/svg/doodle10.svg') }}"
+                        class="h-7 position-absolute d-none d-lg-block" style="top: -45%; left: -17%" alt="">
+                    <img src="{{ asset('assets/images/svg/doodle11.svg') }}"
+                        class="h-13 position-absolute d-none d-lg-block" style="top: -40%; right: -15%"
+                        alt="">
+                    <h2 class="fs-16 text-uppercase text-muted mb-3">Pelanggan Kami yang Puas</h2>
+                    <h3 class="display-3 mb-11 px-xl-10 px-xxl-13">
+                        Jangan hanya percaya pada kata kami. Lihat apa yang dikatakan
+                        <span class="text-gradient gradient-7">pelanggan</span> tentang kami.
+                    </h3>
                 </div>
                 <!-- /column -->
             </div>
@@ -639,7 +461,7 @@ class="text-gradient gradient-7">customers</span> are saying about us.</h3>
     </section>
     <!-- /section -->
     <section class="wrapper image-wrapper bg-full bg-image bg-overlay bg-overlay-light-600"
-        data-image-src="./assets/img/photos/bg23.png">
+        data-image-src="{{ asset('assets/images/bg/bg23.png') }}">
         <div class="overflow-hidden" style="z-index:1;">
             <div class="divider divider-alt text-light mx-n2">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100">
@@ -653,25 +475,28 @@ class="text-gradient gradient-7">customers</span> are saying about us.</h3>
         <div class="container pt-10 pt-lg-10 pt-md-13 pb-8 pb-md-10 text-center text-lg-start">
             <div class="row gx-0 gy-10">
                 <div class="col-md-10 offset-md-1 offset-lg-0 col-lg-6 col-xl-5 position-relative">
-                    <img src="./assets/img/svg/doodle2.svg" class="h-15 position-absolute d-none d-lg-block"
-                        style="bottom: 36%; right: -25%" alt="">
-                    <img src="./assets/img/svg/doodle6.svg" class="h-14 position-absolute d-none d-lg-block"
-                        data-delay="1800" style="top: -20%; left: -25%" alt="">
+                    <img src="{{ asset('assets/images/svg/doodle2.svg') }}"
+                        class="h-15 position-absolute d-none d-lg-block" style="bottom: 36%; right: -25%"
+                        alt="">
+                    <img src="{{ asset('assets/images/svg/doodle6.svg') }}"
+                        class="h-14 position-absolute d-none d-lg-block" data-delay="1800"
+                        style="top: -20%; left: -25%" alt="">
                     <h2 class="display-3 mb-4">Manage all your bills, accounts & budgets in <span
                             class="text-gradient gradient-7">one place.</span></h2>
                     <p class="lead fs-24 lh-sm mb-7">Sandbox is available to download from both App Store and
                         Google Play Store.</p>
                     <div class="d-flex justify-content-center justify-content-lg-start">
-                        <span><a href="#" class="me-2"><img src="./assets/img/photos/button-appstore.svg"
-                                    class="h-11 rounded-xl" alt=""></a></span>
-                        <span><a href="#"><img src="./assets/img/photos/button-google-play.svg"
+                        <span>
+                            <a href="#" class="me-2">
+                                <img src="./assets/images/photos/button-appstore.svg" class="h-11 rounded-xl"
+                                    alt=""></a></span>
+                        <span><a href="#"><img src="./assets/images/photos/button-google-play.svg"
                                     class="h-11 rounded-xl" alt=""></a></span>
                     </div>
                 </div>
                 <!-- /column -->
                 <div class="col-lg-6 ms-auto mt-lg-n15 mt-xl-n20">
-                    <figure><img src="./assets/img/photos/devices6.png"
-                            srcset="./assets/img/photos/devices6@2x.png 2x" alt=""></figure>
+                    <figure><img src="{{ asset('assets/images/devices6.png') }}" alt="image"></figure>
                 </div>
                 <!-- /column -->
             </div>