Feature components

public/themes/bimbala/mix-manifest.json

@@ -1,4 +1,4 @@
 {
-    "/js/app.js": "/js/app.js?id=31044e78bdf2a1f38951",
-    "/css/app.css": "/css/app.css?id=2b056b57e1d0ed6163fc"
+    "/js/app.js": "/js/app.js?id=6c1269b007aff962e5d5",
+    "/css/app.css": "/css/app.css?id=eff9ac3448f41fb84260"
 }

resources/views/themes/bimbala/components/two-panel.blade.php

@@ -0,0 +1,20 @@
+@props(['title', 'subtitle', 'image', 'description'])
+
+<section class="py-16">
+    <div class="flex flex-col px-8 mx-auto space-y-12 max-w-7xl xl:px-12">
+        <div class="relative">
+            <h2 class="w-full text-3xl font-bold text-center sm:text-4xl md:text-5xl">{{ $title }}</h2>
+            <p class="w-full py-8 mx-auto -mt-2 text-lg text-center intro sm:max-w-3xl">{{ $subtitle }}</p>
+        </div>
+        <div class="flex flex-col mb-12 animated fadeIn sm:flex-row">
+            <div class="flex items-center mb-8 sm:w-1/2 md:w-6/12 sm:order-last">
+                <img class="rounded-lg" src="{{ asset($image) }}" loading="lazy" alt="Gathering your client feedback">
+            </div>
+            <div class="flex flex-col justify-center mt-5 mb-8 md:mt-0 sm:w-1/2 md:w-6/12 sm:pr-16">
+                <p class="mb-2 text-sm font-semibold leading-none text-purple-700 uppercase">Gather your feedback</p>
+                <h3 class="mt-2 text-2xl md:text-4xl">An easy way to collect and organize feedback</h3>
+                <p class="mt-5 text-lg text md:">{{ $description }}</p>
+            </div>
+        </div>
+    </div>
+</section>

resources/views/themes/bimbala/home.blade.php

@@ -187,8 +187,10 @@ class="p-3 md:p-6 w-full"
 </section>
 {{--End of Weekly mails --}}
 
+@component('theme::components.two-panel', ['title' => 'Welcome to Bimbala', 'subtitle' => 'Discover the power of feedback', 'image' => 'images/feedback.png', 'description' => 'Bimbala is an easy-to-use platform that allows you to collect and organize feedback from your clients. With Bimbala, you can gather valuable insights and make data-driven decisions to improve your products and services.'])
+@endcomponent
 {{-- Features with images --}}
-<section class="py-16">
+    <section class="py-16">
     <div class="flex flex-col px-8 mx-auto space-y-12 max-w-7xl xl:px-12">
         <div class="relative">
             <h2 class="w-full text-3xl font-bold text-center sm:text-4xl md:text-5xl"> Level Up Your Support</h2>
@@ -240,6 +242,7 @@ class="p-3 md:p-6 w-full"
         </div>
     </div>
 </section>
+
 {{-- End Features with images --}}
 {{-- Integrations --}}
 <section class="py-12 sm:py-16 text-gray-700">