1.1 Cabecera del sitio

<template>
  <el-container>
    <el-header>
      <el-row>
        <el-col :span="4">
          <img src="/assets/logos/company_logo.png" alt="Logo de la empresa"/>
        </el-col>
        <el-col :span="20" class="menu-column">
          <el-menu
            :default-active="currentPath"
            class="navigation-menu"
            mode="horizontal"
            @select="onMenuSelect"
            router
          >
            <el-menu-item index="/soluciones">Soluciones</el-menu-item>
            <el-menu-item index="/industrias">Industrias</el-menu-item>
            <el-sub-menu index="casos">
              <template #title>Centro de Casos</template>
              <el-menu-item index="/casos/referencia">Casos de Referencia</el-menu-item>
              <el-menu-item index="/casos/videos">Videos de Casos</el-menu-item>
            </el-sub-menu>
            <el-menu-item index="/recursos">Recursos</el-menu-item>
            <el-menu-item index="/eventos">Eventos</el-menu-item>
            <el-menu-item index="/marketplace">Marketplace</el-menu-item>
            <el-menu-item index="/nosotros">Acerca de</el-menu-item>
            <el-menu-item index="/inversores">Relaciones con Inversores</el-menu-item>
            <el-icon class="search-icon"><Search /></el-icon>
          </el-menu>
        </el-col>
      </el-row>
    </el-header>
  </el-container>
</template>

<style scoped>
.menu-column {
  width: 900px;
}
.search-icon {
  margin-top: 20px;
  color: #aaa;
}
</style>

1.2 Contenido principle

<template>
  <el-container>
    <el-main>
      <div class="main-content">
        <div class="section-header">Nuestras Soluciones</div>
        <div class="section-description">
          Con un enfoque central en sistemas ERP y soluciones empresariales, ofrecemos una amplia gama de productos
          complementarios que crean un ecosistema integrado para empresas manufactureras y de distribución.
        </div>
      </div>

      <div class="feature-section">
        <el-row>
          <el-text class="section-title">Impulsando el Futuro Digital de las Empresas</el-text>
        </el-row>
        <el-row class="feature-grid">
          <el-col :span="8" v-for="(feature, index) in features" :key="index">
            <div class="feature-card">
              <img :src="feature.image" :alt="feature.title"/>
              <h4>{{ feature.title }}</h4>
              <p>{{ feature.description }}</p>
            </div>
          </el-col>
        </el-row>
      </div>

      <div class="industries-section">
        <el-row>
          <el-text class="section-title">Experiencia Especializada por Industria</el-text>
        </el-row>
        <el-row class="industry-grid">
          <el-col :span="4" v-for="(industry, index) in industries" :key="index">
            <div class="industry-item">
              <img :src="industry.icon" :alt="industry.name"/>
              <p>{{ industry.name }}</p>
            </div>
          </el-col>
        </el-row>
        <el-row justify="center">
          <el-button type="primary" text>Ver todas las industrias</el-button>
        </el-row>
      </div>
    </el-main>
  </el-container>
</template>

<script setup>
const features = [
  {
    image: '/assets/images/features/erp.png',
    title: 'Sistemas ERP',
    description: 'Solución integral para gestión empresarial'
  },
  // más características...
];

const industries = [
  { icon: '/assets/images/industries/manufacturing.png', name: 'Manufactura' },
  { icon: '/assets/images/industries/retail.png', name: 'Comercio Minorista' },
  // más industrias...
];
</script>

<style scoped>
.main-content {
  padding: 120px 20px 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.section-header {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 20px;
}

.feature-section {
  padding: 60px 20px;
  background: #f8f9fa;
}

.industry-grid {
  max-width: 1200px;
  margin: 40px auto;
}

.industry-item {
  text-align: center;
  padding: 20px;
}

.industry-item img {
  width: 60px;
  height: 60px;
  margin-bottom: 10px;
}

.industry-item p {
  font-size: 14px;
  margin: 0;
}
</style>

1.3 Pie de página

<template>
  <el-footer class="site-footer">
    <div class="footer-actions">
      <div class="action-items">
        <div class="action-item">
          <img src="/assets/icons/solutions.svg" alt="Soluciones"/>
          <span>Soluciones</span>
        </div>
        <div class="action-item">
          <img src="/assets/icons/demo.svg" alt="Demostración"/>
          <span>Agendar Demo</span>
        </div>
        <div class="action-item">
          <img src="/assets/icons/pricing.svg" alt="Precios"/>
          <span>Consultar Precios</span>
        </div>
      </div>
    </div>

    <div class="footer-links">
      <div class="link-column" v-for="(column, index) in footerColumns" :key="index">
        <h4>{{ column.title }}</h4>
        <ul>
          <li v-for="(link, linkIndex) in column.links" :key="linkIndex">
            <a :href="link.url">{{ link.text }}</a>
          </li>
        </ul>
      </div>

      <div class="contact-section">
        <h4>Contáctenos</h4>
        <div class="social-media">
          <img src="/assets/social/wechat.png" alt="WeChat"/>
          <img src="/assets/social/weibo.png" alt="Weibo"/>
        </div>
        <div class="phone-info">
          <p>Línea de Atención</p>
          <strong>400-888-9999</strong>
          <a href="/contact" class="contact-button">Formulario de Contacto</a>
        </div>
      </div>
    </div>

    <div class="footer-bottom">
      <div class="social-icons">
        <img src="/assets/social/twitter.png" alt="Twitter"/>
        <img src="/assets/social/linkedin.png" alt="LinkedIn"/>
        <img src="/assets/social/facebook.png" alt="Facebook"/>
      </div>
      <div class="footer-nav">
        <ul>
          <li v-for="item in footerNavItems" :key="item">
            <a href="#">{{ item }}</a>
          </li>
        </ul>
        <el-select v-model="selectedLanguage" placeholder="Idioma" size="small">
          <el-option
            v-for="lang in languages"
            :key="lang.value"
            :label="lang.label"
            :value="lang.value"
          />
        </el-select>
      </div>
    </div>
  </el-footer>
</template>

<script setup>
import { ref } from 'vue';

const selectedLanguage = ref('es');

const languages = [
  { value: 'es', label: 'Español' },
  { value: 'en', label: 'English' },
  { value: 'zh', label: '中文' }
];

const footerColumns = [
  {
    title: 'Recursos',
    links: [
      { text: 'Guías', url: '/guides' },
      { text: 'Documentación', url: '/docs' },
      { text: 'Blog', url: '/blog' }
    ]
  },
  {
    title: 'Soporte',
    links: [
      { text: 'Centro de Ayuda', url: '/help' },
      { text: 'Foros', url: '/forums' },
      { text: 'Contacto', url: '/contact' }
    ]
  }
];

const footerNavItems = ['Privacidad', 'Términos', 'Mapa del Sitio', 'Accesibilidad'];
</script>

<style scoped>
.site-footer {
  background: #2c3e50;
  color: white;
  padding: 40px 20px;
}

.footer-actions {
  max-width: 800px;
  margin: 0 auto 40px;
}

.action-items {
  display: flex;
  justify-content: space-around;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-button {
  display: block;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  text-align: center;
  margin-top: 15px;
  text-decoration: none;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 20px auto 0;
}

.footer-nav ul {
  display: flex;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-nav a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
}
</style>

2. Referencia de propiedades CSS

2.1 Propiedades de borde

/* Estilos de borde */
.elemento {
  border-style: dashed;
  border-width: 3px;
  border-color: #3498db;
  border-radius: 10px;
  border-top: 2px solid #2ecc71;
  border-right: 4px dotted #e74c3c;
}

2.2 Propiedades de fondo

/* Fondos y gradientes */
.fondo-gradiente {
  background-color: #f1c40f;
  background-image: url('/assets/patterns/bg-pattern.png');
  background-repeat: repeat-x;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}

/* Propiedad abreviada */
.fondo-completo {
  background: #ecf0f1 url('/assets/images/bg.jpg') no-repeat center/contain;
}

2.3 Modelado de dimensiones

/* Dimensiones flexibles */
.contenedor {
  width: 80vw;
  height: 50vh;
  min-width: 300px;
  max-width: 1200px;
}

.columna {
  width: calc(50% - 20px);
  height: fit-content;
  padding: 15px;
}

/* Unidades relativas */
.item {
  width: 15rem;
  margin: 2em auto;
}

2.4 Espaciado y márgenes

/* Espaciado consistente */
.seccion {
  margin: 20px auto;
  padding: 30px 25px;
}

.tarjeta {
  margin-top: 15px;
  margin-right: 10px;
  margin-bottom: 15px;
  margin-left: 10px;
  padding: 20px;
}

2.5 Tipografía

/* Estilos de texto */
.titulo-principal {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-align: center;
  text-transform: uppercase;
}

.parrafo {
  color: #333;
  font-size: 1rem;
  line-height: 1.6;
  word-spacing: 0.1em;
}

.enlace {
  text-decoration: none;
  color: #2980b9;
  transition: color 0.3s ease;
}

2.6 Colores y valores

/* Diferentes formatos de color */
.elemento-rojo {
  color: #e74c3c;
  background-color: rgba(231, 76, 60, 0.2);
  border: 1px solid hsl(6, 78%, 57%);
}

.elemento-azul {
  color: rgb(41, 128, 185);
  background-color: hsla(204, 70%, 53%, 0.3);
}