Skip to content

feat: add animated Discord Join button #1995

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: add animated Discord Join button #1995

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
81 changes: 29 additions & 52 deletions components/UI/Hero.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { Suspense } from "react";
import React from "react";
import Link from "next/link";
import SectionSubtitle from "./SectionSubtitle";
import { Container, Row, Col, Button } from "reactstrap";
import { Container, Row, Col } from "reactstrap";
import { BsDiscord } from "react-icons/bs";
import Image from "next/image";
import heroImg from "../../public/images/PiyushGarg.png";
Expand All @@ -10,46 +10,40 @@ import classNames from "../../styles/subtitle.module.css";

const Hero = () => {
return (
<section className={` ${classes.hero} `}>
{/* desktop / large screen view */}
<Container id="hero-section " className="md:flex hidden">
<section className={`${classes.hero}`}>
{/* Desktop / Large screen view */}
<Container id="hero-section" className="md:flex hidden">
<Row>
<Col lg="6" md="6">
<div className={`${classes.hero__content}`}>
<div className={classes.hero__content}>
<SectionSubtitle subtitle="Hello" />
<h2 className="mt-3 mb-3">I&apos;m Piyush Garg</h2>
<h5 className="mb-4">Fullstack Developer & Instructor</h5>
<p id="about-me">
Hi there! My name is Piyush Garg and I&rsquo;m a software
Hi there! My name is Piyush Garg and I&apos;m a software
engineer with over 5 years of experience in the industry. I love
all things tech and coding, and on my channel, I share my
knowledge and experience with others.
</p>
</div>

{/* Discord Button - Desktop */}
<div className="mt-5 flex place-content-center md:block">
<div className="relative inline-flex group">
<div className="absolute transitiona-all duration-1000 opacity-70 -inset-px bg-gradient-to-r animate-pulse hover:animate-none from-[#44BCFF] via-[#FF44EC] to-[#FF675E] rounded-xl blur-lg group-hover:opacity-100 group-hover:-inset-1 group-hover:duration-200 animate-tilt"></div>
<Link
target="_blank"
<div className="absolute transition-all duration-1000 opacity-70 -inset-px bg-gradient-to-r animate-pulse hover:animate-none from-[#44BCFF] via-[#FF44EC] to-[#FF675E] rounded-xl blur-lg group-hover:opacity-100 group-hover:-inset-1 group-hover:duration-200 animate-tilt"></div>
<a
href="https://discord.gg/kRSRxBQ6xf"
className="relative text-sm sm:text-md md:text-lg text-center items-center justify-center px-8 py-4 font-bold text-white transition-all duration-200 bg-gray-900 font-pj rounded-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
role="button"
target="_blank"
rel="noopener noreferrer"
className="relative w-full text-sm sm:text-md md:text-lg text-center flex items-center justify-center gap-2 px-8 py-4 font-bold text-white transition-all duration-200 bg-gray-900 font-pj rounded-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
>
<span
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
gap: "10px",
}}
className="block"
>
Join Discord Server <BsDiscord />
</span>
</Link>
Join Discord Server <BsDiscord />
</a>

</div>
</div>
</Col>

<Col lg="6" md="6">
<div className={`${classes.hero__img} text-end`}>
<Image alt="Piyush Garg" src={heroImg} width="450" height="450" />
Expand All @@ -58,58 +52,41 @@ const Hero = () => {
</Row>
</Container>

{/* mobile / small screen view */}

{/* Mobile / Small screen view */}
<Container id="hero-section" className="md:hidden">
<Row>
<Col lg="6" md="6">
<div className={`${classes.hero__content}`}>
<div className={classes.hero__content}>
<div className="flex flex-col items-center justify-center">
<Col lg="6" md="6">
<div className={`${classes.hero__img} text-end`}>
<Image
alt="Piyush Garg"
src={heroImg}
width="450"
height="450"
/>
<Image alt="Piyush Garg" src={heroImg} width="450" height="450" />
</div>
</Col>
<h2 className="mt-3 mb-3">
<span className={`${classNames.section__subtitle}`}>
Hello !{" "}
</span>
<span className={classNames.section__subtitle}>Hello!</span>{" "}
I&apos;m Piyush Garg
</h2>
<h5 className="mb-4">Fullstack Developer & Instructor</h5>
<p id="about-me" className="text-center">
Hi there! My name is Piyush Garg and I&rsquo;m a software
Hi there! My name is Piyush Garg and I&apos;m a software
engineer with over 5 years of experience in the industry. I
love all things tech and coding, and on my channel, I share my
knowledge and experience with others.
</p>
</div>
</div>

{/* Discord Button - Mobile */}
<div className="mt-5 flex flex-col items-center justify-center">
<div className="relative inline-flex group">
<div className="absolute w-full transitiona-all duration-1000 opacity-70 -inset-px bg-gradient-to-r animate-pulse hover:animate-none from-[#44BCFF] via-[#FF44EC] to-[#FF675E] rounded-xl blur-lg group-hover:opacity-100 group-hover:-inset-1 group-hover:duration-200 animate-tilt"></div>
<div className="absolute w-full transition-all duration-1000 opacity-70 -inset-px bg-gradient-to-r animate-pulse hover:animate-none from-[#44BCFF] via-[#FF44EC] to-[#FF675E] rounded-xl blur-lg group-hover:opacity-100 group-hover:-inset-1 group-hover:duration-200 animate-tilt"></div>
<Link
target="_blank"
href="https://discord.gg/kRSRxBQ6xf"
className="relative w-full text-sm sm:text-md md:text-lg text-center items-center justify-center px-8 py-4 font-bold text-white transition-all duration-200 bg-gray-900 font-pj rounded-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
role="button"
target="_blank"
className="relative w-full text-sm sm:text-md md:text-lg text-center flex items-center justify-center px-8 py-4 font-bold text-white transition-all duration-200 bg-gray-900 font-pj rounded-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 gap-2"
>
<span
style={{
display: "flex",
justifyContent: "center",
alignItems: "center",
gap: "10px",
}}
className="block"
>
Join Discord Server <BsDiscord />
</span>
Join Discord Server <BsDiscord />
</Link>
</div>
</div>
Expand Down
30 changes: 17 additions & 13 deletions styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,19 +156,6 @@ footer {
display: block;
border: 5px solid #2980b9;
}
.ribbon span {
position: absolute;
display: block;
width: 225px;
padding: 15px 0;
background-color: #3498db;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
color: #fff;
font: 700 18px/1 "Lato", sans-serif;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
text-transform: uppercase;
text-align: center;
}

/* top left*/
.ribbon-top-left {
Expand Down Expand Up @@ -266,6 +253,23 @@ footer {
transform: rotate(-225deg);
}

.discord-btn {
background-color: #5865F2;
color: white;
font-weight: 600;
padding: 12px 24px;
border-radius: 8px;
transition: all 0.3s ease;
box-shadow: 0 4px 14px rgba(88, 101, 242, 0.4);
}

.discord-btn:hover {
background-color: #4752c4;
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(88, 101, 242, 0.6);
}


@media only screen and (max-width: 992px) {
p {
font-size: 0.9rem !important;
Expand Down
Loading