Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Added CTA And Made Sidebar take whole space #1527

Closed
wants to merge 1 commit into from
Closed

Added CTA And Made Sidebar take whole space #1527

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 109 additions & 0 deletions components/ExploreBtn/ExploreBtn.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');

.container{
position: relative;
display: none;
padding: 15px 25px;
margin: 20px 0;
color: rgb(167 139 250);
text-decoration: none;
text-transform: uppercase;
transition: 0.5s;
letter-spacing: 4px;
overflow: hidden;
margin-right: 50px;

}
.container:hover{
background: rgb(167 139 250);
color: #050801;
box-shadow: 0 0 5px rgb(167 139 250),
0 0 25px rgb(167 139 250),
0 0 50px rgb(167 139 250),
0 0 200px rgb(167 139 250);
-webkit-box-reflect:below 1px linear-gradient(transparent, #0005);
}
.container:nth-child(1){
filter: hue-rotate(270deg);
}
.container:nth-child(2){
filter: hue-rotate(110deg);
}
.container span{
position: absolute;
display: block;
}
.container span:nth-child(1){
top: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(90deg,transparent,rgb(167 139 250));
animation: animate1 1s linear infinite;
}
@keyframes animate1{
0%{
left: -100%;
}
50%,100%{
left: 100%;
}
}
.container span:nth-child(2){
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg,transparent,rgb(167 139 250));
animation: animate2 1s linear infinite;
animation-delay: 0.25s;
}
@keyframes animate2{
0%{
top: -100%;
}
50%,100%{
top: 100%;
}
}
.container span:nth-child(3){
bottom: 0;
right: 0;
width: 100%;
height: 2px;
background: linear-gradient(270deg,transparent, rgb(167 139 250));
animation: animate3 1s linear infinite;
animation-delay: 0.50s;
}
@keyframes animate3{
0%{
right: -100%;
}
50%,100%{
right: 100%;
}
}


.container span:nth-child(4){
bottom: -100%;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg,transparent,rgb(167 139 250));
animation: animate4 1s linear infinite;
animation-delay: 0.75s;
}
@keyframes animate4{
0%{
bottom: -100%;
}
50%,100%{
bottom: 100%;
}
}
@media(max-width:1025px){
.container{
display: inline-block;
}
}
20 changes: 20 additions & 0 deletions components/ExploreBtn/ExploreBtn.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import React, {useContext} from 'react'
import classes from './ExploreBtn.module.css'
import { GlobalContext } from 'context/GlobalContext'


const ExploreBtn = () => {
const { toggleNav } = useContext(GlobalContext)

return (
<button className={classes.container} onClick={toggleNav} >
<span></span>
<span></span>
<span></span>
<span></span>
Explore
</button>
)
}

export default ExploreBtn
2 changes: 1 addition & 1 deletion components/SideNavbar/SideNavbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export const SideNavbar: FC = () => {
/>
{createPortal(
<div
className={`fixed top-0 left-0 z-[100] h-full w-[310px] transition-all lg:hidden
className={`fixed top-0 left-0 z-[100] h-full w-screen transition-all lg:hidden
${sidebar ? 'animate-slide-in' : 'animate-slide-out'}
`}
>
Expand Down
6 changes: 4 additions & 2 deletions pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import Head from 'next/head'
import Logo from 'components/logo/logo'
import TypewriterComponent from 'typewriter-effect'
import { sidebarData } from '../database/data'
import ExploreBtn from 'components/ExploreBtn/ExploreBtn'
export default function Home() {
//storing sub categories names for using in typewriter effect
const subCategoriesNames: string[] = []
Expand Down Expand Up @@ -75,7 +76,7 @@ export default function Home() {

<link rel="icon" href="/icon.png" className="rounded-full" />
</Head>
<section className="flex min-h-[calc(100%-68px)] flex-col">
<section className="flex min-h-[calc(100%-68px)] flex-col ">
<div className=" m-auto flex flex-col items-start gap-2">
<div className="m-auto md:text-7xl text-5xl gap-2 flex items-center justify-center">
<Logo />
Expand All @@ -91,7 +92,7 @@ export default function Home() {
and websites.
</p>
<br />
<p className="text-md">Navigate through menu for</p>
<p className="text-md">Navigate through for</p>
<TypewriterComponent
options={{
strings: subCategoriesNames,
Expand All @@ -102,6 +103,7 @@ export default function Home() {
loop: true,
}}
/>
<ExploreBtn />
</div>
</div>
</section>
Expand Down
Loading