Skip to content

Commit

Permalink
fix: Enhance landing page and implement navigations
Browse files Browse the repository at this point in the history
  • Loading branch information
@Prince-Kid
Prince-Kid committed Dec 3, 2024
1 parent d048945 commit 3806b4b
Show file tree
Hide file tree
Showing 6 changed files with 98 additions and 83 deletions.
36 changes: 18 additions & 18 deletions src/components/home/AboutUs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,31 +34,31 @@ const AboutUs = () => {
</div>


<div className="flex flex-wrap gap-6 items-center px-10 ">
<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">
<GrResources size={40} className='dark:text-white'/>
<h3 className='dark:text-green text-xl font-semibold mb-2 text-primary'>Guidance</h3>
<p className='text-black-600 dark:text-white'>
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.
<div className="flex flex-wrap justify-center gap-4 p-4">
<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">
<GrResources size={40} className="dark:text-white" />
<h3 className="dark:text-green text-xl font-semibold mb-2 text-primary">Guidance</h3>
<p className="text-black-600 dark:text-white">
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.
</p>
</div>
<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">
<FaUsers size={40} className='dark:text-white' />
<h3 className='dark:text-green text-xl font-semibold mb-2 text-primary'>Community</h3>
<p className='text-black-600 dark:text-white'>
Connect with a community of like-minded tech enthusiasts, where you can share insights, ask questions, and build valuable relationships with peers and mentors.
<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">
<FaUsers size={40} className="dark:text-white" />
<h3 className="dark:text-green text-xl font-semibold mb-2 text-primary">Community</h3>
<p className="text-black-600 dark:text-white">
Connect with a community of like-minded tech enthusiasts, where you can share insights, ask questions, and build valuable relationships with peers and mentors.
</p>
</div>
<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">
<GrDocumentPerformance size={35} className='dark:text-white ' />
<h3 className='dark:text-green text-xl font-semibold mb-2 text-primary'>Tools and Resources</h3>
<p className='text-black-600 dark:text-white'>
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>
<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">
<GrDocumentPerformance size={35} className="dark:text-white" />
<h3 className="dark:text-green text-xl font-semibold mb-2 text-primary">Tools and Resources</h3>
<p className="text-black-600 dark:text-white">
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>
</div>

</div>


</div>
)
}
Expand Down
15 changes: 10 additions & 5 deletions src/components/home/Blogs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import { Link } from 'react-router-dom';
import { fetchAllBlogs } from '../../redux/actions/blogsActions';
import { toast } from 'react-toastify';



interface Author {
id: string;
email: string;
Expand All @@ -28,10 +30,14 @@ import { toast } from 'react-toastify';
}



const BlogCard = ({ blog }: { blog: Blog }) => (
<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">
<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" >
<Link to={`/blogs/${blog.id}`}>
<img src={blog.coverImage} alt={blog.title} className="w-full h-40 object-cover mb-4" />
</Link>
<div className="p-3">
<Link to={`/blogs/${blog.id}`}>
<div className="flex justify-between text-sm mb-4 items-center">
<div className="flex flex-wrap items-center gap-3">
<span className="font-semibold flex flex-row gap-2 items-center">
Expand All @@ -51,14 +57,13 @@ const BlogCard = ({ blog }: { blog: Blog }) => (
</span>
</div>
</div>

</Link>
<Link to={`/blogs/${blog.id}`}>
<h3 className="text-xl font-semibold mb-2">{blog.title}</h3>
<p className="mb-4 text-black-text dark:text-white overflow-hidden line-clamp-3">
{blog.content}
</p>
<Link to={`/blogs/${blog.id}`} className="text-green hover:underline">
Read More →
</Link>
</Link>
</div>
</div>
);
Expand Down
4 changes: 2 additions & 2 deletions src/components/home/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { useNotifications } from "../../utils/Notifications";
import { useAdminNotifications } from "../../hooks/useAdminNotifications";
const logo = require("../../assets/logo.svg").default;
const LogoWhite: string = require("../../assets/logoWhite.svg").default;
const profilePlaceholder = require("../../assets/avatar.png").default;
const profilePlaceholder = require("../../assets/default-image.jpg").default;

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

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

Expand Down
4 changes: 2 additions & 2 deletions src/components/profileDropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,13 @@ function ProfileDropdown({
>
<>{t("Preferences")}</>
</Link>
{/* <Link
<Link
onClick={handleShowProfileDropdown}
to={destination()}
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"
>
<>{t("Dashboard")}</>
</Link> */}
</Link>
</div>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/sidebar/navHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import jwtDecode from "jwt-decode";
import { useNotifications } from "../../utils/Notifications";
import { useAdminNotifications } from "../../hooks/useAdminNotifications";
const logo: string = require("../../assets/logo.svg").default;
const profile: string = require("../../assets/avatar.png").default;
const profile: string = require("../../assets/default-image.jpg").default;
const LogoWhite: string = require("../../assets/logoWhite.svg").default;
import {destination} from '../../utils/utils'
import SearchBar from "../../components/SearchBar";
Expand Down Expand Up @@ -85,7 +85,7 @@ function NavBar() {
const userDestination = destination();
const access_token = localStorage.getItem("access_token");
//@ts-ignore
const user = access_token ? jwtDecode(access_token)?.profile || profile : profile;
const user = access_token ? jwtDecode(access_token)?.picture || profile : profile;

const roleName = localStorage.getItem("roleName");
const [nav, setNav] = useState(false);
Expand Down
118 changes: 64 additions & 54 deletions src/pages/Blogs/Blogs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,62 +57,71 @@ const Blogs: React.FC = () => {
</div>
</div>
) : blogs.length > 0 ? (
<><div className="grid grid-cols-1 sm:grid-cols-3 md:grid-cols-1 gap-6 px-10">
<>
<div className="grid grid-cols-1 sm:grid-cols-3 md:grid-cols-1 gap-6 px-10">
{blogs.map((blog) => (
<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"
>
<img
src={blog.coverImage}
alt={blog.title}
className="w-full h-40 object-cover mb-4" />
<div className="p-3">
<div className="flex justify-between text-sm text-primary dark:text-white mb-4 items-center">
<div className="flex items-center gap-3">
<div className="flex flex-wrap items-center gap-3">
<span className="font-semibold flex flex-row gap-2 items-center">
<FaUser size={20} className='dark:text-green' /> {blog.author.firstname}
</span>
<span className="ml-2 flex flex-row gap-2 items-center">
<span className="ml-2 flex flex-row gap-2 items-center">
<FaCalendar size={20} className="dark:text-green" />
{blog.created_at
? new Date(Number(blog.created_at)).toLocaleDateString()
: "Unknown Date"}
</span>
</span>
<span className='flex flex-row gap-1 items-center'>
<CiHeart size={20} className='dark:text-green' /> {blog.reactions.length || 0}
</span>
<span className='flex flex-row gap-1 items-center'>
<FaCommentDots size={20} className='dark:text-green' /> {blog.comments.length || 0}
</span>
</div>
</div>
</div>
<h3 className="text-xl font-semibold mb-2">{blog.title}</h3>
<p className="mb-4 text-black-text dark:text-white overflow-hidden line-clamp-3">
{blog.content.substring(0, 150)}...
</p>
<div className="flex flex-wrap gap-2 mt-3">
{blog.tags.map((tag) => (
<span
key={tag}
onClick={() => setSelectedTag(tag)}
className="bg-green-100 text-green-700 text-xs px-2 py-1 rounded cursor-pointer hover:bg-green-200"
>
#{tag}
</span>
))}
</div>
<Link to={`/blogs/${blog.id}`} className="text-green hover:underline">
Read More →
</Link>
</div>
</div>
<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"
>
<Link to={`/blogs/${blog.id}`}>
<img
src={blog.coverImage}
alt={blog.title}
className="w-full h-40 object-cover mb-4"
/>
</Link>
<div className="p-3">
<div className="flex justify-between text-sm text-primary dark:text-white mb-4 items-center">
<div className="flex items-center gap-3">
<Link to={`/blogs/${blog.id}`}>
<div className="flex flex-wrap items-center gap-3">
<span className="font-semibold flex flex-row gap-2 items-center">
<FaUser size={20} className="dark:text-green" /> {blog.author.firstname}
</span>
<span className="ml-2 flex flex-row gap-2 items-center">
<FaCalendar size={20} className="dark:text-green" />
{blog.created_at
? new Date(Number(blog.created_at)).toLocaleDateString()
: "Unknown Date"}
</span>
<span className="flex flex-row gap-1 items-center">
<CiHeart size={20} className="dark:text-green" /> {blog.reactions.length || 0}
</span>
<span className="flex flex-row gap-1 items-center">
<FaCommentDots size={20} className="dark:text-green" /> {blog.comments.length || 0}
</span>
</div>
</Link>
</div>
</div>
<Link to={`/blogs/${blog.id}`}>
<h3 className="text-xl font-semibold mb-2">{blog.title}</h3>
<p className="mb-4 text-black-text dark:text-white overflow-hidden line-clamp-3">
{blog.content.substring(0, 150)}...
</p>
</Link>
<div className="flex flex-wrap gap-2 mt-3">
{blog.tags.map((tag) => (
<span
key={tag}
onClick={(e) => {
setSelectedTag(tag);
}}
className="bg-green-100 text-green-700 text-xs px-2 py-1 rounded cursor-pointer hover:bg-green-200"
>
#{tag}
</span>
))}
</div>
</div>

</div>

))}
</div><Footer /></>
</div>

</>
) : (
<div className="flex flex-col justify-center items-center h-screen text-center dark:bg-dark-bg bg-white px-6">
<svg
Expand All @@ -127,6 +136,7 @@ const Blogs: React.FC = () => {
</div>
)}
</div>
<Footer />
</section>
);
};
Expand Down

0 comments on commit 3806b4b

Please sign in to comment.