Skip to content

Commit f90a005

Browse files
DevSsCharDevSsChar
committed
Demo component added and fixed few ui errors
1 parent 4ee1242 commit f90a005

7 files changed

Lines changed: 1106 additions & 92 deletions

File tree

‎app/demo/page.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
"use client"
2+
import { useEffect } from "react";
3+
import { useSession } from "next-auth/react";
4+
import { useRouter } from "next/navigation";
5+
import Demo from "@/components/demo";
6+
7+
export default function Home() {
8+
// if (status === "authenticated") return null; // prevent flicker
9+
10+
return (
11+
<div className="font-sans min-h-screen">
12+
<Demo />
13+
</div>
14+
);
15+
}

‎components/belowsection1.jsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
"use client";
22
import React from 'react';
33
import { useTheme } from './ThemeContext';
4+
import Link from 'next/link';
45

56
export default function HowItWorks() {
67
const { darkMode } = useTheme();
@@ -126,9 +127,11 @@ export default function HowItWorks() {
126127
</div>
127128

128129
<div className="text-center mt-16">
129-
<button className={`inline-flex items-center justify-center gap-2 ${darkMode ? 'bg-cyan-500 hover:bg-cyan-600' : 'bg-cyan-400 hover:bg-cyan-500'} text-white font-semibold shadow-md hover:shadow-lg transition-all duration-300 h-11 rounded-md px-8 py-4`}>
130-
See It In Action
131-
</button>
130+
<Link href="/scanner">
131+
<button className={`inline-flex items-center justify-center gap-2 ${darkMode ? 'bg-cyan-500 hover:bg-cyan-600' : 'bg-cyan-400 hover:bg-cyan-500'} text-white font-semibold shadow-md hover:shadow-lg transition-all duration-300 h-11 rounded-md px-8 py-4 cursor-pointer`}>
132+
See It In Action
133+
</button>
134+
</Link>
132135
</div>
133136
</div>
134137
</section>

‎components/dashboard.jsx‎

Lines changed: 200 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -173,7 +173,7 @@ export default function UserDashboard({ user: userProp = null, reports: reportsP
173173
const userData = userProp || {
174174
fullName: session?.user?.name || "User",
175175
email: session?.user?.email || "",
176-
scansCount: 0,
176+
scansCount: session?.user?.scansCount,
177177
// Set last login to current date if not available
178178
lastLoginAt: session?.user?.lastLoginAt || new Date().toISOString(),
179179
};
@@ -497,7 +497,206 @@ export default function UserDashboard({ user: userProp = null, reports: reportsP
497497
)}
498498
</motion.div>
499499

500+
{/* Before & After Comparisons */}
501+
<motion.div
502+
initial={{ opacity: 0, y: 20 }}
503+
animate={{ opacity: 1, y: 0 }}
504+
transition={{ duration: 0.5, delay: 0.5 }}
505+
className={`rounded-xl shadow-md border p-6 mb-8 ${darkMode
506+
? 'bg-gray-800 border-gray-700'
507+
: 'bg-white border-gray-100'}`}
508+
>
509+
<div className={`flex flex-col sm:flex-row sm:items-center justify-between mb-6 pb-4 border-b ${darkMode
510+
? 'border-gray-700'
511+
: 'border-gray-100'}`}>
512+
<div>
513+
<h2 className={`text-xl font-semibold ${darkMode ? 'text-white' : 'text-gray-900'}`}>Before & After Comparisons</h2>
514+
<p className={`text-sm ${darkMode ? 'text-gray-400' : 'text-gray-600'} mt-1`}>See the improvements made after implementing our recommendations</p>
515+
</div>
516+
</div>
517+
518+
<div className="grid md:grid-cols-2 gap-6">
519+
{reports?.length > 0 ? (
520+
<>
521+
<div className={`p-5 rounded-lg border ${darkMode ? 'bg-gray-900 border-gray-700' : 'bg-gray-50 border-gray-200'}`}>
522+
<h3 className={`text-lg font-semibold mb-3 ${darkMode ? 'text-white' : 'text-gray-900'}`}>Before Fixes</h3>
523+
<div className="space-y-3">
524+
<div className="flex items-start gap-2">
525+
<div className={`min-w-5 h-5 rounded-full flex items-center justify-center mt-0.5 ${darkMode ? 'bg-red-900/30 text-red-400' : 'bg-red-100 text-red-600'}`}>
526+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
527+
<line x1="18" y1="6" x2="6" y2="18"></line>
528+
<line x1="6" y1="6" x2="18" y2="18"></line>
529+
</svg>
530+
</div>
531+
<span className={`text-sm ${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>Missing image alt text on 12 images</span>
532+
</div>
533+
<div className="flex items-start gap-2">
534+
<div className={`min-w-5 h-5 rounded-full flex items-center justify-center mt-0.5 ${darkMode ? 'bg-red-900/30 text-red-400' : 'bg-red-100 text-red-600'}`}>
535+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
536+
<line x1="18" y1="6" x2="6" y2="18"></line>
537+
<line x1="6" y1="6" x2="18" y2="18"></line>
538+
</svg>
539+
</div>
540+
<span className={`text-sm ${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>Low color contrast ratio (1.8:1)</span>
541+
</div>
542+
<div className="flex items-start gap-2">
543+
<div className={`min-w-5 h-5 rounded-full flex items-center justify-center mt-0.5 ${darkMode ? 'bg-red-900/30 text-red-400' : 'bg-red-100 text-red-600'}`}>
544+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
545+
<line x1="18" y1="6" x2="6" y2="18"></line>
546+
<line x1="6" y1="6" x2="18" y2="18"></line>
547+
</svg>
548+
</div>
549+
<span className={`text-sm ${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>Non-descriptive link text ("click here")</span>
550+
</div>
551+
<div className="flex items-start gap-2">
552+
<div className={`min-w-5 h-5 rounded-full flex items-center justify-center mt-0.5 ${darkMode ? 'bg-red-900/30 text-red-400' : 'bg-red-100 text-red-600'}`}>
553+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
554+
<line x1="18" y1="6" x2="6" y2="18"></line>
555+
<line x1="6" y1="6" x2="18" y2="18"></line>
556+
</svg>
557+
</div>
558+
<span className={`text-sm ${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>No keyboard navigation support</span>
559+
</div>
560+
</div>
561+
</div>
562+
<div className={`p-5 rounded-lg border ${darkMode ? 'bg-gray-900 border-gray-700' : 'bg-gray-50 border-gray-200'}`}>
563+
<h3 className={`text-lg font-semibold mb-3 ${darkMode ? 'text-white' : 'text-gray-900'}`}>After Fixes</h3>
564+
<div className="space-y-3">
565+
<div className="flex items-start gap-2">
566+
<div className={`min-w-5 h-5 rounded-full flex items-center justify-center mt-0.5 ${darkMode ? 'bg-green-900/30 text-green-400' : 'bg-green-100 text-green-600'}`}>
567+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
568+
<polyline points="20 6 9 17 4 12"></polyline>
569+
</svg>
570+
</div>
571+
<span className={`text-sm ${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>Descriptive alt text added to all images</span>
572+
</div>
573+
<div className="flex items-start gap-2">
574+
<div className={`min-w-5 h-5 rounded-full flex items-center justify-center mt-0.5 ${darkMode ? 'bg-green-900/30 text-green-400' : 'bg-green-100 text-green-600'}`}>
575+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
576+
<polyline points="20 6 9 17 4 12"></polyline>
577+
</svg>
578+
</div>
579+
<span className={`text-sm ${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>Color contrast improved to 7:1 ratio</span>
580+
</div>
581+
<div className="flex items-start gap-2">
582+
<div className={`min-w-5 h-5 rounded-full flex items-center justify-center mt-0.5 ${darkMode ? 'bg-green-900/30 text-green-400' : 'bg-green-100 text-green-600'}`}>
583+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
584+
<polyline points="20 6 9 17 4 12"></polyline>
585+
</svg>
586+
</div>
587+
<span className={`text-sm ${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>Descriptive link text implemented</span>
588+
</div>
589+
<div className="flex items-start gap-2">
590+
<div className={`min-w-5 h-5 rounded-full flex items-center justify-center mt-0.5 ${darkMode ? 'bg-green-900/30 text-green-400' : 'bg-green-100 text-green-600'}`}>
591+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
592+
<polyline points="20 6 9 17 4 12"></polyline>
593+
</svg>
594+
</div>
595+
<span className={`text-sm ${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>Full keyboard navigation added</span>
596+
</div>
597+
</div>
598+
</div>
599+
</>
600+
) : (
601+
<div className="md:col-span-2 flex flex-col items-center py-8 text-center">
602+
<div className={`w-12 h-12 rounded-full flex items-center justify-center mb-3 ${darkMode ? 'bg-gray-700' : 'bg-gray-100'}`}>
603+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
604+
stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
605+
className={darkMode ? 'text-gray-400' : 'text-gray-500'}>
606+
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
607+
<line x1="12" y1="8" x2="12" y2="16"></line>
608+
<line x1="8" y1="12" x2="16" y2="12"></line>
609+
</svg>
610+
</div>
611+
<p className={`text-sm max-w-md ${darkMode ? 'text-gray-400' : 'text-gray-600'}`}>
612+
Run your first scan to see before and after comparisons of accessibility fixes.
613+
</p>
614+
</div>
615+
)}
616+
</div>
617+
</motion.div>
618+
619+
{/* Lawsuits Saved */}
620+
<motion.div
621+
initial={{ opacity: 0, y: 20 }}
622+
animate={{ opacity: 1, y: 0 }}
623+
transition={{ duration: 0.5, delay: 0.6 }}
624+
className={`rounded-xl shadow-md border p-6 ${darkMode
625+
? 'bg-gray-800 border-gray-700'
626+
: 'bg-white border-gray-100'}`}
627+
>
628+
<div className={`flex flex-col sm:flex-row sm:items-center justify-between mb-6 pb-4 border-b ${darkMode
629+
? 'border-gray-700'
630+
: 'border-gray-100'}`}>
631+
<div>
632+
<h2 className={`text-xl font-semibold ${darkMode ? 'text-white' : 'text-gray-900'}`}>Legal Risk Mitigation</h2>
633+
<p className={`text-sm ${darkMode ? 'text-gray-400' : 'text-gray-600'} mt-1`}>Potential legal risks avoided by fixing accessibility issues</p>
634+
</div>
635+
</div>
500636

637+
<div className="grid md:grid-cols-3 gap-4 mb-6">
638+
<div className={`p-5 rounded-lg border ${darkMode ? 'bg-gray-900 border-gray-700' : 'bg-gray-50 border-gray-200'} flex flex-col items-center text-center`}>
639+
<div className={`w-12 h-12 rounded-full flex items-center justify-center mb-2 ${darkMode ? 'bg-amber-900/30 text-amber-400' : 'bg-amber-100 text-amber-600'}`}>
640+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
641+
<circle cx="12" cy="12" r="10"></circle>
642+
<path d="m15 9-6 6"></path>
643+
<path d="m9 9 6 6"></path>
644+
</svg>
645+
</div>
646+
<h3 className={`text-xl font-bold ${darkMode ? 'text-white' : 'text-gray-900'}`}>14</h3>
647+
<p className={`text-sm ${darkMode ? 'text-gray-400' : 'text-gray-600'}`}>ADA violations fixed</p>
648+
</div>
649+
<div className={`p-5 rounded-lg border ${darkMode ? 'bg-gray-900 border-gray-700' : 'bg-gray-50 border-gray-200'} flex flex-col items-center text-center`}>
650+
<div className={`w-12 h-12 rounded-full flex items-center justify-center mb-2 ${darkMode ? 'bg-purple-900/30 text-purple-400' : 'bg-purple-100 text-purple-600'}`}>
651+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
652+
<path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"></path>
653+
<circle cx="12" cy="10" r="3"></circle>
654+
</svg>
655+
</div>
656+
<h3 className={`text-xl font-bold ${darkMode ? 'text-white' : 'text-gray-900'}`}>3</h3>
657+
<p className={`text-sm ${darkMode ? 'text-gray-400' : 'text-gray-600'}`}>States with compliance</p>
658+
</div>
659+
<div className={`p-5 rounded-lg border ${darkMode ? 'bg-gray-900 border-gray-700' : 'bg-gray-50 border-gray-200'} flex flex-col items-center text-center`}>
660+
<div className={`w-12 h-12 rounded-full flex items-center justify-center mb-2 ${darkMode ? 'bg-emerald-900/30 text-emerald-400' : 'bg-emerald-100 text-emerald-600'}`}>
661+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
662+
<path d="M12 2v20"></path>
663+
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
664+
</svg>
665+
</div>
666+
<h3 className={`text-xl font-bold ${darkMode ? 'text-white' : 'text-gray-900'}`}>$75K</h3>
667+
<p className={`text-sm ${darkMode ? 'text-gray-400' : 'text-gray-600'}`}>Est. savings per lawsuit</p>
668+
</div>
669+
</div>
670+
671+
<div className={`p-5 rounded-lg border ${darkMode ? 'bg-gray-900 border-gray-700' : 'bg-gray-50 border-gray-200'}`}>
672+
<h3 className={`text-lg font-semibold mb-3 ${darkMode ? 'text-white' : 'text-gray-900'}`}>Recent Web Accessibility Legal Cases</h3>
673+
<div className="space-y-4">
674+
<div className={`p-3 rounded-lg ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
675+
<div className="flex justify-between items-start mb-1">
676+
<h4 className={`font-medium ${darkMode ? 'text-white' : 'text-gray-900'}`}>Gill v. Winn-Dixie Stores, Inc.</h4>
677+
<span className={`text-xs px-2 py-1 rounded ${darkMode ? 'bg-blue-900/30 text-blue-300' : 'bg-blue-50 text-blue-700'}`}>$250K settlement</span>
678+
</div>
679+
<p className={`text-sm ${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>Plaintiff couldn't use screen reader due to improperly coded website.</p>
680+
</div>
681+
682+
<div className={`p-3 rounded-lg ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
683+
<div className="flex justify-between items-start mb-1">
684+
<h4 className={`font-medium ${darkMode ? 'text-white' : 'text-gray-900'}`}>Robles v. Domino's Pizza</h4>
685+
<span className={`text-xs px-2 py-1 rounded ${darkMode ? 'bg-blue-900/30 text-blue-300' : 'bg-blue-50 text-blue-700'}`}>Ongoing</span>
686+
</div>
687+
<p className={`text-sm ${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>Supreme Court denied appeal, ADA applies to websites & apps.</p>
688+
</div>
689+
690+
<div className={`p-3 rounded-lg ${darkMode ? 'bg-gray-800' : 'bg-white'}`}>
691+
<div className="flex justify-between items-start mb-1">
692+
<h4 className={`font-medium ${darkMode ? 'text-white' : 'text-gray-900'}`}>National Federation of the Blind v. Target</h4>
693+
<span className={`text-xs px-2 py-1 rounded ${darkMode ? 'bg-blue-900/30 text-blue-300' : 'bg-blue-50 text-blue-700'}`}>$6M settlement</span>
694+
</div>
695+
<p className={`text-sm ${darkMode ? 'text-gray-300' : 'text-gray-700'}`}>Landmark case establishing that the ADA applies to websites.</p>
696+
</div>
697+
</div>
698+
</div>
699+
</motion.div>
501700
</div>
502701
</section>
503702
);

0 commit comments

Comments
 (0)