Improve UI and rename Twitter (#469)

* ✏️ rename Twitter to X

* 💄 improve homepage UI

* 💄 improve announcement bar appearance on phone

* 🎨 decrease gap between cards

README.md

@@ -9,7 +9,7 @@ Want to have some fun and be a part of the Web3 revolution? Join our community a
 
 Don't miss out on the Web3 action. Join us now and let's shape the future together! 🌟
 
-<a href="https://discord.com/invite/cRjhjFRRre"><img src="https://cdn.worldvectorlogo.com/logos/discord-6.svg" title="Discord" alt="Discord Community" width="40"/></a><a href="https://twitter.com/4ccommunityhq"><img src="https://cdn.worldvectorlogo.com/logos/twitter-6.svg" title="Twitter" alt="Twitter Account" width="40"/></a>
+<a href="https://discord.com/invite/cRjhjFRRre"><img src="https://cdn.worldvectorlogo.com/logos/discord-6.svg" title="Discord" alt="Discord Community" width="40"/></a><a href="https://twitter.com/4ccommunityhq"><img src="https://cdn.worldvectorlogo.com/logos/twitter-6.svg" title="X" alt="X Account" width="40"/></a>
 
 ## ⚙️ Tech Stack
 This project was built upon:

docs/node-providers/node-providers.md

@@ -4,7 +4,7 @@ sidebar_position: 1
 
 # 💻 Node Providers
 
-[Node Providers Twitter Thread](https://twitter.com/FrancescoCiull4/status/1496711754776199168)
+[Node Providers X Thread](https://twitter.com/FrancescoCiull4/status/1496711754776199168)
 
 - [Alchemy](https://www.alchemy.com/) One magic line of code supercharges your development with the world’s most powerful blockchain developer platform, relied upon by the majority of the world's top blockchain apps.
 - [Chainstack](https://www.chainstack.com/) From startups to large enterprises, thousands of businesses of all sizes use Chainstack’s software and APIs to build, run, and scale blockchain applications.

docs/oracles/oracles.md

@@ -4,4 +4,4 @@ sidebar_position: 1
 
 # Oracles
 
-[What is a Blockchain Oracle? Twitter thread](https://twitter.com/FrancescoCiull4/status/1481895919121534979)
+[What is a Blockchain Oracle? X thread](https://twitter.com/FrancescoCiull4/status/1481895919121534979)

docs/roadmap/introduction.md

@@ -4,9 +4,9 @@ sidebar_position: 0
 
 # How to learn Web3
 
-Hi, I am Francesco.
 
-I share daily content about Web3 (mainly on [Twitter](https://twitter.com/FrancescoCiull4) and [YouTube](https://www.youtube.com/channel/UCBRxDSTfr2aJVODDh4WG_7g))
+Hi, I am Francesco, and I share daily content about Web3 (mainly on [X](https://twitter.com/FrancescoCiull4) and [YouTube](https://www.youtube.com/channel/UCBRxDSTfr2aJVODDh4WG_7g))
+
 
 
 In this article, I will summarize the steps you can take in order to learn Web3.

docusaurus.config.js

@@ -109,7 +109,7 @@ const config = {
                 href: "https://discord.com/invite/JZ2btyTfzQ",
               },
               {
-                label: "Twitter",
+                label: "X",
                 href: "https://twitter.com/4ccommunityhq",
               },
             ],

src/components/HomepageFeatures/index.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
 import clsx from 'clsx';
 import styles from './styles.module.css';
 
@@ -50,33 +50,55 @@ function FeatureItem({url, text}){
   );
 }
 
-function Feature({title, icon, items }) {
+
+const Feature = React.forwardRef(({ title, icon, items }, ref) => {
   return (
-    <article className={clsx('col col--4')}>
+    <section className={clsx('col col--4')}>
       <div className={styles.homecard}>
-        <img src={icon} className={styles.homeIcon}></img>
+        <img src={icon} className={styles.homeIcon} alt={title} />
         <h2>{title}</h2>
-        <div className={styles.listContainer}>
-        <ul>
-          {items.map((props, idx) => (
-            <FeatureItem key={idx} {...props} />
-          ))}
-        </ul>
+        <div ref={ref} className={styles.listContainer}>
+          <ul>
+            {items.map((props) => (
+              <FeatureItem key={props.url} {...props} />
+            ))}
+          </ul>
         </div>
       </div>
-    </article>
+    </section>
   );
-}
-
+});
 
 export default function HomepageFeatures() {
+  const featureRefs = useRef([]);
+
+  useEffect(() => {
+    let tallestHeight = 0;
+
+    featureRefs.current.forEach(ref => {
+      if (ref && ref.offsetHeight > tallestHeight) {
+        tallestHeight = ref.offsetHeight;
+      }
+    });
+
+    featureRefs.current.forEach(ref => {
+      if (ref) {
+        ref.style.height = `${tallestHeight}px`;
+      }
+    });
+  }, []);
+
   return (
     <section className={styles.features}>
-        <ul className={styles.grid3col}>
-          {FeatureList.map((props, idx) => (
-            <Feature key={idx} {...props} />
-          ))}
-        </ul>
+      <ul className={styles.grid3col}>
+        {FeatureList.map((props, idx) => (
+          <Feature 
+            key={props.title} 
+            ref={el => featureRefs.current[idx] = el} 
+            {...props} 
+          />
+        ))}
+      </ul>
     </section>
   );
-}
+}

src/components/HomepageFeatures/styles.module.css

@@ -10,104 +10,103 @@
   width: 200px;
 }
 
-.grid3col{
+.grid3col {
   display: grid;
-  grid-template-columns: repeat(4,minmax(0,1fr));
-  gap:56px;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 5px;
   margin: 0 auto;
-  padding: 0;
+  align-items: start;
 }
+
 @media screen and (max-width: 1680px) {
-  .grid3col{
-    display: grid;
-    grid-template-columns: repeat(3,minmax(0,1fr));
-    gap:56px;
-    margin: 0 auto;
+  .grid3col {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 }
+
 @media screen and (max-width: 1180px) {
-  .grid3col{
-    display: grid;
-    grid-template-columns: repeat(2,minmax(0,1fr));
-    gap:56px;
-    margin: 0 auto;
+  .grid3col {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
+
 @media screen and (max-width: 768px) {
-  .grid3col{
-    display: grid;
-    grid-template-columns: repeat(1,minmax(0,1fr));
-    gap:56px 0px;
-    margin: 0 auto;
+  .grid3col {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+    gap: 56px 0;
   }
 }
 
-.listContainer{
-  min-height: 8.8rem;
-  max-height: 295px;
+.listContainer {
+  padding-bottom: 1rem;
+  flex-grow: 1;
 }
+
 @media screen and (max-width: 768px) {
-  .listContainer{
+  .listContainer {
     min-height: 3rem;
-    padding-bottom: 1rem;
   }
 }
-.listContainer li{
+
+.listContainer li {
   list-style-type: none;
   position: relative;
 }
 
-.listContainer li:before{
+.listContainer li:before {
   --ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path fill="white" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path></svg>');
   background: var(--ifm-menu-link-sublist-icon) 50% / 1.25rem 1.25rem;
   transform: rotate(90deg);
-    content: '';
-    position: absolute;
-    height: 1.25rem;
-    width: 1.25rem;
-    left: -1.5rem;
-    top: 0.5rem;
-  }
+  content: '';
+  position: absolute;
+  height: 1.25rem;
+  width: 1.25rem;
+  left: -1.5rem;
+  top: 0.5rem;
+}
 
-.homecard{
+.homecard {
   background-color: #1c1f26;
   width: 320px;
-  max-height: 300px;
-  padding: 8px;
+
+  padding: 3px;
+  display: flex;
+  flex-direction: column;
   position: relative;
-  display: block;
   border-radius: 16px;
   border: 1px solid #a8b3cf33;
 }
 
-html[data-theme='light'] .homecard{
+html[data-theme='light'] .homecard {
   background-color: #fff;
-  border: 1px solid #a8b3cf;
+  border-color: #a8b3cf;
   color: #000;
 }
 
-.homecard h2{
+.homecard h2 {
   margin: 8px 16px;
   min-height: 2.4rem;
   font-size: 2.25rem;
   line-height: 1.4;
 }
 
-html[data-theme='light'] .homecard a{
-   color: #000;
-}
-
-.homecard a{
+.homecard a {
   color: white;
   text-decoration: underline;
   font-size: 1.50rem;
 }
-html[data-theme='light'] .homeIcon{
-  filter: brightness(0.5);
+
+html[data-theme='light'] .homecard a {
+  color: #000;
 }
-.homeIcon{
+
+.homeIcon {
   width: 28px;
   height: 28px;
   border-radius: 0!important;
   margin: 12px 0 4px 16px;
 }
+
+html[data-theme='light'] .homeIcon {
+  filter: brightness(0.5);
+}

src/css/custom.css

@@ -165,7 +165,7 @@ div[class^="announcementBar_"] {
   );
   font-weight: bold;
   font-size: 1.45rem;
-  padding:1.45em;
+  padding: 1.45em;
 }
 
 .red > a {

src/resources/Project Ideas/project-ideas.md

@@ -55,7 +55,7 @@ By end of the project, you will be able to allow users to add funds to the smart
 ##
 ## NFT collection
 
-It is 2022 and NFTs are everywhere, from Reddit to Twitter everyone is talking about them. People are making billion dollars by selling their NFTs. You can build an NFT marketplace where users can sell and buy NFTs. You can allow users to connect their wallet and bid or purchased any NFT they like based on the seller's preference.
+It is 2022 and NFTs are everywhere, from Reddit to X (formerly Twitter) everyone is talking about them. People are making billion dollars by selling their NFTs. You can build an NFT marketplace where users can sell and buy NFTs. You can allow users to connect their wallet and bid or purchased any NFT they like based on the seller's preference.
 
 ### What you will learn
 

src/resources/twitterposts.md

@@ -423,7 +423,7 @@ You can find Francesco [here](http://francescociulla.com)
 | 20-08-2023|Ethereum whitepaper - long post|https://twitter.com/FrancescoCiull4/status/1693147804586140001|
 | 21-08-2023|Blockchain bridges - long post|https://twitter.com/FrancescoCiull4/status/1693534844242850268|
 | 22-08-2023|Learn Web3 links|https://twitter.com/FrancescoCiull4/status/1693823525469958218|
-| 23-08-2023|Twitter Space about fw3 resources|https://twitter.com/i/spaces/1vAGRAOeqnqKl)|
+| 23-08-2023|X Space about fw3 resources|https://twitter.com/i/spaces/1vAGRAOeqnqKl)|
 | 24-08-2023|Web3 Stack - August 2023|https://twitter.com/FrancescoCiull4/status/1694616815186354561|
 | 25-08-2023|Merkle trees|https://twitter.com/FrancescoCiull4/status/1694954280120148188|
 | 26-08-2023|Intro to Ethereum|https://twitter.com/FrancescoCiull4/status/1695348595564703952|