پوسته فارسی

I'll provide an enhanced UI/UX implementation with the Vazir font and dark/light mode theming, including all the font-face declarations and color variables you provided: پوسته فارسی

به وبسایت ما خوش آمدید

این یک قالب فارسی با فونت وزیر و پشتیبانی از حالت تاریک و روشن است

ویژگی اول

توضیحات مربوط به ویژگی اول در اینجا قرار می گیرد

ویژگی دوم

توضیحات مربوط به ویژگی دوم در اینجا قرار می گیرد

ویژگی سوم

توضیحات مربوط به ویژگی سوم در اینجا قرار می گیرد

@font-face { font-family: 'Vazir'; src: url('fonts/vazir.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Vazir'; src: url('fonts/vazir-medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Vazir'; src: url('fonts/vazir-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } :root { --bg: #f9fafb; --text: #111827; --box: #fff; --primary: #0ea5e9; --shadow: #cbd5e1; --border: #e5e7eb; --success: #10b981; --warning: #f59e0b; --danger: #ef4444; } .dark-mode { --bg: #1e293b; --text: #f8fafc; --box: #334155; --primary: #38bdf8; --shadow: #475569; --border: #475569; --success: #34d399; --warning: #fbbf24; --danger: #f87171; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Vazir', sans-serif; } body { background-color: var(--bg); color: var(--text); min-height: 100vh; transition: all 0.3s ease; line-height: 1.6; } .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; } .header { padding: 1rem 0; border-bottom: 1px solid var(--border); } .header-content { display: flex; justify-content: space-between; align-items: center; } .logo { font-weight: 700; font-size: 1.5rem; } .nav-list { display: flex; list-style: none; gap: 1.5rem; } .nav-item a { text-decoration: none; color: var(--text); font-weight: 500; transition: color 0.2s; } .nav-item a:hover { color: var(--primary); } .theme-toggle { background: none; border: none; cursor: pointer; font-size: 1.2rem; color: var(--text); padding: 0.5rem; } .dark-icon { display: none; } .dark-mode .dark-icon { display: inline; } .dark-mode .light-icon { display: none; } .main { padding: 2rem 0; } .hero { text-align: center; padding: 3rem 0; } .hero h2 { font-size: 2.5rem; margin-bottom: 1rem; font-weight: 700; } .hero p { font-size: 1.2rem; margin-bottom: 2rem; color: var(--text); opacity: 0.9; } .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 3rem; } .feature-card { background-color: var(--box); border-radius: 0.5rem; padding: 1.5rem; box-shadow: 0 1px 3px 0 var(--shadow); } .feature-card h3 { font-weight: 500; margin-bottom: 0.5rem; } .btn { display: inline-block; padding: 0.75rem 1.5rem; border-radius: 0.375rem; font-weight: 500; text-align: center; text-decoration: none; cursor: pointer; transition: all 0.2s; } .btn-primary { background-color: var(--primary); color: white; border: none; } .btn-primary:hover { opacity: 0.9; } .footer { text-align: center; padding: 2rem 0; margin-top: 2rem; border-top: 1px solid var(--border); font-size: 0.9rem; } @media (max-width: 768px) { .header-content { flex-direction: column; gap: 1rem; } .nav-list { gap: 1rem; } .hero h2 { font-size: 2rem; } } document.addEventListener('DOMContentLoaded', function() { const themeToggle = document.getElementById('theme-toggle'); const body = document.body; // Check for saved theme preference const currentTheme = localStorage.getItem('theme'); if (currentTheme === 'dark') { body.classList.add('dark-mode'); } // Toggle theme themeToggle.addEventListener('click', function() { body.classList.toggle('dark-mode'); // Save theme preference const theme = body.classList.contains('dark-mode') ? 'dark' : 'light'; localStorage.setItem('theme', theme); }); // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); document.querySelector(this.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); }); }); });