medstore / about.html
ali8765678's picture
صفه درباره ما هم طراحی کن
c3682bf verified
<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>درباره ما - MedStore فارسی</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1e40af',
secondary: '#0ea5e9'
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700&display=swap');
body {
font-family: 'Vazirmatn', sans-serif;
background-color: #f0f9ff;
}
.team-member {
transition: all 0.3s ease;
}
.team-member:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
}
.stat-card {
transition: all 0.3s ease;
}
.stat-card:hover {
background-color: #dbeafe;
}
</style>
</head>
<body class="bg-blue-50">
<!-- Header -->
<header class="bg-white shadow-md sticky top-0 z-50">
<div class="container mx-auto px-4 py-3">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center mb-4 md:mb-0">
<i class="fas fa-heartbeat text-primary text-3xl ml-3"></i>
<h1 class="text-2xl font-bold text-gray-800">MedStore فارسی</h1>
</div>
<nav class="flex flex-wrap justify-center gap-4 mb-4 md:mb-0">
<a href="index.html" class="text-gray-600 hover:text-primary font-medium">خانه</a>
<a href="products.html" class="text-gray-600 hover:text-primary font-medium">محصولات</a>
<a href="services.html" class="text-gray-600 hover:text-primary font-medium">خدمات</a>
<a href="about.html" class="text-primary hover:text-secondary font-medium">درباره ما</a>
<a href="#" class="text-gray-600 hover:text-primary font-medium">تماس با ما</a>
</nav>
<div class="flex items-center space-x-4">
<button class="text-gray-600 hover:text-primary">
<i class="fas fa-search text-xl"></i>
</button>
<button class="text-gray-600 hover:text-primary relative">
<i class="fas fa-shopping-cart text-xl"></i>
<span class="absolute -top-2 -left-2 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs">3</span>
</button>
<button class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-blue-800 transition">
ورود / ثبت نام
</button>
</div>
</div>
</div>
</header>
<!-- Breadcrumb -->
<section class="py-4 bg-white">
<div class="container mx-auto px-4">
<nav class="text-gray-600">
<a href="index.html" class="hover:text-primary">خانه</a>
<span class="mx-2">/</span>
<span class="text-primary">درباره ما</span>
</nav>
</div>
</section>
<!-- Hero Section -->
<section class="py-16 bg-gradient-to-r from-primary to-secondary">
<div class="container mx-auto px-4 text-center">
<h1 class="text-3xl md:text-4xl font-bold text-white mb-6">درباره MedStore فارسی</h1>
<p class="text-xl text-blue-100 max-w-3xl mx-auto">ما در MedStore فارسی با هدف ارائه بهترین تجهیزات پزشکی و خدمات تخصصی به مراکز درمانی و کاربران خانگی فعالیت می‌کنیم</p>
</div>
</section>
<!-- About Us Content -->
<section class="py-16">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row items-center gap-12 mb-16">
<div class="md:w-1/2">
<img src="http://static.photos/medical/640x360/5" alt="درباره ما" class="rounded-xl shadow-lg w-full">
</div>
<div class="md:w-1/2">
<h2 class="text-3xl font-bold text-gray-800 mb-6">داستان ما</h2>
<p class="text-gray-600 mb-6">MedStore فارسی در سال 1398 با هدف ارائه تجهیزات پزشکی با کیفیت بالا و خدمات تخصصی به مراکز درمانی و کاربران خانگی تأسیس شد. تیم ما از ابتدا با تعهد به کیفیت، اعتماد و نوآوری در حوزه سلامت کشور فعالیت کرده است.</p>
<p class="text-gray-600 mb-6">ما با همکاری مستقیم با برندهای معتبر جهانی و تولیدکنندگان داخلی، تجهیزات پزشکی با استانداردهای بین‌المللی را در اختیار مشتریان خود قرار می‌دهیم.</p>
<p class="text-gray-600">ماموریت ما ارتقای سطح سلامت جامعه از طریق ارائه تجهیزات پزشکی با کیفیت و خدمات تخصصی است.</p>
</div>
</div>
<div class="flex flex-col md:flex-row-reverse items-center gap-12">
<div class="md:w-1/2">
<img src="http://static.photos/office/640x360/6" alt="ماموریت ما" class="rounded-xl shadow-lg w-full">
</div>
<div class="md:w-1/2">
<h2 class="text-3xl font-bold text-gray-800 mb-6">ماموریت و چشم انداز</h2>
<p class="text-gray-600 mb-6">ماموریت ما ارتقای سطح سلامت جامعه از طریق ارائه تجهیزات پزشکی با کیفیت و خدمات تخصصی است. ما به دنبال ایجاد یک پلتفرم جامع برای دسترسی آسان به تجهیزات پزشکی با کیفیت هستیم.</p>
<p class="text-gray-600 mb-6">چشم انداز ما تبدیل شدن به یکی از معتبرترین و بزرگترین فروشگاه‌های تجهیزات پزشکی در منطقه است که با استفاده از فناوری‌های روز و خدمات نوآورانه، تجربه خرید استثنایی را برای مشتریان خود فراهم می‌کند.</p>
<ul class="text-gray-600 space-y-3">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 ml-2"></i>
<span>ارائه محصولات با کیفیت و استاندارد بین‌المللی</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 ml-2"></i>
<span>ارائه خدمات پس از فروش تخصصی و معتبر</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 ml-2"></i>
<span>ایجاد دسترسی آسان به تجهیزات پزشکی برای همه</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">آمار و دستاوردهای ما</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="bg-blue-50 rounded-xl p-6 text-center stat-card">
<div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-users text-white text-2xl"></i>
</div>
<h3 class="text-3xl font-bold text-primary mb-2">15,000+</h3>
<p class="text-gray-600">مشتری راضی</p>
</div>
<div class="bg-blue-50 rounded-xl p-6 text-center stat-card">
<div class="w-16 h-16 bg-secondary rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-boxes text-white text-2xl"></i>
</div>
<h3 class="text-3xl font-bold text-primary mb-2">2,500+</h3>
<p class="text-gray-600">محصول متنوع</p>
</div>
<div class="bg-blue-50 rounded-xl p-6 text-center stat-card">
<div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-city text-white text-2xl"></i>
</div>
<h3 class="text-3xl font-bold text-primary mb-2">50+</h3>
<p class="text-gray-600">شهر فعال</p>
</div>
<div class="bg-blue-50 rounded-xl p-6 text-center stat-card">
<div class="w-16 h-16 bg-secondary rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-award text-white text-2xl"></i>
</div>
<h3 class="text-3xl font-bold text-primary mb-2">15</h3>
<p class="text-gray-600">سال تجربه</p>
</div>
</div>
</div>
</section>
<!-- Team Section -->
<section class="py-16 bg-blue-50">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">تیم مدیریت</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Team Member 1 -->
<div class="bg-white rounded-xl shadow-md p-6 text-center team-member">
<img src="http://static.photos/people/320x240/1" alt="مدیرعامل" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover">
<h3 class="text-xl font-bold text-gray-800 mb-1">محمد رضایی</h3>
<p class="text-primary mb-3">مدیرعامل</p>
<p class="text-gray-600 text-sm mb-4">مهندسی صنایع با 15 سال سابقه در حوزه سلامت</p>
<div class="flex justify-center space-x-3">
<a href="#" class="text-gray-400 hover:text-primary"><i class="fab fa-linkedin-in"></i></a>
<a href="#" class="text-gray-400 hover:text-primary"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-primary"><i class="fab fa-instagram"></i></a>
</div>
</div>
<!-- Team Member 2 -->
<div class="bg-white rounded-xl shadow-md p-6 text-center team-member">
<img src="http://static.photos/people/320x240/2" alt="مدیر فروش" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover">
<h3 class="text-xl font-bold text-gray-800 mb-1">فاطمه احمدی</h3>
<p class="text-primary mb-3">مدیر فروش</p>
<p class="text-gray-600 text-sm mb-4">کارشناس بازاریابی با 10 سال سابقه در صنعت پزشکی</p>
<div class="flex justify-center space-x-3">
<a href="#" class="text-gray-400 hover:text-primary"><i class="fab fa-linkedin-in"></i></a>
<a href="#" class="text-gray-400 hover:text-primary"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-primary"><i class="fab fa-instagram"></i></a>
</div>
</div>
<!-- Team Member 3 -->
<div class="bg-white rounded-xl shadow-md p-6 text-center team-member">
<img src="http://static.photos/people/320x240/3" alt="مدیر فنی" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover">
<h3 class="text-xl font-bold text-gray-800 mb-1">علی مرادی</h3>
<p class="text-primary mb-3">مدیر فنی</p>
<p class="text-gray-600 text-sm mb-4">کارشناس تجهیزات پزشکی با 12 سال سابقه تخصصی</p>
<div class="flex justify-center space-x-3">
<a href="#" class="text-gray-400 hover:text-primary"><i class="fab fa-linkedin-in"></i></a>
<a href="#" class="text-gray-400 hover:text-primary"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-primary"><i class="fab fa-instagram"></i></a>
</div>
</div>
<!-- Team Member 4 -->
<div class="bg-white rounded-xl shadow-md p-6 text-center team-member">
<img src="http://static.photos/people/320x240/4" alt="مدیر پشتیبانی" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover">
<h3 class="text-xl font-bold text-gray-800 mb-1">زهرا نوری</h3>
<p class="text-primary mb-3">مدیر پشتیبانی</p>
<p class="text-gray-600 text-sm mb-4">کارشناس خدمات مشتریان با 8 سال سابقه در حوزه پزشکی</p>
<div class="flex justify-center space-x-3">
<a href="#" class="text-gray-400 hover:text-primary"><i class="fab fa-linkedin-in"></i></a>
<a href="#" class="text-gray-400 hover:text-primary"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-primary"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</div>
</section>
<!-- Values Section -->
<section class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center text-gray-800 mb-12">ارزش‌های ما</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="text-center p-8 bg-blue-50 rounded-xl">
<div class="w-20 h-20 bg-primary rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fas fa-heart text-white text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-4">اعتماد و صداقت</h3>
<p class="text-gray-600">ما در تمامی تعاملات خود با مشتریان، اعتماد و صداقت را در اولویت قرار می‌دهیم و همواره وفادار به تعهدات خود هستیم.</p>
</div>
<div class="text-center p-8 bg-blue-50 rounded-xl">
<div class="w-20 h-20 bg-secondary rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fas fa-medal text-white text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-4">کیفیت و استاندارد</h3>
<p class="text-gray-600">ارائه محصولات و خدمات با بالاترین کیفیت و استانداردهای بین‌المللی برای ما امری ضروری و غیرقابل چشم‌پوشی است.</p>
</div>
<div class="text-center p-8 bg-blue-50 rounded-xl">
<div class="w-20 h-20 bg-primary rounded-full flex items-center justify-center mx-auto mb-6">
<i class="fas fa-lightbulb text-white text-2xl"></i>
</div>
<h3 class="text-xl font-bold text-gray-800 mb-4">نوآوری و بهبود مستمر</h3>
<p class="text-gray-600">ما همواره در پی نوآوری و بهبود مستمر در فرآیندهای خود هستیم تا بتوانیم تجربه بهتری را برای مشتریان خود فراهم کنیم.</p>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-16 bg-gradient-to-r from-primary to-secondary">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl md:text-4xl font-bold text-white mb-6">با ما تماس بگیرید</h2>
<p class="text-xl text-blue-100 mb-8 max-w-2xl mx-auto">سوالی دارید یا نیاز به مشاوره تخصصی دارید؟ تیم ما آماده کمک به شماست</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<button class="bg-white text-primary font-bold py-3 px-8 rounded-lg hover:bg-gray-100 transition">
تماس با ما
</button>
<button class="border-2 border-white text-white font-bold py-3 px-8 rounded-lg hover:bg-white hover:text-primary transition">
اطلاعات بیشتر
</button>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-800 text-white pt-16 pb-8 mt-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
<div>
<div class="flex items-center mb-6">
<i class="fas fa-heartbeat text-secondary text-2xl ml-3"></i>
<h3 class="text-2xl font-bold">MedStore فارسی</h3>
</div>
<p class="text-gray-400 mb-6">فروشگاه تخصصی تجهیزات و لوازم پزشکی با کیفیت بالا و خدمات پس از فروش معتبر</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-telegram"></i></a>
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-whatsapp"></i></a>
</div>
</div>
<div>
<h4 class="text-lg font-bold mb-6">دسته بندی محصولات</h4>
<ul class="space-y-3">
<li><a href="#" class="text-gray-400 hover:text-white">تجهیزات تشخیصی</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">تجهیزات بستری</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">لوازم مصرفی</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">تجهیزات آزمایشگاهی</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">تجهیزات جراحی</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-6">خدمات مشتریان</h4>
<ul class="space-y-3">
<li><a href="#" class="text-gray-400 hover:text-white">پرسش های متداول</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">شرایط بازگشت کالا</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">حریم خصوصی</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">شرایط و قوانین</a></li>
<li><a href="#" class="text-gray-400 hover:text-white">پشتیبانی آنلاین</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-6">اطلاعات تماس</h4>
<ul class="space-y-3 text-gray-400">
<li class="flex items-start">
<i class="fas fa-map-marker-alt mt-1 ml-3"></i>
<span>تهران، خیابان ولیعصر، پلاک 123</span>
</li>
<li class="flex items-center">
<i class="fas fa-phone ml-3"></i>
<span>021-12345678</span>
</li>
<li class="flex items-center">
<i class="fas fa-envelope ml-3"></i>
<span>info@medstore.ir</span>
</li>
<li class="flex items-center">
<i class="fas fa-clock ml-3"></i>
<span>شنبه تا چهارشنبه: 8 الی 17</span>
</li>
</ul>
</div>
</div>
<div class="border-t border-gray-700 pt-8 text-center text-gray-400">
<p>&copy; 2023 MedStore فارسی. تمامی حقوق محفوظ است.</p>
</div>
</div>
</footer>
</body>
</html>