741 lines
35 KiB
HTML
741 lines
35 KiB
HTML
<!doctype html>
|
||
<html lang="fa" dir="rtl">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<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=Vazirmatn:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="styles.css" />
|
||
|
||
<style>
|
||
:root { --max-w: 1200px; }
|
||
body {
|
||
background: var(--surface);
|
||
color: var(--ink);
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* — top nav — */
|
||
.nav {
|
||
position: sticky; top: 0; z-index: 50;
|
||
background: rgba(255,255,255,.85);
|
||
backdrop-filter: saturate(140%) blur(12px);
|
||
-webkit-backdrop-filter: saturate(140%) blur(12px);
|
||
border-bottom: 1px solid var(--line-soft);
|
||
}
|
||
.nav-inner {
|
||
max-width: var(--max-w);
|
||
margin: 0 auto;
|
||
display: flex; align-items: center; gap: 32px;
|
||
padding: 14px 24px;
|
||
}
|
||
.nav-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }
|
||
.nav-mark {
|
||
width: 32px; height: 32px; border-radius: 9px;
|
||
background: linear-gradient(140deg, var(--accent), var(--accent-2));
|
||
color: white; font-family: var(--font-en); font-weight: 700; font-size: 13px;
|
||
display: grid; place-items: center;
|
||
box-shadow: 0 3px 10px oklch(0.72 0.14 40 / .35);
|
||
}
|
||
.nav-links { display: flex; gap: 4px; }
|
||
.nav-link {
|
||
padding: 8px 12px; border-radius: 8px;
|
||
font-size: 13.5px; color: var(--ink-2);
|
||
cursor: pointer;
|
||
}
|
||
.nav-link:hover { background: var(--surface-2); color: var(--ink); }
|
||
.nav-cta { margin-inline-start: auto; display: flex; gap: 8px; }
|
||
|
||
/* — hero — */
|
||
.hero {
|
||
max-width: var(--max-w);
|
||
margin: 0 auto;
|
||
padding: 72px 24px 56px;
|
||
display: grid;
|
||
grid-template-columns: 1.15fr 1fr;
|
||
gap: 48px;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
.hero::before {
|
||
content: ""; position: absolute;
|
||
inset: -10% 0 -20% auto; width: 60%;
|
||
background: radial-gradient(60% 60% at 70% 40%, oklch(0.84 0.10 40 / .35), transparent 70%);
|
||
filter: blur(40px);
|
||
z-index: -1;
|
||
}
|
||
.eyebrow {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
padding: 6px 12px; border-radius: 999px;
|
||
background: var(--accent-soft); color: var(--accent-ink);
|
||
font-size: 12.5px; font-weight: 500;
|
||
margin-bottom: 20px;
|
||
}
|
||
.hero h1 {
|
||
font-size: 56px; line-height: 1.1; letter-spacing: -0.025em;
|
||
font-weight: 700; margin: 0 0 20px;
|
||
text-wrap: balance;
|
||
}
|
||
.hero h1 em {
|
||
font-style: normal;
|
||
background: linear-gradient(120deg, var(--accent), var(--accent-2));
|
||
-webkit-background-clip: text; background-clip: text; color: transparent;
|
||
}
|
||
.hero p {
|
||
font-size: 18px; line-height: 1.65; color: var(--ink-2);
|
||
max-width: 540px; margin: 0 0 28px;
|
||
text-wrap: pretty;
|
||
}
|
||
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
|
||
.hero-ctas .btn { padding: 14px 22px; font-size: 14px; font-weight: 600; }
|
||
.hero-search {
|
||
max-width: 540px;
|
||
background: white;
|
||
border-radius: 16px;
|
||
padding: 12px;
|
||
display: flex; gap: 8px; align-items: center;
|
||
border: 1px solid var(--line);
|
||
box-shadow: 0 12px 32px oklch(0.6 0.05 40 / .12);
|
||
margin-top: 28px;
|
||
}
|
||
.hero-search input {
|
||
flex: 1; border: 0; outline: 0; background: transparent;
|
||
font: inherit; font-size: 15px; padding: 6px 10px;
|
||
color: var(--ink);
|
||
}
|
||
.hero-search .btn { padding: 10px 18px; }
|
||
.hero-trust {
|
||
display: flex; gap: 24px; margin-top: 32px;
|
||
color: var(--ink-3); font-size: 13px;
|
||
}
|
||
.hero-trust b { color: var(--ink); font-family: var(--font-num); font-weight: 700; }
|
||
|
||
.hero-visual {
|
||
position: relative;
|
||
aspect-ratio: 4/4.4;
|
||
border-radius: 24px;
|
||
background: linear-gradient(150deg, oklch(0.86 0.10 40), oklch(0.82 0.08 80));
|
||
overflow: hidden;
|
||
box-shadow: 0 24px 60px oklch(0.6 0.10 40 / .25);
|
||
}
|
||
.hero-cards {
|
||
position: absolute; inset: 0;
|
||
display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
|
||
gap: 16px; padding: 24px;
|
||
}
|
||
.hv-card {
|
||
background: white; border-radius: 14px;
|
||
padding: 14px; display: flex; flex-direction: column; gap: 6px;
|
||
box-shadow: 0 6px 20px rgba(0,0,0,.08);
|
||
}
|
||
.hv-card .swatch { height: 60px; border-radius: 8px; margin-bottom: 4px; }
|
||
.hv-card .ttl { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
|
||
.hv-card .meta { font-size: 11px; color: var(--ink-3); }
|
||
.hv-card .row { display: flex; align-items: center; gap: 6px; margin-top: auto; font-size: 11px; color: var(--ink-3); }
|
||
.hv-float {
|
||
position: absolute; background: white;
|
||
border-radius: 12px; padding: 10px 14px;
|
||
box-shadow: 0 8px 24px rgba(0,0,0,.15);
|
||
display: flex; align-items: center; gap: 10px;
|
||
font-size: 12px;
|
||
}
|
||
.hv-float.f1 { bottom: 18px; right: -16px; }
|
||
.hv-float.f2 { top: 32px; left: -10px; }
|
||
|
||
/* — section base — */
|
||
section.s {
|
||
max-width: var(--max-w);
|
||
margin: 0 auto;
|
||
padding: 64px 24px;
|
||
}
|
||
.s-h {
|
||
text-align: center;
|
||
margin-bottom: 40px;
|
||
}
|
||
.s-h .eyebrow { margin: 0 auto 14px; }
|
||
.s-h h2 {
|
||
font-size: 36px; letter-spacing: -0.02em; font-weight: 700;
|
||
margin: 0 0 10px;
|
||
}
|
||
.s-h p {
|
||
font-size: 16px; color: var(--ink-2); margin: 0;
|
||
max-width: 560px; margin: 0 auto;
|
||
}
|
||
|
||
/* — categories — */
|
||
.cat-grid {
|
||
display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px;
|
||
}
|
||
.cat-tile {
|
||
background: var(--surface-2);
|
||
border: 1px solid var(--line-soft);
|
||
border-radius: 14px;
|
||
padding: 18px 14px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
transition: all .15s;
|
||
}
|
||
.cat-tile:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 20px rgba(0,0,0,.06);
|
||
border-color: var(--accent);
|
||
}
|
||
.cat-ic {
|
||
width: 44px; height: 44px; border-radius: 12px;
|
||
display: grid; place-items: center;
|
||
margin: 0 auto 10px;
|
||
}
|
||
.cat-tile .name { font-size: 13px; font-weight: 600; }
|
||
.cat-tile .cnt { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
|
||
|
||
/* — course cards — */
|
||
.courses-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
|
||
.lc {
|
||
background: var(--surface);
|
||
border: 1px solid var(--line);
|
||
border-radius: 14px;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
display: flex; flex-direction: column;
|
||
transition: all .15s;
|
||
}
|
||
.lc:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.08); border-color: var(--ink-4); }
|
||
.lc-img {
|
||
aspect-ratio: 16/10;
|
||
display: grid; place-items: center;
|
||
color: white;
|
||
position: relative;
|
||
}
|
||
.lc-img .play {
|
||
width: 44px; height: 44px; border-radius: 50%;
|
||
background: rgba(255,255,255,.95); color: var(--accent);
|
||
display: grid; place-items: center;
|
||
}
|
||
.lc-img .badge {
|
||
position: absolute; top: 10px; inset-inline-start: 10px;
|
||
background: white; color: var(--ink);
|
||
padding: 4px 10px; border-radius: 999px;
|
||
font-size: 11px; font-weight: 600;
|
||
}
|
||
.lc-body { padding: 14px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
|
||
.lc-cat { font-size: 11.5px; color: var(--ink-3); }
|
||
.lc-ttl { font-size: 14.5px; font-weight: 600; line-height: 1.4; min-height: 40px; }
|
||
.lc-by { font-size: 12px; color: var(--ink-3); }
|
||
.lc-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-3); }
|
||
.lc-meta b { color: var(--ink); font-family: var(--font-num); font-weight: 600; }
|
||
.lc-foot {
|
||
padding: 12px 14px; border-top: 1px solid var(--line-soft);
|
||
display: flex; align-items: baseline; gap: 8px;
|
||
}
|
||
.lc-foot .price { font-family: var(--font-num); font-weight: 700; font-size: 16px; }
|
||
.lc-foot .old { font-family: var(--font-num); color: var(--ink-3); font-size: 12px; text-decoration: line-through; margin-inline-start: auto; }
|
||
|
||
/* — instructors — */
|
||
.ins-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
|
||
.ins-card {
|
||
background: var(--surface);
|
||
border: 1px solid var(--line);
|
||
border-radius: 14px;
|
||
padding: 24px;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
transition: all .15s;
|
||
}
|
||
.ins-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,.06); }
|
||
.ins-av {
|
||
width: 72px; height: 72px;
|
||
border-radius: 50%;
|
||
margin: 0 auto 14px;
|
||
display: grid; place-items: center;
|
||
color: white; font-size: 18px; font-weight: 700;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,.1);
|
||
}
|
||
.ins-card h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
|
||
.ins-card .topic { font-size: 12.5px; color: var(--ink-3); margin-bottom: 14px; }
|
||
.ins-stats { display: flex; justify-content: center; gap: 20px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
|
||
.ins-stats div { font-size: 11.5px; color: var(--ink-3); }
|
||
.ins-stats b { display: block; font-size: 15px; color: var(--ink); font-family: var(--font-num); margin-bottom: 2px; }
|
||
|
||
/* — how it works — */
|
||
.how {
|
||
background: linear-gradient(150deg, oklch(0.97 0.02 40), oklch(0.96 0.02 250));
|
||
border-radius: 24px;
|
||
padding: 56px 32px;
|
||
}
|
||
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
|
||
.how-step { text-align: center; }
|
||
.how-num {
|
||
width: 48px; height: 48px;
|
||
border-radius: 14px;
|
||
background: var(--accent);
|
||
color: white;
|
||
display: grid; place-items: center;
|
||
font-size: 18px; font-weight: 700; font-family: var(--font-num);
|
||
margin: 0 auto 16px;
|
||
box-shadow: 0 6px 16px oklch(0.72 0.14 40 / .35);
|
||
}
|
||
.how-step h3 { font-size: 18px; margin: 0 0 8px; }
|
||
.how-step p { font-size: 13.5px; color: var(--ink-2); line-height: 1.7; max-width: 280px; margin: 0 auto; }
|
||
|
||
/* — testimonials — */
|
||
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
|
||
.quote-card {
|
||
background: var(--surface);
|
||
border: 1px solid var(--line);
|
||
border-radius: 14px;
|
||
padding: 24px;
|
||
}
|
||
.quote-card .stars { display: flex; gap: 1px; margin-bottom: 12px; color: oklch(0.74 0.13 70); }
|
||
.quote-card p { font-size: 14px; line-height: 1.75; color: var(--ink-2); margin: 0 0 18px; }
|
||
.quote-by { display: flex; align-items: center; gap: 10px; }
|
||
.quote-by .name { font-size: 13.5px; font-weight: 600; }
|
||
.quote-by .role { font-size: 11.5px; color: var(--ink-3); }
|
||
|
||
/* — for teachers — */
|
||
.for-t {
|
||
background: var(--ink);
|
||
color: white;
|
||
border-radius: 24px;
|
||
padding: 56px 48px;
|
||
display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center;
|
||
position: relative; overflow: hidden;
|
||
}
|
||
.for-t::before {
|
||
content: ""; position: absolute; inset: -50% -20% auto auto; width: 600px; height: 600px;
|
||
background: radial-gradient(circle, oklch(0.72 0.14 40 / .4), transparent 70%);
|
||
filter: blur(60px);
|
||
}
|
||
.for-t > * { position: relative; z-index: 1; }
|
||
.for-t h2 { font-size: 38px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 16px; }
|
||
.for-t p { font-size: 16px; color: oklch(0.85 0.02 80); line-height: 1.7; margin: 0 0 24px; max-width: 460px; }
|
||
.for-t-stats { display: flex; gap: 28px; margin-top: 32px; }
|
||
.for-t-stats div b { display: block; font-size: 28px; font-family: var(--font-num); font-weight: 700; letter-spacing: -0.02em; }
|
||
.for-t-stats div span { font-size: 12px; color: oklch(0.75 0.02 80); }
|
||
|
||
.ft-vis {
|
||
background: rgba(255,255,255,.06);
|
||
border: 1px solid rgba(255,255,255,.12);
|
||
border-radius: 18px;
|
||
padding: 24px;
|
||
display: flex; flex-direction: column; gap: 14px;
|
||
}
|
||
.ft-row {
|
||
background: rgba(255,255,255,.05);
|
||
border-radius: 10px;
|
||
padding: 12px 14px;
|
||
display: flex; align-items: center; gap: 12px;
|
||
font-size: 13px;
|
||
}
|
||
.ft-row .ic-wrap {
|
||
width: 32px; height: 32px; border-radius: 8px;
|
||
background: rgba(255,255,255,.1); color: var(--accent);
|
||
display: grid; place-items: center;
|
||
}
|
||
|
||
/* — faq — */
|
||
.faq-list { max-width: 760px; margin: 0 auto; }
|
||
.faq-item {
|
||
border-bottom: 1px solid var(--line);
|
||
padding: 18px 0;
|
||
}
|
||
.faq-q { display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-size: 15.5px; font-weight: 600; }
|
||
.faq-a { font-size: 13.5px; color: var(--ink-2); line-height: 1.8; padding-top: 10px; }
|
||
|
||
/* — final cta — */
|
||
.final-cta {
|
||
text-align: center;
|
||
padding: 72px 24px;
|
||
}
|
||
.final-cta h2 { font-size: 42px; letter-spacing: -0.02em; margin: 0 0 16px; }
|
||
.final-cta p { font-size: 17px; color: var(--ink-2); margin: 0 0 28px; }
|
||
.final-cta .btn { padding: 14px 28px; font-size: 15px; font-weight: 600; }
|
||
|
||
/* — footer — */
|
||
footer.f {
|
||
background: var(--surface-2);
|
||
border-top: 1px solid var(--line-soft);
|
||
}
|
||
.f-inner {
|
||
max-width: var(--max-w);
|
||
margin: 0 auto;
|
||
padding: 48px 24px 24px;
|
||
display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px;
|
||
}
|
||
.f-col h4 { font-size: 13px; font-weight: 600; color: var(--ink-3); margin: 0 0 14px; text-transform: uppercase; letter-spacing: 0.05em; }
|
||
.f-col a { display: block; font-size: 13.5px; color: var(--ink-2); padding: 5px 0; cursor: pointer; }
|
||
.f-col a:hover { color: var(--ink); }
|
||
.f-bottom {
|
||
max-width: var(--max-w);
|
||
margin: 0 auto;
|
||
padding: 20px 24px;
|
||
border-top: 1px solid var(--line-soft);
|
||
display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
|
||
font-size: 12.5px; color: var(--ink-3);
|
||
}
|
||
|
||
@media (max-width: 900px) {
|
||
.hero { grid-template-columns: 1fr; padding: 48px 20px; }
|
||
.hero h1 { font-size: 38px; }
|
||
.hero-visual { display: none; }
|
||
.courses-grid, .ins-grid, .cat-grid { grid-template-columns: repeat(2, 1fr); }
|
||
.how-grid, .quote-grid { grid-template-columns: 1fr; }
|
||
.for-t { grid-template-columns: 1fr; padding: 36px 24px; }
|
||
.nav-links { display: none; }
|
||
.f-inner { grid-template-columns: 1fr 1fr; }
|
||
}
|
||
</style>
|
||
|
||
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
|
||
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
|
||
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
|
||
</head>
|
||
<body>
|
||
<div id="root"></div>
|
||
<script type="text/babel" src="icons.jsx"></script>
|
||
<script type="text/babel" src="student-data.jsx"></script>
|
||
<script type="text/babel">
|
||
const fa = (s) => String(s).replace(/\d/g, d => '۰۱۲۳۴۵۶۷۸۹'[d]);
|
||
|
||
const CATEGORIES_HOMEPAGE = [
|
||
{ id: 'des', fa: 'طراحی', icon: 'edit', count: 48, color: 'oklch(0.78 0.12 40)' },
|
||
{ id: 'dev', fa: 'برنامهنویسی', icon: 'file', count: 72, color: 'oklch(0.74 0.12 145)' },
|
||
{ id: 'mkt', fa: 'بازاریابی', icon: 'megaphone', count: 36, color: 'oklch(0.74 0.12 80)' },
|
||
{ id: 'biz', fa: 'کسبوکار', icon: 'chart', count: 28, color: 'oklch(0.74 0.12 250)' },
|
||
{ id: 'pho', fa: 'عکاسی', icon: 'eye', count: 22, color: 'oklch(0.74 0.12 320)' },
|
||
{ id: 'lang', fa: 'زبان', icon: 'globe', count: 18, color: 'oklch(0.74 0.12 200)' },
|
||
];
|
||
|
||
const TESTIMONIALS = [
|
||
{ name: 'سارا محمدی', role: 'دانشجوی طراحی', initials: 'سم', color: 'oklch(0.72 0.10 30)', text: 'بعد از سه ماه یادگیری توی ایلو، الان بهعنوان طراح UI استخدام شدم. کیفیت مدرسها واقعاً بالاست.' },
|
||
{ name: 'محمد رضایی', role: 'دانشجوی برنامهنویسی', initials: 'مر', color: 'oklch(0.72 0.10 200)', text: 'دوره پایتون رامین صدر بهترین دورهای بود که شرکت کردم. مفاهیم سخت رو خیلی ساده توضیح میده.' },
|
||
{ name: 'نگار حسینی', role: 'مدرس بازاریابی', initials: 'نح', color: 'oklch(0.72 0.10 320)', text: 'بهعنوان مدرس، ابزارهای ایلو خیلی به ساخت و فروش دوره کمک کرد. درآمدم در ۶ ماه دوبرابر شد.' },
|
||
];
|
||
|
||
const FAQS = [
|
||
{ q: 'برای ثبتنام در ایلو نیاز به چه چیزی دارم؟', a: 'فقط یک شماره موبایل کافی است. با وارد کردن شماره، یک کد تأیید برای شما ارسال میشود و در کمتر از ۱ دقیقه ثبتنامتان تکمیل میشود.' },
|
||
{ q: 'چگونه میتوانم بهعنوان مدرس در ایلو فعالیت کنم؟', a: 'هنگام ثبتنام نقش «مدرس» را انتخاب کنید. سپس به پنل مدرس دسترسی پیدا میکنید که در آن میتوانید دوره بسازید، محتوا آپلود کنید و دانشجو جذب کنید.' },
|
||
{ q: 'پرداخت در ایلو چطور انجام میشود؟', a: 'پرداخت از طریق درگاههای امن بانکی ایرانی (زرینپال، آیدیپی، سامان) انجام میشود. میتوانید با کارت بانکی، کیف پول یا اقساط خرید کنید.' },
|
||
{ q: 'پس از خرید دوره، تا چه مدت به آن دسترسی دارم؟', a: 'دسترسی به دورهها مادامالعمر است. میتوانید در هر زمان و از هر دستگاهی به محتوا دسترسی داشته باشید و آپدیتها هم رایگان به شما میرسد.' },
|
||
{ q: 'آیا گواهی پایان دوره ارائه میشود؟', a: 'بله. پس از تکمیل ۱۰۰٪ یک دوره و قبولی در آزمون پایانی، گواهی دیجیتال با امضای مدرس بهصورت رایگان دریافت میکنید.' },
|
||
];
|
||
|
||
function App() {
|
||
const { CATALOG, FEATURED_INSTRUCTORS } = window.STUDENT_DATA;
|
||
const [openFaq, setOpenFaq] = React.useState(0);
|
||
|
||
return (
|
||
<>
|
||
{/* — top nav — */}
|
||
<nav className="nav">
|
||
<div className="nav-inner">
|
||
<a className="nav-brand" href="Ilo Landing.html" style={{ textDecoration: 'none', color: 'inherit' }}>
|
||
<div className="nav-mark">il</div>
|
||
ایلو
|
||
</a>
|
||
<div className="nav-links">
|
||
<a className="nav-link">دورهها</a>
|
||
<a className="nav-link">مدرسها</a>
|
||
<a className="nav-link">برای کسبوکارها</a>
|
||
<a className="nav-link">وبلاگ</a>
|
||
</div>
|
||
<div className="nav-cta">
|
||
<a className="btn sm" href="Ilo Auth.html" style={{ textDecoration: 'none' }}>ورود</a>
|
||
<a className="btn primary sm" href="Ilo Auth.html" style={{ textDecoration: 'none' }}>ثبتنام رایگان</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
{/* — hero — */}
|
||
<header className="hero">
|
||
<div>
|
||
<span className="eyebrow">
|
||
<Icon name="flame" className="ic-sm" /> +۲٬۰۰۰ دانشجوی فعال این هفته
|
||
</span>
|
||
<h1>یاد بگیر از <em>بهترین مدرسها</em>،<br/>هر جا که هستی.</h1>
|
||
<p>ایلو پلتفرم یادگیری آنلاین فارسیزبانه. صدها دوره از مدرسهای متخصص — از طراحی و کدنویسی گرفته تا کسبوکار و عکاسی.</p>
|
||
<div className="hero-search">
|
||
<Icon name="search" style={{ marginInlineStart: 8, color: 'var(--ink-3)' }} />
|
||
<input placeholder="چی میخوای یاد بگیری؟" />
|
||
<a className="btn primary" href="Ilo Course Page.html" style={{ textDecoration: 'none' }}>جستجو</a>
|
||
</div>
|
||
<div className="hero-trust">
|
||
<span><b>۲۴۰+</b> دوره</span>
|
||
<span><b>۸۰+</b> مدرس متخصص</span>
|
||
<span><b>۱۲۰هزار</b> دانشجو</span>
|
||
<span><b>۴.۸</b> ⭐ میانگین رضایت</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="hero-visual">
|
||
<div className="hero-cards">
|
||
<div className="hv-card">
|
||
<div className="swatch" style={{ background: 'oklch(0.78 0.12 40)' }} />
|
||
<div className="ttl">طراحی رابط کاربری</div>
|
||
<div className="meta">آرش پاکدل</div>
|
||
<div className="row"><span>⭐ ۴.۹</span><span>·</span><span className="num">۱۲۸۴ دانشجو</span></div>
|
||
</div>
|
||
<div className="hv-card">
|
||
<div className="swatch" style={{ background: 'oklch(0.74 0.12 145)' }} />
|
||
<div className="ttl">پایتون از صفر</div>
|
||
<div className="meta">رامین صدر</div>
|
||
<div className="row"><span>⭐ ۴.۹</span><span>·</span><span className="num">۲۱۰۴ دانشجو</span></div>
|
||
</div>
|
||
<div className="hv-card">
|
||
<div className="swatch" style={{ background: 'oklch(0.74 0.12 80)' }} />
|
||
<div className="ttl">سئو و بازاریابی</div>
|
||
<div className="meta">ندا فرهادی</div>
|
||
<div className="row"><span>⭐ ۴.۸</span><span>·</span><span className="num">۶۳۴ دانشجو</span></div>
|
||
</div>
|
||
<div className="hv-card">
|
||
<div className="swatch" style={{ background: 'oklch(0.74 0.12 320)' }} />
|
||
<div className="ttl">عکاسی موبایل</div>
|
||
<div className="meta">سارا کاویانی</div>
|
||
<div className="row"><span>⭐ ۴.۷</span><span>·</span><span className="num">۳۱۲ دانشجو</span></div>
|
||
</div>
|
||
</div>
|
||
<div className="hv-float f1">
|
||
<div style={{ width: 28, height: 28, borderRadius: 8, background: 'var(--accent-soft)', color: 'var(--accent)', display: 'grid', placeItems: 'center' }}>
|
||
<Icon name="cert" className="ic-sm" />
|
||
</div>
|
||
<div>
|
||
<div style={{ fontWeight: 600 }}>گواهی پایان دوره</div>
|
||
<div style={{ color: 'var(--ink-3)', fontSize: 11 }}>دیجیتال + رایگان</div>
|
||
</div>
|
||
</div>
|
||
<div className="hv-float f2">
|
||
<Icon name="trend" className="ic-sm" style={{ color: 'oklch(0.62 0.14 155)' }} />
|
||
<div>
|
||
<div style={{ fontWeight: 600 }}>+ ۱٬۲۸۰ این هفته</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
{/* — categories — */}
|
||
<section className="s">
|
||
<div className="s-h">
|
||
<h2>هر چی بخوای، یاد میگیری</h2>
|
||
<p>دستهبندیهای متنوع از پرتقاضاترین مهارتهای امروز</p>
|
||
</div>
|
||
<div className="cat-grid">
|
||
{CATEGORIES_HOMEPAGE.map(c => (
|
||
<a key={c.id} className="cat-tile" href="Ilo Course Page.html" style={{ textDecoration: 'none', color: 'inherit' }}>
|
||
<div className="cat-ic" style={{ background: c.color, color: 'white' }}>
|
||
<Icon name={c.icon} />
|
||
</div>
|
||
<div className="name">{c.fa}</div>
|
||
<div className="cnt num">{fa(c.count)} دوره</div>
|
||
</a>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
{/* — popular courses — */}
|
||
<section className="s">
|
||
<div className="s-h">
|
||
<span className="eyebrow"><Icon name="trend" className="ic-sm" /> پرفروشترینها</span>
|
||
<h2>دورههایی که همه میخواهند</h2>
|
||
<p>محبوبترین دورهها در ۳۰ روز گذشته</p>
|
||
</div>
|
||
<div className="courses-grid">
|
||
{CATALOG.slice(0, 4).map(c => (
|
||
<a key={c.id} className="lc" href="Ilo Course Page.html" style={{ textDecoration: 'none', color: 'inherit' }}>
|
||
<div className="lc-img" style={{ background: c.color }}>
|
||
<div className="play"><Icon name="play" /></div>
|
||
{c.badge && <span className="badge">{c.badge}</span>}
|
||
</div>
|
||
<div className="lc-body">
|
||
<div className="lc-cat">{c.cat} · {c.level}</div>
|
||
<div className="lc-ttl">{c.title}</div>
|
||
<div className="lc-by">{c.instructor}</div>
|
||
<div className="lc-meta">
|
||
{c.rating && (<>
|
||
<Icon name="star" className="ic-sm" style={{ color: 'oklch(0.74 0.13 70)' }} />
|
||
<b>{fa(c.rating)}</b>
|
||
<span>({fa(c.reviews)})</span>
|
||
</>)}
|
||
<span style={{ marginInlineStart: 'auto' }}><Icon name="clock" className="ic-sm" /> <b>{fa(c.hours)}</b> ساعت</span>
|
||
</div>
|
||
</div>
|
||
<div className="lc-foot">
|
||
<span className="price">{c.price}</span>
|
||
<span style={{ fontSize: 11, color: 'var(--ink-3)' }}>تومان</span>
|
||
{c.oldPrice && <span className="old">{c.oldPrice}</span>}
|
||
</div>
|
||
</a>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
{/* — instructors — */}
|
||
<section className="s">
|
||
<div className="s-h">
|
||
<h2>از بهترینها یاد بگیر</h2>
|
||
<p>متخصصهایی که سالها در صنعت کار کردهاند</p>
|
||
</div>
|
||
<div className="ins-grid">
|
||
{FEATURED_INSTRUCTORS.map(i => (
|
||
<div key={i.id} className="ins-card">
|
||
<div className="ins-av" style={{ background: i.color }}>{i.initials}</div>
|
||
<h3>{i.name}</h3>
|
||
<div className="topic">{i.topic}</div>
|
||
<div className="ins-stats">
|
||
<div><b className="num">{fa(i.rating)}</b><span>امتیاز</span></div>
|
||
<div><b className="num">{fa(i.students)}</b><span>دانشجو</span></div>
|
||
<div><b className="num">{fa(i.courses)}</b><span>دوره</span></div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
{/* — how it works — */}
|
||
<section className="s">
|
||
<div className="how">
|
||
<div className="s-h">
|
||
<h2>در ۳ قدم یادگیری رو شروع کن</h2>
|
||
<p>از ثبتنام تا اولین درس، فقط چند دقیقه</p>
|
||
</div>
|
||
<div className="how-grid">
|
||
<div className="how-step">
|
||
<div className="how-num">۱</div>
|
||
<h3>ثبتنام رایگان</h3>
|
||
<p>فقط با شماره موبایل، در کمتر از یک دقیقه عضو ایلو شو.</p>
|
||
</div>
|
||
<div className="how-step">
|
||
<div className="how-num">۲</div>
|
||
<h3>دورهات رو پیدا کن</h3>
|
||
<p>از بین صدها دوره، مهارتی که میخواهی یاد بگیری رو انتخاب کن.</p>
|
||
</div>
|
||
<div className="how-step">
|
||
<div className="how-num">۳</div>
|
||
<h3>یاد بگیر و رشد کن</h3>
|
||
<p>هر کجا، هر زمان، با گوشی یا لپتاپ — یادگیری در دستان توست.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* — testimonials — */}
|
||
<section className="s">
|
||
<div className="s-h">
|
||
<span className="eyebrow"><Icon name="star" className="ic-sm" /> ۴.۸ از ۵</span>
|
||
<h2>چی میگن دانشجوهامون؟</h2>
|
||
</div>
|
||
<div className="quote-grid">
|
||
{TESTIMONIALS.map((t, i) => (
|
||
<div key={i} className="quote-card">
|
||
<div className="stars">
|
||
{[1,2,3,4,5].map(n => <Icon key={n} name="star" className="ic-sm" style={{ fill: 'oklch(0.78 0.13 70)' }} />)}
|
||
</div>
|
||
<p>«{t.text}»</p>
|
||
<div className="quote-by">
|
||
<div className="av" style={{ background: t.color }}>{t.initials}</div>
|
||
<div>
|
||
<div className="name">{t.name}</div>
|
||
<div className="role">{t.role}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
{/* — for teachers — */}
|
||
<section className="s">
|
||
<div className="for-t">
|
||
<div>
|
||
<span className="eyebrow" style={{ background: 'rgba(255,255,255,.1)', color: 'oklch(0.85 0.05 40)' }}>
|
||
<Icon name="trophy" className="ic-sm" /> برای مدرسها
|
||
</span>
|
||
<h2>دانشت رو به درآمد تبدیل کن</h2>
|
||
<p>اگر در حوزهای متخصص هستی، میتونی دوره بسازی، دانشجو جذب کنی و درآمد پایدار بسازی. ما همهی ابزارهای فنی رو در اختیارت میذاریم.</p>
|
||
<a className="btn primary" href="Ilo Auth.html" style={{ textDecoration: 'none' }}>
|
||
مدرس شو
|
||
<Icon name="chevron" className="ic-sm flipx" />
|
||
</a>
|
||
<div className="for-t-stats">
|
||
<div><b className="num">۸۰+</b><span>مدرس فعال</span></div>
|
||
<div><b className="num">۲.۴ میلیارد</b><span>درآمد ماهانه مدرسها</span></div>
|
||
<div><b className="num">۷۰٪</b><span>سهم مدرس از فروش</span></div>
|
||
</div>
|
||
</div>
|
||
<div className="ft-vis">
|
||
<div className="ft-row"><div className="ic-wrap"><Icon name="upload" className="ic-sm" /></div><div>آپلود راحت ویدیو، PDF و فایل صوتی</div></div>
|
||
<div className="ft-row"><div className="ic-wrap"><Icon name="users" className="ic-sm" /></div><div>پیگیری پیشرفت و تعامل با دانشجوها</div></div>
|
||
<div className="ft-row"><div className="ic-wrap"><Icon name="store" className="ic-sm" /></div><div>صفحه فروش اختصاصی برای هر دوره</div></div>
|
||
<div className="ft-row"><div className="ic-wrap"><Icon name="chart" className="ic-sm" /></div><div>تحلیل درآمد و رفتار دانشجویان</div></div>
|
||
<div className="ft-row"><div className="ic-wrap"><Icon name="link" className="ic-sm" /></div><div>لینک اشتراکگذاری برای فروش مستقیم</div></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* — faq — */}
|
||
<section className="s">
|
||
<div className="s-h">
|
||
<h2>سؤالات پرتکرار</h2>
|
||
</div>
|
||
<div className="faq-list">
|
||
{FAQS.map((f, i) => (
|
||
<div key={i} className="faq-item">
|
||
<div className="faq-q" onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>
|
||
<span>{f.q}</span>
|
||
<Icon name={openFaq === i ? 'chevron' : 'plus'} className="ic-sm" style={{ transform: openFaq === i ? 'rotate(90deg)' : 'none', transition: 'transform .2s' }} />
|
||
</div>
|
||
{openFaq === i && <div className="faq-a">{f.a}</div>}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</section>
|
||
|
||
{/* — final cta — */}
|
||
<section className="final-cta">
|
||
<h2>آمادهای شروع کنی؟</h2>
|
||
<p>هزاران نفر در ایلو یاد میگیرند. تو هم بپیوند.</p>
|
||
<a className="btn primary" href="Ilo Auth.html" style={{ textDecoration: 'none' }}>
|
||
ثبتنام رایگان
|
||
<Icon name="chevron" className="ic-sm flipx" />
|
||
</a>
|
||
</section>
|
||
|
||
{/* — footer — */}
|
||
<footer className="f">
|
||
<div className="f-inner">
|
||
<div className="f-col">
|
||
<div className="nav-brand" style={{ marginBottom: 16 }}>
|
||
<div className="nav-mark">il</div>
|
||
ایلو
|
||
</div>
|
||
<p style={{ fontSize: 13.5, color: 'var(--ink-2)', lineHeight: 1.7, margin: 0, maxWidth: 320 }}>
|
||
پلتفرم یادگیری آنلاین برای فارسیزبانها — صدها دوره از بهترین مدرسها.
|
||
</p>
|
||
</div>
|
||
<div className="f-col">
|
||
<h4>محصول</h4>
|
||
<a>دورهها</a><a>مدرسها</a><a>گواهینامهها</a><a>برای کسبوکار</a>
|
||
</div>
|
||
<div className="f-col">
|
||
<h4>شرکت</h4>
|
||
<a>درباره ما</a><a>وبلاگ</a><a>تماس با ما</a><a>فرصتهای شغلی</a>
|
||
</div>
|
||
<div className="f-col">
|
||
<h4>پشتیبانی</h4>
|
||
<a>راهنما</a><a>قوانین استفاده</a><a>حریم خصوصی</a><a>گزارش مشکل</a>
|
||
</div>
|
||
</div>
|
||
<div className="f-bottom">
|
||
<span>© ۱۴۰۳ ایلو. تمامی حقوق محفوظ است.</span>
|
||
<span className="num" dir="ltr">support@ilo.ir · 021-91000000</span>
|
||
</div>
|
||
</footer>
|
||
</>
|
||
);
|
||
}
|
||
|
||
ReactDOM.createRoot(document.getElementById('root')).render(<App />);
|
||
</script>
|
||
</body>
|
||
</html>
|