interstellar_ai/app/components/Models.tsx

// Models.tsx
import React from 'react';

const Models: React.FC = () => {
  return (
    <div className="model-background">
      <div className="models">
        <div className="titel">
          <h1>Different AI models</h1>
        </div>
        <form action="">
          <div className="grid">
            <button className="code-model model-box">
              <div className="overlay">
                <h3>Code</h3>
                <img src="/img/wifi.svg" alt="Wi-Fi" />
              </div>
            </button>
            <button className="math-model model-box">
              <div className="overlay">
                <h3>Math</h3>
                <img src="/img/nowifi.svg" alt="No Wi-Fi" />
              </div>
            </button>
            <button className="language-model model-box">
              <div className="overlay">
                <h3>Language</h3>
              </div>
            </button>
            <button className="default-model model-box">
              <div className="overlay">
                <h3>Default</h3>
              </div>
            </button>
            {/* Example Models */}
            <button className="default-model model-box">
              <div className="overlay">
                <h3>Default</h3>
              </div>
            </button>
            <button className="default-model model-box">
              <div className="overlay">
                <h3>Default</h3>
              </div>
            </button>
            <button className="default-model model-box">
              <div className="overlay">
                <h3>Default</h3>
              </div>
            </button>
            <button className="default-model model-box">
              <div className="overlay">
                <h3>Default</h3>
              </div>
            </button>
            <button className="default-model model-box">
              <div className="overlay">
                <h3>Default</h3>
              </div>
            </button>
            <button className="default-model model-box">
              <div className="overlay">
                <h3>Default</h3>
              </div>
            </button>
            <button className="default-model model-box">
              <div className="overlay">
                <h3>Default</h3>
              </div>
            </button>
            <button className="default-model model-box">
              <div className="overlay">
                <h3>Default</h3>
              </div>
            </button>
            <button className="default-model model-box">
              <div className="overlay">
                <h3>Default</h3>
              </div>
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default Models;