learnhouse/apps/web/app/page.tsx

'use client'
import { motion } from 'framer-motion'
import styled from 'styled-components'
import learnhouseBigIcon from 'public/learnhouse_bigicon.png'
import Image from 'next/legacy/image'
import Link from 'next/link'

export default function Home() {
  return (
    <HomePage>
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{
          type: 'spring',
          stiffness: 260,
          damping: 70,
          delay: 0.2,
        }}
        exit={{ opacity: 1 }}
      >
        <Image
          alt="Learnhouse Icon"
          height={260}
          width={260}
          quality={100}
          src={learnhouseBigIcon}
        ></Image>
      </motion.div>
      <br />
      <br />
      <br />
      <br />
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{
          type: 'spring',
          stiffness: 260,
          damping: 70,
          delay: 0.8,
        }}
        exit={{ opacity: 1 }}
      >
        <div>
          <Link href={'/organizations'}>
            <OrgsButton>See Organizations</OrgsButton>
          </Link>
          <br />
          <br />
          <Link href={'/login'}>
            <OrgsButton>Login</OrgsButton>
          </Link>
        </div>
      </motion.div>
    </HomePage>
  )
}

const OrgsButton = styled.button`
  background: #151515;
  border: 1px solid #e5e5e50a;
  box-sizing: border-box;
  border-radius: 4px;
  padding: 10px 20px;
  color: white;
  font-size: 16px;
  line-height: 24px;
  margin: 0 10px;
  margin: auto;
  cursor: pointer;
  font-family: 'DM Sans';
  font-weight: 500;
  border-radius: 12px;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  &:hover {
    background: #191919;
  }
`

const HomePage = styled.div`
  display: flex;
  flex-direction: column;
  background: linear-gradient(131.61deg, #202020 7.15%, #000000 90.96%);
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  min-height: 100vh;
  text-align: center;
  img {
    width: 60px;
  }
`