چگونه یک صفحه فرود هوش مصنوعی سینمایی با GSAP، Canvas API و Next.js ساختم

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const symbols = [
  '∑', 'π', '∆', '∫', '√', 'Ω', 'λ', 'φ',
  '∞', 'θ', 'α', 'β', 'γ', 'δ', 'ε', 'ζ',
  '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'
];

const fontSize = 14;
const columns = Math.floor(canvas.width / fontSize);
const drops: number[] = new Array(columns).fill(1);

function drawRain() {
  // Fade effect — creates trail
  ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // Draw symbols
  ctx.fillStyle = '#14b575'; // brand green
  ctx.font = `${fontSize}px monospace`;

  drops.forEach((drop, i) => {
    const symbol = symbols[Math.floor(Math.random() * symbols.length)];
    const x = i * fontSize;
    const y = drop * fontSize;

    ctx.fillStyle = `rgba(20, 181, 117, ${Math.random() * 0.8 + 0.2})`;
    ctx.fillText(symbol, x, y);

    // Reset drop randomly
    if (y > canvas.height && Math.random() > 0.975) {
      drops[i] = 0;
    }
    drops[i]++;
  });
}

// Animate at 30fps
setInterval(drawRain, 33);

let mouseX = 0;
let mouseY = 0;

window.addEventListener('mousemove', (e) => {
  mouseX = e.clientX;
  mouseY = e.clientY;
});

// In drawRain function — add proximity effect
drops.forEach((drop, i) => {
  const x = i * fontSize;
  const y = drop * fontSize;

  const distance = Math.sqrt(
    Math.pow(x - mouseX, 2) + Math.pow(y - mouseY, 2)
  );

  // Symbols near cursor glow brighter
  const opacity = distance < 100 
    ? 1.0 
    : Math.random() * 0.8 + 0.2;

  ctx.fillStyle = `rgba(20, 181, 117, ${opacity})`;
  ctx.fillText(symbol, x, y);
});

.glass-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

// Fade up animation on scroll
gsap.fromTo('.feature-card', 
  { 
    opacity: 0, 
    y: 60 
  },
  {
    opacity: 1,
    y: 0,
    duration: 0.8,
    stagger: 0.15,
    ease: 'power3.out',
    scrollTrigger: {
      trigger: '.features-section',
      start: 'top 80%',
      end: 'bottom 20%',
    }
  }
);

export function Hero() {
  return (
    <section className="relative min-h-screen flex items-center">
      {/* Canvas background */}
      <canvas 
        ref={canvasRef}
        className="absolute inset-0 w-full h-full opacity-40"
      />

      {/* Gradient overlay */}
      <div className="absolute inset-0 bg-gradient-to-b 
        from-transparent via-black/20 to-black/80" 
      />

      {/* Content */}
      <div className="relative z-10 max-w-6xl mx-auto px-6">
        <div className="glass-card p-8 rounded-2xl max-w-2xl">
          <h1 className="text-5xl font-bold text-white mb-4">
            Build Smarter Workflows with AI
          h1>
          <p className="text-slate-300 text-lg mb-8">
            OG-AI helps teams automate repetitive tasks
          p>
          <button className="bg-brand-500 text-black 
            px-8 py-4 rounded-xl font-semibold">
            Get Started
          button>
        div>
      div>
    section>
  );
}

// src/config.ts
export const config = {
  brand: {
    name: "Your AI Product",
    tagline: "Build Smarter Workflows with AI",
    color: "#14b575",
  },
  hero: {
    title: "Build Smarter Workflows with AI",
    subtitle: "Automate tasks, generate content, unlock insights",
    cta: "Get Started Free",
  },
  nav: {
    links: ["Features", "How It Works", "Pricing", "Testimonials", "FAQ"],
  },
  pricing: {
    monthly: [
      { name: "Starter", price: 9, features: ["100 generations", "API access"] },
      { name: "Pro", price: 29, features: ["Unlimited", "Priority support"] },
    ]
  }
}