null/Queue-North-Website
null
/
Queue-North-Website
1
0
Fork 0
Code Issues 27 Pull Requests Packages Projects Releases Wiki Activity

parternership branding

This commit is contained in:
null 2026-05-26 12:22:11 -05:00
parent fd1e2b6f50
commit d626c34ba2
12 changed files with 407 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/brand/8x8-logo-dark-gray.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 61 KiB

14
public/assets/brand/8x8-logo-white.svg Normal file
View File

@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 311.11 143.14">
<!-- Generator: Adobe Illustrator 29.1.0, SVG Export Plug-In . SVG Version: 2.1.0 Build 142) -->
<defs>
<style>
.st0 {
fill: #fff;
}
</style>
</defs>
<path class="st0" d="M198.28,53.3h-32.56l-7.51,14.29c-1.02,2.21-2.72,4.71-2.72,4.71h-.34s-1.53-2.5-2.72-4.71l-7.51-14.29h-32.55l25.58,39.48-25.47,39.52h32l8.63-16.5c.85-1.53,2.04-4.5,2.04-4.5h.34s1.19,2.97,2.04,4.5l8.77,16.5h32.02l-25.47-39.52,25.42-39.48Z"/>
<path class="st0" d="M88.06,71.79c1.32-1.69,13.16-16.16,13.16-30.64,0-25-20.49-38.91-45.48-38.91C24.34,2.25,10.62,21.42,10.62,40.96c0,11.47,5.07,19.55,12.22,25.75-4.14,3.2-18.61,15.41-18.61,32.7,0,21.43,17.1,41.72,49.81,41.72s49.81-20.49,49.81-40.97c0-13.53-6.77-22.18-15.79-28.38ZM54.98,31.19c8.83,0,14.1,4.89,14.1,12.4,0,8.27-3.57,14.47-4.7,16.54-11.84-5.07-21.61-9.59-21.61-18.42,0-5.83,3.76-10.53,12.22-10.53ZM54.04,112.2c-9.02,0-16.16-6.95-16.16-15.6,0-7.33,3.95-12.97,7.14-16.35,13.16,6.01,25.19,10.53,25.19,18.23,0,8.83-6.2,13.72-16.16,13.72Z"/>
<path class="st0" d="M290.33,71.79c1.32-1.69,13.16-16.16,13.16-30.64,0-25-20.49-38.91-45.48-38.91-31.39,0-45.11,19.17-45.11,38.72,0,11.47,5.07,19.55,12.22,25.75-4.14,3.2-18.61,15.41-18.61,32.7,0,21.43,17.1,41.72,49.81,41.72s49.81-20.49,49.81-40.97c0-13.53-6.77-22.18-15.79-28.38ZM257.25,31.19c8.83,0,14.1,4.89,14.1,12.4,0,8.27-3.57,14.47-4.7,16.54-11.84-5.07-21.61-9.59-21.61-18.42,0-5.83,3.76-10.53,12.22-10.53ZM256.31,112.2c-9.02,0-16.16-6.95-16.16-15.6,0-7.33,3.95-12.97,7.14-16.35,13.16,6.01,25.19,10.53,25.19,18.23,0,8.83-6.2,13.72-16.16,13.72Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

94
public/assets/brand/cisco-partner-logo-midnight.svg Normal file
View File

@ -0,0 +1,94 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 28.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 700 700" style="enable-background:new 0 0 700 700;" xml:space="preserve">
<style type="text/css">
.st0{fill:#07182D;}
</style>
<g id="Background">
</g>
<g id="Layer_1">
<g>
<g>
<g>
<g>
<g>
<path class="st0" d="M496.8,323.1c-12,0-21,9.5-21,21.1c0,11.7,8.9,21.1,21,21.1c12,0,21-9.5,21-21.1
C517.8,332.5,508.8,323.1,496.8,323.1L496.8,323.1z M539.2,344.2c0,23-17.7,41.6-42.4,41.6c-24.7,0-42.4-18.6-42.4-41.6
c0-22.9,17.7-41.6,42.4-41.6C521.5,302.6,539.2,321.2,539.2,344.2L539.2,344.2z"/>
<path class="st0" d="M433,327.1c-0.8-0.4-7.4-4.3-17.1-4.3c-13.1,0-22.2,9.1-22.2,21.4c0,11.9,8.7,21.4,22.2,21.4
c9.5,0,16.2-3.8,17.1-4.3v21.6c-2.5,0.7-9.5,2.9-18.5,2.9c-22.8,0-42.8-15.7-42.8-41.6c0-24,18.1-41.6,42.8-41.6
c9.5,0,16.6,2.3,18.5,2.9V327.1L433,327.1z"/>
<path class="st0" d="M346.5,322.3c-0.3-0.1-8.8-2.5-15.8-2.5c-8.1,0-12.5,2.7-12.5,6.6c0,4.9,6,6.6,9.3,7.6l5.6,1.8
c13.2,4.2,19.1,13.2,19.1,23c0,20.2-17.7,27-33.3,27c-10.8,0-20.9-2-21.9-2.2v-18.5c1.8,0.5,10.3,3,19.1,3
c10.1,0,14.7-2.9,14.7-7.5c0-4.1-4-6.4-9-8c-1.2-0.4-3.1-1-4.3-1.4c-11.3-3.6-20.7-10.2-20.7-23.5c0-15,11.2-25.1,29.9-25.1
c9.9,0,19.2,2.4,19.8,2.6V322.3L346.5,322.3z"/>
<polygon class="st0" points="269.6,384.4 249.3,384.4 249.3,304 269.6,304 269.6,384.4 "/>
<path class="st0" d="M221.5,327.1c-0.8-0.4-7.3-4.3-17-4.3c-13.1,0-22.2,9.1-22.2,21.4c0,11.9,8.7,21.4,22.2,21.4
c9.5,0,16.2-3.8,17-4.3v21.6c-2.5,0.7-9.4,2.9-18.5,2.9c-22.8,0-42.8-15.7-42.8-41.6c0-24,18.1-41.6,42.8-41.6
c9.5,0,16.6,2.3,18.5,2.9V327.1L221.5,327.1z"/>
<path class="st0" d="M570.8,248.9L570.8,248.9c-5.6,0-10.1-4.6-10.1-10.1v-20.9c0-5.6,4.6-10.1,10.1-10.1l0,0
c5.6,0,10.1,4.6,10.1,10.1v20.9C580.9,244.3,576.4,248.9,570.8,248.9L570.8,248.9z"/>
<path class="st0" d="M515.5,248.9L515.5,248.9c-5.6,0-10.1-4.6-10.1-10.1v-48.6c0-5.6,4.6-10.1,10.1-10.1l0,0
c5.6,0,10.1,4.6,10.1,10.1v48.6C525.7,244.3,521.1,248.9,515.5,248.9L515.5,248.9z"/>
<path class="st0" d="M460.3,268.9L460.3,268.9c-5.6,0-10.1-4.6-10.1-10.1V152.3c0-5.6,4.6-10.1,10.1-10.1l0,0
c5.6,0,10.1,4.6,10.1,10.1v106.5C470.4,264.3,465.8,268.9,460.3,268.9L460.3,268.9z"/>
<path class="st0" d="M405,248.9L405,248.9c-5.6,0-10.1-4.6-10.1-10.1v-48.6c0-5.6,4.6-10.1,10.1-10.1l0,0
c5.6,0,10.1,4.6,10.1,10.1v48.6C415.1,244.3,410.6,248.9,405,248.9L405,248.9z"/>
<path class="st0" d="M349.7,248.9L349.7,248.9c-5.6,0-10.1-4.6-10.1-10.1v-20.9c0-5.6,4.6-10.1,10.1-10.1l0,0
c5.6,0,10.1,4.6,10.1,10.1v20.9C359.9,244.3,355.3,248.9,349.7,248.9L349.7,248.9z"/>
<path class="st0" d="M294.5,248.9L294.5,248.9c-5.6,0-10.1-4.6-10.1-10.1v-48.6c0-5.6,4.6-10.1,10.1-10.1l0,0
c5.6,0,10.1,4.6,10.1,10.1v48.6C304.6,244.3,300,248.9,294.5,248.9L294.5,248.9z"/>
<path class="st0" d="M239.2,268.9L239.2,268.9c-5.6,0-10.1-4.6-10.1-10.1V152.3c0-5.6,4.6-10.1,10.1-10.1l0,0
c5.6,0,10.1,4.6,10.1,10.1v106.5C249.3,264.3,244.8,268.9,239.2,268.9L239.2,268.9z"/>
<path class="st0" d="M183.9,248.9L183.9,248.9c-5.6,0-10.1-4.6-10.1-10.1v-48.6c0-5.6,4.6-10.1,10.1-10.1l0,0
c5.6,0,10.1,4.6,10.1,10.1v48.6C194.1,244.3,189.5,248.9,183.9,248.9L183.9,248.9z"/>
<path class="st0" d="M128.7,248.9L128.7,248.9c-5.6,0-10.1-4.6-10.1-10.1v-20.9c0-5.6,4.6-10.1,10.1-10.1l0,0
c5.6,0,10.1,4.6,10.1,10.1v20.9C138.8,244.3,134.2,248.9,128.7,248.9L128.7,248.9z"/>
</g>
<path class="st0" d="M570.8,248.9L570.8,248.9c-5.6,0-10.1-4.6-10.1-10.1v-20.9c0-5.6,4.6-10.1,10.1-10.1l0,0
c5.6,0,10.1,4.6,10.1,10.1v20.9C580.9,244.3,576.4,248.9,570.8,248.9L570.8,248.9z"/>
<path class="st0" d="M515.5,248.9L515.5,248.9c-5.6,0-10.1-4.6-10.1-10.1v-48.6c0-5.6,4.6-10.1,10.1-10.1l0,0
c5.6,0,10.1,4.6,10.1,10.1v48.6C525.7,244.3,521.1,248.9,515.5,248.9L515.5,248.9z"/>
<path class="st0" d="M460.3,268.9L460.3,268.9c-5.6,0-10.1-4.6-10.1-10.1V152.3c0-5.6,4.6-10.1,10.1-10.1l0,0
c5.6,0,10.1,4.6,10.1,10.1v106.5C470.4,264.3,465.8,268.9,460.3,268.9L460.3,268.9z"/>
<path class="st0" d="M405,248.9L405,248.9c-5.6,0-10.1-4.6-10.1-10.1v-48.6c0-5.6,4.6-10.1,10.1-10.1l0,0
c5.6,0,10.1,4.6,10.1,10.1v48.6C415.1,244.3,410.6,248.9,405,248.9L405,248.9z"/>
<path class="st0" d="M349.7,248.9L349.7,248.9c-5.6,0-10.1-4.6-10.1-10.1v-20.9c0-5.6,4.6-10.1,10.1-10.1l0,0
c5.6,0,10.1,4.6,10.1,10.1v20.9C359.9,244.3,355.3,248.9,349.7,248.9L349.7,248.9z"/>
<path class="st0" d="M294.5,248.9L294.5,248.9c-5.6,0-10.1-4.6-10.1-10.1v-48.6c0-5.6,4.6-10.1,10.1-10.1l0,0
c5.6,0,10.1,4.6,10.1,10.1v48.6C304.6,244.3,300,248.9,294.5,248.9L294.5,248.9z"/>
<path class="st0" d="M239.2,268.9L239.2,268.9c-5.6,0-10.1-4.6-10.1-10.1V152.3c0-5.6,4.6-10.1,10.1-10.1l0,0
c5.6,0,10.1,4.6,10.1,10.1v106.5C249.3,264.3,244.8,268.9,239.2,268.9L239.2,268.9z"/>
<path class="st0" d="M183.9,248.9L183.9,248.9c-5.6,0-10.1-4.6-10.1-10.1v-48.6c0-5.6,4.6-10.1,10.1-10.1l0,0
c5.6,0,10.1,4.6,10.1,10.1v48.6C194.1,244.3,189.5,248.9,183.9,248.9L183.9,248.9z"/>
<path class="st0" d="M128.7,248.9L128.7,248.9c-5.6,0-10.1-4.6-10.1-10.1v-20.9c0-5.6,4.6-10.1,10.1-10.1l0,0
c5.6,0,10.1,4.6,10.1,10.1v20.9C138.8,244.3,134.2,248.9,128.7,248.9L128.7,248.9z"/>
</g>
<g>
<path class="st0" d="M125.3,530.6v-67.4h29c5,0,9.4,1,13.1,3c3.8,2,6.7,4.8,8.8,8.3c2.1,3.6,3.1,7.8,3.1,12.6
c0,4.8-1.1,9-3.2,12.5c-2.1,3.5-5.1,6.2-9,8.1c-3.9,1.9-8.4,2.9-13.5,2.9h-17.4v-14.2H150c2.2,0,4-0.4,5.6-1.2s2.7-1.8,3.5-3.2
c0.8-1.4,1.2-3,1.2-4.9c0-2-0.4-3.6-1.2-5s-2-2.4-3.5-3.1s-3.4-1.1-5.6-1.1h-6.4v52.7H125.3z"/>
<path class="st0" d="M178.2,530.6l21.8-67.4h25l22.7,67.4h-20.7l-7.8-26.1c-1.7-5.7-3.3-11.6-4.7-17.7
c-1.5-6.1-2.9-12.2-4.2-18.2h4.2c-1.3,6-2.5,12.1-3.8,18.2s-2.8,12-4.4,17.7l-7.5,26.1H178.2z M194.4,517.6V504h37.1v13.7
H194.4z"/>
<path class="st0" d="M256.9,530.6v-67.4h29c5,0,9.4,0.9,13.1,2.7c3.8,1.8,6.7,4.4,8.8,7.9c2.1,3.4,3.1,7.5,3.1,12.3
c0,4.8-1.1,8.9-3.2,12.2c-2.1,3.3-5.1,5.8-9,7.5c-3.9,1.7-8.4,2.5-13.5,2.5h-17.4v-14.2h13.7c2.2,0,4-0.3,5.6-0.8
s2.7-1.4,3.5-2.6s1.2-2.7,1.2-4.7c0-1.9-0.4-3.5-1.2-4.7c-0.8-1.2-2-2.1-3.5-2.7c-1.5-0.6-3.4-0.9-5.6-0.9h-6.4v52.7H256.9z
M293.3,530.6l-16.5-30.9h19.5l16.9,30.9H293.3z"/>
<path class="st0" d="M319.7,477.9v-14.7h58.5v14.7h-20.1v52.7h-18.3v-52.7H319.7z"/>
<path class="st0" d="M387.9,530.6v-67.4h19.9l16.1,26.5c1.4,2.3,2.7,4.6,3.9,6.9c1.2,2.3,2.4,4.8,3.5,7.6s2.3,6,3.5,9.7h-1.6
c-0.2-2.4-0.3-5.3-0.6-8.5s-0.4-6.4-0.6-9.5c-0.2-3.1-0.3-5.8-0.3-7.9v-24.7h18.8v67.4h-19.9l-15-24.6
c-1.7-2.8-3.2-5.4-4.5-7.8c-1.3-2.4-2.5-5-3.7-7.7c-1.2-2.7-2.6-5.9-4.1-9.4h1.9c0.2,3.2,0.5,6.3,0.7,9.5
c0.2,3.1,0.4,6,0.5,8.7c0.1,2.7,0.2,4.9,0.2,6.8v24.6H387.9z"/>
<path class="st0" d="M462,530.6v-67.4h48.6v14.7h-30.3v11.4H508v14.4h-27.8v12.1h30.1v14.7H462z"/>
<path class="st0" d="M521.5,530.6v-67.4h29c5,0,9.4,0.9,13.1,2.7c3.8,1.8,6.7,4.4,8.8,7.9c2.1,3.4,3.1,7.5,3.1,12.3
c0,4.8-1.1,8.9-3.2,12.2c-2.1,3.3-5.1,5.8-9,7.5c-3.9,1.7-8.4,2.5-13.5,2.5h-17.4v-14.2h13.7c2.2,0,4-0.3,5.6-0.8
s2.7-1.4,3.5-2.6s1.2-2.7,1.2-4.7c0-1.9-0.4-3.5-1.2-4.7c-0.8-1.2-2-2.1-3.5-2.7c-1.5-0.6-3.4-0.9-5.6-0.9h-6.4v52.7H521.5z
M558,530.6l-16.5-30.9H561l16.9,30.9H558z"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

94
public/assets/brand/cisco-partner-logo-white.svg Normal file
View File

@ -0,0 +1,94 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 28.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 700 700" style="enable-background:new 0 0 700 700;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;}
</style>
<g id="Background">
</g>
<g id="Layer_1">
<g>
<g>
<g>
<g>
<g>
<path class="st0" d="M496.8,323.1c-12,0-21,9.5-21,21.1c0,11.7,8.9,21.1,21,21.1c12,0,21-9.5,21-21.1
C517.8,332.5,508.8,323.1,496.8,323.1L496.8,323.1z M539.2,344.2c0,23-17.7,41.6-42.4,41.6c-24.7,0-42.4-18.6-42.4-41.6
c0-22.9,17.7-41.6,42.4-41.6C521.5,302.6,539.2,321.2,539.2,344.2L539.2,344.2z"/>
<path class="st0" d="M433,327.1c-0.8-0.4-7.4-4.3-17.1-4.3c-13.1,0-22.2,9.1-22.2,21.4c0,11.9,8.7,21.4,22.2,21.4
c9.5,0,16.2-3.8,17.1-4.3v21.6c-2.5,0.7-9.5,2.9-18.5,2.9c-22.8,0-42.8-15.7-42.8-41.6c0-24,18.1-41.6,42.8-41.6
c9.5,0,16.6,2.3,18.5,2.9V327.1L433,327.1z"/>
<path class="st0" d="M346.5,322.3c-0.3-0.1-8.8-2.5-15.8-2.5c-8.1,0-12.5,2.7-12.5,6.6c0,4.9,6,6.6,9.3,7.6l5.6,1.8
c13.2,4.2,19.1,13.2,19.1,23c0,20.2-17.7,27-33.3,27c-10.8,0-20.9-2-21.9-2.2v-18.5c1.8,0.5,10.3,3,19.1,3
c10.1,0,14.7-2.9,14.7-7.5c0-4.1-4-6.4-9-8c-1.2-0.4-3.1-1-4.3-1.4c-11.3-3.6-20.7-10.2-20.7-23.5c0-15,11.2-25.1,29.9-25.1
c9.9,0,19.2,2.4,19.8,2.6V322.3L346.5,322.3z"/>
<polygon class="st0" points="269.6,384.4 249.3,384.4 249.3,304 269.6,304 269.6,384.4 "/>
<path class="st0" d="M221.5,327.1c-0.8-0.4-7.3-4.3-17-4.3c-13.1,0-22.2,9.1-22.2,21.4c0,11.9,8.7,21.4,22.2,21.4
c9.5,0,16.2-3.8,17-4.3v21.6c-2.5,0.7-9.4,2.9-18.5,2.9c-22.8,0-42.8-15.7-42.8-41.6c0-24,18.1-41.6,42.8-41.6
c9.5,0,16.6,2.3,18.5,2.9V327.1L221.5,327.1z"/>
<path class="st0" d="M570.8,248.9L570.8,248.9c-5.6,0-10.1-4.6-10.1-10.1v-20.9c0-5.6,4.6-10.1,10.1-10.1l0,0
c5.6,0,10.1,4.6,10.1,10.1v20.9C580.9,244.3,576.4,248.9,570.8,248.9L570.8,248.9z"/>
<path class="st0" d="M515.5,248.9L515.5,248.9c-5.6,0-10.1-4.6-10.1-10.1v-48.6c0-5.6,4.6-10.1,10.1-10.1l0,0
c5.6,0,10.1,4.6,10.1,10.1v48.6C525.7,244.3,521.1,248.9,515.5,248.9L515.5,248.9z"/>
<path class="st0" d="M460.3,268.9L460.3,268.9c-5.6,0-10.1-4.6-10.1-10.1V152.3c0-5.6,4.6-10.1,10.1-10.1l0,0
c5.6,0,10.1,4.6,10.1,10.1v106.5C470.4,264.3,465.8,268.9,460.3,268.9L460.3,268.9z"/>
<path class="st0" d="M405,248.9L405,248.9c-5.6,0-10.1-4.6-10.1-10.1v-48.6c0-5.6,4.6-10.1,10.1-10.1l0,0
c5.6,0,10.1,4.6,10.1,10.1v48.6C415.1,244.3,410.6,248.9,405,248.9L405,248.9z"/>
<path class="st0" d="M349.7,248.9L349.7,248.9c-5.6,0-10.1-4.6-10.1-10.1v-20.9c0-5.6,4.6-10.1,10.1-10.1l0,0
c5.6,0,10.1,4.6,10.1,10.1v20.9C359.9,244.3,355.3,248.9,349.7,248.9L349.7,248.9z"/>
<path class="st0" d="M294.5,248.9L294.5,248.9c-5.6,0-10.1-4.6-10.1-10.1v-48.6c0-5.6,4.6-10.1,10.1-10.1l0,0
c5.6,0,10.1,4.6,10.1,10.1v48.6C304.6,244.3,300,248.9,294.5,248.9L294.5,248.9z"/>
<path class="st0" d="M239.2,268.9L239.2,268.9c-5.6,0-10.1-4.6-10.1-10.1V152.3c0-5.6,4.6-10.1,10.1-10.1l0,0
c5.6,0,10.1,4.6,10.1,10.1v106.5C249.3,264.3,244.8,268.9,239.2,268.9L239.2,268.9z"/>
<path class="st0" d="M183.9,248.9L183.9,248.9c-5.6,0-10.1-4.6-10.1-10.1v-48.6c0-5.6,4.6-10.1,10.1-10.1l0,0
c5.6,0,10.1,4.6,10.1,10.1v48.6C194.1,244.3,189.5,248.9,183.9,248.9L183.9,248.9z"/>
<path class="st0" d="M128.7,248.9L128.7,248.9c-5.6,0-10.1-4.6-10.1-10.1v-20.9c0-5.6,4.6-10.1,10.1-10.1l0,0
c5.6,0,10.1,4.6,10.1,10.1v20.9C138.8,244.3,134.2,248.9,128.7,248.9L128.7,248.9z"/>
</g>
<path class="st0" d="M570.8,248.9L570.8,248.9c-5.6,0-10.1-4.6-10.1-10.1v-20.9c0-5.6,4.6-10.1,10.1-10.1l0,0
c5.6,0,10.1,4.6,10.1,10.1v20.9C580.9,244.3,576.4,248.9,570.8,248.9L570.8,248.9z"/>
<path class="st0" d="M515.5,248.9L515.5,248.9c-5.6,0-10.1-4.6-10.1-10.1v-48.6c0-5.6,4.6-10.1,10.1-10.1l0,0
c5.6,0,10.1,4.6,10.1,10.1v48.6C525.7,244.3,521.1,248.9,515.5,248.9L515.5,248.9z"/>
<path class="st0" d="M460.3,268.9L460.3,268.9c-5.6,0-10.1-4.6-10.1-10.1V152.3c0-5.6,4.6-10.1,10.1-10.1l0,0
c5.6,0,10.1,4.6,10.1,10.1v106.5C470.4,264.3,465.8,268.9,460.3,268.9L460.3,268.9z"/>
<path class="st0" d="M405,248.9L405,248.9c-5.6,0-10.1-4.6-10.1-10.1v-48.6c0-5.6,4.6-10.1,10.1-10.1l0,0
c5.6,0,10.1,4.6,10.1,10.1v48.6C415.1,244.3,410.6,248.9,405,248.9L405,248.9z"/>
<path class="st0" d="M349.7,248.9L349.7,248.9c-5.6,0-10.1-4.6-10.1-10.1v-20.9c0-5.6,4.6-10.1,10.1-10.1l0,0
c5.6,0,10.1,4.6,10.1,10.1v20.9C359.9,244.3,355.3,248.9,349.7,248.9L349.7,248.9z"/>
<path class="st0" d="M294.5,248.9L294.5,248.9c-5.6,0-10.1-4.6-10.1-10.1v-48.6c0-5.6,4.6-10.1,10.1-10.1l0,0
c5.6,0,10.1,4.6,10.1,10.1v48.6C304.6,244.3,300,248.9,294.5,248.9L294.5,248.9z"/>
<path class="st0" d="M239.2,268.9L239.2,268.9c-5.6,0-10.1-4.6-10.1-10.1V152.3c0-5.6,4.6-10.1,10.1-10.1l0,0
c5.6,0,10.1,4.6,10.1,10.1v106.5C249.3,264.3,244.8,268.9,239.2,268.9L239.2,268.9z"/>
<path class="st0" d="M183.9,248.9L183.9,248.9c-5.6,0-10.1-4.6-10.1-10.1v-48.6c0-5.6,4.6-10.1,10.1-10.1l0,0
c5.6,0,10.1,4.6,10.1,10.1v48.6C194.1,244.3,189.5,248.9,183.9,248.9L183.9,248.9z"/>
<path class="st0" d="M128.7,248.9L128.7,248.9c-5.6,0-10.1-4.6-10.1-10.1v-20.9c0-5.6,4.6-10.1,10.1-10.1l0,0
c5.6,0,10.1,4.6,10.1,10.1v20.9C138.8,244.3,134.2,248.9,128.7,248.9L128.7,248.9z"/>
</g>
<g>
<path class="st0" d="M125.3,530.6v-67.4h29c5,0,9.4,1,13.1,3c3.8,2,6.7,4.8,8.8,8.3c2.1,3.6,3.1,7.8,3.1,12.6
c0,4.8-1.1,9-3.2,12.5c-2.1,3.5-5.1,6.2-9,8.1c-3.9,1.9-8.4,2.9-13.5,2.9h-17.4v-14.2H150c2.2,0,4-0.4,5.6-1.2s2.7-1.8,3.5-3.2
c0.8-1.4,1.2-3,1.2-4.9c0-2-0.4-3.6-1.2-5s-2-2.4-3.5-3.1s-3.4-1.1-5.6-1.1h-6.4v52.7H125.3z"/>
<path class="st0" d="M178.2,530.6l21.8-67.4h25l22.7,67.4h-20.7l-7.8-26.1c-1.7-5.7-3.3-11.6-4.7-17.7
c-1.5-6.1-2.9-12.2-4.2-18.2h4.2c-1.3,6-2.5,12.1-3.8,18.2s-2.8,12-4.4,17.7l-7.5,26.1H178.2z M194.4,517.6V504h37.1v13.7
H194.4z"/>
<path class="st0" d="M256.9,530.6v-67.4h29c5,0,9.4,0.9,13.1,2.7c3.8,1.8,6.7,4.4,8.8,7.9c2.1,3.4,3.1,7.5,3.1,12.3
c0,4.8-1.1,8.9-3.2,12.2c-2.1,3.3-5.1,5.8-9,7.5c-3.9,1.7-8.4,2.5-13.5,2.5h-17.4v-14.2h13.7c2.2,0,4-0.3,5.6-0.8
s2.7-1.4,3.5-2.6s1.2-2.7,1.2-4.7c0-1.9-0.4-3.5-1.2-4.7c-0.8-1.2-2-2.1-3.5-2.7c-1.5-0.6-3.4-0.9-5.6-0.9h-6.4v52.7H256.9z
M293.3,530.6l-16.5-30.9h19.5l16.9,30.9H293.3z"/>
<path class="st0" d="M319.7,477.9v-14.7h58.5v14.7h-20.1v52.7h-18.3v-52.7H319.7z"/>
<path class="st0" d="M387.9,530.6v-67.4h19.9l16.1,26.5c1.4,2.3,2.7,4.6,3.9,6.9c1.2,2.3,2.4,4.8,3.5,7.6s2.3,6,3.5,9.7h-1.6
c-0.2-2.4-0.3-5.3-0.6-8.5s-0.4-6.4-0.6-9.5c-0.2-3.1-0.3-5.8-0.3-7.9v-24.7h18.8v67.4h-19.9l-15-24.6
c-1.7-2.8-3.2-5.4-4.5-7.8c-1.3-2.4-2.5-5-3.7-7.7c-1.2-2.7-2.6-5.9-4.1-9.4h1.9c0.2,3.2,0.5,6.3,0.7,9.5
c0.2,3.1,0.4,6,0.5,8.7c0.1,2.7,0.2,4.9,0.2,6.8v24.6H387.9z"/>
<path class="st0" d="M462,530.6v-67.4h48.6v14.7h-30.3v11.4H508v14.4h-27.8v12.1h30.1v14.7H462z"/>
<path class="st0" d="M521.5,530.6v-67.4h29c5,0,9.4,0.9,13.1,2.7c3.8,1.8,6.7,4.4,8.8,7.9c2.1,3.4,3.1,7.5,3.1,12.3
c0,4.8-1.1,8.9-3.2,12.2c-2.1,3.3-5.1,5.8-9,7.5c-3.9,1.7-8.4,2.5-13.5,2.5h-17.4v-14.2h13.7c2.2,0,4-0.3,5.6-0.8
s2.7-1.4,3.5-2.6s1.2-2.7,1.2-4.7c0-1.9-0.4-3.5-1.2-4.7c-0.8-1.2-2-2.1-3.5-2.7c-1.5-0.6-3.4-0.9-5.6-0.9h-6.4v52.7H521.5z
M558,530.6l-16.5-30.9H561l16.9,30.9H558z"/>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

30
src/pages/About.jsx
View File

@ -1,11 +1,23 @@
import SEO from '@/components/SEO' import SEO from '@/components/SEO'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import { ArrowRight, Award, BadgeCheck, CheckCircle2, Compass, Cpu, Handshake, Headphones, Route, ShieldCheck, Users, Wrench } from 'lucide-react' import { ArrowRight, Award, CheckCircle2, Compass, Cpu, Handshake, Headphones, Route, Users, Wrench } from 'lucide-react'
const proofPoints = [ const proofPoints = [
{ label: '25+ years', detail: 'Communications and infrastructure experience', icon: Award, accent: 'text-primary-blue', bg: 'bg-sky-50', border: 'border-t-primary-blue' }, { label: '25+ years', detail: 'Communications and infrastructure experience', icon: Award, accent: 'text-primary-blue', bg: 'bg-sky-50', border: 'border-t-primary-blue' },
{ label: '8x8 certified', detail: 'Sales, engineering, build, deployment, and support', icon: BadgeCheck, accent: 'text-teal-600', bg: 'bg-teal-50', border: 'border-t-teal-500' }, {
{ label: 'Cisco certified', detail: 'Networking and communications implementation', icon: ShieldCheck, accent: 'text-cyan-600', bg: 'bg-cyan-50', border: 'border-t-cyan-400' }, label: '8x8 Certified Partner',
detail: 'Sales, engineering, build, deployment, and support',
logo: '/assets/brand/8x8-logo-white.svg',
logoAlt: '8x8 Certified Partner logo',
logoClassName: 'h-6 w-14',
},
{
label: 'Cisco Partner',
detail: 'Networking and communications implementation',
logo: '/assets/brand/cisco-partner-logo-white.svg',
logoAlt: 'Cisco Partner certification logo',
logoClassName: 'h-10 w-10',
},
{ label: 'Veteran owned', detail: 'Disciplined delivery and direct accountability', icon: Users, accent: 'text-amber-600', bg: 'bg-amber-50', border: 'border-t-accent-gold' }, { label: 'Veteran owned', detail: 'Disciplined delivery and direct accountability', icon: Users, accent: 'text-amber-600', bg: 'bg-amber-50', border: 'border-t-accent-gold' },
] ]
@ -106,8 +118,16 @@ const About = () => {
const Icon = point.icon const Icon = point.icon
return ( return (
<div key={point.label} className="flex gap-4 rounded-md border border-white/10 bg-white/5 p-3"> <div key={point.label} className="flex gap-4 rounded-md border border-white/10 bg-white/5 p-3">
<span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-white/10 text-primary-cyan"> <span className={`flex h-10 shrink-0 items-center justify-center rounded-md bg-white/10 text-primary-cyan ${point.logo ? 'w-16 px-2' : 'w-10'}`}>
<Icon className="h-5 w-5" aria-hidden="true" /> {point.logo ? (
<img
src={point.logo}
alt={point.logoAlt}
className={`${point.logoClassName} object-contain`}
/>
) : (
<Icon className="h-5 w-5" aria-hidden="true" />
)}
</span> </span>
<div> <div>
<h3 className="font-semibold">{point.label}</h3> <h3 className="font-semibold">{point.label}</h3>

24
src/pages/Contact.jsx
View File

@ -8,6 +8,7 @@ import { Select } from '@/components/ui/Select'
import RecaptchaPlaceholder from '@/components/RecaptchaPlaceholder' import RecaptchaPlaceholder from '@/components/RecaptchaPlaceholder'
import { submitLead } from '@/lib/api' import { submitLead } from '@/lib/api'
import { useDebounce } from '@/hooks/useDebounce' import { useDebounce } from '@/hooks/useDebounce'
import { ArrowRight } from 'lucide-react'
const Contact = () => { const Contact = () => {
const [formState, setFormState] = useState({ const [formState, setFormState] = useState({
@ -148,17 +149,36 @@ const Contact = () => {
/> />
{/* Hero */} {/* Hero */}
<section className="bg-primary-navy py-12 lg:py-20"> <section className="relative isolate overflow-hidden bg-primary-navy py-16 lg:py-24">
<div className="absolute inset-0 -z-10">
<img
src="/assets/hero-tech.webp"
alt="Queue North communications infrastructure consultation"
className="h-full w-full object-cover object-center"
/>
<div className="absolute inset-0 bg-primary-navy/82" />
<div className="absolute inset-0 bg-gradient-to-r from-primary-navy via-primary-navy/92 to-primary-navy/45" />
</div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="inline-flex items-center gap-2 rounded-md border border-white/20 bg-white/10 px-3 py-2 text-xs font-semibold uppercase tracking-wide text-primary-cyan mb-6">
Contact Queue North
</div>
<h1 className="text-4xl md:text-5xl font-bold text-white mb-4">Let's Talk</h1> <h1 className="text-4xl md:text-5xl font-bold text-white mb-4">Let's Talk</h1>
<p className="text-xl text-white/70 max-w-2xl"> <p className="text-xl text-white/70 max-w-2xl">
Tell us about your business and we'll cut through the noise to find what actually works for you. Tell us about your business and we'll cut through the noise to find what actually works for you.
</p> </p>
<a
href="#contact-form"
className="mt-8 inline-flex h-11 items-center justify-center gap-2 rounded-md bg-white px-5 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors"
>
Send a Message
<ArrowRight className="h-4 w-4" aria-hidden="true" />
</a>
</div> </div>
</section> </section>
{/* Contact Body */} {/* Contact Body */}
<section className="bg-background py-12 lg:py-20"> <section id="contact-form" className="bg-background py-16 lg:py-24">
<div className="max-w-7xl mx-auto px-0 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-0 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 lg:grid-cols-5 rounded-none sm:rounded-md overflow-hidden shadow-none sm:shadow-xl border-y sm:border border-border"> <div className="grid grid-cols-1 lg:grid-cols-5 rounded-none sm:rounded-md overflow-hidden shadow-none sm:shadow-xl border-y sm:border border-border">

12
src/pages/Home.jsx
View File

@ -170,21 +170,21 @@ const Home = () => {
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4"> <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
<div className="flex items-center justify-center gap-3 sm:justify-start"> <div className="flex items-center justify-center gap-3 sm:justify-start">
<span className="flex h-12 w-24 shrink-0 items-center justify-center rounded-md border border-border bg-white px-3"> <span className="flex h-14 w-24 shrink-0 items-center justify-center rounded-md border border-border bg-white px-3">
<img <img
src="/assets/brand/8x8-logo-dark-gray.png" src="/assets/brand/8x8-logo-dark-gray.png"
alt="8x8 Certified Partner logo" alt="8x8 Certified Partner logo"
className="h-8 w-full object-contain" className="h-9 w-full object-contain"
/> />
</span> </span>
<span className="text-sm font-semibold leading-tight text-primary-navy sm:text-left">8x8 Certified Partner</span> <span className="text-sm font-semibold leading-tight text-primary-navy sm:text-left">8x8 Certified Partner</span>
</div> </div>
<div className="flex items-center justify-center gap-3 sm:justify-start"> <div className="flex items-center justify-center gap-3 sm:justify-start">
<span className="flex h-12 w-24 shrink-0 items-center justify-center rounded-md border border-border bg-white px-3"> <span className="flex h-14 w-24 shrink-0 items-center justify-center rounded-md border border-border bg-white px-3">
<img <img
src="/assets/brand/cisco-logo.svg" src="/assets/brand/cisco-partner-logo-midnight.svg"
alt="Cisco Certified Partner logo" alt="Cisco Partner certification logo"
className="h-8 w-full object-contain" className="h-12 w-full object-contain"
/> />
</span> </span>
<span className="text-sm font-semibold leading-tight text-primary-navy sm:text-left">Cisco Certified Partner</span> <span className="text-sm font-semibold leading-tight text-primary-navy sm:text-left">Cisco Certified Partner</span>

63
src/pages/Industries.jsx
View File

@ -10,6 +10,13 @@ const iconMap = {
'landmark': Landmark, 'landmark': Landmark,
} }
const industryAccentStyles = [
{ card: 'border-t-[3px] border-t-rose-400 hover:border-rose-400/60', iconWrap: 'bg-rose-50', icon: 'text-rose-600' },
{ card: 'border-t-[3px] border-t-primary-blue hover:border-primary-blue/50', iconWrap: 'bg-sky-50', icon: 'text-primary-blue' },
{ card: 'border-t-[3px] border-t-accent-gold hover:border-accent-gold/60', iconWrap: 'bg-amber-50', icon: 'text-amber-600' },
{ card: 'border-t-[3px] border-t-teal-500 hover:border-teal-500/50', iconWrap: 'bg-teal-50', icon: 'text-teal-600' },
]
const Industries = () => { const Industries = () => {
return ( return (
<> <>
@ -20,7 +27,16 @@ const Industries = () => {
/> />
{/* Hero */} {/* Hero */}
<section className="bg-primary-navy py-12 lg:py-20 text-white"> <section className="relative isolate overflow-hidden bg-primary-navy py-16 lg:py-24 text-white">
<div className="absolute inset-0 -z-10">
<img
src="/assets/local-networking.webp"
alt="Network infrastructure used by businesses across industries"
className="h-full w-full object-cover object-center"
/>
<div className="absolute inset-0 bg-primary-navy/82" />
<div className="absolute inset-0 bg-gradient-to-r from-primary-navy via-primary-navy/92 to-primary-navy/45" />
</div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="max-w-3xl"> <div className="max-w-3xl">
<div className="inline-flex items-center gap-2 rounded-md border border-white/20 bg-white/10 px-3 py-2 text-xs font-semibold uppercase tracking-wide text-primary-cyan mb-6"> <div className="inline-flex items-center gap-2 rounded-md border border-white/20 bg-white/10 px-3 py-2 text-xs font-semibold uppercase tracking-wide text-primary-cyan mb-6">
@ -45,18 +61,27 @@ const Industries = () => {
</section> </section>
{/* Industries Grid */} {/* Industries Grid */}
<section className="bg-background py-16 lg:py-20"> <section className="bg-background py-16 lg:py-24">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="mb-10 max-w-3xl">
<p className="text-sm font-semibold uppercase tracking-wide text-primary-blue">Industry fit</p>
<h2 className="mt-3 text-3xl md:text-4xl font-bold text-primary-navy">Communications needs change by environment.</h2>
<p className="mt-4 text-lg text-soft-text">
We adapt platform, network, and support recommendations to the way your teams actually operate.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{industries.map((industry) => { {industries.map((industry, index) => {
const Icon = iconMap[industry.icon] || Building2 const Icon = iconMap[industry.icon] || Building2
const accent = industryAccentStyles[index % industryAccentStyles.length]
return ( return (
<div <div
key={industry.id} key={industry.id}
className="group flex flex-col rounded-md border border-border bg-white p-8 shadow-sm hover:shadow-md hover:border-primary-navy/30 transition-all" className={`group flex flex-col rounded-md border border-border bg-white p-8 shadow-sm hover:shadow-md transition-all ${accent.card}`}
> >
<div className="flex h-14 w-14 items-center justify-center rounded-md bg-primary-navy/10 mb-6 flex-shrink-0"> <div className={`flex h-14 w-14 items-center justify-center rounded-md ${accent.iconWrap} mb-6 flex-shrink-0`}>
<Icon className="h-7 w-7 text-primary-navy" aria-hidden="true" /> <Icon className={`h-7 w-7 ${accent.icon}`} aria-hidden="true" />
</div> </div>
<h2 className="text-2xl font-bold text-primary-navy mb-3">{industry.name}</h2> <h2 className="text-2xl font-bold text-primary-navy mb-3">{industry.name}</h2>
<p className="text-soft-text leading-relaxed mb-6">{industry.shortDesc}</p> <p className="text-soft-text leading-relaxed mb-6">{industry.shortDesc}</p>
@ -84,22 +109,30 @@ const Industries = () => {
</section> </section>
{/* CTA */} {/* CTA */}
<section className="bg-primary-navy py-14 text-white"> <section className="bg-section-alt py-16 lg:py-24">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6"> <div className="rounded-md bg-primary-navy px-6 py-10 text-white shadow-md sm:px-8 lg:flex lg:items-center lg:justify-between lg:gap-10 lg:px-10">
<div> <div>
<h2 className="text-3xl md:text-4xl font-bold mb-3">Don't see your industry?</h2> <h2 className="text-3xl md:text-4xl font-bold mb-3">Don't see your industry?</h2>
<p className="text-white/70 max-w-2xl"> <p className="text-white/70 max-w-2xl">
We work with businesses across all sectors. If you have specific compliance, connectivity, or workflow requirements, let's talk. We work with businesses across all sectors. If you have specific compliance, connectivity, or workflow requirements, let's talk.
</p> </p>
</div> </div>
<Link <div className="mt-7 flex flex-col gap-3 sm:flex-row lg:mt-0 lg:flex-shrink-0">
to="/contact" <Link
className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-white px-6 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors flex-shrink-0" to="/contact"
> className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-white px-6 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors"
Talk to a Specialist >
<ArrowRight className="h-4 w-4" aria-hidden="true" /> Talk to a Specialist
</Link> <ArrowRight className="h-4 w-4" aria-hidden="true" />
</Link>
<a
href="tel:+13217308020"
className="inline-flex h-11 items-center justify-center rounded-md border border-white/35 px-6 text-sm font-semibold text-white hover:bg-white/10 transition-colors"
>
Call (321) 730-8020
</a>
</div>
</div> </div>
</div> </div>
</section> </section>

56
src/pages/IndustryDetail.jsx
View File

@ -3,6 +3,7 @@ import { useParams } from 'react-router-dom'
import { industries } from '@/data/industries' import { industries } from '@/data/industries'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card' import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
import { AlertCircle, ArrowLeft, ArrowRight, Building2, CheckCircle2 } from 'lucide-react'
const IndustryDetail = () => { const IndustryDetail = () => {
const { slug } = useParams() const { slug } = useParams()
@ -41,17 +42,30 @@ const IndustryDetail = () => {
url={industryUrl} url={industryUrl}
/> />
{/* Page Hero */} {/* Page Hero */}
<section className="bg-background py-12 lg:py-20"> <section className="relative isolate overflow-hidden bg-primary-navy py-16 lg:py-24 text-white">
<div className="absolute inset-0 -z-10">
<img
src="/assets/modern-call-center.webp"
alt="Business communications team supporting industry operations"
className="h-full w-full object-cover object-center"
/>
<div className="absolute inset-0 bg-primary-navy/84" />
<div className="absolute inset-0 bg-gradient-to-r from-primary-navy via-primary-navy/92 to-primary-navy/50" />
</div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div> <div className="max-w-3xl">
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">{industry.name}</h1> <Link to="/industries" className="mb-5 inline-flex items-center gap-2 text-sm font-semibold text-primary-cyan hover:text-white">
<p className="text-xl text-soft-text max-w-3xl">{industry.shortDesc}</p> <ArrowLeft className="h-4 w-4" aria-hidden="true" />
Industries
</Link>
<h1 className="text-4xl md:text-5xl font-bold mb-6">{industry.name}</h1>
<p className="text-xl text-white/75 max-w-3xl leading-relaxed">{industry.shortDesc}</p>
</div> </div>
</div> </div>
</section> </section>
{/* Main Content */} {/* Main Content */}
<section className="bg-background py-16"> <section className="bg-background py-16 lg:py-24">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
{/* Left Column - Main Content */} {/* Left Column - Main Content */}
@ -67,13 +81,9 @@ const IndustryDetail = () => {
<h2 className="text-2xl font-bold text-primary-navy mb-4">Pain Points We Solve</h2> <h2 className="text-2xl font-bold text-primary-navy mb-4">Pain Points We Solve</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{industry.painPoints.map((painPoint, index) => ( {industry.painPoints.map((painPoint, index) => (
<div key={index} className="flex items-start gap-3"> <div key={index} className="flex items-start gap-3 rounded-md border border-border bg-white p-4 shadow-sm">
<div className="h-6 w-6 rounded-full bg-red-100 text-red-700 flex items-center justify-center flex-shrink-0 mt-1"> <AlertCircle className="h-5 w-5 text-rose-600 flex-shrink-0 mt-0.5" aria-hidden="true" />
<svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <span className="text-sm font-medium text-text">{painPoint}</span>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
</div>
<span className="text-lg text-text">{painPoint}</span>
</div> </div>
))} ))}
</div> </div>
@ -83,13 +93,9 @@ const IndustryDetail = () => {
<h2 className="text-2xl font-bold text-primary-navy mb-4">Our Solutions</h2> <h2 className="text-2xl font-bold text-primary-navy mb-4">Our Solutions</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{industry.solutions.map((solution, index) => ( {industry.solutions.map((solution, index) => (
<div key={index} className="flex items-start gap-3"> <div key={index} className="flex items-start gap-3 rounded-md border border-border bg-white p-4 shadow-sm">
<div className="h-6 w-6 rounded-full bg-green-100 text-green-700 flex items-center justify-center flex-shrink-0 mt-1"> <CheckCircle2 className="h-5 w-5 text-teal-600 flex-shrink-0 mt-0.5" aria-hidden="true" />
<svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <span className="text-sm font-medium text-text">{solution}</span>
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<span className="text-lg text-text">{solution}</span>
</div> </div>
))} ))}
</div> </div>
@ -98,9 +104,14 @@ const IndustryDetail = () => {
{/* Right Column - Sidebar */} {/* Right Column - Sidebar */}
<div className="lg:col-span-1"> <div className="lg:col-span-1">
<Card className="lg:sticky top-24"> <Card className="lg:sticky top-24 border-t-[3px] border-t-teal-500">
<CardHeader> <CardHeader>
<CardTitle className="text-primary-navy">Industry Insights</CardTitle> <div className="flex items-center gap-3">
<span className="flex h-10 w-10 items-center justify-center rounded-md bg-teal-50 text-teal-600">
<Building2 className="h-5 w-5" aria-hidden="true" />
</span>
<CardTitle className="text-primary-navy text-xl">Industry Insights</CardTitle>
</div>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<div> <div>
@ -108,8 +119,9 @@ const IndustryDetail = () => {
<p className="text-soft-text">{industry.name}</p> <p className="text-soft-text">{industry.name}</p>
</div> </div>
<div className="pt-4 border-t border-border"> <div className="pt-4 border-t border-border">
<Link to="/contact" className="block w-full bg-primary-navy text-white px-4 py-3 rounded-md text-center font-medium hover:bg-primary-navy-dark transition-colors"> <Link to="/contact" className="flex w-full items-center justify-center gap-2 bg-primary-navy text-white px-4 py-3 rounded-md text-center font-medium hover:bg-primary-navy-dark transition-colors">
Request Consultation Request Consultation
<ArrowRight className="h-4 w-4" aria-hidden="true" />
</Link> </Link>
</div> </div>
<div className="pt-2"> <div className="pt-2">

31
src/pages/NotFound.jsx
View File

@ -1,5 +1,6 @@
import { Helmet } from 'react-helmet-async' import { Helmet } from 'react-helmet-async'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import { ArrowRight, Compass } from 'lucide-react'
export default function NotFound() { export default function NotFound() {
return ( return (
@ -8,15 +9,31 @@ export default function NotFound() {
<title>Page Not Found | Queue North Technologies</title> <title>Page Not Found | Queue North Technologies</title>
<meta name="description" content="The page you're looking for doesn't exist." /> <meta name="description" content="The page you're looking for doesn't exist." />
</Helmet> </Helmet>
<section className="min-h-[60vh] flex items-center justify-center bg-background"> <section className="relative isolate flex min-h-[70vh] items-center overflow-hidden bg-primary-navy py-16 text-white">
<div className="text-center px-4"> <div className="absolute inset-0 -z-10">
<h1 className="text-6xl font-bold text-primary-navy mb-4">404</h1> <img
<p className="text-xl text-soft-text mb-8">The page you're looking for doesn't exist.</p> src="/assets/hero-tech.webp"
<div className="flex flex-col sm:flex-row gap-4 justify-center"> alt=""
<Link to="/" className="inline-flex items-center justify-center px-6 py-3 bg-primary-cyan text-primary-navy font-medium rounded-md hover:bg-cyan-600 transition-colors"> className="h-full w-full object-cover object-center"
/>
<div className="absolute inset-0 bg-primary-navy/88" />
<div className="absolute inset-0 bg-gradient-to-r from-primary-navy via-primary-navy/95 to-primary-navy/60" />
</div>
<div className="mx-auto max-w-3xl px-4 text-center sm:px-6 lg:px-8">
<div className="mx-auto mb-6 flex h-12 w-12 items-center justify-center rounded-md border border-white/15 bg-white/10 text-primary-cyan">
<Compass className="h-6 w-6" aria-hidden="true" />
</div>
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-primary-cyan">404</p>
<h1 className="mt-3 text-4xl font-bold md:text-5xl">This page lost direction.</h1>
<p className="mx-auto mt-5 max-w-xl text-lg text-white/75">
The page you're looking for does not exist, but we can get you back to the right place.
</p>
<div className="mt-8 flex flex-col sm:flex-row gap-3 justify-center">
<Link to="/" className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-white px-6 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors">
Back to Home Back to Home
<ArrowRight className="h-4 w-4" aria-hidden="true" />
</Link> </Link>
<Link to="/contact" className="inline-flex items-center justify-center px-6 py-3 border border-primary-navy text-primary-navy font-medium rounded-md hover:bg-primary-navy hover:text-white transition-colors"> <Link to="/contact" className="inline-flex h-11 items-center justify-center rounded-md border border-white/35 px-6 text-sm font-semibold text-white hover:bg-white/10 transition-colors">
Contact Us Contact Us
</Link> </Link>
</div> </div>

60
src/pages/ServiceDetail.jsx
View File

@ -3,7 +3,7 @@ import { useParams } from 'react-router-dom'
import { services } from '@/data/services' import { services } from '@/data/services'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card' import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
import { ArrowRight, CheckCircle2, Zap } from 'lucide-react' import { ArrowLeft, ArrowRight, CheckCircle2, Info, Zap } from 'lucide-react'
const serviceImageAlt = { const serviceImageAlt = {
'contact-center': 'Modern contact center operations dashboard and support team', 'contact-center': 'Modern contact center operations dashboard and support team',
@ -39,8 +39,6 @@ const ServiceDetail = () => {
const serviceTitle = `${service.name} | Queue North Technologies` const serviceTitle = `${service.name} | Queue North Technologies`
const serviceDesc = service.shortDesc || `Learn about ${service.name} from Queue North Technologies.` const serviceDesc = service.shortDesc || `Learn about ${service.name} from Queue North Technologies.`
const serviceUrl = `https://queuenorth.com/services/${service.id}` const serviceUrl = `https://queuenorth.com/services/${service.id}`
const hasServiceImage = Boolean(service.image)
const serviceDetailLd = { const serviceDetailLd = {
'@context': 'https://schema.org', '@context': 'https://schema.org',
'@type': 'Service', '@type': 'Service',
@ -66,39 +64,38 @@ const ServiceDetail = () => {
jsonLd={serviceDetailLd} jsonLd={serviceDetailLd}
/> />
{/* Page Hero */} {/* Page Hero */}
<section className="bg-background py-14 md:py-20"> <section className="relative isolate overflow-hidden bg-primary-navy py-16 md:py-24 text-white">
<div className="absolute inset-0 -z-10">
<img
src={service.image || '/assets/hero-tech.webp'}
alt={serviceImageAlt[service.id] || `${service.name} service visual`}
className="h-full w-full object-cover object-center"
/>
<div className="absolute inset-0 bg-primary-navy/84" />
<div className="absolute inset-0 bg-gradient-to-r from-primary-navy via-primary-navy/92 to-primary-navy/50" />
</div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className={hasServiceImage ? 'grid grid-cols-1 lg:grid-cols-[0.9fr_1.1fr] gap-10 lg:gap-14 items-center' : 'max-w-3xl'}> <div className="max-w-3xl">
<div> <div>
<Link to="/services" className="mb-5 inline-flex text-sm font-semibold text-primary-blue hover:text-primary-navy"> <Link to="/services" className="mb-5 inline-flex items-center gap-2 text-sm font-semibold text-primary-cyan hover:text-white">
<ArrowLeft className="h-4 w-4" aria-hidden="true" />
Services Services
</Link> </Link>
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">{service.name}</h1> <h1 className="text-4xl md:text-5xl font-bold mb-6">{service.name}</h1>
<p className="text-xl text-soft-text max-w-3xl leading-relaxed">{service.shortDesc}</p> <p className="text-xl text-white/75 max-w-3xl leading-relaxed">{service.shortDesc}</p>
<div className="mt-8"> <div className="mt-8">
<Link to="/contact" className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-primary-navy px-5 text-sm font-semibold text-white hover:bg-primary-navy-dark transition-colors"> <Link to="/contact" className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-white px-5 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors">
Request This Service Request This Service
<ArrowRight className="h-4 w-4" aria-hidden="true" /> <ArrowRight className="h-4 w-4" aria-hidden="true" />
</Link> </Link>
</div> </div>
</div> </div>
{hasServiceImage && (
<div className="relative overflow-hidden rounded-md border border-border bg-white shadow-sm">
<img
src={service.image}
alt={serviceImageAlt[service.id] || `${service.name} service visual`}
className="h-72 w-full object-cover md:h-96 lg:h-[28rem]"
/>
<div className="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-primary-navy/55 to-transparent" />
</div>
)}
</div> </div>
</div> </div>
</section> </section>
{/* Main Content */} {/* Main Content */}
<section className="bg-background py-16"> <section className="bg-background py-16 lg:py-24">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-12"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
{/* Left Column - Main Content */} {/* Left Column - Main Content */}
@ -114,9 +111,9 @@ const ServiceDetail = () => {
<h2 className="text-2xl font-bold text-primary-navy mb-4">Key Benefits</h2> <h2 className="text-2xl font-bold text-primary-navy mb-4">Key Benefits</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{service.benefits.map((benefit, index) => ( {service.benefits.map((benefit, index) => (
<div key={index} className="flex items-start gap-3"> <div key={index} className="flex items-start gap-3 rounded-md border border-border bg-white p-4 shadow-sm">
<CheckCircle2 className="h-6 w-6 text-primary-blue flex-shrink-0 mt-1" aria-hidden="true" /> <CheckCircle2 className="h-5 w-5 text-primary-blue flex-shrink-0 mt-0.5" aria-hidden="true" />
<span className="text-lg text-text">{benefit}</span> <span className="text-sm font-medium text-text">{benefit}</span>
</div> </div>
))} ))}
</div> </div>
@ -126,9 +123,9 @@ const ServiceDetail = () => {
<h2 className="text-2xl font-bold text-primary-navy mb-4">Ideal For</h2> <h2 className="text-2xl font-bold text-primary-navy mb-4">Ideal For</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{service.idealFor.map((item, index) => ( {service.idealFor.map((item, index) => (
<div key={index} className="flex items-start gap-3"> <div key={index} className="flex items-start gap-3 rounded-md border border-border bg-white p-4 shadow-sm">
<Zap className="h-6 w-6 text-primary-blue flex-shrink-0 mt-1" aria-hidden="true" /> <Zap className="h-5 w-5 text-teal-600 flex-shrink-0 mt-0.5" aria-hidden="true" />
<span className="text-lg text-text">{item}</span> <span className="text-sm font-medium text-text">{item}</span>
</div> </div>
))} ))}
</div> </div>
@ -137,9 +134,14 @@ const ServiceDetail = () => {
{/* Right Column - Sidebar */} {/* Right Column - Sidebar */}
<div className="lg:col-span-1"> <div className="lg:col-span-1">
<Card className="lg:sticky top-24"> <Card className="lg:sticky top-24 border-t-[3px] border-t-primary-blue">
<CardHeader> <CardHeader>
<CardTitle className="text-primary-navy">Quick Info</CardTitle> <div className="flex items-center gap-3">
<span className="flex h-10 w-10 items-center justify-center rounded-md bg-sky-50 text-primary-blue">
<Info className="h-5 w-5" aria-hidden="true" />
</span>
<CardTitle className="text-primary-navy text-xl">Quick Info</CardTitle>
</div>
</CardHeader> </CardHeader>
<CardContent className="space-y-4"> <CardContent className="space-y-4">
<div> <div>

21
src/pages/Support.jsx
View File

@ -152,7 +152,16 @@ const Support = () => {
url="https://queuenorth.com/support" url="https://queuenorth.com/support"
/> />
{/* Page Hero */} {/* Page Hero */}
<section className="bg-primary-navy py-16 lg:py-20 text-white"> <section className="relative isolate overflow-hidden bg-primary-navy py-16 lg:py-24 text-white">
<div className="absolute inset-0 -z-10">
<img
src="/assets/modern-call-center.webp"
alt="Support team managing communications requests"
className="h-full w-full object-cover object-center"
/>
<div className="absolute inset-0 bg-primary-navy/84" />
<div className="absolute inset-0 bg-gradient-to-r from-primary-navy via-primary-navy/92 to-primary-navy/50" />
</div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 lg:grid-cols-[1fr_0.72fr] gap-10 lg:gap-14 items-center"> <div className="grid grid-cols-1 lg:grid-cols-[1fr_0.72fr] gap-10 lg:gap-14 items-center">
<div> <div>
@ -222,12 +231,12 @@ const Support = () => {
</section> </section>
{/* Support Form */} {/* Support Form */}
<section id="support-request" className="bg-background py-16 lg:py-20"> <section id="support-request" className="bg-background py-16 lg:py-24">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 lg:grid-cols-[0.9fr_1.1fr] gap-8 lg:gap-10 items-start"> <div className="grid grid-cols-1 lg:grid-cols-[0.9fr_1.1fr] gap-8 lg:gap-10 items-start">
{/* Left - Info — order 2 on mobile so form appears first */} {/* Left - Info — order 2 on mobile so form appears first */}
<div className="order-2 lg:order-1 space-y-6"> <div className="order-2 lg:order-1 space-y-6">
<div className="rounded-md border border-border bg-white p-6 shadow-sm"> <div className="rounded-md border border-border border-t-[3px] border-t-primary-blue bg-white p-6 shadow-sm">
<div className="flex items-start gap-4"> <div className="flex items-start gap-4">
<span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-md bg-primary-navy text-white"> <span className="flex h-11 w-11 shrink-0 items-center justify-center rounded-md bg-primary-navy text-white">
<Headphones className="h-5 w-5" aria-hidden="true" /> <Headphones className="h-5 w-5" aria-hidden="true" />
@ -256,7 +265,7 @@ const Support = () => {
</div> </div>
</div> </div>
<div className="rounded-md border border-border bg-white p-6 shadow-sm"> <div className="rounded-md border border-border border-t-[3px] border-t-teal-500 bg-white p-6 shadow-sm">
<div className="flex items-center gap-3 mb-5"> <div className="flex items-center gap-3 mb-5">
<span className="flex h-10 w-10 items-center justify-center rounded-md bg-section-alt text-primary-navy"> <span className="flex h-10 w-10 items-center justify-center rounded-md bg-section-alt text-primary-navy">
<Clock3 className="h-5 w-5" aria-hidden="true" /> <Clock3 className="h-5 w-5" aria-hidden="true" />
@ -276,7 +285,7 @@ const Support = () => {
</div> </div>
</div> </div>
<div className="rounded-md border border-border bg-section-alt p-6"> <div className="rounded-md border border-border border-t-[3px] border-t-cyan-400 bg-section-alt p-6">
<div className="flex items-center gap-3 mb-5"> <div className="flex items-center gap-3 mb-5">
<span className="flex h-10 w-10 items-center justify-center rounded-md bg-white text-primary-navy"> <span className="flex h-10 w-10 items-center justify-center rounded-md bg-white text-primary-navy">
<ShieldCheck className="h-5 w-5" aria-hidden="true" /> <ShieldCheck className="h-5 w-5" aria-hidden="true" />
@ -296,7 +305,7 @@ const Support = () => {
{/* Right - Form — order 1 on mobile so it appears first */} {/* Right - Form — order 1 on mobile so it appears first */}
<div className="order-1 lg:order-2"> <div className="order-1 lg:order-2">
<form onSubmit={handleSubmit} noValidate className={`rounded-md border border-border bg-white p-6 shadow-sm lg:p-8 space-y-5 ${isSubmitting ? 'opacity-70 pointer-events-none' : ''}`}> <form onSubmit={handleSubmit} noValidate className={`rounded-md border border-border border-t-[3px] border-t-accent-gold bg-white p-6 shadow-sm lg:p-8 space-y-5 ${isSubmitting ? 'opacity-70 pointer-events-none' : ''}`}>
<div className="border-b border-border pb-5"> <div className="border-b border-border pb-5">
<h2 className="text-2xl font-bold text-primary-navy">Submit a Request</h2> <h2 className="text-2xl font-bold text-primary-navy">Submit a Request</h2>
<p className="mt-2 text-sm text-soft-text"> <p className="mt-2 text-sm text-soft-text">