<template>
    <div>
        <Head>
            <Title>PrimeVue Roadmap</Title>
            <Meta name="description" content="PrimeVue Roadmap" />
        </Head>

        <div class="doc-intro">
            <h1>Roadmap</h1>
            <p>
                At <a href="https://www.primetek.com.tr/">PrimeTek</a>, we are passionate about improving PrimeVue and would like to share our ideas for 2024 with the community. These are planned to be implemented in parallel to the regular
                maintenance work of the library involving review of issue tickets, PRs and PrimeVue PRO support.
            </p>
        </div>

        <div class="overflow-auto">
            <div style="min-width: 1200px">
                <div class="flex gap-4 mb-4">
                    <div class="flex-shrink-0 w-56"></div>
                    <div class="flex-1 bg-gray-500 text-white font-bold text-center p-4 text-xl rounded">Q1</div>
                    <div class="flex-1 bg-gray-500 text-white font-bold text-center p-4 text-xl rounded">Q2</div>
                    <div class="flex-1 bg-gray-500 text-white font-bold text-center p-4 text-xl rounded">Q3</div>
                    <div class="flex-1 bg-gray-500 text-white font-bold text-center p-4 text-xl rounded">Q4</div>
                </div>

                <div class="flex flex-col gap-4">
                    <div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
                        <div class="flex-shrink-0 p-4 bg-blue-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">COMPONENTS</div>
                        <div class="flex-1 flex gap-4 flex-col">
                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
                                <h2 class="text-lg font-bold mt-0 mb-2">New Styled Mode</h2>
                                <p class="mt-0 mb-4 leading-normal">Move theming into core to replace sass repo.</p>
                                <div class="bg-surface-200 rounded">
                                    <div class="bg-blue-500 rounded" style="width: 25%; height: 4px"></div>
                                </div>
                            </div>
                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
                                <h2 class="text-lg font-bold mt-0 mb-2">CSS Variables</h2>
                                <p class="mt-0 mb-4 leading-normal">Implement figma design tokens as CSS variables instead of SCSS.</p>
                                <div class="bg-surface-200 rounded">
                                    <div class="bg-blue-500 rounded" style="width: 25%; height: 4px"></div>
                                </div>
                            </div>
                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
                                <h2 class="text-lg font-bold mt-0 mb-2">Tailwind CSS Presets</h2>
                                <p class="mt-0 mb-4 leading-normal">Provide presets for the entire UI suite.</p>
                                <div class="bg-surface-200 rounded">
                                    <div class="bg-blue-500 rounded" style="width: 50%; height: 4px"></div>
                                </div>
                            </div>
                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
                                <h2 class="text-lg font-bold mt-0 mb-2">New Components</h2>
                                <p class="mt-0 mb-4 leading-normal">Layout components, Typography, Meter, Drawer, Content for Steps...</p>
                                <div class="bg-surface-200 rounded">
                                    <div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
                                </div>
                            </div>
                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
                                <h2 class="text-lg font-bold mt-0 mb-2">Form States</h2>
                                <p class="mt-0 mb-4 leading-normal">Add filled and invalid props to form components.</p>
                                <div class="bg-surface-200 rounded">
                                    <div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
                                </div>
                            </div>
                        </div>
                        <div class="flex-1 flex gap-4 flex-col">
                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
                                <h2 class="text-lg font-bold mt-0 mb-2">RTL Mode</h2>
                                <p class="mt-0 mb-4 leading-normal">RTL support for the UI components.</p>
                                <div class="bg-surface-200 rounded">
                                    <div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
                                </div>
                            </div>
                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
                                <h2 class="text-lg font-bold mt-0 mb-2">Drag Drop Utils</h2>
                                <p class="mt-0 mb-4 leading-normal">Drag and Drop utilities.</p>
                                <div class="bg-surface-200 rounded">
                                    <div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
                                </div>
                            </div>
                        </div>
                        <div class="flex-1 flex gap-4 flex-col">
                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
                                <h2 class="text-lg font-bold mt-0 mb-2">Advanced Components</h2>
                                <p class="mt-0 mb-4 leading-normal">Sheet, Event Calendar.</p>
                                <div class="bg-surface-200 rounded">
                                    <div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
                                </div>
                            </div>
                        </div>
                        <div class="flex-1 flex gap-4 flex-col">
                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
                                <h2 class="text-lg font-bold mt-0 mb-2">Advanced Components</h2>
                                <p class="mt-0 mb-4 leading-normal">Gantt Chart, Flow Chart.</p>
                                <div class="bg-surface-200 rounded">
                                    <div class="bg-blue-500 rounded" style="width: 0%; height: 4px"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
                        <div class="flex-shrink-0 p-4 bg-indigo-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">Figma UI Kit</div>
                        <div class="flex-1 flex gap-4 flex-col">
                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-indigo-500 border-l-8">
                                <h2 class="text-lg font-bold mt-0 mb-2">New Figma Tokens</h2>
                                <p class="mt-0 mb-4 leading-normal">Update tokens to sync with the new styled mode.</p>
                                <div class="bg-surface-200 rounded">
                                    <div class="bg-indigo-500 rounded" style="width: 25%; height: 4px"></div>
                                </div>
                            </div>
                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-indigo-500 border-l-8">
                                <h2 class="text-lg font-bold mt-0 mb-2">Figma to Theme API</h2>
                                <p class="mt-0 mb-4 leading-normal">Build the infrastructure to generate themes from Figma.</p>
                                <div class="bg-surface-200 rounded">
                                    <div class="bg-indigo-500 rounded" style="width: 0%; height: 4px"></div>
                                </div>
                            </div>
                        </div>
                        <div class="flex-1 flex gap-4 flex-col"></div>
                        <div class="flex-1 flex gap-4 flex-col"></div>
                        <div class="flex-1 flex gap-4 flex-col"></div>
                    </div>
                    <div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
                        <div class="flex-shrink-0 p-4 bg-teal-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">SHOWCASE</div>
                        <div class="flex-1 flex gap-4 flex-col">
                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-teal-500 border-l-8">
                                <h2 class="text-lg font-bold mt-0 mb-2">Documentation</h2>
                                <p class="mt-0 mb-4 leading-normal">Add server backed data samples for data driven examples e.g. VirtualScroll, Lazy.</p>
                                <div class="bg-surface-200 rounded">
                                    <div class="bg-teal-500 rounded" style="width: 0%; height: 4px"></div>
                                </div>
                            </div>
                        </div>
                        <div class="flex-1 flex gap-4 flex-col"></div>
                        <div class="flex-1 flex gap-4 flex-col"></div>
                        <div class="flex-1 flex gap-4 flex-col"></div>
                    </div>
                    <div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
                        <div class="flex-shrink-0 p-4 bg-orange-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">PrimeBlocks</div>
                        <div class="flex-1 flex gap-4 flex-col">
                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-orange-500 border-l-8">
                                <h2 class="text-lg font-bold mt-0 mb-2">Blocks Update</h2>
                                <p class="mt-0 mb-4 leading-normal">Add 80+ New Blocks.</p>
                                <div class="bg-surface-200 rounded">
                                    <div class="bg-orange-500 rounded" style="width: 20%; height: 4px"></div>
                                </div>
                            </div>
                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-orange-500 border-l-8">
                                <h2 class="text-lg font-bold mt-0 mb-2">Tailwind Blocks</h2>
                                <p class="mt-0 mb-4 leading-normal">Port the entire Blocks to Tailwind.</p>
                                <div class="bg-surface-200 rounded">
                                    <div class="bg-orange-500 rounded" style="width: 0%; height: 4px"></div>
                                </div>
                            </div>
                        </div>
                        <div class="flex-1 flex gap-4 flex-col">
                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-orange-500 border-l-8">
                                <h2 class="text-lg font-bold mt-0 mb-2">Online App</h2>
                                <p class="mt-0 mb-4 leading-normal">Implement a SaaS app to access the blocks instead of an offline download.</p>
                                <div class="bg-surface-200 rounded">
                                    <div class="bg-orange-500 rounded" style="width: 0%; height: 4px"></div>
                                </div>
                            </div>
                        </div>
                        <div class="flex-1 flex gap-4 flex-col"></div>
                        <div class="flex-1 flex gap-4 flex-col"></div>
                    </div>
                    <div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
                        <div class="flex-shrink-0 p-4 bg-pink-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">Design</div>
                        <div class="flex-1 flex gap-4 flex-col">
                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-pink-500 border-l-8">
                                <h2 class="text-lg font-bold mt-0 mb-2">New UI Theme</h2>
                                <p class="mt-0 mb-4 leading-normal">Brand new default theme with a modern and attractive design.</p>
                                <div class="bg-surface-200 rounded">
                                    <div class="bg-pink-500 rounded" style="width: 0%; height: 4px"></div>
                                </div>
                            </div>
                        </div>
                        <div class="flex-1 flex gap-4 flex-col">
                            <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-pink-500 border-l-8">
                                <h2 class="text-lg font-bold mt-0 mb-2">New UI Based Theme Editor</h2>
                                <p class="mt-0 mb-4 leading-normal">Advanced Theme Editor App with full control over the new Styled Theming API.</p>
                                <div class="bg-surface-200 rounded">
                                    <div class="bg-pink-500 rounded" style="width: 0%; height: 4px"></div>
                                </div>
                            </div>
                        </div>
                        <div class="flex-1 flex gap-4 flex-col"></div>
                        <div class="flex-1 flex gap-4 flex-col"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
