[V0_FILE]typescriptreact:file="components/hero-section.tsx" isMerged="true" import { Button } from "@/components/ui/button" export function HeroSection() { return (

{/* Hero Content */}

Effortless custom contract billing by Brillance

Streamline your billing process with seamless automation for every custom contract, tailored by Brillance.

{/* CTA Button */}

) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "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", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.35", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "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": "^0.9.9", "zod": "3.25.67", "framer-motion": "12.23.24" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]xml:file="public/gradient-pattern.svg" isMerged="true" [V0_FILE]xml:file="public/mask-group-pattern.svg" isMerged="true" [V0_FILE]typescriptreact:file="components/dashboard-preview.tsx" isQuickEdit="true" isMerged="true" import { Button } from "@/components/ui/button" export function DashboardPreview() { return (

{/* Dashboard Interface Mockup */}

{/* Dashboard Header */}

Brillance

Account

{/* Sidebar and Main Content */}

{/* Sidebar */}

{/* Main Content */}

Schedules

{/* Table Mockup */}

Customer

Status

Products

Total

Start date

End date

{/* Table Rows */} {Array.from({ length: 8 }).map((_, i) => (

Hypernise

{i % 3 === 0 ? "Complete" : i % 3 === 1 ? "Active" : "Draft"}

Platform access fee

$3,862.32

1 Aug 2024

10 Jun 2024

))}

) } [V0_FILE]typescriptreact:file="components/feature-cards.tsx" isQuickEdit="true" isMerged="true" export function FeatureCards() { const features = [ { title: "Plan your schedules", description: "Explore your data, build your dashboard,\nbring your team together.", highlighted: true, }, { title: "Data to insights in the minutes", description: "Explore your data, build your dashboard,\nbring your team together.", highlighted: false, }, { title: "Data to insights in the minutes", description: "Explore your data, build your dashboard,\nbring your team together.", highlighted: false, }, ] return (

{features.map((feature, index) => (

{feature.highlighted && (

)}

{feature.title}

{feature.description}

))}

) } [V0_FILE]typescriptreact:file="components/header.tsx" isQuickEdit="true" isMerged="true" import { Button } from "@/components/ui/button" export function Header() { return (

) } [V0_FILE]xml:file="public/horizon-icon.svg" isMerged="true" [V0_FILE]typescriptreact:file="components/smart-simple-brilliant.tsx" isQuickEdit="true" isMerged="true" import type React from "react" interface SmartSimpleBrilliantProps { /** Fixed width from Figma: 482px */ width?: number | string /** Fixed height from Figma: 300px */ height?: number | string /** Optional className to pass to root */ className?: string /** Theme palette */ theme?: "light" | "dark" } /** * Smart · Simple · Brilliant – Calendar cards * Generated from Figma via MCP with exact measurements (482×300px) * Single-file component following the v0-ready pattern used in this repo. */ const SmartSimpleBrilliant: React.FC = ({ width = 482, height = 300, className = "", theme = "dark", }) => { // Design tokens (derived from Figma local variables) const themeVars = theme === "light" ? { "--ssb-surface": "#ffffff", "--ssb-text": "#1b1919", "--ssb-border": "rgba(0,0,0,0.08)", "--ssb-inner-border": "rgba(0,0,0,0.12)", "--ssb-shadow": "rgba(0,0,0,0.12)", } : ({ "--ssb-surface": "#333937", "--ssb-text": "#f8f8f8", "--ssb-border": "rgba(255,255,255,0.16)", "--ssb-inner-border": "rgba(255,255,255,0.12)", "--ssb-shadow": "rgba(0,0,0,0.28)", } as React.CSSProperties) // Figma-exported SVG assets used for small icons const img = "http://localhost:3845/assets/1b1e60b441119fb176db990a3c7fe2670a764855.svg" const img1 = "http://localhost:3845/assets/a502f04ccfc3811f304b58a3a982a5b6fa070e91.svg" const img2 = "http://localhost:3845/assets/9c07375bf3b9f1f1d8a0a24447829eb6f54fa928.svg" const img3 = "http://localhost:3845/assets/19500d66798ef5ea9dc9d5f971cd0e9c29674bd3.svg" return (

{/* Left tilted card group */}

{/* Amber event */}

2:00 PM

1:1 with Heather

{/* Sky event */}

2:00 PM

Concept Design Review II

{/* Emerald event */}

9:00 AM

Webinar: Figma ...

{/* Right card */}

{/* Violet event */}

11:00 AM

Onboarding Presentation

{/* Rose event */}

4:00 PM

🍷 Happy Hour

{/* Violet tall event */}

11:00 AM

🍔 New Employee Welcome Lunch!

) } export default SmartSimpleBrilliant [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Plus_Jakarta_Sans, Playfair_Display } from 'next/font/google' import "./globals.css" const plusJakartaSans = Plus_Jakarta_Sans({ subsets: ["latin"], variable: "--font-sans", display: "swap", preload: true, }) const playfairDisplay = Playfair_Display({ subsets: ["latin"], variable: "--font-serif", display: "swap", preload: true, }) export const metadata: Metadata = { title: "Allevia - Alívio da Dor e Bem-Estar", description: "Clínica premium focada em transformar a qualidade de vida através de uma abordagem integrada e humanizada.", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]jpg:file="public/modern-dashboard-interface-with-data-visualization.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-dashboard-interface-with-data-visualization-5iUPq8yLuRFCbVr1BldWfJtyYAdmJU.jpg" isMerged="true" [V0_FILE]png:file="public/analytics-dashboard.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/analytics-dashboard-XTLlD4IcgK4XmQILGK1AdCCadyepPB.png" isMerged="true" [V0_FILE]jpg:file="public/team-collaboration-interface-with-shared-workspace.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/team-collaboration-interface-with-shared-workspace-s9qawv8vBN8dVsmkdVE6XaxTn3DDg5.jpg" isMerged="true" [V0_FILE]jpg:file="public/testimonial-avatar-1.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/testimonial-avatar-1-tKG4x4rooo1dpX92PCaxtL6gfKbPZY.jpg" isMerged="true" [V0_FILE]jpg:file="public/testimonial-avatar-2.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/testimonial-avatar-2-Vj6aIotG3PZJBS4hTEKTF06Bgd6mtB.jpg" isMerged="true" [V0_FILE]jpg:file="public/testimonial-avatar-3.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/testimonial-avatar-3-MVqs9VCUaBa5JYvLTo8oDoCSLt0u9X.jpg" isMerged="true" [V0_FILE]jpg:file="public/modern-dashboard-interface-for-schedule-planning-w.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-dashboard-interface-for-schedule-planning-w-jzNRgRUybelsqYe9X0gLUvybmBWI7H.jpg" isMerged="true" [V0_FILE]jpg:file="public/analytics-dashboard-with-charts-graphs-and-data-vi.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/analytics-dashboard-with-charts-graphs-and-data-vi-ZDA7zbnPDJaKoLeVKImoFxWSRCPptP.jpg" isMerged="true" [V0_FILE]jpg:file="public/data-visualization-dashboard-with-interactive-char.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/data-visualization-dashboard-with-interactive-char-ItfJRNslV6uHVrRl4HSDAhqOtjXoZp.jpg" isMerged="true" [V0_FILE]typescriptreact:file="components/faq-section.tsx" isMerged="true" "use client" import { useState } from "react" interface FAQItem { question: string answer: string } const faqData: FAQItem[] = [ { question: "What is Brillance and who is it for?", answer: "Brillance is a comprehensive billing automation platform designed for businesses that need custom contract management. It's perfect for SaaS companies, service providers, and enterprises looking to streamline their billing processes.", }, { question: "How does the custom contract billing work?", answer: "Our platform automatically processes your custom contracts, calculates billing amounts based on your specific terms, and generates invoices. You can set up complex pricing structures, usage-based billing, and custom billing cycles.", }, { question: "Can I integrate Brillance with my existing tools?", answer: "Yes! Brillance integrates seamlessly with popular CRM systems, accounting software, and payment processors. We support APIs and webhooks for custom integrations with your existing workflow.", }, { question: "What kind of support do you provide?", answer: "We offer 24/7 customer support, dedicated account managers for enterprise clients, comprehensive documentation, and onboarding assistance to help you get started quickly.", }, { question: "Is my data secure with Brillance?", answer: "Absolutely. We use enterprise-grade security measures including end-to-end encryption, SOC 2 compliance, and regular security audits. Your data is stored in secure, redundant data centers.", }, { question: "How do I get started with Brillance?", answer: "Getting started is simple! Sign up for our free trial, connect your existing systems, and our onboarding team will help you set up your first custom billing workflow within 24 hours.", }, ] function ChevronDownIcon({ className }: { className?: string }) { return ( ) } export default function FAQSection() { const [openItems, setOpenItems] = useState([]) const toggleItem = (index: number) => { setOpenItems((prev) => (prev.includes(index) ? prev.filter((i) => i !== index) : [...prev, index])) } return (

{/* Left Column - Header */}

Frequently Asked Questions

Explore your data, build your dashboard,
bring your team together.

{/* Right Column - FAQ Items */}

{faqData.map((item, index) => { const isOpen = openItems.includes(index) return (

{item.answer}

) })}

) } [V0_FILE]jpg:file="public/professional-woman-avatar-with-short-brown-hair-an.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-woman-avatar-with-short-brown-hair-an-6NRStMwEIQK9eTVZ3hdlk4FtXmKpIf.jpg" isMerged="true" [V0_FILE]jpg:file="public/professional-man-avatar-with-beard-and-glasses-loo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-man-avatar-with-beard-and-glasses-loo-8gQBdkmKEQCIb1HmJGXuM4fmaCK0k6.jpg" isMerged="true" [V0_FILE]jpg:file="public/professional-person-avatar-with-curly-hair-and-war.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-person-avatar-with-curly-hair-and-war-WEJVoDJQv2FsZ3wsMz9eSaZKy69SO9.jpg" isMerged="true" [V0_FILE]typescriptreact:file="components/your-work-in-sync.tsx" isQuickEdit="true" isMerged="true" import type React from "react" interface YourWorkInSyncProps { /** Fixed width from Figma: 482px */ width?: number | string /** Fixed height from Figma: 300px */ height?: number | string /** Optional className to pass to root */ className?: string /** Theme palette */ theme?: "light" | "dark" } /** * Your work, in sync – Chat conversation UI * Generated from Figma via MCP with exact measurements (482×300px) * Single-file component following the v0-ready pattern used in this repo. */ const YourWorkInSync: React.FC = ({ width = 482, height = 300, className = "", theme = "dark", }) => { // Design tokens (derived from Figma local variables) const themeVars = theme === "light" ? { "--yws-surface": "#ffffff", "--yws-text-primary": "#37322f", "--yws-text-secondary": "#6b7280", "--yws-bubble-light": "#e8e5e3", "--yws-bubble-dark": "#37322f", "--yws-bubble-white": "#ffffff", "--yws-border": "rgba(0,0,0,0.08)", "--yws-shadow": "rgba(0,0,0,0.08)", } : ({ "--yws-surface": "#1f2937", "--yws-text-primary": "#f9fafb", "--yws-text-secondary": "#d1d5db", "--yws-bubble-light": "#374151", "--yws-bubble-dark": "#111827", "--yws-bubble-white": "#ffffff", "--yws-border": "rgba(255,255,255,0.12)", "--yws-shadow": "rgba(0,0,0,0.24)", } as React.CSSProperties) // Figma-exported assets const imgFrame2147223205 = "/professional-woman-avatar-with-short-brown-hair-an.jpg" const imgFrame2147223206 = "/professional-man-avatar-with-beard-and-glasses-loo.jpg" const imgFrame2147223207 = "/professional-person-avatar-with-curly-hair-and-war.jpg" const imgArrowUp = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' strokeWidth='3' strokeLinecap='round' strokeLinejoin='round'%3E%3Cpath d='m5 12 7-7 7 7'/%3E%3Cpath d='M12 19V5'/%3E%3C/svg%3E" return (

{/* Root frame size 482×300 – content centered */}

{/* Remove the flip transformation and position messages normally */}

{/* Message 1: Left side with avatar */}

{/* Avatar */}

{/* Message bubble */}

Team updates flow seamlessly

{/* Message 2: Right side with avatar */}

{/* Message bubble */}

Hi everyone

{/* Avatar */}

{/* Message 3: Left side with avatar */}

{/* Avatar */}

{/* Message bubble */}

How about this instead?

{/* Message 4: Center with send button */}

{/* Message bubble */}

Great work, everyone!

{/* Send button */}

) } export default YourWorkInSync [V0_FILE]jpg:file="public/integration-constellation-mask.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/integration-constellation-mask-VzMMyOqD7zuZmc3sREqex6s7ccihot.jpg" isMerged="true" [V0_FILE]jpg:file="public/circular-mask-pattern.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/circular-mask-pattern-uzohLp1RVkfOm7nK4MeRHPGg8UjI0U.jpg" isMerged="true" [V0_FILE]jpg:file="public/geometric-background-pattern.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/geometric-background-pattern-BWaGH512bu1hPk929JAZ68ot7lNq6V.jpg" isMerged="true" [V0_FILE]jpg:file="public/elliptical-gradient-pattern.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/elliptical-gradient-pattern-sKEdfahwiG6Iu8s47JiwtB9jlVTcHo.jpg" isMerged="true" [V0_FILE]jpg:file="public/discord-logo-icon.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/discord-logo-icon-ClfOdcGmSCSoC0t1mHfG9Q0F5G9QzH.jpg" isMerged="true" [V0_FILE]jpg:file="public/triangle-geometric-icon.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/triangle-geometric-icon-CaIYla5GO7ts27KNmQ8xwIslHbZfOq.jpg" isMerged="true" [V0_FILE]jpg:file="public/github-logo-icon.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/github-logo-icon-JPHvVYqrB5299vRocyrpDdRqfQcEsj.jpg" isMerged="true" [V0_FILE]jpg:file="public/notion-logo-icon.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/notion-logo-icon-SpUxhFqj4vewUskpTv4jI62hHhL8YS.jpg" isMerged="true" [V0_FILE]jpg:file="public/figma-logo-icon.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/figma-logo-icon-7NDSj3zvLWE0MTh44CKgOTaiUoXhfI.jpg" isMerged="true" [V0_FILE]jpg:file="public/slack-logo-mask.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/slack-logo-mask-1Sozh6xCseYGdoPHcAVTnbONkxERmt.jpg" isMerged="true" [V0_FILE]jpg:file="public/slack-logo-icon.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/slack-logo-icon-9gWIooOv66M7w6DIomhZVaaRJ2agwR.jpg" isMerged="true" [V0_FILE]jpg:file="public/vercel-triangle-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/vercel-triangle-logo-rghFgJ0fxkaIvOvIx8kR74taTbX4i2.jpg" isMerged="true" [V0_FILE]jpg:file="public/stripe-logo-icon.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/stripe-logo-icon-zqumD98NcEJrQxLVRosEdbCFuiVhA1.jpg" isMerged="true" [V0_FILE]png:file="public/tailwind-css-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/tailwind-css-logo-BXtZstE3DSWxAi6R30mWVt6Kos8Ff1.png" isMerged="true" [V0_FILE]typescriptreact:file="components/testimonials-section.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import type React from "react" // Badge component for consistency function Badge({ icon, text }: { icon: React.ReactNode; text: string }) { return (

{icon}

{text}

) } export default function TestimonialsSection() { const [activeTestimonial, setActiveTestimonial] = useState(0) const [isTransitioning, setIsTransitioning] = useState(false) const testimonials = [ { quote: "In just a few minutes, we transformed our data into actionable insights. The process was seamless and incredibly efficient!", name: "Jamie Marshall", company: "Co-founder, Exponent", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/ChatGPT%20Image%20Sep%2011%2C%202025%2C%2011_35_19%20AM-z4zSRLsbOQDp7MJS1t8EXmGNB6Al9Z.png", }, { quote: "Brillance has revolutionized how we handle custom contracts. The automation saves us hours every week and eliminates errors completely.", name: "Sarah Chen", company: "VP Operations, TechFlow", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/ChatGPT%20Image%20Sep%2011%2C%202025%2C%2010_54_18%20AM-nbiecp92QNdTudmCrHr97uekrIPzCP.png", }, { quote: "The billing automation is a game-changer. What used to take our team days now happens automatically with perfect accuracy.", name: "Marcus Rodriguez", company: "Finance Director, InnovateCorp", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/ChatGPT%20Image%20Sep%2011%2C%202025%2C%2011_01_05%20AM-TBOe92trRxKn4G5So1m9D2h7LRH4PG.png", }, ] useEffect(() => { const interval = setInterval(() => { setIsTransitioning(true) setTimeout(() => { setActiveTestimonial((prev) => (prev + 1) % testimonials.length) setTimeout(() => { setIsTransitioning(false) }, 100) }, 300) }, 12000) // increased from 6000ms to 12000ms for longer testimonial display return () => clearInterval(interval) }, [testimonials.length]) const handleNavigationClick = (index: number) => { setIsTransitioning(true) setTimeout(() => { setActiveTestimonial(index) setTimeout(() => { setIsTransitioning(false) }, 100) }, 300) } return (

{/* Header Section */} {/* Testimonial Content */}

"{testimonials[activeTestimonial].quote}"

{testimonials[activeTestimonial].name}

{testimonials[activeTestimonial].company}

{/* Navigation Arrows */}

) } [V0_FILE]typescriptreact:file="components/footer-section.tsx" isQuickEdit="true" isMerged="true" export default function FooterSection() { return (

{/* Main Footer Content */}

{/* Brand Section */}

Brillance

Coding made effortless

{/* Social Media Icons */}

{/* Twitter/X Icon */}

{/* LinkedIn Icon */}

{/* GitHub Icon */}

{/* Navigation Links */}

{/* Product Column */} {/* Product Column */}

Product

Features

Pricing

Integrations

Real-time Previews

Multi-Agent Coding

{/* Company Column */}

Company

About us

Our team

Careers

Brand

Contact

{/* Resources Column */}

Resources

API Reference

Documentation

Community

Support

{/* Bottom Section with Pattern */}

{Array.from({ length: 400 }).map((_, i) => (

))}

) } [V0_FILE]typescriptreact:file="components/effortless-integration.tsx" isMerged="true" import type React from "react" interface EffortlessIntegrationProps { /** Fixed width from Figma: 482px */ width?: number | string /** Fixed height from Figma: 300px */ height?: number | string /** Optional className to pass to root */ className?: string /** Theme palette */ theme?: "light" | "dark" } /** * Effortless Integration – Service integration constellation * Generated from Figma via MCP with exact measurements (482×300px) * Single-file component following the v0-ready pattern used in this repo. */ const EffortlessIntegration: React.FC = ({ width = 482, height = 300, className = "", theme = "dark", }) => { // Design tokens (derived from Figma local variables) const themeVars = theme === "light" ? { "--ei-background": "#f8f9fa", "--ei-center-bg": "#37322f", "--ei-center-text": "#ffffff", } : ({ "--ei-background": "#1f2937", "--ei-center-bg": "#37322f", "--ei-center-text": "#ffffff", } as React.CSSProperties) const imgFrame2147223198 = "/placeholder.svg?height=300&width=482" const imgGroup12006 = "/placeholder.svg?height=358&width=500" const imgGroup12007 = "/placeholder.svg?height=600&width=600" const imgEllipse274 = "/placeholder.svg?height=714&width=677" const imgGroup = "/placeholder.svg?height=28&width=28" const imgFrame2147223251 = "/placeholder.svg?height=42&width=42" const imgFrame = "/placeholder.svg?height=23&width=27" const imgFrame1 = "/placeholder.svg?height=30&width=25" const imgGroup12003 = "/placeholder.svg?height=18&width=18" const imgGroup1 = "/placeholder.svg?height=30&width=20" const imgGroup2 = "/placeholder.svg?height=30&width=20" const imgFrame2 = "/placeholder.svg?height=31&width=29" const imgFrame2147223245 = "/placeholder.svg?height=42&width=42" const imgFrame3 = "/placeholder.svg?height=24&width=24" return (

{/* Exact Figma structure with proper masking and background patterns */}

) } export default EffortlessIntegration [V0_FILE]typescriptreact:file="components/effortless-integration-updated.tsx" isQuickEdit="true" isMerged="true" import type React from "react" interface EffortlessIntegrationProps { /** Fixed width from Figma: 482px */ width?: number | string /** Fixed height from Figma: 300px */ height?: number | string /** Optional className to pass to root */ className?: string } /** * Effortless Integration – Service integration constellation * Three concentric rings with logos positioned on ring axes */ const EffortlessIntegration: React.FC = ({ width = 482, height = 300, className = "" }) => { const centerX = 250 const centerY = 179 const rings = [ { radius: 80, logos: 2 }, // Inner ring - 2 logos { radius: 120, logos: 3 }, // Middle ring - 3 logos { radius: 160, logos: 2 }, // Outer ring - 2 logos ] const getPositionOnRing = (ringRadius: number, angle: number) => ({ x: centerX + ringRadius * Math.cos(angle), y: centerY + ringRadius * Math.sin(angle), }) return (

{/* Outer ring */}

{/* Middle ring */}

{/* Inner ring */}

{/* Company logos positioned systematically on ring axes */}

{/* Central hub */}

{/* GitHub - 180° (left) */}

{/* Slack - 0° (right) */}

{/* Figma - 315° (top-right) */}

{/* Discord - 135° (bottom-left) */}

{/* Notion - 225° (bottom-left diagonal) */}

{/* Stripe - 180° (left) */}

{/* Framer - 0° (right) */}

) } export default EffortlessIntegration [V0_FILE]typescriptreact:file="components/documentation-section.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import type React from "react" // Badge component for consistency function Badge({ icon, text }: { icon: React.ReactNode; text: string }) { return (

{icon}

{text}

) } export default function DocumentationSection() { const [activeCard, setActiveCard] = useState(0) const [animationKey, setAnimationKey] = useState(0) const cards = [ { title: "Plan your schedules", description: "Explore your data, build your dashboard,\nbring your team together.", image: "/modern-dashboard-interface-with-data-visualization.jpg", }, { title: "Data to insights in minutes", description: "Transform raw data into actionable insights\nwith powerful analytics tools.", image: "/analytics-dashboard.png", }, { title: "Collaborate seamlessly", description: "Work together in real-time with your team\nand share insights instantly.", image: "/team-collaboration-interface-with-shared-workspace.jpg", }, ] useEffect(() => { const interval = setInterval(() => { setActiveCard((prev) => (prev + 1) % cards.length) setAnimationKey((prev) => prev + 1) }, 5000) return () => clearInterval(interval) }, [cards.length]) const handleCardClick = (index: number) => { setActiveCard(index) setAnimationKey((prev) => prev + 1) } return (

{/* Header Section */}

} text="Platform Features" />

Streamline your business operations

Manage schedules, analyze data, and collaborate with your team
all in one powerful platform.

{/* Content Section */}

{/* Left Column - Feature Cards */}

{cards.map((card, index) => { const isActive = index === activeCard return (

handleCardClick(index)} className={`w-full overflow-hidden flex flex-col justify-start items-start transition-all duration-300 cursor-pointer ${ isActive ? "bg-white shadow-[0px_0px_0px_0.75px_#E0DEDB_inset]" : "border border-[rgba(2,6,23,0.08)]" }`} >

{card.title}

{card.description}

) })}

{/* Right Column - Image */}

) } [V0_FILE]typescriptreact:file="components/cta-section.tsx" isQuickEdit="true" isMerged="true" "use client" export default function CTASection() { return (

{/* Content */}

{Array.from({ length: 300 }).map((_, i) => (

))}

Ready to transform your business?

Join thousands of businesses streamlining their operations,
managing schedules, and growing with data-driven insights.

Start for free

) } [V0_FILE]typescriptreact:file="components/pricing-section.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" export default function PricingSection() { const [billingPeriod, setBillingPeriod] = useState<"monthly" | "annually">("annually") const pricing = { starter: { monthly: 0, annually: 0, }, professional: { monthly: 20, annually: 16, // 20% discount for annual }, enterprise: { monthly: 200, annually: 160, // 20% discount for annual }, } return (

{/* Header Section */}

{/* Pricing Badge */}

Plans & Pricing

{/* Title */}

Choose the perfect plan for your business

{/* Description */}

Scale your operations with flexible pricing that grows with your team.
Start free, upgrade when you're ready.

{/* Billing Toggle Section */}

{/* Horizontal line */}

{/* Toggle Container */}

{/* Decorative dots */}

{/* Pricing Cards Section */}

{/* Left Decorative Pattern */}

{Array.from({ length: 200 }).map((_, i) => (

))}

{/* Pricing Cards Container */}

{/* Starter Plan */}

{/* Plan Header */}

Starter

Perfect for individuals and small teams getting started.

${pricing.starter[billingPeriod]} ${pricing.starter.annually} ${pricing.starter.monthly}

per {billingPeriod === "monthly" ? "month" : "year"}, per user.

Start for free

{[ "Up to 3 projects", "Basic documentation tools", "Community support", "Standard templates", "Basic analytics", ].map((feature, index) => (

{feature}

))}

{/* Professional Plan (Featured) */}

{/* Plan Header */}

Professional

Advanced features for growing teams and businesses.

${pricing.professional[billingPeriod]} ${pricing.professional.annually} ${pricing.professional.monthly}

per {billingPeriod === "monthly" ? "month" : "year"}, per user.

{/* CTA Button */}

Get started

{[ "Unlimited projects", "Advanced documentation tools", "Priority support", "Custom templates", "Advanced analytics", "Team collaboration", "API access", "Custom integrations", ].map((feature, index) => (

{feature}

))}

{/* Enterprise Plan */}

{/* Plan Header */}

Enterprise

Complete solution for large organizations and enterprises.

${pricing.enterprise[billingPeriod]} ${pricing.enterprise.annually} ${pricing.enterprise.monthly}

per {billingPeriod === "monthly" ? "month" : "year"}, per user.

Contact sales

{[ "Everything in Professional", "Dedicated account manager", "24/7 phone support", "Custom onboarding", "Advanced security features", "SSO integration", "Custom contracts", "White-label options", ].map((feature, index) => (

{feature}

))}

{/* Right Decorative Pattern */}

{Array.from({ length: 200 }).map((_, i) => (

))}

) } [V0_FILE]typescriptreact:file="components/numbers-that-speak.tsx" isQuickEdit="true" isMerged="true" import type React from "react" interface NumbersThatSpeakProps { /** Fixed width from Figma: 482px */ width?: number | string /** Fixed height from Figma: 300px */ height?: number | string /** Optional className to pass to root */ className?: string /** Theme palette */ theme?: "light" | "dark" } /** * Numbers that speak – Financial dashboard with layered charts * Generated from Figma via MCP with exact measurements (482×300px) * Single-file component following the v0-ready pattern used in this repo. */ const NumbersThatSpeak: React.FC = ({ width = 482, height = 300, className = "", theme = "dark", }) => { // Design tokens (derived from Figma local variables) const themeVars = theme === "light" ? { "--nts-surface": "#ffffff", "--nts-text-primary": "#2f3037", "--nts-text-secondary": "rgba(47,48,55,0.8)", "--nts-text-muted": "rgba(55,50,47,0.7)", "--nts-border": "rgba(47,48,55,0.12)", "--nts-shadow": "rgba(47,48,55,0.06)", } : ({ "--nts-surface": "#ffffff", "--nts-text-primary": "#2f3037", "--nts-text-secondary": "rgba(47,48,55,0.8)", "--nts-text-muted": "rgba(55,50,47,0.7)", "--nts-border": "rgba(47,48,55,0.12)", "--nts-shadow": "rgba(47,48,55,0.06)", } as React.CSSProperties) // Figma-exported assets const imgSchedule = "/placeholder.svg?height=271&width=431" const imgYAxisLine = "/placeholder.svg?height=17&width=295" const imgYAxisLine1 = "/placeholder.svg?height=13&width=295" const imgYAxisLine2 = "/placeholder.svg?height=13&width=295" return (

{/* Root positioning container - exact match to Figma */}

{/* Small dashboard card - back layer */}

{/* Medium dashboard card - middle layer */}

{/* Large dashboard card - front layer with full content */}

{/* Header Section */}

Invoiced Revenue

$317,731.00

{/* Chart Container */}

{/* Chart Axis */}

{/* Y-Axis Labels */}

{["500k", "300k", "200k", "100k", "0"].map((label, index) => (

{label}

))}

{/* Grid Lines and X-Axis */}

{/* Grid Lines */}

{/* X-Axis Labels */}

Aug 2023

Aug 2024

{/* Chart Data Bars */}

{[ { height: "83px", color: "#5D4E37" }, { height: "108px", color: "#5D4E37" }, { height: "58px", color: "#5D4E37" }, { height: "89px", color: "#5D4E37" }, { height: "83px", color: "#5D4E37" }, { height: "89px", color: "#5D4E37" }, { height: "83px", color: "#5D4E37" }, { height: "95px", color: "#5D4E37" }, { height: "108px", color: "#5D4E37" }, { height: "76px", color: "#5D4E37" }, { height: "89px", color: "#5D4E37" }, ].map((item, index) => (

))}

) } export default NumbersThatSpeak [V0_FILE]jpg:file="public/images/serene-woman.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/beautiful-young-woman-with-her-head-covered-beauty-girl-hijab-fashion-oriental-style-model-white-modern-interior-Qfx9KJFOEvWIhqFOCnfUbRVfWxbt9G.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/young-woman-back.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/vista-traseira-de-uma-jovem-wVQtjupBsXM0ixqkCPQ1UQrBjGaQ4L.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/elderly-woman-back.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/elegant-old-woman-back-portrait-n9eh2d9i05aWKYsUz84yspJyaRXJrD.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/elderly-woman-hands.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/elegant-old-woman-portrait-yEvSpbl4eidh3SHtd5Ac6AOQcclUka.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/feet-sand.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/secao-baixa-de-mulher-de-pe-na-praia-omlVYxjdzfkRUbYwIjKi2zVxJJpgkX.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/blonde-woman.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/surf-style-looking-blonde-girl-with-hair-blowing-looking-camera-with-no-makeup-look-cYRI7KFags5DRW2dt1iDHfwlAOBKA8.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/skincare-model.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/confident-person-creating-dermatology-cosmetics-ad-promoting-luminous-facial-cream-serum-skincare-beauty-routine-female-model-applying-moisturizer-face-advertise-self-confidence-ZtCj8G6V71VejsTuegOMrRMqahh3U7.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/allevia-logo.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/allevia-logo-CM1j2qPskc7Wul9UjjR547OFaAWEmu.jpg" isMerged="true" [V0_FILE]png:file="public/images/allevia-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/LOGO%20-%20SEM%20FUNDO-fnzR2zIZsUTMucWTMv4TMxXWDkFldA.png" isMerged="true" [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useEffect, useRef, useState } from "react" import { useRouter } from 'next/navigation' import SmartSimpleBrilliant from "../components/smart-simple-brilliant" import YourWorkInSync from "../components/your-work-in-sync" import EffortlessIntegration from "../components/effortless-integration-updated" import NumbersThatSpeak from "../components/numbers-that-speak" import DocumentationSection from "../components/documentation-section" import TestimonialsSection from "../components/testimonials-section" import FAQSection from "../components/faq-section" import PricingSection from "../components/pricing-section" import CTASection from "../components/cta-section" import FooterSection from "../components/footer-section" // Reusable Badge Component function Badge({ icon, text }: { icon: React.ReactNode; text: string }) { return (

{icon}

{text}

) } export default function LandingPage() { const router = useRouter() const [activeCard, setActiveCard] = useState(0) const [progress, setProgress] = useState(0) const mountedRef = useRef(true) useEffect(() => { router.push("/presentation") }, [router]) useEffect(() => { const progressInterval = setInterval(() => { if (!mountedRef.current) return setProgress((prev) => { if (prev >= 100) { if (mountedRef.current) { setActiveCard((current) => (current + 1) % 3) } return 0 } return prev + 2 // 2% every 100ms = 5 seconds total }) }, 100) return () => { clearInterval(progressInterval) mountedRef.current = false } }, []) useEffect(() => { return () => { mountedRef.current = false } }, []) const handleCardClick = (index: number) => { if (!mountedRef.current) return setActiveCard(index) setProgress(0) } const getDashboardContent = () => { switch (activeCard) { case 0: return

Customer Subscription Status and Details

case 1: return

Analytics Dashboard - Real-time Insights

case 2: return

Data Visualization - Charts and Metrics

default: return

Customer Subscription Status and Details

} } return (

{/* Main container with proper margins */}

{/* Left vertical line */}

{/* Right vertical line */}

{/* Navigation */}

Brillance

Products

Pricing

Docs

{/* Hero Section */}

Effortless custom contract
billing by Brillance

Streamline your billing process with seamless automation
for every custom contract, tailored by Brillance.

Start for free

{/* Dashboard Content */}

{/* Main Content */}

{/* Product Image 1 - Plan your schedules */}

Schedules Dashboard - Customer Subscription Management

{/* Product Image 2 - Data to insights */}

{/* Product Image 3 - Data visualization */}

{/* Left decorative pattern */}

{Array.from({ length: 50 }).map((_, i) => (

))}

{/* Feature Cards */} handleCardClick(0)} /> handleCardClick(1)} /> handleCardClick(2)} />

{/* Right decorative pattern */}

{Array.from({ length: 50 }).map((_, i) => (

))}

{/* Social Proof Section */}

} text="Social Proof" />

Confidence backed by results

Our customers achieve more each day
because their tools are simple, powerful, and clear.

{/* Logo Grid */}

{/* Left decorative pattern */}

{Array.from({ length: 50 }).map((_, i) => (

))}

{/* Logo Grid - Responsive grid */} {Array.from({ length: 8 }).map((_, index) => { const isMobileFirstColumn = index % 2 === 0 const isMobileLastColumn = index % 2 === 1 const isDesktopFirstColumn = index % 4 === 0 const isDesktopLastColumn = index % 4 === 3 const isMobileBottomRow = index >= 6 const isDesktopTopRow = index < 4 const isDesktopBottomRow = index >= 4 return (

= 6 ? "border-b" : ""} ${isMobileFirstColumn ? "border-r-[0.5px]" : ""} sm:border-r-[0.5px] sm:border-l-0 ${isDesktopFirstColumn ? "md:border-l" : "md:border-l-[0.5px]"} ${isDesktopLastColumn ? "md:border-r" : "md:border-r-[0.5px]"} ${isDesktopTopRow ? "md:border-b-[0.5px]" : ""} ${isDesktopBottomRow ? "md:border-t-[0.5px] md:border-b" : ""} border-[#E3E2E1] `} >

Acute

) })}

{/* Right decorative pattern */}

{Array.from({ length: 50 }).map((_, i) => (

))}

{/* Bento Grid Section */}

{/* Header Section */}

} text="Bento grid" />

Built for absolute clarity and focused work

Stay focused with tools that organize, connect
and turn information into confident decisions.

{/* Bento Grid Content */}

{/* Left decorative pattern */}

{Array.from({ length: 200 }).map((_, i) => (

))}

{/* Top Left - Smart. Simple. Brilliant. */}

Smart. Simple. Brilliant.

Your data is beautifully organized so you see everything clearly without the clutter.

{/* Top Right - Your work, in sync */}

Your work, in sync

Every update flows instantly across your team and keeps collaboration effortless and fast.

{/* Bottom Left - Effortless integration */}

Effortless integration

All your favorite tools connect in one place and work together seamlessly by design.

{/* Gradient mask for soft bottom edge */}

{/* Bottom Right - Numbers that speak */}

Numbers that speak

Track growth with precision and turn raw data into confident decisions you can trust.

{/* Gradient mask for soft bottom edge */}

{/* Fallback content if component doesn't render */}

Growth Rate

{/* Right decorative pattern */}

{Array.from({ length: 200 }).map((_, i) => (

))}

{/* Documentation Section */} {/* Testimonials Section */} {/* Pricing Section */} {/* FAQ Section */} {/* CTA Section */} {/* Footer Section */}

) } // FeatureCard component definition inline to fix import error function FeatureCard({ title, description, isActive, progress, onClick, }: { title: string description: string isActive: boolean progress: number onClick: () => void }) { return (

{isActive && (

)}

{title}

{description}

) } [V0_FILE]jpeg:file="public/images/dsadsadsa.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/dsadsadsa.jpg-xTHS4hGwCWp2H5bTj8np6DXZUyrxX7.jpeg" isMerged="true" [V0_FILE]jpg:file="public/images/social-media-covers.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Ativo%202%404x-100-dp0i4kbF8fOWPmVgyTByoxkjCkGsnY.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/social-media-feed.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Ativo%203%404x-100-9l4pESUmvA5YvX3Ac1YIRw7VtbqPd6.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/social-covers.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Ativo%202%404x-100-dp0i4kbF8fOWPmVgyTByoxkjCkGsnY.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/social-feed.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Ativo%203%404x-100-9l4pESUmvA5YvX3Ac1YIRw7VtbqPd6.jpg" isMerged="true" [V0_FILE]png:file="public/images/posts/fibromialgia.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Artboard%201%20copy-1-rHzYOKU19N85yyxC7vTPqtDAqeonTc.png" isMerged="true" [V0_FILE]png:file="public/images/posts/movimento.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Artboard%201%20copy%206-qVWK0YqXD7JU8Z2SPVyXmpXpT4EEqx.png" isMerged="true" [V0_FILE]png:file="public/images/posts/sala-espera.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Artboard%201%20copy%205-4yE1H73AupLqME7FNldlcABmfrnr8G.png" isMerged="true" [V0_FILE]png:file="public/images/posts/performance.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Artboard%201%20copy-2-53tTiGWyRd042j3H4LrMTUUoeQlL28.png" isMerged="true" [V0_FILE]png:file="public/images/posts/artrose.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Artboard%201%20copy%207-MMsbr6bCmqziB4wVjpkbRhGl4tqHOo.png" isMerged="true" [V0_FILE]png:file="public/images/posts/vida-sem-dor.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Artboard%201%20copy-LzxeIRplR4Rv2SMlq884uqumccKG6W.png" isMerged="true" [V0_FILE]png:file="public/images/posts/saude-luxo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Artboard%201-uf1qA2ri0bY1PTrIOjNwN0Ev9PYQ6M.png" isMerged="true" [V0_FILE]png:file="public/images/posts/recepcao.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Artboard%203-sizUWeKmNxzzsLGWhgY1jyWmhUfsID.png" isMerged="true" [V0_FILE]png:file="public/images/posts/ambientes.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Artboard%201%20copy%203-yw1cpCIzrp64k4EwGvAHkbvbktDdVP.png" isMerged="true" [V0_FILE]png:file="public/images/posts/consultorio.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Artboard%201%20copy%202-VMAw4JTRCjKA4NYhEid8euAlOuhkSY.png" isMerged="true" [V0_FILE]jpg:file="public/images/facebook-cover.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6b0f93a1-db0d-4ada-aab0-4d9592cd6b91-Recovered-yq7VJSe7uMeq1ticzEfrp5rtrtKwaP.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/linkedin-cover.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Ativo%201%404x-100-da7XfNmJERygWTXAuYEDgBQ4bx7gzi.jpg" isMerged="true" [V0_FILE]typescriptreact:file="app/presentation/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { ChevronLeft, ChevronRight, Activity, Heart, Users, Star, Check, TrendingUp, Shield, Target, Lightbulb, MessageCircle, Layout, Flag } from 'lucide-react' import Image from "next/image" import { motion, AnimatePresence } from "framer-motion" const slides = [ { id: 1, title: "ALLEVIA", subtitle: "Clínica de Dor Premium & Performance Integrada", description: "Documento Estratégico & Diretrizes de Marca", type: "cover", image: "/images/serene-woman.jpg", layout: "cover" }, { id: 2, title: "A Essência da Marca", content: "A Allevia nasce para ser:\nA primeira clínica de dor premium de Recife.", list: [ "Medicina de alta complexidade", "Tecnologia de ponta", "Arquitetura e experiência de luxo", "Atendimento humano", "Performance, bem-estar e longevidade" ], image: "/images/skincare-model.jpg", layout: "split" }, { id: 3, title: "Propósito", content: (

"Aliviar dor, elevar vida."

Mais que tratar sintomas,
a Allevia oferece uma experiência,
um destino premium em saúde.

), image: "/images/elderly-woman-hands.jpg", layout: "split" }, { id: 4, title: "A Allevia não é apenas uma clínica", content: "É um lugar.\nÉ um ritmo.\nÉ uma experiência.\n\nUm símbolo de status para quem busca viver melhor.", image: "/images/feet-sand.jpg", layout: "section" }, { id: 5, title: "Público-Alvo", content: (

Classe A e A+

Focamos em um público exigente, que valoriza exclusividade, conforto e resultados.

Bairros Principais

Jaqueira

Casa Forte

Santana

Parnamirim

Boa Viagem

Pina

), image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/portrait-stylish-brunette-woman-posing-smiling-LZCUepdDau5i3FHq7Nl89X7JuOPvlz.jpg", layout: "split" }, { id: 6, title: "Perfis Atendidos", content: [ { title: "Executivos & empresários", description: "Conveniência, rapidez, excelência", icon: }, { title: "Pacientes com dores crônicas", description: "Artrose, coluna, ombro, quadril\nFibromialgia (predomínio feminino 40–65 anos)", icon: }, { title: "Atletas e corredores", description: "Alta performance\nFidelização\nDestaque: Raquel, maratonista", icon: }, { title: "Longevidade & anti-inflamatório", description: "Soroterapia, nutrologia, infusões", icon: } ], image: "/images/blonde-woman.jpg", layout: "grid" }, { id: 7, title: "Serviços Prioritários", subtitle: "Definidos pelos sócios", content: [ { title: "Regenerativa", description: "Tratamentos avançados de recuperação tecidual", icon: }, { title: "Fibromialgia", description: "Protocolo multidisciplinar especializado", icon: }, { title: "Alta Performance", description: "Dor no atleta e otimização física", icon: } ], image: "/images/young-woman-back.jpg", layout: "list" }, { id: 9, title: "Procedimentos Médicos Premium", subtitle: "Exclusividade e Alta Complexidade", content: [ { title: "Bloqueios & infiltrações", description: "Tratamento minimamente invasivo", icon: }, { title: "Neuromodulação", description: "Tecnologia para controle da dor", icon: }, { title: "Sala de infusão", description: "Terapias endovenosas exclusivas", icon: }, { title: "Consulta premium", description: "R$ 600 | R$ 1.000", icon: }, { title: "Nutrologia antinflamatória", description: "Abordagem metabólica", icon: } ], image: "/images/doctor.jpg", layout: "list" }, { id: 10, title: "Diferenciais Competitivos", content: (

100% particular — único modelo premium na cidade

Arquitetura de luxo

Tecnologia como protagonista

Equipe médica de autoridade

Integração multidisciplinar real

), image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Artboard%201%20copy%205-KcJMtMzZ24pCiFLdluHrvNbrZnw2xW.png", layout: "split" }, { id: 11, title: "Benchmarking", content: (

Concorrentes Diretos

Clínica Soub: subpremium, aceita convênio
Intrador / Real Dor: tradicionais, não premium

Conclusão Allevia

Dominamos um território único em Recife:
luxo + exclusividade + tecnologia + experiência

), image: "/images/serene-woman.jpg", layout: "split" }, { id: 12, title: "Análise SWOT: Pontos Fortes & Fraquezas", content: [ { title: "Pontos Fortes", description: "Exclusividade premium\nAlta margem nos procedimentos\nEquipe médica forte\nEstrutura luxuosa\nPúblico de alto poder aquisitivo", icon: }, { title: "Fraquezas", description: "Marca nova\nPrecisa de branding forte\nDependência inicial de tráfego pago", icon: } ], image: "/images/skincare-model.jpg", layout: "grid" }, { id: 13, title: "Análise SWOT: Oportunidades & Ameaças", content: [ { title: "Oportunidades", description: "Mercado de dor enorme e carente\nFibromialgia (público engajado)\nNicho de atletas\nInfluenciadores de saúde\nKits, e-books, programas premium", icon: }, { title: "Ameaças", description: "Clínicas populares com preços baixos\nAlta expectativa do público A+\nCusto operacional elevado", icon: } ], image: "/images/feet-sand.jpg", layout: "grid" }, { id: 14, title: "Tom de Voz da Marca", content: (

{["Elegante", "Técnico, sem ser duro", "Sofisticado", "Aspiracional", "Premium", "Humanizado"].map((tone, i) => (

{tone}

))}

), image: "/images/elderly-woman-hands.jpg", layout: "split" }, { id: 15, title: "Slogans Oficiais", subtitle: "A verbalização da nossa promessa", content: [ { title: "Posicionamento", description: "Allevia: O endereço da saúde premium.", icon: }, { title: "Conceito", description: "Saúde é o novo luxo.", icon: }, { title: "Promessa", description: "Regenerar o corpo. Refinar a vida.", icon: }, { title: "Exclusividade", description: "Quando apenas o melhor faz sentido.", icon: }, { title: "Assinatura", description: "Allevia: onde a dor cessa e a vida eleva.", icon: } ], image: "/images/serene-woman.jpg", layout: "list" }, { id: 16, title: "Estratégia de Lançamento", content: (

Dividida em 3 fases estratégicas para construir desejo, autoridade e conversão.

Pré-lançamento

Desejo & Curiosidade

Revelação

Autoridade & Encantamento

Lançamento

Conversão Premium

), image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/profile-charming-woman-with-long-fair-haired-perfect-skin-XRLE4mktY8VqTPIqcGTyWN6ilHAPbe.jpg", layout: "split" }, { id: 17, title: "Fase 1: Pré-Lançamento", subtitle: "Objetivo: Desejo & Curiosidade", content: [ { title: "Teasers", description: "Renders e conceito visual", icon: }, { title: "Detalhes", description: "Close de acabamentos premium", icon: }, { title: "Expectativa", description: "Contagem regressiva e 'Em breve'", icon: }, { title: "Equipe", description: "Apresentação dos médicos", icon: }, { title: "Bastidores", description: "Conceito e making of", icon: } ], image: "/images/young-woman-back.jpg", layout: "list" }, { id: 18, title: "Fase 2: Revelação", subtitle: "Objetivo: Autoridade & Encantamento", content: [ { title: "Tour Virtual", description: "Recepção e ambientes", icon: }, { title: "Experiência", description: "Sala de infusão e regeneração", icon: }, { title: "Institucional", description: "Vídeo manifesto da marca", icon: }, { title: "Prova Social", description: "Destaque: Raquel (Maratonista)", icon: } ], image: "/images/blonde-woman.jpg", layout: "list" }, { id: 19, title: "Fase 3: Lançamento", subtitle: "Objetivo: Conversão Premium", content: [ { title: "Abertura", description: "Post oficial 'Inauguramos'", icon: }, { title: "Exclusividade", description: "Lista de espera", icon: }, { title: "Focos", description: "Regenerativa + Fibro + Atleta", icon: }, { title: "Confiança", description: "Depoimentos iniciais", icon: }, { title: "Ação", description: "Chamada para agendamento", icon: } ], image: "/images/doctor.jpg", layout: "list" }, { id: 20, title: "Identidade Visual", content: (

Paleta de Cores

Cinza Exclusivo

Areia Escura

Cinza Premium

Off-White

Tipografia & Estética

Playfair Display

Para títulos e destaques

Plus Jakarta Sans

Para corpo de texto e leitura

), image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/smiling-girl-with-closed-eyes-breathing-fresh-air-TpzwWJkiwadcz7pdfj6J76Igbiab5I.jpg", layout: "split" }, { id: 21, title: "O que a Allevia quer ser", content: [ { title: "A clínica de dor mais sofisticada do Nordeste", description: "", icon: }, { title: "O destino premium da classe A+", description: "", icon: }, { title: "Uma marca aspiracional", description: "", icon: }, { title: "Uma experiência completa", description: "", icon: } ], image: "/images/skincare-model.jpg", layout: "grid" }, { id: 23, title: "Inspiração de Experiência Web", subtitle: "Landing Page Institucional da Allevia", content: (

Explore a experiência completa da marca Allevia através da nossa landing page premium.

Visualizar Landing Page

Clique para abrir em nova aba

), layout: "split", image: "/images/serene-woman.jpg" }, { id: 24, title: "Presença Digital Premium", subtitle: "Capas para Redes Sociais", content: "Identidade visual aplicada em Facebook e LinkedIn para comunicação institucional consistente", type: "social-covers", layout: "social-covers" }, { id: 25, title: "Estratégia de Conteúdo Social", subtitle: "Feed Premium & Campanhas", content: "Grid de posts conceituais mostrando tratamentos, ambiente, lifestyle e autoridade médica da Allevia", type: "social-grid", layout: "social-grid", posts: [ { image: "/images/posts/fibromialgia.png", title: "Fibromialgia" }, { image: "/images/posts/movimento.png", title: "Movimento é Liberdade" }, { image: "/images/posts/sala-espera.png", title: "Ambiente Acolhedor" }, { image: "/images/posts/performance.png", title: "Alta Performance" }, { image: "/images/posts/artrose.png", title: "Artrite & Artrose" }, { image: "/images/posts/vida-sem-dor.png", title: "Vida Sem Dor" }, { image: "/images/posts/saude-luxo.png", title: "Saúde é o Novo Luxo" }, { image: "/images/posts/recepcao.png", title: "Recepção Premium" }, { image: "/images/posts/ambientes.png", title: "Ambientes que Acolhem" }, { image: "/images/posts/consultorio.png", title: "Consultório Moderno" } ] }, { id: 26, title: "ALLEVIA", subtitle: "Dor tratada com ciência.", description: "Vida elevada com experiência.", type: "closing", image: "/images/serene-woman.jpg", layout: "cover" } ] export default function AlleviaPresentation() { const [currentSlide, setCurrentSlide] = useState(0) const [direction, setDirection] = useState<'next' | 'prev'>('next') const nextSlide = () => { setDirection('next') setCurrentSlide((prev) => (prev + 1) % slides.length) } const prevSlide = () => { setDirection('prev') setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length) } useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (e.key === 'ArrowRight') nextSlide() if (e.key === 'ArrowLeft') prevSlide() } window.addEventListener('keydown', handleKeyDown) return () => window.removeEventListener('keydown', handleKeyDown) }, []) const currentSlideData = slides[currentSlide] return (

{/* Navigation Controls */}

{/* Progress Bar */}

{/* Slide Content */} {/* Header */}

{currentSlide + 1} / {slides.length}

{/* Slide Templates */} {currentSlideData.layout === "cover" && (

Apresentação Institucional {currentSlideData.title} {currentSlideData.subtitle}

)} {currentSlideData.layout === "section" && (

{currentSlideData.title}

{typeof currentSlideData.content === "string" ? (

{currentSlideData.content}

) : ( currentSlideData.content )}

)} {currentSlideData.layout === "split" && (

Allevia Clinic

{currentSlideData.title}

{typeof currentSlideData.content === "string" ? (

{currentSlideData.content}

) : ( currentSlideData.content )} {currentSlideData.list && (

{item}

)}

)} {currentSlideData.layout === "grid" && (

{currentSlideData.title}

{Array.isArray(currentSlideData.content) && currentSlideData.content.map((item: any, index: number) => (

{item.icon}

{item.title}

{item.description}

))}

)} {currentSlideData.layout === "list" && (

{currentSlideData.title}

{currentSlideData.subtitle}

{Array.isArray(currentSlideData.content) && currentSlideData.content.map((item: any, index: number) => (

{item.icon}

{item.title}

{item.description}

))}

)} {currentSlideData.layout === "social-grid" && (

{currentSlideData.title}

{currentSlideData.subtitle && (

{currentSlideData.subtitle}

)}

{currentSlideData.content}

{currentSlideData.posts && currentSlideData.posts.map((post: any, index: number) => (

{post.title}

))}

)} {currentSlideData.layout === "social-covers" && (

Social Media

{currentSlideData.title}

{currentSlideData.subtitle && (

{currentSlideData.subtitle}

)}

{currentSlideData.content}

{/* Facebook Cover */}

FACEBOOK MOCKUP

{/* LinkedIn Cover */}

DESIGN SYSTEM

)}

) } [V0_FILE]jpg:file="public/images/portrait-stylish-brunette-woman-posing-smiling.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/portrait-stylish-brunette-woman-posing-smiling-LZCUepdDau5i3FHq7Nl89X7JuOPvlz.jpg" isMerged="true" [V0_FILE]png:file="public/images/artboard-201-20copy-205.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Artboard%201%20copy%205-KcJMtMzZ24pCiFLdluHrvNbrZnw2xW.png" isMerged="true" [V0_FILE]jpg:file="public/images/profile-charming-woman-with-long-fair-haired-perfect-skin.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/profile-charming-woman-with-long-fair-haired-perfect-skin-XRLE4mktY8VqTPIqcGTyWN6ilHAPbe.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/6b0f93a1-db0d-4ada-aab0-4d9592cd6b91-recovered.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6b0f93a1-db0d-4ada-aab0-4d9592cd6b91-Recovered-yq7VJSe7uMeq1ticzEfrp5rtrtKwaP.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/ativo-201-404x-100.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Ativo%201%404x-100-da7XfNmJERygWTXAuYEDgBQ4bx7gzi.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/smiling-girl-with-closed-eyes-breathing-fresh-air.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/smiling-girl-with-closed-eyes-breathing-fresh-air-TpzwWJkiwadcz7pdfj6J76Igbiab5I.jpg" isMerged="true" [V0_FILE]typescriptreact:file="components/ui/input-otp.tsx" isQuickEdit="true" isMerged="true" 'use client' import * as React from 'react' import { OTPInput, OTPInputContext } from 'input-otp' import { MinusIcon } from 'lucide-react' import { cn } from '@/lib/utils' function InputOTP({ className, containerClassName, ...props }: React.ComponentProps & { containerClassName?: string }) { return ( ) } function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function InputOTPSlot({ index, className, ...props }: React.ComponentProps<'div'> & { index: number }) { const inputOTPContext = React.useContext(OTPInputContext) const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {} return (

{char} {hasFakeCaret && (

)}

) } function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) { return (

) } export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } [V0_FILE]css:file="app/globals.css" isEdit="true" @import "tailwindcss"; @custom-variant dark (&:is(.dark *)); :root { /* Updating color palette to Allevia Brand Guidelines */ /* Off-White #dedbd6 */ --background: #dedbd6; /* Cinza Exclusivo #494949 */ --foreground: #494949; /* Card background - slightly lighter for contrast or white */ --card: #f5f4f2; --card-foreground: #494949; --popover: #f5f4f2; --popover-foreground: #494949; /* Areia Escura #767871 */ --primary: #767871; --primary-foreground: #ffffff; /* Cinza Premium #747474 */ --secondary: #747474; --secondary-foreground: #ffffff; --muted: #e5e3df; --muted-foreground: #747474; --accent: #767871; --accent-foreground: #ffffff; --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: #b8b6b2; --input: #b8b6b2; --ring: #767871; --chart-1: #767871; --chart-2: #747474; --chart-3: #494949; --chart-4: #dedbd6; --chart-5: #b8b6b2; --radius: 0rem; --sidebar: #dedbd6; --sidebar-foreground: #494949; --sidebar-primary: #767871; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #e5e3df; --sidebar-accent-foreground: #494949; --sidebar-border: #b8b6b2; --sidebar-ring: #767871; /* Updating font variables */ --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; --font-serif: "Playfair Display", ui-serif, serif; } @theme inline { --font-sans: var(--font-sans); --font-serif: var(--font-serif); --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, 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); --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); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --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); --ease-spring-1: linear(0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001); --ease-spring-2: linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1); --ease-spring-3: linear(0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1); --ease-spring-4: linear(0, 0.009, 0.037 1.7%, 0.153 3.6%, 0.776 10.3%, 1.001, 1.142 16%, 1.185, 1.209 19%, 1.215 19.9% 20.8%, 1.207, 1.184 23.2%, 1.057 27.2%, 1.031 28.7%, 1.014 30.3%, 1.005 31.9%, 1.002 33.6% 36.7%, 1.005 40.2%, 1.015 48.4%, 1.017 53.4%, 1.001); --ease-spring-5: linear(0, 0.01, 0.04 1.6%, 0.161 3.3%, 0.816 9.4%, 1.046, 1.189 14.4%, 1.231, 1.254 17%, 1.259, 1.257 18.6%, 1.236, 1.194 22.3%, 1.057 27%, 0.999 29.4%, 0.955 32.1%, 0.942, 0.935 34.9%, 0.933, 0.939 38.4%, 1 47.3%, 1.011, 1.017 52.6%, 1.016 56.4%, 1 65.2%, 0.996 70.2%, 1.001 87.2%, 1); --animate-caret-blink: caret-blink 1.25s ease-out infinite; @keyframes caret-blink { 0%, 70%, 100% { opacity: 1; } 20%, 50% { opacity: 0; } } } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } .text-balance { text-wrap: balance; } .text-pretty { text-wrap: pretty; } .font-inter { font-family: var(--font-sans), ui-sans-serif, system-ui, sans-serif; } .font-instrument-serif { font-family: var(--font-serif); font-display: swap; } @supports (font-display: swap) { @font-face { font-family: "Playfair Display"; font-display: swap; } } .mix-blend-multiply { mix-blend-mode: multiply; } .backdrop-blur-custom { backdrop-filter: blur(8.25px); } .animate-caret-blink { animation: caret-blink 1.25s ease-out infinite; }

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This