Faq Section

Ready

HTML
View
Context
Info
Notes


        
        <section class="relative py-12 px-6 md:py-20 md:px-9 lg:py-28 lg:px-12">
    <div class="mx-auto md:grid md:grid-cols-12 md:gap-x-8 md:gap-y-8">
        <div class="col-span-full xl:col-start-2 xl:col-end-12">

            <h2 class=" text-left h3 ">
                fragen & antworten

            </h2>

        </div>

        <div class="md:col-start-1 md:col-end-7 xl:col-end-9 xl:col-start-2">
            <div>

                <div x-data="{ activeAccordion: null }">

                    <div x-data="{ id: 1 }" class=" mb-6 transition" :class="activeAccordion === id ? 'bg-gray-700' : 'bg-gray-100'">
                        <button @click="activeAccordion = activeAccordion === id ? null : id" :aria-expanded="activeAccordion" aria-controls="accordion-panel-1" class="button group-aria-expanded:button-active font-bold flex items-center justify-between text-left w-full py-7 px-5 text-sm transition lg:px-10 xl:text-lg" :class="activeAccordion === id ? 'text-white' : 'text-gray-700'" id="accordion-header-1">
                            <span class="mr-5 lg:mr-10">
                                Gibt es bestimmte Zertifizierungen, die eingehalten werden müssen?
                            </span>
                            <span class="flex items-center justify-center">
                                <span class="flex items-center justify-center" :class="{ '!hidden': activeAccordion === id }">

                                    <span class="inline-flex items-center w-4 h-4     ">
                                        <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.73 22.73">
                                            <path id="b" d="m.75,11.36h21.23M11.36.75v21.23" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                                        </svg>
                                    </span>

                                </span>
                                <span class="items-center justify-center hidden" :class="{ '!flex': activeAccordion === id }">

                                    <span class="inline-flex items-center w-4 h-4     ">
                                        <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" width="22.73" height="1.5" viewBox="0 0 22.73 1.5">
                                            <path id="b" d="m.75.75h21.23" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                                        </svg>
                                    </span>

                                </span>
                            </span>
                        </button>

                        <div x-cloak x-show="activeAccordion == id" x-collapse id="accordion-panel-1" aria-labelledby="accordion-header-1">
                            <div class="py-7 px-5 pt-0 text-sm lg:px-10 max-w-[90%]" :class="activeAccordion === id ? 'text-white' : 'text-gray-700'">
                                Wir legen mit Ihnen den Umfang der gewünschten Arbeiten fest, planen, konstruieren evtl. notwendigen Neu Teile und ergänzen die Maschinen und Anlagen incl. Elektrik, Pneumatik, Hydraulik und Steuerungsbau und nehmen diese in Ihrem Haus wieder in Betrieb.
                            </div>
                        </div>
                    </div>

                    <div x-data="{ id: 2 }" class=" mb-6 transition" :class="activeAccordion === id ? 'bg-gray-700' : 'bg-gray-100'">
                        <button @click="activeAccordion = activeAccordion === id ? null : id" :aria-expanded="activeAccordion" aria-controls="accordion-panel-2" class="button group-aria-expanded:button-active font-bold flex items-center justify-between text-left w-full py-7 px-5 text-sm transition lg:px-10 xl:text-lg" :class="activeAccordion === id ? 'text-white' : 'text-gray-700'" id="accordion-header-2">
                            <span class="mr-5 lg:mr-10">
                                Sind Prototypen Standard in der Produktion?
                            </span>
                            <span class="flex items-center justify-center">
                                <span class="flex items-center justify-center" :class="{ '!hidden': activeAccordion === id }">

                                    <span class="inline-flex items-center w-4 h-4     ">
                                        <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.73 22.73">
                                            <path id="b" d="m.75,11.36h21.23M11.36.75v21.23" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                                        </svg>
                                    </span>

                                </span>
                                <span class="items-center justify-center hidden" :class="{ '!flex': activeAccordion === id }">

                                    <span class="inline-flex items-center w-4 h-4     ">
                                        <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" width="22.73" height="1.5" viewBox="0 0 22.73 1.5">
                                            <path id="b" d="m.75.75h21.23" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                                        </svg>
                                    </span>

                                </span>
                            </span>
                        </button>

                        <div x-cloak x-show="activeAccordion == id" x-collapse id="accordion-panel-2" aria-labelledby="accordion-header-2">
                            <div class="py-7 px-5 pt-0 text-sm lg:px-10 max-w-[90%]" :class="activeAccordion === id ? 'text-white' : 'text-gray-700'">
                                Wir legen mit Ihnen den Umfang der gewünschten Arbeiten fest, planen, konstruieren evtl. notwendigen Neu Teile und ergänzen die Maschinen und Anlagen incl. Elektrik, Pneumatik, Hydraulik und Steuerungsbau und nehmen diese in Ihrem Haus wieder in Betrieb.
                            </div>
                        </div>
                    </div>

                    <div x-data="{ id: 3 }" class=" mb-6 transition" :class="activeAccordion === id ? 'bg-gray-700' : 'bg-gray-100'">
                        <button @click="activeAccordion = activeAccordion === id ? null : id" :aria-expanded="activeAccordion" aria-controls="accordion-panel-3" class="button group-aria-expanded:button-active font-bold flex items-center justify-between text-left w-full py-7 px-5 text-sm transition lg:px-10 xl:text-lg" :class="activeAccordion === id ? 'text-white' : 'text-gray-700'" id="accordion-header-3">
                            <span class="mr-5 lg:mr-10">
                                Gibt es zusätzliche Bauteile?
                            </span>
                            <span class="flex items-center justify-center">
                                <span class="flex items-center justify-center" :class="{ '!hidden': activeAccordion === id }">

                                    <span class="inline-flex items-center w-4 h-4     ">
                                        <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.73 22.73">
                                            <path id="b" d="m.75,11.36h21.23M11.36.75v21.23" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                                        </svg>
                                    </span>

                                </span>
                                <span class="items-center justify-center hidden" :class="{ '!flex': activeAccordion === id }">

                                    <span class="inline-flex items-center w-4 h-4     ">
                                        <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" width="22.73" height="1.5" viewBox="0 0 22.73 1.5">
                                            <path id="b" d="m.75.75h21.23" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                                        </svg>
                                    </span>

                                </span>
                            </span>
                        </button>

                        <div x-cloak x-show="activeAccordion == id" x-collapse id="accordion-panel-3" aria-labelledby="accordion-header-3">
                            <div class="py-7 px-5 pt-0 text-sm lg:px-10 max-w-[90%]" :class="activeAccordion === id ? 'text-white' : 'text-gray-700'">
                                Wir legen mit Ihnen den Umfang der gewünschten Arbeiten fest, planen, konstruieren evtl. notwendigen Neu Teile und ergänzen die Maschinen und Anlagen incl. Elektrik, Pneumatik, Hydraulik und Steuerungsbau und nehmen diese in Ihrem Haus wieder in Betrieb.
                            </div>
                        </div>
                    </div>

                    <div x-data="{ id: 4 }" class=" mb-6 transition" :class="activeAccordion === id ? 'bg-gray-700' : 'bg-gray-100'">
                        <button @click="activeAccordion = activeAccordion === id ? null : id" :aria-expanded="activeAccordion" aria-controls="accordion-panel-4" class="button group-aria-expanded:button-active font-bold flex items-center justify-between text-left w-full py-7 px-5 text-sm transition lg:px-10 xl:text-lg" :class="activeAccordion === id ? 'text-white' : 'text-gray-700'" id="accordion-header-4">
                            <span class="mr-5 lg:mr-10">
                                Sind Prototypen Standard in der Produktion?
                            </span>
                            <span class="flex items-center justify-center">
                                <span class="flex items-center justify-center" :class="{ '!hidden': activeAccordion === id }">

                                    <span class="inline-flex items-center w-4 h-4     ">
                                        <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.73 22.73">
                                            <path id="b" d="m.75,11.36h21.23M11.36.75v21.23" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                                        </svg>
                                    </span>

                                </span>
                                <span class="items-center justify-center hidden" :class="{ '!flex': activeAccordion === id }">

                                    <span class="inline-flex items-center w-4 h-4     ">
                                        <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" width="22.73" height="1.5" viewBox="0 0 22.73 1.5">
                                            <path id="b" d="m.75.75h21.23" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                                        </svg>
                                    </span>

                                </span>
                            </span>
                        </button>

                        <div x-cloak x-show="activeAccordion == id" x-collapse id="accordion-panel-4" aria-labelledby="accordion-header-4">
                            <div class="py-7 px-5 pt-0 text-sm lg:px-10 max-w-[90%]" :class="activeAccordion === id ? 'text-white' : 'text-gray-700'">
                                Wir legen mit Ihnen den Umfang der gewünschten Arbeiten fest, planen, konstruieren evtl. notwendigen Neu Teile und ergänzen die Maschinen und Anlagen incl. Elektrik, Pneumatik, Hydraulik und Steuerungsbau und nehmen diese in Ihrem Haus wieder in Betrieb.
                            </div>
                        </div>
                    </div>

                    <div x-data="{ id: 5 }" class=" mb-6 transition" :class="activeAccordion === id ? 'bg-gray-700' : 'bg-gray-100'">
                        <button @click="activeAccordion = activeAccordion === id ? null : id" :aria-expanded="activeAccordion" aria-controls="accordion-panel-5" class="button group-aria-expanded:button-active font-bold flex items-center justify-between text-left w-full py-7 px-5 text-sm transition lg:px-10 xl:text-lg" :class="activeAccordion === id ? 'text-white' : 'text-gray-700'" id="accordion-header-5">
                            <span class="mr-5 lg:mr-10">
                                Gibt es zusätzliche Bauteile?
                            </span>
                            <span class="flex items-center justify-center">
                                <span class="flex items-center justify-center" :class="{ '!hidden': activeAccordion === id }">

                                    <span class="inline-flex items-center w-4 h-4     ">
                                        <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.73 22.73">
                                            <path id="b" d="m.75,11.36h21.23M11.36.75v21.23" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                                        </svg>
                                    </span>

                                </span>
                                <span class="items-center justify-center hidden" :class="{ '!flex': activeAccordion === id }">

                                    <span class="inline-flex items-center w-4 h-4     ">
                                        <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" width="22.73" height="1.5" viewBox="0 0 22.73 1.5">
                                            <path id="b" d="m.75.75h21.23" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                                        </svg>
                                    </span>

                                </span>
                            </span>
                        </button>

                        <div x-cloak x-show="activeAccordion == id" x-collapse id="accordion-panel-5" aria-labelledby="accordion-header-5">
                            <div class="py-7 px-5 pt-0 text-sm lg:px-10 max-w-[90%]" :class="activeAccordion === id ? 'text-white' : 'text-gray-700'">
                                Wir legen mit Ihnen den Umfang der gewünschten Arbeiten fest, planen, konstruieren evtl. notwendigen Neu Teile und ergänzen die Maschinen und Anlagen incl. Elektrik, Pneumatik, Hydraulik und Steuerungsbau und nehmen diese in Ihrem Haus wieder in Betrieb.
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>

        <div class="col-start-7 col-end-13 xl:col-start-9 xl:col-end-12">

            <div class="relative w-full aspect-[78/100]">
                <div class="h-full flex flex-col justify-end pt-60 px-6 pb-6 md:px-8 md:pb-8 xl:px-10 xl:pb-10">
                    <div class="absolute top-0 left-0 w-full h-full">

                        <div class="relative h-full w-full ">
                            <img class="w-full h-full object-cover" src="/image/placeholder.jpg" alt="" />

                        </div>
                    </div>

                    <div class="relative flex flex-col z-10">

                        <p class="text-white text-sm mb-2 text-white leading-customText">Mario Schmidt </p>

                        <h5 class="h5 text-white text-left  text-white">
                            Nicht die richtige Frage dabei? Wir beraten Sie individuell.

                        </h5>

                        <div class="flex flex-col items-start">

                            <div class="flex flex-col">

                                <a class="btn cursor-pointer inline-flex items-center text-white font-bold mb-4 mr-6 flex-row-reverse justify-end  rounded-none transition-all active:scale-95 hover:rounded-sm hover:brightness-95">

                                    <span class="shrink-0">
                                        info@apa-gmbh.de
                                    </span>

                                    <span class="inline-flex items-center w-4 h-4    w-8 ">
                                        <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" width="18.93" height="18.94" viewBox="0 0 18.93 18.94">
                                            <path id="b" d="m8.22,10.72L.75,6.77C6.18,3.78,12.07,1.75,18.18.75c-1,6.11-3.03,12.01-6.01,17.44l-3.96-7.47h0Zm0,0l4.83-4.83" style="fill:none; stroke:#fff; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                                        </svg>
                                    </span>

                                </a>

                                <a class="btn cursor-pointer inline-flex items-center text-white font-bold mb-4 flex-row-reverse justify-end  rounded-none transition-all active:scale-95 hover:rounded-sm hover:brightness-95">

                                    <span class="shrink-0">
                                        +49 6023 9716 0
                                    </span>

                                    <span class="inline-flex items-center w-4 h-4    w-8 ">
                                        <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" width="13.5" height="22.5" viewBox="0 0 13.5 22.5">
                                            <path id="b" d="m5.25.75h-2.25C1.76.75.75,1.76.75,3v16.5c0,1.24,1.01,2.25,2.25,2.25h7.5c1.24,0,2.25-1.01,2.25-2.25V3c0-1.24-1.01-2.25-2.25-2.25h-2.25m-3,0v1.5h3V.75m-3,0h3m-3,18.75h3" style="fill:none; stroke:#fff; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                                        </svg>
                                    </span>

                                </a>
                            </div>

                        </div>

                        <p class="text-white text-sm text-white opacity-50 leading-customText">Sie erreichen uns Mo - Fr von 9 - 17 Uhr. </p>

                    </div>
                </div>

                <div class="absolute bottom-0 left-0 w-full h-full bg-gradient-to-b from-transparent to-gray-700 opacity-90 pointer-events-none"></div>
            </div>
        </div>
    </div>
</section>


        <section class="relative py-12 px-6 md:py-20 md:px-9 lg:py-28 lg:px-12">
    <div class="mx-auto md:grid md:grid-cols-12 md:gap-x-8 md:gap-y-8">
        <div class="col-span-full xl:col-start-2 xl:col-end-12">
            {% render "@headline" with {
                headline: 'fragen & antworten',
                tag: 'h2',
                size: 'h3'
            } %}
        </div>

        <div class="md:col-start-1 md:col-end-7 xl:col-end-9 xl:col-start-2">
            <div>
                {% render "@accordion" with {
                    style: 'accent',
                    firstOpen: true,
                    items: [
                        {
                            "id": 1,
                            "title": "Gibt es bestimmte Zertifizierungen, die eingehalten werden müssen?",
                            "content": "Wir legen mit Ihnen den Umfang der gewünschten Arbeiten fest, planen, konstruieren evtl. notwendigen Neu Teile und ergänzen die Maschinen und Anlagen incl. Elektrik, Pneumatik, Hydraulik und Steuerungsbau und nehmen diese in Ihrem Haus wieder in Betrieb."
                        },
                        {
                            "id": 2,
                            "title": "Sind Prototypen Standard in der Produktion?",
                            "content": "Wir legen mit Ihnen den Umfang der gewünschten Arbeiten fest, planen, konstruieren evtl. notwendigen Neu Teile und ergänzen die Maschinen und Anlagen incl. Elektrik, Pneumatik, Hydraulik und Steuerungsbau und nehmen diese in Ihrem Haus wieder in Betrieb."
                        },
                        {
                            "id": 3,
                            "title": "Gibt es zusätzliche Bauteile?",
                            "content": "Wir legen mit Ihnen den Umfang der gewünschten Arbeiten fest, planen, konstruieren evtl. notwendigen Neu Teile und ergänzen die Maschinen und Anlagen incl. Elektrik, Pneumatik, Hydraulik und Steuerungsbau und nehmen diese in Ihrem Haus wieder in Betrieb."
                        },
                        {
                            "id": 2,
                            "title": "Sind Prototypen Standard in der Produktion?",
                            "content": "Wir legen mit Ihnen den Umfang der gewünschten Arbeiten fest, planen, konstruieren evtl. notwendigen Neu Teile und ergänzen die Maschinen und Anlagen incl. Elektrik, Pneumatik, Hydraulik und Steuerungsbau und nehmen diese in Ihrem Haus wieder in Betrieb."
                        },
                        {
                            "id": 3,
                            "title": "Gibt es zusätzliche Bauteile?",
                            "content": "Wir legen mit Ihnen den Umfang der gewünschten Arbeiten fest, planen, konstruieren evtl. notwendigen Neu Teile und ergänzen die Maschinen und Anlagen incl. Elektrik, Pneumatik, Hydraulik und Steuerungsbau und nehmen diese in Ihrem Haus wieder in Betrieb."
                        }
                    ]
                } %}
           </div>
        </div>

        <div class="col-start-7 col-end-13 xl:col-start-9 xl:col-end-12">
            {% include '@contact-box' with {
                name: "Mario Schmidt",
                headline: "Nicht die richtige Frage dabei? Wir beraten Sie individuell.",
                email: "info@apa-gmbh.de",
                phone: "+49 6023 9716 0",
                text: "Sie erreichen uns Mo - Fr von 9 - 17 Uhr.",
                color: "text-white",
                aspectRatio: "aspect-[78/100]"
            } %}
        </div>
    </div>
</section>


        
            
            /* No context defined. */

Handle: @faq-section
Preview:
- With layout
- Component only
Filesystem Path: src/components/organisms/faq-section/faq-section.twig
References (3): @headline, @accordion, @contact-box
Referenced by (3): @career, @job-detail, @product-detail

No notes defined.