Goutam/LynkedUpPro_CRM
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor landing page sections and map per user feedback

Browse Source
This commit is contained in:
Satyam
2026-02-11 02:03:17 +05:30
parent 83250d687e
commit 0da0d6797f
3 changed files with 123 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/IntelligenceMap.jsx
+14 -13
View File
@@ -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: 2, top: '20%', left: '55%', address: 'Legacy West, Plano', problem: 'Thermal Leak Detected', gain: '+$145k Commercial', 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: 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: '28%', left: '42%', address: 'Highland Park Place', type: 'Commercial', problem: 'HVAC Unit Leakage', gain: '+$22M Asset', weather: 'Clear', status: 'Monitoring' },
{ 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: 85% probability of insurance approval due to recent hail corridor overlap in zip code 75201.
</div>
&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.'}
</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">