244 lines
9.9 KiB
TypeScript
244 lines
9.9 KiB
TypeScript
import { BookOpen, Calendar, CreditCard, Users, Table2, CheckCircle } from "lucide-react";
|
|
import { motion } from "motion/react";
|
|
import { useState } from "react";
|
|
import { ImageWithFallback } from "./figma/ImageWithFallback";
|
|
import exampleImage from '../assets/fe850ec33f7da20cadeecc91695cda7ad837415e.png';
|
|
|
|
interface HowItWorksPageProps {
|
|
onNavigate: (page: string) => void;
|
|
}
|
|
|
|
interface Step {
|
|
id: number;
|
|
title: string;
|
|
shortTitle: string;
|
|
description: string;
|
|
icon: React.ElementType;
|
|
details: string[];
|
|
}
|
|
|
|
export default function HowItWorksPage({ onNavigate }: HowItWorksPageProps) {
|
|
const [activeStep, setActiveStep] = useState(1);
|
|
|
|
const steps: Step[] = [
|
|
{
|
|
id: 1,
|
|
title: "Sign Up",
|
|
shortTitle: "Sign Up",
|
|
description: "Get started with CityCard Partner Web by creating your account and setting up your business profile.",
|
|
icon: BookOpen,
|
|
details: [
|
|
"Create your partner account with basic business information",
|
|
"Verify your email and complete profile setup",
|
|
"Connect with the CityCard platform",
|
|
"Access your personalized dashboard"
|
|
]
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Manage Bookings",
|
|
shortTitle: "Manage Bookings",
|
|
description: "View and manage customer bookings through an intuitive calendar or table view with powerful scheduling tools.",
|
|
icon: Calendar,
|
|
details: [
|
|
"View bookings in calendar or table format",
|
|
"Check-in customers and manage time slots",
|
|
"Set up recurring blocked time periods",
|
|
"Handle walk-in customers efficiently",
|
|
"Track booking history and analytics"
|
|
]
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Process Redemptions",
|
|
shortTitle: "Process Redemptions",
|
|
description: "Quickly scan and verify CityCard passes for your customers with our streamlined redemption process.",
|
|
icon: CreditCard,
|
|
details: [
|
|
"Scan and verify CityCard passes instantly",
|
|
"Process single and multi-day passes",
|
|
"Handle redemption confirmations in real-time",
|
|
"View complete redemption history",
|
|
"Track success rates and analytics"
|
|
]
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "Add Staff Members",
|
|
shortTitle: "Add Staff",
|
|
description: "Build your team by adding staff members, assigning roles, and managing permissions for smooth operations.",
|
|
icon: Users,
|
|
details: [
|
|
"Add new team members with role assignments",
|
|
"Set permissions and access levels",
|
|
"Track staff activity and performance",
|
|
"Manage staff schedules efficiently",
|
|
"Enable/disable staff accounts as needed"
|
|
]
|
|
},
|
|
{
|
|
id: 5,
|
|
title: "Generate Reports",
|
|
shortTitle: "Generate Reports",
|
|
description: "Access comprehensive analytics and generate detailed reports to track your business performance.",
|
|
icon: Table2,
|
|
details: [
|
|
"Download reports in PDF or Excel format",
|
|
"View redemption analytics and trends",
|
|
"Track booking patterns and peak times",
|
|
"Monitor staff performance metrics",
|
|
"Access custom date range reports"
|
|
]
|
|
}
|
|
];
|
|
|
|
const ActiveIcon = steps[activeStep - 1].icon;
|
|
|
|
return (
|
|
<div className="flex-1 overflow-hidden bg-gray-50">
|
|
<div className="max-w-7xl mx-auto p-8">
|
|
{/* Header Section */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.3 }}
|
|
className="text-center mb-12 relative rounded-2xl overflow-hidden"
|
|
style={{
|
|
borderRadius: '24px',
|
|
marginBottom: '20px',
|
|
position: 'fixed',
|
|
width: 'calc(100% - 64px)',
|
|
maxWidth: '1006px',
|
|
top: '80px',
|
|
}}
|
|
>
|
|
<div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-purple-500/10 backdrop-blur-sm"></div>
|
|
<div
|
|
className="relative flex items-center justify-center gap-3 py-12 bg-cover bg-center rounded-2xl"
|
|
style={{
|
|
backgroundImage: 'url(https://images.unsplash.com/photo-1624341373902-70e3a8dc9acc?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtZWxib3VybmUlMjBjaXR5JTIwc2t5bGluZXxlbnwxfHx8fDE3NjA1OTQwNzB8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral)'
|
|
}}
|
|
>
|
|
<div className="absolute inset-0 bg-white/80 rounded-2xl"></div>
|
|
<div className="relative h-16 w-16 rounded-xl bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center shadow-lg">
|
|
<BookOpen className="h-8 w-8 text-white" />
|
|
</div>
|
|
<h1 className="relative text-gray-900 text-[32px] font-bold">How CityCard Partner Web Works</h1>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Main Content with Fixed Sidebar */}
|
|
<div className="flex gap-8 items-start h-[calc(100vh-300px)]"
|
|
style={{ marginTop: '160px' }}
|
|
>
|
|
{/* Left Side - Fixed Sidebar */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.4, delay: 0.2 }}
|
|
className="w-64 flex-shrink-0"
|
|
>
|
|
<div className="fixed w-64 h-[calc(100vh-300px)]">
|
|
<div className="bg-white rounded-xl border border-gray-200 p-4 shadow-sm h-full">
|
|
<div className="space-y-2">
|
|
{steps.map((step, index) => (
|
|
<motion.button
|
|
key={step.id}
|
|
onClick={() => setActiveStep(step.id)}
|
|
className={`w-full flex items-center gap-3 p-2 rounded-lg transition-all ${
|
|
activeStep === step.id
|
|
? 'bg-[#F95F62] text-white shadow-md'
|
|
: 'hover:bg-gray-50 text-gray-700'
|
|
}`}
|
|
whileHover={{ scale: 1.02 }}
|
|
whileTap={{ scale: 0.98 }}
|
|
>
|
|
<div className={`flex items-center justify-center w-8 h-8 rounded-full flex-shrink-0 ${
|
|
activeStep === step.id
|
|
? 'bg-white text-[#F95F62]'
|
|
: 'bg-gray-100 text-gray-600'
|
|
}`}>
|
|
<span className="font-semibold">{step.id}</span>
|
|
</div>
|
|
<span className={`text-left ${
|
|
activeStep === step.id ? 'font-semibold' : 'font-medium'
|
|
}`}>
|
|
{step.shortTitle}
|
|
</span>
|
|
</motion.button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Right Side - Scrollable Content */}
|
|
<motion.div
|
|
key={activeStep}
|
|
initial={{ opacity: 0, x: 20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.4 }}
|
|
className="flex-1 ml-64"
|
|
>
|
|
<div className="h-[calc(100vh-300px)] overflow-y-auto">
|
|
<div className="space-y-6 pb-6">
|
|
{steps.map((step, stepIndex) => {
|
|
const StepIcon = step.icon;
|
|
return (
|
|
<motion.div
|
|
key={step.id}
|
|
id={`step-${step.id}`}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.4, delay: stepIndex * 0.1 }}
|
|
className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden"
|
|
>
|
|
{/* Header with Icon and Title */}
|
|
<div className="bg-gradient-to-r from-[#F95F62]/10 to-purple-50 p-8 border-b border-gray-200">
|
|
<div className="flex items-center gap-4 mb-4">
|
|
<div className="h-16 w-16 rounded-xl bg-[#F95F62] flex items-center justify-center shadow-lg">
|
|
<StepIcon className="h-8 w-8 text-white" />
|
|
</div>
|
|
<div>
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<span className="text-sm text-gray-500">Step {step.id} of {steps.length}</span>
|
|
</div>
|
|
<h2 className="text-gray-900">{step.title}</h2>
|
|
</div>
|
|
</div>
|
|
<p className="text-gray-700">
|
|
{step.description}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Content Details */}
|
|
<div className="p-8">
|
|
<h3 className="text-gray-900 mb-4">Key Features</h3>
|
|
<div className="space-y-3">
|
|
{step.details.map((detail, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, x: -10 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.3, delay: index * 0.1 }}
|
|
className="flex items-start gap-3"
|
|
>
|
|
<div className="flex-shrink-0 mt-0.5">
|
|
<CheckCircle className="h-5 w-5 text-green-500" />
|
|
</div>
|
|
<p className="text-gray-700">{detail}</p>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |