diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx new file mode 100644 index 0000000..e4bacc9 --- /dev/null +++ b/src/app/admin/page.tsx @@ -0,0 +1,87 @@ +"use client"; + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import ReactLenis from "lenis/react"; +import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple'; +import CardStack from '@/components/cardStack/CardStack'; + +export default function AdminDashboardPage() { + return ( + + + + +
+

Admin Dashboard

+

Efficiently manage your platform with dedicated panels for queue, user, and real-time system monitoring.

+ +
+

Queue Management

+

Manage active queues, service agents, and customer flow in real-time. View queue status, reorder customers, and assign agents for optimal service delivery.

+
+
+

User Management

+

Administer user accounts, roles, and permissions across the platform. Add, edit, or remove users, and manage their access levels with ease.

+
+
+

Real-time Monitoring

+

Monitor system performance, user activity, and service metrics instantly. Get live updates on queue lengths, agent performance, and system health.

+
+
+

Analytics & Reports

+

Access comprehensive analytics and generate reports on service efficiency, customer satisfaction, and peak hours to inform strategic decisions.

+
+
+

Settings & Configuration

+

Configure global settings, service types, branch locations, and notification preferences to tailor the platform to your institution's needs.

+
+
+

Notifications Hub

+

Manage automated SMS and in-app notifications. Set up custom alerts for customers and agents regarding queue changes and service updates.

+
+ +
+ + + ); +} \ No newline at end of file diff --git a/src/app/appointments/page.tsx b/src/app/appointments/page.tsx new file mode 100644 index 0000000..aabb634 --- /dev/null +++ b/src/app/appointments/page.tsx @@ -0,0 +1,151 @@ +"use client"; + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import ReactLenis from "lenis/react"; +import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple'; +import HeroBillboardDashboard from '@/components/sections/hero/HeroBillboardDashboard'; +import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne'; +import ContactForm from '@/components/form/ContactForm'; +import FooterBase from '@/components/sections/footer/FooterBase'; +import { Calendar, Clock } from "lucide-react"; + +export default function AppointmentsPage() { + return ( + + + + +
+ +
+ +
+ +
+ +
+ console.log('Appointment booked!')} + /> +
+ + + + + ); +} diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx new file mode 100644 index 0000000..cc254b3 --- /dev/null +++ b/src/app/dashboard/page.tsx @@ -0,0 +1,137 @@ +"use client"; + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import ReactLenis from "lenis/react"; +import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple'; +import FooterBase from '@/components/sections/footer/FooterBase'; +import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen'; +import FeatureCardSix from '@/components/sections/feature/FeatureCardSix'; + +export default function DashboardPage() { + return ( + + + + +
+ +
+ +
+ +
+ + + + + ); +} diff --git a/src/app/lead-capture/page.tsx b/src/app/lead-capture/page.tsx new file mode 100644 index 0000000..1848a42 --- /dev/null +++ b/src/app/lead-capture/page.tsx @@ -0,0 +1,150 @@ +"use client"; + +import { useState } from 'react'; +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import ReactLenis from "lenis/react"; +import ContactSplitForm from '@/components/sections/contact/ContactSplitForm'; +import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple'; +import FooterBase from '@/components/sections/footer/FooterBase'; +import { MailCheck } from 'lucide-react'; + +export default function LeadCapturePage() { + const [submissionStatus, setSubmissionStatus] = useState<'idle' | 'success' | 'error'>('idle'); + const [submissionMessage, setSubmissionMessage] = useState(''); + + const handleSubmit = (data: Record) => { + // Basic client-side validation + if (!data.name || !data.email || !data.message) { + setSubmissionStatus('error'); + setSubmissionMessage('Please fill in all required fields.'); + return; + } + + // Simulate API call for database storage and confirmation + console.log("Submitting form data:", data); + setSubmissionStatus('idle'); // Reset before simulating new submission + setSubmissionMessage(''); + + // In a real application, you would send this to a backend API + // await fetch('/api/lead-capture', { method: 'POST', body: JSON.stringify(data) }); + // For now, simulate success after a short delay + setTimeout(() => { + setSubmissionStatus('success'); + setSubmissionMessage('Thank you for your inquiry! We have received your submission and will get back to you shortly.'); + // Optionally clear form here or let the component handle it + }, 1500); + }; + + return ( + + + + +
+ + {submissionStatus === 'success' && ( +
+ {submissionMessage} +
+ )} + {submissionStatus === 'error' && ( +
+ {submissionMessage} +
+ )} +
+ + + + + ); +} \ No newline at end of file diff --git a/src/app/locations/page.tsx b/src/app/locations/page.tsx new file mode 100644 index 0000000..55efea7 --- /dev/null +++ b/src/app/locations/page.tsx @@ -0,0 +1,117 @@ +"use client"; + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import ReactLenis from "lenis/react"; +import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple'; +import FooterBase from '@/components/sections/footer/FooterBase'; +import SplitAbout from '@/components/sections/about/SplitAbout'; + +export default function LocationsPage() { + const navItems = [ + { + name: "Home", id: "#home"}, + { + name: "About", id: "#about"}, + { + name: "Features", id: "#features"}, + { + name: "Metrics", id: "#metrics"}, + { + name: "Pricing", id: "#pricing"}, + { + name: "Testimonials", id: "#testimonials"}, + { + name: "FAQ", id: "#faq"}, + { + name: "Contact", id: "#contact"}, + { + name: "Locations", id: "/locations"}, + ]; + + return ( + + + + +
+ +
+ + + + + ); +} diff --git a/src/app/page.tsx b/src/app/page.tsx index ef1d477..c93bbaf 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -18,7 +18,7 @@ export default function LandingPage() { return ( @@ -72,52 +56,31 @@ export default function LandingPage() {
@@ -129,41 +92,26 @@ export default function LandingPage() { description="Long waiting lines are a thing of the past. Our platform empowers institutions to streamline their services and customers to save valuable time. With real-time updates and smart scheduling, we're building a queue-less future." bulletPoints={[ { - title: "User Registration", - description: "Seamless signup via phone or email for easy access.", - }, + title: "User Registration", description: "Seamless signup via phone or email for easy access."}, { - title: "Service Selection", - description: "Choose from various institutions like banks, hospitals, or government offices.", - }, + title: "Service Selection", description: "Choose from various institutions like banks, hospitals, or government offices."}, { - title: "Real-time Tracking", - description: "Monitor your queue position from anywhere, anytime.", - }, + title: "Real-time Tracking", description: "Monitor your queue position from anywhere, anytime."}, { - title: "SMS Notifications", - description: "Get timely alerts for your turn, especially critical in regions like Ethiopia.", - }, + title: "SMS Notifications", description: "Get timely alerts for your turn, especially critical in regions like Ethiopia."}, { - title: "Admin Dashboard", - description: "Powerful tools for institutions to manage queues and appointments efficiently.", - }, + title: "Admin Dashboard", description: "Powerful tools for institutions to manage queues and appointments efficiently."}, { - title: "AI Assistant", - description: "Instant answers to visitor questions, enhancing user experience.", - }, + title: "AI Assistant", description: "Instant answers to visitor questions, enhancing user experience."}, { - title: "Calendar Integration", - description: "Effortless appointment scheduling and management.", - }, + title: "Calendar Integration", description: "Effortless appointment scheduling and management."}, { - title: "Lead Capture", - description: "Store customer submissions securely for follow-up and growth.", - }, + title: "Lead Capture", description: "Store customer submissions securely for follow-up and growth."}, ]} imageSrc="http://img.b2bpic.net/free-photo/young-woman-scanning-qr-code_23-2149321645.jpg" imageAlt="Person using QueueLess app with service icons" mediaAnimation="slide-up" + tagAnimation="slide-up" /> @@ -173,44 +121,21 @@ export default function LandingPage() { useInvertedBackground={false} features={[ { - title: "JWT Authentication", - description: "Ensure secure and reliable access for all users and administrators with robust token-based authentication.", - imageSrc: "http://img.b2bpic.net/free-photo/hand-touching-tablet_1134-117.jpg", - imageAlt: "Padlock with digital circuit", - }, + title: "JWT Authentication", description: "Ensure secure and reliable access for all users and administrators with robust token-based authentication.", imageSrc: "http://img.b2bpic.net/free-photo/hand-touching-tablet_1134-117.jpg", imageAlt: "Padlock with digital circuit"}, { - title: "Mobile App", - description: "Access QueueLess on the go with dedicated mobile applications for both iOS and Android platforms.", - imageSrc: "http://img.b2bpic.net/free-photo/man-controlling-smart-lamp-with-his-phone_23-2149036884.jpg", - imageAlt: "Smartphones displaying mobile app", - }, + title: "Mobile App", description: "Access QueueLess on the go with dedicated mobile applications for both iOS and Android platforms.", imageSrc: "http://img.b2bpic.net/free-photo/man-controlling-smart-lamp-with-his-phone_23-2149036884.jpg", imageAlt: "Smartphones displaying mobile app"}, { - title: "Payment Integration", - description: "Seamlessly integrate payment options like Telebirr API for easy transaction processing.", - imageSrc: "http://img.b2bpic.net/free-photo/person-paying-with-its-smartphone-wallet-app_23-2149167251.jpg", - imageAlt: "Mobile phone with payment gateway", - }, + title: "Payment Integration", description: "Seamlessly integrate payment options like Telebirr API for easy transaction processing.", imageSrc: "http://img.b2bpic.net/free-photo/person-paying-with-its-smartphone-wallet-app_23-2149167251.jpg", imageAlt: "Mobile phone with payment gateway"}, { - title: "Google Maps Location", - description: "Help users easily find and navigate to service locations with integrated mapping capabilities.", - imageSrc: "http://img.b2bpic.net/free-photo/person-using-mobile-phone_53876-13412.jpg", - imageAlt: "Map pin on a digital map", - }, + title: "Google Maps Location", description: "Help users easily find and navigate to service locations with integrated mapping capabilities.", imageSrc: "http://img.b2bpic.net/free-photo/person-using-mobile-phone_53876-13412.jpg", imageAlt: "Map pin on a digital map"}, { - title: "Ratings & Reviews", - description: "Collect valuable customer feedback and build trust with an integrated rating and review system.", - imageSrc: "http://img.b2bpic.net/free-photo/beautiful-silver-stars-background_23-2150160743.jpg", - imageAlt: "Five glowing stars with speech bubble", - }, + title: "Ratings & Reviews", description: "Collect valuable customer feedback and build trust with an integrated rating and review system.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-silver-stars-background_23-2150160743.jpg", imageAlt: "Five glowing stars with speech bubble"}, { - title: "Image Upload", - description: "Facilitate secure document and image management with reliable cloud-based upload services like Cloudinary.", - imageSrc: "http://img.b2bpic.net/free-photo/customer-relationship-management-concept_23-2150038414.jpg", - imageAlt: "Cloud icon with upload arrow", - }, + title: "Image Upload", description: "Facilitate secure document and image management with reliable cloud-based upload services like Cloudinary.", imageSrc: "http://img.b2bpic.net/free-photo/customer-relationship-management-concept_23-2150038414.jpg", imageAlt: "Cloud icon with upload arrow"}, ]} title="Advanced Capabilities for Seamless Operations" description="Explore the powerful features that make QueueLess the ultimate solution for modern service delivery." + tagAnimation="slide-up" /> @@ -221,38 +146,21 @@ export default function LandingPage() { useInvertedBackground={true} metrics={[ { - id: "1", - value: "70%", - title: "Reduced Wait Times", - items: [ - "Streamlined operations", - "Automated queue flow", - "Improved customer experience", - ], + id: "1", value: "70%", title: "Reduced Wait Times", items: [ + "Streamlined operations", "Automated queue flow", "Improved customer experience"], }, { - id: "2", - value: "95%", - title: "Customer Satisfaction", - items: [ - "Personalized notifications", - "Efficient service delivery", - "Positive feedback scores", - ], + id: "2", value: "95%", title: "Customer Satisfaction", items: [ + "Personalized notifications", "Efficient service delivery", "Positive feedback scores"], }, { - id: "3", - value: "30%", - title: "Operational Savings", - items: [ - "Optimized staff allocation", - "Reduced overhead costs", - "Enhanced resource management", - ], + id: "3", value: "30%", title: "Operational Savings", items: [ + "Optimized staff allocation", "Reduced overhead costs", "Enhanced resource management"], }, ]} title="Data-Driven Insights for Optimized Service" description="Track key performance indicators with our comprehensive analytics dashboard to drive better decision-making and continuous improvement." + tagAnimation="slide-up" /> @@ -263,48 +171,24 @@ export default function LandingPage() { useInvertedBackground={false} plans={[ { - id: "free-trial", - badge: "Start Now", - badgeIcon: Sparkles, - price: "Free Trial", - subtitle: "3-7 Days", - features: [ - "Full feature access", - "No credit card required", - "Priority support access", - "Dedicated account manager", - ], + id: "free-trial", badge: "Start Now", badgeIcon: Sparkles, + price: "Free Trial", subtitle: "3-7 Days", features: [ + "Full feature access", "No credit card required", "Priority support access", "Dedicated account manager"], }, { - id: "basic", - badge: "Popular", - badgeIcon: Star, - price: "5,000 - 10,000 ETB/month", - subtitle: "Basic Plan (approx. $100-200 USD/month)", - features: [ - "Standard queue features", - "SMS notifications", - "Admin dashboard access", - "Limited analytics", - ], + id: "basic", badge: "Popular", badgeIcon: Star, + price: "5,000 - 10,000 ETB/month", subtitle: "Basic Plan (approx. $100-200 USD/month)", features: [ + "Standard queue features", "SMS notifications", "Admin dashboard access", "Limited analytics"], }, { - id: "premium", - badge: "Enterprise", - badgeIcon: Award, - price: "15,000 - 30,000 ETB/month", - subtitle: "Premium Plan (approx. $300-600 USD/month)", - features: [ - "All basic features", - "Advanced analytics & reporting", - "AI assistant integration", - "Payment integration (Telebirr)", - "Google Maps & Ratings", - ], + id: "premium", badge: "Enterprise", badgeIcon: Award, + price: "15,000 - 30,000 ETB/month", subtitle: "Premium Plan (approx. $300-600 USD/month)", features: [ + "All basic features", "Advanced analytics & reporting", "AI assistant integration", "Payment integration (Telebirr)", "Google Maps & Ratings"], }, ]} title="Flexible Plans for Every Institution" description="Choose the QueueLess plan that best fits your organization's needs, from small businesses to large enterprises. Start with a free trial!" + tagAnimation="slide-up" /> @@ -315,48 +199,19 @@ export default function LandingPage() { useInvertedBackground={true} testimonials={[ { - id: "1", - name: "Sarah Johnson", - role: "CEO, TechCorp Bank", - testimonial: "QueueLess has revolutionized our branch operations. Waiting times have drastically reduced, and our customer feedback has never been better!", - imageSrc: "http://img.b2bpic.net/free-photo/portrait-successful-grey-haired-female-ceo-smiling-content-experienced-beautiful-businesswoman-posing-office-room-business-company-appearance-expression-concept_74855-11905.jpg", - imageAlt: "Sarah Johnson, CEO of TechCorp Bank", - }, + id: "1", name: "Sarah Johnson", role: "CEO, TechCorp Bank", testimonial: "QueueLess has revolutionized our branch operations. Waiting times have drastically reduced, and our customer feedback has never been better!", imageSrc: "http://img.b2bpic.net/free-photo/portrait-successful-grey-haired-female-ceo-smiling-content-experienced-beautiful-businesswoman-posing-office-room-business-company-appearance-expression-concept_74855-11905.jpg", imageAlt: "Sarah Johnson, CEO of TechCorp Bank"}, { - id: "2", - name: "Michael Chen", - role: "CTO, InnovateLab Hospital", - testimonial: "The real-time queue tracking and SMS notifications are invaluable. Our patients appreciate the convenience, and our staff efficiency has soared.", - imageSrc: "http://img.b2bpic.net/free-photo/admin-walking-data-center_482257-91108.jpg", - imageAlt: "Michael Chen, CTO of InnovateLab Hospital", - }, + id: "2", name: "Michael Chen", role: "CTO, InnovateLab Hospital", testimonial: "The real-time queue tracking and SMS notifications are invaluable. Our patients appreciate the convenience, and our staff efficiency has soared.", imageSrc: "http://img.b2bpic.net/free-photo/admin-walking-data-center_482257-91108.jpg", imageAlt: "Michael Chen, CTO of InnovateLab Hospital"}, { - id: "3", - name: "Emily Rodriguez", - role: "Marketing Director, GrowthCo Government Services", - testimonial: "Implementing QueueLess was seamless. The admin dashboard gives us complete control, and the analytics help us continuously improve our service delivery.", - imageSrc: "http://img.b2bpic.net/free-photo/young-redhead-curly-woman-working-with-her-laptop-raising-fist-after-victory-winner-concept_231208-14211.jpg", - imageAlt: "Emily Rodriguez, Marketing Director of GrowthCo Government Services", - }, + id: "3", name: "Emily Rodriguez", role: "Marketing Director, GrowthCo Government Services", testimonial: "Implementing QueueLess was seamless. The admin dashboard gives us complete control, and the analytics help us continuously improve our service delivery.", imageSrc: "http://img.b2bpic.net/free-photo/young-redhead-curly-woman-working-with-her-laptop-raising-fist-after-victory-winner-concept_231208-14211.jpg", imageAlt: "Emily Rodriguez, Marketing Director of GrowthCo Government Services"}, { - id: "4", - name: "David Kim", - role: "Product Manager, StartupXYZ", - testimonial: "The AI assistant and calendar integration are game-changers. Our visitors get instant answers, and appointment scheduling is now effortless.", - imageSrc: "http://img.b2bpic.net/free-photo/modern-man-using-tablet-urban-environment_23-2147961404.jpg", - imageAlt: "David Kim, Product Manager of StartupXYZ", - }, + id: "4", name: "David Kim", role: "Product Manager, StartupXYZ", testimonial: "The AI assistant and calendar integration are game-changers. Our visitors get instant answers, and appointment scheduling is now effortless.", imageSrc: "http://img.b2bpic.net/free-photo/modern-man-using-tablet-urban-environment_23-2147961404.jpg", imageAlt: "David Kim, Product Manager of StartupXYZ"}, { - id: "5", - name: "Maria Garcia", - role: "Operations Manager, Global Logistics", - testimonial: "The platform's scalability and secure authentication mean we can trust QueueLess for all our multi-location needs. A truly professional solution.", - imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-successful-businesswoman-smiling-posing-holding-folder-office_176420-963.jpg", - imageAlt: "Maria Garcia, Operations Manager of Global Logistics", - }, + id: "5", name: "Maria Garcia", role: "Operations Manager, Global Logistics", testimonial: "The platform's scalability and secure authentication mean we can trust QueueLess for all our multi-location needs. A truly professional solution.", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-successful-businesswoman-smiling-posing-holding-folder-office_176420-963.jpg", imageAlt: "Maria Garcia, Operations Manager of Global Logistics"}, ]} title="What Our Clients Say" description="Hear from institutions and customers who have transformed their service experience with QueueLess, praising our efficiency and innovation." + tagAnimation="slide-up" /> @@ -366,39 +221,22 @@ export default function LandingPage() { useInvertedBackground={false} faqs={[ { - id: "faq-1", - title: "How does QueueLess help reduce waiting times?", - content: "QueueLess allows customers to book their spot online and track their queue position in real-time, reducing physical waiting in lines and allowing them to arrive precisely when their turn is near.", - }, + id: "faq-1", title: "How does QueueLess help reduce waiting times?", content: "QueueLess allows customers to book their spot online and track their queue position in real-time, reducing physical waiting in lines and allowing them to arrive precisely when their turn is near."}, { - id: "faq-2", - title: "Is the platform secure for sensitive data?", - content: "Yes, QueueLess utilizes JWT Authentication and robust backend security measures, along with Cloudinary for secure image uploads, ensuring your data is always protected.", - }, + id: "faq-2", title: "Is the platform secure for sensitive data?", content: "Yes, QueueLess utilizes JWT Authentication and robust backend security measures, along with Cloudinary for secure image uploads, ensuring your data is always protected."}, { - id: "faq-3", - title: "Can QueueLess be integrated with existing systems?", - content: "Our platform is designed for flexible integration. While we don't list specific APIs for existing systems, our team can discuss custom integration possibilities during a demo.", - }, + id: "faq-3", title: "Can QueueLess be integrated with existing systems?", content: "Our platform is designed for flexible integration. While we don't list specific APIs for existing systems, our team can discuss custom integration possibilities during a demo."}, { - id: "faq-4", - title: "What types of institutions can use QueueLess?", - content: "QueueLess is ideal for any institution experiencing long queues, including banks, hospitals, government offices, clinics, and customer service centers.", - }, + id: "faq-4", title: "What types of institutions can use QueueLess?", content: "QueueLess is ideal for any institution experiencing long queues, including banks, hospitals, government offices, clinics, and customer service centers."}, { - id: "faq-5", - title: "Do you offer a mobile application?", - content: "Yes, we offer native mobile applications developed with Flutter/React Native for both iOS and Android, providing a seamless experience for your customers on the go.", - }, + id: "faq-5", title: "Do you offer a mobile application?", content: "Yes, we offer native mobile applications developed with Flutter/React Native for both iOS and Android, providing a seamless experience for your customers on the go."}, { - id: "faq-6", - title: "What payment options are supported?", - content: "We support payment integration, including specific APIs like Telebirr, to ensure convenient and secure transactions for premium services.", - }, + id: "faq-6", title: "What payment options are supported?", content: "We support payment integration, including specific APIs like Telebirr, to ensure convenient and secure transactions for premium services."}, ]} title="Frequently Asked Questions" description="Find quick answers to common questions about the QueueLess platform, its features, and how it can benefit your institution." faqsAnimation="slide-up" + tagAnimation="slide-up" /> @@ -406,17 +244,16 @@ export default function LandingPage() { @@ -424,75 +261,45 @@ export default function LandingPage() { ); -} +} \ No newline at end of file diff --git a/src/app/pricing/page.tsx b/src/app/pricing/page.tsx new file mode 100644 index 0000000..3830adf --- /dev/null +++ b/src/app/pricing/page.tsx @@ -0,0 +1,145 @@ +"use client"; + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import ReactLenis from "lenis/react"; +import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple'; +import PricingCardOne from '@/components/sections/pricing/PricingCardOne'; +import ContactCTA from '@/components/sections/contact/ContactCTA'; +import FooterBase from '@/components/sections/footer/FooterBase'; +import { Sparkles, Star, Award } from "lucide-react"; + +export default function PricingPage() { + return ( + + + + +
+ +
+ +
+ +
+ + + + + ); +} diff --git a/src/app/queue-tracking/page.tsx b/src/app/queue-tracking/page.tsx new file mode 100644 index 0000000..8b18a99 --- /dev/null +++ b/src/app/queue-tracking/page.tsx @@ -0,0 +1,152 @@ +"use client"; + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import ReactLenis from "lenis/react"; +import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple'; +import FooterBase from '@/components/sections/footer/FooterBase'; +import { useState, useEffect } from 'react'; + +export default function QueueTrackingPage() { + const [queuePosition, setQueuePosition] = useState(null); + const [estimatedWaitTime, setEstimatedWaitTime] = useState(null); + + useEffect(() => { + // Simulate WebSocket connection and updates + // In a real application, this would connect to a WebSocket server + // For example: const ws = new WebSocket('ws://localhost:8080/queue'); + // ws.onmessage = (event) => { const data = JSON.parse(event.data); setQueuePosition(data.position); setEstimatedWaitTime(data.waitTime); }; + // For now, let's simulate updates with setTimeout + + let currentPosition = 5; // Initial simulated position + const interval = setInterval(() => { + currentPosition = Math.max(1, currentPosition - 1); // Simulate moving up the queue + setQueuePosition(currentPosition); + setEstimatedWaitTime(`${currentPosition * 3} minutes`); // Simulate wait time + + if (currentPosition === 1) { + clearInterval(interval); + } + }, 5000); // Update every 5 seconds + + // Cleanup function + return () => clearInterval(interval); + }, []); + + const navItems = [ + { + name: "Home", id: "#home"}, + { + name: "About", id: "#about"}, + { + name: "Features", id: "#features"}, + { + name: "Queue Tracking", id: "/queue-tracking"}, + { + name: "Metrics", id: "#metrics"}, + { + name: "Pricing", id: "#pricing"}, + { + name: "Testimonials", id: "#testimonials"}, + { + name: "FAQ", id: "#faq"}, + { + name: "Contact", id: "#contact"}, + ]; + + const footerColumns = [ + { + title: "Solutions", items: [ + { label: "For Banks", href: "#" }, + { label: "For Hospitals", href: "#" }, + { label: "For Government Offices", href: "#" }, + { label: "Mobile App", href: "#" }, + ], + }, + { + title: "Company", items: [ + { label: "About Us", href: "#about" }, + { label: "Careers", href: "#" }, + { label: "Blog", href: "#" }, + ], + }, + { + title: "Resources", items: [ + { label: "Help Center", href: "#faq" }, + { label: "Support", href: "#" }, + { label: "Contact", href: "#contact" }, + ], + }, + { + title: "Legal", items: [ + { label: "Privacy Policy", href: "#" }, + { label: "Terms of Service", href: "#" }, + { label: "Cookie Policy", href: "#" }, + ], + }, + ]; + + return ( + + + + +
+
+

Real-time Queue Tracking

+

Stay updated with your current queue position and estimated wait time.

+ +
+ {queuePosition !== null ? ( + <> +

+ {queuePosition} +

+

+ Your position in the queue +

+

+ Estimated wait time: {estimatedWaitTime} +

+

+ Updates are live via WebSocket connection. +

+ + ) : ( +

Loading queue data...

+ )} +
+ +
+

+ For a real-time experience, this page integrates with a WebSocket server + to provide instant updates on queue changes. The data displayed above is + simulated for demonstration purposes. +

+
+
+
+ + + + + ); +} \ No newline at end of file diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx new file mode 100644 index 0000000..81185b5 --- /dev/null +++ b/src/app/register/page.tsx @@ -0,0 +1,183 @@ +"use client"; + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import ReactLenis from "lenis/react"; +import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple'; +import FooterBase from '@/components/sections/footer/FooterBase'; +import Link from 'next/link'; + +export default function RegisterPage() { + const commonNavItems = [ + { + name: "Home", id: "#home"}, + { + name: "About", id: "#about"}, + { + name: "Features", id: "#features"}, + { + name: "Metrics", id: "#metrics"}, + { + name: "Pricing", id: "#pricing"}, + { + name: "Testimonials", id: "#testimonials"}, + { + name: "FAQ", id: "#faq"}, + { + name: "Contact", id: "#contact"}, + { + name: "Register", id: "/register"}, + { + name: "Login", id: "/login"}, + ]; + + const commonFooterColumns = [ + { + title: "Solutions", items: [ + { + label: "For Banks", href: "#"}, + { + label: "For Hospitals", href: "#"}, + { + label: "For Government Offices", href: "#"}, + { + label: "Mobile App", href: "#"}, + ], + }, + { + title: "Company", items: [ + { + label: "About Us", href: "#about"}, + { + label: "Careers", href: "#"}, + { + label: "Blog", href: "#"}, + ], + }, + { + title: "Resources", items: [ + { + label: "Help Center", href: "#faq"}, + { + label: "Support", href: "#"}, + { + label: "Contact", href: "#contact"}, + ], + }, + { + title: "Legal", items: [ + { + label: "Privacy Policy", href: "#"}, + { + label: "Terms of Service", href: "#"}, + { + label: "Cookie Policy", href: "#"}, + ], + }, + ]; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + // Handle registration logic here (e.g., send data to API) + console.log("Registration form submitted"); + }; + + return ( + + + + +
+
+
+

+ Create an account +

+

+ Or{' '} + + sign in to your existing account + +

+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ +
+
+
+
+ + + + + ); +} diff --git a/src/app/service-selection/page.tsx b/src/app/service-selection/page.tsx new file mode 100644 index 0000000..92df8bb --- /dev/null +++ b/src/app/service-selection/page.tsx @@ -0,0 +1,171 @@ +"use client"; + +import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; +import ReactLenis from "lenis/react"; +import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple'; +import FooterBase from '@/components/sections/footer/FooterBase'; +import ProductCardOne from '@/components/sections/product/ProductCardOne'; // For service catalog display +import { useState, useEffect } from 'react'; +import { Search, ShoppingCart, XCircle } from 'lucide-react'; // Example icons + +// Dummy data for services +const allServices = [ + { id: "s1", name: "Account Opening", price: "Free", description: "Open a new bank account easily.", imageSrc: "http://img.b2bpic.net/free-photo/financial-document-chart_23-2149313264.jpg", imageAlt: "Document with charts and pen" }, + { id: "s2", name: "Loan Application", price: "Varies", description: "Apply for personal, business, or mortgage loans.", imageSrc: "http://img.b2bpic.net/free-photo/bank-loan-documents-concept_23-2150371424.jpg", imageAlt: "Loan application form" }, + { id: "s3", name: "Cash Withdrawal", price: "Free", description: "Withdraw cash from your account.", imageSrc: "http://img.b2bpic.net/free-photo/woman-making-money-withdrawal-atm_23-2148766468.jpg", imageAlt: "Hand withdrawing cash from ATM" }, + { id: "s4", name: "Deposit Services", price: "Free", description: "Deposit funds into your account.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-business-hand-holding-banknote_23-2148762740.jpg", imageAlt: "Hand depositing money" }, + { id: "s5", name: "Financial Consultation", price: "Free", description: "Expert advice for your financial planning.", imageSrc: "http://img.b2bpic.net/free-photo/colleagues-discussing-financial-plan_23-2149021008.jpg", imageAlt: "People discussing at a table" }, + { id: "s6", name: "Card Services", price: "Varies", description: "Apply for new cards, replace, or block existing ones.", imageSrc: "http://img.b2bpic.net/free-photo/holding-credit-cards_23-2147814728.jpg", imageAlt: "Hand holding credit cards" }, + { id: "s7", name: "Investment Planning", price: "Varies", description: "Plan your investments with our advisors.", imageSrc: "http://img.b2bpic.net/free-photo/african-american-man-consulting-with-financial-advisor-laptop_23-2149021002.jpg", imageAlt: "Man looking at laptop with advisor" }, + { id: "s8", name: "Online Banking Support", price: "Free", description: "Get assistance with your online banking account.", imageSrc: "http://img.b2bpic.net/free-photo/business-woman-working-computer_23-2149033324.jpg", imageAlt: "Woman working on computer" }, +]; + +export default function ServiceSelectionPage() { + const [searchTerm, setSearchTerm] = useState(''); + const [filteredServices, setFilteredServices] = useState(allServices); + const [selectedServices, setSelectedServices] = useState([]); + + useEffect(() => { + setFilteredServices( + allServices.filter(service => + service.name.toLowerCase().includes(searchTerm.toLowerCase()) || + service.description.toLowerCase().includes(searchTerm.toLowerCase()) + ) + ); + }, [searchTerm]); + + const handleServiceClick = (serviceId: string) => { + const service = allServices.find(s => s.id === serviceId); + if (!service) return; + + if (selectedServices.some(s => s.id === serviceId)) { + setSelectedServices(prev => prev.filter(s => s.id !== serviceId)); + } else { + setSelectedServices(prev => [...prev, service]); + } + }; + + const isServiceSelected = (serviceId: string) => { + return selectedServices.some(s => s.id === serviceId); + }; + + const navItems = [ + { name: "Home", id: "/" }, + { name: "About", id: "#about" }, + { name: "Services", id: "/service-selection" }, // New link for this page + { name: "Features", id: "#features" }, + { name: "Metrics", id: "#metrics" }, + { name: "Pricing", id: "#pricing" }, + { name: "Testimonials", id: "#testimonials" }, + { name: "FAQ", id: "#faq" }, + { name: "Contact", id: "#contact" }, + ]; + + // Map services to ProductCardOne's expected 'products' format + const productsForDisplay = filteredServices.map(service => ({ + ...service, + onProductClick: () => handleServiceClick(service.id), + isFavorited: isServiceSelected(service.id), // Use isFavorited to show selection state + onFavorite: () => handleServiceClick(service.id), // Re-use onFavorite for selection toggling + })); + + return ( + + + + +
+
+

Select Your Services

+

+ Browse our catalog of services. Select the ones you need to book your spot or appointment. +

+ +
+
+ + setSearchTerm(e.target.value)} + /> +
+
+ Selected: + {selectedServices.length === 0 ? ( + None + ) : ( +
+ {selectedServices.map(service => ( + + {service.name} + + + ))} +
+ )} + +
+
+ + +
+
+ + + + + ); +} \ No newline at end of file diff --git a/src/app/styles/variables.css b/src/app/styles/variables.css index 8bb4ae2..d18f688 100644 --- a/src/app/styles/variables.css +++ b/src/app/styles/variables.css @@ -10,15 +10,15 @@ --accent: #ffffff; --background-accent: #ffffff; */ - --background: #0a0a0a; - --card: #1a1a1a; - --foreground: #ffffff; - --primary-cta: #e34400; + --background: #0F172A; + --card: #1A202C; + --foreground: #E2E8F0; + --primary-cta: #3B82F6; --primary-cta-text: #ffffff; - --secondary-cta: #010101; + --secondary-cta: #60A5FA; --secondary-cta-text: #ffffff; - --accent: #737373; - --background-accent: #e34400; + --accent: #3B82F6; + --background-accent: #2D3748; /* text sizing - set by ThemeProvider */ /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);