<section id="afi-business" class="py-20 bg-gradient-to-b from-green-50 to-white"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-12" data-aos="fade-up"> <h2 id="afi-business-heading" class="text-4xl font-extrabold text-green mb-4"> <span class="border-b-4 border-gold pb-2">{{ 'business.heading'|trans }}</span> </h2> <p id="afi-business-subtext" class="text-xl text-gray-600 max-w-3xl mx-auto"> {{ 'business.subtext'|trans }} </p> </div> <div class="category-tabs" data-aos="fade-up"> <button class="category-tab active" data-category="all" id="cat-all">{{ 'business.categories.all'|trans }}</button> <button class="category-tab" data-category="electronics" id="cat-electronics">{{ 'business.categories.electronics'|trans }}</button> <button class="category-tab" data-category="fashion" id="cat-fashion">{{ 'business.categories.fashion'|trans }}</button> <button class="category-tab" data-category="home" id="cat-home">{{ 'business.categories.home'|trans }}</button> <button class="category-tab" data-category="industrial" id="cat-industrial">{{ 'business.categories.industrial'|trans }}</button> <button class="category-tab" data-category="food" id="cat-food">{{ 'business.categories.food'|trans }}</button> </div> <div id="products-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mb-8"> </div> <div class="text-center" data-aos="fade-up"> <button id="load-more-products" class="inline-flex items-center px-8 py-3 bg-green text-white font-bold rounded-lg shadow-lg hover:bg-green-dark transition duration-300 transform hover:scale-105"> <i class="fas fa-sync-alt mr-2"></i> <span id="load-more-products-text">{{ 'business.load_more'|trans }}</span> </button> </div> </div></section>