diff --git a/app/Livewire/Web/Components/Sections/BenefitsSection.php b/app/Livewire/Web/Components/Sections/BenefitsSection.php new file mode 100644 index 0000000..f4e2649 --- /dev/null +++ b/app/Livewire/Web/Components/Sections/BenefitsSection.php @@ -0,0 +1,28 @@ +layout = $layout; + $this->bg = $bg; + $this->section = $section; + $theme = config('app.theme', 'b2in'); + $this->content = config("content.themes.{$theme}.{$this->section}", []); + } + + + public function render() + { + return view('livewire.web.components.sections.benefits-section'); + } +} diff --git a/app/Livewire/Web/Components/Sections/CardSection.php b/app/Livewire/Web/Components/Sections/CardSection.php new file mode 100644 index 0000000..6cefb69 --- /dev/null +++ b/app/Livewire/Web/Components/Sections/CardSection.php @@ -0,0 +1,27 @@ +layout = $layout; + $this->bg = $bg; + $this->section = $section; + $theme = config('app.theme', 'b2in'); + $this->content = config("content.themes.{$theme}.{$this->section}", []); + } + + public function render() + { + return view('livewire.web.components.sections.card-section'); + } +} diff --git a/app/Livewire/Web/Components/Sections/PartnerHero.php b/app/Livewire/Web/Components/Sections/PartnerHero.php index 32fb275..4e68440 100644 --- a/app/Livewire/Web/Components/Sections/PartnerHero.php +++ b/app/Livewire/Web/Components/Sections/PartnerHero.php @@ -28,12 +28,14 @@ class PartnerHero extends Component 'icon' => 'award', ], ]; + public $section = 'partner_hero'; public $content = []; - public function mount() + public function mount($section = 'partner_hero') { + $this->section = $section; $theme = config('app.theme', 'b2in'); - $this->content = config("content.themes.{$theme}.partner_hero", []); + $this->content = config("content.themes.{$theme}.{$this->section}", []); } public function render() diff --git a/composer.json b/composer.json index cae37d6..0226437 100644 --- a/composer.json +++ b/composer.json @@ -10,6 +10,7 @@ "license": "MIT", "require": { "php": "^8.2", + "blade-ui-kit/blade-heroicons": "^2.6", "laravel/fortify": "^1.27", "laravel/framework": "^12.0", "laravel/sanctum": "^4.1", diff --git a/composer.lock b/composer.lock index eb6d2d1..aeada30 100644 --- a/composer.lock +++ b/composer.lock @@ -4,7 +4,7 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "1e33735aa52141dba50b9dc390f3c2a0", + "content-hash": "10a392ebee126b2fc1bc1946158acb90", "packages": [ { "name": "bacon/bacon-qr-code", @@ -60,6 +60,156 @@ }, "time": "2024-10-01T13:55:55+00:00" }, + { + "name": "blade-ui-kit/blade-heroicons", + "version": "2.6.0", + "source": { + "type": "git", + "url": "https://github.com/driesvints/blade-heroicons.git", + "reference": "4553b2a1f6c76f0ac7f3bc0de4c0cfa06a097d19" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/driesvints/blade-heroicons/zipball/4553b2a1f6c76f0ac7f3bc0de4c0cfa06a097d19", + "reference": "4553b2a1f6c76f0ac7f3bc0de4c0cfa06a097d19", + "shasum": "" + }, + "require": { + "blade-ui-kit/blade-icons": "^1.6", + "illuminate/support": "^9.0|^10.0|^11.0|^12.0", + "php": "^8.0" + }, + "require-dev": { + "orchestra/testbench": "^7.0|^8.0|^9.0|^10.0", + "phpunit/phpunit": "^9.0|^10.5|^11.0" + }, + "type": "library", + "extra": { + "laravel": { + "providers": [ + "BladeUI\\Heroicons\\BladeHeroiconsServiceProvider" + ] + } + }, + "autoload": { + "psr-4": { + "BladeUI\\Heroicons\\": "src" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Dries Vints", + "homepage": "https://driesvints.com" + } + ], + "description": "A package to easily make use of Heroicons in your Laravel Blade views.", + "homepage": "https://github.com/blade-ui-kit/blade-heroicons", + "keywords": [ + "Heroicons", + "blade", + "laravel" + ], + "support": { + "issues": "https://github.com/driesvints/blade-heroicons/issues", + "source": "https://github.com/driesvints/blade-heroicons/tree/2.6.0" + }, + "funding": [ + { + "url": "https://github.com/sponsors/driesvints", + "type": "github" + }, + { + "url": "https://www.paypal.com/paypalme/driesvints", + "type": "paypal" + } + ], + "time": "2025-02-13T20:53:33+00:00" + }, + { + "name": "blade-ui-kit/blade-icons", + "version": "1.8.0", + "source": { + "type": "git", + "url": "https://github.com/driesvints/blade-icons.git", + "reference": "7b743f27476acb2ed04cb518213d78abe096e814" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/driesvints/blade-icons/zipball/7b743f27476acb2ed04cb518213d78abe096e814", + "reference": "7b743f27476acb2ed04cb518213d78abe096e814", + "shasum": "" + }, + "require": { + "illuminate/contracts": "^8.0|^9.0|^10.0|^11.0|^12.0", + "illuminate/filesystem": "^8.0|^9.0|^10.0|^11.0|^12.0", + "illuminate/support": "^8.0|^9.0|^10.0|^11.0|^12.0", + "illuminate/view": "^8.0|^9.0|^10.0|^11.0|^12.0", + "php": "^7.4|^8.0", + "symfony/console": "^5.3|^6.0|^7.0", + "symfony/finder": "^5.3|^6.0|^7.0" + }, + "require-dev": { + "mockery/mockery": "^1.5.1", + "orchestra/testbench": "^6.0|^7.0|^8.0|^9.0|^10.0", + "phpunit/phpunit": "^9.0|^10.5|^11.0" + }, + "bin": [ + "bin/blade-icons-generate" + ], + "type": "library", + "extra": { + "laravel": { + "providers": [ + "BladeUI\\Icons\\BladeIconsServiceProvider" + ] + } + }, + "autoload": { + "files": [ + "src/helpers.php" + ], + "psr-4": { + "BladeUI\\Icons\\": "src" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Dries Vints", + "homepage": "https://driesvints.com" + } + ], + "description": "A package to easily make use of icons in your Laravel Blade views.", + "homepage": "https://github.com/blade-ui-kit/blade-icons", + "keywords": [ + "blade", + "icons", + "laravel", + "svg" + ], + "support": { + "issues": "https://github.com/blade-ui-kit/blade-icons/issues", + "source": "https://github.com/blade-ui-kit/blade-icons" + }, + "funding": [ + { + "url": "https://github.com/sponsors/driesvints", + "type": "github" + }, + { + "url": "https://www.paypal.com/paypalme/driesvints", + "type": "paypal" + } + ], + "time": "2025-02-13T20:35:06+00:00" + }, { "name": "brick/math", "version": "0.14.0", diff --git a/config/blade-icons.php b/config/blade-icons.php new file mode 100644 index 0000000..5aade2a --- /dev/null +++ b/config/blade-icons.php @@ -0,0 +1,183 @@ + [ + + // 'default' => [ + // + // /* + // |----------------------------------------------------------------- + // | Icons Path + // |----------------------------------------------------------------- + // | + // | Provide the relative path from your app root to your SVG icons + // | directory. Icons are loaded recursively so there's no need to + // | list every sub-directory. + // | + // | Relative to the disk root when the disk option is set. + // | + // */ + // + // 'path' => 'resources/svg', + // + // /* + // |----------------------------------------------------------------- + // | Filesystem Disk + // |----------------------------------------------------------------- + // | + // | Optionally, provide a specific filesystem disk to read + // | icons from. When defining a disk, the "path" option + // | starts relatively from the disk root. + // | + // */ + // + // 'disk' => '', + // + // /* + // |----------------------------------------------------------------- + // | Default Prefix + // |----------------------------------------------------------------- + // | + // | This config option allows you to define a default prefix for + // | your icons. The dash separator will be applied automatically + // | to every icon name. It's required and needs to be unique. + // | + // */ + // + // 'prefix' => 'icon', + // + // /* + // |----------------------------------------------------------------- + // | Fallback Icon + // |----------------------------------------------------------------- + // | + // | This config option allows you to define a fallback + // | icon when an icon in this set cannot be found. + // | + // */ + // + // 'fallback' => '', + // + // /* + // |----------------------------------------------------------------- + // | Default Set Classes + // |----------------------------------------------------------------- + // | + // | This config option allows you to define some classes which + // | will be applied by default to all icons within this set. + // | + // */ + // + // 'class' => '', + // + // /* + // |----------------------------------------------------------------- + // | Default Set Attributes + // |----------------------------------------------------------------- + // | + // | This config option allows you to define some attributes which + // | will be applied by default to all icons within this set. + // | + // */ + // + // 'attributes' => [ + // // 'width' => 50, + // // 'height' => 50, + // ], + // + // ], + + ], + + /* + |-------------------------------------------------------------------------- + | Global Default Classes + |-------------------------------------------------------------------------- + | + | This config option allows you to define some classes which + | will be applied by default to all icons. + | + */ + + 'class' => '', + + /* + |-------------------------------------------------------------------------- + | Global Default Attributes + |-------------------------------------------------------------------------- + | + | This config option allows you to define some attributes which + | will be applied by default to all icons. + | + */ + + 'attributes' => [ + // 'width' => 50, + // 'height' => 50, + ], + + /* + |-------------------------------------------------------------------------- + | Global Fallback Icon + |-------------------------------------------------------------------------- + | + | This config option allows you to define a global fallback + | icon when an icon in any set cannot be found. It can + | reference any icon from any configured set. + | + */ + + 'fallback' => '', + + /* + |-------------------------------------------------------------------------- + | Components + |-------------------------------------------------------------------------- + | + | These config options allow you to define some + | settings related to Blade Components. + | + */ + + 'components' => [ + + /* + |---------------------------------------------------------------------- + | Disable Components + |---------------------------------------------------------------------- + | + | This config option allows you to disable Blade components + | completely. It's useful to avoid performance problems + | when working with large icon libraries. + | + */ + + 'disabled' => false, + + /* + |---------------------------------------------------------------------- + | Default Icon Component Name + |---------------------------------------------------------------------- + | + | This config option allows you to define the name + | for the default Icon class component. + | + */ + + 'default' => 'icon', + + ], + +]; diff --git a/config/content.php b/config/content.php index 80a1714..47d79e7 100644 --- a/config/content.php +++ b/config/content.php @@ -1,5 +1,7 @@ [ 'b2in' => [ @@ -14,111 +16,124 @@ return [ ['label' => 'Contact', 'url' => '/contact'], ] ], - 'brand_worlds' => [ - 'title' => 'Unsere Markenwelten', - 'subtitle' => 'Entdecken Sie die Welten von B2In – drei Bereiche, ein Ökosystem.', - 'worlds' => [ - [ - 'image' => 'b2in/b2a.jpg', - 'title' => 'B2A', - 'description' => 'Business to administration, alles rund um die Immobilie.', - 'link' => '/b2a', - ], - [ - 'image' => 'b2in/stileigentum.jpg', - 'title' => 'Stileigentum', - 'description' => 'Exklusive Immobilien und anspruchsvolles Design.', - 'link' => '/stileigentum', - ], - [ - 'image' => 'b2in/style2own.jpg', - 'title' => 'Style2own', - 'description' => 'Exklusives Interior Design für Ihre Immobilie.', - 'link' => '/style2own', - ], - ], - ], 'hero' => [ - 'title' => 'Connecting Design
and Property', - 'subtitle' => 'B2In (Brigdes 2 International) ist das globale Ökosystem für Immobilieninvestoren, Makler und Designliebhaber.', + 'title' => 'Lokaler Handel trifft auf europäisches Design', + 'subtitle' => 'B2in (Brigdes 2 international) ist die zentrale B2B-Plattform, die kuratierte Möbel-Hersteller, lokale Fachexperten und kaufkräftige Kunden zum gegenseitigen Erfolg verbindet.', 'image' => 'b2in/hero-room.jpg', 'image_alt' => 'Modern international skyline showcasing architectural design', - 'cta1_text' => 'Ecosystem entdecken', - 'cta1_link' => '/ecosystem', - 'cta2_text' => 'Partner werden', - 'cta2_link' => '/partner', + 'cta1_text' => 'Für lokale Händler', + 'cta1_link' => '/services', + 'cta2_text' => 'Für Hersteller & Marken', + 'cta2_link' => '/beratung', 'stats' => [ - '1.7K Nutzer', - '500+ Projekte', - '24/7 Platform' + 'Exklusive Auswahl', + 'Persönlicher Service', + 'Werte die bleiben' ], - 'card_title' => 'B2In Ecosystem', - 'card_text' => 'Global vernetzt' + 'card_title' => '', + 'card_text' => 'Connecting Design and Property' ], - - 'ecosystem_core' => [ 'title' => 'Ein Ökosystem, drei Stärken', 'subtitle' => 'Wir schaffen Synergien, die den Markt revolutionieren.', 'pillars' => [ [ - 'icon' => 'globe-alt', - 'title' => 'Globaler Immobilienhandel', - 'description' => 'Direkter Zugang zu exklusiven Investments und internationalen Märkten mit professioneller Begleitung.', + 'icon' => 'cube-transparent', + 'title' => 'Kuratierter Marktplatz', + 'description' => 'Präsentieren Sie Ihre Möbel auf einer exklusiven Plattform, die gezielt designaffine Endkunden und Immobilienprofis anspricht – regional und überregional.', ], [ - 'icon' => 'building-office', - 'title' => 'Kuratierte Wohnkonzepte', - 'description' => 'Wertsteigerung durch professionelles Staging und durchdachte Design-Konzepte für Ihre Immobilien.', + 'icon' => 'truck', + 'title' => 'Intelligente Logistik & Service', + 'description' => 'Profitieren Sie von unserer Bündel-Logistik für Hersteller oder unserer direkten Anbindung an lokale Montageteams für Händler.', ], [ 'icon' => 'user-group', - 'title' => 'Starkes Partnernetzwerk', - 'description' => 'Ein B2B-Arm für Lieferanten, Makler & den US-Export mit fairen Konditionen und digitalem Support.', + 'title' => ' Ein starkes Verkaufsnetzwerk', + 'description' => 'Werden Sie Teil eines Ökosystems aus Maklern, Händlern und Marken, das kontinuierlich neue, qualifizierte Verkaufschancen für Ihr Sortiment generiert.', ], ] ], 'vision_section' => [ 'title' => 'Gebaut auf Vertrauen', 'paragraphs' => [ - 'Unsere Basis ist Vertrauen, angetrieben von Technologie und Innovation. B2In ist nicht nur eine Holding, sondern ein aktiver Gestalter der Immobilienzukunft.', - 'Wir vereinfachen komplexe Prozesse durch eine zentrale digitale Plattform – das B2In-Portal – und schaffen dabei Transparenz, Qualität und Innovation in jedem Schritt unserer Zusammenarbeit.', - 'Unser Engagement für Exzellenz zeigt sich in der Art, wie wir Markenwerte leben und Partnerschaften aufbauen, die nachhaltigen Erfolg für alle Beteiligten schaffen.' + 'Unsere Mission ist es, eine Brücke zu bauen: Wir geben dem lokalen Fachexperten die digitalen Werkzeuge an die Hand, um seine Stärke auszuspielen.', + 'Gleichzeitig bieten wir visionären Herstellern einen kuratierten, direkten Zugang zu regionalen Märkten.', + 'Wir glauben an die Kraft der Synergie, nicht an den Wettbewerb zwischen Online und Offline.' ], 'image' => 'b2in/marcel-scheibe.jpg', 'image_alt' => 'Professionelles Team in kollaborativem Meeting', 'image_caption' => 'Marcel Scheibe, Gründer & CEO' ], - + 'brand_worlds' => [ + 'title' => 'Unsere Markenwelten:
Qualifizierte Kunden für Ihr Möbel-Sortiment', + 'subtitle' => 'Unsere Endkunden-Plattformen style2own und stileigentum schaffen einen konstanten Strom an Kauf- und Mietabsichten. Diese qualifizierten Leads leiten wir in unser Ökosystem, direkt zu den passenden Möbel-Angeboten – Ihren.', + 'worlds' => [ + [ + 'image' => 'b2in/b2a.jpg', + 'title' => 'B2A', + 'description' => 'Unsere Logistik-Power für den US-Markt. Wir ermöglichen Herstellern den Zugang zum transatlantischen Handel.', + 'link' => '/b2a', + 'logo' => 'img/logos/b2a-logo-positiv.svg', + 'logo_width' => 'w-18', + ], + [ + 'image' => 'b2in/stileigentum.jpg', + 'title' => 'Stileigentum', + 'description' => 'Der Magnet für das Premium-Segment. Diese Marke zieht kaufkräftige Kunden an, die exklusive und hochwertige Möbel suchen – Ihre.', + 'link' => '/stileigentum', + 'logo' => 'img/logos/stileigentum-logo-positiv.svg', + 'logo_width' => 'w-35', + ], + [ + 'image' => 'b2in/style2own.jpg', + 'title' => 'Style2own', + 'description' => 'Der Motor für den breiten Markt. Diese Marke begeistert lifestyle-orientierte Kunden und schafft durch flexible Mietmodelle eine hohe Nachfrage.', + 'link' => '/style2own', + 'logo' => 'img/logos/style2own-logo-positiv.svg', + 'logo_width' => 'w-28', + ], + ], + ], + 'integriertes_modell_b2in' => [ + 'title' => 'Das Beste aus zwei Welten:
in jeder Region', + 'paragraphs' => [ + 'Unser einzigartiges Modell schafft einen Marktplatz, den es so vorher nicht gab. Der Kunde wählt seine Region und erhält eine integrierte Ansicht: Zuerst die Angebote der lokalen Fachexperten, ergänzt durch das exklusive Sortiment unserer europäischen Hersteller.', + 'Das Ergebnis ist maximale Auswahl für den Kunden und maximaler Erfolg für unsere Partner.', + ], + 'image' => 'b2in/integriertes-model.jpg', + 'image_alt' => 'Integriertes Modell', + 'image_caption' => 'Integriertes Modell' + ], 'cta_section' => [ - 'title' => 'Gestalten Sie die Zukunft mit uns', - 'subtitle' => 'Werden Sie Teil der Zukunft des Wohnens und Investierens. Entdecken Sie die Möglichkeiten unseres globalen Ökosystems.', - 'button_text' => 'Kontakt aufnehmen', + 'title' => ' Werden Sie Partner
im führenden Möbel-Netzwerk', + 'subtitle' => 'Starten Sie jetzt und erschließen Sie neue Vertriebskanäle – ob als lokaler Händler oder als visionäre Herstellermarke.', + 'button_text' => 'Jetzt Partner werden', 'button_link' => '/contact' ], 'faq' => [ 'title' => 'Häufig gestellte Fragen', - 'subtitle' => 'Hier finden Sie Antworten auf die häufigsten Fragen zu unserem B2In Ökosystem.', + 'subtitle' => 'Hier finden Sie Antworten auf die häufigsten Fragen zu unserem B2in Ökosystem.', 'questions' => [ [ - 'question' => 'Was ist B2In und welche Services bieten Sie an?', - 'answer' => 'B2In (Bridges 2 International) ist ein globales Ökosystem für Immobilieninvestoren, Makler und Designliebhaber. Wir bieten drei Hauptbereiche: B2A für Business-to-Administration, Stileigentum für exklusive Immobilien und Style2Own für modernes Interior Design.' + 'question' => 'Was ist B2in und welche Services bieten Sie an?', + 'answer' => 'B2in (Bridges 2 International) ist ein globales Ökosystem für Immobilieninvestoren, Makler und Designliebhaber. Wir bieten drei Hauptbereiche: B2A für Business-to-Administration, Stileigentum für exklusive Immobilien und Style2Own für modernes Interior Design.' ], [ - 'question' => 'Wie kann ich Partner bei B2In werden?', + 'question' => 'Wie kann ich Partner bei B2in werden?', 'answer' => 'Partner können Sie über unser Partnerportal werden. Wir bieten verschiedene Partnerschaftsmodelle für Makler, Lieferanten und andere Branchenexperten. Kontaktieren Sie uns für eine persönliche Beratung über die Vorteile einer strategischen Partnerschaft.' ], [ - 'question' => 'Welche Vorteile bietet das B2In Ökosystem?', + 'question' => 'Welche Vorteile bietet das B2in Ökosystem?', 'answer' => 'Unser Ökosystem bietet direkten Zugang zu exklusiven Investments, professionelle Begleitung bei internationalen Märkten, kuratierte Wohnkonzepte für Wertsteigerung und ein starkes Partnernetzwerk mit fairen Konditionen und digitalem Support.' ], [ - 'question' => 'Wie funktioniert der globale Immobilienhandel bei B2In?', + 'question' => 'Wie funktioniert der globale Immobilienhandel bei B2in?', 'answer' => 'Wir bieten direkten Zugang zu exklusiven Immobilieninvestments auf internationalen Märkten mit professioneller Begleitung. Unsere Expertise umfasst Marktanalysen, rechtliche Unterstützung und langfristige Betreuung Ihrer Investments.' ], [ - 'question' => 'Was macht B2In zu einem vertrauenswürdigen Partner?', - 'answer' => 'Unsere Basis ist Vertrauen, angetrieben von Technologie und Innovation. B2In ist nicht nur eine Holding, sondern ein aktiver Gestalter der Immobilienzukunft mit einer zentralen digitalen Plattform für Transparenz und Qualität.' + 'question' => 'Was macht B2in zu einem vertrauenswürdigen Partner?', + 'answer' => 'Unsere Basis ist Vertrauen, angetrieben von Technologie und Innovation. B2in ist nicht nur eine Holding, sondern ein aktiver Gestalter der Immobilienzukunft mit einer zentralen digitalen Plattform für Transparenz und Qualität.' ] ] ], @@ -188,12 +203,12 @@ return [ ] ], 'about_hero' => [ - 'title' => 'Über B2In', - 'quote' => '"Unsere Vision ist es, Unternehmen durch innovative Konnektivitätslösungen zu verbinden und nachhaltiges Wachstum in der digitalen Welt zu ermöglichen. Bei B2In schaffen wir nicht nur Verbindungen – wir bauen Brücken in die Zukunft."', + 'title' => 'Über B2in', + 'quote' => '"Unsere Vision ist es, Unternehmen durch innovative Konnektivitätslösungen zu verbinden und nachhaltiges Wachstum in der digitalen Welt zu ermöglichen. Bei B2in schaffen wir nicht nur Verbindungen – wir bauen Brücken in die Zukunft."', 'founder_name' => 'Marcel Scheibe', - 'founder_title' => 'Gründer & CEO, B2In', + 'founder_title' => 'Gründer & CEO, B2in', 'image' => 'b2in/about-hero.jpg', - 'image_alt' => 'Marcel Scheibe, Gründer und CEO von B2In', + 'image_alt' => 'Marcel Scheibe, Gründer und CEO von B2in', 'year' => '2024', 'year_text' => 'Gründungsjahr' ], @@ -219,7 +234,7 @@ return [ ], [ 'title' => 'Qualifizierte Leads', - 'description' => 'Vorgefilterte, interessierte Kunden durch das B2In-Portal und Premium-Mitgliedschaften', + 'description' => 'Vorgefilterte, interessierte Kunden durch das B2in-Portal und Premium-Mitgliedschaften', 'icon' => 'target', ], [ @@ -230,29 +245,29 @@ return [ ] ], 'commitment_section' => [ - 'title' => 'Was unsere Kunden sagen', - 'subtitle' => 'Echte Meinungen von echten Partnern und Kunden. Ihr Vertrauen ist unser größter Ansporn.', + 'title' => 'Das Vertrauen unserer Partner', + 'subtitle' => 'Echte Meinungen von echten Partnern. Ihr Erfolg ist unser größter Ansporn.', 'testimonials' => [ [ 'image' => 'b2in/testo-1.jpg', 'rating' => 5, - 'quote' => 'Die Zusammenarbeit mit B2In hat unsere Erwartungen übertroffen. Professionell, effizient und immer lösungsorientiert.', + 'quote' => 'Die Zusammenarbeit mit B2in hat unsere Erwartungen übertroffen. Professionell, effizient und immer lösungsorientiert.', 'author' => 'Max Mustermann', - 'author_title' => 'CEO, Beispiel AG' + 'author_title' => 'Möbelhersteller' ], [ 'image' => 'b2in/testo-2.jpg', 'rating' => 5, - 'quote' => 'Dank der B2In-Plattform konnten wir unsere Reichweite signifikant erhöhen und neue Märkte erschließen.', + 'quote' => 'Dank der B2in-Plattform konnten wir unsere Reichweite signifikant erhöhen und neue Märkte erschließen.', 'author' => 'Erika Mustermann', - 'author_title' => 'Marketing Leiterin, Muster GmbH' + 'author_title' => 'lokaler Möbelhändler' ], [ 'image' => 'b2in/testo-3.jpg', - 'rating' => 4, - 'quote' => 'Ein starker Partner für die digitale Transformation. Wir schätzen die Expertise und die partnerschaftliche Zusammenarbeit.', + 'rating' => 5, + 'quote' => 'Das B2in-Portal hat die Art, wie ich Immobilien vermarkte, revolutioniert. Das Staging wertet meine Objekte auf, und die Möbelprovision ist ein extrem attraktiver Zusatzverdienst.', 'author' => 'John Doe', - 'author_title' => 'CTO, Tech Solutions' + 'author_title' => 'Immobilienmakler' ] ] ], @@ -272,8 +287,8 @@ return [ 'image_alt' => 'Luxury interior design' ], 'ecosystem_hero' => [ - 'title' => 'B2In Ecosystem', - 'subtitle' => 'Ein intelligentes Netzwerk, das Endkunden, Makler, Lieferanten und Technologie nahtlos miteinander verbindet. Jeder Teilnehmer profitiert vom gesamten System und schafft gemeinsam außergewöhnliche Möbel- und Immobilienerlebnisse.', + 'title' => 'B2in: Wie unser Ökosystem Wachstum für alle Partner generiert', + 'subtitle' => 'Ein intelligentes Netzwerk, das Endkunden, Händler, Lieferanten, Makler und Technologie nahtlos miteinander verbindet. Jeder Teilnehmer profitiert vom gesamten System und schafft gemeinsam außergewöhnliche Möbel- und Immobilienerlebnisse.', 'features' => [ [ 'title' => 'Endkunden', @@ -298,10 +313,10 @@ return [ ], 'image' => 'b2in/ecosystem-hero.jpg', 'image_alt' => 'Ecosystem Hero Image', - 'card_title' => 'B2In Portal', + 'card_title' => 'B2in Portal', 'card_text' => 'Zentrale Plattform', 'hub' => [ - 'title' => 'B2In Portal', + 'title' => 'B2in Portal', 'subtitle' => 'Zentrale Plattform' ], 'connection_points' => [ @@ -317,26 +332,72 @@ return [ 'stats' => [ [ 'number' => '1,7K+', - 'label' => 'Aktive Nutzer im Ecosystem', + 'label' => 'Partner & Experten im Netzwerk', 'description' => 'Wachsende Community von Endkunden, Maklern und Lieferanten', ], [ 'number' => '510+', - 'label' => 'Erfolgreiche Projekte', + 'label' => 'Realisierte Möbel-Projekte', 'description' => 'Realisierte Immobilienprojekte durch unser Netzwerk', ], [ 'number' => '98%', - 'label' => 'Zufriedenheitsrate', + 'label' => ' Partner-Zufriedenheit', 'description' => 'Kundenzufriedenheit across alle Ecosystem-Teilnehmer', ], [ 'number' => '24/7', - 'label' => 'Platform Verfügbarkeit', + 'label' => 'Partner-Support', 'description' => 'Kontinuierliche Verfügbarkeit der digitalen Infrastruktur', ], ] ], + 'ecosystem_start' => [ + 'title' => 'Alles beginnt mit dem Kundenwunsch:', + 'paragraphs' => [ + 'Unser Ökosystem startet nicht bei Ihnen, sondern beim Endkunden.', + 'Unsere reichweitenstarken Marken style2own und stileigentum schaffen durch Inspiration und exklusive Konzepte eine kontinuierliche, kaufkräftige Nachfrage nach hochwertigen Möbeln.', + ], + 'image' => 'b2in/integriertes-model.jpg', + 'image_alt' => 'Die Marken', + 'image_caption' => 'Die Marken', + 'image_description' => 'Eine stilisierte Grafik, die zeigt, wie von den Logos style2own und stileigentum Pfeile in den nächsten Abschnitt führen.', + ], + 'ecosystem_hub' => [ + 'title' => ' Im Hub trifft das Beste aus zwei Welten aufeinander', + 'paragraphs' => [ + 'Sobald ein Kunde seine Region wählt (z.B. Bielefeld), spielt unsere Plattform ihre Stärke aus. Dank der "Local First"-Logik werden die Angebote unserer lokalen Händler prominent platziert.', + 'Gleichzeitig wird das Sortiment durch die exklusiven Produkte unserer europäischen Hersteller ergänzt. So entsteht eine unschlagbare Auswahl.', + ], + 'image' => 'b2in/integriertes-model.jpg', + 'image_alt' => 'Das B2In-Erlebnis', + 'image_caption' => 'Das B2In-Erlebnis', + 'image_description' => 'Eine klare Infografik, die zeigt: [Lokales Angebot] + [Überregionales Angebot] = Das B2In-Erlebnis..', + ], + 'ecosystem_result' => [ + 'title' => 'Ein Kreislauf, in dem jeder gewinnt', + 'paragraphs' => [ + 'In diesem perfekten Zusammenspiel entstehen klare Vorteile für jeden Teilnehmer:', + ], + 'list' => [ + [ + 'icon' => 'building-storefront', + 'title' => 'Der lokale Händler gewinnt einen Online-Kunden, den er sonst nicht erreicht hätte, und stärkt seine Position vor Ort.' + ], + [ + 'icon' => 'building-office-2', + 'title' => 'Lokale Händler erhalten neue Kunden und erhöhen ihren Umsatz' + ], + [ + 'icon' => 'home-modern', + 'title' => 'Der Makler, der den Kunden ursprünglich vermittelt hat, erhält eine faire Provision und hat seinem Kunden einen unschätzbaren Mehrwert geboten.' + ], + ], + 'image' => 'b2in/integriertes-model.jpg', + 'image_alt' => 'style2own und stileigentum', + 'image_caption' => 'style2own und stileigentum', + 'image_description' => 'Eine stilisierte Grafik, die zeigt, wie von den Logos style2own und stileigentum Pfeile in den nächsten Abschnitt führen.', + ], 'end_customer_section' => [ 'tag' => 'Für Endkunden', 'title' => 'Exklusive Erlebnisse für Sie', @@ -380,8 +441,8 @@ return [ 'author_title' => 'General Manager' ], 'digital_core' => [ - 'title' => 'Das digitale Herzstück', - 'subtitle' => 'Unsere zentrale Plattform ist mehr als nur Technologie. Sie ist die Kommandozentrale für transparente Prozesse, datengestützte Entscheidungen und nahtlose Zusammenarbeit im gesamten Ökosystem.', + 'title' => 'Die Technologie, die diesen Kreislauf ermöglicht', + 'subtitle' => 'Unsere zentrale Plattform ist mehr als nur Technologie. Sie ist das digitale Herzstück für transparente Prozesse, datengestützte Entscheidungen und nahtlose Zusammenarbeit im gesamten Ökosystem.', 'features' => [ [ 'title' => 'Maximale Zuverlässigkeit', @@ -396,7 +457,7 @@ return [ ], [ 'title' => 'Zukunftsfähige Integration', - 'description' => 'Das B2In-Portal ist offen für die Zukunft. Es lässt sich nahtlos in andere Systeme integrieren und ist bereit für zukünftige Erweiterungen und Technologien.', + 'description' => 'Das B2in-Portal ist offen für die Zukunft. Es lässt sich nahtlos in andere Systeme integrieren und ist bereit für zukünftige Erweiterungen und Technologien.', 'icon' => 'squares-2x2', ], [ @@ -413,7 +474,7 @@ return [ [ 'title' => 'Exzellente User Experience', 'description' => 'Unsere Plattform ist für maximale Geschwindigkeit optimiert und bietet auf jedem Gerät – vom Desktop bis zum Smartphone – eine intuitive und flüssige Bedienung.', - 'icon' => 'zap', + 'icon' => 'users', 'icon_style' => 'solid', ], ] @@ -425,7 +486,7 @@ return [ 'cta_button' => 'Weitere Artikel entdecken' ], 'magazin_list' => [ - 'title' => 'B2In Magazin', + 'title' => 'B2in Magazin', 'subtitle' => 'Entdecken Sie die neuesten Trends, Insights und Geschichten aus der Welt der Business-Konnektivität und Innovation.', 'read_more' => 'Weiterlesen', 'load_more' => 'Weitere Artikel laden' @@ -446,7 +507,7 @@ return [ 'description' => 'Heute sind wir stolz darauf, hunderte Unternehmen dabei zu unterstützen, ihre digitalen Ziele zu erreichen und neue Märkte zu erschließen.', ], ], - 'summary' => 'Was als Vision begann, traditionelle Geschäftsprozesse zu revolutionieren, ist heute eine bewährte Plattform für digitale Innovation. B2In schließt die Lücke zwischen traditionellen Unternehmen und modernen, digitalen Lösungen durch maßgeschneiderte Konnektivitätsservices, die Effizienz steigern und nachhaltiges Wachstum fördern.' + 'summary' => 'Was als Vision begann, traditionelle Geschäftsprozesse zu revolutionieren, ist heute eine bewährte Plattform für digitale Innovation. B2in schließt die Lücke zwischen traditionellen Unternehmen und modernen, digitalen Lösungen durch maßgeschneiderte Konnektivitätsservices, die Effizienz steigern und nachhaltiges Wachstum fördern.' ], 'our_values' => [ 'title' => 'Unsere Werte', @@ -491,7 +552,7 @@ return [ ], 'partner_benefits' => [ 'title' => 'Warum Partner werden?', - 'subtitle' => 'Entdecken Sie die Vorteile einer Partnerschaft mit B2In und wie Sie von unserem innovativen Ecosystem profitieren können.', + 'subtitle' => 'Entdecken Sie die Vorteile einer Partnerschaft mit B2in und wie Sie von unserem innovativen Ecosystem profitieren können.', 'broker' => [ 'tag' => 'Für Makler', 'title' => 'Revolutionäres Provisionsmodell', @@ -546,8 +607,8 @@ return [ ] ], 'partner_cta' => [ - 'title' => 'Wachsen Sie
mit uns', - 'subtitle' => 'Werden Sie Teil des B2In-Partnernetzwerks und erschließen Sie neue Geschäftsmöglichkeiten durch innovative Konnektivitätslösungen.', + 'title' => 'Wachsen Sie mit uns', + 'subtitle' => 'Werden Sie Teil des B2in-Partnernetzwerks und erschließen Sie neue Geschäftsmöglichkeiten durch innovative Konnektivitätslösungen.', 'stats' => [ [ 'number' => '500+', @@ -562,33 +623,33 @@ return [ 'label' => 'Partner-Support', ], ], - 'button_text' => 'Werden Sie B2In Partner', + 'button_text' => 'Werden Sie B2in Partner', 'button_link' => '/contact', - 'small_text' => 'Entdecken Sie die Vorteile einer strategischen Partnerschaft mit B2In' + 'small_text' => 'Entdecken Sie die Vorteile einer strategischen Partnerschaft mit B2in' ], 'partner_hero' => [ - 'title' => 'Wachsen Sie mit uns.
Werden Sie B2In Partner.', - 'subtitle' => 'Werden Sie Teil des B2In Ecosystems und profitieren Sie von innovativen Geschäftsmodellen, die nachhaltiges Wachstum und langfristigen Erfolg ermöglichen. Gemeinsam gestalten wir die Zukunft der Immobilienbranche.', + 'title' => 'Das Ökosystem für Ihren Erfolg.', + 'subtitle' => 'Ob lokaler Möbel-Händler, europäische Marke oder Immobilienprofi – B2in ist die Plattform, die Ihr Geschäft mit designaffinen Kunden verbindet und neue Ertragsquellen erschließt.', 'partner_types' => [ [ - 'title' => 'Makler', - 'description' => 'Lifetime-Vergütung', - 'icon' => 'trending-up', + 'title' => 'Hersteller & Marken', + 'description' => 'Kuratierter Marktzugang, intelligente Logistik', + 'icon' => 'building-office-2', ], [ - 'title' => 'Lieferanten', - 'description' => 'Globale Märkte', - 'icon' => 'globe', + 'title' => 'Lokale Händler', + 'description' => 'Digitale Reichweite, exklusives Sortiment', + 'icon' => 'building-storefront', ], [ - 'title' => 'Partnership', - 'description' => 'Faire Konditionen', - 'icon' => 'handshake', + 'title' => 'Makler & Bauträger', + 'description' => 'Mehrwert für Kunden, Zusatzertrag für Sie', + 'icon' => 'home-modern', ], [ - 'title' => 'Erfolg', - 'description' => 'Nachhaltiges Wachstum', - 'icon' => 'award', + 'title' => 'Unser Netzwerk', + 'description' => 'Gemeinsam wachsen, den Markt gestalten', + 'icon' => 'sparkles', ], ], 'image' => 'b2in/partner-hero.jpg', @@ -606,35 +667,169 @@ return [ ['name' => 'Qualität', 'subtext' => 'Premium Standards'] ] ], + 'partner_card_section' => [ + 'title' => 'Welcher Partner-Typ sind Sie?', + 'subtitle' => 'Entdecken Sie die Vorteile einer Partnerschaft mit B2in und wie Sie von unserem innovativen Ecosystem profitieren können.', + 'cards' => [ + [ + 'title' => 'Für lokale Händler & Fachexperten', + 'description' => 'Stärken Sie Ihr Geschäft vor Ort. Erhalten Sie Zugang zu Online-Kunden und einem exklusiven, überregionalen Sortiment.', + 'icon' => 'building-storefront', + 'button' => '#partner-benefits-retailer', + 'button_text' => 'Ihre Vorteile als Händler', + ], + [ + 'title' => 'Für Hersteller & europäische Marken', + 'description' => 'Erschließen Sie neue, kuratierte Vertriebskanäle in regionalen Märkten und profitieren Sie von unserer intelligenten Logistik.', + 'icon' => 'building-office-2', + 'button' => '#partner-benefits-supplier', + 'button_text' => 'Ihre Vorteile als Hersteller', + ], + [ + 'title' => 'Für Immobilienmakler & Bauträger', + 'description' => 'Bieten Sie Ihren Kunden einen einzigartigen Mehrwert, beschleunigen Sie die Vermarktung Ihrer Objekte und sichern Sie sich attraktive Zusatzprovisionen.', + 'icon' => 'home-modern', + 'button' => '#partner-benefits-broker', + 'button_text' => 'Ihre Vorteile als Makler', + ], + ] + ], + 'partner_benefits_retailer' => [ + 'id' => 'partner-benefits-retailer', + 'tag' => 'Ihre Vorteile als lokaler Händler', + 'tag_icon' => 'building-storefront', + 'tag_title' => 'Werden Sie zum digitalen Champion in Ihrer Region.', + 'features' => [ + [ + 'title' => 'Digitale Reichweite', + 'description' => 'Wir bringen Ihnen die Online-Kunden, die Sie alleine nicht erreichen. Profitieren Sie von unseren reichweitenstarken Endkunden-Marken.', + 'icon' => 'signal', + ], + [ + 'title' => 'Sortiments-Erweiterung', + 'description' => 'Ergänzen Sie Ihr Angebot mit exklusiven Herstellermarken aus unserem Portfolio – ganz ohne eigenes Lagerrisiko.', + 'icon' => 'squares-plus', + ], + [ + 'title' => 'Stärkung gegen Online-Riesen', + 'description' => 'Mit "Local First" stärken wir gezielt Ihre Position im Markt. Der Kunde sieht Ihr Angebot immer zuerst.', + 'icon' => 'shield-check', + ], + [ + 'title' => 'Faire Konditionen', + 'description' => 'Unser Provisionsmodell ist transparent und darauf ausgelegt, dass wir nur dann verdienen, wenn Sie es auch tun.', + 'icon' => 'scale', + ], + ], + 'highlight' => [ + 'value' => '+35%', + 'text' => 'Digitale Reichweite im ersten Jahr (Durchschnitt unserer Partner)' + ], + 'image' => 'b2in/partner-benefits-retailer.jpg', + 'image_alt' => 'Partner Benefits Retailer', + ], + 'partner_benefits_supplier' => [ + 'id' => 'partner-benefits-supplier', + 'tag' => 'Ihre Vorteile als Hersteller & Marke', + 'tag_icon' => 'building-office-2', + 'tag_title' => 'Erschließen Sie neue Märkte – intelligent und kuratiert.', + 'features' => [ + [ + 'title' => 'Kuratierter Vertriebskanal', + 'description' => 'Statt sich im Rauschen großer Marktplätze zu verlieren, wird Ihre Marke gezielt designaffinen Kunden in kaufkräftigen Regionen präsentiert.', + 'icon' => 'eye', + ], + [ + 'title' => 'Effiziente Logistik', + 'description' => 'Unsere Bündel-Logistik senkt Ihre Vertriebskosten. Wir managen den Sammeltransport und die komplette Abwicklung.', + 'icon' => 'truck', + ], + [ + 'title' => 'Direkter Marktzugang', + 'description' => 'Überspringen Sie den klassischen Großhandel und bauen Sie eine direkte Beziehung zu regionalen Märkten und Endkunden auf.', + 'icon' => 'map-pin', + ], + [ + 'title' => 'Skalierbares Wachstum', + 'description' => 'Starten Sie mit uns in einer Region und wachsen Sie schrittweise in weitere europäische Hubs hinein.', + 'icon' => 'chart-bar-square', + ], + ], + 'highlight' => [ + 'value' => '> 20', + 'text' => 'Kuratierte regionale Hubs als neue Vertriebskanäle in Europa' + ], + 'image' => 'b2in/partner-benefits-supplier.jpg', + 'image_alt' => 'Partner Benefits Supplier', + ], + 'partner_benefits_broker' => [ + 'id' => 'partner-benefits-broker', + 'tag' => 'Ihre Vorteile als Makler & Immobilienprofi', + 'tag_icon' => 'home-modern', + 'tag_title' => 'Mehrwert für Ihre Kunden – Mehr Ertrag für Sie.', + 'features' => [ + + [ + 'title' => 'Schnellere Vermarktung durch Home Staging', + 'description' => 'Nutzen Sie unsere kuratierten Möbel-Pakete (stileigentum&style2own), um Ihre Immobilien professionell zu inszenieren. Beschleunigen Sie den Verkaufsprozess und erzielen Sie höhere Preise.', + 'icon' => 'rocket-launch', + ], + [ + 'title' => 'Einzigartiger Service nach dem Abschluss', + 'description' => 'Bieten Sie Ihren Käufern oder Mietern nach Vertragsunterzeichnung über unsere exklusive Login-Karte direkten Zugang zu einem kompletten Einrichtungsservice.', + 'icon' => 'gift', + ], + [ + 'title' => 'Attraktives Provisionsmodell', + 'description' => 'Profitieren Sie doppelt: Neben Ihrer klassischen Courtage erhalten Sie eine faire, lebenslange Provision auf alle Möbelumsätze, die Ihre Kunden über die Plattform generieren.', + 'icon' => 'currency-euro', + ], + [ + 'title' => 'Einfaches Handling', + 'description' => 'Unser digitales Makler-Portal macht es Ihnen leicht: Kunden einladen, Aktivitäten verfolgen und Provisionen transparent einsehen.', + 'icon' => 'finger-print', + ] + ], + 'highlight' => [ + 'value' => '-25%', + 'text' => 'Kürzere Vermarktungszeit für mit B2in inszenierte Objekte' + ], + 'image' => 'b2in/partner-benefits-broker.jpg', + 'image_alt' => 'Partner Benefits Broker', + ], 'partner_process' => [ 'title' => 'So werden Sie Partner', - 'subtitle' => 'In nur drei einfachen Schritten werden Sie Teil des B2In Ecosystems und können von allen Vorteilen unserer Partnerschaft profitieren.', + 'subtitle' => 'In nur drei einfachen Schritten werden Sie Teil des B2in Ecosystems und können von allen Vorteilen unserer Partnerschaft profitieren.', 'steps' => [ [ 'step' => '1', 'title' => 'Bewerben', - 'description' => 'Senden Sie uns Ihre Bewerbungsunterlagen und stellen Sie sich sowie Ihr Unternehmen vor. Wir prüfen Ihre Qualifikationen.', - 'icon' => 'file-text', + 'description' => 'Erzählen Sie uns Ihre Geschichte. Füllen Sie unser kurzes Kontaktformular aus und zeigen Sie uns, was Ihre Produkte oder Ihr Geschäft auszeichnet.', + 'icon' => 'envelope', 'image' => 'b2in/room-1.jpg' ], [ 'step' => '2', 'title' => 'Prüfung', - 'description' => 'Unser Expertenteam überprüft Ihre Bewerbung sorgfältig. Bei positivem Ergebnis laden wir Sie zu einem persönlichen Gespräch ein.', - 'icon' => 'search', + 'description' => 'Wir prüfen jede Anfrage persönlich. Unser Ziel ist es, ein hochwertiges und komplementäres Netzwerk aufzubauen, von dem alle profitieren.', + 'icon' => 'check-circle', 'image' => 'b2in/room-2.jpg' ], [ 'step' => '3', 'title' => 'Onboarding', - 'description' => 'Nach erfolgreicher Aufnahme erhalten Sie Zugang zu unserer Plattform und umfassende Schulungen für einen erfolgreichen Start.', - 'icon' => 'rocket', + 'description' => 'Willkommen an Bord! Wir schulen Sie persönlich im Umgang mit unserem Partner-Portal und stellen sicher, dass Sie vom ersten Tag an erfolgreich sind.', + 'icon' => 'rocket-launch', 'image' => 'b2in/room-3.jpg' ] ], + 'cta' => [ + 'button_text' => ' Zum Partner-Portal', + 'button_link' => '/contact' + ], 'cta' => [ 'title' => 'Bereit für den nächsten Schritt?', - 'subtitle' => 'Werden Sie noch heute Teil des B2In Ecosystems und profitieren Sie von innovativen Geschäftsmodellen und nachhaltigen Erfolgsstrategien.', + 'subtitle' => 'Werden Sie noch heute Teil des B2in Ecosystems und profitieren Sie von innovativen Geschäftsmodellen und nachhaltigen Erfolgsstrategien.', 'button_text' => 'Jetzt Partner werden', 'button_link' => '/contact' ] @@ -1052,7 +1247,7 @@ return [ 'title' => 'Follow us for
Industry Insights', 'subtitle' => 'Stay updated with European design trends and B2B news.', 'platforms' => [ - ['name' => 'LinkedIn', 'handle' => 'B2In Company Page', 'url' => 'https://linkedin.com/company/b2in'], + ['name' => 'LinkedIn', 'handle' => 'B2in Company Page', 'url' => 'https://linkedin.com/company/b2in'], ] ] ], @@ -1091,7 +1286,7 @@ return [ 'image_alt' => 'Moderne Architektur mit stilvollem Design', ] ], - 'card_title' => 'B2In Ecosystem', + 'card_title' => 'B2in Ecosystem', 'card_text' => 'Global vernetzt' ], 'vision_section' => [ @@ -1375,12 +1570,12 @@ return [ 'button_link' => '/contact' ], 'about_hero' => [ - 'title' => 'Über B2In', - 'quote' => '"Unsere Vision ist es, Unternehmen durch innovative Konnektivitätslösungen zu verbinden und nachhaltiges Wachstum in der digitalen Welt zu ermöglichen. Bei B2In schaffen wir nicht nur Verbindungen – wir bauen Brücken in die Zukunft."', + 'title' => 'Über B2in', + 'quote' => '"Unsere Vision ist es, Unternehmen durch innovative Konnektivitätslösungen zu verbinden und nachhaltiges Wachstum in der digitalen Welt zu ermöglichen. Bei B2in schaffen wir nicht nur Verbindungen – wir bauen Brücken in die Zukunft."', 'founder_name' => 'Marcel Scheibe', - 'founder_title' => 'Gründer & CEO, B2In', + 'founder_title' => 'Gründer & CEO, B2in', 'image' => 'b2in/marcel-scheibe.jpg', - 'image_alt' => 'Marcel Scheibe, Gründer und CEO von B2In', + 'image_alt' => 'Marcel Scheibe, Gründer und CEO von B2in', 'year' => '2024', 'year_text' => 'Gründungsjahr' ], @@ -2052,7 +2247,7 @@ return [ ], [ 'title' => 'Personalisierung ist der Schlüssel', - 'content' => 'One-size-fits-all war gestern. Intelligente Plattformen wie das B2In-Portal ermöglichen es, Staging-Konzepte gezielt auf die demografische Zielgruppe des Käufers zuzuschneiden. Ob minimalistisch für den jungen Urbanisten oder elegant für die anspruchsvolle Familie – personalisiertes Staging trifft den Nerv und maximiert die Identifikation mit der Immobilie.', + 'content' => 'One-size-fits-all war gestern. Intelligente Plattformen wie das B2in-Portal ermöglichen es, Staging-Konzepte gezielt auf die demografische Zielgruppe des Käufers zuzuschneiden. Ob minimalistisch für den jungen Urbanisten oder elegant für die anspruchsvolle Familie – personalisiertes Staging trifft den Nerv und maximiert die Identifikation mit der Immobilie.', ], ], ], @@ -2067,7 +2262,7 @@ return [ 'readTime' => '8 min read', 'author' => [ 'name' => 'David Chen', - 'bio' => 'Head of Global Market Analytics bei B2In. David analysiert internationale Marktdaten, um die Investment-Chancen von morgen zu identifizieren.', + 'bio' => 'Head of Global Market Analytics bei B2in. David analysiert internationale Marktdaten, um die Investment-Chancen von morgen zu identifizieren.', 'avatar' => 'author-chen.jpg', ], 'content' => [ @@ -2098,7 +2293,7 @@ return [ 'readTime' => '5 min read', 'author' => [ 'name' => 'Frank Miller', - 'bio' => 'CEO der Bridges2America Corp. (B2A), dem spezialisierten US-Möbel-Exportarm von B2In. Er ist ein Experte für transatlantische Handelsbeziehungen.', + 'bio' => 'CEO der Bridges2America Corp. (B2A), dem spezialisierten US-Möbel-Exportarm von B2in. Er ist ein Experte für transatlantische Handelsbeziehungen.', 'avatar' => 'author-miller.jpg', ], 'content' => [ diff --git a/public/img/assets/b2in/b2a.jpg b/public/img/assets/b2in/b2a.jpg index 5a0338b..9967131 100644 Binary files a/public/img/assets/b2in/b2a.jpg and b/public/img/assets/b2in/b2a.jpg differ diff --git a/public/img/assets/b2in/hero-room Kopie 2.jpg b/public/img/assets/b2in/hero-room Kopie 2.jpg new file mode 100644 index 0000000..8966482 Binary files /dev/null and b/public/img/assets/b2in/hero-room Kopie 2.jpg differ diff --git a/public/img/assets/b2in/hero-room.jpg b/public/img/assets/b2in/hero-room.jpg index 8966482..ad96c0f 100644 Binary files a/public/img/assets/b2in/hero-room.jpg and b/public/img/assets/b2in/hero-room.jpg differ diff --git a/public/img/assets/b2in/integriertes-model.jpg b/public/img/assets/b2in/integriertes-model.jpg new file mode 100644 index 0000000..86fb140 Binary files /dev/null and b/public/img/assets/b2in/integriertes-model.jpg differ diff --git a/public/img/assets/b2in/partner-benefits-broker.jpg b/public/img/assets/b2in/partner-benefits-broker.jpg new file mode 100644 index 0000000..27217c5 Binary files /dev/null and b/public/img/assets/b2in/partner-benefits-broker.jpg differ diff --git a/public/img/assets/b2in/partner-benefits-retailer.jpg b/public/img/assets/b2in/partner-benefits-retailer.jpg new file mode 100644 index 0000000..669d6b8 Binary files /dev/null and b/public/img/assets/b2in/partner-benefits-retailer.jpg differ diff --git a/public/img/assets/b2in/partner-benefits-supplier.jpg b/public/img/assets/b2in/partner-benefits-supplier.jpg new file mode 100644 index 0000000..686c167 Binary files /dev/null and b/public/img/assets/b2in/partner-benefits-supplier.jpg differ diff --git a/public/img/assets/b2in/partner-hero Kopie 2.jpg b/public/img/assets/b2in/partner-hero Kopie 2.jpg new file mode 100644 index 0000000..41e0e4e Binary files /dev/null and b/public/img/assets/b2in/partner-hero Kopie 2.jpg differ diff --git a/public/img/assets/b2in/partner-hero Kopie.jpg b/public/img/assets/b2in/partner-hero Kopie.jpg new file mode 100644 index 0000000..1f312d6 Binary files /dev/null and b/public/img/assets/b2in/partner-hero Kopie.jpg differ diff --git a/public/img/assets/b2in/partner-hero.jpg b/public/img/assets/b2in/partner-hero.jpg index 1f312d6..41e0e4e 100644 Binary files a/public/img/assets/b2in/partner-hero.jpg and b/public/img/assets/b2in/partner-hero.jpg differ diff --git a/public/img/assets/b2in/stileigentum.jpg b/public/img/assets/b2in/stileigentum.jpg index 7173341..5dc4d34 100644 Binary files a/public/img/assets/b2in/stileigentum.jpg and b/public/img/assets/b2in/stileigentum.jpg differ diff --git a/public/img/assets/b2in/style2own.jpg b/public/img/assets/b2in/style2own.jpg index 9711d0b..4a541dc 100644 Binary files a/public/img/assets/b2in/style2own.jpg and b/public/img/assets/b2in/style2own.jpg differ diff --git a/public/img/logos/b2in-logo-negative.svg b/public/img/logos/b2in-logo-negative.svg index 7ae1c7b..6ef5d92 100644 --- a/public/img/logos/b2in-logo-negative.svg +++ b/public/img/logos/b2in-logo-negative.svg @@ -1,21 +1,25 @@ - + + - - - - - + + + + + + + + \ No newline at end of file diff --git a/public/img/logos/b2in-logo-positive.svg b/public/img/logos/b2in-logo-positive.svg index 58aae48..fc43ca1 100644 --- a/public/img/logos/b2in-logo-positive.svg +++ b/public/img/logos/b2in-logo-positive.svg @@ -1,21 +1,25 @@ - + + - - - - - + + + + + + + + \ No newline at end of file diff --git a/resources/css/web/exampels.css b/resources/css/web/exampels.css new file mode 100644 index 0000000..192290b --- /dev/null +++ b/resources/css/web/exampels.css @@ -0,0 +1,1215 @@ +@import 'tailwindcss'; + +@source '../views'; +@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php'; + +@custom-variant dark (&:where(.dark, .dark *)); + +/* inno-projekt Design System - The Art of Balance +Typography: Commissioner als einzige Hausschrift für Headlines und Body +*/ + +@theme { + /* Font Family */ + --font-sans: 'Commissioner', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; + --font-heading: 'Commissioner', ui-sans-serif, system-ui, sans-serif; + --font-body: 'Commissioner', ui-sans-serif, system-ui, sans-serif; + + /* Brand Colors - Premium Textures */ + --color-background: #F8F9FA; /* Soft paper-like background */ + --color-foreground: #474844; /* 220 7% 28% */ + + --color-card: rgba(255, 255, 255); /* Semi-transparent for glassmorphism */ + --color-card-solid: #ffffff; /* Solid white when needed */ + --color-card-foreground: #474844; + + --color-popover: #ffffff; + --color-popover-foreground: #474844; + + /* Primary Brand Blue #0088cc - Modern Premium Palette */ + --color-primary: #0088cc; /* Modern primary */ + --color-primary-foreground: #ffffff; + --color-primary-light: #009bdd; /* Gradient start */ + --color-primary-dark: #0071a8; /* Gradient end */ + --color-primary-darker: #005580; /* Deeper variant */ + --color-primary-glow: #33a3dd; /* Hover/glow state */ + + /* Premium Gradient - From #009bdd to #0071a8 */ + --gradient-premium: linear-gradient(135deg, #009bdd 0%, #0071a8 100%); + --gradient-premium-hover: linear-gradient(135deg, #33b4e6 0%, #0088cc 100%); + --gradient-subtle: linear-gradient(135deg, rgba(0, 155, 221, 0.05) 0%, rgba(0, 113, 168, 0.02) 100%); + + /* Secondary Anthracite #474844 */ + --color-secondary: #f1f1f1; /* Light gray as secondary */ + --color-secondary-foreground: #474844; + + --color-muted: #f8f8f8; /* 220 7% 97% */ + --color-muted-foreground: #606060; /* 220 7% 50% */ + + --color-accent: #e6f4fc; /* 206 100% 96% */ + --color-accent-foreground: #006eb7; + + --color-destructive: #dc3545; /* 0 84.2% 60.2% */ + --color-destructive-foreground: #ffffff; + + --color-border: #e0e0e0; /* 220 7% 90% */ + --color-input: #f1f1f1; /* 220 7% 95% */ + --color-ring: #006eb7; + + /* Section Background Colors for Alternating Pattern */ + --color-section-bg-white: #ffffff; + --color-section-bg-gray: #F8F9FA; + + /* Radius */ + --radius: 0.5rem; +} + +@layer theme { + .dark { + --color-background: #141414; /* 220 7% 8% */ + --color-foreground: #fafafa; + --color-card: #1f1f1f; + --color-card-foreground: #fafafa; + --color-popover: #1f1f1f; + --color-popover-foreground: #fafafa; + --color-primary: #2196f3; + --color-primary-foreground: #141414; + --color-secondary: #262626; + --color-secondary-foreground: #fafafa; + --color-muted: #262626; + --color-muted-foreground: #a6a6a6; + --color-accent: #262626; + --color-accent-foreground: #fafafa; + --color-destructive: #b71c1c; + --color-destructive-foreground: #fafafa; + --color-border: #333333; + --color-input: #333333; + --color-ring: #2196f3; + } +} + +@layer base { + html { + scroll-behavior: smooth; + } + + body { + @apply bg-background text-foreground antialiased; + font-family: var(--font-body); + font-feature-settings: "kern" 1, "liga" 1; + /* Subtle paper texture pattern */ + background-image: + radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.015) 1px, transparent 0); + background-size: 40px 40px; + background-attachment: fixed; + } + + /* Typography System - Premium & Elegant */ + h1, h2, h3, h4, h5, h6 { + font-family: var(--font-heading); + @apply tracking-tight; + } + + h1 { + @apply text-5xl lg:text-6xl font-semibold leading-none; + } + + h2 { + @apply text-4xl lg:text-5xl font-medium leading-tight; + letter-spacing: -0.02em; + } + + h3 { + @apply text-3xl lg:text-4xl font-medium leading-tight; + } + + h4 { + @apply text-2xl lg:text-3xl font-normal leading-snug; + } + + h5 { + @apply text-xl lg:text-2xl font-normal leading-snug; + } + + p { + @apply leading-relaxed; + } + + /* Premium heading variants */ + .heading-elegant { + font-weight: 500; + letter-spacing: -0.02em; + } + + .heading-light { + font-weight: 400; + letter-spacing: -0.01em; + } +} + +@layer utilities { + /* Section Background Colors */ + .section-bg-white { + background-color: var(--color-section-bg-white); + } + + .section-bg-gray { + background: linear-gradient(135deg, #EBEEF0 0%, #F8F9FA 100%); + } + + /* Premium Section Spacing - Generous Whitespace */ + .section-spacing { + @apply py-20 lg:py-28; + } + + .section-spacing-large { + @apply py-24 lg:py-32; + } + + .section-spacing-compact { + @apply py-16 lg:py-20; + } + + /* Hero Background Gradient - Subtle diagonal from cool gray to white */ + .hero-gradient { + background: linear-gradient(135deg, #e2e8ee 0%, #ffffff 100%); + } + + /* Premium Service Card - Prominenter Style für Kernleistungen */ + .service-card-premium { + position: relative; + background: rgba(255, 255, 255, 0.98); + backdrop-filter: blur(10px) saturate(180%); + -webkit-backdrop-filter: blur(10px) saturate(180%); + border: 1px solid rgba(0, 0, 0, 0.1); + border-radius: 1rem; + padding: 2rem; + box-shadow: + 0 2px 8px -2px rgba(0, 0, 0, 0.08), + 0 4px 20px -4px rgba(0, 136, 204, 0.15); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + } + + .service-card-premium:hover { + transform: translateY(-8px); + box-shadow: 0 20px 20px -15px rgba(0, 136, 204, 0.5); + } + + .service-card-premium .service-icon { + position: relative; + width: 4rem; + height: 4rem; + background: var(--gradient-premium); + border-radius: 1rem; + display: flex; + align-items: center; + justify-content: center; + box-shadow: + 0 0 20px rgba(0, 155, 221, 0.15), + 0 0 40px rgba(0, 155, 221, 0.1), + 0 4px 20px -4px rgba(0, 136, 204, 0.2); + transition: all 0.3s ease; + overflow: hidden; + } + + /* Icon Shine Animation */ + .service-card-premium .service-icon::before { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: linear-gradient( + 45deg, + transparent 30%, + rgba(255, 255, 255, 0.2) 50%, + transparent 70% + ); + animation: icon-shine 5s ease-in-out infinite; + z-index: 1; + } + + .service-card-premium .service-icon svg { + position: relative; + z-index: 2; + } + + /* Service Card mit Hintergrundbild */ + .service-card-with-bg { + position: relative; + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(10px) saturate(180%); + -webkit-backdrop-filter: blur(10px) saturate(180%); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 1rem; + padding: 2rem; + box-shadow: + 0 2px 8px -2px rgba(0, 0, 0, 0.15), + 0 4px 20px -4px rgba(0, 136, 204, 0.2); + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + overflow: hidden; + min-height: 280px; + display: flex; + flex-direction: column; + justify-content: flex-end; + } + + .service-card-with-bg:hover { + transform: translateY(-4px); + box-shadow: + 0 8px 30px -4px rgba(0, 0, 0, 0.2), + 0 12px 40px -8px rgba(0, 136, 204, 0.35); + } + + .service-card-with-bg .service-icon-white { + position: relative; + width: 4rem; + height: 4rem; + background: var(--color-white); + border-radius: 1rem; + display: flex; + align-items: center; + justify-content: center; + box-shadow: + 0 0 20px rgba(0, 155, 221, 0.15), + 0 0 40px rgba(0, 155, 221, 0.1), + 0 4px 20px -4px rgba(0, 136, 204, 0.2); + transition: all 0.3s ease; + overflow: hidden; + color:#2196f3; + } + + .service-card-with-bg .service-icon-white svg { + position: relative; + z-index: 2; + } + + + .service-card-with-bg h3 { + font-size: 1.25rem; + font-weight: 600; + margin-bottom: 0.5rem; + line-height: 1.4; + } + + /* Success Story Cards */ + .success-story-card { + position: relative; + background: var(--color-card-solid); + border-radius: 1rem; + overflow: hidden; + box-shadow: + 0 2px 8px -2px rgba(0, 0, 0, 0.08), + 0 4px 20px -4px rgba(0, 136, 204, 0.15); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + display: flex; + flex-direction: column; + } + + .success-story-card:hover { + transform: translateY(-8px); + box-shadow: + 0 8px 30px -4px rgba(0, 0, 0, 0.15), + 0 12px 40px -8px rgba(0, 136, 204, 0.3); + } + + .success-story-image { + position: relative; + width: 100%; + height: 240px; + overflow: hidden; + } + + .success-story-overlay { + position: absolute; + inset: 0; + background: linear-gradient( + to bottom, + transparent 0%, + rgba(0, 0, 0, 0.05) 50%, + rgba(0, 136, 204, 0.08) 100% + ); + z-index: 1; + } + + .success-story-content { + padding: 1.5rem; + flex: 1; + display: flex; + flex-direction: column; + } + + .success-story-card h3 { + font-size: 1.25rem; + line-height: 1.4; + } + + /* Success Story Card Hover Effects */ + .success-story-card:hover .success-story-overlay { + background: linear-gradient( + to bottom, + transparent 0%, + rgba(0, 0, 0, 0.02) 50%, + rgba(0, 136, 204, 0.12) 100% + ); + } + + /* Testimonials Section */ + .testimonial-card-featured { + position: relative; + background: var(--color-card-solid); + border-radius: 1rem; + padding: 2rem; + box-shadow: + 0 4px 20px -4px rgba(0, 0, 0, 0.1), + 0 8px 40px -8px rgba(0, 136, 204, 0.2); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + } + + .testimonial-card-featured:hover { + transform: translateY(-4px); + box-shadow: + 0 8px 30px -4px rgba(0, 0, 0, 0.15), + 0 12px 50px -8px rgba(0, 136, 204, 0.3); + } + + .testimonial-card-compact { + position: relative; + background: var(--color-card-solid); + border-radius: 1.25rem; + padding: 2rem; + box-shadow: + 0 2px 12px -2px rgba(0, 0, 0, 0.08), + 0 4px 24px -4px rgba(0, 136, 204, 0.15); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + height: 100%; + display: flex; + flex-direction: column; + } + + .testimonial-card-compact:hover { + transform: translateY(-4px); + box-shadow: + 0 6px 24px -4px rgba(0, 0, 0, 0.12), + 0 10px 40px -8px rgba(0, 136, 204, 0.25); + } + + .testimonial-quote-icon { + margin-bottom: 1.5rem; + } + + .testimonial-quote-icon-small { + margin-bottom: 1rem; + } + + .testimonial-text-featured { + font-size: 1.375rem; + line-height: 1.6; + color: var(--color-foreground); + font-weight: 500; + margin-bottom: 2rem; + font-style: italic; + } + + .testimonial-text-compact { + font-size: 1rem; + line-height: 1.6; + color: var(--color-foreground); + font-weight: 500; + margin-bottom: 1.5rem; + font-style: italic; + flex: 1; + } + + .testimonial-author { + display: flex; + align-items: center; + gap: 1rem; + padding-top: 1.5rem; + border-top: 1px solid rgba(0, 0, 0, 0.08); + } + + .testimonial-author-compact { + display: flex; + align-items: center; + gap: 0.75rem; + padding-top: 1rem; + border-top: 1px solid rgba(0, 0, 0, 0.08); + margin-top: auto; + } + + .testimonial-avatar { + flex-shrink: 0; + } + + /* Testimonial Slider Styles */ + .testimonial-card-slider { + position: relative; + background: var(--color-card-solid); + border-radius: 1.75rem; + padding: 2rem; + box-shadow: + 0 4px 24px -4px rgba(0, 0, 0, 0.12), + 0 8px 48px -8px rgba(0, 136, 204, 0.25); + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + } + + .testimonial-quote-icon-large { + margin-bottom: 2rem; + } + + .testimonial-text-slider { + font-size: 1.15rem; + line-height: 1.6; + color: var(--color-foreground); + font-weight: 500; + margin-bottom: 1.5rem; + font-style: italic; + } + + .testimonial-author-slider { + display: flex; + align-items: center; + gap: 1.25rem; + padding-top: 1rem; + border-top: 1px solid rgba(0, 0, 0, 0.08); + } + + /* Navigation Buttons */ + .testimonial-nav-btn { + width: 48px; + height: 48px; + display: flex; + align-items: center; + justify-content: center; + background: rgba(255, 255, 255, 0.2); + backdrop-filter: blur(10px); + border: 1px solid rgba(255, 255, 255, 0.3); + border-radius: 50%; + color: white; + transition: all 0.3s ease; + cursor: pointer; + } + + .testimonial-nav-btn:hover { + background: rgba(255, 255, 255, 0.3); + transform: scale(1.05); + } + + /* Dots Indicator */ + .testimonial-dot { + width: 10px; + height: 10px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.3); + border: 2px solid rgba(255, 255, 255, 0.5); + transition: all 0.3s ease; + cursor: pointer; + } + + .testimonial-dot.active { + width: 32px; + border-radius: 5px; + background: rgba(255, 255, 255, 0.9); + border-color: rgba(255, 255, 255, 1); + } + + .testimonial-dot:hover:not(.active) { + background: rgba(255, 255, 255, 0.5); + transform: scale(1.2); + } + + /* Premium Sticky Header */ + .sticky-header { + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + transform: translateY(0); + } + + /* Offset für fixed header - damit Content nicht darunter verschwindet */ + body main { + padding-top: 64px; /* 4rem = h-16 vom header */ + } + + .sticky-header.scrolled { + background: rgba(248, 249, 250, 0.98) !important; + backdrop-filter: blur(16px) saturate(180%); + box-shadow: + 0 2px 8px -2px rgba(0, 0, 0, 0.08), + 0 4px 16px -4px rgba(0, 136, 204, 0.12), + 0 8px 24px -8px rgba(0, 136, 204, 0.08); + border-bottom-color: rgba(0, 136, 204, 0.15); + } + + /* Slide-Down Animation beim ersten Scroll */ + .sticky-header.hide { + transform: translateY(-100%); + } + + /* Scroll Progress Indicator */ + .scroll-progress-bar { + position: fixed; + top: 0; + left: 0; + height: 3px; + background: linear-gradient(90deg, var(--color-primary-light) 0%, var(--color-primary) 50%, var(--color-primary-dark) 100%); + width: 0%; + z-index: 99999; + transition: width 0.1s ease-out, opacity 0.3s ease; + opacity: 0; + box-shadow: + 0 0 10px rgba(0, 155, 221, 0.5), + 0 0 20px rgba(0, 155, 221, 0.3); + } + + .scroll-progress-bar.visible { + opacity: 1; + } + + /* Smooth Progress Animation */ + @media (prefers-reduced-motion: no-preference) { + .scroll-progress-bar { + transition: width 0.15s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; + } + } + + /* Für Nutzer mit Motion-Präferenz */ + @media (prefers-reduced-motion: reduce) { + .scroll-progress-bar { + transition: opacity 0.3s ease; + } + } + + + /* Sicherere Cross-Browser-Variante von Methode 2: */ + .gradient-border-radius-safe { + position: relative; + border: 1px solid transparent; + /* * Zwei Hintergründe: + * 1. Die Inhaltsfarbe (z.B. weiß) + * 2. Der Verlauf (3x breiter für Animation) + */ + background-image: + linear-gradient(white, white), /* Innerer Hintergrund */ + linear-gradient(90deg, #00b3ff50 0%, #00568150 25%, #00b3ff40 50%, #00568150 75%, #00b3ff50 100%); /* Äußerer Verlauf */ + + /* Den Ursprung für beide festlegen */ + background-origin: border-box; + + /* * Den Clip-Pfad für beide festlegen: + * 1. Der weiße Hintergrund füllt nur die padding-box (Inhalt). + * 2. Der Verlauf füllt die border-box (alles). + */ + background-clip: padding-box, border-box; + + /* Größeren Hintergrund für Animation */ + background-size: 100%, 300% 100%; + background-position: 0 0, 0% 0; + + /* Animation für Gradient-Bewegung */ + animation: border-gradient-slide 8s ease-in-out infinite alternate; + } + + /* Animierter Border Gradient - Sliding */ + @keyframes border-gradient-slide { + 0%, 100% { + background-position: 0 0, 0% 0; + } + 50% { + background-position: 0 0, 100% 0; + } + } + + /* Hover: Animation pausieren */ + .gradient-border-radius-safe:hover { + animation-play-state: paused; + } + + @keyframes icon-shine { + 0%, 100% { + transform: translateX(-150%) translateY(-150%) rotate(35deg); + } + 40%, 60% { + transform: translateX(150%) translateY(150%) rotate(35deg); + } + } + + /* Hero Image Shine Effect */ + .hero-image-shine { + position: relative; + overflow: hidden; + } + + .hero-image-shine::after { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: linear-gradient( + 45deg, + transparent 30%, + rgba(255, 255, 255, 0.3) 50%, + transparent 70% + ); + animation: hero-shine 10s ease-in-out infinite; + pointer-events: none; + z-index: 10; + } + + @keyframes hero-shine { + 0%, 100% { + transform: translateX(-150%) translateY(-150%) rotate(35deg); + } + 40%, 60% { + transform: translateX(150%) translateY(150%) rotate(35deg); + } + } + + /* Button Shine Effect */ + .btn-shine { + position: relative; + overflow: hidden; + } + + .btn-shine::before { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: linear-gradient( + 45deg, + transparent 30%, + rgba(255, 255, 255, 0.2) 50%, + transparent 70% + ); + animation: btn-shine 8s ease-in-out infinite; + pointer-events: none; + z-index: 1; + } + + /* Weißer Button Shine - mit leichtem Blau/Grau */ + .btn-shine.bg-white::before { + background: linear-gradient( + 45deg, + transparent 30%, + rgba(0, 136, 204, 0.2) 50%, + transparent 70% + ); + } + + .btn-shine > * { + position: relative; + z-index: 2; + } + + @keyframes btn-shine { + 0%, 100% { + transform: translateX(-150%) translateY(-150%) rotate(35deg); + } + 40%, 60% { + transform: translateX(150%) translateY(150%) rotate(35deg); + } + } + + /* Partner Card Glow Effect - subtiler pulsierender Glow */ + .card-glow { + position: relative; + animation: card-glow-pulse 4s ease-in-out infinite; + } + + @keyframes card-glow-pulse { + 0%, 100% { + box-shadow: + 0 -4px 20px -4px rgba(0, 136, 204, 0.10), + 0 -8px 0 0 rgba(0, 136, 204, 0); + } + 50% { + box-shadow: + 0 -4px 20px -4px rgba(0, 136, 204, 0.25), + 0 -15px 20px 0 rgba(0, 136, 204, 0.15); + } + } + + .card-glow:hover { + animation: none; + } + + .service-card-premium:hover .service-icon { + box-shadow: + 0 0 25px rgba(0, 155, 221, 0.25), + 0 0 50px rgba(0, 155, 221, 0.15), + 0 10px 30px -10px rgba(0, 136, 204, 0.3); + transform: scale(1.05); + } + + .service-card-premium h3 { + font-family: var(--font-heading); + font-weight: 600; + font-size: 1.125rem; + margin-bottom: 0.75rem; + transition: color 0.3s ease; + } + + .service-card-premium:hover h3 { + color: var(--color-primary); + } + + /* 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 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; + } + + /* 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; + } + } + + /* Glassmorphism Effects - Frosted Glass */ + .glass-card { + background: rgba(255, 255, 255, 0.98); + backdrop-filter: blur(12px) saturate(180%); + -webkit-backdrop-filter: blur(12px) saturate(180%); + border: 1px solid rgba(0, 0, 0, 0.08); + } + + .glass-card-light { + background: rgba(255, 255, 255, 0.95); + backdrop-filter: blur(16px) saturate(180%); + -webkit-backdrop-filter: blur(16px) saturate(180%); + border: 1px solid rgba(0, 0, 0, 0.06); + } + + .glass-card-strong { + background: rgba(255, 255, 255, 0.98); + backdrop-filter: blur(10px) saturate(180%); + -webkit-backdrop-filter: blur(10px) saturate(180%); + border: 1px solid rgba(0, 0, 0, 0.08); + } + + /* Metallic Shimmer Effect (inspired by Möbius band) */ + .shimmer-effect { + position: relative; + overflow: hidden; + } + + .shimmer-effect::after { + content: ''; + position: absolute; + top: -50%; + right: -50%; + bottom: -50%; + left: -50%; + background: linear-gradient( + to bottom, + transparent, + rgba(255, 255, 255, 0.1) 50%, + transparent + ); + transform: rotate(45deg); + animation: shimmer 3s infinite; + } + + @keyframes shimmer { + 0%, 100% { + transform: translateX(-150%) translateY(-150%) rotate(35deg); + } + 40%, 60% { + transform: translateX(150%) translateY(150%) rotate(35deg); + } + } + + /* Hover shimmer for cards */ + .hover-shimmer { + position: relative; + overflow: hidden; + } + + .hover-shimmer::after { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient( + 90deg, + transparent, + rgba(255, 255, 255, 0.3), + transparent + ); + transition: left 0.5s ease; + pointer-events: none; + } + + .hover-shimmer:hover::after { + left: 100%; + } + + /* Premium Gradient Backgrounds */ + .bg-gradient-premium { + background: var(--gradient-premium); + background-size: 100% 100%; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + } + + .bg-gradient-premium:hover { + background: var(--gradient-premium-hover); + transform: translateY(-1px); + box-shadow: 0 10px 40px -10px rgba(0, 136, 204, 0.4); + } + .bg-gradient-premium-safe { + background: var(--gradient-premium); + background-size: 100% 100%; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + } + + .bg-gradient-subtle { + background: var(--gradient-subtle); + } + + /* Text Gradient */ + .text-gradient { + background: var(--gradient-premium); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + } + + .text-gradient-premium { + background: var(--gradient-premium); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + font-weight: 600; + } + + /* 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); + } + + .shadow-card { + box-shadow: + 0 2px 8px -2px rgba(0, 0, 0, 0.08), + 0 4px 20px -4px rgba(0, 136, 204, 0.15); + } + + .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 20px rgba(0, 155, 221, 0.25), + 0 0 40px rgba(0, 155, 221, 0.15), + 0 10px 20px -10px 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); + } + + /* Hover Glow Enhancement */ + .hover-glow { + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + } + + .hover-glow:hover { + box-shadow: + 0 0 30px rgba(0, 155, 221, 0.4), + 0 0 60px rgba(0, 155, 221, 0.25), + 0 0 90px rgba(0, 113, 168, 0.15), + 0 10px 50px -10px rgba(0, 136, 204, 0.5); + transform: translateY(-2px); + } + + .hover-glow-white { + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + } + + .hover-glow-white:hover { + box-shadow: + 0 0 15px rgba(255, 255, 255, 0.4), + 0 0 30px rgba(255, 255, 255, 0.25), + 0 0 45px rgba(255, 255, 255, 0.15), + 0 10px 25px -10px rgba(255, 255, 255, 0.5); + transform: translateY(-2px); + } + + .hover-glow-soft { + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + + } + .hover-glow-soft:hover { + 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); + transform: translateY(-2px); + + } + /* Pulsing Glow Animation for special elements */ + .glow-pulse { + animation: glowPulse 3s ease-in-out infinite; + } + + @keyframes glowPulse { + 0%, 100% { + box-shadow: + 0 0 20px rgba(0, 155, 221, 0.2), + 0 0 40px rgba(0, 155, 221, 0.1), + 0 10px 30px -10px rgba(0, 136, 204, 0.3); + } + 50% { + 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 40px -10px rgba(0, 136, 204, 0.4); + } + } + + /* Transition */ + .transition-smooth { + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + } + + /* Card Hover Effects */ + .card-hover { + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + } + + .card-hover:hover { + transform: translateY(-4px); + box-shadow: 0 10px 30px -10px rgba(0, 136, 204, 0.2); + } + + /* Premium Button Styles with Glow */ + .btn-premium { + background: var(--gradient-premium); + color: white; + padding: 0.75rem 1.5rem; + border-radius: 0.5rem; + font-weight: 500; + transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: + 0 0 20px rgba(0, 155, 221, 0.15), + 0 0 40px rgba(0, 155, 221, 0.1), + 0 4px 15px -3px rgba(0, 136, 204, 0.3); + } + + .btn-premium:hover { + background: var(--gradient-premium-hover); + transform: translateY(-2px); + box-shadow: + 0 0 30px rgba(0, 155, 221, 0.4), + 0 0 60px rgba(0, 155, 221, 0.25), + 0 10px 40px -10px rgba(0, 136, 204, 0.5); + } + + /* Glow on Focus for Accessibility */ + .btn-premium:focus, + .hover-glow:focus { + outline: none; + box-shadow: + 0 0 0 3px rgba(0, 155, 221, 0.3), + 0 0 30px rgba(0, 155, 221, 0.4), + 0 0 60px rgba(0, 155, 221, 0.25); + } + + /* Inner Glow - Simulates the luminous inner edge of Möbius band */ + .inner-glow { + box-shadow: + inset 0 0 30px rgba(0, 155, 221, 0.15), + inset 0 0 15px rgba(0, 155, 221, 0.1), + 0 0 25px rgba(0, 155, 221, 0.2); + } + + .inner-glow-strong { + box-shadow: + inset 0 0 40px rgba(0, 155, 221, 0.25), + inset 0 0 20px rgba(0, 155, 221, 0.15), + 0 0 30px rgba(0, 155, 221, 0.3); + } + + /* Line Clamp Utilities */ + .line-clamp-1 { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 1; + } + + .line-clamp-2 { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + } + + .line-clamp-3 { + overflow: hidden; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + } + + /* Alpine.js Cloak */ + [x-cloak] { + display: none !important; + } + + /* Prose Styling for Modal Content */ + .prose h3 { + @apply text-xl font-semibold mt-6 mb-3 text-foreground; + } + + .prose h4 { + @apply text-lg font-semibold mt-4 mb-2 text-foreground; + } + + .prose ul { + @apply list-disc ml-5 mb-4; + } + + .prose li { + @apply mb-2; + line-height: 1.3em; + } + + .prose p { + @apply mb-4 leading-relaxed text-foreground; + } +} diff --git a/resources/css/web/shared-styles.css b/resources/css/web/shared-styles.css index f9b5ab4..0430524 100644 --- a/resources/css/web/shared-styles.css +++ b/resources/css/web/shared-styles.css @@ -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; + } +} diff --git a/resources/css/web/theme-b2in.css b/resources/css/web/theme-b2in.css index bfefbf4..648157c 100644 --- a/resources/css/web/theme-b2in.css +++ b/resources/css/web/theme-b2in.css @@ -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"; diff --git a/resources/js/app.js b/resources/js/app.js index 2d7a461..8aad7b8 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -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(); + } +})(); + diff --git a/resources/views/livewire/web/components/sections/benefits-section.blade.php b/resources/views/livewire/web/components/sections/benefits-section.blade.php new file mode 100644 index 0000000..c3d8208 --- /dev/null +++ b/resources/views/livewire/web/components/sections/benefits-section.blade.php @@ -0,0 +1,146 @@ +
+
+ @if(isset($content['title'])) +
+

+ {{ $content['title'] }} +

+

+ {{ $content['subtitle'] }} +

+
+ @endif + +
+ @if ($layout === 'right') + {{-- Layout Right: Bild zuerst, dann Text --}} + {{-- Bild --}} +
+
+
+
+ @if(isset($content['image'])) + {{ $content['image_alt'] ?? 'Benefits Image' }} +
+ @endif +
+ +
+
+
{{ $content['highlight']['value'] }}
+

+ {{ $content['highlight']['text'] }} +

+
+
+
+
+
+ + {{-- Text --}} +
+
+
+ @svg('heroicon-o-'.$content['tag_icon'], 'w-4 h-4') + {{ $content['tag'] }} +
+

+ {!! $content['tag_title'] !!} +

+
+ +
+ @foreach ($content['features'] as $index => $feature) +
+
+
+ @if (isset($feature['icon'])) + @svg('heroicon-o-'.$feature['icon'], 'w-6 h-6 text-secondary') + + @endif +
+
+

+ {{ $feature['title'] }} +

+

+ {{ $feature['description'] }} +

+
+
+
+ @endforeach +
+
+ @else + {{-- Layout Left (Standard): Text zuerst, dann Bild --}} + {{-- Text --}} +
+
+
+ @svg('heroicon-o-'.$content['tag_icon'], 'w-4 h-4') + {{ $content['tag'] }} +
+

+ {!! $content['tag_title'] !!} +

+
+ +
+ @foreach ($content['features'] as $index => $feature) +
+
+
+ @if (isset($feature['icon'])) + @svg('heroicon-o-'.$feature['icon'], 'w-6 h-6 text-secondary') + + @endif +
+
+

+ {{ $feature['title'] }} +

+

+ {{ $feature['description'] }} +

+
+
+
+ @endforeach +
+
+ + {{-- Bild --}} +
+
+
+
+ @if(isset($content['image'])) + {{ $content['image_alt'] ?? 'Benefits Image' }} +
+ @endif +
+ +
+
+
{{ $content['highlight']['value'] }}
+

+ {{ $content['highlight']['text'] }} +

+
+
+
+
+
+ @endif +
+
+ diff --git a/resources/views/livewire/web/components/sections/brand-worlds.blade.php b/resources/views/livewire/web/components/sections/brand-worlds.blade.php index adbd7fa..4fcf181 100644 --- a/resources/views/livewire/web/components/sections/brand-worlds.blade.php +++ b/resources/views/livewire/web/components/sections/brand-worlds.blade.php @@ -1,27 +1,33 @@
{{-- Section Title --}} -
-

{{ $title }}

-

- {{ $subtitle }} +

+

{!! $title !!}

+

+ {!! $subtitle !!}

{{-- Brand Cards --}}
@foreach ($worlds as $world) -
+
{{ $world['title'] }}
- -
-

{{ $world['title'] }}

-

- {{ $world['description'] }} -

+
+
+ @if (isset($world['logo'])) + {{ $world['title'] }} + @else +

{{ $world['title'] }}

+ @endif +

+ {{ $world['description'] }} +

+
diff --git a/resources/views/livewire/web/components/sections/c-t-a-section.blade.php b/resources/views/livewire/web/components/sections/c-t-a-section.blade.php index d4a833a..4e66119 100644 --- a/resources/views/livewire/web/components/sections/c-t-a-section.blade.php +++ b/resources/views/livewire/web/components/sections/c-t-a-section.blade.php @@ -1,15 +1,15 @@
-

+

{!! $content['title'] !!}

-

+

{{ $content['subtitle'] }}

-
+
+
+ {{-- Section Title --}} +
+

{!! $content['title'] !!}

+

+ {!! $content['subtitle'] !!} +

+
+ + {{-- Brand Cards --}} +
+ @foreach ($content['cards'] as $index => $card) +
+ + @if(isset($card['image'])) +
+ {{ $card['title'] }} +
+ @endif + + @if(isset($card['icon'])) +
+
+ @svg('heroicon-o-'.$card['icon'], 'w-10 h-10 text-secondary-foreground') +
+
+ @endif + +
+
+ @if (isset($card['logo'])) + {{ $card['title'] }} + @endif + @if(isset($card['title'])) +

{{ $card['title'] }}

+ @endif + @if(isset($card['description'])) +

+ {{ $card['description'] }} +

+ @endif +
+ + @if(isset($card['button'])) +
+ + {{ $card['button_text'] }} + +
+ @endif + @if(isset($card['link'])) + + Mehr erfahren + + + + + + @endif +
+
+ @endforeach +
+
+
diff --git a/resources/views/livewire/web/components/sections/commitment-section.blade.php b/resources/views/livewire/web/components/sections/commitment-section.blade.php index 623ede2..8d69392 100644 --- a/resources/views/livewire/web/components/sections/commitment-section.blade.php +++ b/resources/views/livewire/web/components/sections/commitment-section.blade.php @@ -1,6 +1,6 @@
-
+

{!! $content['title'] !!}

@@ -10,8 +10,8 @@
- @foreach($content['testimonials'] as $testimonial) -
+ @foreach($content['testimonials'] as $index => $testimonial) +
{{ $testimonial['author'] }}
diff --git a/resources/views/livewire/web/components/sections/content-section.blade.php b/resources/views/livewire/web/components/sections/content-section.blade.php index 67ece4c..4c5441f 100644 --- a/resources/views/livewire/web/components/sections/content-section.blade.php +++ b/resources/views/livewire/web/components/sections/content-section.blade.php @@ -2,40 +2,54 @@
- @if($layout === 'right') + @if ($layout === 'right') {{-- Layout Right: Image zuerst, dann Content --}} {{-- Image --}}
-
- {{ $content['image_alt'] }} -
{{ $content['image_caption'] }}
+
+ {{ $content['image_alt'] }} +
+ {{ $content['image_caption'] }}
{{-- Content --}}
-
-

{{ $content['title'] }}

+
+

{!! $content['title'] !!}

- @foreach($content['paragraphs'] as $paragraph) -

{{ $paragraph }}

+ @foreach ($content['paragraphs'] as $paragraph) +

{!! $paragraph !!}

@endforeach
+ @if(isset($content['list'])) +
+ @foreach ($content['list'] as $index => $item) +
+
+ @svg('heroicon-o-'.$item['icon'], 'w-6 h-6 text-secondary') +
+
+

{{ $item['title'] }}

+
+
+ + @endforeach +
+ @endif
@else {{-- Layout Left (Standard): Content zuerst, dann Image --}} {{-- Content --}}
-
-

{{ $content['title'] }}

+
+

{!! $content['title'] !!}

- @foreach($content['paragraphs'] as $paragraph) -

{{ $paragraph }}

+ @foreach ($content['paragraphs'] as $paragraph) +

{!! $paragraph !!}

@endforeach
@@ -43,13 +57,12 @@ {{-- Image --}}
-
- {{ $content['image_alt'] }} -
{{ $content['image_caption'] }}
+
+ {{ $content['image_alt'] }} +
+ {{ $content['image_caption'] }}
@endif diff --git a/resources/views/livewire/web/components/sections/digital-core.blade.php b/resources/views/livewire/web/components/sections/digital-core.blade.php index 26a897d..50da5a1 100644 --- a/resources/views/livewire/web/components/sections/digital-core.blade.php +++ b/resources/views/livewire/web/components/sections/digital-core.blade.php @@ -1,6 +1,6 @@
-
+

{!! $content['title'] !!}

@@ -12,29 +12,11 @@
@foreach($content['features'] as $index => $feature)
-
+
-
- @if($feature['icon'] === 'cloud') - - - - @elseif($feature['icon'] === 'shield') - - - - @elseif($feature['icon'] === 'layers') - - - - @elseif($feature['icon'] === 'database') - - - - @else - - - +
+ @if($feature['icon']) + @svg('heroicon-o-'.$feature['icon'], 'w-8 h-8 text-secondary-foreground') @endif
diff --git a/resources/views/livewire/web/components/sections/ecosystem-core.blade.php b/resources/views/livewire/web/components/sections/ecosystem-core.blade.php index a180a2f..8d7654d 100644 --- a/resources/views/livewire/web/components/sections/ecosystem-core.blade.php +++ b/resources/views/livewire/web/components/sections/ecosystem-core.blade.php @@ -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(' + // Ultimate fallback - simple star icon + return ' '; -} + } @endphp
{{-- Section Title --}} -
+

{{ $content['title'] }}

- @if(isset($content['subtitle'])) -

- {{ $content['subtitle'] }} -

+ @if (isset($content['subtitle'])) +

+ {{ $content['subtitle'] }} +

@endif
{{-- Pillars Grid --}} -
- @foreach($content['pillars'] as $index => $pillar) -
-
-
- {!! renderHeroIcon($pillar['icon'], $pillar['icon_style'] ?? 'outline') !!} -
+
+ @foreach ($content['pillars'] as $index => $pillar) +
+
+
+ {!! renderHeroIcon($pillar['icon'], $pillar['icon_style'] ?? 'outline', 'text-secondary-foreground') !!} +
-
-

{{ $pillar['title'] }}

-

- {{ $pillar['description'] }} -

+
+

{{ $pillar['title'] }}

+

+ {!! $pillar['description'] !!} +

+
-
@endforeach
diff --git a/resources/views/livewire/web/components/sections/ecosystem-hero.blade.php b/resources/views/livewire/web/components/sections/ecosystem-hero.blade.php index a4e48e6..15a5297 100644 --- a/resources/views/livewire/web/components/sections/ecosystem-hero.blade.php +++ b/resources/views/livewire/web/components/sections/ecosystem-hero.blade.php @@ -1,5 +1,5 @@ -
-
+
+

diff --git a/resources/views/livewire/web/components/sections/ecosystem-stats.blade.php b/resources/views/livewire/web/components/sections/ecosystem-stats.blade.php index f628892..d695d1d 100644 --- a/resources/views/livewire/web/components/sections/ecosystem-stats.blade.php +++ b/resources/views/livewire/web/components/sections/ecosystem-stats.blade.php @@ -1,26 +1,25 @@
-
-

- {!! $content['title'] !!} -

-

- {{ $content['subtitle'] }} +

+

{!! $content['title'] !!}

+

+ {!! $content['subtitle'] !!}

- @foreach ($content['stats'] as $stat) -
-

- {{ $stat['number'] }} -

-

- {{ $stat['label'] }} -

-

- {{ $stat['description'] }} -

+ @foreach ($content['stats'] as $index => $stat) + +
+

+ {{ $stat['number'] }} +

+

+ {{ $stat['label'] }} +

+

+ {{ $stat['description'] }} +

@endforeach
diff --git a/resources/views/livewire/web/components/sections/hero-tiles.blade.php b/resources/views/livewire/web/components/sections/hero-tiles.blade.php index d2ad92f..6a5c722 100644 --- a/resources/views/livewire/web/components/sections/hero-tiles.blade.php +++ b/resources/views/livewire/web/components/sections/hero-tiles.blade.php @@ -1,5 +1,5 @@ -
-
+
+
{{-- Left Content --}}
diff --git a/resources/views/livewire/web/components/sections/hero.blade.php b/resources/views/livewire/web/components/sections/hero.blade.php index 72bf7c7..01978c3 100644 --- a/resources/views/livewire/web/components/sections/hero.blade.php +++ b/resources/views/livewire/web/components/sections/hero.blade.php @@ -1,9 +1,9 @@ -
+
{{-- Left Content --}}
-
+

{!! $content['title'] !!}

@@ -12,7 +12,7 @@

-
+
{{ $content['cta1_text'] }} @@ -21,30 +21,31 @@
-
+
@foreach ($content['stats'] as $stat) - {{ $stat }} - @if (!$loop->last) - • - @endif +
+ @svg('heroicon-o-check-circle', 'w-6 h-6 text-secondary') + {{ $stat }} +
@endforeach
+ +
{{-- Right Image --}}
-
- {{ $content['image_alt'] }} + {{ $content['image_alt'] }}
{{-- Floating info card --}}
+ 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">
{{ $content['card_title'] }}
-
{!! $content['card_text'] !!} +
{!! $content['card_text'] !!}
diff --git a/resources/views/livewire/web/components/sections/partner-c-t-a.blade.php b/resources/views/livewire/web/components/sections/partner-c-t-a.blade.php index 63b9507..a5c8e0e 100644 --- a/resources/views/livewire/web/components/sections/partner-c-t-a.blade.php +++ b/resources/views/livewire/web/components/sections/partner-c-t-a.blade.php @@ -1,16 +1,16 @@
-

+

{!! $content['title'] !!}

-

+

{{ $content['subtitle'] }}

-
+
@foreach($content['stats'] as $stat)
{{ $stat['number'] }}
@@ -19,7 +19,7 @@ @endforeach
-
+
{{ $content['button_text'] }} diff --git a/resources/views/livewire/web/components/sections/partner-hero.blade.php b/resources/views/livewire/web/components/sections/partner-hero.blade.php index 6650150..fe61a1a 100644 --- a/resources/views/livewire/web/components/sections/partner-hero.blade.php +++ b/resources/views/livewire/web/components/sections/partner-hero.blade.php @@ -1,57 +1,37 @@ -
+
-

+
+

{!! $content['title'] !!}

{{ $content['subtitle'] }}

- -
- @foreach ($content['partner_types'] as $partner) -
-
- @if ($partner['icon'] === 'trending-up') - - - - @elseif($partner['icon'] === 'globe') - - - - @elseif($partner['icon'] === 'handshake') - - - - @else - - - - @endif +
+ @if(isset($content['partner_types'])) +
+ @foreach ($content['partner_types'] as $index => $partner) +
+
+ @svg('heroicon-o-'.$partner['icon'], 'w-6 h-6 text-secondary')

{{ $partner['title'] }}

{{ $partner['description'] }}

+ @endforeach
+ @endif
-
+
{{ $content['image_alt'] }} @@ -60,16 +40,8 @@ {{-- Floating info card --}}
-
-
- - - -
+ 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"> +

{{ $content['hub']['title'] }}

{{ $content['hub']['subtitle'] }}

diff --git a/resources/views/livewire/web/components/sections/partner-process.blade.php b/resources/views/livewire/web/components/sections/partner-process.blade.php index 7c331dd..840f571 100644 --- a/resources/views/livewire/web/components/sections/partner-process.blade.php +++ b/resources/views/livewire/web/components/sections/partner-process.blade.php @@ -1,6 +1,6 @@
-
+

{!! $content['title'] !!}

@@ -11,44 +11,19 @@
@foreach ($content['steps'] as $index => $step) -
-
- {{ $step['title'] }} -
+
+ @if(isset($step['icon'])) +
+
+ @svg('heroicon-o-'.$step['icon'], 'w-10 h-10 text-secondary-foreground') +
- - {{-- Step Number Badge --}} -
- {{ $step['step'] }} -
-
+ @endif
- @if ($step['icon'] === 'file-text') - - - - - @elseif($step['icon'] === 'search') - - - - @else - - - - @endif + {{ $index + 1 }}

{{ $step['title'] }} @@ -60,9 +35,9 @@

@if ($index === count($content['steps']) - 1) - - @endif @@ -70,22 +45,5 @@

@endforeach
- - {{-- CTA Section --}} -
-
-

- {!! $content['cta']['title'] !!} -

-

- {{ $content['cta']['subtitle'] }} -

- - - -
-
diff --git a/resources/views/livewire/web/components/sections/vision-section.blade.php b/resources/views/livewire/web/components/sections/vision-section.blade.php index f13f1a2..fc5b4b5 100644 --- a/resources/views/livewire/web/components/sections/vision-section.blade.php +++ b/resources/views/livewire/web/components/sections/vision-section.blade.php @@ -3,11 +3,11 @@
{{-- Content --}}
-
+

{{ $content['title'] }}

- @foreach($content['paragraphs'] as $paragraph) -

{{ $paragraph }}

+ @foreach ($content['paragraphs'] as $paragraph) +

{!! $paragraph !!}

@endforeach
@@ -15,14 +15,13 @@ {{-- Image --}}
-
- {{ $content['image_alt'] }} +
+ {{ $content['image_alt'] }} -
{{ $content['image_caption'] }}
+
+ {{ $content['image_caption'] }}
diff --git a/resources/views/livewire/web/components/ui/footer.blade.php b/resources/views/livewire/web/components/ui/footer.blade.php index 47ad9bd..764be1a 100644 --- a/resources/views/livewire/web/components/ui/footer.blade.php +++ b/resources/views/livewire/web/components/ui/footer.blade.php @@ -5,7 +5,7 @@
{{ $domainName ?? 'B2In' }} Logo + alt="{{ $domainName ?? 'B2In' }} Logo" class="h-14 w-auto" />
@@ -15,27 +15,25 @@

-
+
{{-- Links --}}
-
+
Privacy Policy - -
-
+
Terms of Service
-
+
Cookie Policy
-
+
Impressum
@@ -52,17 +50,20 @@
- + - + - +
diff --git a/resources/views/livewire/web/components/ui/header.blade.php b/resources/views/livewire/web/components/ui/header.blade.php index 04736a3..19e607f 100644 --- a/resources/views/livewire/web/components/ui/header.blade.php +++ b/resources/views/livewire/web/components/ui/header.blade.php @@ -3,18 +3,16 @@
{{ $domainName ?? 'B2IN' }} Logo + alt="{{ $domainName ?? 'B2IN' }} Logo" class="h-10 w-auto" />