import { Head } from '@inertiajs/react';
import Guest from '@/Layouts/GuestLayout';
import { Search } from 'react-feather';

export default function Welcome() {
    return (
        <>
            <Head title="Welcome" />

            <div id="LandingPage">
                <Guest>
                    <div id="Home" className="custom-font px-6">
                        <div id="welcome" className="hero min-h-screen bg-cover"
                            style={{backgroundImage: 'url(assets/images/img-banner.png)'}}>
                            
                            <div id="banner-content" className="hero-content flex flex-col text-center">
                                <div id="logos" className="flex">
                                    <img src="assets/images/logo-company.png" alt="DOST Logo" />
                                    <img src="assets/images/logo-site.png" alt="CodeHub Logo" />
                                </div>

                                <div id="content" className="my-12">
                                    <h1 className="font-black text-black text-6xl leading-10 my-4">Project CodeHub</h1>
                                    <p className="font-semibold text-black text-lg leading-7">The instructions and source codes repository for the DOST - IT Department</p>
                                    <div id="gen-search" className="join my-4">
                                        <input type="text"
                                            name="txtSearch"
                                            id="txtSearch"
                                            placeholder="Search for pages or instructions..."
                                            className="input rounded-l-full join-item bg-primary-background w-80 border border-primary-hover focus:outline-none focus:border-4 focus:border-primary-hover focus:bg-neutral-10"
                                        />
                                        <button className="btn transition join-item rounded-r-full bg-primary-main border border-primary-hover hover:bg-primary-hover hover:border-primary-hover active:bg-primary-pressed active:border-primary-hover">
                                            <Search stroke="#FFFFFF" />
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </Guest>
            </div>
        </>
    )
}