feat: create dedicated scanner page for medicine verification system

src/app/scanner/page.tsx

@@ -0,0 +1,32 @@
+import Link from "next/link";
+import ScannerPlaceholder from "@/components/scanner/ScannerPlaceholder";
+import ScannerInstructions from "@/components/scanner/ScannerInstructions";
+
+export default function ScannerPage() {
+  return (
+    <main className="min-h-screen bg-[var(--background)] px-4 py-6 text-[var(--foreground)] md:px-8">
+      <div className="mx-auto max-w-4xl">
+        <div className="mb-8">
+          <Link
+            href="/"
+            className="text-sm font-medium text-[var(--muted-foreground)] hover:text-[var(--foreground)]"
+          >
+            DevTrack
+          </Link>
+
+          <h1 className="mt-3 text-3xl font-bold md:text-4xl">
+            Medicine Verification Scanner
+          </h1>
+
+          <p className="mt-2 text-[var(--muted-foreground)]">
+            Scan medicine barcodes and QR codes to verify authenticity and
+            access medicine information.
+          </p>
+        </div>
+
+        <ScannerPlaceholder />
+        <ScannerInstructions />
+      </div>
+    </main>
+  );
+}

src/components/scanner/ScannerInstructions.tsx

@@ -0,0 +1,16 @@
+export default function ScannerInstructions() {
+  return (
+    <section className="mt-6 rounded-2xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-[var(--shadow-soft)]">
+      <h2 className="mb-4 text-xl font-semibold">
+        How it will work
+      </h2>
+
+      <ul className="space-y-3 text-[var(--muted-foreground)]">
+        <li>• Open the scanner page.</li>
+        <li>• Scan a barcode or QR code from the medicine package.</li>
+        <li>• Verify authenticity and product information.</li>
+        <li>• Review warnings, expiry dates, and manufacturer details.</li>
+      </ul>
+    </section>
+  );
+}

src/components/scanner/ScannerPlaceholder.tsx

@@ -0,0 +1,27 @@
+export default function ScannerPlaceholder() {
+  return (
+    <section className="rounded-2xl border border-[var(--border)] bg-[var(--card)] p-8 shadow-[var(--shadow-soft)]">
+      <div className="flex flex-col items-center text-center">
+        <div className="mb-4 rounded-full border border-[var(--border)] px-4 py-2 text-sm font-semibold">
+          🚧 Coming Soon
+        </div>
+
+        <div className="mb-6 flex h-48 w-full max-w-md items-center justify-center rounded-xl border-2 border-dashed border-[var(--border)]">
+          <span className="text-[var(--muted-foreground)]">
+            Scanner Placeholder
+          </span>
+        </div>
+
+        <h2 className="mb-3 text-xl font-semibold">
+          Barcode & QR Verification
+        </h2>
+
+        <p className="max-w-2xl text-[var(--muted-foreground)]">
+          The medicine verification system is currently under development.
+          Soon you will be able to scan medicine packages and verify their
+          authenticity directly from this page.
+        </p>
+      </div>
+    </section>
+  );
+}