Refactor landing page sections and map per user feedback

src/components/IntelligenceMap.jsx

@@ -1,11 +1,13 @@
 import React, { useState, useEffect } from 'react';
 import { Icons } from './landing/constants';
+import MapBg from '../assets/images/hyper_intelligence_bg_image.jpg';
 
-// Updated with DFW specific locations (roughly positioned for a conceptual map)
+// Updated with Residential & Commercial mix
 const hotspots = [
-    { id: 1, top: '45%', left: '65%', address: '2800 Routh St, Dallas', problem: 'Hail Impact (Severe)', gain: '+$28k Opportunity', weather: 'Hail Expected', status: 'Action Required' },
+    { id: 1, top: '45%', left: '65%', address: 'Preston Royal Village', type: 'Commercial', problem: 'Roof Membrane Uplift', gain: '+$8.5M Value', weather: 'Hail Expected', status: 'Urgent' },
-    { id: 2, top: '20%', left: '55%', address: 'Legacy West, Plano', problem: 'Thermal Leak Detected', gain: '+$145k Commercial', weather: 'Clear', status: 'Monitoring' },
+    { id: 2, top: '28%', left: '42%', address: 'Highland Park Place', type: 'Commercial', problem: 'HVAC Unit Leakage', gain: '+$22M Asset', weather: 'Clear', status: 'Monitoring' },
-    { id: 3, top: '60%', left: '35%', address: 'Sundance Sq, Fort Worth', problem: 'Missing Shingles', gain: '+$15k Repair', weather: 'Rain Soon', status: 'Urgent' },
+    { id: 3, top: '55%', left: '25%', address: '4200 Beverly Dr', type: 'Residential', problem: 'Slate Tile Damage', gain: '+$3.2M Estate', weather: 'Rain Soon', status: 'Action Required' },
+    { id: 4, top: '70%', left: '48%', address: '3505 Lexington Ave', type: 'Residential', problem: 'Asphalt Shingle Loss', gain: '+$950k Home', weather: 'Windy', status: 'Low Priority' },
 ];
 
 const IntelligenceMap = () => {
@@ -41,9 +43,9 @@ const IntelligenceMap = () => {
                     <div className="absolute inset-0 bg-[#0f172a]">
                         {/* Aerial/Satellite View of a Grid City */}
                         <img
-                            src="https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?q=80&w=2613&auto=format&fit=crop"
+                            src={MapBg}
                             alt="DFW Metroplex Map Overlay"
-                            className="w-full h-full object-cover opacity-50 mix-blend-luminosity hover:scale-105 transition-transform duration-[20s]"
+                            className="w-full h-full object-cover opacity-60 mix-blend-luminosity hover:scale-105 transition-transform duration-[20s]"
                         />
 
                         {/* Map Grid Overlay */}
@@ -55,7 +57,7 @@ const IntelligenceMap = () => {
                             <div className="bg-slate-900/80 backdrop-blur-md text-white pl-4 pr-6 py-2 rounded-r-lg border-l-4 border-cyan-400 shadow-[0_0_15px_rgba(0,229,255,0.2)] flex items-center gap-3">
                                 <div>
                                     <div className="text-[10px] text-cyan-400 font-bold uppercase tracking-widest mb-0.5">Active Region</div>
-                                    <div className="font-heading font-bold text-lg leading-none">North Texas / DFW</div>
+                                    <div className="font-heading font-bold text-lg leading-none">DFW Zone 2</div>
                                 </div>
                             </div>
                         </div>
@@ -85,16 +87,16 @@ const IntelligenceMap = () => {
                             onClick={() => setActiveSpot(spot)}
                         >
                             {/* Radar Ripple Effect */}
-                            <div className="absolute -inset-4 bg-cyan-400/20 rounded-full animate-ping opacity-75"></div>
+                            <div className={`absolute -inset-4 rounded-full animate-ping opacity-75 ${spot.type === 'Commercial' ? 'bg-purple-500/20' : 'bg-cyan-400/20'}`}></div>
 
                             {/* Price Tag Pin */}
                             <div className="relative flex flex-col items-center transform group-hover/pin:scale-110 transition-transform duration-200">
-                                <div className="bg-slate-900/90 backdrop-blur text-cyan-400 text-[10px] font-mono font-bold px-2 py-1 rounded border border-cyan-400/30 shadow-[0_0_10px_rgba(0,229,255,0.3)] whitespace-nowrap mb-1 opacity-0 group-hover/pin:opacity-100 transition-opacity">
+                                <div className={`bg-slate-900/90 backdrop-blur text-[10px] font-mono font-bold px-2 py-1 rounded border shadow-[0_0_10px_rgba(0,0,0,0.5)] whitespace-nowrap mb-1 opacity-0 group-hover/pin:opacity-100 transition-opacity ${spot.type === 'Commercial' ? 'text-purple-400 border-purple-400/30' : 'text-cyan-400 border-cyan-400/30'}`}>
                                     {spot.gain}
                                 </div>
 
                                 {/* Pin Head */}
-                                <div className={`w-3 h-3 rounded-full border-2 border-white shadow-lg relative z-10 ${spot.problem.includes('Severe') ? 'bg-red-600 shadow-[0_0_15px_rgba(214,40,40,0.6)]' : 'bg-cyan-400 shadow-[0_0_15px_rgba(0,229,255,0.6)]'}`}></div>
+                                <div className={`w-3 h-3 rounded-full border-2 border-white shadow-lg relative z-10 ${spot.type === 'Commercial' ? 'bg-purple-500 shadow-[0_0_15px_rgba(168,85,247,0.6)]' : 'bg-cyan-400 shadow-[0_0_15px_rgba(0,229,255,0.6)]'}`}></div>
 
                                 {/* Pin Line */}
                                 <div className="w-[1px] h-8 bg-gradient-to-b from-white to-transparent opacity-50"></div>
@@ -169,9 +171,8 @@ const IntelligenceMap = () => {
                                     </div>
                                 </div>
 
-                                <div className="p-3 bg-white/5 rounded border border-white/10 text-xs text-gray-300 font-mono leading-relaxed">
+                                &gt; ANALYSIS: {activeSpot.type === 'Commercial' ? 'High-value commercial asset at risk. Immediate inspection recommended to prevent business interruption.' : '85% probability of insurance approval due to recent hail corridor overlap in zip code 75201.'}
-                                    &gt; ANALYSIS: 85% probability of insurance approval due to recent hail corridor overlap in zip code 75201.
+
-                                </div>
                             </div>
 
                             <button className="w-full bg-cyan-400 hover:bg-white text-slate-900 font-bold py-3 rounded-lg transition-all duration-300 shadow-[0_0_20px_rgba(0,229,255,0.3)] hover:shadow-[0_0_30px_rgba(255,255,255,0.4)] uppercase tracking-widest text-xs">

src/pages/Landing.jsx

@@ -16,7 +16,6 @@ import HeroImg from '../assets/images/hero.png';
 import ProcessImg1 from '../assets/images/process.png';
 import ProcessImg2 from '../assets/images/process-2.png';
 import ProcessImg3 from '../assets/images/process-3.png';
-import TestimonialsImg from '../assets/images/testimonials.png';
 
 gsap.registerPlugin(ScrollTrigger);
 
@@ -289,9 +288,23 @@ const Landing = () => {
                             <div className="order-1 md:order-2">
                                 <div className="w-12 h-12 rounded-full bg-zinc-900 dark:bg-white text-white dark:text-black flex items-center justify-center font-black text-xl mb-6">03</div>
                                 <h3 className="text-3xl font-bold mb-4">The Resolution.</h3>
-                                <p className="text-lg text-zinc-500 dark:text-zinc-400 leading-relaxed mb-6">
+                                <div className="space-y-4 mb-8">
-                                    Generate property assessment reports and repair estimates within minutes of inspection. AI-verified analysis documents visible damage using clear, objective evidence. Reports can be shared with property owners or used in insurance discussions. All findings are based on measurable data, not opinions. Our goal is simple: equip field representatives with the latest technology and verified evidence so they can operate with confidence, gain a competitive edge, and ensure all parties work from the same factual record.
+                                    {[
-                                </p>
+                                        "Generate property assessment reports & repair estimates in minutes.",
+                                        "Document visible damage using AI-verified, objective evidence.",
+                                        "Share reports with property owners or insurance instantly.",
+                                        "Base all findings on measurable inspection data, not opinions.",
+                                        "Equip field reps with verified evidence to operate with confidence.",
+                                        "Provide a single, factual record all parties can rely on."
+                                    ].map((item, i) => (
+                                        <div key={i} className="flex items-start">
+                                            <div className="mt-0.5 bg-blue-500/10 dark:bg-blue-500/20 p-2 rounded-lg text-blue-600 dark:text-blue-400 shrink-0 mr-4">
+                                                <CheckCircle2 size={22} strokeWidth={3} />
+                                            </div>
+                                            <p className="text-sm text-zinc-600 dark:text-zinc-300 font-medium leading-relaxed">{item}</p>
+                                        </div>
+                                    ))}
+                                </div>
                                 <div className="flex gap-4">
                                     <span className="px-3 py-1 bg-red-100 dark:bg-red-900/20 text-red-600 dark:text-red-400 text-xs font-bold uppercase rounded-md">Cost Efficient</span>
                                     <span className="px-3 py-1 bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 text-xs font-bold uppercase rounded-md">Data-Backed</span>
@@ -343,47 +356,115 @@ const Landing = () => {
                 </div>
             </div>
 
-            {/* TESTIMONIALS */}
+            {/* INDUSTRIES THAT LOVE US */}
             <div className="py-32" ref={addToRefs}>
                 <div className="max-w-7xl mx-auto px-6">
-                    <h2 className="text-4xl font-black text-center mb-16">Neighbors Who Love Us</h2>
+                    <h2 className="text-4xl font-black text-center mb-16">Industries that Love Us</h2>
 
                     <div className="grid md:grid-cols-3 gap-6">
-                        {/* Senior/Veteran Testimonial */}
+                        {/* Contractors Card */}
-                        <SpotlightCard className="p-8 h-full bg-zinc-50 dark:bg-[#0A0A0A]">
+                        <SpotlightCard className="p-8 h-full bg-zinc-50 dark:bg-[#0A0A0A] border-zinc-200 dark:border-zinc-800">
                             <div className="flex items-center gap-4 mb-6">
-                                <img src={TestimonialsImg} alt="Veterans" className="w-16 h-16 rounded-full object-cover border-2 border-emerald-500" />
+                                <div className="w-12 h-12 rounded-xl bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400">
-                                <div>
+                                    <Award size={24} />
-                                    <h4 className="font-bold">The Hendersons</h4>
-                                    <p className="text-xs text-zinc-500">Retired Veterans • Plano, TX</p>
                                 </div>
+                                <h4 className="font-bold text-xl">Contractors</h4>
+                            </div>
+                            <p className="text-sm text-zinc-500 mb-6 min-h-[40px]">
+                                Contractors live and die by speed, quality workmanship, and trust; that’s exactly what LynkedUp delivers.
+                            </p>
+                            <ul className="space-y-3 mb-8">
+                                <li className="flex items-start text-sm text-zinc-600 dark:text-zinc-400">
+                                    <CheckCircle2 size={16} className="mr-2 mt-0.5 text-blue-500 shrink-0" />
+                                    <span>Faster insurance approvals through time-stamped, geo-verified capture.</span>
+                                </li>
+                                <li className="flex items-start text-sm text-zinc-600 dark:text-zinc-400">
+                                    <CheckCircle2 size={16} className="mr-2 mt-0.5 text-blue-500 shrink-0" />
+                                    <span>Fewer chargebacks & denials with irrefutable evidence.</span>
+                                </li>
+                                <li className="flex items-start text-sm text-zinc-600 dark:text-zinc-400">
+                                    <CheckCircle2 size={16} className="mr-2 mt-0.5 text-blue-500 shrink-0" />
+                                    <span>Shorter sales cycles — homeowners trust what they can see.</span>
+                                </li>
+                                <li className="flex items-start text-sm text-zinc-600 dark:text-zinc-400">
+                                    <CheckCircle2 size={16} className="mr-2 mt-0.5 text-blue-500 shrink-0" />
+                                    <span>More profitable jobs with accurate scopes.</span>
+                                </li>
+                            </ul>
+                            <div className="pt-6 border-t border-zinc-200 dark:border-zinc-800">
+                                <p className="text-xs font-bold text-zinc-400 uppercase tracking-wider">Result</p>
+                                <p className="text-sm font-semibold text-zinc-700 dark:text-zinc-300">One system replaces 5–7 tools.</p>
                             </div>
-                            <div className="flex text-yellow-500 mb-4"><Star size={16} fill="currentColor" /><Star size={16} fill="currentColor" /><Star size={16} fill="currentColor" /><Star size={16} fill="currentColor" /><Star size={16} fill="currentColor" /></div>
-                            <p className="text-zinc-600 dark:text-zinc-400 italic">"The veteran discount was such a blessing. They found a leak our previous inspector missed completely. The drone technology was fascinating to watch!"</p>
                         </SpotlightCard>
 
-                        <SpotlightCard className="p-8 h-full bg-zinc-50 dark:bg-[#0A0A0A]">
+                        {/* Asset Managers Card */}
+                        <SpotlightCard className="p-8 h-full bg-zinc-50 dark:bg-[#0A0A0A] border-zinc-200 dark:border-zinc-800">
                             <div className="flex items-center gap-4 mb-6">
-                                <div className="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center font-bold text-blue-600 text-xl">JD</div>
+                                <div className="w-12 h-12 rounded-xl bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center text-purple-600 dark:text-purple-400">
-                                <div>
+                                    <Users size={24} />
-                                    <h4 className="font-bold">James D.</h4>
-                                    <p className="text-xs text-zinc-500">Homeowner • Frisco, TX</p>
                                 </div>
+                                <h4 className="font-bold text-xl">Asset Managers</h4>
+                            </div>
+                            <p className="text-sm text-zinc-500 mb-6 min-h-[40px]">
+                                Asset managers care about risk reduction, documentation, and long-term asset value, not sales hype.
+                            </p>
+                            <ul className="space-y-3 mb-8">
+                                <li className="flex items-start text-sm text-zinc-600 dark:text-zinc-400">
+                                    <CheckCircle2 size={16} className="mr-2 mt-0.5 text-purple-500 shrink-0" />
+                                    <span>Verified condition records for every property.</span>
+                                </li>
+                                <li className="flex items-start text-sm text-zinc-600 dark:text-zinc-400">
+                                    <CheckCircle2 size={16} className="mr-2 mt-0.5 text-purple-500 shrink-0" />
+                                    <span>Audit-ready documentation for lenders & investors.</span>
+                                </li>
+                                <li className="flex items-start text-sm text-zinc-600 dark:text-zinc-400">
+                                    <CheckCircle2 size={16} className="mr-2 mt-0.5 text-purple-500 shrink-0" />
+                                    <span>Reduced fraud exposure — no undocumented claims.</span>
+                                </li>
+                                <li className="flex items-start text-sm text-zinc-600 dark:text-zinc-400">
+                                    <CheckCircle2 size={16} className="mr-2 mt-0.5 text-purple-500 shrink-0" />
+                                    <span>Remote visibility across portfolios.</span>
+                                </li>
+                            </ul>
+                            <div className="pt-6 border-t border-zinc-200 dark:border-zinc-800">
+                                <p className="text-xs font-bold text-zinc-400 uppercase tracking-wider">Net Effect</p>
+                                <p className="text-sm font-semibold text-zinc-700 dark:text-zinc-300">A digital twin that reduces capital risk.</p>
                             </div>
-                            <div className="flex text-yellow-500 mb-4"><Star size={16} fill="currentColor" /><Star size={16} fill="currentColor" /><Star size={16} fill="currentColor" /><Star size={16} fill="currentColor" /><Star size={16} fill="currentColor" /></div>
-                            <p className="text-zinc-600 dark:text-zinc-400 italic">"I requested a quote at 9am and had the repair scheduled by noon. The transparency with the 3D model made me feel confident in the price."</p>
                         </SpotlightCard>
 
-                        <SpotlightCard className="p-8 h-full bg-zinc-50 dark:bg-[#0A0A0A]">
+                        {/* Homeowners Card */}
+                        <SpotlightCard className="p-8 h-full bg-zinc-50 dark:bg-[#0A0A0A] border-zinc-200 dark:border-zinc-800">
                             <div className="flex items-center gap-4 mb-6">
-                                <div className="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center font-bold text-purple-600 text-xl">SM</div>
+                                <div className="w-12 h-12 rounded-xl bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center text-emerald-600 dark:text-emerald-400">
-                                <div>
+                                    <Home size={24} />
-                                    <h4 className="font-bold">Sarah M.</h4>
-                                    <p className="text-xs text-zinc-500">Investor • Dallas, TX</p>
                                 </div>
+                                <h4 className="font-bold text-xl">Homeowners</h4>
+                            </div>
+                            <p className="text-sm text-zinc-500 mb-6 min-h-[40px]">
+                                Homeowners want protection and clarity, not pressure. We give them exactly that.
+                            </p>
+                            <ul className="space-y-3 mb-8">
+                                <li className="flex items-start text-sm text-zinc-600 dark:text-zinc-400">
+                                    <CheckCircle2 size={16} className="mr-2 mt-0.5 text-emerald-500 shrink-0" />
+                                    <span>Clear, visual proof instead of confusing explanations.</span>
+                                </li>
+                                <li className="flex items-start text-sm text-zinc-600 dark:text-zinc-400">
+                                    <CheckCircle2 size={16} className="mr-2 mt-0.5 text-emerald-500 shrink-0" />
+                                    <span>Transparency — see what’s submitted to insurance.</span>
+                                </li>
+                                <li className="flex items-start text-sm text-zinc-600 dark:text-zinc-400">
+                                    <CheckCircle2 size={16} className="mr-2 mt-0.5 text-emerald-500 shrink-0" />
+                                    <span>Faster claim resolution with fewer surprises.</span>
+                                </li>
+                                <li className="flex items-start text-sm text-zinc-600 dark:text-zinc-400">
+                                    <CheckCircle2 size={16} className="mr-2 mt-0.5 text-emerald-500 shrink-0" />
+                                    <span>Permanent property record for resale value.</span>
+                                </li>
+                            </ul>
+                            <div className="pt-6 border-t border-zinc-200 dark:border-zinc-800">
+                                <p className="text-xs font-bold text-zinc-400 uppercase tracking-wider">Feeling</p>
+                                <p className="text-sm font-semibold text-zinc-700 dark:text-zinc-300">Informed, protected, and confident.</p>
                             </div>
-                            <div className="flex text-yellow-500 mb-4"><Star size={16} fill="currentColor" /><Star size={16} fill="currentColor" /><Star size={16} fill="currentColor" /><Star size={16} fill="currentColor" /><Star size={16} fill="currentColor" /></div>
-                            <p className="text-zinc-600 dark:text-zinc-400 italic">"Managing 5 properties is hard. LynkedUpPro makes it easy. I can see the roof status of all my houses on my dashboard. Incredible tool."</p>
                         </SpotlightCard>
                     </div>
                 </div>