Skip to content

Commit 3dd8e3a

Browse files
ritesh-1918ritesh-1918
committed
feat: premium interactive 'How It Works' section with journey-based animations
1 parent aa4f67c commit 3dd8e3a

File tree

1 file changed

+144
-49
lines changed

1 file changed

+144
-49
lines changed

‎Frontend/src/pages/LandingPage.jsx‎

Lines changed: 144 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
import React, { useRef, useEffect, useState } from 'react';
2+
import { motion, AnimatePresence } from 'framer-motion';
23
import { useNavigate } from 'react-router-dom';
34
import {
45
Menu, X, Check, Activity,
56
MapPin, AlertCircle, Folder, Zap, Bot, ArrowRight,
67
Clock, CheckCircle,
7-
Star, Twitter, Linkedin, Github, Globe,
8+
Star, Twitter, Linkedin, Github, Globe, MessageSquare,
89
Mail, Search, Bell, Play, ChevronRight,
910
Shield, Lock, Network, HardDrive, Cpu, Copy,
1011
Users, BarChart3, Inbox, Building2, BrainCircuit
@@ -108,6 +109,72 @@ export default function LandingPage() {
108109
const [isMenuOpen, setIsMenuOpen] = useState(false);
109110
const [showDemo, setShowDemo] = useState(false);
110111
const [billingAnnual, setBillingAnnual] = useState(false);
112+
const [activeStep, setActiveStep] = useState(0);
113+
114+
const steps = [
115+
{
116+
num: '01',
117+
title: 'Messy User Input',
118+
label: 'The Problem',
119+
desc: 'Users describe issues in natural language, often lacking critical details or context.',
120+
color: 'blue',
121+
icon: MessageSquare,
122+
visual: (
123+
<div className="space-y-4">
124+
<div className="bg-white/5 border border-white/10 rounded-2xl p-4 max-w-[80%] float-left animate-in slide-in-from-left duration-500">
125+
<p className="text-sm text-blue-200 italic font-medium">"Hey support, the wifi in downstream lab 3 is acting up again. Can't connect. Need fixed ASAP!"</p>
126+
</div>
127+
</div>
128+
)
129+
},
130+
{
131+
num: '02',
132+
title: 'Neural Analysis',
133+
label: 'The Brain',
134+
desc: 'AI parses intent, extracts entities (Lab 3), and detects urgency (ASAP) in milliseconds.',
135+
color: 'emerald',
136+
icon: Bot,
137+
visual: (
138+
<div className="relative flex flex-col items-center justify-center h-full gap-4">
139+
<div className="w-24 h-24 bg-emerald-500/20 rounded-full border border-emerald-500/30 flex items-center justify-center animate-pulse">
140+
<Zap className="w-10 h-10 text-emerald-400" />
141+
</div>
142+
<div className="grid grid-cols-2 gap-2 w-full">
143+
<div className="bg-emerald-500/10 border border-emerald-500/20 p-2 rounded text-[10px] text-emerald-300 font-bold uppercase tracking-widest text-center">Category: Network</div>
144+
<div className="bg-emerald-500/10 border border-emerald-500/20 p-2 rounded text-[10px] text-emerald-300 font-bold uppercase tracking-widest text-center">Priority: High</div>
145+
</div>
146+
</div>
147+
)
148+
},
149+
{
150+
num: '03',
151+
title: 'Smart Resolution',
152+
label: 'The Solution',
153+
desc: 'AI either resolves the ticket using history or routes it with full context to the right human team.',
154+
color: 'purple',
155+
icon: CheckCircle,
156+
visual: (
157+
<div className="space-y-4">
158+
<div className="bg-white rounded-2xl shadow-xl overflow-hidden border border-emerald-100">
159+
<div className="bg-emerald-500 px-4 py-2 flex justify-between items-center">
160+
<span className="text-[10px] font-black text-white uppercase tracking-widest">Ticket #4029</span>
161+
<span className="text-[10px] font-bold text-white/80">RESOLVED</span>
162+
</div>
163+
<div className="p-4">
164+
<div className="flex items-center gap-2 mb-2">
165+
<div className="w-6 h-6 bg-emerald-100 rounded-full flex items-center justify-center">
166+
<Bot className="w-3.5 h-3.5 text-emerald-600" />
167+
</div>
168+
<span className="text-xs font-bold text-gray-800 italic">HelpDesk AI Assistant</span>
169+
</div>
170+
<p className="text-[11px] text-gray-600 leading-tight">"Remotely reset the Lab 3 router. Connectivity restored. Total downtime: 143ms."</p>
171+
</div>
172+
</div>
173+
<div className="text-center text-xs text-white/40 font-medium">Auto-closed in 2 seconds</div>
174+
</div>
175+
)
176+
}
177+
];
111178

112179
useEffect(() => {
113180
if (!loading && user && profile) {
@@ -514,57 +581,85 @@ export default function LandingPage() {
514581
</section>
515582

516583
{/* ==================== HOW IT WORKS ==================== */}
517-
<section className="bg-emerald-900 py-24 text-white overflow-hidden" id="how-it-works">
518-
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
519-
<div className="text-center mb-16">
520-
<h2 className="text-3xl md:text-5xl font-bold mb-4">Built for Speed & Intelligence</h2>
521-
<p className="text-white/70 text-lg max-w-2xl mx-auto">From messy complaint to resolved ticket in seconds.</p>
522-
</div>
523-
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
524-
<div className="space-y-12">
525-
{[
526-
{ num: '1', title: 'User Reports an Issue', desc: 'User writes: "WiFi not working in lab 3". Can include screenshots or files.' },
527-
{ num: '2', title: 'AI Analyzes Instantly', items: ['Detects Category (Network)', 'Sets Priority (High)', 'Extracts Details (Location: Lab 3)'] },
528-
{ num: '3', title: 'Smart Resolution', desc: 'Simple issues are fixed by the AI chatbot. Complex ones are routed to the right team with full context.' },
529-
].map(({ num, title, desc, items }) => (
530-
<div key={num} className="relative pl-8 border-l-2 border-white/20">
531-
<span className="absolute -left-[9px] top-0 w-4 h-4 rounded-full bg-emerald-500 ring-4 ring-emerald-900" />
532-
<h3 className="text-xl font-bold text-white mb-2">{num}. {title}</h3>
533-
{desc && <p className="text-white/70">{desc}</p>}
534-
{items && (
535-
<ul className="space-y-2 mt-2 text-white/70">
536-
{items.map(item => (
537-
<li key={item} className="flex items-center gap-2">
538-
<CheckCircle className="w-4 h-4 text-emerald-400" /> {item}
539-
</li>
540-
))}
541-
</ul>
542-
)}
543-
</div>
544-
))}
545-
</div>
546-
<div className="bg-white/10 rounded-2xl p-8 border border-white/20 backdrop-blur-sm relative">
547-
<div className="absolute top-4 right-4 bg-emerald-500 text-white text-xs font-bold px-2 py-1 rounded">LIVE DEMO</div>
548-
<div className="font-mono text-sm text-emerald-100/80 space-y-4">
549-
<div>
550-
<span className="text-purple-300">const</span> <span className="text-blue-300">input</span> = <span className="text-yellow-300">"wifi broken in lab 3"</span>;
551-
</div>
552-
<div>
553-
<span className="text-purple-300">const</span> <span className="text-blue-300">analysis</span> = <span className="text-yellow-300">await</span> AI.analyze(input);
554-
</div>
555-
<div className="pl-4 border-l border-white/10">
556-
<span className="text-gray-400">// Output</span><br />
557-
{`{`}
558-
<div className="pl-4">
559-
category: <span className="text-green-300">"Network"</span>,<br />
560-
priority: <span className="text-red-300">"High"</span>,<br />
561-
location: <span className="text-blue-300">"Lab 3"</span>,<br />
562-
action: <span className="text-orange-300">"Route to NetOps"</span>
584+
<section className="bg-emerald-950 py-32 text-white relative overflow-hidden" id="how-it-works">
585+
{/* Background Decorations */}
586+
<div className="absolute top-0 right-0 w-96 h-96 bg-emerald-500/5 blur-[120px] rounded-full -translate-y-1/2 translate-x-1/2 pointer-events-none" />
587+
<div className="absolute bottom-0 left-0 w-96 h-96 bg-emerald-500/5 blur-[120px] rounded-full translate-y-1/2 -translate-x-1/2 pointer-events-none" />
588+
589+
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
590+
<div className="flex flex-col lg:flex-row gap-16 lg:items-center">
591+
{/* Left: Content */}
592+
<div className="w-full lg:w-1/2">
593+
<div className="inline-flex items-center gap-2 px-3 py-1 bg-emerald-500/10 text-emerald-400 rounded-full text-xs font-bold uppercase tracking-widest border border-emerald-500/20 mb-6">
594+
The Journey
595+
</div>
596+
<h2 className="text-4xl md:text-6xl font-black text-white tracking-tight leading-[0.9] mb-12 italic uppercase">
597+
From Chaos <br />
598+
to <span className="text-emerald-500">Clarity.</span>
599+
</h2>
600+
601+
<div className="space-y-4">
602+
{steps.map((step, idx) => (
603+
<div
604+
key={idx}
605+
onMouseEnter={() => setActiveStep(idx)}
606+
onClick={() => setActiveStep(idx)}
607+
className={`group cursor-pointer p-6 rounded-3xl transition-all duration-500 border ${activeStep === idx
608+
? 'bg-white/10 border-white/20 shadow-2xl shadow-black/20'
609+
: 'bg-transparent border-transparent hover:bg-white/5 opacity-40 hover:opacity-100'
610+
}`}
611+
>
612+
<div className="flex items-start gap-6">
613+
<div className={`shrink-0 w-12 h-12 rounded-2xl flex items-center justify-center font-black text-xl italic transition-all duration-500 ${activeStep === idx ? 'bg-emerald-500 text-white shadow-lg shadow-emerald-500/20 rotate-12 scale-110' : 'bg-white/10 text-white/40'}`}>
614+
{step.num}
615+
</div>
616+
<div>
617+
<h3 className={`text-xl font-black italic uppercase transition-colors duration-500 ${activeStep === idx ? 'text-white' : 'text-white/60'}`}>
618+
{step.title}
619+
</h3>
620+
{activeStep === idx && (
621+
<motion.p
622+
initial={{ opacity: 0, height: 0 }}
623+
animate={{ opacity: 1, height: 'auto' }}
624+
className="text-white/60 text-sm mt-3 leading-relaxed max-w-sm"
625+
>
626+
{step.desc}
627+
</motion.p>
628+
)}
629+
</div>
630+
</div>
563631
</div>
564-
{`}`}
565-
</div>
632+
))}
566633
</div>
567634
</div>
635+
636+
{/* Right: Visual Display */}
637+
<div className="w-full lg:w-1/2 h-[500px] relative">
638+
<div className="absolute inset-0 bg-gradient-to-br from-emerald-500/10 to-transparent rounded-[40px] border border-white/5 backdrop-blur-3xl overflow-hidden p-12 flex items-center justify-center">
639+
<AnimatePresence mode="wait">
640+
<motion.div
641+
key={activeStep}
642+
initial={{ opacity: 0, scale: 0.9, y: 20 }}
643+
animate={{ opacity: 1, scale: 1, y: 0 }}
644+
exit={{ opacity: 0, scale: 1.1, y: -20 }}
645+
transition={{ type: 'spring', damping: 20, stiffness: 100 }}
646+
className="w-full h-full flex flex-col items-center justify-center"
647+
>
648+
<div className="mb-6 inline-flex items-center gap-2 px-4 py-1.5 bg-white/5 text-white/50 rounded-full text-[10px] font-black uppercase tracking-[0.2em]">
649+
<div className={`w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse`} />
650+
{steps[activeStep].label}
651+
</div>
652+
<div className="w-full max-w-sm">
653+
{steps[activeStep].visual}
654+
</div>
655+
</motion.div>
656+
</AnimatePresence>
657+
</div>
658+
659+
{/* Decorative Floating Elements */}
660+
<div className="absolute -top-6 -right-6 w-24 h-24 bg-emerald-500/10 rounded-full blur-2xl animate-pulse" />
661+
<div className="absolute -bottom-10 -left-10 w-32 h-32 bg-emerald-500/10 rounded-full blur-3xl animate-pulse delay-700" />
662+
</div>
568663
</div>
569664
</div>
570665
</section>

0 commit comments

Comments
 (0)