diff --git a/src/app/globals.css b/src/app/globals.css index a2dc41e..751c66d 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,26 +1,21 @@ -@import "tailwindcss"; +@tailwind base; +@tailwind components; +@tailwind utilities; :root { - --background: #ffffff; - --foreground: #171717; -} - -@theme inline { - --color-background: var(--background); - --color-foreground: var(--foreground); - --font-sans: var(--font-geist-sans); - --font-mono: var(--font-geist-mono); -} - -@media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; - } + --bg-dark: #1a1a2e; + --blue: #0056b3; + --green: #00a651; + --orange: #f39200; } body { - background: var(--background); - color: var(--foreground); - font-family: Arial, Helvetica, sans-serif; + font-family: system-ui, sans-serif; + -webkit-font-smoothing: antialiased; +} + +@layer utilities { + .bg-gradient-mundo { + background: linear-gradient(135deg, var(--bg-dark) 0%, var(--blue) 100%); + } } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 976eb90..333a5bb 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,33 +1,15 @@ import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; -const geistSans = Geist({ - variable: "--font-geist-sans", - subsets: ["latin"], -}); - -const geistMono = Geist_Mono({ - variable: "--font-geist-mono", - subsets: ["latin"], -}); - export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "Omni-Cloud Solutions | Mundo Telecom", + description: "Omnichannel, PABX IP, CRM e mais — soluções integradas de comunicação para sua empresa", }; -export default function RootLayout({ - children, -}: Readonly<{ - children: React.ReactNode; -}>) { +export default function RootLayout({ children }: { children: React.ReactNode }) { return ( - - {children} + + {children} ); } diff --git a/src/app/page.tsx b/src/app/page.tsx index 3f36f7c..b337404 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,65 +1,19 @@ -import Image from "next/image"; +import { Header } from "@/components/Header"; +import { Hero } from "@/components/Hero"; +import { Plans } from "@/components/Plans"; +import { Features } from "@/components/Features"; +import { Contact } from "@/components/Contact"; +import { Footer } from "@/components/Footer"; export default function Home() { return ( -
-
- Next.js logo -
-

- To get started, edit the page.tsx file. -

-

- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. -

-
-
- - Vercel logomark - Deploy Now - - - Documentation - -
-
-
+
+
+ + + + +
); } diff --git a/src/components/Contact.tsx b/src/components/Contact.tsx new file mode 100644 index 0000000..6f6737b --- /dev/null +++ b/src/components/Contact.tsx @@ -0,0 +1,35 @@ +export function Contact() { + return ( +
+
+
+

Solicite uma demonstração

+

Preencha o formulário e nossa equipe entrará em contato em até 24h.

+
+
+
+ + +
+ + + + +
+
+

📧 diegomartins@mundotelecom.com.br

+

📞 0800 031 1919 | (31) 2011-2000 | (61) 2010-0000 | (11) 5600-0000

+
+
+
+ ); +} diff --git a/src/components/Features.tsx b/src/components/Features.tsx new file mode 100644 index 0000000..4a9a612 --- /dev/null +++ b/src/components/Features.tsx @@ -0,0 +1,30 @@ +const features = [ + { icon: "📱", title: "Omnichannel", desc: "WhatsApp API, SMS, Voz e Chat em uma única plataforma. Seus clientes escolhem o canal." }, + { icon: "📞", title: "PABX IP", desc: "Central telefônica virtual com DID/DDR, ramais SIP, gravação e URA inteligente." }, + { icon: "🌐", title: "WebRTC", desc: "Chamadas pelo navegador sem instalação. Seu escritório onde você estiver." }, + { icon: "👥", title: "CRM", desc: "Gestão de clientes, histórico de atendimentos e tickets. Dados centralizados." }, + { icon: "🔗", title: "Acesso Remoto", desc: "Agentes trabalham de qualquer lugar com segurança integrada." }, + { icon: "✉️", title: "SMS", desc: "Canal de contingência, disparos em massa e notificações automáticas." }, +]; + +export function Features() { + return ( +
+
+
+

Tudo que sua empresa precisa

+

Módulos integrados que trabalham juntos para transformar sua comunicação.

+
+
+ {features.map((f) => ( +
+
{f.icon}
+

{f.title}

+

{f.desc}

+
+ ))} +
+
+
+ ); +} diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx new file mode 100644 index 0000000..c6d3438 --- /dev/null +++ b/src/components/Footer.tsx @@ -0,0 +1,14 @@ +export function Footer() { + return ( + + ); +} diff --git a/src/components/Header.tsx b/src/components/Header.tsx new file mode 100644 index 0000000..936909a --- /dev/null +++ b/src/components/Header.tsx @@ -0,0 +1,33 @@ +import Image from "next/image"; + +const navLinks = [ + { label: "Planos", href: "#planos" }, + { label: "Recursos", href: "#recursos" }, + { label: "Contato", href: "#contato" }, +]; + +export function Header() { + return ( +
+
+
+
M
+
+ Omni-Cloud + by Mundo Telecom +
+
+ + + Fale Conosco + +
+
+ ); +} diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx new file mode 100644 index 0000000..55087ae --- /dev/null +++ b/src/components/Hero.tsx @@ -0,0 +1,43 @@ +export function Hero() { + return ( +
+
+
+
+ + Plataforma 100% na nuvem +
+

+ A comunicação da sua empresa +
+ em um só lugar +

+

+ Omnichannel, PABX IP, WebRTC, CRM e Acesso Remoto. Tudo integrado em uma plataforma inteligente. +

+
+ + Ver Planos + + + Solicitar Demonstração + +
+
+ {[ + { value: "79%+", label: "Margem SaaS" }, + { value: "100%", label: "Nuvem" }, + { value: "24/7", label: "Suporte" }, + ].map((s) => ( +
+
{s.value}
+
{s.label}
+
+ ))} +
+
+
+ ); +} diff --git a/src/components/Plans.tsx b/src/components/Plans.tsx new file mode 100644 index 0000000..67b7fec --- /dev/null +++ b/src/components/Plans.tsx @@ -0,0 +1,100 @@ +const plans = [ + { + name: "Go", + subtitle: "Micro", + price: 399, + label: "Ideal para MEI / Profissional", + features: ["1 Agente", "5 Ramais", "1 DID (Número Fixo)", "100 Disparos de SMS", "App Mobile", "Suporte Self-Service"], + highlight: false, + sla: "Self-Service", + }, + { + name: "Lite", + subtitle: "Pequeno", + price: 1399, + label: "Ideal para pequenas empresas", + features: ["10 Agentes", "10 Ramais", "800 DAU", "250 Disparos de SMS", "WebRTC", "CRM + Histórico", "Suporte 8×5"], + highlight: true, + sla: "8×5", + }, + { + name: "Plus", + subtitle: "Médio", + price: 2899, + label: "Ideal para empresas em crescimento", + features: ["30 Agentes", "30 Ramais", "2.000 DAU", "500 Disparos de SMS", "WebRTC + CRM", "Gravação de Chamadas", "Suporte 8×5"], + highlight: false, + sla: "8×5", + }, + { + name: "Super", + subtitle: "Grande", + price: 6699, + label: "Ideal para médias empresas", + features: ["50 Agentes", "50 Ramais", "5.000 DAU", "1.000 Disparos de SMS", "SLA 24/7", "CSM Dedicado", "Prioridade Máxima"], + highlight: false, + sla: "24/7", + }, + { + name: "Enterprise", + subtitle: "Custom", + price: 10690, + label: "Solução personalizada", + features: ["100+ Agentes", "Ramais Custom", "10.000+ DAU", "2.500 Disparos de SMS", "CSM Dedicado", "SLA 24/7", "Onboarding Premium"], + highlight: false, + sla: "24/7 + CSM", + }, +]; + +export function Plans() { + return ( +
+
+
+

Planos Omni-Cloud

+

Escolha o plano ideal para o seu negócio. Todos com migração assistida e suporte especializado.

+
+
+ {plans.map((plan) => ( +
+ {plan.highlight && ( +
+ MAIS POPULAR +
+ )} +
+

{plan.name}

+

{plan.subtitle}

+
+
+ R$ {plan.price.toLocaleString("pt-BR")} + /mês +
+

{plan.label}

+
    + {plan.features.map((f) => ( +
  • + ✓ + {f} +
    • + ))} +
+
SLA: {plan.sla}
+ + Contratar + +
+ ))} +
+
+
+ ); +} diff --git a/tailwind.config.ts b/tailwind.config.ts new file mode 100644 index 0000000..643a8fc --- /dev/null +++ b/tailwind.config.ts @@ -0,0 +1,24 @@ +import type { Config } from "tailwindcss"; + +const config: Config = { + content: [ + "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", + "./src/components/**/*.{js,ts,jsx,tsx,mdx}", + "./src/app/**/*.{js,ts,jsx,tsx,mdx}", + ], + theme: { + extend: { + colors: { + mundo: { + blue: "#0056b3", + green: "#00a651", + orange: "#f39200", + dark: "#1a1a2e", + light: "#f8f9fa", + }, + }, + }, + }, + plugins: [], +}; +export default config;