import styles from './components/home.module.css'

export default async function page() {
  const res = await fetch("...")
  const data = await res.json()

  return (
    <>
      <div className={styles.container}>
        <div className={styles.topbar}>
          <div className={styles.logo}>
            <img src="https://cdn.discordapp.com/attachments/1178132493690474559/1180203036132528258/image.png?ex=6585cb3a&is=6573563a&hm=b6d399c87c67f14b3eca97adbd4566b634e8876529347c418931f9f1c63bc251&" width="70px" height="70px"></img>
            <p>Custom Profiles</p>
          </div>
          <div className={styles.buttons}>
            <a href="..." className={styles.invite}>Invite the Bot</a>
          </div>
        </div>
        <h1 className={styles.title}>Share your own discord profile with <br/>your own <blue>custom link.</blue></h1>
        <p>Create and share you own Discord profile link without the need to sign in to your discord account through the website. Make it through the <br/>bot and have the ability to customize to to your liking.</p>
        <img src="https://cdn.discordapp.com/attachments/1178132493690474559/1179877913898782831/Main_Photo.png?ex=65849c6f&is=6572276f&hm=7387189039b816857fb404f6383d8e65356e99bdb2ab3adc41cc548498082801&" />
        <footer>Used in <blue>{data.amount} servers</blue></footer>
      </div>
    </>
  )
}