
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                },
            },
        };
    </script>
    <main class="relative flex flex-col justify-center overflow-hidden">
        <div class="w-full max-w-7xl mx-auto px-4 md:px-6 py-20">

            <h1 class="text-3xl font-normal tracking-tight text-white">Frequently Asked Questions</h1>

            <!-- Accordion component -->
            <div class="divide-y divide-white/50 my-10">
                <!-- Accordion item -->
                <div x-data="{ expanded: false }" class="py-2">
                    <h2>
                        <button
                            id="faqs-title-01"
                            type="button"
                            class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
                            @click="expanded = !expanded"
                            :aria-expanded="expanded"
                            aria-controls="faqs-text-01"
                        >
                            <span style="color: #fff;">What is CyberCity?</span>
                            <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
                            </svg>
                        </button>
                    </h2>
                    <div
                        id="faqs-text-01"
                        role="region"
                        aria-labelledby="faqs-title-01"
                        class="grid text-sm text-slate-200 overflow-hidden transition-all duration-300 ease-in-out"
                        :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
                        >
                        <div class="overflow-hidden">
                            <p class="pb-3 text-gray-300 text-base font-light">
                                CyberCity is a next-generation smart city in Fumba, Zanzibar, designed to integrate cutting-edge technology, sustainability, and economic innovation. It features a Digital Freezone, regenerative living, AI-driven services, and a decentralized economic model, and many more.
                            </p>
                        </div>
                    </div>
                </div>
                <!-- Accordion item -->
                <div x-data="{ expanded: false }" class="py-2">
                    <h2>
                        <button
                            id="faqs-title-02"
                            type="button"
                            class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
                            @click="expanded = !expanded"
                            :aria-expanded="expanded"
                            aria-controls="faqs-text-02"
                        >
                            <span style="color: #fff;">Why was Fumba, Zanzibar chosen as the project site?</span>
                            <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
                            </svg>
                        </button>
                    </h2>
                    <div
                        id="faqs-text-02"
                        role="region"
                        aria-labelledby="faqs-title-02"
                        class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
                        :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
                        >
                        <div class="overflow-hidden">
                            <p class="pb-3 text-gray-300 text-base font-light">
                                Fumba is part of the 2042 Fumba Free Economic Zone Master Plan, strategically selected for its rapid development potential, economic incentives, and unique blend of cultural heritage and natural beauty. It offers a stable environment for global investment and innovation.
                            </p>
                        </div>
                    </div>
                </div> 
                <!-- Accordion item -->
                <div x-data="{ expanded: false }" class="py-2">
                    <h2>
                        <button
                            id="faqs-title-04"
                            type="button"
                            class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
                            @click="expanded = !expanded"
                            :aria-expanded="expanded"
                            aria-controls="faqs-text-04"
                        >
                            <span style="color: #fff;">What is the Digital Freezone, and how does it benefit businesses?</span>
                            <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
                            </svg>
                        </button>
                    </h2>
                    <div
                        id="faqs-text-04"
                        role="region"
                        aria-labelledby="faqs-title-04"
                        class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
                        :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
                        >
                        <div class="overflow-hidden">
                             <p class="pb-3 text-gray-300 text-base font-light">
                                The Digital Freezone is a business-friendly ecosystem within Cybercity that features streamlined regulations, financial transparency, and global connectivity. It provides a light-touch regulatory environment, making it ideal for startups, digital entrepreneurs, and international businesses.
                            </p>
                        </div>
                    </div>
                </div> 
                <!-- Accordion item -->
                <div x-data="{ expanded: false }" class="py-2">
                    <h2>
                        <button
                            id="faqs-title-05"
                            type="button"
                            class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
                            @click="expanded = !expanded"
                            :aria-expanded="expanded"
                            aria-controls="faqs-text-05"
                        >
                            <span style="color: #fff;">How does the project support sustainability and regenerative living?</span>
                            <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
                            </svg>
                        </button>
                    </h2>
                    <div
                        id="faqs-text-05"
                        role="region"
                        aria-labelledby="faqs-title-05"
                        class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
                        :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
                        >
                        <div class="overflow-hidden">
                             <p class="pb-3 text-gray-300 text-base font-light">
                                CyberCity is designed with eco-friendly urban planning, featuring car-free green spaces, smart energy solutions like Vehicle-to-Grid (V2G) integration, organic food production, and co-owned AI that optimizes resources while generating income for citizens.
                             </p>
                        </div>
                    </div>
                </div> 
                <!-- Accordion item -->
                <div x-data="{ expanded: false }" class="py-2">
                    <h2>
                        <button
                            id="faqs-title-06"
                            type="button"
                            class="flex items-center justify-between w-full text-left font-semibold py-2 border-none"
                            @click="expanded = !expanded"
                            :aria-expanded="expanded"
                            aria-controls="faqs-text-06"
                        >
                            <span style="color: #fff;">How can I participate in the CyberCity movement?</span>
                            <svg class="fill-white shrink-0 ml-8" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
                                <rect y="7" width="16" height="2" rx="1" class="transform origin-center rotate-90 transition duration-200 ease-out" :class="{'!rotate-180': expanded}" />
                            </svg>
                        </button>
                    </h2>
                    <div
                        id="faqs-text-06"
                        role="region"
                        aria-labelledby="faqs-title-06"
                        class="grid text-sm text-gray-200 overflow-hidden transition-all duration-300 ease-in-out"
                        :class="expanded ? 'grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0'"
                        >
                        <div class="overflow-hidden">
                             <p class="pb-3 text-gray-300 text-base font-light">
                                You can invest, register a business, become a digital citizen, or move to CyberCity as an entrepreneur or resident. The city offers opportunities for innovators, investors, and forward-thinking individuals to be part of a revolutionary ecosystem.
                        </div>
                    </div>
                </div> 
            </div>                                                                                              
    </div>
            <!-- End: Accordion component -->

        </div>
    </main>



   
