GItRenderPreparing.js

import Link from 'next/link'
import styles from './GithubRender.module.css'
import Fork from '../../images/fork.svg'
import Star from '../../images/star.svg'
import Image from 'next/image'

export const GithubRender = () => {
  return (
    <section className={styles.wrapper}>
      <h1 className={styles.title}>
        GitHub repositories
      </h1>
      <div className='container'>
        <div className={styles.cards}>
        <div className={styles['card-wrapper']}>
                <div className={styles.card}>
                  <p className={styles['card-title']}>
                    repo name
                  </p>
                  <div className={styles['card-subtitle']}>
                    <span className={styles['card-icon']}>
                      <Image src={Star} alt="Github" width={25} height={25} />
                    </span>
                    <span className={styles['card-text']}>
                      stars
                    </span>
                    <span className={styles['card-icon']}>
                      <Image src={Fork} alt="Github" width={20} height={20} />
                    </span>
                    <span className={styles['card-text']}>
                      forks
                    </span>
                  </div>
                  <p className={styles['card-description']}>
                    description
                  </p>
                  <div className={styles['card-footer']}>
                    <hr className={styles['card-line']} />
                    <Link href='#'>
                      <a target="_blank" rel="noopener noreferrer">
                        VIEW REPO
                      </a>
                    </Link>
                  </div>
                </div>
              </div>
        </div>
      </div>
    </section>
  )
};