Update src/app/page.tsx

Merge version_4 into main

src/app/page.tsx

@@ -2,14 +2,14 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
+import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
 import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
-import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
-import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
+import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
+import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
 import ContactSplit from '@/components/sections/contact/ContactSplit';
-import FooterBase from '@/components/sections/footer/FooterBase';
-import { Sparkles, Smile, Star, Mail } from 'lucide-react';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import { Smile, Mail } from 'lucide-react';
 
 export default function PoliklinikaLiriaPage() {
   return (
@@ -17,13 +17,13 @@ export default function PoliklinikaLiriaPage() {
       defaultButtonVariant="text-stagger"
       defaultTextAnimation="reveal-blur"
       borderRadius="pill"
-      contentWidth="smallMedium"
-      sizing="mediumLargeSizeMediumTitles"
-      background="aurora"
-      cardStyle="layered-gradient"
-      primaryButtonStyle="primary-glow"
+      contentWidth="medium"
+      sizing="largeSizeMediumTitles"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
       secondaryButtonStyle="solid"
-      headingFontWeight="light"
+      headingFontWeight="semibold"
     >
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingInline
@@ -35,39 +35,29 @@ export default function PoliklinikaLiriaPage() {
             { name: "Kontakti", id: "contact" }
           ]}
           button={{
-            text: "Rezervo Terminin",            href: "#contact"
+            text: "Rezervo Terminin", href: "#contact"
           }}
         />
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroSplitKpi
-          title="Poliklinikë 'Liria' - Kujdes i Përjetshëm për Buzëqeshjen Tuaj"
-          description="Ne ofrojmë shërbime stomatologjike të nivelit të lartë me teknologji bashkëkohore. Ekipi ynë i ekspertëve është i përkushtuar për shëndetin tuaj oral dhe estetikën e buzëqeshjes suaj."
-          tag="Profesionalizëm dhe Besim"
-          tagIcon={Sparkles}
-          background={{ variant: "glowing-orb" }}
-          imageSrc="http://img.b2bpic.net/free-photo/handsome-male-dentist-room-with-medical-equipment-background_613910-15240.jpg"
-          imageAlt="Poliklinikë Liria - ambient modern"
-          imagePosition="right"
-          kpis={[
-            { value: "15+", label: "Vite Përvojë" },
-            { value: "10k+", label: "Pacientë të Kënaqur" },
-            { value: "100%", label: "Higjienë e Garantuar" }
-          ]}
-          enableKpiAnimation={true}
+        <HeroLogoBillboard
+          logoText="Poliklinikë 'Liria'"
+          description="Ne ofrojmë shërbime stomatologjike të nivelit të lartë me teknologji bashkëkohore."
           buttons={[
             { text: "Shiko Shërbimet", href: "#services" },
             { text: "Kontakto Na", href: "#contact" }
           ]}
-          mediaAnimation="slide-up"
+          imageSrc="http://img.b2bpic.net/free-photo/handsome-male-dentist-room-with-medical-equipment-background_613910-15240.jpg"
+          imageAlt="Poliklinikë Liria"
+          background={{ variant: "plain" }}
         />
       </div>
 
       <div id="services" data-section="services">
         <ProductCardTwo
           title="Shërbimet Tona Stomatologjike"
-          description="Nga trajtimet parandaluese deri te ato estetike, ne sigurojmë kujdes gjithëpërfshirës për të gjitha grupmoshat."
+          description="Kujdes gjithëpërfshirës për shëndetin tuaj oral."
           tag="Shërbime Profesionale"
           tagIcon={Smile}
           textboxLayout="default"
@@ -75,72 +65,43 @@ export default function PoliklinikaLiriaPage() {
           gridVariant="three-columns-all-equal-width"
           useInvertedBackground={true}
           products={[
-            {
-              id: "1",              brand: "Estetikë",              name: "Zbardhimi Profesional",              price: "Kontaktoni për Çmim",              rating: 5,
-              reviewCount: "450",              imageSrc: "http://img.b2bpic.net/free-photo/closeup-young-woman-having-her-teeth-whitened-with-ultraviolet-light-dental-clinic_662251-2598.jpg",              imageAlt: "Zbardhimi i dhëmbëve"
-            },
-            {
-              id: "2",              brand: "Implantologji",              name: "Implantet Dentare",              price: "Kontaktoni për Çmim",              rating: 5,
-              reviewCount: "320",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-old-man-outdoors_23-2148997295.jpg",              imageAlt: "Implantet dentare"
-            },
-            {
-              id: "3",              brand: "Ortodonci",              name: "Drejtimi i Dhëmbëve",              price: "Kontaktoni për Çmim",              rating: 5,
-              reviewCount: "210",              imageSrc: "http://img.b2bpic.net/free-photo/dental-procedure-installing-braces-close-up-dentistry-braces-teeth_169016-67240.jpg",              imageAlt: "Ortodonci"
-            }
+            { id: "1", brand: "Estetikë", name: "Zbardhimi", price: "Kontaktoni", rating: 5, reviewCount: "450", imageSrc: "http://img.b2bpic.net/free-photo/closeup-young-woman-having-her-teeth-whitened-with-ultraviolet-light-dental-clinic_662251-2598.jpg" },
+            { id: "2", brand: "Implant", name: "Implantet", price: "Kontaktoni", rating: 5, reviewCount: "320", imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-old-man-outdoors_23-2148997295.jpg" },
+            { id: "3", brand: "Ortodonci", name: "Drejtimi", price: "Kontaktoni", rating: 5, reviewCount: "210", imageSrc: "http://img.b2bpic.net/free-photo/dental-procedure-installing-braces-close-up-dentistry-braces-teeth_169016-67240.jpg" }
           ]}
-          buttons={[
-            { text: "Rezervo Terminin", href: "#contact" }
+        />
+      </div>
+      
+      <div id="metrics" data-section="metrics">
+        <MetricCardEleven
+          title="Rezultate të Konfirmuara"
+          description="Kujdesi ynë në shifra."
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          metrics={[
+            { id: "1", value: "10+", title: "Vite Përvojë", description: "Besim i krijuar ndër vite.", imageSrc: "http://img.b2bpic.net/free-photo/diverse-team-medics-applauding-expert-physician-after-finding-diagnosis_482257-116764.jpg" },
+            { id: "2", value: "5000+", title: "Pacientë të Lumtur", description: "Buzëqeshje të rikthyera.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-joyful-male-doctor_171337-1489.jpg?_wi=1" }
           ]}
         />
       </div>
 
       <div id="about" data-section="about">
         <InlineImageSplitTextAbout
-          heading={[
-            { type: "text", content: "Poliklinikë 'Liria' - Standardi i ri në Kujdesin Dental" }
-          ]}
+          heading={[{ type: "text", content: "Standardi i ri në Kujdesin Dental" }]}
           useInvertedBackground={false}
-          buttons={[
-            { text: "Ekipi Ynë", href: "#testimonials" },
-            { text: "Vizito Klinikën", href: "#contact" }
-          ]}
-        />
-      </div>
-
-      <div id="features" data-section="features">
-        <FeatureCardOne
-          title="Pse të na zgjidhni ne?"
-          description="Përdorimi i teknologjisë digjitale dhe përvoja shumëvjeçare na bëjnë liderë në stomatologji."
-          tag="Cilësi dhe Siguri"
-          tagIcon={Star}
-          textboxLayout="default"
-          animationType="slide-up"
-          gridVariant="uniform-all-items-equal"
-          useInvertedBackground={true}
-          features={[
-            {
-              title: "Teknologji e Avancuar",              description: "Radiografi digjitale dhe pajisje moderne për saktësi maksimale.",              imageSrc: "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"},
-            {
-              title: "Ekip Ekspertësh",              description: "Stomatologë me specializime të avancuara dhe përkushtim.",              imageSrc: "http://img.b2bpic.net/free-photo/diverse-team-medics-applauding-expert-physician-after-finding-diagnosis_482257-116764.jpg"}
-          ]}
         />
       </div>
 
       <div id="testimonials" data-section="testimonials">
-        <TestimonialCardSix
-          title="Çfarë thonë pacientët tanë"
-          description="Besimi juaj është vlerësimi ynë më i lartë."
-          tag="Dëshmi nga Pacientët"
-          textboxLayout="default"
+        <TestimonialCardTwelve
+          cardTitle="Çfarë thonë pacientët tanë"
+          cardTag="Vlerësimet"
+          cardAnimation="slide-up"
           useInvertedBackground={false}
-          animationType="slide-up"
           testimonials={[
-            {
-              id: "1",              name: "Besnik H.",              handle: "Pacient",              testimonial: "Shërbim i shkëlqyer dhe staf shumë profesionist. Jam shumë i kënaqur me rezultatet.",              imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-joyful-male-doctor_171337-1489.jpg",              imageAlt: "Besnik H."
-            },
-            {
-              id: "2",              name: "Arta K.",              handle: "Paciente",              testimonial: "Kujdes maksimal dhe ambiente shumë të pastra. Rekomandim i ngrohtë!",              imageSrc: "http://img.b2bpic.net/free-photo/this-is-my-way-relax_329181-1143.jpg",              imageAlt: "Arta K."
-            }
+            { id: "1", name: "Besnik H.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-joyful-male-doctor_171337-1489.jpg?_wi=2" },
+            { id: "2", name: "Arta K.", imageSrc: "http://img.b2bpic.net/free-photo/this-is-my-way-relax_329181-1143.jpg" }
           ]}
         />
       </div>
@@ -149,40 +110,19 @@ export default function PoliklinikaLiriaPage() {
         <ContactSplit
           tag="Na Kontaktoni"
           tagIcon={Mail}
-          title="Rezervo Terminin Tuaj"
-          description="Jemi këtu për t'ju dëgjuar dhe për t'ju ofruar zgjidhjen më të mirë për shëndetin tuaj oral. Plotësoni formularin për më shumë informacione."
+          title="Rezervo Terminin"
+          description="Jemi këtu për t'ju dëgjuar."
           background={{ variant: "plain" }}
           useInvertedBackground={true}
-          imageSrc="http://img.b2bpic.net/free-photo/waiting-room-lobby-with-empty-reception-counter-desk-give-help-support-patients-with-consultation-appointments-professional-treatment-space-with-checkup-visits-clinical-exam_482257-50526.jpg"
-          imageAlt="Kontakt - Poliklinikë Liria"
-          mediaPosition="right"
-          mediaAnimation="slide-up"
-          inputPlaceholder="Shkruani emailin tuaj"
-          buttonText="Dërgo"
-          termsText="Me dërgimin e mesazhit, ju pajtoheni me politikat tona të privatësisë."
+          buttonText="Dërgo Mesazh"
         />
       </div>
 
       <div id="footer" data-section="footer">
-        <FooterBase
+        <FooterLogoReveal
           logoText="Poliklinikë 'Liria'"
-          copyrightText="© 2025 Poliklinikë 'Liria' | Të gjitha të drejtat të rezervuara"
-          columns={[
-            {
-              title: "Shërbimet",              items: [
-                { label: "Stomatologji e Përgjithshme", href: "#services" },
-                { label: "Implantologji", href: "#services" },
-                { label: "Ortodonci", href: "#services" }
-              ]
-            },
-            {
-              title: "Informacione",              items: [
-                { label: "Rreth Nesh", href: "#about" },
-                { label: "Kontakti", href: "#contact" },
-                { label: "Pyetje të shpeshta", href: "#" }
-              ]
-            }
-          ]}
+          leftLink={{ text: "Privacy", href: "#" }}
+          rightLink={{ text: "Terms", href: "#" }}
         />
       </div>
     </ThemeProvider>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f7f6f7;
-  --card: #ffffff;
-  --foreground: #0c1325;
-  --primary-cta: #0798ff;
-  --primary-cta-text: #f7f6f7;
-  --secondary-cta: #ffffff;
-  --secondary-cta-text: #0c1325;
-  --accent: #93c7ff;
-  --background-accent: #a8cde8;
+  --background: #ffffff;
+  --card: #f9f9f9;
+  --foreground: #000612e6;
+  --primary-cta: #15479c;
+  --primary-cta-text: #e3deea;
+  --secondary-cta: #f9f9f9;
+  --secondary-cta-text: #27231f;
+  --accent: #e2e2e2;
+  --background-accent: #c4c4c4;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);