{{# Sites Free (Template Site / Free Hotel Website) Page Template #}}

{{# Section 1: Hero — full-width parallax #}}
<section class="hero-fullscreen relative -mt-6 overflow-hidden" style="background-image: url('/assets/articles/uploads/2021/09/pic_paralax_2.jpg'); background-position: center center; background-repeat: no-repeat; background-size: cover; transform: translate3d(0px, 0px, 0px);">
    <div class="absolute inset-0 bg-[#3b3663]/35"></div>
    <div class="hero-dots relative z-10 px-6 lg:px-[90px] pt-32 md:pt-36 pb-16 md:pb-20">
        <div class="max-w-4xl mx-auto text-center text-white">
            <h1 class="font-nunito text-3xl md:text-4xl lg:text-5xl font-bold mb-4 uppercase" data-aos="fade-down">{{ trans:messages.sf_hero_title }}</h1>
            <p class="text-lg text-white/80 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="150">{{ trans:messages.sf_hero_subtitle }}</p>
        </div>
    </div>
</section>

{{# Section 2: Intro — image left, prose right #}}
<section class="py-16 full-bleed bg-white">
    <div class="max-w-6xl mx-auto">
        <div class="flex flex-col md:flex-row items-start gap-10 lg:gap-16">
            <div class="md:w-1/2" data-aos="fade-right">
                <img src="/assets/articles/uploads/2021/10/home_img-03.png" alt="{{ trans:messages.sf_intro_title }}" class="w-full max-w-lg mx-auto float-bob sticky top-24">
            </div>
            <div class="md:w-1/2" data-aos="fade-left">
                <h2 class="font-nunito text-2xl md:text-3xl font-bold text-[#252a3f] mb-6 title-underline">
                    {{ trans:messages.sf_intro_title }}
                </h2>
                <div class="text-[#696687] leading-relaxed space-y-4 prose prose-p:my-0 max-w-none">
                    {{ trans:messages.sf_intro_body }}
                </div>
            </div>
        </div>
    </div>
</section>

{{# Section 3: PMS hotel system — prose left, image right #}}
<section class="py-16 full-bleed bg-white">
    <div class="max-w-6xl mx-auto">
        <div class="flex flex-col md:flex-row items-start gap-10 lg:gap-16">
            <div class="md:w-1/2" data-aos="fade-right">
                <h2 class="font-nunito text-2xl md:text-3xl font-bold text-[#252a3f] mb-6 title-underline">
                    {{ trans:messages.sf_admin_title }}
                </h2>
                <div class="text-[#696687] leading-relaxed space-y-4 prose prose-p:my-0 max-w-none">
                    {{ trans:messages.sf_admin_body }}
                </div>
            </div>
            <div class="md:w-1/2" data-aos="fade-left">
                <img src="/assets/articles/uploads/2021/10/home_img-01.png" alt="{{ trans:messages.sf_admin_title }}" class="w-full max-w-lg mx-auto float-bob sticky top-24">
            </div>
        </div>
    </div>
</section>

{{# Section 4: What you'll receive — numbered list left, image right #}}
<section class="py-16 full-bleed bg-[#f7f8fa]">
    <div class="max-w-6xl mx-auto">
        <div class="flex flex-col md:flex-row items-center gap-10 lg:gap-16">
            <div class="md:w-1/2" data-aos="fade-right">
                <h2 class="font-nunito text-2xl md:text-3xl font-bold text-[#252a3f] mb-6 title-underline">
                    {{ trans:messages.sf_received_title }}
                </h2>
                <ol class="space-y-3 list-none counter-reset-list">
                    <li class="flex items-start gap-3"><span class="w-7 h-7 rounded-full bg-[#ffc70a] text-[#3b3663] font-bold text-sm flex items-center justify-center shrink-0">1</span><span class="text-[#696687] leading-relaxed pt-0.5">{{ trans:messages.sf_received_1 }}</span></li>
                    <li class="flex items-start gap-3"><span class="w-7 h-7 rounded-full bg-[#ffc70a] text-[#3b3663] font-bold text-sm flex items-center justify-center shrink-0">2</span><span class="text-[#696687] leading-relaxed pt-0.5">{{ trans:messages.sf_received_2 }}</span></li>
                    <li class="flex items-start gap-3"><span class="w-7 h-7 rounded-full bg-[#ffc70a] text-[#3b3663] font-bold text-sm flex items-center justify-center shrink-0">3</span><span class="text-[#696687] leading-relaxed pt-0.5">{{ trans:messages.sf_received_3 }}</span></li>
                    <li class="flex items-start gap-3"><span class="w-7 h-7 rounded-full bg-[#ffc70a] text-[#3b3663] font-bold text-sm flex items-center justify-center shrink-0">4</span><span class="text-[#696687] leading-relaxed pt-0.5">{{ trans:messages.sf_received_4 }}</span></li>
                    <li class="flex items-start gap-3"><span class="w-7 h-7 rounded-full bg-[#ffc70a] text-[#3b3663] font-bold text-sm flex items-center justify-center shrink-0">5</span><span class="text-[#696687] leading-relaxed pt-0.5">{{ trans:messages.sf_received_5 }}</span></li>
                    <li class="flex items-start gap-3"><span class="w-7 h-7 rounded-full bg-[#ffc70a] text-[#3b3663] font-bold text-sm flex items-center justify-center shrink-0">6</span><span class="text-[#696687] leading-relaxed pt-0.5">{{ trans:messages.sf_received_6 }}</span></li>
                    <li class="flex items-start gap-3"><span class="w-7 h-7 rounded-full bg-[#ffc70a] text-[#3b3663] font-bold text-sm flex items-center justify-center shrink-0">7</span><span class="text-[#696687] leading-relaxed pt-0.5">{{ trans:messages.sf_received_7 }}</span></li>
                    <li class="flex items-start gap-3"><span class="w-7 h-7 rounded-full bg-[#ffc70a] text-[#3b3663] font-bold text-sm flex items-center justify-center shrink-0">8</span><span class="text-[#696687] leading-relaxed pt-0.5">{{ trans:messages.sf_received_8 }}</span></li>
                </ol>
            </div>
            <div class="md:w-1/2" data-aos="fade-left">
                <img src="/assets/articles/uploads/2021/10/hotelzmeng5.png" alt="{{ trans:messages.sf_received_title }}" class="w-full max-w-lg mx-auto float-bob rounded-lg shadow-lg">
            </div>
        </div>
    </div>
</section>

{{# Section 5: Your new website will — image left, checklist right #}}
<section class="py-16 full-bleed bg-white">
    <div class="max-w-6xl mx-auto">
        <div class="flex flex-col md:flex-row items-center gap-10 lg:gap-16">
            <div class="md:w-1/2" data-aos="fade-right">
                <img src="/assets/articles/uploads/2021/10/hotelzmeng3.png" alt="{{ trans:messages.sf_yoursite_title }}" class="w-full max-w-lg mx-auto float-bob rounded-lg shadow-lg">
            </div>
            <div class="md:w-1/2" data-aos="fade-left">
                <h2 class="font-nunito text-2xl md:text-3xl font-bold text-[#252a3f] mb-6 title-underline">
                    {{ trans:messages.sf_yoursite_title }}
                </h2>
                <ul class="space-y-3">
                    <li class="flex items-start gap-3"><i class="fa-solid fa-check text-[#ffc70a] mt-1 shrink-0"></i><span class="text-[#696687] leading-relaxed">{{ trans:messages.sf_yoursite_1 }}</span></li>
                    <li class="flex items-start gap-3"><i class="fa-solid fa-check text-[#ffc70a] mt-1 shrink-0"></i><span class="text-[#696687] leading-relaxed">{{ trans:messages.sf_yoursite_2 }}</span></li>
                    <li class="flex items-start gap-3"><i class="fa-solid fa-check text-[#ffc70a] mt-1 shrink-0"></i><span class="text-[#696687] leading-relaxed">{{ trans:messages.sf_yoursite_3 }}</span></li>
                    <li class="flex items-start gap-3"><i class="fa-solid fa-check text-[#ffc70a] mt-1 shrink-0"></i><span class="text-[#696687] leading-relaxed">{{ trans:messages.sf_yoursite_4 }}</span></li>
                    <li class="flex items-start gap-3"><i class="fa-solid fa-check text-[#ffc70a] mt-1 shrink-0"></i><span class="text-[#696687] leading-relaxed">{{ trans:messages.sf_yoursite_5 }}</span></li>
                    <li class="flex items-start gap-3"><i class="fa-solid fa-check text-[#ffc70a] mt-1 shrink-0"></i><span class="text-[#696687] leading-relaxed">{{ trans:messages.sf_yoursite_6 }}</span></li>
                </ul>
            </div>
        </div>
    </div>
</section>

{{# Section 6: Order / Contact — text left, form right #}}
<section class="py-16 full-bleed bg-white">
    <div class="max-w-6xl mx-auto">
        <div class="flex flex-col md:flex-row items-start gap-10 lg:gap-16">
            <div class="md:w-1/2" data-aos="fade-right">
                <h3 class="font-nunito text-xl md:text-2xl font-bold text-[#252a3f] mb-4">{{ trans:messages.sf_order_title }}</h3>
                <p class="text-[#696687] leading-relaxed mb-6">{{ trans:messages.sf_order_body }}</p>
                <p class="text-sm text-[#696687]">
                    <a href="https://fl-brief.otelms.com/free-{current_locale}/" target="_blank" rel="noopener" class="text-[#6254e7] hover:underline font-semibold">
                        {{ trans:messages.sf_brief_link }} <i class="fa-solid fa-arrow-up-right-from-square text-xs ml-1"></i>
                    </a>
                </p>
            </div>
            <div class="md:w-1/2" data-aos="fade-left">
                <div class="bg-[#f7f8fa] rounded-2xl p-8">
                    <h3 class="font-nunito text-xl font-bold text-[#252a3f] mb-6">{{ trans:messages.sf_form_title }}</h3>
                    {{ form:website_order attr:data-recaptcha="true" attr:data-recaptcha-action="website_order" }}
                        {{ if success }}
                        <div class="p-4 bg-green-50 text-green-700 rounded-lg text-center">
                            {{ trans:messages.sf_form_success }}
                        </div>
                        {{ else }}
                        <div class="space-y-4">
                            <div>
                                <input type="text" name="name" required value="{{ old:name }}" placeholder="{{ trans:messages.wd_ph_name }}" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-[#ffc70a] focus:ring-1 focus:ring-[#ffc70a] outline-none transition-colors">
                                {{ if errors:name }}<p class="text-red-500 text-sm mt-1">{{ errors:name }}</p>{{ /if }}
                            </div>
                            <div>
                                <input type="email" name="email" required value="{{ old:email }}" placeholder="{{ trans:messages.wd_ph_email }}" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-[#ffc70a] focus:ring-1 focus:ring-[#ffc70a] outline-none transition-colors">
                                {{ if errors:email }}<p class="text-red-500 text-sm mt-1">{{ errors:email }}</p>{{ /if }}
                            </div>
                            <div>
                                <input type="tel" name="phone" required value="{{ old:phone }}" placeholder="{{ trans:messages.wd_ph_phone }}" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-[#ffc70a] focus:ring-1 focus:ring-[#ffc70a] outline-none transition-colors">
                                {{ if errors:phone }}<p class="text-red-500 text-sm mt-1">{{ errors:phone }}</p>{{ /if }}
                            </div>
                            <div>
                                <input type="text" name="hotel_name" required value="{{ old:hotel_name }}" placeholder="{{ trans:messages.wd_ph_hotel }}" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-[#ffc70a] focus:ring-1 focus:ring-[#ffc70a] outline-none transition-colors">
                                {{ if errors:hotel_name }}<p class="text-red-500 text-sm mt-1">{{ errors:hotel_name }}</p>{{ /if }}
                            </div>
                            <div>
                                <input type="text" name="otelms_id" value="{{ old:otelms_id }}" placeholder="{{ trans:messages.wd_ph_otelms_id }}" class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-[#ffc70a] focus:ring-1 focus:ring-[#ffc70a] outline-none transition-colors">
                            </div>
                            <div>
                                <select name="service" required class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-[#ffc70a] focus:ring-1 focus:ring-[#ffc70a] outline-none transition-colors text-[#696687]">
                                    <option value="" disabled {{ if !old:service }}selected{{ /if }}>{{ trans:messages.wd_ph_service }}</option>
                                    <option value="template" {{ if old:service == 'template' }}selected{{ /if }}>{{ trans:messages.wd_service_template }}</option>
                                    <option value="development" {{ if old:service == 'development' }}selected{{ /if }}>{{ trans:messages.wd_service_development }}</option>
                                    <option value="premium" {{ if old:service == 'premium' }}selected{{ /if }}>{{ trans:messages.wd_service_premium }}</option>
                                </select>
                                {{ if errors:service }}<p class="text-red-500 text-sm mt-1">{{ errors:service }}</p>{{ /if }}
                            </div>
                            <button type="submit" class="w-full px-6 py-3 text-sm font-bold uppercase tracking-wider rounded bg-[#ffc70a] text-[#3b3663] hover:bg-[#ffa04d] transition-colors">{{ trans:messages.send }}</button>
                            {{ if errors:captcha }}
                            <div class="p-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm text-center">
                                {{ errors:captcha }}
                            </div>
                            {{ /if }}
                        </div>
                        {{ /if }}
                    {{ /form:website_order }}
                </div>
            </div>
        </div>
    </div>
</section>

{{# Section 7: CTA banner #}}
<section class="hero-fullscreen relative overflow-hidden"
         style="background-image: url('/assets/articles/uploads/2021/09/pic_paralax_2.jpg'); background-position: center center; background-repeat: no-repeat; background-size: cover;">
    <div class="absolute inset-0 bg-[#3b3663]/35"></div>
    <div class="relative z-10 px-6 lg:px-[90px] py-20">
        <div class="max-w-3xl mx-auto text-center" data-aos="fade-up">
            <h2 class="font-nunito text-2xl md:text-3xl font-bold text-white mb-4 uppercase">{{ trans:messages.sf_cta_title }}</h2>
            <p class="text-white/80 mb-8 leading-relaxed">{{ trans:messages.sf_cta_subtitle }}</p>
            <a href="{{ locale_path }}/registration"
               class="btn-glow inline-block px-10 py-3.5 text-sm font-bold uppercase tracking-wider rounded bg-[#ffc70a] text-[#3b3663] hover:bg-[#ffa04d] transition-colors shadow-lg">
                {{ trans:messages.sf_cta_button }}
            </a>
        </div>
    </div>
</section>