feat: Updates GitHub button and adds glassy effect to navbar (#10)

* feat: Removes static image and add hover arrow * fix: Fixes white line * refactor: Uses next/image * refactor: Updates GitHub button * refactor: Reordered project
quack-ai · Sep 29, 2023 · 972064e · 972064e
1 parent 4b8b129
commit 972064e
Show file tree

Hide file tree

Showing 14 changed files with 147 additions and 99 deletions.
diff --git a/public/vscode.svg b/public/vscode.svg
diff --git a/src/components/Backers.tsx b/src/components/Backers.tsx
@@ -1,5 +1,9 @@
+import Image from "next/image";
 import { FC } from "react";
 
+import agoLogo from "../../public/agoranov.png";
+import efLogo from "../../public/ef.png";
+import ycLogo from "../../public/yc.svg";
 import styles from "../styles/Backers.module.css";
 
 const Backers: FC = () => {
@@ -8,14 +12,18 @@ const Backers: FC = () => {
       <p className={styles.subtitle}>Backed by</p>
       <div className={styles.logoGrid}>
         <a href="https://www.joinef.com/" className={styles.logoCard}>
-          <img src="/ef.png" alt="Entrepreneur First" className={styles.logo} />
+          <Image
+            src={efLogo}
+            alt="Entrepreneur First"
+            className={styles.logo}
+          />
         </a>
         <a href="https://www.ycombinator.com/" className={styles.logoCard}>
-          <img src="/yc.svg" alt="Y Combinator" className={styles.logo} />
+          <Image src={ycLogo} alt="Y Combinator" className={styles.logo} />
         </a>
 
         <a href="https://www.agoranov.com/" className={styles.logoCard}>
-          <img src="/agoranov.png" alt="Agoranov" className={styles.logo} />
+          <Image src={agoLogo} alt="Agoranov" className={styles.logo} />
         </a>
       </div>
     </section>

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -5,8 +5,8 @@ import styles from "../styles/Footer.module.css";
 
 const Footer: FC = () => {
   return (
-    <footer>
-      <p>Copyright 2023 Quack AI</p>
+    <footer className={styles.footerContainer}>
+      <p>© 2023 Quack Labs, Inc.</p>
       <div className={styles.socialLinks}>
         <a
           href="https://discord.gg/E9rY3bVCWd"
@@ -30,34 +30,6 @@ const Footer: FC = () => {
           <FaTwitter className={styles.socialIcon} color="#1D9BF0" />
         </a>
       </div>
-      <style jsx>{`
-        footer {
-          width: 100%;
-          height: auto;
-          border-top: 1px solid #eaeaea;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          padding: 1rem; /* Adds some padding around the elements */
-        }
-        footer img {
-          margin-left: 0.5rem;
-        }
-        footer a {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          text-decoration: none;
-          color: inherit;
-        }
-        footer p {
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          text-decoration: none;
-          color: inherit;
-        }
-      `}</style>
     </footer>
   );
 };

diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
@@ -1,6 +1,7 @@
 import Image from "next/image";
 import { FC } from "react";
 import { FaDiscord } from "react-icons/fa";
+import { TbBrandVscode } from "react-icons/tb";
 import Typewriter from "typewriter-effect";
 
 import waveTop from "../../public/wave-top.svg";
@@ -45,15 +46,17 @@ const Hero: FC = () => {
           className={styles.card}
         >
           <h3 className={styles.cardTitle}>
-            <img src="/vscode.svg" alt="VSCode Icon" className={styles.icon} />{" "}
-            VSCode extension &rarr;
+            <TbBrandVscode className={styles.icon} color="#0066b8" /> VSCode
+            extension
+            <span className={styles.arrow}>&rarr;</span>
           </h3>
           <p>Let&apos;s get you started for your next contributions!</p>
         </a>
 
         <a href="https://discord.gg/E9rY3bVCWd" className={styles.card}>
           <h3 className={styles.cardTitle}>
-            <FaDiscord className={styles.icon} color="#5865F2" /> Discord &rarr;
+            <FaDiscord className={styles.icon} color="#5865F2" /> Discord
+            <span className={styles.arrow}>&rarr;</span>
           </h3>
           <p>Join other developers from the Quack community.</p>
         </a>

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -1,4 +1,6 @@
+import Image from "next/image";
 import { FC, useEffect, useState } from "react";
+import { FaGithub } from "react-icons/fa";
 
 import styles from "../styles/Navbar.module.css";
 
@@ -12,18 +14,23 @@ const Navbar: FC = () => {
   return (
     <nav className={styles.navbar}>
       <div className={styles.logoSection}>
-        <img src="/quack.png" alt="Quack AI" className={styles.logo} />
+        <Image
+          src="/quack.png"
+          alt="Quack AI"
+          width={64}
+          height={64}
+          className={styles.logo}
+        />
         <span className={styles.companyName}>Quack AI</span>
       </div>
       <div className={styles.ctaButton}>
         {isClient && (
           <a
-            className="github-button"
+            className={styles.githubButton}
             href="https://github.com/quack-ai/companion"
-            data-size="large"
-            data-show-count="false"
             aria-label="Star quack-ai/companion on GitHub"
           >
+            <FaGithub className={styles.githubLogo} />
             Star us on GitHub
           </a>
         )}

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,6 +1,7 @@
 import { Analytics } from "@vercel/analytics/react";
 import type { AppProps } from "next/app";
 import Head from "next/head";
+import "../styles/globals.css";
 
 export default function App({ Component, pageProps }: AppProps) {
   return (

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -36,6 +36,10 @@ export default function Document() {
         <meta name="twitter:title" content={metaTitle} />
         <meta name="twitter:description" content={metaDescription} />
         <meta name="twitter:image" content={metaBanner} />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Onest:wght@400&family=Poppins:wght@300;400&display=swap"
+          rel="stylesheet"
+        ></link>
       </Head>
       <body>
         <Main />

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -28,28 +28,6 @@ const Home: FC = () => {
         <Backers />
       </main>
       <Footer />
-      <style jsx global>{`
-        html,
-        body {
-          padding: 0;
-          margin: 0;
-          font-family:
-            -apple-system,
-            BlinkMacSystemFont,
-            Segoe UI,
-            Roboto,
-            Oxygen,
-            Ubuntu,
-            Cantarell,
-            Fira Sans,
-            Droid Sans,
-            Helvetica Neue,
-            sans-serif;
-        }
-        * {
-          box-sizing: border-box;
-        }
-      `}</style>
     </div>
   );
 };

diff --git a/src/styles/Backers.module.css b/src/styles/Backers.module.css
@@ -10,8 +10,8 @@
   display: flex;
   justify-content: center;
   flex-wrap: nowrap; /* Prevents the logos from wrapping into multiple lines */
-  max-width: 100%; /* Ensures that the grid takes the full width */
-  margin: 0 auto; /* Centers the grid */
+  max-width: 100%;
+  margin: 0 auto;
   margin-top: 10px;
 }
 
@@ -36,8 +36,8 @@
 .logo {
   height: 64px;
   width: auto;
-  filter: grayscale(100%); /* Makes the image grayscale */
-  transition: filter 0.3s ease; /* Smooth transition for the filter */
+  filter: grayscale(100%);
+  transition: filter 0.3s ease;
 }
 
 .subtitle {

diff --git a/src/styles/Footer.module.css b/src/styles/Footer.module.css
@@ -1,3 +1,31 @@
+.footerContainer {
+  width: 100%;
+  height: auto;
+  border-top: 1px solid #eaeaea;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 5%;
+  background-color: rgba(255, 255, 255, 0.7);
+}
+.footerContainer img {
+  margin-left: 0.5rem;
+}
+.footerContainer a {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-decoration: none;
+  color: inherit;
+}
+.footerContainer p {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-decoration: none;
+  color: inherit;
+}
+
 .socialLinks {
   display: flex;
   align-items: center;
@@ -10,9 +38,9 @@
   width: 32px;
   margin: 0 24px; /* Horizontal margin between icons */
   cursor: pointer; /* Makes the icon appear clickable */
-  transition: opacity 0.3s ease; /* Smooth transition for hover effect */
+  transition: opacity 0.3s ease;
 }
 
 .socialIcon:hover {
-  opacity: 0.7; /* Fades the icon slightly when hovered */
+  opacity: 0.7;
 }
diff --git a/src/styles/Hero.module.css b/src/styles/Hero.module.css
@@ -5,19 +5,11 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  min-height: 90vh; /* New Property */
+  min-height: 91vh;
   position: relative;
-  /* background-image: url('/background2.jpg'); */
-  background-image: linear-gradient(
-      to bottom,
-      rgba(255, 255, 255, 0.5),
-      rgba(255, 255, 255, 0.5)
-    ),
-    url("/background.jpg");
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
-  background-color: white; /* Or any other color */
 }
 
 .cardTitle {
@@ -46,14 +38,15 @@
   transition:
     color 0.15s ease,
     border-color 0.15s ease;
-  background: rgba(255, 255, 255, 0.3); /* Semi-transparent white background */
+  background: rgba(255, 255, 255, 0.3);
 }
 
 .card:hover,
 .card:focus,
 .card:active {
   color: #9038ff;
   border-color: #9038ff;
+  background: rgba(255, 255, 255, 0.7);
 }
 
 .card h3 {
@@ -75,14 +68,14 @@
 }
 
 .icon {
-  margin-right: 10px; /* Space between the icon and the text */
-  height: 24px; /* Or any other size */
-  width: 24px; /* Or any other size */
-  filter: grayscale(100%) brightness(0); /* Make the icon black */
+  margin-right: 10px;
+  height: 24px;
+  width: 24px;
+  filter: grayscale(100%) brightness(0);
 }
 
 .card:hover .icon {
-  filter: grayscale(0%) brightness(1); /* Remove the grayscale filter */
+  filter: grayscale(0%) brightness(1);
 }
 
 .wave-top {
@@ -130,3 +123,13 @@
   line-height: 1.5;
   font-size: 1.5rem;
 }
+
+.arrow {
+  display: inline-block;
+  transition: transform 0.3s ease;
+  padding-left: 5px;
+}
+
+.card:hover .arrow {
+  transform: translateX(5px);
+}
diff --git a/src/styles/Navbar.module.css b/src/styles/Navbar.module.css
@@ -2,12 +2,19 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 1rem 20px; /* Remove horizontal padding */
-  margin: 0; /* Add this to reset margin */
-  background-color: #ffffff;
-  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1);
-  width: 100%; /* Add this to ensure it takes the full width */
+  padding: 1rem 5%;
+  margin: 0;
+  width: 100%;
   max-height: 10vh;
+
+  /* Glassmorphism styling */
+  background-color: rgba(200, 200, 200, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+
+  /* Shadows and border */
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+  /* border-radius: 12px; */
 }
 
 .logoSection {
@@ -24,7 +31,8 @@
   font-size: 2.5rem;
   font-weight: bold;
   color: #9038ff;
-  font-family: "Helvetica", "Arial", sans-serif; /* Updated the font family */
+  font-family: "Poppins", "Segoe UI", "ui-sans-serif", "Helvetica", "Arial",
+    sans-serif;
 }
 
 .ctaButton {
@@ -45,3 +53,29 @@
     padding: 5px 8px;
   }
 }
+
+.githubButton {
+  background-color: #333333;
+  color: white;
+  display: flex;
+  align-items: center;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 20px;
+  text-decoration: none;
+  font-size: 16px;
+  transition: background-color 0.3s;
+  box-shadow: 1px 5px 6px rgba(0, 0, 0, 0.2);
+}
+
+.githubButton:hover {
+  background-color: #555555; /* Slightly lighter grey on hover */
+}
+
+.githubLogo {
+  margin-right: 12px; /* Adjust this value based on your preference */
+  width: 24px;
+  height: 24px;
+  /* You can adjust the font-size to change the size of the icon, if needed */
+  font-size: 24px;
+}