@page
@model IndexModel
@{
    ViewData["Title"] = "Notarize Documents Online";
    Layout = "_Blank";
}


    <header></header>
    <div class="container" style="max-width: 1000px;font-weight: bold;">
        <nav class="navbar navbar-expand-md bg-body py-3">
            <div class="container">
                <a class="navbar-brand d-flex align-items-center" href="#">
                    <span class="bs-icon-sm bs-icon-rounded d-flex justify-content-center align-items-center bs-icon" style="border-radius: 0px;">
                        <svg class="bi bi-pen-fill" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
                            <path d="m13.498.795.149-.149a1.207 1.207 0 1 1 1.707 1.708l-.149.148a1.5 1.5 0 0 1-.059 2.059L4.854 14.854a.5.5 0 0 1-.233.131l-4 1a.5.5 0 0 1-.606-.606l1-4a.5.5 0 0 1 .131-.232l9.642-9.642a.5.5 0 0 0-.642.056L6.854 4.854a.5.5 0 1 1-.708-.708L9.44.854A1.5 1.5 0 0 1 11.5.796a1.5 1.5 0 0 1 1.998-.001"></path>
                        </svg>
                    </span><span>eNotaryo PH</span>
                </a><button class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navcol-3"><span class="visually-hidden">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
                <div id="navcol-3" class="collapse navbar-collapse">
                    <ul class="navbar-nav mx-auto">
                        <li class="nav-item"><a class="nav-link active" href="/">Home</a></li>
                        <li class="nav-item"></li>
                        <li class="nav-item"><a class="nav-link" href="#HowItWorks">How it works</a></li>
                        <li class="nav-item"><a class="nav-link" href="#Contact">Contact</a></li>
                    </ul>
                    <a href="/login" class="btn btn-primary">Login</a>
                </div>
            </div>
        </nav>
        <div class="text-center">
            <div class="row text-center pt-4">
                <div class="col mx-auto col-md-8">
                    <h1 class="display-4 fw-bold mb-5"><strong><span style="color: rgb(18, 22, 67);">Notarize your documents from the </span></strong><span class="underline">comfort</span><strong><span style="color: rgb(18, 22, 67);"> of your home or office </span></strong></h1>
                    <div></div>
                    <p class="fs-5 text-muted mb-5">Subscribe to our newsletter to get the latest updates.</p>
                    <form class="d-flex justify-content-center flex-wrap">
                        <div class="shadow-lg mb-3"><input class="form-control" type="email" placeholder="Your Email" /></div>
                        <div class="shadow-lg mb-3"><button class="btn btn-primary disabled" type="button">Subscribe</button></div>
                    </form>
                </div>
                <div class="col col-12 col-lg-10 mx-auto">
                    <div class="text-center position-relative"><img class="img-fluid" src="images/landing_02.png" /></div>
                </div>
            </div>
        </div>
    </div>
    <section class="mt-5">
        <div class="container" style="max-width: 1000px;">
            <h3 id="HowItWorks" class="display-6 fw-bold text-center">How Does It Work?</h3>
            <div class="row">
                <div class="col d-flex">
                    <div class="card">
                        <div class="card-body m-4">
                            <div class="text-start py-3">
                                <svg class="bi bi-camera fs-1 text-start" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
                                    <path d="M15 12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1.172a3 3 0 0 0 2.12-.879l.83-.828A1 1 0 0 1 6.827 3h2.344a1 1 0 0 1 .707.293l.828.828A3 3 0 0 0 12.828 5H14a1 1 0 0 1 1 1zM2 4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1.172a2 2 0 0 1-1.414-.586l-.828-.828A2 2 0 0 0 9.172 2H6.828a2 2 0 0 0-1.414.586l-.828.828A2 2 0 0 1 3.172 4z"></path>
                                    <path d="M8 11a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5m0 1a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7M3 6.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0"></path>
                                </svg>
                            </div>
                            <h4 class="card-title">Take a Selfie</h4>
                            <h6 class="text-muted card-subtitle mb-2">Use your phone or web camera</h6>
                            <p class="card-text">Sit back and relax while our facial recognition system analyze your identification.</p><a class="card-link btn-sm" href="#">
                                Learn More
                                <svg class="bi bi-arrow-right" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
                                    <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col d-flex">
                    <div class="card">
                        <div class="card-body m-4">
                            <div class="text-start py-3">
                                <svg class="bi bi-cloud-upload fs-1 text-start" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
                                    <path fill-rule="evenodd" d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"></path>
                                    <path fill-rule="evenodd" d="M7.646 4.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V14.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708z"></path>
                                </svg>
                            </div>
                            <h4 class="card-title">Upload the document</h4>
                            <h6 class="text-muted card-subtitle mb-2">PDF and MS Word Documents</h6>
                            <p class="card-text">Simply upload your document and enter the necessary information and we will book an available notary public for you.</p><a class="card-link btn-sm" href="#">
                                Learn More
                                <svg class="bi bi-arrow-right" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
                                    <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col d-flex">
                    <div class="card">
                        <div class="card-body m-4">
                            <div class="text-start py-3">
                                <svg class="bi bi-camera-video fs-1 text-start" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
                                    <path fill-rule="evenodd" d="M0 5a2 2 0 0 1 2-2h7.5a2 2 0 0 1 1.983 1.738l3.11-1.382A1 1 0 0 1 16 4.269v7.462a1 1 0 0 1-1.406.913l-3.111-1.382A2 2 0 0 1 9.5 13H2a2 2 0 0 1-2-2zm11.5 5.175 3.5 1.556V4.269l-3.5 1.556zM2 4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h7.5a1 1 0 0 0 1-1V5a1 1 0 0 0-1-1z"></path>
                                </svg>
                            </div>
                            <h4 class="card-title">Video Conference</h4>
                            <h6 class="text-muted card-subtitle mb-2">Meet with Notary Public</h6>
                            <p class="card-text">The final step is to talk to our notary public team. Once payment has been settled, you can now download the notarized document.</p><a class="card-link btn-sm" href="#">
                                Learn More
                                <svg class="bi bi-arrow-right" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
                                    <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="mt-5">
        <div class="container" style="max-width: 1000px;">
            <h3 id="Contact" class="display-6 fw-bold text-center">Got Any Questions?</h3>
            <div class="row">
                <div class="col col-md-8 col-xl-6 mx-auto text-center">
                    <form class="p-3 p-xl-4">
                        <div class="mb-3"><input class="form-control shadow" type="text" placeholder="Name" /></div>
                        <div class="mb-3"><input class="form-control shadow" type="email" placeholder="Email" /></div>
                        <div class="mb-3"><textarea class="form-control shadow" placeholder="Message" rows="4"></textarea></div>
                        <div><button class="btn btn-primary d-block w-100 shadow-lg" type="button">Submit</button></div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <footer class="mt-5">
        <div class="container" style="max-width: 1000px;">
            <p class="text-center text-md-start">Copyright <span style="color: rgba(18, 22, 67, 0.75);">©</span> 2025 eNotaryoPH</p>
        </div>
    </footer>