Updated Feature Section (#114)
This commit is contained in:
parent
aabc146c43
commit
4317d0224b
|
@ -1,50 +1,36 @@
|
||||||
import * as React from 'react'
|
import * as React from 'react'
|
||||||
import {
|
import { Box } from '@mui/material'
|
||||||
Avatar,
|
|
||||||
Box,
|
|
||||||
Button,
|
|
||||||
Container,
|
|
||||||
IconButton,
|
|
||||||
Menu,
|
|
||||||
MenuItem,
|
|
||||||
Toolbar,
|
|
||||||
Tooltip,
|
|
||||||
Typography,
|
|
||||||
alpha,
|
|
||||||
AppBar,
|
|
||||||
} from '@mui/material'
|
|
||||||
|
|
||||||
import QrCodeScannerIcon from '@mui/icons-material/QrCodeScanner'
|
import QrCodeScannerIcon from '@mui/icons-material/QrCodeScanner'
|
||||||
import RocketLaunchIcon from '@mui/icons-material/RocketLaunch'
|
import RocketLaunchIcon from '@mui/icons-material/RocketLaunch'
|
||||||
import RemoveRedEyeIcon from '@mui/icons-material/RemoveRedEye'
|
import RemoveRedEyeIcon from '@mui/icons-material/RemoveRedEye'
|
||||||
import NotFound from '@pages/404'
|
|
||||||
import styles from '../../styles/Features.module.css'
|
import styles from '../../styles/Features.module.css'
|
||||||
|
import { motion } from 'framer-motion'
|
||||||
|
|
||||||
export default function Index() {
|
export default function Index() {
|
||||||
return (
|
return (
|
||||||
<Box className={styles.container}>
|
<Box className={styles.container}>
|
||||||
<Box className={styles.heading}>
|
<Box className={styles.heading}>
|
||||||
<h1> SHORTEN, SHARE AND ANALYZE</h1>
|
<h1> SHORTEN, SHARE & ANALYSE</h1>
|
||||||
<br />
|
<br />
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
<Box className={styles.featuresContainer}>
|
<Box className={styles.featuresContainer}>
|
||||||
<Box className={styles.feature}>
|
<Box component={motion.div} whileHover={{ scale: 1.4, transition: { ease: 'easeInOut' } }} className={styles.feature}>
|
||||||
<a className="Link" href="NotFound">
|
<a href="NotFound">
|
||||||
<RemoveRedEyeIcon className={styles.icons} />
|
<RemoveRedEyeIcon className={styles.icons} />
|
||||||
<h4>VIEW COUNTER</h4>
|
<h4>VIEW COUNTER</h4>
|
||||||
</a>
|
</a>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
<Box className={styles.feature}>
|
<Box component={motion.div} whileHover={{ scale: 1.4, transition: { ease: 'easeInOut' } }} className={styles.feature}>
|
||||||
<a className="Link" href="NotFound">
|
<a href="NotFound">
|
||||||
<QrCodeScannerIcon className={styles.icons} />
|
<QrCodeScannerIcon className={styles.icons} />
|
||||||
<h4>QR CODE</h4>
|
<h4>QR CODE</h4>
|
||||||
</a>
|
</a>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
<Box className={styles.feature}>
|
<Box component={motion.div} whileHover={{ scale: 1.4, transition: { ease: 'easeInOut' } }} className={styles.feature}>
|
||||||
<a className="Link" href="NotFound">
|
<a href="NotFound">
|
||||||
<RocketLaunchIcon className={styles.icons} />
|
<RocketLaunchIcon className={styles.icons} />
|
||||||
<h4>ROBUST API</h4>
|
<h4>ROBUST API</h4>
|
||||||
</a>
|
</a>
|
||||||
|
|
|
@ -15,6 +15,9 @@ export default function Home() {
|
||||||
<Head>
|
<Head>
|
||||||
<title>URL MiniFy</title>
|
<title>URL MiniFy</title>
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=BioRhyme&family=Cabin+Sketch:wght@700&family=IBM+Plex+Serif:ital@1&family=Monoton&family=Montserrat+Alternates:wght@500&family=Open+Sans:wght@300&family=Poppins&family=Share+Tech+Mono&family=Special+Elite&display=swap" rel="stylesheet" />
|
||||||
</Head>
|
</Head>
|
||||||
|
|
||||||
<main className={'main-bg'}>
|
<main className={'main-bg'}>
|
||||||
|
|
|
@ -1,43 +1,61 @@
|
||||||
.heading{
|
.container {
|
||||||
width: 90%;
|
padding-bottom: 3rem;
|
||||||
text-align: center;
|
}
|
||||||
margin: 0 auto;
|
.heading {
|
||||||
|
width: 90%;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
color: #fff;
|
||||||
|
font-family: 'Poppins', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
.featuresContainer{
|
.featuresContainer {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
width: 500px;
|
width: 500px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
padding: 1rem;
|
color: #fff;
|
||||||
align-items: center;
|
padding-bottom: 40px;
|
||||||
justify-content: space-between;
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.feature a {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.icons {
|
||||||
|
font-size: 3.7rem !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icons{
|
@media screen and (max-width: 500px) {
|
||||||
font-size: 3.5rem !important;
|
.heading {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
.featuresContainer {
|
||||||
|
width: 90vw;
|
||||||
|
padding: 0;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.feature {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature a {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 1rem;
|
||||||
|
margin: 10px 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.icons {
|
||||||
|
font-size: clamp(2rem, 10vw, 4rem) !important;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
padding-bottom: 7rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 500px) {
|
|
||||||
.featuresContainer{
|
|
||||||
width: 90vw;
|
|
||||||
padding: 0;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature{
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature a{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin: 10px 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icons{
|
|
||||||
font-size: clamp(2rem, 10vw, 4rem) !important;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -53,9 +53,9 @@
|
||||||
|
|
||||||
.search {
|
.search {
|
||||||
width: 90vw;
|
width: 90vw;
|
||||||
font-size: 1.2rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.showUrl {
|
.showUrl {
|
||||||
width: 90vw;
|
width: 90vw;
|
||||||
}
|
}
|
||||||
|
@ -73,4 +73,4 @@
|
||||||
width: 90vw;
|
width: 90vw;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue