From 31c60e3b4214c385ac8316597af53a525b55ca94 Mon Sep 17 00:00:00 2001 From: mihna123 Date: Sat, 6 Jun 2026 19:51:23 +0200 Subject: 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 --- src/app/blog/page.tsx | 7 ++++ src/app/help/HelpPage.1.tsx | 0 src/app/help/HelpPage.tsx | 0 src/app/help/page.tsx | 87 ++++++++++++++++++++++++++++++++++++++++++++ src/app/layout.tsx | 2 + src/app/page.tsx | 13 ++----- src/components/footer.tsx | 4 +- src/components/header.tsx | 21 +++++++++++ src/components/ui/button.tsx | 7 +++- 9 files changed, 129 insertions(+), 12 deletions(-) create mode 100644 src/app/blog/page.tsx create mode 100644 src/app/help/HelpPage.1.tsx create mode 100644 src/app/help/HelpPage.tsx create mode 100644 src/app/help/page.tsx create mode 100644 src/components/header.tsx 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 ( +
+

Blogs

+
+ ); +} diff --git a/src/app/help/HelpPage.1.tsx b/src/app/help/HelpPage.1.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/app/help/HelpPage.tsx b/src/app/help/HelpPage.tsx new file mode 100644 index 0000000..e69de29 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 ( +
+
+

Help

+

+ Free Invoice Generator provides a simple to use interface for + generating pdf incoices that look professional. Perfect for small to + medium freelancers and entrepreneurs. +

+

How to create an invoice?

+

+ In order to create an invoice fill out the{' '} + + inovice form + + : +

+
    +
  1. + 1. Enter your full name into "Who is this from?" + field. +
    2. +
  2. + 2. Enter the entity you are billing in the "Who is this + for?" field. +
    3. +
  3. + 3. Pick todays date in the "Date" field. +
    4. +
  4. + 4. Start filling out your invoice items. Enter the{' '} + description of the paid service, quantity and the{' '} + rate. Amount will be calculated automatically. +
    5. +
  5. + 5. When you want to add another item, press the{' '} + {' '} + button. New line item will be added to the list. +
    6. +
  6. + 6. If you want to remove a line item, hover over it to reveal the + "X" button on the right, after the amount value. + Clicking on it will remove the line item. +
    7. +
  7. + 7. If you are satisfied with line items, you can head over to + "Notes" and "Terms" fields. + Content from these fields will be printed after line items in the + final pdf. +
    8. +
  8. + 8. Press the{' '} + {' '} + 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. +
    9. +
+

Contact

+

+ If you have any problems or questions make sure to contact the main + developer at{' '} + + mihailonvojinovic@gmail.com + + . We usually respond in a day. +

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

- 🧾 Free Invoice Generator -

- -
-