Amirmahdi/aramejan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: better fotter

Browse Source
This commit is contained in:
Amirmahdi
2025-11-07 15:43:46 +03:30
parent 81a10f6269
commit 3ceec02356
16 changed files with 292 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/DownloadSection.jsx
+23 -19
View File
@@ -3,40 +3,43 @@ import { Download, Globe, PlayCircle } from 'lucide-react';
function DownloadSection() {
const downloadOptions = [
{
icon: Download,
icon: './images/cafe.png',
title: "کافه بازار",
description: "دانلود برای اندروید",
badge: "پرطرفدار",
gradient: "from-primary-500 to-primary-600",
// badge: "پرطرفدار",
gradient: "from-primary-500/10 to-primary-600/10",
border: "border-primary-500/20",
animation: "animate-slideInLeft delay-100"
},
{
icon: PlayCircle,
icon: './images/myket.png',
title: "مایکت",
description: "دانلود برای اندروید",
gradient: "from-primary-500 to-primary-600",
gradient: "from-primary-500/10 to-primary-600/10",
border: "border-primary-500/20",
animation: "animate-fadeInUp delay-200"
},
{
icon: Globe,
icon:'./images/appstore.png',
title: "وب سایت",
description: "نسخه وب برای تمام دستگاه‌ها",
badge: "جدید",
gradient: "from-primary-500 to-primary-600",
animation: "animate-slideInRight delay-300"
badge: "",
gradient: "from-primary-500/10 to-primary-600/10",
animation: "animate-slideInRight delay-300",
border: "border-primary-500/20",
}
];
return (
<div className="relative bg-white rounded-3xl shadow-2xl p-12 mb-20 animate-fadeInUp overflow-hidden">
<div className="relative rounded-3xl p-1 mb-10 animate-fadeInUp overflow-hidden">
{/* Background pattern */}
<div className="absolute inset-0 opacity-5">
<div className="absolute inset-0 bg-gradient-to-r from-primary-500 to-primary-600"></div>
<div className="absolute inset-0 opacity-4">
<div className="absolute inset-0"></div>
</div>
<div className="relative">
<div className="text-center mb-12">
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4 mt-8">
همین حالا <span className="text-primary-500">شروع کنید</span>
</h2>
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
@@ -44,27 +47,28 @@ function DownloadSection() {
</p>
</div>
<div className="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto">
<div className="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto ">
{downloadOptions.map((option, index) => (
<a
key={index}
href="#"
className={`relative flex flex-col items-center justify-center p-8 bg-gradient-to-br ${option.gradient} rounded-3xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 text-white group ${option.animation} overflow-hidden`}
className={`relative flex flex-col items-center justify-center p-8 bg-gradient-to-br ${option.gradient} rounded-3xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 group ${option.animation} overflow-hidden border ${option.border}`}
>
{/* Shine effect */}
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></div>
{option.badge && (
<div className="absolute -top-2 -right-2 bg-white text-primary-500 px-3 py-1 rounded-full text-xs font-bold shadow-lg">
<div className="absolute -top-0 right-0 bg-primary-200 px-2 py-2 rounded text-xs font-bold">
{option.badge}
</div>
)}
<div className="bg-white/20 p-4 rounded-2xl mb-4 group-hover:scale-110 transition-transform duration-300">
<option.icon className="w-8 h-8" />
<div className="bg-white p-4 rounded-2xl mb-4 group-hover:scale-110 transition-transform duration-300">
<img src={option.icon} alt="Download" className="w-20 h-20 border border-transparent rounded-xl " />
{/* <option.icon className="w-8 h-8" /> */}
</div>
<h3 className="text-xl font-bold mb-2">{option.title}</h3>
<p className="text-white/90 text-sm">{option.description}</p>
<p className="text-sm">{option.description}</p>
</a>
))}
</div>