@smbcloud / pepakbasajawa-web
Code Commits Issues Pulls Cloud Agent CI/CD
copilot/add-i18n-support-for-english
copilot/add-i18n-support-for-english dependabot/npm_and_yarn/astro-5.16.4 dependabot/npm_and_yarn/katex-0.16.27 dependabot/npm_and_yarn/prettier-3.7.4 dependabot/npm_and_yarn/tailwindcss-4.1.16 dependabot/npm_and_yarn/tailwindcss/vite-4.1.16 dependabot/npm_and_yarn/typescript-eslint-8.46.2 dependabot/npm_and_yarn/typescript-eslint/parser-8.46.2 development main
astro 96 lines 1.88 KB
Raw
1 ---
2 import IndexLayout from '@/layouts/IndexLayout.astro'
3 import { SITE } from '@/config'
4 import { getLangFromUrl, useTranslations } from '@/i18n/utils'
5
6 const currentLang = getLangFromUrl(Astro.url)
7 const t = useTranslations(currentLang)
8 ---
9
10 <IndexLayout title={`${t('contact.title')} - ${SITE.title}`} description={t('contact.subtitle')}>
11 <div class="contact-page prose">
12 <h1>{t('contact.title')}</h1>
13
14 <p>
15 {t('contact.subtitle')}
16 </p>
17
18 <div class="contact-info">
19 <h2>{t('contact.getInTouch')}</h2>
20 <p>{t('contact.reachOut')}</p>
21
22 <div class="email-section">
23 <a href="mailto:splitfire@setoelkahfi.se" class="email-link"> splitfire@setoelkahfi.se </a>
24 </div>
25
26 <p>{t('contact.response')}</p>
27 </div>
28
29 <div class="topics">
30 <h2>{t('contact.whatToAsk')}</h2>
31 <ul>
32 <li>{t('contact.question1')}</li>
33 <li>{t('contact.question2')}</li>
34 <li>{t('contact.question3')}</li>
35 <li>{t('contact.question4')}</li>
36 <li>{t('contact.question5')}</li>
37 </ul>
38 </div>
39 </div>
40 </IndexLayout>
41
42 <style>
43 .contact-page {
44 max-width: 100%;
45 margin: 0 auto;
46 padding: 2rem 0;
47 }
48
49 .contact-info {
50 margin: 2rem 0;
51 }
52
53 .email-section {
54 margin: 1.5rem 0;
55 padding: 1rem;
56 background: var(--code-bg);
57 border-radius: 8px;
58 border-left: 4px solid var(--accent);
59 }
60
61 .email-link {
62 font-size: 1.25rem;
63 font-weight: 600;
64 color: var(--accent);
65 text-decoration: none;
66 word-break: break-all;
67 }
68
69 .email-link:hover {
70 text-decoration: underline;
71 }
72
73 .topics {
74 margin: 2rem 0;
75 }
76
77 .topics ul {
78 list-style-type: disc;
79 margin-left: 1.5rem;
80 }
81
82 .topics li {
83 margin: 0.5rem 0;
84 line-height: 1.6;
85 }
86
87 @media (max-width: 768px) {
88 .contact-page {
89 padding: 1rem 0;
90 }
91
92 .email-link {
93 font-size: 1.1rem;
94 }
95 }
96 </style>