<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>فروشگاه محصولات چرمی</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
/* فونت سفارشی - Vazirmatn برای زبان فارسی مناسب است */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700&display=swap');
body {
font-family: 'Vazirmatn', sans-serif;
background-color: #fcfcfc;
color: #333;
}
/* کلاسهای کمکی برای اسکرول افقی مخفی */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* افکتهای هاور سفارشی */
.hover-lift {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
/* رنگهای سفارشی بر اساس تصویر */
.bg-brand-dark { background-color: #2b2b2b; }
.text-brand-dark { color: #2b2b2b; }
.bg-brand-olive { background-color: #556b4f; }
.bg-brand-light { background-color: #f3f3f3; }
.bg-brand-cream { background-color: #f9f8f6; }
</style>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
olive: '#556b4f',
dark: '#2b2b2b',
cream: '#f9f8f6',
lightgray: '#e5e7eb'
}
}
}
}
</script>
</head>
<body class="antialiased">
<header class="absolute top-0 w-full z-50 text-white py-4 px-6 md:px-12 flex justify-between items-center bg-gradient-to-b from-black/50 to-transparent">
<div class="flex items-center gap-4">
<button class="text-white hover:text-gray-300 transition"><i class="fas fa-bars text-xl"></i></button>
<button class="text-white hover:text-gray-300 transition hidden md:block"><i class="fas fa-search text-xl"></i></button>
</div>
<div class="text-xl font-bold tracking-widest uppercase">
Leather Goods
</div>
<div class="flex items-center gap-4">
<a href="#" class="hidden md:inline-block hover:text-gray-300 transition text-sm">Account</a>
<a href="#" class="hidden md:inline-block hover:text-gray-300 transition text-sm">Search</a>
<button class="relative hover:text-gray-300 transition">
<i class="fas fa-shopping-bag text-xl"></i>
<span class="absolute -top-1 -right-2 bg-white text-black text-xs rounded-full h-4 w-4 flex items-center justify-center font-bold">0</span>
</button>
</div>
</header>
<section class="relative h-screen min-h-[500px] flex items-center justify-center text-center">
<!-- تصویر پسزمینه (استفاده از placehold به عنوان نمونه) -->
<div class="absolute inset-0 w-full h-full">
<img src="https://placehold.co/1920x1080/8B5A2B/FFFFFF?text=Leather+Journals+Banner" alt="Leather Journals" class="w-full h-full object-cover" />
<!-- یک لایه تیره برای خوانایی بهتر متن -->
<div class="absolute inset-0 bg-black/20"></div>
</div>
<!-- محتوای روی بنر -->
<div class="relative z-10 px-4 mt-20">
<h1 class="text-4xl md:text-6xl font-bold text-white mb-6 drop-shadow-lg">A leather journal for all seasons.</h1>
<a href="#" class="inline-block bg-white text-black font-medium py-3 px-8 rounded-sm hover:bg-gray-100 transition duration-300 uppercase tracking-wide text-sm">Shop Now</a>
</div>
<!-- نوار اطلاعات زیر هدر (روی تصویر) -->
<div class="absolute bottom-0 w-full bg-black/40 text-white py-3 px-6 text-sm flex justify-between items-center backdrop-blur-sm">
<span>Free shipping on orders over $50</span>
<div class="hidden md:flex gap-4">
<a href="#" class="hover:underline">Shop All</a>
<a href="#" class="hover:underline">Journals</a>
<a href="#" class="hover:underline">Accessories</a>
</div>
</div>
</section>
<section class="py-20 px-4 text-center max-w-3xl mx-auto bg-brand-cream">
<h2 class="text-3xl font-bold mb-4 text-dark">Crafted with care. Made to last.</h2>
<p class="text-gray-600 mb-8 leading-relaxed text-lg">
We believe in creating products that stand the test of time. Our leather goods are designed to be your companions for life's journey, acquiring a unique patina with every adventure.
</p>
<a href="#" class="inline-block bg-olive text-white font-medium py-3 px-8 rounded-sm hover:bg-opacity-90 transition duration-300">Read Our Story</a>
</section>
<section class="py-16 bg-white overflow-hidden relative">
<div class="px-6 md:px-12 mb-8">
<h2 class="text-2xl font-bold border-b border-gray-200 pb-2 inline-block">Featured Products</h2>
</div>
<!-- کانتینر اسلایدر با قابلیت اسکرول -->
<div class="relative px-6 md:px-12">
<!-- دکمههای ناوبری اسلایدر (نمایشی) -->
<button class="absolute left-2 top-1/2 -translate-y-1/2 z-10 bg-white/80 p-3 rounded-full shadow-md hover:bg-white transition hidden md:block">
<i class="fas fa-chevron-left"></i>
</button>
<button class="absolute right-2 top-1/2 -translate-y-1/2 z-10 bg-white/80 p-3 rounded-full shadow-md hover:bg-white transition hidden md:block">
<i class="fas fa-chevron-right"></i>
</button>
<!-- آیتمهای اسلایدر -->
<div class="flex gap-4 overflow-x-auto no-scrollbar snap-x snap-mandatory">
<!-- محصول 1 -->
<div class="min-w-[280px] md:min-w-[350px] snap-center group cursor-pointer hover-lift">
<div class="relative aspect-[4/5] mb-4 bg-gray-100 rounded-sm overflow-hidden">
<img src="https://placehold.co/400x500/A0522D/FFF?text=Classic+Journal" alt="Product" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
</div>
<div class="text-center">
<h3 class="text-lg font-medium text-gray-800">Classic Leather Journal</h3>
<p class="text-gray-500 mt-1">$45.00</p>
</div>
</div>
<!-- محصول 2 -->
<div class="min-w-[280px] md:min-w-[350px] snap-center group cursor-pointer hover-lift">
<div class="relative aspect-[4/5] mb-4 bg-gray-100 rounded-sm overflow-hidden">
<img src="https://placehold.co/400x500/8FBC8F/FFF?text=Olive+Notebook" alt="Product" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
</div>
<div class="text-center">
<h3 class="text-lg font-medium text-gray-800">Olive Green Notebook</h3>
<p class="text-gray-500 mt-1">$38.00</p>
</div>
</div>
<!-- محصول 3 -->
<div class="min-w-[280px] md:min-w-[350px] snap-center group cursor-pointer hover-lift">
<div class="relative aspect-[4/5] mb-4 bg-gray-100 rounded-sm overflow-hidden">
<img src="https://placehold.co/400x500/CD853F/FFF?text=Pen+Holder" alt="Product" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
<span class="absolute top-2 right-2 bg-white text-xs px-2 py-1 rounded-sm uppercase tracking-wide">New</span>
</div>
<div class="text-center">
<h3 class="text-lg font-medium text-gray-800">Leather Pen Holder</h3>
<p class="text-gray-500 mt-1">$25.00</p>
</div>
</div>
<!-- محصول 4 -->
<div class="min-w-[280px] md:min-w-[350px] snap-center group cursor-pointer hover-lift">
<div class="relative aspect-[4/5] mb-4 bg-gray-100 rounded-sm overflow-hidden">
<img src="https://placehold.co/400x500/4682B4/FFF?text=Blue+Planner" alt="Product" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
</div>
<div class="text-center">
<h3 class="text-lg font-medium text-gray-800">2027 Daily Planner</h3>
<p class="text-gray-500 mt-1">$55.00</p>
</div>
</div>
</div>
<!-- نوار پیشرفت اسلایدر -->
<div class="w-full bg-gray-200 h-1 mt-8 max-w-xs mx-auto rounded-full overflow-hidden">
<div class="bg-gray-800 h-full w-1/3 rounded-full"></div>
</div>
</div>
</section>
<section class="py-12 px-4 md:px-12 bg-white">
<h2 class="text-xl font-bold mb-6">Shop by Category</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- باکس دسته بندی 1 -->
<a href="#" class="group relative h-[300px] bg-gray-200 overflow-hidden rounded-sm flex items-end p-6 hover-lift">
<img src="https://placehold.co/800x400/E0E0E0/808080?text=Journals" alt="Journals" class="absolute inset-0 w-full h-full object-cover opacity-80 group-hover:scale-105 transition duration-700">
<div class="relative z-10 w-full">
<h3 class="text-2xl font-bold text-gray-800 mb-1">Journals</h3>
<p class="text-gray-600 flex items-center gap-2 group-hover:gap-4 transition-all">Shop Collection <i class="fas fa-arrow-right text-sm"></i></p>
</div>
</a>
<!-- باکس دسته بندی 2 -->
<a href="#" class="group relative h-[300px] bg-gray-200 overflow-hidden rounded-sm flex items-end p-6 hover-lift">
<img src="https://placehold.co/800x400/E0E0E0/808080?text=Accessories" alt="Accessories" class="absolute inset-0 w-full h-full object-cover opacity-80 group-hover:scale-105 transition duration-700">
<div class="relative z-10 w-full">
<h3 class="text-2xl font-bold text-gray-800 mb-1">Accessories</h3>
<p class="text-gray-600 flex items-center gap-2 group-hover:gap-4 transition-all">Shop Collection <i class="fas fa-arrow-right text-sm"></i></p>
</div>
</a>
<!-- باکس دسته بندی 3 -->
<a href="#" class="group relative h-[300px] bg-gray-200 overflow-hidden rounded-sm flex items-end p-6 hover-lift">
<img src="https://placehold.co/800x400/E0E0E0/808080?text=Bags" alt="Bags" class="absolute inset-0 w-full h-full object-cover opacity-80 group-hover:scale-105 transition duration-700">
<div class="relative z-10 w-full">
<h3 class="text-2xl font-bold text-gray-800 mb-1">Bags & Totes</h3>
<p class="text-gray-600 flex items-center gap-2 group-hover:gap-4 transition-all">Shop Collection <i class="fas fa-arrow-right text-sm"></i></p>
</div>
</a>
<!-- باکس دسته بندی 4 -->
<a href="#" class="group relative h-[300px] bg-gray-200 overflow-hidden rounded-sm flex items-end p-6 hover-lift">
<img src="https://placehold.co/800x400/E0E0E0/808080?text=Gifts" alt="Gifts" class="absolute inset-0 w-full h-full object-cover opacity-80 group-hover:scale-105 transition duration-700">
<div class="relative z-10 w-full">
<h3 class="text-2xl font-bold text-gray-800 mb-1">Gift Sets</h3>
<p class="text-gray-600 flex items-center gap-2 group-hover:gap-4 transition-all">Shop Collection <i class="fas fa-arrow-right text-sm"></i></p>
</div>
</a>
</div>
</section>
<section class="h-[400px] md:h-[500px] bg-black text-white flex flex-col items-center justify-center text-center px-4 relative overflow-hidden group">
<div class="absolute inset-0 bg-[url('https://placehold.co/1920x800/111/333?text=Process+Video')] bg-cover bg-center opacity-50 group-hover:opacity-60 transition duration-1000"></div>
<div class="relative z-10">
<i class="fas fa-play-circle text-5xl mb-4 cursor-pointer hover:text-gray-300 transition"></i>
<h2 class="text-3xl font-bold tracking-widest uppercase">The Process</h2>
<p class="mt-2 text-gray-400">See how it's made</p>
</div>
</section>
<section class="py-16 px-4 md:px-12 bg-white">
<div class="flex justify-between items-end mb-8">
<h2 class="text-2xl font-bold">Journaling Tips & Ideas</h2>
<a href="#" class="text-sm font-medium border-b border-black hover:text-gray-600 pb-1 hidden md:block">View All Posts</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- مقاله 1 -->
<article class="group cursor-pointer">
<div class="aspect-square bg-gray-100 mb-4 overflow-hidden rounded-sm">
<img src="https://placehold.co/500x500/E0E0E0/808080" alt="Blog" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
</div>
<h3 class="font-bold text-lg mb-2 group-hover:text-olive transition">5 Prompts to Start Your Day</h3>
<p class="text-gray-600 text-sm mb-3 line-clamp-2">Overcome the blank page with these simple yet effective morning prompts designed to clear your mind.</p>
<span class="text-xs text-gray-500 uppercase tracking-widest">Read More</span>
</article>
<!-- مقاله 2 -->
<article class="group cursor-pointer">
<div class="aspect-square bg-gray-100 mb-4 overflow-hidden rounded-sm">
<img src="https://placehold.co/500x500/E0E0E0/808080" alt="Blog" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
</div>
<h3 class="font-bold text-lg mb-2 group-hover:text-olive transition">How to Care for Leather</h3>
<p class="text-gray-600 text-sm mb-3 line-clamp-2">A comprehensive guide on cleaning, conditioning, and protecting your full-grain leather goods.</p>
<span class="text-xs text-gray-500 uppercase tracking-widest">Read More</span>
</article>
<!-- مقاله 3 -->
<article class="group cursor-pointer">
<div class="aspect-square bg-gray-100 mb-4 overflow-hidden rounded-sm">
<img src="https://placehold.co/500x500/E0E0E0/808080" alt="Blog" class="w-full h-full object-cover group-hover:scale-105 transition duration-500">
</div>
<h3 class="font-bold text-lg mb-2 group-hover:text-olive transition">Travel Journal Inspiration</h3>
<p class="text-gray-600 text-sm mb-3 line-clamp-2">Document your adventures creatively. Layout ideas and essential tools for the perfect travel log.</p>
<span class="text-xs text-gray-500 uppercase tracking-widest">Read More</span>
</article>
</div>
<div class="mt-8 text-center md:hidden">
<a href="#" class="inline-block border border-black px-6 py-2 rounded-sm hover:bg-black hover:text-white transition">View All Posts</a>
</div>
</section>
<section class="py-8 px-4 md:px-12 bg-white">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- ردیف بالا - بزرگ -->
<a href="#" class="group relative h-[250px] bg-gray-100 overflow-hidden rounded-sm flex items-center justify-center hover-lift col-span-1 md:col-span-2">
<img src="https://placehold.co/1200x400/EAEAEA/808080?text=Personalization" alt="Personalization" class="absolute inset-0 w-full h-full object-cover opacity-70 group-hover:scale-105 transition duration-700">
<div class="relative z-10 text-center bg-white/90 p-6 rounded-sm min-w-[250px]">
<h3 class="text-xl font-bold text-gray-800 mb-2">Make it Yours</h3>
<p class="text-sm border-b border-black inline-block pb-1">Shop Monogrammed Items</p>
</div>
</a>
<!-- ردیف پایین - دو ستون -->
<a href="#" class="group relative h-[250px] bg-gray-100 overflow-hidden rounded-sm flex items-center justify-center hover-lift">
<img src="https://placehold.co/600x400/EAEAEA/808080?text=Corporate+Gifts" alt="Corporate Gifts" class="absolute inset-0 w-full h-full object-cover opacity-70 group-hover:scale-105 transition duration-700">
<div class="relative z-10 text-center">
<h3 class="text-xl font-bold text-gray-800 bg-white/80 px-4 py-2 rounded-sm">Corporate Gifting</h3>
</div>
</a>
<a href="#" class="group relative h-[250px] bg-gray-100 overflow-hidden rounded-sm flex items-center justify-center hover-lift">
<img src="https://placehold.co/600x400/EAEAEA/808080?text=Our+Materials" alt="Materials" class="absolute inset-0 w-full h-full object-cover opacity-70 group-hover:scale-105 transition duration-700">
<div class="relative z-10 text-center">
<h3 class="text-xl font-bold text-gray-800 bg-white/80 px-4 py-2 rounded-sm">Our Materials</h3>
</div>
</a>
</div>
</section>
<section class="py-20 px-4 bg-brand-light text-center">
<div class="max-w-4xl mx-auto relative">
<h2 class="text-sm font-bold tracking-widest uppercase text-gray-500 mb-12">What Our Customers Say</h2>
<!-- آیکونهای نقل قول -->
<div class="text-4xl text-gray-300 mb-6 font-serif">"</div>
<!-- متن نظر -->
<p class="text-xl md:text-2xl font-medium text-gray-800 mb-8 leading-relaxed italic">
"The quality of this journal is absolutely outstanding. The leather is soft yet durable, and the paper takes fountain pen ink perfectly without bleeding. It's become my daily companion."
</p>
<!-- نویسنده نظر -->
<div class="flex items-center justify-center gap-4">
<div class="w-12 h-12 bg-gray-300 rounded-full overflow-hidden">
<img src="https://placehold.co/100x100/999/FFF?text=S" alt="Sarah" class="w-full h-full object-cover">
</div>
<div class="text-left">
<p class="font-bold text-sm">Sarah Jenkins</p>
<div class="flex text-yellow-500 text-xs">
<i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
</div>
</div>
</div>
<!-- دکمههای ناوبری نظرات -->
<div class="flex justify-center gap-2 mt-8">
<button class="w-3 h-3 rounded-full bg-gray-800"></button>
<button class="w-3 h-3 rounded-full bg-gray-300 hover:bg-gray-400"></button>
<button class="w-3 h-3 rounded-full bg-gray-300 hover:bg-gray-400"></button>
</div>
</div>
</section>
<section class="py-16 px-4 bg-gray-200 text-center">
<div class="max-w-2xl mx-auto">
<h2 class="text-2xl font-bold mb-4">Subscribe to our newsletter and get 10% off your first purchase.</h2>
<p class="text-gray-600 mb-8 text-sm">Join our community to receive updates on new releases, special offers, and journaling tips.</p>
<form class="flex flex-col md:flex-row gap-2 max-w-md mx-auto" onsubmit="event.preventDefault();">
<input type="email" placeholder="Enter your email address" class="flex-1 px-4 py-3 rounded-sm border border-gray-300 focus:outline-none focus:border-gray-500" required>
<button type="submit" class="bg-dark text-white px-8 py-3 rounded-sm hover:bg-gray-800 transition font-medium">Subscribe</button>
</form>
</div>
</section>
<footer class="bg-brand-dark text-white pt-16 pb-8 px-6 md:px-12">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12 border-b border-gray-700 pb-12">
<!-- ستون 1: درباره -->
<div class="col-span-1 md:col-span-1">
<h3 class="text-lg font-bold tracking-widest uppercase mb-6">Leather Goods</h3>
<p class="text-gray-400 text-sm leading-relaxed mb-6">
Handcrafted leather journals, bags, and accessories designed for the modern creator. Ethically sourced, thoughtfully made.
</p>
<div class="flex gap-4">
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram text-xl"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook text-xl"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-pinterest text-xl"></i></a>
<a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-tiktok text-xl"></i></a>
</div>
</div>
<!-- ستون 2: لینکهای سریع -->
<div>
<h4 class="font-bold mb-6 text-sm uppercase tracking-wider">Shop</h4>
<ul class="space-y-3 text-sm text-gray-400">
<li><a href="#" class="hover:text-white transition">All Products</a></li>
<li><a href="#" class="hover:text-white transition">Journals & Notebooks</a></li>
<li><a href="#" class="hover:text-white transition">Bags & Totes</a></li>
<li><a href="#" class="hover:text-white transition">Small Accessories</a></li>
<li><a href="#" class="hover:text-white transition">Gift Cards</a></li>
</ul>
</div>
<!-- ستون 3: پشتیبانی -->
<div>
<h4 class="font-bold mb-6 text-sm uppercase tracking-wider">Support</h4>
<ul class="space-y-3 text-sm text-gray-400">
<li><a href="#" class="hover:text-white transition">FAQ</a></li>
<li><a href="#" class="hover:text-white transition">Shipping & Returns</a></li>
<li><a href="#" class="hover:text-white transition">Leather Care Guide</a></li>
<li><a href="#" class="hover:text-white transition">Contact Us</a></li>
<li><a href="#" class="hover:text-white transition">Track Order</a></li>
</ul>
</div>
<!-- ستون 4: اطلاعات تماس -->
<div>
<h4 class="font-bold mb-6 text-sm uppercase tracking-wider">Contact</h4>
<ul class="space-y-3 text-sm text-gray-400">
<li class="flex items-start gap-3">
<i class="fas fa-map-marker-alt mt-1"></i>
<span>123 Maker Street, Craft District, Cityville 10001</span>
</li>
<li class="flex items-center gap-3">
<i class="fas fa-envelope"></i>
<a href="mailto:hello@leathergoods.com" class="hover:text-white transition">hello@leathergoods.com</a>
</li>
<li class="flex items-center gap-3">
<i class="fas fa-phone"></i>
<span>+1 (555) 123-4567</span>
</li>
</ul>
</div>
</div>
<!-- بخش پایینی فوتر -->
<div class="flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-gray-500">
<div class="flex flex-wrap gap-4 justify-center">
<span>© 2026 Leather Goods Co.</span>
<a href="#" class="hover:text-gray-300">Privacy Policy</a>
<a href="#" class="hover:text-gray-300">Terms of Service</a>
</div>
<!-- آیکونهای پرداخت -->
<div class="flex gap-2 text-xl">
<i class="fab fa-cc-visa"></i>
<i class="fab fa-cc-mastercard"></i>
<i class="fab fa-cc-amex"></i>
<i class="fab fa-cc-paypal"></i>
<i class="fab fa-cc-apple-pay"></i>
</div>
</div>
</footer>
<!-- اسکریپتهای ساده برای تعاملات اولیه -->
<script>
// اسکریپت ساده برای اسکرول افقی با درگ کردن (اختیاری برای بهتر شدن UX)
const slider = document.querySelector('.snap-x');
let isDown = false;
let startX;
let scrollLeft;
if(slider) {
slider.addEventListener('mousedown', (e) => {
isDown = true;
slider.classList.add('active');
startX = e.pageX - slider.offsetLeft;
scrollLeft = slider.scrollLeft;
});
slider.addEventListener('mouseleave', () => {
isDown = false;
slider.classList.remove('active');
});
slider.addEventListener('mouseup', () => {
isDown = false;
slider.classList.remove('active');
});
slider.addEventListener('mousemove', (e) => {
if (!isDown) return;
e.preventDefault();
const x = e.pageX - slider.offsetLeft;
const walk = (x - startX) * 2; // سرعت اسکرول
slider.scrollLeft = scrollLeft - walk;
});
}
</script>
</body>
</html>
بلاگ
-
test
-
سلام دنیا!
به وردپرس خوش آمدید. این اولین نوشتهٔ شماست. این را ویرایش یا حذف کنید، سپس نوشتن را شروع نمایید!