diff --git a/components/Core/DraggableModal.tsx b/components/Core/DraggableModal.tsx new file mode 100644 index 00000000..ab490bb8 --- /dev/null +++ b/components/Core/DraggableModal.tsx @@ -0,0 +1,65 @@ +import Draggable from "react-draggable" +import { useRouter } from "next/router" +import { motion } from "framer-motion" +import Icon from "./Icon" + +const DraggableModal = ({ children, href, handleClose, isVisible }) => { + const router = useRouter() + + const handleExpand = () => { + handleClose() + router.push(href) + } + + return ( +
+ {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */} +
+ +
+ +
+
+ + +
+
+
+
+
+
+
{children}
+ +
+ +
+ ) +} + +export default DraggableModal diff --git a/components/Core/Icon/resolver.tsx b/components/Core/Icon/resolver.tsx index 97a86071..74523b6f 100644 --- a/components/Core/Icon/resolver.tsx +++ b/components/Core/Icon/resolver.tsx @@ -2,6 +2,8 @@ import { IoWifi } from "react-icons/io5" import { SiTidal } from "react-icons/si" import { FaSpotify, FaApple, FaYoutube, FaFacebookF, FaInstagram, FaTwitter } from "react-icons/fa" import { SlSocialSoundcloud } from "react-icons/sl" +import { VscExpandAll } from "react-icons/vsc" +import { IoMdClose } from "react-icons/io" export const Icons = { wifi: IoWifi, @@ -13,4 +15,6 @@ export const Icons = { facebook: FaFacebookF, instagram: FaInstagram, twitter: FaTwitter, + expand: VscExpandAll, + close: IoMdClose, } diff --git a/components/LandingCard/LandingCard.tsx b/components/LandingCard/LandingCard.tsx index 7fe67565..e2e5ae26 100644 --- a/components/LandingCard/LandingCard.tsx +++ b/components/LandingCard/LandingCard.tsx @@ -4,7 +4,7 @@ import Icon from "../Core/Icon" const LandingCard = ({ title, img = "/images/Landing/web3.jpg", href }) => ( -
+
{
{children}
{entered && (
-
+
-
+
diff --git a/components/Layout/MobileLayout/MobileLayout.tsx b/components/Layout/MobileLayout/MobileLayout.tsx index 226124c8..e7b50feb 100644 --- a/components/Layout/MobileLayout/MobileLayout.tsx +++ b/components/Layout/MobileLayout/MobileLayout.tsx @@ -4,9 +4,9 @@ import Navbar from "../../Navbar" const MobileLayout = ({ children }: ILayout) => (
-
+
-
{children}
+
{children}
) diff --git a/components/LoadingPage/LoadingPage.tsx b/components/LoadingPage/LoadingPage.tsx index 4061f106..331fbc57 100644 --- a/components/LoadingPage/LoadingPage.tsx +++ b/components/LoadingPage/LoadingPage.tsx @@ -12,7 +12,7 @@ const LoadingPage = () => { layout="fill" objectFit="cover" objectPosition="center center" - src={isMobile ? "/images/Loading/m_loading.svg" : "/images/Loading/loading.png"} + src={isMobile ? "/images/Loading/m_loading.png" : "/images/Loading/loading.png"} />
) diff --git a/components/Navbar/Navbar.tsx b/components/Navbar/Navbar.tsx index ee720eb1..5b64f615 100644 --- a/components/Navbar/Navbar.tsx +++ b/components/Navbar/Navbar.tsx @@ -1,12 +1,15 @@ -import Link from "next/link" import { useRouter } from "next/router" +import Link from "next/link" +import { usePopupWidget } from "../../providers/PopupWidgetProvider" +import PopUpWindows from "../PopUpWindows/PopUpWindows" const Navbar = () => { const { pathname } = useRouter() + const { setIsOpenAbout, setIsOpenMusic, setIsOpenWeb3, setIsOpenPress } = usePopupWidget() 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` + md:border-none bg-darkgray flex items-center justify-center text-gray_1 font-dresden cursor-pointer` const isHomePage = pathname === "/" const isAboutPage = pathname.includes("/about") @@ -15,51 +18,54 @@ const Navbar = () => { const isPressPage = pathname.includes("/press") return ( -
- -
- Home -
- - -
+
+ +
+ Home +
+ +
- - -
+
- - -
+
- - -
+
- - -
Play
- -
+ + +
Play
+ +
+ + ) } diff --git a/components/Pages/AboutPage/AboutContent.tsx b/components/Pages/AboutPage/AboutContent.tsx new file mode 100644 index 00000000..ebb5a4a8 --- /dev/null +++ b/components/Pages/AboutPage/AboutContent.tsx @@ -0,0 +1,89 @@ +import RecBar from "../../RecBar" +import Icon from "../../Core/Icon" + +const AboutContent = () => ( +
+
+
+

+ {` Heno. is a true trailblazer of the music industry, boasting a plethora of talents as an + artist, producer, engineer, community organizer, and Web3 builder. Notably, Heno. has been + recognized as an "early innovator" in Web3 by Fortune Mag, while COLORS have praised his + "hard-hitting and powerful aesthetic." Heno. has carved a unique and hybrid role in the + music industry, simultaneously disrupting both the Web3 space and traditional music world.`} +

+

+ {`Hailing from Takoma Park, Maryland, as a first-generation Ethiopian-Eritrean artist, Heno. + uses his art and music to tell intentional and impactful stories, finding comfort within + uncomfortable conversations. With an impressive roster of collaborators including Mick + Jenkins, JPEGMAFIA, Chaz Bear (Toro Y Moi) just to name a few, Heno. has proven his + versatility as an artist. Heno.'s recently released the anticipated video for his track + "Neybors" that has gained popularity, hitting over 3 million streams & continuing to grow. + The track has been well-received by audiences in 2023 & had earned Heno. top ten spots on + Spotify's Mellow Bars & Alternative Hip Hop playlists - not to mention performing the + record at Coachella this year & being the first music artist to ever mint Coachella + footage onchain.`} +

+

+ {`"Neybors" is the first single from Heno.'s forthcoming concept album "I'm Tired of Being + Hypersurveilled" set to release in January 2024. Heno. speaks to his exhaustion with the + oppressive & all encompassing nature of surveillance by using personal experience & world + building to have universal conversations. This record is a part of a multi-hyphenate media + experience that includes a pixel arcade game, a VR world built in Unreal Engine, a short + film, + full length music album with features like Mick Jenkins, Elujay, Felix! & more. + "Neybors" is on the lighter side of surveillance however the music further explores how + surveillance affects all of us in a myriad of ways & why Heno. is tired of it.`} +

+ +
+ +
+
+) + +export default AboutContent diff --git a/components/Pages/AboutPage/AboutPage.tsx b/components/Pages/AboutPage/AboutPage.tsx index 94c39122..dd2f9041 100644 --- a/components/Pages/AboutPage/AboutPage.tsx +++ b/components/Pages/AboutPage/AboutPage.tsx @@ -1,8 +1,7 @@ import useIsMobile from "../../../hooks/useIsMobile" -import Icon from "../../Core/Icon" import Layout from "../../Layout" -import RecBar from "../../RecBar" import SeoHead from "../../SeoHead" +import AboutContent from "./AboutContent" const AboutPage = () => { const isMobile = useIsMobile() @@ -10,92 +9,7 @@ const AboutPage = () => { return ( -
-
-
-

- {` Heno. is a true trailblazer of the music industry, boasting a plethora of talents as an - artist, producer, engineer, community organizer, and Web3 builder. Notably, Heno. has been - recognized as an "early innovator" in Web3 by Fortune Mag, while COLORS have praised his - "hard-hitting and powerful aesthetic." Heno. has carved a unique and hybrid role in the - music industry, simultaneously disrupting both the Web3 space and traditional music world.`} -

-

- {`Hailing from Takoma Park, Maryland, as a first-generation Ethiopian-Eritrean artist, Heno. - uses his art and music to tell intentional and impactful stories, finding comfort within - uncomfortable conversations. With an impressive roster of collaborators including Mick - Jenkins, JPEGMAFIA, Chaz Bear (Toro Y Moi) just to name a few, Heno. has proven his - versatility as an artist. Heno.'s recently released the anticipated video for his track - "Neybors" that has gained popularity, hitting over 3 million streams & continuing to grow. - The track has been well-received by audiences in 2023 & had earned Heno. top ten spots on - Spotify's Mellow Bars & Alternative Hip Hop playlists - not to mention performing the - record at Coachella this year & being the first music artist to ever mint Coachella - footage onchain.`} -

-

- {`"Neybors" is the first single from Heno.'s forthcoming concept album "I'm Tired of Being - Hypersurveilled" set to release in January 2024. Heno. speaks to his exhaustion with the - oppressive & all encompassing nature of surveillance by using personal experience & world - building to have universal conversations. This record is a part of a multi-hyphenate media - experience that includes a pixel arcade game, a VR world built in Unreal Engine, a short - film, + full length music album with features like Mick Jenkins, Elujay, Felix! & more. - "Neybors" is on the lighter side of surveillance however the music further explores how - surveillance affects all of us in a myriad of ways & why Heno. is tired of it.`} -

- -
- -
-
+ ) } diff --git a/components/Pages/LandingPage/LandingPage.tsx b/components/Pages/LandingPage/LandingPage.tsx index cfd7e1f0..d16d630c 100644 --- a/components/Pages/LandingPage/LandingPage.tsx +++ b/components/Pages/LandingPage/LandingPage.tsx @@ -26,17 +26,27 @@ const LandingPage = () => { return ( -
- + {isMobile && ( + + Play Relief + + )} {!entered && } ) diff --git a/components/Pages/MintPage/MintContent.tsx b/components/Pages/MintPage/MintContent.tsx new file mode 100644 index 00000000..df3fb0ba --- /dev/null +++ b/components/Pages/MintPage/MintContent.tsx @@ -0,0 +1,14 @@ +import { ConnectButton } from "@rainbow-me/rainbowkit" +import MintButton from "../../MintButton" +import { useEthersSigner } from "../../../hooks/useEthersSigner" + +const MintContent = () => { + const signer = useEthersSigner() + return ( +
+ {signer ? : } +
+ ) +} + +export default MintContent diff --git a/components/Pages/MintPage/MintPage.tsx b/components/Pages/MintPage/MintPage.tsx index 0761bd90..b1b1ddcd 100644 --- a/components/Pages/MintPage/MintPage.tsx +++ b/components/Pages/MintPage/MintPage.tsx @@ -1,20 +1,12 @@ -import { ConnectButton } from "@rainbow-me/rainbowkit" -import MintButton from "../../MintButton" import Layout from "../../Layout" import SeoHead from "../../SeoHead" -import { useEthersSigner } from "../../../hooks/useEthersSigner" +import MintContent from "./MintContent" -const MintPage = () => { - const signer = useEthersSigner() - - return ( - - -
- {signer ? : } -
- - ) -} +const MintPage = () => ( + + + + +) export default MintPage diff --git a/components/Pages/MusicPage/MusicContent.tsx b/components/Pages/MusicPage/MusicContent.tsx new file mode 100644 index 00000000..9d9b73b6 --- /dev/null +++ b/components/Pages/MusicPage/MusicContent.tsx @@ -0,0 +1,27 @@ +import useIsMobile from "../../../hooks/useIsMobile" +import MusicList from "./MusicList" +import MusicSlider from "./MusicSlider" +import RecBar from "../../RecBar" + +const MusicContent = ({ isPopup = false }) => { + const isMobile = useIsMobile() + return ( +
+
+

Scroll to see more

+
+ {isMobile ? : } +
+ +
+
+ ) +} + +export default MusicContent diff --git a/components/Pages/MusicPage/MusicPage.tsx b/components/Pages/MusicPage/MusicPage.tsx index af8191a7..d26cd8de 100644 --- a/components/Pages/MusicPage/MusicPage.tsx +++ b/components/Pages/MusicPage/MusicPage.tsx @@ -1,9 +1,7 @@ import useIsMobile from "../../../hooks/useIsMobile" import Layout from "../../Layout" -import RecBar from "../../RecBar" import SeoHead from "../../SeoHead" -import MusicList from "./MusicList" -import MusicSlider from "./MusicSlider" +import MusicContent from "./MusicContent" const MusicPage = () => { const isMobile = useIsMobile() @@ -11,20 +9,7 @@ const MusicPage = () => { return ( -
-
-
- {isMobile ? : } -
- -
-
+ ) } diff --git a/components/Pages/MusicPage/MusicSlider/MusicSlider.tsx b/components/Pages/MusicPage/MusicSlider/MusicSlider.tsx index 21da874f..f29d101c 100644 --- a/components/Pages/MusicPage/MusicSlider/MusicSlider.tsx +++ b/components/Pages/MusicPage/MusicSlider/MusicSlider.tsx @@ -2,7 +2,7 @@ import Media from "../../../Core/Media" import Slider from "../../../Core/Slider" import musics from "../musics.json" -const MusicSlider = () => ( +const MusicSlider = ({ isPopup }) => ( ( slidesPerView: 1, breakpoints: { 1560: { - slidesPerView: 4, + slidesPerView: isPopup ? 2 : 4, }, 1340: { - slidesPerView: 3, + slidesPerView: isPopup ? 2 : 4, }, 1060: { - slidesPerView: 2, + slidesPerView: isPopup ? 2 : 4, }, }, mousewheel: { diff --git a/components/Pages/PressPage/PressContent.tsx b/components/Pages/PressPage/PressContent.tsx new file mode 100644 index 00000000..61050a29 --- /dev/null +++ b/components/Pages/PressPage/PressContent.tsx @@ -0,0 +1,45 @@ +import data from "../../../utils/press-data" +import RecBar from "../../RecBar" + +const PressContent = () => ( +
+
+
+ {data.map((pressItem) => ( + +
+

+ {pressItem.title} +

+

+ {pressItem.content} +

+
+ + ))} +
+ +
+
+) + +export default PressContent diff --git a/components/Pages/PressPage/PressPage.tsx b/components/Pages/PressPage/PressPage.tsx index 3f371268..8ef69851 100644 --- a/components/Pages/PressPage/PressPage.tsx +++ b/components/Pages/PressPage/PressPage.tsx @@ -1,53 +1,14 @@ import useIsMobile from "../../../hooks/useIsMobile" import Layout from "../../Layout" -import RecBar from "../../RecBar" import SeoHead from "../../SeoHead" -import data from "../../../utils/press-data" +import PressContent from "./PressContent" const PressPage = () => { const isMobile = useIsMobile() - return ( -
-
-
- {data.map((pressItem) => ( - -
-

- {pressItem.title} -

-

- {pressItem.content} -

-
- - ))} -
- -
-
+ ) } diff --git a/components/PopUpWindows/PopUpWindows.tsx b/components/PopUpWindows/PopUpWindows.tsx new file mode 100644 index 00000000..b3e1a2ac --- /dev/null +++ b/components/PopUpWindows/PopUpWindows.tsx @@ -0,0 +1,61 @@ +import { usePopupWidget } from "../../providers/PopupWidgetProvider" +import DraggableModal from "../Core/DraggableModal" +import AboutContent from "../Pages/AboutPage/AboutContent" +import MintContent from "../Pages/MintPage/MintContent" +import MusicContent from "../Pages/MusicPage/MusicContent" +import PressContent from "../Pages/PressPage/PressContent" + +const PopUpWindows = () => { + const { + setIsOpenAbout, + isOpenAbout, + isOpenPress, + setIsOpenPress, + isOpenMusic, + setIsOpenMusic, + isOpenWeb3, + setIsOpenWeb3, + } = usePopupWidget() + return ( + <> + {isOpenAbout && ( + setIsOpenAbout(false)} + isVisible={isOpenAbout} + > + + + )} + {isOpenMusic && ( + setIsOpenMusic(false)} + isVisible={isOpenMusic} + > + + + )} + {isOpenWeb3 && ( + setIsOpenWeb3(false)} + isVisible={isOpenWeb3} + > + + + )} + {isOpenPress && ( + setIsOpenPress(false)} + isVisible={isOpenPress} + > + + + )} + + ) +} + +export default PopUpWindows diff --git a/components/PopUpWindows/index.tsx b/components/PopUpWindows/index.tsx new file mode 100644 index 00000000..e69de29b diff --git a/package.json b/package.json index 51509d0a..427fe358 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,7 @@ "react-confetti": "^6.1.0", "react-csv": "^2.2.2", "react-dom": "^18.1.0", + "react-draggable": "^4.4.6", "react-icons": "^4.11.0", "react-img-mapper": "^1.5.0", "react-table": "^7.8.0", diff --git a/pages/_app.tsx b/pages/_app.tsx index 83981a79..fea741de 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -18,6 +18,7 @@ import Swiper, { Mousewheel } from "swiper" import { ThemeProvider } from "../providers/ThemeProvider" import { TITLE } from "../lib/consts" import PageLoadProvider from "../providers/PageLoadProvider" +import PopupWidgetProvider from "../providers/PopupWidgetProvider" Swiper.use([Mousewheel]) @@ -56,13 +57,15 @@ function MyApp({ Component, pageProps }: AppProps) { })} > - - - - - - - + + + + + + + + + diff --git a/providers/PopupWidgetProvider.tsx b/providers/PopupWidgetProvider.tsx new file mode 100644 index 00000000..27bf86f1 --- /dev/null +++ b/providers/PopupWidgetProvider.tsx @@ -0,0 +1,43 @@ +import { createContext, useContext, useMemo, useState } from "react" + +const PopupWidgetContext = createContext(null) + +const PopupWidgetProvider = ({ children }) => { + const [isOpenAbout, setIsOpenAbout] = useState(false) + const [isOpenMusic, setIsOpenMusic] = useState(false) + const [isOpenWeb3, setIsOpenWeb3] = useState(false) + const [isOpenPress, setIsOpenPress] = useState(false) + + const value = useMemo(() => ({ + isOpenAbout, + setIsOpenAbout, + isOpenMusic, + setIsOpenMusic, + isOpenWeb3, + setIsOpenWeb3, + isOpenPress, + setIsOpenPress + }), + [ + isOpenAbout, + setIsOpenAbout, + isOpenMusic, + setIsOpenMusic, + isOpenWeb3, + setIsOpenWeb3, + isOpenPress, + setIsOpenPress + ]) + + return {children} +} + +export const usePopupWidget = () => { + const context = useContext(PopupWidgetContext) + if (!context) { + throw new Error("usePopupWidget must be used within a PopupWidgetProvider") + } + return context +} + +export default PopupWidgetProvider diff --git a/public/images/Loading/loading.png b/public/images/Loading/loading.png index 7462d264..abfe0b1f 100644 Binary files a/public/images/Loading/loading.png and b/public/images/Loading/loading.png differ diff --git a/public/images/Loading/m_loading.png b/public/images/Loading/m_loading.png index f8effa78..0203650f 100644 Binary files a/public/images/Loading/m_loading.png and b/public/images/Loading/m_loading.png differ diff --git a/public/images/Loading/m_loading.svg b/public/images/Loading/m_loading.svg deleted file mode 100644 index 108def9f..00000000 --- a/public/images/Loading/m_loading.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - diff --git a/tailwind.config.js b/tailwind.config.js index f1e6f524..539b7e3d 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -14,8 +14,10 @@ module.exports = { colors: { darkgray: '#5b5959', gray: '#8c8c8c', + gray_1: '#d2d2d2', red: '#c52b2b', - yellow: "#FFEE02" + yellow: "#FFEE02", + black: '#000000' }, container: { center: true, diff --git a/yarn.lock b/yarn.lock index 8905dbe3..39123fec 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8583,6 +8583,14 @@ react-dom@^18.1.0: loose-envify "^1.1.0" scheduler "^0.23.0" +react-draggable@^4.4.6: + version "4.4.6" + resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.6.tgz#63343ee945770881ca1256a5b6fa5c9f5983fe1e" + integrity sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw== + dependencies: + clsx "^1.1.1" + prop-types "^15.8.1" + react-fast-compare@^3.2.0: version "3.2.2" resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"