Kusari changes (#59)

* Kusari changes

* update metadata

* Push changes

* Fixes

* Rename back

* Try new embed image

* Fixes

Author: 0xKiwi

public/og-image.png

@@ -10,8 +10,10 @@ export const ADDRESS = "0xf75140376d246d8b1e5b8a48e3f00772468b3c0c";
 
 // Links
 export const TWITTER_LINK = "https://twitter.com/uwucrewnft";
+export const KUSARI_TWITTER_LINK = "https://twitter.com/bykusari";
 export const DISCORD_LINK = "https://discord.gg/cKWpT7HGam";
 export const INSTAGRAM_LINK = "https://www.instagram.com/uwucrew.art/";
+export const KUSARI_INSTAGRAM_LINK = "https://www.instagram.com/bykusari/";
 export const MEDIUM_LINK = "https://mirror.xyz/uwucrew.eth";
 export const ETHERSCAN_LINK = `https://etherscan.io/address/${ADDRESS}`;
 export const OPENSEA_LINK = "https://opensea.io/collection/uwucrew";

src/app/globals.ts

@@ -1,7 +1,7 @@
 .community {
   width: 100%;
   height: 100dvh;
-  background: #f4f5f6;
+  background: #5D9875;
   position: relative;
   overflow: hidden;
   display: flex;
@@ -23,7 +23,7 @@
   height: 100dvh;
   top: 70%;
   left: -12.5%;
-  background: #73d7e8;
+  background: #A5BFA5;
   border-radius: 50%;
   filter: blur(200px);
 }
@@ -34,7 +34,7 @@
   height: 100dvh;
   top: 70%;
   right: -12.5%;
-  background: #73d7e8;
+  background: #A5BFA5;
   border-radius: 50%;
   filter: blur(200px);
 }
@@ -45,11 +45,11 @@
   height: 100dvh;
   top: -50%;
   left: 0;
-  background: #73d7e8;
+  background: #5D9875;
   border-radius: 50%;
   background: radial-gradient(
     50% 50% at 50% 50%,
-    #73d7e8 0%,
+    #A5BFA5 0%,
     rgba(115, 215, 232, 0) 100%
   );
 }
@@ -76,7 +76,7 @@
 }
 
 .community-content-image {
-  width: 25rem;
+  width: 23rem;
   margin-bottom: 1rem;
 }
 
@@ -90,9 +90,10 @@
   font-size: 8.8rem;
   font-weight: 800;
   margin-bottom: 3.2rem;
-  width: 60rem;
+  width: 80rem;
   text-align: center;
   line-height: 100%;
+  color: #ffffff;
 }
 
 @media (max-width: 900px) {
@@ -149,6 +150,10 @@
   margin-left: 1.2rem;
 }
 
+.community-footer-social-image.white-icon {
+  filter: brightness(0) invert(1);
+}
+
 @keyframes grow {
   from {
     transform: scale(0);
@@ -161,8 +166,8 @@
 .community-desktop-uwu-container {
   position: absolute;
   border-radius: 50%;
-  box-shadow: 0px 8px 24px 0px rgba(140, 213, 230, 0.5),
-    0px 12px 72px 0px rgba(140, 213, 230, 0.8);
+  box-shadow: 0px 8px 24px 0px rgba(165, 191, 165, 0.5),
+    0px 12px 72px 0px rgba(165, 191, 165, 0.8);
   transform: scale(0);
   transition: all 0.5s ease-in-out;
   overflow: hidden;
@@ -178,8 +183,8 @@
   display: none;
   position: absolute;
   border-radius: 50%;
-  box-shadow: 0px 8px 24px 0px rgba(140, 213, 230, 0.5),
-    0px 12px 72px 0px rgba(140, 213, 230, 0.8);
+  box-shadow: 0px 8px 24px 0px rgba(165, 191, 165, 0.5),
+    0px 12px 72px 0px rgba(165, 191, 165, 0.8);
   transform: scale(0);
   transition: all 0.5s ease-in-out;
   overflow: hidden;

src/assets/kusariPrimaryBeige.webp

@@ -1,25 +1,20 @@
 import "./Community.css";
 import Section from "./Section";
 
-import logo from "../assets/bunnyPrimary.webp";
+import logo from "../assets/kusariPrimaryWhite.webp";
 import Button from "./Button";
 import {
   DISCORD_LINK,
-  ETHERSCAN_LINK,
-  INSTAGRAM_LINK,
-  MEDIUM_LINK,
-  OPENSEA_LINK,
-  TWITTER_LINK,
+  KUSARI_INSTAGRAM_LINK,
+  KUSARI_TWITTER_LINK,
 } from "../app/globals";
 
-import discord from "../assets/socials/footer/discord.svg";
-import etherscan from "../assets/socials/footer/etherscan.svg";
 import instagram from "../assets/socials/footer/instagram.svg";
-import medium from "../assets/socials/footer/medium.svg";
-import opensea from "../assets/socials/footer/opensea.svg";
 import twitter from "../assets/socials/footer/twitter.svg";
+import globe from "../assets/socials/globe.svg";
 
 import whiteDiscord from "../assets/socials/discord.svg";
+import farcaster from "../assets/socials/farcaster.svg";
 
 import { useEffect, useState } from "react";
 
@@ -48,7 +43,6 @@ const imageOptions = [
   "JG.webp",
   "Nate-uwu.webp",
   "Suhate.webp",
-  "Neetori.jpeg",
   "Tuwu.webp",
   "Cloudy.webp",
   "Vanaric.webp",
@@ -146,34 +140,24 @@ interface SocialType {
 
 const socials: SocialType[] = [
   {
-    name: "Discord",
-    link: DISCORD_LINK,
-    icon: discord,
+    name: "Kusari Website",
+    link: "https://kusari.org",
+    icon: globe,
   },
   {
     name: "Twitter",
-    link: TWITTER_LINK,
+    link: KUSARI_TWITTER_LINK,
     icon: twitter,
   },
   {
-    name: "Instagram",
-    link: INSTAGRAM_LINK,
-    icon: instagram,
-  },
-  {
-    name: "Etherscan",
-    link: ETHERSCAN_LINK,
-    icon: etherscan,
+    name: "Farcaster",
+    link: "https://farcaster.xyz/bykusari",
+    icon: farcaster,
   },
   {
-    name: "Medium",
-    link: MEDIUM_LINK,
-    icon: medium,
-  },
-  {
-    name: "OpenSea",
-    link: OPENSEA_LINK,
-    icon: opensea,
+    name: "Instagram",
+    link: KUSARI_INSTAGRAM_LINK,
+    icon: instagram,
   },
 ];
 
@@ -308,22 +292,18 @@ const Community = () => {
         <div className="community-content">
           <img
             src={logo}
-            alt="uwucrew icon"
+            alt="kusari icon"
             className="community-content-image"
           />
           <div className="community-content-header">
-            Be part of the community
+            Discover the Kusari Community
           </div>
           <Button
             outLink={DISCORD_LINK}
             label="Join our Discord!"
             icon={whiteDiscord}
           />
-        </div>
-
-        {/* Footer */}
-        <div className="community-footer">
-          <div className="community-footer-socials">
+          <div style={{ marginTop: '2.2rem' }} className="community-footer-socials">
             {socials.map((social) => (
               <a
                 key={social.name}
@@ -335,12 +315,20 @@ const Community = () => {
                 <img
                   src={social.icon}
                   alt={social.name}
-                  className="community-footer-social-image"
+                  className={
+                    social.name === "Kusari Website"
+                      ? "community-footer-social-image white-icon globe-icon"
+                      : "community-footer-social-image white-icon"
+                  }
+                  style={social.name === "Kusari Website" ? { width: '2.2rem', height: '2.2rem' } : {}}
                 />
               </a>
             ))}
           </div>
         </div>
+
+        {/* Footer */}
+        <div className="community-footer" />
       </div>
     </Section>
   );

src/assets/kusariPrimaryGreen.webp

@@ -88,6 +88,34 @@
   transition: transform 0.3s ease-in-out;
 }
 
+/* Desktop-specific styling for larger social elements */
+@media (min-width: 901px) {
+  .socials-container .socials-text {
+    font-size: 2.4rem;
+    margin-right: 1rem;
+  }
+  
+  .socials-container .social {
+    height: 2.4rem;
+    width: 2.6rem;
+    margin: 0.8rem;
+  }
+}
+
+/* Mobile-specific styling for larger social elements */
+@media (max-width: 900px) {
+  .socials-container-mobile .socials-text {
+    font-size: 2.6rem;
+    margin-right: 1rem;
+  }
+  
+  .socials-container-mobile .social {
+    height: 2.8rem;
+    width: 3rem;
+    margin: 0.8rem;
+  }
+}
+
 .social:hover {
   transform: scale(1.15);
 }