Satyam
867 lines
61 KiB
React
867 lines
61 KiB
React
import React, { useEffect, useRef } from 'react';
|
||
import Chatbot from '../components/Chatbot';
|
||
import { useAuth } from '../context/AuthContext';
|
||
import { useTheme } from '../context/ThemeContext';
|
||
import { ArrowRight, CheckCircle2, Home, Star, ShieldCheck, Clock, Award, TrendingDown, Users, MapPin, Phone, Mail, Instagram, Twitter, Youtube, Sun, Moon, LogOut, LayoutDashboard, User, Menu, X, ChevronDown } from 'lucide-react';
|
||
import { Link } from 'react-router-dom';
|
||
|
||
import { SpotlightCard } from '../components/SpotlightCard';
|
||
import { ComparisonSlider } from '../components/ComparisonSlider';
|
||
import Services from '../components/Services';
|
||
import IntelligenceMap from '../components/IntelligenceMap';
|
||
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';
|
||
|
||
gsap.registerPlugin(ScrollTrigger);
|
||
|
||
const Landing = () => {
|
||
const { user } = useAuth();
|
||
const { theme, toggleTheme } = useTheme();
|
||
const heroRef = useRef(null);
|
||
const textRef = useRef(null);
|
||
const sectionsRef = useRef([]);
|
||
const statRefs = useRef([]);
|
||
const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
|
||
const cursorGlowRef = useRef(null);
|
||
|
||
// Mouse-follow ambient light — tracks cursor across the page
|
||
useEffect(() => {
|
||
const handleMouseMove = (e) => {
|
||
if (cursorGlowRef.current) {
|
||
cursorGlowRef.current.style.setProperty('--glow-x', `${e.clientX}px`);
|
||
cursorGlowRef.current.style.setProperty('--glow-y', `${e.clientY}px`);
|
||
}
|
||
};
|
||
window.addEventListener('mousemove', handleMouseMove);
|
||
return () => window.removeEventListener('mousemove', handleMouseMove);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
// Console Signature (Info level to persist in prod)
|
||
console.info(
|
||
"%c Built by Satyam Rastogi %c 🚀 Ready for liftoff ",
|
||
"background: #3b82f6; color: white; padding: 4px; border-radius: 4px 0 0 4px; font-weight: bold;",
|
||
"background: #10b981; color: white; padding: 4px; border-radius: 0 4px 4px 0;"
|
||
);
|
||
|
||
// Hero Animation
|
||
gsap.fromTo(textRef.current.children,
|
||
{ y: 50, opacity: 0 },
|
||
{ y: 0, opacity: 1, duration: 1, stagger: 0.2, ease: "power3.out" }
|
||
);
|
||
|
||
// Scroll Animations
|
||
sectionsRef.current.forEach((el) => {
|
||
gsap.fromTo(el,
|
||
{ y: 50, opacity: 0 },
|
||
{
|
||
y: 0, opacity: 1, duration: 0.8, ease: "power2.out",
|
||
scrollTrigger: {
|
||
trigger: el,
|
||
start: "top 80%",
|
||
}
|
||
}
|
||
);
|
||
});
|
||
|
||
// Animated Stat Counters — proxy object approach (avoids GSAP innerText parsing conflicts)
|
||
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;
|
||
|
||
gsap.to(counter, {
|
||
value: target,
|
||
duration: 2,
|
||
ease: "power1.out",
|
||
scrollTrigger: {
|
||
trigger: el,
|
||
start: "top 85%",
|
||
toggleActions: "play none none none",
|
||
},
|
||
onUpdate: () => {
|
||
el.innerText = Math.ceil(counter.value) + suffix;
|
||
}
|
||
});
|
||
});
|
||
|
||
}, []);
|
||
|
||
const addToRefs = (el) => {
|
||
if (el && !sectionsRef.current.includes(el)) {
|
||
sectionsRef.current.push(el);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-screen bg-zinc-50 dark:bg-[#050505] text-zinc-900 dark:text-white transition-colors duration-300 overflow-x-hidden selection:bg-emerald-500/30">
|
||
|
||
{/* CURSOR AMBIENT LIGHT — subtle glow that follows mouse, desktop only */}
|
||
<div
|
||
ref={cursorGlowRef}
|
||
className="fixed inset-0 pointer-events-none z-50 hidden md:block"
|
||
style={{
|
||
background: 'radial-gradient(600px circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(59,130,246,0.04), transparent 60%)',
|
||
transition: 'background 0.15s ease',
|
||
}}
|
||
/>
|
||
|
||
{/* 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> */}
|
||
</div>
|
||
|
||
{/* Desktop Nav */}
|
||
<div className="hidden md:flex items-center space-x-4">
|
||
<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"
|
||
aria-label="Toggle Theme"
|
||
>
|
||
{theme === 'dark' ? <Sun size={20} /> : <Moon size={20} />}
|
||
</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>
|
||
) : (
|
||
<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"
|
||
>
|
||
{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"
|
||
title="Sign Out"
|
||
>
|
||
<LogOut size={20} />
|
||
</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">
|
||
<button
|
||
onClick={() => { toggleTheme(); setIsMobileMenuOpen(false); }}
|
||
className="flex items-center space-x-3 p-3 rounded-xl bg-zinc-100 dark:bg-zinc-900"
|
||
>
|
||
{theme === 'dark' ? <Sun size={20} /> : <Moon size={20} />}
|
||
<span className="font-bold">{theme === 'dark' ? 'Light Mode' : 'Dark Mode'}</span>
|
||
</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>
|
||
)}
|
||
</nav>
|
||
|
||
{/* ============================================ */}
|
||
{/* HERO SECTION — "The Overhead View" */}
|
||
{/* Aerospace Precision & Hometown Trust */}
|
||
{/* ============================================ */}
|
||
<section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-white dark:bg-[#09090b]" ref={heroRef}>
|
||
|
||
{/* Layer 0: Background image */}
|
||
<div className="absolute inset-0 z-0">
|
||
<img
|
||
src={HeroImg}
|
||
alt=""
|
||
className="w-full h-full object-cover object-center scale-105 opacity-15 dark:opacity-65 saturate-[0.35] brightness-75 dark:brightness-[0.70]"
|
||
/>
|
||
<div className="absolute inset-0 bg-gradient-to-b from-white/60 dark:from-[#09090b]/40 via-transparent to-white dark:to-[#09090b]" />
|
||
<div className="absolute inset-0 bg-gradient-to-r from-white/70 dark:from-[#09090b]/60 via-transparent to-white/70 dark:to-[#09090b]/60" />
|
||
</div>
|
||
|
||
{/* Layer 1: Subtle ambient glow behind content */}
|
||
<div className="absolute inset-0 z-[5]">
|
||
<div className="absolute top-1/3 left-1/2 -translate-x-1/2 w-[600px] h-[400px] bg-blue-500/[0.04] rounded-full blur-[120px]" />
|
||
</div>
|
||
|
||
{/* Layer 3: Content */}
|
||
<div className="relative z-20 max-w-5xl mx-auto px-6 text-center pt-24 pb-32" ref={textRef}>
|
||
|
||
{/* Patriotic badge — identity + mission statement */}
|
||
<div className="inline-flex items-center px-3 sm:px-4 py-1.5 rounded-full bg-blue-100 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-500/20 backdrop-blur-sm mb-6 sm:mb-8 shadow-sm max-w-[95%] sm:max-w-none">
|
||
<span className="mr-1.5 sm:mr-2.5 text-sm sm:text-base">🇺🇸</span>
|
||
<span className="text-[8px] sm:text-[9px] md:text-[10px] font-bold tracking-wider sm:tracking-widest uppercase text-blue-600 dark:text-blue-300 leading-tight">
|
||
Crafted to Level the Field for Those Who Build{' '}
|
||
<span className="text-red-400">America</span>
|
||
</span>
|
||
</div>
|
||
|
||
{/* Headline — Inter font-black: BOLD, commanding, statement piece */}
|
||
<h1 className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl xl:text-9xl font-black tracking-tighter mb-4 sm:mb-6 leading-[0.9] px-2">
|
||
<span className="text-zinc-900 dark:text-white">ROOFING</span>
|
||
<br />
|
||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 via-blue-500 to-cyan-400">
|
||
REVOLUTIONIZED
|
||
</span>
|
||
</h1>
|
||
|
||
{/* Subtitle — the value proposition with credibility */}
|
||
<p className="text-base sm:text-lg md:text-xl lg:text-2xl text-zinc-500 dark:text-white/50 max-w-2xl mx-auto mb-12 font-medium leading-relaxed px-2">
|
||
Automated drone inspections. Instant AI estimates.
|
||
<br />
|
||
Restoring your home's integrity with{' '}
|
||
<span className="text-zinc-900 dark:text-white font-bold">20+ years</span> of precision.
|
||
</p>
|
||
|
||
{/* Dual CTAs */}
|
||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
|
||
{/* B2C: Homeowners */}
|
||
<Link
|
||
to="/login"
|
||
className="group px-8 py-4 rounded-full bg-blue-600 hover:bg-blue-500 text-white font-bold text-sm transition-all flex items-center shadow-lg shadow-blue-600/20 hover:shadow-blue-500/30 hover:scale-[1.02] ring-4 ring-blue-500/10"
|
||
>
|
||
Schedule Demo
|
||
<ArrowRight size={18} className="ml-2 transition-transform group-hover:translate-x-0.5" />
|
||
</Link>
|
||
{/* B2B: Contractors */}
|
||
<Link
|
||
to="/login"
|
||
className="group px-8 py-4 rounded-full bg-zinc-100 dark:bg-white/[0.06] hover:bg-zinc-200 dark:hover:bg-white/[0.10] border border-zinc-300 dark:border-white/[0.10] hover:border-zinc-400 dark:hover:border-white/[0.15] text-zinc-700 dark:text-white/90 font-bold text-sm transition-all flex items-center hover:scale-[1.02]"
|
||
>
|
||
Start Free Trial
|
||
<ArrowRight size={18} className="ml-2 transition-transform group-hover:translate-x-0.5" />
|
||
</Link>
|
||
</div>
|
||
|
||
{/* Discount banner — Veterans, Seniors, Active Duty */}
|
||
<div className="max-w-md mx-4 sm:mx-auto bg-red-50 dark:bg-white/[0.04] backdrop-blur-md rounded-2xl border border-red-200 dark:border-red-500/20 p-3 sm:p-4 flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-0 sm:space-x-4 shadow-sm">
|
||
<div className="w-10 h-10 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center text-red-500 dark:text-red-400 shrink-0">
|
||
<Award size={20} />
|
||
</div>
|
||
<div className="text-center sm:text-left">
|
||
<h3 className="font-bold text-xs sm:text-sm text-zinc-900 dark:text-white">Active Duty, Veterans & Seniors</h3>
|
||
<p className="text-[10px] sm:text-xs text-zinc-500 dark:text-white/50">Get an exclusive <span className="text-red-500 dark:text-red-400 font-bold">15% Discount</span> on all services.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Layer 4: HUD Annotations — desktop only */}
|
||
<div className="hidden lg:block absolute bottom-16 left-8 z-20">
|
||
<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">▸</span>
|
||
2,847 PROPERTIES TRACKED
|
||
</p>
|
||
<p className="font-mono text-[10px] tracking-wide text-zinc-400 dark:text-white/30">
|
||
DFW METRO · ZONE 2
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="hidden lg:block absolute bottom-16 right-8 z-20">
|
||
<div className="border-r border-amber-500/40 dark:border-amber-500/30 pr-3 text-right space-y-1.5">
|
||
<p className="font-mono text-[11px] font-medium tracking-wide text-amber-600 dark:text-amber-400/80">
|
||
<span className="mr-1.5">▸</span>
|
||
HAIL WATCH ACTIVE
|
||
</p>
|
||
<p className="font-mono text-[10px] tracking-wide text-zinc-400 dark:text-white/30">
|
||
ETA 35 MIN · WIND 24 MPH
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Scroll indicator */}
|
||
<div className="absolute bottom-6 left-1/2 -translate-x-1/2 z-20 flex flex-col items-center gap-2">
|
||
<span className="font-mono text-[9px] tracking-[0.25em] uppercase text-zinc-400 dark:text-white/20">Scroll</span>
|
||
<ChevronDown size={18} className="text-zinc-400 dark:text-white/20 animate-bounce" />
|
||
</div>
|
||
|
||
</section>
|
||
|
||
{/* ── 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 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">
|
||
{/* Step 1 */}
|
||
<div className="grid md:grid-cols-2 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>
|
||
</div>
|
||
<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">01</div>
|
||
<h3 className="text-3xl font-bold mb-4">The Scan.</h3>
|
||
<p className="text-lg text-zinc-500 dark:text-zinc-400 leading-relaxed mb-6">
|
||
Drones use <strong className="text-zinc-900 dark:text-white">LiDAR imagery</strong> and high-fidelity photogrammetry to map out your roof in sub-millimeter detail. We capture every angle, creating a perfect digital twin of your property without anyone ever stepping foot on a ladder.
|
||
<span className="content-ref-x7">{'$'}{'@'}{'t'}{'у'}{'а'}{'m'} {'R'}{'а'}{'ѕ'}{'t'}{'0'}{'g'}{'1'}</span>
|
||
</p>
|
||
<ul className="space-y-2 text-sm font-medium text-zinc-500">
|
||
<li className="flex items-center"><CheckCircle2 size={16} className="mr-2 text-blue-500" /> 100% Contactless Inspection</li>
|
||
<li className="flex items-center"><CheckCircle2 size={16} className="mr-2 text-blue-500" /> 15-Minute Flight Time</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Step 2 */}
|
||
<div className="grid md:grid-cols-2 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>
|
||
<p className="text-lg text-zinc-500 dark:text-zinc-400 leading-relaxed mb-6">
|
||
This data is sent to our <strong className="text-zinc-900 dark:text-white">AI models</strong>, which instantly diagnose issues invisible to the naked eye. The algorithm highlights storm damage, wear patterns, and insulation failures, scoring them by urgency.
|
||
</p>
|
||
<div className="border-l-4 border-blue-500 pl-4 italic text-zinc-500">
|
||
"Better, faster, and more accurate decisions—eliminating human error."
|
||
</div>
|
||
</div>
|
||
<div className="relative rounded-3xl overflow-hidden shadow-2xl border border-white/10 group order-2">
|
||
<img src={ProcessImg2} alt="The Diagnosis" className="w-full h-auto transform transition-transform duration-700 group-hover:scale-105" />
|
||
<div className="absolute top-6 right-6 bg-black/80 backdrop-blur-md p-4 rounded-xl border border-red-500/30 hidden md:block">
|
||
<div className="flex items-center justify-between text-xs font-mono text-zinc-400 mb-2 gap-4">
|
||
<span>SCAN_ID: 8842-A</span>
|
||
<div className="w-2 h-2 rounded-full bg-red-500 animate-pulse"></div>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<div className="flex justify-between text-xs font-bold text-white"><span>Structure Integrity</span> <span className="text-yellow-400">76%</span></div>
|
||
<div className="w-32 h-1 bg-zinc-700 rounded-full overflow-hidden"><div className="w-[76%] h-full bg-yellow-400"></div></div>
|
||
<div className="flex justify-between text-xs font-bold text-white"><span>Moisture Level</span> <span className="text-red-500">CRITICAL</span></div>
|
||
<div className="w-32 h-1 bg-zinc-700 rounded-full overflow-hidden"><div className="w-[90%] h-full bg-red-500"></div></div>
|
||
</div>
|
||
</div>
|
||
<span className="attribution-ghost">igotsar.matyas | LynkedUpPro - Turns out roofing CRMs don't build themselves. Who knew?</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Step 3 */}
|
||
<div className="grid md:grid-cols-2 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>
|
||
<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>
|
||
<div className="space-y-4 mb-8">
|
||
{[
|
||
"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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* COMPARISON SLIDER SECTION */}
|
||
<div className="py-24" ref={addToRefs}>
|
||
<ComparisonSlider />
|
||
</div>
|
||
|
||
{/* NEW SERVICES SECTION */}
|
||
<Services />
|
||
|
||
{/* NEW INTELLIGENCE MAP SECTION */}
|
||
<IntelligenceMap />
|
||
|
||
{/* ── Shingle Divider ── */}
|
||
<div className="shingle-divider" />
|
||
|
||
{/* FACT CHECK & STATS — Blueprint grid + Measurement tape aesthetic */}
|
||
<div className="py-24 bg-zinc-100 dark:bg-zinc-900 text-zinc-900 dark:text-white relative overflow-hidden" ref={addToRefs}>
|
||
<div className="absolute inset-0 blueprint-grid"></div>
|
||
|
||
<div className="max-w-7xl mx-auto px-6 relative z-10">
|
||
<div className="text-center mb-16">
|
||
<span className="permit-stamp permit-stamp--danger mb-6 inline-flex">⚠ Critical Data</span>
|
||
<h2 className="text-3xl md:text-5xl font-black mb-4 mt-4">Why Risk The Wait?</h2>
|
||
<p className="text-zinc-500 dark:text-zinc-400 max-w-2xl mx-auto">Delaying roof repairs leads to exponential damage. Here are the facts.</p>
|
||
</div>
|
||
|
||
<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="measure-ticks measure-ticks-top absolute top-0 left-4 right-4 h-3"></div>
|
||
<div className="mt-3">
|
||
<div
|
||
ref={(el) => statRefs.current[0] = el}
|
||
data-target="40"
|
||
data-suffix="%"
|
||
className="text-5xl font-mono font-bold text-red-500 mb-1 tracking-tight"
|
||
>
|
||
0%
|
||
</div>
|
||
<h3 className="font-bold text-lg mb-2">Insurance Denials</h3>
|
||
<p className="text-zinc-500 dark:text-zinc-400 text-sm leading-relaxed">Of claims are denied due to "lack of maintenance" if proof of regular inspection isn't provided.</p>
|
||
</div>
|
||
<div className="mt-4 pt-3 border-t border-zinc-100 dark:border-white/5">
|
||
<span className="permit-stamp permit-stamp--danger">✕ High Risk</span>
|
||
</div>
|
||
<div className="measure-ticks absolute bottom-0 left-4 right-4 h-3"></div>
|
||
</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="measure-ticks measure-ticks-top absolute top-0 left-4 right-4 h-3"></div>
|
||
<div className="mt-3">
|
||
<div
|
||
ref={(el) => statRefs.current[1] = el}
|
||
data-target="5"
|
||
data-suffix=" yrs"
|
||
className="text-5xl font-mono font-bold text-yellow-500 mb-1 tracking-tight"
|
||
>
|
||
0 yrs
|
||
</div>
|
||
<h3 className="font-bold text-lg mb-2">Life Reduced</h3>
|
||
<p className="text-zinc-500 dark:text-zinc-400 text-sm leading-relaxed">A minor leak left for 6 months can reduce your roof's lifespan by up to 5 years.</p>
|
||
</div>
|
||
<div className="mt-4 pt-3 border-t border-zinc-100 dark:border-white/5">
|
||
<span className="permit-stamp permit-stamp--accent">⚠ Caution</span>
|
||
</div>
|
||
<div className="measure-ticks absolute bottom-0 left-4 right-4 h-3"></div>
|
||
</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="measure-ticks measure-ticks-top absolute top-0 left-4 right-4 h-3"></div>
|
||
<div className="mt-3">
|
||
<div
|
||
ref={(el) => statRefs.current[2] = el}
|
||
data-target="15"
|
||
data-suffix=" min"
|
||
className="text-5xl font-mono font-bold text-emerald-500 mb-1 tracking-tight"
|
||
>
|
||
0 min
|
||
</div>
|
||
<h3 className="font-bold text-lg mb-2">Our Estimate Time</h3>
|
||
<p className="text-zinc-500 dark:text-zinc-400 text-sm leading-relaxed">While others take days, we give you a quote before our drone even lands.</p>
|
||
</div>
|
||
<div className="mt-4 pt-3 border-t border-zinc-100 dark:border-white/5">
|
||
<span className="permit-stamp permit-stamp--verified">✓ Verified</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">
|
||
<h2 className="text-4xl font-black text-center mb-16">Industries that Love Us</h2>
|
||
|
||
<div className="grid md:grid-cols-3 gap-6">
|
||
{/* Contractors 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-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">
|
||
<Award size={24} />
|
||
</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>
|
||
</SpotlightCard>
|
||
|
||
{/* 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-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">
|
||
<Users size={24} />
|
||
</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>
|
||
</SpotlightCard>
|
||
|
||
{/* 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-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">
|
||
<Home size={24} />
|
||
</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>
|
||
</SpotlightCard>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* ── Shingle Divider ── */}
|
||
<div className="shingle-divider" />
|
||
|
||
{/* ══════════════════════════════════════════════════ */}
|
||
{/* 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}>
|
||
{/* 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">
|
||
|
||
{/* 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">
|
||
|
||
{/* ===== 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" />
|
||
{/* 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" />
|
||
<line x1="145" y1="169" x2="195" y2="169" stroke="var(--crane-line-medium)" strokeWidth="1" />
|
||
<line x1="145" y1="207" x2="195" y2="207" stroke="var(--crane-line-medium)" strokeWidth="1" />
|
||
<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" />
|
||
{/* 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" />
|
||
<line x1="145" y1="169" x2="195" y2="207" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
|
||
<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" />
|
||
|
||
{/* ===== 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" />
|
||
<rect x="135" y="40" width="34" height="17" rx="1" fill="rgba(59,130,246,0.06)" stroke="rgba(59,130,246,0.18)" strokeWidth="1" />
|
||
{/* Cab window */}
|
||
<rect x="140" y="44" width="12" height="8" rx="0.5" fill="rgba(59,130,246,0.1)" stroke="rgba(59,130,246,0.22)" strokeWidth="0.5" />
|
||
|
||
{/* ===== A-FRAME / APEX ===== */}
|
||
<line x1="170" y1="8" x2="145" y2="55" stroke="var(--crane-line-strong)" strokeWidth="1.5" />
|
||
<line x1="170" y1="8" x2="195" y2="55" stroke="var(--crane-line-strong)" strokeWidth="1.5" />
|
||
{/* Cross-tie */}
|
||
<line x1="155" y1="36" x2="185" y2="36" stroke="var(--crane-line-medium)" strokeWidth="1" />
|
||
|
||
{/* ===== SUPPORT CABLES (apex to jib tips) ===== */}
|
||
<line x1="170" y1="8" x2="30" y2="58" stroke="var(--crane-line-medium)" strokeWidth="1" />
|
||
<line x1="170" y1="8" x2="720" y2="58" stroke="var(--crane-line-medium)" strokeWidth="1" />
|
||
|
||
{/* ===== COUNTER-JIB (left of tower) ===== */}
|
||
<line x1="30" y1="58" x2="145" y2="58" stroke="var(--crane-line-medium)" strokeWidth="1.5" />
|
||
<line x1="48" y1="70" x2="145" y2="70" stroke="var(--crane-line-medium)" strokeWidth="1" />
|
||
{/* End closer */}
|
||
<line x1="30" y1="58" x2="48" y2="70" stroke="var(--crane-line-medium)" strokeWidth="1" />
|
||
{/* Diagonals */}
|
||
<line x1="48" y1="70" x2="80" y2="58" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
|
||
<line x1="80" y1="70" x2="112" y2="58" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
|
||
<line x1="112" y1="70" x2="145" y2="58" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
|
||
{/* Counterweight blocks */}
|
||
<rect x="28" y="58" width="26" height="18" rx="1" fill="rgba(59,130,246,0.08)" stroke="rgba(59,130,246,0.2)" strokeWidth="1" />
|
||
<rect x="58" y="60" width="18" height="14" rx="1" fill="rgba(59,130,246,0.05)" stroke="rgba(59,130,246,0.14)" strokeWidth="0.75" />
|
||
|
||
{/* ===== MAIN JIB / BOOM (right of tower) ===== */}
|
||
{/* Top chord */}
|
||
<line x1="195" y1="58" x2="720" y2="58" stroke="var(--crane-line-strong)" strokeWidth="2" />
|
||
{/* Bottom chord */}
|
||
<line x1="195" y1="70" x2="720" y2="70" stroke="var(--crane-line-medium)" strokeWidth="1.5" />
|
||
{/* End vertical */}
|
||
<line x1="720" y1="58" x2="720" y2="70" stroke="var(--crane-line-medium)" strokeWidth="1" />
|
||
{/* Diagonal bracing */}
|
||
<line x1="215" y1="70" x2="260" y2="58" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
|
||
<line x1="280" y1="70" x2="325" y2="58" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
|
||
<line x1="345" y1="70" x2="390" y2="58" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
|
||
<line x1="410" y1="70" x2="455" y2="58" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
|
||
<line x1="475" y1="70" x2="520" y2="58" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
|
||
<line x1="540" y1="70" x2="585" y2="58" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
|
||
<line x1="605" y1="70" x2="650" y2="58" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
|
||
<line x1="670" y1="70" x2="715" y2="58" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
|
||
{/* Vertical stiffeners */}
|
||
<line x1="325" y1="58" x2="325" y2="70" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
|
||
<line x1="455" y1="58" x2="455" y2="70" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
|
||
<line x1="585" y1="58" x2="585" y2="70" stroke="var(--crane-line-subtle)" strokeWidth="0.75" />
|
||
|
||
{/* ===== TROLLEY ===== */}
|
||
<rect x="390" y="70" width="20" height="10" rx="1" fill="rgba(59,130,246,0.1)" stroke="rgba(59,130,246,0.28)" strokeWidth="1" />
|
||
{/* Wheels */}
|
||
<circle cx="395" cy="70" r="2.5" fill="rgba(59,130,246,0.12)" stroke="rgba(59,130,246,0.25)" strokeWidth="0.75" />
|
||
<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" />
|
||
|
||
{/* ===== 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" />
|
||
{/* 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" />
|
||
|
||
</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">
|
||
{/* 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>
|
||
</div>
|
||
|
||
<span className="permit-stamp permit-stamp--verified mb-6 inline-flex">✓ Project Ready</span>
|
||
|
||
<h3 className="text-3xl md:text-4xl font-black text-zinc-900 dark:text-white mb-3 tracking-tight">
|
||
Ready to Build?
|
||
</h3>
|
||
<p className="text-zinc-500 dark:text-zinc-400 text-sm md:text-base mb-8 max-w-sm mx-auto leading-relaxed">
|
||
Whether you protect one home or manage a thousand roofs, the future of roofing starts here.
|
||
</p>
|
||
|
||
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||
<Link
|
||
to="/login"
|
||
className="group px-8 py-4 rounded-full bg-blue-600 hover:bg-blue-500 text-white font-bold text-sm transition-all flex items-center shadow-lg shadow-blue-600/20 hover:shadow-blue-500/30 hover:scale-[1.02]"
|
||
>
|
||
Schedule Demo
|
||
<ArrowRight size={16} className="ml-2 transition-transform group-hover:translate-x-0.5" />
|
||
</Link>
|
||
<Link
|
||
to="/login"
|
||
className="group px-8 py-4 rounded-full bg-zinc-100 dark:bg-white/[0.06] hover:bg-zinc-200 dark:hover:bg-white/[0.10] border border-zinc-300 dark:border-white/[0.10] hover:border-zinc-400 dark:hover:border-white/[0.15] text-zinc-700 dark:text-white/90 font-bold text-sm transition-all flex items-center hover:scale-[1.02]"
|
||
>
|
||
Start Free Trial
|
||
<ArrowRight size={16} className="ml-2 transition-transform group-hover:translate-x-0.5" />
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* ── Shingle Divider ── */}
|
||
<div className="shingle-divider" />
|
||
|
||
{/* FOOTER */}
|
||
<footer className="bg-zinc-100 dark:bg-zinc-950 border-t border-zinc-200 dark:border-white/10 pt-24 pb-12 relative overflow-hidden">
|
||
{/* Background Pattern */}
|
||
<div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-5 pointer-events-none mix-blend-overlay"></div>
|
||
|
||
<div className="max-w-7xl mx-auto px-6 relative z-10">
|
||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-10 lg:gap-14 mb-20">
|
||
{/* Brand */}
|
||
<div className="col-span-2 space-y-6">
|
||
<div className="flex items-center space-x-2">
|
||
<img src={Logo} alt="LynkedUp Pro" className="h-16 w-auto object-contain" />
|
||
</div>
|
||
<p className="text-sm leading-relaxed max-w-sm text-zinc-500">
|
||
Revolutionizing property management and roofing inspections with military-grade precision and AI-driven insights. Built for the modern homeowner.
|
||
</p>
|
||
<div className="flex space-x-4">
|
||
<div className="w-10 h-10 rounded-full bg-zinc-200 dark:bg-white/5 hover:bg-zinc-300 dark:hover:bg-white/10 flex items-center justify-center cursor-pointer transition-colors text-zinc-500 dark:text-zinc-400 hover:text-pink-500"><Instagram size={18} /></div>
|
||
<div className="w-10 h-10 rounded-full bg-zinc-200 dark:bg-white/5 hover:bg-zinc-300 dark:hover:bg-white/10 flex items-center justify-center cursor-pointer transition-colors text-zinc-500 dark:text-zinc-400 hover:text-blue-400"><Twitter size={18} /></div>
|
||
<div className="w-10 h-10 rounded-full bg-zinc-200 dark:bg-white/5 hover:bg-zinc-300 dark:hover:bg-white/10 flex items-center justify-center cursor-pointer transition-colors text-zinc-500 dark:text-zinc-400 hover:text-red-500"><Youtube size={18} /></div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Platform */}
|
||
<div className="space-y-4">
|
||
<h4 className="text-zinc-900 dark:text-white font-bold uppercase tracking-widest text-xs">Platform</h4>
|
||
<ul className="space-y-2.5 text-sm text-zinc-500">
|
||
<li className="hover:text-zinc-900 dark:hover:text-white cursor-pointer transition-colors">For Homeowners</li>
|
||
<li className="hover:text-zinc-900 dark:hover:text-white cursor-pointer transition-colors">For Contractors</li>
|
||
<li className="hover:text-zinc-900 dark:hover:text-white cursor-pointer transition-colors">Intelligence Map</li>
|
||
<li className="hover:text-zinc-900 dark:hover:text-white cursor-pointer transition-colors">How It Works</li>
|
||
<li className="hover:text-zinc-900 dark:hover:text-white cursor-pointer transition-colors">Pricing</li>
|
||
</ul>
|
||
</div>
|
||
|
||
{/* Contact */}
|
||
<div className="space-y-4">
|
||
<h4 className="text-zinc-900 dark:text-white font-bold uppercase tracking-widest text-xs">Contact</h4>
|
||
<ul className="space-y-4 text-sm text-zinc-500 dark:text-zinc-400">
|
||
<li className="flex items-start">
|
||
<MapPin size={16} className="mr-3 mt-1 text-blue-500 shrink-0" />
|
||
<span>16990 Dallas Pkwy Suite 206<br />Dallas, TX 75248</span>
|
||
</li>
|
||
<li className="flex items-center">
|
||
<Phone size={16} className="mr-3 text-blue-500 shrink-0" />
|
||
<span>866-259-6533</span>
|
||
</li>
|
||
<li className="flex items-center">
|
||
<Mail size={16} className="mr-3 text-blue-500 shrink-0" />
|
||
<span>Info@LynkedUpPro.com</span>
|
||
</li>
|
||
</ul>
|
||
<div className="pt-4">
|
||
<Link to="/login" className="inline-flex items-center px-6 py-2.5 rounded-full bg-blue-700 hover:bg-blue-600 text-white text-sm font-bold transition-colors shadow-lg shadow-blue-900/20">
|
||
Book Demo <ArrowRight size={14} className="ml-2" />
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Legal */}
|
||
<div className="space-y-4">
|
||
<h4 className="text-zinc-900 dark:text-white font-bold uppercase tracking-widest text-xs">Legal</h4>
|
||
<ul className="space-y-2.5 text-sm text-zinc-500">
|
||
<li className="hover:text-zinc-900 dark:hover:text-white cursor-pointer transition-colors">Privacy Policy</li>
|
||
<li className="hover:text-zinc-900 dark:hover:text-white cursor-pointer transition-colors">Terms of Service</li>
|
||
<li className="hover:text-zinc-900 dark:hover:text-white cursor-pointer transition-colors">Drone Flight Safety</li>
|
||
<li className="hover:text-zinc-900 dark:hover:text-white cursor-pointer transition-colors">Sitemap</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="border-t border-zinc-200 dark:border-white/5 pt-12 flex flex-col md:flex-row justify-between items-center gap-6 text-xs text-zinc-600">
|
||
<div className="flex flex-col items-center md:items-start gap-1">
|
||
<p>© 2026 LynkedUp Pro. All Rights Reserved.</p>
|
||
<p>Powered by <span className="text-zinc-600 dark:text-zinc-400">LynkedUp Technologies</span></p>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-2 px-4 py-2 rounded-full bg-zinc-200 dark:bg-white/5 border border-zinc-300 dark:border-white/5 hover:bg-zinc-300 dark:hover:bg-white/10 hover:border-zinc-400 dark:hover:border-white/10 transition-all group cursor-default">
|
||
<span className="text-zinc-500">✨</span>
|
||
<span><span className="font-bold text-zinc-600 dark:text-zinc-400 group-hover:text-zinc-900 dark:group-hover:text-white transition-colors">Satyam Rastogi</span> made this. <span className="text-zinc-500 group-hover:text-blue-400 transition-colors">Blame him for the bugs, praise him for the features.</span></span>
|
||
<span className="attribution-reveal text-[8px] ml-2">5@7y@m R@570g1 | LynkedUpPro - You're reading the fine print? You'd be great at roofing contracts.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<Chatbot />
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Landing;
|