Initial release v1.0.0

frontend/features/settings/components/sections/LinkDeviceSection.tsx

@@ -0,0 +1,52 @@
+import Link from "next/link";
+import { Smartphone, QrCode, ArrowRight } from "lucide-react";
+
+export function LinkDeviceSection() {
+    return (
+        <div
+            id="link-device"
+            className="bg-[#111] rounded-lg p-6 border border-[#1c1c1c]"
+        >
+            <div className="flex items-center gap-3 mb-4">
+                <div className="p-2 rounded-lg bg-purple-500/10">
+                    <Smartphone className="w-5 h-5 text-purple-400" />
+                </div>
+                <div>
+                    <h3 className="font-medium text-white">Link Mobile Device</h3>
+                    <p className="text-sm text-gray-400">
+                        Connect your phone without typing passwords
+                    </p>
+                </div>
+            </div>
+
+            <p className="text-sm text-gray-400 mb-4">
+                Generate a QR code or 6-digit code to quickly link your mobile device.
+                No need to type your server URL or password on your phone.
+            </p>
+
+            <Link
+                href="/device"
+                className="inline-flex items-center gap-2 px-4 py-2 bg-purple-500/20 hover:bg-purple-500/30 text-purple-400 rounded-lg transition-colors border border-purple-500/30"
+            >
+                <QrCode className="w-4 h-4" />
+                <span>Link a Device</span>
+                <ArrowRight className="w-4 h-4" />
+            </Link>
+        </div>
+    );
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+