803 lines
50 KiB
HTML
803 lines
50 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="ar" dir="rtl">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>كرة القدم للأطفال — أكاديمية الكاف الرياضية</title>
|
||
<meta name="description" content="برنامج كرة القدم للأطفال من 4 إلى 16 سنة في أكاديمية الكاف الرياضية بالرياض، بإشراف مدربين معتمدين. احجز حصة تجريبية مجانية.">
|
||
<link rel="icon" type="image/png" href="caf-logo.png">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:locale" content="ar_SA">
|
||
<meta property="og:title" content="كرة القدم للأطفال — أكاديمية الكاف الرياضية">
|
||
<meta property="og:description" content="برنامج كرة القدم للأطفال من 4 إلى 16 سنة في أكاديمية الكاف الرياضية بالرياض، بإشراف مدربين معتمدين. احجز حصة تجريبية مجانية.">
|
||
<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">
|
||
<style>
|
||
:root{
|
||
--navy:#342B4A; /* deep purple — sampled from logo */
|
||
--navy-deep:#1C1730; /* deepest purple/black — from logo shadow tones */
|
||
--orange:#B8923E; /* refined antique gold — brightened from logo for UI legibility */
|
||
--gold:#8F703A; /* raw brand gold — exact logo sample */
|
||
--gold-light:#E8D6A8; /* light gold tint for subtle fills */
|
||
--bg:#F7F5F1; /* warm off-white, echoes the gold warmth */
|
||
--surface:#EFEBE3;
|
||
--text:#221C33;
|
||
--gray:#6E6579;
|
||
--green:#B8923E; /* CTA color now uses brand gold, not an invented green */
|
||
--white:#FFFFFF;
|
||
--black:#0A0A0C;
|
||
--radius:18px;
|
||
}
|
||
*{box-sizing:border-box;margin:0;padding:0;}
|
||
html{scroll-behavior:smooth;}
|
||
body{
|
||
font-family:'Cairo',sans-serif;
|
||
background:var(--bg);
|
||
color:var(--text);
|
||
line-height:1.7;
|
||
overflow-x:hidden;
|
||
}
|
||
.num{font-family:'Poppins',sans-serif;}
|
||
a{text-decoration:none;color:inherit;}
|
||
ul{list-style:none;}
|
||
img,svg{display:block;max-width:100%;}
|
||
.container{max-width:1180px;margin:0 auto;padding:0 24px;}
|
||
.eyebrow{
|
||
display:inline-flex;align-items:center;gap:8px;
|
||
font-family:'Poppins',sans-serif;font-size:12px;font-weight:700;
|
||
letter-spacing:.12em;text-transform:uppercase;color:var(--orange);
|
||
margin-bottom:14px;
|
||
}
|
||
.eyebrow::before{content:"";width:22px;height:2px;background:var(--orange);display:inline-block;}
|
||
h1,h2,h3{font-family:'Cairo',sans-serif;font-weight:800;color:var(--navy);}
|
||
.section-title{font-size:clamp(26px,3.4vw,38px);margin-bottom:14px;}
|
||
.section-lead{color:var(--gray);font-size:16px;max-width:620px;margin-bottom:44px;}
|
||
.btn{
|
||
display:inline-flex;align-items:center;gap:10px;
|
||
font-family:'Cairo',sans-serif;font-weight:700;font-size:15px;
|
||
padding:15px 30px;border-radius:100px;border:none;cursor:pointer;
|
||
transition:transform .25s ease, box-shadow .25s ease;
|
||
}
|
||
.btn:hover{transform:translateY(-2px);}
|
||
.btn-primary{background:var(--green);color:#fff;box-shadow:0 10px 24px -8px rgba(46,204,113,.55);}
|
||
.btn-primary:hover{box-shadow:0 14px 30px -8px rgba(46,204,113,.7);}
|
||
.btn-outline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55);}
|
||
.btn-outline:hover{background:rgba(255,255,255,.12);}
|
||
.btn-navy{background:var(--navy);color:#fff;}
|
||
|
||
/* ===== HEADER ===== */
|
||
header{
|
||
position:sticky;top:0;z-index:50;
|
||
background:rgba(247,249,252,.85);backdrop-filter:blur(10px);
|
||
border-bottom:1px solid rgba(11,36,71,.08);
|
||
}
|
||
.nav-wrap{display:flex;align-items:center;justify-content:space-between;height:78px;}
|
||
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:19px;color:var(--navy);}
|
||
.logo-badge{
|
||
width:46px;height:46px;border-radius:10px;
|
||
background:var(--black);
|
||
display:flex;align-items:center;justify-content:center;overflow:hidden;
|
||
flex-shrink:0;
|
||
}
|
||
.logo-badge img{width:100%;height:100%;object-fit:contain;padding:2px;}
|
||
nav ul{display:flex;gap:34px;font-weight:600;font-size:15px;}
|
||
nav a{position:relative;color:var(--text);transition:color .2s;}
|
||
nav a:hover{color:var(--orange);}
|
||
.header-cta{display:flex;align-items:center;gap:14px;}
|
||
.burger{display:none;}
|
||
|
||
/* ===== HERO ===== */
|
||
.hero{
|
||
position:relative;color:#fff;overflow:hidden;
|
||
background:
|
||
radial-gradient(1100px 500px at 85% -10%, rgba(255,107,53,.35), transparent 60%),
|
||
radial-gradient(900px 500px at -10% 110%, rgba(255,193,69,.22), transparent 60%),
|
||
linear-gradient(155deg, var(--navy-deep) 0%, var(--navy) 55%, #4A3D66 100%);
|
||
padding:96px 0 110px;
|
||
}
|
||
.hero::after{
|
||
content:"";position:absolute;inset:0;opacity:.10;
|
||
background-image:
|
||
repeating-linear-gradient(45deg, #fff 0 2px, transparent 2px 34px);
|
||
pointer-events:none;
|
||
}
|
||
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;position:relative;}
|
||
.hero-eyebrow{
|
||
display:inline-flex;align-items:center;gap:8px;
|
||
background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
|
||
padding:8px 16px;border-radius:100px;font-size:13px;font-weight:700;margin-bottom:22px;
|
||
}
|
||
.hero-eyebrow span.dot{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;}
|
||
.hero h1{
|
||
font-size:clamp(34px,4.6vw,56px);color:#fff;line-height:1.28;font-weight:900;margin-bottom:20px;
|
||
}
|
||
.hero h1 em{font-style:normal;color:var(--gold);}
|
||
.hero p.lead{font-size:18px;color:rgba(255,255,255,.78);max-width:520px;margin-bottom:34px;}
|
||
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:44px;}
|
||
.hero-meta{display:flex;gap:30px;flex-wrap:wrap;}
|
||
.hero-meta div{display:flex;flex-direction:column;gap:2px;}
|
||
.hero-meta .n{font-family:'Poppins';font-weight:800;font-size:26px;color:var(--gold);}
|
||
.hero-meta .l{font-size:12.5px;color:rgba(255,255,255,.65);}
|
||
|
||
/* Hero visual: signature element = the real crest, glowing, with a couple of orbiting sport marks */
|
||
.hero-visual{position:relative;height:420px;display:flex;align-items:center;justify-content:center;}
|
||
.crest-glow{
|
||
position:absolute;width:360px;height:360px;border-radius:50%;
|
||
background:radial-gradient(circle, rgba(184,146,62,.30), transparent 68%);
|
||
filter:blur(4px);
|
||
}
|
||
.crest-main{
|
||
position:relative;width:300px;height:300px;object-fit:contain;
|
||
filter:drop-shadow(0 30px 50px rgba(0,0,0,.55));
|
||
animation:crestFloat 7s ease-in-out infinite;
|
||
}
|
||
@keyframes crestFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
|
||
@media (prefers-reduced-motion: reduce){.crest-main{animation:none;}}
|
||
.badge-orbit{position:absolute;inset:0;}
|
||
.sport-badge{
|
||
position:absolute;width:96px;height:96px;border-radius:26px;
|
||
background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
|
||
backdrop-filter:blur(6px);
|
||
display:flex;align-items:center;justify-content:center;
|
||
box-shadow:0 20px 40px -18px rgba(0,0,0,.5);
|
||
animation:float 6s ease-in-out infinite;
|
||
}
|
||
.sport-badge svg{width:44px;height:44px;}
|
||
.sport-badge.b1{top:6%;right:8%;animation-delay:0s;background:rgba(255,107,53,.18);border-color:rgba(255,107,53,.4);}
|
||
.sport-badge.b2{top:34%;right:46%;animation-delay:.6s;background:rgba(255,193,69,.18);border-color:rgba(255,193,69,.4);width:120px;height:120px;}
|
||
.sport-badge.b2 svg{width:56px;height:56px;}
|
||
.sport-badge.b3{top:2%;right:52%;animation-delay:1.1s;}
|
||
.sport-badge.b4{bottom:12%;right:4%;animation-delay:1.6s;}
|
||
.sport-badge.b5{bottom:2%;right:38%;animation-delay:2.1s;}
|
||
.sport-badge.b6{top:52%;right:2%;animation-delay:2.6s;}
|
||
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
|
||
@media (prefers-reduced-motion: reduce){.sport-badge{animation:none;}}
|
||
|
||
/* ===== TRUST BAR ===== */
|
||
.trust{background:var(--navy);padding:22px 0;}
|
||
.trust .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px;color:rgba(255,255,255,.85);}
|
||
.trust-item{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;}
|
||
.trust-item svg{width:20px;height:20px;color:var(--gold);flex-shrink:0;}
|
||
|
||
section{padding:96px 0;}
|
||
.alt{background:var(--surface);}
|
||
|
||
/* ===== ABOUT ===== */
|
||
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
|
||
.about-visual{
|
||
aspect-ratio:1/1;border-radius:28px;
|
||
background:linear-gradient(160deg,var(--navy) 0%, #4A3D66 100%);
|
||
position:relative;overflow:hidden;
|
||
display:flex;align-items:center;justify-content:center;
|
||
}
|
||
.about-visual .quote{color:#fff;text-align:center;padding:40px;font-weight:800;font-size:24px;position:relative;z-index:2;}
|
||
.about-visual::before{
|
||
content:"";position:absolute;width:340px;height:340px;border-radius:50%;
|
||
border:1px dashed rgba(255,255,255,.25);top:50%;left:50%;transform:translate(-50%,-50%);
|
||
}
|
||
.about-visual::after{
|
||
content:"";position:absolute;width:240px;height:240px;border-radius:50%;
|
||
background:radial-gradient(circle, rgba(255,193,69,.35), transparent 70%);
|
||
top:20%;right:-40px;
|
||
}
|
||
.about-list{margin-top:26px;display:grid;gap:14px;}
|
||
.about-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--text);}
|
||
.about-list svg{width:22px;height:22px;color:var(--green);flex-shrink:0;margin-top:2px;}
|
||
|
||
/* ===== PROGRAMS ===== */
|
||
.programs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
|
||
.program-card{
|
||
background:#fff;border-radius:var(--radius);padding:30px 26px;
|
||
border:1px solid rgba(11,36,71,.07);
|
||
transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
|
||
cursor:pointer;position:relative;overflow:hidden;
|
||
}
|
||
.program-card::before{
|
||
content:"";position:absolute;top:0;right:0;width:100%;height:4px;
|
||
background:var(--accent,var(--orange));
|
||
}
|
||
.program-card:hover{transform:translateY(-6px);box-shadow:0 22px 40px -22px rgba(11,36,71,.35);border-color:transparent;}
|
||
.program-icon{
|
||
width:58px;height:58px;border-radius:16px;margin-bottom:18px;
|
||
display:flex;align-items:center;justify-content:center;
|
||
background:color-mix(in srgb, var(--accent,var(--orange)) 14%, white);
|
||
}
|
||
.program-icon svg{width:30px;height:30px;color:var(--accent,var(--orange));}
|
||
.program-card h3{font-size:19px;margin-bottom:8px;}
|
||
.program-card p{font-size:14px;color:var(--gray);margin-bottom:16px;}
|
||
.program-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
|
||
.tag{font-size:11.5px;font-weight:700;background:var(--surface);color:var(--navy);padding:5px 10px;border-radius:100px;}
|
||
.program-link{font-size:13.5px;font-weight:700;color:var(--navy);display:inline-flex;align-items:center;gap:6px;}
|
||
.program-link svg{width:15px;height:15px;transition:transform .2s;}
|
||
.program-card:hover .program-link svg{transform:translateX(-4px);}
|
||
|
||
/* ===== WHY US ===== */
|
||
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 30px;}
|
||
.why-item{display:flex;gap:16px;}
|
||
.why-icon{
|
||
width:52px;height:52px;border-radius:14px;flex-shrink:0;
|
||
background:var(--navy);display:flex;align-items:center;justify-content:center;
|
||
}
|
||
.why-icon svg{width:26px;height:26px;color:var(--gold);}
|
||
.why-item h4{font-size:16.5px;margin-bottom:6px;color:var(--navy);}
|
||
.why-item p{font-size:13.8px;color:var(--gray);}
|
||
|
||
/* ===== STATS (signature: badge path) ===== */
|
||
.stats-section{
|
||
background:linear-gradient(160deg,var(--navy-deep), var(--navy));
|
||
position:relative;overflow:hidden;
|
||
}
|
||
.stats-path{display:flex;justify-content:space-between;align-items:center;position:relative;}
|
||
.stats-path::before{
|
||
content:"";position:absolute;top:38px;right:8%;left:8%;height:2px;
|
||
background:repeating-linear-gradient(90deg, rgba(255,193,69,.5) 0 10px, transparent 10px 20px);
|
||
z-index:0;
|
||
}
|
||
.stat{position:relative;z-index:1;text-align:center;flex:1;}
|
||
.stat-badge{
|
||
width:76px;height:76px;border-radius:50%;margin:0 auto 18px;
|
||
background:radial-gradient(circle at 35% 30%, var(--gold-light), var(--orange) 60%);
|
||
display:flex;align-items:center;justify-content:center;
|
||
box-shadow:0 0 0 6px rgba(255,193,69,.15);
|
||
}
|
||
.stat-badge svg{width:32px;height:32px;color:var(--navy);}
|
||
.stat .n{font-family:'Poppins';font-size:38px;font-weight:800;color:#fff;}
|
||
.stat .l{font-size:13.5px;color:rgba(255,255,255,.65);margin-top:4px;}
|
||
|
||
/* ===== TESTIMONIALS ===== */
|
||
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
|
||
.testi-card{background:#fff;border-radius:var(--radius);padding:28px;border:1px solid rgba(11,36,71,.07);}
|
||
.stars{color:var(--gold);font-size:15px;letter-spacing:2px;margin-bottom:14px;}
|
||
.testi-card p.txt{font-size:14.5px;color:var(--text);margin-bottom:20px;}
|
||
.testi-person{display:flex;align-items:center;gap:12px;}
|
||
.avatar{
|
||
width:44px;height:44px;border-radius:50%;flex-shrink:0;
|
||
display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-family:'Poppins';
|
||
}
|
||
.testi-person .name{font-weight:700;font-size:14px;color:var(--navy);}
|
||
.testi-person .role{font-size:12px;color:var(--gray);}
|
||
|
||
/* ===== FINAL CTA ===== */
|
||
.final-cta{
|
||
background:linear-gradient(120deg,var(--black) 0%, var(--navy-deep) 55%, var(--navy) 100%);
|
||
border:1px solid rgba(184,146,62,.35);
|
||
border-radius:32px;padding:64px 50px;text-align:center;position:relative;overflow:hidden;
|
||
margin:0 24px;
|
||
}
|
||
.final-cta::before{
|
||
content:"";position:absolute;width:400px;height:400px;border-radius:50%;
|
||
background:radial-gradient(circle, rgba(184,146,62,.18), transparent 70%);top:-180px;left:-100px;
|
||
}
|
||
.final-cta h2{color:#fff;font-size:clamp(24px,3.2vw,34px);margin-bottom:14px;}
|
||
.final-cta p{color:rgba(255,255,255,.72);margin-bottom:30px;font-size:15.5px;}
|
||
|
||
/* ===== FOOTER ===== */
|
||
footer{background:var(--navy-deep);color:rgba(255,255,255,.7);padding:64px 0 26px;}
|
||
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;margin-bottom:48px;}
|
||
.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-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;}
|
||
.reveal.in{opacity:1;transform:translateY(0);}
|
||
|
||
@media (max-width:920px){
|
||
nav, .header-cta .btn-outline{display:none;}
|
||
.hero-grid{grid-template-columns:1fr;}
|
||
.hero-visual{height:260px;}
|
||
.about-grid{grid-template-columns:1fr;}
|
||
.programs-grid, .why-grid, .testi-grid{grid-template-columns:1fr 1fr;}
|
||
.footer-grid{grid-template-columns:1fr 1fr;}
|
||
.stats-path{flex-wrap:wrap;gap:26px;}
|
||
.stats-path::before{display:none;}
|
||
}
|
||
@media (max-width:600px){
|
||
.programs-grid, .why-grid, .testi-grid, .footer-grid{grid-template-columns:1fr;}
|
||
.hero{padding:64px 0 80px;}
|
||
.final-cta{padding:44px 24px;margin:0;}
|
||
}
|
||
|
||
.mobile-sticky{
|
||
display:none;position:fixed;bottom:0;right:0;left:0;z-index:60;
|
||
background:#fff;box-shadow:0 -8px 24px rgba(11,36,71,.12);padding:12px 18px;
|
||
}
|
||
@media (max-width:600px){.mobile-sticky{display:flex;}}
|
||
.mobile-sticky .btn-primary{width:100%;justify-content:center;}
|
||
|
||
/* ===== PROGRAM PAGE ADDITIONS ===== */
|
||
.breadcrumb{background:var(--surface);padding:16px 0;font-size:13px;color:var(--gray);}
|
||
.breadcrumb a{color:var(--gray);}
|
||
.breadcrumb a:hover{color:var(--orange);}
|
||
.breadcrumb .sep{margin:0 8px;opacity:.6;}
|
||
.breadcrumb .current{color:var(--navy);font-weight:700;}
|
||
|
||
.program-banner{
|
||
position:relative;color:#fff;overflow:hidden;padding:70px 0 60px;
|
||
background:
|
||
radial-gradient(900px 420px at 88% -10%, rgba(184,146,62,.28), transparent 60%),
|
||
linear-gradient(155deg, var(--black) 0%, var(--navy-deep) 45%, var(--navy) 100%);
|
||
}
|
||
.program-banner::after{
|
||
content:"";position:absolute;inset:0;opacity:.08;
|
||
background-image:repeating-linear-gradient(45deg,#fff 0 2px, transparent 2px 34px);
|
||
pointer-events:none;
|
||
}
|
||
.banner-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:center;position:relative;}
|
||
.banner-icon{
|
||
width:88px;height:88px;border-radius:24px;margin-bottom:22px;
|
||
background:rgba(184,146,62,.16);border:1px solid rgba(184,146,62,.4);
|
||
display:flex;align-items:center;justify-content:center;
|
||
}
|
||
.banner-icon svg{width:44px;height:44px;color:var(--orange);}
|
||
.program-banner h1{color:#fff;font-size:clamp(30px,4vw,46px);margin-bottom:16px;}
|
||
.program-banner p.lead{color:rgba(255,255,255,.75);font-size:16.5px;max-width:520px;margin-bottom:30px;}
|
||
.banner-visual{
|
||
aspect-ratio:1/1;border-radius:28px;position:relative;overflow:hidden;
|
||
background:radial-gradient(circle at 40% 35%, rgba(184,146,62,.22), transparent 65%), rgba(255,255,255,.04);
|
||
border:1px solid rgba(255,255,255,.12);
|
||
display:flex;align-items:center;justify-content:center;
|
||
}
|
||
.banner-visual svg{width:46%;height:46%;color:rgba(184,146,62,.55);}
|
||
|
||
.quickfacts{background:var(--navy-deep);padding:0;}
|
||
.quickfacts .container{display:flex;justify-content:space-between;flex-wrap:wrap;}
|
||
.qf-item{flex:1;min-width:150px;padding:22px 16px;text-align:center;border-inline-start:1px solid rgba(255,255,255,.08);}
|
||
.qf-item:first-child{border-inline-start:none;}
|
||
.qf-item .n{font-family:'Poppins';font-weight:800;font-size:20px;color:var(--orange);display:block;margin-bottom:4px;}
|
||
.qf-item .l{font-size:12.5px;color:rgba(255,255,255,.6);}
|
||
|
||
.desc-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;}
|
||
.desc-visual{
|
||
aspect-ratio:3/4;border-radius:24px;
|
||
background:linear-gradient(150deg, var(--navy) 0%, #4A3D66 100%);
|
||
display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
|
||
}
|
||
.desc-visual svg{width:34%;height:34%;color:rgba(255,255,255,.4);}
|
||
.audience-grid{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px;}
|
||
.audience-pill{
|
||
display:flex;align-items:center;gap:8px;background:var(--surface);
|
||
padding:10px 16px;border-radius:100px;font-size:13.5px;font-weight:700;color:var(--navy);
|
||
}
|
||
.audience-pill svg{width:16px;height:16px;color:var(--orange);}
|
||
|
||
/* Level path timeline */
|
||
.level-path{display:flex;justify-content:space-between;position:relative;margin-top:20px;}
|
||
.level-path::before{
|
||
content:"";position:absolute;top:34px;right:6%;left:6%;height:2px;
|
||
background:repeating-linear-gradient(90deg, rgba(184,146,62,.5) 0 10px, transparent 10px 20px);
|
||
z-index:0;
|
||
}
|
||
.level{position:relative;z-index:1;text-align:center;flex:1;padding:0 8px;}
|
||
.level-dot{
|
||
width:68px;height:68px;border-radius:50%;margin:0 auto 16px;
|
||
background:#fff;border:3px solid var(--orange);
|
||
display:flex;align-items:center;justify-content:center;color:var(--navy);font-weight:800;font-family:'Poppins';
|
||
box-shadow:0 10px 24px -12px rgba(11,36,71,.3);
|
||
}
|
||
.level h4{font-size:14.5px;margin-bottom:4px;color:var(--navy);}
|
||
.level p{font-size:12px;color:var(--gray);}
|
||
|
||
.components-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;}
|
||
.component-card{background:#fff;border-radius:16px;padding:22px 16px;text-align:center;border:1px solid rgba(11,36,71,.07);}
|
||
.component-card .ci{
|
||
width:48px;height:48px;border-radius:14px;margin:0 auto 14px;
|
||
background:var(--surface);display:flex;align-items:center;justify-content:center;
|
||
}
|
||
.component-card .ci svg{width:24px;height:24px;color:var(--orange);}
|
||
.component-card h5{font-size:13.5px;margin-bottom:4px;color:var(--navy);}
|
||
.component-card p{font-size:12px;color:var(--gray);}
|
||
|
||
.skills-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;}
|
||
.skill-item{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid rgba(11,36,71,.07);border-radius:14px;padding:16px 18px;}
|
||
.skill-item svg{width:22px;height:22px;color:var(--orange);flex-shrink:0;}
|
||
.skill-item span{font-size:14.5px;font-weight:700;color:var(--navy);}
|
||
|
||
.coach-card{
|
||
display:flex;align-items:center;gap:26px;background:#fff;border-radius:24px;padding:30px;
|
||
border:1px solid rgba(11,36,71,.07);
|
||
}
|
||
.coach-avatar{
|
||
width:100px;height:100px;border-radius:20px;flex-shrink:0;
|
||
background:linear-gradient(150deg,var(--navy),#4A3D66);
|
||
display:flex;align-items:center;justify-content:center;color:var(--orange);font-family:'Poppins';font-weight:800;font-size:26px;
|
||
}
|
||
.coach-card h4{font-size:19px;margin-bottom:4px;color:var(--navy);}
|
||
.coach-card .role{color:var(--orange);font-size:13.5px;font-weight:700;margin-bottom:10px;}
|
||
.coach-card p{font-size:14px;color:var(--gray);}
|
||
|
||
.faq-item{border-bottom:1px solid rgba(11,36,71,.1);}
|
||
.faq-q{
|
||
display:flex;justify-content:space-between;align-items:center;
|
||
padding:22px 4px;cursor:pointer;font-weight:700;font-size:15.5px;color:var(--navy);
|
||
}
|
||
.faq-q svg{width:20px;height:20px;color:var(--orange);transition:transform .25s ease;flex-shrink:0;}
|
||
.faq-item.open .faq-q svg{transform:rotate(45deg);}
|
||
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
|
||
.faq-item.open .faq-a{max-height:220px;}
|
||
.faq-a p{padding:0 4px 22px;font-size:14px;color:var(--gray);}
|
||
|
||
.dual-cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:34px;}
|
||
.price-chip{
|
||
display:inline-flex;align-items:baseline;gap:6px;background:var(--surface);
|
||
padding:14px 22px;border-radius:14px;
|
||
}
|
||
.price-chip .amt{font-family:'Poppins';font-weight:800;font-size:22px;color:var(--navy);}
|
||
.price-chip .per{font-size:12.5px;color:var(--gray);}
|
||
|
||
@media (max-width:920px){
|
||
.banner-grid, .desc-grid{grid-template-columns:1fr;}
|
||
.quickfacts .container{flex-wrap:wrap;}
|
||
.qf-item{flex:1 1 50%;border-inline-start:none;border-top:1px solid rgba(255,255,255,.08);}
|
||
.components-grid{grid-template-columns:repeat(2,1fr);}
|
||
.level-path{flex-wrap:wrap;gap:20px;}
|
||
.level-path::before{display:none;}
|
||
}
|
||
@media (max-width:600px){
|
||
.skills-grid{grid-template-columns:1fr;}
|
||
.components-grid{grid-template-columns:1fr 1fr;}
|
||
.coach-card{flex-direction:column;text-align:center;}
|
||
}
|
||
|
||
</style>
|
||
<!-- prog-slider-css -->
|
||
<style>
|
||
.prog-slider{position:relative;width:100%;height:100%;overflow:hidden;border-radius:inherit;}
|
||
.prog-slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%;opacity:0;transform:scale(1);transition:opacity 1s cubic-bezier(.4,0,.2,1);}
|
||
.prog-slider img.active{opacity:1;z-index:1;}
|
||
.prog-slider img.kb{animation:progKenBurns 5.5s ease-out forwards;}
|
||
@keyframes progKenBurns{from{transform:scale(1);}to{transform:scale(1.08);}}
|
||
.prog-nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.85);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:5;box-shadow:0 6px 16px rgba(0,0,0,.2);transition:transform .25s ease, box-shadow .25s ease, background .25s ease;}
|
||
.prog-nav:hover{transform:translateY(-50%) scale(1.12);background:#fff;box-shadow:0 10px 22px rgba(0,0,0,.28);}
|
||
.prog-nav:active{transform:translateY(-50%) scale(.95);}
|
||
.prog-nav.prev{right:14px;}
|
||
.prog-nav.next{left:14px;}
|
||
.prog-dots{position:absolute;bottom:14px;left:0;right:0;display:flex;justify-content:center;gap:8px;z-index:5;}
|
||
.prog-dot{width:8px;height:8px;border-radius:4px;background:#fff;opacity:.5;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:width .35s cubic-bezier(.4,0,.2,1), opacity .35s ease;border:none;padding:0;}
|
||
.prog-dot.active{width:24px;opacity:1;}
|
||
@media (prefers-reduced-motion: reduce){ .prog-slider img.kb{animation:none;} }
|
||
</style>
|
||
|
||
</head>
|
||
<body>
|
||
|
||
<header>
|
||
<div class="container nav-wrap">
|
||
<a href="homepage-prototype.html" class="logo"><span class="logo-badge"><img src="caf-logo.png" alt="شعار أكاديمية الكاف"></span> أكاديمية الكاف</a>
|
||
<nav>
|
||
<ul>
|
||
<li><a href="homepage-prototype.html#programs">البرامج</a></li>
|
||
<li><a href="page-about.html">من نحن</a></li>
|
||
<li><a href="homepage-prototype.html#stats">إنجازاتنا</a></li>
|
||
<li><a href="homepage-prototype.html#testimonials">آراء الأهالي</a></li>
|
||
<li><a href="#contact">تواصل</a></li>
|
||
</ul>
|
||
</nav>
|
||
<div class="header-cta">
|
||
<a href="#contact" class="btn btn-outline" style="color:var(--navy);border-color:rgba(11,36,71,.3);">اتصل بنا</a>
|
||
<a href="#trial" class="btn btn-primary">حجز حصة تجريبية</a>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<div class="breadcrumb">
|
||
<div class="container">
|
||
<a href="homepage-prototype.html">الرئيسية</a><span class="sep">/</span><a href="homepage-prototype.html#programs">البرامج</a><span class="sep">/</span><span class="current">كرة القدم</span>
|
||
</div>
|
||
</div>
|
||
|
||
<section class="program-banner">
|
||
<div class="container banner-grid">
|
||
<div>
|
||
<div class="banner-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="12" cy="12" r="9"/><path d="M12 6l3 2.2-1.1 3.6H10.1L9 8.2 12 6z"/><path d="M3.5 10.5L9 8.2M20.5 10.5L15 8.2M8.2 20.5l1.9-5.7M15.8 20.5l-1.9-5.7"/></svg></div>
|
||
<div class="hero-eyebrow"><span class="dot"></span> الفئة العمرية 4–16 سنة</div>
|
||
<h1>كرة القدم للأطفال والناشئين</h1>
|
||
<p class="lead">برنامج شامل يبني المهارات الفردية والتكتيكية وروح العمل الجماعي داخل الملعب، عبر تمارين ممتعة ومباريات تطبيقية موجَّهة بإشراف مدربين متخصصين.</p>
|
||
<div class="dual-cta">
|
||
<a href="#contact" class="btn btn-primary">احجز حصة تجريبية مجانية</a>
|
||
<a href="https://wa.me/966559695266" class="btn btn-outline" target="_blank" rel="noopener">تواصل عبر واتساب</a>
|
||
</div>
|
||
</div>
|
||
<div class="banner-visual" style="background:url(images/football-1.jpg); background-size:cover; background-position:center;"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="quickfacts">
|
||
<div class="container">
|
||
<div class="qf-item"><span class="n">4–16</span><span class="l">الفئة العمرية</span></div><div class="qf-item"><span class="n">60–90</span><span class="l">دقيقة لكل حصة</span></div><div class="qf-item"><span class="n">2–3</span><span class="l">حصص أسبوعيًا</span></div><div class="qf-item"><span class="n">11</span><span class="l">لاعب لكل فريق تدريبي</span></div>
|
||
</div>
|
||
</div>
|
||
|
||
<section id="desc">
|
||
<div class="container desc-grid">
|
||
<div class="reveal">
|
||
<div class="eyebrow">نظرة عامة</div>
|
||
<h2 class="section-title">الهدف من البرنامج</h2>
|
||
<p style="color:var(--gray);font-size:15.5px;">برنامج شامل يبني المهارات الفردية والتكتيكية وروح العمل الجماعي داخل الملعب، عبر تمارين ممتعة ومباريات تطبيقية موجَّهة بإشراف مدربين متخصصين.</p>
|
||
<div class="audience-grid">
|
||
<div class="audience-pill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> مناسب للمبتدئين والمتقدمين</div><div class="audience-pill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> مجموعات مقسّمة حسب العمر</div><div class="audience-pill"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> زي ومعدات تدريب موحّدة</div>
|
||
</div>
|
||
</div>
|
||
<div class="desc-visual reveal">
|
||
<div class="prog-slider"><img src="images/football-1.jpg" alt="" class="active kb"><img src="images/football-2.jpg" alt="" class=""><img src="images/football-3.jpg" alt="" class=""><img src="images/football-4.jpg" alt="" class=""><button type="button" class="prog-nav prev" onclick="progSlide(-1)" aria-label="السابق"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#221C33" stroke-width="2.4"><path d="M9 6l6 6-6 6"/></svg></button><button type="button" class="prog-nav next" onclick="progSlide(1)" aria-label="التالي"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="#221C33" stroke-width="2.4"><path d="M15 6l-6 6 6 6"/></svg></button><div class="prog-dots"><button type="button" class="prog-dot active" onclick="progSlideTo(0)" aria-label="صورة 1"></button><button type="button" class="prog-dot" onclick="progSlideTo(1)" aria-label="صورة 2"></button><button type="button" class="prog-dot" onclick="progSlideTo(2)" aria-label="صورة 3"></button><button type="button" class="prog-dot" onclick="progSlideTo(3)" aria-label="صورة 4"></button></div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="alt" id="levels">
|
||
<div class="container">
|
||
<div class="eyebrow">رحلة التطور</div>
|
||
<h2 class="section-title">من الأساسيات إلى الملعب التنافسي</h2>
|
||
<p class="section-lead">مسار تدرّجي واضح ينتقل فيه الطفل من التحكم الأساسي بالكرة حتى المشاركة في مباريات تطبيقية منظمة.</p>
|
||
<div class="level-path">
|
||
<div class="level reveal"><div class="level-dot" style="background:#fff;">1</div><h4>الناشئ</h4><p>التحكم الأساسي بالكرة</p></div><div class="level reveal"><div class="level-dot" style="background:#D9E8D0;">2</div><h4>اللاعب</h4><p>التمرير والاستلام</p></div><div class="level reveal"><div class="level-dot" style="background:#B8D9A8;">3</div><h4>المتقدم</h4><p>المهارات التكتيكية</p></div><div class="level reveal"><div class="level-dot" style="background:#8FB877;">4</div><h4>القائد</h4><p>العمل الجماعي والمباريات</p></div><div class="level reveal"><div class="level-dot" style="background:var(--navy);color:#fff;">5</div><h4>النجم</h4><p>الاستعداد للبطولات</p></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="components">
|
||
<div class="container">
|
||
<div class="eyebrow">مكونات الحصة</div>
|
||
<h2 class="section-title">كيف تسير الحصة التدريبية</h2>
|
||
<div class="components-grid">
|
||
<div class="component-card reveal">
|
||
<div class="ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M20 6L9 17l-5-5"/></svg></div>
|
||
<h5>إحماء حركي</h5><p>10 دقائق</p>
|
||
</div><div class="component-card reveal">
|
||
<div class="ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="12" cy="12" r="9"/><path d="M12 6l3 2.2-1.1 3.6H10.1L9 8.2 12 6z"/><path d="M3.5 10.5L9 8.2M20.5 10.5L15 8.2M8.2 20.5l1.9-5.7M15.8 20.5l-1.9-5.7"/></svg></div>
|
||
<h5>تمارين تحكم بالكرة</h5><p>20 دقيقة</p>
|
||
</div><div class="component-card reveal">
|
||
<div class="ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M20 6L9 17l-5-5"/></svg></div>
|
||
<h5>تمارين تمرير وتصويب</h5><p>20 دقيقة</p>
|
||
</div><div class="component-card reveal">
|
||
<div class="ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><circle cx="12" cy="12" r="9"/><path d="M12 6l3 2.2-1.1 3.6H10.1L9 8.2 12 6z"/><path d="M3.5 10.5L9 8.2M20.5 10.5L15 8.2M8.2 20.5l1.9-5.7M15.8 20.5l-1.9-5.7"/></svg></div>
|
||
<h5>مباراة تطبيقية مصغّرة</h5><p>20 دقيقة</p>
|
||
</div><div class="component-card reveal">
|
||
<div class="ci"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M20 6L9 17l-5-5"/></svg></div>
|
||
<h5>تهدئة وتقييم</h5><p>10 دقائق</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="alt" id="skills">
|
||
<div class="container">
|
||
<div class="eyebrow">المهارات المكتسبة</div>
|
||
<h2 class="section-title">ماذا يكتسب طفلك</h2>
|
||
<div class="skills-grid">
|
||
<div class="skill-item reveal"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg><span>تحكم متقدم بالكرة</span></div><div class="skill-item reveal"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg><span>روح العمل الجماعي</span></div><div class="skill-item reveal"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg><span>القراءة التكتيكية للعب</span></div><div class="skill-item reveal"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg><span>اللياقة البدنية العامة</span></div><div class="skill-item reveal"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg><span>الانضباط الرياضي</span></div><div class="skill-item reveal"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg><span>الثقة في المنافسة</span></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="coach">
|
||
<div class="container">
|
||
<div class="eyebrow">المدرب المسؤول</div>
|
||
<h2 class="section-title">بإشراف مدرب معتمد</h2>
|
||
<div class="coach-card reveal">
|
||
<div class="coach-avatar">ع.ف</div>
|
||
<div>
|
||
<h4>الأستاذ عمر الفارس</h4>
|
||
<div class="role">مدرب كرة قدم معتمد — رخصة تدريب فئات سنية</div>
|
||
<p>خبرة تزيد عن 6 سنوات في تدريب فئات الناشئين وإعداد فرق المدارس للبطولات المحلية. (نموذج توضيحي — يُستبدل ببيانات المدرب الفعلي)</p>
|
||
<a href="page-coaches.html#coach-football" class="program-link" style="margin-top:14px;display:inline-flex;">عرض الملف الكامل <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 5l-7 7 7 7"/></svg></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="alt" id="faq">
|
||
<div class="container" style="max-width:820px;">
|
||
<div class="eyebrow">أسئلة شائعة</div>
|
||
<h2 class="section-title">أسئلة أولياء الأمور الشائعة</h2>
|
||
<div class="faq-list" style="margin-top:20px;">
|
||
<div class="faq-item open">
|
||
<div class="faq-q">هل يحتاج طفلي لمهارة سابقة بكرة القدم؟ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg></div>
|
||
<div class="faq-a"><p>لا، البرنامج يستقبل جميع المستويات ابتداءً من الأساسيات، مع مجموعات مقسّمة حسب العمر والمستوى.</p></div>
|
||
</div><div class="faq-item">
|
||
<div class="faq-q">هل يشارك الأطفال في مباريات فعلية؟ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg></div>
|
||
<div class="faq-a"><p>نعم، ضمن المستويات المتقدمة تُنظَّم مباريات تطبيقية داخلية، وقد يُرشَّح المتميزون للمشاركة في بطولات خارجية.</p></div>
|
||
</div><div class="faq-item">
|
||
<div class="faq-q">هل يلزم إحضار معدات خاصة؟ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg></div>
|
||
<div class="faq-a"><p>يكفي حذاء رياضي مناسب وملابس مريحة؛ الكرات ومعدات التدريب توفرها الأكاديمية.</p></div>
|
||
</div><div class="faq-item">
|
||
<div class="faq-q">هل يمكن الجمع بين كرة القدم ورياضة أخرى؟ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg></div>
|
||
<div class="faq-a"><p>نعم، عبر باقة الأنشطة المتعددة يمكن الجمع بين كرة القدم ورياضة أخرى ضمن اشتراك واحد.</p></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="trial">
|
||
<div class="container">
|
||
<div class="final-cta reveal">
|
||
<h2>جاهز يبدأ طفلك رحلته؟</h2>
|
||
<p>عبّي النموذج التالي وسيتواصل معك فريقنا لتأكيد حصة كرة القدم التجريبية المجانية.</p>
|
||
<div class="price-chip" style="margin-top:20px;"><span class="amt">249</span><span class="per">ريال / شهريًا</span></div>
|
||
</div>
|
||
<div class="reveal" style="max-width:640px;margin:36px auto 0;background:#fff;border-radius:var(--radius);padding:36px 32px;box-shadow:0 20px 50px -30px rgba(11,36,71,.35);">
|
||
<form id="trialForm" onsubmit="return sendTrialRequest(event)">
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;">
|
||
<div>
|
||
<label style="display:block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:6px;">اسم ولي الأمر *</label>
|
||
<input type="text" id="tf-parent" required style="width:100%;padding:12px 14px;border:1px solid rgba(11,36,71,.15);border-radius:10px;font-family:'Cairo',sans-serif;font-size:14px;">
|
||
</div>
|
||
<div>
|
||
<label style="display:block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:6px;">رقم الجوال (واتساب) *</label>
|
||
<input type="tel" id="tf-phone" required placeholder="05xxxxxxxx" style="width:100%;padding:12px 14px;border:1px solid rgba(11,36,71,.15);border-radius:10px;font-family:'Cairo',sans-serif;font-size:14px;">
|
||
</div>
|
||
</div>
|
||
<div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;">
|
||
<div>
|
||
<label style="display:block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:6px;">اسم الطفل وعمره</label>
|
||
<input type="text" id="tf-child" style="width:100%;padding:12px 14px;border:1px solid rgba(11,36,71,.15);border-radius:10px;font-family:'Cairo',sans-serif;font-size:14px;">
|
||
</div>
|
||
<div>
|
||
<label style="display:block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:6px;">الرياضة المطلوبة</label>
|
||
<select id="tf-sport" style="width:100%;padding:12px 14px;border:1px solid rgba(11,36,71,.15);border-radius:10px;font-family:'Cairo',sans-serif;font-size:14px;background:#fff;">
|
||
<option value="كرة القدم" selected>كرة القدم</option>
|
||
<option value="السباحة">السباحة</option>
|
||
<option value="الكاراتيه / التايكوندو">الكاراتيه / التايكوندو</option>
|
||
<option value="الجمباز">الجمباز</option>
|
||
<option value="الكيك بوكسينغ">الكيك بوكسينغ</option>
|
||
<option value="باقة متعددة الأنشطة">باقة متعددة الأنشطة</option>
|
||
<option value="ذوي الهمم">ذوي الهمم</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div style="margin-bottom:20px;">
|
||
<label style="display:block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:6px;">ملاحظات (اختياري)</label>
|
||
<textarea id="tf-notes" rows="3" style="width:100%;padding:12px 14px;border:1px solid rgba(11,36,71,.15);border-radius:10px;font-family:'Cairo',sans-serif;font-size:14px;resize:vertical;"></textarea>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary" style="width:100%;justify-content:center;">إرسال الطلب عبر واتساب ←</button>
|
||
<p style="font-size:12px;color:var(--gray);text-align:center;margin-top:14px;">بالإرسال سيتم فتح واتساب برسالة جاهزة لتأكيد طلبك مباشرة مع الأكاديمية.</p>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer id="contact">
|
||
<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>
|
||
<p style="font-size:13.5px;margin-top:6px;">"نصنع أبطال الغد، بخطوة اليوم"</p>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h5>روابط سريعة</h5>
|
||
<ul>
|
||
<li><a href="homepage-prototype.html#programs">البرامج التدريبية</a></li>
|
||
<li><a href="page-about.html">من نحن</a></li>
|
||
<li><a href="page-pricing.html">الباقات والأسعار</a></li>
|
||
<li><a href="page-blog.html">المدونة</a></li>
|
||
<li><a href="page-coaches.html">فريق المدربين</a></li>
|
||
<li><a href="page-privacy.html">سياسة الخصوصية</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h5>ساعات العمل</h5>
|
||
<ul>
|
||
<li>السبت – الخميس</li>
|
||
<li>3:00م – 9:00م</li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h5>تواصل معنا</h5>
|
||
<ul>
|
||
<li><a href="tel:+966559695266">0559695266</a></li>
|
||
<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.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>
|
||
<a href="https://wa.me/966559695266" target="_blank" rel="noopener" aria-label="WhatsApp" 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="M17.6 6.32A8.86 8.86 0 0 0 12.05 4a8.94 8.94 0 0 0-7.75 13.4L3 21l3.72-1.24a8.9 8.9 0 0 0 4.33 1.1h0a8.93 8.93 0 0 0 8.94-8.86 8.83 8.83 0 0 0-2.4-6.68zM12.05 19.4a7.4 7.4 0 0 1-3.78-1.04l-.27-.16-2.8.9.9-2.7-.18-.28a7.4 7.4 0 1 1 6.13 3.28zm4.07-5.53c-.22-.11-1.3-.64-1.5-.72s-.35-.11-.5.11-.58.72-.71.86-.26.16-.48.05a6.06 6.06 0 0 1-1.78-1.1 6.64 6.64 0 0 1-1.23-1.53c-.13-.22 0-.34.1-.45s.22-.26.33-.38a1.5 1.5 0 0 0 .22-.37.4.4 0 0 0 0-.38c-.05-.11-.5-1.2-.68-1.64s-.37-.38-.5-.38h-.43a.82.82 0 0 0-.6.28 2.5 2.5 0 0 0-.78 1.86 4.34 4.34 0 0 0 .91 2.3 9.94 9.94 0 0 0 3.8 3.36c.53.23.94.36 1.26.46a3 3 0 0 0 1.39.09 2.27 2.27 0 0 0 1.49-1.05 1.85 1.85 0 0 0 .13-1.05c-.05-.09-.2-.15-.42-.26z"/></svg></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<span>© 2026 أكاديمية الكاف الرياضية — جميع الحقوق محفوظة</span>
|
||
<span>تصميم: محمد الشيخ — <a href="https://wa.me/966566785756" target="_blank" rel="noopener" style="text-decoration:underline;">واتساب 0566785756</a></span>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<div class="mobile-sticky">
|
||
<a href="#trial" class="btn btn-primary">احجز حصة تجريبية مجانية</a>
|
||
</div>
|
||
|
||
<script>
|
||
// scroll reveal
|
||
const reveals = document.querySelectorAll('.reveal');
|
||
const io = new IntersectionObserver((entries)=>{
|
||
entries.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target);} });
|
||
},{threshold:.15});
|
||
reveals.forEach(r=>io.observe(r));
|
||
|
||
// counters
|
||
const counters = document.querySelectorAll('[data-count]');
|
||
const cio = new IntersectionObserver((entries)=>{
|
||
entries.forEach(e=>{
|
||
if(e.isIntersecting){
|
||
const el = e.target;
|
||
const target = +el.dataset.count;
|
||
let cur = 0;
|
||
const step = Math.max(1, Math.ceil(target/40));
|
||
const t = setInterval(()=>{
|
||
cur += step;
|
||
if(cur >= target){ cur = target; clearInterval(t); }
|
||
el.textContent = cur;
|
||
}, 30);
|
||
cio.unobserve(el);
|
||
}
|
||
});
|
||
},{threshold:.6});
|
||
counters.forEach(c=>cio.observe(c));
|
||
</script>
|
||
|
||
<script>
|
||
function sendTrialRequest(e){
|
||
e.preventDefault();
|
||
var parent = document.getElementById('tf-parent').value.trim();
|
||
var phone = document.getElementById('tf-phone').value.trim();
|
||
var child = document.getElementById('tf-child').value.trim();
|
||
var sport = document.getElementById('tf-sport').value;
|
||
var notes = document.getElementById('tf-notes').value.trim();
|
||
var msg = 'مرحبًا أكاديمية الكاف، أرغب بحجز حصة تجريبية مجانية.\n';
|
||
msg += 'اسم ولي الأمر: ' + parent + '\n';
|
||
msg += 'رقم الجوال: ' + phone + '\n';
|
||
if(child) msg += 'الطفل: ' + child + '\n';
|
||
msg += 'الرياضة: ' + sport + '\n';
|
||
if(notes) msg += 'ملاحظات: ' + notes;
|
||
window.open('https://wa.me/966559695266?text=' + encodeURIComponent(msg), '_blank');
|
||
return false;
|
||
}
|
||
</script>
|
||
|
||
<script>
|
||
document.querySelectorAll('.faq-q').forEach(q=>{
|
||
q.addEventListener('click', ()=>{
|
||
const item = q.parentElement;
|
||
const wasOpen = item.classList.contains('open');
|
||
document.querySelectorAll('.faq-item.open').forEach(i=>i.classList.remove('open'));
|
||
if(!wasOpen) item.classList.add('open');
|
||
});
|
||
});
|
||
</script>
|
||
|
||
|
||
<script>
|
||
(function(){
|
||
const imgs = document.querySelectorAll('.prog-slider img');
|
||
const dots = document.querySelectorAll('.prog-dot');
|
||
let idx = 0;
|
||
function show(i){
|
||
imgs.forEach((img,n)=>{
|
||
img.classList.toggle('active', n===i);
|
||
if(n===i){ img.classList.remove('kb'); void img.offsetWidth; img.classList.add('kb'); }
|
||
else{ img.classList.remove('kb'); }
|
||
});
|
||
dots.forEach((d,n)=> d.classList.toggle('active', n===i));
|
||
idx = i;
|
||
}
|
||
window.progSlide = function(dir){
|
||
show((idx + dir + imgs.length) % imgs.length);
|
||
};
|
||
window.progSlideTo = function(i){ show(i); };
|
||
if(imgs.length > 1){
|
||
let timer = setInterval(()=>progSlide(1), 5000);
|
||
const wrap = document.querySelector('.prog-slider');
|
||
wrap.addEventListener('mouseenter', ()=>clearInterval(timer));
|
||
wrap.addEventListener('mouseleave', ()=>{ timer = setInterval(()=>progSlide(1), 5000); });
|
||
}
|
||
})();
|
||
</script>
|
||
</body>
|
||
</html>
|