```vue
<script setup>
import { Head, useForm, Link } from '@inertiajs/vue3';
import AppLayout from '@/Layouts/AppLayout.vue';
import { ArrowLeft, Save, Image as ImageIcon } from 'lucide-vue-next';
import { ref } from 'vue';

import Button from '@/Components/Button.vue';
import TextInput from '@/Components/TextInput.vue';

defineOptions({ layout: AppLayout });

const form = useForm({
    foto: null,
    judul: '',
});

const fotoPreview = ref(null);

const handleFotoChange = (e) => {
    const file = e.target.files[0];

    if (file) {
        form.foto = file;
        fotoPreview.value = URL.createObjectURL(file);
    }
};

const submit = () => {
    form.post(route('hero.store'));
};
</script>

<template>

    <Head title="Tambah Banner Hero" />

    <div class="max-w-4xl mx-auto space-y-6">

        <!-- Header -->
        <div class="flex items-center justify-between
                   bg-white p-6 rounded-3xl
                   border border-gray-100 shadow-2xs">

            <div class="flex items-center gap-4">

                <Link :href="route('hero.index')" class="inline-flex items-center justify-center
                           w-10 h-10
                           bg-gray-50 hover:bg-gray-100
                           text-gray-600
                           rounded-2xl transition" title="Kembali">
                    <ArrowLeft :size="20" />
                </Link>

                <div>
                    <h1 class="text-lg font-bold text-gray-800">
                        Tambah Banner Hero
                    </h1>

                    <p class="text-xs text-gray-500 mt-0.5">
                        Unggah gambar banner utama baru.
                    </p>
                </div>

            </div>
        </div>

        <!-- Form -->
        <form @submit.prevent="submit" class="bg-white p-6 lg:p-8
                   rounded-3xl border border-gray-100
                   shadow-2xs space-y-6">

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

                <!-- Foto -->
                <div class="space-y-1.5 md:col-span-2">

                    <label class="block text-xs font-semibold text-gray-700">
                        Foto Banner
                        <span class="text-red-500">*</span>
                    </label>

                    <div class="flex items-center gap-6
                               p-4
                               bg-gray-50/70
                               border border-gray-100
                               rounded-2xl">

                        <!-- Preview -->
                        <div class="w-24 h-16
                                   bg-white
                                   rounded-xl
                                   border border-gray-200
                                   flex items-center justify-center
                                   overflow-hidden
                                   shrink-0
                                   shadow-2xs">

                            <img v-if="fotoPreview" :src="fotoPreview" alt="Preview Foto Banner"
                                class="w-full h-full object-cover" />

                            <ImageIcon v-else :size="24" class="text-gray-300" />

                        </div>

                        <!-- File -->
                        <div class="flex-1 space-y-1">

                            <input type="file" @change="handleFotoChange"
                                accept="image/jpeg,image/png,image/jpg,image/webp" class="w-full text-xs text-gray-500
                                       file:mr-4
                                       file:py-2
                                       file:px-4
                                       file:rounded-xl
                                       file:border-0
                                       file:text-xs
                                       file:font-semibold
                                       file:bg-red-50
                                       file:text-red-700
                                       hover:file:bg-red-100
                                       transition cursor-pointer" />

                            <p class="text-[10px] text-gray-400">
                                Format: JPEG, PNG, JPG, WEBP. Maksimal 2MB.
                            </p>

                        </div>

                    </div>

                    <p v-if="form.errors.foto" class="text-[10px] text-red-600">
                        {{ form.errors.foto }}
                    </p>

                </div>

                <!-- Judul -->
                <div class="space-y-1.5 md:col-span-2">

                    <label class="block text-xs font-semibold text-gray-700">
                        Judul Banner
                        <span class="text-[10px] font-normal text-gray-400">
                            (Opsional)
                        </span>
                    </label>

                    <TextInput v-model="form.judul" placeholder="Contoh: Selamat Datang di Website Resmi OSIS"
                        :error="form.errors.judul" />

                </div>

            </div>

            <!-- Footer -->
            <div class="pt-4
                       border-t border-gray-100
                       flex items-center justify-end gap-3">

                <Link :href="route('hero.index')">
                    <Button type="button" variant="secondary">
                        Batal
                    </Button>
                </Link>

                <Button type="submit" variant="primary" :disabled="form.processing">
                    <Save :size="16" class="mr-2" />

                    <span>
                        {{ form.processing
                            ? 'Menyimpan...'
                            : 'Simpan Banner'
                        }}
                    </span>
                </Button>

            </div>

        </form>

    </div>
</template>
```
