From 76aa71691f99cd28f30835cda451150bb6be7d2c Mon Sep 17 00:00:00 2001
From: null <koga.industries@gmail.com>
Date: Tue, 12 May 2026 02:31:23 -0500
Subject: [PATCH] =?UTF-8?q?feat:=20Phase=203=20Batch=202=20=E2=80=94=20hom?=
 =?UTF-8?q?e=20page=20redesign=20with=20hero,=20trust=20bar,=20services,?=
 =?UTF-8?q?=20CTA=20(v0.3.2)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json       |  2 +-
 src/pages/Home.jsx | 29 +++++++++++++----------------
 2 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index af8702a..0b0f21d 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "queuenorth-website",
   "private": true,
-  "version": "0.3.1",
+  "version": "0.3.2",
   "type": "module",
   "scripts": {
     "dev": "concurrently \"vite\" \"node server/index.js\"",
diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx
index 343efa7..3aa24b0 100644
--- a/src/pages/Home.jsx
+++ b/src/pages/Home.jsx
@@ -1,8 +1,13 @@
 import { Button } from '@/components/ui/Button'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/Card'
 import { services } from '@/data/services'
+import { industries } from '@/data/industries'
+import { useNavigate } from 'react-router-dom'
+import { MapPin } from 'lucide-react'
 
 const Home = () => {
+  const navigate = useNavigate()
+
   return (
     <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       {/* Hero Section */}
@@ -83,9 +88,9 @@ const Home = () => {
                 </CardHeader>
                 <CardContent>
                   <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 →
-                  </a>
+                  </Button>
                 </CardContent>
               </Card>
             ))}
@@ -150,21 +155,16 @@ const Home = () => {
             </p>
           </div>
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-            {[
-              { name: 'Healthcare', href: '/industries/healthcare' },
-              { 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">
+            {industries.map((industry) => (
+              <Card key={industry.id} className="hover:shadow-md transition-shadow cursor-pointer">
                 <CardContent className="p-6">
                   <h3 className="text-xl font-semibold text-primary-navy mb-3">{industry.name}</h3>
                   <p className="text-sm text-soft-text mb-4">
                     Industry-specific solutions designed to address your unique challenges and requirements.
                   </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 →
-                  </a>
+                  </Button>
                 </CardContent>
               </Card>
             ))}
@@ -181,12 +181,9 @@ const Home = () => {
           <p className="text-xl text-section-alt mb-8 max-w-2xl mx-auto">
             Schedule a free consultation with our communications experts.
           </p>
-          <a
-            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"
-          >
+          <Button variant="default" size="lg" onClick={() => navigate('/contact')}>
             Request Consultation
-          </a>
+          </Button>
         </div>
       </section>
     </div>