last updates: add product page
This commit is contained in:
nabijonovdavronbek619@gmail.com
64
components/productSection/ProductCard.tsx
Normal file
64
components/productSection/ProductCard.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import { motion } from "framer-motion";
|
||||
import { ExternalLink } from "lucide-react";
|
||||
import type { Product } from "@/lib/products";
|
||||
import { useLanguage } from "@/context/language-context";
|
||||
|
||||
interface ProductCardProps {
|
||||
product: Product;
|
||||
onViewDetails: (slug: string) => void;
|
||||
}
|
||||
|
||||
export function ProductCard({ product, onViewDetails }: ProductCardProps) {
|
||||
const {t} = useLanguage();
|
||||
return (
|
||||
<motion.div
|
||||
whileHover={{ y: -8 }}
|
||||
className="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition-shadow"
|
||||
>
|
||||
{/* Image */}
|
||||
<div className="relative h-48 bg-gray-100 overflow-hidden group">
|
||||
<Image
|
||||
src={product.images[0]}
|
||||
alt={product.nameKey}
|
||||
fill
|
||||
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>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6">
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-2">
|
||||
{product.nameKey}
|
||||
</h3>
|
||||
<p className="text-gray-600 text-sm mb-4">
|
||||
{product.shortDescriptionKey}
|
||||
</p>
|
||||
|
||||
{/* Specs Preview */}
|
||||
{/* <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> */}
|
||||
|
||||
{/* CTA Button */}
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
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"
|
||||
>
|
||||
{t.details}
|
||||
<ExternalLink size={16} />
|
||||
</motion.button>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
114
components/productSection/ProductModal.tsx
Normal file
114
components/productSection/ProductModal.tsx
Normal file
@@ -0,0 +1,114 @@
|
||||
"use client";
|
||||
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { X } from "lucide-react";
|
||||
import { ProductViewer } from "./ProductViewer";
|
||||
import type { Product } from "@/lib/products";
|
||||
import { useLanguage } from "@/context/language-context";
|
||||
import Link from "next/link";
|
||||
import { useProductStore } from "@/lib/productZustand";
|
||||
|
||||
interface ProductModalProps {
|
||||
product: Product;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function ProductModal({ product, onClose }: ProductModalProps) {
|
||||
const { t } = useLanguage();
|
||||
const setProductName = useProductStore((state) => state.setProductName);
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
onClick={onClose}
|
||||
className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4"
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0.95, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
exit={{ scale: 0.95, opacity: 0 }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto"
|
||||
>
|
||||
{/* 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">
|
||||
{product.nameKey}
|
||||
</h2>
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={onClose}
|
||||
className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
>
|
||||
<X size={24} />
|
||||
</motion.button>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="p-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
|
||||
{/* 3D Viewer / Gallery */}
|
||||
<div>
|
||||
<ProductViewer
|
||||
modelUrl={product.model3D}
|
||||
images={product.images}
|
||||
autoRotate={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Details */}
|
||||
<div>
|
||||
<p className="text-gray-600 mb-6">
|
||||
{product.longDescriptionKey
|
||||
? product.longDescriptionKey
|
||||
: product.shortDescriptionKey}
|
||||
</p>
|
||||
|
||||
{/* Specifications */}
|
||||
<div className="mb-8">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">
|
||||
Technical Specifications
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
{product.specs.map((spec, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="flex justify-between py-2 border-b border-gray-100"
|
||||
>
|
||||
<span className="text-gray-600">{spec.key}:</span>
|
||||
<span className="font-semibold text-gray-900">
|
||||
{spec.value}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA Buttons */}
|
||||
<div className="space-y-3">
|
||||
<Link href="#contact">
|
||||
<motion.button
|
||||
onClick={() => {
|
||||
onClose();
|
||||
setProductName(product.nameKey);
|
||||
}}
|
||||
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>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
70
components/productSection/ProductViewer.tsx
Normal file
70
components/productSection/ProductViewer.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
"use client";
|
||||
|
||||
import { Suspense } from "react";
|
||||
import Image from "next/image";
|
||||
import { Canvas } from "@react-three/fiber";
|
||||
import { OrbitControls, useGLTF, Center, Environment } from "@react-three/drei";
|
||||
import { motion } from "framer-motion";
|
||||
|
||||
interface ProductViewerProps {
|
||||
modelUrl?: string;
|
||||
images?: string[];
|
||||
autoRotate?: boolean;
|
||||
}
|
||||
|
||||
// 3D Model Component
|
||||
function Model({ modelUrl }: { modelUrl: string }) {
|
||||
const { scene } = useGLTF(modelUrl);
|
||||
return (
|
||||
<Center>
|
||||
<primitive object={scene} />
|
||||
</Center>
|
||||
);
|
||||
}
|
||||
|
||||
function ModelCanvas({ modelUrl }: { modelUrl: string }) {
|
||||
return (
|
||||
<Canvas camera={{ position: [0, 0, 5], fov: 45 }}>
|
||||
<Suspense fallback={null}>
|
||||
<Model modelUrl={modelUrl} />
|
||||
<OrbitControls autoRotate={true} autoRotateSpeed={4} />
|
||||
<Environment preset="studio" />
|
||||
</Suspense>
|
||||
</Canvas>
|
||||
);
|
||||
}
|
||||
|
||||
export function ProductViewer({
|
||||
modelUrl,
|
||||
images = [],
|
||||
autoRotate = true,
|
||||
}: ProductViewerProps) {
|
||||
const [primaryImage] = images;
|
||||
|
||||
return (
|
||||
<div className="w-full h-full rounded-lg overflow-hidden bg-gray-100">
|
||||
{modelUrl ? (
|
||||
<div className="w-full h-full min-h-96">
|
||||
<ModelCanvas modelUrl={modelUrl} />
|
||||
</div>
|
||||
) : primaryImage ? (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
className="relative w-full h-full aspect-square"
|
||||
>
|
||||
<Image
|
||||
src={primaryImage}
|
||||
alt="Product"
|
||||
fill
|
||||
className="object-contain"
|
||||
/>
|
||||
</motion.div>
|
||||
) : (
|
||||
<div className="w-full h-96 flex items-center justify-center bg-gray-200">
|
||||
<span className="text-gray-500">No preview available</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
105
components/productSection/ProductsGrid.tsx
Normal file
105
components/productSection/ProductsGrid.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { getAllProducts } from "@/lib/products";
|
||||
import type { Product } from "@/lib/products";
|
||||
import Image from "next/image";
|
||||
import { useLanguage } from "@/context/language-context";
|
||||
import Link from "next/link";
|
||||
import { ChevronsRight } from "lucide-react";
|
||||
import { ProductCard } from "./ProductCard";
|
||||
import { ProductModal } from "./ProductModal";
|
||||
|
||||
// hello everyone
|
||||
|
||||
export function ProductsGrid() {
|
||||
const { t } = useLanguage();
|
||||
const products = getAllProducts();
|
||||
const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
|
||||
|
||||
const handleViewDetails = (slug: string) => {
|
||||
const product = products.find((p) => p.slug === slug);
|
||||
if (product) {
|
||||
setSelectedProduct(product);
|
||||
}
|
||||
};
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: { staggerChildren: 0.1 },
|
||||
},
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: { opacity: 1, y: 0 },
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<section id="products" className="relative py-20">
|
||||
<div className="absolute -z-40 top-0 left-0 h-full w-full">
|
||||
<Image
|
||||
src="/images/hero2.jpg"
|
||||
alt="hero image"
|
||||
fill
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="absolute w-full h-full top-0 left-0 bg-black opacity-25 -z-40" />
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
{/* Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center mb-16 bg-white/80 backdrop-blur-md rounded-xl overflow-hidden p-2 max-w-[300px] w-full mx-auto"
|
||||
>
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-2">
|
||||
{t.products.title}
|
||||
</h2>
|
||||
<div className="w-20 h-1 bg-primary mx-auto rounded-full" />
|
||||
</motion.div>
|
||||
|
||||
{/* Product Grid */}
|
||||
<motion.div
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
|
||||
>
|
||||
{products.map((product) => (
|
||||
<motion.div key={product.id} variants={itemVariants}>
|
||||
<ProductCard
|
||||
product={product}
|
||||
onViewDetails={handleViewDetails}
|
||||
/>
|
||||
</motion.div>
|
||||
))}
|
||||
</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 */}
|
||||
{selectedProduct && (
|
||||
<ProductModal
|
||||
product={selectedProduct}
|
||||
onClose={() => setSelectedProduct(null)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user