Create david_test

[David-Joubert]

import React, { useState, useEffect, useRef } from 'react';

const App = () => {
const [page, setPage] = useState('front'); // 'front', 'inside1', 'inside2', 'inside3', 'inside4', 'back'
const pages = ['front', 'inside1', 'inside2', 'inside3', 'inside4', 'back'];
const goToNextPage = () => {
const currentIndex = pages.indexOf(page);
if (currentIndex < pages.length - 1) {
setPage(pages[currentIndex + 1]);
}
};
const goToPrevPage = () => {
const currentIndex = pages.indexOf(page);
if (currentIndex > 0) {
setPage(pages[currentIndex - 1]);
}
};

// Responsive text sizing - simple example
const getTextSize = () => {
    if (window.innerWidth < 640) {
        return 'text-sm';
    } else if (window.innerWidth < 1024) {
        return 'text-base';
    }
    return 'text-lg';
};

return (
    <div className="min-h-screen bg-gray-100 flex flex-col items-center justify-center font-inter p-4 sm:p-6 lg:p-8">
        <div className="bg-white shadow-xl rounded-lg p-6 sm:p-8 lg:p-10 max-w-4xl w-full">
            {page === 'front' && (
                <div className="text-center">
                    <img
                        src="https://placehold.co/600x200/F0F9FF/0C4A6E?text=216+Health+%26+COIDA+Sure+Logos"
                        alt="216 Health & COIDA Sure Logos"
                        className="rounded-md mb-6 w-full h-auto object-cover"
                    />
                    <h1 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-blue-800 mb-4 rounded-md">
                        COIDA Sure – Simplify Your Business's COIDA Compliance
                    </h1>
                    <p className={`text-xl sm:text-2xl text-gray-700 mb-8 rounded-md ${getTextSize()}`}>
                        Protect your team. Secure your business. Ensure peace of mind.
                    </p>
                    <img
                        src="https://placehold.co/700x350/E0F2F7/0C4A6E?text=Professional+Workplace+Image"
                        alt="Professional Workplace Image"
                        className="rounded-md w-full h-auto object-cover"
                    />
                </div>
            )}

            {page === 'inside1' && (
                <div>
                    <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-blue-700 mb-4 rounded-md">
                        About COIDA and Why It's Important
                    </h2>
                    <h3 className={`text-xl sm:text-2xl font-semibold text-blue-600 mb-3 rounded-md ${getTextSize()}`}>
                        Understanding COIDA: The Cornerstone of Workplace Protection
                    </h3>
                    <p className={`text-gray-800 mb-6 rounded-md ${getTextSize()}`}>
                        The **Compensation for Occupational Injuries and Diseases Act (COIDA)** is vital South African legislation. It establishes a framework to compensate employees who suffer injuries, contract diseases, or even die as a result of their work. COIDA operates on a "no-fault" basis, meaning employees are compensated regardless of employer fault, significantly protecting businesses from direct legal action and potentially ruinous lawsuits.
                    </p>
                    <img
                        src="https://placehold.co/600x200/FEE2E2/EF4444?text=Infographic+Risks+of+Non-Compliance"
                        alt="Infographic Risks of Non-Compliance"
                        className="rounded-md mb-6 w-full h-auto object-cover"
                    />
                    <h3 className={`text-xl sm:text-2xl font-semibold text-blue-600 mb-3 rounded-md ${getTextSize()}`}>
                        Why COIDA Compliance is Non-Negotiable for Your Business:
                    </h3>
                    <ul className={`list-disc list-inside text-gray-800 space-y-2 rounded-md ${getTextSize()}`}>
                        <li>**Legal Obligation:** If you employ one or more people, COIDA registration and ongoing compliance are mandatory. Non-adherence can lead to severe penalties, backdated assessments, fines, and even criminal charges.</li>
                        <li>**Employee Protection & Morale:** It provides a crucial safety net, ensuring your employees receive essential medical care and financial support during incapacitation, fostering trust and a secure work environment.</li>
                        <li>**Employer Protection:** It shields your business from costly civil claims, as the Compensation Fund (or a licensed mutual association like RMA or FEM) assumes liability for approved workplace incidents.</li>
                        <li>**Business Credibility:** A valid Letter of Good Standing (LOGS) is often a prerequisite for government tenders, corporate contracts, and building trust with clients and partners.</li>
                        <li>**Financial Stability:** Consistent compliance prevents unexpected financial burdens from out-of-pocket injury costs or penalties, ensuring your business's fiscal health and predictability.</li>
                    </ul>
                </div>
            )}

            {page === 'inside2' && (
                <div>
                    <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-blue-700 mb-4 rounded-md">
                        What is COIDA Sure? Your All-Inclusive Solution
                    </h2>
                    <h3 className={`text-xl sm:text-2xl font-semibold text-blue-600 mb-3 rounded-md ${getTextSize()}`}>
                        Introducing COIDA Sure: Comprehensive COIDA Management by 216 Health
                    </h3>
                    <p className={`text-gray-800 mb-6 rounded-md ${getTextSize()}`}>
                        **COIDA Sure** is 216 Health's specialized **product**, meticulously designed to completely manage your company's COIDA obligations. We eliminate the administrative complexity and ensure your business remains fully compliant with the Compensation Fund (CF), Rand Mutual Assurance (RMA), and Federated Employers Mutual (FEM).
                    </p>
                    <p className={`text-gray-800 mb-6 rounded-md ${getTextSize()}`}>
                        Our comprehensive **product** encompasses a full suite of essential **services** tailored to every aspect of COIDA compliance for your business:
                    </p>
                    <div className="overflow-x-auto rounded-md">
                        <table className="min-w-full bg-blue-50 border border-blue-200 rounded-md">
                            <thead>
                                <tr className="bg-blue-200">
                                    <th className="py-3 px-4 text-left text-blue-800 font-bold rounded-tl-md">Product/Service</th>
                                    <th className="py-3 px-4 text-left text-blue-800 font-bold rounded-tr-md">Description</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr className="border-b border-blue-200">
                                    <td className={`py-3 px-4 font-bold text-blue-700 ${getTextSize()}`}>COIDA Sure</td>
                                    <td className={`py-3 px-4 text-gray-800 ${getTextSize()}`}>**The overarching product ensures seamless business registration, ongoing management, and full compliance with the Compensation Fund, Rand Mutual Assurance, and Federated Employers Mutual throughout your business journey.**</td>
                                </tr>
                                <tr className="border-b border-blue-200 bg-blue-100">
                                    <td className={`py-3 px-4 font-semibold text-blue-700 ${getTextSize()}`}>Account Statements</td>
                                    <td className={`py-3 px-4 text-gray-800 ${getTextSize()}`}>We obtain and provide detailed records of your account with the Compensation Fund, along with informed feedback and clarification on your assessment history.</td>
                                </tr>
                                <tr className="border-b border-blue-200">
                                    <td className={`py-3 px-4 font-semibold text-blue-700 ${getTextSize()}`}>Amendment (Correction) to the Annual Assessment</td>
                                    <td className={`py-3 px-4 text-gray-800 ${getTextSize()}`}>Our experts assist in rectifying errors in your annual Return of Earnings (ROE), whether they originated from your side or were made by the Compensation Fund, preventing overpayment or penalties.</td>
                                </tr>
                                <tr className="border-b border-blue-200 bg-blue-100">
                                    <td className={`py-3 px-4 font-semibold text-blue-700 ${getTextSize()}`}>Annual Return of Earnings</td>
                                    <td className={`py-3 px-4 text-gray-800 ${getTextSize()}`}>We accurately prepare and submit your annual COIDA Return of Earnings (ROE), optimizing your classification and potentially saving your business significant amounts in assessment fees.</td>
                                </tr>
                                <tr className="border-b border-blue-200">
                                    <td className={`py-3 px-4 font-semibold text-blue-700 ${getTextSize()}`}>Change of Trading Name</td>
                                    <td className={`py-3 px-4 text-gray-800 ${getTextSize()}`}>We manage the process of updating the Compensation Fund's records to accurately reflect any changes to your company's trading name, ensuring your details are always current.</td>
                                </tr>
                                <tr className="border-b border-blue-200 bg-blue-100">
                                    <td className={`py-3 px-4 font-semibold text-blue-700 ${getTextSize()}`}>Failed Return of Earnings (Audit Discrepancy)</td>
                                    <td className={`py-3 px-4 text-gray-800 ${getTextSize()}`}>We provide expert support to help clear discrepancies or pass audits if your assessment has been blocked or complicated due to a pending audit, ensuring your compliance status is swiftly resolved.</td>
                                </tr>
                                <tr className="border-b border-blue-200">
                                    <td className={`py-3 px-4 font-semibold text-blue-700 ${getTextSize()}`}>Instalment Plan Arrangements</td>
                                    <td className={`py-3 px-4 text-gray-800 ${getTextSize()}`}>For businesses facing financially burdensome outstanding COIDA assessments, we assist in obtaining a written and approved instalment plan from the Compensation Fund, easing your financial load.</td>
                                </tr>
                                <tr className="border-b border-blue-200 bg-blue-100">
                                    <td className={`py-3 px-4 font-semibold text-blue-700 ${getTextSize()}`}>Letter of Good Standing</td>
                                    <td className={`py-3 px-4 text-gray-800 ${getTextSize()}`}>We efficiently acquire your official Letter of Good Standing from the Compensation Fund, a crucial document essential for eligibility in large contracts, government tenders, and demonstrating your business's compliance.</td>
                                </tr>
                                <tr className="border-b border-blue-200">
                                    <td className={`py-3 px-4 font-semibold text-blue-700 ${getTextSize()}`}>New Registration / Registration of New Company</td>
                                    <td className={`py-3 px-4 text-gray-800 ${getTextSize()}`}>We assist in registering your company correctly and efficiently with the Compensation Fund, ensuring legal compliance from day one and immediate access to COIDA benefits for your employees.</td>
                                </tr>
                                <tr className="border-b border-blue-200 bg-blue-100">
                                    <td className={`py-3 px-4 font-semibold text-blue-700 ${getTextSize()}`}>Reclassification of Nature of Business</td>
                                    <td className={`py-3 px-4 text-gray-800 ${getTextSize()}`}>If your business activities have evolved, we evaluate and facilitate necessary changes to your industry classification with the Compensation Fund, ensuring your assessment rate accurately reflects your current risk profile.</td>
                                </tr>
                                <tr className="border-b border-blue-200">
                                    <td className={`py-3 px-4 font-semibold text-blue-700 ${getTextSize()}`}>Register Users on CompEasy</td>
                                    <td className={`py-3 px-4 text-gray-800 ${getTextSize()}`}>We assist in registering you and other authorized users on the Compensation Fund's CompEasy online claims submission and administration system, empowering you with access and control (where desired).</td>
                                </tr>
                                <tr className="border-b border-blue-200 bg-blue-100">
                                    <td className={`py-3 px-4 font-semibold text-blue-700 ${getTextSize()}`}>Registration Renewal</td>
                                    <td className={`py-3 px-4 text-gray-800 ${getTextSize()}`}>We proactively manage and facilitate the revival and renewal of company registrations that have become inactive or were previously terminated, restoring your good standing.</td>
                                </tr>
                                <tr className="border-b border-blue-200">
                                    <td className={`py-3 px-4 font-semibold text-blue-700 ${getTextSize()}`}>Return of Earnings Audit Objection</td>
                                    <td className={`py-3 px-4 text-gray-800 ${getTextSize()}`}>We provide robust support to object to audit findings related to your Return of Earnings submissions, particularly in cases where alleged under-declaration spans multiple years, protecting your business from unfair assessments.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <p className={`text-xs text-gray-600 mt-4 italic rounded-md ${getTextSize()}`}>
                        *Note: Services are continuously reviewed and updated based on regulatory changes and client needs.*
                    </p>
                </div>
            )}

            {page === 'inside3' && (
                <div>
                    <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-blue-700 mb-4 rounded-md">
                        Who Benefits from COIDA Sure? Maximizing Your Advantage
                    </h2>
                    <h3 className={`text-xl sm:text-2xl font-semibold text-blue-600 mb-3 rounded-md ${getTextSize()}`}>
                        COIDA Sure delivers tangible benefits for:
                    </h3>

                    <h4 className={`text-lg sm:text-xl font-bold text-blue-700 mb-2 rounded-md ${getTextSize()}`}>
                        Your Business Leadership & Operations:
                    </h4>
                    <ul className={`list-disc list-inside text-gray-800 space-y-2 mb-6 rounded-md ${getTextSize()}`}>
                        <li>**Guaranteed Legal Adherence:** Operate with confidence, knowing your business is fully compliant with all COIDA regulations, mitigating the risk of penalties, fines, and legal disputes.</li>
                        <li>**Reduced Administrative Burden:** Eliminate the complex, time-consuming paperwork and processes associated with COIDA registration, ROE submissions, and claims management. We handle it all, freeing your internal resources.</li>
                        <li>**Significant Cost Efficiency:** Avoid hefty non-compliance penalties, rectify ROE errors that lead to overpayments, and ensure your business is accurately classified, optimizing your COIDA assessment costs.</li>
                        <li>**Enhanced Business Opportunities:** Secure your Letter of Good Standing swiftly and reliably, unlocking eligibility for crucial government tenders and large private contracts.</li>
                        <li>**Streamlined Processes:** Benefit from expert management of amendments, reclassifications, and audit objections, ensuring smooth operations even when complexities arise.</li>
                        <li>**Peace of Mind:** Focus on core business growth and innovation, secure in the knowledge that your COIDA obligations are expertly and consistently managed.</li>
                    </ul>
                    <img
                        src="https://placehold.co/600x200/B2EBF2/00796B?text=Confident+Business+Owner+Image"
                        alt="Confident Business Owner Image"
                        className="rounded-md mb-6 w-full h-auto object-cover"
                    />

                    <h4 className={`text-lg sm:text-xl font-bold text-blue-700 mb-2 rounded-md ${getTextSize()}`}>
                        Your Employees & Workforce:
                    </h4>
                    <ul className={`list-disc list-inside text-gray-800 space-y-2 rounded-md ${getTextSize()}`}>
                        <li>**Assured Financial Security:** Employees gain the assurance that they are financially protected in the event of a workplace injury or occupational disease, receiving due compensation.</li>
                        <li>**Access to Timely Medical Care:** Injured employees receive prompt and appropriate medical treatment without administrative delays or financial concerns.</li>
                        <li>**Comprehensive Support in Critical Incidents:** In cases of permanent disability or fatality, COIDA Sure ensures timely pay-outs for medical bills, disability compensation, and funeral expenses for the employee or their dependents.</li>
                        <li>**Improved Workplace Morale:** A compliant and caring employer fosters a safer, more supportive work environment, boosting employee morale and productivity.</li>
                    </ul>
                </div>
            )}

            {page === 'inside4' && (
                <div>
                    <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-blue-700 mb-4 rounded-md">
                        Your Investment & Our Seamless Process
                    </h2>
                    <h3 className={`text-xl sm:text-2xl font-semibold text-blue-600 mb-3 rounded-md ${getTextSize()}`}>
                        Your Investment in Comprehensive Compliance: COIDA Sure Full Product
                    </h3>
                    <p className={`text-gray-800 mb-4 rounded-md ${getTextSize()}`}>
                        Our **COIDA Sure Full Product** is designed to provide comprehensive, ongoing COIDA compliance management for your business.
                    </p>
                    <p className={`text-3xl sm:text-4xl font-extrabold text-green-700 text-center mb-6 rounded-md ${getTextSize()}`}>
                        Annual Premium: R2950/YEAR
                    </p>
                    <p className={`text-gray-700 italic mb-6 rounded-md ${getTextSize()}`}>
                        *This annual premium provides complete coverage for all the specialized services outlined. 216 Health's commitment is to deliver a predictable, all-inclusive solution, absorbing the variable complexities and costs of individual service delivery (e.g., specific rectifications or objections) to ensure your peace of mind.*
                    </p>
                    <p className={`text-sm text-gray-600 text-center rounded-md ${getTextSize()}`}>
                        *(Optional: Mention payment plans or volume discounts if applicable for larger businesses.)*
                    </p>

                    <h3 className={`text-xl sm:text-2xl font-semibold text-blue-600 mb-3 rounded-md ${getTextSize()}`}>
                        Our Simple 5-Step Process to COIDA Compliance:
                    </h3>
                    <ul className={`list-decimal list-inside text-gray-800 space-y-2 rounded-md ${getTextSize()}`}>
                        <li>**Initial Assessment & Onboarding:** We conduct a thorough review of your current COIDA status and gather all necessary business and employee information.</li>
                        <li>**Expert Document Preparation & Submission:** Our team meticulously prepares and submits all required applications, returns, and forms to the Compensation Fund, RMA, or FEM on your behalf.</li>
                        <li>**Achieve & Maintain Good Standing:** We ensure your business is correctly registered or brought into full compliance, then actively manage all ongoing requirements.</li>
                        <li>**Receive Key Certificates:** You promptly receive your official Letter of Good Standing and other essential compliance confirmations.</li>
                        <li>**Ongoing Management & Dedicated Support:** Benefit from continuous monitoring, proactive renewal assistance, expert guidance on new regulations, and responsive support for any COIDA-related matter.</li>
                    </ul>
                    <img
                        src="https://placehold.co/600x250/D1FAE5/065F46?text=5-Step+Process+Flowchart"
                        alt="5-Step Process Flowchart"
                        className="rounded-md mt-6 w-full h-auto object-cover"
                    />
                </div>
            )}

            {page === 'back' && (
                <div className="text-center">
                    <h2 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-blue-700 mb-6 rounded-md">
                        Partnership for Compliance. Partnership for Success.
                    </h2>
                    <p className={`text-xl sm:text-2xl font-semibold text-gray-800 mb-8 rounded-md ${getTextSize()}`}>
                        Ready to streamline your COIDA compliance and protect your business?
                    </p>
                    <p className={`text-2xl sm:text-3xl font-extrabold text-blue-600 mb-8 rounded-md ${getTextSize()}`}>
                        Partner with 216 Health's COIDA Sure today.
                    </p>
                    <img
                        src="https://placehold.co/200x200/F0F9FF/0C4A6E?text=QR+Code+for+Contact"
                        alt="QR Code for Contact"
                        className="rounded-md mx-auto mb-6 w-32 h-32 sm:w-40 sm:h-40 object-cover"
                    />
                    <div className="mb-8 rounded-md">
                        <h3 className={`text-xl sm:text-2xl font-bold text-blue-700 mb-3 rounded-md ${getTextSize()}`}>
                            Contact 216 Health:
                        </h3>
                        <p className={`text-gray-800 ${getTextSize()}`}>**Website:** [Your Website Address]</p>
                        <p className={`text-gray-800 ${getTextSize()}`}>**Phone:** [Your Phone Number]</p>
                        <p className={`text-gray-800 ${getTextSize()}`}>**Email:** [Your Email Address]</p>
                    </div>
                    <div className="mb-6 rounded-md">
                        <h3 className={`text-xl sm:text-2xl font-bold text-blue-700 mb-3 rounded-md ${getTextSize()}`}>
                            Our Valued Partners & Accreditations:
                        </h3>
                        <img
                            src="https://placehold.co/500x100/F0F9FF/0C4A6E?text=Partner+Logos"
                            alt="Partner Logos"
                            className="rounded-md mx-auto w-full h-auto object-cover"
                        />
                        <p className={`text-sm text-gray-600 mt-2 italic rounded-md ${getTextSize()}`}>
                            (Logos: 216 Health, King Price, RMA, Department of Employment and Labour, FEM - if applicable and approved for co-branding.)
                        </p>
                    </div>
                    <p className={`text-lg sm:text-xl font-semibold text-gray-700 rounded-md ${getTextSize()}`}>
                        Trusted by 1000+ businesses across diverse sectors in South Africa.
                    </p>
                </div>
            )}
        </div>

        <div className="mt-8 flex space-x-4">
            <button
                onClick={goToPrevPage}
                disabled={pages.indexOf(page) === 0}
                className="px-6 py-3 bg-blue-600 text-white font-bold rounded-full shadow-lg hover:bg-blue-700 transition duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
            >
                Previous
            </button>
            <button
                onClick={goToNextPage}
                disabled={pages.indexOf(page) === pages.length - 1}
                className="px-6 py-3 bg-blue-600 text-white font-bold rounded-full shadow-lg hover:bg-blue-700 transition duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
            >
                Next
            </button>
        </div>
    </div>
);

};

export default App;

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.