[V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" import Header from "@/components/header" import Footer from "@/components/footer" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "HerbiCare AI - The AI-Powered Herbal Healing Guide", description: "Discover medicinal herbs tailored to your health needs with AI-powered insights.", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return (

{children}

) } [V0_FILE]typescriptreact:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 142 76% 36%; --primary-foreground: 355.7 100% 97.3%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 142 76% 94%; --accent-foreground: 142 76% 26%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 142 76% 36%; --radius: 0.5rem; } .dark { --background: 20 14.3% 4.1%; --foreground: 0 0% 95%; --card: 24 9.8% 10%; --card-foreground: 0 0% 95%; --popover: 0 0% 9%; --popover-foreground: 0 0% 95%; --primary: 142 76% 36%; --primary-foreground: 144 70% 98%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 15%; --muted-foreground: 240 5% 64.9%; --accent: 142 76% 16%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 85.7% 97.3%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 142 76% 36%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } .herb-card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .herb-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); } .gradient-text { @apply bg-gradient-to-r from-green-600 to-green-400 bg-clip-text text-transparent; } .leaf-bullet li { @apply relative pl-7; } .leaf-bullet li:before { content: "🌿"; @apply absolute left-0 text-green-600; } [V0_FILE]typescriptreact:file="tailwind.config.ts" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, float: { "0%, 100%": { transform: "translateY(0)" }, "50%": { transform: "translateY(-10px)" }, }, shimmer: { "100%": { transform: "translateX(100%)", }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", float: "float 6s ease-in-out infinite", shimmer: "shimmer 2s infinite", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="components/header.tsx" "use client" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { ModeToggle } from "@/components/mode-toggle" import { ShoppingCart, Menu, X, User } from "lucide-react" import { usePathname } from "next/navigation" export default function Header() { const [isMenuOpen, setIsMenuOpen] = useState(false) const pathname = usePathname() const isActive = (path: string) => { return pathname === path } const navLinks = [ { name: "Home", path: "/" }, { name: "AI Assistant", path: "/ai-assistant" }, { name: "Shop", path: "/shop" }, { name: "ProConnect", path: "/pro-connect" }, ] return (

🌿 HerbiCare AI

{/* Desktop Navigation */}

{/* Mobile Menu Button */}

{/* Mobile Menu */} {isMenuOpen && (

)}

) } [V0_FILE]typescriptreact:file="components/mode-toggle.tsx" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" export function ModeToggle() { const { setTheme } = useTheme() return ( setTheme("light")}>Light setTheme("dark")}>Dark setTheme("system")}>System ) } [V0_FILE]typescriptreact:file="components/footer.tsx" import Link from "next/link" import { Facebook, Instagram, Twitter } from "lucide-react" export default function Footer() { return ( ) } [V0_FILE]typescriptreact:file="app/page.tsx" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { ArrowRight, Search, Calendar, BookOpen, ShieldCheck } from "lucide-react" export default function Home() { return (

{/* Hero Section */}

AI-Powered Herbal Healing

Discover Nature's Healing Power with AI

Research and shop for medicinal herbs tailored to your condition using real-time, citation-backed AI insights.

{/* Features Section */}

Core Features

How HerbiCare AI Works

Our platform combines the ancient wisdom of herbal medicine with cutting-edge AI technology to provide personalized healing recommendations.

AI-Powered Search

Input your symptoms or condition and get herb recommendations with scientific citations.

Herb Database

Browse our extensive collection of medicinal herbs with detailed information on benefits and usage.

ProConnect

Book consultations with certified herbalists and integrative health professionals.

Trusted Sources

All recommendations come with citations from scientific research and trusted sources.

{/* How It Works */}

Simple Process

Your Journey to Natural Healing

Follow these simple steps to discover the perfect herbal remedies for your health concerns.

Describe Your Condition

Tell our AI assistant about your symptoms or health concerns.

Get Herb Recommendations

Receive personalized herb suggestions with scientific backing.

Shop or Consult

Purchase recommended herbs or book a consultation with a professional.

{/* Testimonials */}

Testimonials

What Our Users Say

Discover how HerbiCare AI has helped people find natural solutions to their health concerns.

{[ { name: "Sarah J.", role: "Wellness Enthusiast", quote: "The AI assistant recommended herbs that actually helped with my chronic inflammation. The scientific citations gave me confidence in the suggestions.", }, { name: "Michael T.", role: "Fitness Coach", quote: "I've been looking for natural alternatives for my clients. HerbiCare AI makes it easy to find scientifically-backed herbal remedies.", }, { name: "Lisa R.", role: "Holistic Practitioner", quote: "As a professional, I appreciate the depth of research behind each recommendation. The ProConnect feature has brought me many new clients.", }, ].map((testimonial, index) => (

"{testimonial.quote}"

{testimonial.name}

{testimonial.role}

))}

{/* CTA Section */}

Start Your Natural Healing Journey Today

Join thousands of users who have discovered the power of AI-guided herbal healing.

) } [V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/ai-assistant/page.tsx" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Send, Loader2, ExternalLink, BookOpen, AlertCircle } from "lucide-react" import Link from "next/link" // Mock data for herb recommendations const mockHerbs = [ { id: 1, name: "Turmeric", scientificName: "Curcuma longa", benefits: "Anti-inflammatory, antioxidant properties", image: "/placeholder.svg?height=200&width=200", }, { id: 2, name: "Ginger", scientificName: "Zingiber officinale", benefits: "Digestive aid, anti-nausea, anti-inflammatory", image: "/placeholder.svg?height=200&width=200", }, { id: 3, name: "Echinacea", scientificName: "Echinacea purpurea", benefits: "Immune system support, cold and flu prevention", image: "/placeholder.svg?height=200&width=200", }, ] // Mock citations const mockCitations = [ { id: 1, title: "Efficacy of Turmeric on Inflammatory Conditions", authors: "Johnson et al.", journal: "Journal of Medicinal Plants", year: 2019, url: "#", }, { id: 2, title: "Ginger: A Comprehensive Review of Its Medicinal Properties", authors: "Smith & Williams", journal: "Phytotherapy Research", year: 2020, url: "#", }, { id: 3, title: "Echinacea for Preventing and Treating the Common Cold", authors: "Lee et al.", journal: "International Journal of Herbal Medicine", year: 2018, url: "#", }, ] export default function AIAssistant() { const [query, setQuery] = useState("") const [isLoading, setIsLoading] = useState(false) const [result, setResult] = useState(null) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() if (!query.trim()) return setIsLoading(true) // Simulate API call setTimeout(() => { setResult({ explanation: `Based on your symptoms of "${query}", I've found several herbs that may help. These herbs have been studied for their potential benefits in addressing your condition. Here's what the research suggests:`, herbs: mockHerbs, citations: mockCitations, }) setIsLoading(false) }, 2000) } return (

AI Herbal Assistant

Describe your symptoms or health concerns, and our AI will suggest herbs that might help, backed by scientific research.

{isLoading && (

Researching herbal remedies for your condition...

)} {result && (

AI Response

{result.explanation}

Recommended Herbs Citations

{result.herbs.map((herb) => (

{herb.name}

{herb.scientificName}

{herb.benefits}

))}

{citation.title}

{citation.authors} ({citation.year}). {citation.journal}.

)} {!isLoading && !result && (

Ask about any health concern

Our AI will search through scientific research to find herbal remedies that might help with your condition.

)}

) } [V0_FILE]typescriptreact:file="app/herbs/[id]/page.tsx" "use client" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { ShoppingCart, Star, ExternalLink, AlertTriangle, Check, ChevronRight, Leaf, Pill, Droplet, BookOpen, } from "lucide-react" import { useToast } from "@/hooks/use-toast" // Mock herb data const herbData = { id: 1, name: "Turmeric", scientificName: "Curcuma longa", description: "Turmeric is a flowering plant of the ginger family. Its roots are used in cooking and traditional medicine. It contains curcumin, which has powerful anti-inflammatory effects and is a strong antioxidant.", benefits: [ "Reduces inflammation", "Contains antioxidants", "May improve brain function", "May lower risk of heart disease", "May help prevent cancer", "May help with arthritis", ], precautions: [ "May interact with blood thinners", "May cause digestive issues in high doses", "Not recommended during pregnancy in medicinal amounts", ], dosage: "500-2,000 mg of turmeric per day, or 400-600 mg of curcumin three times daily.", forms: ["Powder", "Capsules", "Tincture", "Tea"], image: "/placeholder.svg?height=400&width=400", rating: 4.8, reviews: 124, price: 19.99, vendors: [ { name: "Herbal Essentials", price: 19.99, rating: 4.8 }, { name: "Nature's Best", price: 22.5, rating: 4.6 }, { name: "Pure Herbs", price: 18.75, rating: 4.7 }, ], citations: [ { id: 1, title: "Efficacy of Turmeric on Inflammatory Conditions", authors: "Johnson et al.", journal: "Journal of Medicinal Plants", year: 2019, url: "#", }, { id: 2, title: "Curcumin: A Review of Its Effects on Human Health", authors: "Hewlings & Kalman", journal: "Foods", year: 2017, url: "#", }, ], } export default function HerbDetails({ params }: { params: { id: string } }) { const [quantity, setQuantity] = useState(1) const [selectedVendor, setSelectedVendor] = useState(herbData.vendors[0]) const { toast } = useToast() const handleAddToCart = () => { toast({ title: "Added to cart", description: `${quantity} × ${herbData.name} added to your cart`, }) } return (

Shop Herb Details

{herbData.name}

{herbData.scientificName}

{herbData.rating} ({herbData.reviews} reviews)

Popular

Available Forms

{herbData.forms.map((form) => ( {form} ))}

Overview Benefits Precautions Research

{herbData.description}

Recommended Dosage

{herbData.dosage}

Natural

100% natural ingredients

Potent

High-quality extraction

Pure

No additives or fillers

{benefit}

Always consult with a healthcare professional before starting any herbal supplement, especially if you have existing health conditions or are taking medications.

{precaution}

Scientific Research

{citation.title}

{citation.authors} ({citation.year}). {citation.journal}.

Available from these vendors

{herbData.vendors.map((vendor) => (

setSelectedVendor(vendor)} >

{vendor.name}

{selectedVendor.name === vendor.name && }

{vendor.rating}

${vendor.price.toFixed(2)}

Free shipping

))}

{quantity}

) } [V0_FILE]typescriptreact:file="app/shop/page.tsx" "use client" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Slider } from "@/components/ui/slider" import { ShoppingCart, Search, Star, Filter, Grid3X3, List } from "lucide-react" import { useToast } from "@/hooks/use-toast" // Mock data for herbs const mockHerbs = [ { id: 1, name: "Turmeric", scientificName: "Curcuma longa", category: "Anti-inflammatory", price: 19.99, rating: 4.8, reviews: 124, image: "/placeholder.svg?height=200&width=200", }, { id: 2, name: "Ginger", scientificName: "Zingiber officinale", category: "Digestive", price: 15.99, rating: 4.6, reviews: 98, image: "/placeholder.svg?height=200&width=200", }, { id: 3, name: "Echinacea", scientificName: "Echinacea purpurea", category: "Immune Support", price: 22.5, rating: 4.5, reviews: 87, image: "/placeholder.svg?height=200&width=200", }, { id: 4, name: "Ashwagandha", scientificName: "Withania somnifera", category: "Adaptogen", price: 24.99, rating: 4.7, reviews: 112, image: "/placeholder.svg?height=200&width=200", }, { id: 5, name: "Valerian Root", scientificName: "Valeriana officinalis", category: "Sleep Aid", price: 18.75, rating: 4.4, reviews: 76, image: "/placeholder.svg?height=200&width=200", }, { id: 6, name: "St. John's Wort", scientificName: "Hypericum perforatum", category: "Mood Support", price: 21.25, rating: 4.3, reviews: 65, image: "/placeholder.svg?height=200&width=200", }, { id: 7, name: "Milk Thistle", scientificName: "Silybum marianum", category: "Liver Support", price: 23.5, rating: 4.6, reviews: 92, image: "/placeholder.svg?height=200&width=200", }, { id: 8, name: "Chamomile", scientificName: "Matricaria chamomilla", category: "Calming", price: 14.99, rating: 4.5, reviews: 103, image: "/placeholder.svg?height=200&width=200", }, { id: 9, name: "Peppermint", scientificName: "Mentha piperita", category: "Digestive", price: 12.99, rating: 4.4, reviews: 88, image: "/placeholder.svg?height=200&width=200", }, ] // Categories for filtering const categories = [ "All", "Anti-inflammatory", "Digestive", "Immune Support", "Adaptogen", "Sleep Aid", "Mood Support", "Liver Support", "Calming", ] export default function Shop() { const [searchTerm, setSearchTerm] = useState("") const [selectedCategory, setSelectedCategory] = useState("All") const [priceRange, setPriceRange] = useState([0, 30]) const [sortBy, setSortBy] = useState("popularity") const [viewMode, setViewMode] = useState<"grid" | "list">("grid") const { toast } = useToast() // Filter herbs based on search, category, and price const filteredHerbs = mockHerbs.filter((herb) => { const matchesSearch = herb.name.toLowerCase().includes(searchTerm.toLowerCase()) || herb.scientificName.toLowerCase().includes(searchTerm.toLowerCase()) const matchesCategory = selectedCategory === "All" || herb.category === selectedCategory const matchesPrice = herb.price >= priceRange[0] && herb.price <= priceRange[1] return matchesSearch && matchesCategory && matchesPrice }) // Sort herbs const sortedHerbs = [...filteredHerbs].sort((a, b) => { if (sortBy === "price-low") return a.price - b.price if (sortBy === "price-high") return b.price - a.price if (sortBy === "rating") return b.rating - a.rating // Default: popularity (by reviews) return b.reviews - a.reviews }) const handleAddToCart = (herbName: string) => { toast({ title: "Added to cart", description: `${herbName} added to your cart`, }) } return (

Herb Shop

Browse our collection of high-quality medicinal herbs

{/* Filters Sidebar */}

Search

setSearchTerm(e.target.value)} />

Price Range

${priceRange[0]} ${priceRange[1]}

{/* Main Content */}

Showing {sortedHerbs.length} results

{sortedHerbs.length === 0 ? (

No herbs found

Try adjusting your search or filter criteria

) : viewMode === "grid" ? (

{sortedHerbs.map((herb) => (

{herb.category}

{herb.name}

${herb.price.toFixed(2)}

{herb.scientificName}

{herb.rating} ({herb.reviews})

))}

) : (

{sortedHerbs.map((herb) => (

{herb.name}

{herb.category}

{herb.scientificName}

{herb.rating} ({herb.reviews})

${herb.price.toFixed(2)}

Free shipping

))}

)}

) } [V0_FILE]typescriptreact:file="app/shop/loading.tsx" isFixed="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/cart/page.tsx" "use client" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Separator } from "@/components/ui/separator" import { ShoppingCart, Trash2, ChevronRight, CreditCard, ShieldCheck, ArrowLeft } from "lucide-react" import { useToast } from "@/hooks/use-toast" // Mock cart data const initialCartItems = [ { id: 1, name: "Turmeric", scientificName: "Curcuma longa", price: 19.99, quantity: 1, image: "/placeholder.svg?height=100&width=100", vendor: "Herbal Essentials", }, { id: 2, name: "Ginger", scientificName: "Zingiber officinale", price: 15.99, quantity: 2, image: "/placeholder.svg?height=100&width=100", vendor: "Nature's Best", }, ] export default function Cart() { const [cartItems, setCartItems] = useState(initialCartItems) const [promoCode, setPromoCode] = useState("") const [promoApplied, setPromoApplied] = useState(false) const { toast } = useToast() const subtotal = cartItems.reduce((total, item) => total + item.price * item.quantity, 0) const discount = promoApplied ? subtotal * 0.1 : 0 const shipping = subtotal > 50 ? 0 : 5.99 const total = subtotal - discount + shipping const updateQuantity = (id: number, newQuantity: number) => { if (newQuantity < 1) return setCartItems(cartItems.map((item) => (item.id === id ? { ...item, quantity: newQuantity } : item))) } const removeItem = (id: number) => { setCartItems(cartItems.filter((item) => item.id !== id)) toast({ title: "Item removed", description: "The item has been removed from your cart", }) } const applyPromoCode = () => { if (promoCode.toLowerCase() === "herbicare10") { setPromoApplied(true) toast({ title: "Promo code applied", description: "10% discount has been applied to your order", }) } else { toast({ title: "Invalid promo code", description: "Please enter a valid promo code", variant: "destructive", }) } } const handleCheckout = () => { toast({ title: "Checkout initiated", description: "This is a demo. No actual payment will be processed.", }) } return (

Shop Cart

Your Cart

{cartItems.length === 0 ? (

Your cart is empty

Looks like you haven't added any herbs to your cart yet.

) : (

{cartItems.map((item) => (

{item.name}

${(item.price * item.quantity).toFixed(2)}

{item.scientificName}

Sold by: {item.vendor}

{item.quantity}

))}

{cartItems.length} {cartItems.length === 1 ? "item" : "items"} in cart

Order Summary

Subtotal ${subtotal.toFixed(2)}

{promoApplied && (

Discount (10%) -${discount.toFixed(2)}

)}

Shipping {shipping === 0 ? "Free" : `$${shipping.toFixed(2)}`}

Total ${total.toFixed(2)}

Promo Code

setPromoCode(e.target.value)} />

Try "HERBICARE10" for 10% off

Secure checkout

)}

) } [V0_FILE]typescriptreact:file="app/pro-connect/page.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Calendar, Clock, Star, Video, MessageSquare, Phone, ChevronRight, CreditCard, Check, Filter, } from "lucide-react" import { useToast } from "@/hooks/use-toast" // Mock data for professionals const professionals = [ { id: 1, name: "Dr. Sarah Johnson", title: "Naturopathic Doctor", specialty: "Herbal Medicine", experience: "15 years", rating: 4.9, reviews: 128, price: 120, availability: ["Mon", "Wed", "Fri"], image: "/placeholder.svg?height=200&width=200", bio: "Dr. Sarah Johnson is a licensed naturopathic doctor specializing in herbal medicine and holistic health. With 15 years of experience, she combines traditional herbal knowledge with modern scientific research to provide personalized treatment plans.", }, { id: 2, name: "Michael Chen", title: "Master Herbalist", specialty: "Traditional Chinese Medicine", experience: "20 years", rating: 4.8, reviews: 96, price: 100, availability: ["Tue", "Thu", "Sat"], image: "/placeholder.svg?height=200&width=200", bio: "Michael Chen is a certified master herbalist with extensive training in Traditional Chinese Medicine. He has helped thousands of clients achieve better health through personalized herbal formulations and lifestyle recommendations.", }, { id: 3, name: "Dr. Emily Rodriguez", title: "Integrative Medicine Physician", specialty: "Functional Medicine", experience: "12 years", rating: 4.7, reviews: 85, price: 150, availability: ["Mon", "Tue", "Thu"], image: "/placeholder.svg?height=200&width=200", bio: "Dr. Rodriguez combines conventional medical training with extensive knowledge of herbal medicine. She specializes in treating chronic conditions through an integrative approach that addresses root causes rather than just symptoms.", }, { id: 4, name: "James Wilson", title: "Clinical Herbalist", specialty: "Western Herbalism", experience: "10 years", rating: 4.6, reviews: 72, price: 90, availability: ["Wed", "Fri", "Sat"], image: "/placeholder.svg?height=200&width=200", bio: "James Wilson is a clinical herbalist who focuses on evidence-based herbal protocols. His approach combines traditional Western herbalism with modern research to create effective treatment plans for a variety of health concerns.", }, ] // Mock time slots const timeSlots = ["9:00 AM", "10:00 AM", "11:00 AM", "1:00 PM", "2:00 PM", "3:00 PM", "4:00 PM"] // Mock specialties for filtering const specialties = [ "All Specialties", "Herbal Medicine", "Traditional Chinese Medicine", "Functional Medicine", "Western Herbalism", ] export default function ProConnect() { const [selectedProfessional, setSelectedProfessional] = useState(null) const [selectedDate, setSelectedDate] = useState("") const [selectedTime, setSelectedTime] = useState("") const [consultationType, setConsultationType] = useState("video") const [filteredSpecialty, setFilteredSpecialty] = useState("All Specialties") const [bookingStep, setBookingStep] = useState(1) const { toast } = useToast() const filteredProfessionals = professionals.filter( (pro) => filteredSpecialty === "All Specialties" || pro.specialty === filteredSpecialty, ) const handleSelectProfessional = (professional: (typeof professionals)[0]) => { setSelectedProfessional(professional) setBookingStep(2) // Reset other selections setSelectedDate("") setSelectedTime("") } const handleDateSelect = (date: string) => { setSelectedDate(date) } const handleTimeSelect = (time: string) => { setSelectedTime(time) } const handleProceedToPayment = () => { if (!selectedDate || !selectedTime) { toast({ title: "Please select a date and time", description: "You need to select both a date and time to proceed", variant: "destructive", }) return } setBookingStep(3) } const handleBookAppointment = () => { toast({ title: "Appointment Booked!", description: `Your ${consultationType} consultation with ${selectedProfessional?.name} is confirmed for ${selectedDate} at ${selectedTime}.`, }) // Reset everything setSelectedProfessional(null) setSelectedDate("") setSelectedTime("") setBookingStep(1) } const renderBookingStep = () => { switch (bookingStep) { case 1: return (

Available Professionals

{filteredProfessionals.length === 0 ? (

No professionals found

Try selecting a different specialty

) : (

{filteredProfessionals.map((professional) => (

{professional.name}

{professional.specialty}

{professional.title} • {professional.experience} experience

{professional.rating} ({professional.reviews} reviews)

${professional.price}/hour

Available: {professional.availability.join(", ")}

{professional.bio}

))}

)}

) case 2: return (

Schedule

{selectedProfessional?.name}

{selectedProfessional?.title}

{selectedProfessional?.specialty}

{selectedProfessional?.rating}

${selectedProfessional?.price}/hour

Select Consultation Type

setConsultationType("video")} >

setConsultationType("phone")} >

Phone Call

Audio-only consultation

setConsultationType("message")} >

Messaging

Text-based consultation

Select Date & Time

Date

{selectedProfessional?.availability.map((day) => { const date = new Date() const dayMap: Record = { Sun: 0, Mon: 1, Tue: 2, Wed: 3, Thu: 4, Fri: 5, Sat: 6, } // Find the next occurrence of this day const dayOfWeek = dayMap[day] const daysUntil = (dayOfWeek + 7 - date.getDay()) % 7 const nextDate = new Date(date) nextDate.setDate(date.getDate() + daysUntil) const dateStr = `${nextDate.getMonth() + 1}/${nextDate.getDate()}` return (

handleDateSelect(dateStr)} >

{day}

{dateStr}

) })}

Time

{timeSlots.map((time) => (

handleTimeSelect(time)} >

{time}

))}

) case 3: return (

Payment

Payment Details

Name on Card

Card Number

Expiry Date

CVC

Email for Receipt

Your payment information is secure

Appointment Summary

{selectedProfessional?.name}

{selectedProfessional?.specialty}

Date: {selectedDate}

Time: {selectedTime}

{consultationType === "video" &&

Consultation Fee ${selectedProfessional?.price}.00

Platform Fee $5.00

Total ${(selectedProfessional?.price || 0) + 5}.00

) default: return null } } return (

ProConnect

Book consultations with certified herbalists and integrative health professionals

{renderBookingStep()}

) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isTerminated="true" "use client" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { Calendar, Clock, Search, ShoppingBag, User, Video, History, BookOpen, ChevronRight, Crown } from "lucide-react" // Mock data for past searches const pastSearches = [ { id: 1, query: "Natural remedies for headaches", date: "May 15, 2023", herbs: ["Feverfew", "Butterbur", "Willow Bark"], }, { id: 2, query: "Herbs for better sleep", date: "May 10, 2023", herbs: ["Valerian Root", "Chamomile", "Lavender"], }, { id: 3, query: "Anti-inflammatory herbs", date: "May 5, 2023", herbs: ["Turmeric", "Ginger", "Boswellia"], }, ] // Mock data for saved herbs const savedHerbs = [ { id: 1, name: "Turmeric", scientificName: "Curcuma longa", image: "/placeholder.svg?height=100&width=100", savedOn: "May 16, 2023", }, { id: 2, name: "Ashwagandha", scientificName: "Withania somnifera", image: "/placeholder.svg?height=100&width=100", savedOn: "May 12, 2023", }, { id: 3, name: "Echinacea", scientificName: "Echinacea purpurea", image: "/placeholder.svg?height=100&width=100", savedOn: "May 8, 2023", }, ] // Mock data for upcoming consultations const upcomingConsultations = [ { id: 1, professional: "Dr. Sarah Johnson", specialty: "Naturopathic Doctor", date: "May 25, 2023", time: "10:00 AM", type: "video", image: "/placeholder.svg?height=100&width=100", }, ] // Mock data for order history const orderHistory = [ { id: "ORD-12345", date: "May 14, 2023", status: "Delivered", total: 45.98, items: [ { name: "Turmeric Capsules", quantity: 1, price: 19.99, }, { name: "Ginger Root Extract", quantity: 2, price: 12.99, }, ], }, { id: "ORD-12344", date: "April 30, 2023", status: "Delivered", total: 35.5, items: [ { name: "Echinacea Tincture", quantity: 1, price: 22.5, }, { name: "Chamomile Tea", quantity: 1, price: 13.0, }, ], }, ] export default function Dashboard() { const [activeTab, setActiveTab] = useState("overview"); return (

My Dashboard

Manage your searches, saved herbs, and consultations

John Doe

john.doe@example.com

Free Plan

Upgrade to Pro

Get unlimited AI searches, priority booking with professionals, and exclusive discounts.

{activeTab === "overview" && (

{pastSearches.length}

AI Searches

{savedHerbs.length}

Saved Herbs

{upcomingConsultations.length}

Upcoming Consultations

Recent Searches

{pastSearches.slice(0, 2).map((search) => (

{search.query}

{search.date}

{search.herbs.map((herb) => ( {herb} ))}

))}

Saved Herbs

{savedHerbs.slice(0, 3).map((herb) => (

{herb.name}

{herb.scientificName}

))}

{upcomingConsultations.length > 0 && ( Upcoming Consultation {upcomingConsultations.map((consultation) => (

{consultation.professional}

{consultation.specialty}

{consultation.date}

{consultation.time}

))} )}

)} {activeTab === "searches" && ( Past Searches

{pastSearches.map((search) => (

{search.query}

{search.date}

Recommended Herbs:

{search.herbs.map((herb) => ( {herb} ))}

))}

)} {activeTab === "herbs" && ( Saved Herbs

{savedHerbs.map((herb) => (

{herb.name}

{herb.scientificName}

Discover Nature's Healing Power with AI

How HerbiCare AI Works

AI-Powered Search

Herb Database

ProConnect

Trusted Sources

Your Journey to Natural Healing

Describe Your Condition

Get Herb Recommendations

Shop or Consult

What Our Users Say

{testimonial.name}

Start Your Natural Healing Journey Today

AI Herbal Assistant

{herb.name}

Ask about any health concern

{herbData.name}

Available Forms

Recommended Dosage

Natural

Potent

Pure

Scientific Research

Available from these vendors

{vendor.name}

Herb Shop

Search

Categories

Price Range

No herbs found

{herb.name}

{herb.name}

Your Cart

Your cart is empty

{item.name}

Order Summary

Available Professionals

No professionals found

{professional.name}

{selectedProfessional?.name}

Select Consultation Type

Video Call

Phone Call

Messaging

Select Date & Time

Payment Details

Appointment Summary

{selectedProfessional?.name}

ProConnect

My Dashboard

John Doe

Upgrade to Pro

{pastSearches.length}

{savedHerbs.length}

{upcomingConsultations.length}

{search.query}

{herb.name}

{consultation.professional}

{search.query}

Recommended Herbs:

{herb.name}