first commit
This commit is contained in:
commit
405df0a122
3083 changed files with 69203 additions and 0 deletions
70
resources/css/admin.css
Normal file
70
resources/css/admin.css
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
/**
|
||||
not Used
|
||||
*/
|
||||
@import "tailwindcss";
|
||||
@import "../../vendor/livewire/flux/dist/flux.css";
|
||||
|
||||
@source '../views';
|
||||
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
|
||||
@source '../../vendor/livewire/flux-pro/stubs/**/*.blade.php';
|
||||
@source '../../vendor/livewire/flux/stubs/**/*.blade.php';
|
||||
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@theme {
|
||||
--font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
||||
"Noto Color Emoji";
|
||||
|
||||
--color-zinc-50: var(--color-neutral-50);
|
||||
--color-zinc-100: var(--color-neutral-100);
|
||||
--color-zinc-200: var(--color-neutral-200);
|
||||
--color-zinc-300: var(--color-neutral-300);
|
||||
--color-zinc-400: var(--color-neutral-400);
|
||||
--color-zinc-500: var(--color-neutral-500);
|
||||
--color-zinc-600: var(--color-neutral-600);
|
||||
--color-zinc-700: var(--color-neutral-700);
|
||||
--color-zinc-800: var(--color-neutral-800);
|
||||
--color-zinc-900: var(--color-neutral-900);
|
||||
--color-zinc-950: var(--color-neutral-950);
|
||||
|
||||
--color-accent: var(--color-sky-600);
|
||||
--color-accent-content: var(--color-sky-600);
|
||||
--color-accent-foreground: var(--color-white);
|
||||
}
|
||||
|
||||
@layer theme {
|
||||
.dark {
|
||||
--color-accent: var(--color-sky-600);
|
||||
--color-accent-content: var(--color-sky-400);
|
||||
--color-accent-foreground: var(--color-white);
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
*,
|
||||
::after,
|
||||
::before,
|
||||
::backdrop,
|
||||
::file-selector-button {
|
||||
border-color: var(--color-gray-200, currentColor);
|
||||
}
|
||||
}
|
||||
|
||||
[data-flux-field]:not(ui-radio, ui-checkbox) {
|
||||
@apply grid gap-2;
|
||||
}
|
||||
|
||||
[data-flux-label] {
|
||||
@apply !mb-0 !leading-tight;
|
||||
}
|
||||
|
||||
input:focus[data-flux-control],
|
||||
textarea:focus[data-flux-control],
|
||||
select:focus[data-flux-control] {
|
||||
@apply outline-hidden ring-2 ring-accent ring-offset-2 ring-offset-accent-foreground;
|
||||
}
|
||||
|
||||
/* \[:where(&)\]:size-4 {
|
||||
@apply size-4;
|
||||
} */
|
||||
67
resources/css/portal.css
Normal file
67
resources/css/portal.css
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
@import "tailwindcss";
|
||||
@import "../../vendor/livewire/flux/dist/flux.css";
|
||||
|
||||
@source '../views';
|
||||
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
|
||||
@source '../../vendor/livewire/flux-pro/stubs/**/*.blade.php';
|
||||
@source '../../vendor/livewire/flux/stubs/**/*.blade.php';
|
||||
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@theme {
|
||||
--font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
||||
"Noto Color Emoji";
|
||||
|
||||
--color-zinc-50: var(--color-neutral-50);
|
||||
--color-zinc-100: var(--color-neutral-100);
|
||||
--color-zinc-200: var(--color-neutral-200);
|
||||
--color-zinc-300: var(--color-neutral-300);
|
||||
--color-zinc-400: var(--color-neutral-400);
|
||||
--color-zinc-500: var(--color-neutral-500);
|
||||
--color-zinc-600: var(--color-neutral-600);
|
||||
--color-zinc-700: var(--color-neutral-700);
|
||||
--color-zinc-800: var(--color-neutral-800);
|
||||
--color-zinc-900: var(--color-neutral-900);
|
||||
--color-zinc-950: var(--color-neutral-950);
|
||||
|
||||
--color-accent: #3ea3dc;
|
||||
--color-accent-content: #3ea3dc;
|
||||
--color-accent-foreground: var(--color-white);
|
||||
}
|
||||
|
||||
@layer theme {
|
||||
.dark {
|
||||
--color-accent: #3ea3dc;
|
||||
--color-accent-content: #5bb8e6;
|
||||
--color-accent-foreground: var(--color-white);
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
*,
|
||||
::after,
|
||||
::before,
|
||||
::backdrop,
|
||||
::file-selector-button {
|
||||
border-color: var(--color-gray-200, currentColor);
|
||||
}
|
||||
}
|
||||
|
||||
[data-flux-field]:not(ui-radio, ui-checkbox) {
|
||||
@apply grid gap-2;
|
||||
}
|
||||
|
||||
[data-flux-label] {
|
||||
@apply !mb-0 !leading-tight;
|
||||
}
|
||||
|
||||
input:focus[data-flux-control],
|
||||
textarea:focus[data-flux-control],
|
||||
select:focus[data-flux-control] {
|
||||
@apply outline-hidden ring-2 ring-accent ring-offset-2 ring-offset-accent-foreground;
|
||||
}
|
||||
|
||||
/* \[:where(&)\]:size-4 {
|
||||
@apply size-4;
|
||||
} */
|
||||
102
resources/css/web/shared-styles.css
Normal file
102
resources/css/web/shared-styles.css
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
/**
|
||||
* Gemeinsame Styles für alle Frontend-Themes
|
||||
* Diese Datei wird von allen Web-Themes importiert
|
||||
*/
|
||||
@import "tailwindcss";
|
||||
|
||||
/* Definiere wo Tailwind nach Klassen suchen soll */
|
||||
@source "../../views/web";
|
||||
@source "../../views/layouts/web";
|
||||
@source "../../views/livewire/web";
|
||||
@source "../../views/components/web";
|
||||
|
||||
/* Tailwind Base Layer für gemeinsame Elemente */
|
||||
@layer base {
|
||||
*,
|
||||
::after,
|
||||
::before,
|
||||
::backdrop,
|
||||
::file-selector-button {
|
||||
border-color: var(--color-gray-200, currentColor);
|
||||
}
|
||||
|
||||
body {
|
||||
@apply font-sans antialiased;
|
||||
}
|
||||
|
||||
/* Typography Defaults */
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
@apply font-bold leading-tight;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@apply text-4xl md:text-5xl;
|
||||
}
|
||||
|
||||
h2 {
|
||||
@apply text-3xl md:text-4xl;
|
||||
}
|
||||
|
||||
h3 {
|
||||
@apply text-2xl md:text-3xl;
|
||||
}
|
||||
|
||||
h4 {
|
||||
@apply text-xl md:text-2xl;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@apply text-lg md:text-xl;
|
||||
}
|
||||
|
||||
h6 {
|
||||
@apply text-base md:text-lg;
|
||||
}
|
||||
|
||||
/* Link Styles */
|
||||
a {
|
||||
@apply transition-colors duration-200;
|
||||
}
|
||||
|
||||
/* Focus Styles */
|
||||
:focus-visible {
|
||||
@apply outline-none ring-2 ring-offset-2;
|
||||
}
|
||||
}
|
||||
|
||||
/* Gemeinsame Component Styles */
|
||||
@layer components {
|
||||
/* Button Base Styles */
|
||||
.btn {
|
||||
@apply inline-flex items-center justify-center px-4 py-2 rounded-lg font-medium transition-all duration-200;
|
||||
@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2;
|
||||
}
|
||||
|
||||
/* Card Styles */
|
||||
.card {
|
||||
@apply bg-white rounded-lg shadow-md overflow-hidden;
|
||||
}
|
||||
|
||||
/* Container */
|
||||
.container-custom {
|
||||
@apply container mx-auto px-4 sm:px-6 lg:px-8;
|
||||
}
|
||||
|
||||
/* Section Spacing */
|
||||
.section {
|
||||
@apply py-12 md:py-16 lg:py-20;
|
||||
}
|
||||
}
|
||||
|
||||
/* Utility Classes */
|
||||
@layer utilities {
|
||||
.text-balance {
|
||||
text-wrap: balance;
|
||||
}
|
||||
}
|
||||
|
||||
3
resources/css/web/test.css
Normal file
3
resources/css/web/test.css
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
291
resources/css/web/theme-businessportal24.css
Normal file
291
resources/css/web/theme-businessportal24.css
Normal file
|
|
@ -0,0 +1,291 @@
|
|||
/**
|
||||
* Theme für Businessportal24 (businessportal24.test)
|
||||
* Primary: #cf3628 (Rot)
|
||||
* Secondary: #f0834a (Orange)
|
||||
* Font: Montserrat
|
||||
*/
|
||||
@import "./shared-styles.css";
|
||||
|
||||
/* Theme-spezifische CSS-Variablen */
|
||||
:root {
|
||||
/* Font-Familie */
|
||||
--font-primary: "Montserrat", ui-sans-serif, system-ui, sans-serif;
|
||||
--font-secondary: "Montserrat", ui-sans-serif, system-ui, sans-serif;
|
||||
|
||||
/* HSL-Variablen basierend auf Primary Color #cf3628 */
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 4 61% 20%;
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 4 61% 20%;
|
||||
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 4 61% 20%;
|
||||
|
||||
/* Primary: #cf3628 -> hsl(4, 61%, 48%) */
|
||||
--primary: 4 61% 48%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--primary-50: 4 60% 96%;
|
||||
--primary-100: 4 61% 92%;
|
||||
--primary-200: 4 61% 85%;
|
||||
--primary-300: 4 61% 75%;
|
||||
--primary-400: 4 61% 65%;
|
||||
--primary-500: 4 61% 55%;
|
||||
--primary-600: 4 61% 48%;
|
||||
--primary-700: 4 61% 40%;
|
||||
--primary-800: 4 61% 32%;
|
||||
--primary-900: 4 61% 25%;
|
||||
--primary-950: 4 61% 20%;
|
||||
|
||||
/* Secondary: #f0834a -> hsl(21, 84%, 62%) */
|
||||
--secondary: 21 84% 62%;
|
||||
--secondary-foreground: 4 61% 20%;
|
||||
|
||||
--muted: 4 10% 95%;
|
||||
--muted-foreground: 4 10% 45%;
|
||||
|
||||
--accent: 4 61% 48%;
|
||||
--accent-foreground: 0 0% 100%;
|
||||
|
||||
--destructive: 0 84% 60%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
|
||||
--border: 4 10% 90%;
|
||||
--input: 4 10% 90%;
|
||||
--ring: 4 61% 48%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
|
||||
/* Gradient für Hero */
|
||||
--gradient-hero: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--secondary)) 100%);
|
||||
|
||||
/* Shadow-Token */
|
||||
--shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||
--shadow-card-hover: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
|
||||
/* Warning Colors für Anzeige-Badge */
|
||||
--warning: 45 93% 47%;
|
||||
--warning-foreground: 26 83% 14%;
|
||||
}
|
||||
|
||||
/* Dark Mode Variablen (falls gewünscht) */
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@layer theme {
|
||||
.dark {
|
||||
--background: 4 20% 10%;
|
||||
--foreground: 0 0% 95%;
|
||||
|
||||
--card: 4 20% 12%;
|
||||
--card-foreground: 0 0% 95%;
|
||||
|
||||
--popover: 4 20% 12%;
|
||||
--popover-foreground: 0 0% 95%;
|
||||
|
||||
--primary: 21 84% 62%;
|
||||
--secondary: 4 61% 48%;
|
||||
|
||||
--muted: 4 20% 20%;
|
||||
--muted-foreground: 4 10% 70%;
|
||||
|
||||
--accent: 21 84% 62%;
|
||||
--accent-foreground: 0 0% 10%;
|
||||
|
||||
--border: 4 20% 20%;
|
||||
--input: 4 20% 20%;
|
||||
--ring: 21 84% 62%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Theme-spezifische Overrides */
|
||||
@layer base {
|
||||
body {
|
||||
background-color: hsl(var(--background));
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: hsl(var(--primary));
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: hsl(var(--secondary));
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* Button Styles */
|
||||
.btn-primary {
|
||||
@apply inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-white shadow-md transition-all duration-300 hover:shadow-lg;
|
||||
background-image: linear-gradient(to right, hsl(var(--primary)), hsl(var(--secondary)));
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
hsl(var(--primary) / 0.9),
|
||||
hsl(var(--secondary) / 0.9)
|
||||
);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply inline-flex items-center justify-center rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition-all duration-200 hover:bg-gray-50;
|
||||
}
|
||||
|
||||
/* Card Styles */
|
||||
.card {
|
||||
@apply rounded-xl border transition-all duration-300;
|
||||
background-color: hsl(var(--card));
|
||||
border-color: hsl(var(--border));
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: var(--shadow-card-hover);
|
||||
}
|
||||
|
||||
.card-hover {
|
||||
@apply hover:scale-[1.02];
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
border-color: hsl(var(--primary) / 0.2);
|
||||
}
|
||||
|
||||
/* Shadow utilities */
|
||||
.shadow-card {
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.shadow-card-hover {
|
||||
box-shadow: var(--shadow-card-hover);
|
||||
}
|
||||
|
||||
/* Input Styles */
|
||||
.input-primary {
|
||||
@apply w-full rounded-lg border px-4 py-2 text-sm transition-all duration-200;
|
||||
border-color: hsl(var(--input));
|
||||
}
|
||||
|
||||
.input-primary:focus {
|
||||
@apply outline-none;
|
||||
--tw-ring-color: hsl(var(--primary));
|
||||
box-shadow: 0 0 0 2px var(--tw-ring-color);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
/* Badge Styles */
|
||||
.badge {
|
||||
@apply inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs font-medium transition-all duration-200;
|
||||
}
|
||||
|
||||
.badge-primary {
|
||||
@apply border;
|
||||
background-color: hsl(var(--primary) / 0.1);
|
||||
color: hsl(var(--primary));
|
||||
border-color: hsl(var(--primary) / 0.2);
|
||||
}
|
||||
|
||||
.badge-secondary {
|
||||
@apply border text-gray-700;
|
||||
background-color: hsl(var(--secondary) / 0.1);
|
||||
border-color: hsl(var(--secondary) / 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@layer utilities {
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in-down {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in-right {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fade-in 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fade-in-up 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-fade-in-down {
|
||||
animation: fade-in-down 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-slide-in-right {
|
||||
animation: slide-in-right 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-scale-in {
|
||||
animation: scale-in 0.4s ease-out forwards;
|
||||
}
|
||||
|
||||
.animation-delay-100 {
|
||||
animation-delay: 0.1s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.animation-delay-200 {
|
||||
animation-delay: 0.2s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.animation-delay-300 {
|
||||
animation-delay: 0.3s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.animation-delay-400 {
|
||||
animation-delay: 0.4s;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
63
resources/css/web/theme-main.css
Normal file
63
resources/css/web/theme-main.css
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
@import "tailwindcss";
|
||||
|
||||
@source '../../views/web/layout.blade.php';
|
||||
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@theme {
|
||||
--font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif,
|
||||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
|
||||
"Noto Color Emoji";
|
||||
|
||||
--color-zinc-50: #fafafa;
|
||||
--color-zinc-100: #f5f5f5;
|
||||
--color-zinc-200: #e5e5e5;
|
||||
--color-zinc-300: #d4d4d4;
|
||||
--color-zinc-400: #a3a3a3;
|
||||
--color-zinc-500: #737373;
|
||||
--color-zinc-600: #525252;
|
||||
--color-zinc-700: #404040;
|
||||
--color-zinc-800: #262626;
|
||||
--color-zinc-900: #171717;
|
||||
--color-zinc-950: #0a0a0a;
|
||||
|
||||
--color-accent: var(--color-neutral-800);
|
||||
--color-accent-content: var(--color-neutral-800);
|
||||
--color-accent-foreground: var(--color-white);
|
||||
}
|
||||
|
||||
@layer theme {
|
||||
.dark {
|
||||
--color-accent: var(--color-white);
|
||||
--color-accent-content: var(--color-white);
|
||||
--color-accent-foreground: var(--color-neutral-800);
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
*,
|
||||
::after,
|
||||
::before,
|
||||
::backdrop,
|
||||
::file-selector-button {
|
||||
border-color: var(--color-gray-200, currentColor);
|
||||
}
|
||||
}
|
||||
|
||||
[data-flux-field]:not(ui-radio, ui-checkbox) {
|
||||
@apply grid gap-2;
|
||||
}
|
||||
|
||||
[data-flux-label] {
|
||||
@apply !mb-0 !leading-tight;
|
||||
}
|
||||
|
||||
input:focus[data-flux-control],
|
||||
textarea:focus[data-flux-control],
|
||||
select:focus[data-flux-control] {
|
||||
@apply outline-hidden ring-2 ring-accent ring-offset-2 ring-offset-accent-foreground;
|
||||
}
|
||||
|
||||
/* \[:where(&)\]:size-4 {
|
||||
@apply size-4;
|
||||
} */
|
||||
291
resources/css/web/theme-presseecho.css
Normal file
291
resources/css/web/theme-presseecho.css
Normal file
|
|
@ -0,0 +1,291 @@
|
|||
/**
|
||||
* Theme für Presseecho (presseecho.test)
|
||||
* Primary: #345636 (Grün)
|
||||
* Secondary: #6b8f71 (Hellgrün)
|
||||
* Font: Montserrat
|
||||
*/
|
||||
@import "./shared-styles.css";
|
||||
|
||||
/* Theme-spezifische CSS-Variablen */
|
||||
:root {
|
||||
/* Font-Familie */
|
||||
--font-primary: "Montserrat", ui-sans-serif, system-ui, sans-serif;
|
||||
--font-secondary: "Montserrat", ui-sans-serif, system-ui, sans-serif;
|
||||
|
||||
/* HSL-Variablen basierend auf Primary Color #345636 */
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 126 24% 20%;
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 126 24% 20%;
|
||||
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 126 24% 20%;
|
||||
|
||||
/* Primary: #345636 -> hsl(126, 24%, 27%) */
|
||||
--primary: 126 24% 27%;
|
||||
--primary-foreground: 0 0% 100%;
|
||||
--primary-50: 126 24% 96%;
|
||||
--primary-100: 126 24% 92%;
|
||||
--primary-200: 126 24% 85%;
|
||||
--primary-300: 126 24% 75%;
|
||||
--primary-400: 126 24% 65%;
|
||||
--primary-500: 126 24% 55%;
|
||||
--primary-600: 126 24% 48%;
|
||||
--primary-700: 126 24% 40%;
|
||||
--primary-800: 126 24% 32%;
|
||||
--primary-900: 126 24% 25%;
|
||||
--primary-950: 126 24% 20%;
|
||||
|
||||
/* Secondary: #6b8f71 -> hsl(130, 15%, 49%) */
|
||||
--secondary: 130 15% 49%;
|
||||
--secondary-foreground: 126 24% 20%;
|
||||
|
||||
--muted: 126 10% 95%;
|
||||
--muted-foreground: 126 10% 45%;
|
||||
|
||||
--accent: 126 24% 27%;
|
||||
--accent-foreground: 0 0% 100%;
|
||||
|
||||
--destructive: 0 84% 60%;
|
||||
--destructive-foreground: 0 0% 100%;
|
||||
|
||||
--border: 126 10% 90%;
|
||||
--input: 126 10% 90%;
|
||||
--ring: 126 24% 27%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
|
||||
/* Gradient für Hero */
|
||||
--gradient-hero: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--secondary)) 100%);
|
||||
|
||||
/* Shadow-Token */
|
||||
--shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
|
||||
--shadow-card-hover: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
||||
|
||||
/* Warning Colors für Anzeige-Badge */
|
||||
--warning: 45 93% 47%;
|
||||
--warning-foreground: 26 83% 14%;
|
||||
}
|
||||
|
||||
/* Dark Mode Variablen (falls gewünscht) */
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@layer theme {
|
||||
.dark {
|
||||
--background: 126 20% 10%;
|
||||
--foreground: 0 0% 95%;
|
||||
|
||||
--card: 126 20% 12%;
|
||||
--card-foreground: 0 0% 95%;
|
||||
|
||||
--popover: 126 20% 12%;
|
||||
--popover-foreground: 0 0% 95%;
|
||||
|
||||
--primary: 130 15% 49%;
|
||||
--secondary: 126 24% 27%;
|
||||
|
||||
--muted: 126 20% 20%;
|
||||
--muted-foreground: 126 10% 70%;
|
||||
|
||||
--accent: 130 15% 49%;
|
||||
--accent-foreground: 0 0% 10%;
|
||||
|
||||
--border: 126 20% 20%;
|
||||
--input: 126 20% 20%;
|
||||
--ring: 130 15% 49%;
|
||||
}
|
||||
}
|
||||
|
||||
/* Theme-spezifische Overrides */
|
||||
@layer base {
|
||||
body {
|
||||
background-color: hsl(var(--background));
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: hsl(var(--primary));
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: hsl(var(--secondary));
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* Button Styles */
|
||||
.btn-primary {
|
||||
@apply inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium text-white shadow-md transition-all duration-300 hover:shadow-lg;
|
||||
background-image: linear-gradient(to right, hsl(var(--primary)), hsl(var(--secondary)));
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
hsl(var(--primary) / 0.9),
|
||||
hsl(var(--secondary) / 0.9)
|
||||
);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply inline-flex items-center justify-center rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition-all duration-200 hover:bg-gray-50;
|
||||
}
|
||||
|
||||
/* Card Styles */
|
||||
.card {
|
||||
@apply rounded-xl border transition-all duration-300;
|
||||
background-color: hsl(var(--card));
|
||||
border-color: hsl(var(--border));
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
box-shadow: var(--shadow-card-hover);
|
||||
}
|
||||
|
||||
.card-hover {
|
||||
@apply hover:scale-[1.02];
|
||||
}
|
||||
|
||||
.card-hover:hover {
|
||||
border-color: hsl(var(--primary) / 0.2);
|
||||
}
|
||||
|
||||
/* Shadow utilities */
|
||||
.shadow-card {
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.shadow-card-hover {
|
||||
box-shadow: var(--shadow-card-hover);
|
||||
}
|
||||
|
||||
/* Input Styles */
|
||||
.input-primary {
|
||||
@apply w-full rounded-lg border px-4 py-2 text-sm transition-all duration-200;
|
||||
border-color: hsl(var(--input));
|
||||
}
|
||||
|
||||
.input-primary:focus {
|
||||
@apply outline-none;
|
||||
--tw-ring-color: hsl(var(--primary));
|
||||
box-shadow: 0 0 0 2px var(--tw-ring-color);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
/* Badge Styles */
|
||||
.badge {
|
||||
@apply inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs font-medium transition-all duration-200;
|
||||
}
|
||||
|
||||
.badge-primary {
|
||||
@apply border;
|
||||
background-color: hsl(var(--primary) / 0.1);
|
||||
color: hsl(var(--primary));
|
||||
border-color: hsl(var(--primary) / 0.2);
|
||||
}
|
||||
|
||||
.badge-secondary {
|
||||
@apply border text-gray-700;
|
||||
background-color: hsl(var(--secondary) / 0.1);
|
||||
border-color: hsl(var(--secondary) / 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@layer utilities {
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in-down {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slide-in-right {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scale-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fade-in 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fade-in-up 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-fade-in-down {
|
||||
animation: fade-in-down 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-slide-in-right {
|
||||
animation: slide-in-right 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-scale-in {
|
||||
animation: scale-in 0.4s ease-out forwards;
|
||||
}
|
||||
|
||||
.animation-delay-100 {
|
||||
animation-delay: 0.1s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.animation-delay-200 {
|
||||
animation-delay: 0.2s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.animation-delay-300 {
|
||||
animation-delay: 0.3s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.animation-delay-400 {
|
||||
animation-delay: 0.4s;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
0
resources/js/admin.js
Normal file
0
resources/js/admin.js
Normal file
0
resources/js/app.js
Normal file
0
resources/js/app.js
Normal file
18
resources/views/admin/dashboard.blade.php
Normal file
18
resources/views/admin/dashboard.blade.php
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<x-layouts.app title="Dashboard">
|
||||
<div class="flex h-full w-full flex-1 flex-col gap-4 rounded-xl">
|
||||
<div class="grid auto-rows-min gap-4 md:grid-cols-3">
|
||||
<div class="relative aspect-video overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700 p-4">
|
||||
<livewire:notifications />
|
||||
</div>
|
||||
<div class="relative aspect-video overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
|
||||
<x-placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
|
||||
</div>
|
||||
<div class="relative aspect-video overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
|
||||
<x-placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative h-full flex-1 overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700">
|
||||
<x-placeholder-pattern class="absolute inset-0 size-full stroke-gray-900/20 dark:stroke-neutral-100/20" />
|
||||
</div>
|
||||
</div>
|
||||
</x-layouts.app>
|
||||
14
resources/views/components/action-message.blade.php
Normal file
14
resources/views/components/action-message.blade.php
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
@props([
|
||||
'on',
|
||||
])
|
||||
|
||||
<div
|
||||
x-data="{ shown: false, timeout: null }"
|
||||
x-init="@this.on('{{ $on }}', () => { clearTimeout(timeout); shown = true; timeout = setTimeout(() => { shown = false }, 2000); })"
|
||||
x-show.transition.out.opacity.duration.1500ms="shown"
|
||||
x-transition:leave.opacity.duration.1500ms
|
||||
style="display: none"
|
||||
{{ $attributes->merge(['class' => 'text-sm']) }}
|
||||
>
|
||||
{{ $slot->isEmpty() ? __('Saved.') : $slot }}
|
||||
</div>
|
||||
8
resources/views/components/app-logo-icon.blade.php
Normal file
8
resources/views/components/app-logo-icon.blade.php
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 42" {{ $attributes }}>
|
||||
<path
|
||||
fill="currentColor"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M17.2 5.633 8.6.855 0 5.633v26.51l16.2 9 16.2-9v-8.442l7.6-4.223V9.856l-8.6-4.777-8.6 4.777V18.3l-5.6 3.111V5.633ZM38 18.301l-5.6 3.11v-6.157l5.6-3.11V18.3Zm-1.06-7.856-5.54 3.078-5.54-3.079 5.54-3.078 5.54 3.079ZM24.8 18.3v-6.157l5.6 3.111v6.158L24.8 18.3Zm-1 1.732 5.54 3.078-13.14 7.302-5.54-3.078 13.14-7.3v-.002Zm-16.2 7.89 7.6 4.222V38.3L2 30.966V7.92l5.6 3.111v16.892ZM8.6 9.3 3.06 6.222 8.6 3.143l5.54 3.08L8.6 9.3Zm21.8 15.51-13.2 7.334V38.3l13.2-7.334v-6.156ZM9.6 11.034l5.6-3.11v14.6l-5.6 3.11v-14.6Z"
|
||||
/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 714 B |
6
resources/views/components/app-logo.blade.php
Normal file
6
resources/views/components/app-logo.blade.php
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
<div class="flex aspect-square size-8 items-center justify-center rounded-md bg-accent-content text-accent-foreground">
|
||||
<x-app-logo-icon class="size-5 fill-current text-white dark:text-black" />
|
||||
</div>
|
||||
<div class="ms-1 grid flex-1 text-start text-sm">
|
||||
<span class="mb-0.5 truncate leading-none font-semibold">pr-copilot</span>
|
||||
</div>
|
||||
9
resources/views/components/auth-header.blade.php
Normal file
9
resources/views/components/auth-header.blade.php
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
@props([
|
||||
'title',
|
||||
'description',
|
||||
])
|
||||
|
||||
<div class="flex w-full flex-col text-center">
|
||||
<flux:heading size="xl">{{ $title }}</flux:heading>
|
||||
<flux:subheading>{{ $description }}</flux:subheading>
|
||||
</div>
|
||||
9
resources/views/components/auth-session-status.blade.php
Normal file
9
resources/views/components/auth-session-status.blade.php
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
@props([
|
||||
'status',
|
||||
])
|
||||
|
||||
@if ($status)
|
||||
<div {{ $attributes->merge(['class' => 'font-medium text-sm text-green-600']) }}>
|
||||
{{ $status }}
|
||||
</div>
|
||||
@endif
|
||||
5
resources/views/components/layouts/app.blade.php
Normal file
5
resources/views/components/layouts/app.blade.php
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<x-layouts.app.sidebar :title="$title ?? null">
|
||||
<flux:main>
|
||||
{{ $slot }}
|
||||
</flux:main>
|
||||
</x-layouts.app.sidebar>
|
||||
124
resources/views/components/layouts/app/header.blade.php
Normal file
124
resources/views/components/layouts/app/header.blade.php
Normal file
|
|
@ -0,0 +1,124 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
|
||||
<head>
|
||||
@include('partials.head')
|
||||
</head>
|
||||
<body class="min-h-screen bg-white dark:bg-zinc-800">
|
||||
<flux:header container class="border-b border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" />
|
||||
|
||||
<a href="{{ route('dashboard') }}" class="ms-2 me-5 flex items-center space-x-2 rtl:space-x-reverse lg:ms-0" wire:navigate>
|
||||
<x-app-logo />
|
||||
</a>
|
||||
|
||||
<flux:navbar class="-mb-px max-lg:hidden">
|
||||
<flux:navbar.item icon="layout-grid" :href="route('dashboard')" :current="request()->routeIs('dashboard')" wire:navigate>
|
||||
{{ __('Dashboard') }}
|
||||
</flux:navbar.item>
|
||||
</flux:navbar>
|
||||
|
||||
<flux:spacer />
|
||||
|
||||
<flux:navbar class="me-1.5 space-x-0.5 rtl:space-x-reverse py-0!">
|
||||
<flux:tooltip :content="__('Search')" position="bottom">
|
||||
<flux:navbar.item class="!h-10 [&>div>svg]:size-5" icon="magnifying-glass" href="#" :label="__('Search')" />
|
||||
</flux:tooltip>
|
||||
<flux:tooltip :content="__('Repository')" position="bottom">
|
||||
<flux:navbar.item
|
||||
class="h-10 max-lg:hidden [&>div>svg]:size-5"
|
||||
icon="folder-git-2"
|
||||
href="https://github.com/laravel/livewire-starter-kit"
|
||||
target="_blank"
|
||||
:label="__('Repository')"
|
||||
/>
|
||||
</flux:tooltip>
|
||||
<flux:tooltip :content="__('Documentation')" position="bottom">
|
||||
<flux:navbar.item
|
||||
class="h-10 max-lg:hidden [&>div>svg]:size-5"
|
||||
icon="book-open-text"
|
||||
href="https://laravel.com/docs/starter-kits#livewire"
|
||||
target="_blank"
|
||||
label="Documentation"
|
||||
/>
|
||||
</flux:tooltip>
|
||||
</flux:navbar>
|
||||
|
||||
<!-- Desktop User Menu -->
|
||||
<flux:dropdown position="top" align="end">
|
||||
<flux:profile
|
||||
class="cursor-pointer"
|
||||
:initials="auth()->user()->initials()"
|
||||
/>
|
||||
|
||||
<flux:menu>
|
||||
<flux:menu.radio.group>
|
||||
<div class="p-0 text-sm font-normal">
|
||||
<div class="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
|
||||
<span class="relative flex h-8 w-8 shrink-0 overflow-hidden rounded-lg">
|
||||
<span
|
||||
class="flex h-full w-full items-center justify-center rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white"
|
||||
>
|
||||
{{ auth()->user()->initials() }}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<div class="grid flex-1 text-start text-sm leading-tight">
|
||||
<span class="truncate font-semibold">{{ auth()->user()->name }}</span>
|
||||
<span class="truncate text-xs">{{ auth()->user()->email }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</flux:menu.radio.group>
|
||||
|
||||
<flux:menu.separator />
|
||||
|
||||
<flux:menu.radio.group>
|
||||
<flux:menu.item :href="route('settings.profile')" icon="cog" wire:navigate>{{ __('Settings') }}</flux:menu.item>
|
||||
</flux:menu.radio.group>
|
||||
|
||||
<flux:menu.separator />
|
||||
|
||||
<form method="POST" action="{{ route('logout') }}" class="w-full">
|
||||
@csrf
|
||||
<flux:menu.item as="button" type="submit" icon="arrow-right-start-on-rectangle" class="w-full">
|
||||
{{ __('Log Out') }}
|
||||
</flux:menu.item>
|
||||
</form>
|
||||
</flux:menu>
|
||||
</flux:dropdown>
|
||||
</flux:header>
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
<flux:sidebar stashable sticky class="lg:hidden border-e border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<flux:sidebar.toggle class="lg:hidden" icon="x-mark" />
|
||||
|
||||
<a href="{{ route('dashboard') }}" class="ms-1 flex items-center space-x-2 rtl:space-x-reverse" wire:navigate>
|
||||
<x-app-logo />
|
||||
</a>
|
||||
|
||||
<flux:navlist variant="outline">
|
||||
<flux:navlist.group :heading="__('Platform')">
|
||||
<flux:navlist.item icon="layout-grid" :href="route('dashboard')" :current="request()->routeIs('dashboard')" wire:navigate>
|
||||
{{ __('Dashboard') }}
|
||||
</flux:navlist.item>
|
||||
</flux:navlist.group>
|
||||
</flux:navlist>
|
||||
|
||||
<flux:spacer />
|
||||
|
||||
<flux:navlist variant="outline">
|
||||
<flux:navlist.item icon="folder-git-2" href="https://github.com/laravel/livewire-starter-kit" target="_blank">
|
||||
{{ __('Repository') }}
|
||||
</flux:navlist.item>
|
||||
|
||||
<flux:navlist.item icon="book-open-text" href="https://laravel.com/docs/starter-kits#livewire" target="_blank">
|
||||
{{ __('Documentation') }}
|
||||
</flux:navlist.item>
|
||||
</flux:navlist>
|
||||
</flux:sidebar>
|
||||
|
||||
{{ $slot }}
|
||||
|
||||
@fluxScripts
|
||||
</body>
|
||||
</html>
|
||||
166
resources/views/components/layouts/app/sidebar.blade.php
Normal file
166
resources/views/components/layouts/app/sidebar.blade.php
Normal file
|
|
@ -0,0 +1,166 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
|
||||
<head>
|
||||
@include('partials.head')
|
||||
</head>
|
||||
<body class="min-h-screen bg-white dark:bg-zinc-800">
|
||||
<flux:sidebar sticky stashable class="border-e border-zinc-200 bg-zinc-50 dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<flux:sidebar.toggle class="lg:hidden" icon="x-mark" />
|
||||
<a href="{{ config('domains.domain_main_url') }}" class="me-5 flex items-center space-x-2 rtl:space-x-reverse">
|
||||
<x-app-logo />
|
||||
</a>
|
||||
|
||||
<flux:navlist variant="outline">
|
||||
<flux:navlist.group :heading="__('Trader')" class="grid mb-4">
|
||||
<flux:navlist.item icon="home" :href="route('dashboard')" :current="request()->routeIs('dashboard')" wire:navigate>{{ __('Dashboard') }}</flux:navlist.item>
|
||||
</flux:navlist.group>
|
||||
|
||||
<flux:navlist.group :heading="__('Customer')" class="grid mb-4">
|
||||
<flux:navlist.item icon="home" :href="route('dashboard')" :current="request()->routeIs('dashboard')" wire:navigate>{{ __('Dashboard') }}</flux:navlist.item>
|
||||
</flux:navlist.group>
|
||||
|
||||
<flux:navlist.group :heading="__('Admin')" class="grid mb-4">
|
||||
<flux:navlist.item icon="user-group" :href="route('admin.users')" :current="request()->routeIs('admin.users')" wire:navigate>{{ __('Users') }}</flux:navlist.item>
|
||||
<flux:navlist.item icon="user-group" :href="route('admin.users.table')" :current="request()->routeIs('admin.users.table')" wire:navigate>{{ __('Users Table') }}</flux:navlist.item>
|
||||
<flux:navlist.group expandable expanded="false" heading="Favorites" class="hidden lg:grid">
|
||||
<flux:navlist.item icon="user-group" :href="route('admin.users')" :current="request()->routeIs('admin.users')" wire:navigate>{{ __('Users') }}</flux:navlist.item>
|
||||
<flux:navlist.item icon="user-group" :href="route('admin.users.table')" :current="request()->routeIs('admin.users.table')" wire:navigate>{{ __('Users Table') }}</flux:navlist.item>
|
||||
</flux:navlist.group>
|
||||
</flux:navlist.group>
|
||||
|
||||
<flux:navlist.group :heading="__('CMS')" class="grid mb-4">
|
||||
<flux:navlist.item icon="home" :href="route('dashboard')" :current="request()->routeIs('dashboard')" wire:navigate>{{ __('Dashboard') }}</flux:navlist.item>
|
||||
</flux:navlist.group>
|
||||
|
||||
|
||||
<flux:navlist.group :heading="__('Superadmin')" class="grid mb-4">
|
||||
<flux:navlist.item icon="home" :href="route('dashboard')" :current="request()->routeIs('dashboard')" wire:navigate>{{ __('Dashboard') }}</flux:navlist.item>
|
||||
</flux:navlist.group>
|
||||
</flux:navlist>
|
||||
|
||||
<flux:spacer />
|
||||
|
||||
<flux:navlist variant="outline">
|
||||
<flux:navlist.group :heading="__('Resources')">
|
||||
<flux:navlist.item icon="pencil" href="https://tailwindcss.com/docs/installation/using-vite" target="_blank">
|
||||
{{ __('Tailwind CSS') }}
|
||||
</flux:navlist.item>
|
||||
<flux:navlist.item icon="shield-check" href="https://heroicons.com" target="_blank">
|
||||
{{ __('Hero Icons') }}
|
||||
</flux:navlist.item>
|
||||
<flux:navlist.item icon="bolt" href="https://fluxui.dev/docs/installation" target="_blank">
|
||||
{{ __('Flux UI') }}
|
||||
</flux:navlist.item>
|
||||
<flux:navlist.item icon="folder-git-2" href="https://github.com/laravel/livewire-starter-kit" target="_blank">
|
||||
{{ __('Repository') }}
|
||||
</flux:navlist.item>
|
||||
|
||||
<flux:navlist.item icon="book-open-text" href="https://laravel.com/docs/starter-kits" target="_blank">
|
||||
{{ __('Documentation') }}
|
||||
</flux:navlist.item>
|
||||
</flux:navlist.group>
|
||||
</flux:navlist>
|
||||
<!-- Desktop User Menu -->
|
||||
<flux:dropdown position="bottom" align="start">
|
||||
<flux:profile
|
||||
:name="auth()->user()->name"
|
||||
:initials="auth()->user()->initials()"
|
||||
icon-trailing="chevrons-up-down"
|
||||
/>
|
||||
|
||||
<flux:menu class="w-[220px]">
|
||||
<flux:menu.radio.group>
|
||||
<div class="p-0 text-sm font-normal">
|
||||
<div class="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
|
||||
<span class="relative flex h-8 w-8 shrink-0 overflow-hidden rounded-lg">
|
||||
<span
|
||||
class="flex h-full w-full items-center justify-center rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white"
|
||||
>
|
||||
{{ auth()->user()->initials() }}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<div class="grid flex-1 text-start text-sm leading-tight">
|
||||
<span class="truncate font-semibold">{{ auth()->user()->name }}</span>
|
||||
<span class="truncate text-xs">{{ auth()->user()->email }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</flux:menu.radio.group>
|
||||
|
||||
<flux:menu.separator />
|
||||
|
||||
<flux:menu.radio.group>
|
||||
<flux:menu.item :href="route('settings.profile')" icon="cog" wire:navigate>{{ __('Settings') }}</flux:menu.item>
|
||||
</flux:menu.radio.group>
|
||||
|
||||
<flux:menu.separator />
|
||||
|
||||
<form method="POST" action="{{ route('logout') }}" class="w-full">
|
||||
@csrf
|
||||
<flux:menu.item as="button" type="submit" icon="arrow-right-start-on-rectangle" class="w-full">
|
||||
{{ __('Log Out') }}
|
||||
</flux:menu.item>
|
||||
</form>
|
||||
</flux:menu>
|
||||
</flux:dropdown>
|
||||
</flux:sidebar>
|
||||
|
||||
<!-- Mobile User Menu -->
|
||||
<flux:header class="lg:hidden">
|
||||
<flux:sidebar.toggle class="lg:hidden" icon="bars-2" inset="left" />
|
||||
|
||||
<a href="{{ config('domains.domain_main_url') }}" class="me-5 ml-2 flex items-center space-x-2 rtl:space-x-reverse">
|
||||
<x-app-logo />
|
||||
</a>
|
||||
<flux:spacer />
|
||||
|
||||
<flux:dropdown position="top" align="end">
|
||||
<flux:profile
|
||||
:initials="auth()->user()->initials()"
|
||||
icon-trailing="chevron-down"
|
||||
/>
|
||||
|
||||
<flux:menu>
|
||||
<flux:menu.radio.group>
|
||||
<div class="p-0 text-sm font-normal">
|
||||
<div class="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
|
||||
<span class="relative flex h-8 w-8 shrink-0 overflow-hidden rounded-lg">
|
||||
<span
|
||||
class="flex h-full w-full items-center justify-center rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white"
|
||||
>
|
||||
{{ auth()->user()->initials() }}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<div class="grid flex-1 text-start text-sm leading-tight">
|
||||
<span class="truncate font-semibold">{{ auth()->user()->name }}</span>
|
||||
<span class="truncate text-xs">{{ auth()->user()->email }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</flux:menu.radio.group>
|
||||
|
||||
<flux:menu.separator />
|
||||
|
||||
<flux:menu.radio.group>
|
||||
<flux:menu.item :href="route('settings.profile')" icon="cog" wire:navigate>{{ __('Settings') }}</flux:menu.item>
|
||||
</flux:menu.radio.group>
|
||||
|
||||
<flux:menu.separator />
|
||||
|
||||
<form method="POST" action="{{ route('logout') }}" class="w-full">
|
||||
@csrf
|
||||
<flux:menu.item as="button" type="submit" icon="arrow-right-start-on-rectangle" class="w-full">
|
||||
{{ __('Log Out') }}
|
||||
</flux:menu.item>
|
||||
</form>
|
||||
</flux:menu>
|
||||
</flux:dropdown>
|
||||
</flux:header>
|
||||
|
||||
{{ $slot }}
|
||||
|
||||
@fluxScripts
|
||||
</body>
|
||||
</html>
|
||||
3
resources/views/components/layouts/auth.blade.php
Normal file
3
resources/views/components/layouts/auth.blade.php
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<x-layouts.auth.simple :title="$title ?? null">
|
||||
{{ $slot }}
|
||||
</x-layouts.auth.simple>
|
||||
26
resources/views/components/layouts/auth/card.blade.php
Normal file
26
resources/views/components/layouts/auth/card.blade.php
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
|
||||
<head>
|
||||
@include('partials.head')
|
||||
</head>
|
||||
<body class="min-h-screen bg-neutral-100 antialiased dark:bg-linear-to-b dark:from-neutral-950 dark:to-neutral-900">
|
||||
<div class="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
|
||||
<div class="flex w-full max-w-md flex-col gap-6">
|
||||
<a href="{{ route('home') }}" class="flex flex-col items-center gap-2 font-medium" wire:navigate>
|
||||
<span class="flex h-9 w-9 items-center justify-center rounded-md">
|
||||
<x-app-logo-icon class="size-9 fill-current text-black dark:text-white" />
|
||||
</span>
|
||||
|
||||
<span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
|
||||
</a>
|
||||
|
||||
<div class="flex flex-col gap-6">
|
||||
<div class="rounded-xl border bg-white dark:bg-stone-950 dark:border-stone-800 text-stone-800 shadow-xs">
|
||||
<div class="px-10 py-8">{{ $slot }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@fluxScripts
|
||||
</body>
|
||||
</html>
|
||||
35
resources/views/components/layouts/auth/simple.blade.php
Normal file
35
resources/views/components/layouts/auth/simple.blade.php
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
|
||||
<head>
|
||||
@include('partials.head')
|
||||
</head>
|
||||
<body class="min-h-screen bg-white antialiased dark:bg-linear-to-b dark:from-neutral-950 dark:to-neutral-900">
|
||||
<div class="bg-background flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
|
||||
<div class="flex w-full max-w-sm flex-col gap-2">
|
||||
<a href="{{ route('home') }}" class="flex flex-col items-center gap-2 font-medium" wire:navigate>
|
||||
<span class="flex h-9 w-9 mb-1 items-center justify-center rounded-md">
|
||||
<x-app-logo-icon class="size-9 fill-current text-black dark:text-white" />
|
||||
</span>
|
||||
<span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
|
||||
</a>
|
||||
<div class="flex flex-col gap-6">
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@livewireScripts
|
||||
@fluxScripts
|
||||
<script src="{{ asset('vendor/livewire/livewire.js') }}"></script>
|
||||
|
||||
<!-- Debug: Script-Status -->
|
||||
<script>
|
||||
console.log('Body Scripts geladen');
|
||||
console.log('Livewire JS:', {{ file_exists(public_path('vendor/livewire/livewire.js')) ? 'true' : 'false' }});
|
||||
if (typeof Livewire !== 'undefined') {
|
||||
console.log('Livewire verfügbar:', true);
|
||||
} else {
|
||||
console.log('Livewire verfügbar:', false);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
43
resources/views/components/layouts/auth/split.blade.php
Normal file
43
resources/views/components/layouts/auth/split.blade.php
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
|
||||
<head>
|
||||
@include('partials.head')
|
||||
</head>
|
||||
<body class="min-h-screen bg-white antialiased dark:bg-linear-to-b dark:from-neutral-950 dark:to-neutral-900">
|
||||
<div class="relative grid h-dvh flex-col items-center justify-center px-8 sm:px-0 lg:max-w-none lg:grid-cols-2 lg:px-0">
|
||||
<div class="bg-muted relative hidden h-full flex-col p-10 text-white lg:flex dark:border-e dark:border-neutral-800">
|
||||
<div class="absolute inset-0 bg-neutral-900"></div>
|
||||
<a href="{{ route('home') }}" class="relative z-20 flex items-center text-lg font-medium" wire:navigate>
|
||||
<span class="flex h-10 w-10 items-center justify-center rounded-md">
|
||||
<x-app-logo-icon class="me-2 h-7 fill-current text-white" />
|
||||
</span>
|
||||
{{ config('app.name', 'Laravel') }}
|
||||
</a>
|
||||
|
||||
@php
|
||||
[$message, $author] = str(Illuminate\Foundation\Inspiring::quotes()->random())->explode('-');
|
||||
@endphp
|
||||
|
||||
<div class="relative z-20 mt-auto">
|
||||
<blockquote class="space-y-2">
|
||||
<flux:heading size="lg">“{{ trim($message) }}”</flux:heading>
|
||||
<footer><flux:heading>{{ trim($author) }}</flux:heading></footer>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full lg:p-8">
|
||||
<div class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
|
||||
<a href="{{ route('home') }}" class="z-20 flex flex-col items-center gap-2 font-medium lg:hidden" wire:navigate>
|
||||
<span class="flex h-9 w-9 items-center justify-center rounded-md">
|
||||
<x-app-logo-icon class="size-9 fill-current text-black dark:text-white" />
|
||||
</span>
|
||||
|
||||
<span class="sr-only">{{ config('app.name', 'Laravel') }}</span>
|
||||
</a>
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@fluxScripts
|
||||
</body>
|
||||
</html>
|
||||
12
resources/views/components/placeholder-pattern.blade.php
Normal file
12
resources/views/components/placeholder-pattern.blade.php
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
@props([
|
||||
'id' => uniqid(),
|
||||
])
|
||||
|
||||
<svg {{ $attributes }} fill="none">
|
||||
<defs>
|
||||
<pattern id="pattern-{{ $id }}" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse">
|
||||
<path d="M-1 5L5 -1M3 9L8.5 3.5" stroke-width="0.5"></path>
|
||||
</pattern>
|
||||
</defs>
|
||||
<rect stroke="none" fill="url(#pattern-{{ $id }})" width="100%" height="100%"></rect>
|
||||
</svg>
|
||||
20
resources/views/components/settings/layout.blade.php
Normal file
20
resources/views/components/settings/layout.blade.php
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<div class="flex items-start max-md:flex-col">
|
||||
<div class="me-10 w-full pb-4 md:w-[220px]">
|
||||
<flux:navlist>
|
||||
<flux:navlist.item :href="route('settings.profile')" wire:navigate>{{ __('Profile') }}</flux:navlist.item>
|
||||
<flux:navlist.item :href="route('settings.password')" wire:navigate>{{ __('Password') }}</flux:navlist.item>
|
||||
<flux:navlist.item :href="route('settings.appearance')" wire:navigate>{{ __('Appearance') }}</flux:navlist.item>
|
||||
</flux:navlist>
|
||||
</div>
|
||||
|
||||
<flux:separator class="md:hidden" />
|
||||
|
||||
<div class="flex-1 self-stretch max-md:pt-6">
|
||||
<flux:heading>{{ $heading ?? '' }}</flux:heading>
|
||||
<flux:subheading>{{ $subheading ?? '' }}</flux:subheading>
|
||||
|
||||
<div class="mt-5 w-full max-w-lg">
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
118
resources/views/components/web/press-release-card.blade.php
Normal file
118
resources/views/components/web/press-release-card.blade.php
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
@props([
|
||||
'title',
|
||||
'teaser',
|
||||
'company',
|
||||
'industry',
|
||||
'region',
|
||||
'date',
|
||||
'hasImage' => false,
|
||||
'hasPdf' => false,
|
||||
'companyLogo' => null,
|
||||
'slug',
|
||||
'imageUrl' => null,
|
||||
])
|
||||
|
||||
<article class="group bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden transition-all duration-300 hover:shadow-lg hover:border-[var(--color-primary)]/20 hover:scale-[1.02] shadow-sm">
|
||||
<!-- Image Preview -->
|
||||
<div class="relative h-48 bg-gradient-to-br from-gray-100 to-gray-50 dark:from-gray-800 dark:to-gray-900 overflow-hidden">
|
||||
@if($imageUrl)
|
||||
<img
|
||||
src="{{ $imageUrl }}"
|
||||
alt="{{ $title }}"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
|
||||
loading="lazy"
|
||||
/>
|
||||
@else
|
||||
<div class="w-full h-full flex items-center justify-center bg-gradient-to-br from-[var(--color-primary)]/5 to-[var(--color-secondary)]/5">
|
||||
<svg class="h-16 w-16 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Company Logo Overlay -->
|
||||
@if($companyLogo)
|
||||
<div class="absolute bottom-3 left-3 w-12 h-12 rounded-lg bg-white/95 dark:bg-gray-800/95 backdrop-blur-sm shadow-md flex items-center justify-center border border-gray-200/50 dark:border-gray-700/50">
|
||||
<svg class="h-6 w-6 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
|
||||
</svg>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="p-5">
|
||||
<!-- Company Name -->
|
||||
@if(!$companyLogo)
|
||||
<div class="mb-3 flex items-center gap-2">
|
||||
<svg class="h-4 w-4 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
|
||||
</svg>
|
||||
<span class="text-sm font-medium text-gray-900 dark:text-gray-100">{{ $company }}</span>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- Title -->
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 line-clamp-2 mb-2 group-hover:text-[var(--color-primary)] transition-colors">
|
||||
{{ $title }}
|
||||
</h3>
|
||||
|
||||
<!-- Teaser -->
|
||||
<p class="text-[15px] leading-relaxed text-gray-600 dark:text-gray-400 line-clamp-3 mb-4">
|
||||
{{ $teaser }}
|
||||
</p>
|
||||
|
||||
<!-- Meta Info -->
|
||||
<div class="flex flex-wrap items-center gap-2 mb-4 text-xs text-gray-600 dark:text-gray-400">
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
|
||||
</svg>
|
||||
{{ $industry }}
|
||||
</span>
|
||||
<span>•</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
{{ $region }}
|
||||
</span>
|
||||
<span>•</span>
|
||||
<span class="flex items-center gap-1">
|
||||
<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
{{ $date }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Media Badges & CTA -->
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2">
|
||||
@if($hasImage)
|
||||
<span class="inline-flex items-center gap-1 text-xs rounded-full px-3 py-1 bg-[var(--color-primary)]/10 text-[var(--color-primary)] border border-[var(--color-primary)]/20">
|
||||
<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
Bild
|
||||
</span>
|
||||
@endif
|
||||
@if($hasPdf)
|
||||
<span class="inline-flex items-center gap-1 text-xs rounded-full px-3 py-1 bg-[var(--color-secondary)]/10 text-gray-700 border border-[var(--color-secondary)]/20">
|
||||
<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
PDF
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
<a
|
||||
href="/release/{{ $slug }}"
|
||||
class="text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-[var(--color-primary)] transition-colors group-hover:text-[var(--color-primary)]"
|
||||
>
|
||||
Lesen →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
116
resources/views/components/web/presseecho-release-card.blade.php
Normal file
116
resources/views/components/web/presseecho-release-card.blade.php
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
@props([
|
||||
'title',
|
||||
'teaser',
|
||||
'company',
|
||||
'industry',
|
||||
'region',
|
||||
'date',
|
||||
'contentType' => 'FACHMELDUNG', // ANALYSE, INTERVIEW, FACHMELDUNG
|
||||
'slug',
|
||||
'imageUrl' => null,
|
||||
])
|
||||
|
||||
<a href="/release/{{ $slug }}" class="group block">
|
||||
<article class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden transition-all duration-300 hover:shadow-xl hover:border-[var(--color-primary)]/30 shadow-sm h-full flex flex-col">
|
||||
|
||||
@if($imageUrl)
|
||||
<!-- Card mit Bild -->
|
||||
<!-- Image Preview -->
|
||||
<div class="relative h-52 bg-gradient-to-br from-gray-100 to-gray-50 dark:from-gray-800 dark:to-gray-900 overflow-hidden">
|
||||
<img
|
||||
src="{{ $imageUrl }}"
|
||||
alt="{{ $title }}"
|
||||
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
||||
loading="lazy"
|
||||
/>
|
||||
|
||||
<!-- Content Type Label - Positioned on Image -->
|
||||
<div class="absolute top-4 left-4">
|
||||
<span class="inline-block text-[10px] font-bold tracking-widest uppercase px-3 py-1.5
|
||||
@if($contentType === 'ANALYSE')
|
||||
bg-[var(--color-primary)] text-white
|
||||
@elseif($contentType === 'INTERVIEW')
|
||||
bg-[var(--color-secondary)] text-white
|
||||
@else
|
||||
bg-white/95 text-[var(--color-primary)] border border-[var(--color-primary)]/20
|
||||
@endif
|
||||
shadow-lg backdrop-blur-sm rounded">
|
||||
{{ $contentType }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content with increased padding -->
|
||||
<div class="p-7 flex flex-col flex-grow">
|
||||
<!-- Meta Info - More spacing -->
|
||||
<div class="flex items-center gap-3 mb-4 text-xs text-gray-500 dark:text-gray-500">
|
||||
<span class="font-medium text-gray-700 dark:text-gray-300">{{ $industry }}</span>
|
||||
<span class="text-gray-300 dark:text-gray-700">•</span>
|
||||
<time datetime="{{ $date }}" class="text-gray-600 dark:text-gray-400">{{ $date }}</time>
|
||||
</div>
|
||||
|
||||
<!-- Title - Larger, more space -->
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 line-clamp-2 mb-4 group-hover:text-[var(--color-primary)] transition-colors leading-tight">
|
||||
{{ $title }}
|
||||
</h3>
|
||||
|
||||
<!-- Teaser - More generous line-height -->
|
||||
<p class="text-[15px] leading-relaxed text-gray-600 dark:text-gray-400 line-clamp-3 mb-5 flex-grow">
|
||||
{{ $teaser }}
|
||||
</p>
|
||||
|
||||
<!-- Company at bottom -->
|
||||
<div class="flex items-center gap-2 pt-4 border-t border-gray-100 dark:border-gray-800">
|
||||
<svg class="h-4 w-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
|
||||
</svg>
|
||||
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ $company }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<!-- Card ohne Bild - Textbasiert mit farbigem Hintergrund -->
|
||||
<div class="relative bg-gradient-to-br from-[var(--color-primary)]/5 via-[var(--color-secondary)]/5 to-[var(--color-primary)]/10 dark:from-[var(--color-primary)]/10 dark:via-[var(--color-secondary)]/10 dark:to-[var(--color-primary)]/20 p-8 flex flex-col min-h-[400px]">
|
||||
|
||||
<!-- Content Type Label - Top -->
|
||||
<div class="mb-6">
|
||||
<span class="inline-block text-[10px] font-bold tracking-widest uppercase px-3 py-1.5
|
||||
@if($contentType === 'ANALYSE')
|
||||
bg-[var(--color-primary)] text-white
|
||||
@elseif($contentType === 'INTERVIEW')
|
||||
bg-[var(--color-secondary)] text-white
|
||||
@else
|
||||
bg-white text-[var(--color-primary)] border border-[var(--color-primary)]/20
|
||||
@endif
|
||||
shadow-sm rounded">
|
||||
{{ $contentType }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Meta Info -->
|
||||
<div class="flex items-center gap-3 mb-5 text-xs text-gray-500 dark:text-gray-400">
|
||||
<span class="font-medium text-gray-700 dark:text-gray-300">{{ $industry }}</span>
|
||||
<span class="text-gray-300 dark:text-gray-600">•</span>
|
||||
<time datetime="{{ $date }}" class="text-gray-600 dark:text-gray-400">{{ $date }}</time>
|
||||
</div>
|
||||
|
||||
<!-- Title - Prominenter ohne Bild -->
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-5 group-hover:text-[var(--color-primary)] transition-colors leading-tight">
|
||||
{{ $title }}
|
||||
</h3>
|
||||
|
||||
<!-- Teaser as Quote/Highlight - Mehr Zeilen ohne Bild -->
|
||||
<blockquote class="text-base leading-relaxed text-gray-700 dark:text-gray-300 line-clamp-5 mb-6 flex-grow italic border-l-4 border-[var(--color-primary)] pl-4">
|
||||
{{ $teaser }}
|
||||
</blockquote>
|
||||
|
||||
<!-- Company at bottom -->
|
||||
<div class="flex items-center gap-2 pt-5 border-t border-[var(--color-primary)]/10">
|
||||
<svg class="h-4 w-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
|
||||
</svg>
|
||||
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ $company }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
</article>
|
||||
</a>
|
||||
51
resources/views/flux/navlist/group.blade.php
Normal file
51
resources/views/flux/navlist/group.blade.php
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
@props([
|
||||
'expandable' => false,
|
||||
'expanded' => true,
|
||||
'heading' => null,
|
||||
])
|
||||
|
||||
<?php if ($expandable && $heading): ?>
|
||||
|
||||
<ui-disclosure
|
||||
{{ $attributes->class('group/disclosure') }}
|
||||
@if ($expanded === true) open @endif
|
||||
data-flux-navlist-group
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="group/disclosure-button mb-[2px] flex h-10 w-full items-center rounded-lg text-zinc-500 hover:bg-zinc-800/5 hover:text-zinc-800 lg:h-8 dark:text-white/80 dark:hover:bg-white/[7%] dark:hover:text-white"
|
||||
>
|
||||
<div class="ps-3 pe-4">
|
||||
<flux:icon.chevron-down class="hidden size-3! group-data-open/disclosure-button:block" />
|
||||
<flux:icon.chevron-right class="block size-3! group-data-open/disclosure-button:hidden" />
|
||||
</div>
|
||||
|
||||
<span class="text-sm font-medium leading-none">{{ $heading }}</span>
|
||||
</button>
|
||||
|
||||
<div class="relative hidden space-y-[2px] ps-7 data-open:block" @if ($expanded === true) data-open @endif>
|
||||
<div class="absolute inset-y-[3px] start-0 ms-4 w-px bg-zinc-200 dark:bg-white/30"></div>
|
||||
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</ui-disclosure>
|
||||
|
||||
<?php elseif ($heading): ?>
|
||||
|
||||
<div {{ $attributes->class('block space-y-[2px]') }}>
|
||||
<div class="px-1 py-2">
|
||||
<div class="text-xs leading-none text-zinc-400">{{ $heading }}</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{{ $slot }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?php else: ?>
|
||||
|
||||
<div {{ $attributes->class('block space-y-[2px]') }}>
|
||||
{{ $slot }}
|
||||
</div>
|
||||
|
||||
<?php endif; ?>
|
||||
171
resources/views/layouts/admin-master.blade.php
Normal file
171
resources/views/layouts/admin-master.blade.php
Normal file
|
|
@ -0,0 +1,171 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
|
||||
<title>@yield('title', $domainName ?? 'Admin - ' . config('app.name'))</title>
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" href="{{ asset('img/favicons/admin-favicon.ico') }}">
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.bunny.net">
|
||||
<link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600,700" rel="stylesheet" />
|
||||
|
||||
<!-- Styles -->
|
||||
@vite(['resources/css/portal.css', 'resources/js/app.js'])
|
||||
|
||||
<!-- Additional Styles -->
|
||||
@stack('styles')
|
||||
</head>
|
||||
|
||||
<body class="antialiased bg-gray-50 dark:bg-gray-900">
|
||||
<div class="min-h-screen flex">
|
||||
<!-- Sidebar Navigation -->
|
||||
<aside class="w-64 bg-white dark:bg-gray-800 shadow-md hidden md:block">
|
||||
<div class="p-6">
|
||||
<a href="{{ route('admin.home') }}" class="text-xl font-bold text-gray-900 dark:text-white">
|
||||
{{ $domainName ?? config('app.name') . ' Admin' }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<nav class="mt-10 px-6">
|
||||
<a href="{{ route('admin.dashboard') }}"
|
||||
class="block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-100 dark:hover:bg-gray-700 {{ request()->routeIs('admin.dashboard') ? 'bg-gray-100 dark:bg-gray-700' : '' }}">
|
||||
Dashboard
|
||||
</a>
|
||||
<a href="{{ route('admin.settings.profile') }}"
|
||||
class="block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-100 dark:hover:bg-gray-700 {{ request()->routeIs('admin.settings.profile') ? 'bg-gray-100 dark:bg-gray-700' : '' }}">
|
||||
Profil
|
||||
</a>
|
||||
<!-- Weitere Navigationspunkte hier -->
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<div class="flex-1 flex flex-col">
|
||||
<!-- Top Navigation -->
|
||||
<header class="bg-white dark:bg-gray-800 shadow-sm">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between h-16">
|
||||
<div class="flex items-center md:hidden">
|
||||
<!-- Mobile menu button -->
|
||||
<button type="button"
|
||||
class="text-gray-500 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
|
||||
id="mobile-menu-button">
|
||||
<span class="sr-only">Menu öffnen</span>
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
@if (app()->environment('local'))
|
||||
<!-- Domain-Informationsanzeige (nur in local) -->
|
||||
<div
|
||||
class="mr-4 text-xs px-2 py-1 rounded bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200">
|
||||
{{ Request::getHost() }}
|
||||
@if (config('domains.dev_settings.simulate_domain'))
|
||||
<span
|
||||
class="inline-flex items-center ml-1 px-1.5 py-0.5 rounded-full text-xs bg-yellow-100 text-yellow-800">
|
||||
Simuliert
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- User Dropdown -->
|
||||
<div class="ml-3 relative">
|
||||
<div>
|
||||
<button type="button"
|
||||
class="flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
||||
id="user-menu-button">
|
||||
<span class="sr-only">Benutzermenü öffnen</span>
|
||||
<div class="h-8 w-8 rounded-full bg-gray-200 flex items-center justify-center">
|
||||
<span class="text-xs font-medium">{{ Auth::user()->name[0] ?? 'U' }}</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Dropdown menu -->
|
||||
<div class="hidden origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white dark:bg-gray-700 ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
role="menu" id="user-menu">
|
||||
<a href="{{ route('admin.settings.profile') }}"
|
||||
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
|
||||
role="menuitem">Profil</a>
|
||||
<a href="{{ route('admin.settings.appearance') }}"
|
||||
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
|
||||
role="menuitem">Einstellungen</a>
|
||||
<form method="POST" action="{{ route('logout') }}">
|
||||
@csrf
|
||||
<button type="submit"
|
||||
class="block w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
|
||||
role="menuitem">Abmelden</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Mobile menu (off-canvas) -->
|
||||
<div class="md:hidden hidden" id="mobile-menu">
|
||||
<div class="px-2 pt-2 pb-3 space-y-1 bg-white dark:bg-gray-800 shadow-lg">
|
||||
<a href="{{ route('admin.dashboard') }}"
|
||||
class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Dashboard</a>
|
||||
<a href="{{ route('admin.settings.profile') }}"
|
||||
class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Profil</a>
|
||||
<!-- Weitere mobile Navigationspunkte hier -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Page Content -->
|
||||
<main class="flex-1 py-10">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
@yield('content')
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script>
|
||||
// Toggle user dropdown
|
||||
const userMenuButton = document.getElementById('user-menu-button');
|
||||
const userMenu = document.getElementById('user-menu');
|
||||
|
||||
if (userMenuButton && userMenu) {
|
||||
userMenuButton.addEventListener('click', function() {
|
||||
userMenu.classList.toggle('hidden');
|
||||
});
|
||||
|
||||
// Close the dropdown when clicked outside
|
||||
document.addEventListener('click', function(event) {
|
||||
if (!userMenuButton.contains(event.target) && !userMenu.contains(event.target)) {
|
||||
userMenu.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Mobile menu toggle
|
||||
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
|
||||
if (mobileMenuButton && mobileMenu) {
|
||||
mobileMenuButton.addEventListener('click', function() {
|
||||
mobileMenu.classList.toggle('hidden');
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Additional Scripts -->
|
||||
@stack('scripts')
|
||||
</body>
|
||||
|
||||
</html>
|
||||
186
resources/views/layouts/web-master.blade.php
Normal file
186
resources/views/layouts/web-master.blade.php
Normal file
|
|
@ -0,0 +1,186 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
|
||||
<title>@yield('title', $domainName ?? config('app.name', 'Laravel'))</title>
|
||||
|
||||
<!-- Domain-spezifisches Favicon -->
|
||||
<link rel="icon" href="{{ asset('img/favicons/' . $theme . '-favicon.ico') }}">
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.bunny.net">
|
||||
|
||||
@if ($theme === 'landing1')
|
||||
<link href="https://fonts.bunny.net/css?family=inter:400,500,600,700" rel="stylesheet" />
|
||||
@elseif($theme === 'landing2')
|
||||
<link href="https://fonts.bunny.net/css?family=poppins:400,500,600,700" rel="stylesheet" />
|
||||
@else
|
||||
<link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600,700" rel="stylesheet" />
|
||||
@endif
|
||||
|
||||
<!-- Dynamisches CSS basierend auf Domain-Konfiguration -->
|
||||
@if ($theme === 'landing1')
|
||||
@vite('resources/css/web/theme-landing1.css')
|
||||
@elseif($theme === 'landing2')
|
||||
@vite('resources/css/web/theme-landing2.css')
|
||||
@else
|
||||
@vite('resources/css/web/theme-main.css')
|
||||
@endif
|
||||
|
||||
@vite('resources/js/app.js')
|
||||
|
||||
<!-- Additional Styles -->
|
||||
@stack('styles')
|
||||
|
||||
<!-- Domain-spezifische Inline-Styles -->
|
||||
{{-- @if (isset($domainConfig['color_scheme']))
|
||||
<style>
|
||||
:root {
|
||||
@if (isset($domainConfig['color_scheme']['primary']))
|
||||
--primary-color: {{ $domainConfig['color_scheme']['primary'] }};
|
||||
@endif
|
||||
@if (isset($domainConfig['color_scheme']['accent']))
|
||||
--accent-color: {{ $domainConfig['color_scheme']['accent'] }};
|
||||
@endif
|
||||
}
|
||||
</style>
|
||||
@endif --}}
|
||||
</head>
|
||||
|
||||
<body class="antialiased">
|
||||
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col">
|
||||
<!-- Header -->
|
||||
<header class="bg-white dark:bg-gray-800 shadow">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between h-16">
|
||||
<div class="flex items-center">
|
||||
<a href="{{ url('/') }}" class="text-xl font-bold text-primary-800 dark:text-primary-200">
|
||||
{{ $domainName ?? config('app.name', 'Laravel') }}
|
||||
</a>
|
||||
|
||||
<nav class="ml-10 space-x-4">
|
||||
<a href="{{ url('/') }}"
|
||||
class="text-primary-600 hover:text-primary-900 dark:text-primary-300 dark:hover:text-primary-100">Home</a>
|
||||
<a href="{{ url('/welcome') }}"
|
||||
class="text-primary-600 hover:text-primary-900 dark:text-primary-300 dark:hover:text-primary-100">Welcome</a>
|
||||
<a href="https://pr-copilot.test"
|
||||
class="text-primary-600 hover:text-primary-900 dark:text-primary-300 dark:hover:text-primary-100">Portal</a>
|
||||
|
||||
<!-- Weitere Navigationspunkte hier -->
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<!-- Theme-Switcher -->
|
||||
<button id="theme-toggle" type="button"
|
||||
class="text-accent-600 dark:text-accent-400 hover:text-accent-800 dark:hover:text-accent-200 rounded-lg text-sm p-2.5">
|
||||
<svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor"
|
||||
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
|
||||
</svg>
|
||||
<svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor"
|
||||
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
|
||||
fill-rule="evenodd" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
@if (app()->environment('local'))
|
||||
<!-- Domain-Simulationsanzeige (nur in local) -->
|
||||
<div
|
||||
class="ml-4 text-xs px-2 py-1 rounded bg-accent-100 text-accent-800 dark:bg-accent-800 dark:text-accent-100">
|
||||
{{ $theme }} / {{ Request::getHost() }}
|
||||
@if (config('domains.dev_settings.simulate_domain'))
|
||||
<span
|
||||
class="inline-flex items-center ml-1 px-1.5 py-0.5 rounded-full text-xs bg-yellow-100 text-yellow-800">
|
||||
Simuliert
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Page Content -->
|
||||
<main class="flex-grow py-10">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
@yield('content')
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-white dark:bg-gray-800 shadow py-6">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between">
|
||||
<div>
|
||||
<p class="text-gray-500 dark:text-gray-400">
|
||||
© {{ date('Y') }} {{ $domainName ?? config('app.name', 'Laravel') }}. Alle Rechte
|
||||
vorbehalten.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<!-- Footer-Links -->
|
||||
<div class="flex space-x-4">
|
||||
<a href="#"
|
||||
class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">Impressum</a>
|
||||
<a href="#"
|
||||
class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300">Datenschutz</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<!-- Dark Mode Toggle Script -->
|
||||
<script>
|
||||
const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
|
||||
const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
|
||||
|
||||
// Set initial icon state
|
||||
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia(
|
||||
'(prefers-color-scheme: dark)').matches)) {
|
||||
themeToggleLightIcon.classList.remove('hidden');
|
||||
document.documentElement.classList.add('dark');
|
||||
} else {
|
||||
themeToggleDarkIcon.classList.remove('hidden');
|
||||
document.documentElement.classList.remove('dark');
|
||||
}
|
||||
|
||||
// Toggle theme
|
||||
document.getElementById('theme-toggle').addEventListener('click', function() {
|
||||
themeToggleDarkIcon.classList.toggle('hidden');
|
||||
themeToggleLightIcon.classList.toggle('hidden');
|
||||
|
||||
if (localStorage.getItem('color-theme')) {
|
||||
if (localStorage.getItem('color-theme') === 'light') {
|
||||
document.documentElement.classList.add('dark');
|
||||
localStorage.setItem('color-theme', 'dark');
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark');
|
||||
localStorage.setItem('color-theme', 'light');
|
||||
}
|
||||
} else {
|
||||
if (document.documentElement.classList.contains('dark')) {
|
||||
document.documentElement.classList.remove('dark');
|
||||
localStorage.setItem('color-theme', 'light');
|
||||
} else {
|
||||
document.documentElement.classList.add('dark');
|
||||
localStorage.setItem('color-theme', 'dark');
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Additional Scripts -->
|
||||
@stack('scripts')
|
||||
</body>
|
||||
|
||||
</html>
|
||||
189
resources/views/livewire/admin/users.blade.php
Normal file
189
resources/views/livewire/admin/users.blade.php
Normal file
|
|
@ -0,0 +1,189 @@
|
|||
<?php
|
||||
|
||||
use App\Models\User;
|
||||
use Illuminate\Support\Facades\Auth;
|
||||
use Livewire\Volt\Component;
|
||||
use Livewire\WithPagination; // Wichtig für Paginierung
|
||||
|
||||
|
||||
new class extends Component {
|
||||
use WithPagination;
|
||||
|
||||
// Optional: Such- und Filter-Properties
|
||||
public string $search = '';
|
||||
public string $statusFilter = '';
|
||||
public string $roleFilter = '';
|
||||
|
||||
// Optional: Sortierung
|
||||
public string $sortField = 'name';
|
||||
public string $sortDirection = 'asc';
|
||||
|
||||
|
||||
/**
|
||||
* Mount the component.
|
||||
*/
|
||||
public function mount(): void
|
||||
{
|
||||
// Standardwerte für Sortierung setzen
|
||||
$this->sortField = 'name';
|
||||
$this->sortDirection = 'asc';
|
||||
}
|
||||
|
||||
public function sortBy(string $field): void
|
||||
{
|
||||
if ($this->sortField === $field) {
|
||||
$this->sortDirection = $this->sortDirection === 'asc' ? 'desc' : 'asc';
|
||||
} else {
|
||||
$this->sortDirection = 'asc';
|
||||
}
|
||||
$this->sortField = $field;
|
||||
}
|
||||
|
||||
// Die Hauptmethode, um Daten zu laden
|
||||
public function users()
|
||||
{
|
||||
return User::query()
|
||||
->when($this->search, fn($query, $search) =>
|
||||
$query->where('name', 'like', '%' . $search . '%')
|
||||
->orWhere('email', 'like', '%' . $search . '%')
|
||||
)
|
||||
->when($this->statusFilter, fn($query, $status) =>
|
||||
$query->where('status', $status)
|
||||
)
|
||||
->when($this->roleFilter, fn($query, $role) =>
|
||||
$query->where('role', $role) // oder 'role_id' wenn du IDs verwendest
|
||||
)
|
||||
->orderBy($this->sortField, $this->sortDirection)
|
||||
->paginate(10); // 10 Einträge pro Seite
|
||||
}
|
||||
|
||||
// Optional: Lifecycle hook für das Zurücksetzen der Paginierung bei Suche/Filterung
|
||||
public function updatedSearch() { $this->resetPage(); }
|
||||
public function updatedStatusFilter() { $this->resetPage(); }
|
||||
public function updatedRoleFilter() { $this->resetPage(); }
|
||||
|
||||
// Wird für die Paginierung mit Tailwind benötigt (Standard in Livewire 3)
|
||||
// Wenn FluxUI Bootstrap-basierte Paginierung braucht, musst du das anpassen
|
||||
// public function paginationView()
|
||||
// {
|
||||
// return 'vendor.livewire.tailwind'; // oder 'livewire::bootstrap'
|
||||
// }
|
||||
|
||||
// Wenn du mit Relationen arbeitest (z.B. user->role->name)
|
||||
// public function with(): array
|
||||
// {
|
||||
// return [
|
||||
// 'users' => User::with(['role', 'group']) // Eager loading
|
||||
// // ... deine Query-Logik von oben ...
|
||||
// ->paginate(10),
|
||||
// ];
|
||||
// }
|
||||
}; ?>
|
||||
|
||||
<div>
|
||||
{{-- Filter und Suchleiste (Beispiel, FluxUI Klassen anpassen) --}}
|
||||
<div class="mb-4 grid grid-cols-1 md:grid-cols-3 gap-4 p-4 bg-gray-100 rounded">
|
||||
<div>
|
||||
<label for="search" class="block text-sm font-medium text-gray-700">Suche</label>
|
||||
<input wire:model.live.debounce.300ms="search" id="search" type="text" placeholder="Name oder E-Mail..."
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
|
||||
</div>
|
||||
<div>
|
||||
<label for="statusFilter" class="block text-sm font-medium text-gray-700">Status</label>
|
||||
<select wire:model.live="statusFilter" id="statusFilter"
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
|
||||
<option value="">Alle</option>
|
||||
<option value="active">Aktiv</option>
|
||||
<option value="inactive">Inaktiv</option>
|
||||
<option value="pending">Ausstehend</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label for="roleFilter" class="block text-sm font-medium text-gray-700">Rolle</label>
|
||||
<input wire:model.live.debounce.300ms="roleFilter" id="roleFilter" type="text" placeholder="Rolle..."
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Tabelle (FluxUI Klassen anpassen!) --}}
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200 shadow">
|
||||
<thead class="bg-gray-50"> {{-- FluxUI Klasse für Thead --}}
|
||||
<tr>
|
||||
<th scope="col" wire:click="sortBy('name')"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer">
|
||||
Name @if($sortField === 'name')<span>{{ $sortDirection === 'asc' ? '▲' : '▼' }}</span>@endif
|
||||
</th>
|
||||
<th scope="col" wire:click="sortBy('email')"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer">
|
||||
E-Mail @if($sortField === 'email')<span>{{ $sortDirection === 'asc' ? '▲' : '▼' }}</span>@endif
|
||||
</th>
|
||||
<th scope="col" wire:click="sortBy('status')"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer">
|
||||
Status @if($sortField === 'status')<span>{{ $sortDirection === 'asc' ? '▲' : '▼' }}</span>@endif
|
||||
</th>
|
||||
<th scope="col" wire:click="sortBy('role')"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer">
|
||||
Rolle @if($sortField === 'role')<span>{{ $sortDirection === 'asc' ? '▲' : '▼' }}</span>@endif
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||
Gruppe
|
||||
</th>
|
||||
<th scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-medium text-gray-700 uppercase tracking-wider">
|
||||
Rechte
|
||||
</th>
|
||||
<th scope="col" class="relative px-6 py-3">
|
||||
<span class="sr-only">Aktionen</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200"> {{-- FluxUI Klasse für Tbody --}}
|
||||
@forelse ($this->users() as $user)
|
||||
<tr wire:key="{{ $user->id }}">
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ $user->name }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ $user->email }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm">
|
||||
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full
|
||||
{{ $user->status === 'active' ? 'bg-green-100 text-green-800' : ($user->status === 'inactive' ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800') }}">
|
||||
{{ ucfirst($user->status) }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{{ $user->role }} {{-- Oder $user->role->name, wenn es eine Relation ist --}}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{{ $user->group }} {{-- Oder $user->group->name --}}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{{-- Darstellung der Rechte. Wenn es eine Many-to-Many Relation ist: --}}
|
||||
{{-- @foreach($user->permissions as $permission)
|
||||
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
|
||||
{{ $permission->name }}
|
||||
</span>
|
||||
@endforeach --}}
|
||||
{{-- Oder wenn es ein JSON-Feld ist, musst du es parsen und anzeigen --}}
|
||||
Einfache Rechte-Anzeige (Todo)
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<a href="#" class="text-indigo-600 hover:text-indigo-900">Bearbeiten</a> {{-- FluxUI Button-Klassen --}}
|
||||
<button wire:click="$dispatch('openModal', { component: 'admin.delete-user-modal', arguments: { userId: {{ $user->id }} }})"
|
||||
class="text-red-600 hover:text-red-900 ml-2">Löschen</button> {{-- FluxUI Button-Klassen --}}
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td colspan="7" class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center">
|
||||
Keine Benutzer gefunden.
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
{{ $this->users()->links() }} {{-- Stellt sicher, dass die Paginierungs-Views für dein UI-Kit konfiguriert sind --}}
|
||||
</div>
|
||||
</div>
|
||||
144
resources/views/livewire/admin/users/table.blade.php
Normal file
144
resources/views/livewire/admin/users/table.blade.php
Normal file
|
|
@ -0,0 +1,144 @@
|
|||
<?php
|
||||
|
||||
use App\Models\User;
|
||||
use Livewire\Volt\Component;
|
||||
use Livewire\WithPagination; // Wichtig für Paginierung
|
||||
|
||||
|
||||
new class extends Component {
|
||||
use WithPagination;
|
||||
|
||||
// Optional: Such- und Filter-Properties
|
||||
public string $search = '';
|
||||
public string $statusFilter = '';
|
||||
public string $roleFilter = '';
|
||||
|
||||
// Optional: Sortierung
|
||||
public $sortBy = 'name';
|
||||
public $sortDirection = 'asc';
|
||||
|
||||
|
||||
/**
|
||||
* Mount the component.
|
||||
*/
|
||||
public function mount(): void
|
||||
{
|
||||
// Standardwerte für Sortierung setzen
|
||||
$this->sortBy = 'name';
|
||||
$this->sortDirection = 'asc';
|
||||
}
|
||||
|
||||
|
||||
public function sort($column) {
|
||||
if ($this->sortBy === $column) {
|
||||
$this->sortDirection = $this->sortDirection === 'asc' ? 'desc' : 'asc';
|
||||
} else {
|
||||
$this->sortBy = $column;
|
||||
$this->sortDirection = 'asc';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*public function orders()
|
||||
{
|
||||
return \App\Models\Order::query()
|
||||
->tap(fn ($query) => $this->sortBy ? $query->orderBy($this->sortBy, $this->sortDirection) : $query)
|
||||
->paginate(5);
|
||||
}*/
|
||||
|
||||
|
||||
|
||||
// Die Hauptmethode, um Daten zu laden
|
||||
#[\Livewire\Attributes\Computed]
|
||||
public function users()
|
||||
{
|
||||
return User::query()
|
||||
->when($this->search, fn($query, $search) =>
|
||||
$query->where('name', 'like', '%' . $search . '%')
|
||||
->orWhere('email', 'like', '%' . $search . '%')
|
||||
)
|
||||
->when($this->statusFilter, fn($query, $status) =>
|
||||
$query->where('status', $status)
|
||||
)
|
||||
->when($this->roleFilter, fn($query, $role) =>
|
||||
$query->where('role', $role) // oder 'role_id' wenn du IDs verwendest
|
||||
)
|
||||
->orderBy($this->sortBy, $this->sortDirection)
|
||||
->paginate(10); // 10 Einträge pro Seite
|
||||
}
|
||||
|
||||
// Optional: Lifecycle hook für das Zurücksetzen der Paginierung bei Suche/Filterung
|
||||
public function updatedSearch() { $this->resetPage(); }
|
||||
public function updatedStatusFilter() { $this->resetPage(); }
|
||||
public function updatedRoleFilter() { $this->resetPage(); }
|
||||
|
||||
// Wird für die Paginierung mit Tailwind benötigt (Standard in Livewire 3)
|
||||
// Wenn FluxUI Bootstrap-basierte Paginierung braucht, musst du das anpassen
|
||||
// public function paginationView()
|
||||
// {
|
||||
// return 'vendor.livewire.tailwind'; // oder 'livewire::bootstrap'
|
||||
// }
|
||||
|
||||
// Wenn du mit Relationen arbeitest (z.B. user->role->name)
|
||||
// public function with(): array
|
||||
// {
|
||||
// return [
|
||||
// 'users' => User::with(['role', 'group']) // Eager loading
|
||||
// // ... deine Query-Logik von oben ...
|
||||
// ->paginate(10),
|
||||
// ];
|
||||
// }
|
||||
}; ?>
|
||||
<flux:table :paginate="$this->users">
|
||||
<flux:table.columns>
|
||||
<flux:table.column>Customer</flux:table.column>
|
||||
<flux:table.column sortable :sorted="$sortBy === 'date'" :direction="$sortDirection" wire:click="sort('date')">Date</flux:table.column>
|
||||
<flux:table.column sortable :sorted="$sortBy === 'status'" :direction="$sortDirection" wire:click="sort('status')">Status</flux:table.column>
|
||||
<flux:table.column sortable :sorted="$sortBy === 'amount'" :direction="$sortDirection" wire:click="sort('amount')">Amount</flux:table.column>
|
||||
</flux:table.columns>
|
||||
|
||||
<flux:table.rows>
|
||||
@foreach ($this->users as $user)
|
||||
<flux:table.row :key="$user->id">
|
||||
<flux:table.cell class="flex items-center gap-3">
|
||||
<flux:avatar size="xs" src="{{ $user->avatar }}" />
|
||||
|
||||
{{ $user->name }}
|
||||
</flux:table.cell>
|
||||
|
||||
<flux:table.cell class="whitespace-nowrap">{{ $user->email }}</flux:table.cell>
|
||||
|
||||
<flux:table.cell>
|
||||
<flux:badge size="sm" color="lime" inset="top bottom">RTest</flux:badge>
|
||||
</flux:table.cell>
|
||||
|
||||
<flux:table.cell variant="strong">{{ $user->role }}</flux:table.cell>
|
||||
|
||||
<flux:table.cell>
|
||||
<flux:dropdown>
|
||||
<flux:button variant="ghost" size="sm" icon="ellipsis-horizontal" inset="top bottom"></flux:button>
|
||||
<flux:menu>
|
||||
<flux:menu.item icon="plus">New post</flux:menu.item>
|
||||
<flux:menu.separator />
|
||||
<flux:menu.submenu heading="Sort by">
|
||||
<flux:menu.radio.group>
|
||||
<flux:menu.radio checked>Name</flux:menu.radio>
|
||||
<flux:menu.radio>Date</flux:menu.radio>
|
||||
<flux:menu.radio>Popularity</flux:menu.radio>
|
||||
</flux:menu.radio.group>
|
||||
</flux:menu.submenu>
|
||||
<flux:menu.submenu heading="Filter">
|
||||
<flux:menu.checkbox checked>Draft</flux:menu.checkbox>
|
||||
<flux:menu.checkbox checked>Published</flux:menu.checkbox>
|
||||
<flux:menu.checkbox>Archived</flux:menu.checkbox>
|
||||
</flux:menu.submenu>
|
||||
<flux:menu.separator />
|
||||
<flux:menu.item variant="danger" icon="trash">Delete</flux:menu.item>
|
||||
</flux:menu>
|
||||
</flux:dropdown>
|
||||
</flux:table.cell>
|
||||
</flux:table.row>
|
||||
@endforeach
|
||||
</flux:table.rows>
|
||||
</flux:table>
|
||||
|
||||
57
resources/views/livewire/auth/confirm-password.blade.php
Normal file
57
resources/views/livewire/auth/confirm-password.blade.php
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<?php
|
||||
|
||||
use Illuminate\Support\Facades\Auth;
|
||||
use Illuminate\Validation\ValidationException;
|
||||
use Livewire\Attributes\Layout;
|
||||
use Livewire\Volt\Component;
|
||||
|
||||
new #[Layout('components.layouts.auth')] class extends Component {
|
||||
public string $password = '';
|
||||
|
||||
/**
|
||||
* Confirm the current user's password.
|
||||
*/
|
||||
public function confirmPassword(): void
|
||||
{
|
||||
$this->validate([
|
||||
'password' => ['required', 'string'],
|
||||
]);
|
||||
|
||||
if (! Auth::guard('web')->validate([
|
||||
'email' => Auth::user()->email,
|
||||
'password' => $this->password,
|
||||
])) {
|
||||
throw ValidationException::withMessages([
|
||||
'password' => __('auth.password'),
|
||||
]);
|
||||
}
|
||||
|
||||
session(['auth.password_confirmed_at' => time()]);
|
||||
|
||||
$this->redirectIntended(default: route('dashboard', absolute: false), navigate: true);
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<div class="flex flex-col gap-6">
|
||||
<x-auth-header
|
||||
:title="__('Confirm password')"
|
||||
:description="__('This is a secure area of the application. Please confirm your password before continuing.')"
|
||||
/>
|
||||
|
||||
<!-- Session Status -->
|
||||
<x-auth-session-status class="text-center" :status="session('status')" />
|
||||
|
||||
<form wire:submit="confirmPassword" class="flex flex-col gap-6">
|
||||
<!-- Password -->
|
||||
<flux:input
|
||||
wire:model="password"
|
||||
:label="__('Password')"
|
||||
type="password"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
:placeholder="__('Password')"
|
||||
/>
|
||||
|
||||
<flux:button variant="primary" type="submit" class="w-full">{{ __('Confirm') }}</flux:button>
|
||||
</form>
|
||||
</div>
|
||||
49
resources/views/livewire/auth/forgot-password.blade.php
Normal file
49
resources/views/livewire/auth/forgot-password.blade.php
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
<?php
|
||||
|
||||
use Illuminate\Support\Facades\Password;
|
||||
use Livewire\Attributes\Layout;
|
||||
use Livewire\Volt\Component;
|
||||
|
||||
new #[Layout('components.layouts.auth')] class extends Component {
|
||||
public string $email = '';
|
||||
|
||||
/**
|
||||
* Send a password reset link to the provided email address.
|
||||
*/
|
||||
public function sendPasswordResetLink(): void
|
||||
{
|
||||
$this->validate([
|
||||
'email' => ['required', 'string', 'email'],
|
||||
]);
|
||||
|
||||
Password::sendResetLink($this->only('email'));
|
||||
|
||||
session()->flash('status', __('A reset link will be sent if the account exists.'));
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<div class="flex flex-col gap-6">
|
||||
<x-auth-header :title="__('Forgot password')" :description="__('Enter your email to receive a password reset link')" />
|
||||
|
||||
<!-- Session Status -->
|
||||
<x-auth-session-status class="text-center" :status="session('status')" />
|
||||
|
||||
<form wire:submit="sendPasswordResetLink" class="flex flex-col gap-6">
|
||||
<!-- Email Address -->
|
||||
<flux:input
|
||||
wire:model="email"
|
||||
:label="__('Email Address')"
|
||||
type="email"
|
||||
required
|
||||
autofocus
|
||||
placeholder="email@example.com"
|
||||
/>
|
||||
|
||||
<flux:button variant="primary" type="submit" class="w-full">{{ __('Email password reset link') }}</flux:button>
|
||||
</form>
|
||||
|
||||
<div class="space-x-1 text-center text-sm text-zinc-400">
|
||||
{{ __('Or, return to') }}
|
||||
<flux:link :href="route('login')" wire:navigate>{{ __('log in') }}</flux:link>
|
||||
</div>
|
||||
</div>
|
||||
153
resources/views/livewire/auth/login-simple.blade.php
Normal file
153
resources/views/livewire/auth/login-simple.blade.php
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
<?php
|
||||
|
||||
use Illuminate\Auth\Events\Lockout;
|
||||
use Illuminate\Support\Facades\Auth;
|
||||
use Illuminate\Support\Facades\RateLimiter;
|
||||
use Illuminate\Support\Facades\Route;
|
||||
use Illuminate\Support\Facades\Session;
|
||||
use Illuminate\Support\Str;
|
||||
use Illuminate\Validation\ValidationException;
|
||||
use Livewire\Attributes\Layout;
|
||||
use Livewire\Attributes\Validate;
|
||||
use Livewire\Volt\Component;
|
||||
|
||||
new #[Layout('components.layouts.auth')] class extends Component {
|
||||
#[Validate('required|string|email')]
|
||||
public string $email = '';
|
||||
|
||||
#[Validate('required|string')]
|
||||
public string $password = '';
|
||||
|
||||
public bool $remember = false;
|
||||
|
||||
/**
|
||||
* Handle an incoming authentication request.
|
||||
*/
|
||||
public function login(): void
|
||||
{
|
||||
$this->validate();
|
||||
|
||||
$this->ensureIsNotRateLimited();
|
||||
|
||||
if (! Auth::attempt(['email' => $this->email, 'password' => $this->password], $this->remember)) {
|
||||
RateLimiter::hit($this->throttleKey());
|
||||
|
||||
throw ValidationException::withMessages([
|
||||
'email' => __('auth.failed'),
|
||||
]);
|
||||
}
|
||||
|
||||
RateLimiter::clear($this->throttleKey());
|
||||
Session::regenerate();
|
||||
|
||||
$this->redirectIntended(default: route('dashboard', absolute: false), navigate: true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Ensure the authentication request is not rate limited.
|
||||
*/
|
||||
protected function ensureIsNotRateLimited(): void
|
||||
{
|
||||
if (! RateLimiter::tooManyAttempts($this->throttleKey(), 5)) {
|
||||
return;
|
||||
}
|
||||
|
||||
event(new Lockout(request()));
|
||||
|
||||
$seconds = RateLimiter::availableIn($this->throttleKey());
|
||||
|
||||
throw ValidationException::withMessages([
|
||||
'email' => __('auth.throttle', [
|
||||
'seconds' => $seconds,
|
||||
'minutes' => ceil($seconds / 60),
|
||||
]),
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the authentication rate limiting throttle key.
|
||||
*/
|
||||
protected function throttleKey(): string
|
||||
{
|
||||
return Str::transliterate(Str::lower($this->email).'|'.request()->ip());
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<div class="flex flex-col gap-6 p-8 bg-white rounded-lg shadow-lg">
|
||||
<div class="text-center">
|
||||
<h1 class="text-2xl font-bold text-gray-900">Log in to your account</h1>
|
||||
<p class="text-gray-600 mt-2">Enter your email and password below to log in</p>
|
||||
</div>
|
||||
|
||||
<!-- Session Status -->
|
||||
@if (session('status'))
|
||||
<div class="text-center text-sm text-green-600">
|
||||
{{ session('status') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<form wire:submit="login" class="flex flex-col gap-6">
|
||||
<!-- Email Address -->
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-medium text-gray-700">Email address</label>
|
||||
<input
|
||||
wire:model="email"
|
||||
id="email"
|
||||
type="email"
|
||||
required
|
||||
autofocus
|
||||
autocomplete="email"
|
||||
placeholder="email@example.com"
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
@error('email')
|
||||
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<!-- Password -->
|
||||
<div class="relative">
|
||||
<label for="password" class="block text-sm font-medium text-gray-700">Password</label>
|
||||
<input
|
||||
wire:model="password"
|
||||
id="password"
|
||||
type="password"
|
||||
required
|
||||
autocomplete="current-password"
|
||||
placeholder="Password"
|
||||
class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
|
||||
/>
|
||||
@error('password')
|
||||
<p class="mt-1 text-sm text-red-600">{{ $message }}</p>
|
||||
@enderror
|
||||
|
||||
@if (Route::has('password.request'))
|
||||
<a href="{{ route('password.request') }}" class="absolute right-0 top-0 text-sm text-blue-600 hover:text-blue-500">
|
||||
Forgot your password?
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Remember Me -->
|
||||
<div class="flex items-center">
|
||||
<input
|
||||
wire:model="remember"
|
||||
id="remember"
|
||||
type="checkbox"
|
||||
class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"
|
||||
/>
|
||||
<label for="remember" class="ml-2 block text-sm text-gray-900">Remember me</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
|
||||
Log in
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@if (Route::has('register'))
|
||||
<div class="text-center text-sm text-gray-600">
|
||||
Don't have an account?
|
||||
<a href="{{ route('register') }}" class="text-blue-600 hover:text-blue-500">Sign up</a>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
126
resources/views/livewire/auth/login.blade.php
Normal file
126
resources/views/livewire/auth/login.blade.php
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
<?php
|
||||
|
||||
use Illuminate\Auth\Events\Lockout;
|
||||
use Illuminate\Support\Facades\Auth;
|
||||
use Illuminate\Support\Facades\RateLimiter;
|
||||
use Illuminate\Support\Facades\Route;
|
||||
use Illuminate\Support\Facades\Session;
|
||||
use Illuminate\Support\Str;
|
||||
use Illuminate\Validation\ValidationException;
|
||||
use Livewire\Attributes\Layout;
|
||||
use Livewire\Attributes\Validate;
|
||||
use Livewire\Volt\Component;
|
||||
|
||||
new #[Layout('components.layouts.auth')] class extends Component {
|
||||
#[Validate('required|string|email')]
|
||||
public string $email = '';
|
||||
|
||||
#[Validate('required|string')]
|
||||
public string $password = '';
|
||||
|
||||
public bool $remember = false;
|
||||
|
||||
/**
|
||||
* Handle an incoming authentication request.
|
||||
*/
|
||||
public function login(): void
|
||||
{
|
||||
$this->validate();
|
||||
|
||||
$this->ensureIsNotRateLimited();
|
||||
|
||||
if (! Auth::attempt(['email' => $this->email, 'password' => $this->password], $this->remember)) {
|
||||
RateLimiter::hit($this->throttleKey());
|
||||
|
||||
throw ValidationException::withMessages([
|
||||
'email' => __('auth.failed'),
|
||||
]);
|
||||
}
|
||||
|
||||
RateLimiter::clear($this->throttleKey());
|
||||
Session::regenerate();
|
||||
|
||||
$this->redirectIntended(default: route('dashboard', absolute: false), navigate: true);
|
||||
}
|
||||
|
||||
/**
|
||||
* Ensure the authentication request is not rate limited.
|
||||
*/
|
||||
protected function ensureIsNotRateLimited(): void
|
||||
{
|
||||
if (! RateLimiter::tooManyAttempts($this->throttleKey(), 5)) {
|
||||
return;
|
||||
}
|
||||
|
||||
event(new Lockout(request()));
|
||||
|
||||
$seconds = RateLimiter::availableIn($this->throttleKey());
|
||||
|
||||
throw ValidationException::withMessages([
|
||||
'email' => __('auth.throttle', [
|
||||
'seconds' => $seconds,
|
||||
'minutes' => ceil($seconds / 60),
|
||||
]),
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the authentication rate limiting throttle key.
|
||||
*/
|
||||
protected function throttleKey(): string
|
||||
{
|
||||
return Str::transliterate(Str::lower($this->email).'|'.request()->ip());
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<div class="flex flex-col gap-6">
|
||||
<x-auth-header :title="__('Log in to your account')" :description="__('Enter your email and password below to log in')" />
|
||||
|
||||
<!-- Session Status -->
|
||||
<x-auth-session-status class="text-center" :status="session('status')" />
|
||||
|
||||
<form wire:submit="login" class="flex flex-col gap-6">
|
||||
<!-- Email Address -->
|
||||
<flux:input
|
||||
wire:model="email"
|
||||
:label="__('Email address')"
|
||||
type="email"
|
||||
required
|
||||
autofocus
|
||||
autocomplete="email"
|
||||
placeholder="email@example.com"
|
||||
/>
|
||||
|
||||
<!-- Password -->
|
||||
<div class="relative">
|
||||
<flux:input
|
||||
wire:model="password"
|
||||
:label="__('Password')"
|
||||
type="password"
|
||||
required
|
||||
autocomplete="current-password"
|
||||
:placeholder="__('Password')"
|
||||
/>
|
||||
|
||||
@if (Route::has('password.request'))
|
||||
<flux:link class="absolute right-0 top-0 text-sm" :href="route('password.request')" wire:navigate>
|
||||
{{ __('Forgot your password?') }}
|
||||
</flux:link>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Remember Me -->
|
||||
<flux:checkbox wire:model="remember" :label="__('Remember me')" />
|
||||
|
||||
<div class="flex items-center justify-end">
|
||||
<flux:button variant="primary" type="submit" class="w-full">{{ __('Log in') }}</flux:button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@if (Route::has('register'))
|
||||
<div class="space-x-1 text-center text-sm text-zinc-600 dark:text-zinc-400">
|
||||
{{ __('Don\'t have an account?') }}
|
||||
<flux:link :href="route('register')" wire:navigate>{{ __('Sign up') }}</flux:link>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
97
resources/views/livewire/auth/register.blade.php
Normal file
97
resources/views/livewire/auth/register.blade.php
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
<?php
|
||||
|
||||
use App\Models\User;
|
||||
use Illuminate\Auth\Events\Registered;
|
||||
use Illuminate\Support\Facades\Auth;
|
||||
use Illuminate\Support\Facades\Hash;
|
||||
use Illuminate\Validation\Rules;
|
||||
use Livewire\Attributes\Layout;
|
||||
use Livewire\Volt\Component;
|
||||
|
||||
new #[Layout('components.layouts.auth')] class extends Component {
|
||||
public string $name = '';
|
||||
public string $email = '';
|
||||
public string $password = '';
|
||||
public string $password_confirmation = '';
|
||||
|
||||
/**
|
||||
* Handle an incoming registration request.
|
||||
*/
|
||||
public function register(): void
|
||||
{
|
||||
$validated = $this->validate([
|
||||
'name' => ['required', 'string', 'max:255'],
|
||||
'email' => ['required', 'string', 'lowercase', 'email', 'max:255', 'unique:' . User::class],
|
||||
'password' => ['required', 'string', 'confirmed', Rules\Password::defaults()],
|
||||
]);
|
||||
|
||||
$validated['password'] = Hash::make($validated['password']);
|
||||
|
||||
event(new Registered(($user = User::create($validated))));
|
||||
|
||||
Auth::login($user);
|
||||
|
||||
$this->redirectIntended(route('dashboard', absolute: false), navigate: true);
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<div class="flex flex-col gap-6">
|
||||
<x-auth-header :title="__('Create an account')" :description="__('Enter your details below to create your account')" />
|
||||
|
||||
<!-- Session Status -->
|
||||
<x-auth-session-status class="text-center" :status="session('status')" />
|
||||
|
||||
<form wire:submit="register" class="flex flex-col gap-6">
|
||||
<!-- Name -->
|
||||
<flux:input
|
||||
wire:model="name"
|
||||
:label="__('Name')"
|
||||
type="text"
|
||||
required
|
||||
autofocus
|
||||
autocomplete="name"
|
||||
:placeholder="__('Full name')"
|
||||
/>
|
||||
|
||||
<!-- Email Address -->
|
||||
<flux:input
|
||||
wire:model="email"
|
||||
:label="__('Email address')"
|
||||
type="email"
|
||||
required
|
||||
autocomplete="email"
|
||||
placeholder="email@example.com"
|
||||
/>
|
||||
|
||||
<!-- Password -->
|
||||
<flux:input
|
||||
wire:model="password"
|
||||
:label="__('Password')"
|
||||
type="password"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
:placeholder="__('Password')"
|
||||
/>
|
||||
|
||||
<!-- Confirm Password -->
|
||||
<flux:input
|
||||
wire:model="password_confirmation"
|
||||
:label="__('Confirm password')"
|
||||
type="password"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
:placeholder="__('Confirm password')"
|
||||
/>
|
||||
|
||||
<div class="flex items-center justify-end">
|
||||
<flux:button type="submit" variant="primary" class="w-full">
|
||||
{{ __('Create account') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div class="space-x-1 text-center text-sm text-zinc-600 dark:text-zinc-400">
|
||||
{{ __('Already have an account?') }}
|
||||
<flux:link :href="route('login')" wire:navigate>{{ __('Log in') }}</flux:link>
|
||||
</div>
|
||||
</div>
|
||||
113
resources/views/livewire/auth/reset-password.blade.php
Normal file
113
resources/views/livewire/auth/reset-password.blade.php
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
<?php
|
||||
|
||||
use Illuminate\Auth\Events\PasswordReset;
|
||||
use Illuminate\Support\Facades\Hash;
|
||||
use Illuminate\Support\Facades\Password;
|
||||
use Illuminate\Support\Facades\Session;
|
||||
use Illuminate\Support\Str;
|
||||
use Illuminate\Validation\Rules;
|
||||
use Livewire\Attributes\Layout;
|
||||
use Livewire\Attributes\Locked;
|
||||
use Livewire\Volt\Component;
|
||||
|
||||
new #[Layout('components.layouts.auth')] class extends Component {
|
||||
#[Locked]
|
||||
public string $token = '';
|
||||
public string $email = '';
|
||||
public string $password = '';
|
||||
public string $password_confirmation = '';
|
||||
|
||||
/**
|
||||
* Mount the component.
|
||||
*/
|
||||
public function mount(string $token): void
|
||||
{
|
||||
$this->token = $token;
|
||||
|
||||
$this->email = request()->string('email');
|
||||
}
|
||||
|
||||
/**
|
||||
* Reset the password for the given user.
|
||||
*/
|
||||
public function resetPassword(): void
|
||||
{
|
||||
$this->validate([
|
||||
'token' => ['required'],
|
||||
'email' => ['required', 'string', 'email'],
|
||||
'password' => ['required', 'string', 'confirmed', Rules\Password::defaults()],
|
||||
]);
|
||||
|
||||
// Here we will attempt to reset the user's password. If it is successful we
|
||||
// will update the password on an actual user model and persist it to the
|
||||
// database. Otherwise we will parse the error and return the response.
|
||||
$status = Password::reset(
|
||||
$this->only('email', 'password', 'password_confirmation', 'token'),
|
||||
function ($user) {
|
||||
$user->forceFill([
|
||||
'password' => Hash::make($this->password),
|
||||
'remember_token' => Str::random(60),
|
||||
])->save();
|
||||
|
||||
event(new PasswordReset($user));
|
||||
}
|
||||
);
|
||||
|
||||
// If the password was successfully reset, we will redirect the user back to
|
||||
// the application's home authenticated view. If there is an error we can
|
||||
// redirect them back to where they came from with their error message.
|
||||
if ($status != Password::PasswordReset) {
|
||||
$this->addError('email', __($status));
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
Session::flash('status', __($status));
|
||||
|
||||
$this->redirectRoute('login', navigate: true);
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<div class="flex flex-col gap-6">
|
||||
<x-auth-header :title="__('Reset password')" :description="__('Please enter your new password below')" />
|
||||
|
||||
<!-- Session Status -->
|
||||
<x-auth-session-status class="text-center" :status="session('status')" />
|
||||
|
||||
<form wire:submit="resetPassword" class="flex flex-col gap-6">
|
||||
<!-- Email Address -->
|
||||
<flux:input
|
||||
wire:model="email"
|
||||
:label="__('Email')"
|
||||
type="email"
|
||||
required
|
||||
autocomplete="email"
|
||||
/>
|
||||
|
||||
<!-- Password -->
|
||||
<flux:input
|
||||
wire:model="password"
|
||||
:label="__('Password')"
|
||||
type="password"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
:placeholder="__('Password')"
|
||||
/>
|
||||
|
||||
<!-- Confirm Password -->
|
||||
<flux:input
|
||||
wire:model="password_confirmation"
|
||||
:label="__('Confirm password')"
|
||||
type="password"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
:placeholder="__('Confirm password')"
|
||||
/>
|
||||
|
||||
<div class="flex items-center justify-end">
|
||||
<flux:button type="submit" variant="primary" class="w-full">
|
||||
{{ __('Reset password') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
57
resources/views/livewire/auth/verify-email.blade.php
Normal file
57
resources/views/livewire/auth/verify-email.blade.php
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<?php
|
||||
|
||||
use App\Livewire\Actions\Logout;
|
||||
use Illuminate\Support\Facades\Auth;
|
||||
use Illuminate\Support\Facades\Session;
|
||||
use Livewire\Attributes\Layout;
|
||||
use Livewire\Volt\Component;
|
||||
|
||||
new #[Layout('components.layouts.auth')] class extends Component {
|
||||
/**
|
||||
* Send an email verification notification to the user.
|
||||
*/
|
||||
public function sendVerification(): void
|
||||
{
|
||||
if (Auth::user()->hasVerifiedEmail()) {
|
||||
$this->redirectIntended(default: route('dashboard', absolute: false), navigate: true);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
Auth::user()->sendEmailVerificationNotification();
|
||||
|
||||
Session::flash('status', 'verification-link-sent');
|
||||
}
|
||||
|
||||
/**
|
||||
* Log the current user out of the application.
|
||||
*/
|
||||
public function logout(Logout $logout): void
|
||||
{
|
||||
$logout();
|
||||
|
||||
$this->redirect('/', navigate: true);
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<div class="mt-4 flex flex-col gap-6">
|
||||
<flux:text class="text-center">
|
||||
{{ __('Please verify your email address by clicking on the link we just emailed to you.') }}
|
||||
</flux:text>
|
||||
|
||||
@if (session('status') == 'verification-link-sent')
|
||||
<flux:text class="text-center font-medium !dark:text-green-400 !text-green-600">
|
||||
{{ __('A new verification link has been sent to the email address you provided during registration.') }}
|
||||
</flux:text>
|
||||
@endif
|
||||
|
||||
<div class="flex flex-col items-center justify-between space-y-3">
|
||||
<flux:button wire:click="sendVerification" variant="primary" class="w-full">
|
||||
{{ __('Resend verification email') }}
|
||||
</flux:button>
|
||||
|
||||
<flux:link class="text-sm cursor-pointer" wire:click="logout">
|
||||
{{ __('Log out') }}
|
||||
</flux:link>
|
||||
</div>
|
||||
</div>
|
||||
11
resources/views/livewire/notifications.blade.php
Normal file
11
resources/views/livewire/notifications.blade.php
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<?php
|
||||
|
||||
use Livewire\Volt\Component;
|
||||
|
||||
new class extends Component {
|
||||
public bool $notifications = false;
|
||||
}; ?>
|
||||
|
||||
<div>
|
||||
<flux:switch wire:model.live="notifications" label="Enable notifications" />
|
||||
</div>
|
||||
19
resources/views/livewire/settings/appearance.blade.php
Normal file
19
resources/views/livewire/settings/appearance.blade.php
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<?php
|
||||
|
||||
use Livewire\Volt\Component;
|
||||
|
||||
new class extends Component {
|
||||
//
|
||||
}; ?>
|
||||
|
||||
<section class="w-full">
|
||||
@include('partials.settings-heading')
|
||||
|
||||
<x-settings.layout :heading="__('Appearance')" :subheading=" __('Update the appearance settings for your account')">
|
||||
<flux:radio.group x-data variant="segmented" x-model="$flux.appearance">
|
||||
<flux:radio value="light" icon="sun">{{ __('Light') }}</flux:radio>
|
||||
<flux:radio value="dark" icon="moon">{{ __('Dark') }}</flux:radio>
|
||||
<flux:radio value="system" icon="computer-desktop">{{ __('System') }}</flux:radio>
|
||||
</flux:radio.group>
|
||||
</x-settings.layout>
|
||||
</section>
|
||||
58
resources/views/livewire/settings/delete-user-form.blade.php
Normal file
58
resources/views/livewire/settings/delete-user-form.blade.php
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
<?php
|
||||
|
||||
use App\Livewire\Actions\Logout;
|
||||
use Illuminate\Support\Facades\Auth;
|
||||
use Livewire\Volt\Component;
|
||||
|
||||
new class extends Component {
|
||||
public string $password = '';
|
||||
|
||||
/**
|
||||
* Delete the currently authenticated user.
|
||||
*/
|
||||
public function deleteUser(Logout $logout): void
|
||||
{
|
||||
$this->validate([
|
||||
'password' => ['required', 'string', 'current_password'],
|
||||
]);
|
||||
|
||||
tap(Auth::user(), $logout(...))->delete();
|
||||
|
||||
$this->redirect('/', navigate: true);
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<section class="mt-10 space-y-6">
|
||||
<div class="relative mb-5">
|
||||
<flux:heading>{{ __('Delete account') }}</flux:heading>
|
||||
<flux:subheading>{{ __('Delete your account and all of its resources') }}</flux:subheading>
|
||||
</div>
|
||||
|
||||
<flux:modal.trigger name="confirm-user-deletion">
|
||||
<flux:button variant="danger" x-data="" x-on:click.prevent="$dispatch('open-modal', 'confirm-user-deletion')">
|
||||
{{ __('Delete account') }}
|
||||
</flux:button>
|
||||
</flux:modal.trigger>
|
||||
|
||||
<flux:modal name="confirm-user-deletion" :show="$errors->isNotEmpty()" focusable class="max-w-lg">
|
||||
<form wire:submit="deleteUser" class="space-y-6">
|
||||
<div>
|
||||
<flux:heading size="lg">{{ __('Are you sure you want to delete your account?') }}</flux:heading>
|
||||
|
||||
<flux:subheading>
|
||||
{{ __('Once your account is deleted, all of its resources and data will be permanently deleted. Please enter your password to confirm you would like to permanently delete your account.') }}
|
||||
</flux:subheading>
|
||||
</div>
|
||||
|
||||
<flux:input wire:model="password" :label="__('Password')" type="password" />
|
||||
|
||||
<div class="flex justify-end space-x-2 rtl:space-x-reverse">
|
||||
<flux:modal.close>
|
||||
<flux:button variant="filled">{{ __('Cancel') }}</flux:button>
|
||||
</flux:modal.close>
|
||||
|
||||
<flux:button variant="danger" type="submit">{{ __('Delete account') }}</flux:button>
|
||||
</div>
|
||||
</form>
|
||||
</flux:modal>
|
||||
</section>
|
||||
78
resources/views/livewire/settings/password.blade.php
Normal file
78
resources/views/livewire/settings/password.blade.php
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
<?php
|
||||
|
||||
use Illuminate\Support\Facades\Auth;
|
||||
use Illuminate\Support\Facades\Hash;
|
||||
use Illuminate\Validation\Rules\Password;
|
||||
use Illuminate\Validation\ValidationException;
|
||||
use Livewire\Volt\Component;
|
||||
|
||||
new class extends Component {
|
||||
public string $current_password = '';
|
||||
public string $password = '';
|
||||
public string $password_confirmation = '';
|
||||
|
||||
/**
|
||||
* Update the password for the currently authenticated user.
|
||||
*/
|
||||
public function updatePassword(): void
|
||||
{
|
||||
try {
|
||||
$validated = $this->validate([
|
||||
'current_password' => ['required', 'string', 'current_password'],
|
||||
'password' => ['required', 'string', Password::defaults(), 'confirmed'],
|
||||
]);
|
||||
} catch (ValidationException $e) {
|
||||
$this->reset('current_password', 'password', 'password_confirmation');
|
||||
|
||||
throw $e;
|
||||
}
|
||||
|
||||
Auth::user()->update([
|
||||
'password' => Hash::make($validated['password']),
|
||||
]);
|
||||
|
||||
$this->reset('current_password', 'password', 'password_confirmation');
|
||||
|
||||
$this->dispatch('password-updated');
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<section class="w-full">
|
||||
@include('partials.settings-heading')
|
||||
|
||||
<x-settings.layout :heading="__('Update password')" :subheading="__('Ensure your account is using a long, random password to stay secure')">
|
||||
<form wire:submit="updatePassword" class="mt-6 space-y-6">
|
||||
<flux:input
|
||||
wire:model="current_password"
|
||||
:label="__('Current password')"
|
||||
type="password"
|
||||
required
|
||||
autocomplete="current-password"
|
||||
/>
|
||||
<flux:input
|
||||
wire:model="password"
|
||||
:label="__('New password')"
|
||||
type="password"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
<flux:input
|
||||
wire:model="password_confirmation"
|
||||
:label="__('Confirm Password')"
|
||||
type="password"
|
||||
required
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center justify-end">
|
||||
<flux:button variant="primary" type="submit" class="w-full">{{ __('Save') }}</flux:button>
|
||||
</div>
|
||||
|
||||
<x-action-message class="me-3" on="password-updated">
|
||||
{{ __('Saved.') }}
|
||||
</x-action-message>
|
||||
</div>
|
||||
</form>
|
||||
</x-settings.layout>
|
||||
</section>
|
||||
114
resources/views/livewire/settings/profile.blade.php
Normal file
114
resources/views/livewire/settings/profile.blade.php
Normal file
|
|
@ -0,0 +1,114 @@
|
|||
<?php
|
||||
|
||||
use App\Models\User;
|
||||
use Illuminate\Support\Facades\Auth;
|
||||
use Illuminate\Support\Facades\Session;
|
||||
use Illuminate\Validation\Rule;
|
||||
use Livewire\Volt\Component;
|
||||
|
||||
new class extends Component {
|
||||
public string $name = '';
|
||||
public string $email = '';
|
||||
|
||||
/**
|
||||
* Mount the component.
|
||||
*/
|
||||
public function mount(): void
|
||||
{
|
||||
$this->name = Auth::user()->name;
|
||||
$this->email = Auth::user()->email;
|
||||
}
|
||||
|
||||
/**
|
||||
* Update the profile information for the currently authenticated user.
|
||||
*/
|
||||
public function updateProfileInformation(): void
|
||||
{
|
||||
$user = Auth::user();
|
||||
|
||||
$validated = $this->validate([
|
||||
'name' => ['required', 'string', 'max:255'],
|
||||
|
||||
'email' => [
|
||||
'required',
|
||||
'string',
|
||||
'lowercase',
|
||||
'email',
|
||||
'max:255',
|
||||
Rule::unique(User::class)->ignore($user->id)
|
||||
],
|
||||
]);
|
||||
|
||||
$user->fill($validated);
|
||||
|
||||
if ($user->isDirty('email')) {
|
||||
$user->email_verified_at = null;
|
||||
}
|
||||
|
||||
$user->save();
|
||||
|
||||
$this->dispatch('profile-updated', name: $user->name);
|
||||
}
|
||||
|
||||
/**
|
||||
* Send an email verification notification to the current user.
|
||||
*/
|
||||
public function resendVerificationNotification(): void
|
||||
{
|
||||
$user = Auth::user();
|
||||
|
||||
if ($user->hasVerifiedEmail()) {
|
||||
$this->redirectIntended(default: route('dashboard', absolute: false));
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
$user->sendEmailVerificationNotification();
|
||||
|
||||
Session::flash('status', 'verification-link-sent');
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<section class="w-full">
|
||||
@include('partials.settings-heading')
|
||||
|
||||
<x-settings.layout :heading="__('Profile')" :subheading="__('Update your name and email address')">
|
||||
<form wire:submit="updateProfileInformation" class="my-6 w-full space-y-6">
|
||||
<flux:input wire:model="name" :label="__('Name')" type="text" required autofocus autocomplete="name" />
|
||||
|
||||
<div>
|
||||
<flux:input wire:model="email" :label="__('Email')" type="email" required autocomplete="email" />
|
||||
|
||||
@if (auth()->user() instanceof \Illuminate\Contracts\Auth\MustVerifyEmail &&! auth()->user()->hasVerifiedEmail())
|
||||
<div>
|
||||
<flux:text class="mt-4">
|
||||
{{ __('Your email address is unverified.') }}
|
||||
|
||||
<flux:link class="text-sm cursor-pointer" wire:click.prevent="resendVerificationNotification">
|
||||
{{ __('Click here to re-send the verification email.') }}
|
||||
</flux:link>
|
||||
</flux:text>
|
||||
|
||||
@if (session('status') === 'verification-link-sent')
|
||||
<flux:text class="mt-2 font-medium !dark:text-green-400 !text-green-600">
|
||||
{{ __('A new verification link has been sent to your email address.') }}
|
||||
</flux:text>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center justify-end">
|
||||
<flux:button variant="primary" type="submit" class="w-full">{{ __('Save') }}</flux:button>
|
||||
</div>
|
||||
|
||||
<x-action-message class="me-3" on="profile-updated">
|
||||
{{ __('Saved.') }}
|
||||
</x-action-message>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<livewire:settings.delete-user-form />
|
||||
</x-settings.layout>
|
||||
</section>
|
||||
290
resources/views/livewire/web/burger-menu.blade.php
Normal file
290
resources/views/livewire/web/burger-menu.blade.php
Normal file
|
|
@ -0,0 +1,290 @@
|
|||
<?php
|
||||
|
||||
use Livewire\Volt\Component;
|
||||
|
||||
new class extends Component {
|
||||
public $isOpen = false;
|
||||
public $openSections = [];
|
||||
|
||||
public function toggleMenu()
|
||||
{
|
||||
$this->isOpen = !$this->isOpen;
|
||||
}
|
||||
|
||||
public function toggleSection($section)
|
||||
{
|
||||
if (in_array($section, $this->openSections)) {
|
||||
$this->openSections = array_diff($this->openSections, [$section]);
|
||||
} else {
|
||||
$this->openSections[] = $section;
|
||||
}
|
||||
}
|
||||
|
||||
public function isSectionOpen($section)
|
||||
{
|
||||
return in_array($section, $this->openSections);
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<div
|
||||
x-data="{ isOpen: $wire.entangle('isOpen') }"
|
||||
@toggle-mobile-menu.window="$wire.toggleMenu()"
|
||||
>
|
||||
<!-- Overlay -->
|
||||
<div
|
||||
x-show="isOpen"
|
||||
x-transition:enter="transition ease-out duration-300"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="transition ease-in duration-200"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"
|
||||
@click="$wire.toggleMenu()"
|
||||
class="fixed inset-0 bg-black/50 backdrop-blur-sm z-[60]"
|
||||
x-cloak
|
||||
></div>
|
||||
|
||||
<!-- Slide-out Menu -->
|
||||
<div
|
||||
x-show="isOpen"
|
||||
x-transition:enter="transition ease-out duration-300 transform"
|
||||
x-transition:enter-start="-translate-x-full"
|
||||
x-transition:enter-end="translate-x-0"
|
||||
x-transition:leave="transition ease-in duration-200 transform"
|
||||
x-transition:leave-start="translate-x-0"
|
||||
x-transition:leave-end="-translate-x-full"
|
||||
class="fixed left-0 top-0 h-full w-80 sm:w-96 bg-white dark:bg-gray-900 shadow-2xl z-[70] overflow-y-auto transition-colors duration-200"
|
||||
x-cloak
|
||||
>
|
||||
<!-- Header -->
|
||||
<div class="sticky top-0 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 p-4 flex items-center justify-between transition-colors duration-200">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-1 h-6 bg-gradient-to-b from-[var(--color-primary)] to-[var(--color-secondary)] rounded-full"></span>
|
||||
<h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Navigation</h2>
|
||||
</div>
|
||||
<button
|
||||
@click="$wire.toggleMenu()"
|
||||
class="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
|
||||
aria-label="Menü schließen"
|
||||
>
|
||||
<svg class="h-6 w-6 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="p-6 space-y-6">
|
||||
<!-- Portal Section -->
|
||||
<div>
|
||||
<div class="py-2 text-sm font-semibold text-gray-900 dark:text-gray-100">Portal</div>
|
||||
<div class="space-y-1">
|
||||
<a href="/" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
||||
Startseite
|
||||
</a>
|
||||
<a href="/kategorien" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
||||
Kategorien
|
||||
</a>
|
||||
<a href="/suche" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
||||
Suche
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Services Section -->
|
||||
<div>
|
||||
<button
|
||||
wire:click="toggleSection('services')"
|
||||
class="flex items-center justify-between w-full py-2 text-sm font-semibold text-gray-900 dark:text-gray-100 hover:text-[var(--color-primary)] transition-colors"
|
||||
>
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="h-4 w-4" 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>
|
||||
Services
|
||||
</span>
|
||||
<svg
|
||||
class="h-4 w-4 transition-transform {{ $this->isSectionOpen('services') ? 'rotate-180' : '' }}"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
@if($this->isSectionOpen('services'))
|
||||
<div class="mt-2 space-y-1 pl-6">
|
||||
<a href="/veroeffentlichen" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
||||
Pressemitteilung veröffentlichen
|
||||
</a>
|
||||
<a href="/newsrooms" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
||||
Newsrooms
|
||||
</a>
|
||||
<a href="/preise" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
||||
Preise & Leistungen
|
||||
</a>
|
||||
<a href="/api" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
||||
API & Integrationen
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Über uns Section -->
|
||||
<div>
|
||||
<button
|
||||
wire:click="toggleSection('about')"
|
||||
class="flex items-center justify-between w-full py-2 text-sm font-semibold text-gray-900 dark:text-gray-100 hover:text-[var(--color-primary)] transition-colors"
|
||||
>
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
|
||||
</svg>
|
||||
Über uns
|
||||
</span>
|
||||
<svg
|
||||
class="h-4 w-4 transition-transform {{ $this->isSectionOpen('about') ? 'rotate-180' : '' }}"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
@if($this->isSectionOpen('about'))
|
||||
<div class="mt-2 space-y-1 pl-6">
|
||||
<a href="/ueber-uns" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
||||
Über Business Portal
|
||||
</a>
|
||||
<a href="/team" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
||||
Team
|
||||
</a>
|
||||
<a href="/partner" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
||||
Partner
|
||||
</a>
|
||||
<a href="/karriere" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
||||
Karriere
|
||||
</a>
|
||||
<a href="/presse" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
||||
Presse
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Hilfe & Support Section -->
|
||||
<div>
|
||||
<button
|
||||
wire:click="toggleSection('support')"
|
||||
class="flex items-center justify-between w-full py-2 text-sm font-semibold text-gray-900 dark:text-gray-100 hover:text-[var(--color-primary)] transition-colors"
|
||||
>
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
|
||||
</svg>
|
||||
Hilfe & Support
|
||||
</span>
|
||||
<svg
|
||||
class="h-4 w-4 transition-transform {{ $this->isSectionOpen('support') ? 'rotate-180' : '' }}"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
@if($this->isSectionOpen('support'))
|
||||
<div class="mt-2 space-y-1 pl-6">
|
||||
<a href="/faq" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
||||
FAQ
|
||||
</a>
|
||||
<a href="/hilfe" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
||||
Hilfe-Center
|
||||
</a>
|
||||
<a href="/kontakt" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
||||
Kontakt
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Rechtliches Section -->
|
||||
<div>
|
||||
<button
|
||||
wire:click="toggleSection('legal')"
|
||||
class="flex items-center justify-between w-full py-2 text-sm font-semibold text-gray-900 dark:text-gray-100 hover:text-[var(--color-primary)] transition-colors"
|
||||
>
|
||||
<span class="flex items-center gap-2">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
|
||||
</svg>
|
||||
Rechtliches
|
||||
</span>
|
||||
<svg
|
||||
class="h-4 w-4 transition-transform {{ $this->isSectionOpen('legal') ? 'rotate-180' : '' }}"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
@if($this->isSectionOpen('legal'))
|
||||
<div class="mt-2 space-y-1 pl-6">
|
||||
<a href="/impressum" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
||||
Impressum
|
||||
</a>
|
||||
<a href="/datenschutz" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
||||
Datenschutz
|
||||
</a>
|
||||
<a href="/agb" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
||||
AGB
|
||||
</a>
|
||||
<a href="/cookies" class="block py-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:translate-x-1 transition-all">
|
||||
Cookie-Richtlinien
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Footer Actions -->
|
||||
<div class="sticky bottom-0 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800 p-6 space-y-3 transition-colors duration-200">
|
||||
<a
|
||||
href="/veroeffentlichen"
|
||||
class="block w-full text-center px-4 py-3 text-sm font-medium text-white bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] hover:from-[var(--color-primary)]/90 hover:to-[var(--color-secondary)]/90 rounded-lg shadow-md hover:shadow-lg transition-all"
|
||||
>
|
||||
Pressemitteilung veröffentlichen
|
||||
</a>
|
||||
<div class="flex gap-2">
|
||||
<a
|
||||
href="/login"
|
||||
class="flex-1 text-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition-all"
|
||||
>
|
||||
Anmelden
|
||||
</a>
|
||||
<a
|
||||
href="/register"
|
||||
class="flex-1 text-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition-all"
|
||||
>
|
||||
Registrieren
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Info -->
|
||||
<div class="px-6 pb-6">
|
||||
<div class="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg transition-colors duration-200">
|
||||
<div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-2">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
<span>Kontakt</span>
|
||||
</div>
|
||||
<a href="mailto:info@businessportal.de" class="text-sm text-gray-900 dark:text-gray-100 hover:text-[var(--color-primary)] transition-colors">
|
||||
info@businessportal.de
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
101
resources/views/livewire/web/featured-releases.blade.php
Normal file
101
resources/views/livewire/web/featured-releases.blade.php
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
<?php
|
||||
|
||||
use Livewire\Volt\Component;
|
||||
|
||||
new class extends Component {
|
||||
public function with(): array
|
||||
{
|
||||
// Mock-Daten für Featured Releases
|
||||
return [
|
||||
'releases' => [
|
||||
[
|
||||
'slug' => 'ki-revolution-deutsche-unternehmen',
|
||||
'title' => 'KI-Revolution: Deutsche Unternehmen investieren Milliarden in Automatisierung',
|
||||
'teaser' => 'Eine neue Studie zeigt: Unternehmen im DACH-Raum planen für 2025 Investitionen in Höhe von über 15 Milliarden Euro in KI-gestützte Automatisierungslösungen.',
|
||||
'company' => 'TechVision Analytics',
|
||||
'industry' => 'IT & Software',
|
||||
'region' => 'Deutschland',
|
||||
'date' => 'Heute, 14:30',
|
||||
'hasImage' => true,
|
||||
'hasPdf' => true,
|
||||
'imageUrl' => 'https://images.unsplash.com/photo-1677442136019-21780ecad995?w=800&h=600&fit=crop',
|
||||
'companyLogo' => 'logo',
|
||||
],
|
||||
[
|
||||
'slug' => 'energiewende-beschleunigt',
|
||||
'title' => 'Energiewende beschleunigt sich: Neue Rekorde bei erneuerbaren Energien',
|
||||
'teaser' => 'Im ersten Quartal 2025 erreicht der Anteil erneuerbarer Energien am Strommix einen historischen Höchststand von 58%. Experten sprechen von einem Wendepunkt.',
|
||||
'company' => 'GreenPower Deutschland',
|
||||
'industry' => 'Energie',
|
||||
'region' => 'Deutschland',
|
||||
'date' => 'Heute, 11:15',
|
||||
'hasImage' => true,
|
||||
'imageUrl' => 'https://images.unsplash.com/photo-1466611653911-95081537e5b7?w=800&h=600&fit=crop',
|
||||
],
|
||||
[
|
||||
'slug' => 'fintech-startup-series-b',
|
||||
'title' => 'FinTech-Startup sichert sich 45 Millionen Euro in Series-B-Runde',
|
||||
'teaser' => 'Das Berliner FinTech-Startup PaymentFlow konnte in einer Series-B-Finanzierungsrunde 45 Millionen Euro einsammeln.',
|
||||
'company' => 'PaymentFlow GmbH',
|
||||
'industry' => 'Finanzen',
|
||||
'region' => 'Berlin',
|
||||
'date' => 'Gestern, 16:45',
|
||||
'hasPdf' => true,
|
||||
'imageUrl' => 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&h=600&fit=crop',
|
||||
],
|
||||
]
|
||||
];
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<div>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<!-- Large Featured Card - Takes 2 columns -->
|
||||
<div class="lg:col-span-2">
|
||||
<x-web.press-release-card
|
||||
:title="$releases[0]['title']"
|
||||
:teaser="$releases[0]['teaser']"
|
||||
:company="$releases[0]['company']"
|
||||
:industry="$releases[0]['industry']"
|
||||
:region="$releases[0]['region']"
|
||||
:date="$releases[0]['date']"
|
||||
:hasImage="$releases[0]['hasImage']"
|
||||
:hasPdf="$releases[0]['hasPdf']"
|
||||
:slug="$releases[0]['slug']"
|
||||
:imageUrl="$releases[0]['imageUrl']"
|
||||
:companyLogo="$releases[0]['companyLogo']"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Two Smaller Featured Cards - Stack in right column -->
|
||||
<div class="flex flex-col gap-6">
|
||||
<x-web.press-release-card
|
||||
:title="$releases[1]['title']"
|
||||
:teaser="$releases[1]['teaser']"
|
||||
:company="$releases[1]['company']"
|
||||
:industry="$releases[1]['industry']"
|
||||
:region="$releases[1]['region']"
|
||||
:date="$releases[1]['date']"
|
||||
:hasImage="$releases[1]['hasImage']"
|
||||
:hasPdf="$releases[1]['hasPdf'] ?? false"
|
||||
:slug="$releases[1]['slug']"
|
||||
:imageUrl="$releases[1]['imageUrl']"
|
||||
:companyLogo="null"
|
||||
/>
|
||||
|
||||
<x-web.press-release-card
|
||||
:title="$releases[2]['title']"
|
||||
:teaser="$releases[2]['teaser']"
|
||||
:company="$releases[2]['company']"
|
||||
:industry="$releases[2]['industry']"
|
||||
:region="$releases[2]['region']"
|
||||
:date="$releases[2]['date']"
|
||||
:hasImage="$releases[2]['hasImage'] ?? false"
|
||||
:hasPdf="$releases[2]['hasPdf']"
|
||||
:slug="$releases[2]['slug']"
|
||||
:imageUrl="$releases[2]['imageUrl']"
|
||||
:companyLogo="null"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
204
resources/views/livewire/web/filter-bar.blade.php
Normal file
204
resources/views/livewire/web/filter-bar.blade.php
Normal file
|
|
@ -0,0 +1,204 @@
|
|||
<?php
|
||||
|
||||
use Livewire\Volt\Component;
|
||||
|
||||
new class extends Component {
|
||||
public $timeframe = '7';
|
||||
public $industry = 'all';
|
||||
public $region = 'all';
|
||||
public $sortBy = 'newest';
|
||||
public $activeFilters = [];
|
||||
|
||||
public function mount()
|
||||
{
|
||||
$this->updateActiveFilters();
|
||||
}
|
||||
|
||||
public function updated($property)
|
||||
{
|
||||
$this->updateActiveFilters();
|
||||
$this->dispatch('filters-updated', [
|
||||
'timeframe' => $this->timeframe,
|
||||
'industry' => $this->industry,
|
||||
'region' => $this->region,
|
||||
'sortBy' => $this->sortBy,
|
||||
]);
|
||||
}
|
||||
|
||||
public function removeFilter($filter)
|
||||
{
|
||||
$this->$filter = 'all';
|
||||
if ($filter === 'timeframe') {
|
||||
$this->timeframe = '7';
|
||||
}
|
||||
$this->updateActiveFilters();
|
||||
}
|
||||
|
||||
public function resetFilters()
|
||||
{
|
||||
$this->timeframe = '7';
|
||||
$this->industry = 'all';
|
||||
$this->region = 'all';
|
||||
$this->sortBy = 'newest';
|
||||
$this->updateActiveFilters();
|
||||
}
|
||||
|
||||
private function updateActiveFilters()
|
||||
{
|
||||
$this->activeFilters = [];
|
||||
|
||||
if ($this->timeframe !== '7') {
|
||||
$this->activeFilters[] = ['key' => 'timeframe', 'label' => $this->getTimeframeLabel()];
|
||||
}
|
||||
if ($this->industry !== 'all') {
|
||||
$this->activeFilters[] = ['key' => 'industry', 'label' => $this->getIndustryLabel()];
|
||||
}
|
||||
if ($this->region !== 'all') {
|
||||
$this->activeFilters[] = ['key' => 'region', 'label' => $this->getRegionLabel()];
|
||||
}
|
||||
}
|
||||
|
||||
private function getTimeframeLabel()
|
||||
{
|
||||
return match($this->timeframe) {
|
||||
'today' => 'Heute',
|
||||
'7' => '7 Tage',
|
||||
'30' => '30 Tage',
|
||||
default => 'Zeitraum'
|
||||
};
|
||||
}
|
||||
|
||||
private function getIndustryLabel()
|
||||
{
|
||||
return match($this->industry) {
|
||||
'it' => 'IT & Software',
|
||||
'finance' => 'Finanzen',
|
||||
'health' => 'Gesundheit',
|
||||
'auto' => 'Automobil',
|
||||
'energy' => 'Energie',
|
||||
default => 'Alle Branchen'
|
||||
};
|
||||
}
|
||||
|
||||
private function getRegionLabel()
|
||||
{
|
||||
return match($this->region) {
|
||||
'de' => 'Deutschland',
|
||||
'at' => 'Österreich',
|
||||
'ch' => 'Schweiz',
|
||||
default => 'Alle Regionen'
|
||||
};
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<div>
|
||||
<div class="sticky top-16 z-40 bg-white/95 dark:bg-gray-900/95 backdrop-blur-sm border-b border-gray-200 dark:border-gray-800 shadow-sm transition-colors duration-200">
|
||||
<div class="container mx-auto px-4 py-4">
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<!-- Zeitraum -->
|
||||
<div class="relative">
|
||||
<select
|
||||
wire:model.live="timeframe"
|
||||
class="appearance-none pl-10 pr-8 py-2 text-sm border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-all hover:border-gray-400 dark:hover:border-gray-600 cursor-pointer"
|
||||
>
|
||||
<option value="today">Heute</option>
|
||||
<option value="7">7 Tage</option>
|
||||
<option value="30">30 Tage</option>
|
||||
<option value="custom">Zeitraum</option>
|
||||
</select>
|
||||
<svg class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-500 dark:text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
<svg class="absolute right-2 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-500 dark:text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Branche -->
|
||||
<div class="relative">
|
||||
<select
|
||||
wire:model.live="industry"
|
||||
class="appearance-none pl-10 pr-8 py-2 text-sm border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-all hover:border-gray-400 dark:hover:border-gray-600 cursor-pointer"
|
||||
>
|
||||
<option value="all">Alle Branchen</option>
|
||||
<option value="it">IT & Software</option>
|
||||
<option value="finance">Finanzen</option>
|
||||
<option value="health">Gesundheit</option>
|
||||
<option value="auto">Automobil</option>
|
||||
<option value="energy">Energie</option>
|
||||
</select>
|
||||
<svg class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-500 dark:text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
|
||||
</svg>
|
||||
<svg class="absolute right-2 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-500 dark:text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Region -->
|
||||
<div class="relative">
|
||||
<select
|
||||
wire:model.live="region"
|
||||
class="appearance-none pl-10 pr-8 py-2 text-sm border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-all hover:border-gray-400 dark:hover:border-gray-600 cursor-pointer"
|
||||
>
|
||||
<option value="all">Alle Regionen</option>
|
||||
<option value="de">Deutschland</option>
|
||||
<option value="at">Österreich</option>
|
||||
<option value="ch">Schweiz</option>
|
||||
</select>
|
||||
<svg class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-500 dark:text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
<svg class="absolute right-2 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-500 dark:text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Sortierung -->
|
||||
<div class="relative">
|
||||
<select
|
||||
wire:model.live="sortBy"
|
||||
class="appearance-none pl-10 pr-8 py-2 text-sm border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-all hover:border-gray-400 dark:hover:border-gray-600 cursor-pointer"
|
||||
>
|
||||
<option value="newest">Neueste</option>
|
||||
<option value="relevance">Relevanz</option>
|
||||
</select>
|
||||
<svg class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-500 dark:text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"></path>
|
||||
</svg>
|
||||
<svg class="absolute right-2 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-500 dark:text-gray-400 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- Active Filters Display -->
|
||||
@if(count($activeFilters) > 0)
|
||||
<div class="flex items-center gap-2 flex-wrap ml-auto">
|
||||
@foreach($activeFilters as $filter)
|
||||
<span class="inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-medium bg-[var(--color-primary)]/10 dark:bg-[var(--color-primary)]/20 text-[var(--color-primary)] border border-[var(--color-primary)]/20 dark:border-[var(--color-primary)]/30 transition-all hover:bg-[var(--color-primary)]/20 dark:hover:bg-[var(--color-primary)]/30">
|
||||
{{ $filter['label'] }}
|
||||
<button
|
||||
wire:click="removeFilter('{{ $filter['key'] }}')"
|
||||
class="hover:text-[var(--color-primary)]/70 transition-colors"
|
||||
>
|
||||
<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</span>
|
||||
@endforeach
|
||||
|
||||
<!-- Reset Button -->
|
||||
<button
|
||||
wire:click="resetFilters"
|
||||
class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors"
|
||||
>
|
||||
Alle zurücksetzen
|
||||
</button>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
127
resources/views/livewire/web/footer.blade.php
Normal file
127
resources/views/livewire/web/footer.blade.php
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
<?php
|
||||
|
||||
use Livewire\Volt\Component;
|
||||
|
||||
new class extends Component {
|
||||
public $darkMode = false;
|
||||
|
||||
public function mount()
|
||||
{
|
||||
// Check if user has a preference stored
|
||||
$this->darkMode = false;
|
||||
}
|
||||
|
||||
public function toggleTheme()
|
||||
{
|
||||
$this->darkMode = !$this->darkMode;
|
||||
$this->dispatch('theme-changed', darkMode: $this->darkMode);
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<div x-data="{ darkMode: $wire.entangle('darkMode') }" x-init="
|
||||
darkMode = localStorage.getItem('theme') === 'dark';
|
||||
$watch('darkMode', value => {
|
||||
localStorage.setItem('theme', value ? 'dark' : 'light');
|
||||
if (value) {
|
||||
document.documentElement.classList.add('dark');
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark');
|
||||
}
|
||||
});
|
||||
// Initialize theme on load
|
||||
if (darkMode) {
|
||||
document.documentElement.classList.add('dark');
|
||||
}
|
||||
">
|
||||
<footer class="bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-800 py-8 mt-auto transition-colors duration-200">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">Unternehmen</h3>
|
||||
<ul class="space-y-2">
|
||||
<li><a href="/ueber-uns" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors">Über uns</a></li>
|
||||
<li><a href="/kontakt" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors">Kontakt</a></li>
|
||||
<li><a href="/presse" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors">Presse</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">Services</h3>
|
||||
<ul class="space-y-2">
|
||||
<li><a href="/preise" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors">Preise</a></li>
|
||||
<li><a href="/newsrooms" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors">Newsrooms</a></li>
|
||||
<li><a href="/api" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors">API</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">Rechtliches</h3>
|
||||
<ul class="space-y-2">
|
||||
<li><a href="/impressum" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors">Impressum</a></li>
|
||||
<li><a href="/datenschutz" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors">Datenschutz</a></li>
|
||||
<li><a href="/agb" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors">AGB</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">Folgen Sie uns</h3>
|
||||
<ul class="space-y-2">
|
||||
<li><a href="https://linkedin.com" target="_blank" rel="noopener" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors">LinkedIn</a></li>
|
||||
<li><a href="https://twitter.com" target="_blank" rel="noopener" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors">Twitter</a></li>
|
||||
<li><a href="/rss" class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors">RSS</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@php
|
||||
$theme = config('app.theme', 'businessportal24');
|
||||
$isPresseecho = $theme === 'presseecho';
|
||||
$currentYear = date('Y');
|
||||
$siteName = $isPresseecho ? 'Presseecho' : 'Business Portal';
|
||||
@endphp
|
||||
|
||||
<!-- Cross-Link für Presseecho -->
|
||||
@if($isPresseecho)
|
||||
<div class="mb-6 p-5 bg-gradient-to-r from-[var(--color-primary)]/5 to-[var(--color-secondary)]/5 dark:from-[var(--color-primary)]/10 dark:to-[var(--color-secondary)]/10 rounded-lg border border-[var(--color-primary)]/10">
|
||||
<div class="flex items-center justify-between gap-4 flex-wrap">
|
||||
<div>
|
||||
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1">
|
||||
Für maximale Reichweite?
|
||||
</p>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Besuchen Sie unser reichweitenstarkes Portal <strong class="text-gray-900 dark:text-gray-100">Businessportal24</strong>
|
||||
</p>
|
||||
</div>
|
||||
<a href="https://businessportal24.test"
|
||||
class="inline-flex items-center gap-2 px-5 py-2.5 text-sm font-medium text-white bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] hover:from-[var(--color-primary)]/90 hover:to-[var(--color-secondary)]/90 rounded-lg shadow-md hover:shadow-lg transition-all whitespace-nowrap">
|
||||
Zu Businessportal24
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div class="pt-6 border-t border-gray-200 dark:border-gray-700">
|
||||
<div class="flex flex-col md:flex-row items-center justify-between gap-4">
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">© {{ $currentYear }} {{ $siteName }}. Alle Rechte vorbehalten.</p>
|
||||
|
||||
<!-- Theme Toggle -->
|
||||
<button
|
||||
@click="darkMode = !darkMode"
|
||||
class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-all"
|
||||
aria-label="Theme wechseln"
|
||||
>
|
||||
<!-- Sun Icon (zeigt in Dark Mode) -->
|
||||
<svg x-show="darkMode" class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" x-cloak>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
|
||||
</svg>
|
||||
<!-- Moon Icon (zeigt in Light Mode) -->
|
||||
<svg x-show="!darkMode" class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
|
||||
</svg>
|
||||
<span x-text="darkMode ? 'Hell' : 'Dunkel'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
142
resources/views/livewire/web/header.blade.php
Normal file
142
resources/views/livewire/web/header.blade.php
Normal file
|
|
@ -0,0 +1,142 @@
|
|||
<?php
|
||||
|
||||
use Livewire\Volt\Component;
|
||||
|
||||
new class extends Component {
|
||||
public $searchQuery = '';
|
||||
public $showMobileSearch = false;
|
||||
|
||||
public function search()
|
||||
{
|
||||
// Implementierung der Suchlogik
|
||||
$this->dispatch('search-pressed', query: $this->searchQuery);
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<div>
|
||||
<header
|
||||
class="sticky top-0 z-50 bg-white dark:bg-gray-900 border-b border-gray-200/50 dark:border-gray-800/50 shadow-sm backdrop-blur-sm transition-colors duration-200">
|
||||
<!-- Brand Accent Bar -->
|
||||
<div
|
||||
class="h-1 bg-gradient-to-r from-[var(--color-primary)] via-[var(--color-secondary)] to-[var(--color-primary)]">
|
||||
</div>
|
||||
|
||||
<div class="container mx-auto px-4 h-16 flex items-center justify-between gap-4">
|
||||
<!-- Burger Menu + Logo -->
|
||||
<div class="flex items-center gap-3">
|
||||
<!-- Burger Menu Button (immer sichtbar) -->
|
||||
<button @click="$dispatch('toggle-mobile-menu')"
|
||||
class="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
|
||||
aria-label="Menü öffnen">
|
||||
<svg class="h-6 w-6 text-gray-900 dark:text-gray-100" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M4 6h16M4 12h16M4 18h16"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<a href="/" class="flex-shrink-0 flex items-center gap-3">
|
||||
@php
|
||||
$theme = config('app.theme', 'businessportal24');
|
||||
|
||||
// Versuche verschiedene Logo-Namenskonventionen
|
||||
$logoVariants = [
|
||||
"images/{$theme}-logo.svg",
|
||||
"images/" . str_replace('24', '', $theme) . "-logo.svg", // businessportal-logo.svg
|
||||
];
|
||||
|
||||
$logoPath = null;
|
||||
foreach ($logoVariants as $variant) {
|
||||
if (file_exists(public_path($variant))) {
|
||||
$logoPath = $variant;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
$altText = ucfirst(str_replace(['24', '-'], [' ', ' '], $theme));
|
||||
@endphp
|
||||
|
||||
@if ($logoPath)
|
||||
<img src="{{ asset($logoPath) }}" alt="{{ $altText }}"
|
||||
class="h-12 w-auto dark:brightness-0 dark:invert">
|
||||
@else
|
||||
<div
|
||||
class="h-10 w-10 rounded-lg bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-secondary)] flex items-center justify-center shadow-md">
|
||||
<span class="text-white font-bold text-lg">{{ strtoupper(substr($theme, 0, 2)) }}</span>
|
||||
</div>
|
||||
@endif
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Search - Desktop -->
|
||||
<div class="hidden md:flex flex-1 max-w-xl">
|
||||
<form wire:submit.prevent="search" class="relative w-full">
|
||||
<svg class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" fill="none"
|
||||
stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||
</svg>
|
||||
<input type="search" wire:model="searchQuery" placeholder="Pressemitteilungen durchsuchen..."
|
||||
class="pl-10 w-full rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-all" />
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Search Icon - Mobile -->
|
||||
<button @click="$wire.showMobileSearch = !$wire.showMobileSearch"
|
||||
class="md:hidden p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
|
||||
<svg class="h-5 w-5 text-gray-900 dark:text-gray-100" fill="none" stroke="currentColor"
|
||||
viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- CTA Buttons - Domain-specific -->
|
||||
<div class="flex items-center gap-2">
|
||||
@php
|
||||
$theme = config('app.theme', 'businessportal24');
|
||||
$isPresseecho = $theme === 'presseecho';
|
||||
@endphp
|
||||
|
||||
@if ($isPresseecho)
|
||||
<!-- Presseecho: Dezente Navigation -->
|
||||
<a href="/login"
|
||||
class="hidden sm:inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
|
||||
Anmelden
|
||||
</a>
|
||||
<a href="/beitrag-einreichen"
|
||||
class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors border border-gray-300 dark:border-gray-700">
|
||||
Beitrag einreichen
|
||||
</a>
|
||||
@else
|
||||
<!-- Businessportal24: Prominenter CTA -->
|
||||
<a href="/login"
|
||||
class="hidden sm:inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
|
||||
Anmelden
|
||||
</a>
|
||||
<a href="/veroeffentlichen"
|
||||
class="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] hover:from-[var(--color-primary)]/90 hover:to-[var(--color-secondary)]/90 rounded-lg shadow-md hover:shadow-lg transition-all">
|
||||
Veröffentlichen
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Search Bar -->
|
||||
<div x-show="$wire.showMobileSearch" x-transition:enter="transition ease-out duration-200"
|
||||
x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0"
|
||||
x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100 translate-y-0"
|
||||
x-transition:leave-end="opacity-0 -translate-y-2"
|
||||
class="md:hidden border-t border-gray-200 dark:border-gray-800 px-4 py-3 bg-white dark:bg-gray-900" x-cloak>
|
||||
<form wire:submit.prevent="search" class="relative">
|
||||
<svg class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400 dark:text-gray-500"
|
||||
fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||
</svg>
|
||||
<input type="search" wire:model="searchQuery" placeholder="Pressemitteilungen durchsuchen..."
|
||||
class="pl-10 w-full rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-all" />
|
||||
</form>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
130
resources/views/livewire/web/press-releases-grid.blade.php
Normal file
130
resources/views/livewire/web/press-releases-grid.blade.php
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
<?php
|
||||
|
||||
use Livewire\Volt\Component;
|
||||
|
||||
new class extends Component {
|
||||
public function with(): array
|
||||
{
|
||||
// Mock-Daten für Press Releases Grid
|
||||
return [
|
||||
'releases' => [
|
||||
[
|
||||
'slug' => 'ki-revolution-deutsche-unternehmen',
|
||||
'title' => 'KI-Revolution: Deutsche Unternehmen investieren Milliarden in Automatisierung',
|
||||
'teaser' => 'Eine neue Studie zeigt: Unternehmen im DACH-Raum planen für 2025 Investitionen in Höhe von über 15 Milliarden Euro in KI-gestützte Automatisierungslösungen.',
|
||||
'company' => 'TechVision Analytics',
|
||||
'industry' => 'IT & Software',
|
||||
'region' => 'Deutschland',
|
||||
'date' => '17. Okt 2024',
|
||||
'contentType' => 'ANALYSE',
|
||||
'hasImage' => true,
|
||||
'hasPdf' => true,
|
||||
'imageUrl' => 'https://images.unsplash.com/photo-1677442136019-21780ecad995?w=800&h=600&fit=crop',
|
||||
'companyLogo' => 'logo',
|
||||
],
|
||||
[
|
||||
'slug' => 'energiewende-beschleunigt',
|
||||
'title' => 'Energiewende beschleunigt sich: Neue Rekorde bei erneuerbaren Energien',
|
||||
'teaser' => 'Im ersten Quartal 2025 erreicht der Anteil erneuerbarer Energien am Strommix einen historischen Höchststand von 58%.',
|
||||
'company' => 'GreenPower Deutschland',
|
||||
'industry' => 'Energie',
|
||||
'region' => 'Deutschland',
|
||||
'date' => '16. Okt 2024',
|
||||
'contentType' => 'FACHMELDUNG',
|
||||
'hasImage' => true,
|
||||
'imageUrl' => 'https://images.unsplash.com/photo-1466611653911-95081537e5b7?w=800&h=600&fit=crop',
|
||||
],
|
||||
[
|
||||
'slug' => 'fintech-startup-series-b',
|
||||
'title' => 'FinTech-Startup sichert sich 45 Millionen Euro in Series-B-Runde',
|
||||
'teaser' => 'Das Berliner FinTech-Startup PaymentFlow konnte in einer Series-B-Finanzierungsrunde 45 Millionen Euro einsammeln.',
|
||||
'company' => 'PaymentFlow GmbH',
|
||||
'industry' => 'Finanzen',
|
||||
'region' => 'Berlin',
|
||||
'date' => '15. Okt 2024',
|
||||
'contentType' => 'FACHMELDUNG',
|
||||
'hasPdf' => true,
|
||||
'imageUrl' => null,
|
||||
],
|
||||
[
|
||||
'slug' => 'gesundheitsbranche-digital',
|
||||
'title' => 'Gesundheitsbranche setzt verstärkt auf digitale Lösungen',
|
||||
'teaser' => 'Telemedizin und KI-gestützte Diagnostik werden zum Standard: 78% der Krankenhäuser in Deutschland planen Investitionen.',
|
||||
'company' => 'MediTech Solutions',
|
||||
'industry' => 'Gesundheit',
|
||||
'region' => 'München',
|
||||
'date' => '14. Okt 2024',
|
||||
'contentType' => 'INTERVIEW',
|
||||
'hasImage' => true,
|
||||
'imageUrl' => 'https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?w=800&h=600&fit=crop',
|
||||
],
|
||||
[
|
||||
'slug' => 'automobilindustrie-transformation',
|
||||
'title' => 'Automobilindustrie: Transformation zur E-Mobilität nimmt Fahrt auf',
|
||||
'teaser' => 'Führende Automobilhersteller kündigen massive Investitionen in E-Mobilität an. Bis 2030 sollen 80% der Neufahrzeuge elektrisch sein.',
|
||||
'company' => 'Auto Industry Report',
|
||||
'industry' => 'Automobil',
|
||||
'region' => 'Stuttgart',
|
||||
'date' => '13. Okt 2024',
|
||||
'contentType' => 'ANALYSE',
|
||||
'hasImage' => true,
|
||||
'hasPdf' => true,
|
||||
'imageUrl' => 'https://images.unsplash.com/photo-1593941707882-a5bba14938c7?w=800&h=600&fit=crop',
|
||||
],
|
||||
[
|
||||
'slug' => 'cybersecurity-massnahmen',
|
||||
'title' => 'Cybersecurity: Unternehmen verstärken Schutzmaßnahmen gegen Hackerangriffe',
|
||||
'teaser' => 'Nach einer Serie von Cyberattacken erhöhen deutsche Unternehmen ihre Investitionen in IT-Sicherheit um durchschnittlich 35%.',
|
||||
'company' => 'CyberSafe Europe',
|
||||
'industry' => 'IT & Software',
|
||||
'region' => 'Frankfurt',
|
||||
'date' => '12. Okt 2024',
|
||||
'contentType' => 'FACHMELDUNG',
|
||||
'hasImage' => true,
|
||||
'imageUrl' => 'https://images.unsplash.com/photo-1550751827-4bd374c3f58b?w=800&h=600&fit=crop',
|
||||
],
|
||||
]
|
||||
];
|
||||
}
|
||||
}; ?>
|
||||
|
||||
<div>
|
||||
@php
|
||||
$theme = config('app.theme', 'businessportal24');
|
||||
$isPresseecho = $theme === 'presseecho';
|
||||
@endphp
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
@foreach($releases as $release)
|
||||
@if($isPresseecho)
|
||||
{{-- Presseecho: Hochwertige Magazine-Card --}}
|
||||
<x-web.presseecho-release-card
|
||||
:title="$release['title']"
|
||||
:teaser="$release['teaser']"
|
||||
:company="$release['company']"
|
||||
:industry="$release['industry']"
|
||||
:region="$release['region']"
|
||||
:date="$release['date']"
|
||||
:contentType="$release['contentType'] ?? 'FACHMELDUNG'"
|
||||
:slug="$release['slug']"
|
||||
:imageUrl="$release['imageUrl'] ?? null"
|
||||
/>
|
||||
@else
|
||||
{{-- Businessportal24: Standard-Card --}}
|
||||
<x-web.press-release-card
|
||||
:title="$release['title']"
|
||||
:teaser="$release['teaser']"
|
||||
:company="$release['company']"
|
||||
:industry="$release['industry']"
|
||||
:region="$release['region']"
|
||||
:date="$release['date']"
|
||||
:hasImage="$release['hasImage'] ?? false"
|
||||
:hasPdf="$release['hasPdf'] ?? false"
|
||||
:slug="$release['slug']"
|
||||
:imageUrl="$release['imageUrl'] ?? null"
|
||||
:companyLogo="$release['companyLogo'] ?? null"
|
||||
/>
|
||||
@endif
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
23
resources/views/partials/admin-head.blade.php
Normal file
23
resources/views/partials/admin-head.blade.php
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<title>{{ $title ?? config('app.name') }}</title>
|
||||
|
||||
<link rel="icon" href="/favicon.ico" sizes="any">
|
||||
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
||||
|
||||
<link rel="preconnect" href="https://fonts.bunny.net">
|
||||
<link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet" />
|
||||
|
||||
@vite(['resources/css/portal.css', 'resources/js/app.js'])
|
||||
@livewireStyles
|
||||
<link rel="stylesheet" href="{{ asset('vendor/livewire/livewire.css') }}">
|
||||
@fluxAppearance
|
||||
|
||||
<!-- Debug: Asset-Status -->
|
||||
<script>
|
||||
console.log('Admin Head geladen');
|
||||
console.log('Vite Assets:', {{ file_exists(public_path('build/admin/manifest.json')) ? 'true' : 'false' }});
|
||||
console.log('Livewire CSS:', {{ file_exists(public_path('vendor/livewire/livewire.css')) ? 'true' : 'false' }});
|
||||
</script>
|
||||
14
resources/views/partials/head.blade.php
Normal file
14
resources/views/partials/head.blade.php
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<title>{{ $title ?? config('app.name') }}</title>
|
||||
|
||||
<link rel="icon" href="/favicon.ico" sizes="any">
|
||||
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
||||
|
||||
<link rel="preconnect" href="https://fonts.bunny.net">
|
||||
<link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600" rel="stylesheet" />
|
||||
|
||||
@vite(['resources/css/portal.css', 'resources/js/app.js'])
|
||||
@fluxAppearance
|
||||
5
resources/views/partials/settings-heading.blade.php
Normal file
5
resources/views/partials/settings-heading.blade.php
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
<div class="relative mb-6 w-full">
|
||||
<flux:heading size="xl" level="1">{{ __('Settings') }}</flux:heading>
|
||||
<flux:subheading size="lg" class="mb-6">{{ __('Manage your profile and account settings') }}</flux:subheading>
|
||||
<flux:separator variant="subtle" />
|
||||
</div>
|
||||
21
resources/views/test-simple.blade.php
Normal file
21
resources/views/test-simple.blade.php
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<x-layouts.auth>
|
||||
<div class="flex flex-col gap-6 p-8 bg-white rounded-lg shadow-lg max-w-md mx-auto">
|
||||
<h1 class="text-2xl font-bold text-gray-900 text-center">Einfacher Test</h1>
|
||||
|
||||
<p class="text-gray-600 text-center">Diese Seite funktioniert ohne Volt/Livewire</p>
|
||||
|
||||
<div class="mt-4 p-4 bg-green-100 rounded text-sm">
|
||||
<h2 class="font-semibold mb-2">Erfolg!</h2>
|
||||
<p>Das Layout funktioniert korrekt.</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 p-4 bg-blue-100 rounded text-sm">
|
||||
<h2 class="font-semibold mb-2">Informationen:</h2>
|
||||
<ul class="space-y-1">
|
||||
<li><strong>Route:</strong> {{ request()->url() }}</li>
|
||||
<li><strong>Domain:</strong> {{ request()->getHost() }}</li>
|
||||
<li><strong>Method:</strong> {{ request()->method() }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</x-layouts.auth>
|
||||
158
resources/views/web/agb.blade.php
Normal file
158
resources/views/web/agb.blade.php
Normal file
|
|
@ -0,0 +1,158 @@
|
|||
@extends('web.layouts.web-master')
|
||||
|
||||
@section('title', 'AGB - Business Portal 24')
|
||||
|
||||
@section('content')
|
||||
|
||||
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
|
||||
<livewire:web.burger-menu />
|
||||
<livewire:web.header />
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="relative overflow-hidden text-white py-16 animate-fade-in"
|
||||
style="background: var(--gradient-hero);">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-4 animate-fade-in-up">
|
||||
Allgemeine Geschäftsbedingungen
|
||||
</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Content Section -->
|
||||
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 md:p-12 transition-colors duration-200">
|
||||
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">§ 1 Geltungsbereich</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
||||
Diese Allgemeinen Geschäftsbedingungen (AGB) gelten für alle Verträge zwischen der Business Portal GmbH (im Folgenden „Anbieter")
|
||||
und ihren Kunden (im Folgenden „Kunde" oder „Nutzer") über die Nutzung der Plattform Business Portal.
|
||||
</p>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Abweichende, entgegenstehende oder ergänzende AGB des Kunden werden nicht Vertragsbestandteil, es sei denn, der Anbieter
|
||||
stimmt ihrer Geltung ausdrücklich schriftlich zu.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">§ 2 Vertragsgegenstand</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
||||
Der Anbieter stellt dem Kunden eine Online-Plattform zur Veröffentlichung von Pressemitteilungen zur Verfügung.
|
||||
Der Funktionsumfang richtet sich nach dem gewählten Tarif.
|
||||
</p>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Der Anbieter ist berechtigt, Subunternehmer zur Vertragserfüllung einzusetzen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">§ 3 Vertragsschluss und Registrierung</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
||||
Der Vertrag kommt durch die Registrierung des Kunden und die Bestätigung durch den Anbieter zustande.
|
||||
Die Registrierung ist nur volljährigen, unbeschränkt geschäftsfähigen Personen gestattet.
|
||||
</p>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Der Kunde verpflichtet sich, bei der Registrierung wahre und vollständige Angaben zu machen und diese aktuell zu halten.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">§ 4 Leistungsumfang</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
||||
Der konkrete Leistungsumfang richtet sich nach dem gewählten Tarif. Eine Beschreibung der Tarife findet sich auf der
|
||||
Preisseite der Website.
|
||||
</p>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Der Anbieter ist berechtigt, die Dienste weiterzuentwickeln und Funktionen zu ändern, sofern dies die Vertragserfüllung
|
||||
nicht wesentlich beeinträchtigt.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">§ 5 Verfügbarkeit</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Der Anbieter stellt die Plattform mit einer Verfügbarkeit von mindestens 98% im Jahresmittel zur Verfügung.
|
||||
Ausgenommen hiervon sind Wartungsarbeiten sowie Ausfälle, die nicht im Einflussbereich des Anbieters liegen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">§ 6 Pflichten des Kunden</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-4">Der Kunde verpflichtet sich:</p>
|
||||
<ul class="list-disc list-inside text-gray-600 dark:text-gray-400 mb-4">
|
||||
<li>Nur rechtmäßige Inhalte zu veröffentlichen</li>
|
||||
<li>Keine Rechte Dritter zu verletzen</li>
|
||||
<li>Die Zugangsdaten vertraulich zu behandeln</li>
|
||||
<li>Den Account nicht an Dritte weiterzugeben</li>
|
||||
<li>Die Plattform nicht missbräuchlich zu nutzen</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">§ 7 Vergütung und Zahlung</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
||||
Die Vergütung richtet sich nach dem gewählten Tarif. Alle Preise verstehen sich zzgl. der gesetzlichen Mehrwertsteuer.
|
||||
</p>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Die Zahlung erfolgt im Voraus für den gewählten Abrechnungszeitraum (monatlich oder jährlich) per Kreditkarte,
|
||||
SEPA-Lastschrift oder anderen vom Anbieter akzeptierten Zahlungsmethoden.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">§ 8 Laufzeit und Kündigung</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
||||
Der Vertrag wird für die gewählte Mindestlaufzeit geschlossen und verlängert sich automatisch um den gewählten
|
||||
Abrechnungszeitraum, sofern nicht gekündigt wird.
|
||||
</p>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Die Kündigung muss schriftlich oder in Textform (z.B. E-Mail) unter Einhaltung einer Frist von 30 Tagen zum Ende
|
||||
des Abrechnungszeitraums erfolgen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">§ 9 Haftung</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Der Anbieter haftet nur für Schäden, die auf einer vorsätzlichen oder grob fahrlässigen Pflichtverletzung beruhen.
|
||||
Dies gilt nicht für Schäden aus der Verletzung des Lebens, des Körpers oder der Gesundheit.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">§ 10 Schlussbestimmungen</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
||||
Es gilt das Recht der Bundesrepublik Deutschland unter Ausschluss des UN-Kaufrechts.
|
||||
</p>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Sollten einzelne Bestimmungen dieser AGB unwirksam sein oder werden, berührt dies die Wirksamkeit der übrigen Bestimmungen nicht.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-500">
|
||||
Stand: Januar 2025
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<livewire:web.footer />
|
||||
</main>
|
||||
|
||||
@endsection
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
:root {
|
||||
--color-primary: {{ $domainConfig['color_scheme']['primary'] ?? '#cf3628' }};
|
||||
--color-secondary: {{ $domainConfig['color_scheme']['secondary'] ?? '#f0834a' }};
|
||||
}
|
||||
[x-cloak] { display: none !important; }
|
||||
</style>
|
||||
@endpush
|
||||
280
resources/views/web/api.blade.php
Normal file
280
resources/views/web/api.blade.php
Normal file
|
|
@ -0,0 +1,280 @@
|
|||
@extends('web.layouts.web-master')
|
||||
|
||||
@section('title', 'API & Integrationen - Business Portal 24')
|
||||
|
||||
@section('content')
|
||||
|
||||
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-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">
|
||||
API & Integrationen
|
||||
</h1>
|
||||
<p class="text-xl text-white/90 leading-relaxed animate-fade-in-up animation-delay-200">
|
||||
Integrieren Sie Business Portal nahtlos in Ihre bestehenden Systeme und Workflows
|
||||
</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-api" 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-api)"/>
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- API Overview Section -->
|
||||
<section class="py-16 bg-white dark:bg-gray-950 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-gray-900 dark:text-gray-100 mb-4">
|
||||
Leistungsstarke REST API
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 dark:text-gray-400">
|
||||
Automatisieren Sie Ihre Presseveröffentlichungen und integrieren Sie unsere Dienste
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 md:p-12 transition-colors duration-200">
|
||||
<p class="text-lg text-gray-900 dark:text-gray-100 leading-relaxed mb-6">
|
||||
Unsere RESTful API ermöglicht es Ihnen, Pressemitteilungen programmatisch zu veröffentlichen, zu verwalten und abzurufen. Perfekt für Unternehmen mit hohem Veröffentlichungsvolumen oder bestehenden Content-Management-Systemen.
|
||||
</p>
|
||||
<p class="text-lg text-gray-900 dark:text-gray-100 leading-relaxed">
|
||||
Die API ist vollständig dokumentiert und unterstützt moderne Authentifizierungsmethoden sowie Webhooks für Echtzeit-Benachrichtigungen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- API Features Section -->
|
||||
<section class="py-16 bg-gray-50/50 dark:bg-gray-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-gray-900 dark:text-gray-100 mb-4">
|
||||
API Features
|
||||
</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
|
||||
Alles, was Sie für eine nahtlose Integration benötigen
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
|
||||
<!-- Feature 1 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 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 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="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">
|
||||
RESTful API
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Moderne REST-Architektur mit JSON-Responses für einfache Integration in jede Programmiersprache.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 2 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 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 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-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">
|
||||
OAuth 2.0
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Sichere Authentifizierung mit OAuth 2.0 und API-Tokens für maximale Sicherheit.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 3 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 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 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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">
|
||||
Webhooks
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Erhalten Sie Echtzeit-Benachrichtigungen über Events wie Veröffentlichungen oder Statusänderungen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 4 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 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 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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">
|
||||
Dokumentation
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Umfassende API-Dokumentation mit Code-Beispielen in verschiedenen Sprachen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 5 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 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 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 10V3L4 14h7v7l9-11h-7z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">
|
||||
Rate Limiting
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Faire Rate Limits mit klaren Headern und automatischer Skalierung bei Bedarf.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 6 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 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 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="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">
|
||||
SDKs
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Offizielle SDKs für PHP, JavaScript, Python und weitere Sprachen verfügbar.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Code Example Section -->
|
||||
<section class="py-16 bg-white dark:bg-gray-950 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-gray-900 dark:text-gray-100 mb-4">
|
||||
Schneller Einstieg
|
||||
</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Veröffentlichen Sie Ihre erste Pressemitteilung in wenigen Zeilen Code
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-900 dark:bg-gray-950 rounded-xl border border-gray-800 p-6 overflow-x-auto">
|
||||
<div class="text-sm text-gray-400 mb-4">// Example: Pressemitteilung veröffentlichen</div>
|
||||
<pre class="text-green-400 font-mono text-sm"><code>curl -X POST https://api.businessportal.de/v1/releases \
|
||||
-H "Authorization: Bearer YOUR_API_TOKEN" \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"title": "Neue Produktankündigung",
|
||||
"content": "Unser neues Produkt...",
|
||||
"category": "wirtschaft",
|
||||
"publish_at": "2025-01-15T10:00:00Z"
|
||||
}'</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="mt-8 text-center">
|
||||
<a href="#" class="inline-flex items-center justify-center px-6 py-3 text-sm font-medium text-white rounded-lg shadow-md hover:shadow-lg transition-all" style="background: var(--gradient-hero);">
|
||||
Zur vollständigen Dokumentation
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Integrations Section -->
|
||||
<section class="py-16 bg-gray-50/50 dark:bg-gray-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-gray-900 dark:text-gray-100 mb-4">
|
||||
Native Integrationen
|
||||
</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
|
||||
Verbinden Sie Business Portal mit Ihren Lieblings-Tools
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
|
||||
<!-- Integration logos would go here -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 flex items-center justify-center hover:shadow-lg transition-all">
|
||||
<span class="text-gray-600 dark:text-gray-400 font-semibold">WordPress</span>
|
||||
</div>
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 flex items-center justify-center hover:shadow-lg transition-all">
|
||||
<span class="text-gray-600 dark:text-gray-400 font-semibold">Zapier</span>
|
||||
</div>
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 flex items-center justify-center hover:shadow-lg transition-all">
|
||||
<span class="text-gray-600 dark:text-gray-400 font-semibold">Slack</span>
|
||||
</div>
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 flex items-center justify-center hover:shadow-lg transition-all">
|
||||
<span class="text-gray-600 dark:text-gray-400 font-semibold">HubSpot</span>
|
||||
</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="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold mb-4">
|
||||
Starten Sie mit der API
|
||||
</h2>
|
||||
<p class="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
|
||||
API-Zugang ist ab dem Professional-Tarif verfügbar
|
||||
</p>
|
||||
<div class="flex gap-4 justify-center">
|
||||
<a href="/preise" class="inline-flex items-center justify-center px-8 py-4 text-sm font-medium bg-white text-[var(--color-primary)] hover:bg-gray-100 rounded-lg shadow-md hover:shadow-lg transition-all">
|
||||
Preise ansehen
|
||||
</a>
|
||||
<a href="#" class="inline-flex items-center justify-center px-8 py-4 text-sm font-medium text-white border-2 border-white hover:bg-white/10 rounded-lg transition-all">
|
||||
Dokumentation
|
||||
</a>
|
||||
</div>
|
||||
</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
|
||||
10
resources/views/web/businessportal24.blade copy.php
Normal file
10
resources/views/web/businessportal24.blade copy.php
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
@extends('web.layouts.web-master')
|
||||
|
||||
@section('title', 'Testseite')
|
||||
|
||||
@section('content')
|
||||
<div class="bg-blue-500 text-white p-8">
|
||||
<h1 class="text-4xl font-bold">Testseite</h1>
|
||||
<p>Wenn Sie dies sehen, funktioniert das minimale Setup.</p>
|
||||
</div>
|
||||
@endsection
|
||||
133
resources/views/web/businessportal24.blade.php
Normal file
133
resources/views/web/businessportal24.blade.php
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
@extends('web.layouts.web-master')
|
||||
|
||||
@section('title', 'Pressemitteilungen - Business Portal 24')
|
||||
|
||||
@section('content')
|
||||
|
||||
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
|
||||
<!-- Burger Menu Component -->
|
||||
<livewire:web.burger-menu />
|
||||
|
||||
<!-- Header Component -->
|
||||
<livewire:web.header />
|
||||
|
||||
<!-- Filter Bar Component -->
|
||||
<livewire:web.filter-bar />
|
||||
|
||||
<!-- Hero Banner -->
|
||||
<section class="relative overflow-hidden text-white py-12 animate-fade-in" style="background: var(--gradient-hero);">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="max-w-4xl">
|
||||
<h1 class="text-3xl md:text-4xl lg:text-5xl text-white/90 font-bold mb-4 animate-fade-in-up">
|
||||
Aktuelle Pressemitteilungen
|
||||
</h1>
|
||||
<p class="text-base md:text-lg text-white/90 animate-fade-in-up animation-delay-200">
|
||||
Die führende Plattform für Unternehmensnachrichten aus Deutschland, Österreich und der Schweiz
|
||||
</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" 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)" />
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Featured Section -->
|
||||
<section
|
||||
class="bg-gray-50/50 dark:bg-gray-900/50 border-b border-gray-200 dark:border-gray-800 py-8 transition-colors duration-200">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2">
|
||||
<span
|
||||
class="w-1 h-6 bg-gradient-to-b from-[var(--color-primary)] to-[var(--color-secondary)] rounded-full"></span>
|
||||
Top-Meldungen
|
||||
</h2>
|
||||
<span
|
||||
class="text-xs text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-700 px-2 py-1 rounded">Anzeige</span>
|
||||
</div>
|
||||
|
||||
<livewire:web.featured-releases />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Main Content Grid -->
|
||||
<section class="py-8 bg-white dark:bg-gray-950 transition-colors duration-200">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="text-sm font-medium text-gray-600 dark:text-gray-400 flex items-center gap-2">
|
||||
<span class="w-2 h-2 bg-[var(--color-primary)] rounded-full"></span>
|
||||
247 Pressemitteilungen
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<livewire:web.press-releases-grid />
|
||||
|
||||
<!-- Pagination -->
|
||||
<nav class="flex justify-center mt-12" aria-label="Seitennummerierung">
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
disabled aria-label="Vorherige Seite">
|
||||
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7">
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="px-4 py-2 text-sm font-medium text-white rounded-lg shadow-md hover:shadow-lg transition-all"
|
||||
style="background: var(--gradient-hero);" aria-current="page">
|
||||
1
|
||||
</button>
|
||||
<button
|
||||
class="px-4 py-2 text-sm font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
|
||||
2
|
||||
</button>
|
||||
<button
|
||||
class="px-4 py-2 text-sm font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
|
||||
3
|
||||
</button>
|
||||
<span class="px-2 text-gray-600 dark:text-gray-400">...</span>
|
||||
<button
|
||||
class="px-4 py-2 text-sm font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
|
||||
10
|
||||
</button>
|
||||
<button
|
||||
class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors"
|
||||
aria-label="Nächste Seite">
|
||||
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7">
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
</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
|
||||
183
resources/views/web/cookies.blade.php
Normal file
183
resources/views/web/cookies.blade.php
Normal file
|
|
@ -0,0 +1,183 @@
|
|||
@extends('web.layouts.web-master')
|
||||
|
||||
@section('title', 'Cookie-Richtlinien - Business Portal 24')
|
||||
|
||||
@section('content')
|
||||
|
||||
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
|
||||
<livewire:web.burger-menu />
|
||||
<livewire:web.header />
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="relative overflow-hidden text-white py-16 animate-fade-in"
|
||||
style="background: var(--gradient-hero);">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-4 animate-fade-in-up">
|
||||
Cookie-Richtlinien
|
||||
</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Content Section -->
|
||||
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 md:p-12 transition-colors duration-200">
|
||||
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">Was sind Cookies?</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
||||
Cookies sind kleine Textdateien, die auf Ihrem Computer oder mobilen Gerät gespeichert werden, wenn Sie eine Website besuchen.
|
||||
Sie ermöglichen es der Website, Ihr Gerät zu erkennen und bestimmte Informationen über Ihre Nutzung zu speichern.
|
||||
</p>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Wir verwenden Cookies, um Ihnen ein optimales Nutzungserlebnis zu bieten und unsere Website kontinuierlich zu verbessern.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">Welche Cookies verwenden wir?</h2>
|
||||
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">1. Notwendige Cookies</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-3">
|
||||
Diese Cookies sind für den Betrieb der Website unbedingt erforderlich und können nicht deaktiviert werden.
|
||||
</p>
|
||||
<div class="bg-gray-50 dark:bg-gray-950 rounded-lg p-4">
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2"><strong>Beispiele:</strong></p>
|
||||
<ul class="list-disc list-inside text-sm text-gray-600 dark:text-gray-400">
|
||||
<li>Session-Cookies (Anmeldung)</li>
|
||||
<li>Sicherheits-Cookies (CSRF-Schutz)</li>
|
||||
<li>Cookie-Einwilligungs-Cookies</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">2. Funktionale Cookies</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-3">
|
||||
Diese Cookies ermöglichen erweiterte Funktionalitäten und Personalisierung.
|
||||
</p>
|
||||
<div class="bg-gray-50 dark:bg-gray-950 rounded-lg p-4">
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2"><strong>Beispiele:</strong></p>
|
||||
<ul class="list-disc list-inside text-sm text-gray-600 dark:text-gray-400">
|
||||
<li>Spracheinstellungen</li>
|
||||
<li>Dark-Mode-Präferenzen</li>
|
||||
<li>Gespeicherte Filtereinstellungen</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">3. Analytische Cookies</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-3">
|
||||
Diese Cookies helfen uns zu verstehen, wie Besucher mit unserer Website interagieren.
|
||||
</p>
|
||||
<div class="bg-gray-50 dark:bg-gray-950 rounded-lg p-4">
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2"><strong>Dienste:</strong></p>
|
||||
<ul class="list-disc list-inside text-sm text-gray-600 dark:text-gray-400">
|
||||
<li>Google Analytics (anonymisiert)</li>
|
||||
<li>Interne Analysetools</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-6">
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">4. Marketing-Cookies</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-3">
|
||||
Diese Cookies werden verwendet, um Ihnen relevante Werbung anzuzeigen.
|
||||
</p>
|
||||
<div class="bg-gray-50 dark:bg-gray-950 rounded-lg p-4">
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2"><strong>Beispiele:</strong></p>
|
||||
<ul class="list-disc list-inside text-sm text-gray-600 dark:text-gray-400">
|
||||
<li>Remarketing-Cookies</li>
|
||||
<li>Social Media Tracking</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">Cookie-Laufzeiten</h2>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full text-sm">
|
||||
<thead class="bg-gray-50 dark:bg-gray-950">
|
||||
<tr>
|
||||
<th class="px-4 py-3 text-left text-gray-900 dark:text-gray-100">Cookie-Typ</th>
|
||||
<th class="px-4 py-3 text-left text-gray-900 dark:text-gray-100">Laufzeit</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200 dark:divide-gray-800">
|
||||
<tr>
|
||||
<td class="px-4 py-3 text-gray-600 dark:text-gray-400">Session-Cookies</td>
|
||||
<td class="px-4 py-3 text-gray-600 dark:text-gray-400">Bis zum Schließen des Browsers</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-4 py-3 text-gray-600 dark:text-gray-400">Funktionale Cookies</td>
|
||||
<td class="px-4 py-3 text-gray-600 dark:text-gray-400">1 Jahr</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-4 py-3 text-gray-600 dark:text-gray-400">Analytische Cookies</td>
|
||||
<td class="px-4 py-3 text-gray-600 dark:text-gray-400">2 Jahre</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="px-4 py-3 text-gray-600 dark:text-gray-400">Marketing-Cookies</td>
|
||||
<td class="px-4 py-3 text-gray-600 dark:text-gray-400">1 Jahr</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">Wie können Sie Cookies verwalten?</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
||||
Sie können Ihre Cookie-Einstellungen jederzeit ändern. Die meisten Browser erlauben es Ihnen:
|
||||
</p>
|
||||
<ul class="list-disc list-inside text-gray-600 dark:text-gray-400 mb-4">
|
||||
<li>Cookies anzuzeigen und zu löschen</li>
|
||||
<li>Cookies von Drittanbietern zu blockieren</li>
|
||||
<li>Alle Cookies zu blockieren</li>
|
||||
<li>Cookies beim Schließen des Browsers zu löschen</li>
|
||||
</ul>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
||||
Bitte beachten Sie, dass das Deaktivieren von Cookies die Funktionalität unserer Website beeinträchtigen kann.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">Weitere Informationen</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
||||
Weitere Informationen zum Datenschutz finden Sie in unserer <a href="/datenschutz" class="text-[var(--color-primary)] hover:underline">Datenschutzerklärung</a>.
|
||||
</p>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Bei Fragen zu unseren Cookie-Richtlinien kontaktieren Sie uns bitte unter:
|
||||
<a href="mailto:datenschutz@businessportal.de" class="text-[var(--color-primary)] hover:underline">datenschutz@businessportal.de</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-500">
|
||||
Stand: Januar 2025
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<livewire:web.footer />
|
||||
</main>
|
||||
|
||||
@endsection
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
:root {
|
||||
--color-primary: {{ $domainConfig['color_scheme']['primary'] ?? '#cf3628' }};
|
||||
--color-secondary: {{ $domainConfig['color_scheme']['secondary'] ?? '#f0834a' }};
|
||||
}
|
||||
[x-cloak] { display: none !important; }
|
||||
</style>
|
||||
@endpush
|
||||
152
resources/views/web/datenschutz.blade.php
Normal file
152
resources/views/web/datenschutz.blade.php
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
@extends('web.layouts.web-master')
|
||||
|
||||
@section('title', 'Datenschutzerklärung - Business Portal 24')
|
||||
|
||||
@section('content')
|
||||
|
||||
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
|
||||
<livewire:web.burger-menu />
|
||||
<livewire:web.header />
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="relative overflow-hidden text-white py-16 animate-fade-in"
|
||||
style="background: var(--gradient-hero);">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-4 animate-fade-in-up">
|
||||
Datenschutzerklärung
|
||||
</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Content Section -->
|
||||
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 md:p-12 transition-colors duration-200">
|
||||
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">1. Datenschutz auf einen Blick</h2>
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Allgemeine Hinweise</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
||||
Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen Daten passiert,
|
||||
wenn Sie diese Website besuchen. Personenbezogene Daten sind alle Daten, mit denen Sie persönlich identifiziert werden können.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Datenerfassung auf dieser Website</h3>
|
||||
<p class="font-semibold text-gray-900 dark:text-gray-100 mb-2">Wer ist verantwortlich für die Datenerfassung auf dieser Website?</p>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
||||
Die Datenverarbeitung auf dieser Website erfolgt durch den Websitebetreiber. Dessen Kontaktdaten können Sie dem Abschnitt
|
||||
„Hinweis zur Verantwortlichen Stelle" in dieser Datenschutzerklärung entnehmen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">2. Hosting</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
||||
Wir hosten die Inhalte unserer Website bei folgenden Anbietern:
|
||||
</p>
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Externes Hosting</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Diese Website wird extern gehostet. Die personenbezogenen Daten, die auf dieser Website erfasst werden, werden auf den Servern
|
||||
des Hosters / der Hoster gespeichert. Hierbei kann es sich v. a. um IP-Adressen, Kontaktanfragen, Meta- und Kommunikationsdaten,
|
||||
Vertragsdaten, Kontaktdaten, Namen, Websitezugriffe und sonstige Daten, die über eine Website generiert werden, handeln.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">3. Allgemeine Hinweise und Pflichtinformationen</h2>
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Datenschutz</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
||||
Die Betreiber dieser Seiten nehmen den Schutz Ihrer persönlichen Daten sehr ernst. Wir behandeln Ihre personenbezogenen Daten
|
||||
vertraulich und entsprechend den gesetzlichen Datenschutzvorschriften sowie dieser Datenschutzerklärung.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">4. Datenerfassung auf dieser Website</h2>
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Cookies</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
||||
Unsere Internetseiten verwenden so genannte „Cookies". Cookies sind kleine Datenpakete und richten auf Ihrem Endgerät keinen Schaden an.
|
||||
Sie werden entweder vorübergehend für die Dauer einer Sitzung (Session-Cookies) oder dauerhaft (permanente Cookies) auf Ihrem Endgerät
|
||||
gespeichert.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Server-Log-Dateien</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
||||
Der Provider der Seiten erhebt und speichert automatisch Informationen in so genannten Server-Log-Dateien, die Ihr Browser
|
||||
automatisch an uns übermittelt. Dies sind:
|
||||
</p>
|
||||
<ul class="list-disc list-inside text-gray-600 dark:text-gray-400 mb-4">
|
||||
<li>Browsertyp und Browserversion</li>
|
||||
<li>verwendetes Betriebssystem</li>
|
||||
<li>Referrer URL</li>
|
||||
<li>Hostname des zugreifenden Rechners</li>
|
||||
<li>Uhrzeit der Serveranfrage</li>
|
||||
<li>IP-Adresse</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">5. Analyse-Tools und Werbung</h2>
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Google Analytics</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Diese Website nutzt Funktionen des Webanalysedienstes Google Analytics. Anbieter ist die Google Ireland Limited („Google"),
|
||||
Gordon House, Barrow Street, Dublin 4, Irland.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">6. Newsletter</h2>
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Newsletterdaten</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Wenn Sie den auf der Website angebotenen Newsletter beziehen möchten, benötigen wir von Ihnen eine E-Mail-Adresse sowie
|
||||
Informationen, welche uns die Überprüfung gestatten, dass Sie der Inhaber der angegebenen E-Mail-Adresse sind und mit dem
|
||||
Empfang des Newsletters einverstanden sind.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">7. Ihre Rechte</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
||||
Sie haben folgende Rechte:
|
||||
</p>
|
||||
<ul class="list-disc list-inside text-gray-600 dark:text-gray-400">
|
||||
<li>Recht auf Auskunft über Ihre gespeicherten personenbezogenen Daten</li>
|
||||
<li>Recht auf Berichtigung unrichtiger Daten</li>
|
||||
<li>Recht auf Löschung Ihrer Daten</li>
|
||||
<li>Recht auf Einschränkung der Datenverarbeitung</li>
|
||||
<li>Recht auf Datenübertragbarkeit</li>
|
||||
<li>Widerspruchsrecht gegen die Datenverarbeitung</li>
|
||||
<li>Beschwerderecht bei einer Aufsichtsbehörde</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-500">
|
||||
Stand: Januar 2025
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<livewire:web.footer />
|
||||
</main>
|
||||
|
||||
@endsection
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
:root {
|
||||
--color-primary: {{ $domainConfig['color_scheme']['primary'] ?? '#cf3628' }};
|
||||
--color-secondary: {{ $domainConfig['color_scheme']['secondary'] ?? '#f0834a' }};
|
||||
}
|
||||
[x-cloak] { display: none !important; }
|
||||
</style>
|
||||
@endpush
|
||||
419
resources/views/web/faq.blade.php
Normal file
419
resources/views/web/faq.blade.php
Normal file
|
|
@ -0,0 +1,419 @@
|
|||
@extends('web.layouts.web-master')
|
||||
|
||||
@section('title', 'FAQ - Häufig gestellte Fragen - Business Portal 24')
|
||||
|
||||
@section('content')
|
||||
|
||||
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-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-16 animate-fade-in"
|
||||
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 animate-fade-in-up" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-4 animate-fade-in-up animation-delay-200">
|
||||
Häufig gestellte Fragen
|
||||
</h1>
|
||||
<p class="text-xl text-white/90 max-w-2xl mx-auto animate-fade-in-up animation-delay-300">
|
||||
Finden Sie schnell Antworten auf die wichtigsten Fragen rund um Business Portal
|
||||
</p>
|
||||
</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-faq" 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-faq)"/>
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Search Section -->
|
||||
<section class="py-8 bg-white dark:bg-gray-950 border-b border-gray-200 dark:border-gray-800 transition-colors duration-200">
|
||||
<div class="container mx-auto px-4 max-w-2xl">
|
||||
<div class="relative">
|
||||
<input
|
||||
type="search"
|
||||
placeholder="Suchen Sie nach Themen, z.B. 'Preise' oder 'Newsroom'..."
|
||||
class="w-full px-4 py-3 pl-12 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200"
|
||||
/>
|
||||
<svg class="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ Categories -->
|
||||
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<!-- Category: Erste Schritte -->
|
||||
<div class="mb-12">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div class="w-10 h-10 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-lg flex items-center justify-center">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">
|
||||
Erste Schritte
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4" x-data="{ open: null }">
|
||||
<!-- Question 1 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden transition-colors duration-200">
|
||||
<button @click="open = open === 1 ? null : 1"
|
||||
class="w-full p-6 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 dark:text-gray-100 text-left pr-4">
|
||||
Wie veröffentliche ich meine erste Pressemitteilung?
|
||||
</span>
|
||||
<svg class="h-5 w-5 text-gray-500 dark:text-gray-400 flex-shrink-0 transition-transform duration-200"
|
||||
:class="{ 'rotate-180': open === 1 }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div x-show="open === 1" x-collapse x-cloak>
|
||||
<div class="px-6 pb-6 text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
Nach der Registrierung klicken Sie auf 'Veröffentlichen' in der Hauptnavigation. Folgen Sie dem intuitiven 5-Schritte-Wizard: Metadaten eingeben, Content erstellen, Medien hochladen, Kontaktdaten hinterlegen und Vorschau prüfen. Bei Fragen steht unser Support-Team jederzeit zur Verfügung.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Question 2 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden transition-colors duration-200">
|
||||
<button @click="open = open === 2 ? null : 2"
|
||||
class="w-full p-6 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 dark:text-gray-100 text-left pr-4">
|
||||
Muss ich mich registrieren, um Pressemitteilungen zu lesen?
|
||||
</span>
|
||||
<svg class="h-5 w-5 text-gray-500 dark:text-gray-400 flex-shrink-0 transition-transform duration-200"
|
||||
:class="{ 'rotate-180': open === 2 }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div x-show="open === 2" x-collapse x-cloak>
|
||||
<div class="px-6 pb-6 text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
Nein, alle veröffentlichten Pressemitteilungen sind frei zugänglich. Eine Registrierung ist nur erforderlich, wenn Sie selbst Inhalte veröffentlichen oder einen Newsroom erstellen möchten.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Question 3 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden transition-colors duration-200">
|
||||
<button @click="open = open === 3 ? null : 3"
|
||||
class="w-full p-6 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 dark:text-gray-100 text-left pr-4">
|
||||
Wie lange dauert die Freischaltung meiner Pressemitteilung?
|
||||
</span>
|
||||
<svg class="h-5 w-5 text-gray-500 dark:text-gray-400 flex-shrink-0 transition-transform duration-200"
|
||||
:class="{ 'rotate-180': open === 3 }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div x-show="open === 3" x-collapse x-cloak>
|
||||
<div class="px-6 pb-6 text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
In der Regel werden Pressemitteilungen innerhalb von 2-4 Stunden geprüft und freigeschaltet. Professional- und Enterprise-Kunden profitieren von einer beschleunigten Prüfung innerhalb von maximal 1 Stunde.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Category: Account & Abrechnung -->
|
||||
<div class="mb-12">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div class="w-10 h-10 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-lg flex items-center justify-center">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">
|
||||
Account & Abrechnung
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4" x-data="{ open: null }">
|
||||
<!-- Question 1 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden transition-colors duration-200">
|
||||
<button @click="open = open === 4 ? null : 4"
|
||||
class="w-full p-6 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 dark:text-gray-100 text-left pr-4">
|
||||
Wie ändere ich meinen Tarif?
|
||||
</span>
|
||||
<svg class="h-5 w-5 text-gray-500 dark:text-gray-400 flex-shrink-0 transition-transform duration-200"
|
||||
:class="{ 'rotate-180': open === 4 }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div x-show="open === 4" x-collapse x-cloak>
|
||||
<div class="px-6 pb-6 text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
In Ihren Kontoeinstellungen unter 'Abonnement & Billing' können Sie jederzeit Ihren Tarif upgraden oder downgraden. Upgrades gelten sofort, Downgrades zum nächsten Abrechnungszeitraum.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Question 2 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden transition-colors duration-200">
|
||||
<button @click="open = open === 5 ? null : 5"
|
||||
class="w-full p-6 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 dark:text-gray-100 text-left pr-4">
|
||||
Welche Zahlungsmethoden werden akzeptiert?
|
||||
</span>
|
||||
<svg class="h-5 w-5 text-gray-500 dark:text-gray-400 flex-shrink-0 transition-transform duration-200"
|
||||
:class="{ 'rotate-180': open === 5 }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div x-show="open === 5" x-collapse x-cloak>
|
||||
<div class="px-6 pb-6 text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
Wir akzeptieren Kreditkarten (Visa, Mastercard, American Express), SEPA-Lastschrift und PayPal. Enterprise-Kunden können auch per Rechnung zahlen.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Question 3 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden transition-colors duration-200">
|
||||
<button @click="open = open === 6 ? null : 6"
|
||||
class="w-full p-6 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 dark:text-gray-100 text-left pr-4">
|
||||
Kann ich mein Konto löschen?
|
||||
</span>
|
||||
<svg class="h-5 w-5 text-gray-500 dark:text-gray-400 flex-shrink-0 transition-transform duration-200"
|
||||
:class="{ 'rotate-180': open === 6 }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div x-show="open === 6" x-collapse x-cloak>
|
||||
<div class="px-6 pb-6 text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
Ja, Sie können Ihr Konto jederzeit in den Einstellungen unter 'Account verwalten' löschen. Beachten Sie, dass bereits veröffentlichte Pressemitteilungen aus SEO-Gründen online bleiben, aber nicht mehr Ihrem Account zugeordnet sind.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Category: Pressemitteilungen & Content -->
|
||||
<div class="mb-12">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div class="w-10 h-10 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-lg flex items-center justify-center">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">
|
||||
Pressemitteilungen & Content
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4" x-data="{ open: null }">
|
||||
<!-- Question 1 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden transition-colors duration-200">
|
||||
<button @click="open = open === 7 ? null : 7"
|
||||
class="w-full p-6 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 dark:text-gray-100 text-left pr-4">
|
||||
Welche Dateiformate werden für Medien unterstützt?
|
||||
</span>
|
||||
<svg class="h-5 w-5 text-gray-500 dark:text-gray-400 flex-shrink-0 transition-transform duration-200"
|
||||
:class="{ 'rotate-180': open === 7 }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div x-show="open === 7" x-collapse x-cloak>
|
||||
<div class="px-6 pb-6 text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
Bilder: JPG, PNG, WebP (max. 10 MB). Dokumente: PDF (max. 25 MB). Videos können über YouTube/Vimeo-Einbettung hinzugefügt werden.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Question 2 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden transition-colors duration-200">
|
||||
<button @click="open = open === 8 ? null : 8"
|
||||
class="w-full p-6 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 dark:text-gray-100 text-left pr-4">
|
||||
Kann ich eine Pressemitteilung nach Veröffentlichung bearbeiten?
|
||||
</span>
|
||||
<svg class="h-5 w-5 text-gray-500 dark:text-gray-400 flex-shrink-0 transition-transform duration-200"
|
||||
:class="{ 'rotate-180': open === 8 }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div x-show="open === 8" x-collapse x-cloak>
|
||||
<div class="px-6 pb-6 text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
Ja, Professional- und Enterprise-Kunden können Pressemitteilungen bis zu 7 Tage nach Veröffentlichung bearbeiten. Bei Free-Accounts ist eine nachträgliche Bearbeitung nicht möglich.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Question 3 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden transition-colors duration-200">
|
||||
<button @click="open = open === 9 ? null : 9"
|
||||
class="w-full p-6 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 dark:text-gray-100 text-left pr-4">
|
||||
Wie optimiere ich meine Pressemitteilung für SEO?
|
||||
</span>
|
||||
<svg class="h-5 w-5 text-gray-500 dark:text-gray-400 flex-shrink-0 transition-transform duration-200"
|
||||
:class="{ 'rotate-180': open === 9 }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div x-show="open === 9" x-collapse x-cloak>
|
||||
<div class="px-6 pb-6 text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
Nutzen Sie aussagekräftige Headlines (max. 70 Zeichen), integrieren Sie relevante Keywords natürlich, fügen Sie Alt-Texte für Bilder hinzu und strukturieren Sie den Text mit Zwischenüberschriften. Unser Editor zeigt Ihnen einen SEO-Score in Echtzeit.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Category: Newsroom & Features -->
|
||||
<div class="mb-12">
|
||||
<div class="flex items-center gap-3 mb-6">
|
||||
<div class="w-10 h-10 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-lg flex items-center justify-center">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">
|
||||
Newsroom & Features
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4" x-data="{ open: null }">
|
||||
<!-- Question 1 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden transition-colors duration-200">
|
||||
<button @click="open = open === 10 ? null : 10"
|
||||
class="w-full p-6 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 dark:text-gray-100 text-left pr-4">
|
||||
Was ist ein Newsroom und wie erstelle ich einen?
|
||||
</span>
|
||||
<svg class="h-5 w-5 text-gray-500 dark:text-gray-400 flex-shrink-0 transition-transform duration-200"
|
||||
:class="{ 'rotate-180': open === 10 }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div x-show="open === 10" x-collapse x-cloak>
|
||||
<div class="px-6 pb-6 text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
Ein Newsroom ist Ihre dedizierte Unternehmensseite auf Business Portal, wo alle Ihre Pressemitteilungen gebündelt werden. Professional- und Enterprise-Kunden können ihren Newsroom mit Logo, Farben und zusätzlichen Informationen individualisieren.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Question 2 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden transition-colors duration-200">
|
||||
<button @click="open = open === 11 ? null : 11"
|
||||
class="w-full p-6 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
|
||||
<span class="font-semibold text-gray-900 dark:text-gray-100 text-left pr-4">
|
||||
Wie funktionieren die Analytics?
|
||||
</span>
|
||||
<svg class="h-5 w-5 text-gray-500 dark:text-gray-400 flex-shrink-0 transition-transform duration-200"
|
||||
:class="{ 'rotate-180': open === 11 }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<div x-show="open === 11" x-collapse x-cloak>
|
||||
<div class="px-6 pb-6 text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
Professional-Kunden erhalten detaillierte Statistiken zu Views, Klicks, geografischer Verteilung und Referrern. Die Daten werden in Echtzeit aktualisiert und können als Report exportiert werden.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact CTA -->
|
||||
<section class="py-16 bg-gray-50/50 dark:bg-gray-900/50 transition-colors duration-200">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<div class="max-w-2xl mx-auto">
|
||||
<h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
|
||||
Frage nicht gefunden?
|
||||
</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-8">
|
||||
Unser Support-Team hilft Ihnen gerne weiter. Kontaktieren Sie uns per E-Mail oder Chat.
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-4 justify-center">
|
||||
<a href="/kontakt" class="inline-flex items-center justify-center px-6 py-3 text-sm font-medium text-white rounded-lg shadow-md hover:shadow-lg transition-all" style="background: var(--gradient-hero);">
|
||||
Kontakt aufnehmen
|
||||
</a>
|
||||
<a href="#" class="inline-flex items-center justify-center px-6 py-3 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition-all">
|
||||
Hilfe-Center besuchen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Popular Topics -->
|
||||
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
|
||||
<div class="container mx-auto px-4 max-w-4xl">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-8 text-center">
|
||||
Beliebte Themen
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-4 hover:shadow-lg transition-all cursor-pointer">
|
||||
<a href="#" class="text-gray-900 dark:text-gray-100 hover:text-[var(--color-primary)] transition-colors">
|
||||
Erste Schritte →
|
||||
</a>
|
||||
</div>
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-4 hover:shadow-lg transition-all cursor-pointer">
|
||||
<a href="#" class="text-gray-900 dark:text-gray-100 hover:text-[var(--color-primary)] transition-colors">
|
||||
Preise & Abrechnung →
|
||||
</a>
|
||||
</div>
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-4 hover:shadow-lg transition-all cursor-pointer">
|
||||
<a href="#" class="text-gray-900 dark:text-gray-100 hover:text-[var(--color-primary)] transition-colors">
|
||||
API-Dokumentation →
|
||||
</a>
|
||||
</div>
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-4 hover:shadow-lg transition-all cursor-pointer">
|
||||
<a href="#" class="text-gray-900 dark:text-gray-100 hover:text-[var(--color-primary)] transition-colors">
|
||||
SEO Best Practices →
|
||||
</a>
|
||||
</div>
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-4 hover:shadow-lg transition-all cursor-pointer">
|
||||
<a href="#" class="text-gray-900 dark:text-gray-100 hover:text-[var(--color-primary)] transition-colors">
|
||||
Medienformate →
|
||||
</a>
|
||||
</div>
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-4 hover:shadow-lg transition-all cursor-pointer">
|
||||
<a href="#" class="text-gray-900 dark:text-gray-100 hover:text-[var(--color-primary)] transition-colors">
|
||||
Datenschutz →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</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
|
||||
256
resources/views/web/hilfe.blade.php
Normal file
256
resources/views/web/hilfe.blade.php
Normal file
|
|
@ -0,0 +1,256 @@
|
|||
@extends('web.layouts.web-master')
|
||||
|
||||
@section('title', 'Hilfe-Center - Business Portal 24')
|
||||
|
||||
@section('content')
|
||||
|
||||
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
|
||||
<livewire:web.burger-menu />
|
||||
<livewire:web.header />
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="relative overflow-hidden text-white py-16 animate-fade-in"
|
||||
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 animate-fade-in-up" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-4 animate-fade-in-up animation-delay-200">
|
||||
Hilfe-Center
|
||||
</h1>
|
||||
<p class="text-xl text-white/90 max-w-2xl mx-auto animate-fade-in-up animation-delay-300">
|
||||
Wir helfen Ihnen gerne weiter – Finden Sie Antworten oder kontaktieren Sie unser Support-Team
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Quick Links Section -->
|
||||
<section class="py-16 bg-white dark:bg-gray-950 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-gray-900 dark:text-gray-100 mb-4">
|
||||
Schnellzugriff
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<a href="/faq" class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all group">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg class="h-6 w-6 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors">
|
||||
FAQ
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Häufig gestellte Fragen
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<a href="#" class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all group">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg class="h-6 w-6 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors">
|
||||
Video-Tutorials
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Schritt-für-Schritt Anleitungen
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<a href="/kontakt" class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all group">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg class="h-6 w-6 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 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors">
|
||||
Kontakt
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Direkter Support
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Help Topics Section -->
|
||||
<section class="py-16 bg-gray-50/50 dark:bg-gray-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-gray-900 dark:text-gray-100 mb-4">
|
||||
Hilfe-Themen
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Topic 1 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4">
|
||||
Erste Schritte
|
||||
</h3>
|
||||
<ul class="space-y-2">
|
||||
<li>
|
||||
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] transition-colors">
|
||||
→ Account erstellen
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] transition-colors">
|
||||
→ Erste Pressemitteilung veröffentlichen
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] transition-colors">
|
||||
→ Newsroom einrichten
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] transition-colors">
|
||||
→ Profil vervollständigen
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Topic 2 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4">
|
||||
Pressemitteilungen
|
||||
</h3>
|
||||
<ul class="space-y-2">
|
||||
<li>
|
||||
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] transition-colors">
|
||||
→ PM erstellen und formatieren
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] transition-colors">
|
||||
→ Medien hochladen
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] transition-colors">
|
||||
→ SEO-Optimierung
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] transition-colors">
|
||||
→ PM bearbeiten/löschen
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Topic 3 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4">
|
||||
Account & Abrechnung
|
||||
</h3>
|
||||
<ul class="space-y-2">
|
||||
<li>
|
||||
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] transition-colors">
|
||||
→ Tarif wechseln
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] transition-colors">
|
||||
→ Zahlungsmethoden
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] transition-colors">
|
||||
→ Rechnungen herunterladen
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] transition-colors">
|
||||
→ Account kündigen
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Topic 4 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4">
|
||||
Erweiterte Features
|
||||
</h3>
|
||||
<ul class="space-y-2">
|
||||
<li>
|
||||
<a href="/api" class="text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] transition-colors">
|
||||
→ API-Integration
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] transition-colors">
|
||||
→ Analytics nutzen
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/newsrooms" class="text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] transition-colors">
|
||||
→ Newsroom anpassen
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] transition-colors">
|
||||
→ Team-Management
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Support Section -->
|
||||
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 md:p-12 transition-colors duration-200">
|
||||
<div class="text-center">
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">
|
||||
Benötigen Sie weitere Hilfe?
|
||||
</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-8">
|
||||
Unser Support-Team steht Ihnen Mo-Fr von 9-18 Uhr zur Verfügung
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-4 justify-center">
|
||||
<a href="/kontakt" class="inline-flex items-center justify-center px-6 py-3 text-sm font-medium text-white rounded-lg shadow-md hover:shadow-lg transition-all" style="background: var(--gradient-hero);">
|
||||
Support kontaktieren
|
||||
</a>
|
||||
<a href="/faq" class="inline-flex items-center justify-center px-6 py-3 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition-all">
|
||||
FAQ durchsuchen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<livewire:web.footer />
|
||||
</main>
|
||||
|
||||
@endsection
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
:root {
|
||||
--color-primary: {{ $domainConfig['color_scheme']['primary'] ?? '#cf3628' }};
|
||||
--color-secondary: {{ $domainConfig['color_scheme']['secondary'] ?? '#f0834a' }};
|
||||
}
|
||||
[x-cloak] { display: none !important; }
|
||||
</style>
|
||||
@endpush
|
||||
31
resources/views/web/home.blade.php
Normal file
31
resources/views/web/home.blade.php
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
@extends('web.layouts.web-master')
|
||||
|
||||
@section('title', 'B2IN - Connecting Design and Property')
|
||||
|
||||
@section('content')
|
||||
<div style="background-color: hsl(var(--background));">
|
||||
<livewire:web.components.ui.header />
|
||||
|
||||
<main>
|
||||
<livewire:web.components.sections.hero />
|
||||
<livewire:web.components.sections.ecosystem-core />
|
||||
<livewire:web.components.sections.vision-section bg="bg-accent" />
|
||||
<livewire:web.components.sections.brand-worlds />
|
||||
<livewire:web.components.sections.c-t-a-section />
|
||||
</main>
|
||||
|
||||
<livewire:web.components.ui.footer />
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
[x-cloak] {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@push('scripts')
|
||||
{{-- Alpine.js wird zentral im Layout geladen --}}
|
||||
@endpush
|
||||
123
resources/views/web/impressum.blade.php
Normal file
123
resources/views/web/impressum.blade.php
Normal file
|
|
@ -0,0 +1,123 @@
|
|||
@extends('web.layouts.web-master')
|
||||
|
||||
@section('title', 'Impressum - Business Portal 24')
|
||||
|
||||
@section('content')
|
||||
|
||||
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
|
||||
<livewire:web.burger-menu />
|
||||
<livewire:web.header />
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="relative overflow-hidden text-white py-16 animate-fade-in"
|
||||
style="background: var(--gradient-hero);">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-4 animate-fade-in-up">
|
||||
Impressum
|
||||
</h1>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Content Section -->
|
||||
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="max-w-4xl mx-auto prose prose-gray dark:prose-invert">
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 md:p-12 transition-colors duration-200">
|
||||
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-6">Angaben gemäß § 5 TMG</h2>
|
||||
|
||||
<div class="mb-8">
|
||||
<p class="font-semibold text-gray-900 dark:text-gray-100">Business Portal GmbH</p>
|
||||
<p class="text-gray-600 dark:text-gray-400">Musterstraße 123</p>
|
||||
<p class="text-gray-600 dark:text-gray-400">10115 Berlin</p>
|
||||
<p class="text-gray-600 dark:text-gray-400">Deutschland</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Kontakt</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">Telefon: +49 (0) 30 1234567-0</p>
|
||||
<p class="text-gray-600 dark:text-gray-400">E-Mail: info@businessportal.de</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Vertreten durch</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">Geschäftsführer: Dr. Michael Weber</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Registereintrag</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">Eintragung im Handelsregister</p>
|
||||
<p class="text-gray-600 dark:text-gray-400">Registergericht: Amtsgericht Berlin-Charlottenburg</p>
|
||||
<p class="text-gray-600 dark:text-gray-400">Registernummer: HRB 123456 B</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Umsatzsteuer-ID</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">Umsatzsteuer-Identifikationsnummer gemäß § 27a UStG:</p>
|
||||
<p class="text-gray-600 dark:text-gray-400">DE123456789</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">Lisa Müller</p>
|
||||
<p class="text-gray-600 dark:text-gray-400">Musterstraße 123</p>
|
||||
<p class="text-gray-600 dark:text-gray-400">10115 Berlin</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Streitschlichtung</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit:
|
||||
<a href="https://ec.europa.eu/consumers/odr" class="text-[var(--color-primary)] hover:underline" target="_blank">https://ec.europa.eu/consumers/odr</a>
|
||||
</p>
|
||||
<p class="text-gray-600 dark:text-gray-400 mt-4">
|
||||
Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Haftung für Inhalte</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich.
|
||||
Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu
|
||||
überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mb-8">
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Haftung für Links</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Unser Angebot enthält Links zu externen Websites Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für
|
||||
diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder
|
||||
Betreiber der Seiten verantwortlich.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Urheberrecht</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht.
|
||||
Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen
|
||||
der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<livewire:web.footer />
|
||||
</main>
|
||||
|
||||
@endsection
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
:root {
|
||||
--color-primary: {{ $domainConfig['color_scheme']['primary'] ?? '#cf3628' }};
|
||||
--color-secondary: {{ $domainConfig['color_scheme']['secondary'] ?? '#f0834a' }};
|
||||
}
|
||||
[x-cloak] { display: none !important; }
|
||||
</style>
|
||||
@endpush
|
||||
191
resources/views/web/karriere.blade.php
Normal file
191
resources/views/web/karriere.blade.php
Normal file
|
|
@ -0,0 +1,191 @@
|
|||
@extends('web.layouts.web-master')
|
||||
|
||||
@section('title', 'Karriere - Business Portal 24')
|
||||
|
||||
@section('content')
|
||||
|
||||
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
|
||||
<livewire:web.burger-menu />
|
||||
<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">
|
||||
Karriere bei Business Portal
|
||||
</h1>
|
||||
<p class="text-xl text-white/90 leading-relaxed animate-fade-in-up animation-delay-200">
|
||||
Werde Teil eines dynamischen Teams und gestalte die Zukunft der Unternehmenskommunikation
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Why Join Section -->
|
||||
<section class="py-16 bg-white dark:bg-gray-950 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-gray-900 dark:text-gray-100 mb-4">
|
||||
Warum Business Portal?
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 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 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-gray-900 dark:text-gray-100 mb-3">
|
||||
Wachstum & Entwicklung
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Kontinuierliche Weiterbildung und klare Karrierepfade
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 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 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">
|
||||
Flexible Arbeitszeiten
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Work-Life-Balance mit Remote- und Hybrid-Optionen
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 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 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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">
|
||||
Tolles Team
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Arbeite mit motivierten Profis in einem inspirierenden Umfeld
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Open Positions Section -->
|
||||
<section class="py-16 bg-gray-50/50 dark:bg-gray-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-gray-900 dark:text-gray-100 mb-4">
|
||||
Offene Stellen
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<!-- Job 1 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100 mb-2">
|
||||
Senior Full-Stack Developer (m/w/d)
|
||||
</h3>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-3 py-1 bg-[var(--color-primary)]/10 text-[var(--color-primary)] text-xs rounded-full">Vollzeit</span>
|
||||
<span class="px-3 py-1 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-xs rounded-full">Remote möglich</span>
|
||||
<span class="px-3 py-1 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-xs rounded-full">Berlin</span>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="px-4 py-2 text-sm font-medium text-white rounded-lg transition-all" style="background: var(--gradient-hero);">
|
||||
Bewerben
|
||||
</a>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Wir suchen einen erfahrenen Full-Stack Developer für unser Engineering-Team...
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Job 2 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100 mb-2">
|
||||
Content Manager (m/w/d)
|
||||
</h3>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-3 py-1 bg-[var(--color-primary)]/10 text-[var(--color-primary)] text-xs rounded-full">Vollzeit</span>
|
||||
<span class="px-3 py-1 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-xs rounded-full">Berlin</span>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="px-4 py-2 text-sm font-medium text-white rounded-lg transition-all" style="background: var(--gradient-hero);">
|
||||
Bewerben
|
||||
</a>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Verstärke unser Content-Team und gestalte redaktionelle Prozesse...
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Job 3 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<div>
|
||||
<h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100 mb-2">
|
||||
Customer Success Manager (m/w/d)
|
||||
</h3>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="px-3 py-1 bg-[var(--color-primary)]/10 text-[var(--color-primary)] text-xs rounded-full">Vollzeit</span>
|
||||
<span class="px-3 py-1 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-xs rounded-full">Remote möglich</span>
|
||||
<span class="px-3 py-1 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-xs rounded-full">München</span>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="px-4 py-2 text-sm font-medium text-white rounded-lg transition-all" style="background: var(--gradient-hero);">
|
||||
Bewerben
|
||||
</a>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Betreue unsere Kunden und hilf ihnen, das Maximum aus unserer Plattform herauszuholen...
|
||||
</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">
|
||||
<h2 class="text-3xl font-bold mb-4">
|
||||
Initiativbewerbung
|
||||
</h2>
|
||||
<p class="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
|
||||
Du passt nicht zu den offenen Stellen, möchtest aber trotzdem Teil unseres Teams werden?
|
||||
</p>
|
||||
<a href="/kontakt" class="inline-flex items-center justify-center px-8 py-4 text-sm font-medium bg-white text-[var(--color-primary)] hover:bg-gray-100 rounded-lg shadow-md hover:shadow-lg transition-all">
|
||||
Kontakt aufnehmen
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<livewire:web.footer />
|
||||
</main>
|
||||
|
||||
@endsection
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
:root {
|
||||
--color-primary: {{ $domainConfig['color_scheme']['primary'] ?? '#cf3628' }};
|
||||
--color-secondary: {{ $domainConfig['color_scheme']['secondary'] ?? '#f0834a' }};
|
||||
}
|
||||
[x-cloak] { display: none !important; }
|
||||
</style>
|
||||
@endpush
|
||||
492
resources/views/web/kategorie.blade.php
Normal file
492
resources/views/web/kategorie.blade.php
Normal file
|
|
@ -0,0 +1,492 @@
|
|||
@extends('web.layouts.web-master')
|
||||
|
||||
@section('title', 'IT & Software - Pressemitteilungen - Business Portal 24')
|
||||
|
||||
@section('content')
|
||||
|
||||
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
|
||||
<!-- Burger Menu Component -->
|
||||
<livewire:web.burger-menu />
|
||||
|
||||
<!-- Header Component -->
|
||||
<livewire:web.header />
|
||||
|
||||
<!-- Breadcrumbs -->
|
||||
<section class="bg-white dark:bg-gray-950 border-b border-gray-200 dark:border-gray-800 py-4 transition-colors duration-200">
|
||||
<div class="container mx-auto px-4">
|
||||
<nav class="text-sm text-gray-600 dark:text-gray-400">
|
||||
<a href="/" class="hover:text-gray-900 dark:hover:text-gray-100 transition-colors">Start</a>
|
||||
<span class="mx-2">›</span>
|
||||
<a href="/kategorien" class="hover:text-gray-900 dark:hover:text-gray-100 transition-colors">Kategorien</a>
|
||||
<span class="mx-2">›</span>
|
||||
<span class="text-gray-900 dark:text-gray-100 font-medium">IT & Software</span>
|
||||
</nav>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Category Header -->
|
||||
<section class="bg-gradient-to-r from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 border-b border-gray-200 dark:border-gray-800 py-12 transition-colors duration-200">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="max-w-4xl">
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium text-white mb-4" style="background: var(--gradient-hero);">
|
||||
IT & Software
|
||||
</span>
|
||||
<h1 class="text-4xl md:text-5xl font-bold text-gray-900 dark:text-gray-100 mb-4">
|
||||
Pressemitteilungen IT & Software
|
||||
</h1>
|
||||
<p class="text-xl text-gray-600 dark:text-gray-400">
|
||||
Aktuelle Nachrichten aus der IT-Branche – KI, Cloud, Cybersecurity und mehr
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- SEO Text - Collapsible -->
|
||||
<section class="bg-white dark:bg-gray-950 border-b border-gray-200 dark:border-gray-800 transition-colors duration-200" x-data="{ expanded: false }">
|
||||
<div class="container mx-auto px-4 py-6">
|
||||
<div class="max-w-4xl">
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 transition-colors duration-200">
|
||||
<div :class="{ 'line-clamp-3': !expanded }" class="prose prose-sm max-w-none">
|
||||
<p class="text-gray-900 dark:text-gray-100">
|
||||
Die Kategorie <strong>IT & Software</strong> auf Business Portal vereint die wichtigsten Nachrichten und Pressemitteilungen aus der dynamischen Technologiebranche. Hier finden Sie aktuelle Meldungen zu Künstlicher Intelligenz, Cloud Computing, Cybersecurity, Enterprise-Software und vielen weiteren IT-Themen.
|
||||
</p>
|
||||
<template x-if="expanded">
|
||||
<div>
|
||||
<p class="text-gray-900 dark:text-gray-100 mt-4">
|
||||
Die IT-Branche ist einer der innovativsten und am schnellsten wachsenden Wirtschaftszweige in Deutschland, Österreich und der Schweiz. Unternehmen investieren Milliarden in die digitale Transformation, neue Geschäftsmodelle entstehen durch Cloud-Technologien, und künstliche Intelligenz revolutioniert Prozesse in allen Branchen.
|
||||
</p>
|
||||
<p class="text-gray-900 dark:text-gray-100 mt-4">
|
||||
Als zentrale Anlaufstelle für IT-Pressemitteilungen bietet Business Portal Journalisten, Analysten und Entscheidern einen kompakten Überblick über die neuesten Entwicklungen. Von Software-Releases über Produktankündigungen bis hin zu Forschungsergebnissen und Unternehmensnachrichten – hier bleiben Sie auf dem Laufenden.
|
||||
</p>
|
||||
<p class="text-gray-900 dark:text-gray-100 mt-4">
|
||||
Nutzen Sie die Filterfunktionen, um gezielt nach Themen, Regionen oder Zeiträumen zu suchen. Abonnieren Sie den RSS-Feed oder Newsletter, um keine wichtige IT-Meldung mehr zu verpassen.
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<button
|
||||
@click="expanded = !expanded"
|
||||
class="mt-4 inline-flex items-center text-sm font-medium text-[var(--color-primary)] hover:text-[var(--color-secondary)] transition-colors"
|
||||
>
|
||||
<svg class="h-4 w-4 mr-2 transition-transform" :class="{ 'rotate-180': expanded }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
<span x-text="expanded ? 'Weniger anzeigen' : 'Mehr lesen'"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Main Content with Sidebar -->
|
||||
<section class="py-8 bg-white dark:bg-gray-950 transition-colors duration-200">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex flex-col lg:flex-row gap-8">
|
||||
<!-- Main Content -->
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="text-sm font-medium text-gray-600 dark:text-gray-400 flex items-center gap-2">
|
||||
<span class="w-2 h-2 bg-[var(--color-primary)] rounded-full"></span>
|
||||
142 Pressemitteilungen in IT & Software
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<!-- Press Release Cards Grid -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
|
||||
<!-- Card 1 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden hover:shadow-lg transition-all">
|
||||
<div class="p-5">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-[var(--color-primary)]/10 text-[var(--color-primary)]">
|
||||
IT & Software
|
||||
</span>
|
||||
<span class="text-xs text-gray-600 dark:text-gray-400">Heute, 14:30</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2 line-clamp-2">
|
||||
KI-Revolution: Deutsche Unternehmen investieren Milliarden in Automatisierung
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">
|
||||
Eine neue Studie zeigt: Unternehmen im DACH-Raum planen für 2025 Investitionen in Höhe von über 15 Milliarden Euro in KI-gestützte Automatisierungslösungen.
|
||||
</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
<span>Berlin</span>
|
||||
</div>
|
||||
<a href="/release-detail" class="inline-flex items-center text-sm text-[var(--color-primary)] hover:text-[var(--color-secondary)] transition-colors font-medium">
|
||||
Lesen →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 2 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden hover:shadow-lg transition-all">
|
||||
<div class="p-5">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-[var(--color-primary)]/10 text-[var(--color-primary)]">
|
||||
IT & Software
|
||||
</span>
|
||||
<span class="text-xs text-gray-600 dark:text-gray-400">Heute, 10:00</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2 line-clamp-2">
|
||||
Cloud-Migration: 78% der deutschen Unternehmen setzen auf Hybrid-Cloud-Strategien
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">
|
||||
Neue Umfrage zeigt: Hybrid-Cloud wird zum Standard. Unternehmen kombinieren Public und Private Cloud für maximale Flexibilität.
|
||||
</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
<span>Frankfurt</span>
|
||||
</div>
|
||||
<a href="#" class="inline-flex items-center text-sm text-[var(--color-primary)] hover:text-[var(--color-secondary)] transition-colors font-medium">
|
||||
Lesen →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 3 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden hover:shadow-lg transition-all">
|
||||
<div class="p-5">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-[var(--color-primary)]/10 text-[var(--color-primary)]">
|
||||
IT & Software
|
||||
</span>
|
||||
<span class="text-xs text-gray-600 dark:text-gray-400">Gestern, 15:20</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2 line-clamp-2">
|
||||
Cybersecurity: Unternehmen verstärken Schutzmaßnahmen gegen Hackerangriffe
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">
|
||||
Nach einer Serie von Cyberattacken erhöhen deutsche Unternehmen ihre Investitionen in IT-Sicherheit um durchschnittlich 35%.
|
||||
</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
<span>München</span>
|
||||
</div>
|
||||
<a href="#" class="inline-flex items-center text-sm text-[var(--color-primary)] hover:text-[var(--color-secondary)] transition-colors font-medium">
|
||||
Lesen →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 4 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden hover:shadow-lg transition-all">
|
||||
<div class="p-5">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-[var(--color-primary)]/10 text-[var(--color-primary)]">
|
||||
IT & Software
|
||||
</span>
|
||||
<span class="text-xs text-gray-600 dark:text-gray-400">Gestern, 11:45</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2 line-clamp-2">
|
||||
Low-Code-Plattformen revolutionieren die Softwareentwicklung
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">
|
||||
Citizen Developer werden zur treibenden Kraft: Low-Code-Lösungen ermöglichen auch Nicht-Programmierern professionelle Anwendungen.
|
||||
</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
<span>Berlin</span>
|
||||
</div>
|
||||
<a href="#" class="inline-flex items-center text-sm text-[var(--color-primary)] hover:text-[var(--color-secondary)] transition-colors font-medium">
|
||||
Lesen →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 5 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden hover:shadow-lg transition-all">
|
||||
<div class="p-5">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-[var(--color-primary)]/10 text-[var(--color-primary)]">
|
||||
IT & Software
|
||||
</span>
|
||||
<span class="text-xs text-gray-600 dark:text-gray-400">2 Tage</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2 line-clamp-2">
|
||||
5G-Rollout beschleunigt: Netzabdeckung erreicht 85% in Deutschland
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">
|
||||
Mobilfunkanbieter berichten von schnellerem Ausbau als erwartet. Industrielle IoT-Anwendungen profitieren enorm.
|
||||
</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
<span>Deutschland</span>
|
||||
</div>
|
||||
<a href="#" class="inline-flex items-center text-sm text-[var(--color-primary)] hover:text-[var(--color-secondary)] transition-colors font-medium">
|
||||
Lesen →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 6 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden hover:shadow-lg transition-all">
|
||||
<div class="p-5">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-[var(--color-primary)]/10 text-[var(--color-primary)]">
|
||||
IT & Software
|
||||
</span>
|
||||
<span class="text-xs text-gray-600 dark:text-gray-400">3 Tage</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2 line-clamp-2">
|
||||
Quantum Computing: Deutscher Forschungsverbund meldet Durchbruch
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">
|
||||
Wissenschaftler entwickeln stabilere Qubits. Kommerzielle Anwendungen in der Materialforschung rücken näher.
|
||||
</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
<span>Stuttgart</span>
|
||||
</div>
|
||||
<a href="#" class="inline-flex items-center text-sm text-[var(--color-primary)] hover:text-[var(--color-secondary)] transition-colors font-medium">
|
||||
Lesen →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="flex justify-center">
|
||||
<div class="flex items-center gap-2">
|
||||
<button class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors">
|
||||
Zurück
|
||||
</button>
|
||||
<button class="px-4 py-2 text-sm font-medium text-white rounded-lg shadow-md hover:shadow-lg transition-all" style="background: var(--gradient-hero);">
|
||||
1
|
||||
</button>
|
||||
<button class="px-4 py-2 text-sm font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
|
||||
2
|
||||
</button>
|
||||
<button class="px-4 py-2 text-sm font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
|
||||
3
|
||||
</button>
|
||||
<button class="px-4 py-2 text-sm font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
|
||||
4
|
||||
</button>
|
||||
<button class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors">
|
||||
Weiter
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sidebar - Hidden on mobile -->
|
||||
<aside class="lg:w-80 space-y-6">
|
||||
<!-- Sub-Categories -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 transition-colors duration-200">
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
|
||||
<span class="w-1 h-5 bg-gradient-to-b from-[var(--color-primary)] to-[var(--color-secondary)] rounded-full"></span>
|
||||
Unterkategorien
|
||||
</h3>
|
||||
<div class="space-y-2">
|
||||
<a href="#" class="block text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] hover:translate-x-1 transition-all">
|
||||
Künstliche Intelligenz →
|
||||
</a>
|
||||
<a href="#" class="block text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] hover:translate-x-1 transition-all">
|
||||
Cloud Computing →
|
||||
</a>
|
||||
<a href="#" class="block text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] hover:translate-x-1 transition-all">
|
||||
Cybersecurity →
|
||||
</a>
|
||||
<a href="#" class="block text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] hover:translate-x-1 transition-all">
|
||||
Software-as-a-Service →
|
||||
</a>
|
||||
<a href="#" class="block text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] hover:translate-x-1 transition-all">
|
||||
Enterprise Software →
|
||||
</a>
|
||||
<a href="#" class="block text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] hover:translate-x-1 transition-all">
|
||||
Mobile Apps →
|
||||
</a>
|
||||
<a href="#" class="block text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] hover:translate-x-1 transition-all">
|
||||
Blockchain & Web3 →
|
||||
</a>
|
||||
<a href="#" class="block text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] hover:translate-x-1 transition-all">
|
||||
DevOps & Entwicklung →
|
||||
</a>
|
||||
<a href="#" class="block text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] hover:translate-x-1 transition-all">
|
||||
Data Analytics →
|
||||
</a>
|
||||
<a href="#" class="block text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] hover:translate-x-1 transition-all">
|
||||
IoT & Edge Computing →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Related Topics -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 transition-colors duration-200">
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
|
||||
<span class="w-1 h-5 bg-gradient-to-b from-[var(--color-primary)] to-[var(--color-secondary)] rounded-full"></span>
|
||||
Verwandte Themen
|
||||
</h3>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 cursor-pointer hover:bg-[var(--color-primary)] hover:text-white transition-colors">
|
||||
Digitale Transformation
|
||||
</span>
|
||||
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 cursor-pointer hover:bg-[var(--color-primary)] hover:text-white transition-colors">
|
||||
Automatisierung
|
||||
</span>
|
||||
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 cursor-pointer hover:bg-[var(--color-primary)] hover:text-white transition-colors">
|
||||
Machine Learning
|
||||
</span>
|
||||
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 cursor-pointer hover:bg-[var(--color-primary)] hover:text-white transition-colors">
|
||||
API & Integrationen
|
||||
</span>
|
||||
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 cursor-pointer hover:bg-[var(--color-primary)] hover:text-white transition-colors">
|
||||
Agile Methoden
|
||||
</span>
|
||||
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 cursor-pointer hover:bg-[var(--color-primary)] hover:text-white transition-colors">
|
||||
Remote Work Tools
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Newsletter Subscribe -->
|
||||
<div class="bg-gradient-to-br from-[var(--color-primary)]/5 to-[var(--color-secondary)]/5 rounded-xl border border-gray-200 dark:border-gray-800 p-6 transition-colors duration-200">
|
||||
<svg class="h-8 w-8 text-[var(--color-primary)] mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
|
||||
IT-Newsletter abonnieren
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||
Erhalten Sie die neuesten IT-Pressemitteilungen direkt in Ihr Postfach
|
||||
</p>
|
||||
<a href="#" class="inline-flex items-center justify-center w-full px-6 py-3 text-sm font-medium text-white rounded-lg shadow-md hover:shadow-lg transition-all" style="background: var(--gradient-hero);">
|
||||
Jetzt abonnieren
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- RSS Feed -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 transition-colors duration-200">
|
||||
<svg class="h-8 w-8 text-[var(--color-secondary)] mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 5c7.18 0 13 5.82 13 13M6 11a7 7 0 017 7m-6 0a1 1 0 11-2 0 1 1 0 012 0z"></path>
|
||||
</svg>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
|
||||
RSS-Feed
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||
Bleiben Sie über neue IT-Meldungen auf dem Laufenden
|
||||
</p>
|
||||
<a href="#" class="inline-flex items-center justify-center w-full px-6 py-3 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition-all">
|
||||
RSS abonnieren
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Top Companies -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 transition-colors duration-200">
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
|
||||
<span class="w-1 h-5 bg-gradient-to-b from-[var(--color-primary)] to-[var(--color-secondary)] rounded-full"></span>
|
||||
Top IT-Unternehmen
|
||||
</h3>
|
||||
<div class="space-y-3">
|
||||
<a href="#" class="flex items-center gap-3 text-sm hover:bg-gray-50 dark:hover:bg-gray-800 p-2 rounded-lg transition-colors">
|
||||
<div class="w-8 h-8 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-xs font-bold text-[var(--color-primary)]">T</span>
|
||||
</div>
|
||||
<span class="text-gray-900 dark:text-gray-100 hover:text-[var(--color-primary)] transition-colors">
|
||||
TechVision Analytics
|
||||
</span>
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 text-sm hover:bg-gray-50 dark:hover:bg-gray-800 p-2 rounded-lg transition-colors">
|
||||
<div class="w-8 h-8 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-xs font-bold text-[var(--color-primary)]">C</span>
|
||||
</div>
|
||||
<span class="text-gray-900 dark:text-gray-100 hover:text-[var(--color-primary)] transition-colors">
|
||||
CloudTech Research
|
||||
</span>
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 text-sm hover:bg-gray-50 dark:hover:bg-gray-800 p-2 rounded-lg transition-colors">
|
||||
<div class="w-8 h-8 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-xs font-bold text-[var(--color-primary)]">C</span>
|
||||
</div>
|
||||
<span class="text-gray-900 dark:text-gray-100 hover:text-[var(--color-primary)] transition-colors">
|
||||
CyberSafe Europe
|
||||
</span>
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 text-sm hover:bg-gray-50 dark:hover:bg-gray-800 p-2 rounded-lg transition-colors">
|
||||
<div class="w-8 h-8 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-xs font-bold text-[var(--color-primary)]">D</span>
|
||||
</div>
|
||||
<span class="text-gray-900 dark:text-gray-100 hover:text-[var(--color-primary)] transition-colors">
|
||||
DevTech Insights
|
||||
</span>
|
||||
</a>
|
||||
<a href="#" class="flex items-center gap-3 text-sm hover:bg-gray-50 dark:hover:bg-gray-800 p-2 rounded-lg transition-colors">
|
||||
<div class="w-8 h-8 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded flex items-center justify-center flex-shrink-0">
|
||||
<span class="text-xs font-bold text-[var(--color-primary)]">Q</span>
|
||||
</div>
|
||||
<span class="text-gray-900 dark:text-gray-100 hover:text-[var(--color-primary)] transition-colors">
|
||||
QuantumTech Germany
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</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;
|
||||
}
|
||||
|
||||
/* Line clamp utilities */
|
||||
.line-clamp-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.line-clamp-3 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
322
resources/views/web/kategorien.blade.php
Normal file
322
resources/views/web/kategorien.blade.php
Normal file
|
|
@ -0,0 +1,322 @@
|
|||
@extends('web.layouts.web-master')
|
||||
|
||||
@section('title', 'Kategorien - Business Portal 24')
|
||||
|
||||
@section('content')
|
||||
|
||||
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
|
||||
<livewire:web.burger-menu />
|
||||
<livewire:web.header />
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="relative overflow-hidden text-white py-16 animate-fade-in"
|
||||
style="background: var(--gradient-hero);">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-4 animate-fade-in-up">
|
||||
Kategorien
|
||||
</h1>
|
||||
<p class="text-xl text-white/90 max-w-2xl mx-auto animate-fade-in-up animation-delay-200">
|
||||
Entdecken Sie Pressemitteilungen nach Themengebieten
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Categories Grid Section -->
|
||||
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
|
||||
<!-- Category 1: Wirtschaft -->
|
||||
<a href="/kategorie/wirtschaft" class="group bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg hover:border-[var(--color-primary)] transition-all">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-14 h-14 bg-gradient-to-br from-blue-500/10 to-blue-600/10 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||||
<svg class="h-7 w-7 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors">
|
||||
Wirtschaft
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
|
||||
Unternehmensnachrichten, Finanzberichte, Wirtschaftstrends
|
||||
</p>
|
||||
<span class="text-xs text-gray-500 dark:text-gray-500">2.450+ Mitteilungen</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Category 2: Technologie -->
|
||||
<a href="/kategorie/technologie" class="group bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg hover:border-[var(--color-primary)] transition-all">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-14 h-14 bg-gradient-to-br from-purple-500/10 to-purple-600/10 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||||
<svg class="h-7 w-7 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors">
|
||||
Technologie
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
|
||||
IT, Software, Digitalisierung, Innovation
|
||||
</p>
|
||||
<span class="text-xs text-gray-500 dark:text-gray-500">1.890+ Mitteilungen</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Category 3: Gesundheit -->
|
||||
<a href="/kategorie/gesundheit" class="group bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg hover:border-[var(--color-primary)] transition-all">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-14 h-14 bg-gradient-to-br from-green-500/10 to-green-600/10 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||||
<svg class="h-7 w-7 text-green-500" 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>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors">
|
||||
Gesundheit
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
|
||||
Medizin, Pharma, Gesundheitswesen, Forschung
|
||||
</p>
|
||||
<span class="text-xs text-gray-500 dark:text-gray-500">1.340+ Mitteilungen</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Category 4: Finanzen -->
|
||||
<a href="/kategorie/finanzen" class="group bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg hover:border-[var(--color-primary)] transition-all">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-14 h-14 bg-gradient-to-br from-yellow-500/10 to-yellow-600/10 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||||
<svg class="h-7 w-7 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors">
|
||||
Finanzen
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
|
||||
Banking, Investment, Fintech, Versicherungen
|
||||
</p>
|
||||
<span class="text-xs text-gray-500 dark:text-gray-500">980+ Mitteilungen</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Category 5: Automotive -->
|
||||
<a href="/kategorie/automotive" class="group bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg hover:border-[var(--color-primary)] transition-all">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-14 h-14 bg-gradient-to-br from-red-500/10 to-red-600/10 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||||
<svg class="h-7 w-7 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors">
|
||||
Automotive
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
|
||||
Fahrzeuge, E-Mobilität, Zulieferer, Logistik
|
||||
</p>
|
||||
<span class="text-xs text-gray-500 dark:text-gray-500">750+ Mitteilungen</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Category 6: Immobilien -->
|
||||
<a href="/kategorie/immobilien" class="group bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg hover:border-[var(--color-primary)] transition-all">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-14 h-14 bg-gradient-to-br from-indigo-500/10 to-indigo-600/10 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||||
<svg class="h-7 w-7 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors">
|
||||
Immobilien
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
|
||||
Bau, Entwicklung, PropTech, Gewerbe
|
||||
</p>
|
||||
<span class="text-xs text-gray-500 dark:text-gray-500">640+ Mitteilungen</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Category 7: Energie -->
|
||||
<a href="/kategorie/energie" class="group bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg hover:border-[var(--color-primary)] transition-all">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-14 h-14 bg-gradient-to-br from-orange-500/10 to-orange-600/10 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||||
<svg class="h-7 w-7 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors">
|
||||
Energie
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
|
||||
Erneuerbare Energien, Strom, Gas, Nachhaltigkeit
|
||||
</p>
|
||||
<span class="text-xs text-gray-500 dark:text-gray-500">520+ Mitteilungen</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Category 8: Bildung -->
|
||||
<a href="/kategorie/bildung" class="group bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg hover:border-[var(--color-primary)] transition-all">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-14 h-14 bg-gradient-to-br from-cyan-500/10 to-cyan-600/10 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||||
<svg class="h-7 w-7 text-cyan-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors">
|
||||
Bildung
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
|
||||
Schulen, Universitäten, E-Learning, Weiterbildung
|
||||
</p>
|
||||
<span class="text-xs text-gray-500 dark:text-gray-500">480+ Mitteilungen</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Category 9: Handel -->
|
||||
<a href="/kategorie/handel" class="group bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg hover:border-[var(--color-primary)] transition-all">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-14 h-14 bg-gradient-to-br from-pink-500/10 to-pink-600/10 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||||
<svg class="h-7 w-7 text-pink-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors">
|
||||
Handel
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
|
||||
Einzelhandel, E-Commerce, Konsumgüter
|
||||
</p>
|
||||
<span class="text-xs text-gray-500 dark:text-gray-500">410+ Mitteilungen</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Category 10: Tourismus -->
|
||||
<a href="/kategorie/tourismus" class="group bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg hover:border-[var(--color-primary)] transition-all">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-14 h-14 bg-gradient-to-br from-teal-500/10 to-teal-600/10 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||||
<svg class="h-7 w-7 text-teal-500" 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>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors">
|
||||
Tourismus
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
|
||||
Reisen, Hotellerie, Gastronomie, Veranstaltungen
|
||||
</p>
|
||||
<span class="text-xs text-gray-500 dark:text-gray-500">390+ Mitteilungen</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Category 11: Sport -->
|
||||
<a href="/kategorie/sport" class="group bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg hover:border-[var(--color-primary)] transition-all">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-14 h-14 bg-gradient-to-br from-lime-500/10 to-lime-600/10 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||||
<svg class="h-7 w-7 text-lime-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors">
|
||||
Sport
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
|
||||
Sportveranstaltungen, Vereine, Fitness, Sponsoring
|
||||
</p>
|
||||
<span class="text-xs text-gray-500 dark:text-gray-500">320+ Mitteilungen</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Category 12: Kultur -->
|
||||
<a href="/kategorie/kultur" class="group bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg hover:border-[var(--color-primary)] transition-all">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-14 h-14 bg-gradient-to-br from-violet-500/10 to-violet-600/10 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
|
||||
<svg class="h-7 w-7 text-violet-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors">
|
||||
Kultur
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
|
||||
Kunst, Musik, Theater, Medien, Entertainment
|
||||
</p>
|
||||
<span class="text-xs text-gray-500 dark:text-gray-500">290+ Mitteilungen</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Stats Section -->
|
||||
<section class="py-16 bg-gray-50/50 dark:bg-gray-900/50 transition-colors duration-200">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
|
||||
<div>
|
||||
<div class="text-3xl font-bold bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] bg-clip-text text-transparent mb-2">
|
||||
12
|
||||
</div>
|
||||
<div class="text-sm text-gray-600 dark:text-gray-400">Kategorien</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-3xl font-bold bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] bg-clip-text text-transparent mb-2">
|
||||
10.000+
|
||||
</div>
|
||||
<div class="text-sm text-gray-600 dark:text-gray-400">Pressemitteilungen</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-3xl font-bold bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] bg-clip-text text-transparent mb-2">
|
||||
850+
|
||||
</div>
|
||||
<div class="text-sm text-gray-600 dark:text-gray-400">Neue pro Monat</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-3xl 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-gray-600 dark:text-gray-400">Monatliche Leser</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<livewire:web.footer />
|
||||
</main>
|
||||
|
||||
@endsection
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
:root {
|
||||
--color-primary: {{ $domainConfig['color_scheme']['primary'] ?? '#cf3628' }};
|
||||
--color-secondary: {{ $domainConfig['color_scheme']['secondary'] ?? '#f0834a' }};
|
||||
}
|
||||
[x-cloak] { display: none !important; }
|
||||
</style>
|
||||
@endpush
|
||||
326
resources/views/web/kontakt.blade.php
Normal file
326
resources/views/web/kontakt.blade.php
Normal file
|
|
@ -0,0 +1,326 @@
|
|||
@extends('web.layouts.web-master')
|
||||
|
||||
@section('title', 'Kontakt - Business Portal 24')
|
||||
|
||||
@section('content')
|
||||
|
||||
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-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-16 animate-fade-in"
|
||||
style="background: var(--gradient-hero);">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-4 animate-fade-in-up">
|
||||
Kontakt
|
||||
</h1>
|
||||
<p class="text-xl text-white/90 max-w-2xl mx-auto animate-fade-in-up animation-delay-200">
|
||||
Wir sind für Sie da – per E-Mail, Telefon oder vor Ort in München
|
||||
</p>
|
||||
</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-kontakt" 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-kontakt)"/>
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Methods -->
|
||||
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto mb-16">
|
||||
<!-- Email -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-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 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
|
||||
E-Mail
|
||||
</h3>
|
||||
<a href="mailto:info@businessportal.de" class="text-[var(--color-primary)] hover:text-[var(--color-secondary)] transition-colors font-medium block mb-1">
|
||||
info@businessportal.de
|
||||
</a>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Antwort innerhalb von 24 Stunden
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Phone -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-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 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
|
||||
Telefon
|
||||
</h3>
|
||||
<a href="tel:+498912345678" class="text-[var(--color-primary)] hover:text-[var(--color-secondary)] transition-colors font-medium block mb-1">
|
||||
+49 89 1234 5678
|
||||
</a>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Mo-Fr 9:00-18:00 Uhr
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Address -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-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="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
|
||||
Adresse
|
||||
</h3>
|
||||
<p class="text-gray-900 dark:text-gray-100 font-medium mb-1">
|
||||
Maximilianstraße 35
|
||||
</p>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
80539 München, Deutschland
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Business Hours -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
|
||||
Geschäftszeiten
|
||||
</h3>
|
||||
<p class="text-gray-900 dark:text-gray-100 font-medium mb-1">
|
||||
Mo-Fr 9:00-18:00
|
||||
</p>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Sa-So geschlossen
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Form & Map -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
|
||||
<!-- Form -->
|
||||
<div>
|
||||
<div class="mb-8">
|
||||
<h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
|
||||
Nachricht senden
|
||||
</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Haben Sie Fragen oder benötigen Sie Unterstützung? Füllen Sie das Formular aus und wir melden uns schnellstmöglich bei Ihnen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form class="space-y-6" method="POST" action="/kontakt">
|
||||
@csrf
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="space-y-2">
|
||||
<label for="vorname" class="block text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||
Vorname *
|
||||
</label>
|
||||
<input
|
||||
id="vorname"
|
||||
name="vorname"
|
||||
type="text"
|
||||
placeholder="Max"
|
||||
required
|
||||
class="w-full px-4 py-2 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200"
|
||||
/>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<label for="nachname" class="block text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||
Nachname *
|
||||
</label>
|
||||
<input
|
||||
id="nachname"
|
||||
name="nachname"
|
||||
type="text"
|
||||
placeholder="Mustermann"
|
||||
required
|
||||
class="w-full px-4 py-2 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label for="email" class="block text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||
E-Mail-Adresse *
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="max.mustermann@beispiel.de"
|
||||
required
|
||||
class="w-full px-4 py-2 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label for="unternehmen" class="block text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||
Unternehmen
|
||||
</label>
|
||||
<input
|
||||
id="unternehmen"
|
||||
name="unternehmen"
|
||||
type="text"
|
||||
placeholder="Firma GmbH"
|
||||
class="w-full px-4 py-2 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label for="telefon" class="block text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||
Telefon
|
||||
</label>
|
||||
<input
|
||||
id="telefon"
|
||||
name="telefon"
|
||||
type="tel"
|
||||
placeholder="+49 123 456789"
|
||||
class="w-full px-4 py-2 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label for="betreff" class="block text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||
Betreff *
|
||||
</label>
|
||||
<input
|
||||
id="betreff"
|
||||
name="betreff"
|
||||
type="text"
|
||||
placeholder="Wie können wir Ihnen helfen?"
|
||||
required
|
||||
class="w-full px-4 py-2 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label for="nachricht" class="block text-sm font-medium text-gray-900 dark:text-gray-100">
|
||||
Nachricht *
|
||||
</label>
|
||||
<textarea
|
||||
id="nachricht"
|
||||
name="nachricht"
|
||||
placeholder="Ihre Nachricht an uns..."
|
||||
rows="6"
|
||||
required
|
||||
class="w-full px-4 py-2 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200 resize-none"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="text-sm text-gray-600 dark:text-gray-400">
|
||||
* Pflichtfelder
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full inline-flex items-center justify-center px-6 py-3 text-sm font-medium text-white rounded-lg shadow-md hover:shadow-lg transition-all"
|
||||
style="background: var(--gradient-hero);"
|
||||
>
|
||||
<svg class="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
|
||||
</svg>
|
||||
Nachricht senden
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Map & Info -->
|
||||
<div class="space-y-6">
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 transition-colors duration-200">
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-6">
|
||||
Besuchen Sie uns
|
||||
</h3>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<h4 class="font-medium text-gray-900 dark:text-gray-100 mb-2">Hauptsitz München</h4>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Maximilianstraße 35<br />
|
||||
80539 München<br />
|
||||
Deutschland
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-gray-200 dark:border-gray-800 pt-6">
|
||||
<h4 class="font-medium text-gray-900 dark:text-gray-100 mb-2">Anfahrt</h4>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||
<strong class="text-gray-900 dark:text-gray-100">Öffentliche Verkehrsmittel:</strong><br />
|
||||
U-Bahn U4/U5 – Haltestelle Lehel<br />
|
||||
Tram 19 – Haltestelle Maxmonument
|
||||
</p>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
<strong class="text-gray-900 dark:text-gray-100">Parken:</strong><br />
|
||||
Parkhaus Maximilianstraße (5 Min. Fußweg)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="h-80 bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden">
|
||||
<div class="w-full h-full bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 flex items-center justify-center">
|
||||
<div class="text-center">
|
||||
<svg class="h-12 w-12 text-[var(--color-primary)] mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Interaktive Karte
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50/50 dark:bg-gray-900/50 rounded-xl border border-gray-200 dark:border-gray-800 p-6 transition-colors duration-200">
|
||||
<h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">
|
||||
Schnelle Hilfe benötigt?
|
||||
</h4>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||
Für dringende Anfragen oder technischen Support steht Ihnen unser Chat zur Verfügung.
|
||||
</p>
|
||||
<a href="#" class="inline-flex items-center justify-center w-full px-6 py-3 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition-all">
|
||||
Live-Chat starten
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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
|
||||
171
resources/views/web/layouts/admin-master.blade.php
Normal file
171
resources/views/web/layouts/admin-master.blade.php
Normal file
|
|
@ -0,0 +1,171 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
|
||||
<title>@yield('title', $domainName ?? 'Admin - ' . config('app.name'))</title>
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" href="{{ asset('img/favicons/admin-favicon.ico') }}">
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.bunny.net">
|
||||
<link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600,700" rel="stylesheet" />
|
||||
|
||||
<!-- Styles -->
|
||||
@vite(['resources/css/portal.css', 'resources/js/app.js'])
|
||||
|
||||
<!-- Additional Styles -->
|
||||
@stack('styles')
|
||||
</head>
|
||||
|
||||
<body class="antialiased bg-gray-50 dark:bg-gray-900">
|
||||
<div class="min-h-screen flex">
|
||||
<!-- Sidebar Navigation -->
|
||||
<aside class="w-64 bg-white dark:bg-gray-800 shadow-md hidden md:block">
|
||||
<div class="p-6">
|
||||
<a href="{{ route('admin.home') }}" class="text-xl font-bold text-gray-900 dark:text-white">
|
||||
{{ $domainName ?? config('app.name') . ' Admin' }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<nav class="mt-10 px-6">
|
||||
<a href="{{ route('admin.dashboard') }}"
|
||||
class="block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-100 dark:hover:bg-gray-700 {{ request()->routeIs('admin.dashboard') ? 'bg-gray-100 dark:bg-gray-700' : '' }}">
|
||||
Dashboard
|
||||
</a>
|
||||
<a href="{{ route('admin.settings.profile') }}"
|
||||
class="block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-100 dark:hover:bg-gray-700 {{ request()->routeIs('admin.settings.profile') ? 'bg-gray-100 dark:bg-gray-700' : '' }}">
|
||||
Profil
|
||||
</a>
|
||||
<!-- Weitere Navigationspunkte hier -->
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<div class="flex-1 flex flex-col">
|
||||
<!-- Top Navigation -->
|
||||
<header class="bg-white dark:bg-gray-800 shadow-sm">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between h-16">
|
||||
<div class="flex items-center md:hidden">
|
||||
<!-- Mobile menu button -->
|
||||
<button type="button"
|
||||
class="text-gray-500 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
|
||||
id="mobile-menu-button">
|
||||
<span class="sr-only">Menu öffnen</span>
|
||||
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
|
||||
viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M4 6h16M4 12h16M4 18h16" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
@if (app()->environment('local'))
|
||||
<!-- Domain-Informationsanzeige (nur in local) -->
|
||||
<div
|
||||
class="mr-4 text-xs px-2 py-1 rounded bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200">
|
||||
{{ Request::getHost() }}
|
||||
@if (config('domains.dev_settings.simulate_domain'))
|
||||
<span
|
||||
class="inline-flex items-center ml-1 px-1.5 py-0.5 rounded-full text-xs bg-yellow-100 text-yellow-800">
|
||||
Simuliert
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- User Dropdown -->
|
||||
<div class="ml-3 relative">
|
||||
<div>
|
||||
<button type="button"
|
||||
class="flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
||||
id="user-menu-button">
|
||||
<span class="sr-only">Benutzermenü öffnen</span>
|
||||
<div class="h-8 w-8 rounded-full bg-gray-200 flex items-center justify-center">
|
||||
<span class="text-xs font-medium">{{ Auth::user()->name[0] ?? 'U' }}</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Dropdown menu -->
|
||||
<div class="hidden origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white dark:bg-gray-700 ring-1 ring-black ring-opacity-5 focus:outline-none"
|
||||
role="menu" id="user-menu">
|
||||
<a href="{{ route('admin.settings.profile') }}"
|
||||
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
|
||||
role="menuitem">Profil</a>
|
||||
<a href="{{ route('admin.settings.appearance') }}"
|
||||
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
|
||||
role="menuitem">Einstellungen</a>
|
||||
<form method="POST" action="{{ route('logout') }}">
|
||||
@csrf
|
||||
<button type="submit"
|
||||
class="block w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
|
||||
role="menuitem">Abmelden</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Mobile menu (off-canvas) -->
|
||||
<div class="md:hidden hidden" id="mobile-menu">
|
||||
<div class="px-2 pt-2 pb-3 space-y-1 bg-white dark:bg-gray-800 shadow-lg">
|
||||
<a href="{{ route('admin.dashboard') }}"
|
||||
class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Dashboard</a>
|
||||
<a href="{{ route('admin.settings.profile') }}"
|
||||
class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Profil</a>
|
||||
<!-- Weitere mobile Navigationspunkte hier -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Page Content -->
|
||||
<main class="flex-1 py-10">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
@yield('content')
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script>
|
||||
// Toggle user dropdown
|
||||
const userMenuButton = document.getElementById('user-menu-button');
|
||||
const userMenu = document.getElementById('user-menu');
|
||||
|
||||
if (userMenuButton && userMenu) {
|
||||
userMenuButton.addEventListener('click', function() {
|
||||
userMenu.classList.toggle('hidden');
|
||||
});
|
||||
|
||||
// Close the dropdown when clicked outside
|
||||
document.addEventListener('click', function(event) {
|
||||
if (!userMenuButton.contains(event.target) && !userMenu.contains(event.target)) {
|
||||
userMenu.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Mobile menu toggle
|
||||
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
||||
const mobileMenu = document.getElementById('mobile-menu');
|
||||
|
||||
if (mobileMenuButton && mobileMenu) {
|
||||
mobileMenuButton.addEventListener('click', function() {
|
||||
mobileMenu.classList.toggle('hidden');
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Additional Scripts -->
|
||||
@stack('scripts')
|
||||
</body>
|
||||
|
||||
</html>
|
||||
126
resources/views/web/layouts/footer.blade.php
Normal file
126
resources/views/web/layouts/footer.blade.php
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
<footer class="bg-white">
|
||||
<div class="mx-auto max-w-7xl px-6 pt-12 pb-8 sm:pt-16 lg:px-8 lg:pt-16">
|
||||
<div class="xl:grid xl:grid-cols-3 xl:gap-8">
|
||||
<img class="h-9" src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600" alt="Company name">
|
||||
<div class="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
|
||||
<div class="md:grid md:grid-cols-2 md:gap-8">
|
||||
<div>
|
||||
<h3 class="text-sm/6 font-semibold text-gray-900">Solutions</h3>
|
||||
<ul role="list" class="mt-6 space-y-4">
|
||||
<li>
|
||||
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Marketing</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Analytics</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Automation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Commerce</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Insights</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-10 md:mt-0">
|
||||
<h3 class="text-sm/6 font-semibold text-gray-900">Support</h3>
|
||||
<ul role="list" class="mt-6 space-y-4">
|
||||
<li>
|
||||
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Submit ticket</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Documentation</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Guides</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:grid md:grid-cols-2 md:gap-8">
|
||||
<div>
|
||||
<h3 class="text-sm/6 font-semibold text-gray-900">Company</h3>
|
||||
<ul role="list" class="mt-6 space-y-4">
|
||||
<li>
|
||||
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">About</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Blog</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Jobs</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Press</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="mt-10 md:mt-0">
|
||||
<h3 class="text-sm/6 font-semibold text-gray-900">Legal</h3>
|
||||
<ul role="list" class="mt-6 space-y-4">
|
||||
<li>
|
||||
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Terms of service</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Privacy policy</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">License</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-16 border-t border-gray-900/10 pt-8 sm:mt-20 lg:mt-24 lg:flex lg:items-center lg:justify-between">
|
||||
<div>
|
||||
<h3 class="text-sm/6 font-semibold text-gray-900">Subscribe to our newsletter</h3>
|
||||
<p class="mt-2 text-sm/6 text-gray-600">The latest news, articles, and resources, sent to your inbox weekly.</p>
|
||||
</div>
|
||||
<form class="mt-6 sm:flex sm:max-w-md lg:mt-0">
|
||||
<label for="email-address" class="sr-only">Email address</label>
|
||||
<input type="email" name="email-address" id="email-address" autocomplete="email" required class="w-full min-w-0 rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:w-56 sm:text-sm/6" placeholder="Enter your email">
|
||||
<div class="mt-4 sm:mt-0 sm:ml-4 sm:shrink-0">
|
||||
<button type="submit" class="flex w-full items-center justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Subscribe</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="mt-8 border-t border-gray-900/10 pt-8 md:flex md:items-center md:justify-between">
|
||||
<div class="flex gap-x-6 md:order-2">
|
||||
<a href="#" class="text-gray-600 hover:text-gray-800">
|
||||
<span class="sr-only">Facebook</span>
|
||||
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="text-gray-600 hover:text-gray-800">
|
||||
<span class="sr-only">Instagram</span>
|
||||
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="text-gray-600 hover:text-gray-800">
|
||||
<span class="sr-only">X</span>
|
||||
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="text-gray-600 hover:text-gray-800">
|
||||
<span class="sr-only">GitHub</span>
|
||||
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" class="text-gray-600 hover:text-gray-800">
|
||||
<span class="sr-only">YouTube</span>
|
||||
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path fill-rule="evenodd" d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<p class="mt-8 text-sm/6 text-gray-600 md:order-1 md:mt-0">© 2024 Your Company, Inc. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
232
resources/views/web/layouts/header.blade.php
Normal file
232
resources/views/web/layouts/header.blade.php
Normal file
|
|
@ -0,0 +1,232 @@
|
|||
<!--
|
||||
Mobile menu
|
||||
|
||||
Off-canvas menu for mobile, show/hide based on off-canvas menu state.
|
||||
-->
|
||||
<div class="relative z-40 lg:hidden" role="dialog" aria-modal="true" x-show="mobileMenuOpen" x-cloak>
|
||||
<!--
|
||||
Off-canvas menu backdrop, show/hide based on off-canvas menu state.
|
||||
|
||||
Entering: "transition-opacity ease-linear duration-300"
|
||||
From: "opacity-0"
|
||||
To: "opacity-100"
|
||||
Leaving: "transition-opacity ease-linear duration-300"
|
||||
From: "opacity-100"
|
||||
To: "opacity-0"
|
||||
-->
|
||||
<div class="fixed inset-0 bg-black/50" aria-hidden="true"
|
||||
x-show="mobileMenuOpen"
|
||||
@click.stop="mobileMenuOpen = false"
|
||||
x-transition:enter="transition-opacity ease-linear duration-300"
|
||||
x-transition:enter-start="opacity-0"
|
||||
x-transition:enter-end="opacity-100"
|
||||
x-transition:leave="transition-opacity ease-linear duration-300"
|
||||
x-transition:leave-start="opacity-100"
|
||||
x-transition:leave-end="opacity-0"></div>
|
||||
|
||||
<div class="fixed inset-0 z-40 flex" x-show="mobileMenuOpen" @mousedown.away="mobileMenuOpen = false">
|
||||
<!--
|
||||
Off-canvas menu, show/hide based on off-canvas menu state.
|
||||
|
||||
Entering: "transition ease-in-out duration-300 transform"
|
||||
From: "-translate-x-full"
|
||||
To: "translate-x-0"
|
||||
Leaving: "transition ease-in-out duration-300 transform"
|
||||
From: "translate-x-0"
|
||||
To: "-translate-x-full"
|
||||
-->
|
||||
<div class="relative flex w-full max-w-xs flex-col overflow-y-auto bg-white pb-12 shadow-xl"
|
||||
x-show="mobileMenuOpen"
|
||||
@click.away="mobileMenuOpen = false"
|
||||
x-transition:enter="transition ease-in-out duration-300 transform"
|
||||
x-transition:enter-start="-translate-x-full"
|
||||
x-transition:enter-end="translate-x-0"
|
||||
x-transition:leave="transition ease-in-out duration-300 transform"
|
||||
x-transition:leave-start="translate-x-0"
|
||||
x-transition:leave-end="-translate-x-full">
|
||||
<div class="flex px-4 pt-5 pb-2">
|
||||
<button type="button" class="-m-2 inline-flex items-center justify-center rounded-md p-2 text-gray-400 pointer-events-auto cursor-pointer" @click="mobileMenuOpen = false">
|
||||
<span class="sr-only">Close menu</span>
|
||||
<svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Links -->
|
||||
<div class="space-y-6 border-t border-gray-200 px-4 py-4">
|
||||
<div class="flow-root">
|
||||
<a href="#" class="-m-2 block p-3 font-medium text-gray-900 hover:text-gray-900 hover:bg-gray-100 rounded-md">Start</a>
|
||||
</div>
|
||||
<div class="flow-root">
|
||||
<a href="#" class="-m-2 block p-3 font-medium text-gray-900 hover:text-gray-900 hover:bg-gray-100 rounded-md">About</a>
|
||||
</div>
|
||||
<div class="flow-root">
|
||||
<a href="#" class="-m-2 block p-3 font-medium text-gray-900 hover:text-gray-900 hover:bg-gray-100 rounded-md">Company</a>
|
||||
</div>
|
||||
<div class="flow-root">
|
||||
<a href="#" class="-m-2 block p-3 font-medium text-gray-900 hover:text-gray-900 hover:bg-gray-100 rounded-md">Stores</a>
|
||||
</div>
|
||||
<div class="flow-root">
|
||||
<a href="#" class="-m-2 block p-3 font-medium text-gray-900 hover:text-gray-900 hover:bg-gray-100 rounded-md">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6 border-t border-gray-200 px-4 py-6">
|
||||
<div class="flow-root">
|
||||
<a href="#" class="-m-2 block p-2 font-semibold text-white rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Create an account</a>
|
||||
</div>
|
||||
<div class="flow-root">
|
||||
<a href="{{ config('domains.domain_admin_url') }}/login" class="-m-2 block p-2 font-semibold text-white rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Sign in</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6 border-t border-gray-200 px-4 py-6">
|
||||
<!-- Currency selector -->
|
||||
<form>
|
||||
<div class="-ml-2 inline-grid grid-cols-1">
|
||||
<div class="flex items-center">
|
||||
<svg class="size-6 text-gray-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<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>
|
||||
<select id="mobile-currency" name="currency" aria-label="Currency" class="w-full appearance-none rounded-md bg-white py-0.5 pr-7 pl-2 text-base font-medium text-gray-700 group-hover:text-gray-800 focus:outline-2 sm:text-sm/6">
|
||||
<option>DE</option>
|
||||
<option>EN</option>
|
||||
</select>
|
||||
<svg class="pointer-events-none -ml-6 size-5 fill-gray-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<header class="relative z-10">
|
||||
<nav aria-label="Top">
|
||||
<!-- Top navigation -->
|
||||
<div class="bg-gray-900">
|
||||
<div class="mx-auto flex h-10 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
|
||||
<!-- Currency selector -->
|
||||
<form class="hidden lg:block lg:flex-1">
|
||||
<div class="-ml-2 inline-grid grid-cols-1">
|
||||
<div class="flex items-center">
|
||||
<svg class="size-6 text-gray-300 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
|
||||
<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>
|
||||
<select id="desktop-currency" name="currency" aria-label="Currency" class="w-full appearance-none rounded-md bg-gray-900 py-0.5 pr-7 pl-2 text-left text-base font-medium text-white focus:outline-2 focus:-outline-offset-1 focus:outline-white sm:text-sm/6">
|
||||
<option>DE</option>
|
||||
<option>EN</option>
|
||||
</select>
|
||||
<svg class="pointer-events-none -ml-6 size-5 fill-gray-300" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<p class="flex-1 text-center text-sm font-medium text-white lg:flex-none">Get free delivery on orders over $100</p>
|
||||
|
||||
<div class="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:space-x-6">
|
||||
<a href="#" class="text-sm font-medium text-white hover:text-gray-100">Create an account</a>
|
||||
<span class="h-6 w-px bg-gray-600" aria-hidden="true"></span>
|
||||
<a href="{{ config('domains.domain_admin_url') }}" class="text-sm font-medium text-white hover:text-gray-100">Sign in</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Secondary navigation -->
|
||||
<div class="bg-white">
|
||||
<div class="border-b border-gray-200">
|
||||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex h-16 items-center justify-between">
|
||||
<!-- Logo (lg+) -->
|
||||
<div class="hidden lg:flex lg:items-center">
|
||||
<a href="#">
|
||||
<span class="sr-only">Your Company</span>
|
||||
<img class="h-8 w-auto" src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600" alt="">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="hidden h-full lg:flex">
|
||||
<!-- Mega menus -->
|
||||
<div class="ml-8 my-2">
|
||||
<div class="flex h-full justify-center space-x-8">
|
||||
<a href="#" class="flex items-center text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md px-2 py-1">Start</a>
|
||||
<a href="#" class="flex items-center text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md px-2 py-1">About</a>
|
||||
<a href="#" class="flex items-center text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md px-2 py-1">Company</a>
|
||||
<a href="#" class="flex items-center text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md px-2 py-1">Stores</a>
|
||||
<a href="#" class="flex items-center text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md px-2 py-1">Contact</a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile menu and search (lg-) -->
|
||||
<div class="flex flex-1 items-center lg:hidden">
|
||||
<!-- Mobile menu toggle, controls the 'mobileMenuOpen' state. -->
|
||||
<button type="button" class="-ml-2 rounded-md bg-white p-2 text-gray-400 pointer-events-auto cursor-pointer" @click="mobileMenuOpen = true">
|
||||
<span class="sr-only">Open menu</span>
|
||||
<svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Search -->
|
||||
<a href="#" class="ml-2 p-2 text-gray-400 hover:text-gray-500">
|
||||
<span class="sr-only">Search</span>
|
||||
<svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Logo (lg-) -->
|
||||
<a href="#" class="lg:hidden">
|
||||
<span class="sr-only">Your Company</span>
|
||||
<img src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600" alt="" class="h-8 w-auto">
|
||||
</a>
|
||||
|
||||
<div class="flex flex-1 items-center justify-end">
|
||||
<div class="flex items-center lg:ml-8">
|
||||
<div class="flex space-x-8">
|
||||
<div class="hidden lg:flex">
|
||||
<a href="#" class="-m-2 p-2 text-gray-400 hover:text-gray-500">
|
||||
<span class="sr-only">Search</span>
|
||||
<svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex">
|
||||
<a href="#" class="-m-2 p-2 text-gray-400 hover:text-gray-500">
|
||||
<span class="sr-only">Account</span>
|
||||
<svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="mx-4 h-6 w-px bg-gray-200 lg:mx-6" aria-hidden="true"></span>
|
||||
|
||||
<div class="flow-root">
|
||||
<a href="#" class="group -m-2 flex items-center p-2">
|
||||
<svg class="size-6 shrink-0 text-gray-400 group-hover:text-gray-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
|
||||
</svg>
|
||||
<span class="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">0</span>
|
||||
<span class="sr-only">items in cart, view bag</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
45
resources/views/web/layouts/web-master-test.blade.php
Normal file
45
resources/views/web/layouts/web-master-test.blade.php
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
|
||||
<title>@yield('title', $domainName ?? config('app.name', 'Laravel'))</title>
|
||||
|
||||
<!-- Domain-spezifisches Favicon -->
|
||||
<link rel="icon" href="{{ asset(\App\Helpers\ThemeHelper::getFaviconPath()) }}">
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.bunny.net">
|
||||
|
||||
@php
|
||||
$font = \App\Helpers\ThemeHelper::getFont();
|
||||
$theme = config('app.theme', 'businessportal24');
|
||||
@endphp
|
||||
|
||||
@vite([\App\Helpers\ThemeHelper::getThemeCssPath(), 'resources/js/app.js'], 'build/' . $theme)
|
||||
|
||||
|
||||
<!-- Additional Styles -->
|
||||
@stack('styles')
|
||||
|
||||
<!-- Domain-spezifische Fonts -->
|
||||
@if ($font === 'Montserrat')
|
||||
<link href="https://fonts.bunny.net/css?family=montserrat:400,500,600,700" rel="stylesheet" />
|
||||
@else
|
||||
<link href="https://fonts.bunny.net/css?family=montserrat:400,500,600,700" rel="stylesheet" />
|
||||
@endif
|
||||
</head>
|
||||
|
||||
<body class="antialiased">
|
||||
|
||||
<!-- TopBar - statisch oben -->
|
||||
|
||||
@yield('content')
|
||||
<!-- Additional Scripts -->
|
||||
@stack('scripts')
|
||||
</body>
|
||||
|
||||
</html>
|
||||
85
resources/views/web/layouts/web-master.blade.php
Normal file
85
resources/views/web/layouts/web-master.blade.php
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="csrf-token" content="{{ csrf_token() }}">
|
||||
|
||||
<title>@yield('title', $domainName ?? config('app.name', 'Laravel'))</title>
|
||||
|
||||
<!-- Domain-spezifisches Favicon -->
|
||||
<link rel="icon" href="{{ asset(\App\Helpers\ThemeHelper::getFaviconPath()) }}">
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.bunny.net">
|
||||
|
||||
@php
|
||||
$font = \App\Helpers\ThemeHelper::getFont();
|
||||
$theme = config('app.theme', 'businessportal24');
|
||||
@endphp
|
||||
|
||||
@vite([\App\Helpers\ThemeHelper::getThemeCssPath(), 'resources/js/app.js'], 'build/' . $theme)
|
||||
|
||||
<!-- Sticky Header Script -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const topbar = document.getElementById('topbar');
|
||||
const header = document.getElementById('header');
|
||||
|
||||
if (!topbar || !header) return;
|
||||
|
||||
let topbarHeight = topbar.offsetHeight;
|
||||
let isHeaderSticky = false;
|
||||
|
||||
function updateHeaderPosition() {
|
||||
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
|
||||
if (scrollTop >= topbarHeight && !isHeaderSticky) {
|
||||
// TopBar ist nicht mehr sichtbar - Header wird sticky
|
||||
header.classList.remove('header-normal');
|
||||
header.classList.add('header-sticky');
|
||||
isHeaderSticky = true;
|
||||
} else if (scrollTop < topbarHeight && isHeaderSticky) {
|
||||
// TopBar ist wieder sichtbar - Header wird normal
|
||||
header.classList.remove('header-sticky');
|
||||
header.classList.add('header-normal');
|
||||
isHeaderSticky = false;
|
||||
}
|
||||
}
|
||||
|
||||
// Initial check
|
||||
updateHeaderPosition();
|
||||
|
||||
// Listen for scroll events
|
||||
window.addEventListener('scroll', updateHeaderPosition);
|
||||
|
||||
// Listen for resize events (in case topbar height changes)
|
||||
window.addEventListener('resize', function() {
|
||||
topbarHeight = topbar.offsetHeight;
|
||||
updateHeaderPosition();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Additional Styles -->
|
||||
@stack('styles')
|
||||
|
||||
<!-- Domain-spezifische Fonts -->
|
||||
@if ($font === 'Montserrat')
|
||||
<link href="https://fonts.bunny.net/css?family=montserrat:400,500,600,700" rel="stylesheet" />
|
||||
@else
|
||||
<link href="https://fonts.bunny.net/css?family=montserrat:400,500,600,700" rel="stylesheet" />
|
||||
@endif
|
||||
</head>
|
||||
|
||||
<body class="antialiased" style="background-color: hsl(var(--background)); color: hsl(var(--foreground));">
|
||||
|
||||
<!-- TopBar - statisch oben -->
|
||||
|
||||
@yield('content')
|
||||
<!-- Additional Scripts -->
|
||||
@stack('scripts')
|
||||
</body>
|
||||
|
||||
</html>
|
||||
331
resources/views/web/newsrooms.blade.php
Normal file
331
resources/views/web/newsrooms.blade.php
Normal file
|
|
@ -0,0 +1,331 @@
|
|||
@extends('web.layouts.web-master')
|
||||
|
||||
@section('title', 'Newsrooms - Business Portal 24')
|
||||
|
||||
@section('content')
|
||||
|
||||
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-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">
|
||||
Newsrooms
|
||||
</h1>
|
||||
<p class="text-xl text-white/90 leading-relaxed animate-fade-in-up animation-delay-200">
|
||||
Ihr professioneller Unternehmens-Newsroom – Alle Pressemitteilungen zentral an einem Ort
|
||||
</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-newsrooms" 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-newsrooms)"/>
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- What is a Newsroom Section -->
|
||||
<section class="py-16 bg-white dark:bg-gray-950 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-gray-900 dark:text-gray-100 mb-4">
|
||||
Was ist ein Newsroom?
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 dark:text-gray-400">
|
||||
Ihre digitale Pressezentrale für professionelle Unternehmenskommunikation
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 md:p-12 transition-colors duration-200">
|
||||
<p class="text-lg text-gray-900 dark:text-gray-100 leading-relaxed mb-6">
|
||||
Ein Newsroom ist Ihre dedizierte Unternehmensseite auf Business Portal, wo alle Ihre Pressemitteilungen gebündelt und professionell präsentiert werden. Journalisten, Partner und Interessenten finden hier alle relevanten Informationen zu Ihrem Unternehmen auf einen Blick.
|
||||
</p>
|
||||
<p class="text-lg text-gray-900 dark:text-gray-100 leading-relaxed">
|
||||
Mit Ihrem individuellen Newsroom bauen Sie Vertrauen auf und schaffen eine zentrale Anlaufstelle für alle, die sich über Ihr Unternehmen informieren möchten.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section class="py-16 bg-gray-50/50 dark:bg-gray-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-gray-900 dark:text-gray-100 mb-4">
|
||||
Newsroom Features
|
||||
</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
|
||||
Professionelle Features für Ihre Unternehmenskommunikation
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
|
||||
<!-- Feature 1 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 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 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="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">
|
||||
Individuelles Branding
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Gestalten Sie Ihren Newsroom mit Ihrem Logo, Unternehmensfarben und individuellen Inhalten.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 2 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 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 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="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">
|
||||
Zentrale Verwaltung
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Alle Pressemitteilungen chronologisch sortiert und nach Kategorien filterbar an einem Ort.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 3 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 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 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="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">
|
||||
SEO-Optimiert
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Ihr Newsroom wird von Suchmaschinen indexiert und verbessert Ihre Online-Sichtbarkeit.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 4 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 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 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 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">
|
||||
Analytics & Insights
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Detaillierte Statistiken zu Besuchern, Views und Engagement Ihrer Pressemitteilungen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 5 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 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 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 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">
|
||||
Medien-Kontakte
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Hinterlegen Sie Pressekontakte und ermöglichen Sie direkte Anfragen von Journalisten.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 6 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 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 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.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">
|
||||
RSS-Feeds
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Automatische RSS-Feeds ermöglichen einfaches Abonnieren Ihrer Neuigkeiten.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Pricing Tiers Section -->
|
||||
<section class="py-16 bg-white dark:bg-gray-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-gray-900 dark:text-gray-100 mb-4">
|
||||
Newsroom Pakete
|
||||
</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
|
||||
Wählen Sie das passende Paket für Ihre Anforderungen
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||
<!-- Basic Newsroom -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 hover:shadow-lg transition-all">
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">
|
||||
Basic Newsroom
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||
Inklusive im Free-Tarif
|
||||
</p>
|
||||
<ul class="space-y-3 mb-6">
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">Standard-Design</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">Alle Pressemitteilungen</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">RSS-Feed</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Professional Newsroom -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border-2 border-[var(--color-primary)] p-8 hover:shadow-lg transition-all relative">
|
||||
<div class="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] text-white text-sm font-medium rounded-full">
|
||||
Beliebt
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">
|
||||
Professional Newsroom
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||
Professional-Tarif
|
||||
</p>
|
||||
<ul class="space-y-3 mb-6">
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">Individuelles Branding</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">Custom Domain</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">Erweiterte Analytics</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">Medien-Bibliothek</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Enterprise Newsroom -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 hover:shadow-lg transition-all">
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">
|
||||
Enterprise Newsroom
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||
Enterprise-Tarif
|
||||
</p>
|
||||
<ul class="space-y-3 mb-6">
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">White Label Lösung</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">API-Zugang</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">Prioritäts-Support</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">Individuelle Features</span>
|
||||
</li>
|
||||
</ul>
|
||||
</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="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold mb-4">
|
||||
Starten Sie Ihren eigenen Newsroom
|
||||
</h2>
|
||||
<p class="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
|
||||
Erstellen Sie in wenigen Minuten Ihren professionellen Unternehmens-Newsroom
|
||||
</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-gray-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
|
||||
111
resources/views/web/partner.blade.php
Normal file
111
resources/views/web/partner.blade.php
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
@extends('web.layouts.web-master')
|
||||
|
||||
@section('title', 'Partner - Business Portal 24')
|
||||
|
||||
@section('content')
|
||||
|
||||
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
|
||||
<livewire:web.burger-menu />
|
||||
<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">
|
||||
Unsere Partner
|
||||
</h1>
|
||||
<p class="text-xl text-white/90 leading-relaxed animate-fade-in-up animation-delay-200">
|
||||
Gemeinsam mit starken Partnern gestalten wir die Zukunft der Unternehmenskommunikation
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Partner Categories Section -->
|
||||
<section class="py-16 bg-white dark:bg-gray-950 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-gray-900 dark:text-gray-100 mb-4">
|
||||
Medienpartner
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 dark:text-gray-400">
|
||||
Führende Medien und Verlage im DACH-Raum
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-16">
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 flex items-center justify-center hover:shadow-lg transition-all">
|
||||
<span class="text-gray-600 dark:text-gray-400 font-semibold">Partner 1</span>
|
||||
</div>
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 flex items-center justify-center hover:shadow-lg transition-all">
|
||||
<span class="text-gray-600 dark:text-gray-400 font-semibold">Partner 2</span>
|
||||
</div>
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 flex items-center justify-center hover:shadow-lg transition-all">
|
||||
<span class="text-gray-600 dark:text-gray-400 font-semibold">Partner 3</span>
|
||||
</div>
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 flex items-center justify-center hover:shadow-lg transition-all">
|
||||
<span class="text-gray-600 dark:text-gray-400 font-semibold">Partner 4</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
|
||||
Technologie-Partner
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 dark:text-gray-400">
|
||||
Innovative Technologie-Unternehmen
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 flex items-center justify-center hover:shadow-lg transition-all">
|
||||
<span class="text-gray-600 dark:text-gray-400 font-semibold">Tech Partner 1</span>
|
||||
</div>
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 flex items-center justify-center hover:shadow-lg transition-all">
|
||||
<span class="text-gray-600 dark:text-gray-400 font-semibold">Tech Partner 2</span>
|
||||
</div>
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 flex items-center justify-center hover:shadow-lg transition-all">
|
||||
<span class="text-gray-600 dark:text-gray-400 font-semibold">Tech Partner 3</span>
|
||||
</div>
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 flex items-center justify-center hover:shadow-lg transition-all">
|
||||
<span class="text-gray-600 dark:text-gray-400 font-semibold">Tech Partner 4</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Partner werden Section -->
|
||||
<section class="py-16 bg-gray-50/50 dark:bg-gray-900/50 transition-colors duration-200">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
|
||||
Partner werden
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 dark:text-gray-400 mb-8">
|
||||
Interessiert an einer Partnerschaft? Kontaktieren Sie uns für weitere Informationen.
|
||||
</p>
|
||||
<a href="/kontakt" class="inline-flex items-center justify-center px-8 py-4 text-sm font-medium text-white rounded-lg shadow-md hover:shadow-lg transition-all" style="background: var(--gradient-hero);">
|
||||
Kontakt aufnehmen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<livewire:web.footer />
|
||||
</main>
|
||||
|
||||
@endsection
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
:root {
|
||||
--color-primary: {{ $domainConfig['color_scheme']['primary'] ?? '#cf3628' }};
|
||||
--color-secondary: {{ $domainConfig['color_scheme']['secondary'] ?? '#f0834a' }};
|
||||
}
|
||||
[x-cloak] { display: none !important; }
|
||||
</style>
|
||||
@endpush
|
||||
420
resources/views/web/preise.blade.php
Normal file
420
resources/views/web/preise.blade.php
Normal file
|
|
@ -0,0 +1,420 @@
|
|||
@extends('web.layouts.web-master')
|
||||
|
||||
@section('title', 'Preise & Leistungen - Business Portal 24')
|
||||
|
||||
@section('content')
|
||||
|
||||
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-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-16 animate-fade-in"
|
||||
style="background: var(--gradient-hero);">
|
||||
<div class="container mx-auto px-4 text-center">
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-4 animate-fade-in-up">
|
||||
Preise & Leistungen
|
||||
</h1>
|
||||
<p class="text-xl text-white/90 max-w-2xl mx-auto animate-fade-in-up animation-delay-200">
|
||||
Transparente Preise für jede Unternehmensgröße – von Start-ups bis Konzerne
|
||||
</p>
|
||||
</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-preise" 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-preise)"/>
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Pricing Cards -->
|
||||
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
|
||||
<!-- Free Plan -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 flex flex-col transition-all duration-300 hover:shadow-lg">
|
||||
<div class="mb-6">
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">
|
||||
Free
|
||||
</h3>
|
||||
<div class="flex items-baseline gap-2 mb-3">
|
||||
<span class="text-4xl font-bold text-gray-900 dark:text-gray-100">
|
||||
0€
|
||||
</span>
|
||||
<span class="text-gray-600 dark:text-gray-400">kostenlos</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Ideal für kleinere Unternehmen und Start-ups
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ul class="space-y-3 mb-8 flex-1">
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-900 dark:text-gray-100">1 Pressemitteilung pro Monat</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-900 dark:text-gray-100">Standard-Veröffentlichung</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-900 dark:text-gray-100">Basis-Statistiken</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-900 dark:text-gray-100">E-Mail-Support</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-900 dark:text-gray-100">Community-Forum Zugang</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a href="/register" class="inline-flex items-center justify-center px-6 py-3 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition-all">
|
||||
Jetzt starten
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Professional Plan (Popular) -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border-2 border-[var(--color-primary)] p-8 flex flex-col relative shadow-lg transition-all duration-300 hover:shadow-xl">
|
||||
<span class="absolute -top-3 left-1/2 -translate-x-1/2 inline-flex items-center px-4 py-1 text-xs font-medium text-white rounded-full" style="background: var(--gradient-hero);">
|
||||
Beliebteste Wahl
|
||||
</span>
|
||||
|
||||
<div class="mb-6">
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">
|
||||
Professional
|
||||
</h3>
|
||||
<div class="flex items-baseline gap-2 mb-3">
|
||||
<span class="text-4xl font-bold text-gray-900 dark:text-gray-100">
|
||||
99€
|
||||
</span>
|
||||
<span class="text-gray-600 dark:text-gray-400">pro Monat</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Für wachsende Unternehmen mit regelmäßigem Kommunikationsbedarf
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ul class="space-y-3 mb-8 flex-1">
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-900 dark:text-gray-100">10 Pressemitteilungen pro Monat</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-900 dark:text-gray-100">Premium-Platzierung</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-900 dark:text-gray-100">Erweiterte Statistiken & Analytics</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-900 dark:text-gray-100">Medienkit-Hosting</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-900 dark:text-gray-100">Prioritäts-Support</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-900 dark:text-gray-100">Social Media Distribution</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-900 dark:text-gray-100">Eigener Newsroom</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a href="/register?plan=professional" class="inline-flex items-center justify-center px-6 py-3 text-sm font-medium text-white rounded-lg shadow-md hover:shadow-lg transition-all" style="background: var(--gradient-hero);">
|
||||
Jetzt upgraden
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Enterprise Plan -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 flex flex-col transition-all duration-300 hover:shadow-lg">
|
||||
<div class="mb-6">
|
||||
<h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">
|
||||
Enterprise
|
||||
</h3>
|
||||
<div class="flex items-baseline gap-2 mb-3">
|
||||
<span class="text-4xl font-bold text-gray-900 dark:text-gray-100">
|
||||
Individuell
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
|
||||
auf Anfrage
|
||||
</p>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Maßgeschneiderte Lösungen für große Organisationen
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<ul class="space-y-3 mb-8 flex-1">
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-900 dark:text-gray-100">Unbegrenzte Pressemitteilungen</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-900 dark:text-gray-100">Top-Platzierung garantiert</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-900 dark:text-gray-100">White-Label Newsroom</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-900 dark:text-gray-100">Dedizierter Account Manager</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-900 dark:text-gray-100">API-Zugang</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-900 dark:text-gray-100">Custom Integrationen</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-900 dark:text-gray-100">Individuelle SLAs</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-900 dark:text-gray-100">Schulungen & Workshops</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<a href="/kontakt" class="inline-flex items-center justify-center px-6 py-3 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition-all">
|
||||
Kontakt aufnehmen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Add-ons Section -->
|
||||
<section class="py-16 bg-gray-50/50 dark:bg-gray-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-gray-900 dark:text-gray-100 mb-4">
|
||||
Zusätzliche Services
|
||||
</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
|
||||
Maximieren Sie die Reichweite Ihrer Pressemitteilungen mit unseren Premium-Features
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
|
||||
<!-- Featured Story -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 transition-all duration-300 hover:shadow-lg">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg class="h-6 w-6 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
|
||||
Featured Story
|
||||
</h3>
|
||||
<div class="text-2xl font-bold text-[var(--color-primary)] mb-3">
|
||||
199€
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Ihre Meldung prominent auf der Startseite platziert für 24 Stunden
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Newsletter Feature -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 transition-all duration-300 hover:shadow-lg">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg class="h-6 w-6 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 10V3L4 14h7v7l9-11h-7z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
|
||||
Newsletter Feature
|
||||
</h3>
|
||||
<div class="text-2xl font-bold text-[var(--color-primary)] mb-3">
|
||||
149€
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Exklusive Platzierung im wöchentlichen Newsletter an 50.000+ Abonnenten
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Social Media Boost -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 transition-all duration-300 hover:shadow-lg">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg class="h-6 w-6 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-gray-900 dark:text-gray-100 mb-2">
|
||||
Social Media Boost
|
||||
</h3>
|
||||
<div class="text-2xl font-bold text-[var(--color-primary)] mb-3">
|
||||
99€
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Verstärkte Verbreitung über LinkedIn, Twitter und weitere Kanäle
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Premium Analytics -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 transition-all duration-300 hover:shadow-lg">
|
||||
<div class="w-12 h-12 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-lg flex items-center justify-center mb-4">
|
||||
<svg class="h-6 w-6 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-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
|
||||
Premium Analytics
|
||||
</h3>
|
||||
<div class="text-2xl font-bold text-[var(--color-primary)] mb-3">
|
||||
79€/Monat
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Detaillierte Auswertungen mit Reichweite, Engagement und Conversion-Tracking
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ Section -->
|
||||
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
|
||||
<div class="container mx-auto px-4 max-w-3xl">
|
||||
<h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-8 text-center">
|
||||
Häufig gestellte Fragen
|
||||
</h2>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 transition-colors duration-200">
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
|
||||
Kann ich meinen Plan jederzeit wechseln?
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Ja, Sie können jederzeit upgraden oder downgraden. Bei einem Upgrade wird anteilig berechnet, bei einem Downgrade gilt die Änderung ab dem nächsten Abrechnungszeitraum.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 transition-colors duration-200">
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
|
||||
Gibt es eine Mindestvertragslaufzeit?
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Nein, alle unsere Pläne sind monatlich kündbar. Es gibt keine versteckten Kosten oder Mindestlaufzeiten.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 transition-colors duration-200">
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
|
||||
Welche Zahlungsmethoden akzeptieren Sie?
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Wir akzeptieren alle gängigen Kreditkarten (Visa, Mastercard, American Express), SEPA-Lastschrift und PayPal. Für Enterprise-Kunden bieten wir auch Rechnungszahlung an.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 transition-colors duration-200">
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
|
||||
Wie funktioniert die Reichweitenmessung?
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Alle Professional- und Enterprise-Kunden erhalten Zugang zu detaillierten Analytics: Views, Klicks, geografische Verteilung, Referrer und mehr. Die Daten werden in Echtzeit aktualisiert.
|
||||
</p>
|
||||
</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">
|
||||
<h2 class="text-3xl font-bold mb-4">
|
||||
Noch Fragen zu unseren Preisen?
|
||||
</h2>
|
||||
<p class="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
|
||||
Unser Team berät Sie gerne und findet die passende Lösung für Ihre Anforderungen
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-4 justify-center">
|
||||
<a href="/kontakt?type=beratung" class="inline-flex items-center justify-center px-6 py-3 text-sm font-medium bg-white text-[var(--color-primary)] hover:bg-gray-100 rounded-lg shadow-md hover:shadow-lg transition-all">
|
||||
Beratungsgespräch vereinbaren
|
||||
</a>
|
||||
<a href="/kontakt" class="inline-flex items-center justify-center px-6 py-3 text-sm font-medium bg-white/10 hover:bg-white/20 border border-white text-white rounded-lg transition-all">
|
||||
Kontakt aufnehmen
|
||||
</a>
|
||||
</div>
|
||||
</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
|
||||
194
resources/views/web/presse.blade.php
Normal file
194
resources/views/web/presse.blade.php
Normal file
|
|
@ -0,0 +1,194 @@
|
|||
@extends('web.layouts.web-master')
|
||||
|
||||
@section('title', 'Presse - Business Portal 24')
|
||||
|
||||
@section('content')
|
||||
|
||||
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
|
||||
<livewire:web.burger-menu />
|
||||
<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">
|
||||
Presse
|
||||
</h1>
|
||||
<p class="text-xl text-white/90 leading-relaxed animate-fade-in-up animation-delay-200">
|
||||
Aktuelle Informationen und Materialien für die Presse
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Press Contact Section -->
|
||||
<section class="py-16 bg-white dark:bg-gray-950 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-gray-900 dark:text-gray-100 mb-4">
|
||||
Pressekontakt
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 transition-colors duration-200">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4">Presseabteilung</h3>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-start gap-3">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
<span class="text-gray-600 dark:text-gray-400">presse@businessportal.de</span>
|
||||
</div>
|
||||
<div class="flex items-start gap-3">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
|
||||
</svg>
|
||||
<span class="text-gray-600 dark:text-gray-400">+49 (0) 30 1234567-89</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4">Ansprechpartnerin</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-2">Lisa Müller</p>
|
||||
<p class="text-sm text-gray-500 dark:text-gray-500">Head of Communications</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Press Releases Section -->
|
||||
<section class="py-16 bg-gray-50/50 dark:bg-gray-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-gray-900 dark:text-gray-100 mb-4">
|
||||
Aktuelle Pressemitteilungen
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<!-- Press Release 1 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
|
||||
<div class="text-sm text-gray-500 dark:text-gray-500 mb-2">15. Januar 2025</div>
|
||||
<h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100 mb-3">
|
||||
Business Portal erreicht 15.000 registrierte Unternehmen
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||
Die führende Plattform für Unternehmenskommunikation im DACH-Raum verzeichnet weiteres Wachstum...
|
||||
</p>
|
||||
<a href="#" class="text-[var(--color-primary)] hover:underline text-sm font-medium">
|
||||
Weiterlesen →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Press Release 2 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
|
||||
<div class="text-sm text-gray-500 dark:text-gray-500 mb-2">10. Dezember 2024</div>
|
||||
<h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100 mb-3">
|
||||
Neue KI-Features für optimierte Presseveröffentlichungen
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||
Business Portal integriert fortschrittliche KI-Technologie zur Optimierung von Pressemitteilungen...
|
||||
</p>
|
||||
<a href="#" class="text-[var(--color-primary)] hover:underline text-sm font-medium">
|
||||
Weiterlesen →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Press Release 3 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
|
||||
<div class="text-sm text-gray-500 dark:text-gray-500 mb-2">5. November 2024</div>
|
||||
<h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100 mb-3">
|
||||
Business Portal erweitert API-Funktionen
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||
Neue REST-API ermöglicht nahtlose Integration in bestehende Unternehmens-Systeme...
|
||||
</p>
|
||||
<a href="#" class="text-[var(--color-primary)] hover:underline text-sm font-medium">
|
||||
Weiterlesen →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Press Kit Section -->
|
||||
<section class="py-16 bg-white dark:bg-gray-950 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-gray-900 dark:text-gray-100 mb-4">
|
||||
Presse-Kit
|
||||
</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Logos, Bilder und Materialien zum Download
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">Logos</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||
Offizielle Logos in verschiedenen Formaten und Farben
|
||||
</p>
|
||||
<a href="#" class="inline-flex items-center text-[var(--color-primary)] hover:underline text-sm font-medium">
|
||||
Download (ZIP, 2.5 MB) →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">Pressemappen</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||
Umfassende Informationen über Business Portal
|
||||
</p>
|
||||
<a href="#" class="inline-flex items-center text-[var(--color-primary)] hover:underline text-sm font-medium">
|
||||
Download (PDF, 5.2 MB) →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">Screenshots</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||
Hochauflösende Screenshots der Plattform
|
||||
</p>
|
||||
<a href="#" class="inline-flex items-center text-[var(--color-primary)] hover:underline text-sm font-medium">
|
||||
Download (ZIP, 8.1 MB) →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">Factsheet</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||
Kompakte Übersicht mit Zahlen und Fakten
|
||||
</p>
|
||||
<a href="#" class="inline-flex items-center text-[var(--color-primary)] hover:underline text-sm font-medium">
|
||||
Download (PDF, 1.2 MB) →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<livewire:web.footer />
|
||||
</main>
|
||||
|
||||
@endsection
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
:root {
|
||||
--color-primary: {{ $domainConfig['color_scheme']['primary'] ?? '#cf3628' }};
|
||||
--color-secondary: {{ $domainConfig['color_scheme']['secondary'] ?? '#f0834a' }};
|
||||
}
|
||||
[x-cloak] { display: none !important; }
|
||||
</style>
|
||||
@endpush
|
||||
133
resources/views/web/presseecho.blade copy.php
Normal file
133
resources/views/web/presseecho.blade copy.php
Normal file
|
|
@ -0,0 +1,133 @@
|
|||
@extends('web.layouts.web-master')
|
||||
|
||||
@section('title', 'Pressemitteilungen - Presseecho')
|
||||
|
||||
@section('content')
|
||||
|
||||
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
|
||||
<!-- Burger Menu Component -->
|
||||
<livewire:web.burger-menu />
|
||||
|
||||
<!-- Header Component -->
|
||||
<livewire:web.header />
|
||||
|
||||
<!-- Filter Bar Component -->
|
||||
<livewire:web.filter-bar />
|
||||
|
||||
<!-- Hero Banner -->
|
||||
<section class="relative overflow-hidden text-white py-12 animate-fade-in" style="background: var(--gradient-hero);">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="max-w-4xl">
|
||||
<h1 class="text-3xl md:text-4xl lg:text-5xl text-white/90 font-bold mb-4 animate-fade-in-up">
|
||||
Aktuelle Pressemitteilungen
|
||||
</h1>
|
||||
<p class="text-base md:text-lg text-white/90 animate-fade-in-up animation-delay-200">
|
||||
Die führende Plattform für Unternehmensnachrichten aus Deutschland, Österreich und der Schweiz
|
||||
</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" 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)" />
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Featured Section -->
|
||||
<section
|
||||
class="bg-gray-50/50 dark:bg-gray-900/50 border-b border-gray-200 dark:border-gray-800 py-8 transition-colors duration-200">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2">
|
||||
<span
|
||||
class="w-1 h-6 bg-gradient-to-b from-[var(--color-primary)] to-[var(--color-secondary)] rounded-full"></span>
|
||||
Top-Meldungen
|
||||
</h2>
|
||||
<span
|
||||
class="text-xs text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-700 px-2 py-1 rounded">Anzeige</span>
|
||||
</div>
|
||||
|
||||
<livewire:web.featured-releases />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Main Content Grid -->
|
||||
<section class="py-8 bg-white dark:bg-gray-950 transition-colors duration-200">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="text-sm font-medium text-gray-600 dark:text-gray-400 flex items-center gap-2">
|
||||
<span class="w-2 h-2 bg-[var(--color-primary)] rounded-full"></span>
|
||||
247 Pressemitteilungen
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<livewire:web.press-releases-grid />
|
||||
|
||||
<!-- Pagination -->
|
||||
<nav class="flex justify-center mt-12" aria-label="Seitennummerierung">
|
||||
<div class="flex items-center gap-2">
|
||||
<button
|
||||
class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||
disabled aria-label="Vorherige Seite">
|
||||
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7">
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="px-4 py-2 text-sm font-medium text-white rounded-lg shadow-md hover:shadow-lg transition-all"
|
||||
style="background: var(--gradient-hero);" aria-current="page">
|
||||
1
|
||||
</button>
|
||||
<button
|
||||
class="px-4 py-2 text-sm font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
|
||||
2
|
||||
</button>
|
||||
<button
|
||||
class="px-4 py-2 text-sm font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
|
||||
3
|
||||
</button>
|
||||
<span class="px-2 text-gray-600 dark:text-gray-400">...</span>
|
||||
<button
|
||||
class="px-4 py-2 text-sm font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
|
||||
10
|
||||
</button>
|
||||
<button
|
||||
class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors"
|
||||
aria-label="Nächste Seite">
|
||||
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7">
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
</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'] ?? '#345636' }};
|
||||
--color-secondary: {{ $domainConfig['color_scheme']['secondary'] ?? '#6b8f71' }};
|
||||
}
|
||||
|
||||
/* Alpine.js Cloak */
|
||||
[x-cloak] {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
362
resources/views/web/presseecho.blade.php
Normal file
362
resources/views/web/presseecho.blade.php
Normal file
|
|
@ -0,0 +1,362 @@
|
|||
@extends('web.layouts.web-master')
|
||||
|
||||
@section('title', 'Presseecho - Ihr Magazin für Wirtschaft & Industrie')
|
||||
|
||||
@section('content')
|
||||
|
||||
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
|
||||
<!-- Burger Menu Component -->
|
||||
<livewire:web.burger-menu />
|
||||
|
||||
<!-- Header Component -->
|
||||
<livewire:web.header />
|
||||
|
||||
<!-- Main Navigation for Presseecho -->
|
||||
<nav class="sticky top-0 z-40 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 shadow-sm backdrop-blur-sm transition-colors duration-200">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex items-center justify-center gap-8 h-14">
|
||||
<a href="/themendossiers"
|
||||
class="text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-[var(--color-primary)] dark:hover:text-[var(--color-secondary)] transition-colors relative group py-4">
|
||||
Themendossiers
|
||||
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] group-hover:w-full transition-all duration-300"></span>
|
||||
</a>
|
||||
<span class="text-gray-300 dark:text-gray-700">|</span>
|
||||
<a href="/fachbereiche"
|
||||
class="text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-[var(--color-primary)] dark:hover:text-[var(--color-secondary)] transition-colors relative group py-4">
|
||||
Fachbereiche
|
||||
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] group-hover:w-full transition-all duration-300"></span>
|
||||
</a>
|
||||
<span class="text-gray-300 dark:text-gray-700">|</span>
|
||||
<a href="/experten"
|
||||
class="text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-[var(--color-primary)] dark:hover:text-[var(--color-secondary)] transition-colors relative group py-4">
|
||||
Experten
|
||||
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] group-hover:w-full transition-all duration-300"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Hero Section - Recherche-fokussierte Überschrift -->
|
||||
<section class="bg-gradient-to-br from-[var(--color-primary)]/5 via-white to-[var(--color-secondary)]/5 dark:from-[var(--color-primary)]/10 dark:via-gray-950 dark:to-[var(--color-secondary)]/10 py-12 border-b border-gray-100 dark:border-gray-900">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="max-w-4xl mx-auto text-center">
|
||||
<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-gray-100 mb-4 leading-tight">
|
||||
Exklusive Branchenanalysen & Fachmeldungen<br class="hidden md:block">
|
||||
<span class="text-[var(--color-primary)]">für Ihre Recherche</span>
|
||||
</h1>
|
||||
<p class="text-lg md:text-xl text-gray-600 dark:text-gray-400 leading-relaxed">
|
||||
Kuratierte Wirtschaftsinformationen für Journalisten, Analysten und Entscheider
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Block 1: Highlights der Woche (Hero Section) -->
|
||||
<section class="relative overflow-hidden bg-white dark:bg-gray-950 py-12 md:py-16 animate-fade-in">
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- Section Header -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2 flex items-center gap-3">
|
||||
<span class="w-2 h-10 bg-gradient-to-b from-[var(--color-primary)] to-[var(--color-secondary)] rounded-full"></span>
|
||||
Highlights der Woche
|
||||
</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 ml-5">Exklusive Einblicke und Top-Analysen</p>
|
||||
</div>
|
||||
|
||||
<!-- Hero Article -->
|
||||
<div class="card card-hover overflow-hidden group cursor-pointer">
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<!-- Image -->
|
||||
<div class="relative h-64 md:h-96 overflow-hidden bg-gray-100 dark:bg-gray-800">
|
||||
<img src="https://placehold.co/800x600/345636/ffffff?text=Hero+Interview"
|
||||
alt="Hero Article"
|
||||
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
|
||||
<div class="absolute top-4 left-4">
|
||||
<span class="badge badge-primary shadow-md">
|
||||
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path>
|
||||
<path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
Exklusiv-Interview
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="flex flex-col justify-center p-6 md:p-8">
|
||||
<div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||
<span class="badge badge-secondary">KI & Innovation</span>
|
||||
<span>•</span>
|
||||
<time datetime="2024-10-17">17. Oktober 2024</time>
|
||||
</div>
|
||||
|
||||
<h3 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4 group-hover:text-[var(--color-primary)] transition-colors">
|
||||
Die Zukunft der KI im deutschen Mittelstand
|
||||
</h3>
|
||||
|
||||
<p class="text-gray-700 dark:text-gray-300 text-base md:text-lg mb-6 line-clamp-3">
|
||||
Im exklusiven Interview spricht Dr. Maria Schmidt, Leiterin des KI-Instituts München, über die Chancen und Herausforderungen der künstlichen Intelligenz für mittelständische Unternehmen.
|
||||
</p>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-secondary)] flex items-center justify-center text-white font-semibold">
|
||||
MS
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-sm font-medium text-gray-900 dark:text-gray-100">Dr. Maria Schmidt</p>
|
||||
<p class="text-xs text-gray-600 dark:text-gray-400">Expertin für KI & Innovation</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<a href="#" class="btn-primary inline-flex items-center gap-2">
|
||||
Interview lesen
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Block 2: Neueste Analysen & Experten-Interviews -->
|
||||
<section class="py-12 md:py-16 bg-gray-50/50 dark:bg-gray-900/50">
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- Section Header -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2 flex items-center gap-3">
|
||||
<span class="w-1.5 h-8 bg-gradient-to-b from-[var(--color-primary)] to-[var(--color-secondary)] rounded-full"></span>
|
||||
Neueste Analysen & Experten-Interviews
|
||||
</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 ml-5">Fundierte Einschätzungen von Branchenexperten</p>
|
||||
</div>
|
||||
|
||||
<!-- Grid -->
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<!-- Article Card 1 -->
|
||||
<article class="card card-hover overflow-hidden group cursor-pointer">
|
||||
<div class="relative h-48 overflow-hidden bg-gray-100 dark:bg-gray-800">
|
||||
<img src="https://placehold.co/600x400/345636/ffffff?text=Analyse+1"
|
||||
alt="Analyse 1"
|
||||
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
|
||||
<div class="absolute top-3 left-3">
|
||||
<span class="badge badge-primary shadow-md text-xs">Analyse</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400 mb-3">
|
||||
<span class="badge badge-secondary text-xs">Industrie 4.0</span>
|
||||
<span>•</span>
|
||||
<time datetime="2024-10-16">16. Okt 2024</time>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors line-clamp-2">
|
||||
Nachhaltigkeit in der Produktion: Neue Wege für die Industrie
|
||||
</h3>
|
||||
<p class="text-sm text-gray-700 dark:text-gray-300 line-clamp-3 mb-4">
|
||||
Eine umfassende Analyse zeigt, wie deutsche Unternehmen den Wandel zur nachhaltigen Produktion meistern.
|
||||
</p>
|
||||
<div class="flex items-center gap-2 text-xs">
|
||||
<div class="w-6 h-6 rounded-full bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-secondary)] flex items-center justify-center text-white font-semibold text-[10px]">
|
||||
TM
|
||||
</div>
|
||||
<span class="text-gray-600 dark:text-gray-400">Thomas Müller</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Article Card 2 -->
|
||||
<article class="card card-hover overflow-hidden group cursor-pointer">
|
||||
<div class="relative h-48 overflow-hidden bg-gray-100 dark:bg-gray-800">
|
||||
<img src="https://placehold.co/600x400/345636/ffffff?text=Interview+2"
|
||||
alt="Interview 2"
|
||||
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
|
||||
<div class="absolute top-3 left-3">
|
||||
<span class="badge badge-primary shadow-md text-xs">Interview</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400 mb-3">
|
||||
<span class="badge badge-secondary text-xs">Digitalisierung</span>
|
||||
<span>•</span>
|
||||
<time datetime="2024-10-15">15. Okt 2024</time>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors line-clamp-2">
|
||||
Cybersecurity: "Prävention beginnt beim Menschen"
|
||||
</h3>
|
||||
<p class="text-sm text-gray-700 dark:text-gray-300 line-clamp-3 mb-4">
|
||||
IT-Sicherheitsexperte Klaus Weber erklärt, warum Schulung wichtiger ist als Technik.
|
||||
</p>
|
||||
<div class="flex items-center gap-2 text-xs">
|
||||
<div class="w-6 h-6 rounded-full bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-secondary)] flex items-center justify-center text-white font-semibold text-[10px]">
|
||||
KW
|
||||
</div>
|
||||
<span class="text-gray-600 dark:text-gray-400">Klaus Weber</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Article Card 3 -->
|
||||
<article class="card card-hover overflow-hidden group cursor-pointer">
|
||||
<div class="relative h-48 overflow-hidden bg-gray-100 dark:bg-gray-800">
|
||||
<img src="https://placehold.co/600x400/345636/ffffff?text=Analyse+3"
|
||||
alt="Analyse 3"
|
||||
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
|
||||
<div class="absolute top-3 left-3">
|
||||
<span class="badge badge-primary shadow-md text-xs">Analyse</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400 mb-3">
|
||||
<span class="badge badge-secondary text-xs">Wirtschaft</span>
|
||||
<span>•</span>
|
||||
<time datetime="2024-10-14">14. Okt 2024</time>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors line-clamp-2">
|
||||
Fachkräftemangel: Wie Unternehmen gegensteuern können
|
||||
</h3>
|
||||
<p class="text-sm text-gray-700 dark:text-gray-300 line-clamp-3 mb-4">
|
||||
Neue Strategien im Recruiting und der Mitarbeiterbindung zeigen erste Erfolge.
|
||||
</p>
|
||||
<div class="flex items-center gap-2 text-xs">
|
||||
<div class="w-6 h-6 rounded-full bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-secondary)] flex items-center justify-center text-white font-semibold text-[10px]">
|
||||
AS
|
||||
</div>
|
||||
<span class="text-gray-600 dark:text-gray-400">Anna Schmidt</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Block 3: Im Fokus: Themendossiers -->
|
||||
<section class="py-12 md:py-16 bg-gradient-to-br from-[var(--color-primary)]/5 to-[var(--color-secondary)]/5 dark:from-[var(--color-primary)]/10 dark:to-[var(--color-secondary)]/10 border-y border-[var(--color-primary)]/10">
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- Section Header -->
|
||||
<div class="mb-8 text-center">
|
||||
<h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">
|
||||
Im Fokus: Themendossiers
|
||||
</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400">Umfassende Recherchen zu den wichtigsten Branchenthemen</p>
|
||||
</div>
|
||||
|
||||
<!-- Dossier Grid -->
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<!-- Dossier 1 -->
|
||||
<article class="card overflow-hidden group cursor-pointer bg-white dark:bg-gray-900 shadow-lg hover:shadow-2xl transition-all duration-300">
|
||||
<div class="relative h-56 overflow-hidden">
|
||||
<img src="https://placehold.co/600x400/345636/ffffff?text=KI+in+der+Industrie"
|
||||
alt="KI Dossier"
|
||||
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>
|
||||
<div class="absolute bottom-0 left-0 right-0 p-5">
|
||||
<span class="inline-block badge bg-white text-[var(--color-primary)] border-0 mb-3 shadow-md">
|
||||
12 Artikel
|
||||
</span>
|
||||
<h3 class="text-xl font-bold text-white mb-2 group-hover:text-[var(--color-secondary)] transition-colors">
|
||||
KI in der Industrie
|
||||
</h3>
|
||||
<p class="text-sm text-white/90 line-clamp-2">
|
||||
Alle Facetten der künstlichen Intelligenz in Produktion und Logistik
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Dossier 2 -->
|
||||
<article class="card overflow-hidden group cursor-pointer bg-white dark:bg-gray-900 shadow-lg hover:shadow-2xl transition-all duration-300">
|
||||
<div class="relative h-56 overflow-hidden">
|
||||
<img src="https://placehold.co/600x400/345636/ffffff?text=Energiewende"
|
||||
alt="Energiewende Dossier"
|
||||
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>
|
||||
<div class="absolute bottom-0 left-0 right-0 p-5">
|
||||
<span class="inline-block badge bg-white text-[var(--color-primary)] border-0 mb-3 shadow-md">
|
||||
8 Artikel
|
||||
</span>
|
||||
<h3 class="text-xl font-bold text-white mb-2 group-hover:text-[var(--color-secondary)] transition-colors">
|
||||
Energiewende 2024
|
||||
</h3>
|
||||
<p class="text-sm text-white/90 line-clamp-2">
|
||||
Wie Unternehmen die Transformation zur Klimaneutralität meistern
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Dossier 3 -->
|
||||
<article class="card overflow-hidden group cursor-pointer bg-white dark:bg-gray-900 shadow-lg hover:shadow-2xl transition-all duration-300">
|
||||
<div class="relative h-56 overflow-hidden">
|
||||
<img src="https://placehold.co/600x400/345636/ffffff?text=New+Work"
|
||||
alt="New Work Dossier"
|
||||
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
|
||||
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>
|
||||
<div class="absolute bottom-0 left-0 right-0 p-5">
|
||||
<span class="inline-block badge bg-white text-[var(--color-primary)] border-0 mb-3 shadow-md">
|
||||
15 Artikel
|
||||
</span>
|
||||
<h3 class="text-xl font-bold text-white mb-2 group-hover:text-[var(--color-secondary)] transition-colors">
|
||||
New Work & Kultur
|
||||
</h3>
|
||||
<p class="text-sm text-white/90 line-clamp-2">
|
||||
Moderne Arbeitsmodelle und ihre Auswirkungen auf Unternehmen
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Block 4: Ausgewählte Fachmeldungen -->
|
||||
<section class="py-12 md:py-16 bg-white dark:bg-gray-950">
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- Section Header -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2 flex items-center gap-3">
|
||||
<span class="w-1.5 h-8 bg-gradient-to-b from-[var(--color-primary)] to-[var(--color-secondary)] rounded-full"></span>
|
||||
Ausgewählte Fachmeldungen
|
||||
</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 ml-5">Redaktionell kuratierte Pressemitteilungen aus Wirtschaft und Industrie</p>
|
||||
</div>
|
||||
|
||||
<!-- Press Releases Grid -->
|
||||
<livewire:web.press-releases-grid />
|
||||
|
||||
<!-- Load More Button -->
|
||||
<div class="mt-12 text-center">
|
||||
<button class="btn-primary px-8 py-3 text-base inline-flex items-center gap-2">
|
||||
Weitere Meldungen laden
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</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'] ?? '#345636' }};
|
||||
--color-secondary: {{ $domainConfig['color_scheme']['secondary'] ?? '#6b8f71' }};
|
||||
}
|
||||
|
||||
/* Alpine.js Cloak */
|
||||
[x-cloak] {
|
||||
display: none !important;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
339
resources/views/web/release-detail.blade.php
Normal file
339
resources/views/web/release-detail.blade.php
Normal file
|
|
@ -0,0 +1,339 @@
|
|||
@extends('web.layouts.web-master')
|
||||
|
||||
@section('title', 'KI-Revolution in Deutschland - Business Portal 24')
|
||||
|
||||
@section('content')
|
||||
|
||||
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
|
||||
<!-- Burger Menu Component -->
|
||||
<livewire:web.burger-menu />
|
||||
|
||||
<!-- Header Component -->
|
||||
<livewire:web.header />
|
||||
|
||||
<!-- Article Content -->
|
||||
<article class="container mx-auto px-4 py-8 max-w-4xl">
|
||||
<!-- Breadcrumbs -->
|
||||
<nav class="text-sm text-gray-600 dark:text-gray-400 mb-6">
|
||||
<a href="/" class="hover:text-gray-900 dark:hover:text-gray-100 transition-colors">Start</a>
|
||||
<span class="mx-2">›</span>
|
||||
<a href="/kategorie/it" class="hover:text-gray-900 dark:hover:text-gray-100 transition-colors">IT & Software</a>
|
||||
<span class="mx-2">›</span>
|
||||
<span class="text-gray-900 dark:text-gray-100">KI-Revolution in Deutschland</span>
|
||||
</nav>
|
||||
|
||||
<!-- Title -->
|
||||
<h1 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4 leading-tight">
|
||||
KI-Revolution: Deutsche Unternehmen investieren Milliarden in Automatisierung
|
||||
</h1>
|
||||
|
||||
<!-- Subtitle -->
|
||||
<p class="text-xl text-gray-600 dark:text-gray-400 mb-6">
|
||||
Neue Studie zeigt massive Investitionen in künstliche Intelligenz für 2025
|
||||
</p>
|
||||
|
||||
<!-- Meta Info -->
|
||||
<div class="flex flex-wrap items-center gap-4 mb-8 pb-8 border-b border-gray-200 dark:border-gray-800">
|
||||
<div class="flex items-center gap-2 text-sm text-gray-900 dark:text-gray-100">
|
||||
<svg class="h-4 w-4 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
<span class="font-medium">Berlin</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-sm text-gray-900 dark:text-gray-100">
|
||||
<svg class="h-4 w-4 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
<span>6. Oktober 2025</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-sm text-gray-900 dark:text-gray-100">
|
||||
<svg class="h-4 w-4 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<span>14:30 Uhr</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
|
||||
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<span>5 Min. Lesezeit</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Key Facts Box - Desktop Side -->
|
||||
<div class="lg:float-right lg:ml-8 lg:w-80 mb-8">
|
||||
<div class="bg-gradient-to-br from-[var(--color-primary)]/5 to-[var(--color-secondary)]/5 border border-[var(--color-primary)]/20 dark:border-[var(--color-primary)]/30 rounded-xl p-6 transition-colors duration-200">
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
|
||||
<span class="w-1 h-5 bg-gradient-to-b from-[var(--color-primary)] to-[var(--color-secondary)] rounded-full"></span>
|
||||
Key Facts
|
||||
</h3>
|
||||
<ul class="space-y-3 text-sm text-gray-900 dark:text-gray-100">
|
||||
<li class="flex items-start gap-2">
|
||||
<span class="text-[var(--color-primary)] mt-0.5">•</span>
|
||||
<span>15 Milliarden Euro Investitionsvolumen geplant</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<span class="text-[var(--color-primary)] mt-0.5">•</span>
|
||||
<span>78% der Unternehmen setzen auf KI-Automatisierung</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<span class="text-[var(--color-primary)] mt-0.5">•</span>
|
||||
<span>Produktivitätssteigerung um durchschnittlich 35%</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<span class="text-[var(--color-primary)] mt-0.5">•</span>
|
||||
<span>Neue Arbeitsplätze im KI-Sektor erwartet</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<span class="text-[var(--color-primary)] mt-0.5">•</span>
|
||||
<span>Fokus auf ethische KI-Entwicklung</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Article Content -->
|
||||
<div class="prose prose-lg max-w-none">
|
||||
<p class="text-gray-900 dark:text-gray-100 leading-relaxed mb-6">
|
||||
<strong>Berlin</strong> – Eine umfassende Studie des TechVision Analytics Instituts zeigt einen beispiellosen Wandel in der deutschen Unternehmenslandschaft: Für das Jahr 2025 planen Unternehmen im DACH-Raum Investitionen in Höhe von über 15 Milliarden Euro in KI-gestützte Automatisierungslösungen.
|
||||
</p>
|
||||
|
||||
<h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mt-8 mb-4">
|
||||
Paradigmenwechsel in der Digitalisierung
|
||||
</h2>
|
||||
|
||||
<p class="text-gray-900 dark:text-gray-100 leading-relaxed mb-6">
|
||||
Die Ergebnisse der Studie, für die über 1.200 Unternehmen verschiedener Größen und Branchen befragt wurden, zeichnen ein klares Bild: Künstliche Intelligenz hat sich vom Experimentierfeld zur strategischen Priorität entwickelt. 78% der befragten Unternehmen geben an, dass KI-gestützte Automatisierung fester Bestandteil ihrer Digitalisierungsstrategie ist.
|
||||
</p>
|
||||
|
||||
<blockquote class="border-l-4 border-[var(--color-primary)] pl-6 my-8 italic text-lg text-gray-600 dark:text-gray-400">
|
||||
"Wir erleben einen fundamentalen Wandel. KI ist nicht länger eine Zukunftsvision, sondern wird zur Grundlage moderner Geschäftsmodelle. Die Investitionen der kommenden Jahre werden die Wettbewerbsfähigkeit für die nächste Dekade bestimmen."
|
||||
<footer class="text-sm font-medium text-gray-900 dark:text-gray-100 mt-2 not-italic">
|
||||
– Dr. Sarah Müller, Geschäftsführerin TechVision Analytics
|
||||
</footer>
|
||||
</blockquote>
|
||||
|
||||
<h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mt-8 mb-4">
|
||||
Schwerpunkte der Investitionen
|
||||
</h2>
|
||||
|
||||
<p class="text-gray-900 dark:text-gray-100 leading-relaxed mb-4">
|
||||
Die geplanten Investitionen konzentrieren sich auf mehrere Kernbereiche:
|
||||
</p>
|
||||
|
||||
<ul class="list-disc pl-6 space-y-2 mb-6 text-gray-900 dark:text-gray-100">
|
||||
<li>Prozessautomatisierung und intelligente Workflow-Systeme</li>
|
||||
<li>Predictive Analytics und datengesteuerte Entscheidungsfindung</li>
|
||||
<li>Kundenservice-Automatisierung durch Chatbots und virtuelle Assistenten</li>
|
||||
<li>Qualitätskontrolle mittels Computer Vision</li>
|
||||
<li>Personalisierte Marketing- und Vertriebsautomatisierung</li>
|
||||
</ul>
|
||||
|
||||
<h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mt-8 mb-4">
|
||||
Produktivitätssteigerung als Hauptmotivation
|
||||
</h2>
|
||||
|
||||
<p class="text-gray-900 dark:text-gray-100 leading-relaxed mb-6">
|
||||
Die Studie zeigt, dass Unternehmen, die bereits KI-Lösungen implementiert haben, eine durchschnittliche Produktivitätssteigerung von 35% verzeichnen. Gleichzeitig berichten 68% der Befragten von einer verbesserten Mitarbeiterzufriedenheit, da repetitive Aufgaben automatisiert werden und mehr Zeit für kreative und strategische Tätigkeiten bleibt.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Media Section -->
|
||||
<div class="mt-12 mb-8">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Downloads & Medien</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-4 hover:shadow-lg transition-all cursor-pointer">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-12 h-12 bg-[var(--color-primary)]/10 rounded-lg flex items-center justify-center">
|
||||
<svg class="h-6 w-6 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium text-gray-900 dark:text-gray-100">Vollständige Studie (PDF)</p>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">2.4 MB</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-4 hover:shadow-lg transition-all cursor-pointer">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-12 h-12 bg-[var(--color-secondary)]/10 rounded-lg flex items-center justify-center">
|
||||
<svg class="h-6 w-6 text-[var(--color-secondary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-medium text-gray-900 dark:text-gray-100">Infografiken (ZIP)</p>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">8.7 MB</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Box -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 mb-8 transition-colors duration-200">
|
||||
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Pressekontakt</h3>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<p class="font-medium text-gray-900 dark:text-gray-100">TechVision Analytics GmbH</p>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">Ansprechpartnerin: Dr. Sarah Müller</p>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center gap-2 text-sm">
|
||||
<svg class="h-4 w-4 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
<a href="mailto:presse@techvision.de" class="text-[var(--color-primary)] hover:underline">
|
||||
presse@techvision.de
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-sm text-gray-900 dark:text-gray-100">
|
||||
<svg class="h-4 w-4 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
|
||||
</svg>
|
||||
<a href="tel:+493012345678" class="hover:text-[var(--color-primary)] transition-colors">
|
||||
+49 30 1234 5678
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition-all">
|
||||
vCard herunterladen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Company Teaser -->
|
||||
<div class="bg-gray-50/50 dark:bg-gray-900/50 rounded-xl border border-gray-200 dark:border-gray-800 p-6 mb-8 transition-colors duration-200">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="w-16 h-16 bg-white dark:bg-gray-800 rounded-lg flex items-center justify-center flex-shrink-0">
|
||||
<svg class="h-8 w-8 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">TechVision Analytics</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||
TechVision Analytics ist ein führendes Forschungsinstitut für Technologie- und Marktanalysen mit Sitz in Berlin. Seit 2015 beraten wir Unternehmen bei strategischen Technologie-Entscheidungen.
|
||||
</p>
|
||||
<a href="#" class="inline-flex items-center text-[var(--color-primary)] hover:text-[var(--color-secondary)] transition-colors text-sm font-medium">
|
||||
Zum Newsroom →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Utility Bar -->
|
||||
<div class="flex items-center gap-3 py-6 border-y border-gray-200 dark:border-gray-800">
|
||||
<a href="#" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition-all">
|
||||
<svg class="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"></path>
|
||||
</svg>
|
||||
Teilen
|
||||
</a>
|
||||
<a href="#" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition-all">
|
||||
<svg class="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"></path>
|
||||
</svg>
|
||||
Drucken
|
||||
</a>
|
||||
<a href="#" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors ml-auto">
|
||||
<svg class="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9"></path>
|
||||
</svg>
|
||||
Melden
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- Related Articles -->
|
||||
<section class="bg-gray-50/50 dark:bg-gray-900/50 py-12 mt-8 transition-colors duration-200">
|
||||
<div class="container mx-auto px-4 max-w-6xl">
|
||||
<h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mb-6">Ähnliche Meldungen</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<!-- Related Article 1 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-5 hover:shadow-lg transition-all">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-[var(--color-primary)]/10 text-[var(--color-primary)]">
|
||||
IT & Software
|
||||
</span>
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2 line-clamp-2">
|
||||
Cloud-Migration: 78% der deutschen Unternehmen setzen auf Hybrid-Cloud
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">
|
||||
Neue Umfrage zeigt: Hybrid-Cloud wird zum Standard für maximale Flexibilität und Sicherheit.
|
||||
</p>
|
||||
<a href="#" class="inline-flex items-center text-sm text-[var(--color-primary)] hover:text-[var(--color-secondary)] transition-colors">
|
||||
Lesen →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Related Article 2 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-5 hover:shadow-lg transition-all">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-[var(--color-primary)]/10 text-[var(--color-primary)]">
|
||||
IT & Software
|
||||
</span>
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2 line-clamp-2">
|
||||
Cybersecurity: Unternehmen verstärken Schutzmaßnahmen gegen Hackerangriffe
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">
|
||||
Investitionen in IT-Sicherheit steigen um durchschnittlich 35%. Neue Standards werden eingeführt.
|
||||
</p>
|
||||
<a href="#" class="inline-flex items-center text-sm text-[var(--color-primary)] hover:text-[var(--color-secondary)] transition-colors">
|
||||
Lesen →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Related Article 3 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-5 hover:shadow-lg transition-all">
|
||||
<div class="flex items-center gap-2 mb-3">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-[var(--color-primary)]/10 text-[var(--color-primary)]">
|
||||
IT & Software
|
||||
</span>
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2 line-clamp-2">
|
||||
5G-Rollout beschleunigt: Netzabdeckung erreicht 85% in Deutschland
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">
|
||||
Mobilfunkanbieter berichten von schnellerem Ausbau. IoT-Anwendungen profitieren enorm.
|
||||
</p>
|
||||
<a href="#" class="inline-flex items-center text-sm text-[var(--color-primary)] hover:text-[var(--color-secondary)] transition-colors">
|
||||
Lesen →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</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;
|
||||
}
|
||||
|
||||
/* Line clamp utilities */
|
||||
.line-clamp-2 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
268
resources/views/web/suche.blade.php
Normal file
268
resources/views/web/suche.blade.php
Normal file
|
|
@ -0,0 +1,268 @@
|
|||
@extends('web.layouts.web-master')
|
||||
|
||||
@section('title', 'Suche - Business Portal 24')
|
||||
|
||||
@section('content')
|
||||
|
||||
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
|
||||
<livewire:web.burger-menu />
|
||||
<livewire:web.header />
|
||||
|
||||
<!-- Hero Section with Search -->
|
||||
<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">
|
||||
Pressemitteilungen durchsuchen
|
||||
</h1>
|
||||
<p class="text-xl text-white/90 mb-8 animate-fade-in-up animation-delay-200">
|
||||
Durchsuchen Sie über 10.000 Pressemitteilungen aus allen Branchen
|
||||
</p>
|
||||
|
||||
<!-- Search Form -->
|
||||
<form class="animate-fade-in-up animation-delay-300" x-data="{ query: '' }">
|
||||
<div class="relative">
|
||||
<svg class="absolute left-6 top-1/2 -translate-y-1/2 h-6 w-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||
</svg>
|
||||
<input
|
||||
type="search"
|
||||
x-model="query"
|
||||
placeholder="Suchbegriff eingeben, z.B. 'Künstliche Intelligenz' oder 'Produktlaunch'..."
|
||||
class="w-full pl-16 pr-6 py-5 rounded-xl border-2 border-white/20 bg-white/10 backdrop-blur-sm text-white placeholder:text-white/70 text-lg focus:outline-none focus:ring-4 focus:ring-white/30 focus:border-white/40 transition-all"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
class="absolute right-2 top-1/2 -translate-y-1/2 px-8 py-3 bg-white text-[var(--color-primary)] font-medium rounded-lg hover:bg-gray-100 transition-all shadow-lg"
|
||||
>
|
||||
Suchen
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Search Filters Section -->
|
||||
<section class="py-8 bg-white dark:bg-gray-950 border-b border-gray-200 dark:border-gray-800 transition-colors duration-200">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<button class="px-4 py-2 bg-[var(--color-primary)] text-white rounded-lg text-sm font-medium transition-all">
|
||||
Alle Kategorien
|
||||
</button>
|
||||
<button class="px-4 py-2 bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-lg text-sm font-medium transition-all">
|
||||
Wirtschaft
|
||||
</button>
|
||||
<button class="px-4 py-2 bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-lg text-sm font-medium transition-all">
|
||||
Technologie
|
||||
</button>
|
||||
<button class="px-4 py-2 bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-lg text-sm font-medium transition-all">
|
||||
Gesundheit
|
||||
</button>
|
||||
<button class="px-4 py-2 bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-lg text-sm font-medium transition-all">
|
||||
Mehr...
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Search Results / Placeholder Section -->
|
||||
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="max-w-6xl mx-auto">
|
||||
|
||||
<!-- No Search Yet State -->
|
||||
<div class="text-center py-16">
|
||||
<div class="w-24 h-24 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||
<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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">
|
||||
Geben Sie einen Suchbegriff ein
|
||||
</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-8 max-w-lg mx-auto">
|
||||
Durchsuchen Sie unsere Datenbank mit über 10.000 Pressemitteilungen nach Stichworten, Unternehmen oder Themen
|
||||
</p>
|
||||
|
||||
<!-- Popular Searches -->
|
||||
<div class="max-w-2xl mx-auto">
|
||||
<h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-4">Beliebte Suchen:</h3>
|
||||
<div class="flex flex-wrap gap-2 justify-center">
|
||||
<a href="#" class="px-4 py-2 bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-full text-sm transition-all">
|
||||
KI & Machine Learning
|
||||
</a>
|
||||
<a href="#" class="px-4 py-2 bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-full text-sm transition-all">
|
||||
Nachhaltigkeit
|
||||
</a>
|
||||
<a href="#" class="px-4 py-2 bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-full text-sm transition-all">
|
||||
E-Mobilität
|
||||
</a>
|
||||
<a href="#" class="px-4 py-2 bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-full text-sm transition-all">
|
||||
Digitalisierung
|
||||
</a>
|
||||
<a href="#" class="px-4 py-2 bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-full text-sm transition-all">
|
||||
Start-ups
|
||||
</a>
|
||||
<a href="#" class="px-4 py-2 bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-full text-sm transition-all">
|
||||
Fusionen & Übernahmen
|
||||
</a>
|
||||
<a href="#" class="px-4 py-2 bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-full text-sm transition-all">
|
||||
Produktneuheiten
|
||||
</a>
|
||||
<a href="#" class="px-4 py-2 bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-full text-sm transition-all">
|
||||
Personalmeldungen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Example Results (Hidden by default, shown when search is active) -->
|
||||
<div class="hidden">
|
||||
<div class="flex justify-between items-center mb-8">
|
||||
<div>
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Suchergebnisse</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 mt-1">127 Ergebnisse für "Künstliche Intelligenz"</p>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<select class="px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 rounded-lg text-sm">
|
||||
<option>Neueste zuerst</option>
|
||||
<option>Älteste zuerst</option>
|
||||
<option>Relevanz</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sample Result Items -->
|
||||
<div class="space-y-6">
|
||||
<!-- Result 1 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0 w-32 h-32 bg-gray-200 dark:bg-gray-800 rounded-lg"></div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="px-2 py-1 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 text-xs rounded-full">Technologie</span>
|
||||
<span class="text-sm text-gray-500 dark:text-gray-500">15. Januar 2025</span>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2 hover:text-[var(--color-primary)] transition-colors">
|
||||
<a href="#">KI-Revolution: Neues Framework für maschinelles Lernen vorgestellt</a>
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-3">
|
||||
Das innovative Unternehmen TechCorp präsentiert ein bahnbrechendes Framework für maschinelles Lernen, das die Entwicklung von KI-Anwendungen um 70% beschleunigt...
|
||||
</p>
|
||||
<div class="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-500">
|
||||
<span>TechCorp AG</span>
|
||||
<span>•</span>
|
||||
<span>2 Min. Lesezeit</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Result 2 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
|
||||
<div class="flex gap-4">
|
||||
<div class="flex-shrink-0 w-32 h-32 bg-gray-200 dark:bg-gray-800 rounded-lg"></div>
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center gap-2 mb-2">
|
||||
<span class="px-2 py-1 bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300 text-xs rounded-full">Gesundheit</span>
|
||||
<span class="text-sm text-gray-500 dark:text-gray-500">14. Januar 2025</span>
|
||||
</div>
|
||||
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2 hover:text-[var(--color-primary)] transition-colors">
|
||||
<a href="#">KI-gestützte Diagnostik erreicht 98% Genauigkeit</a>
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-3">
|
||||
Medizinisches Start-up entwickelt KI-System zur Früherkennung von Krankheiten mit beeindruckender Präzision. Klinische Studien zeigen vielversprechende Ergebnisse...
|
||||
</p>
|
||||
<div class="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-500">
|
||||
<span>MediAI Solutions</span>
|
||||
<span>•</span>
|
||||
<span>3 Min. Lesezeit</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="mt-12 flex justify-center gap-2">
|
||||
<button class="px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-all">
|
||||
Zurück
|
||||
</button>
|
||||
<button class="px-4 py-2 bg-[var(--color-primary)] text-white rounded-lg">1</button>
|
||||
<button class="px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-all">2</button>
|
||||
<button class="px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-all">3</button>
|
||||
<button class="px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-all">
|
||||
Weiter
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Search Tips Section -->
|
||||
<section class="py-16 bg-gray-50/50 dark:bg-gray-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-gray-900 dark:text-gray-100 mb-4">
|
||||
Such-Tipps
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">Erweiterte Suche</h3>
|
||||
<ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
|
||||
<li class="flex items-start gap-2">
|
||||
<span class="text-[var(--color-primary)] font-mono">"Begriff"</span>
|
||||
<span>- Exakte Suche</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<span class="text-[var(--color-primary)] font-mono">A OR B</span>
|
||||
<span>- Entweder A oder B</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<span class="text-[var(--color-primary)] font-mono">A AND B</span>
|
||||
<span>- Sowohl A als auch B</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<span class="text-[var(--color-primary)] font-mono">-Begriff</span>
|
||||
<span>- Begriff ausschließen</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">Filter nutzen</h3>
|
||||
<ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
|
||||
<li>✓ Nach Kategorie filtern</li>
|
||||
<li>✓ Zeitraum eingrenzen</li>
|
||||
<li>✓ Nach Unternehmen suchen</li>
|
||||
<li>✓ Relevanz oder Datum sortieren</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<livewire:web.footer />
|
||||
</main>
|
||||
|
||||
@endsection
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
:root {
|
||||
--color-primary: {{ $domainConfig['color_scheme']['primary'] ?? '#cf3628' }};
|
||||
--color-secondary: {{ $domainConfig['color_scheme']['secondary'] ?? '#f0834a' }};
|
||||
}
|
||||
[x-cloak] { display: none !important; }
|
||||
</style>
|
||||
@endpush
|
||||
290
resources/views/web/team.blade.php
Normal file
290
resources/views/web/team.blade.php
Normal file
|
|
@ -0,0 +1,290 @@
|
|||
@extends('web.layouts.web-master')
|
||||
|
||||
@section('title', 'Unser Team - Business Portal 24')
|
||||
|
||||
@section('content')
|
||||
|
||||
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-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">
|
||||
Unser Team
|
||||
</h1>
|
||||
<p class="text-xl text-white/90 leading-relaxed animate-fade-in-up animation-delay-200">
|
||||
Leidenschaftliche Experten aus PR, Technologie und Medien arbeiten gemeinsam an der Zukunft der Unternehmenskommunikation
|
||||
</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-team" 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-team)"/>
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Leadership Section -->
|
||||
<section class="py-16 bg-white dark:bg-gray-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-gray-900 dark:text-gray-100 mb-4">
|
||||
Führungsteam
|
||||
</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
|
||||
Visionäre Führung mit jahrzehntelanger Erfahrung
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
|
||||
<!-- Leader 1 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 text-center hover:shadow-lg transition-all">
|
||||
<div class="w-32 h-32 bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-secondary)]/20 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||
<svg class="h-16 w-16 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-bold text-xl text-gray-900 dark:text-gray-100 mb-2">
|
||||
Dr. Michael Weber
|
||||
</h3>
|
||||
<p class="text-[var(--color-primary)] font-medium mb-4">Gründer & CEO</p>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||
15+ Jahre Erfahrung in PR und Unternehmenskommunikation. Ehemaliger Chefredakteur bei führenden Wirtschaftsmedien.
|
||||
</p>
|
||||
<div class="flex justify-center gap-3">
|
||||
<a href="#" class="text-gray-400 hover:text-[var(--color-primary)] transition-colors">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Leader 2 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 text-center hover:shadow-lg transition-all">
|
||||
<div class="w-32 h-32 bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-secondary)]/20 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||
<svg class="h-16 w-16 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-bold text-xl text-gray-900 dark:text-gray-100 mb-2">
|
||||
Sarah Hoffmann
|
||||
</h3>
|
||||
<p class="text-[var(--color-primary)] font-medium mb-4">Chief Technology Officer</p>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||
Expertin für digitale Plattformen und Skalierung. Zuvor Tech Lead bei mehreren erfolgreichen Start-ups.
|
||||
</p>
|
||||
<div class="flex justify-center gap-3">
|
||||
<a href="#" class="text-gray-400 hover:text-[var(--color-primary)] transition-colors">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Leader 3 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 text-center hover:shadow-lg transition-all">
|
||||
<div class="w-32 h-32 bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-secondary)]/20 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||
<svg class="h-16 w-16 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-bold text-xl text-gray-900 dark:text-gray-100 mb-2">
|
||||
Thomas Schneider
|
||||
</h3>
|
||||
<p class="text-[var(--color-primary)] font-medium mb-4">Head of Customer Success</p>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
||||
Spezialist für Kundenzufriedenheit mit Fokus auf langfristige Partnerschaften und Account Management.
|
||||
</p>
|
||||
<div class="flex justify-center gap-3">
|
||||
<a href="#" class="text-gray-400 hover:text-[var(--color-primary)] transition-colors">
|
||||
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Departments Section -->
|
||||
<section class="py-16 bg-gray-50/50 dark:bg-gray-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-gray-900 dark:text-gray-100 mb-4">
|
||||
Unsere Teams
|
||||
</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
|
||||
Engagierte Profis in allen Bereichen
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
|
||||
<!-- Department 1 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-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="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
|
||||
Engineering
|
||||
</h3>
|
||||
<p class="text-2xl font-bold text-[var(--color-primary)] mb-2">12</p>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">Entwickler & DevOps</p>
|
||||
</div>
|
||||
|
||||
<!-- Department 2 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-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="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
|
||||
Content & Redaktion
|
||||
</h3>
|
||||
<p class="text-2xl font-bold text-[var(--color-primary)] mb-2">8</p>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">Redakteure & Lektoren</p>
|
||||
</div>
|
||||
|
||||
<!-- Department 3 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-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-gray-900 dark:text-gray-100 mb-2">
|
||||
Customer Success
|
||||
</h3>
|
||||
<p class="text-2xl font-bold text-[var(--color-primary)] mb-2">15</p>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">Support & Account Manager</p>
|
||||
</div>
|
||||
|
||||
<!-- Department 4 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-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-gray-900 dark:text-gray-100 mb-2">
|
||||
Sales & Marketing
|
||||
</h3>
|
||||
<p class="text-2xl font-bold text-[var(--color-primary)] mb-2">10</p>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">Sales & Marketing Experten</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Values Section -->
|
||||
<section class="py-16 bg-white dark:bg-gray-950 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-gray-900 dark:text-gray-100 mb-4">
|
||||
Was uns antreibt
|
||||
</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Die Werte, die unser Team vereinen
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 transition-colors duration-200">
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">
|
||||
Innovation & Exzellenz
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Wir streben nach kontinuierlicher Verbesserung und technologischer Innovation, um unseren Kunden die beste Plattform zu bieten.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 transition-colors duration-200">
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">
|
||||
Kundenfokus
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Der Erfolg unserer Kunden ist unser Erfolg. Wir hören zu, verstehen Bedürfnisse und liefern maßgeschneiderte Lösungen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 transition-colors duration-200">
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">
|
||||
Zusammenarbeit
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Wir glauben an die Kraft der Zusammenarbeit – intern im Team und mit unseren Kunden und Partnern.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 transition-colors duration-200">
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">
|
||||
Transparenz & Integrität
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Ehrlichkeit und Transparenz sind die Grundlage für Vertrauen und langfristige Partnerschaften.
|
||||
</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="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-3xl font-bold mb-4">
|
||||
Werde Teil unseres Teams
|
||||
</h2>
|
||||
<p class="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
|
||||
Wir suchen leidenschaftliche Menschen, die mit uns die Zukunft der Unternehmenskommunikation gestalten möchten
|
||||
</p>
|
||||
<a href="/karriere" class="inline-flex items-center justify-center px-8 py-4 text-sm font-medium bg-white text-[var(--color-primary)] hover:bg-gray-100 rounded-lg shadow-md hover:shadow-lg transition-all">
|
||||
Offene Stellen ansehen
|
||||
</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
|
||||
412
resources/views/web/ueber-uns.blade.php
Normal file
412
resources/views/web/ueber-uns.blade.php
Normal file
|
|
@ -0,0 +1,412 @@
|
|||
@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-gray-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-gray-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-gray-600 dark:text-gray-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-gray-600 dark:text-gray-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-gray-600 dark:text-gray-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-gray-600 dark:text-gray-400">Länder</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Mission Section -->
|
||||
<section class="py-16 bg-gray-50/50 dark:bg-gray-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-gray-900 dark:text-gray-100 mb-4">
|
||||
Unsere Mission
|
||||
</h2>
|
||||
<p class="text-lg text-gray-600 dark:text-gray-400">
|
||||
Professionelle Unternehmenskommunikation für alle zugänglich machen
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 md:p-12 transition-colors duration-200">
|
||||
<p class="text-lg text-gray-900 dark:text-gray-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-gray-900 dark:text-gray-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-gray-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-gray-900 dark:text-gray-100 mb-4">
|
||||
Unsere Werte
|
||||
</h2>
|
||||
<p class="text-gray-600 dark:text-gray-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-gray-900 rounded-xl border border-gray-200 dark:border-gray-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-gray-900 dark:text-gray-100 mb-3">
|
||||
Qualität vor Quantität
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-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-gray-900 rounded-xl border border-gray-200 dark:border-gray-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-gray-900 dark:text-gray-100 mb-3">
|
||||
DACH-Expertise
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Spezialisiert auf den deutschsprachigen Raum mit tiefem Verständnis für regionale Besonderheiten.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Value 3 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-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-gray-900 dark:text-gray-100 mb-3">
|
||||
Kundenfokus
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-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-gray-900 rounded-xl border border-gray-200 dark:border-gray-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-gray-900 dark:text-gray-100 mb-3">
|
||||
Innovation & Technologie
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Kontinuierliche Weiterentwicklung unserer Plattform mit modernsten Technologien und Features.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Team Section -->
|
||||
<section class="py-16 bg-gray-50/50 dark:bg-gray-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-gray-900 dark:text-gray-100 mb-4">
|
||||
Unser Team
|
||||
</h2>
|
||||
<p class="text-gray-600 dark:text-gray-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-gray-900 rounded-xl border border-gray-200 dark:border-gray-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-gray-900 dark:text-gray-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-gray-600 dark:text-gray-400">
|
||||
15+ Jahre Erfahrung in PR und Unternehmenskommunikation
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Team Member 2 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-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-gray-900 dark:text-gray-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-gray-600 dark:text-gray-400">
|
||||
Expertin für digitale Plattformen und Skalierung
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Team Member 3 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-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-gray-900 dark:text-gray-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-gray-600 dark:text-gray-400">
|
||||
Spezialist für Kundenzufriedenheit und Account Management
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Team Member 4 -->
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-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-gray-900 dark:text-gray-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-gray-600 dark:text-gray-400">
|
||||
Journalistin mit Schwerpunkt digitale Medien
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Timeline Section -->
|
||||
<section class="py-16 bg-white dark:bg-gray-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-gray-900 dark:text-gray-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-gray-900 dark:text-gray-100 mb-2">
|
||||
Gründung
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-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-gray-900 dark:text-gray-100 mb-2">
|
||||
Expansion
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-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-gray-900 dark:text-gray-100 mb-2">
|
||||
Wachstum
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-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-gray-900 dark:text-gray-100 mb-2">
|
||||
Innovation
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-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-gray-900 dark:text-gray-100 mb-2">
|
||||
Marktführer
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-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-gray-900 dark:text-gray-100 mb-2">
|
||||
Zukunft
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-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-gray-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
|
||||
355
resources/views/web/veroeffentlichen.blade.php
Normal file
355
resources/views/web/veroeffentlichen.blade.php
Normal file
|
|
@ -0,0 +1,355 @@
|
|||
@extends('web.layouts.web-master')
|
||||
|
||||
@section('title', 'Pressemitteilung veröffentlichen - Business Portal 24')
|
||||
|
||||
@section('content')
|
||||
|
||||
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
|
||||
<livewire:web.burger-menu />
|
||||
<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">
|
||||
Pressemitteilung veröffentlichen
|
||||
</h1>
|
||||
<p class="text-xl text-white/90 leading-relaxed animate-fade-in-up animation-delay-200">
|
||||
In nur 5 Schritten zur professionellen Presseveröffentlichung
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Quick Access Section -->
|
||||
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] rounded-xl p-8 text-center text-white mb-16">
|
||||
<h2 class="text-2xl font-bold mb-4">Bereit zum Veröffentlichen?</h2>
|
||||
<p class="text-white/90 mb-6">
|
||||
Melden Sie sich im Backend-Portal an, um Ihre Pressemitteilung zu erstellen
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-4 justify-center">
|
||||
<a href="{{ config('domains.domain_admin_url') }}/login" class="inline-flex items-center justify-center px-8 py-4 text-sm font-medium bg-white text-[var(--color-primary)] hover:bg-gray-100 rounded-lg shadow-md hover:shadow-lg transition-all">
|
||||
Zum Backend-Portal (pr-copilot)
|
||||
</a>
|
||||
<a href="{{ config('domains.domain_admin_url') }}/register" class="inline-flex items-center justify-center px-8 py-4 text-sm font-medium text-white border-2 border-white hover:bg-white/10 rounded-lg transition-all">
|
||||
Kostenlos registrieren
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
|
||||
So funktioniert's
|
||||
</h2>
|
||||
<p class="text-gray-600 dark:text-gray-400">
|
||||
Folgen Sie unserem einfachen 5-Schritte-Prozess
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Steps Section -->
|
||||
<section class="py-16 bg-gray-50/50 dark:bg-gray-900/50 transition-colors duration-200">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="max-w-4xl mx-auto space-y-8">
|
||||
|
||||
<!-- Step 1 -->
|
||||
<div class="flex gap-6">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-16 h-16 rounded-full flex items-center justify-center text-white font-bold text-2xl" style="background: var(--gradient-hero);">
|
||||
1
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-3">
|
||||
Account erstellen & anmelden
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
||||
Registrieren Sie sich kostenlos im Backend-Portal (<strong>pr-copilot.test</strong>) oder melden Sie sich mit Ihrem bestehenden Account an.
|
||||
</p>
|
||||
<div class="bg-gray-50 dark:bg-gray-950 rounded-lg p-4">
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">
|
||||
<strong>Tipp:</strong> Die Registrierung dauert nur 2 Minuten und Sie können sofort loslegen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 2 -->
|
||||
<div class="flex gap-6">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-16 h-16 rounded-full flex items-center justify-center text-white font-bold text-2xl" style="background: var(--gradient-hero);">
|
||||
2
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-3">
|
||||
Grunddaten eingeben
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
||||
Geben Sie die wichtigsten Informationen zu Ihrer Pressemitteilung ein:
|
||||
</p>
|
||||
<ul class="space-y-2 mb-4">
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">Aussagekräftiger Titel (max. 100 Zeichen)</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">Kurze Zusammenfassung (Teaser)</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">Passende Kategorie auswählen</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">Veröffentlichungsdatum festlegen</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 3 -->
|
||||
<div class="flex gap-6">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-16 h-16 rounded-full flex items-center justify-center text-white font-bold text-2xl" style="background: var(--gradient-hero);">
|
||||
3
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-3">
|
||||
Content erstellen
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
||||
Verfassen Sie Ihre Pressemitteilung mit unserem intuitiven Editor:
|
||||
</p>
|
||||
<ul class="space-y-2 mb-4">
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">WYSIWYG-Editor mit Formatierungsoptionen</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">Überschriften, Listen und Formatierungen</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">SEO-Score in Echtzeit</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">Automatische Speicherung als Entwurf</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 4 -->
|
||||
<div class="flex gap-6">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-16 h-16 rounded-full flex items-center justify-center text-white font-bold text-2xl" style="background: var(--gradient-hero);">
|
||||
4
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-3">
|
||||
Medien hochladen
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
||||
Ergänzen Sie Ihre Pressemitteilung mit aussagekräftigen Medien:
|
||||
</p>
|
||||
<ul class="space-y-2 mb-4">
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">Bilder (JPG, PNG, WebP, max. 10 MB)</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">PDF-Dokumente (max. 25 MB)</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">Video-Einbettung (YouTube, Vimeo)</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">Automatische Bildoptimierung</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="bg-gray-50 dark:bg-gray-950 rounded-lg p-4">
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
<strong>Tipp:</strong> Hochauflösende Bilder erhöhen die Aufmerksamkeit um bis zu 80%
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 5 -->
|
||||
<div class="flex gap-6">
|
||||
<div class="flex-shrink-0">
|
||||
<div class="w-16 h-16 rounded-full flex items-center justify-center text-white font-bold text-2xl" style="background: var(--gradient-hero);">
|
||||
5
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
|
||||
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-3">
|
||||
Veröffentlichen
|
||||
</h3>
|
||||
<p class="text-gray-600 dark:text-gray-400 mb-4">
|
||||
Überprüfen Sie Ihre Pressemitteilung und veröffentlichen Sie sie:
|
||||
</p>
|
||||
<ul class="space-y-2 mb-4">
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">Live-Vorschau vor Veröffentlichung</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">Freischaltung innerhalb von 2-4 Stunden</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">E-Mail-Benachrichtigung bei Freischaltung</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-2">
|
||||
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
|
||||
</svg>
|
||||
<span class="text-sm text-gray-600 dark:text-gray-400">Sofortige Sichtbarkeit nach Freischaltung</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-950 dark:to-emerald-950 border border-green-200 dark:border-green-800 rounded-lg p-4">
|
||||
<p class="text-sm text-green-800 dark:text-green-200">
|
||||
<strong>Professional & Enterprise Kunden:</strong> Express-Freischaltung in unter 1 Stunde!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Benefits Section -->
|
||||
<section class="py-16 bg-white dark:bg-gray-950 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-gray-900 dark:text-gray-100 mb-4">
|
||||
Ihre Vorteile
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 text-center">
|
||||
<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 10V3L4 14h7v7l9-11h-7z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
|
||||
Schnell & Einfach
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
In unter 10 Minuten zur fertigen Pressemitteilung
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 text-center">
|
||||
<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="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
|
||||
SEO-Optimiert
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Maximale Sichtbarkeit in Suchmaschinen
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 text-center">
|
||||
<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-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
|
||||
Qualitätssicherung
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400">
|
||||
Redaktionelle Prüfung vor Veröffentlichung
|
||||
</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">
|
||||
<h2 class="text-3xl font-bold mb-4">
|
||||
Jetzt loslegen!
|
||||
</h2>
|
||||
<p class="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
|
||||
Melden Sie sich im Backend-Portal an und veröffentlichen Sie Ihre erste Pressemitteilung
|
||||
</p>
|
||||
<a href="{{ config('domains.domain_admin_url') }}/login" class="inline-flex items-center justify-center px-8 py-4 text-sm font-medium bg-white text-[var(--color-primary)] hover:bg-gray-100 rounded-lg shadow-md hover:shadow-lg transition-all">
|
||||
Zum Backend-Portal →
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<livewire:web.footer />
|
||||
</main>
|
||||
|
||||
@endsection
|
||||
|
||||
@push('styles')
|
||||
<style>
|
||||
:root {
|
||||
--color-primary: {{ $domainConfig['color_scheme']['primary'] ?? '#cf3628' }};
|
||||
--color-secondary: {{ $domainConfig['color_scheme']['secondary'] ?? '#f0834a' }};
|
||||
}
|
||||
[x-cloak] { display: none !important; }
|
||||
</style>
|
||||
@endpush
|
||||
43
resources/views/web/welcome.blade.php
Normal file
43
resources/views/web/welcome.blade.php
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
@extends('web.layouts.web-master')
|
||||
|
||||
@section('title', 'Willkommen - ' . config('app.name'))
|
||||
|
||||
@section('content')
|
||||
<div class="py-12">
|
||||
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
|
||||
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
|
||||
<div class="p-6 text-gray-900 dark:text-gray-100">
|
||||
<h1 class="text-2xl font-bold mb-4">Willkommensseite</h1>
|
||||
<p class="mb-4">Dies ist die Willkommensseite mit dem {{ ucfirst(config('app.theme')) }} Theme.</p>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mt-8">
|
||||
<div class="bg-accent-50 dark:bg-accent-900 p-6 rounded-lg shadow-sm">
|
||||
<h3 class="text-xl font-semibold mb-3 text-accent-800 dark:text-accent-200">Über das Theme</h3>
|
||||
<p>Diese Seite demonstriert die verschiedenen Stile des
|
||||
{{ ucfirst(config('app.theme')) }}-Themes.</p>
|
||||
<p class="mt-2">Jede Landingpage hat ihr eigenes Theme mit individuellen Farben und Schriften.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-primary-50 dark:bg-primary-900 p-6 rounded-lg shadow-sm">
|
||||
<h3 class="text-xl font-semibold mb-3 text-primary-800 dark:text-primary-200">Domainspezifisches
|
||||
Styling</h3>
|
||||
<p>Die Styles werden basierend auf der Domain automatisch geladen:</p>
|
||||
<ul class="list-disc pl-5 mt-2 space-y-1">
|
||||
<li>pr-copilot.local - Hauptstil</li>
|
||||
<li>landing1.local - Landingpage 1</li>
|
||||
<li>landing2.local - Landingpage 2</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<a href="{{ url('/') }}" class="button">
|
||||
Zurück zur Startseite
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
Loading…
Add table
Add a link
Reference in a new issue