Updated Feature Section (#114)
This commit is contained in:
Pratish Dey
GitHub
parent
aabc146c43
commit
4317d0224b
|
|
@ -1,50 +1,36 @@
|
|||
import * as React from 'react'
|
||||
import {
|
||||
Avatar,
|
||||
Box,
|
||||
Button,
|
||||
Container,
|
||||
IconButton,
|
||||
Menu,
|
||||
MenuItem,
|
||||
Toolbar,
|
||||
Tooltip,
|
||||
Typography,
|
||||
alpha,
|
||||
AppBar,
|
||||
} from '@mui/material'
|
||||
|
||||
import { Box } from '@mui/material'
|
||||
import QrCodeScannerIcon from '@mui/icons-material/QrCodeScanner'
|
||||
import RocketLaunchIcon from '@mui/icons-material/RocketLaunch'
|
||||
import RemoveRedEyeIcon from '@mui/icons-material/RemoveRedEye'
|
||||
import NotFound from '@pages/404'
|
||||
import styles from '../../styles/Features.module.css'
|
||||
import { motion } from 'framer-motion'
|
||||
|
||||
export default function Index() {
|
||||
return (
|
||||
<Box className={styles.container}>
|
||||
<Box className={styles.heading}>
|
||||
<h1> SHORTEN, SHARE AND ANALYZE</h1>
|
||||
<h1> SHORTEN, SHARE & ANALYSE</h1>
|
||||
<br />
|
||||
</Box>
|
||||
|
||||
<Box className={styles.featuresContainer}>
|
||||
<Box className={styles.feature}>
|
||||
<a className="Link" href="NotFound">
|
||||
<Box component={motion.div} whileHover={{ scale: 1.4, transition: { ease: 'easeInOut' } }} className={styles.feature}>
|
||||
<a href="NotFound">
|
||||
<RemoveRedEyeIcon className={styles.icons} />
|
||||
<h4>VIEW COUNTER</h4>
|
||||
</a>
|
||||
</Box>
|
||||
|
||||
<Box className={styles.feature}>
|
||||
<a className="Link" href="NotFound">
|
||||
<Box component={motion.div} whileHover={{ scale: 1.4, transition: { ease: 'easeInOut' } }} className={styles.feature}>
|
||||
<a href="NotFound">
|
||||
<QrCodeScannerIcon className={styles.icons} />
|
||||
<h4>QR CODE</h4>
|
||||
</a>
|
||||
</Box>
|
||||
|
||||
<Box className={styles.feature}>
|
||||
<a className="Link" href="NotFound">
|
||||
<Box component={motion.div} whileHover={{ scale: 1.4, transition: { ease: 'easeInOut' } }} className={styles.feature}>
|
||||
<a href="NotFound">
|
||||
<RocketLaunchIcon className={styles.icons} />
|
||||
<h4>ROBUST API</h4>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -15,6 +15,9 @@ export default function Home() {
|
|||
<Head>
|
||||
<title>URL MiniFy</title>
|
||||
<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>
|
||||
|
||||
<main className={'main-bg'}>
|
||||
|
|
|
|||
|
|
@ -1,43 +1,61 @@
|
|||
.heading{
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
.container {
|
||||
padding-bottom: 3rem;
|
||||
}
|
||||
.heading {
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
margin: 0 auto;
|
||||
font-size: 1.3rem;
|
||||
color: #fff;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
|
||||
.featuresContainer{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 500px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.featuresContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 500px;
|
||||
margin: 0 auto;
|
||||
color: #fff;
|
||||
padding-bottom: 40px;
|
||||
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{
|
||||
font-size: 3.5rem !important;
|
||||
@media screen and (max-width: 500px) {
|
||||
.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 {
|
||||
width: 90vw;
|
||||
font-size: 1.2rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
|
||||
.showUrl {
|
||||
width: 90vw;
|
||||
}
|
||||
|
|
@ -73,4 +73,4 @@
|
|||
width: 90vw;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue