faq sectin connected to backedn

app/detail/[slug]/page.tsx

@@ -1,38 +0,0 @@
-import { ContactForm } from "@/components/ContactForm";
-import DetailInfo from "@/components/detailPage/detailInfo";
-import { getAllProducts } from "@/lib/api";
-import { Product } from "@/lib/products";
-import { generateSlug } from "@/lib/slug";
-import { notFound } from "next/navigation";
-
-export async function generateStaticParams() {
-  const products = await getAllProducts();
-
-  return products.map((product) => ({
-    slug: generateSlug(product.name_uz),
-  }));
-}
-
-async function getProduct(slug: string): Promise<Product | undefined> {
-  const products = await getAllProducts();
-  console.log("slug: ", slug);
-
-  return products.find((product) => generateSlug(product.name_uz) === slug);
-}
-
-export default async function Page({ params }: { params: { slug: string } }) {
-  const product = await getProduct(params.slug);
-
-  if (!product) {
-    notFound();
-  }
-
-  return (
-    <div>
-      <DetailInfo product={product} />
-      <section id="contact">
-        <ContactForm />
-      </section>
-    </div>
-  );
-}

app/layout.tsx

@@ -33,6 +33,14 @@ export const metadata: Metadata = {
     siteName: "Texnik Uskunalar",
     locale: "uz_UZ",
     type: "website",
+    images: [
+      {
+        url: "/logo.jpg",
+        width: 1200,
+        height: 630,
+        alt: "Texnik Uskunalar Logo",
+      },
+    ],
   },
 };
 

app/sitemap.ts

@@ -15,7 +15,7 @@ export default function sitemap(): MetadataRoute.Sitemap {
     },
   ];
 
-  // Product detail pages - based on actual product slugs from API
+  // Product detail pages - based on actual product slugs from API github
   const productSlugs = [
     "ppv-100-1-6-su-6-0-60-0-5foiz-mexanik-suyuqlik-hisoblagichi",
     "ppo-40-0-6-su-suyuqlik-hisoblagichi",
@@ -33,7 +33,7 @@ export default function sitemap(): MetadataRoute.Sitemap {
   ];
 
   const productPages = productSlugs.map((slug) => ({
-    url: `${baseUrl}/detail/${slug}`,
+    url: `${baseUrl}/product/${slug}`,
     lastModified: new Date(),
     changeFrequency: "monthly" as const,
     priority: 0.8,

components/FAQ.tsx

@@ -1,39 +1,55 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { ChevronDown } from "lucide-react";
 import { useLanguage } from "@/context/language-context";
+import { getAllFaq } from "@/lib/api";
 
 interface FaqItem {
   questionKey: string;
   answerKey: string;
 }
 
-interface FaqProps {
-  items?: FaqItem[];
+export interface FaqBackendItem {
+  id: number;
+  question_ru: string;
+  question_uz: string;
+  answer_ru: string;
+  answer_uz: string;
 }
 
-export function FAQ({ items }: FaqProps) {
-  const {t} = useLanguage();
+const defaultItems: FaqItem[] = [
+  {
+    questionKey: "faq.items.0.question",
+    answerKey: "faq.items.0.answer",
+  },
+  {
+    questionKey: "faq.items.1.question",
+    answerKey: "faq.items.1.answer",
+  },
+  {
+    questionKey: "faq.items.2.question",
+    answerKey: "faq.items.2.answer",
+  },
+];
+
+export function FAQ() {
+  const { t, language } = useLanguage();
   const [openIndex, setOpenIndex] = useState<number | null>(0);
+  const [faqItems, setFaqItems] = useState<FaqItem[]>([]);
 
-  const defaultItems: FaqItem[] = [
-    {
-      questionKey: "faq.items.0.question",
-      answerKey: "faq.items.0.answer",
-    },
-    {
-      questionKey: "faq.items.1.question",
-      answerKey: "faq.items.1.answer",
-    },
-    {
-      questionKey: "faq.items.2.question",
-      answerKey: "faq.items.2.answer",
-    },
-  ];
-
-  const faqItems = items || defaultItems;
+  useEffect(() => {
+    async function fetchFaq() {
+      const allFaq = await getAllFaq();
+      const faqItems: FaqItem[] = allFaq.map((item) => ({
+        questionKey: language === "uz" ? item.question_uz : item.question_ru,
+        answerKey: language === "uz" ? item.answer_uz : item.answer_ru,
+      }));
+      faqItems.length === 0 ? setFaqItems(defaultItems) : setFaqItems(faqItems);
+    }
+    fetchFaq();
+  }, [language]);
 
   const containerVariants = {
     hidden: { opacity: 0 },
@@ -81,7 +97,7 @@ export function FAQ({ items }: FaqProps) {
               >
                 <div className="flex items-center justify-between">
                   <h3 className="text-lg font-semibold text-gray-900 flex-1">
-                    {t.faq.items[idx].question}
+                    {item.questionKey}
                   </h3>
                   <motion.div
                     animate={{ rotate: openIndex === idx ? 180 : 0 }}
@@ -104,7 +120,7 @@ export function FAQ({ items }: FaqProps) {
                   >
                     <div className="bg-primary/20 p-6 rounded-b-lg border-t border-gray-200">
                       <p className="text-gray-700 leading-relaxed">
-                        {t.faq.items[idx].answer}
+                        {item.answerKey}
                       </p>
                     </div>
                   </motion.div>

components/Navbar.tsx

@@ -26,7 +26,7 @@ export function Navbar({ logoText = "FIRMA" }: NavbarProps) {
 
   const navLinks: NavLink[] = [
     { id: "about", labelKey: t.nav.about, href: "#about" },
-    { id: "products", labelKey: t.nav.products, href: "#products" },
+    { id: "products", labelKey: t.nav.products, href: "/product" },
     { id: "faq", labelKey: t.nav.faq, href: "#faq" },
     { id: "contact", labelKey: t.nav.contact, href: "#contact" },
   ];
@@ -64,16 +64,26 @@ export function Navbar({ logoText = "FIRMA" }: NavbarProps) {
 
           {/* Desktop Menu */}
           <div className="hidden md:flex items-center gap-8">
-            {navLinks.map((link) => (
-              <motion.button
-                key={link.id}
-                whileHover={{ color: "#2563eb" }}
-                onClick={() => handleScroll(link.href)}
-                className="text-[#468965] hover:text-[#468965] transition-colors hover:cursor-pointer"
-              >
-                {link.labelKey}
-              </motion.button>
-            ))}
+            {navLinks.map((link) =>
+              link.id === "products" ? (
+                <Link
+                  key={link.id}
+                  href={link.href}
+                  className="text-[#468965] hover:text-[#468965] transition-colors hover:cursor-pointer"
+                >
+                  {link.labelKey}
+                </Link>
+              ) : (
+                <motion.button
+                  key={link.id}
+                  whileHover={{ color: "#2563eb" }}
+                  onClick={() => handleScroll(link.href)}
+                  className="text-[#468965] hover:text-[#468965] transition-colors hover:cursor-pointer"
+                >
+                  {link.labelKey}
+                </motion.button>
+              )
+            )}
           </div>
 
           {/* Language & Mobile Menu */}

lib/api.ts

@@ -1,3 +1,4 @@
+import { FaqBackendItem } from "@/components/FAQ";
 import { Product } from "@/lib/products";
 
 export async function getAllProducts(): Promise<Product[]> {
@@ -12,3 +13,14 @@ export async function getAllProducts(): Promise<Product[]> {
 
   return res.json();
 }
+
+export async function getAllFaq(): Promise<FaqBackendItem[]> {
+  const res = await fetch("https://admin.promtechno.uz/api/faqs/");
+
+  if (!res.ok) {
+    console.log("Failed to fetch faqs");
+    return [];
+  }
+
+  return res.json();
+}