diff --git a/apps/web/src/components/Home/BottomSection.tsx b/apps/web/src/components/Home/BottomSection.tsx new file mode 100644 index 000000000..7745b6253 --- /dev/null +++ b/apps/web/src/components/Home/BottomSection.tsx @@ -0,0 +1,40 @@ +import HorizontalScroller from '@components/Common/HorizontalScroller' +import useProfileStore from '@lib/store/idb/profile' +import { useRef } from 'react' + +import EngageBox from './EngageBox' +import EnjoyBox from './EnjoyBox' +import ExploreBox from './ExploreBox' +import LogoHero from './LogoHero' +import WelcomeBox from './WelcomeBox' +import WelcomeSuccess from './WelcomeSuccess' +import WelcomeSuccessBox from './WelcomeSuccessBox' + +const BottomSection = () => { + const sectionRef = useRef(null) + const activeProfile = useProfileStore((state) => state.activeProfile) + + return ( +
+ +
+ + {!activeProfile?.id && } + {activeProfile?.id && } + + + + +
+
+ ) +} + +export default BottomSection diff --git a/apps/web/src/components/Home/DecentralandAlert.tsx b/apps/web/src/components/Home/DecentralandAlert.tsx new file mode 100644 index 000000000..6619c2fee --- /dev/null +++ b/apps/web/src/components/Home/DecentralandAlert.tsx @@ -0,0 +1,24 @@ +import React from 'react' + +const DecentralandAlert: React.FC = () => { + return ( + + Play on Decentraland +
+
+

Play on Decentraland

+
+ + ) +} + +export default DecentralandAlert diff --git a/apps/web/src/components/Home/DragverseCommunity.tsx b/apps/web/src/components/Home/DragverseCommunity.tsx new file mode 100644 index 000000000..480c89781 --- /dev/null +++ b/apps/web/src/components/Home/DragverseCommunity.tsx @@ -0,0 +1,17 @@ +const DragverseCommunity = () => { + return ( +
+
+
+
+ Like, Mirror, Comment, Collect. +
+

+ Discover music videos, vlogs, make-up tutorials, & more!⚑ +

+
+
+ ) +} + +export default DragverseCommunity diff --git a/apps/web/src/components/Home/DragverseWorlds.tsx b/apps/web/src/components/Home/DragverseWorlds.tsx new file mode 100644 index 000000000..bc4fb0ff9 --- /dev/null +++ b/apps/web/src/components/Home/DragverseWorlds.tsx @@ -0,0 +1,16 @@ +const DragverseWorlds = () => { + return ( +
+
+
+
Experience Digital Drag
+

+ Experiment with drag looks, complete quests, and explore Dragverse + Worlds.πŸŒ• +

+
+
+ ) +} + +export default DragverseWorlds diff --git a/apps/web/src/components/Home/EngageBox.tsx b/apps/web/src/components/Home/EngageBox.tsx new file mode 100644 index 000000000..932be534c --- /dev/null +++ b/apps/web/src/components/Home/EngageBox.tsx @@ -0,0 +1,15 @@ +const EngageBox = () => { + return ( +
+
+
+
Engage
+

+ Tip, collect, and save videos to support your favorite creators.πŸ’Ώ +

+
+
+ ) +} + +export default EngageBox diff --git a/apps/web/src/components/Home/EnjoyBox.tsx b/apps/web/src/components/Home/EnjoyBox.tsx new file mode 100644 index 000000000..f50bed393 --- /dev/null +++ b/apps/web/src/components/Home/EnjoyBox.tsx @@ -0,0 +1,15 @@ +const EnjoyBox = () => { + return ( +
+
+
+
Enjoy
+

+ Experience delusional drag shows and fun digital experiences.πŸ”₯ +

+
+
+ ) +} + +export default EnjoyBox diff --git a/apps/web/src/components/Home/ExploreBox.tsx b/apps/web/src/components/Home/ExploreBox.tsx new file mode 100644 index 000000000..da01e3ec1 --- /dev/null +++ b/apps/web/src/components/Home/ExploreBox.tsx @@ -0,0 +1,15 @@ +const ExploreBox = () => { + return ( +
+
+
+
Explore
+

+ Delve into a world of videos and content from our amazing community.🎢 +

+
+
+ ) +} + +export default ExploreBox diff --git a/apps/web/src/components/Home/HeroSection.tsx b/apps/web/src/components/Home/HeroSection.tsx new file mode 100644 index 000000000..e08fa8d65 --- /dev/null +++ b/apps/web/src/components/Home/HeroSection.tsx @@ -0,0 +1,34 @@ +import HorizontalScroller from '@components/Common/HorizontalScroller' +import useProfileStore from '@lib/store/idb/profile' +import { useRef } from 'react' + +import DecentralandAlert from './DecentralandAlert' +import DragverseWorlds from './DragverseWorlds' +import HyperfyAlert from './HyperfyAlert' +import SpatialAlert from './SpatialAlert' + +const HeroSection = () => { + const sectionRef = useRef(null) + const { activeProfile } = useProfileStore() + + return ( +
+ +
+ + + + +
+
+ ) +} + +export default HeroSection diff --git a/apps/web/src/components/Home/HorizontalVideos.tsx b/apps/web/src/components/Home/HorizontalVideos.tsx new file mode 100644 index 000000000..c92283b3c --- /dev/null +++ b/apps/web/src/components/Home/HorizontalVideos.tsx @@ -0,0 +1,25 @@ +import VideoCard from '@components/Common/VideoCard' +import { getPublication } from '@dragverse/generic' +import type { AnyPublication } from '@dragverse/lens' +import type { FC } from 'react' + +type Props = { + videos: AnyPublication[] +} + +const HorizontalVideos: FC = ({ videos }) => { + return ( +
+ {videos?.map((video: AnyPublication, i) => { + const targetPublication = getPublication(video) + return ( +
+ +
+ ) + })} +
+ ) +} + +export default HorizontalVideos diff --git a/apps/web/src/components/Home/HottestTea.tsx b/apps/web/src/components/Home/HottestTea.tsx new file mode 100644 index 000000000..906baa8a4 --- /dev/null +++ b/apps/web/src/components/Home/HottestTea.tsx @@ -0,0 +1,19 @@ +import { TAPE_APP_NAME } from '@dragverse/constants' + +const HottestTea = () => { + return ( +
+
+
+
+ A portal into the {TAPE_APP_NAME} community +
+

+ Celebrating the diverse and talented creators within our community. ✨ +

+
+
+ ) +} + +export default HottestTea diff --git a/apps/web/src/components/Home/HyperfyAlert.tsx b/apps/web/src/components/Home/HyperfyAlert.tsx new file mode 100644 index 000000000..d515a707a --- /dev/null +++ b/apps/web/src/components/Home/HyperfyAlert.tsx @@ -0,0 +1,24 @@ +import React from 'react' + +const HyperfyAlert: React.FC = () => { + return ( + + Play on Hyperfy +
+
+

Play on Hyperfy

+
+ + ) +} + +export default HyperfyAlert diff --git a/apps/web/src/components/Home/LogoHero.tsx b/apps/web/src/components/Home/LogoHero.tsx new file mode 100644 index 000000000..f42696109 --- /dev/null +++ b/apps/web/src/components/Home/LogoHero.tsx @@ -0,0 +1,15 @@ +import React from 'react' + +const LogoHero: React.FC = () => { + return ( +
+ Dragverse Logo +
+ ) +} + +export default LogoHero diff --git a/apps/web/src/components/Home/MidSection.tsx b/apps/web/src/components/Home/MidSection.tsx new file mode 100644 index 000000000..2ea869f5e --- /dev/null +++ b/apps/web/src/components/Home/MidSection.tsx @@ -0,0 +1,87 @@ +import HorizontalScroller from '@components/Common/HorizontalScroller' +import { + ALLOWED_APP_IDS, + INFINITE_SCROLL_ROOT_MARGIN, + IS_MAINNET, + TAPE_APP_ID +} from '@dragverse/constants' +import type { PrimaryPublication, PublicationsRequest } from '@dragverse/lens' +import { + LimitType, + PublicationMetadataMainFocusType, + PublicationType, + usePublicationsQuery +} from '@dragverse/lens' +import { Spinner } from '@dragverse/ui' +import useCuratedProfiles from '@lib/store/idb/curated' +import { useRef } from 'react' +import { useInView } from 'react-cool-inview' + +import DragverseCommunity from './DragverseCommunity' +import HorizontalVideos from './HorizontalVideos' + +const MidSection = () => { + const sectionRef = useRef(null) + const curatedProfiles = useCuratedProfiles((state) => state.curatedProfiles) + + const request: PublicationsRequest = { + where: { + metadata: { + mainContentFocus: [PublicationMetadataMainFocusType.Video], + publishedOn: IS_MAINNET ? [TAPE_APP_ID, ...ALLOWED_APP_IDS] : undefined + }, + publicationTypes: [PublicationType.Post], + from: curatedProfiles + }, + limit: LimitType.Fifty + } + + const { data, loading, error, fetchMore } = usePublicationsQuery({ + variables: { request }, + skip: !curatedProfiles?.length + }) + + const pageInfo = data?.publications?.pageInfo + const videos = data?.publications?.items as unknown as PrimaryPublication[] + + const { observe } = useInView({ + rootMargin: INFINITE_SCROLL_ROOT_MARGIN, + onEnter: async () => { + await fetchMore({ + variables: { + request: { + ...request, + cursor: pageInfo?.next + } + } + }) + } + }) + + return ( +
+ +
+ + {loading && } + {!error && !loading && videos?.length > 0 && ( +
+ +
+ )} + {videos?.length === 0 && ( +

No trending videos found.

+ )} +
+
+ ) +} + +export default MidSection diff --git a/apps/web/src/components/Home/SpatialAlert.tsx b/apps/web/src/components/Home/SpatialAlert.tsx new file mode 100644 index 000000000..ecf5bdc7f --- /dev/null +++ b/apps/web/src/components/Home/SpatialAlert.tsx @@ -0,0 +1,24 @@ +import React from 'react' + +const SpatialAlert: React.FC = () => { + return ( + + Play on Spatial +
+
+

Play on Spatial

+
+ + ) +} + +export default SpatialAlert diff --git a/apps/web/src/components/Home/TopSection.tsx b/apps/web/src/components/Home/TopSection.tsx index 9a83f1efd..46a0a48a4 100644 --- a/apps/web/src/components/Home/TopSection.tsx +++ b/apps/web/src/components/Home/TopSection.tsx @@ -2,11 +2,8 @@ import HorizontalScroller from '@components/Common/HorizontalScroller' import useProfileStore from '@lib/store/idb/profile' import { useRef } from 'react' -import GitcoinAlert from './GitcoinAlert' +import HottestTea from './HottestTea' import LatestBytes from './LatestBytes' -import LensManagerAlert from './LensManagerAlert' -import WelcomeAlert from './WelcomeAlert' -import WelcomeSuccess from './WelcomeSuccess' const TopSection = () => { const sectionRef = useRef(null) @@ -16,17 +13,14 @@ const TopSection = () => {
- {!activeProfile?.id && } - {activeProfile?.id && } - - +
diff --git a/apps/web/src/components/Home/WelcomeBox.tsx b/apps/web/src/components/Home/WelcomeBox.tsx new file mode 100644 index 000000000..b00b48765 --- /dev/null +++ b/apps/web/src/components/Home/WelcomeBox.tsx @@ -0,0 +1,23 @@ +import { Button } from '@dragverse/ui' +import Link from 'next/link' + +const WelcomeBox = () => { + return ( +
+
+
+
Hi Darling
+

+ Login to Dragverse with your email, phone, socials, or πŸ‘› +

+
+ + + +
+
+
+ ) +} + +export default WelcomeBox diff --git a/apps/web/src/components/Home/WelcomeSuccess.tsx b/apps/web/src/components/Home/WelcomeSuccess.tsx index 66f3b4805..e1cf5ac40 100644 --- a/apps/web/src/components/Home/WelcomeSuccess.tsx +++ b/apps/web/src/components/Home/WelcomeSuccess.tsx @@ -1,28 +1,15 @@ -import { Button } from '@dragverse/ui' -import Link from 'next/link' - -const JoinWaitlist = () => { +const WelcomeSuccess = () => { return ( -
-
-
-
-
- You are in⚑ It's giving Digital Drag Delusion -
+
+
+
+
Happy Pride

- Thank you for exploring our community app! Please remember our app is - on BETA and some things might now work as expected. If you have any - questions: + Embrace your true self and spread the joy of being authenticly YOU! 🌈

-
- - - -
) } -export default JoinWaitlist +export default WelcomeSuccess diff --git a/apps/web/src/components/Home/WelcomeSuccessBox.tsx b/apps/web/src/components/Home/WelcomeSuccessBox.tsx new file mode 100644 index 000000000..55e7474cd --- /dev/null +++ b/apps/web/src/components/Home/WelcomeSuccessBox.tsx @@ -0,0 +1,34 @@ +import HorizontalScroller from '@components/Common/HorizontalScroller' +import useProfileStore from '@lib/store/idb/profile' +import { useRef } from 'react' + +import LogoHero from './LogoHero' +import WelcomeBox from './WelcomeBox' +import WelcomeSuccess from './WelcomeSuccess' +import WelcomeSuccessBox from './WelcomeSuccessBox' + +const BottomSection = () => { + const sectionRef = useRef(null) + const activeProfile = useProfileStore((state) => state.activeProfile) + + return ( +
+ +
+ + {!activeProfile?.id && } + {activeProfile?.id && } + +
+
+ ) +} + +export default BottomSection diff --git a/apps/web/src/components/Home/ZorbAlert.tsx b/apps/web/src/components/Home/ZorbAlert.tsx deleted file mode 100644 index a29bc7fa2..000000000 --- a/apps/web/src/components/Home/ZorbAlert.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { STATIC_ASSETS, TAPE_APP_NAME } from '@dragverse/constants' -import { imageCdn } from '@dragverse/generic' -import { Button } from '@dragverse/ui' -import Link from 'next/link' - -const ZorbAlert = () => { - return ( -
-
- cover -
-
- Mint your free {TAPE_APP_NAME} Zorb! -
-
- - - -
-
-
- ) -} - -export default ZorbAlert diff --git a/apps/web/src/components/Home/index.tsx b/apps/web/src/components/Home/index.tsx index e4f4300a4..f85b22018 100644 --- a/apps/web/src/components/Home/index.tsx +++ b/apps/web/src/components/Home/index.tsx @@ -3,7 +3,9 @@ import type { NextPage } from 'next' import { useTheme } from 'next-themes' import { useEffect } from 'react' -import Feed from './Feed' +import BottomSection from './BottomSection' +import HeroSection from './HeroSection' +import MidSection from './MidSection' import TopSection from './TopSection' const Home: NextPage = () => { @@ -15,8 +17,10 @@ const Home: NextPage = () => { return (
+ + - +
) } diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json index 015d3afd3..6c007a082 100644 --- a/apps/web/tsconfig.json +++ b/apps/web/tsconfig.json @@ -19,8 +19,8 @@ }, "include": [ "next-env.d.ts", - "**/*.ts", - "**/*.tsx", + "src/**/*.ts", + "src/**/*.tsx", "src/styles/index.css", ".next/types/**/*.ts" , "src/components/Common/ReminderPasswordPopup.js" ] diff --git a/packages/ui/tailwind-preset.ts b/packages/ui/tailwind-preset.ts index 3be43b327..8a0400a5e 100644 --- a/packages/ui/tailwind-preset.ts +++ b/packages/ui/tailwind-preset.ts @@ -51,7 +51,8 @@ module.exports = { 800: '#815BFF', 850: '#18122D', 900: '#DE1BDD', - 950: '#5D24BB' + 950: '#5D24BB', + 960: '#FFEC16' } } }