Main 2 0 (#106)

* 🦄asset updates

* ✨🛠🔖about page added

* 🔖✨team member card added

* ✨🛠team section added

* 🛠initial updates

* 🦄asstes added

* 🛠small bug fix

* 📕 designation updates

* 🛠section removed

* Update teamData.js

* 📕mrinal's photo added

* 🦄asset updates

* 📕teams data updates

* ✨🛠🦄📕about page done

Co-authored-by: Prabhavv <[email protected]>

.gitignore

@@ -9,5 +9,6 @@ faucet/node_modules
 .github
 
 #  files
+.env.local
 package-lock.json
 yarn.lock

src/data/teamData.js

@@ -167,28 +167,20 @@ export const teamMemberData = [
       },
     ],
   },
-  {
-    image: "rozaan.webp",
-    name: "Rozaan Peter",
-    designation: "Product Design",
-    designationType: "Design",
-    social: [
-      {
-        icon: "LinkedIn",
-        href: "https://www.linkedin.com/in/rozann-p-28636589",
-      },
-    ],
-  },
   {
     image: "namaha.webp",
     name: "Namaha Shetty",
-    designation: "UI/UX",
+    designation: "UI/UX Designer",
     designationType: "Design",
     social: [
       {
         icon: "Website",
         href: "www.namahashetty.com",
       },
+      {
+        icon: "LinkedIn",
+        href: "https://www.linkedin.com/in/namahashetty/",
+      }
     ],
   },
   {
@@ -211,12 +203,6 @@ export const teamMemberData = [
       },
     ],
   },
-  {
-    image: "",
-    name: "Sharan Grandigae",
-    designation: "Design Lead",
-    designationType: "Developer",
-  },
   {
     image: "sarin.webp",
     name: "Sarin Venugopal",
@@ -254,7 +240,7 @@ export const teamMemberData = [
     ],
   },
   {
-    image: "",
+    image: "jagdish.webp",
     name: "Jagdish Chudasama",
     designation: "UI/UX Developer​",
     designationType: "Developer",
@@ -278,7 +264,7 @@ export const teamMemberData = [
     ],
   },
   {
-    image: "",
+    image: "sankrit.webp",
     name: "Sankrit K",
     designation: "Content Writer",
     designationType: "Developer",
@@ -304,7 +290,7 @@ export const teamMemberData = [
   {
     image: "",
     name: "Rohit Sharma",
-    designation: "Communications and Integrations",
+    designation: "Creators Communications and Integrations",
     designationType: "Developer",
     social: [
       {
@@ -320,7 +306,7 @@ export const teamMemberData = [
   {
     image: "",
     name: "Sohail Arora",
-    designation: "Integrations and Strategy",
+    designation: "Creators Integrations and Strategy",
     designationType: "Developer",
   },
   {
@@ -335,24 +321,6 @@ export const teamMemberData = [
     designation: "NFT Strategist",
     designationType: "Developer",
   },
-  {
-    image: "prachi.webp",
-    name: "Prachi",
-    designation: "Product Design",
-    designationType: "Developer",
-    social: [
-      {
-        icon: "LinkedIn",
-        href: "https://www.linkedin.com/in/prachi-kashyap3/",
-      },
-    ],
-  },
-  {
-    image: "",
-    name: "Arun R",
-    designation: "Visual Design",
-    designationType: "Developer",
-  },
 ];
 
 //  ===================Guid===============

src/pages/About.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { AboutContainer } from "../styles/pages/AboutContainer";
-import { BsFillCaretRightFill } from "react-icons/bs";
+// import { BsFillCaretRightFill } from "react-icons/bs";
 import TeamMemberCard from "../components/TeamMemberCard";
 import { teamMemberData } from "../data/teamData";
 
@@ -9,30 +9,23 @@ export default function About() {
     <AboutContainer>
       <section className="section_hero">
         <div className="section_hero__element">
-          <h1 className="section_hero__element_title">
-            who is AssetMantle for?
-          </h1>
+          <h1 className="section_hero__element_title">What is AssetMantle ?</h1>
           <p className="section_hero__element_details">
-            If you believe in NFTs and are eager to buy the best or sell in a
-            smart, seamless manner, AssetMantle is for you. We are a
-            community-first platform for creators and collectors.
-          </p>
-          <p className="section_hero__element_details">
-            The NFT market is new-age and exciting. But it’s also intricate and
-            dynamic. AssetMantle helps you truly AMPLIFY your collection and
-            commerce. With the advantage of choice, flexibility, affordability,
-            and security.
+            AssetMantle is a one-stop NFT framework that empowers and
+            incentivizes creators and their communities to build, innovate, and
+            transact independently, and securely on the blockchain via
+            MantlePlace and MantleBuilder.
           </p>
         </div>
-        <div className="section_hero__element"></div>
+        <div className="section_hero__element">
+          <img src="/images/about/hero.png" alt="token illustration" />
+        </div>
       </section>
       <section className="section_whyBetter">
-        <h2>why is AssetMantle better?</h2>
-        <p>
-          There are many NFT marketplaces. AssetMantle gives you unique
-          benefits.
-        </p>
-        <ul className="section_whyBetter__list">
+        <h2>Vision Of AssetMantle</h2>
+        <p>The vision is to build an open-source community-driven framework that also contributes to interNFT metadata standardization and Mantle modules for modular, interoperable, composable, and decomposable NFT integration in metaverses,  games, and art.</p>
+        <div className="section_whyBetter__image"><img src="/images/about/vision.png" alt="" /></div>
+        {/* <ul className="section_whyBetter__list">
           <li>
             <span className="li">
               <BsFillCaretRightFill />
@@ -81,9 +74,9 @@ export default function About() {
               </span>
             </p>
           </li>
-        </ul>
+        </ul> */}
       </section>
-      <section className="section_whyStore">
+      {/* <section className="section_whyStore">
         <h2 className="section_whyStore__title">
           why should I build my own NFT store?
         </h2>
@@ -112,7 +105,7 @@ export default function About() {
             </p>
           </div>
         </div>
-      </section>
+      </section> */}
       {/* <section className="section_right">
         <h2 className="section_right__title">
           what are my rights as an NFT store owner?
@@ -171,7 +164,7 @@ export default function About() {
           </div>
         </div>
       </section> */}
-      <section className="section_VP">
+      {/* <section className="section_VP">
         <div className="section_VP__element">
           <div className="section_VP__element_group">
             <h2>Our Vision</h2>
@@ -200,16 +193,13 @@ export default function About() {
             <a href="/roadmap">Check out our roadmap</a>
           </p>
         </div>
-      </section>
+      </section> */}
       <section className="section_team" id="team">
-        <h2>The team</h2>
+        <h2>The Mantle team</h2>
         <p>
-          We are backed by a stellar team. That includes founders with vision,
-          engineers with the best ideas to execute that vision, customer
-          behavior experts to keep the delight quotient always high, and new-age
-          thinkers and advisors who push us to keep raising the bar.{" "}
+        The Mantle team consists of some of the best minds in their respective fields.
         </p>
-        <h3>Team</h3>
+        {/* <h3>Team</h3> */}
         <div className="section_team__container">
           {Array.isArray(teamMemberData) &&
             teamMemberData.length !== 0 &&

src/styles/index.css

@@ -12,6 +12,7 @@
 :root {
   /* ------------colors----------------- */
   --dark: #1e1e1e;
+  --darkT: rgba(30, 30, 30, 0.8);
   --dark-m: #2c2c2c;
   --dark-s: #2e2e2e;
   --dark-xs: #3e3e3e;

src/styles/layout/HeaderContainer.js

@@ -2,7 +2,7 @@ import styled from "styled-components";
 
 const HeaderContainer = styled.header`
   max-width: 1440px;
-  background-color: var(--dark);
+  background-color: var(--darkT);
   margin: 0 auto;
   display: flex;
   align-items: center;

src/styles/pages/AboutContainer.js

@@ -5,7 +5,7 @@ export const AboutContainer = styled.main`
   margin: 0 auto;
   background-image: url("/images/bg_assets.svg");
   background-size: 100%;
-  background-repeat: no-repeat;
+  background-repeat: no-repeat repeat;
   min-height: 100vh;
   z-index: 1;
   @media (max-width: 768px) {
@@ -16,14 +16,14 @@ export const AboutContainer = styled.main`
   }
   .section {
     &_hero {
-      padding: 60px 92px 30px;
+      padding: 0px 92px 0px;
       display: grid;
       grid-template-columns: 1fr 1fr;
       align-items: center;
       justify-content: center;
       gap: 30px;
       @media (max-width: 768px) {
-        padding: 40px;
+        padding: 20px 40px;
         grid-template-columns: 2fr 1fr;
       }
       @media (max-width: 548px) {
@@ -33,16 +33,27 @@ export const AboutContainer = styled.main`
       &__element {
         &_title {
           font: var(--h1);
-          color: var(--gray);
+          color: var(--yellow);
           padding: 12px 0;
           text-transform: capitalize;
+          @media (max-width: 548px) {
+            font: var(--h2);
+          }
         }
         &_details {
           font: var(--p-l);
           color: var(--gray-deep);
           padding: 12px 0;
           text-align: justify;
         }
+        img {
+          width: 100%;
+          height: auto;
+          transform: translateX(30px);
+          @media (max-width: 548px) {
+            transform: translateX(0);
+          }
+        }
       }
     }
     &_whyBetter {
@@ -55,14 +66,31 @@ export const AboutContainer = styled.main`
       }
       h2 {
         font: var(--h2);
-        color: var(--gray);
+        color: var(--yellow);
         margin-bottom: 24px;
         text-transform: capitalize;
       }
       p {
         font: var(--p-l);
         color: var(--gray-deep);
         margin-bottom: 24px;
+        max-width: 1096px;
+      }
+      &__image {
+        width: 100%;
+        padding-top: 24px;
+        overflow-x: auto;
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+        &::-webkit-scrollbar {
+          display: none;
+        }
+        img {
+          height: auto;
+          @media (min-width: 1025px) {
+            width: 100%;
+          }
+        }
       }
       &__list {
         display: grid;
@@ -269,7 +297,7 @@ export const AboutContainer = styled.main`
       }
       h2 {
         font: var(--h2);
-        color: var(--gray);
+        color: var(--yellow);
         margin-bottom: 24px;
         text-transform: capitalize;
         + p {

src/styles/pages/HomeStyle.js

@@ -5,7 +5,7 @@ export const HomeContainer = styled.main`
   margin: 0 auto;
   background-image: url("/images/bg_assets.svg");
   background-size: 100%;
-  background-repeat: no-repeat;
+  background-repeat: no-repeat repeat;
   min-height: 100vh;
   z-index: 1;
   @media (max-width: 768px) {