Skip to content

Commit 927d73b

Browse files
OkenHahaOkenHaha
authored
Merge pull request #354 from NishantRana07/main
Update Footer.jsx
2 parents 729fcab + 78325a6 commit 927d73b

File tree

1 file changed

+125
-107
lines changed

1 file changed

+125
-107
lines changed

‎front-end/src/components/Footer.jsx‎

Lines changed: 125 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ import logo from "../assets/logo.png";
66
function Footer() {
77
return (
88
<>
9-
<footer className="p-8 w-full bg-gradient-to-r from-white to-white dark:from-[#171d30] dark:to-[#001f3d] text-black dark:text-white bg-emerald-500 shadow-lg shadow-emerald-500/50">
10-
<div className="mx-auto max-w-screen-xl px-4 pb-8 pt-16 sm:px-6 lg:px-8">
9+
<footer className="p-8 w-full h-32 bg-gradient-to-r from-white to-white dark:from-[#171d30] dark:to-[#001f3d] text-black dark:text-white bg-emerald-500 shadow-lg shadow-emerald-500/50">
10+
<div className=" max-w-screen-xl px-4 pb-8 pt-16 sm:px-6 lg:px-8">
1111
<div className="mt-16 grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-32">
1212
<div className="mx-auto max-w-sm lg:max-w-none">
1313
<Link to="/" className="flex items-center space-x-2 group">
@@ -16,119 +16,137 @@ function Footer() {
1616
</span>
1717
</Link>
1818

19-
<p className="mt-4 text-center text-gray-500 lg:text-left lg:text-lg dark:text-white dark:hover:text-white/75">
19+
<p className="mt-4 min-w-64 text-center text-gray-500 lg:text-left lg:text-lg dark:text-white dark:hover:text-white/75">
2020
Share your story, inspire the world. A platform for bloggers and
2121
readers.
2222
</p>
2323
</div>
2424

25-
<div className="grid grid-cols-1 gap-8 text-center lg:grid-cols-3 lg:text-left">
26-
<div>
27-
<strong className="relative font-medium text-gray-900 dark:text-white dark:hover:text-white/75 before:absolute before:bottom-0 before:left-1/2 before:transform before:-translate-x-1/2 before:h-[3px] before:w-0 before:bg-gradient-to-r before:from-blue-500 before:via-blue-700 before:to-blue-900 before:shadow-[0px_4px_10px_rgba(30,58,138,0.6)] before:transition-all before:duration-300 hover:before:w-full">
28-
{" "}
29-
About Us{" "}
30-
</strong>
25+
<div className="">
26+
<div className="max-w-screen-xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
27+
{/* <!-- Links Section --> */}
28+
<div>
29+
<strong className="text-black font-bold text-lg mb-4 block">Links</strong>
30+
<ul className="space-y-3">
31+
<li>
32+
<a
33+
className="text-black hover:text-blue-300 transition duration-300 relative before:absolute before:bottom-0 before:left-0 before:w-0 before:h-0.5 before:bg-blue-500 before:transition-all before:duration-300 hover:before:w-full"
34+
href="/"
35+
aria-label="Go to About Us page"
36+
>
37+
About Us
38+
</a>
39+
</li>
40+
<li>
41+
<a
42+
className="text-black hover:text-blue-300 transition duration-300 relative before:absolute before:bottom-0 before:left-0 before:w-0 before:h-0.5 before:bg-blue-500 before:transition-all before:duration-300 hover:before:w-full"
43+
href="/"
44+
aria-label="Go to Home page"
45+
>
46+
Home
47+
</a>
48+
</li>
49+
<li>
50+
<a
51+
className="text-black hover:text-blue-300 transition duration-300 relative before:absolute before:bottom-0 before:left-0 before:w-0 before:h-0.5 before:bg-blue-500 before:transition-all before:duration-300 hover:before:w-full"
52+
href="/about"
53+
aria-label="Go to About page"
54+
>
55+
About
56+
</a>
57+
</li>
58+
<li>
59+
<a
60+
className="text-black hover:text-blue-300 transition duration-300 relative before:absolute before:bottom-0 before:left-0 before:w-0 before:h-0.5 before:bg-blue-500 before:transition-all before:duration-300 hover:before:w-full"
61+
href="/article-list"
62+
aria-label="Go to Articles page"
63+
>
64+
Articles
65+
</a>
66+
</li>
67+
</ul>
68+
</div>
3169

32-
33-
<ul className="mt-6 space-y-1">
34-
<li>
35-
<a
36-
className="relative text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75 before:absolute before:bottom-0 before:left-0 before:h-[2px] before:w-0 before:bg-blue-500 before:transition-all before:duration-300 hover:before:w-full"
37-
href="/"
38-
>
39-
Home
40-
</a>
41-
</li>
70+
{/* <!-- Additional Links Section --> */}
71+
<div>
72+
<strong className="text-black font-bold text-lg mb-4 block">Additional Links</strong>
73+
<ul className="space-y-3">
74+
<li>
75+
<a
76+
className="text-black hover:text-blue-300 transition duration-300 relative before:absolute before:bottom-0 before:left-0 before:w-0 before:h-0.5 before:bg-blue-500 before:transition-all before:duration-300 hover:before:w-full"
77+
href="/faq"
78+
aria-label="Go to FAQ page"
79+
>
80+
FAQ's
81+
</a>
82+
</li>
83+
<li>
84+
<a
85+
className="text-black hover:text-blue-300 transition duration-300 relative before:absolute before:bottom-0 before:left-0 before:w-0 before:h-0.5 before:bg-blue-500 before:transition-all before:duration-300 hover:before:w-full"
86+
href="/contributors"
87+
aria-label="Go to Contributors page"
88+
>
89+
Contributors
90+
</a>
91+
</li>
92+
<li>
93+
<a
94+
className="text-black hover:text-blue-300 transition duration-300 relative before:absolute before:bottom-0 before:left-0 before:w-0 before:h-0.5 before:bg-blue-500 before:transition-all before:duration-300 hover:before:w-full"
95+
href="/PrivacyPolicy"
96+
aria-label="Go to Privacy Policy page"
97+
>
98+
Privacy Policy
99+
</a>
100+
</li>
101+
</ul>
102+
</div>
42103

43-
<li>
44-
<a
45-
className="relative text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75 before:absolute before:bottom-0 before:left-0 before:h-[2px] before:w-0 before:bg-blue-500 before:transition-all before:duration-300 hover:before:w-full"
46-
href="/about"
47-
>
48-
About
49-
</a>
50-
</li>
104+
{/* <!-- Contact Section --> */}
105+
<div>
106+
<strong className="text-black font-bold text-lg mb-4 block">Contact Us</strong>
107+
<ul className="space-y-3">
108+
<li>
109+
<a
110+
className="text-black hover:text-amber-400 transition duration-300"
111+
href="mailto:reactblogswoc@gmail.com"
112+
aria-label="Send an email to reactblogswoc@gmail.com"
113+
>
114+
reactblogswoc@gmail.com
115+
</a>
116+
</li>
117+
</ul>
118+
<div className="mt-4 flex justify-center space-x-6">
119+
<a
120+
className="text-white hover:text-gray-400"
121+
href="https://github.com/OkenHaha/react-blog"
122+
rel="noopener noreferrer"
123+
aria-label="Visit our GitHub repository"
124+
>
125+
<svg
126+
xmlns="http://www.w3.org/2000/svg"
127+
className="w-6 h-6"
128+
fill="currentColor"
129+
viewBox="0 0 24 24"
130+
aria-hidden="true"
131+
>
132+
<path
133+
fillRule="evenodd"
134+
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
135+
clipRule="evenodd"
136+
/>
137+
</svg>
138+
</a>
139+
</div>
140+
</div>
141+
</div>
142+
143+
</div>
51144

52-
<li>
53-
<a
54-
className="relative text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75 before:absolute before:bottom-0 before:left-0 before:h-[2px] before:w-0 before:bg-blue-500 before:transition-all before:duration-300 hover:before:w-full"
55-
href="/article-list"
56-
>
57-
Articles
58-
</a>
59-
</li>
60-
61-
<li>
62-
<a
63-
className="relative text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75 before:absolute before:bottom-0 before:left-0 before:h-[2px] before:w-0 before:bg-blue-500 before:transition-all before:duration-300 hover:before:w-full"
64-
href="/faq"
65-
>
66-
FAQ's
67-
</a>
68-
</li>
69-
70-
<li>
71-
<Link
72-
className="relative text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75 before:absolute before:bottom-0 before:left-0 before:h-[2px] before:w-0 before:bg-blue-500 before:transition-all before:duration-300 hover:before:w-full"
73-
to="/contributors"
74-
>
75-
Contributors
76-
</Link>
77-
</li>
78-
79-
<li>
80-
<Link
81-
className="relative text-gray-700 transition hover:text-gray-700/75 dark:text-white dark:hover:text-white/75 before:absolute before:bottom-0 before:left-0 before:h-[2px] before:w-0 before:bg-blue-500 before:transition-all before:duration-300 hover:before:w-full"
82-
to="/PrivacyPolicy"
83-
>
84-
Privacy policy
85-
</Link>
86-
</li>
87-
</ul>
88-
</div>
89-
90-
<div>
91-
<strong className="relative font-medium text-gray-900 dark:text-white dark:hover:text-white/75 before:absolute before:bottom-0 before:left-1/2 before:transform before:-translate-x-1/2 before:h-[3px] before:w-0 before:bg-gradient-to-r before:from-blue-500 before:via-blue-700 before:to-blue-900 before:shadow-[0px_4px_10px_rgba(30,58,138,0.6)] before:transition-all before:duration-300 hover:before:w-full">
92-
{" "}
93-
Contact us{" "}
94-
</strong>
95-
96-
<ul className="mt-6 space-y-1">
97-
<li>
98-
<a
99-
className="text-gray-700 transition hover:text-amber-400 dark:text-white dark:hover:text-white/75"
100-
href="mailto:reactblogswoc@gmail.com"
101-
>
102-
{" "}
103-
reactblogswoc@gmail.com{" "}
104-
</a>
105-
<div className="mt-6 flex justify-center gap-4 lg:justify-start">
106-
<a
107-
className="text-black hover:text-gray-700 dark:text-white dark:hover:text-white/75"
108-
href="https://github.com/OkenHaha/react-blog"
109-
rel="noreferrer"
110-
>
111-
<span className="sr-only"> GitHub </span>
112-
<svg
113-
className="size-6"
114-
fill="currentColor"
115-
viewBox="0 0 24 24"
116-
aria-hidden="true"
117-
>
118-
<path
119-
fillRule="evenodd"
120-
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
121-
clipRule="evenodd"
122-
/>
123-
</svg>
124-
</a>
125-
</div>
126-
</li>
127-
</ul>
128-
</div>
129-
</div>
130-
</div>
131-
</div>
145+
</div>
146+
</div>
147+
<div className="text-center text-black p-2 text-sm w-full bg-blue-200">
148+
<p>&copy; 2025 Your Company. All Rights Reserved.</p>
149+
</div>
132150
</footer>
133151
</>
134152
);

0 commit comments

Comments
 (0)