how it work page updated

src/components/HowItWorksPage.tsx

@@ -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 { 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-auto bg-gray-50">
+    <div className="flex-1 overflow-hidden bg-gray-50">
       <div className="max-w-7xl mx-auto p-8">
-        {/* Header */}
+        {/* Header Section */}
         <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           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="h-12 w-12 rounded-xl bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center">
-              <BookOpen className="h-6 w-6 text-white" />
+          <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="text-gray-900">How It Works</h1>
+            <h1 className="relative text-gray-900 text-[32px] font-bold">How CityCard Partner Web Works</h1>
           </div>
         </motion.div>
 
-        {/* Main Content */}
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          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"
+        {/* Main Content with Fixed Sidebar */}
+        <div className="flex gap-8 items-start h-[calc(100vh-300px)]"
+        style={{ marginTop: '160px' }}
         >
-          {/* Image */}
-          <div className="w-full h-96 overflow-hidden bg-gray-100">
-            <ImageWithFallback
-              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"
-              alt="How It Works Guide"
-              className="w-full h-full object-cover"
-            />
-          </div>
-
-          {/* Text Content */}
-          <div className="p-8">
-            <h2 className="text-gray-900 mb-4">Welcome to CityCards Partner Web</h2>
-            
-            <div className="space-y-4 text-gray-700">
-              <p>
-                CityCards Partner Web is your comprehensive dashboard for managing customer bookings, 
-                processing redemptions, and overseeing your team operations. This platform streamlines 
-                your daily tasks and provides powerful analytics to help grow your business.
-              </p>
-
-              <p>
-                <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 
-                recurring blocked time periods for holidays or maintenance.
-              </p>
-
-              <p>
-                <strong className="text-gray-900">Processing Redemptions:</strong> Quickly scan and verify 
-                CityCard passes for your customers. Process both single and multi-day passes, handle redemption 
-                confirmations, and access complete redemption history at your fingertips.
-              </p>
-
-              <p>
-                <strong className="text-gray-900">Staff Management:</strong> Add and remove team members, 
-                assign roles and permissions, track staff activity, and manage schedules efficiently. 
-                Keep your team organized and ensure smooth operations.
-              </p>
-
-              <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>
+          {/* 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>
-          </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>
   );
-}
+}

src/index.css

@@ -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");
 /*! tailwindcss v4.1.3 | MIT License | https://tailwindcss.com */
 @layer properties {