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

feat: Add QR code card component with download functionality and a new pricing page with internationalization.

This commit is contained in:
Timo 2026-01-07 19:59:04 +01:00
parent e7478a4af7
commit d04e7a1f70
4 changed files with 263 additions and 261 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/app/(app)/pricing/page.tsx
View File

@ -141,13 +141,13 @@ export default function PricingPage() {
'50 dynamic QR codes',
'Unlimited static QR codes',
'Advanced analytics (scans, devices, locations)',
'Custom branding (colors)',
'Custom branding (colors & logos)',
],
buttonText: isCurrentPlanWithInterval('PRO', selectedInterval)
? 'Current Plan'
: hasPlanDifferentInterval('PRO')
? `Switch to ${billingPeriod === 'month' ? 'Monthly' : 'Yearly'}`
: 'Upgrade to Pro',
? `Switch to ${billingPeriod === 'month' ? 'Monthly' : 'Yearly'}`
: 'Upgrade to Pro',
buttonVariant: 'primary' as const,
disabled: isCurrentPlanWithInterval('PRO', selectedInterval),
popular: true,
@ -170,8 +170,8 @@ export default function PricingPage() {
buttonText: isCurrentPlanWithInterval('BUSINESS', selectedInterval)
? 'Current Plan'
: hasPlanDifferentInterval('BUSINESS')
? `Switch to ${billingPeriod === 'month' ? 'Monthly' : 'Yearly'}`
: 'Upgrade to Business',
? `Switch to ${billingPeriod === 'month' ? 'Monthly' : 'Yearly'}`
: 'Upgrade to Business',
buttonVariant: 'primary' as const,
disabled: isCurrentPlanWithInterval('BUSINESS', selectedInterval),
popular: false,

34
src/components/marketing/Pricing.tsx
View File

@ -69,17 +69,17 @@ export const Pricing: React.FC<PricingProps> = ({ t }) => {
{plan.key === 'free'
? t.pricing[plan.key].price
: billingPeriod === 'month'
? t.pricing[plan.key].price
: plan.key === 'pro'
? '€90'
: '€290'}
? t.pricing[plan.key].price
: plan.key === 'pro'
? '€90'
: '€290'}
</span>
<span className="text-gray-600 ml-2">
{plan.key === 'free'
? t.pricing[plan.key].period
: billingPeriod === 'month'
? t.pricing[plan.key].period
: 'per year'}
? t.pricing[plan.key].period
: 'per year'}
</span>
</div>
{billingPeriod === 'year' && plan.key !== 'free' && (
@ -90,7 +90,7 @@ export const Pricing: React.FC<PricingProps> = ({ t }) => {
</div>
</CardHeader>
<CardContent className="space-y-4">
<CardContent className="space-y-8">
<ul className="space-y-3">
{t.pricing[plan.key].features.map((feature: string, index: number) => (
<li key={index} className="flex items-start space-x-3">
@ -102,15 +102,17 @@ export const Pricing: React.FC<PricingProps> = ({ t }) => {
))}
</ul>
<Link href="/signup">
<Button
variant={plan.popular ? 'primary' : 'outline'}
className="w-full"
size="lg"
>
Get Started
</Button>
</Link>
<div className="mt-8">
<Link href="/signup">
<Button
variant={plan.popular ? 'primary' : 'outline'}
className="w-full"
size="lg"
>
Get Started
</Button>
</Link>
</div>
</CardContent>
</Card>
))}

2
src/i18n/en.json
View File

@ -149,7 +149,7 @@
"50 dynamic QR codes",
"Unlimited static QR codes",
"Advanced analytics (scans, devices, locations)",
"Custom branding (colors)"
"Custom branding (colors & logos)"
]
},
"business": {