Skip to content

Commit 8ef1790

Browse files
Srilakshmi-KandeSrilakshmi-Kande
committed
Enhanced the Footer section
1 parent ea75ab7 commit 8ef1790

File tree

4 files changed

+199
-52
lines changed

4 files changed

+199
-52
lines changed

‎docusaurus.config.ts‎

Lines changed: 37 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -121,44 +121,44 @@ const config: Config = {
121121
},
122122
],
123123
},
124-
footer: {
125-
style: 'dark',
126-
links: [
127-
{
128-
title: 'Docs',
129-
items: [
130-
{
131-
label: 'Tutorial',
132-
to: '/docs/intro',
133-
},
134-
],
135-
},
136-
{
137-
title: 'Community',
138-
items: [
139-
{
140-
label: 'Discord',
141-
href: 'https://discord.gg/YmSKSDfH'
142-
},
143-
],
144-
},
145-
{
146-
title: 'More',
147-
items: [
148-
{
149-
label: 'Blog',
150-
to: '/blog',
151-
},
152-
{
153-
label: 'GitHub',
154-
href: 'https://github.com/souvikpramanikgit/LearnHub',
155-
},
156-
],
157-
},
158-
],
124+
// footer: {
125+
// style: 'dark',
126+
// links: [
127+
// {
128+
// title: 'Docs',
129+
// items: [
130+
// {
131+
// label: 'Tutorial',
132+
// to: '/docs/intro',
133+
// },
134+
// ],
135+
// },
136+
// {
137+
// title: 'Community',
138+
// items: [
139+
// {
140+
// label: 'Discord',
141+
// href: 'https://discord.gg/YmSKSDfH'
142+
// },
143+
// ],
144+
// },
145+
// {
146+
// title: 'More',
147+
// items: [
148+
// {
149+
// label: 'Blog',
150+
// to: '/blog',
151+
// },
152+
// {
153+
// label: 'GitHub',
154+
// href: 'https://github.com/souvikpramanikgit/LearnHub',
155+
// },
156+
// ],
157+
// },
158+
// ],
159159

160-
copyright: `Copyright © ${new Date().getFullYear()} LearnHub. Built with Docusaurus.`,
161-
},
160+
// copyright: `Copyright © ${new Date().getFullYear()} LearnHub. Built with Docusaurus.`,
161+
// },
162162
prism: {
163163
theme: prismThemes.github,
164164
darkTheme: prismThemes.dracula,

‎package-lock.json‎

Lines changed: 1 addition & 15 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/theme/Footer/index.tsx‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import React from "react";
2+
import clsx from "clsx";
3+
import styles from "./styles.module.css";
4+
5+
const Footer: React.FC = () => {
6+
return (
7+
<footer className={clsx("footer", styles.footer)}>
8+
<div className="container">
9+
<div className={styles.footerColumns}>
10+
<div className={styles.footerCol}>
11+
<a
12+
href="/"
13+
style={{ display: "flex", alignItems: "center", gap: "8px",textDecoration: "none" }}
14+
>
15+
<img
16+
src="/img/learnhub.png"
17+
alt="LearnHub Logo"
18+
style={{ height: "30px" }}
19+
/>
20+
<span style={{ fontWeight: 700, fontSize: "18px",color: "#22c55e" }}>
21+
LearnHub
22+
</span>
23+
</a>
24+
<p style={{ marginTop: "8px", fontSize: "14px", opacity: 0.8 }}>
25+
Upskill with future-ready tech courses designed for your career
26+
growth.
27+
</p>
28+
</div>
29+
30+
<div className={styles.footerCol}>
31+
<h4>Docs</h4>
32+
<ul>
33+
<li>
34+
<a href="/docs/intro">
35+
Tutorial<span className="footerLink "><svg xmlns="http://www.w3.org/2000/svg" height="14" width="14" viewBox="0 0 640 640"><path fill="#ffffff" d="M384 64C366.3 64 352 78.3 352 96C352 113.7 366.3 128 384 128L466.7 128L265.3 329.4C252.8 341.9 252.8 362.2 265.3 374.7C277.8 387.2 298.1 387.2 310.6 374.7L512 173.3L512 256C512 273.7 526.3 288 544 288C561.7 288 576 273.7 576 256L576 96C576 78.3 561.7 64 544 64L384 64zM144 160C99.8 160 64 195.8 64 240L64 496C64 540.2 99.8 576 144 576L400 576C444.2 576 480 540.2 480 496L480 416C480 398.3 465.7 384 448 384C430.3 384 416 398.3 416 416L416 496C416 504.8 408.8 512 400 512L144 512C135.2 512 128 504.8 128 496L128 240C128 231.2 135.2 224 144 224L224 224C241.7 224 256 209.7 256 192C256 174.3 241.7 160 224 160L144 160z"/></svg></span>
36+
</a>
37+
</li>
38+
</ul>
39+
</div>
40+
41+
<div className={styles.footerCol}>
42+
<h4>Community</h4>
43+
<ul>
44+
<li>
45+
<a href="https://discord.gg/YmSKSDfH">
46+
Discord<span className="footerLink "><svg xmlns="http://www.w3.org/2000/svg" height="14" width="14" viewBox="0 0 640 640"><path fill="#ffffff" d="M384 64C366.3 64 352 78.3 352 96C352 113.7 366.3 128 384 128L466.7 128L265.3 329.4C252.8 341.9 252.8 362.2 265.3 374.7C277.8 387.2 298.1 387.2 310.6 374.7L512 173.3L512 256C512 273.7 526.3 288 544 288C561.7 288 576 273.7 576 256L576 96C576 78.3 561.7 64 544 64L384 64zM144 160C99.8 160 64 195.8 64 240L64 496C64 540.2 99.8 576 144 576L400 576C444.2 576 480 540.2 480 496L480 416C480 398.3 465.7 384 448 384C430.3 384 416 398.3 416 416L416 496C416 504.8 408.8 512 400 512L144 512C135.2 512 128 504.8 128 496L128 240C128 231.2 135.2 224 144 224L224 224C241.7 224 256 209.7 256 192C256 174.3 241.7 160 224 160L144 160z"/></svg></span>
47+
</a>
48+
</li>
49+
</ul>
50+
</div>
51+
52+
<div className={styles.footerCol}>
53+
<h4>More</h4>
54+
<ul>
55+
<li>
56+
<a href="/blog">Blog</a>
57+
</li>
58+
<li>
59+
<a href="https://github.com/souvikpramanikgit/LearnHub">
60+
GitHub<span className={styles.footerLink}><svg xmlns="http://www.w3.org/2000/svg" height="14" width="14" viewBox="0 0 640 640"><path fill="#ffffff" d="M384 64C366.3 64 352 78.3 352 96C352 113.7 366.3 128 384 128L466.7 128L265.3 329.4C252.8 341.9 252.8 362.2 265.3 374.7C277.8 387.2 298.1 387.2 310.6 374.7L512 173.3L512 256C512 273.7 526.3 288 544 288C561.7 288 576 273.7 576 256L576 96C576 78.3 561.7 64 544 64L384 64zM144 160C99.8 160 64 195.8 64 240L64 496C64 540.2 99.8 576 144 576L400 576C444.2 576 480 540.2 480 496L480 416C480 398.3 465.7 384 448 384C430.3 384 416 398.3 416 416L416 496C416 504.8 408.8 512 400 512L144 512C135.2 512 128 504.8 128 496L128 240C128 231.2 135.2 224 144 224L224 224C241.7 224 256 209.7 256 192C256 174.3 241.7 160 224 160L144 160z"/></svg></span>
61+
</a>
62+
</li>
63+
</ul>
64+
</div>
65+
</div>
66+
67+
<div className={styles.footerBottom}>
68+
Copyright © {new Date().getFullYear()} LearnHub. Built with
69+
Docusaurus.
70+
</div>
71+
</div>
72+
</footer>
73+
);
74+
};
75+
76+
export default Footer;

‎src/theme/Footer/styles.module.css‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
.footer {
2+
padding: 2rem 0;
3+
background: #2d3542;
4+
color: #fff;
5+
}
6+
7+
.footerColumns {
8+
display: grid;
9+
grid-template-columns: repeat(4, 1fr);
10+
gap: 2rem;
11+
}
12+
13+
@media (max-width: 768px) {
14+
.footerColumns {
15+
grid-template-columns: repeat(2, 1fr);
16+
}
17+
}
18+
19+
@media (max-width: 480px) {
20+
.footerColumns {
21+
grid-template-columns: 1fr;
22+
gap: 1rem;
23+
}
24+
25+
.footerCol {
26+
margin-right: 0;
27+
}
28+
}
29+
30+
.footerCol h4 {
31+
margin-bottom: 0.75rem;
32+
font-size: 1rem;
33+
font-weight: 600;
34+
position: relative;
35+
display: inline-block;
36+
padding-bottom: 5px;
37+
}
38+
39+
.footerCol h4::after {
40+
content: "";
41+
position: absolute;
42+
left: 0;
43+
bottom: 0;
44+
width: 80%;
45+
height: 2.5px;
46+
background: #22c55e;
47+
border-radius: 2px;
48+
}
49+
50+
.footerCol ul {
51+
list-style: none;
52+
padding: 0;
53+
margin: 0;
54+
}
55+
56+
.footerCol ul li {
57+
margin-bottom: 0.5rem;
58+
}
59+
60+
.footerCol a {
61+
display: inline-flex;
62+
align-items: center;
63+
gap: 6px;
64+
color: #ffffffcc;
65+
text-decoration: none;
66+
transition: color 0.2s ease-in-out;
67+
}
68+
69+
.footerCol a:hover {
70+
color: #22c55e;
71+
}
72+
73+
.footerCol a:hover svg path {
74+
fill: #22c55e;
75+
transition: fill 0.2s ease-in-out;
76+
}
77+
78+
79+
80+
.footerBottom {
81+
margin-top: 2rem;
82+
text-align: center;
83+
font-size: 0.85rem;
84+
opacity: 0.8;
85+
}

0 commit comments

Comments
 (0)