Add src/app/lost-and-found/page.tsx
This commit is contained in:
201
src/app/lost-and-found/page.tsx
Normal file
201
src/app/lost-and-found/page.tsx
Normal file
@@ -0,0 +1,201 @@
|
||||
"use client";
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
||||
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
|
||||
import BlogCardThree from '@/components/sections/blog/BlogCardThree';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
||||
import { Search, Filter, Calendar, Tag } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function LostAndFoundPage() {
|
||||
const [filterCategory, setFilterCategory] = useState('all');
|
||||
const [filterDate, setFilterDate] = useState('all');
|
||||
const [itemType, setItemType] = useState('lost');
|
||||
|
||||
const categories = ['Electronics', 'Documents', 'Accessories', 'Clothing', 'Other'];
|
||||
const dateRanges = ['Last 7 days', 'Last 30 days', 'Last 90 days', 'All time'];
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="smallMedium"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="none"
|
||||
cardStyle="layered-gradient"
|
||||
primaryButtonStyle="double-inset"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
brandName="Lost & Found"
|
||||
navItems={[
|
||||
{ name: "Browse", id: "browse" },
|
||||
{ name: "Report Item", id: "report" },
|
||||
{ name: "FAQs", id: "faqs" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="Lost & Found"
|
||||
description="Help reconnect lost items with their owners. Browse lost and found items, filter by category and date, and report your own items."
|
||||
buttons={[
|
||||
{ text: "Browse Lost Items", href: "#browse" },
|
||||
{ text: "Browse Found Items", href: "#browse" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/startup-business-teamwork-concept-group-perspective-young-people-meeting-big-modern-library-talking-about-profits-last-project-looking-through-papers-smiling-having-productive-tim_176420-8298.jpg?_wi=1"
|
||||
imageAlt="Lost and Found items"
|
||||
showDimOverlay={true}
|
||||
ariaLabel="Lost and Found Portal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="browse" data-section="browse">
|
||||
<FeatureCardTen
|
||||
title="Browse Items"
|
||||
description="Search through our comprehensive database of lost and found items"
|
||||
tag="Search & Filter"
|
||||
features={[
|
||||
{
|
||||
id: "1", title: "Browse Lost Items", description: "Search items that people have reported as lost. Filter by category, date posted, and item description to find your missing belongings.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-university-students-using-laptop-while-sitting-hallway_637285-9244.jpg?_wi=1"
|
||||
},
|
||||
items: [
|
||||
{ icon: Search, text: "Detailed search" },
|
||||
{ icon: Filter, text: "Advanced filters" },
|
||||
{ icon: Calendar, text: "Date filtering" }
|
||||
],
|
||||
reverse: false
|
||||
},
|
||||
{
|
||||
id: "2", title: "Browse Found Items", description: "View items that have been found and are waiting to be claimed. Check details and photos to identify your belongings.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-university-students-using-laptop-while-sitting-hallway_637285-9244.jpg?_wi=2"
|
||||
},
|
||||
items: [
|
||||
{ icon: Filter, text: "Filter by type" },
|
||||
{ icon: Calendar, text: "Recent items" },
|
||||
{ icon: Tag, text: "Category tags" }
|
||||
],
|
||||
reverse: true
|
||||
},
|
||||
{
|
||||
id: "3", title: "Filtering Options", description: "Narrow down your search using multiple filters including item category, date found/lost, condition, and item description for precise results.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-university-students-using-laptop-while-sitting-hallway_637285-9244.jpg?_wi=3"
|
||||
},
|
||||
items: [
|
||||
{ icon: Filter, text: "Category filter" },
|
||||
{ icon: Calendar, text: "Date range" },
|
||||
{ icon: Search, text: "Keyword search" }
|
||||
],
|
||||
reverse: false
|
||||
}
|
||||
]}
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="report" data-section="report">
|
||||
<BlogCardThree
|
||||
title="Recently Reported Items"
|
||||
description="Latest lost and found items in our system"
|
||||
tag="Recent Reports"
|
||||
blogs={[
|
||||
{
|
||||
id: "1", category: "Electronics", title: "Black iPhone 14 Pro - Lost at Terminal 2", excerpt: "Lost on January 15, 2025. Last seen at airport terminal 2. Contains important business documents. Contact with any information.", imageSrc: "http://img.b2bpic.net/free-photo/startup-business-teamwork-concept-group-perspective-young-people-meeting-big-modern-library-talking-about-profits-last-project-looking-through-papers-smiling-having-productive-tim_176420-8298.jpg?_wi=2", imageAlt: "Lost iPhone", authorName: "John Smith", authorAvatar: "http://img.b2bpic.net/free-photo/two-serious-middle-aged-male-female-business-people-outdoors_1262-12576.jpg", date: "January 15, 2025"
|
||||
},
|
||||
{
|
||||
id: "2", category: "Documents", title: "Blue Leather Passport Wallet - Found at Downtown Station", excerpt: "Found at downtown metro station containing travel documents and ID cards. Passport holder contains initials 'MJ'. Ready for pickup.", imageSrc: "http://img.b2bpic.net/free-photo/startup-business-teamwork-concept-group-perspective-young-people-meeting-big-modern-library-talking-about-profits-last-project-looking-through-papers-smiling-having-productive-tim_176420-8298.jpg?_wi=3", imageAlt: "Found wallet", authorName: "Lost & Found Team", authorAvatar: "http://img.b2bpic.net/free-photo/portrait-young-woman-library_641386-223.jpg", date: "January 14, 2025"
|
||||
},
|
||||
{
|
||||
id: "3", category: "Accessories", title: "Silver Watch with Leather Strap - Lost at Mall", excerpt: "Vintage silver watch with brown leather strap lost at shopping mall on January 12. Has sentimental value. Please contact if found.", imageSrc: "http://img.b2bpic.net/free-photo/startup-business-teamwork-concept-group-perspective-young-people-meeting-big-modern-library-talking-about-profits-last-project-looking-through-papers-smiling-having-productive-tim_176420-8298.jpg?_wi=4", imageAlt: "Lost watch", authorName: "Sarah Johnson", authorAvatar: "http://img.b2bpic.net/free-photo/two-serious-middle-aged-male-female-business-people-outdoors_1262-12576.jpg", date: "January 12, 2025"
|
||||
},
|
||||
{
|
||||
id: "4", category: "Clothing", title: "Navy Blue Winter Coat - Found at Park", excerpt: "Heavy-duty navy blue winter coat found at central park. Appears to be designer brand. Available for claim at lost & found office.", imageSrc: "http://img.b2bpic.net/free-photo/startup-business-teamwork-concept-group-perspective-young-people-meeting-big-modern-library-talking-about-profits-last-project-looking-through-papers-smiling-having-productive-tim_176420-8298.jpg?_wi=5", imageAlt: "Found coat", authorName: "Lost & Found Team", authorAvatar: "http://img.b2bpic.net/free-photo/portrait-young-woman-library_641386-223.jpg", date: "January 10, 2025"
|
||||
}
|
||||
]}
|
||||
textboxLayout="default"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={true}
|
||||
carouselMode="buttons"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faqs" data-section="faqs">
|
||||
<FaqBase
|
||||
title="Frequently Asked Questions"
|
||||
description="Find answers to common questions about our Lost & Found system"
|
||||
tag="Help & Support"
|
||||
faqs={[
|
||||
{
|
||||
id: "1", title: "How do I report a lost item?", content: "To report a lost item, click on 'Report Item' in the navigation menu. Fill out the form with detailed information about your item including category, description, date lost, location, and upload photos if available. Our team will review your report and list it in our database within 24 hours."
|
||||
},
|
||||
{
|
||||
id: "2", title: "How do I claim a found item?", content: "If you found an item that matches your lost item in our database, click on the item to view full details. Contact the person who reported it directly using the contact information provided, or reach out to our Lost & Found office with proof of ownership."
|
||||
},
|
||||
{
|
||||
id: "3", title: "What information should I provide when reporting an item?", content: "Please provide: item category, detailed description (color, brand, distinguishing marks), approximate date and location where lost, and any photos if available. The more details you provide, the better chance of finding your item."
|
||||
},
|
||||
{
|
||||
id: "4", title: "How long are items kept in the system?", content: "Items are typically kept in our Lost & Found system for 90 days. After this period, unclaimed items may be donated to charity. If you believe your item has been lost, report it as soon as possible."
|
||||
},
|
||||
{
|
||||
id: "5", title: "Can I filter items by specific criteria?", content: "Yes! You can filter items by category (Electronics, Documents, Accessories, Clothing, Other), date range (Last 7 days, 30 days, 90 days, All time), and use keyword search to find specific items."
|
||||
},
|
||||
{
|
||||
id: "6", title: "Is my personal information safe?", content: "Your privacy is our priority. Personal contact information is only visible to verified users. We recommend meeting in public places and bringing proof of ownership when claiming items."
|
||||
}
|
||||
]}
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqsAnimation="slide-up"
|
||||
animationType="smooth"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoEmphasis
|
||||
logoText="Lost & Found Portal"
|
||||
columns={[
|
||||
{
|
||||
items: [
|
||||
{ label: "Browse Lost Items", href: "#browse" },
|
||||
{ label: "Browse Found Items", href: "#browse" },
|
||||
{ label: "Report Item", href: "#report" }
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "How It Works", href: "#" },
|
||||
{ label: "Categories", href: "#" },
|
||||
{ label: "Recent Reports", href: "#report" }
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "FAQs", href: "#faqs" },
|
||||
{ label: "Contact Us", href: "#" },
|
||||
{ label: "Safety Tips", href: "#" }
|
||||
]
|
||||
},
|
||||
{
|
||||
items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
{ label: "Report Abuse", href: "#" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user