Redesign: identidade visual Mundo Telecom + novas seções
This commit is contained in:
+10
-6
@@ -3,19 +3,23 @@
|
|||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--bg-dark: #1a1a2e;
|
--mundo-primary: #001B4A;
|
||||||
--blue: #0056b3;
|
--mundo-green: #00a651;
|
||||||
--green: #00a651;
|
--mundo-orange: #f39200;
|
||||||
--orange: #f39200;
|
--mundo-dark: #001227;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: system-ui, sans-serif;
|
font-family: "Ubuntu", "Manrope", system-ui, sans-serif;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
||||||
@layer utilities {
|
@layer utilities {
|
||||||
.bg-gradient-mundo {
|
.bg-gradient-mundo {
|
||||||
background: linear-gradient(135deg, var(--bg-dark) 0%, var(--blue) 100%);
|
background: linear-gradient(135deg, var(--mundo-dark) 0%, var(--mundo-primary) 50%, #002d6e 100%);
|
||||||
|
}
|
||||||
|
.bg-gradient-card {
|
||||||
|
background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+7
-2
@@ -3,10 +3,15 @@ import "./globals.css";
|
|||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Omni-Cloud Solutions | Mundo Telecom",
|
title: "Omni-Cloud Solutions | Mundo Telecom",
|
||||||
description: "Omnichannel, PABX IP, CRM e mais — soluções integradas de comunicação para sua empresa",
|
description:
|
||||||
|
"Omnichannel, PABX IP, WebRTC, CRM e Acesso Remoto — soluções integradas de comunicação empresarial da Mundo Telecom.",
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
export default function RootLayout({
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode;
|
||||||
|
}) {
|
||||||
return (
|
return (
|
||||||
<html lang="pt-BR">
|
<html lang="pt-BR">
|
||||||
<body className="bg-mundo-dark text-white antialiased">{children}</body>
|
<body className="bg-mundo-dark text-white antialiased">{children}</body>
|
||||||
|
|||||||
@@ -1,7 +1,11 @@
|
|||||||
import { Header } from "@/components/Header";
|
import { Header } from "@/components/Header";
|
||||||
import { Hero } from "@/components/Hero";
|
import { Hero } from "@/components/Hero";
|
||||||
|
import { Solutions } from "@/components/Solutions";
|
||||||
|
import { About } from "@/components/About";
|
||||||
|
import { Stats } from "@/components/Stats";
|
||||||
import { Plans } from "@/components/Plans";
|
import { Plans } from "@/components/Plans";
|
||||||
import { Features } from "@/components/Features";
|
import { Features } from "@/components/Features";
|
||||||
|
import { Partners } from "@/components/Partners";
|
||||||
import { Contact } from "@/components/Contact";
|
import { Contact } from "@/components/Contact";
|
||||||
import { Footer } from "@/components/Footer";
|
import { Footer } from "@/components/Footer";
|
||||||
|
|
||||||
@@ -10,8 +14,12 @@ export default function Home() {
|
|||||||
<main className="min-h-screen">
|
<main className="min-h-screen">
|
||||||
<Header />
|
<Header />
|
||||||
<Hero />
|
<Hero />
|
||||||
|
<Solutions />
|
||||||
|
<About />
|
||||||
|
<Stats />
|
||||||
<Plans />
|
<Plans />
|
||||||
<Features />
|
<Features />
|
||||||
|
<Partners />
|
||||||
<Contact />
|
<Contact />
|
||||||
<Footer />
|
<Footer />
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
@@ -0,0 +1,30 @@
|
|||||||
|
export function About() {
|
||||||
|
return (
|
||||||
|
<section className="py-24 bg-gradient-mundo">
|
||||||
|
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold mb-8">
|
||||||
|
Um breve resumo sobre a nossa empresa...
|
||||||
|
</h2>
|
||||||
|
<div className="text-xl md:text-2xl text-white/80 leading-relaxed italic">
|
||||||
|
<span className="text-mundo-green text-4xl leading-none block mb-4">
|
||||||
|
“
|
||||||
|
</span>
|
||||||
|
<p>
|
||||||
|
Somos a <strong>Mundo Telecom</strong>, uma operadora e integradora
|
||||||
|
de soluções em telecomunicações, comprometida em atender tanto
|
||||||
|
empresas quanto órgãos públicos. Autorizados pela ANATEL, nossa
|
||||||
|
missão é fornecer alternativas inteligentes que garantam economia,
|
||||||
|
agilidade e qualidade em todas as soluções que oferecemos.
|
||||||
|
</p>
|
||||||
|
<span className="text-mundo-green text-4xl leading-none block mt-4">
|
||||||
|
”
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p className="mt-10 text-white/50">
|
||||||
|
Conheça o <strong className="text-white">Omni-Cloud Solutions</strong>
|
||||||
|
, nossa plataforma de última geração para comunicação empresarial.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
+54
-14
@@ -3,31 +3,71 @@ export function Contact() {
|
|||||||
<section id="contato" className="py-24 bg-mundo-dark">
|
<section id="contato" className="py-24 bg-mundo-dark">
|
||||||
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div className="text-center mb-12">
|
<div className="text-center mb-12">
|
||||||
<h2 className="text-3xl md:text-4xl font-bold mb-4">Solicite uma <span className="text-mundo-orange">demonstração</span></h2>
|
<h2 className="text-3xl md:text-4xl font-bold mb-4">
|
||||||
<p className="text-white/60">Preencha o formulário e nossa equipe entrará em contato em até 24h.</p>
|
Solicite uma <span className="text-mundo-orange">demonstração</span>
|
||||||
|
</h2>
|
||||||
|
<p className="text-white/60">
|
||||||
|
Preencha o formulário e nossa equipe entrará em contato em até 24h.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<form className="max-w-xl mx-auto space-y-5">
|
<form className="max-w-xl mx-auto space-y-5">
|
||||||
<div className="grid sm:grid-cols-2 gap-5">
|
<div className="grid sm:grid-cols-2 gap-5">
|
||||||
<input type="text" placeholder="Nome" required className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 text-white placeholder:text-white/30 focus:outline-none focus:border-mundo-green transition-colors" />
|
<input
|
||||||
<input type="email" placeholder="Email" required className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 text-white placeholder:text-white/30 focus:outline-none focus:border-mundo-green transition-colors" />
|
type="text"
|
||||||
|
placeholder="Nome"
|
||||||
|
required
|
||||||
|
className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 text-white placeholder:text-white/30 focus:outline-none focus:border-mundo-green transition-colors"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
placeholder="Email"
|
||||||
|
required
|
||||||
|
className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 text-white placeholder:text-white/30 focus:outline-none focus:border-mundo-green transition-colors"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<input type="tel" placeholder="Telefone" required className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 text-white placeholder:text-white/30 focus:outline-none focus:border-mundo-green transition-colors" />
|
<input
|
||||||
<input type="text" placeholder="Empresa" className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 text-white placeholder:text-white/30 focus:outline-none focus:border-mundo-green transition-colors" />
|
type="tel"
|
||||||
|
placeholder="Telefone"
|
||||||
|
required
|
||||||
|
className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 text-white placeholder:text-white/30 focus:outline-none focus:border-mundo-green transition-colors"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Empresa"
|
||||||
|
className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 text-white placeholder:text-white/30 focus:outline-none focus:border-mundo-green transition-colors"
|
||||||
|
/>
|
||||||
<select className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 text-white/70 focus:outline-none focus:border-mundo-green transition-colors">
|
<select className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-3 text-white/70 focus:outline-none focus:border-mundo-green transition-colors">
|
||||||
<option value="" className="bg-mundo-dark">Plano de interesse</option>
|
<option value="" className="bg-mundo-dark">
|
||||||
<option value="go" className="bg-mundo-dark">Go — R$ 399/mês</option>
|
Plano de interesse
|
||||||
<option value="lite" className="bg-mundo-dark">Lite — R$ 1.399/mês</option>
|
</option>
|
||||||
<option value="plus" className="bg-mundo-dark">Plus — R$ 2.899/mês</option>
|
<option value="go" className="bg-mundo-dark">
|
||||||
<option value="super" className="bg-mundo-dark">Super — R$ 6.699/mês</option>
|
Go — R$ 399/mês
|
||||||
<option value="enterprise" className="bg-mundo-dark">Enterprise — R$ 10.690/mês</option>
|
</option>
|
||||||
|
<option value="lite" className="bg-mundo-dark">
|
||||||
|
Lite — R$ 1.399/mês
|
||||||
|
</option>
|
||||||
|
<option value="plus" className="bg-mundo-dark">
|
||||||
|
Plus — R$ 2.899/mês
|
||||||
|
</option>
|
||||||
|
<option value="super" className="bg-mundo-dark">
|
||||||
|
Super — R$ 6.699/mês
|
||||||
|
</option>
|
||||||
|
<option value="enterprise" className="bg-mundo-dark">
|
||||||
|
Enterprise — R$ 10.690/mês
|
||||||
|
</option>
|
||||||
</select>
|
</select>
|
||||||
<button type="submit" className="w-full bg-mundo-green hover:bg-green-600 text-white font-bold py-3.5 rounded-lg transition-all hover:scale-[1.02] text-lg">
|
<button
|
||||||
|
type="submit"
|
||||||
|
className="w-full bg-mundo-green hover:bg-green-600 text-white font-bold py-3.5 rounded-lg transition-all hover:scale-[1.02] text-lg"
|
||||||
|
>
|
||||||
Enviar Solicitação
|
Enviar Solicitação
|
||||||
</button>
|
</button>
|
||||||
</form>
|
</form>
|
||||||
<div className="mt-12 text-center text-sm text-white/40 space-y-1">
|
<div className="mt-12 text-center text-sm text-white/40 space-y-1">
|
||||||
<p>📧 diegomartins@mundotelecom.com.br</p>
|
<p>📧 diegomartins@mundotelecom.com.br</p>
|
||||||
<p>📞 0800 031 1919 | (31) 2011-2000 | (61) 2010-0000 | (11) 5600-0000</p>
|
<p>
|
||||||
|
📞 0800 031 1919 | (31) 2011-2000 | (61) 2010-0000 | (11) 5600-0000
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@@ -9,15 +9,22 @@ const features = [
|
|||||||
|
|
||||||
export function Features() {
|
export function Features() {
|
||||||
return (
|
return (
|
||||||
<section id="recursos" className="py-24 bg-gradient-mundo">
|
<section id="recursos" className="py-24 bg-mundo-dark">
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div className="text-center mb-16">
|
<div className="text-center mb-16">
|
||||||
<h2 className="text-3xl md:text-4xl font-bold mb-4">Tudo que sua empresa <span className="text-mundo-orange">precisa</span></h2>
|
<h2 className="text-3xl md:text-4xl font-bold mb-4">
|
||||||
<p className="text-white/60 max-w-2xl mx-auto">Módulos integrados que trabalham juntos para transformar sua comunicação.</p>
|
Tudo que sua empresa <span className="text-mundo-green">precisa</span>
|
||||||
|
</h2>
|
||||||
|
<p className="text-white/60 max-w-2xl mx-auto">
|
||||||
|
Módulos integrados que trabalham juntos para transformar sua comunicação.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
{features.map((f) => (
|
{features.map((f) => (
|
||||||
<div key={f.title} className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6 hover:border-mundo-green/50 transition-all">
|
<div
|
||||||
|
key={f.title}
|
||||||
|
className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6 hover:border-mundo-orange/50 transition-all"
|
||||||
|
>
|
||||||
<div className="text-3xl mb-4">{f.icon}</div>
|
<div className="text-3xl mb-4">{f.icon}</div>
|
||||||
<h3 className="text-lg font-bold mb-2">{f.title}</h3>
|
<h3 className="text-lg font-bold mb-2">{f.title}</h3>
|
||||||
<p className="text-sm text-white/60">{f.desc}</p>
|
<p className="text-sm text-white/60">{f.desc}</p>
|
||||||
|
|||||||
@@ -1,13 +1,46 @@
|
|||||||
export function Footer() {
|
export function Footer() {
|
||||||
return (
|
return (
|
||||||
<footer className="bg-black/50 border-t border-white/10 py-8">
|
<footer className="bg-black/60 border-t border-white/10 py-12">
|
||||||
<div className="max-w-7xl mx-auto px-4 text-center text-sm text-white/40">
|
<div className="max-w-7xl mx-auto px-4">
|
||||||
<div className="flex items-center justify-center gap-2 mb-4">
|
<div className="grid md:grid-cols-3 gap-8 mb-8 text-center md:text-left">
|
||||||
<div className="w-8 h-8 rounded-lg bg-mundo-green flex items-center justify-center text-white font-bold text-sm">M</div>
|
<div>
|
||||||
<span className="font-semibold text-white/60">Mundo Telecom</span>
|
<div className="flex items-center justify-center md:justify-start gap-3 mb-4">
|
||||||
|
<img
|
||||||
|
src="https://mundotelecom.com.br/wp-content/uploads/2024/08/logo-quemsomos.webp"
|
||||||
|
alt="Mundo Telecom"
|
||||||
|
className="h-12 w-auto"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<p className="text-sm text-white/40">
|
||||||
|
Operadora e integradora de soluções em telecomunicações.
|
||||||
|
Autorizados ANATEL.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white font-semibold mb-4">Links Rápidos</h4>
|
||||||
|
<ul className="space-y-2 text-sm text-white/50">
|
||||||
|
<li><a href="#solucoes" className="hover:text-mundo-green transition-colors">Soluções</a></li>
|
||||||
|
<li><a href="#planos" className="hover:text-mundo-green transition-colors">Planos</a></li>
|
||||||
|
<li><a href="#recursos" className="hover:text-mundo-green transition-colors">Recursos</a></li>
|
||||||
|
<li><a href="#contato" className="hover:text-mundo-green transition-colors">Contato</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 className="text-white font-semibold mb-4">Contato</h4>
|
||||||
|
<ul className="space-y-2 text-sm text-white/50">
|
||||||
|
<li>📧 diegomartins@mundotelecom.com.br</li>
|
||||||
|
<li>📞 0800 031 1919</li>
|
||||||
|
<li>📞 (31) 2011-2000</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="border-t border-white/10 pt-8 text-center text-sm text-white/30">
|
||||||
<p>© 2026 Mundo Telecom — Todos os direitos reservados.</p>
|
<p>© 2026 Mundo Telecom — Todos os direitos reservados.</p>
|
||||||
<p className="mt-1">Omni-Cloud Solutions é uma plataforma integrada de comunicação empresarial.</p>
|
<p className="mt-1">
|
||||||
|
Omni-Cloud Solutions é uma plataforma integrada de comunicação
|
||||||
|
empresarial.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
);
|
);
|
||||||
|
|||||||
+19
-13
@@ -1,6 +1,5 @@
|
|||||||
import Image from "next/image";
|
|
||||||
|
|
||||||
const navLinks = [
|
const navLinks = [
|
||||||
|
{ label: "Soluções", href: "#solucoes" },
|
||||||
{ label: "Planos", href: "#planos" },
|
{ label: "Planos", href: "#planos" },
|
||||||
{ label: "Recursos", href: "#recursos" },
|
{ label: "Recursos", href: "#recursos" },
|
||||||
{ label: "Contato", href: "#contato" },
|
{ label: "Contato", href: "#contato" },
|
||||||
@@ -8,23 +7,30 @@ const navLinks = [
|
|||||||
|
|
||||||
export function Header() {
|
export function Header() {
|
||||||
return (
|
return (
|
||||||
<header className="fixed top-0 w-full z-50 bg-mundo-dark/90 backdrop-blur-md border-b border-white/10">
|
<header className="fixed top-0 w-full z-50 bg-mundo-primary/95 backdrop-blur-md border-b border-white/10 she-header">
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-[90px] flex items-center justify-between">
|
||||||
<div className="flex items-center gap-3">
|
<a href="/" className="flex items-center gap-3">
|
||||||
<div className="w-10 h-10 rounded-lg bg-mundo-green flex items-center justify-center text-white font-bold text-lg">M</div>
|
<img
|
||||||
<div>
|
src="https://mundotelecom.com.br/wp-content/uploads/2024/08/logo-quemsomos.webp"
|
||||||
<span className="font-bold text-lg">Omni-<span className="text-mundo-green">Cloud</span></span>
|
alt="Mundo Telecom"
|
||||||
<span className="text-xs text-white/50 block leading-tight">by Mundo Telecom</span>
|
className="h-[60px] w-auto"
|
||||||
</div>
|
/>
|
||||||
</div>
|
</a>
|
||||||
<nav className="hidden md:flex items-center gap-8">
|
<nav className="hidden md:flex items-center gap-8">
|
||||||
{navLinks.map((link) => (
|
{navLinks.map((link) => (
|
||||||
<a key={link.href} href={link.href} className="text-white/80 hover:text-mundo-orange transition-colors text-sm font-medium">
|
<a
|
||||||
|
key={link.href}
|
||||||
|
href={link.href}
|
||||||
|
className="text-white/80 hover:text-mundo-orange transition-colors text-sm font-medium uppercase tracking-wide"
|
||||||
|
>
|
||||||
{link.label}
|
{link.label}
|
||||||
</a>
|
</a>
|
||||||
))}
|
))}
|
||||||
</nav>
|
</nav>
|
||||||
<a href="#contato" className="bg-mundo-green hover:bg-green-600 text-white px-5 py-2 rounded-lg text-sm font-semibold transition-colors">
|
<a
|
||||||
|
href="#contato"
|
||||||
|
className="bg-mundo-green hover:bg-green-600 text-white px-5 py-2.5 rounded-lg text-sm font-semibold transition-all hover:scale-105"
|
||||||
|
>
|
||||||
Fale Conosco
|
Fale Conosco
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+55
-31
@@ -1,42 +1,66 @@
|
|||||||
export function Hero() {
|
export function Hero() {
|
||||||
return (
|
return (
|
||||||
<section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-mundo">
|
<section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-mundo">
|
||||||
<div className="absolute inset-0 opacity-10" style={{
|
{/* Particle-like background */}
|
||||||
backgroundImage: 'radial-gradient(circle at 25% 25%, #00a651 0%, transparent 50%), radial-gradient(circle at 75% 75%, #f39200 0%, transparent 50%)'
|
<div className="absolute inset-0 opacity-20"
|
||||||
}} />
|
style={{
|
||||||
<div className="relative z-10 max-w-4xl mx-auto px-4 text-center">
|
backgroundImage:
|
||||||
<div className="inline-flex items-center gap-2 bg-white/10 backdrop-blur-sm rounded-full px-4 py-1.5 mb-8">
|
"radial-gradient(circle at 20% 50%, #ffffff10 1px, transparent 1px), radial-gradient(circle at 80% 20%, #ffffff10 1px, transparent 1px), radial-gradient(circle at 40% 80%, #ffffff10 1px, transparent 1px), radial-gradient(circle at 70% 60%, #ffffff10 1px, transparent 1px), radial-gradient(circle at 90% 90%, #ffffff10 1px, transparent 1px), radial-gradient(circle at 10% 10%, #ffffff10 1px, transparent 1px)",
|
||||||
<span className="w-2 h-2 rounded-full bg-mundo-green animate-pulse" />
|
backgroundSize: "80px 80px, 100px 100px, 60px 60px, 120px 120px, 90px 90px, 70px 70px",
|
||||||
<span className="text-sm text-white/80">Plataforma 100% na nuvem</span>
|
}}
|
||||||
|
/>
|
||||||
|
<div className="relative z-10 max-w-5xl mx-auto px-4 text-center">
|
||||||
|
{/* Logo grande */}
|
||||||
|
<div className="mb-10">
|
||||||
|
<img
|
||||||
|
src="https://mundotelecom.com.br/wp-content/uploads/2024/07/logo-site1.png"
|
||||||
|
alt="Mundo Telecom"
|
||||||
|
className="mx-auto h-auto max-w-[400px] md:max-w-[600px]"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<h1 className="text-4xl md:text-6xl lg:text-7xl font-bold leading-tight mb-6">
|
|
||||||
A comunicação da sua empresa
|
<h1 className="text-3xl md:text-5xl lg:text-6xl font-bold leading-tight mb-4">
|
||||||
<br />
|
Bem-vindo a um Mundo de{" "}
|
||||||
<span className="text-mundo-green">em um só lugar</span>
|
<span className="text-mundo-green">Conectividade</span> e{" "}
|
||||||
|
<span className="text-mundo-orange">Inovação</span>
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-lg md:text-xl text-white/70 max-w-2xl mx-auto mb-10">
|
|
||||||
Omnichannel, PABX IP, WebRTC, CRM e Acesso Remoto. Tudo integrado em uma plataforma inteligente.
|
<p className="text-lg md:text-xl text-white/70 max-w-3xl mx-auto mb-8">
|
||||||
|
Apresentamos o <strong>Omni-Cloud Solutions</strong> — plataforma
|
||||||
|
omnichannel que integra PABX IP, WebRTC, CRM e Acesso Remoto.
|
||||||
|
A evolução da comunicação empresarial.
|
||||||
</p>
|
</p>
|
||||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
|
||||||
<a href="#planos" className="bg-mundo-green hover:bg-green-600 text-white px-8 py-3.5 rounded-lg font-bold text-lg transition-all hover:scale-105">
|
<a
|
||||||
Ver Planos
|
href="#solucoes"
|
||||||
</a>
|
className="inline-block bg-white/10 hover:bg-white/20 backdrop-blur-sm border-2 border-mundo-orange text-mundo-orange hover:text-white px-8 py-3.5 rounded-lg font-bold text-lg transition-all hover:scale-105"
|
||||||
<a href="#contato" className="bg-white/10 hover:bg-white/20 backdrop-blur-sm border border-white/20 text-white px-8 py-3.5 rounded-lg font-bold text-lg transition-all">
|
>
|
||||||
Solicitar Demonstração
|
Encontre a solução ideal para seu setor ↓
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div className="mt-16 grid grid-cols-3 gap-8 max-w-lg mx-auto">
|
|
||||||
{[
|
{/* Shape divider */}
|
||||||
{ value: "79%+", label: "Margem SaaS" },
|
<div className="absolute bottom-0 left-0 w-full overflow-hidden leading-none">
|
||||||
{ value: "100%", label: "Nuvem" },
|
<svg
|
||||||
{ value: "24/7", label: "Suporte" },
|
viewBox="0 0 1000 100"
|
||||||
].map((s) => (
|
preserveAspectRatio="none"
|
||||||
<div key={s.value}>
|
className="relative w-full h-[80px]"
|
||||||
<div className="text-2xl md:text-3xl font-bold text-mundo-orange">{s.value}</div>
|
>
|
||||||
<div className="text-sm text-white/60">{s.label}</div>
|
<path
|
||||||
</div>
|
className="fill-mundo-dark"
|
||||||
))}
|
opacity="0.33"
|
||||||
</div>
|
d="M473,67.3c-203.9,88.3-263.1-34-320.3,0C66,119.1,0,59.7,0,59.7V0h1000v59.7c0,0-62.1,26.1-94.9,29.3c-32.8,3.3-62.8-12.3-75.8-22.1C806,49.6,745.3,8.7,694.9,4.7S492.4,59,473,67.3z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
className="fill-mundo-dark"
|
||||||
|
opacity="0.66"
|
||||||
|
d="M734,67.3c-45.5,0-77.2-23.2-129.1-39.1c-28.6-8.7-150.3-10.1-254,39.1s-91.7-34.4-149.2,0C115.7,118.3,0,39.8,0,39.8V0h1000v36.5c0,0-28.2-18.5-92.1-18.5C810.2,18.1,775.7,67.3,734,67.3z"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
className="fill-mundo-dark"
|
||||||
|
d="M766.1,28.9c-200-57.5-266,65.5-395.1,19.5C242,1.8,242,5.4,184.8,20.6C128,35.8,132.3,44.9,89.9,52.5C28.6,63.7,0,0,0,0h1000c0,0-9.9,40.9-83.6,48.1S829.6,47,766.1,28.9z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -0,0 +1,40 @@
|
|||||||
|
import Image from "next/image";
|
||||||
|
|
||||||
|
const partners = [
|
||||||
|
{ name: "3CX", src: "https://mundotelecom.com.br/wp-content/uploads/2024/10/logo-3cx-768x280.png" },
|
||||||
|
{ name: "Audiocodes", src: "https://mundotelecom.com.br/wp-content/uploads/2024/10/audiocodes-new-logo-transparent-1-2-1024x178-1-768x134.png" },
|
||||||
|
{ name: "Dell", src: "https://mundotelecom.com.br/wp-content/uploads/2024/10/Dell_Logo-768x233.png" },
|
||||||
|
{ name: "Khomp", src: "https://mundotelecom.com.br/wp-content/uploads/2024/10/Logo_Khomp2.png" },
|
||||||
|
{ name: "Plantec", src: "https://mundotelecom.com.br/wp-content/uploads/2024/10/logotipo-plantec-768x173.webp" },
|
||||||
|
{ name: "Fanvil", src: "https://mundotelecom.com.br/wp-content/uploads/2024/11/fanvil-logo-768x300.webp" },
|
||||||
|
{ name: "Grandstream", src: "https://mundotelecom.com.br/wp-content/uploads/2024/11/granstream.png" },
|
||||||
|
{ name: "Mikrotik", src: "https://mundotelecom.com.br/wp-content/uploads/2024/11/mikrotik-768x219.png" },
|
||||||
|
{ name: "Sangoma", src: "https://mundotelecom.com.br/wp-content/uploads/2024/11/sangoma.webp" },
|
||||||
|
{ name: "Sippulse", src: "https://mundotelecom.com.br/wp-content/uploads/2024/11/sippulse-cores-transparente-768x304.png" },
|
||||||
|
];
|
||||||
|
|
||||||
|
export function Partners() {
|
||||||
|
return (
|
||||||
|
<section className="py-24 bg-gradient-mundo">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<h2 className="text-2xl md:text-3xl font-bold text-center mb-12">
|
||||||
|
CONHEÇA NOSSOS <span className="text-mundo-orange">PARCEIROS</span>
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-3 md:grid-cols-5 gap-8 items-center">
|
||||||
|
{partners.map((p) => (
|
||||||
|
<div
|
||||||
|
key={p.name}
|
||||||
|
className="flex items-center justify-center p-4 bg-white/5 rounded-lg border border-white/10 hover:border-white/30 transition-all grayscale hover:grayscale-0"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={p.src}
|
||||||
|
alt={p.name}
|
||||||
|
className="max-h-10 w-auto object-contain"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
+50
-38
@@ -1,94 +1,106 @@
|
|||||||
const plans = [
|
const plans = [
|
||||||
{
|
{
|
||||||
name: "Go",
|
name: "Go",
|
||||||
subtitle: "Micro",
|
|
||||||
price: 399,
|
price: 399,
|
||||||
label: "Ideal para MEI / Profissional",
|
label: "MEI / Profissional",
|
||||||
features: ["1 Agente", "5 Ramais", "1 DID (Número Fixo)", "100 Disparos de SMS", "App Mobile", "Suporte Self-Service"],
|
features: [
|
||||||
|
"1 Agente", "5 Ramais", "1 DID", "100 SMS", "App Mobile", "Suporte Self",
|
||||||
|
],
|
||||||
highlight: false,
|
highlight: false,
|
||||||
sla: "Self-Service",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Lite",
|
name: "Lite",
|
||||||
subtitle: "Pequeno",
|
|
||||||
price: 1399,
|
price: 1399,
|
||||||
label: "Ideal para pequenas empresas",
|
label: "Pequena Empresa ★",
|
||||||
features: ["10 Agentes", "10 Ramais", "800 DAU", "250 Disparos de SMS", "WebRTC", "CRM + Histórico", "Suporte 8×5"],
|
features: [
|
||||||
|
"10 Agentes", "10 Ramais", "800 DAU", "250 SMS", "WebRTC", "CRM", "Suporte 8×5",
|
||||||
|
],
|
||||||
highlight: true,
|
highlight: true,
|
||||||
sla: "8×5",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Plus",
|
name: "Plus",
|
||||||
subtitle: "Médio",
|
|
||||||
price: 2899,
|
price: 2899,
|
||||||
label: "Ideal para empresas em crescimento",
|
label: "Empresa em Crescimento",
|
||||||
features: ["30 Agentes", "30 Ramais", "2.000 DAU", "500 Disparos de SMS", "WebRTC + CRM", "Gravação de Chamadas", "Suporte 8×5"],
|
features: [
|
||||||
|
"30 Agentes", "30 Ramais", "2.000 DAU", "500 SMS", "WebRTC + CRM", "Gravação", "Suporte 8×5",
|
||||||
|
],
|
||||||
highlight: false,
|
highlight: false,
|
||||||
sla: "8×5",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Super",
|
name: "Super",
|
||||||
subtitle: "Grande",
|
|
||||||
price: 6699,
|
price: 6699,
|
||||||
label: "Ideal para médias empresas",
|
label: "Média Empresa",
|
||||||
features: ["50 Agentes", "50 Ramais", "5.000 DAU", "1.000 Disparos de SMS", "SLA 24/7", "CSM Dedicado", "Prioridade Máxima"],
|
features: [
|
||||||
|
"50 Agentes", "50 Ramais", "5.000 DAU", "1.000 SMS", "SLA 24/7", "CSM Dedicado",
|
||||||
|
],
|
||||||
highlight: false,
|
highlight: false,
|
||||||
sla: "24/7",
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "Enterprise",
|
name: "Enterprise",
|
||||||
subtitle: "Custom",
|
|
||||||
price: 10690,
|
price: 10690,
|
||||||
label: "Solução personalizada",
|
label: "Solução Customizada",
|
||||||
features: ["100+ Agentes", "Ramais Custom", "10.000+ DAU", "2.500 Disparos de SMS", "CSM Dedicado", "SLA 24/7", "Onboarding Premium"],
|
features: [
|
||||||
|
"100+ Agentes", "Ramais Custom", "10.000+ DAU", "2.500 SMS", "CSM + SLA 24/7", "Onboarding Premium",
|
||||||
|
],
|
||||||
highlight: false,
|
highlight: false,
|
||||||
sla: "24/7 + CSM",
|
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
export function Plans() {
|
export function Plans() {
|
||||||
return (
|
return (
|
||||||
<section id="planos" className="py-24 bg-mundo-dark">
|
<section id="planos" className="py-24 bg-gradient-mundo">
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div className="text-center mb-16">
|
<div className="text-center mb-16">
|
||||||
<h2 className="text-3xl md:text-4xl font-bold mb-4">Planos <span className="text-mundo-green">Omni-Cloud</span></h2>
|
<h2 className="text-3xl md:text-4xl font-bold mb-4">
|
||||||
<p className="text-white/60 max-w-2xl mx-auto">Escolha o plano ideal para o seu negócio. Todos com migração assistida e suporte especializado.</p>
|
Planos <span className="text-mundo-orange">Omni-Cloud</span>
|
||||||
|
</h2>
|
||||||
|
<p className="text-white/60 max-w-2xl mx-auto">
|
||||||
|
Escolha o plano ideal. Todos com migração assistida e suporte
|
||||||
|
especializado Mundo Telecom.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
|
||||||
{plans.map((plan) => (
|
{plans.map((plan) => (
|
||||||
<div key={plan.name} className={`relative rounded-xl p-6 transition-all hover:scale-105 ${
|
<div
|
||||||
|
key={plan.name}
|
||||||
|
className={`relative rounded-xl p-6 transition-all hover:scale-105 ${
|
||||||
plan.highlight
|
plan.highlight
|
||||||
? "bg-gradient-to-b from-mundo-green/20 to-mundo-blue/20 border-2 border-mundo-green shadow-lg shadow-mundo-green/20"
|
? "bg-gradient-to-b from-mundo-orange/20 to-mundo-primary/30 border-2 border-mundo-orange shadow-lg shadow-mundo-orange/20"
|
||||||
: "bg-white/5 border border-white/10"
|
: "bg-white/5 border border-white/10"
|
||||||
}`}>
|
}`}
|
||||||
|
>
|
||||||
{plan.highlight && (
|
{plan.highlight && (
|
||||||
<div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-mundo-green text-white text-xs font-bold px-3 py-1 rounded-full">
|
<div className="absolute -top-3 left-1/2 -translate-x-1/2 bg-mundo-orange text-white text-xs font-bold px-3 py-1 rounded-full">
|
||||||
MAIS POPULAR
|
MAIS POPULAR
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
<h3 className="text-xl font-bold mb-1">{plan.name}</h3>
|
||||||
|
<p className="text-xs text-white/50 mb-4">{plan.label}</p>
|
||||||
<div className="mb-4">
|
<div className="mb-4">
|
||||||
<h3 className="text-xl font-bold">{plan.name}</h3>
|
<span className="text-3xl font-bold">
|
||||||
<p className="text-sm text-white/50">{plan.subtitle}</p>
|
R$ {plan.price.toLocaleString("pt-BR")}
|
||||||
</div>
|
</span>
|
||||||
<div className="mb-4">
|
|
||||||
<span className="text-3xl font-bold">R$ {plan.price.toLocaleString("pt-BR")}</span>
|
|
||||||
<span className="text-white/50 text-sm">/mês</span>
|
<span className="text-white/50 text-sm">/mês</span>
|
||||||
</div>
|
</div>
|
||||||
<p className="text-xs text-white/60 mb-4">{plan.label}</p>
|
|
||||||
<ul className="space-y-2 mb-6">
|
<ul className="space-y-2 mb-6">
|
||||||
{plan.features.map((f) => (
|
{plan.features.map((f) => (
|
||||||
<li key={f} className="flex items-start gap-2 text-sm text-white/80">
|
<li
|
||||||
|
key={f}
|
||||||
|
className="flex items-start gap-2 text-sm text-white/80"
|
||||||
|
>
|
||||||
<span className="text-mundo-green mt-0.5">✓</span>
|
<span className="text-mundo-green mt-0.5">✓</span>
|
||||||
{f}
|
{f}
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
<div className="text-xs text-white/40 mb-4">SLA: {plan.sla}</div>
|
<a
|
||||||
<a href="#contato" className={`block text-center w-full py-2.5 rounded-lg font-semibold text-sm transition-all ${
|
href="#contato"
|
||||||
|
className={`block text-center w-full py-2.5 rounded-lg font-semibold text-sm transition-all ${
|
||||||
plan.highlight
|
plan.highlight
|
||||||
? "bg-mundo-green hover:bg-green-600 text-white"
|
? "bg-mundo-orange hover:bg-orange-600 text-white"
|
||||||
: "bg-white/10 hover:bg-white/20 text-white border border-white/20"
|
: "bg-white/10 hover:bg-white/20 text-white border border-white/20"
|
||||||
}`}>
|
}`}
|
||||||
|
>
|
||||||
Contratar
|
Contratar
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -0,0 +1,45 @@
|
|||||||
|
export function Solutions() {
|
||||||
|
return (
|
||||||
|
<section id="solucoes" className="py-24 bg-mundo-dark">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="grid md:grid-cols-2 gap-6">
|
||||||
|
{/* Empresas */}
|
||||||
|
<a
|
||||||
|
href="#planos"
|
||||||
|
className="group relative overflow-hidden rounded-2xl p-8 md:p-12 bg-gradient-to-br from-mundo-primary to-mundo-dark border border-white/10 hover:border-mundo-green/50 transition-all hover:scale-[1.02]"
|
||||||
|
>
|
||||||
|
<div className="text-4xl mb-4">🏢</div>
|
||||||
|
<h3 className="text-2xl font-bold mb-3 text-white group-hover:text-mundo-green transition-colors">
|
||||||
|
Soluções para Empresas
|
||||||
|
</h3>
|
||||||
|
<p className="text-white/60 leading-relaxed">
|
||||||
|
Omnichannel, PABX em Nuvem, WebRTC e CRM. Soluções personalizadas
|
||||||
|
que garantem alta performance e flexibilidade para sua empresa.
|
||||||
|
</p>
|
||||||
|
<div className="mt-6 text-mundo-green text-sm font-semibold flex items-center gap-2 group-hover:gap-3 transition-all">
|
||||||
|
Ver planos →
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
{/* Governo */}
|
||||||
|
<a
|
||||||
|
href="#contato"
|
||||||
|
className="group relative overflow-hidden rounded-2xl p-8 md:p-12 bg-gradient-to-br from-mundo-primary to-mundo-dark border border-white/10 hover:border-mundo-orange/50 transition-all hover:scale-[1.02]"
|
||||||
|
>
|
||||||
|
<div className="text-4xl mb-4">🏛️</div>
|
||||||
|
<h3 className="text-2xl font-bold mb-3 text-white group-hover:text-mundo-orange transition-colors">
|
||||||
|
Soluções para Governo
|
||||||
|
</h3>
|
||||||
|
<p className="text-white/60 leading-relaxed">
|
||||||
|
Infraestrutura robusta e segura para órgãos públicos. Telefonia
|
||||||
|
fixa e plataformas Omnichannel com agilidade e eficiência.
|
||||||
|
</p>
|
||||||
|
<div className="mt-6 text-mundo-orange text-sm font-semibold flex items-center gap-2 group-hover:gap-3 transition-all">
|
||||||
|
Solicitar proposta →
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,63 @@
|
|||||||
|
export function Stats() {
|
||||||
|
return (
|
||||||
|
<section className="py-24 bg-mundo-dark">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="grid md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-3xl md:text-5xl font-bold leading-tight">
|
||||||
|
Nossas <br />
|
||||||
|
<span className="text-mundo-green">Conquistas</span>
|
||||||
|
</h2>
|
||||||
|
<p className="mt-6 text-white/60 max-w-md">
|
||||||
|
Empresa consolidada como excelente opção para EMPRESAS, GOVERNOS e
|
||||||
|
ORGANIZAÇÕES que buscam por agilidade, economia e qualidade.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
{[
|
||||||
|
{
|
||||||
|
icon: "https://mundotelecom.com.br/wp-content/uploads/2024/08/certified-svgrepo-com.png",
|
||||||
|
value: "+20",
|
||||||
|
label: "ANOS DE EXPERIÊNCIA",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: "https://mundotelecom.com.br/wp-content/uploads/2024/08/call-chat-rounded-svgrepo-com.png",
|
||||||
|
value: "+40 mil",
|
||||||
|
label: "LINHAS ATIVAS",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: "https://mundotelecom.com.br/wp-content/uploads/2024/08/data-hosting-cloud-server-infographic-element-svgrepo-com.png",
|
||||||
|
value: "+10 mil",
|
||||||
|
label: "CLIENTES ATENDIDOS",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: "https://mundotelecom.com.br/wp-content/uploads/2024/08/cog-svgrepo-com.png",
|
||||||
|
value: "+15 mil",
|
||||||
|
label: "RAMAIS ATIVOS",
|
||||||
|
},
|
||||||
|
].map((item) => (
|
||||||
|
<div
|
||||||
|
key={item.label}
|
||||||
|
className="bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6 text-center hover:border-mundo-green/30 transition-all"
|
||||||
|
>
|
||||||
|
<div className="w-12 h-12 mx-auto mb-4">
|
||||||
|
<img
|
||||||
|
src={item.icon}
|
||||||
|
alt={item.label}
|
||||||
|
className="w-full h-full object-contain"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="text-2xl md:text-3xl font-bold text-mundo-orange">
|
||||||
|
{item.value}
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-white/50 mt-1 uppercase tracking-wider">
|
||||||
|
{item.label}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user