Update Homepage

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<HTMLDivElement>(null)
+  const activeProfile = useProfileStore((state) => state.activeProfile)
+
+  return (
+    <div className="flex flex-col">
+      <HorizontalScroller
+        sectionRef={sectionRef}
+        heading=""
+        headingClassName="font-syne font-extrabold"
+      />
+      <div
+        ref={sectionRef}
+        className="no-scrollbar laptop:pt-6 relative flex items-start space-x-4 overflow-x-auto overflow-y-hidden scroll-smooth pt-6"
+      >
+        <LogoHero />
+        {!activeProfile?.id && <WelcomeBox />}
+        {activeProfile?.id && <WelcomeSuccessBox />}
+        <WelcomeSuccess />
+        <ExploreBox />
+        <EnjoyBox />
+        <EngageBox />
+      </div>
+    </div>
+  )
+}
+
+export default BottomSection

apps/web/src/components/Home/DecentralandAlert.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+const DecentralandAlert: React.FC = () => {
+  return (
+    <a
+      href="https://decentraland.org/play/?realm=dragverse.dcl.eth"
+      className="tape-border rounded-large ultrawide:h-[400px] relative flex h-[350px] w-full flex-none overflow-hidden sm:w-[300px] lg:w-[500px]"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <img
+        src="https://static.wixstatic.com/media/707696_71820dafe39f4acbbab6b3c11ed819f7~mv2.jpg"
+        alt="Play on Decentraland"
+        className="absolute inset-0 h-full w-full object-cover"
+      />
+      <div className="ultrawide:p-8 relative flex h-full w-full flex-col justify-end space-y-4 p-4 text-left text-white md:p-6">
+        <div className="absolute inset-0 h-full w-full bg-gradient-to-t from-black/90 via-black/60 to-transparent"></div>
+        <h3 className="relative text-lg font-bold">Play on Decentraland</h3>
+      </div>
+    </a>
+  )
+}
+
+export default DecentralandAlert

apps/web/src/components/Home/DragverseCommunity.tsx

@@ -0,0 +1,17 @@
+const DragverseCommunity = () => {
+  return (
+    <div className="tape-border rounded-large ultrawide:h-[250px] relative flex h-[300px] w-[300px] flex-none overflow-hidden">
+      <div className="to-brand-250 via-brand-150/90 absolute inset-0 z-[1] h-full w-full bg-gradient-to-b from-transparent" />
+      <div className="ultrawide:p-8 relative z-[2] flex h-full flex-col justify-end space-y-4 p-4 text-left text-white md:p-6">
+        <div className="text-3xl font-bold">
+          Like, Mirror, Comment, Collect.
+        </div>
+        <p className="md:text-md max-w-2xl text-sm lg:text-lg">
+          Discover music videos, vlogs, make-up tutorials, & more!⚡
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default DragverseCommunity

apps/web/src/components/Home/DragverseWorlds.tsx

@@ -0,0 +1,16 @@
+const DragverseWorlds = () => {
+  return (
+    <div className="tape-border rounded-large ultrawide:h-[400px] relative flex h-[300px] w-[300px] flex-none overflow-hidden">
+      <div className="to-brand-250 via-brand-150/90 absolute inset-0 z-[1] h-full w-full bg-gradient-to-b from-transparent" />
+      <div className="ultrawide:p-8 relative z-[2] flex h-full flex-col justify-end space-y-4 p-4 text-left text-white md:p-6">
+        <div className="text-3xl font-bold">Experience Digital Drag</div>
+        <p className="md:text-md max-w-2xl text-sm lg:text-lg">
+          Experiment with drag looks, complete quests, and explore Dragverse
+          Worlds.🌕
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default DragverseWorlds

apps/web/src/components/Home/EngageBox.tsx

@@ -0,0 +1,15 @@
+const EngageBox = () => {
+  return (
+    <div className="tape-border rounded-large ultrawide:h-[250px] relative flex h-[250px] w-[300px] flex-none overflow-hidden">
+      <div className="to-brand-600 via-brand-950/60 absolute inset-0 z-[1] h-full w-full bg-gradient-to-b from-transparent" />
+      <div className="ultrawide:p-8 relative z-[2] flex h-full flex-col justify-end space-y-4 p-4 text-left text-white md:p-6">
+        <div className="text-3xl font-bold">Engage</div>
+        <p className="md:text-md max-w-2xl text-sm lg:text-lg">
+          Tip, collect, and save videos to support your favorite creators.💿
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default EngageBox

apps/web/src/components/Home/EnjoyBox.tsx

@@ -0,0 +1,15 @@
+const EnjoyBox = () => {
+  return (
+    <div className="tape-border rounded-large ultrawide:h-[250px] relative flex h-[250px] w-[300px] flex-none overflow-hidden">
+      <div className="to-brand-600 via-brand-950/60 absolute inset-0 z-[1] h-full w-full bg-gradient-to-b from-transparent" />
+      <div className="ultrawide:p-8 relative z-[2] flex h-full flex-col justify-end space-y-4 p-4 text-left text-white md:p-6">
+        <div className="text-3xl font-bold">Enjoy</div>
+        <p className="md:text-md max-w-2xl text-sm lg:text-lg">
+          Experience delusional drag shows and fun digital experiences.🔥
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default EnjoyBox

apps/web/src/components/Home/ExploreBox.tsx

@@ -0,0 +1,15 @@
+const ExploreBox = () => {
+  return (
+    <div className="tape-border rounded-large ultrawide:h-[250px] relative flex h-[250px] w-[300px] flex-none overflow-hidden">
+      <div className="to-brand-600 via-brand-950/60 absolute inset-0 z-[1] h-full w-full bg-gradient-to-b from-transparent" />
+      <div className="ultrawide:p-8 relative z-[2] flex h-full flex-col justify-end space-y-4 p-4 text-left text-white md:p-6">
+        <div className="text-3xl font-bold">Explore</div>
+        <p className="md:text-md max-w-2xl text-sm lg:text-lg">
+          Delve into a world of videos and content from our amazing community.🎶
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default ExploreBox

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<HTMLDivElement>(null)
+  const { activeProfile } = useProfileStore()
+
+  return (
+    <div className="flex flex-col">
+      <HorizontalScroller
+        sectionRef={sectionRef}
+        heading=""
+        headingClassName="font-syne font-extrabold"
+      />
+      <div
+        ref={sectionRef}
+        className="no-scrollbar laptop:pt-6 relative flex items-start space-x-4 overflow-x-auto overflow-y-hidden scroll-smooth pb-6 pt-4" // Added pb-4 for bottom padding
+      >
+        <DragverseWorlds />
+        <HyperfyAlert />
+        <SpatialAlert />
+        <DecentralandAlert />
+      </div>
+    </div>
+  )
+}
+
+export default HeroSection

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<Props> = ({ videos }) => {
+  return (
+    <div className="no-scrollbar flex h-full space-x-4 overflow-x-auto">
+      {videos?.map((video: AnyPublication, i) => {
+        const targetPublication = getPublication(video)
+        return (
+          <div key={`${video?.id}_${i}`} className="w-80 flex-shrink-0">
+            <VideoCard video={targetPublication} />
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+export default HorizontalVideos

apps/web/src/components/Home/HottestTea.tsx

@@ -0,0 +1,19 @@
+import { TAPE_APP_NAME } from '@dragverse/constants'
+
+const HottestTea = () => {
+  return (
+    <div className="tape-border rounded-large ultrawide:h-[400px] relative flex h-[300px] w-[300px] flex-none overflow-hidden">
+      <div className="to-brand-250 via-brand-150/90 absolute inset-0 z-[1] h-full w-full bg-gradient-to-b from-transparent" />
+      <div className="ultrawide:p-8 relative z-[2] flex h-full flex-col justify-end space-y-4 p-4 text-left text-white md:p-6">
+        <div className="text-3xl font-bold">
+          A portal into the {TAPE_APP_NAME} community
+        </div>
+        <p className="md:text-md max-w-2xl text-sm lg:text-lg">
+          Celebrating the diverse and talented creators within our community. ✨
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export default HottestTea

apps/web/src/components/Home/HyperfyAlert.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+const HyperfyAlert: React.FC = () => {
+  return (
+    <a
+      href="https://hyperfy.io/drag"
+      className="tape-border rounded-large ultrawide:h-[400px] relative flex h-[350px] w-full flex-none overflow-hidden sm:w-[300px] lg:w-[500px]"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <img
+        src="https://static.wixstatic.com/media/707696_13bc8603b6144e60933071e2e9605d20~mv2.jpg"
+        alt="Play on Hyperfy"
+        className="absolute inset-0 h-full w-full object-cover"
+      />
+      <div className="ultrawide:p-8 relative flex h-full w-full flex-col justify-end space-y-4 p-4 text-left text-white md:p-6">
+        <div className="absolute inset-0 h-full w-full bg-gradient-to-t from-black/90 via-black/60 to-transparent"></div>
+        <h3 className="relative text-lg font-bold">Play on Hyperfy</h3>
+      </div>
+    </a>
+  )
+}
+
+export default HyperfyAlert

apps/web/src/components/Home/LogoHero.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+const LogoHero: React.FC = () => {
+  return (
+    <div className="flex h-[300px] items-center justify-center justify-self-center pr-4">
+      <img
+        src="https://static.wixstatic.com/media/707696_069a1f1fc75b446a9cfbf85e7ef58469~mv2.png"
+        alt="Dragverse Logo"
+        className="h-full w-auto object-contain"
+      />
+    </div>
+  )
+}
+
+export default LogoHero

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<HTMLDivElement>(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 (
+    <div className="flex flex-col">
+      <HorizontalScroller
+        sectionRef={sectionRef}
+        heading=""
+        headingClassName="font-syne font-extrabold"
+      />
+      <div
+        ref={sectionRef}
+        className="no-scrollbar laptop:pt-6 relative flex items-start space-x-4 overflow-x-auto overflow-y-hidden scroll-smooth pt-4"
+      >
+        <DragverseCommunity />
+        {loading && <Spinner />}
+        {!error && !loading && videos?.length > 0 && (
+          <div className="flex space-x-4">
+            <HorizontalVideos videos={videos} />
+          </div>
+        )}
+        {videos?.length === 0 && (
+          <p className="text-center">No trending videos found.</p>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default MidSection

apps/web/src/components/Home/SpatialAlert.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+const SpatialAlert: React.FC = () => {
+  return (
+    <a
+      href="https://www.spatial.io/s/Dragverse-6330ebb42e62cd0001922a97?share=6796815018867406198"
+      className="tape-border rounded-large ultrawide:h-[400px] relative flex h-[350px] w-full flex-none overflow-hidden sm:w-[300px] lg:w-[500px]"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <img
+        src="https://static.wixstatic.com/media/707696_50615b4a0f21492d91ff969dc7702460~mv2.jpg"
+        alt="Play on Spatial"
+        className="absolute inset-0 h-full w-full object-cover"
+      />
+      <div className="ultrawide:p-8 relative flex h-full w-full flex-col justify-end space-y-4 p-4 text-left text-white md:p-6">
+        <div className="absolute inset-0 h-full w-full bg-gradient-to-t from-black/90 via-black/60 to-transparent"></div>
+        <h3 className="relative text-lg font-bold">Play on Spatial</h3>
+      </div>
+    </a>
+  )
+}
+
+export default SpatialAlert