From 00e04eb8e4528d9e7684784a0c555be59ba40924 Mon Sep 17 00:00:00 2001 From: Aryaa Modi Date: Thu, 5 Dec 2024 17:29:31 -0500 Subject: [PATCH 1/8] completed title bar --- src/pages/Home.jsx | 12 +++++++----- tailwind.config.js | 2 ++ 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 5b7bd53..18c23ba 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -26,11 +26,13 @@ const sections = [ const Home = () => { return ( <> -
-
-

Dillar Academy

-

Free English education for Uyghurs around the world.

-
+
+
+

Stop Learning. Start Knowing.

+

Dillar English Academy

+

Free English education for Uyghurs around the world.

+

300+ students and growing!

+
-

How It Works

+ {/*

How It Works

*/} {sections.map((section, index) => (
{section.imgAlt}
-

{section.title}

-

{section.description}

+

{section.title}

+

{section.description}

))}
+
+ {/* is there a better way of doing this so that mx-20 isn't repeated 3 times? */} +

Dillar English Academy

+

Email: dillarenglish@gmail.com

+

Instagram: @dillaracademy

+
); }; From 9876c2990939aefa95a2d0e62f3ba34c8be952e7 Mon Sep 17 00:00:00 2001 From: Aryaa Modi Date: Sat, 7 Dec 2024 16:31:15 -0500 Subject: [PATCH 3/8] made confirmation component and combined changes --- src/components/Confirmation.jsx | 48 +++++++++++++++++++++++ src/pages/Home.jsx | 67 +++++++++++++++++++++++++++++++-- 2 files changed, 112 insertions(+), 3 deletions(-) create mode 100644 src/components/Confirmation.jsx diff --git a/src/components/Confirmation.jsx b/src/components/Confirmation.jsx new file mode 100644 index 0000000..5477d26 --- /dev/null +++ b/src/components/Confirmation.jsx @@ -0,0 +1,48 @@ + +import { IoTimeOutline, IoCalendarOutline } from "react-icons/io5"; +import Button from '@/components/Button/Button' + +const Class = ({ classObj }) => { + const ageGroup = classObj.ageGroup.toString(); + + return ( +
+
+ {/* Header */} + +
+

You are registered!

+

+ {ageGroup.charAt(0).toUpperCase() + ageGroup.slice(1)}'s Class w/ {classObj.instructor} +

+
+ + {/* Schedule */} +
+ {classObj.schedule.map((schedule, index) => ( +
+
+ + {schedule.day} +
+
+ + {schedule.time} +
+
+ ))} +
+ +
+
+
+
+ ); +}; + +export default Class; \ No newline at end of file diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index c81f142..21af215 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -1,6 +1,10 @@ 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 { useLocation } from 'wouter'; const sections = [ { @@ -23,7 +27,41 @@ const sections = [ }, ]; +const class1 = { + level: "1", + ageGroup: "adults", + instructor: "Ehtibar", + schedule: [ + { + day: "Saturday", + time: "10:00 AM CST" + }, + { + day: "Sunday", + time: "10:00 AM CST" + } + ] +}; + +const class2 = { + level: "1", + ageGroup: "children", + instructor: "Subat", + schedule: [ + { + day: "Saturday", + time: "11:00 AM CST" + }, + { + day: "Sunday", + time: "11:00 AM CST" + } + ] + }; + const Home = () => { + const [, setLocation] = useLocation(); + return ( <>
@@ -35,22 +73,45 @@ const Home = () => {
+
{/*

How It Works

*/} {sections.map((section, index) => (
- {section.imgAlt} + + {section.title === "Choose your class level" && ( +
+ + +
+ )} + + {section.title === "Find a time and instructor" && ( +
+ + +
+ )} + + {/* could be slower with the if checks so we shouldn't do it like that */} + {section.title === "Start Learning" && ( +
+ +
+ )} + + {/* {section.imgAlt} */}

{section.title}

{section.description}

From 81a8cee467cacf2b8aaa2aff0962c0d6ab7de2b4 Mon Sep 17 00:00:00 2001 From: Aryaa Modi Date: Mon, 9 Dec 2024 00:05:33 -0500 Subject: [PATCH 4/8] completed body with proper sections and confirmation component --- src/components/Confirmation.jsx | 48 ++++++++++--------- src/pages/Home.jsx | 85 +++++++++++++-------------------- 2 files changed, 58 insertions(+), 75 deletions(-) diff --git a/src/components/Confirmation.jsx b/src/components/Confirmation.jsx index 5477d26..1931ed9 100644 --- a/src/components/Confirmation.jsx +++ b/src/components/Confirmation.jsx @@ -4,41 +4,45 @@ 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 ( -
-
+
+
{/* Header */}
-

You are registered!

+

You are registered!

{ageGroup.charAt(0).toUpperCase() + ageGroup.slice(1)}'s Class w/ {classObj.instructor}

{/* Schedule */} -
- {classObj.schedule.map((schedule, index) => ( -
-
- - {schedule.day} -
-
- - {schedule.time} -
-
- ))} +
+
+ + {subDay1} & {subDay2} +
+
+ + {time} +
-
-
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 21af215..1b9cc52 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -1,32 +1,9 @@ - -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 { useLocation } from 'wouter'; -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: "Attend class and start learning right away!", - }, -]; - const class1 = { level: "1", ageGroup: "adults", @@ -85,42 +62,44 @@ const Home = () => {
-
- {/*

How It Works

*/} - {sections.map((section, index) => ( -
- - {section.title === "Choose your class level" && ( -
- - -
- )} +
+
+
+ + +
+ +
+

Choose your class level

+

We offer multiple levels of English classes based on your experience.

+
+
+ +
+
+

Find a time and instructor

+

Choose a class time that works for you or an instructor who’s teaching style you like!

+
- {section.title === "Find a time and instructor" && ( -
- - -
- )} +
+ + +
+
- {/* could be slower with the if checks so we shouldn't do it like that */} - {section.title === "Start Learning" && ( -
- -
- )} +
+
+ +
- {/* {section.imgAlt} */} -
-

{section.title}

-

{section.description}

-
+
+

Start Learning

+

Attend class and start learning right away!

- ))} +
+
-
-
-
- - -
+
+
+
+ + +
-
+

Choose your class level

We offer multiple levels of English classes based on your experience.

@@ -81,9 +93,9 @@ const Home = () => {

Choose a class time that works for you or an instructor who’s teaching style you like!

-
- - +
+ +
From 8beb3e5794b65ff8eea68af118b55aa35cfec54b Mon Sep 17 00:00:00 2001 From: myix765 Date: Wed, 11 Dec 2024 18:28:13 -0500 Subject: [PATCH 7/8] add padding in middle section --- src/components/HomeClass.jsx | 60 ++---------------------------------- src/pages/Home.jsx | 46 +++++++++++++-------------- 2 files changed, 26 insertions(+), 80 deletions(-) diff --git a/src/components/HomeClass.jsx b/src/components/HomeClass.jsx index aa2c312..a8e4ae8 100644 --- a/src/components/HomeClass.jsx +++ b/src/components/HomeClass.jsx @@ -1,68 +1,14 @@ -// import { IoTimeOutline, IoCalendarOutline } from "react-icons/io5"; -// import EnrollButton from '@/components/Button/EnrollButton' - -// const HomeClass = ({ classObj }) => { -// const ageGroup = classObj.ageGroup.toString(); - -// return ( -//
-//
-// {/* Header */} -//
-//

-// {ageGroup.charAt(0).toUpperCase() + ageGroup.slice(1)}'s Class -//

-// w/ {classObj.instructor} -//
- -// {/* Schedule */} -//
-// {classObj.schedule.map((schedule, index) => ( -//
-//
-// -// {schedule.day} -//
-//
-// -// {schedule.time} -//
-//
-// ))} -//
-//
-// -// -//
-//
-//
-// ); -// }; - -// export default HomeClass; - - import { IoTimeOutline, IoCalendarOutline } from "react-icons/io5"; -import Button from '@/components/Button/Button' const HomeClass = ({ classObj }) => { - const ageGroup = classObj.ageGroup.toString(); const day1 = classObj.schedule[0].day.toString(); - const subDay1 = day1.substr(0,3); + 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); + const subDay2 = day2.substr(0, 3); return ( @@ -90,7 +36,7 @@ const HomeClass = ({ classObj }) => {
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 489570d..ab7d35e 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -12,14 +12,14 @@ const class1 = { ageGroup: "Children", instructor: "Subhat", schedule: [ - { - day: "Saturday", - time: "10:00 AM PST" - }, - { - day: "Sunday", - time: "10:00 AM CST" - } + { + day: "Saturday", + time: "10:00 AM PST" + }, + { + day: "Sunday", + time: "10:00 AM CST" + } ] }; @@ -28,16 +28,16 @@ const class2 = { ageGroup: "Adult", instructor: "Ehtibar", schedule: [ - { - day: "Saturday", - time: "11:00 AM PST" - }, - { - day: "Sunday", - time: "11:00 AM CST" - } + { + day: "Saturday", + time: "11:00 AM PST" + }, + { + day: "Sunday", + time: "11:00 AM CST" + } ] - }; +}; const Home = () => { const [, setLocation] = useLocation(); @@ -48,7 +48,7 @@ const Home = () => {

{t("home_motto")}

-

{t("home_title")}

+

{t("home_title")}

{t("home_purpose")}

300+ {t("home_student_desc")}

@@ -66,7 +66,7 @@ const Home = () => {
-
+
{
- - + +
- +
@@ -116,7 +116,7 @@ const Home = () => {

{t("home_title")}

Email: dillarenglish@gmail.com

-

Instagram: @dillaracademy

+

Instagram: @dillaracademy

); From fbb15e28d25f6c462b4747f6778f5991ed915c1d Mon Sep 17 00:00:00 2001 From: myix765 Date: Wed, 11 Dec 2024 18:29:44 -0500 Subject: [PATCH 8/8] use standardized header gradient --- src/pages/Home.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index ab7d35e..07398fb 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -45,7 +45,7 @@ const Home = () => { return ( <> -
+

{t("home_motto")}

{t("home_title")}