| <!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> |
| <link rel="preconnect" href="https://fonts.googleapis.com"> |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| <link href="https://fonts.googleapis.com/css2?family=Markazi+Text:wght@500;600;700&family=Tajawal:wght@300;400;500;700;800&display=swap" rel="stylesheet"> |
| <style> |
| :root{ |
| --maroon: #5a1d3d; |
| --maroon-deep: #40122c; |
| --rose: #d5316f; |
| --rose-soft: #e85c92; |
| --ribbon: #9c6bc9; |
| --ribbon-deep: #7d4aa8; |
| --blush: #fdf1f4; |
| --blush-2: #fbe4ec; |
| --cream: #fffaf8; |
| --ink: #2c1220; |
| --ink-soft: #6b4a5a; |
| --gold: #c9a15a; |
| --line: rgba(90,29,61,0.12); |
| --shadow: 0 20px 50px -20px rgba(90,29,61,0.35); |
| } |
| *{margin:0;padding:0;box-sizing:border-box;} |
| html{scroll-behavior:smooth;} |
| body{ |
| font-family:'Tajawal',sans-serif; |
| background:var(--cream); |
| color:var(--ink); |
| overflow-x:hidden; |
| } |
| h1,h2,h3,.display{ |
| font-family:'Markazi Text','Tajawal',serif; |
| } |
| a{text-decoration:none;color:inherit;} |
| ul{list-style:none;} |
| img{max-width:100%;display:block;} |
| .wrap{ |
| max-width:1180px; |
| margin:0 auto; |
| padding:0 28px; |
| } |
| |
| |
| .grain{ |
| position:fixed; inset:0; pointer-events:none; z-index:9999; |
| opacity:.035; mix-blend-mode:multiply; |
| background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); |
| } |
| |
| |
| header{ |
| position:fixed; top:0; right:0; left:0; z-index:1000; |
| background:rgba(255,250,248,0.85); |
| backdrop-filter:blur(14px) saturate(140%); |
| border-bottom:1px solid var(--line); |
| transition:.35s; |
| } |
| .nav-inner{ |
| display:flex; align-items:center; justify-content:space-between; |
| padding-top:14px; padding-bottom:14px; |
| } |
| .brand{display:flex; align-items:center; gap:12px;} |
| .brand .mark{ |
| width:44px; height:44px; border-radius:50%; |
| background:linear-gradient(150deg,var(--maroon),var(--ribbon-deep)); |
| display:flex; align-items:center; justify-content:center; |
| color:#fff; font-family:'Markazi Text',serif; font-size:26px; font-weight:700; |
| box-shadow:0 8px 18px -6px rgba(90,29,61,.55); |
| overflow:hidden; flex-shrink:0; |
| } |
| .brand .mark img, .foot-brand .mark img{width:100%; height:100%; object-fit:cover;} |
| .brand .name{ |
| font-family:'Markazi Text',serif; font-weight:700; font-size:22px; color:var(--maroon-deep); |
| line-height:1.15; |
| } |
| .brand .name span{ |
| display:block; font-family:'Tajawal',sans-serif; font-size:11px; font-weight:500; |
| letter-spacing:.5px; color:var(--ink-soft); margin-top:2px; |
| } |
| nav ul{display:flex; gap:34px;} |
| nav a{ |
| font-size:15px; font-weight:500; color:var(--ink); position:relative; padding:4px 0; |
| } |
| nav a::after{ |
| content:""; position:absolute; right:0; bottom:-2px; width:0; height:2px; |
| background:var(--rose); transition:.3s; |
| } |
| nav a:hover::after{width:100%;} |
| .nav-cta{ |
| background:var(--maroon-deep); color:#fff !important; padding:11px 24px; |
| border-radius:100px; font-weight:700; font-size:14px; |
| box-shadow:0 10px 24px -10px rgba(64,18,44,.7); |
| } |
| .burger{display:none; flex-direction:column; gap:5px; cursor:pointer; z-index:1001;} |
| .burger span{width:26px; height:2px; background:var(--maroon-deep); border-radius:2px;} |
| |
| |
| .hero{ |
| position:relative; |
| padding:150px 0 100px; |
| background: |
| radial-gradient(ellipse 80% 60% at 85% 15%, rgba(156,107,201,.25), transparent 60%), |
| radial-gradient(ellipse 60% 50% at 10% 90%, rgba(213,49,111,.12), transparent 60%), |
| linear-gradient(180deg, var(--blush) 0%, var(--blush-2) 55%, var(--cream) 100%); |
| overflow:hidden; |
| } |
| .hero::before{ |
| content:""; position:absolute; inset:0; |
| background-image: radial-gradient(circle, rgba(90,29,61,.18) 1px, transparent 1px); |
| background-size:26px 26px; |
| -webkit-mask-image: radial-gradient(ellipse 70% 60% at 80% 10%, black, transparent 70%); |
| mask-image: radial-gradient(ellipse 70% 60% at 80% 10%, black, transparent 70%); |
| } |
| .hero-grid{ |
| position:relative; z-index:2; |
| display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:center; |
| } |
| .eyebrow{ |
| display:inline-flex; align-items:center; gap:8px; |
| background:#fff; border:1px solid var(--line); color:var(--rose); |
| font-size:13px; font-weight:700; padding:7px 16px; border-radius:100px; |
| box-shadow:var(--shadow); |
| animation:fadeUp .8s ease both; |
| } |
| .eyebrow::before{content:"✦";} |
| .hero h1{ |
| font-size:clamp(38px,5.4vw,64px); line-height:1.1; color:var(--maroon-deep); |
| margin:22px 0 18px; font-weight:700; |
| animation:fadeUp .9s .1s ease both; |
| } |
| .hero h1 em{ |
| font-style:normal; color:var(--rose); |
| background:linear-gradient(90deg,var(--rose),var(--ribbon-deep)); |
| -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; |
| } |
| .hero p.lead{ |
| font-size:18px; color:var(--ink-soft); max-width:520px; line-height:1.9; |
| animation:fadeUp .9s .2s ease both; |
| } |
| .hero-ctas{display:flex; gap:16px; margin-top:34px; flex-wrap:wrap; animation:fadeUp .9s .3s ease both;} |
| .btn{ |
| display:inline-flex; align-items:center; gap:10px; |
| padding:16px 30px; border-radius:100px; font-weight:700; font-size:15px; |
| transition:.3s; cursor:pointer; border:none; |
| } |
| .btn-primary{ |
| background:linear-gradient(120deg,var(--rose),var(--ribbon-deep)); |
| color:#fff; box-shadow:0 16px 30px -12px rgba(213,49,111,.55); |
| } |
| .btn-primary:hover{transform:translateY(-3px); box-shadow:0 20px 36px -12px rgba(213,49,111,.65);} |
| .btn-ghost{ |
| background:#fff; color:var(--maroon-deep); border:1.5px solid var(--line); |
| } |
| .btn-ghost:hover{border-color:var(--rose); color:var(--rose);} |
| .hero-trust{ |
| display:flex; gap:28px; margin-top:46px; flex-wrap:wrap; |
| animation:fadeUp .9s .4s ease both; |
| } |
| .hero-trust div{font-size:13.5px; color:var(--ink-soft); display:flex; align-items:center; gap:8px;} |
| .hero-trust svg{width:18px; height:18px; stroke:var(--rose); flex-shrink:0;} |
| |
| .hero-visual{position:relative; animation:fadeIn 1.2s .3s ease both;} |
| .hero-photo{ |
| position:relative; border-radius:32px; overflow:hidden; |
| box-shadow:var(--shadow); aspect-ratio:4/5; |
| background:linear-gradient(160deg,var(--maroon) 0%, var(--ribbon-deep) 55%, var(--rose) 100%); |
| display:flex; align-items:center; justify-content:center; |
| } |
| .hero-photo img{width:100%; height:100%; object-fit:cover; object-position:top center;} |
| .hero-photo .ribbon-wrap{width:52%;} |
| .hero-card{ |
| position:absolute; bottom:-26px; right:-26px; |
| background:#fff; border-radius:20px; padding:18px 22px; |
| box-shadow:var(--shadow); display:flex; align-items:center; gap:14px; |
| max-width:250px; |
| } |
| .hero-card .dot{width:44px; height:44px; border-radius:50%; background:var(--blush-2); display:flex; align-items:center; justify-content:center; flex-shrink:0;} |
| .hero-card .dot svg{width:22px; height:22px; stroke:var(--rose);} |
| .hero-card b{display:block; font-size:14px; color:var(--maroon-deep);} |
| .hero-card span{font-size:12px; color:var(--ink-soft);} |
| .hero-badge{ |
| position:absolute; top:-18px; left:-18px; background:#fff; border-radius:18px; |
| padding:14px 18px; box-shadow:var(--shadow); text-align:center; |
| } |
| .hero-badge b{font-family:'Markazi Text',serif; font-size:26px; color:var(--rose); display:block;} |
| .hero-badge span{font-size:11px; color:var(--ink-soft); font-weight:500;} |
| |
| @keyframes fadeUp{from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:translateY(0);}} |
| @keyframes fadeIn{from{opacity:0; transform:scale(.96);} to{opacity:1; transform:scale(1);}} |
| |
| |
| section{padding:100px 0;} |
| .sec-head{text-align:center; max-width:640px; margin:0 auto 60px;} |
| .sec-head .eyebrow{margin-bottom:18px;} |
| .sec-head h2{font-size:clamp(30px,4vw,44px); color:var(--maroon-deep); line-height:1.25;} |
| .sec-head p{color:var(--ink-soft); margin-top:14px; font-size:16px; line-height:1.8;} |
| .reveal{opacity:0; transform:translateY(30px); transition:opacity .8s ease, transform .8s ease;} |
| .reveal.in{opacity:1; transform:translateY(0);} |
| |
| |
| .services-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;} |
| .s-card{ |
| background:#fff; border:1px solid var(--line); border-radius:22px; padding:34px 26px; |
| transition:.35s; position:relative; overflow:hidden; |
| } |
| .s-card::before{ |
| content:""; position:absolute; inset:0; opacity:0; transition:.35s; |
| background:linear-gradient(160deg,var(--maroon-deep),var(--ribbon-deep)); |
| } |
| .s-card:hover{transform:translateY(-8px); box-shadow:var(--shadow);} |
| .s-card:hover::before{opacity:1;} |
| .s-card > *{position:relative; z-index:1;} |
| .s-card .ic{ |
| width:54px; height:54px; border-radius:16px; background:var(--blush-2); |
| display:flex; align-items:center; justify-content:center; margin-bottom:20px; transition:.35s; |
| } |
| .s-card .ic svg{width:26px; height:26px; stroke:var(--rose); transition:.35s;} |
| .s-card h3{font-family:'Tajawal'; font-size:18px; font-weight:800; color:var(--maroon-deep); margin-bottom:10px; transition:.35s;} |
| .s-card p{font-size:14px; color:var(--ink-soft); line-height:1.8; transition:.35s;} |
| .s-card:hover h3, .s-card:hover p{color:#fff;} |
| .s-card:hover .ic{background:rgba(255,255,255,.15);} |
| .s-card:hover .ic svg{stroke:#fff;} |
| |
| |
| .about{ |
| background:linear-gradient(180deg,var(--cream),var(--blush) 100%); |
| } |
| .about-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; align-items:center;} |
| .about-frame{ |
| position:relative; border-radius:28px; aspect-ratio:1/1.05; |
| background:linear-gradient(150deg,var(--blush-2),#fff); |
| border:1px solid var(--line); display:flex; align-items:center; justify-content:center; |
| box-shadow:var(--shadow); |
| } |
| .about-frame .mark-lg{ |
| width:150px; height:150px; border-radius:50%; |
| background:linear-gradient(150deg,var(--maroon),var(--ribbon-deep)); |
| display:flex; align-items:center; justify-content:center; color:#fff; |
| font-family:'Markazi Text',serif; font-size:82px; font-weight:700; |
| box-shadow:0 25px 50px -18px rgba(90,29,61,.55); |
| overflow:hidden; |
| } |
| .about-frame .mark-lg img{width:100%; height:100%; object-fit:cover;} |
| .about-photo{ |
| width:100%; height:100%; border-radius:22px; overflow:hidden; |
| box-shadow:0 25px 50px -18px rgba(90,29,61,.4); |
| } |
| .about-photo img{width:100%; height:100%; object-fit:cover;} |
| .about-frame .ring{ |
| position:absolute; inset:26px; border:1.5px dashed rgba(90,29,61,.28); border-radius:22px; |
| } |
| .about h2{font-size:clamp(28px,3.6vw,40px); color:var(--maroon-deep); margin-bottom:20px; line-height:1.3;} |
| .about p{color:var(--ink-soft); font-size:16px; line-height:2; margin-bottom:16px;} |
| .about-points{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:28px;} |
| .a-point{display:flex; gap:12px; align-items:flex-start;} |
| .a-point .ic{ |
| width:34px; height:34px; border-radius:10px; background:var(--blush-2); flex-shrink:0; |
| display:flex; align-items:center; justify-content:center; margin-top:2px; |
| } |
| .a-point .ic svg{width:17px; height:17px; stroke:var(--rose);} |
| .a-point b{display:block; font-size:14.5px; color:var(--maroon-deep); margin-bottom:2px;} |
| .a-point span{font-size:13px; color:var(--ink-soft);} |
| |
| |
| .solutions{ |
| background:linear-gradient(170deg,var(--maroon-deep) 0%, var(--maroon) 45%, var(--ribbon-deep) 100%); |
| color:#fff; position:relative; overflow:hidden; |
| } |
| .solutions::before{ |
| content:""; position:absolute; width:600px; height:600px; border-radius:50%; |
| background:radial-gradient(circle, rgba(255,255,255,.08), transparent 70%); |
| top:-200px; left:-150px; |
| } |
| .solutions .sec-head h2{color:#fff;} |
| .solutions .sec-head p{color:rgba(255,255,255,.75);} |
| .solutions .eyebrow{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.2); color:#f6d3e1;} |
| .sol-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; position:relative; z-index:1;} |
| .sol-card{ |
| background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); |
| border-radius:24px; padding:30px 26px; backdrop-filter:blur(6px); |
| } |
| .sol-card .tag{ |
| display:inline-block; font-size:11px; font-weight:700; letter-spacing:.4px; |
| background:rgba(255,255,255,.14); color:#fff; padding:5px 12px; border-radius:100px; margin-bottom:16px; |
| } |
| .sol-card h3{font-size:19px; font-weight:800; margin-bottom:10px;} |
| .sol-card p{font-size:13.5px; color:rgba(255,255,255,.72); line-height:1.85; margin-bottom:20px;} |
| |
| |
| .mock-chat{background:rgba(255,255,255,.95); border-radius:16px; padding:14px; color:var(--ink);} |
| .mock-msg{max-width:80%; padding:9px 13px; border-radius:14px; font-size:12.5px; margin-bottom:8px; line-height:1.6;} |
| .mock-msg.in{background:var(--blush-2); border-bottom-right-radius:4px;} |
| .mock-msg.out{background:linear-gradient(120deg,var(--rose),var(--ribbon-deep)); color:#fff; margin-right:auto; margin-left:0; border-bottom-left-radius:4px; width:fit-content;} |
| |
| |
| .mock-cal{background:rgba(255,255,255,.95); border-radius:16px; padding:16px; color:var(--ink);} |
| .mock-cal .days{display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-top:10px;} |
| .mock-cal .days span{ |
| aspect-ratio:1; display:flex; align-items:center; justify-content:center; |
| font-size:11px; border-radius:8px; background:var(--blush); color:var(--ink-soft); |
| } |
| .mock-cal .days span.on{background:linear-gradient(120deg,var(--rose),var(--ribbon-deep)); color:#fff; font-weight:700;} |
| .mock-cal .slot{margin-top:10px; background:var(--blush-2); border-radius:10px; padding:8px 12px; font-size:12px; display:flex; justify-content:space-between;} |
| |
| |
| .pay-badges{display:flex; gap:10px; flex-wrap:wrap;} |
| .pay-badge{ |
| background:rgba(255,255,255,.95); border-radius:12px; padding:10px 14px; |
| display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--ink); |
| } |
| .pay-badge .sw{width:9px; height:9px; border-radius:50%;} |
| |
| |
| .book{background:var(--cream);} |
| .book-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;} |
| .book-form{ |
| background:#fff; border:1px solid var(--line); border-radius:26px; padding:38px; |
| box-shadow:var(--shadow); |
| } |
| .book-form h3{font-size:22px; color:var(--maroon-deep); margin-bottom:6px;} |
| .book-form > p{font-size:13.5px; color:var(--ink-soft); margin-bottom:26px;} |
| .f-row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;} |
| .f-field{margin-bottom:14px;} |
| .f-field label{display:block; font-size:12.5px; font-weight:700; color:var(--maroon-deep); margin-bottom:7px;} |
| .f-field input, .f-field select, .f-field textarea{ |
| width:100%; padding:13px 16px; border-radius:12px; border:1.5px solid var(--line); |
| font-family:'Tajawal'; font-size:14px; background:var(--blush); color:var(--ink); outline:none; transition:.25s; |
| } |
| .f-field input:focus, .f-field select:focus, .f-field textarea:focus{border-color:var(--rose); background:#fff;} |
| .book-form .btn-primary{width:100%; justify-content:center; margin-top:8px;} |
| .book-form small{display:block; text-align:center; margin-top:14px; font-size:11.5px; color:var(--ink-soft);} |
| |
| .contact-cards{display:flex; flex-direction:column; gap:16px;} |
| .c-card{ |
| display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--line); |
| border-radius:20px; padding:22px 24px; transition:.3s; |
| } |
| .c-card:hover{border-color:var(--rose); transform:translateX(-4px);} |
| .c-card .ic{width:48px; height:48px; border-radius:14px; background:var(--blush-2); display:flex; align-items:center; justify-content:center; flex-shrink:0;} |
| .c-card .ic svg{width:23px; height:23px; stroke:var(--rose);} |
| .c-card b{display:block; font-size:15px; color:var(--maroon-deep);} |
| .c-card span{font-size:13px; color:var(--ink-soft);} |
| .social-row{display:flex; gap:12px; margin-top:6px;} |
| .social-row a{ |
| width:44px; height:44px; border-radius:50%; background:#fff; border:1px solid var(--line); |
| display:flex; align-items:center; justify-content:center; transition:.3s; |
| } |
| .social-row a:hover{background:var(--rose); border-color:var(--rose);} |
| .social-row a svg{width:19px; height:19px; stroke:var(--maroon-deep); transition:.3s;} |
| .social-row a:hover svg{stroke:#fff;} |
| |
| |
| footer{background:var(--maroon-deep); color:rgba(255,255,255,.7); padding:44px 0 26px;} |
| .foot-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;} |
| .foot-brand{display:flex; align-items:center; gap:10px; color:#fff; font-family:'Markazi Text'; font-size:19px; font-weight:700;} |
| footer p{font-size:12.5px;} |
| .foot-line{border-top:1px solid rgba(255,255,255,.12); margin-top:30px; padding-top:20px; text-align:center; font-size:11.5px; color:rgba(255,255,255,.45);} |
| |
| |
| .wa-float{ |
| position:fixed; bottom:26px; left:26px; z-index:900; |
| width:60px; height:60px; border-radius:50%; |
| background:linear-gradient(140deg,#25D366,#128C4A); |
| display:flex; align-items:center; justify-content:center; |
| box-shadow:0 16px 34px -10px rgba(18,140,74,.6); |
| animation:pulse 2.6s infinite; |
| } |
| .wa-float svg{width:28px; height:28px; fill:#fff;} |
| @keyframes pulse{ |
| 0%{box-shadow:0 0 0 0 rgba(37,211,102,.45), 0 16px 34px -10px rgba(18,140,74,.6);} |
| 70%{box-shadow:0 0 0 16px rgba(37,211,102,0), 0 16px 34px -10px rgba(18,140,74,.6);} |
| 100%{box-shadow:0 0 0 0 rgba(37,211,102,0), 0 16px 34px -10px rgba(18,140,74,.6);} |
| } |
| |
| |
| @media (max-width:980px){ |
| .hero-grid{grid-template-columns:1fr; gap:70px;} |
| .hero-visual{max-width:380px; margin:0 auto;} |
| .services-grid{grid-template-columns:repeat(2,1fr);} |
| .about-grid{grid-template-columns:1fr; gap:50px;} |
| .about-frame{max-width:340px; margin:0 auto;} |
| .sol-grid{grid-template-columns:1fr;} |
| .book-grid{grid-template-columns:1fr;} |
| } |
| @media (max-width:760px){ |
| nav ul, .nav-cta{display:none;} |
| .burger{display:flex;} |
| header.open nav{ |
| display:block; position:fixed; inset:0 0 0 0; top:74px; background:var(--cream); |
| padding:30px 28px; height:calc(100vh - 74px); |
| } |
| header nav{display:none;} |
| header.open nav ul{display:flex; flex-direction:column; gap:26px; font-size:19px;} |
| header.open .nav-cta{display:inline-flex; margin-top:30px;} |
| .hero{padding:120px 0 70px;} |
| .hero-ctas{flex-direction:column;} |
| .hero-ctas .btn{width:100%; justify-content:center;} |
| .hero-trust{flex-direction:column; gap:12px;} |
| .hero-badge{position:static; display:inline-flex; align-items:center; gap:10px; margin-bottom:16px; border-radius:100px; padding:10px 18px;} |
| .hero-card{position:static; margin-top:18px; max-width:100%;} |
| section{padding:70px 0;} |
| .services-grid{grid-template-columns:1fr;} |
| .f-row{grid-template-columns:1fr;} |
| .foot-inner{flex-direction:column; text-align:center;} |
| .wa-float{width:54px; height:54px; bottom:18px; left:18px;} |
| } |
| </style> |
| </head> |
| <body> |
| <div class="grain"></div> |
|
|
| |
| <header id="siteHeader"> |
| <div class="wrap nav-inner"> |
| <div class="brand"> |
| <div class="mark"><img src="https://res.cloudinary.com/dhzycegfa/image/upload/v1786937504/DEMO/LOGO_ukmt8l.png" alt="شعار د. سهام مجدي"></div> |
| <div class="name">د. سهام مجدي<span>استشاري الكشف المبكر وعلاج الأورام</span></div> |
| </div> |
| <nav> |
| <ul> |
| <li><a href="#home">الرئيسية</a></li> |
| <li><a href="#services">الخدمات</a></li> |
| <li><a href="#about">عن الدكتورة</a></li> |
| <li><a href="#solutions">حلول رقمية</a></li> |
| <li><a href="#book">احجزي موعد</a></li> |
| <li><a href="#contact">تواصل</a></li> |
| </ul> |
| </nav> |
| <a href="#book" class="btn nav-cta">احجزي استشارتك</a> |
| <div class="burger" id="burger"><span></span><span></span><span></span></div> |
| </div> |
| </header> |
|
|
| |
| <section class="hero" id="home"> |
| <div class="wrap hero-grid"> |
| <div> |
| <span class="eyebrow">معاً... بداية جديدة</span> |
| <h1>رعاية تمنحكِ <em>الأمل</em><br>وخبرة تطمئن قلبكِ</h1> |
| <p class="lead">د. سهام مجدي، استشاري علاج الأورام والكشف المبكر، تقدّم لكِ متابعة طبية دقيقة ورعاية إنسانية شاملة في كل خطوة من رحلة العلاج.</p> |
| <div class="hero-ctas"> |
| <a href="#book" class="btn btn-primary"> |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z"/></svg> |
| احجزي موعدك الآن |
| </a> |
| <a href="https://wa.me/201012005061" target="_blank" class="btn btn-ghost"> |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg> |
| تواصلي عبر واتساب |
| </a> |
| </div> |
| <div class="hero-trust"> |
| <div><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> متابعة دقيقة لكل حالة</div> |
| <div><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> خبرة متخصصة في الأورام</div> |
| <div><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg> رعاية إنسانية أولاً</div> |
| </div> |
| </div> |
| <div class="hero-visual"> |
| <div class="hero-photo"> |
| <img src="https://res.cloudinary.com/dhzycegfa/image/upload/v1786938312/DEMO/siham-magdy_nfq683.jpg" alt="د. سهام مجدي"> |
| </div> |
| <div class="hero-card"> |
| <div class="dot"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2zm0 5v6l4 2"/></svg></div> |
| <div><b>مواعيد مرنة</b><span>حجز سريع وسهل أونلاين</span></div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="services"> |
| <div class="wrap"> |
| <div class="sec-head reveal"> |
| <span class="eyebrow">خدماتنا</span> |
| <h2>رعاية طبية متكاملة في كل مرحلة</h2> |
| <p>من الكشف المبكر إلى المتابعة العلاجية، نرافقكِ بخطة واضحة ورعاية تراعي احتياجاتكِ النفسية والجسدية.</p> |
| </div> |
| <div class="services-grid"> |
| <div class="s-card reveal"> |
| <div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M9 12l2 2 4-4M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2z"/></svg></div> |
| <h3>الكشف المبكر</h3> |
| <p>فحوصات دورية دقيقة تساعد على اكتشاف أي تغيّرات مبكراً وتمنحكِ راحة البال.</p> |
| </div> |
| <div class="s-card reveal"> |
| <div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M12 2l3 7h7l-5.5 4.5L18 21l-6-4.5L6 21l1.5-7.5L2 9h7z"/></svg></div> |
| <h3>علاج الأورام</h3> |
| <p>خطط علاجية مصممة خصيصاً لكل حالة، بمتابعة مستمرة وتنسيق كامل مع فريق طبي متكامل.</p> |
| </div> |
| <div class="s-card reveal"> |
| <div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z"/></svg></div> |
| <h3>استشارات فردية</h3> |
| <p>جلسات استشارية مباشرة لشرح الحالة والخيارات العلاجية المتاحة بكل وضوح واطمئنان.</p> |
| </div> |
| <div class="s-card reveal"> |
| <div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M3 3v18h18M7 14l4-4 3 3 5-6"/></svg></div> |
| <h3>متابعة ما بعد العلاج</h3> |
| <p>برنامج متابعة دوري لضمان الاستقرار الصحي على المدى الطويل بعد انتهاء الخطة العلاجية.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="about" id="about"> |
| <div class="wrap about-grid"> |
| <div class="reveal"> |
| <div class="about-frame"> |
| <div class="about-photo"> |
| <img src="https://res.cloudinary.com/dhzycegfa/image/upload/v1786938312/DEMO/siham-magdy_nfq683.jpg" alt="د. سهام مجدي"> |
| </div> |
| </div> |
| </div> |
| <div class="reveal"> |
| <span class="eyebrow">عن الدكتورة</span> |
| <h2>د. سهام مجدي</h2> |
| <p>استشاري الكشف المبكر وعلاج الأورام، تجمع بين الدقة العلمية والرعاية الإنسانية في التعامل مع كل حالة، إيماناً بأن رحلة العلاج تحتاج إلى دعم طبي ونفسي معاً.</p> |
| <p>تؤمن د. سهام بأن التوعية والكشف المبكر هما خط الدفاع الأول، ولذلك تحرص على متابعة كل مريضة خطوة بخطوة حتى تشعر دائماً أنها ليست وحدها في هذه الرحلة.</p> |
| <div class="about-points"> |
| <div class="a-point"> |
| <div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg></div> |
| <div><b>استشاري الكشف المبكر وعلاج الأورام</b><span>خبرة متخصصة في المجال</span></div> |
| </div> |
| <div class="a-point"> |
| <div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg></div> |
| <div><b>دكتوراه علاج الأورام والطب النووي</b><span>جامعة الإسكندرية</span></div> |
| </div> |
| <div class="a-point"> |
| <div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg></div> |
| <div><b>عضو الجمعية الأوروبية</b><span>لعلاج الأورام</span></div> |
| </div> |
| <div class="a-point"> |
| <div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M20 6L9 17l-5-5"/></svg></div> |
| <div><b>مؤسس واستشاري</b><span>مركز هووب للأورام</span></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="solutions" id="solutions"> |
| <div class="wrap"> |
| <div class="sec-head reveal"> |
| <span class="eyebrow">تجربة رقمية جديدة</span> |
| <h2>عيادتكِ متاحة الآن على مدار الساعة</h2> |
| <p>ثلاث إضافات ذكية تجعل التواصل مع مريضاتكِ أسهل وأسرع، وتُبقي حضوركِ الرقمي نشطاً باستمرار.</p> |
| </div> |
| <div class="sol-grid"> |
| <div class="sol-card reveal"> |
| <span class="tag">دردشة فورية</span> |
| <h3>مساعد واتساب ذكي</h3> |
| <p>يرد على استفسارات المريضات فوراً، يشرح الخدمات، ويحوّل المحادثة إلى حجز موعد تلقائياً.</p> |
| <div class="mock-chat"> |
| <div class="mock-msg in">هل يوجد موعد متاح الأسبوع القادم؟</div> |
| <div class="mock-msg out">أهلاً بكِ 🌸 يوجد موعد الثلاثاء 11 صباحاً، هل أؤكد الحجز؟</div> |
| </div> |
| </div> |
| <div class="sol-card reveal"> |
| <span class="tag">حجز إلكتروني</span> |
| <h3>نظام حجوزات أونلاين</h3> |
| <p>تختار المريضة الموعد المناسب مباشرة من الموقع دون الحاجة لمكالمة هاتفية.</p> |
| <div class="mock-cal"> |
| <div class="days"> |
| <span>س</span><span>ح</span><span>ن</span><span class="on">ث</span><span>ر</span><span>خ</span><span>ج</span> |
| </div> |
| <div class="slot"><span>11:00 ص</span><span>متاح ✓</span></div> |
| </div> |
| </div> |
| <div class="sol-card reveal"> |
| <span class="tag">دفع سريع</span> |
| <h3>دفع إلكتروني فوري</h3> |
| <p>تأكيد الحجز بدفع رسوم الكشف مباشرة عبر فودافون كاش أو إنستاباي بخطوة واحدة.</p> |
| <div class="pay-badges"> |
| <div class="pay-badge"><span class="sw" style="background:#e60000"></span>Vodafone Cash</div> |
| <div class="pay-badge"><span class="sw" style="background:#7b3fe4"></span>InstaPay</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="book" id="book"> |
| <div class="wrap book-grid"> |
| <div class="reveal"> |
| <span class="eyebrow">احجزي موعدك</span> |
| <h2 style="font-size:clamp(26px,3.2vw,36px); color:var(--maroon-deep); margin:18px 0 30px; line-height:1.3;">تواصلي معنا مباشرة</h2> |
| <div class="contact-cards"> |
| <div class="c-card"> |
| <div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></div> |
| <div><b>واتساب</b><span>رد سريع خلال دقائق</span></div> |
| </div> |
| <div class="c-card"> |
| <div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.362 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.338 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg></div> |
| <div><b>اتصال مباشر</b><span>لحجز موعد أو استفسار</span></div> |
| </div> |
| <div class="c-card"> |
| <div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg></div> |
| <div><b>موقع العيادة</b><span>53 شارع مسجد سيدي بشر - أمام شركة الكهرباء - سيدي بشر - الإسكندرية</span></div> |
| </div> |
| </div> |
| <p style="font-size:13px; color:var(--ink-soft); margin:24px 0 10px;">تابعينا على</p> |
| <div class="social-row"> |
| <a href="#" aria-label="Facebook"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg></a> |
| <a href="#" aria-label="Instagram"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="5"/><circle cx="12" cy="12" r="4"/><path d="M17.5 6.5h.01"/></svg></a> |
| <a href="#" aria-label="WhatsApp"><svg viewBox="0 0 24 24" fill="none" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></a> |
| </div> |
| </div> |
|
|
| <form class="book-form reveal" onsubmit="return handleBooking(event)"> |
| <h3>نموذج حجز استشارة</h3> |
| <p>عبّئي البيانات وسنتواصل معكِ لتأكيد الموعد</p> |
| <div class="f-row"> |
| <div class="f-field"><label>الاسم بالكامل</label><input type="text" placeholder="اكتبي اسمك" required></div> |
| <div class="f-field"><label>رقم الهاتف</label><input type="tel" placeholder="01xxxxxxxxx" required></div> |
| </div> |
| <div class="f-field"> |
| <label>نوع الاستشارة</label> |
| <select> |
| <option>الكشف المبكر</option> |
| <option>استشارة علاج أورام</option> |
| <option>متابعة حالة قائمة</option> |
| </select> |
| </div> |
| <div class="f-field"><label>ملاحظات إضافية (اختياري)</label><textarea rows="3" placeholder="اكتبي أي تفاصيل تودين إضافتها"></textarea></div> |
| <button type="submit" class="btn btn-primary">تأكيد طلب الحجز</button> |
| <small>هذا نموذج تجريبي ضمن العرض المقترح — سيتم ربطه بنظام حجز فعلي وواتساب مباشرة</small> |
| </form> |
| </div> |
| </section> |
|
|
| |
| <footer> |
| <div class="wrap foot-inner"> |
| <div class="foot-brand"><div class="mark" style="width:34px;height:34px;font-size:18px;"><img src="https://res.cloudinary.com/dhzycegfa/image/upload/v1786937504/DEMO/LOGO_ukmt8l.png" alt="شعار"></div> د. سهام مجدي</div> |
| <p>استشاري علاج الأورام والكشف المبكر — معاً... بداية جديدة</p> |
| </div> |
| <div class="wrap foot-line">© 2026 د. سهام مجدي. نموذج ديمو مقدَّم من Mohamed Saleh — جميع الحقوق محفوظة.</div> |
| </footer> |
|
|
| <a href="https://wa.me/201012005061" target="_blank" class="wa-float" aria-label="تواصل عبر واتساب"> |
| <svg viewBox="0 0 32 32"><path d="M16 0C7.16 0 0 7.16 0 16c0 2.82.74 5.47 2.03 7.76L0 32l8.45-2.22A15.9 15.9 0 0 0 16 32c8.84 0 16-7.16 16-16S24.84 0 16 0zm9.32 22.62c-.39 1.1-1.94 2-3.05 2.24-.79.17-1.82.3-5.3-1.14-4.45-1.85-7.3-6.37-7.52-6.67-.22-.29-1.8-2.4-1.8-4.58 0-2.18 1.14-3.25 1.55-3.7.39-.43.85-.53 1.13-.53.29 0 .58 0 .83.01.27.01.63-.1.98.75.39.94 1.31 3.27 1.43 3.51.11.24.19.52.04.83-.15.31-.23.5-.45.77-.23.27-.48.6-.68.8-.23.23-.47.48-.2.94.27.46 1.2 1.98 2.58 3.2 1.77 1.58 3.27 2.07 3.73 2.31.46.23.73.19 1-.11.27-.31 1.15-1.34 1.46-1.8.31-.46.61-.38 1.02-.23.42.16 2.67 1.26 3.13 1.49.46.23.77.35.88.54.11.19.11 1.11-.28 2.21z"/></svg> |
| </a> |
|
|
| <script> |
| const burger = document.getElementById('burger'); |
| const header = document.getElementById('siteHeader'); |
| burger.addEventListener('click', () => header.classList.toggle('open')); |
| document.querySelectorAll('nav a').forEach(a => a.addEventListener('click', () => header.classList.remove('open'))); |
| |
| const io = new IntersectionObserver((entries) => { |
| entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); }); |
| }, { threshold: 0.15 }); |
| document.querySelectorAll('.reveal').forEach(el => io.observe(el)); |
| |
| function handleBooking(e){ |
| e.preventDefault(); |
| alert('تم استلام طلب الحجز (نموذج تجريبي) — في النسخة الفعلية سيتم إرسال الطلب مباشرة عبر واتساب أو نظام الحجز.'); |
| return false; |
| } |
| </script> |
| </body> |
| </html> |
