tknuth
/
QR-master
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

responsivness Phone

This commit is contained in:
Timo Knuth 2026-01-11 11:50:17 +01:00
parent 268689f2ee
commit d64459b200
19 changed files with 75 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/(marketing)/tools/crypto-qr-code/CryptoGenerator.tsx
View File

@ -137,7 +137,7 @@ export default function CryptoGenerator() {
<div className="grid lg:grid-cols-2"> <div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */} {/* LEFT: Input Section */}
<div className="p-8 lg:p-10 space-y-8 border-r border-slate-100"> <div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Crypto Details */} {/* Crypto Details */}
<div className="space-y-6"> <div className="space-y-6">
@ -251,7 +251,7 @@ export default function CryptoGenerator() {
{/* Frame Selector */} {/* Frame Selector */}
<div> <div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label> <label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-4 gap-2"> <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => ( {FRAME_OPTIONS.map((frame) => (
<button <button
key={frame.id} key={frame.id}
@ -272,13 +272,12 @@ export default function CryptoGenerator() {
</div> </div>
{/* RIGHT: Preview Section */} {/* RIGHT: Preview Section */}
<div className="p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}> <div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */} {/* QR Card with Frame */}
<div <div
ref={qrRef} ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center" className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
style={{ minWidth: '320px' }}
> >
{/* Frame Label */} {/* Frame Label */}
{getFrameLabel() && ( {getFrameLabel() && (

9
src/app/(marketing)/tools/email-qr-code/EmailGenerator.tsx
View File

@ -107,7 +107,7 @@ export default function EmailGenerator() {
<div className="grid lg:grid-cols-2"> <div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */} {/* LEFT: Input Section */}
<div className="p-8 lg:p-10 space-y-8 border-r border-slate-100"> <div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Input Fields */} {/* Input Fields */}
<div className="space-y-6"> <div className="space-y-6">
@ -192,7 +192,7 @@ export default function EmailGenerator() {
{/* Frame Selector */} {/* Frame Selector */}
<div> <div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label> <label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-4 gap-2"> <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => ( {FRAME_OPTIONS.map((frame) => (
<button <button
key={frame.id} key={frame.id}
@ -213,13 +213,12 @@ export default function EmailGenerator() {
</div> </div>
{/* RIGHT: Preview Section */} {/* RIGHT: Preview Section */}
<div className="p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}> <div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */} {/* QR Card with Frame */}
<div <div
ref={qrRef} ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center" className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
style={{ minWidth: '320px' }}
> >
{/* Frame Label */} {/* Frame Label */}
{getFrameLabel() && ( {getFrameLabel() && (

9
src/app/(marketing)/tools/event-qr-code/EventGenerator.tsx
View File

@ -117,7 +117,7 @@ export default function EventGenerator() {
<div className="grid lg:grid-cols-2"> <div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */} {/* LEFT: Input Section */}
<div className="p-8 lg:p-10 space-y-8 border-r border-slate-100"> <div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Event Details */} {/* Event Details */}
<div className="space-y-6"> <div className="space-y-6">
@ -221,7 +221,7 @@ export default function EventGenerator() {
{/* Frame Selector */} {/* Frame Selector */}
<div> <div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label> <label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-4 gap-2"> <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => ( {FRAME_OPTIONS.map((frame) => (
<button <button
key={frame.id} key={frame.id}
@ -242,13 +242,12 @@ export default function EventGenerator() {
</div> </div>
{/* RIGHT: Preview Section */} {/* RIGHT: Preview Section */}
<div className="p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}> <div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */} {/* QR Card with Frame */}
<div <div
ref={qrRef} ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center" className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
style={{ minWidth: '320px' }}
> >
{/* Frame Label */} {/* Frame Label */}
{getFrameLabel() && ( {getFrameLabel() && (

9
src/app/(marketing)/tools/facebook-qr-code/FacebookGenerator.tsx
View File

@ -88,7 +88,7 @@ export default function FacebookGenerator() {
<div className="grid lg:grid-cols-2"> <div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */} {/* LEFT: Input Section */}
<div className="p-8 lg:p-10 space-y-8 border-r border-slate-100"> <div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Facebook Details */} {/* Facebook Details */}
<div className="space-y-6"> <div className="space-y-6">
@ -143,7 +143,7 @@ export default function FacebookGenerator() {
{/* Frame Selector */} {/* Frame Selector */}
<div> <div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label> <label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-4 gap-2"> <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => ( {FRAME_OPTIONS.map((frame) => (
<button <button
key={frame.id} key={frame.id}
@ -164,13 +164,12 @@ export default function FacebookGenerator() {
</div> </div>
{/* RIGHT: Preview Section */} {/* RIGHT: Preview Section */}
<div className="p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}> <div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */} {/* QR Card with Frame */}
<div <div
ref={qrRef} ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center" className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
style={{ minWidth: '320px' }}
> >
{/* Frame Label */} {/* Frame Label */}
{getFrameLabel() && ( {getFrameLabel() && (

9
src/app/(marketing)/tools/geolocation-qr-code/GeolocationGenerator.tsx
View File

@ -108,7 +108,7 @@ export default function GeolocationGenerator() {
<div className="grid lg:grid-cols-2"> <div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */} {/* LEFT: Input Section */}
<div className="p-8 lg:p-10 space-y-8 border-r border-slate-100"> <div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Location Details */} {/* Location Details */}
<div className="space-y-6"> <div className="space-y-6">
@ -188,7 +188,7 @@ export default function GeolocationGenerator() {
{/* Frame Selector */} {/* Frame Selector */}
<div> <div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label> <label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-4 gap-2"> <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => ( {FRAME_OPTIONS.map((frame) => (
<button <button
key={frame.id} key={frame.id}
@ -209,13 +209,12 @@ export default function GeolocationGenerator() {
</div> </div>
{/* RIGHT: Preview Section */} {/* RIGHT: Preview Section */}
<div className="p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}> <div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */} {/* QR Card with Frame */}
<div <div
ref={qrRef} ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center" className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
style={{ minWidth: '320px' }}
> >
{/* Frame Label */} {/* Frame Label */}
{getFrameLabel() && ( {getFrameLabel() && (

9
src/app/(marketing)/tools/instagram-qr-code/InstagramGenerator.tsx
View File

@ -93,7 +93,7 @@ export default function InstagramGenerator() {
<div className="grid lg:grid-cols-2"> <div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */} {/* LEFT: Input Section */}
<div className="p-8 lg:p-10 space-y-8 border-r border-slate-100"> <div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Instagram Details */} {/* Instagram Details */}
<div className="space-y-6"> <div className="space-y-6">
@ -148,7 +148,7 @@ export default function InstagramGenerator() {
{/* Frame Selector */} {/* Frame Selector */}
<div> <div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label> <label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-4 gap-2"> <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => ( {FRAME_OPTIONS.map((frame) => (
<button <button
key={frame.id} key={frame.id}
@ -169,13 +169,12 @@ export default function InstagramGenerator() {
</div> </div>
{/* RIGHT: Preview Section */} {/* RIGHT: Preview Section */}
<div className="p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}> <div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */} {/* QR Card with Frame */}
<div <div
ref={qrRef} ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center" className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
style={{ minWidth: '320px' }}
> >
{/* Frame Label */} {/* Frame Label */}
{getFrameLabel() && ( {getFrameLabel() && (

9
src/app/(marketing)/tools/paypal-qr-code/PayPalGenerator.tsx
View File

@ -129,7 +129,7 @@ export default function PayPalGenerator() {
<div className="grid lg:grid-cols-2"> <div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */} {/* LEFT: Input Section */}
<div className="p-8 lg:p-10 space-y-8 border-r border-slate-100"> <div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* PayPal Details */} {/* PayPal Details */}
<div className="space-y-6"> <div className="space-y-6">
@ -237,7 +237,7 @@ export default function PayPalGenerator() {
{/* Frame Selector */} {/* Frame Selector */}
<div> <div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label> <label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-5 gap-2"> <div className="grid grid-cols-2 sm:grid-cols-5 gap-2">
{FRAME_OPTIONS.map((frame) => ( {FRAME_OPTIONS.map((frame) => (
<button <button
key={frame.id} key={frame.id}
@ -258,13 +258,12 @@ export default function PayPalGenerator() {
</div> </div>
{/* RIGHT: Preview Section */} {/* RIGHT: Preview Section */}
<div className="p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}> <div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */} {/* QR Card with Frame */}
<div <div
ref={qrRef} ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center" className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
style={{ minWidth: '320px' }}
> >
{/* Frame Label */} {/* Frame Label */}
{getFrameLabel() && ( {getFrameLabel() && (

9
src/app/(marketing)/tools/phone-qr-code/PhoneGenerator.tsx
View File

@ -89,7 +89,7 @@ export default function PhoneGenerator() {
<div className="grid lg:grid-cols-2"> <div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */} {/* LEFT: Input Section */}
<div className="p-8 lg:p-10 space-y-8 border-r border-slate-100"> <div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Phone Details */} {/* Phone Details */}
<div className="space-y-6"> <div className="space-y-6">
@ -144,7 +144,7 @@ export default function PhoneGenerator() {
{/* Frame Selector */} {/* Frame Selector */}
<div> <div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label> <label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-4 gap-2"> <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => ( {FRAME_OPTIONS.map((frame) => (
<button <button
key={frame.id} key={frame.id}
@ -165,13 +165,12 @@ export default function PhoneGenerator() {
</div> </div>
{/* RIGHT: Preview Section */} {/* RIGHT: Preview Section */}
<div className="p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}> <div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */} {/* QR Card with Frame */}
<div <div
ref={qrRef} ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center" className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
style={{ minWidth: '320px' }}
> >
{/* Frame Label */} {/* Frame Label */}
{getFrameLabel() && ( {getFrameLabel() && (

9
src/app/(marketing)/tools/sms-qr-code/SMSGenerator.tsx
View File

@ -91,7 +91,7 @@ export default function SMSGenerator() {
<div className="grid lg:grid-cols-2"> <div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */} {/* LEFT: Input Section */}
<div className="p-8 lg:p-10 space-y-8 border-r border-slate-100"> <div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* SMS Details */} {/* SMS Details */}
<div className="space-y-6"> <div className="space-y-6">
@ -159,7 +159,7 @@ export default function SMSGenerator() {
{/* Frame Selector */} {/* Frame Selector */}
<div> <div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label> <label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-4 gap-2"> <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => ( {FRAME_OPTIONS.map((frame) => (
<button <button
key={frame.id} key={frame.id}
@ -180,13 +180,12 @@ export default function SMSGenerator() {
</div> </div>
{/* RIGHT: Preview Section */} {/* RIGHT: Preview Section */}
<div className="p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}> <div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */} {/* QR Card with Frame */}
<div <div
ref={qrRef} ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center" className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
style={{ minWidth: '320px' }}
> >
{/* Frame Label */} {/* Frame Label */}
{getFrameLabel() && ( {getFrameLabel() && (

9
src/app/(marketing)/tools/teams-qr-code/TeamsGenerator.tsx
View File

@ -111,7 +111,7 @@ export default function TeamsGenerator() {
<div className="grid lg:grid-cols-2"> <div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */} {/* LEFT: Input Section */}
<div className="p-8 lg:p-10 space-y-8 border-r border-slate-100"> <div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Teams Details */} {/* Teams Details */}
<div className="space-y-6"> <div className="space-y-6">
@ -208,7 +208,7 @@ export default function TeamsGenerator() {
{/* Frame Selector */} {/* Frame Selector */}
<div> <div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label> <label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-4 gap-2"> <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => ( {FRAME_OPTIONS.map((frame) => (
<button <button
key={frame.id} key={frame.id}
@ -229,13 +229,12 @@ export default function TeamsGenerator() {
</div> </div>
{/* RIGHT: Preview Section */} {/* RIGHT: Preview Section */}
<div className="p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}> <div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */} {/* QR Card with Frame */}
<div <div
ref={qrRef} ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center" className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
style={{ minWidth: '320px' }}
> >
{/* Frame Label */} {/* Frame Label */}
{getFrameLabel() && ( {getFrameLabel() && (

9
src/app/(marketing)/tools/text-qr-code/TextGenerator.tsx
View File

@ -87,7 +87,7 @@ export default function TextGenerator() {
<div className="grid lg:grid-cols-2"> <div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */} {/* LEFT: Input Section */}
<div className="p-8 lg:p-10 space-y-8 border-r border-slate-100"> <div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Text Input */} {/* Text Input */}
<div className="space-y-6"> <div className="space-y-6">
@ -144,7 +144,7 @@ export default function TextGenerator() {
{/* Frame Selector */} {/* Frame Selector */}
<div> <div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label> <label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-4 gap-2"> <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => ( {FRAME_OPTIONS.map((frame) => (
<button <button
key={frame.id} key={frame.id}
@ -165,13 +165,12 @@ export default function TextGenerator() {
</div> </div>
{/* RIGHT: Preview Section */} {/* RIGHT: Preview Section */}
<div className="p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}> <div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */} {/* QR Card with Frame */}
<div <div
ref={qrRef} ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center" className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
style={{ minWidth: '320px' }}
> >
{/* Frame Label */} {/* Frame Label */}
{getFrameLabel() && ( {getFrameLabel() && (

9
src/app/(marketing)/tools/tiktok-qr-code/TikTokGenerator.tsx
View File

@ -93,7 +93,7 @@ export default function TiktokGenerator() {
<div className="grid lg:grid-cols-2"> <div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */} {/* LEFT: Input Section */}
<div className="p-8 lg:p-10 space-y-8 border-r border-slate-100"> <div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* TikTok Details */} {/* TikTok Details */}
<div className="space-y-6"> <div className="space-y-6">
@ -148,7 +148,7 @@ export default function TiktokGenerator() {
{/* Frame Selector */} {/* Frame Selector */}
<div> <div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label> <label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-4 gap-2"> <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => ( {FRAME_OPTIONS.map((frame) => (
<button <button
key={frame.id} key={frame.id}
@ -169,13 +169,12 @@ export default function TiktokGenerator() {
</div> </div>
{/* RIGHT: Preview Section */} {/* RIGHT: Preview Section */}
<div className="p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}> <div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */} {/* QR Card with Frame */}
<div <div
ref={qrRef} ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center" className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
style={{ minWidth: '320px' }}
> >
{/* Frame Label */} {/* Frame Label */}
{getFrameLabel() && ( {getFrameLabel() && (

9
src/app/(marketing)/tools/twitter-qr-code/TwitterGenerator.tsx
View File

@ -93,7 +93,7 @@ export default function TwitterGenerator() {
<div className="grid lg:grid-cols-2"> <div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */} {/* LEFT: Input Section */}
<div className="p-8 lg:p-10 space-y-8 border-r border-slate-100"> <div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Twitter Details */} {/* Twitter Details */}
<div className="space-y-6"> <div className="space-y-6">
@ -148,7 +148,7 @@ export default function TwitterGenerator() {
{/* Frame Selector */} {/* Frame Selector */}
<div> <div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label> <label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-4 gap-2"> <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => ( {FRAME_OPTIONS.map((frame) => (
<button <button
key={frame.id} key={frame.id}
@ -169,13 +169,12 @@ export default function TwitterGenerator() {
</div> </div>
{/* RIGHT: Preview Section */} {/* RIGHT: Preview Section */}
<div className="p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}> <div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */} {/* QR Card with Frame */}
<div <div
ref={qrRef} ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center" className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
style={{ minWidth: '320px' }}
> >
{/* Frame Label */} {/* Frame Label */}
{getFrameLabel() && ( {getFrameLabel() && (

9
src/app/(marketing)/tools/url-qr-code/URLGenerator.tsx
View File

@ -87,7 +87,7 @@ export default function URLGenerator() {
<div className="grid lg:grid-cols-2"> <div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */} {/* LEFT: Input Section */}
<div className="p-8 lg:p-10 space-y-8 border-r border-slate-100"> <div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* URL Input */} {/* URL Input */}
<div className="space-y-6"> <div className="space-y-6">
@ -142,7 +142,7 @@ export default function URLGenerator() {
{/* Frame Selector */} {/* Frame Selector */}
<div> <div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label> <label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-4 gap-2"> <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => ( {FRAME_OPTIONS.map((frame) => (
<button <button
key={frame.id} key={frame.id}
@ -163,13 +163,12 @@ export default function URLGenerator() {
</div> </div>
{/* RIGHT: Preview Section */} {/* RIGHT: Preview Section */}
<div className="p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}> <div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */} {/* QR Card with Frame */}
<div <div
ref={qrRef} ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center" className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
style={{ minWidth: '320px' }}
> >
{/* Frame Label */} {/* Frame Label */}
{getFrameLabel() && ( {getFrameLabel() && (

7
src/app/(marketing)/tools/vcard-qr-code/VCardGenerator.tsx
View File

@ -123,7 +123,7 @@ export default function VCardGenerator() {
<div className="grid lg:grid-cols-12"> <div className="grid lg:grid-cols-12">
{/* LEFT: Input Section (Wider for VCard) */} {/* LEFT: Input Section (Wider for VCard) */}
<div className="lg:col-span-7 p-8 lg:p-10 space-y-8 border-r border-slate-100"> <div className="lg:col-span-7 p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Personal Details */} {/* Personal Details */}
<div className="space-y-6"> <div className="space-y-6">
@ -265,13 +265,12 @@ export default function VCardGenerator() {
</div> </div>
{/* RIGHT: Preview Section */} {/* RIGHT: Preview Section */}
<div className="lg:col-span-5 p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}> <div className="lg:col-span-5 p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */} {/* QR Card with Frame */}
<div <div
ref={qrRef} ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center" className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[300px]"
style={{ minWidth: '300px' }}
> >
{/* Frame Label */} {/* Frame Label */}
{getFrameLabel() && ( {getFrameLabel() && (

9
src/app/(marketing)/tools/whatsapp-qr-code/WhatsAppGenerator.tsx
View File

@ -98,7 +98,7 @@ export default function WhatsappGenerator() {
<div className="grid lg:grid-cols-2"> <div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */} {/* LEFT: Input Section */}
<div className="p-8 lg:p-10 space-y-8 border-r border-slate-100"> <div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* WhatsApp Details */} {/* WhatsApp Details */}
<div className="space-y-6"> <div className="space-y-6">
@ -163,7 +163,7 @@ export default function WhatsappGenerator() {
{/* Frame Selector */} {/* Frame Selector */}
<div> <div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label> <label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-4 gap-2"> <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => ( {FRAME_OPTIONS.map((frame) => (
<button <button
key={frame.id} key={frame.id}
@ -184,13 +184,12 @@ export default function WhatsappGenerator() {
</div> </div>
{/* RIGHT: Preview Section */} {/* RIGHT: Preview Section */}
<div className="p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}> <div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */} {/* QR Card with Frame */}
<div <div
ref={qrRef} ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center" className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
style={{ minWidth: '320px' }}
> >
{/* Frame Label */} {/* Frame Label */}
{getFrameLabel() && ( {getFrameLabel() && (

9
src/app/(marketing)/tools/wifi-qr-code/WiFiGenerator.tsx
View File

@ -99,7 +99,7 @@ export default function WiFiGenerator() {
<div className="grid lg:grid-cols-2"> <div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */} {/* LEFT: Input Section */}
<div className="p-8 lg:p-10 space-y-8 border-r border-slate-100"> <div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Network Details */} {/* Network Details */}
<div className="space-y-6"> <div className="space-y-6">
@ -205,7 +205,7 @@ export default function WiFiGenerator() {
{/* Frame Selector */} {/* Frame Selector */}
<div> <div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label> <label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-4 gap-2"> <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => ( {FRAME_OPTIONS.map((frame) => (
<button <button
key={frame.id} key={frame.id}
@ -226,13 +226,12 @@ export default function WiFiGenerator() {
</div> </div>
{/* RIGHT: Preview Section */} {/* RIGHT: Preview Section */}
<div className="p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}> <div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */} {/* QR Card with Frame */}
<div <div
ref={qrRef} ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center" className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
style={{ minWidth: '320px' }}
> >
{/* Frame Label - CTA Button Style */} {/* Frame Label - CTA Button Style */}
{getFrameLabel() && ( {getFrameLabel() && (

9
src/app/(marketing)/tools/youtube-qr-code/YouTubeGenerator.tsx
View File

@ -86,7 +86,7 @@ export default function YoutubeGenerator() {
<div className="grid lg:grid-cols-2"> <div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */} {/* LEFT: Input Section */}
<div className="p-8 lg:p-10 space-y-8 border-r border-slate-100"> <div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* YouTube Details */} {/* YouTube Details */}
<div className="space-y-6"> <div className="space-y-6">
@ -141,7 +141,7 @@ export default function YoutubeGenerator() {
{/* Frame Selector */} {/* Frame Selector */}
<div> <div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label> <label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-4 gap-2"> <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => ( {FRAME_OPTIONS.map((frame) => (
<button <button
key={frame.id} key={frame.id}
@ -162,13 +162,12 @@ export default function YoutubeGenerator() {
</div> </div>
{/* RIGHT: Preview Section */} {/* RIGHT: Preview Section */}
<div className="p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}> <div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */} {/* QR Card with Frame */}
<div <div
ref={qrRef} ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center" className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
style={{ minWidth: '320px' }}
> >
{/* Frame Label */} {/* Frame Label */}
{getFrameLabel() && ( {getFrameLabel() && (

9
src/app/(marketing)/tools/zoom-qr-code/ZoomGenerator.tsx
View File

@ -118,7 +118,7 @@ export default function ZoomGenerator() {
<div className="grid lg:grid-cols-2"> <div className="grid lg:grid-cols-2">
{/* LEFT: Input Section */} {/* LEFT: Input Section */}
<div className="p-8 lg:p-10 space-y-8 border-r border-slate-100"> <div className="p-6 md:p-8 lg:p-10 space-y-8 border-r border-slate-100">
{/* Meeting Details */} {/* Meeting Details */}
<div className="space-y-6"> <div className="space-y-6">
@ -198,7 +198,7 @@ export default function ZoomGenerator() {
{/* Frame Selector */} {/* Frame Selector */}
<div> <div>
<label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label> <label className="block text-sm font-medium text-slate-700 mb-3">Frame Label</label>
<div className="grid grid-cols-4 gap-2"> <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
{FRAME_OPTIONS.map((frame) => ( {FRAME_OPTIONS.map((frame) => (
<button <button
key={frame.id} key={frame.id}
@ -219,13 +219,12 @@ export default function ZoomGenerator() {
</div> </div>
{/* RIGHT: Preview Section */} {/* RIGHT: Preview Section */}
<div className="p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}> <div className="p-6 md:p-8 lg:p-10 flex flex-col items-center justify-center" style={{ backgroundColor: BRAND.paleGrey }}>
{/* QR Card with Frame */} {/* QR Card with Frame */}
<div <div
ref={qrRef} ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center" className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
style={{ minWidth: '320px' }}
> >
{/* Frame Label */} {/* Frame Label */}
{getFrameLabel() && ( {getFrameLabel() && (