Initial functional version of the portfolio chatbot site

src/components/sections/ContactSection.vue

@@ -0,0 +1,170 @@
+<template>
+  <section id="contact" class="py-20 bg-white dark:bg-gray-800">
+    <div class="container mx-auto px-4">
+      <div class="max-w-4xl mx-auto">
+        <h2 class="text-4xl font-bold text-center text-gray-900 dark:text-white mb-12">
+          Contacto
+        </h2>
+
+        <div class="grid md:grid-cols-2 gap-12">
+          <!-- Contact Info -->
+          <div class="space-y-8">
+            <div>
+              <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-6">
+                ¡Hablemos!
+              </h3>
+              <p class="text-gray-600 dark:text-gray-300 mb-6">
+                Estoy siempre abierto a discutir nuevas oportunidades, proyectos interesantes o simplemente charlar sobre tecnología.
+              </p>
+            </div>
+
+            <div class="space-y-4">
+              <div class="flex items-center space-x-4">
+                <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center">
+                  <Mail class="w-6 h-6 text-purple-600 dark:text-purple-400" />
+                </div>
+                <div>
+                  <div class="font-semibold text-gray-900 dark:text-white">Email</div>
+                  <a :href="`mailto:${personal.email}`" class="text-purple-600 hover:underline">
+                    {{ personal.email }}
+                  </a>
+                </div>
+              </div>
+
+              <div class="flex items-center space-x-4">
+                <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center">
+                  <Phone class="w-6 h-6 text-purple-600 dark:text-purple-400" />
+                </div>
+                <div>
+                  <div class="font-semibold text-gray-900 dark:text-white">Teléfono</div>
+                  <span class="text-gray-600 dark:text-gray-300">{{ personal.phone }}</span>
+                </div>
+              </div>
+
+              <div class="flex items-center space-x-4">
+                <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center">
+                  <MapPin class="w-6 h-6 text-purple-600 dark:text-purple-400" />
+                </div>
+                <div>
+                  <div class="font-semibold text-gray-900 dark:text-white">Ubicación</div>
+                  <span class="text-gray-600 dark:text-gray-300">{{ personal.location }}</span>
+                </div>
+              </div>
+            </div>
+
+            <!-- Social Links -->
+            <div class="flex space-x-4">
+              <a
+                v-for="(url, platform) in personal.social"
+                :key="platform"
+                :href="url"
+                target="_blank"
+                class="w-12 h-12 bg-gray-100 dark:bg-gray-700 hover:bg-purple-100 dark:hover:bg-purple-900 rounded-full flex items-center justify-center transition-colors"
+              >
+                <component :is="getSocialIcon(platform)" class="w-6 h-6 text-gray-600 dark:text-gray-300" />
+              </a>
+            </div>
+          </div>
+
+          <!-- Contact Form -->
+          <div class="bg-gray-50 dark:bg-gray-700 rounded-xl p-8">
+            <form @submit.prevent="handleSubmit" class="space-y-6">
+              <div>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  Nombre
+                </label>
+                <input
+                  v-model="form.name"
+                  type="text"
+                  required
+                  class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+                />
+              </div>
+
+              <div>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  Email
+                </label>
+                <input
+                  v-model="form.email"
+                  type="email"
+                  required
+                  class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+                />
+              </div>
+
+              <div>
+                <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  Mensaje
+                </label>
+                <textarea
+                  v-model="form.message"
+                  rows="4"
+                  required
+                  class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white"
+                ></textarea>
+              </div>
+
+              <button
+                type="submit"
+                :disabled="isSubmitting"
+                class="w-full px-6 py-3 bg-purple-600 hover:bg-purple-700 disabled:opacity-50 text-white rounded-lg font-semibold transition-colors"
+              >
+                {{ isSubmitting ? 'Enviando...' : 'Enviar Mensaje' }}
+              </button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Mail, Phone, MapPin, Github, Linkedin, Twitter, Globe } from 'lucide-vue-next'
+
+defineProps({
+  personal: Object
+})
+
+const form = ref({
+  name: '',
+  email: '',
+  message: ''
+})
+
+const isSubmitting = ref(false)
+
+function getSocialIcon(platform) {
+  const icons = {
+    github: Github,
+    linkedin: Linkedin,
+    twitter: Twitter,
+    portfolio: Globe
+  }
+  return icons[platform] || Globe
+}
+
+async function handleSubmit() {
+  isSubmitting.value = true
+  
+  // Simulate form submission
+  await new Promise(resolve => setTimeout(resolve, 1000))
+  
+  // Here you would typically send the form data to your backend
+  console.log('Form submitted:', form.value)
+  
+  // Reset form
+  form.value = {
+    name: '',
+    email: '',
+    message: ''
+  }
+  
+  isSubmitting.value = false
+  
+  // Show success message (you could use a toast notification)
+  alert('¡Mensaje enviado correctamente! Te responderé pronto.')
+}
+</script>