diff options
| -rw-r--r-- | client/src/components/Card/Card.jsx | 4 | ||||
| -rw-r--r-- | client/src/components/Card/Card.module.css | 7 | ||||
| -rw-r--r-- | client/src/components/Header/Header.module.css | 11 | ||||
| -rw-r--r-- | client/src/index.css | 5 | ||||
| -rw-r--r-- | client/src/pages/Home/Home.jsx | 38 |
5 files changed, 34 insertions, 31 deletions
diff --git a/client/src/components/Card/Card.jsx b/client/src/components/Card/Card.jsx index 9460955..89b89b3 100644 --- a/client/src/components/Card/Card.jsx +++ b/client/src/components/Card/Card.jsx @@ -3,8 +3,8 @@ import styles from './Card.module.css' const Card = ({ title, image, onClick }) => { return ( - <div onClick={ onClick } className={styles.card}> - <img className={styles.card__image} src={image} alt="" /> + <div onClick={onClick} className={styles.card}> + <img className={styles.card__image} src={image} alt="" height="300px" /> <h2 className={styles.card__title}>{title}</h2> </div> ) diff --git a/client/src/components/Card/Card.module.css b/client/src/components/Card/Card.module.css index e351fd5..54dd471 100644 --- a/client/src/components/Card/Card.module.css +++ b/client/src/components/Card/Card.module.css @@ -1,8 +1,8 @@ @import '../../styles/GlobalVariables.css'; .card { - height: 300px; - width: 300px; + height: 500px; + width: 500px; display: flex; flex-direction: column; justify-content: center; @@ -13,7 +13,8 @@ transition: 0.2s all; cursor: pointer; color: var(--color-black); - text-decoration-line: none; + font-size: 2.25rem; + text-decoration: none; } .card:active { diff --git a/client/src/components/Header/Header.module.css b/client/src/components/Header/Header.module.css index c67df95..daf82ef 100644 --- a/client/src/components/Header/Header.module.css +++ b/client/src/components/Header/Header.module.css @@ -1,7 +1,8 @@ @import '../../styles/GlobalVariables.css'; .header { - font-family: 'Fredoka One', cursive; + font-family: 'Barlow', cursive; + font-weight: 700; display: flex; flex-direction: column; align-items: center; @@ -10,11 +11,11 @@ } .header__subheading { - font-size: var(--font-medium); - font-weight: 400; + font-size: 2.5rem; + font-weight: 700; } .header__image { - width: 150px; - height: 150px; + width: 250px; + height: 250px; } diff --git a/client/src/index.css b/client/src/index.css index 77b8619..4a8cd4f 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -5,14 +5,15 @@ } body { - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + font-family: 'Barlow', BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; height: 100%; width: 100%; - background: url('../public/assets/images/tri.jpg') no-repeat center center fixed; + background: url('../public/assets/images/tri.jpg') no-repeat center center + fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; diff --git a/client/src/pages/Home/Home.jsx b/client/src/pages/Home/Home.jsx index 9771877..9370c9f 100644 --- a/client/src/pages/Home/Home.jsx +++ b/client/src/pages/Home/Home.jsx @@ -1,6 +1,6 @@ import React from 'react' import { useTranslation } from 'react-i18next' -import { Link } from 'react-router-dom' +import { useNavigate } from 'react-router-dom' import Card from '../../components/Card/Card' import Header from '../../components/Header/Header' import ExtendedPopUpModal from '../../components/Modal/ExtendedModal' @@ -8,6 +8,8 @@ import styles from './Home.module.css' const Home = ({ page, setPage }) => { const { t } = useTranslation() + const navigate = useNavigate() + return ( <> <Header subheading={t('MERA_AADHAAR_MERI_PEHCHAN')} /> @@ -21,24 +23,22 @@ const Home = ({ page, setPage }) => { image3={`${process.env.PUBLIC_URL}/assets/images/status.svg`} /> <div className={styles.card__container}> - <Link to="/enrollment"> - <Card - title={t('ENROLLMENT')} - image={`${process.env.PUBLIC_URL}/assets/images/enrollment.svg`} - /> - </Link> - <Link to="/update"> - <Card - title={t('UPDATE')} - image={`${process.env.PUBLIC_URL}/assets/images/update.svg`} - /> - </Link> - <Link to="/status"> - <Card - title={t('CHECK_STATUS')} - image={`${process.env.PUBLIC_URL}/assets/images/status.svg`} - /> - </Link> + <Card + onClick={() => navigate('/enrollment')} + title={t('ENROLLMENT')} + image={`${process.env.PUBLIC_URL}/assets/images/enrollment.svg`} + /> + + <Card + onClick={() => navigate('/update')} + title={t('UPDATE')} + image={`${process.env.PUBLIC_URL}/assets/images/update.svg`} + /> + <Card + onClick={() => navigate('/status')} + title={t('CHECK_STATUS')} + image={`${process.env.PUBLIC_URL}/assets/images/status.svg`} + /> </div> </> ) |