diff --git a/components/Counter.tsx b/components/Counter.tsx new file mode 100644 index 0000000..c125405 --- /dev/null +++ b/components/Counter.tsx @@ -0,0 +1,23 @@ +"use client"; +import { useEffect, useState } from "react"; +import { animate, motion, useMotionValue, useTransform } from "framer-motion"; + +export function Counter({ countNum }: { countNum: number }) { + const count = useMotionValue(0); + const rounded = useTransform(count, (latest:any) => Math.round(latest)); + const [displayValue, setDisplayValue] = useState(0); + + useEffect(() => { + const controls = animate(count, countNum, { + duration: 2, + ease: "easeOut", + onUpdate: (latest:any) => { + setDisplayValue(Math.round(latest)); + }, + }); + + return () => controls.stop(); + }, [countNum]); // countNum dependency qo'shildi + + return {displayValue}; +} \ No newline at end of file diff --git a/components/pages/home/blog.tsx b/components/pages/home/blog.tsx index f4773c4..7f5f395 100644 --- a/components/pages/home/blog.tsx +++ b/components/pages/home/blog.tsx @@ -2,6 +2,7 @@ import Image from "next/image"; import { ChevronRight } from "lucide-react"; import DotAnimatsiya from "@/components/dot/DotAnimatsiya"; import { useTranslations } from "next-intl"; +import ProductCard from "../products/productCard"; export function Blog() { const t = useTranslations(); @@ -40,22 +41,22 @@ export function Blog() {
- {t("home.blog.title")} + {t("products.banner.title")}

- {t("home.blog.subtitle")} + {t("products.ourproducts")}

{/* Blog Cards Grid */}
- {blogPosts.map((post) => ( + {/* {blogPosts.map((post) => (
- {/* Image Container */} +
- {/* Category Badge */} +
{post.category} @@ -71,7 +72,6 @@ export function Blog() {
- {/* Content */}

{post.title} @@ -91,7 +91,19 @@ export function Blog() {

- ))} + ))} */} + {Array(3) + .fill(null) + .map((_, index) => ( + + ))}
diff --git a/components/pages/home/statistics.tsx b/components/pages/home/statistics.tsx index 7e799d6..1d39d48 100644 --- a/components/pages/home/statistics.tsx +++ b/components/pages/home/statistics.tsx @@ -1,26 +1,27 @@ +import { Counter } from "@/components/Counter"; import { useTranslations } from "next-intl"; export function Statistics() { const t = useTranslations(); const stats = [ { - number: '25', - symbol: '+', + number: "25", + symbol: "+", label: t("home.statistics.experience"), }, { - number: '450', - symbol: '+', + number: "450", + symbol: "+", label: t("home.statistics.projectsCompleted"), }, { - number: '99', - symbol: '+', + number: "99", + symbol: "+", label: t("home.statistics.trainedSpecialists"), }, { - number: '93', - symbol: '%', + number: "93", + symbol: "%", label: t("home.statistics.trustedClients"), }, ]; @@ -30,13 +31,18 @@ export function Statistics() {
{stats.map((stat, index) => ( -
+
{/* Number and Symbol */}
- {stat.number} + + + + {stat.symbol} - {stat.symbol}
{/* Label */} diff --git a/components/pages/products/productBanner.tsx b/components/pages/products/productBanner.tsx index 5a2609b..8612f58 100644 --- a/components/pages/products/productBanner.tsx +++ b/components/pages/products/productBanner.tsx @@ -28,18 +28,18 @@ export function ProductBanner() {
- + {t("products.banner.title")}

{t("products.banner.subtitle")}

-
+
{t("products.banner.description")}
diff --git a/components/pages/products/productCard.tsx b/components/pages/products/productCard.tsx index 730d699..c12051a 100644 --- a/components/pages/products/productCard.tsx +++ b/components/pages/products/productCard.tsx @@ -36,7 +36,7 @@ export default function ProductCard({
{/* Image Container */} -
+
{title}=6'} @@ -1687,6 +1704,12 @@ packages: magic-string@0.30.21: resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==} + motion-dom@12.29.2: + resolution: {integrity: sha512-/k+NuycVV8pykxyiTCoFzIVLA95Nb1BFIVvfSu9L50/6K6qNeAYtkxXILy/LRutt7AzaYDc2myj0wkCVVYAPPA==} + + motion-utils@12.29.2: + resolution: {integrity: sha512-G3kc34H2cX2gI63RqU+cZq+zWRRPSsNIOjpdl9TN4AQwC4sgwYPl/Q/Obf/d53nOm569T0fYK+tcoSV50BWx8A==} + nanoid@3.3.11: resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==} engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} @@ -3251,6 +3274,15 @@ snapshots: fraction.js@5.3.4: {} + framer-motion@12.29.2(react-dom@19.2.0(react@19.2.0))(react@19.2.0): + dependencies: + motion-dom: 12.29.2 + motion-utils: 12.29.2 + tslib: 2.8.1 + optionalDependencies: + react: 19.2.0 + react-dom: 19.2.0(react@19.2.0) + get-nonce@1.0.1: {} graceful-fs@4.2.11: {} @@ -3342,6 +3374,12 @@ snapshots: dependencies: '@jridgewell/sourcemap-codec': 1.5.5 + motion-dom@12.29.2: + dependencies: + motion-utils: 12.29.2 + + motion-utils@12.29.2: {} + nanoid@3.3.11: {} negotiator@1.0.0: {}