add edit ehe finall

This commit is contained in:
Line INK
2026-08-18 22:58:59 +03:00
parent c486684450
commit 877d754f0f
42 changed files with 406 additions and 142 deletions

View File

@@ -13,7 +13,7 @@
<meta property="og:image" content="caf-logo.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&family=Poppins:wght@400;600;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800;900&family=Poppins:wght@400;600;700;800&family=Aref+Ruqaa:wght@700&display=swap" rel="stylesheet">
<style>
:root{
--navy:#18253A; /* navy blue — sampled from the new logo */
@@ -279,7 +279,9 @@
.footer-col h5{color:#fff;font-size:15px;margin-bottom:16px;}
.footer-col ul{display:grid;gap:10px;font-size:13.5px;}
.footer-col ul a:hover{color:var(--gold);}
.footer-logo{display:flex;align-items:center;gap:10px;color:#fff;font-weight:900;font-size:18px;margin-bottom:14px;}
.footer-logo{display:block;text-align:right;color:#fff;font-weight:900;font-size:19px;margin-bottom:10px;}
.footer-logo .logo-badge{display:inline-block;width:150px;height:150px;max-width:100%;border-radius:16px;margin-bottom:6px;}
.footer-logo span{display:block;text-align:right;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;display:flex;justify-content:space-between;font-size:12.5px;flex-wrap:wrap;gap:10px;}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s ease;}
@@ -451,6 +453,71 @@
}
.story-visual img{width:56%;height:56%;object-fit:contain;filter:drop-shadow(0 20px 30px rgba(0,0,0,.4));}
/* ===== FOUNDER ===== */
#founder{padding:90px 0;}
.founder-panel{
position:relative;overflow:hidden;border-radius:20px;
background:linear-gradient(155deg, var(--navy-deep) 0%, var(--navy) 100%);
padding:64px 56px;min-height:520px;margin-top:34px;
}
.founder-deco-circles{
position:absolute;top:-30px;left:-30px;width:170px;height:170px;
background:
radial-gradient(circle at 35% 35%, rgba(232,214,168,.16) 0 58%, transparent 60%),
radial-gradient(circle at 60% 60%, rgba(232,214,168,.10) 0 50%, transparent 52%);
pointer-events:none;
}
.founder-deco-check{
position:absolute;top:0;right:0;width:88px;height:88px;
background-image:
linear-gradient(45deg, var(--gold) 25%, transparent 25%, transparent 75%, var(--gold) 75%),
linear-gradient(45deg, var(--gold) 25%, transparent 25%, transparent 75%, var(--gold) 75%);
background-size:44px 44px;background-position:0 0, 22px 22px;opacity:.55;
pointer-events:none;
}
.founder-deco-dots{
position:absolute;bottom:26px;left:34px;width:70px;height:44px;
background:
radial-gradient(circle, rgba(184,146,62,.35) 0 60%, transparent 62%) 0 0/26px 26px no-repeat,
radial-gradient(circle, rgba(184,146,62,.22) 0 60%, transparent 62%) 22px 18px/22px 22px no-repeat;
pointer-events:none;
}
.founder-photo-wrap{position:absolute;top:36px;right:48px;width:220px;height:250px;z-index:3;}
.founder-photo-petal{
position:absolute;top:-26px;left:-40px;width:190px;height:190px;
background:
radial-gradient(ellipse 50px 90px at 50% 50%, rgba(255,255,255,.85), transparent 72%) 0 0,
radial-gradient(ellipse 50px 90px at 50% 50%, rgba(255,255,255,.85), transparent 72%) 0 0;
-webkit-mask-image:conic-gradient(from 0deg,#000 0 12%,transparent 12% 25%,#000 25% 37%,transparent 37% 50%,#000 50% 62%,transparent 62% 75%,#000 75% 87%,transparent 87% 100%);
mask-image:conic-gradient(from 0deg,#000 0 12%,transparent 12% 25%,#000 25% 37%,transparent 37% 50%,#000 50% 62%,transparent 62% 75%,#000 75% 87%,transparent 87% 100%);
border-radius:50%;opacity:.9;z-index:1;pointer-events:none;
}
.founder-photo{
position:relative;z-index:2;width:100%;height:100%;border-radius:10px;
border:3px solid #fff;box-shadow:0 20px 40px -14px rgba(0,0,0,.6);overflow:hidden;
}
.founder-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.founder-card{
position:relative;z-index:2;background:linear-gradient(155deg, var(--gold-light) 0%, #D9C79E 100%);
border:1px solid rgba(143,112,58,.35);border-radius:12px;
padding:46px 52px 40px;max-width:840px;margin:150px auto 0;
}
.founder-card .founder-logo-badge{position:absolute;bottom:16px;left:16px;right:auto;}
.founder-quote-mark{font-family:Georgia,serif;font-size:70px;line-height:1;color:rgba(34,28,51,.22);font-weight:800;margin-bottom:-14px;}
.founder-role{font-size:14.5px;font-weight:700;color:var(--navy);margin-bottom:9px;}
.founder-name{font-family:'Aref Ruqaa',serif;font-weight:700;font-size:36px;color:var(--navy-deep);margin-bottom:18px;}
.founder-text{color:var(--navy-deep);font-size:17px;line-height:1.9;font-weight:600;margin-bottom:16px;}
.founder-sub{font-size:14px;font-weight:700;color:#6b5730;}
.founder-logo-badge{position:absolute;bottom:20px;right:22px;width:56px;height:56px;object-fit:contain;z-index:2;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5));}
@media(max-width:860px){
.founder-panel{padding:150px 24px 40px;min-height:0;}
.founder-photo-wrap{top:-28px;inset-inline-end:50%;transform:translateX(50%);width:170px;height:190px;}
.founder-photo-petal{display:none;}
.founder-card{margin-top:0;max-width:none;text-align:center;}
.founder-deco-check,.founder-deco-circles,.founder-deco-dots{opacity:.35;}
.founder-logo-badge{position:static;display:block;margin:20px auto 0;}
}
.pillars-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.pillar-card{background:#fff;border-radius:var(--radius);padding:32px 26px;border:1px solid rgba(11,36,71,.07);text-align:center;}
.pillar-icon{
@@ -574,6 +641,20 @@
</div>
</section>
<section class="alt" id="overview">
<div class="container" style="max-width:820px;">
<div class="eyebrow">من نحن</div>
<h2 class="section-title">رياضة تبني الشخصية، لا الجسد فقط</h2>
<p class="section-lead" style="max-width:none;">نؤمن في أكاديمية الكاف الرياضية بأن الرياضة ليست مجرد تدريب بدني، بل هي أسلوب حياة يبني الثقة والانضباط في كل مرحلة عمرية. نسعى لنكون الوجهة الأولى لكل من يبحث عن التميّز؛ عبر برامج مخصصة لتطوير الصغار، وتدريبات احترافية للكبار، سواء ضمن مجموعات حماسية أو عبر تدريب شخصي مكثف يحقق أهدافك بدقة.</p>
<ul class="about-list">
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6L9 17l-5-5"/></svg> <strong>كادر تدريبي معتمد:</strong>&nbsp;إشراف نخبة من المدربين المتخصصين في التدريب الجماعي والشخصي.</li>
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6L9 17l-5-5"/></svg> <strong>برامج متكاملة لكل الأعمار:</strong>&nbsp;صُممت خصيصًا لتناسب تطلعات الأبطال الصغار وأهداف الكبار.</li>
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6L9 17l-5-5"/></svg> <strong>متابعة وتقييم مستمر:</strong>&nbsp;تقارير دورية لقياس التطور والوصول لأفضل أداء بدني وصحي.</li>
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M20 6L9 17l-5-5"/></svg> <strong>بيئة آمنة ومحفزة:</strong>&nbsp;مرونة كاملة في اختيار الألعاب والبرامج الرياضية ضمن اشتراك واحد.</li>
</ul>
</div>
</section>
<section id="story">
<div class="container story-grid">
<div class="reveal">
@@ -588,14 +669,28 @@
</div>
</section>
<section class="alt" id="founder">
<div class="container" style="max-width:820px;text-align:center;">
<div class="eyebrow" style="justify-content:center;display:inline-flex;">كلمة الرئيس التنفيذي</div>
<h2 class="section-title">من الملعب إلى قيادة أكاديمية الكاف</h2>
<div class="coach-avatar" style="width:84px;height:84px;font-size:22px;margin:8px auto 22px;">أ.ح</div>
<p style="color:var(--text);font-size:17px;line-height:1.9;font-style:italic;margin-bottom:22px;">"بدأت رحلتي في الملاعب الرياضية، وبعد أكثر من 10 سنوات في تدريب اللياقة البدنية والدفاع عن النفس لآلاف المتدربين، آمنت أن كل طفل يستحق بيئة رياضية آمنة ومحترفة تكتشف شغفه وتبني ثقته بنفسه. من هذا الإيمان انطلقت أكاديمية الكاف — وهدفنا واضح دايمًا: نصنع أبطال الغد، بخطوة اليوم."</p>
<div style="font-weight:800;color:var(--navy);font-size:15.5px;">الكابتن أحمد حبيب</div>
<div style="font-size:13px;color:var(--orange);font-weight:700;margin-top:2px;">الرئيس التنفيذي — أكاديمية الكاف الرياضية</div>
<section id="founder">
<div class="container">
<div class="eyebrow" style="justify-content:center;display:flex;color:var(--gold-light);font-size:16px;margin-bottom:20px;">كلمة الرئيس التنفيذي</div>
<div class="founder-panel reveal">
<div class="founder-deco-circles"></div>
<div class="founder-deco-check"></div>
<div class="founder-deco-dots"></div>
<div class="founder-photo-wrap">
<div class="founder-photo-petal"></div>
<div class="founder-photo">
<img src="images/general manger.jpeg" alt="الكابتن أحمد حبيب — الرئيس التنفيذي لأكاديمية الكاف الرياضية" loading="lazy">
</div>
</div>
<div class="founder-card">
<div class="founder-quote-mark">"</div>
<div class="founder-role">الرئيس التنفيذي لأكاديمية الكاف الرياضية</div>
<div class="founder-name">الكابتن أحمد حبيب</div>
<p class="founder-text">"الاستثمار الرياضي في المملكة يشهد قفزة نوعية غير مسبوقة بدعم القيادة الرشيدة ورؤية 2030، ونسعى في أكاديمية الكاف الرياضية إلى أن نكون نموذجًا رياديًا في تحويل الرياضة إلى صناعة اقتصادية جاذبة، تُسهم في بناء الأبطال وتمكين الشباب وتعزيز مكانة السعودية على خارطة الرياضة العالمية."</p>
<div class="founder-sub">خبير رياضي ومدرب معتمد دوليًا</div>
<img class="founder-logo-badge" src="caf-logo.png" alt="شعار أكاديمية الكاف الرياضية">
</div>
</div>
</div>
</section>
@@ -743,8 +838,8 @@
<div class="container">
<div class="footer-grid">
<div class="footer-col">
<div class="footer-logo"><span class="logo-badge"><img src="caf-logo.png" alt="شعار أكاديمية الكاف"></span> أكاديمية الكاف الرياضية</div>
<p style="font-size:13.5px;"><a href="https://www.google.com/maps/search/?api=1&query=%D9%85%D8%AF%D8%A7%D8%B1%D8%B3+%D8%A7%D9%84%D8%AD%D8%B2%D9%85+%D8%A7%D9%84%D8%A3%D9%87%D9%84%D9%8A%D8%A9+%D8%AD%D9%8A+%D8%A7%D9%84%D9%82%D8%AF%D8%B3+%D8%A7%D9%84%D8%B1%D9%8A%D8%A7%D8%B6" target="_blank" rel="noopener" style="color:inherit;text-decoration:underline;">حي القدس – الرياض (مدارس الحزم الأهلية)</a></p>
<div class="footer-logo"><span class="logo-badge"><img src="caf-logo.png" alt="شعار أكاديمية الكاف"></span><span>أكاديمية الكاف الرياضية</span></div>
<p style="font-size:13.5px;">المملكة العربية السعودية، الرياض</p>
<p style="font-size:13.5px;margin-top:6px;">"نصنع أبطال الغد، بخطوة اليوم"</p>
</div>
<div class="footer-col">
@@ -772,8 +867,8 @@
<li><a href="mailto:Contact@caf-academy.com">Contact@caf-academy.com</a></li>
</ul>
<div style="display:flex;gap:10px;margin-top:16px;">
<a href="https://www.instagram.com/caf_sports2025" target="_blank" rel="noopener" aria-label="Instagram" style="width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75);transition:background .2s,color .2s;"><svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg></a>
<a href="https://www.tiktok.com/@caf_sports2025" target="_blank" rel="noopener" aria-label="TikTok" style="width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75);transition:background .2s,color .2s;"><svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><path d="M16.5 3c.3 2.1 1.7 3.6 3.9 3.9v3c-1.3 0-2.6-.4-3.7-1.2v6.4a5.7 5.7 0 1 1-5.7-5.7c.2 0 .5 0 .7.1v3.1a2.6 2.6 0 1 0 1.8 2.5V3h3z"/></svg></a>
<a href="https://www.instagram.com/caf_academy_?igsi=aDZmaTlhZmttd3E3" target="_blank" rel="noopener" aria-label="Instagram" style="width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75);transition:background .2s,color .2s;"><svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg></a>
<a href="https://www.tiktok.com/@caf_academy?_r=1&amp;_t=ZS-98y2YmrQpY8" target="_blank" rel="noopener" aria-label="TikTok" style="width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75);transition:background .2s,color .2s;"><svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor"><path d="M16.5 3c.3 2.1 1.7 3.6 3.9 3.9v3c-1.3 0-2.6-.4-3.7-1.2v6.4a5.7 5.7 0 1 1-5.7-5.7c.2 0 .5 0 .7.1v3.1a2.6 2.6 0 1 0 1.8 2.5V3h3z"/></svg></a>
<a href="https://www.snapchat.com/add/alsahari_2025" target="_blank" rel="noopener" aria-label="Snapchat" style="width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75);transition:background .2s,color .2s;"><svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M12 2c3 0 4.7 2.3 4.8 5 0 1 0 2 .1 2.4.2.3.9.4 1.4.2.4-.1.9 0 1 .5.1.5-.2.9-.7 1.1-.3.1-.8.3-.8.6 0 .5.9 1.7 2.4 2.1.3.1.5.4.4.7-.2.7-1.4 1-2.2 1.1-.1.3-.2.7-.3 1-.1.3-.4.4-.7.4-.5 0-1-.1-1.6-.1-.9 0-1.4.6-2.9.6s-2-.6-2.9-.6c-.6 0-1.1.1-1.6.1-.3 0-.6-.1-.7-.4-.1-.3-.2-.7-.3-1-.8-.1-2-.4-2.2-1.1-.1-.3.1-.6.4-.7 1.5-.4 2.4-1.6 2.4-2.1 0-.3-.5-.5-.8-.6-.5-.2-.8-.6-.7-1.1.1-.5.6-.6 1-.5.5.2 1.2.1 1.4-.2.1-.4.1-1.4.1-2.4C7.3 4.3 9 2 12 2z"/></svg></a>
<a href="https://www.facebook.com/share/18RGgydYWL/" target="_blank" rel="noopener" aria-label="Facebook" style="width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75);transition:background .2s,color .2s;"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg></a>
<a href="https://www.youtube.com/@cafacademy" target="_blank" rel="noopener" aria-label="YouTube" style="width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75);transition:background .2s,color .2s;"><svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="2"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon></svg></a>