gitmedia/b2in
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

development 31-10-2025

Browse source
This commit is contained in:
Kevin Adametz 2025-10-31 17:11:43 +01:00
parent 7cf3558ba7
commit fa2ebd457d
47 changed files with 2980 additions and 452 deletions
Download patch file Download diff file Expand all files Collapse all files

1215
resources/css/web/exampels.css Normal file
View file

File diff suppressed because it is too large Load diff

231
resources/css/web/shared-styles.css
View file

@ -23,9 +23,10 @@ h1, h2, h3, h4, h5, h6 {
font-family: var(--font-secondary, 'Inter'), var(--font-primary, 'Inter'), system-ui, -apple-system, sans-serif;
}
/* Typography scales */
.text-hero {
font-size: clamp(3rem, 4vw, 6rem);
font-size: clamp(2.6rem, 3.5vw, 3.6rem);
line-height: 1.1;
font-weight: 300;
letter-spacing: -0.025em;
@ -33,6 +34,7 @@ h1, h2, h3, h4, h5, h6 {
.text-section-title {
font-size: clamp(1.6rem, 3vw, 3rem);
line-height: 1.3em;
font-weight: 300;
letter-spacing: -0.025em;
}
@ -62,6 +64,11 @@ h1, h2, h3, h4, h5, h6 {
/* Button styles */
.btn-primary {
background-color: hsl(var(--primary));
background: linear-gradient(
145deg,
hsl(var(--primary)) 0%,
hsl(var(--primary-light)) 100%
) !important;
color: hsl(var(--primary-foreground));
padding: 0.75rem 2rem;
border-radius: 0.5rem;
@ -74,11 +81,22 @@ h1, h2, h3, h4, h5, h6 {
.btn-primary:hover {
background-color: hsl(var(--secondary));
color: hsl(var(--secondary-foreground));
background: linear-gradient(
145deg,
hsl(var(--primary-light)) 0%,
hsl(var(--primary)) 100%
) !important;
color: hsl(var(--secondary-lighter));
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}
.btn-primary-accent {
background-color: hsl(var(--primary));
background: linear-gradient(
145deg,
hsl(var(--primary)) 0%,
hsl(var(--primary-light)) 100%
) !important;
color: hsl(var(--primary-foreground));
border: 1px solid hsl(var(--border));
padding: 0.75rem 2rem;
@ -92,12 +110,22 @@ h1, h2, h3, h4, h5, h6 {
.btn-primary-accent:hover {
background-color: hsl(var(--accent));
color: hsl(var(--accent-foreground));
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
background: linear-gradient(
145deg,
hsl(var(--primary-light)) 0%,
hsl(var(--primary)) 100%
) !important;
color: hsl(var(--secondary-lighter));
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}
.btn-secondary {
background-color: hsl(var(--secondary));
background: linear-gradient(
145deg,
hsl(var(--secondary)) 0%,
hsl(var(--secondary-dark)) 100%
) !important;
color: hsl(var(--secondary-foreground));
border: 1px solid hsl(var(--border));
padding: 0.75rem 2rem;
@ -111,11 +139,16 @@ h1, h2, h3, h4, h5, h6 {
.btn-secondary:hover {
background-color: hsl(var(--primary));
color: hsl(var(--primary-foreground));
color: hsl(var(--primary-lighter));
}
.btn-secondary-accent {
background-color: hsl(var(--secondary));
background: linear-gradient(
145deg,
hsl(var(--secondary)) 0%,
hsl(var(--secondary-dark)) 100%
) !important;
color: hsl(var(--secondary-foreground));
border: 1px solid hsl(var(--border));
padding: 0.75rem 2rem;
@ -128,11 +161,21 @@ h1, h2, h3, h4, h5, h6 {
.btn-secondary-accent:hover {
background-color: hsl(var(--accent));
color: hsl(var(--accent-foreground));
background: linear-gradient(
145deg,
hsl(var(--secondary-dark)) 0%,
hsl(var(--secondary)) 100%
) !important;
color: hsl(var(--primary-lighter));
}
.btn-accent {
background-color: hsl(var(--accent));
background: linear-gradient(
145deg,
hsl(var(--accent)) 0%,
hsl(var(--accent-dark)) 100%
) !important;
color: hsl(var(--accent-foreground));
padding: 0.75rem 2rem;
border-radius: 0.5rem;
@ -144,8 +187,12 @@ h1, h2, h3, h4, h5, h6 {
}
.btn-accent:hover {
background-color: hsl(var(--secondary));
color: hsl(var(--secondary-foreground));
background: linear-gradient(
145deg,
hsl(var(--accent-dark)) 0%,
hsl(var(--accent)) 100%
) !important;
color: hsl(var(--accent-foreground));
box-shadow: var(--shadow-accent-glow);
}
@ -267,7 +314,12 @@ h1, h2, h3, h4, h5, h6 {
}
.bg-secondary {
background-color: hsl(var(--secondary));
background: linear-gradient(
180deg,
hsl(var(--secondary)) 0%,
hsl(var(--secondary), 0.4) 100%
);
position: relative;
}
.text-secondary-foreground {
@ -302,10 +354,13 @@ h1, h2, h3, h4, h5, h6 {
background-color: hsl(var(--secondary) / 0.1);
}
.bg-secondary\/15 {
background-color: hsl(var(--secondary) / 0.15);
}
.bg-secondary\/20 {
background-color: hsl(var(--secondary) / 0.2);
}
.bg-card\/95 {
background-color: hsl(var(--card) / 0.95);
}
@ -406,8 +461,7 @@ h1, h2, h3, h4, h5, h6 {
/* TopBar specific styles */
.topbar-normal {
background-color: hsl(var(--muted) / 0.2);
border-bottom: 1px solid hsl(var(--border) / 0.3);
background-color: hsl(var(--muted));
}
/* Sticky Header Verhalten */
@ -426,6 +480,8 @@ h1, h2, h3, h4, h5, h6 {
.header-normal {
position: relative;
transition: all 0.3s ease-in-out;
border-bottom: 1px solid hsl(var(--border)/0.3);
}
.bg-muted\/20 {
@ -435,3 +491,154 @@ h1, h2, h3, h4, h5, h6 {
.border-border\/30 {
border-color: hsl(var(--border) / 0.3);
}
.font-secondary {
font-family: var(--font-secondary, 'Inter'), var(--font-primary, 'Inter'), system-ui, -apple-system, sans-serif;
}
/* Premium Scroll Animations - Optimiert und subtil */
.scroll-animate {
opacity: 0;
will-change: opacity, transform;
transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.scroll-animate.is-visible {
opacity: 1;
}
/* Fade In - Sanftes Einblenden */
.fade-in {
opacity: 0;
will-change: opacity;
transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.fade-in.is-visible {
opacity: 1;
}
/* Slide from Bottom - Subtiler */
.slide-up {
opacity: 0;
transform: translateY(30px);
will-change: opacity, transform;
transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.slide-up.is-visible {
opacity: 1;
transform: translateY(0);
}
.slide-down {
opacity: 0;
transform: translateY(-30px);
will-change: opacity, transform;
transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.slide-down.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Slide from Left - Subtiler */
.slide-right {
opacity: 0;
transform: translateX(-30px);
will-change: opacity, transform;
transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.slide-right.is-visible {
opacity: 1;
transform: translateX(0);
}
/* Slide from Right - Subtiler */
.slide-left {
opacity: 0;
transform: translateX(30px);
will-change: opacity, transform;
transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.slide-left.is-visible {
opacity: 1;
transform: translateX(0);
}
/* Scale In - Sehr subtil */
.scale-in {
opacity: 0;
transform: scale(0.97);
will-change: opacity, transform;
transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.scale-in.is-visible {
opacity: 1;
transform: scale(1);
}
/* Staggered delays - Für gestaffelte Animationen */
.delay-100 {
transition-delay: 0.1s;
}
.delay-200 {
transition-delay: 0.2s;
}
.delay-300 {
transition-delay: 0.3s;
}
.delay-400 {
transition-delay: 0.4s;
}
.delay-500 {
transition-delay: 0.5s;
}
.delay-600 {
transition-delay: 0.6s;
}
.delay-700 {
transition-delay: 0.7s;
}
.delay-800 {
transition-delay: 0.8s;
}
.delay-900 {
transition-delay: 0.9s;
}
.delay-1000 {
transition-delay: 1s;
}
/* Reduziere Motion für Nutzer mit Präferenz */
@media (prefers-reduced-motion: reduce) {
.scroll-animate,
.fade-in,
.slide-up,
.slide-right,
.slide-left,
.scale-in {
transition: none !important;
opacity: 1 !important;
transform: none !important;
}
}

203
resources/css/web/theme-b2in.css
View file

@ -17,16 +17,23 @@
/* B2IN Theme Colors */
--primary: 209 32% 25%; /* #2b3f51 - Anthracite */
--primary-light: 209 32% 35%; /* #2b3f51 - Anthracite */
--primary-lighter: 209 32% 85%; /* #2b3f51 - Anthracite */
--primary-dark: 209 32% 20%; /* #2b3f51 - Anthracite */
--primary-foreground: 0 25% 96%; /* #hsl(0 25% 96%) - Off White */
--secondary: 199 74% 49%; /* #20a0da - Dynamic Blue */
--secondary-light: 199 74% 56%; /* #20a0da - Dynamic Blue */
--secondary-lighter: 199 74% 75%; /* #20a0da - Dynamic Blue */
--secondary-dark: 199 74% 42%; /* #20a0da - Dynamic Blue */
--secondary-foreground: 0 25% 96%; /* hsl(0 25% 96%) - Off White */
/* Neutral colors */
--muted: 0 0% 92%; /* hsl(0 0% 92%) - Light Muted */
--muted-foreground: 199 50% 45%; /* #4a8bb5 - Muted Blue */
--muted-foreground: 199 50% 35%; /* #4a8bb5 - Muted Blue */
--accent: 210 0% 94%; /* hsl(210 5.26% 92.55%) - Light Accent */
--accent: 210 0% 90%; /* hsl(210 5.26% 92.55%) - Light Accent */
--accent-dark: 210 0% 85%; /* hsl(210 5.26% 92.55%) - Light Accent */
--accent-foreground: 20 14% 16%; /* #2a2a2a - Dark Gray */
/* Dark section colors */
@ -45,7 +52,9 @@
--radius: 0.75rem;
/* Hero container background */
--hero-container: 0 0% 91%; /* #e8e8e8 - Light Gray */
--hero-container: 0 0% 93%; /* #e8e8e8 - Light Gray */
--hero-container-dark: 0 0% 85%; /* #e8e8e8 - Light Gray */
--hero-container-light: 0 0% 95%; /* #e8e8e8 - Light Gray */
/* Consistent shadows */
--shadow-warm: 0 10px 30px -15px hsl(var(--foreground) / 0.1);
@ -62,7 +71,195 @@
--font-secondary: 'IBM Plex Sans', 'Inter', system-ui, -apple-system, sans-serif;
}
}
/* Shadow Effects - Updated for new primary color */
.shadow-elegant {
box-shadow: 0 10px 30px -10px rgba(0, 136, 204, 0.2);
}
.shadow-elegant-white {
box-shadow: 0 10px 30px -10px rgba(255, 255, 255, 0.2);
}
.shadow-white {
box-shadow: 0 10px 30px -10px rgba(255, 255, 255, 0.4);
}
.elegant-shadow-card {
box-shadow:
0 2px 8px -2px rgba(0, 0, 0, 0.08),
0 4px 10px 0px rgba(0, 136, 204,1);
}
.shadow-premium {
box-shadow: 0 20px 60px -15px rgba(0, 136, 204, 0.3);
}
/* Glow Effects - Inspired by Möbius band's luminous edge */
.glow-soft {
box-shadow:
0 0 10px rgba(0, 155, 221, 0.15),
0 0 20px rgba(0, 155, 221, 0.1),
0 4px 10px -4px rgba(0, 136, 204, 0.2);
}
.glow-medium {
box-shadow:
0 0 15px rgba(0, 155, 221, 0.25),
0 0 30px rgba(0, 155, 221, 0.15),
0 5px 10px -5px rgba(0, 136, 204, 0.3);
}
.glow-strong {
box-shadow:
0 0 30px rgba(0, 155, 221, 0.35),
0 0 60px rgba(0, 155, 221, 0.2),
0 0 90px rgba(0, 113, 168, 0.1),
0 10px 10px -10px rgba(0, 136, 204, 0.4);
}
.icon-secondary-linear {
background-color: hsl(var(--secondary) / 0.1);
background: linear-gradient(
135deg,
hsl(var(--secondary)) 0%,
hsl(var(--secondary-dark)) 100%
);
color: hsl(var(--secondary-foreground)) !important;
position: relative;
}
.text-section-title {
line-height: 0.95em;
}
.variante-glass-flow {
& * {
will-change: auto;
} section,
& .section-container {
background: linear-gradient(
135deg,
hsl(var(--background)) 0%,
hsl(var(--background)/90%) 100%
);
position: relative;
}
& section.bg-accent {
background: linear-gradient(
135deg,
hsl(var(--accent) /0.5) 0%,
hsl(var(--accent-dark) / 0.5) 100%
);
position: relative;
}
& section.bg-secondary {
background: linear-gradient(
135deg,
hsl(var(--secondary)) 0%,
hsl(var(--secondary-dark)) 100%
);
position: relative;
}
& div.bg-hero-container {
border: 1px solid rgba(255, 255, 255, 0.9);
background: linear-gradient(
135deg,
hsl(var(--hero-container)) 0%,
hsl(var(--hero-container-dark)) 100%
);
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
position: relative;
}
/* Cards - Multi-Layer-Schatten für Tiefe (Optimiert) */
& .card,
& [class*="card"],
& .bg-card,
& article {
background:
linear-gradient(
145deg,
hsl(0 0% 100%) 0%,
hsl(0 0% 99.5%) 40%,
hsl(0 0% 99%) 100%
);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.03),
0 1px 1px rgba(0, 0, 0, 0.02),
0 2px 3px rgba(0, 0, 0, 0.025),
0 4px 6px rgba(0, 0, 0, 0.03),
0 8px 12px rgba(0, 0, 0, 0.04),
0 12px 20px rgba(0, 0, 0, 0.045),
inset 0 1px 2px rgba(255, 255, 255, 0.8),
inset 0 -1px 1px rgba(0, 0, 0, 0.02);
border: 1px solid rgba(255, 255, 255, 0.9);
transition:
transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
filter 0.3s ease;
position: relative;
}
& .card:hover,
& [class*="card"]:hover,
& article:hover {
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.04),
0 2px 4px rgba(0, 0, 0, 0.03),
0 4px 8px rgba(0, 0, 0, 0.04),
0 8px 16px rgba(0, 0, 0, 0.05),
0 16px 24px rgba(0, 0, 0, 0.07),
0 24px 40px rgba(0, 0, 0, 0.08),
0 32px 64px rgba(0, 0, 0, 0.06),
inset 0 1px 3px rgba(255, 255, 255, 0.9),
inset 0 -1px 2px rgba(0, 0, 0, 0.03);
transform: translateY(-2px) scale(1.005);
filter: brightness(1.01);
}
& button,
& .btn,
& .btn-secondary,
& a[class*="btn"],
& [role="button"] {
position: relative;
overflow: hidden;
isolation: isolate;
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.05),
0 2px 4px rgba(0, 0, 0, 0.06),
0 4px 8px rgba(0, 0, 0, 0.07),
0 8px 16px rgba(0, 0, 0, 0.05);
transition:
transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
filter 0.2s ease;
}
& button:hover,
& .btn:hover,
& .btn-secondary:hover,
& a[class*="btn"]:hover,
& [role="button"]:hover {
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.06),
0 4px 8px rgba(0, 0, 0, 0.08),
0 8px 16px rgba(0, 0, 0, 0.1),
0 16px 32px rgba(0, 0, 0, 0.08),
0 0 40px hsla(199, 74%, 49%, 0.3);
transform: translateY(-2px);
filter: brightness(1.08);
}
/* Scroll-Optimierung für sanftere Animationen */
& {
scroll-behavior: smooth;
}
}
@import "./shared-styles.css";

161
resources/js/app.js
View file

@ -1 +1,162 @@
// App JS ohne Alpine-Initialisierung. Alpine wird von Livewire verwaltet.
// Premium Scroll Animations with Intersection Observer
(function() {
'use strict';
// Warte bis DOM vollständig geladen ist
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initAnimations);
} else {
initAnimations();
}
function initAnimations() {
// Intersection Observer Konfiguration
const observerOptions = {
threshold: 0.15,
rootMargin: '0px 0px -80px 0px'
};
// Erstelle Observer
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// Füge is-visible Klasse mit kleinem Delay hinzu für sanfteren Effekt
setTimeout(() => {
entry.target.classList.add('is-visible');
}, 50);
// Observer beenden nach Animation für bessere Performance
observer.unobserve(entry.target);
}
});
}, observerOptions);
// Finde alle Elemente mit Animation-Klassen
const animatedElements = document.querySelectorAll(
'.scroll-animate, .fade-in, .slide-up, .slide-right, .slide-left, .scale-in'
);
// Beobachte jedes Element
animatedElements.forEach(el => {
observer.observe(el);
});
// Smooth Scroll für Anchor-Links
document.addEventListener('click', function(e) {
const target = e.target.closest('a[href^="#"]');
if (target && target.hash) {
const targetElement = document.querySelector(target.hash);
if (targetElement) {
e.preventDefault();
const headerOffset = 80;
const elementPosition = targetElement.getBoundingClientRect().top;
const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
window.scrollTo({
top: offsetPosition,
behavior: 'smooth'
});
}
}
});
// Scroll Progress Indicator
initScrollProgress();
// Premium Sticky Header
initStickyHeader();
}
function initStickyHeader() {
const header = document.getElementById('main-header');
if (!header) return;
let lastScrollTop = 0;
let scrollTimeout = null;
function handleHeaderScroll() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
// Add/Remove scrolled class for enhanced shadow
if (scrollTop > 50) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
// Optional: Hide header on scroll down, show on scroll up
// Uncomment if you want auto-hide behavior
/*
if (scrollTop > lastScrollTop && scrollTop > 100) {
// Scrolling down
header.classList.add('hide');
} else {
// Scrolling up
header.classList.remove('hide');
}
*/
lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
}
// Listen to scroll with throttling
let headerTicking = false;
window.addEventListener('scroll', function() {
if (!headerTicking) {
window.requestAnimationFrame(function() {
handleHeaderScroll();
headerTicking = false;
});
headerTicking = true;
}
});
// Initial check
handleHeaderScroll();
}
function initScrollProgress() {
// Erstelle Progress Bar Element
const progressBar = document.createElement('div');
progressBar.className = 'scroll-progress-bar';
document.body.appendChild(progressBar);
// Update Progress on Scroll
function updateProgress() {
const windowHeight = window.innerHeight;
const documentHeight = document.documentElement.scrollHeight;
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
// Berechne Progress (0-100%)
const scrollPercentage = (scrollTop / (documentHeight - windowHeight)) * 100;
// Update Bar Width
progressBar.style.width = `${Math.min(scrollPercentage, 100)}%`;
// Optional: Show/Hide basierend auf Scroll-Position
if (scrollTop > 100) {
progressBar.classList.add('visible');
} else {
progressBar.classList.remove('visible');
}
}
// Listen to scroll events mit Throttling für Performance
let ticking = false;
window.addEventListener('scroll', function() {
if (!ticking) {
window.requestAnimationFrame(function() {
updateProgress();
ticking = false;
});
ticking = true;
}
});
// Initial update
updateProgress();
}
})();

146
resources/views/livewire/web/components/sections/benefits-section.blade.php Normal file
View file

@ -0,0 +1,146 @@
<section class="section-padding {{ $bg }}" id="{{ $content['id'] }}">
<div class="container-padding">
@if(isset($content['title']))
<div class="text-center mb-16">
<h2 class="text-section-title text-foreground mb-6">
{{ $content['title'] }}
</h2>
<p class="text-large text-muted-foreground max-w-3xl mx-auto">
{{ $content['subtitle'] }}
</p>
</div>
@endif
<div class="grid lg:grid-cols-12 gap-16">
@if ($layout === 'right')
{{-- Layout Right: Bild zuerst, dann Text --}}
{{-- Bild --}}
<div class="space-y-8 col-span-8 lg:col-span-4 order-2 lg:order-1">
<div class="relative h-full">
<div class="sticky top-8">
<div class="relative rounded-3xl overflow-hidden shadow-elevated slide-right delay-300">
@if(isset($content['image']))
<img src="{{ asset('img/assets/' . $content['image']) }}"
alt="{{ $content['image_alt'] ?? 'Benefits Image' }}"
class="w-full h-[400px] md:h-[500px] lg:h-[600px] object-cover" />
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
@endif
</div>
<div class="bg-secondary/5 rounded-xl p-6 mt-6">
<div class="text-center">
<div class="text-3xl font-bold text-secondary mb-2">{{ $content['highlight']['value'] }}</div>
<p class="text-sm text-muted-foreground">
{{ $content['highlight']['text'] }}
</p>
</div>
</div>
</div>
</div>
</div>
{{-- Text --}}
<div class="space-y-8 col-span-8 order-1 lg:order-2">
<div class="text-center lg:text-left slide-left delay-400">
<div
class="inline-flex items-center gap-2 bg-secondary/10 text-secondary px-4 py-2 rounded-full text-md font-medium mb-6">
@svg('heroicon-o-'.$content['tag_icon'], 'w-4 h-4')
{{ $content['tag'] }}
</div>
<h3 class="text-3xl font-light text-foreground mb-6">
{!! $content['tag_title'] !!}
</h3>
</div>
<div class="space-y-6">
@foreach ($content['features'] as $index => $feature)
<div class="card-elevated p-6 rounded-xl slide-left delay-{{ 500 + ($index * 100) }}">
<div class="flex gap-4">
<div
class="flex-shrink-0 w-12 h-12 rounded-xl bg-secondary/10 flex items-center justify-center">
@if (isset($feature['icon']))
@svg('heroicon-o-'.$feature['icon'], 'w-6 h-6 text-secondary')
@endif
</div>
<div>
<h4 class="text-lg font-semibold text-foreground mb-2">
{{ $feature['title'] }}
</h4>
<p class="text-muted-foreground">
{{ $feature['description'] }}
</p>
</div>
</div>
</div>
@endforeach
</div>
</div>
@else
{{-- Layout Left (Standard): Text zuerst, dann Bild --}}
{{-- Text --}}
<div class="space-y-8 col-span-8 order-1 lg:order-1">
<div class="text-center lg:text-left slide-right delay-300">
<div
class="inline-flex items-center gap-2 bg-secondary/10 text-secondary px-4 py-2 rounded-full text-md font-medium mb-6">
@svg('heroicon-o-'.$content['tag_icon'], 'w-4 h-4')
{{ $content['tag'] }}
</div>
<h3 class="text-3xl font-light text-foreground mb-6">
{!! $content['tag_title'] !!}
</h3>
</div>
<div class="space-y-6">
@foreach ($content['features'] as $index => $feature)
<div class="card-elevated p-6 rounded-xl slide-right delay-{{ 400 + ($index * 100) }}">
<div class="flex gap-4">
<div
class="flex-shrink-0 w-12 h-12 rounded-xl bg-secondary/10 flex items-center justify-center">
@if (isset($feature['icon']))
@svg('heroicon-o-'.$feature['icon'], 'w-6 h-6 text-secondary')
@endif
</div>
<div>
<h4 class="text-lg font-semibold text-foreground mb-2">
{{ $feature['title'] }}
</h4>
<p class="text-muted-foreground">
{{ $feature['description'] }}
</p>
</div>
</div>
</div>
@endforeach
</div>
</div>
{{-- Bild --}}
<div class="space-y-8 col-span-8 lg:col-span-4 order-2 lg:order-2">
<div class="relative h-full">
<div class="sticky top-8">
<div class="relative rounded-3xl overflow-hidden shadow-elevated slide-left delay-300">
@if(isset($content['image']))
<img src="{{ asset('img/assets/' . $content['image']) }}"
alt="{{ $content['image_alt'] ?? 'Benefits Image' }}"
class="w-full h-[400px] md:h-[500px] lg:h-[600px] object-cover" />
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
@endif
</div>
<div class="bg-secondary/5 rounded-xl p-6 mt-6">
<div class="text-center">
<div class="text-3xl font-bold text-secondary mb-2">{{ $content['highlight']['value'] }}</div>
<p class="text-sm text-muted-foreground">
{{ $content['highlight']['text'] }}
</p>
</div>
</div>
</div>
</div>
</div>
@endif
</div>
</div>
</section>

28
resources/views/livewire/web/components/sections/brand-worlds.blade.php
View file

@ -1,27 +1,33 @@
<section class="section-padding {{ $bg }}">
<div class="container-padding">
{{-- Section Title --}}
<div class="text-center mb-16">
<h2 class="text-section-title">{{ $title }}</h2>
<p class="text-large text-muted-foreground mt-4 max-w-2xl mx-auto">
{{ $subtitle }}
<div class="text-center mb-16 slide-up delay-300">
<h2 class="text-section-title">{!! $title !!}</h2>
<p class="text-large text-muted-foreground mt-4 max-w-3xl mx-auto">
{!! $subtitle !!}
</p>
</div>
{{-- Brand Cards --}}
<div class="grid md:grid-cols-3 gap-8">
@foreach ($worlds as $world)
<div class="card-elevated overflow-hidden group hover:shadow-elevated transition-all duration-300">
<div class="card-elevated overflow-hidden group hover:shadow-elevated transition-all duration-300 flex flex-col slide-up delay-500">
<div class="relative">
<img src="{{ asset('img/assets/' . $world['image']) }}" alt="{{ $world['title'] }}"
class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500" />
</div>
<div class="p-6 spacing-small">
<h3 class="text-xl font-medium">{{ $world['title'] }}</h3>
<p class="text-muted-foreground leading-relaxed">
{{ $world['description'] }}
</p>
<div class="p-6 spacing-small flex flex-col justify-between flex-grow">
<div class="mb-4">
@if (isset($world['logo']))
<img src="{{ asset($world['logo']) }}" alt="{{ $world['title'] }}"
class="{{ $world['logo_width'] }} h-18 object-contain" />
@else
<h3 class="text-xl font-medium">{{ $world['title'] }}</h3>
@endif
<p class="text-muted-foreground leading-relaxed mt-2">
{{ $world['description'] }}
</p>
</div>
<a href="{{ $world['link'] }}"
class="inline-flex items-center gap-2 text-secondary font-medium hover:gap-3 transition-all duration-300">

6
resources/views/livewire/web/components/sections/c-t-a-section.blade.php
View file

@ -1,15 +1,15 @@
<section class="{{ $bg }} text-secondary-foreground section-padding">
<div class="container-narrow text-center">
<div class="spacing-section">
<h2 class="text-section-title text-white">
<h2 class="text-section-title text-white slide-up delay-300">
{!! $content['title'] !!}
</h2>
<p class="text-large text-secondary-foreground max-w-2xl mx-auto leading-relaxed">
<p class="text-large text-secondary-foreground max-w-2xl mx-auto leading-relaxed slide-up delay-300">
{{ $content['subtitle'] }}
</p>
<div class="pt-4">
<div class="pt-4 slide-up delay-500">
<a
href="{{ $content['button_link'] }}"
class="btn-primary-accent px-8 py-4 text-lg"

69
resources/views/livewire/web/components/sections/card-section.blade.php Normal file
View file

@ -0,0 +1,69 @@
<section class="section-padding {{ $bg }}">
<div class="container-padding">
{{-- Section Title --}}
<div class="text-center mb-16 slide-up delay-300">
<h2 class="text-section-title">{!! $content['title'] !!}</h2>
<p class="text-large text-muted-foreground mt-4 max-w-3xl mx-auto">
{!! $content['subtitle'] !!}
</p>
</div>
{{-- Brand Cards --}}
<div class="grid md:grid-cols-3 gap-8">
@foreach ($content['cards'] as $index => $card)
<div class="card-elevated overflow-hidden group hover:shadow-elevated transition-all duration-300 flex flex-col slide-up delay-{{ $index * 200 }}">
@if(isset($card['image']))
<div class="relative">
<img src="{{ asset('img/assets/' . $card['image']) }}" alt="{{ $card['title'] }}"
class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500" />
</div>
@endif
@if(isset($card['icon']))
<div class="relative pt-12 pb-8">
<div class="mx-auto w-20 h-20 icon-secondary-linear glow-soft group-hover:glow-medium rounded-2xl flex items-center justify-center transition-colors duration-300">
@svg('heroicon-o-'.$card['icon'], 'w-10 h-10 text-secondary-foreground')
</div>
</div>
@endif
<div class="p-6 spacing-small flex flex-col justify-between flex-grow">
<div class="mb-4">
@if (isset($card['logo']))
<img src="{{ asset($card['logo']) }}" alt="{{ $card['title'] }}"
class="{{ $card['logo_width'] }} h-18 object-contain" />
@endif
@if(isset($card['title']))
<h3 class="text-xl font-medium text-center">{{ $card['title'] }}</h3>
@endif
@if(isset($card['description']))
<p class="text-muted-foreground leading-relaxed mt-2 text-center">
{{ $card['description'] }}
</p>
@endif
</div>
@if(isset($card['button']))
<div class="flex flex-col sm:flex-row gap-4 slide-right delay-300 mx-auto pt-4">
<a href="{{ $card['button'] }}" class="btn-primary-accent">
{{ $card['button_text'] }}
</a>
</div>
@endif
@if(isset($card['link']))
<a href="{{ $card['link'] }}"
class="inline-flex items-center gap-2 text-secondary font-medium hover:gap-3 transition-all duration-300">
Mehr erfahren
<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>
@endif
</div>
</div>
@endforeach
</div>
</div>
</section>

6
resources/views/livewire/web/components/sections/commitment-section.blade.php
View file

@ -1,6 +1,6 @@
<section class="section-padding text-center">
<div class="container-padding">
<div class="text-center mb-16">
<div class="text-center mb-16 slide-up delay-300">
<h2 class="text-section-title text-foreground mb-6">
{!! $content['title'] !!}
</h2>
@ -10,8 +10,8 @@
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
@foreach($content['testimonials'] as $testimonial)
<div class="card-elevated rounded-2xl p-8 text-left space-y-6">
@foreach($content['testimonials'] as $index => $testimonial)
<div class="card-elevated rounded-2xl p-8 text-left space-y-6 slide-up delay-{{ $index * 200 }}">
<div class="flex items-center gap-4">
<img src="{{ asset('img/assets/' . $testimonial['image']) }}" alt="{{ $testimonial['author'] }}" class="w-16 h-16 rounded-full object-cover">
<div>

59
resources/views/livewire/web/components/sections/content-section.blade.php
View file

@ -2,40 +2,54 @@
<div class="container-padding">
<div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
@if($layout === 'right')
@if ($layout === 'right')
{{-- Layout Right: Image zuerst, dann Content --}}
{{-- Image --}}
<div class="relative lg:order-1">
<div class="card-elevated rounded-3xl overflow-hidden">
<img
src="{{ asset('img/assets/' . $content['image']) }}"
alt="{{ $content['image_alt'] }}"
class="w-full h-[500px] object-cover"
/>
<div class="absolute bottom-6 left-6 bg-card/95 backdrop-blur-sm rounded-xl p-4 shadow-lg border border-border/50">{{ $content['image_caption'] }}</div>
<div class="card-elevated rounded-3xl overflow-hidden slide-left delay-400">
<img src="{{ asset('img/assets/' . $content['image']) }}" alt="{{ $content['image_alt'] }}"
class="w-full h-[500px] object-cover" />
<div
class="absolute bottom-6 left-6 bg-card/95 backdrop-blur-sm rounded-xl p-4 shadow-lg border border-border/50 slide-left delay-500">
{{ $content['image_caption'] }}</div>
</div>
</div>
{{-- Content --}}
<div class="spacing-section lg:order-2">
<div class="spacing-content">
<h2 class="text-section-title">{{ $content['title'] }}</h2>
<div class="spacing-content slide-right delay-300">
<h2 class="text-section-title">{!! $content['title'] !!}</h2>
<div class="spacing-small text-large text-muted-foreground leading-relaxed">
@foreach($content['paragraphs'] as $paragraph)
<p>{{ $paragraph }}</p>
@foreach ($content['paragraphs'] as $paragraph)
<p>{!! $paragraph !!}</p>
@endforeach
</div>
@if(isset($content['list']))
<div class="grid grid-cols-1 gap-6 border-t border-border/50 pt-8">
@foreach ($content['list'] as $index => $item)
<div class="flex gap-4 slide-up delay-{{ $index * 200 }} mb-4">
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center">
@svg('heroicon-o-'.$item['icon'], 'w-6 h-6 text-secondary')
</div>
<div>
<p class="font-semibold text-muted-foreground">{{ $item['title'] }}</p>
</div>
</div>
@endforeach
</div>
@endif
</div>
</div>
@else
{{-- Layout Left (Standard): Content zuerst, dann Image --}}
{{-- Content --}}
<div class="spacing-section">
<div class="spacing-content">
<h2 class="text-section-title">{{ $content['title'] }}</h2>
<div class="spacing-content slide-right delay-300">
<h2 class="text-section-title">{!! $content['title'] !!}</h2>
<div class="spacing-small text-large text-muted-foreground leading-relaxed">
@foreach($content['paragraphs'] as $paragraph)
<p>{{ $paragraph }}</p>
@foreach ($content['paragraphs'] as $paragraph)
<p>{!! $paragraph !!}</p>
@endforeach
</div>
</div>
@ -43,13 +57,12 @@
{{-- Image --}}
<div class="relative">
<div class="card-elevated rounded-3xl overflow-hidden">
<img
src="{{ asset('img/assets/' . $content['image']) }}"
alt="{{ $content['image_alt'] }}"
class="w-full h-[500px] object-cover"
/>
<div class="absolute bottom-6 left-6 bg-card/95 backdrop-blur-sm rounded-xl p-4 shadow-lg border border-border/50">{{ $content['image_caption'] }}</div>
<div class="card-elevated rounded-3xl overflow-hidden slide-left delay-400">
<img src="{{ asset('img/assets/' . $content['image']) }}" alt="{{ $content['image_alt'] }}"
class="w-full h-full object-cover" />
<div
class="absolute bottom-6 left-6 bg-card/95 backdrop-blur-sm rounded-xl p-4 shadow-lg border border-border/50 slide-left delay-500">
{{ $content['image_caption'] }}</div>
</div>
</div>
@endif

28
resources/views/livewire/web/components/sections/digital-core.blade.php
View file

@ -1,6 +1,6 @@
<section class="section-padding bg-background">
<div class="container-padding">
<div class="text-center mb-16">
<div class="text-center mb-16 slide-up delay-300">
<h2 class="text-section-title mb-6">
{!! $content['title'] !!}
</h2>
@ -12,29 +12,11 @@
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
@foreach($content['features'] as $index => $feature)
<div class="group {{ $index === 4 ? 'md:col-span-2 lg:col-span-1 lg:col-start-2' : '' }}">
<div class="card-elevated p-8 rounded-3xl h-full hover:scale-105 transition-all duration-300 relative overflow-hidden">
<div class="card-elevated p-8 overflow-hidden group hover:shadow-elevated transition-all duration-300 flex flex-col slide-up delay-{{ $index * 200 }}">
<div class="text-center space-y-6">
<div class="w-16 h-16 mx-auto rounded-xl bg-secondary/10 flex items-center justify-center mb-6">
@if($feature['icon'] === 'cloud')
<svg class="w-8 h-8 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
</svg>
@elseif($feature['icon'] === 'shield')
<svg class="w-8 h-8 text-secondary" 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"/>
</svg>
@elseif($feature['icon'] === 'layers')
<svg class="w-8 h-8 text-secondary" 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"/>
</svg>
@elseif($feature['icon'] === 'database')
<svg class="w-8 h-8 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"/>
</svg>
@else
<svg class="w-8 h-8 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z"/>
</svg>
<div class="mx-auto w-16 h-16 icon-secondary-linear glow-soft group-hover:glow-medium rounded-2xl flex items-center justify-center transition-colors duration-300">
@if($feature['icon'])
@svg('heroicon-o-'.$feature['icon'], 'w-8 h-8 text-secondary-foreground')
@endif
</div>

66
resources/views/livewire/web/components/sections/ecosystem-core.blade.php
View file

@ -1,54 +1,56 @@
{{-- Hero Icons Helper Function --}}
@php
function renderHeroIcon($iconName, $style = 'outline') {
$iconPath = public_path("heroicons/optimized/24/{$style}/{$iconName}.svg");
$fallbackPath = public_path("heroicons/optimized/24/outline/sparkles.svg");
function renderHeroIcon($iconName, $style = 'outline', $color = 'text-secondary')
{
$iconPath = public_path("heroicons/optimized/24/{$style}/{$iconName}.svg");
$fallbackPath = public_path('heroicons/optimized/24/outline/sparkles.svg');
if (file_exists($iconPath)) {
$svg = file_get_contents($iconPath);
// Add classes for styling
return str_replace('<svg', '<svg class="w-10 h-10 text-secondary"', $svg);
} elseif (file_exists($fallbackPath)) {
$svg = file_get_contents($fallbackPath);
return str_replace('<svg', '<svg class="w-10 h-10 text-secondary"', $svg);
}
if (file_exists($iconPath)) {
$svg = file_get_contents($iconPath);
// Add classes for styling
return str_replace('<svg', '<svg class="w-10 h-10 ' . $color . '"', $svg);
} elseif (file_exists($fallbackPath)) {
$svg = file_get_contents($fallbackPath);
return str_replace('<svg', '<svg class="w-10 h-10 ' . $color . '"', $svg);
}
// Ultimate fallback - simple star icon
return '<svg class="w-10 h-10 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
// Ultimate fallback - simple star icon
return '<svg class="w-10 h-10 text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.563.563 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z"/>
</svg>';
}
}
@endphp
<section class="section-padding {{ $bg }}">
<div class="container-padding">
{{-- Section Title --}}
<div class="text-center mb-16">
<div class="text-center mb-16 slide-up delay-300">
<h2 class="text-section-title">{{ $content['title'] }}</h2>
@if(isset($content['subtitle']))
<p class="text-large text-muted-foreground mt-4 max-w-2xl mx-auto">
{{ $content['subtitle'] }}
</p>
@if (isset($content['subtitle']))
<p class="text-large text-muted-foreground mt-4 max-w-2xl mx-auto">
{{ $content['subtitle'] }}
</p>
@endif
</div>
{{-- Pillars Grid --}}
<div class="grid md:grid-cols-3 gap-8 lg:gap-12">
@foreach($content['pillars'] as $index => $pillar)
<div class="card-elevated rounded-2xl p-8 text-center">
<div class="text-center spacing-content group">
<div class="mx-auto w-20 h-20 bg-secondary/10 rounded-2xl flex items-center justify-center group-hover:bg-secondary/20 transition-colors duration-300">
{!! renderHeroIcon($pillar['icon'], $pillar['icon_style'] ?? 'outline') !!}
</div>
<div class="grid md:grid-cols-3 gap-8 lg:gap-12 slide-up delay-400">
@foreach ($content['pillars'] as $index => $pillar)
<div class="card-elevated rounded-2xl p-8 text-center">
<div class="text-center spacing-content group">
<div
class="mx-auto w-20 h-20 icon-secondary-linear glow-soft group-hover:glow-medium rounded-2xl flex items-center justify-center transition-colors duration-300">
{!! renderHeroIcon($pillar['icon'], $pillar['icon_style'] ?? 'outline', 'text-secondary-foreground') !!}
</div>
<div class="spacing-small">
<h3 class="text-xl font-medium">{{ $pillar['title'] }}</h3>
<p class="text-muted-foreground leading-relaxed">
{{ $pillar['description'] }}
</p>
<div class="spacing-small">
<h3 class="text-xl font-medium">{{ $pillar['title'] }}</h3>
<p class="text-muted-foreground leading-relaxed">
{!! $pillar['description'] !!}
</p>
</div>
</div>
</div>
</div>
@endforeach
</div>
</div>

4
resources/views/livewire/web/components/sections/ecosystem-hero.blade.php
View file

@ -1,5 +1,5 @@
<section class="section-padding flex items-center relative overflow-hidden">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 bg-[hsl(var(--hero-container))] rounded-[20px] w-[95%]">
<section class="section-padding flex items-center relative border-b border-border/30">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 bg-hero-container rounded-[20px] w-[95%]">
<div class="grid lg:grid-cols-2 gap-16 items-center">
<div class="space-y-8">
<h1 class="text-hero">

33
resources/views/livewire/web/components/sections/ecosystem-stats.blade.php
View file

@ -1,26 +1,25 @@
<section class="section-padding bg-background">
<div class="container-padding">
<div class="text-center mb-16">
<h2 class="text-section-title mb-6">
{!! $content['title'] !!}
</h2>
<p class="text-large text-muted-foreground max-w-3xl mx-auto">
{{ $content['subtitle'] }}
<div class="text-center mb-16 slide-up delay-300">
<h2 class="text-section-title">{!! $content['title'] !!}</h2>
<p class="text-large text-muted-foreground mt-4 max-w-3xl mx-auto">
{!! $content['subtitle'] !!}
</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
@foreach ($content['stats'] as $stat)
<div class="card-elevated rounded-2xl p-8 text-center">
<h2 class="text-4xl lg:text-5xl font-bold text-secondary mb-4">
{{ $stat['number'] }}
</h2>
<h3 class="text-xl lg:text-2xl font-semibold text-foreground mb-3">
{{ $stat['label'] }}
</h3>
<p class="text-md text-muted-foreground leading-relaxed">
{{ $stat['description'] }}
</p>
@foreach ($content['stats'] as $index => $stat)
<div class="card-elevated p-8 text-center overflow-hidden group hover:shadow-elevated transition-all duration-300 flex flex-col slide-up delay-{{ $index * 200 }}">
<h2 class="text-4xl lg:text-5xl font-bold text-secondary mb-4">
{{ $stat['number'] }}
</h2>
<h3 class="text-xl lg:text-2xl font-semibold text-foreground mb-3">
{{ $stat['label'] }}
</h3>
<p class="text-md text-muted-foreground leading-relaxed">
{{ $stat['description'] }}
</p>
</div>
@endforeach
</div>

4
resources/views/livewire/web/components/sections/hero-tiles.blade.php
View file

@ -1,5 +1,5 @@
<section class="section-padding flex items-center relative">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 card-elevated rounded-[20px] w-[95%]">
<section class="section-padding flex items-center relative border-b border-border/30">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 bg-hero-container rounded-[20px] w-[95%]">
<div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
{{-- Left Content --}}
<div class="space-y-8">

27
resources/views/livewire/web/components/sections/hero.blade.php
View file

@ -1,9 +1,9 @@
<section class="section-padding flex items-center relative">
<section class="section-padding flex items-center relative border-b border-border/30">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 bg-hero-container rounded-[20px] w-[95%]">
<div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
{{-- Left Content --}}
<div class="space-y-8">
<div class="space-y-6">
<div class="space-y-6 slide-right delay-200">
<h1 class="text-hero">
{!! $content['title'] !!}
</h1>
@ -12,7 +12,7 @@
</p>
</div>
<div class="flex flex-col sm:flex-row gap-4">
<div class="flex flex-col sm:flex-row gap-4 slide-right delay-300">
<a href="{{ $content['cta1_link'] }}" class="btn-primary-accent">
{{ $content['cta1_text'] }}
</a>
@ -21,30 +21,31 @@
</a>
</div>
<div class="flex items-center space-x-8 text-sm text-muted-foreground">
<div class="flex flex-wrap items-center gap-6 pt-10 border-t border-border/80 slide-right delay-300">
@foreach ($content['stats'] as $stat)
<span>{{ $stat }}</span>
@if (!$loop->last)
<span>•</span>
@endif
<div class="flex items-center gap-2 text-md text-muted-foreground">
@svg('heroicon-o-check-circle', 'w-6 h-6 text-secondary')
<span>{{ $stat }}</span>
</div>
@endforeach
</div>
</div>
{{-- Right Image --}}
<div class="relative">
<div class="relative rounded-3xl overflow-hidden shadow-elevated">
<img src="{{ asset('img/assets/' . $content['image']) }}"
alt="{{ $content['image_alt'] }}"
<div class="relative rounded-3xl overflow-hidden shadow-elevated slide-left delay-300">
<img src="{{ asset('img/assets/' . $content['image']) }}" alt="{{ $content['image_alt'] }}"
class="w-full h-[600px] object-cover" />
<div class="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
</div>
{{-- Floating info card --}}
<div
class="absolute bottom-6 left-6 bg-card/95 backdrop-blur-sm rounded-xl p-4 shadow-lg border border-border/50">
class="absolute bottom-6 left-6 bg-card/95 backdrop-blur-sm rounded-xl p-4 shadow-lg border border-border/50 slide-left delay-400">
<div class="text-sm text-muted-foreground">{{ $content['card_title'] }}</div>
<div class="text-2xl font-medium">{!! $content['card_text'] !!}
<div class="text-lg font-medium font-secondary">{!! $content['card_text'] !!}
</div>
</div>
</div>

8
resources/views/livewire/web/components/sections/partner-c-t-a.blade.php
View file

@ -1,16 +1,16 @@
<section class="{{ $bg }} text-secondary-foreground section-padding">
<div class="container-narrow text-center">
<div class="spacing-section">
<h2 class="text-section-title text-white">
<h2 class="text-section-title text-white slide-up delay-300">
{!! $content['title'] !!}
</h2>
<p class="text-large text-secondary-foreground max-w-2xl mx-auto leading-relaxed">
<p class="text-large text-secondary-foreground max-w-2xl mx-auto leading-relaxed slide-up delay-300">
{{ $content['subtitle'] }}
</p>
<div class="grid md:grid-cols-3 gap-8 py-8">
<div class="grid md:grid-cols-3 gap-8 py-8 slide-up delay-400">
@foreach($content['stats'] as $stat)
<div class="text-center space-y-3">
<div class="text-4xl font-light text-secondary-foreground">{{ $stat['number'] }}</div>
@ -19,7 +19,7 @@
@endforeach
</div>
<div class="spacing-content">
<div class="spacing-content slide-up delay-500">
<a href="{{ $content['button_link'] }}" class="btn-primary-accent">
{{ $content['button_text'] }}
</a>

58
resources/views/livewire/web/components/sections/partner-hero.blade.php
View file

@ -1,57 +1,37 @@
<section class="section-padding flex items-center relative overflow-hidden">
<section class="section-padding flex items-center relative border-b border-border/30">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 bg-hero-container rounded-[20px] w-[95%]">
<div class="grid lg:grid-cols-2 gap-16 items-center">
<div class="space-y-8">
<h1 class="text-hero">
<div class="slide-right delay-300">
<h1 class="text-hero mb-6">
{!! $content['title'] !!}
</h1>
<p class="text-lg text-muted-foreground max-w-md leading-relaxed">
{{ $content['subtitle'] }}
</p>
<div class="grid grid-cols-2 gap-6">
@foreach ($content['partner_types'] as $partner)
<div class="flex items-center gap-3">
<div class="w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center">
@if ($partner['icon'] === 'trending-up')
<svg class="w-6 h-6 text-secondary" 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" />
</svg>
@elseif($partner['icon'] === 'globe')
<svg class="w-6 h-6 text-secondary" 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" />
</svg>
@elseif($partner['icon'] === 'handshake')
<svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
</svg>
@else
<svg class="w-6 h-6 text-secondary" 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" />
</svg>
@endif
</div>
@if(isset($content['partner_types']))
<div class="grid grid-cols-2 gap-6 mt-8 border-t border-border/50 pt-8">
@foreach ($content['partner_types'] as $index => $partner)
<div class="flex gap-4 slide-up delay-{{ $index * 200 }}">
<div class="flex-shrink-0 w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center">
@svg('heroicon-o-'.$partner['icon'], 'w-6 h-6 text-secondary')
</div>
<div>
<p class="font-semibold text-foreground">{{ $partner['title'] }}</p>
<p class="text-sm text-muted-foreground">{{ $partner['description'] }}</p>
</div>
</div>
@endforeach
</div>
@endif
</div>
<div class="relative">
<div class="relative rounded-3xl overflow-hidden shadow-elevated">
<div class="relative rounded-3xl overflow-hidden shadow-elevated slide-left delay-300">
<img src="{{ asset('img/assets/' . $content['image']) }}"
alt="{{ $content['image_alt'] }}"
class="w-full h-[600px] object-cover" />
@ -60,16 +40,8 @@
{{-- Floating info card --}}
<div
class="absolute bottom-6 left-6 bg-card/95 backdrop-blur-sm rounded-xl p-4 shadow-lg border border-border/50">
<div class="text-center">
<div
class="w-24 h-24 mx-auto rounded-full bg-secondary flex items-center justify-center mb-4">
<svg class="w-12 h-12 text-white" fill="none" stroke="currentColor"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
</svg>
</div>
class="absolute bottom-6 left-6 bg-card/95 backdrop-blur-sm rounded-xl p-4 shadow-lg border border-border/50 slide-left delay-400">
<div class="text-center slide-left delay-400">
<h3 class="text-xl font-semibold text-foreground">{{ $content['hub']['title'] }}</h3>
<p class="text-sm text-muted-foreground">{{ $content['hub']['subtitle'] }}</p>
</div>

66
resources/views/livewire/web/components/sections/partner-process.blade.php
View file

@ -1,6 +1,6 @@
<section class="section-padding bg-accent">
<div class="container-padding">
<div class="text-center mb-16">
<div class="text-center mb-16 slide-up delay-300">
<h2 class="text-section-title text-foreground mb-6">
{!! $content['title'] !!}
</h2>
@ -11,44 +11,19 @@
<div class="grid md:grid-cols-3 gap-8 mb-16">
@foreach ($content['steps'] as $index => $step)
<div class="card-elevated p-0 overflow-hidden group hover:shadow-elevated transition-all duration-300">
<div class="relative overflow-hidden">
<img src="{{ asset('img/assets/' . $step['image']) }}" alt="{{ $step['title'] }}"
class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-300" />
<div
class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<div class="card-elevated p-0 overflow-hidden group hover:shadow-elevated transition-all duration-300 slide-up delay-{{ $index * 200 }}">
@if(isset($step['icon']))
<div class="relative pt-12 pb-8">
<div class="mx-auto w-20 h-20 icon-secondary-linear glow-soft group-hover:glow-medium rounded-2xl flex items-center justify-center transition-colors duration-300">
@svg('heroicon-o-'.$step['icon'], 'w-10 h-10 text-secondary-foreground')
</div>
</div>
{{-- Step Number Badge --}}
<div
class="absolute top-4 left-4 w-12 h-12 rounded-full bg-secondary text-white flex items-center justify-center font-bold text-lg">
{{ $step['step'] }}
</div>
</div>
@endif
<div class="p-8">
<div class="flex items-center gap-3 mb-4">
<div class="w-10 h-10 rounded-lg bg-secondary/10 flex items-center justify-center">
@if ($step['icon'] === 'file-text')
<svg class="w-5 h-5 text-secondary" fill="none" stroke="currentColor"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 12h6m-6 4h6m2 5H7a2 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>
@elseif($step['icon'] === 'search')
<svg class="w-5 h-5 text-secondary" 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>
@else
<svg class="w-5 h-5 text-secondary" 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>
@endif
<span class="text-lg font-bold text-secondary">{{ $index + 1 }}</span>
</div>
<h3 class="text-2xl font-medium text-foreground">
{{ $step['title'] }}
@ -60,9 +35,9 @@
</p>
@if ($index === count($content['steps']) - 1)
<a href="/contact">
<button class="btn-secondary-accent w-full">
Jetzt starten
<a href="{{ $content['cta']['button_link'] }}">
<button class="btn-secondary-accent w-full cursor-pointer">
{{ $content['cta']['button_text'] }}
</button>
</a>
@endif
@ -70,22 +45,5 @@
</div>
@endforeach
</div>
{{-- CTA Section --}}
<div class="text-center">
<div class="card-elevated p-12 rounded-3xl bg-gradient-to-br from-secondary/10 to-secondary/5">
<h3 class="text-3xl font-light text-foreground mb-6">
{!! $content['cta']['title'] !!}
</h3>
<p class="text-large text-muted-foreground mb-8 max-w-2xl mx-auto">
{{ $content['cta']['subtitle'] }}
</p>
<a href="{{ $content['cta']['button_link'] }}">
<button class="btn-primary-accent">
{{ $content['cta']['button_text'] }}
</button>
</a>
</div>
</div>
</div>
</section>

19
resources/views/livewire/web/components/sections/vision-section.blade.php
View file

@ -3,11 +3,11 @@
<div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
{{-- Content --}}
<div class="spacing-section">
<div class="spacing-content">
<div class="spacing-content slide-right delay-300">
<h2 class="text-section-title">{{ $content['title'] }}</h2>
<div class="spacing-small text-large text-muted-foreground leading-relaxed">
@foreach($content['paragraphs'] as $paragraph)
<p>{{ $paragraph }}</p>
@foreach ($content['paragraphs'] as $paragraph)
<p>{!! $paragraph !!}</p>
@endforeach
</div>
</div>
@ -15,14 +15,13 @@
{{-- Image --}}
<div class="relative">
<div class="card-elevated rounded-3xl overflow-hidden">
<img
src="{{ asset('img/assets/' . $content['image']) }}"
alt="{{ $content['image_alt'] }}"
class="w-full h-[500px] object-cover"
/>
<div class="card-elevated rounded-3xl overflow-hidden slide-left delay-400">
<img src="{{ asset('img/assets/' . $content['image']) }}" alt="{{ $content['image_alt'] }}"
class="w-full h-full object-cover" />
<div class="absolute bottom-6 left-6 bg-card/95 backdrop-blur-sm rounded-xl p-4 shadow-lg border border-border/50">{{ $content['image_caption'] }}</div>
<div
class="absolute bottom-6 left-6 bg-card/95 backdrop-blur-sm rounded-xl p-4 shadow-lg border border-border/50">
{{ $content['image_caption'] }}</div>
</div>
</div>
</div>

23
resources/views/livewire/web/components/ui/footer.blade.php
View file

@ -5,7 +5,7 @@
<div class="spacing-section">
<div class="flex items-center justify-center">
<img src="{{ asset(\App\Helpers\ThemeHelper::getLogoPath('negative')) }}"
alt="{{ $domainName ?? 'B2In' }} Logo" class="h-12 w-auto" />
alt="{{ $domainName ?? 'B2In' }} Logo" class="h-14 w-auto" />
</div>
<div class="container-narrow spacing-content">
@ -15,27 +15,25 @@
</h2>
</div>
<hr class="border-t border-dark-muted/30 mt-12 pt-4">
<hr class="border-t border-dark-muted/30 mt-12 pt-4">
</div>
{{-- Links --}}
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-left max-w-4xl mx-auto">
<div class="spacing-small">
<div class="spacing-small text-center">
<a href="#" class="block hover-text-secondary transition-colors">Privacy Policy</a>
</div>
<div class="spacing-small">
<div class="spacing-small text-center">
<a href="#" class="block hover-text-secondary transition-colors">Terms of Service</a>
</div>
<div class="spacing-small">
<div class="spacing-small text-center">
<a href="#" class="block hover-text-secondary transition-colors">Cookie Policy</a>
</div>
<div class="spacing-small">
<div class="spacing-small text-center">
<a href="#" class="block hover-text-secondary transition-colors">Impressum</a>
</div>
@ -52,17 +50,20 @@
<div class="flex space-x-4">
<a href="#" class="hover-text-secondary transition-colors" aria-label="Facebook">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
<path
d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z" />
</svg>
</a>
<a href="#" class="hover-text-secondary transition-colors" aria-label="Instagram">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 6.62 5.367 11.987 11.988 11.987s11.987-5.367 11.987-11.987C24.004 5.367 18.637.001 12.017.001zM8.449 16.988c-1.297 0-2.448-.49-3.323-1.297C4.198 14.895 3.708 13.744 3.708 12.447s.49-2.448 1.418-3.323c.875-.807 2.026-1.297 3.323-1.297s2.448.49 3.323 1.297c.928.875 1.418 2.026 1.418 3.323s-.49 2.448-1.418 3.244c-.875.807-2.026 1.297-3.323 1.297zm7.83-9.281c-.49 0-.928-.175-1.297-.49-.368-.315-.49-.753-.49-1.243s.122-.928.49-1.243c.369-.315.807-.49 1.297-.49s.928.175 1.297.49c.368.315.49.753.49 1.243s-.122.928-.49 1.243c-.369.315-.807.49-1.297.49z"/>
<path
d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 6.62 5.367 11.987 11.988 11.987s11.987-5.367 11.987-11.987C24.004 5.367 18.637.001 12.017.001zM8.449 16.988c-1.297 0-2.448-.49-3.323-1.297C4.198 14.895 3.708 13.744 3.708 12.447s.49-2.448 1.418-3.323c.875-.807 2.026-1.297 3.323-1.297s2.448.49 3.323 1.297c.928.875 1.418 2.026 1.418 3.323s-.49 2.448-1.418 3.244c-.875.807-2.026 1.297-3.323 1.297zm7.83-9.281c-.49 0-.928-.175-1.297-.49-.368-.315-.49-.753-.49-1.243s.122-.928.49-1.243c.369-.315.807-.49 1.297-.49s.928.175 1.297.49c.368.315.49.753.49 1.243s-.122.928-.49 1.243c-.369.315-.807.49-1.297.49z" />
</svg>
</a>
<a href="#" class="hover-text-secondary transition-colors" aria-label="LinkedIn">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
<path
d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
</svg>
</a>
</div>

28
resources/views/livewire/web/components/ui/header.blade.php
View file

@ -3,18 +3,16 @@
<div class="flex items-center justify-between h-16">
<a href="{{ $domainUrl }}" class="flex items-center">
<img src="{{ asset(\App\Helpers\ThemeHelper::getLogoPath('positive')) }}"
alt="{{ $domainName ?? 'B2IN' }} Logo" class="h-8 w-auto" />
alt="{{ $domainName ?? 'B2IN' }} Logo" class="h-10 w-auto" />
</a>
<nav class="hidden md:flex items-center space-x-8">
@foreach($content['navigation'] as $navItem)
@foreach ($content['navigation'] as $navItem)
<a href="{{ $navItem['url'] }}"
class="text-sm font-medium transition-colors relative
@if($this->isActiveRoute($navItem['url']))
text-secondary after:absolute after:bottom-[-4px] after:left-0 after:w-full after:h-0.5 after:bg-secondary after:rounded-full
class="text-sm font-medium transition-colors relative
@if ($this->isActiveRoute($navItem['url'])) text-secondary after:absolute after:bottom-[-4px] after:left-0 after:w-full after:h-0.5 after:bg-secondary after:rounded-full
@else
text-primary hover:text-secondary
@endif">
text-primary hover:text-secondary @endif">
{{ $navItem['label'] }}
</a>
@endforeach
@ -22,9 +20,9 @@
<div class="flex items-center space-x-4">
<a href="{{ config('domains.domain_portal_url') }}"
class=" md:block rounded-md px-3 py-2 text-sm font-medium bg-secondary hover-bg-primary hover-shadow-accent-glow text-white transition-all duration-200">
{{ $content['portal_login'] }}
</a>
class=" md:block rounded-md px-3 py-2 text-sm font-medium bg-secondary hover-bg-primary glow-medium text-white transition-all duration-200">
{{ $content['portal_login'] }}
</a>
<button wire:click="toggleMobileMenu"
class="md:hidden w-5 h-5 text-muted-foreground hover:text-foreground transition-colors">
@if ($this->isMobileMenuOpen)
@ -46,14 +44,12 @@
@if ($this->isMobileMenuOpen)
<div class="md:hidden border-t border-border bg-background/95 backdrop-blur-sm">
<nav class="px-4 py-6 space-y-4">
@foreach($content['navigation'] as $navItem)
@foreach ($content['navigation'] as $navItem)
<a href="{{ $navItem['url'] }}"
class="block text-sm font-medium transition-colors py-2 px-3 rounded-md
@if($this->isActiveRoute($navItem['url']))
text-secondary bg-secondary/10 border-l-2 border-secondary
class="block text-sm font-medium transition-colors py-2 px-3 rounded-md
@if ($this->isActiveRoute($navItem['url'])) text-secondary bg-secondary/10 border-l-2 border-secondary
@else
text-foreground hover:text-secondary hover:bg-muted/50
@endif"
text-foreground hover:text-secondary hover:bg-muted/50 @endif"
wire:click="closeMobileMenu">
{{ $navItem['label'] }}
</a>

36
resources/views/web/b2in.blade.php
View file

@ -4,29 +4,31 @@
@section('content')
<div class="bg-background">
<livewire:web.components.ui.header />
<div class="bg-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>
<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.content-section layout="right" bg="bg-accent"
section="integriertes_modell_b2in" />
<livewire:web.components.sections.c-t-a-section />
</main>
<livewire:web.components.ui.footer />
</div>
<livewire:web.components.ui.footer />
</div>
@endsection
@push('styles')
<style>
[x-cloak] {
display: none !important;
}
</style>
<style>
[x-cloak] {
display: none !important;
}
</style>
@endpush
@push('scripts')
{{-- Alpine.js wird zentral im Layout geladen --}}
{{-- Alpine.js wird zentral im Layout geladen --}}
@endpush

13
resources/views/web/ecosystem.blade.php
View file

@ -6,12 +6,15 @@
<div class="bg-background">
<livewire:web.components.ui.header />
<main>
<livewire:web.components.sections.ecosystem-hero />
<main class="variante-glass-flow">
<livewire:web.components.sections.partner-hero section="ecosystem_hero" />
<livewire:web.components.sections.ecosystem-stats />
<livewire:web.components.sections.end-customer-section />
<livewire:web.components.sections.broker-section />
<livewire:web.components.sections.supplier-section />
<livewire:web.components.sections.content-section layout="right" bg="bg-accent"
section="ecosystem_start" />
<livewire:web.components.sections.content-section layout="left" bg=""
section="ecosystem_hub" />
<livewire:web.components.sections.content-section layout="right" bg="bg-accent"
section="ecosystem_result" />
<livewire:web.components.sections.digital-core />
<livewire:web.components.sections.partner-c-t-a />
</main>

4
resources/views/web/home.blade.php
View file

@ -6,11 +6,13 @@
<div class="bg-background">
<livewire:web.components.ui.header />
<main>
<main class="variante-glass-flow">
<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.content-section layout="left" bg="bg-accent"
section="integriertes_modell_b2in" />
<livewire:web.components.sections.c-t-a-section />
</main>

7
resources/views/web/partner.blade.php
View file

@ -6,9 +6,12 @@
<div class="bg-background">
<livewire:web.components.ui.header />
<main>
<main class="variante-glass-flow">
<livewire:web.components.sections.partner-hero />
<livewire:web.components.sections.partner-benefits />
<livewire:web.components.sections.card-section bg="bg-accent" section="partner_card_section" />
<livewire:web.components.sections.benefits-section section="partner_benefits_retailer" />
<livewire:web.components.sections.benefits-section section="partner_benefits_supplier" layout="right" bg="bg-accent" />
<livewire:web.components.sections.benefits-section section="partner_benefits_broker" />
<livewire:web.components.sections.partner-process />
<livewire:web.components.sections.commitment-section />
<livewire:web.components.sections.partner-c-t-a />