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

refactor: full-bleed section backgrounds with centered content (closes #48)

This commit is contained in:
null 2026-05-17 17:11:29 -05:00
parent 5d67149a51
commit b5170caf9d
8 changed files with 840 additions and 764 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/pages/About.jsx
View File

@ -1,16 +1,22 @@
const About = () => { const About = () => {
return ( return (
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24"> <>
{/* Page Hero */} {/* Page Hero */}
<section className="mb-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>
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">About Queue North</h1> <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">About Queue North</h1>
<p className="text-xl text-soft-text max-w-3xl"> <p className="text-xl text-soft-text max-w-3xl">
We're communications and infrastructure partners who cut through the vendor noise to deliver what actually works for your business. We're communications and infrastructure partners who cut through the vendor noise to deliver what actually works for your business.
</p> </p>
</div>
</div>
</section> </section>
{/* Company Story */} {/* Company Story */}
<section className="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16"> <section className="bg-background py-16">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
<div> <div>
<h2 className="text-3xl font-bold text-primary-navy mb-4">Our Story</h2> <h2 className="text-3xl font-bold text-primary-navy mb-4">Our Story</h2>
<p className="text-lg text-soft-text mb-6 leading-relaxed"> <p className="text-lg text-soft-text mb-6 leading-relaxed">
@ -35,10 +41,13 @@ const About = () => {
/> />
</div> </div>
</div> </div>
</div>
</div>
</section> </section>
{/* Our Values */} {/* Our Values */}
<section className="mb-16"> <section className="bg-background py-16">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<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-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{[ {[
@ -55,10 +64,12 @@ const About = () => {
</div> </div>
))} ))}
</div> </div>
</div>
</section> </section>
{/* Our Expertise */} {/* Our Expertise */}
<section className="mb-16"> <section className="bg-background py-16">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 className="text-3xl font-bold text-primary-navy mb-8 text-center">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 lg:grid-cols-4 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
{[ {[
@ -69,7 +80,7 @@ const About = () => {
'Cloud Migration', 'Cloud Migration',
'Vendor-Neutral Consulting', 'Vendor-Neutral Consulting',
'Disaster Recovery Planning', 'Disaster Recovery Planning',
'24/7 Support &amp; Monitoring', '24/7 Support & Monitoring',
].map((expertise, index) => ( ].map((expertise, index) => (
<div key={index} className="flex items-center gap-2 p-3 rounded-lg border border-border bg-card"> <div key={index} className="flex items-center gap-2 p-3 rounded-lg border border-border bg-card">
<div className="h-5 w-5 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">
@ -81,10 +92,13 @@ const About = () => {
</div> </div>
))} ))}
</div> </div>
</div>
</section> </section>
{/* CTA */} {/* CTA */}
<section className="bg-section-alt rounded-xl p-8 md:p-12 text-center"> <section className="bg-section-alt py-16">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div>
<h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">Ready to Learn More?</h2> <h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">Ready to Learn More?</h2>
<p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto"> <p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto">
Schedule a free consultation with our communications experts to discuss your needs. Schedule a free consultation with our communications experts to discuss your needs.
@ -95,8 +109,10 @@ const About = () => {
> >
Request Consultation Request Consultation
</a> </a>
</section>
</div> </div>
</div>
</section>
</>
) )
} }

16
src/pages/Contact.jsx
View File

@ -100,9 +100,11 @@ const Contact = () => {
} }
return ( return (
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24"> <>
{/* Page Hero */} {/* Page Hero */}
<section className="mb-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>
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Contact Us</h1> <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Contact Us</h1>
<p className="text-xl text-soft-text max-w-3xl mb-8"> <p className="text-xl text-soft-text max-w-3xl mb-8">
Have questions about our services? We're here to help. Fill out the form and we'll get back to you shortly. Have questions about our services? We're here to help. Fill out the form and we'll get back to you shortly.
@ -126,9 +128,13 @@ const Contact = () => {
Request Consultation Request Consultation
</a> </a>
</div> </div>
</div>
</div>
</section> </section>
{/* Contact Form */} {/* Contact Form */}
<section className="bg-background py-16">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
{/* Left - Info */} {/* Left - Info */}
<div> <div>
@ -286,15 +292,15 @@ const Contact = () => {
<label htmlFor="message" className="block text-sm font-medium text-text mb-2"> <label htmlFor="message" className="block text-sm font-medium text-text mb-2">
Message <span className="text-red-600">*</span> Message <span className="text-red-600">*</span>
</label> </label>
<textarea <Textarea
id="message" id="message"
name="message" name="message"
value={formState.message} value={formState.message}
onChange={handleChange} onChange={handleChange}
required required
placeholder="Tell us about your needs..." placeholder="Tell us about your needs..."
className={`w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${errors.message ? 'border-red-500 focus-visible:ring-red-500' : ''}`}
rows={5} rows={5}
className={`flex min-h-[80px] w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${errors.message ? 'border-red-500 focus-visible:ring-red-500' : ''}`}
/> />
{debouncedErrors.message && ( {debouncedErrors.message && (
<p className="text-xs text-red-600 mt-1">{debouncedErrors.message}</p> <p className="text-xs text-red-600 mt-1">{debouncedErrors.message}</p>
@ -312,6 +318,8 @@ const Contact = () => {
</div> </div>
</div> </div>
</div> </div>
</section>
</>
) )
} }

22
src/pages/Home.jsx
View File

@ -17,10 +17,10 @@ const Home = () => {
const navigate = useNavigate() const navigate = useNavigate()
return ( return (
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <>
{/* Hero Section */} {/* Hero Section */}
<section className="bg-gradient-to-br from-primary-navy via-primary-navy to-teal-900 text-white py-16 md:py-24"> <section className="bg-gradient-to-br from-primary-navy via-primary-navy to-teal-900 text-white py-16 md:py-24">
<div className="container mx-auto px-4"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 items-center"> <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 items-center">
<div className="flex flex-col gap-6 md:gap-8"> <div className="flex flex-col gap-6 md:gap-8">
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold"> <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold">
@ -71,7 +71,7 @@ const Home = () => {
{/* Trust Bar */} {/* Trust Bar */}
<section className="bg-section-alt py-12"> <section className="bg-section-alt py-12">
<div className="container mx-auto px-4"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-8"> <div className="text-center mb-8">
<h2 className="text-2xl font-semibold text-primary-navy mb-2">Trusted Partner</h2> <h2 className="text-2xl font-semibold text-primary-navy mb-2">Trusted Partner</h2>
<p className="text-soft-text">8x8 and Cisco Certified Partner with proven expertise</p> <p className="text-soft-text">8x8 and Cisco Certified Partner with proven expertise</p>
@ -95,8 +95,8 @@ const Home = () => {
{/* JointLogoWhite Trust Section */} {/* JointLogoWhite Trust Section */}
<section className="bg-primary-navy py-16 md:py-24"> <section className="bg-primary-navy py-16 md:py-24">
<div className="container mx-auto px-4 text-center"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div className="max-w-3xl mx-auto"> <div>
<h2 className="text-3xl md:text-4xl font-bold text-white mb-6">Certified Excellence</h2> <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">Certified Excellence</h2>
<div className="flex flex-col md:flex-row items-center justify-center gap-12"> <div className="flex flex-col md:flex-row items-center justify-center gap-12">
<div className="flex-1"> <div className="flex-1">
@ -122,7 +122,7 @@ const Home = () => {
{/* Trust Signals Section */} {/* Trust Signals Section */}
<section className="bg-section-alt py-16 md:py-24"> <section className="bg-section-alt py-16 md:py-24">
<div className="container mx-auto px-4"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-12"> <div className="text-center mb-12">
<h2 className="text-2xl md:text-3xl font-semibold text-primary-navy mb-2">Trusted by Thousands of Businesses</h2> <h2 className="text-2xl md:text-3xl font-semibold text-primary-navy mb-2">Trusted by Thousands of Businesses</h2>
<p className="text-xl text-soft-text max-w-2xl mx-auto mb-6"> <p className="text-xl text-soft-text max-w-2xl mx-auto mb-6">
@ -226,7 +226,7 @@ const Home = () => {
{/* Services Section */} {/* Services Section */}
<section className="bg-background py-16 md:py-24"> <section className="bg-background py-16 md:py-24">
<div className="container mx-auto px-4"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-12"> <div className="text-center mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-4">What We Handle</h2> <h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-4">What We Handle</h2>
<p className="text-xl text-soft-text max-w-2xl mx-auto"> <p className="text-xl text-soft-text max-w-2xl mx-auto">
@ -270,7 +270,7 @@ const Home = () => {
{/* Why Queue North */} {/* Why Queue North */}
<section className="bg-section-alt py-16 md:py-24"> <section className="bg-section-alt py-16 md:py-24">
<div className="container mx-auto px-4"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-12"> <div className="text-center mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-4">Why Queue North</h2> <h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-4">Why Queue North</h2>
<p className="text-xl text-soft-text max-w-2xl mx-auto mb-6"> <p className="text-xl text-soft-text max-w-2xl mx-auto mb-6">
@ -334,7 +334,7 @@ const Home = () => {
{/* Industries Section */} {/* Industries Section */}
<section className="bg-background py-16 md:py-24"> <section className="bg-background py-16 md:py-24">
<div className="container mx-auto px-4"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-12"> <div className="text-center mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-4">Industries We Serve</h2> <h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-4">Industries We Serve</h2>
<p className="text-xl text-soft-text max-w-2xl mx-auto"> <p className="text-xl text-soft-text max-w-2xl mx-auto">
@ -367,7 +367,7 @@ const Home = () => {
{/* Final CTA */} {/* Final CTA */}
<section className="bg-primary-navy text-white py-16 md:py-24"> <section className="bg-primary-navy text-white py-16 md:py-24">
<div className="container mx-auto px-4 text-center max-w-7xl"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 className="text-3xl md:text-4xl font-bold mb-6"> <h2 className="text-3xl md:text-4xl font-bold mb-6">
Tell us what you're trying to fix. We'll help map the path. Tell us what you're trying to fix. We'll help map the path.
</h2> </h2>
@ -379,7 +379,7 @@ const Home = () => {
</Button> </Button>
</div> </div>
</section> </section>
</div> </>
) )
} }

22
src/pages/Industries.jsx
View File

@ -2,17 +2,23 @@ import { industries } from '@/data/industries'
const Industries = () => { const Industries = () => {
return ( return (
<div className="container mx-auto px-4 py-16 md:py-24"> <>
{/* Page Hero */} {/* Page Hero */}
<section className="mb-16"> <section className="bg-background py-16 md:py-24">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div>
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Industries We Serve</h1> <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Industries We Serve</h1>
<p className="text-xl text-soft-text max-w-3xl"> <p className="text-xl text-soft-text max-w-3xl">
Tailored communications and infrastructure solutions designed for the unique challenges of your industry. Tailored communications and infrastructure solutions designed for the unique challenges of your industry.
</p> </p>
</div>
</div>
</section> </section>
{/* Industries Grid */} {/* Industries Grid */}
<section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 gap-6"> <section className="bg-background py-16">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div 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">
@ -55,10 +61,14 @@ const Industries = () => {
</div> </div>
</div> </div>
))} ))}
</div>
</div>
</section> </section>
{/* CTA */} {/* CTA */}
<section className="mt-16 bg-section-alt rounded-xl p-8 md:p-12 text-center"> <section className="bg-section-alt py-16">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div>
<h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">Can't Find Your Industry?</h2> <h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">Can't Find Your Industry?</h2>
<p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto"> <p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto">
We work with businesses across all industries. Contact us to discuss your specific needs. We work with businesses across all industries. Contact us to discuss your specific needs.
@ -69,8 +79,10 @@ const Industries = () => {
> >
Request Consultation Request Consultation
</a> </a>
</section>
</div> </div>
</div>
</section>
</>
) )
} }

28
src/pages/IndustryDetail.jsx
View File

@ -8,7 +8,8 @@ const IndustryDetail = () => {
if (!industry) { if (!industry) {
return ( return (
<div className="container mx-auto px-4 py-16 md:py-24"> <section className="bg-background py-16 md:py-24">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center"> <div className="text-center">
<h1 className="text-3xl font-bold text-primary-navy mb-4">Industry Not Found</h1> <h1 className="text-3xl font-bold text-primary-navy mb-4">Industry Not Found</h1>
<p className="text-xl text-soft-text mb-8">The industry you're looking for doesn't exist.</p> <p className="text-xl text-soft-text mb-8">The industry you're looking for doesn't exist.</p>
@ -17,29 +18,36 @@ const IndustryDetail = () => {
</a> </a>
</div> </div>
</div> </div>
</section>
) )
} }
return ( return (
<div className="container mx-auto px-4 py-16 md:py-24"> <>
{/* Page Hero */} {/* Page Hero */}
<section className="mb-16"> <section className="bg-background py-16 md:py-24">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div>
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">{industry.name}</h1> <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">{industry.name}</h1>
<p className="text-xl text-soft-text max-w-3xl">{industry.shortDesc}</p> <p className="text-xl text-soft-text max-w-3xl">{industry.shortDesc}</p>
</div>
</div>
</section> </section>
{/* Main Content */} {/* Main Content */}
<section className="bg-background py-16">
<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 */}
<div className="lg:col-span-2"> <div className="lg:col-span-2">
<section className="mb-12"> <div className="mb-12">
<h2 className="text-2xl font-bold text-primary-navy mb-4">Industry Overview</h2> <h2 className="text-2xl font-bold text-primary-navy mb-4">Industry Overview</h2>
<p className="text-lg text-soft-text mb-6 leading-relaxed"> <p className="text-lg text-soft-text mb-6 leading-relaxed">
{industry.fullDesc} {industry.fullDesc}
</p> </p>
</section> </div>
<section className="mb-12"> <div 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="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) => (
@ -53,9 +61,9 @@ const IndustryDetail = () => {
</div> </div>
))} ))}
</div> </div>
</section> </div>
<section className="mb-12"> <div 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="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) => (
@ -69,7 +77,7 @@ const IndustryDetail = () => {
</div> </div>
))} ))}
</div> </div>
</section> </div>
</div> </div>
{/* Right Column - Sidebar */} {/* Right Column - Sidebar */}
@ -98,6 +106,8 @@ const IndustryDetail = () => {
</div> </div>
</div> </div>
</div> </div>
</section>
</>
) )
} }

28
src/pages/ServiceDetail.jsx
View File

@ -8,7 +8,8 @@ const ServiceDetail = () => {
if (!service) { if (!service) {
return ( return (
<div className="container mx-auto px-4 py-16 md:py-24"> <section className="bg-background py-16 md:py-24">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center"> <div className="text-center">
<h1 className="text-3xl font-bold text-primary-navy mb-4">Service Not Found</h1> <h1 className="text-3xl font-bold text-primary-navy mb-4">Service Not Found</h1>
<p className="text-xl text-soft-text mb-8">The service you're looking for doesn't exist.</p> <p className="text-xl text-soft-text mb-8">The service you're looking for doesn't exist.</p>
@ -17,13 +18,16 @@ const ServiceDetail = () => {
</a> </a>
</div> </div>
</div> </div>
</section>
) )
} }
return ( return (
<div className="container mx-auto px-4 py-16 md:py-24"> <>
{/* Page Hero */} {/* Page Hero */}
<section className="mb-16"> <section className="bg-background py-16 md:py-24">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div>
<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 text-primary-navy mb-6">{service.name}</h1>
{service.image && ( {service.image && (
<div className="relative mb-8 rounded-xl overflow-hidden"> <div className="relative mb-8 rounded-xl overflow-hidden">
@ -38,20 +42,24 @@ const ServiceDetail = () => {
</div> </div>
)} )}
<p className="text-xl text-soft-text max-w-3xl">{service.shortDesc}</p> <p className="text-xl text-soft-text max-w-3xl">{service.shortDesc}</p>
</div>
</div>
</section> </section>
{/* Main Content */} {/* Main Content */}
<section className="bg-background py-16">
<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 */}
<div className="lg:col-span-2"> <div className="lg:col-span-2">
<section className="mb-12"> <div className="mb-12">
<h2 className="text-2xl font-bold text-primary-navy mb-4">What This Solves</h2> <h2 className="text-2xl font-bold text-primary-navy mb-4">What This Solves</h2>
<p className="text-lg text-soft-text mb-6 leading-relaxed"> <p className="text-lg text-soft-text mb-6 leading-relaxed">
{service.fullDesc} {service.fullDesc}
</p> </p>
</section> </div>
<section className="mb-12"> <div className="mb-12">
<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) => (
@ -65,9 +73,9 @@ const ServiceDetail = () => {
</div> </div>
))} ))}
</div> </div>
</section> </div>
<section className="mb-12"> <div 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="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) => (
@ -81,7 +89,7 @@ const ServiceDetail = () => {
</div> </div>
))} ))}
</div> </div>
</section> </div>
</div> </div>
{/* Right Column - Sidebar */} {/* Right Column - Sidebar */}
@ -114,6 +122,8 @@ const ServiceDetail = () => {
</div> </div>
</div> </div>
</div> </div>
</section>
</>
) )
} }

22
src/pages/Services.jsx
View File

@ -3,17 +3,23 @@ import { MessageCircle, Users, LifeBuoy, GraduationCap, Link as LinkIcon, Wifi,
const Services = () => { const Services = () => {
return ( return (
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24"> <>
{/* Page Hero */} {/* Page Hero */}
<section className="mb-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>
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Our Services</h1> <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Our Services</h1>
<p className="text-xl text-soft-text max-w-3xl"> <p className="text-xl text-soft-text max-w-3xl">
Comprehensive communications and infrastructure solutions designed to help your business thrive in today's digital landscape. Comprehensive communications and infrastructure solutions designed to help your business thrive in today's digital landscape.
</p> </p>
</div>
</div>
</section> </section>
{/* Services Grid */} {/* Services Grid */}
<section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <section className="bg-background py-16">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{services.map((service) => ( {services.map((service) => (
<div key={service.id} className="group cursor-pointer"> <div key={service.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">
@ -55,10 +61,14 @@ const Services = () => {
</div> </div>
</div> </div>
))} ))}
</div>
</div>
</section> </section>
{/* CTA */} {/* CTA */}
<section className="mt-16 bg-section-alt rounded-xl p-8 md:p-12 text-center"> <section className="bg-section-alt py-16">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<div>
<h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">Looking for Something Specific?</h2> <h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">Looking for Something Specific?</h2>
<p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto"> <p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto">
Don't see exactly what you're looking for? We can help you find the right solution. Don't see exactly what you're looking for? We can help you find the right solution.
@ -69,8 +79,10 @@ const Services = () => {
> >
Request Consultation Request Consultation
</a> </a>
</section>
</div> </div>
</div>
</section>
</>
) )
} }

16
src/pages/Support.jsx
View File

@ -103,9 +103,11 @@ const Support = () => {
} }
return ( return (
<div className="container mx-auto px-4 py-16 md:py-24"> <>
{/* Page Hero */} {/* Page Hero */}
<section className="mb-16"> <section className="bg-background py-16 md:py-24">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div>
<h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Support</h1> <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">Support</h1>
<p className="text-xl text-soft-text max-w-3xl mb-8"> <p className="text-xl text-soft-text max-w-3xl mb-8">
Need help with your communications or infrastructure? Submit a support request and we'll get back to you promptly. Need help with your communications or infrastructure? Submit a support request and we'll get back to you promptly.
@ -129,9 +131,13 @@ const Support = () => {
Request Consultation Request Consultation
</a> </a>
</div> </div>
</div>
</div>
</section> </section>
{/* Support Form */} {/* Support Form */}
<section className="bg-background py-16">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
{/* Left - Info */} {/* Left - Info */}
<div> <div>
@ -289,15 +295,15 @@ const Support = () => {
<label htmlFor="issue" className="block text-sm font-medium text-text mb-2"> <label htmlFor="issue" className="block text-sm font-medium text-text mb-2">
Describe Your Issue <span className="text-red-600">*</span> Describe Your Issue <span className="text-red-600">*</span>
</label> </label>
<textarea <Textarea
id="issue" id="issue"
name="issue" name="issue"
value={formState.issue} value={formState.issue}
onChange={handleChange} onChange={handleChange}
required required
placeholder="Please describe your issue in detail..." placeholder="Please describe your issue in detail..."
className={`w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${errors.issue ? 'border-red-500 focus-visible:ring-red-500' : ''}`}
rows={5} rows={5}
className={`flex min-h-[80px] w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 ${errors.issue ? 'border-red-500 focus-visible:ring-red-500' : ''}`}
/> />
{debouncedErrors.issue && ( {debouncedErrors.issue && (
<p className="text-xs text-red-600 mt-1">{debouncedErrors.issue}</p> <p className="text-xs text-red-600 mt-1">{debouncedErrors.issue}</p>
@ -315,6 +321,8 @@ const Support = () => {
</div> </div>
</div> </div>
</div> </div>
</section>
</>
) )
} }