feat: update the layout and add more pages

- Add a proper header to the layout
- Add a help page with instructions how to generate an invoice
- Add an empty blog page that will eventually be filled with blogs

6 files changed, 100 insertions, 9 deletions

diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
new file mode 100644
index 0000000..ff5c415
--- /dev/null
+++ b/src/app/blog/page.tsx
@@ -0,0 +1,7 @@
+export default function BlogPage() {
+  return (
+    <section>
+      <h1>Blogs</h1>
+    </section>
+  );
+}
diff --git a/src/app/help/HelpPage.1.tsx b/src/app/help/HelpPage.1.tsx
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/app/help/HelpPage.1.tsx
diff --git a/src/app/help/HelpPage.tsx b/src/app/help/HelpPage.tsx
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/app/help/HelpPage.tsx
diff --git a/src/app/help/page.tsx b/src/app/help/page.tsx
new file mode 100644
index 0000000..9df8977
--- /dev/null
+++ b/src/app/help/page.tsx
@@ -0,0 +1,87 @@
+import { Button } from '@/components/ui/button';
+import { cn } from '@/utils/cn';
+import Link from 'next/link';
+
+export default function HelpPage() {
+  return (
+    <section className="mt-10 flex justify-center">
+      <div className="w-5xl space-y-4">
+        <h1 className="text-4xl font-bold">Help</h1>
+        <p className="text-lg">
+          Free Invoice Generator provides a simple to use interface for
+          generating pdf incoices that look professional. Perfect for small to
+          medium freelancers and entrepreneurs.
+        </p>
+        <h2 className="mt-10 text-2xl font-bold">How to create an invoice?</h2>
+        <p className="text-lg">
+          In order to create an invoice fill out the{' '}
+          <Link href="/" className="text-blue-700 underline">
+            inovice form
+          </Link>
+          :
+        </p>
+        <ol className="space-y-6 text-lg">
+          <li>
+            1. Enter your <b>full name </b> into &quot;Who is this from?&quot;
+            field.
+          </li>
+          <li>
+            2. Enter the <b>entity </b> you are billing in the &quot;Who is this
+            for?&quot; field.
+          </li>
+          <li>
+            3. Pick todays <b>date </b> in the &quot;Date&quot; field.
+          </li>
+          <li>
+            4. Start filling out your invoice items. Enter the{' '}
+            <b>description</b> of the paid service, <b>quantity</b> and the{' '}
+            <b>rate</b>. Amount will be calculated automatically.
+          </li>
+          <li>
+            5. When you want to add another item, press the{' '}
+            <Button
+              type="button"
+              disabled
+              className="border-green-700 text-green-700"
+            >
+              + Item
+            </Button>{' '}
+            button. New line item will be added to the list.
+          </li>
+          <li>
+            6. If you want to remove a line item, hover over it to reveal the
+            <b>&quot;X&quot;</b> button on the right, after the amount value.
+            Clicking on it will remove the line item.
+          </li>
+          <li>
+            7. If you are satisfied with line items, you can head over to
+            <b>&quot;Notes&quot;</b> and <b>&quot;Terms&quot;</b> fields.
+            Content from these fields will be printed after line items in the
+            final pdf.
+          </li>
+          <li>
+            8. Press the{' '}
+            <Button className="border-green-700 text-green-700" disabled>
+              Download
+            </Button>{' '}
+            button to generate and download the invoice pdf. If you are not
+            satisfied with the result you can go back and change any values you
+            want, then download again.
+          </li>
+        </ol>
+        <h2 className="text-2xl font-bold">Contact</h2>
+        <p className="text-lg">
+          If you have any problems or questions make sure to contact the main
+          developer at{' '}
+          <a
+            href="mailto:mihailonvojinovic@gmail.com"
+            className="text-blue-700 underline"
+          >
+            mihailonvojinovic@gmail.com
+          </a>
+          . We usually respond in a day.
+        </p>
+      </div>
+    </section>
+  );
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 8630def..df2225e 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from 'next';
 import { Geist, Geist_Mono } from 'next/font/google';
 import './globals.css';
+import { Header } from '@/components/header';
 
 const geistSans = Geist({
   variable: '--font-geist-sans',
@@ -27,6 +28,7 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
+        <Header />
         {children}
       </body>
     </html>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3e0a771..92e36b0 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,16 +3,11 @@ import { InvoiceGenerator } from '@/components/invoice-generator';
 
 export default function Home() {
   return (
-    <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 />
+    <main className="pt-10">
+      <section className="mb-20 flex flex-col items-center">
+        <InvoiceGenerator />
       </section>
+      <Footer />
     </main>
   );
 }