Merge version_1 into main #3
@@ -1,13 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
|
||||
import FeatureBento from '@/components/sections/feature/FeatureBento';
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
||||
import Link from "next/link";
|
||||
import { Zap, Mail, Lock, Upload, FileText, Share2, Clock, Settings, HelpCircle, User, CheckCircle, Shield } from 'lucide-react';
|
||||
|
||||
export default function DashboardPage() {
|
||||
return (
|
||||
@@ -28,296 +23,25 @@ export default function DashboardPage() {
|
||||
brandName="RetinoCare AI"
|
||||
navItems={[
|
||||
{ name: "Dashboard", id: "dashboard" },
|
||||
{ name: "Analysis", id: "analysis" },
|
||||
{ name: "Analysis", id: "/analysis" },
|
||||
{ name: "Reports", id: "reports" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "About", id: "/about" },
|
||||
]}
|
||||
button={{
|
||||
text: "Login",
|
||||
href: "#login",
|
||||
text: "Login", href: "#login"
|
||||
}}
|
||||
animateOnLoad={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDoubleCarousel
|
||||
title="Analysis Dashboard & Patient Management"
|
||||
description="Comprehensive diagnostic interface for managing retinal image analysis, viewing detailed classification results, and generating clinical reports. Real-time processing with secure patient data handling and complete audit trails for regulatory compliance."
|
||||
tag="Analysis Platform"
|
||||
tagIcon={Zap}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "glowing-orb" }}
|
||||
leftCarouselItems={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aqts5cdOEz32EulCCrVgrR1aoH/clean-modern-medical-interface-showing-f-1773332569664-81951b93.png?_wi=2",
|
||||
imageAlt: "Dashboard upload interface",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aqts5cdOEz32EulCCrVgrR1aoH/medical-severity-classification-dashboar-1773332569806-21e23b7b.png?_wi=4",
|
||||
imageAlt: "Classification results",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aqts5cdOEz32EulCCrVgrR1aoH/professional-medical-report-generation-i-1773332569855-51a5bd0d.png?_wi=3",
|
||||
imageAlt: "Report generation",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aqts5cdOEz32EulCCrVgrR1aoH/advanced-medical-ai-visualization-showin-1773332569223-2572aa3a.png?_wi=3",
|
||||
imageAlt: "Grad-CAM analysis",
|
||||
},
|
||||
]}
|
||||
rightCarouselItems={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aqts5cdOEz32EulCCrVgrR1aoH/professional-medical-report-generation-i-1773332569855-51a5bd0d.png?_wi=4",
|
||||
imageAlt: "Clinical report",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aqts5cdOEz32EulCCrVgrR1aoH/advanced-medical-ai-visualization-showin-1773332569223-2572aa3a.png?_wi=4",
|
||||
imageAlt: "AI visualization",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aqts5cdOEz32EulCCrVgrR1aoH/medical-severity-classification-dashboar-1773332569806-21e23b7b.png?_wi=5",
|
||||
imageAlt: "Severity levels",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aqts5cdOEz32EulCCrVgrR1aoH/clean-modern-medical-interface-showing-f-1773332569664-81951b93.png?_wi=3",
|
||||
imageAlt: "Upload workflow",
|
||||
},
|
||||
]}
|
||||
carouselPosition="right"
|
||||
buttons={[
|
||||
{
|
||||
text: "Go to Dashboard",
|
||||
href: "#dashboard-link",
|
||||
},
|
||||
{
|
||||
text: "View Documentation",
|
||||
href: "#docs",
|
||||
},
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="dashboard-features" data-section="dashboard-features">
|
||||
<FeatureBento
|
||||
title="Dashboard Analysis Tools"
|
||||
description="Integrated tools for patient management, image processing, and clinical reporting"
|
||||
tag="Core Features"
|
||||
tagIcon={Zap}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
features={[
|
||||
{
|
||||
title: "Patient Management",
|
||||
description: "Comprehensive patient records with secure storage, history tracking, and multi-image analysis per patient",
|
||||
bentoComponent: "phone",
|
||||
statusIcon: Lock,
|
||||
alertIcon: User,
|
||||
alertTitle: "Patient Loaded",
|
||||
alertMessage: "Records retrieved successfully",
|
||||
apps: [
|
||||
{ name: "Patients", icon: User },
|
||||
{ name: "Upload", icon: Upload },
|
||||
{ name: "Analyze", icon: Zap },
|
||||
{ name: "Reports", icon: FileText },
|
||||
{ name: "Export", icon: Share2 },
|
||||
{ name: "History", icon: Clock },
|
||||
{ name: "Settings", icon: Settings },
|
||||
{ name: "Support", icon: HelpCircle },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Real-Time Image Processing",
|
||||
description: "Instant ResNet analysis with confidence scoring and severity classification within seconds",
|
||||
bentoComponent: "animated-bar-chart",
|
||||
},
|
||||
{
|
||||
title: "Grad-CAM Visualization Engine",
|
||||
description: "Visual heatmaps highlighting pathological regions influencing the AI's diagnostic decision-making",
|
||||
bentoComponent: "globe",
|
||||
},
|
||||
{
|
||||
title: "Performance Metrics",
|
||||
description: "Live accuracy statistics and clinical validation indicators",
|
||||
bentoComponent: "icon-info-cards",
|
||||
items: [
|
||||
{
|
||||
icon: CheckCircle,
|
||||
label: "System Accuracy",
|
||||
value: "98.5%",
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
label: "Data Security",
|
||||
value: "HIPAA",
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
label: "Processing",
|
||||
value: "<5sec",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
carouselMode="buttons"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="dashboard-workflow" data-section="dashboard-workflow">
|
||||
<FeatureBento
|
||||
title="Streamlined Clinical Workflow"
|
||||
description="Optimized step-by-step process from image upload to comprehensive diagnostic reporting"
|
||||
tag="Workflow"
|
||||
tagIcon={Zap}
|
||||
tagAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
features={[
|
||||
{
|
||||
title: "Image Validation",
|
||||
description: "Automatic quality assessment ensuring images meet diagnostic standards before analysis",
|
||||
bentoComponent: "3d-task-list",
|
||||
title: "Quality Control",
|
||||
items: [
|
||||
{ icon: CheckCircle, label: "Resolution Check", time: "< 1s" },
|
||||
{ icon: Shield, label: "Format Validation", time: "< 1s" },
|
||||
{ icon: Zap, label: "Metadata Review", time: "< 1s" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Advanced Classification",
|
||||
description: "Five-level severity classification with confidence scores for each diagnostic level",
|
||||
bentoComponent: "3d-stack-cards",
|
||||
items: [
|
||||
{
|
||||
icon: CheckCircle,
|
||||
title: "Severity Level",
|
||||
subtitle: "Classification",
|
||||
detail: "From No DR to Proliferative",
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Confidence Score",
|
||||
subtitle: "Probability",
|
||||
detail: "98.5% accuracy validated",
|
||||
},
|
||||
{
|
||||
icon: Zap,
|
||||
title: "Clinical Notes",
|
||||
subtitle: "Recommendations",
|
||||
detail: "Treatment guidance included",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Report Generation",
|
||||
description: "Automated PDF report generation with severity classification, visualizations, and clinical recommendations",
|
||||
bentoComponent: "timeline",
|
||||
heading: "Report Timeline",
|
||||
subheading: "Generation Process",
|
||||
items: [
|
||||
{ label: "Image Processed", detail: "< 5 seconds" },
|
||||
{ label: "Analysis Complete", detail: "Grad-CAM generated" },
|
||||
{ label: "Report Ready", detail: "PDF exported" },
|
||||
],
|
||||
completedLabel: "All steps completed",
|
||||
},
|
||||
]}
|
||||
carouselMode="buttons"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Support"
|
||||
title="Need Assistance with Your Analysis?"
|
||||
description="Contact our clinical support team for guidance on using the dashboard, interpreting results, or technical assistance."
|
||||
background={{ variant: "rotated-rays-animated" }}
|
||||
useInvertedBackground={false}
|
||||
tagIcon={Mail}
|
||||
tagAnimation="slide-up"
|
||||
inputPlaceholder="support@healthcare.clinic"
|
||||
buttonText="Get Support"
|
||||
termsText="Our support team responds within 2 hours during business hours for all clinical and technical inquiries."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterMedia
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aqts5cdOEz32EulCCrVgrR1aoH/professional-medical-team-in-laboratory--1773332569649-1ffb8db3.png?_wi=2"
|
||||
imageAlt="Medical team collaboration"
|
||||
logoText="RetinoCare AI"
|
||||
copyrightText="© 2025 RetinoCare AI. All rights reserved."
|
||||
columns={[
|
||||
{
|
||||
title: "Product",
|
||||
items: [
|
||||
{
|
||||
label: "Features",
|
||||
href: "#features",
|
||||
},
|
||||
{
|
||||
label: "Pricing",
|
||||
href: "/pricing",
|
||||
},
|
||||
{
|
||||
label: "Security",
|
||||
href: "#security",
|
||||
},
|
||||
{
|
||||
label: "API Documentation",
|
||||
href: "#api",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Clinical",
|
||||
items: [
|
||||
{
|
||||
label: "Validation Studies",
|
||||
href: "#studies",
|
||||
},
|
||||
{
|
||||
label: "Clinical Guidelines",
|
||||
href: "#guidelines",
|
||||
},
|
||||
{
|
||||
label: "Training Resources",
|
||||
href: "#training",
|
||||
},
|
||||
{
|
||||
label: "Research",
|
||||
href: "#research",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
{
|
||||
label: "About Us",
|
||||
href: "/about",
|
||||
},
|
||||
{
|
||||
label: "Contact",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#privacy",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#terms",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<div className="min-h-screen flex items-center justify-center p-4">
|
||||
<div className="text-center">
|
||||
<h1 className="text-4xl font-bold mb-4">Dashboard</h1>
|
||||
<p className="text-lg text-gray-600 mb-8">Welcome to RetinoCare AI Dashboard</p>
|
||||
<Link href="/" className="text-blue-600 hover:underline">
|
||||
Return to Home
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
@@ -1,51 +1,28 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
import useSvgTextLogo from "./useSvgTextLogo";
|
||||
import { cls } from "@/lib/utils";
|
||||
import React from 'react';
|
||||
|
||||
interface SvgTextLogoProps {
|
||||
logoText: string;
|
||||
adjustHeightFactor?: number;
|
||||
verticalAlign?: "top" | "center";
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
|
||||
logoText,
|
||||
adjustHeightFactor,
|
||||
verticalAlign = "top",
|
||||
className = "",
|
||||
}) {
|
||||
const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
|
||||
|
||||
const SvgTextLogo: React.FC<SvgTextLogoProps> = ({ className = '' }) => {
|
||||
return (
|
||||
<svg
|
||||
ref={svgRef}
|
||||
viewBox={viewBox}
|
||||
className={cls("w-full", className)}
|
||||
style={{ aspectRatio: aspectRatio }}
|
||||
preserveAspectRatio="none"
|
||||
role="img"
|
||||
aria-label={`${logoText} logo`}
|
||||
viewBox="0 0 200 50"
|
||||
className={className}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<text
|
||||
ref={textRef}
|
||||
x="0"
|
||||
y={verticalAlign === "center" ? "50%" : "0"}
|
||||
className="font-bold fill-current"
|
||||
style={{
|
||||
fontSize: "20px",
|
||||
letterSpacing: "-0.02em",
|
||||
dominantBaseline: verticalAlign === "center" ? "middle" : "text-before-edge"
|
||||
}}
|
||||
x="10"
|
||||
y="35"
|
||||
fontSize="28"
|
||||
fontWeight="bold"
|
||||
fill="currentColor"
|
||||
dominantBaseline="auto"
|
||||
>
|
||||
{logoText}
|
||||
RetinoCare AI
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
});
|
||||
|
||||
SvgTextLogo.displayName = "SvgTextLogo";
|
||||
};
|
||||
|
||||
export default SvgTextLogo;
|
||||
|
||||
Reference in New Issue
Block a user