Edit login and registration details
This commit is contained in:
@@ -10,44 +10,37 @@ withDefaults(
|
||||
}>(),
|
||||
{
|
||||
headline: 'همه ارتباطات، یکجا مدیریت میشوند',
|
||||
description: `با ${brand.nameFa} فروش، پشتیبانی و ارتباط با مشتری را در یک پنل یکپارچه مدیریت کنید و رشد پایدار بسازید.`,
|
||||
description: `${brand.nameFa} به شما کمک می کند فروش بیشتر داشته باشید،\nمشتریان را بهتر بشناسید و کسب و کارتان را رشد دهید.`,
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside class="brand-panel" aria-hidden="false">
|
||||
<div class="brand-head">
|
||||
<MentoLogo :size="44" :show-text="false" />
|
||||
<div class="brand-copy">
|
||||
<BrandName />
|
||||
<span>{{ brand.taglineFa }}</span>
|
||||
<div class="brand-main">
|
||||
<div class="brand-head">
|
||||
<MentoLogo :size="70" :show-text="false" />
|
||||
<div class="brand-copy">
|
||||
<BrandName />
|
||||
<span class="tagline">{{ brand.taglineFa }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="brand-body">
|
||||
<h2>{{ headline }}</h2>
|
||||
<p>{{ description }}</p>
|
||||
</div>
|
||||
|
||||
<div class="illustration" aria-hidden="true">
|
||||
<img src="/brand/lagin_pic.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="brand-body">
|
||||
<h2>{{ headline }}</h2>
|
||||
<p>{{ description }}</p>
|
||||
</div>
|
||||
|
||||
<div class="illustration" aria-hidden="true">
|
||||
<div class="dash">
|
||||
<div class="dash-top">
|
||||
<span class="avatar" />
|
||||
<span class="bar short" />
|
||||
<span class="bar" />
|
||||
</div>
|
||||
<div class="chart-line" />
|
||||
<div class="chart-bars">
|
||||
<i /><i /><i /><i /><i />
|
||||
</div>
|
||||
</div>
|
||||
<span class="float chat" />
|
||||
<span class="float people" />
|
||||
<span class="float check" />
|
||||
<span class="float ring" />
|
||||
<span class="plant" />
|
||||
</div>
|
||||
<nav class="brand-foot">
|
||||
<a href="#">شرایط و قوانین</a>
|
||||
<span>|</span>
|
||||
<a href="#">تماس با ما</a>
|
||||
</nav>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
@@ -56,184 +49,110 @@ withDefaults(
|
||||
position: relative;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
padding: clamp(1.4rem, 3vw, 2rem);
|
||||
background:
|
||||
radial-gradient(circle at 20% 10%, rgba(45, 212, 191, 0.18), transparent 42%),
|
||||
linear-gradient(165deg, #f0fdfa 0%, #e6fffa 48%, #f8fafc 100%);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
gap: 0;
|
||||
padding: 2.6rem clamp(1.4rem, 3vw, 2.4rem);
|
||||
background-color: #f5fbfb;
|
||||
background-image:
|
||||
radial-gradient(ellipse 72% 48% at 50% 58%, rgba(45, 212, 191, 0.14), transparent 70%),
|
||||
radial-gradient(circle at 12% 10%, rgba(20, 184, 166, 0.08), transparent 28%),
|
||||
radial-gradient(rgba(13, 148, 136, 0.16) 1.05px, transparent 1.2px);
|
||||
background-size: auto, auto, 20px 20px;
|
||||
overflow: hidden;
|
||||
min-width: 0;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.brand-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1.35rem;
|
||||
}
|
||||
|
||||
.brand-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
gap: 0.85rem;
|
||||
}
|
||||
|
||||
.brand-copy {
|
||||
display: grid;
|
||||
gap: 0.1rem;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.brand-copy strong {
|
||||
font-size: 1.2rem;
|
||||
.brand-copy :deep(.brand-name) {
|
||||
font-size: 2rem;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.brand-copy span {
|
||||
font-size: 0.78rem;
|
||||
.brand-copy .tagline {
|
||||
font-size: 0.88rem;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.brand-body {
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.brand-body h2 {
|
||||
margin: 0 0 0.55rem;
|
||||
font-size: clamp(1.35rem, 2.2vw, 1.75rem);
|
||||
margin: 0 0 0.6rem;
|
||||
font-size: clamp(1.22rem, 1.95vw, 1.52rem);
|
||||
line-height: 1.45;
|
||||
color: #0f172a;
|
||||
font-weight: 800;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.brand-body p {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
color: #64748b;
|
||||
line-height: 1.75;
|
||||
font-size: 0.95rem;
|
||||
max-width: 28ch;
|
||||
line-height: 1.7;
|
||||
font-size: 1.08rem;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.illustration {
|
||||
position: relative;
|
||||
margin-top: auto;
|
||||
min-height: 220px;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.dash {
|
||||
.illustration img {
|
||||
width: min(100%, 460px);
|
||||
height: auto;
|
||||
max-height: 360px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.brand-foot {
|
||||
position: absolute;
|
||||
inset-inline-start: 12%;
|
||||
bottom: 18%;
|
||||
width: min(78%, 280px);
|
||||
aspect-ratio: 1.35;
|
||||
background: rgba(255, 255, 255, 0.88);
|
||||
border: 1px solid rgba(148, 163, 184, 0.35);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
|
||||
padding: 1rem;
|
||||
backdrop-filter: blur(6px);
|
||||
}
|
||||
|
||||
.dash-top {
|
||||
inset-inline: 0;
|
||||
bottom: 1.15rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(145deg, #5eead4, #0d9488);
|
||||
}
|
||||
|
||||
.bar {
|
||||
height: 8px;
|
||||
border-radius: 999px;
|
||||
background: #e2e8f0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.bar.short {
|
||||
flex: 0.55;
|
||||
}
|
||||
|
||||
.chart-line {
|
||||
height: 54px;
|
||||
border-radius: var(--radius);
|
||||
background:
|
||||
linear-gradient(180deg, transparent 55%, rgba(13, 148, 136, 0.12) 55%),
|
||||
radial-gradient(circle at 20% 60%, #14b8a6 3px, transparent 4px),
|
||||
radial-gradient(circle at 45% 35%, #14b8a6 3px, transparent 4px),
|
||||
radial-gradient(circle at 70% 50%, #14b8a6 3px, transparent 4px),
|
||||
radial-gradient(circle at 88% 28%, #14b8a6 3px, transparent 4px);
|
||||
margin-bottom: 0.85rem;
|
||||
}
|
||||
|
||||
.chart-bars {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
gap: 0.45rem;
|
||||
height: 48px;
|
||||
color: #94a3b8;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.chart-bars i {
|
||||
flex: 1;
|
||||
border-radius: 6px 6px 2px 2px;
|
||||
background: linear-gradient(180deg, #5eead4, #0f766e);
|
||||
opacity: 0.85;
|
||||
.brand-foot a {
|
||||
color: #94a3b8;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.chart-bars i:nth-child(1) { height: 45%; }
|
||||
.chart-bars i:nth-child(2) { height: 70%; }
|
||||
.chart-bars i:nth-child(3) { height: 55%; }
|
||||
.chart-bars i:nth-child(4) { height: 88%; }
|
||||
.chart-bars i:nth-child(5) { height: 62%; }
|
||||
|
||||
.float {
|
||||
position: absolute;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: var(--radius);
|
||||
background: #fff;
|
||||
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
|
||||
}
|
||||
|
||||
.float.chat {
|
||||
top: 18%;
|
||||
inset-inline-end: 8%;
|
||||
background:
|
||||
radial-gradient(circle at 35% 40%, #0d9488 0 28%, transparent 29%),
|
||||
linear-gradient(145deg, #ecfdf5, #fff);
|
||||
}
|
||||
|
||||
.float.people {
|
||||
top: 42%;
|
||||
inset-inline-start: 4%;
|
||||
background:
|
||||
radial-gradient(circle at 50% 38%, #14b8a6 0 22%, transparent 23%),
|
||||
linear-gradient(145deg, #f0fdfa, #fff);
|
||||
}
|
||||
|
||||
.float.check {
|
||||
bottom: 28%;
|
||||
inset-inline-end: 6%;
|
||||
background:
|
||||
linear-gradient(135deg, transparent 42%, #10b981 42% 58%, transparent 58%),
|
||||
linear-gradient(45deg, transparent 48%, #10b981 48% 62%, transparent 62%),
|
||||
#ecfdf5;
|
||||
}
|
||||
|
||||
.float.ring {
|
||||
top: 8%;
|
||||
inset-inline-start: 18%;
|
||||
border-radius: 999px;
|
||||
background:
|
||||
conic-gradient(#0d9488 0 70%, #e2e8f0 70% 100%);
|
||||
mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px));
|
||||
}
|
||||
|
||||
.plant {
|
||||
position: absolute;
|
||||
bottom: 8%;
|
||||
inset-inline-start: 8%;
|
||||
width: 28px;
|
||||
height: 36px;
|
||||
background:
|
||||
radial-gradient(ellipse at 50% 20%, #34d399 0 35%, transparent 36%),
|
||||
linear-gradient(180deg, #0d9488 0 55%, #134e4a 55%);
|
||||
border-radius: 40% 40% 8px 8px;
|
||||
opacity: 0.9;
|
||||
.brand-foot a:hover {
|
||||
color: #0f766e;
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
|
||||
Reference in New Issue
Block a user