import Image from "next/image";
import "@/app/globals.css";
import Link from "next/link";


export default function Home() {


  return (
    <div style={{width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}>
 
        <div className="container col" style={{padding: '20px', alignItems: 'center', justifyContent: 'center', backgroundColor: 'black', width: '100%', padding: '20px'}}>
          <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', width: '100%', minHeight: '80vh', textAlign: 'center'}}>
          <h1 className="title" style={{ margin: '30px'}}>Power up your projects with the most powerful <span className="gradient-text">AI Models</span></h1>
          <p style={{maxWidth: '700px', textAlign: 'center', fontWeight: '200'}}>Unleash your insights into your messenger chats. Discover the hidden secrets of your conversations and make informed decisions.</p>
          <Link className="btn2 mt-8 mb-8" href={'/api'}><i className="animation"></i>Get Started<i className="animation"></i></Link>
          <p style={{maxWidth: '700px', textAlign: 'center', fontSize: '12px', color: 'gray'}}>As we used reverse engineer technology so they all are as fast as the origin websites and more significantly they all are free!</p>

          </div>
          
          <div className="col" style={{padding: '20px', alignItems: 'center', justifyContent: 'center', width: '100%', minHeight: 'calc(80vh)', textAlign: 'center'}}>
            <div className="line mb-10" style={{marginBottom: '30px'}}></div>
            <h1 className="title gradient-text" style={{marginTop: '100px'}}>
              Get in touch with AIs like never before
            </h1>
            <p className="mt-8" style={{fontSize: '22px', color: 'gray', maxWidth: '70vw'}}>
              You can literally use the premium AI Models without any api key or any kind of authentication hassel.

            </p>
            <div className="row" style={{marginTop: '50px', width: '100%', justifyContent: 'space-around', alignItems: 'center'}}>
              <div className="card">
                <h3 className="btn2" style={{width: '100%'}}><i className="animation"></i>FREE<i className="animation"></i></h3>
    <div className="p-6">                <p >No login required</p>
                <p >No api key required</p>
                <p >No authentication required</p>
                <p >No payment required</p></div>
                <h3 className="n"><button className="btn" style={{fontSize: '12px', margin: '0px'}}>Learn More</button></h3>

              </div>
              <div className="card">
              <h3 className="btn2" style={{width: '100%'}}><i className="animation"></i>FAST<i className="animation"></i></h3>
                <div className="p-6">
                                  <p >Works as fast as a blitz</p>
                <p >Faster response in gpt AIs</p>
                <p >Fast Response Generation</p>
                <p >Integrated Optimization</p>
                </div>
                <h3 className="n"><button className="btn" style={{fontSize: '12px', margin: '0px'}}>Learn More</button></h3>


              </div>
              <div className="card">
              <h3 className="btn2" style={{width: '100%'}}><i className="animation"></i>SUPPORT<i className="animation"></i></h3>
<div className="p-6">                <p >Supports all programming languages!</p>
                <p >Uptime 99.99%</p>
                <p >Supports MS Copilot, Gemini and more!</p>
                <p >Elegant Syntax</p></div>
                <h3 className="n"><button className="btn" style={{fontSize: '12px', margin: '0px'}}>Learn More</button></h3>

              </div>
            </div>
          </div>

          <div className="space"></div>
        </div>
      
    </div>
  );
}