Merge pull request #11 from adastackio/nextra3

Hero update, content updates, misc. improvements
adastackio · May 30, 2024 · 04f893c · 04f893c · vercel · May 30, 2024
2 parents d484445 + 6cc67a0
commit 04f893c
Show file tree

Hide file tree

Showing 103 changed files with 2,072 additions and 1,567 deletions.
diff --git a/components/cards.d.ts b/components/cards.d.ts
diff --git a/components/cards.js b/components/cards.js
diff --git a/components/hero.js b/components/hero.js
@@ -1,10 +1,22 @@
-import React, { useEffect } from "react";
-import { handleHeaderButtonClick } from "../scripts/handleHeaderButtonClick";
+import React from "react";
+import Image from "next/image";
+import BGImg from "./../assets/dark/1.jpg";
+import { handleHeroButtonClick } from "../scripts/handleHeroButtonClick";
+import { handleHeroButtonClickMobile } from "../scripts/handleHeroButtonClickMobile";
 
 function Hero() {
-  useEffect(() => {}, []);
   return (
     <div id="animation" className="experience animation">
+      <Image
+        src={BGImg}
+        fill
+        style={{ objectFit: "cover" }}
+        placeholder="blur"
+        priority
+        quality={80}
+        alt="adastack background texture"
+        className="hero-bg"
+      />
       <div className="animation-overlay"></div>
       <div className="animation-content-container">
         <div className="animation-title-container">
@@ -14,29 +26,39 @@ function Hero() {
         <ul className="animation-description-text">
           <li>
             We are an{" "}
-            <a href="https://github.com/adastackio/adastack.io">open source</a>{" "}
+            <a href="https://github.com/adastackio/adastack.io" target="_blank">
+              open source
+            </a>{" "}
             ecosystem explorer.
           </li>
           <li>The website is still in development.</li>
           <li>
-            Please vote for us in{" "}
-            <a href="https://projectcatalyst.io/funds/12">Catalyst Fund 12</a>!
-            🙏
+            Please{" "}
+            <a
+              href="https://cardano.ideascale.com/c/idea/119612"
+              target="_blank"
+            >
+              vote for us
+            </a>{" "}
+            in{" "}
+            <a href="https://projectcatalyst.io/funds/12" target="_blank">
+              Catalyst Fund 12
+            </a>
+            ! 🙏
           </li>
         </ul>
-
         <div className="animation-button-container">
           <button
             className="animation-button mx-1 px-5 mt-4 text-white transition-colors duration-150 border border-white rounded-lg focus:shadow-outline"
             title="Explore All"
-            onClick={() => handleHeaderButtonClick(event)}
+            onClick={() => handleHeroButtonClick(event)}
           >
             Explore All
           </button>
           <button
             className="animation-button-mobile mx-1 px-5 mt-4 text-white transition-colors duration-150 border border-white rounded-lg focus:shadow-outline"
             title="Explore All"
-            onClick={() => handleHeaderButtonClick(event)}
+            onClick={() => handleHeroButtonClickMobile(event)}
           >
             Explore All
           </button>

diff --git a/css/styles.css b/css/styles.css
@@ -9,6 +9,10 @@ a {
   transition: color 0.3s ease;
 }
 
+li a {
+  color: #007bff;
+}
+
 a:hover {
   color: #0056b3;
 }
@@ -53,7 +57,7 @@ html[style*="color-scheme: light;"]
 /* Home animation */
 #animation {
   position: relative;
-  height: calc(100vh - var(--nextra-navbar-height));
+  height: calc(100vh - 4rem);
   width: calc(100vw - 16rem - 24px);
   z-index: 0;
 }
@@ -65,12 +69,12 @@ article.nextra-content:has(#animation) {
 }
 
 html[style*="color-scheme: light;"] #animation {
-  background-image: url("./../assets/dark/1.jpg");
+  background-color: #1c1c1c;
   background-size: cover;
 }
 
 html[style*="color-scheme: dark;"] #animation {
-  background-image: url("./../assets/dark/1.jpg");
+  background-color: #1c1c1c;
   background-size: cover;
 }
 
@@ -90,7 +94,7 @@ html[style*="color-scheme: dark;"] #animation {
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: rgba(0, 0, 0, 0.5); /* Dark overlay with transparency */
+  background-color: rgba(0, 0, 0, 0.25); /* Dark overlay with transparency */
   z-index: 1; /* Ensure it sits above other content */
 }
 
@@ -375,24 +379,30 @@ footer {
   .navbar-github-link {
     /* display: none; */
   }
+
   #animation {
     width: 100vw;
     height: calc(100vh - 4rem);
     overflow: hidden;
   }
+
   article.nextra-content:has(#animation) {
     padding-right: 0px;
     padding-left: 0px;
   }
+
   .animation-button {
     display: none;
   }
+
   article.nextra-content:has(#animation) {
     overflow: visible;
   }
+
   a.nextra-card {
     margin: 10px 10px;
   }
+
   .animation-content-container {
     overflow: scroll;
     border-radius: 0px !important;
@@ -403,10 +413,7 @@ footer {
     align-items: center;
     height: 100%;
     flex-direction: column;
-  }
-
-  .animation-overlay {
-    background-color: rgba(0, 0, 0, 0.5) !important;
+    border: none;
   }
 
   html[style*="color-scheme: light;"] .animation-content-container {
@@ -424,9 +431,11 @@ footer {
     width: 102vw;
     background: transparent;
     backdrop-filter: blur(0px);
+    border: none;
     border-radius: 0px;
     box-shadow: 0;
   }
+
   ul.animation-description-text {
     color: white;
   }
@@ -467,6 +476,20 @@ footer {
   a:has(.sidebar-menu-item) {
     padding: 15px 0 15px 10px;
   }
+  .animation-overlay {
+    background-color: rgba(0, 0, 0, 0.5) !important;
+    position: fixed !important;
+  }
+
+  .hero-bg {
+    object-position: 34%;
+    transform: rotate(180deg);
+    position: fixed !important;
+  }
+  .nextra-cards.home-navigation-cards {
+    z-index: 10;
+    position: relative;
+  }
 }
 /* Everything Under Large Size */
 @media (max-width: 991px) {
@@ -482,7 +505,6 @@ footer {
   #animation {
     display: block !important; /* Show animation on larger screens */
   }
-
   .nextra-cards {
     display: none !important; /* Hide cards on larger screens */
   }

diff --git a/pages/catalyst/apply_for_funding.mdx b/pages/catalyst/apply_for_funding.mdx
@@ -5,36 +5,44 @@ seo_description:
 
 # Apply for Funding
 
-This content is not available yet because Adastack is still in development. Your support in the form of a vote in [Catalyst Fund 12](https://cardano.ideascale.com/c/idea/119612) would greatly help us to complete the website quickly. Our goal is to offer the Cardano community an open-source, regularly updated, SEO-friendly library of Cardano tools and resources.
+### This Page is Under Construction
 
-### Website Features:
+- Adastack is still in development, so this page's content is not available quite yet.
+- To help expedite the site's development and get resources on every page, consider supporting <a
+              href="https://cardano.ideascale.com/c/idea/119612"
+              target="_blank">our proposal</a> in <a href="https://projectcatalyst.io/funds/12" target="_blank">Catalyst Fund 12</a>! 🙏
+- Adastack is a wide-ranging collection of 100+ pages of Cardano resources. The site is designed to be beginner-friendly, community-focused, carefully organized, SEO-ready, and <a href="https://github.com/adastackio/adastack.io" target="_blank">open source</a>.
+
+### Follow us for Updates
+
+- [Adastack Twitter](https://twitter.com/adastackio)
+- [Adastack GitHub](https://github.com/adastackio/adastack.io)
+- [Dev's Twitter](https://twitter.com/tuckertriggs)
+
+### Website Features
+
+Here we provide further detail about the key features of the website:
 
 - **Comprehensive** — Once all inital content is added there will be 1500+ Cardano tools and links on 100+ resource pages. See a sample resource page: [Blockchain Explorers](https://www.adastack.io/on_chain/blockchain_explorers).
 
 - **Carefully Organized** — The website will start with 14 main categories that collectively encompass nearly all of the Cardano ecosystem. The site's architecture is designed flexibly so the site can grow and adapt as new areas of Cardano emerge.
 
 - **Open-Source** — Adastack.io is fully [open-source](https://github.com/adastackio/adastack.io) under the [MIT license](https://github.com/adastackio/adastack.io/blob/main/LICENSE), allowing anyone can view, copy, or suggest modifications to the code. We actively engage in the Cardano community and will incorporate feedback and suggestions. Contributions help the website stay up-to-date and accurate.
 
-- **Fast** — The website is designed for speed, utilizing a popular and modern technology stack of React, Next.js, Tailwind, Markdown, and Git/Github. It also uses the [Nextra theme](https://nextra.site/), which is favored for large documentation websites including Cardano's [Aiken](https://aiken-lang.org/fundamentals/getting-started) and [Demeter.run](https://docs.demeter.run/). The theme is suitable for Adastack because it has optimized search, simple navigation, excellent readability, and an "Edit this page" button on every page that allows for easy contributions.
+- **Fast** — The website is designed for speed, utilizing a popular and modern technology stack of React, Next.js, Tailwind, Markdown, and Git/Github. It also uses the [Nextra theme](https://nextra.site/), which is favored for large documentation websites including Cardano's [Aiken](https://aiken-lang.org/fundamentals/getting-started) and [Demeter.run](https://docs.demeter.run/). The theme is suitable for Adastack because it has optimized search, simple navigation, excellent readability, and allows for easy contributions.
 
-- **SEO Optimized** — The site's content is optimized for search engines to help increase its ranking on search. Custom meta-titles and meta-descriptions are added for each page to boost search engine visibility. The site also uses a service called [indexed.pro](https://indexed.pro/) to automatically submit the site to Google after any change to ensure that the freshest content is always used. Ultimately Adastack should help improve search results in general for Cardano queries on search engines and LLMs.
+- **SEO-Optimized** — The site's content is optimized for search engines to help increase its ranking on search. Custom meta-titles and meta-descriptions are added for each page to boost search engine visibility. The site also uses a service called [indexed.pro](https://indexed.pro/) to automatically submit the site to Google after any change to ensure that the freshest content is always used. Ultimately Adastack should help improve search results in general for Cardano queries on search engines and LLMs.
 
 - **Quickly Searchable** — Adastack uses [FlexSearch](https://github.com/nextapps-de/flexsearch), a search tool that pre-indexes all content for real-time search results in the website's search bar.
 
 - **Open metrics** — Plausible, a privacy-focused analytics service, is used to collect anonymous visitor metrics over time. This helps to gauge site performance and engagement over time. These metrics are publicly accessible on the site's [Plausible Dashboard](https://plausible.io/adastack.io).
 
 - **Onboarding Guides** — The website features over 10 guides designed to educate newcomers about foundational Cardano topics and help them get started using the chain. These guides cover essential topics such as [What is Blockchain?](https://www.adastack.io/intro_to_cardano/what_is_blockchain), [Start Using Cardano](https://www.adastack.io/intro_to_cardano/start_using_cardano), [How to Start Staking](https://www.adastack.io/staking/how_to_start_staking), and more.
 
-- **Contributions are Encouraged** — Each page on the site has an "edit this page" button that directs users to the GitHub web interface to submit a contribution. This straightforward process welcomes all users, regardless of technical expertise, to enhance the site by adding resources or updating content.
+- **Contributions are Encouraged** — Each page on the site has an "edit this page" button that directs users to the GitHub web interface to submit a contribution. This straightforward process welcomes all users, regardless of technical expertise, to enhance the site by adding resources or improving content.
 
-- **Responsive** — The site is responsive and adapts to different screen sizes, ensuring usability on desktops, tablets, phones, and other devices.
+- **Responsive** — The site is responsive and adapts to different screen sizes, ensuring its usability on desktops, tablets, phones, and other devices.
 
 - **Niche Categorization** — Resources are organized into precise and refined categories so people searching can find a page that exactly corresponds to their search. For example, rather than a general category such as "Cardano Social Media," adastack has subcategory pages such as "YouTube", "Twitter", "Podcasts", "Newsletters", "Forums and Reddit", and "Telegram".
 
-- **Long-term Vision** — I view this project as an experiment where I can contribute to Cardano, observe the growth of the ecosystem, and learn some new skills. Even after the conclusion of Catalyst I plan to continue being involved with the project and expanding it as time allows. Regardless, the site can be continued or repurposed by anyone since it is open-source.
-
-### Follow us:
-
-- [Adastack Twitter](https://twitter.com/adastackio)
-- [Adastack GitHub](https://github.com/adastackio/adastack.io)
-- [Dev's Twitter](https://twitter.com/tuckertriggs)
+- **Long-term Vision** — I view this project as an experiment where I can contribute to Cardano, observe the growth of the ecosystem, and learn some new development skills. Even after the conclusion of Catalyst I plan to continue being involved with the project and expanding it as time allows. In any case, the site can be continued, forked, or repurposed by anyone since it is open-source.