new-templane/resources/view/admin/pages/layouts/front_page.php

<!-- Front Page Layout Form -->
<div class="space-y-6">

    <!-- Hero Section -->
    <div class="bg-gray-50 rounded-lg p-4">
        <h4 class="text-md font-medium text-gray-800 mb-4">Hero Section</h4>
        <div class="space-y-4">
            <div>
                <label for="hero_title" class="block text-sm font-medium text-gray-700 mb-2">Hero Title</label>
                <input type="text" name="extra_fields[hero_title]" id="hero_title"
                       value="<?= htmlspecialchars($page['extra_fields']['hero_title'] ?? '') ?>"
                       class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                       placeholder="Welcome to Our Amazing Site">
            </div>

            <div>
                <label for="hero_subtitle" class="block text-sm font-medium text-gray-700 mb-2">Hero Subtitle</label>
                <textarea name="extra_fields[hero_subtitle]" id="hero_subtitle" rows="2"
                          class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                          placeholder="Discover amazing content and experiences..."><?= htmlspecialchars($page['extra_fields']['hero_subtitle'] ?? '') ?></textarea>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                <div>
                    <label for="hero_button_text" class="block text-sm font-medium text-gray-700 mb-2">Hero Button Text</label>
                    <input type="text" name="extra_fields[hero_button_text]" id="hero_button_text"
                           value="<?= htmlspecialchars($page['extra_fields']['hero_button_text'] ?? '') ?>"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                           placeholder="Get Started">
                </div>

                <div>
                    <label for="hero_button_url" class="block text-sm font-medium text-gray-700 mb-2">Hero Button URL</label>
                    <input type="text" name="extra_fields[hero_button_url]" id="hero_button_url"
                           value="<?= htmlspecialchars($page['extra_fields']['hero_button_url'] ?? '') ?>"
                           class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                           placeholder="/contact">
                </div>
            </div>
        </div>
    </div>

    <!-- Featured Sections -->
    <div class="bg-gray-50 rounded-lg p-4">
        <h4 class="text-md font-medium text-gray-800 mb-4">Featured Sections</h4>
        <div class="space-y-4">
            <div>
                <label for="featured_title" class="block text-sm font-medium text-gray-700 mb-2">Featured Section Title</label>
                <input type="text" name="extra_fields[featured_title]" id="featured_title"
                       value="<?= htmlspecialchars($page['extra_fields']['featured_title'] ?? '') ?>"
                       class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                       placeholder="Why Choose Us">
            </div>

            <div>
                <label for="featured_content" class="block text-sm font-medium text-gray-700 mb-2">Featured Content</label>
                <textarea name="extra_fields[featured_content]" id="featured_content" rows="6"
                          class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                          placeholder="Describe your featured content..."><?= htmlspecialchars($page['extra_fields']['featured_content'] ?? '') ?></textarea>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div>
        <label for="content" class="block text-sm font-medium text-gray-700 mb-2">Main Page Content</label>
        <textarea name="content" id="content" rows="8"
                  class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                  placeholder="Enter main content for the homepage..."><?= htmlspecialchars($page['content'] ?? '') ?></textarea>
    </div>

    <!-- SEO Settings for Homepage -->
    <div class="bg-gray-50 rounded-lg p-4">
        <h4 class="text-md font-medium text-gray-800 mb-4">SEO Settings</h4>
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
            <div>
                <label for="meta_description" class="block text-sm font-medium text-gray-700 mb-2">Meta Description</label>
                <textarea name="extra_fields[meta_description]" id="meta_description" rows="3"
                          class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                          placeholder="Homepage description for search engines..."><?= htmlspecialchars($page['extra_fields']['meta_description'] ?? '') ?></textarea>
            </div>

            <div>
                <label for="og_image" class="block text-sm font-medium text-gray-700 mb-2">Social Share Image URL</label>
                <input type="text" name="extra_fields[og_image]" id="og_image"
                       value="<?= htmlspecialchars($page['extra_fields']['og_image'] ?? '') ?>"
                       class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                       placeholder="/uploads/homepage-share.jpg">
            </div>
        </div>
    </div>
</div>