diff --git a/index.html b/index.html new file mode 100644 index 0000000..8f97261 --- /dev/null +++ b/index.html @@ -0,0 +1,259 @@ + + + + + + سالمیس | نمونه‌کار + + + + + + +
+ + +
+
+

نمونه‌کار

+

سالمیس

+

+ طراحی تجربه‌های دیجیتال آرام و حرفه‌ای برای تیم‌های جاه‌طلب. از ایده تا اجرا، کمک + می‌کنم برندها شفاف، زیبا و اثرگذار دیده شوند و مخاطب را به مشتری تبدیل کنند. +

+
+ + +
+
+
+ ۱۲+ + لانچ کامل +
+
+ ٪۹۸ + رضایت مشتری +
+
+ ۲۴ساعت + زمان پاسخ‌گویی +
+
+
+
+
+ + آماده پذیرش پروژه جدید +
+

جزئیات سریع

+
    +
  • نقش: طراح محصول و توسعه‌دهنده وب
    • +
  • موقعیت: تهران، ایران
    • +
  • ایمیل: you@email.com
    • +
  • تلفن: +98 900 000 0000
    • +
  • وب‌سایت: salamis.ir
    • +
+

+ اطلاعات واقعی خودتان را جایگزین کنید تا سایت آماده انتشار شود. +

+
+
+
+ +
+
+
+

درباره من

+

+ یک طراح چندرشته‌ای هستم که استراتژی، هویت بصری و اجرای تمیز را کنار هم می‌آورم. + به تیم‌ها کمک می‌کنم محصولی فکرشده بسازند، برندشان را تقویت کنند و با مخاطب شفاف + ارتباط بگیرند. +

+
+
+ ۸+ سال + تجربه طراحی و محصول +
+
+ ۳۰+ پروژه + تحویل به تیم‌های بین‌المللی +
+
+ ۴× جایزه + تقدیر از کیفیت طراحی +
+
+
+
+
+

ماموریت من

+

ساخت تجربه‌های دیجیتال انسانی که ساده و قابل‌اعتماد باشند.

+
+
+

رویکرد من

+

شنیدن دقیق، طراحی هدفمند و تحویل دقیق با وضوح بالا.

+
+
+

ارزش‌ها

+

همکاری، صداقت و تمرکز بر کیفیت در تمام جزئیات.

+
+
+
+ +
+
+

خدمات

+

خلاصه‌ای شفاف از خروجی‌هایی که برای استارتاپ‌ها و تیم‌های در حال رشد ارائه می‌شود.

+
+
+
+

برند و هویت بصری

+

لوگو، سیستم بصری و گایدلاین برای ساخت برندی ماندگار و قابل‌شناسایی.

+ استراتژی • طراحی • لحن +
+
+

طراحی محصول

+

ریسرچ UX، فلوها، طراحی UI و پروتوتایپ برای وب و موبایل.

+ ریسرچ • UX • UI +
+
+

ساخت وب‌سایت

+

وب‌سایت‌های سریع، ریسپانسیو و قابل‌مدیریت با اجرای تمیز.

+ HTML • CSS • CMS +
+
+
+ +
+
+

پروژه‌های منتخب

+

نمونه‌های برتر خود را نمایش دهید. هر کارت می‌تواند به کیس‌استادی یا محصول زنده لینک شود.

+
+
+
+
برندینگ
+

بازطراحی هویت مدرن

+

+ بازتعریف زبان بصری برای یک استارتاپ در حال رشد؛ شفاف، حرفه‌ای و یکپارچه در تمام نقاط تماس. +

+ مشاهده کیس‌استادی ← +
+
+
طراحی محصول
+

داشبورد مالی موبایل

+

+ طراحی داشبوردی شهودی که کاربران را در کنترل هزینه‌ها و رسیدن به اهداف پس‌انداز همراهی می‌کند. +

+ مشاهده کیس‌استادی ← +
+
+
تجربه وب
+

پلتفرم نمونه‌کار

+

+ ساخت وب‌سایتی واکنش‌گرا و حرفه‌ای که تخصص را منتقل می‌کند و مشتری جذب می‌کند. +

+ مشاهده کیس‌استادی ← +
+
+
+ +
+
+

مهارت‌ها و ابزارها

+

توانمندی‌ها و نرم‌افزارهایی که پشت کار شما هستند.

+
+
+
+

طراحی

+

UX Research، UI Design، Interaction Design، Design Systems

+
+
+

توسعه

+

HTML, CSS, JavaScript, React, Webflow

+
+
+

همکاری

+

ورکشاپ، هم‌راستاسازی ذی‌نفعان، استراتژی محصول

+
+
+

ابزارها

+

Figma, Adobe CC, Notion, Jira, Google Analytics

+
+
+
+ +
+
+

فرآیند همکاری

+

مسیر شفاف همکاری تا بدانید در هر مرحله چه اتفاقی می‌افتد.

+
+
+
+ ۰۱ +

شناخت

+

درک اهداف، کاربران و فضای رقابتی.

+
+
+ ۰۲ +

طراحی

+

ساخت تجربه و پروتوتایپ‌هایی که مسئله واقعی را حل کنند.

+
+
+ ۰۳ +

تحویل

+

راه‌اندازی خروجی‌های حرفه‌ای همراه با پشتیبانی انتقال.

+
+
+
+ +
+
+

با هم چیزی بسازیم

+

+ آماده شروع پروژه هستید یا نیاز به برآورد دارید؟ چند جزئیات ارسال کنید تا سریع پاسخ بدهم. +

+
+
+ ایمیل + you@email.com +
+
+ تلفن + +98 900 000 0000 +
+
+ موقعیت + Tehran, Iran +
+
+ +
+
+
+ + + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..eada351 --- /dev/null +++ b/styles.css @@ -0,0 +1,403 @@ +:root { + color-scheme: light; + --primary: #1f8c9c; + --primary-dark: #156a76; + --background: #f3f6f6; + --surface: #ffffff; + --text: #1f2933; + --muted: #55606a; + --border: #dbe4e9; + --shadow: 0 20px 50px rgba(31, 140, 156, 0.08); +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: "Vazirmatn", sans-serif; + background: var(--background); + color: var(--text); + line-height: 1.6; + direction: rtl; + text-align: right; +} + +a { + color: inherit; + text-decoration: none; +} + +.hero { + padding: 32px 80px 64px; + background: linear-gradient(180deg, #e2f1f3 0%, var(--background) 100%); +} + +.nav { + display: flex; + align-items: center; + justify-content: space-between; + gap: 24px; + flex-direction: row-reverse; +} + +.logo { + font-weight: 700; + font-size: 1.25rem; + color: var(--primary-dark); +} + +.nav-links { + display: flex; + gap: 24px; + font-weight: 500; + color: var(--muted); + flex-direction: row-reverse; +} + +.nav-links a:hover { + color: var(--primary); +} + +.cta { + background: var(--primary); + color: #fff; + border: none; + border-radius: 999px; + padding: 12px 24px; + font-weight: 600; + box-shadow: var(--shadow); + cursor: pointer; +} + +.ghost { + background: transparent; + border: 1px solid var(--border); + color: var(--primary-dark); + border-radius: 999px; + padding: 12px 24px; + font-weight: 600; + cursor: pointer; +} + +.hero-content { + margin-top: 56px; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 48px; + align-items: center; +} + +.hero-text h1 { + font-size: clamp(2.5rem, 4vw, 3.5rem); + margin-bottom: 16px; +} + +.eyebrow { + color: var(--primary-dark); + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.1em; + font-size: 0.8rem; + margin-bottom: 12px; +} + +.subtitle { + color: var(--muted); + margin-bottom: 24px; +} + +.hero-actions { + display: flex; + flex-wrap: wrap; + gap: 12px; + margin-bottom: 32px; + justify-content: flex-start; +} + +.hero-highlights { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); + gap: 16px; +} + +.highlight-number { + font-size: 1.6rem; + font-weight: 700; + color: var(--primary-dark); + display: block; +} + +.highlight-label { + color: var(--muted); + font-size: 0.9rem; +} + +.hero-card { + background: var(--surface); + border-radius: 24px; + padding: 32px; + box-shadow: var(--shadow); + border: 1px solid var(--border); +} + +.availability { + display: inline-flex; + align-items: center; + gap: 8px; + padding: 6px 12px; + border-radius: 999px; + background: rgba(31, 140, 156, 0.1); + color: var(--primary-dark); + font-size: 0.85rem; + font-weight: 600; + margin-bottom: 16px; +} + +.availability .dot { + width: 8px; + height: 8px; + border-radius: 50%; + background: var(--primary); +} + +.hero-card h2 { + margin-bottom: 16px; +} + +.hero-card ul { + list-style: none; + display: grid; + gap: 8px; + margin-bottom: 16px; + color: var(--muted); +} + +.hero-card li strong { + margin-left: 4px; +} + +.card-note { + font-size: 0.85rem; + color: var(--muted); +} + +.section { + padding: 72px 80px; +} + +.section-heading { + display: flex; + align-items: flex-end; + justify-content: space-between; + gap: 24px; + margin-bottom: 32px; + text-align: right; +} + +.section-heading p { + max-width: 360px; + color: var(--muted); +} + +.about { + display: grid; + grid-template-columns: minmax(260px, 1fr) minmax(280px, 1.3fr); + gap: 48px; +} + +.about p { + color: var(--muted); + margin-top: 12px; +} + +.stats { + margin-top: 24px; + display: grid; + gap: 16px; +} + +.stats strong { + display: block; + font-size: 1.1rem; + color: var(--primary-dark); +} + +.stats span { + color: var(--muted); + font-size: 0.9rem; +} + +.about-grid { + display: grid; + gap: 16px; +} + +.about-card, +.project-card, +.skill-card, +.contact-card { + background: var(--surface); + border-radius: 20px; + padding: 24px; + border: 1px solid var(--border); + box-shadow: 0 12px 24px rgba(15, 45, 65, 0.04); +} + +.services { + background: #eef6f7; +} + +.service-grid { + display: grid; + gap: 20px; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); +} + +.service-card { + background: var(--surface); + border-radius: 20px; + padding: 24px; + border: 1px solid var(--border); + box-shadow: 0 12px 24px rgba(15, 45, 65, 0.04); +} + +.service-card p { + color: var(--muted); + margin: 12px 0 16px; +} + +.service-meta { + font-size: 0.85rem; + color: var(--primary-dark); + font-weight: 600; +} + +.project-grid { + display: grid; + gap: 20px; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); +} + +.project-tag { + font-size: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.1em; + color: var(--primary-dark); + font-weight: 600; + margin-bottom: 12px; +} + +.project-card p { + color: var(--muted); + margin: 12px 0 20px; +} + +.project-card a { + color: var(--primary); + font-weight: 600; +} + +.skills-grid { + display: grid; + gap: 16px; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); +} + +.skill-card p { + color: var(--muted); + margin-top: 8px; +} + +.contact { + background: #e6f1f2; +} + +.contact-card { + display: grid; + gap: 20px; + max-width: 720px; + margin: 0 auto; + text-align: center; +} + +.contact-details { + display: grid; + gap: 16px; + grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); + color: var(--muted); +} + +.contact-details strong { + display: block; + color: var(--text); + margin-top: 6px; +} + +.footer { + padding: 32px 80px; + display: flex; + flex-wrap: wrap; + gap: 24px; + align-items: center; + justify-content: space-between; + color: var(--muted); +} + +.footer-links { + display: flex; + gap: 20px; +} + +.process { + background: #f7faf9; +} + +.process-steps { + display: grid; + gap: 24px; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); +} + +.process-steps div { + background: var(--surface); + border-radius: 20px; + padding: 24px; + border: 1px solid var(--border); + box-shadow: 0 12px 24px rgba(15, 45, 65, 0.04); +} + +.step-number { + display: inline-block; + font-weight: 700; + color: var(--primary-dark); + margin-bottom: 12px; +} + +@media (max-width: 900px) { + .hero, + .section, + .footer { + padding: 32px 24px; + } + + .nav { + flex-direction: column; + align-items: flex-start; + } + + .nav-links { + flex-wrap: wrap; + } + + .section-heading { + flex-direction: column; + align-items: flex-start; + } + + .about { + grid-template-columns: 1fr; + } +}