https://oxid-esales.com/assets/OpalAdminUmgebungsanzeigePage-6x5cwRbi.js

1import{j as e}from"./vendor-ui-srD7R-Zr.js";import{r as b}from"./vendor-i18n-DtlmU0Vb.js";import{S as f}from"./SEOHead-DFGqe1Uz.js";import{c as p,d as c,L as j,B as s,A as m,k as w,j as x}from"./index-Cl50YbWy.js";import{C as r,c as l}from"./card-2FNxPkSo.js";import{A as N,a as v,b as y,c as A}from"./accordion-CuD9YxUj.js";import{A as i}from"./AnimatedSection-BrTxaeeR.js";import{S as k}from"./StaggeredAnimation-CHD3kroF.js";import{S as z}from"./StandardHero-BjTz0K9E.js";import{B as S}from"./BrevoContactForm-YsOjGt8g.js";import{o as O}from"./oxid-opal-grafik-BoYE_KV9.js";import{B as L}from"./BlueprintSection-CFnEeXjR.js";import{E as D}from"./eye-BiEp1abd.js";import{P as B}from"./palette-iDTZkRLs.js";import{L as o}from"./vendor-react-4t1c1o1L.js";import"./vendor-recharts-BMEKEyEe.js";import"./input-DhK7JSUA.js";import"./label-CfLvV09J.js";import"./circle-alert-BYxcQNku.js";import"./send-iPnoUnZy.js";/**
2 * @license lucide-react v0.462.0 - ISC
3 *
4 * This source code is licensed under the ISC license.
5 * See the LICENSE file in the root directory of this source tree.
6 */const E=p("FileLock2",[["path",{d:"M4 22h14a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v1",key:"jmtmu2"}],["path",{d:"M14 2v4a2 2 0 0 0 2 2h4",key:"tnqrlb"}],["rect",{width:"8",height:"5",x:"2",y:"13",rx:"1",key:"10y5wo"}],["path",{d:"M8 13v-2a2 2 0 1 0-4 0v2",key:"1pdxzg"}]]),h=[{id:"agentur",label:"Agentur / Dienstleister",title:"Agentur / Dienstleister",scenario:"Du betreust mehrere OXID-Shops in Development-, Staging- und Live-Umgebungen, die im Administrationsbereich alle gleich aussehen.",benefit:"Jede Instanz bekommt ihren eigenen farbigen Hinweis mit Umgebungsnamen – pro Deployment gesetzt. So sieht dein ganzes Team sofort, in welchem System es gerade arbeitet.",cta:"OPAL anfragen"},{id:"entwickler",label:"Entwickler / Team",title:"Entwickler / Team",scenario:"Du wechselst am Tag mehrfach zwischen Testinstanz und Live-System.",benefit:"Ein farbiger Header zeigt dir jederzeit, wo du bist – auf dem Live-System mit deutlicher Warn-Optik. Eingestellt wird pro Umgebung über die Konfigurationsdatei, nicht im Administrationsbereich.",cta:"OPAL anfragen"},{id:"shopbetreiber",label:"Shopbetreiber mit Agentur",title:"Shopbetreiber mit Agentur-Betreuung",scenario:"Deine Agentur pflegt deinen Shop, und du möchtest, dass sie das Live-System klar erkennt.",benefit:"Das Live-System trägt eine dauerhaft sichtbare, farbige Kennzeichnung. So ist auf einen Blick erkennbar, welches System gerade offen ist.",cta:"OPAL anfragen"}],P=[{title:"Farbiger Header im ganzen Administrationsbereich",description:"Ein schmaler, fest sitzender Banner am oberen Rand zeigt die Umgebung auf jeder Seite – nicht nur auf der Startseite."},{title:"Zusätzliches Label in der Navigation",description:"Der Umgebungsname erscheint zusätzlich als Beschriftung in der seitlichen Navigation des Administrationsbereichs, damit die Kennzeichnung auch dort präsent ist."},{title:"Warn-Optik, die auffällt",description:"Ein Warnsymbol und ein diagonales Warnstreifen-Band heben den Hinweis deutlich von der Browser- und der Shop-Oberfläche ab."},{title:"Frei wählbarer Name und Farbe",description:"Ein beliebiger Umgebungsname als Text, dazu die Farb-Vorlagen Grün, Orange und Blau oder eine eigene Wunschfarbe."}],I=[{title:"Einstellung pro Umgebung, nicht im Administrationsbereich",description:"Name, Farbe und Ein/Aus werden über die Konfigurationsdatei oder eine Umgebungsvariable gesetzt – bewusst nicht im Administrationsbereich. So kann die Einstellung nicht versehentlich überschrieben werden und liegt nicht im Datenbank-Backup."},{title:"Automatischer Rückgriff auf die OXID-Umgebung",description:'Ist kein eigener Name gesetzt, greift der OPAL auf OXIDs Umgebungs-Angabe zurück – ein Entwicklungssystem zeigt so automatisch „dev". Ein selbst gesetzter Name hat immer Vorrang.'},{title:"Ein- und ausschaltbar ohne Deinstallation",description:"Ein eigener Schalter blendet die Anzeige gezielt aus – unabhängig davon, ob ein Name gesetzt ist. Und lässt sich gar keine Umgebung auflösen, erscheint ebenfalls kein Hinweis, ohne dass ein Fehler entsteht."}],U=[{question:"Welche Farben sind möglich?",answer:"Die Vorlagen Grün, Orange und Blau oder eine eigene Wunschfarbe als Hex-Wert. Ein ungültiger oder fehlender Wert fällt auf eine neutrale Standardfarbe zurück."},{question:"Ist der Hinweis auch im Shop sichtbar?",answer:"Nein. Der Hinweis erscheint nur im Administrationsbereich, dort aber auf jeder Seite. Das Frontend bleibt unberührt."},{question:"Was passiert, wenn nichts konfiguriert ist?",answer:'Der OPAL nimmt zuer

6st deinen gesetzten Namen, sonst OXIDs eigene Umgebungs-Angabe – ein Entwicklungssystem zeigt so automatisch „dev". Ist gar nichts vorhanden, erscheint kein Hinweis, und es tritt kein Fehler auf.'},{question:"Kann ich die Anzeige vorübergehend abschalten?",answer:"Ja, über einen Schalter in der Konfiguration – ganz ohne das Modul zu deinstallieren."}],ie=()=>{const[d,g]=b.useState("agentur"),n=h.find(t=>t.id===d),u=x().includes("/loesungen/opal")||x().includes("/solutions/opal");return e.jsxs(e.Fragment,{children:[e.jsx(f,{title:"Admin-Umgebungsanzeige für OXID eShop – Dev/Staging/Live",description:"Ein farbiger Hinweis im Administrationsbereich zeigt auf jeder Seite, ob du auf Development, Staging oder Live arbeitest. Baustein direkt von OXID."}),e.jsx(z,{title:"OPAL",titleHighlight:"Admin-Umgebungsanzeige",subtitle:"Ein farbiger Hinweis im OXID-Administrationsbereich, der auf jeder Seite zeigt, in welcher Umgebung du gerade arbeitest.",primaryButton:{label:"OPAL anfragen",onClick:()=>{var t;return(t=document.getElementById("opal-request-form"))==null?void 0:t.scrollIntoView({behavior:"smooth"})}},secondaryButton:{label:"Funktionen ansehen",href:"#features"}}),e.jsx("section",{className:"py-4 bg-background border-b",children:e.jsx("div",{className:"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",children:e.jsxs("div",{className:"flex flex-wrap items-center justify-center gap-x-8 gap-y-2 text-sm text-muted-foreground",children:[e.jsxs("span",{className:"flex items-center gap-2",children:[e.jsx(c,{className:"h-4 w-4 text-primary"}),"OXID eShop ab 7.4"]}),e.jsxs("span",{className:"flex items-center gap-2",children:[e.jsx(c,{className:"h-4 w-4 text-primary"}),"Direkt vom Plattform-Hersteller"]})]})})}),e.jsxs("section",{className:"py-20 bg-gradient-to-br from-primary to-accent relative overflow-hidden",children:[e.jsxs("div",{className:"absolute inset-0",children:[e.jsx("div",{className:"absolute top-1/4 left-1/4 w-96 h-96 bg-white/5 rounded-full blur-3xl"}),e.jsx("div",{className:"absolute bottom-1/4 right-1/4 w-64 h-64 bg-white/5 rounded-full blur-3xl"})]}),e.jsx("div",{className:"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative",children:e.jsxs(i,{animation:"fade-in-up",children:[e.jsxs("p",{className:"text-white/70 text-sm font-medium mb-3 flex items-center gap-2",children:[e.jsx(j,{className:"h-4 w-4"}),"Immer wissen, in welchem System du bist."]}),e.jsx("h2",{className:"text-3xl md:text-4xl font-bold text-white mb-6 font-alexandria",children:"Dev, Staging und Live auf einen Blick auseinanderhalten"}),e.jsx("p",{className:"text-white/90 text-lg max-w-3xl mb-8",children:"Der OXID-Administrationsbereich sieht in jeder Umgebung identisch aus – man kann leicht übersehen, auf welchem System man arbeitet. Die Admin-Umgebungsanzeige ergänzt eine dauerhaft sichtbare, farbige Kennzeichnung, damit auf einen Blick klar ist, welches System vor dir liegt."}),e.jsx(s,{size:"lg",className:"bg-white text-primary hover:bg-white/90",onClick:()=>{var t;return(t=document.getElementById("opal-request-form"))==null?void 0:t.scrollIntoView({behavior:"smooth"})},children:"Jetzt anfragen"})]})})]}),e.jsx("section",{className:"py-20 bg-background",children:e.jsxs("div",{className:"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",children:[e.jsx(i,{animation:"fade-in-up",children:e.jsx("h2",{className:"text-3xl md:text-4xl font-bold text-foreground mb-12 font-alexandria text-center",children:"Was der OPAL für dich löst"})}),e.jsx(k,{animation:"fade-in-up",staggerDelay:.15,className:"grid md:grid-cols-3 gap-8 max-w-5xl mx-auto",children:[{icon:D,text:"Auf jeder Seite des Administrationsbereichs sofort sichtbar, in welcher Umgebung du arbeitest – Development, Staging oder Live."},{icon:B,text:"Farbcodierter Header mit auffälliger Warn-Optik und frei wählbarem Namen – Grün, Orange, Blau oder eine eigene Farbe."},{icon:E,text:"Eingestellt pro Umgebung über die Konfigurationsdatei – nicht im Administrationsbereich, also nicht versehentlich überschreibbar."}].map((t,a)=>e.jsx(r,{className:"bg-card rounded-2xl border-0 shadow-[0_0_20px_rgba(0,0,0,0.12)] h-full hover:shadow-xl transition-all duration-300",children:e.jsxs(l,{className:"p-8 text-center flex flex-col items-center",children:[e.jsx("div",{className:"w-12 h-12 bg-oxid-red/10 rounded-xl flex items-center justify-center mb-5",children:e.jsx(t.icon,{className:"h-6 w-6 text-oxid-red"})}),e.jsx("p",{className:"text-foreground text-lg leading-relaxed",children:t.text})]})},a))})]})}),!u&&e.jsx("section",{className:"py-10 bg-gradient-to-b from-background from-[50%] to-background to-[50%]",children:e.jsx("div",{className:"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",children:e.jsx(i,{animation:"fade-in-up",children:e.jsxs("div",{className:"rounded-3xl bg-gradient-to-r from-primary to-accent relative overflow-hidden",children:[e.jsx("div",{className:"absolute inset-0 bg-[radial-gradient(circle_at_30%_50%,rgba(255,255,255,0.1),transparent_60%)]"}),e.jsxs("div",{className:"relative grid grid-cols-1 lg:grid-cols-2 gap-0",children:[e.jsxs("div",{className:"p-8 lg:p-12 flex flex-col justify-center",children:[e.jsx("p",{className:"text-white/70 text-sm mb-1",children:"Teil der OPAL-Familie"}),e.jsx("p",{className:"text-white font-medium max-w-xl mb-6",children:"OPALe sind Bausteine von OXID eSales: eine erprobte, solide Basis, die an deine Systemlandschaft angepasst und in deinen Shop integriert werden muss."}),e.jsx("div",{children:e.jsxs(o,{to:"/loesungen/opal",className:"h-12 px-6 rounded-2xl font-semibold border-2 border-white/70 text-white hover:bg-white/20 backdrop-blur-sm text-sm transition-all duration-300 inline-flex items-center justify-center gap-2",children:["Alle OPALe entdecken",e.jsx(m,{className:"w-4 h-4"})]})})]}),e.jsxs("div",{className:"hidden lg:block relative min-h-[240px]",children:[e.jsx("img",{src:O,alt:"OXID OPAL Module",className:"absolute inset-0 w-full h-full object-cover rounded-r-3xl",loading:"lazy"}),e.jsx("div",{className:"absolute inset-0 bg-gradient-to-r from-primary/40 via-primary/10 to-transparent roun

6ded-r-3xl"})]})]})]})})})}),e.jsx("section",{id:"features",className:"py-20 bg-background overflow-visible",children:e.jsxs("div",{className:"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 overflow-visible",children:[e.jsx(i,{animation:"fade-in-up",children:e.jsx("h2",{className:"text-3xl md:text-4xl font-bold text-foreground mb-12 font-alexandria text-center",children:"Funktionen im Überblick"})}),e.jsx(L,{featuresLeft:P,featuresRight:I,featuresBottom:[]})]})}),e.jsx("section",{className:"py-20 bg-background",children:e.jsxs("div",{className:"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",children:[e.jsx(i,{animation:"fade-in-up",children:e.jsx("h2",{className:"text-3xl md:text-4xl font-bold text-foreground mb-8 font-alexandria text-center",children:"Für wen ist der OPAL gedacht?"})}),e.jsx("div",{className:"flex flex-wrap justify-center gap-2 mb-10",children:h.map(t=>e.jsx("button",{onClick:()=>g(t.id),className:`px-4 py-2 rounded-full text-sm font-medium transition-all ${d===t.id?"bg-primary text-white shadow-lg":"bg-card text-muted-foreground hover:bg-muted shadow-[0_0_10px_rgba(0,0,0,0.08)]"}`,children:t.label},t.id))}),e.jsx("div",{className:"max-w-4xl mx-auto",children:e.jsx(r,{className:"bg-card rounded-2xl border-0 shadow-[0_0_20px_rgba(0,0,0,0.12)]",children:e.jsxs(l,{className:"p-8 md:p-10",children:[e.jsx("h3",{className:"text-2xl font-bold text-foreground font-alexandria mb-4",children:n.title}),e.jsx("p",{className:"text-muted-foreground italic mb-6",children:n.scenario}),e.jsx("h4",{className:"font-semibold text-foreground mb-3",children:"Was der OPAL hier bringt"}),e.jsx("p",{className:"text-muted-foreground mb-8",children:n.benefit}),e.jsxs(s,{onClick:()=>{var t;return(t=document.getElementById("opal-request-form"))==null?void 0:t.scrollIntoView({behavior:"smooth"})},className:"gap-2",children:[n.cta,e.jsx(m,{className:"h-4 w-4"})]})]})})})]})}),e.jsx("section",{className:"py-20 bg-secondary",children:e.jsxs("div",{className:"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",children:[e.jsx(i,{animation:"fade-in-up",children:e.jsx("h2",{className:"text-3xl md:text-4xl font-bold text-foreground mb-12 font-alexandria text-center",children:"Häufige Fragen"})}),e.jsx(i,{animation:"fade-in-up",delay:.1,children:e.jsx("div",{className:"max-w-3xl mx-auto",children:e.jsx(N,{type:"single",collapsible:!0,className:"space-y-4",children:U.map((t,a)=>e.jsxs(v,{value:`faq-${a}`,className:"bg-card rounded-2xl border-0 shadow-[0_0_20px_rgba(0,0,0,0.12)] px-6 data-[state=open]:shadow-md transition-all hover:shadow-sm",children:[e.jsx(y,{className:"font-semibold hover:no-underline py-6 text-foreground",children:t.question}),e.jsx(A,{className:"text-muted-foreground pb-6 pt-0",children:t.answer})]},a))})})})]})}),e.jsx("section",{className:"py-20 bg-background",children:e.jsxs("div",{className:"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",children:[e.jsx(i,{animation:"fade-in-up",children:e.jsx("h2",{className:"text-3xl md:text-4xl font-bold text-foreground mb-12 font-alexandria text-center",children:"Preis"})}),e.jsx(i,{animation:"fade-in-up",delay:.1,children:e.jsxs("div",{className:"max-w-sm mx-auto",children:[e.jsx(r,{className:"bg-card rounded-2xl border-0 shadow-[0_0_20px_rgba(0,0,0,0.12)]",children:e.jsx(l,{className:"p-8 text-center",children:e.jsx("p",{className:"text-4xl font-bold text-foreground font-alexandria mb-1",children:"Preis auf Anfrage"})})}),e.jsxs("p",{className:"text-sm text-muted-foreground text-center mt-4",children:["OPALe sind auch in"," ",e.jsx(o,{to:"/loesungen/opal#opal-pricing",className:"text-primary hover:underline font-medium",children:"Abonnement-Paketen"})," ","erhältlich."]})]})})]})}),e.jsx("section",{id:"opal-request-form",className:"py-20 bg-background",children:e.jsxs("div",{className:"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8",children:[e.jsx(i,{animation:"fade-in-up",children:e.jsx("div",{className:"text-center mb-10",children:e.jsx("h2",{className:"text-3xl md:text-4xl font-bold text-foreground mb-4 font-alexandria",children:"Noch Fragen?"})})}),e.jsx(S,{hideHeader:!0,interesseAn:"Admin-Umgebungsanzeige",formType:"opal-detail"})]})}),e.jsx("section",{className:"py-20 bg-gradient-to-br from-primary to-accent",children:e.jsx("div",{className:"container mx-auto px-4",children:e.jsx(i,{animation:"fade-in-up",children:e.jsxs("div",{className:"max-w-3xl mx-auto text-center",children:[e.jsx("h2",{className:"text-3xl md:text-4xl font-bold text-white mb-6 font-alexandria",children:"OPAL Admin-Umgebungsanzeige anfragen"}),e.jsx("p",{className:"text-xl text-white/90 mb-8",children:"Auf einen Blick sehen, welche Umgebung offen ist – farbig, pro System eingestellt."}),e.jsxs("div",{className:"flex flex-col sm:flex-row gap-4 justify-center",children:[e.jsxs(s,{size:"lg",className:"bg-white text-primary hover:bg-white/90 gap-2",onClick:()=>{var t;return(t=document.getElementById("opal-request-form"))==null?void 0:t.scrollIntoView({behavior:"smooth"})},children:[e.jsx(w,{className:"h-4 w-4"}),"Jetzt anfragen"]}),e.jsx(o,{to:"/loesungen/opal",children:e.jsx(s,{size:"lg",variant:"outline",className:"bg-transparent border-white/80 text-white hover:bg-white/20",children:"Zur OPAL Übersicht"})})]})]})})})})]})};export{ie as default};