feat: Release CRM V2 (Clean History)
Squashed commits for V2 release including Dark Mode, Chatbot, and Landing Page enhancements.
This commit is contained in:
Satyam
@@ -0,0 +1,307 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import Chatbot from '../components/Chatbot';
|
||||
import { useAuth } from '../context/AuthContext';
|
||||
import { ArrowRight, CheckCircle2, Home, Star, ShieldCheck, Clock, Award, TrendingDown, Users } from 'lucide-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { SpotlightCard } from '../components/SpotlightCard';
|
||||
import { ComparisonSlider } from '../components/ComparisonSlider';
|
||||
import gsap from 'gsap';
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger';
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
const Landing = () => {
|
||||
const { user } = useAuth();
|
||||
const heroRef = useRef(null);
|
||||
const textRef = useRef(null);
|
||||
const sectionsRef = useRef([]);
|
||||
|
||||
useEffect(() => {
|
||||
// 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%",
|
||||
}
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
}, []);
|
||||
|
||||
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">
|
||||
|
||||
{/* 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>
|
||||
|
||||
{/* 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">
|
||||
<div className="w-8 h-8 bg-black dark:bg-white rounded-lg flex items-center justify-center shadow-lg">
|
||||
<Home size={16} className="text-white dark:text-black" />
|
||||
</div>
|
||||
<span className="text-xl font-bold tracking-tight">LynkedUpPro</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
|
||||
{!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={user.role === 'customer' ? '/' : '/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">
|
||||
Dashboard
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* HERO SECTION */}
|
||||
<div className="relative pt-32 pb-40 overflow-hidden" ref={heroRef}>
|
||||
{/* Background Image with Overlay */}
|
||||
<div className="absolute inset-0 z-0">
|
||||
<img src="/src/assets/images/hero.png" alt="Modern Roof" className="w-full h-full object-cover opacity-20 dark:opacity-40" />
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-transparent via-zinc-50/80 to-zinc-50 dark:via-[#050505]/80 dark:to-[#050505]"></div>
|
||||
</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>
|
||||
Proudly American • Made by Americans, For Americans
|
||||
</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">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">
|
||||
Automated drone inspections. Instant AI estimates.
|
||||
<br className="hidden md:block" />
|
||||
Restoring your home's integrity with 20+ years of precision.
|
||||
</p>
|
||||
|
||||
<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">
|
||||
Get Free Estimate
|
||||
<ArrowRight size={18} className="ml-2" />
|
||||
</Link>
|
||||
<button 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
|
||||
</button>
|
||||
</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">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{/* Satisfaction Badges */}
|
||||
<div className="mt-12 flex items-center justify-center gap-8 opacity-70 grayscale hover:grayscale-0 transition-all duration-500">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="flex -space-x-2">
|
||||
<div className="w-8 h-8 rounded-full bg-gray-300 border-2 border-white dark:border-black"></div>
|
||||
<div className="w-8 h-8 rounded-full bg-gray-400 border-2 border-white dark:border-black"></div>
|
||||
<div className="w-8 h-8 rounded-full bg-gray-500 border-2 border-white dark:border-black"></div>
|
||||
</div>
|
||||
<span className="text-xs font-bold">500+ Happy Homes</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<ShieldCheck size={16} />
|
||||
<span className="text-xs font-bold">Licensed & Insured</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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="/src/assets/images/process.png" 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.
|
||||
</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="/src/assets/images/process-2.png" 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>
|
||||
</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="/src/assets/images/process-3.png" 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>
|
||||
<p className="text-lg text-zinc-500 dark:text-zinc-400 leading-relaxed mb-6">
|
||||
Armed with precise data, our certified ground team executes the repair cheaply and effectively. Homeowners are assured and relaxed, knowing they are getting the best of the best.
|
||||
</p>
|
||||
<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>
|
||||
|
||||
{/* 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>
|
||||
|
||||
<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>
|
||||
</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 className="text-4xl font-black text-red-500 mb-2">40%</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>
|
||||
<div className="bg-white/5 p-8 rounded-3xl border border-white/10 hover:bg-white/10 transition-colors">
|
||||
<div className="text-4xl font-black text-yellow-500 mb-2">5yrs</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>
|
||||
<div className="bg-white/5 p-8 rounded-3xl border border-white/10 hover:bg-white/10 transition-colors">
|
||||
<div className="text-4xl font-black text-green-500 mb-2">15m</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* TESTIMONIALS */}
|
||||
<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">Neighbors Who Love Us</h2>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{/* Senior/Veteran Testimonial */}
|
||||
<SpotlightCard className="p-8 h-full bg-zinc-50 dark:bg-[#0A0A0A]">
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<img src="/src/assets/images/testimonials.png" alt="Veterans" className="w-16 h-16 rounded-full object-cover border-2 border-emerald-500" />
|
||||
<div>
|
||||
<h4 className="font-bold">The Hendersons</h4>
|
||||
<p className="text-xs text-zinc-500">Retired Veterans • Plano, TX</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex text-yellow-500 mb-4"><Star size={16} fill="currentColor" /><Star size={16} fill="currentColor" /><Star size={16} fill="currentColor" /><Star size={16} fill="currentColor" /><Star size={16} fill="currentColor" /></div>
|
||||
<p className="text-zinc-600 dark:text-zinc-400 italic">"The veteran discount was such a blessing. They found a leak our previous inspector missed completely. The drone technology was fascinating to watch!"</p>
|
||||
</SpotlightCard>
|
||||
|
||||
<SpotlightCard className="p-8 h-full bg-zinc-50 dark:bg-[#0A0A0A]">
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<div className="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center font-bold text-blue-600 text-xl">JD</div>
|
||||
<div>
|
||||
<h4 className="font-bold">James D.</h4>
|
||||
<p className="text-xs text-zinc-500">Homeowner • Frisco, TX</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex text-yellow-500 mb-4"><Star size={16} fill="currentColor" /><Star size={16} fill="currentColor" /><Star size={16} fill="currentColor" /><Star size={16} fill="currentColor" /><Star size={16} fill="currentColor" /></div>
|
||||
<p className="text-zinc-600 dark:text-zinc-400 italic">"I requested a quote at 9am and had the repair scheduled by noon. The transparency with the 3D model made me feel confident in the price."</p>
|
||||
</SpotlightCard>
|
||||
|
||||
<SpotlightCard className="p-8 h-full bg-zinc-50 dark:bg-[#0A0A0A]">
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<div className="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center font-bold text-purple-600 text-xl">SM</div>
|
||||
<div>
|
||||
<h4 className="font-bold">Sarah M.</h4>
|
||||
<p className="text-xs text-zinc-500">Investor • Dallas, TX</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex text-yellow-500 mb-4"><Star size={16} fill="currentColor" /><Star size={16} fill="currentColor" /><Star size={16} fill="currentColor" /><Star size={16} fill="currentColor" /><Star size={16} fill="currentColor" /></div>
|
||||
<p className="text-zinc-600 dark:text-zinc-400 italic">"Managing 5 properties is hard. LynkedUpPro makes it easy. I can see the roof status of all my houses on my dashboard. Incredible tool."</p>
|
||||
</SpotlightCard>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Chatbot />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Landing;
|
||||
Reference in New Issue
Block a user