diff --git a/app/(app)/_layout/Header.tsx b/app/(app)/_layout/Header.tsx index a69f45e..5eed387 100644 --- a/app/(app)/_layout/Header.tsx +++ b/app/(app)/_layout/Header.tsx @@ -1,16 +1,16 @@ -import { RiMenu3Line, RiLeafFill } from "react-icons/ri"; import { UserMenu } from "./components/UserMenu"; import { Search } from "./components/Search"; import { Notifications } from "./components/Notifications"; import { MobileMenu } from "./components/MobileMenu"; +import Logo from "@/assets/Logo"; export default function Header() { return (
- -
Flockstr
+ +
Flockstr
diff --git a/app/(app)/_layout/Keystone.tsx b/app/(app)/_layout/Keystone.tsx index 9fa1684..f8f6a2a 100644 --- a/app/(app)/_layout/Keystone.tsx +++ b/app/(app)/_layout/Keystone.tsx @@ -1,14 +1,13 @@ import Link from "next/link"; -import { RiLeafFill } from "react-icons/ri"; - +import Logo from "@/assets/Logo"; export default function Keystone() { return (
- +
); diff --git a/app/(app)/_layout/MobileBanner.tsx b/app/(app)/_layout/MobileBanner.tsx index 9057d20..2e31bd5 100644 --- a/app/(app)/_layout/MobileBanner.tsx +++ b/app/(app)/_layout/MobileBanner.tsx @@ -1,9 +1,10 @@ "use client"; import { useEffect, useState } from "react"; -import { RiCloseFill, RiLeafFill } from "react-icons/ri"; +import { RiCloseFill } from "react-icons/ri"; import { Button } from "@/components/ui/button"; import useLocalStorage from "@/lib/hooks/useLocalStorage"; +import Logo from "@/assets/Logo"; export default function MobileBanner() { const [showPWAPrompt, setShowPWAPrompt] = useState(false); @@ -25,7 +26,7 @@ export default function MobileBanner() { return (
- +
Get our PWA diff --git a/app/(app)/app/_sections/BecomeACreator.tsx b/app/(app)/app/_sections/BecomeACreator.tsx new file mode 100644 index 0000000..465f418 --- /dev/null +++ b/app/(app)/app/_sections/BecomeACreator.tsx @@ -0,0 +1,30 @@ +import Image from "next/image"; +import { Button } from "@/components/ui/button"; + +export default function BecomeACreator() { + return ( +
+
+ creator icons +
+

+ Start earning on Nostr +

+
+ Start earning bitcoin from your content. Create lists that for fans + can subscribe to! +
+ +
+
+
+ ); +} diff --git a/app/(app)/app/_sections/FeaturedLists.tsx b/app/(app)/app/_sections/FeaturedLists.tsx new file mode 100644 index 0000000..35f3070 --- /dev/null +++ b/app/(app)/app/_sections/FeaturedLists.tsx @@ -0,0 +1,123 @@ +"use client"; +import { + Section, + SectionHeader, + SectionTitle, + SectionContent, +} from "@/containers/PageSection"; +import LiveBadge from "@/components/Badges/LiveBadge"; +import { Button } from "@/components/ui/button"; +import { RiArrowRightLine } from "react-icons/ri"; +import VideoCard from "@/components/VideoCard"; +import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; +import { + Card, + CardContent, + CardDescription, + CardTitle, +} from "@/components/ui/card"; +import Image from "next/image"; +import { cn } from "@/lib/utils"; +import { Avatar, AvatarImage, AvatarFallback } from "@radix-ui/react-avatar"; +import { Badge } from "@/components/ui/badge"; +export default function FeaturedLists() { + const demo = [ + { + id: 1, + title: "BTC Radio", + picture: + "https://assets.whop.com/cdn-cgi/image/width=1080/https://assets.whop.com/images/images/51602.original.png?1693358530", + tags: ["music", "crypto", "art"], + }, + { + id: 2, + title: "The Book of Alpha: NFTs and crypto taking over. Market Talk", + picture: + "https://assets.whop.com/cdn-cgi/image/width=1080/https://assets.whop.com/images/images/31095.thumbnail.png?1692203850", + tags: ["NFTs", "crypto", "art", "trading"], + }, + { + id: 3, + title: "Space Talk: What's Elon up to?", + picture: + "https://assets.whop.com/cdn-cgi/image/width=1080/https://assets.whop.com/images/images/40088.original.png?1692206315", + tags: ["Space"], + }, + { + id: 4, + title: "The Book of Alpha: NFTs and crypto taking over. Market Talk", + picture: + "https://assets.whop.com/cdn-cgi/image/width=1080/https://assets.whop.com/images/images/40680.original.png?1692206434", + tags: ["Market"], + }, + ]; + return ( +
+ +
+ Featured Lists +
+ + + + {demo.map((e) => ( + +
+ {e.title} +
+ +
+ + + SC + +
+
+
+
+ + {e.title} + + + Here is my description of this list that I am offering + +
+
+ 100 subs +
+
+
+
+
2k sats
+
+ /month +
+
+ + Free + +
+
+ + + ))} + +
+ ); +} diff --git a/app/(app)/app/_sections/LiveStreaming.tsx b/app/(app)/app/_sections/LiveStreaming.tsx new file mode 100644 index 0000000..4be3ffd --- /dev/null +++ b/app/(app)/app/_sections/LiveStreaming.tsx @@ -0,0 +1,70 @@ +import { + Section, + SectionHeader, + SectionTitle, + SectionContent, +} from "@/containers/PageSection"; +import LiveBadge from "@/components/Badges/LiveBadge"; +import { Button } from "@/components/ui/button"; +import { RiArrowRightLine } from "react-icons/ri"; +import VideoCard from "@/components/VideoCard"; +import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area"; +export default function LiveStreamingSection() { + const demo = [ + { + id: 1, + title: "BTC Radio", + picture: + "https://assets.whop.com/cdn-cgi/image/width=1080/https://assets.whop.com/images/images/51602.original.png?1693358530", + tags: ["music", "crypto", "art"], + }, + { + id: 2, + title: "The Book of Alpha: NFTs and crypto taking over. Market Talk", + picture: + "https://assets.whop.com/cdn-cgi/image/width=1080/https://assets.whop.com/images/images/31095.thumbnail.png?1692203850", + tags: ["NFTs", "crypto", "art", "trading"], + }, + { + id: 3, + title: "Space Talk: What's Elon up to?", + picture: + "https://assets.whop.com/cdn-cgi/image/width=1080/https://assets.whop.com/images/images/40088.original.png?1692206315", + tags: ["Space"], + }, + { + id: 4, + title: "The Book of Alpha: NFTs and crypto taking over. Market Talk", + picture: + "https://assets.whop.com/cdn-cgi/image/width=1080/https://assets.whop.com/images/images/40680.original.png?1692206434", + tags: ["Market"], + }, + ]; + return ( +
+ +
+ Streaming Now + +
+ + + + +
+ {demo.map((item) => ( + + ))} +
+ + + +
+ ); +} diff --git a/app/(app)/app/page.tsx b/app/(app)/app/page.tsx index 7135ce6..3aa1ac6 100644 --- a/app/(app)/app/page.tsx +++ b/app/(app)/app/page.tsx @@ -2,6 +2,16 @@ import { Button } from "@/components/ui/button"; import HorizontalCarousel from "./_sections/HorizontalCarousel"; import { RiArrowRightLine } from "react-icons/ri"; import LongFormContentCard from "@/components/LongFormContentCard"; +import BecomeACreator from "./_sections/BecomeACreator"; +import { + Section, + SectionHeader, + SectionTitle, + SectionContent, +} from "@/containers/PageSection"; +import LiveStreamingSection from "./_sections/LiveStreaming"; +import FeaturedListsSection from "./_sections/FeaturedLists"; + export default function Page() { return (
@@ -16,22 +26,23 @@ export default function Page() {
-
-
-

- Long form content -

+
+ + Long form content -
-
+ + -
-
+ + + + +
); } diff --git a/app/(landing)/_layout/Header.tsx b/app/(landing)/_layout/Header.tsx index a6b1406..7d6878f 100644 --- a/app/(landing)/_layout/Header.tsx +++ b/app/(landing)/_layout/Header.tsx @@ -2,8 +2,8 @@ import { useState } from "react"; import Link from "next/link"; import { cn } from "@/lib/utils"; -import { RiMenu3Line, RiLeafFill, RiCloseFill } from "react-icons/ri"; - +import { RiMenu3Line, RiCloseFill } from "react-icons/ri"; +import Logo from "@/assets/Logo"; export default function Header() { const [menuOpen, setMenuOpen] = useState(false); const navigation = [ @@ -29,7 +29,7 @@ export default function Header() { ))} - + {navigation.slice(2, 4).map((item) => (
  • @@ -42,7 +42,7 @@ export default function Header() {
    • - +