new web sayt
This commit is contained in:
nabijonovdavronbek619@gmail.com
117
components/About.tsx
Normal file
117
components/About.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { CheckCircle, Award, Users, Zap } from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
export function About() {
|
||||
const t = useTranslations();
|
||||
|
||||
const features = [
|
||||
{ icon: Award, labelKey: "Experience", value: "10+ лет" },
|
||||
{ icon: Users, labelKey: "Experts", value: "50+" },
|
||||
{ icon: Zap, labelKey: "Reliability", value: "99.9%" },
|
||||
];
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: { staggerChildren: 0.2 },
|
||||
},
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { opacity: 0, y: 20 },
|
||||
visible: { opacity: 1, y: 0 },
|
||||
};
|
||||
|
||||
return (
|
||||
<section id="about" className="py-20 bg-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<h2 className="text-4xl font-bold text-gray-900 mb-4">
|
||||
{t("about.title")}
|
||||
</h2>
|
||||
<div className="w-20 h-1 bg-blue-600 mx-auto rounded-full" />
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
{/* Left - Content */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
>
|
||||
<p className="text-lg text-gray-700 leading-relaxed mb-8">
|
||||
{t("about.content")}
|
||||
</p>
|
||||
|
||||
<motion.div
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
className="space-y-4"
|
||||
>
|
||||
{[1, 2, 3].map((idx) => (
|
||||
<motion.div
|
||||
key={idx}
|
||||
variants={itemVariants}
|
||||
className="flex items-start gap-3"
|
||||
>
|
||||
<CheckCircle className="text-blue-600 shrink-0 mt-1" />
|
||||
<div>
|
||||
<h4 className="font-semibold text-gray-900">
|
||||
Benefit {idx}
|
||||
</h4>
|
||||
<p className="text-gray-600 text-sm">
|
||||
Premium quality products with lifetime support
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
{/* Right - Stats */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 50 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className="grid grid-cols-1 gap-6"
|
||||
>
|
||||
{features.map((feature, idx) => {
|
||||
const Icon = feature.icon;
|
||||
return (
|
||||
<motion.div
|
||||
key={idx}
|
||||
whileHover={{ scale: 1.05, y: -5 }}
|
||||
className="bg-linear-to-br from-blue-50 to-blue-100 rounded-lg p-6 shadow-md hover:shadow-lg transition-shadow"
|
||||
>
|
||||
<div className="flex items-center gap-4 mb-2">
|
||||
<Icon className="text-blue-600" size={32} />
|
||||
<h3 className="text-2xl font-bold text-gray-900">
|
||||
{feature.value}
|
||||
</h3>
|
||||
</div>
|
||||
<p className="text-gray-700 font-medium">
|
||||
{feature.labelKey}
|
||||
</p>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
242
components/ContactForm.tsx
Normal file
242
components/ContactForm.tsx
Normal file
@@ -0,0 +1,242 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { sendContactMessage } from "@/lib/api";
|
||||
import { Phone, MessageSquare, MapPin } from "lucide-react";
|
||||
|
||||
export function ContactForm() {
|
||||
const t = useTranslations();
|
||||
const pathname = usePathname();
|
||||
const locale = (pathname.split("/")[1] || "uz") as "uz" | "ru";
|
||||
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
phone: "",
|
||||
message: "",
|
||||
productSlug: "",
|
||||
});
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [message, setMessage] = useState<{
|
||||
type: "success" | "error";
|
||||
text: string;
|
||||
} | null>(null);
|
||||
|
||||
const handleChange = (
|
||||
e: React.ChangeEvent<
|
||||
HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
|
||||
>
|
||||
) => {
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
[e.target.name]: e.target.value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setMessage(null);
|
||||
|
||||
try {
|
||||
const result = await sendContactMessage({
|
||||
...formData,
|
||||
lang: locale,
|
||||
});
|
||||
|
||||
if (result.success) {
|
||||
setMessage({ type: "success", text: t("contact.success") });
|
||||
setFormData({ name: "", phone: "", message: "", productSlug: "" });
|
||||
} else {
|
||||
setMessage({ type: "error", text: t("contact.error") });
|
||||
}
|
||||
} catch {
|
||||
setMessage({ type: "error", text: t("contact.error") });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section
|
||||
id="contact"
|
||||
className="py-20 bg-linear-to-br from-blue-50 to-indigo-50"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<h2 className="text-4xl font-bold text-gray-900 mb-4">
|
||||
{t("contact.title")}
|
||||
</h2>
|
||||
<div className="w-20 h-1 bg-blue-600 mx-auto rounded-full" />
|
||||
</motion.div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
{/* Contact Info */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className="space-y-8"
|
||||
>
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-4">
|
||||
Get In Touch
|
||||
</h3>
|
||||
<p className="text-gray-600 mb-8">
|
||||
Reach out to us for inquiries, support, or partnership
|
||||
opportunities.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Contact Methods */}
|
||||
{[
|
||||
{
|
||||
icon: Phone,
|
||||
title: "Phone",
|
||||
value: "+998 (99) 123-45-67",
|
||||
},
|
||||
{
|
||||
icon: MessageSquare,
|
||||
title: "Telegram",
|
||||
value: "@firma_support",
|
||||
},
|
||||
{
|
||||
icon: MapPin,
|
||||
title: "Address",
|
||||
value: "Tashkent, Uzbekistan",
|
||||
},
|
||||
].map((item, idx) => {
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
<motion.div
|
||||
key={idx}
|
||||
whileHover={{ x: 5 }}
|
||||
className="flex gap-4"
|
||||
>
|
||||
<Icon className="text-blue-600 shrink-0" size={24} />
|
||||
<div>
|
||||
<h4 className="font-semibold text-gray-900">
|
||||
{item.title}
|
||||
</h4>
|
||||
<p className="text-gray-600">{item.value}</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
})}
|
||||
</motion.div>
|
||||
|
||||
{/* Form */}
|
||||
<motion.form
|
||||
initial={{ opacity: 0, x: 50 }}
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
onSubmit={handleSubmit}
|
||||
className="bg-white rounded-lg shadow-lg p-8"
|
||||
>
|
||||
{/* Name */}
|
||||
<div className="mb-6">
|
||||
<label className="block text-gray-700 font-medium mb-2">
|
||||
{t("contact.name")}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleChange}
|
||||
placeholder={t("contact.namePlaceholder")}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Phone */}
|
||||
<div className="mb-6">
|
||||
<label className="block text-gray-700 font-medium mb-2">
|
||||
{t("contact.phone")} *
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
placeholder={t("contact.phonePlaceholder")}
|
||||
required
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Message */}
|
||||
<div className="mb-6">
|
||||
<label className="block text-gray-700 font-medium mb-2">
|
||||
{t("contact.message")}
|
||||
</label>
|
||||
<textarea
|
||||
name="message"
|
||||
value={formData.message}
|
||||
onChange={handleChange}
|
||||
placeholder={t("contact.messagePlaceholder")}
|
||||
rows={4}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Product Select */}
|
||||
<div className="mb-6">
|
||||
<label className="block text-gray-700 font-medium mb-2">
|
||||
{t("contact.product")}
|
||||
</label>
|
||||
<select
|
||||
name="productSlug"
|
||||
value={formData.productSlug}
|
||||
onChange={handleChange}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="">Select a product...</option>
|
||||
<option value="schotchik-pump">Schotchik Pump</option>
|
||||
<option value="agregat-pump">Agregat Pump</option>
|
||||
<option value="ccl-20-24-pump">CCL 20/24 Pump</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Message Alert */}
|
||||
{message && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className={`mb-6 p-4 rounded-lg ${
|
||||
message.type === "success"
|
||||
? "bg-green-50 text-green-700 border border-green-200"
|
||||
: "bg-red-50 text-red-700 border border-red-200"
|
||||
}`}
|
||||
>
|
||||
{message.text}
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Submit Button */}
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full px-6 py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{loading ? "Sending..." : t("contact.send")}
|
||||
</motion.button>
|
||||
</motion.form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
119
components/FAQ.tsx
Normal file
119
components/FAQ.tsx
Normal file
@@ -0,0 +1,119 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { ChevronDown } from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
interface FaqItem {
|
||||
questionKey: string;
|
||||
answerKey: string;
|
||||
}
|
||||
|
||||
interface FaqProps {
|
||||
items?: FaqItem[];
|
||||
}
|
||||
|
||||
export function FAQ({ items }: FaqProps) {
|
||||
const t = useTranslations();
|
||||
const [openIndex, setOpenIndex] = useState<number | null>(0);
|
||||
|
||||
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;
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: { staggerChildren: 0.1 },
|
||||
},
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { opacity: 0, y: 10 },
|
||||
visible: { opacity: 1, y: 0 },
|
||||
};
|
||||
|
||||
return (
|
||||
<section id="faq" className="py-20 bg-white">
|
||||
<div className="max-w-4xl 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"
|
||||
>
|
||||
<h2 className="text-4xl font-bold text-gray-900 mb-4">
|
||||
{t("faq.title")}
|
||||
</h2>
|
||||
<div className="w-20 h-1 bg-blue-600 mx-auto rounded-full" />
|
||||
</motion.div>
|
||||
|
||||
{/* FAQ Items */}
|
||||
<motion.div
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
className="space-y-4"
|
||||
>
|
||||
{faqItems.map((item, idx) => (
|
||||
<motion.div key={idx} variants={itemVariants}>
|
||||
<motion.button
|
||||
onClick={() => setOpenIndex(openIndex === idx ? null : idx)}
|
||||
className="w-full bg-gray-50 hover:bg-gray-100 transition-colors rounded-lg p-6 text-left"
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="text-lg font-semibold text-gray-900 flex-1">
|
||||
{t(item.questionKey)}
|
||||
</h3>
|
||||
<motion.div
|
||||
animate={{ rotate: openIndex === idx ? 180 : 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="ml-4 shrink-0"
|
||||
>
|
||||
<ChevronDown className="text-blue-600" size={24} />
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.button>
|
||||
|
||||
<AnimatePresence>
|
||||
{openIndex === idx && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: "auto" }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="overflow-hidden"
|
||||
>
|
||||
<div className="bg-blue-50 p-6 rounded-b-lg border-t border-gray-200">
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
{t(item.answerKey)}
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
125
components/Footer.tsx
Normal file
125
components/Footer.tsx
Normal file
@@ -0,0 +1,125 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { Facebook, Linkedin, Send } from "lucide-react";
|
||||
|
||||
export function Footer() {
|
||||
const t = useTranslations();
|
||||
|
||||
const socialLinks = [
|
||||
{ icon: Facebook, href: "#", label: "Facebook" },
|
||||
{ icon: Linkedin, href: "#", label: "LinkedIn" },
|
||||
{ icon: Send, href: "#", label: "Telegram" },
|
||||
];
|
||||
|
||||
const containerVariants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: { staggerChildren: 0.1 },
|
||||
},
|
||||
};
|
||||
|
||||
const itemVariants = {
|
||||
hidden: { opacity: 0, y: 10 },
|
||||
visible: { opacity: 1, y: 0 },
|
||||
};
|
||||
|
||||
return (
|
||||
<footer className="bg-gray-900 text-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||
<motion.div
|
||||
variants={containerVariants}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={{ once: true }}
|
||||
className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12"
|
||||
>
|
||||
{/* Brand */}
|
||||
<motion.div variants={itemVariants}>
|
||||
<h3 className="text-2xl font-bold bg-linear-to-r from-blue-400 to-blue-600 bg-clip-text text-transparent mb-2">
|
||||
FIRMA
|
||||
</h3>
|
||||
<p className="text-gray-400 text-sm">
|
||||
Premium industrial pumps and equipment.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Quick Links */}
|
||||
<motion.div variants={itemVariants}>
|
||||
<h4 className="font-semibold mb-4">Quick Links</h4>
|
||||
<ul className="space-y-2 text-gray-400 text-sm">
|
||||
<li>
|
||||
<a href="#about" className="hover:text-white transition-colors">
|
||||
About Us
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#products"
|
||||
className="hover:text-white transition-colors"
|
||||
>
|
||||
Products
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#contact"
|
||||
className="hover:text-white transition-colors"
|
||||
>
|
||||
Contact
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</motion.div>
|
||||
|
||||
{/* Contact Info */}
|
||||
<motion.div variants={itemVariants}>
|
||||
<h4 className="font-semibold mb-4">Contact</h4>
|
||||
<ul className="space-y-2 text-gray-400 text-sm">
|
||||
<li>Email: info@firma.uz</li>
|
||||
<li>Phone: +998 (99) 123-45-67</li>
|
||||
<li>Telegram: @firma_support</li>
|
||||
</ul>
|
||||
</motion.div>
|
||||
|
||||
{/* Social */}
|
||||
<motion.div variants={itemVariants}>
|
||||
<h4 className="font-semibold mb-4">{t("footer.followUs")}</h4>
|
||||
<div className="flex gap-4">
|
||||
{socialLinks.map((link) => {
|
||||
const Icon = link.icon;
|
||||
return (
|
||||
<motion.a
|
||||
key={link.label}
|
||||
href={link.href}
|
||||
whileHover={{ scale: 1.2 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="p-2 bg-gray-800 rounded-lg hover:bg-blue-600 transition-colors"
|
||||
aria-label={link.label}
|
||||
>
|
||||
<Icon size={20} />
|
||||
</motion.a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="border-t border-gray-800 pt-8">
|
||||
<motion.p
|
||||
initial={{ opacity: 0 }}
|
||||
whileInView={{ opacity: 1 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
viewport={{ once: true }}
|
||||
className="text-center text-gray-400 text-sm"
|
||||
>
|
||||
{t("footer.copyright")}
|
||||
</motion.p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
117
components/Navbar.tsx
Normal file
117
components/Navbar.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { Menu, X } from "lucide-react";
|
||||
import { motion } from "framer-motion";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
interface NavLink {
|
||||
id: string;
|
||||
labelKey: string;
|
||||
href: string;
|
||||
}
|
||||
|
||||
interface NavbarProps {
|
||||
logoText?: string;
|
||||
}
|
||||
|
||||
export function Navbar({ logoText = "FIRMA" }: NavbarProps) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const t = useTranslations();
|
||||
const pathname = usePathname();
|
||||
|
||||
const navLinks: NavLink[] = [
|
||||
{ id: "about", labelKey: "nav.about", href: "#about" },
|
||||
{ id: "products", labelKey: "nav.products", href: "#products" },
|
||||
{ id: "faq", labelKey: "nav.faq", href: "#faq" },
|
||||
{ id: "contact", labelKey: "nav.contact", href: "#contact" },
|
||||
];
|
||||
|
||||
const locale = pathname.split("/")[1];
|
||||
const otherLocale = locale === "uz" ? "ru" : "uz";
|
||||
const otherPath = pathname.replace(`/${locale}`, `/${otherLocale}`);
|
||||
|
||||
const handleScroll = (href: string) => {
|
||||
if (href.startsWith("#")) {
|
||||
const element = document.querySelector(href);
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: "smooth" });
|
||||
}
|
||||
}
|
||||
setIsOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<nav className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-200">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex justify-between items-center h-16">
|
||||
{/* Logo */}
|
||||
<motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
|
||||
<Link
|
||||
href={`/${locale}`}
|
||||
className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-blue-800 bg-clip-text text-transparent"
|
||||
>
|
||||
{logoText}
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
{/* 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-gray-700 hover:text-blue-600 transition-colors"
|
||||
>
|
||||
{t(link.labelKey)}
|
||||
</motion.button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Language & Mobile Menu */}
|
||||
<div className="flex items-center gap-4">
|
||||
<motion.a
|
||||
href={otherPath}
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="px-3 py-1 bg-blue-600 text-white rounded-full text-sm font-medium hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
{otherLocale.toUpperCase()}
|
||||
</motion.a>
|
||||
|
||||
{/* Mobile Menu Button */}
|
||||
<button
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className="md:hidden p-2 rounded-lg hover:bg-gray-100"
|
||||
>
|
||||
{isOpen ? <X size={24} /> : <Menu size={24} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
{isOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
className="md:hidden pb-4 space-y-2"
|
||||
>
|
||||
{navLinks.map((link) => (
|
||||
<button
|
||||
key={link.id}
|
||||
onClick={() => handleScroll(link.href)}
|
||||
className="block w-full text-left px-4 py-2 text-gray-700 hover:bg-blue-50 rounded-lg transition-colors"
|
||||
>
|
||||
{t(link.labelKey)}
|
||||
</button>
|
||||
))}
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
65
components/ProductCard.tsx
Normal file
65
components/ProductCard.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
"use client";
|
||||
|
||||
import Image from "next/image";
|
||||
import { motion } from "framer-motion";
|
||||
import { ExternalLink } from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import type { Product } from "@/lib/products";
|
||||
|
||||
interface ProductCardProps {
|
||||
product: Product;
|
||||
onViewDetails: (slug: string) => void;
|
||||
}
|
||||
|
||||
export function ProductCard({ product, onViewDetails }: ProductCardProps) {
|
||||
const t = useTranslations();
|
||||
|
||||
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={t(product.nameKey)}
|
||||
fill
|
||||
className="object-cover 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">
|
||||
{t(product.nameKey)}
|
||||
</h3>
|
||||
<p className="text-gray-600 text-sm mb-4">
|
||||
{t(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-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
{t("products.viewDetails")}
|
||||
<ExternalLink size={16} />
|
||||
</motion.button>
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
134
components/ProductModal.tsx
Normal file
134
components/ProductModal.tsx
Normal file
@@ -0,0 +1,134 @@
|
||||
"use client";
|
||||
|
||||
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";
|
||||
|
||||
interface ProductModalProps {
|
||||
product: Product;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function ProductModal({ product, onClose }: ProductModalProps) {
|
||||
const t = useTranslations();
|
||||
|
||||
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">
|
||||
{t(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 lg:grid-cols-2 gap-8 mb-8">
|
||||
{/* 3D Viewer / Gallery */}
|
||||
<div>
|
||||
<ProductViewer
|
||||
modelUrl={product.model3D}
|
||||
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)}
|
||||
</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">
|
||||
<motion.button
|
||||
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
|
||||
</motion.button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
70
components/ProductViewer.tsx
Normal file
70
components/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-cover"
|
||||
/>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
83
components/ProductsGrid.tsx
Normal file
83
components/ProductsGrid.tsx
Normal file
@@ -0,0 +1,83 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { ProductCard } from "./ProductCard";
|
||||
import { ProductModal } from "./ProductModal";
|
||||
import { getAllProducts } from "@/lib/products";
|
||||
import type { Product } from "@/lib/products";
|
||||
|
||||
export function ProductsGrid() {
|
||||
const t = useTranslations();
|
||||
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="py-20 bg-gray-50">
|
||||
<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"
|
||||
>
|
||||
<h2 className="text-4xl font-bold text-gray-900 mb-4">
|
||||
{t("products.title")}
|
||||
</h2>
|
||||
<div className="w-20 h-1 bg-blue-600 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>
|
||||
</section>
|
||||
|
||||
{/* Product Modal */}
|
||||
{selectedProduct && (
|
||||
<ProductModal
|
||||
product={selectedProduct}
|
||||
onClose={() => setSelectedProduct(null)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
155
components/ShowCase.tsx
Normal file
155
components/ShowCase.tsx
Normal file
@@ -0,0 +1,155 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import Image from "next/image";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { useTranslations } from "next-intl";
|
||||
|
||||
interface ShowCaseProps {
|
||||
titleKey: string;
|
||||
subtitleKey?: string;
|
||||
ctaLabelKey: string;
|
||||
images: string[];
|
||||
}
|
||||
|
||||
export function ShowCase({
|
||||
titleKey,
|
||||
subtitleKey,
|
||||
ctaLabelKey,
|
||||
images,
|
||||
}: ShowCaseProps) {
|
||||
const t = useTranslations();
|
||||
const [currentImageIndex, setCurrentImageIndex] = useState(0);
|
||||
const [autoPlay, setAutoPlay] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
if (!autoPlay) return;
|
||||
|
||||
const timer = setInterval(() => {
|
||||
setCurrentImageIndex((prev) => (prev + 1) % images.length);
|
||||
}, 5000);
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, [autoPlay, images.length]);
|
||||
|
||||
const goToNext = () => {
|
||||
setCurrentImageIndex((prev) => (prev + 1) % images.length);
|
||||
setAutoPlay(false);
|
||||
};
|
||||
|
||||
const goToPrev = () => {
|
||||
setCurrentImageIndex((prev) => (prev - 1 + images.length) % images.length);
|
||||
setAutoPlay(false);
|
||||
};
|
||||
|
||||
const handleContactClick = () => {
|
||||
const contactElement = document.querySelector("#contact");
|
||||
if (contactElement) {
|
||||
contactElement.scrollIntoView({ behavior: "smooth" });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="min-h-screen bg-linear-to-br from-gray-50 via-blue-50 to-gray-50 pt-20 pb-20">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||
{/* Left Content */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<h1 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-6 leading-tight">
|
||||
{t(titleKey)}
|
||||
</h1>
|
||||
|
||||
{subtitleKey && (
|
||||
<p className="text-lg text-gray-600 mb-8 leading-relaxed">
|
||||
{t(subtitleKey)}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={handleContactClick}
|
||||
className="px-8 py-3 bg-linear-to-r from-blue-600 to-blue-700 text-white rounded-lg font-semibold hover:shadow-lg transition-shadow"
|
||||
>
|
||||
{t(ctaLabelKey)}
|
||||
</motion.button>
|
||||
</motion.div>
|
||||
|
||||
{/* Right - Image Carousel */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 50 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="relative"
|
||||
>
|
||||
<div className="relative aspect-square rounded-xl overflow-hidden shadow-2xl bg-gray-100">
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={currentImageIndex}
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="absolute inset-0"
|
||||
>
|
||||
<Image
|
||||
src={images[currentImageIndex]}
|
||||
alt={`Pump ${currentImageIndex + 1}`}
|
||||
fill
|
||||
className="object-cover"
|
||||
priority={currentImageIndex === 0}
|
||||
onMouseEnter={() => setAutoPlay(false)}
|
||||
onMouseLeave={() => setAutoPlay(true)}
|
||||
/>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Navigation Buttons */}
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={goToPrev}
|
||||
className="absolute left-4 top-1/2 -translate-y-1/2 z-10 bg-white/80 hover:bg-white p-2 rounded-full shadow-lg"
|
||||
>
|
||||
<ChevronLeft className="text-gray-800" />
|
||||
</motion.button>
|
||||
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.1 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
onClick={goToNext}
|
||||
className="absolute right-4 top-1/2 -translate-y-1/2 z-10 bg-white/80 hover:bg-white p-2 rounded-full shadow-lg"
|
||||
>
|
||||
<ChevronRight className="text-gray-800" />
|
||||
</motion.button>
|
||||
|
||||
{/* Indicators */}
|
||||
<div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 flex gap-2">
|
||||
{images.map((_, idx) => (
|
||||
<motion.button
|
||||
key={idx}
|
||||
onClick={() => {
|
||||
setCurrentImageIndex(idx);
|
||||
setAutoPlay(false);
|
||||
}}
|
||||
className={`h-2 rounded-full transition-all ${
|
||||
idx === currentImageIndex
|
||||
? "bg-white w-8"
|
||||
: "bg-white/50 w-2"
|
||||
}`}
|
||||
whileHover={{ scale: 1.2 }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user