Merge pull request #63 from JumboCode/home-page2

Home Page Edits

src/components/Confirmation.jsx

@@ -0,0 +1,52 @@
+
+import { IoTimeOutline, IoCalendarOutline } from "react-icons/io5";
+import Button from '@/components/Button/Button'
+
+const Class = ({ classObj }) => {
+  const ageGroup = classObj.ageGroup.toString();
+  const day1 = classObj.schedule[0].day.toString();
+  const subDay1 = day1.substr(0,3);
+
+  const time = classObj.schedule[0].time.toString();
+
+  const day2 = classObj.schedule[1].day.toString();
+  const subDay2 = day2.substr(0,3);
+
+
+  return (
+    <div className="p-6 bg-white rounded-lg shadow-shadow overflow-hidden hover:shadow-shadow-hover transition-shadow w-96">
+      <div className="flex flex-col gap-2">
+        {/* Header */}
+
+        <div>
+            <h3 className="text-2xl font-extrabold mb-2">You are registered!</h3>
+            <p>
+            {ageGroup.charAt(0).toUpperCase() + ageGroup.slice(1)}'s Class w/ {classObj.instructor}
+            </p>
+        </div>
+
+        {/* Schedule */}
+        <div className="flex flex-col text-neutral-400 text-sm mb-2">
+          <div className="flex items-left gap-2">
+            <IoCalendarOutline className="text-lg" />
+            <span>{subDay1} & {subDay2}</span>
+          </div>
+          <div className="flex items-left gap-2">
+            <IoTimeOutline className="text-lg" />
+            <span>{time}</span>
+          </div>
+        </div>
+
+        <div className='gap-3 w-full'>
+          <button
+            className={`px-4 py-2 rounded-lg transition-colors duration-300 border border-dark-blue-800 w-full`}
+          >
+          Got it!
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Class;

src/components/HomeClass.jsx

@@ -0,0 +1,47 @@
+
+import { IoTimeOutline, IoCalendarOutline } from "react-icons/io5";
+
+const HomeClass = ({ classObj }) => {
+  const day1 = classObj.schedule[0].day.toString();
+  const subDay1 = day1.substr(0, 3);
+
+  const time = classObj.schedule[0].time.toString();
+
+  const day2 = classObj.schedule[1].day.toString();
+  const subDay2 = day2.substr(0, 3);
+
+
+  return (
+    <div className="p-4 bg-white rounded-md shadow-shadow overflow-hidden hover:shadow-shadow-hover transition-shadow w-60">
+      <div className="flex flex-col gap-1.5">
+        {/* Header */}
+        <div>
+          <h3 className="text-2xl font-bold mb-1">{classObj.ageGroup}'s Class</h3>
+          <p>  w/ {classObj.instructor} </p>
+        </div>
+
+        {/* Schedule */}
+        <div className="flex flex-col text-neutral-400 text-sm mb-2">
+          <div className="flex items-left gap-2">
+            <IoCalendarOutline className="text-lg" />
+            <span>{subDay1} & {subDay2}</span>
+          </div>
+          <div className="flex items-left gap-2">
+            <IoTimeOutline className="text-lg" />
+            <span>{time}</span>
+          </div>
+        </div>
+
+        <div className='gap-3 w-24'>
+          <button
+            className={`bg-gradient-to-r from-dark-blue-100 via-blue-100 to-turquoise-200 px-2 py-2 rounded-lg text-neutral-400 font-semibold transition-colors duration-300 w-full`}
+          >
+            Register
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default HomeClass;

src/components/HomeLevel.jsx

@@ -0,0 +1,28 @@
+// 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;

src/pages/Home.jsx

@@ -1,61 +1,123 @@
-
-import dummyBg from '@/assets/dummy-bg.png';
 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';
+
+const class1 = {
+    level: "1",
+    ageGroup: "Children",
+    instructor: "Subhat",
+    schedule: [
+        {
+            day: "Saturday",
+            time: "10:00 AM PST"
+        },
+        {
+            day: "Sunday",
+            time: "10:00 AM CST"
+        }
+    ]
+};
 
-const sections = [
-    {
-        imgSrc: dummyBg,
-        imgAlt: "dummy-bg1",
-        title: "Choose your class level",
-        description: "Take a quick assessment to see what your English level is like!",
-    },
-    {
-        imgSrc: dummyBg,
-        imgAlt: "dummy-bg2",
-        title: "Find a time and instructor",
-        description: "Browse our list of classes to find one that works!",
-    },
-    {
-        imgSrc: dummyBg,
-        imgAlt: "dummy-bg3",
-        title: "Start Learning!",
-        description: "Go to class and start learning English. You'll be fluent in no time!",
-    },
-];
+const class2 = {
+    level: "1",
+    ageGroup: "Adult",
+    instructor: "Ehtibar",
+    schedule: [
+        {
+            day: "Saturday",
+            time: "11:00 AM PST"
+        },
+        {
+            day: "Sunday",
+            time: "11:00 AM CST"
+        }
+    ]
+};
 
 const Home = () => {
+    const [, setLocation] = useLocation();
+    const { t } = useTranslation();
+
     return (
         <>
-            <div className="bg-sky-200 p-4 min-h-[60dvh] flex items-center">
-                <div className="text-center md:text-left mb-12 mt-12 px-5">
-                    <h1 className="text-4xl font-extrabold mb-2">Dillar Academy</h1>
-                    <p className="text-lg mb-4">Free English education for Uyghurs around the world.</p>
-                    <div className="flex flex-col md:flex-row items-center">
+            <div className="header-gradient p-4 min-h-[60dvh] flex items-center justify-center">
+                <div className="text-center md:text-left mb-12 mt-12 px-5 justify-items-center">
+                    <p className="text-2xl text-blue-600 mb-3">{t("home_motto")}</p>
+                    <h1 className="text-5xl font-extrabold mb-6">{t("home_title")}</h1>
+                    <p className="text-lg">{t("home_purpose")}</p>
+                    <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"}
-                            onClick={() => alert('Dummy button-1 clicked!')}
+                            onClick={() => setLocation("/signup")}
                             isOutline={false}
                         />
                         <Button
                             label={"Learn More"}
-                            onClick={() => alert('Dummy button-2 clicked!')}
+                            onClick={() => setLocation("/about")}
                             isOutline={true}
                         />
                     </div>
                 </div>
             </div>
-            <div className="bg-white p-4 mt-4">
-                <h1 className="text-4xl font-extrabold mb-10 text-center">How It Works</h1>
-                {sections.map((section, index) => (
-                    <div key={index} className={`flex flex-col md:flex-row items-center justify-evenly px-4 md:px-2 mb-4 ${index % 2 === 1 ? 'md:flex-row-reverse' : ''}`}>
-                        <img src={section.imgSrc} alt={section.imgAlt} className="mb-4 md:mb-8 md:w-1/3 rounded-lg shadow-md" />
-                        <div className={`px-2 md:px-0 text-center md:text-left md:w-1/3`}>
-                            <h2 className="text-3xl font-semibold mb-5">{section.title}</h2>
-                            <p className="text-lg mb-4">{section.description}</p>
-                        </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>
+
+                    <div className={`px-2 md:px-0 text-center w-[484px] md:text-left`}>
+                        <h2 className="text-4xl font-semibold mb-5">{t("home_class_level_title")}</h2>
+                        <p className="text-2xl mb-4">{t("home_class_level_desc")}</p>
+                    </div>
+                </div>
+
+                <div className="flex 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>
+                    </div>
+
+                    <div className="flex flex-col first-line:items-center md:flex-row space-x-4">
+                        <HomeClass classObj={class1} className=" w-48 h-32 md:w-26 md:h-40" />
+                        <HomeClass classObj={class2} className="w-48 h-32 md:w-26 md:h-40" />
                     </div>
-                ))}
+                </div>
+
+                <div className="flex flex-row justify-around items-center">
+                    <div className="flex flex-col items-center  md:flex-row space-x-4">
+                        <Confirmation classObj={class1} className="w-48 h-32 md:w-56 md:h-40" />
+                    </div>
+
+                    <div className={`px-2 md:px-0 text-center w-[484px] md:text-left`}>
+                        <h2 className="text-4xl font-semibold mb-5">{t("home_learn_title")}</h2>
+                        <p className="text-2xl mb-4">{t("home_learn_desc")}</p>
+                    </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>
         </>
     );
 };

tailwind.config.js

@@ -19,6 +19,8 @@ export default {
           600: '#0D8ED8',
           700: '#0A6FA8',
           800: '#074F78',
+          900: '#3F96EA',
+          1000: '#B2E0FA',
         },
         "dark-blue": {
           100: '#EEEDFD',