FAQ UI Components – Flow Library

<section class="py-12 lg:py-24">
        <div class="container mx-auto px-4">
            <div class="text-center mb-20">
                <h1 class="font-heading text-6xl mb-6">FAQ</h1>
                <p class="text-gray-700">Here you will find the answers to the frequently asked questions.</p>
            </div>
            <div class="max-w-4xl mx-auto">
                <button x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" class="flex w-full py-6 px-8 mb-4 items-start justify-between text-left shadow-md rounded-2xl">
                    <div>
                        <div class="pr-5">
                            <h5 class="text-lg font-medium">What is green energy?</h5>
                        </div>
                        <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 pr-5 duration-500">
                            <p class="text-gray-700 mt-4">We provide a range of green energy solutions, including solar power systems, wind turbines, energy-efficient appliances, and smart home technologies to enhance energy sustainability.</p>
                        </div>
                    </div>
                    <span class="flex-shrink-0">
                        <div :class="{'hidden': accordion}">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 5.69995V18.3" stroke="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M5.69995 12H18.3" stroke="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>   
                          </div>
                          <div :class="{'hidden': !accordion}" class="hidden">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M5.69995 12H18.3" stroke="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>  
                          </div>    
                    </span>                                       
                </button>
                <button x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" class="flex w-full py-6 px-8 mb-4 items-start justify-between text-left shadow-md rounded-2xl">
                    <div>
                        <div class="pr-5">
                            <h5 class="text-lg font-medium">How does green energy benefit the environment?</h5>
                        </div>
                        <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 pr-5 duration-500">
                            <p class="text-gray-700 mt-4">We provide a range of green energy solutions, including solar power systems, wind turbines, energy-efficient appliances, and smart home technologies to enhance energy sustainability.</p>
                        </div>
                    </div>
                    <span class="flex-shrink-0">
                        <div :class="{'hidden': accordion}">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 5.69995V18.3" stroke="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M5.69995 12H18.3" stroke="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>   
                          </div>
                          <div :class="{'hidden': !accordion}" class="hidden">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M5.69995 12H18.3" stroke="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>  
                          </div>    
                    </span>                                       
                </button>
                <button x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" class="flex w-full py-6 px-8 mb-4 items-start justify-between text-left shadow-md rounded-2xl">
                    <div>
                        <div class="pr-5">
                            <h5 class="text-lg font-medium">What green energy solutions does your company offer?</h5>
                        </div>
                        <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 pr-5 duration-500">
                            <p class="text-gray-700 mt-4">We provide a range of green energy solutions, including solar power systems, wind turbines, energy-efficient appliances, and smart home technologies to enhance energy sustainability.</p>
                        </div>
                    </div>
                    <span class="flex-shrink-0">
                        <div :class="{'hidden': accordion}">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 5.69995V18.3" stroke="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M5.69995 12H18.3" stroke="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>   
                          </div>
                          <div :class="{'hidden': !accordion}" class="hidden">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M5.69995 12H18.3" stroke="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>  
                          </div>    
                    </span>                                       
                </button>
                <button x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" class="flex w-full py-6 px-8 mb-4 items-start justify-between text-left shadow-md rounded-2xl">
                    <div>
                        <div class="pr-5">
                            <h5 class="text-lg font-medium">What support services do you offer after installing green energy solutions?</h5>
                        </div>
                        <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 pr-5 duration-500">
                            <p class="text-gray-700 mt-4">We provide a range of green energy solutions, including solar power systems, wind turbines, energy-efficient appliances, and smart home technologies to enhance energy sustainability.</p>
                        </div>
                    </div>
                    <span class="flex-shrink-0">
                        <div :class="{'hidden': accordion}">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 5.69995V18.3" stroke="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M5.69995 12H18.3" stroke="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>   
                          </div>
                          <div :class="{'hidden': !accordion}" class="hidden">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M5.69995 12H18.3" stroke="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>  
                          </div>    
                    </span>                                       
                </button>
                <button x-data="{ accordion: false }" x-on:click.prevent="accordion = !accordion" class="flex w-full py-6 px-8 mb-24 items-start justify-between text-left shadow-md rounded-2xl">
                    <div>
                        <div class="pr-5">
                            <h5 class="text-lg font-medium">How do solar panels work?</h5>
                        </div>
                        <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 pr-5 duration-500">
                            <p class="text-gray-700 mt-4">We provide a range of green energy solutions, including solar power systems, wind turbines, energy-efficient appliances, and smart home technologies to enhance energy sustainability.</p>
                        </div>
                    </div>
                    <span class="flex-shrink-0">
                        <div :class="{'hidden': accordion}">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 5.69995V18.3" stroke="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                                <path d="M5.69995 12H18.3" stroke="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>   
                          </div>
                          <div :class="{'hidden': !accordion}" class="hidden">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M5.69995 12H18.3" stroke="#1D1F1E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                            </svg>  
                        </div>    
                    </span>                                       
                </button>
                <div class="sm:flex py-10 px-5 sm:px-10 bg-orange-50 rounded-2xl">
                    <div class="mb-4 sm:mb-0 sm:mr-6">
                        <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M0 8C0 3.58172 3.58172 0 8 0H40C44.4183 0 48 3.58172 48 8V40C48 44.4183 44.4183 48 40 48H8C3.58172 48 0 44.4183 0 40V8Z" fill="#BEF264"></path>
                            <path d="M13.676 15.5617C11.7951 17.8602 10.6666 20.7983 10.6666 24C10.6666 27.2017 11.7951 30.1398 13.6761 32.4383L18.9201 27.1943C18.3372 26.2694 18 25.174 18 24C18 22.8259 18.3372 21.7306 18.92 20.8057L13.676 15.5617Z" fill="#022C22"></path>
                            <path d="M15.5616 13.6761L20.8056 18.9201C21.7306 18.3372 22.8259 18 24 18C25.174 18 26.2694 18.3372 27.1943 18.9201L32.4383 13.6761C30.1398 11.7951 27.2017 10.6666 24 10.6666C20.7982 10.6666 17.8601 11.7951 15.5616 13.6761Z" fill="#022C22"></path>
                            <path d="M34.3239 15.5617L29.0799 20.8057C29.6628 21.7307 30 22.8259 30 24C30 25.174 29.6627 26.2693 29.0799 27.1943L34.3238 32.4383C36.2048 30.1398 37.3333 27.2017 37.3333 24C37.3333 20.7983 36.2048 17.8602 34.3239 15.5617Z" fill="#022C22"></path>
                            <path d="M32.4382 34.3239L27.1942 29.0799C26.2693 29.6628 25.174 30 24 30C22.8259 30 21.7307 29.6628 20.8057 29.0799L15.5617 34.3239C17.8602 36.2048 20.7983 37.3333 24 37.3333C27.2016 37.3333 30.1397 36.2048 32.4382 34.3239Z" fill="#022C22"></path>
                        </svg>                            
                    </div>
                    <div>
                        <h5 class="text-xl font-medium mb-4">Still have questions?</h5>
                        <p class="text-gray-700">
                            <span>For assistance, please visit our</span>
                            <a href="#" class="inline-block text-black font-medium underline">Contact Us</a>
                            <span>page or call our customer support hotline at</span>
                            <span class="text-black font-medium">(671) 555-0110</span>
                            <span>. Our dedicated team is ready to help you on your journey to a greener, more sustainable future.</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>