Optimization

components/Footer.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { css } from "@emotion/css";
 import { FaTwitter, FaDiscord, FaGithub } from 'react-icons/fa';
+import Image from 'next/image'; 
+import guildPic from '../public/guild.jpg'; 
 
 const Footer: React.FC = () => {
   return (
@@ -69,6 +71,27 @@ const Footer: React.FC = () => {
           >
             <FaGithub size={20} />
           </a>
+
+          <a
+            href="https://guild.xyz/activities" 
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <Image
+              src={guildPic} 
+              alt="Guild Icon" 
+              width={20} 
+              height={20} 
+              className={css`
+                border-radius: 50%; 
+                opacity: 0.7;
+                transition: opacity 0.3s ease;
+                &:hover {
+                  opacity: 1;
+                }
+              `}
+            />
+          </a>
         </div>
         <div
           className={css`

components/LoadingAnimation.tsx

@@ -7,150 +7,9 @@ const rainbow = keyframes`
 `;
 
 const LoadingAnimation: React.FC = () => {
-  const [loadedLetters, setLoadedLetters] = useState(0);
-  const [isFullHourglass, setIsFullHourglass] = useState(true);
-  const animationRef = useRef<number>();
-  const emojisRef = useRef<Array<{ x: number; y: number; vx: number; vy: number; emoji: string }>>([]);
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-
-  const word = 'ActivityDAOs';
-  const letters = word.split('');
-  const activityEmojis = ['🏃‍♂️', '🚴‍♀️', '🏋️‍♂️', '🧘‍♀️', '🏊‍♂️', '🎣', '🏕️', '⚽', '🏀','🛹'];
-
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return;
-
-    const resizeCanvas = () => {
-      canvas.width = window.innerWidth;
-      canvas.height = window.innerHeight;
-    };
-
-    resizeCanvas();
-    window.addEventListener('resize', resizeCanvas);
-
-
-    emojisRef.current = [...Array(2)].flatMap(() => 
-      activityEmojis.map(emoji => ({
-        x: Math.random() * canvas.width,
-        y: Math.random() * canvas.height,
-        vx: (Math.random() - 0.5) * 2,
-        vy: (Math.random() - 0.5) * 2,
-        emoji: emoji
-      }))
-    );
-
-    const animate = () => {
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-      emojisRef.current.forEach(emoji => {
-        emoji.x += emoji.vx;
-        emoji.y += emoji.vy;
-
-        if (emoji.x < 0 || emoji.x > canvas.width) emoji.vx *= -1;
-        if (emoji.y < 0 || emoji.y > canvas.height) emoji.vy *= -1;
-
-        ctx.font = '2rem Arial';
-        ctx.fillText(emoji.emoji, emoji.x, emoji.y);
-      });
-
-      animationRef.current = requestAnimationFrame(animate);
-    };
-
-    animate();
-
-    const letterInterval = setInterval(() => {
-      setLoadedLetters((prev) => (prev < word.length ? prev + 1 : prev));
-    }, 150);
-
-    const hourglassInterval = setInterval(() => {
-      setIsFullHourglass((prev) => !prev);
-    }, 1000);
-
-    return () => {
-      clearInterval(letterInterval);
-      clearInterval(hourglassInterval);
-      cancelAnimationFrame(animationRef.current!);
-      window.removeEventListener('resize', resizeCanvas);
-    };
-  }, []);
-
   return (
-    <div
-      className={css`
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: var(--background-default-default);
-        z-index: 9999;
-        overflow: hidden;
-      `}
-    >
-      <canvas
-        ref={canvasRef}
-        className={css`
-          position: absolute;
-          top: 0;
-          left: 0;
-        `}
-      />
-      <div
-        className={css`
-          position: absolute;
-          top: 0;
-          left: 0;
-          width: 100%;
-          height: 100%;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          z-index: 2;
-        `}
-      >
-        <h1
-          className={css`
-            font-size: 4rem;
-            font-weight: bold;
-            font-family: var(--font-dynapuff);
-            display: flex;
-            background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
-            background-size: 200% auto;
-            color: transparent;
-            -webkit-background-clip: text;
-            background-clip: text;
-            animation: ${rainbow} 5s linear infinite;
-          `}
-        >
-          {letters.map((letter, index) => (
-            <span
-              key={index}
-              className={css`
-                opacity: ${index < loadedLetters ? 1 : 0};
-                transition: opacity 0.4s ease-in-out;
-              `}
-            >
-              {letter}
-            </span>
-          ))}
-        </h1>
-      </div>
-      <div
-        className={css`
-          position: absolute;
-          bottom: 20px;
-          right: 20px;
-          font-size: 2rem;
-        `}
-      >
-        {isFullHourglass ? '⏳' : '⌛'}
-      </div>
-    </div>
-  );
-};
-
+    <>
+    loading</>
+  )
+}
 export default LoadingAnimation;

components/dao-model.tsx

@@ -191,7 +191,7 @@ const PoweringCommunity: NextPage<PoweringCommunityType> = ({ className = "" })
             flex-direction: row;
             align-items: flex-start;
             justify-content: center; // Change this to center
-            padding: 0rem var(--padding-100xl);
+           padding: 2.5rem;
             box-sizing: border-box;
             max-width: 100%;
             font-size: var(--font-size-5xl);
@@ -207,12 +207,14 @@ const PoweringCommunity: NextPage<PoweringCommunityType> = ({ className = "" })
               line-height: 2.469rem;
               font-weight: 400;
               font-family: inherit;
-              display: inline-block;
-              max-width: 80%; // Add this to limit the width of the subtitle
-              text-align: center; // Add this to center the text
+              display: block;
+              width: 100%;
+              text-align: center;
+              padding: 0rem;
               @media screen and (max-width: 450px) {
                 font-size: var(--font-size-lgi);
                 line-height: 2rem;
+                padding: 0rem;
               }
             `}
           >

components/feed.tsx

@@ -186,10 +186,10 @@ const Feed: NextPage<FeedProps> = ({ emoji, farcaster_channel }) => { // Updated
       {isLoading ? (
         <Skeleton count={5} height={150} style={{ marginBottom: '10px' }} /> // Skeleton for loading posts
       ) : (
-        <div className={css` 
-          display: flex; 
-          flex-wrap: wrap; /* Allow wrapping to the next line */
-          justify-content: space-between; /* Space between cards */
+        <div className={css`
+          display: flex;
+          flex-wrap: wrap; /* Allow cards to wrap to the next line */
+          margin: -5px; /* Adjust margin to account for card margins */
         `}>
           {posts.map((post: Post) => (
             <div key={post.hash} className={css`
@@ -203,6 +203,19 @@ const Feed: NextPage<FeedProps> = ({ emoji, farcaster_channel }) => { // Updated
               display: flex; /* Added to enable flexbox */
               flex-direction: column; /* Stack children vertically */
               justify-content: flex-start; /* Align children to the start */
+
+              @media screen and (max-width: 1024px) {
+                flex: 1 1 calc(50% - 10px); /* 2 cards in a row on medium screens */
+              }
+
+              @media screen and (max-width: 768px) {
+                flex: 1 1 calc(100% - 10px); /* 1 card in a row on small screens */
+              }
+
+              @media screen and (max-width: 360px) {
+                flex: 1 1 calc(100% - 10px); /* Ensure 1 card in a row on very small screens */
+
+              }
             `}>
               <div className={css`
                 display: flex; 

components/header.tsx

@@ -27,6 +27,7 @@ const Header: NextPage<HeaderType> = ({ className = "" }) => {
             img:not(.handbook-icon) {
               display: none;
             }
+            padding: 1.5rem;
           }
         `,
         className,
@@ -206,9 +207,10 @@ const Header: NextPage<HeaderType> = ({ className = "" }) => {
                 @media screen and (max-width: 1050px) {
                   font-size: var(--font-size-22xl);
                   line-height: 3.563rem;
+
                 }
                 @media screen and (max-width: 768px) {
-                  font-size: var(--font-size-xl);
+                  font-size: var(--font-size-16xl);
                   line-height: 2.5rem;
                 }
                 @media screen and (max-width: 450px) {

components/n-a-v-b-a-r.tsx

@@ -263,6 +263,7 @@ const NAVBAR: NextPage<NAVBARType> = ({ className = "" }) => {
               @media screen and (max-width: 1050px) {
                 width: auto;
                 padding: 0;
+                align-items: center; /* Center align items on mobile */
               }
             `}
           >
@@ -286,6 +287,7 @@ const NAVBAR: NextPage<NAVBARType> = ({ className = "" }) => {
                       display: flex;
                       align-items: center;
                       justify-content: center;
+                      margin-top: 1rem; 
                       &:hover {
                         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
                         animation: rainbow-glow 3s linear infinite;
@@ -300,6 +302,9 @@ const NAVBAR: NextPage<NAVBARType> = ({ className = "" }) => {
                         85% { box-shadow: 0 0 10px #ff00ff; }
                         100% { box-shadow: 0 0 10px #ff0000; }
                       }
+                      @media screen and (max-width: 1050px) {
+                        margin-top: 1rem;
+                      }
                     `}
                   >
                     {isConnected ? ensName ?? truncatedAddress : "Login"}

data/interests.json

@@ -24,7 +24,7 @@
     "farcaster_id": ""
   },
   {
-    "id_slug": "baseball",
+    "id_slug": "MLB",
     "activity": "Baseball",
     "emoji": "⚾",
     "farcaster_id": ""