175 lines
6.5 KiB
Vue
175 lines
6.5 KiB
Vue
<script lang="ts" setup>
|
|
import {ref} from 'vue'
|
|
import {Github, Globe, Linkedin, Mail, MapPin, Phone} from 'lucide-vue-next'
|
|
import type {Profile} from '@/domain/models/Profile'
|
|
|
|
defineProps<{
|
|
profile: Profile
|
|
}>()
|
|
|
|
const form = ref({
|
|
name: '',
|
|
email: '',
|
|
message: ''
|
|
})
|
|
|
|
const isSubmitting = ref(false)
|
|
|
|
function getSocialIcon(platform) {
|
|
const icons = {
|
|
github: Github,
|
|
linkedin: Linkedin,
|
|
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>
|
|
|
|
<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:${profile?.email}`" class="text-purple-600 hover:underline">
|
|
{{ profile?.email }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="profile?.phone" 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 style="display:none">
|
|
<div class="font-semibold text-gray-900 dark:text-white">Teléfono</div>
|
|
<span class="text-gray-600 dark:text-gray-300">{{ profile?.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">{{ profile?.location }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Social Links -->
|
|
<div class="flex space-x-4">
|
|
<a
|
|
v-for="social in profile?.social"
|
|
:key="social.platform"
|
|
:href="social.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(social.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">
|
|
<p class="m-5">¡Hola! Por el momento mi servidor SMTP está de vacaciones 😅.</p>
|
|
<p class="m-5">Si quieres contactarme, envíame un correo electrónico directamente y prometo responderte
|
|
rápido.</p>
|
|
<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 disabled
|
|
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 disabled
|
|
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 disabled
|
|
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 || 1===1"
|
|
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>
|
|
|