diff --git a/inc/Data.php b/inc/Data.php
index 34a836f4..743e5c67 100644
--- a/inc/Data.php
+++ b/inc/Data.php
@@ -27,6 +27,8 @@ public static function runtime() {
'resturl' => \get_home_url() . '/index.php?rest_route=',
'wpversion' => $wp_version,
'admin' => \admin_url(),
+ 'siteurl' => \get_site_url(),
+ 'sitetitle' => htmlspecialchars_decode( \get_bloginfo( 'name' ) ),
'assets' => HOSTGATOR_PLUGIN_URL . 'assets/',
'brand' => get_option( 'mm_brand', false ),
'region' => get_option( 'hg_region', false ),
diff --git a/src/app/components/header/index.js b/src/app/components/header/index.js
deleted file mode 100644
index a76bf79a..00000000
--- a/src/app/components/header/index.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import './stylesheet.scss';
-
-import Logo from './logo';
-import NavLarge from './nav-large';
-import NavMobile from './nav-mobile';
-import NavUtility from './nav-utility';
-import { useViewportMatch } from '@wordpress/compose';
-
-const Header = () => {
- const isLargeViewport = useViewportMatch('medium');
- return (
-
-
- {isLargeViewport && (
-
- )}
-
- );
-};
-
-export default Header;
diff --git a/src/app/components/header/logo.js b/src/app/components/header/logo.js
deleted file mode 100644
index a87f3b9d..00000000
--- a/src/app/components/header/logo.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Heading } from '../../components';
-import { ReactComponent as Brand } from '../../../../assets/svg/nav-for-light.svg';
-import { Button } from '@wordpress/components';
-
-const Logo = () => {
- return (
-
- }
- style={{ height: '39px' }}
- iconSize={39}
- href="#/home"
- >
-
- {__('HostGator WordPress Plugin', 'wp-plugin-hostgator')}
-
-
- );
-};
-
-export default Logo;
diff --git a/src/app/components/header/nav-large.js b/src/app/components/header/nav-large.js
deleted file mode 100644
index bb58559f..00000000
--- a/src/app/components/header/nav-large.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { NavLink } from 'react-router-dom';
-import { topRoutes } from '../../data/routes';
-
-const NavLarge = () => (
-
- {topRoutes.map((page) => (
- -
-
- {page.title}
-
-
- ))}
-
-);
-
-export default NavLarge;
diff --git a/src/app/components/header/nav-mobile.js b/src/app/components/header/nav-mobile.js
deleted file mode 100644
index 509a687b..00000000
--- a/src/app/components/header/nav-mobile.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Button, Modal } from '@wordpress/components';
-import { menu } from '@wordpress/icons';
-import { topRoutes } from '../../data/routes';
-import { NavLink } from 'react-router-dom';
-
-const NavMobile = () => {
- const [isOpen, setIsOpen] = useState(false);
- const MobileMenu = () => {
- return (
-
- {topRoutes.map((page) => (
- -
- setIsOpen(false)}
- className={`components-button is-secondary mobile-link-${page.title}`}
- style={{ width: '100%', textAlign: 'center' }}
- >
- {page.title}
-
-
- ))}
-
- );
- };
- return (
-
-
- );
-};
-
-export default NavMobile;
diff --git a/src/app/components/header/nav-utility.js b/src/app/components/header/nav-utility.js
deleted file mode 100644
index 68d7558f..00000000
--- a/src/app/components/header/nav-utility.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Icon } from '@wordpress/icons';
-import { Dashicon } from '@wordpress/components';
-import { NavLink } from 'react-router-dom';
-import { utilityRoutes } from '../../data/routes';
-
-const NavUtility = () => (
-
- {utilityRoutes.map((page) => (
- -
-
- {page.Icon && (
-
- )}
- {page.Dashicon && (
-
- )}
-
-
- ))}
-
-);
-
-export default NavUtility;
diff --git a/src/app/components/header/stylesheet.scss b/src/app/components/header/stylesheet.scss
deleted file mode 100644
index a2fbf0de..00000000
--- a/src/app/components/header/stylesheet.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-.hgwp-header {
- align-content: center;
- background: var(--color-white);
- box-shadow: 0 3px 9px 0 rgb(42 47 69 / 10%), 0 2px 5px 0 rgb(42 47 69 / 8%), 0 1px 1.5px 0 rgb(0 0 0 / 8%), 0 1px 2px 0 rgb(0 0 0 / 8%);
- display:flex;
- align-items: center;
- justify-content: space-between;
- padding: 12px 12px 12px 0;
- &-inner {
- display: flex;
- justify-content: space-between;
- align-items: center;
- max-width: 1320px;
- margin: 0 auto;
- width: 100%;
- }
-}
-
-.hgwp-logo-wrap {
- margin-left: 12px;
- a.components-button {
- padding: 2rem 12px;
- }
-}
-
-.hgwp-nav-utility {
- align-content: center;
- display: flex;
-}
-.hgwp-nav-utility-link {
- display: block;
- margin: 6px 16px 0 0;
-}
-
-.hgwp-nav {
- border-bottom: 1px solid var(--color-border);
- padding: 6px 12px 0;
-}
-
-.hgwp-nav-large {
- display: flex;
- list-style: none;
- max-width: 1320px;
- margin-left: auto;
- margin-right: auto;
-
- a {
- margin: 0.5rem 1rem 0;
- padding: 0.5rem 0.5rem 1.25rem;
- text-decoration: none;
- transition: all;
-
- &.active {
- box-shadow: inset 0 -3px var(--color-primary-light);
-
- &:focus{
- box-shadow: inset 0 -3px var(--color-primary-light), var(--hgbrand-focus);
- }
- }
- }
-}
-
-.hgwp-nav-utility {
-
- a {
- text-decoration: none;
-
- span.dashicon {
- color: var(--color-primary);
- width: 28px;
- height: 28px;
- font-size: 28px;
- }
-
- &.active {
- fill: var(--color-primary-light);
-
- span.dashicon {
- color: var(--color-primary-light);
- }
- }
- }
-}
-
-.mobile-toggle {
- padding-right: 6px;
-}
\ No newline at end of file
diff --git a/src/app/components/icons/Hostgator.js b/src/app/components/icons/Hostgator.js
new file mode 100644
index 00000000..d0bb2c46
--- /dev/null
+++ b/src/app/components/icons/Hostgator.js
@@ -0,0 +1,156 @@
+const HostgatorIcon = () => {
+ return (
+
+ );
+}
+
+export default HostgatorIcon;
\ No newline at end of file
diff --git a/src/app/components/icons/WordPressIcon.js b/src/app/components/icons/WordPressIcon.js
new file mode 100644
index 00000000..13b45a97
--- /dev/null
+++ b/src/app/components/icons/WordPressIcon.js
@@ -0,0 +1,19 @@
+const WordPressIcon = () => {
+ return (
+
+ );
+}
+
+export default WordPressIcon;
\ No newline at end of file
diff --git a/src/app/components/icons/index.js b/src/app/components/icons/index.js
new file mode 100644
index 00000000..caeb4ea0
--- /dev/null
+++ b/src/app/components/icons/index.js
@@ -0,0 +1,2 @@
+export { default as HostgatorIcon } from './Hostgator';
+export { default as WordPressIcon } from './WordPressIcon';
diff --git a/src/app/components/index.js b/src/app/components/index.js
index 4e1e92fd..34e62fc4 100644
--- a/src/app/components/index.js
+++ b/src/app/components/index.js
@@ -1,4 +1,3 @@
export { default as Accordion } from './accordion';
export { default as ErrorCard } from './errorCard';
-export { default as Header } from './header';
export { default as Heading } from './heading';
diff --git a/src/app/components/site-info/index.js b/src/app/components/site-info/index.js
new file mode 100644
index 00000000..1e8f61f7
--- /dev/null
+++ b/src/app/components/site-info/index.js
@@ -0,0 +1,59 @@
+import { LockClosedIcon, LockOpenIcon } from "@heroicons/react/24/outline";
+import { Button } from "@yoast/ui-library";
+import { HostgatorIcon, WordPressIcon } from "../icons";
+import { addUtmParams } from "../../util/helpers";
+
+export const SiteInfoBar = () => {
+ const { siteurl, sitetitle } = window.HGWP;
+ const parsedUrl = new URL(siteurl);
+ const siteDomain = parsedUrl.hostname;
+ const hasSSL = parsedUrl.protocol.includes("https");
+
+ const renderPadLock = () => {
+ if (hasSSL) {
+ return
+ }
+
+ return
+ }
+
+ return (
+
+
+
+
+
{sitetitle}
+
+
+ {renderPadLock()}
+ {siteDomain}
+
+
+
+
+
+
+
+
+
+
+
}>
{hasError &&
}
+
{(true === booted &&
) ||
(!hasError &&
)}