\n * );\n * }\n * ```\n *\n * When the `in` prop is set to `true`, the child component will first receive\n * the class `example-enter`, then the `example-enter-active` will be added in\n * the next tick. `CSSTransition` [forces a\n * reflow](https://github.com/reactjs/react-transition-group/blob/5007303e729a74be66a21c3e2205e4916821524b/src/CSSTransition.js#L208-L215)\n * between before adding the `example-enter-active`. This is an important trick\n * because it allows us to transition between `example-enter` and\n * `example-enter-active` even though they were added immediately one after\n * another. Most notably, this is what makes it possible for us to animate\n * _appearance_.\n *\n * ```css\n * .my-node-enter {\n * opacity: 0;\n * }\n * .my-node-enter-active {\n * opacity: 1;\n * transition: opacity 200ms;\n * }\n * .my-node-exit {\n * opacity: 1;\n * }\n * .my-node-exit-active {\n * opacity: 0;\n * transition: opacity: 200ms;\n * }\n * ```\n *\n * `*-active` classes represent which styles you want to animate **to**.\n */\n\nvar CSSTransition = /*#__PURE__*/\nfunction (_React$Component) {\n _inheritsLoose(CSSTransition, _React$Component);\n function CSSTransition() {\n var _this;\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;\n _this.onEnter = function (node, appearing) {\n var _this$getClassNames = _this.getClassNames(appearing ? 'appear' : 'enter'),\n className = _this$getClassNames.className;\n _this.removeClasses(node, 'exit');\n addClass(node, className);\n if (_this.props.onEnter) {\n _this.props.onEnter(node, appearing);\n }\n };\n _this.onEntering = function (node, appearing) {\n var _this$getClassNames2 = _this.getClassNames(appearing ? 'appear' : 'enter'),\n activeClassName = _this$getClassNames2.activeClassName;\n _this.reflowAndAddClass(node, activeClassName);\n if (_this.props.onEntering) {\n _this.props.onEntering(node, appearing);\n }\n };\n _this.onEntered = function (node, appearing) {\n var appearClassName = _this.getClassNames('appear').doneClassName;\n var enterClassName = _this.getClassNames('enter').doneClassName;\n var doneClassName = appearing ? appearClassName + \" \" + enterClassName : enterClassName;\n _this.removeClasses(node, appearing ? 'appear' : 'enter');\n addClass(node, doneClassName);\n if (_this.props.onEntered) {\n _this.props.onEntered(node, appearing);\n }\n };\n _this.onExit = function (node) {\n var _this$getClassNames3 = _this.getClassNames('exit'),\n className = _this$getClassNames3.className;\n _this.removeClasses(node, 'appear');\n _this.removeClasses(node, 'enter');\n addClass(node, className);\n if (_this.props.onExit) {\n _this.props.onExit(node);\n }\n };\n _this.onExiting = function (node) {\n var _this$getClassNames4 = _this.getClassNames('exit'),\n activeClassName = _this$getClassNames4.activeClassName;\n _this.reflowAndAddClass(node, activeClassName);\n if (_this.props.onExiting) {\n _this.props.onExiting(node);\n }\n };\n _this.onExited = function (node) {\n var _this$getClassNames5 = _this.getClassNames('exit'),\n doneClassName = _this$getClassNames5.doneClassName;\n _this.removeClasses(node, 'exit');\n addClass(node, doneClassName);\n if (_this.props.onExited) {\n _this.props.onExited(node);\n }\n };\n _this.getClassNames = function (type) {\n var classNames = _this.props.classNames;\n var isStringClassNames = typeof classNames === 'string';\n var prefix = isStringClassNames && classNames ? classNames + '-' : '';\n var className = isStringClassNames ? prefix + type : classNames[type];\n var activeClassName = isStringClassNames ? className + '-active' : classNames[type + 'Active'];\n var doneClassName = isStringClassNames ? className + '-done' : classNames[type + 'Done'];\n return {\n className: className,\n activeClassName: activeClassName,\n doneClassName: doneClassName\n };\n };\n return _this;\n }\n var _proto = CSSTransition.prototype;\n _proto.removeClasses = function removeClasses(node, type) {\n var _this$getClassNames6 = this.getClassNames(type),\n className = _this$getClassNames6.className,\n activeClassName = _this$getClassNames6.activeClassName,\n doneClassName = _this$getClassNames6.doneClassName;\n className && removeClass(node, className);\n activeClassName && removeClass(node, activeClassName);\n doneClassName && removeClass(node, doneClassName);\n };\n _proto.reflowAndAddClass = function reflowAndAddClass(node, className) {\n // This is for to force a repaint,\n // which is necessary in order to transition styles when adding a class name.\n if (className) {\n /* eslint-disable no-unused-expressions */\n node && node.scrollTop;\n /* eslint-enable no-unused-expressions */\n\n addClass(node, className);\n }\n };\n _proto.render = function render() {\n var props = _extends({}, this.props);\n delete props.classNames;\n return _react.default.createElement(_Transition.default, _extends({}, props, {\n onEnter: this.onEnter,\n onEntered: this.onEntered,\n onEntering: this.onEntering,\n onExit: this.onExit,\n onExiting: this.onExiting,\n onExited: this.onExited\n }));\n };\n return CSSTransition;\n}(_react.default.Component);\nCSSTransition.defaultProps = {\n classNames: ''\n};\nCSSTransition.propTypes = process.env.NODE_ENV !== \"production\" ? _extends({}, _Transition.default.propTypes, {\n /**\n * The animation classNames applied to the component as it enters, exits or\n * has finished the transition. A single name can be provided and it will be\n * suffixed for each stage: e.g.\n *\n * `classNames=\"fade\"` applies `fade-enter`, `fade-enter-active`,\n * `fade-enter-done`, `fade-exit`, `fade-exit-active`, `fade-exit-done`,\n * `fade-appear`, `fade-appear-active`, and `fade-appear-done`.\n *\n * **Note**: `fade-appear-done` and `fade-enter-done` will _both_ be applied.\n * This allows you to define different behavior for when appearing is done and\n * when regular entering is done, using selectors like\n * `.fade-enter-done:not(.fade-appear-done)`. For example, you could apply an\n * epic entrance animation when element first appears in the DOM using\n * [Animate.css](https://daneden.github.io/animate.css/). Otherwise you can\n * simply use `fade-enter-done` for defining both cases.\n *\n * Each individual classNames can also be specified independently like:\n *\n * ```js\n * classNames={{\n * appear: 'my-appear',\n * appearActive: 'my-active-appear',\n * appearDone: 'my-done-appear',\n * enter: 'my-enter',\n * enterActive: 'my-active-enter',\n * enterDone: 'my-done-enter',\n * exit: 'my-exit',\n * exitActive: 'my-active-exit',\n * exitDone: 'my-done-exit',\n * }}\n * ```\n *\n * If you want to set these classes using CSS Modules:\n *\n * ```js\n * import styles from './styles.css';\n * ```\n *\n * you might want to use camelCase in your CSS file, that way could simply\n * spread them instead of listing them one by one:\n *\n * ```js\n * classNames={{ ...styles }}\n * ```\n *\n * @type {string | {\n * appear?: string,\n * appearActive?: string,\n * appearDone?: string,\n * enter?: string,\n * enterActive?: string,\n * enterDone?: string,\n * exit?: string,\n * exitActive?: string,\n * exitDone?: string,\n * }}\n */\n classNames: _PropTypes.classNamesShape,\n /**\n * A `` callback fired immediately after the 'enter' or 'appear' class is\n * applied.\n *\n * @type Function(node: HtmlElement, isAppearing: bool)\n */\n onEnter: PropTypes.func,\n /**\n * A `` callback fired immediately after the 'enter-active' or\n * 'appear-active' class is applied.\n *\n * @type Function(node: HtmlElement, isAppearing: bool)\n */\n onEntering: PropTypes.func,\n /**\n * A `` callback fired immediately after the 'enter' or\n * 'appear' classes are **removed** and the `done` class is added to the DOM node.\n *\n * @type Function(node: HtmlElement, isAppearing: bool)\n */\n onEntered: PropTypes.func,\n /**\n * A `` callback fired immediately after the 'exit' class is\n * applied.\n *\n * @type Function(node: HtmlElement)\n */\n onExit: PropTypes.func,\n /**\n * A `` callback fired immediately after the 'exit-active' is applied.\n *\n * @type Function(node: HtmlElement)\n */\n onExiting: PropTypes.func,\n /**\n * A `` callback fired immediately after the 'exit' classes\n * are **removed** and the `exit-done` class is added to the DOM node.\n *\n * @type Function(node: HtmlElement)\n */\n onExited: PropTypes.func\n}) : {};\nvar _default = CSSTransition;\nexports.default = _default;\nmodule.exports = exports[\"default\"];","\"use strict\";\n\nexports.__esModule = true;\nexports.default = void 0;\nvar _propTypes = _interopRequireDefault(require(\"prop-types\"));\nvar _react = _interopRequireDefault(require(\"react\"));\nvar _reactDom = require(\"react-dom\");\nvar _TransitionGroup = _interopRequireDefault(require(\"./TransitionGroup\"));\nfunction _interopRequireDefault(obj) {\n return obj && obj.__esModule ? obj : {\n default: obj\n };\n}\nfunction _objectWithoutPropertiesLoose(source, excluded) {\n if (source == null) return {};\n var target = {};\n var sourceKeys = Object.keys(source);\n var key, i;\n for (i = 0; i < sourceKeys.length; i++) {\n key = sourceKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n target[key] = source[key];\n }\n return target;\n}\nfunction _inheritsLoose(subClass, superClass) {\n subClass.prototype = Object.create(superClass.prototype);\n subClass.prototype.constructor = subClass;\n subClass.__proto__ = superClass;\n}\n\n/**\n * The `` component is a specialized `Transition` component\n * that animates between two children.\n *\n * ```jsx\n * \n *
I appear first
\n *
I replace the above
\n * \n * ```\n */\nvar ReplaceTransition = /*#__PURE__*/\nfunction (_React$Component) {\n _inheritsLoose(ReplaceTransition, _React$Component);\n function ReplaceTransition() {\n var _this;\n for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {\n _args[_key] = arguments[_key];\n }\n _this = _React$Component.call.apply(_React$Component, [this].concat(_args)) || this;\n _this.handleEnter = function () {\n for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {\n args[_key2] = arguments[_key2];\n }\n return _this.handleLifecycle('onEnter', 0, args);\n };\n _this.handleEntering = function () {\n for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {\n args[_key3] = arguments[_key3];\n }\n return _this.handleLifecycle('onEntering', 0, args);\n };\n _this.handleEntered = function () {\n for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {\n args[_key4] = arguments[_key4];\n }\n return _this.handleLifecycle('onEntered', 0, args);\n };\n _this.handleExit = function () {\n for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {\n args[_key5] = arguments[_key5];\n }\n return _this.handleLifecycle('onExit', 1, args);\n };\n _this.handleExiting = function () {\n for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {\n args[_key6] = arguments[_key6];\n }\n return _this.handleLifecycle('onExiting', 1, args);\n };\n _this.handleExited = function () {\n for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {\n args[_key7] = arguments[_key7];\n }\n return _this.handleLifecycle('onExited', 1, args);\n };\n return _this;\n }\n var _proto = ReplaceTransition.prototype;\n _proto.handleLifecycle = function handleLifecycle(handler, idx, originalArgs) {\n var _child$props;\n var children = this.props.children;\n var child = _react.default.Children.toArray(children)[idx];\n if (child.props[handler]) (_child$props = child.props)[handler].apply(_child$props, originalArgs);\n if (this.props[handler]) this.props[handler]((0, _reactDom.findDOMNode)(this));\n };\n _proto.render = function render() {\n var _this$props = this.props,\n children = _this$props.children,\n inProp = _this$props.in,\n props = _objectWithoutPropertiesLoose(_this$props, [\"children\", \"in\"]);\n var _React$Children$toArr = _react.default.Children.toArray(children),\n first = _React$Children$toArr[0],\n second = _React$Children$toArr[1];\n delete props.onEnter;\n delete props.onEntering;\n delete props.onEntered;\n delete props.onExit;\n delete props.onExiting;\n delete props.onExited;\n return _react.default.createElement(_TransitionGroup.default, props, inProp ? _react.default.cloneElement(first, {\n key: 'first',\n onEnter: this.handleEnter,\n onEntering: this.handleEntering,\n onEntered: this.handleEntered\n }) : _react.default.cloneElement(second, {\n key: 'second',\n onEnter: this.handleExit,\n onEntering: this.handleExiting,\n onEntered: this.handleExited\n }));\n };\n return ReplaceTransition;\n}(_react.default.Component);\nReplaceTransition.propTypes = process.env.NODE_ENV !== \"production\" ? {\n in: _propTypes.default.bool.isRequired,\n children: function children(props, propName) {\n if (_react.default.Children.count(props[propName]) !== 2) return new Error(\"\\\"\" + propName + \"\\\" must be exactly two transition components.\");\n return null;\n }\n} : {};\nvar _default = ReplaceTransition;\nexports.default = _default;\nmodule.exports = exports[\"default\"];","\"use strict\";\n\nexports.__esModule = true;\nexports.default = exports.EXITING = exports.ENTERED = exports.ENTERING = exports.EXITED = exports.UNMOUNTED = void 0;\nvar PropTypes = _interopRequireWildcard(require(\"prop-types\"));\nvar _react = _interopRequireDefault(require(\"react\"));\nvar _reactDom = _interopRequireDefault(require(\"react-dom\"));\nvar _reactLifecyclesCompat = require(\"react-lifecycles-compat\");\nvar _PropTypes = require(\"./utils/PropTypes\");\nfunction _interopRequireDefault(obj) {\n return obj && obj.__esModule ? obj : {\n default: obj\n };\n}\nfunction _interopRequireWildcard(obj) {\n if (obj && obj.__esModule) {\n return obj;\n } else {\n var newObj = {};\n if (obj != null) {\n for (var key in obj) {\n if (Object.prototype.hasOwnProperty.call(obj, key)) {\n var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {};\n if (desc.get || desc.set) {\n Object.defineProperty(newObj, key, desc);\n } else {\n newObj[key] = obj[key];\n }\n }\n }\n }\n newObj.default = obj;\n return newObj;\n }\n}\nfunction _objectWithoutPropertiesLoose(source, excluded) {\n if (source == null) return {};\n var target = {};\n var sourceKeys = Object.keys(source);\n var key, i;\n for (i = 0; i < sourceKeys.length; i++) {\n key = sourceKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n target[key] = source[key];\n }\n return target;\n}\nfunction _inheritsLoose(subClass, superClass) {\n subClass.prototype = Object.create(superClass.prototype);\n subClass.prototype.constructor = subClass;\n subClass.__proto__ = superClass;\n}\nvar UNMOUNTED = 'unmounted';\nexports.UNMOUNTED = UNMOUNTED;\nvar EXITED = 'exited';\nexports.EXITED = EXITED;\nvar ENTERING = 'entering';\nexports.ENTERING = ENTERING;\nvar ENTERED = 'entered';\nexports.ENTERED = ENTERED;\nvar EXITING = 'exiting';\n/**\n * The Transition component lets you describe a transition from one component\n * state to another _over time_ with a simple declarative API. Most commonly\n * it's used to animate the mounting and unmounting of a component, but can also\n * be used to describe in-place transition states as well.\n *\n * ---\n *\n * **Note**: `Transition` is a platform-agnostic base component. If you're using\n * transitions in CSS, you'll probably want to use\n * [`CSSTransition`](https://reactcommunity.org/react-transition-group/css-transition)\n * instead. It inherits all the features of `Transition`, but contains\n * additional features necessary to play nice with CSS transitions (hence the\n * name of the component).\n *\n * ---\n *\n * By default the `Transition` component does not alter the behavior of the\n * component it renders, it only tracks \"enter\" and \"exit\" states for the\n * components. It's up to you to give meaning and effect to those states. For\n * example we can add styles to a component when it enters or exits:\n *\n * ```jsx\n * import { Transition } from 'react-transition-group';\n *\n * const duration = 300;\n *\n * const defaultStyle = {\n * transition: `opacity ${duration}ms ease-in-out`,\n * opacity: 0,\n * }\n *\n * const transitionStyles = {\n * entering: { opacity: 0 },\n * entered: { opacity: 1 },\n * };\n *\n * const Fade = ({ in: inProp }) => (\n * \n * {state => (\n *
\n * I'm a fade Transition!\n *
\n * )}\n * \n * );\n * ```\n *\n * There are 4 main states a Transition can be in:\n * - `'entering'`\n * - `'entered'`\n * - `'exiting'`\n * - `'exited'`\n *\n * Transition state is toggled via the `in` prop. When `true` the component\n * begins the \"Enter\" stage. During this stage, the component will shift from\n * its current transition state, to `'entering'` for the duration of the\n * transition and then to the `'entered'` stage once it's complete. Let's take\n * the following example (we'll use the\n * [useState](https://reactjs.org/docs/hooks-reference.html#usestate) hook):\n *\n * ```jsx\n * function App() {\n * const [inProp, setInProp] = useState(false);\n * return (\n *
\n * );\n * }\n * ```\n *\n * When the button is clicked the component will shift to the `'entering'` state\n * and stay there for 500ms (the value of `timeout`) before it finally switches\n * to `'entered'`.\n *\n * When `in` is `false` the same thing happens except the state moves from\n * `'exiting'` to `'exited'`.\n */\n\nexports.EXITING = EXITING;\nvar Transition = /*#__PURE__*/\nfunction (_React$Component) {\n _inheritsLoose(Transition, _React$Component);\n function Transition(props, context) {\n var _this;\n _this = _React$Component.call(this, props, context) || this;\n var parentGroup = context.transitionGroup; // In the context of a TransitionGroup all enters are really appears\n\n var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;\n var initialStatus;\n _this.appearStatus = null;\n if (props.in) {\n if (appear) {\n initialStatus = EXITED;\n _this.appearStatus = ENTERING;\n } else {\n initialStatus = ENTERED;\n }\n } else {\n if (props.unmountOnExit || props.mountOnEnter) {\n initialStatus = UNMOUNTED;\n } else {\n initialStatus = EXITED;\n }\n }\n _this.state = {\n status: initialStatus\n };\n _this.nextCallback = null;\n return _this;\n }\n var _proto = Transition.prototype;\n _proto.getChildContext = function getChildContext() {\n return {\n transitionGroup: null // allows for nested Transitions\n };\n };\n Transition.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {\n var nextIn = _ref.in;\n if (nextIn && prevState.status === UNMOUNTED) {\n return {\n status: EXITED\n };\n }\n return null;\n }; // getSnapshotBeforeUpdate(prevProps) {\n // let nextStatus = null\n // if (prevProps !== this.props) {\n // const { status } = this.state\n // if (this.props.in) {\n // if (status !== ENTERING && status !== ENTERED) {\n // nextStatus = ENTERING\n // }\n // } else {\n // if (status === ENTERING || status === ENTERED) {\n // nextStatus = EXITING\n // }\n // }\n // }\n // return { nextStatus }\n // }\n\n _proto.componentDidMount = function componentDidMount() {\n this.updateStatus(true, this.appearStatus);\n };\n _proto.componentDidUpdate = function componentDidUpdate(prevProps) {\n var nextStatus = null;\n if (prevProps !== this.props) {\n var status = this.state.status;\n if (this.props.in) {\n if (status !== ENTERING && status !== ENTERED) {\n nextStatus = ENTERING;\n }\n } else {\n if (status === ENTERING || status === ENTERED) {\n nextStatus = EXITING;\n }\n }\n }\n this.updateStatus(false, nextStatus);\n };\n _proto.componentWillUnmount = function componentWillUnmount() {\n this.cancelNextCallback();\n };\n _proto.getTimeouts = function getTimeouts() {\n var timeout = this.props.timeout;\n var exit, enter, appear;\n exit = enter = appear = timeout;\n if (timeout != null && typeof timeout !== 'number') {\n exit = timeout.exit;\n enter = timeout.enter; // TODO: remove fallback for next major\n\n appear = timeout.appear !== undefined ? timeout.appear : enter;\n }\n return {\n exit: exit,\n enter: enter,\n appear: appear\n };\n };\n _proto.updateStatus = function updateStatus(mounting, nextStatus) {\n if (mounting === void 0) {\n mounting = false;\n }\n if (nextStatus !== null) {\n // nextStatus will always be ENTERING or EXITING.\n this.cancelNextCallback();\n var node = _reactDom.default.findDOMNode(this);\n if (nextStatus === ENTERING) {\n this.performEnter(node, mounting);\n } else {\n this.performExit(node);\n }\n } else if (this.props.unmountOnExit && this.state.status === EXITED) {\n this.setState({\n status: UNMOUNTED\n });\n }\n };\n _proto.performEnter = function performEnter(node, mounting) {\n var _this2 = this;\n var enter = this.props.enter;\n var appearing = this.context.transitionGroup ? this.context.transitionGroup.isMounting : mounting;\n var timeouts = this.getTimeouts();\n var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED\n // if we are mounting and running this it means appear _must_ be set\n\n if (!mounting && !enter) {\n this.safeSetState({\n status: ENTERED\n }, function () {\n _this2.props.onEntered(node);\n });\n return;\n }\n this.props.onEnter(node, appearing);\n this.safeSetState({\n status: ENTERING\n }, function () {\n _this2.props.onEntering(node, appearing);\n _this2.onTransitionEnd(node, enterTimeout, function () {\n _this2.safeSetState({\n status: ENTERED\n }, function () {\n _this2.props.onEntered(node, appearing);\n });\n });\n });\n };\n _proto.performExit = function performExit(node) {\n var _this3 = this;\n var exit = this.props.exit;\n var timeouts = this.getTimeouts(); // no exit animation skip right to EXITED\n\n if (!exit) {\n this.safeSetState({\n status: EXITED\n }, function () {\n _this3.props.onExited(node);\n });\n return;\n }\n this.props.onExit(node);\n this.safeSetState({\n status: EXITING\n }, function () {\n _this3.props.onExiting(node);\n _this3.onTransitionEnd(node, timeouts.exit, function () {\n _this3.safeSetState({\n status: EXITED\n }, function () {\n _this3.props.onExited(node);\n });\n });\n });\n };\n _proto.cancelNextCallback = function cancelNextCallback() {\n if (this.nextCallback !== null) {\n this.nextCallback.cancel();\n this.nextCallback = null;\n }\n };\n _proto.safeSetState = function safeSetState(nextState, callback) {\n // This shouldn't be necessary, but there are weird race conditions with\n // setState callbacks and unmounting in testing, so always make sure that\n // we can cancel any pending setState callbacks after we unmount.\n callback = this.setNextCallback(callback);\n this.setState(nextState, callback);\n };\n _proto.setNextCallback = function setNextCallback(callback) {\n var _this4 = this;\n var active = true;\n this.nextCallback = function (event) {\n if (active) {\n active = false;\n _this4.nextCallback = null;\n callback(event);\n }\n };\n this.nextCallback.cancel = function () {\n active = false;\n };\n return this.nextCallback;\n };\n _proto.onTransitionEnd = function onTransitionEnd(node, timeout, handler) {\n this.setNextCallback(handler);\n var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;\n if (!node || doesNotHaveTimeoutOrListener) {\n setTimeout(this.nextCallback, 0);\n return;\n }\n if (this.props.addEndListener) {\n this.props.addEndListener(node, this.nextCallback);\n }\n if (timeout != null) {\n setTimeout(this.nextCallback, timeout);\n }\n };\n _proto.render = function render() {\n var status = this.state.status;\n if (status === UNMOUNTED) {\n return null;\n }\n var _this$props = this.props,\n children = _this$props.children,\n childProps = _objectWithoutPropertiesLoose(_this$props, [\"children\"]); // filter props for Transtition\n\n delete childProps.in;\n delete childProps.mountOnEnter;\n delete childProps.unmountOnExit;\n delete childProps.appear;\n delete childProps.enter;\n delete childProps.exit;\n delete childProps.timeout;\n delete childProps.addEndListener;\n delete childProps.onEnter;\n delete childProps.onEntering;\n delete childProps.onEntered;\n delete childProps.onExit;\n delete childProps.onExiting;\n delete childProps.onExited;\n if (typeof children === 'function') {\n return children(status, childProps);\n }\n var child = _react.default.Children.only(children);\n return _react.default.cloneElement(child, childProps);\n };\n return Transition;\n}(_react.default.Component);\nTransition.contextTypes = {\n transitionGroup: PropTypes.object\n};\nTransition.childContextTypes = {\n transitionGroup: function transitionGroup() {}\n};\nTransition.propTypes = process.env.NODE_ENV !== \"production\" ? {\n /**\n * A `function` child can be used instead of a React element. This function is\n * called with the current transition status (`'entering'`, `'entered'`,\n * `'exiting'`, `'exited'`, `'unmounted'`), which can be used to apply context\n * specific props to a component.\n *\n * ```jsx\n * \n * {state => (\n * \n * )}\n * \n * ```\n */\n children: PropTypes.oneOfType([PropTypes.func.isRequired, PropTypes.element.isRequired]).isRequired,\n /**\n * Show the component; triggers the enter or exit states\n */\n in: PropTypes.bool,\n /**\n * By default the child component is mounted immediately along with\n * the parent `Transition` component. If you want to \"lazy mount\" the component on the\n * first `in={true}` you can set `mountOnEnter`. After the first enter transition the component will stay\n * mounted, even on \"exited\", unless you also specify `unmountOnExit`.\n */\n mountOnEnter: PropTypes.bool,\n /**\n * By default the child component stays mounted after it reaches the `'exited'` state.\n * Set `unmountOnExit` if you'd prefer to unmount the component after it finishes exiting.\n */\n unmountOnExit: PropTypes.bool,\n /**\n * Normally a component is not transitioned if it is shown when the `` component mounts.\n * If you want to transition on the first mount set `appear` to `true`, and the\n * component will transition in as soon as the `` mounts.\n *\n * > Note: there are no specific \"appear\" states. `appear` only adds an additional `enter` transition.\n */\n appear: PropTypes.bool,\n /**\n * Enable or disable enter transitions.\n */\n enter: PropTypes.bool,\n /**\n * Enable or disable exit transitions.\n */\n exit: PropTypes.bool,\n /**\n * The duration of the transition, in milliseconds.\n * Required unless `addEndListener` is provided.\n *\n * You may specify a single timeout for all transitions:\n *\n * ```jsx\n * timeout={500}\n * ```\n *\n * or individually:\n *\n * ```jsx\n * timeout={{\n * appear: 500,\n * enter: 300,\n * exit: 500,\n * }}\n * ```\n *\n * - `appear` defaults to the value of `enter`\n * - `enter` defaults to `0`\n * - `exit` defaults to `0`\n *\n * @type {number | { enter?: number, exit?: number, appear?: number }}\n */\n timeout: function timeout(props) {\n var pt = _PropTypes.timeoutsShape;\n if (!props.addEndListener) pt = pt.isRequired;\n for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n args[_key - 1] = arguments[_key];\n }\n return pt.apply(void 0, [props].concat(args));\n },\n /**\n * Add a custom transition end trigger. Called with the transitioning\n * DOM node and a `done` callback. Allows for more fine grained transition end\n * logic. **Note:** Timeouts are still used as a fallback if provided.\n *\n * ```jsx\n * addEndListener={(node, done) => {\n * // use the css transitionend event to mark the finish of a transition\n * node.addEventListener('transitionend', done, false);\n * }}\n * ```\n */\n addEndListener: PropTypes.func,\n /**\n * Callback fired before the \"entering\" status is applied. An extra parameter\n * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount\n *\n * @type Function(node: HtmlElement, isAppearing: bool) -> void\n */\n onEnter: PropTypes.func,\n /**\n * Callback fired after the \"entering\" status is applied. An extra parameter\n * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount\n *\n * @type Function(node: HtmlElement, isAppearing: bool)\n */\n onEntering: PropTypes.func,\n /**\n * Callback fired after the \"entered\" status is applied. An extra parameter\n * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount\n *\n * @type Function(node: HtmlElement, isAppearing: bool) -> void\n */\n onEntered: PropTypes.func,\n /**\n * Callback fired before the \"exiting\" status is applied.\n *\n * @type Function(node: HtmlElement) -> void\n */\n onExit: PropTypes.func,\n /**\n * Callback fired after the \"exiting\" status is applied.\n *\n * @type Function(node: HtmlElement) -> void\n */\n onExiting: PropTypes.func,\n /**\n * Callback fired after the \"exited\" status is applied.\n *\n * @type Function(node: HtmlElement) -> void\n */\n onExited: PropTypes.func // Name the function so it is clearer in the documentation\n} : {};\nfunction noop() {}\nTransition.defaultProps = {\n in: false,\n mountOnEnter: false,\n unmountOnExit: false,\n appear: false,\n enter: true,\n exit: true,\n onEnter: noop,\n onEntering: noop,\n onEntered: noop,\n onExit: noop,\n onExiting: noop,\n onExited: noop\n};\nTransition.UNMOUNTED = 0;\nTransition.EXITED = 1;\nTransition.ENTERING = 2;\nTransition.ENTERED = 3;\nTransition.EXITING = 4;\nvar _default = (0, _reactLifecyclesCompat.polyfill)(Transition);\nexports.default = _default;","\"use strict\";\n\nexports.__esModule = true;\nexports.default = void 0;\nvar _propTypes = _interopRequireDefault(require(\"prop-types\"));\nvar _react = _interopRequireDefault(require(\"react\"));\nvar _reactLifecyclesCompat = require(\"react-lifecycles-compat\");\nvar _ChildMapping = require(\"./utils/ChildMapping\");\nfunction _interopRequireDefault(obj) {\n return obj && obj.__esModule ? obj : {\n default: obj\n };\n}\nfunction _objectWithoutPropertiesLoose(source, excluded) {\n if (source == null) return {};\n var target = {};\n var sourceKeys = Object.keys(source);\n var key, i;\n for (i = 0; i < sourceKeys.length; i++) {\n key = sourceKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n target[key] = source[key];\n }\n return target;\n}\nfunction _extends() {\n _extends = Object.assign || function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n return target;\n };\n return _extends.apply(this, arguments);\n}\nfunction _inheritsLoose(subClass, superClass) {\n subClass.prototype = Object.create(superClass.prototype);\n subClass.prototype.constructor = subClass;\n subClass.__proto__ = superClass;\n}\nfunction _assertThisInitialized(self) {\n if (self === void 0) {\n throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n }\n return self;\n}\nvar values = Object.values || function (obj) {\n return Object.keys(obj).map(function (k) {\n return obj[k];\n });\n};\nvar defaultProps = {\n component: 'div',\n childFactory: function childFactory(child) {\n return child;\n }\n /**\n * The `` component manages a set of transition components\n * (`` and ``) in a list. Like with the transition\n * components, `` is a state machine for managing the mounting\n * and unmounting of components over time.\n *\n * Consider the example below. As items are removed or added to the TodoList the\n * `in` prop is toggled automatically by the ``.\n *\n * Note that `` does not define any animation behavior!\n * Exactly _how_ a list item animates is up to the individual transition\n * component. This means you can mix and match animations across different list\n * items.\n */\n};\nvar TransitionGroup = /*#__PURE__*/\nfunction (_React$Component) {\n _inheritsLoose(TransitionGroup, _React$Component);\n function TransitionGroup(props, context) {\n var _this;\n _this = _React$Component.call(this, props, context) || this;\n var handleExited = _this.handleExited.bind(_assertThisInitialized(_assertThisInitialized(_this))); // Initial children should all be entering, dependent on appear\n\n _this.state = {\n handleExited: handleExited,\n firstRender: true\n };\n return _this;\n }\n var _proto = TransitionGroup.prototype;\n _proto.getChildContext = function getChildContext() {\n return {\n transitionGroup: {\n isMounting: !this.appeared\n }\n };\n };\n _proto.componentDidMount = function componentDidMount() {\n this.appeared = true;\n this.mounted = true;\n };\n _proto.componentWillUnmount = function componentWillUnmount() {\n this.mounted = false;\n };\n TransitionGroup.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, _ref) {\n var prevChildMapping = _ref.children,\n handleExited = _ref.handleExited,\n firstRender = _ref.firstRender;\n return {\n children: firstRender ? (0, _ChildMapping.getInitialChildMapping)(nextProps, handleExited) : (0, _ChildMapping.getNextChildMapping)(nextProps, prevChildMapping, handleExited),\n firstRender: false\n };\n };\n _proto.handleExited = function handleExited(child, node) {\n var currentChildMapping = (0, _ChildMapping.getChildMapping)(this.props.children);\n if (child.key in currentChildMapping) return;\n if (child.props.onExited) {\n child.props.onExited(node);\n }\n if (this.mounted) {\n this.setState(function (state) {\n var children = _extends({}, state.children);\n delete children[child.key];\n return {\n children: children\n };\n });\n }\n };\n _proto.render = function render() {\n var _this$props = this.props,\n Component = _this$props.component,\n childFactory = _this$props.childFactory,\n props = _objectWithoutPropertiesLoose(_this$props, [\"component\", \"childFactory\"]);\n var children = values(this.state.children).map(childFactory);\n delete props.appear;\n delete props.enter;\n delete props.exit;\n if (Component === null) {\n return children;\n }\n return _react.default.createElement(Component, props, children);\n };\n return TransitionGroup;\n}(_react.default.Component);\nTransitionGroup.childContextTypes = {\n transitionGroup: _propTypes.default.object.isRequired\n};\nTransitionGroup.propTypes = process.env.NODE_ENV !== \"production\" ? {\n /**\n * `` renders a `
` by default. You can change this\n * behavior by providing a `component` prop.\n * If you use React v16+ and would like to avoid a wrapping `
` element\n * you can pass in `component={null}`. This is useful if the wrapping div\n * borks your css styles.\n */\n component: _propTypes.default.any,\n /**\n * A set of `` components, that are toggled `in` and out as they\n * leave. the `` will inject specific transition props, so\n * remember to spread them through if you are wrapping the `` as\n * with our `` example.\n *\n * While this component is meant for multiple `Transition` or `CSSTransition`\n * children, sometimes you may want to have a single transition child with\n * content that you want to be transitioned out and in when you change it\n * (e.g. routes, images etc.) In that case you can change the `key` prop of\n * the transition child as you change its content, this will cause\n * `TransitionGroup` to transition the child out and back in.\n */\n children: _propTypes.default.node,\n /**\n * A convenience prop that enables or disables appear animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n appear: _propTypes.default.bool,\n /**\n * A convenience prop that enables or disables enter animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n enter: _propTypes.default.bool,\n /**\n * A convenience prop that enables or disables exit animations\n * for all children. Note that specifying this will override any defaults set\n * on individual children Transitions.\n */\n exit: _propTypes.default.bool,\n /**\n * You may need to apply reactive updates to a child as it is exiting.\n * This is generally done by using `cloneElement` however in the case of an exiting\n * child the element has already been removed and not accessible to the consumer.\n *\n * If you do need to update a child as it leaves you can provide a `childFactory`\n * to wrap every child, even the ones that are leaving.\n *\n * @type Function(child: ReactElement) -> ReactElement\n */\n childFactory: _propTypes.default.func\n} : {};\nTransitionGroup.defaultProps = defaultProps;\nvar _default = (0, _reactLifecyclesCompat.polyfill)(TransitionGroup);\nexports.default = _default;\nmodule.exports = exports[\"default\"];","\"use strict\";\n\nvar _CSSTransition = _interopRequireDefault(require(\"./CSSTransition\"));\nvar _ReplaceTransition = _interopRequireDefault(require(\"./ReplaceTransition\"));\nvar _TransitionGroup = _interopRequireDefault(require(\"./TransitionGroup\"));\nvar _Transition = _interopRequireDefault(require(\"./Transition\"));\nfunction _interopRequireDefault(obj) {\n return obj && obj.__esModule ? obj : {\n default: obj\n };\n}\nmodule.exports = {\n Transition: _Transition.default,\n TransitionGroup: _TransitionGroup.default,\n ReplaceTransition: _ReplaceTransition.default,\n CSSTransition: _CSSTransition.default\n};","\"use strict\";\n\nexports.__esModule = true;\nexports.getChildMapping = getChildMapping;\nexports.mergeChildMappings = mergeChildMappings;\nexports.getInitialChildMapping = getInitialChildMapping;\nexports.getNextChildMapping = getNextChildMapping;\nvar _react = require(\"react\");\n\n/**\n * Given `this.props.children`, return an object mapping key to child.\n *\n * @param {*} children `this.props.children`\n * @return {object} Mapping of key to child\n */\nfunction getChildMapping(children, mapFn) {\n var mapper = function mapper(child) {\n return mapFn && (0, _react.isValidElement)(child) ? mapFn(child) : child;\n };\n var result = Object.create(null);\n if (children) _react.Children.map(children, function (c) {\n return c;\n }).forEach(function (child) {\n // run the map function here instead so that the key is the computed one\n result[child.key] = mapper(child);\n });\n return result;\n}\n/**\n * When you're adding or removing children some may be added or removed in the\n * same render pass. We want to show *both* since we want to simultaneously\n * animate elements in and out. This function takes a previous set of keys\n * and a new set of keys and merges them with its best guess of the correct\n * ordering. In the future we may expose some of the utilities in\n * ReactMultiChild to make this easy, but for now React itself does not\n * directly have this concept of the union of prevChildren and nextChildren\n * so we implement it here.\n *\n * @param {object} prev prev children as returned from\n * `ReactTransitionChildMapping.getChildMapping()`.\n * @param {object} next next children as returned from\n * `ReactTransitionChildMapping.getChildMapping()`.\n * @return {object} a key set that contains all keys in `prev` and all keys\n * in `next` in a reasonable order.\n */\n\nfunction mergeChildMappings(prev, next) {\n prev = prev || {};\n next = next || {};\n function getValueForKey(key) {\n return key in next ? next[key] : prev[key];\n } // For each key of `next`, the list of keys to insert before that key in\n // the combined list\n\n var nextKeysPending = Object.create(null);\n var pendingKeys = [];\n for (var prevKey in prev) {\n if (prevKey in next) {\n if (pendingKeys.length) {\n nextKeysPending[prevKey] = pendingKeys;\n pendingKeys = [];\n }\n } else {\n pendingKeys.push(prevKey);\n }\n }\n var i;\n var childMapping = {};\n for (var nextKey in next) {\n if (nextKeysPending[nextKey]) {\n for (i = 0; i < nextKeysPending[nextKey].length; i++) {\n var pendingNextKey = nextKeysPending[nextKey][i];\n childMapping[nextKeysPending[nextKey][i]] = getValueForKey(pendingNextKey);\n }\n }\n childMapping[nextKey] = getValueForKey(nextKey);\n } // Finally, add the keys which didn't appear before any key in `next`\n\n for (i = 0; i < pendingKeys.length; i++) {\n childMapping[pendingKeys[i]] = getValueForKey(pendingKeys[i]);\n }\n return childMapping;\n}\nfunction getProp(child, prop, props) {\n return props[prop] != null ? props[prop] : child.props[prop];\n}\nfunction getInitialChildMapping(props, onExited) {\n return getChildMapping(props.children, function (child) {\n return (0, _react.cloneElement)(child, {\n onExited: onExited.bind(null, child),\n in: true,\n appear: getProp(child, 'appear', props),\n enter: getProp(child, 'enter', props),\n exit: getProp(child, 'exit', props)\n });\n });\n}\nfunction getNextChildMapping(nextProps, prevChildMapping, onExited) {\n var nextChildMapping = getChildMapping(nextProps.children);\n var children = mergeChildMappings(prevChildMapping, nextChildMapping);\n Object.keys(children).forEach(function (key) {\n var child = children[key];\n if (!(0, _react.isValidElement)(child)) return;\n var hasPrev = (key in prevChildMapping);\n var hasNext = (key in nextChildMapping);\n var prevChild = prevChildMapping[key];\n var isLeaving = (0, _react.isValidElement)(prevChild) && !prevChild.props.in; // item is new (entering)\n\n if (hasNext && (!hasPrev || isLeaving)) {\n // console.log('entering', key)\n children[key] = (0, _react.cloneElement)(child, {\n onExited: onExited.bind(null, child),\n in: true,\n exit: getProp(child, 'exit', nextProps),\n enter: getProp(child, 'enter', nextProps)\n });\n } else if (!hasNext && hasPrev && !isLeaving) {\n // item is old (exiting)\n // console.log('leaving', key)\n children[key] = (0, _react.cloneElement)(child, {\n in: false\n });\n } else if (hasNext && hasPrev && (0, _react.isValidElement)(prevChild)) {\n // item hasn't changed transition states\n // copy over the last transition props;\n // console.log('unchanged', key)\n children[key] = (0, _react.cloneElement)(child, {\n onExited: onExited.bind(null, child),\n in: prevChild.props.in,\n exit: getProp(child, 'exit', nextProps),\n enter: getProp(child, 'enter', nextProps)\n });\n }\n });\n return children;\n}","\"use strict\";\n\nexports.__esModule = true;\nexports.classNamesShape = exports.timeoutsShape = void 0;\nvar _propTypes = _interopRequireDefault(require(\"prop-types\"));\nfunction _interopRequireDefault(obj) {\n return obj && obj.__esModule ? obj : {\n default: obj\n };\n}\nvar timeoutsShape = process.env.NODE_ENV !== 'production' ? _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({\n enter: _propTypes.default.number,\n exit: _propTypes.default.number,\n appear: _propTypes.default.number\n}).isRequired]) : null;\nexports.timeoutsShape = timeoutsShape;\nvar classNamesShape = process.env.NODE_ENV !== 'production' ? _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.shape({\n enter: _propTypes.default.string,\n exit: _propTypes.default.string,\n active: _propTypes.default.string\n}), _propTypes.default.shape({\n enter: _propTypes.default.string,\n enterDone: _propTypes.default.string,\n enterActive: _propTypes.default.string,\n exit: _propTypes.default.string,\n exitDone: _propTypes.default.string,\n exitActive: _propTypes.default.string\n})]) : null;\nexports.classNamesShape = classNamesShape;","//\n\nmodule.exports = function shallowEqual(objA, objB, compare, compareContext) {\n var ret = compare ? compare.call(compareContext, objA, objB) : void 0;\n if (ret !== void 0) {\n return !!ret;\n }\n if (objA === objB) {\n return true;\n }\n if (typeof objA !== \"object\" || !objA || typeof objB !== \"object\" || !objB) {\n return false;\n }\n var keysA = Object.keys(objA);\n var keysB = Object.keys(objB);\n if (keysA.length !== keysB.length) {\n return false;\n }\n var bHasOwnProperty = Object.prototype.hasOwnProperty.bind(objB);\n\n // Test for A's keys different from B.\n for (var idx = 0; idx < keysA.length; idx++) {\n var key = keysA[idx];\n if (!bHasOwnProperty(key)) {\n return false;\n }\n var valueA = objA[key];\n var valueB = objB[key];\n ret = compare ? compare.call(compareContext, valueA, valueB, key) : void 0;\n if (ret === false || ret === void 0 && valueA !== valueB) {\n return false;\n }\n }\n return true;\n};","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nvar _typeof = typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\" ? function (obj) {\n return typeof obj;\n} : function (obj) {\n return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj;\n};\nvar _createClass = function () {\n function defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n descriptor.configurable = true;\n if (\"value\" in descriptor) descriptor.writable = true;\n Object.defineProperty(target, descriptor.key, descriptor);\n }\n }\n return function (Constructor, protoProps, staticProps) {\n if (protoProps) defineProperties(Constructor.prototype, protoProps);\n if (staticProps) defineProperties(Constructor, staticProps);\n return Constructor;\n };\n}();\nvar _cookie = require('cookie');\nvar _cookie2 = _interopRequireDefault(_cookie);\nvar _objectAssign = require('object-assign');\nvar _objectAssign2 = _interopRequireDefault(_objectAssign);\nvar _utils = require('./utils');\nfunction _interopRequireDefault(obj) {\n return obj && obj.__esModule ? obj : {\n default: obj\n };\n}\nfunction _classCallCheck(instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n}\nvar Cookies = function () {\n function Cookies(cookies, hooks) {\n _classCallCheck(this, Cookies);\n this.changeListeners = [];\n this.cookies = parseCookies(cookies);\n this.hooks = hooks;\n this.HAS_DOCUMENT_COOKIE = (0, _utils.hasDocumentCookie)();\n }\n _createClass(Cookies, [{\n key: '_updateBrowserValues',\n value: function _updateBrowserValues() {\n if (!this.HAS_DOCUMENT_COOKIE) {\n return;\n }\n this.cookies = _cookie2.default.parse(document.cookie);\n }\n }, {\n key: 'get',\n value: function get(name) {\n var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n this._updateBrowserValues();\n return readCookie(this.cookies[name], options);\n }\n }, {\n key: 'getAll',\n value: function getAll() {\n var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};\n this._updateBrowserValues();\n var result = {};\n for (var name in this.cookies) {\n result[name] = readCookie(this.cookies[name], options);\n }\n return result;\n }\n }, {\n key: 'set',\n value: function set(name, value, options) {\n if ((typeof value === 'undefined' ? 'undefined' : _typeof(value)) === 'object') {\n value = JSON.stringify(value);\n }\n if (this.hooks && this.hooks.onSet) {\n this.hooks.onSet(name, value, options);\n }\n this.cookies[name] = value;\n if (this.HAS_DOCUMENT_COOKIE) {\n document.cookie = _cookie2.default.serialize(name, value, options);\n }\n this._emitChange({\n name: name,\n value: value,\n options: options\n });\n }\n }, {\n key: 'remove',\n value: function remove(name, options) {\n var finalOptions = options = (0, _objectAssign2.default)({}, options, {\n expires: new Date(1970, 1, 1, 0, 0, 1),\n maxAge: 0\n });\n if (this.hooks && this.hooks.onRemove) {\n this.hooks.onRemove(name, finalOptions);\n }\n delete this.cookies[name];\n if (this.HAS_DOCUMENT_COOKIE) {\n document.cookie = _cookie2.default.serialize(name, '', finalOptions);\n }\n this._emitChange({\n name: name,\n value: undefined,\n options: options\n });\n }\n }, {\n key: '_emitChange',\n value: function _emitChange(params) {\n for (var i = 0; i < this.changeListeners.length; ++i) {\n this.changeListeners[i](params);\n }\n }\n }, {\n key: 'addChangeListener',\n value: function addChangeListener(callback) {\n this.changeListeners.push(callback);\n }\n }, {\n key: 'removeChangeListener',\n value: function removeChangeListener(callback) {\n var idx = this.changeListeners.indexOf(callback);\n if (idx >= 0) {\n this.changeListeners.splice(idx, 1);\n }\n }\n }]);\n return Cookies;\n}();\nexports.default = Cookies;\nfunction parseCookies(cookies) {\n if (typeof cookies === 'string') {\n return _cookie2.default.parse(cookies);\n } else if ((typeof cookies === 'undefined' ? 'undefined' : _typeof(cookies)) === 'object' && cookies !== null) {\n return cookies;\n } else {\n return {};\n }\n}\nfunction isParsingCookie(value, doNotParse) {\n if (typeof doNotParse === 'undefined') {\n // We guess if the cookie start with { or [, it has been serialized\n doNotParse = !value || value[0] !== '{' && value[0] !== '[' && value[0] !== '\"';\n }\n return !doNotParse;\n}\nfunction readCookie(value) {\n var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};\n if (isParsingCookie(value, options.doNotParse)) {\n try {\n return JSON.parse(value);\n } catch (e) {\n // At least we tried\n }\n }\n return value;\n}\nmodule.exports = exports['default'];","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nvar _Cookies = require('./Cookies');\nvar _Cookies2 = _interopRequireDefault(_Cookies);\nfunction _interopRequireDefault(obj) {\n return obj && obj.__esModule ? obj : {\n default: obj\n };\n}\nexports.default = _Cookies2.default;\nmodule.exports = exports['default'];","'use strict';\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nvar _typeof = typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\" ? function (obj) {\n return typeof obj;\n} : function (obj) {\n return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj;\n};\nexports.hasDocumentCookie = hasDocumentCookie;\nexports.cleanCookies = cleanCookies;\n// Can we get/set cookies on document.cookie?\n\nfunction hasDocumentCookie() {\n return (typeof document === 'undefined' ? 'undefined' : _typeof(document)) === 'object' && typeof document.cookie === 'string';\n}\n\n//backwards compatibility\nvar HAS_DOCUMENT_COOKIE = exports.HAS_DOCUMENT_COOKIE = hasDocumentCookie();\nfunction cleanCookies() {\n document.cookie.split(';').forEach(function (c) {\n document.cookie = c.replace(/^ +/, '').replace(/=.*/, '=;expires=' + new Date().toUTCString() + ';path=/');\n });\n}","/*!\n * cookie\n * Copyright(c) 2012-2014 Roman Shtylman\n * Copyright(c) 2015 Douglas Christopher Wilson\n * MIT Licensed\n */\n\n'use strict';\n\n/**\n * Module exports.\n * @public\n */\nexports.parse = parse;\nexports.serialize = serialize;\n\n/**\n * Module variables.\n * @private\n */\n\nvar decode = decodeURIComponent;\nvar encode = encodeURIComponent;\nvar pairSplitRegExp = /; */;\n\n/**\n * RegExp to match field-content in RFC 7230 sec 3.2\n *\n * field-content = field-vchar [ 1*( SP / HTAB ) field-vchar ]\n * field-vchar = VCHAR / obs-text\n * obs-text = %x80-FF\n */\n\nvar fieldContentRegExp = /^[\\u0009\\u0020-\\u007e\\u0080-\\u00ff]+$/;\n\n/**\n * Parse a cookie header.\n *\n * Parse the given cookie header string into an object\n * The object has the various cookies as keys(names) => values\n *\n * @param {string} str\n * @param {object} [options]\n * @return {object}\n * @public\n */\n\nfunction parse(str, options) {\n if (typeof str !== 'string') {\n throw new TypeError('argument str must be a string');\n }\n var obj = {};\n var opt = options || {};\n var pairs = str.split(pairSplitRegExp);\n var dec = opt.decode || decode;\n for (var i = 0; i < pairs.length; i++) {\n var pair = pairs[i];\n var eq_idx = pair.indexOf('=');\n\n // skip things that don't look like key=value\n if (eq_idx < 0) {\n continue;\n }\n var key = pair.substr(0, eq_idx).trim();\n var val = pair.substr(++eq_idx, pair.length).trim();\n\n // quoted values\n if ('\"' == val[0]) {\n val = val.slice(1, -1);\n }\n\n // only assign once\n if (undefined == obj[key]) {\n obj[key] = tryDecode(val, dec);\n }\n }\n return obj;\n}\n\n/**\n * Serialize data into a cookie header.\n *\n * Serialize the a name value pair into a cookie string suitable for\n * http headers. An optional options object specified cookie parameters.\n *\n * serialize('foo', 'bar', { httpOnly: true })\n * => \"foo=bar; httpOnly\"\n *\n * @param {string} name\n * @param {string} val\n * @param {object} [options]\n * @return {string}\n * @public\n */\n\nfunction serialize(name, val, options) {\n var opt = options || {};\n var enc = opt.encode || encode;\n if (typeof enc !== 'function') {\n throw new TypeError('option encode is invalid');\n }\n if (!fieldContentRegExp.test(name)) {\n throw new TypeError('argument name is invalid');\n }\n var value = enc(val);\n if (value && !fieldContentRegExp.test(value)) {\n throw new TypeError('argument val is invalid');\n }\n var str = name + '=' + value;\n if (null != opt.maxAge) {\n var maxAge = opt.maxAge - 0;\n if (isNaN(maxAge)) throw new Error('maxAge should be a Number');\n str += '; Max-Age=' + Math.floor(maxAge);\n }\n if (opt.domain) {\n if (!fieldContentRegExp.test(opt.domain)) {\n throw new TypeError('option domain is invalid');\n }\n str += '; Domain=' + opt.domain;\n }\n if (opt.path) {\n if (!fieldContentRegExp.test(opt.path)) {\n throw new TypeError('option path is invalid');\n }\n str += '; Path=' + opt.path;\n }\n if (opt.expires) {\n if (typeof opt.expires.toUTCString !== 'function') {\n throw new TypeError('option expires is invalid');\n }\n str += '; Expires=' + opt.expires.toUTCString();\n }\n if (opt.httpOnly) {\n str += '; HttpOnly';\n }\n if (opt.secure) {\n str += '; Secure';\n }\n if (opt.sameSite) {\n var sameSite = typeof opt.sameSite === 'string' ? opt.sameSite.toLowerCase() : opt.sameSite;\n switch (sameSite) {\n case true:\n str += '; SameSite=Strict';\n break;\n case 'lax':\n str += '; SameSite=Lax';\n break;\n case 'strict':\n str += '; SameSite=Strict';\n break;\n default:\n throw new TypeError('option sameSite is invalid');\n }\n }\n return str;\n}\n\n/**\n * Try decoding a string using a decoding function.\n *\n * @param {string} str\n * @param {function} decode\n * @private\n */\n\nfunction tryDecode(str, decode) {\n try {\n return decode(str);\n } catch (e) {\n return str;\n }\n}","\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/interopRequireDefault\");\n\nexports.__esModule = true;\nexports.default = addClass;\n\nvar _hasClass = _interopRequireDefault(require(\"./hasClass\"));\n\nfunction addClass(element, className) {\n if (element.classList) element.classList.add(className);else if (!(0, _hasClass.default)(element, className)) if (typeof element.className === 'string') element.className = element.className + ' ' + className;else element.setAttribute('class', (element.className && element.className.baseVal || '') + ' ' + className);\n}\n\nmodule.exports = exports[\"default\"];","\"use strict\";\n\nexports.__esModule = true;\nexports.default = hasClass;\n\nfunction hasClass(element, className) {\n if (element.classList) return !!className && element.classList.contains(className);else return (\" \" + (element.className.baseVal || element.className) + \" \").indexOf(\" \" + className + \" \") !== -1;\n}\n\nmodule.exports = exports[\"default\"];","'use strict';\n\nfunction replaceClassName(origClass, classToRemove) {\n return origClass.replace(new RegExp('(^|\\\\s)' + classToRemove + '(?:\\\\s|$)', 'g'), '$1').replace(/\\s+/g, ' ').replace(/^\\s*|\\s*$/g, '');\n}\n\nmodule.exports = function removeClass(element, className) {\n if (element.classList) element.classList.remove(className);else if (typeof element.className === 'string') element.className = replaceClassName(element.className, className);else element.setAttribute('class', replaceClassName(element.className && element.className.baseVal || '', className));\n};","import React from 'react'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport {\n faFacebookSquare,\n faInstagram,\n faLinkedin,\n faYoutube\n} from '@fortawesome/free-brands-svg-icons'\nimport './index.scss'\n\nimport { mergeClasses } from '../../utils'\n\nexport default ({ className }) => (\n
\n \n );\n }}\n \n );\n};\n\nexport default Header;\n","import React from 'react'\nimport './index.scss'\n\nconst ArrowButton = ({ full, mods = [], onClick = () => {} }) => (\n \n)\n\nexport default ArrowButton\n","import React from 'react'\nimport Link from 'gatsby-link'\nimport './index.scss'\nimport ArrowButton from '../ArrowButton'\nimport { scrollTop } from '../../utils'\n\nconst componentName = () => {\n return (\n \n )\n}\n\nexport default componentName\n","import React from 'react'\nimport { Link } from 'gatsby'\nimport PropTypes from 'prop-types'\nimport Helmet from 'react-helmet'\nimport { StaticQuery, graphql } from 'gatsby'\n\nimport CookieBanner from 'react-cookie-banner'\nimport Header from '../Header'\nimport Footer from '../Footer'\nimport './index.scss'\nimport { CookieConsentBanner } from '..'\n\nconst Layout = ({ children, color, margin }) => (\n (\n <>\n \n \n \n \n
\n \n {children}\n \n
\n \n >\n )}\n />\n)\n\nLayout.propTypes = {\n children: PropTypes.node.isRequired\n}\n\nexport default Layout\n","export default function _extends() {\n _extends = Object.assign ? Object.assign.bind() : function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n return target;\n };\n return _extends.apply(this, arguments);\n}","export default function _assertThisInitialized(self) {\n if (self === void 0) {\n throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n }\n return self;\n}","export default function _typeof(o) {\n \"@babel/helpers - typeof\";\n\n return _typeof = \"function\" == typeof Symbol && \"symbol\" == typeof Symbol.iterator ? function (o) {\n return typeof o;\n } : function (o) {\n return o && \"function\" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? \"symbol\" : typeof o;\n }, _typeof(o);\n}","import _typeof from \"./typeof.js\";\nimport toPrimitive from \"./toPrimitive.js\";\nexport default function toPropertyKey(t) {\n var i = toPrimitive(t, \"string\");\n return \"symbol\" == _typeof(i) ? i : i + \"\";\n}","import _typeof from \"./typeof.js\";\nexport default function toPrimitive(t, r) {\n if (\"object\" != _typeof(t) || !t) return t;\n var e = t[Symbol.toPrimitive];\n if (void 0 !== e) {\n var i = e.call(t, r || \"default\");\n if (\"object\" != _typeof(i)) return i;\n throw new TypeError(\"@@toPrimitive must return a primitive value.\");\n }\n return (\"string\" === r ? String : Number)(t);\n}","import toPropertyKey from \"./toPropertyKey.js\";\nexport default function _defineProperty(obj, key, value) {\n key = toPropertyKey(key);\n if (key in obj) {\n Object.defineProperty(obj, key, {\n value: value,\n enumerable: true,\n configurable: true,\n writable: true\n });\n } else {\n obj[key] = value;\n }\n return obj;\n}","import _extends from '@babel/runtime/helpers/esm/extends';\nimport _objectWithoutPropertiesLoose from '@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';\nimport _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';\nimport _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized';\nimport _defineProperty from '@babel/runtime/helpers/esm/defineProperty';\nimport { useState, useEffect, createElement, Component } from 'react';\nimport invariant from 'invariant';\nvar INSTANCE_MAP = new Map();\nvar OBSERVER_MAP = new Map();\n/**\n * Monitor element, and trigger callback when element becomes visible\n * @param element {HTMLElement}\n * @param callback {Function} Called with inView\n * @param options {Object} InterSection observer options\n * @param options.threshold {Number} Number between 0 and 1, indicating how much of the element should be visible before triggering\n * @param options.root {HTMLElement} It should have a unique id or data-intersection-id in order for the Observer to reused.\n * @param options.rootMargin {String} The CSS margin to apply to the root element.\n * @param rootId {String} Unique identifier for the root element, to enable reusing the IntersectionObserver\n */\n\nfunction observe(element, callback, options, rootId) {\n if (options === void 0) {\n options = {};\n }\n\n // Validate that the element is not being used in another \n invariant(!INSTANCE_MAP.has(element), \"react-intersection-observer: Trying to observe %s, but it's already being observed by another instance.\\nMake sure the `ref` is only used by a single instance.\\n\\n%s\", element); // IntersectionObserver needs a threshold to trigger, so set it to 0 if it's not defined.\n // Modify the options object, since it's used in the onChange handler.\n\n if (!options.threshold) options.threshold = 0;\n var _options = options,\n root = _options.root,\n rootMargin = _options.rootMargin,\n threshold = _options.threshold;\n if (!element || !callback) return;\n var observerId = rootMargin ? threshold.toString() + \"_\" + rootMargin : threshold.toString();\n if (root) {\n observerId = rootId ? rootId + \"_\" + observerId : null;\n }\n var observerInstance = observerId ? OBSERVER_MAP.get(observerId) : null;\n if (!observerInstance) {\n observerInstance = new IntersectionObserver(onChange, options);\n if (observerId) OBSERVER_MAP.set(observerId, observerInstance);\n }\n var instance = {\n callback: callback,\n visible: false,\n options: options,\n observerId: observerId,\n observer: !observerId ? observerInstance : undefined\n };\n INSTANCE_MAP.set(element, instance);\n observerInstance.observe(element);\n return instance;\n}\n/**\n * Stop observing an element. If an element is removed from the DOM or otherwise destroyed,\n * make sure to call this method.\n * @param element {HTMLElement}\n */\n\nfunction unobserve(element) {\n if (!element) return;\n var instance = INSTANCE_MAP.get(element);\n if (instance) {\n var observerId = instance.observerId,\n observer = instance.observer;\n var observerInstance = observerId ? OBSERVER_MAP.get(observerId) : observer;\n if (observerInstance) {\n observerInstance.unobserve(element);\n } // Check if we are still observing any elements with the same threshold.\n\n var itemsLeft = false;\n if (observerId) {\n INSTANCE_MAP.forEach(function (item, key) {\n if (item && item.observerId === observerId && key !== element) {\n itemsLeft = true;\n }\n });\n }\n if (observerInstance && !itemsLeft) {\n // No more elements to observe for threshold, disconnect observer\n observerInstance.disconnect();\n OBSERVER_MAP.delete(observerId);\n } // Remove reference to element\n\n INSTANCE_MAP.delete(element);\n }\n}\nfunction onChange(changes) {\n changes.forEach(function (intersection) {\n var isIntersecting = intersection.isIntersecting,\n intersectionRatio = intersection.intersectionRatio,\n target = intersection.target;\n var instance = INSTANCE_MAP.get(target); // Firefox can report a negative intersectionRatio when scrolling.\n\n if (instance && intersectionRatio >= 0) {\n var options = instance.options;\n var _inView = false;\n if (Array.isArray(options.threshold)) {\n // If threshold is an array, check if any of them intersects. This just triggers the onChange event multiple times.\n _inView = options.threshold.some(function (threshold) {\n return instance.visible ? intersectionRatio > threshold : intersectionRatio >= threshold;\n });\n } else if (options.threshold !== undefined) {\n // Trigger on 0 ratio only when not visible. This is fallback for browsers without isIntersecting support\n _inView = instance.visible ? intersectionRatio > options.threshold : intersectionRatio >= options.threshold;\n }\n if (isIntersecting !== undefined) {\n // If isIntersecting is defined, ensure that the element is actually intersecting.\n // Otherwise it reports a threshold of 0\n _inView = _inView && isIntersecting;\n }\n instance.visible = _inView;\n instance.callback(_inView, intersectionRatio);\n }\n });\n}\nfunction useInView(ref, options) {\n if (options === void 0) {\n options = {};\n }\n\n // $FlowFixMe - useState is not exposed in React Flow lib yet\n var _React$useState = useState(false),\n isInView = _React$useState[0],\n setInView = _React$useState[1]; // $FlowFixMe - useEffect is not exposed in React Flow lib yet\n\n useEffect(function () {\n if (ref.current) {\n observe(ref.current, function (inView) {\n setInView(inView);\n if (inView && options.triggerOnce) {\n // If it should only trigger once, unobserve the element after it's inView\n unobserve(ref.current);\n }\n }, {\n threshold: options.threshold,\n root: options.root,\n rootMargin: options.rootMargin\n }, options.rootId);\n }\n return function () {\n unobserve(ref.current);\n };\n }, [options.threshold, options.root, options.rootMargin, options.rootId]);\n return isInView;\n}\n\n/**\n * Monitors scroll, and triggers the children function with updated props\n *\n \n {({inView, ref}) => (\n
{`${inView}`}
\n )}\n \n */\nvar InView = /*#__PURE__*/\nfunction (_React$Component) {\n _inheritsLoose(InView, _React$Component);\n function InView() {\n var _this;\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"state\", {\n inView: false,\n intersectionRatio: 0\n });\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"node\", null);\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"handleNode\", function (node) {\n if (_this.node) unobserve(_this.node);\n _this.node = node;\n _this.observeNode();\n });\n _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), \"handleChange\", function (inView, intersectionRatio) {\n _this.setState({\n inView: inView,\n intersectionRatio: intersectionRatio\n });\n if (_this.props.onChange) {\n _this.props.onChange(inView, intersectionRatio);\n }\n });\n return _this;\n }\n var _proto = InView.prototype;\n _proto.componentDidMount = function componentDidMount() {\n if (process.env.NODE_ENV !== 'production') {\n if (this.props.hasOwnProperty('render')) {\n console.warn(\"react-intersection-observer: \\\"render\\\" is deprecated, and should be replaced with \\\"children\\\"\", this.node);\n }\n invariant(this.node, \"react-intersection-observer: No DOM node found. Make sure you forward \\\"ref\\\" to the root DOM element you want to observe.\");\n }\n };\n _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {\n // If a IntersectionObserver option changed, reinit the observer\n if (prevProps.rootMargin !== this.props.rootMargin || prevProps.root !== this.props.root || prevProps.threshold !== this.props.threshold) {\n unobserve(this.node);\n this.observeNode();\n }\n if (prevState.inView !== this.state.inView) {\n if (this.state.inView && this.props.triggerOnce) {\n unobserve(this.node);\n this.node = null;\n }\n }\n };\n _proto.componentWillUnmount = function componentWillUnmount() {\n if (this.node) {\n unobserve(this.node);\n this.node = null;\n }\n };\n _proto.observeNode = function observeNode() {\n if (!this.node) return;\n var _this$props = this.props,\n threshold = _this$props.threshold,\n root = _this$props.root,\n rootMargin = _this$props.rootMargin,\n rootId = _this$props.rootId;\n observe(this.node, this.handleChange, {\n threshold: threshold,\n root: root,\n rootMargin: rootMargin\n }, rootId);\n };\n _proto.render = function render() {\n var _this$props2 = this.props,\n children = _this$props2.children,\n render = _this$props2.render,\n tag = _this$props2.tag,\n triggerOnce = _this$props2.triggerOnce,\n threshold = _this$props2.threshold,\n root = _this$props2.root,\n rootId = _this$props2.rootId,\n rootMargin = _this$props2.rootMargin,\n props = _objectWithoutPropertiesLoose(_this$props2, [\"children\", \"render\", \"tag\", \"triggerOnce\", \"threshold\", \"root\", \"rootId\", \"rootMargin\"]);\n var _this$state = this.state,\n inView = _this$state.inView,\n intersectionRatio = _this$state.intersectionRatio;\n var renderMethod = children || render;\n if (typeof renderMethod === 'function') {\n return renderMethod({\n inView: inView,\n intersectionRatio: intersectionRatio,\n ref: this.handleNode\n });\n }\n return createElement(tag || 'div', _extends({\n ref: this.handleNode\n }, props), children);\n };\n return InView;\n}(Component);\n_defineProperty(InView, \"defaultProps\", {\n threshold: 0,\n triggerOnce: false\n});\nexport default InView;\nexport { InView, useInView };","export default function _objectWithoutPropertiesLoose(source, excluded) {\n if (source == null) return {};\n var target = {};\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n if (excluded.indexOf(key) >= 0) continue;\n target[key] = source[key];\n }\n }\n return target;\n}","import { createElement, PureComponent } from 'react';\nimport Observer from 'react-intersection-observer';\nimport invariant from 'invariant';\nvar isMonitoring = false;\nvar isScrolling = false;\nvar watchers = new Set();\nfunction onScroll(e) {\n if (!isScrolling) {\n isScrolling = true;\n requestAnimationFrame(update);\n }\n}\nfunction update() {\n isScrolling = false;\n watchers.forEach(function (cb) {\n return cb();\n });\n}\nfunction start() {\n if (!isMonitoring) {\n window.addEventListener('scroll', onScroll);\n isMonitoring = true;\n }\n}\nfunction stop() {\n if (isMonitoring) {\n watchers.clear();\n window.removeEventListener('scroll', onScroll);\n isMonitoring = false;\n }\n}\nfunction watch(cb) {\n if (!isMonitoring) start();\n watchers.add(cb);\n}\nfunction unwatch(cb) {\n watchers.delete(cb);\n if (!watchers.size) stop();\n}\nvar classCallCheck = function (instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n};\nvar _extends = Object.assign || function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n return target;\n};\nvar inherits = function (subClass, superClass) {\n if (typeof superClass !== \"function\" && superClass !== null) {\n throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass);\n }\n subClass.prototype = Object.create(superClass && superClass.prototype, {\n constructor: {\n value: subClass,\n enumerable: false,\n writable: true,\n configurable: true\n }\n });\n if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;\n};\nvar objectWithoutProperties = function (obj, keys) {\n var target = {};\n for (var i in obj) {\n if (keys.indexOf(i) >= 0) continue;\n if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;\n target[i] = obj[i];\n }\n return target;\n};\nvar possibleConstructorReturn = function (self, call) {\n if (!self) {\n throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n }\n return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self;\n};\n\n/**\n * Monitors scroll, and triggers the children function with updated props\n *\n \n {({inView, percentage}) => (\n
{`${inView} {percentage}`}
\n )}\n \n */\nvar ScrollPercentage = function (_React$PureComponent) {\n inherits(ScrollPercentage, _React$PureComponent);\n function ScrollPercentage() {\n var _temp, _this, _ret;\n classCallCheck(this, ScrollPercentage);\n for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n return _ret = (_temp = (_this = possibleConstructorReturn(this, _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args))), _this), _this.state = {\n percentage: 0,\n inView: false\n }, _this.node = null, _this.handleInView = function (inView) {\n _this.setState({\n inView: inView\n });\n }, _this.handleNode = function (observer) {\n return _this.node = observer && observer.node;\n }, _this.handleScroll = function () {\n if (!_this.node) return;\n var threshold = _this.props.threshold;\n var bounds = _this.node.getBoundingClientRect();\n var percentage = ScrollPercentage.calculatePercentage(bounds, threshold);\n if (percentage !== _this.state.percentage) {\n _this.setState({\n percentage: percentage\n });\n }\n }, _this.renderInner = function (_ref) {\n var inView = _ref.inView,\n ref = _ref.ref;\n var _this$props = _this.props,\n children = _this$props.children,\n onChange = _this$props.onChange,\n threshold = _this$props.threshold,\n innerRef = _this$props.innerRef,\n tag = _this$props.tag,\n props = objectWithoutProperties(_this$props, ['children', 'onChange', 'threshold', 'innerRef', 'tag']);\n\n // Create a wrapping element\n\n return createElement(tag || 'div', _extends({\n ref: innerRef ? function (node) {\n innerRef(node);\n ref(node);\n } : ref\n }, props), typeof children === 'function' ? children({\n percentage: _this.state.percentage,\n inView: inView\n }) : children);\n }, _temp), possibleConstructorReturn(_this, _ret);\n }\n\n /**\n * Get the correct viewport height. If rendered inside an iframe, grab it from the parent\n */\n ScrollPercentage.viewportHeight = function viewportHeight() {\n return global.parent ? global.parent.innerHeight : global.innerHeight || 0;\n };\n ScrollPercentage.calculatePercentage = function calculatePercentage(bounds) {\n var threshold = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;\n var vh = ScrollPercentage.viewportHeight();\n var offsetTop = threshold * vh * 0.25;\n var offsetBottom = threshold * vh * 0.25;\n return 1 - Math.max(0, Math.min(1, (bounds.bottom - offsetTop) / (vh + bounds.height - offsetBottom - offsetTop)));\n };\n ScrollPercentage.prototype.componentDidMount = function componentDidMount() {\n // Start by updating the scroll position, so it correctly reflects the elements start position\n this.handleScroll();\n if (process.env.NODE_ENV !== 'production') {\n invariant(this.node, 'react-scroll-percentage: No DOM node found. Make sure you forward \"ref\" to the root DOM element you want to observe, when using render prop.');\n }\n };\n ScrollPercentage.prototype.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {\n if (this.props.onChange && (prevState.percentage !== this.state.percentage || prevState.inView !== this.state.inView)) {\n this.props.onChange(this.state.percentage, this.state.inView);\n }\n if (prevState.inView !== this.state.inView) {\n this.monitorScroll(this.state.inView);\n }\n };\n ScrollPercentage.prototype.componentWillUnmount = function componentWillUnmount() {\n this.monitorScroll(false);\n };\n ScrollPercentage.prototype.monitorScroll = function monitorScroll(enable) {\n if (enable) {\n watch(this.handleScroll);\n } else {\n unwatch(this.handleScroll);\n }\n };\n ScrollPercentage.prototype.render = function render() {\n return createElement(Observer, {\n onChange: this.handleInView,\n threshold: this.props.threshold,\n ref: this.handleNode\n }, this.renderInner);\n };\n return ScrollPercentage;\n}(PureComponent);\nScrollPercentage.defaultProps = {\n tag: 'div',\n threshold: 0\n};\nexport default ScrollPercentage;","import React from 'react'\nimport Link from 'gatsby-link'\n\nimport ScrollPercentage from 'react-scroll-percentage'\n\nconst HoverSection = ({\n header,\n text,\n link,\n linkText,\n isActive,\n modifier,\n onMouseEnter,\n image\n}) => (\n \n
\n
{header}
\n
\n
{text}
\n \n {linkText}\n \n
\n
\n \n {( { percentage } ) => (\n \n )}\n \n \n)\n\nexport default HoverSection\n","export default __webpack_public_path__ + \"static/kompetenzen-65b3c55ae189d9a24e8f8dc5d32e5a59.png\";","import React, { Component } from 'react'\nimport './index.scss'\nimport { scrollTo } from '../../utils'\n\nimport ArrowButton from '../ArrowButton'\nimport HoverSection from './HoverSection'\n\nimport Performance from '../../assets/performance.jpg'\nimport kompetenzen from '../../assets/kompetenzen.png'\nimport Technologie from '../../assets/technologie.jpg'\nimport Begeisterung from '../../assets/begeisterung.jpg'\nimport Balance from '../../assets/balance.jpg'\nimport chess from '../../assets/chessNew.jpg'\n\nconst HoverSections = [\n {\n header: 'Kompetenzen',\n text:\n 'Von Design und Programmierung bis hin zu E-Commerce und benutzerfreundlichen Schnittstellen - entdecken Sie die vielfältigen Kompetenzen, die innovative Lösungen für anspruchsvolle Anforderungen ermöglichen. Wir verschieben Grenzen und setzen neue Maßstäbe.',\n link: '/kompetenzen',\n linkText: 'qualitätsbewusst',\n modifier: 'big',\n image: kompetenzen\n },\n {\n header: 'Strategie',\n text:\n 'Unsere Innsbrucker Webagentur setzt auf Kundenzufriedenheit durch erprobte Abläufe, ein benutzerfreundliches Customer Portal und Ticketsystem. Erfahren Sie mehr über unsere Strategie und Arbeitsweise.',\n link: '/strategie',\n linkText: 'effektiv',\n modifier: 'small',\n image: chess\n },\n {\n header: 'Technologie',\n text:\n 'Mit Qualität und Kompetenz haben wir über 250 Kunden seit 1995 betreut. In gemeinsamen Beratungen eruieren wir Ihren Bedarf und helfen Ihnen zu einem qualitativ hochwertigen Webauftritt mit sicherem Einsatz von neusten Technologien!',\n link: '/technologie',\n linkText: 'zuverlässig',\n modifier: 'small',\n image: Technologie\n },\n {\n header: 'Projekte',\n text:\n 'Entdecken Sie unsere ansprechenden Projekte, die sich durch Nutzerfreundlichkeit und individuelle Anpassung auszeichnen. Erfahren Sie, wie wir maßgeschneiderte Lösungen entwickeln, um die Bedürfnisse unserer Kund:innen optimal zu erfüllen.',\n link: '/projekte',\n linkText: 'maßgeschneidert',\n modifier: 'big',\n image: Balance\n }\n]\n\nclass BannerFull extends Component {\n constructor (props) {\n super(props)\n }\n\n state = {\n activeHeaderItem: 0\n }\n\n container = null\n\n setContainerRef = e => {\n this.container = e\n }\n\n scroll = () => {\n const { bottom } = this.container.getBoundingClientRect()\n scrollTo(window.scrollY + bottom)\n }\n\n createSetActivateHeaderItem = activeHeaderItem => () =>\n this.setState({ activeHeaderItem })\n\n render () {\n return (\n
\n )\n }\n}\n\nexport default BlogSlider\n","export default __webpack_public_path__ + \"static/software.stack.balance-bf6a9809db6b3dccfd9d11e75937325d.jpg\";","import React from 'react'\nimport Link from 'gatsby-link'\nimport './index.scss'\n\nimport backgroundImage from '../../assets/software.stack.balance.jpg'\n\nconst SoftwareStack = () => (\n
\n
\n
\n PIM, DAM, Docker, ERP und SASS?\n
\n
\n Dabei handelt es sich um gängige Technologien, mit denen unsere Webagentur täglich arbeitet. Unsere erfahrenen Experten setzen diese Technologien ein, um individuelle Software- und Datenbanksysteme zu entwickeln, die den Bedürfnissen und Anforderungen unserer Kund:innen entsprechen. Wir sind spezialisiert auf die Implementierung von PIM- und DAM-Systemen sowie Docker, ERP und SASS. Kontaktieren Sie uns jetzt, um mehr darüber zu erfahren, wie wir Ihnen helfen können, Ihr Geschäft zu optimieren und effizienter zu gestalten.\n
\n)\n\nexport default QuickNavigation\n","export default __webpack_public_path__ + \"static/apache-d62ba288de7fec81de554f58cdab533f.png\";","export default __webpack_public_path__ + \"static/css3-d940eb0aceef411dcb7d8195b0492cfd.png\";","export default __webpack_public_path__ + \"static/jquery-35687998632144f7a73dbc7b4a439cf8.png\";","export default __webpack_public_path__ + \"static/html5-87f36abe22407e603237b69718cc32c1.png\";","export default __webpack_public_path__ + \"static/nodejs-cf54ab47c3feeba8d5a983145de0c77e.png\";","export default __webpack_public_path__ + \"static/php-86e3a0d9e1dd0c20d6920a80bd5796f3.png\";","import React, { Component } from 'react'\nimport './index.scss'\n\nimport Motor from '../../assets/software.stack.performance.02.jpg'\n\nimport apache from '../../assets/softwarestack/apache.png'\nimport css3 from '../../assets/softwarestack/css3.png'\nimport docker from '../../assets/softwarestack/docker.png'\nimport ezp from '../../assets/softwarestack/ezp.png'\nimport git from '../../assets/softwarestack/git.png'\nimport html5 from '../../assets/softwarestack/html5.png'\nimport jquery from '../../assets/softwarestack/jquery.png'\nimport js from '../../assets/softwarestack/js.png'\nimport magento from '../../assets/softwarestack/magento.png'\nimport nginx from '../../assets/softwarestack/nginx.png'\nimport nodejs from '../../assets/softwarestack/nodejs.png'\nimport php from '../../assets/softwarestack/php.png'\nimport react from '../../assets/softwarestack/react.png'\nimport symfony from '../../assets/softwarestack/symfony.png'\nimport typo3 from '../../assets/softwarestack/typo3.png'\nimport vue from '../../assets/softwarestack/vue.png'\nimport wordpress from '../../assets/softwarestack/wordpress.png'\nimport matomo from '../../assets/softwarestack/matomo.jpeg'\nimport googletagmanager from '../../assets/softwarestack/googletagmanager.png'\nimport typescript from '../../assets/softwarestack/typescript.png'\nimport varnish from '../../assets/softwarestack/varnish.png'\nimport svelte from '../../assets/softwarestack/svelte.png'\n\nconst cards = [\n {\n image: ezp,\n description1:\n 'eZ Platform ist eines der führenden PHP-CMS basierend auf dem Symfony Full-Stack Framework.',\n description2:\n 'Mit der Open-Source-Version ist eine unvergleichbare Flexibilität zur Erstellung, Erweiterung und Anpassung von Websites, Apps und anderen digitalen Produkten möglich. ',\n alt: 'eZ Publish'\n },\n {\n image: apache,\n description1:\n 'Der Apache HTTP Server ist einer der meistbenutzten Webserver im Internet. Der Apache HTTP Server ist, wie alle Programme der Apache Software Foundation, eine freie Software. ',\n description2:\n 'Der modulare Aufbau ermöglicht beispielsweise die Verschlüsselung der Kommunikation zwischen Browser und Webserver, den Einsatz als Proxyserver oder komplexe Manipulationen von HTTP-Headern und URLs.',\n alt: 'apache'\n },\n {\n image: nginx,\n description1:\n 'NGINX ist ein weiterer HTTP Server und ist wie Apache modular aufgebaut. Das heißt, dass die verschiedenen Funktionen über entsprechende Module bereitgestellt werden.',\n description2:\n 'Während Apache für jede Client-Anfrage einen neuen Thread oder Prozess öffnet, arbeitet der NGINX-Server ereignisorientiert. Somit können Anfragen asynchron bearbeiten werden, das zur Einsparung von Arbeitsspeicher und Zeit führt.',\n alt: 'nginx'\n },\n {\n image: magento,\n description1:\n 'Die Onlineshop-Software Magento bietet als moderne Cloud-Commerce-Platform, flexible Lösungen für B2B und B2C. ',\n description2:\n 'Durch diese Flexibilität und die Funktionen des Systems lässt sich Ihr Online-Shop einfach an die kundenspezifischen Bedürfnisse anpassen. Die Kaufentscheidung Ihrer Kund:innen kann durch intelligente Funktionen beeinflusst werden.',\n alt: 'magento'\n },\n {\n image: jquery,\n description1:\n 'Die freie JavaScript-Bibliothek jQuery stellt Funktionen zur DOM-Navigation und -Manipulation zur Verfügung und ist eines der meistverwendeten JS-Bibliotheken.',\n description2: '',\n alt: 'jquery'\n },\n // {\n // image: html5,\n // description1:\n // 'HTML ist der definierte Standard für die Strukturierung, Vernetzung und plattformunabhängige Bereitstellung von Inhalten im World Wide Web.',\n // description2:\n // 'Die aktuellste Entwicklung HTML5 dient als Sammlung für Technologien, die vielfältige und leistungsstarke Webseiten und Anwendungen ermöglicht.',\n // alt: 'html5'\n // },\n {\n image: css3,\n description1:\n 'Cascading Style Sheets (CSS) ist eine Beschreibungssprache, die das Erscheinungsbild in HTML/XML-Dokumenten festlegt.',\n description2:\n 'Sie gehört zu den Kernsprachen des Open Web und wird als Standard des W3C beständig weiterentwickelt.',\n alt: 'css3'\n },\n {\n image: typo3,\n description1:\n 'Das lizenzfreie Open-Source-Enterprise-Content-Management-System (CMS) Typo3 stellt die Basis von über mehr als 500.000 Webseiten, Intranets und Web & Mobile Applikationen weltweit.',\n description2:\n 'Das rein webbasierte CMS ist beliebig skalierbar und bietet einfache Lösungen für Mehrsprachigkeit und Multi-Domain Seiten an. Somit kann Typo3 auch für Ihren Unternehmensauftritt die perfekte Lösung sein.',\n alt: 'typo3'\n },\n {\n image: docker,\n description1:\n 'Docker dient zur Isolierung von Anwendungen durch das Konzept der Container-Technologie.',\n description2:\n ' Ein Docker-Container enthält eine Anwendung, aber auch alle Ressourcen, die zur Laufzeit benötigt werden. Somit lassen sich Container mit einer leichtgewichtigen Virtualisierung vergleichen.',\n alt: 'docker'\n },\n {\n image: typescript,\n description1:\n 'TypeScript wurde von Microsoft für großangelegte JavaScript Applikationen entwickelt und ermöglicht klassenbasierte typisierte Programmierung.',\n description2:\n 'Durch diese starke Typisierung können bestimmte Fehler bereits zur Übersetzungszeit aufgedeckt werden.',\n alt: 'typescript'\n },\n {\n image: react,\n description1:\n 'Die JavaScript-Bibliothek React JS stellt die Grundstruktur für das Erstellen von Benutzeroberflächen auf Webseiten zur Verfügung. ',\n description2:\n 'Durch den Einsatz von einer modularen Komponentenarchitektur und des virtuellen DOM ergibt sich eine schnelle Renderingperformanz.',\n alt: 'react'\n },\n {\n image: php,\n description1:\n 'Die Skriptsprache PHP wird hauptsächlich zur Erstellung von dynamischen Webseiten oder Webanwendungen verwendet. Sie zeichnet sich vor allem durch die breite Datenbankunterstützung und Internet-Protokolleinbindung sowie der Verfügbarkeit von zahlreichen Funktionsbibliotheken aus. ',\n description2:\n 'Ende 2017 wurde auf 83% aller Webseiten PHP als serveitige Programmiersprache verwendet.',\n alt: 'php'\n },\n {\n image: js,\n description1:\n 'Die Skriptsprache JavaScript ist eine der drei Standard-Technologien im Web neben HTML und CSS.',\n description2:\n 'Mit JavaScript ist es möglich Benutzerinteraktionen auszuwerten, Inhalte zu verändern, nachzuladen oder zu generieren und so die Möglichkeiten von HTML und CSS zu erweitern.',\n alt: 'javascript'\n },\n {\n image: matomo,\n description1:\n 'Das Webanalysetool matomo dient zur Erfassung von Datenverkehr auf Webseiten. Durch die gesammelten Daten wie z.B. Besucherzahl, -dauer und verhalten kann eine aussagekräftige Analyse über eine Webseite getroffen werden.',\n description2:\n 'Matomo ist eine der führenden digitalen Analyse-Platformen, die 100 prozentigen Dateneigentum garantieren. Das war für uns der ausschlaggebende Punkt auf matomo zu wechseln.',\n alt: 'matomo'\n },\n {\n image: wordpress,\n description1:\n 'Die Open-Source Software WordPress ist aufgrund ihrer Einfachheit und Benutzerfreundlichkeit eines der beliebtesten CMS.',\n description2:\n 'Bereits 31 % der Internetseiten verwenden WordPress, vom Hobbyblog bis zu den größten Nachrichten-Webseiten im Netz. Mit über 45.000 Plugins kann die Webseite an Ihre Wünsche erweitert und angepasst werden.',\n alt: 'wordpress'\n },\n {\n image: symfony,\n description1:\n 'Symfony ist ein PHP Framework und beinhaltet wiederwendbare PHP-Komponenten.',\n description2:\n 'Ein Framework bündelt verschiedene Technologien, Konventionen und Best Practice Lösungen, um das entwickeln moderner Webseiten so einfach und strukturiert wie möglich zu gestalten.',\n alt: 'symfony'\n },\n {\n image: googletagmanager,\n description1:\n 'Der Google Tag Manager ist ein Tag-Management-System, das zur Verwaltung von JavaScript- und HTML-Tags für die Verfolgung und Analyse von Websites entwickelt wurde.',\n description2:\n 'Dadurch können Code Snippets wie Tracking Codes oder Conversionpixel auf Webseiten und mobilen Apps eingebaut werden, ohne dabei in den Quellcode eingreifen zu müssen.',\n alt: 'google tag manager'\n },\n {\n image: nodejs,\n description1:\n 'Node.js wird als Software-Plattform mit eventbasierter Architektur definiert, die es ermöglicht, die clientseitige Skriptsprache JavaScript serverseitig zu verwenden.',\n description2:\n 'Mit dieser Laufzeitumgebung lassen sich leichtgewichtige Webserver realisieren und findet vor allem in der Entwicklung serverseitiger JavaScript-Anwendungen, die Datenmengen in Echtzeit bewältigen müssen, ihre Verwendung.',\n alt: 'node js'\n },\n {\n image: git,\n description1:\n 'GitLab ist eine Webanwendung zur Versionsverwaltung für Softwareprojekte auf Basis von git.',\n description2:\n 'Es wird von mehr als 100.000 Organisationen verwendet und hat mit 2.000 Leute, die zur Entwicklung beigetragen haben, eine große Community.',\n alt: 'git'\n },\n {\n image: varnish,\n description1:\n 'Mit zunehmender Komplexität und steigender Nutzerzahlen verlieren dynamische Webprojekte deutlich an Performance.',\n description2:\n 'Mit einem Reverse Proxy wie Varnish, der die Anfragen an den Webserver stellvertretend beantwortet, kann der Webserver entlastet werden. Dazu werden statische Inhalte wie Bilder im Cache gespeichert.',\n alt: 'varnish'\n },\n {\n image: vue,\n description1:\n 'Vue.js ist ein clientseitiges JavaScript-Webframework zum Erstellen von Single-Page-Webanwendungen nach dem MVVM-Muster. Es kann allerdings auch in Multipage Webseiten für einzelne Abschnitte verwendet werden.',\n description2:\n 'Das Framework hat den Grundgedanken, mit wenigen Zeilen Code gute Ergebnisse zu erzielen und durch den Einsatz des virtuellen DOM und einer Größe von 20 Kilobyte, ist es auch sehr performant.',\n alt: 'vue'\n },\n {\n image: svelte,\n description1:\n 'Svelte ist ein clientseitiges JavaScript-Framework zur Entwicklung von Webanwendungen, das einen neuen Ansatz für die Erstellung von Benutzeroberflächen bietet. Es ermöglicht das Erstellen von effizienten Webanwendungen mit einem minimalen Footprint.',\n description2:\n 'Das Framework zeichnet sich durch seine Fähigkeit aus, den Code während des Build-Prozesses in hoch optimierten JavaScript-Code umzuwandeln. Dadurch erreicht Svelte eine hervorragende Leistung und geringe Dateigrößen.',\n alt: 'svelte'\n }\n \n]\n\nclass SoftwarePerformance extends Component {\n constructor(props) {\n super(props)\n this.state = {\n activeItem: null\n }\n }\n\n createSetActivateItem = activeItem => () => this.setState({ activeItem })\n\n toggleActiveItem = activeItem => () => {\n this.setState({\n activeItem: this.state.activeItem === activeItem ? null : activeItem\n })\n }\n\n render() {\n return (\n
Für eine optimale User Experience (UX) ist es wichtig, dass sowohl das User Interface (UI) als auch das User Design perfekt aufeinander abgestimmt sind. Um diesen Aspekt besser zu verstehen, wollen wir dir den Unterschied zwischen Ananas und Banane erklären.
\n
\n Ein wichtiger Faktor für eine positive User Experience ist das User Interface (UI). UI bezieht sich auf die visuelle Gestaltung von digitalen Produkten und die Art und Weise, wie der Nutzer mit ihnen interagiert. Ein gut gestaltetes UI trägt maßgeblich dazu bei, dass der Nutzer das Produkt intuitiv und effizient nutzen kann.\n
\n
\n Die Banane ist ein perfektes Beispiel für eine optimale UX. Sie ist einfach zu öffnen, hat gute Ernährungswerte und ist nahezu überall auf der Welt erhältlich. Die Schale zeigt uns außerdem an, wann die Banane reif zum Verzehr ist. All diese Faktoren führen zu einer durchweg positiven User Experience.\n
\n
Die Erwartung an die Frucht, die Nutzung der Frucht (Usability) und die Zufriedenheit ergeben: die Banane hat durchgängig eine sehr gute {' '}User Experience (UX)\n
\n
Und die Ananas?
\n \n
\n
\n \n
\n
UX - User Experience:
\n \n Die Gesamtheit der Erfahrung vom Anfang bis zum Ende des\n Konsums eines Produkts.\n \n
\n
\n
\n
\n Im Gegensatz dazu ist die Ananas schwieriger zu handhaben und kann eine unangenehme Erfahrung sein. Sie ist schwer zu öffnen und kann eine ziemliche Sauerei verursachen. Selbst wenn sie besser schmeckt als eine Banane, kann sie aufgrund dieser Faktoren eine schlechtere User Experience bieten.\n
\n
Um eine optimale UX zu gewährleisten, müssen UI und User Design perfekt aufeinander abgestimmt sein. Wenn du professionelles Webdesign benötigst, das auf UX, UI und User Design optimiert ist, dann bist du bei uns genau richtig. Wir bieten maßgeschneiderte Lösungen für deine individuellen Bedürfnisse. Kontaktiere uns noch heute!
\n)\n\nexport default ProjectOverviewItem\n","export default __webpack_public_path__ + \"static/slider.tqimg-0de9def95c9b648e3bf543cac72fd4f1.png\";","export default __webpack_public_path__ + \"static/image-58687e7248c5bf8a169ee3fc582ca68f.png\";","export default __webpack_public_path__ + \"static/rauchmehl-7e8403cb128dd2dd9c402ec164e10a7a.png\";","export default __webpack_public_path__ + \"static/edelwatt.uebersicht-3910d8dbb87341750d2dd5e2dbc45bf3.jpg\";","export default __webpack_public_path__ + \"static/stadtamthall.logo-f14aa8499162c167cdf969b72f675b10.png\";","export default __webpack_public_path__ + \"static/stubai.uebersicht-454facca862b5c5d5797fc0da53772db.jpg\";","export default __webpack_public_path__ + \"static/stubai.logo-272e0c1a62fab28ab8ff6c2f3ed84e71.png\";","export default __webpack_public_path__ + \"static/hall.uebersicht-e38e05ebfda86555461864d94799bc4d.jpg\";","export default __webpack_public_path__ + \"static/ikb.uebersicht-7a5640fcd2adad32ab8e1ac7de0682a9.jpg\";","export default __webpack_public_path__ + \"static/logo.arbeiterkammer-1d4c1452bb841828b4077f1fd197ee63.png\";","export default __webpack_public_path__ + \"static/haleon_white-80f9f06759e0214a5e96090bb32ae298.png\";","export default __webpack_public_path__ + \"static/logo.klepsch-62785c56f3251f0486abef53d411bffd.png\";","export default __webpack_public_path__ + \"static/logo.intercable-063a6ae101ec8e16115b2a3bae2f5e75.png\";","export default __webpack_public_path__ + \"static/logo.berufsreise-5b8d93008d0e8eca745eb94bdaf3eff2.png\";","export default __webpack_public_path__ + \"static/logo.eglo-92c61c5d7da3ebad2340641e3b674f27.png\";","export default __webpack_public_path__ + \"static/banner.morf-1e116e791457f473d053c669c369ccf4.jpg\";","export default __webpack_public_path__ + \"static/dibk.uebersicht-4a13abc08babd500421eab1e50e09d25.jpg\";","export default __webpack_public_path__ + \"static/header.nht-6223a0b6e5770e0af6b0d269068da44a.png\";","export default __webpack_public_path__ + \"static/header.whw-46d1abf6d077251f2316abaa5a594f64.png\";","export default __webpack_public_path__ + \"static/logo.whw-2954485d76c6a5c2c525f5c4537f001f.png\";","export default __webpack_public_path__ + \"static/header.energietirol.uebersicht-c97fc48fc5716aef1a234a9da917e6f3.png\";","export default __webpack_public_path__ + \"static/logo.bioheizwerk-98e1583efd2ce19f35d7f17f5d9afa01.jpeg\";","export default __webpack_public_path__ + \"static/header.bioheizwerk.uebersicht-babfe1c6527d41f90d68c22db01cfb8d.png\";","export default __webpack_public_path__ + \"static/logo.colompac-9ecbbefebd98594fa6f5af8a8da9332f.png\";","export default __webpack_public_path__ + \"static/header.colompac.uebersicht-c4d7e0c93b4f25a3e22033bc66fc7df4.png\";","export default __webpack_public_path__ + \"static/logo.augenaerztin-8e96fecec6e09b1fba108ec81569e544.png\";","export default __webpack_public_path__ + \"static/header.augenaerztin.uebersicht-2a28d7d5257b7c19db4f5111aca9f4c1.png\";","export default __webpack_public_path__ + \"static/logo.alupress-388ea2c3035d6f0fa885f58716e52ea3.png\";","export default __webpack_public_path__ + \"static/header.alupress.uebersicht-0338a60b6fdc516304e46c1e1224be2b.png\";","export default __webpack_public_path__ + \"static/header.pan.uebersicht-830f4674baa524f402b0660676c02446.png\";","export default __webpack_public_path__ + \"static/logo.stadtmuseumhall-b75c09441402ef1ddaf2f20461a0bb53.jpeg\";","export default __webpack_public_path__ + \"static/header.stadtmuseumhall.uebersicht-10a0a35c3dbdce0aea6785477fe9db39.png\";","export default __webpack_public_path__ + \"static/header.wko.uebersicht-8aa380253ea9827a3b6d3023b47a1797.png\";","import React from 'react'\nimport './index.scss'\nimport ProjectOverviewItem from './ProjectOverviewItem'\n\nconst tiwag = '/tiwag.01.mp4'\nimport tq from '../../assets/slider.tqimg.png'\nimport tiwagLogo from '../../assets/tiwag.logo.png'\nimport tqlogo from '../../assets/tq.logo.png'\nimport rauchmehl from '../../assets/image.png'\nimport rauchmehlLogo from '../../assets/rauchmehl.png'\nimport edelwatt from '../../assets/edelwatt.uebersicht.jpg'\nimport stadtamthall from '../../assets/stadtamthall.uebersicht.jpg'\nimport stadtamthallLogo from '../../assets/stadtamthall.logo.png'\nimport stubai from '../../assets/stubai.uebersicht.jpg'\nimport stubailogo from '../../assets/stubai.logo.png'\nimport halllogo from '../../assets/hall.logo.png'\nimport hall from '../../assets/hall.uebersicht.jpg'\nimport ikb from '../../assets/ikb.uebersicht.jpg'\nimport ikblogo from '../../assets/ikb.logo.png'\nimport aklogo from '../../assets/logo.arbeiterkammer.png'\nimport akbg from '../../assets/header.arbeiterkammer.png'\nimport wedl from '../../assets/header.wedl.jpg'\nimport wedllogo from '../../assets/logo.wedl.png'\nimport gskgebro from '../../assets/header.voltadol.jpg'\nimport haleon from '../../assets/brands/haleon_white.png'\nimport klepsch from '../../assets/header.klepschgroup.jpg'\nimport klepschlogo from '../../assets/logo.klepsch.png'\nimport intercable from '../../assets/header.intercable.jpg'\nimport intercablelogo from '../../assets/logo.intercable.png'\nimport berufsreise from '../../assets/header.berufsreise.jpg'\nimport berufsreiselogo from '../../assets/logo.berufsreise.png'\nimport eglo from '../../assets/headerbild.pim.jpg'\nimport eglologo from '../../assets/logo.eglo.png'\nimport morf from '../../assets/banner.morf.jpg'\nimport morflogo from '../../assets/logo.morf.png'\nimport dibklogo from '../../assets/dibk.uebersicht.logo.png'\nimport dibk from '../../assets/dibk.uebersicht.jpg'\nimport nht from '../../assets/header.nht.png'\nimport whw from '../../assets/header.whw.png'\nimport nhtlogo from '../../assets/logo.nht.png'\nimport whwlogo from '../../assets/logo.whw.png'\nimport etlogo from '../../assets/logo.energietirol.png'\nimport et from '../../assets/header.energietirol.uebersicht.png'\nimport bhlogo from '../../assets/logo.bioheizwerk.jpeg'\nimport bh from '../../assets/header.bioheizwerk.uebersicht.png'\nimport colomlogo from '../../assets/logo.colompac.png'\nimport colompac from '../../assets/header.colompac.uebersicht.png'\nimport aalogo from '../../assets/logo.augenaerztin.png'\nimport aa from '../../assets/header.augenaerztin.uebersicht.png'\nimport aluplogo from '../../assets/logo.alupress.png'\nimport alup from '../../assets/header.alupress.uebersicht.png'\nimport alupress from '../../assets/banner.alupress.png'\nimport panlogo from '../../assets/logo.pan.svg'\nimport pan from '../../assets/header.pan.uebersicht.png'\nimport museumhalllogo from '../../assets/logo.stadtmuseumhall.jpeg'\nimport museumhall from '../../assets/header.stadtmuseumhall.uebersicht.png'\nimport wkologo from '../../assets/logo.wko.png'\nimport wko from '../../assets/header.wko.uebersicht.png'\nimport alpinamed from '../../assets/alpinamed-referenz-banner.webp'\nimport alpinlogo from '../../assets/logo-alpinamed.png'\n\nconst projects = [\n {\n customer: 'Innsbrucker Kommunalbetriebe',\n project: 'Website Betreuung seit 2014',\n description:\n 'Als kommunales Infrastruktur-Dienstleistungsunternehmen dient die Webseite der IKB vor allem als Informationsportal und somit als weiterer Service für ihre Kund:innen. Bei einer Webseite mit so vielen Inhalten wie auf ikb.at steht die Skalierbarkeit aus technischer Sicht an erster Stelle. ',\n website: 'https://www.ikb.at',\n logo: ikblogo,\n backgroundImage: ikb,\n color: '#ec2427',\n detailPageLink: '/projekte/ikb',\n altText: 'Website ikb.at'\n },\n {\n customer: 'Alpinamed',\n project: 'Website Relaunch',\n description:\n 'Gemeinsam mit dem zuständigen Team der Alpinamed AG stellten wir ihre Website mit neuem Design, besserer Performance und optimierteren SEO-Einstellungen erneut live.',\n website: 'https://www.alpinamed.at',\n logo: alpinlogo,\n backgroundImage: alpinamed,\n color: '#B10F34',\n detailPageLink: '/projekte/alpinamed',\n altText: 'Website Alpinamed'\n },\n {\n customer: 'Morf AG',\n project: 'Custom ERP für passgenaue digitale Arbeitsabläufe',\n description:\n 'Verschönern und für Orientierung sorgen - seit 50 Jahren ist das die Mission der Schweizer Morf AG. Und damit ihre Arbeit im Bereich Straßen-Markierung und Signalisation mit Leichtigkeit funktioniert, entwickeln wir in enger Zusammenarbeit eine Web-Applikation für die gesamte Auftragsabwicklung.',\n website: 'https://www.morf-ag.ch/',\n logo: morflogo,\n backgroundImage: morf,\n color: '#FFD400',\n detailPageLink: '/hw-erp',\n altText: 'Website Morf'\n },\n {\n customer: 'EGLO Leuchten',\n project: 'B2B Shopsystem und PIM-System',\n description:\n 'Gemeinsam mit unserem langjährigen Kunden EGLO wurde ein B2B Shopsystem für über 38.000 Produkte ins Leben gerufen. Desweiteren wurden wir vom Weltmarktführer für die Erstellung eines internen Produktinformationsmanagement (PIM) System für über 240.000 Produkte beauftragt.',\n logo: eglologo,\n backgroundImage: eglo,\n color: '#23A1A9',\n detailPageLink: '/projekte/eglo-pim',\n altText: 'Website Akeneo'\n },\n {\n customer: 'Haleon-Gebro',\n project: 'Kundenorientierte Multidomain-Website',\n description:\n 'Ob Lamisil, Otrivin, Voltadol, Fenistil, Vitawund oder Chlorhexamed - die Arzneien haben einiges gemeinsam: neben ihrem Erzeuger Haleon Gebro Consumer Health GmbH dürfen sie nun alle im neuen und individuellen Onlinedesign von holzweg auftreten.',\n website: 'https://www.voltadol.at/',\n logo: haleon,\n backgroundImage: gskgebro,\n color: '#2ee01c',\n detailPageLink: '/projekte/haleon-gebro',\n altText: 'Multidomain Website Haleon-Gebro'\n },\n {\n customer: 'Wirtschaftskammer Tirol',\n project: 'Digitale Lernwelt für Lehrlinge',\n description:\n 'Mit der Lernplattform \"Deine Lehre\", auf Open Source Basis, können individuelle Anforderungen umgesetzt werden. Mit der Verwendung von Moodle als Lernplattform können Lernmaterialien als Kurse bereitgestellt werden und durch die Integration von H5P ist die Möglichkeit gegeben interaktive Lerninhalte zu erstellen. ',\n website: 'https://textil.deinelehre.at/login',\n logo: wkologo,\n backgroundImage: wko,\n color: '#DF1526',\n detailPageLink: '/projekte/wirtschaftskammer',\n altText: 'Website Lernplattform'\n },\n {\n customer: 'alupress',\n project: 'Website Relaunch',\n description:\n 'Eine Mulitportallösung auf Basis von Typo3. Die klaren Strukturen, die übersichtliche Menüführung und die mehrsprachige Auflegung bieten den Usern ein angenehmes und freundliches Interface. ',\n website: 'https://www.alupress.com/',\n logo: aluplogo,\n backgroundImage: alupress,\n color: '#00a7e5',\n detailPageLink: '/projekte/alupress',\n altText: 'Website alupress'\n },\n {\n customer: 'Rauchmühle',\n project: 'Relaunch Website',\n description:\n 'Die neue Website der Rauchmühle überzeugt mit vielen Bildern und übersichtlicher Produktpräsentation. Wordpress sorgt für eine einfache und schnelle Wartung. Monatliche Rezeptvorschläge erfreuen alle koch- und backaffine User.',\n website: 'http://www.rauchmehl.at',\n logo: rauchmehlLogo,\n backgroundImage: rauchmehl,\n color: '#009a3d',\n detailPageLink: '/projekte/rauchmehl',\n altText: 'Relaunch Website'\n },\n {\n customer: 'Klepsch-Gruppe',\n project: 'Redesign Multiportalsystem',\n description:\n 'Das Multiportalsystem der Klepsch-Gruppe wurde einem Soft-Redesign unterzogen, um dem State-of-the-art des Webs zu folgen. Das Redesign umfasste ein Umgestalten aller Contentelemente, um diese lese-freundlicher zu machen.',\n website: 'https://www.klepschgroup.com/de/startseite',\n logo: klepschlogo,\n backgroundImage: klepsch,\n color: '#ca1e27',\n detailPageLink: '/projekte/klepsch-group',\n altText: 'Website Klepsch-group'\n },\n {\n customer: 'Neue Heimat Tirol',\n project: 'Intranet',\n description:\n 'Für Organisationen, die ihre Geschäftsprozesse optimieren und die Kommunikation sowie den Zugriff auf Informationen innerhalb des Unternehmens erleichtern wollen, gibt es keine bessere Option als die Implementierung eines Intranets.',\n website: 'https://neueheimat.tirol/',\n logo: nhtlogo,\n backgroundImage: nht,\n detailPageLink: '/projekte/nht',\n color: '#981A34',\n altText: 'Zur Website'\n },\n {\n customer: 'Diözese Innsbruck',\n project: 'Soft-Relaunch Website',\n description:\n 'Die Diözese Innsbruck ist einer unserer Lieblings-Stammkunden. Seit 2003 vertrauen sie auf die Konzeption und Umsetzung der holzweg GmbH. Dieses Mal wurde das Design dezent überarbeitet und ein paar neue Features eingebaut. Seht selbst: ',\n website: 'https://www.dibk.at',\n logo: dibklogo,\n backgroundImage: dibk,\n detailPageLink: '/projekte/dioezese',\n color: '#FEA000',\n altText: 'Zur Website'\n },\n {\n customer: 'Intercable',\n project: 'Multiportalsystem und responsive Webshop',\n description:\n 'Für das Multiportalsystem intercable.it wurde die OpenSource Lösung eZ-Publish eingesetzt. Für ein strukturiertes Management der Inhalte, ist der Auftritt bis dato in drei Portale gegliedert.',\n website: 'https://www.intercable.com/de/',\n logo: intercablelogo,\n backgroundImage: intercable,\n color: '#ca1e27',\n detailPageLink: '/projekte/intercable',\n altText: 'Website Intercable'\n },\n {\n customer: 'Hall.AG',\n project: 'Soft-Relaunch Website',\n description:\n 'Eine Website, die inhaltlich gut funktioniert und vom Design her gut ankommt, aber doch ein wenig moderner sein könnte, bekommt einen Soft-Relaunch. Kund:innen finden sich nach wie vor super zurecht, da vieles gleich bleibt. Trotzdem schaut alles ein bisschen neu aus!',\n website: 'https://www.hall.ag',\n logo: halllogo,\n backgroundImage: hall,\n color: '#e30613',\n altText: 'Relaunch Website'\n },\n {\n customer: 'Stadtamt Hall',\n project: 'Relaunch Website',\n description:\n 'Vorhang auf für das Stadtamt Hall in Tirol! Die neu gestaltete Website überzeugt mit einem aufgeräumten, aber sehr lebendigen Design, einer übersichtlichen Navigation zu allen Bürgerthemen und vielen Details sowie zahlreichen Informationen. Wenn Sie Hall noch nicht lieben, könnte Ihnen diese Seite dabei helfen ❤',\n website: 'https://www.hall-in-tirol.at/',\n logo: stadtamthallLogo,\n backgroundImage: stadtamthall,\n color: '#ca1e27',\n detailPageLink: '/projekte/stadtamthall',\n altText: 'Relaunch Website'\n },\n {\n customer: 'Wedl Handelshaus',\n project: 'Relaunch der Wedl-Website',\n description:\n 'Vor ein paar Jahren konnten wir eine neue, kundenorientierte Website für das Wedl Handelshaus mit emotionaler Bildsprache, fesselnden Inhalten und Fokus auf unkomplizierter Jobsuche an verschiedenen Standorten entwickeln. Die interaktive Karte zeigt die Ansprechpartner und Standorte für eine benutzerfreundliche Erfahrung.',\n website: 'https://www.wedl.com',\n logo: wedllogo,\n backgroundImage: wedl,\n color: '#ca1e27',\n detailPageLink: '/projekte/wedl',\n altText: 'Website Wedl'\n },\n {\n customer: 'Arbeiterkammer Tirol',\n project: 'Online mit Köpfchen',\n description:\n 'In enger Zusammenarbeit mit dem Kunden wurde ein Tool für die Durchführung von Workshops inklusive Quiz konzipiert und als Web-App umgesetzt. Anhand von ausgewählten Beispielen sollen die Schülerinnen und Schüler das Handeln im Internet hinterfragen und hilfreiche Informationen für die eigene Anwendung bekommen.',\n website: 'https://omk.tirol/student/login',\n logo: aklogo,\n backgroundImage: akbg,\n color: '#00a7e5',\n detailPageLink: '/projekte/arbeiterkammer',\n altText: 'Website Arbeiterkammer'\n },\n {\n customer: 'TQ-Systems',\n project: 'Relaunch Multiportalsystem',\n description:\n 'Wie bringt man Mikrocontroller, E-Bike-Antriebe und flug- und medizintechnische Geräte mit neuer Corporate Identity unter einen Hut? Sehen Sie selbst:',\n website: 'https://www.tq-group.com',\n logo: tqlogo,\n backgroundImage: tq,\n color: '#00a7e5',\n detailPageLink: '/projekte/relaunch-tq-group',\n altText: 'Relaunch Multiportale'\n },\n {\n customer: 'Pan',\n project: 'Multilinguale Website',\n description:\n 'Eine übersichtliche Website in 3 Sprachen (DE, IT, ENG). Klare Menüstruktur ausgeführt mit Typo3. User finden sich schnell und einfach zurecht und gelangen rasch zu Produkten und Kontaktmöglichkeiten.',\n website: 'https://www.pan.it/de/grosshandel',\n logo: panlogo,\n backgroundImage: pan,\n color: '#ca1e27',\n altText: 'Website Pan'\n },\n {\n customer: 'Energie Tirol',\n project: 'Effiziente Projektverwaltung',\n description:\n 'Für die Beratungsdienstleister Energie Tirol, bietet die neue Plattform eine zentrale Verwaltungsmöglichkeit alle Gemeinden sowie Projekte an einem zentralen Punkt zu verwalten. Es ist ein spannendes Projekt für einen guten Zweck und wir freuen uns, Teil davon sein zu dürfen.',\n website: 'https://www.energie-tirol.at/',\n logo: etlogo,\n backgroundImage: et,\n color: '#1158A0',\n detailPageLink: '/projekte/energietirol',\n altText: 'Website Energie Tirol'\n },\n {\n customer: 'Berufsreise',\n project: 'Plattform zur Berufsorientierung',\n description:\n 'Wir haben für das WIFI Wirtschaftskammer Tirol das Webportal berufsreise.at entwickelt. Schüler, Lehrer, Eltern und Unternehmer können sich auf der Plattform austauschen, Profile erstellen, kommunizieren und Veranstaltungen teilen. Das Berufsreisespiel ist ein zentrales Element der Seite. Das Spiel ermöglicht das Sammeln von Punkten für zukünftige Prämien und Preise.',\n website: 'https://www.berufsreise.at/',\n logo: berufsreiselogo,\n backgroundImage: berufsreise,\n color: '#ca1e27',\n detailPageLink: '/projekte/berufsreise',\n altText: 'Website Berufsreise'\n },\n {\n customer: 'Colompac',\n project: 'Responsive Website mit praktischen Tools',\n description:\n 'Eine tolle Website mit praktischen Tools. Per Filter ist es möglich sich direkt die richtige Verpackungsgröße berechnen zu lassen um so schnell das perfekte Produkt zu finden. ',\n website: 'https://www.colompac.com/',\n logo: colomlogo,\n backgroundImage: colompac,\n color: '#ca1e27',\n altText: 'Website Colompac'\n },\n {\n customer: 'Stubai ZMV GmbH',\n project: 'Relaunch Website',\n description:\n 'Stubai - mehr als nur traumhafte Gebirgslandschaften, Gletscher & Natur pur? Das Gebiet unweit von Innsbruck hat sich nicht nur als Tourismusregion einen Namen gemacht! Das Stubaital bietet auch ein ideales Umfeld für die Produktion der hochwertigen STUBAI Werkzeuge.',\n website: 'https://www.stubai.com/de/start/',\n logo: stubailogo,\n backgroundImage: stubai,\n color: '#e30613',\n altText: 'Relaunch Website'\n },\n {\n customer: 'Wer Hilft Wie',\n project: 'Suchmaschine',\n description:\n 'Das Team der Landesvolksanwaltschaft hat gemeinsam mit der Telefonseelsorge Innsbruck eine Suchmaschine entwickelt, die online rund 700 Einrichtungen im Sozial- und Behindertenbereich erfasst.',\n website: 'https://werhilftwie-tirol.at/',\n logo: whwlogo,\n backgroundImage: whw,\n detailPageLink: '/projekte/werhilftwie',\n color: '#ca1e27',\n altText: 'Zur Website'\n },\n {\n customer: 'Stadtmuseum Hall',\n project: 'Responsive Website mit integrierter Karriereseite',\n description:\n 'Das Stadtmuseum Hall informiert über laufende und vergangene Ausstellungen und Führungen. Der Kunde bearbeitet diese Wordpress Webseite selbst und hält diese am aktuellen Stand.',\n website: 'https://stadtmuseumhall.at/',\n logo: museumhalllogo,\n backgroundImage: museumhall,\n color: '#ccae00',\n altText: 'Website Stadtmuseum Hall'\n },\n {\n customer: 'Bio Heizwerk Steinach am Brenner ',\n project: 'Responsive Website',\n description:\n 'Die Bio Heizwerk Steinach a. Br. GmbH betreibt ein Nahwärmenetz im Gemeindegebiet Steinach am Brenner und wurde als Unterprojekt unseres langjährigen Kunden der Innsbrucker Kommunalbetriebe aufgenommen. Eine Wordpress Landingpage ist hier genau das Richtige. Mit klarer Leitlinie und direkter Verlinkung wie zum Beispiel zur Störhotline.',\n website: 'https://www.bioheizwerk-steinach.at/',\n logo: bhlogo,\n backgroundImage: bh,\n color: '#009a3d',\n altText: 'Website Bioheizwerk Steinach am Brenner'\n },\n {\n customer: 'Augenaerztin ',\n project: 'Landingpage',\n description:\n 'Eine einfache Wordpress Landingpage mit klaren Strukturen und übersichtlicher Menüführung, erleichtert jedem Patienten und Interessierten von Dr. med. univ. Quynh Anh Nguyen, schnell und unkompliziert einen Termin zu buchen, Kontaktdaten der Praxis zu erhalten oder an andere wichtige Information zu gelangen.',\n website: 'https://www.augenaerztin-innsbruck.at/',\n logo: aalogo,\n backgroundImage: aa,\n color: '#00a7e5',\n altText: 'Website Augenärztin Innsbruck'\n }\n]\n\nconst ProjectOverview = () => {\n return (\n
\n )\n}\n\nexport default TextBox\n","import React from 'react'\nimport Link from 'gatsby-link'\nimport './index.scss'\n\nconst BlogOverviewItem = ({ blog }) => {\n const tagStyle = () => {\n switch (blog.tag) {\n case 'Technologie':\n return { color: '#2b2ba5' }\n case 'ui':\n return { color: 'var(--secondary-color)' }\n case 'ux':\n return { color: 'var(--secondary-color)' }\n case 'Karriere':\n return { color: '#1e940e' }\n default:\n return {}\n }\n }\n\n const tagText = () => {\n switch (blog.tag) {\n case 'Technologie':\n return 'Technologie'\n case 'ui':\n return 'UI - User Interface'\n case 'ux':\n return 'UX - User Experience'\n default:\n return blog.tag\n }\n }\n return (\n
\n
\n {blog.backgroundImage ? (\n
\n \n
\n ) : (\n \n )}\n
\n {tagText()}\n
{blog.headline}
\n
{blog.subheadline}
\n {blog.readingTime ? (\n
\n {blog.readingTime} Min. lesen\n
\n ) : (\n ''\n )}\n
\n
\n \n
\n )\n}\n\nexport default BlogOverviewItem\n","import React from 'react'\nimport './index.scss'\nimport BlogOverviewItem from './BlogOverviewItem'\n\nconst BlogOverview = ({ blogs, title }) => {\n return (\n
\n
\n {title}\n
\n
\n {\n blogs.map((blog, index) => (\n \n ))\n }\n
\n
\n )\n}\n\nexport default BlogOverview\n","export default __webpack_public_path__ + \"static/test-4bbb9186133024829cb92783f78a2f34.jpg\";","import React from 'react'\nimport Link from 'gatsby-link'\nimport './index.scss'\n\nimport konzeption from '../../assets/kompetenzen/test.jpg'\nimport potential from '../../assets/kompetenzen/test.jpg'\nimport foerderung from '../../assets/kompetenzen/test.jpg'\nimport usecase from '../../assets/kompetenzen/test.jpg'\nimport onlinemarketing from '../../assets/kompetenzen/test.jpg'\nimport socialmedia from '../../assets/kompetenzen/test.jpg'\nimport seo from '../../assets/kompetenzen/test.jpg'\nimport trends from '../../assets/kompetenzen/test.jpg'\nimport ux from '../../assets/kompetenzen/test.jpg'\nimport wireframes from '../../assets/kompetenzen/test.jpg'\nimport animation from '../../assets/kompetenzen/test.jpg'\nimport programmierung from '../../assets/kompetenzen/test.jpg'\nimport multiportal from '../../assets/kompetenzen/test.jpg'\nimport pimdam from '../../assets/kompetenzen/test.jpg'\nimport progressiv from '../../assets/kompetenzen/test.jpg'\nimport shop from '../../assets/kompetenzen/test.jpg'\nimport crm from '../../assets/kompetenzen/test.jpg'\nimport individual from '../../assets/kompetenzen/test.jpg'\nimport schnittstellen from '../../assets/kompetenzen/test.jpg'\nimport datenbanken from '../../assets/kompetenzen/test.jpg'\nimport cms from '../../assets/kompetenzen/test.jpg'\n\nconst Competences = () => {\n return (\n
\n \n
\n
\n Tech\n \n no\n \n lo\n \n gie\n
\n
\n Entwicklungen aus unserer Hand können technisch hoch innovativ und\n komplex, aber auch standardisiert und schnell in der Umsetzung sein.\n Wir richten uns nach Ihrem Bedarf und liefern genau die Lösung, die\n Ihr Unternehmen benötigt!\n
\n
\n
\n
\n
Website- Programmierung
\n
\n Ihre Firmenwebsite ist nicht mehr state-of-the-art und spricht\n Ihre Kund:innen nicht mehr an? Sie hatten noch nie eine eigene\n Unternehmensseite und möchten nun auch endlich im Web\n professionell vertreten sein? Wir verstehen unser Handwerk und\n gestalten die für Sie perfekte Homepage mit der für Sie perfekten\n Lösung!{' '}\n
\n
\n
\n
\n Multiportal\n \n systeme\n
\n
\n Unsere Multiportalsysteme erlauben eine einfache, schnelle und\n sichere Verwaltung komplexer Content- und Informationsstrukturen.\n Erstellen Sie mit wenig Aufwand und geringen Kosten neue\n Markenwebsites und kommen Sie mit neuen Produkten noch schneller\n auf den Markt.\n
\n
\n
\n
PIM-/DAM-Systeme
\n
\n Produktinformationsmanagement - Deutliche Effizienzsteigerung von\n internen Prozessen durch das zentrale Einpflegen und Warten von\n Produktdaten. Wir helfen Ihnen dabei, dass all Ihre\n Vertriebskanäle mit konsistenter Information beliefert werden\n können - in verschiedenen Sprachen und Kommunikationssystemen.\n
\n \n
\n
\n
Progressive Web-App
\n
\n Sie suchen nach der perfekten App-Lösung für Ihre Idee? Wir\n schwören auf die Technologie von progressive Web-Apps! Neben einer\n sehr kostengünstigen Umsetzung bieten sie den Vorteil, dass sie\n unabhängig von Stores mit nur einem Klick installiert werden\n können. Trotzdem ist Ihre App auch offline verwendbar und bietet\n neben einer hohen Performance den Vorteil, dass sie über\n Suchmaschinen gefunden wird.\n
\n
\n
\n
Shop-Lösungen
\n
\n Wir sind Ihr kompetenter Ansprechpartner, wenn es um das Thema\n Web-Shops geht. Ob B2B oder B2C, wir bieten die richtige\n Softwarelösung für Ihr Business!{' '}\n
\n
\n
\n
CRM
\n
\n Customer Relationship Management. Alle Informationen über Kund:innen,\n Partner etc. machen nur Sinn, wenn sie von Ihnen regelmäßig und\n sinnvoll gewartet werden. Ein System von holzweg zentralisiert die\n Daten und hilft Ihnen dabei, mehr zu wissen und besser zu\n kommunizieren. Was das für Sie konkret heißt: Umsatzsteigerung,\n Kundenbindung, Kostensenkung!\n
\n
\n
\n
\n Individual\n \n software\n
\n
\n Es muss nicht alles neu erfunden werden, aber dennoch begeben wir\n uns gerne mit Ihnen gemeinsam auf neue Pfade und entwickeln\n individuelle Highend-Lösungen für Ihre anspruchsvollen und\n innovativen Geschäftsmodelle. Dort wo Standardsoftware nicht mehr\n passt, erfinden wir eben doch Neues - vom ersten Bit für unsere\n Kund:innen gemacht!\n
\n \n
\n
\n
\n Schnitt\n \n stellen\n
\n
\n Um Sie vor wiederkehrenden stupiden Arbeiten zu verschonen,\n konzipieren wir für Sie die perfekte Lösung. Schnittstellen\n verhindern, dass Ihre Datensätze auseinanderlaufen. Copy&paste\n gehört der Vergangenheit an! Ob Schnittstellenimport, Import- und\n Export Routinen für den automatisierten Datenaustausch oder die\n Vernetzung Ihrer Systeme - wir erleichtern Ihre Arbeit!\n
\n \n
\n
\n
\n Daten\n \n banken\n
\n
\n Scheuen Sie sich nicht, uns mit jeglichen Fragen rund um das\n komplexe Themengebiet der Datenbanken zu konfrontieren! Wir\n verstehen schwierige Zusammenhänge und erarbeiten mit großer\n Leidenschaft die beste Lösung für all Ihre Fragestellungen!\n
\n
\n
\n
CMS
\n
\n Content Management Systeme ermöglichen es Ihnen, dass Sie selbst\n die Inhalte Ihrer Webseite verwalten und organisieren können. Über\n Rechtevergaben können Sie entscheiden, wer von Ihren Autoren an\n welchen Orten Bilder, Texte etc. bearbeiten darf. Wir unterstützen\n Sie bei der Wahl des für sie am besten geigneten CMS (z.B.\n Wordpress, Typo3, eZ Platform) und setzen Ihr Website auf dieser\n Basis um.\n
\n
\n
\n
\n
Strategie
\n
\n Wir entwickeln gemeinsam mit Ihnen Strategien für Ihre Webprobjekte.\n Auf Wunsch analysieren wir Ihre Internetpräsenz und Ihre digitalen\n Prozesse und erarbeiten Lösungen, die für Sie passen. Unsere\n Beratungen sind so individuell wie unsere Kund:innen.\n
\n
\n
\n
\n
Konzeption
\n
\n Ihre Ziele packen wir in einen strukturierten Rahmen! Von der\n Bedarfserhebung und Definition von konkreten Anforderungen\n (Lastenheft) über die Ausdefinition der konkreten Funktionen\n (Pflichtenheft) bis hin zur Konkretisierung wichtiger\n Projektparameter wie Zeitplan und Ressourcenplan, begleiten wir\n Ihr Vorhaben durch alle Projektphasen.\n
\n
\n
\n
\n Potential\n \n analyse\n
\n
\n Unsere zertifzierten Consultants durchleuchten mit Ihnen\n gemeinsams Ihren digitalen Status-quo und decken Potentiale auf.\n Nutzen Sie unser Know-how und holen Sie sich Ihren\n Beratungstermin.\n
\n
\n
\n
Fördermanagement
\n
\n Welche Fördermöglichkeiten gibt es für Ihre Idee oder Ihr Projekt?\n Wir erarbeiten mit Ihnen Möglichkeiten, helfen beim Förderansuchen\n und übernehmen auch gerne das Fördermanagement für Sie.\n
\n
\n
\n
Use Cases & Personas
\n
\n Wechseln Sie mit uns einfach mal die Perspektive. Überlegen wir\n uns, wie Ihre typischen User denken, was sie sich erwarten, was\n sie brauchen. Das Ausarbeiten von typischen Szenarien und das\n überblicksartige Abbilden von Zusammenhängen helfen bei der\n konkreten Zieldefinition. Diese Überlegungen bilden die Basis für\n die Entwicklung der Benutzeroberfläche Ihrer Lösung.\n
\n
\n
\n
Online Marketing
\n
\n Werden Sie von Ihren Kund:innen gefunden! Wir erarbeiten mit Ihnen\n eine klare Online Marketing Strategie und planen zielgerichtete\n Kampagnen auf Google, Facebook, Whatsapp etc. Wir betreuen Ihre\n Kampagnen und liefern regelmäßige und aussagekräftige Berichte,\n die zur Optimierung der Strategie beitragen.\n
\n
\n
\n
Social Media
\n
\n Wo liegen die Möglichkeiten und Potentiale von Facebook und Co.?\n Wir schauen uns mit Ihnen die Trends an, erarbeiten mit Ihnen eine\n sinnvolle Strategie und erstellen gemeinsam einen Redaktionsplan.\n
\n
\n
\n
SEO
\n
\n Wir helfen Ihnen zu einer Top Positionierung in den Suchmaschinen\n durch SEO Analysen, Konzepte, konkrete Vorschläge und regelmäßigem\n Monitoring. Gerne führen wir Vorort-Schulungen durch und machen\n Ihr Team SEO-fit.\n
\n
\n
\n
Trends
\n
\n Bleiben Sie mit uns am Ball der Zeit! Wir beobachten Trends und\n informieren unsere Kund:innen über Entwicklungen und Möglichkeiten.\n Wir möchten, dass Sie digital fit bleiben und unterstützen Sie\n dabei mit unserem Know-how!\n
\n
\n
\n
\n
Design
\n
\n Die Webdesigns von holzweg zeichnen sich nicht nur durch ihre Schönheit und Modernität aus, sondern sind auch auf die Bedürfnisse der Benutzer:innen ausgerichtet. Wir beeindrucken Sie mit innovativen und bahnbrechenden Elementen. Zudem legen wir großen Wert darauf, dass unsere Designs Ihren Anforderungen und Ihrer Corporate Identity entsprechen.\n
\n
\n
\n
\n
User Experience Design
\n
\n Webdesigns von holzweg sind nicht nur schön, sondern auch\n benutzerorientiert. Unsere Web- und Software-Designs passen für\n alle Endgeräte, egal ob PCs, Tablets oder Smartphones.\n
\n
\n
\n
Wireframes / Mockups
\n
\n Gemeinsam mit Ihnen können wir die Strukturen und Elemente der\n Weblösung optimal konzipieren. Bereits in einer sehr frühen Phase\n des Projekts erhalten Sie dank Wireframes und Mockups eine\n konkrete Vorstellung über Aufbau und Funktion Ihrer Website oder\n die Benutzeroberfläche Ihrer Softwarelösung.\n
\n
\n
\n
Animation
\n
\n Mit Animationen können Sie Ihren Kund:innen noch mehr Service bieten!\n Z.B. als Kurzvideos in Form von Gebrauchsanweisungen oder\n Installationsanleitungen oder als animierte Landkarten zur\n besseren Suche des nächsten Shops oder Ansprechpartners. Es gibt\n so viele Möglichkeiten, überlegen Sie mit uns gemeinsam!\n
\n )\n}\n\nexport default TextBox\n","import React from 'react'\nimport Link from 'gatsby-link'\nimport './index.scss'\n\nimport backgroundImage from '../../assets/Auftragsabwicklung.png'\n\nconst ErpModule = ({ title, text, textBelow, image, link }) => {\n\n return (\n
\n
\n
\n {title}\n
\n
\n
\n {text}\n
\n \n \n \n
\n
\n {textBelow}\n
\n
\n
\n \n Mehr erfahren\n \n
\n
\n \n Demo anfordern\n \n
\n
\n
\n
\n )\n}\n\nexport default ErpModule","import React, { useEffect, useState, useRef } from 'react'\nimport './index.scss'\n\nconst arrows = [\n { title: 'Akquisition', color: '#FFA500', text: 'Die Akquisition von potenziellen Kund:innen ist ein wichtiger Schritt bei der Entwicklung einer Strategie. Mit gezielten Zielgruppenanalysen und effektiven Marketingaktivitäten können Sie Ihre Reichweite erhöhen und neue Kund:innen gewinnen. Dies hilft, Ihre Marke bekannt zu machen und Ihre Umsätze zu steigern.' },\n { title: 'Orientierung', color: '#0072C6', text: 'Eine klare Orientierung ist ein wichtiger Aspekt bei der Strategieentwicklung. Eine klare Positionierung und die Identifikation der Bedürfnisse Ihrer Zielgruppe können Ihnen dabei helfen, eine Strategie zu entwickeln, die auf Ihre Ziele ausgerichtet ist. Durch eine klare Orientierung können Sie Ihre Zielgruppe besser ansprechen und langfristige Beziehungen aufbauen.' },\n { title: 'Navigation', color: '#00A98F', text: 'Eine effektive Navigation ist entscheidend für den Erfolg Ihrer Website bzw. der Usability Ihrer individuellen Softwarelösung und sollte bei der Strategieentwicklung berücksichtigt werden. Eine gut durchdachte Navigation hilft Benutzer:innen, schnell und einfach die gewünschten Inhalte zu finden. Eine einfache und intuitive Navigation kann die Benutzerfreundlichkeit Ihrer Website verbessern und zu einer höheren Conversion-Rate führen.' },\n { title: 'Information', color: '#8A2BE2', text: 'Die Bereitstellung relevanter Informationen ist eine wichtige Komponente jeder Strategie. Durch eine gründliche Recherche und Analyse Ihrer Zielgruppe sowie die Erstellung von qualitativ hochwertigen Inhalten können Sie das Interesse Ihrer Zielgruppe wecken und sie informieren. Durch die Bereitstellung relevanter Informationen können Sie das Vertrauen Ihrer Zielgruppe gewinnen und sich als Experte auf Ihrem Gebiet positionieren.' },\n { title: 'Aktion', color: '#FF4136', text: 'Eine Strategie sollte darauf abzielen, dass Ihre Zielgruppe eine bestimmte Aktion ausführt, wie beispielsweise den Kauf eines Produkts oder die Kontaktaufnahme mit Ihnen. Eine klare Handlungsaufforderung und ein effektiver Call-to-Action können Ihnen dabei helfen, Ihre Ziele zu erreichen. Eine gut platzierte Handlungsaufforderung kann Besuchern Ihrer Website helfen, schnell und einfach eine Aktion auszuführen.' },\n { title: 'Loyalität', color: '#9B9B9B', text: 'Die Schaffung von Loyalität ist ein wichtiger Bestandteil jeder Strategie. Indem Sie eine langfristige Beziehung zu Ihren Kund:innen aufbauen und ihre Bedürfnisse erfüllen, können Sie die Loyalität Ihrer Kund:innen gewinnen und langfristigen Erfolg sichern. Durch die Schaffung von Loyalität können Sie das Vertrauen Ihrer Kund:innen gewinnen und sie dazu ermutigen, wiederholt bei Ihnen einzukaufen und Ihre Marke weiterzuempfehlen.' }\n]\nconst CustomerJourney = () => {\n\n const containerRef = useRef(null);\n const intervalRef = useRef(null);\n let i = 0;\n const delay = 30;\n const scrollIncrement = 0.5;\n const [manualScroll, setManualScroll] = useState(false);\n\n useEffect(() => {\n if (containerRef.current && !manualScroll) {\n intervalRef.current = setInterval(() => {\n containerRef.current.scrollTo(i, 0);\n i += scrollIncrement;\n if (i >= containerRef.current.scrollWidth) {\n i = 0;\n clearInterval(intervalRef.current);\n setTimeout(() => {\n intervalRef.current = setInterval(() => {\n containerRef.current.scrollTo(i, 0);\n i += scrollIncrement;\n if (i >= containerRef.current.scrollWidth) {\n i = 0;\n }\n }, delay);\n }, delay);\n }\n }, delay);\n }\n return () => {\n clearInterval(intervalRef.current);\n };\n }, [manualScroll, i]);\n\n\n const handleMouseOver = () => {\n setManualScroll(true);\n clearInterval(intervalRef.current);\n };\n\n const handleClick = () => {\n setManualScroll(true);\n clearInterval(intervalRef.current);\n }\n\n return (\n
\n
Customer Journey
\n
\n {arrows.map(({ color, title }, index) => (\n \n \n
\n );\n}\n\nexport default SplitView;","import React from \"react\";\nimport './index.scss'\n\nconst LocalSvg = ({ fill, link }) => (\n \n \n \n);\n\nconst UserSvg = ({ fill, link }) => (\n \n \n \n);\n\nconst BranchSvg = ({ fill, link }) => (\n \n \n \n);\n\nconst gridItems = [\n { title: \"Lokaler Ansprechpartner\", text: \"Profitieren Sie von unserer persönlichen Betreuung, der Ihnen jederzeit mit kompetentem Rat und schneller Hilfe zur Seite steht.\", image: \"local\", color: \"#ffa07a\", link:\"https://www.holzweg.com/kontakt\" },\n { title: \"Verschiedenste Kunden\", text: \"Vertrauen Sie auf die Zufriedenheit einer breiten Palette erfolgreicher Partnerschaften mit Unternehmen aus verschiedensten Branchen.\", image: \"user\", color: \"#F08080\", link:\"https://www.holzweg.com/projekte\" },\n { title: \"25 Jahre Erfahrung\", text: \"Setzen Sie auf einen zuverlässigen Partner mit über 25 Jahren Erfahrung. Unsere fundiertes Know-how stehen für nachhaltige Lösungen und exzellenten Service.\", image: \"branch\", color: \"#FFB6C1\", link:\"https://www.holzweg.com/internetagentur\" },\n];\n\nconst GridComponent = () => {\n return (\n
\n );\n};\n\nexport default GridComponent;\n","import React from 'react'\nimport './index.scss'\n\nconst BannerCTA = ({ title, text }) => {\n return (\n <>\n
\n
\n
{title}
\n
\n {text}\n
\n \n \n \n \n
\n
\n >\n )\n}\n\nexport default BannerCTA\n //
\n // {text}\n // Sie wollen Ihre Geschäftsprozesse nicht an eine Standard-Software\n // anpassen? Dann wird es höchste Zeit, auf eine für Ihr\n // Unternehmen{' '}\n // \n // perfekt angepasste Individual-Software umzusteigen. {' '}\n // \n // Sichern Sie Ihrem Unternehmen, vor allem jetzt, in diesen Zeiten,{' '}\n // einen sicheren Wettbewerbsvorteil.{' '}\n //
","export default __webpack_public_path__ + \"static/zahnrad-526d4a79646071c6af9b1f3f0ccb98b5.png\";","import React from \"react\";\nimport './index.scss'\nimport zahnrad from '../../assets/zahnrad.png'\n\nconst items = [\n {heading:\"KFZ Lerinhalte Digital\", text:\"KFZ Lehrinhalte immer und überall griffbereit. Mit digitalen und unterschiedlichen Inhaltsformaten bleibt das Lernen spannend.\"},\n {heading:\"Wissensüberprüfung\", text:\"Durch Fragepools, Quizze, offene Fragen und Erklärungen kann Ihr Lehrling effektiv Wissen erwerben und sich leicht auf die LAP vorbereiten.\"},\n {heading:\"Chancengleichheit\", text:\"Setzen Sie mit unserer App ein Zeichen für die Wertschätzung der Lehrlingsausbildung. Auch kleine Betriebe können sich durch die App einen Vorteil verschaffen.\"},\n {heading:\"Digital & Jederzeit griffbereit\", text:\"Die Lehrinhalte sind auf mobilen Endgeräten so wie auch am Desktop immer griffbereit. Praktisch für den Alltag und ideal für die Prüfungsvorbereitung.\"},\n {heading:\"Anpassbarkeit & Erweiterungen\", text:\"Sie haben die Möglichkeit, dass die App an die Bedürfnisse des Betriebes angepasst und erweitert werden kann.\"},\n];\n\nconst erweiterungen = [\n {heading:\"Betriebs-Standards Digitalisiert\", text:\"Halten Sie Ihre Abläufe und Standards digital fest und sparen Sie sich Zeit bei der Einarbeitung. Die Inhalte (Das FirmenWiki) sind jederzeit für Ihre MitarbeiterInnen zugänglich.\"},\n {heading:\"KFZ Fachbegriffe - Übersetzungstool\", text:\"Für nicht deutschsprachige Fachkräfte ein Fachbegriffs-Wörterbuch mit Vorlesefunktion und Erklärung in gewählter Sprache. Zudem eine schnelle Übersetzung von Sätzen ins Deutsche.\"},\n {heading:\"Internes Mitarbeiter Schulungstool\", text:\"Bereiten Sie Ihren Betrieb bestmöglich auf die Zukunft vor. Digitalisieren Sie neue Zertifizierung- und Zugangsstandard für sicherheitsrelevante Reparatur- und Wartungsinformationen und bleiben Sie und Ihr Team immer auf dem neuesten Stand.\"},\n {heading:\"Intranet - Kommunikation vereinfacht\", text:\"Normblätter, Kalender, Chatfunktion - alles in einem Tool. Machen Sie den internen Austausch attraktiv, stärken Sie den Zusammenhalt im Team und somit auch die Mitarbeiterbindung.\"},\n {heading:\"Individuelle Wünsche?\", text:\"Es gibt vielleicht noch weitere Herausforderungen, vor denen Sie stehen. Wir sind uns sicher, dass wir eine Lösung für Sie finden. Verschaffen Sie sich einen Wettbewerbsvorteil und gehen Sie mit der Zeit.\"},\n]\n\nconst LernApp = () => {\n return (\n
Überzeugen Sie sich selbst, und schauen Sie bei unseren bisherigen Projekten vorbei
\n
\n {testimonials.map((testimonial, index) => (\n
\n
\n \"\n
\n
\n {testimonial.text}\n
\n
\n
\n \n
\n
\n
\n {testimonial.company}\n
\n
\n {testimonial.name}\n
\n
\n
\n
\n ))}\n
\n
\n >\n );\n};\n\nexport default Testimonials;\n","export default __webpack_public_path__ + \"static/individual.eglo-b2b-c9bc8dd8225b00dbeab8ee79c6d120f1.png\";","import React from \"react\";\nimport './index.scss'\n\nimport img from '../../assets/individual.eglo-b2b.png'\nimport HoverButton from \"../HoverButton\";\nimport fullservice from '../../assets/projekte/alupress/fullservice.png'\n\nconst ImageList = () => {\n\n const gaEvent = () => {\n if (typeof gtag === 'function') {\n let date = Date.now();\n gtag('event', 'technologie_imglist-kontakt', {\n 'time': date,\n });\n }\n };\n \n return (\n
\n
\n
Ihre Website kann mehr! Wie?
\n
\n Das volle Potential aus Ihrer Website holen!\n
\n
\n
\n
\n
\n
\n
Optimierung interner Prozesse
\n
\n
\n
HR-Prozesse und Terminbuchungen, die interne Abläufe vereinfachen und automatisieren.
\n
\n
\n
\n
\n
B2B-Integration und Portale
\n
\n
\n
Wir integrieren für Sie B2B-Portale und B2B-fokussierte Lösungen, die speziell auf Geschäftskunden ausgerichtet sind.
\n
\n
\n
\n\n
\n {/* mid */}\n
\n \n
\n \n
\n\n
\n
\n
\n
Interaktive Tools und Analysen
\n
\n
\n
Wir entwickeln maßgeschneiderte, interaktive Website-Tools, die Ihre Marke hervorheben und neue sowie bestehende Kunden begeistern.
\n
\n
\n
\n
\n
Benutzerorientierte Funktionen
\n
\n
\n
Mit DSGVO-konformen Tools wie Matomo und Google Analytics schaffen Sie personalisierte Nutzererlebnisse durch tiefgehende Zielgruppenanalysen.
\n
\n
\n
\n
\n
\n
\n
\n
Effiziente Datenverarbeitung
\n
\n
\n
Die nahtlose Integration und Austausch von Kundendaten aus CRM-, ERP- und Newsletter-Tools vermeidet nerviges Copy&Paste. Wir schauen, was für Ihre Situation am geeignetsten ist.
\n
\n
\n
\n
\n
Digitale Publikation und SEO
\n
\n
\n
Digitale Geschäftsberichte, die nicht nur für den Nutzer wertvoll sind, sondern auch die Online-Sichtbarkeit und das Umweltbewusstsein fördern.
\n
\n
\n
\n\n
\n )\n}\n\nexport default ImageList","export default __webpack_public_path__ + \"static/uxdesign_icon_1-0c524e502fb0e6a74096a2e68e122082.svg\";","export default __webpack_public_path__ + \"static/support-59bf55d541a6c5979c83adcb0317cfdd.svg\";","export default __webpack_public_path__ + \"static/implementierung-29aab191308bdb2a52105e032dd0b632.svg\";","import React from \"react\";\nimport './index.scss'\n\nimport Bedarfsanalyse from '../../assets/icons/bedarfsanalyse.svg';\nimport UxUiDesign from '../../assets/icons/uxdesign_icon_1.svg';\nimport Verbesserung from '../../assets/icons/verbesserung.svg';\nimport TechnischeKonzeption from '../../assets/icons/technischeKonzeption.svg';\nimport Support from '../../assets/icons/support.svg';\nimport Implementierung from '../../assets/icons/implementierung.svg';\n\n\nconst GridList = () => {\n // https://www.svgrepo.com/svg/530440/machine-vision\n return (\n
\n
Die holzweg Lösungen
\n
\n Als spezialisierte Web-Agentur liegt unser Fokus auf der Entwicklung innovativer Typo3-Webanwendungen und komplexer Websites, bei denen Qualität im Vordergrund steht. Wir legen großen Wert auf einen engen Austausch mit unseren Kunden, um maßgeschneiderte Lösungen zu bieten, die sowohl technisch als auch strategisch überzeugen. Unser Ziel ist es, die Herausforderungen und Ziele Ihres Unternehmens genau zu verstehen und darauf aufbauend effektive Lösungen zu entwickeln.\n
\n
\n
\n
\n \n
\n Bedarfsanalyse und Beratung\n
\n
\n
\n
Websiteziele werden definiert, Interne Abläufe werden mit Websitefunktionen abgeglichen und Synergiepotential wird erfasst. Lösungsoptionen werden gebrainstormed und anschließend gemeinsam besprochen.
\n
\n
\n
\n
\n \n
\n UX-/ UI-Design\n
\n
\n
\n
Unser Ziel ist es, eine intuitive Benutzeroberfläche zu schaffen, die Nutzern ermöglicht, schnell zu finden, wonach sie suchen. Das Designteam entwirft ein maßgeschneidertes Websitedesign, das Ihre Unternehmensidentität widerspiegelt.
\n
\n
\n
\n
\n \n
\n Technische Konzeption und Architektur\n
\n
\n
\n
Wir wählen passende Technologien für Ihren Use-Case und berücksichtigen alle technischen Aspekte, auf die Sie sich verlassen können.
\n\n
\n
\n
\n
\n \n
\n Implementierung\n
\n
\n
\n
In einem agilen SCRUM-Prozess erfolgt die Implementierung zeitgerecht und präzise, mit abschließenden Tests vor dem Livegang der Website.
\n
\n
\n
\n
\n \n
\n Support\n
\n
\n
\n
Unser Support-Service umfasst Updates, 2nd Level Support und SLA-Angebote. Wir agieren proaktiv und stehen Ihnen jederzeit zur Verfügung, unterstützt durch regelmäßige Abstimmungen, um bestmöglich auf Ihre Bedürfnisse einzugehen.
\n
\n
\n
\n
\n \n
\n Kontinuierliche Verbesserung\n
\n
\n
\n
Wir bieten kontinuierliche Überwachung und Analyse der Website-Performance sowie regelmäßige Updates und Optimierungen, um sicherzustellen, dass Ihre Website stets den aktuellen Anforderungen und Best Practices entspricht.