refactor: full-bleed section backgrounds with centered content (closes #48)
This commit is contained in:
null
parent
5d67149a51
commit
b5170caf9d
|
|
@ -1,16 +1,22 @@
|
|||
const About = () => {
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24">
|
||||
<>
|
||||
{/* 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>
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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>
|
||||
<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">
|
||||
|
|
@ -35,10 +41,13 @@ const About = () => {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
{/* 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>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{[
|
||||
|
|
@ -69,7 +80,7 @@ const About = () => {
|
|||
'Cloud Migration',
|
||||
'Vendor-Neutral Consulting',
|
||||
'Disaster Recovery Planning',
|
||||
'24/7 Support & Monitoring',
|
||||
'24/7 Support & Monitoring',
|
||||
].map((expertise, index) => (
|
||||
<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">
|
||||
|
|
@ -81,10 +92,13 @@ const About = () => {
|
|||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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>
|
||||
<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.
|
||||
|
|
@ -95,8 +109,10 @@ const About = () => {
|
|||
>
|
||||
Request Consultation
|
||||
</a>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -100,9 +100,11 @@ const Contact = () => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24">
|
||||
<>
|
||||
{/* 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>
|
||||
<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.
|
||||
|
|
@ -126,9 +128,13 @@ const Contact = () => {
|
|||
Request Consultation
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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">
|
||||
{/* Left - Info */}
|
||||
<div>
|
||||
|
|
@ -286,15 +292,15 @@ const Contact = () => {
|
|||
<label htmlFor="message" className="block text-sm font-medium text-text mb-2">
|
||||
Message <span className="text-red-600">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
<Textarea
|
||||
id="message"
|
||||
name="message"
|
||||
value={formState.message}
|
||||
onChange={handleChange}
|
||||
required
|
||||
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}
|
||||
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 && (
|
||||
<p className="text-xs text-red-600 mt-1">{debouncedErrors.message}</p>
|
||||
|
|
@ -312,6 +318,8 @@ const Contact = () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -17,10 +17,10 @@ const Home = () => {
|
|||
const navigate = useNavigate()
|
||||
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<>
|
||||
{/* Hero Section */}
|
||||
<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="flex flex-col gap-6 md:gap-8">
|
||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold">
|
||||
|
|
@ -71,7 +71,7 @@ const Home = () => {
|
|||
|
||||
{/* Trust Bar */}
|
||||
<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">
|
||||
<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>
|
||||
|
|
@ -95,8 +95,8 @@ const Home = () => {
|
|||
|
||||
{/* JointLogoWhite Trust Section */}
|
||||
<section className="bg-primary-navy py-16 md:py-24">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<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-white mb-6">Certified Excellence</h2>
|
||||
<div className="flex flex-col md:flex-row items-center justify-center gap-12">
|
||||
<div className="flex-1">
|
||||
|
|
@ -122,7 +122,7 @@ const Home = () => {
|
|||
|
||||
{/* Trust Signals Section */}
|
||||
<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">
|
||||
<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">
|
||||
|
|
@ -226,7 +226,7 @@ const Home = () => {
|
|||
|
||||
{/* Services Section */}
|
||||
<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">
|
||||
<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">
|
||||
|
|
@ -270,7 +270,7 @@ const Home = () => {
|
|||
|
||||
{/* Why Queue North */}
|
||||
<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">
|
||||
<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">
|
||||
|
|
@ -334,7 +334,7 @@ const Home = () => {
|
|||
|
||||
{/* Industries Section */}
|
||||
<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">
|
||||
<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">
|
||||
|
|
@ -367,7 +367,7 @@ const Home = () => {
|
|||
|
||||
{/* Final CTA */}
|
||||
<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">
|
||||
Tell us what you're trying to fix. We'll help map the path.
|
||||
</h2>
|
||||
|
|
@ -379,7 +379,7 @@ const Home = () => {
|
|||
</Button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -2,17 +2,23 @@ import { industries } from '@/data/industries'
|
|||
|
||||
const Industries = () => {
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-16 md:py-24">
|
||||
<>
|
||||
{/* 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>
|
||||
<p className="text-xl text-soft-text max-w-3xl">
|
||||
Tailored communications and infrastructure solutions designed for the unique challenges of your industry.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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) => (
|
||||
<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">
|
||||
|
|
@ -55,10 +61,14 @@ const Industries = () => {
|
|||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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>
|
||||
<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.
|
||||
|
|
@ -69,8 +79,10 @@ const Industries = () => {
|
|||
>
|
||||
Request Consultation
|
||||
</a>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@ const IndustryDetail = () => {
|
|||
|
||||
if (!industry) {
|
||||
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">
|
||||
<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>
|
||||
|
|
@ -17,29 +18,36 @@ const IndustryDetail = () => {
|
|||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-16 md:py-24">
|
||||
<>
|
||||
{/* 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>
|
||||
<p className="text-xl text-soft-text max-w-3xl">{industry.shortDesc}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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">
|
||||
{/* Left Column - Main Content */}
|
||||
<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>
|
||||
<p className="text-lg text-soft-text mb-6 leading-relaxed">
|
||||
{industry.fullDesc}
|
||||
</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>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{industry.painPoints.map((painPoint, index) => (
|
||||
|
|
@ -53,9 +61,9 @@ const IndustryDetail = () => {
|
|||
</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>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{industry.solutions.map((solution, index) => (
|
||||
|
|
@ -69,7 +77,7 @@ const IndustryDetail = () => {
|
|||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Sidebar */}
|
||||
|
|
@ -98,6 +106,8 @@ const IndustryDetail = () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,8 @@ const ServiceDetail = () => {
|
|||
|
||||
if (!service) {
|
||||
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">
|
||||
<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>
|
||||
|
|
@ -17,13 +18,16 @@ const ServiceDetail = () => {
|
|||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-16 md:py-24">
|
||||
<>
|
||||
{/* 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>
|
||||
{service.image && (
|
||||
<div className="relative mb-8 rounded-xl overflow-hidden">
|
||||
|
|
@ -38,20 +42,24 @@ const ServiceDetail = () => {
|
|||
</div>
|
||||
)}
|
||||
<p className="text-xl text-soft-text max-w-3xl">{service.shortDesc}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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">
|
||||
{/* Left Column - Main Content */}
|
||||
<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>
|
||||
<p className="text-lg text-soft-text mb-6 leading-relaxed">
|
||||
{service.fullDesc}
|
||||
</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>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{service.benefits.map((benefit, index) => (
|
||||
|
|
@ -65,9 +73,9 @@ const ServiceDetail = () => {
|
|||
</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>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{service.idealFor.map((item, index) => (
|
||||
|
|
@ -81,7 +89,7 @@ const ServiceDetail = () => {
|
|||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column - Sidebar */}
|
||||
|
|
@ -114,6 +122,8 @@ const ServiceDetail = () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -3,17 +3,23 @@ import { MessageCircle, Users, LifeBuoy, GraduationCap, Link as LinkIcon, Wifi,
|
|||
|
||||
const Services = () => {
|
||||
return (
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24">
|
||||
<>
|
||||
{/* 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>
|
||||
<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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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) => (
|
||||
<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">
|
||||
|
|
@ -55,10 +61,14 @@ const Services = () => {
|
|||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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>
|
||||
<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.
|
||||
|
|
@ -69,8 +79,10 @@ const Services = () => {
|
|||
>
|
||||
Request Consultation
|
||||
</a>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -103,9 +103,11 @@ const Support = () => {
|
|||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-16 md:py-24">
|
||||
<>
|
||||
{/* 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>
|
||||
<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.
|
||||
|
|
@ -129,9 +131,13 @@ const Support = () => {
|
|||
Request Consultation
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 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">
|
||||
{/* Left - Info */}
|
||||
<div>
|
||||
|
|
@ -289,15 +295,15 @@ const Support = () => {
|
|||
<label htmlFor="issue" className="block text-sm font-medium text-text mb-2">
|
||||
Describe Your Issue <span className="text-red-600">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
<Textarea
|
||||
id="issue"
|
||||
name="issue"
|
||||
value={formState.issue}
|
||||
onChange={handleChange}
|
||||
required
|
||||
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}
|
||||
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 && (
|
||||
<p className="text-xs text-red-600 mt-1">{debouncedErrors.issue}</p>
|
||||
|
|
@ -315,6 +321,8 @@ const Support = () => {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue