PriyanshuVishwakarma/citycards-partnerweb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

how it work page updated

Browse Source
This commit is contained in:
priyanshuvish
2025-10-16 17:13:57 +05:30
parent 580cc841cd
commit e721c4f754
2 changed files with 221 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

285
src/components/HowItWorksPage.tsx
View File

@@ -1,89 +1,244 @@
import { BookOpen } from "lucide-react"; import { BookOpen, Calendar, CreditCard, Users, Table2, CheckCircle } from "lucide-react";
import { motion } from "motion/react"; import { motion } from "motion/react";
import { useState } from "react";
import { ImageWithFallback } from "./figma/ImageWithFallback"; import { ImageWithFallback } from "./figma/ImageWithFallback";
import exampleImage from '../assets/fe850ec33f7da20cadeecc91695cda7ad837415e.png';
interface HowItWorksPageProps { interface HowItWorksPageProps {
onNavigate: (page: string) => void; 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) { 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 ( return (
<div className="flex-1 overflow-auto bg-gray-50"> <div className="flex-1 overflow-hidden bg-gray-50">
<div className="max-w-7xl mx-auto p-8"> <div className="max-w-7xl mx-auto p-8">
{/* Header */} {/* Header Section */}
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }} transition={{ duration: 0.3 }}
className="mb-8" 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="flex items-center gap-3 mb-2"> <div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-purple-500/10 backdrop-blur-sm"></div>
<div className="h-12 w-12 rounded-xl bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center"> <div
<BookOpen className="h-6 w-6 text-white" /> 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> </div>
<h1 className="text-gray-900">How It Works</h1> <h1 className="relative text-gray-900 text-[32px] font-bold">How CityCard Partner Web Works</h1>
</div> </div>
</motion.div> </motion.div>
{/* Main Content */} {/* Main Content with Fixed Sidebar */}
<motion.div <div className="flex gap-8 items-start h-[calc(100vh-300px)]"
initial={{ opacity: 0, y: 20 }} style={{ marginTop: '160px' }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4, delay: 0.1 }}
className="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden"
> >
{/* Image */} {/* Left Side - Fixed Sidebar */}
<div className="w-full h-96 overflow-hidden bg-gray-100"> <motion.div
<ImageWithFallback initial={{ opacity: 0, x: -20 }}
src="https://images.unsplash.com/photo-1758983308742-f4ba1f8c8cb4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxoZWxwJTIwZ3VpZGUlMjB0dXRvcmlhbHxlbnwxfHx8fDE3NjA2MDkzNzZ8MA&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral" animate={{ opacity: 1, x: 0 }}
alt="How It Works Guide" transition={{ duration: 0.4, delay: 0.2 }}
className="w-full h-full object-cover" className="w-64 flex-shrink-0"
/> >
</div> <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">
{/* Text Content */} <div className="space-y-2">
<div className="p-8"> {steps.map((step, index) => (
<h2 className="text-gray-900 mb-4">Welcome to CityCards Partner Web</h2> <motion.button
key={step.id}
<div className="space-y-4 text-gray-700"> onClick={() => setActiveStep(step.id)}
<p> className={`w-full flex items-center gap-3 p-2 rounded-lg transition-all ${
CityCards Partner Web is your comprehensive dashboard for managing customer bookings, activeStep === step.id
processing redemptions, and overseeing your team operations. This platform streamlines ? 'bg-[#F95F62] text-white shadow-md'
your daily tasks and provides powerful analytics to help grow your business. : 'hover:bg-gray-50 text-gray-700'
</p> }`}
whileHover={{ scale: 1.02 }}
<p> whileTap={{ scale: 0.98 }}
<strong className="text-gray-900">Managing Bookings:</strong> View and manage customer bookings >
through an intuitive calendar or table view. Check-in customers, handle walk-ins, and set up <div className={`flex items-center justify-center w-8 h-8 rounded-full flex-shrink-0 ${
recurring blocked time periods for holidays or maintenance. activeStep === step.id
</p> ? 'bg-white text-[#F95F62]'
: 'bg-gray-100 text-gray-600'
<p> }`}>
<strong className="text-gray-900">Processing Redemptions:</strong> Quickly scan and verify <span className="font-semibold">{step.id}</span>
CityCard passes for your customers. Process both single and multi-day passes, handle redemption </div>
confirmations, and access complete redemption history at your fingertips. <span className={`text-left ${
</p> activeStep === step.id ? 'font-semibold' : 'font-medium'
}`}>
<p> {step.shortTitle}
<strong className="text-gray-900">Staff Management:</strong> Add and remove team members, </span>
assign roles and permissions, track staff activity, and manage schedules efficiently. </motion.button>
Keep your team organized and ensure smooth operations. ))}
</p> </div>
</div>
<p>
<strong className="text-gray-900">Reports & Analytics:</strong> Generate comprehensive reports
in PDF or Excel format. View redemption analytics, track booking trends, and monitor staff
performance to make data-driven decisions for your business.
</p>
<p>
<strong className="text-gray-900">Support:</strong> Need help? Our support team is always
available to assist you with any questions or issues you may encounter while using the platform.
</p>
</div> </div>
</div> </motion.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>
</div> </div>
); );
} }

1
src/index.css
View File

@@ -1,3 +1,4 @@
@import "tailwindcss";
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
/*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */ /*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
@layer properties { @layer properties {