alisaza
e1eaf5eff5
Extract admin dashboard from ghabilee-frontend2 into a dedicated Next.js app for backoffice.ghabilee.ir (no SEO indexing / Clarity).
1021 lines
39 KiB
HTML
1021 lines
39 KiB
HTML
<!DOCTYPE html>
|
||
<!-- saved from url=(0064)file:///C:/Users/user/Downloads/ghabilee-become-host-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:#ffffff;
|
||
--ink:#171717;
|
||
--muted:#6f6f73;
|
||
--soft:#f5f4f1;
|
||
--soft-2:#faf8f4;
|
||
--line:#ece9e2;
|
||
--orange:#ff8a1f;
|
||
--orange-deep:#eb7411;
|
||
--orange-soft:#fff0df;
|
||
--violet:#9c22e9;
|
||
--violet-soft:#f4e9fb;
|
||
--blue:#27377a;
|
||
--success:#1f7a5a;
|
||
--danger:#d44747;
|
||
--shadow:0 14px 40px rgba(30,22,12,.08);
|
||
--shadow-soft:0 8px 24px rgba(30,22,12,.055);
|
||
--r-xl:28px;
|
||
--r-lg:22px;
|
||
--r-md:16px;
|
||
--tap:52px;
|
||
--pad:20px;
|
||
}
|
||
|
||
*{box-sizing:border-box}
|
||
html{scroll-behavior:smooth}
|
||
body{
|
||
margin:0;
|
||
color:var(--ink);
|
||
background:
|
||
radial-gradient(circle at 82% -4%, rgba(156,34,233,.06), transparent 19rem),
|
||
radial-gradient(circle at 12% 18%, rgba(255,138,31,.06), transparent 18rem),
|
||
var(--bg);
|
||
font-family:Tahoma, Arial, "Segoe UI", sans-serif;
|
||
line-height:1.85;
|
||
-webkit-font-smoothing:antialiased;
|
||
padding-bottom:92px;
|
||
}
|
||
|
||
button,a{font:inherit}
|
||
a{text-decoration:none;color:inherit}
|
||
img,svg{display:block;max-width:100%}
|
||
|
||
.page{
|
||
width:min(100%, 430px);
|
||
margin:0 auto;
|
||
background:transparent;
|
||
overflow:hidden;
|
||
}
|
||
|
||
.header{
|
||
position:sticky;
|
||
top:0;
|
||
z-index:20;
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:space-between;
|
||
min-height:58px;
|
||
padding:8px 18px;
|
||
background:rgba(255,253,249,.9);
|
||
backdrop-filter:blur(14px);
|
||
border-bottom:1px solid rgba(236,233,226,.75);
|
||
}
|
||
|
||
.brand{
|
||
display:flex;
|
||
align-items:center;
|
||
gap:8px;
|
||
font-weight:900;
|
||
color:var(--violet);
|
||
letter-spacing:-.5px;
|
||
}
|
||
|
||
.brand-mark{
|
||
width:34px;height:34px;
|
||
display:grid;place-items:center;
|
||
border:1.5px solid var(--violet);
|
||
border-radius:11px;
|
||
font-weight:900;
|
||
font-size:19px;
|
||
background:white;
|
||
}
|
||
|
||
.menu-btn{
|
||
width:44px;height:44px;
|
||
border:0;background:transparent;border-radius:14px;
|
||
display:grid;place-items:center;cursor:pointer;
|
||
}
|
||
.menu-btn:active{background:var(--soft)}
|
||
|
||
.section{
|
||
padding:64px var(--pad) 0;
|
||
position:relative;
|
||
}
|
||
|
||
.hero{
|
||
padding:28px var(--pad) 0;
|
||
text-align:right;
|
||
}
|
||
|
||
.eyebrow{
|
||
display:inline-flex;
|
||
align-items:center;
|
||
gap:6px;
|
||
color:var(--orange-deep);
|
||
font-size:13px;
|
||
font-weight:800;
|
||
margin-bottom:12px;
|
||
}
|
||
|
||
.eyebrow-dot{
|
||
width:6px;height:6px;border-radius:999px;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.45;
|
||
letter-spacing:-1.4px;
|
||
margin-bottom:12px;
|
||
}
|
||
h1 strong{color:var(--violet)}
|
||
h2{
|
||
font-size:27px;
|
||
line-height:1.55;
|
||
letter-spacing:-.8px;
|
||
margin-bottom:12px;
|
||
}
|
||
h2 strong{color:var(--orange-deep)}
|
||
h3{
|
||
font-size:18px;
|
||
line-height:1.65;
|
||
letter-spacing:-.25px;
|
||
}
|
||
|
||
.lead{
|
||
color:#454549;
|
||
font-size:16px;
|
||
line-height:1.95;
|
||
}
|
||
|
||
.muted{color:var(--muted)}
|
||
|
||
.cta{
|
||
width:100%;
|
||
min-height:56px;
|
||
display:flex;
|
||
align-items:center;
|
||
justify-content:center;
|
||
gap:8px;
|
||
margin-top:22px;
|
||
padding:0 18px;
|
||
border:0;
|
||
border-radius:17px;
|
||
color:white;
|
||
background:linear-gradient(135deg,var(--orange),#ff9c42);
|
||
box-shadow:0 12px 30px rgba(255,138,31,.28);
|
||
font-weight:900;
|
||
font-size:16px;
|
||
cursor:pointer;
|
||
}
|
||
.cta:active{transform:translateY(1px)}
|
||
.cta-note{
|
||
margin-top:10px;
|
||
text-align:center;
|
||
color:var(--muted);
|
||
font-size:12px;
|
||
}
|
||
|
||
.hero-visual{
|
||
position:relative;
|
||
margin-top:28px;
|
||
padding:20px 10px 8px;
|
||
min-height:350px;
|
||
}
|
||
.hero-visual:before{
|
||
content:"";
|
||
position:absolute;inset:22px 12px auto 12px;
|
||
height:260px;border-radius:50%;
|
||
background:radial-gradient(circle, rgba(255,138,31,.17), rgba(255,138,31,0) 68%);
|
||
filter:blur(2px);
|
||
}
|
||
|
||
.phone{
|
||
position:relative;
|
||
width:76%;
|
||
margin:0 auto;
|
||
border:7px solid #1a1a1c;
|
||
border-radius:34px;
|
||
background:#fff;
|
||
box-shadow:0 20px 45px rgba(28,20,10,.19);
|
||
overflow:hidden;
|
||
transform:rotate(-2deg);
|
||
z-index:2;
|
||
}
|
||
.phone-top{
|
||
width:35%;height:15px;border-radius:0 0 12px 12px;background:#1a1a1c;margin:0 auto 6px;
|
||
}
|
||
.phone-screen{padding:10px}
|
||
.mini-banner{
|
||
height:94px;border-radius:15px;
|
||
background:
|
||
linear-gradient(135deg,rgba(39,55,122,.9),rgba(156,34,233,.72)),
|
||
linear-gradient(#ddd,#ddd);
|
||
position:relative;overflow:hidden;margin-bottom:10px;
|
||
}
|
||
.mini-banner:after{
|
||
content:"";
|
||
position:absolute;
|
||
width:86px;height:86px;border:18px solid rgba(255,255,255,.14);
|
||
border-radius:50%;left:-18px;bottom:-33px;
|
||
}
|
||
.mini-row{height:8px;border-radius:99px;background:#ececec;margin:7px 0}
|
||
.mini-row.w70{width:70%}.mini-row.w42{width:42%}.mini-row.w88{width:88%}
|
||
.mini-chips{display:flex;gap:5px;margin-top:10px}
|
||
.mini-chip{height:20px;flex:1;border-radius:8px;background:#f2f0ed}
|
||
.mini-btn{height:38px;border-radius:12px;background:var(--orange);margin-top:12px}
|
||
|
||
.floating-stat{
|
||
position:absolute;
|
||
z-index:4;
|
||
min-width:118px;
|
||
padding:11px 13px;
|
||
border:1px solid var(--line);
|
||
border-radius:16px;
|
||
background:rgba(255,255,255,.94);
|
||
box-shadow:var(--shadow-soft);
|
||
backdrop-filter:blur(10px);
|
||
}
|
||
.floating-stat b{display:block;font-size:18px;line-height:1.2}
|
||
.floating-stat span{display:block;font-size:11px;color:var(--muted);margin-top:4px}
|
||
.stat-1{top:36px;right:2px}
|
||
.stat-2{bottom:92px;left:0}
|
||
.stat-3{bottom:25px;right:9px}
|
||
|
||
.quick-grid{
|
||
display:grid;
|
||
grid-template-columns:1fr 1fr;
|
||
gap:10px;
|
||
margin-top:20px;
|
||
}
|
||
.quick-card{
|
||
min-height:105px;
|
||
padding:14px;
|
||
background:#fff;
|
||
border:1px solid var(--line);
|
||
border-radius:18px;
|
||
box-shadow:0 7px 18px rgba(20,20,20,.03);
|
||
}
|
||
.quick-icon{
|
||
width:35px;height:35px;border-radius:12px;
|
||
display:grid;place-items:center;
|
||
margin-bottom:9px;
|
||
background:var(--orange-soft);
|
||
color:var(--orange-deep);
|
||
}
|
||
.quick-card:nth-child(2) .quick-icon,
|
||
.quick-card:nth-child(4) .quick-icon{
|
||
background:var(--violet-soft);
|
||
color:var(--violet);
|
||
}
|
||
.quick-card b{display:block;font-size:14px}
|
||
.quick-card span{display:block;color:var(--muted);font-size:11px;margin-top:3px}
|
||
|
||
.pain-wrap{
|
||
margin:0 -20px;
|
||
padding:30px 20px;
|
||
background:linear-gradient(180deg,#f7f5f1,#f3f1ed);
|
||
border-radius:28px;
|
||
}
|
||
.chat-cloud{
|
||
margin-top:22px;
|
||
display:flex;
|
||
flex-direction:column;
|
||
gap:8px;
|
||
}
|
||
.bubble{
|
||
max-width:85%;
|
||
padding:10px 14px;
|
||
border-radius:15px 15px 4px 15px;
|
||
background:#fff;
|
||
border:1px solid #e9e6df;
|
||
box-shadow:0 6px 16px rgba(30,30,30,.035);
|
||
font-size:13px;
|
||
}
|
||
.bubble:nth-child(even){
|
||
align-self:flex-end;
|
||
border-radius:15px 15px 15px 4px;
|
||
background:#fff8ef;
|
||
border-color:#f7dfc4;
|
||
}
|
||
.pain-end{
|
||
margin-top:22px;
|
||
padding-top:17px;
|
||
border-top:1px dashed #d9d5cc;
|
||
font-weight:800;
|
||
font-size:15px;
|
||
}
|
||
|
||
.reminder-card{
|
||
margin-top:22px;
|
||
padding:14px;
|
||
border-radius:22px;
|
||
background:linear-gradient(145deg,#1c1c22,#2b2a31);
|
||
box-shadow:0 16px 34px rgba(20,20,25,.2);
|
||
}
|
||
.notification{
|
||
background:rgba(255,255,255,.96);
|
||
border-radius:18px;
|
||
padding:13px;
|
||
display:flex;
|
||
gap:11px;
|
||
align-items:flex-start;
|
||
}
|
||
.app-icon{
|
||
width:42px;height:42px;flex:0 0 42px;
|
||
border-radius:13px;
|
||
display:grid;place-items:center;
|
||
background:linear-gradient(145deg,var(--orange),#ffac61);
|
||
color:white;font-weight:900;
|
||
}
|
||
.notification strong{display:block;font-size:13px}
|
||
.notification p{font-size:11px;color:#5e5e64;line-height:1.7;margin-top:3px}
|
||
.notification small{display:block;color:#9a9a9f;margin-top:4px;font-size:10px}
|
||
|
||
.split-punch{
|
||
display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;
|
||
}
|
||
.punch{
|
||
padding:14px;
|
||
border-radius:17px;
|
||
background:var(--orange-soft);
|
||
font-weight:900;font-size:13px;
|
||
}
|
||
.punch:nth-child(2){background:var(--violet-soft);color:#6b188f}
|
||
|
||
.timeline{
|
||
position:relative;
|
||
margin-top:28px;
|
||
padding-right:28px;
|
||
}
|
||
.timeline:before{
|
||
content:"";
|
||
position:absolute;
|
||
top:10px;bottom:8px;right:8px;width:2px;
|
||
background:linear-gradient(var(--orange),#e9e4dc);
|
||
}
|
||
.time-item{
|
||
position:relative;
|
||
padding-bottom:34px;
|
||
}
|
||
.time-item:last-child{padding-bottom:0}
|
||
.time-item:before{
|
||
content:"";
|
||
position:absolute;
|
||
right:-26px;top:5px;
|
||
width:14px;height:14px;border-radius:99px;
|
||
background:white;border:4px solid var(--orange);
|
||
box-shadow:0 0 0 5px var(--orange-soft);
|
||
}
|
||
.time-label{
|
||
color:var(--orange-deep);
|
||
font-size:11px;font-weight:900;margin-bottom:3px;
|
||
}
|
||
.time-item p{font-size:13px;color:var(--muted);margin-top:6px}
|
||
.mock{
|
||
margin-top:13px;
|
||
padding:13px;
|
||
border:1px solid var(--line);
|
||
border-radius:17px;
|
||
background:#fff;
|
||
box-shadow:0 8px 20px rgba(20,20,20,.035);
|
||
}
|
||
.mock-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
|
||
.mock-title{font-size:12px;font-weight:900}
|
||
.badge{
|
||
padding:4px 8px;border-radius:99px;font-size:9px;font-weight:800;
|
||
background:var(--orange-soft);color:var(--orange-deep);
|
||
}
|
||
.mock-lines{display:grid;gap:7px}
|
||
.mock-line{height:9px;border-radius:99px;background:#efeeeb}
|
||
.mock-line:nth-child(2){width:72%}
|
||
.mock-line:nth-child(3){width:48%}
|
||
.people{display:flex;gap:6px;margin-top:10px}
|
||
.avatar{width:28px;height:28px;border-radius:10px;background:#eee}
|
||
.avatar:nth-child(2){background:#f3e5fa}
|
||
.avatar:nth-child(3){background:#ffe7cd}
|
||
.avatar:nth-child(4){background:#e9edf9}
|
||
|
||
.feature-stack{display:grid;gap:12px;margin-top:20px}
|
||
.feature-card{
|
||
overflow:hidden;
|
||
padding:18px;
|
||
border-radius:22px;
|
||
border:1px solid var(--line);
|
||
background:#fff;
|
||
box-shadow:var(--shadow-soft);
|
||
}
|
||
.feature-card .visual{
|
||
margin:15px 0 -2px;
|
||
padding:14px;
|
||
min-height:125px;
|
||
border-radius:17px;
|
||
background:var(--soft-2);
|
||
border:1px solid #efede7;
|
||
}
|
||
.location-row,.coupon-row,.change-row{
|
||
display:flex;align-items:center;justify-content:space-between;
|
||
padding:10px 11px;background:#fff;border-radius:12px;border:1px solid var(--line);
|
||
font-size:11px;margin-bottom:7px;
|
||
}
|
||
.location-row:last-child,.coupon-row:last-child,.change-row:last-child{margin-bottom:0}
|
||
.blur-text{
|
||
display:inline-block;width:90px;height:8px;border-radius:99px;
|
||
background:linear-gradient(90deg,#d8d8d8,#f0f0f0,#d8d8d8);
|
||
filter:blur(2px);
|
||
}
|
||
.coupon{
|
||
font-family:monospace;direction:ltr;font-weight:900;color:var(--violet)
|
||
}
|
||
|
||
.dashboard{
|
||
margin:22px -8px 0;
|
||
padding:10px;
|
||
background:#25252a;
|
||
border-radius:26px;
|
||
box-shadow:0 20px 40px rgba(25,25,30,.2);
|
||
}
|
||
.dash-screen{
|
||
background:#fff;border-radius:20px;padding:13px;
|
||
}
|
||
.dash-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px}
|
||
.dash-stat{
|
||
padding:11px;border-radius:13px;background:#f5f4f1;
|
||
}
|
||
.dash-stat b{display:block;font-size:16px}
|
||
.dash-stat span{display:block;color:var(--muted);font-size:9px}
|
||
.dash-nav{
|
||
display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:9px;
|
||
}
|
||
.dash-nav div{
|
||
height:38px;border-radius:11px;background:#faf8f4;
|
||
display:grid;place-items:center;font-size:9px;color:#666;
|
||
}
|
||
|
||
.price-card{
|
||
margin:20px 0 0;
|
||
padding:28px 20px;
|
||
border-radius:28px;
|
||
background:
|
||
radial-gradient(circle at 15% 10%,rgba(255,255,255,.22),transparent 7rem),
|
||
linear-gradient(145deg,var(--orange),#ff9d42);
|
||
color:white;
|
||
text-align:center;
|
||
box-shadow:0 18px 40px rgba(255,138,31,.27);
|
||
}
|
||
.price-number{
|
||
direction:ltr;
|
||
font-size:64px;
|
||
line-height:1;
|
||
letter-spacing:-4px;
|
||
font-weight:1000;
|
||
margin:2px 0 8px;
|
||
}
|
||
.price-number span{font-size:27px;vertical-align:top;margin-left:3px}
|
||
.price-card p{font-size:14px}
|
||
.price-points{
|
||
display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:20px;
|
||
}
|
||
.price-point{
|
||
padding:10px 5px;
|
||
border-radius:13px;
|
||
background:rgba(255,255,255,.15);
|
||
border:1px solid rgba(255,255,255,.2);
|
||
}
|
||
.price-point b{display:block;font-size:11px}
|
||
.price-point span{display:block;font-size:9px;opacity:.85;margin-top:3px}
|
||
|
||
details.example{
|
||
margin-top:10px;border:1px solid var(--line);border-radius:15px;background:#fff;
|
||
}
|
||
details.example summary{
|
||
list-style:none;cursor:pointer;padding:13px 15px;font-size:12px;font-weight:900;
|
||
}
|
||
details.example summary::-webkit-details-marker{display:none}
|
||
.example-body{padding:0 15px 14px;font-size:12px;color:var(--muted)}
|
||
.math-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #f0eee9}
|
||
.math-row:last-child{border-bottom:0}
|
||
|
||
.steps{display:grid;gap:10px;margin-top:20px}
|
||
.step{
|
||
display:grid;
|
||
grid-template-columns:42px 1fr;
|
||
gap:12px;
|
||
align-items:start;
|
||
padding:15px;
|
||
border:1px solid var(--line);
|
||
border-radius:18px;
|
||
background:#fff;
|
||
}
|
||
.step-num{
|
||
width:42px;height:42px;border-radius:14px;
|
||
display:grid;place-items:center;
|
||
background:var(--violet-soft);color:var(--violet);font-weight:1000;
|
||
}
|
||
.step p{font-size:12px;color:var(--muted);margin-top:4px}
|
||
|
||
.accordion{
|
||
display:grid;gap:8px;margin-top:18px;
|
||
}
|
||
.accordion details{
|
||
border:1px solid var(--line);
|
||
border-radius:16px;
|
||
background:#fff;
|
||
overflow:hidden;
|
||
}
|
||
.accordion summary{
|
||
list-style:none;
|
||
min-height:54px;
|
||
padding:14px 44px 14px 14px;
|
||
cursor:pointer;
|
||
display:flex;
|
||
align-items:center;
|
||
font-size:13px;
|
||
font-weight:900;
|
||
position:relative;
|
||
}
|
||
.accordion summary::-webkit-details-marker{display:none}
|
||
.accordion summary:before{
|
||
content:"+";
|
||
position:absolute;right:14px;
|
||
width:22px;height:22px;border-radius:8px;
|
||
display:grid;place-items:center;
|
||
background:var(--orange-soft);
|
||
color:var(--orange-deep);
|
||
font-size:16px;
|
||
}
|
||
.accordion details[open] summary:before{content:"–"}
|
||
.accordion-body{
|
||
padding:0 14px 15px;
|
||
color:var(--muted);
|
||
font-size:12px;
|
||
}
|
||
|
||
.final{
|
||
margin-top:70px;
|
||
padding:40px 20px 34px;
|
||
background:
|
||
radial-gradient(circle at 20% 0%,rgba(156,34,233,.22),transparent 13rem),
|
||
linear-gradient(160deg,#19191f,#2a202f 55%,#2b1d16);
|
||
color:white;
|
||
position:relative;
|
||
overflow:hidden;
|
||
}
|
||
.final:before,.final:after{
|
||
content:"";position:absolute;border:1px solid rgba(255,255,255,.09);border-radius:50%;
|
||
}
|
||
.final:before{width:250px;height:250px;left:-110px;top:-90px}
|
||
.final:after{width:190px;height:190px;right:-100px;bottom:-70px}
|
||
.final h2,.final p,.final .cta,.final .cta-note{position:relative;z-index:2}
|
||
.final p{color:#d6d2d8;font-size:14px;margin-top:10px}
|
||
|
||
.footer{
|
||
padding:24px 20px 10px;
|
||
text-align:center;
|
||
color:#999;
|
||
font-size:11px;
|
||
}
|
||
|
||
.sticky-cta{
|
||
position:fixed;
|
||
left:50%;
|
||
bottom:max(10px, env(safe-area-inset-bottom));
|
||
z-index:50;
|
||
transform:translateX(-50%);
|
||
width:min(calc(100% - 20px),410px);
|
||
min-height:66px;
|
||
display:flex;
|
||
align-items:center;
|
||
gap:10px;
|
||
padding:8px 8px 8px 12px;
|
||
background:rgba(255,255,255,.92);
|
||
border:1px solid rgba(232,228,220,.95);
|
||
border-radius:21px;
|
||
box-shadow:0 16px 50px rgba(22,18,12,.18);
|
||
backdrop-filter:blur(16px);
|
||
transition:.22s ease;
|
||
}
|
||
.sticky-cta.hidden{
|
||
opacity:0;
|
||
pointer-events:none;
|
||
transform:translateX(-50%) translateY(20px);
|
||
}
|
||
.sticky-price{
|
||
margin-right:auto;
|
||
line-height:1.35;
|
||
min-width:92px;
|
||
}
|
||
.sticky-price b{display:block;font-size:13px}
|
||
.sticky-price span{display:block;color:var(--muted);font-size:9px}
|
||
.sticky-btn{
|
||
min-width:145px;
|
||
height:48px;
|
||
border:0;border-radius:15px;
|
||
background:var(--orange);color:#fff;
|
||
font-weight:900;font-size:13px;
|
||
cursor:pointer;
|
||
}
|
||
|
||
.sr-only{
|
||
position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
|
||
clip:rect(0,0,0,0);white-space:nowrap;border:0;
|
||
}
|
||
|
||
@media (min-width:700px){
|
||
body{padding:30px 0 110px;background:#f1efe9}
|
||
.page{
|
||
border-radius:36px;
|
||
background:var(--bg);
|
||
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-cta{transition:none}
|
||
.cta:active{transform:none}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<main class="page">
|
||
|
||
<header class="header" aria-label="سربرگ">
|
||
<a class="brand" href="file:///C:/Users/user/Downloads/ghabilee-become-host-mobile.html#" aria-label="قبیله">
|
||
<span class="brand-mark">ق</span>
|
||
<span>قبیله</span>
|
||
</a>
|
||
<button class="menu-btn" aria-label="باز کردن منو">
|
||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
||
<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>یه رویداد میخوای بسازی؟<br></h1>
|
||
<p class="lead">
|
||
یه کارگاه، یه بازی، یه اجرا، یه سفر، یه دورهمی یا هر چیزی که فکر میکنی بهتره با چند نفر اتفاق بیفته.
|
||
<br><br>
|
||
تو تجربه رو بساز. قبیله ثبتنام، پرداخت و مهمانها رو جمعوجور میکنه.
|
||
</p>
|
||
|
||
<a class="cta js-start" href="file:///C:/Users/user/Downloads/ghabilee-become-host-mobile.html#start">اولین رویدادم رو میسازم</a>
|
||
<div class="cta-note">احراز هویت کن، رویدادت رو بساز و وقتی آماده شد منتشرش کن.</div>
|
||
|
||
<div class="hero-visual" aria-label="نمای نمونه صفحه رویداد و آمار میزبان">
|
||
<div class="floating-stat stat-1"><b>۲۴</b><span>ثبتنام قطعی</span></div>
|
||
<div class="floating-stat stat-2"><b>8</b><span>نفر در انتظار</span></div>
|
||
<div class="floating-stat stat-3"><b>24</b><span>نفر حاضر</span></div>
|
||
|
||
<div class="phone">
|
||
<div class="phone-top"></div>
|
||
<div class="phone-screen">
|
||
<div class="mini-banner"></div>
|
||
<div class="mini-row w70"></div>
|
||
<div class="mini-row w42"></div>
|
||
<div class="mini-row w88"></div>
|
||
<div class="mini-chips"><div class="mini-chip"></div><div class="mini-chip"></div><div class="mini-chip"></div></div>
|
||
<div class="mini-btn"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="quick-grid" aria-label="مزیتهای اصلی">
|
||
<div class="quick-card">
|
||
<div class="quick-icon">
|
||
<svg width="19" height="19" viewBox="0 0 24 24" fill="none"><path d="M7 17 17 7M8 8h.01M16 16h.01" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"></path></svg>
|
||
</div>
|
||
<b>۷٪ کارمزد</b><span>از فروش موفق</span>
|
||
</div>
|
||
<div class="quick-card">
|
||
<div class="quick-icon">
|
||
<svg width="19" height="19" viewBox="0 0 24 24" fill="none"><path d="M4 8h16M7 5h10M6 11h12v8H6z" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"></path></svg>
|
||
</div>
|
||
<b>رزرو و پرداخت</b><span>یکجا</span>
|
||
</div>
|
||
<div class="quick-card">
|
||
<div class="quick-icon">
|
||
<svg width="19" height="19" viewBox="0 0 24 24" fill="none"><path d="M16 18c0-2.2-1.8-4-4-4s-4 1.8-4 4M12 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM18 9a2 2 0 1 1 0 4M6 9a2 2 0 1 0 0 4" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"></path></svg>
|
||
</div>
|
||
<b>ظرفیت و مهمانها</b><span>مرتب و قابل پیگیری</span>
|
||
</div>
|
||
<div class="quick-card">
|
||
<div class="quick-icon">
|
||
<svg width="19" height="19" viewBox="0 0 24 24" fill="none"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9ZM10 20h4" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"></path></svg>
|
||
</div>
|
||
<b>یادآوری مداوم</b><span>قبل از شروع</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="pain-wrap">
|
||
<div class="eyebrow"><span class="eyebrow-dot"></span>قبل از شروع</div>
|
||
<h2>یه رویداد خوب،<br><strong>قبل از شروعش کلی کار داره</strong></h2>
|
||
|
||
|
||
<div class="chat-cloud">
|
||
<div class="bubble">هنوز جا دارید؟</div>
|
||
<div class="bubble">پول رو کجا واریز کنم؟</div>
|
||
<div class="bubble">ثبتنامم قطعی شده؟</div>
|
||
<div class="bubble">آدرس دقیق کجاست؟</div>
|
||
<div class="bubble">من پول دادم، اسمم هست؟</div>
|
||
<div class="bubble">اگه یکی نیاد چی؟</div>
|
||
</div>
|
||
|
||
<div class="pain-end">قرار نیست انرژیت صرف سوالهای تکراری بشه</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="eyebrow"><span class="eyebrow-dot"></span>حضور مهمانها</div>
|
||
<h2>ثبتنام کرده.<br><strong>ولی روز برنامه واقعاً میاد؟</strong></h2>
|
||
<p class="lead">
|
||
پر شدن ظرفیت همیشه یعنی پر شدن صندلیها نیست. گاهی مهمان چند روز قبل ثبتنام کرده و روز برنامه یادش میره که جایی منتظرشه.
|
||
</p>
|
||
<p class="lead" style="margin-top:10px;font-weight:800;color:#27272b">قبیله قبل از رویداد یادش میاندازه.</p>
|
||
|
||
<div class="reminder-card">
|
||
<div class="notification">
|
||
<div class="app-icon">ق</div>
|
||
<div>
|
||
<strong>فردا میبینیمت</strong>
|
||
<p>رویداد «شب بازی» فردا ساعت ۱۹ شروع میشه. زمان و جزئیات رویدادت رو یه بار دیگه ببین.</p>
|
||
<small>قبیله · همین حالا</small>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="split-punch">
|
||
<div class="punch">کمتر «یادم رفت»</div>
|
||
<div class="punch">کمتر جای خالی</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="eyebrow"><span class="eyebrow-dot"></span>مسیر یک رویداد</div>
|
||
<h2>از اولین ثبتنام<br><strong>تا آخرین مهمان</strong></h2>
|
||
<p class="muted">قبیله بخشهای تکراری مسیر رو مرتب نگه میداره تا تو روی خود تجربه تمرکز کنی.</p>
|
||
|
||
<div class="timeline">
|
||
<article class="time-item">
|
||
<div class="time-label">قبل از فروش</div>
|
||
<h3>رویدادت یه جای مشخص داره</h3>
|
||
<p>زمان، مکان، ظرفیت، قیمت و همه چیزهایی که مهمان باید بدونه یکجاست.</p>
|
||
<div class="mock">
|
||
<div class="mock-head"><span class="mock-title">صفحه رویداد</span><span class="badge">منتشرشده</span></div>
|
||
<div class="mock-lines"><div class="mock-line"></div><div class="mock-line"></div><div class="mock-line"></div></div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="time-item">
|
||
<div class="time-label">وقتی ثبتنامها شروع میشن</div>
|
||
<h3>رزرو و پرداخت کنار همن</h3>
|
||
<p>میدونی کی قطعی شده، کی هنوز پرداخت نکرده و وضعیت هر رزرو چیه.</p>
|
||
<div class="mock">
|
||
<div class="mock-head"><span class="mock-title">رزروها</span><span class="badge">۲۴ نفر</span></div>
|
||
<div class="people"><div class="avatar"></div><div class="avatar"></div><div class="avatar"></div><div class="avatar"></div></div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="time-item">
|
||
<div class="time-label">وقتی ظرفیت پر میشه</div>
|
||
<h3>اگه جا باز شد، هدر نمیره</h3>
|
||
<p>وقتی ظرفیت دوباره آزاد بشه، نفر بعدی میتونه فرصت ثبتنام پیدا کنه.</p>
|
||
<div class="mock">
|
||
<div class="mock-head"><span class="mock-title">فهرست انتظار</span><span class="badge">۳ نفر</span></div>
|
||
<div class="mock-lines"><div class="mock-line"></div><div class="mock-line"></div><div class="mock-line"></div></div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="time-item">
|
||
<div class="time-label">روز رویداد</div>
|
||
<h3>ببین کی واقعاً اومده</h3>
|
||
<p>فهرست مهمانها جلوی چشمته و حضور مهمانهای قطعی رو ثبت میکنی.</p>
|
||
<div class="mock">
|
||
<div class="mock-head"><span class="mock-title">حضور</span><span class="badge">۱۸ از ۲۴</span></div>
|
||
<div class="mock-lines"><div class="mock-line"></div><div class="mock-line"></div><div class="mock-line"></div></div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="eyebrow"><span class="eyebrow-dot"></span>جزئیات مهم</div>
|
||
<h2>چیزهایی که وسط کار<br><strong>خیلی به درد میخورن</strong></h2>
|
||
|
||
<div class="feature-stack">
|
||
<article class="feature-card">
|
||
<h3>آدرس برای همه نیست</h3>
|
||
<p class="muted">میتونی آدرس دقیق رو فقط به کسایی نشون بدی که رزرو قطعی دارن.</p>
|
||
<div class="visual">
|
||
<div class="location-row"><span>قبل از رزرو</span><b>سجاد، مشهد</b></div>
|
||
<div class="location-row"><span>بعد از رزرو</span><span class="blur-text"></span></div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="feature-card">
|
||
<h3>یه جمع خاص؟ یه کد مخصوص</h3>
|
||
<p class="muted">برای رویدادهای پولی کد تخفیف درصدی یا مبلغ ثابت بساز و محدودیتش رو خودت تعیین کن.</p>
|
||
<div class="visual">
|
||
<div class="coupon-row"><span class="coupon">TRIBE20</span><b>۲۰٪ تخفیف</b></div>
|
||
<div class="coupon-row"><span>تعداد استفاده</span><b>۱۲ / ۳۰</b></div>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="feature-card">
|
||
<h3>میتونم رویدادم رو تغییر بدم؟</h3>
|
||
<p class="muted">تنظیمات غیر حساس رو میتونی تغییر بدی، تا حد امکان موقع ثبت و تایید نهایی دقت کن.</p>
|
||
<div class="visual">
|
||
<div class="change-row"><span>ظرفیت جدید</span><b>5 + 30</b></div>
|
||
<div class="change-row"><span>اعلان مهمانها</span><b style="color:var(--success)">فعال</b></div>
|
||
</div>
|
||
</article>
|
||
</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="dashboard" aria-label="نمونه میز کار">
|
||
<div class="dash-screen">
|
||
<div class="mock-head"><span class="mock-title">شب بازی · خلاصه</span><span class="badge">منتشرشده</span></div>
|
||
<div class="dash-stats">
|
||
<div class="dash-stat"><b>۲۴</b><span>ثبتنام قطعی</span></div>
|
||
<div class="dash-stat"><b>۱۸</b><span>حاضر</span></div>
|
||
<div class="dash-stat"><b>۳</b><span>در انتظار</span></div>
|
||
<div class="dash-stat"><b>۹.۳م</b><span>بعد از کارمزد</span></div>
|
||
</div>
|
||
<div class="dash-nav">
|
||
<div>مهمانها</div><div>انتظار</div><div>مالی</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="muted" style="margin-top:16px">ثبتنام، حضور، فهرست انتظار، تخفیف، نظرها و وضعیت مالی، همه کنار همن.</p>
|
||
<a class="cta js-start" href="file:///C:/Users/user/Downloads/ghabilee-become-host-mobile.html#start">رویدادم رو میسازم</a>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="eyebrow"><span class="eyebrow-dot"></span>هزینه قبیله</div>
|
||
<h2>عددش از اول<br><strong>روشنه.</strong></h2>
|
||
|
||
<div class="price-card">
|
||
<div class="price-number"><span>٪</span>۷</div>
|
||
<p>از فروش موفق رویداد</p>
|
||
|
||
<div class="price-points">
|
||
<div class="price-point"><b>ساخت رویداد</b><span>رایگان</span></div>
|
||
<div class="price-point"><b>فروش موفق</b><span>۷٪ کارمزد</span></div>
|
||
<div class="price-point"><b>فروش نداشتی</b><span>چیزی کم نمیشه</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</section>
|
||
|
||
<section class="section" id="start">
|
||
<div class="eyebrow"><span class="eyebrow-dot"></span>شروع کار</div>
|
||
<h2>چهار قدم<br><strong>تا اولین رویداد</strong></h2>
|
||
|
||
<div class="steps">
|
||
<article class="step">
|
||
<div class="step-num">۱</div>
|
||
<div><h3>خودت رو معرفی کن</h3><p>احراز هویتت رو کامل کن تا امکان میزبانی فعال بشه.</p></div>
|
||
</article>
|
||
<article class="step">
|
||
<div class="step-num">۲</div>
|
||
<div><h3>رویدادت رو بساز</h3><p>موضوع، زمان، مکان، قیمت و ظرفیت رو مشخص کن.</p></div>
|
||
</article>
|
||
<article class="step">
|
||
<div class="step-num">۳</div>
|
||
<div><h3>منتشرش کن</h3><p>صفحه رویدادت آماده میشه و میتونی لینکش رو هرجا جمعت هست بفرستی.</p></div>
|
||
</article>
|
||
<article class="step">
|
||
<div class="step-num">۴</div>
|
||
<div><h3>میزبان باش</h3><p>قبیله ثبتنامها رو مرتب نگه میداره؛ تو تجربه رو بساز.</p></div>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="eyebrow"><span class="eyebrow-dot"></span>راهنمای کوتاه</div>
|
||
<h2>اولین باره<br><strong>رویداد میسازی؟</strong></h2>
|
||
<p class="muted">قبل از انتشار، این چندتا چیز رو روشن کن.</p>
|
||
|
||
<div class="accordion">
|
||
<details>
|
||
<summary>آدمها برای چی میان؟</summary>
|
||
<div class="accordion-body">تو یه جمله بتونی جواب بدی. آخر این برنامه قراره چی تجربه کنن، چی یاد بگیرن، چی ببینن یا چه حسی با خودشون ببرن؟ لازم نیست عجیب بنویسی؛ فقط واضح باش.</div>
|
||
</details>
|
||
<details>
|
||
<summary>رویدادت برای چه کسیه؟</summary>
|
||
<div class="accordion-body">اگه سطح خاص، محدودیت سنی یا وسیله لازم داره قبل از خرید بگو. هر چیزی که ممکنه مهمان بعداً بگه «کاش قبلش میدونستم»، باید قبلش گفته بشه.</div>
|
||
</details>
|
||
<details>
|
||
<summary>ظرفیت واقعی چقدره؟</summary>
|
||
<div class="accordion-body">ظرفیت فقط تعداد صندلیها نیست. یه اتاق ممکنه ۳۰ نفر جا داشته باشه، اما شاید تجربه تو با ۱۲ نفر بهتر اتفاق بیفته.</div>
|
||
</details>
|
||
<details>
|
||
<summary>قیمت رو چطور انتخاب کنم؟</summary>
|
||
<div class="accordion-body">هزینه مکان، مواد، تجهیزات، زمان و ارزشی که تجربه برای مهمان داره رو کنار هم ببین. خیلی ارزان بودن همیشه به معنی راحتتر فروختن نیست.</div>
|
||
</details>
|
||
<details>
|
||
<summary>روز رویداد چی رو چک کنم؟</summary>
|
||
<div class="accordion-body">کمی زودتر برس، فضا و تجهیزات رو چک کن، فهرست مهمانها رو آماده داشته باش و برای چیزهایی که ممکنه خراب بشن یه راه دوم داشته باش.</div>
|
||
</details>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="eyebrow"><span class="eyebrow-dot"></span>سؤالهای قبل از شروع</div>
|
||
<h2>چیزی مونده<br><strong>که باید بدونی؟</strong></h2>
|
||
|
||
<div class="accordion">
|
||
<details>
|
||
<summary>کارمزد قبیله چقدره؟</summary>
|
||
<div class="accordion-body">۷٪ از فروش موفق رویداد.</div>
|
||
</details>
|
||
<details>
|
||
<summary>ساخت رویداد هزینه داره؟</summary>
|
||
<div class="accordion-body">برای ساخت رویداد هزینهای ازت گرفته نمیشه. کارمزد قبیله از فروش موفق محاسبه میشه.</div>
|
||
</details>
|
||
<details>
|
||
<summary>برای میزبانی باید احراز هویت کنم؟</summary>
|
||
<div class="accordion-body">بله. قبل از فعالشدن امکان ساخت رویداد، احراز هویت برگزارکننده لازمه.</div>
|
||
</details>
|
||
<details>
|
||
<summary>اگه مهمان روز برنامه یادش بره چی؟</summary>
|
||
<div class="accordion-body">قبیله قبل از رویداد برای مهمان یادآوری میفرسته. این کار حضور رو تضمین نمیکنه، اما کمک میکنه «یادم رفت» کمتر اتفاق بیفته.</div>
|
||
</details>
|
||
<details>
|
||
<summary>اگه ظرفیت پر بشه چی؟</summary>
|
||
<div class="accordion-body">رزرو مستقیم متوقف میشه و مهمانهای بعدی میتونن وارد فهرست انتظار بشن. اگر جایی آزاد بشه، نفر بعد فرصت ثبتنام پیدا میکنه.</div>
|
||
</details>
|
||
<details>
|
||
<summary>اگه رویداد رو لغو کنم چی؟</summary>
|
||
<div class="accordion-body">رزروهای رویداد لغو میشن و فرایند اطلاعرسانی و بازپرداخت طبق قوانین رویداد و قبیله انجام میشه.</div>
|
||
</details>
|
||
<details>
|
||
<summary>میتونم به مهمانها تخفیف بدم؟</summary>
|
||
<div class="accordion-body">برای رویداد پولی میتونی کد تخفیف درصدی یا مبلغ ثابت بسازی و محدودیت استفاده براش تعیین کنی.</div>
|
||
</details>
|
||
<details>
|
||
<summary>بعد از رویداد چه اتفاقی میافته؟</summary>
|
||
<div class="accordion-body">مهمانهای واجد شرایط میتونن نظر بدن، تو میتونی پاسخ بدی و سابقه رویدادها روی پروفایلت میمونه.</div>
|
||
</details>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="final" id="final-cta">
|
||
<div class="eyebrow" style="color:#ffad67"><span class="eyebrow-dot"></span>از یه جا باید شروع بشه</div>
|
||
<h2>یه جمع، قبل از اینکه جمع بشه،<br><strong style="color:#ffad67">فقط یه ایدهست.</strong></h2>
|
||
<p>
|
||
شاید الان فقط یه موضوع توی ذهنت داری؛ یه بازی، یه چیزی که بلدی یا یه تجربه که فکر میکنی چند نفر دیگه هم باید امتحانش کنن.
|
||
</p>
|
||
<a class="cta js-start" href="file:///C:/Users/user/Downloads/ghabilee-become-host-mobile.html#start">اولین رویدادم رو میسازم</a>
|
||
<div class="cta-note" style="color:#c8c4cb">ساخت رویداد رایگانه · کارمزد فقط از فروش موفق</div>
|
||
</section>
|
||
|
||
<footer class="footer">قبیله · آدمها دور چیزهایی که دوست دارن جمع میشن.</footer>
|
||
</main>
|
||
|
||
<div class="sticky-cta hidden" id="stickyCta" aria-label="ساخت رویداد">
|
||
<div class="sticky-price"><b>۷٪ از فروش موفق</b><span>ساخت رویداد رایگانه</span></div>
|
||
<button class="sticky-btn" onclick="document.querySelector('#start').scrollIntoView({behavior:'smooth'})">ساخت رویداد</button>
|
||
</div>
|
||
|
||
<script>
|
||
const sticky = document.getElementById('stickyCta');
|
||
const hero = document.getElementById('hero');
|
||
const finalCta = document.getElementById('final-cta');
|
||
|
||
const visibility = {hero:true, final:false};
|
||
|
||
function syncSticky(){
|
||
const shouldHide = visibility.hero || visibility.final;
|
||
sticky.classList.toggle('hidden', shouldHide);
|
||
}
|
||
|
||
const obs = new IntersectionObserver((entries)=>{
|
||
entries.forEach(entry=>{
|
||
if(entry.target === hero) visibility.hero = entry.isIntersecting;
|
||
if(entry.target === finalCta) visibility.final = entry.isIntersecting;
|
||
});
|
||
syncSticky();
|
||
}, {threshold:.12});
|
||
|
||
obs.observe(hero);
|
||
obs.observe(finalCta);
|
||
</script>
|
||
|
||
|
||
</body></html> |