soroush.asadi
f15684f7bc
Removed <br> between name parts and added white-space:nowrap. Adjusted clamp min from 2.2rem to 1.6rem so it scales down on small screens without wrapping. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
743 lines
41 KiB
Plaintext
743 lines
41 KiB
Plaintext
@page
|
||
@model IndexModel
|
||
@{
|
||
var h = Model.Hero;
|
||
var a = Model.About;
|
||
var c = Model.Contact;
|
||
var siteName = h.GetValueOrDefault("name", "دکتر سوسن آلطه");
|
||
var heroImg = h.GetValueOrDefault("image", "");
|
||
var badgeHidden = h.GetValueOrDefault("badge_hidden", "") == "true";
|
||
var badgeTitle = h.TryGetValue("badge_title", out var _bt) && !string.IsNullOrWhiteSpace(_bt) ? _bt : "متخصص پوست و زیبایی";
|
||
var badgeSub = h.TryGetValue("badge_subtitle", out var _bs) && !string.IsNullOrWhiteSpace(_bs) ? _bs : "فارغالتحصیل دانشگاه ایران";
|
||
var aboutImg = a.GetValueOrDefault("image", "");
|
||
var yearsExp = a.GetValueOrDefault("years_exp","۱۰+");
|
||
var ig = c.GetValueOrDefault("instagram","");
|
||
var wa = c.GetValueOrDefault("whatsapp","");
|
||
var tg = c.GetValueOrDefault("telegram","");
|
||
}
|
||
|
||
@section Head {
|
||
<title>@ViewData["Title"]</title>
|
||
<meta name="description" content="@h.GetValueOrDefault("subtitle","")" />
|
||
<meta name="keywords" content="دکتر پوست تهران,بوتاکس,لیزر موهای زائد,فیلر,مزوتراپی,زیبایی پوست" />
|
||
<meta property="og:type" content="website" />
|
||
<meta property="og:title" content="@ViewData["Title"]" />
|
||
<meta property="og:description" content="@h.GetValueOrDefault("subtitle","")" />
|
||
<meta property="og:locale" content="fa_IR" />
|
||
<link rel="canonical" href="@(Request.Scheme + "://" + Request.Host + "/")" />
|
||
<script type="application/ld+json">
|
||
{
|
||
"@@context":"https://schema.org",
|
||
"@@type":["MedicalBusiness","LocalBusiness"],
|
||
"name":"@siteName",
|
||
"description":"@h.GetValueOrDefault("subtitle","")",
|
||
"url":"@(Request.Scheme + "://" + Request.Host)",
|
||
"telephone":"@c.GetValueOrDefault("phone","")",
|
||
"address":{"@@type":"PostalAddress","addressLocality":"تهران","addressCountry":"IR","streetAddress":"@c.GetValueOrDefault("address","")"},
|
||
"openingHours":"@c.GetValueOrDefault("hours","")",
|
||
"medicalSpecialty":"Dermatology"
|
||
}
|
||
</script>
|
||
<style>
|
||
/* ─── Hero ─────────────────────────────────────────────────── */
|
||
#hero { min-height:100svh; display:flex; align-items:center; padding:100px 0 3rem; position:relative; overflow:hidden; }
|
||
#hero::before { content:''; position:absolute; top:-120px; left:-120px; width:600px; height:600px; background:radial-gradient(circle, rgba(184,149,90,0.10) 0%, transparent 70%); pointer-events:none; }
|
||
#hero::after { content:''; position:absolute; bottom:-80px; right:-80px; width:500px; height:500px; background:radial-gradient(circle, rgba(184,149,90,0.07) 0%, transparent 70%); pointer-events:none; }
|
||
.hero-inner { max-width:1200px; margin:0 auto; padding:0 2rem; display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
|
||
.hero-text { animation: fadeUp 0.9s ease both; }
|
||
.hero-tag { display:inline-block; background:var(--gold-pale); color:var(--gold); font-size:0.78rem; font-weight:500; padding:0.35rem 1rem; border-radius:50px; margin-bottom:1.4rem; letter-spacing:0.05em; }
|
||
.hero-name { font-size:clamp(1.6rem,3.5vw,3.2rem); font-weight:700; line-height:1.3; color:var(--dark); margin-bottom:0.6rem; white-space:nowrap; }
|
||
.hero-name span { color:var(--gold); }
|
||
.hero-subtitle { font-size:1.05rem; color:var(--mid); font-weight:400; margin-bottom:1.8rem; line-height:1.9; }
|
||
.hero-stats { display:flex; gap:2.5rem; margin-bottom:2.5rem; }
|
||
.stat-item { text-align:center; }
|
||
.stat-number { font-size:2rem; font-weight:700; color:var(--gold); display:block; line-height:1; }
|
||
.stat-label { font-size:0.78rem; color:var(--light); margin-top:0.3rem; }
|
||
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; }
|
||
.hero-image { position:relative; animation:fadeUp 0.9s 0.2s ease both; }
|
||
.hero-image-frame { width:100%; aspect-ratio:4/5; border-radius:30% 70% 70% 30% / 30% 30% 70% 70%; background:linear-gradient(145deg, var(--gold-pale) 0%, #EFE3CC 100%); position:relative; overflow:hidden; box-shadow:0 30px 80px rgba(184,149,90,0.2); }
|
||
.hero-image-frame img { width:100%; height:100%; object-fit:cover; }
|
||
.hero-image-placeholder { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; color:var(--gold); }
|
||
.hero-image-placeholder svg { width:80px; height:80px; opacity:0.5; }
|
||
.hero-image-placeholder p { font-size:0.85rem; opacity:0.6; }
|
||
.hero-badge { position:absolute; bottom:2rem; left:-2rem; background:var(--white); border-radius:16px; padding:1rem 1.4rem; box-shadow:0 10px 40px rgba(0,0,0,0.1); display:flex; align-items:center; gap:0.8rem; animation:float 3s ease-in-out infinite; }
|
||
.badge-icon { width:42px; height:42px; background:var(--gold-pale); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
|
||
.badge-icon svg { width:20px; height:20px; color:var(--gold); }
|
||
.badge-text { font-size:0.82rem; line-height:1.4; }
|
||
.badge-text strong { color:var(--gold); display:block; font-size:0.9rem; }
|
||
/* ─── About ─────────────────────────────────────────────────── */
|
||
#about { background:var(--white); }
|
||
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center; }
|
||
.about-image-wrap { position:relative; }
|
||
.about-img-box { width:100%; aspect-ratio:3/4; border-radius:20px; background:linear-gradient(160deg, var(--gold-pale) 0%, #EDE0CA 100%); overflow:hidden; position:relative; }
|
||
.about-img-box img { width:100%; height:100%; object-fit:cover; }
|
||
.about-img-placeholder { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1rem; color:var(--gold); opacity:0.5; }
|
||
.about-img-placeholder svg { width:60px; height:60px; }
|
||
.about-accent-box { position:absolute; bottom:-2rem; right:-2rem; background:var(--gold); color:var(--white); border-radius:16px; padding:1.5rem 2rem; text-align:center; }
|
||
.about-accent-box .big { font-size:2.2rem; font-weight:700; display:block; }
|
||
.about-accent-box .small { font-size:0.82rem; opacity:0.85; }
|
||
.credential-list { list-style:none; display:flex; flex-direction:column; gap:1rem; margin-top:2rem; }
|
||
.credential-list li { display:flex; align-items:flex-start; gap:0.85rem; font-size:0.95rem; color:var(--mid); line-height:1.6; }
|
||
.cred-icon { width:28px; height:28px; border-radius:50%; background:var(--gold-pale); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:0.1rem; }
|
||
.cred-icon svg { width:13px; height:13px; color:var(--gold); }
|
||
/* ─── Services ─────────────────────────────────────────────── */
|
||
#services { background:var(--section-bg); }
|
||
.services-header { text-align:center; margin-bottom:3.5rem; }
|
||
.services-header .divider { margin:1.2rem auto 0; }
|
||
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
|
||
.service-card { background:var(--white); border-radius:20px; padding:2rem; border:1px solid var(--border); transition:transform 0.3s, box-shadow 0.3s, border-color 0.3s; position:relative; overflow:hidden; }
|
||
.service-card::before { content:''; position:absolute; top:0; right:0; width:80px; height:80px; background:radial-gradient(circle at top right, rgba(184,149,90,0.08), transparent 70%); }
|
||
.service-card:hover { transform:translateY(-6px); box-shadow:0 20px 50px rgba(184,149,90,0.15); border-color:var(--gold-pale); }
|
||
.service-icon { width:56px; height:56px; background:var(--gold-pale); border-radius:16px; display:flex; align-items:center; justify-content:center; margin-bottom:1.3rem; }
|
||
.service-icon svg { width:26px; height:26px; color:var(--gold); }
|
||
.service-title { font-size:1.05rem; font-weight:600; color:var(--dark); margin-bottom:0.6rem; }
|
||
.service-desc { font-size:0.88rem; color:var(--mid); line-height:1.8; }
|
||
/* ─── Service Before/After ────────────────────────────────── */
|
||
.svc-ba { margin-top:1.2rem; border-radius:12px; overflow:hidden; position:relative; aspect-ratio:4/3; cursor:pointer; user-select:none; }
|
||
.svc-ba img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:opacity 0.45s ease; }
|
||
.svc-ba .ba-after { opacity:0; }
|
||
.svc-ba.show-after .ba-before { opacity:0; }
|
||
.svc-ba.show-after .ba-after { opacity:1; }
|
||
.svc-ba-btns { position:absolute; bottom:0; left:0; right:0; display:flex; z-index:2; }
|
||
.svc-ba-btn { flex:1; padding:0.45rem 0; text-align:center; font-size:0.78rem; font-weight:700; font-family:'Vazirmatn',sans-serif; border:none; cursor:pointer; transition:all 0.25s; background:rgba(0,0,0,0.42); color:rgba(255,255,255,0.75); letter-spacing:0.03em; }
|
||
.svc-ba-btn.active { background:var(--gold); color:#fff; }
|
||
.svc-ba-only { margin-top:1.2rem; border-radius:12px; overflow:hidden; position:relative; aspect-ratio:4/3; }
|
||
.svc-ba-only img { width:100%; height:100%; object-fit:cover; display:block; }
|
||
.svc-ba-only .ba-solo-label { position:absolute; bottom:0; left:0; right:0; padding:0.4rem; text-align:center; font-size:0.78rem; font-weight:700; font-family:'Vazirmatn',sans-serif; background:var(--gold); color:#fff; }
|
||
/* ─── Gallery ──────────────────────────────────────────────── */
|
||
#gallery { background:var(--white); }
|
||
.gallery-header { margin-bottom:3rem; }
|
||
.gallery-tabs { display:flex; gap:0.6rem; margin-bottom:2.5rem; flex-wrap:wrap; }
|
||
.tab-btn { background:transparent; border:1.5px solid var(--border); color:var(--mid); padding:0.45rem 1.2rem; border-radius:50px; font-family:'Vazirmatn',sans-serif; font-size:0.85rem; cursor:pointer; transition:all 0.25s; }
|
||
.tab-btn.active, .tab-btn:hover { background:var(--gold); border-color:var(--gold); color:var(--white); }
|
||
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
|
||
.gallery-item { border-radius:16px; overflow:hidden; aspect-ratio:4/3; background:linear-gradient(135deg, var(--gold-pale), #EDE0CA); position:relative; cursor:pointer; }
|
||
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.4s; }
|
||
.gallery-item:hover img { transform:scale(1.05); }
|
||
.gallery-placeholder { width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.6rem; color:var(--gold); opacity:0.45; }
|
||
.gallery-placeholder svg { width:36px; height:36px; }
|
||
.gallery-placeholder p { font-size:0.75rem; }
|
||
.gallery-item-overlay { position:absolute; inset:0; background:rgba(184,149,90,0); display:flex; align-items:center; justify-content:center; transition:background 0.3s; }
|
||
.gallery-item:hover .gallery-item-overlay { background:rgba(184,149,90,0.15); }
|
||
/* ─── Testimonials ─────────────────────────────────────────── */
|
||
#testimonials { background:var(--section-bg); }
|
||
.testimonials-header { text-align:center; margin-bottom:3rem; }
|
||
.testimonials-header .divider { margin:1rem auto 0; }
|
||
.testimonials-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
|
||
.testimonial-card { background:var(--white); border-radius:20px; padding:2rem; border:1px solid var(--border); position:relative; }
|
||
.testimonial-card::before { content:'"'; position:absolute; top:1rem; left:1.5rem; font-size:4rem; color:var(--gold-pale); line-height:1; font-family:Georgia,serif; }
|
||
.testimonial-stars { display:flex; gap:3px; margin-bottom:1rem; }
|
||
.star { color:var(--gold); font-size:1rem; }
|
||
.testimonial-text { font-size:0.9rem; color:var(--mid); line-height:1.9; margin-bottom:1.5rem; }
|
||
.testimonial-author { display:flex; align-items:center; gap:0.8rem; }
|
||
.author-avatar { width:42px; height:42px; border-radius:50%; background:var(--gold-pale); display:flex; align-items:center; justify-content:center; font-size:1.1rem; flex-shrink:0; }
|
||
.author-name { font-size:0.88rem; font-weight:600; color:var(--dark); }
|
||
.author-date { font-size:0.78rem; color:var(--light); }
|
||
/* ─── Blog Preview ─────────────────────────────────────────── */
|
||
#blog-preview { background:var(--white); }
|
||
.blog-preview-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
|
||
.post-card-prev { background:var(--bg); border-radius:16px; border:1px solid var(--border); overflow:hidden; transition:transform 0.3s,box-shadow 0.3s; display:flex; flex-direction:column; }
|
||
.post-card-prev:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(184,149,90,0.15); }
|
||
.post-card-prev-img { aspect-ratio:16/9; background:linear-gradient(135deg,var(--gold-pale),#EDE0CA); display:flex; align-items:center; justify-content:center; color:var(--gold); font-size:2rem; overflow:hidden; }
|
||
.post-card-prev-img img { width:100%; height:100%; object-fit:cover; }
|
||
.post-card-prev-body { padding:1.3rem; flex:1; display:flex; flex-direction:column; gap:0.6rem; }
|
||
.post-cat-label { font-size:0.72rem; font-weight:600; color:var(--gold); background:var(--gold-pale); padding:0.2rem 0.7rem; border-radius:50px; display:inline-block; }
|
||
.post-card-prev-title { font-size:1rem; font-weight:600; color:var(--dark); line-height:1.5; }
|
||
.post-card-prev-title:hover { color:var(--gold); }
|
||
.post-card-prev-excerpt { font-size:0.85rem; color:var(--mid); line-height:1.7; flex:1; }
|
||
.post-card-prev-meta { display:flex; align-items:center; justify-content:space-between; font-size:0.75rem; color:var(--light); margin-top:auto; padding-top:0.6rem; border-top:1px solid var(--border); }
|
||
.read-more-link { color:var(--gold); font-weight:500; font-size:0.82rem; }
|
||
.blog-preview-more { text-align:center; margin-top:2.5rem; }
|
||
/* ─── FAQ ──────────────────────────────────────────────────── */
|
||
#faq { background:var(--section-bg); }
|
||
.faq-list { max-width:780px; margin:0 auto; display:flex; flex-direction:column; gap:0.8rem; }
|
||
.faq-item { background:var(--white); border-radius:12px; border:1px solid var(--border); overflow:hidden; }
|
||
.faq-item summary { padding:1.25rem 1.5rem; cursor:pointer; font-weight:600; list-style:none; display:flex; justify-content:space-between; align-items:center; color:var(--dark); font-size:0.95rem; }
|
||
.faq-item summary::-webkit-details-marker { display:none; }
|
||
.faq-item summary::after { content:"＋"; color:var(--gold); font-size:1.1rem; flex-shrink:0; margin-right:1rem; }
|
||
.faq-item[open] summary::after { content:"－"; }
|
||
.faq-answer { padding:0 1.5rem 1.25rem; color:var(--mid); font-size:0.92rem; line-height:1.85; border-top:1px solid var(--border); }
|
||
/* ─── Contact ──────────────────────────────────────────────── */
|
||
#contact { background:var(--white); }
|
||
.contact-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:4rem; align-items:start; }
|
||
.contact-info-list { display:flex; flex-direction:column; gap:1.5rem; margin-top:2rem; }
|
||
.contact-info-item { display:flex; align-items:flex-start; gap:1rem; }
|
||
.info-icon { width:48px; height:48px; background:var(--gold-pale); border-radius:14px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
|
||
.info-icon svg { width:22px; height:22px; color:var(--gold); }
|
||
.info-text strong { display:block; font-size:0.9rem; color:var(--dark); margin-bottom:0.2rem; }
|
||
.info-text p { font-size:0.88rem; color:var(--mid); line-height:1.6; }
|
||
.social-links { display:flex; gap:0.8rem; margin-top:2.5rem; }
|
||
.social-link { width:44px; height:44px; border-radius:12px; background:var(--gold-pale); display:flex; align-items:center; justify-content:center; color:var(--gold); text-decoration:none; transition:background 0.25s, transform 0.2s; }
|
||
.social-link:hover { background:var(--gold); color:var(--white); transform:translateY(-3px); }
|
||
.social-link svg { width:20px; height:20px; }
|
||
.contact-form { background:var(--section-bg); border-radius:24px; padding:2.5rem; border:1px solid var(--border); }
|
||
.form-title { font-size:1.2rem; font-weight:600; color:var(--dark); margin-bottom:0.5rem; }
|
||
.form-sub { font-size:0.88rem; color:var(--mid); margin-bottom:2rem; }
|
||
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
|
||
.form-group { display:flex; flex-direction:column; gap:0.4rem; margin-bottom:1.2rem; }
|
||
.form-group label { font-size:0.85rem; font-weight:500; color:var(--dark); }
|
||
.form-group input, .form-group select, .form-group textarea { background:var(--white); border:1.5px solid var(--border); border-radius:12px; padding:0.75rem 1rem; font-family:'Vazirmatn',sans-serif; font-size:0.9rem; color:var(--dark); direction:rtl; transition:border-color 0.25s, box-shadow 0.25s; outline:none; }
|
||
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(184,149,90,0.12); }
|
||
.form-group textarea { resize:vertical; min-height:110px; }
|
||
.form-submit { width:100%; background:var(--gold); color:var(--white); border:none; padding:0.9rem; border-radius:12px; font-family:'Vazirmatn',sans-serif; font-size:0.95rem; font-weight:600; cursor:pointer; transition:background 0.25s, transform 0.2s; }
|
||
.form-submit:hover { background:var(--gold-light); transform:translateY(-2px); }
|
||
/* ─── Responsive ───────────────────────────────────────────── */
|
||
@@media (max-width:900px) {
|
||
.hero-inner { grid-template-columns:1fr; text-align:center; gap:2.5rem; }
|
||
.hero-text { order:1; }
|
||
.hero-image { order:2; max-width:320px; margin:0 auto; }
|
||
.hero-stats { justify-content:center; gap:2rem; }
|
||
.hero-actions { justify-content:center; flex-wrap:wrap; gap:.8rem; }
|
||
.hero-badge { left:0; right:0; margin:0 auto; width:fit-content; }
|
||
.about-grid { grid-template-columns:1fr; gap:3rem; }
|
||
.about-accent-box { right:0; bottom:-1rem; }
|
||
.services-grid { grid-template-columns:repeat(2,1fr); }
|
||
.gallery-grid { grid-template-columns:repeat(2,1fr); }
|
||
.testimonials-grid { grid-template-columns:1fr; }
|
||
.contact-grid { grid-template-columns:1fr; gap:2.5rem; }
|
||
.blog-preview-grid { grid-template-columns:repeat(2,1fr); }
|
||
}
|
||
@@media (max-width:600px) {
|
||
section { padding:3.5rem 0; }
|
||
.container { padding:0 1.2rem; }
|
||
.hero-inner { padding:0 1.2rem; gap:2rem; }
|
||
.hero-image { max-width:260px; }
|
||
.hero-stats { gap:1.5rem; }
|
||
.hero-stats .stat-number { font-size:1.6rem; }
|
||
.hero-badge { position:static; margin-top:1rem; width:auto; border-radius:12px; padding:.7rem 1rem; }
|
||
.services-grid { grid-template-columns:1fr; }
|
||
.gallery-grid { grid-template-columns:repeat(2,1fr); gap:.8rem; }
|
||
.blog-preview-grid { grid-template-columns:1fr; }
|
||
.form-row { grid-template-columns:1fr; }
|
||
.about-accent-box { position:static; border-radius:12px; margin-top:1.5rem; display:inline-block; }
|
||
.about-image-wrap { text-align:center; }
|
||
.testimonials-grid { grid-template-columns:1fr; }
|
||
.section-title { font-size:1.5rem; }
|
||
.faq-item summary { font-size:.9rem; padding:1rem 1.2rem; }
|
||
.faq-answer { padding:0 1.2rem 1rem; font-size:.88rem; }
|
||
}
|
||
@@media (max-width:380px) {
|
||
.gallery-grid { grid-template-columns:1fr; }
|
||
.hero-actions .btn-primary,
|
||
.hero-actions .btn-secondary { width:100%; text-align:center; }
|
||
}
|
||
</style>
|
||
}
|
||
|
||
<!-- ══════ HERO ══════ -->
|
||
<section id="hero">
|
||
<div class="hero-inner">
|
||
<div class="hero-text">
|
||
<span class="hero-tag">@h.GetValueOrDefault("tag","پزشک عمومی و متخصص زیبایی پوست")</span>
|
||
<h1 class="hero-name">@h.GetValueOrDefault("name_line1","دکتر") <span>@h.GetValueOrDefault("name_line2","سوسن")</span> @h.GetValueOrDefault("name_line3","آلطه")</h1>
|
||
<p class="hero-subtitle">@h.GetValueOrDefault("subtitle","با بیش از یک دهه تجربه در حوزهی زیبایی و مراقبت از پوست، زیبایی واقعی شما را با علم و هنر همراه میکنیم.")</p>
|
||
<div class="hero-stats">
|
||
<div class="stat-item">
|
||
<span class="stat-number">@h.GetValueOrDefault("stat1_num","+۱۰")</span>
|
||
<span class="stat-label">@h.GetValueOrDefault("stat1_lbl","سال تجربه")</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-number">@h.GetValueOrDefault("stat2_num","+۵۰۰")</span>
|
||
<span class="stat-label">@h.GetValueOrDefault("stat2_lbl","بیمار راضی")</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-number">@h.GetValueOrDefault("stat3_num","+۱۵")</span>
|
||
<span class="stat-label">@h.GetValueOrDefault("stat3_lbl","خدمات تخصصی")</span>
|
||
</div>
|
||
</div>
|
||
<div class="hero-actions">
|
||
<a href="#contact" class="btn-primary">@h.GetValueOrDefault("cta_primary","رزرو نوبت")</a>
|
||
<a href="#about" class="btn-secondary">@h.GetValueOrDefault("cta_secondary","بیشتر بدانید")</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hero-image">
|
||
<div class="hero-image-frame">
|
||
@if (!string.IsNullOrEmpty(heroImg))
|
||
{
|
||
<img src="@heroImg" alt="@siteName" />
|
||
}
|
||
else
|
||
{
|
||
<div class="hero-image-placeholder">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
|
||
<circle cx="12" cy="7" r="4"/>
|
||
</svg>
|
||
<p>تصویر دکتر</p>
|
||
</div>
|
||
}
|
||
</div>
|
||
@if (!badgeHidden)
|
||
{
|
||
<div class="hero-badge">
|
||
<div class="badge-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
|
||
</svg>
|
||
</div>
|
||
<div class="badge-text">
|
||
<strong>@badgeTitle</strong>
|
||
@badgeSub
|
||
</div>
|
||
</div>
|
||
}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════ ABOUT ══════ -->
|
||
<section id="about">
|
||
<div class="container">
|
||
<div class="about-grid">
|
||
<div class="about-image-wrap fade-in">
|
||
<div class="about-img-box">
|
||
@if (!string.IsNullOrEmpty(aboutImg))
|
||
{
|
||
<img src="@aboutImg" alt="@siteName" />
|
||
}
|
||
else
|
||
{
|
||
<div class="about-img-placeholder">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
|
||
<circle cx="12" cy="7" r="4"/>
|
||
</svg>
|
||
</div>
|
||
}
|
||
</div>
|
||
<div class="about-accent-box">
|
||
<span class="big">@yearsExp</span>
|
||
<span class="small">سال تجربه</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="fade-in">
|
||
<span class="section-label">درباره من</span>
|
||
<h2 class="section-title">@a.GetValueOrDefault("title","سلامت و زیبایی پوست<br>هدف اصلی من است")</h2>
|
||
<div class="divider"></div>
|
||
<p class="section-desc">@a.GetValueOrDefault("bio","دکتر سوسن آلطه، پزشک عمومی و متخصص زیبایی پوست با سالها تجربه در ارائه خدمات پیشرفته پوست و زیبایی.")</p>
|
||
<ul class="credential-list">
|
||
@foreach (var key in new[] { "cred1","cred2","cred3","cred4","cred5" })
|
||
{
|
||
var val = a.GetValueOrDefault(key, "");
|
||
if (!string.IsNullOrEmpty(val))
|
||
{
|
||
<li>
|
||
<div class="cred-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
|
||
<polyline points="20 6 9 17 4 12"/>
|
||
</svg>
|
||
</div>
|
||
<span>@val</span>
|
||
</li>
|
||
}
|
||
}
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════ SERVICES ══════ -->
|
||
<section id="services">
|
||
<div class="container">
|
||
<div class="services-header fade-in">
|
||
<span class="section-label">خدمات ما</span>
|
||
<h2 class="section-title">طیف گستردهای از خدمات<br>زیبایی و مراقبت از پوست</h2>
|
||
<div class="divider"></div>
|
||
</div>
|
||
<div class="services-grid">
|
||
@foreach (var svc in Model.Services)
|
||
{
|
||
var hasBefore = !string.IsNullOrEmpty(svc.BeforeImageUrl);
|
||
var hasAfter = !string.IsNullOrEmpty(svc.AfterImageUrl);
|
||
<div class="service-card fade-in">
|
||
<div class="service-icon">
|
||
@if (!string.IsNullOrEmpty(svc.IconSvg))
|
||
{
|
||
@Html.Raw(svc.IconSvg)
|
||
}
|
||
else
|
||
{
|
||
@Html.Raw(IndexModel.ServiceIconSvg(svc.Title))
|
||
}
|
||
</div>
|
||
<div class="service-title">@svc.Title</div>
|
||
<p class="service-desc">@svc.Description</p>
|
||
@if (hasBefore && hasAfter)
|
||
{
|
||
<div class="svc-ba" onclick="toggleBA(this)" title="برای مشاهده قبل/بعد کلیک کنید">
|
||
<img class="ba-before" src="@svc.BeforeImageUrl" alt="قبل از درمان @svc.Title" loading="lazy"/>
|
||
<img class="ba-after" src="@svc.AfterImageUrl" alt="بعد از درمان @svc.Title" loading="lazy"/>
|
||
<div class="svc-ba-btns">
|
||
<button class="svc-ba-btn active" type="button">قبل</button>
|
||
<button class="svc-ba-btn" type="button">بعد</button>
|
||
</div>
|
||
</div>
|
||
}
|
||
else if (hasBefore)
|
||
{
|
||
<div class="svc-ba-only">
|
||
<img src="@svc.BeforeImageUrl" alt="قبل از درمان @svc.Title" loading="lazy"/>
|
||
<div class="ba-solo-label">قبل از درمان</div>
|
||
</div>
|
||
}
|
||
else if (hasAfter)
|
||
{
|
||
<div class="svc-ba-only">
|
||
<img src="@svc.AfterImageUrl" alt="بعد از درمان @svc.Title" loading="lazy"/>
|
||
<div class="ba-solo-label">بعد از درمان</div>
|
||
</div>
|
||
}
|
||
</div>
|
||
}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════ GALLERY ══════ -->
|
||
<section id="gallery">
|
||
<div class="container">
|
||
<div class="gallery-header fade-in">
|
||
<span class="section-label">گالری</span>
|
||
<h2 class="section-title">نتایج قبل و بعد</h2>
|
||
<div class="divider"></div>
|
||
<p class="section-desc">نمونهای از نتایج فوقالعاده درمانهای انجامشده توسط دکتر آلطه.</p>
|
||
</div>
|
||
<div class="gallery-tabs fade-in">
|
||
<button class="tab-btn active">همه</button>
|
||
<button class="tab-btn">بوتاکس</button>
|
||
<button class="tab-btn">لیزر</button>
|
||
<button class="tab-btn">مزوتراپی</button>
|
||
<button class="tab-btn">پاکسازی</button>
|
||
</div>
|
||
<div class="gallery-grid">
|
||
@if (Model.Gallery.Any())
|
||
{
|
||
@foreach (var item in Model.Gallery)
|
||
{
|
||
<div class="gallery-item fade-in">
|
||
@if (!string.IsNullOrEmpty(item.ImageUrl))
|
||
{
|
||
<img src="@item.ImageUrl" alt="@item.Caption" loading="lazy" />
|
||
}
|
||
else
|
||
{
|
||
<div class="gallery-placeholder">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/>
|
||
<polyline points="21 15 16 10 5 21"/>
|
||
</svg>
|
||
<p>تصویر قبل و بعد</p>
|
||
</div>
|
||
}
|
||
<div class="gallery-item-overlay"></div>
|
||
</div>
|
||
}
|
||
}
|
||
else
|
||
{
|
||
@for (int i = 0; i < 6; i++)
|
||
{
|
||
<div class="gallery-item fade-in">
|
||
<div class="gallery-placeholder">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/>
|
||
<polyline points="21 15 16 10 5 21"/>
|
||
</svg>
|
||
<p>تصویر قبل و بعد</p>
|
||
</div>
|
||
<div class="gallery-item-overlay"></div>
|
||
</div>
|
||
}
|
||
}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════ TESTIMONIALS ══════ -->
|
||
<section id="testimonials">
|
||
<div class="container">
|
||
<div class="testimonials-header fade-in">
|
||
<span class="section-label">نظرات بیماران</span>
|
||
<h2 class="section-title">بیماران ما چه میگویند</h2>
|
||
<div class="divider"></div>
|
||
</div>
|
||
<div class="testimonials-grid">
|
||
@foreach (var t in Model.Testimonials)
|
||
{
|
||
<div class="testimonial-card fade-in">
|
||
<div class="testimonial-stars">
|
||
@for (int i = 0; i < (t.Rating > 0 ? t.Rating : 5); i++)
|
||
{
|
||
<span class="star">★</span>
|
||
}
|
||
</div>
|
||
<p class="testimonial-text">@t.Text</p>
|
||
<div class="testimonial-author">
|
||
<div class="author-avatar">@(string.IsNullOrEmpty(t.AuthorEmoji) ? "👩" : t.AuthorEmoji)</div>
|
||
<div>
|
||
<div class="author-name">@t.AuthorName</div>
|
||
<div class="author-date">@t.Date</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════ BLOG PREVIEW ══════ -->
|
||
@if (Model.RecentPosts.Any())
|
||
{
|
||
<section id="blog-preview">
|
||
<div class="container">
|
||
<div class="fade-in" style="margin-bottom:3.5rem;">
|
||
<span class="section-label">وبلاگ</span>
|
||
<h2 class="section-title">آخرین مقالات</h2>
|
||
<div class="divider"></div>
|
||
<p class="section-desc">دانش و تجربه در حوزه زیبایی پوست</p>
|
||
</div>
|
||
<div class="blog-preview-grid">
|
||
@foreach (var post in Model.RecentPosts)
|
||
{
|
||
<div class="post-card-prev fade-in">
|
||
<div class="post-card-prev-img">
|
||
@if (!string.IsNullOrEmpty(post.FeaturedImage))
|
||
{
|
||
<img src="@post.FeaturedImage" alt="@post.Title" loading="lazy" />
|
||
}
|
||
else { <span>📝</span> }
|
||
</div>
|
||
<div class="post-card-prev-body">
|
||
@if (post.Category != null)
|
||
{
|
||
<span class="post-cat-label">@post.Category.Name</span>
|
||
}
|
||
<a href="/blog/@post.Slug" class="post-card-prev-title">@post.Title</a>
|
||
<p class="post-card-prev-excerpt">@(post.Excerpt.Length > 120 ? post.Excerpt.Substring(0, 120) + "..." : post.Excerpt)</p>
|
||
<div class="post-card-prev-meta">
|
||
<span>🕐 @post.ReadingTimeMinutes دقیقه | 👁 @post.ViewCount</span>
|
||
<a href="/blog/@post.Slug" class="read-more-link">ادامه مطلب ←</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
}
|
||
</div>
|
||
<div class="blog-preview-more">
|
||
<a href="/blog" class="btn-secondary">مشاهده همه مقالات</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
}
|
||
|
||
<!-- ══════ FAQ ══════ -->
|
||
<section id="faq">
|
||
<div class="container">
|
||
<div class="fade-in" style="margin-bottom:3rem;">
|
||
<span class="section-label">سوالات متداول</span>
|
||
<h2 class="section-title">پاسخ به پرسشهای رایج</h2>
|
||
<div class="divider"></div>
|
||
</div>
|
||
<div class="faq-list">
|
||
@foreach (var faq in Model.Faqs)
|
||
{
|
||
<details class="faq-item">
|
||
<summary>@faq.Question</summary>
|
||
<div class="faq-answer">@faq.Answer</div>
|
||
</details>
|
||
}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══════ CONTACT ══════ -->
|
||
<section id="contact">
|
||
<div class="container">
|
||
<div class="contact-grid">
|
||
<div class="fade-in">
|
||
<span class="section-label">تماس با ما</span>
|
||
<h2 class="section-title">رزرو نوبت<br>و مشاوره</h2>
|
||
<div class="divider"></div>
|
||
<p class="section-desc">برای رزرو نوبت یا دریافت مشاوره رایگان با ما در تماس باشید.</p>
|
||
<div class="contact-info-list">
|
||
@if (!string.IsNullOrEmpty(c.GetValueOrDefault("phone","")))
|
||
{
|
||
<div class="contact-info-item">
|
||
<div class="info-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 13.6a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 3h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 10.6a16 16 0 0 0 6 6l.91-.91a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/>
|
||
</svg>
|
||
</div>
|
||
<div class="info-text">
|
||
<strong>تلفن تماس</strong>
|
||
<p>@c.GetValueOrDefault("phone","")</p>
|
||
</div>
|
||
</div>
|
||
}
|
||
@if (!string.IsNullOrEmpty(c.GetValueOrDefault("email","")))
|
||
{
|
||
<div class="contact-info-item">
|
||
<div class="info-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
|
||
<polyline points="22,6 12,13 2,6"/>
|
||
</svg>
|
||
</div>
|
||
<div class="info-text">
|
||
<strong>ایمیل</strong>
|
||
<p>@c.GetValueOrDefault("email","")</p>
|
||
</div>
|
||
</div>
|
||
}
|
||
@if (!string.IsNullOrEmpty(c.GetValueOrDefault("address","")))
|
||
{
|
||
<div class="contact-info-item">
|
||
<div class="info-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
|
||
<circle cx="12" cy="10" r="3"/>
|
||
</svg>
|
||
</div>
|
||
<div class="info-text">
|
||
<strong>آدرس مطب</strong>
|
||
<p>@c.GetValueOrDefault("address","")</p>
|
||
</div>
|
||
</div>
|
||
}
|
||
@if (!string.IsNullOrEmpty(c.GetValueOrDefault("hours","")))
|
||
{
|
||
<div class="contact-info-item">
|
||
<div class="info-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<circle cx="12" cy="12" r="10"/>
|
||
<polyline points="12 6 12 12 16 14"/>
|
||
</svg>
|
||
</div>
|
||
<div class="info-text">
|
||
<strong>ساعات کاری</strong>
|
||
<p>@c.GetValueOrDefault("hours","")</p>
|
||
</div>
|
||
</div>
|
||
}
|
||
</div>
|
||
<div class="social-links">
|
||
@if (!string.IsNullOrEmpty(ig))
|
||
{
|
||
<a href="@ig" class="social-link" target="_blank" rel="noopener" title="اینستاگرام">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
|
||
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
|
||
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
|
||
</svg>
|
||
</a>
|
||
}
|
||
@if (!string.IsNullOrEmpty(wa))
|
||
{
|
||
<a href="@wa" class="social-link" target="_blank" rel="noopener" title="واتساپ">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
|
||
</svg>
|
||
</a>
|
||
}
|
||
@if (!string.IsNullOrEmpty(tg))
|
||
{
|
||
<a href="@tg" class="social-link" target="_blank" rel="noopener" title="تلگرام">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<line x1="22" y1="2" x2="11" y2="13"/>
|
||
<polygon points="22 2 15 22 11 13 2 9 22 2"/>
|
||
</svg>
|
||
</a>
|
||
}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="contact-form fade-in">
|
||
<div class="form-title">رزرو نوبت آنلاین</div>
|
||
<p class="form-sub">فرم زیر را پر کنید، در اسرع وقت با شما تماس میگیریم.</p>
|
||
<form onsubmit="handleSubmit(event)">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label>نام</label>
|
||
<input type="text" placeholder="نام شما" required />
|
||
</div>
|
||
<div class="form-group">
|
||
<label>نام خانوادگی</label>
|
||
<input type="text" placeholder="نام خانوادگی" required />
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>شماره موبایل</label>
|
||
<input type="tel" placeholder="09XX-XXX-XXXX" required />
|
||
</div>
|
||
<div class="form-group">
|
||
<label>نوع خدمت مورد نظر</label>
|
||
<select>
|
||
<option value="" disabled selected>انتخاب خدمت</option>
|
||
@foreach (var svc in Model.Services)
|
||
{
|
||
<option>@svc.Title</option>
|
||
}
|
||
<option>سایر</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label>توضیحات (اختیاری)</label>
|
||
<textarea placeholder="مشکل پوستی یا سوالات خود را اینجا بنویسید..."></textarea>
|
||
</div>
|
||
<button type="submit" class="form-submit">ارسال و رزرو نوبت</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
@section Scripts {
|
||
<script>
|
||
// Before/After toggle
|
||
function toggleBA(wrap) {
|
||
wrap.classList.toggle('show-after');
|
||
const btns = wrap.querySelectorAll('.svc-ba-btn');
|
||
btns[0].classList.toggle('active');
|
||
btns[1].classList.toggle('active');
|
||
}
|
||
|
||
// Tab buttons
|
||
document.querySelectorAll('.tab-btn').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
});
|
||
});
|
||
|
||
// Form submission
|
||
function handleSubmit(e) {
|
||
e.preventDefault();
|
||
const btn = e.target.querySelector('.form-submit');
|
||
btn.textContent = '✓ درخواست شما ثبت شد';
|
||
btn.style.background = '#2D7A4F';
|
||
setTimeout(() => {
|
||
btn.textContent = 'ارسال و رزرو نوبت';
|
||
btn.style.background = '';
|
||
e.target.reset();
|
||
}, 3000);
|
||
}
|
||
|
||
// Active nav link on scroll
|
||
const sections = document.querySelectorAll('section[id]');
|
||
window.addEventListener('scroll', () => {
|
||
const scrollY = window.scrollY;
|
||
sections.forEach(section => {
|
||
const sectionTop = section.offsetTop - 100;
|
||
const id = section.getAttribute('id');
|
||
const link = document.querySelector(`header nav a[href="#${id}"]`);
|
||
if (link && scrollY > sectionTop && scrollY <= sectionTop + section.offsetHeight) {
|
||
document.querySelectorAll('header nav a').forEach(a => a.style.color = '');
|
||
link.style.color = '#B8955A';
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
}
|