From 626778572e078ed49bfc9fef4a3a2a7de764e274 Mon Sep 17 00:00:00 2001 From: Caleb Jacob Date: Mon, 15 Apr 2024 12:54:41 -0600 Subject: [PATCH 1/3] Add new contact us page --- src/Gateway/ContactUsPage.jsx | 396 ++++++++++++++++++++++++++++++++++ 1 file changed, 396 insertions(+) create mode 100644 src/Gateway/ContactUsPage.jsx diff --git a/src/Gateway/ContactUsPage.jsx b/src/Gateway/ContactUsPage.jsx new file mode 100644 index 00000000..09301ac4 --- /dev/null +++ b/src/Gateway/ContactUsPage.jsx @@ -0,0 +1,396 @@ +const urls = { + devHub: "https://near.org/devhub.near/widget/app", + discord: "http://near.chat", + discourse: "https://gov.near.org", + docs: "https://docs.near.org", + facebook: "https://www.facebook.com/NEARProtocol", + getFunding: "https://near.org/ecosystem/get-funding", + github: "https://github.com/near", + hackenproof: "https://hackenproof.com/near", + helpCenter: "https://nearhelp.zendesk.com/hc/en-us", + nearWallet: "https://wallet.near.org/", + nearWeek: "https://subscribe.nearweek.com/", + reddit: "https://www.reddit.com/r/nearprotocol", + supportRequest: "https://nearhelp.zendesk.com/hc/en-us/requests/new", + telegram: "https://t.me/cryptonear", + twitter: "https://twitter.com/nearprotocol", + wechat: "https://pages.near.org/wechat", + withdrawNearFunds: + "https://nearhelp.zendesk.com/hc/en-us/articles/360060927734-Staking-Unstaking-and-Withdrawing-NEAR", + youtube: "https://www.youtube.com/channel/UCuKdIYVN8iE3fv8alyk1aMw", +}; + +const channels = [ + { + icon: "ph-users", + label: "DevHub", + url: urls.devHub, + }, + { + icon: "ph-telegram-logo", + label: "Telegram", + url: urls.telegram, + }, + { + icon: "ph-discord-logo", + label: "Discord", + url: urls.discord, + }, + { + icon: "ph-chats-teardrop", + label: "Discourse", + url: urls.discourse, + }, + { + icon: "ph-facebook-logo", + label: "Facebook", + url: urls.facebook, + }, + { + icon: "ph-reddit-logo", + label: "Reddit", + url: urls.reddit, + }, + // { + // icon: "ph-wifi-high", + // label: "Warpcast", + // url: "", + // }, + { + icon: "ph-youtube-logo", + label: "YouTube", + url: urls.youtube, + }, + { + icon: "ph-github-logo", + label: "GitHub", + url: urls.github, + }, + { + icon: "ph-file-text", + label: "Docs", + url: urls.docs, + }, + { + icon: "ph-wechat-logo", + label: "WeChat", + url: urls.wechat, + }, + { + icon: "ph-twitter-logo", + label: "X", + url: urls.twitter, + }, +]; + +const faqs = [ + { + question: "What is the expectation for a support resolution?", + answer: ( + <> + Upon submitting a support ticket, you can expect to receive an initial response from our team within 72 hours + during our business hours. Our business hours are on weekdays in the PST timezone, excluding US holidays. + + ), + }, + { + question: "Where can I find help to troubleshoot a development issue?", + answer: ( + <> + Social channels such as{" "} + + Telegram + {" "} + and + + Discord + {" "} + are a great resource to tap into for community support on development issues. If you can't find a solution, + please submit a{" "} + + support request + {" "} + to our Customer Care team. + + ), + }, + { + question: "Where can I find funding for my project?", + answer: ( + <> + + DevHub + + , powered by DevDAO, is a central platform offering funding opportunities for NEAR ecosystem projects aimed at + fostering a self-sufficient developer community. We evaluate proposals based on their alignment with our goals, + execution capabilities, and clear use of funds. To initiate the{" "} + + funding process + + for your project, engage with the community on DevHub's activity feed. + + ), + }, + { + question: "How can I find out about the latest product developments?", + answer: ( + <> + Follow{" "} + + NEAR on X + + for our latest product announcements or subscribe to{" "} + + NEAR Week + + to receive their weekly newsletter on ecosystem announcements. + + ), + }, + { + question: "I found a bug — where can I flag this?", + answer: ( + <> + For any issues or concerns you've encountered, please feel free to provide us with detailed information through + our{" "} + + Bug Bounty Program + + . Your cooperation and additional details will assist us in addressing and resolving any potential + vulnerabilities effectively. We appreciate your proactive approach in helping us maintain the security and + integrity of the NEAR ecosystem. If you have any further questions or need assistance, don't hesitate to reach + out to us. + + ), + }, + { + question: "What happened to Near Wallet?", + answer: ( + <> + As we embrace a more decentralized future, wallet.near.org will be discontinued. This change invites you to + discover a variety of new and secure wallet options within our ecosystem. Your funds are safe! Accounts exist on + the blockchain, not in a wallet. Wallets are just an interface into using the blockchain with your account. + + Learn more + + + ), + }, + { + question: "Question about Transfer Exchange?", + answer: ( + <> + For issues relating to a third-party exchange, such as Binance or Coinbase we're unable to investigate issues on + external platforms like these. To address your concern effectively, we recommend contacting the customer support + team of the specific exchange where you're experiencing issues. They are most equipped to assist you in + resolving the matter. + + ), + }, + { + question: "How do I withdraw NEAR funds?", + answer: ( + <> + Your NEAR funds are managed within your chosen wallet. To best address your question we suggest you visit the + support site for your wallet that holds your NEAR funds. For generalized steps see + + this article + + . + + ), + }, +]; + +const Wrapper = styled.div` + display: flex; + flex-direction: column; + gap: 80px; +`; + +const Text = styled.p` + font: var(--${(p) => p.$size ?? "text-base"}); + font-weight: ${(p) => p.$fontWeight} !important; + color: var(--${(p) => p.$color ?? "currentColor"}); + margin: 0; + + @media (max-width: 900px) { + font: var(--${(p) => p.$mobileSize ?? p.$size ?? "text-base"}); + } +`; + +const Flex = styled.div` + display: flex; + gap: ${(p) => p.$gap}; + align-items: ${(p) => p.$alignItems}; + justify-content: ${(p) => p.$justifyContent}; + flex-direction: ${(p) => p.$direction ?? "row"}; + flex-wrap: ${(p) => p.$wrap ?? "nowrap"}; + + ${(p) => + p.$mobileStack && + ` + @media (max-width: 900px) { + flex-direction: column; + } + `} + + @media (max-width: 900px) { + gap: ${(p) => p.$mobileGap ?? p.$gap}; + align-items: ${(p) => p.$mobileAlignItems ?? p.$alignItems}; + } +`; + +const Grid = styled.div` + display: grid; + gap: ${(p) => p.$gap}; + grid-template-columns: ${(p) => p.$columns}; + align-items: ${(p) => p.$alignItems}; + + @media (max-width: ${(p) => p.$breakpoint ?? "900px"}) { + grid-template-columns: ${(p) => p.$breakpointColumns ?? "1fr"}; + gap: ${(p) => p.$mobileGap ?? p.$gap}; + } +`; + +const Section = styled.div` + display: flex; + flex-direction: column; + gap: 2rem; + + &.faqs { + a { + color: var(--violet8); + font-weight: 700; + } + } +`; + +const Card = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + gap: 1.5rem; + padding: 1.5rem; + border-radius: 6px; + color: var(--${(p) => p.$color ?? "currentColor"}); + background: var(--${(p) => p.$background ?? "sand4"}); +`; + +const IconTextLink = styled("Link")` + all: unset; + display: inline-flex; + gap: 0.5rem; + align-items: center; + font: var(--text-s); + font-weight: 700; + color: currentColor; + text-decoration: none !important; + cursor: pointer; + transition: all 150ms; + + i { + font-size: 20px; + color: var(--${(p) => p.$iconColor ?? "currentColor"}); + transition: all 150ms; + + &.ph-caret-right { + font-size: 16px; + } + } + + &:hover, + &:focus { + span { + text-decoration: underline; + text-underline-offset: 2px; + } + + i { + color: currentColor; + } + } +`; + +return ( + +
+ + Get Support + + + + + + Have a question? Ask our experts + + + + NEAR is a global community of Web3 enthusiasts and innovators. Dive into one of our social channels to + engage in discussion with our lively community.{" "} + + + + Channels + + + + {channels.map((channel) => ( + + + {channel.label} + + + ))} + + + + + + + Help Center + + + Find articles about popular services and topics. + + + + Launch help center + + + + + + Resolve an issue + + + Get in touch with our Customer Care Team. + + + + Launch support form + + + + +
+ +
+ + FAQ + + + ({ + value: faq.question, + header: faq.question, + content: faq.answer, + })), + }} + /> +
+ +); From 319b2af050043594169311b5026dae1a1ea20847 Mon Sep 17 00:00:00 2001 From: Caleb Jacob Date: Mon, 15 Apr 2024 13:02:14 -0600 Subject: [PATCH 2/3] Adjust contact us wrapper padding --- src/Gateway/ContactUsPage.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/Gateway/ContactUsPage.jsx b/src/Gateway/ContactUsPage.jsx index 09301ac4..91e1684a 100644 --- a/src/Gateway/ContactUsPage.jsx +++ b/src/Gateway/ContactUsPage.jsx @@ -205,6 +205,8 @@ const faqs = [ const Wrapper = styled.div` display: flex; flex-direction: column; + padding-left: 1.5rem; + padding-right: 1.5rem; gap: 80px; `; From 446f37b822f906a6aa791997e905e0ff031f665d Mon Sep 17 00:00:00 2001 From: Caleb Jacob Date: Mon, 15 Apr 2024 13:08:42 -0600 Subject: [PATCH 3/3] Update className for ph icons --- src/Gateway/ContactUsPage.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/Gateway/ContactUsPage.jsx b/src/Gateway/ContactUsPage.jsx index 91e1684a..ca0f9beb 100644 --- a/src/Gateway/ContactUsPage.jsx +++ b/src/Gateway/ContactUsPage.jsx @@ -339,9 +339,9 @@ return ( {channels.map((channel) => ( - + {channel.label} - + ))} @@ -356,7 +356,7 @@ return ( Find articles about popular services and topics. - + Launch help center @@ -369,7 +369,7 @@ return ( Get in touch with our Customer Care Team. - + Launch support form