Merge pull request #65 from JumboCode/touch-ups

Touch ups

src/App.jsx

@@ -4,6 +4,7 @@ import NavBar from '@/components/NavBar/NavBar'
 import PageRoutes from '@/components/PageRoutes'
 import Welcome from '@/pages/Welcome';
 import "./i18n.js";
+import Footer from './components/Footer.jsx';
 
 const App = () => {
   const [isNew, setNew] = useState(false);
@@ -32,6 +33,7 @@ const App = () => {
             <PageRoutes />
           )}
         </div>
+        <Footer />
       </div>
     </>
   );

src/components/Footer.jsx

@@ -0,0 +1,15 @@
+import { useTranslation } from "react-i18next";
+
+const Footer = () => {
+    const { t } = useTranslation();
+
+    return (
+        <footer className="h-80 bg-dark-blue-800 text-white flex flex-col justify-center gap-y-5">
+            <p className="text-4xl font-extrabold mx-20">{t("home_title")}</p>
+            <p className="text-lg mx-20">{t("email_field")}: [email protected]</p>
+            <p className="text-lg mx-20">{t("instagram")}: @dillaracademy</p>
+        </footer>
+    )
+}
+
+export default Footer;

src/pages/About.jsx

@@ -5,7 +5,7 @@ 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 flex-col sm:flex-row-reverse sm:justify-between h-full py-40 xl:px-16 md:px-6 px-4">
             <div className="flex items-center justify-center sm:w-1/3">
                 <img src={stepping_stones_landscape} alt="stepping_stones_landscape" className="rounded-3xl shadow-xl aspect-square" title="stepping_stones_landscape"></img>
             </div>

src/pages/Contact.jsx

@@ -38,7 +38,7 @@ export default function Contact() {
   };
 
   return (
-    <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">
+    <div className="w-full h-full py-12 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>

src/pages/ForgotPassword.jsx

@@ -1,9 +1,10 @@
 import { useState } from "react";
 import { resetPassword } from "../api/user-wrapper";
-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 PasswordReqs from "./PasswordReqs";
+import { useTranslation } from "react-i18next";
 
 //Fetching first
 
@@ -20,6 +21,8 @@ const getUserPassword = async () => {
 
 // Implement the Welcome page and check for if it should be displayed
 export default function ForgotPassword() {
+  const { t } = useTranslation();
+
   const [formData, setFormData] = useState({
     username: '',
     password: '',
@@ -59,7 +62,7 @@ export default function ForgotPassword() {
     <>
       <main className="header-gradient h-full flex justify-center items-center">
         <Form width="w-2/5">
-          <h1 className="text-4xl font-semibold my-3">Forgot Your Password?</h1>
+          <h1 className="text-4xl font-semibold my-3">{t("forgot_your_pass")}</h1>
 
           <form method="POST"
             onSubmit={handleSubmit}
@@ -70,39 +73,27 @@ export default function ForgotPassword() {
               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="New Password"
+              placeholder={t("reset_new_pass")}
               isRequired={true} />
 
             <FormInput
               type="password"
               name="retypedPassword"
               value={formData.retypedPassword}
               onChange={handleChange}
-              placeholder="Retype New Password"
+              placeholder={t("reset_retype_pass")}
               isRequired={true} />
 
             <div className="mt-2">
-              <PasswordChecklist
-                rules={[
-                  "minLength",
-                  "capitalAndLowercase",
-                  "number",
-                  "specialChar",
-                  "match"
-                ]}
-                minLength={10}
-                value={formData.password}
-                valueAgain={formData.retypedPassword}
-                onChange={(isValid) => setIsValid(isValid)}
-              />
+              <PasswordReqs formData={formData} setIsValid={setIsValid} />
             </div>
 
             <FormSubmit label={"Reset Password"} isDisabled={!isValid} />

src/pages/Home.jsx

@@ -2,7 +2,6 @@ import Button from '@/components/Button/Button';
 import Level from '@/components/Level.jsx';
 import Class from '@/components/Class.jsx';
 import Confirmation from '@/components/Confirmation.jsx';
-import LevelCard from '@/components/HomeLevel.jsx';
 import HomeClass from '@/components/HomeClass.jsx';
 import { useTranslation } from "react-i18next";
 import { useLocation } from 'wouter';
@@ -39,6 +38,18 @@ const class2 = {
     ]
 };
 
+const level1 = {
+    level: "1",
+    name: "Alphabet and Phonetics",
+    instructors: ["Subat", "Ehtibar"]
+}
+
+const level4 = {
+    level: "4",
+    name: "Higher Level Writing",
+    instructors: ["Dilziba"]
+}
+
 const Home = () => {
     const [, setLocation] = useLocation();
     const { t } = useTranslation();
@@ -53,12 +64,12 @@ const Home = () => {
                     <p className="text-sm mb-4"><b>300+</b> {t("home_student_desc")}</p>
                     <div className="flex flex-col md:flex-row items-center space-x-3">
                         <Button
-                            label={"Start Learning"}
+                            label={t("home_learn_title")}
                             onClick={() => setLocation("/signup")}
                             isOutline={false}
                         />
                         <Button
-                            label={"Learn More"}
+                            label={t("learn_more")}
                             onClick={() => setLocation("/about")}
                             isOutline={true}
                         />
@@ -67,20 +78,10 @@ const Home = () => {
             </div>
 
             <div className="flex flex-col bg-white px-4 py-40 gap-32 mx-auto max-w-7xl">
-                <div className="flex flex-col md:flex-row justify-between items-center">
-                    <div className="flex flex-wrap justify-center gap-8 md:gap-4 lg:gap-6 mb-6 md:mb-0">
-                        <LevelCard
-                            imageSource="src/assets/level-1-img.png"
-                            title="Level 1"
-                            subtitle="Alphabet & Phonetics"
-                            topics={['Alphabet', 'Basic Conversations', 'Basic Vocabulary']}
-                        />
-                        <LevelCard
-                            imageSource="src/assets/level2-image.png"
-                            title="Level 5"
-                            subtitle="Advanced Reading & Writing"
-                            topics={['Advanced Reading', 'Essays', 'Basic Vocabulary']}
-                        />
+                <div className="flex flex-col sm:flex-row justify-between items-center">
+                    <div className="grid grid-cols-2 justify-center w-1/2 gap-8 md:gap-4 lg:gap-6 mb-6 md:mb-0">
+                        <Level level={level1} isSimplified={false} />
+                        <Level level={level4} isSimplified={false} />
                     </div>
 
                     <div className={`px-2 md:px-0 text-center w-[484px] md:text-left`}>
@@ -89,7 +90,7 @@ const Home = () => {
                     </div>
                 </div>
 
-                <div className="flex flex-row justify-around items-center">
+                <div className="flex flex-col sm:flex-row justify-around items-center">
                     <div className={`px-2 md:px-0 text-center w-[484px] md:text-left`}>
                         <h2 className="text-4xl font-semibold mb-5">{t("home_level_title")}</h2>
                         <p className="text-2xl mb-4">{t("home_level_desc")}</p>
@@ -112,12 +113,6 @@ const Home = () => {
                     </div>
                 </div>
             </div>
-
-            <footer className="h-80 bg-dark-blue-800 text-white flex flex-col justify-center gap-y-5">
-                <p className="text-4xl font-extrabold mx-20">{t("home_title")}</p>
-                <p className="text-lg mx-20">Email: [email protected]</p>
-                <p className="text-lg mx-20">Instagram: @dillaracademy</p>
-            </footer>
         </>
     );
 };

src/pages/Login.jsx

@@ -46,9 +46,9 @@ export default function Login() {
 
   return (
     <>
-      <main className="header-gradient h-full flex justify-center items-center">
+      <main className="header-gradient h-full py-40 flex justify-center items-center">
         <Form width="w-2/5">
-          <h1 className="text-4xl font-semibold sm:text-3xl">{t("sign_up_login2")}</h1>
+          <h1 className="text-4xl font-semibold sm:text-3xl">{t("login_text")}</h1>
           <h3 className="text-lg sm:text-base text-gray-500 mt-3 mb-5mt-3 mb-5">{t("login_signup1")}
             <Link href="/signup" className="ml-2 font-extrabold text-blue-400">{t("sign_up_text")}</Link>
           </h3>
@@ -70,8 +70,8 @@ export default function Login() {
               onChange={handleChange}
               placeholder={t("password_field")}
               isRequired={true} />
-            <p className="text-sm flex justify-end text-black opacity-50"><Link href="/forgotpassword" >Forgot password?</Link></p>
-            <FormSubmit label={t("sign_up_login2")} />
+            <p className="text-sm flex justify-end text-black opacity-50"><Link href="/forgotpassword">{t("forgot_pass")}</Link></p>
+            <FormSubmit label={t("login_text")} />
           </form >
         </Form >
       </main >

src/pages/PasswordReqs.jsx

@@ -0,0 +1,31 @@
+import PasswordChecklist from "react-password-checklist"
+import { useTranslation } from "react-i18next";
+
+const PasswordReqs = ({ formData, setIsValid }) => {
+    const { t } = useTranslation();
+
+    return (
+        <PasswordChecklist
+            rules={[
+                "minLength",
+                "capitalAndLowercase",
+                "number",
+                "specialChar",
+                "match"
+            ]}
+            minLength={10}
+            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"),
+            }}
+        />
+    )
+}
+
+export default PasswordReqs;

src/pages/SignUp.jsx

@@ -1,11 +1,11 @@
 import { useState } from "react";
 import { Link } from 'wouter'
 import { postUser } from "@/api/user-wrapper";
-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";
+import PasswordReqs from "./PasswordReqs";
 
 export default function SignUp() {
   const { t } = useTranslation();
@@ -51,7 +51,7 @@ export default function SignUp() {
       >
         <h3 className="text-4xl font-semibold">{t("sign_up_text")}</h3>
         <p className="mt-3 mb-5 text-gray-500">{t("sign_up_login1")}
-          <Link className="ml-2 font-extrabold text-blue-500" href="/login">{t("sign_up_text")}</Link>
+          <Link className="ml-2 font-extrabold text-blue-500" href="/login">{t("login_text")}</Link>
         </p>
         {/* Form Values and the Borders */}
         <form method="POST" onSubmit={handleSubmit} className="space-y-3">
@@ -106,26 +106,7 @@ export default function SignUp() {
             onChange={handleChange}
           />
           <div className="mt-2">
-            <PasswordChecklist
-              rules={[
-                "minLength",
-                "capitalAndLowercase",
-                "number",
-                "specialChar",
-                "match"
-              ]}
-              minLength={10}
-              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"),
-              }}
-            />
+            <PasswordReqs formData={formData} setIsValid={setIsValid} />
           </div>
           <FormSubmit label={t("sign_up_text")} isDisabled={!isValid} />
         </form>