pproducts

2025-12-10 11:43:10 +05:00
parent eec6004b25
commit cf26b778fc
11 changed files with 76 additions and 52 deletions
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -16,7 +16,6 @@ export default function Home() {
    <main>
      <ShowCase images={HERO_IMAGES} />
      <About />
-      feature.labelKey
      <ProductsGrid />
      <FAQ />
      <ContactForm />
--- a/app/product/page.tsx
+++ b/app/product/page.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+export default function Page() {
+  return (
+    <div>
+      
+    </div>
+  )
+}
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -85,7 +85,7 @@ export function Footer() {
            <h4 className="font-semibold mb-4">{t.footer.common.contact}</h4>
            <ul className="space-y-2 text-gray-400 text-sm">
              <li className="text-[15px]">{t.footer.common.email}: info@firma.uz</li>
-              <li className="text-[15px]">{t.footer.common.phone}: +998 (99) 123-45-67</li>
+              <li className="text-[15px]">{t.footer.common.phone}: +998 (99) 869-74-70</li>
              <li className="text-[15px]">{t.footer.common.telegram}: @firma_support</li>
            </ul>
          </motion.div>
--- a/components/ProductCard.tsx
+++ b/components/ProductCard.tsx
@@ -24,7 +24,7 @@ export function ProductCard({ product, onViewDetails }: ProductCardProps) {
          src={product.images[0]}
          alt={product.nameKey}
          fill
-          className="object-cover group-hover:scale-110 transition-transform duration-300"
+          className="object-contain group-hover:scale-110 transition-transform duration-300"
        />
        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-colors" />
      </div>
@@ -39,14 +39,14 @@ export function ProductCard({ product, onViewDetails }: ProductCardProps) {
        </p>

        {/* Specs Preview */}
-        <div className="mb-4 space-y-2">
+        {/* <div className="mb-4 space-y-2">
          {product.specs.slice(0, 2).map((spec, idx) => (
            <div key={idx} className="flex justify-between text-sm">
              <span className="text-gray-600">{spec.key}:</span>
              <span className="font-semibold text-gray-900">{spec.value}</span>
            </div>
          ))}
-        </div>
+        </div> */}

        {/* CTA Button */}
        <motion.button
@@ -55,7 +55,7 @@ export function ProductCard({ product, onViewDetails }: ProductCardProps) {
          onClick={() => onViewDetails(product.slug)}
          className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-primary/80 text-white rounded-lg font-medium hover:bg-primary transition-colors"
        >
-          Batafsil
+          {t.details}
          <ExternalLink size={16} />
        </motion.button>
      </div>
--- a/components/ProductModal.tsx
+++ b/components/ProductModal.tsx
@@ -2,10 +2,11 @@

 import { motion, AnimatePresence } from "framer-motion";
 import { X, Download } from "lucide-react";
-import { useTranslations } from "next-intl";
 import Image from "next/image";
 import { ProductViewer } from "./ProductViewer";
 import type { Product } from "@/lib/products";
+import { useLanguage } from "@/context/language-context";
+import Link from "next/link";

 interface ProductModalProps {
  product: Product;
@@ -13,7 +14,7 @@ interface ProductModalProps {
 }

 export function ProductModal({ product, onClose }: ProductModalProps) {
-  const t = useTranslations();
+  const { t } = useLanguage();

  return (
    <AnimatePresence>
@@ -34,7 +35,7 @@ export function ProductModal({ product, onClose }: ProductModalProps) {
          {/* Header */}
          <div className="sticky top-0 bg-white border-b border-gray-200 p-6 flex justify-between items-center">
            <h2 className="text-2xl font-bold text-gray-900">
-              {t(product.nameKey)}
+              {product.nameKey}
            </h2>
            <motion.button
              whileHover={{ scale: 1.1 }}
@@ -56,34 +57,14 @@ export function ProductModal({ product, onClose }: ProductModalProps) {
                  images={product.images}
                  autoRotate={true}
                />
-
-                {/* Image Thumbnails */}
-                {product.images.length > 1 && (
-                  <div className="mt-4 grid grid-cols-4 gap-2">
-                    {product.images.map((img, idx) => (
-                      <motion.div
-                        key={idx}
-                        whileHover={{ scale: 1.05 }}
-                        className="relative h-20 rounded cursor-pointer overflow-hidden bg-gray-100"
-                      >
-                        <Image
-                          src={img}
-                          alt={`${t(product.nameKey)} ${idx + 1}`}
-                          fill
-                          className="object-cover"
-                        />
-                      </motion.div>
-                    ))}
-                  </div>
-                )}
              </div>

              {/* Details */}
              <div>
                <p className="text-gray-600 mb-6">
                  {product.longDescriptionKey
-                    ? t(product.longDescriptionKey)
-                    : t(product.shortDescriptionKey)}
+                    ? product.longDescriptionKey
+                    : product.shortDescriptionKey}
                </p>

                {/* Specifications */}
@@ -108,21 +89,16 @@ export function ProductModal({ product, onClose }: ProductModalProps) {

                {/* CTA Buttons */}
                <div className="space-y-3">
+                  <Link href="#contact">
                    <motion.button
+                      onClick={onClose}
                      whileHover={{ scale: 1.05 }}
                      whileTap={{ scale: 0.95 }}
                      className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition-colors"
                    >
-                    {t("contact.send")}
-                  </motion.button>
-                  <motion.button
-                    whileHover={{ scale: 1.05 }}
-                    whileTap={{ scale: 0.95 }}
-                    className="w-full px-6 py-3 border border-blue-600 text-blue-600 rounded-lg font-semibold hover:bg-blue-50 transition-colors flex items-center justify-center gap-2"
-                  >
-                    <Download size={18} />
-                    Download Datasheet
+                      {t.contact.send}
                    </motion.button>
+                  </Link>
                </div>
              </div>
            </div>
--- a/components/ProductViewer.tsx
+++ b/components/ProductViewer.tsx
@@ -57,7 +57,7 @@ export function ProductViewer({
            src={primaryImage}
            alt="Product"
            fill
-            className="object-cover"
+            className="object-contain"
          />
        </motion.div>
      ) : (
--- a/components/ProductsGrid.tsx
+++ b/components/ProductsGrid.tsx
@@ -8,6 +8,8 @@ import type { Product } from "@/lib/products";
 import { ProductModal } from "./ProductModal";
 import Image from "next/image";
 import { useLanguage } from "@/context/language-context";
+import Link from "next/link";
+import { ChevronsRight } from "lucide-react";

 // hello everyone

@@ -81,6 +83,14 @@ export function ProductsGrid() {
            ))}
          </motion.div>
        </div>
+        <div className="mt-10 w-full flex items-center justify-center">
+          <Link
+            href="/product"
+            className="text-primary flex items-center gap-2 text-[18px] hover:bg-primary hover:text-white py-2 px-6 rounded-lg bg-[#ffffffb5] border mx-auto border-white"
+          >
+            {t.more} <ChevronsRight />
+          </Link>
+        </div>
      </section>

      {/* Product Modal */}
--- a/components/productsPage/products.tsx
+++ b/components/productsPage/products.tsx
@@ -0,0 +1,16 @@
+import { allProduct } from "@/lib/allProducts";
+import React, { useEffect, useState } from "react";
+
+export default function Products() {
+  const [allProducts, setAllProducts] = useState<any>(null);
+  useEffect(() => {
+    const all = allProduct();
+    all && Array.isArray(all) ? setAllProducts(all) : setAllProducts([]);
+    setAllProducts;
+  }, [allProducts]);
+  return (
+    <div>
+      <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-4"></div>
+    </div>
+  );
+}
--- a/lib/allProducts.ts
+++ b/lib/allProducts.ts
@@ -0,0 +1,10 @@
+import axios from "axios";
+
+export const allProduct = async () => {
+    try{
+        const res = await axios.get('')
+    }catch(err){
+        console.log("all product error: ",err);
+        
+    }
+};
--- a/lib/products.ts
+++ b/lib/products.ts
@@ -16,7 +16,7 @@ export const products: Product[] = [
    nameKey: "Schotchik Nasos",
    slug: "Yuqori sifatli schotchik nasos, benzin, dizel va kerosinni tashishda ishlatiladi.",
    shortDescriptionKey: "Xavfsiz neft mahsulotlarini tashish uchun",
-    images: ["/images/pump-1.jpg", "/images/pump-1-alt.jpg"],
+    images: ["/product/product.jpg", "/images/pump-1-alt.jpg"],
    specs: [
      { key: "Flow Rate", value: "100 L/min" },
      { key: "Pressure", value: "10 bar" },
@@ -29,7 +29,7 @@ export const products: Product[] = [
    nameKey: "Agregat Nasos",
    slug: "Katta volumli neft mahsulotlarini tashishda o'rnatilgan.",
    shortDescriptionKey: "Kuchli va ishonchli aggregat nasos",
-    images: ["/images/pump-2.jpg", "/images/pump-2-alt.jpg"],
+    images: ["/product/product1.jpg", "/images/pump-2-alt.jpg"],
    specs: [
      { key: "Flow Rate", value: "250 L/min" },
      { key: "Pressure", value: "15 bar" },
@@ -42,7 +42,7 @@ export const products: Product[] = [
    nameKey: "СЦЛ 20/24",
    slug:"Chuqurligi 20-24 metrda ishlaydigan professional nasos.",
    shortDescriptionKey: "Professional kalibrli nasos",
-    images: ["/images/pump-3.jpg", "/images/pump-3-alt.jpg"],
+    images: ["/product/product2.jpg", "/images/pump-3-alt.jpg"],
    specs: [
      { key: "Depth Rating", value: "20-24 m" },
      { key: "Flow Rate", value: "150 L/min" },
--- a/lib/translations.ts
+++ b/lib/translations.ts
@@ -90,6 +90,8 @@ export const translations = {
        description: "Chuqurligi 20-24 metrda ishlaydigan professional nasos.",
      },
    },
+    more: "Ko'proq ko'rish",
+    details: "Batafsil",
  },

  ru: {
@@ -187,5 +189,7 @@ export const translations = {
          "Профессиональный насос, работающий на глубине 20-24 метра.",
      },
    },
+    more: "Смотреть больше",
+    details: "Подробнее",
  },
 };