Desktop.tsx

import { FunctionComponent, useCallback } from 'react';
import styles from './Desktop.module.css';


const Desktop:FunctionComponent = () => {

    const onChatButtonContainerClick = useCallback(() => {
            // Add your code here
    }, []);

    return (
            <div className={styles.desktop1}>
                <div className={styles.backgroundBlockSmall} />
                <div className={styles.backgroundBlockMedium} />
                <div className={styles.backgroundBlockLarge} />
                <div className={styles.container}>
                        <div className={styles.container1}>
                            <div className={styles.container2}>
                                    <div className={styles.logoBackground} />
                                    <div className={styles.initials}>As</div>
                            </div>
                            <div className={styles.name}>Adookie Crapobat</div>
                        </div>
                        <div className={styles.containerChild} />
                        <div className={styles.documentTitle}>InterviewHell_Contract_2024.pdf</div>
                </div>
                <div className={styles.container3}>
                        <div className={styles.container4}>
                            <div className={styles.logo}>
                                    <div className={styles.interviewHellWrapper}>
                                        <div className={styles.interviewHell}>Interview Hell</div>
                                    </div>
                            </div>
                            <b className={styles.title}>Interview Hell “Contract”</b>
                            <div className={styles.description}>
                                    <p className={styles.disclaimerThisIs}>Disclaimer: This is not a real contract. Seriously, don’t call your lawyer. This is just our way of making sure you’re ready to enter Interview Hell and grant us permission for your mic and camera. Think of it as a playful initiation ritual. Now, let’s have some fun with this…</p>
                                    <p className={styles.disclaimerThisIs}>&nbsp;</p>
                                    <p className={styles.disclaimerThisIs}>Here Are the “Terms” You’re Definitely Not Legally Bound By:</p>
                                    <p className={styles.blankLine1}>&nbsp;</p>
                                    <p className={styles.disclaimerThisIs}>
                                        <b>1.   Mic and Camera Access</b>
                                    </p>
                                    <p className={styles.disclaimerThisIs}>Yep, we need your mic, and camera if you plan on doing video interviews. Why? So we can see and hear you suffer through—I mean, excel at—our brutal interview questions. We promise not to record your reactions for any nefarious purposes… just for ‘educational’ ones. Totally legit.</p>
                                        </div>
                                        <div className={styles.container5}>
                                                <div className={styles.container6}>
                                                    <div className={styles.dropdown}>
                                                            <div className={styles.button}>
                                                                <img className={styles.iconmic} alt="" src="icon/mic.svg" />
                                                                <div className={styles.loginWithEmail}>Microphone</div>
                                                            </div>
                                                            <div className={styles.button1}>
                                                                <div className={styles.loginWithEmail}>Request Permissions</div>
                                                            </div>
                                                    </div>
                                                    <div className={styles.dropdown}>
                                                            <div className={styles.button}>
                                                                <img className={styles.iconmic} alt="" src="icon/webcam.svg" />
                                                                <div className={styles.loginWithEmail}>Camera</div>
                                                            </div>
                                                            <div className={styles.button1}>
                                                                <div className={styles.loginWithEmail}>Request Permissions</div>
                                                            </div>
                                                    </div>
                                                </div>
                                                <div className={styles.note}>(Microphones are used for web calls with AI Interviewer, cameras are used for video calls.)</div>
                                        </div>
                                        <div className={styles.description}>
                                                <p className={styles.disclaimerThisIs}>
                                                    <span>
                                                            <b>2.   Confirmation of Your Bravery</b>
                                                    </span>
                                                </p>
                                                <p className={styles.disclaimerThisIs}>
                                                    <span>
                                                            <span>By “signing” with Adookie Crapobat™, you’re officially telling us you’re ready to dive into Interview Hell. No backing out now!</span>
                                                    </span>
                                                </p>
                                                <p className={styles.disclaimerThisIs}>
                                                    <span>
                                                            <span className={styles.theFinePrint}>&nbsp;</span>
                                                    </span>
                                                </p>
                                                <p className={styles.disclaimerThisIs}>
                                                    <span>
                                                            <b>3. Our AI: Smarter Than You, But It’s Fine</b>
                                                    </span>
                                                </p>
                                                <p className={styles.disclaimerThisIs}>
                                                    <span>
                                                            <span className={styles.theFinePrint}>&nbsp;</span>
                                                    </span>
                                                </p>
                                                <p className={styles.disclaimerThisIs}>
                                                    <span>
                                                            <span>Our AI is listening, analyzing, and probably judging. It’s trained on thousands of interviews and bad PowerPoints, so expect it to flag your vague answers faster than you can say ‘machine learning.’ Don’t worry—it won’t sell your data to Skynet… we think.</span>
                                                    </span>
                                                </p>
                                                <p className={styles.disclaimerThisIs}>
                                                    <span>
                                                            <span className={styles.theFinePrint}>&nbsp;</span>
                                                    </span>
                                                </p>
                                                <p className={styles.disclaimerThisIs}>
                                                    <span>
                                                            <b>4.   No Legal Obligations Here</b>
                                                    </span>
                                                </p>
                                                <p className={styles.disclaimerThisIs}>
                                                    <span>
                                                            <span>Just to be clear: no, you’re not actually bound by anything in this “contract.” This isn’t real. It’s just a silly formality before we throw you into the interview fire. If you’re still here, congratulations—you have a great sense of humor.</span>
                                                    </span>
                                                </p>
                                                <p className={styles.disclaimerThisIs}>
                                                    <span>
                                                            <span className={styles.theFinePrint}>&nbsp;</span>
                                                    </span>
                                                </p>
                                                <p className={styles.disclaimerThisIs}>
                                                    <span>
                                                            <b>5.   Not Responsible for Your Sanity</b>
                                                    </span>
                                                </p>
                                                <p className={styles.disclaimerThisIs}>
                                                    <span>
                                                            <span>Interview Hell may cause minor frustration, bouts of sarcasm, or an overwhelming desire to roll your eyes. But don’t worry, we’re not responsible for any of that.</span>
                                                    </span>
                                                </p>
                                                <p className={styles.disclaimerThisIs}>
                                                    <span>
                                                            <span>&nbsp;</span>
                                                    </span>
                                                </p>
                                                <p className={styles.theFinePrintYoullDefinite}>
                                                    <span>
                                                            <span className={styles.theFinePrint}>6. The Fine Print You’ll Definitely Ignore</span>
                                                    </span>
                                                </p>
                                                <p className={styles.disclaimerThisIs}>
                                                    <span>
                                                            <span>&nbsp;</span>
                                                    </span>
                                                </p>
                                                <p className={styles.disclaimerThisIs}>
                                                    <span>
                                                            <span>By signing, you agree to let our AI track your interview habits indefinitely. It might pop up during future interviews to remind you of that awkward pause you had today. And who knows? Maybe it’ll even suggest another round of Interview Hell. But don’t worry—your responses are safe… probably.</span>
                                                                </span>
                                                                </p>
                                                                <p className={styles.disclaimerThisIs}>
                                                                        <span>
                                                                            <span className={styles.theFinePrint}>&nbsp;</span>
                                                                        </span>
                                                                </p>
                                                                <p className={styles.disclaimerThisIs}>
                                                                        <span>
                                                                            <span>By clicking ‘Sign’ below, you’re confirming you’re ready for Interview Hell. You’ll also be giving us access to your mic and camera, because—let’s face it—we need to hear your answers and catch those priceless eye-rolls in real time.</span>
                                                                        </span>
                                                                </p>
                                                                <p className={styles.disclaimerThisIs}>
                                                                        <span>
                                                                            <span>&nbsp;</span>
                                                                        </span>
                                                                </p>
                                                                <p className={styles.disclaimerThisIs}>
                                                                        <span>
                                                                            <span>Sign Below (or don’t—it’s all fun anyway):</span>
                                                                        </span>
                                                                </p>
                                                                </div>
                                                                </div>
                                                                <div className={styles.container7}>
                                                                        <div className={styles.chatButton} onClick={onChatButtonContainerClick}>
                                                                            <div className={styles.exampleText}>Your beautiful username here</div>
                                                                        </div>
                                                                        <div className={styles.button4}>
                                                                            <div className={styles.loginWithEmail}>E-Sign</div>
                                                                        </div>
                                                                </div>
                                                                </div>
                                                                </div>);
                                                            };

                                                            export default Desktop;