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 2 — home page redesign with hero, trust bar, services, CTA (v0.3.2)

This commit is contained in:
null 2026-05-12 02:31:23 -05:00
parent 287e2b79f6
commit 76aa71691f
2 changed files with 14 additions and 17 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.1", "version": "0.3.2",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "concurrently \"vite\" \"node server/index.js\"", "dev": "concurrently \"vite\" \"node server/index.js\"",

29
src/pages/Home.jsx
View File

@ -1,8 +1,13 @@
import { Button } from '@/components/ui/Button' import { Button } from '@/components/ui/Button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/Card' import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/Card'
import { services } from '@/data/services' import { services } from '@/data/services'
import { industries } from '@/data/industries'
import { useNavigate } from 'react-router-dom'
import { MapPin } from 'lucide-react'
const Home = () => { const Home = () => {
const navigate = useNavigate()
return ( return (
<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">
{/* Hero Section */} {/* Hero Section */}
@ -83,9 +88,9 @@ const Home = () => {
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<p className="text-sm text-soft-text mb-4">{service.fullDesc}</p> <p className="text-sm text-soft-text mb-4">{service.fullDesc}</p>
<a href={`/services/${service.id}`} className="text-primary-navy font-medium hover:underline"> <Button variant="link" className="text-primary-navy p-0 h-auto text-sm" onClick={() => navigate(`/services/${service.id}`)}>
Learn more → Learn more →
</a> </Button>
</CardContent> </CardContent>
</Card> </Card>
))} ))}
@ -150,21 +155,16 @@ const Home = () => {
</p> </p>
</div> </div>
<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-6">
{[ {industries.map((industry) => (
{ name: 'Healthcare', href: '/industries/healthcare' }, <Card key={industry.id} className="hover:shadow-md transition-shadow cursor-pointer">
{ name: 'Retail', href: '/industries/retail' },
{ name: 'Manufacturing', href: '/industries/manufacturing' },
{ name: 'Education & Finance', href: '/industries/education-finance' },
].map((industry) => (
<Card key={industry.name} className="hover:shadow-md transition-shadow cursor-pointer">
<CardContent className="p-6"> <CardContent className="p-6">
<h3 className="text-xl font-semibold text-primary-navy mb-3">{industry.name}</h3> <h3 className="text-xl font-semibold text-primary-navy mb-3">{industry.name}</h3>
<p className="text-sm text-soft-text mb-4"> <p className="text-sm text-soft-text mb-4">
Industry-specific solutions designed to address your unique challenges and requirements. Industry-specific solutions designed to address your unique challenges and requirements.
</p> </p>
<a href={industry.href} className="text-primary-navy font-medium hover:underline"> <Button variant="link" className="text-primary-navy p-0 h-auto text-sm" onClick={() => navigate(industry.href)}>
Learn more → Learn more →
</a> </Button>
</CardContent> </CardContent>
</Card> </Card>
))} ))}
@ -181,12 +181,9 @@ const Home = () => {
<p className="text-xl text-section-alt mb-8 max-w-2xl mx-auto"> <p className="text-xl text-section-alt mb-8 max-w-2xl mx-auto">
Schedule a free consultation with our communications experts. Schedule a free consultation with our communications experts.
</p> </p>
<a <Button variant="default" size="lg" onClick={() => navigate('/contact')}>
href="/contact"
className="inline-block bg-white text-primary-navy px-8 py-3 rounded-md font-bold text-lg hover:bg-gray-100 transition-colors"
>
Request Consultation Request Consultation
</a> </Button>
</div> </div>
</section> </section>
</div> </div>