@section('title',$title)
@section('description',$description)
@extends('layout.app')
@section('content')
<div class="dm-page-content dashboard-base">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="row">
                    <div class="col-md-9 offset-xl-1">
                        <div class="card card-md mb-30 shadow1">
                            <div class="card-header  border-bottom-0  p-sm-30">
                                <h5 class="fw-500 ">Theme colors</h5>
                            </div>
                            <div class="card-body pt-0 px-30 pb-35">
                                <div class="dm-button-list d-flex flex-wrap ">
                                    <div class="text-center">
                                        <button
                                            class="btn btn-primary btn-default btn-squared radius-xs fs-15 fw-400">Primary
                                        </button>
                                        <span class="fs-14 fw-400 color-dark">#5F63F2</span>
                                    </div>
                                    <div class="text-center">
                                        <button
                                            class="btn btn-secondary btn-default btn-squared radius-xs fs-15 fw-400">Secondary
                                        </button>
                                        <span class="fs-14 fw-400 color-dark">#FF69A5</span>
                                    </div>
                                    <div class="text-center">
                                        <button
                                            class="btn btn-success btn-default btn-squared radius-xs fs-15 fw-400">Success
                                        </button>
                                        <span class="fs-14 fw-400 color-dark">#20C997</span>
                                    </div>
                                    <div class="text-center">
                                        <button
                                            class="btn btn-info btn-default btn-squared radius-xs fs-15 fw-400 px-30">Info
                                        </button>
                                        <span class="fs-14 fw-400 color-dark">#2C99FF</span>
                                    </div>
                                    <div class="text-center">
                                        <button
                                            class="btn btn-warning btn-default btn-squared radius-xs fs-15 fw-400">Wraning
                                        </button>
                                        <span class="fs-14 fw-400 color-dark">#FA8B0C</span>
                                    </div>
                                    <div class="text-center">
                                        <button
                                            class="btn btn-danger btn-default btn-squared radius-xs fs-15 fw-400">Danger
                                        </button>
                                        <span class="fs-14 fw-400 color-dark">#FF4D4F</span>
                                    </div>
                                    <div class="text-center">
                                        <button
                                            class="btn btn-dark btn-default btn-squared radius-xs fs-15 fw-400 px-30">Dark
                                        </button>
                                        <span class="fs-14 fw-400 color-dark">#272B41</span>
                                    </div>
                                    <div class="text-center">
                                        <button
                                            class="btn btn-gray btn-default btn-squared radius-xs fs-15 fw-400 bg-gray color-white text-capitalize px-30">gray
                                        </button>
                                        <span class="fs-14 fw-400 color-dark">#5A5F7D</span>
                                    </div>
                                    <div class="text-center">
                                        <button
                                            class="btn btn-light btn-default btn-squared radius-xs fs-15 fw-400 bg-light text-white text-capitalize px-30">Light
                                        </button>
                                        <span class="fs-14 fw-400 color-dark">#272B41</span>
                                    </div>
                                    <div class="text-center">
                                        <button
                                            class="btn btn-lighten btn-default btn-squared radius-xs fs-15 fw-400 text-white text-capitalize">extra
                                            light
                                        </button>
                                        <span class="fs-14 fw-400 color-dark">#ADB4D2</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card  card-md mb-30 shadow1">
                            <div class="card-header  border-bottom-0  p-sm-30">
                                <h5 class="fw-500 ">Hover colors</h5>
                            </div>
                            <div class="card-body pt-0 px-30 pb-35">
                                <div class="dm-button-list d-flex flex-wrap ">
                                    <div class="text-center">
                                        <button
                                            class="btn btn-primary btn-default btn-squared radius-xs fs-15 fw-400">Primary
                                        </button>
                                        <span class="fs-14 fw-400 color-dark">#4347D9</span>
                                    </div>
                                    <div class="text-center">
                                        <button
                                            class="btn btn-secondary btn-default btn-squared radius-xs fs-15 fw-400">Secondary
                                        </button>
                                        <span class="fs-14 fw-400 color-dark">#E34A87</span>
                                    </div>
                                    <div class="text-center">
                                        <button
                                            class="btn btn-success btn-default btn-squared radius-xs fs-15 fw-400">Success
                                        </button>
                                        <span class="fs-14 fw-400 color-dark">#0CAB7C</span>
                                    </div>
                                    <div class="text-center">
                                        <button
                                            class="btn btn-info btn-default btn-squared radius-xs fs-15 fw-400 px-30">Info
                                        </button>
                                        <span class="fs-14 fw-400 color-dark">#0D79DF</span>
                                    </div>
                                    <div class="text-center">
                                        <button
                                            class="btn btn-warning btn-default btn-squared radius-xs fs-15 fw-400">Wraning
                                        </button>
                                        <span class="fs-14 fw-400 color-dark">#D47407</span>
                                    </div>
                                    <div class="text-center">
                                        <button
                                            class="btn btn-danger btn-default btn-squared radius-xs fs-15 fw-400">Danger
                                        </button>
                                        <span class="fs-14 fw-400 color-dark">#E30D0F</span>
                                    </div>
                                    <div class="text-center">
                                        <button
                                            class="btn btn-dark btn-default btn-squared radius-xs fs-15 fw-400 px-30">Dark
                                        </button>
                                        <span class="fs-14 fw-400 color-dark">#131623</span>
                                    </div>
                                    <div class="text-center">
                                        <button
                                            class="btn btn-gray btn-default btn-squared radius-xs fs-15 fw-400 bg-gray color-white text-capitalize px-30">gray
                                        </button>
                                        <span class="fs-14 fw-400 color-dark">#363A51</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card  card-md mb-30 shadow1">
                            <div class="card-header  border-bottom-0  p-sm-30">
                                <h5 class="fw-500 ">Gradient colors</h5>
                            </div>
                            <div class="card-body pt-0 px-30 pb-30">
                                <div class="d-flex flex-wrap m-n10 ">
                                    <div class="gradient-color-name gradient1 py-35 px-20 color-white radius-xl m-10 ">
                                        <span class="me-sm-40 me-0  fs-15">#5840FF</span>
                                        <span class="ms-40 fs-15">#00E4EC</span>
                                    </div>
                                </div>
                                <!-- ends: .dm-button-list" -->
                            </div>
                        </div>
                        <div class="card card-md mb-30 shadow1">
                            <div class="card-header  border-bottom-0  p-sm-30">
                                <h5 class="fw-500 ">border colors</h5>
                            </div>
                            <div class="card-body pt-0 px-30 pb-30">
                                <div class="d-flex flex-wrap m-n15 ">
                                    <div
                                        class="d-flex align-items-center justify-content-between py-15 px-20 border radius-xs m-15 ">
                                        <span class="fs-15 fw-400 color-gray me-sm-50 me-20">Border color 1</span>
                                        <span class="fs-14 fw-400 color-dark ms-sm-50 me-20">#F1F2F6</span>
                                    </div>
                                    <div
                                        class="d-flex align-item-center justify-content-between py-15 px-20 b-light radius-xs m-15 ">
                                        <span class="fs-15 fw-400 color-gray me-sm-50 me-20">Border color 2</span>
                                        <span class="fs-14 fw-400 color-dark ms-sm-50 me-20">#E3E6EF</span>
                                    </div>
                                    <div
                                        class="d-flex align-item-center justify-content-between py-15 px-20 b-deep radius-xs m-15">
                                        <span class="fs-15 fw-400 color-gray me-sm-50 me-20">Border color 3</span>
                                        <span class="fs-14 fw-400 color-dark ms-sm-50 me-20">#C6D0DC</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card card-md mb-30 shadow1">
                            <div class="card-header  border-bottom-0  p-sm-30">
                                <h5 class="fw-500 ">Background gray colors</h5>
                            </div>
                            <div class="card-body pt-0 px-30 pb-30">
                                <div class="d-flex flex-wrap m-n15 ">
                                    <div
                                        class="d-flex align-items-center justify-content-between py-15 px-20 bg-normal radius-xs m-15">
                                        <span class="fs-15 fw-400 color-gray me-sm-50 me-20 pe-sm-30">Bg color 1</span>
                                        <span class="fs-14 fw-400 color-dark ms-sm-50 me-20">#F8F9FB</span>
                                    </div>
                                    <div
                                        class="d-flex align-item-center justify-content-between py-15 px-20 bg-lighter radius-xs m-15">
                                        <span class="fs-15 fw-400 color-gray me-sm-50 me-20 pe-sm-30">Bg color 2</span>
                                        <span class="fs-14 fw-400 color-dark ms-sm-50 me-20">#F4F5F7</span>
                                    </div>
                                    <div
                                        class="d-flex align-item-center justify-content-between py-15 px-20 bg-deep radius-xs m-15">
                                        <span class="fs-15 fw-400 color-gray me-sm-50 me-20 pe-sm-30">Bg color 3</span>
                                        <span class="fs-14 fw-400 color-dark ms-sm-50 me-20">#EFF0F3</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card card-md mb-30 shadow1">
                            <div class="card-header  border-bottom-0  p-sm-30">
                                <h5 class="fw-500 ">butttons</h5>
                            </div>
                            <div class="card-body pt-0 px-30 pb-30">
                                <div class="dm-button-list d-flex flex-wrap align-items-end mb-45">
                                    <button class="btn btn-primary btn-xs btn-squared btn-shadow-primary">Extra small
                                    </button>
                                    <button class="btn btn-primary btn-sm btn-squared btn-shadow-primary">Small
                                    </button>
                                    <button class="btn btn-primary btn-default btn-squared btn-shadow-primary">Normal
                                    </button>
                                    <button class="btn btn-primary btn-lg btn-squared btn-shadow-primary">Large Button
                                    </button>
                                </div>
                                <div class="dm-button-list d-flex flex-wrap align-items-end mb-45">
                                    <button class="btn btn-xs btn-squared btn-outline-primary ">Extra small
                                    </button>
                                    <button class="btn btn-sm btn-squared btn-outline-primary ">Small
                                    </button>
                                    <button class="btn btn-default btn-squared btn-outline-primary ">Normal
                                    </button>
                                    <button class="btn btn-lg btn-squared btn-outline-primary ">Large Button
                                    </button>
                                </div>
                                <div class="dm-button-list d-flex flex-wrap align-items-end">
                                    <button class="btn btn-primary btn-xs btn-squared btn-transparent-primary ">Extra
                                        small
                                    </button>
                                    <button class="btn btn-primary btn-sm btn-squared btn-transparent-primary ">Small
                                    </button>
                                    <button
                                        class="btn btn-primary btn-default btn-squared btn-transparent-primary ">Normal
                                    </button>
                                    <button class="btn btn-primary btn-lg btn-squared btn-transparent-primary ">Large
                                        Button
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="card card-md mb-30 shadow1">
                            <div class="card-header  border-bottom-0  p-sm-30">
                                <h5 class="fw-500 ">Typography <small class="color-secondary fs-16 fw-500">Inter</small>
                                </h5>
                            </div>
                            <div class="card-body pt-0 px-30">
                                <div class="d-flex flex-wrap">
                                    <div class="table-responsive">
                                        <table class="table table-borderless mb-0 w-80">
                                            <tbody>
                                                <tr>
                                                    <th>
                                                        <div class="h1">h1. Default Heading</div>
                                                    </th>
                                                    <td class="type-info color-primary">Font Size - 30 px</td>
                                                    <td class="type-info color-secondary">Font weight - 600</td>
                                                    <td class="type-info color-success">Line height - 38 px</td>
                                                </tr>
                                                <tr>
                                                    <th>
                                                        <div class="h2">h2. Default Heading</div>
                                                    </th>
                                                    <td class="type-info color-primary">Font Size - 24 px</td>
                                                    <td class="type-info color-secondary">Font weight - 600</td>
                                                    <td class="type-info color-success">Line height - 30 px</td>
                                                </tr>
                                                <tr>
                                                    <th>
                                                        <div class="h3">h3. Default Heading</div>
                                                    </th>
                                                    <td class="type-info color-primary">Font Size - 22 px</td>
                                                    <td class="type-info color-secondary">Font weight - 600</td>
                                                    <td class="type-info color-success">Line height - 27 px</td>
                                                </tr>
                                                <tr>
                                                    <th>
                                                        <div class="h4">h4. Default Heading</div>
                                                    </th>
                                                    <td class="type-info color-primary">Font Size - 20 px</td>
                                                    <td class="type-info color-secondary">Font weight - 600</td>
                                                    <td class="type-info color-success">Line height - 24 px</td>
                                                </tr>
                                                <tr>
                                                    <th>
                                                        <div class="h5">h5. Default Heading</div>
                                                    </th>
                                                    <td class="type-info color-primary">Font Size - 18 px</td>
                                                    <td class="type-info color-secondary">Font weight - 600</td>
                                                    <td class="type-info color-success">Line height - 22 px</td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card card-md mb-30 shadow1">
                            <div class="card-header  border-bottom-0  p-sm-30">
                                <h5>Body Text Normal</h5>
                            </div>
                            <div class="card-body pt-0 px-30">
                                <div class="d-flex flex-wrap mb-2">
                                    <span class="text-normal color-primary">Font Size - 15px<span
                                            class="color-secondary  mx-15">Font weight - 400</span>
                                        <span class="color-success"> Line height - 26px</span></span>
                                </div>
                                <p class="text-normal">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
                                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
                                    voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
                                    gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor
                                    sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</p>
                            </div>
                            <div class="card-header  border-bottom-0  p-sm-30 mt-10">
                                <h5>Body Text small</h5>
                            </div>
                            <div class="card-body pt-0 px-30">
                                <div class="d-flex flex-wrap mb-2">
                                    <span class="text-normal color-primary">Font Size - 14px<span
                                            class="color-secondary  mx-15">Font weight - 400</span>
                                        <span class="color-success"> Line height - 24px</span></span>
                                </div>
                                <p class="text-small mb-0">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                                    diam
                                    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
                                    voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
                                    gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor
                                    sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection