DeveloperDefault

代码示例

<template>
  <section class="py-20 mt-16" id="developer">
    <div class="max-w-7xl mx-auto px-4 text-center">
      <h2 class="text-3xl font-bold mb-4 text-white">{{ $t('home.independentDeveloper.title') }}</h2>
      <img src="xxxxxxxxxxxxx.jpg" alt="Developer Avatar" class="w-32 h-32 rounded-full mx-auto mb-6 shadow-lg">
      <h3 class="text-2xl font-semibold text-white mb-2">{{ $t('home.independentDeveloper.name') }}</h3>
      <p class="text-xl text-gray-400 mb-8">{{ $t('home.independentDeveloper.description') }}</p>
      <div class="flex justify-center">
        <a href="https://x.com/PennyJoly" target="_blank" rel="noopener noreferrer"
           class="bg-yellow-400 text-black px-6 py-3 rounded-full text-lg font-semibold relative group hover:shadow-lg transform hover:scale-[1.02] transition-all duration-300 inline-flex items-center space-x-2"
           aria-label="Follow me on X">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
          </svg>
          <span>{{ $t('home.independentDeveloper.followButton') }}</span>
        </a>
      </div>
    </div>
  </section>
</template>