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

1 files changed, 87 insertions, 0 deletions

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>
+  );
+}