81 lines
45 KiB
HTML
81 lines
45 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ar" dir="rtl"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="theme-color" content="#101411"><meta name="description" content="سيرو: بنية مكانية للمطورين والشركات. خرائط وبحث ومسارات وتجارب تضاريس قابلة للتخصيص."><title>SIRO — ابنِ ما يحرّك العالم</title><style>html{scroll-behavior:smooth}body{margin:0;background:#101411}*{box-sizing:border-box}@font-face{font-family:SiroArabic;src:url('/assets/tajawal-400.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:SiroArabic;src:url('/assets/tajawal-500.ttf') format('truetype');font-weight:500 600;font-display:swap}@font-face{font-family:SiroArabic;src:url('/assets/tajawal-700.ttf') format('truetype');font-weight:700;font-display:swap}
|
|
.sl{--sl-bg:#101411;--sl-line:#30372d;--sl-muted:#a5afa1;--sl-lime:#c4f582;background:var(--sl-bg);color:#f2f4eb;font-family:SiroArabic,sans-serif;font-size:15px;line-height:1.8;overflow:hidden;text-align:right}.sl *{box-sizing:border-box}.sl a{color:inherit;text-decoration:none}.sl button{font:inherit;cursor:pointer}.sl a,.sl button{touch-action:manipulation}.sl :focus-visible{outline:2px solid var(--sl-lime);outline-offset:6px}.sl-wrap{width:min(1320px,calc(100% - 100px));margin-inline:auto}.sl h1,.sl h2,.sl h3,.sl p{margin:0}.sl h1,.sl h2{background:none;-webkit-text-fill-color:initial;color:#f2f4eb;font-weight:500;letter-spacing:-2px;line-height:1.28}.sl h1{font-size:clamp(52px,5.4vw,82px);margin:25px 0}.sl h2{font-size:clamp(34px,3.3vw,50px)}.sl h3{font-size:24px;font-weight:500}.sl em{color:var(--sl-lime);font-style:normal}.sl p{color:var(--sl-muted);line-height:1.95}.sl small{color:var(--sl-muted);font-size:11px}.sl-nav{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--sl-line);gap:24px}.sl-brand{display:flex;align-items:center;gap:12px;direction:ltr}.sl-brand b{font:700 28px Arial,sans-serif;letter-spacing:3px}.sl-brand b span{font:400 12px SiroArabic,sans-serif;display:block;letter-spacing:0;color:var(--sl-muted)}.sl-mark{font-size:48px;color:var(--sl-lime);line-height:1}.sl-nav nav{display:flex;gap:34px;font-size:13px}.sl-nav nav a:hover{color:var(--sl-lime)}.sl-nav-cta{font-size:12px;border:1px solid #66745a;padding:10px 18px;border-radius:5px}.sl-nav-cta span{margin-right:20px}.sl-hero{display:grid;grid-template-columns:1fr 1.12fr;align-items:center;min-height:690px;gap:36px;padding-block:60px}.sl-hero-copy{position:relative;z-index:2}.sl-eyebrow{display:block;font:500 10px Arial,sans-serif;letter-spacing:2px;color:var(--sl-lime);direction:ltr;text-align:right}.sl-eyebrow i,.sl-code-footer i{display:inline-block;width:6px;height:6px;background:var(--sl-lime);border-radius:50%;margin-right:10px}.sl-hero p{font-size:17px;max-width:460px}.sl-actions{display:flex;gap:13px;margin-top:32px;flex-wrap:wrap}.sl-primary,.sl-secondary{display:inline-flex;align-items:center;justify-content:space-between;gap:35px;padding:13px 23px;border-radius:5px;font-weight:500;font-size:13px;transition:transform .2s,background .2s}.sl .sl-primary{background:var(--sl-lime);color:#1b2715}.sl-primary:hover{background:#d9ffa7;transform:translateY(-3px)}.sl-secondary{border:1px solid #41493a;background:#171d16}.sl-secondary:hover{background:#283023}.sl-hero-note{font-size:11px;color:#83907e;margin-top:24px}.sl-hero-note span{color:#cbd6c4}.sl-scene{height:550px;position:relative;perspective:1000px;border-radius:12px;isolation:isolate}.sl-map-art{width:100%;height:100%;object-fit:cover;display:block}.sl-scene>.sl-map-art{transform:rotateX(21deg) rotateZ(-13deg) scale(1.12);border:1px solid #47523b;border-radius:12px;box-shadow:0 28px 0 -8px #1b241b,0 55px 0 -18px #151e16,0 65px 80px #0008;animation:sl-float 9s ease-in-out infinite}.sl-coordinates{position:absolute;left:6px;top:8px;font:10px Arial,monospace;letter-spacing:1px;color:#ccd7c0}.sl-coordinates span{display:block;color:#7b8b73;font-size:9px;margin-top:8px}.sl-map-card{position:absolute;bottom:20px;right:-5px;width:285px;background:#20281eef;border:1px solid #576442;padding:22px;border-radius:8px;box-shadow:0 18px 50px #0005;backdrop-filter:blur(12px)}.sl-overline{display:block;color:var(--sl-lime);font:9px Arial,sans-serif;letter-spacing:2px}.sl-map-card strong{font-size:21px;display:block;margin:8px 0}.sl-card-route{display:flex;align-items:center;gap:9px;font-size:11px}.sl-card-route b{color:#657751}.sl-card-route i{width:6px;height:6px;border-radius:50%;background:var(--sl-lime)}.sl-map-card small{display:block;margin-top:15px;font-size:9px}.sl-layer-label{position:absolute;left:5px;bottom:130px;font:9px Arial,sans-serif;letter-spacing:1px;transform:rotate(-13deg);padding:12px;background:#152015d9;border:1px solid #4b5d3d}.sl-layer-label span{color:var(--sl-lime);margin-right:8px}.sl-motion{position:absolute;left:0;bottom:12px;width:34px;height:34px;border:1px solid #58634b;background:#1d271b;color:var(--sl-lime);border-radius:50%}.sl-foundation{border-block:1px solid var(--sl-line);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:20px;padding:28px 0}.sl-foundation>span{font-size:12px;color:var(--sl-muted)}.sl-foundation>div{display:flex;gap:35px}.sl-foundation b{font:500 18px Arial,sans-serif;color:#c8d1c0}.sl-foundation small{width:100%;font-size:9px;color:#87927d}.sl-section{padding-block:100px}.sl-section-head{display:flex;justify-content:space-between;gap:50px;align-items:flex-end;margin-bottom:40px}.sl-section-head .sl-eyebrow{margin-bottom:20px}.sl-section-head>p{max-width:330px;font-size:14px}.sl-products{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:18px}.sl-product{position:relative;min-height:395px;background:#191f18;border:1px solid #363f2f;border-radius:9px;padding:25px;overflow:hidden;transition:transform .3s,border-color .3s}.sl-product:hover{transform:translateY(-6px);border-color:#91ac71}.sl-product-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;font:10px Arial,sans-serif;color:#9eaf8a}.sl-chip{display:inline-block;font-size:10px;letter-spacing:1px;color:var(--sl-lime);border:1px solid #465638;padding:4px 8px;border-radius:3px}.sl-product p{font-size:13px;margin-top:10px;max-width:290px}.sl-product>a{position:absolute;bottom:22px;right:25px;left:25px;display:flex;justify-content:space-between;font-size:11px;color:#d8e5ca}.sl-stack{height:165px;position:relative;perspective:650px;margin-top:10px}.sl-stack div{position:absolute;left:20%;width:64%;height:90px;background:repeating-linear-gradient(90deg,transparent 0 25px,#c2ef8130 26px 27px),repeating-linear-gradient(0deg,#3f55293d 0 25px,#c2ef8130 26px 27px);border:1px solid #aacb7580;transform:rotateX(57deg) rotateZ(-30deg);color:#d3f6a4;font:9px Arial,sans-serif;padding:9px;text-align:left;box-shadow:0 15px 30px #0002;animation:sl-layer 6s ease-in-out infinite}.sl-stack div:nth-child(1){top:0;z-index:3}.sl-stack div:nth-child(2){top:32px;z-index:2;animation-delay:-2s}.sl-stack div:nth-child(3){top:64px;animation-delay:-4s}.sl-search-demo{display:flex;align-items:center;gap:12px;background:#10170e;border:1px solid #536743;padding:12px;border-radius:6px;font-size:12px;margin-top:34px}.sl-search-demo>span{font-size:23px;color:#bdec80}.sl-search-demo i{height:17px;width:1px;background:var(--sl-lime);animation:sl-blink 1.3s infinite}.sl-search-result{display:flex;gap:14px;align-items:center;font-size:12px;padding:13px;color:#d5e3c8}.sl-search-result small{display:block;font-size:9px}.sl-search-result b{margin-right:auto}.sl-mini-route{height:125px;position:relative;display:flex;align-items:center;padding:10px 15px}.sl-mini-route i{width:12px;height:12px;background:var(--sl-lime);border:3px solid #415932;border-radius:50%;z-index:1}.sl-mini-route b{flex:1;height:45px;border-top:2px dashed #a9d775;border-right:2px dashed #a9d775;transform:skewY(-15deg)}.sl-mini-route>span{position:absolute;bottom:0;font:8px Arial,sans-serif;color:#8fa67c;letter-spacing:2px}.sl-lab{display:grid;grid-template-columns:1fr 1.35fr;background:#c4f582;border-radius:10px;overflow:hidden;color:#16220f}.sl-lab-copy{padding:45px}.sl-lab h2{color:#17220f;margin:18px 0}.sl-lab .sl-eyebrow{color:#385128}.sl-lab p{color:#415735;font-size:14px}.sl-tabs{display:flex;flex-direction:column;margin:25px 0 18px}.sl-tabs button{border:0;border-bottom:1px solid #93bc68;background:transparent;text-align:right;color:#354d27;display:flex;justify-content:space-between;padding:11px 0}.sl-tabs button[aria-pressed=true]{font-weight:700;color:#15240c}.sl-lab small{color:#4e663e;font-size:10px;display:block;margin-top:13px}.sl-lab-scene{overflow:hidden;position:relative;background:#18201a;min-height:510px}.sl-lab-scene .sl-map-art{position:absolute;inset:0;transition:transform 1s,filter 1s;transform:scale(1.15)}.sl-lab-scene[data-scene=terrain] .sl-map-art{transform:perspective(700px) rotateX(32deg) rotateZ(-16deg) scale(1.4);filter:sepia(.6)}.sl-lab-scene[data-scene=terrain] .sl-route,.sl-lab-scene[data-scene=data] .sl-route{opacity:0}.sl-lab-scene[data-scene=data] .sl-map-art{filter:brightness(.65);transform:scale(1.3)}.sl-lab-caption{position:absolute;bottom:20px;left:20px;right:20px;display:flex;justify-content:space-between;color:#d4e7bf;font:10px Arial,sans-serif;direction:ltr;z-index:1}.sl-lab-caption a{font-family:SiroArabic,sans-serif}.sl-data-dots{position:absolute;inset:0;opacity:0;transition:opacity .5s}.sl-lab-scene[data-scene=data] .sl-data-dots{opacity:1}.sl-data-dots i{position:absolute;width:65px;height:65px;background:#c4f58255;border:1px solid #c4f582;border-radius:50%;box-shadow:0 0 45px #c4f58244;left:25%;top:30%}.sl-data-dots i:nth-child(2){left:60%;top:55%;width:95px;height:95px}.sl-data-dots i:nth-child(3){left:40%;top:45%;width:40px;height:40px}.sl-data-dots i:nth-child(4){left:74%;top:24%}.sl-data-dots i:nth-child(5){left:18%;top:68%;width:30px;height:30px}.sl-usecases{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}.sl-usecases article{border-top:1px solid #48523e;padding-top:24px}.sl-usecases article>span{display:block;font-size:34px;color:var(--sl-lime);margin-bottom:30px}.sl-usecases small{font:9px Arial,sans-serif;letter-spacing:1px}.sl-usecases h3{font-size:20px;margin:12px 0}.sl-usecases p{font-size:13px}.sl-developers{display:grid;grid-template-columns:1fr 1.15fr;gap:80px;padding-block:80px;border-block:1px solid var(--sl-line);align-items:center}.sl-developers h2{margin:20px 0}.sl-developers p{font-size:14px}.sl-dev-tags{display:flex;gap:8px;flex-wrap:wrap;direction:ltr;justify-content:flex-end;margin:25px 0;font:10px Arial,sans-serif}.sl-dev-tags span{border:1px solid #424d38;border-radius:3px;padding:8px}.sl-code{background:#0b100c;border:1px solid #39432f;border-radius:8px;overflow:hidden;min-width:0}.sl-code-header{display:flex;justify-content:space-between;padding:15px 20px;border-bottom:1px solid #303a29;font:11px Arial,sans-serif;color:#aab99b}.sl-copy{background:none;border:0;color:#c4f582;font-size:11px!important}.sl-code pre{margin:0;padding:26px 22px;overflow:auto;font:12px/2 Arial,monospace;color:#c4dfa5;text-align:left}.sl-code-footer{border-top:1px solid #2d3828;padding:13px 20px;color:#8b9e7a;font-size:9px}.sl-copy-status{display:block;font-size:11px;color:#c4f582;padding-inline:20px}.sl-difference{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;margin-top:60px}.sl-difference article>span{font:14px Arial,sans-serif;color:var(--sl-lime)}.sl-difference h3{margin:16px 0;font-size:22px}.sl-difference p{font-size:13px}.sl-stage{display:flex;align-items:center;gap:22px;padding:20px 0;border-block:1px solid var(--sl-line);margin-top:45px}.sl-stage .sl-chip{white-space:nowrap;letter-spacing:0}.sl-stage p{font-size:11px}.sl-final{text-align:center;padding:65px 0 100px;background:radial-gradient(ellipse at bottom,#66894322,transparent 65%)}.sl-final .sl-eyebrow{text-align:center}.sl-final h2{font-size:clamp(44px,5.5vw,76px);margin:30px 0 18px}.sl-final p{font-size:14px;margin-bottom:30px}.sl-footer{border-top:1px solid var(--sl-line);padding-block:30px;display:flex;align-items:center;justify-content:space-between;gap:20px}.sl-footer>span,.sl-footer>a:not(.sl-brand){font-size:11px;color:#9daa90}.sl-footer small{font-size:9px}.sl-skip{position:absolute;top:-100px;z-index:100;background:#c4f582;color:#111!important;padding:10px}.sl-skip:focus{top:10px}.sl-flow{animation:sl-dash 6s linear infinite}.sl-pulse{animation:sl-blink 3s ease-in-out infinite}.sl-paused *{animation-play-state:paused!important}.sl [id]{scroll-margin-top:25px}@keyframes sl-dash{to{stroke-dashoffset:-184}}@keyframes sl-blink{50%{opacity:.25}}@keyframes sl-float{50%{transform:rotateX(17deg) rotateZ(-10deg) translateY(-12px) scale(1.12)}}@keyframes sl-layer{50%{translate:0 -8px}}
|
|
@media(min-width:1500px){.sl-hero{min-height:760px}}@media(max-width:1050px){.sl-wrap{width:calc(100% - 56px)}.sl-hero{gap:20px;min-height:610px}.sl-scene{height:430px}.sl-products{grid-template-columns:1fr 1fr}.sl-product-wide{grid-column:1/-1;min-height:310px}.sl-product-wide .sl-stack{position:absolute;left:20px;top:70px;width:45%}.sl-developers{gap:35px}.sl-lab-copy{padding:30px}.sl-usecases{grid-template-columns:1fr 1fr;row-gap:40px}.sl-nav nav{gap:20px}}
|
|
@media(max-width:700px){.sl-wrap{width:calc(100% - 36px)}.sl-nav{height:80px;gap:12px}.sl-nav nav{display:none}.sl-nav-cta{padding:8px 12px;font-size:10px}.sl-brand b{font-size:23px}.sl-mark{font-size:38px}.sl-hero{grid-template-columns:1fr;padding-top:45px;gap:35px}.sl h1{font-size:clamp(40px,10vw,55px)}.sl-hero p{font-size:15px}.sl-eyebrow{font-size:8px;letter-spacing:1.5px}.sl-scene{height:370px;margin:10px 15px 15px}.sl-map-card{width:230px;padding:16px;bottom:0;right:-10px}.sl-map-card strong{font-size:18px}.sl-coordinates{font-size:8px}.sl-layer-label{font-size:7px;left:-10px}.sl-foundation{gap:18px}.sl-foundation>div{gap:18px;flex-wrap:wrap}.sl-foundation b{font-size:15px}.sl-section{padding-block:65px}.sl-section-head{display:block;margin-bottom:28px}.sl-section-head>p{margin-top:20px}.sl-products{grid-template-columns:1fr}.sl-product-wide{grid-column:auto;min-height:395px}.sl-product-wide .sl-stack{position:relative;left:auto;top:auto;width:100%}.sl-product{min-height:360px}.sl-product-wide{min-height:395px}.sl-lab{grid-template-columns:1fr}.sl-lab-copy{padding:28px}.sl-lab-scene{min-height:340px}.sl-tabs{flex-direction:row;gap:20px}.sl-tabs button{flex:1;gap:8px;font-size:12px}.sl-lab h2{font-size:38px}.sl-usecases{gap:26px 20px}.sl-usecases h3{font-size:18px}.sl-usecases p{font-size:12px}.sl-developers{grid-template-columns:1fr;gap:30px;padding-block:55px}.sl-code pre{font-size:10px;padding:20px 14px}.sl-difference{grid-template-columns:1fr;gap:30px;margin-top:35px}.sl-stage{align-items:flex-start;flex-direction:column;gap:12px}.sl-final{padding:25px 0 65px}.sl-footer{flex-wrap:wrap}.sl-footer small{width:100%}.sl-footer>span{font-size:10px}}
|
|
@media(prefers-reduced-motion:reduce){.sl *, .sl *::before,.sl *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
|
|
</style></head><body><div class="sl" dir="rtl">
|
|
<a class="sl-skip" href="#sl-products" data-scroll="sl-products">تجاوز إلى المحتوى</a>
|
|
<header class="sl-nav sl-wrap"><a class="sl-brand" href="/landing.html" aria-label="سيرو الرئيسية"><span class="sl-mark">◈</span><b>SIRO<span>سيرو</span></b></a><nav aria-label="التنقل الرئيسي"><a href="#sl-products" data-scroll="sl-products">المنصة</a><a href="#sl-solutions" data-scroll="sl-solutions">الحلول</a><a href="#sl-developers" data-scroll="sl-developers">للمطورين</a><a href="#sl-vision" data-scroll="sl-vision">رؤيتنا</a></nav><a class="sl-nav-cta" href="/#map">استكشف المنصة <span>↗</span></a></header>
|
|
<main>
|
|
<section class="sl-hero sl-wrap"><div class="sl-hero-copy"><div class="sl-eyebrow"><i></i> LOCATION INFRASTRUCTURE, REIMAGINED</div><h1>العالم يتحرّك.<br>ابنِ ما <em>يحرّكه.</em></h1><p>حوّل الموقع إلى تجربة داخل تطبيقك.<br>خرائط، بحث ومسارات في بنية مكانية قابلة للتخصيص، تنطلق من المنطقة إلى فرص أوسع.</p><div class="sl-actions"><a class="sl-primary" href="/#map">جرّب الخريطة <span>↖</span></a><a class="sl-secondary" href="#sl-developers" data-scroll="sl-developers">ابدأ من الكود <span>⌘</span></a></div><div class="sl-hero-note"><span>مصممة للمطورين.</span> مبنية لطموح الشركات.</div></div><div class="sl-scene"><svg class="sl-map-art" viewBox="0 0 1100 850" role="img" aria-label="تصور توضيحي لخريطة مدينة ومسار متحرك"><defs><radialGradient id="sl-glow"><stop stop-color="#c7f877" stop-opacity=".16"/><stop offset="1" stop-color="#c7f877" stop-opacity="0"/></radialGradient><pattern id="sl-grid" width="80" height="80" patternUnits="userSpaceOnUse"><path d="M 80 0 H 0 V 80" fill="none" stroke="#cadbbb" stroke-opacity=".06"/></pattern></defs><rect width="1100" height="850" fill="#111b19"/><rect width="1100" height="850" fill="url(#sl-grid)"/><ellipse cx="520" cy="400" rx="480" ry="420" fill="url(#sl-glow)"/><g fill="#27332a" stroke="#3a4737" stroke-width="1"><rect x="120" y="110" width="26" height="22" rx="3" transform="rotate(-17 120 110)"/><rect x="203" y="110" width="37" height="31" rx="3" transform="rotate(-17 203 110)"/><rect x="286" y="110" width="48" height="40" rx="3" transform="rotate(-17 286 110)"/><rect x="369" y="110" width="26" height="49" rx="3" transform="rotate(-17 369 110)"/><rect x="452" y="110" width="37" height="22" rx="3" transform="rotate(-17 452 110)"/><rect x="535" y="110" width="48" height="31" rx="3" transform="rotate(-17 535 110)"/><rect x="618" y="110" width="26" height="40" rx="3" transform="rotate(-17 618 110)"/><rect x="701" y="110" width="37" height="49" rx="3" transform="rotate(-17 701 110)"/><rect x="784" y="110" width="48" height="22" rx="3" transform="rotate(-17 784 110)"/><rect x="120" y="198" width="26" height="31" rx="3" transform="rotate(-17 120 198)"/><rect x="203" y="198" width="37" height="40" rx="3" transform="rotate(-17 203 198)"/><rect x="286" y="198" width="48" height="49" rx="3" transform="rotate(-17 286 198)"/><rect x="369" y="198" width="26" height="22" rx="3" transform="rotate(-17 369 198)"/><rect x="452" y="198" width="37" height="31" rx="3" transform="rotate(-17 452 198)"/><rect x="535" y="198" width="48" height="40" rx="3" transform="rotate(-17 535 198)"/><rect x="618" y="198" width="26" height="49" rx="3" transform="rotate(-17 618 198)"/><rect x="701" y="198" width="37" height="22" rx="3" transform="rotate(-17 701 198)"/><rect x="784" y="198" width="48" height="31" rx="3" transform="rotate(-17 784 198)"/><rect x="120" y="286" width="26" height="40" rx="3" transform="rotate(-17 120 286)"/><rect x="203" y="286" width="37" height="49" rx="3" transform="rotate(-17 203 286)"/><rect x="286" y="286" width="48" height="22" rx="3" transform="rotate(-17 286 286)"/><rect x="369" y="286" width="26" height="31" rx="3" transform="rotate(-17 369 286)"/><rect x="452" y="286" width="37" height="40" rx="3" transform="rotate(-17 452 286)"/><rect x="535" y="286" width="48" height="49" rx="3" transform="rotate(-17 535 286)"/><rect x="618" y="286" width="26" height="22" rx="3" transform="rotate(-17 618 286)"/><rect x="701" y="286" width="37" height="31" rx="3" transform="rotate(-17 701 286)"/><rect x="784" y="286" width="48" height="40" rx="3" transform="rotate(-17 784 286)"/><rect x="120" y="374" width="26" height="49" rx="3" transform="rotate(-17 120 374)"/><rect x="203" y="374" width="37" height="22" rx="3" transform="rotate(-17 203 374)"/><rect x="286" y="374" width="48" height="31" rx="3" transform="rotate(-17 286 374)"/><rect x="369" y="374" width="26" height="40" rx="3" transform="rotate(-17 369 374)"/><rect x="452" y="374" width="37" height="49" rx="3" transform="rotate(-17 452 374)"/><rect x="535" y="374" width="48" height="22" rx="3" transform="rotate(-17 535 374)"/><rect x="618" y="374" width="26" height="31" rx="3" transform="rotate(-17 618 374)"/><rect x="701" y="374" width="37" height="40" rx="3" transform="rotate(-17 701 374)"/><rect x="784" y="374" width="48" height="49" rx="3" transform="rotate(-17 784 374)"/><rect x="120" y="462" width="26" height="22" rx="3" transform="rotate(-17 120 462)"/><rect x="203" y="462" width="37" height="31" rx="3" transform="rotate(-17 203 462)"/><rect x="286" y="462" width="48" height="40" rx="3" transform="rotate(-17 286 462)"/><rect x="369" y="462" width="26" height="49" rx="3" transform="rotate(-17 369 462)"/><rect x="452" y="462" width="37" height="22" rx="3" transform="rotate(-17 452 462)"/><rect x="535" y="462" width="48" height="31" rx="3" transform="rotate(-17 535 462)"/><rect x="618" y="462" width="26" height="40" rx="3" transform="rotate(-17 618 462)"/><rect x="701" y="462" width="37" height="49" rx="3" transform="rotate(-17 701 462)"/><rect x="784" y="462" width="48" height="22" rx="3" transform="rotate(-17 784 462)"/><rect x="120" y="550" width="26" height="31" rx="3" transform="rotate(-17 120 550)"/><rect x="203" y="550" width="37" height="40" rx="3" transform="rotate(-17 203 550)"/><rect x="286" y="550" width="48" height="49" rx="3" transform="rotate(-17 286 550)"/><rect x="369" y="550" width="26" height="22" rx="3" transform="rotate(-17 369 550)"/><rect x="452" y="550" width="37" height="31" rx="3" transform="rotate(-17 452 550)"/><rect x="535" y="550" width="48" height="40" rx="3" transform="rotate(-17 535 550)"/><rect x="618" y="550" width="26" height="49" rx="3" transform="rotate(-17 618 550)"/><rect x="701" y="550" width="37" height="22" rx="3" transform="rotate(-17 701 550)"/><rect x="784" y="550" width="48" height="31" rx="3" transform="rotate(-17 784 550)"/><rect x="120" y="638" width="26" height="40" rx="3" transform="rotate(-17 120 638)"/><rect x="203" y="638" width="37" height="49" rx="3" transform="rotate(-17 203 638)"/><rect x="286" y="638" width="48" height="22" rx="3" transform="rotate(-17 286 638)"/><rect x="369" y="638" width="26" height="31" rx="3" transform="rotate(-17 369 638)"/><rect x="452" y="638" width="37" height="40" rx="3" transform="rotate(-17 452 638)"/><rect x="535" y="638" width="48" height="49" rx="3" transform="rotate(-17 535 638)"/><rect x="618" y="638" width="26" height="22" rx="3" transform="rotate(-17 618 638)"/><rect x="701" y="638" width="37" height="31" rx="3" transform="rotate(-17 701 638)"/><rect x="784" y="638" width="48" height="40" rx="3" transform="rotate(-17 784 638)"/></g><g fill="none" stroke="#53604e" stroke-width="2" opacity=".65"><path d="M -160 -40 Q 80 210 0 400 T 220 880"/><path d="M -88 -40 Q 134 210 70 400 T 282 880"/><path d="M -16 -40 Q 188 210 140 400 T 344 880"/><path d="M 56 -40 Q 242 210 210 400 T 406 880"/><path d="M 128 -40 Q 296 210 280 400 T 468 880"/><path d="M 200 -40 Q 350 210 350 400 T 530 880"/><path d="M 272 -40 Q 404 210 420 400 T 592 880"/><path d="M 344 -40 Q 458 210 490 400 T 654 880"/><path d="M 416 -40 Q 512 210 560 400 T 716 880"/><path d="M 488 -40 Q 566 210 630 400 T 778 880"/><path d="M 560 -40 Q 620 210 700 400 T 840 880"/><path d="M 632 -40 Q 674 210 770 400 T 902 880"/><path d="M 704 -40 Q 728 210 840 400 T 964 880"/><path d="M 776 -40 Q 782 210 910 400 T 1026 880"/><path d="M 848 -40 Q 836 210 980 400 T 1088 880"/><path d="M 920 -40 Q 890 210 1050 400 T 1150 880"/><path d="M -80 0 Q 300 -150 530 0 T 1150 100"/><path d="M -80 63 Q 300 -85 530 68 T 1150 157"/><path d="M -80 126 Q 300 -20 530 136 T 1150 214"/><path d="M -80 189 Q 300 45 530 204 T 1150 271"/><path d="M -80 252 Q 300 110 530 272 T 1150 328"/><path d="M -80 315 Q 300 175 530 340 T 1150 385"/><path d="M -80 378 Q 300 240 530 408 T 1150 442"/><path d="M -80 441 Q 300 305 530 476 T 1150 499"/><path d="M -80 504 Q 300 370 530 544 T 1150 556"/><path d="M -80 567 Q 300 435 530 612 T 1150 613"/><path d="M -80 630 Q 300 500 530 680 T 1150 670"/><path d="M -80 693 Q 300 565 530 748 T 1150 727"/><path d="M -80 756 Q 300 630 530 816 T 1150 784"/><path d="M -80 819 Q 300 695 530 884 T 1150 841"/></g><path d="M-80 720 C100 490 200 710 320 470 S420 310 630 260 S800 90 1130 120" fill="none" stroke="#182e2a" stroke-width="48"/><path d="M-80 720 C100 490 200 710 320 470 S420 310 630 260 S800 90 1130 120" fill="none" stroke="#3a6452" stroke-width="2"/><g class="sl-route" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M 190 620 L 300 560 L 360 420 L 540 400 L 620 275 L 840 230" stroke="#c6f783" stroke-opacity=".13" stroke-width="28"/><path d="M 190 620 L 300 560 L 360 420 L 540 400 L 620 275 L 840 230" stroke="#c6f783" stroke-width="5"/><path class="sl-flow" d="M 190 620 L 300 560 L 360 420 L 540 400 L 620 275 L 840 230" stroke="white" stroke-width="5" stroke-dasharray="12 80"/></g><g fill="#c6f783" stroke="#17211b" stroke-width="5"><circle cx="190" cy="620" r="10"/><circle cx="840" cy="230" r="10"/></g><g font-family="sans-serif" fill="#a4b39e" font-size="13" letter-spacing="3"><text x="510" y="520">AMMAN</text><text x="710" y="150">SHMEISANI</text><text x="125" y="710">ABDOUN</text></g><circle class="sl-pulse" cx="840" cy="230" r="27" fill="none" stroke="#c6f783"/></svg><div class="sl-coordinates" dir="ltr">31.9539° N 35.9106° E <span>AMMAN, JO</span></div><div class="sl-map-card"><span class="sl-overline">ROUTING ENGINE</span><strong>من نقطة. إلى فرصة.</strong><div class="sl-card-route"><i></i><span>عبدون</span><b>────────</b><span>الشميساني</span><i></i></div><small>تصور تفاعلي • بيانات توضيحية</small></div><div class="sl-layer-label"><span>▱</span> VECTOR / TERRAIN / DATA</div><button class="sl-motion" aria-pressed="false" aria-label="إيقاف الحركة">Ⅱ</button></div></section>
|
|
<div class="sl-foundation sl-wrap"><span>أساس مفتوح. مساحة أكبر للابتكار.</span><div dir="ltr"><b>MapLibre</b><b>OpenStreetMap</b><b>PostGIS</b><b>GraphHopper</b></div><small>تقنيات مستخدمة في المشروع، وليست شعارات عملاء أو شراكات.</small></div>
|
|
<section id="sl-products" class="sl-section sl-wrap"><div class="sl-section-head"><div><span class="sl-eyebrow">01 / THE PLATFORM</span><h2>كل إحداثية.<br>بداية لإمكانية جديدة.</h2></div><p>امنح تطبيقك فهمًا للمكان، من أول عملية بحث إلى آخر خطوة في الرحلة.</p></div><div class="sl-products">
|
|
<article class="sl-product sl-product-wide"><div class="sl-product-top"><span class="sl-chip">MAPS & LAYERS</span><span>01 ↗</span></div><h3>خريطتك. بطابعك.</h3><p>طبقات مكانية وهوية بصرية تتشكل حول منتجك، مع عرض للتضاريس ثلاثية الأبعاد.</p><div class="sl-stack" aria-hidden="true"><div>DATA</div><div>ROADS</div><div>TERRAIN</div></div><a href="/#terrain3d">استكشف التضاريس <span>↖</span></a></article>
|
|
<article class="sl-product"><div class="sl-product-top"><span class="sl-chip">SEARCH & GEOCODING</span><span>02 ↗</span></div><h3>المكان، بلغتك.</h3><p>بحث عن الأماكن، إكمال تلقائي وتحويل الإحداثيات إلى عناوين.</p><div class="sl-search-demo"><span>⌕</span> عمّان، الأردن <i></i></div><div class="sl-search-result">◉ <span>عمّان<small>الأردن · مثال توضيحي</small></span><b>↖</b></div><a href="/#map">جرّب البحث <span>↖</span></a></article>
|
|
<article class="sl-product"><div class="sl-product-top"><span class="sl-chip">ROUTING & MOBILITY</span><span>03 ↗</span></div><h3>الحركة تصبح منتجًا.</h3><p>مسارات بين المواقع واستقبال بيانات المركبات لبناء تجارب تنقّل وأعمال ميدانية.</p><div class="sl-mini-route" aria-hidden="true"><i></i><b></b><i></i><span>ORIGIN → DESTINATION</span></div><a href="/#map">استكشف المسارات <span>↖</span></a></article></div></section>
|
|
<section class="sl-lab sl-wrap" aria-labelledby="sl-lab-heading"><div class="sl-lab-copy"><span class="sl-eyebrow">BUILT TO BE EXPLORED</span><h2 id="sl-lab-heading">طبقات مختلفة.<br>صورة أوضح.</h2><p>بدّل المشهد، وشاهد كيف تتحول الخريطة من واجهة بصرية إلى سياق لقراراتك.</p><div class="sl-tabs" role="group" aria-label="نمط المشهد"><button data-mode="routes" aria-pressed="true">المسارات <span>↗</span></button><button data-mode="terrain" aria-pressed="false">التضاريس <span>▱</span></button><button data-mode="data" aria-pressed="false">البيانات <span>⊙</span></button></div><p class="sl-mode-description" aria-live="polite">اربط نقطة الانطلاق بالوجهة داخل تجربة تطبيقك.</p><small>محاكاة بصرية للمفهوم. افتح المنصة لتجربة الخرائط الفعلية.</small></div><div class="sl-lab-scene" data-scene="routes"><svg class="sl-map-art" viewBox="0 0 1100 850" role="img" aria-label="تصور توضيحي لخريطة مدينة ومسار متحرك"><defs><radialGradient id="sl-lab-glow"><stop stop-color="#c7f877" stop-opacity=".16"/><stop offset="1" stop-color="#c7f877" stop-opacity="0"/></radialGradient><pattern id="sl-lab-grid" width="80" height="80" patternUnits="userSpaceOnUse"><path d="M 80 0 H 0 V 80" fill="none" stroke="#cadbbb" stroke-opacity=".06"/></pattern></defs><rect width="1100" height="850" fill="#111b19"/><rect width="1100" height="850" fill="url(#sl-lab-grid)"/><ellipse cx="520" cy="400" rx="480" ry="420" fill="url(#sl-lab-glow)"/><g fill="#27332a" stroke="#3a4737" stroke-width="1"><rect x="120" y="110" width="26" height="22" rx="3" transform="rotate(-17 120 110)"/><rect x="203" y="110" width="37" height="31" rx="3" transform="rotate(-17 203 110)"/><rect x="286" y="110" width="48" height="40" rx="3" transform="rotate(-17 286 110)"/><rect x="369" y="110" width="26" height="49" rx="3" transform="rotate(-17 369 110)"/><rect x="452" y="110" width="37" height="22" rx="3" transform="rotate(-17 452 110)"/><rect x="535" y="110" width="48" height="31" rx="3" transform="rotate(-17 535 110)"/><rect x="618" y="110" width="26" height="40" rx="3" transform="rotate(-17 618 110)"/><rect x="701" y="110" width="37" height="49" rx="3" transform="rotate(-17 701 110)"/><rect x="784" y="110" width="48" height="22" rx="3" transform="rotate(-17 784 110)"/><rect x="120" y="198" width="26" height="31" rx="3" transform="rotate(-17 120 198)"/><rect x="203" y="198" width="37" height="40" rx="3" transform="rotate(-17 203 198)"/><rect x="286" y="198" width="48" height="49" rx="3" transform="rotate(-17 286 198)"/><rect x="369" y="198" width="26" height="22" rx="3" transform="rotate(-17 369 198)"/><rect x="452" y="198" width="37" height="31" rx="3" transform="rotate(-17 452 198)"/><rect x="535" y="198" width="48" height="40" rx="3" transform="rotate(-17 535 198)"/><rect x="618" y="198" width="26" height="49" rx="3" transform="rotate(-17 618 198)"/><rect x="701" y="198" width="37" height="22" rx="3" transform="rotate(-17 701 198)"/><rect x="784" y="198" width="48" height="31" rx="3" transform="rotate(-17 784 198)"/><rect x="120" y="286" width="26" height="40" rx="3" transform="rotate(-17 120 286)"/><rect x="203" y="286" width="37" height="49" rx="3" transform="rotate(-17 203 286)"/><rect x="286" y="286" width="48" height="22" rx="3" transform="rotate(-17 286 286)"/><rect x="369" y="286" width="26" height="31" rx="3" transform="rotate(-17 369 286)"/><rect x="452" y="286" width="37" height="40" rx="3" transform="rotate(-17 452 286)"/><rect x="535" y="286" width="48" height="49" rx="3" transform="rotate(-17 535 286)"/><rect x="618" y="286" width="26" height="22" rx="3" transform="rotate(-17 618 286)"/><rect x="701" y="286" width="37" height="31" rx="3" transform="rotate(-17 701 286)"/><rect x="784" y="286" width="48" height="40" rx="3" transform="rotate(-17 784 286)"/><rect x="120" y="374" width="26" height="49" rx="3" transform="rotate(-17 120 374)"/><rect x="203" y="374" width="37" height="22" rx="3" transform="rotate(-17 203 374)"/><rect x="286" y="374" width="48" height="31" rx="3" transform="rotate(-17 286 374)"/><rect x="369" y="374" width="26" height="40" rx="3" transform="rotate(-17 369 374)"/><rect x="452" y="374" width="37" height="49" rx="3" transform="rotate(-17 452 374)"/><rect x="535" y="374" width="48" height="22" rx="3" transform="rotate(-17 535 374)"/><rect x="618" y="374" width="26" height="31" rx="3" transform="rotate(-17 618 374)"/><rect x="701" y="374" width="37" height="40" rx="3" transform="rotate(-17 701 374)"/><rect x="784" y="374" width="48" height="49" rx="3" transform="rotate(-17 784 374)"/><rect x="120" y="462" width="26" height="22" rx="3" transform="rotate(-17 120 462)"/><rect x="203" y="462" width="37" height="31" rx="3" transform="rotate(-17 203 462)"/><rect x="286" y="462" width="48" height="40" rx="3" transform="rotate(-17 286 462)"/><rect x="369" y="462" width="26" height="49" rx="3" transform="rotate(-17 369 462)"/><rect x="452" y="462" width="37" height="22" rx="3" transform="rotate(-17 452 462)"/><rect x="535" y="462" width="48" height="31" rx="3" transform="rotate(-17 535 462)"/><rect x="618" y="462" width="26" height="40" rx="3" transform="rotate(-17 618 462)"/><rect x="701" y="462" width="37" height="49" rx="3" transform="rotate(-17 701 462)"/><rect x="784" y="462" width="48" height="22" rx="3" transform="rotate(-17 784 462)"/><rect x="120" y="550" width="26" height="31" rx="3" transform="rotate(-17 120 550)"/><rect x="203" y="550" width="37" height="40" rx="3" transform="rotate(-17 203 550)"/><rect x="286" y="550" width="48" height="49" rx="3" transform="rotate(-17 286 550)"/><rect x="369" y="550" width="26" height="22" rx="3" transform="rotate(-17 369 550)"/><rect x="452" y="550" width="37" height="31" rx="3" transform="rotate(-17 452 550)"/><rect x="535" y="550" width="48" height="40" rx="3" transform="rotate(-17 535 550)"/><rect x="618" y="550" width="26" height="49" rx="3" transform="rotate(-17 618 550)"/><rect x="701" y="550" width="37" height="22" rx="3" transform="rotate(-17 701 550)"/><rect x="784" y="550" width="48" height="31" rx="3" transform="rotate(-17 784 550)"/><rect x="120" y="638" width="26" height="40" rx="3" transform="rotate(-17 120 638)"/><rect x="203" y="638" width="37" height="49" rx="3" transform="rotate(-17 203 638)"/><rect x="286" y="638" width="48" height="22" rx="3" transform="rotate(-17 286 638)"/><rect x="369" y="638" width="26" height="31" rx="3" transform="rotate(-17 369 638)"/><rect x="452" y="638" width="37" height="40" rx="3" transform="rotate(-17 452 638)"/><rect x="535" y="638" width="48" height="49" rx="3" transform="rotate(-17 535 638)"/><rect x="618" y="638" width="26" height="22" rx="3" transform="rotate(-17 618 638)"/><rect x="701" y="638" width="37" height="31" rx="3" transform="rotate(-17 701 638)"/><rect x="784" y="638" width="48" height="40" rx="3" transform="rotate(-17 784 638)"/></g><g fill="none" stroke="#53604e" stroke-width="2" opacity=".65"><path d="M -160 -40 Q 80 210 0 400 T 220 880"/><path d="M -88 -40 Q 134 210 70 400 T 282 880"/><path d="M -16 -40 Q 188 210 140 400 T 344 880"/><path d="M 56 -40 Q 242 210 210 400 T 406 880"/><path d="M 128 -40 Q 296 210 280 400 T 468 880"/><path d="M 200 -40 Q 350 210 350 400 T 530 880"/><path d="M 272 -40 Q 404 210 420 400 T 592 880"/><path d="M 344 -40 Q 458 210 490 400 T 654 880"/><path d="M 416 -40 Q 512 210 560 400 T 716 880"/><path d="M 488 -40 Q 566 210 630 400 T 778 880"/><path d="M 560 -40 Q 620 210 700 400 T 840 880"/><path d="M 632 -40 Q 674 210 770 400 T 902 880"/><path d="M 704 -40 Q 728 210 840 400 T 964 880"/><path d="M 776 -40 Q 782 210 910 400 T 1026 880"/><path d="M 848 -40 Q 836 210 980 400 T 1088 880"/><path d="M 920 -40 Q 890 210 1050 400 T 1150 880"/><path d="M -80 0 Q 300 -150 530 0 T 1150 100"/><path d="M -80 63 Q 300 -85 530 68 T 1150 157"/><path d="M -80 126 Q 300 -20 530 136 T 1150 214"/><path d="M -80 189 Q 300 45 530 204 T 1150 271"/><path d="M -80 252 Q 300 110 530 272 T 1150 328"/><path d="M -80 315 Q 300 175 530 340 T 1150 385"/><path d="M -80 378 Q 300 240 530 408 T 1150 442"/><path d="M -80 441 Q 300 305 530 476 T 1150 499"/><path d="M -80 504 Q 300 370 530 544 T 1150 556"/><path d="M -80 567 Q 300 435 530 612 T 1150 613"/><path d="M -80 630 Q 300 500 530 680 T 1150 670"/><path d="M -80 693 Q 300 565 530 748 T 1150 727"/><path d="M -80 756 Q 300 630 530 816 T 1150 784"/><path d="M -80 819 Q 300 695 530 884 T 1150 841"/></g><path d="M-80 720 C100 490 200 710 320 470 S420 310 630 260 S800 90 1130 120" fill="none" stroke="#182e2a" stroke-width="48"/><path d="M-80 720 C100 490 200 710 320 470 S420 310 630 260 S800 90 1130 120" fill="none" stroke="#3a6452" stroke-width="2"/><g class="sl-route" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M 190 620 L 300 560 L 360 420 L 540 400 L 620 275 L 840 230" stroke="#c6f783" stroke-opacity=".13" stroke-width="28"/><path d="M 190 620 L 300 560 L 360 420 L 540 400 L 620 275 L 840 230" stroke="#c6f783" stroke-width="5"/><path class="sl-flow" d="M 190 620 L 300 560 L 360 420 L 540 400 L 620 275 L 840 230" stroke="white" stroke-width="5" stroke-dasharray="12 80"/></g><g fill="#c6f783" stroke="#17211b" stroke-width="5"><circle cx="190" cy="620" r="10"/><circle cx="840" cy="230" r="10"/></g><g font-family="sans-serif" fill="#a4b39e" font-size="13" letter-spacing="3"><text x="510" y="520">AMMAN</text><text x="710" y="150">SHMEISANI</text><text x="125" y="710">ABDOUN</text></g><circle class="sl-pulse" cx="840" cy="230" r="27" fill="none" stroke="#c6f783"/></svg><div class="sl-data-dots" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></div><div class="sl-lab-caption"><span data-mode-label>ROUTE LAYER</span><a href="/#map" data-mode-link>فتح التجربة ↗</a></div></div></section>
|
|
<section id="sl-solutions" class="sl-section sl-wrap"><div class="sl-section-head"><div><span class="sl-eyebrow">02 / POSSIBILITIES</span><h2>لا تبنِ خريطة فقط.<br>ابنِ عملًا يتحرّك.</h2></div><p>حالات استخدام يمكن تطويرها فوق المنصة، بالتكامل مع بيانات العميل وأنظمته.</p></div><div class="sl-usecases"><article><span>↗</span><small>LOGISTICS</small><h3>التوصيل والأساطيل</h3><p>رحلة من الطلب إلى الوصول، مع البحث عن المواقع وعرض حركة المركبات.</p></article><article><span>⌖</span><small>FIELD OPERATIONS</small><h3>العمليات الميدانية</h3><p>واجهة موحدة لفرق الصيانة والمرافق والاستجابة الميدانية.</p></article><article><span>▥</span><small>LOCATION INTELLIGENCE</small><h3>العقار والتجارة</h3><p>اربط العقارات والفروع والخدمات بسياقها المكاني داخل منتجك.</p></article><article><span>◎</span><small>TRAVEL & HERITAGE</small><h3>السياحة والتراث</h3><p>حوّل المعالم والمسارات المحلية إلى تجارب اكتشاف غنية.</p></article></div></section>
|
|
<section id="sl-developers" class="sl-developers sl-wrap"><div><span class="sl-eyebrow">03 / DEVELOPER FIRST</span><h2>الفكرة لك.<br>والإحداثيات علينا.</h2><p>واجهات للبحث والمسارات، وحزم تطوير JavaScript وFlutter موجودة في المشروع. ابدأ بتكامل صغير، ثم وسّع التجربة حول احتياجك.</p><div class="sl-dev-tags"><span>REST API</span><span>JavaScript / TypeScript</span><span>Flutter</span></div><a class="sl-secondary" href="/#map">افتح بيئة التجربة ↖</a></div><div class="sl-code"><div class="sl-code-header"><span dir="ltr">search.mjs</span><button class="sl-copy">نسخ الكود ⧉</button></div><pre dir="ltr"><code>// Point to your deployed API gateway
|
|
const baseUrl = 'https://YOUR_API_HOST/api';
|
|
const query = new URLSearchParams({
|
|
q: 'عمّان', country: 'jordan'
|
|
});
|
|
|
|
const response = await fetch(
|
|
`${baseUrl}/geocoding/search?${query}`,
|
|
{ headers: { 'x-api-key': 'YOUR_API_KEY' } }
|
|
);
|
|
if (!response.ok) throw new Error('Search failed');
|
|
const places = await response.json();</code></pre><div class="sl-code-footer"><i></i> مثال تكامل • اضبط عنوان النشر ومفتاح الوصول</div><span class="sl-copy-status" role="status"></span></div></section>
|
|
<section id="sl-vision" class="sl-section sl-wrap"><div class="sl-section-head"><div><span class="sl-eyebrow">04 / A REGIONAL OPPORTUNITY</span><h2>عالمي في الطموح.<br>قريب من واقعك.</h2></div><p>نطوّر أساسًا محليًا يمكن البناء عليه. القيمة في جودة البيانات والتكامل والدعم، وتُثبت في الاستخدام الفعلي.</p></div><div class="sl-difference"><article><span>01</span><h3>سياق محلي أعمق</h3><p>فرصة لتحسين أسماء الأماكن والعناوين ونقاط الوصول، بالتعاون مع شركاء المنطقة.</p></article><article><span>02</span><h3>تحكّم في البنية</h3><p>معمارية قابلة للاستضافة الذاتية. متطلبات التشغيل والعزل تُحدَّد لكل نشر.</p></article><article><span>03</span><h3>منتج قابل للتشكيل</h3><p>أضف بياناتك وطبقاتك، وابنِ تجربة حول قطاعك بدل الاكتفاء بخريطة عامة.</p></article></div><div class="sl-stage"><span class="sl-chip">قيد التطوير والتحقق</span><p>تتوافر مكونات وتجارب داخل المشروع. التغطية، الأداء والجاهزية للإنتاج تحتاج إلى قياس لكل حالة استخدام.</p></div></section>
|
|
<section class="sl-final sl-wrap"><span class="sl-eyebrow">YOUR NEXT BUILD STARTS HERE</span><h2>المكان موجود.<br>الإمكانية <em>بين يديك.</em></h2><p>استكشف المنصة، واكتشف أين تبدأ فكرتك القادمة.</p><a class="sl-primary" href="/#map">ابدأ الاستكشاف <span>↖</span></a></section>
|
|
</main><footer class="sl-footer sl-wrap"><a class="sl-brand" href="/landing.html"><span class="sl-mark">◈</span><b>SIRO<span>سيرو</span></b></a><span>بنية مكانية. لمنتجات تتحرك.</span><a href="#sl-developers" data-scroll="sl-developers">للمطورين ↗</a><small>© 2026 SIRO · مبني على تقنيات مفتوحة</small></footer></div><script type="module">/** Shared behavior for the React view and the generated standalone document. */
|
|
export function initializeLanding(root) {
|
|
const controller = new AbortController();
|
|
const { signal } = controller;
|
|
const reduced = window.matchMedia('(prefers-reduced-motion: reduce)');
|
|
root.addEventListener('click', async (event) => {
|
|
const target = event.target.closest('a, button');
|
|
if (!target || !root.contains(target)) return;
|
|
if (target.dataset.scroll) {
|
|
event.preventDefault();
|
|
const section = root.querySelector(`#${target.dataset.scroll}`);
|
|
section?.scrollIntoView({ behavior: reduced.matches ? 'instant' : 'smooth', block: 'start' });
|
|
section?.setAttribute('tabindex', '-1');
|
|
section?.focus({ preventScroll: true });
|
|
}
|
|
if (target.dataset.mode) {
|
|
const mode = target.dataset.mode;
|
|
root.querySelectorAll('[data-mode]').forEach(button => button.setAttribute('aria-pressed', String(button === target)));
|
|
root.querySelector('[data-scene]').dataset.scene = mode;
|
|
const modes = {
|
|
routes: ['ROUTE LAYER', 'اربط نقطة الانطلاق بالوجهة داخل تجربة تطبيقك.', '/#map'],
|
|
terrain: ['TERRAIN LAYER', 'أضف الارتفاعات وسياق التضاريس إلى المشهد المكاني.', '/#terrain3d'],
|
|
data: ['DATA LAYER', 'ضع مواقعك وبياناتك فوق الخريطة لفهم توزيعها.', '/#map']
|
|
};
|
|
const [label, description, href] = modes[mode];
|
|
root.querySelector('[data-mode-label]').textContent = label;
|
|
root.querySelector('.sl-mode-description').textContent = description;
|
|
root.querySelector('[data-mode-link]').href = href;
|
|
}
|
|
if (target.classList.contains('sl-motion')) {
|
|
const paused = root.classList.toggle('sl-paused');
|
|
target.setAttribute('aria-pressed', String(paused));
|
|
target.setAttribute('aria-label', paused ? 'تشغيل الحركة' : 'إيقاف الحركة');
|
|
target.textContent = paused ? '▷' : 'Ⅱ';
|
|
}
|
|
if (target.classList.contains('sl-copy')) {
|
|
const status = root.querySelector('.sl-copy-status');
|
|
try {
|
|
await navigator.clipboard.writeText(root.querySelector('.sl-code code').textContent);
|
|
if (!signal.aborted) status.textContent = 'تم نسخ الكود';
|
|
} catch {
|
|
if (!signal.aborted) status.textContent = 'تعذّر النسخ التلقائي. يمكنك تحديد الكود ونسخه يدويًا.';
|
|
}
|
|
}
|
|
}, { signal });
|
|
return () => controller.abort();
|
|
}
|
|
|
|
initializeLanding(document.querySelector('.sl'));</script></body></html> |