Update src/app/page.tsx

src/app/page.tsx

@@ -2,16 +2,16 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactText from '@/components/sections/contact/ContactText';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
-import FaqBase from '@/components/sections/faq/FaqBase';
+import FaqDouble from '@/components/sections/faq/FaqDouble';
-import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
+import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
-import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
+import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
-import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
+import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
-import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
+import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
-import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
+import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
-import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import TextAbout from '@/components/sections/about/TextAbout';
 import { Award, Briefcase, CheckCircle } from "lucide-react";
 
 export default function LandingPage() {
@@ -30,331 +30,119 @@ export default function LandingPage() {
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarStyleApple
+      <NavbarLayoutFloatingOverlay
         navItems={[
-        {
+          { name: "Početna", id: "#hero" },
-          name: "Home",
+          { name: "O nama", id: "#about" },
-          id: "#hero",
+          { name: "Usluge", id: "#features" },
-        },
+          { name: "Paketi", id: "#pricing" },
-        {
+          { name: "FAQ", id: "#faq" }
-          name: "About",
-          id: "#about",
-        },
-        {
-          name: "Services",
-          id: "#features",
-        },
-        {
-          name: "Pricing",
-          id: "#pricing",
-        },
-        {
-          name: "FAQ",
-          id: "#faq",
-        },
         ]}
         brandName="Brokerage"
       />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroSplitKpi
+      <HeroSplitDualMedia
-      background={{
+        tag="Vaša najkraća veza do kredita"
-        variant: "gradient-bars",
+        title="Profesionalno posredovanje između vas i vodećih banaka"
-      }}
+        description="Najpovoljniji uslovi kreditiranja uz maksimalnu uštedu vašeg vremena i truda."
-      title="Vaša najkraća veza do kredita"
+        rating={5}
-      description="Profesionalno posredovanje između vas i vodećih banaka za najpovoljnije uslove kreditiranja uz maksimalnu uštedu vremena."
+        ratingText="500+ zadovoljnih klijenata"
-      kpis={[
+        background={{ variant: "gradient-bars" }}
-        {
+        mediaItems={[
-          value: "500+",
+          { imageSrc: "http://img.b2bpic.net/free-photo/happy-african-american-insurance-agent-going-through-terms-contract-with-couple-pointing-place-they-need-sign-office_637285-1146.jpg" },
-          label: "Odobrenih kredita",
+          { imageSrc: "http://img.b2bpic.net/free-photo/smiling-couple-having-consultations-with-their-financial-advisor-office_637285-6880.jpg" }
-        },
-        {
-          value: "15",
-          label: "Partnerskih banaka",
-        },
-        {
-          value: "24h",
-          label: "Odgovor na upit",
-        },
-      ]}
-      enableKpiAnimation={true}
-      imageSrc="http://img.b2bpic.net/free-photo/still-life-office-cleaning-process_23-2149343042.jpg?_wi=1"
-      mediaAnimation="slide-up"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/workplace-with-laptop-cleaning-products-flat-lay_169016-23965.jpg",
-          alt: "Workplace with laptop and cleaning products flat lay",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/working-accountant_1098-13967.jpg",
-          alt: "Working accountant",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/still-life-office-cleaning-process_23-2149343041.jpg",
-          alt: "Still life of office cleaning process",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/office-hardware_1098-14352.jpg",
-          alt: "Office hardware",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/happy-african-american-insurance-agent-going-through-terms-contract-with-couple-pointing-place-they-need-sign-office_637285-1146.jpg",
-          alt: "Happy African American insurance agent",
-        },
-      ]}
-      avatarText="Preko 500+ zadovoljnih klijenata"
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Brzo odobrenje",
-        },
-        {
-          type: "text",
-          text: "Transparentni uslovi",
-        },
-        {
-          type: "text",
-          text: "Stručna podrška",
-        },
-        {
-          type: "text",
-          text: "Minimalna dokumentacija",
-        },
-        {
-          type: "text",
-          text: "Najniže kamate",
-        },
         ]}
       />
   </div>
 
   <div id="about" data-section="about">
-      <TextSplitAbout
+      <TextAbout
-      useInvertedBackground={false}
+        title="Finansijski savetnik na vašoj strani"
-      title="Zašto odabrati nas?"
+        tag="O nama"
-      description={[
-        "Mi smo vaš lični finansijski savetnik. Naš tim analizira ponude svih banaka umesto vas, kako biste dobili kredit bez skrivene papirologije i sa minimalnim kamatnim stopama.",
-        "Naš cilj je da proces dobijanja kredita učinimo jednostavnim, transparentnim i efikasnim.",
-      ]}
       />
   </div>
 
   <div id="features" data-section="features">
-      <FeatureCardTwentyNine
+      <FeatureCardEight
-      animationType="slide-up"
-      textboxLayout="split"
-      gridVariant="two-columns-alternating-heights"
-      useInvertedBackground={true}
-      features={[
-        {
-          title: "Analiza ponuda",
-          description: "Uporedna analiza svih bankarskih ponuda za vas.",
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-equipped-computer-lab_23-2149241207.jpg",
-          titleImageSrc: "http://img.b2bpic.net/free-photo/satisfied-young-man-looking-pleased-credit-card-showing-empty-smartphone-screen-standing-white_1258-164030.jpg",
-          buttonText: "Saznaj više",
-        },
-        {
-          title: "Stručna podrška",
-          description: "Saveti naših eksperata za bolju finansijsku odluku.",
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-man-woman-working-browsing-tablet-computer-outdoors_1262-12359.jpg",
-          titleImageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-showroom-agent-shaking-hands-with-clients-after-closing-deal_482257-124430.jpg",
-          buttonText: "Kontaktiraj nas",
-        },
-        {
-          title: "Sigurnost podataka",
-          description: "Vaša dokumentacija je kod nas u sigurnim rukama.",
-          imageSrc: "http://img.b2bpic.net/free-photo/general-director-signing-work-contracts-approving-employees-requests_482257-123901.jpg",
-          titleImageSrc: "http://img.b2bpic.net/free-photo/young-company-analyst-office-watching-business-presentation-pc_482257-118998.jpg",
-          buttonText: "Pogledaj više",
-        },
-      ]}
         title="Naše usluge"
-      description="Sveobuhvatna podrška u svakom koraku procesa kreditiranja."
+        textboxLayout="split"
+        features={[
+          { title: "Analiza ponuda", description: "Uporedna analiza svih banaka za najbolje kamate." },
+          { title: "Stručna podrška", description: "Ekspertski saveti za vašu finansijsku stabilnost." },
+          { title: "Sigurnost", description: "Vaša dokumentacija je maksimalno zaštićena." }
+        ]}
       />
   </div>
 
   <div id="pricing" data-section="pricing">
-      <PricingCardNine
+      <PricingCardThree
+        title="Transparentni paketi"
         animationType="slide-up"
         textboxLayout="default"
-      useInvertedBackground={false}
         plans={[
-        {
+          { id: "basic", price: "Besplatno", name: "Osnovne konsultacije", features: ["Analiza ponuda", "Email podrška"], buttons: [{text: "Izaberi"}] },
-          id: "basic",
+          { id: "pro", price: "Provizija", name: "Premijum podrška", features: ["Prikupljanje dokaza", "Prioritetno procesiranje"], buttons: [{text: "Kontaktirajte nas"}] }
-          title: "Osnovni",
-          price: "Besplatno",
-          period: "konsultacije",
-          features: [
-            "Analiza ponude",
-            "Email podrška",
-          ],
-          button: {
-            text: "Izaberi",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-couple-having-consultations-with-their-financial-advisor-office_637285-6880.jpg",
-          imageAlt: "financial advisor client meeting",
-        },
-        {
-          id: "pro",
-          title: "Premijum",
-          price: "Provizija",
-          period: "po realizaciji",
-          features: [
-            "Analiza ponude",
-            "Prikupljanje dokumentacije",
-            "Prioritetno procesiranje",
-          ],
-          button: {
-            text: "Kontakt",
-          },
-          imageSrc: "http://img.b2bpic.net/free-photo/still-life-office-cleaning-process_23-2149343042.jpg?_wi=2",
-          imageAlt: "financial advisor client meeting",
-        },
         ]}
-      title="Naši paketi"
-      description="Odaberite model podrške koji vama odgovara."
       />
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardOne
+      <MetricCardThree
+        title="Rezultati"
         animationType="slide-up"
         textboxLayout="split"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={true}
         metrics={[
-        {
+          { id: "m1", icon: CheckCircle, title: "Zadovoljstvo", value: "98%" },
-          id: "m1",
+          { id: "m2", icon: Briefcase, title: "Uspešnih kredita", value: "500+" },
-          value: "98%",
+          { id: "m3", icon: Award, title: "Godina tradicije", value: "5" }
-          title: "Zadovoljstvo",
-          description: "Naših klijenata",
-          icon: CheckCircle,
-        },
-        {
-          id: "m2",
-          value: "100+",
-          title: "Projekata",
-          description: "Uspešno zatvorenih",
-          icon: Briefcase,
-        },
-        {
-          id: "m3",
-          value: "5+",
-          title: "Godina",
-          description: "Tradicije",
-          icon: Award,
-        },
         ]}
-      title="Uspešni rezultati"
-      description="Brojke koje garantuju kvalitet naše usluge."
       />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwelve
+      <TestimonialCardThirteen
-      useInvertedBackground={false}
+        showRating={true}
+        animationType="slide-up"
+        title="Šta klijenti kažu o nama"
+        textboxLayout="default"
         testimonials={[
-        {
+            { id: "t1", name: "Ana Petrović", handle: "Klijent", testimonial: "Proces je bio brz i jednostavan, hvala na pomoći!", rating: 5 },
-          id: "t1",
+            { id: "t2", name: "Marko Ivić", handle: "Klijent", testimonial: "Uštedeli su mi mnogo novca na kamatama.", rating: 5 }
-          name: "Ana Petrović",
-          imageSrc: "http://img.b2bpic.net/free-photo/business-people-working-together_23-2148826968.jpg",
-        },
-        {
-          id: "t2",
-          name: "Marko Ivić",
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg",
-        },
-        {
-          id: "t3",
-          name: "Jelena Milić",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-smiley-man-looking-camera_23-2148306634.jpg",
-        },
-        {
-          id: "t4",
-          name: "Ivan Savić",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-young-businesswoman_23-2147837532.jpg",
-        },
-        {
-          id: "t5",
-          name: "Dragan Dimić",
-          imageSrc: "http://img.b2bpic.net/free-photo/outdoors-business-man-listening-happy-music_23-2148763857.jpg",
-        },
         ]}
-      cardTitle="Šta kažu naši klijenti"
-      cardTag="Poverenje"
-      cardAnimation="slide-up"
       />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqBase
+      <FaqDouble
-      textboxLayout="split"
-      useInvertedBackground={true}
-      faqs={[
-        {
-          id: "q1",
-          title: "Koliko traje procedura?",
-          content: "Zavisno od banke, od 2 do 7 radnih dana.",
-        },
-        {
-          id: "q2",
-          title: "Da li naplaćujete konsultacije?",
-          content: "Početne konsultacije su uvek besplatne.",
-        },
-        {
-          id: "q3",
-          title: "Koji su uslovi?",
-          content: "Zavisi od tipa kredita i vaše kreditne sposobnosti.",
-        },
-      ]}
         title="Česta pitanja"
-      description="Saznajte više o procesu kreditiranja."
         faqsAnimation="slide-up"
+        textboxLayout="split"
+        faqs={[
+            { id: "f1", title: "Da li su konsultacije besplatne?", content: "Da, prvi razgovor je u potpunosti besplatan." },
+            { id: "f2", title: "Koje kredite posredujete?", content: "Stambene, keš i auto kredite svih banaka." }
+        ]}
       />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactText
+      <ContactCTA
-      useInvertedBackground={false}
+        tag="Kontakt"
-      background={{
+        title="Započnite svoj put do povoljnog kredita"
-        variant: "gradient-bars",
+        description="Naš tim vas čeka. Popunite kratak formular ili nas direktno pozovite."
-      }}
+        buttons={[{text: "Pošalji upit"}]}
-      text="Spremni za prvi korak ka vašem kreditu?"
+        background={{ variant: "sparkles-gradient" }}
-      buttons={[
-        {
-          text: "Pošalji upit",
-        },
-      ]}
       />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBaseCard
+      <FooterMedia
-      logoText="Brokerage Firma"
+        logoText="Brokerage"
+        imageSrc="http://img.b2bpic.net/free-photo/business-people-working-together_23-2148826968.jpg"
         columns={[
-        {
+            { title: "Navigacija", items: [{label: "Početna", href: "#hero"}] },
-          title: "Navigacija",
+            { title: "Legal", items: [{label: "Privatnost", href: "#"}] }
-          items: [
-            {
-              label: "Početna",
-              href: "#hero",
-            },
-            {
-              label: "O nama",
-              href: "#about",
-            },
-          ],
-        },
-        {
-          title: "Legalno",
-          items: [
-            {
-              label: "Politika privatnosti",
-              href: "#",
-            },
-          ],
-        },
         ]}
       />
   </div>