Merge version_2 into main #1
87
src/app/admin/page.tsx
Normal file
87
src/app/admin/page.tsx
Normal file
@@ -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 (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="small"
|
||||
sizing="largeSmall"
|
||||
background="circleGradient"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home", id: "/"},
|
||||
{
|
||||
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: "Admin", id: "/admin"}
|
||||
]}
|
||||
brandName="QueueLess"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="py-20 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
|
||||
<h1 className="text-4xl md:text-5xl font-extrabold tracking-tight text-center mb-8 bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent">Admin Dashboard</h1>
|
||||
<p className="text-lg text-muted-foreground text-center mb-12 max-w-2xl mx-auto">Efficiently manage your platform with dedicated panels for queue, user, and real-time system monitoring.</p>
|
||||
<CardStack
|
||||
animationType="slide-up"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
title="" description="" tag="" // Keeping these empty as the page has its own title/description
|
||||
className="mt-12"
|
||||
>
|
||||
<div className="p-6 border rounded-lg shadow-md bg-card group-hover:shadow-lg transition-shadow duration-300">
|
||||
<h3 className="text-xl font-semibold text-foreground mb-2">Queue Management</h3>
|
||||
<p className="text-muted-foreground">Manage active queues, service agents, and customer flow in real-time. View queue status, reorder customers, and assign agents for optimal service delivery.</p>
|
||||
</div>
|
||||
<div className="p-6 border rounded-lg shadow-md bg-card group-hover:shadow-lg transition-shadow duration-300">
|
||||
<h3 className="text-xl font-semibold text-foreground mb-2">User Management</h3>
|
||||
<p className="text-muted-foreground">Administer user accounts, roles, and permissions across the platform. Add, edit, or remove users, and manage their access levels with ease.</p>
|
||||
</div>
|
||||
<div className="p-6 border rounded-lg shadow-md bg-card group-hover:shadow-lg transition-shadow duration-300">
|
||||
<h3 className="text-xl font-semibold text-foreground mb-2">Real-time Monitoring</h3>
|
||||
<p className="text-muted-foreground">Monitor system performance, user activity, and service metrics instantly. Get live updates on queue lengths, agent performance, and system health.</p>
|
||||
</div>
|
||||
<div className="p-6 border rounded-lg shadow-md bg-card group-hover:shadow-lg transition-shadow duration-300">
|
||||
<h3 className="text-xl font-semibold text-foreground mb-2">Analytics & Reports</h3>
|
||||
<p className="text-muted-foreground">Access comprehensive analytics and generate reports on service efficiency, customer satisfaction, and peak hours to inform strategic decisions.</p>
|
||||
</div>
|
||||
<div className="p-6 border rounded-lg shadow-md bg-card group-hover:shadow-lg transition-shadow duration-300">
|
||||
<h3 className="text-xl font-semibold text-foreground mb-2">Settings & Configuration</h3>
|
||||
<p className="text-muted-foreground">Configure global settings, service types, branch locations, and notification preferences to tailor the platform to your institution's needs.</p>
|
||||
</div>
|
||||
<div className="p-6 border rounded-lg shadow-md bg-card group-hover:shadow-lg transition-shadow duration-300">
|
||||
<h3 className="text-xl font-semibold text-foreground mb-2">Notifications Hub</h3>
|
||||
<p className="text-muted-foreground">Manage automated SMS and in-app notifications. Set up custom alerts for customers and agents regarding queue changes and service updates.</p>
|
||||
</div>
|
||||
</CardStack>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
151
src/app/appointments/page.tsx
Normal file
151
src/app/appointments/page.tsx
Normal file
@@ -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 (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="small"
|
||||
sizing="largeSmall"
|
||||
background="circleGradient"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ 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: "Appointments", id: "/appointments" },
|
||||
{ name: "Contact", id: "/#contact" },
|
||||
]}
|
||||
brandName="QueueLess"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardDashboard
|
||||
background={{ variant: "rotated-rays-animated-grid" }}
|
||||
title="Book Your Appointment Seamlessly"
|
||||
description="Schedule your visit to banks, hospitals, or government offices with ease. Our integrated calendar and real-time slot selection ensure you find the perfect time without the wait."
|
||||
buttons={[
|
||||
{ text: "Book Now", href: "#booking-form" }
|
||||
]}
|
||||
dashboard={{
|
||||
title: "Upcoming Bookings", stats: [
|
||||
{ title: "Today", value: [5, 5, 5], description: "Appointments today" },
|
||||
{ title: "This Week", value: [20, 20, 20], description: "Appointments this week" },
|
||||
],
|
||||
logoIcon: Calendar,
|
||||
sidebarItems: [
|
||||
{ icon: Calendar, active: true },
|
||||
{ icon: Clock }
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-office-showing-tablet_23-2148767909.jpg", imageAlt: "Person viewing a digital calendar on a tablet"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="How Our Appointment System Works"
|
||||
description="Follow these simple steps to book your appointment and avoid queues."
|
||||
accordionItems={[
|
||||
{ id: "step-1", title: "1. Select Your Service & Institution", content: "Browse available services and choose the institution you need to visit (e.g., bank, hospital, government office)." },
|
||||
{ id: "step-2", title: "2. Choose Date & Time Slot", content: "View real-time availability on our interactive calendar and select a convenient time slot that fits your schedule." },
|
||||
{ id: "step-3", title: "3. Confirm Your Booking", content: "Provide your details for booking confirmation and receive an instant notification with your appointment summary." },
|
||||
{ id: "step-4", title: "4. Get Notified & Arrive", content: "Receive timely SMS reminders and a notification when your turn is approaching, ensuring you arrive just in time." }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/man-working-with-laptop-documents-office_23-2148834473.jpg"
|
||||
imageAlt="Man working with a laptop and documents"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="booking-form" data-section="booking-form">
|
||||
<ContactForm
|
||||
title="Confirm Your Appointment Details"
|
||||
description="Please fill out the form below to finalize your booking. Our team will send a confirmation shortly."
|
||||
tag="Book Now"
|
||||
buttonText="Confirm Booking"
|
||||
inputPlaceholder="Enter your name or email"
|
||||
termsText="By confirming, you agree to our appointment terms and privacy policy."
|
||||
onSubmit={() => console.log('Appointment booked!')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
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: "/#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="QueueLess"
|
||||
copyrightText="© 2024 QueueLess. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
137
src/app/dashboard/page.tsx
Normal file
137
src/app/dashboard/page.tsx
Normal file
@@ -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 (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="small"
|
||||
sizing="largeSmall"
|
||||
background="circleGradient"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home", id: "/"},
|
||||
{
|
||||
name: "Dashboard", id: "/dashboard"},
|
||||
{
|
||||
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"},
|
||||
]}
|
||||
brandName="QueueLess"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="dashboard-intro" data-section="dashboard-intro">
|
||||
<MetricCardFourteen
|
||||
tag="Analytics Overview"
|
||||
title="Your Comprehensive Dashboard"
|
||||
metrics={[
|
||||
{ id: "1", value: "120K", description: "Total Page Views" },
|
||||
{ id: "2", value: "15K", description: "Unique Visitors" },
|
||||
{ id: "3", value: "3.5%", description: "Conversion Rate" },
|
||||
{ id: "4", value: "2:15", description: "Avg. Session Duration" },
|
||||
{ id: "5", value: "1.2K", description: "New Signups" }
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="data-insights" data-section="data-insights">
|
||||
<FeatureCardSix
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Real-time Traffic Metrics", description: "Monitor website and app traffic, user engagement, and bounce rates with up-to-the-minute data visualization charts.", imageSrc: "http://img.b2bpic.net/free-photo/financial-graph_53876-88091.jpg", imageAlt: "Graph displaying real-time traffic data"},
|
||||
{
|
||||
title: "Detailed Conversion Tracking", description: "Track user journeys, conversion funnels, and identify bottlenecks to optimize your service and marketing strategies.", imageSrc: "http://img.b2bpic.net/free-photo/marketing-manager-pointing-marketing-data-strategy_53876-133502.jpg", imageAlt: "Conversion funnel on a digital screen"},
|
||||
{
|
||||
title: "Customizable Data Visualization", description: "Build custom reports and dashboards with various chart types to gain deeper insights into your operational performance and customer behavior.", imageSrc: "http://img.b2bpic.net/free-photo/modern-computer_1409-2475.jpg", imageAlt: "Dashboard with various data charts"},
|
||||
]}
|
||||
title="Actionable Insights for Growth"
|
||||
description="Our analytics tools provide you with the data you need to make informed decisions and drive continuous improvement."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
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: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="QueueLess"
|
||||
copyrightText="© 2024 QueueLess. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
150
src/app/lead-capture/page.tsx
Normal file
150
src/app/lead-capture/page.tsx
Normal file
@@ -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<string, string>) => {
|
||||
// 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 (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="small"
|
||||
sizing="largeSmall"
|
||||
background="circleGradient"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ 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: "Lead Capture", id: "/lead-capture" }
|
||||
]}
|
||||
brandName="QueueLess"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="lead-capture-form" data-section="lead-capture-form">
|
||||
<ContactSplitForm
|
||||
title="Capture Leads with Ease"
|
||||
description="Fill out the form below to connect with us and learn more about QueueLess. We'll store your information securely for follow-up. Database storage, form validation, and submission confirmation are handled for you."
|
||||
inputs={[
|
||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Your Email", required: true },
|
||||
]}
|
||||
textarea={{ name: "message", placeholder: "Your Message", rows: 4, required: true }}
|
||||
buttonText="Submit Inquiry"
|
||||
onSubmit={handleSubmit}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/african-american-woman-paying-formal-wear-with-mobile-phone-nfc-pos-terminal-buying-stylish-clothes-accessories-modern-boutique-shopper-standing-retail-store-counter-desk-close-up_482257-63317.jpg"
|
||||
imageAlt="Lead capture form illustration"
|
||||
mediaPosition="right"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
{submissionStatus === 'success' && (
|
||||
<div className="mt-4 flex items-center justify-center text-green-600">
|
||||
<MailCheck className="mr-2" /> {submissionMessage}
|
||||
</div>
|
||||
)}
|
||||
{submissionStatus === 'error' && (
|
||||
<div className="mt-4 flex items-center justify-center text-red-600">
|
||||
{submissionMessage}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
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: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="QueueLess"
|
||||
copyrightText="© 2024 QueueLess. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
117
src/app/locations/page.tsx
Normal file
117
src/app/locations/page.tsx
Normal file
@@ -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 (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="small"
|
||||
sizing="largeSmall"
|
||||
background="circleGradient"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={navItems}
|
||||
brandName="QueueLess"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="locations-display" data-section="locations-display">
|
||||
<SplitAbout
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Our Service Locations"
|
||||
description="Find QueueLess-powered service points near you. Our integrated Google Maps functionality helps you locate services, check current queue statuses, and plan your visit efficiently."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Headquarters", description: "123 Tech Avenue, Innovation City, Ethiopia - Providing core services and support."},
|
||||
{
|
||||
title: "Branch Office North", description: "456 Main Street, North District, Ethiopia - Specializing in corporate client solutions."},
|
||||
{
|
||||
title: "Branch Office South", description: "789 River Road, Southside, Ethiopia - Focus on community services and partnerships."},
|
||||
{
|
||||
title: "Partner Bank A", description: "Downtown Financial Hub, Ethiopia - Integrated with QueueLess for banking services."},
|
||||
{
|
||||
title: "Partner Hospital B", description: "Medical Center Drive, Ethiopia - Optimized patient flow with QueueLess."},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/world-map-country-map-world_1303-34509.jpg"
|
||||
imageAlt="Global map showing service locations"
|
||||
mediaAnimation="slide-up"
|
||||
imagePosition="right"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
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: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="QueueLess"
|
||||
copyrightText="© 2024 QueueLess. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
369
src/app/page.tsx
369
src/app/page.tsx
@@ -18,7 +18,7 @@ export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="small"
|
||||
sizing="largeSmall"
|
||||
@@ -33,37 +33,21 @@ export default function LandingPage() {
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "#home",
|
||||
},
|
||||
name: "Home", id: "#home"},
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
name: "About", id: "#about"},
|
||||
{
|
||||
name: "Features",
|
||||
id: "#features",
|
||||
},
|
||||
name: "Features", id: "#features"},
|
||||
{
|
||||
name: "Metrics",
|
||||
id: "#metrics",
|
||||
},
|
||||
name: "Metrics", id: "#metrics"},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "#pricing",
|
||||
},
|
||||
name: "Pricing", id: "#pricing"},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "#testimonials",
|
||||
},
|
||||
name: "Testimonials", id: "#testimonials"},
|
||||
{
|
||||
name: "FAQ",
|
||||
id: "#faq",
|
||||
},
|
||||
name: "FAQ", id: "#faq"},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
name: "Contact", id: "#contact"},
|
||||
]}
|
||||
brandName="QueueLess"
|
||||
/>
|
||||
@@ -72,52 +56,31 @@ export default function LandingPage() {
|
||||
<div id="home" data-section="home">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{
|
||||
variant: "rotated-rays-animated-grid",
|
||||
}}
|
||||
variant: "rotated-rays-animated-grid"}}
|
||||
title="Eliminate Waiting Lines. Maximize Efficiency."
|
||||
description="QueueLess is your smart service platform, allowing customers to book spots online and track queues in real-time, reducing wait times and improving satisfaction for banks, hospitals, and government offices."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Started",
|
||||
href: "#contact",
|
||||
},
|
||||
text: "Get Started", href: "#contact"},
|
||||
{
|
||||
text: "Learn More",
|
||||
href: "#about",
|
||||
},
|
||||
text: "Learn More", href: "#about"},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
carouselItems={[
|
||||
{
|
||||
id: "1",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039367.jpg",
|
||||
imageAlt: "Digital queue management interface",
|
||||
},
|
||||
id: "1", imageSrc: "http://img.b2bpic.net/free-photo/rendering-smart-home-device_23-2151039367.jpg", imageAlt: "Digital queue management interface"},
|
||||
{
|
||||
id: "2",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-using-mobile-phone-waiting-area_107420-95831.jpg",
|
||||
imageAlt: "People using QueueLess mobile app",
|
||||
},
|
||||
id: "2", imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-using-mobile-phone-waiting-area_107420-95831.jpg", imageAlt: "People using QueueLess mobile app"},
|
||||
{
|
||||
id: "3",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-team-following-woman_23-2148868407.jpg",
|
||||
imageAlt: "Modern waiting area with minimal queues",
|
||||
},
|
||||
id: "3", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-team-following-woman_23-2148868407.jpg", imageAlt: "Modern waiting area with minimal queues"},
|
||||
{
|
||||
id: "4",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/african-american-woman-paying-formal-wear-with-mobile-phone-nfc-pos-terminal-buying-stylish-clothes-accessories-modern-boutique-shopper-standing-retail-store-counter-desk-close-up_482257-63317.jpg",
|
||||
imageAlt: "Smartphone displaying real-time queue notification",
|
||||
},
|
||||
id: "4", imageSrc: "http://img.b2bpic.net/free-photo/african-american-woman-paying-formal-wear-with-mobile-phone-nfc-pos-terminal-buying-stylish-clothes-accessories-modern-boutique-shopper-standing-retail-store-counter-desk-close-up_482257-63317.jpg", imageAlt: "Smartphone displaying real-time queue notification"},
|
||||
{
|
||||
id: "5",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/teamwork-wearing-medical-face-mask-prevent-infection-with-coronavirus-working-management-strategy-corporate-office-businesswomen-planning-company-presentation-financial-graph-screen_482257-29285.jpg",
|
||||
imageAlt: "Analytics dashboard for queue efficiency",
|
||||
},
|
||||
id: "5", imageSrc: "http://img.b2bpic.net/free-photo/teamwork-wearing-medical-face-mask-prevent-infection-with-coronavirus-working-management-strategy-corporate-office-businesswomen-planning-company-presentation-financial-graph-screen_482257-29285.jpg", imageAlt: "Analytics dashboard for queue efficiency"},
|
||||
{
|
||||
id: "6",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-still-life-assortment-pvc_23-2149062948.jpg",
|
||||
imageAlt: "Secure data network for service integration",
|
||||
},
|
||||
id: "6", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-still-life-assortment-pvc_23-2149062948.jpg", imageAlt: "Secure data network for service integration"},
|
||||
]}
|
||||
tagAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -406,17 +244,16 @@ export default function LandingPage() {
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
variant: "sparkles-gradient"}}
|
||||
tag="Get in Touch"
|
||||
title="Ready to Transform Your Service?"
|
||||
description="Contact us today to schedule a demo and learn how QueueLess can help you eliminate queues, enhance customer satisfaction, and drive operational efficiency."
|
||||
buttons={[
|
||||
{
|
||||
text: "Schedule a Demo",
|
||||
href: "#",
|
||||
},
|
||||
text: "Schedule a Demo", href: "#"},
|
||||
]}
|
||||
tagAnimation="slide-up"
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -424,75 +261,45 @@ export default function LandingPage() {
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Solutions",
|
||||
items: [
|
||||
title: "Solutions", items: [
|
||||
{
|
||||
label: "For Banks",
|
||||
href: "#",
|
||||
},
|
||||
label: "For Banks", href: "#"},
|
||||
{
|
||||
label: "For Hospitals",
|
||||
href: "#",
|
||||
},
|
||||
label: "For Hospitals", href: "#"},
|
||||
{
|
||||
label: "For Government Offices",
|
||||
href: "#",
|
||||
},
|
||||
label: "For Government Offices", href: "#"},
|
||||
{
|
||||
label: "Mobile App",
|
||||
href: "#",
|
||||
},
|
||||
label: "Mobile App", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
title: "Company", items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "#about",
|
||||
},
|
||||
label: "About Us", href: "#about"},
|
||||
{
|
||||
label: "Careers",
|
||||
href: "#",
|
||||
},
|
||||
label: "Careers", href: "#"},
|
||||
{
|
||||
label: "Blog",
|
||||
href: "#",
|
||||
},
|
||||
label: "Blog", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources",
|
||||
items: [
|
||||
title: "Resources", items: [
|
||||
{
|
||||
label: "Help Center",
|
||||
href: "#faq",
|
||||
},
|
||||
label: "Help Center", href: "#faq"},
|
||||
{
|
||||
label: "Support",
|
||||
href: "#",
|
||||
},
|
||||
label: "Support", href: "#"},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
label: "Contact", href: "#contact"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
label: "Privacy Policy", href: "#"},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
label: "Terms of Service", href: "#"},
|
||||
{
|
||||
label: "Cookie Policy",
|
||||
href: "#",
|
||||
},
|
||||
label: "Cookie Policy", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
@@ -503,4 +310,4 @@ export default function LandingPage() {
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
145
src/app/pricing/page.tsx
Normal file
145
src/app/pricing/page.tsx
Normal file
@@ -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 (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="small"
|
||||
sizing="largeSmall"
|
||||
background="circleGradient"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home", id: "/"},
|
||||
{
|
||||
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"},
|
||||
]}
|
||||
brandName="QueueLess"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pricing-section" data-section="pricing-section">
|
||||
<PricingCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
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: "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"],
|
||||
},
|
||||
]}
|
||||
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!"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "sparkles-gradient"}}
|
||||
tag="Get in Touch"
|
||||
title="Ready to Transform Your Service?"
|
||||
description="Contact us today to schedule a demo and learn how QueueLess can help you eliminate queues, enhance customer satisfaction, and drive operational efficiency."
|
||||
buttons={[
|
||||
{
|
||||
text: "Schedule a Demo", href: "#"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
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: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="QueueLess"
|
||||
copyrightText="© 2024 QueueLess. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
152
src/app/queue-tracking/page.tsx
Normal file
152
src/app/queue-tracking/page.tsx
Normal file
@@ -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<number | null>(null);
|
||||
const [estimatedWaitTime, setEstimatedWaitTime] = useState<string | null>(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 (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="small"
|
||||
sizing="largeSmall"
|
||||
background="circleGradient"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple navItems={navItems} brandName="QueueLess" />
|
||||
</div>
|
||||
|
||||
<main className="min-h-screen pt-20">
|
||||
<section className="container mx-auto py-16 text-center">
|
||||
<h1 className="text-4xl font-bold mb-4">Real-time Queue Tracking</h1>
|
||||
<p className="text-lg text-gray-600 mb-8">Stay updated with your current queue position and estimated wait time.</p>
|
||||
|
||||
<div className="bg-card p-8 rounded-lg shadow-lg max-w-md mx-auto">
|
||||
{queuePosition !== null ? (
|
||||
<>
|
||||
<p className="text-6xl font-extrabold text-primary-cta mb-4">
|
||||
{queuePosition}
|
||||
</p>
|
||||
<p className="text-2xl font-semibold text-foreground mb-2">
|
||||
Your position in the queue
|
||||
</p>
|
||||
<p className="text-xl text-gray-700">
|
||||
Estimated wait time: <span className="font-bold">{estimatedWaitTime}</span>
|
||||
</p>
|
||||
<p className="text-sm text-gray-500 mt-4">
|
||||
Updates are live via WebSocket connection.
|
||||
</p>
|
||||
</>
|
||||
) : (
|
||||
<p className="text-xl text-foreground">Loading queue data...</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-12 text-gray-600">
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={footerColumns}
|
||||
logoText="QueueLess"
|
||||
copyrightText="© 2024 QueueLess. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
183
src/app/register/page.tsx
Normal file
183
src/app/register/page.tsx
Normal file
@@ -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<HTMLFormElement>) => {
|
||||
e.preventDefault();
|
||||
// Handle registration logic here (e.g., send data to API)
|
||||
console.log("Registration form submitted");
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="small"
|
||||
sizing="largeSmall"
|
||||
background="circleGradient"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple navItems={commonNavItems} brandName="QueueLess" />
|
||||
</div>
|
||||
|
||||
<main className="min-h-screen flex flex-col items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-md w-full space-y-8 p-10 bg-card rounded-xl shadow-lg">
|
||||
<div>
|
||||
<h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-foreground">
|
||||
Create an account
|
||||
</h2>
|
||||
<p className="mt-2 text-center text-sm text-foreground/80">
|
||||
Or{' '}
|
||||
<Link href="/login" className="font-medium text-primary-cta hover:text-primary-cta/80">
|
||||
sign in to your existing account
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
<form className="mt-8 space-y-6" onSubmit={handleSubmit}>
|
||||
<div className="rounded-md shadow-sm -space-y-px">
|
||||
<div>
|
||||
<label htmlFor="email-address" className="sr-only">
|
||||
Email address
|
||||
</label>
|
||||
<input
|
||||
id="email-address"
|
||||
name="email"
|
||||
type="email"
|
||||
autoComplete="email"
|
||||
required
|
||||
className="relative block w-full appearance-none rounded-none rounded-t-md border border-foreground/30 px-3 py-2 text-foreground placeholder-foreground/60 focus:z-10 focus:border-primary-cta focus:outline-none focus:ring-primary-cta sm:text-sm bg-background"
|
||||
placeholder="Email address"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="password" className="sr-only">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
id="password"
|
||||
name="password"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
required
|
||||
className="relative block w-full appearance-none rounded-none border border-foreground/30 px-3 py-2 text-foreground placeholder-foreground/60 focus:z-10 focus:border-primary-cta focus:outline-none focus:ring-primary-cta sm:text-sm bg-background"
|
||||
placeholder="Password"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="confirm-password" className="sr-only">
|
||||
Confirm Password
|
||||
</label>
|
||||
<input
|
||||
id="confirm-password"
|
||||
name="confirm-password"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
required
|
||||
className="relative block w-full appearance-none rounded-none rounded-b-md border border-foreground/30 px-3 py-2 text-foreground placeholder-foreground/60 focus:z-10 focus:border-primary-cta focus:outline-none focus:ring-primary-cta sm:text-sm bg-background"
|
||||
placeholder="Confirm Password"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button
|
||||
type="submit"
|
||||
className="group relative flex w-full justify-center rounded-md border border-transparent bg-primary-cta py-2 px-4 text-sm font-medium text-white hover:bg-primary-cta/90 focus:outline-none focus:ring-2 focus:ring-primary-cta focus:ring-offset-2"
|
||||
>
|
||||
Register
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={commonFooterColumns}
|
||||
logoText="QueueLess"
|
||||
copyrightText="© 2024 QueueLess. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
171
src/app/service-selection/page.tsx
Normal file
171
src/app/service-selection/page.tsx
Normal file
@@ -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<typeof allServices>([]);
|
||||
|
||||
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 (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="small"
|
||||
sizing="largeSmall"
|
||||
background="circleGradient"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="radial-glow"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple navItems={navItems} brandName="QueueLess" />
|
||||
</div>
|
||||
|
||||
<div className="relative py-16 lg:py-24">
|
||||
<div className="container mx-auto px-4">
|
||||
<h1 className="text-4xl lg:text-5xl font-extrabold text-center mb-6 text-foreground">Select Your Services</h1>
|
||||
<p className="text-lg text-center mb-12 text-muted-foreground max-w-2xl mx-auto">
|
||||
Browse our catalog of services. Select the ones you need to book your spot or appointment.
|
||||
</p>
|
||||
|
||||
<div className="mb-12 flex flex-col md:flex-row items-center justify-between gap-4">
|
||||
<div className="relative w-full md:w-1/2">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" size={20} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search for services..."
|
||||
className="w-full pl-10 pr-4 py-2 border rounded-full focus:outline-none focus:ring-2 focus:ring-primary-cta bg-card text-foreground placeholder-muted-foreground"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-lg font-medium text-foreground">Selected:</span>
|
||||
{selectedServices.length === 0 ? (
|
||||
<span className="text-muted-foreground">None</span>
|
||||
) : (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{selectedServices.map(service => (
|
||||
<span key={service.id} className="inline-flex items-center gap-1 rounded-full bg-primary-cta px-3 py-1 text-sm font-medium text-primary-cta-foreground">
|
||||
{service.name}
|
||||
<button
|
||||
onClick={() => handleServiceClick(service.id)}
|
||||
className="ml-1 text-primary-cta-foreground/80 hover:text-primary-cta-foreground"
|
||||
aria-label={`Remove ${service.name}`}
|
||||
>
|
||||
<XCircle size={16} />
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<button
|
||||
className="ml-4 px-4 py-2 bg-primary-cta text-primary-cta-foreground rounded-full hover:bg-primary-cta/90 transition-colors"
|
||||
onClick={() => alert(`Proceeding with selected services: ${selectedServices.map(s => s.name).join(', ')}`)}
|
||||
disabled={selectedServices.length === 0}
|
||||
>
|
||||
<ShoppingCart className="inline-block mr-2" size={20} />
|
||||
Proceed ({selectedServices.length})
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ProductCardOne
|
||||
title="Available Services"
|
||||
description="Click on any service to add or remove it from your selection."
|
||||
products={productsForDisplay}
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
cardClassName="relative group cursor-pointer"
|
||||
cardNameClassName="text-lg font-semibold"
|
||||
cardPriceClassName="text-base text-primary-cta"
|
||||
imageClassName="w-full h-40 object-cover rounded-t-lg mb-4"
|
||||
textBoxClassName="px-4 py-2"
|
||||
containerClassName="max-w-7xl mx-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{ 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: "#" }] },
|
||||
]}
|
||||
logoText="QueueLess"
|
||||
copyrightText="© 2024 QueueLess. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user