feat: Revamped design - improved dark mode visibility, mobile UX fixes, updated trust signals
This commit is contained in:
Satyam
+386
-106
@@ -1,8 +1,8 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import Chatbot from '../components/Chatbot';
|
||||
import { useAuth } from '../context/AuthContext';
|
||||
import { useTheme } from '../context/ThemeContext'; // Import useTheme
|
||||
import { ArrowRight, CheckCircle2, Home, Star, ShieldCheck, Clock, Award, TrendingDown, Users, MapPin, Phone, Mail, Instagram, Twitter, Youtube, Sun, Moon, LogOut, LayoutDashboard, User, Menu, X } from 'lucide-react';
|
||||
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';
|
||||
@@ -12,7 +12,7 @@ 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.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';
|
||||
@@ -27,6 +27,19 @@ const Landing = () => {
|
||||
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)
|
||||
@@ -56,32 +69,29 @@ const Landing = () => {
|
||||
);
|
||||
});
|
||||
|
||||
// Animated Stat Counters
|
||||
// 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 };
|
||||
|
||||
gsap.fromTo(el,
|
||||
{ innerText: 0 },
|
||||
{
|
||||
innerText: target,
|
||||
duration: 2,
|
||||
ease: "power1.out",
|
||||
scrollTrigger: {
|
||||
trigger: el,
|
||||
start: "top 85%",
|
||||
toggleActions: "play none none none",
|
||||
},
|
||||
snap: { innerText: suffix === '%' ? 1 : 0.1 },
|
||||
onUpdate: function () {
|
||||
const value = this.targets()[0].innerText;
|
||||
const formattedValue = suffix === '%' ? Math.ceil(value) : Math.ceil(value);
|
||||
el.innerText = formattedValue + suffix;
|
||||
}
|
||||
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;
|
||||
}
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
}, []);
|
||||
@@ -95,8 +105,15 @@ const Landing = () => {
|
||||
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">
|
||||
|
||||
{/* DITHER EFFECT - Fixed Overlay */}
|
||||
<div className="fixed inset-0 pointer-events-none z-50 opacity-[0.03] dark:opacity-[0.05]" style={{ backgroundImage: 'url("data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.65%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22/%3E%3C/svg%3E")' }}></div>
|
||||
{/* 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">
|
||||
@@ -188,54 +205,124 @@ const Landing = () => {
|
||||
)}
|
||||
</nav>
|
||||
|
||||
{/* HERO SECTION */}
|
||||
<div className="relative min-h-[90vh] flex items-center justify-center pt-32 pb-40 overflow-hidden" ref={heroRef}>
|
||||
{/* Background Image with Overlay */}
|
||||
{/* ============================================ */}
|
||||
{/* 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="Modern Roof" className="w-full h-full object-cover object-[center_35%] scale-110 opacity-20 dark:opacity-40" />
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-zinc-50/50 to-zinc-50 dark:via-[#050505]/50 dark:to-[#050505]"></div>
|
||||
<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>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-6 relative z-10 text-center" ref={textRef}>
|
||||
<div className="inline-flex items-center px-4 py-1.5 rounded-full bg-blue-50 dark:bg-blue-900/20 border border-blue-100 dark:border-blue-500/20 text-[10px] font-bold tracking-widest uppercase mb-8 backdrop-blur-sm shadow-sm text-blue-800 dark:text-blue-300">
|
||||
<span className="mr-2 text-base">🇺🇸</span>
|
||||
Crafted to Level the Field for Those Who Build America
|
||||
{/* 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>
|
||||
|
||||
<h1 className="text-6xl md:text-9xl font-black tracking-tighter mb-6 leading-[0.9]">
|
||||
ROOFING <br />
|
||||
<span className="text-transparent bg-clip-text bg-gradient-to-b from-blue-700 to-red-600 dark:from-blue-400 dark:to-red-400 text-4xl md:text-9xl">REVOLUTIONIZED</span>
|
||||
{/* 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>
|
||||
|
||||
<p className="text-xl md:text-2xl text-zinc-500 dark:text-zinc-400 max-w-2xl mx-auto mb-12 font-medium">
|
||||
{/* 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 className="hidden md:block" />
|
||||
Restoring your home's integrity with 20+ years of precision.
|
||||
<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">
|
||||
<Link to="/login" className="px-8 py-4 rounded-full bg-blue-700 hover:bg-blue-800 text-white font-bold transition-all flex items-center shadow-lg shadow-blue-600/20 hover:scale-105 ring-4 ring-blue-500/10 dark:ring-blue-400/10">
|
||||
{/* 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" />
|
||||
<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>
|
||||
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank" rel="noopener noreferrer" className="px-8 py-4 rounded-full bg-zinc-100 dark:bg-white/5 border border-zinc-200 dark:border-white/10 hover:bg-zinc-200 dark:hover:bg-white/10 font-semibold transition-colors">
|
||||
See The Process
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{/* Patriotic Discount Banner */}
|
||||
<div className="max-w-md mx-auto bg-white/50 dark:bg-zinc-900/50 backdrop-blur-md rounded-2xl border border-red-100 dark:border-red-900/30 p-4 flex items-center justify-center space-x-4 shadow-sm">
|
||||
<div className="w-10 h-10 rounded-full bg-red-100 dark:bg-red-900/20 flex items-center justify-center text-red-600 dark:text-red-400">
|
||||
{/* 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-left">
|
||||
<h3 className="font-bold text-sm text-zinc-900 dark:text-white">Active Duty, Veterans & Seniors</h3>
|
||||
<p className="text-xs text-zinc-500 dark:text-zinc-400">Get an exclusive <span className="text-red-600 dark:text-red-400 font-bold">15% Discount</span> on all services.</p>
|
||||
<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>
|
||||
</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}>
|
||||
@@ -342,57 +429,90 @@ const Landing = () => {
|
||||
{/* NEW INTELLIGENCE MAP SECTION */}
|
||||
<IntelligenceMap />
|
||||
|
||||
{/* FACT CHECK & STATS */}
|
||||
<div className="py-24 bg-zinc-900 text-white relative overflow-hidden" ref={addToRefs}>
|
||||
<div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-10"></div>
|
||||
{/* ── 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">
|
||||
<h2 className="text-3xl md:text-5xl font-black mb-4">Why Risk The Wait?</h2>
|
||||
<p className="text-zinc-400 max-w-2xl mx-auto">Delaying roof repairs leads to exponential damage. Here are the facts.</p>
|
||||
<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">
|
||||
<div className="bg-white/5 p-8 rounded-3xl border border-white/10 hover:bg-white/10 transition-colors">
|
||||
<div
|
||||
ref={(el) => statRefs.current[0] = el}
|
||||
data-target="40"
|
||||
data-suffix="%"
|
||||
className="text-4xl font-black text-red-500 mb-2"
|
||||
>
|
||||
0%
|
||||
{/* 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>
|
||||
<h3 className="font-bold text-xl mb-2">Insurance Denials</h3>
|
||||
<p className="text-zinc-400 text-sm">Of claims are denied due to "lack of maintenance" if proof of regular inspection isn't provided.</p>
|
||||
<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>
|
||||
<div className="bg-white/5 p-8 rounded-3xl border border-white/10 hover:bg-white/10 transition-colors">
|
||||
<div
|
||||
ref={(el) => statRefs.current[1] = el}
|
||||
data-target="5"
|
||||
data-suffix="yrs"
|
||||
className="text-4xl font-black text-yellow-500 mb-2"
|
||||
>
|
||||
0yrs
|
||||
|
||||
{/* 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>
|
||||
<h3 className="font-bold text-xl mb-2">Life Reduced</h3>
|
||||
<p className="text-zinc-400 text-sm">A minor leak left for 6 months can reduce your roof's lifespan by up to 5 years.</p>
|
||||
<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>
|
||||
<div className="bg-white/5 p-8 rounded-3xl border border-white/10 hover:bg-white/10 transition-colors">
|
||||
<div
|
||||
ref={(el) => statRefs.current[2] = el}
|
||||
data-target="15"
|
||||
data-suffix="m"
|
||||
className="text-4xl font-black text-green-500 mb-2"
|
||||
>
|
||||
0m
|
||||
|
||||
{/* 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>
|
||||
<h3 className="font-bold text-xl mb-2">Our Estimate Time</h3>
|
||||
<p className="text-zinc-400 text-sm">While others take days, we give you a quote before our drone even lands.</p>
|
||||
<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">
|
||||
@@ -507,31 +627,190 @@ const Landing = () => {
|
||||
</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-950 border-t border-white/10 pt-24 pb-12 relative overflow-hidden">
|
||||
<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 md:grid-cols-4 gap-12 mb-20">
|
||||
<div className="col-span-1 md:col-span-2 space-y-6">
|
||||
<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" />
|
||||
{/* Removed: <span className="text-xl font-bold text-white tracking-tight">LynkedUp Pro</span> */}
|
||||
</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-white/5 hover:bg-white/10 flex items-center justify-center cursor-pointer transition-colors text-zinc-400 hover:text-pink-500"><Instagram size={18} /></div>
|
||||
<div className="w-10 h-10 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center cursor-pointer transition-colors text-zinc-400 hover:text-blue-400"><Twitter size={18} /></div>
|
||||
<div className="w-10 h-10 rounded-full bg-white/5 hover:bg-white/10 flex items-center justify-center cursor-pointer transition-colors text-zinc-400 hover:text-red-500"><Youtube 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-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-white font-bold uppercase tracking-widest text-xs">Contact</h4>
|
||||
<ul className="space-y-4 text-sm text-zinc-400">
|
||||
<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>
|
||||
@@ -552,26 +831,27 @@ const Landing = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Legal */}
|
||||
<div className="space-y-4">
|
||||
<h4 className="text-white font-bold uppercase tracking-widest text-xs">Legal</h4>
|
||||
<ul className="space-y-2 text-sm text-zinc-500">
|
||||
<li className="hover:text-white cursor-pointer transition-colors">Privacy Policy</li>
|
||||
<li className="hover:text-white cursor-pointer transition-colors">Terms of Service</li>
|
||||
<li className="hover:text-white cursor-pointer transition-colors">Drone Flight Safety</li>
|
||||
<li className="hover:text-white cursor-pointer transition-colors">Sitemap</li>
|
||||
<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-white/5 pt-12 flex flex-col md:flex-row justify-between items-center gap-6 text-xs text-zinc-600">
|
||||
<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-400">LynkedUp Technologies</span></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-white/5 border border-white/5 hover:bg-white/10 hover:border-white/10 transition-all group cursor-default">
|
||||
<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-400 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><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>
|
||||
|
||||
Reference in New Issue
Block a user