Press Page

components/Navbar/Navbar.tsx

@@ -4,18 +4,17 @@ import { useRouter } from "next/router"
 const Navbar = () => {
   const { pathname } = useRouter()
 
-  const navClasses = `md:min-w-[80px] md:px-[10px] md:h-[40px] 
-  text-[12px] md:text-[16px] md:py-[5px] py-[2px] h-fit uppercase md:capitalize
-  md:border-none bg-darkgray
-  flex items-center justify-center text-[#d2d2d2] font-dresden cursor-pointer`
+  const navClasses = `md:min-w-[80px] px-0 md:px-[10px] md:h-[40px] 
+  text-[11px] md:text-[16px] md:py-[5px] py-[2px] h-fit uppercase md:capitalize
+  md:border-none bg-darkgray flex items-center justify-center text-[#d2d2d2] font-dresden cursor-pointer`
 
   const isHomePage = pathname === "/"
   const isAboutPage = pathname.includes("/about")
   const isMusicPage = pathname.includes("/music")
   const isMintPage = pathname.includes("/mint")
 
   return (
-    <div className="w-full grid grid-cols-5 md:flex gap-x-[10px]">
+    <div className="w-full grid grid-cols-6 md:flex gap-x-[5px] md:gap-x-[10px]">
       <Link href="/">
         <div
           className={`${navClasses}
@@ -48,6 +47,14 @@ const Navbar = () => {
           Web3
         </div>
       </Link>
+      <Link href="/press">
+        <div
+          className={`${navClasses}
+        ${isMusicPage ? "border-b-[2px] border-b-[#347fdb] md:!bg-[#347fdb]" : ""}`}
+        >
+          Press
+        </div>
+      </Link>
       <a href="https://play.mynameisheno.com" target="_blank" rel="noreferrer">
         <div className={navClasses}>Play</div>
       </a>

components/Pages/PressPage/PressPage.tsx

@@ -0,0 +1,55 @@
+import useIsMobile from "../../../hooks/useIsMobile"
+import Layout from "../../Layout"
+import RecBar from "../../RecBar"
+import SeoHead from "../../SeoHead"
+import data from "../../../utils/press-data"
+
+const PressPage = () => {
+  const isMobile = useIsMobile()
+
+  return (
+    <Layout type={isMobile ? "mobile" : "base"}>
+      <SeoHead title="HENO. PRESS" image="/images/Landing/about.jpg" />
+      <div className="p-[5px] md:p-[10px] border-[2px] border-[#d2d2d2] h-full">
+        <div
+          className="border-[1px] border-darkgray text-[#d2d2d2] font-dresden 
+          py-[35px] text-center
+          flex items-center justify-center text-[16px] relative h-full
+          text-[12px] md:text-[16px]"
+        >
+          <div
+            className="h-fit max-h-full overflow-y-auto text-[12px] md:text-[16px]
+          p-[15px] md:p-[20px] gap-[30px]
+          grid grid-cols-1 md:grid-cols-2 w-full"
+          >
+            {data.map((pressItem) => (
+              <a
+                target="_blank"
+                href={pressItem.link}
+                className="flex justify-center h-full"
+                key={pressItem.link}
+                rel="noreferrer"
+              >
+                <div
+                  className="border-[2px] border-darkgray rounded-[24px] hover:border-gray
+                    transition duration-[300ms]
+                    w-full h-full max-w-[450px] flex flex-col items-center justify-center p-[30px]"
+                >
+                  <p className="text-yellow font-dresden text-center text-[24px] md:text-[30px]">
+                    {pressItem.title}
+                  </p>
+                  <p className="text-center text-yellow font-dresden text-[9px] md:text-[11px]">
+                    {pressItem.content}
+                  </p>
+                </div>
+              </a>
+            ))}
+          </div>
+          <RecBar />
+        </div>
+      </div>
+    </Layout>
+  )
+}
+
+export default PressPage

components/Pages/PressPage/index.tsx

@@ -0,0 +1,3 @@
+import PressPage from "./PressPage"
+
+export default PressPage

pages/press/index.tsx

@@ -1,5 +1,5 @@
-import LandingPage from "../../components/Pages/LandingPage/LandingPage"
+import PressPage from "../../components/Pages/PressPage"
 
-const Press = () => <LandingPage />
+const Press = () => <PressPage />
 
 export default Press

tailwind.config.js

@@ -14,7 +14,8 @@ module.exports = {
     colors: {
       darkgray: '#5b5959',
       gray: '#8c8c8c',
-      red: '#c52b2b'
+      red: '#c52b2b',
+      yellow: "#FFEE02"
     },
     container: {
       center: true,

utils/press-data.ts

@@ -0,0 +1,44 @@
+const data = [
+    {
+        title: "UPROXX",
+        link: "https://uproxx.com/music/rising-musicians-nft-web3/",
+        content: "But after discovering Web3, Heno was able to expand beyond the underground while doubling down on his goal of creating an impact with his music. Through his music, Heno is bridging together the diaspora from the US to Ethiopia. His latest Web3 release, “Neybors” featuring Elujay and J.Robb, has set a new standard for rap drops in the community."
+    },
+    {
+        title: "NFT100 Creator",
+        content: `"Selected by our editorial department alongside nominations from Now Pass holders, the NFT100 is an unranked showcase informed by a holistic blend of data points and editorial judgment to provide a comprehensive snapshot of the space’s diverse talents with a focus on achievements over the past year."`,
+        link: "https://nftnow.com/nft100-list-2023/"
+    },
+    {
+        title: "FORBES",
+        content: `"Vol 2 was special because he featured four notable indie artists on the project who had already made a name for themselves in the Web 3 music space.... Iman Europe, MoRuf Adewunmi, Black Dave, and Heno."`,
+        link: "https://www.forbes.com/sites/joshwilson/2022/08/01/how-snoop-doggs-nft-release-of-death-row-session-vol-2-is-opening-up-new-possibilities-for-independent-artists/?sh=660334b957f6"
+    },
+    {
+        title: "NFT NOW",
+        content: "To Heno and Oshea, this mission will enhance the philanthropic sector of the NFT space — which has remained concerned with ventures like funding Ukraine’s war relief efforts, the fight for reproductive rights, and more.",
+        link: "https://nftnow.com/features/web3-music-and-prison-reform-heno-andre-oshea-nfts/"
+    },
+    {
+        title: "FORTUNE",
+        content: `“I think this was a really big moment for Web3, music, independence, Black artists, and this exponentially growing community.”`,
+        link: "https://fortune.com/crypto/2022/04/27/music-nfts-web3-snoop-dogg-crypto-artists/"
+    },
+    {
+        title: "COLORS x STUDIOS",
+        content: "",
+        link: "https://colorsxstudios.com/music"
+    },
+    {
+        title: "ESSENCE",
+        content: `“Following Mayor Brown’s mention of how the revolution going on outside reflects our own heartbeat, young Heno. is right on the money”`,
+        link: "https://www.essence.com/entertainment/mayor-aja-brown-black-history-month-playlist/"
+    },
+    {
+        title: "SWIDLIFE",
+        content: `“The soulful and downtempo track oozes artistic potential at every moment. Throughout the record, Heno.’s displays his undeniable talent and affinity for clever songwriting...”`,
+        link: "https://swidlife.com/heno-delivers-a-mesmerizing-vibe-on-neybors/"
+    }
+]
+
+export default data