diff --git a/frontend/components/Features/index.js b/frontend/components/Features/index.js index 4f801f7..2ea27d2 100644 --- a/frontend/components/Features/index.js +++ b/frontend/components/Features/index.js @@ -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 ( -

SHORTEN, SHARE AND ANALYZE

+

SHORTEN, SHARE & ANALYSE


 - - + +

VIEW COUNTER

 - - + +

QR CODE

 - - + +

ROBUST API

 diff --git a/frontend/pages/index.js b/frontend/pages/index.js index d144f35..74252c7 100644 --- a/frontend/pages/index.js +++ b/frontend/pages/index.js @@ -15,6 +15,9 @@ export default function Home() { URL MiniFy + + +
diff --git a/frontend/styles/Features.module.css b/frontend/styles/Features.module.css index f9889d7..9863648 100644 --- a/frontend/styles/Features.module.css +++ b/frontend/styles/Features.module.css @@ -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; - } -} \ No newline at end of file diff --git a/frontend/styles/HomeSection.module.css b/frontend/styles/HomeSection.module.css index d5c6a5d..6a1589f 100644 --- a/frontend/styles/HomeSection.module.css +++ b/frontend/styles/HomeSection.module.css @@ -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; } -} \ No newline at end of file +}