[V0_FILE]css:file="app/globals.css" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: #0B1437; --foreground: #FFFFFF; --card: #0E1A4D; --card-foreground: #FFFFFF; --popover: #0E1A4D; --popover-foreground: #FFFFFF; --primary: #FF6FB1; --primary-foreground: #FFFFFF; --secondary: #1A2555; --secondary-foreground: #FFFFFF; --muted: #1A2555; --muted-foreground: #E5E7EB; --accent: #7B7CFF; --accent-foreground: #FFFFFF; --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: #1E2A5E; --input: #1A2555; --ring: #FF6FB1; --chart-1: #7B7CFF; --chart-2: #FF6FB1; --chart-3: #A78BFA; --chart-4: #F472B6; --chart-5: #818CF8; --radius: 3rem; --sidebar: #0E1A4D; --sidebar-foreground: #FFFFFF; --sidebar-primary: #FF6FB1; --sidebar-primary-foreground: #FFFFFF; --sidebar-accent: #1A2555; --sidebar-accent-foreground: #FFFFFF; --sidebar-border: #1E2A5E; --sidebar-ring: #FF6FB1; } .dark { --background: #0B1437; --foreground: #FFFFFF; --card: #0E1A4D; --card-foreground: #FFFFFF; --popover: #0E1A4D; --popover-foreground: #FFFFFF; --primary: #FF6FB1; --primary-foreground: #FFFFFF; --secondary: #1A2555; --secondary-foreground: #FFFFFF; --muted: #1A2555; --muted-foreground: #E5E7EB; --accent: #7B7CFF; --accent-foreground: #FFFFFF; --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: #1E2A5E; --input: #1A2555; --ring: #FF6FB1; --chart-1: #7B7CFF; --chart-2: #FF6FB1; --chart-3: #A78BFA; --chart-4: #F472B6; --chart-5: #818CF8; --sidebar: #0E1A4D; --sidebar-foreground: #FFFFFF; --sidebar-primary: #FF6FB1; --sidebar-primary-foreground: #FFFFFF; --sidebar-accent: #1A2555; --sidebar-accent-foreground: #FFFFFF; --sidebar-border: #1E2A5E; --sidebar-ring: #FF6FB1; } @theme inline { --font-sans: 'Inter', 'Inter Fallback', sans-serif; --font-serif: 'Poppins', 'Poppins Fallback', sans-serif; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --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); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } .animate-float { animation: float 3s ease-in-out infinite; } [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": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/fade-in.tsx" isMerged="true" "use client" import React from "react" import { useEffect, useRef, useState } from "react" import { cn } from "@/lib/utils" interface FadeInProps { children: React.ReactNode className?: string delay?: number direction?: "up" | "down" | "left" | "right" } export function FadeIn({ children, className, delay = 0, direction = "up" }: FadeInProps) { const [isVisible, setIsVisible] = useState(false) const ref = useRef(null) useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setIsVisible(true) observer.unobserve(entry.target) } }, { threshold: 0.1, rootMargin: "50px" } ) if (ref.current) { observer.observe(ref.current) } return () => observer.disconnect() }, []) const directionStyles = { up: "translate-y-8", down: "-translate-y-8", left: "translate-x-8", right: "-translate-x-8", } return (

{children}

) } [V0_FILE]typescriptreact:file="components/header.tsx" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import { Button } from "@/components/ui/button" import { Menu, X } from "lucide-react" export function Header() { const [isMenuOpen, setIsMenuOpen] = useState(false) return (

StandOut

{isMenuOpen && (

)}

) } [V0_FILE]typescriptreact:file="components/hero.tsx" isMerged="true" "use client" import Link from "next/link" import Image from "next/image" import { Button } from "@/components/ui/button" import { ArrowRight, CheckCircle2, Play } from "lucide-react" import { FadeIn } from "@/components/fade-in" const benefits = [ "Estratégia personalizada para seu negócio", "Resultados em até 30 dias", "Sem contratos longos ou multas", ] export function Hero() { return (

{/* Background gradient effect */}

{/* Left Content */}

Vagas limitadas para Janeiro

Pare de perder clientes
na internet

Sua empresa merece uma presença digital que vende de verdade. Chega de gastar com marketing que não traz resultado.

{benefit}

Mais de 150 empresas já transformaram seus resultados

{/* Right Image */}

{/* Glow effect behind image */}

Dashboard de marketing digital mostrando resultados

{/* Floating stat card */}

+127%

Aumento em vendas

{/* Floating engagement card */}

98%

Clientes satisfeitos

) } [V0_FILE]typescriptreact:file="components/stats.tsx" isMerged="true" "use client" import { FadeIn } from "@/components/fade-in" const stats = [ { value: "+150", label: "Clientes atendidos" }, { value: "98%", label: "Taxa de satisfação" }, { value: "+5M", label: "De alcance gerado" }, { value: "3", label: "Anos de experiência" }, ] export function Stats() { return (

{stats.map((stat, index) => (

{stat.value}

{stat.label}

))}

) } [V0_FILE]typescriptreact:file="components/about.tsx" isMerged="true" "use client" import Image from "next/image" import { Target, TrendingUp, Handshake, Users, BadgeCheck } from "lucide-react" import { FadeIn } from "@/components/fade-in" const features = [ { icon: Target, title: "Estratégia primeiro", description: "Analisamos seu negócio antes de executar qualquer ação.", }, { icon: TrendingUp, title: "Foco em vendas", description: "Marketing que gera retorno, não só curtidas.", }, { icon: Handshake, title: "Parceria real", description: "Trabalhamos juntos. Seu sucesso é nosso sucesso.", }, { icon: Users, title: "Atendimento próximo", description: "Você sempre sabe o que está acontecendo.", }, ] export function About() { return (

{/* Background elements */}

{/* Left - Image */}

{/* Experience badge */}

Anos de mercado

{/* Right - Content */}

Quem somos

Parceiros de crescimento,
não só fornecedores

A StandOut nasceu da frustração de ver empresas jogando dinheiro fora com marketing que não funciona. Nossa missão é simples: fazer seu investimento valer a pena.

Nada de promessas vazias ou métricas de vaidade. Aqui você tem clareza, transparência e resultados que aparecem no seu caixa.

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

{feature.title}

{feature.description}

))}

) } [V0_FILE]typescriptreact:file="components/cta-section.tsx" isMerged="true" "use client" import Link from "next/link" import Image from "next/image" import { Button } from "@/components/ui/button" import { ArrowRight, Clock, Gift, Shield } from "lucide-react" import { FadeIn } from "@/components/fade-in" const guarantees = [ { icon: Gift, text: "Diagnóstico gratuito" }, { icon: Clock, text: "Resposta em 24h" }, { icon: Shield, text: "Sem compromisso" }, ] export function CTASection() { return (

{/* Background Image */}

{/* Glow effects */}

Oferta por tempo limitado

Descubra o que está impedindo
seu negócio de crescer

Agende uma sessão estratégica gratuita de 30 minutos. Vamos analisar sua presença digital e mostrar exatamente onde você está perdendo clientes.

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

{item.text}

))}

Restam apenas 7 vagas este mês

) } [V0_FILE]typescriptreact:file="components/why-choose-us.tsx" isMerged="true" "use client" import { MessageSquare, LineChart, Zap, Eye, Users, Shield } from "lucide-react" import { FadeIn } from "@/components/fade-in" const reasons = [ { icon: MessageSquare, title: "Comunicação clara", description: "Sem enrolação. Você sempre sabe o que está acontecendo.", }, { icon: Shield, title: "Estratégia antes da execução", description: "Primeiro entendemos, depois executamos com precisão.", }, { icon: LineChart, title: "Decisões baseadas em dados", description: "Analisamos métricas reais para otimizar resultados.", }, { icon: Zap, title: "Respostas rápidas", description: "Não deixamos você esperando. Agilidade faz parte do nosso DNA.", }, { icon: Eye, title: "Transparência total", description: "Acesso a relatórios, investimentos e resultados. Sem surpresas.", }, { icon: Users, title: "Parceria real", description: "Tratamos seu negócio como se fosse nosso.", }, ] export function WhyChooseUs() { return (

Por que escolher a StandOut

Trabalhamos diferente porque acreditamos que resultados exigem compromisso real.

{reasons.map((reason, index) => (

{reason.title}

{reason.description}

))}

) } [V0_FILE]typescriptreact:file="components/footer.tsx" isMerged="true" "use client" import Link from "next/link" import { Button } from "@/components/ui/button" import { MessageCircle } from "lucide-react" import { FadeIn } from "@/components/fade-in" const quickLinks = [ { label: "Sobre", href: "#sobre" }, { label: "Serviços", href: "#servicos" }, { label: "Diferenciais", href: "#diferenciais" }, { label: "Depoimentos", href: "#depoimentos" }, { label: "Contato", href: "#contato" }, ] export function Footer() { return ( ) } [V0_FILE]jpg:file="public/images/growth-chart.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/growth-chart-jV9WAlwTzdMjzffe5SNDYjDrMnONxQ.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/hero-dashboard.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/hero-dashboard-AtiodObk22xJjnKxRD8XlcnB36JfEq.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/team-meeting.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/team-meeting-nyOMSunMRsSQwvgTEVD0FvkaxMiAXz.jpg" isMerged="true" [V0_FILE]typescriptreact:file="components/contact.tsx" isMerged="true" "use client" import React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Label } from "@/components/ui/label" import { Mail, Phone, MapPin, Clock, Send, CheckCircle2, MessageCircle, Shield, Zap } from "lucide-react" import { FadeIn } from "@/components/fade-in" const guarantees = [ { icon: Zap, text: "Resposta em até 24h" }, { icon: Shield, text: "100% confidencial" }, { icon: MessageCircle, text: "Sem compromisso" }, ] export function Contact() { const [isSubmitting, setIsSubmitting] = useState(false) const [isSubmitted, setIsSubmitted] = useState(false) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) await new Promise((resolve) => setTimeout(resolve, 1000)) setIsSubmitting(false) setIsSubmitted(true) } return (

{/* Background effects */}

Fale conosco

Pronto para transformar
seus resultados?

Preencha o formulario e receba um diagnostico gratuito do seu marketing digital.

O que voce vai receber:

{item}

contato@standout.com.br

(11) 99999-9999

Localizacao

Sao Paulo, SP - Brasil

Horario

Seg - Sex, 9h as 18h

{isSubmitted ? (

Mensagem enviada!

Recebemos sua mensagem e entraremos em contato em ate 24 horas.

) : (

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

{item.text}

))}

Nome *

WhatsApp *

Email *

Empresa

Qual seu maior desafio no marketing? *

</div>

<Button 
                    type="submit" 
                    className="w-full bg-primary hover:bg-primary/90 text-primary-foreground shadow-lg shadow-primary/25 hover:shadow-primary/40 transition-all duration-300 hover:scale-[1.02] text-base py-6" 
                    disabled={isSubmitting}
                  >
                    {isSubmitting ? "Enviando..." : "Quero meu diagnostico gratuito"}
                  </Button>
                  
                  <p className="text-center text-xs text-muted-foreground/70">
                    Seus dados estao seguros e nao serao compartilhados.
                  </p>
                </form>
              )}
            </div>
          </FadeIn>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/testimonials.tsx" isMerged="true"
"use client"

import Image from "next/image"
import { Quote, Star } from "lucide-react"
import { FadeIn } from "@/components/fade-in"

const testimonials = [
  {
    content: "A StandOut mudou completamente a forma como enxergamos o marketing. Em 3 meses, nossas vendas aumentaram 40%. O mais impressionante e a clareza com que explicam cada estrategia.",
    author: "Marina Santos",
    role: "Proprietaria, Doces da Mari",
    result: "+40% vendas",
  },
  {
    content: "Depois de perder dinheiro com outras agencias, encontrar a StandOut foi um alivio. Eles realmente entendem de negocios, nao so de redes sociais. Atendimento humano e profissional.",
    author: "Ricardo Oliveira",
    role: "CEO, Tech Solutions",
    result: "ROI 3x maior",
  },
  {
    content: "O diagnostico estrategico foi revelador. Descobrimos erros que cometiamos ha anos. Hoje temos um posicionamento claro e resultados consistentes todo mes.",
    author: "Fernanda Lima",
    role: "Diretora, Clinica Bem-Estar",
    result: "+85 leads/mes",
  },
  {
    content: "A equipe e extremamente profissional e sempre disponivel. Nosso alcance nas redes cresceu absurdamente e comecamos a receber clientes pelo Instagram pela primeira vez.",
    author: "Paulo Henrique",
    role: "Fundador, PH Consultoria",
    result: "+200% alcance",
  },
  {
    content: "Finalmente uma agencia que entrega o que promete. A comunicacao e transparente e os relatorios sao claros. Recomendo de olhos fechados.",
    author: "Camila Rodrigues",
    role: "Socia, Studio Design",
    result: "98% satisfacao",
  },
  {
    content: "A landing page que criaram converteu 3x mais que a anterior. O investimento em trafego finalmente esta dando retorno. Muito satisfeito!",
    author: "Andre Martins",
    role: "Diretor, AM Imoveis",
    result: "3x conversao",
  },
]

export function Testimonials() {
  return (
    <section id="depoimentos" className="py-20 md:py-28 relative overflow-hidden">
      {/* Background effects */}
      <div className="absolute top-1/2 left-0 w-96 h-96 bg-[#7B7CFF]/5 rounded-full blur-3xl pointer-events-none" />
      <div className="absolute top-1/4 right-0 w-96 h-96 bg-[#FF6FB1]/5 rounded-full blur-3xl pointer-events-none" />
      
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
        <div className="text-center max-w-3xl mx-auto">
          <FadeIn>
            <span className="text-primary font-medium text-sm tracking-wider uppercase">Depoimentos</span>
            <h2 className="mt-3 text-3xl md:text-4xl lg:text-5xl font-serif font-bold">
              <span className="bg-gradient-to-r from-[#7B7CFF] to-[#FF6FB1] bg-clip-text text-transparent">
                Resultados que falam
              </span>
              <br />
              <span className="text-foreground">por si mesmos</span>
            </h2>
          </FadeIn>
          <FadeIn delay={100}>
            <p className="mt-4 text-lg text-muted-foreground">
              Veja o que empresas reais conquistaram com a StandOut.
            </p>
          </FadeIn>
        </div>

<div className="mt-16 grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {testimonials.map((testimonial, index) => (
            <FadeIn key={testimonial.author} delay={index * 100}>
              <div className="bg-card p-6 rounded-2xl border border-border hover:border-primary/30 transition-all duration-300 hover:shadow-xl hover:shadow-primary/5 h-full flex flex-col group hover:-translate-y-1">
                {/* Result badge */}
                <div className="inline-flex self-start px-3 py-1 rounded-full bg-gradient-to-r from-[#7B7CFF]/20 to-[#FF6FB1]/20 border border-primary/20 mb-4">
                  <span className="text-sm font-semibold bg-gradient-to-r from-[#7B7CFF] to-[#FF6FB1] bg-clip-text text-transparent">
                    {testimonial.result}
                  </span>
                </div>
                
                <div className="flex gap-1 mb-4">
                  {[...Array(5)].map((_, i) => (
                    <Star key={i} className="h-4 w-4 fill-primary text-primary" />
                  ))}
                </div>
                
                <Quote className="h-8 w-8 text-primary/20 group-hover:text-primary/30 transition-colors" />
                
                <p className="mt-4 text-muted-foreground leading-relaxed flex-1">
                  {testimonial.content}
                </p>
                
                <div className="mt-6 pt-6 border-t border-border flex items-center gap-4">
                  <div className="h-12 w-12 rounded-full bg-gradient-to-br from-[#7B7CFF]/30 to-[#FF6FB1]/30 flex items-center justify-center">
                    <span className="text-lg font-serif font-bold text-foreground">
                      {testimonial.author.split(' ').map(n => n[0]).join('')}
                    </span>
                  </div>
                  <div>
                    <p className="font-serif font-semibold text-foreground">{testimonial.author}</p>
                    <p className="text-sm text-muted-foreground">{testimonial.role}</p>
                  </div>
                </div>
              </div>
            </FadeIn>
          ))}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/services.tsx" isMerged="true"
"use client"

import { Smartphone, Rocket, BarChart3, Globe, MousePointerClick, ArrowRight, CheckCircle2 } from "lucide-react"
import { Button } from "@/components/ui/button"
import Link from "next/link"
import { FadeIn } from "@/components/fade-in"

const services = [
  {
    icon: Smartphone,
    title: "Social Media",
    subtitle: "Gestao de Redes Sociais",
    description: "Presenca digital que gera conexao e vendas.",
    features: [
      "Planejamento estrategico",
      "Calendario editorial",
      "Criacao de conteudo",
      "Relatorios de desempenho",
    ],
    highlight: false,
  },
  {
    icon: Rocket,
    title: "Assessoria Estrategica",
    subtitle: "Crescimento em ate 30 dias",
    description: "Diagnostico completo e plano de acao claro.",
    features: [
      "Diagnostico do negocio",
      "Posicionamento de marca",
      "Plano de acao pratico",
      "Acompanhamento semanal",
    ],
    highlight: true,
    badge: "Mais procurado",
  },
  {
    icon: BarChart3,
    title: "Gestao de Trafego",
    subtitle: "Google Ads e Meta Ads",
    description: "Anuncios que trazem clientes, nao so cliques.",
    features: [
      "Google Ads",
      "Meta Ads (Facebook/Instagram)",
      "Otimizacao continua",
      "Foco em ROI",
    ],
    highlight: false,
  },
  {
    icon: Globe,
    title: "Sites Profissionais",
    subtitle: "Presenca digital de verdade",
    description: "Sites que vendem e passam credibilidade.",
    features: [
      "Design moderno",
      "100% responsivo",
      "SEO otimizado",
      "Alta performance",
    ],
    highlight: false,
  },
  {
    icon: MousePointerClick,
    title: "Landing Pages",
    subtitle: "Alta Conversao",
    description: "Paginas que transformam visitantes em clientes.",
    features: [
      "Foco em conversao",
      "Copy persuasiva",
      "Testes A/B",
      "Integracao WhatsApp",
    ],
    highlight: false,
  },
]

export function Services() {
  return (
    <section id="servicos" className="py-20 md:py-28 bg-card border-y border-border relative overflow-hidden">
      {/* Background effects */}
      <div className="absolute top-0 left-1/4 w-96 h-96 bg-[#7B7CFF]/5 rounded-full blur-3xl pointer-events-none" />
      <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-[#FF6FB1]/5 rounded-full blur-3xl pointer-events-none" />
      
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
        <div className="text-center max-w-3xl mx-auto">
          <FadeIn>
            <span className="text-primary font-medium text-sm tracking-wider uppercase">Nossos servicos</span>
            <h2 className="mt-3 text-3xl md:text-4xl lg:text-5xl font-serif font-bold">
              <span className="bg-gradient-to-r from-[#7B7CFF] to-[#FF6FB1] bg-clip-text text-transparent">
                Tudo que seu negocio precisa
              </span>
              <br />
              <span className="text-foreground">para crescer no digital</span>
            </h2>
          </FadeIn>
          <FadeIn delay={100}>
            <p className="mt-4 text-lg text-muted-foreground">
              Solucoes completas de marketing digital, do planejamento a execucao.
            </p>
          </FadeIn>
        </div>

<div className="mt-16 grid md:grid-cols-2 lg:grid-cols-3 gap-6">
          {services.map((service, index) => (
            <FadeIn key={service.title} delay={index * 100}>
              <div className={`relative p-6 rounded-2xl border transition-all duration-300 hover:shadow-xl hover:-translate-y-1 h-full flex flex-col group ${
                service.highlight 
                  ? 'bg-gradient-to-br from-[#7B7CFF]/10 via-background to-[#FF6FB1]/10 border-primary/30 hover:border-primary/50 shadow-lg shadow-primary/5' 
                  : 'bg-background border-border hover:border-primary/30 hover:shadow-primary/5'
              }`}>
                {service.badge && (
                  <div className="absolute -top-3 left-6 px-3 py-1 rounded-full bg-gradient-to-r from-[#7B7CFF] to-[#FF6FB1] text-white text-xs font-semibold">
                    {service.badge}
                  </div>
                )}
                
                <div className={`h-14 w-14 rounded-xl flex items-center justify-center shrink-0 transition-colors ${
                  service.highlight 
                    ? 'bg-gradient-to-br from-[#7B7CFF] to-[#FF6FB1]' 
                    : 'bg-gradient-to-br from-[#7B7CFF]/20 to-[#FF6FB1]/20 group-hover:from-[#7B7CFF]/30 group-hover:to-[#FF6FB1]/30'
                }`}>
                  <service.icon className={`h-7 w-7 ${service.highlight ? 'text-white' : 'text-primary'}`} />
                </div>
                
                <h3 className="mt-5 text-xl font-serif font-semibold text-foreground">{service.title}</h3>
                <p className="text-sm text-primary font-medium">{service.subtitle}</p>
                <p className="mt-2 text-muted-foreground text-sm">{service.description}</p>
                
                <ul className="mt-5 space-y-2 flex-1">
                  {service.features.map((feature) => (
                    <li key={feature} className="flex items-start gap-2 text-sm text-muted-foreground">
                      <CheckCircle2 className="h-4 w-4 text-primary shrink-0 mt-0.5" />
                      {feature}
                    </li>
                  ))}
                </ul>
                
                <Button 
                  variant={service.highlight ? "default" : "outline"} 
                  asChild 
                  className={`mt-6 w-full transition-all duration-300 ${
                    service.highlight 
                      ? 'bg-primary hover:bg-primary/90 text-primary-foreground shadow-lg shadow-primary/25 hover:shadow-primary/40' 
                      : 'bg-transparent border-border hover:border-primary/30 hover:bg-primary/5 text-foreground'
                  }`}
                >
                  <Link href="#contato">
                    Quero saber mais
                    <ArrowRight className="ml-2 h-4 w-4" />
                  </Link>
                </Button>
              </div>
            </FadeIn>
          ))}
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/whatsapp-button.tsx" isMerged="true"
"use client";

import { MessageCircle } from "lucide-react";

export function WhatsAppButton() {
  const phoneNumber = "5511999999999";
  const message = encodeURIComponent(
    "Olá! Vim pelo site e quero saber mais sobre os serviços da StandOut."
  );

return (
    <a
      href={`https://wa.me/${phoneNumber}?text=${message}`}
      target="_blank"
      rel="noopener noreferrer"
      aria-label="Fale conosco no WhatsApp"
      className="fixed bottom-6 right-6 z-50 flex h-14 w-14 items-center justify-center rounded-full bg-[#25D366] text-white shadow-lg transition-all duration-300 hover:scale-110 hover:shadow-[0_0_20px_rgba(37,211,102,0.5)] md:bottom-8 md:right-8 md:h-16 md:w-16"
    >
      <MessageCircle className="h-7 w-7 md:h-8 md:w-8" fill="currentColor" />
      
      {/* Pulse animation ring */}
      <span className="absolute h-full w-full animate-ping rounded-full bg-[#25D366] opacity-30" />
    </a>
  );
}
[V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true"
import { Header } from "@/components/header"
import { Hero } from "@/components/hero"
import { Stats } from "@/components/stats"
import { About } from "@/components/about"
import { Services } from "@/components/services"
import { CTASection } from "@/components/cta-section"
import { WhyChooseUs } from "@/components/why-choose-us"
import { Testimonials } from "@/components/testimonials"
import { Contact } from "@/components/contact"
import { Footer } from "@/components/footer"
import { WhatsAppButton } from "@/components/whatsapp-button"

export default function Home() {
  return (
    <>
      <Header />
      <WhatsAppButton />
      <main>
        <Hero />
        <Stats />
        <About />
        <Services />
        <CTASection />
        <WhyChooseUs />
        <Testimonials />
        <Contact />
      </main>
      <Footer />
    </>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx"
import React from "react"
import type { Metadata } from 'next'
import { Inter, Poppins } from 'next/font/google'
import { Analytics } from '@vercel/analytics/next'
import './globals.css'

const inter = Inter({ subsets: ["latin"], weight: ["400", "500", "600"], variable: "--font-inter" });
const poppins = Poppins({ subsets: ["latin"], weight: ["600", "700"], variable: "--font-poppins" });

export const metadata: Metadata = {
  title: 'StandOut — Marketing Digital Estratégico',
  description: 'Transformamos sua presença digital em clientes todos os dias. Agência de marketing digital focada em resultados reais para pequenas e médias empresas.',
  generator: 'v0.app',
  icons: {
    icon: [
      {
        url: '/icon-light-32x32.png',
        media: '(prefers-color-scheme: light)',
      },
      {
        url: '/icon-dark-32x32.png',
        media: '(prefers-color-scheme: dark)',
      },
      {
        url: '/icon.svg',
        type: 'image/svg+xml',
      },
    ],
    apple: '/apple-icon.png',
  },
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="pt-BR">
      <body className={`${inter.variable} ${poppins.variable} font-sans antialiased`}>
        {children}
        <Analytics />
      </body>
    </html>
  )
}</article></body></html>

Pare de perder clientes na internet

Parceiros de crescimento, não só fornecedores