49 lines
3.1 KiB
TypeScript
49 lines
3.1 KiB
TypeScript
// components/Products.tsx
|
||
'use client';
|
||
import { motion } from 'framer-motion';
|
||
import { Server, Cloud, Shield, HardDrive, ArrowLeft } from 'lucide-react';
|
||
|
||
const products = [
|
||
{ id: 1, title: 'گواهی SSL', desc: 'امنیت وبسایت خود را با SSL تضمین کنید', price: '۱۹۹,۰۰۰', icon: Shield, color: 'bg-purple-500/20 text-purple-400' },
|
||
{ id: 2, title: 'سرور اختصاصی', desc: 'سرورهای فیزیکی قدرتمند با بالاترین عملکرد', price: '۶,۹۹۰,۰۰۰', icon: HardDrive, color: 'bg-teal-500/20 text-teal-400' },
|
||
{ id: 3, title: 'سرور مجازی (VPS)', desc: 'سرورهای مجازی قدرتمند با منابع اختصاصی', price: '۱,۹۹۰,۰۰۰', icon: Cloud, color: 'bg-blue-500/20 text-blue-400' },
|
||
{ id: 4, title: 'هاست وب', desc: 'هاست سریع و پایدار برای وبسایتهای شخصی و شرکتی', price: '۴۹۹,۰۰۰', icon: Server, color: 'bg-indigo-500/20 text-indigo-400' },
|
||
];
|
||
|
||
export default function Products() {
|
||
return (
|
||
<section className="py-20 px-8 max-w-7xl mx-auto border-t border-gray-200 dark:border-gray-800/50">
|
||
<div className="flex flex-col md:flex-row justify-between items-end mb-12">
|
||
<div className="text-right">
|
||
<p className="text-sm text-teal-500 mb-2 font-medium">محصولات ما</p>
|
||
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4">هر آنچه برای رشد<br/>پروژهی شما نیاز دارید</h2>
|
||
<p className="text-gray-500 dark:text-gray-400 max-w-md">از هاست اشتراکی تا سرورهای اختصاصی قدرتمند. همه چیز برای عملکرد بهتر وبسایت و اپلیکیشن شما</p>
|
||
</div>
|
||
<button className="mt-6 md:mt-0 flex items-center gap-2 text-gray-800 dark:text-white border border-gray-300 dark:border-gray-700 px-5 py-2.5 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition">
|
||
مشاهده همه محصولات <ArrowLeft size={16} />
|
||
</button>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||
{products.map((p, i) => (
|
||
<motion.div
|
||
key={p.id}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ delay: i * 0.1, duration: 0.5 }}
|
||
viewport={{ once: true }}
|
||
className="bg-gray-50 dark:bg-[#111827] border border-gray-200 dark:border-gray-800 rounded-2xl p-6 text-right hover:border-teal-500/50 transition-colors group cursor-pointer"
|
||
>
|
||
<div className={`w-12 h-12 rounded-xl flex items-center justify-center mb-6 ml-auto ${p.color}`}>
|
||
<p.icon size={24} />
|
||
</div>
|
||
<h3 className="text-lg font-bold text-gray-900 dark:text-white mb-2">{p.title}</h3>
|
||
<p className="text-sm text-gray-500 dark:text-gray-400 mb-6 h-10">{p.desc}</p>
|
||
<p className="text-sm text-gray-400">شروع از <span className="text-teal-500 font-bold mx-1">{p.price}</span> تومان</p>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|