ساخت لندینگ پیج حرفه ای المنتوری

<!--
  Hero Section — WebGL Shader Animation
  برای استفاده در المنتور: کپی کل این کد در ویجت HTML
  متن‌ها و لینک‌ها رو پایین فایل تغییر بده
-->
<style>
  /* ── Reset & Container ── */
  .wgl-hero-wrap * { margin:0; padding:0; box-sizing:border-box; }

  .wgl-hero-wrap {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 520px;
    overflow: hidden;
    background: #000;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif;
    direction: ltr;
  }

  /* ── Canvas ── */
  .wgl-hero-wrap canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
  }

  /* ── Content Overlay ── */
  .wgl-hero-content {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 20px;
    text-align: center;
  }


  /* ── Headings ── */
  .wgl-headline {
    margin-bottom: 24px;
  }
  .wgl-h1-line {
    display: block;
    font-size: clamp(2.8rem, 8vw, 7rem);
    font-weight: 800;
    line-height: 1.1;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0;
    animation: wglFadeUp .8s ease-out forwards;
  }
  .wgl-h1-line.line1 {
    background-image: linear-gradient(to right, #fdba74, #facc15, #fcd34d);
    animation-delay: .2s;
  }
  .wgl-h1-line.line2 {
    background-image: linear-gradient(to right, #fde68a, #fb923c, #f87171);
    animation-delay: .4s;
  }

  /* ── Subtitle ── */
  .wgl-subtitle {
    max-width: 720px;
    margin: 0 auto 40px;
    font-size: clamp(1rem, 2.2vw, 1.35rem);
    font-weight: 300;
    line-height: 1.7;
    color: rgba(255,237,213,.9);
    opacity: 0;
    animation: wglFadeUp .8s ease-out forwards;
    animation-delay: .6s;
  }

  /* ── Buttons ── */
  .wgl-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    opacity: 0;
    animation: wglFadeUp .8s ease-out forwards;
    animation-delay: .8s;
  }
  .wgl-btn {
    display: inline-block;
    padding: 16px 32px;
    border-radius: 9999px;
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform .3s, box-shadow .3s, background .3s, border-color .3s;
    border: none;
    outline: none;
  }
  .wgl-btn:hover { transform: scale(1.05); }
  .wgl-btn-primary {
    background: linear-gradient(to right, #f97316, #eab308);
    color: #000;
    box-shadow: 0 0 0 transparent;
  }
  .wgl-btn-primary:hover {
    box-shadow: 0 8px 30px rgba(249,115,22,.35);
  }
  .wgl-btn-secondary {
    background: rgba(234,88,12,.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(253,186,116,.3);
    color: #ffedd5;
  }
  .wgl-btn-secondary:hover {
    background: rgba(234,88,12,.2);
    border-color: rgba(253,186,116,.5);
  }

  /* ── Keyframes ── */
  @keyframes wglFadeDown {
    from { opacity:0; transform:translateY(-20px); }
    to   { opacity:1; transform:translateY(0); }
  }
  @keyframes wglFadeUp {
    from { opacity:0; transform:translateY(30px); }
    to   { opacity:1; transform:translateY(0); }
  }

  /* ── Responsive ── */
  @media (max-width:768px) {
    .wgl-hero-wrap { min-height: 100svh; }
    .wgl-badge { font-size: 12px; padding: 8px 18px; margin-bottom: 24px; }
    .wgl-subtitle { font-size: 1rem; margin-bottom: 32px; }
    .wgl-btn { padding: 14px 28px; font-size: .95rem; }
    .wgl-btns { flex-direction: column; align-items: center; }
  }
</style>

<div class="wgl-hero-wrap">
  <canvas id="wglHeroCanvas"></canvas>

  <div class="wgl-hero-content">
    <!-- Badge -->
    <div class="wgl-badge">
      <span class="wgl-badge-icon"></span>
      <span></span>
    </div>
  </div>

<script>
(function(){
  /* ── Shader Source ── */
  var VERT = '#version 300 es\nprecision highp float;\nin vec4 position;\nvoid main(){gl_Position=position;}';

  var FRAG = [
    '#version 300 es',
    'precision highp float;',
    'out vec4 O;',
    'uniform vec2 resolution;',
    'uniform float time;',
    '#define FC gl_FragCoord.xy',
    '#define T time',
    '#define R resolution',
    '#define MN min(R.x,R.y)',
    'float rnd(vec2 p){p=fract(p*vec2(12.9898,78.233));p+=dot(p,p+34.56);return fract(p.x*p.y);}',
    'float noise(in vec2 p){vec2 i=floor(p),f=fract(p),u=f*f*(3.-2.*f);float a=rnd(i),b=rnd(i+vec2(1,0)),c=rnd(i+vec2(0,1)),d=rnd(i+1.);return mix(mix(a,b,u.x),mix(c,d,u.x),u.y);}',
    'float fbm(vec2 p){float t=.0,a=1.;mat2 m=mat2(1.,-.5,.2,1.2);for(int i=0;i<5;i++){t+=a*noise(p);p*=2.*m;a*=.5;}return t;}',
    'float clouds(vec2 p){float d=1.,t=.0;for(float i=.0;i<3.;i++){float a=d*fbm(i*10.+p.x*.2+.2*(1.+i)*p.y+d+i*i+p);t=mix(t,d,a);d=a;p*=2./(i+1.);}return t;}',
    'void main(void){',
    '  vec2 uv=(FC-.5*R)/MN,st=uv*vec2(2,1);',
    '  vec3 col=vec3(0);',
    '  float bg=clouds(vec2(st.x+T*.5,-st.y));',
    '  uv*=1.-.3*(sin(T*.2)*.5+.5);',
    '  for(float i=1.;i<12.;i++){',
    '    uv+=.1*cos(i*vec2(.1+.01*i,.8)+i*i+T*.5+.1*uv.x);',
    '    vec2 p=uv;',
    '    float d=length(p);',
    '    col+=.00125/d*(cos(sin(i)*vec3(1,2,3))+1.);',
    '    float b=noise(i+p+bg*1.731);',
    '    col+=.002*b/length(max(p,vec2(b*p.x*.02,p.y)));',
    '    col=mix(col,vec3(bg*.25,bg*.137,bg*.05),d);',
    '  }',
    '  O=vec4(col,1);',
    '}'
  ].join('\n');

  /* ── WebGL Setup ── */
  var canvas = document.getElementById('wglHeroCanvas');
  if (!canvas) return;
  var gl = canvas.getContext('webgl2');
  if (!gl) return;          // fallback: CSS background stays black

  var dpr, program, tLoc, rLoc, raf;

  function compile(type, src) {
    var s = gl.createShader(type);
    gl.shaderSource(s, src);
    gl.compileShader(s);
    if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
      console.warn('Shader error:', gl.getShaderInfoLog(s));
    return s;
  }

  function init() {
    var vs = compile(gl.VERTEX_SHADER, VERT);
    var fs = compile(gl.FRAGMENT_SHADER, FRAG);
    program = gl.createProgram();
    gl.attachShader(program, vs);
    gl.attachShader(program, fs);
    gl.linkProgram(program);

    var buf = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buf);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,1,-1,-1,1,1,1,-1]), gl.STATIC_DRAW);
    var pos = gl.getAttribLocation(program, 'position');
    gl.enableVertexAttribArray(pos);
    gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);

    rLoc = gl.getUniformLocation(program, 'resolution');
    tLoc = gl.getUniformLocation(program, 'time');
  }

  function resize() {
    dpr = Math.max(1, .5 * window.devicePixelRatio);
    canvas.width  = canvas.clientWidth  * dpr;
    canvas.height = canvas.clientHeight * dpr;
    gl.viewport(0, 0, canvas.width, canvas.height);
  }

  function loop(now) {
    gl.clearColor(0,0,0,1);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.useProgram(program);
    gl.uniform2f(rLoc, canvas.width, canvas.height);
    gl.uniform1f(tLoc, now * 1e-3);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    raf = requestAnimationFrame(loop);
  }

  init();
  resize();
  window.addEventListener('resize', resize);
  raf = requestAnimationFrame(loop);
})();
</script>

<!--
  Hero Section — Galaxy + Meteors WebGL Shader
  تم کهکشانی با شهاب‌سنگ‌های متحرک
  کپی کل این کد در ویجت HTML المنتور
-->
<style>
  .wgl-hero-wrap * { margin:0; padding:0; box-sizing:border-box; }
  .wgl-hero-wrap {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 520px;
    overflow: hidden;
    background: #030712;
  }
  .wgl-hero-wrap canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
  }
  @media (max-width:768px) {
    .wgl-hero-wrap { min-height: 100svh; }
  }
</style>

<div class="wgl-hero-wrap">
  <canvas id="wglHeroCanvas"></canvas>
</div>

<script>
(function(){
  var VERT = '#version 300 es\nprecision highp float;\nin vec4 position;\nvoid main(){gl_Position=position;}';

  var FRAG = `#version 300 es
precision highp float;
out vec4 O;
uniform vec2 resolution;
uniform float time;

#define FC gl_FragCoord.xy
#define T time
#define R resolution
#define MN min(R.x,R.y)

// ── Noise ──
float rnd(vec2 p){
  p=fract(p*vec2(12.9898,78.233));
  p+=dot(p,p+34.56);
  return fract(p.x*p.y);
}
float noise(in vec2 p){
  vec2 i=floor(p),f=fract(p),u=f*f*(3.-2.*f);
  float a=rnd(i),b=rnd(i+vec2(1,0)),c=rnd(i+vec2(0,1)),d=rnd(i+1.);
  return mix(mix(a,b,u.x),mix(c,d,u.x),u.y);
}
float fbm(vec2 p){
  float t=.0,a=1.;
  mat2 m=mat2(1.,-.5,.2,1.2);
  for(int i=0;i<6;i++){
    t+=a*noise(p);
    p*=2.*m;
    a*=.5;
  }
  return t;
}
float clouds(vec2 p){
  float d=1.,t=.0;
  for(float i=.0;i<3.;i++){
    float a=d*fbm(i*10.+p.x*.2+.2*(1.+i)*p.y+d+i*i+p);
    t=mix(t,d,a);
    d=a;
    p*=2./(i+1.);
  }
  return t;
}

// ── Stars ──
float hash21(vec2 p){ return fract(sin(dot(p,vec2(27.609,57.583)))*43758.5453); }
float stars(vec2 uv, float density, float brightness){
  float s=0.;
  for(float i=0.;i<4.;i++){
    vec2 grid=uv*(100.+i*70.);
    vec2 id=floor(grid);
    vec2 gv=fract(grid)-.5;
    float n=hash21(id+i*100.);
    float size=.012+.008*n;
    float star=smoothstep(size,0.,length(gv-vec2(n-.5,hash21(id+50.)-.5)));
    star*=.5+.5*sin(T*(1.+n*4.)+n*62.83);
    s+=star*brightness*step(.6-density*.2,n);
  }
  return s;
}

void main(void){
  vec2 uv=(FC-.5*R)/MN, st=uv*vec2(2,1);
  vec3 col=vec3(0);

  // ── Nebula clouds (galaxy palette) ──
  float bg=clouds(vec2(st.x+T*.5,-st.y));

  // ── Meteor streaks (original structure) ──
  uv*=1.-.3*(sin(T*.2)*.5+.5);
  for(float i=1.;i<12.;i++){
    uv+=.1*cos(i*vec2(.1+.01*i,.8)+i*i+T*.5+.1*uv.x);
    vec2 p=uv;
    float d=length(p);

    // cyan / turquoise core glow
    col+=.00125/d*(cos(sin(i)*vec3(2.2,3.5,4.))+1.);

    float b=noise(i+p+bg*1.731);
    col+=.002*b/length(max(p,vec2(b*p.x*.02,p.y)));

    // galaxy nebula tint instead of orange/amber
    vec3 nebulaCol=mix(
      vec3(bg*.04, bg*.08, bg*.28),   // deep blue base
      vec3(bg*.02, bg*.22, bg*.25),    // teal/cyan mid
      sin(i*.5)*.5+.5
    );
    // purple edges
    nebulaCol+=vec3(bg*.12, bg*.02, bg*.18)*smoothstep(.3,.8,bg);
    col=mix(col, nebulaCol, d);
  }

  // ── Boost cyan/purple channels ──
  col.b+=.015*bg;
  col.r+=.008*bg*bg;

  // ── Stars overlay ──
  vec2 suv=(FC-.5*R)/MN;
  float s=stars(suv,.5,1.);
  s+=stars(suv*.7+vec2(100.),.3,.6);
  col+=vec3(.75,.88,1.)*s;

  // bright accent stars
  col+=vec3(.2,1.,.95)*stars(suv*1.3+vec2(200.),.06,1.8)*.5;
  col+=vec3(.7,.4,1.)*stars(suv*.9+vec2(300.),.04,1.5)*.4;

  // ── Vignette ──
  float vig=1.-dot(suv*.55,suv*.55);
  col*=smoothstep(0.,.75,vig);

  // tone map
  col=col/(col+.7);
  col=pow(col,vec3(.93));

  O=vec4(col,1);
}`;

  var canvas = document.getElementById('wglHeroCanvas');
  if (!canvas) return;
  var gl = canvas.getContext('webgl2');
  if (!gl) return;

  var dpr, program, tLoc, rLoc, raf;

  function compile(type, src){
    var s = gl.createShader(type);
    gl.shaderSource(s, src);
    gl.compileShader(s);
    if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))
      console.warn('Shader err:', gl.getShaderInfoLog(s));
    return s;
  }

  function init(){
    var vs = compile(gl.VERTEX_SHADER, VERT);
    var fs = compile(gl.FRAGMENT_SHADER, FRAG);
    program = gl.createProgram();
    gl.attachShader(program, vs);
    gl.attachShader(program, fs);
    gl.linkProgram(program);
    if (!gl.getProgramParameter(program, gl.LINK_STATUS))
      console.warn('Link err:', gl.getProgramInfoLog(program));

    var buf = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buf);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,1,-1,-1,1,1,1,-1]), gl.STATIC_DRAW);
    var pos = gl.getAttribLocation(program, 'position');
    gl.enableVertexAttribArray(pos);
    gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
    rLoc = gl.getUniformLocation(program, 'resolution');
    tLoc = gl.getUniformLocation(program, 'time');
  }

  function resize(){
    dpr = Math.max(1, .5 * window.devicePixelRatio);
    canvas.width  = canvas.clientWidth  * dpr;
    canvas.height = canvas.clientHeight * dpr;
    gl.viewport(0, 0, canvas.width, canvas.height);
  }

  function loop(now){
    gl.clearColor(0.012,0.027,0.071,1);
    gl.clear(gl.COLOR_BUFFER_BIT);
    gl.useProgram(program);
    gl.uniform2f(rLoc, canvas.width, canvas.height);
    gl.uniform1f(tLoc, now * 1e-3);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
    raf = requestAnimationFrame(loop);
  }

  init();
  resize();
  window.addEventListener('resize', resize);
  raf = requestAnimationFrame(loop);
})();
</script>