[V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76", "framer-motion": "12.23.25", "three": "0.182.0", "@notionhq/client": "5.6.0", "notion-to-md": "3.1.9", "react-markdown": "10.1.0" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]jpeg:file="public/images/4-20tarots.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/4%20tarots-Mj0bUo2abwxzf0skPM3QESMroe7JDx.jpeg" [V0_FILE]typescriptreact:file="components/about/about-cta.tsx" "use client" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import Link from "next/link" import { ArrowRight, Calendar } from "lucide-react" export function AboutCTA() { return (

Ready to Begin Your Journey?

I would be honored to guide you on your path to healing and transformation. Let's discover which service is right for you.

) } [V0_FILE]typescriptreact:file="app/contact/page.tsx" import { Navigation } from "@/components/navigation" import { Footer } from "@/components/footer" import { CosmicBackground } from "@/components/cosmic-background" import { ContactHero } from "@/components/contact/contact-hero" import { ContactContent } from "@/components/contact/contact-content" export const metadata = { title: "Contact | Miracle The G", description: "Get in touch with Samira for questions about services, bookings, or to begin your healing journey. We'd love to hear from you.", } export default function ContactPage() { return (

) } [V0_FILE]typescriptreact:file="app/faq/page.tsx" import { Navigation } from "@/components/navigation" import { Footer } from "@/components/footer" import { CosmicBackground } from "@/components/cosmic-background" import { FAQHero } from "@/components/faq/faq-hero" import { FAQContent } from "@/components/faq/faq-content" import { FAQCTA } from "@/components/faq/faq-cta" export const metadata = { title: "FAQ | Miracle The G", description: "Find answers to common questions about Reiki healing, plant medicine ceremonies, psychic readings, and spiritual services.", } export default function FAQPage() { return (

) } [V0_FILE]typescriptreact:file="components/faq/faq-hero.tsx" "use client" import { motion } from "framer-motion" import { HelpCircle } from "lucide-react" export function FAQHero() { return (

Frequently Asked Questions

Everything you need to know about our healing services, what to expect, and how to prepare for your journey.

) } [V0_FILE]typescriptreact:file="components/faq/faq-content.tsx" "use client" import { motion } from "framer-motion" import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion" const faqCategories = [ { title: "General Questions", faqs: [ { question: "What should I expect during my first session?", answer: "Your first session will begin with a brief consultation where we discuss your intentions, any concerns, and what you hope to achieve. I'll explain the process, answer any questions, and create a comfortable environment for your healing experience. Whether it's Reiki, a reading, or another service, you'll be guided every step of the way.", }, { question: "Do I need to prepare anything before my appointment?", answer: "For most sessions, simply come with an open mind and comfortable clothing. Avoid heavy meals or alcohol beforehand. For plant medicine ceremonies, there are specific dietary and lifestyle preparations we'll discuss during your consultation. I'll send detailed instructions before your appointment.", }, { question: "How many sessions will I need?", answer: "This varies depending on your goals and what you're working through. Some clients experience significant shifts in a single session, while others benefit from ongoing work. After your first session, I'll provide personalized recommendations. There's never any pressure to book additional sessions.", }, { question: "Do you offer virtual/distance sessions?", answer: "Yes! Many services including Reiki, tarot readings, and consultations can be done effectively at a distance. Energy is not limited by physical space. Virtual sessions are conducted via video call, and many clients report equally powerful experiences.", }, ], }, { title: "Reiki & Energy Healing", faqs: [ { question: "What is Reiki and how does it work?", answer: "Reiki is a Japanese energy healing technique that promotes relaxation and healing by channeling universal life force energy through the practitioner's hands. It works on the physical, emotional, mental, and spiritual levels to restore balance and activate your body's natural healing abilities.", }, { question: "Will I feel anything during a Reiki session?", answer: "Experiences vary from person to person. Common sensations include warmth, tingling, waves of relaxation, or emotional release. Some people see colors or have vivid imagery. Others simply feel deeply peaceful. There's no 'right' way to experience Reiki — trust whatever arises for you.", }, { question: "Is Reiki a religious practice?", answer: "No, Reiki is not affiliated with any religion. It's a spiritual practice that can complement any belief system. People of all faiths (and no faith) can benefit from and practice Reiki. It simply works with the universal life force energy that flows through all living things.", }, { question: "Can Reiki help with physical ailments?", answer: "Reiki is a complementary practice that can support physical healing by reducing stress, promoting relaxation, and supporting your body's natural healing processes. While it's not a replacement for medical treatment, many clients report reduced pain, faster recovery, and improved overall well-being.", }, ], }, { title: "Readings & Intuitive Services", faqs: [ { question: "How accurate are your readings?", answer: "While no reader can claim 100% accuracy, my readings are known for their specificity and relevance. I provide information as I receive it and encourage you to take what resonates and leave what doesn't. The most valuable readings are those that empower you to make your own decisions.", }, { question: "Can you predict the future?", answer: "I can see potential paths and likely outcomes based on current energies, but the future is not fixed. You have free will, and your choices shape your path. Readings are best used as guidance tools to help you make informed decisions, not as absolute predictions.", }, { question: "What if I receive information I don't want to hear?", answer: "I always deliver messages with compassion and care. If challenging information comes through, it's shared as guidance, not doom. Remember, awareness of potential challenges gives you the power to navigate them wisely. I'm here to empower, not frighten.", }, ], }, { title: "Medicine Ceremonies", faqs: [ { question: "Are plant medicine ceremonies legal?", answer: "The legal status of plant medicines varies by location and substance. I only facilitate ceremonies that comply with local laws and regulations. During our consultation, we'll discuss all legal and safety considerations specific to your situation and location.", }, { question: "How do I know if I'm ready for a ceremony?", answer: "Readiness involves mental, physical, and spiritual preparation. During our required pre-ceremony consultation, we'll assess your readiness together. Not everyone is a candidate for this work, and I take responsibility for ensuring participants are truly prepared.", }, { question: "What support is available after the ceremony?", answer: "Integration is a crucial part of the ceremonial experience. I offer integration sessions to help you process insights and ground your experience. You'll also receive resources and ongoing support as you integrate the wisdom received during ceremony.", }, ], }, { title: "Booking & Policies", faqs: [ { question: "What is your cancellation policy?", answer: "I understand that life happens. Cancellations made 48+ hours in advance receive a full refund or credit. Cancellations within 48 hours may be subject to a 50% fee. No-shows forfeit the full session fee. For ceremonies, special policies apply due to the extensive preparation involved.", }, { question: "Do you offer payment plans?", answer: "Yes, payment plans are available for packages and training programs. Please inquire during booking, and we'll find an arrangement that works for your situation. Healing should be accessible, and I'm committed to working with those who are genuinely called to this work.", }, { question: "How do I book a session?", answer: "You can book directly through our online scheduling system (SimplyBook.me), or reach out via the contact form for custom arrangements. For medicine ceremonies and training programs, please contact us first for a consultation before booking.", }, ], }, ] export function FAQContent() { return (

{faqCategories.map((category, categoryIndex) => (

{category.title}

{category.faqs.map((faq, faqIndex) => ( {faq.question} {faq.answer} ))} ))}

) } [V0_FILE]typescriptreact:file="components/faq/faq-cta.tsx" "use client" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import Link from "next/link" import { MessageCircle, ArrowRight } from "lucide-react" export function FAQCTA() { return (

Still Have Questions?

Can't find the answer you're looking for? We're here to help. Reach out and we'll get back to you as soon as possible.

) } [V0_FILE]typescriptreact:file="app/testimonials/page.tsx" import { Navigation } from "@/components/navigation" import { Footer } from "@/components/footer" import { CosmicBackground } from "@/components/cosmic-background" import { TestimonialsHero } from "@/components/testimonials/testimonials-hero" import { TestimonialsGrid } from "@/components/testimonials/testimonials-grid" import { TestimonialsCTA } from "@/components/testimonials/testimonials-cta" export const metadata = { title: "Testimonials | Miracle The G", description: "Read real stories of transformation and healing from clients who have experienced our spiritual services.", } export default function TestimonialsPage() { return (

) } [V0_FILE]typescriptreact:file="components/testimonials/testimonials-hero.tsx" "use client" import { motion } from "framer-motion" import { Star } from "lucide-react" export function TestimonialsHero() { return (

{[1, 2, 3, 4, 5].map((star) => ( ))}

Voices of Transformation

Real stories from real people who have experienced profound healing and transformation. These testimonials reflect the power of opening yourself to the healing journey.

) } [V0_FILE]typescriptreact:file="components/testimonials/testimonials-cta.tsx" "use client" import { motion } from "framer-motion" import { Button } from "@/components/ui/button" import Link from "next/link" import { ArrowRight, Heart } from "lucide-react" export function TestimonialsCTA() { return (

Ready to Write Your Own Story?

Every transformation begins with a single step. Discover which path is right for you and begin your healing journey today.

) } [V0_FILE]typescriptreact:file="app/blog/page.tsx" import { Navigation } from "@/components/navigation" import { Footer } from "@/components/footer" import { CosmicBackground } from "@/components/cosmic-background" import { BlogHero } from "@/components/blog/blog-hero" import { BlogGrid } from "@/components/blog/blog-grid" import { getBlogPosts } from "@/lib/notion-blog" export const metadata = { title: "Blog | Miracle The G", description: "Explore articles on spiritual healing, Reiki practices, intuitive development, and transformative wisdom.", } export default async function BlogPage() { const posts = await getBlogPosts() return (

) } [V0_FILE]typescriptreact:file="components/blog/blog-hero.tsx" "use client" import { motion } from "framer-motion" import { BookOpen } from "lucide-react" export function BlogHero() { return (

Wisdom & Insights

Dive into articles on spiritual practices, healing modalities, and transformative wisdom. Learn, grow, and deepen your understanding of the healing arts.

) } [V0_FILE]typescriptreact:file="app/shop/page.tsx" import { Navigation } from "@/components/navigation" import { Footer } from "@/components/footer" import { SacredGeometryBG } from "@/components/sacred-geometry-bg" import { ShopProducts } from "@/components/shop/shop-products" export const metadata = { title: "Shop Digital Products | Miracle The G", description: "Explore spiritual resources including Reiki manuals, live readings, and more from Miracle The G.", } export default function ShopPage() { return (

) } [V0_FILE]typescriptreact:file="components/shop/shop-coming-soon.tsx" "use client" import { motion } from "framer-motion" import { LeadCaptureForm } from "@/components/lead-capture-form" import { ShoppingBag, Sparkles, Moon, Star, Flame } from "lucide-react" const upcomingProducts = [ { icon: Sparkles, title: "Healing Crystals", description: "Hand-selected crystals charged with Reiki energy", }, { icon: Flame, title: "Ritual Candles", description: "Intention candles for ceremony and meditation", }, { icon: Moon, title: "Oracle Decks", description: "Custom-designed divination tools", }, { icon: Star, title: "Sacred Tools", description: "Smudge kits, singing bowls, and more", }, ] export function ShopComingSoon() { return (

{/* Header */} Coming Soon

The Sacred Shop

We're carefully curating a collection of sacred tools, healing crystals, and spiritual treasures to support your journey. Be the first to know when we launch.

{/* What's Coming */}

What's Coming

{upcomingProducts.map((product, index) => (

{product.title}

{product.description}

))}

{/* Lead Capture Form */}

) } [V0_FILE]jpg:file="public/images/snake-20-20healer.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/snake%20-%20healer-WItH0bsEDkqepGHKmIF1kI11yCUGDA.jpg" [V0_FILE]jpg:file="public/images/jaguar-20-20shaman.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/jaguar%20-%20shaman-BQHPtbKor5YyPFsBH8SjCIDxzhzpuD.jpg" [V0_FILE]jpg:file="public/images/peacock-20-20oracle.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/peacock%20-%20oracle-UP6grp9yDutgiJcnUiZ8YMmAow8GjQ.jpg" [V0_FILE]jpg:file="public/images/fox-20-20teacher.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/fox%20-%20teacher-jSw9PzxsVgmjD906yIBzqfVriqmVyc.jpg" [V0_FILE]jpg:file="public/images/snake-healer.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/snake%20-%20healer-WItH0bsEDkqepGHKmIF1kI11yCUGDA.jpg" [V0_FILE]jpg:file="public/images/jaguar-shaman.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/jaguar%20-%20shaman-BQHPtbKor5YyPFsBH8SjCIDxzhzpuD.jpg" [V0_FILE]jpg:file="public/images/peacock-oracle.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/peacock%20-%20oracle-UP6grp9yDutgiJcnUiZ8YMmAow8GjQ.jpg" [V0_FILE]jpg:file="public/images/fox-teacher.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/fox%20-%20teacher-jSw9PzxsVgmjD906yIBzqfVriqmVyc.jpg" [V0_FILE]typescriptreact:file="components/journey/explore-deck.tsx" "use client" import { motion } from "framer-motion" import { TarotCard } from "@/components/tarot-card" const cards = [ { title: "THE HEALER", image: "/images/snake-healer1.jpg", description: "In-person Reiki sessions and energy healing for deep restoration, pain relief, and chakra balancing.", href: "/services/healer", }, { title: "THE SHAMAN", image: "/images/jaguar-shaman1.jpg", description: "Sacred plant medicine ceremonies and shamanic rituals for profound transformation and spiritual awakening.", href: "/services/shaman", }, { title: "THE ORACLE", image: "/images/peacock-oracle1.jpg", description: "Psychic readings, tarot consultations, and intuitive guidance to illuminate your path forward.", href: "/services/oracle", }, { title: "THE TEACHER", image: "/images/fox-teacher1.jpg", description: "Reiki certification training and spiritual education to awaken and master your own healing gifts.", href: "/services/teacher", }, ] export function ExploreDeck() { return (

The Sacred Deck

Each card represents a unique path of healing and growth. Click on the card that speaks to your soul.

{cards.map((card, index) => ( ))}

) } [V0_FILE]jpg:file="public/images/snake-healer1.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/snake%20-%20healer1-kjCO5JpQK6c8HvQPJuSEcxQI57qISR.jpg" [V0_FILE]jpg:file="public/images/jaguar-shaman1.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/jaguar%20-%20shaman1-CDhYEyX6lmTKqFOGb8NzXezYIKQ93k.jpg" [V0_FILE]jpg:file="public/images/peacock-oracle1.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/peacock%20-%20oracle1-Pe8idLeVSGm6JjqpB4Yvb1BTbmhYkf.jpg" [V0_FILE]jpg:file="public/images/fox-teacher1.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/fox%20-%20teacher1-QCFbxuOMhMSVGE5izL6nBo97WhTLO8.jpg" [V0_FILE]typescriptreact:file="components/geometric-backdrop.tsx" "use client" import { useRef, useMemo } from "react" import { motion, useScroll, useTransform } from "framer-motion" interface GeometricBackdropProps { variant?: "hero" | "section" | "full" density?: "low" | "medium" | "high" } export function GeometricBackdrop({ variant = "section", density = "medium" }: GeometricBackdropProps) { const containerRef = useRef(null) const { scrollYProgress } = useScroll() // Parallax transforms for different layers const layer1Y = useTransform(scrollYProgress, [0, 1], [0, -300]) const layer2Y = useTransform(scrollYProgress, [0, 1], [0, -150]) const layer3Y = useTransform(scrollYProgress, [0, 1], [0, -450]) const rotation = useTransform(scrollYProgress, [0, 1], [0, 15]) const shapeCount = density === "low" ? 8 : density === "medium" ? 14 : 20 // Generate random shapes const shapes = useMemo( () => Array.from({ length: shapeCount }, (_, i) => ({ id: i, type: ["shard", "circle", "line", "arc"][Math.floor(Math.random() * 4)] as "shard" | "circle" | "line" | "arc", x: Math.random() * 100, y: Math.random() * 100, size: 20 + Math.random() * 80, rotation: Math.random() * 360, opacity: 0.03 + Math.random() * 0.08, layer: Math.floor(Math.random() * 3), })), [shapeCount], ) const layerTransforms = [layer1Y, layer2Y, layer3Y] return (

{/* Base gradient */}

{/* Geometric shapes */} {shapes.map((shape) => ( {shape.type === "shard" && (

)} {shape.type === "circle" && (

)} {shape.type === "line" && (

)} {shape.type === "arc" && ( )} ))} {/* Subtle radial gradients for depth */}

) } [V0_FILE]typescriptreact:file="components/sacred-geometry-bg.tsx" "use client" import { motion, useScroll, useTransform, useSpring } from "framer-motion" /* * Sacred Geometry Background - Refined & Symmetrical * * Clean, intentional geometric patterns that: * - Are perfectly symmetrical and balanced * - Use minimal, elegant line work (never crowded) * - React smoothly to scroll with clear parallax * - Stay very low opacity for accessibility */ export function SacredGeometryBG() { const { scrollYProgress } = useScroll() const smooth = useSpring(scrollYProgress, { stiffness: 50, damping: 20 }) // Clear parallax transforms at different speeds const y1 = useTransform(smooth, [0, 1], ["0%", "-30%"]) const y2 = useTransform(smooth, [0, 1], ["0%", "-50%"]) const y3 = useTransform(smooth, [0, 1], ["0%", "-20%"]) const rotate1 = useTransform(smooth, [0, 1], [0, 15]) const rotate2 = useTransform(smooth, [0, 1], [0, -10]) return (

{/* ═══════════════════════════════════════════════════════════════════ CENTER: Large centered Flower of Life - main focal pattern Perfectly symmetrical, anchored to center ═══════════════════════════════════════════════════════════════════ */} {/* ═══════════════════════════════════════════════════════════════════ TOP LEFT: Simple concentric circles ═══════════════════════════════════════════════════════════════════ */} {/* ═══════════════════════════════════════════════════════════════════ BOTTOM RIGHT: Radiating lines from corner ═══════════════════════════════════════════════════════════════════ */} {/* ═══════════════════════════════════════════════════════════════════ FLOATING ELEMENTS: Small diamonds and stars scattered ═══════════════════════════════════════════════════════════════════ */} {/* Positioned symmetrically */} {[ { x: "15%", y: "20%" }, { x: "85%", y: "20%" }, { x: "10%", y: "70%" }, { x: "90%", y: "70%" }, ].map((pos, i) => (

))} {/* Four-pointed stars */} {[ { x: "25%", y: "45%" }, { x: "75%", y: "45%" }, { x: "50%", y: "85%" }, ].map((pos, i) => ( ))} {/* Subtle gradient overlays for depth */}

) } [V0_FILE]typescriptreact:file="components/home/cta-section.tsx" "use client" import { useRef } from "react" import { motion, useScroll, useTransform } from "framer-motion" import { LeadCaptureForm } from "@/components/lead-capture-form" export function CTASection() { const sectionRef = useRef(null) const { scrollYProgress } = useScroll({ target: sectionRef, offset: ["start end", "end start"], }) // Card reveal on scroll const cardY = useTransform(scrollYProgress, [0, 0.4], ["15%", "0%"]) const cardOpacity = useTransform(scrollYProgress, [0, 0.3], [0, 1]) return (

{/* Card container */}

{/* Corner accents */} {[ "top-3 left-3", "top-3 right-3 -scale-x-100", "bottom-3 left-3 -scale-y-100", "bottom-3 right-3 -scale-100", ].map((pos, i) => ( ))}

) } [V0_FILE]png:file="public/images/samira-portrait.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-pC029w3TKp0LZsfvL4wNLGoPLBI4PP.png" [V0_FILE]png:file="public/images/healing-session.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-hlE5pZzLdGvWSIM8DzL9gM3nxuAuq0.png" [V0_FILE]jpeg:file="public/images/tarot-reading.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image.png-hhxu9643t2W9Alg48Kdd4qpjL98Zpu.jpeg" [V0_FILE]png:file="public/images/sage-ritual.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-A3tSgTfhYLuC3hfwlnhND7cO4o7WY6.png" [V0_FILE]png:file="public/images/cannabis-plant.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-RRnKGDOo1CnIkUtP0FBh1SnKEVRdki.png" [V0_FILE]jpeg:file="public/images/tarot-session-wide.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image.png-xephSY8A7iKWRgfBl0eUeVdfsJv0Qr.jpeg" [V0_FILE]typescriptreact:file="components/contact/contact-hero.tsx" "use client" import { motion } from "framer-motion" export function ContactHero() { return (

Let's Connect

Whether you have questions about our services, want to book a session, or simply want to say hello — I 'd love to hear from you. Every message is read with care.

) } [V0_FILE]typescriptreact:file="components/scroll-to-top.tsx" "use client" import { useEffect } from "react" import { usePathname } from "next/navigation" export function ScrollToTop() { const pathname = usePathname() useEffect(() => { // Smooth scroll to top on route change window.scrollTo({ top: 0, behavior: "smooth" }) }, [pathname]) return null } [V0_FILE]typescriptreact:file="components/about/about-story.tsx" "use client" import { motion } from "framer-motion" export function AboutStory() { return (

{/* My Calling */}

It is my inherited connection to the psychic realm that always guided me along my own healing journey. After many years of experiencing and witnessing miraculous events transpire in my own life and in the lives of others, I knew this was my calling.

The guidance I now offer is a combination of many natural healing modalities with ancient healing medicines. This work is not always easy, but I've seen it set so many people free in mind, body, spirit and soul. There's no way I can imagine my life without the blessing to share what I do with the world as needed.

{/* Why I Do What I Do */}

Why I Do What I Do

Experience has made it clear to me that we all have our own divine mission to fulfill here on earth if we should choose to. It was that realization that made my personal mission quite clear to me and has been the fuel to my fire ever since.

Witnessing the consciousness of an individual's mind, heart and soul expand as they blossom into their true identity is the most beautiful aspect of the work that I do. With each connection, my devotion to my work deepens.

By having the gift to be the mirror reflection for those seeking to truly see and embrace themselves, I intend to shift collective consciousness into vibrations of global harmony, higher levels of conscious awareness, holistic integrity, and genuine community.

{/* Ancestral Gifts */}

Ancestral Gifts

As far back as we can remember, the women in my family have all had the gift of sight along with a few variations of healing modalities specific to each of us individually. So far I have connected the most to the natural gifts of my grandmothers from both my maternal and paternal lineages, which includes my ability to work very intuitively with essential oils, herbs, healing touch, foresight and dream interpretation.

This leaves me with a cultured mix of Indo-Caribbean and South American healing arts and practices passed down for many generations.

After many moons of healing deep ancestral trauma, these gifts become more available to me, which has led me down the path of teaching others how to naturally reclaim their own magickal ancestral inheritances. Learning for myself was only the beginning, I intend to teach these modalities with honor and integrity for many generations to come.

) } [V0_FILE]typescriptreact:file="components/about/about-credentials.tsx" "use client" import { motion } from "framer-motion" const modalities = [ "Reiki Healing of the Usui Rhoyo Lineage", "Tarot, Runes and Oracle readings", "Past Life Readings & Regression", "Guided Meditation & Yoga Nidra", "Facilitating Amphibian & Plant Medicine Ceremonies", "Entity/Paranormal Extraction and Karmic Cord Cutting", ] export function AboutCredentials() { return (

Although many of my gifts were inherited, I still felt it was important for me to expand my knowledge by exploring a plethora of other healing modalities to obtain a greater connection to the mind, body and soul.

Every Healer Has Their Methods and Their Magick...

These modalities include:

{modalities.map((modality, index) => (

{modality} ))}

Today my experience has lead me to focus more specifically on holding and facilitating space for energy healing through a combination of these modalities at once, sometimes even pairing them with sacred plant or amphibian medicine ceremonies.

) } [V0_FILE]typescriptreact:file="lib/sounds.ts" // Minimalist, perceptual sound design using Web Audio API // All sounds are synthesized - no audio file downloads needed type SoundType = "hover" | "select" | "reveal" | "transition" | "success" class SoundManager { private context: AudioContext | null = null private enabled = true private initialized = false private getContext(): AudioContext | null { if (typeof window === "undefined") return null if (!this.context) { try { this.context = new (window.AudioContext || (window as any).webkitAudioContext)() } catch (e) { console.warn("Web Audio API not supported") return null } } // Resume if suspended (browser autoplay policy) if (this.context.state === "suspended") { this.context.resume() } return this.context } initialize() { if (this.initialized) return this.getContext() this.initialized = true } setEnabled(enabled: boolean) { this.enabled = enabled if (typeof window !== "undefined") { localStorage.setItem("soundEnabled", String(enabled)) } } isEnabled(): boolean { if (typeof window !== "undefined" && !this.initialized) { const stored = localStorage.getItem("soundEnabled") if (stored !== null) { this.enabled = stored === "true" } } return this.enabled } play(type: SoundType) { if (!this.enabled) return const ctx = this.getContext() if (!ctx) return switch (type) { case "hover": this.playHover(ctx) break case "select": this.playSelect(ctx) break case "reveal": this.playReveal(ctx) break case "transition": this.playTransition(ctx) break case "success": this.playSuccess(ctx) break } } // Soft, breathy hover sound - very subtle private playHover(ctx: AudioContext) { const oscillator = ctx.createOscillator() const gain = ctx.createGain() const filter = ctx.createBiquadFilter() oscillator.type = "sine" oscillator.frequency.setValueAtTime(800 + Math.random() * 100, ctx.currentTime) oscillator.frequency.exponentialRampToValueAtTime(600, ctx.currentTime + 0.05) filter.type = "lowpass" filter.frequency.setValueAtTime(1200, ctx.currentTime) gain.gain.setValueAtTime(0, ctx.currentTime) gain.gain.linearRampToValueAtTime(0.03, ctx.currentTime + 0.01) gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.05) oscillator.connect(filter) filter.connect(gain) gain.connect(ctx.destination) oscillator.start(ctx.currentTime) oscillator.stop(ctx.currentTime + 0.05) } // Gentle click/tap sound private playSelect(ctx: AudioContext) { const oscillator = ctx.createOscillator() const gain = ctx.createGain() oscillator.type = "sine" oscillator.frequency.setValueAtTime(440, ctx.currentTime) oscillator.frequency.exponentialRampToValueAtTime(220, ctx.currentTime + 0.08) gain.gain.setValueAtTime(0.08, ctx.currentTime) gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.08) oscillator.connect(gain) gain.connect(ctx.destination) oscillator.start(ctx.currentTime) oscillator.stop(ctx.currentTime + 0.08) } // Mystical chime/bell for reveals - more prominent private playReveal(ctx: AudioContext) { const frequencies = [523.25, 659.25, 783.99] // C5, E5, G5 chord frequencies.forEach((freq, i) => { const oscillator = ctx.createOscillator() const gain = ctx.createGain() const filter = ctx.createBiquadFilter() oscillator.type = "sine" oscillator.frequency.setValueAtTime(freq, ctx.currentTime) filter.type = "lowpass" filter.frequency.setValueAtTime(2000, ctx.currentTime) filter.frequency.exponentialRampToValueAtTime(500, ctx.currentTime + 0.8) const delay = i * 0.05 gain.gain.setValueAtTime(0, ctx.currentTime + delay) gain.gain.linearRampToValueAtTime(0.06, ctx.currentTime + delay + 0.02) gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + delay + 0.6) oscillator.connect(filter) filter.connect(gain) gain.connect(ctx.destination) oscillator.start(ctx.currentTime + delay) oscillator.stop(ctx.currentTime + delay + 0.6) }) } // Subtle whoosh for transitions private playTransition(ctx: AudioContext) { const bufferSize = ctx.sampleRate * 0.15 const buffer = ctx.createBuffer(1, bufferSize, ctx.sampleRate) const data = buffer.getChannelData(0) for (let i = 0; i < bufferSize; i++) { data[i] = (Math.random() * 2 - 1) * (1 - i / bufferSize) } const source = ctx.createBufferSource() const gain = ctx.createGain() const filter = ctx.createBiquadFilter() source.buffer = buffer filter.type = "bandpass" filter.frequency.setValueAtTime(1000, ctx.currentTime) filter.frequency.exponentialRampToValueAtTime(400, ctx.currentTime + 0.15) filter.Q.setValueAtTime(1, ctx.currentTime) gain.gain.setValueAtTime(0.04, ctx.currentTime) gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.15) source.connect(filter) filter.connect(gain) gain.connect(ctx.destination) source.start(ctx.currentTime) } // Warm resonant success tone private playSuccess(ctx: AudioContext) { const frequencies = [261.63, 329.63, 392, 523.25] // C4, E4, G4, C5 frequencies.forEach((freq, i) => { const oscillator = ctx.createOscillator() const gain = ctx.createGain() oscillator.type = "sine" oscillator.frequency.setValueAtTime(freq, ctx.currentTime) const delay = i * 0.08 gain.gain.setValueAtTime(0, ctx.currentTime + delay) gain.gain.linearRampToValueAtTime(0.05, ctx.currentTime + delay + 0.03) gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + delay + 0.4) oscillator.connect(gain) gain.connect(ctx.destination) oscillator.start(ctx.currentTime + delay) oscillator.stop(ctx.currentTime + delay + 0.4) }) } } // Singleton instance export const soundManager = new SoundManager() [V0_FILE]typescriptreact:file="app/journey/page.tsx" import { Navigation } from "@/components/navigation" import { Footer } from "@/components/footer" import { CosmicBackground } from "@/components/cosmic-background" import { JourneyOptions } from "@/components/journey/journey-options" export const metadata = { title: "Discover Your Path | Miracle The G", description: "Take our guided quiz or explore our tarot deck to find the perfect healing service for your spiritual journey.", } export default function JourneyPage() { return (

) } [V0_FILE]typescriptreact:file="components/cosmic-background.tsx" "use client" // This component has been consolidated into SpaceBackground // Keeping this file for backwards compatibility with any cached imports export function CosmicBackground() { return null } [V0_FILE]typescriptreact:file="components/sound-toggle.tsx" "use client" import { useState, useEffect } from "react" import { Volume2, VolumeX } from "lucide-react" import { soundManager } from "@/lib/sounds" interface SoundToggleProps { showLabel?: boolean } export function SoundToggle({ showLabel = false }: SoundToggleProps) { const [enabled, setEnabled] = useState(false) const [mounted, setMounted] = useState(false) useEffect(() => { setMounted(true) setEnabled(soundManager.isEnabled()) }, []) const toggle = () => { const newState = !enabled setEnabled(newState) soundManager.setEnabled(newState) if (newState) { soundManager.initialize() soundManager.play("select") } } if (!mounted) return null return ( ) } [V0_FILE]typescriptreact:file="app/services/page.tsx" "use client" import { Navigation } from "@/components/navigation" import { Footer } from "@/components/footer" import { TarotShowcase } from "@/components/home/tarot-showcase" import { SacredGeometryBG } from "@/components/sacred-geometry-bg" export default function ServicesPage() { return (

) } [V0_FILE]typescriptreact:file="components/lead-capture-form.tsx" isQuickEdit="true" "use client" import type React from "react" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Sparkles, Check, AlertCircle, CheckCircle2, Loader2 } from "lucide-react" const seekingOptions = [ "Emotional Healing & Release", "Physical Wellness & Pain Relief", "Spiritual Awakening & Growth", "Guidance & Clarity", "Psychic Readings & Intuitive Insight", "Plant Medicine Ceremonies", "Learning Reiki / Energy Work", "Just Curious / Exploring", ] interface LeadCaptureFormProps { variant?: "default" | "minimal" | "hero" title?: string subtitle?: string } export function LeadCaptureForm({ variant = "default", title = "Begin Your Healing Journey", subtitle = "Join our community and receive guidance on your spiritual path", }: LeadCaptureFormProps) { const [isSubmitting, setIsSubmitting] = useState(false) const [isSubmitted, setIsSubmitted] = useState(false) const [errors, setErrors] = useState>({}) const [touched, setTouched] = useState>({}) const [shakeForm, setShakeForm] = useState(false) const [formData, setFormData] = useState({ name: "", email: "", phone: "", seeking: "", }) const validateName = (name: string) => { if (!name.trim()) return "Name is required" if (name.trim().length < 2) return "Name must be at least 2 characters" return "" } const validateEmail = (email: string) => { if (!email.trim()) return "Email is required" const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ if (!emailRegex.test(email)) return "Please enter a valid email address" return "" } const validatePhone = (phone: string) => { if (!phone.trim()) return "" const phoneRegex = /^[\d\s\-+$$$$]+$/ if (!phoneRegex.test(phone)) return "Please enter a valid phone number" return "" } const handleBlur = (field: string) => { setTouched({ ...touched, [field]: true }) let error = "" if (field === "name") error = validateName(formData.name) else if (field === "email") error = validateEmail(formData.email) else if (field === "phone") error = validatePhone(formData.phone) setErrors({ ...errors, [field]: error }) } const isFieldValid = (field: string) => { return touched[field] && !errors[field] && formData[field as keyof typeof formData] } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() const nameError = validateName(formData.name) const emailError = validateEmail(formData.email) const phoneError = validatePhone(formData.phone) const newErrors = { name: nameError, email: emailError, phone: phoneError, } setErrors(newErrors) setTouched({ name: true, email: true, phone: true }) if (nameError || emailError || phoneError) { setShakeForm(true) setTimeout(() => setShakeForm(false), 500) return } setIsSubmitting(true) await new Promise((resolve) => setTimeout(resolve, 1500)) setIsSubmitting(false) setIsSubmitted(true) } if (isSubmitted) { return (

Welcome to the Journey

Thank you for reaching out. The universe has aligned your path with ours.
We will be in touch soon.

) } return ( {variant !== "minimal" && (

{title}

{subtitle}

)}

Name

{ setFormData({ ...formData, name: e.target.value }) if (touched.name) { setErrors({ ...errors, name: validateName(e.target.value) }) } }} onBlur={() => handleBlur("name")} required className={`bg-input border-border text-foreground placeholder:text-muted-foreground pr-10 transition-all ${ touched.name && errors.name ? "border-red-500 focus-visible:ring-red-500" : "" } ${isFieldValid("name") ? "border-green-500 focus-visible:ring-green-500" : ""}`} /> {isFieldValid("name") && ( )} {touched.name && errors.name && ( )}

{touched.name && errors.name && ( {errors.name} )}

{ setFormData({ ...formData, email: e.target.value }) if (touched.email) { setErrors({ ...errors, email: validateEmail(e.target.value) }) } }} onBlur={() => handleBlur("email")} required className={`bg-input border-border text-foreground placeholder:text-muted-foreground pr-10 transition-all ${ touched.email && errors.email ? "border-red-500 focus-visible:ring-red-500" : "" } ${isFieldValid("email") ? "border-green-500 focus-visible:ring-green-500" : ""}`} /> {isFieldValid("email") && ( )} {touched.email && errors.email && ( )}

{touched.email && errors.email && ( {errors.email} )}

Phone (Optional)

{ setFormData({ ...formData, phone: e.target.value }) if (touched.phone) { setErrors({ ...errors, phone: validatePhone(e.target.value) }) } }} onBlur={() => handleBlur("phone")} className={`bg-input border-border text-foreground placeholder:text-muted-foreground pr-10 transition-all ${ touched.phone && errors.phone ? "border-red-500 focus-visible:ring-red-500" : "" } ${isFieldValid("phone") ? "border-green-500 focus-visible:ring-green-500" : ""}`} /> {isFieldValid("phone") && ( )} {touched.phone && errors.phone && ( )}

{touched.phone && errors.phone && ( {errors.phone} )}

What are you seeking?

) } [V0_FILE]typescriptreact:file="components/testimonials/testimonials-grid.tsx" isQuickEdit="true" "use client" import { useState } from "react" import { motion } from "framer-motion" import { Quote } from "lucide-react" const allTestimonials = [ { name: "Randolph", location: "London, UK", text: "I'm just going to share a quick testimony about my experience with Samira. So it was the very first time for me to do a Reiki session and this Reiki session with Samira was informative, it was eye opening and it really showed me a lot about myself. And not only that, she also shared with me ways to improve on areas that she found that really need improving on and for that I am forever grateful. So I encourage you, if you're looking to bare yourself from the inside out, Samira is the real deal.", service: "Reiki Healing", }, { name: "Latoya", location: "Toronto, ON", text: "If you believe that the universe conspires to bring certain people into your life then you know exactly what I'm talking about! I met Samira at a time when I was sort of looking for a bit of direction in my life and trust me! From the moment that I messaged her inquiring about her services, to the day of my session she made it such a smooth and easy process. The day of my session she welcomed me with the biggest warmest hug of a lifetime. She had me within that moment! The warmth, the genuineness, the sincerity, everything emanating from this girl was just so pure! Moving on to the session, the atmosphere, the sunlight the crystals, the vegetation, the whole set up was a vibe! It was a vibe and I was able to be so open and ready to let go and to allow her to work her healing magic on me. It was beautiful! Now if you're ever in need of a Reiki session hit up my girl! The most beautiful, genuine, loving soul you'll ever meet!", service: "Reiki Healing", }, { name: "Gabriel", location: "Toronto, ON", text: "I would definitely recommend Samira, I found her session was very relaxing and insightful. There's nothing to lose in trying it so you might as well try it, because you never know what it could do for you!", service: "Reiki Session", }, { name: "Temi", location: "Toronto, ON", text: "Samira is a one of a kind being spiritual therapist. A session with her can be easily described as gentle, warm, intense, honest and very grounding. She has been a friend and a trusted spiritual advisor of mine for at least 6 yrs now, every session I've had with her up to date has immaculately manifested itself. I always remain open and able to receive authentic powerful messages/downloads with her assistance. Sessions with her is truly spiritual therapy for me. It reminds me that that the truth isn't always pretty but its damn sure crucial to our spiritual growth. Thank you.", service: "Spiritual Therapy", }, { name: "Omie", location: "Costa Rica", text: "I was very fortunate to have Samira, her beautiful presence and energy grace my home, and the work we did together left me feeling really wonderful and clear and open and shining. She gave me some incredible information too, that allowed me to take that energy and keep with me and at the same time protect myself. She truly activated the healer within me and it was a great experience. And when she left my home, it was a clearing energy that I had in my house as well. It wasn't just something that I felt within me but it was also something I felt within my home. Keep doing this beautiful wonderful work! I love you!", service: "Healing Session", }, { name: "Rebecca", location: "Montreal, QC", text: 'Samira knew where certain things in my life had caused the most pain. Without divulging any fine details about my life, Samira just knew the certain "themes" that surrounded my pain. She went in depth about the healing work she had done on all seven of my chakras. Further, she also gave me advice and other things I could do to heal the chakras that were so blocked. Overall, it was truly a magical experience – life-changing I would say! After my session, I found the strength and courage to do certain things in my life that I wouldn\'t have known otherwise I needed to do!', service: "Reiki Healing", }, { name: "Francesca", location: "New York", text: "Hi everyone! I just wanted to share a little bit about my experience with Samira and doing distance Reiki healing. There may be some skepticism about doing things in a distance capacity but for me, I have reaped all of the benefits that I would feel in person. I leave every single session feeling lighter, more clear, and more connected to my body. And I have a bigger and clearer understand about things that I need to change in order to make a larger shift in my life. We started working at a distance capacity because at the time I was caring for my mom in New York. So it was too difficult for me to arrange anything in person because I wasn't in the country and since then I've maintained I guess our distance relationship and it's been wonderful! The shift that I've noticed in my life and the gifts that she's given me just keep on giving! So if you're hesitant, take this as your sign to try and see what opens up for you.", service: "Distance Reiki", }, ] const services = [ "All Services", "Reiki Healing", "Reiki Session", "Spiritual Therapy", "Healing Session", "Distance Reiki", ] export function TestimonialsGrid() { const [filter, setFilter] = useState("All Services") const filteredTestimonials = filter === "All Services" ? allTestimonials : allTestimonials.filter((t) => t.service === filter) return (

{/* Filter Buttons */} {services.map((service) => ( ))} {/* Testimonials Grid */}

{filteredTestimonials.map((testimonial, index) => (

“{testimonial.text}”

{testimonial.name}

{testimonial.location}

{testimonial.service}

))}

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isQuickEdit="true" import type React from "react" import type { Metadata } from "next" import { Analytics } from "@vercel/analytics/next" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" import { ScrollToTop } from "@/components/scroll-to-top" import { SpaceBackground } from "@/components/space-background" import { Playfair_Display, Inter, JetBrains_Mono, DM_Sans as V0_Font_DM_Sans, Space_Mono as V0_Font_Space_Mono, Source_Serif_4 as V0_Font_Source_Serif_4, } from "next/font/google" // Initialize fonts const _dmSans = V0_Font_DM_Sans({ subsets: ["latin"], weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900", "1000"], }) const _spaceMono = V0_Font_Space_Mono({ subsets: ["latin"], weight: ["400", "700"] }) const _sourceSerif_4 = V0_Font_Source_Serif_4({ subsets: ["latin"], weight: ["200", "300", "400", "500", "600", "700", "800", "900"], }) const playfair = Playfair_Display({ subsets: ["latin"], weight: ["400", "500", "600", "700"], variable: "--font-playfair", }) const inter = Inter({ subsets: ["latin"], variable: "--font-inter", }) const jetbrains = JetBrains_Mono({ subsets: ["latin"], variable: "--font-jetbrains", }) export const metadata: Metadata = { title: "Miracle The G | Spiritual Healing & Psychic Services", description: "Discover your path with Samira - Certified Reiki Master, Shamanic Healer, and Psychic Medium. Experience transformative healing through Reiki, plant medicine ceremonies, tarot readings, and spiritual guidance.", keywords: "reiki, spiritual healing, tarot readings, shamanic healing, psychic medium, plant medicine, ayahuasca, energy healing", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isQuickEdit="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); /* ═══════════════════════════════════════════════════════════════════════════ MONOCHROME TAROT DESIGN SYSTEM Base: High contrast grayscale (vintage printed card aesthetic) Interaction: Reveal colors from tarot cards (violet, magenta, gold, teal) ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ─── Monochrome Base ─── */ --ink: #1a1a1a; --paper: #f8f6f3; --paper-warm: #f5f2ed; --mid-gray: #a8a29e; --light-gray: #e7e5e4; /* ─── Theme Tokens ─── */ --background: var(--paper); --foreground: var(--ink); --card: #ffffff; --card-foreground: var(--ink); --popover: #ffffff; --popover-foreground: var(--ink); --primary: var(--ink); --primary-foreground: var(--paper); --secondary: var(--light-gray); --secondary-foreground: var(--ink); --muted: var(--paper-warm); --muted-foreground: #78716c; --accent: var(--mid-gray); --accent-foreground: var(--ink); --border: #d6d3d1; --input: #d6d3d1; --ring: var(--ink); --radius: 2px; --destructive: #991b1b; --destructive-foreground: #ffffff; /* ─── Tarot Reveal Colors (on hover/interaction) ─── */ --tarot-violet: #7c5cbf; --tarot-magenta: #a855a1; --tarot-gold: #c9a227; --tarot-teal: #2d8a8a; --tarot-indigo: #5b5ea6; --tarot-glow: rgba(124, 92, 191, 0.15); /* ─── Sacred Geometry Lines ─── */ --geo-stroke: rgba(26, 26, 26, 0.08); --geo-stroke-medium: rgba(26, 26, 26, 0.05); --geo-stroke-light: rgba(26, 26, 26, 0.03); --geo-fill: rgba(26, 26, 26, 0.02); /* Sidebar */ --sidebar: var(--paper-warm); --sidebar-foreground: var(--ink); --sidebar-primary: var(--ink); --sidebar-primary-foreground: var(--paper); --sidebar-accent: var(--mid-gray); --sidebar-accent-foreground: var(--ink); --sidebar-border: var(--border); --sidebar-ring: var(--ink); /* Charts */ --chart-1: var(--tarot-violet); --chart-2: var(--tarot-magenta); --chart-3: var(--tarot-teal); --chart-4: var(--tarot-gold); --chart-5: var(--tarot-indigo); } /* ─── Dark Mode: Deep Indigo ─── */ .dark { --ink: #e8e4ef; --paper: #0d0b14; --paper-warm: #12101a; --mid-gray: #6b6782; --light-gray: #2a2640; --background: var(--paper); --foreground: var(--ink); --card: #16141f; --card-foreground: var(--ink); --popover: #16141f; --popover-foreground: var(--ink); --primary: var(--ink); --primary-foreground: var(--paper); --secondary: var(--light-gray); --secondary-foreground: var(--ink); --muted: var(--paper-warm); --muted-foreground: #8b86a0; --accent: var(--mid-gray); --accent-foreground: var(--ink); --border: #2f2b3d; --input: #2f2b3d; --ring: var(--ink); --destructive: #dc2626; --destructive-foreground: #ffffff; /* ─── Tarot Colors: Brighter for dark ─── */ --tarot-violet: #a594d0; --tarot-magenta: #c77daa; --tarot-gold: #d4b85a; --tarot-teal: #5cb8a8; --tarot-indigo: #7b80c4; --tarot-glow: rgba(165, 148, 208, 0.2); /* ─── Sacred Geometry: Visible on dark ─── */ --geo-stroke: rgba(165, 148, 208, 0.1); --geo-stroke-medium: rgba(165, 148, 208, 0.06); --geo-stroke-light: rgba(165, 148, 208, 0.03); --geo-fill: rgba(165, 148, 208, 0.02); --sidebar: var(--paper-warm); --sidebar-foreground: var(--ink); --sidebar-border: var(--border); } /* Add smooth theme transition */ html { scroll-behavior: smooth; } html.transitioning, html.transitioning *, html.transitioning *::before, html.transitioning *::after { transition: background-color 500ms ease-out, color 500ms ease-out, border-color 500ms ease-out, fill 500ms ease-out, stroke 500ms ease-out, box-shadow 500ms ease-out !important; } /* Base transition for theme changes */ body, .bg-background, .bg-card, .bg-muted, .text-foreground, .text-muted-foreground, .border-border { transition: background-color 400ms ease-out, color 400ms ease-out, border-color 400ms ease-out; } @theme inline { --font-sans: "Inter", "Inter Fallback", system-ui, sans-serif; --font-serif: "Playfair Display", "Playfair Display Fallback", Georgia, serif; --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", monospace; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --radius-sm: calc(var(--radius) - 1px); --radius-md: var(--radius); --radius-lg: calc(var(--radius) + 2px); --radius-xl: calc(var(--radius) + 4px); /* Tarot colors exposed to Tailwind */ --color-tarot-violet: var(--tarot-violet); --color-tarot-magenta: var(--tarot-magenta); --color-tarot-gold: var(--tarot-gold); --color-tarot-teal: var(--tarot-teal); --color-tarot-indigo: var(--tarot-indigo); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground antialiased; } } /* ═══════════════════════════════════════════════════════════════════════════ TAROT INTERACTIVE STATES Monochrome base → Color reveal on interaction ═══════════════════════════════════════════════════════════════════════════ */ .tarot-card-frame { transition: transform 280ms ease-out, box-shadow 280ms ease-out, border-color 280ms ease-out; } .tarot-card-frame:hover { transform: translateY(-6px); box-shadow: 0 20px 50px var(--tarot-glow); } /* Button that reveals color */ .btn-reveal { position: relative; background: transparent; border: 1px solid var(--foreground); color: var(--foreground); transition: all 250ms ease-out; overflow: hidden; } .btn-reveal::before { content: ""; position: absolute; inset: 0; background: var(--tarot-violet); transform: scaleX(0); transform-origin: left; transition: transform 250ms ease-out; z-index: -1; } .btn-reveal:hover { border-color: var(--tarot-violet); color: white; } .btn-reveal:hover::before { transform: scaleX(1); } /* Link with color underline reveal */ .link-reveal { position: relative; color: var(--muted-foreground); transition: color 200ms ease-out; } .link-reveal::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--tarot-violet); transition: width 250ms ease-out; } .link-reveal:hover { color: var(--tarot-violet); } .link-reveal:hover::after { width: 100%; } /* Panel with color border reveal */ .panel-reveal { background: var(--card); border: 1px solid var(--border); transition: all 250ms ease-out; } .panel-reveal:hover { border-color: var(--tarot-violet); box-shadow: 0 0 40px var(--tarot-glow); } /* ═══════════════════════════════════════════════════════════════════════════ GEOMETRY ANIMATIONS ═══════════════════════════════════════════════════════════════════════════ */ @keyframes rotate-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes rotate-reverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } @keyframes pulse-subtle { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } @keyframes float-gentle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .animate-rotate-slow { animation: rotate-slow 120s linear infinite; } .animate-rotate-reverse { animation: rotate-reverse 90s linear infinite; } .animate-pulse-subtle { animation: pulse-subtle 6s ease-in-out infinite; } .animate-float-gentle { animation: float-gentle 8s ease-in-out infinite; } /* ═══════════════════════════════════════════════════════════════════════════ SCROLLBAR ═══════════════════════════════════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--background); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } /* ═══════════════════════════════════════════════════════════════════════════ ENHANCED BUTTON INTERACTIONS Consistent hover, active, focus states with ripple effects ═══════════════════════════════════════════════════════════════════════════ */ /* Adding ripple effect animation */ @keyframes ripple { 0% { transform: scale(0); opacity: 0.6; } 100% { transform: scale(2.5); opacity: 0; } } /* Base button interaction styles */ .btn-interactive { position: relative; overflow: hidden; transition: all 200ms ease-out; cursor: pointer; } .btn-interactive:hover { transform: translateY(-2px); } .btn-interactive:active { transform: translateY(0) scale(0.98); } .btn-interactive:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } /* Ripple effect on click */ .btn-ripple { position: relative; overflow: hidden; } .btn-ripple::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.5); transform: translate(-50%, -50%); pointer-events: none; } .btn-ripple:active::after { width: 100%; height: 100%; animation: ripple 0.6s ease-out; } /* Primary CTA button with enhanced states */ .btn-cta { position: relative; overflow: hidden; transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; } .btn-cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent); transform: translateX(-100%); transition: transform 300ms ease-out; } .btn-cta:hover::before { transform: translateX(100%); } .btn-cta:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); } .btn-cta:active { transform: translateY(0) scale(0.98); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .btn-cta:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; } /* Ghost button with subtle hover */ .btn-ghost-enhanced { position: relative; transition: all 200ms ease-out; cursor: pointer; } .btn-ghost-enhanced::before { content: ""; position: absolute; inset: 0; background: var(--muted); opacity: 0; transition: opacity 200ms ease-out; border-radius: inherit; } .btn-ghost-enhanced:hover::before { opacity: 1; } .btn-ghost-enhanced:hover { transform: translateX(4px); } .btn-ghost-enhanced:active { transform: translateX(2px) scale(0.98); } /* Icon button with scale effect */ .btn-icon-interactive { transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; } .btn-icon-interactive:hover { transform: scale(1.1); background: var(--muted); } .btn-icon-interactive:active { transform: scale(0.95); } .btn-icon-interactive:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: inherit; } /* Link button with underline animation */ .btn-link-animated { position: relative; transition: color 200ms ease-out; cursor: pointer; } .btn-link-animated::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: currentColor; transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1); } .btn-link-animated:hover::after { width: 100%; } /* Ensure all interactive elements have proper cursor */ button, [role="button"], [type="button"], [type="submit"], a, select, [tabindex]:not([tabindex="-1"]) { cursor: pointer; } button:disabled, [role="button"][aria-disabled="true"], [disabled] { cursor: not-allowed; opacity: 0.5; } /* Focus visible states for accessibility */ *:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } /* Remove focus outline for mouse users */ *:focus:not(:focus-visible) { outline: none; } [V0_FILE]typescriptreact:file="components/acuity-booking-modal.tsx" isQuickEdit="true" "use client" import { useEffect, useState } from "react" import { X } from "lucide-react" import { motion, AnimatePresence } from "framer-motion" import { Button } from "@/components/ui/button" interface AcuityBookingModalProps { isOpen: boolean onClose: () => void acuityUrl: string | { inPerson?: string; online?: string } serviceTitle?: string } export function AcuityBookingModal({ isOpen, onClose, acuityUrl, serviceTitle }: AcuityBookingModalProps) { const [mounted, setMounted] = useState(false) const [selectedUrl, setSelectedUrl] = useState(null) const [showSelection, setShowSelection] = useState(false) useEffect(() => { setMounted(true) }, []) useEffect(() => { if (isOpen) { document.body.style.overflow = "hidden" // If acuityUrl is a string, show it directly if (typeof acuityUrl === "string") { setSelectedUrl(acuityUrl) setShowSelection(false) } // If acuityUrl is an object, determine if we need selection screen else { const hasInPerson = !!acuityUrl.inPerson const hasOnline = !!acuityUrl.online if (hasInPerson && hasOnline) { setShowSelection(true) setSelectedUrl(null) } else if (hasInPerson) { setSelectedUrl(acuityUrl.inPerson || null) setShowSelection(false) } else if (hasOnline) { setSelectedUrl(acuityUrl.online || null) setShowSelection(false) } } } else { document.body.style.overflow = "" setSelectedUrl(null) setShowSelection(false) } return () => { document.body.style.overflow = "" } }, [isOpen, acuityUrl]) const handleSelection = (type: "inPerson" | "online") => { if (typeof acuityUrl === "object") { const url = type === "inPerson" ? acuityUrl.inPerson : acuityUrl.online if (url) { setSelectedUrl(url) setShowSelection(false) } } } if (!mounted) return null return ( {isOpen && ( e.stopPropagation()} >

{selectedUrl && showSelection === false && typeof acuityUrl === "object" && ( )}

{showSelection ? "Choose Your Session Type" : "Book a Session"}

{showSelection ? (

{serviceTitle && (

Select how you'd like to experience {serviceTitle}

)}

{typeof acuityUrl === "object" && acuityUrl.inPerson && ( )} {typeof acuityUrl === "object" && acuityUrl.online && ( )}

) : ( <>

{selectedUrl && (