From f36bbafef4869f425f3d0fe209d7c03ca4db2890 Mon Sep 17 00:00:00 2001
From: myix765 <myix765@gmail.com>
Date: Wed, 11 Dec 2024 19:30:01 -0500
Subject: [PATCH 1/2] small touch ups and refactoring

---
 src/App.jsx                  |  2 ++
 src/components/Footer.jsx    | 15 +++++++++++++++
 src/pages/About.jsx          |  2 +-
 src/pages/Contact.jsx        |  2 +-
 src/pages/ForgotPassword.jsx | 27 +++++++++------------------
 src/pages/Home.jsx           | 10 ++--------
 src/pages/Login.jsx          |  8 ++++----
 src/pages/PasswordReqs.jsx   | 31 +++++++++++++++++++++++++++++++
 src/pages/SignUp.jsx         | 25 +++----------------------
 9 files changed, 68 insertions(+), 54 deletions(-)
 create mode 100644 src/components/Footer.jsx
 create mode 100644 src/pages/PasswordReqs.jsx

diff --git a/src/App.jsx b/src/App.jsx
index f87a46d..de8fbf9 100644
--- a/src/App.jsx
+++ b/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);
@@ -30,6 +31,7 @@ const App = () => {
             <PageRoutes />
           )}
         </div>
+        <Footer />
       </div>
     </>
   );
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
new file mode 100644
index 0000000..06f5ee9
--- /dev/null
+++ b/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")}: dillarenglish@gmail.com</p>
+            <p className="text-lg mx-20">{t("instagram")}: @dillaracademy</p>
+        </footer>
+    )
+}
+
+export default Footer;
\ No newline at end of file
diff --git a/src/pages/About.jsx b/src/pages/About.jsx
index afabc10..34df7de 100644
--- a/src/pages/About.jsx
+++ b/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>
diff --git a/src/pages/Contact.jsx b/src/pages/Contact.jsx
index 7ec3975..cdc99b8 100644
--- a/src/pages/Contact.jsx
+++ b/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>
diff --git a/src/pages/ForgotPassword.jsx b/src/pages/ForgotPassword.jsx
index 3517194..aebf2bc 100644
--- a/src/pages/ForgotPassword.jsx
+++ b/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,7 +73,7 @@ export default function ForgotPassword() {
               name="username"
               value={formData.username}
               onChange={handleChange}
-              placeholder="Username"
+              placeholder={t("username_field")}
               isRequired={true} />
 
             <FormInput
@@ -78,7 +81,7 @@ export default function ForgotPassword() {
               name="password"
               value={formData.password}
               onChange={handleChange}
-              placeholder="New Password"
+              placeholder={t("reset_new_pass")}
               isRequired={true} />
 
             <FormInput
@@ -86,23 +89,11 @@ export default function ForgotPassword() {
               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} />
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 07398fb..36ec1df 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -53,12 +53,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}
                         />
@@ -112,12 +112,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: dillarenglish@gmail.com</p>
-                <p className="text-lg mx-20">Instagram: @dillaracademy</p>
-            </footer>
         </>
     );
 };
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
index f54db9a..1fb846a 100644
--- a/src/pages/Login.jsx
+++ b/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 >
diff --git a/src/pages/PasswordReqs.jsx b/src/pages/PasswordReqs.jsx
new file mode 100644
index 0000000..65b50a8
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/pages/SignUp.jsx b/src/pages/SignUp.jsx
index 26fbd50..02c227f 100644
--- a/src/pages/SignUp.jsx
+++ b/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>

From c72393c5fa190526903084297a55520cf03c5255 Mon Sep 17 00:00:00 2001
From: myix765 <myix765@gmail.com>
Date: Wed, 11 Dec 2024 19:44:45 -0500
Subject: [PATCH 2/2] modify home page level section

---
 src/components/HomeLevel.jsx | 28 ----------------------------
 src/pages/Home.jsx           | 33 +++++++++++++++++----------------
 2 files changed, 17 insertions(+), 44 deletions(-)
 delete mode 100644 src/components/HomeLevel.jsx

diff --git a/src/components/HomeLevel.jsx b/src/components/HomeLevel.jsx
deleted file mode 100644
index 97bbe21..0000000
--- a/src/components/HomeLevel.jsx
+++ /dev/null
@@ -1,28 +0,0 @@
-// LevelCard.js
-import React from 'react';
-
-const LevelCard = ({ imageSource, title, subtitle, topics }) => {
-  return (
-    <div className="bg-white rounded-lg shadow-md overflow-hidden w-80 flex flex-col">
-      <div className="h-1/3 relative">
-        <img src={imageSource} alt={title} className="w-full h-full object-cover" />
-      </div>
-      <div className="flex-1 p-4 flex flex-col justify-center">
-        <h3 className="text-xl font-semibold text-gray-900">{title}</h3>
-        <p className="text-gray-600 mt-2">{subtitle}</p>
-        <div className="mt-4 flex flex-wrap gap-x-2 gap-y-2">
-          {topics.map((topic, index) => (
-            <div
-              key={index}
-              className= "px-4 py-2 rounded-full text-sm font-medium border border-black whitespace-nowrap"
-            >
-              {topic}
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default LevelCard;
\ No newline at end of file
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 36ec1df..10e7b3b 100644
--- a/src/pages/Home.jsx
+++ b/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();
@@ -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>