Skip to content

Commit

Permalink
add padding in middle section
Browse files Browse the repository at this point in the history
  • Loading branch information
@myix765
myix765 committed Dec 11, 2024
1 parent 72f3b42 commit 8beb3e5
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 80 deletions.
60 changes: 3 additions & 57 deletions src/components/HomeClass.jsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
// <div className="p-6 bg-white rounded-lg shadow-shadow overflow-hidden hover:shadow-shadow-hover transition-shadow">
// <div className="flex flex-col gap-4">
// {/* Header */}
// <div>
// <h3 className="text-xl font-extrabold text-dark-blue-800 mb-1">
// {ageGroup.charAt(0).toUpperCase() + ageGroup.slice(1)}'s Class
// </h3>
// <span className="text-sm text-neutral-400">w/ {classObj.instructor}</span>
// </div>

// {/* Schedule */}
// <div className="space-y-3">
// {classObj.schedule.map((schedule, index) => (
// <div key={index} className="flex items-center text-neutral-400 text-sm">
// <div className="flex items-center gap-2 w-1/2">
// <IoCalendarOutline className="text-lg" />
// <span>{schedule.day}</span>
// </div>
// <div className="flex items-center gap-2">
// <IoTimeOutline className="text-lg" />
// <span>{schedule.time}</span>
// </div>
// </div>
// ))}
// </div>
// <div className='grid grid-cols-2 gap-3'>
// <EnrollButton
// userId={null}
// classId={classObj._id}
// isEnroll={true}
// />
// <EnrollButton
// userId={null}
// classId={classObj._id}
// isEnroll={false}
// />
// </div>
// </div>
// </div>
// );
// };

// 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 (
Expand Down Expand Up @@ -90,7 +36,7 @@ const HomeClass = ({ classObj }) => {
<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
Register
</button>
</div>
</div>
Expand Down
46 changes: 23 additions & 23 deletions src/pages/Home.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
]
};

Expand All @@ -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();
Expand All @@ -48,7 +48,7 @@ const Home = () => {
<div className="bg-gradient-to-r from-white via-blue-1000 to-blue-900 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>
<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">
Expand All @@ -66,7 +66,7 @@ const Home = () => {
</div>
</div>

<div className="flex flex-col bg-white p-4 gap-32 mx-auto max-w-7xl">
<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
Expand Down Expand Up @@ -96,14 +96,14 @@ const Home = () => {
</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"/>
<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"/>
<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`}>
Expand All @@ -116,7 +116,7 @@ const Home = () => {
<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>
<p className="text-lg mx-20">Instagram: @dillaracademy</p>
</footer>
</>
);
Expand Down

0 comments on commit 8beb3e5

Please sign in to comment.