Revamp, optimze, rephrase

src/app/globals.ts

@@ -1,7 +1,7 @@
 // Importing logos
 import twitterLogo from "../assets/socials/sub/twitter.svg";
 import instagramLogo from "../assets/socials/sub/instagram.svg";
-import discordLogo from "../assets/socials/sub/discord.svg";
+import openseaLogo from "../assets/socials/sub/opensea.svg";
 import mediumLogo from "../assets/socials/sub/medium.svg";
 import etherscanLogo from "../assets/socials/sub/etherscan.svg";
 
@@ -18,7 +18,7 @@ export const ADDRESS = "0xf75140376d246d8b1e5b8a48e3f00772468b3c0c";
 export const TWITTER_LINK = "https://twitter.com/uwucrewnft";
 export const DISCORD_LINK = "https://discord.gg/uwucrew";
 export const INSTAGRAM_LINK = "https://www.instagram.com/uwucrew.art/";
-export const MEDIUM_LINK = "https://medium.com/@uwulabs";
+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";
 export const MIRROR_LINK = "https://mirror.xyz/uwucrew.eth/";
@@ -35,21 +35,21 @@ export const SOCIALS: SocialType[] = [
     url: TWITTER_LINK,
     image: twitterLogo,
   },
-  {
-    name: "Discord",
-    url: DISCORD_LINK,
-    image: discordLogo,
-  },
   {
     name: "Instagram",
     url: INSTAGRAM_LINK,
     image: instagramLogo,
   },
   {
-    name: "Medium",
+    name: "Mirror",
     url: MEDIUM_LINK,
     image: mediumLogo,
   },
+  {
+    name: "OpenSea",
+    url: OPENSEA_LINK,
+    image: openseaLogo,
+  },
   {
     name: "Etherscan",
     url: ETHERSCAN_LINK,

src/components/Browse.tsx

@@ -17,57 +17,33 @@ const uwus: UwuType[] = [
   {
     width: 25,
     speed: 0.35,
-    left: 3,
+    left: 8,
     top: 2,
   },
   {
-    width: 10,
-    speed: 0.7,
-    left: 75,
-    top: 15,
-  },
-  {
-    width: 18,
+    width: 20,
     speed: 0.2,
     left: 50,
-    top: 40,
+    top: 20,
   },
   {
     width: 20,
     speed: 0.35,
-    left: 78,
-    top: 60,
+    left: 75,
+    top: 65,
   },
   {
-    width: 15,
-    speed: 0.6,
+    width: 20,
+    speed: 0.51,
     left: 25,
-    top: 110,
+    top: 125,
   },
   {
     width: 25,
     speed: 0.35,
-    left: -5,
+    left: 1,
     top: 130,
   },
-  {
-    width: 15,
-    speed: 0.6,
-    left: 75,
-    top: 180,
-  },
-  {
-    width: 13,
-    speed: 0.75,
-    left: 30,
-    top: 220,
-  },
-  {
-    width: 10,
-    speed: 1.4,
-    left: 50,
-    top: 400,
-  },
   {
     width: 40,
     speed: 0.4,
@@ -76,9 +52,9 @@ const uwus: UwuType[] = [
   },
   {
     width: 20,
-    speed: 0.8,
-    left: 80,
-    top: 350,
+    speed: 0.6,
+    left: 78,
+    top: 240,
   },
 ];
 

src/components/Community.css

@@ -171,6 +171,7 @@
 .community-uwu {
   width: 100%;
   min-height: 100%;
+  object-fit: cover;
 }
 
 .community-animated {

src/components/Header.tsx

@@ -42,7 +42,7 @@ const Header = () => {
         </div>
       </div>
       <div className="header-buy-on-opensea">
-        <Button label="Buy on OpenSea!" link={OPENSEA_LINK} icon={opensea} />
+        <Button label="Buy on OpenSea" link={OPENSEA_LINK} icon={opensea} />
       </div>
       <button
         className="header-hamburger"
@@ -70,7 +70,7 @@ const Header = () => {
               ))}
               <div className="header-hamburger-button-container">
                 <Button
-                  label="Buy on OpenSea!"
+                  label="Buy on OpenSea"
                   link={OPENSEA_LINK}
                   icon={opensea}
                 />

src/components/HeroBanners.css

@@ -12,7 +12,7 @@
 
 @keyframes slide-right {
   from {
-    transform: translateX(-50%);
+    transform: translateX(-25%);
   }
   to {
     transform: translateX(0);
@@ -41,7 +41,7 @@
     transform: translateX(0);
   }
   to {
-    transform: translateX(-50%);
+    transform: translateX(-25%);
   }
 }
 

src/components/HeroContent.tsx

@@ -1,7 +1,7 @@
 import "./HeroContent.css";
 
-import { OPENSEA_LINK, SOCIALS } from "../app/globals";
-import openseaIcon from "../assets/socials/opensea.svg";
+import { DISCORD_LINK, SOCIALS } from "../app/globals";
+import discordIcon from "../assets/socials/discord.svg";
 import Button from "./Button";
 
 const HeroContent = () => {
@@ -10,8 +10,7 @@ const HeroContent = () => {
       <div className="hero-content">
         <div className="hero-column">
           <h3 className="hero-content-header">
-            Join uwucrew and immerse yourself in a captivating world of anime
-            art
+            Welcome to uwucrew: immerse yourself into the future of anime art 🌐✨
           </h3>
           <div className="socials-container">
             <div className="socials-text">Find us on</div>
@@ -31,13 +30,12 @@ const HeroContent = () => {
         <div className="hero-column">
           <p className="hero-content-text">
             Find your place in a passionate community of anime art enthusiasts,
-            where artists and collectors can connect over their shared love for
-            anime art!
+            where artists and collectors both make a global impact!
           </p>
           <Button
-            label="View on OpenSea!"
-            link={OPENSEA_LINK}
-            icon={openseaIcon}
+            label="Visit our Discord!"
+            link={DISCORD_LINK}
+            icon={discordIcon}
           />
         </div>
       </div>

src/components/Team.tsx

@@ -37,63 +37,63 @@ interface TeamMemberType {
 }
 
 const members: TeamMemberType[] = [
-  {
-    name: "Laur",
-    role: "Co-Founder & Artist",
-    image: laur,
-    twitter: "https://twitter.com/fungibleartist",
-    foundation: "https://foundation.app/@laur",
-    deriv: laurDeriv,
-  },
   {
     name: "Kiwi",
-    role: "Co-Founder & Dev",
+    role: "team leader",
     image: kiwi,
     twitter: "https://twitter.com/0xKiwi_",
     foundation: "https://foundation.app/@Kiwi",
     deriv: kiwiDeriv,
   },
   {
-    name: "Morello",
-    role: "Bit of everything",
-    image: morello,
-    twitter: "https://twitter.com/morellostorment",
-    foundation: "https://foundation.app/@morello",
-    deriv: morelloDeriv,
+    name: "Laur",
+    role: "lead artist",
+    image: laur,
+    twitter: "https://twitter.com/fungibleartist",
+    foundation: "https://foundation.app/@laur",
+    deriv: laurDeriv,
+  },
+  {
+    name: "Danny",
+    role: "operations",
+    image: danny,
+    twitter: "https://twitter.com/0xMaple",
+    foundation: "https://foundation.app/@0xMaple",
+    deriv: dannyDeriv,
   },
   {
     name: "Omar",
-    role: "Community Manager",
+    role: "Community",
     image: omar,
     twitter: "https://twitter.com/OmarIbisa",
     foundation: "https://foundation.app/@omr",
     deriv: omarDeriv,
   },
   {
-    name: "Danny",
-    role: "Partnerships Manager",
-    image: danny,
-    twitter: "https://twitter.com/0xMaple",
-    foundation: "https://foundation.app/@0xMaple",
-    deriv: dannyDeriv,
+    name: "Morello",
+    role: "Advisor",
+    image: morello,
+    twitter: "https://twitter.com/morellostorment",
+    foundation: "https://foundation.app/@morello",
+    deriv: morelloDeriv,
   },
   {
     name: "Nines",
-    role: "2D & 3D Designer",
+    role: "designer",
     image: nines,
     twitter: "https://twitter.com/nine__s",
   },
   {
     name: "Jules",
-    role: "Creative assistant",
+    role: "artist",
     image: jules,
     twitter: "https://twitter.com/BlancNFT",
     foundation: "https://foundation.app/@jujulesblanc",
     deriv: julesDeriv,
   },
   {
     name: "Cucurbit",
-    role: "Front End Dev",
+    role: "Web Dev",
     image: cucurbit,
     twitter: "https://twitter.com/PiperCucu",
     foundation: "https://foundation.app/@milky.eth",
@@ -117,7 +117,7 @@ const Team = () => {
   return (
     <Section id="team">
       <div className="team">
-        <h2 className="team-header">Meet the team</h2>
+        <h2 className="team-header">our team</h2>
         <div className="team-members">
           {members.map((member, index) => {
             return (

src/components/Why.css

@@ -45,11 +45,13 @@
   width: 50%;
   height: 100dvh;
   overflow: hidden;
+  object-fit: cover;
 }
 
 .why-fixed-image {
   min-height: 100%;
   width: 100%;
+  object-fit: cover;
 }
 
 .why {
@@ -102,6 +104,24 @@
   }
 }
 
+.why-mid-sub-header {
+  max-width: 30rem;
+  font-size: 3.2rem;
+  font-weight: 700;
+  line-height: 4rem;
+  margin-bottom: 4rem;
+  margin-top: 18rem;
+  color: var(--bg);
+
+  @media (max-width: 900px) {
+    max-width: none;
+    font-size: 2.4rem;
+    line-height: 3.1rem;
+    margin-bottom: 1.2rem;
+    margin-top: 2.4rem;
+  }
+}
+
 .why-image {
   display: none;
   width: 100%;

src/components/Why.tsx

@@ -14,10 +14,7 @@ const Why = () => {
   const containerRef = useRef<HTMLDivElement>(null);
   const { fixedStyles, percentScrolled } = useFixedStyles(containerRef);
 
-  const image = Math.min(
-    Math.floor(percentScrolled * images.length),
-    images.length - 1
-  );
+  let image = percentScrolled < 0.325 ? 0 : percentScrolled < 0.825 ? 1 : 2;
 
   return (
     <Section id="why">
@@ -29,24 +26,23 @@ const Why = () => {
           </div>
         </div>
         <div className="why-content">
-          <h1 className="why-header">Why uwucrew?</h1>
+          <h1 className="why-header">Why uwucrew?!</h1>
           <img className="why-image" src={uwu1} alt="uwu" />
-          <h2 className="why-sub-header">Discover a world of creativity</h2>
+          <h2 className="why-sub-header">Uniting the world through art! 🌍</h2>
           <p className="why-text">
-            Unlock a vibrant and artistic world and get to know the 250+ artists
-            in the uwu community!
+            Fall down a rabbit hole of creativity and discover our global community, 
+            including over 250+ anime artists! 
           </p>
           <img className="why-image" src={uwu2} alt="uwu" />
-          <h2 className="why-sub-header">Join the anime art movement</h2>
+          <h2 className="why-mid-sub-header">Join The Anime Art Revolution! 🚀</h2>
           <p className="why-text">
-            Join a movement to highlight creativity and make a lasting impact on
-            anime art by discovering and connecting with artists!
+            Be part of the wave that's defining our generation! 
+            Lets create a culture where every creator shines, together!
           </p>
           <img className="why-image" src={uwu3} alt="uwu" />
-          <h2 className="why-sub-header">Become a member of the uwuminati</h2>
+          <h2 className="why-mid-sub-header">Become one of the uwuminati 😎</h2>
           <p className="why-text">
-            Gain access to the uwuminati holder-only chat and form meaningful
-            connections with fellow anime fans and creators!
+            Join a crew that values creativity - connect with like-minded people who strive to make a positive impact on anime art!
           </p>
           <div className="why-buffer" />
         </div>