Add src/app/check-in/page.tsx
This commit is contained in:
169
src/app/check-in/page.tsx
Normal file
169
src/app/check-in/page.tsx
Normal file
@@ -0,0 +1,169 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
|
||||
import HeroLogo from "@/components/sections/hero/HeroLogo";
|
||||
import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
|
||||
import ContactSplit from "@/components/sections/contact/ContactSplit";
|
||||
import SplitAbout from "@/components/sections/about/SplitAbout";
|
||||
import FooterMedia from "@/components/sections/footer/FooterMedia";
|
||||
import {
|
||||
QrCode,
|
||||
Plane,
|
||||
User,
|
||||
Navigation,
|
||||
Clock,
|
||||
Armchair,
|
||||
} from "lucide-react";
|
||||
|
||||
export default function CheckInPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="expand-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="blurBottom"
|
||||
cardStyle="subtle-shadow"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "Check-in", id: "/check-in" },
|
||||
{ name: "Booking", id: "/booking" },
|
||||
{ name: "Loading", id: "/loading-screen" },
|
||||
{ name: "Confirmation", id: "/confirmation" },
|
||||
]}
|
||||
brandName="Dealta Airlines"
|
||||
bottomLeftText="Touchscreen Kiosk"
|
||||
bottomRightText="Terminal 1 - Gate B45"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="Check-In Process"
|
||||
description="Scan your ticket and confirm your information"
|
||||
buttons={[{ text: "Next", href: "/loading-screen" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/woman-with-shopping-bags-sitting-coach-shopping-mall_1303-29617.jpg?_wi=1"
|
||||
imageAlt="Airport terminal check-in"
|
||||
showDimOverlay={true}
|
||||
buttonAnimation="slide-up"
|
||||
ariaLabel="Check-in process for Dealta Airlines"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="passenger-options" data-section="passenger-options">
|
||||
<FeatureCardThree
|
||||
features={[
|
||||
{
|
||||
id: "01", title: "Scan Boarding Pass", description: "Use the QR code scanner to quickly verify your ticket and boarding information", imageSrc: "http://img.b2bpic.net/free-photo/close-up-senior-person-while-learning_23-2149072435.jpg?_wi=1", imageAlt: "QR code scanning interface"
|
||||
},
|
||||
{
|
||||
id: "02", title: "Confirm Details", description: "Review and confirm your passenger information, seat assignment, and baggage selection", imageSrc: "http://img.b2bpic.net/free-vector/collection-flat-travel-elements_23-2147766294.jpg", imageAlt: "Flight confirmation details"
|
||||
},
|
||||
]}
|
||||
title="Complete Your Check-In"
|
||||
description="Follow these steps to complete your check-in process"
|
||||
tag="Check-In Steps"
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
gridVariant="two-columns-alternating-heights"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="qr-scanner" data-section="qr-scanner">
|
||||
<ContactSplit
|
||||
tag="Ticket Verification"
|
||||
title="Scan Your Boarding Pass"
|
||||
description="Position your mobile ticket or printed boarding pass under the camera scanner. Ensure the QR code is clearly visible for quick verification."
|
||||
tagIcon={QrCode}
|
||||
tagAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-senior-person-while-learning_23-2149072435.jpg?_wi=2"
|
||||
imageAlt="QR code scanner demonstration"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="right"
|
||||
background={{ variant: "plain" }}
|
||||
useInvertedBackground={false}
|
||||
inputPlaceholder="Scanning..."
|
||||
buttonText="Rescan"
|
||||
termsText="Hold your ticket steady until the scan completes. Green light indicates successful scan."
|
||||
ariaLabel="QR code scanner section"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="passenger-info" data-section="passenger-info">
|
||||
<SplitAbout
|
||||
tag="Flight Details"
|
||||
tagIcon={Plane}
|
||||
tagAnimation="slide-up"
|
||||
title="Your Flight Information"
|
||||
description="Confirm your travel details are correct before proceeding to baggage selection"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
imagePosition="right"
|
||||
imageSrc="http://img.b2bpic.net/free-vector/star-with-check-mark-set_78370-4768.jpg"
|
||||
imageAlt="Flight confirmation details"
|
||||
mediaAnimation="slide-up"
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Passenger: John Smith", description: "Name as it appears on ticket", icon: User,
|
||||
},
|
||||
{
|
||||
title: "Flight: DL 2847", description: "New York (JFK) to Los Angeles (LAX)", icon: Navigation,
|
||||
},
|
||||
{
|
||||
title: "Boarding Time: 14:45", description: "Gate B45 - Departure 15:30", icon: Clock,
|
||||
},
|
||||
{
|
||||
title: "Seat: 12A", description: "Window seat, First Class", icon: Armchair,
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Continue", href: "/baggage-selection" }]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="http://img.b2bpic.net/free-photo/woman-with-shopping-bags-sitting-coach-shopping-mall_1303-29617.jpg?_wi=2"
|
||||
imageAlt="Dealta Airlines terminal footer"
|
||||
columns={[
|
||||
{
|
||||
title: "Quick Links", items: [
|
||||
{ label: "Check-in", href: "/check-in" },
|
||||
{ label: "Booking", href: "/booking" },
|
||||
{ label: "Flight Status", href: "https://example.com/status" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Support", items: [
|
||||
{ label: "Help Center", href: "https://example.com/help" },
|
||||
{ label: "Contact Us", href: "#contact" },
|
||||
{ label: "FAQ", href: "https://example.com/faq" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "https://example.com/privacy" },
|
||||
{
|
||||
label: "Terms of Service", href: "https://example.com/terms"
|
||||
},
|
||||
{ label: "Accessibility", href: "https://example.com/accessibility" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Dealta Airlines"
|
||||
copyrightText="© 2025 Dealta Airlines | All rights reserved"
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user