Skip to content

Commit 202b10d

Browse files
mythzmythz
committed
Update Footer
1 parent e152b14 commit 202b10d

File tree

3 files changed

+70
-16
lines changed

3 files changed

+70
-16
lines changed

‎MyApp.Client/src/App.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,11 @@ import { AutoUis, ShellCommand, ReactLogo, TailwindLogo, TypeScriptLogo, ViteLog
55
import HelloApi from './components/HelloApi'
66
import { appAuth } from './lib/auth'
77
import { Link } from 'react-router-dom'
8+
import Footer from './components/Footer'
89

910
function App() {
1011
const { user, signOut } = appAuth()
11-
return (
12+
return (<>
1213
<div className="mt-40 max-w-screen-xl mx-auto p-8 min-h-screen flex flex-col items-center justify-center bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors">
1314
<div className="flex gap-8 mb-8 items-end">
1415
<a href="https://react.dev" target="_blank" rel="noreferrer">
@@ -57,7 +58,8 @@ function App() {
5758
<AutoUis className="mt-40 w-full" />
5859

5960
</div>
60-
)
61+
<Footer />
62+
</>)
6163
}
6264

6365
export default App

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
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-static"
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+
)
39+
}
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-static"
16-
class="mx-3 font-bold hover:underline text-gray-900 dark:text-gray-100"
17-
>
21+
<a href="https://github.com/NetCoreTemplates/react-static"
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)