Skip to content

Commit 88d52f6

Browse files
akshatkakkar1akshatkakkar1
committed
how it works
1 parent 662ad21 commit 88d52f6

File tree

4 files changed

+220
-102
lines changed

4 files changed

+220
-102
lines changed

‎frontend/src/components/Navbar.jsx‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,6 @@ const Navbar = () => {
3333
<AlertCircle size={18} />
3434
Report Lost Item
3535
</Link>
36-
<Link to="/how-it-works" className="flex items-center gap-1 transition-colors">
37-
<span className="rainbow-text font-semibold">How It Works</span>
38-
</Link>
3936
{isAuthenticated ? (
4037
<>
4138
{user?.isAdmin && (
@@ -127,9 +124,6 @@ const Navbar = () => {
127124
Report Lost Item
128125
</div>
129126
</Link>
130-
<Link to="/how-it-works" onClick={() => setOpen(false)} className="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-50 dark:hover:bg-gray-800">
131-
<span className="rainbow-text font-semibold">How It Works</span>
132-
</Link>
133127
{isAuthenticated ? (
134128
<>
135129
{user?.isAdmin && (

‎frontend/src/index.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,4 +47,28 @@
4747
background-position: 100% 50%;
4848
}
4949
}
50+
51+
/* 3D Flip Card Utilities */
52+
.perspective-1000 {
53+
perspective: 1000px;
54+
min-height: 350px;
55+
}
56+
57+
.transform-style-3d {
58+
transform-style: preserve-3d;
59+
}
60+
61+
.backface-hidden {
62+
backface-visibility: hidden;
63+
}
64+
65+
.rotate-y-180 {
66+
transform: rotateY(180deg);
67+
}
68+
69+
@media (max-width: 768px) {
70+
.perspective-1000 {
71+
min-height: 400px;
72+
}
73+
}
5074
}

‎frontend/src/pages/Home.jsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,46 @@ const Home = () => {
128128

129129
return (
130130
<div className={`min-h-screen transition-colors duration-300 ${darkMode ? 'bg-slate-900' : 'bg-gray-50'}`}>
131+
{/* Animated How It Works Button - slides in from left */}
132+
<motion.div
133+
initial={{ x: -100, opacity: 0 }}
134+
animate={{ x: 0, opacity: 1 }}
135+
transition={{
136+
type: "spring",
137+
stiffness: 100,
138+
damping: 20,
139+
delay: 0.5
140+
}}
141+
className="fixed top-20 left-4 z-40"
142+
>
143+
<button
144+
onClick={() => navigate('/how-it-works')}
145+
className={`group px-4 py-3 rounded-full shadow-lg transition-all duration-300 ${
146+
darkMode
147+
? 'bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500'
148+
: 'bg-gradient-to-r from-blue-500 to-teal-500 hover:from-blue-400 hover:to-teal-400'
149+
} hover:scale-105 flex items-center justify-center gap-2`}
150+
title="How It Works"
151+
>
152+
<svg
153+
className="w-5 h-5 text-white"
154+
fill="none"
155+
stroke="currentColor"
156+
viewBox="0 0 24 24"
157+
>
158+
<path
159+
strokeLinecap="round"
160+
strokeLinejoin="round"
161+
strokeWidth={2}
162+
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
163+
/>
164+
</svg>
165+
<span className="text-white font-semibold text-sm whitespace-nowrap">
166+
How It Works
167+
</span>
168+
</button>
169+
</motion.div>
170+
131171
<div className="px-4 sm:px-6 md:px-8 lg:px-16 xl:px-24 py-12">
132172
{/* Hero Section */}
133173
<div className="text-center mb-16 mt-8">

‎frontend/src/pages/HowItWorks.jsx‎

Lines changed: 156 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,171 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
22
import { useDarkMode } from '../context/DarkModeContext';
33

4+
const FlashCard = ({ title, icon, children, darkMode }) => {
5+
const [isFlipped, setIsFlipped] = useState(false);
6+
7+
return (
8+
<div
9+
className="perspective-1000 h-full cursor-pointer"
10+
onClick={() => setIsFlipped(!isFlipped)}
11+
>
12+
<div
13+
className={`relative w-full h-full transition-transform duration-500 transform-style-3d ${isFlipped ? 'rotate-y-180' : ''}`}
14+
style={{ transformStyle: 'preserve-3d' }}
15+
>
16+
{/* Front of card */}
17+
<div
18+
className={`absolute inset-0 backface-hidden rounded-xl shadow-lg p-6 flex flex-col items-center justify-center text-center ${
19+
darkMode ? 'bg-gradient-to-br from-indigo-900 to-purple-900 border-2 border-indigo-700' : 'bg-gradient-to-br from-indigo-500 to-purple-500 border-2 border-indigo-300'
20+
}`}
21+
style={{ backfaceVisibility: 'hidden' }}
22+
>
23+
<div className="text-6xl mb-4">{icon}</div>
24+
<h3 className="text-2xl font-bold text-white">{title}</h3>
25+
<p className="text-sm text-gray-200 mt-4">Click to learn more</p>
26+
</div>
27+
28+
{/* Back of card */}
29+
<div
30+
className={`absolute inset-0 backface-hidden rounded-xl shadow-lg p-6 overflow-y-auto ${
31+
darkMode ? 'bg-gray-800 border-2 border-indigo-700' : 'bg-white border-2 border-indigo-300'
32+
}`}
33+
style={{ backfaceVisibility: 'hidden', transform: 'rotateY(180deg)' }}
34+
>
35+
<div className={`${darkMode ? 'text-gray-300' : 'text-gray-700'} text-sm leading-relaxed`}>
36+
{children}
37+
</div>
38+
</div>
39+
</div>
40+
</div>
41+
);
42+
};
43+
444
const HowItWorks = () => {
5-
const { darkMode, toggleDarkMode } = useDarkMode();
45+
const { darkMode } = useDarkMode();
646

747
return (
848
<div className={`min-h-screen ${darkMode ? 'bg-gray-900' : 'bg-gray-50'} py-12 px-4 sm:px-6 lg:px-8`}>
9-
<div className={`max-w-4xl mx-auto ${darkMode ? 'bg-gray-800' : 'bg-white'} rounded-xl shadow-lg p-8`}>
10-
<h1 className={`text-4xl md:text-5xl font-bold mb-10 ${darkMode ? 'text-indigo-400' : 'text-indigo-700'} text-center`}>
11-
How the Lost & Found Portal Works
12-
</h1>
49+
{/* Page Title */}
50+
<h1 className={`text-4xl md:text-5xl font-bold mb-12 ${darkMode ? 'text-indigo-400' : 'text-indigo-700'} text-center`}>
51+
How the Lost & Found Portal Works
52+
</h1>
1353

14-
<section className="mb-8">
15-
<h2 className={`text-2xl font-bold mb-3 ${darkMode ? 'text-gray-100' : 'text-gray-900'}`}>
16-
Why We Built This <span aria-hidden>🔎</span>
17-
</h2>
18-
<div className={`${darkMode ? 'text-gray-300' : 'text-gray-700'} leading-relaxed space-y-3`}>
19-
<p>
20-
Historically, campus-wide <span className="font-semibold">lost-and-found updates</span> were sent as <span className="font-semibold">mass emails</span> to everyone. People who haven't lost anything often ignore these messages. That <span className="font-semibold">clutters inboxes</span> and can cause important communications (for example, internship or administrative notices) to get buried and missed.
21-
</p>
22-
<p>
23-
This portal fixes that by centralizing found-item listings and claims where people expect to look. Administrators list only items they physically hold, and only users who need to check (or who have reported a loss) need to visit the portal. The result is <span className="font-semibold">less inbox noise</span>, fewer missed emails, and clearer, more reliable matching and claiming.
24-
</p>
25-
<p>
26-
We also added a dedicated <span className="font-semibold">Report Lost Item 📝</span> feature so people can submit structured reports with photos and location details. Reports with clear images and accurate locations are far more credible than anonymous claims — admins are therefore more likely to trust and prioritise a claimant who has submitted a proper report. The portal links reports to claims and provides the admin dashboard with counts and statuses (submitted, accepted, rejected). This helps detect repeated or suspicious claim patterns and reduces manual work compared to scanning many emails.
27-
</p>
28-
<p>
29-
<strong>⚠️ Important safety note:</strong> Avoid sharing detailed photos or precise locations of lost items in mass emails. Posting images or locations widely can make items easier for dishonest actors to find and steal. Use this portal so sensitive information stays within controlled, verifiable channels.
30-
</p>
31-
</div>
32-
</section>
54+
{/* Flashcard Grid - Outside Frame */}
55+
<div className="max-w-7xl mx-auto mb-12">
56+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8">
57+
58+
{/* Why We Built This Card */}
59+
<FlashCard
60+
title="Why We Built This"
61+
icon="🔎"
62+
darkMode={darkMode}
63+
>
64+
<div className="space-y-3">
65+
<p>
66+
Historically, campus-wide <span className="font-semibold">lost-and-found updates</span> were sent as <span className="font-semibold">mass emails</span> to everyone. People who haven't lost anything often ignore these messages. That <span className="font-semibold">clutters inboxes</span> and can cause important communications to get buried and missed.
67+
</p>
68+
<p>
69+
This portal fixes that by centralizing found-item listings and claims where people expect to look. The result is <span className="font-semibold">less inbox noise</span>, fewer missed emails, and clearer, more reliable matching and claiming.
70+
</p>
71+
<p>
72+
We also added a dedicated <span className="font-semibold">Report Lost Item 📝</span> feature so people can submit structured reports with photos and location details. Reports with clear images and accurate locations are far more credible than anonymous claims.
73+
</p>
74+
<p>
75+
<strong>⚠️ Important safety note:</strong> Avoid sharing detailed photos or precise locations of lost items in mass emails. Use this portal so sensitive information stays within controlled, verifiable channels.
76+
</p>
77+
</div>
78+
</FlashCard>
3379

34-
<section className="mb-10">
35-
<h2 className={`text-2xl font-bold mb-4 ${darkMode ? 'text-gray-100' : 'text-gray-900'} border-b ${darkMode ? 'border-gray-700' : 'border-gray-200'} pb-2`}>
36-
Overview <span aria-hidden>📋</span>
37-
</h2>
38-
<div className={`${darkMode ? 'text-gray-300' : 'text-gray-700'} leading-relaxed space-y-3`}>
39-
<p>
40-
This portal is managed by Thapar University administration. <span className={`font-semibold ${darkMode ? 'text-indigo-400' : 'text-indigo-600'}`}>📌 Only items that have been physically deposited with the campus guard or admin are listed here as found items.</span> If you have lost something, you can file a report here. If you find an item, <span className="font-semibold">please hand it over to the campus guard or admin</span>. The admin will add it to the portal if it is in their possession.
41-
</p>
42-
<div className={`${darkMode ? 'bg-gray-700/50' : 'bg-indigo-50'} p-4 rounded-lg border-l-4 ${darkMode ? 'border-indigo-400' : 'border-indigo-600'}`}>
43-
<p className={`${darkMode ? 'text-gray-300' : 'text-gray-800'}`}>
44-
<span className={`font-bold ${darkMode ? 'text-indigo-400' : 'text-indigo-700'}`}>🔔 Important:</span> It is <span className="font-semibold">not</span> the admin's responsibility to proactively search for your lost item or to match found items with your report. There is currently no automated or AI/ML system for matching lost and found items. The admin's role is to securely store deposited items, upload them to the portal, and verify claims in person at the office. <span className="font-semibold">It is your responsibility to check the portal and apply for claim if you have lost something.</span>
80+
{/* Overview Card */}
81+
<FlashCard
82+
title="Overview"
83+
icon="📋"
84+
darkMode={darkMode}
85+
>
86+
<div className="space-y-3">
87+
<p>
88+
This portal is managed by Thapar University administration. <span className={`font-semibold ${darkMode ? 'text-indigo-400' : 'text-indigo-600'}`}>📌 Only items that have been physically deposited with the campus guard or admin are listed here as found items.</span>
4589
</p>
90+
<p>
91+
If you have lost something, you can file a report here. If you find an item, <span className="font-semibold">please hand it over to the campus guard or admin</span>. The admin will add it to the portal if it is in their possession.
92+
</p>
93+
<div className={`${darkMode ? 'bg-gray-700/50' : 'bg-indigo-50'} p-3 rounded-lg border-l-4 ${darkMode ? 'border-indigo-400' : 'border-indigo-600'} mt-3`}>
94+
<p className={`${darkMode ? 'text-gray-300' : 'text-gray-800'} text-xs`}>
95+
<span className={`font-bold ${darkMode ? 'text-indigo-400' : 'text-indigo-700'}`}>🔔 Important:</span> It is <span className="font-semibold">not</span> the admin's responsibility to proactively search for your lost item. <span className="font-semibold">It is your responsibility to check the portal and apply for claim if you have lost something.</span>
96+
</p>
97+
</div>
4698
</div>
47-
48-
</div>
49-
</section>
99+
</FlashCard>
50100

51-
<section className="mb-10">
52-
<h2 className={`text-2xl font-bold mb-4 ${darkMode ? 'text-gray-100' : 'text-gray-900'} border-b ${darkMode ? 'border-gray-700' : 'border-gray-200'} pb-2`}>
53-
If You Lost an Item <span aria-hidden>🧭</span>
54-
</h2>
55-
<ol className={`list-decimal list-inside ${darkMode ? 'text-gray-300' : 'text-gray-700'} space-y-3 pl-2`}>
56-
<li className="pl-2">
57-
<span className="mr-2">📝</span>
58-
Click the{' '}
59-
<a
60-
href="/report-lost-item"
61-
className={`font-semibold underline ${darkMode ? 'text-indigo-400 hover:text-indigo-300' : 'text-indigo-600 hover:text-indigo-500'}`}
62-
>
63-
Report Lost Item
64-
</a>{' '}
65-
button in the navigation bar.
66-
</li>
67-
<li className="pl-2">
68-
<span className="mr-2">📸</span>
69-
Fill out the form with details and (optionally) upload photos.
70-
</li>
71-
<li className="pl-2">
72-
<span className="mr-2">🔐</span>
73-
If not logged in, you'll be asked to log in before submitting.
74-
</li>
75-
<li className="pl-2">
76-
<span className="mr-2">👀</span>
77-
Your report will be visible to you and administrators only.
78-
</li>
79-
<li className="pl-2">
80-
<span className="mr-2">✅</span>
81-
If your item is found and deposited with the admin, it will appear in the portal's found items list and you can submit a claim.
82-
</li>
83-
</ol>
84-
</section>
101+
{/* If You Lost an Item Card */}
102+
<FlashCard
103+
title="If You Lost an Item"
104+
icon="🧭"
105+
darkMode={darkMode}
106+
>
107+
<ol className="list-decimal list-inside space-y-2">
108+
<li className="pl-2">
109+
<span className="mr-2">📝</span>
110+
Click the{' '}
111+
<a
112+
href="/report-lost-item"
113+
className={`font-semibold underline ${darkMode ? 'text-indigo-400 hover:text-indigo-300' : 'text-indigo-600 hover:text-indigo-500'}`}
114+
>
115+
Report Lost Item
116+
</a>{' '}
117+
button in the navigation bar.
118+
</li>
119+
<li className="pl-2">
120+
<span className="mr-2">📸</span>
121+
Fill out the form with details and (optionally) upload photos.
122+
</li>
123+
<li className="pl-2">
124+
<span className="mr-2">🔐</span>
125+
If not logged in, you'll be asked to log in before submitting.
126+
</li>
127+
<li className="pl-2">
128+
<span className="mr-2">👀</span>
129+
Your report will be visible to you and administrators only.
130+
</li>
131+
<li className="pl-2">
132+
<span className="mr-2">✅</span>
133+
If your item is found and deposited with the admin, it will appear in the portal's found items list and you can submit a claim.
134+
</li>
135+
</ol>
136+
</FlashCard>
85137

86-
<section className="mb-10">
87-
<h2 className={`text-2xl font-bold mb-4 ${darkMode ? 'text-gray-100' : 'text-gray-900'} border-b ${darkMode ? 'border-gray-700' : 'border-gray-200'} pb-2`}>
88-
If You Found an Item <span aria-hidden>📦</span>
89-
</h2>
90-
<ol className={`list-decimal list-inside ${darkMode ? 'text-gray-300' : 'text-gray-700'} space-y-3 pl-2`}>
91-
<li className="pl-2">
92-
<span className="mr-2">⚠️</span>
93-
<span className="font-bold">You cannot list found items yourself.</span> Only the admin can add found items to the portal.
94-
</li>
95-
<li className="pl-2">
96-
<span className="mr-2">🤝</span>
97-
If you find an item, immediately hand it over to the campus guard or admin.
98-
</li>
99-
<li className="pl-2">
100-
<span className="mr-2">➕</span>
101-
Once the admin has the item, they will add it to the portal for others to see and claim.
102-
</li>
103-
<li className="pl-2">
104-
<span className="mr-2">🔒</span>
105-
This process ensures all listed found items are actually in the admin's possession, making the portal credible and secure.
106-
</li>
107-
</ol>
108-
</section>
138+
{/* If You Found an Item Card */}
139+
<FlashCard
140+
title="If You Found an Item"
141+
icon="📦"
142+
darkMode={darkMode}
143+
>
144+
<ol className="list-decimal list-inside space-y-2">
145+
<li className="pl-2">
146+
<span className="mr-2">⚠️</span>
147+
<span className="font-bold">You cannot list found items yourself.</span> Only the admin can add found items to the portal.
148+
</li>
149+
<li className="pl-2">
150+
<span className="mr-2">🤝</span>
151+
If you find an item, immediately hand it over to the campus guard or admin.
152+
</li>
153+
<li className="pl-2">
154+
<span className="mr-2">➕</span>
155+
Once the admin has the item, they will add it to the portal for others to see and claim.
156+
</li>
157+
<li className="pl-2">
158+
<span className="mr-2">🔒</span>
159+
This process ensures all listed found items are actually in the admin's possession, making the portal credible and secure.
160+
</li>
161+
</ol>
162+
</FlashCard>
163+
164+
</div>
165+
</div>
166+
167+
{/* Framed Container - Only for remaining sections */}
168+
<div className={`max-w-4xl mx-auto ${darkMode ? 'bg-gray-800' : 'bg-white'} rounded-xl shadow-lg p-8`}>
109169

110170
<section className="mb-10">
111171
<h2 className={`text-2xl font-bold mb-4 ${darkMode ? 'text-gray-100' : 'text-gray-900'} border-b ${darkMode ? 'border-gray-700' : 'border-gray-200'} pb-2`}>

0 commit comments

Comments
 (0)