Add CAF PT personal training microsite
Standalone page under /pt with matching brand identity (shifted accent color), goal picker, packages, trainer profile, photo gallery, and a TikTok video gallery, ready to be served from a pt subdomain.
This commit is contained in:
Line INK
BIN
pt/caf-logo.png
Normal file
BIN
pt/caf-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
pt/images/coaches/personal-training.webp
Normal file
BIN
pt/images/coaches/personal-training.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
pt/images/personal-training/1.webp
Normal file
BIN
pt/images/personal-training/1.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
BIN
pt/images/personal-training/10.webp
Normal file
BIN
pt/images/personal-training/10.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 167 KiB |
BIN
pt/images/personal-training/11.webp
Normal file
BIN
pt/images/personal-training/11.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
BIN
pt/images/personal-training/12.webp
Normal file
BIN
pt/images/personal-training/12.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
BIN
pt/images/personal-training/13.webp
Normal file
BIN
pt/images/personal-training/13.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
BIN
pt/images/personal-training/14.webp
Normal file
BIN
pt/images/personal-training/14.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 59 KiB |
BIN
pt/images/personal-training/2.webp
Normal file
BIN
pt/images/personal-training/2.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 111 KiB |
BIN
pt/images/personal-training/3.webp
Normal file
BIN
pt/images/personal-training/3.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
BIN
pt/images/personal-training/4.webp
Normal file
BIN
pt/images/personal-training/4.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
BIN
pt/images/personal-training/5.webp
Normal file
BIN
pt/images/personal-training/5.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
BIN
pt/images/personal-training/6.webp
Normal file
BIN
pt/images/personal-training/6.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
BIN
pt/images/personal-training/7.webp
Normal file
BIN
pt/images/personal-training/7.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
BIN
pt/images/personal-training/8.webp
Normal file
BIN
pt/images/personal-training/8.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
BIN
pt/images/personal-training/9.webp
Normal file
BIN
pt/images/personal-training/9.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
BIN
pt/images/ptimagesgallery-new/1.jpeg
Normal file
BIN
pt/images/ptimagesgallery-new/1.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
BIN
pt/images/ptimagesgallery-new/10.jpeg
Normal file
BIN
pt/images/ptimagesgallery-new/10.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
BIN
pt/images/ptimagesgallery-new/11.jpeg
Normal file
BIN
pt/images/ptimagesgallery-new/11.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
BIN
pt/images/ptimagesgallery-new/12.jpeg
Normal file
BIN
pt/images/ptimagesgallery-new/12.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
BIN
pt/images/ptimagesgallery-new/2.jpeg
Normal file
BIN
pt/images/ptimagesgallery-new/2.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
BIN
pt/images/ptimagesgallery-new/3.jpeg
Normal file
BIN
pt/images/ptimagesgallery-new/3.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
BIN
pt/images/ptimagesgallery-new/4.jpeg
Normal file
BIN
pt/images/ptimagesgallery-new/4.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 113 KiB |
BIN
pt/images/ptimagesgallery-new/5.jpeg
Normal file
BIN
pt/images/ptimagesgallery-new/5.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
BIN
pt/images/ptimagesgallery-new/6.jpeg
Normal file
BIN
pt/images/ptimagesgallery-new/6.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 126 KiB |
BIN
pt/images/ptimagesgallery-new/7.jpeg
Normal file
BIN
pt/images/ptimagesgallery-new/7.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
BIN
pt/images/ptimagesgallery-new/8.jpeg
Normal file
BIN
pt/images/ptimagesgallery-new/8.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
BIN
pt/images/ptimagesgallery-new/9.jpeg
Normal file
BIN
pt/images/ptimagesgallery-new/9.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 115 KiB |
877
pt/index.html
Normal file
877
pt/index.html
Normal file
@@ -0,0 +1,877 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ar" dir="rtl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CAF PT — تدريب شخصي فردي | أكاديمية الكاف الرياضية</title>
|
||||
<meta name="description" content="برنامج تدريب شخصي فردي للرجال والنساء بإشراف مدربين ومدربات معتمدين. خطة مخصصة حسب هدفك، خصوصية تامة، ونتائج تُقاس. احجز تقييمك المجاني الآن.">
|
||||
<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="CAF PT — تدريب شخصي فردي">
|
||||
<meta property="og:description" content="برنامج تدريب شخصي فردي بإشراف مدربين معتمدين، خطة مخصصة حسب هدفك، ونتائج تُقاس.">
|
||||
<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>
|
||||
/* ===== CAF PT — same identity as the main academy, shifted accent (brick-red instead of gold) ===== */
|
||||
:root{
|
||||
--navy:#18253A;
|
||||
--navy-deep:#071A38;
|
||||
--orange:#C1443B; /* PT accent — brick red, distinct from academy gold */
|
||||
--gold:#8A332C; /* deep PT accent */
|
||||
--gold-light:#F0D6D2; /* light PT tint */
|
||||
--bg:#F7F5F1;
|
||||
--surface:#EFEBE3;
|
||||
--text:#221C33;
|
||||
--gray:#6E6579;
|
||||
--green:#C1443B;
|
||||
--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:'Cairo',sans-serif;font-size:15px;font-weight:800;letter-spacing:.02em;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(193,68,59,.45);}
|
||||
.btn-primary:hover{box-shadow:0 14px 30px -8px rgba(193,68,59,.6);}
|
||||
.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(24,37,58,.86);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.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:18px;color:#fff;}
|
||||
.logo-badge{width:52px;height:52px;border-radius:12px;background:transparent;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;}
|
||||
.logo .pt-tag{display:inline-flex;align-items:center;font-family:'Poppins';font-weight:800;font-size:11px;letter-spacing:.06em;color:var(--orange);background:rgba(193,68,59,.16);border:1px solid rgba(193,68,59,.4);padding:3px 9px;border-radius:100px;margin-inline-start:4px;}
|
||||
nav ul{display:flex;gap:30px;font-weight:600;font-size:14.5px;}
|
||||
nav a{position:relative;color:#fff;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(193,68,59,.32), transparent 60%),radial-gradient(900px 500px at -10% 110%, rgba(193,68,59,.16), transparent 60%),linear-gradient(155deg, var(--navy-deep) 0%, var(--navy) 55%, #2E4468 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(--orange);display:inline-block;}
|
||||
.hero h1{font-size:clamp(34px,4.6vw,54px);color:#fff;line-height:1.28;font-weight:900;margin-bottom:20px;}
|
||||
.hero h1 em{font-style:normal;color:var(--orange);}
|
||||
.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(--orange);}
|
||||
.hero-meta .l{font-size:12.5px;color:rgba(255,255,255,.65);}
|
||||
.hero-visual{position:relative;height:420px;border-radius:28px;overflow:hidden;background:linear-gradient(150deg,var(--navy) 0%, #2E4468 100%);box-shadow:0 40px 70px -30px rgba(0,0,0,.5);}
|
||||
.hero-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg, rgba(7,26,56,.55), transparent 55%);z-index:2;pointer-events:none;}
|
||||
.hero-slider{position:relative;width:100%;height:100%;}
|
||||
.hero-slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;opacity:0;transition:opacity 1.4s ease;}
|
||||
.hero-slider img.active{opacity:.92;z-index:1;}
|
||||
.hero-slider img.kb{animation:ptKenBurns 7s ease-out forwards;}
|
||||
@keyframes ptKenBurns{from{transform:scale(1.06);}to{transform:scale(1.16);}}
|
||||
@media (prefers-reduced-motion: reduce){.hero-slider img.kb{animation:none;}}
|
||||
/* subtle glow that follows the cursor across the hero, for a premium feel */
|
||||
.hero{position:relative;}
|
||||
.cursor-glow{position:absolute;width:420px;height:420px;border-radius:50%;pointer-events:none;background:radial-gradient(circle, rgba(193,68,59,.16), transparent 70%);transform:translate(-50%,-50%);z-index:1;transition:opacity .3s ease;opacity:0;}
|
||||
.hero:hover .cursor-glow{opacity:1;}
|
||||
@media (max-width:920px){.cursor-glow{display: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(--orange);flex-shrink:0;}
|
||||
|
||||
section{padding:96px 0;}
|
||||
.alt{background:var(--surface);}
|
||||
|
||||
/* ===== GOAL PICKER ===== */
|
||||
.goal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
|
||||
.goal-card{background:#fff;border-radius:var(--radius);padding:28px 22px;border:2px solid rgba(11,36,71,.07);cursor:pointer;transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;text-align:center;}
|
||||
.goal-card:hover{transform:translateY(-5px);box-shadow:0 20px 36px -22px rgba(11,36,71,.3);}
|
||||
.goal-card.active{border-color:var(--orange);box-shadow:0 20px 36px -22px rgba(193,68,59,.4);}
|
||||
.goal-icon{width:58px;height:58px;border-radius:16px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--orange) 14%, white);}
|
||||
.goal-icon svg{width:28px;height:28px;color:var(--orange);}
|
||||
.goal-card h4{font-size:16px;margin-bottom:6px;color:var(--navy);}
|
||||
.goal-card p{font-size:12.5px;color:var(--gray);}
|
||||
.goal-picked-note{display:none;text-align:center;margin-top:26px;font-size:14px;color:var(--navy);font-weight:700;}
|
||||
.goal-picked-note.show{display:block;}
|
||||
|
||||
/* ===== ABOUT / WHY DIFFERENT ===== */
|
||||
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
|
||||
.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(--orange);flex-shrink:0;margin-top:2px;}
|
||||
.about-visual{aspect-ratio:1/1;border-radius:28px;overflow:hidden;position:relative;}
|
||||
.about-visual img{width:100%;height:100%;object-fit:cover;}
|
||||
|
||||
/* ===== LEVEL PATH ===== */
|
||||
.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(193,68,59,.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);}
|
||||
|
||||
/* ===== PACKAGES ===== */
|
||||
.pkg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
|
||||
.pkg-card{background:#fff;border-radius:var(--radius);padding:32px 24px;border:1px solid rgba(11,36,71,.07);position:relative;display:flex;flex-direction:column;}
|
||||
.pkg-card.featured{border-color:var(--orange);box-shadow:0 26px 46px -26px rgba(193,68,59,.35);}
|
||||
.pkg-badge{position:absolute;top:-13px;right:24px;background:var(--orange);color:#fff;font-size:11.5px;font-weight:800;padding:5px 14px;border-radius:100px;}
|
||||
.pkg-card h4{font-size:15px;color:var(--gray);margin-bottom:10px;}
|
||||
.pkg-card .price{font-family:'Poppins';font-weight:800;font-size:30px;color:var(--navy);margin-bottom:2px;}
|
||||
.pkg-card .per-month{font-size:12.5px;color:var(--orange);font-weight:700;margin-bottom:18px;}
|
||||
.pkg-card ul{display:grid;gap:10px;margin-bottom:24px;flex:1;}
|
||||
.pkg-card li{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;color:var(--text);}
|
||||
.pkg-card li svg{width:17px;height:17px;color:var(--orange);flex-shrink:0;margin-top:2px;}
|
||||
|
||||
/* ===== TRAINER ===== */
|
||||
.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:110px;height:110px;border-radius:20px;flex-shrink:0;object-fit:cover;}
|
||||
.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);}
|
||||
.audience-grid{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;}
|
||||
.audience-pill{display:flex;align-items:center;gap:8px;background:var(--surface);padding:10px 16px;border-radius:100px;font-size:13px;font-weight:700;color:var(--navy);}
|
||||
.audience-pill svg{width:16px;height:16px;color:var(--orange);}
|
||||
|
||||
/* ===== GALLERY + LIGHTBOX ===== */
|
||||
/* masonry via CSS columns — each photo keeps its natural ratio, nothing gets cropped */
|
||||
.gallery-grid{column-count:4;column-gap:14px;}
|
||||
.gallery-item{break-inside:avoid;margin-bottom:14px;border-radius:16px;overflow:hidden;cursor:zoom-in;position:relative;}
|
||||
.gallery-item img{display:block;width:100%;height:auto;transition:transform .5s ease;}
|
||||
.gallery-item:hover img{transform:scale(1.05);}
|
||||
.gallery-item::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg, rgba(7,26,56,.35), transparent 45%);opacity:0;transition:opacity .3s ease;}
|
||||
.gallery-item:hover::after{opacity:1;}
|
||||
.lightbox{position:fixed;inset:0;background:rgba(7,10,20,.92);z-index:200;display:none;align-items:center;justify-content:center;padding:40px;}
|
||||
.lightbox.open{display:flex;}
|
||||
.lightbox img{max-width:min(900px,92vw);max-height:88vh;border-radius:12px;box-shadow:0 30px 60px rgba(0,0,0,.5);}
|
||||
.lightbox-close{position:absolute;top:22px;left:26px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:26px;line-height:1;cursor:pointer;}
|
||||
@media (max-width:920px){.gallery-grid{column-count:2;}}
|
||||
@media (max-width:600px){.gallery-grid{column-count:1;}}
|
||||
|
||||
/* tilt hover on goal + package cards for a more "premium" feel */
|
||||
.goal-card, .pkg-card{will-change:transform;transform-style:preserve-3d;}
|
||||
|
||||
/* header shrink on scroll */
|
||||
header.scrolled .nav-wrap{height:64px;}
|
||||
|
||||
/* active nav link (scrollspy) */
|
||||
nav a.active{color:var(--orange);}
|
||||
nav a.active::after{content:"";position:absolute;bottom:-22px;right:0;left:0;height:2px;background:var(--orange);}
|
||||
|
||||
/* ===== TIKTOK GALLERY ===== */
|
||||
.tiktok-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:26px;align-items:start;}
|
||||
.tiktok-item{background:#fff;border-radius:var(--radius);padding:6px;border:1px solid rgba(11,36,71,.07);overflow:hidden;display:flex;justify-content:center;}
|
||||
.tiktok-item blockquote.tiktok-embed{margin:0 !important;}
|
||||
|
||||
/* ===== RESULTS / METHOD ===== */
|
||||
.results-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;}
|
||||
.result-card{background:#fff;border-radius:var(--radius);padding:26px 22px;border:1px solid rgba(11,36,71,.07);}
|
||||
.result-card .ri{width:48px;height:48px;border-radius:14px;margin-bottom:14px;background:var(--surface);display:flex;align-items:center;justify-content:center;}
|
||||
.result-card .ri svg{width:24px;height:24px;color:var(--orange);}
|
||||
.result-card h5{font-size:15px;margin-bottom:6px;color:var(--navy);}
|
||||
.result-card p{font-size:13px;color:var(--gray);}
|
||||
|
||||
/* ===== ASSESSMENT FORM ===== */
|
||||
.assess-wrap{max-width:680px;margin:0 auto;background:#fff;border-radius:var(--radius);padding:40px 36px;box-shadow:0 20px 50px -30px rgba(11,36,71,.35);}
|
||||
.assess-wrap label{display:block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:6px;}
|
||||
.assess-wrap input, .assess-wrap select, .assess-wrap textarea{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;}
|
||||
.assess-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
|
||||
.assess-row.full{grid-template-columns:1fr;}
|
||||
.assess-goal-active{border-color:var(--orange) !important;background:var(--gold-light);}
|
||||
|
||||
/* ===== FAQ ===== */
|
||||
.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);}
|
||||
|
||||
/* ===== FINAL CTA ===== */
|
||||
.final-cta{background:linear-gradient(120deg,var(--black) 0%, var(--navy-deep) 55%, var(--navy) 100%);border:1px solid rgba(193,68,59,.35);border-radius:32px;padding:64px 50px;text-align:center;position:relative;overflow:hidden;}
|
||||
.final-cta::before{content:"";position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle, rgba(193,68,59,.2), 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:10px;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(--orange);}
|
||||
.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:120px;height:120px;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;}
|
||||
.reveal.in{opacity:1;transform:translateY(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;}
|
||||
|
||||
@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;}
|
||||
.goal-grid, .pkg-grid{grid-template-columns:1fr 1fr;}
|
||||
.results-grid{grid-template-columns:1fr 1fr;}
|
||||
.footer-grid{grid-template-columns:1fr 1fr;}
|
||||
.level-path{flex-wrap:wrap;gap:20px;}
|
||||
.level-path::before{display:none;}
|
||||
}
|
||||
@media (max-width:600px){
|
||||
.goal-grid, .pkg-grid, .results-grid, .footer-grid{grid-template-columns:1fr;}
|
||||
.hero{padding:64px 0 80px;}
|
||||
.final-cta{padding:44px 24px;}
|
||||
.assess-wrap{padding:28px 20px;}
|
||||
.assess-row{grid-template-columns:1fr;}
|
||||
.coach-card{flex-direction:column;text-align:center;}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="container nav-wrap">
|
||||
<a href="index.html" class="logo"><span class="logo-badge"><img src="caf-logo.png" alt="شعار أكاديمية الكاف"></span> <span class="pt-tag">PT</span></a>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#goals">هدفك</a></li>
|
||||
<li><a href="#packages">الباقات</a></li>
|
||||
<li><a href="#trainer">المدرب</a></li>
|
||||
<li><a href="#gallery">الصور</a></li>
|
||||
<li><a href="#tiktok">تيك توك</a></li>
|
||||
<li><a href="#faq">الأسئلة الشائعة</a></li>
|
||||
<li><a href="https://caf-academy.com">الموقع الرئيسي</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="header-cta">
|
||||
<a href="https://wa.me/966559695266" target="_blank" rel="noopener" class="btn btn-outline">واتساب</a>
|
||||
<a href="#assessment" class="btn btn-primary">تقييم مجاني</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="hero" id="heroSection">
|
||||
<div class="cursor-glow" id="cursorGlow"></div>
|
||||
<div class="container hero-grid">
|
||||
<div>
|
||||
<div class="hero-eyebrow"><span class="dot"></span> رجال ونساء · من 12 سنة فأكثر</div>
|
||||
<h1>خطتك الرياضية <em>الخاصة</em>،<br>مصممة لهدفك وحدك</h1>
|
||||
<p class="lead">تدريب شخصي فردي بإشراف مدربين ومدربات معتمدين، في بيئة خاصة ومريحة — خطة تُبنى حول جسمك وهدفك، مش قالب جاهز للجميع.</p>
|
||||
<div class="hero-actions">
|
||||
<a href="#assessment" class="btn btn-primary">احجز تقييمك المجاني</a>
|
||||
<a href="https://wa.me/966559695266" target="_blank" rel="noopener" class="btn btn-outline">تواصل عبر واتساب</a>
|
||||
</div>
|
||||
<div class="hero-meta">
|
||||
<div><span class="n">1:1</span><span class="l">مدرب لكل متدرب</span></div>
|
||||
<div><span class="n">12+</span><span class="l">الفئة العمرية</span></div>
|
||||
<div><span class="n">60</span><span class="l">دقيقة لكل حصة</span></div>
|
||||
<div><span class="n">100%</span><span class="l">خصوصية أثناء الحصة</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<div class="hero-slider">
|
||||
<img src="images/ptimagesgallery-new/1.jpeg" alt="" class="active kb">
|
||||
<img src="images/ptimagesgallery-new/5.jpeg" alt="" class="">
|
||||
<img src="images/ptimagesgallery-new/9.jpeg" alt="" class="">
|
||||
<img src="images/personal-training/3.webp" alt="" class="">
|
||||
<img src="images/ptimagesgallery-new/12.jpeg" alt="" class="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="trust">
|
||||
<div class="container">
|
||||
<div class="trust-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> مدربون ومدربات معتمدون</div>
|
||||
<div class="trust-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> خطة مخصصة تُراجَع دوريًا</div>
|
||||
<div class="trust-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> جدول حصص مرن</div>
|
||||
<div class="trust-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> بيئة خاصة للرجال والنساء</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== GOAL PICKER ===== -->
|
||||
<section id="goals">
|
||||
<div class="container">
|
||||
<div class="eyebrow">ابدأ من هنا</div>
|
||||
<h2 class="section-title">وش هدفك؟</h2>
|
||||
<p class="section-lead">اختر هدفك الأساسي وهنجهّز لك نموذج التقييم مباشرة على أساسه — تقدر تغيّره وقت ما تحب.</p>
|
||||
<div class="goal-grid">
|
||||
<div class="goal-card" data-goal="خسارة وزن">
|
||||
<div class="goal-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M12 3v18M5 8l7-5 7 5M5 16l7 5 7-5"/></svg></div>
|
||||
<h4>خسارة وزن</h4><p>حرق دهون وتحسين اللياقة العامة</p>
|
||||
</div>
|
||||
<div class="goal-card" data-goal="بناء عضلات">
|
||||
<div class="goal-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M6 7v10M18 7v10M2 10v4M22 10v4M6 12h12"/></svg></div>
|
||||
<h4>بناء عضلات</h4><p>زيادة الكتلة العضلية والقوة</p>
|
||||
</div>
|
||||
<div class="goal-card" data-goal="لياقة عامة">
|
||||
<div class="goal-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M13 2L3 14h7l-1 8 10-12h-7l1-8z"/></svg></div>
|
||||
<h4>لياقة عامة</h4><p>نشاط وحيوية يومية أفضل</p>
|
||||
</div>
|
||||
<div class="goal-card" data-goal="تأهيل إصابات">
|
||||
<div class="goal-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M20 6L9 17l-5-5"/></svg></div>
|
||||
<h4>تأهيل إصابات</h4><p>استرجاع الحركة بأمان وتدرّج</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="goal-picked-note" id="goalNote"></p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== WHY DIFFERENT ===== -->
|
||||
<section class="alt" id="why">
|
||||
<div class="container about-grid">
|
||||
<div class="reveal">
|
||||
<div class="eyebrow">ليه تدريب شخصي</div>
|
||||
<h2 class="section-title">خطة حولك أنت، مش أنت جزء من مجموعة</h2>
|
||||
<p style="color:var(--gray);font-size:15.5px;">في التدريب الشخصي كل تفصيلة في الخطة مبنية على جسمك، وقتك، وهدفك الحقيقي — والمدرب معاك خطوة بخطوة يعدّل الخطة حسب استجابتك.</p>
|
||||
<ul class="about-list">
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> تقييم أولي شامل قبل أول حصة</li>
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> خصوصية تامة أثناء التدريب</li>
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> مدربون ومدربات معتمدون لكل هدف</li>
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> متابعة وتعديل الخطة كل أسبوعين</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="about-visual reveal"><img src="images/personal-training/2.webp" alt="تدريب شخصي"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== LEVEL PATH ===== -->
|
||||
<section>
|
||||
<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:#DADFE3;">2</div><h4>التأسيس</h4><p>بناء القاعدة الحركية</p></div>
|
||||
<div class="level reveal"><div class="level-dot" style="background:#AEB7C0;">3</div><h4>البناء</h4><p>زيادة الشدة تدريجيًا</p></div>
|
||||
<div class="level reveal"><div class="level-dot" style="background:#78838F;">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>
|
||||
|
||||
<!-- ===== PACKAGES ===== -->
|
||||
<section class="alt" id="packages">
|
||||
<div class="container">
|
||||
<div class="eyebrow">الباقات والأسعار</div>
|
||||
<h2 class="section-title">اختر الباقة اللي تناسب التزامك</h2>
|
||||
<p class="section-lead">كل الباقات تشمل تقييم أولي مجاني، وخطة مخصصة، ومتابعة مستمرة من المدرب.</p>
|
||||
<div class="pkg-grid">
|
||||
<div class="pkg-card reveal">
|
||||
<h4>شهر واحد</h4>
|
||||
<div class="price">1999<span style="font-size:15px;"> ريال</span></div>
|
||||
<div class="per-month">12 حصة</div>
|
||||
<ul>
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> تقييم أولي مجاني</li>
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> خطة تدريب مخصصة</li>
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> مدرب/ة معتمد/ة</li>
|
||||
</ul>
|
||||
<a href="#assessment" class="btn btn-navy" style="justify-content:center;">ابدأ الآن</a>
|
||||
</div>
|
||||
<div class="pkg-card featured reveal">
|
||||
<div class="pkg-badge">الأكثر طلبًا</div>
|
||||
<h4>3 شهور</h4>
|
||||
<div class="price">4497<span style="font-size:15px;"> ريال</span></div>
|
||||
<div class="per-month">يعادل 1499 ريال/شهر</div>
|
||||
<ul>
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> كل مزايا الباقة الشهرية</li>
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> تعديل الخطة كل أسبوعين</li>
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> أولوية حجز المواعيد</li>
|
||||
</ul>
|
||||
<a href="#assessment" class="btn btn-primary" style="justify-content:center;">ابدأ الآن</a>
|
||||
</div>
|
||||
<div class="pkg-card reveal">
|
||||
<h4>6 شهور</h4>
|
||||
<div class="price">5994<span style="font-size:15px;"> ريال</span></div>
|
||||
<div class="per-month">يعادل 999 ريال/شهر</div>
|
||||
<ul>
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> كل مزايا باقة 3 شهور</li>
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> تقرير تقدّم شهري مفصّل</li>
|
||||
</ul>
|
||||
<a href="#assessment" class="btn btn-navy" style="justify-content:center;">ابدأ الآن</a>
|
||||
</div>
|
||||
<div class="pkg-card reveal">
|
||||
<h4>سنوي</h4>
|
||||
<div class="price">9588<span style="font-size:15px;"> ريال</span></div>
|
||||
<div class="per-month">يعادل 799 ريال/شهر</div>
|
||||
<ul>
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> كل مزايا باقة 6 شهور</li>
|
||||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> أفضل سعر لكل حصة</li>
|
||||
</ul>
|
||||
<a href="#assessment" class="btn btn-navy" style="justify-content:center;">ابدأ الآن</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== TRAINER ===== -->
|
||||
<section id="trainer">
|
||||
<div class="container">
|
||||
<div class="eyebrow">المدرب المسؤول</div>
|
||||
<h2 class="section-title">بإشراف مدرب معتمد دوليًا</h2>
|
||||
<div class="coach-card reveal">
|
||||
<img class="coach-avatar" src="images/coaches/personal-training.webp" alt="الكابتن أحمد حبيب">
|
||||
<div>
|
||||
<h4>الكابتن أحمد حبيب</h4>
|
||||
<div class="role">مدرب معتمد دوليًا بدرجة ماستر — التدريب الشخصي</div>
|
||||
<p>خبرة تزيد عن 10 سنوات في التدريب الشخصي، وعضو النقابة العامة للمهن الرياضية. تتوفر أيضًا مدربات معتمدات للمتدربات النساء ضمن بيئة خاصة ومريحة.</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> معتمد من الاتحاد الدولي LFMA</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> معتمد من المنظمة الدولية WAKO</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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== GALLERY ===== -->
|
||||
<section id="gallery">
|
||||
<div class="container">
|
||||
<div class="eyebrow">من داخل الحصص</div>
|
||||
<h2 class="section-title">لحظات حقيقية من تدريبات CAF PT</h2>
|
||||
<p class="section-lead">صور فعلية من حصص التدريب الشخصي داخل الأكاديمية.</p>
|
||||
<div class="gallery-grid">
|
||||
<div class="gallery-item reveal"><img src="images/ptimagesgallery-new/1.jpeg" alt="حصة تدريب شخصي — كيك بوكسينغ" loading="lazy"></div>
|
||||
<div class="gallery-item reveal"><img src="images/ptimagesgallery-new/2.jpeg" alt="حصة تدريب شخصي" loading="lazy"></div>
|
||||
<div class="gallery-item reveal"><img src="images/ptimagesgallery-new/3.jpeg" alt="حصة تدريب شخصي" loading="lazy"></div>
|
||||
<div class="gallery-item reveal"><img src="images/ptimagesgallery-new/4.jpeg" alt="حصة تدريب شخصي" loading="lazy"></div>
|
||||
<div class="gallery-item reveal"><img src="images/ptimagesgallery-new/5.jpeg" alt="حصة تدريب شخصي" loading="lazy"></div>
|
||||
<div class="gallery-item reveal"><img src="images/ptimagesgallery-new/6.jpeg" alt="حصة تدريب شخصي" loading="lazy"></div>
|
||||
<div class="gallery-item reveal"><img src="images/ptimagesgallery-new/7.jpeg" alt="حصة تدريب شخصي" loading="lazy"></div>
|
||||
<div class="gallery-item reveal"><img src="images/ptimagesgallery-new/8.jpeg" alt="حصة تدريب شخصي" loading="lazy"></div>
|
||||
<div class="gallery-item reveal"><img src="images/ptimagesgallery-new/9.jpeg" alt="حصة تدريب شخصي" loading="lazy"></div>
|
||||
<div class="gallery-item reveal"><img src="images/ptimagesgallery-new/10.jpeg" alt="حصة تدريب شخصي" loading="lazy"></div>
|
||||
<div class="gallery-item reveal"><img src="images/ptimagesgallery-new/11.jpeg" alt="حصة تدريب شخصي" loading="lazy"></div>
|
||||
<div class="gallery-item reveal"><img src="images/ptimagesgallery-new/12.jpeg" alt="حصة تدريب شخصي" loading="lazy"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="lightbox" id="lightbox">
|
||||
<button type="button" class="lightbox-close" id="lightboxClose" aria-label="إغلاق">×</button>
|
||||
<img id="lightboxImg" src="" alt="">
|
||||
</div>
|
||||
|
||||
<!-- ===== TIKTOK VIDEOS ===== -->
|
||||
<section class="alt" id="tiktok">
|
||||
<div class="container">
|
||||
<div class="eyebrow">شاهدنا على تيك توك</div>
|
||||
<h2 class="section-title">فيديوهات حقيقية من حصص CAF PT</h2>
|
||||
<p class="section-lead">تابع أحدث فيديوهاتنا مباشرة من حساب <a href="https://www.tiktok.com/@p.t.caf_academy" target="_blank" rel="noopener" style="color:var(--orange);font-weight:700;">@p.t.caf_academy</a> على تيك توك.</p>
|
||||
<div class="tiktok-grid">
|
||||
<div class="tiktok-item reveal">
|
||||
<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@p.t.caf_academy/video/7681767896925752583" data-video-id="7681767896925752583" style="max-width: 100%; min-width: 260px;">
|
||||
<section></section>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="tiktok-item reveal">
|
||||
<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@p.t.caf_academy/video/7678343620172418322" data-video-id="7678343620172418322" style="max-width: 100%; min-width: 260px;">
|
||||
<section></section>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="tiktok-item reveal">
|
||||
<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@p.t.caf_academy/video/7681768444374617351" data-video-id="7681768444374617351" style="max-width: 100%; min-width: 260px;">
|
||||
<section></section>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="tiktok-item reveal">
|
||||
<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@p.t.caf_academy/video/7601885483882450184" data-video-id="7601885483882450184" style="max-width: 100%; min-width: 260px;">
|
||||
<section></section>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="tiktok-item reveal">
|
||||
<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@p.t.caf_academy/video/7654471212902485255" data-video-id="7654471212902485255" style="max-width: 100%; min-width: 260px;">
|
||||
<section></section>
|
||||
</blockquote>
|
||||
</div>
|
||||
<div class="tiktok-item reveal">
|
||||
<blockquote class="tiktok-embed" cite="https://www.tiktok.com/@p.t.caf_academy/video/7601464846994984199" data-video-id="7601464846994984199" style="max-width: 100%; min-width: 260px;">
|
||||
<section></section>
|
||||
</blockquote>
|
||||
</div>
|
||||
<!-- لإضافة فيديو جديد: انسخ نفس div.tiktok-item وغيّر رابط cite ورقم data-video-id فقط -->
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<script async src="https://www.tiktok.com/embed.js"></script>
|
||||
|
||||
<!-- ===== RESULTS / METHOD ===== -->
|
||||
<section class="alt" id="results">
|
||||
<div class="container">
|
||||
<div class="eyebrow">نتائج تُقاس</div>
|
||||
<h2 class="section-title">مش تخمين — كل تقدّم بيتسجل</h2>
|
||||
<p class="section-lead">نراقب مؤشرات واضحة كل فترة عشان تشوف تقدّمك رقميًا، مش بس بالإحساس.</p>
|
||||
<div class="results-grid">
|
||||
<div class="result-card reveal">
|
||||
<div class="ri"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M13 2L3 14h7l-1 8 10-12h-7l1-8z"/></svg></div>
|
||||
<h5>قياسات دورية</h5><p>وزن ونسبة دهون ومحيطات الجسم كل أسبوعين.</p>
|
||||
</div>
|
||||
<div class="result-card reveal">
|
||||
<div class="ri"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M6 7v10M18 7v10M2 10v4M22 10v4M6 12h12"/></svg></div>
|
||||
<h5>تتبع الأداء</h5><p>الأوزان والتكرارات المستخدمة تتصاعد بشكل موثّق.</p>
|
||||
</div>
|
||||
<div class="result-card reveal">
|
||||
<div class="ri"><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>ملخص واضح لتقدّمك يُرسل لك كل شهر.</p>
|
||||
</div>
|
||||
<div class="result-card reveal">
|
||||
<div class="ri"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7"><path d="M12 3v18M5 8l7-5 7 5M5 16l7 5 7-5"/></svg></div>
|
||||
<h5>تعديل مستمر</h5><p>الخطة تتغيّر حسب استجابة جسمك، مش خطة ثابتة.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ===== FITNESS ASSESSMENT FORM ===== -->
|
||||
<section id="assessment">
|
||||
<div class="container">
|
||||
<div class="eyebrow">الخطوة الأولى</div>
|
||||
<h2 class="section-title" style="text-align:center;">احجز تقييمك المجاني</h2>
|
||||
<p class="section-lead" style="margin-left:auto;margin-right:auto;text-align:center;">عبّي البيانات دي وهيوصلك رد على واتساب لتحديد موعد التقييم المجاني.</p>
|
||||
<div class="assess-wrap reveal">
|
||||
<form id="assessForm" onsubmit="return sendAssessment(event)">
|
||||
<div class="assess-row">
|
||||
<div>
|
||||
<label>الاسم *</label>
|
||||
<input type="text" id="af-name" required>
|
||||
</div>
|
||||
<div>
|
||||
<label>رقم الجوال (واتساب) *</label>
|
||||
<input type="tel" id="af-phone" required placeholder="05xxxxxxxx">
|
||||
</div>
|
||||
</div>
|
||||
<div class="assess-row">
|
||||
<div>
|
||||
<label>العمر</label>
|
||||
<input type="number" id="af-age" min="12" max="90">
|
||||
</div>
|
||||
<div>
|
||||
<label>هدفك الأساسي *</label>
|
||||
<select id="af-goal" required>
|
||||
<option value="">اختر هدفك</option>
|
||||
<option value="خسارة وزن">خسارة وزن</option>
|
||||
<option value="بناء عضلات">بناء عضلات</option>
|
||||
<option value="لياقة عامة">لياقة عامة</option>
|
||||
<option value="تأهيل إصابات">تأهيل إصابات</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="assess-row">
|
||||
<div>
|
||||
<label>مستوى النشاط الحالي</label>
|
||||
<select id="af-activity">
|
||||
<option value="مبتدئ تمامًا">مبتدئ تمامًا</option>
|
||||
<option value="نشاط خفيف">نشاط خفيف أحيانًا</option>
|
||||
<option value="نشاط منتظم">أتمرن بانتظام حاليًا</option>
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label>الوقت المفضل للحصص</label>
|
||||
<select id="af-time">
|
||||
<option value="عصرًا">عصرًا</option>
|
||||
<option value="مساءً">مساءً</option>
|
||||
<option value="مرن">مرن — أي وقت</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="assess-row full">
|
||||
<div>
|
||||
<label>ملاحظات (اختياري)</label>
|
||||
<textarea id="af-notes" rows="3"></textarea>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<!-- ===== FAQ ===== -->
|
||||
<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 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>
|
||||
|
||||
<!-- ===== FINAL CTA ===== -->
|
||||
<section id="contact">
|
||||
<div class="container">
|
||||
<div class="final-cta reveal">
|
||||
<h2>جاهز تبدأ رحلتك؟</h2>
|
||||
<p>احجز تقييمك المجاني الآن، ونبني خطتك الخاصة من أول حصة.</p>
|
||||
<a href="#assessment" class="btn btn-primary" style="margin-top:14px;">احجز تقييمك المجاني</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
<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><span>CAF PT — تدريب شخصي</span></div>
|
||||
<p style="font-size:13.5px;">برنامج تابع لأكاديمية الكاف الرياضية، الرياض</p>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<h5>روابط سريعة</h5>
|
||||
<ul>
|
||||
<li><a href="#goals">هدفك</a></li>
|
||||
<li><a href="#packages">الباقات</a></li>
|
||||
<li><a href="#trainer">المدرب</a></li>
|
||||
<li><a href="https://caf-academy.com">الموقع الرئيسي للأكاديمية</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>
|
||||
</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="#assessment" 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));
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// hero background slider (Ken Burns crossfade)
|
||||
(function(){
|
||||
const imgs = document.querySelectorAll('.hero-slider img');
|
||||
if(!imgs.length) return;
|
||||
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'); }
|
||||
});
|
||||
idx = i;
|
||||
}
|
||||
if(imgs.length > 1) setInterval(()=>show((idx+1)%imgs.length), 5000);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// cursor-follow glow in the hero
|
||||
(function(){
|
||||
const hero = document.getElementById('heroSection');
|
||||
const glow = document.getElementById('cursorGlow');
|
||||
if(!hero || !glow) return;
|
||||
hero.addEventListener('mousemove', (e)=>{
|
||||
const r = hero.getBoundingClientRect();
|
||||
glow.style.left = (e.clientX - r.left) + 'px';
|
||||
glow.style.top = (e.clientY - r.top) + 'px';
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// subtle 3D tilt on goal + package cards
|
||||
(function(){
|
||||
if(window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
|
||||
document.querySelectorAll('.goal-card, .pkg-card').forEach(card=>{
|
||||
card.addEventListener('mousemove', (e)=>{
|
||||
const r = card.getBoundingClientRect();
|
||||
const x = (e.clientX - r.left) / r.width - .5;
|
||||
const y = (e.clientY - r.top) / r.height - .5;
|
||||
card.style.transform = `perspective(700px) rotateX(${(-y*8).toFixed(2)}deg) rotateY(${(x*8).toFixed(2)}deg) translateY(-4px)`;
|
||||
});
|
||||
card.addEventListener('mouseleave', ()=>{ card.style.transform = ''; });
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// animated counters for the hero stats (1:1, 12+, 60, 100%)
|
||||
(function(){
|
||||
const nums = document.querySelectorAll('.hero-meta .n');
|
||||
const io2 = new IntersectionObserver((entries)=>{
|
||||
entries.forEach(entry=>{
|
||||
if(!entry.isIntersecting) return;
|
||||
const el = entry.target;
|
||||
const raw = el.textContent.trim();
|
||||
const match = raw.match(/\d+/);
|
||||
if(match){
|
||||
const target = +match[0];
|
||||
const suffix = raw.replace(match[0], '');
|
||||
let cur = 0;
|
||||
const step = Math.max(1, Math.ceil(target/24));
|
||||
const t = setInterval(()=>{
|
||||
cur += step;
|
||||
if(cur >= target){ cur = target; clearInterval(t); }
|
||||
el.textContent = cur + suffix;
|
||||
}, 35);
|
||||
}
|
||||
io2.unobserve(el);
|
||||
});
|
||||
},{threshold:.6});
|
||||
nums.forEach(n=>io2.observe(n));
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// header shrink + scrollspy active nav link
|
||||
(function(){
|
||||
const header = document.querySelector('header');
|
||||
const sections = ['goals','packages','trainer','gallery','tiktok','faq'].map(id=>document.getElementById(id)).filter(Boolean);
|
||||
const links = document.querySelectorAll('nav a[href^="#"]');
|
||||
window.addEventListener('scroll', ()=>{
|
||||
header.classList.toggle('scrolled', window.scrollY > 40);
|
||||
let current = null;
|
||||
sections.forEach(sec=>{
|
||||
const top = sec.getBoundingClientRect().top;
|
||||
if(top < 140) current = sec.id;
|
||||
});
|
||||
links.forEach(l=>{
|
||||
l.classList.toggle('active', current && l.getAttribute('href') === '#' + current);
|
||||
});
|
||||
}, {passive:true});
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// gallery lightbox
|
||||
(function(){
|
||||
const lightbox = document.getElementById('lightbox');
|
||||
const lightboxImg = document.getElementById('lightboxImg');
|
||||
const closeBtn = document.getElementById('lightboxClose');
|
||||
document.querySelectorAll('.gallery-item img').forEach(img=>{
|
||||
img.addEventListener('click', ()=>{
|
||||
lightboxImg.src = img.src;
|
||||
lightboxImg.alt = img.alt;
|
||||
lightbox.classList.add('open');
|
||||
});
|
||||
});
|
||||
function close(){ lightbox.classList.remove('open'); lightboxImg.src=''; }
|
||||
closeBtn.addEventListener('click', close);
|
||||
lightbox.addEventListener('click', (e)=>{ if(e.target === lightbox) close(); });
|
||||
document.addEventListener('keydown', (e)=>{ if(e.key === 'Escape') close(); });
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script>
|
||||
// goal picker -> prefill assessment form
|
||||
document.querySelectorAll('.goal-card').forEach(card=>{
|
||||
card.addEventListener('click', ()=>{
|
||||
document.querySelectorAll('.goal-card').forEach(c=>c.classList.remove('active'));
|
||||
card.classList.add('active');
|
||||
const goal = card.dataset.goal;
|
||||
const sel = document.getElementById('af-goal');
|
||||
sel.value = goal;
|
||||
const note = document.getElementById('goalNote');
|
||||
note.textContent = 'تمام، اخترت "' + goal + '" — كمّل بياناتك بالأسفل وهنجهّز لك الخطة على أساسه.';
|
||||
note.classList.add('show');
|
||||
setTimeout(()=>{ document.getElementById('assessment').scrollIntoView({behavior:'smooth', block:'start'}); }, 500);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function sendAssessment(e){
|
||||
e.preventDefault();
|
||||
var name = document.getElementById('af-name').value.trim();
|
||||
var phone = document.getElementById('af-phone').value.trim();
|
||||
var age = document.getElementById('af-age').value.trim();
|
||||
var goal = document.getElementById('af-goal').value;
|
||||
var activity = document.getElementById('af-activity').value;
|
||||
var time = document.getElementById('af-time').value;
|
||||
var notes = document.getElementById('af-notes').value.trim();
|
||||
var msg = 'مرحبًا CAF PT، أرغب بحجز تقييم مجاني للتدريب الشخصي.\n';
|
||||
msg += 'الاسم: ' + name + '\n';
|
||||
msg += 'رقم الجوال: ' + phone + '\n';
|
||||
if(age) msg += 'العمر: ' + age + '\n';
|
||||
msg += 'الهدف: ' + goal + '\n';
|
||||
msg += 'مستوى النشاط الحالي: ' + activity + '\n';
|
||||
msg += 'الوقت المفضل: ' + time + '\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>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user