drmesta/GPGroup
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Mohammad Saeed Roosta
2026-05-24 11:49:14 +03:30
commit 82e401e2f6
46 changed files with 11606 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

631
home.html Normal file
View File

@@ -0,0 +1,631 @@
<!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>