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

feat: Phase 3 Batch 4 — inner pages layout system with consistent hero/card/CTA pattern (v0.3.4)

This commit is contained in:
null 2026-05-12 02:45:25 -05:00
parent 35aaa639ec
commit f03229dd50
7 changed files with 51 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,7 +1,7 @@
{ {
"name": "queuenorth-website", "name": "queuenorth-website",
"private": true, "private": true,
"version": "0.3.3", "version": "0.3.4",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "concurrently \"vite\" \"node server/index.js\"", "dev": "concurrently \"vite\" \"node server/index.js\"",

14
src/pages/8x8.jsx
View File

@ -34,7 +34,7 @@ const EightXEight = () => {
{/* Our Expertise */} {/* Our Expertise */}
<section className="mb-16"> <section className="mb-16">
<h2 className="text-3xl font-bold text-primary-navy mb-8 text-center">8x8 Expertise</h2> <h2 className="text-3xl font-bold text-primary-navy mb-8 text-center">8x8 Expertise</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
{[ {[
'VoIP Implementation', 'VoIP Implementation',
'Cloud PBX Migration', 'Cloud PBX Migration',
@ -45,13 +45,13 @@ const EightXEight = () => {
'System Integration', 'System Integration',
'Ongoing Support', 'Ongoing Support',
].map((expertise, index) => ( ].map((expertise, index) => (
<div key={index} className="flex items-center gap-3"> <div key={index} className="flex items-center gap-2 p-3 rounded-lg border border-border bg-card">
<div className="h-6 w-6 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0"> <div className="h-5 w-5 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0">
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg> </svg>
</div> </div>
<span className="text-lg text-text">{expertise}</span> <span className="text-sm font-medium text-text">{expertise}</span>
</div> </div>
))} ))}
</div> </div>
@ -60,7 +60,7 @@ const EightXEight = () => {
{/* Benefits */} {/* Benefits */}
<section className="mb-16"> <section className="mb-16">
<h2 className="text-3xl font-bold text-primary-navy mb-8 text-center">Why Choose 8x8</h2> <h2 className="text-3xl font-bold text-primary-navy mb-8 text-center">Why Choose 8x8</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{[ {[
{ title: 'Scalability', desc: 'Easily scale your communications as your business grows' }, { title: 'Scalability', desc: 'Easily scale your communications as your business grows' },
{ title: 'Reliability', desc: '99.999% uptime guarantee for mission-critical communications' }, { title: 'Reliability', desc: '99.999% uptime guarantee for mission-critical communications' },
@ -69,7 +69,7 @@ const EightXEight = () => {
{ title: 'Analytics', desc: 'Real-time insights and reporting to optimize performance' }, { title: 'Analytics', desc: 'Real-time insights and reporting to optimize performance' },
{ title: 'Support', desc: '24/7 expert support to keep your communications running' }, { title: 'Support', desc: '24/7 expert support to keep your communications running' },
].map((benefit, index) => ( ].map((benefit, index) => (
<div key={index} className="p-6 rounded-lg border border-border bg-card shadow-sm"> <div key={index} className="p-6 rounded-lg border border-border bg-card shadow-sm hover:shadow-md transition-shadow">
<h3 className="text-xl font-semibold text-primary-navy mb-3">{benefit.title}</h3> <h3 className="text-xl font-semibold text-primary-navy mb-3">{benefit.title}</h3>
<p className="text-soft-text">{benefit.desc}</p> <p className="text-soft-text">{benefit.desc}</p>
</div> </div>

16
src/pages/About.jsx
View File

@ -37,7 +37,7 @@ const About = () => {
{/* Our Values */} {/* Our Values */}
<section className="mb-16"> <section className="mb-16">
<h2 className="text-3xl font-bold text-primary-navy mb-8 text-center">Our Values</h2> <h2 className="text-3xl font-bold text-primary-navy mb-8 text-center">Our Values</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{[ {[
{ title: 'Business First', desc: 'We focus on your business outcomes, not just technology' }, { title: 'Business First', desc: 'We focus on your business outcomes, not just technology' },
{ title: 'Honesty', desc: 'We tell you what you need, not just what we can sell' }, { title: 'Honesty', desc: 'We tell you what you need, not just what we can sell' },
@ -46,7 +46,7 @@ const About = () => {
{ title: 'Reliability', desc: 'When we say we will do something, we do it' }, { title: 'Reliability', desc: 'When we say we will do something, we do it' },
{ title: 'Support', desc: 'Our job doesn\'t end when installation completes' }, { title: 'Support', desc: 'Our job doesn\'t end when installation completes' },
].map((value, index) => ( ].map((value, index) => (
<div key={index} className="p-6 rounded-lg border border-border bg-card shadow-sm"> <div key={index} className="p-6 rounded-lg border border-border bg-card shadow-sm hover:shadow-md transition-shadow">
<h3 className="text-xl font-semibold text-primary-navy mb-3">{value.title}</h3> <h3 className="text-xl font-semibold text-primary-navy mb-3">{value.title}</h3>
<p className="text-soft-text">{value.desc}</p> <p className="text-soft-text">{value.desc}</p>
</div> </div>
@ -56,8 +56,8 @@ const About = () => {
{/* Our Expertise */} {/* Our Expertise */}
<section className="mb-16"> <section className="mb-16">
<h2 className="text-3xl font-bold text-primary-navy mb-8">Our Expertise</h2> <h2 className="text-3xl font-bold text-primary-navy mb-8 text-center">Our Expertise</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
{[ {[
'8x8 Certified Partner', '8x8 Certified Partner',
'VoIP and UCaaS Solutions', 'VoIP and UCaaS Solutions',
@ -68,13 +68,13 @@ const About = () => {
'Disaster Recovery Planning', 'Disaster Recovery Planning',
'24/7 Support & Monitoring', '24/7 Support & Monitoring',
].map((expertise, index) => ( ].map((expertise, index) => (
<div key={index} className="flex items-center gap-3"> <div key={index} className="flex items-center gap-2 p-3 rounded-lg border border-border bg-card">
<div className="h-6 w-6 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0"> <div className="h-5 w-5 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0">
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg> </svg>
</div> </div>
<span className="text-lg text-text">{expertise}</span> <span className="text-sm font-medium text-text">{expertise}</span>
</div> </div>
))} ))}
</div> </div>

21
src/pages/Industries.jsx
View File

@ -12,7 +12,7 @@ const Industries = () => {
</section> </section>
{/* Industries Grid */} {/* Industries Grid */}
<section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6">
{industries.map((industry) => ( {industries.map((industry) => (
<div key={industry.id} className="group cursor-pointer"> <div key={industry.id} className="group cursor-pointer">
<div className="rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow bg-card border border-border"> <div className="rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-shadow bg-card border border-border">
@ -28,7 +28,24 @@ const Industries = () => {
</h3> </h3>
</div> </div>
<p className="text-soft-text mb-4">{industry.shortDesc}</p> <p className="text-soft-text mb-4">{industry.shortDesc}</p>
<a href={`/industries/${industry.id}`} className="text-primary-navy font-medium hover:underline inline-flex items-center gap-1">
<div className="mb-4">
<h4 className="text-sm font-semibold text-text mb-2">Pain Points We Solve</h4>
<div className="space-y-2">
{industry.painPoints.slice(0, 2).map((painPoint, index) => (
<div key={index} className="flex items-start gap-2 text-sm text-soft-text">
<div className="h-4 w-4 rounded-full bg-red-100 text-red-600 flex items-center justify-center flex-shrink-0 mt-0.5">
<svg className="h-2 w-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<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>{painPoint}</span>
</div>
))}
</div>
</div>
<a href={`/industries/${industry.id}`} className="inline-flex items-center gap-1 text-primary-navy font-medium hover:underline mt-2">
Learn more Learn more
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />

4
src/pages/IndustryDetail.jsx
View File

@ -39,7 +39,7 @@ const IndustryDetail = ({ name }) => {
<section className="mb-12"> <section className="mb-12">
<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="space-y-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">
<div className="h-6 w-6 rounded-full bg-red-100 text-red-700 flex items-center justify-center flex-shrink-0 mt-1"> <div className="h-6 w-6 rounded-full bg-red-100 text-red-700 flex items-center justify-center flex-shrink-0 mt-1">
@ -55,7 +55,7 @@ const IndustryDetail = ({ name }) => {
<section className="mb-12"> <section className="mb-12">
<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="space-y-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">
<div className="h-6 w-6 rounded-full bg-green-100 text-green-700 flex items-center justify-center flex-shrink-0 mt-1"> <div className="h-6 w-6 rounded-full bg-green-100 text-green-700 flex items-center justify-center flex-shrink-0 mt-1">

6
src/pages/ServiceDetail.jsx
View File

@ -38,8 +38,8 @@ const ServiceDetail = ({ name }) => {
</section> </section>
<section className="mb-12"> <section className="mb-12">
<h2 className="text-2xl font-bold text-primary-navy mb-4">How Queue North Helps</h2> <h2 className="text-2xl font-bold text-primary-navy mb-4">Key Benefits</h2>
<div className="space-y-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">
<div className="h-6 w-6 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0 mt-1"> <div className="h-6 w-6 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0 mt-1">
@ -55,7 +55,7 @@ const ServiceDetail = ({ name }) => {
<section className="mb-12"> <section className="mb-12">
<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="space-y-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">
<div className="h-6 w-6 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0 mt-1"> <div className="h-6 w-6 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0 mt-1">

18
src/pages/Services.jsx
View File

@ -28,15 +28,19 @@ const Services = () => {
</h3> </h3>
</div> </div>
<p className="text-soft-text mb-4">{service.shortDesc}</p> <p className="text-soft-text mb-4">{service.shortDesc}</p>
<p className="text-sm text-soft-text mb-4">{service.fullDesc}</p> <div className="space-y-2 mb-4">
<div className="flex flex-wrap gap-2 mb-4"> {service.benefits.slice(0, 3).map((benefit, index) => (
{service.benefits.slice(0, 2).map((benefit, index) => ( <div key={index} className="flex items-center gap-2 text-sm text-soft-text">
<span key={index} className="px-2 py-1 bg-section-alt rounded text-xs text-soft-text"> <div className="h-4 w-4 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0">
{benefit} <svg className="h-2 w-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
</span> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
</svg>
</div>
<span>{benefit}</span>
</div>
))} ))}
</div> </div>
<a href={`/services/${service.id}`} className="text-primary-navy font-medium hover:underline inline-flex items-center gap-1"> <a href={`/services/${service.id}`} className="inline-flex items-center gap-1 text-primary-navy font-medium hover:underline mt-2">
Learn more Learn more
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7" />