{{# Front Desk (PMS) Product 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.fd_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.fd_hero_subtitle }}</p>
        </div>
    </div>
</section>

{{# Section 2: Intro — Property management systems for hotels (PMS) #}}
<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/09/website_traffic.png" alt="PMS system" class="w-full max-w-lg mx-auto float-bob">
            </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.fd_intro_title }}
                </h2>
                <p class="text-[#696687] mb-4 leading-relaxed">{{ trans:messages.fd_intro_p1 }}</p>
                <p class="text-[#696687] leading-relaxed">{{ trans:messages.fd_intro_p2 }}</p>
            </div>
        </div>
    </div>
</section>

{{# Section 3: PMS hotel system — text + bullet list 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-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.fd_pms_title }}
                </h2>
                <p class="text-[#696687] mb-6 leading-relaxed">{{ trans:messages.fd_pms_intro }}</p>
                <ol class="ha-problem-list space-y-4">
                    <li class="flex items-start gap-4">
                        <span class="ha-problem-number shrink-0">1</span>
                        <span class="text-[#696687] leading-relaxed pt-0.5">{{ trans:messages.fd_pms_item_1 }}</span>
                    </li>
                    <li class="flex items-start gap-4">
                        <span class="ha-problem-number shrink-0">2</span>
                        <span class="text-[#696687] leading-relaxed pt-0.5">{{ trans:messages.fd_pms_item_2 }}</span>
                    </li>
                    <li class="flex items-start gap-4">
                        <span class="ha-problem-number shrink-0">3</span>
                        <span class="text-[#696687] leading-relaxed pt-0.5">{{ trans:messages.fd_pms_item_3 }}</span>
                    </li>
                    <li class="flex items-start gap-4">
                        <span class="ha-problem-number shrink-0">4</span>
                        <span class="text-[#696687] leading-relaxed pt-0.5">{{ trans:messages.fd_pms_item_4 }}</span>
                    </li>
                    <li class="flex items-start gap-4">
                        <span class="ha-problem-number shrink-0">5</span>
                        <span class="text-[#696687] leading-relaxed pt-0.5">{{ trans:messages.fd_pms_item_5 }}</span>
                    </li>
                    <li class="flex items-start gap-4">
                        <span class="ha-problem-number shrink-0">6</span>
                        <span class="text-[#696687] leading-relaxed pt-0.5">{{ trans:messages.fd_pms_item_6 }}</span>
                    </li>
                </ol>
            </div>
            <div class="md:w-1/2" data-aos="fade-left">
                <img src="/assets/articles/uploads/2021/09/home1_img_1.png" alt="PMS hotel system" class="w-full max-w-lg mx-auto float-bob">
            </div>
        </div>
    </div>
</section>

{{# Section 4: PMS Usability (left) + Rate Management (right) — side by side #}}
<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">
                <p class="text-[#696687] mb-4 leading-relaxed">{{ trans:messages.fd_detail_left_p1 }}</p>
                <p class="text-[#696687] leading-relaxed">{{ trans:messages.fd_detail_left_p2 }}</p>
            </div>
            <div class="hidden md:block w-px bg-black self-stretch"></div>
            <div class="md:w-1/2" data-aos="fade-left">
                <p class="text-[#696687] mb-6 leading-relaxed">{{ trans:messages.fd_detail_right_p1 }}</p>
                <p class="text-[#696687] mb-6 leading-relaxed">{{ trans:messages.fd_detail_right_intro }}</p>
                <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.fd_detail_right_item_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.fd_detail_right_item_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.fd_detail_right_item_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.fd_detail_right_item_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.fd_detail_right_item_5 }}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>

{{# Section 5: 3 Feature Icons #}}
<section class="py-16 full-bleed bg-[#f7f8fa]">
    <div class="max-w-6xl mx-auto">
        <h5 class="font-nunito text-lg font-bold text-[#696687] leading-snug text-left mb-10" data-aos="fade-up">{{ trans:messages.fd_feature_intro }}</h5>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="text-center" data-aos="fade-up" data-aos-delay="0">
                <div class="w-32 h-32 rounded-full bg-white shadow-lg flex items-center justify-center mx-auto mb-4">
                    <img src="/assets/articles/uploads/2021/10/icon4.png" alt="{{ trans:messages.fd_feature_1 }}" class="w-16 h-16 object-contain">
                </div>
                <h3 class="font-nunito text-lg font-bold text-[#252a3f]">{{ trans:messages.fd_feature_1 }}</h3>
            </div>
            <div class="text-center" data-aos="fade-up" data-aos-delay="100">
                <div class="w-32 h-32 rounded-full bg-white shadow-lg flex items-center justify-center mx-auto mb-4">
                    <img src="/assets/articles/uploads/2021/10/icon5.png" alt="{{ trans:messages.fd_feature_2 }}" class="w-16 h-16 object-contain">
                </div>
                <h3 class="font-nunito text-lg font-bold text-[#252a3f]">{{ trans:messages.fd_feature_2 }}</h3>
            </div>
            <div class="text-center" data-aos="fade-up" data-aos-delay="200">
                <div class="w-32 h-32 rounded-full bg-white shadow-lg flex items-center justify-center mx-auto mb-4">
                    <img src="/assets/articles/uploads/2021/10/icon6.png" alt="{{ trans:messages.fd_feature_3 }}" class="w-16 h-16 object-contain">
                </div>
                <h3 class="font-nunito text-lg font-bold text-[#252a3f]">{{ trans:messages.fd_feature_3 }}</h3>
            </div>
        </div>
    </div>
</section>

{{# Section 6: What You Get — image left, bullet list 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/2020/09/otelmsfd1.png" alt="What you get" class="w-full max-w-lg mx-auto float-bob">
            </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.fd_benefits_title }}
                </h2>
                <ol class="ha-problem-list space-y-4">
                    <li class="flex items-start gap-4">
                        <span class="ha-problem-number shrink-0">1</span>
                        <span class="text-[#696687] leading-relaxed pt-0.5">{{ trans:messages.fd_benefit_1 }}</span>
                    </li>
                    <li class="flex items-start gap-4">
                        <span class="ha-problem-number shrink-0">2</span>
                        <span class="text-[#696687] leading-relaxed pt-0.5">{{ trans:messages.fd_benefit_2 }}</span>
                    </li>
                    <li class="flex items-start gap-4">
                        <span class="ha-problem-number shrink-0">3</span>
                        <span class="text-[#696687] leading-relaxed pt-0.5">{{ trans:messages.fd_benefit_3 }}</span>
                    </li>
                    <li class="flex items-start gap-4">
                        <span class="ha-problem-number shrink-0">4</span>
                        <span class="text-[#696687] leading-relaxed pt-0.5">{{ trans:messages.fd_benefit_4 }}</span>
                    </li>
                    <li class="flex items-start gap-4">
                        <span class="ha-problem-number shrink-0">5</span>
                        <span class="text-[#696687] leading-relaxed pt-0.5">{{ trans:messages.fd_benefit_5 }}</span>
                    </li>
                    <li class="flex items-start gap-4">
                        <span class="ha-problem-number shrink-0">6</span>
                        <span class="text-[#696687] leading-relaxed pt-0.5">{{ trans:messages.fd_benefit_6 }}</span>
                    </li>
                    <li class="flex items-start gap-4">
                        <span class="ha-problem-number shrink-0">7</span>
                        <span class="text-[#696687] leading-relaxed pt-0.5">{{ trans:messages.fd_benefit_7 }}</span>
                    </li>
                    <li class="flex items-start gap-4">
                        <span class="ha-problem-number shrink-0">8</span>
                        <span class="text-[#696687] leading-relaxed pt-0.5">{{ trans:messages.fd_benefit_8 }}</span>
                    </li>
                </ol>
            </div>
        </div>
    </div>
</section>

{{# Section 7: Advantages — text + bullet list 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-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.fd_advantages_title }}
                </h2>
                <ol class="ha-problem-list space-y-4">
                    <li class="flex items-start gap-4">
                        <span class="ha-problem-number shrink-0">1</span>
                        <span class="text-[#696687] leading-relaxed pt-0.5">{{ trans:messages.fd_advantage_1 }}</span>
                    </li>
                    <li class="flex items-start gap-4">
                        <span class="ha-problem-number shrink-0">2</span>
                        <span class="text-[#696687] leading-relaxed pt-0.5">{{ trans:messages.fd_advantage_2 }}</span>
                    </li>
                    <li class="flex items-start gap-4">
                        <span class="ha-problem-number shrink-0">3</span>
                        <span class="text-[#696687] leading-relaxed pt-0.5">{{ trans:messages.fd_advantage_3 }}</span>
                    </li>
                    <li class="flex items-start gap-4">
                        <span class="ha-problem-number shrink-0">4</span>
                        <span class="text-[#696687] leading-relaxed pt-0.5">{{ trans:messages.fd_advantage_4 }}</span>
                    </li>
                    <li class="flex items-start gap-4">
                        <span class="ha-problem-number shrink-0">5</span>
                        <span class="text-[#696687] leading-relaxed pt-0.5">{{ trans:messages.fd_advantage_5 }}</span>
                    </li>
                    <li class="flex items-start gap-4">
                        <span class="ha-problem-number shrink-0">6</span>
                        <span class="text-[#696687] leading-relaxed pt-0.5">{{ trans:messages.fd_advantage_6 }}</span>
                    </li>
                    <li class="flex items-start gap-4">
                        <span class="ha-problem-number shrink-0">7</span>
                        <span class="text-[#696687] leading-relaxed pt-0.5">{{ trans:messages.fd_advantage_7 }}</span>
                    </li>
                    <li class="flex items-start gap-4">
                        <span class="ha-problem-number shrink-0">8</span>
                        <span class="text-[#696687] leading-relaxed pt-0.5">{{ trans:messages.fd_advantage_8 }}</span>
                    </li>
                </ol>
            </div>
            <div class="md:w-1/2" data-aos="fade-left">
                <img src="/assets/articles/uploads/2020/09/ofdeng3.png" alt="Advantages" class="w-full max-w-lg mx-auto float-bob">
            </div>
        </div>
    </div>
</section>

{{# Section 8: CTA Banner #}}
<section class="hero-fullscreen relative overflow-hidden" style="background-image: url('/assets/articles/uploads/2021/10/bluedrk.png'); background-position: center center; background-repeat: no-repeat; background-color: #ffffff;">
    <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-6 uppercase">{{ trans:messages.fd_cta_title }}</h2>
            <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.fd_cta_button }}
            </a>
        </div>
    </div>
</section>