primevue-mirror/pages/support/index.vue

<template>
    <div>
        <div class="flex flex-col md:flex-row mb-8 gap-8">
            <div class="card flex-1 !m-0 relative overflow-hidden">
                <i class="pi pi-github absolute opacity-20" style="bottom: -50px; right: -50px; font-size: 200px; transform: rotateX(45deg) rotateY(0deg) rotateZ(-45deg)"></i>
                <div class="text-2xl font-semibold mb-4 relative">Community Support</div>
                <p class="m-0 leading-normal relative text-lg">
                    <a href="https://github.com/orgs/primefaces/discussions" class="doc-link" target="_blank" rel="noopener noreferrer">Forum</a> and
                    <a href="https://discord.gg/gzKFYnpmCY" class="doc-link" target="_blank" rel="noopener noreferrer">Discord</a> are where the community users gather to seek support, post topics and discuss the technology. GitHub issue tracker is
                    the channel where community users can create tickets however PrimeTek does not guarantee a response time although they are monitored and maintained by our staff. If you need to secure a response, you may consider PRO support
                    instead.
                </p>
            </div>
            <div class="card !m-0 flex-1 !bg-primary !text-primary-contrast font-medium">
                <div class="text-2xl font-semibold mb-4">Professional Support</div>
                <p class="leading-normal text-lg">
                    With PRO support, it's easy to support, tune, and add features to PrimeVue as an in-house library. With the exclusive services of a PRO account, you no longer need to post questions in the community forum and the community issue
                    tracker at GitHub. Service is delivered via a private issue tracker based on a one-business-day response time.
                </p>
            </div>
        </div>

        <div class="grid grid-cols-3 gap-8 mb-8">
            <div class="card !m-0 col-span-full lg:col-span-1">
                <div class="flex justify-between">
                    <div class="text-2xl font-semibold mb-4">Service Features</div>
                    <span class="font-bold text-lg">200$/h</span>
                </div>
                <div class="gap-8 px-4">
                    <ul class="flex-auto list-none m-0 p-0 text-lg">
                        <li class="flex items-center mb-4">
                            <i class="pi pi-check-circle mr-4 text-green-500"></i>
                            <span class="leading-normal">Private Issue Tracker</span>
                        </li>
                        <li class="flex items-center mb-4">
                            <i class="pi pi-check-circle mr-4 text-green-500"></i>
                            <span class="leading-normal">Response within 1 business day</span>
                        </li>
                        <li class="flex items-center mb-4">
                            <i class="pi pi-check-circle mr-4 text-green-500"></i>
                            <span class="leading-normal">Unlimited Number of Tickets</span>
                        </li>
                        <li class="flex items-center mb-4">
                            <i class="pi pi-check-circle mr-4 text-green-500"></i>
                            <span class="leading-normal">Hourly Support Model</span>
                        </li>
                        <li class="flex items-center mb-4">
                            <i class="pi pi-check-circle mr-4 text-green-500"></i>
                            <span class="leading-normal">1 year term</span>
                        </li>
                        <li class="flex items-cente mb-4">
                            <i class="pi pi-check-circle mr-4 text-green-500"></i>
                            <span class="leading-normal">Minimum 30 Hours for initiation</span>
                        </li>
                        <li class="flex items-cente mb-4">
                            <i class="pi pi-check-circle mr-4 text-green-500"></i>
                            <span class="leading-normal">Up to 5 accounts</span>
                        </li>
                        <li class="flex items-center mb-4">
                            <i class="pi pi-check-circle mr-4 text-green-500"></i>
                            <span class="leading-normal">Maintenance for Any Version</span>
                        </li>
                        <li class="flex items-center mb-4">
                            <i class="pi pi-check-circle mr-4 text-green-500"></i>
                            <span class="leading-normal">New Features</span>
                        </li>
                        <li class="flex items-center">
                            <i class="pi pi-check-circle mr-4 text-green-500"></i>
                            <span class="leading-normal">POC implementations of a requirement</span>
                        </li>
                    </ul>
                </div>
                <a href="mailto:primetek.com.tr" class="block mt-4 w-full bg-primary rounded-border py-3 px-4 hover:bg-primary-emphasis text-center transition-all duration-300 text-primary-contrast font-semibold text-lg leading-none"> Buy Now </a>
            </div>
            <div class="card !m-0 col-span-full lg:col-span-2">
                <div class="text-2xl font-semibold mb-4">How It Works</div>
                <ul class="flex flex-col gap-4 list-none m-0 p-0 text-lg">
                    <li>
                        <div class="font-semibold mb-1">1. Purchase PRO Support</div>
                        <span class="leading-normal">Contact <a href="mailto:contact@primetek.com.tr" target="_blank" rel="noopener noreferrer" class="doc-link">PrimeTek</a> to purchase support.</span>
                    </li>
                    <li>
                        <div class="font-semibold mb-1">2. Setup</div>
                        <span class="leading-normal">A private repository with an exclusive issue tracker is created for you at GitHub.</span>
                    </li>
                    <li>
                        <div class="font-semibold mb-1">3. Request Support</div>
                        <span class="leading-normal">Create a ticket using the exclusive private issue tracker with a description of the issue.</span>
                    </li>
                    <li>
                        <div class="font-semibold mb-1">4. Estimate and Approval</div>
                        <span class="leading-normal">An estimate is provided to resolve the issue, upon your approval the PrimeTek team commences work.</span>
                    </li>
                    <li>
                        <div class="font-semibold mb-1">5. Resolution</div>
                        <span class="leading-normal">Issue is resolved and the approved hours are deducted from your account.</span>
                    </li>
                    <li>
                        <div class="font-semibold mb-1">6. Delivery</div>
                        <span class="leading-normal"
                            >If the issue requires an updated in the library, it gets published to npm by as part of the public PrimeVue package. A patch update on an older version can also be requested if you are not using the latest version.
                        </span>
                    </li>
                </ul>
            </div>
        </div>

        <div class="card !mb-8">
            <div class="text-2xl font-semibold mb-4">Consulting</div>

            <p class="m-0 leading-normal mb-8 text-lg">
                Unlock the full potential of your software projects in addition to PRO Support with the premier consulting services of our partners. The team of seasoned consultants is available to provide tailored expertise and guidance, ensuring
                your software development initiatives are successful, efficient, and innovative.
            </p>

            <div class="flex flex-col md:flex-row gap-8 mb-8">
                <div class="flex-1">
                    <div class="font-semibold mb-2 text-xl">Deep Expertise</div>
                    <p class="!m-0 leading-normal mb-4 text-lg">
                        Our consultants are experts with extensive experience in various aspects of software development, including design, architecture, coding, testing, and deployment. They bring a wealth of knowledge and best practices to your
                        project.
                    </p>
                </div>
                <div class="flex-1">
                    <div class="font-semibold mb-2 text-xl">Customized Solutions</div>
                    <p class="!m-0 leading-normal mb-4 text-lg">
                        We understand that every project is unique. Our consultants work closely with you to understand your specific requirements and challenges, delivering solutions that are perfectly aligned with your business goals..
                    </p>
                </div>
                <div class="flex-1">
                    <div class="font-semibold mb-2 text-xl">Scalable Engagements</div>
                    <p class="!m-0 leading-normal mb-4 text-lg">Whether you need short-term advice for a specific problem or long-term strategic guidance, our consulting services are flexible and scalable to meet your needs.</p>
                </div>
            </div>

            <div class="border-t border-surface pt-4 flex flex-col items-center">
                <p class="m-0 leading-normal mb-8 text-lg">
                    We are proud to collaborate with <a href="https://www.epicmax.co/contacts" target="_blank" rel="noopener noreferrer" class="doc-link">EpicMax</a> that share our commitment to excellence and open source values.
                </p>

                <div class="flex items-center gap-4">
                    <div class="flex flex-col gap-4">
                        <a href="https://www.epicmax.co/contacts" target="_blank" rel="noopener noreferrer">
                            <svg width="120" height="24" viewBox="0 0 120 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path
                                    d="M57.5849 0C59.4474 0 60.9245 0.509861 62.0163 1.5296C63.1081 2.54935 63.654 3.95012 63.654 5.73199C63.654 5.9252 63.6326 6.27942 63.5898 6.79467L63.5577 6.95567C63.5363 7.10595 63.4774 7.22939 63.3811 7.326C63.2847 7.42261 63.1723 7.47091 63.0439 7.47091L58.0987 7.63192C57.7776 7.63192 57.6384 7.48164 57.6813 7.18109L57.7776 6.37603C57.8204 6.01108 57.7669 5.72125 57.6171 5.50657C57.4672 5.2919 57.2531 5.18455 56.9748 5.18455C56.6751 5.18455 56.4236 5.2919 56.2202 5.50657C56.0168 5.72125 55.8937 6.01108 55.8509 6.37603L54.5986 16.7129C54.5557 17.0564 54.6039 17.3355 54.7431 17.5502C54.8822 17.7649 55.1016 17.8722 55.4013 17.8722C55.7011 17.8722 55.9526 17.7702 56.156 17.5663C56.3594 17.3623 56.4824 17.0779 56.5253 16.7129L56.6216 15.8435C56.643 15.6932 56.7019 15.5805 56.7982 15.5054C56.8945 15.4302 57.0069 15.3926 57.1354 15.3926L62.0484 15.5537C62.1983 15.5537 62.3107 15.5805 62.3856 15.6342C62.4605 15.6878 62.4873 15.7683 62.4659 15.8757L62.4338 16.1977C62.1769 18.2801 61.3474 19.9439 59.9451 21.189C58.5429 22.4342 56.8143 23.0568 54.7591 23.0568C52.8966 23.0568 51.4249 22.5415 50.3438 21.5111C49.2627 20.4806 48.7222 19.0744 48.7222 17.2926C48.7222 17.0779 48.7436 16.7129 48.7864 16.1977L49.9424 6.79467C50.1993 4.71224 51.0235 3.05921 52.415 1.83553C53.8065 0.611843 55.5298 0 57.5849 0ZM31.2589 0.161236C32.9715 0.161236 34.3255 0.710858 35.321 1.8101C36.3164 2.90936 36.8142 4.36611 36.8142 6.18041C36.8142 6.69269 36.7928 7.08756 36.75 7.36504C36.5787 8.7311 36.1773 9.93705 35.5458 10.9829C34.9142 12.0288 34.1007 12.8346 33.1053 13.4002C32.1098 13.9659 31.0127 14.2487 29.8139 14.2487H28.0798C27.9728 14.2487 27.8979 14.3127 27.8551 14.4408L26.9238 22.0928C26.9024 22.2422 26.8435 22.3596 26.7472 22.445C26.6509 22.5304 26.5385 22.5731 26.41 22.5731H21.4649C21.3364 22.5731 21.2347 22.5304 21.1598 22.445C21.0849 22.3596 21.0581 22.2422 21.0795 22.0928L23.7127 0.641494C23.7341 0.492077 23.7929 0.374681 23.8893 0.289306C23.9856 0.203931 24.098 0.161236 24.2265 0.161236H31.2589ZM46.3805 0.161236C46.5089 0.161236 46.6106 0.203931 46.6855 0.289306C46.7605 0.374681 46.7872 0.492077 46.7658 0.641494L44.1327 22.0928C44.1113 22.2422 44.0524 22.3596 43.9561 22.445C43.8597 22.5304 43.7473 22.5731 43.6189 22.5731H38.6737C38.5453 22.5731 38.4436 22.5304 38.3687 22.445C38.2937 22.3596 38.267 22.2422 38.2884 22.0928L40.9215 0.641494C40.9429 0.492077 41.0018 0.374681 41.0981 0.289306C41.1945 0.203931 41.3069 0.161236 41.4353 0.161236H46.3805ZM73.4134 0.161236C73.6703 0.161236 73.8416 0.278632 73.9272 0.513424L75.5649 4.57957C75.6077 4.6436 75.6559 4.67562 75.7094 4.67562C75.7629 4.67562 75.8004 4.6436 75.8218 4.57957L78.4871 0.513424C78.6155 0.278632 78.8082 0.161236 79.0651 0.161236H83.946C84.0745 0.161236 84.1762 0.203931 84.2511 0.289306C84.326 0.374681 84.3528 0.492077 84.3314 0.641494L81.6982 22.0928C81.6768 22.2422 81.6179 22.3596 81.5216 22.445C81.4253 22.5304 81.3129 22.5731 81.1844 22.5731H76.2393C76.1108 22.5731 76.0091 22.5304 75.9342 22.445C75.8593 22.3596 75.8325 22.2422 75.8539 22.0928L77.4595 9.06193C77.4595 8.95521 77.4381 8.89651 77.3953 8.88584C77.3524 8.87517 77.2989 8.91252 77.2347 8.9979L75.0832 12.0715L74.6979 12.6478H74.6658L73.0602 8.93386C73.0388 8.84848 73.0013 8.81113 72.9478 8.82181C72.8943 8.83248 72.8568 8.89118 72.8354 8.9979L71.2299 22.0928C71.2085 22.2422 71.1549 22.3596 71.0693 22.445C70.9837 22.5304 70.8659 22.5731 70.7161 22.5731H65.803C65.6532 22.5731 65.5408 22.5304 65.4658 22.445C65.3909 22.3596 65.3642 22.2422 65.3856 22.0928L68.0187 0.641494C68.0401 0.492077 68.099 0.374681 68.1953 0.289306C68.2917 0.203931 68.404 0.161236 68.5325 0.161236H73.4134ZM98.3291 0.161236C98.6288 0.161236 98.7893 0.29998 98.8107 0.577451L100.577 22.0608C100.577 22.4237 100.416 22.5731 100.095 22.5731H95.0537C94.754 22.5731 94.6148 22.4236 94.6363 22.1248V19.7236C94.6576 19.6595 94.6416 19.6115 94.5881 19.5795C94.5346 19.5475 94.4864 19.5315 94.4436 19.5315H91.7141C91.607 19.5315 91.5214 19.5848 91.4572 19.6915L90.7829 22.1248C90.7186 22.4236 90.5367 22.5731 90.237 22.5731H85.356C85.0
                                    fill="var(--p-primary-color)"
                                />
                            </svg>
                        </a>
                        <a href="https://www.epicmax.co/contacts" class="inline-block bg-primary rounded-border py-3 px-4 hover:bg-primary-emphasis transition-all duration-300 text-primary-contrast font-semibold text-lg leading-none">
                            Get a Quote
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="card m-0">
            <div class="text-2xl font-semibold mb-8">Frequently Asked Questions</div>
            <div class="flex flex-col md:flex-row text-lg gap-8">
                <div class="flex-1 flex flex-col gap-8">
                    <div>
                        <div class="leading-normal mb-2 font-semibold">How many issue tracker accounts do we get?</div>
                        <p class="!m-0 leading-normal">We provide one account per organization.</p>
                    </div>
                    <div>
                        <div class="leading-normal mb-2 font-semibold">What is the duration of the service?</div>
                        <p class="!m-0 leading-normal">Service ends either when all support hours are used or after 1 year.</p>
                    </div>
                    <div>
                        <div class="leading-normal mb-2 font-semibold">What happens if we extend after 1 year and we have unused hours?</div>
                        <p class="!m-0 leading-normal">Unused hours expire and are not transferred to the new term.</p>
                    </div>
                </div>
                <div class="flex-1 flex flex-col gap-8">
                    <div>
                        <div class="leading-normal mb-2 font-semibold">Is there a minimum hour requirement?</div>
                        <p class="!m-0 leading-normal">At least 30 hours are required to initiate the service.</p>
                    </div>
                    <div>
                        <div class="leading-normal mb-2 font-semibold">What are hours used for?</div>
                        <p class="!m-0 leading-normal">Hours are utilized when creating tickets, filing defects, requesting enhancements, POC implementations of a use case and questions.</p>
                    </div>
                    <div>
                        <div class="leading-normal mb-2 font-semibold">What happens if the issue takes longer or shorter than the approved estimate?</div>
                        <p class="!m-0 leading-normal">The confirmed estimate is still used even if it takes longer to resolve the issue.</p>
                    </div>
                </div>
                <div class="flex-1 flex flex-col gap-8">
                    <div>
                        <div class="leading-normal mb-2 font-semibold">Who provides the service?</div>
                        <p class="!m-0 leading-normal">Support service is provided by the PrimeVue team at PrimeTek.</p>
                    </div>
                    <div>
                        <div class="leading-normal mb-2 font-semibold">Can we request new features and enhancements?</div>
                        <p class="!m-0 leading-normal">Yes, initially the request needs to be approved by PrimeTek based on project roadmap fit. As a result, not all requests may be accepted.</p>
                    </div>
                    <div>
                        <div class="leading-normal mb-2 font-semibold">We are a reseller, can we purchase this support for our client?</div>
                        <p class="!m-0 leading-normal">That is possible, the service will be provided to your client even if you are the contact in purchase process.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>