310 lines
12 KiB
TypeScript
310 lines
12 KiB
TypeScript
"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 MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaAbout";
|
|
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
|
|
import FooterMedia from "@/components/sections/footer/FooterMedia";
|
|
import Link from "next/link";
|
|
import {
|
|
Activity,
|
|
Zap,
|
|
Workflow,
|
|
Layers,
|
|
Target,
|
|
HelpCircle,
|
|
Upload,
|
|
FileText,
|
|
Share2,
|
|
Clock,
|
|
Settings,
|
|
User,
|
|
Lock,
|
|
CheckCircle,
|
|
Shield,
|
|
} from "lucide-react";
|
|
|
|
export default function AnalysisPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="icon-arrow"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="smallMedium"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="floatingGradient"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="RetinoCare AI"
|
|
navItems={[
|
|
{ name: "Dashboard", id: "dashboard" },
|
|
{ name: "Analysis", id: "analysis" },
|
|
{ name: "Reports", id: "reports" },
|
|
{ name: "About", id: "about" },
|
|
]}
|
|
button={{
|
|
text: "Login",
|
|
href: "#login",
|
|
}}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDoubleCarousel
|
|
title="Upload & Analyze Retinal Images"
|
|
description="RetinoCare AI combines advanced ResNet deep learning with Grad-CAM visualization to detect and classify diabetic retinopathy severity. Upload your fundus photographs for instant clinical-grade analysis."
|
|
tag="Medical Technology"
|
|
tagIcon={Activity}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "glowing-orb" }}
|
|
leftCarouselItems={[
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aqts5cdOEz32EulCCrVgrR1aoH/professional-retinal-fundus-photograph-s-1773332568534-af99ea22.png?_wi=4",
|
|
imageAlt: "Retinal fundus photograph",
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aqts5cdOEz32EulCCrVgrR1aoH/advanced-medical-ai-visualization-showin-1773332569223-2572aa3a.png?_wi=5",
|
|
imageAlt: "Grad-CAM visualization",
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aqts5cdOEz32EulCCrVgrR1aoH/medical-severity-classification-dashboar-1773332569806-21e23b7b.png?_wi=6",
|
|
imageAlt: "Severity classification",
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aqts5cdOEz32EulCCrVgrR1aoH/clean-modern-medical-interface-showing-f-1773332569664-81951b93.png?_wi=4",
|
|
imageAlt: "Upload interface",
|
|
},
|
|
]}
|
|
rightCarouselItems={[
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aqts5cdOEz32EulCCrVgrR1aoH/medical-severity-classification-dashboar-1773332569806-21e23b7b.png?_wi=7",
|
|
imageAlt: "Classification results",
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aqts5cdOEz32EulCCrVgrR1aoH/resnet-deep-learning-architecture-visual-1773332570731-0d31802e.png?_wi=3",
|
|
imageAlt: "ResNet architecture",
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aqts5cdOEz32EulCCrVgrR1aoH/professional-retinal-fundus-photograph-s-1773332568534-af99ea22.png?_wi=5",
|
|
imageAlt: "Retinal image",
|
|
},
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aqts5cdOEz32EulCCrVgrR1aoH/professional-medical-report-generation-i-1773332569855-51a5bd0d.png?_wi=5",
|
|
imageAlt: "Report generation",
|
|
},
|
|
]}
|
|
carouselPosition="right"
|
|
buttons={[
|
|
{
|
|
text: "Upload Image",
|
|
href: "#upload",
|
|
},
|
|
{
|
|
text: "View Guidelines",
|
|
href: "#guidelines",
|
|
},
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="upload-features" data-section="upload-features">
|
|
<FeatureBento
|
|
title="Image Upload & Processing Features"
|
|
description="Streamlined workflow for secure retinal image submission and real-time analysis"
|
|
tag="Upload Tools"
|
|
tagIcon={Upload}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
features={[
|
|
{
|
|
title: "Secure HIPAA-Compliant Upload",
|
|
description: "End-to-end encrypted image upload with automatic data de-identification and HIPAA compliance",
|
|
bentoComponent: "globe",
|
|
},
|
|
{
|
|
title: "Multiple Format Support",
|
|
description: "Accept JPEG, PNG, and TIFF fundus photographs from certified fundus cameras",
|
|
bentoComponent: "animated-bar-chart",
|
|
},
|
|
{
|
|
title: "Batch Processing Capability",
|
|
description: "Upload and analyze multiple images simultaneously for efficient clinic workflows",
|
|
bentoComponent: "line-chart",
|
|
},
|
|
{
|
|
title: "Real-Time Processing Status",
|
|
description: "Live progress tracking and instant notifications when analysis completes",
|
|
bentoComponent: "icon-info-cards",
|
|
items: [
|
|
{
|
|
icon: CheckCircle,
|
|
label: "Upload Status",
|
|
value: "Instant",
|
|
},
|
|
{
|
|
icon: Shield,
|
|
label: "Encryption",
|
|
value: "AES-256",
|
|
},
|
|
{
|
|
icon: Zap,
|
|
label: "Processing",
|
|
value: "<5 seconds",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Patient Data Management",
|
|
description: "Secure patient identification, image storage, and linked analysis records for continuity of care",
|
|
bentoComponent: "phone",
|
|
statusIcon: Lock,
|
|
alertIcon: Upload,
|
|
alertTitle: "Image Upload",
|
|
alertMessage: "Processing retinal image...",
|
|
apps: [
|
|
{ name: "Upload", icon: Upload },
|
|
{ name: "Analyze", icon: Zap },
|
|
{ name: "Report", icon: FileText },
|
|
{ name: "Export", icon: Share2 },
|
|
{ name: "History", icon: Clock },
|
|
{ name: "Settings", icon: Settings },
|
|
{ name: "Support", icon: HelpCircle },
|
|
{ name: "Profile", icon: User },
|
|
],
|
|
},
|
|
]}
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="analysis-workflow" data-section="analysis-workflow">
|
|
<MetricSplitMediaAbout
|
|
title="Rapid Analysis Workflow"
|
|
description="From image upload to severity classification in under 5 seconds. Our optimized ResNet model processes retinal images through multiple analysis stages to deliver comprehensive diagnostic insights for immediate clinical decision-making."
|
|
tag="Workflow"
|
|
tagIcon={Workflow}
|
|
tagAnimation="slide-up"
|
|
metrics={[
|
|
{
|
|
value: "<5 sec",
|
|
title: "Average Analysis Time",
|
|
},
|
|
{
|
|
value: "98.5%",
|
|
title: "Diagnostic Accuracy",
|
|
},
|
|
]}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aqts5cdOEz32EulCCrVgrR1aoH/resnet-deep-learning-architecture-visual-1773332570731-0d31802e.png?_wi=4"
|
|
imageAlt="ResNet architecture visualization"
|
|
mediaAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="severity-classes" data-section="severity-classes">
|
|
<ProductCardTwo
|
|
title="Severity Classification Levels"
|
|
description="Five clinically-validated severity grades following international diabetic retinopathy standards"
|
|
tag="Classification"
|
|
tagIcon={Layers}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
products={[
|
|
{
|
|
id: "no-dr",
|
|
brand: "Level 0",
|
|
name: "No Diabetic Retinopathy",
|
|
price: "No abnormalities detected",
|
|
rating: 5,
|
|
reviewCount: "No pathology",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aqts5cdOEz32EulCCrVgrR1aoH/professional-retinal-fundus-photograph-s-1773332568534-af99ea22.png?_wi=6",
|
|
imageAlt: "Normal retina",
|
|
},
|
|
{
|
|
id: "mild-dr",
|
|
brand: "Level 1",
|
|
name: "Mild Nonproliferative DR",
|
|
price: "Early microaneurysms",
|
|
rating: 5,
|
|
reviewCount: "Treatable",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aqts5cdOEz32EulCCrVgrR1aoH/medical-severity-classification-dashboar-1773332569806-21e23b7b.png?_wi=8",
|
|
imageAlt: "Mild retinopathy",
|
|
},
|
|
{
|
|
id: "moderate-dr",
|
|
brand: "Level 2",
|
|
name: "Moderate Nonproliferative DR",
|
|
price: "Hemorrhages present",
|
|
rating: 5,
|
|
reviewCount: "Requires monitoring",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aqts5cdOEz32EulCCrVgrR1aoH/advanced-medical-ai-visualization-showin-1773332569223-2572aa3a.png?_wi=6",
|
|
imageAlt: "Moderate retinopathy",
|
|
},
|
|
{
|
|
id: "severe-dr",
|
|
brand: "Level 3-4",
|
|
name: "Severe/Proliferative DR",
|
|
price: "Significant damage",
|
|
rating: 5,
|
|
reviewCount: "Urgent treatment needed",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Aqts5cdOEz32EulCCrVgrR1aoH/professional-medical-report-generation-i-1773332569855-51a5bd0d.png?_wi=6",
|
|
imageAlt: "Severe retinopathy",
|
|
},
|
|
]}
|
|
/>
|
|
</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=3"
|
|
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>
|
|
</ThemeProvider>
|
|
);
|
|
} |