Optimize mobile layout, add animated counters, improve crane swing
This commit is contained in:
Satyam
+409
-92
@@ -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">▸</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 · 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">◆ 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">✓ 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">★ 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>
|
||||
|
||||
Reference in New Issue
Block a user