From 5f8ccc3b3b9c927693653e4fb15ec109409ee384 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 24 Apr 2026 18:04:58 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 384 ++++++++++++++---------------------------------
 1 file changed, 115 insertions(+), 269 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 039f307..79addba 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -11,7 +11,7 @@ import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
 import TextAbout from '@/components/sections/about/TextAbout';
-import { CheckCircle, Target, TrendingUp } from "lucide-react";
+import { CheckCircle, Target, TrendingUp, Zap, BrainCircuit, Shield, Database } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -28,282 +28,128 @@ export default function LandingPage() {
         headingFontWeight="medium"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingOverlay
-      navItems={[
-        {
-          name: "Features",
-          id: "#features",
-        },
-        {
-          name: "Performance",
-          id: "#metrics",
-        },
-        {
-          name: "Explainability",
-          id: "#algorithm",
-        },
-        {
-          name: "Contact",
-          id: "#contact",
-        },
-      ]}
-      brandName="DiaPredict"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingOverlay
+            navItems={[
+              { name: "Features", id: "features" },
+              { name: "Performance", id: "metrics" },
+              { name: "Explainability", id: "algorithm" },
+              { name: "Contact", id: "contact" },
+            ]}
+            brandName="DiaPredict"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroSplit
-      background={{
-        variant: "gradient-bars",
-      }}
-      title="Clinically Actionable Early Diabetes Detection"
-      description="Revolutionizing patient outcomes with production-grade ML engines. Precise, explainable, and built for modern healthcare."
-      buttons={[
-        {
-          text: "Deploy Pipeline",
-          href: "#contact",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/professional-medic-giving-vitamins-medical-drugs-female-patient_482257-100693.jpg"
-      mediaAnimation="slide-up"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/medic-expert-uses-thermometer-find-right-diagnostic-symptoms_482257-122834.jpg",
-          alt: "Doctor profile 1",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/student-doing-academic-research-internet-gain-career-knowledge_482257-124934.jpg",
-          alt: "Doctor profile 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/medical-professionals-meeting-examining-organs-ct-scan-results_482257-123078.jpg",
-          alt: "Doctor profile 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/medical-expert-patient-meeting-check-up-appointment_482257-108187.jpg",
-          alt: "Doctor profile 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/african-american-physician-gives-professional-advice-woman-patient_482257-107489.jpg",
-          alt: "Doctor profile 5",
-        },
-      ]}
-      avatarText="Trusted by 500+ clinical practitioners"
-      marqueeItems={[
-        {
-          type: "text",
-          text: "High Accuracy",
-        },
-        {
-          type: "text",
-          text: "SHAP Interpretable",
-        },
-        {
-          type: "text",
-          text: "FDA Compliant Logic",
-        },
-        {
-          type: "text",
-          text: "Fast Deployment",
-        },
-        {
-          type: "text",
-          text: "Scalable Infrastructure",
-        },
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroSplit
+            background={{ variant: "gradient-bars" }}
+            title="Clinically Actionable Early Diabetes Detection"
+            description="Revolutionizing patient outcomes with production-grade ML engines. Precise, explainable, and built for modern healthcare."
+            buttons={[{ text: "Deploy Pipeline", href: "#contact" }]}
+            imageSrc="http://img.b2bpic.net/free-photo/professional-medic-giving-vitamins-medical-drugs-female-patient_482257-100693.jpg"
+            mediaAnimation="slide-up"
+            avatars={[
+              { src: "http://img.b2bpic.net/free-photo/medic-expert-uses-thermometer-find-right-diagnostic-symptoms_482257-122834.jpg", alt: "Doctor profile 1" },
+              { src: "http://img.b2bpic.net/free-photo/student-doing-academic-research-internet-gain-career-knowledge_482257-124934.jpg", alt: "Doctor profile 2" },
+              { src: "http://img.b2bpic.net/free-photo/medical-professionals-meeting-examining-organs-ct-scan-results_482257-123078.jpg", alt: "Doctor profile 3" },
+              { src: "http://img.b2bpic.net/free-photo/medical-expert-patient-meeting-check-up-appointment_482257-108187.jpg", alt: "Doctor profile 4" },
+              { src: "http://img.b2bpic.net/free-photo/african-american-physician-gives-professional-advice-woman-patient_482257-107489.jpg", alt: "Doctor profile 5" }
+            ]}
+            avatarText="Trusted by 500+ clinical practitioners"
+            marqueeItems={[
+              { type: "text", text: "High Accuracy" },
+              { type: "text", text: "SHAP Interpretable" },
+              { type: "text", text: "FDA Compliant Logic" },
+              { type: "text", text: "Fast Deployment" },
+              { type: "text", text: "Scalable Infrastructure" }
+            ]}
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <TextAbout
-      useInvertedBackground={true}
-      title="Machine Learning Meets Clinical Reality"
-      buttons={[
-        {
-          text: "Learn About Our Engine",
-          href: "#features",
-        },
-      ]}
-    />
-  </div>
+        <div id="about" data-section="about">
+          <TextAbout
+            useInvertedBackground={true}
+            title="Machine Learning Meets Clinical Reality"
+            buttons={[{ text: "Learn About Our Engine", href: "#features" }]}
+          />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardTwentySix
-      textboxLayout="default"
-      useInvertedBackground={false}
-      features={[
-        {
-          title: "Logical Imputation",
-          description: "Stratified median imputation ensuring data integrity for missing clinical markers.",
-          buttonIcon: "Zap",
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-optical-fiber-detail_23-2149182559.jpg",
-        },
-        {
-          title: "Feature Engineering",
-          description: "Creation of metabolic indices to maximize predictive clarity of patient profiles.",
-          buttonIcon: "BrainCircuit",
-          imageSrc: "http://img.b2bpic.net/free-photo/healthcare-professionals-review-mri-scan-test-results-neurology-x-rays_482257-123104.jpg",
-        },
-        {
-          title: "SMOTE Balancing",
-          description: "Ensuring the minority diabetic class is represented for robust generalization.",
-          buttonIcon: "Shield",
-          imageSrc: "http://img.b2bpic.net/free-photo/engineer-data-center-fixing-issues_482257-90996.jpg",
-        },
-        {
-          title: "Clinical Scalability",
-          description: "Standardized scaling for optimal convergence across SVM and Ensemble models.",
-          buttonIcon: "Database",
-          imageSrc: "http://img.b2bpic.net/free-photo/doctor-man-analyze-cells-laptop_482257-119853.jpg",
-        },
-      ]}
-      title="High-Performance Data Architecture"
-      description="Built for rigorous healthcare demands, our pipeline ensures maximum predictive power."
-    />
-  </div>
+        <div id="features" data-section="features">
+          <FeatureCardTwentySix
+            textboxLayout="default"
+            useInvertedBackground={false}
+            features={[
+              { title: "Logical Imputation", description: "Stratified median imputation ensuring data integrity for missing clinical markers.", buttonIcon: Zap, imageSrc: "http://img.b2bpic.net/free-photo/beautiful-optical-fiber-detail_23-2149182559.jpg" },
+              { title: "Feature Engineering", description: "Creation of metabolic indices to maximize predictive clarity of patient profiles.", buttonIcon: BrainCircuit, imageSrc: "http://img.b2bpic.net/free-photo/healthcare-professionals-review-mri-scan-test-results-neurology-x-rays_482257-123104.jpg" },
+              { title: "SMOTE Balancing", description: "Ensuring the minority diabetic class is represented for robust generalization.", buttonIcon: Shield, imageSrc: "http://img.b2bpic.net/free-photo/engineer-data-center-fixing-issues_482257-90996.jpg" },
+              { title: "Clinical Scalability", description: "Standardized scaling for optimal convergence across SVM and Ensemble models.", buttonIcon: Database, imageSrc: "http://img.b2bpic.net/free-photo/doctor-man-analyze-cells-laptop_482257-119853.jpg" }
+            ]}
+            title="High-Performance Data Architecture"
+            description="Built for rigorous healthcare demands, our pipeline ensures maximum predictive power."
+          />
+        </div>
 
-  <div id="metrics" data-section="metrics">
-      <MetricCardOne
-      textboxLayout="default"
-      gridVariant="bento-grid"
-      useInvertedBackground={true}
-      metrics={[
-        {
-          id: "1",
-          value: "98.5%",
-          title: "AUC-ROC",
-          description: "Model discrimination capability.",
-          icon: TrendingUp,
-        },
-        {
-          id: "2",
-          value: "F1-Score",
-          title: "Optimized",
-          description: "Prioritizing False Negative reduction.",
-          icon: Target,
-        },
-        {
-          id: "3",
-          value: "10-Fold",
-          title: "Validation",
-          description: "Rigorous cross-validation training.",
-          icon: CheckCircle,
-        },
-      ]}
-      title="Proven Performance Rigor"
-      description="Validation metrics designed to minimize False Negatives in clinical settings."
-    />
-  </div>
+        <div id="metrics" data-section="metrics">
+          <MetricCardOne
+            textboxLayout="default"
+            gridVariant="bento-grid"
+            animationType="slide-up"
+            useInvertedBackground={true}
+            metrics={[
+              { id: "1", value: "98.5%", title: "AUC-ROC", description: "Model discrimination capability.", icon: TrendingUp },
+              { id: "2", value: "F1-Score", title: "Optimized", description: "Prioritizing False Negative reduction.", icon: Target },
+              { id: "3", value: "10-Fold", title: "Validation", description: "Rigorous cross-validation training.", icon: CheckCircle }
+            ]}
+            title="Proven Performance Rigor"
+            description="Validation metrics designed to minimize False Negatives in clinical settings."
+          />
+        </div>
 
-  <div id="algorithm" data-section="algorithm">
-      <FaqSplitText
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "1",
-          title: "How is the model explained?",
-          content: "We use SHAP integration to output the exact contribution of each patient feature to the final risk score.",
-        },
-        {
-          id: "2",
-          title: "Which models are deployed?",
-          content: "Logistic Regression, Decision Trees, Random Forest (with GridSearchCV), and RBF-Kernel SVMs.",
-        },
-        {
-          id: "3",
-          title: "Is it clinical ready?",
-          content: "Yes, with F1-Score optimization and strict False Negative minimization protocols.",
-        },
-      ]}
-      sideTitle="Explainable Predictive Engine"
-      sideDescription="Why does the model predict high risk? SHAP integration provides the 'Why' for every doctor."
-      faqsAnimation="slide-up"
-    />
-  </div>
+        <div id="algorithm" data-section="algorithm">
+          <FaqSplitText
+            useInvertedBackground={false}
+            faqs={[
+              { id: "1", title: "How is the model explained?", content: "We use SHAP integration to output the exact contribution of each patient feature to the final risk score." },
+              { id: "2", title: "Which models are deployed?", content: "Logistic Regression, Decision Trees, Random Forest (with GridSearchCV), and RBF-Kernel SVMs." },
+              { id: "3", title: "Is it clinical ready?", content: "Yes, with F1-Score optimization and strict False Negative minimization protocols." }
+            ]}
+            sideTitle="Explainable Predictive Engine"
+            sideDescription="Why does the model predict high risk? SHAP integration provides the 'Why' for every doctor."
+            faqsAnimation="slide-up"
+          />
+        </div>
 
-  <div id="social" data-section="social">
-      <SocialProofOne
-      textboxLayout="default"
-      useInvertedBackground={true}
-      names={[
-        "HealthCare System",
-        "Medical Research Lab",
-        "Clinical Diagnostic Corp",
-        "Biotech Systems",
-        "Wellness Analytics",
-        "Digital Health Partners",
-        "Patient Care Analytics",
-      ]}
-      title="Trusted by Healthcare Innovators"
-      description="We partner with leading organizations to advance diagnostic precision."
-    />
-  </div>
+        <div id="social" data-section="social">
+          <SocialProofOne
+            textboxLayout="default"
+            useInvertedBackground={true}
+            names={["HealthCare System", "Medical Research Lab", "Clinical Diagnostic Corp", "Biotech Systems", "Wellness Analytics", "Digital Health Partners", "Patient Care Analytics"]}
+            title="Trusted by Healthcare Innovators"
+            description="We partner with leading organizations to advance diagnostic precision."
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactCTA
-      useInvertedBackground={false}
-      background={{
-        variant: "sparkles-gradient",
-      }}
-      tag="Get Started"
-      title="Ready to Deploy the Engine?"
-      description="Join the future of diagnostic health-tech."
-      buttons={[
-        {
-          text: "Contact Our Engineering Team",
-          href: "#",
-        },
-      ]}
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactCTA
+            useInvertedBackground={false}
+            background={{ variant: "sparkles-gradient" }}
+            tag="Get Started"
+            title="Ready to Deploy the Engine?"
+            description="Join the future of diagnostic health-tech."
+            buttons={[{ text: "Contact Our Engineering Team", href: "#" }]}
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterBaseCard
-      logoText="DiaPredict Engine"
-      columns={[
-        {
-          title: "Platform",
-          items: [
-            {
-              label: "Models",
-              href: "#",
-            },
-            {
-              label: "Metrics",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Explainability",
-          items: [
-            {
-              label: "SHAP Integration",
-              href: "#",
-            },
-            {
-              label: "Documentation",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About",
-              href: "#",
-            },
-            {
-              label: "Privacy",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterBaseCard
+            logoText="DiaPredict Engine"
+            columns={[
+              { title: "Platform", items: [{ label: "Models", href: "#" }, { label: "Metrics", href: "#" }] },
+              { title: "Explainability", items: [{ label: "SHAP Integration", href: "#" }, { label: "Documentation", href: "#" }] },
+              { title: "Company", items: [{ label: "About", href: "#" }, { label: "Privacy", href: "#" }] }
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-- 
2.49.1