Merge version_3 into main

Merge version_3 into main

src/app/admin/page.tsx

@@ -0,0 +1,219 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit";
+import FeatureCardTwentyOne from "@/components/sections/feature/FeatureCardTwentyOne";
+import PricingCardFive from "@/components/sections/pricing/PricingCardFive";
+import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
+import FaqBase from "@/components/sections/faq/FaqBase";
+import ContactText from "@/components/sections/contact/ContactText";
+import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
+import { Settings, Users, Lock, BarChart3, AlertTriangle, HelpCircle, Shield, Database, Key, Monitor } from "lucide-react";
+
+export default function AdminPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          brandName="HealthCare Hub"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Features", id: "features" },
+            { name: "Appointments", id: "/appointments" },
+            { name: "Patients", id: "/patients" },
+            { name: "Admin", id: "/admin" },
+            { name: "Contact", id: "contact" },
+          ]}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroLogoBillboardSplit
+          logoText="ADMIN CONTROL"
+          description="Hospital staff management and system configuration dashboard for healthcare administrators and IT personnel. Manage user accounts, configure system settings, monitor security, and oversee institutional operations."
+          background={{ variant: "plain" }}
+          buttons={[
+            { text: "Go to Dashboard", href: "#dashboard" },
+            { text: "View Documentation", href: "#faq" },
+          ]}
+          layoutOrder="default"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab61rTDKmrydpiUl7xdk36wxrL/an-illustration-of-multi-level-access-co-1772848851210-f52f6d74.png"
+          imageAlt="Admin control center"
+          frameStyle="browser"
+          mediaAnimation="slide-up"
+        />
+      </div>
+
+      <div id="dashboard" data-section="dashboard">
+        <FeatureCardTwentyOne
+          title="Core Administration Features"
+          description="Comprehensive tools for managing healthcare staff and system operations"
+          tag="Admin Features"
+          tagIcon={Settings}
+          tagAnimation="slide-up"
+          accordionItems={[
+            {
+              id: "1",              title: "Staff & User Management",              content: "Create, modify, and remove user accounts for doctors, nurses, administrators, and IT personnel. Assign role-based access controls (RBAC) with granular permissions. Track user activity and login history. Manage department assignments and supervision hierarchies. Set password policies and enforce multi-factor authentication."},
+            {
+              id: "2",              title: "System Configuration & Settings",              content: "Configure system-wide settings including facility information, working hours, holidays, and operational schedules. Customize alert thresholds and notification preferences. Set data retention policies and backup schedules. Configure email and SMS settings for system notifications. Manage API integrations and third-party connections."},
+            {
+              id: "3",              title: "Security & Compliance",              content: "Enforce HIPAA compliance requirements and audit trails. Manage security policies including password standards, session timeouts, and encryption protocols. Review security logs and suspicious activity reports. Configure IP whitelisting and network security settings. Generate compliance reports for regulatory audits."},
+            {
+              id: "4",              title: "Database & Data Management",              content: "Monitor database performance and optimize queries. Configure automated backup schedules and recovery procedures. Manage data archival and purging policies. Track data usage and storage capacity. Export data in various formats for reporting and analysis."},
+            {
+              id: "5",              title: "Monitoring & Analytics",              content: "Real-time system health monitoring and performance metrics. Track user login patterns and access times. Generate detailed usage reports and analytics. Monitor API usage and integration performance. Set up alerts for system anomalies and failures."},
+            {
+              id: "6",              title: "Support & Maintenance",              content: "Access system logs for troubleshooting and diagnostics. Manage system updates and patches. View support tickets and escalation procedures. Access knowledge base and documentation. Contact technical support for critical issues."},
+          ]}
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab61rTDKmrydpiUl7xdk36wxrL/a-modern-hospital-patient-management-das-1772848850585-3ec4652a.png"
+          imageAlt="Administration dashboard"
+          mediaAnimation="slide-up"
+          useInvertedBackground={true}
+          mediaPosition="right"
+        />
+      </div>
+
+      <div id="configuration" data-section="configuration">
+        <MetricCardTwo
+          title="Configuration Overview"
+          description="Key metrics for system management and oversight"
+          metrics={[
+            { id: "1", value: "500+", description: "Total Users Managed" },
+            { id: "2", value: "50", description: "Active Departments" },
+            { id: "3", value: "99.9%", description: "System Uptime" },
+            { id: "4", value: "100%", description: "HIPAA Compliance" },
+          ]}
+          gridVariant="uniform-all-items-equal"
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="packages" data-section="packages">
+        <PricingCardFive
+          title="Admin Access Tiers"
+          description="Different permission levels for various administrative roles"
+          tag="User Roles"
+          tagIcon={Users}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          animationType="slide-up"
+          useInvertedBackground={true}
+          plans={[
+            {
+              id: "basic",              tag: "Department Manager",              tagIcon: Monitor,
+              price: "$0",              period: "/month",              description: "Manage staff within your department and view departmental analytics.",              button: { text: "Assign Role", href: "#contact" },
+              featuresTitle: "Permissions:",              features: [
+                "View department staff",                "Manage schedules",                "View departmental reports",                "Manage local settings"],
+            },
+            {
+              id: "professional",              tag: "System Administrator",              tagIcon: Shield,
+              price: "$0",              period: "/month",              description: "Full system administration including user management and security configuration.",              button: { text: "Assign Role", href: "#contact" },
+              featuresTitle: "Permissions:",              features: [
+                "Manage all users & roles",                "Configure system settings",                "Security & compliance management",                "View all analytics",                "Manage integrations"],
+            },
+            {
+              id: "enterprise",              tag: "Chief Information Officer",              tagIcon: Database,
+              price: "$0",              period: "/month",              description: "Executive-level access with strategic oversight and advanced reporting.",              button: { text: "Assign Role", href: "#contact" },
+              featuresTitle: "Permissions:",              features: [
+                "All System Administrator permissions",                "Strategic analytics & insights",                "Budget and resource planning",                "Vendor management",                "Executive reporting",                "Crisis management protocols"],
+            },
+          ]}
+        />
+      </div>
+
+      <div id="faq" data-section="faq">
+        <FaqBase
+          title="Administration FAQs"
+          description="Common questions about staff management and system configuration"
+          tag="Help & Support"
+          tagIcon={HelpCircle}
+          tagAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          faqsAnimation="slide-up"
+          faqs={[
+            {
+              id: "1",              title: "How do I create a new staff account?",              content: "Navigate to User Management in the admin panel. Click 'Add New User' and fill in the staff member's information including name, email, department, and role. Select the appropriate permission level (Doctor, Nurse, Administrator, etc.) and send an invitation email. The staff member will receive a secure link to set their password on first login."},
+            {
+              id: "2",              title: "What are the different user roles and permissions?",              content: "HealthCare Hub offers multiple role types: Doctors (clinical access), Nurses (patient care), Administrators (institutional management), IT Staff (system maintenance), and Department Managers (departmental oversight). Each role has customizable permissions that can be adjusted based on your facility's specific needs. Custom roles can also be created for specialized positions."},
+            {
+              id: "3",              title: "How do I reset a staff member's password?",              content: "Go to User Management, search for the staff member, and click the three-dot menu next to their name. Select 'Reset Password' and the system will generate a temporary password or send them a password reset link. The staff member will be prompted to create a new password on their next login. This process is logged for security audit purposes."},
+            {
+              id: "4",              title: "How can I deactivate a user account?",              content: "In the User Management section, find the user account you want to deactivate. Click the menu icon and select 'Deactivate Account'. The account will be disabled but all historical data associated with that user will be preserved for audit and compliance purposes. You can reactivate the account later if needed."},
+            {
+              id: "5",              title: "How do I configure system-wide settings?",              content: "Access the Settings panel from the admin dashboard. Here you can configure facility information, working hours, holidays, alert thresholds, notification preferences, data retention policies, email/SMS settings, and integration parameters. Changes take effect immediately but are logged for audit trails."},
+            {
+              id: "6",              title: "How is HIPAA compliance enforced in the admin panel?",              content: "The system enforces HIPAA compliance through end-to-end encryption, comprehensive audit trails, role-based access controls, automatic session timeouts, multi-factor authentication, and regular security assessments. All administrative actions are logged and can be reviewed in the compliance reports section."},
+            {
+              id: "7",              title: "How do I monitor system performance?",              content: "The System Health dashboard provides real-time monitoring of system performance metrics including CPU usage, memory allocation, database performance, API response times, and user activity. You can set up alerts for performance anomalies and download detailed performance reports."},
+            {
+              id: "8",              title: "How can I export data and generate reports?",              content: "Use the Reports section to generate custom reports on user activity, system performance, security events, or compliance metrics. Reports can be exported in PDF, CSV, or Excel formats. You can schedule automated report generation and delivery to specified email addresses."},
+          ]}
+        />
+      </div>
+
+      <div id="contact" data-section="contact">
+        <ContactText
+          text="Need technical support or have questions about administration? Contact our dedicated support team for assistance with staff management, system configuration, or security concerns."
+          animationType="entrance-slide"
+          buttons={[
+            { text: "Email Support", href: "mailto:admin-support@healthcarehub.com" },
+            { text: "Schedule Call", href: "#" },
+          ]}
+          background={{ variant: "radial-gradient" }}
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoEmphasis
+          logoText="HealthCare Hub"
+          columns={[
+            {
+              items: [
+                { label: "Dashboard", href: "/" },
+                { label: "Admin Panel", href: "/admin" },
+                { label: "Documentation", href: "#" },
+              ],
+            },
+            {
+              items: [
+                { label: "About Us", href: "/" },
+                { label: "Contact Support", href: "#contact" },
+                { label: "Support Portal", href: "#" },
+              ],
+            },
+            {
+              items: [
+                { label: "Privacy Policy", href: "#" },
+                { label: "Terms of Service", href: "#" },
+                { label: "Security", href: "#" },
+              ],
+            },
+            {
+              items: [
+                { label: "Twitter", href: "https://twitter.com" },
+                { label: "LinkedIn", href: "https://linkedin.com" },
+                { label: "Facebook", href: "https://facebook.com" },
+              ],
+            },
+          ]}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/dashboard/page.tsx

@@ -1,151 +1,146 @@
 "use client";
 
-import Link from "next/link";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
-import FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve";
+import { BarChart3, Users, TrendingUp, Activity } from "lucide-react";
-import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
-import ContactCenter from "@/components/sections/contact/ContactCenter";
-import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
-import { Zap, TrendingUp, Clock, AlertCircle, CheckCircle, Mail } from "lucide-react";
 
 export default function DashboardPage() {
-  const navItems = [
-    { name: "Dashboard", id: "dashboard" },
-    { name: "Features", id: "features" },
-    { name: "Security", id: "security" },
-    { name: "Contact", id: "contact" },
-  ];
-
-  const footerColumns = [
-    {
-      items: [
-        { label: "Dashboard", href: "/dashboard" },
-        { label: "Features", href: "#features" },
-        { label: "Pricing", href: "#" },
-      ],
-    },
-    {
-      items: [
-        { label: "About Us", href: "#about" },
-        { label: "Contact", href: "#contact" },
-        { label: "Support", href: "#" },
-      ],
-    },
-    {
-      items: [
-        { label: "Privacy Policy", href: "#" },
-        { label: "Terms of Service", href: "#" },
-        { label: "HIPAA Compliance", href: "#" },
-      ],
-    },
-    {
-      items: [
-        { label: "Twitter", href: "https://twitter.com" },
-        { label: "LinkedIn", href: "https://linkedin.com" },
-        { label: "Facebook", href: "https://facebook.com" },
-      ],
-    },
-  ];
-
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="reveal-blur"
       borderRadius="rounded"
-      contentWidth="small"
+      contentWidth="medium"
-      sizing="largeSizeMediumTitles"
+      sizing="medium"
       background="circleGradient"
-      cardStyle="glass-depth"
+      cardStyle="glass-elevated"
-      primaryButtonStyle="radial-glow"
+      primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
-      headingFontWeight="extrabold"
+      headingFontWeight="normal"
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleApple brandName="HealthCare Hub" navItems={navItems} />
+        <NavbarStyleApple
-      </div>
+          brandName="HealthCare Hub"
-
+          navItems={[
-      <div id="features" data-section="features">
+            { name: "Home", id: "/" },
-        <FeatureCardTwelve
+            { name: "Features", id: "features" },
-          features={[
+            { name: "Login", id: "/login" },
-            {
+            { name: "Contact", id: "contact" },
-              id: "records",
-              label: "Records",
-              title: "Complete Patient History & Medical Records",
-              items: [
-                "Digital patient profiles with complete medical history",
-                "Appointment and consultation logs",
-                "Prescription tracking and medication management",
-                "Lab results and diagnostic reports",
-              ],
-            },
-            {
-              id: "monitoring",
-              label: "Monitoring",
-              title: "Real-Time Patient Vital Signs Tracking",
-              items: [
-                "Live vital signs monitoring and alerts",
-                "Automated abnormality detection",
-                "Historical trend analysis",
-                "Emergency notification system",
-              ],
-            },
-            {
-              id: "scheduling",
-              label: "Scheduling",
-              title: "Intelligent Appointment Management",
-              items: [
-                "Automated appointment scheduling",
-                "Conflict prevention and optimization",
-                "Patient reminders and confirmations",
-                "Resource allocation and staff management",
-              ],
-            },
           ]}
-          animationType="slide-up"
-          title="Dashboard Features Overview"
-          description="Access comprehensive patient management tools designed for modern healthcare providers"
-          tag="Key Capabilities"
-          tagIcon={Zap}
-          tagAnimation="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={true}
         />
       </div>
 
-      <div id="metrics" data-section="metrics">
+      <div className="min-h-[calc(100vh-80px)] bg-background p-8">
-        <MetricCardThree
+        <div className="max-w-7xl mx-auto">
-          title="Dashboard Performance Metrics"
+          {/* Header */}
-          description="Real-time analytics showing system effectiveness and patient care improvements"
+          <div className="mb-8">
-          metrics={[
+            <h1 className="text-4xl font-bold text-foreground mb-2">Dashboard</h1>
-            { id: "1", icon: TrendingUp, title: "Patient Satisfaction", value: "96%" },
+            <p className="text-foreground/70">Welcome back! Here's your patient management overview.</p>
-            { id: "2", icon: Clock, title: "Time Saved Daily", value: "4.5 hrs" },
+          </div>
-            { id: "3", icon: AlertCircle, title: "Error Reduction", value: "87%" },
-          ]}
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={false}
-        />
-      </div>
 
-      <div id="contact" data-section="contact">
+          {/* Stats Grid */}
-        <ContactCenter
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-          tag="Get in Touch"
+            {[
-          tagIcon={Mail}
+              { icon: Users, label: "Active Patients", value: "1,234", change: "+12%" },
-          tagAnimation="slide-up"
+              { icon: Activity, label: "Appointments Today", value: "42", change: "+5%" },
-          title="Ready to Access Your Dashboard?"
+              { icon: TrendingUp, label: "System Uptime", value: "99.9%", change: "Stable" },
-          description="Get started with HealthCare Hub today. Schedule a personalized onboarding session with our support team."
+              { icon: BarChart3, label: "Data Processed", value: "2.5 TB", change: "+8%" },
-          background={{ variant: "rotated-rays-animated-grid" }}
+            ].map((stat, idx) => {
-          useInvertedBackground={false}
+              const Icon = stat.icon;
-          inputPlaceholder="Enter your email address"
+              return (
-          buttonText="Get Started"
+                <div
-          termsText="We respect your privacy. Your information is secure and HIPAA-compliant. We'll follow up within 24 hours."
+                  key={idx}
-        />
+                  className="rounded-lg border border-accent/20 bg-card p-6 backdrop-blur-sm shadow-lg hover:shadow-xl transition-shadow"
-      </div>
+                >
+                  <div className="flex items-start justify-between mb-4">
+                    <div className="w-12 h-12 rounded-lg bg-primary-cta/10 flex items-center justify-center">
+                      <Icon className="w-6 h-6 text-primary-cta" />
+                    </div>
+                    <span className="text-xs font-semibold text-accent">{stat.change}</span>
+                  </div>
+                  <h3 className="text-sm text-foreground/70 mb-1">{stat.label}</h3>
+                  <p className="text-2xl font-bold text-foreground">{stat.value}</p>
+                </div>
+              );
+            })}
+          </div>
 
-      <div id="footer" data-section="footer">
+          {/* Main Content Area */}
-        <FooterLogoEmphasis logoText="HealthCare Hub" columns={footerColumns} />
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            {/* Chart Section */}
+            <div className="lg:col-span-2">
+              <div className="rounded-lg border border-accent/20 bg-card p-6 backdrop-blur-sm shadow-lg">
+                <h2 className="text-xl font-bold text-foreground mb-4">Patient Activity Trend</h2>
+                <div className="h-64 flex items-end justify-around gap-2">
+                  {[65, 78, 90, 85, 92, 88, 75, 82].map((height, idx) => (
+                    <div
+                      key={idx}
+                      className="flex-1 bg-gradient-to-t from-primary-cta to-primary-cta/60 rounded-t-lg opacity-80 hover:opacity-100 transition-opacity"
+                      style={{ height: `${height}%` }}
+                    />
+                  ))}
+                </div>
+                <div className="mt-4 flex justify-between text-xs text-foreground/50">
+                  {["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Today"].map((day) => (
+                    <span key={day}>{day}</span>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            {/* Quick Actions */}
+            <div className="rounded-lg border border-accent/20 bg-card p-6 backdrop-blur-sm shadow-lg">
+              <h2 className="text-xl font-bold text-foreground mb-4">Quick Actions</h2>
+              <div className="space-y-3">
+                {[
+                  "Add New Patient",                  "Schedule Appointment",                  "View Reports",                  "Export Data"].map((action, idx) => (
+                  <button
+                    key={idx}
+                    className="w-full py-2 px-4 rounded-lg border border-accent/30 hover:border-primary-cta/50 text-foreground text-sm font-medium transition-all hover:bg-accent/5"
+                  >
+                    {action}
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+
+          {/* Recent Patients */}
+          <div className="mt-8 rounded-lg border border-accent/20 bg-card p-6 backdrop-blur-sm shadow-lg">
+            <h2 className="text-xl font-bold text-foreground mb-4">Recent Patients</h2>
+            <div className="overflow-x-auto">
+              <table className="w-full text-sm">
+                <thead className="border-b border-accent/20">
+                  <tr>
+                    <th className="text-left py-3 px-4 text-foreground/70 font-semibold">Patient Name</th>
+                    <th className="text-left py-3 px-4 text-foreground/70 font-semibold">ID</th>
+                    <th className="text-left py-3 px-4 text-foreground/70 font-semibold">Last Visit</th>
+                    <th className="text-left py-3 px-4 text-foreground/70 font-semibold">Status</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {[
+                    { name: "John Smith", id: "#PAT-001", visit: "Today", status: "Active" },
+                    { name: "Emma Johnson", id: "#PAT-002", visit: "Yesterday", status: "Follow-up" },
+                    { name: "Michael Chen", id: "#PAT-003", visit: "2 days ago", status: "Stable" },
+                  ].map((patient, idx) => (
+                    <tr key={idx} className="border-b border-accent/10 hover:bg-accent/5 transition-colors">
+                      <td className="py-3 px-4 text-foreground">{patient.name}</td>
+                      <td className="py-3 px-4 text-foreground/70">{patient.id}</td>
+                      <td className="py-3 px-4 text-foreground/70">{patient.visit}</td>
+                      <td className="py-3 px-4">
+                        <span className="inline-block px-3 py-1 rounded-full text-xs font-semibold bg-primary-cta/20 text-primary-cta">
+                          {patient.status}
+                        </span>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
       </div>
     </ThemeProvider>
   );
-}
+}

src/app/layout.tsx

@@ -1,71 +1,22 @@
 import type { Metadata } from "next";
-import { Halant } from "next/font/google";
 import { Inter } from "next/font/google";
-import { Nunito_Sans } from "next/font/google";
 import "./globals.css";
-import { ServiceWrapper } from "@/components/ServiceWrapper";
-import Tag from "@/tag/Tag";
 
-const halant = Halant({
+const inter = Inter({ variable: "--font-inter", subsets: ["latin"] });
-  variable: "--font-halant",
-  subsets: ["latin"],
-  weight: ["300", "400", "500", "600", "700"],
-});
-
-const inter = Inter({
-  variable: "--font-inter",
-  subsets: ["latin"],
-});
-
-const nunitoSans = Nunito_Sans({
-  variable: "--font-nunito-sans",
-  subsets: ["latin"],
-});
 
 export const metadata: Metadata = {
-  title: "Hospital Patient Management System | HealthCare Hub",
+  title: "HealthCare Hub - Patient Management System",  description: "Secure, HIPAA-compliant patient management system for modern healthcare providers"};
-  description: "Secure HIPAA-compliant patient management system with real-time monitoring, appointment scheduling, and complete medical records storage for healthcare providers.",
-  keywords: "patient management, hospital software, electronic health records, EHR, healthcare management, HIPAA compliant, patient monitoring, medical records",
-  robots: {
-    index: true,
-    follow: true,
-  },
-  openGraph: {
-    title: "HealthCare Hub - Hospital Patient Management System",
-    description: "Transform your patient care with our secure, intuitive healthcare management platform.",
-    type: "website",
-    siteName: "HealthCare Hub",
-    images: [
-      {
-        url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab61rTDKmrydpiUl7xdk36wxrL/a-modern-hospital-patient-management-das-1772848850585-3ec4652a.png",
-        alt: "HealthCare Hub Dashboard Interface",
-      },
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",
-    title: "HealthCare Hub - Hospital Patient Management",
-    description: "Secure patient management and monitoring system for healthcare providers",
-    images: [
-      "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab61rTDKmrydpiUl7xdk36wxrL/a-modern-hospital-patient-management-das-1772848850585-3ec4652a.png",
-    ],
-  },
-};
 
 export default function RootLayout({
   children,
-}: Readonly<{
+}: {
   children: React.ReactNode;
-}>) {
+}) {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang="en">
-      <ServiceWrapper>
+      <body className={`${inter.variable} font-sans`}>
-        <body
+        {children}
-          className={`${halant.variable} ${inter.variable} ${nunitoSans.variable} antialiased`}
+      
-        >
-          <Tag />
-          {children}
-        
         <script
           dangerouslySetInnerHTML={{
             __html: `
@@ -1433,7 +1384,6 @@ export default function RootLayout({
           }}
         />
       </body>
-      </ServiceWrapper>
     </html>
   );
 }

src/app/login/page.tsx

@@ -0,0 +1,197 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
+import { useState } from "react";
+import { Eye, EyeOff, Lock, Mail, LogIn } from "lucide-react";
+
+export default function LoginPage() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    // Simulate API call
+    setTimeout(() => {
+      setIsLoading(false);
+      console.log("Login attempted with:", { email, password });
+    }, 2000);
+  };
+
+  const handleSignup = () => {
+    console.log("Signup clicked");
+  };
+
+  const handleForgotPassword = () => {
+    console.log("Forgot password clicked");
+  };
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-magnetic"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="circleGradient"
+      cardStyle="glass-elevated"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="normal"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          brandName="HealthCare Hub"
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Features", id: "features" },
+            { name: "Login", id: "/login" },
+            { name: "Contact", id: "contact" },
+          ]}
+        />
+      </div>
+
+      <div className="min-h-[calc(100vh-80px)] flex items-center justify-center px-4 py-12">
+        <div className="w-full max-w-md">
+          {/* Header */}
+          <div className="text-center mb-8">
+            <div className="inline-flex items-center justify-center w-12 h-12 rounded-lg bg-gradient-to-br from-blue-500 to-blue-600 mb-4">
+              <Lock className="w-6 h-6 text-white" />
+            </div>
+            <h1 className="text-3xl font-bold text-foreground mb-2">Welcome Back</h1>
+            <p className="text-foreground/70">Sign in to your HealthCare Hub account</p>
+          </div>
+
+          {/* Login Form Card */}
+          <div className="rounded-lg border border-accent/20 bg-card p-8 backdrop-blur-sm shadow-lg">
+            <form onSubmit={handleSubmit} className="space-y-6">
+              {/* Email Field */}
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">
+                  Email Address
+                </label>
+                <div className="relative">
+                  <Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-foreground/50" />
+                  <input
+                    type="email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    placeholder="you@hospital.com"
+                    className="w-full pl-10 pr-4 py-2.5 rounded-lg border border-accent/30 bg-background focus:outline-none focus:border-primary-cta focus:ring-1 focus:ring-primary-cta text-foreground placeholder-foreground/50 transition-colors"
+                    required
+                  />
+                </div>
+              </div>
+
+              {/* Password Field */}
+              <div>
+                <label className="block text-sm font-medium text-foreground mb-2">
+                  Password
+                </label>
+                <div className="relative">
+                  <Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-foreground/50" />
+                  <input
+                    type={showPassword ? "text" : "password"}
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    placeholder="••••••••"
+                    className="w-full pl-10 pr-10 py-2.5 rounded-lg border border-accent/30 bg-background focus:outline-none focus:border-primary-cta focus:ring-1 focus:ring-primary-cta text-foreground placeholder-foreground/50 transition-colors"
+                    required
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className="absolute right-3 top-1/2 transform -translate-y-1/2 text-foreground/50 hover:text-foreground transition-colors"
+                  >
+                    {showPassword ? (
+                      <EyeOff className="w-5 h-5" />
+                    ) : (
+                      <Eye className="w-5 h-5" />
+                    )}
+                  </button>
+                </div>
+              </div>
+
+              {/* Remember Me & Forgot Password */}
+              <div className="flex items-center justify-between text-sm">
+                <label className="flex items-center">
+                  <input type="checkbox" className="w-4 h-4 rounded border-accent/30 text-primary-cta focus:ring-primary-cta" />
+                  <span className="ml-2 text-foreground/70">Remember me</span>
+                </label>
+                <button
+                  type="button"
+                  onClick={handleForgotPassword}
+                  className="text-primary-cta hover:text-primary-cta/80 transition-colors"
+                >
+                  Forgot password?
+                </button>
+              </div>
+
+              {/* Submit Button */}
+              <button
+                type="submit"
+                disabled={isLoading}
+                className="w-full py-2.5 px-4 bg-gradient-to-r from-primary-cta to-primary-cta/80 hover:to-primary-cta text-white font-semibold rounded-lg transition-all duration-300 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+              >
+                {isLoading ? (
+                  <>
+                    <div className="animate-spin rounded-full h-4 w-4 border-2 border-white border-t-transparent"></div>
+                    Signing in...
+                  </>
+                ) : (
+                  <>
+                    <LogIn className="w-5 h-5" />
+                    Sign In
+                  </>
+                )}
+              </button>
+            </form>
+
+            {/* Divider */}
+            <div className="relative my-6">
+              <div className="absolute inset-0 flex items-center">
+                <div className="w-full border-t border-accent/20"></div>
+              </div>
+              <div className="relative flex justify-center text-sm">
+                <span className="px-2 bg-card text-foreground/50">New to HealthCare Hub?</span>
+              </div>
+            </div>
+
+            {/* Sign Up Link */}
+            <button
+              onClick={handleSignup}
+              className="w-full py-2.5 px-4 border border-accent/30 hover:border-primary-cta/50 text-foreground font-semibold rounded-lg transition-all duration-300 hover:bg-accent/5"
+            >
+              Create Account
+            </button>
+          </div>
+
+          {/* Security Notice */}
+          <div className="mt-6 p-4 rounded-lg bg-accent/10 border border-accent/20">
+            <p className="text-xs text-foreground/70 text-center">
+              🔒 Your information is secure and HIPAA-compliant. We use enterprise-grade encryption to protect your data.
+            </p>
+          </div>
+
+          {/* Help Links */}
+          <div className="mt-6 flex justify-center gap-4 text-sm">
+            <a href="#" className="text-foreground/50 hover:text-foreground/70 transition-colors">
+              Support Center
+            </a>
+            <span className="text-foreground/20">•</span>
+            <a href="#" className="text-foreground/50 hover:text-foreground/70 transition-colors">
+              Contact Support
+            </a>
+            <span className="text-foreground/20">•</span>
+            <a href="#" className="text-foreground/50 hover:text-foreground/70 transition-colors">
+              Privacy Policy
+            </a>
+          </div>
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -35,6 +35,7 @@ export default function HomePage() {
             { name: "Features", id: "features" },
             { name: "Appointments", id: "/appointments" },
             { name: "Patients", id: "/patients" },
+            { name: "Admin", id: "/admin" },
             { name: "Contact", id: "contact" },
           ]}
         />
@@ -93,19 +94,23 @@ export default function HomePage() {
           features={[
             {
               id: "records",              label: "Records",              title: "Complete Patient History & Medical Records",              items: [
-                "Digital patient profiles with complete medical history",                "Appointment and consultation logs",                "Prescription tracking and medication management",                "Lab results and diagnostic reports"],
+                "Digital patient profiles with complete medical history",                "Appointment and consultation logs",                "Prescription tracking and medication management",                "Lab results and diagnostic reports"
+              ],
             },
             {
               id: "monitoring",              label: "Monitoring",              title: "Real-Time Patient Vital Signs Tracking",              items: [
-                "Live vital signs monitoring and alerts",                "Automated abnormality detection",                "Historical trend analysis",                "Emergency notification system"],
+                "Live vital signs monitoring and alerts",                "Automated abnormality detection",                "Historical trend analysis",                "Emergency notification system"
+              ],
             },
             {
               id: "scheduling",              label: "Scheduling",              title: "Intelligent Appointment Management",              items: [
-                "Automated appointment scheduling",                "Conflict prevention and optimization",                "Patient reminders and confirmations",                "Resource allocation and staff management"],
+                "Automated appointment scheduling",                "Conflict prevention and optimization",                "Patient reminders and confirmations",                "Resource allocation and staff management"
+              ],
             },
             {
               id: "security",              label: "Security",              title: "Enterprise-Grade Data Protection",              items: [
-                "End-to-end encryption for all patient data",                "Multi-factor authentication system",                "Comprehensive audit trails and logging",                "HIPAA and compliance compliance built-in"],
+                "End-to-end encryption for all patient data",                "Multi-factor authentication system",                "Comprehensive audit trails and logging",                "HIPAA and compliance compliance built-in"
+              ],
             },
           ]}
           animationType="slide-up"
@@ -138,13 +143,17 @@ export default function HomePage() {
           tagAnimation="slide-up"
           testimonials={[
             {
-              id: "1",              name: "Dr. Sarah Johnson, MD - Chief Physician",              date: "Date: 15 January 2025",              title: "Revolutionized Our Patient Care Operations",              quote: "HealthCare Hub has transformed how we manage patient data and care coordination. The real-time monitoring capabilities have improved our response times significantly, and the secure system gives us complete peace of mind about patient privacy.",              tag: "Hospital Network",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab61rTDKmrydpiUl7xdk36wxrL/a-professional-portrait-of-a-female-doct-1772848849712-1b8fd6f3.png",              avatarAlt: "Dr. Sarah Johnson",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab61rTDKmrydpiUl7xdk36wxrL/a-professional-portrait-of-a-female-doct-1772848849712-1b8fd6f3.png"},
+              id: "1",              name: "Dr. Sarah Johnson, MD - Chief Physician",              date: "Date: 15 January 2025",              title: "Revolutionized Our Patient Care Operations",              quote: "HealthCare Hub has transformed how we manage patient data and care coordination. The real-time monitoring capabilities have improved our response times significantly, and the secure system gives us complete peace of mind about patient privacy.",              tag: "Hospital Network",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab61rTDKmrydpiUl7xdk36wxrL/a-professional-portrait-of-a-female-doct-1772848849712-1b8fd6f3.png",              avatarAlt: "Dr. Sarah Johnson",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab61rTDKmrydpiUl7xdk36wxrL/a-professional-portrait-of-a-female-doct-1772848849712-1b8fd6f3.png"
+            },
             {
-              id: "2",              name: "James Chen, RN - Nursing Director",              date: "Date: 20 January 2025",              title: "Intuitive Interface Saves Critical Time",              quote: "The interface is so intuitive that our nursing staff adapted immediately. The automated scheduling and alert systems have reduced administrative burden, allowing us to focus more on patient care. It's exactly what we needed.",              tag: "Medical Center",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab61rTDKmrydpiUl7xdk36wxrL/a-professional-portrait-of-a-male-nurse--1772848851435-e85b1a73.png",              avatarAlt: "James Chen",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab61rTDKmrydpiUl7xdk36wxrL/a-professional-portrait-of-a-male-nurse--1772848851435-e85b1a73.png"},
+              id: "2",              name: "James Chen, RN - Nursing Director",              date: "Date: 20 January 2025",              title: "Intuitive Interface Saves Critical Time",              quote: "The interface is so intuitive that our nursing staff adapted immediately. The automated scheduling and alert systems have reduced administrative burden, allowing us to focus more on patient care. It's exactly what we needed.",              tag: "Medical Center",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab61rTDKmrydpiUl7xdk36wxrL/a-professional-portrait-of-a-male-nurse--1772848851435-e85b1a73.png",              avatarAlt: "James Chen",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab61rTDKmrydpiUl7xdk36wxrL/a-professional-portrait-of-a-male-nurse--1772848851435-e85b1a73.png"
+            },
             {
-              id: "3",              name: "Lisa Martinez, MBA - Hospital Administrator",              date: "Date: 25 January 2025",              title: "Exceptional Support and Compliance",              quote: "Beyond the excellent platform, the support team is outstanding. They ensure we stay compliant with all regulations and requirements. The ROI has been impressive with improved efficiency and patient outcomes.",              tag: "Healthcare Network",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab61rTDKmrydpiUl7xdk36wxrL/a-professional-portrait-of-a-female-heal-1772848850769-375be9a4.png",              avatarAlt: "Lisa Martinez",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab61rTDKmrydpiUl7xdk36wxrL/a-professional-portrait-of-a-female-heal-1772848850769-375be9a4.png"},
+              id: "3",              name: "Lisa Martinez, MBA - Hospital Administrator",              date: "Date: 25 January 2025",              title: "Exceptional Support and Compliance",              quote: "Beyond the excellent platform, the support team is outstanding. They ensure we stay compliant with all regulations and requirements. The ROI has been impressive with improved efficiency and patient outcomes.",              tag: "Healthcare Network",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab61rTDKmrydpiUl7xdk36wxrL/a-professional-portrait-of-a-female-heal-1772848850769-375be9a4.png",              avatarAlt: "Lisa Martinez",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab61rTDKmrydpiUl7xdk36wxrL/a-professional-portrait-of-a-female-heal-1772848850769-375be9a4.png"
+            },
             {
-              id: "4",              name: "Dr. Michael Williams, MD - Lead Cardiologist",              date: "Date: 18 January 2025",              title: "Game-Changer for Patient Monitoring",              quote: "The real-time vital signs monitoring has been a game-changer for our cardiac patients. We can detect issues earlier and respond faster. The system's reliability and security are unmatched in the market.",              tag: "Specialty Clinic",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab61rTDKmrydpiUl7xdk36wxrL/a-professional-portrait-of-an-older-male-1772848851376-833457fc.png",              avatarAlt: "Dr. Michael Williams",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab61rTDKmrydpiUl7xdk36wxrL/a-professional-portrait-of-an-older-male-1772848851376-833457fc.png"},
+              id: "4",              name: "Dr. Michael Williams, MD - Lead Cardiologist",              date: "Date: 18 January 2025",              title: "Game-Changer for Patient Monitoring",              quote: "The real-time vital signs monitoring has been a game-changer for our cardiac patients. We can detect issues earlier and respond faster. The system's reliability and security are unmatched in the market.",              tag: "Specialty Clinic",              avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab61rTDKmrydpiUl7xdk36wxrL/a-professional-portrait-of-an-older-male-1772848851376-833457fc.png",              avatarAlt: "Dr. Michael Williams",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab61rTDKmrydpiUl7xdk36wxrL/a-professional-portrait-of-an-older-male-1772848851376-833457fc.png"
+            },
           ]}
           textboxLayout="default"
           useInvertedBackground={false}
@@ -160,7 +169,8 @@ export default function HomePage() {
           textboxLayout="default"
           useInvertedBackground={true}
           names={[
-            "City Hospital Network",            "Regional Medical Center",            "County Health System",            "Specialty Clinic Group",            "Emergency Care Network",            "Rural Health Alliance",            "Teaching Hospital",            "Pediatric Care Center"]}
+            "City Hospital Network",            "Regional Medical Center",            "County Health System",            "Specialty Clinic Group",            "Emergency Care Network",            "Rural Health Alliance",            "Teaching Hospital",            "Pediatric Care Center"
+          ]}
           speed={40}
           showCard={true}
         />

src/app/patients/page.tsx

@@ -1,27 +1,69 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import Link from "next/link";
+import { useState } from "react";
 import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
-import FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve";
-import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
-import ContactCenter from "@/components/sections/contact/ContactCenter";
 import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
-import { Search, Users, FileText, Activity, Mail } from "lucide-react";
+import { Search, Users, Calendar, FileText, Phone, Mail, MapPin, Heart, Activity, Clock } from "lucide-react";
+
+interface Patient {
+  id: string;
+  name: string;
+  age: number;
+  gender: string;
+  email: string;
+  phone: string;
+  condition: string;
+  lastVisit: string;
+  nextAppointment: string;
+  status: "active" | "inactive" | "pending";
+  avatar: string;
+}
+
+const mockPatients: Patient[] = [
+  {
+    id: "1",    name: "Emily Rodriguez",    age: 34,
+    gender: "Female",    email: "emily.rodriguez@email.com",    phone: "+1 (555) 123-4567",    condition: "Hypertension",    lastVisit: "2025-01-15",    nextAppointment: "2025-02-15",    status: "active",    avatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab61rTDKmrydpiUl7xdk36wxrL/a-professional-portrait-of-a-female-doct-1772848849712-1b8fd6f3.png"},
+  {
+    id: "2",    name: "Michael Thompson",    age: 52,
+    gender: "Male",    email: "michael.thompson@email.com",    phone: "+1 (555) 234-5678",    condition: "Diabetes Type 2",    lastVisit: "2025-01-10",    nextAppointment: "2025-02-10",    status: "active",    avatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab61rTDKmrydpiUl7xdk36wxrL/a-professional-portrait-of-an-older-male-1772848851376-833457fc.png"},
+  {
+    id: "3",    name: "Sarah Johnson",    age: 28,
+    gender: "Female",    email: "sarah.johnson@email.com",    phone: "+1 (555) 345-6789",    condition: "Asthma",    lastVisit: "2025-01-20",    nextAppointment: "2025-02-20",    status: "active",    avatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab61rTDKmrydpiUl7xdk36wxrL/a-professional-portrait-of-a-female-heal-1772848850769-375be9a4.png"},
+  {
+    id: "4",    name: "James Chen",    age: 45,
+    gender: "Male",    email: "james.chen@email.com",    phone: "+1 (555) 456-7890",    condition: "Cardiac Care",    lastVisit: "2025-01-12",    nextAppointment: "2025-01-29",    status: "pending",    avatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab61rTDKmrydpiUl7xdk36wxrL/a-professional-portrait-of-a-male-nurse--1772848851435-e85b1a73.png"},
+  {
+    id: "5",    name: "Lisa Martinez",    age: 55,
+    gender: "Female",    email: "lisa.martinez@email.com",    phone: "+1 (555) 567-8901",    condition: "Arthritis",    lastVisit: "2024-12-15",    nextAppointment: "2025-03-01",    status: "inactive",    avatar: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Ab61rTDKmrydpiUl7xdk36wxrL/a-professional-portrait-of-a-female-heal-1772848850769-375be9a4.png"},
+];
+
+export default function PatientsPage() {
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedPatient, setSelectedPatient] = useState<Patient | null>(null);
+  const [filterStatus, setFilterStatus] = useState<string>("all");
+
+  const filteredPatients = mockPatients.filter((patient) => {
+    const matchesSearch =
+      patient.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      patient.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      patient.phone.includes(searchTerm);
+    const matchesStatus = filterStatus === "all" || patient.status === filterStatus;
+    return matchesSearch && matchesStatus;
+  });
 
-export default function PatientDirectoryPage() {
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="reveal-blur"
       borderRadius="rounded"
-      contentWidth="small"
+      contentWidth="medium"
-      sizing="largeSizeMediumTitles"
+      sizing="medium"
       background="circleGradient"
-      cardStyle="glass-depth"
+      cardStyle="glass-elevated"
-      primaryButtonStyle="radial-glow"
+      primaryButtonStyle="gradient"
       secondaryButtonStyle="glass"
-      headingFontWeight="extrabold"
+      headingFontWeight="normal"
     >
       <div id="nav" data-section="nav">
         <NavbarStyleApple
@@ -36,62 +78,217 @@ export default function PatientDirectoryPage() {
         />
       </div>
 
-      <div id="patient-features" data-section="patient-features">
+      <div className="min-h-screen bg-background pt-24 pb-20">
-        <FeatureCardTwelve
+        <div className="container mx-auto px-4 md:px-6">
-          title="Patient Directory & Search Management"
+          {/* Header */}
-          description="Powerful tools to find, manage, and organize patient information efficiently"
+          <div className="mb-12">
-          tag="Patient Management"
+            <h1 className="text-4xl md:text-5xl font-bold mb-4">Patient Records Management</h1>
-          tagIcon={Search}
+            <p className="text-lg text-foreground/70">Search and view patient information, medical history, and appointments</p>
-          tagAnimation="slide-up"
+          </div>
-          features={[
-            {
-              id: "search",              label: "Search",              title: "Advanced Patient Search & Filtering",              items: [
-                "Real-time search across patient database",                "Filter by multiple criteria (name, ID, condition, status)",                "Saved search templates for frequent queries",                "Quick access to recently viewed patient records"],
-            },
-            {
-              id: "profiles",              label: "Profiles",              title: "Comprehensive Patient Profile Management",              items: [
-                "Complete demographic and contact information",                "Medical history and chronic conditions",                "Current medications and allergies",                "Emergency contacts and insurance details"],
-            },
-            {
-              id: "organization",              label: "Organization",              title: "Intelligent Patient Organization System",              items: [
-                "Custom patient groups and cohorts",                "Risk stratification and priority flags",                "Department and care team assignments",                "Patient lifecycle tracking from admission to discharge"],
-            },
-          ]}
-          animationType="slide-up"
-          textboxLayout="default"
-          useInvertedBackground={true}
-        />
-      </div>
 
-      <div id="patient-metrics" data-section="patient-metrics">
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-        <MetricCardThree
+            {/* Left Column - Search and Filter */}
-          title="Patient Directory Impact"
+            <div className="lg:col-span-1">
-          description="Streamline patient management with comprehensive directory capabilities"
+              <div className="bg-card rounded-2xl p-6 border border-background-accent/20">
-          metrics={[
+                {/* Search Box */}
-            { id: "1", icon: Users, title: "Active Patients", value: "15,000+" },
+                <div className="mb-6">
-            { id: "2", icon: Search, title: "Search Time Reduced", value: "85%" },
+                  <label className="block text-sm font-semibold mb-3">Search Patients</label>
-            { id: "3", icon: FileText, title: "Records Accessible", value: "100%" },
+                  <div className="relative">
-            { id: "4", icon: Activity, title: "Data Currency", value: "Real-time" },
+                    <Search className="absolute left-3 top-3 text-foreground/40" size={20} />
-          ]}
+                    <input
-          animationType="slide-up"
+                      type="text"
-          textboxLayout="default"
+                      placeholder="Name, email, or phone"
-          useInvertedBackground={false}
+                      value={searchTerm}
-        />
+                      onChange={(e) => setSearchTerm(e.target.value)}
-      </div>
+                      className="w-full pl-10 pr-4 py-2 bg-background border border-background-accent/30 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-cta"
+                    />
+                  </div>
+                </div>
 
-      <div id="contact" data-section="contact">
+                {/* Filter by Status */}
-        <ContactCenter
+                <div>
-          tag="Get More Info"
+                  <label className="block text-sm font-semibold mb-3">Filter by Status</label>
-          tagIcon={Mail}
+                  <div className="space-y-2">
-          tagAnimation="slide-up"
+                    {["all", "active", "pending", "inactive"].map((status) => (
-          title="Optimize Your Patient Directory Management"
+                      <button
-          description="Learn how our advanced search and organization tools can streamline your patient management workflows and improve care coordination."
+                        key={status}
-          background={{ variant: "rotated-rays-animated-grid" }}
+                        onClick={() => setFilterStatus(status)}
-          useInvertedBackground={false}
+                        className={`w-full text-left px-4 py-2 rounded-lg transition-all ${
-          inputPlaceholder="Enter your email"
+                          filterStatus === status
-          buttonText="Get Started"
+                            ? "bg-primary-cta text-background"
-          termsText="We respect your privacy. HIPAA-compliant communication. Response within 24 hours."
+                            : "bg-background text-foreground hover:bg-background-accent/30"
-        />
+                        }`}
+                      >
+                        <span className="capitalize">{status === "all" ? "All Patients" : status}</span>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Right Column - Patient List and Detail View */}
+            <div className="lg:col-span-2">
+              {!selectedPatient ? (
+                // Patient List View
+                <div className="space-y-4">
+                  {filteredPatients.length > 0 ? (
+                    filteredPatients.map((patient) => (
+                      <div
+                        key={patient.id}
+                        onClick={() => setSelectedPatient(patient)}
+                        className="bg-card rounded-xl p-4 border border-background-accent/20 cursor-pointer hover:border-primary-cta/50 hover:shadow-lg transition-all"
+                      >
+                        <div className="flex items-start gap-4">
+                          <img
+                            src={patient.avatar}
+                            alt={patient.name}
+                            className="w-12 h-12 rounded-full object-cover"
+                          />
+                          <div className="flex-1">
+                            <div className="flex items-center justify-between mb-2">
+                              <h3 className="text-lg font-semibold">{patient.name}</h3>
+                              <span
+                                className={`text-xs px-3 py-1 rounded-full ${
+                                  patient.status === "active"
+                                    ? "bg-green-500/20 text-green-700"
+                                    : patient.status === "pending"
+                                    ? "bg-yellow-500/20 text-yellow-700"
+                                    : "bg-gray-500/20 text-gray-700"
+                                }`}
+                              >
+                                {patient.status.charAt(0).toUpperCase() + patient.status.slice(1)}
+                              </span>
+                            </div>
+                            <p className="text-sm text-foreground/60 mb-2">{patient.condition}</p>
+                            <div className="flex gap-4 text-sm text-foreground/50">
+                              <span>Age: {patient.age}</span>
+                              <span>Last Visit: {new Date(patient.lastVisit).toLocaleDateString()}</span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    ))
+                  ) : (
+                    <div className="text-center py-12 bg-card rounded-xl border border-background-accent/20">
+                      <Users size={48} className="mx-auto text-foreground/30 mb-4" />
+                      <p className="text-foreground/60">No patients found matching your search</p>
+                    </div>
+                  )}
+                </div>
+              ) : (
+                // Patient Detail View
+                <div className="bg-card rounded-xl p-6 border border-background-accent/20">
+                  <button
+                    onClick={() => setSelectedPatient(null)}
+                    className="mb-6 px-4 py-2 rounded-lg bg-background-accent/30 text-foreground hover:bg-background-accent/50 transition-all"
+                  >
+                    ← Back to List
+                  </button>
+
+                  {/* Patient Header */}
+                  <div className="flex items-start gap-6 mb-8 pb-8 border-b border-background-accent/20">
+                    <img
+                      src={selectedPatient.avatar}
+                      alt={selectedPatient.name}
+                      className="w-20 h-20 rounded-full object-cover"
+                    />
+                    <div className="flex-1">
+                      <div className="flex items-center justify-between mb-2">
+                        <h2 className="text-3xl font-bold">{selectedPatient.name}</h2>
+                        <span
+                          className={`text-sm px-3 py-1 rounded-full ${
+                            selectedPatient.status === "active"
+                              ? "bg-green-500/20 text-green-700"
+                              : selectedPatient.status === "pending"
+                              ? "bg-yellow-500/20 text-yellow-700"
+                              : "bg-gray-500/20 text-gray-700"
+                          }`}
+                        >
+                          {selectedPatient.status.charAt(0).toUpperCase() + selectedPatient.status.slice(1)}
+                        </span>
+                      </div>
+                      <p className="text-lg text-foreground/70 mb-3">{selectedPatient.condition}</p>
+                      <div className="grid grid-cols-2 gap-4">
+                        <div>
+                          <p className="text-sm text-foreground/50">Age</p>
+                          <p className="font-semibold">{selectedPatient.age} years old</p>
+                        </div>
+                        <div>
+                          <p className="text-sm text-foreground/50">Gender</p>
+                          <p className="font-semibold">{selectedPatient.gender}</p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Contact Information */}
+                  <div className="mb-8">
+                    <h3 className="text-xl font-semibold mb-4">Contact Information</h3>
+                    <div className="space-y-3">
+                      <div className="flex items-center gap-3">
+                        <Mail size={20} className="text-primary-cta" />
+                        <div>
+                          <p className="text-sm text-foreground/50">Email</p>
+                          <p className="font-medium">{selectedPatient.email}</p>
+                        </div>
+                      </div>
+                      <div className="flex items-center gap-3">
+                        <Phone size={20} className="text-primary-cta" />
+                        <div>
+                          <p className="text-sm text-foreground/50">Phone</p>
+                          <p className="font-medium">{selectedPatient.phone}</p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Appointment Information */}
+                  <div className="mb-8">
+                    <h3 className="text-xl font-semibold mb-4">Appointment Schedule</h3>
+                    <div className="grid grid-cols-2 gap-4">
+                      <div className="bg-background rounded-lg p-4 border border-background-accent/20">
+                        <div className="flex items-center gap-2 mb-2">
+                          <Clock size={18} className="text-primary-cta" />
+                          <p className="text-sm text-foreground/50">Last Visit</p>
+                        </div>
+                        <p className="font-semibold">{new Date(selectedPatient.lastVisit).toLocaleDateString()}</p>
+                      </div>
+                      <div className="bg-background rounded-lg p-4 border border-background-accent/20">
+                        <div className="flex items-center gap-2 mb-2">
+                          <Calendar size={18} className="text-primary-cta" />
+                          <p className="text-sm text-foreground/50">Next Appointment</p>
+                        </div>
+                        <p className="font-semibold">{new Date(selectedPatient.nextAppointment).toLocaleDateString()}</p>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Medical Information */}
+                  <div>
+                    <h3 className="text-xl font-semibold mb-4">Medical Information</h3>
+                    <div className="grid grid-cols-2 gap-4">
+                      <div className="bg-background rounded-lg p-4 border border-background-accent/20 flex items-center gap-3">
+                        <Heart size={24} className="text-primary-cta" />
+                        <div>
+                          <p className="text-sm text-foreground/50">Primary Condition</p>
+                          <p className="font-semibold">{selectedPatient.condition}</p>
+                        </div>
+                      </div>
+                      <div className="bg-background rounded-lg p-4 border border-background-accent/20 flex items-center gap-3">
+                        <Activity size={24} className="text-primary-cta" />
+                        <div>
+                          <p className="text-sm text-foreground/50">Health Status</p>
+                          <p className="font-semibold capitalize">{selectedPatient.status}</p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
       </div>
 
       <div id="footer" data-section="footer">
@@ -131,4 +328,4 @@ export default function PatientDirectoryPage() {
       </div>
     </ThemeProvider>
   );
-}
+}