alisaza
e1eaf5eff5
Extract admin dashboard from ghabilee-frontend2 into a dedicated Next.js app for backoffice.ghabilee.ir (no SEO indexing / Clarity).
469 lines
33 KiB
HTML
469 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">
|
||
<title>هنر و فرهنگ | قبیله</title>
|
||
<style>
|
||
:root{
|
||
--bg:#f4f1ea;
|
||
--surface:#fffdf8;
|
||
--ink:#171714;
|
||
--muted:#6f6b63;
|
||
--line:#d9d3c7;
|
||
--accent:#da5a32;
|
||
--accent-dark:#ad3e1e;
|
||
--dark:#1e211d;
|
||
--soft:#e9e2d5;
|
||
--radius:24px;
|
||
--shadow:0 12px 34px rgba(31,31,27,.08);
|
||
--max:1200px;
|
||
}
|
||
*{box-sizing:border-box}
|
||
html{scroll-behavior:smooth}
|
||
body{
|
||
margin:0;
|
||
background:var(--bg);
|
||
color:var(--ink);
|
||
font-family:Tahoma, Arial, sans-serif;
|
||
line-height:1.9;
|
||
}
|
||
a{color:inherit;text-decoration:none}
|
||
button,input,select{font:inherit}
|
||
.container{width:min(calc(100% - 40px),var(--max));margin:auto}
|
||
.topbar{
|
||
position:sticky;top:0;z-index:50;
|
||
background:rgba(244,241,234,.92);
|
||
backdrop-filter:blur(16px);
|
||
border-bottom:1px solid rgba(217,211,199,.8);
|
||
}
|
||
.nav{
|
||
min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px
|
||
}
|
||
.brand{font-size:26px;font-weight:900;letter-spacing:-1px}
|
||
.brand-mark{
|
||
display:inline-flex;width:14px;height:14px;border-radius:50%;background:var(--accent);
|
||
margin-left:8px;box-shadow:18px 0 0 -3px var(--ink)
|
||
}
|
||
.nav-links{display:flex;align-items:center;gap:28px;font-size:14px}
|
||
.nav-actions{display:flex;align-items:center;gap:10px}
|
||
.btn{
|
||
border:0;border-radius:999px;padding:11px 18px;cursor:pointer;
|
||
transition:.2s ease;display:inline-flex;align-items:center;justify-content:center;gap:7px
|
||
}
|
||
.btn-primary{background:var(--ink);color:white}
|
||
.btn-primary:hover{transform:translateY(-1px);background:#000}
|
||
.btn-outline{border:1px solid var(--line);background:transparent}
|
||
.btn-outline:hover{background:var(--surface)}
|
||
.btn-accent{background:var(--accent);color:#fff}
|
||
.btn-accent:hover{background:var(--accent-dark)}
|
||
.breadcrumb{font-size:12px;color:var(--muted);padding-top:26px}
|
||
.hero{
|
||
display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center;
|
||
padding:42px 0 54px
|
||
}
|
||
.eyebrow{font-size:13px;color:var(--accent-dark);font-weight:700;margin-bottom:8px}
|
||
h1{font-size:clamp(42px,6vw,78px);line-height:1.08;margin:0 0 18px;letter-spacing:-3px}
|
||
.hero h2{font-size:24px;line-height:1.5;margin:0 0 14px;font-weight:800}
|
||
.hero p{font-size:17px;color:#45423d;margin:0 0 26px;max-width:680px}
|
||
.hero-actions{display:flex;gap:10px;flex-wrap:wrap}
|
||
.hero-art{
|
||
min-height:420px;border-radius:36px;position:relative;overflow:hidden;
|
||
background:
|
||
radial-gradient(circle at 70% 32%, rgba(218,90,50,.95) 0 8%, transparent 8.5%),
|
||
radial-gradient(circle at 37% 65%, rgba(244,241,234,.9) 0 11%, transparent 11.5%),
|
||
linear-gradient(145deg,#292f29 0 38%,#c8b08d 38% 62%,#7a3b27 62%);
|
||
box-shadow:var(--shadow);
|
||
}
|
||
.hero-art:before,.hero-art:after{
|
||
content:"";position:absolute;border:1px solid rgba(255,255,255,.36);border-radius:50%
|
||
}
|
||
.hero-art:before{width:260px;height:260px;left:40px;top:48px}
|
||
.hero-art:after{width:390px;height:390px;right:-120px;bottom:-150px}
|
||
.hero-note{
|
||
position:absolute;left:24px;bottom:22px;background:rgba(255,253,248,.92);
|
||
padding:12px 14px;border-radius:16px;max-width:230px;font-size:13px;
|
||
box-shadow:0 8px 30px rgba(0,0,0,.12)
|
||
}
|
||
|
||
.events{padding:52px 0 80px}
|
||
.section-head{
|
||
display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:22px
|
||
}
|
||
.section-head h2{font-size:34px;line-height:1.35;margin:0 0 5px;letter-spacing:-1px}
|
||
.section-head p{margin:0;color:var(--muted)}
|
||
.count{font-size:13px;color:var(--muted)}
|
||
.filters{
|
||
display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;
|
||
margin-bottom:26px
|
||
}
|
||
.search{
|
||
display:flex;align-items:center;gap:10px;background:var(--surface);
|
||
border:1px solid var(--line);border-radius:18px;padding:0 16px;height:54px
|
||
}
|
||
.search input{width:100%;border:0;outline:0;background:transparent;color:var(--ink)}
|
||
.filter-group{display:flex;gap:8px;flex-wrap:wrap}
|
||
.chip{
|
||
border:1px solid var(--line);background:var(--surface);border-radius:999px;
|
||
padding:10px 14px;cursor:pointer;font-size:13px
|
||
}
|
||
.chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}
|
||
.sort-row{
|
||
display:flex;justify-content:space-between;align-items:center;margin:12px 0 20px;font-size:13px
|
||
}
|
||
.sort-row select{
|
||
border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:8px 12px
|
||
}
|
||
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
|
||
.card{
|
||
display:block;background:var(--surface);border-radius:22px;overflow:hidden;
|
||
border:1px solid rgba(217,211,199,.9);transition:.25s ease
|
||
}
|
||
.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
|
||
.thumb{aspect-ratio:16/10;position:relative;overflow:hidden}
|
||
.thumb:after{
|
||
content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.25),transparent 50%)
|
||
}
|
||
.t1{background:linear-gradient(135deg,#7a3227,#e4a86f)}
|
||
.t2{background:linear-gradient(135deg,#252933,#9f6d64)}
|
||
.t3{background:linear-gradient(135deg,#172f2a,#81a77e)}
|
||
.t4{background:linear-gradient(135deg,#6d604e,#d4c2a2)}
|
||
.t5{background:linear-gradient(135deg,#b95539,#f0d69f)}
|
||
.t6{background:linear-gradient(135deg,#213245,#829db3)}
|
||
.t7{background:linear-gradient(135deg,#3c2d30,#bb8e84)}
|
||
.t8{background:linear-gradient(135deg,#706338,#ddd39e)}
|
||
.t9{background:linear-gradient(135deg,#313a29,#a4b48b)}
|
||
.t10{background:linear-gradient(135deg,#462c5c,#b697c8)}
|
||
.t11{background:linear-gradient(135deg,#183943,#86b6b9)}
|
||
.t12{background:linear-gradient(135deg,#653f2b,#e3b48d)}
|
||
.t13{background:linear-gradient(135deg,#3d3d3d,#a7a7a7)}
|
||
.t14{background:linear-gradient(135deg,#78512f,#d1a767)}
|
||
.t15{background:linear-gradient(135deg,#4b2740,#d68eaf)}
|
||
.thumb-symbol{
|
||
position:absolute;inset:0;display:grid;place-items:center;font-size:54px;
|
||
color:rgba(255,255,255,.86);font-weight:900;z-index:1
|
||
}
|
||
.badge{
|
||
position:absolute;top:14px;right:14px;z-index:2;background:rgba(255,253,248,.92);
|
||
border-radius:999px;padding:6px 10px;font-size:11px
|
||
}
|
||
.save{
|
||
position:absolute;top:14px;left:14px;z-index:2;width:34px;height:34px;border-radius:50%;
|
||
border:0;background:rgba(255,253,248,.92);font-size:18px;cursor:pointer
|
||
}
|
||
.card-body{padding:18px}
|
||
.card-title{font-size:18px;line-height:1.55;font-weight:800;margin-bottom:5px}
|
||
.card-desc{font-size:13px;color:var(--muted);min-height:28px}
|
||
.meta{margin-top:14px;display:grid;gap:5px;font-size:12px;color:#49453f}
|
||
.card-foot{
|
||
display:flex;justify-content:space-between;align-items:center;
|
||
padding-top:14px;margin-top:14px;border-top:1px solid #ece6da
|
||
}
|
||
.price{font-weight:800;font-size:13px}
|
||
.host{font-size:11px;color:var(--muted)}
|
||
.pagination{
|
||
display:flex;justify-content:center;align-items:center;gap:7px;margin-top:38px
|
||
}
|
||
.page{
|
||
width:42px;height:42px;border-radius:12px;border:1px solid var(--line);
|
||
background:var(--surface);display:grid;place-items:center
|
||
}
|
||
.page.active{background:var(--ink);color:#fff}
|
||
|
||
.article-wrap{
|
||
background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
|
||
padding:84px 0
|
||
}
|
||
.article{
|
||
max-width:820px;margin:auto
|
||
}
|
||
.article-kicker{color:var(--accent-dark);font-size:13px;font-weight:800}
|
||
.article h2{font-size:40px;line-height:1.35;margin:7px 0 24px;letter-spacing:-1.5px}
|
||
.article h3{font-size:25px;line-height:1.5;margin:52px 0 14px}
|
||
.article p{font-size:16px;color:#3f3b36;margin:0 0 18px}
|
||
.article blockquote{
|
||
margin:42px 0;padding:28px;border-radius:22px;background:var(--soft);
|
||
font-size:23px;font-weight:800;line-height:1.7;border:0
|
||
}
|
||
.article ul{padding-right:22px;color:#3f3b36}
|
||
.article li{margin-bottom:8px}
|
||
.reading-nav{
|
||
border:1px solid var(--line);background:#faf7f0;border-radius:20px;padding:22px;margin:34px 0 52px
|
||
}
|
||
.reading-nav strong{display:block;margin-bottom:8px}
|
||
.reading-nav a{display:inline-block;margin:3px 0 3px 16px;font-size:13px;color:#4f4b44}
|
||
.host-cta{
|
||
width:min(calc(100% - 40px),var(--max));margin:80px auto;
|
||
display:grid;grid-template-columns:1fr .85fr;gap:44px;align-items:center;
|
||
background:var(--dark);color:#fff;border-radius:34px;padding:46px
|
||
}
|
||
.host-cta h2{font-size:38px;line-height:1.4;margin:0 0 14px}
|
||
.host-cta p{color:#d8d6d0;margin:0 0 22px}
|
||
.host-points{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}
|
||
.host-point{border:1px solid #41463f;border-radius:14px;padding:11px 13px;font-size:13px}
|
||
.host-art{
|
||
min-height:320px;border-radius:24px;background:
|
||
radial-gradient(circle at 50% 50%,#ef784b 0 13%,transparent 13.5%),
|
||
repeating-radial-gradient(circle at 50% 50%,transparent 0 35px,rgba(255,255,255,.18) 36px 37px),
|
||
linear-gradient(135deg,#313a31,#1c1f1b);
|
||
}
|
||
.faq{width:min(calc(100% - 40px),900px);margin:0 auto 90px}
|
||
.faq h2{font-size:34px;margin-bottom:18px}
|
||
details{
|
||
border-top:1px solid var(--line);padding:18px 0
|
||
}
|
||
details:last-child{border-bottom:1px solid var(--line)}
|
||
summary{cursor:pointer;font-weight:800;list-style:none}
|
||
summary::-webkit-details-marker{display:none}
|
||
details p{color:var(--muted);font-size:14px;margin:12px 0 0}
|
||
footer{background:#171714;color:#ddd8cd;padding:48px 0}
|
||
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:30px}
|
||
footer h3{margin-top:0;color:#fff}
|
||
footer p, footer a{font-size:13px;color:#aaa69d}
|
||
.copyright{border-top:1px solid #31312d;margin-top:32px;padding-top:20px;font-size:11px;color:#77756e}
|
||
@media(max-width:900px){
|
||
.nav-links{display:none}
|
||
.hero{grid-template-columns:1fr;gap:30px;padding-top:28px}
|
||
.hero-art{min-height:300px}
|
||
.filters{grid-template-columns:1fr}
|
||
.grid{grid-template-columns:repeat(2,1fr)}
|
||
.host-cta{grid-template-columns:1fr}
|
||
}
|
||
@media(max-width:620px){
|
||
.container{width:min(calc(100% - 24px),var(--max))}
|
||
.nav{min-height:64px}
|
||
.nav-actions .btn-outline{display:none}
|
||
.breadcrumb{padding-top:18px}
|
||
.hero{padding:24px 0 38px}
|
||
h1{font-size:48px;letter-spacing:-2px}
|
||
.hero h2{font-size:21px}
|
||
.hero p{font-size:14px}
|
||
.hero-art{min-height:240px;border-radius:24px}
|
||
.events{padding:34px 0 56px}
|
||
.section-head{display:block}
|
||
.section-head h2{font-size:28px}
|
||
.count{margin-top:5px}
|
||
.filter-group{overflow-x:auto;flex-wrap:nowrap;padding-bottom:5px}
|
||
.chip{white-space:nowrap}
|
||
.sort-row{gap:10px}
|
||
.grid{grid-template-columns:1fr;gap:18px}
|
||
.article-wrap{padding:56px 0}
|
||
.article{width:min(calc(100% - 28px),820px)}
|
||
.article h2{font-size:31px}
|
||
.article h3{font-size:22px}
|
||
.article blockquote{font-size:19px;padding:22px}
|
||
.host-cta{width:calc(100% - 24px);margin:52px auto;padding:28px;border-radius:24px}
|
||
.host-cta h2{font-size:29px}
|
||
.host-points{grid-template-columns:1fr}
|
||
.faq{width:calc(100% - 28px);margin-bottom:60px}
|
||
.footer-grid{grid-template-columns:1fr}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header class="topbar">
|
||
<div class="container nav">
|
||
<a class="brand" href="#"><span class="brand-mark"></span>قبیله</a>
|
||
<nav class="nav-links">
|
||
<a href="#events">کشف رویدادها</a>
|
||
<a href="#article">درباره این دسته</a>
|
||
<a href="#host">برگزاری رویداد</a>
|
||
</nav>
|
||
<div class="nav-actions">
|
||
<a class="btn btn-outline" href="#events">جستوجو</a>
|
||
<a class="btn btn-primary" href="#">ورود</a>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<div class="container breadcrumb">خانه ← رویدادها ← هنر و فرهنگ</div>
|
||
|
||
<section class="container hero">
|
||
<div>
|
||
<div class="eyebrow">رویدادهای هنر و فرهنگ</div>
|
||
<h1>هنر و فرهنگ</h1>
|
||
<h2>بعضی جمعها دور یک داستان شروع میشن.</h2>
|
||
<p>گاهی یک نمایشگاه، یک اجرای زنده یا یک گفتوگوی ساده بهانهای میشود برای بیرون آمدن از روزمرگی، دیدن چیزی تازه و پیدا کردن آدمهایی که همان چیزهایی را دوست دارند که تو دوست داری.</p>
|
||
<div class="hero-actions">
|
||
<a class="btn btn-primary" href="#events">رویدادها رو ببین ↓</a>
|
||
<a class="btn btn-outline" href="#host">رویدادت رو برگزار کن</a>
|
||
</div>
|
||
</div>
|
||
<div class="hero-art" aria-label="فضای تصویری هنر و فرهنگ">
|
||
<div class="hero-note">هنر فقط چیزی نیست که میبینی؛ بخشی از ماجرا آدمهایین که کنارت تجربهش میکنن.</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="events" class="container events">
|
||
<div class="section-head">
|
||
<div>
|
||
<h2>این روزها کجا میشه رفت؟</h2>
|
||
<p>رویدادهای هنر و فرهنگ که الان یا بهزودی برگزار میشوند.</p>
|
||
</div>
|
||
<div class="count">۱۵ رویداد</div>
|
||
</div>
|
||
|
||
<div class="filters">
|
||
<label class="search">
|
||
<span>⌕</span>
|
||
<input placeholder="دنبال یه اجرا، نمایشگاه یا تجربه خاصی میگردی؟">
|
||
</label>
|
||
<button class="btn btn-outline">فیلترها</button>
|
||
</div>
|
||
|
||
<div class="filter-group" aria-label="فیلترهای سریع">
|
||
<button class="chip active">همه</button>
|
||
<button class="chip">امروز</button>
|
||
<button class="chip">فردا</button>
|
||
<button class="chip">آخر هفته</button>
|
||
<button class="chip">رایگان</button>
|
||
<button class="chip">نزدیک من</button>
|
||
</div>
|
||
|
||
<div class="sort-row">
|
||
<span>۱۵ نتیجه پیدا شد</span>
|
||
<label>مرتبسازی:
|
||
<select>
|
||
<option>پیشنهاد قبیله</option>
|
||
<option>نزدیکترین زمان</option>
|
||
<option>جدیدترین</option>
|
||
<option>محبوبترین</option>
|
||
</select>
|
||
</label>
|
||
</div>
|
||
|
||
<div class="grid">
|
||
<a class="card" href="#"><div class="thumb t1"><span class="badge">پنجشنبه</span><button class="save">♡</button><div class="thumb-symbol">●</div></div><div class="card-body"><div class="card-title">نمایشگاه «شهر بعد از تاریکی»</div><div class="card-desc">نمایشگاه عکاسی شهری</div><div class="meta"><span>۱۸ شهریور · ۱۸:۰۰</span><span>خانه هنرمندان</span></div><div class="card-foot"><span class="price">از ۲۵۰ هزار تومان</span><span class="host">استودیو قاب</span></div></div></a>
|
||
<a class="card" href="#"><div class="thumb t2"><span class="badge">جمعه</span><button class="save">♡</button><div class="thumb-symbol">✦</div></div><div class="card-body"><div class="card-title">شب شعر؛ چند دقیقه بعد از نیمهشب</div><div class="card-desc">شعر، موسیقی و یک جمع کوچک</div><div class="meta"><span>۱۹ شهریور · ۲۰:۰۰</span><span>کافه روشن</span></div><div class="card-foot"><span class="price">۱۸۰ هزار تومان</span><span class="host">جمع واژهها</span></div></div></a>
|
||
<a class="card" href="#"><div class="thumb t3"><span class="badge">شنبه</span><button class="save">♡</button><div class="thumb-symbol">≈</div></div><div class="card-body"><div class="card-title">اجرای زنده؛ صداهای یک اتاق</div><div class="card-desc">اجرای مستقل موسیقی</div><div class="meta"><span>۲۰ شهریور · ۱۹:۳۰</span><span>استودیو شماره ۴</span></div><div class="card-foot"><span class="price">از ۳۲۰ هزار تومان</span><span class="host">خانه صدا</span></div></div></a>
|
||
<a class="card" href="#"><div class="thumb t4"><span class="badge">یکشنبه</span><button class="save">♡</button><div class="thumb-symbol">▣</div></div><div class="card-body"><div class="card-title">یک عصر با سینمای عباس کیارستمی</div><div class="card-desc">تماشا و گفتوگو درباره سینما</div><div class="meta"><span>۲۱ شهریور · ۱۷:۰۰</span><span>خانه فیلم</span></div><div class="card-foot"><span class="price">رایگان</span><span class="host">جمع سینما</span></div></div></a>
|
||
<a class="card" href="#"><div class="thumb t5"><span class="badge">دوشنبه</span><button class="save">♡</button><div class="thumb-symbol">✺</div></div><div class="card-body"><div class="card-title">نقاشی بدون بلد بودن</div><div class="card-desc">برای کسانی که فقط میخواهند شروع کنند</div><div class="meta"><span>۲۲ شهریور · ۱۸:۳۰</span><span>کارگاه هفت</span></div><div class="card-foot"><span class="price">۲۹۰ هزار تومان</span><span class="host">سارا نیکپی</span></div></div></a>
|
||
<a class="card" href="#"><div class="thumb t6"><span class="badge">سهشنبه</span><button class="save">♡</button><div class="thumb-symbol">⌁</div></div><div class="card-body"><div class="card-title">گالریگردی در مرکز شهر</div><div class="card-desc">سه گالری، یک مسیر و یک عصر متفاوت</div><div class="meta"><span>۲۳ شهریور · ۱۶:۰۰</span><span>مرکز شهر</span></div><div class="card-foot"><span class="price">۲۲۰ هزار تومان</span><span class="host">پیادهگرد</span></div></div></a>
|
||
<a class="card" href="#"><div class="thumb t7"><span class="badge">چهارشنبه</span><button class="save">♡</button><div class="thumb-symbol">◐</div></div><div class="card-body"><div class="card-title">پرفورمنس «بدن و شهر»</div><div class="card-desc">یک تجربه نمایشی نزدیک و بیواسطه</div><div class="meta"><span>۲۴ شهریور · ۲۰:۳۰</span><span>پلتفرم ۲۸</span></div><div class="card-foot"><span class="price">۳۶۰ هزار تومان</span><span class="host">گروه کژ</span></div></div></a>
|
||
<a class="card" href="#"><div class="thumb t8"><span class="badge">پنجشنبه</span><button class="save">♡</button><div class="thumb-symbol">△</div></div><div class="card-body"><div class="card-title">داستانخوانی؛ روایتهای ناتمام</div><div class="card-desc">داستان کوتاه، چای و گفتوگو</div><div class="meta"><span>۲۵ شهریور · ۱۹:۰۰</span><span>خانه ادبیات</span></div><div class="card-foot"><span class="price">۱۵۰ هزار تومان</span><span class="host">روایت نو</span></div></div></a>
|
||
<a class="card" href="#"><div class="thumb t9"><span class="badge">جمعه</span><button class="save">♡</button><div class="thumb-symbol">⌂</div></div><div class="card-body"><div class="card-title">تهران از پشت پنجرههای قدیمی</div><div class="card-desc">گردش فرهنگی در چند خانه تاریخی</div><div class="meta"><span>۲۶ شهریور · ۱۰:۰۰</span><span>عودلاجان</span></div><div class="card-foot"><span class="price">۳۱۰ هزار تومان</span><span class="host">کوچهگرد</span></div></div></a>
|
||
<a class="card" href="#"><div class="thumb t10"><span class="badge">شنبه</span><button class="save">♡</button><div class="thumb-symbol">◎</div></div><div class="card-body"><div class="card-title">شنیدن یک آلبوم از اول تا آخر</div><div class="card-desc">شنیدن جمعی و گفتوگوی بعد از موسیقی</div><div class="meta"><span>۲۷ شهریور · ۲۰:۰۰</span><span>اتاق صدا</span></div><div class="card-foot"><span class="price">۲۰۰ هزار تومان</span><span class="host">موج</span></div></div></a>
|
||
<a class="card" href="#"><div class="thumb t11"><span class="badge">یکشنبه</span><button class="save">♡</button><div class="thumb-symbol">✧</div></div><div class="card-body"><div class="card-title">معماری و حافظه شهر</div><div class="card-desc">یک نشست برای دیدن شهر از زاویهای دیگر</div><div class="meta"><span>۲۸ شهریور · ۱۸:۰۰</span><span>خانه گفتگو</span></div><div class="card-foot"><span class="price">رایگان</span><span class="host">خط شهر</span></div></div></a>
|
||
<a class="card" href="#"><div class="thumb t12"><span class="badge">دوشنبه</span><button class="save">♡</button><div class="thumb-symbol">□</div></div><div class="card-body"><div class="card-title">سفال برای یک عصر</div><div class="card-desc">ساختن با دست، بدون تجربه قبلی</div><div class="meta"><span>۲۹ شهریور · ۱۷:۳۰</span><span>کارگاه خاک</span></div><div class="card-foot"><span class="price">۴۲۰ هزار تومان</span><span class="host">استودیو خاک</span></div></div></a>
|
||
<a class="card" href="#"><div class="thumb t13"><span class="badge">سهشنبه</span><button class="save">♡</button><div class="thumb-symbol">▰</div></div><div class="card-body"><div class="card-title">نمایش فیلم کوتاه؛ پنج نگاه</div><div class="card-desc">پنج فیلم و گفتوگو با سازندگان</div><div class="meta"><span>۳۰ شهریور · ۱۹:۳۰</span><span>سالن کوچک</span></div><div class="card-foot"><span class="price">۲۶۰ هزار تومان</span><span class="host">قاب کوتاه</span></div></div></a>
|
||
<a class="card" href="#"><div class="thumb t14"><span class="badge">چهارشنبه</span><button class="save">♡</button><div class="thumb-symbol">✣</div></div><div class="card-body"><div class="card-title">خط و کاغذ؛ تجربه خوشنویسی آزاد</div><div class="card-desc">یک جلسه آرام برای دست و ذهن</div><div class="meta"><span>۳۱ شهریور · ۱۸:۰۰</span><span>خانه کاغذ</span></div><div class="card-foot"><span class="price">۳۴۰ هزار تومان</span><span class="host">الهام راد</span></div></div></a>
|
||
<a class="card" href="#"><div class="thumb t15"><span class="badge">پنجشنبه</span><button class="save">♡</button><div class="thumb-symbol">∞</div></div><div class="card-body"><div class="card-title">کتابهایی که ما را عوض کردند</div><div class="card-desc">گفتوگو درباره کتابهایی که ماندند</div><div class="meta"><span>۱ مهر · ۱۹:۰۰</span><span>کافه کتاب</span></div><div class="card-foot"><span class="price">رایگان</span><span class="host">جمع خواندن</span></div></div></a>
|
||
</div>
|
||
|
||
<nav class="pagination" aria-label="صفحهبندی">
|
||
<a class="page" href="#">←</a>
|
||
<a class="page active" href="#">۱</a>
|
||
<a class="page" href="#">۲</a>
|
||
<a class="page" href="#">۳</a>
|
||
<a class="page" href="#">۴</a>
|
||
<a class="page" href="#">→</a>
|
||
</nav>
|
||
</section>
|
||
|
||
<section id="article" class="article-wrap">
|
||
<article class="article">
|
||
<div class="article-kicker">بیشتر درباره هنر و فرهنگ</div>
|
||
<h2>یک بهانه قدیمی برای دور هم جمع شدن</h2>
|
||
<p>خیلی قبلتر از گالری، سالن اجرا، سینما و کافه هم آدمها دور داستان، موسیقی، تصویر و روایت جمع میشدند. شکل این جمعها عوض شده، اما میل ما به تجربه کردن هنر کنار دیگران هنوز همان است.</p>
|
||
<p>امروز ممکن است این جمع دور یک نمایشگاه عکاسی شکل بگیرد، فردا در یک سالن کوچک تئاتر و هفته بعد در یک کافه برای شنیدن شعر، دیدن فیلم یا حرف زدن درباره یک کتاب.</p>
|
||
<p>گاهی برای دیدن یک نمایشگاه میروی و با هنرمندی آشنا میشوی که تا دیروز اسمش را هم نشنیده بودی. گاهی برای یک اجرای زنده بلیط میگیری و چند ساعت کنار آدمهایی قرار میگیری که سلیقهای نزدیک به تو دارند. بعضی وقتها هم فقط از سر کنجکاوی وارد یک جمع میشوی و با چیزی روبهرو میشوی که تا قبل از آن نمیشناختی.</p>
|
||
|
||
<div class="reading-nav">
|
||
<strong>توی این بخش میخونی:</strong>
|
||
<a href="#why">چرا در یک رویداد هنری شرکت کنیم؟</a>
|
||
<a href="#alone">اگر تنها باشم چی؟</a>
|
||
<a href="#choose">چطور رویداد مناسبم را پیدا کنم؟</a>
|
||
</div>
|
||
|
||
<h3 id="why">چرا در یک رویداد هنری یا فرهنگی شرکت کنیم؟</h3>
|
||
<p>قرار نیست همیشه دلیل بزرگی برای بیرون رفتن داشته باشیم. گاهی فقط میخواهی شب شبیه شبهای قبل نباشد؛ چیزی ببینی که قبلاً ندیدهای، موسیقی متفاوتی بشنوی، درباره موضوعی حرف بزنی که در زندگی روزمره کمتر فرصت حرف زدن دربارهاش پیش میآید یا با آدمهایی روبهرو شوی که همان چیزها برایشان جالب است.</p>
|
||
<p>رویدادهای هنری و فرهنگی میتوانند فرصتی باشند برای کشف تجربههای تازه، آشنا شدن با آثار و آدمهای جدید، فاصله گرفتن از برنامههای تکراری و پیدا کردن علاقههایی که شاید تا امروز فرصتی برای امتحان کردنشان نداشتهای.</p>
|
||
|
||
<blockquote>بعضی وقتها یک شب خوب فقط با این جمله شروع میشه: «بریم ببینیم چه خبره.»</blockquote>
|
||
|
||
<h3>آیا برای شرکت در رویدادهای هنری باید چیزی از هنر بدانم؟</h3>
|
||
<p>نه. برای رفتن به یک نمایشگاه لازم نیست نقاش باشی، برای شرکت در شب شعر لازم نیست شاعر باشی و برای یک نشست سینمایی هم لازم نیست تاریخ سینما را از بر باشی.</p>
|
||
<p>بخش زیادی از رویدادهای هنر و فرهنگ برای آدمهایی ساخته میشوند که فقط علاقهمند یا کنجکاوند. اگر یک رویداد نیاز به دانش، مهارت یا پیشنیاز خاصی داشته باشد، برگزارکننده آن را در توضیحات رویداد مشخص میکند.</p>
|
||
|
||
<h3 id="alone">اگر تنها باشم، میتوانم در یک رویداد شرکت کنم؟</h3>
|
||
<p>حتماً لازم نیست برای هر تجربهای از قبل همراه داشته باشی. خیلی از رویدادها محیط طبیعیتری برای آشنا شدن با آدمهای تازه هستند، چون کسانی که آنجا حضور دارند از قبل یک نقطه مشترک دارند: همه برای دیدن، شنیدن یا تجربه کردن یک موضوع مشخص آمدهاند.</p>
|
||
<p>لازم نیست حتماً با کسی دوست شوی یا وارد گفتوگوی طولانی شوی. حتی حضور در یک جمع تازه، بدون هیچ انتظار دیگری، میتواند تجربه متفاوتی باشد.</p>
|
||
|
||
<h3 id="choose">چطور یک رویداد هنری مناسب خودم پیدا کنم؟</h3>
|
||
<p>اول از خودت بپرس این بار دنبال چه حالوهوایی هستی. میخواهی چیزی ببینی یا چیزی بسازی؟ دنبال یک اجرای زندهای یا یک جمع کوچک برای گفتوگو؟ دوست داری چند ساعت آرام در یک نمایشگاه بگردی یا در تجربهای مشارکتی حضور داشته باشی؟</p>
|
||
<p>موضوع رویداد، تصاویر، توضیحات برگزارکننده، زمان، محل برگزاری، قیمت و نوع برنامه میتوانند به انتخاب کمک کنند. اما بعضی وقتها هم لازم نیست انتخاب را خیلی پیچیده کنی.</p>
|
||
|
||
<h3>رویدادهای کوچک هم ارزش رفتن دارند؟</h3>
|
||
<p>بزرگ بودن یک رویداد الزاماً به معنی بهتر بودن آن نیست. گاهی بهترین تجربهها در یک جمع ده یا بیست نفره اتفاق میافتند؛ جایی که میتوانی راحتتر با برگزارکننده یا آدمهای دیگر ارتباط بگیری و حس کنی واقعاً بخشی از آن جمع هستی.</p>
|
||
|
||
<h3>چرا شناخت برگزارکننده مهم است؟</h3>
|
||
<p>برگزارکننده یا همان میزبان، بخش مهمی از تجربه هر رویداد است. او تصمیم گرفته چه آدمهایی را دور چه موضوعی جمع کند، برنامه چطور پیش برود و شرکتکنندگان قرار است چه چیزی را تجربه کنند.</p>
|
||
<p>پیش از انتخاب یک رویداد میتوانی اطلاعات برگزارکننده، توضیحات برنامه و رویدادهایی را که قبلاً برگزار کرده بررسی کنی تا تصویر روشنتری از تجربه پیش رو داشته باشی.</p>
|
||
</article>
|
||
</section>
|
||
|
||
<section id="host" class="host-cta">
|
||
<div>
|
||
<div class="eyebrow" style="color:#f19b7c">برای میزبانها</div>
|
||
<h2>این طرف ماجرا تو میزبان باش.</h2>
|
||
<p>یک نمایشگاه کوچک، اجرای مستقل، نشست پانزدهنفره یا یک تجربه تازه؛ برای شروع لازم نیست جمع بزرگی داشته باشی. تو چیزی میسازی که ارزش دور هم جمع شدن دارد. قبیله کمک میکند آدمها پیدایش کنند.</p>
|
||
<div class="host-points">
|
||
<div class="host-point">رویدادت رو معرفی کن</div>
|
||
<div class="host-point">ثبتنامها رو یکجا داشته باش</div>
|
||
<div class="host-point">بلیط بفروش</div>
|
||
<div class="host-point">با شرکتکنندهها در ارتباط باش</div>
|
||
</div>
|
||
<a class="btn btn-accent" href="#">رویدادت رو بساز</a>
|
||
</div>
|
||
<div class="host-art"></div>
|
||
</section>
|
||
|
||
<section class="faq">
|
||
<h2>پرسشهای رایج</h2>
|
||
<details open>
|
||
<summary>چه برنامههایی در دسته هنر و فرهنگ قرار میگیرند؟</summary>
|
||
<p>نمایشگاه، گالریگردی، تئاتر، موسیقی و اجرای زنده، شب شعر، رونمایی کتاب، نشست فرهنگی، کارگاه هنری، موزهگردی و تجربههای مستقل و ترکیبی.</p>
|
||
</details>
|
||
<details>
|
||
<summary>برای شرکت در رویداد هنری به تجربه قبلی نیاز دارم؟</summary>
|
||
<p>معمولاً نه. اگر یک رویداد پیشنیاز خاصی داشته باشد، برگزارکننده آن را در توضیحات مشخص میکند.</p>
|
||
</details>
|
||
<details>
|
||
<summary>همه رویدادها بلیط دارند؟</summary>
|
||
<p>نه. بعضی رایگاناند و بعضی با تهیه بلیط برگزار میشوند. شرایط هر رویداد در صفحه خودش مشخص است.</p>
|
||
</details>
|
||
<details>
|
||
<summary>میتوانم تنها در یک رویداد شرکت کنم؟</summary>
|
||
<p>بله. خیلی از آدمها به تنهایی وارد یک رویداد میشوند و یک علاقه مشترک میتواند شروع طبیعیتری برای ارتباط باشد.</p>
|
||
</details>
|
||
<details>
|
||
<summary>رویداد کوچک هم میتوانم ثبت کنم؟</summary>
|
||
<p>بله. یک نشست کوچک، اجرای مستقل یا دورهمی محدود هم میتواند یک رویداد باشد.</p>
|
||
</details>
|
||
</section>
|
||
</main>
|
||
|
||
<footer>
|
||
<div class="container">
|
||
<div class="footer-grid">
|
||
<div>
|
||
<h3>قبیله</h3>
|
||
<p>جایی که آدمها دور چیزهایی که دوست دارند جمع میشوند.</p>
|
||
</div>
|
||
<div>
|
||
<h3>کشف</h3>
|
||
<p><a href="#">رویدادها</a></p>
|
||
<p><a href="#">برگزارکنندهها</a></p>
|
||
</div>
|
||
<div>
|
||
<h3>قبیله</h3>
|
||
<p><a href="#">درباره ما</a></p>
|
||
<p><a href="#">پشتیبانی</a></p>
|
||
</div>
|
||
</div>
|
||
<div class="copyright">قبیله — همه حقوق محفوظ است.</div>
|
||
</div>
|
||
</footer>
|
||
</body>
|
||
</html> |