diff --git a/src/components/Layout.css b/src/components/Layout.css index 7fd29d2..ddef2d6 100644 --- a/src/components/Layout.css +++ b/src/components/Layout.css @@ -34,6 +34,27 @@ border-bottom: 1px solid var(--line); background: #faf9f5; } +.contact-strip { + display: flex; + justify-content: center; + padding: 9px var(--page-gutter); + background: #111; + color: #fff; + font-size: 10px; + letter-spacing: 0.04em; +} +.contact-strip__details { + display: flex; + gap: 12px; +} +.contact-strip a { + color: inherit; + text-decoration: none; +} +.contact-strip a:hover { + text-decoration: underline; + text-underline-offset: 3px; +} .site-header__inner { display: flex; justify-content: space-between; @@ -260,6 +281,14 @@ padding-left: 10px; font-size: 11px; } + .contact-strip { + padding-block: 8px; + } + .contact-strip__details { + width: 100%; + justify-content: center; + gap: 8px; + } .site-header__toggle { display: flex; justify-content: space-between; diff --git a/src/components/Layout.jsx b/src/components/Layout.jsx index b2506be..3e73647 100644 --- a/src/components/Layout.jsx +++ b/src/components/Layout.jsx @@ -1,6 +1,6 @@ import { useEffect, useState } from "react"; import { Link, NavLink, Outlet, useLocation } from "react-router-dom"; -import { company, navigation } from "../data"; +import { company, navigation, phoneHref } from "../data"; import { Arrow, WhatsAppAction } from "./Primitives"; import "./Layout.css"; @@ -32,6 +32,13 @@ function Header() { } }} > +