base product single page

2026-07-21 11:25:41 +03:30
parent 6f22885ae9
commit ec39e4448d
9 changed files with 444 additions and 0 deletions
@@ -0,0 +1,37 @@
+"use client";
+
+import ContactCtaSection from "@/app/home/components/ContactCtaSection";
+import { useState, type FC } from "react";
+import { PRODUCT_GALLERY_IMAGES, PRODUCT_TITLE, QUANTITY_TIERS, type QuantityTier } from "../constants";
+import ProductBreadcrumb from "./ProductBreadcrumb";
+import ProductGallery from "./ProductGallery";
+import ProductOrderActions from "./ProductOrderActions";
+import ProductPurchaseOptions from "./ProductPurchaseOptions";
+import ProductRelated from "./ProductRelated";
+import ProductTabs from "./ProductTabs";
+
+const ProductDetail: FC = () => {
+  const [selectedTier, setSelectedTier] = useState<QuantityTier>(QUANTITY_TIERS[0]);
+
+  return (
+    <>
+      <ProductBreadcrumb />
+
+      <div className="px-4 py-6 sm:px-8 sm:py-8 lg:px-30">
+        <div className="flex flex-col items-start gap-5 lg:flex-row lg:gap-6">
+          <ProductGallery images={PRODUCT_GALLERY_IMAGES} alt={PRODUCT_TITLE} />
+          <div className="flex w-full min-w-0 flex-1 flex-col items-end">
+            <ProductPurchaseOptions selectedTier={selectedTier} onSelectTier={setSelectedTier} />
+            <ProductOrderActions selectedTier={selectedTier} />
+          </div>
+        </div>
+      </div>
+
+      <ProductTabs />
+      <ProductRelated />
+      <ContactCtaSection />
+    </>
+  );
+};
+
+export default ProductDetail;