🚀 add background and footer to community

src/components/Community.css

@@ -1,5 +1,76 @@
 .community {
   width: 100%;
   height: 100vh;
-  background: peru;
+  background: #f4f5f6;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 3rem 8rem;
+}
+
+.community-left-glow {
+  position: absolute;
+  width: 50%;
+  height: 100vh;
+  top: 70%;
+  left: -12.5%;
+  background: #73d7e8;
+  border-radius: 50%;
+  filter: blur(200px);
+}
+
+.community-right-glow {
+  position: absolute;
+  width: 50%;
+  height: 100vh;
+  top: 70%;
+  right: -12.5%;
+  background: #73d7e8;
+  border-radius: 50%;
+  filter: blur(200px);
+}
+
+.community-top-glow {
+  position: absolute;
+  width: 100%;
+  height: 100vh;
+  top: -50%;
+  left: 0;
+  background: #73d7e8;
+  border-radius: 50%;
+  background: radial-gradient(
+    50% 50% at 50% 50%,
+    #73d7e8 0%,
+    rgba(115, 215, 232, 0) 100%
+  );
+}
+
+.community-footer {
+  position: relative;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.community-footer-text {
+  font-size: 2rem;
+  font-weight: 600;
+}
+
+.community-footer-socials {
+  display: flex;
+  align-items: center;
+}
+
+.community-footer-social-link {
+  cursor: pointer;
+}
+
+.community-footer-social-image {
+  height: 2.8rem;
+  margin-left: 1.2rem;
 }

src/components/Community.tsx

@@ -1,10 +1,94 @@
 import "./Community.css";
 import Section from "./Section";
 
+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 {
+  DISCORD_LINK,
+  ETHERSCAN_LINK,
+  INSTAGRAM_LINK,
+  MEDIUM_LINK,
+  OPENSEA_LINK,
+  TWITTER_LINK,
+} from "../app/globals";
+
+interface SocialType {
+  name: string;
+  link: string;
+  icon: string;
+}
+
+const socials: SocialType[] = [
+  {
+    name: "Discord",
+    link: DISCORD_LINK,
+    icon: discord,
+  },
+  {
+    name: "Etherscan",
+    link: ETHERSCAN_LINK,
+    icon: etherscan,
+  },
+  {
+    name: "Instagram",
+    link: INSTAGRAM_LINK,
+    icon: instagram,
+  },
+  {
+    name: "Medium",
+    link: MEDIUM_LINK,
+    icon: medium,
+  },
+  {
+    name: "OpenSea",
+    link: OPENSEA_LINK,
+    icon: opensea,
+  },
+  {
+    name: "Twitter",
+    link: TWITTER_LINK,
+    icon: twitter,
+  },
+];
+
 const Community = () => {
   return (
     <Section id="community">
-      <div className="community">Community </div>
+      <div className="community">
+        {/* Background effects */}
+        <div className="community-left-glow" />
+        <div className="community-right-glow" />
+        <div className="community-top-glow" />
+
+        {/* Content */}
+        <div />
+        <div />
+        <div className="community-footer">
+          <div className="community-footer-text">All rights reserved</div>
+          <div className="community-footer-text">{`© ${new Date().getFullYear()}`}</div>
+          <div className="community-footer-socials">
+            {socials.map((social) => (
+              <a
+                key={social.name}
+                href={social.link}
+                target="_blank"
+                rel="noreferrer"
+                className="community-footer-social-link"
+              >
+                <img
+                  src={social.icon}
+                  alt={social.name}
+                  className="community-footer-social-image"
+                />
+              </a>
+            ))}
+          </div>
+        </div>
+      </div>
     </Section>
   );
 };