Merge pull request #61 from JumboCode/translate-page

Page Translations + About Page Restyle

src/components/NavBar/NavBar.jsx

@@ -4,9 +4,11 @@ import dillarLogo from '/dillar_logo.png';
 import NavLink from './NavLink';
 import LanguageDropdown from '../Dropdown/LanguageDropdown';
 import { IoMenuOutline } from "react-icons/io5";
+import { useTranslation } from "react-i18next";
 
 const NavBar = () => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const { t } = useTranslation();
 
   return (
     <div>
@@ -18,10 +20,10 @@ const NavBar = () => {
           </Link>
           {/* Desktop navigation */}
           <div className="hidden sm:flex sm:items-center lg:space-x-20 md:space-x-10">
-            <NavLink href="/levels">Classes</NavLink>
-            <NavLink href="/contact">Contact</NavLink>
-            <NavLink href="/about">About</NavLink>
-            <NavLink href="/login">Login</NavLink>
+            <NavLink href="/levels">{t("nav_link_classes")}</NavLink>
+            <NavLink href="/contact">{t("nav_link_contact")}</NavLink>
+            <NavLink href="/about">{t("nav_link_about")}</NavLink>
+            <NavLink href="/login">{t("nav_link_login")}</NavLink>
           </div>
           <div className='hidden sm:inline'>
             <LanguageDropdown />
@@ -39,10 +41,10 @@ const NavBar = () => {
         </div>
         {/* Mobile menu */}
         <div className={`sm:hidden w-full pb-3 shadow-md bg-white ${isMenuOpen ? 'block' : 'hidden'}`}>
-          <NavLink href="/levels" isMobile={true}>Classes</NavLink>
-          <NavLink href="/contact" isMobile={true}>Contact</NavLink>
-          <NavLink href="/about" isMobile={true}>About</NavLink>
-          <NavLink href="/login" isMobile={true}>Login</NavLink>
+          <NavLink href="/levels" isMobile={true}>{t("nav_link_classes")}</NavLink>
+          <NavLink href="/contact" isMobile={true}>{t("nav_link_contact")}</NavLink>
+          <NavLink href="/about" isMobile={true}>{t("nav_link_about")}</NavLink>
+          <NavLink href="/login" isMobile={true}>{t("nav_link_login")}</NavLink>
           <div className="h-2 mt-2 mx-3 border-t border-gray-200"></div>
           <LanguageDropdown />
         </div>

src/pages/About.jsx

@@ -1,26 +1,26 @@
-import founder from '../assets/founder.jpg';
+import stepping_stones_landscape from '../assets/stones.png';
 import { useTranslation } from "react-i18next";
+import { IoStar } from "react-icons/io5";
 
 function About() {
     const { t } = useTranslation();
     return (
         <div className="flex flex-col sm:flex-row-reverse sm:justify-between h-full xl:px-16 md:px-6 px-4">
             <div className="flex items-center justify-center sm:w-1/3">
-                <img src={founder} alt="dummy-founder-image" title="dummy-image"></img>
+                <img src={stepping_stones_landscape} alt="stepping_stones_landscape" className="rounded-3xl shadow-xl aspect-square" title="stepping_stones_landscape"></img>
             </div>
             <div className="my-auto sm:w-7/12 sm:text-lg">
-                <h1 className="text-4xl py-5 sm:text-5xl text-center sm:text-left">{t("about_heading")}</h1>
-                <p>Dillar English Academy was founded by Dilnawa and Dilziba Dilmurat
-                    Kizghin to help Uyghurs around the world learn English without cost.
-                    With the help and commitment of our volunteer teachers, our goal is
-                    to bridge the educational disparity gap among Uyghurs worldwide.
+                <h1 className="text-4xl py-5 sm:text-5xl text-center sm:text-left font-extrabold text-blue-700 inline-flex items-center">
+                    <IoStar
+                        style={{ fontSize: '40px' }}
+                        color="steelblue"
+                        className="mr-2"
+                    />
+                    {t("about_heading")}
+                </h1>
+                <p>{t("about_desc_1")}
                     <br /><br />
-                    Dillar Academy has grown exponentially in a short time! Recognizing a
-                    need in the international Uyghur community, we have recruited Uyghur
-                    college students in America to volunteer their time and teach various
-                    levels of English. Although our teachers are not certified English
-                    language instructors, they are native English speakers who invest
-                    time into teaching the best information that they can.
+                    {t("about_desc_2")}
                 </p>
             </div>
         </div>

src/pages/Contact.jsx

@@ -22,14 +22,8 @@ export default function Contact() {
 
   const handleSubmit = async (e) => {
     e.preventDefault();
-    const contactData = {
-      name: e.target.name.value,
-      email: e.target.email.value,
-      subject: e.target.subject.value,
-      message: e.target.message.value
-    };
     try {
-      const response = await postContact(contactData);
+      const response = await postContact(formData);
 
       if (response.ok) {
         alert("Message submitted successfully!");
@@ -43,73 +37,54 @@ export default function Contact() {
     }
   };
 
-
   return (
-    <div className="w-full h-full bg-white flex flex-col sm:flex-row justify-center items-center">
-      <div className="sm:w-1/3 w-full p-8">
-        <h2 className="text-3xl font-semibold mb-6">{t("contact_heading")}</h2>
-        <p className="mb-2 text-lg">
-          {t("email_field")}:
-          <a href="mailto:[email protected]" className="text-black">
-            [email protected]
-          </a>
-        </p>
-        <p className="text-lg">
-          Instagram:
-          <a href="https://www.instagram.com/dillarenglish" className="text-black">
-            @dillarenglish
-          </a>
-        </p>
-      </div>
-
-      <div className="sm:w-2/3 w-full bg-blue-200 p-10 flex justify-center">
-        {/* form box */}
-        <Form width="w-3/5">
-          <h2 className="text-2xl font-semibold mb-2">{t("form_heading")}</h2>
-          <p className="mb-4 text-gray-600 opacity-70">
-            {t("form_description")}
-          </p>
-          <form
-            onSubmit={handleSubmit}
-            className="space-y-3"
-          >
-            <FormInput
-              type="text"
-              name="name"
-              placeholder={t("name_field")}
-              value={formData.name}
-              onChange={handleChange}
-              isRequired={true}
-            />
-            <FormInput
-              type="email"
-              name="email"
-              placeholder={t("email_field")}
-              value={formData.email}
-              onChange={handleChange}
-              isRequired={true}
-            />
-            <FormInput
-              type="text"
-              name="subject"
-              placeholder={t("subject_field")}
-              value={formData.subject}
-              onChange={handleChange}
-              isRequired={true}
-            />
-            <FormInput
-              type="textarea"
-              name="message"
-              placeholder={t("message_field")}
-              value={formData.message}
-              onChange={handleChange}
-              required
-            />
-            <FormSubmit label={t("submit_button")} />
-          </form>
-        </Form>
-      </div>
-    </div>
+    <div className="w-full h-full bg-[url('/images/ice_water.png')] bg-no-repeat bg-center bg-cover flex flex-col sm:flex-row justify-center items-center">
+      {/* form box */}
+      <Form width="w-1/3">
+        <h2 className="text-2xl font-semibold mb-2">{t("contact_heading")}</h2>
+        <p className="mb-4 text-gray-600 opacity-70">
+          {t("contact_form_description")}
+        </p >
+        <form
+          onSubmit={handleSubmit}
+          className="space-y-3"
+        >
+          <FormInput
+            type="text"
+            name="name"
+            placeholder={t("name_field")}
+            value={formData.name}
+            onChange={handleChange}
+            isRequired={true}
+          />
+          <FormInput
+            type="email"
+            name="email"
+            placeholder={t("email_field")}
+            value={formData.email}
+            onChange={handleChange}
+            isRequired={true}
+          />
+          <FormInput
+            type="text"
+            name="subject"
+            placeholder={t("subject_field")}
+            value={formData.subject}
+            onChange={handleChange}
+            isRequired={true}
+          />
+          <FormInput
+            type="textarea"
+            name="message"
+            placeholder={t("message_field")}
+            value={formData.message}
+            onChange={handleChange}
+            required
+          />
+          <FormSubmit label={t("submit_button")} />
+        </form>
+      </Form>
+    </div >
   );
 }
 

src/pages/Login.jsx

@@ -4,11 +4,10 @@ import { postLogin } from "../api/user-wrapper";
 import Form from "@/components/Form/Form";
 import FormInput from '@/components/Form/FormInput';
 import FormSubmit from "../components/Form/FormSubmit";
+import { useTranslation } from "react-i18next";
 
-
-
-// TODO (Spencer & Claire): implement the Welcome page and check for if it should be displayed
 export default function Login() {
+  const { t } = useTranslation();
   const [formData, setFormData] = useState({
     username: '',
     password: '',
@@ -49,9 +48,9 @@ export default function Login() {
     <>
       <main className="bg-blue-200 h-full flex justify-center items-center">
         <Form width="w-2/5">
-          <h1 className="text-2xl sm:text-3xl">Login</h1>
-          <h3 className="text-sm sm:text-base text-slate-400 my-3">Don't have an account?
-            <Link href="/signup" className="ml-1 font-extrabold text-blue-400">Sign up</Link>
+          <h1 className="text-2xl sm:text-3xl">{t("sign_up_login2")}</h1>
+          <h3 className="text-sm sm:text-base text-slate-400 my-3">{t("login_signup1")}
+            <Link href="/signup" className="ml-1 font-extrabold text-blue-400">{t("sign_up_text")}</Link>
           </h3>
           <form method="POST"
             onSubmit={handleSubmit}
@@ -62,16 +61,16 @@ export default function Login() {
               name="username"
               value={formData.username}
               onChange={handleChange}
-              placeholder="Username"
+              placeholder={t("username_field")}
               isRequired={true} />
             <FormInput
               type="password"
               name="password"
               value={formData.password}
               onChange={handleChange}
-              placeholder="Password"
+              placeholder={t("password_field")}
               isRequired={true} />
-            <FormSubmit label={"Login"} />
+            <FormSubmit label={t("sign_up_login2")} />
           </form>
         </Form>
       </main>

src/pages/PageNotFound.jsx

@@ -1,22 +1,26 @@
 
 import { useLocation } from 'wouter';
 import Button from '../components/Button/Button';
+import { useTranslation } from "react-i18next";
+
 
 const PageNotFound = () => {
   const [, setLocation] = useLocation();
+  const { t } = useTranslation();
+
 
   return (
     <div className="flex flex-col items-center justify-center h-full">
-      <h1 className="text-6xl mb-2 font-bold pt-5 py-5" >Page Not Found</h1>
-      <h2 className="text-3xl mb-2 font-normal"> The page you're looking for doesn't exist.</h2>
+      <h1 className="text-6xl mb-2 font-bold pt-5 py-5" >{t("page_not_found_text")}</h1>
+      <h2 className="text-3xl mb-2 font-normal"> {t("page_not_found_desc")}</h2>
       <div className='flex space-x-5 whitespace-nowrap pt-8'>
         <Button
-          label={"Return Home"}
+          label={t("return_home_text")}
           onClick={() => setLocation("/")}
           isOutline={false}
         />
         <Button
-          label={"Get Help"}
+          label={t("get_help_text")}
           onClick={() => setLocation("/")}
           isOutline={true}
         />

src/pages/SignUp.jsx

@@ -5,8 +5,10 @@ import PasswordChecklist from "react-password-checklist"
 import Form from "@/components/Form/Form"
 import FormInput from "@/components/Form/FormInput";
 import FormSubmit from "../components/Form/FormSubmit";
+import { useTranslation } from "react-i18next";
 
 export default function SignUp() {
+  const { t } = useTranslation();
   const [formData, setFormData] = useState({
     firstName: '',
     lastName: '',
@@ -47,9 +49,9 @@ export default function SignUp() {
       <Form
         width={"w-2/5"}
       >
-        <h3 className="text-3xl">Sign up</h3>
-        <p className="my-3 text-gray-500">Already have an account?
-          <Link className="ml-1 font-extrabold text-blue-400" href="/login">Log In</Link>
+        <h3 className="text-3xl">{t("sign_up_text")}</h3>
+        <p className="my-3 text-gray-500">{t("sign_up_login1")}
+          <Link className="ml-1 font-extrabold text-blue-400" href="/login">{t("sign_up_text")}</Link>
         </p>
         {/* Form Values and the Borders */}
         <form method="POST" onSubmit={handleSubmit} className="space-y-3">
@@ -59,15 +61,15 @@ export default function SignUp() {
               type="text"
               name="firstName"
               value={formData.firstName}
-              placeholder="First Name"
+              placeholder={t("f_name_field")}
               onChange={handleChange}
             />
             <FormInput
               isRequired={true}
               type="text"
               name="lastName"
               value={formData.lastName}
-              placeholder="Last Name"
+              placeholder={t("l_name_field")}
               onChange={handleChange}
             />
           </div>
@@ -76,31 +78,31 @@ export default function SignUp() {
             type="text"
             name="username"
             value={formData.username}
-            placeholder="Username"
+            placeholder={t("username_field")}
             onChange={handleChange}
           />
           <FormInput
             isRequired={true}
             type="email"
             name="email"
             value={formData.email}
-            placeholder="Email"
+            placeholder={t("email_field")}
             onChange={handleChange}
           />
           <FormInput
             isRequired={true}
             type="password"
             name="password"
             value={formData.password}
-            placeholder="Password"
+            placeholder={t("password_field")}
             onChange={handleChange}
           />
           <FormInput
             isRequired={true}
             type="password"
             name="retypedPassword"
             value={formData.retypedPassword}
-            placeholder="Retype Password"
+            placeholder={t("retype_password_field")}
             onChange={handleChange}
           />
           <div className="mt-2">
@@ -116,9 +118,16 @@ export default function SignUp() {
               value={formData.password}
               valueAgain={formData.retypedPassword}
               onChange={(isValid) => setIsValid(isValid)}
+              messages={{
+                minLength: t("password_qual1_text"),
+                capitalAndLowercase: t("password_qual2_text"),
+                number: t("password_qual3_text"),
+                specialChar: t("password_qual4_text"),
+                match: t("password_qual5_text"),
+              }}
             />
           </div>
-          <FormSubmit label={"Sign Up"} isDisabled={!isValid} />
+          <FormSubmit label={t("sign_up_text")} isDisabled={!isValid} />
         </form>
       </Form>
     </div>