Vue js landing page - v0 by Vercel

Component Breakdown

1. Header Section

<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>

2. Hero Section

<section class="pt-24 pb-20">
  <!-- Hero Content -->
  <div class="container">
    <!-- Title -->
    <h1>Monitoramento Online</h1>
    <!-- Subtitle -->
    <!-- CTA Button -->
  </div>
</section>

3. About Section

<section id="sobre" class="py-20">
  <!-- About Content -->
  <div class="container">
    <!-- Title -->
    <h2>13+ Anos de Experiência</h2>
    <!-- Description -->
  </div>
</section>

4. Services Section

<section id="servicos" class="py-20">
  <!-- Services Grid -->
  <div class="grid">
    <!-- Service Cards -->
    <!-- Each card has:
         - Icon
         - Title
         - Description -->
  </div>
</section>

5. Footer

<footer class="bg-gray-900">
  <!-- Footer Content -->
  <div class="container">
    <!-- Logo -->
    <!-- Copyright -->
  </div>
</footer>

Key Features

Responsive Design

Mobile-first approach
Breakpoints for different screen sizes
Flexible grid system

Color Scheme

Primary Gold: #FFB800
Primary Blue: #0066FF
Background: Black
Text: White/Gray

Components Used

Lucide Icons for visual elements
Custom CSS variables for brand colors
Tailwind CSS for styling

Interactive Elements

Hover effects on buttons and cards
Smooth transitions
Mobile menu toggle

Performance Considerations

Optimized images
Minimal JavaScript usage
Efficient CSS classes


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>&copy; 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?

First, let's visualize the project structure:

Generating diagram...

Now, let's break down the code organization:

WebGlobal Documentation

structure.md