@extends('layout')
@section('content')
<div class="instruction-page">
    <div class="container py-5 ">
        <h2 class="text-center">แนะนำการใช้งานระบบ</h2>
        <p class="text-center mb-5">โปรดเลือก Role ของคุณ</p>
        <div class="row g-5 justify-content-center">
            <div class="col-8 col-sm-6 col-lg-4">
                <a href="{{'instruction-detail'}}" class="hover-scale">
                    <div class="card-item">
                        <img class="img-fluid" src="{{asset('images/instruction-1.png')}}">
                        <h3>Teachers</h3>
                    </div>
                </a>
            </div>
            <div class="col-8 col-sm-6 col-lg-4">
                <a href="{{'instruction-detail'}}" class="hover-scale">
                    <div class="card-item">
                        <img class="img-fluid" src="{{asset('images/instruction-2.png')}}">
                        <h3>Student</h3>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>


@endsection