Refactor landing page sections and map per user feedback
This commit is contained in:
Satyam
+109
-28
@@ -16,7 +16,6 @@ import HeroImg from '../assets/images/hero.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 TestimonialsImg from '../assets/images/testimonials.png';
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger);
|
||||
|
||||
@@ -289,9 +288,23 @@ const Landing = () => {
|
||||
<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">
|
||||
Generate property assessment reports and repair estimates within minutes of inspection. AI-verified analysis documents visible damage using clear, objective evidence. Reports can be shared with property owners or used in insurance discussions. All findings are based on measurable data, not opinions. Our goal is simple: equip field representatives with the latest technology and verified evidence so they can operate with confidence, gain a competitive edge, and ensure all parties work from the same factual record.
|
||||
</p>
|
||||
<div className="space-y-4 mb-8">
|
||||
{[
|
||||
"Generate property assessment reports & repair estimates in minutes.",
|
||||
"Document visible damage using AI-verified, objective evidence.",
|
||||
"Share reports with property owners or insurance instantly.",
|
||||
"Base all findings on measurable inspection data, not opinions.",
|
||||
"Equip field reps with verified evidence to operate with confidence.",
|
||||
"Provide a single, factual record all parties can rely on."
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex items-start">
|
||||
<div className="mt-0.5 bg-blue-500/10 dark:bg-blue-500/20 p-2 rounded-lg text-blue-600 dark:text-blue-400 shrink-0 mr-4">
|
||||
<CheckCircle2 size={22} strokeWidth={3} />
|
||||
</div>
|
||||
<p className="text-sm text-zinc-600 dark:text-zinc-300 font-medium leading-relaxed">{item}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
<span className="px-3 py-1 bg-red-100 dark:bg-red-900/20 text-red-600 dark:text-red-400 text-xs font-bold uppercase rounded-md">Cost Efficient</span>
|
||||
<span className="px-3 py-1 bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 text-xs font-bold uppercase rounded-md">Data-Backed</span>
|
||||
@@ -343,47 +356,115 @@ const Landing = () => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* TESTIMONIALS */}
|
||||
{/* INDUSTRIES THAT LOVE US */}
|
||||
<div className="py-32" ref={addToRefs}>
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
<h2 className="text-4xl font-black text-center mb-16">Neighbors Who Love Us</h2>
|
||||
<h2 className="text-4xl font-black text-center mb-16">Industries that 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]">
|
||||
{/* Contractors Card */}
|
||||
<SpotlightCard className="p-8 h-full bg-zinc-50 dark:bg-[#0A0A0A] border-zinc-200 dark:border-zinc-800">
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<img src={TestimonialsImg} 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 className="w-12 h-12 rounded-xl bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400">
|
||||
<Award size={24} />
|
||||
</div>
|
||||
<h4 className="font-bold text-xl">Contractors</h4>
|
||||
</div>
|
||||
<p className="text-sm text-zinc-500 mb-6 min-h-[40px]">
|
||||
Contractors live and die by speed, quality workmanship, and trust; that’s exactly what LynkedUp delivers.
|
||||
</p>
|
||||
<ul className="space-y-3 mb-8">
|
||||
<li className="flex items-start text-sm text-zinc-600 dark:text-zinc-400">
|
||||
<CheckCircle2 size={16} className="mr-2 mt-0.5 text-blue-500 shrink-0" />
|
||||
<span>Faster insurance approvals through time-stamped, geo-verified capture.</span>
|
||||
</li>
|
||||
<li className="flex items-start text-sm text-zinc-600 dark:text-zinc-400">
|
||||
<CheckCircle2 size={16} className="mr-2 mt-0.5 text-blue-500 shrink-0" />
|
||||
<span>Fewer chargebacks & denials with irrefutable evidence.</span>
|
||||
</li>
|
||||
<li className="flex items-start text-sm text-zinc-600 dark:text-zinc-400">
|
||||
<CheckCircle2 size={16} className="mr-2 mt-0.5 text-blue-500 shrink-0" />
|
||||
<span>Shorter sales cycles — homeowners trust what they can see.</span>
|
||||
</li>
|
||||
<li className="flex items-start text-sm text-zinc-600 dark:text-zinc-400">
|
||||
<CheckCircle2 size={16} className="mr-2 mt-0.5 text-blue-500 shrink-0" />
|
||||
<span>More profitable jobs with accurate scopes.</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="pt-6 border-t border-zinc-200 dark:border-zinc-800">
|
||||
<p className="text-xs font-bold text-zinc-400 uppercase tracking-wider">Result</p>
|
||||
<p className="text-sm font-semibold text-zinc-700 dark:text-zinc-300">One system replaces 5–7 tools.</p>
|
||||
</div>
|
||||
<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]">
|
||||
{/* Asset Managers Card */}
|
||||
<SpotlightCard className="p-8 h-full bg-zinc-50 dark:bg-[#0A0A0A] border-zinc-200 dark:border-zinc-800">
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<div className="w-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 className="w-12 h-12 rounded-xl bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center text-purple-600 dark:text-purple-400">
|
||||
<Users size={24} />
|
||||
</div>
|
||||
<h4 className="font-bold text-xl">Asset Managers</h4>
|
||||
</div>
|
||||
<p className="text-sm text-zinc-500 mb-6 min-h-[40px]">
|
||||
Asset managers care about risk reduction, documentation, and long-term asset value, not sales hype.
|
||||
</p>
|
||||
<ul className="space-y-3 mb-8">
|
||||
<li className="flex items-start text-sm text-zinc-600 dark:text-zinc-400">
|
||||
<CheckCircle2 size={16} className="mr-2 mt-0.5 text-purple-500 shrink-0" />
|
||||
<span>Verified condition records for every property.</span>
|
||||
</li>
|
||||
<li className="flex items-start text-sm text-zinc-600 dark:text-zinc-400">
|
||||
<CheckCircle2 size={16} className="mr-2 mt-0.5 text-purple-500 shrink-0" />
|
||||
<span>Audit-ready documentation for lenders & investors.</span>
|
||||
</li>
|
||||
<li className="flex items-start text-sm text-zinc-600 dark:text-zinc-400">
|
||||
<CheckCircle2 size={16} className="mr-2 mt-0.5 text-purple-500 shrink-0" />
|
||||
<span>Reduced fraud exposure — no undocumented claims.</span>
|
||||
</li>
|
||||
<li className="flex items-start text-sm text-zinc-600 dark:text-zinc-400">
|
||||
<CheckCircle2 size={16} className="mr-2 mt-0.5 text-purple-500 shrink-0" />
|
||||
<span>Remote visibility across portfolios.</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="pt-6 border-t border-zinc-200 dark:border-zinc-800">
|
||||
<p className="text-xs font-bold text-zinc-400 uppercase tracking-wider">Net Effect</p>
|
||||
<p className="text-sm font-semibold text-zinc-700 dark:text-zinc-300">A digital twin that reduces capital risk.</p>
|
||||
</div>
|
||||
<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]">
|
||||
{/* Homeowners Card */}
|
||||
<SpotlightCard className="p-8 h-full bg-zinc-50 dark:bg-[#0A0A0A] border-zinc-200 dark:border-zinc-800">
|
||||
<div className="flex items-center gap-4 mb-6">
|
||||
<div className="w-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 className="w-12 h-12 rounded-xl bg-emerald-100 dark:bg-emerald-900/30 flex items-center justify-center text-emerald-600 dark:text-emerald-400">
|
||||
<Home size={24} />
|
||||
</div>
|
||||
<h4 className="font-bold text-xl">Homeowners</h4>
|
||||
</div>
|
||||
<p className="text-sm text-zinc-500 mb-6 min-h-[40px]">
|
||||
Homeowners want protection and clarity, not pressure. We give them exactly that.
|
||||
</p>
|
||||
<ul className="space-y-3 mb-8">
|
||||
<li className="flex items-start text-sm text-zinc-600 dark:text-zinc-400">
|
||||
<CheckCircle2 size={16} className="mr-2 mt-0.5 text-emerald-500 shrink-0" />
|
||||
<span>Clear, visual proof instead of confusing explanations.</span>
|
||||
</li>
|
||||
<li className="flex items-start text-sm text-zinc-600 dark:text-zinc-400">
|
||||
<CheckCircle2 size={16} className="mr-2 mt-0.5 text-emerald-500 shrink-0" />
|
||||
<span>Transparency — see what’s submitted to insurance.</span>
|
||||
</li>
|
||||
<li className="flex items-start text-sm text-zinc-600 dark:text-zinc-400">
|
||||
<CheckCircle2 size={16} className="mr-2 mt-0.5 text-emerald-500 shrink-0" />
|
||||
<span>Faster claim resolution with fewer surprises.</span>
|
||||
</li>
|
||||
<li className="flex items-start text-sm text-zinc-600 dark:text-zinc-400">
|
||||
<CheckCircle2 size={16} className="mr-2 mt-0.5 text-emerald-500 shrink-0" />
|
||||
<span>Permanent property record for resale value.</span>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="pt-6 border-t border-zinc-200 dark:border-zinc-800">
|
||||
<p className="text-xs font-bold text-zinc-400 uppercase tracking-wider">Feeling</p>
|
||||
<p className="text-sm font-semibold text-zinc-700 dark:text-zinc-300">Informed, protected, and confident.</p>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user