About Countable and Seed

api/src/Kurs.Platform.DbMigrator/Seeds/SeederData.json

@@ -5710,7 +5710,7 @@
         {
             "resourceName": "Platform",
             "key": "Public.common.company",
-            "tr": "Kurum",
+            "tr": "Kurum Adı",
             "en": "Organization Name"
         },
         {
@@ -6244,7 +6244,7 @@
         {
             "resourceName": "Platform",
             "key": "Public.login.organizationPlaceholder",
-            "tr": "Kurum",
+            "tr": "Kurum Adı",
             "en": "Organization name"
         },
         {

ui/src/utils/hooks/useCountUp.ts

@@ -0,0 +1,62 @@
+import { useState, useEffect, useRef } from 'react'
+
+interface UseCountUpOptions {
+  start?: number
+  end: number
+  duration?: number
+  suffix?: string
+  prefix?: string
+}
+
+export const useCountUp = ({
+  start = 0,
+  end,
+  duration = 2000,
+  suffix = '',
+  prefix = '',
+}: UseCountUpOptions) => {
+  const [count, setCount] = useState(start)
+  const [isInView, setIsInView] = useState(false)
+  const elementRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting && !isInView) {
+          setIsInView(true)
+        }
+      },
+      { threshold: 0.1 },
+    )
+
+    if (elementRef.current) {
+      observer.observe(elementRef.current)
+    }
+
+    return () => observer.disconnect()
+  }, [isInView])
+
+  useEffect(() => {
+    if (!isInView) return
+
+    let startTime: number
+    const animateCount = (timestamp: number) => {
+      if (!startTime) startTime = timestamp
+
+      const progress = Math.min((timestamp - startTime) / duration, 1)
+      const currentCount = Math.floor(progress * (end - start) + start)
+
+      setCount(currentCount)
+
+      if (progress < 1) {
+        requestAnimationFrame(animateCount)
+      }
+    }
+
+    requestAnimationFrame(animateCount)
+  }, [isInView, start, end, duration])
+
+  const displayValue = `${prefix}${count}${suffix}`
+
+  return { count, displayValue, elementRef }
+}

ui/src/views/public/About.tsx

@@ -1,10 +1,16 @@
-import React from "react";
+import React from 'react'
-import { Users, Award, Clock, Globe2 } from "lucide-react";
+import { Users, Award, Clock, Globe2 } from 'lucide-react'
-import { useLocalization } from "@/utils/hooks/useLocalization";
+import { useLocalization } from '@/utils/hooks/useLocalization'
+import { useCountUp } from '@/utils/hooks/useCountUp'
 
 const About: React.FC = () => {
   const { translate } = useLocalization()
 
+  // Counter animations
+  const clientsCount = useCountUp({ end: 300, suffix: '+', duration: 2500 })
+  const experienceCount = useCountUp({ end: 20, suffix: '+', duration: 2000 })
+  const countriesCount = useCountUp({ end: 3, duration: 1500 })
+
   return (
     <div className="min-h-screen bg-gray-50">
       {/* Hero Section */}
@@ -14,12 +20,14 @@ const About: React.FC = () => {
           style={{
             backgroundImage:
               'url("https://images.pexels.com/photos/3183183/pexels-photo-3183183.jpeg?auto=compress&cs=tinysrgb&w=1920")',
-            backgroundSize: "cover",
+            backgroundSize: 'cover',
-            backgroundPosition: "center",
+            backgroundPosition: 'center',
           }}
         ></div>
         <div className="container mx-auto pt-20 relative">
-          <h1 className="text-5xl font-bold ml-4 mt-3 mb-2 text-white">{translate('::Public.about.title')}</h1>
+          <h1 className="text-5xl font-bold ml-4 mt-3 mb-2 text-white">
+            {translate('::Public.about.title')}
+          </h1>
           <p className="text-xl max-w-3xl ml-4">{translate('::Public.about.subtitle')}</p>
         </div>
       </div>
@@ -28,14 +36,18 @@ const About: React.FC = () => {
       <div className="py-10 bg-white">
         <div className="container mx-auto px-4">
           <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
-            <div className="text-center">
+            <div className="text-center" ref={clientsCount.elementRef}>
               <Users className="w-12 h-12 text-blue-600 mx-auto mb-4" />
-              <div className="text-4xl font-bold text-gray-900 mb-2">300+</div>
+              <div className="text-4xl font-bold text-gray-900 mb-2">
+                {clientsCount.displayValue}
+              </div>
               <div className="text-gray-600">{translate('::Public.about.stats.clients')}</div>
             </div>
-            <div className="text-center">
+            <div className="text-center" ref={experienceCount.elementRef}>
               <Award className="w-12 h-12 text-blue-600 mx-auto mb-4" />
-              <div className="text-4xl font-bold text-gray-900 mb-2">20+</div>
+              <div className="text-4xl font-bold text-gray-900 mb-2">
+                {experienceCount.displayValue}
+              </div>
               <div className="text-gray-600">{translate('::Public.about.stats.experience')}</div>
             </div>
             <div className="text-center">
@@ -43,9 +55,11 @@ const About: React.FC = () => {
               <div className="text-4xl font-bold text-gray-900 mb-2">7/24</div>
               <div className="text-gray-600">{translate('::Public.about.stats.support')}</div>
             </div>
-            <div className="text-center">
+            <div className="text-center" ref={countriesCount.elementRef}>
               <Globe2 className="w-12 h-12 text-blue-600 mx-auto mb-4" />
-              <div className="text-4xl font-bold text-gray-900 mb-2">3</div>
+              <div className="text-4xl font-bold text-gray-900 mb-2">
+                {countriesCount.displayValue}
+              </div>
               <div className="text-gray-600">{translate('::Public.about.stats.countries')}</div>
             </div>
           </div>
@@ -89,7 +103,7 @@ const About: React.FC = () => {
         </div>
       </div>
     </div>
-  );
+  )
-};
+}
 
-export default About;
+export default About