[V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" export function Footer() { return ( ) } [V0_FILE]typescriptreact:file="app/quiz/page.tsx" isMerged="true" import { Header } from "@/components/header" import { QuizContent } from "@/components/quiz-content" import { Footer } from "@/components/footer" export default function QuizPage() { return (

) } [V0_FILE]typescriptreact:file="tailwind.config.ts" isMerged="true" 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" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]png:file="public/dr-heath-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/dr-heath-logo-ed03lPK8uLQ6LWSgALvhzq3N22y12Y.png" isMerged="true" [V0_FILE]png:file="public/images/sleep-bg.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/sleep-bg-EyRu472mj21J7cVqTJPVcmTT1Q9HFo.png" isMerged="true" [V0_FILE]png:file="public/images/logo-dr-heath.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/b0041947a4b75a0caa19cc307c69e336c240ef4f-JUDxqsSYjLxmjhWsHNSe7sy4GVxKAs.png" isMerged="true" [V0_FILE]plaintext:file="public/sounds/points-earned.mp3" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/sons-wY4c9tQSkwWic3TjEHFc7qhUGnVQPe.MP3" isMerged="true" [V0_FILE]json:file="package.json" type="code" isMerged="true" { "dependencies": { "canvas-confetti": "^1.6.0", "framer-motion": "^10.16.4" } } [V0_FILE]plaintext:file="public/sounds/applause.mp3" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Som%20Palmas-cpBQVwcsMwK4ty3XrJkX69fHIXALuK.MP3" isMerged="true" [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { Header } from "@/components/header" import { RegistrationForm } from "@/components/registration-form" import { Footer } from "@/components/footer" export default function HomePage() { return (

) } [V0_FILE]typescriptreact:file="app/diagnostic/page.tsx" isMerged="true" import { Header } from "@/components/header" import { DiagnosticSection } from "@/components/diagnostic-section" import { Footer } from "@/components/footer" export default function DiagnosticPage() { return (

) } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @font-face { font-family: "Gotham"; src: url("/fonts/Gotham-Book.woff2") format("woff2"); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "Gotham"; src: url("/fonts/Gotham-Bold.woff2") format("woff2"); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: "Gotham"; src: url("/fonts/Gotham-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } :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: 262 83.3% 57.8%; --primary-foreground: 210 40% 98%; --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: 262 83.3% 57.8%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 262 83.3% 57.8%; --radius: 0.5rem; } .dark { --background: 240 10% 3.9%; --foreground: 0 0% 98%; --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 262 83.3% 57.8%; --primary-foreground: 0 0% 98%; --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; --accent: 262 83.3% 57.8%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; --border: 240 3.7% 15.9%; --input: 240 3.7% 15.9%; --ring: 262 83.3% 57.8%; } body { font-family: "Gotham", sans-serif; background: linear-gradient(to bottom, #000000, #1a1a2e, #16213e); color: white; min-height: 100vh; } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } .badge { @apply inline-flex items-center justify-center px-3 py-1 text-xs font-medium rounded-full; } .badge-primary { @apply bg-primary text-primary-foreground; } .badge-secondary { @apply bg-blue-600 text-white; } .badge-tertiary { @apply bg-purple-800 text-white; } .progress-container { @apply w-full h-4 bg-gray-700 rounded-full overflow-hidden; } .progress-bar { @apply h-full bg-gradient-to-r from-purple-600 via-blue-500 to-purple-400 transition-all duration-500; } .quiz-option { @apply relative p-4 border-2 border-blue-500 rounded-lg cursor-pointer transition-all duration-300 hover:border-primary hover:bg-primary/10 flex items-center justify-center; } .quiz-option.selected { @apply border-primary bg-primary/20; } .quiz-option.disabled { @apply opacity-50 cursor-not-allowed hover:border-blue-500 hover:bg-transparent; } .points-animation { animation: points-pulse 1s ease-in-out; } @keyframes points-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } .sleep-bg { background-image: url("/images/sleep-bg.png"); background-size: cover; background-position: center; position: relative; } .sleep-bg::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(26, 26, 46, 0.9)); z-index: 1; } .sleep-bg > * { position: relative; z-index: 2; } [V0_FILE]typescriptreact:file="components/checkout-form.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { useRouter } from "next/navigation" import { PointsDisplay } from "@/components/points-display" import { Badge } from "@/components/ui/badge" import { CheckCircle, Lock } from "lucide-react" export function CheckoutForm() { const router = useRouter() const [formData, setFormData] = useState({ name: "", email: "", phone: "", }) const [isSubmitting, setIsSubmitting] = useState(false) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) // Simulate form submission setTimeout(() => { // Store user data in localStorage localStorage.setItem("userData", JSON.stringify(formData)) // Redirect to success page router.push("/success") }, 2000) } return (

Não perca essa chance única de transformar suas noites!

Preencha seus dados abaixo para garantir seu acesso com desconto e todos os bônus.

Seus Dados

Resumo do Pedido

Método S.O.N.O. R$67,00

Desconto -R$20,10

Total

R$46,90 30% OFF

O que você vai receber:

Curso Completo Método S.O.N.O.
3 Áudios Guiados para relaxamento
Lista de Alimentos e Produtos Naturais
Planilha de Monitoramento Diário

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next/dist/lib/metadata/types/metadata-interface" import { Inter } from "next/font/google" import "./globals.css" import { ThemeProvider } from "@/components/theme-provider" import { PixelScript } from "@/components/pixel-script" import { PageViewTracker } from "@/components/page-view-tracker" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Método S.O.N.O. - Transforme Suas Noites", description: "Descubra como melhorar seu sono naturalmente com o Método S.O.N.O.", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/success/page.tsx" isEdit="true" isMerged="true" import { Header } from "@/components/header" import { SuccessContent } from "@/components/success-content" import { Footer } from "@/components/footer" export default function SuccessPage() { return (

) } [V0_FILE]typescriptreact:file="app/error.tsx" isMerged="true" "use client" import { useEffect } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { useRouter } from "next/navigation" export default function ErrorPage({ error, reset, }: { error: Error & { digest?: string } reset: () => void }) { const router = useRouter() useEffect(() => { // Log the error to an error reporting service console.error("Application error:", error) }, [error]) return (

Ops! Algo deu errado.

Encontramos um problema ao carregar esta página. Por favor, tente novamente ou volte para a página inicial.

) } [V0_FILE]typescript:file="utils/session-manager.ts" isEdit="true" isMerged="true" /** * Streamlined utility functions for managing user sessions */ // Generate a unique session ID export function generateSessionId(): string { return `session_${Date.now()}_${Math.random().toString(36).substring(2, 9)}` } // Initialize or get current session export function initializeSession(): string { let sessionId = localStorage.getItem("userSessionId") if (!sessionId) { sessionId = generateSessionId() localStorage.setItem("userSessionId", sessionId) } return sessionId } // Reset user progress data export function resetUserProgress(): void { // Clear all progress-related data const keysToRemove = ["clarityPoints", "selectedOption", "userRanking", "userBadge", "questionsAnswered"] keysToRemove.forEach((key) => localStorage.removeItem(key)) // Generate a new session ID const sessionId = generateSessionId() localStorage.setItem("userSessionId", sessionId) localStorage.setItem("resetProgress", "true") } [V0_FILE]typescript:file="utils/pixel-tracker.ts" isEdit="true" isMerged="true" // Tipos para os eventos do pixel export type PixelEvent = | "PageView" | "Lead" | "StartQuiz" | "QuizProgress" | "QuizComplete" | "ViewContent" | "AddToCart" // Interface para parâmetros adicionais export interface PixelEventParams { [key: string]: string | number | boolean | object } // Função para rastrear eventos export function trackPixelEvent(eventName: PixelEvent, params?: PixelEventParams): void { if (typeof window === "undefined") return const utmify = (window as any).utmify if (utmify) { try { utmify.track(eventName, params || {}) } catch (error) { console.error(`[Pixel] Error tracking event ${eventName}:`, error) } } else { // Adiciona o evento a uma fila para ser processado quando o pixel estiver carregado if (!(window as any)._pixelEventQueue) { ;(window as any)._pixelEventQueue = [] } ;(window as any)._pixelEventQueue.push({ eventName, params }) } } // Função para processar a fila de eventos quando o pixel estiver carregado export function processPixelEventQueue(): void { if (typeof window === "undefined") return const queue = (window as any)._pixelEventQueue const utmify = (window as any).utmify if (utmify && Array.isArray(queue) && queue.length > 0) { queue.forEach((event: { eventName: PixelEvent; params?: PixelEventParams }) => { trackPixelEvent(event.eventName, event.params) }) // Limpa a fila ;(window as any)._pixelEventQueue = [] } } [V0_FILE]typescript:file="components/page-view-tracker.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useRef } from "react" import { usePathname } from "next/navigation" import { trackPixelEvent } from "@/utils/pixel-tracker" export function PageViewTracker() { const pathname = usePathname() const prevPathname = useRef(null) useEffect(() => { // Evita rastrear a mesma página várias vezes if (pathname !== prevPathname.current) { trackPixelEvent("PageView", { path: pathname, title: document.title, }) prevPathname.current = pathname } }, [pathname]) return null } [V0_FILE]typescript:file="components/points-popup.tsx" isEdit="true" isMerged="true" "use client" import { motion } from "framer-motion" import { useEffect } from "react" interface PointsPopupProps { points: number } export function PointsPopup({ points }: PointsPopupProps) { useEffect(() => { // Create and play audio const audio = new Audio("/sounds/points-earned.mp3") audio.volume = 0.7 audio.play().catch(() => { // Handle autoplay restrictions - silent fail }) // Cleanup return () => { audio.pause() } }, []) return (

Parabéns!

Você ganhou:

+{points} Pontos de Clareza

) } [V0_FILE]typescript:file="components/congratulations-popup.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" import { motion, AnimatePresence } from "framer-motion" import confetti from "canvas-confetti" export function CongratulationsPopup() { const [isVisible, setIsVisible] = useState(true) const audioRef = useRef(null) const confettiTriggeredRef = useRef(false) useEffect(() => { // Create audio element audioRef.current = new Audio("/sounds/applause.mp3") audioRef.current.volume = 0.7 audioRef.current.play().catch(() => { // Handle autoplay restrictions - silent fail }) // Trigger confetti if (!confettiTriggeredRef.current) { confettiTriggeredRef.current = true triggerConfetti() } // Hide popup after 3 seconds const timer = setTimeout(() => { setIsVisible(false) }, 3000) return () => { clearTimeout(timer) if (audioRef.current) { audioRef.current.pause() audioRef.current = null } } }, []) const triggerConfetti = () => { const duration = 3 * 1000 const animationEnd = Date.now() + duration const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: 0 } function randomInRange(min: number, max: number) { return Math.random() * (max - min) + min } const interval = setInterval(() => { const timeLeft = animationEnd - Date.now() if (timeLeft <= 0) { clearInterval(interval) return } const particleCount = 50 * (timeLeft / duration) confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 }, }) confetti({ ...defaults, particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 }, }) }, 250) } return ( {isVisible && (

Parabéns pela sua conquista! Você desbloqueou uma oferta exclusiva! 🏆

)} ) } [V0_FILE]typescript:file="components/header.tsx" isEdit="true" isMerged="true" "use client" import Image from "next/image" import Link from "next/link" import { useEffect, useState } from "react" import { PointsPopup } from "./points-popup" export function Header() { const [showPopup, setShowPopup] = useState(false) const [popupPoints, setPopupPoints] = useState(0) useEffect(() => { // Listen for custom event to show popup const handleShowPopup = (event: CustomEvent) => { setPopupPoints(event.detail.points) setShowPopup(false) // Small timeout to ensure component is unmounted before showing again setTimeout(() => { setShowPopup(true) // Hide popup after 3 seconds const timer = setTimeout(() => { setShowPopup(false) }, 3000) return () => clearTimeout(timer) }, 50) } window.addEventListener("showPointsPopup", handleShowPopup as EventListener) return () => { window.removeEventListener("showPointsPopup", handleShowPopup as EventListener) } }, []) return ( <>

Método S.O.N.O.

{showPopup && (

)} ) } [V0_FILE]typescript:file="components/registration-form.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { useRouter } from "next/navigation" import { ArrowRight } from "lucide-react" import { trackPixelEvent } from "@/utils/pixel-tracker" import { safelyRetrieveData, safelyStoreData } from "@/utils/data-validator" import { resetUserProgress } from "@/utils/session-manager" export function RegistrationForm() { const router = useRouter() const [formData, setFormData] = useState({ name: "", email: "", phone: "", }) const [isSubmitting, setIsSubmitting] = useState(false) const [previousUser, setPreviousUser] = useState(null) useEffect(() => { // Track form view trackPixelEvent("ViewContent", { content_name: "registration_form", content_type: "form", }) // Check for previous user const userData = safelyRetrieveData<{ email: string } | null>("userData", null) if (userData && userData.email) { setPreviousUser(userData.email) } }, []) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) try { // Check if this is a new user let isNewUser = true const userData = safelyRetrieveData<{ email: string } | null>("userData", null) if (userData) { isNewUser = userData.email !== formData.email } // Reset progress for new users if (isNewUser) { resetUserProgress() } // Store user data safelyStoreData("userData", formData) // Track lead event trackPixelEvent("Lead", { content_name: "registration_form", content_category: "form_submission", status: "success", user_data: { em: formData.email, ph: formData.phone, }, }) // Redirect after delay setTimeout(() => { router.push("/diagnostic") }, 1000) } catch (error) { setIsSubmitting(false) alert("Ocorreu um erro ao processar seu cadastro. Por favor, tente novamente.") } } return (

Descubra Como Transformar Suas Noites e Despertar com Energia

Método S.O.N.O. - A Solução Natural para Insônia

Preencha seus dados abaixo para iniciar sua jornada rumo a noites tranquilas e dias produtivos.

Seus Dados {previousUser && (

Nota: Iniciar com um email diferente de {previousUser} irá resetar seu progresso anterior.

)}

+10.000

Pessoas já transformaram seu sono

97%

Relatam melhora significativa

7 dias

Para ver os primeiros resultados

) } [V0_FILE]typescript:file="components/success-content.tsx" isEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { CheckCircle, Download } from "lucide-react" import Link from "next/link" import { trackPixelEvent } from "@/utils/pixel-tracker" import { safelyRetrieveData, getUserFirstName } from "@/utils/data-validator" export function SuccessContent() { const [userData, setUserData] = useState<{ name: string; email: string } | null>(null) const [firstName, setFirstName] = useState("") useEffect(() => { // Get user data const storedUserData = safelyRetrieveData<{ name: string; email: string } | null>("userData", null) setUserData(storedUserData) // Get first name setFirstName(getUserFirstName()) // Track page view trackPixelEvent("ViewContent", { content_name: "success_page", content_type: "success", }) }, []) const handleDownload = (itemName: string) => { // Track download trackPixelEvent("ViewContent", { content_name: itemName, content_category: "download", content_type: "material", }) } return (

Parabéns, {firstName || "Cliente"}!

Sua compra foi realizada com sucesso!

Enviamos um e-mail para {userData?.email || "seu e-mail"}{" "} com as instruções de acesso ao Método S.O.N.O. e todos os bônus.

Seus Materiais

Método S.O.N.O. - Curso Completo

Áudios Guiados para Relaxamento

Lista de Alimentos e Produtos Naturais

Planilha de Monitoramento Diário

Precisa de ajuda? Entre em contato conosco:

suporte@metodosono.com.br

) } [V0_FILE]typescriptreact:file="utils/data-validator.ts" isEdit="true" isQuickEdit="true" isMerged="true" /** * Streamlined utility functions for data validation and storage */ interface ValidationResult { isValid: boolean message?: string data?: T } // Save data to localStorage with error handling export function safelyStoreData(key: string, data: any): boolean { try { localStorage.setItem(key, typeof data === "string" ? data : JSON.stringify(data)) return true } catch (error) { console.error(`Error storing data (${key}):`, error) return false } } // Retrieve data from localStorage with error handling export function safelyRetrieveData(key: string, defaultValue: T = null as unknown as T): T { try { const data = localStorage.getItem(key) if (!data) return defaultValue // Check if the data is a simple string that shouldn't be parsed if ( key === "userBadge" || key === "selectedOption" || key === "clarityPoints" || key === "questionsAnswered" || key === "userRank" || key === "insomniaType" ) { return data as unknown as T } // Try to parse as JSON try { return JSON.parse(data) } catch { // If it's not valid JSON, return the raw string return data as unknown as T } } catch (error) { console.error(`Error retrieving data (${key}):`, error) return defaultValue } } // Calculate discount based on points export function calculateDiscount(points: number): number { if (points >= 3000) return 40 if (points >= 2000) return 30 if (points >= 1000) return 20 return 10 } // Determine badge based on points export function determineBadge(points: number): string { if (points >= 2000) return "Mestre do Relaxamento" if (points >= 1000) return "Desbravador do Sono" if (points > 0) return "Iniciante do Descanso" return "" } // Get user's first name export function getUserFirstName(): string { try { const userData = safelyRetrieveData<{ name: string } | null>("userData", null) if (userData && userData.name) { return userData.name.split(" ")[0] } return "" } catch (error) { return "" } } [V0_FILE]typescriptreact:file="components/points-display.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useEffect, useState } from "react" import { safelyRetrieveData, determineBadge } from "@/utils/data-validator" export function PointsDisplay() { const [points, setPoints] = useState(0) const [badge, setBadge] = useState("") useEffect(() => { // Get points from localStorage const storedPoints = safelyRetrieveData("clarityPoints", "0") const pointsValue = Number.parseInt(storedPoints, 10) || 0 setPoints(pointsValue) // Get or determine badge const storedBadge = safelyRetrieveData("userBadge", "") setBadge(storedBadge || determineBadge(pointsValue)) // Listen for point updates const handlePointsUpdate = () => { const updatedPoints = safelyRetrieveData("clarityPoints", "0") const updatedPointsValue = Number.parseInt(updatedPoints, 10) || 0 setPoints(updatedPointsValue) // Update badge if needed const updatedBadge = safelyRetrieveData("userBadge", "") setBadge(updatedBadge || determineBadge(updatedPointsValue)) } window.addEventListener("showPointsPopup", handlePointsUpdate) return () => { window.removeEventListener("showPointsPopup", handlePointsUpdate) } }, []) if (points === 0) return null return (

{points} Pontos de Clareza

{badge &&

{badge}

}

) } [V0_FILE]typescriptreact:file="components/progress-display.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent } from "@/components/ui/card" import { motion } from "framer-motion" import { safelyRetrieveData } from "@/utils/data-validator" export function ProgressDisplay() { const [userRank, setUserRank] = useState(25) const [showProgress, setShowProgress] = useState(false) useEffect(() => { // Get initial data const storedPointsStr = safelyRetrieveData("clarityPoints", "0") const storedQuestionsAnsweredStr = safelyRetrieveData("questionsAnswered", "0") const storedRankStr = safelyRetrieveData("userRank", "25") const storedPoints = Number.parseInt(storedPointsStr, 10) || 0 const storedQuestionsAnswered = Number.parseInt(storedQuestionsAnsweredStr, 10) || 0 const storedRank = Number.parseInt(storedRankStr, 10) || 25 setUserRank(storedRank) // Determine if we should show progress setShowProgress(storedQuestionsAnswered >= 3 || storedPoints > 3600) // Listen for point updates const handlePointsUpdate = () => { const updatedPointsStr = safelyRetrieveData("clarityPoints", "0") const updatedPoints = Number.parseInt(updatedPointsStr, 10) || 0 const currentQuestionsAnsweredStr = safelyRetrieveData("questionsAnswered", "0") const currentQuestionsAnswered = Number.parseInt(currentQuestionsAnsweredStr, 10) || 0 const newQuestionsAnswered = currentQuestionsAnswered + 1 // Calculate new rank let newRank = 25 - Math.floor(updatedPoints / 200) newRank = Math.max(1, newRank) setUserRank(newRank) // Show progress if conditions are met if (newQuestionsAnswered >= 3 || updatedPoints > 3600) { setShowProgress(true) } } window.addEventListener("showPointsPopup", handlePointsUpdate) return () => { window.removeEventListener("showPointsPopup", handlePointsUpdate) } }, []) if (!showProgress) return null // Calculate progress percentage const progressPercentage = ((25 - userRank) / 24) * 100 return (

Seu Ranking Atual

{userRank}º entre os Buscadores do Sono

Iniciante (25º) Expert (1º)

{userRank <= 10 && (

Parabéns! Você está entre os Top 10!

)} ) } [V0_FILE]typescriptreact:file="components/ranking-display.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { safelyRetrieveData, safelyStoreData, determineBadge } from "@/utils/data-validator" import { initializeSession } from "@/utils/session-manager" // Define a type for user ranking data interface RankingUser { name: string points: number badge: string isCurrentUser?: boolean } // Base ranking data - moved outside component to avoid re-creation on each render const BASE_RANKING: RankingUser[] = [ { name: "Maria S.", points: 4850, badge: "Mestre do Relaxamento" }, { name: "João P.", points: 4320, badge: "Mestre do Relaxamento" }, { name: "Ana C.", points: 3980, badge: "Desbravador do Sono" }, { name: "Pedro M.", points: 3750, badge: "Desbravador do Sono" }, { name: "Lucia R.", points: 3600, badge: "Desbravador do Sono" }, ] export function RankingDisplay() { const [rankingData, setRankingData] = useState(BASE_RANKING) const [userPoints, setUserPoints] = useState(0) const [userName, setUserName] = useState("") const [userBadge, setUserBadge] = useState("") const [isUserInRanking, setIsUserInRanking] = useState(false) const rankingInitialized = useRef(false) useEffect(() => { // Initialize session const sessionId = initializeSession() // Get user data const userData = safelyRetrieveData<{ name: string } | null>("userData", null) if (userData && userData.name) { setUserName(userData.name.split(" ")[0]) } // Get points and determine badge const pointsStr = safelyRetrieveData("clarityPoints", "0") const points = Number.parseInt(pointsStr, 10) || 0 setUserPoints(points) const badge = determineBadge(points) setUserBadge(badge) safelyStoreData("userBadge", badge) // Add listeners for updates const handlePointsUpdate = () => { const updatedPointsStr = safelyRetrieveData("clarityPoints", "0") const updatedPoints = Number.parseInt(updatedPointsStr, 10) || 0 setUserPoints(updatedPoints) const newBadge = determineBadge(updatedPoints) setUserBadge(newBadge) safelyStoreData("userBadge", newBadge) updateRanking() } window.addEventListener("showPointsPopup", handlePointsUpdate) window.addEventListener("rankUpdated", updateRanking) // Initial ranking update if (userName && points > 0) { updateRanking() } return () => { window.removeEventListener("rankUpdated", updateRanking) window.removeEventListener("showPointsPopup", handlePointsUpdate) } }, [userName]) // Function to update the ranking const updateRanking = () => { if (!userName || userPoints === 0) return try { // Get user's current rank const userCurrentRankStr = safelyRetrieveData("userRank", "25") const userCurrentRank = Number.parseInt(userCurrentRankStr, 10) || 25 // Create a copy of the base ranking const filteredRanking = [...BASE_RANKING].filter((user) => !user.isCurrentUser) // Add the current user to the ranking const currentUser: RankingUser = { name: userName, points: userPoints, badge: userBadge, isCurrentUser: true, } filteredRanking.push(currentUser) // Sort by points (highest first) filteredRanking.sort((a, b) => b.points - a.points) // Keep only top 5 const top5 = filteredRanking.slice(0, 5) // Check if user is in top 5 const userInTop5 = top5.some((user) => user.isCurrentUser) setIsUserInRanking(userInTop5) // Update ranking state setRankingData(top5) // Store ranking in localStorage safelyStoreData("userRanking", { position: userCurrentRank, totalUsers: filteredRanking.length, inTop5: userInTop5, }) } catch (error) { // Continue with current ranking } } return ( Top 5 Buscadores do Sono

{rankingData.map((user, index) => (

{index + 1}. {user.name} {user.isCurrentUser && (Você)}

{user.points} pts {user.badge}

))}

{!isUserInRanking && userPoints > 0 && (

Continue respondendo para subir no ranking!

)} ) } [V0_FILE]typescriptreact:file="components/checkout-summary.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect, useRef } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { CheckCircle, Lock } from "lucide-react" import { ProgressDisplay } from "@/components/progress-display" import { useRouter } from "next/navigation" import { trackPixelEvent } from "@/utils/pixel-tracker" import { safelyRetrieveData, calculateDiscount, getUserFirstName } from "@/utils/data-validator" // URL do checkout externo const CHECKOUT_URL = "https://pagamento.doctorheath.net/checkout?product=4233b5be-2c50-11f0-975a-46da4690ad53" export function CheckoutSummary() { const router = useRouter() const [userData, setUserData] = useState<{ name: string; email: string; phone: string } | null>(null) const [firstName, setFirstName] = useState("") const [discount, setDiscount] = useState(0) const [totalPoints, setTotalPoints] = useState(0) const [isSubmitting, setIsSubmitting] = useState(false) const [isLoading, setIsLoading] = useState(true) const [hasError, setHasError] = useState(false) const initialized = useRef(false) useEffect(() => { if (initialized.current) return initialized.current = true try { setIsLoading(true) // Get user data const storedUserData = safelyRetrieveData<{ name: string; email: string; phone: string } | null>("userData", null) if (!storedUserData) { router.push("/") return } setUserData(storedUserData) // Get first name setFirstName(getUserFirstName()) // Get points and calculate discount const pointsStr = safelyRetrieveData("clarityPoints", "0") const points = Number.parseInt(pointsStr, 10) || 0 setTotalPoints(points) setDiscount(calculateDiscount(points)) // Track page view trackPixelEvent("ViewContent", { content_name: "checkout_page", content_type: "checkout", total_points: points, discount_percentage: discount, }) setIsLoading(false) } catch (error) { setHasError(true) setIsLoading(false) } }, [router, discount]) const handleCheckout = () => { try { setIsSubmitting(true) const content_ids = ["sono_method_course"] // Track checkout event trackPixelEvent("AddToCart", { content_name: "metodo_sono", content_category: "product", content_ids: ["sono_method_course"], value: ((67 * (100 - discount)) / 100).toFixed(2), currency: "BRL", discount_percentage: discount, }) // Redirect to external checkout window.location.href = CHECKOUT_URL } catch (error) { setIsSubmitting(false) alert("Ocorreu um erro ao processar o checkout. Por favor, tente novamente.") } } if (isLoading) { return (

Carregando informações do checkout...

) } if (hasError || !userData) { return (

Ops! Algo deu errado.

Não foi possível carregar as informações do checkout. Vamos tentar novamente?

) } return (

{firstName ? `${firstName}, finalize sua compra` : "Finalize sua compra"}

Você está a um passo de transformar suas noites

Seus Dados

Nome: {userData.name}

E-mail: {userData.email}

WhatsApp: {userData.phone}

Pontos acumulados: {totalPoints} pontos

Resumo do Pedido

Método S.O.N.O. R$67,00

Desconto -R${((67 * discount) / 100).toFixed(2)}

Total

R${((67 * (100 - discount)) / 100).toFixed(2)} {discount}% OFF

Pagamento 100% seguro

O que você vai receber:

Curso Completo Método S.O.N.O.
3 Áudios Guiados para relaxamento
Lista de Alimentos e Produtos Naturais
Planilha de Monitoramento Diário

) } [V0_FILE]typescriptreact:file="components/diagnostic-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent } from "@/components/ui/card" import { useRouter } from "next/navigation" import { PointsDisplay } from "@/components/points-display" import { ProgressDisplay } from "@/components/progress-display" import { trackPixelEvent } from "@/utils/pixel-tracker" import { safelyStoreData, getUserFirstName } from "@/utils/data-validator" // Options moved outside component to avoid re-creation on each render const DIAGNOSTIC_OPTIONS = [ { id: 1, text: "Minha mente não desliga! Levo uma eternidade para adormecer, mesmo exausto(a).", points: 650 }, { id: 2, text: "Acordo várias vezes e luto para voltar a dormir. Meu sono é picado.", points: 960 }, { id: 3, text: "Desperto muito antes do alarme (3-5h da manhã) e não consigo mais pregar os olhos.", points: 1200 }, ] export function DiagnosticSection() { const router = useRouter() const [selectedOption, setSelectedOption] = useState(null) const [firstName, setFirstName] = useState("") const [isProcessing, setIsProcessing] = useState(false) useEffect(() => { // Track page view trackPixelEvent("ViewContent", { content_name: "diagnostic_page", content_type: "quiz_start", }) // Get user first name setFirstName(getUserFirstName()) // Check if we need to reset progress const resetProgress = localStorage.getItem("resetProgress") if (resetProgress === "true") { localStorage.removeItem("resetProgress") localStorage.removeItem("clarityPoints") localStorage.removeItem("selectedOption") } }, []) const handleOptionSelect = (id: number, points: number) => { // Prevent multiple clicks if (isProcessing) return try { setIsProcessing(true) setSelectedOption(id) // Store data in localStorage safelyStoreData("clarityPoints", points.toString()) safelyStoreData("selectedOption", id.toString()) safelyStoreData("questionsAnswered", "1") safelyStoreData("userRank", "25") // Track quiz start trackPixelEvent("StartQuiz", { content_name: "sleep_diagnostic", content_category: "quiz", option_selected: id, points_earned: points, }) // Show points popup window.dispatchEvent( new CustomEvent("showPointsPopup", { detail: { points: points }, }), ) // Redirect after delay setTimeout(() => { router.push("/quiz") }, 3000) } catch (error) { setIsProcessing(false) // Fallback redirect setTimeout(() => { router.push("/quiz") }, 3000) } } return (

{firstName ? `${firstName}, Sua Mente Corre uma Maratona Enquanto o Mundo Dorme?` : "Sua Mente Corre uma Maratona Enquanto o Mundo Dorme?"}

Descubra AGORA o Ladrão Silencioso do Seu Descanso.

Você não está sozinho(a) nessa batalha noturna. Milhões de brasileiros sentem o mesmo.

Mas e se eu te dissesse que essa luta tem um padrão? Que a sua dificuldade específica para dormir revela a chave para a solução? A insônia NÃO é uma sentença. É um sinal. E entender esse sinal é o primeiro passo para noites tranquilas e dias cheios de energia.

Vamos descobrir juntos qual é o seu principal desafio noturno? Responda à pergunta abaixo e comece a acumular Pontos de Clareza para desbloquear o caminho para um sono reparador – naturalmente.

Qual destes cenários mais descreve suas noites?

{DIAGNOSTIC_OPTIONS.map((option) => (

handleOptionSelect(option.id, option.points)} aria-disabled={isProcessing} >

{option.text} {isProcessing && selectedOption === option.id && ( Processando... )}

))}

Ao continuar, você concorda com nossa política de privacidade e termos de uso.

) } [V0_FILE]typescriptreact:file="components/pixel-script.tsx" isEdit="true" isMerged="true" "use client" import { useEffect } from "react" import { processPixelEventQueue } from "@/utils/pixel-tracker" export function PixelScript() { useEffect(() => { // Verifica se o script já foi carregado if (document.querySelector('script[src="https://cdn.utmify.com.br/scripts/pixel/pixel.js"]')) { return } // Define o ID do pixel window.pixelId = "681d2880fe009d33685d7ca3" // Cria e adiciona o script do pixel const pixelScript = document.createElement("script") pixelScript.setAttribute("async", "") pixelScript.setAttribute("src", "https://cdn.utmify.com.br/scripts/pixel/pixel.js") // Quando o script carregar, processa a fila de eventos pixelScript.onload = () => { setTimeout(processPixelEventQueue, 1000) // Dá um tempo para o utmify inicializar } document.head.appendChild(pixelScript) // Adiciona o script de UTM tracking exatamente como fornecido const utmScript = document.createElement("script") utmScript.setAttribute("src", "https://cdn.utmify.com.br/scripts/utms/latest.js") utmScript.setAttribute("data-utmify-prevent-xcod-sck", "") utmScript.setAttribute("data-utmify-prevent-subids", "") utmScript.setAttribute("async", "") utmScript.setAttribute("defer", "") document.head.appendChild(utmScript) }, []) return null } [V0_FILE]png:file="public/images/testimonial-man.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-I6G42qoa3nXQ8rE7afPPLQC4iiJktP.png" isMerged="true" [V0_FILE]png:file="public/images/testimonial-woman.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-um9uZoqsnssugSpdYNi7UbFfT3SfLC.png" isMerged="true" [V0_FILE]typescriptreact:file="components/testimonial.tsx" isEdit="true" isMerged="true" import { Card, CardContent } from "@/components/ui/card" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" interface TestimonialProps { name: string age: number text: string imageSrc?: string } export function Testimonial({ name, age, text, imageSrc }: TestimonialProps) { const initials = name .split(" ") .map((n) => n[0]) .join("") return ( {imageSrc ? ( ) : ( {initials} )}

{name}, {age}

{text}

) } [V0_FILE]typescriptreact:file="components/quiz-content.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent } from "@/components/ui/card" import { useRouter } from "next/navigation" import { PointsDisplay } from "@/components/points-display" import { Testimonial } from "@/components/testimonial" import { RankingDisplay } from "@/components/ranking-display" import { ProgressDisplay } from "@/components/progress-display" import { trackPixelEvent } from "@/utils/pixel-tracker" import { safelyStoreData, safelyRetrieveData, getUserFirstName, determineBadge } from "@/utils/data-validator" interface QuizOption { id: number text: string points: number } interface QuizQuestion { id: number question: string options: QuizOption[] } // Quiz questions - moved outside component to avoid re-creation on each render const QUIZ_QUESTIONS: QuizQuestion[] = [ { id: 1, question: "Quanto tempo você geralmente leva para adormecer?", options: [ { id: 1, text: "Menos de 15 minutos", points: 300 }, { id: 2, text: "Entre 15 e 30 minutos", points: 450 }, { id: 3, text: "Entre 30 minutos e 1 hora", points: 600 }, { id: 4, text: "Mais de 1 hora", points: 750 }, ], }, { id: 2, question: "Você costuma acordar durante a noite?", options: [ { id: 1, text: "Raramente ou nunca", points: 300 }, { id: 2, text: "1-2 vezes por noite", points: 450 }, { id: 3, text: "3-4 vezes por noite", points: 600 }, { id: 4, text: "Mais de 4 vezes por noite", points: 750 }, ], }, { id: 3, question: "Como você se sente ao acordar pela manhã?", options: [ { id: 1, text: "Descansado e com energia", points: 300 }, { id: 2, text: "Levemente cansado", points: 450 }, { id: 3, text: "Moderadamente cansado", points: 600 }, { id: 4, text: "Extremamente cansado", points: 750 }, ], }, { id: 4, question: "Você usa algum dispositivo eletrônico (celular, tablet, TV) antes de dormir?", options: [ { id: 1, text: "Nunca", points: 300 }, { id: 2, text: "Raramente", points: 450 }, { id: 3, text: "Frequentemente", points: 600 }, { id: 4, text: "Sempre", points: 750 }, ], }, { id: 5, question: "Você consome cafeína (café, chá, refrigerantes) após as 14h?", options: [ { id: 1, text: "Nunca", points: 300 }, { id: 2, text: "Raramente", points: 450 }, { id: 3, text: "Frequentemente", points: 600 }, { id: 4, text: "Sempre", points: 750 }, ], }, ] export function QuizContent() { const router = useRouter() const [currentQuestion, setCurrentQuestion] = useState(0) const [selectedOption, setSelectedOption] = useState(null) const [totalPoints, setTotalPoints] = useState(0) const [showRanking, setShowRanking] = useState(false) const [firstName, setFirstName] = useState("") const [isProcessing, setIsProcessing] = useState(false) useEffect(() => { // Track page view trackPixelEvent("ViewContent", { content_name: "quiz_page", content_type: "quiz", question_number: currentQuestion + 1, total_questions: QUIZ_QUESTIONS.length, }) // Get points from localStorage const storedPointsStr = safelyRetrieveData("clarityPoints", "0") const storedPoints = Number.parseInt(storedPointsStr, 10) || 0 setTotalPoints(storedPoints) // Get user first name setFirstName(getUserFirstName()) // Show ranking after 2 seconds const timer = setTimeout(() => { setShowRanking(true) }, 2000) return () => clearTimeout(timer) }, [currentQuestion]) // Reset processing state when moving to a new question useEffect(() => { setIsProcessing(false) setSelectedOption(null) }, [currentQuestion]) const handleOptionSelect = (optionId: number, points: number) => { // Prevent multiple clicks if (isProcessing) return try { setIsProcessing(true) setSelectedOption(optionId) // Update total points const newTotalPoints = totalPoints + points setTotalPoints(newTotalPoints) safelyStoreData("clarityPoints", newTotalPoints.toString()) // Update questions answered counter const currentQuestionsAnsweredStr = safelyRetrieveData("questionsAnswered", "1") const currentQuestionsAnswered = Number.parseInt(currentQuestionsAnsweredStr, 10) || 1 const newQuestionsAnswered = currentQuestionsAnswered + 1 safelyStoreData("questionsAnswered", newQuestionsAnswered.toString()) // Calculate new rank based on points const currentRankStr = safelyRetrieveData("userRank", "25") const currentRank = Number.parseInt(currentRankStr, 10) || 25 let newRank = 25 - Math.floor(newTotalPoints / 200) newRank = Math.max(1, newRank) // Only update if rank improved if (newRank < currentRank) { safelyStoreData("userRank", newRank.toString()) window.dispatchEvent(new CustomEvent("rankUpdated")) } // Update badge const badge = determineBadge(newTotalPoints) safelyStoreData("userBadge", badge) // Track quiz progress trackPixelEvent("QuizProgress", { content_name: "sleep_quiz", content_category: "quiz", question_number: currentQuestion + 1, total_questions: QUIZ_QUESTIONS.length, option_selected: optionId, points_earned: points, total_points: newTotalPoints, current_rank: newRank, }) // Show points popup window.dispatchEvent( new CustomEvent("showPointsPopup", { detail: { points: points }, }), ) // Process next step after delay setTimeout(() => { if (currentQuestion < QUIZ_QUESTIONS.length - 1) { setCurrentQuestion(currentQuestion + 1) } else { // Determine insomnia type const initialSelection = safelyRetrieveData("selectedOption", "0") let insomniaTypeValue = "Insônia Mista" if (initialSelection === "1") { insomniaTypeValue = "Insônia de Início" } else if (initialSelection === "2") { insomniaTypeValue = "Insônia de Manutenção" } else if (initialSelection === "3") { insomniaTypeValue = "Insônia Terminal" } // Track quiz completion trackPixelEvent("QuizComplete", { content_name: "sleep_quiz", content_category: "quiz", total_points: newTotalPoints, insomnia_type: insomniaTypeValue, final_rank: newRank, }) // Store data and redirect safelyStoreData("clarityPoints", newTotalPoints.toString()) safelyStoreData("insomniaType", insomniaTypeValue) safelyStoreData("completedQuiz", "true") router.push(`/results?points=${newTotalPoints}&type=${encodeURIComponent(insomniaTypeValue)}`) } }, 3000) } catch (error) { setIsProcessing(false) // Try to continue with the next question or redirect if (currentQuestion < QUIZ_QUESTIONS.length - 1) { setCurrentQuestion(currentQuestion + 1) } else { router.push("/results") } } } const currentQuestionData = QUIZ_QUESTIONS[currentQuestion] const progress = ((currentQuestion + 1) / QUIZ_QUESTIONS.length) * 100 return (

Pergunta {currentQuestion + 1} de {QUIZ_QUESTIONS.length}

{firstName ? `${firstName}, ${currentQuestionData.question.toLowerCase()}` : currentQuestionData.question}

{currentQuestionData.options.map((option) => (

handleOptionSelect(option.id, option.points)} aria-disabled={isProcessing} >

{option.text} {isProcessing && selectedOption === option.id && ( Processando... )}

))}

{showRanking && (

)}

O que nossos clientes dizem sobre o Método S.O.N.O.

) } [V0_FILE]markdown:file="INSTALL.md" isMerged="true" # Instruções de Instalação - Método S.O.N.O. Este documento contém instruções detalhadas para instalar, configurar e executar o site do Método S.O.N.O. ## Pré-requisitos Antes de começar, certifique-se de ter instalado: - [Node.js](https://nodejs.org/) (versão 18.x ou superior) - npm (normalmente vem com o Node.js) ou [Yarn](https://yarnpkg.com/) - [Git](https://git-scm.com/) (para clonar o repositório) ## Passo 1: Clonar o Repositório \`\`\`bash git clone [URL_DO_REPOSITÓRIO] cd metodo-sono \`\`\` ## Passo 2: Instalar Dependências Usando npm: \`\`\`bash npm install \`\`\` Ou usando Yarn: \`\`\`bash yarn install \`\`\` ## Passo 3: Configurar Variáveis de Ambiente Crie um arquivo `.env.local` na raiz do projeto com as seguintes variáveis: \`\`\` # Pixel ID do Facebook NEXT_PUBLIC_PIXEL_ID=681d2880fe009d33685d7ca3 # URL do checkout (opcional, se estiver usando checkout externo) NEXT_PUBLIC_CHECKOUT_URL=https://pagamento.doctorheath.net/checkout?product=4233b5be-2c50-11f0-975a-46da4690ad53 \`\`\` ## Passo 4: Executar o Servidor de Desenvolvimento \`\`\`bash npm run dev # ou yarn dev \`\`\` Acesse o site em [http://localhost:3000](http://localhost:3000) ## Passo 5: Construir para Produção Quando estiver pronto para implantar em produção: \`\`\`bash npm run build # ou yarn build \`\`\` ## Passo 6: Iniciar o Servidor de Produção \`\`\`bash npm run start # ou yarn start \`\`\` ## Opções de Implantação ### Vercel (Recomendado) A maneira mais fácil de implantar este site é usando a [Vercel](https://vercel.com/), a plataforma dos criadores do Next.js. 1. Crie uma conta na Vercel 2. Importe o repositório Git 3. Configure as variáveis de ambiente 4. Clique em "Deploy" ### Hospedagem Tradicional Se preferir usar uma hospedagem tradicional: 1. Execute `npm run build` ou `yarn build` 2. Copie o conteúdo da pasta `.next`, `public`, `package.json` e `next.config.js` para o servidor 3. Execute `npm install --production` no servidor 4. Inicie o servidor com `npm start` ## Estrutura de Arquivos - `/app` - Páginas e rotas da aplicação - `/components` - Componentes React reutilizáveis - `/public` - Arquivos estáticos (imagens, fontes, etc.) - `/utils` - Funções utilitárias ## Solução de Problemas ### Erro ao carregar o Pixel Se o pixel não estiver carregando corretamente, verifique: - Se o ID do pixel está correto no arquivo `.env.local` - Se o script do pixel está sendo carregado (verifique o console do navegador) ### Problemas com o localStorage Se estiver tendo problemas com o localStorage: - Verifique se o navegador tem suporte e permissão para localStorage - Limpe o cache e os dados do navegador ### Outros Problemas Para outros problemas, verifique: - Se todas as dependências foram instaladas corretamente - Se está usando a versão correta do Node.js - Os logs de erro no console do navegador e do servidor ## Manutenção Para manter o site atualizado: 1. Regularmente atualize as dependências: \`\`\`bash npm update # ou yarn upgrade \`\`\` 2. Verifique por vulnerabilidades: \`\`\`bash npm audit # ou yarn audit \`\`\` ## Contato e Suporte Para suporte técnico ou dúvidas sobre a instalação, entre em contato: - Email: suporte@metodosono.com.br [V0_FILE]typescriptreact:file="app/results/page.tsx" isEdit="true" import { Suspense } from "react" import { Header } from "@/components/header" import { ResultsContent } from "@/components/results-content" import { Footer } from "@/components/footer" export default function ResultsPage() { return (

) } // Componente de carregamento para mostrar enquanto os resultados estão sendo carregados function ResultsLoading() { return (

Carregando seus resultados...

) } [V0_FILE]typescriptreact:file="components/results-content.tsx" isEdit="true" "use client" import { useState, useEffect, useRef } from "react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { useSearchParams, useRouter } from "next/navigation" import { PointsDisplay } from "@/components/points-display" import { Badge } from "@/components/ui/badge" import { ArrowRight } from "lucide-react" import { CongratulationsPopup } from "@/components/congratulations-popup" import { ProgressDisplay } from "@/components/progress-display" import { trackPixelEvent } from "@/utils/pixel-tracker" import { safelyRetrieveData, safelyStoreData, calculateDiscount, getUserFirstName } from "@/utils/data-validator" export function ResultsContent() { const searchParams = useSearchParams() const router = useRouter() const [totalPoints, setTotalPoints] = useState(0) const [insomniaType, setInsomniaType] = useState("Insônia Mista") const [discount, setDiscount] = useState(0) const [showCongrats, setShowCongrats] = useState(true) const [firstName, setFirstName] = useState("") const [isLoading, setIsLoading] = useState(true) const [hasError, setHasError] = useState(false) const [isRedirecting, setIsRedirecting] = useState(false) const initialized = useRef(false) useEffect(() => { if (initialized.current) return initialized.current = true try { setIsLoading(true) // Get points from URL or localStorage const points = searchParams.get("points") let pointsValue = 0 if (points && !isNaN(Number(points))) { pointsValue = Number(points) safelyStoreData("clarityPoints", pointsValue.toString()) } else { const storedPoints = safelyRetrieveData("clarityPoints", "0") pointsValue = Number.parseInt(storedPoints, 10) || 0 if (isNaN(pointsValue) || pointsValue === 0) { router.push("/diagnostic") return } } setTotalPoints(pointsValue) // Calculate discount const discountValue = calculateDiscount(pointsValue) setDiscount(discountValue) // Get insomnia type const type = searchParams.get("type") if (type && type.trim() !== "") { setInsomniaType(decodeURIComponent(type)) } else { const initialSelection = safelyRetrieveData("selectedOption", "0") if (initialSelection === "1") { setInsomniaType("Insônia de Início") } else if (initialSelection === "2") { setInsomniaType("Insônia de Manutenção") } else if (initialSelection === "3") { setInsomniaType("Insônia Terminal") } } // Track page view trackPixelEvent("ViewContent", { content_name: "results_page", content_type: "results", total_points: pointsValue, insomnia_type: insomniaType, discount_percentage: discountValue, }) // Get user first name setFirstName(getUserFirstName()) setIsLoading(false) // Hide congratulations popup after 3 seconds const timer = setTimeout(() => { setShowCongrats(false) }, 3000) return () => clearTimeout(timer) } catch (error) { setHasError(true) setIsLoading(false) } }, [searchParams, router, insomniaType]) const handleCheckoutClick = () => { try { setIsRedirecting(true) trackPixelEvent("AddToCart", { content_name: "metodo_sono", content_category: "product", content_ids: ["sono_method_course"], value: ((67 * (100 - discount)) / 100).toFixed(2), currency: "BRL", discount_percentage: discount, }) // Redirecionar para a página de checkout interna router.push("/checkout") } catch (error) { setIsRedirecting(false) alert("Ocorreu um erro ao processar o checkout. Por favor, tente novamente.") } } if (isLoading) { return (

Carregando seus resultados...

) } if (hasError) { return (

Ops! Algo deu errado.

Não foi possível carregar seus resultados. Vamos tentar novamente?

) } return (

{showCongrats && }

{insomniaType}

{firstName ? `${firstName}, Parabéns!` : "Parabéns!"} Seus {totalPoints} Pontos Desbloquearam Sua Oferta Exclusiva para Noites Reparadoras!

Sua jornada até aqui mostra seu comprometimento em encontrar uma solução real e natural para a insônia.

Com base nos seus {totalPoints} Pontos Conquistados, você desbloqueou um incentivo especial para ter acesso completo ao Método S.O.N.O. e finalmente conquistar noites tranquilas, acordar com energia e transformar sua qualidade de vida através de um sono reparador.

Método S.O.N.O. - Solução Completa

R$67,00 R${((67 * (100 - discount)) / 100).toFixed(2)} {discount}% OFF

O que você vai receber:

✓ Curso Completo Método S.O.N.O. - Técnicas comprovadas para melhorar seu sono naturalmente
✓ Acesso vitalício a todas as atualizações futuras

BÔNUS #1:

3 Áudios Guiados (Hipnose Ericksoniana + Sons Binaurais) para induzir o relaxamento profundo.

BÔNUS #2:

Lista Secreta de Alimentos e Produtos Naturais que potencializam o sono.

BÔNUS #3:

Planilha Checklist de Monitoramento Diário para acompanhar sua evolução.

Oferta por tempo limitado. Seu desconto expira em 24 horas.

Garantia Incondicional de 7 Dias

Se em 7 dias você não sentir os primeiros resultados ou achar que o método não é para você, devolvemos 100% do seu dinheiro. Risco ZERO!

) } [V0_FILE]typescriptreact:file="app/checkout/page.tsx" isEdit="true" import type { Metadata } from "next" import { Suspense } from "react" import { Header } from "@/components/header" import { CheckoutSummary } from "@/components/checkout-summary" import { Footer } from "@/components/footer" export const metadata: Metadata = { title: "Finalizar Compra | Método S.O.N.O.", description: "Complete sua compra do Método S.O.N.O. e transforme suas noites de sono.", } export default function CheckoutPage() { return (

) } function CheckoutLoading() { return (

Carregando informações do checkout...

) }