feat(landing page): add get in touch section

resources/views/components/button.blade.php

@@ -0,0 +1,11 @@
+@props(['variant' => ''])
+@php
+$variants = [
+    'neutral' => 'bg-primary-600 text-white'
+];
+
+$variantClass = $variants[$variant] ?? '';
+@endphp
+<button {{$attributes->merge(['class' => "px-4 py-2 rounded-lg font-medium hover:opacity-80 $variantClass"])}}>
+    {{$slot}}
+</button>

resources/views/components/get-in-touch.blade.php

@@ -0,0 +1,65 @@
+<section class="wrapper mb-15">
+    <h2 class="mt-15">Get In Touch</h2>
+    <p class="text-accent-600 text-center mt-3 mb-10">
+        Have questions? We'd love it hear from you. Send us a message and we'll respond <br/>
+        as soon as possible.
+    </p>
+
+    <section class="grid grid-cols-1 md:grid-cols-2 gap-8">
+        <!-- left section, contact form -->
+        <x-card class="bg-[#F9FAFB]! shadow-none!">
+            <form action="" class=" flex flex-col space-y-6">
+
+                <x-input label="Name" name="name" placeholder="Your name"/>
+                <x-input label="Email" name="email" placeholder="your.email@example.com" type="email"/>
+                <x-textarea label="Message" name="message" placeholder="Tell us how we can help..."/>
+                <x-button type="submit" variant="neutral">Send Message</x-button>
+            </form>
+        </x-card>
+
+        <!-- right section, contact details-->
+        <div class="mt-2 flex flex-col space-y-6">
+            <h3 class="text-primary-600 text-xl font-bold">Contact Information</h3>
+            <p class="text-accent-600">
+                Reach out to us through any of these channels. We're here to help <br/>
+                you make the most of the DealHub.
+            </p>
+            <div class="flex flex-col space-y-6">
+                <div class="flex flex-col space-y-6">
+                    <div class="flex space-x-6">
+                        <div class="p-3 rounded-lg bg-blue-100 text-blue-700 h-fit">
+                            <x-heroicon-o-envelope class="w-6"/>
+                        </div>
+                        <div class="">
+                            <h4 class="font-bold text-sm">Email</h4>
+                            <p class="text-accent-600 mt-2">support@dealhub.com</p>
+                        </div>
+                    </div>
+
+                    <div class="flex space-x-6">
+                        <div class="p-3 rounded-lg bg-[#F0EBFF] text-[#9470F9] h-fit">
+                            <x-heroicon-o-phone class="w-6"/>
+                        </div>
+                        <div class="">
+                            <h4 class="font-bold text-sm">Phone</h4>
+                            <p class="text-accent-600 mt-2">+1 (555) 123-4567</p>
+                        </div>
+                    </div>
+
+                    <div class="flex space-x-6">
+                        <div class="p-3 rounded-lg bg-[#F9EBF3] text-[#DB5A84] h-fit">
+                            <x-heroicon-o-map-pin class="w-6"/>
+                        </div>
+                        <div class="">
+                            <h4 class="font-bold text-sm">Email</h4>
+                            <p class="text-accent-600 mt-2">
+                                124, Business St, Suite 700 <br />
+                                San Francisco, CA 907612
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</section>

resources/views/components/input.blade.php

@@ -0,0 +1,10 @@
+@props(['label' => '', 'name' => '', 'placeholder' => '', 'type' => 'text'])
+@if($label !== '')
+    <div class="flex flex-col space-y-2">
+
+        <label class="text-sm font-bold" for="{{$name}}">{{$label}}</label>
+        <input class="bg-[#F3F3F5] py-2 px-4 rounded-lg" type="{{$type}}" placeholder="{{$placeholder}}"
+               name="{{$name}}">
+
+    </div>
+@endif

resources/views/components/textarea.blade.php

@@ -0,0 +1,9 @@
+@props(['label' => '', 'name' => '', 'placeholder' => ''])
+@if($label !== '')
+    <div class="flex flex-col space-y-2">
+
+        <label class="text-sm font-bold" for="{{$name}}">{{$label}}</label>
+        <textarea class="bg-[#F3F3F5] py-2 px-4 rounded-lg"
+               name="{{$name}}" placeholder="{{$placeholder}}"></textarea>
+    </div>
+@endif

resources/views/home.blade.php

@@ -3,4 +3,5 @@
     <x-hero />
     <x-why-dealhub />
     <x-how-it-works />
+    <x-get-in-touch />
 </x-layout>