{t('home.contact_title')}

{t('home.name_label')} {t('common.required')} setData('name', e.target.value)} className="w-full p-3 border rounded-lg" /> {errors.name &&

{errors.name}

}

{t('home.email_label')} {t('common.required')} setData('email', e.target.value)} className="w-full p-3 border rounded-lg" /> {errors.email &&

{errors.email}

}

{t('home.message_label')} {t('common.required')}

setData('message', e.target.value)}
                className="w-full p-3 border rounded-lg"
              />
              {errors.message && <p className="text-red-500 text-sm">{errors.message}</p>}
            </div>
            <button
              type="submit"
              disabled={processing}
              className="bg-[#FFB6C1] text-white px-8 py-3 rounded-full font-bold hover:bg-pink-600 transition disabled:opacity-50"
            >
              {processing ? t('home.sending') : t('home.send')}
            </button>
          </form>
        </div>
      </section>

{/* Testimonials Section */}
      <section className="py-20 px-4 bg-gray-50 dark:bg-gray-900">
        <div className="container mx-auto max-w-6xl">
          <h2 className="text-3xl md:text-4xl font-bold text-center mb-12 font-display">{t('home.testimonials_title')}</h2>
          <div className="grid md:grid-cols-3 gap-8">
            <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
              <p className="italic mb-4">"{t('home.testimonial1')}"</p>
              <p className="font-semibold">{t('common.testimonials.anna.name')}</p>
            </div>
            <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
              <p className="italic mb-4">"{t('home.testimonial2')}"</p>
              <p className="font-semibold">{t('common.testimonials.max.name')}</p>
            </div>
            <div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
              <p className="italic mb-4">"{t('home.testimonial3')}"</p>
              <p className="font-semibold">{t('common.testimonials.lisa.name')}</p>
            </div>
          </div>
        </div>
      </section>

{/* FAQ Section */}
      <section className="py-20 px-4 dark:bg-gray-700">
        <div className="container mx-auto max-w-4xl">
          <h2 className="text-3xl md:text-4xl font-bold text-center mb-12 font-display">{t('home.faq_title')}</h2>
          <div className="space-y-4">
            <div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg">
              <h3 className="font-semibold">{t('home.faq1_q')}</h3>
              <p>{t('home.faq1_a')}</p>
            </div>
            <div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg">
              <h3 className="font-semibold">{t('home.faq2_q')}</h3>
              <p>{t('home.faq2_a')}</p>
            </div>
          </div>
        </div>
      </section>
    </MarketingLayout>
  );
};

export default Home;

{t('home.hero_title')}

{t('home.how_title')}

{t('home.step1_title')}

{t('home.step2_title')}

{t('home.step3_title')}

{t('home.features_title')}

{t('home.feature1_title')}

{t('home.feature2_title')}

{t('home.feature3_title')}

{t('home.packages_title')}

{pkg.name}

{t('home.contact_title')}