286 lines
18 KiB
TypeScript
286 lines
18 KiB
TypeScript
import React from 'react';
|
||
import Link from 'next/link';
|
||
import { Metadata } from 'next';
|
||
import { Button } from '@/components/ui/Button';
|
||
import SeoJsonLd from '@/components/SeoJsonLd';
|
||
import { organizationSchema } from '@/lib/schema';
|
||
import { CheckCircle2, Shield, Users, BarChart3, Globe, Lock } from 'lucide-react';
|
||
import { ObfuscatedMailto } from '@/components/ui/ObfuscatedMailto';
|
||
|
||
export const metadata: Metadata = {
|
||
title: 'About QR Master | The Team & Mission Behind the Platform',
|
||
description: 'QR Master is built for measurable campaigns and secure QR code operations. Learn about our mission, values, and why businesses trust us.',
|
||
openGraph: {
|
||
title: 'About QR Master | Dynamic QR Codes & Analytics',
|
||
description: 'We help businesses create, manage, and track QR codes at scale. Transparent pricing, privacy-first, and built for reliability.',
|
||
url: 'https://www.qrmaster.net/about',
|
||
type: 'website',
|
||
images: ['/og-image.png'],
|
||
},
|
||
};
|
||
|
||
export default function AboutPage() {
|
||
return (
|
||
<>
|
||
<SeoJsonLd data={organizationSchema()} />
|
||
|
||
<div className="bg-white">
|
||
{/* Hero Section */}
|
||
<section className="relative overflow-hidden bg-gradient-to-br from-blue-50 via-white to-purple-50 py-20 sm:py-24">
|
||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl text-center">
|
||
<h1 className="text-4xl sm:text-5xl font-bold text-gray-900 leading-tight mb-6">
|
||
QR codes should be <span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-600">flexible, measurable, and reliable</span>.
|
||
</h1>
|
||
<p className="text-xl text-gray-600 max-w-2xl mx-auto mb-10 leading-relaxed">
|
||
QR Master helps teams create dynamic QR codes that can be updated after printing—so you can stop reprinting materials every time something changes. Whether you’re running a menu, an event, or a multi-channel campaign, QR Master turns QR codes into a tool you can manage and measure.
|
||
</p>
|
||
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||
<Link href="/signup">
|
||
<Button size="lg" className="text-lg px-8 py-6 shadow-lg shadow-blue-500/25">
|
||
Get Started Free
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Mission Statement */}
|
||
<section className="py-16 border-y border-gray-100 bg-white">
|
||
<div className="container mx-auto px-4 max-w-4xl text-center">
|
||
<div className="inline-flex items-center justify-center p-3 sm:p-4 mb-6 rounded-full bg-blue-50 text-blue-700 font-medium text-sm sm:text-base">
|
||
<Globe className="w-5 h-5 mr-2" />
|
||
Our Mission
|
||
</div>
|
||
<h2 className="text-3xl font-bold text-gray-900 mb-4">
|
||
Create QR codes that work everywhere—and make campaigns measurable.
|
||
</h2>
|
||
</div>
|
||
</section>
|
||
|
||
{/* What We Do */}
|
||
<section className="py-20 bg-gray-50">
|
||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
|
||
<div className="text-center mb-16">
|
||
<h2 className="text-3xl font-bold text-gray-900 mb-4">What we do</h2>
|
||
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
|
||
QR Master is a QR code platform built for real-world workflows: print, campaigns, and operations.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-3 gap-8">
|
||
{/* Feature 1 */}
|
||
<div className="bg-white p-8 rounded-2xl shadow-sm border border-gray-200 hover:shadow-md transition-shadow">
|
||
<div className="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mb-6">
|
||
<Globe className="w-6 h-6 text-blue-600" />
|
||
</div>
|
||
<h3 className="text-xl font-bold text-gray-900 mb-3">Dynamic QR Codes</h3>
|
||
<p className="text-gray-600 leading-relaxed mb-4">
|
||
Change the destination of a QR code after it’s already printed. Keep your printed materials valid—while you update your content anytime.
|
||
</p>
|
||
<Link href="/dynamic-qr-code-generator" className="text-blue-600 font-medium hover:underline">
|
||
Learn about Dynamic QR →
|
||
</Link>
|
||
</div>
|
||
|
||
{/* Feature 2 */}
|
||
<div className="bg-white p-8 rounded-2xl shadow-sm border border-gray-200 hover:shadow-md transition-shadow">
|
||
<div className="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center mb-6">
|
||
<Users className="w-6 h-6 text-purple-600" />
|
||
</div>
|
||
<h3 className="text-xl font-bold text-gray-900 mb-3">Bulk QR Creation</h3>
|
||
<p className="text-gray-600 leading-relaxed mb-4">
|
||
Generate hundreds of QR codes at once by uploading a CSV/Excel file (up to 1,000 rows per upload). Ideal for packaging, retail labels, inventory, or multi-location marketing.
|
||
</p>
|
||
<Link href="/bulk-qr-code-generator" className="text-blue-600 font-medium hover:underline">
|
||
Explore Bulk Creation →
|
||
</Link>
|
||
</div>
|
||
|
||
{/* Feature 3 */}
|
||
<div className="bg-white p-8 rounded-2xl shadow-sm border border-gray-200 hover:shadow-md transition-shadow">
|
||
<div className="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mb-6">
|
||
<BarChart3 className="w-6 h-6 text-green-600" />
|
||
</div>
|
||
<h3 className="text-xl font-bold text-gray-900 mb-3">Advanced Analytics</h3>
|
||
<p className="text-gray-600 leading-relaxed mb-4">
|
||
Understand QR performance with scan analytics—so you can improve placements and campaigns based on real usage over time.
|
||
</p>
|
||
<Link href="/qr-code-tracking" className="text-blue-600 font-medium hover:underline">
|
||
See Analytics Features →
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-12 text-center">
|
||
<Link href="/create-qr">
|
||
<Button size="lg">Create QR Code</Button>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Who It's For / Not For */}
|
||
<section className="py-20 bg-white">
|
||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-6xl">
|
||
<div className="grid md:grid-cols-2 gap-16">
|
||
{/* Ideal For */}
|
||
<div>
|
||
<div className="flex items-start mb-6">
|
||
<CheckCircle2 className="w-6 h-6 text-green-500 mr-3 mt-1 flex-shrink-0" />
|
||
<h3 className="text-2xl font-bold text-gray-900">
|
||
Who QR Master is for
|
||
</h3>
|
||
</div>
|
||
<p className="text-gray-600 mb-6">
|
||
QR Master is built for people who rely on QR codes in the real world:
|
||
</p>
|
||
<ul className="space-y-4">
|
||
{[
|
||
"Restaurants using QR codes for menus and table experiences",
|
||
"Marketing teams & agencies running measurable print campaigns",
|
||
"Event organizers handling tickets, check-ins, and engagement",
|
||
"Retail & packaging workflows where scale and tracking matter"
|
||
].map((item, i) => (
|
||
<li key={i} className="flex items-start">
|
||
<div className="flex-shrink-0 w-1.5 h-1.5 rounded-full bg-green-500 mt-2 mr-3" />
|
||
<span className="text-gray-700">{item}</span>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
|
||
{/* Not Ideal For */}
|
||
<div className="bg-gray-50 p-8 rounded-2xl border border-gray-100">
|
||
<div className="flex items-start mb-6">
|
||
<Shield className="w-6 h-6 text-gray-400 mr-3 mt-1 flex-shrink-0" />
|
||
<h3 className="text-2xl font-bold text-gray-900">
|
||
When QR Master may <span className="italic">not</span> be the best fit
|
||
</h3>
|
||
</div>
|
||
<p className="text-gray-600 leading-relaxed mb-6">
|
||
If you require enterprise SSO, on-premise hosting, or deeply customized enterprise integrations, QR Master may not match those requirements today.
|
||
</p>
|
||
<p className="text-sm text-gray-500 italic">
|
||
(We prefer being transparent so you can choose the right tool.)
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Trust & Transparency */}
|
||
<section className="py-20 bg-gray-900 text-white">
|
||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl">
|
||
<div className="text-center mb-16">
|
||
<h2 className="text-3xl font-bold mb-4">Trust & Transparency</h2>
|
||
<p className="text-gray-400 text-lg max-w-2xl mx-auto">
|
||
We know QR codes often sit at the intersection of marketing, security, and privacy. That’s why we prioritize clear product behavior and straightforward policies.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid md:grid-cols-2 gap-12">
|
||
<div>
|
||
<div className="flex items-center mb-4">
|
||
<Lock className="w-6 h-6 text-blue-400 mr-3" />
|
||
<h3 className="text-xl font-bold">Security basics</h3>
|
||
</div>
|
||
<p className="text-gray-400 leading-relaxed mb-4">
|
||
QR Master runs over HTTPS/TLS as standard. We focus on protecting the redirect and management experience with secure access patterns and responsible data handling.
|
||
</p>
|
||
<p className="text-gray-500 text-sm">
|
||
If you need formal security documentation (controls, subprocessors, incident process), we recommend publishing a dedicated Security page and linking it here.
|
||
</p>
|
||
</div>
|
||
|
||
<div>
|
||
<div className="flex items-center mb-4">
|
||
<Shield className="w-6 h-6 text-purple-400 mr-3" />
|
||
<h3 className="text-xl font-bold">Privacy & data handling</h3>
|
||
</div>
|
||
<p className="text-gray-400 leading-relaxed mb-6">
|
||
We aim for a privacy-conscious approach and provide a transparent Privacy Policy describing how data is handled and what tools/subprocessors are involved.
|
||
</p>
|
||
<div className="flex space-x-6 text-sm">
|
||
<Link href="/privacy" className="text-blue-400 hover:text-blue-300 transition-colors">
|
||
Read our Privacy Policy →
|
||
</Link>
|
||
<Link href="/faq" className="text-blue-400 hover:text-blue-300 transition-colors">
|
||
Explore FAQs →
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Support & Contact */}
|
||
<section className="py-20 bg-white">
|
||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-5xl">
|
||
<div className="grid md:grid-cols-2 gap-12">
|
||
{/* Support */}
|
||
<div>
|
||
<h3 className="text-2xl font-bold text-gray-900 mb-6">Support</h3>
|
||
<p className="text-gray-600 mb-6">We keep support simple and responsive.</p>
|
||
|
||
<div className="space-y-4 text-gray-700">
|
||
<div className="flex items-start">
|
||
<span className="font-semibold w-32">Email:</span>
|
||
<ObfuscatedMailto email="support@qrmaster.net" className="text-blue-600 hover:underline" />
|
||
</div>
|
||
<div className="flex items-start">
|
||
<span className="font-semibold w-32">Support hours:</span>
|
||
<span>Monday–Friday, 9:00–17:00 CET</span>
|
||
</div>
|
||
<div className="flex items-start">
|
||
<span className="font-semibold w-32">Languages:</span>
|
||
<span>English (EN) and German (DE)</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-8 bg-blue-50 p-6 rounded-xl text-sm text-blue-800">
|
||
<p className="font-semibold mb-2">Reaching out with a production issue?</p>
|
||
<p>Please include:</p>
|
||
<ul className="list-disc ml-5 mt-1 space-y-1 text-blue-700">
|
||
<li>The QR code type (static/dynamic)</li>
|
||
<li>Destination URL</li>
|
||
<li>Any relevant campaign context</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Contact Info */}
|
||
<div>
|
||
<h3 className="text-2xl font-bold text-gray-900 mb-6">Contact</h3>
|
||
<div className="bg-gray-50 p-8 rounded-2xl border border-gray-100">
|
||
<div className="space-y-4">
|
||
<p className="font-bold text-gray-900 text-lg">QR Master</p>
|
||
<p className="text-gray-600">
|
||
1001 Blucher Street<br />
|
||
Corpus Christi, Texas, USA
|
||
</p>
|
||
<div className="pt-4 border-t border-gray-200">
|
||
<p className="text-gray-600">
|
||
<span className="font-medium text-gray-900">For general questions:</span><br />
|
||
<ObfuscatedMailto email="support@qrmaster.net" className="text-blue-600 hover:underline" />
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-20 text-center">
|
||
<Link href="/signup">
|
||
<Button size="lg" className="text-lg px-8 py-6">
|
||
Get Started Free
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|