Update src/app/services/page.tsx

src/app/page.tsx

@@ -30,87 +30,29 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingInline
       navItems={[
-        {
-          name: "Features",
-          id: "#features",
-        },
-        {
-          name: "Pricing",
-          id: "#pricing",
-        },
-        {
-          name: "Support",
-          id: "#faq",
-        },
+        { name: "Services", id: "/services" },
+        { name: "Features", id: "#features" },
+        { name: "Pricing", id: "#pricing" },
+        { name: "Support", id: "#faq" },
       ]}
       brandName="Klinika"
       button={{
-        text: "Sign in",
-        href: "/auth",
-      }}
+        text: "Sign in",        href: "/auth"}}
     />
   </div>
 
   <div id="hero" data-section="hero">
       <HeroBillboard
       background={{
-        variant: "sparkles-gradient",
-      }}
+        variant: "sparkles-gradient"}}
       title="Clinic operations, simplified and secure"
       description="Manage staff, patients, and appointments in one role-based platform. Designed for speed and accuracy in healthcare settings."
       buttons={[
-        {
-          text: "Sign in to your clinic",
-          href: "/auth",
-        },
+        { text: "Sign in to your clinic", href: "/auth" },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/old-specialist-meeting-with-woman-patient-discuss-results-cabinet_482257-126979.jpg"
       imageAlt="medical software interface"
       mediaAnimation="slide-up"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/african-american-nurse-evaluating-lab-test-results-discussing-recovery-plan_482257-122745.jpg",
-          alt: "African american nurse evaluating lab test results and discussing recovery plan",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/it-admin-writes-ai-code-laptop_482257-91025.jpg",
-          alt: "IT admin writes AI code on laptop",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/empty-medical-cabinet-private-clinic-with-laptop-diagnostics_482257-119088.jpg",
-          alt: "Empty medical cabinet in private clinic with a laptop and diagnostics",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/close-up-dentist-nurse-holding-tablet-with-digital-radiography-while-doctor-is-working-with-patient-background-examining-teeth-problem-sitting-stomatological-chair-dental-clinic_482257-13467.jpg",
-          alt: "Close up dentist nurse holding tablet with digital radiography, while doctor is working with patient in background examining teeth problem sitting on stomatological chair in dental clinic.",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/person-uses-tablet-governmental-cyber-security-room-working-russian-flag_482257-90680.jpg",
-          alt: "Person uses tablet in governmental cyber security room working for Russian flag",
-        },
-      ]}
-      marqueeItems={[
-        {
-          type: "text",
-          text: "HIPAA Compliant",
-        },
-        {
-          type: "text",
-          text: "Real-time Analytics",
-        },
-        {
-          type: "text",
-          text: "Role-Based Security",
-        },
-        {
-          type: "text",
-          text: "Cloud-Native",
-        },
-        {
-          type: "text",
-          text: "Multi-Clinic Sync",
-        },
-      ]}
     />
   </div>
 
@@ -120,41 +62,9 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       features={[
-        {
-          id: "f1",
-          title: "Staff Management",
-          subtitle: "Centrally manage permissions",
-          category: "Admins",
-          value: "Full Control",
-        },
-        {
-          id: "f2",
-          title: "Quick Scheduling",
-          subtitle: "Streamlined patient booking",
-          category: "Cashiers",
-          value: "Efficiency",
-        },
-        {
-          id: "f3",
-          title: "Integrated Prescriptions",
-          subtitle: "Simple prescription writing",
-          category: "Doctors",
-          value: "Speed",
-        },
-        {
-          id: "f4",
-          title: "Secure Patient Logs",
-          subtitle: "Encrypted digital records",
-          category: "All Roles",
-          value: "High Security",
-        },
-        {
-          id: "f5",
-          title: "Automated Billing",
-          subtitle: "Instant invoicing logic",
-          category: "Cashiers",
-          value: "Seamless",
-        },
+        { id: "f1", title: "Staff Management", subtitle: "Centrally manage permissions", category: "Admins", value: "Full Control" },
+        { id: "f2", title: "Quick Scheduling", subtitle: "Streamlined patient booking", category: "Cashiers", value: "Efficiency" },
+        { id: "f3", title: "Integrated Prescriptions", subtitle: "Simple prescription writing", category: "Doctors", value: "Speed" },
       ]}
       title="Built for every role in the clinic"
       description="Streamlined interfaces for admins, doctors, and cashiers."
@@ -168,21 +78,8 @@ export default function LandingPage() {
       gridVariant="bento-grid"
       useInvertedBackground={true}
       metrics={[
-        {
-          id: "m1",
-          value: "95%",
-          description: "Appointment completion",
-        },
-        {
-          id: "m2",
-          value: "2.5m",
-          description: "Avg intake time",
-        },
-        {
-          id: "m3",
-          value: "40+",
-          description: "Clinics on platform",
-        },
+        { id: "m1", value: "95%", description: "Appointment completion" },
+        { id: "m2", value: "2.5m", description: "Avg intake time" },
       ]}
       title="Operational excellence"
       description="Data-driven clinic performance tracking."
@@ -196,48 +93,9 @@ export default function LandingPage() {
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
       products={[
-        {
-          id: "p1",
-          name: "Staff Management",
-          price: "Included",
-          variant: "Module",
-          imageSrc: "http://img.b2bpic.net/free-photo/team-doctors-looking-digital-tablet_107420-84759.jpg",
-        },
-        {
-          id: "p2",
-          name: "Patient Intake",
-          price: "Included",
-          variant: "Module",
-          imageSrc: "http://img.b2bpic.net/free-photo/register-now-application-information-concept_53876-125164.jpg",
-        },
-        {
-          id: "p3",
-          name: "Daily Scheduler",
-          price: "Included",
-          variant: "Module",
-          imageSrc: "http://img.b2bpic.net/free-photo/stethoscope-patient-information_1232-4435.jpg",
-        },
-        {
-          id: "p4",
-          name: "Prescription Portal",
-          price: "Included",
-          variant: "Module",
-          imageSrc: "http://img.b2bpic.net/free-photo/medical-objects-assortment-with-empty-notepad_23-2148502893.jpg",
-        },
-        {
-          id: "p5",
-          name: "Clinic Reporting",
-          price: "Add-on",
-          variant: "Module",
-          imageSrc: "http://img.b2bpic.net/free-photo/tablet-medical-equipment_23-2147648741.jpg",
-        },
-        {
-          id: "p6",
-          name: "Access Control",
-          price: "Included",
-          variant: "Module",
-          imageSrc: "http://img.b2bpic.net/free-photo/female-coworkers-wearing-face-masks-cooperating-while-using-desktop-pc-office_637285-5262.jpg",
-        },
+        { id: "p1", name: "Staff Management", price: "Included", variant: "Module", imageSrc: "http://img.b2bpic.net/free-photo/team-doctors-looking-digital-tablet_107420-84759.jpg" },
+        { id: "p2", name: "Patient Intake", price: "Included", variant: "Module", imageSrc: "http://img.b2bpic.net/free-photo/register-now-application-information-concept_53876-125164.jpg?_wi=1" },
+        { id: "p3", name: "Daily Scheduler", price: "Included", variant: "Module", imageSrc: "http://img.b2bpic.net/free-photo/stethoscope-patient-information_1232-4435.jpg?_wi=1" },
       ]}
       title="Platform modules"
       description="Comprehensive tools for modern practices."
@@ -248,31 +106,8 @@ export default function LandingPage() {
       <TestimonialCardTwelve
       useInvertedBackground={true}
       testimonials={[
-        {
-          id: "1",
-          name: "Dr. Sarah Miller",
-          imageSrc: "http://img.b2bpic.net/free-photo/female-entrepreneur-with-protective-face-mask-working-laptop-office_637285-9883.jpg",
-        },
-        {
-          id: "2",
-          name: "John Doe, Cashier",
-          imageSrc: "http://img.b2bpic.net/free-photo/doctor-sitting-medical-office-hospital_1170-2275.jpg",
-        },
-        {
-          id: "3",
-          name: "Dr. Alan Grant",
-          imageSrc: "http://img.b2bpic.net/free-photo/medical-specialist-discussing-healing-treatment-with-ill-woman-doctors-office-doctor-doing-medical-consultation-with-patient-while-wearing-face-masks-protection-against-pandemic_482257-42658.jpg",
-        },
-        {
-          id: "4",
-          name: "Jane Smith, Manager",
-          imageSrc: "http://img.b2bpic.net/free-photo/detective-specialist_1098-15356.jpg",
-        },
-        {
-          id: "5",
-          name: "Mark Wilson, Staff",
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-doctor-taking-notes_23-2149844640.jpg",
-        },
+        { id: "1", name: "Dr. Sarah Miller", imageSrc: "http://img.b2bpic.net/free-photo/female-entrepreneur-with-protective-face-mask-working-laptop-office_637285-9883.jpg" },
+        { id: "2", name: "John Doe, Cashier", imageSrc: "http://img.b2bpic.net/free-photo/doctor-sitting-medical-office-hospital_1170-2275.jpg" },
       ]}
       cardTitle="Trusted by clinic leaders"
       cardTag="Testimonials"
@@ -285,21 +120,8 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       faqs={[
-        {
-          id: "q1",
-          title: "Is role-based access secure?",
-          content: "Yes, we implement strict client-side and server-side validation.",
-        },
-        {
-          id: "q2",
-          title: "Can I integrate with insurance?",
-          content: "Our platform supports placeholder integrations for future billing plugins.",
-        },
-        {
-          id: "q3",
-          title: "Does it support multiple clinics?",
-          content: "Yes, the admin panel allows for centralized management across locations.",
-        },
+        { id: "q1", title: "Is role-based access secure?", content: "Yes, we implement strict security." },
+        { id: "q2", title: "Does it support multiple clinics?", content: "Yes, centralized management supported." },
       ]}
       title="Frequently Asked Questions"
       description="Answers to common setup and usage queries."
@@ -310,16 +132,9 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactText
       useInvertedBackground={true}
-      background={{
-        variant: "sparkles-gradient",
-      }}
+      background={{ variant: "sparkles-gradient" }}
       text="Ready to streamline your clinic's operations?"
-      buttons={[
-        {
-          text: "Contact our team",
-          href: "/contact",
-        },
-      ]}
+      buttons={[{ text: "Contact our team", href: "/contact" }]}
     />
   </div>
 
@@ -327,32 +142,8 @@ export default function LandingPage() {
       <FooterBaseReveal
       logoText="Klinika"
       columns={[
-        {
-          title: "Product",
-          items: [
-            {
-              label: "Features",
-              href: "#features",
-            },
-            {
-              label: "Security",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About",
-              href: "#",
-            },
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-          ],
-        },
+        { title: "Product", items: [{ label: "Services", href: "/services" }, { label: "Features", href: "#features" }] },
+        { title: "Company", items: [{ label: "About", href: "#" }, { label: "Contact", href: "#contact" }] },
       ]}
       copyrightText="© 2024 Klinika Systems. All rights reserved."
     />

src/app/services/page.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
+import { Stethoscope, ClipboardList, ShieldCheck } from "lucide-react";
+
+export default function ServicesPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumLarge"
+      background="grid"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="glass"
+      headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Services", id: "/services" },
+              { name: "Features", id: "/#features" },
+              { name: "Pricing", id: "/#pricing" },
+              { name: "Support", id: "/#faq" },
+            ]}
+            brandName="Klinika"
+            button={{ text: "Sign in", href: "/auth" }}
+          />
+        </div>
+
+        <div id="services-hero" data-section="services-hero">
+          <FeatureCardTwentyFive
+            title="Comprehensive Clinic Services"
+            description="Everything you need to run a modern medical practice efficiently."
+            animationType="slide-up"
+            textboxLayout="split"
+            useInvertedBackground={false}
+            features={[
+              {
+                title: "Patient Management",                description: "Seamless intake and scheduling",                icon: ClipboardList,
+                mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/register-now-application-information-concept_53876-125164.jpg?_wi=2" }, { imageSrc: "http://img.b2bpic.net/free-photo/stethoscope-patient-information_1232-4435.jpg?_wi=2" }]
+              },
+              {
+                title: "Diagnostic Support",                description: "Integrated digital health records",                icon: Stethoscope,
+                mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/medical-objects-assortment-with-empty-notepad_23-2148502893.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/tablet-medical-equipment_23-2147648741.jpg" }]
+              },
+              {
+                title: "Clinic Security",                description: "HIPAA compliant access controls",                icon: ShieldCheck,
+                mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/female-coworkers-wearing-face-masks-cooperating-while-using-desktop-pc-office_637285-5262.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/person-uses-tablet-governmental-cyber-security-room-working-russian-flag_482257-90680.jpg" }]
+              }
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterBaseReveal
+            logoText="Klinika"
+            columns={[
+              { title: "Product", items: [{ label: "Services", href: "/services" }, { label: "Features", href: "/#features" }] },
+              { title: "Company", items: [{ label: "About", href: "#" }, { label: "Contact", href: "/#contact" }] },
+            ]}
+            copyrightText="© 2024 Klinika Systems. All rights reserved."
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}