@extends('frontend::layouts.master')

@section('content')

    <div class="container mx-auto px-4 py-8">
        <!-- Typography -->
        <section class="mb-8">
            <h1 class="text-4xl font-bold mb-4 text-primary">Typography Examples</h1>
            <h2 class="text-3xl font-semibold mb-2">This is a heading 2</h2>
            <h3 class="text-2xl font-medium mb-2">This is a heading 3</h3>
            <p class="text-base mb-2">This is a normal paragraph with <span class="font-bold">bold text</span> and <span class="italic">italic text</span>.</p>
            <p class="text-sm text-gray-600 mb-4">This is smaller text in gray color.</p>
        </section>
        <div class="card sm:max-w-sm">
            <div class="card-body">
              <h5 class="card-title mb-2.5">Welcome to Our Service</h5>
              <p class="mb-4">Discover the features and benefits that our service offers. Enhance your experience with our user-friendly platform designed to meet all your needs.</p>
              <div class="card-actions">
                <button class="btn btn-primary">Learn More</button>
                <button class="btn btn-secondary">Learn More</button>
                <button class="btn bg-third text-white">Learn More</button>
              </div>
            </div>
          </div>
        <!-- Buttons -->
        <section class="mb-8">
            <h2 class="text-2xl font-semibold mb-4">Button Examples</h2>
            <div class="flex flex-wrap gap-2 mb-4">
                <button class="btn btn-primary">Primary Button</button>
                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Tailwind Button</button>
                <button class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-lg">Success</button>
                <button class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-lg">Danger</button>
                <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 py-2 px-4 rounded-lg">Secondary</button>
            </div>
        </section>

        <!-- Cards -->
        <section class="mb-8">
            <h2 class="text-2xl font-semibold mb-4">Card Examples</h2>
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="bg-white p-4 rounded-lg shadow">
                    <h3 class="font-bold mb-2">Card Title</h3>
                    <p class="text-gray-700">This is a simple card with some content.</p>
                </div>
                <div class="bg-white p-4 rounded-lg shadow">
                    <h3 class="font-bold mb-2">Card with Image</h3>
                    <div class="bg-gray-300 h-32 mb-2 rounded"></div>
                    <p class="text-gray-700">Card with an image placeholder.</p>
                </div>
                <div class="bg-blue-100 p-4 rounded-lg shadow">
                    <h3 class="font-bold text-blue-800 mb-2">Colored Card</h3>
                    <p class="text-blue-700">A card with background color.</p>
                </div>
            </div>
        </section>

        <!-- Form Elements -->
        <section class="mb-8">
            <h2 class="text-2xl font-semibold mb-4">Form Elements</h2>
            <form class="max-w-md">
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="username">Username</label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Username">
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2" for="email">Email</label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="email" type="email" placeholder="Email">
                </div>
                <div class="mb-4">
                    <label class="block text-gray-700 text-sm font-bold mb-2">Options</label>
                    <div class="mt-2">
                        <label class="inline-flex items-center">
                            <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600">
                            <span class="ml-2 text-gray-700">Option 1</span>
                        </label>
                        <label class="inline-flex items-center ml-6">
                            <input type="checkbox" class="form-checkbox h-5 w-5 text-blue-600">
                            <span class="ml-2 text-gray-700">Option 2</span>
                        </label>
                    </div>
                </div>
                <div class="mb-4">
                    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">Submit</button>
                </div>
            </form>
        </section>

        <!-- Alerts -->
        <section class="mb-8">
            <h2 class="text-2xl font-semibold mb-4">Alert Examples</h2>
            <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 mb-4" role="alert">
                <p class="font-bold">Success</p>
                <p>Your changes have been saved successfully.</p>
            </div>
            <div class="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mb-4" role="alert">
                <p class="font-bold">Warning</p>
                <p>Please review your information before continuing.</p>
            </div>
            <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4" role="alert">
                <p class="font-bold">Error</p>
                <p>There was a problem with your submission.</p>
            </div>
        </section>

        <!-- Tables -->
        <section class="mb-8">
            <h2 class="text-2xl font-semibold mb-4">Table Example</h2>
            <div class="overflow-x-auto">
                <table class="min-w-full bg-white">
                    <thead>
                        <tr>
                            <th class="py-2 px-4 border-b border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Name</th>
                            <th class="py-2 px-4 border-b border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Email</th>
                            <th class="py-2 px-4 border-b border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">Role</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="py-2 px-4 border-b border-gray-200">John Doe</td>
                            <td class="py-2 px-4 border-b border-gray-200">john@example.com</td>
                            <td class="py-2 px-4 border-b border-gray-200">Admin</td>
                        </tr>
                        <tr class="bg-gray-50">
                            <td class="py-2 px-4 border-b border-gray-200">Jane Smith</td>
                            <td class="py-2 px-4 border-b border-gray-200">jane@example.com</td>
                            <td class="py-2 px-4 border-b border-gray-200">User</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </section>

    </div>
@endsection