feat: add footer and contact info

2 files changed, 25 insertions, 6 deletions

diff --git a/src/app/page.tsx b/src/app/page.tsx
index b88e729..3e0a771 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,13 +1,17 @@
+import { Footer } from '@/components/footer';
 import { InvoiceGenerator } from '@/components/invoice-generator';
 
 export default function Home() {
   return (
-    <main className="space-y-4 p-2">
-      <h1 className="text-center text-xl font-bold">
-        🧾 Free Invoice Generator
-      </h1>
-      <section className="flex items-center justify-center">
-        <InvoiceGenerator />
+    <main className="pt-2">
+      <section className="flex h-[100vh] flex-col items-center justify-between">
+        <div className="space-y-10">
+          <h1 className="text-center text-2xl font-bold">
+            🧾 Free Invoice Generator
+          </h1>
+          <InvoiceGenerator />
+        </div>
+        <Footer />
       </section>
     </main>
   );
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
new file mode 100644
index 0000000..c07f42b
--- /dev/null
+++ b/src/components/footer.tsx
@@ -0,0 +1,15 @@
+export const Footer = () => {
+  return (
+    <footer className="w-full bg-gray-400 p-2 text-center">
+      <p className="font-bold text-white">
+        Having issues? Contact me here:{' '}
+        <a
+          href="mailto:mihailonvojinovic@gmail.com"
+          className="font-normal text-blue-700 underline"
+        >
+          mihailonvojinovic@gmail.com
+        </a>
+      </p>
+    </footer>
+  );
+};