alisaza
e1eaf5eff5
Extract admin dashboard from ghabilee-frontend2 into a dedicated Next.js app for backoffice.ghabilee.ir (no SEO indexing / Clarity).
124 lines
21 KiB
HTML
124 lines
21 KiB
HTML
<!DOCTYPE html>
|
||
<!-- saved from url=(0058)file:///C:/Users/user/Downloads/ghabilee-about-mobile.html -->
|
||
<html lang="fa" dir="rtl"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
|
||
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
|
||
<meta name="theme-color" content="#fffdf9">
|
||
<title>درباره قبیله | جایی برای تجربههای حضوری و جمعهای تازه</title>
|
||
<meta name="description" content="قبیله جایی برای پیدا کردن و تجربه کردن رویدادهای حضوری و ساختن جمعهای تازه است؛ از کشف و رزرو یک تجربه تا میزبانی و جمع کردن آدمها دور چیزی که دوست دارید.">
|
||
<style>
|
||
:root{--bg:#fffdf9;--paper:#fff;--ink:#171717;--muted:#6f6f73;--line:#ece8df;--soft:#f6f3ed;--orange:#ff8a1f;--orange-deep:#e8710c;--orange-soft:#fff0df;--violet:#9b24e8;--violet-soft:#f4e9fb;--night:#1f1c24;--shadow:0 14px 38px rgba(29,22,12,.075);--pad:20px}
|
||
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;color:var(--ink);background:radial-gradient(circle at 88% -2%,rgba(155,36,232,.07),transparent 18rem),radial-gradient(circle at 10% 17%,rgba(255,138,31,.08),transparent 17rem),var(--bg);font-family:Tahoma,Arial,"Segoe UI",sans-serif;line-height:1.9;-webkit-font-smoothing:antialiased;padding-bottom:88px} a{text-decoration:none;color:inherit} button,a{font:inherit} svg{display:block}
|
||
.page{width:min(100%,430px);margin:0 auto;overflow:hidden}.header{position:sticky;top:0;z-index:30;min-height:58px;padding:8px 18px;display:flex;align-items:center;justify-content:space-between;background:rgba(255,253,249,.9);backdrop-filter:blur(14px);border-bottom:1px solid rgba(236,232,223,.75)}
|
||
.brand{display:flex;align-items:center;gap:8px;color:var(--violet);font-weight:900}.brand-mark{width:34px;height:34px;border:1.5px solid var(--violet);border-radius:11px;display:grid;place-items:center;background:#fff;font-size:18px;font-weight:900}.menu{width:44px;height:44px;border:0;border-radius:14px;background:transparent;display:grid;place-items:center;cursor:pointer}.menu:active{background:var(--soft)}
|
||
.hero{padding:32px var(--pad) 0;position:relative}.eyebrow{display:inline-flex;align-items:center;gap:7px;color:var(--orange-deep);font-size:13px;font-weight:900;margin-bottom:12px}.eyebrow-dot{width:6px;height:6px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 5px var(--orange-soft)}
|
||
h1,h2,h3,p{margin:0} h1{font-size:34px;line-height:1.47;letter-spacing:-1.5px;margin-bottom:12px} h1 strong{color:var(--violet)} h2{font-size:27px;line-height:1.55;letter-spacing:-.9px;margin-bottom:12px} h2 strong{color:var(--orange-deep)} h3{font-size:18px;line-height:1.7;letter-spacing:-.25px}.lead{color:#434348;font-size:16px;line-height:2}.muted{color:var(--muted)}
|
||
.hero-visual{position:relative;min-height:310px;margin-top:24px;overflow:hidden;border-radius:30px;background:radial-gradient(circle at 50% 52%,rgba(255,138,31,.36),rgba(255,138,31,0) 25%),linear-gradient(160deg,#241d2a,#1b1b20 65%,#2c2119);box-shadow:0 20px 45px rgba(28,22,16,.16)}.city-grid{position:absolute;inset:0;opacity:.28;background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:26px 26px;transform:perspective(250px) rotateX(58deg) scale(1.5) translateY(80px);transform-origin:center bottom}.fire{position:absolute;left:50%;top:50%;width:76px;height:76px;transform:translate(-50%,-42%);border-radius:50%;background:radial-gradient(circle,#ffd799 0 16%,#ff9f42 17% 34%,#ff6f1c 35% 49%,rgba(255,111,28,.16) 50% 68%,transparent 69%);box-shadow:0 0 40px rgba(255,138,31,.58),0 0 90px rgba(255,138,31,.24)}.ring{position:absolute;left:50%;top:50%;border:1px solid rgba(255,255,255,.12);border-radius:50%;transform:translate(-50%,-50%)}.ring.one{width:155px;height:155px}.ring.two{width:235px;height:235px}.ring.three{width:320px;height:320px}.person{position:absolute;width:18px;height:18px;border-radius:50%;background:#f2eee8;box-shadow:0 6px 0 -1px rgba(242,238,232,.65)}.p1{top:52px;right:112px}.p2{top:93px;left:72px}.p3{bottom:62px;right:66px}.p4{bottom:48px;left:112px}.p5{top:63px;left:164px}.p6{bottom:103px;right:152px}.hero-caption{position:absolute;left:16px;right:16px;bottom:14px;padding:12px 14px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background:rgba(255,255,255,.08);color:#f3edf6;font-size:12px;text-align:center;backdrop-filter:blur(8px)}
|
||
.section{padding:68px var(--pad) 0;position:relative}.quote{margin-top:24px;padding:20px;border-radius:24px;background:linear-gradient(145deg,var(--orange-soft),#fff8ef);border:1px solid #f7dfc1;font-size:18px;font-weight:900;line-height:1.8;color:#6d421a;box-shadow:var(--shadow)}
|
||
.story-line{margin-top:26px;position:relative;padding-right:28px}.story-line:before{content:"";position:absolute;right:8px;top:6px;bottom:7px;width:2px;background:linear-gradient(var(--orange),#ddd6cb)}.story-item{position:relative;padding-bottom:30px}.story-item:last-child{padding-bottom:0}.story-item:before{content:"";position:absolute;right:-26px;top:5px;width:14px;height:14px;border-radius:50%;border:4px solid var(--orange);background:#fff;box-shadow:0 0 0 5px var(--orange-soft)}.story-label{color:var(--orange-deep);font-size:11px;font-weight:900;margin-bottom:4px}.story-item p{color:var(--muted);font-size:13px;margin-top:5px}
|
||
.what-card{margin-top:22px;padding:20px;border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:var(--shadow)}.what-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}.what-item{min-height:104px;padding:14px;border-radius:17px;background:var(--soft)}.what-item:nth-child(2),.what-item:nth-child(3){background:var(--violet-soft)}.what-item b{display:block;font-size:14px}.what-item span{display:block;margin-top:5px;color:var(--muted);font-size:11px}
|
||
.reasons{display:grid;gap:10px;margin-top:22px}.reason{padding:16px 16px 16px 14px;border:1px solid var(--line);border-radius:18px;background:#fff;display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:start}.reason-icon{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:var(--orange-soft);color:var(--orange-deep)}.reason:nth-child(even) .reason-icon{background:var(--violet-soft);color:var(--violet)}.reason p{color:var(--muted);font-size:12px;margin-top:4px}
|
||
.paths{display:grid;gap:12px;margin-top:22px}.path-card{padding:20px;border-radius:24px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow);overflow:hidden;position:relative}.path-card:after{content:"";position:absolute;width:130px;height:130px;border-radius:50%;left:-68px;bottom:-68px;background:rgba(255,138,31,.08)}.path-card.host:after{background:rgba(155,36,232,.09)}.path-kicker{font-size:11px;color:var(--orange-deep);font-weight:900;margin-bottom:6px}.host .path-kicker{color:var(--violet)}.path-card p{font-size:13px;color:var(--muted);margin-top:8px}.path-scenario{margin-top:15px;padding:13px;border-radius:14px;background:var(--soft);font-size:12px;position:relative;z-index:2}
|
||
.vision{margin-top:22px;padding:28px 20px;border-radius:28px;color:#f5f2f7;background:radial-gradient(circle at 20% 0%,rgba(255,138,31,.25),transparent 13rem),radial-gradient(circle at 90% 100%,rgba(155,36,232,.28),transparent 13rem),linear-gradient(155deg,#201c25,#18181d);box-shadow:0 20px 45px rgba(24,20,28,.18)}.vision p{color:#d1ccd5;font-size:14px;margin-top:10px}.vision-list{margin-top:20px;display:grid;gap:9px}.vision-item{padding:12px 13px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);font-size:12px}
|
||
.values{display:grid;gap:10px;margin-top:22px}.value{padding:17px;border-radius:19px;border:1px solid var(--line);background:#fff}.value-head{display:flex;align-items:center;gap:10px}.value-no{width:32px;height:32px;border-radius:11px;display:grid;place-items:center;background:var(--orange-soft);color:var(--orange-deep);font-size:11px;font-weight:900}.value:nth-child(even) .value-no{background:var(--violet-soft);color:var(--violet)}.value p{color:var(--muted);font-size:12px;margin-top:8px}
|
||
.final{margin-top:70px;padding:42px 20px 36px;color:#fff;background:radial-gradient(circle at 16% 12%,rgba(255,138,31,.26),transparent 13rem),linear-gradient(160deg,#1a1a20,#2a202f 62%,#2d2118);position:relative;overflow:hidden}.final:before,.final:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.08);border-radius:50%}.final:before{width:260px;height:260px;left:-130px;top:-100px}.final:after{width:200px;height:200px;right:-120px;bottom:-90px}.final h2,.final p,.final .actions{position:relative;z-index:2}.final p{color:#d5d1d8;font-size:14px;margin-top:10px}.actions{display:grid;gap:10px;margin-top:22px}.btn{min-height:56px;border-radius:17px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:900;padding:0 16px}.btn.primary{background:linear-gradient(135deg,var(--orange),#ff9c42);color:#fff;box-shadow:0 12px 28px rgba(255,138,31,.26)}.btn.secondary{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff}.footer{padding:24px 20px 10px;text-align:center;color:#9a9a9d;font-size:11px}
|
||
.sticky{position:fixed;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(calc(100% - 20px),410px);min-height:66px;padding:8px;border:1px solid rgba(232,228,220,.95);border-radius:21px;background:rgba(255,255,255,.92);box-shadow:0 16px 50px rgba(22,18,12,.18);backdrop-filter:blur(16px);display:flex;gap:8px;z-index:50;transition:.22s ease}.sticky.hidden{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(20px)}.sticky a{flex:1;min-height:48px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900}.sticky .discover{background:var(--orange);color:#fff}.sticky .host{background:var(--violet-soft);color:var(--violet)}
|
||
@media (min-width:700px){body{background:#f1eee8;padding:30px 0 110px}.page{background:var(--bg);border-radius:36px;box-shadow:0 30px 80px rgba(40,30,20,.12)}.header{border-radius:36px 36px 0 0}} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.sticky{transition:none}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<main class="page">
|
||
<header class="header">
|
||
<a class="brand" href="file:///C:/Users/user/Downloads/ghabilee-about-mobile.html#" aria-label="قبیله"><span class="brand-mark">ق</span><span>قبیله</span></a>
|
||
<button class="menu" aria-label="منو"><svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M5 7h14M5 12h14M5 17h14" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"></path></svg></button>
|
||
</header>
|
||
|
||
<section class="hero" id="hero">
|
||
<div class="eyebrow"><span class="eyebrow-dot"></span>درباره قبیله</div>
|
||
<h1>ما هنوز هم دور چیزهایی که <strong>دوست داریم</strong> جمع میشیم.</h1>
|
||
<p class="lead">فقط شکلش عوض شده.<br><br> یه روز دور آتیش، امروز دور یه میز، یه بازی، یه کارگاه، یه اجرا یا هر چیزی که ارزش بیرون اومدن و با هم تجربه کردن داشته باشه.
|
||
<br>
|
||
قبیله برای همین جمع ها ساخته شده</p>
|
||
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="eyebrow"><span class="eyebrow-dot"></span>غریزه قدیمی، زندگی امروز</div>
|
||
<h2>هزاران ساله<br><strong>همین کارو میکنیم.</strong></h2>
|
||
<p class="lead">آدمها همیشه دنبال آدمهای خودشون بودن؛ آدمهایی که یه چیز مشترک دارن. یه علاقه، یه کنجکاوی، یه مهارت، یه سلیقه یا حتی فقط حالوهوای یه شب.</p>
|
||
<div class="story-line">
|
||
<article class="story-item"><div class="story-label">اون موقع</div><h3>دور آتیش</h3><p>یه نقطه برای جمع شدن، حرف زدن، تجربه کردن و ساختن چیزی مشترک.</p></article>
|
||
<article class="story-item"><div class="story-label">امروز</div><h3>دور یه میز، یه بازی، یه اجرا</h3><p>بهونهها عوض شدن، ولی نیاز به جمع هنوز همونه.</p></article>
|
||
<article class="story-item"><div class="story-label">مشکل امروز</div><h3>پیدا کردن این جمعها همیشه راحت نیست</h3><p>خیلی از تجربهها بین چند صفحه، پیام، لینک پرداخت و گروه پراکنده میشن. خیلیها هم اصلاً نمیفهمن دوروبرشون چه خبره.</p></article>
|
||
</div>
|
||
<div class="quote">قبیله میخواد این فاصله رو کمتر کنه.</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="eyebrow"><span class="eyebrow-dot"></span>قبیله دقیقاً چیه؟</div>
|
||
<h2>جایی برای پیدا کردن،<br><strong>رفتن و جمع شدن.</strong></h2>
|
||
<p class="lead">قبیله جاییه برای پیدا کردن و تجربه کردن رویدادهای حضوری. میتونی ببینی این دور و برا چه خبره، یه تجربه تازه پیدا کنی، جات رو توی یه جمع نگه داری و اگه چیزی برای ساختن داری، خودت میزبان بشی.</p>
|
||
<div class="what-card"><div class="what-grid"><div class="what-item"><b>کشف کن</b><span>ببین این دور و برا چه خبره.</span></div><div class="what-item"><b>جاتو نگه دار</b><span>رزرو و پرداخت یکجا.</span></div><div class="what-item"><b>آدمها رو پیدا کن</b><span>میزبانها، نظرها و تجربههای مشترک.</span></div><div class="what-item"><b>میزبان شو</b><span>یه تجربه بساز و جمعش رو راه بنداز.</span></div></div></div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="eyebrow"><span class="eyebrow-dot"></span>بهونههای خوب</div>
|
||
<h2>هر جمعی<br><strong>یه بهونه میخواد.</strong></h2>
|
||
|
||
<div class="reasons">
|
||
<article class="reason"><div class="reason-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M8 5h8M7 9h10M6 13h12M8 17h8" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"></path></svg></div><div><h3>یه کارگاه</h3><p>یه چیزی یاد بگیری و آدمهایی رو ببینی که همون کنجکاوی رو دارن.</p></div></article>
|
||
<article class="reason"><div class="reason-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M7 8h10v8H7zM9 10h.01M15 14h.01M12 12h.01" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"></path></svg></div><div><h3>یه بازی</h3><p>یه شب معمولی رو به یه خاطره مشترک تبدیل کنی.</p></div></article>
|
||
<article class="reason"><div class="reason-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M12 4v16M8 8c0-2 1.8-3 4-3s4 1 4 3-1.8 3-4 3-4 1-4 3 1.8 3 4 3 4-1 4-3" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"></path></svg></div><div><h3>یه اجرا</h3><p>چیزی رو ببینی که شاید توی مسیر معمول روزمره بهش نمیرسیدی.</p></div></article>
|
||
<article class="reason"><div class="reason-icon"><svg width="20" height="20" viewBox="0 0 24 24" fill="none"><path d="M7 17c1.5-4 4.5-7 10-10M9 7h8v8" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"></path></svg></div><div><h3>یه تجربه تازه</h3><p>چیزی که هنوز امتحانش نکردی و شاید بخوای دوباره برگردی سراغش.</p></div></article>
|
||
</div>
|
||
<div class="quote" style="margin-top:22px">برای ما خود «رویداد» آخر داستان نیست؛ فقط بهونهایه که چند نفر برای چند ساعت از مسیرهای جدا بیان و یه تجربه رو با هم زندگی کنن.</div>
|
||
<div>بعضی از این جمع ها همون شب تموم میشن. بعضی ها تبدیل به یه خاطره میشن و بعضی ها باعث میشن آدم هایی رو پیدا کنی که دلت بخواد دوباره ببینیشون.</div>
|
||
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="eyebrow"><span class="eyebrow-dot"></span>دو مسیر، یک جمع</div>
|
||
<h2>یه وقت میخوای بری.<br><strong>یه وقت میخوای بسازی.</strong></h2>
|
||
<div class="paths">
|
||
<article class="path-card"><div class="path-kicker">برای کسی که میخواد بره</div><h3>همه تجربههای خوب از مدتها قبل برنامهریزی نمیشن.</h3><p>گاهی چهارشنبهست و فقط میخوای ببینی آخر هفته چه خبره. گاهی مدتهاست دلت میخواد چیزی رو امتحان کنی ولی کسی رو پیدا نکردی که باهات بیاد.</p><div class="path-scenario">گاهی فقط یه رویداد میبینی و با خودت میگی: <b>«این بار برم.»</b></div></article>
|
||
<article class="path-card host"><div class="path-kicker">برای کسی که میخواد یه جمع بسازه</div><h3>پشت هر تجربه خوب، یه نفر تصمیم گرفته چیزی رو راه بندازه.</h3><p>قبیله کمک میکنه ثبتنامها بین پیامها گم نشن، پرداختها یکجا بمونن و ظرفیت، مهمانها و فهرست انتظار قابل مدیریت باشن.</p><div class="path-scenario">ما به این آدم میگیم: <b>میزبان.</b></div></article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="eyebrow"><span class="eyebrow-dot"></span>چیزی که میخوایم بسازیم</div>
|
||
|
||
<div class="vision"><h3 style="font-size:21px">چیزی که کم داریم، جاهایی برای پیدا کردن آدمها و تجربههاییه که شاید توی مسیر معمول زندگی بهشون نمیرسیدیم.</h3><div class="vision-list"><div class="vision-item">یه تصمیم ساده تبدیل به یه شب متفاوت بشه.</div><div class="vision-item">یه علاقه شخصی تبدیل به یه تجربه مشترک بشه.</div><div class="vision-item">یه میزبان آدمهای درست رو دور چیزی که ساخته جمع کنه.</div><div class="vision-item">یه تجربه خوب، ردپایی برای جمع بعدی بذاره.</div></div></div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="eyebrow"><span class="eyebrow-dot"></span>چیزهایی که برای ما مهمه</div>
|
||
<h2>چند اصل ساده<br><strong>برای یه جمع بهتر.</strong></h2>
|
||
<div class="values">
|
||
<article class="value"><div class="value-head"><div class="value-no">۴</div><h3>تجربه در دنیای واقعی</h3></div><p>قبیله روی صفحه شروع میشه، اما چیزی که برای ما مهمه بیرون از صفحه اتفاق میافته.</p></article><article class="value"><div class="value-head"><div class="value-no">۱</div><h3>آدمها قبل از عددها</h3></div><p>رشد وقتی ارزش داره که تجربه آدمهایی که وارد این جمع میشن خراب نشه.</p></article>
|
||
<article class="value"><div class="value-head"><div class="value-no">۵</div><h3>جمع، نه فقط برنامه</h3></div><p>گاهی چیزی که از یه رویداد با خودت میبری فقط چیزی نیست که یاد گرفتی یا دیدی؛ آدمهاییه که اونجا پیدا کردی.</p></article><article class="value"><div class="value-head"><div class="value-no">۲</div><h3>شفاف بودن قبل از خرید</h3></div><p>باید بدونی کجا میری، برای چی میری، چه چیزی منتظرته و چقدر پرداخت میکنی.</p></article>
|
||
<article class="value"><div class="value-head"><div class="value-no">۳</div><h3>اعتماد دوطرفه</h3></div><p>هم مهمان باید بدونه پشت یه رویداد چه کسیه، هم میزبان باید بدونه چه کسانی ثبتنام کردن.</p></article>
|
||
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<section class="final" id="final">
|
||
|
||
<h2>شاید جمع بعدی<br><strong style="color:#ffad67">همین دور و برا باشه.</strong></h2>
|
||
|
||
<div class="actions"><a class="btn primary" href="file:///C:/category">ببین این دور و برا چه خبره</a></div>
|
||
</section>
|
||
|
||
<footer class="footer">قبیله · روایت مدرن غریزه قدیمی دور هم جمع شدن.</footer>
|
||
</main>
|
||
<div class="sticky" id="sticky"><a class="discover" href="file:///C:/category">چه خبره؟</a><a class="host" href="file:///C:/become-a-host">یه جمع راه بنداز</a></div>
|
||
<script>
|
||
const sticky=document.getElementById('sticky'); const hero=document.getElementById('hero'); const final=document.getElementById('final'); const state={hero:true,final:false};
|
||
function sync(){sticky.classList.toggle('hidden',state.hero||state.final)}
|
||
const obs=new IntersectionObserver((entries)=>{entries.forEach(entry=>{if(entry.target===hero)state.hero=entry.isIntersecting;if(entry.target===final)state.final=entry.isIntersecting});sync()},{threshold:.12});
|
||
obs.observe(hero); obs.observe(final);
|
||
</script>
|
||
|
||
|
||
</body></html> |