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

SEO/AEO

Browse Source
This commit is contained in:
Timo Knuth
2025-10-17 13:45:33 +02:00
parent cd3ee5fc8f
commit 254e6490b8
36 changed files with 1712 additions and 917 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/marketing/InstantGenerator.tsx
View File

@@ -77,10 +77,10 @@ export const InstantGenerator: React.FC<InstantGeneratorProps> = ({ t }) => {
<div className="container mx-auto px-4">
<div className="text-center mb-12">
<h2 className="text-3xl lg:text-4xl font-bold text-gray-900 mb-4">
{t('generator.title')}
{t.generator.title}
</h2>
</div>
<div className="grid lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
{/* Left Form */}
<Card className="space-y-6">
@@ -88,13 +88,13 @@ export const InstantGenerator: React.FC<InstantGeneratorProps> = ({ t }) => {
label="URL"
value={url}
onChange={(e) => setUrl(e.target.value)}
placeholder={t('generator.url_placeholder')}
placeholder={t.generator.url_placeholder}
/>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
{t('generator.foreground')}
{t.generator.foreground}
</label>
<div className="flex items-center space-x-2">
<input
@@ -110,10 +110,10 @@ export const InstantGenerator: React.FC<InstantGeneratorProps> = ({ t }) => {
/>
</div>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
{t('generator.background')}
{t.generator.background}
</label>
<div className="flex items-center space-x-2">
<input
@@ -134,7 +134,7 @@ export const InstantGenerator: React.FC<InstantGeneratorProps> = ({ t }) => {
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
{t('generator.corners')}
{t.generator.corners}
</label>
<select
value={cornerStyle}
@@ -145,10 +145,10 @@ export const InstantGenerator: React.FC<InstantGeneratorProps> = ({ t }) => {
<option value="rounded">Rounded</option>
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">
{t('generator.size')}
{t.generator.size}
</label>
<input
type="range"
@@ -164,31 +164,31 @@ export const InstantGenerator: React.FC<InstantGeneratorProps> = ({ t }) => {
<div className="flex items-center justify-between">
<Badge variant={hasGoodContrast ? 'success' : 'warning'}>
{hasGoodContrast ? t('generator.contrast_good') : 'Low contrast'}
{hasGoodContrast ? t.generator.contrast_good : 'Low contrast'}
</Badge>
<div className="text-sm text-gray-500">
Contrast: {contrast.toFixed(1)}:1
</div>
</div>
<div className="flex space-x-3">
<Button variant="outline" className="flex-1" onClick={() => downloadQR('svg')}>
{t('generator.download_svg')}
{t.generator.download_svg}
</Button>
<Button variant="outline" className="flex-1" onClick={() => downloadQR('png')}>
{t('generator.download_png')}
{t.generator.download_png}
</Button>
</div>
<Button className="w-full">
{t('generator.save_track')}
{t.generator.save_track}
</Button>
</Card>
{/* Right Preview */}
<div className="flex flex-col items-center justify-center">
<Card className="text-center p-8">
<h3 className="text-lg font-semibold mb-4">{t('generator.live_preview')}</h3>
<h3 className="text-lg font-semibold mb-4">{t.generator.live_preview}</h3>
<div id="instant-qr-preview" className="flex justify-center mb-4">
{url ? (
<div className={`${cornerStyle === 'rounded' ? 'rounded-lg overflow-hidden' : ''}`}>
@@ -210,7 +210,7 @@ export const InstantGenerator: React.FC<InstantGeneratorProps> = ({ t }) => {
)}
</div>
<div className="text-sm text-gray-600 mb-2">URL</div>
<div className="text-xs text-gray-500">{t('generator.demo_note')}</div>
<div className="text-xs text-gray-500">{t.generator.demo_note}</div>
</Card>
</div>
</div>