added english translations for form

src/App.css

@@ -1064,6 +1064,9 @@ border: 1px solid var(--color-border);
 .text-black {
   color: var(--color-quinary) !important;
 }
+.text-quaternary {
+  color: var(--color-quaternary);
+}
 .mountains-of-christmas-bold {
   font-family: "Mountains of Christmas", serif;
   font-weight: 700;

src/pages/Hohoho/pages/ApplicationPage/components/ApplicationForm/AboutWebsite.tsx

@@ -60,12 +60,12 @@ const AboutYourWebsite = React.memo(({ isDisabled }: AboutProjectProps) => {
                             maxLength={200}
                         />
                         <p id="charCountWebsiteReason" className="char-counter">0 / 200</p>
-                        <div className="input-paragraph--small">
+                        <div className="input-paragraph--small quattrocento-regular">
                             <small>
-                                <em>This is a description. It provides more context and additional details about the subject, offering insight and clarity. This text serves as an example of how a more extensive description might look, showcasing the type of content that can be expected.</em>
+                                <em>{t("3-AYW-website-reason-description")}</em>
                             </small>
                             <div className="margin-top--space-3xs">
-                                <FillingTip text={`"This is a medium filling tip. It offers a brief explanation or suggestion, giving the user the essential information they need in a short, easily digestible format."`} />
+                                <FillingTip text={`"${t("3-AYW-website-reason-filling-tip")}"`} />
                             </div>
                         </div>
 
@@ -86,14 +86,13 @@ const AboutYourWebsite = React.memo(({ isDisabled }: AboutProjectProps) => {
                             rows={5}
                             maxLength={500}
                         />
-                        {/* TODO add char counter? */}
                         <p id="charWebsiteMainDescription" className="char-counter">0 / 500</p>
-                        <div className="input-paragraph--small">
+                        <div className="input-paragraph--small quattrocento-regular">
                             <small>
-                                <em>This is a description. It provides context and additional details, offering insight about the subject in a concise manner.</em>
+                                <em>{t("3-AYW-website-main-description-description")}</em>
                             </small>
                             <div className="margin-top--space-3xs">
-                                <FillingTip text="This is a long filling tip. It provides detailed instructions or advice for users, explaining all relevant steps in a process. It can include examples, extra information, and context to ensure users fully understand what to do. The goal is to give as much information as possible while still being concise and clear. When providing guidance, it's important to balance helpful details with brevity, so users aren't overwhelmed by too much text at once. This length is suitable for more complex or technical tips." />
+                                <FillingTip text={`"${t("3-AYW-website-main-description-filling-tip")}"`} />
                             </div>
                         </div>
                     </div>
@@ -107,12 +106,12 @@ const AboutYourWebsite = React.memo(({ isDisabled }: AboutProjectProps) => {
                             disabled={isDisabled}
                             style={{ cursor: isDisabled ? "not-allowed" : "text" }}
                         />
-                        <div className="input-paragraph--small">
+                        <div className="input-paragraph--small quattrocento-regular">
                             <small>
-                                <em>This is a brief description for context.</em>
+                                <em>{t("3-AYW-website-main-feature-description")}</em>
                             </small>
                             <div className="margin-top--space-3xs">
-                                <FillingTip text="I want a website for my new business that will allow customers to book appointments online." />
+                                <FillingTip text={`"${t("3-AYW-website-main-feature-filling-tip")}"`} />
                             </div>
                         </div>
                     </div>
@@ -130,12 +129,12 @@ const AboutYourWebsite = React.memo(({ isDisabled }: AboutProjectProps) => {
                                 />
                             </div>
                         ))}
-                        <div className="input-paragraph--small">
+                        <div className="input-paragraph--small quattrocento-regular">
                             <small>
-                                <em>This is a description. It provides more context and additional details about the subject, offering insight and clarity. This text serves as an example of how a more extensive description might look, showcasing the type of content that can be expected.</em>
+                                <em>{t("3-AYW-website-additional-features-description")}</em>
                             </small>
                             <div className="margin-top--space-3xs">
-                                <FillingTip text="This is a short filling tip. It provides quick, helpful information for the user in a concise manner." />
+                                <FillingTip text={`"${t("3-AYW-website-additional-features-filling-tip")}"`} />
                             </div>
                         </div>
                     </div>
@@ -152,12 +151,12 @@ const AboutYourWebsite = React.memo(({ isDisabled }: AboutProjectProps) => {
                             maxLength={200}
                         />
                         <p id="charWebsiteContentMaterial" className="char-counter">0 / 200</p>
-                        <div className="input-paragraph--small">
+                        <div className="input-paragraph--small quattrocento-regular">
                             <small>
-                                <em>This is a description. It provides context and additional details, offering insight about the subject in a concise manner.</em>
+                                <em>{t("3-AYW-content-material-description")}</em>
                             </small>
                             <div className="margin-top--space-3xs">
-                                <FillingTip text="This is a medium filling tip. It offers a brief explanation or suggestion, giving the user the essential information they need in a short, easily digestible format." />
+                                <FillingTip text={`"${t("3-AYW-content-material-filling-tip")}"`} />
                             </div>
                         </div>
                     </div>

src/pages/Hohoho/pages/ApplicationPage/components/ApplicationForm/ApplicationForm.tsx

@@ -90,7 +90,7 @@ function ApplicationForm() {
             if (!response.ok) {
                 console.log("response", response);
                 console.log("formData", formData);
-                showErrorMessage(isComplete ? "submitted" : "saved");
+                showErrorMessage(isComplete ? t("show-error-message-true") : t("show-error-message-false"));
                 sendErrorReport(formData, applicantEmail!, response);
                 return;
             }

src/pages/Hohoho/pages/ApplicationPage/components/ApplicationForm/FinalThoughts.tsx

@@ -52,10 +52,10 @@ const FinalThoughts = React.memo(({ isDisabled }: { isDisabled: boolean }) => {
                             rows={3}
                         />
                         <p id="charCountFinalThoughts" className="char-counter">0 / 300</p>
-                        <div className="input-paragraph--small">
+                        <div className="input-paragraph--small quattrocento-regular">
                             <small>
                                 <em>
-                                    <b className="text-white">This is not a mandatory field.</b>
+                                    <b className="text-quaternary">This is not a mandatory field.</b>
                                 </em>
                             </small>
                         </div>

src/pages/Hohoho/pages/ApplicationPage/components/ApplicationForm/FormErrorMessage.tsx

@@ -1,21 +1,22 @@
 import React from 'react';
 import Button from '../../../../components-elements/Button';
 import { hideErrorMessage } from '../../../../utils/MyApplicationUtils';
+import { useTranslation } from 'react-i18next';
 
 function FormErrorMessage() {
+    const { t } = useTranslation("hohoho/application-page");
 
     return (
         <div className="error-message-overlay display-none" id="div-error">
             <div className="error-message-content margin-sides-10 text-white">
-                <h1 className="mountains-of-christmas-bold mountains-o-c-b--h1 mountains-o-c-b--h1-error">Sorry!</h1>
+                <h1 className="mountains-of-christmas-bold mountains-o-c-b--h1 mountains-o-c-b--h1-error">{t("form-error-message-h1")}</h1>
                 <p className="quattrocento-regular">
-                    Your application couldn’t be <span id="span-error">processed</span>.<br /><br />
-                    <b>This issue has been reported, and your changes are backed up. </b>
-                    Danilo is on it and will have things sorted soon.
-                    Please try again shortly.<br /><br />
-                    Thanks for your patience!<br />
+                    {t("form-error-message-p-1")}<span id="span-error">{t("form-error-message-p-2")}</span>.<br /><br />
+                    <b>{t("form-error-message-p-3")} </b>
+                    {t("form-error-message-p-4")}<br /><br />
+                    {t("form-error-message-p-5")}<br />
                     <Button
-                        text="CLOSE"
+                        text={t("form-error-message-button")}
                         size="x-small"
                         variant="secondary"
                         inlineStyles={{ marginTop: "var(--space-s)", marginBottom: "var(--space-xs)" }}

src/pages/Hohoho/pages/ApplicationPage/components/ApplicationForm/LinksAndReference.tsx

@@ -5,6 +5,7 @@ import Header from '../../../../components-elements/Header/Header';
 
 import useFadeInAnimation from '../../../../hooks/useFadeInAnimation';
 import { useTranslation } from 'react-i18next';
+import FillingTip from './FillingTip';
 
 interface LinksAndReferencesProps {
     isDisabled: boolean;
@@ -51,14 +52,15 @@ const LinksAndReferences = React.memo(({ isDisabled }: LinksAndReferencesProps)
                                 />
                             </div>
                         ))}
-                        <div className="input-paragraph--small">
+                        <div className="input-paragraph--small quattrocento-regular">
                             <small>
                                 <em>
-                                    <b className="text-white">These are not mandatory fields</b> but I strongly recommend filling them out if you have any links to be shared.
-                                    Please provide up to 3 relevant links that showcase your current online presence.
-                                    This could include your existing website, social media pages, or any other online platforms related to your project.
+                                    <b className="text-quaternary">{t("4-LR-not-mandatory-plural")}</b> {t("4-LR-current-presence-description")}
                                 </em>
                             </small>
+                            <div className="margin-top--space-3xs">
+                                <FillingTip text={`${t("4-LR-current-presence-filling-tip")}`} />
+                            </div>
                         </div>
                     </div>
                     <div>
@@ -77,13 +79,13 @@ const LinksAndReferences = React.memo(({ isDisabled }: LinksAndReferencesProps)
                                 />
                             </div>
                         ))}
-                        <div className="input-paragraph--small">
+                        <div className="input-paragraph--small quattrocento-regular">
                             <small>
                                 <em>
-                                    <b className="text-white">These are not mandatory fields</b> but I strongly recommend filling them out if you have any links to be shared.
-                                    Please provide up to 3 links to websites, businesses, portfolios, etc. that you think align with your vision for your website.
+                                    <b className="text-quaternary">{t("4-LR-not-mandatory-plural")}</b> {t("4-LR-reference-websites-description")}
                                 </em>
                             </small>
+                            <FillingTip text={`${t("4-LR-current-presence-filling-tip")}`} />
                         </div>
                     </div>
                 </section>

src/pages/Hohoho/pages/ApplicationPage/components/ApplicationForm/PersonalInformation.tsx

@@ -57,12 +57,11 @@ export const PersonalInformation = React.memo(({ isDisabled }: { isDisabled: boo
                             disabled={isDisabled}
                             style={{ cursor: isDisabled ? "not-allowed" : "text" }}
                         />
-                        <div className="input-paragraph--small">
+                        <div className="input-paragraph--small quattrocento-regular">
                             <small>
                                 <em>{t("1-PI-phone-number-description")}</em>
                             </small>
                             <div className="margin-top--space-3xs">
-                                {/* TODO ES and PTBR translation for filling tip for phone number */}
                                 <FillingTip text={t("1-PI-phone-number-filling-tip")} />
                             </div>
                         </div>

src/pages/Hohoho/translations/application-page/en.json

@@ -4,7 +4,7 @@
   "h2-welcome-back": "Hello again!",
   "h2-complete": "Your application is complete!",
   "p1-start": "Welcome! To begin your application, click the registration button below. If you've already registered and have an application code, log in with your email and code by clicking the login button to start or edit your application. The full application form is available below, but you can only begin filling it out once you log in.",
-  "p1-welcome-back": "Your application details are ready for you below.<br />You can save your application and continue later by clicking the <b>floppy disk button</b> on the right side of the form. All fields are required except section <em>4. Links and References</em> and section <em>5. Final Thoughts</em>. You can submit your application by clicking the <b>submit button</b> at the bottom of the form after having filled all mandatory fields. If you haven't filled all mandatory fields, the button is not enabled.",
+  "p1-welcome-back": "<p>Your application details are ready below.</p><p>You can save your application and continue later by clicking the <strong>floppy disk button</strong> on the right side of the form. All fields are required except for <strong>Section 4: Links and References</strong> and <strong>Section 5: Final Thoughts</strong>.</p><p>You can submit your application by clicking the <strong>submit button</strong> at the bottom of the form, once all mandatory fields are completed. If you haven't filled in all the required fields, the button will remain disabled.</p><p>If you have any issues or questions, you can contact me at <a href='mailto:[email protected]' class='dd-link'>[email protected]</a>.</p><br /><p>Good luck and best regards!</p><p>Danilo</p>",
   "p1-complete": "Thank you for completing your application! You can review your application details below.",
   "register-submitting": "Sending your code...",
   "register-unknown-error": "Something went wrong. Please try again in a moment.",
@@ -31,18 +31,41 @@
   "2-AY-project-context": "What should I know about the context of the website project?",
   "h2-about-your-website": "3. About Your Website",
   "3-AYW-website-reason": "Why are you thinking about creating a website?",
+  "3-AYW-website-reason-description": "Briefly explain in your own words why you're thinking of creating a website, such as its purpose or main goal.",
+  "3-AYW-website-reason-filling-tip": "I'm creating a website to offer a free online therapy service, providing accessible mental health support to those in need. It will serve as a platform for people to seek help and improve their well-being.",
   "3-AYW-website-main-description": "What would you want to see when accessing the website?",
+  "3-AYW-website-main-description-description": "Describe what you’d like to experience or find when visiting the website, in your own words.",
+  "3-AYW-website-main-description-filling-tip": "I would like the website to feel warm, welcoming, and easy to use. When someone visits, I want them to feel at ease, with clear and simple options to explore. It should be easy to find information about the services I offer, how to get in touch, and how to schedule a session. The flow of the site should feel natural, guiding users from one section to another without confusion. Overall, I want it to be a space where people feel comfortable and confident in taking the next step toward therapy.",
   "3-AYW-website-main-feature": "What could be the main feature of the website?",
+  "3-AYW-website-main-feature-description": "Describe, in your own words, the main feature of the website you have in mind.",
+  "3-AYW-website-main-feature-filling-tip": "The main feature of the website should be a simple booking system to schedule therapy sessions.",
   "3-AYW-website-additional-features": "What could additional features and their purposes be?",
   "3-AYW-feature": "Feature",
   "3-AYW-purpose": "Purpose",
+  "3-AYW-website-additional-features-description": "List 3 additional features you think would be useful and explain how they would benefit the users.",
+  "3-AYW-website-additional-features-filling-tip": "Resource Area: A space with articles, videos, and tips I've created on mental health, offering ongoing support beyond sessions",
   "3-AYW-content-material": "Which materials would be available to build content for your website?",
+  "3-AYW-content-material-description": "Please provide details about any content materials you have, such as digital text, photos, videos, or other resources.",
+  "3-AYW-content-material-filling-tip": "I have written articles on mental health, created videos on coping strategies, and have a collection of photos that represent the themes of my work. I also have a logo and branding materials that could be used.",
   "h2-links-and-references": "4. Links and References",
   "4-LR-current-presence": "Do you have an online presence right now for your project?",
+  "4-LR-not-mandatory-plural": "These are not mandatory fields.",
+  "4-LR-current-presence-description": "If you have any online presence for your project, such as a website, social media page, portfolio, or any other relevant links, please provide them.",
+  "4-LR-current-presence-filling-tip": "Links should be in the format: https://www.example.com",
   "4-LR-reference-websites": "Do you have any websites as a reference for your own?",
+  "4-LR-reference-websites-description": "List any websites that you find relevant or inspiring for your own site design and functionalities.",
   "h2-final-thoughts": "5. Final Thoughts",
   "5-FT-final-thoughts": "Is there anything else you'd like to add?",
   "submit-button": "SUBMIT",
   "sent-no-current-presence": "You didn't send any links.",
-  "sent-no-reference-websites": "You didn't provide any reference websites."
+  "sent-no-reference-websites": "You didn't provide any reference websites.",
+  "show-error-message-true": "submitted",
+  "show-error-message-false": "saved",
+  "form-error-message-h1": "Sorry!",
+  "form-error-message-p-1": "Your application couldn’t be ",
+  "form-error-message-p-2": "processed",
+  "form-error-message-p-3": "This issue has been reported, and your changes are backed up. ",
+  "form-error-message-p-4": "Danilo is on it and will have things sorted soon. Please try again shortly.",
+  "form-error-message-p-5": "Thanks for your patience!",
+  "form-error-message-button": "CLOSE"
 }