Merge pull request #101 from 404-Terror/feat#86
Feat#86(Added Animations)
This commit is contained in:
commit
2268a23e66
|
@ -1,15 +1,52 @@
|
|||
import React, { useState } from 'react'
|
||||
import HomeSectionStyle from './HomeSection.style'
|
||||
import Link from 'next/link'
|
||||
import { motion } from 'framer-motion'
|
||||
import Image from 'next/image'
|
||||
import Axios from 'helpers/Axios'
|
||||
import { Alert, Button, Collapse, IconButton } from '@mui/material'
|
||||
import CloseIcon from '@mui/icons-material/Close'
|
||||
import ContentCopyIcon from '@mui/icons-material/ContentCopy'
|
||||
import QRCode from 'qrcode'
|
||||
import { signup } from '@pages/signup'
|
||||
import NotFound from '@pages/404'
|
||||
import styles from '../../styles/HomeSection.module.css'
|
||||
|
||||
const spanVariants = {
|
||||
visible: { y: 0, scaleY: 1 },
|
||||
hover: {
|
||||
y: [-1, -2, -2.8, 0.9, 0],
|
||||
scaleY: [1, 1.3, 0.8, 1.2, 1],
|
||||
color: '#4A1C40'
|
||||
}
|
||||
}
|
||||
const list = {
|
||||
hidden: {
|
||||
opacity: 0,
|
||||
transition: {
|
||||
when: 'afterChildren'
|
||||
}
|
||||
},
|
||||
visible: {
|
||||
opacity: 1,
|
||||
transition: {
|
||||
when: 'beforeChildren',
|
||||
staggerChildren: 0.3
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const effect = {
|
||||
hidden: {
|
||||
opacity: 0,
|
||||
},
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: [-1, -1.9, -2.7, 1],
|
||||
scaleY: [1, 1.3, 0.8, 1]
|
||||
}
|
||||
}
|
||||
|
||||
const QR = {
|
||||
marginTop: '1.8em',
|
||||
}
|
||||
|
@ -22,6 +59,7 @@ function HomeSection(props) {
|
|||
|
||||
|
||||
const setMinfy = async () => {
|
||||
props.setLongUrl('')
|
||||
setOpen(false)
|
||||
setDisabled(true)
|
||||
let res
|
||||
|
@ -59,12 +97,32 @@ function HomeSection(props) {
|
|||
}
|
||||
}
|
||||
|
||||
const text1 = "Url";
|
||||
const text2 = "MiniFy";
|
||||
|
||||
|
||||
return (
|
||||
<HomeSectionStyle>
|
||||
<div className="content">
|
||||
<h1 className={styles.title}>URL MINIFY</h1>
|
||||
|
||||
<div className={styles.searchBox}>
|
||||
<motion.span style={{ display: 'flex' }} variants={list} initial="hidden" animate="visible">
|
||||
<div style={{ display: 'flex', marginBottom: '20px' }}>
|
||||
{text1.split("").map((Letter, id) => (
|
||||
<motion.div variants={effect}>
|
||||
<span className={styles.head} key={id}>
|
||||
<motion.h1 className={styles.letter} variants={spanVariants} initial="visible" whileHover="hover">{Letter}</motion.h1>
|
||||
</span></motion.div>
|
||||
))}
|
||||
|
||||
</div>
|
||||
<div style={{ display: 'flex' }}>
|
||||
{text2.split("").map((Letter, id) => (
|
||||
<motion.div variants={effect}><span className={styles.head} key={id}>
|
||||
<motion.h1 className={styles.letter} variants={spanVariants} initial="visible" whileHover="hover">{Letter}</motion.h1>
|
||||
</span></motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.span>
|
||||
<motion.div initial={{ x: '-100vw', opacity: 0 }} animate={{ x: 0, opacity: 1, transition: { delay: 3, type: 'spring', stiffness: 150 } }} className={styles.searchBox}>
|
||||
<input
|
||||
className={styles.search}
|
||||
placeholder="Enter the url to be minified......"
|
||||
|
@ -77,22 +135,23 @@ function HomeSection(props) {
|
|||
variant={'contained'}
|
||||
disabled={disabled}
|
||||
className={styles.btn}
|
||||
component={motion.div}
|
||||
whileHover={{ scale: 1.15 }}
|
||||
id="minify"
|
||||
onClick={setMinfy}
|
||||
>
|
||||
MINIFY
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className={styles.info}>
|
||||
<h3>
|
||||
</motion.div>
|
||||
<div className={styles.info} style={{ marginBottom: '40px', color: 'black', fontWeight: 'bold', fontSize: '1rem' }}>
|
||||
<motion.h3 initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0, transition: { delay: 3.4, duration: 0.4 } }}>
|
||||
Need more advanced features? |{' '}
|
||||
<Link href="/signup">
|
||||
<span style={{ textDecoration: 'underline' }}>
|
||||
Create an account
|
||||
<span style={{ textDecoration: 'underline', cursor: 'pointer' }} >
|
||||
<a href={signup}>Create an account</a>
|
||||
</span>
|
||||
</Link>
|
||||
</h3>
|
||||
</motion.h3>
|
||||
</div>
|
||||
|
||||
{
|
||||
|
@ -112,10 +171,10 @@ function HomeSection(props) {
|
|||
)
|
||||
}
|
||||
</div>
|
||||
|
||||
|
||||
<Collapse in={open}>
|
||||
<Alert
|
||||
className={styles.showUrl}
|
||||
className={styles.showUrl}
|
||||
action={
|
||||
<IconButton
|
||||
aria-label="close"
|
||||
|
@ -139,7 +198,6 @@ function HomeSection(props) {
|
|||
</IconButton>
|
||||
</Alert>
|
||||
</Collapse>
|
||||
|
||||
</HomeSectionStyle>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -10,5 +10,7 @@ export default styled.section`
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
.title{display: flex;
|
||||
margin-bottom:0.5rem;}
|
||||
}
|
||||
`
|
||||
|
|
|
@ -1,26 +1,47 @@
|
|||
import React from 'react'
|
||||
import { motion } from 'framer-motion'
|
||||
|
||||
const pathvariant = {
|
||||
initial: { pathLength: 0, opacity: 0 },
|
||||
animate: { pathLength: 1, opacity: 1, transition: { duration: 1.5, yoyo: Infinity, ease: 'easeInOut' } }
|
||||
}
|
||||
|
||||
|
||||
export default function Logo() {
|
||||
return (
|
||||
<div className="logo-wrapper">
|
||||
<svg
|
||||
className="logo"
|
||||
<motion.svg
|
||||
initial={{ rotate: -180 }}
|
||||
animate={{ rotate: 0 }}
|
||||
class="logo"
|
||||
data-name="Layer 4"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 53.4 53.31"
|
||||
viewBox="0 0 65 65"
|
||||
>
|
||||
<path
|
||||
<motion.path
|
||||
variants={pathvariant}
|
||||
animate="animate"
|
||||
initial="initial"
|
||||
d="M58.84,53.91a9.2,9.2,0,0,1-6.54-2.72L50.14,49a2.59,2.59,0,1,1,3.67-3.66L56,47.53a4.07,4.07,0,0,0,5.76,0L75.24,34.08a4.08,4.08,0,0,0,0-5.76L70.94,24a4.08,4.08,0,0,0-5.76,0l-6.76,6.73A2.59,2.59,0,0,1,54.76,27l6.76-6.73a9.27,9.27,0,0,1,13.09,0l4.31,4.33a9.27,9.27,0,0,1,0,13.09L65.39,51.21A9.22,9.22,0,0,1,58.84,53.91Z"
|
||||
transform="translate(-28.21 -17.61)"
|
||||
fill="#fff"
|
||||
stroke="white"
|
||||
stroke-linecap="round"
|
||||
strokeWidth="3"
|
||||
fill="none"
|
||||
/>
|
||||
<path
|
||||
<motion.path
|
||||
variants={pathvariant}
|
||||
animate="animate"
|
||||
initial="initial"
|
||||
d="M41.77,70.93a9.28,9.28,0,0,1-6.55-2.72l-4.31-4.33a9.27,9.27,0,0,1,0-13.09L44.44,37.33a9.26,9.26,0,0,1,13.09,0l2.16,2.16A2.59,2.59,0,1,1,56,43.17L53.86,41a4.07,4.07,0,0,0-5.76,0L34.59,54.46a4.08,4.08,0,0,0,0,5.76l4.32,4.33a4.08,4.08,0,0,0,5.76,0l6.75-6.73a2.59,2.59,0,1,1,3.66,3.67l-6.75,6.73A9.26,9.26,0,0,1,41.77,70.93Z"
|
||||
transform="translate(-28.21 -17.61)"
|
||||
fill="#fff"
|
||||
stroke="white"
|
||||
strokeWidth="3"
|
||||
stroke-linecap="round"
|
||||
fill="none"
|
||||
/>
|
||||
</svg>
|
||||
<p className="logo-text">URL MINIFY</p>
|
||||
</motion.svg>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
import React, { useContext } from 'react'
|
||||
import { motion } from 'framer-motion'
|
||||
import {
|
||||
Avatar,
|
||||
Box,
|
||||
|
@ -49,8 +50,9 @@ function Index(props) {
|
|||
>
|
||||
<Container maxWidth="xl">
|
||||
<Toolbar disableGutters="false">
|
||||
<Typography variant="h4" sx={{ fontWeight: 'bold' }}>
|
||||
URL MINIFY
|
||||
<span><Logo /></span>
|
||||
<Typography component={motion.div} initial={{ y: -50, opacity: 0 }} animate={{ y: 0, opacity: 1, transition: { delay: 1 } }} variant="h5" sx={{ fontWeight: 'bold', fontFamily: "'Montserrat Alternates', sans-serif;" }}>
|
||||
UrlMiniFy
|
||||
</Typography>
|
||||
<Box
|
||||
sx={{
|
||||
|
@ -60,7 +62,7 @@ function Index(props) {
|
|||
}}
|
||||
>
|
||||
<IconButton
|
||||
size="large"
|
||||
size="medium"
|
||||
aria-label="account of current user"
|
||||
aria-controls="menu-appbar"
|
||||
aria-haspopup="true"
|
||||
|
@ -92,15 +94,15 @@ function Index(props) {
|
|||
href="https://github.com/BRAVO68WEB/url-minify"
|
||||
target={'_blank'}
|
||||
>
|
||||
<Typography textAlign="center" sx={{ display: 'flex' }}>
|
||||
<GitHubIcon fontSize="small" />
|
||||
<Typography textAlign="center" variant="h6" sx={{ display: 'flex' }}>
|
||||
<GitHubIcon fontSize="medium" />
|
||||
GitHub
|
||||
</Typography>
|
||||
</a>
|
||||
</MenuItem>
|
||||
<MenuItem onClick={handleCloseNavMenu}>
|
||||
<a href="NotFound">
|
||||
<Typography textAlign="center" sx={{ display: 'flex' }}>
|
||||
<a href={NotFound}>
|
||||
<Typography textAlign="center" variant="h6" sx={{ display: 'flex' }}>
|
||||
CREDITS
|
||||
</Typography>
|
||||
</a>
|
||||
|
@ -127,24 +129,33 @@ function Index(props) {
|
|||
color: 'white',
|
||||
display: 'flex',
|
||||
gap: '10px',
|
||||
fontSize: 'h5.fontSize',
|
||||
fontFamily: 'sans-serif',
|
||||
fontStyle: 'bold',
|
||||
fontSize: 'h6.fontSize',
|
||||
fontFamily: "'Open Sans', sans-serif;",
|
||||
textTransform: 'capitalize',
|
||||
fontWeight: 'bold',
|
||||
}}
|
||||
component={motion.div}
|
||||
initial={{ y: -50, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1, transition: { delay: 1 } }}
|
||||
whileHover={{ scale: 1.1, textShadow: '2px 2px black' }}
|
||||
>
|
||||
<GitHubIcon fontSize="large" />
|
||||
<GitHubIcon fontSize="medium" />
|
||||
GitHub
|
||||
</Button>
|
||||
</a>
|
||||
<a href="NotFound">
|
||||
<a href={NotFound}>
|
||||
<Button
|
||||
component={motion.div}
|
||||
initial={{ y: -50, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1, transition: { delay: 1 } }}
|
||||
whileHover={{ scale: 1.1, textShadow: '2px 2px black' }}
|
||||
onClick={handleCloseNavMenu}
|
||||
sx={{
|
||||
color: 'white',
|
||||
display: 'block',
|
||||
fontSize: 'h5.fontSize',
|
||||
fontSize: 'h6.fontSize',
|
||||
fontFamily: "'Open Sans', sans-serif;",
|
||||
fontWeight: 'bold',
|
||||
}}
|
||||
>
|
||||
CREDITS
|
||||
|
@ -187,7 +198,16 @@ function Index(props) {
|
|||
</Menu>
|
||||
</Box>
|
||||
) : (
|
||||
<Typography onClick={login}>
|
||||
<Typography sx={{
|
||||
color: 'white',
|
||||
display: 'flex',
|
||||
fontSize: 'h6.fontSize',
|
||||
fontFamily: "'Open Sans', sans-serif;",
|
||||
fontWeight: 'bold',
|
||||
}} component={motion.div}
|
||||
initial={{ y: -50, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1, transition: { delay: 1 } }}
|
||||
whileHover={{ scale: 1.1, textShadow: '2px 2px black' }} onClick={login}>
|
||||
<Link href="./login">LOGIN</Link>
|
||||
</Typography>
|
||||
)}
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -22,6 +22,7 @@
|
|||
"apexcharts": "^3.33.1",
|
||||
"axios": "^0.26.0",
|
||||
"bootstrap": "^5.1.3",
|
||||
"framer-motion": "^6.2.8",
|
||||
"cors": "^2.8.5",
|
||||
"nanoid": "^3.2.0",
|
||||
"next": "12.0.9",
|
||||
|
|
|
@ -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=Montserrat+Alternates:wght@500&family=Open+Sans:wght@300&display=swap" rel="stylesheet" />
|
||||
</Head>
|
||||
|
||||
<main className={'main-bg'}>
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
import { useState } from 'react'
|
||||
import Head from 'next/head'
|
||||
import React from 'react'
|
||||
import NavBar from 'components/NavBar'
|
||||
import Features from 'components/Features'
|
||||
import Login from 'components/Login/Login'
|
||||
|
|
|
@ -1,18 +1,22 @@
|
|||
.title {
|
||||
.head {
|
||||
font-family: 'Montserrat Alternates', sans-serif;
|
||||
color: #fff;
|
||||
margin-bottom: 30px;
|
||||
text-shadow: 3px 2px 1px black;
|
||||
line-height: 1.15;
|
||||
font-size: 5.5rem;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.searchBox{
|
||||
.searchBox {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search{
|
||||
font-size: 1.5rem;
|
||||
.search {
|
||||
font-family: 'Montserrat Alternates', sans-serif;
|
||||
font-size: 1.3rem;
|
||||
border-radius: 50px;
|
||||
padding: 1rem;
|
||||
width: 500px;
|
||||
|
@ -22,7 +26,7 @@
|
|||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.btn{
|
||||
.btn {
|
||||
font-weight: bold !important;
|
||||
position: absolute !important;
|
||||
align-items: center !important;
|
||||
|
@ -31,42 +35,42 @@
|
|||
height: 40px;
|
||||
width: 100px;
|
||||
border-radius: 50px !important ;
|
||||
}
|
||||
}
|
||||
|
||||
.info{
|
||||
.info {
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.showUrl{
|
||||
.showUrl {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.title{
|
||||
font-size: clamp(1rem, 15vw, 4rem);
|
||||
.letter {
|
||||
font-size: clamp(1rem, 15vw, 4rem);
|
||||
}
|
||||
|
||||
.search{
|
||||
.search {
|
||||
width: 90vw;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.showUrl{
|
||||
.showUrl {
|
||||
width: 90vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 400px) {
|
||||
.btn{
|
||||
.btn {
|
||||
top: 100%;
|
||||
width: 90vw;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.info{
|
||||
.info {
|
||||
margin-top: 50px;
|
||||
width: 90vw;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -6,6 +6,7 @@ body {
|
|||
overflow-x: hidden;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
a {
|
||||
|
@ -37,5 +38,14 @@ section {
|
|||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
body::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
z-index: 100;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
|
||||
body::-webkit-scrollbar-thumb {
|
||||
background-color: rgb(61, 61, 61);
|
||||
border-width: 2px 0 2px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
|
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue