107 lines
		
	
	
		
			4.8 KiB
		
	
	
	
		
			PHP
		
	
	
	
			
		
		
	
	
			107 lines
		
	
	
		
			4.8 KiB
		
	
	
	
		
			PHP
		
	
	
	
@extends('layout')
 | 
						|
 | 
						|
@section('content')
 | 
						|
<!--
 | 
						|
  Heads up! 👋
 | 
						|
 | 
						|
  Plugins:
 | 
						|
    - @tailwindcss/forms
 | 
						|
-->
 | 
						|
 | 
						|
<div class="w-full max-w-6xl mx-auto px-4 md:px-6 py-24">
 | 
						|
    <div class="flex justify-center">
 | 
						|
        <div class="text-slate-600 [&>p]:my-6 [&>p:first-child]:mt-0 [&>p:last-child]:mb-0 [&_strong]:font-medium [&_strong]:text-slate-900 [&_a]:font-medium [&_a]:text-indigo-500 [&_a]:underline [&_a:hover]:no-underline [&_img]:rounded-xl [&_blockquote]:italic [&_blockquote]:before:block [&_blockquote]:before:w-[18px] [&_blockquote]:before:h-[17px] [&_blockquote]:before:bg-[url('./quotes.svg')] [&_blockquote]:before:bg-no-repeat [&_blockquote]:before:mb-2 [&_figcaption]:text-center [&_figcaption]:text-xs [&_figcaption]:italic [&_figcaption]:mt-3">
 | 
						|
            <header class="mb-4">
 | 
						|
                <h1 class="text-4xl font-extrabold text-slate-900">Contact Us</h1>
 | 
						|
            </header>
 | 
						|
            
 | 
						|
            <div class="flex flex-col md:flex-row gap-4">
 | 
						|
                <div class="mb-4 flex-1">
 | 
						|
                    <label
 | 
						|
                    for="UserFirstName"
 | 
						|
                    class="block overflow-hidden rounded-md border border-gray-200 px-3 py-2 shadow-sm focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600"
 | 
						|
                    >
 | 
						|
                        <span class="text-xs font-medium text-gray-700"> First Name </span>
 | 
						|
 | 
						|
                        <input
 | 
						|
                        type="text"
 | 
						|
                        id="UserFirstName"
 | 
						|
                        placeholder="Anthony"
 | 
						|
                        class="mt-1 w-full border-none p-0 focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm"
 | 
						|
                        />
 | 
						|
                    </label>  
 | 
						|
                </div>                
 | 
						|
                <div class="mb-4 flex-1">
 | 
						|
                    <label
 | 
						|
                    for="UserLastName"
 | 
						|
                    class="block overflow-hidden rounded-md border border-gray-200 px-3 py-2 shadow-sm focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600"
 | 
						|
                    >
 | 
						|
                        <span class="text-xs font-medium text-gray-700"> Last Name </span>
 | 
						|
 | 
						|
                        <input
 | 
						|
                        type="text"
 | 
						|
                        id="UserLastName"
 | 
						|
                        placeholder="Keats"
 | 
						|
                        class="mt-1 w-full border-none p-0 focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm"
 | 
						|
                        />
 | 
						|
                    </label>  
 | 
						|
                </div>
 | 
						|
            </div>
 | 
						|
 | 
						|
            <div class="mb-4">
 | 
						|
                <label
 | 
						|
                for="UserEmail"
 | 
						|
                class="block overflow-hidden rounded-md border border-gray-200 px-3 py-2 shadow-sm focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600"
 | 
						|
                >
 | 
						|
                    <span class="text-xs font-medium text-gray-700"> Email </span>
 | 
						|
 | 
						|
                    <input
 | 
						|
                    type="email"
 | 
						|
                    id="UserEmail"
 | 
						|
                    placeholder="anthony@rhcp.com"
 | 
						|
                    class="mt-1 w-full border-none p-0 focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm"
 | 
						|
                    />
 | 
						|
                </label>
 | 
						|
            </div>
 | 
						|
 | 
						|
            <div class="mb-4">
 | 
						|
                <label
 | 
						|
                for="UserPhone"
 | 
						|
                class="block overflow-hidden rounded-md border border-gray-200 px-3 py-2 shadow-sm focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600"
 | 
						|
                >
 | 
						|
                    <span class="text-xs font-medium text-gray-700"> Phone Number </span>
 | 
						|
 | 
						|
                    <input
 | 
						|
                    type="tel"
 | 
						|
                    id="phone"
 | 
						|
                    placeholder="281-330-8004"
 | 
						|
                    {{-- pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" --}}
 | 
						|
                    class="mt-1 w-full border-none p-0 focus:border-transparent focus:outline-none focus:ring-0 sm:text-sm"
 | 
						|
                    />
 | 
						|
                </label>
 | 
						|
            </div>
 | 
						|
 | 
						|
            <div class="mb-4">
 | 
						|
                <label
 | 
						|
                for="message"
 | 
						|
                class="block overflow-hidden rounded-md border border-gray-200 px-3 py-2 shadow-sm focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600"
 | 
						|
                >
 | 
						|
                    <span class="text-xs font-medium text-gray-700"> Message</span>
 | 
						|
                    <textarea class="w-full rounded-lg border-gray-200 p-1 text-sm" id="message" name="message" rows="8"></textarea>
 | 
						|
                </label>
 | 
						|
            </div>
 | 
						|
 | 
						|
            <div class="mb-4">
 | 
						|
                <button
 | 
						|
                    type="submit"
 | 
						|
                    class="inline-block w-full rounded-lg bg-black px-5 py-3 text-xs text-white sm:w-auto">
 | 
						|
                    Submit
 | 
						|
                </button>
 | 
						|
            </div>
 | 
						|
            
 | 
						|
        </div>
 | 
						|
    </div>
 | 
						|
</div>
 | 
						|
 | 
						|
 | 
						|
@endsection |