Our Story & Mission

// app/page.tsx
"use client"
import { useEffect, useRef } from "react"
import Link from "next/link"
import { Button } from "@/components/ui/button"

export default function Home() {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  
  useEffect(() => {
    // Canvas animation logic
    // ...
  }, [])

  return (
    <div className="min-h-screen bg-black text-white relative">
      <canvas ref={canvasRef} className="absolute inset-0 z-0" />
      {/* Content */}
    </div>
  )
}

// tailwind.config.ts
import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        // Custom color palette
      },
      // ...
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config

// Canvas animation excerpt
class Particle {
  x: number
  y: number
  size: number
  speedX: number
  speedY: number
  color: string

  constructor() {
    this.x = Math.random() * canvas.width
    this.y = Math.random() * canvas.height
    this.size = Math.random() * 2 + 0.5
    this.speedX = (Math.random() - 0.5) * 0.5
    this.speedY = (Math.random() - 0.5) * 0.5
    this.color = `rgba(255, 255, 255, ${Math.random() * 0.2 + 0.1})`
  }

  update() {
    // Movement logic
  }

  draw() {
    // Rendering logic
  }
}

// AI integration example
import { generateText } from "ai"
import { openai } from "@ai-sdk/openai"

async function processUserQuery(query: string) {
  const { text } = await generateText({
    model: openai("gpt-4o"),
    prompt: query,
    system: "You are aqin, a helpful assistant..."
  })
  
  return text
}