Skip to content

Commit 5cd5829

Browse files
suvanbanerjeesuvanbanerjee
committed
404 page added with dark mode colour fixes
1 parent 16a552f commit 5cd5829

5 files changed

Lines changed: 115 additions & 59 deletions

File tree

‎app/not-found.tsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
"use client";
2+
3+
import Link from "next/link";
4+
import Image from "next/image";
5+
import { Button } from "@/components/ui/button";
6+
import { useState, useEffect } from "react";
7+
8+
export default function NotFound() {
9+
const [tagLine, setTagLine] = useState(0);
10+
11+
const funnyTaglines = [
12+
"Looks like this tag is missing from our database!",
13+
"This tag seems to have wandered off...",
14+
"Oops! This tag is playing hide and seek.",
15+
"Error 404: Tag not found in the wild!",
16+
"Houston, we have a problem. This tag is lost in space.",
17+
"This tag has gone on vacation without telling us.",
18+
];
19+
20+
useEffect(() => {
21+
const tagInterval = setInterval(() => {
22+
setTagLine(prev => (prev + 1) % funnyTaglines.length);
23+
}, 4000);
24+
25+
return () => {
26+
clearInterval(tagInterval);
27+
};
28+
}, []);
29+
30+
return (
31+
<div className="min-h-[80vh] flex flex-col items-center justify-center text-center px-4">
32+
<div className="relative mb-8">
33+
<h1 className="text-9xl font-bold">
34+
404
35+
</h1>
36+
</div>
37+
<h2 className="text-3xl md:text-4xl font-bold mb-4">Page Not Found</h2>
38+
39+
<p className="text-xl mb-8 max-w-md min-h-[60px] transition-all duration-500">
40+
{funnyTaglines[tagLine]}
41+
</p>
42+
43+
<div className="flex flex-col sm:flex-row gap-4">
44+
<Button asChild size="lg">
45+
<Link href="/">
46+
Take Me Home
47+
</Link>
48+
</Button>
49+
50+
<Button variant="outline" asChild size="lg">
51+
<Link href="/lookup">
52+
Look Up a Tag
53+
</Link>
54+
</Button>
55+
</div>
56+
</div>
57+
);
58+
}

‎app/page.tsx‎

Lines changed: 37 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -99,10 +99,10 @@ export default function Home() {
9999

100100
const getRecommendedTag = () => {
101101
let onlineScore = 0;
102-
if (userResponses.chronicCondition) onlineScore += 2;
102+
if (userResponses.chronicCondition) onlineScore += 1;
103103
if (userResponses.frequentUpdates) onlineScore += 2;
104104
if (userResponses.emergencyAccess) onlineScore += 1;
105-
if (userResponses.detailedHistory) onlineScore += 2;
105+
if (userResponses.detailedHistory) onlineScore -= 2;
106106

107107
return onlineScore >= 3 ? 'online' : 'serverless';
108108
};
@@ -112,7 +112,7 @@ export default function Home() {
112112
title: "Choose Your Tag Type",
113113
content: (
114114
<div className="space-y-4">
115-
<p className="text-sm text-gray-500 dark:text-gray-400">
115+
<p className="text-sm text-stone-500 dark:text-stone-400">
116116
Help us suggest the right tag type for your needs by answering a few quick questions.
117117
</p>
118118
<div className="flex justify-between mt-4">
@@ -137,12 +137,12 @@ export default function Home() {
137137
type="checkbox"
138138
checked={userResponses.chronicCondition}
139139
onChange={() => handleToggleResponse('chronicCondition')}
140-
className="w-4 h-4 border border-gray-300 rounded accent-red-600"
140+
className="w-4 h-4 border border-stone-300 rounded accent-red-600"
141141
/>
142142
</div>
143143
<div className="ml-3 text-sm">
144-
<label htmlFor="chronic" className="font-medium text-gray-700 dark:text-gray-300">I have chronic conditions that require ongoing management</label>
145-
<p className="text-xs text-gray-500 dark:text-gray-400">Like diabetes, heart disease, asthma, etc.</p>
144+
<label htmlFor="chronic" className="font-medium text-stone-700 dark:text-stone-300">I have chronic conditions that require ongoing management</label>
145+
<p className="text-xs text-stone-500 dark:text-stone-400">Like diabetes, heart disease, asthma, etc.</p>
146146
</div>
147147
</div>
148148

@@ -153,12 +153,12 @@ export default function Home() {
153153
type="checkbox"
154154
checked={userResponses.detailedHistory}
155155
onChange={() => handleToggleResponse('detailedHistory')}
156-
className="w-4 h-4 border border-gray-300 rounded accent-red-600"
156+
className="w-4 h-4 border border-stone-300 rounded accent-red-600"
157157
/>
158158
</div>
159159
<div className="ml-3 text-sm">
160-
<label htmlFor="history" className="font-medium text-gray-700 dark:text-gray-300">I have a detailed medical history</label>
161-
<p className="text-xs text-gray-500 dark:text-gray-400">Multiple diagnoses, procedures, or treatments</p>
160+
<label htmlFor="history" className="font-medium text-stone-700 dark:text-stone-300">I have a detailed medical history</label>
161+
<p className="text-xs text-stone-500 dark:text-stone-400">Multiple diagnoses, procedures, or treatments</p>
162162
</div>
163163
</div>
164164

@@ -184,12 +184,12 @@ export default function Home() {
184184
type="checkbox"
185185
checked={userResponses.frequentUpdates}
186186
onChange={() => handleToggleResponse('frequentUpdates')}
187-
className="w-4 h-4 border border-gray-300 rounded accent-red-600"
187+
className="w-4 h-4 border border-stone-300 rounded accent-red-600"
188188
/>
189189
</div>
190190
<div className="ml-3 text-sm">
191-
<label htmlFor="updates" className="font-medium text-gray-700 dark:text-gray-300">I need to update my medical information frequently</label>
192-
<p className="text-xs text-gray-500 dark:text-gray-400">Regular doctor visits, changing medications, etc.</p>
191+
<label htmlFor="updates" className="font-medium text-stone-700 dark:text-stone-300">I need to update my medical information frequently</label>
192+
<p className="text-xs text-stone-500 dark:text-stone-400">Regular doctor visits, changing medications, etc.</p>
193193
</div>
194194
</div>
195195

@@ -200,12 +200,12 @@ export default function Home() {
200200
type="checkbox"
201201
checked={userResponses.emergencyAccess}
202202
onChange={() => handleToggleResponse('emergencyAccess')}
203-
className="w-4 h-4 border border-gray-300 rounded accent-red-600"
203+
className="w-4 h-4 border border-stone-300 rounded accent-red-600"
204204
/>
205205
</div>
206206
<div className="ml-3 text-sm">
207-
<label htmlFor="emergency" className="font-medium text-gray-700 dark:text-gray-300">I want medical professionals to access my data in emergencies</label>
208-
<p className="text-xs text-gray-500 dark:text-gray-400">Provides quick access to critical information</p>
207+
<label htmlFor="emergency" className="font-medium text-stone-700 dark:text-stone-300">I dont have huge medical history</label>
208+
<p className="text-xs text-stone-500 dark:text-stone-400">I just want to store my basic information</p>
209209
</div>
210210
</div>
211211

@@ -230,10 +230,10 @@ export default function Home() {
230230
<Cloud className="mr-2 text-green-500" size={24} />
231231
<h3 className="font-semibold text-green-700 dark:text-green-400">We Recommend: Online Tag</h3>
232232
</div>
233-
<p className="text-sm text-gray-600 dark:text-gray-300">
233+
<p className="text-sm text-stone-600 dark:text-stone-300">
234234
Based on your needs, an Online Tag would be best for you. It offers:
235235
</p>
236-
<ul className="mt-2 space-y-1 text-sm text-gray-600 dark:text-gray-300">
236+
<ul className="mt-2 space-y-1 text-sm text-stone-600 dark:text-stone-300">
237237
<li className="flex items-start">
238238
<CheckCircle className="mr-1.5 h-4 w-4 text-green-500 flex-shrink-0 mt-0.5" />
239239
<span>Cloud storage with unlimited capacity</span>
@@ -258,10 +258,10 @@ export default function Home() {
258258
<Database className="mr-2 text-green-500" size={24} />
259259
<h3 className="font-semibold text-green-700 dark:text-green-400">We Recommend: Serverless Tag</h3>
260260
</div>
261-
<p className="text-sm text-gray-600 dark:text-gray-300">
261+
<p className="text-sm text-stone-600 dark:text-stone-300">
262262
Based on your needs, a Serverless Tag would work well for you. It offers:
263263
</p>
264-
<ul className="mt-2 space-y-1 text-sm text-gray-600 dark:text-gray-300">
264+
<ul className="mt-2 space-y-1 text-sm text-stone-600 dark:text-stone-300">
265265
<li className="flex items-start">
266266
<CheckCircle className="mr-1.5 h-4 w-4 text-green-500 flex-shrink-0 mt-0.5" />
267267
<span>Data stored directly in a QR code</span>
@@ -340,7 +340,7 @@ export default function Home() {
340340
</div>
341341
<div className="flex justify-center relative">
342342
<div className="relative w-64 h-64 sm:w-96 sm:h-96">
343-
<div className="absolute inset-0 bg-gray-100 dark:bg-gray-800/20 rounded-full animate-pulse" style={{ animationDuration: '3s' }}></div>
343+
<div className="absolute inset-0 bg-stone-100 dark:bg-stone-800/20 rounded-full animate-pulse" style={{ animationDuration: '3s' }}></div>
344344
<Image
345345
src="/opentag.png"
346346
alt="OpenTag Medical ID"
@@ -358,7 +358,7 @@ export default function Home() {
358358
</section>
359359

360360
{/* Emergency Stats Section */}
361-
<section className="py-16 bg-gray-50 dark:bg-gray-900/20">
361+
<section className="py-16 bg-stone-50 dark:bg-stone-900/20">
362362
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
363363
<div className="text-center mb-12">
364364
<h2 className="text-3xl sm:text-4xl font-bold mb-4">The Reality of Medical Emergencies</h2>
@@ -370,7 +370,7 @@ export default function Home() {
370370
{emergencyStats.map((stat, index) => (
371371
<div
372372
key={index}
373-
className="flex flex-col items-center text-center p-8 bg-white dark:bg-gray-800 rounded-xl shadow-md hover:shadow-lg transition-all duration-300"
373+
className="flex flex-col items-center text-center p-8 bg-white dark:bg-stone-800 rounded-xl shadow-md hover:shadow-lg transition-all duration-300"
374374
>
375375
<h3 className="text-5xl font-bold text-red-600 mb-4">{stat.number}</h3>
376376
<p className="text-muted-foreground mb-4">{stat.description}</p>
@@ -399,7 +399,7 @@ export default function Home() {
399399
</div>
400400

401401
<div className="grid grid-cols-1 md:grid-cols-3 gap-12">
402-
<div className="flex flex-col items-center text-center p-6 bg-gray-50 dark:bg-gray-900 rounded-xl shadow-md">
402+
<div className="flex flex-col items-center text-center p-6 bg-stone-50 dark:bg-stone-900 rounded-xl shadow-md">
403403
<div className="w-16 h-16 bg-red-100 dark:bg-red-900/20 rounded-full flex items-center justify-center mb-6">
404404
<Users className="h-8 w-8 text-red-600" />
405405
</div>
@@ -409,7 +409,7 @@ export default function Home() {
409409
</p>
410410
</div>
411411

412-
<div className="flex flex-col items-center text-center p-6 bg-gray-50 dark:bg-gray-900 rounded-xl shadow-md">
412+
<div className="flex flex-col items-center text-center p-6 bg-stone-50 dark:bg-stone-900 rounded-xl shadow-md">
413413
<div className="w-16 h-16 bg-red-100 dark:bg-red-900/20 rounded-full flex items-center justify-center mb-6">
414414
<Smartphone className="h-8 w-8 text-red-600" />
415415
</div>
@@ -419,7 +419,7 @@ export default function Home() {
419419
</p>
420420
</div>
421421

422-
<div className="flex flex-col items-center text-center p-6 bg-gray-50 dark:bg-gray-900 rounded-xl shadow-md">
422+
<div className="flex flex-col items-center text-center p-6 bg-stone-50 dark:bg-stone-900 rounded-xl shadow-md">
423423
<div className="w-16 h-16 bg-red-100 dark:bg-red-900/20 rounded-full flex items-center justify-center mb-6">
424424
<Clock className="h-8 w-8 text-red-600" />
425425
</div>
@@ -433,7 +433,7 @@ export default function Home() {
433433
</section>
434434

435435
{/* Tag Example Section */}
436-
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50 dark:bg-gray-900/20">
436+
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-stone-50 dark:bg-stone-900/20">
437437
<div className="max-w-7xl mx-auto">
438438
<div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
439439
<div className="relative w-full h-72 sm:h-96">
@@ -515,7 +515,7 @@ export default function Home() {
515515
</section>
516516

517517
{/* Use Cases Section */}
518-
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gray-100 dark:bg-gray-900">
518+
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-stone-100 dark:bg-stone-900">
519519
<div className="max-w-7xl mx-auto">
520520
<div className="text-center mb-12">
521521
<h2 className="text-3xl sm:text-4xl font-bold mb-4">Where to Use OpenTag</h2>
@@ -534,7 +534,7 @@ export default function Home() {
534534
{ icon: Baby, title: "Children's Items", description: "Add to your child's belongings for extra safety" },
535535
{ icon: Smartphone, title: "Phone Cases", description: "Always have your information on hand" },
536536
].map(({ icon: Icon, title, description }, index) => (
537-
<div key={index} className="flex flex-col items-center text-center p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-shadow">
537+
<div key={index} className="flex flex-col items-center text-center p-6 bg-white dark:bg-stone-800 rounded-lg shadow-md hover:shadow-lg transition-shadow">
538538
<Icon className="h-10 w-10 text-red-600 mb-4" />
539539
<h3 className="text-lg font-semibold mb-2">{title}</h3>
540540
<p className="text-sm text-muted-foreground">{description}</p>
@@ -551,19 +551,19 @@ export default function Home() {
551551
<h2 className="text-3xl font-bold mb-4">Frequently Asked Questions</h2>
552552
</div>
553553
<div className="space-y-6">
554-
<div className="bg-gray-50 dark:bg-gray-900 p-6 rounded-lg shadow-md">
554+
<div className="bg-stone-50 dark:bg-stone-900 p-6 rounded-lg shadow-md">
555555
<h3 className="text-xl font-semibold mb-2">Is my medical information secure?</h3>
556556
<p className="text-muted-foreground">
557557
Absolutely. We use end-to-end encryption and follow healthcare industry standards (HIPAA-compliant) to ensure your data is protected at all times.
558558
</p>
559559
</div>
560-
<div className="bg-gray-50 dark:bg-gray-900 p-6 rounded-lg shadow-md">
560+
<div className="bg-stone-50 dark:bg-stone-900 p-6 rounded-lg shadow-md">
561561
<h3 className="text-xl font-semibold mb-2">How do emergency responders know to look for my OpenTag?</h3>
562562
<p className="text-muted-foreground">
563563
OpenTag is becoming widely recognized among emergency services. Each tag is clearly marked with instructions, and we conduct ongoing education programs for first responders.
564564
</p>
565565
</div>
566-
<div className="bg-gray-50 dark:bg-gray-900 p-6 rounded-lg shadow-md">
566+
<div className="bg-stone-50 dark:bg-stone-900 p-6 rounded-lg shadow-md">
567567
<h3 className="text-xl font-semibold mb-2">Can I update my information?</h3>
568568
<p className="text-muted-foreground">
569569
Yes, you can update your medical information anytime through your secure account. Changes are reflected immediately when your QR code is scanned.
@@ -574,7 +574,7 @@ export default function Home() {
574574
</section>
575575

576576
{/* Security and Compliance Section */}
577-
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-gray-50 dark:bg-gray-900">
577+
<section className="py-16 px-4 sm:px-6 lg:px-8 bg-stone-50 dark:bg-stone-900">
578578
<div className="max-w-7xl mx-auto">
579579
<div className="text-center mb-12">
580580
<h2 className="text-3xl sm:text-4xl font-bold mb-4">Enterprise-Grade Security & Compliance</h2>
@@ -584,7 +584,7 @@ export default function Home() {
584584
</div>
585585

586586
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
587-
<div className="flex flex-col items-center text-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-md">
587+
<div className="flex flex-col items-center text-center p-6 bg-white dark:bg-stone-800 rounded-xl shadow-md">
588588
<div className="w-16 h-16 bg-red-100 dark:bg-red-900/20 rounded-full flex items-center justify-center mb-6">
589589
<ShieldCheck className="h-8 w-8 text-red-600" />
590590
</div>
@@ -608,7 +608,7 @@ export default function Home() {
608608
</ul>
609609
</div>
610610

611-
<div className="flex flex-col items-center text-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-md">
611+
<div className="flex flex-col items-center text-center p-6 bg-white dark:bg-stone-800 rounded-xl shadow-md">
612612
<div className="w-16 h-16 bg-red-100 dark:bg-red-900/20 rounded-full flex items-center justify-center mb-6">
613613
<Database className="h-8 w-8 text-red-600" />
614614
</div>
@@ -632,7 +632,7 @@ export default function Home() {
632632
</ul>
633633
</div>
634634

635-
<div className="flex flex-col items-center text-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-md">
635+
<div className="flex flex-col items-center text-center p-6 bg-white dark:bg-stone-800 rounded-xl shadow-md">
636636
<div className="w-16 h-16 bg-red-100 dark:bg-red-900/20 rounded-full flex items-center justify-center mb-6">
637637
<AlertTriangle className="h-8 w-8 text-red-600" />
638638
</div>
@@ -677,10 +677,10 @@ export default function Home() {
677677
{/* Tag Selection Modal */}
678678
{showTagModal && (
679679
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
680-
<div className="bg-white dark:bg-gray-800 rounded-lg p-6 max-w-md w-full mx-4">
680+
<div className="bg-white dark:bg-stone-800 rounded-lg p-6 max-w-md w-full mx-4">
681681
<div className="flex justify-between items-center mb-4">
682682
<h2 className="text-xl font-bold">{steps[currentStep].title}</h2>
683-
<div className="text-sm text-gray-500 dark:text-gray-400">
683+
<div className="text-sm text-stone-500 dark:text-stone-400">
684684
Step {currentStep + 1} of {steps.length}
685685
</div>
686686
</div>

‎app/register/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export default function RegisterPage() {
1010
<CardHeader>
1111
<CardTitle className="text-2xl">Register for OpenTag</CardTitle>
1212
<CardDescription>
13-
Create your account to get your digital vehicle tag
13+
Create your account to manage and create tags.
1414
</CardDescription>
1515
</CardHeader>
1616
<CardContent>

‎app/update/page.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import { UpdateProfileForm } from "@/components/auth/update-form"
22
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
33
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
4-
import { AlertCircle } from "lucide-react"
5-
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
64

75
export default function UpdatePage() {
86
return (

0 commit comments

Comments
 (0)