Initial commit: Omni-Cloud Solutions site
This commit is contained in:
+15
-20
@@ -1,26 +1,21 @@
|
|||||||
@import "tailwindcss";
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--background: #ffffff;
|
--bg-dark: #1a1a2e;
|
||||||
--foreground: #171717;
|
--blue: #0056b3;
|
||||||
}
|
--green: #00a651;
|
||||||
|
--orange: #f39200;
|
||||||
@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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: var(--background);
|
font-family: system-ui, sans-serif;
|
||||||
color: var(--foreground);
|
-webkit-font-smoothing: antialiased;
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
}
|
||||||
|
|
||||||
|
@layer utilities {
|
||||||
|
.bg-gradient-mundo {
|
||||||
|
background: linear-gradient(135deg, var(--bg-dark) 0%, var(--blue) 100%);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+5
-23
@@ -1,33 +1,15 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { Geist, Geist_Mono } from "next/font/google";
|
|
||||||
import "./globals.css";
|
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 = {
|
export const metadata: Metadata = {
|
||||||
title: "Create Next App",
|
title: "Omni-Cloud Solutions | Mundo Telecom",
|
||||||
description: "Generated by create next app",
|
description: "Omnichannel, PABX IP, CRM e mais — soluções integradas de comunicação para sua empresa",
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||||
children,
|
|
||||||
}: Readonly<{
|
|
||||||
children: React.ReactNode;
|
|
||||||
}>) {
|
|
||||||
return (
|
return (
|
||||||
<html
|
<html lang="pt-BR">
|
||||||
lang="en"
|
<body className="bg-mundo-dark text-white antialiased">{children}</body>
|
||||||
className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
|
|
||||||
>
|
|
||||||
<body className="min-h-full flex flex-col">{children}</body>
|
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
+14
-60
@@ -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() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
<main className="min-h-screen">
|
||||||
<main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
|
<Header />
|
||||||
<Image
|
<Hero />
|
||||||
className="dark:invert"
|
<Plans />
|
||||||
src="/next.svg"
|
<Features />
|
||||||
alt="Next.js logo"
|
<Contact />
|
||||||
width={100}
|
<Footer />
|
||||||
height={20}
|
</main>
|
||||||
priority
|
|
||||||
/>
|
|
||||||
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
|
|
||||||
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
|
|
||||||
To get started, edit the page.tsx file.
|
|
||||||
</h1>
|
|
||||||
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
|
||||||
Looking for a starting point or more instructions? Head over to{" "}
|
|
||||||
<a
|
|
||||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
|
||||||
>
|
|
||||||
Templates
|
|
||||||
</a>{" "}
|
|
||||||
or the{" "}
|
|
||||||
<a
|
|
||||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
|
||||||
>
|
|
||||||
Learning
|
|
||||||
</a>{" "}
|
|
||||||
center.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
|
|
||||||
<a
|
|
||||||
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
|
|
||||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
className="dark:invert"
|
|
||||||
src="/vercel.svg"
|
|
||||||
alt="Vercel logomark"
|
|
||||||
width={16}
|
|
||||||
height={16}
|
|
||||||
/>
|
|
||||||
Deploy Now
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
|
|
||||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
Documentation
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,35 @@
|
|||||||
|
export function Contact() {
|
||||||
|
return (
|
||||||
|
<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="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>
|
||||||
|
<p className="text-white/60">Preencha o formulário e nossa equipe entrará em contato em até 24h.</p>
|
||||||
|
</div>
|
||||||
|
<form className="max-w-xl mx-auto space-y-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 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>
|
||||||
|
<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 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">
|
||||||
|
<option value="" className="bg-mundo-dark">Plano de interesse</option>
|
||||||
|
<option value="go" className="bg-mundo-dark">Go — R$ 399/mês</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>
|
||||||
|
<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
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
<div className="mt-12 text-center text-sm text-white/40 space-y-1">
|
||||||
|
<p>📧 diegomartins@mundotelecom.com.br</p>
|
||||||
|
<p>📞 0800 031 1919 | (31) 2011-2000 | (61) 2010-0000 | (11) 5600-0000</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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 (
|
||||||
|
<section id="recursos" className="py-24 bg-gradient-mundo">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<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>
|
||||||
|
<p className="text-white/60 max-w-2xl mx-auto">Módulos integrados que trabalham juntos para transformar sua comunicação.</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{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 className="text-3xl mb-4">{f.icon}</div>
|
||||||
|
<h3 className="text-lg font-bold mb-2">{f.title}</h3>
|
||||||
|
<p className="text-sm text-white/60">{f.desc}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
export function Footer() {
|
||||||
|
return (
|
||||||
|
<footer className="bg-black/50 border-t border-white/10 py-8">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 text-center text-sm text-white/40">
|
||||||
|
<div className="flex items-center justify-center gap-2 mb-4">
|
||||||
|
<div className="w-8 h-8 rounded-lg bg-mundo-green flex items-center justify-center text-white font-bold text-sm">M</div>
|
||||||
|
<span className="font-semibold text-white/60">Mundo Telecom</span>
|
||||||
|
</div>
|
||||||
|
<p>© 2026 Mundo Telecom — Todos os direitos reservados.</p>
|
||||||
|
<p className="mt-1">Omni-Cloud Solutions é uma plataforma integrada de comunicação empresarial.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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 (
|
||||||
|
<header className="fixed top-0 w-full z-50 bg-mundo-dark/90 backdrop-blur-md border-b border-white/10">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
|
||||||
|
<div 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>
|
||||||
|
<div>
|
||||||
|
<span className="font-bold text-lg">Omni-<span className="text-mundo-green">Cloud</span></span>
|
||||||
|
<span className="text-xs text-white/50 block leading-tight">by Mundo Telecom</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<nav className="hidden md:flex items-center gap-8">
|
||||||
|
{navLinks.map((link) => (
|
||||||
|
<a key={link.href} href={link.href} className="text-white/80 hover:text-mundo-orange transition-colors text-sm font-medium">
|
||||||
|
{link.label}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</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">
|
||||||
|
Fale Conosco
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1,43 @@
|
|||||||
|
export function Hero() {
|
||||||
|
return (
|
||||||
|
<section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-mundo">
|
||||||
|
<div className="absolute inset-0 opacity-10" style={{
|
||||||
|
backgroundImage: 'radial-gradient(circle at 25% 25%, #00a651 0%, transparent 50%), radial-gradient(circle at 75% 75%, #f39200 0%, transparent 50%)'
|
||||||
|
}} />
|
||||||
|
<div className="relative z-10 max-w-4xl mx-auto px-4 text-center">
|
||||||
|
<div className="inline-flex items-center gap-2 bg-white/10 backdrop-blur-sm rounded-full px-4 py-1.5 mb-8">
|
||||||
|
<span className="w-2 h-2 rounded-full bg-mundo-green animate-pulse" />
|
||||||
|
<span className="text-sm text-white/80">Plataforma 100% na nuvem</span>
|
||||||
|
</div>
|
||||||
|
<h1 className="text-4xl md:text-6xl lg:text-7xl font-bold leading-tight mb-6">
|
||||||
|
A comunicação da sua empresa
|
||||||
|
<br />
|
||||||
|
<span className="text-mundo-green">em um só lugar</span>
|
||||||
|
</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>
|
||||||
|
<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">
|
||||||
|
Ver Planos
|
||||||
|
</a>
|
||||||
|
<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
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div className="mt-16 grid grid-cols-3 gap-8 max-w-lg mx-auto">
|
||||||
|
{[
|
||||||
|
{ value: "79%+", label: "Margem SaaS" },
|
||||||
|
{ value: "100%", label: "Nuvem" },
|
||||||
|
{ value: "24/7", label: "Suporte" },
|
||||||
|
].map((s) => (
|
||||||
|
<div key={s.value}>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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 (
|
||||||
|
<section id="planos" className="py-24 bg-mundo-dark">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
|
||||||
|
{plans.map((plan) => (
|
||||||
|
<div key={plan.name} className={`relative rounded-xl p-6 transition-all hover:scale-105 ${
|
||||||
|
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-white/5 border border-white/10"
|
||||||
|
}`}>
|
||||||
|
{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">
|
||||||
|
MAIS POPULAR
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<div className="mb-4">
|
||||||
|
<h3 className="text-xl font-bold">{plan.name}</h3>
|
||||||
|
<p className="text-sm text-white/50">{plan.subtitle}</p>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
<p className="text-xs text-white/60 mb-4">{plan.label}</p>
|
||||||
|
<ul className="space-y-2 mb-6">
|
||||||
|
{plan.features.map((f) => (
|
||||||
|
<li key={f} className="flex items-start gap-2 text-sm text-white/80">
|
||||||
|
<span className="text-mundo-green mt-0.5">✓</span>
|
||||||
|
{f}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<div className="text-xs text-white/40 mb-4">SLA: {plan.sla}</div>
|
||||||
|
<a href="#contato" className={`block text-center w-full py-2.5 rounded-lg font-semibold text-sm transition-all ${
|
||||||
|
plan.highlight
|
||||||
|
? "bg-mundo-green hover:bg-green-600 text-white"
|
||||||
|
: "bg-white/10 hover:bg-white/20 text-white border border-white/20"
|
||||||
|
}`}>
|
||||||
|
Contratar
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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;
|
||||||
Reference in New Issue
Block a user