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

Optimize mobile layout, add animated counters, improve crane swing

Browse Source
This commit is contained in:
Satyam
2026-02-16 19:30:10 +05:30
parent ed79b266af
commit 35cbdeb33c
12 changed files with 573 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/images/compare-new.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 140 KiB

src/assets/images/compare-old.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 210 KiB

src/assets/images/hero_aerial_scan.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 452 KiB

src/assets/images/intel_map_dfw_twilight.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 260 KiB

src/assets/images/process-2.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 96 KiB

src/assets/images/process-3.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 126 KiB

src/assets/images/process.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 187 KiB

src/components/ComparisonSlider.jsx
+37 -23
View File
@@ -1,7 +1,7 @@
import React, { useState, useRef, useEffect } from 'react';
import { MoveHorizontal } from 'lucide-react';
import CompareNew from '../assets/images/compare-new.png';
import CompareOld from '../assets/images/compare-old.png';
import CompareNew from '../assets/images/compare-new.webp';
import CompareOld from '../assets/images/compare-old.webp';
export const ComparisonSlider = () => {
const [sliderPos, setSliderPos] = useState(50);
@@ -47,23 +47,33 @@ export const ComparisonSlider = () => {
alt="The New Way"
className="w-full h-full object-cover"
/>
<div className="absolute top-10 right-10 flex flex-col items-end space-y-4 select-none">
<span className="text-xl md:text-2xl font-black text-white bg-black/50 backdrop-blur-md px-4 py-2 rounded-xl border border-blue-500/50">
<div className="absolute top-4 right-3 md:top-10 md:right-10 flex flex-col items-end space-y-2 md:space-y-4 select-none">
<span className="text-base md:text-2xl font-black text-white bg-black/50 backdrop-blur-md px-3 py-1.5 md:px-4 md:py-2 rounded-xl border border-blue-500/50">
Our Way
</span>
<div className="text-right space-y-2">
<div className="text-right space-y-1.5 md:space-y-2">
{[
"15-Minute Drone Scan",
"Zero Safety Risk",
"AI + Thermal Imaging",
"~30% Lower Costs",
"~ 60% faster lead conversion",
"~ Deploy Reps with confidence",
"~ Evidence-driven damage detection unlocks Revenue"
].map((text, i) => (
<div key={i} className="flex items-center justify-end space-x-2 bg-black/40 backdrop-blur-sm px-3 py-1 rounded-lg border border-blue-500/20">
<span className="text-sm md:text-base font-bold text-white">{text}</span>
<div className="w-5 h-5 rounded-full bg-blue-500 flex items-center justify-center">
<div key={i} className="flex items-center justify-end space-x-1.5 md:space-x-2 bg-black/40 backdrop-blur-sm px-2 py-0.5 md:px-3 md:py-1 rounded-lg border border-blue-500/20">
<span className="text-[10px] md:text-base font-bold text-white">{text}</span>
<div className="w-4 h-4 md:w-5 md:h-5 rounded-full bg-blue-500 flex items-center justify-center shrink-0">
<svg className="w-2.5 h-2.5 md:w-3 md:h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" /></svg>
</div>
</div>
))}
{/* Extended items — desktop only */}
{[
"60% faster lead conversion",
"Deploy Reps with confidence",
"Evidence-driven damage detection",
].map((text, i) => (
<div key={`ext-${i}`} className="hidden md:flex items-center justify-end space-x-2 bg-black/40 backdrop-blur-sm px-3 py-1 rounded-lg border border-blue-500/20">
<span className="text-base font-bold text-white">{text}</span>
<div className="w-5 h-5 rounded-full bg-blue-500 flex items-center justify-center shrink-0">
<svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" /></svg>
</div>
</div>
@@ -84,29 +94,29 @@ export const ComparisonSlider = () => {
style={{ width: containerRef.current?.offsetWidth }}
/>
{/* Overlay Text visible only when this side is dominant */}
<div className="absolute top-10 left-10 flex flex-col items-start space-y-4 select-none" style={{ opacity: Math.max(0, (sliderPos - 10) / 40) }}>
<span className="text-xl md:text-2xl font-black text-zinc-200 bg-black/60 backdrop-blur-md px-4 py-2 rounded-xl border border-red-500/50">
<div className="absolute top-4 left-3 md:top-10 md:left-10 flex flex-col items-start space-y-2 md:space-y-4 select-none" style={{ opacity: Math.max(0, (sliderPos - 10) / 40) }}>
<span className="text-base md:text-2xl font-black text-zinc-200 bg-black/60 backdrop-blur-md px-3 py-1.5 md:px-4 md:py-2 rounded-xl border border-red-500/50">
The Old Way
</span>
<div className="text-left space-y-2">
<div className="text-left space-y-1.5 md:space-y-2">
{[
"Dangerous Ladders & Falls",
"Guesswork Based Estimates",
"Guesswork Estimates",
"Slow Turnaround Times",
"Hidden Material Costs"
].map((text, i) => (
<div key={i} className="flex items-center space-x-2 bg-black/50 backdrop-blur-sm px-3 py-1 rounded-lg border border-red-500/20">
<div className="w-5 h-5 rounded-full bg-red-500/80 flex items-center justify-center">
<svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M6 18L18 6M6 6l12 12" /></svg>
<div key={i} className="flex items-center space-x-1.5 md:space-x-2 bg-black/50 backdrop-blur-sm px-2 py-0.5 md:px-3 md:py-1 rounded-lg border border-red-500/20">
<div className="w-4 h-4 md:w-5 md:h-5 rounded-full bg-red-500/80 flex items-center justify-center shrink-0">
<svg className="w-2.5 h-2.5 md:w-3 md:h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M6 18L18 6M6 6l12 12" /></svg>
</div>
<span className="text-sm md:text-base font-bold text-zinc-300">{text}</span>
<span className="text-[10px] md:text-base font-bold text-zinc-300">{text}</span>
</div>
))}
</div>
</div>
</div>
{/* Slider Handle */}
{/* Slider Handle — Desktop */}
<div
className="absolute top-0 bottom-0 w-1 bg-white cursor-ew-resize hidden md:flex items-center justify-center shadow-[0_0_20px_rgba(0,0,0,0.5)]"
style={{ left: `${sliderPos}%` }}
@@ -116,11 +126,15 @@ export const ComparisonSlider = () => {
</div>
</div>
{/* Mobile Slider Handle (Always visible comparison line) */}
{/* Slider Handle — Mobile (visible circle + line) */}
<div
className="absolute top-0 bottom-0 w-1 bg-white/50 md:hidden"
className="absolute top-0 bottom-0 w-0.5 bg-white/70 md:hidden flex items-center justify-center"
style={{ left: `${sliderPos}%` }}
/>
>
<div className="w-9 h-9 bg-white rounded-full flex items-center justify-center shadow-lg shrink-0">
<MoveHorizontal className="text-black" size={16} />
</div>
</div>
{/* Instructions Overlay (Fades out on interaction) */}
<div className="absolute bottom-6 left-1/2 -translate-x-1/2 text-white/80 text-sm font-medium bg-black/40 px-4 py-2 rounded-full backdrop-blur-sm pointer-events-none">
src/components/IntelligenceMap.jsx
+1 -1
View File
@@ -1,7 +1,7 @@
import React, { useState, useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';
import { useNavigate } from 'react-router-dom';
import MapBg from '../assets/images/intel_map_dfw_twilight.png';
import MapBg from '../assets/images/intel_map_dfw_twilight.webp';
import IntelligenceSidePanel from './dashboard/IntelligenceSidePanel';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
src/components/Services.jsx
+51 -6
View File
@@ -1,6 +1,10 @@
import React from 'react';
import React, { useRef, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { Icons } from './landing/constants';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);
const services = [
{
@@ -12,7 +16,7 @@ const services = [
badge: "Licensed",
badgeClass: "permit-stamp--verified",
badgeIcon: "\u2713",
stat: "2,847",
stat: 5847,
statLabel: "Properties Inspected",
},
{
@@ -24,13 +28,47 @@ const services = [
badge: "Certified",
badgeClass: "permit-stamp--accent",
badgeIcon: "\u25B9",
stat: "96%",
stat: 96,
statSuffix: "%",
statLabel: "Lead Accuracy",
}
];
const Services = () => {
const navigate = useNavigate();
const statRefs = useRef([]);
useEffect(() => {
// Animated Stat Counters
statRefs.current.forEach((el) => {
if (!el) return;
const target = parseFloat(el.dataset.target);
const suffix = el.dataset.suffix || '';
const counter = { value: 0 };
el.innerText = '0' + suffix;
const formatNumber = (num) => {
return Math.round(num).toLocaleString('en-US');
};
gsap.to(counter, {
value: target,
duration: 2.5,
ease: "power2.out",
scrollTrigger: {
trigger: el,
start: "top 85%",
toggleActions: "play none none none",
},
onUpdate: () => {
el.innerText = formatNumber(counter.value) + suffix;
},
snap: { value: 1 }
});
});
}, []);
const handleMouseMove = (e) => {
const card = e.currentTarget;
@@ -65,7 +103,7 @@ const Services = () => {
key={idx}
onMouseMove={handleMouseMove}
onMouseLeave={handleMouseLeave}
className="group relative p-8 rounded-2xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-white/[0.04] hover:bg-zinc-50 dark:hover:bg-white/[0.07] backdrop-blur-sm transition-all duration-200 cursor-pointer overflow-hidden shadow-xl dark:shadow-[0_20px_60px_rgba(0,0,0,0.4)]"
className="group relative p-6 md:p-8 rounded-2xl border border-zinc-200 dark:border-white/10 bg-white dark:bg-white/[0.04] hover:bg-zinc-50 dark:hover:bg-white/[0.07] backdrop-blur-sm transition-all duration-200 cursor-pointer overflow-hidden shadow-xl dark:shadow-[0_20px_60px_rgba(0,0,0,0.4)]"
style={{ transformStyle: 'preserve-3d', transition: 'transform 0.1s ease-out' }}
>
{/* Measurement ticks — top */}
@@ -93,9 +131,16 @@ const Services = () => {
{service.desc}
</p>
{/* Inline stat */}
{/* Inline stat with animation */}
<div className="flex items-baseline gap-2 mb-6">
<span className="font-mono text-2xl font-bold text-zinc-900 dark:text-white tracking-tight">{service.stat}</span>
<span
ref={(el) => statRefs.current[idx] = el}
data-target={service.stat}
data-suffix={service.statSuffix || ''}
className="font-mono text-2xl font-bold text-zinc-900 dark:text-white tracking-tight"
>
0{service.statSuffix || ''}
</span>
<span className="text-xs text-zinc-500 font-medium uppercase tracking-wider">{service.statLabel}</span>
</div>
src/index.css
+75 -41
View File
@@ -28,7 +28,9 @@
--crane-fill-surface: rgba(0, 0, 0, 0.04);
}
html, body, #root {
html,
body,
#root {
height: 100%;
margin: 0;
padding: 0;
@@ -69,8 +71,13 @@
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideInBottom {
@@ -78,6 +85,7 @@
transform: translateY(1rem);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
@@ -89,12 +97,16 @@
-ms-overflow-style: none;
scrollbar-width: none;
}
*::-webkit-scrollbar {
display: none;
}
@layer utilities {
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
@@ -121,14 +133,17 @@
border-radius: 3px;
opacity: 0.7;
}
.permit-stamp--accent {
color: #3b82f6;
border-color: rgba(59, 130, 246, 0.4);
}
.permit-stamp--verified {
color: #10b981;
border-color: rgba(16, 185, 129, 0.4);
}
.permit-stamp--danger {
color: #ef4444;
border-color: rgba(239, 68, 68, 0.4);
@@ -141,19 +156,20 @@
width: 100%;
height: 20px;
background:
linear-gradient(135deg, rgba(0,0,0,0.06) 25%, transparent 25%) -24px 0,
linear-gradient(225deg, rgba(0,0,0,0.06) 25%, transparent 25%) -24px 0,
linear-gradient(315deg, rgba(0,0,0,0.06) 25%, transparent 25%),
linear-gradient(45deg, rgba(0,0,0,0.06) 25%, transparent 25%);
linear-gradient(135deg, rgba(0, 0, 0, 0.06) 25%, transparent 25%) -24px 0,
linear-gradient(225deg, rgba(0, 0, 0, 0.06) 25%, transparent 25%) -24px 0,
linear-gradient(315deg, rgba(0, 0, 0, 0.06) 25%, transparent 25%),
linear-gradient(45deg, rgba(0, 0, 0, 0.06) 25%, transparent 25%);
background-size: 48px 20px;
background-color: transparent;
}
.dark .shingle-divider {
background:
linear-gradient(135deg, rgba(255,255,255,0.04) 25%, transparent 25%) -24px 0,
linear-gradient(225deg, rgba(255,255,255,0.04) 25%, transparent 25%) -24px 0,
linear-gradient(315deg, rgba(255,255,255,0.04) 25%, transparent 25%),
linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%);
linear-gradient(135deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%) -24px 0,
linear-gradient(225deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%) -24px 0,
linear-gradient(315deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%),
linear-gradient(45deg, rgba(255, 255, 255, 0.04) 25%, transparent 25%);
background-size: 48px 20px;
}
}
@@ -161,13 +177,11 @@
/* Safety stripe — diagonal hazard pattern for urgent/warning elements */
@layer components {
.safety-stripe {
background: repeating-linear-gradient(
-45deg,
transparent,
transparent 4px,
rgba(245, 158, 11, 0.12) 4px,
rgba(245, 158, 11, 0.12) 8px
);
background: repeating-linear-gradient(-45deg,
transparent,
transparent 4px,
rgba(245, 158, 11, 0.12) 4px,
rgba(245, 158, 11, 0.12) 8px);
}
}
@@ -175,17 +189,19 @@
@layer components {
.measure-ticks {
background-image:
repeating-linear-gradient(90deg, rgba(0,0,0,0.15) 0px, rgba(0,0,0,0.15) 1.5px, transparent 1.5px, transparent 24px),
repeating-linear-gradient(90deg, rgba(0,0,0,0.07) 0px, rgba(0,0,0,0.07) 1px, transparent 1px, transparent 6px);
repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0px, rgba(0, 0, 0, 0.15) 1.5px, transparent 1.5px, transparent 24px),
repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.07) 0px, rgba(0, 0, 0, 0.07) 1px, transparent 1px, transparent 6px);
background-size: 100% 100%, 100% 50%;
background-repeat: no-repeat;
background-position: bottom, bottom;
}
.dark .measure-ticks {
background-image:
repeating-linear-gradient(90deg, rgba(255,255,255,0.22) 0px, rgba(255,255,255,0.22) 1.5px, transparent 1.5px, transparent 24px),
repeating-linear-gradient(90deg, rgba(255,255,255,0.1) 0px, rgba(255,255,255,0.1) 1px, transparent 1px, transparent 6px);
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0px, rgba(255, 255, 255, 0.22) 1.5px, transparent 1.5px, transparent 24px),
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0px, rgba(255, 255, 255, 0.1) 1px, transparent 1px, transparent 6px);
}
.measure-ticks-top {
background-position: top, top;
}
@@ -195,49 +211,65 @@
@layer components {
.blueprint-grid {
background-image:
linear-gradient(rgba(59,130,246,0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(59,130,246,0.1) 1px, transparent 1px);
linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
background-size: 48px 48px;
}
.dark .blueprint-grid {
background-image:
linear-gradient(rgba(59,130,246,0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(59,130,246,0.05) 1px, transparent 1px);
linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px);
}
.blueprint-grid-fine {
background-image:
linear-gradient(rgba(59,130,246,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(59,130,246,0.06) 1px, transparent 1px),
linear-gradient(rgba(59,130,246,0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(59,130,246,0.1) 1px, transparent 1px);
linear-gradient(rgba(59, 130, 246, 0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(59, 130, 246, 0.06) 1px, transparent 1px),
linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
background-size: 12px 12px, 12px 12px, 48px 48px, 48px 48px;
}
.dark .blueprint-grid-fine {
background-image:
linear-gradient(rgba(59,130,246,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(59,130,246,0.03) 1px, transparent 1px),
linear-gradient(rgba(59,130,246,0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(59,130,246,0.06) 1px, transparent 1px);
linear-gradient(rgba(59, 130, 246, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(59, 130, 246, 0.03) 1px, transparent 1px),
linear-gradient(rgba(59, 130, 246, 0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(59, 130, 246, 0.06) 1px, transparent 1px);
}
}
/* Mobile bottom sheet slide-up for Intelligence Map */
@keyframes slideUpSheet {
from { transform: translateY(100%); }
to { transform: translateY(0); }
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
/* Crane swing — gentle pendulum sway for suspended CTA card */
@keyframes craneSwing {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(1.5deg); }
75% { transform: rotate(-1.5deg); }
0%,
100% {
transform: rotate(3deg);
}
50% {
transform: rotate(-3deg);
}
}
@layer components {
.crane-swing {
animation: craneSwing 4s ease-in-out infinite;
transform-origin: top center;
}
.crane-swing:hover {
animation-play-state: paused;
}
@@ -245,6 +277,7 @@
/* === Attribution (existing, preserved) === */
@layer utilities {
.attribution-ghost,
.content-ref-x7,
.sys-ref-x7,
@@ -270,8 +303,9 @@
background: transparent;
user-select: text;
}
.attribution-reveal::selection {
background: #3b82f6;
color: white;
}
}
}
src/pages/Landing.jsx
+409 -92
View File
@@ -1,4 +1,4 @@
import React, { useEffect, useRef } from 'react';
import React, { useEffect, useRef, useState } from 'react';
import Chatbot from '../components/Chatbot';
import { useAuth } from '../context/AuthContext';
import { useTheme } from '../context/ThemeContext';
@@ -9,13 +9,14 @@ import { SpotlightCard } from '../components/SpotlightCard';
import { ComparisonSlider } from '../components/ComparisonSlider';
import Services from '../components/Services';
import IntelligenceMap from '../components/IntelligenceMap';
import { motion, AnimatePresence } from 'framer-motion';
import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
import Logo from '../assets/images/LynkedUp_Pro_F_logo_Y.png';
import HeroImg from '../assets/images/hero_aerial_scan.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 HeroImg from '../assets/images/hero_aerial_scan.webp';
import ProcessImg1 from '../assets/images/process.webp';
import ProcessImg2 from '../assets/images/process-2.webp';
import ProcessImg3 from '../assets/images/process-3.webp';
gsap.registerPlugin(ScrollTrigger);
@@ -26,9 +27,32 @@ const Landing = () => {
const textRef = useRef(null);
const sectionsRef = useRef([]);
const statRefs = useRef([]);
const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const [isScrolled, setIsScrolled] = useState(false);
const [hoveredSplit, setHoveredSplit] = useState(null);
const cursorGlowRef = useRef(null);
// Scroll-aware nav — transparent at top, glass effect on scroll
useEffect(() => {
const handleScroll = () => setIsScrolled(window.scrollY > 50);
window.addEventListener('scroll', handleScroll, { passive: true });
return () => window.removeEventListener('scroll', handleScroll);
}, []);
// Body scroll lock when mobile menu is open
useEffect(() => {
document.body.style.overflow = isMobileMenuOpen ? 'hidden' : '';
return () => { document.body.style.overflow = ''; };
}, [isMobileMenuOpen]);
const scrollToSection = (id) => {
const el = document.getElementById(id);
if (el) {
el.scrollIntoView({ behavior: 'smooth' });
setIsMobileMenuOpen(false);
}
};
// Mouse-follow ambient light — tracks cursor across the page
useEffect(() => {
const handleMouseMove = (e) => {
@@ -79,18 +103,24 @@ const Landing = () => {
el.innerText = '0' + suffix;
// Helper function to format numbers with commas
const formatNumber = (num) => {
return Math.round(num).toLocaleString('en-US');
};
gsap.to(counter, {
value: target,
duration: 2,
ease: "power1.out",
duration: 2.5,
ease: "power2.out",
scrollTrigger: {
trigger: el,
start: "top 85%",
toggleActions: "play none none none",
},
onUpdate: () => {
el.innerText = Math.ceil(counter.value) + suffix;
}
el.innerText = formatNumber(counter.value) + suffix;
},
snap: { value: 1 }
});
});
@@ -115,96 +145,208 @@ const Landing = () => {
}}
/>
{/* Nav */}
<nav className="border-b border-zinc-200 dark:border-white/5 backdrop-blur-xl sticky top-0 z-40 bg-white/70 dark:bg-black/50">
<div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
<div className="flex items-center space-x-2">
<img src={Logo} alt="LynkedUp Pro" className="h-16 w-auto object-contain" />
{/* <span className="text-xl font-bold tracking-tight">LynkedUp Pro</span> */}
{/* ── Navigation ── */}
<nav className={`fixed top-0 left-0 right-0 z-40 transition-all duration-300 ${isScrolled
? 'bg-white/80 dark:bg-zinc-950/80 backdrop-blur-xl border-b border-zinc-200 dark:border-white/5 shadow-sm'
: 'bg-transparent border-b border-transparent'
}`}>
<div className="max-w-7xl mx-auto px-6 h-16 md:h-20 flex items-center justify-between">
{/* Logo */}
<button onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })} className="flex items-center space-x-2 shrink-0">
<img src={Logo} alt="LynkedUp Pro" className="h-12 md:h-16 w-auto object-contain" />
</button>
{/* Desktop Nav Links */}
<div className="hidden lg:flex items-center gap-1">
{[
{ label: 'How It Works', id: 'how-it-works' },
{ label: 'Services', id: 'services' },
{ label: 'Intelligence', id: 'intelligence' },
].map((item) => (
<button
key={item.id}
onClick={() => scrollToSection(item.id)}
className="px-3 py-2 text-sm font-medium text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors rounded-lg hover:bg-zinc-100/50 dark:hover:bg-white/5"
>
{item.label}
</button>
))}
<Link
to="/login"
className="px-3 py-2 text-sm font-medium text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors rounded-lg hover:bg-zinc-100/50 dark:hover:bg-white/5"
>
Pricing
</Link>
</div>
{/* Desktop Nav */}
<div className="hidden md:flex items-center space-x-4">
{/* Desktop Right Actions */}
<div className="hidden md:flex items-center gap-2">
<button
onClick={toggleTheme}
className="p-2 rounded-full hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors text-zinc-600 dark:text-zinc-400"
className="p-2 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors text-zinc-500 dark:text-zinc-400"
aria-label="Toggle Theme"
>
{theme === 'dark' ? <Sun size={20} /> : <Moon size={20} />}
{theme === 'dark' ? <Sun size={18} /> : <Moon size={18} />}
</button>
{!user ? (
<Link to="/login" className="px-5 py-2 rounded-full text-xs font-bold uppercase tracking-wider bg-zinc-100 dark:bg-zinc-900 border hover:bg-zinc-200 dark:hover:bg-zinc-800 transition-colors">
Sign In
</Link>
<>
<Link
to="/login"
className="px-4 py-2 text-sm font-semibold text-zinc-700 dark:text-zinc-300 hover:text-zinc-900 dark:hover:text-white transition-colors"
>
Sign In
</Link>
<Link
to="/login"
className="px-5 py-2 rounded-lg text-sm font-bold bg-blue-500 text-white hover:bg-blue-600 transition-colors shadow-sm shadow-blue-500/25"
>
Get Started
</Link>
</>
) : (
<div className="flex items-center gap-2">
<Link
to={user.role === 'CUSTOMER' ? '/portal/profile' : '/emp/fa/dashboard'}
className="px-5 py-2 rounded-full text-xs font-bold uppercase tracking-wider bg-black dark:bg-white text-white dark:text-black hover:opacity-80 transition-colors"
className="px-5 py-2 rounded-lg text-sm font-bold bg-blue-500 text-white hover:bg-blue-600 transition-colors shadow-sm shadow-blue-500/25"
>
{user.role === 'CUSTOMER' ? 'My Profile' : 'Dashboard'}
</Link>
<button
onClick={useAuth().logout}
className="p-2 rounded-full hover:bg-red-50 dark:hover:bg-red-900/20 text-zinc-400 hover:text-red-500 transition-colors"
className="p-2 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 text-zinc-400 hover:text-red-500 transition-colors"
title="Sign Out"
>
<LogOut size={20} />
<LogOut size={18} />
</button>
</div>
)}
</div>
{/* Mobile Menu Toggle */}
<button
className="md:hidden p-2 text-zinc-600 dark:text-zinc-400"
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
>
{isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
</button>
</div>
{/* Mobile Nav Dropdown */}
{isMobileMenuOpen && (
<div className="md:hidden absolute top-20 left-0 right-0 bg-white dark:bg-black border-b border-zinc-200 dark:border-white/5 p-4 flex flex-col space-y-4 shadow-xl animate-in slide-in-from-top-4">
<div className="flex md:hidden items-center gap-2">
<button
onClick={() => { toggleTheme(); setIsMobileMenuOpen(false); }}
className="flex items-center space-x-3 p-3 rounded-xl bg-zinc-100 dark:bg-zinc-900"
onClick={toggleTheme}
className="p-2 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors text-zinc-500 dark:text-zinc-400"
aria-label="Toggle Theme"
>
{theme === 'dark' ? <Sun size={20} /> : <Moon size={20} />}
<span className="font-bold">{theme === 'dark' ? 'Light Mode' : 'Dark Mode'}</span>
{theme === 'dark' ? <Sun size={18} /> : <Moon size={18} />}
</button>
<button
className="p-2 text-zinc-600 dark:text-zinc-400"
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
aria-label="Toggle menu"
>
{isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
</button>
{!user ? (
<Link
to="/login"
onClick={() => setIsMobileMenuOpen(false)}
className="w-full text-center py-3 rounded-xl font-bold uppercase tracking-wider bg-blue-600 text-white"
>
Sign In
</Link>
) : (
<>
<Link
to={user.role === 'CUSTOMER' ? '/portal/profile' : '/emp/fa/dashboard'}
onClick={() => setIsMobileMenuOpen(false)}
className="w-full text-center py-3 rounded-xl font-bold uppercase tracking-wider bg-black dark:bg-white text-white dark:text-black"
>
{user.role === 'CUSTOMER' ? 'My Profile' : 'Dashboard'}
</Link>
<button
onClick={() => { useAuth().logout(); setIsMobileMenuOpen(false); }}
className="w-full text-center py-3 rounded-xl font-bold uppercase tracking-wider bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400"
>
Sign Out
</button>
</>
)}
</div>
)}
</div>
</nav>
{/* ── Mobile Full-Screen Overlay ── */}
<AnimatePresence>
{isMobileMenuOpen && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.2 }}
className="fixed inset-0 z-50 bg-white dark:bg-zinc-950 flex flex-col"
>
{/* Overlay Header */}
<div className="flex items-center justify-between px-6 h-16">
<img src={Logo} alt="LynkedUp Pro" className="h-12 w-auto object-contain" />
<button
onClick={() => setIsMobileMenuOpen(false)}
className="p-2 text-zinc-600 dark:text-zinc-400"
aria-label="Close menu"
>
<X size={24} />
</button>
</div>
{/* Overlay Links */}
<motion.div
initial="closed"
animate="open"
variants={{ open: { transition: { staggerChildren: 0.06 } }, closed: {} }}
className="flex-1 flex flex-col items-center justify-center gap-2 px-6"
>
{[
{ label: 'How It Works', id: 'how-it-works' },
{ label: 'Services', id: 'services' },
{ label: 'Intelligence', id: 'intelligence' },
].map((item) => (
<motion.button
key={item.id}
variants={{ closed: { opacity: 0, y: 20 }, open: { opacity: 1, y: 0 } }}
transition={{ duration: 0.3 }}
onClick={() => scrollToSection(item.id)}
className="text-2xl font-bold text-zinc-900 dark:text-white py-3 hover:text-blue-500 transition-colors"
>
{item.label}
</motion.button>
))}
<motion.div
variants={{ closed: { opacity: 0, y: 20 }, open: { opacity: 1, y: 0 } }}
transition={{ duration: 0.3 }}
>
<Link
to="/login"
onClick={() => setIsMobileMenuOpen(false)}
className="text-2xl font-bold text-zinc-900 dark:text-white py-3 hover:text-blue-500 transition-colors"
>
Pricing
</Link>
</motion.div>
</motion.div>
{/* Overlay Bottom Actions */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.3, duration: 0.3 }}
className="px-6 pb-10 space-y-3"
>
{!user ? (
<>
<Link
to="/login"
onClick={() => setIsMobileMenuOpen(false)}
className="block w-full text-center py-4 rounded-xl text-base font-bold bg-blue-500 text-white hover:bg-blue-600 transition-colors shadow-sm"
>
Get Started
</Link>
<Link
to="/login"
onClick={() => setIsMobileMenuOpen(false)}
className="block w-full text-center py-4 rounded-xl text-base font-bold border border-zinc-200 dark:border-white/10 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-white/5 transition-colors"
>
Sign In
</Link>
</>
) : (
<>
<Link
to={user.role === 'CUSTOMER' ? '/portal/profile' : '/emp/fa/dashboard'}
onClick={() => setIsMobileMenuOpen(false)}
className="block w-full text-center py-4 rounded-xl text-base font-bold bg-blue-500 text-white hover:bg-blue-600 transition-colors shadow-sm"
>
{user.role === 'CUSTOMER' ? 'My Profile' : 'Dashboard'}
</Link>
<button
onClick={() => { useAuth().logout(); setIsMobileMenuOpen(false); }}
className="block w-full text-center py-4 rounded-xl text-base font-bold border border-red-200 dark:border-red-500/20 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/10 transition-colors"
>
Sign Out
</button>
</>
)}
</motion.div>
</motion.div>
)}
</AnimatePresence>
{/* ============================================ */}
{/* HERO SECTION — "The Overhead View" */}
{/* Aerospace Precision & Hometown Trust */}
@@ -293,7 +435,7 @@ const Landing = () => {
<div className="border-l border-cyan-500/40 dark:border-cyan-500/30 pl-3 space-y-1.5">
<p className="font-mono text-[11px] font-medium tracking-wide text-cyan-600 dark:text-cyan-400/80">
<span className="text-cyan-600 dark:text-cyan-400 mr-1.5">&#9656;</span>
2,847 PROPERTIES TRACKED
5,847 PROPERTIES TRACKED
</p>
<p className="font-mono text-[10px] tracking-wide text-zinc-400 dark:text-white/30">
DFW METRO &middot; ZONE 2
@@ -321,20 +463,48 @@ const Landing = () => {
</section>
{/* ── TRUST BAR — Animated stat counters ── */}
<div className="py-12 md:py-16 bg-zinc-50 dark:bg-zinc-950 border-y border-zinc-100 dark:border-white/5" ref={addToRefs}>
<div className="max-w-5xl mx-auto px-6">
<div className="grid grid-cols-2 md:grid-cols-4 gap-6 md:gap-8 text-center">
{[
{ value: 5000, suffix: '+', label: 'Properties Scanned' },
{ value: 200, suffix: '+', label: 'Contractors Onboarded' },
{ value: 98, suffix: '%', label: 'Estimate Accuracy' },
{ value: 15, suffix: ' min', label: 'Avg Report Time' },
].map((stat, i) => (
<div key={i} className="group">
<div
ref={(el) => statRefs.current[i + 3] = el}
data-target={stat.value}
data-suffix={stat.suffix}
className="text-3xl md:text-4xl font-mono font-bold text-zinc-900 dark:text-white tracking-tight"
>
0{stat.suffix}
</div>
<div className="text-xs font-mono font-bold uppercase tracking-widest text-zinc-400 dark:text-zinc-500 mt-1">
{stat.label}
</div>
</div>
))}
</div>
</div>
</div>
{/* ── Shingle Divider ── */}
<div className="shingle-divider" />
{/* PROCESS SECTION (From Sky to Safety) */}
<div className="py-24 bg-white dark:bg-black/40 border-y border-zinc-100 dark:border-white/5" ref={addToRefs}>
<div id="how-it-works" className="scroll-mt-20 py-24 bg-white dark:bg-black/40 border-y border-zinc-100 dark:border-white/5" ref={addToRefs}>
<div className="max-w-7xl mx-auto px-6">
<div className="text-center mb-24">
<div className="inline-block px-4 py-1 rounded-full bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 font-bold text-xs tracking-widest uppercase mb-4">The Workflow</div>
<h2 className="text-4xl md:text-6xl font-black tracking-tight">From Sky to Safety in <span className="text-blue-500">3 Steps.</span></h2>
</div>
<div className="space-y-32">
<div className="space-y-20 md:space-y-32">
{/* Step 1 */}
<div className="grid md:grid-cols-2 gap-16 items-center">
<div className="grid md:grid-cols-2 gap-10 md:gap-16 items-center">
<div className="relative rounded-3xl overflow-hidden shadow-2xl border border-white/10 group order-2 md:order-1">
<img src={ProcessImg1} alt="The Scan" className="w-full h-auto transform transition-transform duration-700 group-hover:scale-105" />
<div className="absolute bottom-6 left-6 bg-black/70 backdrop-blur-md px-3 py-1 rounded text-xs font-mono text-green-400 border border-green-500/30">LIDAR_MAPPING_ACTIVE</div>
@@ -354,7 +524,7 @@ const Landing = () => {
</div>
{/* Step 2 */}
<div className="grid md:grid-cols-2 gap-16 items-center">
<div className="grid md:grid-cols-2 gap-10 md:gap-16 items-center">
<div className="order-1">
<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">02</div>
<h3 className="text-3xl font-bold mb-4">The Diagnosis.</h3>
@@ -384,7 +554,7 @@ const Landing = () => {
</div>
{/* Step 3 */}
<div className="grid md:grid-cols-2 gap-16 items-center">
<div className="grid md:grid-cols-2 gap-10 md:gap-16 items-center">
<div className="relative rounded-3xl overflow-hidden shadow-2xl border border-white/10 group order-2 md:order-1">
<img src={ProcessImg3} alt="The Resolution" className="w-full h-auto transform transition-transform duration-700 group-hover:scale-105" />
</div>
@@ -424,10 +594,14 @@ const Landing = () => {
</div>
{/* NEW SERVICES SECTION */}
<Services />
<div id="services" className="scroll-mt-20">
<Services />
</div>
{/* NEW INTELLIGENCE MAP SECTION */}
<IntelligenceMap />
<div id="intelligence" className="scroll-mt-20">
<IntelligenceMap />
</div>
{/* ── Shingle Divider ── */}
<div className="shingle-divider" />
@@ -445,7 +619,7 @@ const Landing = () => {
<div className="grid md:grid-cols-3 gap-8">
{/* Stat Card 1 — Insurance Denials */}
<div className="bg-white dark:bg-white/5 p-8 rounded-2xl border border-zinc-200 dark:border-white/10 hover:bg-zinc-50 dark:hover:bg-white/10 hover:-translate-y-2 hover:shadow-lg hover:shadow-black/20 transition-all duration-300 relative overflow-hidden cursor-default">
<div className="bg-white dark:bg-white/5 p-5 md:p-8 rounded-2xl border border-zinc-200 dark:border-white/10 hover:bg-zinc-50 dark:hover:bg-white/10 hover:-translate-y-2 hover:shadow-lg hover:shadow-black/20 transition-all duration-300 relative overflow-hidden cursor-default">
<div className="measure-ticks measure-ticks-top absolute top-0 left-4 right-4 h-3"></div>
<div className="mt-3">
<div
@@ -466,7 +640,7 @@ const Landing = () => {
</div>
{/* Stat Card 2 — Life Reduced */}
<div className="bg-white dark:bg-white/5 p-8 rounded-2xl border border-zinc-200 dark:border-white/10 hover:bg-zinc-50 dark:hover:bg-white/10 hover:-translate-y-2 hover:shadow-lg hover:shadow-black/20 transition-all duration-300 relative overflow-hidden cursor-default">
<div className="bg-white dark:bg-white/5 p-5 md:p-8 rounded-2xl border border-zinc-200 dark:border-white/10 hover:bg-zinc-50 dark:hover:bg-white/10 hover:-translate-y-2 hover:shadow-lg hover:shadow-black/20 transition-all duration-300 relative overflow-hidden cursor-default">
<div className="measure-ticks measure-ticks-top absolute top-0 left-4 right-4 h-3"></div>
<div className="mt-3">
<div
@@ -487,7 +661,7 @@ const Landing = () => {
</div>
{/* Stat Card 3 — Estimate Time */}
<div className="bg-white dark:bg-white/5 p-8 rounded-2xl border border-zinc-200 dark:border-white/10 hover:bg-zinc-50 dark:hover:bg-white/10 hover:-translate-y-2 hover:shadow-lg hover:shadow-black/20 transition-all duration-300 relative overflow-hidden cursor-default">
<div className="bg-white dark:bg-white/5 p-5 md:p-8 rounded-2xl border border-zinc-200 dark:border-white/10 hover:bg-zinc-50 dark:hover:bg-white/10 hover:-translate-y-2 hover:shadow-lg hover:shadow-black/20 transition-all duration-300 relative overflow-hidden cursor-default">
<div className="measure-ticks measure-ticks-top absolute top-0 left-4 right-4 h-3"></div>
<div className="mt-3">
<div
@@ -513,6 +687,140 @@ const Landing = () => {
{/* ── Shingle Divider ── */}
<div className="shingle-divider" />
{/* ── THE SPLIT — B2C / B2B Routing ── */}
<div className="py-24 md:py-32 bg-white dark:bg-zinc-950 relative overflow-hidden" ref={addToRefs}>
<div className="absolute inset-0 blueprint-grid opacity-40"></div>
<div className="max-w-5xl mx-auto px-6 relative z-10">
<div className="text-center mb-12 md:mb-16">
<span className="permit-stamp permit-stamp--accent mb-6 inline-flex">&#9670; Dual Platform</span>
<h2 className="text-3xl md:text-5xl font-black tracking-tight text-zinc-900 dark:text-white mt-4">
Which side of the roof are you on?
</h2>
<p className="text-zinc-500 dark:text-zinc-400 mt-4 max-w-xl mx-auto">
Whether you need your roof fixed or you fix roofs for a living — we built LynkedUp for both.
</p>
{/* Roof Ridge — interactive peak shape, highlights on card hover */}
<div className="flex items-center justify-center mt-10">
<svg viewBox="0 0 400 40" className="w-56 md:w-80 h-auto" fill="none" aria-hidden="true">
{/* Left slope — Homeowner side */}
<path
d="M0 38 L200 4"
strokeWidth="1.5"
strokeDasharray="8 4"
stroke="currentColor"
className="transition-all duration-300 text-blue-500/40 dark:text-blue-500/30 md:hidden"
/>
<path
d="M0 38 L200 4"
strokeWidth={hoveredSplit === 'homeowner' ? 2.5 : 1.5}
strokeDasharray={hoveredSplit === 'homeowner' ? 'none' : '8 4'}
stroke={hoveredSplit === 'homeowner' ? '#10b981' : 'currentColor'}
className={`hidden md:block transition-all duration-300 ${hoveredSplit === 'homeowner' ? '' : 'text-blue-500/40 dark:text-blue-500/30'}`}
/>
{/* Right slope — Contractor side */}
<path
d="M200 4 L400 38"
strokeWidth="1.5"
strokeDasharray="8 4"
stroke="currentColor"
className="transition-all duration-300 text-blue-500/40 dark:text-blue-500/30 md:hidden"
/>
<path
d="M200 4 L400 38"
strokeWidth={hoveredSplit === 'contractor' ? 2.5 : 1.5}
strokeDasharray={hoveredSplit === 'contractor' ? 'none' : '8 4'}
stroke={hoveredSplit === 'contractor' ? '#3b82f6' : 'currentColor'}
className={`hidden md:block transition-all duration-300 ${hoveredSplit === 'contractor' ? '' : 'text-blue-500/40 dark:text-blue-500/30'}`}
/>
{/* Peak glow — pulses on either hover */}
<circle cx="200" cy="4" r="8" className="fill-blue-500/20" />
<circle cx="200" cy="4" r="4" className="fill-blue-500" />
</svg>
</div>
</div>
<div className="grid md:grid-cols-2 gap-6">
{/* Homeowner Card */}
<div
className="group relative p-5 md:p-10 rounded-2xl border border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/[0.03] hover:border-emerald-500/40 transition-all duration-300 hover:-translate-y-2 hover:shadow-lg hover:shadow-emerald-500/5 overflow-hidden"
onMouseEnter={() => setHoveredSplit('homeowner')}
onMouseLeave={() => setHoveredSplit(null)}
onTouchStart={() => setHoveredSplit('homeowner')}
>
<div className="measure-ticks measure-ticks-top absolute top-0 left-4 right-4 h-3"></div>
<div className="mt-2">
<div className="w-12 h-12 rounded-xl bg-emerald-100 dark:bg-emerald-500/10 flex items-center justify-center mb-6">
<Home size={24} className="text-emerald-600 dark:text-emerald-400" />
</div>
<h3 className="text-xl font-bold text-zinc-900 dark:text-white mb-2">I'm a Homeowner</h3>
<p className="text-sm text-zinc-500 dark:text-zinc-400 mb-6 leading-relaxed">
Get a transparent, AI-powered roof assessment. Know exactly what's wrong, what it costs, and who to trust — before anyone knocks on your door.
</p>
<ul className="space-y-2.5 mb-8">
{['Free drone inspection', 'AI damage assessment', 'Verified contractor matching', 'Insurance claim support'].map((item) => (
<li key={item} className="flex items-center gap-2 text-sm text-zinc-600 dark:text-zinc-300">
<CheckCircle2 size={16} className="text-emerald-500 shrink-0" />
{item}
</li>
))}
</ul>
<Link
to="/login"
className="inline-flex items-center gap-2 px-6 py-3 rounded-lg text-sm font-bold bg-emerald-500 text-white hover:bg-emerald-600 transition-colors shadow-sm"
>
Protect My Home <ArrowRight size={16} />
</Link>
</div>
<div className="mt-6 pt-3 border-t border-zinc-200 dark:border-white/5">
<span className="permit-stamp permit-stamp--verified">&#10003; Residential Verified</span>
</div>
<div className="measure-ticks absolute bottom-0 left-4 right-4 h-3"></div>
</div>
{/* Contractor Card */}
<div
className="group relative p-5 md:p-10 rounded-2xl border border-zinc-200 dark:border-white/10 bg-zinc-50 dark:bg-white/[0.03] hover:border-blue-500/40 transition-all duration-300 hover:-translate-y-2 hover:shadow-lg hover:shadow-blue-500/5 overflow-hidden"
onMouseEnter={() => setHoveredSplit('contractor')}
onMouseLeave={() => setHoveredSplit(null)}
onTouchStart={() => setHoveredSplit('contractor')}
>
<div className="measure-ticks measure-ticks-top absolute top-0 left-4 right-4 h-3"></div>
<div className="mt-2">
<div className="w-12 h-12 rounded-xl bg-blue-100 dark:bg-blue-500/10 flex items-center justify-center mb-6">
<Award size={24} className="text-blue-600 dark:text-blue-400" />
</div>
<h3 className="text-xl font-bold text-zinc-900 dark:text-white mb-2">I'm a Contractor</h3>
<p className="text-sm text-zinc-500 dark:text-zinc-400 mb-6 leading-relaxed">
Stop chasing leads. Our intelligence engine surfaces storm-damaged properties, pre-qualifies homeowners, and routes jobs directly to your crew.
</p>
<ul className="space-y-2.5 mb-8">
{['AI-powered lead generation', 'Storm path intelligence', 'Automated estimates', 'Crew dispatch & scheduling'].map((item) => (
<li key={item} className="flex items-center gap-2 text-sm text-zinc-600 dark:text-zinc-300">
<CheckCircle2 size={16} className="text-blue-500 shrink-0" />
{item}
</li>
))}
</ul>
<Link
to="/login"
className="inline-flex items-center gap-2 px-6 py-3 rounded-lg text-sm font-bold bg-blue-500 text-white hover:bg-blue-600 transition-colors shadow-sm"
>
Grow My Business <ArrowRight size={16} />
</Link>
</div>
<div className="mt-6 pt-3 border-t border-zinc-200 dark:border-white/5">
<span className="permit-stamp permit-stamp--accent">&#9733; Contractor Certified</span>
</div>
<div className="measure-ticks absolute bottom-0 left-4 right-4 h-3"></div>
</div>
</div>
</div>
</div>
{/* ── Shingle Divider ── */}
<div className="shingle-divider" />
{/* INDUSTRIES THAT LOVE US */}
<div className="py-32" ref={addToRefs}>
<div className="max-w-7xl mx-auto px-6">
@@ -634,20 +942,20 @@ const Landing = () => {
{/* CRANE CTA — "One crane, one card, one moment" */}
{/* Construction signature element before footer */}
{/* ══════════════════════════════════════════════════ */}
<section className="relative py-24 md:py-36 bg-zinc-100 dark:bg-[#09090b] overflow-hidden" ref={addToRefs}>
<section className="relative py-20 md:py-24 bg-zinc-100 dark:bg-[#09090b] overflow-hidden" ref={addToRefs}>
{/* Blueprint grid background */}
<div className="absolute inset-0 blueprint-grid-fine opacity-40"></div>
<div className="max-w-5xl mx-auto px-6 relative z-10 flex flex-col items-center">
<div className="max-w-6xl mx-auto px-6 relative z-10 flex flex-col items-center">
{/* Tower Crane SVG — full-scale blueprint line art */}
<div className="w-full">
<svg viewBox="0 0 800 360" fill="none" className="w-full" aria-hidden="true">
<svg viewBox="0 0 800 460" fill="none" className="w-full" aria-hidden="true">
{/* ===== TOWER / LATTICE MAST ===== */}
{/* Main vertical rails */}
<line x1="145" y1="55" x2="145" y2="360" stroke="var(--crane-line-strong)" strokeWidth="2" />
<line x1="195" y1="55" x2="195" y2="360" stroke="var(--crane-line-strong)" strokeWidth="2" />
{/* Main vertical rails — extended to full viewBox height */}
<line x1="145" y1="55" x2="145" y2="460" stroke="var(--crane-line-strong)" strokeWidth="2" />
<line x1="195" y1="55" x2="195" y2="460" stroke="var(--crane-line-strong)" strokeWidth="2" />
{/* Horizontal rungs */}
<line x1="145" y1="93" x2="195" y2="93" stroke="var(--crane-line-medium)" strokeWidth="1" />
<line x1="145" y1="131" x2="195" y2="131" stroke="var(--crane-line-medium)" strokeWidth="1" />
@@ -656,6 +964,9 @@ const Landing = () => {
<line x1="145" y1="245" x2="195" y2="245" stroke="var(--crane-line-medium)" strokeWidth="1" />
<line x1="145" y1="283" x2="195" y2="283" stroke="var(--crane-line-medium)" strokeWidth="1" />
<line x1="145" y1="321" x2="195" y2="321" stroke="var(--crane-line-medium)" strokeWidth="1" />
<line x1="145" y1="359" x2="195" y2="359" stroke="var(--crane-line-medium)" strokeWidth="1" />
<line x1="145" y1="397" x2="195" y2="397" stroke="var(--crane-line-medium)" strokeWidth="1" />
<line x1="145" y1="435" x2="195" y2="435" stroke="var(--crane-line-medium)" strokeWidth="1" />
{/* X-bracing */}
<line x1="145" y1="93" x2="195" y2="131" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
<line x1="195" y1="93" x2="145" y2="131" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
@@ -663,8 +974,14 @@ const Landing = () => {
<line x1="195" y1="169" x2="145" y2="207" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
<line x1="145" y1="245" x2="195" y2="283" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
<line x1="195" y1="245" x2="145" y2="283" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
<line x1="145" y1="321" x2="195" y2="360" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
<line x1="195" y1="321" x2="145" y2="360" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
<line x1="145" y1="321" x2="195" y2="359" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
<line x1="195" y1="321" x2="145" y2="359" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
<line x1="145" y1="359" x2="195" y2="397" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
<line x1="195" y1="359" x2="145" y2="397" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
<line x1="145" y1="397" x2="195" y2="435" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
<line x1="195" y1="397" x2="145" y2="435" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
<line x1="145" y1="435" x2="195" y2="460" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
<line x1="195" y1="435" x2="145" y2="460" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
{/* ===== SLEWING PLATFORM + OPERATOR CAB ===== */}
<rect x="135" y="55" width="70" height="18" rx="2" fill="var(--crane-fill-surface)" stroke="var(--crane-line-medium)" strokeWidth="1.5" />
@@ -723,19 +1040,19 @@ const Landing = () => {
<circle cx="405" cy="70" r="2.5" fill="rgba(59,130,246,0.12)" stroke="rgba(59,130,246,0.25)" strokeWidth="0.75" />
{/* ===== HOIST CABLE ===== */}
<line x1="400" y1="80" x2="400" y2="340" stroke="rgba(59,130,246,0.28)" strokeWidth="1.5" strokeDasharray="6 4" />
<line x1="400" y1="80" x2="400" y2="430" stroke="rgba(59,130,246,0.28)" strokeWidth="1.5" strokeDasharray="6 4" />
{/* ===== HOOK BLOCK ===== */}
<rect x="394" y="340" width="12" height="8" rx="2" fill="rgba(59,130,246,0.1)" stroke="rgba(59,130,246,0.3)" strokeWidth="1" />
<rect x="394" y="430" width="12" height="8" rx="2" fill="rgba(59,130,246,0.1)" stroke="rgba(59,130,246,0.3)" strokeWidth="1" />
{/* Hook */}
<line x1="400" y1="348" x2="400" y2="355" stroke="rgba(59,130,246,0.4)" strokeWidth="1.5" />
<path d="M400 355 C400 362 392 362 392 357" stroke="rgba(59,130,246,0.4)" strokeWidth="1.5" fill="none" strokeLinecap="round" />
<line x1="400" y1="438" x2="400" y2="446" stroke="rgba(59,130,246,0.4)" strokeWidth="1.5" />
<path d="M400 446 C400 453 392 453 392 448" stroke="rgba(59,130,246,0.4)" strokeWidth="1.5" fill="none" strokeLinecap="round" />
</svg>
</div>
{/* CTA Card — "suspended" from crane, swings like a pendulum */}
<div className="crane-swing relative -mt-4 bg-white dark:bg-white/[0.03] backdrop-blur-sm rounded-2xl border border-zinc-200 dark:border-white/10 p-10 md:p-14 text-center max-w-lg w-full shadow-xl dark:shadow-[0_20px_60px_rgba(0,0,0,0.4)] cursor-default">
<div className="crane-swing relative -mt-4 bg-white dark:bg-white/[0.03] backdrop-blur-sm rounded-2xl border border-zinc-200 dark:border-white/10 p-7 md:p-14 text-center max-w-2xl w-full shadow-xl dark:shadow-[0_20px_60px_rgba(0,0,0,0.4)] cursor-default">
{/* Attachment point — visual connector to cable above */}
<div className="absolute -top-3 left-1/2 -translate-x-1/2 w-6 h-6 border border-blue-500/25 rounded-full bg-zinc-100 dark:bg-[#09090b] flex items-center justify-center">
<div className="w-2 h-2 bg-blue-500/40 rounded-full"></div>