Wichige änderung an DB

src/components/dashboard/QRCodeCard.tsx

@@ -45,8 +45,22 @@ export const QRCodeCard: React.FC<QRCodeCardProps> = ({
       qrUrl = qr.content.url;
     } else if (qr.contentType === 'PHONE' && qr.content?.phone) {
       qrUrl = `tel:${qr.content.phone}`;
-    } else if (qr.contentType === 'EMAIL' && qr.content?.email) {
-      qrUrl = `mailto:${qr.content.email}`;
+    } else if (qr.contentType === 'VCARD') {
+      // VCARD content needs to be formatted properly
+      qrUrl = `BEGIN:VCARD
+VERSION:3.0
+FN:${qr.content.firstName || ''} ${qr.content.lastName || ''}
+N:${qr.content.lastName || ''};${qr.content.firstName || ''};;;
+${qr.content.organization ? `ORG:${qr.content.organization}` : ''}
+${qr.content.title ? `TITLE:${qr.content.title}` : ''}
+${qr.content.email ? `EMAIL:${qr.content.email}` : ''}
+${qr.content.phone ? `TEL:${qr.content.phone}` : ''}
+END:VCARD`;
+    } else if (qr.contentType === 'GEO' && qr.content) {
+      const lat = qr.content.latitude || 0;
+      const lon = qr.content.longitude || 0;
+      const label = qr.content.label ? `?q=${encodeURIComponent(qr.content.label)}` : '';
+      qrUrl = `geo:${lat},${lon}${label}`;
     } else if (qr.contentType === 'TEXT' && qr.content?.text) {
       qrUrl = qr.content.text;
     } else if (qr.content?.qrContent) {

src/components/marketing/Hero.tsx

@@ -13,13 +13,13 @@ interface HeroProps {
 export const Hero: React.FC<HeroProps> = ({ t }) => {
   const templateCards = [
     { title: 'URL/Website', color: 'bg-blue-100', icon: '🌐' },
-    { title: 'WiFi', color: 'bg-purple-100', icon: '📶' },
-    { title: 'Email', color: 'bg-green-100', icon: '📧' },
+    { title: 'Contact Card', color: 'bg-purple-100', icon: '👤' },
+    { title: 'Location', color: 'bg-green-100', icon: '📍' },
     { title: 'Phone Number', color: 'bg-pink-100', icon: '📞' },
   ];
 
   return (
-    <section className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-white to-purple-50 py-20">
+    <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">
         <div className="grid lg:grid-cols-2 gap-12 items-center">
           {/* Left Content */}

src/components/marketing/Pricing.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import React 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';
@@ -77,23 +78,19 @@ export const Pricing: React.FC<PricingProps> = ({ t }) => {
                   ))}
                 </ul>
 
-                <Button
-                  variant={plan.popular ? 'primary' : 'outline'}
-                  className="w-full"
-                  size="lg"
-                >
-                  Get Started
-                </Button>
+                <Link href="/signup">
+                  <Button
+                    variant={plan.popular ? 'primary' : 'outline'}
+                    className="w-full"
+                    size="lg"
+                  >
+                    Get Started
+                  </Button>
+                </Link>
               </CardContent>
             </Card>
           ))}
         </div>
-
-        <div className="text-center mt-8">
-          <a href="/#pricing" className="text-primary-600 hover:text-primary-700 font-medium">
-            View Full Pricing Details →
-          </a>
-        </div>
       </div>
     </section>
   );

src/components/marketing/TemplateCards.tsx

@@ -25,9 +25,9 @@ export const TemplateCards: React.FC<TemplateCardsProps> = ({ t }) => {
       iconBg: 'bg-blue-100',
     },
     {
-      key: 'wifi',
-      title: t.templates.wifi,
-      icon: '📶',
+      key: 'vcard',
+      title: t.templates.vcard,
+      icon: '👤',
       color: 'bg-purple-50 border-purple-200',
       iconBg: 'bg-purple-100',
     },

src/components/ui/Input.tsx

@@ -7,7 +7,17 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
 }
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, label, error, ...props }, ref) => {
+  ({ className, type, label, error, onInvalid, ...props }, ref) => {
+    // Default English validation message
+    const handleInvalid = (e: React.InvalidEvent<HTMLInputElement>) => {
+      e.target.setCustomValidity('Please fill out this field.');
+      if (onInvalid) onInvalid(e);
+    };
+
+    const handleInput = (e: React.FormEvent<HTMLInputElement>) => {
+      e.currentTarget.setCustomValidity('');
+    };
+
     return (
       <div className="space-y-1">
         {label && (
@@ -23,6 +33,8 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
             className
           )}
           ref={ref}
+          onInvalid={handleInvalid}
+          onInput={handleInput}
           {...props}
         />
         {error && (