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">
{/* 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 */}
<div className="space-y-6">
@ -251,7 +251,7 @@ export default function CryptoGenerator() {
{/* Frame Selector */}
<div>
<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) => (
<button
key={frame.id}
@ -272,13 +272,12 @@ export default function CryptoGenerator() {
</div>
{/* 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 */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
style={{ minWidth: '320px' }}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{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">
{/* 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 */}
<div className="space-y-6">
@ -192,7 +192,7 @@ export default function EmailGenerator() {
{/* Frame Selector */}
<div>
<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) => (
<button
key={frame.id}
@ -213,13 +213,12 @@ export default function EmailGenerator() {
</div>
{/* 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 */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
style={{ minWidth: '320px' }}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{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">
{/* 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 */}
<div className="space-y-6">
@ -221,7 +221,7 @@ export default function EventGenerator() {
{/* Frame Selector */}
<div>
<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) => (
<button
key={frame.id}
@ -242,13 +242,12 @@ export default function EventGenerator() {
</div>
{/* 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 */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
style={{ minWidth: '320px' }}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{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">
{/* 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 */}
<div className="space-y-6">
@ -143,7 +143,7 @@ export default function FacebookGenerator() {
{/* Frame Selector */}
<div>
<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) => (
<button
key={frame.id}
@ -164,13 +164,12 @@ export default function FacebookGenerator() {
</div>
{/* 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 */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
style={{ minWidth: '320px' }}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{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">
{/* 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 */}
<div className="space-y-6">
@ -188,7 +188,7 @@ export default function GeolocationGenerator() {
{/* Frame Selector */}
<div>
<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) => (
<button
key={frame.id}
@ -209,13 +209,12 @@ export default function GeolocationGenerator() {
</div>
{/* 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 */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
style={{ minWidth: '320px' }}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{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">
{/* 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 */}
<div className="space-y-6">
@ -148,7 +148,7 @@ export default function InstagramGenerator() {
{/* Frame Selector */}
<div>
<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) => (
<button
key={frame.id}
@ -169,13 +169,12 @@ export default function InstagramGenerator() {
</div>
{/* 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 */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
style={{ minWidth: '320px' }}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{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">
{/* 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 */}
<div className="space-y-6">
@ -237,7 +237,7 @@ export default function PayPalGenerator() {
{/* Frame Selector */}
<div>
<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) => (
<button
key={frame.id}
@ -258,13 +258,12 @@ export default function PayPalGenerator() {
</div>
{/* 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 */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
style={{ minWidth: '320px' }}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{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">
{/* 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 */}
<div className="space-y-6">
@ -144,7 +144,7 @@ export default function PhoneGenerator() {
{/* Frame Selector */}
<div>
<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) => (
<button
key={frame.id}
@ -165,13 +165,12 @@ export default function PhoneGenerator() {
</div>
{/* 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 */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
style={{ minWidth: '320px' }}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{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">
{/* 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 */}
<div className="space-y-6">
@ -159,7 +159,7 @@ export default function SMSGenerator() {
{/* Frame Selector */}
<div>
<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) => (
<button
key={frame.id}
@ -180,13 +180,12 @@ export default function SMSGenerator() {
</div>
{/* 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 */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
style={{ minWidth: '320px' }}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{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">
{/* 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 */}
<div className="space-y-6">
@ -208,7 +208,7 @@ export default function TeamsGenerator() {
{/* Frame Selector */}
<div>
<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) => (
<button
key={frame.id}
@ -229,13 +229,12 @@ export default function TeamsGenerator() {
</div>
{/* 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 */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
style={{ minWidth: '320px' }}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{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">
{/* 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 */}
<div className="space-y-6">
@ -144,7 +144,7 @@ export default function TextGenerator() {
{/* Frame Selector */}
<div>
<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) => (
<button
key={frame.id}
@ -165,13 +165,12 @@ export default function TextGenerator() {
</div>
{/* 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 */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
style={{ minWidth: '320px' }}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{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">
{/* 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 */}
<div className="space-y-6">
@ -148,7 +148,7 @@ export default function TiktokGenerator() {
{/* Frame Selector */}
<div>
<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) => (
<button
key={frame.id}
@ -169,13 +169,12 @@ export default function TiktokGenerator() {
</div>
{/* 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 */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
style={{ minWidth: '320px' }}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{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">
{/* 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 */}
<div className="space-y-6">
@ -148,7 +148,7 @@ export default function TwitterGenerator() {
{/* Frame Selector */}
<div>
<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) => (
<button
key={frame.id}
@ -169,13 +169,12 @@ export default function TwitterGenerator() {
</div>
{/* 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 */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
style={{ minWidth: '320px' }}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{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">
{/* 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 */}
<div className="space-y-6">
@ -142,7 +142,7 @@ export default function URLGenerator() {
{/* Frame Selector */}
<div>
<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) => (
<button
key={frame.id}
@ -163,13 +163,12 @@ export default function URLGenerator() {
</div>
{/* 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 */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
style={{ minWidth: '320px' }}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{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">
{/* 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 */}
<div className="space-y-6">
@ -265,13 +265,12 @@ export default function VCardGenerator() {
</div>
{/* 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 */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
style={{ minWidth: '300px' }}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[300px]"
>
{/* Frame Label */}
{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">
{/* 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 */}
<div className="space-y-6">
@ -163,7 +163,7 @@ export default function WhatsappGenerator() {
{/* Frame Selector */}
<div>
<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) => (
<button
key={frame.id}
@ -184,13 +184,12 @@ export default function WhatsappGenerator() {
</div>
{/* 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 */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
style={{ minWidth: '320px' }}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{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">
{/* 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 */}
<div className="space-y-6">
@ -205,7 +205,7 @@ export default function WiFiGenerator() {
{/* Frame Selector */}
<div>
<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) => (
<button
key={frame.id}
@ -226,13 +226,12 @@ export default function WiFiGenerator() {
</div>
{/* 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 */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
style={{ minWidth: '320px' }}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label - CTA Button Style */}
{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">
{/* 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 */}
<div className="space-y-6">
@ -141,7 +141,7 @@ export default function YoutubeGenerator() {
{/* Frame Selector */}
<div>
<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) => (
<button
key={frame.id}
@ -162,13 +162,12 @@ export default function YoutubeGenerator() {
</div>
{/* 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 */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
style={{ minWidth: '320px' }}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{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">
{/* 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 */}
<div className="space-y-6">
@ -198,7 +198,7 @@ export default function ZoomGenerator() {
{/* Frame Selector */}
<div>
<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) => (
<button
key={frame.id}
@ -219,13 +219,12 @@ export default function ZoomGenerator() {
</div>
{/* 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 */}
<div
ref={qrRef}
className="bg-white rounded-3xl shadow-xl p-8 flex flex-col items-center"
style={{ minWidth: '320px' }}
className="bg-white rounded-3xl shadow-xl p-6 sm:p-8 flex flex-col items-center w-full max-w-[320px]"
>
{/* Frame Label */}
{getFrameLabel() && (