Add social container for mobile

uwu-labs · Jan 15, 2024 · b0264ba · b0264ba
1 parent 8744db8
commit b0264ba
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git a/src/components/HeroContent.css b/src/components/HeroContent.css
@@ -54,6 +54,18 @@
   }
 }
 
+
+.socials-container-mobile {
+  display: flex;
+  align-items: center;
+}
+
+@media (min-width: 900px) {
+  .socials-container-mobile {
+    display: none;
+  }
+}
+
 .hero-content-text {
   font-size: 2rem;
   max-width: 52.4rem;

diff --git a/src/components/HeroContent.tsx b/src/components/HeroContent.tsx
@@ -13,7 +13,7 @@ const HeroContent = () => {
             Welcome to uwucrew:<br/>immerse yourself into the future of anime art 🌐✨
           </h3>
           <div className="socials-container">
-            <div className="socials-text">Find us on</div>
+          <div className="socials-text">Find us on</div>
             {SOCIALS.map((social) => (
               <a
                 href={social.url}
@@ -36,6 +36,19 @@ const HeroContent = () => {
             link={DISCORD_LINK}
             icon={discordIcon}
           />
+          <div className="socials-container-mobile">
+          <div className="socials-text">Find us on</div>
+            {SOCIALS.map((social) => (
+              <a
+                href={social.url}
+                target="_blank"
+                rel="noreferrer"
+                key={social.name}
+              >
+                <img className="social" src={social.image} alt={social.name} />
+              </a>
+            ))}
+          </div>
         </div>
       </div>
     </div>