@extends('website.layouts.main')

@section('meta_title', 'Design - KiyoHRMS')
@section('meta_description', 'Discover how KiyoHRMS is designed for clarity, speed, and an intuitive HR and payroll experience.')

@section('content')
<section class="section-space brand-gradient">
    <div class="container text-center">
        <h1 class="display-5 fw-bold mb-3">Designed for clarity and speed</h1>
        <p class="lead text-muted col-lg-8 mx-auto">KiyoHRMS is built with a clean, modern interface so HR teams and employees can complete everyday tasks without friction.</p>
    </div>
</section>

<section class="section-space">
    <div class="container">
        <div class="row g-4">
            <div class="col-md-4">@include('website.partials.feature-card', ['icon' => 'bi-layout-text-window', 'title' => 'Intuitive Layouts', 'description' => 'Dashboards, forms, and reports are organized around real HR workflows.', 'iconBackgroundClass' => 'bg-secondary-subtle', 'iconTextClass' => 'text-secondary', 'titleClass' => 'text-secondary', 'cardClass' => 'feature-card-thick-top accent-secondary'])</div>
            <div class="col-md-4">@include('website.partials.feature-card', ['icon' => 'bi-phone', 'title' => 'Mobile-first', 'description' => 'Employees can check attendance, apply leave, and view payslips on any device.', 'iconBackgroundClass' => 'bg-success-subtle', 'iconTextClass' => 'text-success', 'titleClass' => 'text-success', 'cardClass' => 'feature-card-thick-top accent-success'])</div>
            <div class="col-md-4">@include('website.partials.feature-card', ['icon' => 'bi-palette', 'title' => 'Consistent Branding', 'description' => 'A cohesive visual system that keeps navigation predictable across modules.', 'iconBackgroundClass' => 'bg-warning-subtle', 'iconTextClass' => 'text-warning', 'titleClass' => 'text-warning-emphasis', 'cardClass' => 'feature-card-thick-top accent-warning'])</div>
        </div>
    </div>
</section>

<section class="section-space soft-bg">
    <div class="container col-lg-9">
        <h2 class="fw-bold mb-4 section-title-underline">Our design principles</h2>
        <div class="row g-4">
            <div class="col-md-6"><div class="card-soft p-4 h-100"><h3 class="h5 fw-bold">Reduce cognitive load</h3><p class="text-muted mb-0">We surface only the information needed for each step—whether approving leave or running payroll.</p></div></div>
            <div class="col-md-6"><div class="card-soft p-4 h-100"><h3 class="h5 fw-bold">Accessible by default</h3><p class="text-muted mb-0">Readable typography, clear contrast, and keyboard-friendly controls help every user work confidently.</p></div></div>
            <div class="col-md-6"><div class="card-soft p-4 h-100"><h3 class="h5 fw-bold">Action-oriented screens</h3><p class="text-muted mb-0">Primary actions are always visible so admins spend less time hunting for buttons and menus.</p></div></div>
            <div class="col-md-6"><div class="card-soft p-4 h-100"><h3 class="h5 fw-bold">Continuous refinement</h3><p class="text-muted mb-0">We iterate based on customer feedback to keep the product simple as features grow.</p></div></div>
        </div>
    </div>
</section>

@include('website.partials.cta-banner', ['title' => 'See the design in action', 'subtitle' => 'Book a demo and explore how KiyoHRMS looks and feels for your team.'])
@endsection