feat(03-03): build About page with tech stack badges and Contact page with form
- About: hero bio, 5 tech categories with TechBadge (UCard grid), approach cards, CTA - Contact: hero stats, ContactForm component, contact info from siteConfig, social links, FAQ cards
This commit is contained in:
+120
-3
@@ -1,4 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { siteConfig } from '~/data/site'
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
useSeoMeta({
|
||||
@@ -14,8 +16,123 @@ useSeoMeta({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<h1 class="text-2xl font-bold">{{ t('nav.contact') }}</h1>
|
||||
<p class="text-gray-600 dark:text-gray-400 mt-4">Phase 3 content placeholder</p>
|
||||
<div>
|
||||
<!-- Hero Section -->
|
||||
<section class="py-20 px-4 text-center">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<h1 class="text-4xl sm:text-5xl font-bold mb-6">
|
||||
{{ t('contact.title') }}
|
||||
</h1>
|
||||
<p class="text-xl text-muted mb-8">
|
||||
{{ t('contact.subtitle') }}
|
||||
</p>
|
||||
|
||||
<!-- Stats -->
|
||||
<div class="flex flex-wrap justify-center gap-8">
|
||||
<div class="text-center">
|
||||
<div class="text-2xl font-bold text-primary">24-48h</div>
|
||||
<div class="text-sm text-muted">{{ t('contact.stats.responseTime') }}</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-2xl font-bold text-primary">100%</div>
|
||||
<div class="text-sm text-muted">{{ t('contact.stats.satisfaction') }}</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-2xl font-bold text-primary">Remote</div>
|
||||
<div class="text-sm text-muted">{{ t('contact.stats.collaboration') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Two Column Layout -->
|
||||
<section class="py-16 px-4">
|
||||
<div class="max-w-5xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
<!-- Left: Contact Form -->
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h2 class="text-2xl font-bold">{{ t('contact.form.title') }}</h2>
|
||||
</template>
|
||||
<ContactForm />
|
||||
</UCard>
|
||||
|
||||
<!-- Right: Contact Info + Social -->
|
||||
<div class="flex flex-col gap-6">
|
||||
<!-- Contact Info -->
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h2 class="text-xl font-bold">{{ t('contact.quickContact') }}</h2>
|
||||
</template>
|
||||
<div class="flex flex-col gap-4">
|
||||
<a :href="`mailto:${siteConfig.contact.email}`" class="flex items-center gap-3 hover:text-primary transition-colors">
|
||||
<UIcon name="i-lucide-mail" class="text-xl text-primary shrink-0" />
|
||||
<span>{{ siteConfig.contact.email }}</span>
|
||||
</a>
|
||||
<a :href="`tel:${siteConfig.contact.phone.replace(/\s/g, '')}`" class="flex items-center gap-3 hover:text-primary transition-colors">
|
||||
<UIcon name="i-lucide-phone" class="text-xl text-primary shrink-0" />
|
||||
<span>{{ siteConfig.contact.phone }}</span>
|
||||
</a>
|
||||
<div class="flex items-center gap-3">
|
||||
<UIcon name="i-lucide-map-pin" class="text-xl text-primary shrink-0" />
|
||||
<span>{{ siteConfig.contact.location }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<!-- Social Links -->
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h2 class="text-xl font-bold">{{ t('contact.findMeOn') }}</h2>
|
||||
</template>
|
||||
<div class="flex flex-col gap-3">
|
||||
<a
|
||||
v-for="social in siteConfig.social.filter(s => s.icon !== 'i-lucide-mail')"
|
||||
:key="social.name"
|
||||
:href="social.url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex items-center gap-3 hover:text-primary transition-colors"
|
||||
>
|
||||
<UIcon :name="social.icon" class="text-xl shrink-0" />
|
||||
<span>{{ social.name }}</span>
|
||||
<UIcon name="i-lucide-external-link" class="text-sm text-muted ml-auto" />
|
||||
</a>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ Info Cards -->
|
||||
<section class="py-16 px-4">
|
||||
<div class="max-w-5xl mx-auto">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl font-bold mb-4">{{ t('contact.faq.title') }}</h2>
|
||||
<p class="text-lg text-muted max-w-2xl mx-auto">
|
||||
{{ t('contact.faq.subtitle') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<UCard class="text-center">
|
||||
<UIcon name="i-lucide-clock" class="text-3xl text-primary mb-4 mx-auto" />
|
||||
<h3 class="text-lg font-bold mb-2">{{ t('contact.faq.responseTime.title') }}</h3>
|
||||
<p class="text-muted text-sm">{{ t('contact.faq.responseTime.description') }}</p>
|
||||
</UCard>
|
||||
|
||||
<UCard class="text-center">
|
||||
<UIcon name="i-lucide-building" class="text-3xl text-primary mb-4 mx-auto" />
|
||||
<h3 class="text-lg font-bold mb-2">{{ t('contact.faq.projectTypes.title') }}</h3>
|
||||
<p class="text-muted text-sm">{{ t('contact.faq.projectTypes.description') }}</p>
|
||||
</UCard>
|
||||
|
||||
<UCard class="text-center">
|
||||
<UIcon name="i-lucide-users" class="text-3xl text-primary mb-4 mx-auto" />
|
||||
<h3 class="text-lg font-bold mb-2">{{ t('contact.faq.collaboration.title') }}</h3>
|
||||
<p class="text-muted text-sm">{{ t('contact.faq.collaboration.description') }}</p>
|
||||
</UCard>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user