240 lines
10 KiB
TypeScript
240 lines
10 KiB
TypeScript
import { Header } from "@/components/Header";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Card } from "@/components/ui/card";
|
||
import { Users, Target, Award, TrendingUp, Globe, Heart } from "lucide-react";
|
||
|
||
const stats = [
|
||
{ label: "Veröffentlichte Meldungen", value: "250.000+" },
|
||
{ label: "Registrierte Unternehmen", value: "15.000+" },
|
||
{ label: "Monatliche Leser", value: "2,5 Mio." },
|
||
{ label: "Länder", value: "40+" },
|
||
];
|
||
|
||
const values = [
|
||
{
|
||
icon: Target,
|
||
title: "Qualität vor Quantität",
|
||
description: "Wir setzen auf redaktionelle Qualität und kuratieren Inhalte sorgfältig, um höchste Standards zu gewährleisten.",
|
||
},
|
||
{
|
||
icon: Globe,
|
||
title: "DACH-Expertise",
|
||
description: "Spezialisiert auf den deutschsprachigen Raum mit tiefem Verständnis für regionale Besonderheiten.",
|
||
},
|
||
{
|
||
icon: Heart,
|
||
title: "Kundenfokus",
|
||
description: "Ihre Zufriedenheit steht im Mittelpunkt. Wir bieten persönlichen Support und maßgeschneiderte Lösungen.",
|
||
},
|
||
{
|
||
icon: TrendingUp,
|
||
title: "Innovation & Technologie",
|
||
description: "Kontinuierliche Weiterentwicklung unserer Plattform mit modernsten Technologien und Features.",
|
||
},
|
||
];
|
||
|
||
const team = [
|
||
{
|
||
name: "Dr. Michael Weber",
|
||
role: "Gründer & CEO",
|
||
bio: "15+ Jahre Erfahrung in PR und Unternehmenskommunikation",
|
||
},
|
||
{
|
||
name: "Sarah Hoffmann",
|
||
role: "Chief Technology Officer",
|
||
bio: "Expertin für digitale Plattformen und Skalierung",
|
||
},
|
||
{
|
||
name: "Thomas Schneider",
|
||
role: "Head of Customer Success",
|
||
bio: "Spezialist für Kundenzufriedenheit und Account Management",
|
||
},
|
||
{
|
||
name: "Lisa Müller",
|
||
role: "Head of Content & Quality",
|
||
bio: "Journalistin mit Schwerpunkt digitale Medien",
|
||
},
|
||
];
|
||
|
||
const UeberUns = () => {
|
||
return (
|
||
<div className="min-h-screen flex flex-col">
|
||
<Header />
|
||
|
||
<main className="flex-1">
|
||
{/* Hero Section */}
|
||
<section className="bg-gradient-to-r from-primary via-primary/95 to-secondary text-white py-20">
|
||
<div className="container mx-auto px-4">
|
||
<div className="max-w-3xl mx-auto text-center">
|
||
<h1 className="text-4xl md:text-5xl font-bold mb-6">
|
||
Über Business Portal
|
||
</h1>
|
||
<p className="text-xl text-white/90 leading-relaxed">
|
||
Seit 2010 verbinden wir Unternehmen mit Medien, Journalisten und Multiplikatoren im deutschsprachigen Raum. Wir sind die führende Plattform für Unternehmenskommunikation und Pressearbeit im DACH-Raum.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Stats Section */}
|
||
<section className="py-16 bg-background">
|
||
<div className="container mx-auto px-4">
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
|
||
{stats.map((stat) => (
|
||
<div key={stat.label} className="text-center">
|
||
<div className="text-4xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent mb-2">
|
||
{stat.value}
|
||
</div>
|
||
<div className="text-sm text-muted-foreground">{stat.label}</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Mission Section */}
|
||
<section className="py-16 bg-muted/30">
|
||
<div className="container mx-auto px-4">
|
||
<div className="max-w-4xl mx-auto">
|
||
<div className="text-center mb-12">
|
||
<h2 className="text-3xl font-bold text-foreground mb-4">
|
||
Unsere Mission
|
||
</h2>
|
||
<p className="text-lg text-muted-foreground">
|
||
Professionelle Unternehmenskommunikation für alle zugänglich machen
|
||
</p>
|
||
</div>
|
||
|
||
<Card className="p-8 md:p-12">
|
||
<p className="text-lg text-foreground leading-relaxed mb-6">
|
||
Wir glauben daran, dass jedes Unternehmen – unabhängig von Größe oder Budget – die Möglichkeit haben sollte, seine Geschichte zu erzählen und mit relevanten Zielgruppen zu kommunizieren.
|
||
</p>
|
||
<p className="text-lg text-foreground leading-relaxed">
|
||
Business Portal demokratisiert professionelle PR-Arbeit durch innovative Technologie, faire Preismodelle und exzellenten Service. Wir schaffen Sichtbarkeit für wichtige Unternehmensnachrichten und verbinden Organisationen mit den Menschen, die ihre Botschaften lesen und teilen möchten.
|
||
</p>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Values Section */}
|
||
<section className="py-16 bg-background">
|
||
<div className="container mx-auto px-4">
|
||
<div className="text-center mb-12">
|
||
<h2 className="text-3xl font-bold text-foreground mb-4">
|
||
Unsere Werte
|
||
</h2>
|
||
<p className="text-muted-foreground max-w-2xl mx-auto">
|
||
Diese Prinzipien leiten uns in allem, was wir tun
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
|
||
{values.map((value) => (
|
||
<Card key={value.title} className="p-6 text-center hover:shadow-card-hover transition-all">
|
||
<div className="w-16 h-16 bg-gradient-to-br from-primary/10 to-secondary/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<value.icon className="h-8 w-8 text-primary" />
|
||
</div>
|
||
<h3 className="font-semibold text-foreground mb-3">
|
||
{value.title}
|
||
</h3>
|
||
<p className="text-sm text-muted-foreground">
|
||
{value.description}
|
||
</p>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Team Section */}
|
||
<section className="py-16 bg-muted/30">
|
||
<div className="container mx-auto px-4">
|
||
<div className="text-center mb-12">
|
||
<h2 className="text-3xl font-bold text-foreground mb-4">
|
||
Unser Team
|
||
</h2>
|
||
<p className="text-muted-foreground max-w-2xl mx-auto">
|
||
Erfahrene Experten aus PR, Technologie und Medien
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-6xl mx-auto">
|
||
{team.map((member) => (
|
||
<Card key={member.name} className="p-6 text-center hover:shadow-card-hover transition-all">
|
||
<div className="w-24 h-24 bg-gradient-to-br from-primary/20 to-secondary/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||
<Users className="h-12 w-12 text-primary" />
|
||
</div>
|
||
<h3 className="font-semibold text-foreground mb-1">
|
||
{member.name}
|
||
</h3>
|
||
<p className="text-sm text-primary mb-3">{member.role}</p>
|
||
<p className="text-sm text-muted-foreground">{member.bio}</p>
|
||
</Card>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Timeline Section */}
|
||
<section className="py-16 bg-background">
|
||
<div className="container mx-auto px-4 max-w-4xl">
|
||
<div className="text-center mb-12">
|
||
<h2 className="text-3xl font-bold text-foreground mb-4">
|
||
Unsere Geschichte
|
||
</h2>
|
||
</div>
|
||
|
||
<div className="space-y-8">
|
||
{[
|
||
{ year: "2010", title: "Gründung", text: "Start als kleines Start-up mit der Vision, PR zu demokratisieren" },
|
||
{ year: "2013", title: "Expansion", text: "Erreichen von 1.000 registrierten Unternehmen" },
|
||
{ year: "2016", title: "Wachstum", text: "Launch der Premium-Features und Enterprise-Lösungen" },
|
||
{ year: "2019", title: "Innovation", text: "Einführung KI-gestützter Reichweiten-Analytics" },
|
||
{ year: "2022", title: "Marktführer", text: "Über 10.000 aktive Unternehmenskunden im DACH-Raum" },
|
||
{ year: "2025", title: "Zukunft", text: "Internationalisierung und neue AI-Features" },
|
||
].map((milestone, index) => (
|
||
<div key={milestone.year} className="flex gap-6">
|
||
<div className="flex flex-col items-center">
|
||
<div className="w-12 h-12 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center text-white font-bold flex-shrink-0">
|
||
{milestone.year.slice(-2)}
|
||
</div>
|
||
{index < 5 && (
|
||
<div className="w-0.5 h-16 bg-gradient-to-b from-primary to-secondary mt-2"></div>
|
||
)}
|
||
</div>
|
||
<div className="pb-8">
|
||
<h3 className="font-semibold text-foreground mb-2">
|
||
{milestone.title}
|
||
</h3>
|
||
<p className="text-sm text-muted-foreground">
|
||
{milestone.text}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* CTA Section */}
|
||
<section className="py-16 bg-gradient-to-r from-primary to-secondary text-white">
|
||
<div className="container mx-auto px-4 text-center">
|
||
<Award className="h-16 w-16 mx-auto mb-6" />
|
||
<h2 className="text-3xl font-bold mb-4">
|
||
Werden Sie Teil unserer Success Story
|
||
</h2>
|
||
<p className="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
|
||
Über 15.000 Unternehmen vertrauen bereits auf Business Portal
|
||
</p>
|
||
<Button size="lg" variant="secondary">
|
||
Jetzt kostenlos starten
|
||
</Button>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default UeberUns;
|