diff --git a/README.md b/README.md index fed9c94..64d788a 100644 --- a/README.md +++ b/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 diff --git a/website/README.md b/website/README.md index e215bc4..5e24c91 100644 --- a/website/README.md +++ b/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). diff --git a/website/app/components/footer.tsx b/website/app/components/footer.tsx new file mode 100644 index 0000000..117321c --- /dev/null +++ b/website/app/components/footer.tsx @@ -0,0 +1,46 @@ +export default function Footer() { + return ( + + ); +} diff --git a/website/app/components/navbar.tsx b/website/app/components/navbar.tsx new file mode 100644 index 0000000..03411aa --- /dev/null +++ b/website/app/components/navbar.tsx @@ -0,0 +1,51 @@ +import Image from "next/image"; +import Link from "next/link"; + +export default function Navbar() { + return ( +
+
+ + TapToQR Logo + TapToQR + + +
+ + Get Extension + +
+
+
+ ); +} diff --git a/website/app/globals.css b/website/app/globals.css index 6b717ad..b2c3eb2 100644 --- a/website/app/globals.css +++ b/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; } diff --git a/website/app/layout.tsx b/website/app/layout.tsx index f7fa87e..3eebdd0 100644 --- a/website/app/layout.tsx +++ b/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({ diff --git a/website/app/page.tsx b/website/app/page.tsx index 9007252..36eca37 100644 --- a/website/app/page.tsx +++ b/website/app/page.tsx @@ -1,101 +1,402 @@ import Image from "next/image"; +import Link from "next/link"; +import Navbar from "./components/navbar"; +import Footer from "./components/footer"; export default function Home() { return ( -
-
- Next.js logo -
    -
  1. - Get started by editing{" "} - - app/page.tsx - - . -
    2. -
  2. Save and see your changes instantly.
    3. -
- -
- - Vercel logomark - Deploy now - - - Read our docs - -
-
-
+ + + {/* Description Section */} +
+
+
+
+

+ TapToQR – Share Instantly with QR Codes +

+

+ + Generate exactly what you need-quickly and easily. + +

+
+
+

+ TapToQR is a lightweight and intuitive + browser extension that lets you generate custom QR codes right + from your toolbar. Whether you want to share the current + webpage, copy a link to your phone, or encode custom content + like text, URLs, or calendar events, TapToQR makes it + seamless. +

+
+
+
+
+ + {/* Features Section */} +
- Window icon - Examples - - +
+

+ Key Features +

+
+
+
+
+ + + + + + + + + + + + + + + + + + +
+

One-Click QR Generation

+

+ Click the toolbar icon to instantly generate a QR code for the + active tab. +

+
+
+
+ + + + + + + + +
+

Custom Content Support

+

+ Encode URLs, plain text, calendar events, and more. +

+
+
+
+ + + + +
+

Mobile-Friendly Sharing

+

+ Open links on your phone instantly by scanning the code-no + copy-paste needed. +

+
+
+
+ + + + +
+

Quick Actions

+

+ Download, copy, or customize the QR code with built-in + controls. +

+
+
+
+ + + + +
+

Personalization Options

+

+ Set your preferred QR code preview size, download resolution, + and toggle logo visibility. +

+
+
+
+ + + + + +
+

Simple Settings

+

+ Adjust the QR code preview and export size or configure your + preferred visual style. +

+
+
+ +
+ + {/* Screenshots Section */} +
- Globe icon - Go to nextjs.org → - - - +
+
+

+ TapToQR in Action +

+
+
+
+
+

+ Easily Access on Mobile +

+

+ 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 in action +
+
+ +
+
+

+ Generate a QR Code Instantly +

+

+ Click the TapToQR icon in your browser + toolbar to instantly generate a QR code for the current + webpage. +

+
+
+ TapToQR Extension +
+
+ +
+
+

+ 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 Settings +
+
+ +
+
+

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 Custom QR +
+
+
+
+
+ +