Feature/update website

README.md

@@ -42,27 +42,26 @@ Whether you're a developer, a power user, or just looking to streamline cross-de
 
 ## Screenshots
 
-| TapToQR in Action                                                                                                                                                                                        |
-|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| TapToQR in Action |
+|-------------------|
 | Easily access the current page on your phone with a single scan. **TapToQR** instantly generates a QR code for the active browser tab, letting you open the same page on your mobile device in seconds-no copy-pasting required. Just scan and go. |
-| ![TapToQR Logo](./website/public/store/TapToQr-InAction.png)                                                                                                                                                        |
+| ![TapToQR Logo](./website/public/store/TapToQr-InAction.png) |
 
 
 | Generate a QR Code Instantly|
-|---------------------------------------------------------------------------------------------------------------------|
+|-----------------------------|
 | Click the **TapToQR** icon in your browser toolbar to instantly generate a QR code for the current webpage. |
-| ![TapToQR Logo](./website/public/store/TapToQr-Extension.png)                                                       |
+| ![TapToQR Logo](./website/public/store/TapToQr-Extension.png) |
 
-| Customize Your QR Code Experience                                                                                                            |
-|---------------------------------------------------------------------------------------------------------------------|
-| In the settings panel, you can adjust the preview size of the QR code shown in the popup and configure the default resolution for downloads. You can also toggle the embedded logo on or off to match your preferences.
- |
-| ![TapToQR Logo](./website/public/store/TapToQr-Settings.png)                                                       |
+| Customize Your QR Code Experience |
+|-----------------------------------|
+| In the settings panel, you can adjust the preview size of the QR code shown in the popup and configure the default resolution for downloads. You can also toggle the embedded logo on or off to match your preferences. |
+| ![TapToQR Logo](./website/public/store/TapToQr-Settings.png) |
 
-| Generate what you need                                                                                                            |
-|---------------------------------------------------------------------------------------------------------------------|
+| Generate what you need |
+|------------------------|
 | With the **TapToQR** browser extension, you can generate custom QR codes containing various content types, such as calendar events, using a simple and intuitive interface. |
-| ![TapToQR Logo](./website/public/store/TapToQr-CustomQr.png)                                                       |
+| ![TapToQR Logo](./website/public/store/TapToQr-CustomQr.png) |
 
 ## License
 

website/README.md

@@ -1,36 +1,33 @@
-This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+# TapToQR Website
 
-## Getting Started
+This is the website for the TapToQR browser extension - a powerful QR code generation tool available for Chrome, Firefox, and Edge browsers.
 
-First, run the development server:
+## Website Development
 
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
+This website is built with [Next.js](https://nextjs.org) and [TailwindCSS](https://tailwindcss.com).
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+### Getting Started
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-
-This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+```bash
+# Install dependencies
+npm install
 
-## Learn More
+# Run the development server
+npm run dev
+```
 
-To learn more about Next.js, take a look at the following resources:
+Open [http://localhost:3000](http://localhost:3000) to view the site in your browser.
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+### Build and Deploy
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+```bash
+# Build for production
+npm run build
 
-## Deploy on Vercel
+# Start the production server
+npm run start
+```
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## Repository
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+For the full codebase, including the browser extension source, visit the [TapToQR GitHub repository](https://github.com/clFaster/TapToQR).

website/app/components/footer.tsx

@@ -0,0 +1,46 @@
+export default function Footer() {
+  return (
+    <footer className="w-full py-8 bg-muted dark:bg-accent border-t border-border">
+      <div className="container px-4 md:px-6">
+        <div className="grid gap-6 md:grid-cols-2">
+          <div>
+            <h3 className="text-xl font-bold">License</h3>
+            <p className="mt-2 text-muted-foreground">
+              This project is licensed under the GNU General Public License
+              v3.0. See the{" "}
+              <a
+                href="https://github.com/clFaster/TapToQR/blob/main/LICENSE"
+                className="hover:underline"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                LICENSE
+              </a>{" "}
+              file for details.
+            </p>
+          </div>
+          <div>
+            <h3 className="text-xl font-bold">Issues</h3>
+            <p className="mt-2 text-muted-foreground">
+              All issues are tracked on the{" "}
+              <a
+                href="https://github.com/clFaster/TapToQR/issues"
+                className="hover:underline"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                GitHub repository
+              </a>
+              . Feel free to report any bugs or suggest new features!
+            </p>
+          </div>
+        </div>
+        <div className="mt-8 border-t border-border pt-8 text-center">
+          <p className="text-sm text-muted-foreground">
+            © {new Date().getFullYear()} Moritz Reis
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}

website/app/components/navbar.tsx

@@ -0,0 +1,51 @@
+import Image from "next/image";
+import Link from "next/link";
+
+export default function Navbar() {
+  return (
+    <header className="w-full py-4 border-b border-border bg-background/90 backdrop-blur-sm sticky top-0 z-50">
+      <div className="container flex items-center justify-between">
+        <Link href="/" className="flex items-center gap-2">
+          <Image
+            src="/ic_TapToQR.svg"
+            alt="TapToQR Logo"
+            width={40}
+            height={40}
+            className="h-10 w-10"
+          />
+          <span className="text-xl font-bold">TapToQR</span>
+        </Link>
+        <nav className="hidden md:flex items-center gap-6">
+          <Link
+            href="#features"
+            className="text-foreground/80 hover:text-primary"
+          >
+            Features
+          </Link>
+          <Link
+            href="#screenshots"
+            className="text-foreground/80 hover:text-primary"
+          >
+            Screenshots
+          </Link>
+          <Link
+            href="https://github.com/clFaster/TapToQR"
+            target="_blank"
+            className="text-foreground/80 hover:text-primary"
+          >
+            GitHub
+          </Link>
+        </nav>
+        <div className="flex items-center gap-2">
+          <Link
+            href="https://addons.mozilla.org/addon/taptoqr/"
+            target="_blank"
+            className="hidden sm:flex items-center justify-center px-4 py-2 text-sm font-medium bg-primary hover:bg-primary/90 text-white rounded-md transition-colors"
+          >
+            Get Extension
+          </Link>
+        </div>
+      </div>
+    </header>
+  );
+}

website/app/globals.css

@@ -5,17 +5,61 @@
 :root {
   --background: #ffffff;
   --foreground: #171717;
+  --primary: #2a9d8f;
+  --primary-light: #40b4a6;
+  --primary-dark: #218579;
+  --secondary: #e9c46a;
+  --secondary-light: #f0d18a;
+  --secondary-dark: #e0b441;
+  --accent: #264653;
+  --muted: #f8f9fa;
+  --muted-foreground: #6c757d;
+  --border: #e9ecef;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+    --background: #1a1a1a;
+    --foreground: #f0f0f0;
+    --primary: #4ecdc4;
+    --primary-light: #6ed9d2;
+    --primary-dark: #3dbeb6;
+    --secondary: #f7b801;
+    --secondary-light: #ffc933;
+    --secondary-dark: #e5a800;
+    --accent: #334756;
+    --muted: #252525;
+    --muted-foreground: #b0b0b0;
+    --border: #3a3a3a;
   }
 }
 
 body {
   color: var(--foreground);
   background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  letter-spacing: -0.025em;
+}
+
+a {
+  color: var(--primary);
+  transition: color 0.2s ease;
+}
+
+a:hover {
+  color: var(--primary-light);
+}
+
+.container {
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
 }

website/app/layout.tsx

@@ -13,8 +13,12 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "TapToQR - Generate and share QR codes instantly",
+  description:
+    "Generate customizable QR codes from any webpage with TapToQR - instantly share links, text, or calendar events using a clean, intuitive browser extension with quick actions and personalization options.",
+  icons: {
+    icon: "/ic_TapToQR_32.png",
+  },
 };
 
 export default function RootLayout({