Skip to content

Commit c339060

Browse files
Prince-KidPrince-Kid
committed
fix: Enhance landing page and implement navigations
1 parent 2d25b6a commit c339060

File tree

6 files changed

+98
-83
lines changed

6 files changed

+98
-83
lines changed

‎src/components/home/AboutUs.tsx‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -34,31 +34,31 @@ const AboutUs = () => {
3434
</div>
3535

3636

37-
<div className="flex flex-wrap gap-6 items-center px-10 ">
38-
<div className="flex flex-col p-6 shadow-md w-[320px] m-2 cursor-pointer bg-gray-200 dark:bg-gray-700 rounded-lg transition duration-300">
39-
<GrResources size={40} className='dark:text-white'/>
40-
<h3 className='dark:text-green text-xl font-semibold mb-2 text-primary'>Guidance</h3>
41-
<p className='text-black-600 dark:text-white'>
42-
Get expert guidance every step of the way. From applying to tracking your progress,
43-
our team is here to help you succeed and reach your full potential.
37+
<div className="flex flex-wrap justify-center gap-4 p-4">
38+
<div className="flex flex-col p-6 shadow-md w-[320px] sm:w-[350px] md:w-[400px] lg:w-[400px] m-2 cursor-pointer bg-gray-200 dark:bg-gray-700 rounded-lg transition duration-300">
39+
<GrResources size={40} className="dark:text-white" />
40+
<h3 className="dark:text-green text-xl font-semibold mb-2 text-primary">Guidance</h3>
41+
<p className="text-black-600 dark:text-white">
42+
Get expert guidance every step of the way. From applying to tracking your progress, our team is here to help you succeed and reach your full potential.
4443
</p>
4544
</div>
46-
<div className="flex flex-col p-6 shadow-md w-[320px] m-2 cursor-pointer bg-gray-200 dark:bg-gray-700 rounded-lg transition duration-300">
47-
<FaUsers size={40} className='dark:text-white' />
48-
<h3 className='dark:text-green text-xl font-semibold mb-2 text-primary'>Community</h3>
49-
<p className='text-black-600 dark:text-white'>
50-
Connect with a community of like-minded tech enthusiasts, where you can share insights, ask questions, and build valuable relationships with peers and mentors.
45+
<div className="flex flex-col p-6 shadow-md w-[320px] sm:w-[350px] md:w-[400px] lg:w-[400px] m-2 cursor-pointer bg-gray-200 dark:bg-gray-700 rounded-lg transition duration-300">
46+
<FaUsers size={40} className="dark:text-white" />
47+
<h3 className="dark:text-green text-xl font-semibold mb-2 text-primary">Community</h3>
48+
<p className="text-black-600 dark:text-white">
49+
Connect with a community of like-minded tech enthusiasts, where you can share insights, ask questions, and build valuable relationships with peers and mentors.
5150
</p>
5251
</div>
53-
<div className="flex flex-col p-6 shadow-md w-[320px] m-2 cursor-pointer bg-gray-200 dark:bg-gray-700 rounded-lg transition duration-300">
54-
<GrDocumentPerformance size={35} className='dark:text-white ' />
55-
<h3 className='dark:text-green text-xl font-semibold mb-2 text-primary'>Tools and Resources</h3>
56-
<p className='text-black-600 dark:text-white'>
57-
Access real-time tracking tools and resources designed to support your learning and professional growth. Our commitment to cutting-edge technology means you stay on top </p>
52+
<div className="flex flex-col p-6 shadow-md w-[320px] sm:w-[350px] md:w-[400px] lg:w-[400px] m-2 cursor-pointer bg-gray-200 dark:bg-gray-700 rounded-lg transition duration-300">
53+
<GrDocumentPerformance size={35} className="dark:text-white" />
54+
<h3 className="dark:text-green text-xl font-semibold mb-2 text-primary">Tools and Resources</h3>
55+
<p className="text-black-600 dark:text-white">
56+
Access real-time tracking tools and resources designed to support your learning and professional growth. Our commitment to cutting-edge technology means you stay on top.
57+
</p>
5858
</div>
59-
6059
</div>
6160

61+
6262
</div>
6363
)
6464
}

‎src/components/home/Blogs.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import { Link } from 'react-router-dom';
55
import { fetchAllBlogs } from '../../redux/actions/blogsActions';
66
import { toast } from 'react-toastify';
77

8+
9+
810
interface Author {
911
id: string;
1012
email: string;
@@ -28,10 +30,14 @@ import { toast } from 'react-toastify';
2830
}
2931

3032

33+
3134
const BlogCard = ({ blog }: { blog: Blog }) => (
32-
<div key={blog.id} className="bg-gray-200 dark:bg-dark-frame-bg dark:text-white text-primary shadow-lg rounded-lg cursor-pointer hover:shadow-xl transition duration-300">
35+
<div key={blog.id} className="bg-gray-200 dark:bg-dark-frame-bg dark:text-white text-primary shadow-lg rounded-lg cursor-pointer hover:shadow-xl transition duration-300" >
36+
<Link to={`/blogs/${blog.id}`}>
3337
<img src={blog.coverImage} alt={blog.title} className="w-full h-40 object-cover mb-4" />
38+
</Link>
3439
<div className="p-3">
40+
<Link to={`/blogs/${blog.id}`}>
3541
<div className="flex justify-between text-sm mb-4 items-center">
3642
<div className="flex flex-wrap items-center gap-3">
3743
<span className="font-semibold flex flex-row gap-2 items-center">
@@ -51,14 +57,13 @@ const BlogCard = ({ blog }: { blog: Blog }) => (
5157
</span>
5258
</div>
5359
</div>
54-
60+
</Link>
61+
<Link to={`/blogs/${blog.id}`}>
5562
<h3 className="text-xl font-semibold mb-2">{blog.title}</h3>
5663
<p className="mb-4 text-black-text dark:text-white overflow-hidden line-clamp-3">
5764
{blog.content}
5865
</p>
59-
<Link to={`/blogs/${blog.id}`} className="text-green hover:underline">
60-
Read More →
61-
</Link>
66+
</Link>
6267
</div>
6368
</div>
6469
);

‎src/components/home/Header.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { useNotifications } from "../../utils/Notifications";
1010
import { useAdminNotifications } from "../../hooks/useAdminNotifications";
1111
const logo = require("../../assets/logo.svg").default;
1212
const LogoWhite: string = require("../../assets/logoWhite.svg").default;
13-
const profilePlaceholder = require("../../assets/avatar.png").default;
13+
const profilePlaceholder = require("../../assets/default-image.jpg").default;
1414

1515
const Header = () => {
1616
const [isNavOpen, setIsNavOpen] = useState(false);
@@ -21,7 +21,7 @@ const Header = () => {
2121
const accessToken = localStorage.getItem("access_token");
2222
const isLoggedIn = Boolean(accessToken);
2323
//@ts-ignore
24-
const user = isLoggedIn ? jwtDecode(accessToken)?.profile || profilePlaceholder : profilePlaceholder;
24+
const user = isLoggedIn ? jwtDecode(accessToken)?.data.picture || profilePlaceholder : profilePlaceholder;
2525

2626
const roleName = localStorage.getItem("roleName");
2727

‎src/components/profileDropdown.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,13 +44,13 @@ function ProfileDropdown({
4444
>
4545
<>{t("Preferences")}</>
4646
</Link>
47-
{/* <Link
47+
<Link
4848
onClick={handleShowProfileDropdown}
4949
to={destination()}
5050
className="font-semibold text-gray-600 dark:text-black px-4 py-2 pb-4 hover:bg-gray-600 hover:text-gray-200 dark:hover:bg-gray-300 dark:hover:text-gray-900"
5151
>
5252
<>{t("Dashboard")}</>
53-
</Link> */}
53+
</Link>
5454
</div>
5555
</div>
5656
</div>

‎src/components/sidebar/navHeader.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import jwtDecode from "jwt-decode";
1212
import { useNotifications } from "../../utils/Notifications";
1313
import { useAdminNotifications } from "../../hooks/useAdminNotifications";
1414
const logo: string = require("../../assets/logo.svg").default;
15-
const profile: string = require("../../assets/avatar.png").default;
15+
const profile: string = require("../../assets/default-image.jpg").default;
1616
const LogoWhite: string = require("../../assets/logoWhite.svg").default;
1717
import {destination} from '../../utils/utils'
1818
import SearchBar from "../../components/SearchBar";
@@ -85,7 +85,7 @@ function NavBar() {
8585
const userDestination = destination();
8686
const access_token = localStorage.getItem("access_token");
8787
//@ts-ignore
88-
const user = access_token ? jwtDecode(access_token)?.profile || profile : profile;
88+
const user = access_token ? jwtDecode(access_token)?.picture || profile : profile;
8989

9090
const roleName = localStorage.getItem("roleName");
9191
const [nav, setNav] = useState(false);

‎src/pages/Blogs/Blogs.tsx‎

Lines changed: 64 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -57,62 +57,71 @@ const Blogs: React.FC = () => {
5757
</div>
5858
</div>
5959
) : blogs.length > 0 ? (
60-
<><div className="grid grid-cols-1 sm:grid-cols-3 md:grid-cols-1 gap-6 px-10">
60+
<>
61+
<div className="grid grid-cols-1 sm:grid-cols-3 md:grid-cols-1 gap-6 px-10">
6162
{blogs.map((blog) => (
62-
<div
63-
key={blog.id}
64-
className="bg-gray-200 dark:bg-dark-frame-bg dark:text-white text-primary shadow-lg rounded-lg cursor-pointer hover:shadow-xl transition duration-300"
65-
>
66-
<img
67-
src={blog.coverImage}
68-
alt={blog.title}
69-
className="w-full h-40 object-cover mb-4" />
70-
<div className="p-3">
71-
<div className="flex justify-between text-sm text-primary dark:text-white mb-4 items-center">
72-
<div className="flex items-center gap-3">
73-
<div className="flex flex-wrap items-center gap-3">
74-
<span className="font-semibold flex flex-row gap-2 items-center">
75-
<FaUser size={20} className='dark:text-green' /> {blog.author.firstname}
76-
</span>
77-
<span className="ml-2 flex flex-row gap-2 items-center">
78-
<span className="ml-2 flex flex-row gap-2 items-center">
79-
<FaCalendar size={20} className="dark:text-green" />
80-
{blog.created_at
81-
? new Date(Number(blog.created_at)).toLocaleDateString()
82-
: "Unknown Date"}
83-
</span>
84-
</span>
85-
<span className='flex flex-row gap-1 items-center'>
86-
<CiHeart size={20} className='dark:text-green' /> {blog.reactions.length || 0}
87-
</span>
88-
<span className='flex flex-row gap-1 items-center'>
89-
<FaCommentDots size={20} className='dark:text-green' /> {blog.comments.length || 0}
90-
</span>
91-
</div>
92-
</div>
93-
</div>
94-
<h3 className="text-xl font-semibold mb-2">{blog.title}</h3>
95-
<p className="mb-4 text-black-text dark:text-white overflow-hidden line-clamp-3">
96-
{blog.content.substring(0, 150)}...
97-
</p>
98-
<div className="flex flex-wrap gap-2 mt-3">
99-
{blog.tags.map((tag) => (
100-
<span
101-
key={tag}
102-
onClick={() => setSelectedTag(tag)}
103-
className="bg-green-100 text-green-700 text-xs px-2 py-1 rounded cursor-pointer hover:bg-green-200"
104-
>
105-
#{tag}
106-
</span>
107-
))}
108-
</div>
109-
<Link to={`/blogs/${blog.id}`} className="text-green hover:underline">
110-
Read More →
111-
</Link>
112-
</div>
113-
</div>
63+
<div
64+
key={blog.id}
65+
className="bg-gray-200 dark:bg-dark-frame-bg dark:text-white text-primary shadow-lg rounded-lg cursor-pointer hover:shadow-xl transition duration-300"
66+
>
67+
<Link to={`/blogs/${blog.id}`}>
68+
<img
69+
src={blog.coverImage}
70+
alt={blog.title}
71+
className="w-full h-40 object-cover mb-4"
72+
/>
73+
</Link>
74+
<div className="p-3">
75+
<div className="flex justify-between text-sm text-primary dark:text-white mb-4 items-center">
76+
<div className="flex items-center gap-3">
77+
<Link to={`/blogs/${blog.id}`}>
78+
<div className="flex flex-wrap items-center gap-3">
79+
<span className="font-semibold flex flex-row gap-2 items-center">
80+
<FaUser size={20} className="dark:text-green" /> {blog.author.firstname}
81+
</span>
82+
<span className="ml-2 flex flex-row gap-2 items-center">
83+
<FaCalendar size={20} className="dark:text-green" />
84+
{blog.created_at
85+
? new Date(Number(blog.created_at)).toLocaleDateString()
86+
: "Unknown Date"}
87+
</span>
88+
<span className="flex flex-row gap-1 items-center">
89+
<CiHeart size={20} className="dark:text-green" /> {blog.reactions.length || 0}
90+
</span>
91+
<span className="flex flex-row gap-1 items-center">
92+
<FaCommentDots size={20} className="dark:text-green" /> {blog.comments.length || 0}
93+
</span>
94+
</div>
95+
</Link>
96+
</div>
97+
</div>
98+
<Link to={`/blogs/${blog.id}`}>
99+
<h3 className="text-xl font-semibold mb-2">{blog.title}</h3>
100+
<p className="mb-4 text-black-text dark:text-white overflow-hidden line-clamp-3">
101+
{blog.content.substring(0, 150)}...
102+
</p>
103+
</Link>
104+
<div className="flex flex-wrap gap-2 mt-3">
105+
{blog.tags.map((tag) => (
106+
<span
107+
key={tag}
108+
onClick={(e) => {
109+
setSelectedTag(tag);
110+
}}
111+
className="bg-green-100 text-green-700 text-xs px-2 py-1 rounded cursor-pointer hover:bg-green-200"
112+
>
113+
#{tag}
114+
</span>
115+
))}
116+
</div>
117+
</div>
118+
119+
</div>
120+
114121
))}
115-
</div><Footer /></>
122+
</div>
123+
124+
</>
116125
) : (
117126
<div className="flex flex-col justify-center items-center h-screen text-center dark:bg-dark-bg bg-white px-6">
118127
<svg
@@ -127,6 +136,7 @@ const Blogs: React.FC = () => {
127136
</div>
128137
)}
129138
</div>
139+
<Footer />
130140
</section>
131141
);
132142
};

0 commit comments

Comments
 (0)