From e805abca4f60d691964c20dbcd7374d57c810adf Mon Sep 17 00:00:00 2001
From: gapry <gapry@protonmail.com>
Date: Thu, 5 Mar 2026 17:23:21 +0800
Subject: [PATCH] blog: add footer

---
 src/App.jsx                      |  2 ++
 src/components/Footer/Footer.css | 18 ++++++++++++++++++
 src/components/Footer/Footer.jsx | 20 ++++++++++++++++++++
 3 files changed, 40 insertions(+)
 create mode 100644 src/components/Footer/Footer.css
 create mode 100644 src/components/Footer/Footer.jsx

diff --git a/src/App.jsx b/src/App.jsx
index 1bdef22..1eaf77d 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -6,6 +6,7 @@ import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import Analytics from './components/Analytics';
 import NotFound from './pages/NotFound/NotFound';
 import Home from './pages/Home/Home';
+import Footer from './components/Footer/Footer';
 import './styles/App.css';
 
 export default function App() {
@@ -106,6 +107,7 @@ export default function App() {
             <a href="/" className="back-link">← Back to Home</a>
           </article>
         )}
+        <Footer />
       </div>
     </>
   );
diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css
new file mode 100644
index 0000000..60f7d1f
--- /dev/null
+++ b/src/components/Footer/Footer.css
@@ -0,0 +1,18 @@
+.site-footer {
+  margin-top: 4rem;
+  padding: 2rem 1rem;
+  border-top: 1px solid #333;
+  text-align: center;
+  color: #888;
+  font-size: 0.9rem;
+}
+
+.footer-content a {
+  color: #ff7875;
+  text-decoration: none;
+}
+
+.footer-content a:hover {
+  color: #ff4d4f;
+  text-decoration: underline;
+}
diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx
new file mode 100644
index 0000000..800d019
--- /dev/null
+++ b/src/components/Footer/Footer.jsx
@@ -0,0 +1,20 @@
+import './Footer.css';
+
+export default function Footer() {
+  return (
+    <footer className="site-footer">
+      <div className="footer-content">
+        <p>
+          My Technical Writing Licensed under{' '}
+          <a 
+            href="https://creativecommons.org/licenses/by-nc-sa/4.0/" 
+            target="_blank" 
+            rel="noopener noreferrer"
+          >
+            CC BY-NC-SA 4.0
+          </a>
+        </p>
+      </div>
+    </footer>
+  );
+}