criar uma landing page com Vue.js. Use essa imagem para as cores do site
sobre a empresa: A WebGlobal é a maior empresa de monitoramento online da América Latina, com mais de 13 anos de experiência. Somos especializados em tecnologia para análise de dados de mercado e fornecimento de informações para empresas.
Desenvolvemos produtos e soluções utilizando Big Data, Machine Learning e Inteligência Artificial para atender negócios que buscam informações estruturadas para orientar decisões e agilizar processos.
LandingPage.vue
I've created a modern, responsive landing page for WebGlobal using Vue.js with the following features:
#FFB800 for gold and #0066FF for blue)The page uses a dark theme to match the company's branding and includes sections for the company introduction, services, and expertise. The design is professional and focuses on readability and user experience.
Would you like me to make any adjustments to the design or add any additional sections?
First, let's visualize the project structure:
Now, let's break down the code organization:
structure.md
<header class="fixed w-full bg-black/90">
<!-- Navigation -->
<nav>
<!-- Logo -->
<img src="logo.png" />
<!-- Menu Items -->
<div class="menu-items">
<!-- Desktop Navigation -->
</div>
<!-- Mobile Menu Button -->
</nav>
</header><section class="pt-24 pb-20">
<!-- Hero Content -->
<div class="container">
<!-- Title -->
<h1>Monitoramento Online</h1>
<!-- Subtitle -->
<!-- CTA Button -->
</div>
</section><section id="sobre" class="py-20">
<!-- About Content -->
<div class="container">
<!-- Title -->
<h2>13+ Anos de Experiência</h2>
<!-- Description -->
</div>
</section><section id="servicos" class="py-20">
<!-- Services Grid -->
<div class="grid">
<!-- Service Cards -->
<!-- Each card has:
- Icon
- Title
- Description -->
</div>
</section><footer class="bg-gray-900">
<!-- Footer Content -->
<div class="container">
<!-- Logo -->
<!-- Copyright -->
</div>
</footer>Responsive Design
Color Scheme
#FFB800#0066FFComponents Used
Interactive Elements
Performance Considerations
And here's the complete Vue component code:
```vue project="WebGlobal Landing Page" file="LandingPage.vue" type="vue"
<template>
<div class="min-h-screen bg-black text-white">
<!-- Header -->
<header class="fixed w-full bg-black/90 backdrop-blur-sm z-50">
<nav class="container mx-auto px-6 py-4 flex items-center justify-between">
<div class="flex items-center">
<img src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Y55WH5lXptjPRIc3Wd2dk8zzXT7Rqc.png" alt="WebGlobal Logo" class="h-8" />
</div>
<div class="hidden md:flex space-x-8">
<a v-for="item in menuItems" :key="item"
:href="`#${item.toLowerCase()}`"
class="text-gray-300 hover:text-primary-gold transition-colors">
{{ item }}
</a>
</div>
<button class="md:hidden text-white">
<MenuIcon class="h-6 w-6" />
</button>
</nav>
</header>
<!-- Hero Section -->
<section class="pt-24 pb-20 px-6">
<div class="container mx-auto">
<div class="max-w-4xl mx-auto text-center space-y-8">
<h1 class="text-5xl md:text-6xl font-bold">
<span class="text-primary-gold">Monitoramento</span>
<span class="text-primary-blue">Online</span>
<br />para sua empresa
</h1>
<p class="text-xl text-gray-400">
A maior empresa de monitoramento online da América Latina
</p>
<button class="bg-primary-blue hover:bg-blue-600 text-white px-8 py-3 rounded-full transition-colors">
Saiba Mais
</button>
</div>
</div>
</section>
<!-- About Section -->
<section id="sobre" class="py-20 bg-gray-900">
<div class="container mx-auto px-6">
<div class="max-w-3xl mx-auto text-center space-y-12">
<h2 class="text-4xl font-bold">
13+ Anos de Experiência
</h2>
<p class="text-lg text-gray-400 leading-relaxed">
Somos especializados em tecnologia para análise de dados de mercado e fornecimento
de informações para empresas. Nossa expertise em Big Data, Machine Learning e
Inteligência Artificial nos permite entregar soluções inovadoras.
</p>
</div>
</div>
</section>
<!-- Services Section -->
<section id="servicos" class="py-20">
<div class="container mx-auto px-6">
<h2 class="text-4xl font-bold text-center mb-16">Nossas Soluções</h2>
<div class="grid md:grid-cols-3 gap-8">
<div v-for="service in services" :key="service.title"
class="bg-gray-900 p-8 rounded-xl hover:transform hover:scale-105 transition-transform">
<component :is="service.icon" class="h-12 w-12 text-primary-gold mb-4" />
<h3 class="text-xl font-bold mb-4">{{ service.title }}</h3>
<p class="text-gray-400">{{ service.description }}</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 py-12">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row justify-between items-center">
<img src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-Y55WH5lXptjPRIc3Wd2dk8zzXT7Rqc.png" alt="WebGlobal Logo" class="h-8 mb-6 md:mb-0" />
<div class="text-gray-400 text-center md:text-right">
<p>© 2024 WebGlobal. Todos os direitos reservados.</p>
</div>
</div>
</div>
</footer>
</div>
</template>
<script setup>
import { MenuIcon, ChartBarIcon, BrainIcon, DatabaseIcon } from 'lucide-vue-next'
const menuItems = ['Sobre', 'Serviços', 'Contato']
const services = [
{
title: 'Big Data',
description: 'Análise avançada de grandes volumes de dados para insights valiosos.',
icon: DatabaseIcon
},
{
title: 'Machine Learning',
description: 'Algoritmos inteligentes que aprendem e evoluem com seus dados.',
icon: BrainIcon
},
{
title: 'Análise de Mercado',
description: 'Monitoramento e análise detalhada do seu mercado em tempo real.',
icon: ChartBarIcon
}
]
</script>
<style>
:root {
--primary-gold: #FFB800;
--primary-blue: #0066FF;
}
.text-primary-gold {
color: var(--primary-gold);
}
.text-primary-blue {
color: var(--primary-blue);
}
.bg-primary-blue {
background-color: var(--primary-blue);
}
</style>This structure provides a clean, maintainable, and scalable landing page. Each section is clearly separated and follows Vue.js best practices. The use of Tailwind CSS classes makes the styling consistent and responsive across all devices.
Would you like me to explain any specific part in more detail?