Add src/app/account/page.tsx
This commit is contained in:
103
src/app/account/page.tsx
Normal file
103
src/app/account/page.tsx
Normal file
@@ -0,0 +1,103 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import FooterCard from "@/components/sections/footer/FooterCard";
|
||||
import TextAnimation from "@/components/text/TextAnimation";
|
||||
import { Sparkles, Instagram, Facebook, Linkedin, History, Heart, Settings, MessageSquare, MapPin } from "lucide-react";
|
||||
|
||||
export default function AccountPanelPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="none"
|
||||
cardStyle="solid"
|
||||
primaryButtonStyle="shadow"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Destinations", id: "destinations" },
|
||||
{ name: "Reviews", id: "reviews" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
{ name: "Account", href: "/account" }
|
||||
]}
|
||||
brandName="Luxuria"
|
||||
button={{ text: "Plan Your Trip", href: "/#contact" }}
|
||||
/>
|
||||
|
||||
<main className="min-h-screen py-32 sm:py-40 lg:py-48 bg-background">
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<TextAnimation
|
||||
title="Your Account Panel"
|
||||
type="entrance-slide"
|
||||
className="text-center mb-16"
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{/* Order History */}
|
||||
<div id="order-history" data-section="order-history" className="p-8 border rounded-lg shadow-lg bg-card">
|
||||
<History className="w-10 h-10 mb-4 text-primary-cta" />
|
||||
<h2 className="text-3xl font-semibold text-foreground mb-4">Order History</h2>
|
||||
<p className="text-lg text-foreground/80">View your past bookings, completed trips, and detailed invoices. Rebook your favorite journeys with ease.</p>
|
||||
<button className="mt-6 px-6 py-3 bg-primary-cta text-white rounded-md hover:bg-primary-cta/90 transition-colors">View Orders</button>
|
||||
</div>
|
||||
|
||||
{/* Favorites / Wishlist */}
|
||||
<div id="favorites-wishlist" data-section="favorites-wishlist" className="p-8 border rounded-lg shadow-lg bg-card">
|
||||
<Heart className="w-10 h-10 mb-4 text-primary-cta" />
|
||||
<h2 className="text-3xl font-semibold text-foreground mb-4">Favorites & Wishlist</h2>
|
||||
<p className="text-lg text-foreground/80">Save your dream destinations and preferred travel experiences for future reference and easy booking.</p>
|
||||
<button className="mt-6 px-6 py-3 bg-primary-cta text-white rounded-md hover:bg-primary-cta/90 transition-colors">Manage Wishlist</button>
|
||||
</div>
|
||||
|
||||
{/* Account Settings */}
|
||||
<div id="account-settings" data-section="account-settings" className="p-8 border rounded-lg shadow-lg bg-card">
|
||||
<Settings className="w-10 h-10 mb-4 text-primary-cta" />
|
||||
<h2 className="text-3xl font-semibold text-foreground mb-4">Account Settings</h2>
|
||||
<p className="text-lg text-foreground/80">Update your personal information, communication preferences, and security settings.</p>
|
||||
<button className="mt-6 px-6 py-3 bg-primary-cta text-white rounded-md hover:bg-primary-cta/90 transition-colors">Edit Settings</button>
|
||||
</div>
|
||||
|
||||
{/* Support Ticket System */}
|
||||
<div id="support-ticket-system" data-section="support-ticket-system" className="p-8 border rounded-lg shadow-lg bg-card">
|
||||
<MessageSquare className="w-10 h-10 mb-4 text-primary-cta" />
|
||||
<h2 className="text-3xl font-semibold text-foreground mb-4">Support & Assistance</h2>
|
||||
<p className="text-lg text-foreground/80">Submit new support tickets, view the status of your existing requests, and get help from our dedicated team.</p>
|
||||
<button className="mt-6 px-6 py-3 bg-primary-cta text-white rounded-md hover:bg-primary-cta/90 transition-colors">Open a Ticket</button>
|
||||
</div>
|
||||
|
||||
{/* Order Tracking */}
|
||||
<div id="order-tracking" data-section="order-tracking" className="p-8 border rounded-lg shadow-lg bg-card">
|
||||
<MapPin className="w-10 h-10 mb-4 text-primary-cta" />
|
||||
<h2 className="text-3xl font-semibold text-foreground mb-4">Order Tracking</h2>
|
||||
<p className="text-lg text-foreground/80">Monitor the live status of your upcoming trips, flights, and accommodations. Stay informed every step of the way.</p>
|
||||
<button className="mt-6 px-6 py-3 bg-primary-cta text-white rounded-md hover:bg-primary-cta/90 transition-colors">Track Orders</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<FooterCard
|
||||
logoText="Luxuria"
|
||||
copyrightText="© 2025 Luxuria Travel | Luxury Journeys Worldwide"
|
||||
socialLinks={[
|
||||
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
|
||||
{ icon: Facebook, href: "#", ariaLabel: "Facebook" },
|
||||
{ icon: Linkedin, href: "#", ariaLabel: "LinkedIn" }
|
||||
]}
|
||||
/>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user