add Discord server link to hero section and fix that annoying blue fo…

…nt in the buttons
kossiitkgp · Nov 15, 2024 · f3e2bfb · f3e2bfb
1 parent c9f57e9
commit f3e2bfb
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 3 deletions.
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
@@ -3,7 +3,8 @@ import hook from '../assets/igloo-scroll-hook-edit.png';
 import sign from '../assets/sign-post.png';
 import "../styles/Hero.css";
 import "../styles/App.css";
-import { MENTOR_MANUAL_LINK, STUDENT_MANUAL_LINK } from '../util/constants';
+import { FaDiscord } from 'react-icons/fa';
+import { DISCORD_INVITE, MENTOR_MANUAL_LINK, STUDENT_MANUAL_LINK } from '../util/constants';
 
 export const HeroComponent = () => {
   return (
@@ -16,8 +17,9 @@ export const HeroComponent = () => {
           <h1>Kharagpur <span className='yellow-text'>Winter<br />of Code</span> 2024</h1>
         </div>
         <div className="hero-button-container">
-          <button className="hero-button"> <a href={STUDENT_MANUAL_LINK} target="_blank">Student Manual </a></button>
-          <button className="hero-button"> <a href={MENTOR_MANUAL_LINK} target="_blank">Mentor Manual </a></button>
+          <a href={STUDENT_MANUAL_LINK} target="_blank"><button className='hero-button'>Student Manual</button> </a>
+          <a href={MENTOR_MANUAL_LINK} target="_blank"><button className='hero-button'>Mentor Manual</button> </a>
+          <a href={DISCORD_INVITE} target="_blank"><button className='discord-button'><FaDiscord className='discord-icon' /><p>Discord Server</p></button> </a>
         </div>
       </div>
       <div className="hero-images">

diff --git a/src/styles/Hero.css b/src/styles/Hero.css
@@ -51,11 +51,43 @@
   border-radius: 0.5rem;
 }
 
+.discord-button {
+  background-color: #272a2f;
+  box-shadow: 4px 4px #6a6a6a;
+  transition: background-color 200ms;
+  font-size: 1rem;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  display: flex;
+  justify-content: center;
+  gap: 6px;
+  align-items: center;
+}
+
+.discord-button p {
+  margin: 0;
+  padding: 0;
+}
+
+.discord-icon {
+  color: #7289d7;
+  transition: color 200ms;
+}
+
 .hero-button:hover {
   background-color: rgba(256, 256, 256, 0.8);
   cursor: pointer;
 }
 
+.discord-button:hover {
+  cursor: pointer;
+  background-color: #7289d7;
+}
+
+.discord-button:hover .discord-icon {
+  color: #272a2f;
+}
+
 .hero-images {
   display: flex;
   flex-direction: row;