Skip to content

Commit 8405c0c

Browse files
mythzmythz
committed
Update Footer
1 parent 4391389 commit 8405c0c

File tree

2 files changed

+64
-40
lines changed

2 files changed

+64
-40
lines changed

‎MyApp.Client/src/components/Footer.tsx‎

Lines changed: 39 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,41 @@
1-
import FeatureLinks from "./FeatureLinks"
21

3-
export default () => {
4-
return (
5-
<footer className="bg-slate-50 dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800">
6-
7-
<FeatureLinks />
8-
9-
<div className="container mx-auto px-5">
10-
<div className="py-28 flex flex-col lg:flex-row items-center">
11-
<h3 className="text-4xl lg:text-6xl font-bold tracking-tighter leading-tight text-center lg:text-left mb-10 lg:mb-0 lg:pr-4 lg:w-1/2">
12-
A ServiceStack Project
13-
</h3>
14-
<div className="flex flex-col lg:flex-row justify-center items-center lg:pl-4 lg:w-1/2">
15-
<a href="https://react-templates.net/docs"
16-
className="mx-3 bg-black hover:bg-white hover:text-black border border-black text-white font-bold py-3 px-12 lg:px-8 duration-200 transition-colors mb-6 lg:mb-0">
17-
Read Documentation
18-
</a>
19-
<a href="https://github.com/NetCoreTemplates/react-spa"
20-
className="mx-3 font-bold hover:underline">
21-
View on GitHub
22-
</a>
23-
</div>
24-
</div>
25-
</div>
26-
</footer>
27-
)
2+
const Footer = () => {
3+
return (
4+
<footer className="bg-slate-50 dark:bg-slate-950 border-t border-slate-200 dark:border-slate-800 relative">
5+
<div className="max-w-7xl mx-auto px-6 py-12 lg:py-20">
6+
7+
<div className="flex flex-col lg:flex-row items-center justify-between gap-10">
8+
<div className="text-center lg:text-left space-y-4">
9+
<h3 className="text-4xl lg:text-6xl font-bold tracking-tight text-slate-900 dark:text-white">
10+
<a href="https://react-templates.net" className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
11+
react templates .net
12+
</a>
13+
</h3>
14+
<p className="text-lg text-slate-600 dark:text-slate-400 max-w-xl mx-auto lg:mx-0 leading-relaxed">
15+
Templates for the next generation of AI-assisted web applications.
16+
</p>
17+
</div>
18+
19+
<div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
20+
<a href="https://react-templates.net/docs"
21+
className="inline-flex items-center justify-center px-8 py-3.5 text-base font-semibold text-white transition-all bg-slate-900 rounded-full hover:bg-slate-800 hover:shadow-lg hover:shadow-slate-900/20 focus:ring-4 focus:ring-slate-900/20 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-500/20 active:scale-95">
22+
Read Documentation
23+
</a>
24+
<a href="https://github.com/NetCoreTemplates/react-spa"
25+
className="inline-flex items-center justify-center px-8 py-3.5 text-base font-semibold text-slate-900 transition-all bg-white border border-slate-200 rounded-full hover:bg-slate-50 hover:border-slate-300 dark:bg-slate-900 dark:text-slate-300 dark:border-slate-700 dark:hover:bg-slate-800 dark:hover:text-white dark:hover:border-slate-600 focus:ring-4 focus:ring-slate-200 dark:focus:ring-slate-800 active:scale-95">
26+
View on GitHub
27+
</a>
28+
</div>
29+
</div>
30+
31+
</div>
32+
33+
<div className="absolute bottom-4 left-6 right-6 flex justify-between items-center text-xs text-slate-400 dark:text-slate-600">
34+
<p>&copy; {new Date().getFullYear()} My App</p>
35+
<a href="#" className="hover:text-slate-600 dark:hover:text-slate-400 transition-colors">Privacy Policy</a>
36+
</div>
37+
</footer>
38+
)
2839
}
40+
41+
export default Footer

‎MyApp/Pages/Shared/Footer.cshtml‎

Lines changed: 25 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,34 @@
1-
<footer class="bg-accent-1 dark:bg-gray-800 border-t border-accent-2 dark:border-gray-700">
2-
<div class="max-w-7xl mx-auto px-5">
3-
<div class="py-28 flex flex-col lg:flex-row items-center">
4-
<h3 class="text-4xl lg:text-6xl font-bold tracking-tighter leading-tight text-center lg:text-left mb-10 lg:mb-0 lg:pr-4 lg:w-1/2 text-gray-900 dark:text-gray-100">
5-
A ServiceStack Project
1+
<footer class="bg-slate-50 dark:bg-slate-950 border-t border-slate-200 dark:border-slate-800 relative">
2+
<div class="max-w-7xl mx-auto px-6 py-12 lg:py-20">
3+
4+
<div class="flex flex-col lg:flex-row items-center justify-between gap-10">
5+
<div class="text-center lg:text-left space-y-4">
6+
<h3 class="text-4xl lg:text-6xl font-bold tracking-tight text-slate-900 dark:text-white">
7+
<a href="https://react-templates.net" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
8+
react templates .net
9+
</a>
610
</h3>
7-
<div class="flex flex-col lg:flex-row justify-center items-center lg:pl-4 lg:w-1/2">
8-
<a
9-
href="https://react-templates.net/docs"
10-
class="mx-3 bg-black dark:bg-gray-700 hover:bg-white dark:hover:bg-gray-600 hover:text-black dark:hover:text-white border border-black dark:border-gray-600 text-white font-bold py-3 px-12 lg:px-8 duration-200 transition-colors mb-6 lg:mb-0"
11-
>
11+
<p class="text-lg text-slate-600 dark:text-slate-400 max-w-xl mx-auto lg:mx-0 leading-relaxed">
12+
Templates for the next generation of AI-assisted web applications.
13+
</p>
14+
</div>
15+
16+
<div class="flex flex-col sm:flex-row gap-4 w-full sm:w-auto">
17+
<a href="https://react-templates.net/docs"
18+
class="inline-flex items-center justify-center px-8 py-3.5 text-base font-semibold text-white transition-all bg-slate-900 rounded-full hover:bg-slate-800 hover:shadow-lg hover:shadow-slate-900/20 focus:ring-4 focus:ring-slate-900/20 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-500/20 active:scale-95">
1219
Read Documentation
1320
</a>
14-
<a
15-
href="https://github.com/NetCoreTemplates/react-spa"
16-
class="mx-3 font-bold hover:underline text-gray-900 dark:text-gray-100"
17-
>
21+
<a href="https://github.com/NetCoreTemplates/react-spa"
22+
class="inline-flex items-center justify-center px-8 py-3.5 text-base font-semibold text-slate-900 transition-all bg-white border border-slate-200 rounded-full hover:bg-slate-50 hover:border-slate-300 dark:bg-slate-900 dark:text-slate-300 dark:border-slate-700 dark:hover:bg-slate-800 dark:hover:text-white dark:hover:border-slate-600 focus:ring-4 focus:ring-slate-200 dark:focus:ring-slate-800 active:scale-95">
1823
View on GitHub
1924
</a>
2025
</div>
2126
</div>
27+
2228
</div>
29+
30+
<div class="absolute bottom-4 left-6 right-6 flex justify-between items-center text-xs text-slate-400 dark:text-slate-600">
31+
<p>&copy; @DateTime.Now.Year My App</p>
32+
<a href="#" class="hover:text-slate-600 dark:hover:text-slate-400 transition-colors">Privacy Policy</a>
33+
</div>
2334
</footer>

0 commit comments

Comments
 (0)