[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" "use client" import ActioneraHomeScreen from "../actionera-home-screen" export default function Page() { return } [V0_FILE]jpeg:file="public/images/meditation-beach.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/girl-4981766_1280.jpg-TrXP8RSDvCgdRP0YW9Ir9DAvhGdDcD.jpeg" [V0_FILE]typescriptreact:file="app/video/meditation-series/page.tsx" "use client" import VideoPage from "../../../video-page" export default function Page() { return } [V0_FILE]png:file="public/images/actionera-icon.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Icon-3wEooOyniF1gQXxqt97aPNu6gCCqB2.png" [V0_FILE]typescriptreact:file="events-main-page.tsx" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { ArrowLeft, Calendar, Video, MapPin } from "lucide-react" import { useRouter } from "next/navigation" export default function EventsMainPage() { const router = useRouter() const eventTypes = [ { id: "virtual", title: "Virtual Events", description: "Join us online from anywhere in the world", icon: Video, color: "bg-blue-600", link: "/events/virtual", }, { id: "in-person", title: "In-Person Events", description: "Connect with others in meaningful gatherings", icon: MapPin, color: "bg-green-600", link: "/events/in-person", }, ] return (

{/* Status Bar */}

11:07

{/* Header */}

Events

{/* Page Title */}

Choose Event Type

Select the type of events you'd like to explore

{/* Event Type Cards */}

{eventTypes.map((eventType) => { const IconComponent = eventType.icon return ( router.push(eventType.link)} >

{eventType.title}

{eventType.description}

) })}

{/* Fixed Call to Action */}

) } [V0_FILE]typescriptreact:file="app/events/page.tsx" "use client" import EventsMainPage from "../../events-main-page" export default function Page() { return } [V0_FILE]typescriptreact:file="app/events/virtual/page.tsx" "use client" import EventsListPage from "../../../events-list-page" export default function Page() { return } [V0_FILE]typescriptreact:file="app/events/in-person/page.tsx" "use client" import EventsListPage from "../../../events-list-page" export default function Page() { return } [V0_FILE]typescriptreact:file="app/events/virtual/morning-meditation/page.tsx" "use client" import EventDetailsPage from "../../../../event-details-page" export default function Page() { return } [V0_FILE]typescriptreact:file="app/events/in-person/community-gathering/page.tsx" "use client" import EventDetailsPage from "../../../../event-details-page" export default function Page() { return } [V0_FILE]typescriptreact:file="event-details-page.tsx" "use client" import { Button } from "@/components/ui/button" import { ArrowLeft, Calendar, Clock, MapPin, Users, Share2 } from "lucide-react" import { useRouter } from "next/navigation" interface EventDetailsPageProps { eventType: "virtual" | "in-person" eventId: string } export default function EventDetailsPage({ eventType, eventId }: EventDetailsPageProps) { const router = useRouter() // Sample event data - in a real app this would come from an API const eventData = { virtual: { "morning-meditation": { title: "Morning Meditation Circle", date: "March 25, 2024", time: "8:00 AM EST", duration: "45 minutes", capacity: "Unlimited", description: "Begin your day with intention and peace in our guided morning meditation circle. This virtual gathering brings together souls from around the world to share in the transformative power of collective meditation. Our experienced facilitator will guide you through breathing exercises, mindfulness practices, and gentle movement to help you center yourself for the day ahead.", additionalInfo: "This session is perfect for both beginners and experienced practitioners. We'll provide guided instruction throughout, so no prior meditation experience is necessary. Join us in creating a peaceful start to your day and connecting with a global community of like-minded individuals seeking inner peace and spiritual growth.", }, }, "in-person": { "community-gathering": { title: "Community Gathering", date: "March 30, 2024", time: "2:00 PM", duration: "2 hours", location: "Wellness Center, Downtown", address: "123 Harmony Street, City Center", capacity: "50 people", description: "Join us for a heartwarming community gathering where spiritual seekers come together to share experiences, wisdom, and fellowship. This in-person event offers a unique opportunity to connect face-to-face with your local spiritual community in a welcoming and supportive environment.", additionalInfo: "Our gathering will include group discussions, sharing circles, light refreshments, and guided activities designed to foster meaningful connections. Whether you're new to the spiritual path or have been walking it for years, you'll find a warm welcome and kindred spirits. Come as you are and leave feeling more connected to both yourself and your community.", }, }, } const event = eventData[eventType]?.[eventId as keyof (typeof eventData)[typeof eventType]] if (!event) { return

Event not found

} return (

{/* Status Bar */}

11:07

{/* Header */}

Event Details

{/* Event Title */}

{event.title}

{/* Video Section */}

{/* Event Details */}

{event.date}

Date

{event.time}

Duration: {event.duration}

{eventType === "in-person" && "location" in event && (

{event.location}

{event.address}

)}

{event.capacity}

Capacity

{/* Event Description */}

About This Event

{event.description}

{event.additionalInfo}

{/* Fixed Call to Action */}

) } [V0_FILE]jpeg:file="public/images/meditate-tree.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/meditate-7831951_640.jpg-2sUDNO05IqBRrDEUORZ1yTzlkC45Qs.jpeg" [V0_FILE]jpeg:file="public/images/woman-river.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/woman-5380651_640.jpg-yBadh44oPkYDojFz5brBnXHYNjEPq8.jpeg" [V0_FILE]jpeg:file="public/images/mindfulness-lake.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/mindfulness-8125520_640.jpg-QSF0oTkUhNLSkjzGCUsLUDt5EQkKw5.jpeg" [V0_FILE]jpeg:file="public/images/yoga-dock.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/yoga-2176668_640.jpg-SiG0MtQXHKsjsDwIEpEwrvnEDEDxPW.jpeg" [V0_FILE]jpeg:file="public/images/meditation-ocean.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/girl-4981766_1280.jpg-h5V6CJJJRj3AEREIsykukQTqZ3D83W.jpeg" [V0_FILE]typescriptreact:file="app/videos/awaken-series/page.tsx" "use client" import VideoListPage from "../../../video-list-page" export default function Page() { return } [V0_FILE]typescriptreact:file="video-list-page.tsx" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { ArrowLeft, Play } from "lucide-react" import { useRouter } from "next/navigation" import Image from "next/image" interface VideoListPageProps { seriesTitle: string } export default function VideoListPage({ seriesTitle }: VideoListPageProps) { const router = useRouter() const videos = [ { id: "ocean-meditation", title: "Ocean Meditation: Finding Inner Peace", thumbnail: "/images/meditation-ocean.jpeg", duration: "12:45", description: "Experience the calming power of ocean meditation with this guided session. This meditation takes you on a journey to peaceful shores where rhythmic waves help you find inner balance and tranquility.", link: "/video/meditation-series", }, { id: "tree-meditation", title: "Tree Meditation: Grounding Your Spirit", thumbnail: "/images/meditate-tree.jpeg", duration: "15:30", description: "Connect with the ancient wisdom of trees in this grounding meditation. Learn to root yourself deeply while reaching toward your highest potential, finding stability and growth in perfect harmony.", link: null, }, { id: "river-flow", title: "River Flow: Letting Go and Moving Forward", thumbnail: "/images/woman-river.jpeg", duration: "18:20", description: "Like a river that flows effortlessly around obstacles, learn to navigate life's challenges with grace. This meditation teaches the art of letting go and moving forward with natural ease.", link: null, }, { id: "mountain-mindfulness", title: "Mountain Mindfulness: Strength and Stillness", thumbnail: "/images/mindfulness-lake.jpeg", duration: "20:15", description: "Draw upon the unwavering strength of mountains in this powerful mindfulness practice. Discover how to remain centered and peaceful even when life's storms rage around you.", link: null, }, { id: "sunset-reflection", title: "Sunset Reflection: Daily Gratitude Practice", thumbnail: "/images/yoga-dock.jpeg", duration: "10:45", description: "End your day with this beautiful sunset meditation focused on gratitude and reflection. Perfect for releasing the day's tensions and preparing your mind for restful, peaceful sleep.", link: null, }, ] return (

{/* Status Bar */}

11:07

{/* Header */}

{seriesTitle}

{/* Videos List */}

{videos.map((video) => ( video.link && router.push(video.link)} >

{/* Video Thumbnail */}

{video.duration}

{/* Video Info */}

{video.title}

{video.description}

))}

) } [V0_FILE]jpeg:file="public/images/nature-walk-forest.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/dog-4609870_640.jpg-n1Nvkn6PhaTHSx5GPHKNn1NlD85Fzg.jpeg" [V0_FILE]typescriptreact:file="nature-walk-event-page.tsx" "use client" import { Button } from "@/components/ui/button" import { ArrowLeft, Calendar, Clock, MapPin, Users, Share2 } from "lucide-react" import { useRouter } from "next/navigation" import Image from "next/image" export default function NatureWalkEventPage() { const router = useRouter() const eventData = { title: "Nature Walk & Meditation", date: "April 5, 2024", time: "10:00 AM", duration: "2.5 hours", location: "Riverside Park", address: "456 Nature Trail, Riverside District", capacity: "25 people", description: "Immerse yourself in the healing power of nature with our guided Nature Walk & Meditation experience. This unique in-person gathering combines the therapeutic benefits of forest bathing with mindful walking meditation, creating a perfect harmony between movement and stillness.", additionalInfo: "We'll begin with a gentle warm-up and intention setting, then embark on a peaceful 1.5-hour walk through scenic forest trails. Along the way, we'll pause for guided meditation sessions, breathing exercises, and moments of silent reflection. The experience concludes with a group sharing circle where participants can connect and reflect on their journey. Please wear comfortable walking shoes and bring a water bottle. All levels of fitness and meditation experience are welcome.", } return (

{/* Status Bar */}

11:07

{/* Header */}

Event Details

{/* Event Title */}

{eventData.title}

{/* Image Section */}

{/* Event Details */}

{eventData.date}

Date

{eventData.time}

Duration: {eventData.duration}

{eventData.location}

{eventData.address}

{eventData.capacity}

Capacity

{/* Event Description */}

About This Event

{eventData.description}

{eventData.additionalInfo}

{/* Fixed Call to Action */}

) } [V0_FILE]typescriptreact:file="events-list-page.tsx" "use client" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { ArrowLeft, Calendar, Clock, MapPin, Video } from "lucide-react" import { useRouter } from "next/navigation" interface EventsListPageProps { eventType: "virtual" | "in-person" } export default function EventsListPage({ eventType }: EventsListPageProps) { const router = useRouter() const virtualEvents = [ { id: "virtual-1", title: "Morning Meditation Circle", date: "March 25, 2024", time: "8:00 AM EST", description: "Start your day with guided meditation and mindfulness practices", link: "/events/virtual/morning-meditation", }, { id: "virtual-2", title: "Spiritual Growth Workshop", date: "March 28, 2024", time: "7:00 PM EST", description: "Explore your spiritual journey with like-minded individuals", link: "/events/virtual/spiritual-growth", }, { id: "virtual-3", title: "Healing Energy Session", date: "April 2, 2024", time: "6:30 PM EST", description: "Experience the power of collective healing energy", link: "/events/virtual/healing-energy", }, ] const inPersonEvents = [ { id: "in-person-1", title: "Community Gathering", date: "March 30, 2024", time: "2:00 PM", location: "Wellness Center, Downtown", description: "Connect with your local spiritual community in person", link: "/events/in-person/community-gathering", }, { id: "in-person-2", title: "Nature Walk & Meditation", date: "April 5, 2024", time: "10:00 AM", location: "Riverside Park", description: "Combine the healing power of nature with mindful meditation", link: "/events/in-person/nature-walk", }, { id: "in-person-3", title: "Sacred Circle Ceremony", date: "April 12, 2024", time: "7:00 PM", location: "Unity Hall", description: "Join us for a powerful sacred circle ceremony and blessing", link: "/events/in-person/sacred-circle", }, ] const events = eventType === "virtual" ? virtualEvents : inPersonEvents const pageTitle = eventType === "virtual" ? "Virtual Events" : "In-Person Events" const IconComponent = eventType === "virtual" ? Video : MapPin return (

{/* Status Bar */}

11:07

{/* Header */}

{pageTitle}

{/* Page Title */}

{pageTitle}

Choose an event to learn more and register

{/* Events List */}

{events.map((event) => ( router.push(event.link)} >

{event.title}

{event.date}

{event.time}

{eventType === "in-person" && "location" in event && (

{event.location}

)}

{event.description}

))}

{/* Fixed Call to Action */}

) } [V0_FILE]typescriptreact:file="app/events/in-person/nature-walk/page.tsx" "use client" import NatureWalkEventPage from "../../../../nature-walk-event-page" export default function Page() { return } [V0_FILE]typescriptreact:file="app/directories/page.tsx" "use client" import DirectoriesPage from "../../directories-page" export default function Page() { return } [V0_FILE]typescriptreact:file="video-page.tsx" isQuickEdit="true" "use client" import { useState, useRef } from "react" import { Button } from "@/components/ui/button" import { ArrowLeft, Share2 } from "lucide-react" import { useRouter } from "next/navigation" export default function VideoPage() { const router = useRouter() const [isPlaying, setIsPlaying] = useState(false) const videoRef = useRef(null) return (

{/* Status Bar */}

11:07

{/* Header */}

Video Player

{/* Video Title */}

Meditation Series: Ocean Calm

{/* Video Player */}

{/* Video Description */}

About This Meditation

Experience the calming power of ocean meditation with this guided session. This meditation takes you on a journey to the peaceful shores where the rhythmic sounds of waves help you find inner peace and balance.

Perfect for beginners and experienced practitioners alike, this 10-minute meditation can be practiced daily to reduce stress, improve focus, and enhance your overall well-being. Find a comfortable position, close your eyes, and let the soothing ocean guide your meditation practice.

{/* Call to Action */}

{/* Bottom Navigation Indicator */}

) } [V0_FILE]png:file="public/images/monthly-revenue-mastery.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/mrm-logo-xnTcbK2lcjUZT1xclVLeb6PSSiKK27.png" [V0_FILE]typescriptreact:file="app/favorites/page.tsx" "use client" import FavoritesPage from "../../favorites-page" export default function Page() { return } [V0_FILE]typescriptreact:file="favorites-page.tsx" isQuickEdit="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { ArrowLeft, Star } from "lucide-react" import { useRouter } from "next/navigation" import Image from "next/image" interface FavoriteItem { id: string title: string thumbnail: string link: string } export default function FavoritesPage() { const router = useRouter() const [showDeleteDialog, setShowDeleteDialog] = useState(null) const [favorites, setFavorites] = useState([ { id: "mrm-1", title: "Monthly Revenue Mastery", thumbnail: "/images/monthly-revenue-mastery.png", link: "/topics/monthly-revenue-mastery", }, { id: "meditation-1", title: "Ocean Meditation Series", thumbnail: "/images/meditation-beach.jpeg", link: "/courses/ocean-meditation", }, { id: "nature-walk-1", title: "Nature Walk & Meditation", thumbnail: "/images/nature-walk-forest.jpeg", link: "/events/in-person/nature-walk", }, { id: "sales-dir-1", title: "Sales Directory", thumbnail: "/placeholder.svg?height=80&width=80", link: "/directories/sales", }, { id: "awaken-1", title: "Awaken Series", thumbnail: "/images/mindfulness-lake.jpeg", link: "/courses/awaken-series", }, { id: "wellness-biz-1", title: "Harmony Wellness Center", thumbnail: "/placeholder.svg?height=80&width=80", link: "/businesses/harmony-wellness", }, { id: "community-event-1", title: "Community Gathering", thumbnail: "/placeholder.svg?height=80&width=80", link: "/events/in-person/community-gathering", }, { id: "video-store-1", title: "Video eCourse Store", thumbnail: "/placeholder.svg?height=80&width=80", link: "/directories/video-store", }, ]) const removeFavorite = (id: string) => { setFavorites(favorites.filter((item) => item.id !== id)) setShowDeleteDialog(null) } const handleStarClick = (id: string) => { setShowDeleteDialog(id) } return (

{/* Status Bar */}

11:07

{/* Header */}

My Favorites

{/* Page Header */}

Your Favorites

Quick access to your saved content

Tap star to delete

{/* Favorites List */}

{favorites.length === 0 ? (

No favorites yet

Start exploring and save your favorite content!

) : (

{favorites.map((item, index) => (

{/* Thumbnail */}

{/* Content */}

router.push(item.link)}>

{item.title}

{/* Star Button */}

))}

)}

{/* Delete Confirmation Dialog */} {showDeleteDialog && (

Remove from Favorites?

Are you sure you want to remove this item from your favorites?

)}

) } [V0_FILE]typescriptreact:file="app/topics/page.tsx" "use client" import TopicsPage from "../../topics-page" export default function Page() { return } [V0_FILE]jpeg:file="public/images/travel-lake.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/travel-1749508_1280.jpg-kb5Q6HdSYHm3xVzTICSRuvs6g4ZE0u.jpeg" [V0_FILE]typescriptreact:file="app/topics/articles/page.tsx" "use client" import ArticlePage from "../../../article-page" export default function Page() { return } [V0_FILE]typescriptreact:file="app/topics/journals/page.tsx" "use client" import JournalPage from "../../../journal-page" export default function Page() { return } [V0_FILE]jpeg:file="public/images/hiker-mountain.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/adventure-1850912_1280.jpg-dpjhszMSL58KnyAQR8oDzoywYUcovV.jpeg" [V0_FILE]typescriptreact:file="article-page.tsx" "use client" import { Button } from "@/components/ui/button" import { ArrowLeft, Share2 } from "lucide-react" import { useRouter } from "next/navigation" import Image from "next/image" export default function ArticlePage() { const router = useRouter() return (

{/* Status Bar */}

11:07

{/* Header */}

Article

{/* Article Title */}

Finding Stillness in a Busy World

{/* Article Image */}

{/* Article Content */}

In the relentless pace of modern life, finding moments of true stillness can feel like a monumental task. Our minds are constantly racing, juggling deadlines, responsibilities, and an endless stream of digital notifications. Yet, it is in these moments of quiet reflection that we often find our greatest clarity and strength.

The practice of mindfulness is not about emptying the mind, but rather about observing our thoughts without judgment. It's about anchoring ourselves in the present moment, whether through the sensation of our breath, the sounds of nature, or the feeling of our feet on the ground. This simple act of being present can create a profound shift in our perspective, allowing us to navigate challenges with greater ease and resilience.

Embracing the Pause

Consider the world around you. Nature itself operates in rhythms of action and rest. The seasons change, the tides ebb and flow, and even the most industrious animals take time for rest. By consciously building pauses into our day, we align ourselves with this natural rhythm. A five-minute break to stretch, a short walk without your phone, or simply gazing out a window can be powerful tools for resetting your mental state.

Ultimately, the journey to finding stillness is a personal one. It requires patience, practice, and a gentle compassion for ourselves. Start small, be consistent, and notice the subtle shifts in your well-being. The peace you seek is not in a distant future, but available to you right here, in the quiet space of the present moment.

{/* Call to Action */}

) } [V0_FILE]typescriptreact:file="journal-page.tsx" isQuickEdit="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { ArrowLeft } from "lucide-react" import { useRouter } from "next/navigation" import Image from "next/image" export default function JournalPage() { const router = useRouter() const [journal1, setJournal1] = useState("") const [journal2, setJournal2] = useState("") const [journal3, setJournal3] = useState("") return (

{/* Status Bar */}

11:07

{/* Header */}

Daily Journal

{/* Journal Title */}

Evening Reflection

{/* Journal Image */}

{/* Journal Content */}

Take a few moments to reflect on your day. Answer the following prompts to cultivate gratitude and mindfulness.

{/* Journal Fields */}

What was one moment today that brought you joy?

setJournal1(e.target.value)}
              placeholder="Describe the moment..."
              className="min-h-[100px]"
            />
          </div>

<div>
            <label htmlFor="journal2" className="block text-sm font-medium text-slate-700 mb-2">
              What is one thing you are grateful for today?
            </label>
            <Textarea
              id="journal2"
              value={journal2}
              onChange={(e) => setJournal2(e.target.value)}
              placeholder="It could be big or small..."
              className="min-h-[100px]"
            />
          </div>

<div>
            <label htmlFor="journal3" className="block text-sm font-medium text-slate-700 mb-2">
              What is one thing you learned or a challenge you overcame?
            </label>
            <Textarea
              id="journal3"
              value={journal3}
              onChange={(e) => setJournal3(e.target.value)}
              placeholder="Reflect on your growth..."
              className="min-h-[100px]"
            />
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]jpeg:file="public/images/robert-evans.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/robert_evans.jpg-OrrPpCTszrOPQgxN6ZUiKIPLoMcQcM.jpeg"
[V0_FILE]jpeg:file="public/images/dannella-burnett.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/dannella-wCcXxgWb1PfbGENcdHnCRgXOzYYSib.jpeg"
[V0_FILE]plaintext:file="public/images/iman-aghay.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/iman-DVjaA0v2JTvXgx2nYbASPQYkVJNS8b.webp"
[V0_FILE]typescriptreact:file="directories-page.tsx"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import {
  ArrowLeft,
  ShoppingCart,
  GraduationCap,
  BookOpen,
  Store,
  Users,
  Building,
  FileText,
  ChevronRight,
  UserCheck,
} from "lucide-react"
import { useRouter } from "next/navigation"

export default function DirectoriesPage() {
  const router = useRouter()

const directories = [
    {
      id: "mentors-coaches",
      title: "Mentors and Coaches",
      subtitle: "Connect with These Amazing Coaches",
      icon: UserCheck,
      color: "bg-indigo-600",
      link: "/directories/mentors-coaches",
    },
    {
      id: "sales",
      title: "Sales Directory",
      subtitle: "Connect with sales professionals and opportunities",
      icon: Building,
      color: "bg-blue-600",
      link: "/directories/sales",
    },
    {
      id: "groceries",
      title: "Groceries & Local Directory",
      subtitle: "Find local grocery stores and markets",
      icon: ShoppingCart,
      color: "bg-green-600",
      link: "/directories/groceries",
    },
    {
      id: "courses",
      title: "My Courses",
      subtitle: "Access your video courses here",
      icon: GraduationCap,
      color: "bg-purple-600",
      link: "/directories/courses",
    },
    {
      id: "directors-cut",
      title: "Director's Cut",
      subtitle: "Exclusive content and behind-the-scenes",
      icon: FileText,
      color: "bg-slate-700",
      link: "/directories/directors-cut",
    },
    {
      id: "work",
      title: "Work Directory",
      subtitle: "Professional networking and opportunities",
      icon: Building,
      color: "bg-blue-600",
      link: "/directories/work",
    },
    {
      id: "ebooks",
      title: "e-Books",
      subtitle: "Digital library and reading materials",
      icon: BookOpen,
      color: "bg-orange-600",
      link: "/directories/ebooks",
    },
    {
      id: "video-store",
      title: "Video eCourse Store",
      subtitle: "Check out our video courses",
      icon: Store,
      color: "bg-red-600",
      link: "/directories/video-store",
    },
    {
      id: "fin-tiara",
      title: "Fin & Tiara",
      subtitle: "Specialized content and resources",
      icon: Users,
      color: "bg-cyan-600",
      link: "/directories/fin-tiara",
    },
    {
      id: "actionera-team",
      title: "Actionera #Team",
      subtitle: "Connect with team members and updates",
      icon: Users,
      color: "bg-slate-700",
      link: "/directories/actionera-team",
    },
    {
      id: "test-directory",
      title: "Test Directory",
      subtitle: "Testing and development resources",
      icon: FileText,
      color: "bg-gray-600",
      link: "/directories/test",
    },
  ]

return (
    <div className="min-h-screen bg-gradient-to-b from-blue-50 to-white">
      {/* Status Bar */}
      <div className="bg-slate-800 text-white px-4 py-2 flex justify-between items-center text-sm">
        <span>11:07</span>
        <div className="flex items-center gap-1">
          <div className="flex gap-1">
            <div className="w-1 h-3 bg-white rounded-full"></div>
            <div className="w-1 h-3 bg-white rounded-full"></div>
            <div className="w-1 h-3 bg-white/50 rounded-full"></div>
            <div className="w-1 h-3 bg-white/50 rounded-full"></div>
          </div>
          <div className="w-6 h-3 bg-white rounded-sm ml-2"></div>
        </div>
      </div>

{/* Header */}
      <div className="bg-slate-800 text-white px-4 py-4 flex items-center justify-between">
        <Button variant="ghost" size="icon" className="text-white hover:bg-slate-700" onClick={() => router.back()}>
          <ArrowLeft className="h-6 w-6" />
        </Button>
        <h1 className="text-lg font-semibold">Directories</h1>
        <div className="w-10"></div>
      </div>

{/* Directories List */}
      <div className="px-4 pt-6 space-y-3 pb-8">
        {directories.map((directory) => {
          const IconComponent = directory.icon
          return (
            <Card
              key={directory.id}
              className="shadow-sm hover:shadow-md transition-shadow cursor-pointer bg-white/80 backdrop-blur-sm"
              onClick={() => router.push(directory.link)}
            >
              <CardContent className="p-4">
                <div className="flex items-center gap-4">
                  {/* Directory Icon */}
                  <div className={`${directory.color} p-3 rounded-lg flex-shrink-0`}>
                    <IconComponent className="h-6 w-6 text-white" />
                  </div>

{/* Directory Info */}
                  <div className="flex-1 min-w-0">
                    <h3 className="font-semibold text-slate-800 mb-1 line-clamp-1">{directory.title}</h3>
                    <p className="text-sm text-slate-600 line-clamp-1">{directory.subtitle}</p>
                  </div>

{/* Arrow */}
                  <ChevronRight className="h-5 w-5 text-slate-400 flex-shrink-0" />
                </div>
              </CardContent>
            </Card>
          )
        })}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/directories/mentors-coaches/page.tsx"
"use client"

import MentorsCoachesPage from "../../../mentors-coaches-page"

export default function Page() {
  return <MentorsCoachesPage />
}
[V0_FILE]typescriptreact:file="app/coaches/robert-evans/profile/page.tsx"
"use client"

import ProfilePage from "../../../../profile-page"

export default function Page() {
  const robertEvansData = {
    name: "Robert Evans",
    title: "Business Growth Strategist",
    company: "Evans Coaching & Consulting",
    image: "/images/robert-evans.jpeg",
    bio: "Robert Evans is a seasoned business strategist with over 20 years of experience helping entrepreneurs and executives scale their businesses. His approach combines data-driven insights with a deep understanding of human psychology to unlock sustainable growth. Robert is passionate about empowering leaders to build not just successful companies, but also fulfilling lives.",
    socials: {
      linkedin: "#",
      twitter: "#",
      facebook: "#",
      website: "#",
    },
  }

return <ProfilePage coach={robertEvansData} />
}
[V0_FILE]typescriptreact:file="mentors-coaches-page.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import { ArrowLeft, Star, Video, FileText, User, ListChecks, Calendar, ChevronRight, UserCheck } from "lucide-react"
import { useRouter } from "next/navigation"
import Image from "next/image"

const initialCoaches = [
  {
    id: "robert-evans",
    name: "Robert Evans",
    image: "/images/robert-evans.jpeg",
    isFavorited: false,
    subItems: [
      { title: "Videos", icon: Video, link: "/video/meditation-series" },
      { title: "Articles", icon: FileText, link: "/topics/articles" },
      { title: "Profile", icon: User, link: "/coaches/robert-evans/profile" },
      { title: "ActionLists", icon: ListChecks, link: "/coaches/robert-evans/actionlists" },
      { title: "Events", icon: Calendar, link: "http://JVXlive.com", external: true },
    ],
  },
  {
    id: "iman-aghay",
    name: "Iman Aghay",
    image: "/images/iman-aghay.webp",
    isFavorited: true,
    subItems: [
      { title: "Videos", icon: Video, link: "/video/meditation-series" },
      { title: "Articles", icon: FileText, link: "/topics/articles" },
      { title: "Profile", icon: User, link: "/coaches/iman-aghay/profile" },
      { title: "ActionLists", icon: ListChecks, link: "/coaches/iman-aghay/actionlists" },
      { title: "Events", icon: Calendar, link: "http://JVXlive.com", external: true },
    ],
  },
  {
    id: "dannella-burnett",
    name: "Dannella Burnett",
    image: "/images/dannella-burnett.jpeg",
    isFavorited: false,
    subItems: [
      { title: "Videos", icon: Video, link: "/video/meditation-series" },
      { title: "Articles", icon: FileText, link: "/topics/articles" },
      { title: "Profile", icon: User, link: "/coaches/dannella-burnett/profile" },
      { title: "ActionLists", icon: ListChecks, link: "/coaches/dannella-burnett/actionlists" },
      { title: "Events", icon: Calendar, link: "http://JVXlive.com", external: true },
    ],
  },
]

export default function MentorsCoachesPage() {
  const router = useRouter()
  const [coaches, setCoaches] = useState(initialCoaches)

const toggleFavorite = (id: string) => {
    setCoaches(coaches.map((coach) => (coach.id === id ? { ...coach, isFavorited: !coach.isFavorited } : coach)))
  }

const handleItemClick = (link: string, external?: boolean) => {
    if (external) {
      window.open(link, "_blank", "noopener,noreferrer")
    } else {
      router.push(link)
    }
  }

{/* Header */}
      <div className="bg-slate-800 text-white px-4 py-4 flex items-center justify-between">
        <Button variant="ghost" size="icon" className="text-white hover:bg-slate-700" onClick={() => router.back()}>
          <ArrowLeft className="h-6 w-6" />
        </Button>
        <h1 className="text-lg font-semibold">Mentors & Coaches</h1>
        <div className="w-10"></div>
      </div>

{/* Page Header */}
      <div className="px-4 py-6 text-center">
        <UserCheck className="h-12 w-12 text-indigo-600 mx-auto mb-4" />
        <h2 className="text-2xl font-bold text-slate-800 mb-2">Mentors and Coaches</h2>
        <p className="text-slate-600">Connect with These Amazing Coaches</p>
      </div>

{/* Coaches Accordion */}
      <div className="px-4 pb-8">
        <Accordion type="single" collapsible className="w-full space-y-3">
          {coaches.map((coach, index) => (
            <AccordionItem
              key={coach.id}
              value={coach.id}
              className={`rounded-lg shadow-sm transition-shadow ${index % 2 === 0 ? "bg-white" : "bg-blue-50"}`}
            >
              <AccordionTrigger className="p-4 hover:no-underline">
                <div className="flex items-center gap-4 w-full">
                  <Image
                    src={coach.image || "/placeholder.svg"}
                    alt={coach.name}
                    width={64}
                    height={64}
                    className="w-16 h-16 rounded-lg object-cover flex-shrink-0"
                  />
                  <span className="font-semibold text-slate-800 flex-1 text-left text-lg">{coach.name}</span>
                  <Button
                    variant="ghost"
                    size="icon"
                    className={`h-10 w-10 text-yellow-500 hover:text-yellow-600 hover:bg-yellow-50 z-10 ${
                      coach.isFavorited ? "fill-current" : ""
                    }`}
                    onClick={(e) => {
                      e.stopPropagation()
                      toggleFavorite(coach.id)
                    }}
                  >
                    <Star className="h-6 w-6" />
                  </Button>
                </div>
              </AccordionTrigger>
              <AccordionContent className="p-0">
                <div className="border-t border-gray-200">
                  {coach.subItems.map((item) => {
                    const SubItemIcon = item.icon
                    return (
                      <button
                        key={item.title}
                        className="w-full flex items-center gap-4 p-4 text-left hover:bg-gray-50 transition-colors"
                        onClick={() => handleItemClick(item.link, item.external)}
                      >
                        <SubItemIcon className="h-5 w-5 text-slate-500" />
                        <span className="flex-1 text-slate-700">{item.title}</span>
                        <ChevronRight className="h-5 w-5 text-slate-400" />
                      </button>
                    )
                  })}
                </div>
              </AccordionContent>
            </AccordionItem>
          ))}
        </Accordion>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="profile-page.tsx" isQuickEdit="true"
"use client"

import { Button } from "@/components/ui/button"
import { ArrowLeft, Share2, Linkedin, Twitter, Facebook, Globe } from "lucide-react"
import { useRouter } from "next/navigation"
import Image from "next/image"

interface ProfilePageProps {
  coach: {
    name: string
    title: string
    company: string
    image: string
    bio: string
    socials: {
      linkedin?: string
      twitter?: string
      facebook?: string
      website?: string
    }
  }
}

export default function ProfilePage({ coach }: ProfilePageProps) {
  const router = useRouter()

return (
    <div className="min-h-screen bg-gradient-to-b from-blue-50 to-white pb-20">
      {/* Status Bar */}
      <div className="bg-slate-800 text-white px-4 py-2 flex justify-between items-center text-sm">
        <span>11:07</span>
        <div className="flex items-center gap-1">
          <div className="flex gap-1">
            <div className="w-1 h-3 bg-white rounded-full"></div>
            <div className="w-1 h-3 bg-white rounded-full"></div>
            <div className="w-1 h-3 bg-white/50 rounded-full"></div>
            <div className="w-1 h-3 bg-white/50 rounded-full"></div>
          </div>
          <div className="w-6 h-3 bg-white rounded-sm ml-2"></div>
        </div>
      </div>

{/* Header */}
      <div className="bg-slate-800 text-white px-4 py-4 flex items-center justify-between">
        <Button variant="ghost" size="icon" className="text-white hover:bg-slate-700" onClick={() => router.back()}>
          <ArrowLeft className="h-6 w-6" />
        </Button>
        <h1 className="text-lg font-semibold">About Us</h1>
        <Button variant="ghost" size="icon" className="text-white hover:bg-slate-700">
          <Share2 className="h-5 w-5" />
        </Button>
      </div>

{/* Profile Header */}
      <div className="px-4 py-6 text-center">
        <Image
          src={coach.image || "/placeholder.svg"}
          alt={coach.name}
          width={128}
          height={128}
          className="w-32 h-32 rounded-lg object-cover mx-auto mb-4 shadow-lg"
        />
        <h2 className="text-2xl font-bold text-slate-800">{coach.name}</h2>
        <p className="text-md text-slate-600">{coach.title}</p>
        <p className="text-sm text-slate-500">{coach.company}</p>
      </div>

{/* Bio Section */}
      <div className="px-4 mb-6">
        <div className="bg-white rounded-xl p-6 shadow-sm space-y-4">
          <h3 className="text-lg font-semibold text-slate-800">About {coach.name.split(" ")[0]}</h3>
          <p className="text-slate-600 leading-relaxed">{coach.bio}</p>
        </div>
      </div>

{/* Social Links */}
      <div className="px-4 mb-8">
        <h3 className="text-center text-lg font-semibold text-slate-800 mb-4">
          Connect with {coach.name.split(" ")[0]}
        </h3>
        <div className="flex justify-center gap-4">
          {coach.socials.linkedin && (
            <Button variant="outline" size="icon" className="h-12 w-12 rounded-full bg-transparent">
              <Linkedin className="h-6 w-6" />
            </Button>
          )}
          {coach.socials.twitter && (
            <Button variant="outline" size="icon" className="h-12 w-12 rounded-full bg-transparent">
              <Twitter className="h-6 w-6" />
            </Button>
          )}
          {coach.socials.facebook && (
            <Button variant="outline" size="icon" className="h-12 w-12 rounded-full bg-transparent">
              <Facebook className="h-6 w-6" />
            </Button>
          )}
          {coach.socials.website && (
            <Button variant="outline" size="icon" className="h-12 w-12 rounded-full bg-transparent">
              <Globe className="h-6 w-6" />
            </Button>
          )}
        </div>
      </div>

{/* Fixed Call to Action */}
      <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 px-4 py-4 z-50">
        <Button className="w-full bg-blue-600 hover:bg-blue-700 text-white h-14 rounded-xl text-lg font-semibold shadow-lg">
          Work with {coach.name.split(" ")[0]}
        </Button>
      </div>
    </div>
  )
}
[V0_FILE]jpeg:file="public/images/personal-dev-1.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/adventure-1850912_1280.jpg-IHYEjm7S99zttl2iNnOZh2Kgm6Gfy1.jpeg"
[V0_FILE]jpeg:file="public/images/personal-dev-2.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/mindfulness-8125520_640.jpg-4ikUCkDH5790xongql4zm3yheLXoO8.jpeg"
[V0_FILE]jpeg:file="public/images/personal-dev-3.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/travel-1749508_1280.jpg-qvsRbYVJNbEpEOoVvxFtZ5sodLrjXk.jpeg"
[V0_FILE]jpeg:file="public/images/personal-dev-4.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/yoga-2176668_640.jpg-Y90WHf2TDLHHHAT4hMxcwsgFcGk6W2.jpeg"
[V0_FILE]typescriptreact:file="topic-video-list-page.tsx"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { ArrowLeft, VideoIcon } from "lucide-react"
import { useRouter } from "next/navigation"
import Image from "next/image"

interface ContentItem {
  id: string
  title: string
  thumbnail: string
  description: string
  link: string | null
}

interface TopicContentListPageProps {
  topicTitle: string
  items: ContentItem[]
}

export default function TopicVideoListPage({ topicTitle, items }: TopicContentListPageProps) {
  const router = useRouter()

{/* Header */}
      <div className="bg-slate-800 text-white px-4 py-4 flex items-center justify-between">
        <Button variant="ghost" size="icon" className="text-white hover:bg-slate-700" onClick={() => router.back()}>
          <ArrowLeft className="h-6 w-6" />
        </Button>
        <h1 className="text-lg font-semibold">Topic Videos</h1>
        <div className="w-10"></div>
      </div>

{/* Page Header */}
      <div className="px-4 py-6 text-center">
        <VideoIcon className="h-12 w-12 text-blue-600 mx-auto mb-4" />
        <h2 className="text-2xl font-bold text-slate-800 mb-2">{topicTitle}</h2>
        <p className="text-slate-600">Explore videos related to this topic</p>
      </div>

{/* Content List */}
      <div className="px-4 pt-2 space-y-4 pb-8">
        {items.map((item) => (
          <Card
            key={item.id}
            className="shadow-md hover:shadow-lg transition-shadow cursor-pointer bg-white/80 backdrop-blur-sm"
            onClick={() => item.link && router.push(item.link)}
          >
            <CardContent className="p-4">
              <div className="flex gap-4">
                {/* Thumbnail */}
                <div className="relative w-32 h-20 flex-shrink-0 rounded-lg overflow-hidden">
                  <Image
                    src={item.thumbnail || "/placeholder.svg"}
                    alt={item.title}
                    width={128}
                    height={80}
                    className="w-full h-full object-cover"
                  />
                </div>

{/* Info */}
                <div className="flex-1 min-w-0">
                  <h3 className="font-semibold text-slate-800 mb-2 line-clamp-2">{item.title}</h3>
                  <p className="text-sm text-slate-600 leading-relaxed line-clamp-2">{item.description}</p>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/topics/personal-development/videos/page.tsx"
"use client"

import TopicVideoListPage from "../../../../topic-video-list-page"

export default function Page() {
  const personalDevelopmentVideos = [
    {
      id: "pd-video-1",
      title: "The Power of Habit: How to Build Better Routines",
      thumbnail: "/images/personal-dev-1.jpeg",
      duration: "14:55",
      description: "Learn the science behind habit formation and how you can create positive changes in your life.",
      link: "/video/meditation-series",
    },
    {
      id: "pd-video-2",
      title: "Mindset: The New Psychology of Success",
      thumbnail: "/images/personal-dev-2.jpeg",
      duration: "18:30",
      description: "Discover how a growth mindset can fuel your journey towards achieving your goals.",
      link: "/video/meditation-series",
    },
    {
      id: "pd-video-3",
      title: "Overcoming Procrastination: A Practical Guide",
      thumbnail: "/images/personal-dev-3.jpeg",
      duration: "12:10",
      description: "Actionable strategies to stop procrastinating and boost your productivity today.",
      link: "/video/meditation-series",
    },
    {
      id: "pd-video-4",
      title: "The Art of Effective Communication",
      thumbnail: "/images/personal-dev-4.jpeg",
      duration: "22:00",
      description: "Enhance your personal and professional relationships by mastering communication.",
      link: "/video/meditation-series",
    },
  ]

return <TopicVideoListPage topicTitle="Personal Development" items={personalDevelopmentVideos} />
}
[V0_FILE]jpeg:file="public/images/actionlist-1.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/girl-4981766_1280.jpg-PltPxSf8DHOmDv5YXgFjIvthi5oads.jpeg"
[V0_FILE]jpeg:file="public/images/actionlist-2.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/meditate-7831951_640.jpg-qBeRAWn9j3hsdQSsDgW7qqd2DUSkjV.jpeg"
[V0_FILE]jpeg:file="public/images/actionlist-3.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/woman-5380651_640.jpg-GU5LC72PwYveWtAQT8RVqMLh5i1GGg.jpeg"
[V0_FILE]typescriptreact:file="action-list-page.tsx"
"use client"

import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { ArrowLeft, ListChecks } from "lucide-react"
import { useRouter } from "next/navigation"
import Image from "next/image"

interface ActionListItem {
  id: string
  title: string
  subtitle: string
  image: string
  link: string | null
}

interface ActionListPageProps {
  topicTitle: string
  items: ActionListItem[]
}

export default function ActionListPage({ topicTitle, items }: ActionListPageProps) {
  const router = useRouter()

{/* Header */}
      <div className="bg-slate-800 text-white px-4 py-4 flex items-center justify-between">
        <Button variant="ghost" size="icon" className="text-white hover:bg-slate-700" onClick={() => router.back()}>
          <ArrowLeft className="h-6 w-6" />
        </Button>
        <h1 className="text-lg font-semibold">ActionLists</h1>
        <div className="w-10"></div>
      </div>

{/* Page Header */}
      <div className="px-4 py-6 text-center">
        <ListChecks className="h-12 w-12 text-blue-600 mx-auto mb-4" />
        <h2 className="text-2xl font-bold text-slate-800 mb-2">{topicTitle}</h2>
        <p className="text-slate-600">Explore these actionable guides</p>
      </div>

{/* ActionList Cards */}
      <div className="px-4 space-y-6 pb-8">
        {items.map((item) => (
          <Card
            key={item.id}
            className="shadow-lg hover:shadow-xl transition-shadow cursor-pointer bg-white overflow-hidden rounded-2xl"
            onClick={() => item.link && router.push(item.link)}
          >
            <CardContent className="p-0">
              <div className="relative w-full h-48">
                <Image src={item.image || "/placeholder.svg"} alt={item.title} layout="fill" objectFit="cover" />
              </div>
              <div className="p-4">
                <h3 className="text-lg font-bold text-slate-800 mb-1">{item.title}</h3>
                <p className="text-sm text-slate-600">{item.subtitle}</p>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="app/topics/personal-development/actionlist/page.tsx"
"use client"

import ActionListPage from "../../../../action-list-page"

export default function Page() {
  const personalDevelopmentActionLists = [
    {
      id: "al-1",
      title: "7-Day Mindfulness Challenge",
      subtitle: "Cultivate presence and peace in just one week.",
      image: "/images/actionlist-1.jpeg",
      link: null,
    },
    {
      id: "al-2",
      title: "Morning Ritual for Success",
      subtitle: "Design a powerful morning routine to win your day.",
      image: "/images/actionlist-2.jpeg",
      link: null,
    },
    {
      id: "al-3",
      title: "Digital Detox Guide",
      subtitle: "Reconnect with yourself by disconnecting from your devices.",
      image: "/images/actionlist-3.jpeg",
      link: null,
    },
  ]

return <ActionListPage topicTitle="Personal Development" items={personalDevelopmentActionLists} />
}
[V0_FILE]typescriptreact:file="topics-page.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"
import {
  ArrowLeft,
  List,
  Star,
  Briefcase,
  Heart,
  BrainCircuit,
  Video,
  FileText,
  BookOpen,
  LayoutGrid,
  ChevronRight,
  BookMarked,
  ListChecks,
} from "lucide-react"
import { useRouter } from "next/navigation"

const initialTopics = [
  {
    id: "business-growth",
    title: "Business Growth",
    icon: Briefcase,
    isFavorited: false,
    subItems: [
      { title: "Videos", icon: Video, link: "/video/meditation-series" },
      { title: "Articles", icon: FileText, link: "/topics/articles" },
      { title: "e-Books", icon: BookOpen, link: "/topics/business-growth/ebooks" },
      { title: "Journals", icon: BookMarked, link: "/topics/journals" },
    ],
  },
  {
    id: "personal-development",
    title: "Personal Development",
    icon: BrainCircuit,
    isFavorited: true,
    subItems: [
      { title: "Videos", icon: Video, link: "/topics/personal-development/videos" },
      { title: "ActionList", icon: ListChecks, link: "/topics/personal-development/actionlist" },
      { title: "Blog", icon: FileText, link: "/topics/personal-development/blog" },
      { title: "Categories", icon: LayoutGrid, link: "/topics/personal-development/categories" },
    ],
  },
  {
    id: "health-wellness",
    title: "Health & Wellness",
    icon: Heart,
    isFavorited: false,
    subItems: [
      { title: "Videos", icon: Video, link: "/video/meditation-series" },
      { title: "Articles", icon: FileText, link: "/topics/articles" },
    ],
  },
  {
    id: "mindfulness",
    title: "Mindfulness & Meditation",
    icon: BrainCircuit,
    isFavorited: false,
    subItems: [
      { title: "Videos", icon: Video, link: "/video/meditation-series" },
      { title: "Blog", icon: FileText, link: "/topics/mindfulness/blog" },
      { title: "Categories", icon: LayoutGrid, link: "/topics/mindfulness/categories" },
      { title: "Journals", icon: BookMarked, link: "/topics/journals" },
    ],
  },
]

export default function TopicsPage() {
  const router = useRouter()
  const [topics, setTopics] = useState(initialTopics)

const toggleFavorite = (id: string) => {
    setTopics(topics.map((topic) => (topic.id === id ? { ...topic, isFavorited: !topic.isFavorited } : topic)))
  }

{/* Header */}
      <div className="bg-slate-800 text-white px-4 py-4 flex items-center justify-between">
        <Button variant="ghost" size="icon" className="text-white hover:bg-slate-700" onClick={() => router.back()}>
          <ArrowLeft className="h-6 w-6" />
        </Button>
        <h1 className="text-lg font-semibold">Topics</h1>
        <div className="w-10"></div>
      </div>

{/* Page Header */}
      <div className="px-4 py-6 text-center">
        <List className="h-12 w-12 text-blue-600 mx-auto mb-4" />
        <h2 className="text-2xl font-bold text-slate-800 mb-2">Explore Topics</h2>
        <p className="text-slate-600">Find content organized by topic</p>
      </div>

{/* Topics Accordion */}
      <div className="px-4 pb-8">
        <Accordion type="single" collapsible className="w-full space-y-2">
          {topics.map((topic, index) => {
            const TopicIcon = topic.icon
            return (
              <AccordionItem
                key={topic.id}
                value={topic.id}
                className={`rounded-lg shadow-sm transition-shadow ${index % 2 === 0 ? "bg-white" : "bg-blue-50"}`}
              >
                <AccordionTrigger className="p-4 hover:no-underline">
                  <div className="flex items-center gap-4 w-full">
                    <div className="bg-blue-600 p-3 rounded-xl">
                      <TopicIcon className="h-8 w-8 text-white" />
                    </div>
                    <span className="font-semibold text-slate-800 flex-1 text-left">{topic.title}</span>
                    <Button
                      variant="ghost"
                      size="icon"
                      className={`h-10 w-10 text-yellow-500 hover:text-yellow-600 hover:bg-yellow-50 z-10 ${
                        topic.isFavorited ? "fill-current" : ""
                      }`}
                      onClick={(e) => {
                        e.stopPropagation()
                        toggleFavorite(topic.id)
                      }}
                    >
                      <Star className="h-6 w-6" />
                    </Button>
                  </div>
                </AccordionTrigger>
                <AccordionContent className="p-0">
                  <div className="border-t border-gray-200">
                    {topic.subItems.map((item) => {
                      const SubItemIcon = item.icon
                      return (
                        <button
                          key={item.title}
                          className="w-full flex items-center gap-4 p-4 text-left hover:bg-gray-50 transition-colors"
                          onClick={() => router.push(item.link)}
                        >
                          <SubItemIcon className="h-5 w-5 text-slate-500" />
                          <span className="flex-1 text-slate-700">{item.title}</span>
                          <ChevronRight className="h-5 w-5 text-slate-400" />
                        </button>
                      )
                    })}
                  </div>
                </AccordionContent>
              </AccordionItem>
            )
          })}
        </Accordion>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="actionera-home-screen.tsx" isQuickEdit="true"
"use client"

import { useState, useRef } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Menu, Bell, Lock, Star, List, Users, ChevronRight, ChevronLeft, Play, X, User, Home, Building, Calendar, GraduationCap, BookOpen, Store, MessageCircle, Settings, HelpCircle, LogOut } from 'lucide-react'
import Image from "next/image"
import { useRouter } from "next/navigation"

export default function ActioneraHomeScreen() {
  const [activeTab, setActiveTab] = useState(0)
  const [currentFeaturedIndex, setCurrentFeaturedIndex] = useState(0)
  const router = useRouter()
  const [isMenuOpen, setIsMenuOpen] = useState(false)

const startXRef = useRef<number | null>(null)
  const pointerActiveRef = useRef<boolean>(false)
  const skipClickRef = useRef<boolean>(false)

const featuredScrollRef = useRef<HTMLDivElement>(null)
  const isDraggingRef = useRef(false)
  const dragStartXRef = useRef(0)
  const dragStartScrollLeftRef = useRef(0)

function handleFeaturedPointerDown(e: React.PointerEvent<HTMLDivElement>) {
    isDraggingRef.current = true
    dragStartXRef.current = e.clientX
    const el = featuredScrollRef.current
    if (el) dragStartScrollLeftRef.current = el.scrollLeft
    try {
      ;(e.currentTarget as HTMLElement).setPointerCapture?.((e as unknown as PointerEvent).pointerId)
    } catch {}
  }

function handleFeaturedPointerMove(e: React.PointerEvent<HTMLDivElement>) {
    if (!isDraggingRef.current) return
    const el = featuredScrollRef.current
    if (!el) return
    const dx = e.clientX - dragStartXRef.current
    el.scrollLeft = dragStartScrollLeftRef.current - dx
    e.preventDefault()
  }

function handleFeaturedPointerUp() {
    isDraggingRef.current = false
  }

function handleFeaturedPointerCancel() {
    isDraggingRef.current = false
  }

function onPointerDown(e: React.PointerEvent) {
    pointerActiveRef.current = true
    startXRef.current = e.clientX
    try {
      ;(e.currentTarget as HTMLElement).setPointerCapture?.((e as unknown as PointerEvent).pointerId)
    } catch {}
  }

function onPointerUp(e: React.PointerEvent) {
    if (!pointerActiveRef.current || startXRef.current === null) {
      pointerActiveRef.current = false
      startXRef.current = null
      return
    }
    const dx = e.clientX - startXRef.current
    const threshold = 40
    if (Math.abs(dx) > threshold) {
      // mark to skip click navigation if a swipe happened
      skipClickRef.current = true
      if (dx < 0) {
        nextFeatured()
      } else {
        prevFeatured()
      }
    }
    pointerActiveRef.current = false
    startXRef.current = null
  }

function onPointerCancel() {
    pointerActiveRef.current = false
    startXRef.current = null
  }

function handleFeaturedCardClick() {
    if (skipClickRef.current) {
      // consume the click that follows a swipe
      skipClickRef.current = false
      return
    }
    if (currentItem.link) {
      router.push(currentItem.link)
    }
  }

const navigationButtons = [
    { icon: Star, label: "FAVORITES", color: "bg-blue-600", link: "/favorites" },
    { icon: List, label: "TOPICS", color: "bg-blue-600", link: "/topics" },
    { icon: Users, label: "DIRECTORIES", color: "bg-blue-600", link: "/directories" },
  ]

const featuredContent = [
    {
      id: 1,
      title: "Monthly Revenue Mastery",
      image: "/images/monthly-revenue-mastery.png",
      type: "image",
      link: "/events",
      hasLightBackground: true,
    },
    {
      id: 2,
      title: "Meditation Series",
      image: "/images/meditation-beach.jpeg",
      type: "video",
      link: "/video/meditation-series",
      hasLightBackground: false,
    },
    {
      id: 3,
      title: "Awaken Series",
      image: "/placeholder.svg?height=120&width=200",
      type: "series",
      link: "/videos/awaken-series",
      hasLightBackground: false,
    },
    {
      id: 4,
      title: "Daily Inspiration",
      image: "/placeholder.svg?height=120&width=200",
      type: "image",
      hasLightBackground: false,
    },
  ]

const nextFeatured = () => {
    setCurrentFeaturedIndex((prev) => (prev === featuredContent.length - 1 ? 0 : prev + 1))
  }

const prevFeatured = () => {
    setCurrentFeaturedIndex((prev) => (prev === 0 ? featuredContent.length - 1 : prev - 1))
  }

const currentItem = featuredContent[currentFeaturedIndex]

return (
    <div className="home-root min-h-screen bg-white pb-0">
      {/* Status Bar */}
      <div className="text-white px-4 py-2 flex justify-between items-center text-sm bg-[rgba(19,40,80,1)]">
        <span>11:07</span>
        <div className="flex items-center gap-1">
          <div className="flex gap-1">
            <div className="w-1 h-3 bg-white rounded-full"></div>
            <div className="w-1 h-3 bg-white rounded-full"></div>
            <div className="w-1 h-3 bg-white/50 rounded-full"></div>
            <div className="w-1 h-3 bg-white/50 rounded-full"></div>
          </div>
          <div className="w-6 h-3 bg-white rounded-sm ml-2"></div>
        </div>
      </div>

{/* Header */}
      <div className="text-white px-4 py-4 flex items-center justify-between pt-0 pr-1 pl-1 bg-[rgba(19,40,80,1)] pb-2">
        <Button
          variant="ghost"
          size="icon"
          className="text-white hover:bg-slate-700"
          onClick={() => setIsMenuOpen(true)}
        >
          <Menu className="w-6 h-6" />
        </Button>
        <h1 className="text-lg font-semibold">Demo 10.1.0</h1>
        <div className="flex items-center gap-2">
          <Button variant="ghost" size="icon" className="text-white hover:bg-slate-700">
            <Bell className="h-5 w-5" />
          </Button>
          <Button variant="ghost" size="icon" className="text-white hover:bg-slate-700">
            <Lock className="h-5 w-5" />
          </Button>
        </div>
      </div>

{/* Hero Section */}
      <div className="bg-white py-0 px-0 my-0 mx-0">
        <div className="flex items-center gap-4 my-0 bg-white py-3 px-3">
          <div className="w-16 h-16 rounded-lg overflow-hidden flex-shrink-0">
            <Image
              src="/images/actionera-icon.png"
              alt="Actionera Icon"
              width={64}
              height={64}
              className="w-full h-full object-cover"
            />
          </div>
          <div className="flex-1 text-center">
            <h2 className="text-xl font-bold leading-tight text-[rgba(19,40,80,1)]">Welcome to Your Spiritual Journey</h2>
          </div>
        </div>

{/* Video Section */}
        <div className="py-0 px-0">
          <div className="bg-slate-800 rounded-none overflow-hidden mb-0">
            <div className="aspect-video w-full">
              <iframe
                className="w-full h-full my-0 py-0 mx-0 rounded-none"
                src="https://www.youtube.com/embed/6C7DjfMlbWw"
                title="Featured Video"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen
              ></iframe>
            </div>
          </div>
        </div>
      </div>

{/* Navigation Buttons */}
      <div className="px-4 my-0 py-0 pt-6 bg-[rgba(221,231,242,1)]">
        <div className="grid grid-cols-3 gap-3">
          {navigationButtons.map((button, index) => {
            const IconComponent = button.icon
            return (
              <Button
                key={index}
                className={`${button.color} hover:bg-blue-700 text-white h-16 rounded-xl flex flex-col items-center justify-center gap-1 bg-[rgba(38,80,160,1)] shadow-lg`}
                onClick={() => (button.link ? router.push(button.link) : setActiveTab(index))}
              >
                <IconComponent className="h-5 w-5" />
                <span className="text-xs font-medium">{button.label}</span>
              </Button>
            )
          })}
        </div>
      </div>

{/* Featured Content */}
      <div className="px-4 py-6 mb-0 rounded-none mt-0 pt-4 pl-0 pr-0 pb-0 bg-[rgba(221,231,242,1)]">
        <div className="flex items-center justify-between mb-4 mr-4 ml-4">
          <h3 className="text-lg font-semibold text-[rgba(19,40,80,1)]">Featured</h3>
          <Button
            variant="ghost"
            size="sm"
            className="mx-0 px-0 underline font-semibold text-[rgba(38,80,160,1)] hover:bg-transparent hover:text-[#132850] hover:no-underline"
          >
            View All <ChevronRight className="h-4 w-4 ml-1" />
          </Button>
        </div>

{/* Featured Card Row */}
        <div className="relative">
          <div
            ref={featuredScrollRef}
            className="flex items-stretch gap-4 overflow-x-auto snap-x snap-mandatory [-ms-overflow-style:none] [scrollbar-width:none] cursor-grab active:cursor-grabbing select-none touch-pan-x [::-webkit-scrollbar]:hidden pl-0 mx-0 ml-4 pb-0"
            onPointerDown={handleFeaturedPointerDown}
            onPointerMove={handleFeaturedPointerMove}
            onPointerUp={handleFeaturedPointerUp}
            onPointerLeave={handleFeaturedPointerUp}
            onPointerCancel={handleFeaturedPointerCancel}
          >
            {featuredContent.map((item, idx) => (
              <Card
                key={item.id}
                className={`group min-w-[340px] md:min-w-[380px] max-w-sm snap-start shadow-md hover:shadow-lg transition-shadow cursor-pointer px-0 mx-0 mr-0 ml-0 ${
                  item.hasLightBackground && idx !== 0 ? "bg-blue-50 border-blue-200" : "bg-white"
                }`}
                onClick={() => item.link && router.push(item.link)}
              >
                <CardContent className="p-0">
                  <div className="relative w-full aspect-video overflow-hidden">
                    <Image
                      src={item.image || "/placeholder.svg"}
                      alt={item.title}
                      fill
                      sizes="(max-width: 768px) 90vw, 480px"
                      className="object-cover"
                    />
                    {item.type === "video" && (
                      <div className="absolute inset-0 flex items-center justify-center">
                        <div className="bg-black/50 rounded-full p-3">
                          <Play className="h-8 w-8 text-white fill-white" />
                        </div>
                      </div>
                    )}
                  </div>
                  <div className="p-3 h-16 flex items-center">
                    <h4 className="line-clamp-2 leading-tight font-semibold underline text-lg text-[rgba(38,80,160,1)] transition-colors group-hover:text-[#132850] group-hover:no-underline">
                      {item.title}
                    </h4>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </div>

{/* Updates Section */}
      <div className="mb-6 px-0 border-0 border-none">
        <Card className="bg-gradient-to-r from-blue-50 to-cyan-50 border-0 border-none">
          <CardContent className="p-6 border-0 border-none rounded-none pl-4 pr-4 pb-12 bg-[rgba(221,231,242,1)]">
            <h3 className="text-xl font-bold mb-2 text-[rgba(19,40,80,1)]">Hello March, Welcome Spring</h3>
            <p className="text-sm leading-relaxed text-black">
              Discover new content and features as we embrace the season of renewal and growth. Explore fresh
              perspectives and inspiring content curated just for you.
            </p>
          </CardContent>
        </Card>
      </div>

{/* Fixed Call to Action */}
      <div aria-hidden="true" className="pointer-events-none fixed left-0 right-0 bottom-14 h-20 z-40 bg-gradient-to-b from-slate-200/0 to-slate-200"></div>
      <div className="fixed bottom-0 left-0 right-0 z-50 border-t-0 bg-slate-800 px-0 py-0">
        <Button className="w-full hover:bg-blue-700 text-white h-14 text-lg font-semibold shadow-lg rounded-none bg-[rgba(38,80,160,1)]">
          Explore New Features
        </Button>
      </div>

{/* Slide-out Menu */}
      {isMenuOpen && (
        <div className="fixed inset-0 z-50">
          {/* Backdrop */}
          <div className="absolute inset-0 bg-black/50" onClick={() => setIsMenuOpen(false)}></div>

{/* Menu Panel */}
          <div className="absolute left-0 top-0 h-full w-80 bg-white shadow-xl">
            {/* Menu Header */}
            <div className="bg-slate-800 text-white px-6 py-4">
              <div className="flex items-center justify-between">
                <h2 className="text-lg font-semibold">Menu</h2>
                <Button
                  variant="ghost"
                  size="icon"
                  className="text-white hover:bg-slate-700"
                  onClick={() => setIsMenuOpen(false)}
                >
                  <X className="h-6 w-6" />
                </Button>
              </div>
            </div>

{/* Menu Content */}
            <div className="p-4 space-y-2">
              {/* Profile Section */}
              <div className="flex items-center gap-3 p-3 bg-blue-50 rounded-lg mb-4">
                <div className="w-12 h-12 bg-blue-600 rounded-full flex items-center justify-center">
                  <User className="h-6 w-6 text-white" />
                </div>
                <div>
                  <p className="font-semibold text-slate-800">John Doe</p>
                  <p className="text-sm text-slate-600">Premium Member</p>
                </div>
              </div>

{/* Menu Items */}
              <div className="space-y-1">
                <button className="w-full flex items-center gap-3 p-3 text-left hover:bg-gray-50 rounded-lg transition-colors">
                  <Home className="h-5 w-5 text-slate-600" />
                  <span className="text-slate-800">Home</span>
                </button>

<button className="w-full flex items-center gap-3 p-3 text-left hover:bg-gray-50 rounded-lg transition-colors">
                  <Star className="h-5 w-5 text-slate-600" />
                  <span className="text-slate-800">My Favorites</span>
                </button>

<button className="w-full flex items-center gap-3 p-3 text-left hover:bg-gray-50 rounded-lg transition-colors">
                  <List className="h-5 w-5 text-slate-600" />
                  <span className="text-slate-800">Topics</span>
                </button>

<button className="w-full flex items-center gap-3 p-3 text-left hover:bg-gray-50 rounded-lg transition-colors">
                  <Building className="h-5 w-5 text-slate-600" />
                  <span className="text-slate-800">Directories</span>
                </button>

<button className="w-full flex items-center gap-3 p-3 text-left hover:bg-gray-50 rounded-lg transition-colors">
                  <Calendar className="h-5 w-5 text-slate-600" />
                  <span className="text-slate-800">Events</span>
                </button>

<button className="w-full flex items-center gap-3 p-3 text-left hover:bg-gray-50 rounded-lg transition-colors">
                  <GraduationCap className="h-5 w-5 text-slate-600" />
                  <span className="text-slate-800">My Courses</span>
                </button>

<button className="w-full flex items-center gap-3 p-3 text-left hover:bg-gray-50 rounded-lg transition-colors">
                  <BookOpen className="h-5 w-5 text-slate-600" />
                  <span className="text-slate-800">e-Books</span>
                </button>

<button className="w-full flex items-center gap-3 p-3 text-left hover:bg-gray-50 rounded-lg transition-colors">
                  <Store className="h-5 w-5 text-slate-600" />
                  <span className="text-slate-800">Video Store</span>
                </button>

<button className="w-full flex items-center gap-3 p-3 text-left hover:bg-gray-50 rounded-lg transition-colors">
                  <Users className="h-5 w-5 text-slate-600" />
                  <span className="text-slate-800">Community</span>
                </button>

<button className="w-full flex items-center gap-3 p-3 text-left hover:bg-gray-50 rounded-lg transition-colors">
                  <MessageCircle className="h-5 w-5 text-slate-600" />
                  <span className="text-slate-800">Support</span>
                </button>
              </div>

{/* Divider */}
              <div className="border-t border-gray-200 my-4"></div>

{/* Bottom Menu Items */}
              <div className="space-y-1">
                <button className="w-full flex items-center gap-3 p-3 text-left hover:bg-gray-50 rounded-lg transition-colors">
                  <Settings className="h-5 w-5 text-slate-600" />
                  <span className="text-slate-800">Settings</span>
                </button>

<button className="w-full flex items-center gap-3 p-3 text-left hover:bg-gray-50 rounded-lg transition-colors">
                  <LogOut className="h-5 w-5 text-slate-600" />
                  <span className="text-slate-800">Sign Out</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
      <style jsx>{`
    .home-root :global(button:hover) {
      background-color: #132850 !important;
    }
  `}</style>
    </div>
  )
}</article></body></html>