Skip to content

Commit d0a7e9e

Browse files
ajay-dhangarajay-dhangar
authored
Merge pull request #4492 from CodeHarborHub/dev-3
UI/UX update for Blogs and Books Page
2 parents fac6013 + 5176434 commit d0a7e9e

File tree

5 files changed

+97
-180
lines changed

5 files changed

+97
-180
lines changed

‎src/css/custom.css‎

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
--ifm-task-complete-color: #2e9e32e1;
3232
--ifm-task-incomplete-color: #3d78cbe1;
3333
--ifm-bg-color: #f8f9fa;
34-
--image-filter:invert(0);
34+
--image-filter: invert(0);
3535
--site-color-svg-icon-favorite: #ff1100cb;
3636
--ifm-text-color: #000;
3737
}
@@ -48,7 +48,7 @@
4848
--ifm-task-complete-color: #25c2a0;
4949
--ifm-task-incomplete-color: #3d78cbe1;
5050
--ifm-bg-color: #1a202c;
51-
--image-filter:invert(1);
51+
--image-filter: invert(1);
5252
--site-color-svg-icon-favorite: #ff9100e5;
5353
--ifm-text-color: #fff;
5454
}
@@ -177,6 +177,19 @@ mark {
177177
transform: scale(1.1);
178178
}
179179

180+
.gradient-text {
181+
background: linear-gradient(
182+
90deg,
183+
rgb(255, 169, 8) 0%,
184+
rgb(246, 41, 41) 40%,
185+
rgb(152, 0, 255) 100%
186+
);
187+
background-clip: text;
188+
-webkit-background-clip: text;
189+
-webkit-text-fill-color: transparent;
190+
color: transparent;
191+
}
192+
180193
.typing_text {
181194
animation: typing 3s steps(40, end);
182195
overflow: hidden;
@@ -262,8 +275,11 @@ th {
262275
border: none !important;
263276
}
264277

265-
thead, tbody, tr,
266-
td, th {
278+
thead,
279+
tbody,
280+
tr,
281+
td,
282+
th {
267283
border: 1px solid var(--ifm-color-primary) !important;
268284
}
269285
.easy {
@@ -331,8 +347,8 @@ td, th {
331347
position: relative;
332348
min-width: 180px;
333349
}
334-
@media (max-width:400px) {
335-
.dsa-content{
350+
@media (max-width: 400px) {
351+
.dsa-content {
336352
flex-direction: column;
337353
}
338354
}
@@ -361,10 +377,10 @@ td, th {
361377
border-radius: 8px;
362378
}
363379

364-
[data-theme='dark'] #__docusaurus_skipToContent_fallback {
380+
[data-theme="dark"] #__docusaurus_skipToContent_fallback {
365381
background: linear-gradient(rgba(15, 23, 42, 0.796), rgba(15, 23, 42, 0.23));
366382
}
367-
[data-theme='dark'] .navbar {
383+
[data-theme="dark"] .navbar {
368384
background: rgba(15, 23, 42, 0.862);
369385
border-bottom: 1px solid #4e8da0db;
370386
}

‎src/pages/blogs/index.tsx‎

Lines changed: 36 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import React from "react";
2-
import "./style.css";
32
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
43
import Layout from "@theme/Layout";
54
import Link from "@docusaurus/Link";
@@ -12,7 +11,7 @@ export default function Blogs(): React.JSX.Element {
1211
return (
1312
<Layout
1413
title={`Blogs from ${siteConfig.title}`}
15-
description="Welcome to CodeHarborHub Bloge. Learn the basics to advanced concepts of web development. html, css, javascript, react, node.js, dsa, and more."
14+
description="Welcome to CodeHarborHub Blogs. Learn the basics to advanced concepts of web development including HTML, CSS, JavaScript, React, Node.js, DSA, and more."
1615
>
1716
<Head>
1817
<script
@@ -27,27 +26,47 @@ export default function Blogs(): React.JSX.Element {
2726
/>
2827
<meta name="google-adsense-account" content="ca-pub-5832817025080991" />
2928
</Head>
30-
<section className="blog-page margin-top--lg margin-bottom--lg">
31-
<div className="blog-header">
32-
<h1 className="TitleText">Welcome to CodeHarborHub Blogs </h1>
33-
<p className="SubTitleText">
34-
Learn the basics to advanced concepts of web development. html, css,
35-
javascript, react, node.js, dsa, and more.
29+
<section className="m-4 my-10">
30+
<div className="text-center mb-8">
31+
<h1 className="text-4xl font-bold gradient-text">
32+
Welcome to CodeHarborHub Blogs
33+
</h1>
34+
<p className="text-lg text-gray-700 dark:text-gray-300">
35+
Discover web development articles ranging from HTML and CSS to
36+
JavaScript, React, Node.js, DSA, and much more.
3637
</p>
3738
</div>
38-
<div className="card-container">
39+
<div className="grid gap-6 grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
3940
{blogs.map((blog) => (
40-
<div key={blog.id} className="card">
41-
<img src={blog.image} alt={blog.title} />
42-
<h2>{blog.title}</h2>
43-
<p>{blog.description}</p>
44-
<Link to={`/blog/${blog.slug}`} className="read-more">
45-
Read More
46-
</Link>
47-
</div>
41+
<BlogCard key={blog.id} blog={blog} />
4842
))}
4943
</div>
5044
</section>
5145
</Layout>
5246
);
5347
}
48+
49+
50+
const BlogCard = ({ blog }) => {
51+
return (
52+
<div className="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
53+
<img
54+
src={blog.image}
55+
alt={blog.title}
56+
className="w-full h-48 object-cover"
57+
/>
58+
<div className="p-4">
59+
<h2 className="text-xl font-semibold dark:text-white">{blog.title}</h2>
60+
<p className="text-gray-600 dark:text-gray-400 mb-4">
61+
{blog.description}
62+
</p>
63+
<Link
64+
to={`/blog/${blog.slug}`}
65+
className="text-blue-600 dark:text-blue-400 hover:underline"
66+
>
67+
Read More
68+
</Link>
69+
</div>
70+
</div>
71+
);
72+
};

‎src/pages/blogs/style.css‎

Lines changed: 0 additions & 67 deletions
This file was deleted.

‎src/pages/ebooks/index.tsx‎

Lines changed: 37 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,18 @@
11
import React from "react";
2-
import "./style.css";
32
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
43
import Layout from "@theme/Layout";
54
import Link from "@docusaurus/Link";
65
import books from "../../database/ebooks";
76
import Head from "@docusaurus/Head";
87

9-
export default function Books() {
8+
export default function Books(): JSX.Element {
109
// Books component
1110
const { siteConfig } = useDocusaurusContext();
1211

1312
return (
1413
<Layout
15-
title={`Blogs from ${siteConfig.title}`}
16-
description="Welcome to CodeHarborHub Blog. Learn the basics to advanced concepts of web development. html, css, javascript, react, node.js, dsa, and more."
14+
title={`Books from ${siteConfig.title}`}
15+
description="Explore CodeHarborHub's E-Books on web development topics, including HTML, CSS, JavaScript, React, Node.js, and more."
1716
>
1817
<Head>
1918
<script
@@ -28,28 +27,46 @@ export default function Books() {
2827
/>
2928
<meta name="google-adsense-account" content="ca-pub-5832817025080991" />
3029
</Head>
31-
<section className="blog-page margin-top--lg margin-bottom--lg">
32-
<div className="blog-header">
33-
<h1 className="TitleText">Welcome to CodeHarborHub E-Books </h1>
34-
<p className="SubTitleText">
35-
Learn the basics to advanced concepts of web development. html, css,
36-
javascript, react, node.js, DSA, and many more from our E-Book
37-
collection.
30+
<section className="blog-page my-10">
31+
<div className="text-center mb-8">
32+
<h1 className="text-4xl font-bold gradient-text">
33+
Welcome to CodeHarborHub E-Books
34+
</h1>
35+
<p className="text-lg text-gray-700 dark:text-gray-300">
36+
Discover a variety of web development resources. Learn HTML, CSS,
37+
JavaScript, React, Node.js, DSA, and much more with our e-books.
3838
</p>
3939
</div>
40-
<div className="card-container">
40+
<div className="grid gap-6 grid-cols-1 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
4141
{books.map((book) => (
42-
<div key={book.id} className="card">
43-
<img src={book.image} alt={book.title} />
44-
<h2>{book.title}</h2>
45-
<p>{book.description}</p>
46-
<Link to={book.link} className="read-more">
47-
Link to the PDF
48-
</Link>
49-
</div>
42+
<BookCard key={book.id} book={book} />
5043
))}
5144
</div>
5245
</section>
5346
</Layout>
5447
);
5548
}
49+
50+
const BookCard = ({ book }) => {
51+
return (
52+
<div className="card bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
53+
<img
54+
src={book.image}
55+
alt={book.title}
56+
className="w-full h-48 object-cover"
57+
/>
58+
<div className="p-4">
59+
<h2 className="text-xl font-semibold dark:text-white">{book.title}</h2>
60+
<p className="text-gray-600 dark:text-gray-400 mb-4">
61+
{book.description}
62+
</p>
63+
<Link
64+
to={book.link}
65+
className="text-blue-600 dark:text-blue-400 hover:underline"
66+
>
67+
Link to the PDF
68+
</Link>
69+
</div>
70+
</div>
71+
);
72+
};

‎src/pages/ebooks/style.css‎

Lines changed: 0 additions & 68 deletions
This file was deleted.

0 commit comments

Comments
 (0)