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

qrmaster.net

Browse Source
This commit is contained in:
Timo Knuth
2025-12-09 22:22:36 +01:00
parent 424c61a176
commit 8c5e2fa58e
37 changed files with 549 additions and 915 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/marketing/Hero.tsx
View File

@@ -20,7 +20,22 @@ export const Hero: React.FC<HeroProps> = ({ t }) => {
return (
<section className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-white to-purple-50 pt-12 pb-20">
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
{/* Animated Background Orbs */}
<div className="absolute inset-0 overflow-hidden pointer-events-none">
{/* Orb 1 - Blue (top-left) */}
<div className="absolute -top-24 -left-24 w-96 h-96 bg-blue-400/30 rounded-full blur-3xl animate-blob" />
{/* Orb 2 - Purple (top-right) */}
<div className="absolute -top-12 -right-12 w-96 h-96 bg-purple-400/30 rounded-full blur-3xl animate-blob animation-delay-2000" />
{/* Orb 3 - Pink (bottom-left) */}
<div className="absolute -bottom-24 -left-12 w-96 h-96 bg-pink-400/20 rounded-full blur-3xl animate-blob animation-delay-4000" />
{/* Orb 4 - Cyan (center-right) */}
<div className="absolute top-1/2 -right-24 w-80 h-80 bg-cyan-400/20 rounded-full blur-3xl animate-blob animation-delay-6000" />
</div>
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl relative z-10">
<div className="grid lg:grid-cols-2 gap-12 items-center">
{/* Left Content */}
<div className="space-y-8">
@@ -83,6 +98,9 @@ export const Hero: React.FC<HeroProps> = ({ t }) => {
</div>
</div>
</div>
{/* Smooth Gradient Fade Transition */}
<div className="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-b from-transparent to-gray-50 pointer-events-none" />
</section>
);
};

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

@@ -1,16 +1,19 @@
'use client';
import React from 'react';
import React, { useState } from 'react';
import Link from 'next/link';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/Card';
import { Button } from '@/components/ui/Button';
import { Badge } from '@/components/ui/Badge';
import { BillingToggle } from '@/components/ui/BillingToggle';
interface PricingProps {
t: any; // i18n translation function
}
export const Pricing: React.FC<PricingProps> = ({ t }) => {
const [billingPeriod, setBillingPeriod] = useState<'month' | 'year'>('month');
const plans = [
{
key: 'free',
@@ -38,6 +41,10 @@ export const Pricing: React.FC<PricingProps> = ({ t }) => {
</p>
</div>
<div className="flex justify-center mb-8">
<BillingToggle value={billingPeriod} onChange={setBillingPeriod} />
</div>
<div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
{plans.map((plan) => (
<Card
@@ -56,13 +63,30 @@ export const Pricing: React.FC<PricingProps> = ({ t }) => {
<CardTitle className="text-2xl mb-4">
{t.pricing[plan.key].title}
</CardTitle>
<div className="flex items-baseline justify-center">
<span className="text-4xl font-bold">
{t.pricing[plan.key].price}
</span>
<span className="text-gray-600 ml-2">
{t.pricing[plan.key].period}
</span>
<div className="flex flex-col items-center">
<div className="flex items-baseline justify-center">
<span className="text-4xl font-bold">
{plan.key === 'free'
? t.pricing[plan.key].price
: billingPeriod === 'month'
? 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'}
</span>
</div>
{billingPeriod === 'year' && plan.key !== 'free' && (
<Badge variant="success" className="mt-2">
Save 16%
</Badge>
)}
</div>
</CardHeader>