presseportale/resources/views/web/ueber-uns.blade.php
Kevin Adametz 5b8bdf4182
Some checks are pending
linter / quality (push) Waiting to run
tests / ci (push) Waiting to run
12-05-2026 Frontend dev
2026-05-12 18:32:33 +02:00

412 lines
25 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@extends('web.layouts.web-master')
@section('title', 'Über Uns - Business Portal 24')
@section('content')
<main class="min-h-screen flex flex-col bg-white dark:bg-zinc-950 transition-colors duration-200">
<!-- Burger Menu Component -->
<livewire:web.burger-menu />
<!-- Header Component -->
<livewire:web.header />
<!-- Hero Section -->
<section class="relative overflow-hidden text-white py-20 animate-fade-in"
style="background: var(--gradient-hero);">
<div class="container mx-auto px-4">
<div class="max-w-3xl mx-auto text-center">
<h1 class="text-4xl md:text-5xl font-bold mb-6 animate-fade-in-up">
Über Business Portal
</h1>
<p class="text-xl text-white/90 leading-relaxed animate-fade-in-up animation-delay-200">
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>
<!-- Decorative Pattern -->
<div class="absolute top-0 right-0 opacity-10">
<svg width="404" height="384" fill="none" viewBox="0 0 404 384">
<defs>
<pattern id="pattern-hero-about" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="4" height="4" fill="currentColor"/>
</pattern>
</defs>
<rect width="404" height="384" fill="url(#pattern-hero-about)"/>
</svg>
</div>
</section>
<!-- Stats Section -->
<section class="py-16 bg-white dark:bg-zinc-950 transition-colors duration-200">
<div class="container mx-auto px-4">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
<div class="text-center">
<div class="text-4xl font-bold bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] bg-clip-text text-transparent mb-2">
250.000+
</div>
<div class="text-sm text-zinc-600 dark:text-zinc-400">Veröffentlichte Meldungen</div>
</div>
<div class="text-center">
<div class="text-4xl font-bold bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] bg-clip-text text-transparent mb-2">
15.000+
</div>
<div class="text-sm text-zinc-600 dark:text-zinc-400">Registrierte Unternehmen</div>
</div>
<div class="text-center">
<div class="text-4xl font-bold bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] bg-clip-text text-transparent mb-2">
2,5 Mio.
</div>
<div class="text-sm text-zinc-600 dark:text-zinc-400">Monatliche Leser</div>
</div>
<div class="text-center">
<div class="text-4xl font-bold bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] bg-clip-text text-transparent mb-2">
40+
</div>
<div class="text-sm text-zinc-600 dark:text-zinc-400">Länder</div>
</div>
</div>
</div>
</section>
<!-- Mission Section -->
<section class="py-16 bg-zinc-50/50 dark:bg-zinc-900/50 transition-colors duration-200">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Unsere Mission
</h2>
<p class="text-lg text-zinc-600 dark:text-zinc-400">
Professionelle Unternehmenskommunikation für alle zugänglich machen
</p>
</div>
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-8 md:p-12 transition-colors duration-200">
<p class="text-lg text-zinc-900 dark:text-zinc-100 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 class="text-lg text-zinc-900 dark:text-zinc-100 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>
</div>
</div>
</div>
</section>
<!-- Values Section -->
<section class="py-16 bg-white dark:bg-zinc-950 transition-colors duration-200">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Unsere Werte
</h2>
<p class="text-zinc-600 dark:text-zinc-400 max-w-2xl mx-auto">
Diese Prinzipien leiten uns in allem, was wir tun
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
<!-- Value 1 -->
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 text-center hover:shadow-lg transition-all">
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="h-8 w-8 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
</svg>
</div>
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">
Qualität vor Quantität
</h3>
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Wir setzen auf redaktionelle Qualität und kuratieren Inhalte sorgfältig, um höchste Standards zu gewährleisten.
</p>
</div>
<!-- Value 2 -->
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 text-center hover:shadow-lg transition-all">
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="h-8 w-8 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">
DACH-Expertise
</h3>
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Spezialisiert auf den deutschsprachigen Raum mit tiefem Verständnis für regionale Besonderheiten.
</p>
</div>
<!-- Value 3 -->
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 text-center hover:shadow-lg transition-all">
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="h-8 w-8 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
</div>
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">
Kundenfokus
</h3>
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Ihre Zufriedenheit steht im Mittelpunkt. Wir bieten persönlichen Support und maßgeschneiderte Lösungen.
</p>
</div>
<!-- Value 4 -->
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 text-center hover:shadow-lg transition-all">
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="h-8 w-8 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
</svg>
</div>
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">
Innovation & Technologie
</h3>
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Kontinuierliche Weiterentwicklung unserer Plattform mit modernsten Technologien und Features.
</p>
</div>
</div>
</div>
</section>
<!-- Team Section -->
<section class="py-16 bg-zinc-50/50 dark:bg-zinc-900/50 transition-colors duration-200">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Unser Team
</h2>
<p class="text-zinc-600 dark:text-zinc-400 max-w-2xl mx-auto">
Erfahrene Experten aus PR, Technologie und Medien
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-6xl mx-auto">
<!-- Team Member 1 -->
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 text-center hover:shadow-lg transition-all">
<div class="w-24 h-24 bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-secondary)]/20 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="h-12 w-12 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
</svg>
</div>
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-1">
Dr. Michael Weber
</h3>
<p class="text-sm text-[var(--color-primary)] mb-3">Gründer & CEO</p>
<p class="text-sm text-zinc-600 dark:text-zinc-400">
15+ Jahre Erfahrung in PR und Unternehmenskommunikation
</p>
</div>
<!-- Team Member 2 -->
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 text-center hover:shadow-lg transition-all">
<div class="w-24 h-24 bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-secondary)]/20 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="h-12 w-12 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
</svg>
</div>
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-1">
Sarah Hoffmann
</h3>
<p class="text-sm text-[var(--color-primary)] mb-3">Chief Technology Officer</p>
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Expertin für digitale Plattformen und Skalierung
</p>
</div>
<!-- Team Member 3 -->
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 text-center hover:shadow-lg transition-all">
<div class="w-24 h-24 bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-secondary)]/20 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="h-12 w-12 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
</svg>
</div>
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-1">
Thomas Schneider
</h3>
<p class="text-sm text-[var(--color-primary)] mb-3">Head of Customer Success</p>
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Spezialist für Kundenzufriedenheit und Account Management
</p>
</div>
<!-- Team Member 4 -->
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 text-center hover:shadow-lg transition-all">
<div class="w-24 h-24 bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-secondary)]/20 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="h-12 w-12 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
</svg>
</div>
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-1">
Lisa Müller
</h3>
<p class="text-sm text-[var(--color-primary)] mb-3">Head of Content & Quality</p>
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Journalistin mit Schwerpunkt digitale Medien
</p>
</div>
</div>
</div>
</section>
<!-- Timeline Section -->
<section class="py-16 bg-white dark:bg-zinc-950 transition-colors duration-200">
<div class="container mx-auto px-4 max-w-4xl">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Unsere Geschichte
</h2>
</div>
<div class="space-y-8">
<!-- Milestone 1 -->
<div class="flex gap-6">
<div class="flex flex-col items-center">
<div class="w-12 h-12 rounded-full flex items-center justify-center text-white font-bold flex-shrink-0" style="background: var(--gradient-hero);">
10
</div>
<div class="w-0.5 h-16 bg-gradient-to-b from-[var(--color-primary)] to-[var(--color-secondary)] mt-2"></div>
</div>
<div class="pb-8">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
Gründung
</h3>
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Start als kleines Start-up mit der Vision, PR zu demokratisieren
</p>
</div>
</div>
<!-- Milestone 2 -->
<div class="flex gap-6">
<div class="flex flex-col items-center">
<div class="w-12 h-12 rounded-full flex items-center justify-center text-white font-bold flex-shrink-0" style="background: var(--gradient-hero);">
13
</div>
<div class="w-0.5 h-16 bg-gradient-to-b from-[var(--color-primary)] to-[var(--color-secondary)] mt-2"></div>
</div>
<div class="pb-8">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
Expansion
</h3>
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Erreichen von 1.000 registrierten Unternehmen
</p>
</div>
</div>
<!-- Milestone 3 -->
<div class="flex gap-6">
<div class="flex flex-col items-center">
<div class="w-12 h-12 rounded-full flex items-center justify-center text-white font-bold flex-shrink-0" style="background: var(--gradient-hero);">
16
</div>
<div class="w-0.5 h-16 bg-gradient-to-b from-[var(--color-primary)] to-[var(--color-secondary)] mt-2"></div>
</div>
<div class="pb-8">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
Wachstum
</h3>
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Launch der Premium-Features und Enterprise-Lösungen
</p>
</div>
</div>
<!-- Milestone 4 -->
<div class="flex gap-6">
<div class="flex flex-col items-center">
<div class="w-12 h-12 rounded-full flex items-center justify-center text-white font-bold flex-shrink-0" style="background: var(--gradient-hero);">
19
</div>
<div class="w-0.5 h-16 bg-gradient-to-b from-[var(--color-primary)] to-[var(--color-secondary)] mt-2"></div>
</div>
<div class="pb-8">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
Innovation
</h3>
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Einführung KI-gestützter Reichweiten-Analytics
</p>
</div>
</div>
<!-- Milestone 5 -->
<div class="flex gap-6">
<div class="flex flex-col items-center">
<div class="w-12 h-12 rounded-full flex items-center justify-center text-white font-bold flex-shrink-0" style="background: var(--gradient-hero);">
22
</div>
<div class="w-0.5 h-16 bg-gradient-to-b from-[var(--color-primary)] to-[var(--color-secondary)] mt-2"></div>
</div>
<div class="pb-8">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
Marktführer
</h3>
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Über 10.000 aktive Unternehmenskunden im DACH-Raum
</p>
</div>
</div>
<!-- Milestone 6 -->
<div class="flex gap-6">
<div class="flex flex-col items-center">
<div class="w-12 h-12 rounded-full flex items-center justify-center text-white font-bold flex-shrink-0" style="background: var(--gradient-hero);">
25
</div>
</div>
<div class="pb-8">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
Zukunft
</h3>
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Internationalisierung und neue AI-Features
</p>
</div>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-16 text-white" style="background: var(--gradient-hero);">
<div class="container mx-auto px-4 text-center">
<div class="flex justify-center mb-6">
<svg class="h-16 w-16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
</svg>
</div>
<h2 class="text-3xl font-bold mb-4">
Werden Sie Teil unserer Success Story
</h2>
<p class="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
Über 15.000 Unternehmen vertrauen bereits auf Business Portal
</p>
<a href="/register" class="inline-flex items-center justify-center px-8 py-4 text-sm font-medium bg-white text-[var(--color-primary)] hover:bg-zinc-100 rounded-lg shadow-md hover:shadow-lg transition-all">
Jetzt kostenlos starten
</a>
</div>
</section>
<!-- Footer Component -->
<livewire:web.footer />
</main>
@endsection
@push('styles')
<style>
/* Domain-spezifische Color-Variablen für Inline-Styles */
:root {
--color-primary: {{ $domainConfig['color_scheme']['primary'] ?? '#cf3628' }};
--color-secondary: {{ $domainConfig['color_scheme']['secondary'] ?? '#f0834a' }};
}
/* Alpine.js Cloak */
[x-cloak] {
display: none !important;
}
</style>
@endpush