632 lines
33 KiB
HTML
632 lines
33 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fa" dir="rtl">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>گروه بازرگانی قاسمپور | Ghasempour Trading Group</title>
|
||
|
||
<!-- External CDN references removed. This file is kept only as a local visual reference. -->
|
||
|
||
<style>
|
||
@font-face {
|
||
font-family: 'Modam';
|
||
src: url('modam.woff2') format('woff2'), url('modam.woff') format('woff');
|
||
font-weight: normal;
|
||
font-style: normal;
|
||
}
|
||
|
||
:root {
|
||
--brand-red: #A51C24;
|
||
--dark-bg: #0a0a0a;
|
||
--card-bg: #111111;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Modam', sans-serif;
|
||
background-color: var(--dark-bg);
|
||
color: #fff;
|
||
line-height: 1.6;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.no-italic { font-style: normal !important; }
|
||
|
||
/* Mega Menu Styles */
|
||
.nav-item-dropdown { position: relative; padding: 20px 0; }
|
||
.nav-scrolled {
|
||
background: rgba(5, 5, 5, 0.98) !important;
|
||
backdrop-filter: blur(30px) !important;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
|
||
padding-top: 10px !important;
|
||
padding-bottom: 10px !important;
|
||
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
|
||
}
|
||
.mega-menu {
|
||
position: absolute;
|
||
top: 100%;
|
||
right: -50px;
|
||
width: 650px;
|
||
background: #0d0d0d !important; /* پسزمینه کاملاً تیره */
|
||
backdrop-filter: blur(40px) !important;
|
||
border: 1px solid rgba(255, 255, 255, 0.15) !important;
|
||
border-radius: 24px;
|
||
padding: 35px;
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 15px;
|
||
opacity: 0;
|
||
visibility: hidden;
|
||
transform: translateY(20px);
|
||
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
|
||
z-index: 1000;
|
||
box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8);
|
||
}
|
||
.nav-item-dropdown:hover .mega-menu {
|
||
opacity: 1;
|
||
visibility: visible;
|
||
transform: translateY(0);
|
||
}
|
||
.mega-menu-item {
|
||
padding: 10px;
|
||
border-radius: 10px;
|
||
transition: 0.3s;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
.mega-menu-item:hover {
|
||
background: rgba(165, 28, 36, 0.15);
|
||
color: var(--brand-red);
|
||
}
|
||
|
||
.brand-content {
|
||
padding: 28px !important; /* افزایش فاصله از لبهها */
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-end;
|
||
width: 100%;
|
||
}
|
||
|
||
.brand-card {
|
||
background: var(--card-bg);
|
||
border-radius: 20px;
|
||
overflow: hidden;
|
||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||
transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
|
||
flex: 0 0 calc(25% - 15px);
|
||
margin: 0 7.5px;
|
||
display: flex;
|
||
flex-direction: column; /* اطمینان از چیدمان عمودی */
|
||
}
|
||
@media (max-width: 1024px) { .brand-card { flex: 0 0 calc(50% - 15px); } }
|
||
@media (max-width: 640px) { .brand-card { flex: 0 0 calc(100% - 15px); } }
|
||
|
||
.slider-container { position: relative; width: 100%; overflow: hidden; padding: 20px 0; }
|
||
.slider-track { display: flex; transition: transform 0.5s ease-out; }
|
||
.nav-btn {
|
||
position: absolute; top: 50%; transform: translateY(-50%);
|
||
width: 50px; height: 50px; background: white; color: black;
|
||
border-radius: 50%; display: flex; align-items: center; justify-content: center;
|
||
z-index: 50; cursor: pointer; transition: 0.3s;
|
||
}
|
||
.nav-btn:hover { background: var(--brand-red); color: white; }
|
||
.prev-btn { right: 10px; } .next-btn { left: 10px; }
|
||
|
||
/* Service Section Improvements */
|
||
.service-image-container {
|
||
position: relative;
|
||
border-radius: 40px;
|
||
overflow: hidden;
|
||
box-shadow: 0 30px 60px rgba(0,0,0,0.5);
|
||
}
|
||
.service-image-container::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(to right, rgba(10,10,10,0.8), transparent);
|
||
}
|
||
|
||
.manager-card {
|
||
background: rgba(255,255,255,0.02);
|
||
border: 1px solid rgba(255,255,255,0.05);
|
||
padding: 40px; text-align: center; border-radius: 30px; transition: 0.3s;
|
||
}
|
||
.manager-card:hover { border-color: var(--brand-red); }
|
||
|
||
.scroll-progress { position: fixed; top: 0; right: 0; height: 3px; background: var(--brand-red); z-index: 200; width: 0%; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="scroll-progress"></div>
|
||
|
||
<!-- Header -->
|
||
<nav id="main-nav" class="fixed w-full z-[100] px-6 py-2 flex justify-between items-center transition-all duration-300">
|
||
|
||
<div class="flex items-center gap-4">
|
||
<img src="logo.png" alt="Logo" class="h-16 md:h-20 object-contain">
|
||
<div class="hidden lg:flex gap-8 text-xs font-bold uppercase tracking-widest opacity-70">
|
||
<div class="nav-item-dropdown">
|
||
<a href="#brands" class="hover:text-red-600 transition flex items-center gap-1">
|
||
برندها
|
||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M6 9l6 6 6-6"/></svg>
|
||
</a>
|
||
<!-- Mega Menu -->
|
||
<div class="mega-menu">
|
||
<a href="#" class="mega-menu-item"><span>•</span> XTRIM</a>
|
||
<a href="#" class="mega-menu-item"><span>•</span> FOWNIX</a>
|
||
<a href="#" class="mega-menu-item"><span>•</span> MVM</a>
|
||
<a href="#" class="mega-menu-item"><span>•</span> LAMARI</a>
|
||
<a href="#" class="mega-menu-item"><span>•</span> NISSAN</a>
|
||
<a href="#" class="mega-menu-item"><span>•</span> HYUNDAI</a>
|
||
<a href="#" class="mega-menu-item"><span>•</span> AUDI</a>
|
||
<a href="#" class="mega-menu-item"><span>•</span> KAVIR MOTOR</a>
|
||
<a href="#" class="mega-menu-item"><span>•</span> ARINA DRIVE</a>
|
||
<a href="#" class="mega-menu-item"><span>•</span> RUBBER</a>
|
||
</div>
|
||
</div>
|
||
<a href="#services" class="mt-[20px] hover:text-red-600 transition">خدمات</a>
|
||
<a href="#managers" class="mt-[20px] hover:text-red-600 transition">مدیران</a>
|
||
<a href="#branches" class="mt-[20px] hover:text-red-600 transition">شعب</a>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center gap-6">
|
||
<div class="text-left hidden md:block">
|
||
<div class="text-[10px] opacity-50 uppercase">CENTRAL OFFICE</div>
|
||
<div class="text-sm font-black">۰۷۱-۳۸۸۹</div>
|
||
</div>
|
||
<a href="#" class="bg-white text-black px-6 py-2 text-xs font-bold hover:bg-red-600 hover:text-white transition">باشگاه مشتریان</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- Hero Section -->
|
||
<section class="h-screen relative flex items-center px-10 md:px-24 overflow-hidden border-b border-white/5">
|
||
<div class="absolute inset-0 z-0">
|
||
<img src="/uploads/car-placeholder.svg" class="w-full h-full object-cover opacity-30" alt="Hero">
|
||
<div class="absolute inset-0 bg-gradient-to-l from-black via-transparent to-black"></div>
|
||
</div>
|
||
<div class="relative z-10 max-w-4xl">
|
||
<h2 class="text-red-600 font-bold tracking-[0.4em] mb-4 uppercase no-italic">Ghasempour Commerce Group</h2>
|
||
<h1 class="text-6xl md:text-8xl font-black mb-8 leading-tight no-italic">تجربه قدرت و اصالت <br>در رانندگی</h1>
|
||
<p class="text-lg md:text-xl text-gray-400 max-w-2xl leading-loose mb-10 no-italic">
|
||
نمایندگی رسمی برترین برندهای خودرویی با بیش از ۱۵ سال سابقه درخشان در تامین و خدمات خودرو در جنوب کشور.
|
||
</p>
|
||
<div class="flex gap-4">
|
||
<button class="bg-red-700 text-white px-12 py-4 font-black hover:bg-white hover:text-black transition uppercase text-sm tracking-widest">موجودی انبار</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Brands Slider Section -->
|
||
<section id="brands" class="py-32 px-6 md:px-20 bg-[#080808]">
|
||
<div class="max-w-7xl mx-auto mb-20 text-right">
|
||
<h2 class="text-5xl font-black mb-4 no-italic">برندهای <span class="text-red-600">بازرگانی</span></h2>
|
||
<div class="w-20 h-1 bg-red-600"></div>
|
||
</div>
|
||
|
||
<div class="max-w-7xl mx-auto slider-container">
|
||
<div class="nav-btn prev-btn"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M9 18l6-6-6-6"/></svg></div>
|
||
<div class="nav-btn next-btn"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="M15 18l-6-6 6-6"/></svg></div>
|
||
<div class="slider-track" id="brand-track">
|
||
<!-- 1. XTRIM -->
|
||
<div class="brand-card">
|
||
<div class="brand-image-box"><img src="/uploads/car-placeholder.svg" alt="XTRIM"></div>
|
||
<div class="brand-content"><div class="text-2xl font-black uppercase">XTRIM</div><div class="text-left"><div class="text-sm font-bold text-gray-400">ایکس تریم</div><div class="text-[10px] text-red-600 font-black">کد ۵۰۵</div></div></div>
|
||
</div>
|
||
<!-- 2. Fownix -->
|
||
<div class="brand-card">
|
||
<div class="brand-image-box"><img src="/uploads/car-placeholder.svg" alt="Fownix"></div>
|
||
<div class="brand-content"><div class="text-2xl font-black uppercase">Fownix</div><div class="text-left"><div class="text-sm font-bold text-gray-400">فونیکس</div><div class="text-[10px] text-red-600 font-black">کد ۵۰۵</div></div></div>
|
||
</div>
|
||
<!-- 3. MVM -->
|
||
<div class="brand-card">
|
||
<div class="brand-image-box"><img src="/uploads/car-placeholder.svg" alt="MVM"></div>
|
||
<div class="brand-content"><div class="text-2xl font-black uppercase">MVM</div><div class="text-left"><div class="text-sm font-bold text-gray-400">ام وی ام</div><div class="text-[10px] text-red-600 font-black">کد ۵۰۵</div></div></div>
|
||
</div>
|
||
<!-- 4. Arina Drive -->
|
||
<div class="brand-card">
|
||
<div class="brand-image-box"><img src="/uploads/car-placeholder.svg" alt="Arina Drive"></div>
|
||
<div class="brand-content"><div class="text-2xl font-black uppercase">Arina Drive</div><div class="text-left"><div class="text-sm font-bold text-gray-400">آرینا درایو</div><div class="text-[10px] text-red-600 font-black">کد ۵۲۵</div></div></div>
|
||
</div>
|
||
<!-- 5. LAMARI -->
|
||
<div class="brand-card">
|
||
<div class="brand-image-box"><img src="/uploads/car-placeholder.svg" alt="LAMARI"></div>
|
||
<div class="brand-content"><div class="text-2xl font-black uppercase">LAMARI</div><div class="text-left"><div class="text-sm font-bold text-gray-400">لاماری</div><div class="text-[10px] text-red-600 font-black">کد ۱۷۰۱</div></div></div>
|
||
</div>
|
||
<!-- 6. Rubber -->
|
||
<div class="brand-card">
|
||
<div class="brand-image-box"><img src="/uploads/car-placeholder.svg" alt="Rubber"></div>
|
||
<div class="brand-content"><div class="text-2xl font-black uppercase">Rubber</div><div class="text-left"><div class="text-sm font-bold text-gray-400">لاستیک قاسمپور</div><div class="text-[10px] text-red-600 font-black">کد ۵۲۵</div></div></div>
|
||
</div>
|
||
<!-- 7. Nissan -->
|
||
<div class="brand-card">
|
||
<div class="brand-image-box"><img src="/uploads/car-placeholder.svg" alt="Nissan"></div>
|
||
<div class="brand-content"><div class="text-2xl font-black uppercase">Nissan</div><div class="text-left"><div class="text-sm font-bold text-gray-400">نیسان</div><div class="text-[10px] text-red-600 font-black">کد ۱۲۹۱</div></div></div>
|
||
</div>
|
||
<!-- 8. Hyundai -->
|
||
<div class="brand-card">
|
||
<div class="brand-image-box"><img src="/uploads/car-placeholder.svg" alt="Hyundai"></div>
|
||
<div class="brand-content"><div class="text-2xl font-black uppercase">Hyundai</div><div class="text-left"><div class="text-sm font-bold text-gray-400">هیوندا</div><div class="text-[10px] text-red-600 font-black">کد ۷۱۰</div></div></div>
|
||
</div>
|
||
<!-- 9. Kavir Motor -->
|
||
<div class="brand-card">
|
||
<div class="brand-image-box"><img src="/uploads/car-placeholder.svg" alt="Kavir Motor"></div>
|
||
<div class="brand-content"><div class="text-2xl font-black uppercase">Kavir</div><div class="text-left"><div class="text-sm font-bold text-gray-400">کویر موتور</div><div class="text-[10px] text-red-600 font-black">کد ۵۲۵</div></div></div>
|
||
</div>
|
||
<!-- 10. Audi -->
|
||
<div class="brand-card">
|
||
<div class="brand-image-box"><img src="/uploads/car-placeholder.svg" alt="Audi"></div>
|
||
<div class="brand-content"><div class="text-2xl font-black uppercase">AUDI</div><div class="text-left"><div class="text-sm font-bold text-gray-400">آئودی</div><div class="text-[10px] text-red-600 font-black">کد ۵۲۵</div></div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Services Section (Updated with High Readability) -->
|
||
<section id="services" class="py-32 px-6 md:px-20 relative bg-zinc-950">
|
||
<div class="max-w-7xl mx-auto grid md:grid-cols-2 gap-16 items-center">
|
||
<div>
|
||
<h2 class="text-5xl font-black mb-8 no-italic">خدمات <span class="text-red-600">پس از فروش</span></h2>
|
||
<div class="bg-white/5 p-8 rounded-3xl border border-white/10 mb-8">
|
||
<p class="text-gray-300 leading-loose no-italic text-lg">
|
||
ما در بازرگانی قاسمپور معتقدیم تعهد ما با فروش آغاز میشود. مرکز تخصصی ما مجهز به مدرنترین دستگاههای عیبیابی، خدمات تضمینی و تامین قطعات اصلی تمامی برندهاست.
|
||
</p>
|
||
</div>
|
||
<div class="flex flex-wrap gap-4">
|
||
<button class="bg-red-700 text-white px-10 py-4 font-black hover:bg-white hover:text-black transition uppercase text-sm tracking-widest">رزرو نوبت سرویس</button>
|
||
<div class="flex items-center gap-3 px-6 py-4 bg-white/5 rounded-2xl border border-white/10">
|
||
<span class="text-red-600 font-black">۰۷۱-۳۸۸۹</span>
|
||
<span class="text-xs text-gray-500 uppercase">Call center</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="service-image-container">
|
||
<img src="/uploads/car-placeholder.svg" alt="Automotive Workshop" class="w-full h-[500px] object-cover">
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Auto Arshia Section (جایگزین بخش مدیران) -->
|
||
<section id="arshia" class="py-32 px-6 md:px-20 bg-[#050505] relative overflow-hidden">
|
||
<!-- Background Decoration -->
|
||
<div class="absolute top-0 right-0 w-[500px] h-[500px] bg-red-600/10 blur-[120px] rounded-full -z-10"></div>
|
||
<div class="absolute bottom-0 left-0 w-[300px] h-[300px] bg-white/5 blur-[100px] rounded-full -z-10"></div>
|
||
|
||
<div class="max-w-7xl mx-auto">
|
||
<div class="flex flex-col md:flex-row justify-between items-end mb-20 gap-6">
|
||
<div class="reveal">
|
||
<h2 class="text-6xl md:text-8xl font-black mb-4 tracking-tighter no-italic uppercase">AUTO <span class="text-red-600">ARSHIA</span></h2>
|
||
<p class="text-xl text-gray-400 font-bold no-italic italic">هوشمندترین سامانه آنلاین خرید و فروش خودرو در ایران</p>
|
||
</div>
|
||
<div class="hidden md:block">
|
||
<div class="text-left">
|
||
<span class="text-xs text-gray-600 tracking-[5px] uppercase font-black">Powered by Ghasempour</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-10">
|
||
<!-- Seller Card -->
|
||
<div class="glass-card group p-12 rounded-[40px] border border-white/5 relative overflow-hidden transition-all duration-500 hover:border-red-600/50">
|
||
<div class="relative z-10">
|
||
<div class="w-16 h-16 bg-red-600 rounded-2xl flex items-center justify-center mb-8 shadow-[0_0_30px_rgba(165,28,36,0.5)]">
|
||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
|
||
</div>
|
||
<h3 class="text-4xl font-black mb-4 no-italic">قصد فروش دارید؟</h3>
|
||
<p class="text-gray-400 text-lg mb-10 leading-loose no-italic">خودروی خود را در کمترین زمان ممکن و با قیمت واقعی بازار به شبکه خریداران اتو عرشیا معرفی کنید. فروش فوری، امن و بدون واسطه.</p>
|
||
<button class="bg-white text-black px-10 py-4 font-black rounded-2xl hover:bg-red-600 hover:text-white transition-all transform group-hover:scale-105">ثبت آگهی فروش</button>
|
||
</div>
|
||
<!-- Background Pattern -->
|
||
<div class="absolute -bottom-10 -right-10 opacity-5 group-hover:opacity-10 transition-opacity">
|
||
<svg width="300" height="300" viewBox="0 0 24 24" fill="currentColor"><path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"/></svg>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Buyer Card -->
|
||
<div class="glass-card group p-12 rounded-[40px] border border-white/5 relative overflow-hidden bg-gradient-to-br from-white/[0.03] to-transparent transition-all duration-500 hover:border-white/20">
|
||
<div class="relative z-10">
|
||
<div class="w-16 h-16 bg-white rounded-2xl flex items-center justify-center mb-8 shadow-[0_0_30px_rgba(255,255,255,0.2)]">
|
||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
|
||
</div>
|
||
<h3 class="text-4xl font-black mb-4 no-italic">دنبال خرید هستید؟</h3>
|
||
<p class="text-gray-400 text-lg mb-10 leading-loose no-italic">بودجه خود را مشخص کنید تا هوش مصنوعی اتو عرشیا، بهترین خودروهای کارشناسی شده را به شما پیشنهاد دهد. خریدی هوشمندانه و مطمئن.</p>
|
||
<button class="border-2 border-white text-white px-10 py-4 font-black rounded-2xl hover:bg-white hover:text-black transition-all transform group-hover:scale-105">جستجو بر اساس بودجه</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- =========================================================
|
||
EXCLUSIVE BRANCHES SECTION (USING iran.svg)
|
||
========================================================= -->
|
||
<style>
|
||
/* ایزوله سازی کامل برای جلوگیری از تداخل با بخش برندها */
|
||
#ghasempour-branches {
|
||
background-color: #0a0a0a;
|
||
padding: 100px 0;
|
||
position: relative;
|
||
z-index: 10;
|
||
}
|
||
|
||
.branch-wrapper {
|
||
max-width: 1300px;
|
||
margin: 0 auto;
|
||
padding: 0 40px; /* ایجاد فاصله از کنارههای صفحه */
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: 60px;
|
||
align-items: center;
|
||
}
|
||
|
||
@media (min-width: 1024px) {
|
||
.branch-wrapper { grid-template-columns: 1fr 1.2fr; }
|
||
}
|
||
|
||
/* استایل اختصاصی پنل اطلاعات - کاملاً مجزا از برندها */
|
||
.branch-info-card {
|
||
background: rgba(255, 255, 255, 0.03);
|
||
backdrop-filter: blur(20px);
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
border-radius: 40px;
|
||
padding: 50px; /* پدینگ داخلی زیاد برای جلوگیری از چسبیدن متن */
|
||
min-height: 450px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
box-shadow: 0 30px 60px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
.branch-tag-text {
|
||
color: #A51C24;
|
||
font-weight: 900;
|
||
font-size: 14px;
|
||
letter-spacing: 3px;
|
||
margin-bottom: 15px;
|
||
display: block;
|
||
}
|
||
|
||
.branch-main-title {
|
||
font-size: clamp(28px, 4vw, 42px);
|
||
font-weight: 900;
|
||
margin-bottom: 30px;
|
||
color: #fff;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.branch-contact-item {
|
||
display: flex;
|
||
gap: 20px;
|
||
margin-bottom: 25px;
|
||
color: #999;
|
||
font-size: 17px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.branch-contact-item svg {
|
||
width: 26px;
|
||
color: #A51C24;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* بخش نقشه */
|
||
.map-interactive-area {
|
||
position: relative;
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.map-image-container {
|
||
position: relative;
|
||
width: 100%;
|
||
max-width: 600px;
|
||
}
|
||
|
||
.iran-svg-img {
|
||
width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
filter: brightness(0.4) sepia(1) hue-rotate(-50deg) saturate(2); /* تغییر رنگ SVG به تم تیره و قرمز ملایم */
|
||
}
|
||
|
||
/* نقاط تپنده روی نقشه */
|
||
.map-marker {
|
||
position: absolute;
|
||
width: 18px;
|
||
height: 18px;
|
||
background-color: #ff0000;
|
||
border-radius: 50%;
|
||
cursor: pointer;
|
||
z-index: 50;
|
||
transform: translate(-50%, -50%);
|
||
border: 2px solid #fff;
|
||
}
|
||
|
||
.map-marker::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0; left: 0; width: 100%; height: 100%;
|
||
background-color: inherit;
|
||
border-radius: inherit;
|
||
animation: map-pulse 2s infinite;
|
||
}
|
||
|
||
@keyframes map-pulse {
|
||
0% { transform: scale(1); opacity: 1; }
|
||
100% { transform: scale(3.5); opacity: 0; }
|
||
}
|
||
|
||
.map-marker:hover, .map-marker.active {
|
||
background-color: #fff;
|
||
box-shadow: 0 0 25px #ff0000;
|
||
scale: 1.3;
|
||
}
|
||
</style>
|
||
|
||
<section id="ghasempour-branches">
|
||
<div class="branch-wrapper">
|
||
|
||
<!-- سمت راست: اطلاعات شعبه (پدینگ دار و منظم) -->
|
||
<div class="branch-info-card" id="branch-info-card">
|
||
<div id="branch-anim-content">
|
||
<span class="branch-tag-text" id="b-tag">شعبه مرکزی</span>
|
||
<h3 class="branch-main-title" id="b-name">بازرگانی قاسمپور (شیراز)</h3>
|
||
|
||
<div class="branch-contact-item">
|
||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
|
||
<p id="b-address" class="no-italic">شیراز، بلوار امیرکبیر، نرسیده به پلیس راه، مجتمع خودرویی قاسمپور</p>
|
||
</div>
|
||
|
||
<div class="branch-contact-item">
|
||
<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 7V5z"/></svg>
|
||
<p id="b-phone" dir="ltr" class="no-italic">۰۷۱-۳۸۸۹</p>
|
||
</div>
|
||
|
||
<button class="mt-6 bg-red-700 text-white px-8 py-4 font-black rounded-xl hover:bg-white hover:text-black transition-all">مسیریابی هوشمند (Google Maps)</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- سمت چپ: نقشه فایل شما -->
|
||
<div class="map-interactive-area">
|
||
<div class="map-image-container">
|
||
<!-- لود کردن فایل SVG شما -->
|
||
<img src="iran.svg" class="iran-svg-img" alt="نقشه ایران بازرگانی قاسم پور">
|
||
|
||
<!-- نقاط دیتای شهرها (درصدها بر اساس نقشه استاندارد تنظیم شده، در صورت نیاز تغییر دهید) -->
|
||
<div class="map-marker" style="top: 30%; left: 48%;" onclick="changeBranch('tehran', this)" title="تهران"></div>
|
||
<div class="map-marker active" style="top: 66%; left: 51%;" onclick="changeBranch('shiraz', this)" title="شیراز"></div>
|
||
<div class="map-marker" style="top: 82%; left: 68%;" onclick="changeBranch('bandar', this)" title="بندرعباس"></div>
|
||
<div class="map-marker" style="top: 75%; left: 38%;" onclick="changeBranch('bushehr', this)" title="بوشهر"></div>
|
||
<div class="map-marker" style="top: 61%; left: 32%;" onclick="changeBranch('ahvaz', this)" title="اهواز"></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<script>
|
||
const branchList = {
|
||
tehran: {
|
||
tag: "شعبه پایتخت",
|
||
name: "مجتمع خودرویی آرشیا (تهران)",
|
||
address: "تهران، جاده مخصوص کرج، کیلومتر ۱۲، نبش خیابان اصلی",
|
||
phone: "۰۲۱-۴۴۵۵۶۶۷۷"
|
||
},
|
||
shiraz: {
|
||
tag: "شعبه مرکزی",
|
||
name: "بازرگانی قاسمپور (شیراز)",
|
||
address: "شیراز، بلوار امیرکبیر، نرسیده به پلیس راه، مجتمع خودرویی قاسمپور",
|
||
phone: "۰۷۱-۳۸۸۹"
|
||
},
|
||
bandar: {
|
||
tag: "شعبه هرمزگان",
|
||
name: "پرشیا خودرو (بندرعباس)",
|
||
address: "بندرعباس، بلوار امام خمینی، جنب هتل هما، شعبه بازرگانی قاسمپور",
|
||
phone: "۰۷۶-۳۳۴۴۵۵۶۶"
|
||
},
|
||
bushehr: {
|
||
tag: "شعبه بوشهر",
|
||
name: "نمایشگاه ساحلی (بوشهر)",
|
||
address: "بوشهر، بلوار ساحلی، میدان خلیج فارس، مجتمع تجاری خودرو",
|
||
phone: "۰۷۷-۳۳۲۲۱۱۰۰"
|
||
},
|
||
ahvaz: {
|
||
tag: "شعبه خوزستان",
|
||
name: "مرکز فروش کارون (اهواز)",
|
||
address: "اهواز، اتوبان آیتالله بهبهانی، روبروی ترمینال آبادان",
|
||
phone: "۰۶۱-۳۳۷۷۸۸۹۹"
|
||
}
|
||
};
|
||
|
||
function changeBranch(city, element) {
|
||
// آپدیت وضعیت ظاهری نقاط
|
||
document.querySelectorAll('.map-marker').forEach(m => m.classList.remove('active'));
|
||
element.classList.add('active');
|
||
|
||
const info = branchList[city];
|
||
const contentDiv = document.getElementById('branch-anim-content');
|
||
|
||
// انیمیشن تغییر محتوا
|
||
gsap.to(contentDiv, {
|
||
opacity: 0,
|
||
y: 10,
|
||
duration: 0.3,
|
||
onComplete: () => {
|
||
document.getElementById('b-tag').innerText = info.tag;
|
||
document.getElementById('b-name').innerText = info.name;
|
||
document.getElementById('b-address').innerText = info.address;
|
||
document.getElementById('b-phone').innerText = info.phone;
|
||
|
||
gsap.to(contentDiv, {
|
||
opacity: 1,
|
||
y: 0,
|
||
duration: 0.4,
|
||
ease: "power2.out"
|
||
});
|
||
}
|
||
});
|
||
}
|
||
</script>
|
||
<!-- Footer -->
|
||
<footer class="py-20 px-10 border-t border-white/5 text-center">
|
||
<img src="logo.png" alt="Logo" class="h-20 mx-auto mb-10">
|
||
<p class="text-gray-500 text-sm mb-10 max-w-xl mx-auto">گروه بازرگانی قاسمپور، نماد اعتماد و پیشرو در ارائه خدمات نوین خودرویی. تمامی حقوق برای این مجموعه محفوظ است.</p>
|
||
<div class="flex justify-center gap-10 text-[10px] font-bold tracking-[5px] text-gray-700"><span>INSTAGRAM</span><span>TELEGRAM</span><span>LINKEDIN</span></div>
|
||
</footer>
|
||
|
||
<script>
|
||
gsap.registerPlugin(ScrollTrigger);
|
||
|
||
gsap.to(".scroll-progress", { width: "100%", scrollTrigger: { scrub: 0.3 } });
|
||
|
||
gsap.utils.toArray('section').forEach(section => {
|
||
gsap.from(section, { opacity: 0, y: 50, duration: 1, scrollTrigger: { trigger: section, start: "top 80%", } });
|
||
});
|
||
|
||
// --- Brand Slider Logic ---
|
||
const track = document.getElementById('brand-track');
|
||
const cards = Array.from(track.children);
|
||
const nextBtn = document.querySelector('.next-btn');
|
||
const prevBtn = document.querySelector('.prev-btn');
|
||
let currentIndex = 0;
|
||
const totalOriginalCards = cards.length;
|
||
|
||
cards.forEach(card => { track.appendChild(card.cloneNode(true)); });
|
||
|
||
function updateSlider(animate = true) {
|
||
const step = track.children[0].offsetWidth + 15;
|
||
if (animate) { gsap.to(track, { x: currentIndex * step, duration: 0.8, ease: "power2.inOut" }); }
|
||
else { gsap.set(track, { x: currentIndex * step }); }
|
||
}
|
||
|
||
function nextSlide() {
|
||
currentIndex++; updateSlider();
|
||
if (currentIndex >= totalOriginalCards) {
|
||
setTimeout(() => { currentIndex = 0; updateSlider(false); }, 800);
|
||
}
|
||
}
|
||
|
||
function prevSlide() {
|
||
if (currentIndex <= 0) { currentIndex = totalOriginalCards; updateSlider(false); }
|
||
setTimeout(() => { currentIndex--; updateSlider(); }, 10);
|
||
}
|
||
|
||
let autoPlay = setInterval(nextSlide, 3000);
|
||
nextBtn.addEventListener('click', () => { clearInterval(autoPlay); nextSlide(); autoPlay = setInterval(nextSlide, 3000); });
|
||
prevBtn.addEventListener('click', () => { clearInterval(autoPlay); prevSlide(); autoPlay = setInterval(nextSlide, 3000); });
|
||
window.addEventListener('resize', () => updateSlider(false));
|
||
</script>
|
||
<script>
|
||
window.addEventListener('scroll', () => {
|
||
const nav = document.getElementById('main-nav');
|
||
if (window.scrollY > 50) {
|
||
nav.classList.add('nav-scrolled');
|
||
} else {
|
||
nav.classList.remove('nav-scrolled');
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|